refactore manifest and permission

src/components/haex/extension/card.vue

@@ -4,20 +4,9 @@
     v-bind="$attrs"
   >
     <div class="absolute top-2 right-2">
-      <UiDropdown class="btn btn-sm btn-text btn-circle">
-        <template #activator>
-          <Icon name="mdi:dots-vertical" />
-        </template>
-
-        <template #items>
-          <UiButton
-            class="btn-error btn-outline btn-sm"
-            @click="showRemoveDialog = true"
-          >
-            <Icon name="mdi:trash" /> {{ t('remove') }}
-          </UiButton>
-        </template>
-      </UiDropdown>
+      <UDropdownMenu>
+        <UiButton icon="mdi:dots-vertical" />
+      </UDropdownMenu>
     </div>
 
     <div class="card-header">
@@ -44,6 +33,7 @@
       <div class="card-actions" v-if="$slots.action">
         <slot name="action" />
       </div> -->
+      hier klicken
       <div
         class="size-20 absolute bottom-2 right-2"
         v-html="icon"

src/components/haex/extension/manifest/permissions/database.vue

@@ -1,71 +1,107 @@
 <template>
-  <UiAccordion v-if="database?.read?.length">
+  <UAccordion v-if="database?.read?.length">
     <template #title>
-      <h3>{{ t("permission.read") }}</h3>
+      <h3>{{ t('permission.read') }}</h3>
     </template>
 
     <ul class="space-y-0.5">
-      <li v-for="read in database?.read" class="flex items-center justify-between px-4 py-1">
-        <div class="flex items-center gap-1">
-          <input :id="Object.keys(read).at(0)" type="checkbox" class="checkbox" :checked="Object.values(read).at(0)" >
-          <label class="label-text text-base" :for="Object.keys(read).at(0)">{{ Object.keys(read).at(0) }}</label>
-        </div>
-      </li>
-    </ul>
-  </UiAccordion>
-
-  <UiAccordion v-if="database?.write?.length">
-    <template #title>
-      <h3>{{ t("permission.write") }}</h3>
-    </template>
-
-    <ul class="space-y-0.5">
-      <li v-for="write in database?.write" class="flex items-center justify-between px-4 py-0.5">
+      <li
+        v-for="read in database?.read"
+        class="flex items-center justify-between px-4 py-1"
+      >
         <div class="flex items-center gap-1">
           <input
-:id="Object.keys(write).at(0)" type="checkbox" class="checkbox"
-            :checked="Object.values(write).at(0)" >
-          <label class="label-text text-base" :for="Object.keys(write).at(0)">{{ Object.keys(write).at(0) }}</label>
+            :id="Object.keys(read).at(0)"
+            type="checkbox"
+            class="checkbox"
+            :checked="Object.values(read).at(0)"
+          />
+          <label
+            class="label-text text-base"
+            :for="Object.keys(read).at(0)"
+            >{{ Object.keys(read).at(0) }}</label
+          >
         </div>
       </li>
     </ul>
-  </UiAccordion>
+  </UAccordion>
 
-  <UiAccordion v-if="database?.create?.length">
+  <UAccordion v-if="database?.write?.length">
     <template #title>
-      <h3>{{ t("permission.create") }}</h3>
+      <h3>{{ t('permission.write') }}</h3>
     </template>
 
     <ul class="space-y-0.5">
-      <li v-for="create in database?.create" class="flex items-center justify-between px-4 py-0.5">
+      <li
+        v-for="write in database?.write"
+        class="flex items-center justify-between px-4 py-0.5"
+      >
         <div class="flex items-center gap-1">
           <input
-:id="Object.keys(create).at(0)" type="checkbox" class="checkbox"
-            :checked="Object.values(create).at(0)" >
-          <label class="label-text text-base" :for="Object.keys(create).at(0)">{{ Object.keys(create).at(0) }}</label>
+            :id="Object.keys(write).at(0)"
+            type="checkbox"
+            class="checkbox"
+            :checked="Object.values(write).at(0)"
+          />
+          <label
+            class="label-text text-base"
+            :for="Object.keys(write).at(0)"
+            >{{ Object.keys(write).at(0) }}</label
+          >
         </div>
       </li>
     </ul>
-  </UiAccordion>
+  </UAccordion>
+
+  <UAccordion v-if="database?.create?.length">
+    <template #title>
+      <h3>{{ t('permission.create') }}</h3>
+    </template>
+
+    <ul class="space-y-0.5">
+      <li
+        v-for="create in database?.create"
+        class="flex items-center justify-between px-4 py-0.5"
+      >
+        <div class="flex items-center gap-1">
+          <input
+            :id="Object.keys(create).at(0)"
+            type="checkbox"
+            class="checkbox"
+            :checked="Object.values(create).at(0)"
+          />
+          <label
+            class="label-text text-base"
+            :for="Object.keys(create).at(0)"
+            >{{ Object.keys(create).at(0) }}</label
+          >
+        </div>
+      </li>
+    </ul>
+  </UAccordion>
 </template>
 
 <script setup lang="ts">
-
-
-defineProps<{ database?: { read?: Record<string, boolean>[], write?: Record<string, boolean>[], create?: Record<string, boolean>[] } }>();
-const { t } = useI18n();
+defineProps<{
+  database?: {
+    read?: Record<string, boolean>[]
+    write?: Record<string, boolean>[]
+    create?: Record<string, boolean>[]
+  }
+}>()
+const { t } = useI18n()
 </script>
 
 <i18n lang="yaml">
-  de: 
-    permission: 
-      read: Lesen
-      write: Schreiben
-      create: Erstellen
+de:
+  permission:
+    read: Lesen
+    write: Schreiben
+    create: Erstellen
 
-  en: 
-    permission: 
-      read: Read
-      write: Write
-      create: Create
+en:
+  permission:
+    read: Read
+    write: Write
+    create: Create
 </i18n>

src/components/haex/extension/manifest/permissions/filesystem.vue

@@ -1,38 +1,56 @@
 <template>
-  <UiAccordion v-if="filesystem?.read?.length">
+  <UAccordion v-if="filesystem?.read?.length">
     <template #title>
       <h3>{{ t('permission.read') }}</h3>
     </template>
     <ul class="space-y-0.5">
-      <li v-for="read in filesystem?.read" class="flex items-center justify-between px-4 py-0.5">
+      <li
+        v-for="read in filesystem?.read"
+        class="flex items-center justify-between px-4 py-0.5"
+      >
         <div class="flex items-center gap-1">
-          <input :id="Object.keys(read).at(0)" type="checkbox" class="checkbox" :checked="Object.values(read).at(0)" >
-          <label class="label-text text-base" :for="Object.keys(read).at(0)">{{
-            Object.keys(read).at(0)
-          }}</label>
+          <input
+            :id="Object.keys(read).at(0)"
+            type="checkbox"
+            class="checkbox"
+            :checked="Object.values(read).at(0)"
+          />
+          <label
+            class="label-text text-base"
+            :for="Object.keys(read).at(0)"
+            >{{ Object.keys(read).at(0) }}</label
+          >
         </div>
       </li>
     </ul>
-  </UiAccordion>
+  </UAccordion>
 
-  <UiAccordion v-if="filesystem?.write?.length">
+  <UAccordion v-if="filesystem?.write?.length">
     <template #title>
       <h3>{{ t('permission.write') }}</h3>
     </template>
 
     <ul class="space-y-0.5">
-      <li v-for="write in filesystem?.write" class="flex items-center justify-between px-4 py-0.5">
+      <li
+        v-for="write in filesystem?.write"
+        class="flex items-center justify-between px-4 py-0.5"
+      >
         <div class="flex items-center gap-1">
           <input
-:id="Object.keys(write).at(0)" type="checkbox" class="checkbox"
-            :checked="Object.values(write).at(0)" >
-          <label class="label-text text-base" :for="Object.keys(write).at(0)">{{
-            Object.keys(write).at(0)
-          }}</label>
+            :id="Object.keys(write).at(0)"
+            type="checkbox"
+            class="checkbox"
+            :checked="Object.values(write).at(0)"
+          />
+          <label
+            class="label-text text-base"
+            :for="Object.keys(write).at(0)"
+            >{{ Object.keys(write).at(0) }}</label
+          >
         </div>
       </li>
     </ul>
-  </UiAccordion>
+  </UAccordion>
 </template>
 
 <script setup lang="ts">
@@ -46,13 +64,13 @@ const { t } = useI18n()
 </script>
 
 <i18n lang="yaml">
-  de: 
-    permission: 
-      read: Lesen
-      write: Schreiben
+de:
+  permission:
+    read: Lesen
+    write: Schreiben
 
-  en: 
-    permission: 
-      read: Read
-      write: Write
+en:
+  permission:
+    read: Read
+    write: Write
 </i18n>

src/components/haex/extension/manifest/permissions/http.vue

@@ -1,33 +1,43 @@
 <template>
-  <UiAccordion>
+  <UAccordion>
     <template #title>
-      <h3>{{ t("http.access") }}</h3>
+      <h3>{{ t('http.access') }}</h3>
     </template>
 
     <ul class="space-y-0.5">
-      <li v-for="access in http" class="flex items-center justify-between px-4 py-0.5">
+      <li
+        v-for="access in http"
+        class="flex items-center justify-between px-4 py-0.5"
+      >
         <div class="flex items-center gap-1">
           <input
-:id="Object.keys(access).at(0)" type="checkbox" class="checkbox"
-            :checked="Object.values(access).at(0)" >
-          <label class="label-text text-base" :for="Object.keys(access).at(0)">{{ Object.keys(access).at(0) }}</label>
+            :id="Object.keys(access).at(0)"
+            type="checkbox"
+            class="checkbox"
+            :checked="Object.values(access).at(0)"
+          />
+          <label
+            class="label-text text-base"
+            :for="Object.keys(access).at(0)"
+            >{{ Object.keys(access).at(0) }}</label
+          >
         </div>
       </li>
     </ul>
-  </UiAccordion>
+  </UAccordion>
 </template>
 
 <script setup lang="ts">
-defineProps<{ http?: Record<string, boolean>[] }>();
-const { t } = useI18n();
+defineProps<{ http?: Record<string, boolean>[] }>()
+const { t } = useI18n()
 </script>
 
 <i18n lang="yaml">
-  de: 
-    http: 
-      access: Internet Zugriff
+de:
+  http:
+    access: Internet Zugriff
 
-  en: 
-    http: 
-      access: Internet Access
+en:
+  http:
+    access: Internet Access
 </i18n>