lkt-table 1.3.21 → 1.3.23

package/dist/style.css

@@ -1 +1 @@
-.lkt-table-page{display:flex;width:100%;flex-direction:column;gap:var(--lkt-table-page-gap)}.lkt-table-page-content-wrapper{display:grid;width:100%;flex-direction:column;gap:var(--lkt-table-page-gap)}.lkt-table{width:var(--lkt-table-width);font-family:var(--lkt-table-font-family),serif}.lkt-table .lkt-field{--lkt-field-font-size: var(--lkt-table-font-size-row)}.lkt-table>table{width:100%;max-width:100%;border-collapse:var(--lkt-table-border-collapse);border-radius:var(--lkt-table-border-radius);border-spacing:var(--lkt-table-border-spacing)}.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);position:sticky;top:0;z-index:1}.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:#d4d4d4;border-bottom:1px solid #848484;margin:auto;position:absolute;top:0;left:0;height:100%;width:100%}.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:60%;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)}
+.lkt-table-page{display:flex;width:100%;flex-direction:column;gap:var(--lkt-table-page-gap)}.lkt-table-page-content-wrapper{display:grid;width:100%;flex-direction:column;gap:var(--lkt-table-page-gap)}.lkt-table{width:var(--lkt-table-width);font-family:var(--lkt-table-font-family),serif}.lkt-table .lkt-field{--lkt-field-font-size: var(--lkt-table-font-size-row)}.lkt-table>table{width:100%;max-width:100%;border-collapse:var(--lkt-table-border-collapse);border-radius:var(--lkt-table-border-radius);border-spacing:var(--lkt-table-border-spacing)}.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);position:sticky;top:0;z-index:1}.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:#d4d4d4;border-bottom:1px solid #848484;margin:auto;position:absolute;top:0;left:0;height:100%;width:100%}.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:60%;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:6}.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.3.21",
+  "version": "1.3.23",
   "description": "",
   "keywords": [
     "lkt",

package/src/components/LktTableRow.vue

@@ -40,8 +40,9 @@ const props = withDefaults(defineProps<{
     editText: string
     editIcon: string
     editLink: string
-    rowDisplayType: RowDisplayType|Function
-    renderDrag?: boolean
+    rowDisplayType: RowDisplayType | Function
+    renderDrag?: boolean | Function
+    disabledDrag?: boolean | Function
 }>(), {
     modelValue: () => ({}),
     isDraggable: true,
@@ -65,6 +66,7 @@ const props = withDefaults(defineProps<{
     editLink: '',
     rowDisplayType: RowDisplayType.Auto,
     renderDrag: true,
+    disabledDrag: true,
 });
 
 const Item = ref(props.modelValue);
@@ -76,15 +78,20 @@ const canCustomItem = [RowDisplayType.Auto, RowDisplayType.PreferCustomItem].inc
 const canItem = [RowDisplayType.Auto, RowDisplayType.PreferItem].includes(calculatedRowDisplayType);
 
 const parsedEditLink = ref(props.editLink);
-for (let k in Item.value) parsedEditLink.value = replaceAll(parsedEditLink.value, ':'+k , Item.value[k]);
+for (let k in Item.value) parsedEditLink.value = replaceAll(parsedEditLink.value, ':' + k, Item.value[k]);
 
 const onClick = ($event: any) => emit('click', $event),
     onShow = ($event: any, i: any) => {
         emit('show', $event, i)
     },
     classes = computed(() => {
-        let r:string[] = [];
-        if (props.sortable && props.isDraggable) r.push('handle');
+        let r: string[] = [];
+
+        let disabledDrag = false;
+        if (typeof props.disabledDrag === 'function') disabledDrag = props.disabledDrag(Item.value);
+        else disabledDrag = props.disabledDrag === true;
+        if (!disabledDrag && props.sortable && props.isDraggable) r.push('handle');
+        else if (disabledDrag) r.push('disabled');
         return r.join(' ');
     }),
     hasNavButtonSlot = computed(() => {
@@ -113,14 +120,19 @@ watch(Item, (v) => {
 }, {deep: true});
 
 const canRenderDragIndicator = computed(() => {
-    if (typeof props.renderDrag === 'function') return props.renderDrag(Item.value);
-    return props.renderDrag === true;
-})
+        if (typeof props.renderDrag === 'function') return props.renderDrag(Item.value);
+        return props.renderDrag === true;
+    }),
+    computedDisabledDrag = computed(() => {
+        if (typeof props.disabledDrag === 'function') return props.disabledDrag(Item.value);
+        return props.disabledDrag === true;
+    })
 </script>
 
 <template>
     <tr :data-i="i" :data-draggable="isDraggable" :class="{'type-custom-item': canCustomItem, 'type-item': canItem}">
-        <td v-if="sortable && isDraggable && editModeEnabled && canRenderDragIndicator" data-role="drag-indicator" :class="classes" />
+        <td v-if="sortable && isDraggable && editModeEnabled && canRenderDragIndicator"
+            data-role="drag-indicator" :class="classes" :data-i="i"/>
         <td v-else-if="sortable && editModeEnabled && canRenderDragIndicator" data-role="invalid-drag-indicator"/>
         <td v-if="addNavigation && editModeEnabled" class="lkt-table-nav-cell">
             <div class="lkt-table-nav-container">

package/src/lib-components/LktTable.vue

@@ -45,6 +45,7 @@ const props = withDefaults(defineProps<{
     draggableChecker?: Function
     checkValidDrag?: Function
     renderDrag?: boolean|Function
+    disabledDrag?: boolean|Function
     sortable?: boolean
     hideEmptyColumns?: boolean
     initialSorting?: boolean
@@ -74,6 +75,8 @@ const props = withDefaults(defineProps<{
     confirmData?: LktObject
     saveResource?: string
     saveResourceData?: LktObject
+    saveTooltipEngine?: string
+    splitSave?: boolean
     saveText?: string
     createText?: string
     createIcon?: string
@@ -126,6 +129,7 @@ const props = withDefaults(defineProps<{
     wrapContentTag: 'div',
     wrapContentClass: '',
     itemsContainerClass: '',
+    saveTooltipEngine: 'absolute',
     filters: () => [],
     dataStateConfig: () => ({}),
     hiddenSave: false,
@@ -136,6 +140,7 @@ const props = withDefaults(defineProps<{
     confirmData: () => ({}),
     saveResource: '',
     saveResourceData: () => ({}),
+    splitSave: false,
     saveText: 'Save',
     dropText: 'Delete',
     dropIcon: '',
@@ -370,6 +375,9 @@ const getItemByEvent = (e: any) => {
         Hidden.value[k] = typeof Hidden.value[k] === 'undefined' ? true : !Hidden.value[k];
     },
     validDragChecker = (evt: any) => {
+        let targetIndex = parseInt(evt?.originalEvent?.toElement?.closest('tr')?.dataset?.i);
+        if (typeof props.disabledDrag === 'function' && props.disabledDrag(Items.value[targetIndex])) return false;
+        if (typeof props.disabledDrag === 'boolean' && props.disabledDrag) return false;
         if (typeof props.checkValidDrag === 'function') return props.checkValidDrag(evt);
         return true;
     },
@@ -463,7 +471,7 @@ const getItemByEvent = (e: any) => {
                 let newIndex = evt.newIndex;
                 Items.value.splice(newIndex, 0, Items.value.splice(oldIndex, 1)[0]);
                 updateTimeStamp.value = time();
-                emit('drag-end');
+                emit('drag-end', Items.value[newIndex]);
             },
             onMove: function (evt, originalEvent) {
                 return validDragChecker(evt);
@@ -582,6 +590,8 @@ const hasEmptySlot = computed(() => {
                     :confirm-data="confirmData"
                     :resource="saveResource"
                     :resource-data="computedSaveResourceData"
+                    :split="splitSave"
+                    :tooltip-engine="saveTooltipEngine"
                     v-on:loading="onButtonLoading"
                     v-on:loaded="onButtonLoaded"
                     v-on:click="onSave">
@@ -591,6 +601,15 @@ const hasEmptySlot = computed(() => {
                           :edit-mode="editMode"
                           :can-update="!saveDisabled"></slot>
                     <span v-else>{{ computedSaveText }}</span>
+
+                    <template v-slot:split="{doClose, doRootClick}">
+                        <slot name="button-save-split"
+                              :do-close="doClose"
+                              :do-root-click="doRootClick"
+                              :data-state="dataState"
+                              :on-button-loading="onButtonLoading"
+                              :on-button-loaded="onButtonLoaded" />
+                    </template>
                 </lkt-button>
 
                 <create-button
@@ -685,6 +704,7 @@ const hasEmptySlot = computed(() => {
                             :has-inline-edit-perm="hasInlineEditPerm"
                             :row-display-type="rowDisplayType"
                             :render-drag="renderDrag"
+                            :disabled-drag="disabledDrag"
                             v-on:click="onClick"
                             v-on:show="show"
                             v-on:item-up="onItemUp"