lkt-item-crud 1.3.0 → 2.0.0

package/dist/functions/debug.d.ts

@@ -0,0 +1,2 @@
+export declare const debug: (...args: any[]) => void;
+export declare const debugLktItemCrud: (state?: boolean) => void;

package/dist/index.d.ts

@@ -0,0 +1,7 @@
+import { Plugin } from "vue";
+import "./../lkt-item-crud.css";
+declare const LktItemCrud: Plugin;
+export default LktItemCrud;
+export { debugLktItemCrud } from "./functions/debug";
+export declare const setItemCrudDefaultSaveIcon: (icon: string) => void;
+export declare const setItemCrudDefaultDropIcon: (icon: string) => void;

package/dist/settings/Settings.d.ts

@@ -0,0 +1,5 @@
+export declare class Settings {
+    static debugEnabled: boolean;
+    static defaultSaveIcon: string;
+    static defaultDropIcon: string;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lkt-item-crud",
-  "version": "1.3.0",
+  "version": "2.0.0",
   "description": "",
   "type": "module",
   "module": "./dist/build.js",
@@ -27,27 +27,24 @@
     "@types/node": "^20.11.19",
     "@types/rollup": "^0.54.0",
     "@vitejs/plugin-vue": "^5.0.4",
-    "rollup": "^4.9.6",
-    "typescript": "^5.3.3",
-    "vite": "^5.1.3",
+    "rollup": "^4.34.8",
+    "typescript": "^5.7.3",
+    "vite": "^6.1.1",
     "vue": "^3.3.0",
-    "vue-tsc": "^1.8.27"
+    "vue-tsc": "^2.2.0"
   },
   "engines": {
     "node": ">=18"
   },
   "dependencies": {
-    "lkt-button": "^1.0.14",
+    "lkt-button": "^2.0.1",
     "lkt-data-state": "^1.0.9",
-    "lkt-events": "^1.0.2",
-    "lkt-field-switch": "^1.0.0",
     "lkt-http-client": "^1.0.12",
     "lkt-http-info": "^1.0.2",
     "lkt-i18n": "^1.0.4",
     "lkt-loader": "^1.0.2",
-    "lkt-modal": "^1.2.1",
+    "lkt-modal": "^2.0.1",
     "lkt-string-tools": "^1.0.2",
-    "lkt-ts-interfaces": "^1.0.2",
     "lkt-vue-kernel": "^1.0.7",
     "path": "^0.12.7"
   }

package/src/components/ButtonNav.vue

@@ -1,48 +1,77 @@
 <script setup lang="ts">
-    import { ref, useSlots, watch } from 'vue';
-    import { LktObject } from 'lkt-ts-interfaces';
+    import { computed, ref, SetupContext, useSlots, watch } from 'vue';
+    import {
+        ButtonConfig,
+        ensureButtonConfig,
+        ItemCrudButtonNavVisibility,
+        ItemCrudMode,
+        ItemCrudView,
+        LktObject,
+        LktSettings,
+    } from 'lkt-vue-kernel';
     import { HTTPResponse } from 'lkt-http-client';
 
-    const emit = defineEmits(['update:loading', 'update:editing', 'save', 'drop']);
+    const emit = defineEmits([
+        'update:loading',
+        'update:editing',
+        'create',
+        'save',
+        'drop',
+    ]);
 
     const props = withDefaults(defineProps<{
         item: LktObject,
         editing?: boolean
         loading?: boolean
-        createMode?: boolean
+
+        view: ItemCrudView
+        mode: ItemCrudMode
+
+        createButton?: ButtonConfig
+        updateButton?: ButtonConfig
+        dropButton?: ButtonConfig
+        editModeButton?: ButtonConfig
+
+        dataChanged: boolean
+
         canUpdate?: boolean
         canDrop?: boolean
-        showSwitchButton?: boolean
-        showSaveButton?: boolean
-        showDropButton?: boolean
-        ableToSave?: boolean
-        ableToDrop?: boolean
-        saveConfirm?: string
-        dropConfirm?: string
-        confirmData?: LktObject
-        dropConfirmData?: LktObject
-        saveResource?: string
-        dropResource?: string
-        saveData?: LktObject
-        dropData?: LktObject
-        saveText?: string
-        dropText?: string
-        saveIcon?: string
-        dropIcon?: string
-        editModeText?: string
+        canSwitchEditMode?: boolean
+
+        httpSuccessRead?: boolean
 
+        buttonNavVisibility: ItemCrudButtonNavVisibility
     }>(), {
         item: () => ({}),
         editing: false,
         isLoading: false,
-        showSaveButton: false,
-        ableToSave: false,
     });
 
-    const slots = useSlots();
+    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));
+
+    watch(() => props.createButton, v => {
+        safeCreateButton.value = ensureButtonConfig(v, LktSettings.defaultCreateButton);
+    }, { deep: true });
 
-    const saveButton = ref(<HTMLButtonElement|null>null);
-    const dropButton = ref(<HTMLButtonElement|null>null);
+    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);
+    const dropButtonRef = ref(<HTMLButtonElement | null>null);
 
     const isLoading = ref(props.loading);
     watch(() => props.loading, v => isLoading.value = v);
@@ -58,6 +87,9 @@
         onButtonLoaded = () => {
             isLoading.value = false;
         },
+        onCreate = ($event: Event, r: HTTPResponse) => {
+            emit('create', $event, r);
+        },
         onSave = ($event: Event, r: HTTPResponse) => {
             emit('save', $event, r);
         },
@@ -66,21 +98,84 @@
         };
 
     const doSave = () => {
-            if (saveButton.value && typeof saveButton.value.click === 'function') saveButton.value.click();
+            if (saveButtonRef.value && typeof saveButtonRef.value.click === 'function') saveButtonRef.value.click();
         },
         doDrop = () => {
-            if (dropButton.value && typeof dropButton.value.click === 'function') dropButton.value.click();
+            if (dropButtonRef.value && typeof dropButtonRef.value.click === 'function') dropButtonRef.value.click();
         };
 
     defineExpose({
         doSave,
         doDrop,
-    })
+    });
+
+
+    const ableToUpdate = computed(() => {
+            if (props.mode !== ItemCrudMode.Create && !props.canUpdate) 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 props.dataChanged;
+        }),
+        ableToCreate = computed(() => {
+            if (props.mode !== ItemCrudMode.Create) 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 props.dataChanged;
+        }),
+        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(() => {
+            if (!props.canDrop) return false;
+            if (!props.canUpdate && props.canDrop) return true;
+
+            return !isLoading.value
+                && props.editing
+                && props.httpSuccessRead;
+        }),
+        showSaveButton = computed(() => {
+            if (props.dataChanged) return true;
+            if (isLoading.value) return false;
+
+            if (props.mode === ItemCrudMode.Create) return true;
+
+            if (props.buttonNavVisibility === ItemCrudButtonNavVisibility.Never) {
+                return false;
+            }
+
+            return props.editing
+                && props.httpSuccessRead;
+        }),
+        showSwitchButton = computed(() => {
+            if (!props.canSwitchEditMode) return false;
+            if (!props.canUpdate && !props.canDrop) return false;
+            if (!props.canUpdate && props.canDrop) return false;
+
+            return !isLoading.value
+                && props.mode !== ItemCrudMode.Create
+                && props.httpSuccessRead;
+        }),
+        showButtons = computed(() => {
+            if (props.buttonNavVisibility === ItemCrudButtonNavVisibility.Always && (ableToUpdate.value || ableToCreate.value || ableToDrop.value)) return true;
+            if (slots['prev-buttons-ever']) return true;
+            if (props.buttonNavVisibility === ItemCrudButtonNavVisibility.Never) return false;
+            return showSaveButton.value || showDropButton.value || showSwitchButton.value;
+        });
 
 </script>
 
 <template>
-    <div class="lkt-item-crud-buttons">
+    <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" />
@@ -91,46 +186,49 @@
         </div>
 
         <lkt-button
-            ref="saveButton"
-            v-if="showSaveButton"
-            palette="success"
-            :disabled="!ableToSave"
-            :confirm-modal="saveConfirm"
-            :confirm-data="confirmData"
-            :resource="saveResource"
-            :resource-data="saveData"
-            :text="slots['button-save'] ? '' : saveText"
-            :icon="slots['button-save'] ? '' : saveIcon"
+            ref="saveButtonRef"
+            v-if="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="createMode"
+                  :is-create="false"
+                  :can-update="canUpdate"
+                  :can-drop="canDrop" />
+        </lkt-button>
+
+        <lkt-button
+            ref="saveButtonRef"
+            v-else-if="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"></slot>
+                  :can-drop="canDrop" />
         </lkt-button>
 
         <lkt-button
-            ref="dropButton"
+            ref="dropButtonRef"
             v-show="showDropButton"
-            v-if="!createMode"
-            palette="danger"
+            v-if="mode !== ItemCrudMode.Create"
+            v-bind="safeDropButton"
             :disabled="!ableToDrop"
-            :confirm-modal="dropConfirm"
-            :confirm-data="dropConfirmData"
-            :resource="dropResource"
-            :resource-data="dropData"
-            :text="slots['button-drop'] ? '' : dropText"
-            :icon="slots['button-drop'] ? '' : dropIcon"
             @loading="onButtonLoading"
             @loaded="onButtonLoaded"
             @click="onDrop">
             <slot v-if="!!slots['button-drop']" name="button-drop" :item="item"
                   :edit-mode="isEditing"
-                  :is-create="createMode"
+                  :is-create="false"
                   :can-update="canUpdate"
-                  :can-drop="canDrop"></slot>
+                  :can-drop="canDrop" />
         </lkt-button>
 
         <div class="lkt-item-crud-buttons" v-if="slots.buttons" v-show="isEditing && !isLoading">
@@ -139,9 +237,8 @@
 
         <lkt-button
             v-if="showSwitchButton"
+            v-bind="safeEditModeButton"
             v-model:checked="isEditing"
-            class="lkt-item-crud--switch-mode-button"
-            show-switch
-            :text="editModeText" />
+            class="lkt-item-crud--switch-mode-button" />
     </div>
 </template>