lkt-table 2.0.40 → 2.0.42

package/dist/components/LktTableRow.vue.d.ts

@@ -1,4 +1,5 @@
-import { Column, LktObject, ValidTableRowTypeValue } from "lkt-vue-kernel";
+import { Component } from "vue";
+import { Column, LktObject, TablePermission, ValidTableRowTypeValue } from "lkt-vue-kernel";
 type __VLS_Props = {
     modelValue: LktObject;
     isDraggable: boolean;
@@ -19,8 +20,12 @@ type __VLS_Props = {
     renderDrag?: boolean | Function;
     disabledDrag?: boolean | Function;
     itemContainerClass?: string | Function;
+    itemSlotComponent?: string | Function | Component;
+    itemSlotData?: LktObject | Function;
+    itemSlotEvents?: LktObject | Function;
+    permissions?: Array<TablePermission>;
 };
-declare var __VLS_26: `item-${number}`, __VLS_27: {
+declare var __VLS_30: `item-${number}`, __VLS_31: {
     item: LktObject;
     index: number;
     editing: boolean;
@@ -30,7 +35,7 @@ declare var __VLS_26: `item-${number}`, __VLS_27: {
     canDrop: boolean;
     isLoading: boolean;
     doDrop: () => void;
-}, __VLS_29: {
+}, __VLS_33: {
     item: LktObject;
     index: number;
     editing: boolean;
@@ -40,18 +45,18 @@ declare var __VLS_26: `item-${number}`, __VLS_27: {
     canDrop: boolean;
     isLoading: boolean;
     doDrop: () => void;
-}, __VLS_32: string, __VLS_33: {
+}, __VLS_36: string, __VLS_37: {
     value: any;
     item: LktObject;
     column: Column;
     i: number;
 };
 type __VLS_Slots = {} & {
-    [K in NonNullable<typeof __VLS_26>]?: (props: typeof __VLS_27) => any;
+    [K in NonNullable<typeof __VLS_30>]?: (props: typeof __VLS_31) => any;
 } & {
-    [K in NonNullable<typeof __VLS_32>]?: (props: typeof __VLS_33) => any;
+    [K in NonNullable<typeof __VLS_36>]?: (props: typeof __VLS_37) => any;
 } & {
-    item?: (props: typeof __VLS_29) => any;
+    item?: (props: typeof __VLS_33) => any;
 };
 declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (...args: any[]) => void;
@@ -81,6 +86,7 @@ declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}
     renderDrag: boolean | Function;
     disabledDrag: boolean | Function;
     itemContainerClass: string | Function;
+    permissions: Array<TablePermission>;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lkt-table",
-  "version": "2.0.40",
+  "version": "2.0.42",
   "description": "",
   "keywords": [
     "lkt",

package/src/components/LktTableCell.vue

@@ -112,6 +112,19 @@ const computedFieldLabel = computed(() => {
         :prop="item"
         @click="onClickInlineDrop"
     >{{ getColumnDisplayContent(column, item, i) }}</lkt-button>
+
+    <lkt-field
+        v-else-if="column.type === ColumnType.ColumnIndex && column.field"
+        v-bind="<FieldConfig>{
+            ...computedFieldConfig,
+            modelValue: getColumnDisplayContent(column, item, i, columns),
+            readMode: true,
+            slotData,
+            label: computedFieldLabel,
+            modalData: computedModalData,
+            prop: item,
+        }"
+    />
     <template v-else>
         {{ getColumnDisplayContent(column, item, i, columns) }}
     </template>

package/src/components/LktTableRow.vue

@@ -7,9 +7,16 @@ import {
     getHorizontalColSpan
 } from "../functions/table-functions";
 import LktTableCell from "./LktTableCell.vue";
-import {computed, ref, useSlots, watch} from "vue";
+import {Component, computed, ref, useSlots, watch} from "vue";
 import {Settings} from "../settings/Settings";
-import {Column, LktObject, TableRowType, ValidTableRowTypeValue} from "lkt-vue-kernel";
+import {
+    Column,
+    ItemSlotComponentConfig,
+    LktObject,
+    TablePermission,
+    TableRowType,
+    ValidTableRowTypeValue
+} from "lkt-vue-kernel";
 
 const slots = useSlots();
 const emit = defineEmits([
@@ -40,6 +47,10 @@ const props = withDefaults(defineProps<{
     renderDrag?: boolean | Function
     disabledDrag?: boolean | Function
     itemContainerClass?: string | Function
+    itemSlotComponent?: string | Function | Component
+    itemSlotData?: LktObject | Function
+    itemSlotEvents?: LktObject | Function
+    permissions?: Array<TablePermission>
 }>(), {
     modelValue: () => ({}),
     isDraggable: true,
@@ -56,6 +67,7 @@ const props = withDefaults(defineProps<{
     renderDrag: true,
     disabledDrag: true,
     itemContainerClass: '',
+    permissions: () => [],
 });
 
 const Item = ref(props.modelValue);
@@ -156,7 +168,22 @@ const canRenderDragIndicator = computed(() => {
                 </lkt-button>
             </div>
         </td>
-        <template v-if="canCustomItem && slots[`item-${i}`]">
+        <template v-if="itemSlotComponent">
+            <td :key="'td' + i" :colspan="visibleColumns.length">
+                <component
+                    :is="itemSlotComponent"
+                    v-bind="<ItemSlotComponentConfig>{
+                        item: Item,
+                        index: i,
+                        editing: editModeEnabled,
+                        perms: permissions,
+                        data: itemSlotData,
+                        events: itemSlotEvents
+                    }"
+                />
+            </td>
+        </template>
+        <template v-else-if="canCustomItem && slots[`item-${i}`]">
             <td :key="'td' + i" :colspan="visibleColumns.length">
                 <slot
                     :name="`item-${i}`"

package/src/lib-components/LktTable.vue

@@ -6,11 +6,11 @@ import {computed, nextTick, onMounted, ref, useSlots, watch} from "vue";
 import {
     AccordionConfig,
     ButtonConfig,
-    ButtonType,
+    ButtonType, ClickEventArgs,
     Column, ColumnConfig,
     ensureButtonConfig,
     extractI18nValue,
-    getDefaultValues, ItemSlotComponentConfig,
+    getDefaultValues, HeaderConfig, ItemSlotComponentConfig,
     LktObject,
     LktSettings,
     PaginatorType,
@@ -70,6 +70,7 @@ const Page = ref(props.paginator?.modelValue),
     editModeEnabled = ref(props.editMode),
     updateTimeStamp = ref(0),
     sortableContainer = ref(<HTMLElement | null>null),
+    activeType = ref(props.type),
     currentSlide = ref(props.carousel?.currentSlide || 0)
 ;
 
@@ -310,7 +311,7 @@ const getItemByEvent = (e: any) => {
             if (typeof props.newValueGenerator === 'function') {
                 let newValue = props.newValueGenerator();
 
-                if (typeof newValue === 'object' || props.type !== TableType.Table) {
+                if (typeof newValue === 'object' || computedType.value !== TableType.Table) {
                     Items.value.push(newValue);
                     return;
                 }
@@ -431,7 +432,7 @@ const getItemByEvent = (e: any) => {
             || (hasModalCreatePerm.value && editModeEnabled.value);
     }),
     computedIsList = computed(() => {
-        return [TableType.Ol, TableType.Ul].includes(props.type);
+        return [TableType.Ol, TableType.Ul].includes(computedType.value);
     }),
     canDisplayItem = (item: LktObject, index: number) => {
         if (typeof props.itemDisplayChecker === 'function') return props.itemDisplayChecker(item, index);
@@ -541,13 +542,69 @@ const hasEmptySlot = computed(() => {
     displayLktHeader = computed(() => {
         return typeof props.header === 'object'
             && Object.keys(props.header).length > 0;
+    }),
+    computedType = computed(() => {
+        if (!Array.isArray(props.switchableTypes)) return props.type;
+        if (props.switchableTypes.length > 0) {
+            return activeType.value;
+        }
+        return props.type;
     });
 
+const availableTypes = computed(() => {
+        if (!Array.isArray(props.switchableTypes)) return [];
+        if (props.switchableTypes.length > 0) {
+            if (!props.switchableTypes.includes(props.type)) {
+                return [
+                    props.type,
+                    ...props.switchableTypes,
+                ]
+            }
+            return props.switchableTypes;
+        }
+        return [];
+    }),
+    computedSwitchTypesButtons = computed(() => {
+        let r: Array<ButtonConfig> = [];
+        availableTypes.value.forEach(type => {
+            r.push(<ButtonConfig>{
+                ...props.switchableTypesButtons[type],
+                events: {
+                    click: (args: ClickEventArgs) => {
+
+                        activeType.value = type;
+
+                        if (typeof props.switchableTypesButtons[type] === 'function') {
+                            props.switchableTypesButtons[type](args);
+                        }
+                    }
+                }
+            });
+        });
+        return r;
+    }),
+    computedHeaderConfig = computed(() => {
+        return <HeaderConfig>{
+            ...props.header,
+            topEndButtons: [
+                ...typeof props.header?.topEndButtons === 'undefined' ? [] : props.header?.topEndButtons,
+                ...computedSwitchTypesButtons.value,
+            ]
+        }
+    });
+
+const checkUseItemSlot = (item: LktObject, index: number) => {
+
+    if (typeof props.useItemSlot === 'function') return props.useItemSlot({item, index}) === true;
+
+    return props.useItemSlot;
+}
+
 </script>
 
 <template>
     <section ref="element" class="lkt-table-page" :id="'lkt-table-page-' + uniqueId">
-        <lkt-header v-if="displayLktHeader" v-bind="header"/>
+        <lkt-header v-if="displayLktHeader" v-bind="computedHeaderConfig"/>
         <header v-else-if="computedTitle || slots.title" :class="headerClass">
             <component :is="computedTitleTag" v-if="computedTitle">
                 <i v-if="titleIcon" :class="titleIcon"/>
@@ -713,7 +770,7 @@ const hasEmptySlot = computed(() => {
             </div>
 
             <div v-show="computedShowItems" class="lkt-table">
-                <table v-if="type === TableType.Table">
+                <table v-if="computedType === TableType.Table">
                     <thead v-if="!hideTableHeader">
                     <tr>
                         <th v-if="computedDragModeEnabled && editModeEnabled" data-role="drag-indicator"/>
@@ -759,12 +816,16 @@ const hasEmptySlot = computed(() => {
                         :disabled-drag="computedDisabledDrag"
                         :is-loading="isLoading"
                         :item-container-class="itemContainerClass"
+                        :item-slot-component="computedItemSlotComponent"
+                        :item-slot-data="computedItemSlotData"
+                        :item-slot-events="itemSlotEvents"
+                        :permissions="permissions"
                         @click="onClick"
                         @item-up="onItemUp"
                         @item-down="onItemDown"
                         @item-drop="onItemDrop"
                     >
-                        <template v-if="slots[`item-${i}`]" v-slot:[`item-${i}`]="row">
+                        <template v-if="slots[`item-${i}`] && checkUseItemSlot(row, i)" v-slot:[`item-${i}`]="row">
                             <slot
                                 :name="`item-${i}`"
                                 :[slotItemVar]="row.item"
@@ -778,7 +839,7 @@ const hasEmptySlot = computed(() => {
                                 v-bind:do-drop="row.doDrop"
                             />
                         </template>
-                        <template v-else-if="slots.item" #item="row">
+                        <template v-else-if="slots.item && checkUseItemSlot(row, i)" #item="row">
                             <slot
                                 name="item"
                                 :[slotItemVar]="row.item"
@@ -806,7 +867,7 @@ const hasEmptySlot = computed(() => {
                     </tbody>
                 </table>
 
-                <div v-else-if="type === TableType.Item"
+                <div v-else-if="computedType === TableType.Item"
                      ref="tableBody"
                      :id="'lkt-table-body-' + uniqueId"
                      class="lkt-table-items-container"
@@ -864,7 +925,7 @@ const hasEmptySlot = computed(() => {
                     </template>
                 </div>
 
-                <div v-else-if="type === TableType.Accordion"
+                <div v-else-if="computedType === TableType.Accordion"
                      ref="tableBody"
                      :id="'lkt-table-body-' + uniqueId"
                      class="lkt-table-items-container"
@@ -941,7 +1002,7 @@ const hasEmptySlot = computed(() => {
                     </template>
                 </div>
 
-                <component :is="type" v-else-if="computedIsList" class="lkt-table-items-container"
+                <component :is="computedType" v-else-if="computedIsList" class="lkt-table-items-container"
                            :class="itemsContainerClass">
                     <template
                         v-for="(item, i) in Items" :key="getRowKey(item, i)">
@@ -975,7 +1036,7 @@ const hasEmptySlot = computed(() => {
                     </template>
                 </component>
 
-                <div v-else-if="type === TableType.Carousel"
+                <div v-else-if="computedType === TableType.Carousel"
                      ref="tableBody"
                      :id="'lkt-table-body-' + uniqueId"
                      class="lkt-table-items-container"