lkt-item-crud 2.0.22 → 2.0.24

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_55: string, __VLS_56: {}, __VLS_58: {
     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_79: {}, __VLS_81: {};
 type __VLS_Slots = {} & {
+    [K in NonNullable<typeof __VLS_55>]?: (props: typeof __VLS_56) => 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_58) => any;
 } & {
-    'prev-buttons-ever'?: (props: typeof __VLS_73) => any;
+    'prev-buttons-ever'?: (props: typeof __VLS_79) => any;
 } & {
-    'prev-buttons'?: (props: typeof __VLS_75) => any;
+    'prev-buttons'?: (props: typeof __VLS_81) => 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.22",
+  "version": "2.0.24",
   "description": "",
   "type": "module",
   "module": "./dist/build.js",

package/src/lib-components/LktItemCrud.vue

@@ -7,7 +7,7 @@
         ButtonConfig,
         ensureButtonConfig, FormUiConfig,
         getDefaultValues,
-        getFormDataState,
+        getFormDataState, getFormSlotKeys,
         ItemCrud,
         ItemCrudButtonNavPosition,
         ItemCrudConfig,
@@ -74,6 +74,7 @@
         itemBeingEdited = ref(false),
         itemCreated = ref(false),
         buttonNav = ref(null),
+        formRef = ref(null),
         canUpdate = computed(() => !createMode.value && Array.isArray(permissions.value) && permissions.value.includes(TablePermission.Update)),
         canDrop = computed(() => !createMode.value && Array.isArray(permissions.value) && permissions.value.includes(TablePermission.Drop)),
         canSwitchEditMode = computed(() => !createMode.value && Array.isArray(permissions.value) && permissions.value.includes(TablePermission.SwitchEditMode));
@@ -176,6 +177,13 @@
                 pickedModificationView.value = ModificationView.Modifications;
             }
 
+            if (computedHasForm.value) {
+                resetFormDifferencesChecker();
+                nextTick(() => {
+                    formRef.value.turnStoredIntoOriginal();
+                })
+            }
+
             if (typeof props.events?.httpEnd === 'function') {
                 props.events.httpEnd({
                     httpResponse: r,
@@ -320,6 +328,7 @@
             itemCreated.value = true;
             debug('onCreate -> turn stored data into original');
             dataState.value.increment(item.value).turnStoredIntoOriginal();
+            modificationsDataState.value.turnStoredIntoOriginal();
             if (props.notificationType === NotificationType.Toast) {
                 openToast(<ToastConfig>{
                     text: LktSettings.defaultCreateSuccessText,
@@ -347,6 +356,7 @@
             }
             debug('onUpdate -> turn stored data into original');
             dataState.value.turnStoredIntoOriginal();
+            modificationsDataState.value.turnStoredIntoOriginal();
             if (props.notificationType === NotificationType.Toast) {
                 openToast(<ToastConfig>{
                     text: LktSettings.defaultUpdateSuccessText,
@@ -453,7 +463,7 @@
         ableToUpdate = computed(() => {
             if (props.mode !== ItemCrudMode.Update || !canUpdate.value) return false;
             if (!props.enabledSaveWithoutChanges && !dataChanged.value) return false;
-            if (computedHasForm.value && !validForm.value) return false;
+            if (computedHasForm.value && (!validForm.value || !changedForm.value)) return false;
 
             if (typeof safeUpdateButton.value?.disabled === 'function') return !safeUpdateButton.value.disabled({
                 prop: item.value
@@ -465,7 +475,7 @@
         ableToCreate = computed(() => {
             if (props.mode !== ItemCrudMode.Create) return false;
             if (!props.enabledSaveWithoutChanges && !dataChanged.value) return false;
-            if (computedHasForm.value && !validForm.value) return false;
+            if (computedHasForm.value && !validForm.value && !changedForm.value) return false;
 
             if (typeof safeCreateButton.value?.disabled === 'function') return !safeCreateButton.value.disabled({
                 prop: item.value
@@ -520,6 +530,13 @@
     const computedHasButtons = computed(() => {
         return createMode.value || canUpdate.value || canDrop.value;
     })
+
+    const computedFormSlots = computed(() => {
+        if (computedHasForm.value) {
+            return getFormSlotKeys(props.form);
+        }
+        return [];
+    })
 </script>
 
 <template>
@@ -651,6 +668,7 @@
 
                     <template v-if="computedHasForm">
                         <lkt-form
+                            ref="formRef"
                             v-model="item"
                             v-model:modifications="itemModifications"
                             v-model:valid="validForm"
@@ -664,7 +682,11 @@
                                 editableViews: [computedEditableView],
                                 disabled: !editMode,
                             }"
-                        />
+                        >
+                            <template v-for="formSlot in computedFormSlots" v-slot:[formSlot]="{}">
+                                <slot :name="formSlot"/>
+                            </template>
+                        </lkt-form>
                     </template>
 
                     <template v-else>