@katlux/preset-modern 0.1.1-alpha.80 → 0.1.1-alpha.82

package/dist/module.json

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

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

@@ -9,7 +9,7 @@
 				labelField="label" 
 				closeOnSelect 
 				:disabled="selectedRows.length === 0" 
-				placeholder="Select Action"
+				:placeholder="t('Select an action')"
 				class="action-select"
 			)
 			KButton(
@@ -17,7 +17,7 @@
 				size="small" 
 				:disabled="selectedRows.length === 0 || selected == undefined"
 				class="execute-btn"
-			) Go
+			) {{ t('Apply') }}
 			
 		template(v-else v-for="action in bulkActions" :key="action.label")
 			KTooltip(
@@ -38,6 +38,8 @@
 
 <script setup>
 import { CFlatClientDataProvider } from "@katlux/providers";
+const nuxtApp = useNuxtApp?.();
+const t = (key) => nuxtApp?.$t ? nuxtApp.$t(key) : key;
 const selected = defineModel("selected", { type: null });
 defineProps({
   bulkActions: { type: Array, required: true },

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

@@ -43,7 +43,13 @@ const formattedModel = computed({
   box-shadow: var(--input-focus-shadow);
 }
 .KCheckbox.modern-checkbox input {
-  display: none;
+  position: absolute;
+  opacity: 0;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
 }
 .KCheckbox.modern-checkbox .checkbox-box {
   position: relative;

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

@@ -1,14 +1,14 @@
 <template lang="pug">
-.k-datatable.modern-datatable(:style="{ '--page-size': dataProvider?.pageSize?.value || 10 }")
+.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 {{ selectedRows.length }} items selected
+		.selected-count {{ t('{count} items selected').replace('{count}', selectedRows.length.toString()) }}
 		KBulkActions.bulk-actions(:bulkActions="bulkActions" :selectedRows="selectedRows" :selectAll="selectAll")
 	
 	.k-datatable-wrapper
 		.loading-overlay(v-if="dataProvider.loading.value")
 			.spinner
 		
-		table
+		table(role="grid" :aria-busy="dataProvider.loading.value")
 			thead
 				tr
 					th.check-cell(v-if="bulkActions && bulkActions.length > 0")
@@ -16,13 +16,13 @@
 					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
+					th.actions-cell(v-if="rowActions && 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 || 'no result found for filter' }}
-						span(v-else) {{ emptyStateText || 'no result' }}
+						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")
 						KCheckbox(:value="row" v-model="selectedRows")
@@ -53,6 +53,8 @@
 
 <script setup>
 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 } });
 const props = defineProps({

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

@@ -6,7 +6,7 @@
                 :onClick="goToPrev"
                 :isDisabled="!showPrevButton"
                 :buttonClasses="['light', 'small']"
-                aria-label="Previous page"
+                :aria-label="t('Previous page')"
             ) ‹
 
         li(v-if="showFirstEllipsis")
@@ -44,11 +44,13 @@
                 :onClick="goToNext"
                 :isDisabled="!showNextButton"
                 :buttonClasses="['light', 'small']"
-                aria-label="Next page"
+                :aria-label="t('Next page')"
             ) ›
 </template>
 
 <script setup>
+const nuxtApp = useNuxtApp?.();
+const t = (key) => nuxtApp?.$t ? nuxtApp.$t(key) : key;
 defineProps({
   dp: { type: null, required: true },
   totalPages: { type: Number, required: true },

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

@@ -3,13 +3,15 @@
 	label.k-input-label(v-if="label") {{ label }}
 	.KTextbox.modern-textbox(:class="validation ? `is-${validation}` : ''")
 		input(v-bind="inputAttrs" :type="props.type" v-model="text" :placeholder="placeholder")
-		.clear-button(v-if="showClear" @click.stop="clear" @mousedown.stop)
+		.clear-button(v-if="showClear" @click.stop="clear" @mousedown.stop role="button" :aria-label="t('Clear input')")
 			KIcon(iconname="close" width="16" height="16")
 	span.validation-text(v-if="validation && ['success', 'warning', 'error'].includes(validation) && validationText" :class="`is-${validation}`") {{ validationText }}
 </template>
 
 <script setup>
 import { computed, useAttrs } from "vue";
+const nuxtApp = useNuxtApp?.();
+const t = (key) => nuxtApp?.$t ? nuxtApp.$t(key) : key;
 defineOptions({
   inheritAttrs: false
 });

package/package.json

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