lkt-item-crud 2.0.13 → 2.0.15

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;
@@ -10,7 +11,11 @@ type __VLS_Props = {
     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;
@@ -18,83 +23,121 @@ type __VLS_Props = {
     httpSuccessRead?: boolean;
     buttonNavVisibility: ItemCrudButtonNavVisibility;
 };
-declare var __VLS_11: {
+declare var __VLS_5: {
     canUpdate: boolean | undefined;
     canDrop: boolean | undefined;
     perms: string[] | undefined;
-}, __VLS_13: {
+}, __VLS_7: {
     canUpdate: boolean | undefined;
     canDrop: boolean | undefined;
     perms: string[] | undefined;
-}, __VLS_27: {
+}, __VLS_21: {
     item: LktObject;
     editMode: boolean;
     isCreate: boolean;
     canUpdate: boolean | undefined;
     canDrop: boolean | undefined;
-}, __VLS_41: {
+}, __VLS_35: {
     item: LktObject;
     editMode: boolean;
     isCreate: boolean;
     canUpdate: boolean | undefined;
     canDrop: boolean | undefined;
-}, __VLS_55: {
+}, __VLS_49: {
     item: LktObject;
     editMode: boolean;
     isCreate: boolean;
     canUpdate: boolean | undefined;
     canDrop: boolean | undefined;
-}, __VLS_57: {}, __VLS_59: {
+}, __VLS_51: {}, __VLS_63: {
     canUpdate: boolean | undefined;
     canDrop: boolean | undefined;
     perms: string[] | undefined;
-}, __VLS_61: {
+}, __VLS_65: {
     canUpdate: boolean | undefined;
     canDrop: boolean | undefined;
     perms: string[] | undefined;
-}, __VLS_75: {
+}, __VLS_79: {
     item: LktObject;
     editMode: boolean;
     isCreate: boolean;
     canUpdate: boolean | undefined;
     canDrop: boolean | undefined;
-}, __VLS_89: {
+}, __VLS_93: {
+    item: LktObject;
+    editMode: boolean;
+    isCreate: boolean;
+    canUpdate: boolean | undefined;
+    canDrop: boolean | undefined;
+}, __VLS_107: {
+    item: LktObject;
+    editMode: boolean;
+    isCreate: boolean;
+    canUpdate: boolean | undefined;
+    canDrop: boolean | undefined;
+}, __VLS_109: {}, __VLS_111: {
+    canUpdate: boolean | undefined;
+    canDrop: boolean | undefined;
+    perms: string[] | undefined;
+}, __VLS_113: {
+    canUpdate: boolean | undefined;
+    canDrop: boolean | undefined;
+    perms: string[] | undefined;
+}, __VLS_127: {
+    item: LktObject;
+    editMode: boolean;
+    isCreate: boolean;
+    canUpdate: boolean | undefined;
+    canDrop: boolean | undefined;
+}, __VLS_141: {
     item: LktObject;
     editMode: boolean;
     isCreate: boolean;
     canUpdate: boolean | undefined;
     canDrop: boolean;
-}, __VLS_103: {
+}, __VLS_155: {
     item: LktObject;
     editMode: boolean;
     isCreate: boolean;
     canUpdate: boolean | undefined;
     canDrop: boolean | undefined;
-}, __VLS_105: {};
+}, __VLS_157: {};
 type __VLS_Slots = {} & {
-    'prev-buttons-ever'?: (props: typeof __VLS_11) => any;
+    '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;
+} & {
+    'prev-buttons-ever'?: (props: typeof __VLS_63) => any;
 } & {
-    'prev-buttons'?: (props: typeof __VLS_13) => any;
+    'prev-buttons'?: (props: typeof __VLS_65) => any;
 } & {
-    'button-save'?: (props: typeof __VLS_27) => any;
+    'button-save'?: (props: typeof __VLS_79) => any;
 } & {
-    'button-save'?: (props: typeof __VLS_41) => any;
+    'button-save'?: (props: typeof __VLS_93) => any;
 } & {
-    'button-drop'?: (props: typeof __VLS_55) => any;
+    'button-drop'?: (props: typeof __VLS_107) => any;
 } & {
-    buttons?: (props: typeof __VLS_57) => any;
+    buttons?: (props: typeof __VLS_109) => any;
 } & {
-    'prev-buttons-ever'?: (props: typeof __VLS_59) => any;
+    'prev-buttons-ever'?: (props: typeof __VLS_111) => any;
 } & {
-    'prev-buttons'?: (props: typeof __VLS_61) => any;
+    'prev-buttons'?: (props: typeof __VLS_113) => any;
 } & {
-    'button-save'?: (props: typeof __VLS_75) => any;
+    'button-save'?: (props: typeof __VLS_127) => any;
 } & {
-    'button-save'?: (props: typeof __VLS_89) => any;
+    'button-save'?: (props: typeof __VLS_141) => any;
 } & {
-    'button-drop'?: (props: typeof __VLS_103) => any;
+    'button-drop'?: (props: typeof __VLS_155) => any;
 } & {
-    buttons?: (props: typeof __VLS_105) => any;
+    buttons?: (props: typeof __VLS_157) => any;
 };
 declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {
     doSave: () => void;

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,19 +1,27 @@
-import { ItemCrudButtonNavPosition, ItemCrudConfig, ItemCrudMode, ItemCrudView, LktObject, NotificationType } from 'lkt-vue-kernel';
-declare var __VLS_6: {
+import { ButtonConfig, ItemCrudButtonNavPosition, ItemCrudConfig, ItemCrudMode, ItemCrudView, LktObject, ModalConfig, NotificationType } from 'lkt-vue-kernel';
+declare var __VLS_17: {
+    canUpdate: boolean | undefined;
+    canDrop: boolean | undefined;
+    perms: string[] | undefined;
+}, __VLS_19: {
+    canUpdate: boolean | undefined;
+    canDrop: boolean | undefined;
+    perms: string[] | undefined;
+}, __VLS_21: {
     item: LktObject;
     loading: boolean;
-}, __VLS_8: {
+}, __VLS_23: {
     item: LktObject;
     loading: boolean;
-}, __VLS_21: {
+}, __VLS_36: {
     canUpdate: boolean | undefined;
     canDrop: boolean | undefined;
     perms: string[] | undefined;
-}, __VLS_23: {
+}, __VLS_38: {
     canUpdate: boolean | undefined;
     canDrop: boolean | undefined;
     perms: string[] | undefined;
-}, __VLS_33: {
+}, __VLS_48: {
     item: LktObject;
     loading: false;
     editMode: boolean;
@@ -22,21 +30,25 @@ declare var __VLS_6: {
     canDrop: boolean;
     itemBeingEdited: boolean;
     perms: string[];
-}, __VLS_54: {}, __VLS_56: {};
+}, __VLS_69: {}, __VLS_71: {};
 type __VLS_Slots = {} & {
-    'pre-title'?: (props: typeof __VLS_6) => any;
+    'prev-buttons-ever'?: (props: typeof __VLS_17) => any;
+} & {
+    'prev-buttons'?: (props: typeof __VLS_19) => any;
+} & {
+    'pre-title'?: (props: typeof __VLS_21) => any;
 } & {
-    'post-title'?: (props: typeof __VLS_8) => any;
+    'post-title'?: (props: typeof __VLS_23) => any;
 } & {
-    'prev-buttons-ever'?: (props: typeof __VLS_21) => any;
+    'prev-buttons-ever'?: (props: typeof __VLS_36) => any;
 } & {
-    'prev-buttons'?: (props: typeof __VLS_23) => any;
+    'prev-buttons'?: (props: typeof __VLS_38) => any;
 } & {
-    item?: (props: typeof __VLS_33) => any;
+    item?: (props: typeof __VLS_48) => any;
 } & {
-    'prev-buttons-ever'?: (props: typeof __VLS_54) => any;
+    'prev-buttons-ever'?: (props: typeof __VLS_69) => any;
 } & {
-    'prev-buttons'?: (props: typeof __VLS_56) => any;
+    'prev-buttons'?: (props: typeof __VLS_71) => any;
 };
 declare const __VLS_component: import("vue").DefineComponent<ItemCrudConfig, {
     doDrop: () => void;
@@ -73,14 +85,15 @@ 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;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lkt-item-crud",
-  "version": "2.0.13",
+  "version": "2.0.15",
   "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
@@ -32,9 +25,13 @@
         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
@@ -49,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);
@@ -116,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;
 
@@ -156,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;
         }),
@@ -189,16 +129,89 @@
 <template>
     <div v-if="showButtons" class="lkt-item-crud-buttons">
 
-        <template v-if="groupButton !== false">
+        <template v-if="grouped && groupButtonAsModalActions">
+            <lkt-button
+                v-if="showSwitchButton"
+                v-bind="editModeButton"
+                v-model:checked="isEditing"
+                class="lkt-item-crud--switch-mode-button" />
+
+
+            <template v-if="slots['prev-buttons-ever']" v-show="!isLoading">
+                <slot name="prev-buttons-ever"
+                      :can-update="canUpdate"
+                      :can-drop="canDrop"
+                      :perms="perms"
+                />
+            </template>
+
+            <template v-if="slots['prev-buttons']" v-show="isEditing && !isLoading">
+                <slot name="prev-buttons"
+                      :can-update="canUpdate"
+                      :can-drop="canDrop"
+                      :perms="perms"
+                />
+            </template>
+
+            <lkt-button
+                ref="saveButtonRef"
+                v-show="mode === ItemCrudMode.Update && showSaveButton"
+                v-bind="updateButton"
+                :disabled="!ableToUpdate"
+                @loading="onButtonLoading"
+                @loaded="onButtonLoaded"
+                @click="onSave">
+                <slot v-if="!!slots['button-save']" name="button-save" :item="item"
+                      :edit-mode="isEditing"
+                      :is-create="false"
+                      :can-update="canUpdate"
+                      :can-drop="canDrop" />
+            </lkt-button>
+
+            <lkt-button
+                ref="saveButtonRef"
+                v-show="mode === ItemCrudMode.Create && showSaveButton"
+                v-bind="createButton"
+                :disabled="!ableToCreate"
+                @loading="onButtonLoading"
+                @loaded="onButtonLoaded"
+                @click="onCreate">
+                <slot v-if="!!slots['button-save']" name="button-save" :item="item"
+                      :edit-mode="isEditing"
+                      :is-create="true"
+                      :can-update="canUpdate"
+                      :can-drop="canDrop" />
+            </lkt-button>
+
+            <lkt-button
+                ref="dropButtonRef"
+                v-show="showDropButton && mode !== ItemCrudMode.Create"
+                v-bind="dropButton"
+                :disabled="!ableToDrop"
+                @loading="onButtonLoading"
+                @loaded="onButtonLoaded"
+                @click="onDrop">
+                <slot v-if="!!slots['button-drop']" name="button-drop" :item="item"
+                      :edit-mode="isEditing"
+                      :is-create="false"
+                      :can-update="canUpdate"
+                      :can-drop="canDrop" />
+            </lkt-button>
+
+            <template v-if="slots.buttons" v-show="isEditing && !isLoading">
+                <slot name="buttons" />
+            </template>
+        </template>
+        <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" />
 
@@ -222,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"
@@ -237,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"
@@ -252,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"
@@ -292,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"
@@ -307,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"
@@ -322,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"
@@ -340,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" />