lkt-item-crud 2.0.14 → 2.0.16

package/dist/components/ButtonNav.vue.d.ts

@@ -3,6 +3,7 @@ type __VLS_Props = {
     item: LktObject;
     editing?: boolean;
     loading?: boolean;
+    grouped?: boolean;
     view: ItemCrudView;
     mode: ItemCrudMode;
     createButton?: ButtonConfig | false;
@@ -12,6 +13,9 @@ type __VLS_Props = {
     groupButton?: ButtonConfig | boolean;
     groupButtonAsModalActions?: boolean;
     dataChanged: boolean;
+    ableToCreate?: boolean;
+    ableToUpdate?: boolean;
+    ableToDrop?: boolean;
     canUpdate?: boolean;
     canDrop?: boolean;
     canSwitchEditMode?: boolean;

package/dist/components/ButtonNavButtons.vue.d.ts

@@ -0,0 +1,75 @@
+import { ButtonConfig, ItemCrudButtonNavVisibility, ItemCrudMode, ItemCrudView, LktObject } from 'lkt-vue-kernel';
+type __VLS_Props = {
+    item: LktObject;
+    editing?: boolean;
+    loading?: boolean;
+    view: ItemCrudView;
+    mode: ItemCrudMode;
+    createButton?: ButtonConfig | false;
+    updateButton?: ButtonConfig | false;
+    dropButton?: ButtonConfig | false;
+    editModeButton?: ButtonConfig | false;
+    groupButton?: ButtonConfig | boolean;
+    groupButtonAsModalActions?: boolean;
+    dataChanged: boolean;
+    ableToCreate?: boolean;
+    ableToUpdate?: boolean;
+    ableToDrop?: boolean;
+    canUpdate?: boolean;
+    canDrop?: boolean;
+    canSwitchEditMode?: boolean;
+    perms?: Array<string>;
+    httpSuccessRead?: boolean;
+    buttonNavVisibility: ItemCrudButtonNavVisibility;
+};
+declare var __VLS_5: {
+    canUpdate: boolean | undefined;
+    canDrop: boolean | undefined;
+    perms: string[] | undefined;
+}, __VLS_7: {
+    canUpdate: boolean | undefined;
+    canDrop: boolean | undefined;
+    perms: string[] | undefined;
+}, __VLS_21: {
+    item: LktObject;
+    editMode: any;
+    isCreate: boolean;
+    canUpdate: boolean | undefined;
+    canDrop: boolean | undefined;
+}, __VLS_35: {
+    item: LktObject;
+    editMode: any;
+    isCreate: boolean;
+    canUpdate: boolean | undefined;
+    canDrop: boolean | undefined;
+}, __VLS_49: {
+    item: LktObject;
+    editMode: any;
+    isCreate: boolean;
+    canUpdate: boolean | undefined;
+    canDrop: boolean | undefined;
+}, __VLS_51: {};
+type __VLS_Slots = {} & {
+    'prev-buttons-ever'?: (props: typeof __VLS_5) => any;
+} & {
+    'prev-buttons'?: (props: typeof __VLS_7) => any;
+} & {
+    'button-save'?: (props: typeof __VLS_21) => any;
+} & {
+    'button-save'?: (props: typeof __VLS_35) => any;
+} & {
+    'button-drop'?: (props: typeof __VLS_49) => any;
+} & {
+    buttons?: (props: typeof __VLS_51) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    item: LktObject;
+    editing: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -1,4 +1,4 @@
-import { ItemCrudButtonNavPosition, ItemCrudConfig, ItemCrudMode, ItemCrudView, LktObject, NotificationType } from 'lkt-vue-kernel';
+import { ButtonConfig, ItemCrudButtonNavPosition, ItemCrudConfig, ItemCrudMode, ItemCrudView, LktObject, ModalConfig, NotificationType } from 'lkt-vue-kernel';
 declare var __VLS_17: {
     canUpdate: boolean | undefined;
     canDrop: boolean | undefined;
@@ -85,21 +85,22 @@ declare const __VLS_component: import("vue").DefineComponent<ItemCrudConfig, {
     modelValue: LktObject;
     editing: boolean;
     perms: import("lkt-vue-kernel").ValidTablePermission[];
-    editModeButton: import("lkt-vue-kernel").ButtonConfig | false;
-    dropButton: import("lkt-vue-kernel").ButtonConfig | false;
-    createButton: import("lkt-vue-kernel").ButtonConfig | false;
-    updateButton: import("lkt-vue-kernel").ButtonConfig | false;
-    groupButton: import("lkt-vue-kernel").ButtonConfig | boolean;
+    editModeButton: ButtonConfig | false;
+    dropButton: ButtonConfig | false;
+    createButton: ButtonConfig | false;
+    updateButton: ButtonConfig | false;
+    groupButton: ButtonConfig | boolean;
     groupButtonAsModalActions: boolean;
     buttonNavPosition: ItemCrudButtonNavPosition;
     buttonNavVisibility: import("lkt-vue-kernel").ItemCrudButtonNavVisibility;
-    modalConfig: import("lkt-vue-kernel").ModalConfig;
+    modalConfig: ModalConfig;
     saveConfig: import("lkt-vue-kernel").SaveConfig;
     dataStateConfig: import("lkt-data-state").DataStateConfig;
     readResource: string;
     readData: LktObject;
     beforeEmitUpdate: Function;
     notificationType: NotificationType;
+    enabledSaveWithoutChanges: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;

package/package.json

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

package/src/components/ButtonNav.vue

@@ -1,14 +1,6 @@
 <script setup lang="ts">
     import { computed, ref, SetupContext, useSlots, watch } from 'vue';
-    import {
-        ButtonConfig,
-        ensureButtonConfig,
-        ItemCrudButtonNavVisibility,
-        ItemCrudMode,
-        ItemCrudView,
-        LktObject,
-        LktSettings,
-    } from 'lkt-vue-kernel';
+    import { ButtonConfig, ItemCrudButtonNavVisibility, ItemCrudMode, ItemCrudView, LktObject } from 'lkt-vue-kernel';
     import { HTTPResponse } from 'lkt-http-client';
 
     const emit = defineEmits([
@@ -23,6 +15,7 @@
         item: LktObject,
         editing?: boolean
         loading?: boolean
+        grouped?: boolean
 
         view: ItemCrudView
         mode: ItemCrudMode
@@ -36,6 +29,9 @@
 
         dataChanged: boolean
 
+        ableToCreate?: boolean
+        ableToUpdate?: boolean
+        ableToDrop?: boolean
         canUpdate?: boolean
         canDrop?: boolean
         canSwitchEditMode?: boolean
@@ -50,28 +46,6 @@
         isLoading: false,
     });
 
-    const safeCreateButton = ref(ensureButtonConfig(props.createButton, LktSettings.defaultCreateButton)),
-        safeUpdateButton = ref(ensureButtonConfig(props.updateButton, LktSettings.defaultUpdateButton)),
-        safeDropButton = ref(ensureButtonConfig(props.dropButton, LktSettings.defaultDropButton)),
-        safeEditModeButton = ref(ensureButtonConfig(props.editModeButton, LktSettings.defaultEditModeButton)),
-        safeGroupButton = ref(ensureButtonConfig(props.groupButton, LktSettings.defaultGroupButton));
-
-    watch(() => props.createButton, v => {
-        safeCreateButton.value = ensureButtonConfig(v, LktSettings.defaultCreateButton);
-    }, { deep: true });
-
-    watch(() => props.updateButton, v => {
-        safeUpdateButton.value = ensureButtonConfig(v, LktSettings.defaultUpdateButton);
-    }, { deep: true });
-
-    watch(() => props.dropButton, v => {
-        safeDropButton.value = ensureButtonConfig(v, LktSettings.defaultDropButton);
-    }, { deep: true });
-
-    watch(() => props.editModeButton, v => {
-        safeEditModeButton.value = ensureButtonConfig(v, LktSettings.defaultEditModeButton);
-    }, { deep: true });
-
     const slots: SetupContext['slots'] = useSlots();
 
     const saveButtonRef = ref(<HTMLButtonElement | null>null);
@@ -117,34 +91,7 @@
     });
 
 
-    const ableToUpdate = computed(() => {
-            if (props.mode !== ItemCrudMode.Update || !props.canUpdate) return false;
-            if (!props.dataChanged) return false;
-
-            if (typeof safeUpdateButton.value?.disabled === 'function') return !safeUpdateButton.value.disabled(props.item);
-            if (typeof safeUpdateButton.value?.disabled === 'boolean') return !safeUpdateButton.value.disabled;
-
-            return true;
-        }),
-        ableToCreate = computed(() => {
-            if (props.mode !== ItemCrudMode.Create) return false;
-            if (!props.dataChanged) return false;
-
-            if (typeof safeCreateButton.value?.disabled === 'function') return !safeCreateButton.value.disabled(props.item);
-            if (typeof safeCreateButton.value?.disabled === 'boolean') return !safeCreateButton.value.disabled;
-
-            return true;
-        }),
-        ableToDrop = computed(() => {
-
-            if (!props.canDrop) return false;
-
-            if (typeof safeDropButton.value?.disabled === 'function') return !safeDropButton.value.disabled(props.item);
-            if (typeof safeDropButton.value?.disabled === 'boolean') return !safeDropButton.value.disabled;
-
-            return true;
-        }),
-        showDropButton = computed(() => {
+    const showDropButton = computed(() => {
             if (!props.canDrop || props.dropButton === false) return false;
             if (!props.canUpdate && props.canDrop) return true;
 
@@ -157,14 +104,6 @@
             if (props.mode === ItemCrudMode.Update && props.updateButton === false) return false;
             if (isLoading.value) return false;
 
-            // if (props.dataChanged) {
-            //     return ableToUpdate.value || ableToCreate.value;
-            // }
-
-            // if (props.buttonNavVisibility === ItemCrudButtonNavVisibility.Never) {
-            //     return false;
-            // }
-
             return props.editing
                 && props.httpSuccessRead;
         }),
@@ -190,10 +129,10 @@
 <template>
     <div v-if="showButtons" class="lkt-item-crud-buttons">
 
-        <template v-if="groupButton !== false && groupButtonAsModalActions">
+        <template v-if="grouped && groupButtonAsModalActions">
             <lkt-button
                 v-if="showSwitchButton"
-                v-bind="safeEditModeButton"
+                v-bind="editModeButton"
                 v-model:checked="isEditing"
                 class="lkt-item-crud--switch-mode-button" />
 
@@ -217,7 +156,7 @@
             <lkt-button
                 ref="saveButtonRef"
                 v-show="mode === ItemCrudMode.Update && showSaveButton"
-                v-bind="safeUpdateButton"
+                v-bind="updateButton"
                 :disabled="!ableToUpdate"
                 @loading="onButtonLoading"
                 @loaded="onButtonLoaded"
@@ -232,7 +171,7 @@
             <lkt-button
                 ref="saveButtonRef"
                 v-show="mode === ItemCrudMode.Create && showSaveButton"
-                v-bind="safeCreateButton"
+                v-bind="createButton"
                 :disabled="!ableToCreate"
                 @loading="onButtonLoading"
                 @loaded="onButtonLoaded"
@@ -247,7 +186,7 @@
             <lkt-button
                 ref="dropButtonRef"
                 v-show="showDropButton && mode !== ItemCrudMode.Create"
-                v-bind="safeDropButton"
+                v-bind="dropButton"
                 :disabled="!ableToDrop"
                 @loading="onButtonLoading"
                 @loaded="onButtonLoaded"
@@ -263,16 +202,16 @@
                 <slot name="buttons" />
             </template>
         </template>
-        <template v-else-if="groupButton !== false">
+        <template v-else-if="grouped">
             <lkt-button
                 ref="groupButton"
-                v-bind="safeGroupButton"
+                v-bind="groupButton"
                 class="lkt-item-crud-group-button"
             >
                 <template #split>
                     <lkt-button
                         v-if="showSwitchButton"
-                        v-bind="safeEditModeButton"
+                        v-bind="editModeButton"
                         v-model:checked="isEditing"
                         class="lkt-item-crud--switch-mode-button" />
 
@@ -296,7 +235,7 @@
                     <lkt-button
                         ref="saveButtonRef"
                         v-show="mode === ItemCrudMode.Update && showSaveButton"
-                        v-bind="safeUpdateButton"
+                        v-bind="updateButton"
                         :disabled="!ableToUpdate"
                         @loading="onButtonLoading"
                         @loaded="onButtonLoaded"
@@ -311,7 +250,7 @@
                     <lkt-button
                         ref="saveButtonRef"
                         v-show="mode === ItemCrudMode.Create && showSaveButton"
-                        v-bind="safeCreateButton"
+                        v-bind="createButton"
                         :disabled="!ableToCreate"
                         @loading="onButtonLoading"
                         @loaded="onButtonLoaded"
@@ -326,7 +265,7 @@
                     <lkt-button
                         ref="dropButtonRef"
                         v-show="showDropButton && mode !== ItemCrudMode.Create"
-                        v-bind="safeDropButton"
+                        v-bind="dropButton"
                         :disabled="!ableToDrop"
                         @loading="onButtonLoading"
                         @loaded="onButtonLoaded"
@@ -366,7 +305,7 @@
             <lkt-button
                 ref="saveButtonRef"
                 v-show="mode === ItemCrudMode.Update && showSaveButton"
-                v-bind="safeUpdateButton"
+                v-bind="updateButton"
                 :disabled="!ableToUpdate"
                 @loading="onButtonLoading"
                 @loaded="onButtonLoaded"
@@ -381,7 +320,7 @@
             <lkt-button
                 ref="saveButtonRef"
                 v-show="mode === ItemCrudMode.Create && showSaveButton"
-                v-bind="safeCreateButton"
+                v-bind="createButton"
                 :disabled="!ableToCreate"
                 @loading="onButtonLoading"
                 @loaded="onButtonLoaded"
@@ -396,7 +335,7 @@
             <lkt-button
                 ref="dropButtonRef"
                 v-show="showDropButton && mode !== ItemCrudMode.Create"
-                v-bind="safeDropButton"
+                v-bind="dropButton"
                 :disabled="!ableToDrop"
                 @loading="onButtonLoading"
                 @loaded="onButtonLoaded"
@@ -414,7 +353,7 @@
 
             <lkt-button
                 v-if="showSwitchButton"
-                v-bind="safeEditModeButton"
+                v-bind="editModeButton"
                 v-model:checked="isEditing"
                 class="lkt-item-crud--switch-mode-button" />
 

package/src/lib-components/LktItemCrud.vue

@@ -4,6 +4,8 @@
     import { DataState } from 'lkt-data-state';
     import { debug } from '../functions/debug';
     import {
+        ButtonConfig,
+        ensureButtonConfig,
         getDefaultValues,
         ItemCrud,
         ItemCrudButtonNavPosition,
@@ -11,7 +13,7 @@
         ItemCrudMode,
         ItemCrudView,
         LktObject,
-        LktSettings,
+        LktSettings, ModalConfig,
         NotificationType,
         TablePermission,
         ToastConfig,
@@ -65,6 +67,28 @@
         createMode.value = v === ItemCrudMode.Create;
     })
 
+    const safeCreateButton = ref(ensureButtonConfig(props.createButton, LktSettings.defaultCreateButton)),
+        safeUpdateButton = ref(ensureButtonConfig(props.updateButton, LktSettings.defaultUpdateButton)),
+        safeDropButton = ref(ensureButtonConfig(props.dropButton, LktSettings.defaultDropButton)),
+        safeEditModeButton = ref(ensureButtonConfig(props.editModeButton, LktSettings.defaultEditModeButton)),
+        safeGroupButton = ref(ensureButtonConfig(props.groupButton, LktSettings.defaultGroupButton));
+
+    watch(() => props.createButton, v => {
+        safeCreateButton.value = ensureButtonConfig(v, LktSettings.defaultCreateButton);
+    }, { deep: true });
+
+    watch(() => props.updateButton, v => {
+        safeUpdateButton.value = ensureButtonConfig(v, LktSettings.defaultUpdateButton);
+    }, { deep: true });
+
+    watch(() => props.dropButton, v => {
+        safeDropButton.value = ensureButtonConfig(v, LktSettings.defaultDropButton);
+    }, { deep: true });
+
+    watch(() => props.editModeButton, v => {
+        safeEditModeButton.value = ensureButtonConfig(v, LktSettings.defaultEditModeButton);
+    }, { deep: true });
+
     const fetchItem = async () => {
         debug('fetchItem');
         isLoading.value = true;
@@ -193,7 +217,7 @@
         },
         onCreate = ($event: PointerEvent, r: HTTPResponse) => {
             debug('onCreate');
-            if (!ensureValidResourceSave(r, props.createButton.resource)) {
+            if (!ensureValidResourceSave(r, safeCreateButton.value.resource)) {
                 if (props.notificationType === NotificationType.Toast) {
                     openToast(<ToastConfig>{
                         text: LktSettings.defaultCreateErrorText,
@@ -221,7 +245,7 @@
         },
         onUpdate = ($event: PointerEvent, r: HTTPResponse) => {
             debug('onUpdate');
-            if (!ensureValidResourceSave(r, props.updateButton.resource)) {
+            if (!ensureValidResourceSave(r, safeUpdateButton.value.resource)) {
                 if (props.notificationType === NotificationType.Toast) {
                     openToast(<ToastConfig>{
                         text: LktSettings.defaultUpdateErrorText,
@@ -247,7 +271,7 @@
         },
         onDrop = ($event: PointerEvent, r: HTTPResponse) => {
             debug('onDrop');
-            if (!ensureValidResourceSave(r, props.dropButton.resource)) {
+            if (!ensureValidResourceSave(r, safeDropButton.value.resource)) {
                 if (props.notificationType === NotificationType.Toast) {
                     openToast(<ToastConfig>{
                         text: LktSettings.defaultDropErrorText,
@@ -325,9 +349,36 @@
             if (computedInsideModal.value) return 'lkt-modal';
             return 'section';
         }),
+        ableToUpdate = computed(() => {
+            if (props.mode !== ItemCrudMode.Update || !canUpdate.value) return false;
+            if (!props.enabledSaveWithoutChanges && !dataChanged.value) return false;
+
+            if (typeof safeUpdateButton.value?.disabled === 'function') return !safeUpdateButton.value.disabled(item.value);
+            if (typeof safeUpdateButton.value?.disabled === 'boolean') return !safeUpdateButton.value.disabled;
+
+            return true;
+        }),
+        ableToCreate = computed(() => {
+            if (props.mode !== ItemCrudMode.Create) return false;
+            if (!props.enabledSaveWithoutChanges && !dataChanged.value) return false;
+
+            if (typeof safeCreateButton.value?.disabled === 'function') return !safeCreateButton.value.disabled(item.value);
+            if (typeof safeCreateButton.value?.disabled === 'boolean') return !safeCreateButton.value.disabled;
+
+            return true;
+        }),
+        ableToDrop = computed(() => {
+
+            if (!canDrop.value) return false;
+
+            if (typeof safeDropButton.value?.disabled === 'function') return !safeDropButton.value.disabled(item.value);
+            if (typeof safeDropButton.value?.disabled === 'boolean') return !safeDropButton.value.disabled;
+
+            return true;
+        }),
         computedContainerAttrs = computed(() => {
             if (computedContainerTag.value === 'lkt-modal') {
-                return {
+                return <ModalConfig>{
                     ...{
                         title: props.title,
                         item: item.value,
@@ -337,10 +388,13 @@
                         beforeClose: crudBeforeClose,
                         closeConfirm: closeConfirm.value,
                     },
+                    headerActionsButton: props.groupButton !== false ? <ButtonConfig>{
+                        dot: ableToCreate.value || ableToUpdate.value,
+                    } : false
                 };
             }
             return {};
-        });
+        })
 </script>
 
 <template>
@@ -358,18 +412,22 @@
                 :item="item"
                 :mode="mode"
                 :view="view"
+                :grouped="true"
                 :button-nav-visibility="buttonNavVisibility"
-                :create-button="createButton"
-                :update-button="updateButton"
-                :drop-button="dropButton"
-                :edit-mode-button="editModeButton"
-                :group-button="groupButton"
-                :group-button-as-modal-actions="groupButtonAsModalActions"
+                :create-button="safeCreateButton"
+                :update-button="safeUpdateButton"
+                :drop-button="safeDropButton"
+                :edit-mode-button="safeEditModeButton"
+                :group-button="safeGroupButton"
                 :data-changed="dataChanged"
                 :http-success-read="httpSuccessRead"
                 :can-update="canUpdate"
                 :can-drop="canDrop"
                 :can-switch-edit-mode="canSwitchEditMode"
+                :group-button-as-modal-actions="groupButtonAsModalActions"
+                :able-to-create="ableToCreate"
+                :able-to-update="ableToUpdate"
+                :able-to-drop="ableToDrop"
                 :perms="perms"
                 @create="onCreate"
                 @save="onUpdate"
@@ -411,18 +469,22 @@
                 :item="item"
                 :mode="mode"
                 :view="view"
+                :grouped="groupButton !== false"
                 :button-nav-visibility="buttonNavVisibility"
-                :create-button="createButton"
-                :update-button="updateButton"
-                :drop-button="dropButton"
-                :edit-mode-button="editModeButton"
-                :group-button="groupButton"
+                :create-button="safeCreateButton"
+                :update-button="safeUpdateButton"
+                :drop-button="safeDropButton"
+                :edit-mode-button="safeEditModeButton"
+                :group-button="safeGroupButton"
                 :data-changed="dataChanged"
                 :http-success-read="httpSuccessRead"
                 :can-update="canUpdate"
                 :can-drop="canDrop"
                 :can-switch-edit-mode="canSwitchEditMode"
                 :group-button-as-modal-actions="groupButtonAsModalActions"
+                :able-to-create="ableToCreate"
+                :able-to-update="ableToUpdate"
+                :able-to-drop="ableToDrop"
                 :perms="perms"
                 @create="onCreate"
                 @save="onUpdate"
@@ -476,18 +538,22 @@
                 :item="item"
                 :mode="mode"
                 :view="view"
+                :grouped="groupButton !== false"
                 :button-nav-visibility="buttonNavVisibility"
-                :create-button="createButton"
-                :update-button="updateButton"
-                :drop-button="dropButton"
-                :edit-mode-button="editModeButton"
-                :group-button="groupButton"
+                :create-button="safeCreateButton"
+                :update-button="safeUpdateButton"
+                :drop-button="safeDropButton"
+                :edit-mode-button="safeEditModeButton"
+                :group-button="safeGroupButton"
                 :data-changed="dataChanged"
                 :http-success-read="httpSuccessRead"
                 :can-update="canUpdate"
                 :can-drop="canDrop"
                 :can-switch-edit-mode="canSwitchEditMode"
                 :group-button-as-modal-actions="groupButtonAsModalActions"
+                :able-to-create="ableToCreate"
+                :able-to-update="ableToUpdate"
+                :able-to-drop="ableToDrop"
                 :perms="perms"
                 @create="onCreate"
                 @save="onUpdate"