lkt-item-crud 2.0.27 → 2.0.29

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

@@ -7,21 +7,21 @@ declare var __VLS_17: {
     canUpdate: boolean | undefined;
     canDrop: boolean | undefined;
     perms: string[] | undefined;
-}, __VLS_21: {
+}, __VLS_25: {
     item: LktObject;
     loading: boolean;
-}, __VLS_23: {
+}, __VLS_27: {
     item: LktObject;
     loading: boolean;
-}, __VLS_36: {
+}, __VLS_40: {
     canUpdate: boolean | undefined;
     canDrop: boolean | undefined;
     perms: string[] | undefined;
-}, __VLS_38: {
+}, __VLS_42: {
     canUpdate: boolean | undefined;
     canDrop: boolean | undefined;
     perms: string[] | undefined;
-}, __VLS_55: string, __VLS_56: {}, __VLS_58: {
+}, __VLS_59: string, __VLS_60: {}, __VLS_62: {
     item: LktObject;
     loading: false;
     editMode: boolean;
@@ -30,27 +30,27 @@ declare var __VLS_17: {
     canDrop: boolean;
     itemBeingEdited: boolean;
     perms: string[];
-}, __VLS_79: {}, __VLS_81: {};
+}, __VLS_83: {}, __VLS_85: {};
 type __VLS_Slots = {} & {
-    [K in NonNullable<typeof __VLS_55>]?: (props: typeof __VLS_56) => any;
+    [K in NonNullable<typeof __VLS_59>]?: (props: typeof __VLS_60) => any;
 } & {
     'prev-buttons-ever'?: (props: typeof __VLS_17) => any;
 } & {
     'prev-buttons'?: (props: typeof __VLS_19) => any;
 } & {
-    'pre-title'?: (props: typeof __VLS_21) => any;
+    'pre-title'?: (props: typeof __VLS_25) => any;
 } & {
-    'post-title'?: (props: typeof __VLS_23) => any;
+    'post-title'?: (props: typeof __VLS_27) => any;
 } & {
-    'prev-buttons-ever'?: (props: typeof __VLS_36) => any;
+    'prev-buttons-ever'?: (props: typeof __VLS_40) => any;
 } & {
-    'prev-buttons'?: (props: typeof __VLS_38) => any;
+    'prev-buttons'?: (props: typeof __VLS_42) => any;
 } & {
-    item?: (props: typeof __VLS_58) => any;
+    item?: (props: typeof __VLS_62) => any;
 } & {
-    'prev-buttons-ever'?: (props: typeof __VLS_79) => any;
+    'prev-buttons-ever'?: (props: typeof __VLS_83) => any;
 } & {
-    'prev-buttons'?: (props: typeof __VLS_81) => any;
+    'prev-buttons'?: (props: typeof __VLS_85) => any;
 };
 declare const __VLS_component: import("vue").DefineComponent<ItemCrudConfig, {
     doDrop: () => void;
@@ -90,7 +90,8 @@ declare const __VLS_component: import("vue").DefineComponent<ItemCrudConfig, {
     "onModified-data"?: ((...args: any[]) => any) | undefined;
 }>, {
     view: ItemCrudView;
-    form: import("lkt-vue-kernel").FormConfig;
+    form: import("lkt-vue-kernel").FormConfig | Function;
+    header: import("lkt-vue-kernel").HeaderConfig;
     title: string;
     mode: ItemCrudMode;
     modelValue: LktObject;

package/package.json

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

package/src/lib-components/LktItemCrud.vue

@@ -252,7 +252,7 @@
     const formDifferencesChecker = ref(undefined);
     const resetFormDifferencesChecker = () => {
         if (computedHasForm.value) {
-            formDifferencesChecker.value = getFormDataState(item.value, itemModifications.value, props.form);
+            formDifferencesChecker.value = getFormDataState(item.value, itemModifications.value, computedForm.value);
         }
     }
 
@@ -453,6 +453,11 @@
 
             return computedTitle.value.length > 0 || !!slots['post-title'];
         }),
+        displayLktHeader = computed(() => {
+            if (isLoading.value) return false;
+            return typeof props.header === 'object'
+                && Object.keys(props.header).length > 0;
+        }),
         computedInsideModal = computed(() => {
             return props.view === ItemCrudView.Modal;
         }),
@@ -515,7 +520,7 @@
             return {};
         }),
         computedHasForm = computed(() => {
-            return typeof props.form === 'object' && Object.keys(props.form).length > 0;
+            return (typeof computedForm.value === 'object' && Object.keys(computedForm.value).length > 0);
         }),
         computedModificationViews = computed(() => {
             if (Object.keys(itemModifications.value).length === 0) return [];
@@ -532,11 +537,17 @@
     })
 
     const computedFormSlots = computed(() => {
-        if (computedHasForm.value) {
-            return getFormSlotKeys(props.form);
-        }
+        if (computedHasForm.value) return getFormSlotKeys(computedForm.value);
         return [];
     })
+
+    const computedForm = computed(() => {
+        if (typeof props.form === 'function') return props.form({
+            mode: props.mode,
+            view: pickedModificationView.value,
+        });
+        return props.form;
+    })
 </script>
 
 <template>
@@ -600,164 +611,163 @@
             </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']">
-                    <slot name="pre-title" :item="item" :loading="isLoading" />
-                </div>
-                <h1 class="lkt-item-crud_header-title" v-if="computedTitle.length > 0">{{ computedTitle }}</h1>
-                <div class="lkt-item-crud_header-slot" v-if="slots['post-title']">
-                    <slot name="post-title" :item="item" :loading="isLoading" />
-                </div>
-            </header>
-
-            <button-nav
-                ref="buttonNav"
-                v-if="buttonNavPosition === ItemCrudButtonNavPosition.Top && (groupButton === false || !groupButtonAsModalActions) && computedHasButtons"
-                v-model:loading="isLoading"
-                v-model:editing="editMode"
-                v-model:picked-modification-view="pickedModificationView"
-                :item="item"
-                :modifications="itemModifications"
-                :mode="mode"
-                :view="view"
-                :grouped="groupButton !== false"
-                :button-nav-visibility="buttonNavVisibility"
-                :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="permissions"
-                :modification-view="computedModificationViews"
-                :editable-view="computedEditableView"
-                :nav-start-buttons="navStartButtons"
-                :nav-start-buttons-editing="navStartButtonsEditing"
-                :nav-end-buttons="navEndButtons"
-                :nav-end-buttons-editing="navEndButtonsEditing"
-                @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>
-
-            <div class="lkt-item-crud_content" v-if="!isLoading">
-                <div v-if="httpSuccessRead" class="lkt-grid-1">
-                    <lkt-http-info
-                        v-if="showStoreMessage && notificationType === NotificationType.Inline"
-                        :code="httpStatus"
-                        :palette="httpStatus === 200 ? 'success' : 'danger'"
-                        quick
-                        can-close
-                        v-on:close="showStoreMessage = false" />
-
-                    <template v-if="computedHasForm">
-                        <lkt-form
-                            ref="formRef"
-                            v-model="item"
-                            v-model:modifications="itemModifications"
-                            v-model:valid="validForm"
-                            v-model:changed="changedForm"
-                            v-bind="<FormUiConfig>{
+        <lkt-header v-if="!computedInsideModal && displayLktHeader" v-bind="header"/>
+        <header class="lkt-item-crud_header" v-else-if="!computedInsideModal && displayHeader">
+            <div class="lkt-item-crud_header-slot" v-if="slots['pre-title']">
+                <slot name="pre-title" :item="item" :loading="isLoading" />
+            </div>
+            <h1 class="lkt-item-crud_header-title" v-if="computedTitle.length > 0">{{ computedTitle }}</h1>
+            <div class="lkt-item-crud_header-slot" v-if="slots['post-title']">
+                <slot name="post-title" :item="item" :loading="isLoading" />
+            </div>
+        </header>
+
+        <button-nav
+            ref="buttonNav"
+            v-if="buttonNavPosition === ItemCrudButtonNavPosition.Top && (groupButton === false || !groupButtonAsModalActions) && computedHasButtons"
+            v-model:loading="isLoading"
+            v-model:editing="editMode"
+            v-model:picked-modification-view="pickedModificationView"
+            :item="item"
+            :modifications="itemModifications"
+            :mode="mode"
+            :view="view"
+            :grouped="groupButton !== false"
+            :button-nav-visibility="buttonNavVisibility"
+            :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="permissions"
+            :modification-view="computedModificationViews"
+            :editable-view="computedEditableView"
+            :nav-start-buttons="navStartButtons"
+            :nav-start-buttons-editing="navStartButtonsEditing"
+            :nav-end-buttons="navEndButtons"
+            :nav-end-buttons-editing="navEndButtonsEditing"
+            @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>
+
+        <div class="lkt-item-crud_content" v-if="!isLoading">
+            <div v-if="httpSuccessRead" class="lkt-grid-1">
+                <lkt-http-info
+                    v-if="showStoreMessage && notificationType === NotificationType.Inline"
+                    :code="httpStatus"
+                    :palette="httpStatus === 200 ? 'success' : 'danger'"
+                    quick
+                    can-close
+                    v-on:close="showStoreMessage = false" />
+
+                <template v-if="computedHasForm">
+                    <lkt-form
+                        ref="formRef"
+                        v-model="item"
+                        v-model:modifications="itemModifications"
+                        v-model:valid="validForm"
+                        v-model:changed="changedForm"
+                        v-bind="<FormUiConfig>{
                                 ...formUiConfig,
-                                form,
+                                form: computedForm,
                                 differencesTableConfig,
                                 visibleView: pickedModificationView,
                                 modificationDataState: formDifferencesChecker,
                                 editableViews: [computedEditableView],
                                 disabled: !editMode,
                             }"
-                        >
-                            <template v-for="formSlot in computedFormSlots" v-slot:[formSlot]="{}">
-                                <slot :name="formSlot"/>
-                            </template>
-                        </lkt-form>
-                    </template>
-
-                    <template v-else>
-                        <slot name="item"
-                              :item="item"
-                              :loading="isLoading"
-                              :edit-mode="editMode"
-                              :is-create="createMode"
-                              :can-update="canUpdate"
-                              :can-drop="canDrop"
-                              :item-being-edited="itemBeingEdited"
-                              :perms="permissions"
-                        />
-                    </template>
-                </div>
-                <lkt-http-info :code="httpStatus" v-else-if="notificationType === NotificationType.Inline" />
-            </div>
-            <lkt-loader v-if="isLoading" />
-
-            <button-nav
-                ref="buttonNav"
-                v-if="buttonNavPosition === ItemCrudButtonNavPosition.Bottom && (groupButton === false || !groupButtonAsModalActions) && computedHasButtons"
-                v-model:loading="isLoading"
-                v-model:editing="editMode"
-                v-model:picked-modification-view="pickedModificationView"
-                :item="item"
-                :modifications="itemModifications"
-                :mode="mode"
-                :view="view"
-                :grouped="groupButton !== false"
-                :button-nav-visibility="buttonNavVisibility"
-                :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="permissions"
-                :modification-view="computedModificationViews"
-                :editable-view="computedEditableView"
-                :nav-start-buttons="navStartButtons"
-                :nav-start-buttons-editing="navStartButtonsEditing"
-                :nav-end-buttons="navEndButtons"
-                :nav-end-buttons-editing="navEndButtonsEditing"
-                @create="onCreate"
-                @save="onUpdate"
-                @drop="onDrop"
-            >
-                <template #prev-buttons-ever v-if="slots['prev-buttons-ever']">
-                    <slot name="prev-buttons-ever" />
+                    >
+                        <template v-for="formSlot in computedFormSlots" v-slot:[formSlot]="{}">
+                            <slot :name="formSlot"/>
+                        </template>
+                    </lkt-form>
                 </template>
-                <template #prev-buttons-ever v-if="slots['prev-buttons']">
-                    <slot name="prev-buttons" />
+
+                <template v-else>
+                    <slot name="item"
+                          :item="item"
+                          :loading="isLoading"
+                          :edit-mode="editMode"
+                          :is-create="createMode"
+                          :can-update="canUpdate"
+                          :can-drop="canDrop"
+                          :item-being-edited="itemBeingEdited"
+                          :perms="permissions"
+                    />
                 </template>
-            </button-nav>
-        </article>
+            </div>
+            <lkt-http-info :code="httpStatus" v-else-if="notificationType === NotificationType.Inline" />
+        </div>
+        <lkt-loader v-if="isLoading" />
+
+        <button-nav
+            ref="buttonNav"
+            v-if="buttonNavPosition === ItemCrudButtonNavPosition.Bottom && (groupButton === false || !groupButtonAsModalActions) && computedHasButtons"
+            v-model:loading="isLoading"
+            v-model:editing="editMode"
+            v-model:picked-modification-view="pickedModificationView"
+            :item="item"
+            :modifications="itemModifications"
+            :mode="mode"
+            :view="view"
+            :grouped="groupButton !== false"
+            :button-nav-visibility="buttonNavVisibility"
+            :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="permissions"
+            :modification-view="computedModificationViews"
+            :editable-view="computedEditableView"
+            :nav-start-buttons="navStartButtons"
+            :nav-start-buttons-editing="navStartButtonsEditing"
+            :nav-end-buttons="navEndButtons"
+            :nav-end-buttons-editing="navEndButtonsEditing"
+            @create="onCreate"
+            @save="onUpdate"
+            @drop="onDrop"
+        >
+            <template #prev-buttons-ever v-if="slots['prev-buttons-ever']">
+                <slot name="prev-buttons-ever" />
+            </template>
+            <template #prev-buttons-ever v-if="slots['prev-buttons']">
+                <slot name="prev-buttons" />
+            </template>
+        </button-nav>
     </component>
 </template>