@katlux/preset-modern 0.1.0-beta.6 → 0.1.0-beta.61

package/dist/module.json

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

package/dist/module.mjs

@@ -1,5 +1,6 @@
-import { defineNuxtModule, createResolver, installModule, addComponentsDir } from '@nuxt/kit';
+import { defineNuxtModule, createResolver, installModule, addPlugin, addComponentsDir } from '@nuxt/kit';
 import { createRequire } from 'node:module';
+import { existsSync } from 'node:fs';
 
 const module$1 = defineNuxtModule({
   meta: {
@@ -10,8 +11,10 @@ const module$1 = defineNuxtModule({
     const { resolve } = createResolver(import.meta.url);
     const _require = createRequire(import.meta.url);
     await installModule("@katlux/toolkit");
+    addPlugin(resolve("./runtime/plugin"));
     addComponentsDir({
       path: resolve("./runtime/components"),
+      prefix: "PresetModern",
       pathPrefix: false,
       extensions: ["vue"],
       global: true
@@ -22,10 +25,23 @@ const module$1 = defineNuxtModule({
     const currentAdditionalData = nuxt.options.vite.css.preprocessorOptions.scss.additionalData || "";
     const toolkitPkgJson = _require.resolve("@katlux/toolkit/package.json");
     const toolkitPkgDir = toolkitPkgJson.replace(/[\\/]package\.json$/, "");
-    const toolkitMixinsPath = `${toolkitPkgDir}/src/runtime/presets/default/assets/scss/mixins.scss`;
+    const toolkitRuntimeDir = nuxt.options.dev && existsSync(toolkitPkgDir + "/src/runtime") ? toolkitPkgDir + "/src/runtime" : toolkitPkgDir + "/dist/runtime";
+    const mixinsScssPath = toolkitRuntimeDir + "/presets/default/assets/scss/mixins.scss";
+    const mixinsCssPath = toolkitRuntimeDir + "/presets/default/assets/scss/mixins.css";
+    const toolkitMixinsPath = existsSync(mixinsScssPath) ? mixinsScssPath : mixinsCssPath;
     const toolkitScss = `@use "${toolkitMixinsPath}" as *;`;
+    nuxt.hook("vite:extendConfig", (config) => {
+      const server = config.server || (config.server = {});
+      const fs = server.fs || (server.fs = {});
+      const allow = fs.allow || (fs.allow = []);
+      if (!allow.includes(toolkitRuntimeDir)) {
+        allow.push(toolkitRuntimeDir);
+      }
+    });
     const presetScssPath = resolve("./runtime/assets/scss/index.scss");
-    nuxt.options.css.push(presetScssPath);
+    const presetCssPath = resolve("./runtime/assets/scss/index.css");
+    const actualPresetPath = existsSync(presetScssPath) ? presetScssPath : presetCssPath;
+    nuxt.options.css.push(actualPresetPath);
     nuxt.options.vite.css.preprocessorOptions.scss.additionalData = `${toolkitScss}
 ${currentAdditionalData}`;
   }

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

@@ -113,10 +113,17 @@
   --table-border-color: var(--neutral-200);
   --table-row-hover: var(--neutral-100);
   --table-row-selected: #eff6ff;
+  --panel-bg-opacity: 0.4;
+  --panel-blur: 12px;
+  --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-border-color: var(--neutral-400);
-  --modal-overlay-bg: rgba(15, 23, 42, 0.6);
+  --checkbox-border-radius: 4px;
+  --modal-overlay-bg: rgba(15, 23, 42, 0.4);
+  --modal-backdrop-blur: 4px;
   --layout-header-height: 70px;
   --layout-header-bg: var(--background-color);
   --layout-sidebar-width: 240px;

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

@@ -113,10 +113,17 @@
   --table-border-color: var(--neutral-200);
   --table-row-hover: var(--neutral-100);
   --table-row-selected: #eff6ff;
+  --panel-bg-opacity: 0.4;
+  --panel-blur: 12px;
+  --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-border-color: var(--neutral-400);
-  --modal-overlay-bg: rgba(15, 23, 42, 0.6);
+  --checkbox-border-radius: 4px;
+  --modal-overlay-bg: rgba(15, 23, 42, 0.4);
+  --modal-backdrop-blur: 4px;
   --layout-header-height: 70px;
   --layout-header-bg: var(--background-color);
   --layout-sidebar-width: 240px;

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

@@ -2,6 +2,9 @@ type __VLS_Props = {
     model: any;
     checkboxValue: any;
     isDisabled: boolean;
+    label?: string;
+    validation?: 'success' | 'warning' | 'error' | null;
+    validationText?: string;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
     "update:model": (value: any) => any;

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

@@ -1,18 +1,26 @@
 <template lang="pug">
-label.KCheckbox.modern-checkbox
-	input(type="checkbox" v-model="formattedModel" :value="checkboxValue" :disabled="isDisabled")
-	.checkbox-box
-		.checkbox-checkmark
-			KIcon.icon(iconname="check")
-	.checkbox-label
-		slot
+.KCheckbox-wrapper
+	label.KCheckbox.modern-checkbox
+		input(type="checkbox" v-model="formattedModel" :value="checkboxValue" :disabled="isDisabled")
+		.checkbox-box(:class="validation ? `is-${validation}` : ''")
+			.checkbox-checkmark
+				KIcon.icon(iconname="check")
+		.checkbox-label(v-if="$slots.label || $slots.default || label")
+			slot(name="label")
+				slot
+					| {{ label }}
+	span.validation-text(v-if="validation && ['success', 'warning', 'error'].includes(validation) && validationText" :class="`is-${validation}`") {{ validationText }}
 </template>
 
 <script setup>
+import { computed } from "vue";
 const props = defineProps({
   model: { type: null, required: true },
   checkboxValue: { type: null, required: true },
-  isDisabled: { type: Boolean, required: true }
+  isDisabled: { type: Boolean, required: true },
+  label: { type: String, required: false },
+  validation: { type: [String, null], required: false },
+  validationText: { type: String, required: false }
 });
 const emit = defineEmits(["update:model"]);
 const formattedModel = computed({
@@ -42,7 +50,7 @@ const formattedModel = computed({
   width: 22px;
   height: 22px;
   border: 2px solid var(--neutral-400);
-  border-radius: var(--border-radius-sm);
+  border-radius: var(--checkbox-border-radius, 4px);
   background: var(--background-color);
   transition: all var(--transition-bounce);
   display: flex;

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

@@ -2,6 +2,9 @@ type __VLS_Props = {
     model: any;
     checkboxValue: any;
     isDisabled: boolean;
+    label?: string;
+    validation?: 'success' | 'warning' | 'error' | null;
+    validationText?: string;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
     "update:model": (value: any) => any;

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

@@ -9,6 +9,8 @@ type __VLS_Props = {
     headerSlots?: Record<string, any>;
     columnHeaders?: Record<string, string>;
     columnWidths?: Record<string, string>;
+    emptyStateText?: string;
+    emptyFilterStateText?: string;
 };
 type __VLS_ModelProps = {
     'selectedRows'?: any[];

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

@@ -19,6 +19,10 @@
 					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")
@@ -51,7 +55,9 @@ const props = defineProps({
   cellSlots: { type: Object, required: false },
   headerSlots: { type: Object, required: false },
   columnHeaders: { type: Object, required: false },
-  columnWidths: { 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;
@@ -152,6 +158,11 @@ const getColumnStyle = (field) => {
 .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;
 }

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

@@ -9,6 +9,8 @@ type __VLS_Props = {
     headerSlots?: Record<string, any>;
     columnHeaders?: Record<string, string>;
     columnWidths?: Record<string, string>;
+    emptyStateText?: string;
+    emptyFilterStateText?: string;
 };
 type __VLS_ModelProps = {
     'selectedRows'?: any[];

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

@@ -3,6 +3,7 @@ type __VLS_Props = {
     showClearIcon: boolean;
     clear: () => void;
     placeholder: string;
+    type: string;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
     "update:text": (value: string) => any;

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

@@ -1,16 +1,18 @@
 <template lang="pug">
 .KTextbox.modern-textbox
-	input(type="text" v-model="text" :placeholder="placeholder")
+	input(:type="props.type" v-model="text" :placeholder="placeholder")
 	.clear-button(v-if="showClearIcon" @click="clear")
 		KIcon(iconname="close" width="16" height="16")
 </template>
 
 <script setup>
+import { computed } from "vue";
 const props = defineProps({
   text: { type: String, required: true },
   showClearIcon: { type: Boolean, required: true },
   clear: { type: Function, required: true },
-  placeholder: { type: String, required: true }
+  placeholder: { type: String, required: true },
+  type: { type: String, required: true }
 });
 const emit = defineEmits(["update:text"]);
 const text = computed({

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

@@ -3,6 +3,7 @@ type __VLS_Props = {
     showClearIcon: boolean;
     clear: () => void;
     placeholder: string;
+    type: string;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
     "update:text": (value: string) => any;

package/dist/runtime/plugin.d.ts

@@ -0,0 +1,2 @@
+declare const _default: any;
+export default _default;

package/dist/runtime/plugin.js

@@ -0,0 +1,21 @@
+import { defineNuxtPlugin } from "#app";
+import { registerPresetComponents } from "#imports";
+export default defineNuxtPlugin(() => {
+  const loaders = {
+    "./components/KBulkActions/KBulkActions.vue": () => import("./components/KBulkActions/KBulkActions.vue"),
+    "./components/KButton/KButton.vue": () => import("./components/KButton/KButton.vue"),
+    "./components/KCheckbox/KCheckbox.vue": () => import("./components/KCheckbox/KCheckbox.vue"),
+    "./components/KDatatable/KDatatable.vue": () => import("./components/KDatatable/KDatatable.vue"),
+    "./components/KMaskTextbox/KMaskTextbox.vue": () => import("./components/KMaskTextbox/KMaskTextbox.vue"),
+    "./components/KPagination/KPagination.vue": () => import("./components/KPagination/KPagination.vue"),
+    "./components/KRangeSlider/KRangeSlider.vue": () => import("./components/KRangeSlider/KRangeSlider.vue"),
+    "./components/KSlider/KSlider.vue": () => import("./components/KSlider/KSlider.vue"),
+    "./components/KTextarea/KTextarea.vue": () => import("./components/KTextarea/KTextarea.vue"),
+    "./components/KTextbox/KTextbox.vue": () => import("./components/KTextbox/KTextbox.vue")
+  };
+  if (typeof registerPresetComponents === "function") {
+    registerPresetComponents("modern", loaders);
+  } else {
+    console.warn("Katlux preset-modern: registerPresetComponents not found in imports. Ensure @katlux/toolkit is installed and loaded.");
+  }
+});

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@katlux/preset-modern",
-	"version": "0.1.0-beta.6",
+	"version": "0.1.0-beta.61",
 	"description": "Modern default design preset and styling variables for Katlux components",
 	"author": "Katlux",
 	"license": "MIT",
@@ -21,7 +21,7 @@
 	},
 	"dependencies": {
 		"@katlux/toolkit": "*",
-		"@nuxt/kit": "^3.20.1"
+		"@nuxt/kit": "^3.12.0"
 	},
 	"files": [
 		"dist"