lkt-table 1.0.19 → 1.0.20

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lkt-table",
-  "version": "1.0.19",
+  "version": "1.0.20",
   "description": "",
   "keywords": [
     "lkt",
@@ -19,7 +19,7 @@
     "./styles": "./dist/style.css"
   },
   "types": "./dist/lkt-table.d.ts",
-  "files": ["dist/*"],
+  "files": ["dist/*", "src/**/*.vue"],
   "license": "MIT",
   "sideEffects": false,
   "scripts": {

package/src/components/LktHiddenRow.vue

@@ -0,0 +1,66 @@
+<script lang="ts">
+export default {name: "LktHiddenRow", inheritAttrs: false}
+</script>
+
+<script lang="ts" setup>
+import {createLktEvent} from "lkt-events";
+import {getColumnDisplayContent} from "../functions/table-functions";
+import {LktTableColumn} from "../instances/LktTableColumn";
+import {PropType} from "vue/dist/vue";
+import LktTableCell from "./LktTableCell.vue";
+import {ref, watch} from "vue";
+
+const emit = defineEmits(['update:modelValue', 'click']);
+
+const props = defineProps({
+    isDraggable: {type: Boolean, default: true},
+    sortable: {type: Boolean, default: true},
+    i: {type: [Number], default: 0},
+    hiddenColumnsColSpan: {type: Number, default: 0},
+    visibleColumns: {type: Array as PropType<LktTableColumn[]>, default: (): LktTableColumn[] => []},
+    hiddenColumns: {type: Array as PropType<LktTableColumn[]>, default: (): LktTableColumn[] => []},
+    emptyColumns: {type: Array as PropType<string[]>, default: (): string[] => []},
+    hiddenIsVisible: {type: Boolean, default: false},
+    modelValue: {type: Object as PropType<any>, default: () => ({})},
+});
+
+const item = ref(props.modelValue);
+
+const onClick = ($event: any, item: any, column: LktTableColumn) => {
+    emit('click', $event, createLktEvent('', {item, column}))
+};
+
+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)"
+                        v-on:click="onClick($event, item, column)">
+                        <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"></slot>
+                        </template>
+                        <template v-else>
+                            <lkt-table-cell :column="column" v-model="item" :i="i"></lkt-table-cell>
+                        </template>
+                    </td>
+                </tr>
+            </table>
+        </td>
+    </tr>
+</template>

package/src/components/LktTableCell.vue

@@ -0,0 +1,103 @@
+<script lang="ts">
+export default {name: "LktTableCell", inheritAttrs: false}
+</script>
+
+<script lang="ts" setup>
+import {getColumnDisplayContent} from "../functions/table-functions";
+import {LktTableColumn} from "../instances/LktTableColumn";
+import {PropType} from "vue/dist/vue";
+import {nextTick, ref, watch} from "vue";
+import {LktObject} from "lkt-ts-interfaces";
+
+const emit = defineEmits(['edited']);
+
+const props = defineProps({
+    modelValue: {type: Object as PropType<LktObject>, default: () => ({})},
+    column: {type: Object as PropType<LktTableColumn>, default: () => ({})},
+    i: {type: [Number], default: 0},
+});
+
+const item = ref(props.modelValue),
+    value = ref(item.value[props.column.key]),
+    inputElement = ref(null),
+    loadingColumn = ref(props.column.showLoading());
+
+watch(value, () => {
+    const payload = JSON.parse(JSON.stringify(item.value));
+    payload[props.column.key] = value.value;
+    emit('edited', payload, props.i);
+})
+
+watch(() => props.modelValue, (v) => {
+    item.value = v
+    value.value = item.value[props.column.key];
+});
+
+watch(() => props.column, () => {
+    if (props.column.resourceLoaded) {
+        nextTick(() => loadingColumn.value = false)
+    }
+}, {deep: true});
+
+if (props.column.hasToLoadResource()) {
+    props.column.loadResource();
+}
+</script>
+
+<template>
+    <template v-if="column.type === 'link'">
+        <router-link :to="column.getHref(item)">{{ getColumnDisplayContent(column, item, i) }}</router-link>
+    </template>
+    <template v-else-if="column.type === 'action'">
+        <a href="#" v-on:click="column.doAction(item)">{{ getColumnDisplayContent(column, item, i) }}</a>
+    </template>
+    <template v-else-if="column.type === 'text'">
+        <lkt-field-text
+            v-bind:read-mode="!column.editable"
+            :ref="(el:any) => inputElement = el"
+            :edit-slot="column.editSlot"
+            :value-slot="column.valueSlot"
+            v-model="value"></lkt-field-text>
+    </template>
+    <template v-else-if="column.type === 'email'">
+        <lkt-field-text
+            v-bind:read-mode="!column.editable"
+            :ref="(el:any) => inputElement = el"
+            :edit-slot="column.editSlot"
+            :value-slot="column.valueSlot"
+            is-email
+            v-model="value"></lkt-field-text>
+    </template>
+    <template v-else-if="column.type === 'tel'">
+        <lkt-field-text
+            v-bind:read-mode="!column.editable"
+            :ref="(el:any) => inputElement = el"
+            :edit-slot="column.editSlot"
+            :value-slot="column.valueSlot"
+            is-tel
+            v-model="value"></lkt-field-text>
+    </template>
+    <template v-else-if="column.type === 'check'">
+        <lkt-field-check v-bind:read-mode="!column.editable" :ref="(el:any) => inputElement = el" v-model="value"></lkt-field-check>
+    </template>
+    <template v-else-if="column.type === 'switch'">
+        <lkt-field-switch v-bind:read-mode="!column.editable" :ref="(el:any) => inputElement = el" v-model="value"></lkt-field-switch>
+    </template>
+    <template v-else-if="column.type === 'select'">
+        <lkt-loader v-if="loadingColumn"></lkt-loader>
+        <lkt-field-select
+            v-else
+            v-bind:read-mode="!column.editable"
+            :ref="(el:any) => inputElement = el"
+            v-model="value"
+            v-bind:resource="column.resource"
+            v-bind:resource-data="column.resourceData"
+            v-bind:options="column.options"
+            v-bind:multiple="column.isMultiple"
+            v-bind:multiple-display="column.multipleDisplay"
+            v-bind:multiple-display-edition="column.multipleDisplayEdition"></lkt-field-select>
+    </template>
+    <template v-else>
+        {{ getColumnDisplayContent(column, item, i) }}
+    </template>
+</template>

package/src/components/LktTableRow.vue

@@ -0,0 +1,72 @@
+<script lang="ts">
+export default {name: "LktTableRow", inheritAttrs: false}
+</script>
+
+<script lang="ts" setup>
+import {createLktEvent} from "lkt-events";
+import {getColumnDisplayContent, getHorizontalColSpan, canRenderColumn} from "../functions/table-functions";
+import {LktTableColumn} from "../instances/LktTableColumn";
+import {PropType} from "vue/dist/vue";
+import LktTableCell from "./LktTableCell.vue";
+import {ref, watch} from "vue";
+import {LktObject} from "lkt-ts-interfaces";
+
+const emit = defineEmits(['edited', 'click', 'show']);
+
+const props = defineProps({
+    isDraggable: {type: Boolean, default: true},
+    sortable: {type: Boolean, default: true},
+    i: {type: [Number], default: 0},
+    displayHiddenColumnsIndicator: {type: Boolean, default: false},
+    visibleColumns: {type: Array as PropType<LktTableColumn[]>, default: (): LktTableColumn[] => []},
+    emptyColumns: {type: Array as PropType<string[]>, default: (): string[] => []},
+    hiddenIsVisible: {type: Boolean, default: false},
+    item: {type: Object as PropType<any>, default: () => ({})},
+});
+
+const Item = ref(props.item);
+
+const onClick = ($event: any, item: any, column: LktTableColumn) => {
+    emit('click', $event, createLktEvent('', {item, column}))
+};
+const onShow = ($event: any, i: any) => {
+    emit('show', $event, createLktEvent('', {i}))
+};
+
+const onEdited = (payload: LktObject, i: any) => {
+    Item.value = payload;
+}
+
+watch(() => props.item, (v) => Item.value = v);
+watch(Item, () => emit('edited', Item.value, props.i));
+</script>
+
+<template>
+    <tr :data-i="i" :data-handle-drag="isDraggable">
+        <td v-if="sortable && isDraggable" data-role="drag-indicator"></td>
+        <td v-else-if="sortable" data-role="invalid-drag-indicator"></td>
+        <td v-if="displayHiddenColumnsIndicator"
+            v-on:click="onShow($event, i)" data-role="show-more"
+            v-bind:class="hiddenIsVisible ? 'state-open' : ''"></td>
+        <template v-for="column in visibleColumns">
+            <td v-if="canRenderColumn(column, emptyColumns, item)"
+                v-bind:data-column="column.key"
+                v-bind:colspan="getHorizontalColSpan(column,item)"
+                v-bind:title="getColumnDisplayContent (column, item, i)"
+                v-on:click="onClick($event, item, column)"
+            >
+                <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"></slot>
+                </template>
+                <template v-else-if="item">
+                    <lkt-table-cell :column="column" v-model="Item" :i="i" v-on:edited="onEdited"></lkt-table-cell>
+                </template>
+            </td>
+        </template>
+    </tr>
+
+</template>

package/src/lib-components/LktTable.vue

@@ -0,0 +1,268 @@
+<script lang="ts">
+export default {name: "LktTable", inheritAttrs: false}
+</script>
+
+<script lang="ts" setup>
+import draggable from "vuedraggable";
+import {
+    defaultTableSorter,
+    getVerticalColSpan,
+    getDefaultSortColumn,
+    getColumnByKey
+} from "../functions/table-functions";
+import LktTableRow from "../components/LktTableRow.vue";
+import {computed, onMounted, PropType, ref, useSlots, watch} from "vue";
+import {LktTableColumn} from "../instances/LktTableColumn";
+import {LktEvent} from "lkt-events/dist/types/classes/LktEvent";
+import LktHiddenRow from "../components/LktHiddenRow.vue";
+import {generateRandomString} from "lkt-string-tools";
+import {LktObject} from "lkt-ts-interfaces";
+
+const emit = defineEmits(['update:modelValue', 'sort', 'click']);
+
+const slots = useSlots();
+
+const props = defineProps({
+    modelValue: {type: Array as PropType<LktObject[]>, default: (): any[] => []},
+    columns: {type: Array as PropType<LktTableColumn[]>, default: (): LktTableColumn[] => []},
+    sorter: {type: Function, default: defaultTableSorter},
+    sortable: {type: Boolean, default: false},
+    hideEmptyColumns: {type: Boolean, default: false},
+    draggableChecker: {type: Function, default: (item: any) => true},
+    checkValidDrag: {type: Function, default: (evt: any) => true},
+    draggableItemKey: {type: String, default: 'name'}
+});
+
+const hiddenColumnsStack: LktObject = {};
+
+const Sorter = ref(typeof props.sorter === 'function' ? props.sorter : defaultTableSorter),
+    SortBy = ref(getDefaultSortColumn(props.columns)),
+    SortDirection = ref('asc'),
+    Items = ref(props.modelValue),
+    Hidden = ref(hiddenColumnsStack),
+    drag = ref(false);
+
+
+const uniqueId = generateRandomString(12);
+
+const hasData = computed(() => {
+        return Items.value.length > 0;
+    }),
+    emptyColumns = computed(() => {
+        if (!props.hideEmptyColumns) return [];
+        let r: string[] = [];
+        props.columns.forEach((column: LktTableColumn) => {
+            let key = column.key;
+
+            let ok = false;
+            Items.value.forEach((item: any) => {
+                if (typeof item.checkEmpty === 'function') {
+                    return item.checkEmpty(item);
+                }
+                if (item[key]) ok = true;
+            });
+
+            if (!ok) r.push(key);
+        });
+        return r;
+    }),
+    visibleColumns = computed(() => {
+        return props.columns.filter((c: LktTableColumn) => !c.hidden);
+    }),
+    hiddenColumns = computed(() => {
+        return props.columns.filter((c: LktTableColumn) => c.hidden);
+    }),
+    hiddenColumnsColSpan = computed(() => {
+        let r = visibleColumns.value.length + 1;
+        if (props.sortable) ++r;
+        return r;
+    }),
+    displayHiddenColumnsIndicator = computed(() => {
+        return hiddenColumns.value.length > 0 && !props.sortable;
+    }),
+    columnKeys = computed((): string[] => {
+        return props.columns.map(c => c.key);
+
+    }),
+    colSlots = computed((): LktObject => {
+        let r = [];
+        for (let k in slots) if (columnKeys.value.indexOf(k) !== -1) r.push(k);
+        return r;
+    });
+
+
+const getItemByEvent = (e: any) => {
+        let t = e.target;
+        if (typeof t.dataset.column === 'undefined') {
+            do {
+                t = t.parentNode;
+            } while (typeof t.dataset.column === 'undefined' && t.tagName !== 'TABLE' && t.tagName !== 'body');
+        }
+
+        if (t.tagName === 'TD') {
+            t = t.parentNode;
+            t = t.dataset.i;
+            if (typeof t !== 'undefined') return Items.value[t];
+        }
+
+        return undefined;
+    },
+    isVisible = (index: number) => {
+        return Hidden.value['tr_' + index] === true;
+    },
+    sort = (column: LktTableColumn | null) => {
+        if (!column) return;
+        if (column.sortable) {
+            Items.value = Items.value.sort((a: any, b: any) => {
+                return Sorter.value(a, b, column, SortDirection.value);
+            });
+            SortDirection.value = SortDirection.value === 'asc' ? 'desc' : 'asc';
+            SortBy.value = column.key;
+            emit('sort', [SortBy.value, SortDirection.value]);
+        }
+    },
+    onClick = ($event: any, $lkt: LktEvent) => {
+        emit('click', $event, $lkt);
+    },
+    show = ($event: any, $lkt: LktEvent) => {
+        let k = 'tr_' + $lkt.value.i;
+        Hidden.value[k] = typeof Hidden.value[k] === 'undefined' ? true : !Hidden.value[k];
+    };
+
+
+const onEdited = (payload: LktObject, i: any) => {
+    Items.value[i] = payload;
+}
+
+onMounted(() => {
+    sort(getColumnByKey(props.columns, SortBy.value));
+})
+
+watch(() => props.modelValue, (v) => Items.value = v);
+watch(Items, (v: any) => {
+    emit('update:modelValue', v)
+});
+
+defineExpose({getItemByEvent});
+
+</script>
+
+<template>
+    <div v-if="hasData" class="lkt-table" :data-sortable="sortable">
+        <table>
+            <thead>
+            <tr>
+                <th v-if="sortable" data-role="drag-indicator"></th>
+                <th v-if="displayHiddenColumnsIndicator"></th>
+                <template v-for="column in visibleColumns">
+                    <th :data-column="column.key"
+                        v-if="emptyColumns.indexOf(column.key) === -1"
+                        v-bind:data-sortable="column.sortable === true"
+                        v-bind:data-sort="column.sortable === true && SortBy === column.key ? SortDirection : ''"
+                        v-bind:colspan="getVerticalColSpan(column, columns.length, Items)"
+                        v-bind:title="column.label"
+                        v-on:click="sort(column)"
+                    >
+                        <div>{{ column.label }}</div>
+                    </th>
+                </template>
+            </tr>
+            </thead>
+            <draggable v-if="sortable"
+                       v-model="Items"
+                       v-bind:move="checkValidDrag"
+                       v-bind:itemKey="draggableItemKey"
+                       v-on:start="drag=true"
+                       v-on:end="drag=false"
+                       tag="tbody"
+                       class="lkt-sortable-table"
+                       handle="[data-handle-drag]">
+                <template #item="{element, index}">
+                    <lkt-table-row
+                        v-bind:key="uniqueId + '-'  + index"
+                        v-bind:i="index"
+                        v-bind:item="element"
+                        v-bind:display-hidden-columns-indicator="displayHiddenColumnsIndicator"
+                        v-bind:is-draggable="draggableChecker ? draggableChecker(element) : true"
+                        v-bind:sortable="sortable"
+                        v-bind:visible-columns="visibleColumns"
+                        v-bind:empty-columns="emptyColumns"
+                        v-bind:hidden-is-visible="isVisible(index)"
+                        v-on:click="onClick"
+                        v-on:show="show"
+                    >
+                        <template
+                            v-for="column in colSlots"
+                            v-slot:[column]="row">
+                            <slot
+                                v-bind:name="column"
+                                v-bind:item="row.item"
+                                v-bind:value="row.value"
+                                v-bind:column="row.column"
+                            ></slot>
+                        </template>
+                    </lkt-table-row>
+                </template>
+            </draggable>
+
+            <tbody v-else>
+            <lkt-table-row
+                v-for="(item, i) in Items"
+                v-bind:key="uniqueId + '-'  + i"
+                v-bind:i="i"
+                v-bind:item="item"
+                v-bind:display-hidden-columns-indicator="displayHiddenColumnsIndicator"
+                v-bind:is-draggable="draggableChecker ? draggableChecker(item) : true"
+                v-bind:sortable="sortable"
+                v-bind:visible-columns="visibleColumns"
+                v-bind:empty-columns="emptyColumns"
+                v-bind:hidden-is-visible="isVisible(i)"
+                v-on:click="onClick"
+                v-on:show="show"
+                v-on:edited="onEdited"
+            >
+                <template
+                    v-for="column in colSlots"
+                    v-slot:[column]="row">
+                    <slot
+                        v-bind:name="column"
+                        v-bind:item="row.item"
+                        v-bind:value="row.value"
+                        v-bind:column="row.column"
+                    ></slot>
+                </template>
+            </lkt-table-row>
+            <lkt-hidden-row
+                v-if="hiddenColumns.length > 0"
+                v-for="(item, i) in Items"
+                v-bind:key="uniqueId + '-'  + i"
+                v-bind:i="i"
+                v-bind:item="item"
+                v-bind:hidden-columns="hiddenColumns"
+                v-bind:hidden-columns-col-span="hiddenColumnsColSpan"
+                v-bind:is-draggable="draggableChecker ? draggableChecker(item) : true"
+                v-bind:sortable="sortable"
+                v-bind:visible-columns="visibleColumns"
+                v-bind:empty-columns="emptyColumns"
+                v-bind:hidden-is-visible="isVisible(i)"
+                v-on:click="onClick"
+                v-on:show="show"
+            >
+                <template
+                    v-for="column in colSlots"
+                    v-slot:[column]="row">
+                    <slot
+                        v-bind:name="column"
+                        v-bind:item="row.item"
+                        v-bind:value="row.value"
+                        v-bind:column="row.column"
+                    ></slot>
+                </template>
+            </lkt-hidden-row>
+            </tbody>
+        </table>
+    </div>
+    <div v-else-if="!!$slots['no-items']" class="lkt-empty-table">
+        <slot name="no-items"></slot>
+    </div>
+</template>