init commit

src/components/ui/dialog/index.vue

@@ -0,0 +1,121 @@
+<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({
+  trigger: {
+    type: Object as PropType<IDom>,
+    default: () => ({
+      class: '',
+      text: '',
+    }),
+  },
+
+  title: {
+    type: String,
+    default: '',
+  },
+
+  description: {
+    type: Object as PropType<IDom>,
+    default: () => ({
+      class: '',
+      text: '',
+    }),
+    required: false,
+  },
+});
+
+const open = defineModel<boolean>('open', { default: false });
+
+const { t } = useI18n();
+const modalRef = useTemplateRef('modalRef');
+const modal = ref<HSOverlay>();
+
+watch(open, async () => {
+  if (open.value) {
+    //console.log('open modal', modal.value?.open);
+    await modal.value?.open();
+  } else {
+    await modal.value?.close(true);
+  }
+});
+
+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>

src/components/ui/dialog/test.vue

@@ -0,0 +1,58 @@
+<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>

src/components/ui/dialog/title.vue

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