fixed group reactivity

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

@@ -1,6 +1,6 @@
 <template>
   <UiCard
-    v-if="modelValue"
+    v-if="group"
     :title="mode === 'create' ? t('title.create') : t('title.edit')"
     icon="mdi:folder-plus-outline"
     @close="$emit('close')"
@@ -14,12 +14,12 @@
         :label="t('name')"
         :placeholder="t('name')"
         autofocus
-        v-model="modelValue.name"
+        v-model="group.name"
         ref="nameRef"
       />
 
       <UiInput
-        v-model="modelValue.description"
+        v-model="group.description"
         :check-input="check"
         :label="t('description')"
         :placeholder="t('description')"
@@ -27,11 +27,11 @@
 
       <div class="flex gap-4">
         <UiSelectIcon
-          v-model="modelValue.icon"
+          v-model="group.icon"
           default-icon="mdi:folder-outline"
         />
 
-        <UiSelectColor v-model="modelValue.color" />
+        <UiSelectColor v-model="group.color" />
       </div>
 
       <div class="flex flex-wrap justify-end gap-4">
@@ -58,9 +58,10 @@
 <script setup lang="ts">
 import type { SelectHaexPasswordsGroups } from '~~/src-tauri/database/schemas/vault'
 
-defineModel<SelectHaexPasswordsGroups | null>()
+const group = defineModel<SelectHaexPasswordsGroups | null>()
 defineEmits(['close', 'submit', 'back'])
 defineProps<{ mode: 'create' | 'edit' }>()
+
 const { t } = useI18n()
 
 const check = ref<boolean>(false)

src/components/ui/input/index.vue

@@ -16,23 +16,24 @@
 
         <div class="input-floating grow">
           <input
+            :autofocus
             :id
-            ref="inputRef"
-            v-model="input"
             :name="name ?? id"
             :placeholder="placeholder || label"
-            :type
-            :autofocus
-            class="ps-3"
             :readonly="read_only"
+            :type
+            class="ps-3"
+            ref="inputRef"
+            v-model="input"
           />
           <label
-            class="input-floating-label"
             :for="id"
+            class="input-floating-label"
           >
             {{ label }}
           </label>
         </div>
+        {{ input }}
 
         <Icon
           v-if="appendIcon"

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

@@ -1,7 +1,7 @@
 <template>
   <div>
     <HaexPassGroup
-      v-model="currentGroup"
+      v-model="group"
       mode="edit"
       @close="onClose"
       @submit="onSaveAsync"
@@ -10,6 +10,8 @@
 </template>
 
 <script setup lang="ts">
+import type { SelectHaexPasswordsGroups } from '~~/src-tauri/database/schemas/vault'
+
 definePageMeta({
   name: 'passwordGroupEdit',
 })
@@ -20,7 +22,15 @@ const check = ref(false)
 
 const { currentGroup } = storeToRefs(usePasswordGroupStore())
 
-//const group = computed(() => currentGroup.value)
+const group = ref<SelectHaexPasswordsGroups>()
+
+watch(
+  currentGroup,
+  (newGroup) => {
+    group.value = JSON.parse(JSON.stringify(newGroup))
+  },
+  { immediate: true },
+)
 
 const errors = ref({
   name: [],
@@ -36,14 +46,14 @@ const { add } = useSnackbar()
 const onSaveAsync = async () => {
   try {
     check.value = true
-    if (!currentGroup.value) return
+    if (!group.value) return
 
     console.log('onSave', errors.value)
     if (errors.value.name.length || errors.value.description.length) return
 
     const { updateAsync } = usePasswordGroupStore()
 
-    await updateAsync(currentGroup.value)
+    await updateAsync(group.value)
 
     add({ type: 'success', text: t('change.success') })
     onClose()

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

@@ -161,16 +161,20 @@ const item = reactive<{
 
 const { currentItem } = storeToRefs(usePasswordItemStore())
 
-watch(currentItem, () => {
-  item.details = JSON.parse(JSON.stringify(currentItem.value?.details))
-  item.keyValues = JSON.parse(JSON.stringify(currentItem.value?.keyValues))
-  item.history = JSON.parse(JSON.stringify(currentItem.value?.history))
-  item.keyValuesAdd = []
-  item.keyValuesDelete = []
-  item.originalDetails = JSON.stringify(currentItem.value?.details)
-  item.originalKeyValues = JSON.stringify(currentItem.value?.keyValues)
-  ignoreChanges.value = false
-})
+watch(
+  currentItem,
+  (newItem) => {
+    item.details = JSON.parse(JSON.stringify(newItem?.details))
+    item.keyValues = JSON.parse(JSON.stringify(newItem?.keyValues))
+    item.history = JSON.parse(JSON.stringify(newItem?.history))
+    item.keyValuesAdd = []
+    item.keyValuesDelete = []
+    item.originalDetails = JSON.stringify(newItem?.details)
+    item.originalKeyValues = JSON.stringify(newItem?.keyValues)
+    ignoreChanges.value = false
+  },
+  { immediate: true },
+)
 
 const { add } = useSnackbar()
 const { deleteAsync, updateAsync } = usePasswordItemStore()

src/utils/helper.ts

@@ -68,7 +68,7 @@ export const getSingleRouteParam = (
   param: string | string[] | LocationQueryValue | LocationQueryValue[],
 ): string => {
   const _param = Array.isArray(param) ? param.at(0) ?? '' : param ?? ''
-  console.log('getSingleRouteParam found:', _param, param)
+  //console.log('getSingleRouteParam found:', _param, param)
   return decodeURIComponent(_param)
 }