@katlux/preset-modern 0.1.0-alpha.74

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

@@ -0,0 +1,209 @@
+<template lang="pug">
+.k-datatable.modern-datatable(:style="{ '--page-size': dataProvider?.pageSize?.value || 10 }")
+	.header(v-if="bulkActions && bulkActions.length > 0 && selectedRows.length > 0")
+		.selected-count {{ selectedRows.length }} items selected
+		KBulkActions.bulk-actions(:bulkActions="bulkActions" :selectedRows="selectedRows" :selectAll="selectAll")
+	
+	.k-datatable-wrapper
+		.loading-overlay(v-if="dataProvider.loading.value")
+			.spinner
+		
+		table
+			thead
+				tr
+					th.check-cell(v-if="bulkActions && bulkActions.length > 0")
+						KCheckbox(v-model="selectAll")
+					th(v-for="field in visibleFields || dataProvider.fields" :key="field" :data-field="field" :style="getColumnStyle(field)")
+						component(v-if="getHeaderSlot(field)" :is="getHeaderSlot(field)" :field="field")
+						span(v-else) {{ columnHeaders?.[field] ?? field }}
+					th.actions-cell(v-if="rowActions && rowActions.length > 0") Actions
+			
+			tbody
+				tr.empty-row(v-if="!dataProvider.loading.value && (!dataProvider.pageData.value || dataProvider.pageData.value.length === 0)")
+					td.empty-state(:colspan="(visibleFields || dataProvider.fields || []).length + (bulkActions && bulkActions.length > 0 ? 1 : 0) + (rowActions && rowActions.length > 0 ? 1 : 0)")
+						span(v-if="dataProvider.filter.value?.active") {{ emptyFilterStateText || 'no result found for filter' }}
+						span(v-else) {{ emptyStateText || 'no result' }}
+				tr(v-for="(row, index) in dataProvider.pageData.value" :key="index" :class="{ 'selected': selectedRows.includes(row) }")
+					td.check-cell(v-if="bulkActions && bulkActions.length > 0")
+						KCheckbox(:value="row" v-model="selectedRows")
+					td(v-for="visibleField in visibleFields || dataProvider.fields" :key="visibleField" :data-field="visibleField" :style="getColumnStyle(visibleField)")
+						component(v-if="getCellSlot(visibleField)" :is="getCellSlot(visibleField)" :row="row" :field="visibleField" :value="row[visibleField]")
+						span(v-else) {{ row[visibleField] }}
+					td.actions-cell(v-if="rowActions && rowActions.length > 0")
+						.action-buttons
+							KTooltip(
+								v-for="rowAction in rowActions" 
+								:key="rowAction.label" 
+								:text="rowAction.label"
+								:disabled="!(rowAction.iconOnly || !!rowAction.icon)"
+							)
+								KButton.action-btn(
+									:type="rowAction.type || 'default'"
+									:iconOnly="rowAction.iconOnly || !!rowAction.icon"
+									size="small" 
+									@click="rowAction.action(row)"
+								)
+									template(#icon v-if="rowAction.icon")
+										KIcon(:iconname="rowAction.icon" :width="16" :height="16")
+									template(#default v-if="!rowAction.iconOnly && !rowAction.icon") {{ rowAction.label }}
+
+	.footer
+		KPagination.pagination(:dataProvider="dataProvider")
+</template>
+
+<script setup>
+import { ADataProvider } from "@katlux/providers";
+const selectedRows = defineModel("selectedRows", { type: Array, ...{ default: [] } });
+const selectAll = defineModel("selectAll", { type: Boolean, ...{ default: false } });
+const props = defineProps({
+  dataProvider: { type: Object, required: true },
+  visibleFields: { type: [Array, null], required: true },
+  rowActions: { type: Array, required: true },
+  bulkActions: { type: Array, required: true },
+  cellSlots: { type: Object, required: false },
+  headerSlots: { type: Object, required: false },
+  columnHeaders: { type: Object, required: false },
+  columnWidths: { type: Object, required: false },
+  emptyStateText: { type: String, required: false },
+  emptyFilterStateText: { type: String, required: false }
+});
+const getCellSlot = (fieldName) => {
+  const slotName = "cell-" + fieldName;
+  return props.cellSlots?.[slotName];
+};
+const getHeaderSlot = (fieldName) => {
+  const slotName = "header-" + fieldName;
+  return props.headerSlots?.[slotName] || props.cellSlots?.[slotName];
+};
+const getColumnStyle = (field) => {
+  const w = props.columnWidths?.[field];
+  if (!w) return void 0;
+  return { width: w, whiteSpace: "nowrap" };
+};
+</script>
+
+<style scoped>
+.modern-datatable {
+  --page-height: 50px;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap-md);
+  font-family: var(--font-family);
+}
+.modern-datatable .header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: var(--gap-sm) var(--gap-lg);
+  background: var(--table-header-bg);
+  border-radius: var(--button-border-radius);
+  border: 1px solid var(--table-border-color);
+}
+.modern-datatable .header .selected-count {
+  font-weight: var(--font-weight-semibold);
+  color: var(--font-color-secondary);
+}
+.modern-datatable .k-datatable-wrapper {
+  position: relative;
+  border-radius: var(--border-radius-lg);
+  box-shadow: var(--shadow-md);
+  background: var(--background-color);
+  overflow: hidden;
+  border: 1px solid var(--table-border-color);
+}
+.modern-datatable .k-datatable-wrapper .loading-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(255, 255, 255, 0.7);
+  backdrop-filter: blur(2px);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 10;
+}
+.modern-datatable table {
+  width: 100%;
+  border-collapse: separate;
+  border-spacing: 0;
+}
+.modern-datatable table thead {
+  background: var(--table-header-bg);
+}
+.modern-datatable table thead th {
+  padding: var(--gap-md);
+  font-weight: var(--font-weight-semibold);
+  text-align: left;
+  color: var(--table-header-color);
+  font-size: var(--font-size-sm);
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+  border-bottom: 1px solid var(--table-border-color);
+  white-space: nowrap;
+}
+.modern-datatable table thead th.check-cell {
+  width: 48px;
+  text-align: center;
+}
+.modern-datatable table thead th.actions-cell {
+  text-align: right;
+}
+.modern-datatable table tbody tr {
+  transition: all var(--transition-fast);
+}
+.modern-datatable table tbody tr td {
+  padding: var(--gap-md);
+  border-bottom: 1px solid var(--neutral-100);
+  color: var(--font-color-primary);
+  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 {
+  text-align: right;
+}
+.modern-datatable table tbody tr td.empty-state {
+  text-align: center;
+  padding: var(--gap-xl, 24px);
+  color: var(--font-color-secondary, #666);
+}
+.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);
+}
+.modern-datatable table tbody tr.selected td {
+  border-bottom-color: #dbeafe;
+}
+.modern-datatable .action-buttons {
+  display: flex;
+  gap: var(--gap-sm);
+  justify-content: flex-end;
+}
+.modern-datatable .footer {
+  padding: 4px 0;
+}
+
+.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;
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+</style>

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

@@ -0,0 +1,28 @@
+import { ADataProvider } from '@katlux/providers';
+import type { IKDatatableAction } from '@katlux/providers';
+type __VLS_Props = {
+    dataProvider: ADataProvider;
+    visibleFields: Array<string> | null;
+    rowActions: Array<IKDatatableAction>;
+    bulkActions: Array<IKDatatableAction>;
+    cellSlots?: Record<string, any>;
+    headerSlots?: Record<string, any>;
+    columnHeaders?: Record<string, string>;
+    columnWidths?: Record<string, string>;
+    emptyStateText?: string;
+    emptyFilterStateText?: string;
+};
+type __VLS_ModelProps = {
+    'selectedRows'?: any[];
+    'selectAll'?: boolean;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:selectedRows": (value: any[]) => any;
+    "update:selectAll": (value: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:selectedRows"?: ((value: any[]) => any) | undefined;
+    "onUpdate:selectAll"?: ((value: boolean) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,16 @@
+type __VLS_Props = {
+    label?: string;
+    maskedValue: string;
+    placeholder: string;
+    showClear: boolean;
+    mask: string;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    "update:maskedValue": (value: string) => any;
+    clear: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:maskedValue"?: ((value: string) => any) | undefined;
+    onClear?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/KMaskTextbox/KMaskTextbox.vue

@@ -0,0 +1,104 @@
+<template lang="pug">
+.KMaskTextbox
+	label.k-input-label(v-if="label") {{ label }}
+	KTextbox(
+		:modelValue="maskedValue"
+		:placeholder="placeholder"
+		:showClear="showClear"
+		:maxlength="mask.length"
+		@update:modelValue="handleUpdate"
+		@beforeinput="handleBeforeInput"
+	)
+</template>
+
+<script setup>
+import { computed } from "vue";
+import { getMaskPatternDef } from "@katlux/toolkit/components/KMaskTextbox/KMaskTextbox.logic";
+const props = defineProps({
+  label: { type: String, required: false },
+  maskedValue: { type: String, required: true },
+  placeholder: { type: String, required: true },
+  showClear: { type: Boolean, required: true },
+  mask: { type: String, required: true }
+});
+const emit = defineEmits(["update:maskedValue", "clear"]);
+const handleBeforeInput = (event) => {
+  if (!event.data || event.inputType !== "insertText") {
+    return;
+  }
+  const char = event.data;
+  if (!/[0-9]/.test(char)) {
+    return;
+  }
+  const target = event.target;
+  const cursorPos = target.selectionStart || 0;
+  const currentValue = target.value;
+  let maskIdx = 0;
+  let valIdx = 0;
+  while (valIdx < cursorPos && maskIdx < props.mask.length) {
+    const def = getMaskPatternDef(props.mask, maskIdx);
+    if (def) {
+      let consumed = 0;
+      while (consumed < def.length && valIdx < currentValue.length) {
+        if (def.pattern.test(currentValue[valIdx])) {
+          consumed++;
+        }
+        valIdx++;
+        if (valIdx >= cursorPos) break;
+      }
+      maskIdx += def.length;
+    } else {
+      valIdx++;
+      maskIdx++;
+    }
+  }
+  const patternType = props.mask.substring(maskIdx, maskIdx + 4);
+  const digit = parseInt(char, 10);
+  let digitsInPattern = 0;
+  let scanIdx = cursorPos;
+  while (scanIdx > 0 && digitsInPattern < 10) {
+    scanIdx--;
+    const ch = currentValue[scanIdx];
+    if (/[0-9]/.test(ch)) {
+      digitsInPattern++;
+    } else {
+      break;
+    }
+  }
+  if (patternType.startsWith("DD")) {
+    if (digitsInPattern === 0) {
+      if (digit > 3) event.preventDefault();
+    } else if (digitsInPattern === 1) {
+      const firstDigit = parseInt(currentValue[cursorPos - 1], 10);
+      if (firstDigit === 0 && digit === 0) event.preventDefault();
+      if (firstDigit === 3 && digit > 1) event.preventDefault();
+    }
+  } else if (patternType.startsWith("MM")) {
+    if (digitsInPattern === 0) {
+      if (digit > 1) event.preventDefault();
+    } else if (digitsInPattern === 1) {
+      const firstDigit = parseInt(currentValue[cursorPos - 1], 10);
+      if (firstDigit === 0 && digit === 0) event.preventDefault();
+      if (firstDigit === 1 && digit > 2) event.preventDefault();
+    }
+  } else if (patternType.startsWith("HH")) {
+    if (digitsInPattern === 0) {
+      if (digit > 2) event.preventDefault();
+    } else if (digitsInPattern === 1) {
+      const firstDigit = parseInt(currentValue[cursorPos - 1], 10);
+      if (firstDigit === 2 && digit > 3) event.preventDefault();
+    }
+  } else if (patternType.startsWith("mm") || patternType.startsWith("ss")) {
+    if (digitsInPattern === 0) {
+      if (digit > 5) event.preventDefault();
+    }
+  }
+};
+const handleUpdate = (value) => {
+  emit("update:maskedValue", value);
+};
+</script>
+
+<style lang="scss" scoped>
+// No additional styles needed - KTextbox handles everything
+</style>

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

@@ -0,0 +1,16 @@
+type __VLS_Props = {
+    label?: string;
+    maskedValue: string;
+    placeholder: string;
+    showClear: boolean;
+    mask: string;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    "update:maskedValue": (value: string) => any;
+    clear: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:maskedValue"?: ((value: string) => any) | undefined;
+    onClear?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,18 @@
+type __VLS_Props = {
+    dp: any;
+    totalPages: number;
+    getPageHref: (page: number) => string | undefined;
+    visiblePages: number[];
+    showPrevButton: boolean;
+    showNextButton: boolean;
+    showFirstEllipsis: boolean;
+    showLastEllipsis: boolean;
+    pageClicked: (item: number) => void;
+    goToPrev: () => void;
+    goToNext: () => void;
+    goToFirst: () => void;
+    goToLast: () => void;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/KPagination/KPagination.vue

@@ -0,0 +1,92 @@
+<template lang="pug">
+.k-pagination-modern(v-if="totalPages > 1")
+    ul.pagination-list
+        li
+            KButton.nav-btn(
+                :onClick="goToPrev"
+                :isDisabled="!showPrevButton"
+                :buttonClasses="['light', 'small']"
+                aria-label="Previous page"
+            ) ‹
+
+        li(v-if="showFirstEllipsis")
+            KButton.page-btn(
+                :onClick="goToFirst"
+                :buttonClasses="['light', 'small']"
+                :isLink="!!getPageHref(1)"
+                :href="getPageHref(1)"
+            ) 1
+        
+        li(v-if="showFirstEllipsis")
+            span.ellipsis ...
+
+        li(v-for="item in visiblePages" :key="item")
+            KButton.page-btn(
+                :onClick="() => pageClicked(item)"
+                :buttonClasses="[item === dp.currentPage.value ? 'primary' : 'light', 'small']"
+                :isLink="!!getPageHref(item)"
+                :href="getPageHref(item)"
+            ) {{ item }}
+
+        li(v-if="showLastEllipsis")
+            span.ellipsis ...
+
+        li(v-if="showLastEllipsis")
+            KButton.page-btn(
+                :onClick="goToLast"
+                :buttonClasses="['light', 'small']"
+                :isLink="!!getPageHref(totalPages)"
+                :href="getPageHref(totalPages)"
+            ) {{ totalPages }}
+
+        li
+            KButton.nav-btn(
+                :onClick="goToNext"
+                :isDisabled="!showNextButton"
+                :buttonClasses="['light', 'small']"
+                aria-label="Next page"
+            ) ›
+</template>
+
+<script setup>
+defineProps({
+  dp: { type: null, required: true },
+  totalPages: { type: Number, required: true },
+  getPageHref: { type: Function, required: true },
+  visiblePages: { type: Array, required: true },
+  showPrevButton: { type: Boolean, required: true },
+  showNextButton: { type: Boolean, required: true },
+  showFirstEllipsis: { type: Boolean, required: true },
+  showLastEllipsis: { type: Boolean, required: true },
+  pageClicked: { type: Function, required: true },
+  goToPrev: { type: Function, required: true },
+  goToNext: { type: Function, required: true },
+  goToFirst: { type: Function, required: true },
+  goToLast: { type: Function, required: true }
+});
+</script>
+
+<style scoped>
+.k-pagination-modern {
+  display: flex;
+  justify-content: flex-end;
+  font-family: var(--font-family);
+}
+.k-pagination-modern .pagination-list {
+  display: flex;
+  gap: 4px;
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  align-items: center;
+}
+.k-pagination-modern .pagination-list li {
+  display: flex;
+  align-items: center;
+}
+.k-pagination-modern .ellipsis {
+  padding: 0 4px;
+  color: var(--neutral-400);
+  font-size: var(--font-size-sm);
+}
+</style>

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

@@ -0,0 +1,18 @@
+type __VLS_Props = {
+    dp: any;
+    totalPages: number;
+    getPageHref: (page: number) => string | undefined;
+    visiblePages: number[];
+    showPrevButton: boolean;
+    showNextButton: boolean;
+    showFirstEllipsis: boolean;
+    showLastEllipsis: boolean;
+    pageClicked: (item: number) => void;
+    goToPrev: () => void;
+    goToNext: () => void;
+    goToFirst: () => void;
+    goToLast: () => void;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,20 @@
+type __VLS_Props = {
+    label?: string;
+    rangeMin: number;
+    rangeMax: number;
+    rangeStep: number;
+    isDisabled: boolean;
+    currentMinValue: number;
+    currentMaxValue: number;
+    minPercent: number;
+    maxPercent: number;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    "update:minValue": (value: number) => any;
+    "update:maxValue": (value: number) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:minValue"?: ((value: number) => any) | undefined;
+    "onUpdate:maxValue"?: ((value: number) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;