haex/haex-hub-mirror
1
0
Fork 0
mirror of https://github.com/haexhub/haex-hub.git synced 2025-12-17 22:40:51 +01:00
Code Issues Packages Projects Releases Wiki Activity

switch to nuxt layers

Browse Source
This commit is contained in:
Martin Drechsel
2025-05-22 06:55:53 +02:00
parent 2a69c07743
commit 96fd11d3d6
36 changed files with 101 additions and 1477 deletions
Download Patch File Download Diff File Expand all files Collapse all files

95
src/components/ui/dialog/index.vue
View File

@ -1,95 +0,0 @@
<template>
<slot name="trigger" :id> </slot>
<div
:id
class="overlay modal overlay-open:opacity-100 hidden modal-middle [--tab-accessibility-limited:false] overflow-scroll p-0 sm:p-4"
role="dialog"
ref="modalRef"
>
<div
class="overlay-animation-target overlay-open:mt-4 overlay-open:duration-500 mt-12 transition-all ease-out modal-dialog overlay-open:opacity-100"
>
<div class="modal-content">
<div class="modal-header">
<slot name="title">
<h3 v-if="title" class="modal-title text-base sm:text-lg">
{{ title }}
</h3>
</slot>
<button
type="button"
class="btn btn-text btn-circle btn-sm absolute end-3 top-3"
:aria-label="t('close')"
@click="open = false"
tabindex="1"
>
<Icon name="mdi:close" size="18" />
</button>
</div>
<div class="modal-body text-sm sm:text-base py-1">
<slot />
</div>
<div class="modal-footer flex-wrap">
<slot name="buttons" />
</div>
</div>
</div>
</div>
</template>
<script setup lang="ts">
import { HSOverlay } from "flyonui/flyonui";
export interface IDom {
class?: String;
text: String;
}
const id = useId();
defineProps({
title: {
type: String,
default: "",
},
});
const open = defineModel<boolean>("open", { default: false });
const { t } = useI18n();
const modalRef = useTemplateRef("modalRef");
const modal = ref<HSOverlay>();
watch(open, async () => {
console.log("open modal", open.value);
if (open.value) {
await modal.value?.open();
} else {
await modal.value?.close(true);
console.log("close dialog");
}
});
onMounted(() => {
if (!modalRef.value) return;
modal.value = new HSOverlay(modalRef.value, { isClosePrev: true });
modal.value.on("close", () => {
console.log("close it from event", open.value);
open.value = false;
});
});
</script>
<i18n lang="json">
{
"de": {
"close": "Schließen"
},
"en": {
"close": "Close"
}
}
</i18n>

58
src/components/ui/dialog/test.vue
View File

@ -1,58 +0,0 @@
<template>
<button
type="button"
class="btn btn-primary"
aria-haspopup="dialog"
aria-expanded="false"
aria-controls="basic-modal"
data-overlay="#basic-modal"
>
Open modal
</button>
<div
id="basic-modal"
class="overlay modal overlay-open:opacity-100 hidden"
role="dialog"
tabindex="-1"
>
<div class="modal-dialog overlay-open:opacity-100">
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title">Dialog Title</h3>
<button
type="button"
class="btn btn-text btn-circle btn-sm absolute end-3 top-3"
aria-label="Close"
data-overlay="#basic-modal"
>
<span class="icon-[tabler--x] size-4"></span>
</button>
</div>
<div class="modal-body">
This is some placeholder content to show the scrolling behavior for
modals. Instead of repeating the text in the modal, we use an inline
style to set a minimum height, thereby extending the length of the
overall modal and demonstrating the overflow scrolling. When content
becomes longer than the height of the viewport, scrolling will move
the modal as needed.
</div>
<div class="modal-footer">
<button
type="button"
class="btn btn-soft btn-secondary"
data-overlay="#basic-modal"
>
Close
</button>
<button
type="button"
class="btn btn-primary"
>
Save changes
</button>
</div>
</div>
</div>
</div>
</template>

5
src/components/ui/dialog/title.vue
View File

@ -1,5 +0,0 @@
<template>
<h3 class="modal-title">
<slot />
</h3>
</template>