lkt-table 2.0.0 → 2.0.3

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

@@ -1,11 +1,7 @@
-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;
-    resource: string;
-    resourceData: LktObject;
 };
 declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     click: (...args: any[]) => void;
@@ -13,10 +9,5 @@ declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {
     onClick?: ((...args: any[]) => any) | undefined;
 }>, {
     disabled: boolean;
-    resource: string;
-    resourceData: LktObject;
-    text: string;
-    icon: string;
-    confirm: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 export default _default;

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

@@ -1,3 +1,5 @@
+import { getColumnDisplayContent } from "../functions/table-functions";
+import LktTableCell from "./LktTableCell.vue";
 import { LktObject, Column } from "lkt-vue-kernel";
 type __VLS_Props = {
     modelValue: LktObject;
@@ -12,40 +14,64 @@ type __VLS_Props = {
     editModeEnabled: boolean;
     hasInlineEditPerm: boolean;
 };
-declare function __VLS_template(): {
-    attrs: Partial<{}>;
-    slots: Partial<Record<string, (_: {
-        value: any;
-        item: LktObject;
-        column: Column;
-        i: number;
-    }) => any>>;
-    refs: {};
-    rootEl: HTMLTableRowElement;
+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_TemplateResult = ReturnType<typeof __VLS_template>;
-declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+type __VLS_Slots = __VLS_PrettifyGlobal<__VLS_OmitStringIndex<typeof __VLS_ctx.$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;
+}, 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, {}, HTMLTableRowElement>;
-declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;
-type __VLS_WithTemplateSlots<T, S> = T & {
+type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;
     };

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

@@ -1,6 +1,14 @@
-import { Column, LktObject, ValidTableRowTypeValue } from "lkt-vue-kernel";
+import { canRenderColumn, colPreferSlot, getColumnClasses, getColumnDisplayContent, getHorizontalColSpan } from "../functions/table-functions";
+import LktTableCell from "./LktTableCell.vue";
+import DropButton from "./DropButton.vue";
+import EditButton from "./EditButton.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;
+    dropButton: ButtonConfig;
     isDraggable: boolean;
     sortable: boolean;
     displayHiddenColumnsIndicator: boolean;
@@ -14,10 +22,6 @@ type __VLS_Props = {
     i: number;
     visibleColumns: Column[];
     emptyColumns: string[];
-    dropConfirm: string;
-    dropText: string;
-    dropIcon: string;
-    dropResource: string;
     editText: string;
     editIcon: string;
     editLink: string;
@@ -25,9 +29,57 @@ type __VLS_Props = {
     renderDrag?: boolean | Function;
     disabledDrag?: boolean | Function;
 };
-declare function __VLS_template(): any;
-type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
-declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+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: {
+    item: LktObject;
+    index: number;
+}, __VLS_29: {
+    item: LktObject;
+    index: number;
+}, __VLS_32: string, __VLS_33: {
+    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_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;
+    DropButton: typeof DropButton;
+    EditButton: typeof EditButton;
+    slots: typeof slots;
+    Item: typeof Item;
+    canCustomItem: typeof canCustomItem;
+    canItem: typeof canItem;
+    parsedEditLink: typeof parsedEditLink;
+    onClick: typeof onClick;
+    onShow: typeof onShow;
+    classes: typeof classes;
+    hasNavButtonSlot: typeof hasNavButtonSlot;
+    navButtonSlot: typeof navButtonSlot;
+    onClickUp: typeof onClickUp;
+    onClickDown: typeof onClickDown;
+    onClickDrop: typeof onClickDrop;
+    onClickEdit: typeof onClickEdit;
+    canRenderDragIndicator: typeof canRenderDragIndicator;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (...args: any[]) => void;
     click: (...args: any[]) => void;
     show: (...args: any[]) => void;
@@ -42,11 +94,46 @@ declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}
     "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[];
+    editText: string;
+    editIcon: string;
+    editLink: string;
+    rowDisplayType: ValidTableRowTypeValue;
+    renderDrag: boolean | Function;
+    disabledDrag: boolean | 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;
+    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;
@@ -55,10 +142,6 @@ declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}
     canEdit: boolean;
     visibleColumns: Column[];
     emptyColumns: string[];
-    dropConfirm: string;
-    dropText: string;
-    dropIcon: string;
-    dropResource: string;
     editText: string;
     editIcon: string;
     editLink: string;
@@ -66,9 +149,9 @@ declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}
     renderDrag: boolean | Function;
     disabledDrag: boolean | Function;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;
-type __VLS_WithTemplateSlots<T, S> = T & {
+type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;
     };

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

@@ -16,5 +16,5 @@ declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {
     sortDirection: string;
     amountOfColumns: number;
     items: LktObject[];
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, HTMLTableCellElement>;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 export default _default;

package/dist/functions/table-functions.d.ts

@@ -1,9 +1,4 @@
-import { Column, ColumnConfig, LktObject, SortDirection } from "lkt-vue-kernel";
-/**
- *
- * @param data
- */
-export declare const createColumn: (data: ColumnConfig) => Column;
+import { Column, LktObject, SortDirection } from "lkt-vue-kernel";
 /**
  *
  * @param a

package/dist/index.d.ts

@@ -1,6 +1,5 @@
 import { Component, Plugin } from "vue";
-export { createColumn } from "./functions/table-functions";
-export { Column } from "lkt-vue-kernel";
+export { createColumn, Column } from "lkt-vue-kernel";
 import "./../lkt-table.css";
 declare const LktTable: Plugin;
 export default LktTable;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lkt-table",
-  "version": "2.0.0",
+  "version": "2.0.3",
   "description": "",
   "keywords": [
     "lkt",
@@ -16,7 +16,7 @@
     ".": {
       "import": "./dist/build.js"
     },
-    "./styles": "./dist/style.css",
+    "./styles": "./dist/build.css",
     "./theme": "./theme/default.css",
     "./theme/default": "./theme/default.css"
   },
@@ -33,32 +33,33 @@
     "rebuild": "rm -rf dist/*; vue-tsc --declaration --emitDeclarationOnly; vite build; tsc --project tsconfig.build.json; cp build/* dist/"
   },
   "author": "Antonio Ibáñez",
+  "engines": {
+    "node": ">=18"
+  },
   "devDependencies": {
     "@babel/types": "^7.23.6",
     "@types/node": "^20.11.19",
     "@types/rollup": "^0.54.0",
     "@vitejs/plugin-vue": "^5.2.1",
-    "rollup": "^4.9.6",
-    "typescript": "^5.7",
-    "vite": "^5.4.14",
-    "vue-tsc": "^2.2"
-  },
-  "engines": {
-    "node": ">=18"
+    "rollup": "^4.34.8",
+    "typescript": "^5.7.3",
+    "vite": "^6.1.1",
+    "vue-tsc": "^2.2.0"
   },
   "dependencies": {
-    "lkt-button": "^1.1.16",
+    "sortablejs": "^1.15.6"
+  },
+  "peerDependencies": {
+    "lkt-button": "^2.0",
     "lkt-data-state": "^1.0.10",
     "lkt-date-tools": "^1.0.4",
-    "lkt-field": "^0.0.14",
+    "lkt-field": "^0.0.34",
     "lkt-http-client": "^1.0.19",
     "lkt-i18n": "^1.0.4",
     "lkt-loader": "^1.0.2",
-    "lkt-paginator": "^1.1.4",
+    "lkt-paginator": "^1.3.0",
     "lkt-string-tools": "^1.0.3",
-    "lkt-ts-interfaces": "^1.0.2",
     "lkt-vue-kernel": "^1.0.4",
-    "sortablejs": "^1.15.2",
     "vue": "^3.3",
     "vue-router": "^4.2.5"
   }

package/src/components/DropButton.vue

@@ -1,24 +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
-    resource: string
-    resourceData: LktObject
 }>(), {
     disabled: false,
-    text: '',
-    icon: '',
-    confirm: '',
-    resource: '',
-    resourceData: () => ({}),
 });
 
 const hasButtonSlot = computed(() => Settings.dropButtonSlot !== ''),
@@ -28,11 +19,9 @@ const hasButtonSlot = computed(() => Settings.dropButtonSlot !== ''),
 <template>
     <lkt-button
         palette="table-delete"
-        :icon="hasButtonSlot ? '' : icon"
-        :text="hasButtonSlot ? '' : text"
-        :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/LktTableRow.vue

@@ -12,13 +12,14 @@ import {Settings} from "../settings/Settings";
 import DropButton from "./DropButton.vue";
 import EditButton from "./EditButton.vue";
 import {replaceAll} from "lkt-string-tools";
-import {Column, LktObject, TableRowType, ValidTableRowTypeValue} from "lkt-vue-kernel";
+import {ButtonConfig, Column, LktObject, TableRowType, ValidTableRowTypeValue} from "lkt-vue-kernel";
 
 const slots = useSlots();
 const emit = defineEmits(['update:modelValue', 'click', 'show', 'item-up', 'item-down', 'item-drop']);
 
 const props = withDefaults(defineProps<{
     modelValue: LktObject
+    dropButton: ButtonConfig
     isDraggable: boolean
     sortable: boolean
     displayHiddenColumnsIndicator: boolean
@@ -32,10 +33,6 @@ const props = withDefaults(defineProps<{
     i: number
     visibleColumns: Column[]
     emptyColumns: string[]
-    dropConfirm: string
-    dropText: string
-    dropIcon: string
-    dropResource: string
     editText: string
     editIcon: string
     editLink: string
@@ -56,10 +53,6 @@ const props = withDefaults(defineProps<{
     i: 0,
     visibleColumns: () => [],
     emptyColumns: () => [],
-    dropConfirm: '',
-    dropText: '',
-    dropIcon: '',
-    dropResource: '',
     editText: '',
     editIcon: '',
     editLink: '',
@@ -88,9 +81,11 @@ const onClick = ($event: any) => emit('click', $event),
 
         let disabledDrag = false;
         if (typeof props.disabledDrag === 'function') disabledDrag = props.disabledDrag(Item.value);
-        else disabledDrag = props.disabledDrag === true;
+        else disabledDrag = computedDisabledDrag.value === true;
+
         if (!disabledDrag && props.sortable && props.isDraggable) r.push('handle');
         else if (disabledDrag) r.push('disabled');
+
         return r.join(' ');
     }),
     hasNavButtonSlot = computed(() => {
@@ -205,11 +200,7 @@ const canRenderDragIndicator = computed(() => {
         </template>
         <td v-if="canDrop && editModeEnabled" class="lkt-table-col-drop">
             <drop-button
-                :resource="dropResource"
-                :resource-data="Item"
-                :confirm="dropConfirm"
-                :text="dropText"
-                :icon="dropIcon"
+                :config="dropButton"
                 @click="onClickDrop"/>
         </td>
         <td v-if="canEdit && editModeEnabled" class="lkt-table-col-edit">