lkt-table 2.0.6 → 2.0.8

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

@@ -0,0 +1,14 @@
+import { ButtonConfig, LktObject } from "lkt-vue-kernel";
+type __VLS_Props = {
+    config: ButtonConfig;
+    item: LktObject;
+    disabled?: boolean;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    click: (...args: any[]) => void;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onClick?: ((...args: any[]) => any) | undefined;
+}>, {
+    disabled: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

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

@@ -0,0 +1,14 @@
+import { ButtonConfig, LktObject } from "lkt-vue-kernel";
+type __VLS_Props = {
+    config: ButtonConfig;
+    item: LktObject;
+    disabled?: boolean;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    click: (...args: any[]) => void;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onClick?: ((...args: any[]) => any) | undefined;
+}>, {
+    disabled: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

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

@@ -1,7 +1,7 @@
 import { canRenderColumn, colPreferSlot, getColumnClasses, getColumnDisplayContent, getHorizontalColSpan } from "../functions/table-functions";
 import LktTableCell from "./LktTableCell.vue";
-import DropButton from "./DropButton.vue";
-import EditButton from "./EditButton.vue";
+import DropButtonComponent from "./DropButtonComponent.vue";
+import EditButtonComponent from "./EditButtonComponent.vue";
 import { ButtonConfig, Column, LktObject, ValidTableRowTypeValue } from "lkt-vue-kernel";
 declare const slots: Readonly<{
     [name: string]: import("vue").Slot<any> | undefined;
@@ -33,24 +33,24 @@ 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 __VLS_ctx: InstanceType<__VLS_PickNotAny<typeof __VLS_self, new () => {}>>;
-declare var __VLS_24: `item-${number}`, __VLS_25: {
+declare var __VLS_26: `item-${number}`, __VLS_27: {
     item: LktObject;
     index: number;
-}, __VLS_27: {
+}, __VLS_29: {
     item: LktObject;
     index: number;
-}, __VLS_30: string, __VLS_31: {
+}, __VLS_32: string, __VLS_33: {
     value: any;
     item: LktObject;
     column: Column;
     i: number;
 };
 type __VLS_Slots = __VLS_PrettifyGlobal<__VLS_OmitStringIndex<typeof __VLS_ctx.$slots> & {
-    [K in NonNullable<typeof __VLS_24>]?: (props: typeof __VLS_25) => any;
+    [K in NonNullable<typeof __VLS_26>]?: (props: typeof __VLS_27) => any;
 } & {
-    [K in NonNullable<typeof __VLS_30>]?: (props: typeof __VLS_31) => any;
+    [K in NonNullable<typeof __VLS_32>]?: (props: typeof __VLS_33) => any;
 } & {
-    item?: (props: typeof __VLS_27) => any;
+    item?: (props: typeof __VLS_29) => any;
 }>;
 declare const __VLS_self: import("vue").DefineComponent<__VLS_Props, {
     canRenderColumn: typeof canRenderColumn;
@@ -59,8 +59,8 @@ declare const __VLS_self: import("vue").DefineComponent<__VLS_Props, {
     getColumnDisplayContent: typeof getColumnDisplayContent;
     getHorizontalColSpan: typeof getHorizontalColSpan;
     LktTableCell: typeof LktTableCell;
-    DropButton: typeof DropButton;
-    EditButton: typeof EditButton;
+    DropButtonComponent: typeof DropButtonComponent;
+    EditButtonComponent: typeof EditButtonComponent;
     slots: typeof slots;
     Item: typeof Item;
     canCustomItem: typeof canCustomItem;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lkt-table",
-  "version": "2.0.6",
+  "version": "2.0.8",
   "description": "",
   "keywords": [
     "lkt",
@@ -50,17 +50,18 @@
     "sortablejs": "^1.15.6"
   },
   "peerDependencies": {
-    "lkt-button": "^2.0.7",
+    "lkt-button": "^2.0.8",
     "lkt-data-state": "^1.0.11",
     "lkt-date-tools": "^1.0.4",
-    "lkt-field": "^1.0.0",
+    "lkt-field": "^1.2.1",
     "lkt-http-client": "^1.0.34",
-    "lkt-i18n": "^1.0.6",
+    "lkt-i18n": "^1.1.0",
     "lkt-loader": "^1.2.0",
-    "lkt-paginator": "^1.3.3",
+    "lkt-paginator": "^1.4.1",
     "lkt-string-tools": "^1.1.0",
-    "lkt-vue-kernel": "^1.0.35",
+    "lkt-vue-kernel": "^1.0.42",
     "vue": "^3.3",
-    "vue-router": "^4.2.5"
+    "vue-router": "^4.2.5",
+    "vue3-carousel": "^0.14.0"
   }
 }

package/src/components/CreateButton.vue

@@ -3,7 +3,10 @@ import {computed} from "vue";
 import {Settings} from "../settings/Settings";
 import {ButtonConfig, LktObject} from "lkt-vue-kernel";
 
-const emit = defineEmits(['click', 'append']);
+const emit = defineEmits([
+    'click',
+    'append'
+]);
 
 const props = withDefaults(defineProps<{
     config?: ButtonConfig

package/src/components/{DropButton.vue → DropButtonComponent.vue}

@@ -1,12 +1,15 @@
 <script setup lang="ts">
 import {computed} from "vue";
 import {Settings} from "../settings/Settings";
-import {ButtonConfig} from "lkt-vue-kernel";
+import {ButtonConfig, LktObject, prepareResourceData} from "lkt-vue-kernel";
 
-const emit = defineEmits(['click']);
+const emit = defineEmits([
+    'click'
+]);
 
 const props = withDefaults(defineProps<{
-    config?: ButtonConfig
+    config: ButtonConfig
+    item: LktObject
     disabled?: boolean
 }>(), {
     disabled: false,
@@ -14,19 +17,21 @@ const props = withDefaults(defineProps<{
 
 const hasButtonSlot = computed(() => Settings.dropButtonSlot !== ''),
     buttonSlot = computed(() => Settings.dropButtonSlot);
+
+const computedResourceData = computed(() => {
+    return prepareResourceData(props.config.resourceData, props.item);
+})
 </script>
 
 <template>
     <lkt-button
         palette="table-delete"
         v-bind="props.config"
-        :icon="hasButtonSlot ? '' : config?.icon"
-        :text="hasButtonSlot ? '' : config?.text"
         :disabled="disabled"
-        @click.prevent.stop="emit('click')">
+        :resource-data="computedResourceData"
+        @click.prevent.stop="emit('click', $event)">
         <template v-if="hasButtonSlot">
-            <component
-                :is="buttonSlot"/>
+            <component :is="buttonSlot"/>
         </template>
     </lkt-button>
 </template>

package/src/components/{EditButton.vue → EditButtonComponent.vue}

@@ -1,32 +1,37 @@
 <script setup lang="ts">
 import {computed} from "vue";
 import {Settings} from "../settings/Settings";
-import {ButtonConfig} from "lkt-vue-kernel";
+import {ButtonConfig, LktObject, prepareResourceData} from "lkt-vue-kernel";
 
-const emit = defineEmits(['click']);
+const emit = defineEmits([
+    'click'
+]);
 
 const props = withDefaults(defineProps<{
-    config?: ButtonConfig
+    config: ButtonConfig
+    item: LktObject
     disabled?: boolean
 }>(), {
     disabled: false,
 });
 
 const hasButtonSlot = computed(() => Settings.editButtonSlot !== ''),
-    buttonSlot = computed(() => Settings.editButtonSlot)
+    buttonSlot = computed(() => Settings.editButtonSlot);
+
+const computedResourceData = computed(() => {
+    return prepareResourceData(props.config.resourceData, props.item);
+})
 </script>
 
 <template>
     <lkt-button
-        palette="table-delete"
+        palette="table-edit"
         v-bind="props.config"
-        :icon="hasButtonSlot ? '' : config?.icon"
-        :text="hasButtonSlot ? '' : config?.text"
         :disabled="disabled"
+        :resource-data="computedResourceData"
         @click.prevent.stop="emit('click')">
         <template v-if="hasButtonSlot">
-            <component
-                :is="buttonSlot"/>
+            <component :is="buttonSlot"/>
         </template>
     </lkt-button>
 </template>

package/src/components/LktHiddenRow.vue

@@ -4,7 +4,10 @@ import LktTableCell from "./LktTableCell.vue";
 import {ref, watch} from "vue";
 import {LktObject, Column} from "lkt-vue-kernel";
 
-const emit = defineEmits(['update:modelValue', 'click']);
+const emit = defineEmits([
+    'update:modelValue',
+    'click'
+]);
 
 const props = withDefaults(defineProps<{
     modelValue: LktObject

package/src/components/LktTableCell.vue

@@ -3,7 +3,9 @@ import {getColumnDisplayContent} from "../functions/table-functions";
 import {computed, ref, watch} from "vue";
 import {Column, ColumnType, LktObject} from "lkt-vue-kernel";
 
-const emit = defineEmits(['update:modelValue']);
+const emit = defineEmits([
+    'update:modelValue'
+]);
 
 const props = withDefaults(defineProps<{
     modelValue: LktObject

package/src/components/LktTableRow.vue

@@ -9,13 +9,20 @@ import {
 import LktTableCell from "./LktTableCell.vue";
 import {computed, ref, useSlots, watch} from "vue";
 import {Settings} from "../settings/Settings";
-import DropButton from "./DropButton.vue";
-import EditButton from "./EditButton.vue";
+import DropButtonComponent from "./DropButtonComponent.vue";
+import EditButtonComponent from "./EditButtonComponent.vue";
 import {replaceAll} from "lkt-string-tools";
 import {ButtonConfig, Column, LktObject, TableRowType, ValidTableRowTypeValue} from "lkt-vue-kernel";
 
 const slots = useSlots();
-const emit = defineEmits(['update:modelValue', 'click', 'show', 'item-up', 'item-down', 'item-drop']);
+const emit = defineEmits([
+    'update:modelValue',
+    'click',
+    'show',
+    'item-up',
+    'item-down',
+    'item-drop'
+]);
 
 const props = withDefaults(defineProps<{
     modelValue: LktObject
@@ -148,8 +155,8 @@ const canRenderDragIndicator = computed(() => {
             </div>
         </td>
         <td v-if="displayHiddenColumnsIndicator"
-            v-on:click="onShow($event, i)" data-role="show-more"
-            v-bind:class="hiddenIsVisible ? 'state-open' : ''"/>
+            @click="onShow($event, i)" data-role="show-more"
+            :class="hiddenIsVisible ? 'state-open' : ''"/>
         <template v-if="canCustomItem && slots[`item-${i}`]">
             <td :key="'td' + i" :colspan="visibleColumns.length">
                 <slot
@@ -173,7 +180,7 @@ const canRenderDragIndicator = computed(() => {
                 :colspan="getHorizontalColSpan(column,Item)"
                 :title="getColumnDisplayContent (column, Item, i, visibleColumns)"
                 :class="getColumnClasses(column)"
-                v-on:click="onClick($event)"
+                @click="onClick($event)"
             >
                 <template v-if="!!$slots[column.key] && colPreferSlot(column, Item)">
                     <slot :name="column.key"
@@ -194,13 +201,15 @@ const canRenderDragIndicator = computed(() => {
             </td>
         </template>
         <td v-if="canDrop && editModeEnabled" class="lkt-table-col-drop">
-            <drop-button
+            <drop-button-component
                 :config="dropButton"
+                :item="Item"
                 @click="onClickDrop"/>
         </td>
         <td v-if="canEdit && editModeEnabled" class="lkt-table-col-edit">
-            <edit-button
+            <edit-button-component
                 :config="editButton"
+                :item="Item"
                 @click="onClickEdit"/>
         </td>
     </tr>

package/src/components/TableHeader.vue

@@ -3,7 +3,9 @@ import {getColumnClasses, getVerticalColSpan} from "../functions/table-functions
 import {Column, extractI18nValue, LktObject, LktSettings, SortDirection} from "lkt-vue-kernel";
 import {computed} from "vue";
 
-const emit = defineEmits(['click']);
+const emit = defineEmits([
+    'click'
+]);
 
 const props = withDefaults(defineProps<{
     column: Column,

package/src/lib-components/LktTable.vue

@@ -1,4 +1,5 @@
 <script lang="ts" setup>
+import {Carousel, Slide, Navigation, Pagination} 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";
@@ -68,12 +69,14 @@ const Page = ref(props.paginator?.modelValue),
     dataState = ref(<DataState>new DataState({items: Items.value}, props.dataStateConfig)),
     editModeEnabled = ref(props.editMode),
     updateTimeStamp = ref(0),
-    sortableContainer = ref(<HTMLElement | null>null)
+    sortableContainer = ref(<HTMLElement | null>null),
+    currentSlide = ref(1)
 ;
 
 const safeSaveButton = ref(ensureButtonConfig(props.saveButton, LktSettings.defaultSaveButton));
 const safeCreateButton = ref(ensureButtonConfig(props.createButton, LktSettings.defaultCreateButton));
 const safeEditModeButton = ref(ensureButtonConfig(props.editModeButton, LktSettings.defaultEditModeButton));
+const safeDropModeButton = ref(ensureButtonConfig(props.dropButton, LktSettings.defaultDropButton));
 
 const dataStateChanged = ref(false);
 
@@ -155,6 +158,11 @@ const emptyColumns = computed(() => {
         for (let k in slots) if (columnKeys.value.indexOf(k) !== -1) r.push(k);
         return r;
     }),
+    slides = computed((): LktObject => {
+        let r = [];
+        for (let k in slots) if (k.indexOf('slide-') !== -1) r.push(k);
+        return r;
+    }),
     showSaveButton = computed(() => {
         if (props.hiddenSave) return false;
         if (isLoading.value) return false;
@@ -515,9 +523,9 @@ const hasEmptySlot = computed(() => {
                     v-bind="safeSaveButton"
                     :disabled="saveIsDisabled"
                     :modal-data="computedSaveResourceData"
-                    v-on:loading="onButtonLoading"
-                    v-on:loaded="onButtonLoaded"
-                    v-on:click="onSave">
+                    @loading="onButtonLoading"
+                    @loaded="onButtonLoaded"
+                    @click="onSave">
                     <slot v-if="!!slots['button-save']"
                           name="button-save"
                           :items="Items"
@@ -598,7 +606,7 @@ const hasEmptySlot = computed(() => {
                         v-show="canDisplayItem(Items[i], i)"
                         :key="getRowKey(item, i)"
                         :i="i"
-                        :drop-button="dropButton"
+                        :drop-button="safeDropModeButton"
                         :edit-button="editButton"
                         :display-hidden-columns-indicator="displayHiddenColumnsIndicator"
                         :is-draggable="isDraggable(item)"
@@ -615,11 +623,11 @@ const hasEmptySlot = computed(() => {
                         :row-display-type="rowDisplayType"
                         :render-drag="computedRenderDrag"
                         :disabled-drag="computedDisabledDrag"
-                        v-on:click="onClick"
-                        v-on:show="show"
-                        v-on:item-up="onItemUp"
-                        v-on:item-down="onItemDown"
-                        v-on:item-drop="onItemDrop"
+                        @click="onClick"
+                        @show="show"
+                        @item-up="onItemUp"
+                        @item-down="onItemDown"
+                        @item-drop="onItemDrop"
                     >
                         <template v-if="slots[`item-${i}`]" v-slot:[`item-${i}`]="row">
                             <slot
@@ -661,8 +669,8 @@ const hasEmptySlot = computed(() => {
                         :hidden-is-visible="isVisible(i)"
                         :edit-mode-enabled="editModeEnabled"
                         :has-inline-edit-perm="hasInlineEditPerm"
-                        v-on:click="onClick"
-                        v-on:show="show"
+                        @click="onClick"
+                        @show="show"
                     >
                         <template
                             v-for="column in colSlots"
@@ -724,6 +732,48 @@ const hasEmptySlot = computed(() => {
                         </li>
                     </template>
                 </component>
+
+                <div v-else-if="type === TableType.Carousel"
+                     ref="tableBody"
+                     :id="'lkt-table-body-' + uniqueId"
+                     class="lkt-table-items-container"
+                     :class="itemsContainerClass">
+                    <carousel
+                        v-model="currentSlide"
+                        v-bind="carousel"
+                    >
+                        <template v-for="(slide, i) in slides" :key="slide">
+                            <slide :index="i">
+                                <div class="lkt-carousel-slide">
+                                    <slot :name="slide"/>
+                                </div>
+                            </slide>
+                        </template>
+
+                        <template v-for="(item, i) in Items" :key="slide">
+                            <slide :index="i">
+                                <div class="lkt-carousel-slide">
+                                    <slot name="item"
+                                          v-bind:[slotItemVar]="item"
+                                          v-bind:index="i"
+                                          v-bind:editing="editModeEnabled"
+                                          v-bind:can-create="hasCreatePerm"
+                                          v-bind:can-read="hasReadPerm"
+                                          v-bind:can-update="hasUpdatePerm"
+                                          v-bind:can-drop="hasDropPerm"
+                                          v-bind:is-loading="isLoading"
+                                          v-bind:do-drop="() => onItemDrop(i)"
+                                    />
+                                </div>
+                            </slide>
+                        </template>
+
+                        <template #addons>
+                            <Navigation />
+                            <Pagination />
+                        </template>
+                    </carousel>
+                </div>
             </div>
 
             <div class="lkt-table-empty" v-if="!isLoading && Items.length === 0">