zwischenstand

src/components/ui/accordion/index.vue

@@ -0,0 +1,43 @@
+<template>
+  <div class="accordion divide-neutral/20 divide-y">
+    <div class="accordion-item active" :id="itemId" ref="accordionRef">
+      <button
+        class="accordion-toggle inline-flex items-center gap-x-4 text-start"
+        :aria-controls="collapseId"
+        aria-expanded="true"
+        type="button"
+      >
+        <span
+          class="icon-[tabler--chevron-right] accordion-item-active:rotate-90 size-5 shrink-0 transition-transform duration-300 rtl:rotate-180"
+        ></span>
+        <slot name="title" />
+      </button>
+      <div
+        :id="collapseId"
+        class="accordion-content w-full overflow-hidden transition-[height] duration-300"
+        :aria-labelledby="itemId"
+        role="region"
+      >
+        <div class="px-5 pb-4">
+          <slot />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { HSAccordion } from "flyonui/flyonui";
+
+const itemId = useId();
+const collapseId = useId();
+
+const accordionRef = useTemplateRef("accordionRef");
+const accordion = ref<HSAccordion>();
+
+onMounted(() => {
+  if (accordionRef.value) {
+    accordion.value = new HSAccordion(accordionRef.value);
+  }
+});
+</script>

src/components/ui/dialog/index.vue

@@ -1,9 +1,5 @@
 <template>
-  <slot
-    name="trigger"
-    :id
-  >
-  </slot>
+  <slot name="trigger" :id> </slot>
 
   <div
     :id
@@ -17,10 +13,7 @@
       <div class="modal-content">
         <div class="modal-header">
           <slot name="title">
-            <h3
-              v-if="title"
-              class="modal-title text-base sm:text-lg"
-            >
+            <h3 v-if="title" class="modal-title text-base sm:text-lg">
               {{ title }}
             </h3>
           </slot>
@@ -32,10 +25,7 @@
             @click="open = false"
             tabindex="1"
           >
-            <Icon
-              name="mdi:close"
-              size="18"
-            />
+            <Icon name="mdi:close" size="18" />
           </button>
         </div>
         <div class="modal-body text-sm sm:text-base py-1">
@@ -50,7 +40,7 @@
 </template>
 
 <script setup lang="ts">
-import { HSOverlay } from 'flyonui/flyonui';
+import { HSOverlay } from "flyonui/flyonui";
 
 export interface IDom {
   class?: String;
@@ -63,38 +53,39 @@ defineProps({
   trigger: {
     type: Object as PropType<IDom>,
     default: () => ({
-      class: '',
-      text: '',
+      class: "",
+      text: "",
     }),
   },
 
   title: {
     type: String,
-    default: '',
+    default: "",
   },
 
   description: {
     type: Object as PropType<IDom>,
     default: () => ({
-      class: '',
-      text: '',
+      class: "",
+      text: "",
     }),
     required: false,
   },
 });
 
-const open = defineModel<boolean>('open', { default: false });
+const open = defineModel<boolean>("open", { default: false });
 
 const { t } = useI18n();
-const modalRef = useTemplateRef('modalRef');
+const modalRef = useTemplateRef("modalRef");
 const modal = ref<HSOverlay>();
 
 watch(open, async () => {
+  console.log("open modal", open.value);
   if (open.value) {
-    //console.log('open modal', modal.value?.open);
     await modal.value?.open();
   } else {
-    await modal.value?.close(true);
+    const res = await modal.value?.close(true);
+    console.log("close dialog", res);
   }
 });
 
@@ -102,8 +93,8 @@ 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);
+  modal.value.on("close", () => {
+    console.log("close it from event", open.value);
     open.value = false;
   });
 });

src/components/ui/sidebar/link/extension.vue

@@ -0,0 +1,49 @@
+<template>
+  <li
+    @click="triggerNavigate"
+    class="hover:text-primary rounded"
+    :class="{ ['bg-base-300']: isActive }"
+  >
+    <UiTooltip :tooltip="tooltip ?? name" direction="right-start">
+      <NuxtLinkLocale
+        :to="{ name: 'haexExtension', params: { extensionId: props.id } }"
+        class="flex items-center justify-center cursor-pointer tooltip-toogle"
+        ref="link"
+      >
+        <div v-html="icon" class="shrink-0 size-6" />
+        <!-- <Icon mode="svg" :name="icon" class="shrink-0 size-6" /> -->
+      </NuxtLinkLocale>
+    </UiTooltip>
+  </li>
+</template>
+
+<script setup lang="ts">
+import { type ISidebarItem } from "#imports";
+
+const props = defineProps<ISidebarItem>();
+console.log("image", props.icon);
+const router = useRouter();
+
+const isActive = computed(() => {
+  if (props.to?.name === "haexExtension") {
+    return getSingleRouteParam(router.currentRoute.value.params.extensionId) === props.id;
+  } else {
+    return props.to?.name === router.currentRoute.value.meta.name;
+  }
+});
+
+const link = useTemplateRef("link");
+
+const triggerNavigate = () => link.value?.$el.click();
+
+/* computed(() => {
+    const found = useRouter()
+      .getRoutes()
+      .find((route) => route.name === useLocaleRoute()(props.to)?.name);
+    console.log('found route', found, useRoute());
+    return (
+      found?.name === useRoute().name ||
+      found?.children.some((child) => child.name === useRoute().name)
+    );
+  }); */
+</script>