laden von erweiterungen implementiert

src/components/ui/button/index.vue

@@ -1,25 +1,14 @@
 <template>
-  <button
-    class="btn join-item"
-    :class="{
-      'btn-sm':
-        currentScreenSize === 'sm' ||
-        currentScreenSize === '' ||
-        currentScreenSize === 'xs',
-    }"
-    :type
-  >
+  <button class="btn join-item" :type>
     <slot />
   </button>
 </template>
 
 <script setup lang="ts">
-const { currentScreenSize } = storeToRefs(useUiStore());
-
 defineProps({
   type: {
-    type: String as PropType<'reset' | 'submit' | 'button'>,
-    default: 'button',
+    type: String as PropType<"reset" | "submit" | "button">,
+    default: "button",
   },
 });
 </script>

src/components/ui/dialog/index.vue

@@ -50,27 +50,10 @@ export interface IDom {
 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 });
@@ -84,8 +67,8 @@ watch(open, async () => {
   if (open.value) {
     await modal.value?.open();
   } else {
-    const res = await modal.value?.close(true);
-    console.log("close dialog", res);
+    await modal.value?.close(true);
+    console.log("close dialog");
   }
 });
 

src/components/ui/input/index.vue

@@ -1,6 +1,6 @@
 <template>
   <span>
-    <fieldset class="join w-full">
+    <!-- <fieldset class="join w-full">
       <slot name="prepend" />
 
       <span class="input-group join-item">
@@ -66,30 +66,45 @@
       >
         <Icon :name="copied ? 'mdi:check' : 'mdi:content-copy'" />
       </UiButton>
-      <!-- <button
-        v-if="withCopyButton"
-        class="btn btn-outline btn-accent join-item h-auto"
-        :class="{
-          'btn-sm':
-            currentScreenSize === 'sm' ||
-            currentScreenSize === '' ||
-            currentScreenSize === 'xs',
-        }"
+      
+    </fieldset> -->
+    <fieldset class="join w-full p-1">
+      <slot name="prepend" />
+
+      <div class="input join-item">
+        <Icon :name="prependIcon" class="my-auto shrink-0" />
+
+        <div class="input-floating grow">
+          <input
+            :id
+            :name="name ?? id"
+            :placeholder="placeholder || label"
+            :type
+            :autofocus
+            class="ps-3"
+            v-bind="$attrs"
+            v-model="input"
+            ref="inputRef"
+            :readonly="read_only"
+          />
+          <label class="input-floating-label" :for="id">{{ label }}</label>
+        </div>
+
+        <Icon :name="appendIcon" class="my-auto shrink-0" />
+      </div>
+
+      <slot name="append" class="h-auto" />
+
+      <UiButton
+        class="btn-outline btn-accent btn-square join-item h-auto"
         @click="copy(`${input}`)"
-        type="button"
       >
         <Icon :name="copied ? 'mdi:check' : 'mdi:content-copy'" />
-      </button> -->
+      </UiButton>
     </fieldset>
 
-    <span
-      class="flex flex-col px-2 pt-0.5"
-      v-show="errors"
-    >
-      <span
-        v-for="error in errors"
-        class="label-text-alt text-error"
-      >
+    <span class="flex flex-col px-2 pt-0.5" v-show="errors">
+      <span v-for="error in errors" class="label-text-alt text-error">
         {{ error }}
       </span>
     </span>
@@ -97,9 +112,9 @@
 </template>
 
 <script setup lang="ts">
-import { type ZodSchema } from 'zod';
+import { type ZodSchema } from "zod";
 
-const inputRef = useTemplateRef('inputRef');
+const inputRef = useTemplateRef("inputRef");
 defineExpose({ inputRef });
 
 defineOptions({
@@ -109,45 +124,45 @@ defineOptions({
 const props = defineProps({
   placeholder: {
     type: String,
-    default: '',
+    default: "",
   },
   type: {
     type: String as PropType<
-      | 'button'
-      | 'checkbox'
-      | 'color'
-      | 'date'
-      | 'datetime-local'
-      | 'email'
-      | 'file'
-      | 'hidden'
-      | 'image'
-      | 'month'
-      | 'number'
-      | 'password'
-      | 'radio'
-      | 'range'
-      | 'reset'
-      | 'search'
-      | 'submit'
-      | 'tel'
-      | 'text'
-      | 'time'
-      | 'url'
-      | 'week'
+      | "button"
+      | "checkbox"
+      | "color"
+      | "date"
+      | "datetime-local"
+      | "email"
+      | "file"
+      | "hidden"
+      | "image"
+      | "month"
+      | "number"
+      | "password"
+      | "radio"
+      | "range"
+      | "reset"
+      | "search"
+      | "submit"
+      | "tel"
+      | "text"
+      | "time"
+      | "url"
+      | "week"
     >,
-    default: 'text',
+    default: "text",
   },
   label: String,
   name: String,
   prependIcon: {
     type: String,
-    default: '',
+    default: "",
   },
   prependLabel: String,
   appendIcon: {
     type: String,
-    default: '',
+    default: "",
   },
   appendLabel: String,
   rules: Object as PropType<ZodSchema>,
@@ -158,7 +173,7 @@ const props = defineProps({
 });
 
 const input = defineModel<string | number | undefined | null>({
-  default: '',
+  default: "",
   required: true,
 });
 
@@ -167,7 +182,7 @@ onMounted(() => {
   if (props.autofocus && inputRef.value) inputRef.value.focus();
 });
 
-const errors = defineModel<string[] | undefined>('errors');
+const errors = defineModel<string[] | undefined>("errors");
 
 const id = useId();
 
@@ -180,7 +195,7 @@ watch(
   }
 );
 
-const emit = defineEmits(['error']);
+const emit = defineEmits(["error"]);
 
 const checkInput = () => {
   if (props.rules) {
@@ -188,7 +203,7 @@ const checkInput = () => {
     //console.log('check result', result.error, props.rules);
     if (!result.success) {
       errors.value = result.error.errors.map((error) => error.message);
-      emit('error', errors.value);
+      emit("error", errors.value);
     } else {
       errors.value = [];
     }

src/components/ui/input/password.vue

@@ -9,10 +9,7 @@
     v-model="value"
   >
     <template #append>
-      <UiButton
-        class="btn-outline btn-accent h-auto"
-        @click="tooglePasswordType"
-      >
+      <UiButton class="btn-outline btn-accent btn-square h-auto" @click="tooglePasswordType">
         <Icon :name="type === 'password' ? 'mdi:eye' : 'mdi:eye-off'" />
       </UiButton>
     </template>
@@ -20,7 +17,7 @@
 </template>
 
 <script setup lang="ts">
-import type { ZodSchema } from 'zod';
+import type { ZodSchema } from "zod";
 
 const { t } = useI18n();
 const { currentScreenSize } = storeToRefs(useUiStore());
@@ -35,10 +32,10 @@ defineProps({
   autofocus: Boolean,
 });
 
-const type = ref<'password' | 'text'>('password');
+const type = ref<"password" | "text">("password");
 
 const tooglePasswordType = () => {
-  type.value = type.value === 'password' ? 'text' : 'password';
+  type.value = type.value === "password" ? "text" : "password";
 };
 </script>
 

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

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

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

@@ -8,9 +8,10 @@
       <NuxtLinkLocale
         :to
         class="flex items-center justify-center cursor-pointer tooltip-toogle"
-        ref="link"
+        ref="linkRef"
       >
-        <Icon :name="icon" class="shrink-0 size-6" />
+        <div v-if="iconType === 'svg'" v-html="icon" class="shrink-0 size-5" />
+        <Icon v-else :name="icon" size="1.5em" />
       </NuxtLinkLocale>
     </UiTooltip>
   </li>
@@ -23,6 +24,7 @@ const props = defineProps<ISidebarItem>();
 
 const router = useRouter();
 
+console.log("to", props.to);
 const isActive = computed(() => {
   if (props.to?.name === "haexExtension") {
     return getSingleRouteParam(router.currentRoute.value.params.extensionId) === props.id;
@@ -31,9 +33,9 @@ const isActive = computed(() => {
   }
 });
 
-const link = useTemplateRef("link");
+const linkRef = useTemplateRef("linkRef");
 
-const triggerNavigate = () => link.value?.$el.click();
+const triggerNavigate = () => linkRef.value?.$el.click();
 
 /* computed(() => {
   const found = useRouter()