lkt-item-crud 2.0.12 → 2.0.14

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

@@ -1,27 +1,27 @@
-import { SetupContext } from 'vue';
-import { HTTPResponse } from 'lkt-http-client';
 import { ItemCrudButtonNavPosition, ItemCrudConfig, ItemCrudMode, ItemCrudView, LktObject, NotificationType } from 'lkt-vue-kernel';
-import ButtonNav from '../components/ButtonNav.vue';
-declare const slots: SetupContext['slots'];
-declare const isLoading: import("vue").Ref<boolean, boolean>, item: import("vue").Ref<LktObject, LktObject>, perms: import("vue").Ref<string[], string[]>, editMode: import("vue").Ref<boolean, boolean>, httpSuccessRead: import("vue").Ref<boolean, boolean>, showStoreMessage: import("vue").Ref<boolean, boolean>, httpStatus: import("vue").Ref<number, number>, dataChanged: import("vue").Ref<boolean, boolean>, createMode: import("vue").Ref<boolean, boolean>, itemBeingEdited: import("vue").Ref<boolean, boolean>, buttonNav: import("vue").Ref<null, null>, canUpdate: import("vue").ComputedRef<boolean>, canDrop: import("vue").ComputedRef<boolean>, canSwitchEditMode: import("vue").ComputedRef<boolean>;
-declare const onCreate: ($event: PointerEvent, r: HTTPResponse) => void, onUpdate: ($event: PointerEvent, r: HTTPResponse) => void, onDrop: ($event: PointerEvent, r: HTTPResponse) => void;
-declare const computedTitle: import("vue").ComputedRef<string>, displayHeader: import("vue").ComputedRef<boolean>, computedInsideModal: import("vue").ComputedRef<boolean>, computedContainerTag: import("vue").ComputedRef<"lkt-modal" | "section">, computedContainerAttrs: import("vue").ComputedRef<{}>;
-declare const __VLS_ctx: InstanceType<__VLS_PickNotAny<typeof __VLS_self, new () => {}>>;
-declare var __VLS_6: {
+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;
@@ -30,97 +30,31 @@ declare var __VLS_6: {
     canDrop: boolean;
     itemBeingEdited: boolean;
     perms: string[];
-}, __VLS_54: {}, __VLS_56: {};
-type __VLS_Slots = __VLS_PrettifyGlobal<__VLS_OmitStringIndex<typeof __VLS_ctx.$slots> & {
-    'pre-title'?: (props: typeof __VLS_6) => any;
+}, __VLS_69: {}, __VLS_71: {};
+type __VLS_Slots = {} & {
+    'prev-buttons-ever'?: (props: typeof __VLS_17) => any;
 } & {
-    'post-title'?: (props: typeof __VLS_8) => any;
+    'prev-buttons'?: (props: typeof __VLS_19) => any;
 } & {
-    'prev-buttons-ever'?: (props: typeof __VLS_21) => any;
+    'pre-title'?: (props: typeof __VLS_21) => any;
 } & {
-    'prev-buttons'?: (props: typeof __VLS_23) => any;
+    'post-title'?: (props: typeof __VLS_23) => any;
 } & {
-    item?: (props: typeof __VLS_33) => any;
+    'prev-buttons-ever'?: (props: typeof __VLS_36) => any;
 } & {
-    'prev-buttons-ever'?: (props: typeof __VLS_54) => any;
+    'prev-buttons'?: (props: typeof __VLS_38) => any;
 } & {
-    'prev-buttons'?: (props: typeof __VLS_56) => any;
-}>;
-declare const __VLS_self: import("vue").DefineComponent<ItemCrudConfig, {
-    ItemCrudButtonNavPosition: typeof ItemCrudButtonNavPosition;
-    NotificationType: typeof NotificationType;
-    ButtonNav: typeof ButtonNav;
-    slots: typeof slots;
-    isLoading: typeof isLoading;
-    item: typeof item;
-    perms: typeof perms;
-    editMode: typeof editMode;
-    httpSuccessRead: typeof httpSuccessRead;
-    showStoreMessage: typeof showStoreMessage;
-    httpStatus: typeof httpStatus;
-    dataChanged: typeof dataChanged;
-    createMode: typeof createMode;
-    itemBeingEdited: typeof itemBeingEdited;
-    buttonNav: typeof buttonNav;
-    canUpdate: typeof canUpdate;
-    canDrop: typeof canDrop;
-    canSwitchEditMode: typeof canSwitchEditMode;
-    onCreate: typeof onCreate;
-    onUpdate: typeof onUpdate;
-    onDrop: typeof onDrop;
-    computedTitle: typeof computedTitle;
-    displayHeader: typeof displayHeader;
-    computedInsideModal: typeof computedInsideModal;
-    computedContainerTag: typeof computedContainerTag;
-    computedContainerAttrs: typeof computedContainerAttrs;
-}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    error: (...args: any[]) => void;
-    drop: (...args: any[]) => void;
-    update: (...args: any[]) => void;
-    create: (...args: any[]) => void;
-    read: (...args: any[]) => void;
-    perms: (...args: any[]) => void;
-    "update:editing": (...args: any[]) => void;
-    "update:modelValue": (...args: any[]) => void;
-    "before-save": (...args: any[]) => void;
-    "modified-data": (...args: any[]) => void;
-}, string, import("vue").PublicProps, Readonly<ItemCrudConfig> & Readonly<{
-    onError?: ((...args: any[]) => any) | undefined;
-    onDrop?: ((...args: any[]) => any) | undefined;
-    onUpdate?: ((...args: any[]) => any) | undefined;
-    onCreate?: ((...args: any[]) => any) | undefined;
-    onRead?: ((...args: any[]) => any) | undefined;
-    onPerms?: ((...args: any[]) => any) | undefined;
-    "onUpdate:editing"?: ((...args: any[]) => any) | undefined;
-    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
-    "onBefore-save"?: ((...args: any[]) => any) | undefined;
-    "onModified-data"?: ((...args: any[]) => any) | undefined;
-}>, {
-    view: ItemCrudView;
-    title: string;
-    mode: ItemCrudMode;
-    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;
-    buttonNavPosition: ItemCrudButtonNavPosition;
-    buttonNavVisibility: import("lkt-vue-kernel").ItemCrudButtonNavVisibility;
-    modalConfig: import("lkt-vue-kernel").ModalConfig;
-    saveConfig: import("lkt-vue-kernel").SaveConfig;
-    dataStateConfig: import("lkt-data-state").DataStateConfig;
-    readResource: string;
-    readData: LktObject;
-    beforeEmitUpdate: Function;
-    notificationType: NotificationType;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+    item?: (props: typeof __VLS_48) => any;
+} & {
+    'prev-buttons-ever'?: (props: typeof __VLS_69) => any;
+} & {
+    'prev-buttons'?: (props: typeof __VLS_71) => any;
+};
 declare const __VLS_component: import("vue").DefineComponent<ItemCrudConfig, {
     doDrop: () => void;
     doRefresh: () => Promise<void>;
     doSave: () => void;
+    turnStoredDataIntoOriginal: () => void;
     hasModifiedData: () => boolean;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     error: (...args: any[]) => void;
@@ -156,6 +90,7 @@ declare const __VLS_component: import("vue").DefineComponent<ItemCrudConfig, {
     createButton: import("lkt-vue-kernel").ButtonConfig | false;
     updateButton: import("lkt-vue-kernel").ButtonConfig | false;
     groupButton: import("lkt-vue-kernel").ButtonConfig | boolean;
+    groupButtonAsModalActions: boolean;
     buttonNavPosition: ItemCrudButtonNavPosition;
     buttonNavVisibility: import("lkt-vue-kernel").ItemCrudButtonNavVisibility;
     modalConfig: import("lkt-vue-kernel").ModalConfig;

package/package.json

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

package/src/components/ButtonNav.vue

@@ -32,6 +32,7 @@
         dropButton?: ButtonConfig|false
         editModeButton?: ButtonConfig|false
         groupButton?: ButtonConfig|boolean
+        groupButtonAsModalActions?: boolean
 
         dataChanged: boolean
 
@@ -189,7 +190,80 @@
 <template>
     <div v-if="showButtons" class="lkt-item-crud-buttons">
 
-        <template v-if="groupButton !== false">
+        <template v-if="groupButton !== false && groupButtonAsModalActions">
+            <lkt-button
+                v-if="showSwitchButton"
+                v-bind="safeEditModeButton"
+                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="safeUpdateButton"
+                :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="safeCreateButton"
+                :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="safeDropButton"
+                :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="groupButton !== false">
             <lkt-button
                 ref="groupButton"
                 v-bind="safeGroupButton"
@@ -316,7 +390,7 @@
                       :edit-mode="isEditing"
                       :is-create="true"
                       :can-update="canUpdate"
-                      :can-drop="canDrop" />
+                      :can-drop="false" />
             </lkt-button>
 
             <lkt-button

package/src/lib-components/LktItemCrud.vue

@@ -17,7 +17,7 @@
         ToastConfig,
         ToastPositionX,
     } from 'lkt-vue-kernel';
-    import { closeModal } from 'lkt-modal';
+    import { closeModal, updateModalKey } from 'lkt-modal';
     import { __ } from 'lkt-i18n';
     import ButtonNav from '../components/ButtonNav.vue';
     import { openToast } from 'lkt-toast';
@@ -61,6 +61,10 @@
         canDrop = computed(() => !createMode.value && Array.isArray(perms.value) && perms.value.includes(TablePermission.Drop)),
         canSwitchEditMode = computed(() => !createMode.value && Array.isArray(perms.value) && perms.value.includes(TablePermission.SwitchEditMode));
 
+    watch(() => props.mode, (v) => {
+        createMode.value = v === ItemCrudMode.Create;
+    })
+
     const fetchItem = async () => {
         debug('fetchItem');
         isLoading.value = true;
@@ -172,12 +176,19 @@
             return true;
         },
         doAutoReloadId = (r?: HTTPResponse) => {
-            if (!computedInsideModal.value && typeof r !== 'undefined' && r.autoReloadId) {
+            debug('doAutoReloadId -> enter: ', r);
+            if (typeof r !== 'undefined' && r.autoReloadId) {
                 debug('doAutoReloadId -> autoReloadId detected: ', r.autoReloadId);
-                props.readData['id'] = r.autoReloadId;
-                debug('doAutoReloadId -> turning off create mode');
-                createMode.value = false;
-                fetchItem();
+                if (!computedInsideModal.value) {
+                    debug('doAutoReloadId -> outsideModal');
+                    props.readData['id'] = r.autoReloadId;
+                    debug('doAutoReloadId -> turning off create mode');
+                    createMode.value = false;
+                    fetchItem();
+                } else {
+                    debug('doAutoReloadId -> insideModal: ', props);
+                    updateModalKey(props.modalConfig.modalName, props.modalConfig.modalKey, r.autoReloadId);
+                }
             }
         },
         onCreate = ($event: PointerEvent, r: HTTPResponse) => {
@@ -205,6 +216,7 @@
                 });
             }
             doAutoReloadId(r);
+            debug('onCreate -> beforeEmitCreate');
             emit('create', r);
         },
         onUpdate = ($event: PointerEvent, r: HTTPResponse) => {
@@ -274,6 +286,9 @@
         doDrop,
         doRefresh: fetchItem,
         doSave,
+        turnStoredDataIntoOriginal: () => {
+            dataState.value.increment(item.value).turnStoredIntoOriginal();
+        },
         hasModifiedData: () => dataState.value.changed(),
     });
 
@@ -332,7 +347,51 @@
     <component
         :is="computedContainerTag"
         v-bind="computedContainerAttrs"
+        class="lkt-item-crud"
     >
+        <template v-if="groupButton !== false && groupButtonAsModalActions" #header-actions>
+            <button-nav
+                ref="buttonNav"
+                v-if="buttonNavPosition === ItemCrudButtonNavPosition.Top"
+                v-model:loading="isLoading"
+                v-model:editing="editMode"
+                :item="item"
+                :mode="mode"
+                :view="view"
+                :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"
+                :data-changed="dataChanged"
+                :http-success-read="httpSuccessRead"
+                :can-update="canUpdate"
+                :can-drop="canDrop"
+                :can-switch-edit-mode="canSwitchEditMode"
+                :perms="perms"
+                @create="onCreate"
+                @save="onUpdate"
+                @drop="onDrop"
+            >
+                <template #prev-buttons-ever="{canUpdate, canDrop, perms}" v-if="slots['prev-buttons-ever']">
+                    <slot name="prev-buttons-ever"
+                          :can-update="canUpdate"
+                          :can-drop="canDrop"
+                          :perms="perms"
+                    />
+                </template>
+                <template #prev-buttons="{canUpdate, canDrop, perms}" v-if="slots['prev-buttons']">
+                    <slot name="prev-buttons"
+                          :can-update="canUpdate"
+                          :can-drop="canDrop"
+                          :perms="perms"
+                    />
+                </template>
+            </button-nav>
+        </template>
+
         <article class="lkt-item-crud">
             <header class="lkt-item-crud_header" v-if="!computedInsideModal && displayHeader">
                 <div class="lkt-item-crud_header-slot" v-if="slots['pre-title']">
@@ -346,7 +405,7 @@
 
             <button-nav
                 ref="buttonNav"
-                v-if="buttonNavPosition === ItemCrudButtonNavPosition.Top"
+                v-if="buttonNavPosition === ItemCrudButtonNavPosition.Top && (groupButton === false || !groupButtonAsModalActions)"
                 v-model:loading="isLoading"
                 v-model:editing="editMode"
                 :item="item"
@@ -363,6 +422,7 @@
                 :can-update="canUpdate"
                 :can-drop="canDrop"
                 :can-switch-edit-mode="canSwitchEditMode"
+                :group-button-as-modal-actions="groupButtonAsModalActions"
                 :perms="perms"
                 @create="onCreate"
                 @save="onUpdate"
@@ -410,7 +470,7 @@
 
             <button-nav
                 ref="buttonNav"
-                v-if="buttonNavPosition === ItemCrudButtonNavPosition.Bottom"
+                v-if="buttonNavPosition === ItemCrudButtonNavPosition.Bottom && (groupButton === false || !groupButtonAsModalActions)"
                 v-model:loading="isLoading"
                 v-model:editing="editMode"
                 :item="item"
@@ -427,6 +487,7 @@
                 :can-update="canUpdate"
                 :can-drop="canDrop"
                 :can-switch-edit-mode="canSwitchEditMode"
+                :group-button-as-modal-actions="groupButtonAsModalActions"
                 :perms="perms"
                 @create="onCreate"
                 @save="onUpdate"