lkt-table 2.0.13 → 2.0.15

package/dist/components/LktTableRow.vue.d.ts

@@ -14,10 +14,13 @@ type __VLS_Props = {
     sortable: boolean;
     displayHiddenColumnsIndicator: boolean;
     hiddenIsVisible: boolean;
+    isLoading: boolean;
     addNavigation: boolean;
     latestRow: boolean;
     canDrop: boolean;
     canEdit: boolean;
+    canCreate: boolean;
+    canRead: boolean;
     editModeEnabled: boolean;
     hasInlineEditPerm: boolean;
     i: number;
@@ -30,15 +33,29 @@ type __VLS_Props = {
 declare const Item: import("vue").Ref<LktObject, LktObject>;
 declare const canCustomItem: boolean;
 declare const canItem: boolean;
-declare const onClick: ($event: any) => void, onShow: ($event: any, i: any) => void, classes: import("vue").ComputedRef<string>, hasNavButtonSlot: import("vue").ComputedRef<boolean>, navButtonSlot: import("vue").ComputedRef<string | import("vue").Component>, onClickUp: () => void, onClickDown: () => void, onClickDrop: () => void, onClickEdit: () => void;
-declare const canRenderDragIndicator: import("vue").ComputedRef<any>;
+declare const onClick: ($event: any) => void, onShow: ($event: any, i: any) => void, classes: import("vue").ComputedRef<string>, hasNavButtonSlot: import("vue").ComputedRef<boolean>, navButtonSlot: import("vue").ComputedRef<string | import("vue").Component>, onClickUp: () => void, onClickDown: () => void, onClickDrop: () => void;
+declare const canRenderDragIndicator: import("vue").ComputedRef<any>, computedDragIndicatorRole: import("vue").ComputedRef<"drag-indicator" | "invalid-drag-indicator">;
 declare const __VLS_ctx: InstanceType<__VLS_PickNotAny<typeof __VLS_self, new () => {}>>;
 declare var __VLS_26: `item-${number}`, __VLS_27: {
     item: LktObject;
     index: number;
+    editing: boolean;
+    canCreate: boolean;
+    canRead: boolean;
+    canUpdate: boolean;
+    canDrop: boolean;
+    isLoading: boolean;
+    doDrop: () => void;
 }, __VLS_29: {
     item: LktObject;
     index: number;
+    editing: boolean;
+    canCreate: boolean;
+    canRead: boolean;
+    canUpdate: boolean;
+    canDrop: boolean;
+    isLoading: boolean;
+    doDrop: () => void;
 }, __VLS_32: string, __VLS_33: {
     value: any;
     item: LktObject;
@@ -73,8 +90,8 @@ declare const __VLS_self: import("vue").DefineComponent<__VLS_Props, {
     onClickUp: typeof onClickUp;
     onClickDown: typeof onClickDown;
     onClickDrop: typeof onClickDrop;
-    onClickEdit: typeof onClickEdit;
     canRenderDragIndicator: typeof canRenderDragIndicator;
+    computedDragIndicatorRole: typeof computedDragIndicatorRole;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (...args: any[]) => void;
     click: (...args: any[]) => void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lkt-table",
-  "version": "2.0.13",
+  "version": "2.0.15",
   "description": "",
   "keywords": [
     "lkt",
@@ -50,16 +50,16 @@
     "sortablejs": "^1.15.6"
   },
   "peerDependencies": {
-    "lkt-button": "^2.0.9",
+    "lkt-button": "^2.0.12",
     "lkt-data-state": "^1.0.11",
     "lkt-date-tools": "^1.0.4",
-    "lkt-field": "^1.2.3",
+    "lkt-field": "^1.2.6",
     "lkt-http-client": "^1.0.34",
     "lkt-i18n": "^1.1.0",
     "lkt-loader": "^1.2.0",
     "lkt-paginator": "^1.4.1",
     "lkt-string-tools": "^1.1.0",
-    "lkt-vue-kernel": "^1.0.44",
+    "lkt-vue-kernel": "^1.0.51",
     "vue": "^3.3",
     "vue-router": "^4.2.5",
     "vue3-carousel": "^0.14.0"

package/src/components/LktTableRow.vue

@@ -32,10 +32,13 @@ const props = withDefaults(defineProps<{
     sortable: boolean
     displayHiddenColumnsIndicator: boolean
     hiddenIsVisible: boolean
+    isLoading: boolean
     addNavigation: boolean
     latestRow: boolean
     canDrop: boolean
     canEdit: boolean
+    canCreate: boolean
+    canRead: boolean
     editModeEnabled: boolean
     hasInlineEditPerm: boolean
     i: number
@@ -104,10 +107,6 @@ const onClick = ($event: any) => emit('click', $event),
     },
     onClickDrop = () => {
         emit('item-drop', props.i);
-    },
-    onClickEdit = () => {
-
-        // emit('item-drop', props.i);
     };
 
 watch(() => props.modelValue, (v) => Item.value = v);
@@ -122,16 +121,17 @@ const canRenderDragIndicator = computed(() => {
     computedDisabledDrag = computed(() => {
         if (typeof props.disabledDrag === 'function') return props.disabledDrag(Item.value);
         return props.disabledDrag === true;
+    }),
+    computedDragIndicatorRole = computed(() => {
+        if (classes.value.includes('handle')) return 'drag-indicator';
+        return 'invalid-drag-indicator';
     })
 </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" :data-i="i">
-            <i class="lkt-icn-drag-indicator"/>
-        </td>
-        <td v-else-if="sortable && editModeEnabled && canRenderDragIndicator" data-role="invalid-drag-indicator">
+        <td v-if="sortable && editModeEnabled && canRenderDragIndicator"
+            :data-role="computedDragIndicatorRole" :class="classes" :data-i="i">
             <i class="lkt-icn-drag-indicator"/>
         </td>
         <td v-if="addNavigation && editModeEnabled" class="lkt-table-nav-cell">
@@ -143,7 +143,7 @@ const canRenderDragIndicator = computed(() => {
                             direction="up"/>
                     </template>
                     <template v-else>
-                        <i class=""/> UP
+                        <i class="lkt-icn-arrow-top"/>
                     </template>
                 </lkt-button>
                 <lkt-button palette="table-nav" :disabled="latestRow" @click="onClickDown">
@@ -153,7 +153,7 @@ const canRenderDragIndicator = computed(() => {
                             direction="down"/>
                     </template>
                     <template v-else>
-                        <i class=""/> DOWN
+                        <i class="lkt-icn-arrow-bottom"/>
                     </template>
                 </lkt-button>
             </div>
@@ -166,7 +166,15 @@ const canRenderDragIndicator = computed(() => {
                 <slot
                     :name="`item-${i}`"
                     :item="Item"
-                    v-bind:index="i"/>
+                    v-bind:index="i"
+                    v-bind:editing="editModeEnabled"
+                    v-bind:can-create="canCreate"
+                    v-bind:can-read="canRead"
+                    v-bind:can-update="canEdit"
+                    v-bind:can-drop="canDrop"
+                    v-bind:is-loading="isLoading"
+                    v-bind:do-drop="() => onClickDrop()"
+                />
             </td>
         </template>
         <template v-else-if="canItem && slots.item">
@@ -174,7 +182,15 @@ const canRenderDragIndicator = computed(() => {
                 <slot
                     name="item"
                     :item="Item"
-                    v-bind:index="i"/>
+                    v-bind:index="i"
+                    v-bind:editing="editModeEnabled"
+                    v-bind:can-create="canCreate"
+                    v-bind:can-read="canRead"
+                    v-bind:can-update="canEdit"
+                    v-bind:can-drop="canDrop"
+                    v-bind:is-loading="isLoading"
+                    v-bind:do-drop="() => onClickDrop()"
+                />
             </td>
         </template>
         <template v-else v-for="column in visibleColumns">
@@ -191,7 +207,8 @@ const canRenderDragIndicator = computed(() => {
                           :value="Item[column.key]"
                           :item="Item"
                           :column="column"
-                          :i="i"/>
+                          :i="i"
+                    />
                 </template>
                 <template v-else-if="Item">
                     <lkt-table-cell
@@ -200,7 +217,8 @@ const canRenderDragIndicator = computed(() => {
                         :columns="visibleColumns"
                         :edit-mode-enabled="editModeEnabled"
                         :has-inline-edit-perm="hasInlineEditPerm"
-                        :i="i"/>
+                        :i="i"
+                    />
                 </template>
             </td>
         </template>
@@ -213,8 +231,7 @@ const canRenderDragIndicator = computed(() => {
         <td v-if="canEdit && editModeEnabled" class="lkt-table-col-edit">
             <edit-button-component
                 :config="editButton"
-                :item="Item"
-                @click="onClickEdit"/>
+                :item="Item"/>
         </td>
     </tr>
 </template>

package/src/lib-components/LktTable.vue

@@ -1,9 +1,10 @@
 <script lang="ts" setup>
-import {Carousel, Slide, Navigation, Pagination} from "vue3-carousel";
+import {Carousel, Navigation, Pagination, Slide} from "vue3-carousel";
 import {defaultTableSorter, getColumnByKey, getDefaultSortColumn} from "../functions/table-functions";
 import LktTableRow from "../components/LktTableRow.vue";
 import {computed, nextTick, onMounted, ref, useSlots, watch} from "vue";
 import {
+    ButtonConfig,
     ButtonType,
     Column,
     ensureButtonConfig,
@@ -78,6 +79,11 @@ const safeCreateButton = ref(ensureButtonConfig(props.createButton, LktSettings.
 const safeEditModeButton = ref(ensureButtonConfig(props.editModeButton, LktSettings.defaultEditModeButton));
 const safeDropModeButton = ref(ensureButtonConfig(props.dropButton, LktSettings.defaultDropButton));
 
+watch(() => props.saveButton, (v) => safeSaveButton.value = ensureButtonConfig(props.saveButton, LktSettings.defaultSaveButton));
+watch(() => props.createButton, (v) => safeCreateButton.value = ensureButtonConfig(props.createButton, LktSettings.defaultCreateButton));
+watch(() => props.editModeButton, (v) => safeEditModeButton.value = ensureButtonConfig(props.editModeButton, LktSettings.defaultEditModeButton));
+watch(() => props.dropButton, (v) => safeDropModeButton.value = ensureButtonConfig(props.dropButton, LktSettings.defaultDropButton));
+
 const dataStateChanged = ref(false);
 
 watch(isLoading, v => emit('update:loading', v));
@@ -521,14 +527,16 @@ const hasEmptySlot = computed(() => {
         >
             <div
                 class="lkt-table-page-buttons"
-                v-if="showEditionButtons">
+                v-show="showEditionButtons">
                 <lkt-button
                     class="lkt-table--save-button"
                     ref="saveButtonRef"
                     v-show="showSaveButton"
-                    v-bind="safeSaveButton"
-                    :disabled="saveIsDisabled"
-                    :modal-data="computedSaveResourceData"
+                    v-bind="<ButtonConfig>{
+                        ...safeSaveButton,
+                        disabled: saveIsDisabled,
+                        resourceData: computedSaveResourceData
+                    }"
                     @loading="onButtonLoading"
                     @loaded="onButtonLoaded"
                     @click="onSave">
@@ -544,7 +552,8 @@ const hasEmptySlot = computed(() => {
                               :do-root-click="doRootClick"
                               :data-state="dataState"
                               :on-button-loading="onButtonLoading"
-                              :on-button-loaded="onButtonLoaded"/>
+                              :on-button-loaded="onButtonLoaded"
+                        />
                     </template>
                 </lkt-button>
 
@@ -557,10 +566,10 @@ const hasEmptySlot = computed(() => {
                 />
 
                 <div class="switch-edition-mode">
-                    <lkt-field
+                    <lkt-button
                         v-bind="safeEditModeButton"
                         v-show="showSwitchButton"
-                        v-model="editModeEnabled"/>
+                        v-model:checked="editModeEnabled"/>
                 </div>
             </div>
 
@@ -625,11 +634,14 @@ const hasEmptySlot = computed(() => {
                         :latest-row="i+1 === amountOfItems"
                         :can-drop="hasDropPerm && editModeEnabled"
                         :can-edit="hasEditPerm && hasUpdatePerm && editModeEnabled"
+                        :can-read="hasReadPerm"
+                        :can-create="hasCreatePerm"
                         :edit-mode-enabled="editModeEnabled"
                         :has-inline-edit-perm="hasInlineEditPerm"
                         :row-display-type="rowDisplayType"
                         :render-drag="computedRenderDrag"
                         :disabled-drag="computedDisabledDrag"
+                        :is-loading="isLoading"
                         @click="onClick"
                         @show="show"
                         @item-up="onItemUp"
@@ -641,6 +653,13 @@ const hasEmptySlot = computed(() => {
                                 :name="`item-${i}`"
                                 :[slotItemVar]="row.item"
                                 v-bind:index="i"
+                                v-bind:editing="row.editing"
+                                v-bind:can-create="row.canCreate"
+                                v-bind:can-read="row.canRead"
+                                v-bind:can-update="row.canUpdate"
+                                v-bind:can-drop="row.canDrop"
+                                v-bind:is-loading="row.isLoading"
+                                v-bind:do-drop="row.doDrop"
                             />
                         </template>
                         <template v-else-if="slots.item" #item="row">
@@ -648,6 +667,13 @@ const hasEmptySlot = computed(() => {
                                 name="item"
                                 :[slotItemVar]="row.item"
                                 v-bind:index="i"
+                                v-bind:editing="row.editing"
+                                v-bind:can-create="row.canCreate"
+                                v-bind:can-read="row.canRead"
+                                v-bind:can-update="row.canUpdate"
+                                v-bind:can-drop="row.canDrop"
+                                v-bind:is-loading="row.isLoading"
+                                v-bind:do-drop="row.doDrop"
                             />
                         </template>
                         <template