lkt-table 1.2.0 → 1.2.1

package/dist/style.css

@@ -1 +1 @@
-.lkt-table-page,.lkt-table-page-content-wrapper{display:flex;width:100%;flex-direction:column;gap:var(--lkt-table-page-gap)}.lkt-table{width:var(--lkt-table-width);overflow-x:auto;font-family:var(--lkt-table-font-family),serif}.lkt-table>table{width:100%;max-width:100%;border-collapse:separate;border-radius:var(--lkt-table-border-radius);border-spacing:0}.lkt-table th,.lkt-table td{vertical-align:middle;text-align:var(--lkt-table-text-align);padding:var(--lkt-table-padding-row);font-size:var(--lkt-table-font-size-row);color:var(--lkt-table-color-row)}.lkt-table th{font-family:var(--lkt-table-font-family-header),serif;padding:var(--lkt-table-padding-header)}.lkt-table thead tr{background-color:var(--lkt-table-bg-header)}.lkt-table tbody tr{background-color:var(--lkt-table-bg-row)}.lkt-table tbody tr:nth-child(odd){background-color:var(--lkt-table-bg-row-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(--lkt-table-font-family-sort-icon),serif;display:inline-block;font-size:var(--lkt-table-font-size-sort-icon)}.lkt-table [data-sort=asc]>div:after{content:var(--lkt-table-sort-icon-content-asc)}.lkt-table [data-sort=desc]>div:after{content:var(--lkt-table-sort-icon-content-desc)}.lkt-table td[data-role=drag-indicator],.lkt-table td[data-role=invalid-drag-indicator]{width:var(--lkt-table-width-drag);height:40px;padding:0!important;position:relative;background:#eee;cursor:pointer}.lkt-table td[data-role=drag-indicator]:before,.lkt-table td[data-role=invalid-drag-indicator]:before{content:"";display:block;background:#eee;width:18px;height:36px;margin:auto}.lkt-table td[data-role=drag-indicator]:after,.lkt-table td[data-role=invalid-drag-indicator]:after{content:"…";color:#000;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(--lkt-table-border-radius);width:100%;padding:10px;background-color:#f8f7e5;font-family:var(--lkt-table-font-family);font-size:13px;color:#444;text-align:var(--lkt-table-text-align)}.sortable-chosen{border:var(--lkt-table-border-sortable-chosen)}.sortable-chosen.ghost{background:var(--lkt-table-bg-sortable-chosen-ghost)}.lkt-table td.lkt-table-nav-cell{padding:0}.lkt-table-nav-container{display:flex;align-items:center;flex-direction:column;justify-content:center}.lkt-table-page-buttons{position:sticky;top:calc(-1 * var(--lkt-table-gap-buttons));display:flex;align-items:center;gap:var(--lkt-table-gap-buttons);transition:all linear .15s;background:transparent;z-index:2}.lkt-table-page-buttons-bottom{justify-content:center}.lkt-table-page-buttons>.switch-edition-mode{margin-left:auto}
+.lkt-table-page,.lkt-table-page-content-wrapper{display:flex;width:100%;flex-direction:column;gap:var(--lkt-table-page-gap)}.lkt-table{width:var(--lkt-table-width);overflow-x:auto;font-family:var(--lkt-table-font-family),serif}.lkt-table>table{width:100%;max-width:100%;border-collapse:separate;border-radius:var(--lkt-table-border-radius);border-spacing:0}.lkt-table th,.lkt-table td{vertical-align:middle;text-align:var(--lkt-table-text-align);padding:var(--lkt-table-padding-row);font-size:var(--lkt-table-font-size-row);color:var(--lkt-table-color-row)}.lkt-table th{font-family:var(--lkt-table-font-family-header),serif;padding:var(--lkt-table-padding-header)}.lkt-table thead tr{background-color:var(--lkt-table-bg-header)}.lkt-table tbody tr{background-color:var(--lkt-table-bg-row)}.lkt-table tbody tr:nth-child(odd){background-color:var(--lkt-table-bg-row-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(--lkt-table-font-family-sort-icon),serif;display:inline-block;font-size:var(--lkt-table-font-size-sort-icon)}.lkt-table [data-sort=asc]>div:after{content:var(--lkt-table-sort-icon-content-asc)}.lkt-table [data-sort=desc]>div:after{content:var(--lkt-table-sort-icon-content-desc)}.lkt-table td[data-role=drag-indicator],.lkt-table td[data-role=invalid-drag-indicator]{width:var(--lkt-table-width-drag);height:40px;padding:0!important;position:relative;background:#eee;cursor:pointer}.lkt-table td[data-role=drag-indicator]:before,.lkt-table td[data-role=invalid-drag-indicator]:before{content:"";display:block;background:#eee;width:18px;height:36px;margin:auto}.lkt-table td[data-role=drag-indicator]:after,.lkt-table td[data-role=invalid-drag-indicator]:after{content:"…";color:#000;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(--lkt-table-border-radius);width:100%;padding:10px;background-color:#f8f7e5;font-family:var(--lkt-table-font-family);font-size:13px;color:#444;text-align:var(--lkt-table-text-align)}.sortable-chosen{border:var(--lkt-table-border-sortable-chosen)}.sortable-chosen.ghost{background:var(--lkt-table-bg-sortable-chosen-ghost)}.lkt-table td.lkt-table-nav-cell{padding:0}.lkt-table-nav-container{display:flex;align-items:center;flex-direction:column;justify-content:center}.lkt-table-page-buttons{position:sticky;top:calc(-1 * var(--lkt-table-gap-buttons));display:flex;align-items:center;gap:var(--lkt-table-gap-buttons);transition:all linear .15s;background:transparent;z-index:2}.lkt-table-page-buttons-bottom{justify-content:center}.lkt-table-page-buttons>.switch-edition-mode{margin-left:auto}.lkt-table .lkt-table-col-drop{width:var(--lkt-table-width-col-drop);text-align:var(--lkt-table-text-align-col-drop)}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lkt-table",
-  "version": "1.2.0",
+  "version": "1.2.1",
   "description": "",
   "keywords": [
     "lkt",

package/src/components/DropButton.vue

@@ -2,15 +2,22 @@
 import {computed} from "vue";
 import {Settings} from "../settings/Settings";
 import {__} from "lkt-i18n";
+import {LktObject} from "lkt-ts-interfaces";
 
 const emit = defineEmits(['click']);
 
 const props = withDefaults(defineProps<{
     disabled: boolean
-    text: boolean
+    text: string
+    confirm: string
+    resource: string
+    resourceData: LktObject
 }>(), {
     disabled: false,
     text: '',
+    confirm: '',
+    resource: '',
+    resourceData: () => ({}),
 });
 
 const hasButtonSlot = computed(() => {
@@ -30,6 +37,9 @@ const hasButtonSlot = computed(() => {
 <template>
     <lkt-button
         palette="table-delete"
+        :resource="resource"
+        :resource-data="resourceData"
+        :confirm-modal="confirm"
         :disabled="disabled"
         @click.prevent.stop="emit('click')">
         <template v-if="hasButtonSlot">

package/src/components/LktTableRow.vue

@@ -26,6 +26,7 @@ const props = withDefaults(defineProps<{
     emptyColumns: string[]
     dropConfirm: string
     dropText: string
+    dropResource: string
 }>(), {
     modelValue: () => ({}),
     isDraggable: true,
@@ -41,6 +42,7 @@ const props = withDefaults(defineProps<{
     emptyColumns: () => [],
     dropConfirm: '',
     dropText: '',
+    dropResource: '',
 });
 
 const Item = ref(props.modelValue);
@@ -139,8 +141,11 @@ watch(Item, (v) => {
                 </template>
             </td>
         </template>
-        <td v-if="canDrop && editModeEnabled" class="lkt-table-delete-cell">
+        <td v-if="canDrop && editModeEnabled" class="lkt-table-col-drop">
             <drop-button
+                :resource="dropResource"
+                :resource-data="Item"
+                :confirm="dropConfirm"
                 :text="dropText"
                 @click="onClickDrop"/>
         </td>

package/src/lib-components/LktTable.vue

@@ -111,9 +111,11 @@ const Sorter = ref(typeof props.sorter === 'function' ? props.sorter : defaultTa
     tableBody = ref(null),
     Columns = ref(props.columns);
 
+let basePerms: string[] = [];
 const Page = ref(props.page),
     loading = ref(true),
     firstLoadReady = ref(false),
+    perms = ref(basePerms),
     paginator = ref(null),
     sortableObject = ref({}),
     dataState = ref(new DataState({items: Items.value}, props.dataStateConfig)),
@@ -127,6 +129,9 @@ const onResults = (r: any) => {
         firstLoadReady.value = true;
         dataState.value.store({items: Items.value}).turnStoredIntoOriginal();
     },
+    onPerms = (r: string[]) => {
+        perms.value = r;
+    },
     onLoading = () => nextTick(() => loading.value = true),
     doRefresh = () => {
         //@ts-ignore
@@ -231,7 +236,11 @@ const emptyColumns = computed(() => {
             return __(props.editModeText.substring(3));
         }
         return props.editModeText;
-    });
+    }),
+    hasCreatePerm = computed(() => perms.value.includes('create')),
+    hasReadPerm = computed(() => perms.value.includes('read')),
+    hasUpdatePerm = computed(() => perms.value.includes('update')),
+    hasDropPerm = computed(() => perms.value.includes('drop'));
 
 
 const getItemByEvent = (e: any) => {
@@ -497,7 +506,10 @@ defineExpose({
                                 v-on:click="sort(column)"
                             />
                         </template>
-                        <th v-if="canDrop && editModeEnabled"/>
+                        <th
+                            v-if="canDrop && hasDropPerm && editModeEnabled"
+                            class="lkt-table-col-drop"
+                        />
                     </tr>
                     </thead>
                     <tbody
@@ -517,8 +529,9 @@ defineExpose({
                         :add-navigation="addNavigation"
                         :hidden-is-visible="isVisible(i)"
                         :latest-row="i+1 === amountOfItems"
-                        :can-drop="canDrop"
+                        :can-drop="canDrop && hasDropPerm && editModeEnabled"
                         :drop-confirm="dropConfirm"
+                        :drop-resource="dropResource"
                         :drop-text="dropText"
                         :edit-mode-enabled="editModeEnabled"
                         v-on:click="onClick"
@@ -594,6 +607,7 @@ defineExpose({
                 :filters="filters"
                 v-on:results="onResults"
                 v-on:loading="onLoading"
+                v-on:perms="onPerms"
             />
 
         </component>

package/theme/default.css

@@ -28,4 +28,6 @@
     --lkt-table-bg-sortable-chosen-ghost: #aaaaaa;
 
     --lkt-table-gap-buttons: 15px;
+    --lkt-table-width-col-drop: auto;
+    --lkt-table-text-align-col-drop: right;
 }