lkt-table 1.0.13

package/lkt-table.css

@@ -0,0 +1,114 @@
+.lkt-table {
+    width: var(--table-width);
+    overflow-x: auto;
+    font-family: var(--table-font-family);
+}
+
+.lkt-table > table {
+    width: 100%;
+    max-width: 100%;
+    border-collapse: separate;
+    border-radius: var(--table-border-radius);
+    border-spacing: 0;
+}
+
+.lkt-table th,
+.lkt-table td {
+    vertical-align: middle;
+    text-align: var(--table-text-align);
+    padding: var(--table-row-padding);
+    font-size: var(--table-row-font-size);
+    color: var(--table-row-color);
+}
+
+.lkt-table th {
+    font-family: var(--table-header-font-family);
+    padding: var(--table-header-padding);
+}
+
+.lkt-table thead tr {
+    background-color: var(--table-header-background)
+}
+
+.lkt-table tbody tr {
+    background-color: var(--table-row-background);
+}
+
+.lkt-table tbody tr:nth-child(odd) {
+    background-color: var(--table-row-background-odd);
+}
+
+.lkt-table [data-sort="asc"] > div,
+.lkt-table [data-sort="desc"] > div {
+    display: inline-block;
+}
+
+.lkt-table [data-sort="asc"] > div:after,
+.lkt-table [data-sort="desc"] > div:after {
+    font-family: var(--table-sort-icon-font-family);
+    display: inline-block;
+    font-size: var(--table-sort-icon-font-size);
+}
+
+.lkt-table [data-sort="asc"] > div:after {
+    content: var(--table-sort-asc-icon-content);
+}
+
+.lkt-table [data-sort="desc"] > div:after {
+    content: var(--table-sort-desc-icon-content);
+}
+
+.lkt-table td[data-role="drag-indicator"],
+.lkt-table td[data-role="invalid-drag-indicator"] {
+    width: var(--table-drag-indicator-width);
+    height: 40px;
+    padding: 0 !important;
+    position: relative;
+    background: #eeeeee;
+    cursor: pointer;
+}
+
+.lkt-table td[data-role="drag-indicator"]:before,
+.lkt-table td[data-role="invalid-drag-indicator"]:before {
+    content: '';
+    display: block;
+    background: #eeeeee;
+    width: 18px;
+    height: 36px;
+    margin: auto;
+}
+
+.lkt-table td[data-role="drag-indicator"]:after,
+.lkt-table td[data-role="invalid-drag-indicator"]:after {
+    content: "\2026";
+    color: #000000;
+    display: block;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    font-weight: 700;
+    width: 15px;
+    height: 7px;
+    transform: rotate(90deg);
+    transform-origin: center center;
+}
+
+[data-lkt="empty-table"] {
+    border: 1px solid #ddd;
+    border-radius: var(--table-border-radius);
+    width: 100%;
+    padding: 10px;
+    background-color: #f8f7e5;
+    font-family: var(--table-font-family);
+    font-size: 13px;
+    color: #444;
+    text-align: var(--table-text-align);
+}
+
+.sortable-chosen {
+    border: var(--table-sortable-chosen-border);
+}
+
+.sortable-chosen.ghost {
+    background: var(--table-sortable-chosen-ghost-background);
+}

package/package.json

@@ -0,0 +1,71 @@
+{
+  "name": "lkt-table",
+  "version": "1.0.13",
+  "description": "",
+  "main": "src/index.ts",
+  "module": "src/index.ts",
+  "files": [
+    "lkt-table.css",
+    "dist/*",
+    "src/**/*.vue"
+  ],
+  "sideEffects": false,
+  "exports": {
+    ".": {
+      "import": "./dist/lkt-table.es.js",
+      "require": "./dist/lkt-table.umd.js"
+    },
+    "./dist/style.css": "./dist/style.css"
+  },
+  "types": "./dist/types/index.d.ts",
+  "scripts": {
+    "serve": "vite",
+    "build": "vite build && vue-tsc --emitDeclarationOnly --project tsconfig.json && mv dist/src dist/types && rm dist/README.md.d.ts && rm dist/vite.config.d.ts",
+    "build2": "vite build",
+    "preview": "vite preview",
+    "test": "vitest",
+    "test-coverage": "vitest run --coverage"
+  },
+  "author": "Antonio Ibáñez",
+  "devDependencies": {
+    "@babel/core": "^7.13.13",
+    "@babel/preset-env": "^7.13.12",
+    "@babel/types": "^7.18.9",
+    "@testing-library/cypress": "^7.0.4",
+    "@testing-library/dom": "^7.30.1",
+    "@testing-library/jest-dom": "^5.11.10",
+    "@types/jest": "^29.0.1",
+    "@types/node": "^18.6.2",
+    "@typescript-eslint/eslint-plugin": "^5.36.2",
+    "@typescript-eslint/parser": "^5.36.2",
+    "@vitejs/plugin-vue": "^3.0.1",
+    "babel-eslint": "^10.1.0",
+    "babel-jest": "^29.0.3",
+    "babel-loader": "^8.2.2",
+    "cypress": "^6.8.0",
+    "eslint": "8.22.0",
+    "eslint-config-prettier": "^8.1.0",
+    "eslint-plugin-cypress": "^2.11.2",
+    "eslint-plugin-html": "^7.1.0",
+    "eslint-plugin-import": "^2.22.1",
+    "eslint-plugin-jest": "^24.3.2",
+    "eslint-plugin-prettier": "^3.3.1",
+    "eslint-plugin-simple-import-sort": "^7.0.0",
+    "jest": "^29.0.3",
+    "prettier": "^2.7.1",
+    "ts-jest": "^29.0.0",
+    "typescript": "^4.8.3",
+    "vite": "^3.1.2",
+    "vue-tsc": "^0.38.9"
+  },
+  "dependencies": {
+    "lkt-events": "^1.0.2",
+    "lkt-string-tools": "^1.0.3",
+    "lkt-ts-interfaces": "^1.0.2",
+    "vue": "^3.3",
+    "vuedraggable": "^4.1.0"
+  },
+  "engines": {
+    "node": ">=18"
+  }
+}

package/src/components/LktHiddenRow.vue

@@ -0,0 +1,59 @@
+<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";
+
+const emit = defineEmits(['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},
+    item: {type: Object as PropType<any>, default: () => ({})},
+});
+
+const onClick = ($event: any, item: any, column: LktTableColumn) => {
+    emit('click', $event, createLktEvent('', {item, column}))
+};
+</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>
+                            {{ getColumnDisplayContent(column, item, i) }}
+                        </template>
+                    </td>
+                </tr>
+            </table>
+        </td>
+    </tr>
+</template>

package/src/components/LktTableRow.vue

@@ -0,0 +1,60 @@
+<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";
+
+const emit = defineEmits(['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 onClick = ($event: any, item: any, column: LktTableColumn) => {
+    emit('click', $event, createLktEvent('', {item, column}))
+};
+const onShow = ($event: any, i: any) => {
+    emit('show', $event, createLktEvent('', {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">
+                    {{ getColumnDisplayContent(column, item, i) }}
+                </template>
+            </td>
+        </template>
+    </tr>
+
+</template>

package/src/index.ts

@@ -0,0 +1,13 @@
+/* eslint-disable import/prefer-default-export */
+import {default as table} from "./lib-components/LktTable.vue";
+import {App} from "vue";
+
+export {createColumn, createHiddenColumn} from "./functions/table-functions";
+
+const LktTable = {
+    install: (app: App) => {
+        app.component('lkt-table', table);
+    },
+};
+
+export default LktTable;

package/src/lib-components/LktTable.vue

@@ -0,0 +1,260 @@
+<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];
+    }
+
+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"
+            >
+                <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>