mobile menu

src/components/vault/button/create.vue

@@ -2,7 +2,7 @@
   <UiDialog
     v-model:open="open"
     :title="t('title')"
-    class="btn btn-primary btn-outline shadow-md md:btn-lg"
+    class="btn btn-primary btn-outline shadow-md btn-lg"
     @click="open = true"
   >
     <template #trigger>
@@ -34,14 +34,14 @@
 
     <template #buttons>
       <UiButton
-        class="btn-error"
+        class="btn-error w-full sm:w-auto"
         @click="onClose"
       >
         {{ t('abort') }}
       </UiButton>
 
       <UiButton
-        class="btn-primary"
+        class="btn-primary w-full sm:w-auto"
         @click="onCreateAsync"
       >
         {{ t('create') }}

src/components/vault/button/open.vue

@@ -1,7 +1,7 @@
 <template>
   <UiDialogConfirm
     v-model:open="open"
-    class="btn btn-primary btn-outline shadow-md md:btn-lg"
+    class="btn btn-primary btn-outline shadow-md btn-lg"
     :confirm-label="t('open')"
     :abort-label="t('abort')"
     @abort="onAbort"
@@ -12,13 +12,14 @@
       <i18n-t
         keypath="title"
         tag="p"
-        class="flex gap-2"
+        class="flex gap-x-2 flex-wrap"
       >
         <template #haexvault>
           <UiTextGradient>HaexVault</UiTextGradient>
         </template>
       </i18n-t>
-      <p class="text-sm">{{ database.path }}</p>
+
+      <div class="text-sm">{{ props.path ?? database.path }}</div>
     </template>
 
     <template #trigger>
@@ -63,11 +64,6 @@ const database = reactive<{
   type: 'password',
 })
 
-watch(
-  () => props.path,
-  () => (database.path = props.path),
-)
-
 const initDatabase = () => {
   database.name = ''
   database.password = ''

src/components/vault/card/edit.vue

@@ -65,7 +65,7 @@
         </div>
 
         <div
-          class="flex flex-col items-center w-full min-h-14 gap-2 py-1"
+          class="flex items-center w-full min-h-14 gap-2 py-1"
           :style="{ color }"
         >
           <Icon
@@ -78,7 +78,7 @@
             v-show="read_only"
             class="overflow-hidden whitespace-nowrap"
           >
-            {{ title }}
+            a{{ title }}
           </h5>
         </div>
       </div>
@@ -91,6 +91,7 @@
         class="fixed bottom-2 left-0 w-full flex items-center justify-between px-4 md:hidden"
       >
         <div class="transition-all duration-500">
+          aa
           <button
             class="btn btn-square btn-error btn-outline"
             @click="onClose"

src/components/vault/card/index.vue

@@ -3,59 +3,61 @@
     <slot name="image" />
 
     <div class="card-header">
-      <div v-if="$slots.title || title">
-        <Icon v-if="icon" :name="icon" />
-        <h5 v-if="title" class="card-title mb-0">
-          {{ title }}
-        </h5>
-        <slot v-else name="title" />
-      </div>
-      <div class="text-base-content/50">Your journey starts here</div>
+      <slot name="header">
+        <div
+          v-if="$slots.title || title"
+          class="flex items-center gap-2"
+        >
+          <Icon
+            v-if="icon"
+            :name="icon"
+            size="28"
+          />
+          <h5
+            v-if="title"
+            class="card-title mb-0"
+          >
+            {{ title }}
+          </h5>
+          <slot
+            v-else
+            name="title"
+          />
+        </div>
+        <div class="text-base-content/50">{{ subtitle }}</div>
+      </slot>
     </div>
 
-    <div class="card-body">
+    <div class="card-body px-2 sm:px-6">
       <slot />
-      aaaaaaaaa
-      <div v-if="$slots.action" class="card-actions">
+      <div
+        v-if="$slots.action"
+        class="card-actions"
+      >
         <slot name="action" />
       </div>
     </div>
   </div>
-  <!-- <div class="bg-base-100 w-full mx-auto shadow h-full overflow-hidden pt-[7.5rem]">
-    <div
-      class="fixed top-0 right-0 z-10 transition-all duration-700 w-full font-semibold text-lg h-[7.5rem]"
-    >
-      <div
-        class="justify-center items-center flex flex-wrap border-b rounded-b border-secondary h-full"
-      >
-        <slot name="header" />
-      </div>
-    </div>
-
-    <div class="h-full overflow-scroll bg-base-200">
-      <slot />
-    </div>
-  </div> -->
 </template>
 
 <script setup lang="ts">
-const emit = defineEmits(["close", "submit"]);
+const emit = defineEmits(['close', 'submit'])
 
-defineProps<{ title?: string; icon?: string }>();
+defineProps<{ title?: string; subtitle?: string; icon?: string }>()
 
-const { escape, enter } = useMagicKeys();
+const { escape, enter } = useMagicKeys()
 
 watchEffect(async () => {
   if (escape.value) {
-    await nextTick();
-    emit("close");
+    await nextTick()
+    emit('close')
   }
-});
+})
 
 watchEffect(async () => {
   if (enter.value) {
-    await nextTick();
-    emit("submit");
+    await nextTick()
+    emit('submit')
   }
-});
+})
 </script>

src/components/vault/group/index.vue

@@ -17,7 +17,6 @@
         v-model.trim="vaultGroup.name"
         :label="t('vaultGroup.name')"
         :placeholder="t('vaultGroup.name')"
-        :rules="vaultGroupSchema.name"
         :with-copy-button="read_only"
         :read_only
         autofocus
@@ -29,18 +28,17 @@
         :read_only
         :label="t('vaultGroup.description')"
         :placeholder="t('vaultGroup.description')"
-        :rules="vaultGroupSchema.description"
         :with-copy-button="read_only"
       />
 
-      <UiColorPicker
+      <UiSelectColor
         v-model="vaultGroup.color"
         :read_only
         :label="t('vaultGroup.color')"
         :placeholder="t('vaultGroup.color')"
       />
 
-      <UiIconPicker
+      <UiSelectIcon
         v-model="vaultGroup.icon"
         :read_only
         :label="t('vaultGroup.icon')"
@@ -51,29 +49,26 @@
 </template>
 
 <script setup lang="ts">
-import type { RouteLocationNormalizedLoadedGeneric } from 'vue-router';
-import {
-  vaultGroupSchema,
-  type SelectVaultGroup,
-} from '~/database/schemas/vault';
+import type { RouteLocationNormalizedLoadedGeneric } from 'vue-router'
+import type { SelectHaexPasswordsGroups } from '~~/src-tauri/database/schemas/vault'
 
-const { t } = useI18n();
-const showConfirmation = ref(false);
-const vaultGroup = defineModel<SelectVaultGroup>({ required: true });
-const read_only = defineModel<boolean>('read_only');
+const { t } = useI18n()
+const showConfirmation = ref(false)
+const vaultGroup = defineModel<SelectHaexPasswordsGroups>({ required: true })
+const read_only = defineModel<boolean>('read_only')
 const props = defineProps({
-  originally: Object as PropType<SelectVaultGroup>,
-});
+  originally: Object as PropType<SelectHaexPasswordsGroups>,
+})
 
 defineEmits<{
-  submit: [to?: RouteLocationNormalizedLoadedGeneric];
-  close: [void];
-  back: [void];
-  reject: [to?: RouteLocationNormalizedLoadedGeneric];
-}>();
+  submit: [to?: RouteLocationNormalizedLoadedGeneric]
+  close: [void]
+  back: [void]
+  reject: [to?: RouteLocationNormalizedLoadedGeneric]
+}>()
 
 const hasChanges = computed(() => {
-  console.log('group has changes', props.originally, vaultGroup.value);
+  console.log('group has changes', props.originally, vaultGroup.value)
   if (!props.originally) {
     if (
       vaultGroup.value.color?.length ||
@@ -81,13 +76,13 @@ const hasChanges = computed(() => {
       vaultGroup.value.icon?.length ||
       vaultGroup.value.name?.length
     ) {
-      return true;
+      return true
     } else {
-      return false;
+      return false
     }
   }
-  return JSON.stringify(props.originally) !== JSON.stringify(vaultGroup.value);
-});
+  return JSON.stringify(props.originally) !== JSON.stringify(vaultGroup.value)
+})
 
 /* const onClose = () => {
   if (props.originally) vaultGroup.value = { ...props.originally };