fix submit handler

src/components/haex/pass/group/breadcrumbs.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="breadcrumbs">
+  <div class="breadcrumbs sticky top-0">
     <ul>
       <li>
         <NuxtLinkLocale :to="{ name: 'passwordGroupItems' }">

src/components/haex/pass/group/index.vue

@@ -5,6 +5,7 @@
       :title="mode === 'create' ? t('title.create') : t('title.edit')"
       icon="mdi:folder-plus-outline"
       @close="$emit('close')"
+      body-class="px-0"
     >
       <form
         class="flex flex-col gap-4 w-full p-4"
@@ -17,6 +18,7 @@
           autofocus
           v-model="group.name"
           ref="nameRef"
+          @keyup.enter="$emit('submit')"
         />
 
         <UiInput
@@ -24,9 +26,10 @@
           :check-input="check"
           :label="t('description')"
           :placeholder="t('description')"
+          @keyup.enter="$emit('submit')"
         />
 
-        <div class="flex gap-4">
+        <div class="flex flex-wrap gap-4">
           <UiSelectIcon
             v-model="group.icon"
             default-icon="mdi:folder-outline"

src/components/haex/pass/item/details.vue

@@ -1,6 +1,9 @@
 <template>
   <div class="h-full overflow-scroll">
-    <div class="flex flex-col gap-4 w-full p-4">
+    <form
+      class="flex flex-col gap-4 w-full p-4"
+      @submit.prevent="$emit('submit')"
+    >
       <UiInput
         v-show="!read_only || itemDetails.title"
         :check-input="check"
@@ -11,6 +14,7 @@
         autofocus
         ref="titleRef"
         v-model.trim="itemDetails.title"
+        @keyup.enter="$emit('submit')"
       />
 
       <UiInput
@@ -66,7 +70,7 @@
         @keyup.enter.stop
         class="h-52"
       />
-    </div>
+    </form>
   </div>
 </template>
 
@@ -79,6 +83,7 @@ defineProps<{
   withCopyButton?: boolean
 }>()
 
+defineEmits(['submit'])
 const { t } = useI18n()
 
 const itemDetails = defineModel<SelectHaexPasswordsItemDetails>({
@@ -89,10 +94,10 @@ const preventClose = defineModel<boolean>('preventClose')
 
 const check = defineModel<boolean>('check-input', { default: false })
 
-onKeyStroke('escape', (e) => {
+/* onKeyStroke('escape', (e) => {
   e.stopPropagation()
   e.stopImmediatePropagation()
-})
+}) */
 
 const titleRef = useTemplateRef('titleRef')
 onStartTyping(() => {

src/components/haex/pass/item/index.vue

@@ -78,6 +78,7 @@
               :read_only
               :defaultIcon
               v-model:prevent-close="preventClose"
+              @submit="$emit('submit')"
             />
           </div>
 
@@ -127,6 +128,7 @@ const emit = defineEmits<{
   close: [void]
   addKeyValue: [void]
   removeKeyValue: [string]
+  submit: [void]
 }>()
 
 const read_only = defineModel<boolean>('read_only', { default: false })

src/components/ui/card/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="card">
+  <div class="card min-w-56">
     <slot name="image" />
 
     <div

src/components/ui/input/index.vue

@@ -22,9 +22,10 @@
             :placeholder="placeholder || label"
             :readonly="read_only"
             :type
-            class="ps-3"
+            class="ps-2"
             ref="inputRef"
             v-model="input"
+            @keyup="(e) => $emit('keyup', e)"
           />
           <label
             :for="id"
@@ -80,6 +81,11 @@ const input = defineModel<string | number | undefined | null>({
 const inputRef = useTemplateRef('inputRef')
 defineExpose({ inputRef })
 
+const emit = defineEmits<{
+  error: [string[]]
+  keyup: [KeyboardEvent]
+}>()
+
 const props = defineProps({
   placeholder: {
     type: String,
@@ -148,8 +154,6 @@ watch(
   },
 )
 
-const emit = defineEmits(['error'])
-
 const checkInput = () => {
   if (props.rules) {
     const result = props.rules.safeParse(input.value)

src/components/ui/select/color.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="flex items-center gap-4 relative">
+  <div class="flex flex-wrap items-center gap-4 relative">
     <UiButton
       :style="{ 'background-color': model }"
       :class="[textColorClass]"

src/pages/vault/[vaultId]/passwords.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="p-2 h-full">
+  <div class="p-2 min-h-full">
     <NuxtPage />
   </div>
 </template>

src/pages/vault/[vaultId]/passwords/[[groupId]]/edit.vue

@@ -1,5 +1,6 @@
 <template>
   <div>
+    currentGroup{{ currentGroup }}
     <HaexPassGroup
       v-model="group"
       mode="edit"
@@ -26,8 +27,8 @@ const group = ref<SelectHaexPasswordsGroups>()
 
 watch(
   currentGroup,
-  (newGroup) => {
+  () => {
-    group.value = JSON.parse(JSON.stringify(newGroup))
+    group.value = JSON.parse(JSON.stringify(currentGroup.value))
   },
   { immediate: true },
 )
@@ -43,7 +44,7 @@ const onClose = () => {
 
 const { add } = useSnackbar()
 
-const { updateAsync } = usePasswordGroupStore()
+const { updateAsync, syncGroupItemsAsync } = usePasswordGroupStore()
 
 const onSaveAsync = async () => {
   try {
@@ -53,7 +54,7 @@ const onSaveAsync = async () => {
     if (errors.value.name.length || errors.value.description.length) return
 
     await updateAsync(group.value)
-
+    syncGroupItemsAsync()
     add({ type: 'success', text: t('change.success') })
     onClose()
   } catch (error) {

src/pages/vault/[vaultId]/passwords/[[groupId]]/index.vue

@@ -1,13 +1,12 @@
 <template>
-  <div class="relative h-full">
+  <div class="h-full relative">
     <div class="h-full">
+      <HaexPassGroupBreadcrumbs
+        :items="breadCrumbs"
+        class="px-2 z-10 bg-base-200"
+        v-show="breadCrumbs.length"
+      />
       <div class="h-full overflow-auto flex flex-col">
-        <HaexPassGroupBreadcrumbs
-          :items="breadCrumbs"
-          class="px-2"
-          v-show="breadCrumbs.length"
-        />
-
         <HaexPassMobileMenu
           :menu-items="groupItems"
           ref="listRef"

src/pages/vault/[vaultId]/passwords/[[groupId]]/item/[itemId].vue

@@ -4,6 +4,7 @@
       :history="item.history"
       :read_only
       @close="onClose"
+      @submit="onUpdateAsync"
       v-model:details="item.details"
       v-model:key-values-add="item.keyValuesAdd"
       v-model:key-values-delete="item.keyValuesDelete"
@@ -14,7 +15,7 @@
       class="fixed bottom-4 flex justify-between transition-all pointer-events-none right-0 sm:items-center items-end"
       :class="[isVisible ? 'left-15 ' : 'left-0']"
     >
-      <div class="flex items-center justify-center w-full">
+      <div class="flex items-center justify-center flex-1">
         <UiTooltip :tooltip="t('abort')">
           <UiButton
             class="btn-accent btn-square"
@@ -71,7 +72,7 @@
         </UiButton>
       </UiTooltip>
 
-      <div class="flex items-center justify-center w-full">
+      <div class="flex items-center justify-center flex-1">
         <UiTooltip :tooltip="t('delete')">
           <UiButton
             class="btn-square btn-error"

src/pages/vault/[vaultId]/passwords/[[groupId]]/item/create.vue

@@ -4,15 +4,16 @@
       :default-icon="currentGroup?.icon"
       :history="item.history"
       @close="onClose"
+      @submit="onCreateAsync"
       v-model:details="item.details"
       v-model:key-values-add="item.keyValuesAdd"
     />
 
     <div
-      class="fixed bottom-4 flex justify-between transition-all pointer-events-none right-15 sm:items-center items-end"
+      class="fixed bottom-4 flex justify-between transition-all pointer-events-none right-0 sm:items-center items-end"
       :class="[isVisible ? 'left-15 ' : 'left-0']"
     >
-      <div class="flex items-center justify-center w-full">
+      <div class="flex items-center justify-center flex-1">
         <UiTooltip :tooltip="t('abort')">
           <UiButton
             class="btn-error btn-square"
@@ -33,7 +34,7 @@
           />
         </UiButton>
       </UiTooltip>
-      <div class="flex items-center justify-center w-full"></div>
+      <div class="flex items-center justify-center flex-1"></div>
     </div>
   </div>
 </template>

src/stores/passwords/groups.ts

@@ -128,7 +128,7 @@ const addGroupAsync = async (group: Partial<InsertHaexPasswordsGroups>) => {
     name: group.name,
     order: group.order,
   }
-  await currentVault.drizzle.insert(haexPasswordsGroups).values(newGroup)
+  await currentVault.drizzle?.insert(haexPasswordsGroups).values(newGroup)
   await syncGroupItemsAsync()
   return newGroup
 }
@@ -138,7 +138,7 @@ const readGroupAsync = async (groupId: string) => {
 
   return (
     await currentVault.drizzle
-      .select()
+      ?.select()
       .from(haexPasswordsGroups)
       .where(eq(haexPasswordsGroups.id, groupId))
   ).at(0)
@@ -166,12 +166,12 @@ const readGroupItemsAsync = async (
 
   if (groupId) {
     return currentVault.drizzle
-      .select()
+      ?.select()
       .from(haexPasswordsGroupItems)
       .where(eq(haexPasswordsGroupItems.groupId, groupId))
   } else {
     return currentVault.drizzle
-      .select()
+      ?.select()
       .from(haexPasswordsGroupItems)
       .where(isNull(haexPasswordsGroupItems.groupId))
   }
@@ -198,7 +198,7 @@ const getByParentIdAsync = async (
     console.log('getByParentIdAsync', parentId)
     if (parentId) {
       const groups = await currentVault.drizzle
-        .select()
+        ?.select()
         .from(haexPasswordsGroups)
         .where(eq(haexPasswordsGroups.parentId, parentId))
         .orderBy(sql`${haexPasswordsGroups.order} nulls last`)
@@ -206,7 +206,7 @@ const getByParentIdAsync = async (
       return groups
     } else {
       const groups = await currentVault.drizzle
-        .select()
+        ?.select()
         .from(haexPasswordsGroups)
         .where(isNull(haexPasswordsGroups.parentId))
         .orderBy(sql`${haexPasswordsGroups.order} nulls last`)
@@ -238,10 +238,20 @@ const updateAsync = async (group: InsertHaexPasswordsGroups) => {
   const { currentVault } = storeToRefs(useVaultStore())
   if (!group.id) return
 
+  const newGroup: InsertHaexPasswordsGroups = {
+    id: group.id,
+    color: group.color,
+    description: group.description,
+    icon: group.icon,
+    name: group.name,
+    order: group.order,
+    parentId: group.parentId,
+  }
+
   return currentVault.value.drizzle
     .update(haexPasswordsGroups)
-    .set(group)
+    .set(newGroup)
-    .where(eq(haexPasswordsGroups.id, group.id))
+    .where(eq(haexPasswordsGroups.id, newGroup.id))
 }
 
 const navigateToGroupItemsAsync = (groupId: string) => {

src/stores/passwords/history.ts

@@ -15,7 +15,7 @@ const getAsync = async (itemId: string | null) => {
     const { currentVault } = useVaultStore()
 
     const history = await currentVault.drizzle
-      .select()
+      ?.select()
       .from(haexPasswordsItemHistory)
       .where(eq(haexPasswordsItemHistory.itemId, itemId))
 

src/stores/vault/settings.ts

@@ -121,12 +121,14 @@ export const useVaultSettingsStore = defineStore('vaultSettingsStore', () => {
   const readDeviceNameAsync = async (id: string) => {
     const { currentVault } = useVaultStore()
 
-    const deviceName = await currentVault.drizzle.query.haexSettings.findFirst({
+    const deviceName = await currentVault.drizzle?.query.haexSettings.findFirst(
-      where: and(
+      {
-        eq(schema.haexSettings.type, VaultSettingsTypeEnum.deviceName),
+        where: and(
-        eq(schema.haexSettings.key, id),
+          eq(schema.haexSettings.type, VaultSettingsTypeEnum.deviceName),
-      ),
+          eq(schema.haexSettings.key, id),
-    })
+        ),
+      },
+    )
     console.log('readDeviceNameAsync', deviceName)
     return deviceName
   }
@@ -146,7 +148,7 @@ export const useVaultSettingsStore = defineStore('vaultSettingsStore', () => {
       return
     }
 
-    return currentVault.drizzle.insert(schema.haexSettings).values({
+    return currentVault.drizzle?.insert(schema.haexSettings).values({
       id: crypto.randomUUID(),
       type: VaultSettingsTypeEnum.deviceName,
       key: deviceId,
@@ -167,7 +169,7 @@ export const useVaultSettingsStore = defineStore('vaultSettingsStore', () => {
     if (!isNameOk.success) return
 
     return currentVault.drizzle
-      .update(schema.haexSettings)
+      ?.update(schema.haexSettings)
       .set({
         value: deviceName,
       })