lkt-item-crud 2.0.21 → 2.0.23

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

@@ -21,7 +21,7 @@ declare var __VLS_17: {
     canUpdate: boolean | undefined;
     canDrop: boolean | undefined;
     perms: string[] | undefined;
-}, __VLS_52: {
+}, __VLS_53: string, __VLS_54: {}, __VLS_56: {
     item: LktObject;
     loading: false;
     editMode: boolean;
@@ -30,8 +30,10 @@ declare var __VLS_17: {
     canDrop: boolean;
     itemBeingEdited: boolean;
     perms: string[];
-}, __VLS_73: {}, __VLS_75: {};
+}, __VLS_77: {}, __VLS_79: {};
 type __VLS_Slots = {} & {
+    [K in NonNullable<typeof __VLS_53>]?: (props: typeof __VLS_54) => any;
+} & {
     'prev-buttons-ever'?: (props: typeof __VLS_17) => any;
 } & {
     'prev-buttons'?: (props: typeof __VLS_19) => any;
@@ -44,11 +46,11 @@ type __VLS_Slots = {} & {
 } & {
     'prev-buttons'?: (props: typeof __VLS_38) => any;
 } & {
-    item?: (props: typeof __VLS_52) => any;
+    item?: (props: typeof __VLS_56) => any;
 } & {
-    'prev-buttons-ever'?: (props: typeof __VLS_73) => any;
+    'prev-buttons-ever'?: (props: typeof __VLS_77) => any;
 } & {
-    'prev-buttons'?: (props: typeof __VLS_75) => any;
+    'prev-buttons'?: (props: typeof __VLS_79) => any;
 };
 declare const __VLS_component: import("vue").DefineComponent<ItemCrudConfig, {
     doDrop: () => void;

package/package.json

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

package/src/lib-components/LktItemCrud.vue

@@ -7,6 +7,7 @@
         ButtonConfig,
         ensureButtonConfig, FormUiConfig,
         getDefaultValues,
+        getFormDataState, getFormSlotKeys,
         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),
@@ -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);
         }
     }
 
@@ -408,6 +414,8 @@
 
     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 : '';
         }
@@ -512,6 +520,13 @@
     const computedHasButtons = computed(() => {
         return createMode.value || canUpdate.value || canDrop.value;
     })
+
+    const computedFormSlots = computed(() => {
+        if (computedHasForm.value) {
+            return getFormSlotKeys(props.form);
+        }
+        return [];
+    })
 </script>
 
 <template>
@@ -584,10 +599,7 @@
 
             <button-nav
                 ref="buttonNav"
-                v-if="buttonNavPosition === ItemCrudButtonNavPosition.Top
-                && (groupButton === false || !groupButtonAsModalActions)
-                 && computedHasButtons
-"
+                v-if="buttonNavPosition === ItemCrudButtonNavPosition.Top && (groupButton === false || !groupButtonAsModalActions) && computedHasButtons"
                 v-model:loading="isLoading"
                 v-model:editing="editMode"
                 v-model:picked-modification-view="pickedModificationView"
@@ -649,6 +661,7 @@
                             v-model="item"
                             v-model:modifications="itemModifications"
                             v-model:valid="validForm"
+                            v-model:changed="changedForm"
                             v-bind="<FormUiConfig>{
                                 ...formUiConfig,
                                 form,
@@ -658,7 +671,11 @@
                                 editableViews: [computedEditableView],
                                 disabled: !editMode,
                             }"
-                        />
+                        >
+                            <template v-for="formSlot in computedFormSlots" v-slot:[formSlot]="{}">
+                                <slot :name="formSlot"/>
+                            </template>
+                        </lkt-form>
                     </template>
 
                     <template v-else>