lkt-table 1.2.26 → 1.3.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lkt-table",
-  "version": "1.2.26",
+  "version": "1.3.1",
   "description": "",
   "keywords": [
     "lkt",
@@ -20,7 +20,7 @@
     "./theme": "./theme/default.css",
     "./theme/default": "./theme/default.css"
   },
-  "types": "./dist/index.d.ts",
+  "types": "./dist/build.d.ts",
   "files": [
     "dist/*",
     "src/**/*.vue",
@@ -50,11 +50,7 @@
     "lkt-button": "^1.1.16",
     "lkt-data-state": "^1.0.10",
     "lkt-date-tools": "^1.0.4",
-    "lkt-field-file": "^1.1.1",
-    "lkt-field-select": "^1.0.0",
-    "lkt-field-switch": "^1.0.0",
-    "lkt-field-text": "^1.0.0",
-    "lkt-field-textarea": "^1.1.3",
+    "lkt-field": "^0.0.14",
     "lkt-http-client": "^1.0.19",
     "lkt-i18n": "^1.0.4",
     "lkt-loader": "^1.0.2",

package/src/components/LktHiddenRow.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import {getColumnDisplayContent} from "../functions/table-functions";
-import {LktTableColumn} from "../instances/LktTableColumn";
+import {Column} from "../instances/Column";
 import LktTableCell from "./LktTableCell.vue";
 import {ref, watch} from "vue";
 import {LktObject} from "lkt-ts-interfaces";
@@ -14,8 +14,8 @@ const props = withDefaults(defineProps<{
     hiddenIsVisible: boolean
     i: number
     hiddenColumnsColSpan: number
-    visibleColumns: LktTableColumn[]
-    hiddenColumns: LktTableColumn[]
+    visibleColumns: Column[]
+    hiddenColumns: Column[]
     emptyColumns: string[]
 }>(), {
     modelValue: () => ({}),

package/src/components/LktTableCell.vue

@@ -1,21 +1,21 @@
 <script lang="ts" setup>
 import {getColumnDisplayContent} from "../functions/table-functions";
-import {LktTableColumn} from "../instances/LktTableColumn";
-import {computed, nextTick, ref, watch} from "vue";
+import {Column} from "../instances/Column";
+import {computed, ref, watch} from "vue";
 import {LktObject} from "lkt-ts-interfaces";
-import {TypeOfColumn} from "@/enums/TypeOfColumn";
+import {TypeOfColumn} from "../enums/TypeOfColumn";
 
 const emit = defineEmits(['update:modelValue']);
 
 const props = withDefaults(defineProps<{
     modelValue: LktObject
-    column: LktTableColumn
-    columns: LktTableColumn[]
+    column: Column
+    columns: Column[]
     i: number
     editModeEnabled: boolean
 }>(), {
     modelValue: () => ({}),
-    column: () => ({}),
+    column: () => (new Column()),
     columns: () => [],
     i: 0,
     editModeEnabled: false
@@ -23,8 +23,7 @@ const props = withDefaults(defineProps<{
 
 const item = ref(props.modelValue),
     value = ref(item.value[props.column.key]),
-    inputElement = ref(null),
-    loadingColumn = ref(props.column.showLoading());
+    inputElement = ref(null);
 
 watch(value, (v) => {
     const payload = JSON.parse(JSON.stringify(item.value));
@@ -37,18 +36,29 @@ watch(() => props.modelValue, (v) => {
     value.value = item.value[props.column.key];
 });
 
-watch(() => props.column, () => {
-    if (props.column.resourceLoaded) {
-        nextTick(() => loadingColumn.value = false)
+const slotData = computed(() => {
+    return {...props.column.slotData, item: item.value};
+})
+
+const computedModalKey = computed(() => {
+    if (props.column.field?.modalKey.startsWith('prop:')) {
+        let prop = props.column.field?.modalKey.substring(5);
+        return item.value[prop];
     }
-}, {deep: true});
+    return props.column.field?.modalKey;
+});
 
-if (props.column.hasToLoadResource()) {
-    props.column.loadResource();
-}
+const computedOptions = computed(() => {
+    if (typeof props.column.field?.options === 'string' && props.column.field?.options.startsWith('prop:')) {
+        let prop = props.column.field?.options.substring(5);
+        return item.value[prop];
+    }
+    return props.column.field.options;
+});
 
-const slotData = computed(() => {
-    return {...props.column.slotData, item: item.value};
+const computedColumnType = computed(() => {
+    if ([TypeOfColumn.Integer, TypeOfColumn.Float].includes(props.column.type)) return TypeOfColumn.Number;
+    return props.column.type;
 })
 </script>
 
@@ -61,81 +71,18 @@ const slotData = computed(() => {
     <template v-else-if="column.type === TypeOfColumn.Action">
         <a href="#" v-on:click="column.doAction(item)">{{ getColumnDisplayContent(column, item, i) }}</a>
     </template>
-    <template v-else-if="column.type === TypeOfColumn.Text">
-        <lkt-field-text
-            v-bind:read-mode="!column.editable || !editModeEnabled"
-            :ref="(el:any) => inputElement = el"
-            :edit-slot="column.editSlot"
-            :value-slot="column.valueSlot"
-            :slot-data="slotData"
-            v-model="value"/>
-    </template>
-    <template v-else-if="column.type === TypeOfColumn.Email">
-        <lkt-field-text
-            v-bind:read-mode="!column.editable || !editModeEnabled"
+    <template v-else-if="column.type !== ''">
+        <lkt-field
+            v-bind="column.field"
+            :type="computedColumnType"
+            :read-mode="!column.editable || !editModeEnabled"
             :ref="(el:any) => inputElement = el"
-            :edit-slot="column.editSlot"
-            :value-slot="column.valueSlot"
             :slot-data="slotData"
-            is-email
+            :label="column.type === 'switch' || column.type === 'check' ? column.label : ''"
+            :modal-key="computedModalKey"
+            :options="computedOptions"
             v-model="value"/>
     </template>
-    <template v-else-if="column.type === TypeOfColumn.Tel">
-        <lkt-field-text
-            v-bind:read-mode="!column.editable || !editModeEnabled"
-            :ref="(el:any) => inputElement = el"
-            :edit-slot="column.editSlot"
-            :value-slot="column.valueSlot"
-            :slot-data="slotData"
-            is-tel
-            v-model="value"/>
-    </template>
-    <template v-else-if="column.type === TypeOfColumn.Integer">
-        <lkt-field-text
-            v-bind:read-mode="!column.editable || !editModeEnabled"
-            :ref="(el:any) => inputElement = el"
-            :edit-slot="column.editSlot"
-            :value-slot="column.valueSlot"
-            :slot-data="slotData"
-            is-number
-            v-model="value"/>
-    </template>
-    <template v-else-if="column.type === TypeOfColumn.Float">
-        <lkt-field-text
-            v-bind:read-mode="!column.editable || !editModeEnabled"
-            :ref="(el:any) => inputElement = el"
-            :edit-slot="column.editSlot"
-            :value-slot="column.valueSlot"
-            :slot-data="slotData"
-            is-number
-            v-model="value"/>
-    </template>
-    <template v-else-if="column.type === TypeOfColumn.Check">
-        <lkt-field-switch is-check v-bind:read-mode="!column.editable || !editModeEnabled" :ref="(el:any) => inputElement = el" v-model="value"/>
-    </template>
-    <template v-else-if="column.type === TypeOfColumn.Switch">
-        <lkt-field-switch v-bind:read-mode="!column.editable || !editModeEnabled" :ref="(el:any) => inputElement = el" v-model="value"/>
-    </template>
-    <template v-else-if="column.type === TypeOfColumn.File">
-        <lkt-field-file v-bind:read-mode="!column.editable || !editModeEnabled" :ref="(el:any) => inputElement = el" v-model="value"/>
-    </template>
-    <template v-else-if="column.type === TypeOfColumn.Select">
-        <lkt-loader v-if="loadingColumn"></lkt-loader>
-        <lkt-field-select
-            v-else
-            v-bind:read-mode="!column.editable || !editModeEnabled"
-            :ref="(el:any) => inputElement = el"
-            v-model="value"
-            :slot-data="slotData"
-            v-bind:resource="column.resource"
-            v-bind:use-resource-slot="column.resourceSlot ? column.resourceSlot : column.resource"
-            v-bind:resource-data="column.resourceData"
-            v-bind:options="column.options"
-            v-bind:multiple="column.isMultiple"
-            v-bind:tags="column.tags"
-            v-bind:multiple-display="column.multipleDisplay"
-            v-bind:multiple-display-edition="column.multipleDisplayEdition"/>
-    </template>
     <template v-else>
         {{ getColumnDisplayContent(column, item, i, columns) }}
     </template>

package/src/components/LktTableRow.vue

@@ -5,7 +5,7 @@ import {
     getColumnDisplayContent,
     getHorizontalColSpan
 } from "../functions/table-functions";
-import {LktTableColumn} from "../instances/LktTableColumn";
+import {Column} from "../instances/Column";
 import LktTableCell from "./LktTableCell.vue";
 import {computed, ref, watch} from "vue";
 import {LktObject} from "lkt-ts-interfaces";
@@ -28,7 +28,7 @@ const props = withDefaults(defineProps<{
     canEdit: boolean
     editModeEnabled: boolean
     i: number
-    visibleColumns: LktTableColumn[]
+    visibleColumns: Column[]
     emptyColumns: string[]
     dropConfirm: string
     dropText: string

package/src/components/TableHeader.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import {getVerticalColSpan} from "../functions/table-functions";
-import {LktTableColumn} from "../instances/LktTableColumn";
+import {Column} from "../instances/Column";
 import {computed} from "vue";
 import {LktObject} from "lkt-ts-interfaces";
 import {__} from "lkt-i18n";
@@ -8,7 +8,7 @@ import {__} from "lkt-i18n";
 const emit = defineEmits(['click']);
 
 const props = withDefaults(defineProps<{
-    column: LktTableColumn,
+    column: Column,
     sortBy: string,
     sortDirection: string,
     amountOfColumns: number,

package/src/lib-components/LktTable.vue

@@ -2,7 +2,7 @@
 import {defaultTableSorter, getColumnByKey, getDefaultSortColumn} from "../functions/table-functions";
 import LktTableRow from "../components/LktTableRow.vue";
 import {computed, nextTick, onMounted, ref, useSlots, watch} from "vue";
-import {LktTableColumn} from "../instances/LktTableColumn";
+import {Column} from "../instances/Column";
 import LktHiddenRow from "../components/LktHiddenRow.vue";
 import {generateRandomString, replaceAll} from "lkt-string-tools";
 import {LktObject} from "lkt-ts-interfaces";
@@ -21,7 +21,7 @@ const slots = useSlots();
 
 const props = withDefaults(defineProps<{
     modelValue: LktObject[]
-    columns: LktTableColumn[]
+    columns: Column[]
     sorter?: Function
     draggableChecker?: Function
     checkValidDrag?: Function
@@ -188,7 +188,7 @@ const uniqueId = generateRandomString(12);
 const emptyColumns = computed(() => {
         if (!props.hideEmptyColumns) return [];
         let r: string[] = [];
-        Columns.value.forEach((column: LktTableColumn) => {
+        Columns.value.forEach((column: Column) => {
             let key = column.key;
 
             let ok = false;
@@ -204,10 +204,10 @@ const emptyColumns = computed(() => {
         return r;
     }),
     visibleColumns = computed(() => {
-        return Columns.value.filter((c: LktTableColumn) => !c.hidden);
+        return Columns.value.filter((c: Column) => !c.hidden);
     }),
     hiddenColumns = computed(() => {
-        return Columns.value.filter((c: LktTableColumn) => c.hidden);
+        return Columns.value.filter((c: Column) => c.hidden);
     }),
     hiddenColumnsColSpan = computed(() => {
         let r = visibleColumns.value.length + 1;
@@ -215,7 +215,7 @@ const emptyColumns = computed(() => {
         return r;
     }),
     rowKeyColumns = computed(() => {
-        return Columns.value.filter((c: LktTableColumn) => c.isForRowKey);
+        return Columns.value.filter((c: Column) => c.isForRowKey);
     }),
     displayHiddenColumnsIndicator = computed(() => {
         return hiddenColumns.value.length > 0 && !props.sortable;
@@ -307,7 +307,7 @@ const getItemByEvent = (e: any) => {
     isVisible = (index: number) => {
         return Hidden.value['tr_' + index] === true;
     },
-    sort = (column: LktTableColumn | null) => {
+    sort = (column: Column | null) => {
         if (!column) return;
         if (column.sortable) {
             Items.value = Items.value.sort((a: any, b: any) => {
@@ -325,32 +325,6 @@ const getItemByEvent = (e: any) => {
         let k = 'tr_' + i;
         Hidden.value[k] = typeof Hidden.value[k] === 'undefined' ? true : !Hidden.value[k];
     },
-    autoLoadSelectColumnsOptions = () => {
-
-        Columns.value.forEach(col => {
-            if (col.type === 'select' && col.autoLoadSelectOptions) {
-
-                let key = col.autoLoadSelectOptionsKey !== '' ? col.autoLoadSelectOptionsKey : col.key,
-                    opts = [];
-
-                Items.value.forEach(item => {
-                    if (Array.isArray(item[key])) {
-                        item[key].forEach(opt => opts.push(opt));
-                    }
-                });
-
-                let flags = {};
-
-                opts = opts.filter(function (opt) {
-                    if (flags[opt.value]) return false;
-                    flags[opt.value] = true;
-                    return true;
-                });
-
-                col.setOptions(opts);
-            }
-        })
-    },
     validDragChecker = (evt: any) => {
         if (typeof props.checkValidDrag === 'function') return props.checkValidDrag(evt);
         return true;
@@ -463,7 +437,6 @@ const getItemByEvent = (e: any) => {
     };
 
 onMounted(() => {
-    autoLoadSelectColumnsOptions();
     if (props.initialSorting) {
         sort(getColumnByKey(props.columns, SortBy.value));
     }
@@ -482,7 +455,6 @@ watch(() => props.editMode, (v) => editModeEnabled.value = v);
 watch(() => props.columns, (v) => Columns.value = v);
 watch(() => props.modelValue, (v) => Items.value = v);
 watch(Items, (v: any) => {
-    autoLoadSelectColumnsOptions();
     dataState.value.increment({items: v});
     emit('update:modelValue', v);
 }, {deep: true});
@@ -549,7 +521,8 @@ const hasEmptySlot = computed(() => {
                 />
 
                 <div class="switch-edition-mode">
-                    <lkt-field-switch
+                    <lkt-field
+                        type="switch"
                         v-show="switchEditionEnabled"
                         v-model="editModeEnabled"
                         :label="computedEditModeText"/>