lkt-item-crud 2.0.5 → 2.0.7

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

@@ -3,7 +3,7 @@ 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>, 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 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 () => {}>>;
@@ -13,7 +13,15 @@ declare var __VLS_6: {
 }, __VLS_8: {
     item: LktObject;
     loading: boolean;
-}, __VLS_21: {}, __VLS_23: {}, __VLS_33: {
+}, __VLS_21: {
+    canUpdate: boolean | undefined;
+    canDrop: boolean | undefined;
+    perms: string[] | undefined;
+}, __VLS_23: {
+    canUpdate: boolean | undefined;
+    canDrop: boolean | undefined;
+    perms: string[] | undefined;
+}, __VLS_33: {
     item: LktObject;
     loading: false;
     editMode: boolean;
@@ -44,6 +52,7 @@ declare const __VLS_self: import("vue").DefineComponent<ItemCrudConfig, {
     slots: typeof slots;
     isLoading: typeof isLoading;
     item: typeof item;
+    perms: typeof perms;
     editMode: typeof editMode;
     httpSuccessRead: typeof httpSuccessRead;
     showStoreMessage: typeof showStoreMessage;
@@ -91,10 +100,11 @@ declare const __VLS_self: import("vue").DefineComponent<ItemCrudConfig, {
     mode: ItemCrudMode;
     modelValue: LktObject;
     editing: boolean;
-    editModeButton: import("lkt-vue-kernel").ButtonConfig;
-    dropButton: import("lkt-vue-kernel").ButtonConfig;
-    createButton: import("lkt-vue-kernel").ButtonConfig;
-    updateButton: import("lkt-vue-kernel").ButtonConfig;
+    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;
     buttonNavPosition: ItemCrudButtonNavPosition;
     buttonNavVisibility: import("lkt-vue-kernel").ItemCrudButtonNavVisibility;
     modalConfig: import("lkt-vue-kernel").ModalConfig;
@@ -138,10 +148,11 @@ declare const __VLS_component: import("vue").DefineComponent<ItemCrudConfig, {
     mode: ItemCrudMode;
     modelValue: LktObject;
     editing: boolean;
-    editModeButton: import("lkt-vue-kernel").ButtonConfig;
-    dropButton: import("lkt-vue-kernel").ButtonConfig;
-    createButton: import("lkt-vue-kernel").ButtonConfig;
-    updateButton: import("lkt-vue-kernel").ButtonConfig;
+    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;
     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.5",
+  "version": "2.0.7",
   "description": "",
   "type": "module",
   "module": "./dist/build.js",
@@ -36,19 +36,17 @@
     "vue": "^3.3.0",
     "vue-tsc": "^2.2.0"
   },
-  "dependencies": {
-  },
   "peerDependencies": {
-    "lkt-button": "^2.0.4",
-    "lkt-data-state": "^1.0.9",
-    "lkt-http-client": "^1.0.12",
-    "lkt-http-info": "^1.0.2",
-    "lkt-i18n": "^1.0.4",
-    "lkt-loader": "^1.0.2",
-    "lkt-modal": "^2.0.2",
-    "lkt-string-tools": "^1.0.2",
-    "lkt-toast": "^1.0.1",
-    "lkt-vue-kernel": "^1.0.27",
+    "lkt-button": "^2.0.12",
+    "lkt-data-state": "^1.0.11",
+    "lkt-http-client": "^1.0.34",
+    "lkt-http-info": "^1.1.1",
+    "lkt-i18n": "^1.1.0",
+    "lkt-loader": "^1.2.0",
+    "lkt-modal": "^2.0.5",
+    "lkt-string-tools": "^1.1.0",
+    "lkt-toast": "^1.1.1",
+    "lkt-vue-kernel": "^1.0.48",
     "vue": "^3.3.0"
   }
 }

package/src/components/ButtonNav.vue

@@ -27,16 +27,17 @@
         view: ItemCrudView
         mode: ItemCrudMode
 
-        createButton?: ButtonConfig
-        updateButton?: ButtonConfig
-        dropButton?: ButtonConfig
-        editModeButton?: ButtonConfig
+        createButton?: ButtonConfig|false
+        updateButton?: ButtonConfig|false
+        dropButton?: ButtonConfig|false
+        editModeButton?: ButtonConfig|false
 
         dataChanged: boolean
 
         canUpdate?: boolean
         canDrop?: boolean
         canSwitchEditMode?: boolean
+        perms?: Array<string>
 
         httpSuccessRead?: boolean
 
@@ -114,7 +115,7 @@
 
 
     const ableToUpdate = computed(() => {
-            if (props.mode !== ItemCrudMode.Create && !props.canUpdate) return false;
+            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);
@@ -141,7 +142,7 @@
             return true;
         }),
         showDropButton = computed(() => {
-            if (!props.canDrop) return false;
+            if (!props.canDrop || props.dropButton === false) return false;
             if (!props.canUpdate && props.canDrop) return true;
 
             return !isLoading.value
@@ -149,10 +150,16 @@
                 && props.httpSuccessRead;
         }),
         showSaveButton = computed(() => {
-            if (props.dataChanged) return true;
+            if (props.mode === ItemCrudMode.Create && props.createButton === false) return false;
+            if (props.mode === ItemCrudMode.Update && props.updateButton === false) return false;
+            if (props.dataChanged) {
+                return ableToUpdate.value || ableToCreate.value;
+            }
             if (isLoading.value) return false;
 
-            if (props.mode === ItemCrudMode.Create) return true;
+            if (props.mode === ItemCrudMode.Create) {
+                return true;
+            }
 
             if (props.buttonNavVisibility === ItemCrudButtonNavVisibility.Never) {
                 return false;
@@ -162,6 +169,7 @@
                 && props.httpSuccessRead;
         }),
         showSwitchButton = computed(() => {
+            if (props.editModeButton === false) return false;
             if (!props.canSwitchEditMode) return false;
             if (!props.canUpdate && !props.canDrop) return false;
             if (!props.canUpdate && props.canDrop) return false;
@@ -183,11 +191,19 @@
     <div v-if="showButtons" class="lkt-item-crud-buttons">
 
         <div class="lkt-item-crud-buttons" v-if="slots['prev-buttons-ever']" v-show="!isLoading">
-            <slot name="prev-buttons-ever" />
+            <slot name="prev-buttons-ever"
+                  :can-update="canUpdate"
+                  :can-drop="canDrop"
+                  :perms="perms"
+            />
         </div>
 
         <div class="lkt-item-crud-buttons" v-if="slots['prev-buttons']" v-show="isEditing && !isLoading">
-            <slot name="prev-buttons" />
+            <slot name="prev-buttons"
+                  :can-update="canUpdate"
+                  :can-drop="canDrop"
+                  :perms="perms"
+            />
         </div>
 
         <lkt-button

package/src/lib-components/LktItemCrud.vue

@@ -22,6 +22,9 @@
     import ButtonNav from '../components/ButtonNav.vue';
     import { openToast } from 'lkt-toast';
 
+    // defineOptions({
+    //     inheritAttrs: false
+    // })
 
     const props = withDefaults(defineProps<ItemCrudConfig>(), getDefaultValues(ItemCrud));
 
@@ -40,11 +43,9 @@
         'modified-data',
     ]);
 
-    let basePerms: string[] = [];
-
     const isLoading = ref(true),
         item = ref(props.modelValue),
-        perms = ref(basePerms),
+        perms = ref(props.perms),
         editMode = ref(props.editing),
         httpSuccessRead = ref(false),
         showStoreMessage = ref(false),
@@ -145,6 +146,14 @@
             dataState.value.increment(item.value).turnStoredIntoOriginal();
             dataChanged.value = dataState.value.changed();
         }
+        // Offline mode
+        else {
+            httpSuccessRead.value = true;
+            editMode.value = true;
+            isLoading.value = false;
+            dataState.value.increment(item.value).turnStoredIntoOriginal();
+            dataChanged.value = dataState.value.changed();
+        }
     });
 
     const ensureValidResourceSave = (r: HTTPResponse, resource?: string) => {
@@ -310,8 +319,8 @@
                     },
                     ...props.modalConfig,
                     ...{
-                        'before-close': crudBeforeClose,
-                        'close-confirm': closeConfirm.value,
+                        beforeClose: crudBeforeClose,
+                        closeConfirm: closeConfirm.value,
                     },
                 };
             }
@@ -353,15 +362,24 @@
                 :can-update="canUpdate"
                 :can-drop="canDrop"
                 :can-switch-edit-mode="canSwitchEditMode"
+                :perms="perms"
                 @create="onCreate"
                 @save="onUpdate"
                 @drop="onDrop"
             >
-                <template #prev-buttons-ever v-if="slots['prev-buttons-ever']">
-                    <slot name="prev-buttons-ever" />
+                <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-ever v-if="slots['prev-buttons']">
-                    <slot name="prev-buttons" />
+                <template #prev-buttons-ever="{canUpdate, canDrop, perms}" v-if="slots['prev-buttons']">
+                    <slot name="prev-buttons"
+                          :can-update="canUpdate"
+                          :can-drop="canDrop"
+                          :perms="perms"
+                    />
                 </template>
             </button-nav>