lkt-item-crud 2.0.20 → 2.0.22

package/dist/lib-components/LktItemCrud.vue.d.ts

@@ -1,4 +1,4 @@
-import { ButtonConfig, ItemCrudButtonNavPosition, ItemCrudConfig, ItemCrudMode, ItemCrudView, LktObject, ModalConfig, ModificationView, NotificationType } from 'lkt-vue-kernel';
+import { ButtonConfig, FormUiConfig, ItemCrudButtonNavPosition, ItemCrudConfig, ItemCrudMode, ItemCrudView, LktObject, ModalConfig, ModificationView, NotificationType } from 'lkt-vue-kernel';
 declare var __VLS_17: {
     canUpdate: boolean | undefined;
     canDrop: boolean | undefined;
@@ -100,6 +100,7 @@ declare const __VLS_component: import("vue").DefineComponent<ItemCrudConfig, {
     editing: boolean;
     perms: import("lkt-vue-kernel").ValidTablePermission[];
     customData: LktObject;
+    formUiConfig: Partial<FormUiConfig>;
     visibleView: ModificationView;
     modificationViews: boolean | Array<ModificationView>;
     editModeButton: ButtonConfig | false;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lkt-item-crud",
-  "version": "2.0.20",
+  "version": "2.0.22",
   "description": "",
   "type": "module",
   "module": "./dist/build.js",

package/src/lib-components/LktItemCrud.vue

@@ -7,6 +7,7 @@
         ButtonConfig,
         ensureButtonConfig, FormUiConfig,
         getDefaultValues,
+        getFormDataState,
         ItemCrud,
         ItemCrudButtonNavPosition,
         ItemCrudConfig,
@@ -26,7 +27,6 @@
     import ButtonNav from '../components/ButtonNav.vue';
     import { openToast } from 'lkt-toast';
     import { useRouter } from 'vue-router';
-    import { getModificationsDataState } from '../functions/modifications-functions';
 
     // defineOptions({
     //     inheritAttrs: false
@@ -62,6 +62,7 @@
         permissions = ref(props.perms),
         editMode = ref(props.editing),
         validForm = ref(false),
+        changedForm = ref(false),
         httpSuccessRead = ref(false),
         showStoreMessage = ref(false),
         httpStatus = ref(200),
@@ -164,7 +165,7 @@
             }
             httpSuccessRead.value = true;
             item.value = r.data;
-            itemModifications.value = r.modifications;
+            itemModifications.value = Array.isArray(r.modifications) ? {} : r.modifications;
             permissions.value = r.perms;
             dataState.value.increment(item.value).turnStoredIntoOriginal();
             modificationsDataState.value.increment(itemModifications.value).turnStoredIntoOriginal();
@@ -191,6 +192,10 @@
         }
     };
 
+    watch(itemBeingEdited, (v) => {
+        if (v) nextTick(() => itemBeingEdited.value = false);
+    })
+
 
     watch(() => props.modelValue, v => {
         item.value = v;
@@ -198,7 +203,6 @@
     }, { deep: true });
 
     watch(item, (v) => {
-        itemBeingEdited.value = true;
         debug('item updated ->', item.value);
         if (typeof props.beforeEmitUpdate === 'function') {
             debug('item updated -> has beforeEmitUpdate');
@@ -206,14 +210,16 @@
             debug('item updated -> override with: ', override);
             if (typeof override === 'object') item.value = override;
         }
-        resetFormDifferencesChecker();
+        if (computedHasForm.value) {
+            resetFormDifferencesChecker();
+        }
         emit('update:modelValue', item.value);
         debug('item updated -> update dataState');
         dataState.value.increment(v);
         if (computedEditableView.value === ModificationView.Current) {
             dataChanged.value = dataState.value.changed();
         }
-        nextTick(() => itemBeingEdited.value = false);
+        itemBeingEdited.value = true;
     }, { deep: true });
 
     watch(permissions, () => emit('perms', permissions.value));
@@ -238,7 +244,7 @@
     const formDifferencesChecker = ref(undefined);
     const resetFormDifferencesChecker = () => {
         if (computedHasForm.value) {
-            formDifferencesChecker.value = getModificationsDataState(item.value, itemModifications.value, props.form);
+            formDifferencesChecker.value = getFormDataState(item.value, itemModifications.value, props.form);
         }
     }
 
@@ -407,6 +413,12 @@
 
 
     const closeConfirm = computed(() => {
+        if (!computedHasButtons.value) return '';
+        if (computedHasForm.value) return changedForm.value ? props.modalConfig?.closeConfirm : '';
+
+        if (computedEditableView.value === ModificationView.Modifications) {
+            return modificationsDataState.value.changed() ? props.modalConfig?.closeConfirm : '';
+        }
         return dataState.value.changed() ? props.modalConfig?.closeConfirm : '';
     });
 
@@ -504,6 +516,10 @@
         if (Object.keys(itemModifications.value).length === 0) return ModificationView.Current;
         return ModificationView.Modifications;
     })
+
+    const computedHasButtons = computed(() => {
+        return createMode.value || canUpdate.value || canDrop.value;
+    })
 </script>
 
 <template>
@@ -512,7 +528,7 @@
         v-bind="computedContainerAttrs"
         class="lkt-item-crud"
     >
-        <template v-if="groupButton !== false && groupButtonAsModalActions" #header-actions>
+        <template v-if="groupButton !== false && groupButtonAsModalActions && computedHasButtons" #header-actions>
             <button-nav
                 ref="buttonNav"
                 v-if="buttonNavPosition === ItemCrudButtonNavPosition.Top"
@@ -576,7 +592,7 @@
 
             <button-nav
                 ref="buttonNav"
-                v-if="buttonNavPosition === ItemCrudButtonNavPosition.Top && (groupButton === false || !groupButtonAsModalActions)"
+                v-if="buttonNavPosition === ItemCrudButtonNavPosition.Top && (groupButton === false || !groupButtonAsModalActions) && computedHasButtons"
                 v-model:loading="isLoading"
                 v-model:editing="editMode"
                 v-model:picked-modification-view="pickedModificationView"
@@ -638,7 +654,9 @@
                             v-model="item"
                             v-model:modifications="itemModifications"
                             v-model:valid="validForm"
+                            v-model:changed="changedForm"
                             v-bind="<FormUiConfig>{
+                                ...formUiConfig,
                                 form,
                                 differencesTableConfig,
                                 visibleView: pickedModificationView,
@@ -668,7 +686,7 @@
 
             <button-nav
                 ref="buttonNav"
-                v-if="buttonNavPosition === ItemCrudButtonNavPosition.Bottom && (groupButton === false || !groupButtonAsModalActions)"
+                v-if="buttonNavPosition === ItemCrudButtonNavPosition.Bottom && (groupButton === false || !groupButtonAsModalActions) && computedHasButtons"
                 v-model:loading="isLoading"
                 v-model:editing="editMode"
                 v-model:picked-modification-view="pickedModificationView"