lkt-table 2.0.28 → 2.0.29

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

@@ -1,12 +1,8 @@
-import { ButtonConfig, Column, LktObject, ValidTableRowTypeValue } from "lkt-vue-kernel";
+import { Column, LktObject, ValidTableRowTypeValue } from "lkt-vue-kernel";
 type __VLS_Props = {
     modelValue: LktObject;
-    editButton: ButtonConfig;
-    dropButton: ButtonConfig;
     isDraggable: boolean;
     sortable: boolean;
-    displayHiddenColumnsIndicator: boolean;
-    hiddenIsVisible: boolean;
     isLoading: boolean;
     addNavigation: boolean;
     latestRow: boolean;
@@ -60,14 +56,12 @@ type __VLS_Slots = {} & {
 declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, 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;
@@ -77,8 +71,6 @@ declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}
     editModeEnabled: boolean;
     isDraggable: boolean;
     sortable: boolean;
-    displayHiddenColumnsIndicator: boolean;
-    hiddenIsVisible: boolean;
     addNavigation: boolean;
     latestRow: boolean;
     canDrop: boolean;

package/dist/index.d.ts

@@ -5,7 +5,5 @@ import "./../lkt-table.css";
 declare const LktTable: Plugin;
 export default LktTable;
 export declare const setTableNavButtonSlot: (component: string | Component) => boolean;
-export declare const setTableDropButtonSlot: (component: string | Component) => boolean;
 export declare const setTableCreateButtonSlot: (component: string | Component) => boolean;
 export declare const setTableEmptySlot: (component?: string | Component) => void;
-export declare const setTableSaveIcon: (icon: string) => void;

package/dist/settings/Settings.d.ts

@@ -1,10 +1,6 @@
 import { Component } from "vue";
 export declare class Settings {
     static navButtonSlot: string | Component;
-    static dropButtonSlot: string | Component;
-    static editButtonSlot: string | Component;
     static createButtonSlot: string | Component;
     static defaultEmptySlot: string | Component | undefined;
-    static defaultSaveIcon: string;
-    static defaultNoResultsMessage: string;
 }

package/package.json

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

package/src/components/CreateButton.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import {computed} from "vue";
 import {Settings} from "../settings/Settings";
-import {ButtonConfig, LktObject} from "lkt-vue-kernel";
+import {ButtonConfig, LktObject, ModalConfig} from "lkt-vue-kernel";
 
 const emit = defineEmits([
     'click',
@@ -19,7 +19,7 @@ const props = withDefaults(defineProps<{
 const hasCreateButtonSlot = computed(() => Settings.createButtonSlot !== ''),
     createButtonSlot = computed(() => Settings.createButtonSlot);
 
-const calculatedModalData = {
+const calculatedModalData = <ModalConfig>{
     ...props.config?.modalData,
     beforeClose: (data: LktObject) => {
         // Checks lkt-item-crud as modal flow

package/src/components/LktTableRow.vue

@@ -9,16 +9,12 @@ import {
 import LktTableCell from "./LktTableCell.vue";
 import {computed, ref, useSlots, watch} from "vue";
 import {Settings} from "../settings/Settings";
-import DropButtonComponent from "./DropButtonComponent.vue";
-import EditButtonComponent from "./EditButtonComponent.vue";
-import {replaceAll} from "lkt-string-tools";
-import {ButtonConfig, Column, LktObject, TableRowType, ValidTableRowTypeValue} from "lkt-vue-kernel";
+import {Column, LktObject, TableRowType, ValidTableRowTypeValue} from "lkt-vue-kernel";
 
 const slots = useSlots();
 const emit = defineEmits([
     'update:modelValue',
     'click',
-    'show',
     'item-up',
     'item-down',
     'item-drop'
@@ -26,12 +22,8 @@ const emit = defineEmits([
 
 const props = withDefaults(defineProps<{
     modelValue: LktObject
-    editButton: ButtonConfig
-    dropButton: ButtonConfig
     isDraggable: boolean
     sortable: boolean
-    displayHiddenColumnsIndicator: boolean
-    hiddenIsVisible: boolean
     isLoading: boolean
     addNavigation: boolean
     latestRow: boolean
@@ -52,8 +44,6 @@ const props = withDefaults(defineProps<{
     modelValue: () => ({}),
     isDraggable: true,
     sortable: true,
-    displayHiddenColumnsIndicator: false,
-    hiddenIsVisible: false,
     addNavigation: false,
     latestRow: false,
     canDrop: false,
@@ -76,13 +66,7 @@ if (!calculatedRowDisplayType) calculatedRowDisplayType = TableRowType.Auto;
 const canCustomItem = [TableRowType.Auto, TableRowType.PreferCustomItem].includes(calculatedRowDisplayType);
 const canItem = [TableRowType.Auto, TableRowType.PreferItem].includes(calculatedRowDisplayType);
 
-const parsedEditLink = ref(props.editButton.anchor?.to);
-for (let k in Item.value) parsedEditLink.value = replaceAll(parsedEditLink.value, ':' + k, Item.value[k]);
-
 const onClick = ($event: any) => emit('click', $event),
-    onShow = ($event: any, i: any) => {
-        emit('show', $event, i)
-    },
     classes = computed(() => {
         let r: string[] = [];
 
@@ -172,9 +156,6 @@ const canRenderDragIndicator = computed(() => {
                 </lkt-button>
             </div>
         </td>
-        <td v-if="displayHiddenColumnsIndicator"
-            @click="onShow($event, i)" data-role="show-more"
-            :class="hiddenIsVisible ? 'state-open' : ''"/>
         <template v-if="canCustomItem && slots[`item-${i}`]">
             <td :key="'td' + i" :colspan="visibleColumns.length">
                 <slot
@@ -236,16 +217,5 @@ const canRenderDragIndicator = computed(() => {
                 </template>
             </td>
         </template>
-        <td v-if="canDrop && editModeEnabled" class="lkt-table-col-drop">
-            <drop-button-component
-                :config="dropButton"
-                :item="Item"
-                @click="onClickDrop"/>
-        </td>
-        <td v-if="canEdit && editModeEnabled" class="lkt-table-col-edit">
-            <edit-button-component
-                :config="editButton"
-                :item="Item"/>
-        </td>
     </tr>
 </template>

package/src/lib-components/LktTable.vue

@@ -20,7 +20,6 @@ import {
     TablePermission,
     TableType
 } from "lkt-vue-kernel";
-import LktHiddenRow from "../components/LktHiddenRow.vue";
 import {generateRandomString, replaceAll} from "lkt-string-tools";
 import {DataState} from "lkt-data-state";
 import {HTTPResponse} from "lkt-http-client";
@@ -52,13 +51,10 @@ const slots = useSlots();
 //@ts-nocheck
 const props = withDefaults(defineProps<TableConfig>(), getDefaultValues(Table));
 
-const hiddenColumnsStack: LktObject = {};
-
 const Sorter = ref(typeof props.sorter === 'function' ? props.sorter : defaultTableSorter),
     SortBy = ref(getDefaultSortColumn(props.columns)),
     SortingDirection = ref(SortDirection.Asc),
     Items = ref(props.modelValue),
-    Hidden = ref(hiddenColumnsStack),
     tableBody = ref(<HTMLElement | null>null),
     Columns = ref(props.columns);
 
@@ -80,13 +76,11 @@ const Page = ref(props.paginator?.modelValue),
 const safeSaveButton = ref(ensureButtonConfig(props.saveButton, LktSettings.defaultSaveButton)),
     safeCreateButton = ref(ensureButtonConfig(props.createButton, LktSettings.defaultCreateButton)),
     safeEditModeButton = ref(ensureButtonConfig(props.editModeButton, LktSettings.defaultEditModeButton)),
-    safeDropModeButton = ref(ensureButtonConfig(props.dropButton, LktSettings.defaultDropButton)),
     safeGroupButton = ref(ensureButtonConfig(props.groupButton, LktSettings.defaultGroupButton));
 
 watch(() => props.saveButton, (v) => safeSaveButton.value = ensureButtonConfig(props.saveButton, LktSettings.defaultSaveButton));
 watch(() => props.createButton, (v) => safeCreateButton.value = ensureButtonConfig(props.createButton, LktSettings.defaultCreateButton));
 watch(() => props.editModeButton, (v) => safeEditModeButton.value = ensureButtonConfig(props.editModeButton, LktSettings.defaultEditModeButton));
-watch(() => props.dropButton, (v) => safeDropModeButton.value = ensureButtonConfig(props.dropButton, LktSettings.defaultDropButton));
 
 const dataStateChanged = ref(false);
 
@@ -145,21 +139,9 @@ const emptyColumns = computed(() => {
     visibleColumns = computed(() => {
         return Columns.value.filter((c: Column) => !c.hidden);
     }),
-    hiddenColumns = computed(() => {
-        return [];
-        return Columns.value.filter((c: Column) => c.hidden);
-    }),
-    hiddenColumnsColSpan = computed(() => {
-        let r = visibleColumns.value.length + 1;
-        if (props.sortable) ++r;
-        return r;
-    }),
     rowKeyColumns = computed(() => {
         return Columns.value.filter((c: Column) => c.isForRowKey);
     }),
-    displayHiddenColumnsIndicator = computed(() => {
-        return hiddenColumns.value.length > 0 && !props.sortable;
-    }),
     columnKeys = computed((): string[] => {
         return Columns.value.map(c => c.key);
 
@@ -278,9 +260,6 @@ const getItemByEvent = (e: any) => {
     getRowByIndex = (index: number) => {
         return tableBody.value?.querySelector(`[data-i="${index}"]`);
     },
-    isVisible = (index: number) => {
-        return Hidden.value['tr_' + index] === true;
-    },
     sort = (column: Column | null) => {
         if (!column) return;
         if (column.sortable) {
@@ -296,10 +275,6 @@ const getItemByEvent = (e: any) => {
     onClick = ($event: any) => {
         emit('click', $event);
     },
-    show = ($event: any, i: number) => {
-        let k = 'tr_' + i;
-        Hidden.value[k] = typeof Hidden.value[k] === 'undefined' ? true : !Hidden.value[k];
-    },
     validDragChecker = (evt: any) => {
         let targetIndex = parseInt(evt?.originalEvent?.toElement?.closest('tr')?.dataset?.i);
         if (typeof props.drag?.isValid === 'function' && !props.drag?.isValid(Items.value[targetIndex])) return false;
@@ -713,7 +688,6 @@ const hasEmptySlot = computed(() => {
                     <tr>
                         <th v-if="computedDragModeEnabled && editModeEnabled" data-role="drag-indicator"/>
                         <th v-if="addNavigation && editModeEnabled"/>
-                        <th v-if="displayHiddenColumnsIndicator"/>
                         <template v-for="column in visibleColumns">
                             <table-header
                                 v-if="emptyColumns.indexOf(column.key) === -1"
@@ -725,14 +699,6 @@ const hasEmptySlot = computed(() => {
                                 @click="sort(column)"
                             />
                         </template>
-                        <th
-                            v-if="hasDropPerm && editModeEnabled"
-                            class="lkt-table-col-drop"
-                        />
-                        <th
-                            v-if="hasEditPerm && hasUpdatePerm && editModeEnabled"
-                            class="lkt-table-col-edit"
-                        />
                     </tr>
                     </thead>
                     <tbody
@@ -746,15 +712,11 @@ const hasEmptySlot = computed(() => {
                         v-show="canDisplayItem(Items[i], i)"
                         :key="getRowKey(item, i)"
                         :i="i"
-                        :drop-button="safeDropModeButton"
-                        :edit-button="editButton"
-                        :display-hidden-columns-indicator="displayHiddenColumnsIndicator"
                         :is-draggable="isDraggable(item)"
                         :sortable="computedDragModeEnabled"
                         :visible-columns="visibleColumns"
                         :empty-columns="emptyColumns"
                         :add-navigation="addNavigation"
-                        :hidden-is-visible="isVisible(i)"
                         :latest-row="i+1 === amountOfItems"
                         :can-drop="hasDropPerm && editModeEnabled"
                         :can-edit="hasEditPerm && hasUpdatePerm && editModeEnabled"
@@ -768,7 +730,6 @@ const hasEmptySlot = computed(() => {
                         :is-loading="isLoading"
                         :item-container-class="itemContainerClass"
                         @click="onClick"
-                        @show="show"
                         @item-up="onItemUp"
                         @item-down="onItemDown"
                         @item-drop="onItemDrop"
@@ -812,35 +773,6 @@ const hasEmptySlot = computed(() => {
                             />
                         </template>
                     </lkt-table-row>
-                    <lkt-hidden-row
-                        v-if="hiddenColumns.length > 0"
-                        v-model="Items[i]"
-                        v-for="(item, i) in Items"
-                        :key="getRowKey(item, i, true)"
-                        :i="i"
-                        :hidden-columns="hiddenColumns"
-                        :hidden-columns-col-span="hiddenColumnsColSpan"
-                        :is-draggable="isDraggable(item)"
-                        :sortable="computedDragModeEnabled"
-                        :visible-columns="visibleColumns"
-                        :empty-columns="emptyColumns"
-                        :hidden-is-visible="isVisible(i)"
-                        :edit-mode-enabled="editModeEnabled"
-                        :has-inline-edit-perm="hasInlineEditPerm"
-                        @click="onClick"
-                        @show="show"
-                    >
-                        <template
-                            v-for="column in colSlots"
-                            v-slot:[column]="row">
-                            <slot
-                                :name="column"
-                                :[slotItemVar]="row.item"
-                                :value="row.value"
-                                :column="row.column"
-                            />
-                        </template>
-                    </lkt-hidden-row>
                     </tbody>
                 </table>
 

package/src/components/DropButtonComponent.vue

@@ -1,37 +0,0 @@
-<script setup lang="ts">
-import {computed} from "vue";
-import {Settings} from "../settings/Settings";
-import {ButtonConfig, LktObject, prepareResourceData} from "lkt-vue-kernel";
-
-const emit = defineEmits([
-    'click'
-]);
-
-const props = withDefaults(defineProps<{
-    config: ButtonConfig
-    item: LktObject
-    disabled?: boolean
-}>(), {
-    disabled: false,
-});
-
-const hasButtonSlot = computed(() => Settings.dropButtonSlot !== ''),
-    buttonSlot = computed(() => Settings.dropButtonSlot);
-
-const computedResourceData = computed(() => {
-    return prepareResourceData(props.config.resourceData, props.item);
-})
-</script>
-
-<template>
-    <lkt-button
-        palette="table-delete"
-        v-bind="props.config"
-        :disabled="disabled"
-        :resource-data="computedResourceData"
-        @click.prevent.stop="emit('click', $event)">
-        <template v-if="hasButtonSlot">
-            <component :is="buttonSlot"/>
-        </template>
-    </lkt-button>
-</template>

package/src/components/EditButtonComponent.vue

@@ -1,37 +0,0 @@
-<script setup lang="ts">
-import {computed} from "vue";
-import {Settings} from "../settings/Settings";
-import {ButtonConfig, LktObject, prepareResourceData} from "lkt-vue-kernel";
-
-const emit = defineEmits([
-    'click'
-]);
-
-const props = withDefaults(defineProps<{
-    config: ButtonConfig
-    item: LktObject
-    disabled?: boolean
-}>(), {
-    disabled: false,
-});
-
-const hasButtonSlot = computed(() => Settings.editButtonSlot !== ''),
-    buttonSlot = computed(() => Settings.editButtonSlot);
-
-const computedResourceData = computed(() => {
-    return prepareResourceData(props.config.resourceData, props.item);
-})
-</script>
-
-<template>
-    <lkt-button
-        palette="table-edit"
-        v-bind="props.config"
-        :disabled="disabled"
-        :resource-data="computedResourceData"
-        @click.prevent.stop="emit('click')">
-        <template v-if="hasButtonSlot">
-            <component :is="buttonSlot"/>
-        </template>
-    </lkt-button>
-</template>

package/src/components/LktHiddenRow.vue

@@ -1,82 +0,0 @@
-<script lang="ts" setup>
-import {getColumnDisplayContent} from "../functions/table-functions";
-import LktTableCell from "./LktTableCell.vue";
-import {ref, watch} from "vue";
-import {LktObject, Column} from "lkt-vue-kernel";
-
-const emit = defineEmits([
-    'update:modelValue',
-    'click'
-]);
-
-const props = withDefaults(defineProps<{
-    modelValue: LktObject
-    isDraggable: boolean
-    sortable: boolean
-    hiddenIsVisible: boolean
-    i: number
-    hiddenColumnsColSpan: number
-    visibleColumns: Column[]
-    hiddenColumns: Column[]
-    emptyColumns: string[]
-    editModeEnabled: boolean
-    hasInlineEditPerm: boolean
-}>(), {
-    modelValue: () => ({}),
-    isDraggable: true,
-    sortable: true,
-    hiddenIsVisible: false,
-    i: 0,
-    hiddenColumnsColSpan: 0,
-    visibleColumns: () => [],
-    hiddenColumns: () => [],
-    emptyColumns: () => [],
-    editModeEnabled: false,
-    hasInlineEditPerm: false,
-});
-
-const item = ref(props.modelValue);
-
-const onClick = ($event: any) => emit('click', $event);
-
-watch(() => props.modelValue, (v) => item.value = v);
-watch(item, () => emit('update:modelValue', item.value));
-</script>
-
-<template>
-    <tr v-show="hiddenIsVisible" data-role="hidden-row">
-        <td :colspan="hiddenColumnsColSpan">
-            <table>
-                <tr>
-                    <th v-for="column in hiddenColumns" :data-column="column.key">
-                        <div>{{ column.label }}</div>
-                    </th>
-                </tr>
-                <tr :data-i="i">
-                    <td v-for="(column, i) in hiddenColumns"
-                        v-bind:data-column="column.key"
-                        v-bind:title="getColumnDisplayContent (column, item, i, hiddenColumns)"
-                        v-on:click="onClick($event)">
-                        <template v-if="!!$slots[column.key]">
-                            <slot v-bind:name="column.key"
-                                  v-bind:value="item[column.key]"
-                                  v-bind:item="item"
-                                  v-bind:column="column"
-                                  v-bind:i="i"/>
-                        </template>
-                        <template v-else>
-                            <lkt-table-cell
-                                :column="column"
-                                :columns="hiddenColumns"
-                                v-model="item"
-                                :i="i"
-                                :edit-mode-enabled="editModeEnabled"
-                                :has-inline-edit-perm="hasInlineEditPerm"
-                            />
-                        </template>
-                    </td>
-                </tr>
-            </table>
-        </td>
-    </tr>
-</template>