lkt-table 2.0.3 → 2.0.5

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

@@ -1,24 +1,13 @@
-import { LktObject } from "lkt-vue-kernel";
+import { ButtonConfig } from "lkt-vue-kernel";
 type __VLS_Props = {
+    config?: ButtonConfig;
     disabled?: boolean;
-    text: string;
-    icon?: string;
-    confirm?: string;
-    link?: string;
-    resource?: string;
-    resourceData?: LktObject;
 };
 declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     click: (...args: any[]) => void;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     onClick?: ((...args: any[]) => any) | undefined;
 }>, {
-    link: string;
     disabled: boolean;
-    resource: string;
-    resourceData: LktObject;
-    text: string;
-    icon: string;
-    confirm: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 export default _default;

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

@@ -8,6 +8,7 @@ declare const slots: Readonly<{
 }>;
 type __VLS_Props = {
     modelValue: LktObject;
+    editButton: ButtonConfig;
     dropButton: ButtonConfig;
     isDraggable: boolean;
     sortable: boolean;
@@ -22,9 +23,6 @@ type __VLS_Props = {
     i: number;
     visibleColumns: Column[];
     emptyColumns: string[];
-    editText: string;
-    editIcon: string;
-    editLink: string;
     rowDisplayType: ValidTableRowTypeValue;
     renderDrag?: boolean | Function;
     disabledDrag?: boolean | Function;
@@ -32,28 +30,27 @@ type __VLS_Props = {
 declare const Item: import("vue").Ref<LktObject, LktObject>;
 declare const canCustomItem: boolean;
 declare const canItem: boolean;
-declare const parsedEditLink: import("vue").Ref<string, string>;
 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, onClickEdit: () => void;
 declare const canRenderDragIndicator: import("vue").ComputedRef<any>;
 declare const __VLS_ctx: InstanceType<__VLS_PickNotAny<typeof __VLS_self, new () => {}>>;
-declare var __VLS_26: `item-${number}`, __VLS_27: {
+declare var __VLS_24: `item-${number}`, __VLS_25: {
     item: LktObject;
     index: number;
-}, __VLS_29: {
+}, __VLS_27: {
     item: LktObject;
     index: number;
-}, __VLS_32: string, __VLS_33: {
+}, __VLS_30: string, __VLS_31: {
     value: any;
     item: LktObject;
     column: Column;
     i: number;
 };
 type __VLS_Slots = __VLS_PrettifyGlobal<__VLS_OmitStringIndex<typeof __VLS_ctx.$slots> & {
-    [K in NonNullable<typeof __VLS_26>]?: (props: typeof __VLS_27) => any;
+    [K in NonNullable<typeof __VLS_24>]?: (props: typeof __VLS_25) => any;
 } & {
-    [K in NonNullable<typeof __VLS_32>]?: (props: typeof __VLS_33) => any;
+    [K in NonNullable<typeof __VLS_30>]?: (props: typeof __VLS_31) => any;
 } & {
-    item?: (props: typeof __VLS_29) => any;
+    item?: (props: typeof __VLS_27) => any;
 }>;
 declare const __VLS_self: import("vue").DefineComponent<__VLS_Props, {
     canRenderColumn: typeof canRenderColumn;
@@ -68,7 +65,6 @@ declare const __VLS_self: import("vue").DefineComponent<__VLS_Props, {
     Item: typeof Item;
     canCustomItem: typeof canCustomItem;
     canItem: typeof canItem;
-    parsedEditLink: typeof parsedEditLink;
     onClick: typeof onClick;
     onShow: typeof onShow;
     classes: typeof classes;
@@ -107,9 +103,6 @@ declare const __VLS_self: import("vue").DefineComponent<__VLS_Props, {
     canEdit: boolean;
     visibleColumns: Column[];
     emptyColumns: string[];
-    editText: string;
-    editIcon: string;
-    editLink: string;
     rowDisplayType: ValidTableRowTypeValue;
     renderDrag: boolean | Function;
     disabledDrag: boolean | Function;
@@ -142,9 +135,6 @@ declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}
     canEdit: boolean;
     visibleColumns: Column[];
     emptyColumns: string[];
-    editText: string;
-    editIcon: string;
-    editLink: string;
     rowDisplayType: ValidTableRowTypeValue;
     renderDrag: boolean | Function;
     disabledDrag: boolean | Function;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lkt-table",
-  "version": "2.0.3",
+  "version": "2.0.5",
   "description": "",
   "keywords": [
     "lkt",
@@ -50,16 +50,16 @@
     "sortablejs": "^1.15.6"
   },
   "peerDependencies": {
-    "lkt-button": "^2.0",
-    "lkt-data-state": "^1.0.10",
+    "lkt-button": "^2.0.7",
+    "lkt-data-state": "^1.0.11",
     "lkt-date-tools": "^1.0.4",
     "lkt-field": "^0.0.34",
-    "lkt-http-client": "^1.0.19",
-    "lkt-i18n": "^1.0.4",
-    "lkt-loader": "^1.0.2",
-    "lkt-paginator": "^1.3.0",
-    "lkt-string-tools": "^1.0.3",
-    "lkt-vue-kernel": "^1.0.4",
+    "lkt-http-client": "^1.0.34",
+    "lkt-i18n": "^1.0.6",
+    "lkt-loader": "^1.2.0",
+    "lkt-paginator": "^1.3.3",
+    "lkt-string-tools": "^1.1.0",
+    "lkt-vue-kernel": "^1.0.35",
     "vue": "^3.3",
     "vue-router": "^4.2.5"
   }

package/src/components/EditButton.vue

@@ -1,26 +1,15 @@
 <script setup lang="ts">
 import {computed} from "vue";
 import {Settings} from "../settings/Settings";
-import {LktObject} from "lkt-vue-kernel";
+import {ButtonConfig} from "lkt-vue-kernel";
 
 const emit = defineEmits(['click']);
 
 const props = withDefaults(defineProps<{
+    config?: ButtonConfig
     disabled?: boolean
-    text: string
-    icon?: string
-    confirm?: string
-    link?: string
-    resource?: string
-    resourceData?: LktObject
 }>(), {
     disabled: false,
-    text: '',
-    icon: '',
-    link: '',
-    confirm: '',
-    resource: '',
-    resourceData: () => ({}),
 });
 
 const hasButtonSlot = computed(() => Settings.editButtonSlot !== ''),
@@ -30,13 +19,9 @@ const hasButtonSlot = computed(() => Settings.editButtonSlot !== ''),
 <template>
     <lkt-button
         palette="table-delete"
-        :icon="hasButtonSlot ? '' : icon"
-        :text="hasButtonSlot ? '' : text"
-        :on-click-to="link"
-        :is-anchor="link !== ''"
-        :resource="resource"
-        :resource-data="resourceData"
-        :confirm-modal="confirm"
+        v-bind="props.config"
+        :icon="hasButtonSlot ? '' : config?.icon"
+        :text="hasButtonSlot ? '' : config?.text"
         :disabled="disabled"
         @click.prevent.stop="emit('click')">
         <template v-if="hasButtonSlot">

package/src/components/LktTableCell.vue

@@ -25,9 +25,6 @@ const item = ref(props.modelValue),
     value = ref(item.value[props.column.key]),
     inputElement = ref(null);
 
-let calculatedColumnType = props.column.type;
-if ([ColumnType.Integer, ColumnType.Float].includes(calculatedColumnType)) calculatedColumnType = ColumnType.Number;
-
 watch(value, (v) => {
     const payload = JSON.parse(JSON.stringify(item.value));
     payload[props.column.key] = v;

package/src/components/LktTableRow.vue

@@ -19,6 +19,7 @@ const emit = defineEmits(['update:modelValue', 'click', 'show', 'item-up', 'item
 
 const props = withDefaults(defineProps<{
     modelValue: LktObject
+    editButton: ButtonConfig
     dropButton: ButtonConfig
     isDraggable: boolean
     sortable: boolean
@@ -33,9 +34,6 @@ const props = withDefaults(defineProps<{
     i: number
     visibleColumns: Column[]
     emptyColumns: string[]
-    editText: string
-    editIcon: string
-    editLink: string
     rowDisplayType: ValidTableRowTypeValue
     renderDrag?: boolean | Function
     disabledDrag?: boolean | Function
@@ -53,9 +51,6 @@ const props = withDefaults(defineProps<{
     i: 0,
     visibleColumns: () => [],
     emptyColumns: () => [],
-    editText: '',
-    editIcon: '',
-    editLink: '',
     rowDisplayType: TableRowType.Auto,
     renderDrag: true,
     disabledDrag: true,
@@ -69,7 +64,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.editLink);
+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),
@@ -205,10 +200,7 @@ const canRenderDragIndicator = computed(() => {
         </td>
         <td v-if="canEdit && editModeEnabled" class="lkt-table-col-edit">
             <edit-button
-                :resource-data="Item"
-                :text="editText"
-                :icon="editIcon"
-                :link="parsedEditLink"
+                :config="editButton"
                 @click="onClickEdit"/>
         </td>
     </tr>

package/src/components/TableHeader.vue

@@ -1,8 +1,7 @@
 <script setup lang="ts">
 import {getColumnClasses, getVerticalColSpan} from "../functions/table-functions";
-import {Column, LktObject} from "lkt-vue-kernel";
+import {Column, extractI18nValue, LktObject, LktSettings, SortDirection} from "lkt-vue-kernel";
 import {computed} from "vue";
-import {__} from "lkt-i18n";
 
 const emit = defineEmits(['click']);
 
@@ -33,10 +32,16 @@ const computedColSpan = computed(() => {
         return '';
     }),
     computedLabel = computed(() => {
-        if (props.column.label.startsWith('__:')) {
-            return __(props.column.label.substring(3));
+        return extractI18nValue(props.column.label);
+    }),
+    computedSortableIcon = computed(() => {
+        if (!computedSortable.value) return '';
+        if (props.sortBy === props.column.key) {
+            if (props.sortDirection === SortDirection.Asc) return LktSettings.defaultTableSortAscIcon;
+            if (props.sortDirection === SortDirection.Desc) return LktSettings.defaultTableSortDescIcon;
+            return '';
         }
-        return props.column.label;
+        return '';
     });
 
 const onClick = () => emit('click', props.column)
@@ -51,6 +56,6 @@ const onClick = () => emit('click', props.column)
         :class="getColumnClasses(column)"
         v-on:click="onClick"
     >
-        <div>{{ computedLabel }}</div>
+        <div>{{ computedLabel }} <i v-if="computedSortableIcon" :class="computedSortableIcon"/> </div>
     </th>
 </template>

package/src/lib-components/LktTable.vue

@@ -9,7 +9,8 @@ import {
     extractI18nValue,
     getDefaultValues,
     LktObject,
-    LktSettings, PaginatorType,
+    LktSettings,
+    PaginatorType,
     SortDirection,
     Table,
     TableConfig,
@@ -72,6 +73,7 @@ const Page = ref(props.paginator?.modelValue),
 
 const safeSaveButton = ref(ensureButtonConfig(props.saveButton, LktSettings.defaultSaveButton));
 const safeCreateButton = ref(ensureButtonConfig(props.createButton, LktSettings.defaultCreateButton));
+const safeEditModeButton = ref(ensureButtonConfig(props.editModeButton, LktSettings.defaultEditModeButton));
 
 const dataStateChanged = ref(false);
 
@@ -195,9 +197,6 @@ const emptyColumns = computed(() => {
     computedTitle = computed(() => {
         return extractI18nValue(props.title);
     }),
-    computedEditModeText = computed(() => {
-        return extractI18nValue(props.editModeText);
-    }),
     computedDragModeEnabled = computed(() => {
         return props.drag?.enabled;
     }),
@@ -264,6 +263,7 @@ const getItemByEvent = (e: any) => {
             });
             SortingDirection.value = SortingDirection.value === SortDirection.Asc ? SortDirection.Desc : SortDirection.Asc;
             SortBy.value = column.key;
+            updateTimeStamp.value = time();
             emit('sort', [SortBy.value, SortingDirection.value]);
         }
     },
@@ -544,10 +544,9 @@ const hasEmptySlot = computed(() => {
 
                 <div class="switch-edition-mode">
                     <lkt-field
-                        type="switch"
+                        v-bind="safeEditModeButton"
                         v-show="showSwitchButton"
-                        v-model="editModeEnabled"
-                        :label="computedEditModeText"/>
+                        v-model="editModeEnabled"/>
                 </div>
             </div>
 
@@ -576,7 +575,7 @@ const hasEmptySlot = computed(() => {
                                 :sort-direction="SortingDirection"
                                 :amount-of-columns="columns.length"
                                 :items="Items"
-                                v-on:click="sort(column)"
+                                @click="sort(column)"
                             />
                         </template>
                         <th
@@ -599,6 +598,8 @@ const hasEmptySlot = computed(() => {
                         v-show="canDisplayItem(Items[i], i)"
                         :key="getRowKey(item, i)"
                         :i="i"
+                        :drop-button="dropButton"
+                        :edit-button="editButton"
                         :display-hidden-columns-indicator="displayHiddenColumnsIndicator"
                         :is-draggable="isDraggable(item)"
                         :sortable="computedDragModeEnabled"
@@ -609,9 +610,6 @@ const hasEmptySlot = computed(() => {
                         :latest-row="i+1 === amountOfItems"
                         :can-drop="hasDropPerm && editModeEnabled"
                         :can-edit="hasEditPerm && hasUpdatePerm && editModeEnabled"
-                        :edit-text="editText"
-                        :edit-icon="editIcon"
-                        :edit-link="editLink"
                         :edit-mode-enabled="editModeEnabled"
                         :has-inline-edit-perm="hasInlineEditPerm"
                         :row-display-type="rowDisplayType"