@katlux/toolkit 0.1.0-beta.5 → 0.1.0-beta.50

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

@@ -5,16 +5,17 @@ import { computed } from "vue";
 import KTextboxDefault from "../../presets/default/components/KTextbox/KTextbox.vue";
 const props = defineProps(KTextboxDefaultProps);
 const emit = defineEmits(["update:modelValue"]);
-const { text, showClearIcon, clear } = useKTextboxLogic(props, emit);
+const { text, showClear, clear } = useKTextboxLogic(props, emit);
 const presetComponent = usePresetComponent("KTextbox", KTextboxDefault);
 const templateProps = computed(() => ({
   text: text.value,
-  showClearIcon: showClearIcon.value,
+  showClear: showClear.value,
   clear,
-  placeholder: props.placeholder
+  placeholder: props.placeholder,
+  type: props.type
 }));
 </script>
 
 <template lang="pug">
-component(:is="presetComponent" v-bind="templateProps" @update:text="text = $event")
+component(:is="presetComponent" v-bind="{ ...templateProps, ...$attrs }" @update:text="text = $event")
 </template>

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

@@ -1,7 +1,8 @@
+import { type KTextboxProps } from './KTextbox.logic.js';
 declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     modelValue: {
         type: StringConstructor;
-        required: boolean;
+        default: string;
     };
     placeholder: {
         type: StringConstructor;
@@ -11,12 +12,17 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
         type: BooleanConstructor;
         default: boolean;
     };
+    type: {
+        type: import("vue").PropType<KTextboxProps["type"]>;
+        default: string;
+        validator: (value: string) => boolean;
+    };
 }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
     "update:modelValue": (value: string) => any;
 }, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     modelValue: {
         type: StringConstructor;
-        required: boolean;
+        default: string;
     };
     placeholder: {
         type: StringConstructor;
@@ -26,9 +32,16 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
         type: BooleanConstructor;
         default: boolean;
     };
+    type: {
+        type: import("vue").PropType<KTextboxProps["type"]>;
+        default: string;
+        validator: (value: string) => boolean;
+    };
 }>> & Readonly<{
     "onUpdate:modelValue"?: ((value: string) => any) | undefined;
 }>, {
+    type: "number" | "text" | "url" | "search" | "password" | "email" | "tel" | undefined;
+    modelValue: string;
     placeholder: string;
     showClear: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

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

@@ -1,7 +1,8 @@
 export interface KTextboxProps {
-    modelValue: string;
-    placeholder: string;
+    modelValue?: string;
+    placeholder?: string;
     showClear?: boolean;
+    type?: 'text' | 'password' | 'email' | 'url' | 'tel' | 'search' | 'number';
 }
 export interface KTextboxEmits {
     (e: 'update:modelValue', value: string): void;
@@ -11,7 +12,7 @@ export interface KTextboxEmits {
  */
 export declare function useKTextboxLogic(props: KTextboxProps, emit: KTextboxEmits): {
     text: import("vue").WritableComputedRef<string, string>;
-    showClearIcon: import("vue").ComputedRef<boolean | undefined>;
+    showClear: import("vue").ComputedRef<boolean>;
     clear: () => void;
 };
 /**
@@ -20,7 +21,7 @@ export declare function useKTextboxLogic(props: KTextboxProps, emit: KTextboxEmi
 export declare const KTextboxDefaultProps: {
     modelValue: {
         type: StringConstructor;
-        required: boolean;
+        default: string;
     };
     placeholder: {
         type: StringConstructor;
@@ -30,4 +31,9 @@ export declare const KTextboxDefaultProps: {
         type: BooleanConstructor;
         default: boolean;
     };
+    type: {
+        type: import("vue").PropType<KTextboxProps["type"]>;
+        default: string;
+        validator: (value: string) => boolean;
+    };
 };

package/dist/runtime/components/KTextbox/KTextbox.logic.js

@@ -1,25 +1,25 @@
 import { computed } from "vue";
 export function useKTextboxLogic(props, emit) {
   const text = computed({
-    get: () => props.modelValue,
+    get: () => props.modelValue ?? "",
     set: (value) => emit("update:modelValue", value)
   });
-  const showClearIcon = computed(() => {
-    return props.showClear && text.value !== "";
+  const showClear = computed(() => {
+    return !!props.showClear && text.value !== "";
   });
   const clear = () => {
     text.value = "";
   };
   return {
     text,
-    showClearIcon,
+    showClear,
     clear
   };
 }
 export const KTextboxDefaultProps = {
   modelValue: {
     type: String,
-    required: true
+    default: ""
   },
   placeholder: {
     type: String,
@@ -28,5 +28,12 @@ export const KTextboxDefaultProps = {
   showClear: {
     type: Boolean,
     default: false
+  },
+  type: {
+    type: String,
+    default: "text",
+    validator: (value) => {
+      return ["text", "password", "email", "url", "tel", "search", "number"].includes(value);
+    }
   }
 };

package/dist/runtime/components/KTree/KTree.global.d.vue.ts

@@ -66,8 +66,8 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
     };
 }>> & Readonly<{}>, {
     disabled: boolean;
-    searchtext: string;
     labelField: string;
+    searchtext: string;
     multiSelect: boolean;
     iconField: string;
     isNodeSelected: (node: any) => boolean;

package/dist/runtime/components/KTree/KTree.global.vue.d.ts

@@ -66,8 +66,8 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
     };
 }>> & Readonly<{}>, {
     disabled: boolean;
-    searchtext: string;
     labelField: string;
+    searchtext: string;
     multiSelect: boolean;
     iconField: string;
     isNodeSelected: (node: any) => boolean;

package/dist/runtime/components/KTreePicker/KTreePicker.global.d.vue.ts

@@ -106,9 +106,9 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
     disabled: boolean;
     loading: boolean;
     modelValue: any;
-    searchbox: boolean;
-    placeholder: string;
     dataProvider: any;
+    placeholder: string;
+    searchbox: boolean;
     closeOnSelect: boolean;
     multiSelect: boolean;
     iconField: string;

package/dist/runtime/components/KTreePicker/KTreePicker.global.vue.d.ts

@@ -106,9 +106,9 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
     disabled: boolean;
     loading: boolean;
     modelValue: any;
-    searchbox: boolean;
-    placeholder: string;
     dataProvider: any;
+    placeholder: string;
+    searchbox: boolean;
     closeOnSelect: boolean;
     multiSelect: boolean;
     iconField: string;

package/dist/runtime/components/KTreePicker/KTreePicker.logic.d.ts

@@ -0,0 +1,77 @@
+import type { ADataProvider } from '@katlux/providers';
+export interface KTreePickerProps {
+    modelValue?: any;
+    dataProvider: ADataProvider;
+    labelField: string;
+    placeholder?: string;
+    disabled?: boolean;
+    closeOnSelect?: boolean;
+    idKey?: string;
+    parentKey?: string;
+    iconField?: string;
+    loading?: boolean;
+    multiSelect?: boolean;
+    searchbox?: boolean;
+}
+export declare const KTreePickerDefaultProps: {
+    modelValue: {
+        type: PropType<any>;
+        default: null;
+    };
+    dataProvider: {
+        type: PropType<ADataProvider>;
+        required: boolean;
+    };
+    labelField: {
+        type: StringConstructor;
+        required: boolean;
+    };
+    placeholder: {
+        type: StringConstructor;
+        default: string;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    closeOnSelect: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    idKey: {
+        type: StringConstructor;
+        default: string;
+    };
+    parentKey: {
+        type: StringConstructor;
+        default: string;
+    };
+    iconField: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    loading: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    multiSelect: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    searchbox: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+};
+export declare function useKTreePickerLogic(props: KTreePickerProps, emit: any): {
+    selectedItems: import("vue").Ref<import("@katlux/providers").TDataRow[] | null, import("@katlux/providers").TDataRow[] | null>;
+    isOptionsOpen: import("vue").Ref<boolean, boolean>;
+    searchtext: import("vue").Ref<string, string>;
+    selectItem: (option: import("../KCombobox/KCombobox.logic.js").ComboboxItem) => void;
+    isSelected: (option: import("../KCombobox/KCombobox.logic.js").ComboboxItem) => boolean | undefined;
+    getSelectedContent: () => import("@katlux/providers").TDataRow[];
+    toggleDropdown: () => void;
+    closeDropdown: () => void;
+    filteredOptions: import("vue").ComputedRef<import("@katlux/providers").TDataRow[]>;
+    loading: import("vue").ComputedRef<Boolean>;
+};

package/dist/runtime/composables/usePresetComponent.d.ts

@@ -1,2 +1,18 @@
 import { type Component } from 'vue';
+/**
+ * Registry mapping preset names to their respective module loaders (via import.meta.glob).
+ * Preset modules must inject their components here via a Nuxt Plugin.
+ */
+export declare const presetLoadersRegistry: Map<string, Record<string, () => Promise<any>>>;
+/**
+ * API for Nuxt modules to dynamically map their generated components
+ */
+export declare function registerPresetComponents(presetName: string, loaders: Record<string, () => Promise<any>>): void;
+/**
+ * Composable for dynamically loading preset components
+ *
+ * @param componentBaseName - Base name of the component (e.g., 'KButton')
+ * @param defaultComponent - The default preset component to fall back to
+ * @returns The resolved Async Component
+ */
 export declare function usePresetComponent(componentBaseName: string, defaultComponent: Component): import("vue").ComputedRef<any>;

package/dist/runtime/composables/usePresetComponent.js

@@ -1,8 +1,9 @@
 import { computed, defineAsyncComponent } from "vue";
 import { useAppConfig } from "#app";
-const componentCache = /* @__PURE__ */ new Map();
-const modernComponents = import.meta.glob("../../../../katlux-preset-modern/src/runtime/components/**/*.vue");
-const toolkitPresets = import.meta.glob("../presets/**/*.vue");
+export const presetLoadersRegistry = /* @__PURE__ */ new Map();
+export function registerPresetComponents(presetName, loaders) {
+  presetLoadersRegistry.set(presetName, loaders);
+}
 export function usePresetComponent(componentBaseName, defaultComponent) {
   const appConfig = useAppConfig();
   const activePreset = computed(() => appConfig.katluxToolkit?.activePreset || "default");
@@ -10,27 +11,31 @@ export function usePresetComponent(componentBaseName, defaultComponent) {
     if (activePreset.value === "default") {
       return defaultComponent;
     }
-    const cacheKey = `${activePreset.value}:${componentBaseName}`;
-    if (componentCache.has(cacheKey)) {
-      return componentCache.get(cacheKey);
-    }
     let loader;
-    if (activePreset.value === "modern") {
-      const path = `../../../../katlux-preset-modern/src/runtime/components/${componentBaseName}/${componentBaseName}.vue`;
-      loader = modernComponents[path];
-    } else {
-      const path = `../presets/${activePreset.value}/components/${componentBaseName}/${componentBaseName}.vue`;
-      loader = toolkitPresets[path];
+    const externalLoaders = presetLoadersRegistry.get(activePreset.value);
+    if (externalLoaders) {
+      const key = `./components/${componentBaseName}/${componentBaseName}.vue`;
+      loader = externalLoaders[key];
+    }
+    if (!loader) {
+      const internalLoaders = import.meta.glob([
+        "../presets/**/*.vue",
+        "../../runtime/presets/**/*.vue"
+      ]);
+      const internalKey = `../presets/${activePreset.value}/components/${componentBaseName}/${componentBaseName}.vue`;
+      loader = internalLoaders[internalKey];
+      if (!loader) {
+        const altKey = `../../runtime/presets/${activePreset.value}/components/${componentBaseName}/${componentBaseName}.vue`;
+        loader = internalLoaders[altKey];
+      }
     }
     if (!loader) {
       console.warn(`[${componentBaseName}] Preset "${activePreset.value}" not found, falling back to default`);
       return defaultComponent;
     }
-    const asyncComp = defineAsyncComponent({
+    return defineAsyncComponent({
       loader,
       errorComponent: defaultComponent
     });
-    componentCache.set(cacheKey, asyncComp);
-    return asyncComp;
   });
 }

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

@@ -20,14 +20,44 @@
   --neutral-700: #616161;
   --neutral-800: #424242;
   --neutral-900: #212121;
+  --yellow-100: #fef9c3;
+  --yellow-300: #fde047;
+  --yellow-500: #eab308;
+  --yellow-700: #a16207;
+  --yellow-900: #713f12;
+  --red-100: #fee2e2;
+  --red-300: #fca5a5;
+  --red-500: #ef4444;
+  --red-700: #b91c1c;
+  --red-900: #7f1d1d;
+  --blue-100: #dbeafe;
+  --blue-300: #93c5fd;
+  --blue-500: #3b82f6;
+  --blue-700: #1d4ed8;
+  --blue-900: #1e3a8a;
+  --pink-100: #fce7f3;
+  --pink-300: #f9a8d4;
+  --pink-500: #ec4899;
+  --pink-700: #be185d;
+  --pink-900: #831843;
+  --cyan-100: #cffafe;
+  --cyan-300: #67e8f9;
+  --cyan-500: #06b6d4;
+  --cyan-700: #0e7490;
+  --cyan-900: #164e63;
+  --green-100: #dcfce7;
+  --green-300: #86efac;
+  --green-500: #22c55e;
+  --green-700: #15803d;
+  --green-900: #14532d;
   --success-color: var(--accent-500);
   --success-color-light: var(--accent-100);
-  --warning-color: #ffc107;
-  --warning-color-light: #fff3e0;
-  --error-color: #f44336;
-  --error-color-light: #fbe9e7;
-  --info-color: var(--primary-500);
-  --info-color-light: var(--primary-100);
+  --warning-color: var(--yellow-500);
+  --warning-color-light: var(--yellow-100);
+  --error-color: var(--red-500);
+  --error-color-light: var(--red-100);
+  --info-color: var(--cyan-500);
+  --info-color-light: var(--cyan-100);
   --font-color-primary: var(--neutral-800);
   --font-color-secondary: var(--neutral-600);
   --font-color-heading: var(--neutral-900);
@@ -81,19 +111,39 @@
   --button-hover-bg-success: var(--accent-700);
   --button-bg-warning: var(--warning-color);
   --button-text-warning: var(--neutral-900);
-  --button-hover-bg-warning: #e6ac00;
+  --button-hover-bg-warning: var(--yellow-700);
   --button-bg-danger: var(--error-color);
   --button-text-danger: var(--font-color-light);
-  --button-hover-bg-danger: #d32f2f;
+  --button-hover-bg-danger: var(--red-700);
   --button-bg-info: var(--info-color);
   --button-text-info: var(--font-color-light);
-  --button-hover-bg-info: var(--primary-300);
+  --button-hover-bg-info: var(--cyan-700);
   --button-bg-light: var(--neutral-50);
   --button-text-light: var(--neutral-900);
   --button-hover-bg-light: var(--neutral-200);
   --button-bg-dark: var(--neutral-900);
   --button-text-dark: var(--font-color-light);
   --button-hover-bg-dark: var(--neutral-700);
+  --panel-bg-opacity: 1;
+  --panel-blur: 0px;
+  --panel-bg-default: var(--neutral-50);
+  --panel-header-bg-default: var(--neutral-100);
+  --panel-footer-bg-default: var(--neutral-100);
+  --panel-bg-primary: var(--blue-300);
+  --panel-header-bg-primary: var(--blue-500);
+  --panel-footer-bg-primary: var(--blue-100);
+  --panel-bg-success: var(--green-300);
+  --panel-header-bg-success: var(--green-500);
+  --panel-footer-bg-success: var(--green-100);
+  --panel-bg-warning: var(--yellow-300);
+  --panel-header-bg-warning: var(--yellow-500);
+  --panel-footer-bg-warning: var(--yellow-100);
+  --panel-bg-danger: var(--red-300);
+  --panel-header-bg-danger: var(--red-500);
+  --panel-footer-bg-danger: var(--red-100);
+  --panel-bg-info: var(--cyan-300);
+  --panel-header-bg-info: var(--cyan-500);
+  --panel-footer-bg-info: var(--cyan-100);
   --input-border-radius: var(--border-radius-sm);
   --input-border-color: var(--border-color-medium);
   --input-focus-border-color: var(--primary-500);
@@ -102,7 +152,7 @@
   --table-header-color: var(--neutral-700);
   --table-border-color: var(--neutral-300);
   --table-row-hover: var(--neutral-100);
-  --table-row-selected: #e3f2fd;
+  --table-row-selected: var(--blue-100);
   --checkbox-bg: var(--neutral-50);
   --checkbox-checked-bg: var(--primary-500);
   --checkbox-border-color: var(--border-color-medium);
@@ -114,6 +164,7 @@
   --component-gap: var(--gap-sm);
   --layover: var(--neutral-600);
   --modal-overlay-bg: rgba(0, 0, 0, 0.5);
+  --modal-backdrop-blur: 0px;
   --layout-header-height: 60px;
   --layout-header-bg: var(--background-color);
   --layout-sidebar-width: 200px;
@@ -127,12 +178,12 @@
   --input-button-hover-bg: var(--neutral-400);
   --input-button-font-color: var(--font-color-primary);
   --input-focus-border-color: var(--primary-500);
-  --button-hover-bg-danger: #d32f2f;
-  --button-hover-bg-info: var(--primary-300);
+  --button-hover-bg-danger: var(--red-700);
+  --button-hover-bg-info: var(--cyan-700);
   --button-hover-bg-light: var(--neutral-200);
   --button-hover-bg-primary: var(--primary-700);
   --button-hover-bg-success: var(--accent-700);
-  --button-hover-bg-warning: #e6ac00;
+  --button-hover-bg-warning: var(--yellow-700);
   --button-hover-bg-dark: var(--neutral-700);
   --button-text-danger: var(--font-color-light);
   --button-text-primary: var(--font-color-light);