lkt-table 2.0.23 → 2.0.25

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

@@ -1,5 +1,3 @@
-import { getColumnDisplayContent } from "../functions/table-functions";
-import LktTableCell from "./LktTableCell.vue";
 import { LktObject, Column } from "lkt-vue-kernel";
 type __VLS_Props = {
     modelValue: LktObject;
@@ -14,42 +12,15 @@ type __VLS_Props = {
     editModeEnabled: boolean;
     hasInlineEditPerm: boolean;
 };
-declare const item: import("vue").Ref<LktObject, LktObject>;
-declare const onClick: ($event: any) => void;
-declare const __VLS_ctx: InstanceType<__VLS_PickNotAny<typeof __VLS_self, new () => {}>>;
 declare var __VLS_2: string, __VLS_3: {
     value: any;
     item: LktObject;
     column: Column;
     i: number;
 };
-type __VLS_Slots = __VLS_PrettifyGlobal<__VLS_OmitStringIndex<typeof __VLS_ctx.$slots> & {
+type __VLS_Slots = {} & {
     [K in NonNullable<typeof __VLS_2>]?: (props: typeof __VLS_3) => any;
-}>;
-declare const __VLS_self: import("vue").DefineComponent<__VLS_Props, {
-    getColumnDisplayContent: typeof getColumnDisplayContent;
-    LktTableCell: typeof LktTableCell;
-    item: typeof item;
-    onClick: typeof onClick;
-}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    "update:modelValue": (...args: any[]) => void;
-    click: (...args: any[]) => void;
-}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
-    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
-    onClick?: ((...args: any[]) => any) | undefined;
-}>, {
-    modelValue: LktObject;
-    i: number;
-    editModeEnabled: boolean;
-    hasInlineEditPerm: boolean;
-    isDraggable: boolean;
-    sortable: boolean;
-    hiddenIsVisible: boolean;
-    visibleColumns: Column[];
-    emptyColumns: string[];
-    hiddenColumnsColSpan: number;
-    hiddenColumns: Column[];
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+};
 declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (...args: any[]) => void;
     click: (...args: any[]) => void;

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

@@ -1,11 +1,4 @@
-import { canRenderColumn, colPreferSlot, getColumnClasses, getColumnDisplayContent, getHorizontalColSpan } from "../functions/table-functions";
-import LktTableCell from "./LktTableCell.vue";
-import DropButtonComponent from "./DropButtonComponent.vue";
-import EditButtonComponent from "./EditButtonComponent.vue";
 import { ButtonConfig, Column, LktObject, ValidTableRowTypeValue } from "lkt-vue-kernel";
-declare const slots: Readonly<{
-    [name: string]: import("vue").Slot<any> | undefined;
-}>;
 type __VLS_Props = {
     modelValue: LktObject;
     editButton: ButtonConfig;
@@ -31,12 +24,6 @@ type __VLS_Props = {
     disabledDrag?: boolean | Function;
     itemContainerClass?: string | Function;
 };
-declare const Item: import("vue").Ref<LktObject, LktObject>;
-declare const canCustomItem: boolean;
-declare const canItem: boolean;
-declare const onClick: ($event: any) => void, onShow: ($event: any, i: any) => void, classes: import("vue").ComputedRef<string>, hasNavButtonSlot: import("vue").ComputedRef<boolean>, navButtonSlot: import("vue").ComputedRef<string | import("vue").Component>, onClickUp: () => void, onClickDown: () => void, onClickDrop: () => void;
-declare const canRenderDragIndicator: import("vue").ComputedRef<any>, computedDragIndicatorRole: import("vue").ComputedRef<"drag-indicator" | "invalid-drag-indicator">, computedContainerClasses: import("vue").ComputedRef<string>;
-declare const __VLS_ctx: InstanceType<__VLS_PickNotAny<typeof __VLS_self, new () => {}>>;
 declare var __VLS_26: `item-${number}`, __VLS_27: {
     item: LktObject;
     index: number;
@@ -63,70 +50,13 @@ declare var __VLS_26: `item-${number}`, __VLS_27: {
     column: Column;
     i: number;
 };
-type __VLS_Slots = __VLS_PrettifyGlobal<__VLS_OmitStringIndex<typeof __VLS_ctx.$slots> & {
+type __VLS_Slots = {} & {
     [K in NonNullable<typeof __VLS_26>]?: (props: typeof __VLS_27) => any;
 } & {
     [K in NonNullable<typeof __VLS_32>]?: (props: typeof __VLS_33) => any;
 } & {
     item?: (props: typeof __VLS_29) => any;
-}>;
-declare const __VLS_self: import("vue").DefineComponent<__VLS_Props, {
-    canRenderColumn: typeof canRenderColumn;
-    colPreferSlot: typeof colPreferSlot;
-    getColumnClasses: typeof getColumnClasses;
-    getColumnDisplayContent: typeof getColumnDisplayContent;
-    getHorizontalColSpan: typeof getHorizontalColSpan;
-    LktTableCell: typeof LktTableCell;
-    DropButtonComponent: typeof DropButtonComponent;
-    EditButtonComponent: typeof EditButtonComponent;
-    slots: typeof slots;
-    Item: typeof Item;
-    canCustomItem: typeof canCustomItem;
-    canItem: typeof canItem;
-    onClick: typeof onClick;
-    onShow: typeof onShow;
-    classes: typeof classes;
-    hasNavButtonSlot: typeof hasNavButtonSlot;
-    navButtonSlot: typeof navButtonSlot;
-    onClickUp: typeof onClickUp;
-    onClickDown: typeof onClickDown;
-    onClickDrop: typeof onClickDrop;
-    canRenderDragIndicator: typeof canRenderDragIndicator;
-    computedDragIndicatorRole: typeof computedDragIndicatorRole;
-    computedContainerClasses: typeof computedContainerClasses;
-}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    "update:modelValue": (...args: any[]) => void;
-    click: (...args: any[]) => void;
-    show: (...args: any[]) => void;
-    "item-up": (...args: any[]) => void;
-    "item-down": (...args: any[]) => void;
-    "item-drop": (...args: any[]) => void;
-}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
-    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
-    onClick?: ((...args: any[]) => any) | undefined;
-    onShow?: ((...args: any[]) => any) | undefined;
-    "onItem-up"?: ((...args: any[]) => any) | undefined;
-    "onItem-down"?: ((...args: any[]) => any) | undefined;
-    "onItem-drop"?: ((...args: any[]) => any) | undefined;
-}>, {
-    modelValue: LktObject;
-    i: number;
-    editModeEnabled: boolean;
-    isDraggable: boolean;
-    sortable: boolean;
-    displayHiddenColumnsIndicator: boolean;
-    hiddenIsVisible: boolean;
-    addNavigation: boolean;
-    latestRow: boolean;
-    canDrop: boolean;
-    canEdit: boolean;
-    visibleColumns: Column[];
-    emptyColumns: string[];
-    rowDisplayType: ValidTableRowTypeValue;
-    renderDrag: boolean | Function;
-    disabledDrag: boolean | Function;
-    itemContainerClass: string | Function;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+};
 declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (...args: any[]) => void;
     click: (...args: any[]) => void;

package/package.json

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

package/src/components/LktTableCell.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import {getColumnDisplayContent} from "../functions/table-functions";
 import {computed, ref, watch} from "vue";
-import {Column, ColumnType, extractPropValue, LktObject} from "lkt-vue-kernel";
+import {Column, ColumnType, extractPropValue, FieldType, LktObject} from "lkt-vue-kernel";
 
 const emit = defineEmits([
     'update:modelValue'
@@ -63,6 +63,20 @@ const computedFieldConfig = computed(() => {
     }
     return props.column.field;
 })
+
+const computedFieldLabel = computed(() => {
+    if (props.column.type === ColumnType.Field) {
+        if (!props.column?.field?.label && [
+            FieldType.Switch,
+            FieldType.Check,
+        ].includes(props.column.field?.type)) {
+            return props.column.label;
+        }
+
+        return props.column.field?.label;
+    }
+    return '';
+})
 </script>
 
 <template>
@@ -83,7 +97,7 @@ const computedFieldConfig = computed(() => {
             :read-mode="!column.editable || !editModeEnabled"
             :ref="(el:any) => inputElement = el"
             :slot-data="slotData"
-            :label="column.field?.type === 'switch' || column.field?.type === 'check' ? column.label : ''"
+            :label="computedFieldLabel"
             :modal-data="computedModalData"
             :prop="item"
             v-model="value"/>
@@ -94,7 +108,7 @@ const computedFieldConfig = computed(() => {
             read-mode
             :ref="(el:any) => inputElement = el"
             :slot-data="slotData"
-            :label="column.field?.type === 'switch' || column.field?.type === 'check' ? column.label : ''"
+            :label="computedFieldLabel"
             :modal-data="computedModalData"
             :prop="item"
             :model-value="value"/>

package/src/lib-components/LktTable.vue

@@ -4,6 +4,7 @@ import {defaultTableSorter, getColumnByKey, getDefaultSortColumn} from "../funct
 import LktTableRow from "../components/LktTableRow.vue";
 import {computed, nextTick, onMounted, ref, useSlots, watch} from "vue";
 import {
+    AccordionConfig,
     ButtonConfig,
     ButtonType,
     Column,
@@ -28,6 +29,7 @@ import Sortable from 'sortablejs';
 import TableHeader from "../components/TableHeader.vue";
 import {time} from "lkt-date-tools";
 import {Settings} from "../settings/Settings";
+import LktTableCell from "../components/LktTableCell.vue";
 
 const emit = defineEmits([
     'update:modelValue',
@@ -144,6 +146,7 @@ const emptyColumns = computed(() => {
         return Columns.value.filter((c: Column) => !c.hidden);
     }),
     hiddenColumns = computed(() => {
+        return [];
         return Columns.value.filter((c: Column) => c.hidden);
     }),
     hiddenColumnsColSpan = computed(() => {
@@ -242,6 +245,10 @@ const emptyColumns = computed(() => {
         }
 
         return !isLoading.value && Items.value.length > 0;
+    }),
+
+    computedAccordionHeaderColumn = computed(() => {
+        return Columns.value.find(c => c.isForAccordionHeader);
     })
 ;
 
@@ -442,6 +449,11 @@ const getItemByEvent = (e: any) => {
     getItemContainerClass = (item: LktObject, index: number) => {
         if (typeof props.itemContainerClass === 'function') return props.itemContainerClass(item, index);
         return props.itemContainerClass;
+    },
+    getAccordionHeaderText = (item: LktObject, index: number) => {
+        if (!computedAccordionHeaderColumn.value) return '';
+
+        return item[computedAccordionHeaderColumn.value.key];
     };
 
 onMounted(() => {
@@ -840,9 +852,9 @@ const hasEmptySlot = computed(() => {
                     <template
                         v-for="(item, i) in Items">
                         <div
+                            v-if="canDisplayItem(item, i)"
                             class="lkt-table-item"
                             :class="getItemContainerClass(item, i)"
-                            v-if="canDisplayItem(item, i)"
                             :data-i="i"
                             :key="getRowKey(item, i)">
                             <slot name="item"
@@ -860,6 +872,50 @@ const hasEmptySlot = computed(() => {
                     </template>
                 </div>
 
+                <div v-else-if="type === TableType.Accordion"
+                     ref="tableBody"
+                     :id="'lkt-table-body-' + uniqueId"
+                     class="lkt-table-items-container"
+                     :class="itemsContainerClass">
+                    <template
+                        v-for="(item, i) in Items">
+                        <lkt-accordion
+                            v-if="canDisplayItem(item, i)"
+                            class="lkt-table-item"
+                            :class="getItemContainerClass(item, i)"
+                            :data-i="i"
+                            :key="getRowKey(item, i)"
+                            v-bind="<AccordionConfig>{
+                                ...accordion,
+                                title: getAccordionHeaderText(item, i),
+                            }"
+                        >
+                            <template #header>
+                                <lkt-table-cell
+                                    v-model="Items[i]"
+                                    :i="i"
+                                    :column="computedAccordionHeaderColumn"
+                                    :columns="visibleColumns"
+                                    :edit-mode-enabled="editModeEnabled"
+                                    :has-inline-edit-perm="hasInlineEditPerm"
+                                />
+                            </template>
+
+                            <template v-for="column in visibleColumns">
+                                <lkt-table-cell
+                                    v-if="column.key !== computedAccordionHeaderColumn?.key"
+                                    v-model="Items[i]"
+                                    :i="i"
+                                    :column="column"
+                                    :columns="visibleColumns"
+                                    :edit-mode-enabled="editModeEnabled"
+                                    :has-inline-edit-perm="hasInlineEditPerm"
+                                />
+                            </template>
+                        </lkt-accordion>
+                    </template>
+                </div>
+
                 <component :is="type" v-else-if="computedIsList" class="lkt-table-items-container"
                            :class="itemsContainerClass">
                     <template