lkt-table 2.0.7 → 2.0.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lkt-table",
-  "version": "2.0.7",
+  "version": "2.0.9",
   "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.37",
+    "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/DropButtonComponent.vue

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

package/src/components/EditButtonComponent.vue

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

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

@@ -15,7 +15,14 @@ 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

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,7 +69,8 @@ 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(props.carousel?.currentSlide || 0)
 ;
 
 const safeSaveButton = ref(ensureButtonConfig(props.saveButton, LktSettings.defaultSaveButton));
@@ -156,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;
@@ -725,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">