@katlux/preset-modern 0.1.1-alpha.91 → 0.1.1-alpha.92

package/dist/module.json

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

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

@@ -4,16 +4,13 @@ type __VLS_Props = {
     bulkActions: IKDatatableAction[];
     selectedRows: any[];
     selectAll: boolean;
+    selected?: any;
     dp: CFlatClientDataProvider;
     doAction: (action: any) => void;
 };
-type __VLS_ModelProps = {
-    'selected'?: any;
-};
-type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
-declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
     "update:selected": (value: any) => any;
-}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     "onUpdate:selected"?: ((value: any) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;

package/dist/runtime/components/KBulkActions/KBulkActions.vue

@@ -5,7 +5,7 @@
 		template(v-if="bulkActions.length > 3")
 			KCombobox(
 				:dataProvider="dp" 
-				v-model="selected" 
+				v-model="internalSelected" 
 				labelField="label" 
 				closeOnSelect 
 				:disabled="selectedRows.length === 0" 
@@ -13,41 +13,48 @@
 				class="action-select"
 			)
 			KButton(
-				@click="doAction(selected)" 
+				@click="doAction(internalSelected)" 
 				size="small" 
-				:disabled="selectedRows.length === 0 || selected == undefined"
+				:disabled="selectedRows.length === 0 || internalSelected == undefined"
 				class="execute-btn"
 			) {{ t('Apply') }}
 			
 		template(v-else v-for="action in bulkActions" :key="action.label")
 			KTooltip(
 				:text="action.label"
-				:disabled="!(action.iconOnly || !!action.icon)"
+				:disabled="!action.iconOnly"
 			)
 				KButton(
 					@click="doAction(action)" 
 					size="small" 
 					:type="action.type || 'default'"
-					:iconOnly="action.iconOnly || !!action.icon"
+					:iconOnly="action.iconOnly"
+					:disabled="selectedRows.length === 0"
 					class="action-btn"
 				)
 					template(#icon v-if="action.icon")
 						KIcon(:iconname="action.icon" :width="16" :height="16")
-					template(#default v-if="!action.iconOnly && !action.icon") {{ action.label }}
+					template(#default v-if="!action.iconOnly") {{ action.label }}
 </template>
 
 <script setup>
+import { computed } from "vue";
 import { CFlatClientDataProvider } from "@katlux/providers";
-const nuxtApp = useNuxtApp?.();
-const t = (key) => nuxtApp?.$t ? nuxtApp.$t(key) : key;
-const selected = defineModel("selected", { type: null });
-defineProps({
+import { useKatluxI18n } from "#toolkit/composables/useKatluxI18n";
+const { t } = useKatluxI18n();
+const props = defineProps({
   bulkActions: { type: Array, required: true },
   selectedRows: { type: Array, required: true },
   selectAll: { type: Boolean, required: true },
+  selected: { type: null, required: false },
   dp: { type: Object, required: true },
   doAction: { type: Function, required: true }
 });
+const emit = defineEmits(["update:selected"]);
+const internalSelected = computed({
+  get: () => props.selected,
+  set: (val) => emit("update:selected", val)
+});
 </script>
 
 <style scoped>
@@ -60,6 +67,9 @@ defineProps({
   gap: var(--gap-sm);
   align-items: center;
 }
+.k-bulk-actions-modern .action-select {
+  min-width: 180px;
+}
 .k-bulk-actions-modern .action-btn {
   border-radius: var(--border-radius-sm);
   font-weight: var(--font-weight-medium);

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

@@ -4,16 +4,13 @@ type __VLS_Props = {
     bulkActions: IKDatatableAction[];
     selectedRows: any[];
     selectAll: boolean;
+    selected?: any;
     dp: CFlatClientDataProvider;
     doAction: (action: any) => void;
 };
-type __VLS_ModelProps = {
-    'selected'?: any;
-};
-type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
-declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
     "update:selected": (value: any) => any;
-}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     "onUpdate:selected"?: ((value: any) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;

package/dist/runtime/components/KCheckbox/KCheckbox.vue

@@ -1,7 +1,13 @@
 <template lang="pug">
 .KCheckbox-wrapper
-	label.KCheckbox.modern-checkbox
-		input(type="checkbox" v-model="formattedModel" :value="checkboxValue" :disabled="isDisabled")
+	label.KCheckbox.modern-checkbox(
+		role="checkbox"
+		:aria-checked="isChecked"
+		:aria-disabled="isDisabled"
+		tabindex="0"
+		@keydown.space.prevent="handleSpace"
+	)
+		input(type="checkbox" v-model="formattedModel" :value="checkboxValue" :disabled="isDisabled" tabindex="-1")
 		.checkbox-box(:class="validation ? `is-${validation}` : ''")
 			.checkbox-checkmark
 				KIcon.icon(iconname="check")
@@ -27,6 +33,42 @@ const formattedModel = computed({
   get: () => props.model,
   set: (value) => emit("update:model", value)
 });
+const findModelIndex = (arr, value) => {
+  const refIdx = arr.indexOf(value);
+  if (refIdx > -1) return refIdx;
+  if (value && typeof value === "object") {
+    const valId = value.id ?? value._id ?? value.key ?? value.value;
+    if (valId !== void 0 && valId !== null) {
+      return arr.findIndex((item) => {
+        if (!item || typeof item !== "object") return false;
+        const itemId = item.id ?? item._id ?? item.key ?? item.value;
+        return itemId === valId;
+      });
+    }
+  }
+  return -1;
+};
+const isChecked = computed(() => {
+  if (Array.isArray(formattedModel.value)) {
+    return findModelIndex(formattedModel.value, props.checkboxValue) > -1;
+  }
+  return !!formattedModel.value;
+});
+const handleSpace = () => {
+  if (props.isDisabled) return;
+  if (Array.isArray(formattedModel.value)) {
+    const idx = findModelIndex(formattedModel.value, props.checkboxValue);
+    if (idx > -1) {
+      const updated = [...formattedModel.value];
+      updated.splice(idx, 1);
+      formattedModel.value = updated;
+    } else {
+      formattedModel.value = [...formattedModel.value, props.checkboxValue];
+    }
+  } else {
+    formattedModel.value = !formattedModel.value;
+  }
+};
 </script>
 
 <style scoped>

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

@@ -2,9 +2,11 @@ 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>;
+    visibleFields?: Array<string> | null;
+    rowActions?: Array<IKDatatableAction>;
+    bulkActions?: Array<IKDatatableAction>;
+    selectedRows?: any[];
+    selectAll?: boolean;
     cellSlots?: Record<string, any>;
     headerSlots?: Record<string, any>;
     columnHeaders?: Record<string, string>;
@@ -12,17 +14,24 @@ type __VLS_Props = {
     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, {
+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;
-}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     "onUpdate:selectedRows"?: ((value: any[]) => any) | undefined;
     "onUpdate:selectAll"?: ((value: boolean) => any) | undefined;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+}>, {
+    bulkActions: Array<IKDatatableAction>;
+    selectedRows: any[];
+    selectAll: boolean;
+    visibleFields: Array<string> | null;
+    rowActions: Array<IKDatatableAction>;
+    cellSlots: Record<string, any>;
+    headerSlots: Record<string, any>;
+    columnHeaders: Record<string, string>;
+    columnWidths: Record<string, string>;
+    emptyStateText: string;
+    emptyFilterStateText: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -1,74 +1,103 @@
 <template lang="pug">
-.k-datatable.modern-datatable(:style="{ '--page-size': dataProvider?.pageSize?.value || 10 }" role="region" :aria-label="t('Data Table')")
-	.header(v-if="bulkActions && bulkActions.length > 0 && selectedRows.length > 0")
-		.selected-count {{ t('{count} items selected').replace('{count}', selectedRows.length.toString()) }}
-		KBulkActions.bulk-actions(:bulkActions="bulkActions" :selectedRows="selectedRows" :selectAll="selectAll")
+.k-datatable.modern-datatable(:style="{ '--page-size': dpPageSize || 10 }" 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
-		.loading-overlay(v-if="dataProvider.loading.value")
+		.loading-overlay(v-if="isLoading")
 			.spinner
 		
-		table(role="grid" :aria-busy="dataProvider.loading.value")
+		table(role="grid" :aria-busy="isLoading")
 			thead
 				tr
-					th.check-cell(v-if="bulkActions && bulkActions.length > 0")
+					th.check-cell(v-if="props.bulkActions && props.bulkActions.length > 0")
 						KCheckbox(v-model="selectAll")
-					th(v-for="field in visibleFields || dataProvider.fields" :key="field" :data-field="field" :style="getColumnStyle(field)")
+					th(v-for="field in visibleFields || props.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") {{ t('Actions') }}
+					th.actions-cell(v-if="props.rowActions && props.rowActions.length > 0") {{ t('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 || t('No result found for filter') }}
-						span(v-else) {{ emptyStateText || t('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")
+				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)")
+						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) }")
+					td.check-cell(v-if="props.bulkActions && props.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)")
+					td(v-for="visibleField in visibleFields || props.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")
+					td.actions-cell(v-if="props.rowActions && props.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(v-for="rowAction in props.rowActions" :key="rowAction.label")
+								KTooltip(
+									v-if="!rowAction.visible || rowAction.visible(row)"
+									:text="rowAction.label"
+									:disabled="!rowAction.iconOnly"
 								)
-									template(#icon v-if="rowAction.icon")
-										KIcon(:iconname="rowAction.icon" :width="16" :height="16")
-									template(#default v-if="!rowAction.iconOnly && !rowAction.icon") {{ rowAction.label }}
+									KButton.action-btn(
+										:type="rowAction.type || 'default'"
+										:iconOnly="rowAction.iconOnly"
+										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.label }}
 
 	.footer
-		KPagination.pagination(:dataProvider="dataProvider")
+		KPagination.pagination(:dataProvider="props.dataProvider")
 </template>
 
 <script setup>
+import { computed } from "vue";
 import { ADataProvider } from "@katlux/providers";
-const nuxtApp = useNuxtApp?.();
-const t = (key) => nuxtApp?.$t ? nuxtApp.$t(key) : key;
-const selectedRows = defineModel("selectedRows", { type: Array, ...{ default: () => [] } });
-const selectAll = defineModel("selectAll", { type: Boolean, ...{ default: false } });
+import { useKatluxI18n } from "#toolkit/composables/useKatluxI18n";
+import { useDataProvider } from "#toolkit/composables/useDataProvider";
+const { t } = useKatluxI18n();
 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 }
+  visibleFields: { type: [Array, null], required: false, default: null },
+  rowActions: { type: Array, required: false, default: () => [] },
+  bulkActions: { type: Array, required: false, default: () => [] },
+  selectedRows: { type: Array, required: false, default: () => [] },
+  selectAll: { type: Boolean, required: false, default: 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: "" }
 });
+const emit = defineEmits(["update:selectedRows", "update:selectAll"]);
+const selectedRows = computed({
+  get: () => props.selectedRows || [],
+  set: (val) => emit("update:selectedRows", val)
+});
+const selectAll = computed({
+  get: () => props.selectAll || false,
+  set: (val) => emit("update:selectAll", val)
+});
+const getRowKey = (row, index) => {
+  const idKey = props.dataProvider?.idKey || "id";
+  if (row && row[idKey] !== void 0 && row[idKey] !== null) {
+    return row[idKey];
+  }
+  if (row && row.id !== void 0 && row.id !== null) {
+    return row.id;
+  }
+  if (row && row._id !== void 0 && row._id !== null) {
+    return row._id;
+  }
+  return index;
+};
+const isRowSelected = (row) => {
+  const idKey = props.dataProvider?.idKey || "id";
+  const rowId = row?.[idKey] ?? row?.id ?? row?._id ?? row;
+  return (selectedRows.value || []).some((r) => (r?.[idKey] ?? r?.id ?? r?._id ?? r) === rowId || r === row);
+};
 const getCellSlot = (fieldName) => {
   const slotName = "cell-" + fieldName;
   return props.cellSlots?.[slotName];
@@ -82,6 +111,11 @@ const getColumnStyle = (field) => {
   if (!w) return void 0;
   return { width: w, whiteSpace: "nowrap" };
 };
+const { pageData, filter: dpFilter, loading: dpLoading, initialLoad: dpInitialLoad, pageSize: dpPageSize } = useDataProvider(props.dataProvider);
+const pageRows = computed(() => pageData.value || []);
+const isLoading = computed(() => {
+  return dpLoading.value || dpInitialLoad.value || false;
+});
 </script>
 
 <style scoped>
@@ -151,6 +185,8 @@ const getColumnStyle = (field) => {
   text-align: center;
 }
 .modern-datatable table thead th.actions-cell {
+  width: 1%;
+  white-space: nowrap;
   text-align: right;
 }
 .modern-datatable table tbody tr {
@@ -166,6 +202,8 @@ const getColumnStyle = (field) => {
   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.empty-state {

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

@@ -2,9 +2,11 @@ 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>;
+    visibleFields?: Array<string> | null;
+    rowActions?: Array<IKDatatableAction>;
+    bulkActions?: Array<IKDatatableAction>;
+    selectedRows?: any[];
+    selectAll?: boolean;
     cellSlots?: Record<string, any>;
     headerSlots?: Record<string, any>;
     columnHeaders?: Record<string, string>;
@@ -12,17 +14,24 @@ type __VLS_Props = {
     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, {
+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;
-}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     "onUpdate:selectedRows"?: ((value: any[]) => any) | undefined;
     "onUpdate:selectAll"?: ((value: boolean) => any) | undefined;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+}>, {
+    bulkActions: Array<IKDatatableAction>;
+    selectedRows: any[];
+    selectAll: boolean;
+    visibleFields: Array<string> | null;
+    rowActions: Array<IKDatatableAction>;
+    cellSlots: Record<string, any>;
+    headerSlots: Record<string, any>;
+    columnHeaders: Record<string, string>;
+    columnWidths: Record<string, string>;
+    emptyStateText: string;
+    emptyFilterStateText: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -4,13 +4,15 @@ type __VLS_Props = {
     placeholder: string;
     showClear: boolean;
     mask: string;
+    validation?: 'success' | 'warning' | 'error' | null;
+    validationText?: string;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
-    "update:maskedValue": (value: string) => any;
     clear: () => any;
+    "update:maskedValue": (value: string) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
-    "onUpdate:maskedValue"?: ((value: string) => any) | undefined;
     onClear?: (() => any) | undefined;
+    "onUpdate:maskedValue"?: ((value: string) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -5,7 +5,10 @@
 		:modelValue="maskedValue"
 		:placeholder="placeholder"
 		:showClear="showClear"
+		:clear="handleClear"
 		:maxlength="mask.length"
+		:validation="validation"
+		:validationText="validationText"
 		@update:modelValue="handleUpdate"
 		@beforeinput="handleBeforeInput"
 	)
@@ -13,13 +16,15 @@
 
 <script setup>
 import { computed } from "vue";
-import { getMaskPatternDef } from "@katlux/toolkit/components/KMaskTextbox/KMaskTextbox.logic";
+import { getMaskPatternDef } from "#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 }
+  mask: { type: String, required: true },
+  validation: { type: [String, null], required: false },
+  validationText: { type: String, required: false }
 });
 const emit = defineEmits(["update:maskedValue", "clear"]);
 const handleBeforeInput = (event) => {
@@ -97,6 +102,9 @@ const handleBeforeInput = (event) => {
 const handleUpdate = (value) => {
   emit("update:maskedValue", value);
 };
+const handleClear = () => {
+  emit("clear");
+};
 </script>
 
 <style lang="scss" scoped>

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

@@ -4,13 +4,15 @@ type __VLS_Props = {
     placeholder: string;
     showClear: boolean;
     mask: string;
+    validation?: 'success' | 'warning' | 'error' | null;
+    validationText?: string;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
-    "update:maskedValue": (value: string) => any;
     clear: () => any;
+    "update:maskedValue": (value: string) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
-    "onUpdate:maskedValue"?: ((value: string) => any) | undefined;
     onClear?: (() => any) | undefined;
+    "onUpdate:maskedValue"?: ((value: string) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -1,56 +1,64 @@
 <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="t('Previous page')"
-            ) ‹
+nav.k-pagination-modern(v-if="totalPages > 1" :aria-label="t('Pagination Navigation')")
+	ul.pagination-list
+		li(v-if="showPrevButton")
+			KButton.nav-btn(
+				@click="goToPrev"
+				:disabled="!showPrevButton"
+				:href="getPageHref(dp.currentPage.value - 1)"
+				size="small"
+				type="light"
+				:aria-label="t('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-if="showFirstEllipsis")
+			KButton.page-btn(
+				@click="goToFirst"
+				:href="getPageHref(1)"
+				size="small"
+				type="light"
+				:aria-label="t('Go to Page 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-for="item in visiblePages" :key="item")
+			KButton.page-btn(
+				@click="() => pageClicked(item)"
+				:href="getPageHref(item)"
+				size="small"
+				:type="item === dp.currentPage.value ? 'primary' : 'light'"
+				:aria-current="item === dp.currentPage.value ? 'page' : undefined"
+				:aria-label="t('Page') + ' ' + item"
+			) {{ item }}
 
-        li(v-if="showLastEllipsis")
-            span.ellipsis ...
+		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(v-if="showLastEllipsis")
+			KButton.page-btn(
+				@click="goToLast"
+				:href="getPageHref(totalPages)"
+				size="small"
+				type="light"
+				:aria-label="t('Go to Page') + ' ' + totalPages"
+			) {{ totalPages }}
 
-        li
-            KButton.nav-btn(
-                :onClick="goToNext"
-                :isDisabled="!showNextButton"
-                :buttonClasses="['light', 'small']"
-                :aria-label="t('Next page')"
-            ) ›
+		li(v-if="showNextButton")
+			KButton.nav-btn(
+				@click="goToNext"
+				:disabled="!showNextButton"
+				:href="getPageHref(dp.currentPage.value + 1)"
+				size="small"
+				type="light"
+				:aria-label="t('Next Page')"
+			) ›
 </template>
 
 <script setup>
-const nuxtApp = useNuxtApp?.();
-const t = (key) => nuxtApp?.$t ? nuxtApp.$t(key) : key;
+import { useKatluxI18n } from "#toolkit/composables/useKatluxI18n";
+const { t } = useKatluxI18n();
 defineProps({
   dp: { type: null, required: true },
   totalPages: { type: Number, required: true },

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

@@ -1,7 +1,13 @@
 <template lang="pug">
 .KRadiobox-wrapper
-	label.KRadiobox.modern-radiobox
-		input(type="radio" v-model="internalModel" :value="value" :disabled="disabled")
+	label.KRadiobox.modern-radiobox(
+		role="radio"
+		:aria-checked="internalModel === value"
+		:aria-disabled="disabled"
+		tabindex="0"
+		@keydown.space.prevent="internalModel = value"
+	)
+		input(type="radio" v-model="internalModel" :value="value" :disabled="disabled" tabindex="-1")
 		.radiobox-box(:class="validation ? `is-${validation}` : ''")
 			.radiobox-checkmark
 				KIcon.icon(iconname="check")

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

@@ -2,6 +2,8 @@ type __VLS_Props = {
     placeholder: string;
     rows: number;
     label?: string;
+    validation?: 'success' | 'warning' | 'error' | null;
+    validationText?: string;
 };
 type __VLS_ModelProps = {
     'text'?: string;

package/dist/runtime/components/KTextarea/KTextarea.vue

@@ -1,15 +1,33 @@
 <template lang="pug">
-.KTextarea-wrapper
+.KTextarea-wrapper(:class="$attrs.class" :style="$attrs.style")
 	label.k-input-label(v-if="label") {{ label }}
-	textarea.KTextarea.modern-textarea(v-model="text" :placeholder="placeholder" :rows="rows")
+	textarea.KTextarea.modern-textarea(
+		v-bind="textareaAttrs"
+		v-model="text"
+		:placeholder="placeholder"
+		:rows="rows"
+		:class="validation ? `is-${validation}` : ''"
+	)
+	span.validation-text(v-if="validation && ['success', 'warning', 'error'].includes(validation) && validationText" :class="`is-${validation}`") {{ validationText }}
 </template>
 
 <script setup>
+import { useAttrs, computed } from "vue";
+defineOptions({
+  inheritAttrs: false
+});
 const text = defineModel("text", { type: String });
-defineProps({
+const props = defineProps({
   placeholder: { type: String, required: true },
   rows: { type: Number, required: true },
-  label: { type: String, required: false }
+  label: { type: String, required: false },
+  validation: { type: [String, null], required: false },
+  validationText: { type: String, required: false }
+});
+const attrs = useAttrs();
+const textareaAttrs = computed(() => {
+  const { class: _, style: __, ...rest } = attrs;
+  return rest;
 });
 </script>
 
@@ -52,4 +70,36 @@ defineProps({
   color: var(--neutral-400);
   cursor: not-allowed;
 }
+.KTextarea.modern-textarea.is-error {
+  border-color: var(--color-danger, #ef4444);
+}
+.KTextarea.modern-textarea.is-error:focus {
+  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.2);
+}
+.KTextarea.modern-textarea.is-warning {
+  border-color: var(--color-warning, #f59e0b);
+}
+.KTextarea.modern-textarea.is-warning:focus {
+  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.2);
+}
+.KTextarea.modern-textarea.is-success {
+  border-color: var(--color-success, #10b981);
+}
+.KTextarea.modern-textarea.is-success:focus {
+  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2);
+}
+
+.validation-text {
+  font-size: var(--font-size-xs, 12px);
+  margin-top: 4px;
+}
+.validation-text.is-error {
+  color: var(--color-danger, #ef4444);
+}
+.validation-text.is-warning {
+  color: var(--color-warning, #f59e0b);
+}
+.validation-text.is-success {
+  color: var(--color-success, #10b981);
+}
 </style>

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

@@ -2,6 +2,8 @@ type __VLS_Props = {
     placeholder: string;
     rows: number;
     label?: string;
+    validation?: 'success' | 'warning' | 'error' | null;
+    validationText?: string;
 };
 type __VLS_ModelProps = {
     'text'?: string;

package/dist/runtime/components/KTextbox/KTextbox.vue

@@ -10,8 +10,8 @@
 
 <script setup>
 import { computed, useAttrs } from "vue";
-const nuxtApp = useNuxtApp?.();
-const t = (key) => nuxtApp?.$t ? nuxtApp.$t(key) : key;
+import { useKatluxI18n } from "#toolkit/composables/useKatluxI18n";
+const { t } = useKatluxI18n();
 defineOptions({
   inheritAttrs: false
 });

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@katlux/preset-modern",
-	"version": "0.1.1-alpha.91",
+	"version": "0.1.1-alpha.92",
 	"description": "Modern default design preset and styling variables for Katlux components",
 	"author": "Katlux",
 	"license": "Apache-2.0",