@katlux/preset-modern 0.1.0-beta.73 → 0.1.1-alpha.100

package/README.md

@@ -94,14 +94,14 @@ Katlux is a zero-configuration Nuxt module. When you install this preset, the co
 
 ### Option 1: Using Nuxt CLI (Recommended)
 ```bash
-npx nuxi module add @katlux/preset-modern
+npx nuxi module add @katlux/preset-modern@alpha
 ```
 This single command installs the package and adds it to your `nuxt.config.ts`.
 
 ### Option 2: Manual Installation
 1. Install via NPM:
 ```bash
-npm install @katlux/preset-modern
+npm install @katlux/preset-modern@alpha
 ```
 
 2. Register the module in `nuxt.config.ts`:
@@ -115,6 +115,11 @@ export default defineNuxtConfig({
 
 That's all! Start using Katlux components like `<KButton>` in your Vue files immediately. No imports required.
 
+## Developer Guide
+
+For full documentation and repository access:
+- **Developer Guide & Repository**: [https://github.com/katlux-ui/KatluxShowcase](https://github.com/katlux-ui/KatluxShowcase) *(We will open source it soon)*
+
 ## Next Components
 
 Coming soon:
@@ -125,7 +130,7 @@ Coming soon:
 - KPanel
 - And more...
 
-## Trademark Policy
+## License & Trademark Policy
 
 The code in this repository is completely free and open-source under the Apache 2.0 License. 
 However, **Katlux™** and the Katlux logo are unregistered trademarks of the Katlux project. 

package/dist/module.d.mts

@@ -1,3 +1,5 @@
-declare const _default: any;
+import * as _nuxt_schema from '@nuxt/schema';
+
+declare const _default: _nuxt_schema.NuxtModule<_nuxt_schema.ModuleOptions, _nuxt_schema.ModuleOptions, false>;
 
 export { _default as default };

package/dist/module.json

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

package/dist/runtime/assets/scss/css-variables.css

@@ -31,6 +31,7 @@
   --font-color-secondary: var(--neutral-500);
   --font-color-heading: var(--neutral-900);
   --font-color-light: #ffffff;
+  --input-label-color: var(--font-color-primary);
   --background-color: #ffffff;
   --background-color-light: var(--neutral-50);
   --background-color-medium: var(--neutral-100);
@@ -105,20 +106,24 @@
   --input-focus-border-color: var(--primary-500);
   --input-focus-shadow: 0 0 0 3px rgba(139, 92, 246, 0.2);
   --input-height: 48px;
+  --input-min-width: 140px;
   --table-header-bg: var(--neutral-100);
   --table-header-color: var(--neutral-600);
   --table-border-color: var(--neutral-200);
   --table-row-hover: var(--neutral-100);
   --table-row-selected: #eff6ff;
+  --table-row-selected-text: var(--primary-900);
   --panel-bg-opacity: 0.5;
   --panel-blur: 16px;
   --panel-bg-default: var(--neutral-100);
   --panel-header-bg-default: var(--neutral-200);
   --panel-footer-bg-default: var(--neutral-100);
   --checkbox-bg: var(--background-color);
-  --checkbox-checked-bg: var(--button-gradient-primary);
+  --checkbox-checked-bg: var(--primary-500);
   --checkbox-border-color: var(--neutral-400);
   --checkbox-border-radius: 4px;
+  --component-overlay-bg: rgba(255, 255, 255, 0.75);
+  --table-overlay-bg: var(--component-overlay-bg);
   --modal-overlay-bg: rgba(15, 23, 42, 0.4);
   --modal-backdrop-blur: 4px;
   --layout-header-height: 70px;

package/dist/runtime/assets/scss/index.css

@@ -31,6 +31,7 @@
   --font-color-secondary: var(--neutral-500);
   --font-color-heading: var(--neutral-900);
   --font-color-light: #ffffff;
+  --input-label-color: var(--font-color-primary);
   --background-color: #ffffff;
   --background-color-light: var(--neutral-50);
   --background-color-medium: var(--neutral-100);
@@ -105,20 +106,24 @@
   --input-focus-border-color: var(--primary-500);
   --input-focus-shadow: 0 0 0 3px rgba(139, 92, 246, 0.2);
   --input-height: 48px;
+  --input-min-width: 140px;
   --table-header-bg: var(--neutral-100);
   --table-header-color: var(--neutral-600);
   --table-border-color: var(--neutral-200);
   --table-row-hover: var(--neutral-100);
   --table-row-selected: #eff6ff;
+  --table-row-selected-text: var(--primary-900);
   --panel-bg-opacity: 0.5;
   --panel-blur: 16px;
   --panel-bg-default: var(--neutral-100);
   --panel-header-bg-default: var(--neutral-200);
   --panel-footer-bg-default: var(--neutral-100);
   --checkbox-bg: var(--background-color);
-  --checkbox-checked-bg: var(--button-gradient-primary);
+  --checkbox-checked-bg: var(--primary-500);
   --checkbox-border-color: var(--neutral-400);
   --checkbox-border-radius: 4px;
+  --component-overlay-bg: rgba(255, 255, 255, 0.75);
+  --table-overlay-bg: var(--component-overlay-bg);
   --modal-overlay-bg: rgba(15, 23, 42, 0.4);
   --modal-backdrop-blur: 4px;
   --layout-header-height: 70px;
@@ -129,9 +134,10 @@
 }
 
 .k-input-label {
-  font-size: var(--font-size-xs);
-  color: var(--font-color-secondary);
-  margin-bottom: calc(var(--gap-sm) / 2);
+  font-size: var(--font-size-sm, 13px);
+  color: var(--input-label-color, var(--font-color-primary, currentColor));
+  margin-bottom: calc(var(--gap-sm, 8px) / 2);
   display: block;
   font-weight: 500;
+  line-height: 1.4;
 }

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,47 +5,56 @@
 		template(v-if="bulkActions.length > 3")
 			KCombobox(
 				:dataProvider="dp" 
-				v-model="selected" 
+				v-model="internalSelected" 
 				labelField="label" 
 				closeOnSelect 
-				:disabled="selectedRows.length === 0" 
-				placeholder="Select Action"
+				:disabled="!selectAll && selectedRows.length === 0" 
+				:placeholder="t('Select an action')"
 				class="action-select"
 			)
 			KButton(
-				@click="doAction(selected)" 
+				@click="doAction(internalSelected)" 
 				size="small" 
-				:disabled="selectedRows.length === 0 || selected == undefined"
+				:disabled="(!selectAll && selectedRows.length === 0) || internalSelected == undefined"
 				class="execute-btn"
-			) Go
+			) {{ 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="!selectAll && 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 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>
@@ -58,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.d.vue.ts

@@ -1,15 +1,22 @@
 type __VLS_Props = {
-    model: any;
-    checkboxValue: any;
-    isDisabled: boolean;
+    model?: any;
+    modelValue?: any;
+    checkboxValue?: any;
+    isDisabled?: boolean;
     label?: string;
     validation?: 'success' | 'warning' | 'error' | null;
     validationText?: string;
+    idKey?: string;
+    indeterminate?: boolean;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
     "update:model": (value: any) => any;
+    "update:modelValue": (value: any) => any;
+    "update:indeterminate": (value: boolean) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     "onUpdate:model"?: ((value: any) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: any) => any) | undefined;
+    "onUpdate:indeterminate"?: ((value: boolean) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -1,10 +1,16 @@
 <template lang="pug">
 .KCheckbox-wrapper
-	label.KCheckbox.modern-checkbox
-		input(type="checkbox" v-model="formattedModel" :value="checkboxValue" :disabled="isDisabled")
-		.checkbox-box(:class="validation ? `is-${validation}` : ''")
+	label.KCheckbox.modern-checkbox(
+		role="checkbox"
+		:aria-checked="props.indeterminate ? 'mixed' : isChecked"
+		:aria-disabled="isDisabled"
+		tabindex="0"
+		@keydown.space.prevent="handleSpace"
+	)
+		input(ref="inputRef" type="checkbox" :checked="isChecked" :indeterminate.prop="props.indeterminate" :value="checkboxValue" :disabled="isDisabled" tabindex="-1" @change="handleSpace")
+		.checkbox-box(:class="[validation ? `is-${validation}` : '', { 'is-indeterminate': props.indeterminate }]")
 			.checkbox-checkmark
-				KIcon.icon(iconname="check")
+				KIcon.icon(:iconname="props.indeterminate ? 'minus' : 'check'")
 		.checkbox-label(v-if="$slots.label || $slots.default || label")
 			slot(name="label")
 				slot
@@ -13,20 +19,82 @@
 </template>
 
 <script setup>
-import { computed } from "vue";
+import { ref, computed, watch } from "vue";
 const props = defineProps({
-  model: { type: null, required: true },
-  checkboxValue: { type: null, required: true },
-  isDisabled: { type: Boolean, required: true },
+  model: { type: null, required: false },
+  modelValue: { type: null, required: false },
+  checkboxValue: { type: null, required: false },
+  isDisabled: { type: Boolean, required: false },
   label: { type: String, required: false },
   validation: { type: [String, null], required: false },
-  validationText: { type: String, required: false }
+  validationText: { type: String, required: false },
+  idKey: { type: String, required: false },
+  indeterminate: { type: Boolean, required: false }
 });
-const emit = defineEmits(["update:model"]);
+const emit = defineEmits(["update:model", "update:modelValue", "update:indeterminate"]);
 const formattedModel = computed({
-  get: () => props.model,
-  set: (value) => emit("update:model", value)
+  get: () => props.modelValue !== void 0 ? props.modelValue : props.model,
+  set: (value) => {
+    emit("update:model", value);
+    emit("update:modelValue", value);
+  }
+});
+const inputRef = ref(null);
+watch(() => props.indeterminate, (val) => {
+  if (inputRef.value) {
+    inputRef.value.indeterminate = !!val;
+  }
+}, { immediate: true, flush: "post" });
+const getId = (item) => {
+  if (item && typeof item === "object") {
+    const key = props.idKey;
+    if (key && item[key] !== void 0 && item[key] !== null) {
+      return item[key];
+    }
+    return item.id ?? item._id ?? item.key ?? item.value;
+  }
+  return item;
+};
+const findModelIndex = (arr, value) => {
+  const refIdx = arr.indexOf(value);
+  if (refIdx > -1) return refIdx;
+  const targetId = getId(value);
+  if (targetId !== void 0 && targetId !== null) {
+    return arr.findIndex((item) => {
+      const itemId = getId(item);
+      return itemId !== void 0 && itemId !== null && itemId === targetId;
+    });
+  }
+  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 (props.indeterminate) {
+    emit("update:indeterminate", false);
+  }
+  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 {
+    if (props.indeterminate) {
+      formattedModel.value = true;
+    } else {
+      formattedModel.value = !formattedModel.value;
+    }
+  }
+};
 </script>
 
 <style scoped>
@@ -37,13 +105,20 @@ const formattedModel = computed({
   cursor: pointer;
   user-select: none;
   transition: all var(--transition-fast);
+  width: fit-content;
 }
 .KCheckbox.modern-checkbox:hover .checkbox-box {
   border-color: var(--primary-500);
   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;
@@ -83,14 +158,20 @@ const formattedModel = computed({
   color: var(--font-color-primary);
   line-height: 1.5;
 }
-.KCheckbox.modern-checkbox input:checked + .checkbox-box {
+.KCheckbox.modern-checkbox input:checked + .checkbox-box,
+.KCheckbox.modern-checkbox input:indeterminate + .checkbox-box,
+.KCheckbox.modern-checkbox .checkbox-box.is-indeterminate {
   border-color: var(--primary-500);
 }
-.KCheckbox.modern-checkbox input:checked + .checkbox-box::before {
+.KCheckbox.modern-checkbox input:checked + .checkbox-box::before,
+.KCheckbox.modern-checkbox input:indeterminate + .checkbox-box::before,
+.KCheckbox.modern-checkbox .checkbox-box.is-indeterminate::before {
   opacity: 1;
   transform: scale(1);
 }
-.KCheckbox.modern-checkbox input:checked + .checkbox-box .checkbox-checkmark .icon {
+.KCheckbox.modern-checkbox input:checked + .checkbox-box .checkbox-checkmark .icon,
+.KCheckbox.modern-checkbox input:indeterminate + .checkbox-box .checkbox-checkmark .icon,
+.KCheckbox.modern-checkbox .checkbox-box.is-indeterminate .checkbox-checkmark .icon {
   display: block;
 }
 .KCheckbox.modern-checkbox input:disabled + .checkbox-box {

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

@@ -1,15 +1,22 @@
 type __VLS_Props = {
-    model: any;
-    checkboxValue: any;
-    isDisabled: boolean;
+    model?: any;
+    modelValue?: any;
+    checkboxValue?: any;
+    isDisabled?: boolean;
     label?: string;
     validation?: 'success' | 'warning' | 'error' | null;
     validationText?: string;
+    idKey?: string;
+    indeterminate?: boolean;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
     "update:model": (value: any) => any;
+    "update:modelValue": (value: any) => any;
+    "update:indeterminate": (value: boolean) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     "onUpdate:model"?: ((value: any) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: any) => any) | undefined;
+    "onUpdate:indeterminate"?: ((value: boolean) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -2,27 +2,50 @@ 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;
+    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;
 };
-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<{
+    "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;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+    "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>;
+    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;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;