@katlux/preset-modern 0.1.1-alpha.95 → 0.1.1-alpha.97

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "@katlux/preset-modern",
   "configKey": "katluxTemplateModern",
-  "version": "0.1.1-alpha.95",
+  "version": "0.1.1-alpha.97",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "3.6.1"

package/dist/runtime/components/KDatatable/KDatatable.d.vue.ts

@@ -7,22 +7,33 @@ type __VLS_Props = {
     bulkActions?: Array<IKDatatableAction>;
     selectedRows?: any[];
     selectAll?: boolean;
+    currentPage?: number;
+    pageSize?: number;
     cellSlots?: Record<string, any>;
     headerSlots?: Record<string, any>;
     columnHeaders?: Record<string, string>;
     columnWidths?: Record<string, string>;
     emptyStateText?: string;
     emptyFilterStateText?: string;
+    virtualScroll?: boolean;
+    itemHeight?: number;
+    viewportHeight?: number;
+    buffer?: number;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
     "update:selectedRows": (value: any[]) => any;
     "update:selectAll": (value: boolean) => any;
+    "update:currentPage": (value: number) => any;
+    "update:pageSize": (value: number) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     "onUpdate:selectedRows"?: ((value: any[]) => any) | undefined;
     "onUpdate:selectAll"?: ((value: boolean) => any) | undefined;
+    "onUpdate:currentPage"?: ((value: number) => any) | undefined;
+    "onUpdate:pageSize"?: ((value: number) => any) | undefined;
 }>, {
     selectedRows: any[];
     selectAll: boolean;
+    buffer: number;
     bulkActions: Array<IKDatatableAction>;
     visibleFields: Array<string> | null;
     rowActions: Array<IKDatatableAction>;
@@ -32,6 +43,9 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {
     columnWidths: Record<string, string>;
     emptyStateText: string;
     emptyFilterStateText: string;
+    virtualScroll: boolean;
+    itemHeight: number;
+    viewportHeight: number;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/KDatatable/KDatatable.vue

@@ -1,10 +1,20 @@
 <template lang="pug">
-.k-datatable.modern-datatable(:style="{ '--page-size': dpPageSize || 10 }" role="region" :aria-label="t('Data Table')")
+.k-datatable.modern-datatable(
+	:class="{ 'is-virtual-scroll': props.virtualScroll }"
+	:style="props.virtualScroll ? { ...containerCssVars, '--k-datatable-viewport-height': (props.viewportHeight || 500) + 'px' } : { '--page-size': effectivePageSize }"
+	role="region"
+	:aria-label="t('Data Table')"
+)
 	.header(v-if="props.bulkActions && props.bulkActions.length > 0 && selectedRows.length > 0")
 		.selected-count {{ t('{count} items selected').replace('{count}', (selectedRows?.length || 0).toString()) }}
 		KBulkActions.bulk-actions(:bulkActions="props.bulkActions" :selectedRows="selectedRows" :selectAll="selectAll")
 	
-	.k-datatable-wrapper
+	.k-datatable-wrapper(
+		ref="containerRef"
+		@scroll="props.virtualScroll ? onScroll($event) : undefined"
+		@keydown="handleKeyDown"
+		:tabindex="props.virtualScroll ? 0 : undefined"
+	)
 		.loading-overlay(v-if="isLoading")
 			.spinner
 		
@@ -19,11 +29,21 @@
 					th.actions-cell(v-if="props.rowActions && props.rowActions.length > 0") {{ t('Actions') }}
 			
 			tbody
-				tr.empty-row(v-if="!isLoading && (!pageRows || pageRows.length === 0)")
-					td.empty-state(:colspan="(visibleFields || props.dataProvider.fields || []).length + (props.bulkActions && props.bulkActions.length > 0 ? 1 : 0) + (props.rowActions && props.rowActions.length > 0 ? 1 : 0)")
+				tr.empty-row(v-if="!isLoading && (!datatableItems || datatableItems.length === 0)")
+					td.empty-state(:colspan="totalColspan")
 						span(v-if="dpFilter?.active || props.dataProvider.filter?.value?.active") {{ props.emptyFilterStateText || t('No result found for filter') }}
 						span(v-else) {{ props.emptyStateText || t('No result') }}
-				tr(v-for="(row, index) in pageRows" :key="getRowKey(row, index)" :class="{ 'selected': isRowSelected(row) }")
+				tr.k-virtual-spacer.is-top(
+					v-if="props.virtualScroll && topSpacerHeight > 0"
+					:style="{ '--spacer-height': topSpacerHeight + 'px' }"
+					role="presentation"
+				)
+					td(:colspan="totalColspan")
+				tr(
+					v-for="(row, index) in displayRows"
+					:key="getRowKey(row, index)"
+					:class="{ 'selected': isRowSelected(row), 'active-focus': focusedIndex === (props.virtualScroll ? startIndex + index : index) }"
+				)
 					td.check-cell(v-if="props.bulkActions && props.bulkActions.length > 0")
 						KCheckbox(:value="row" v-model="selectedRows")
 					td(v-for="visibleField in visibleFields || props.dataProvider.fields" :key="visibleField" :data-field="visibleField" :style="getColumnStyle(visibleField)")
@@ -46,16 +66,23 @@
 										template(#icon v-if="rowAction.icon")
 											KIcon(:iconname="rowAction.icon" :width="16" :height="16")
 										template(#default v-if="!rowAction.iconOnly") {{ rowAction.label }}
+				tr.k-virtual-spacer.is-bottom(
+					v-if="props.virtualScroll && bottomSpacerHeight > 0"
+					:style="{ '--spacer-height': bottomSpacerHeight + 'px' }"
+					role="presentation"
+				)
+					td(:colspan="totalColspan")
 
-	.footer
+	.footer(v-if="!props.virtualScroll")
 		KPagination.pagination(:dataProvider="props.dataProvider")
 </template>
 
 <script setup>
-import { computed } from "vue";
+import { ref, computed, isRef } from "vue";
 import { ADataProvider } from "@katlux/providers";
 import { useKatluxI18n } from "#toolkit/composables/useKatluxI18n";
 import { useDataProvider } from "#toolkit/composables/useDataProvider";
+import { useVirtualScroll } from "#toolkit/composables/useVirtualScroll";
 const { t } = useKatluxI18n();
 const props = defineProps({
   dataProvider: { type: Object, required: true },
@@ -64,14 +91,20 @@ const props = defineProps({
   bulkActions: { type: Array, required: false, default: () => [] },
   selectedRows: { type: Array, required: false, default: () => [] },
   selectAll: { type: Boolean, required: false, default: false },
+  currentPage: { type: Number, required: false },
+  pageSize: { type: Number, required: false },
   cellSlots: { type: Object, required: false, default: void 0 },
   headerSlots: { type: Object, required: false, default: void 0 },
   columnHeaders: { type: Object, required: false, default: void 0 },
   columnWidths: { type: Object, required: false, default: void 0 },
   emptyStateText: { type: String, required: false, default: "" },
-  emptyFilterStateText: { type: String, required: false, default: "" }
+  emptyFilterStateText: { type: String, required: false, default: "" },
+  virtualScroll: { type: Boolean, required: false, default: false },
+  itemHeight: { type: Number, required: false, default: 50 },
+  viewportHeight: { type: Number, required: false, default: 500 },
+  buffer: { type: Number, required: false, default: 5 }
 });
-const emit = defineEmits(["update:selectedRows", "update:selectAll"]);
+const emit = defineEmits(["update:selectedRows", "update:selectAll", "update:currentPage", "update:pageSize"]);
 const selectedRows = computed({
   get: () => props.selectedRows || [],
   set: (val) => emit("update:selectedRows", val)
@@ -80,6 +113,10 @@ const selectAll = computed({
   get: () => props.selectAll || false,
   set: (val) => emit("update:selectAll", val)
 });
+const effectivePageSize = computed(() => {
+  const ps = props.pageSize ?? props.dataProvider?.pageSize;
+  return isRef(ps) ? ps.value : ps?.value ?? ps ?? 10;
+});
 const getRowKey = (row, index) => {
   const idKey = props.dataProvider?.idKey || "id";
   if (row && row[idKey] !== void 0 && row[idKey] !== null) {
@@ -116,6 +153,90 @@ const pageRows = computed(() => pageData.value || []);
 const isLoading = computed(() => {
   return dpLoading.value || dpInitialLoad.value || false;
 });
+const datatableItems = computed(() => {
+  const currentRows = pageRows.value;
+  const dp = props.dataProvider;
+  if (props.virtualScroll) {
+    if (Array.isArray(dp?.allVisibleRows)) return dp.allVisibleRows;
+    if (Array.isArray(dp?.allVisibleRows?.value)) return dp.allVisibleRows.value;
+    if (Array.isArray(dp?.allVisibleNodes)) return dp.allVisibleNodes;
+    if (Array.isArray(dp?.allVisibleNodes?.value)) return dp.allVisibleNodes.value;
+    if (Array.isArray(dp?.allData?.value)) return dp.allData.value;
+    if (Array.isArray(dp?.allData)) return dp.allData;
+    if (Array.isArray(dp?.data)) return dp.data;
+  }
+  return currentRows;
+});
+const {
+  visibleItems,
+  startIndex,
+  endIndex,
+  topSpacerHeight,
+  bottomSpacerHeight,
+  containerRef,
+  onScroll,
+  scrollToIndex,
+  containerCssVars
+} = useVirtualScroll({
+  items: datatableItems,
+  itemHeight: props.itemHeight || 50,
+  containerHeight: props.viewportHeight || 500,
+  buffer: props.buffer ?? 5,
+  virtualScroll: computed(() => !!props.virtualScroll),
+  onThresholdReach: () => {
+    const dp = props.dataProvider;
+    if (typeof dp?.loadMore === "function") {
+      dp.loadMore();
+    } else if (typeof dp?.nextPage === "function" && dp.hasMore) {
+      dp.nextPage();
+    }
+  }
+});
+const displayRows = computed(() => {
+  if (props.virtualScroll) {
+    return visibleItems.value;
+  }
+  return pageRows.value;
+});
+const totalColspan = computed(() => {
+  const fieldsCount = (props.visibleFields || props.dataProvider?.fields || []).length;
+  const checkCount = props.bulkActions && props.bulkActions.length > 0 ? 1 : 0;
+  const actionCount = props.rowActions && props.rowActions.length > 0 ? 1 : 0;
+  return fieldsCount + checkCount + actionCount;
+});
+const focusedIndex = ref(-1);
+const handleKeyDown = (e) => {
+  if (!props.virtualScroll) return;
+  const total = datatableItems.value.length;
+  if (total === 0) return;
+  if (e.key === "ArrowDown") {
+    e.preventDefault();
+    focusedIndex.value = Math.min(total - 1, focusedIndex.value + 1);
+    scrollToIndex(focusedIndex.value);
+  } else if (e.key === "ArrowUp") {
+    e.preventDefault();
+    focusedIndex.value = Math.max(0, focusedIndex.value - 1);
+    scrollToIndex(focusedIndex.value);
+  } else if (e.key === "PageDown") {
+    e.preventDefault();
+    const step = Math.floor((props.viewportHeight || 500) / (props.itemHeight || 50));
+    focusedIndex.value = Math.min(total - 1, focusedIndex.value + step);
+    scrollToIndex(focusedIndex.value);
+  } else if (e.key === "PageUp") {
+    e.preventDefault();
+    const step = Math.floor((props.viewportHeight || 500) / (props.itemHeight || 50));
+    focusedIndex.value = Math.max(0, focusedIndex.value - step);
+    scrollToIndex(focusedIndex.value);
+  } else if (e.key === "Home") {
+    e.preventDefault();
+    focusedIndex.value = 0;
+    scrollToIndex(0);
+  } else if (e.key === "End") {
+    e.preventDefault();
+    focusedIndex.value = total - 1;
+    scrollToIndex(total - 1);
+  }
+};
 </script>
 
 <style scoped>
@@ -190,62 +311,74 @@ const isLoading = computed(() => {
   text-align: right;
 }
 .modern-datatable table tbody tr {
-  transition: all var(--transition-fast);
+  transition: background-color var(--transition-fast);
+}
+.modern-datatable table tbody tr:hover {
+  background-color: var(--table-row-hover-bg);
+}
+.modern-datatable table tbody tr.selected {
+  background-color: var(--table-row-selected-bg, rgba(var(--color-primary-rgb, 59, 130, 246), 0.08));
+}
+.modern-datatable table tbody tr.active-focus {
+  outline: 2px solid var(--color-primary, #3b82f6);
+  outline-offset: -2px;
 }
 .modern-datatable table tbody tr td {
   padding: var(--gap-md);
-  border-bottom: 1px solid var(--neutral-100);
-  color: var(--font-color-primary);
+  border-bottom: 1px solid var(--table-border-color);
+  color: var(--table-row-text-color);
   font-size: var(--font-size-md);
 }
 .modern-datatable table tbody tr td.check-cell {
   text-align: center;
 }
 .modern-datatable table tbody tr td.actions-cell {
-  width: 1%;
-  white-space: nowrap;
   text-align: right;
 }
+.modern-datatable table tbody tr td.actions-cell .action-buttons {
+  display: inline-flex;
+  gap: var(--gap-xs);
+  justify-content: flex-end;
+}
 .modern-datatable table tbody tr td.empty-state {
   text-align: center;
-  padding: var(--gap-xl, 24px);
-  color: var(--font-color-secondary, #666);
+  padding: var(--gap-xl);
+  color: var(--font-color-secondary);
 }
 .modern-datatable table tbody tr:last-child td {
   border-bottom: none;
 }
-.modern-datatable table tbody tr:hover {
-  background-color: var(--table-row-hover);
-}
-.modern-datatable table tbody tr.selected {
-  background-color: var(--table-row-selected);
-  color: var(--table-row-selected-text, inherit);
-}
-.modern-datatable table tbody tr.selected td {
-  border-bottom-color: rgba(255, 255, 255, 0.1);
-  color: var(--table-row-selected-text, inherit);
-}
-.modern-datatable .action-buttons {
+.modern-datatable .footer {
   display: flex;
-  gap: var(--gap-sm);
   justify-content: flex-end;
+  align-items: center;
 }
-.modern-datatable .footer {
-  padding: 4px 0;
+.modern-datatable.is-virtual-scroll .k-datatable-wrapper {
+  overflow-y: auto;
+  max-height: var(--k-datatable-viewport-height, 500px);
+  outline: none;
 }
-
-.spinner {
-  width: 40px;
-  height: 40px;
-  border: 3px solid var(--neutral-200);
-  border-radius: 50%;
-  border-top-color: var(--primary-500);
-  animation: spin 1s ease-in-out infinite;
+.modern-datatable.is-virtual-scroll table thead {
+  position: sticky;
+  top: 0;
+  z-index: 2;
+  background: var(--table-header-bg, #ffffff);
 }
-
-@keyframes spin {
-  to {
-    transform: rotate(360deg);
-  }
+.modern-datatable.is-virtual-scroll table thead th {
+  background: var(--table-header-bg, #ffffff);
+}
+.modern-datatable.is-virtual-scroll tr.k-virtual-spacer {
+  height: var(--spacer-height, 0px);
+  border: none;
+  padding: 0;
+  margin: 0;
+  background: transparent !important;
+}
+.modern-datatable.is-virtual-scroll tr.k-virtual-spacer td {
+  height: var(--spacer-height, 0px);
+  border: none;
+  padding: 0;
+  margin: 0;
+  background: transparent !important;
 }
 </style>

package/dist/runtime/components/KDatatable/KDatatable.vue.d.ts

@@ -7,22 +7,33 @@ type __VLS_Props = {
     bulkActions?: Array<IKDatatableAction>;
     selectedRows?: any[];
     selectAll?: boolean;
+    currentPage?: number;
+    pageSize?: number;
     cellSlots?: Record<string, any>;
     headerSlots?: Record<string, any>;
     columnHeaders?: Record<string, string>;
     columnWidths?: Record<string, string>;
     emptyStateText?: string;
     emptyFilterStateText?: string;
+    virtualScroll?: boolean;
+    itemHeight?: number;
+    viewportHeight?: number;
+    buffer?: number;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
     "update:selectedRows": (value: any[]) => any;
     "update:selectAll": (value: boolean) => any;
+    "update:currentPage": (value: number) => any;
+    "update:pageSize": (value: number) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     "onUpdate:selectedRows"?: ((value: any[]) => any) | undefined;
     "onUpdate:selectAll"?: ((value: boolean) => any) | undefined;
+    "onUpdate:currentPage"?: ((value: number) => any) | undefined;
+    "onUpdate:pageSize"?: ((value: number) => any) | undefined;
 }>, {
     selectedRows: any[];
     selectAll: boolean;
+    buffer: number;
     bulkActions: Array<IKDatatableAction>;
     visibleFields: Array<string> | null;
     rowActions: Array<IKDatatableAction>;
@@ -32,6 +43,9 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {
     columnWidths: Record<string, string>;
     emptyStateText: string;
     emptyFilterStateText: string;
+    virtualScroll: boolean;
+    itemHeight: number;
+    viewportHeight: number;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/KRadiobox/KRadiobox.d.vue.ts

@@ -1,4 +1,5 @@
 type __VLS_Props = {
+    modelValue?: any;
     model?: any;
     value?: any;
     disabled?: boolean;

package/dist/runtime/components/KRadiobox/KRadiobox.vue

@@ -21,6 +21,7 @@
 <script setup>
 import { computed } from "vue";
 const props = defineProps({
+  modelValue: { type: null, required: false },
   model: { type: null, required: false },
   value: { type: null, required: false },
   disabled: { type: Boolean, required: false },
@@ -30,7 +31,7 @@ const props = defineProps({
 });
 const emit = defineEmits(["update:modelValue", "update:model"]);
 const internalModel = computed({
-  get: () => props.model,
+  get: () => props.modelValue !== void 0 ? props.modelValue : props.model,
   set: (val) => {
     emit("update:model", val);
     emit("update:modelValue", val);

package/dist/runtime/components/KRadiobox/KRadiobox.vue.d.ts

@@ -1,4 +1,5 @@
 type __VLS_Props = {
+    modelValue?: any;
     model?: any;
     value?: any;
     disabled?: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@katlux/preset-modern",
-	"version": "0.1.1-alpha.95",
+	"version": "0.1.1-alpha.97",
 	"description": "Modern default design preset and styling variables for Katlux components",
 	"author": "Katlux",
 	"license": "Apache-2.0",
@@ -20,7 +20,7 @@
 		"./dist/runtime/assets/*": "./dist/runtime/assets/*"
 	},
 	"dependencies": {
-		"@katlux/toolkit": "*",
+		"@katlux/toolkit": "^0.1.1-alpha.120",
 		"@nuxt/kit": "^3.12.0"
 	},
 	"files": [