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

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

@@ -27,8 +27,17 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
         type: BooleanConstructor;
         default: boolean;
     };
+    isOpen: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    showClear: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
     "update:modelValue": (value: string) => any;
+    "update:isOpen": (value: boolean) => any;
 }, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     step: {
         type: NumberConstructor;
@@ -58,12 +67,23 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
         type: BooleanConstructor;
         default: boolean;
     };
+    isOpen: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    showClear: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }>> & Readonly<{
     "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+    "onUpdate:isOpen"?: ((value: boolean) => any) | undefined;
 }>, {
+    isOpen: boolean;
     disabled: boolean;
     modelValue: string;
     placeholder: string;
+    showClear: boolean;
     format: string;
     step: number;
     startHour: string;

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

@@ -1,20 +1,21 @@
 <script setup>
-import { computed } from "vue";
+import { computed, watch } from "vue";
 import { useKHourPickerLogic, KHourPickerDefaultProps } from "./KHourPicker.logic";
 import { usePresetComponent } from "../../composables/usePresetComponent";
 import KHourPickerDefault from "../../presets/default/components/KHourPicker/KHourPicker.vue";
 const props = defineProps(KHourPickerDefaultProps);
-const emit = defineEmits(["update:modelValue"]);
+const emit = defineEmits(["update:modelValue", "update:isOpen"]);
 const {
   isOpen,
-  inputValue,
-  toggleDropdown,
+  maskedModel,
+  textboxClicked,
   closeDropdown,
-  onTimeSelect
-} = useKHourPickerLogic(props, emit);
+  onTimeSelect,
+  clear
+} = useKHourPickerLogic(props);
 const presetComponent = usePresetComponent("KHourPicker", KHourPickerDefault);
 const templateProps = computed(() => ({
-  modelValue: inputValue.value,
+  maskedModel: maskedModel.value,
   isOpen: isOpen.value,
   step: props.step,
   format: props.format,
@@ -22,19 +23,31 @@ const templateProps = computed(() => ({
   endHour: props.endHour,
   placeholder: props.placeholder,
   disabled: props.disabled,
-  toggleDropdown,
+  showClear: props.showClear,
+  textboxClicked,
   closeDropdown,
-  onTimeSelect
+  onTimeSelect,
+  clear
 }));
-const handleUpdateIsOpen = (val) => {
+const updateIsOpen = (val) => {
   isOpen.value = val;
 };
+const updateMaskedModel = (val) => {
+  maskedModel.value = val;
+};
+watch(maskedModel, (newVal) => {
+  emit("update:modelValue", newVal);
+});
+watch(isOpen, (newVal) => {
+  emit("update:isOpen", newVal);
+});
 </script>
 
 <template lang="pug">
 component(
 	:is="presetComponent" 
-	v-bind="templateProps"
-	@update:isOpen="handleUpdateIsOpen"
+	v-bind="{...templateProps, ...$attrs}"
+	@update:isOpen="updateIsOpen"
+	@update:maskedModel="updateMaskedModel"
 )
 </template>

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

@@ -27,8 +27,17 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
         type: BooleanConstructor;
         default: boolean;
     };
+    isOpen: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    showClear: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
     "update:modelValue": (value: string) => any;
+    "update:isOpen": (value: boolean) => any;
 }, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     step: {
         type: NumberConstructor;
@@ -58,12 +67,23 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
         type: BooleanConstructor;
         default: boolean;
     };
+    isOpen: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    showClear: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }>> & Readonly<{
     "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+    "onUpdate:isOpen"?: ((value: boolean) => any) | undefined;
 }>, {
+    isOpen: boolean;
     disabled: boolean;
     modelValue: string;
     placeholder: string;
+    showClear: boolean;
     format: string;
     step: number;
     startHour: string;

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

@@ -6,6 +6,8 @@ export interface KHourPickerProps {
     modelValue?: string;
     placeholder?: string;
     disabled?: boolean;
+    isOpen?: boolean;
+    showClear?: boolean;
 }
 export declare const KHourPickerDefaultProps: {
     step: {
@@ -36,11 +38,20 @@ export declare const KHourPickerDefaultProps: {
         type: BooleanConstructor;
         default: boolean;
     };
+    isOpen: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    showClear: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 };
-export declare function useKHourPickerLogic(props: KHourPickerProps, emit: (event: string, ...args: any[]) => void): {
+export declare function useKHourPickerLogic(props: KHourPickerProps): {
     isOpen: import("vue").Ref<boolean, boolean>;
-    inputValue: import("vue").Ref<string, string>;
-    toggleDropdown: () => void;
+    maskedModel: import("vue").Ref<string, string>;
+    textboxClicked: () => void;
     closeDropdown: () => void;
     onTimeSelect: (time: string) => void;
+    clear: () => void;
 };

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

@@ -28,12 +28,20 @@ export const KHourPickerDefaultProps = {
   disabled: {
     type: Boolean,
     default: false
+  },
+  isOpen: {
+    type: Boolean,
+    default: false
+  },
+  showClear: {
+    type: Boolean,
+    default: false
   }
 };
-export function useKHourPickerLogic(props, emit) {
-  const isOpen = ref(false);
-  const inputValue = ref(props.modelValue || "");
-  const toggleDropdown = () => {
+export function useKHourPickerLogic(props) {
+  const isOpen = ref(props.isOpen || false);
+  const maskedModel = ref(props.modelValue || "");
+  const textboxClicked = () => {
     if (props.disabled) return;
     isOpen.value = !isOpen.value;
   };
@@ -41,18 +49,25 @@ export function useKHourPickerLogic(props, emit) {
     isOpen.value = false;
   };
   const onTimeSelect = (time) => {
-    inputValue.value = time;
-    emit("update:modelValue", time);
+    maskedModel.value = time;
+    closeDropdown();
+  };
+  const clear = () => {
+    maskedModel.value = "";
     closeDropdown();
   };
   watch(() => props.modelValue, (val) => {
-    inputValue.value = val || "";
+    maskedModel.value = val || "";
+  });
+  watch(() => props.isOpen, (val) => {
+    isOpen.value = !!val;
   });
   return {
     isOpen,
-    inputValue,
-    toggleDropdown,
+    maskedModel,
+    textboxClicked,
     closeDropdown,
-    onTimeSelect
+    onTimeSelect,
+    clear
   };
 }

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

@@ -1,4 +1,4 @@
-import { ref, computed } from "vue";
+import { ref, computed, watch } from "vue";
 export const KHourSelectDefaultProps = {
   step: {
     type: Number,
@@ -61,6 +61,9 @@ export function useKHourSelectLogic(props) {
   const selectTime = (time) => {
     selectedTime.value = time;
   };
+  watch(() => props.modelValue, (val) => {
+    selectedTime.value = val || "";
+  });
   return {
     timeSlots,
     selectedTime,

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

@@ -33,8 +33,8 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
         default: number;
     };
 }>> & Readonly<{}>, {
-    rotate: string | number;
     width: string | number;
+    rotate: string | number;
     height: string | number;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const _default: typeof __VLS_export;

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

@@ -33,8 +33,8 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
         default: number;
     };
 }>> & Readonly<{}>, {
-    rotate: string | number;
     width: string | number;
+    rotate: string | number;
     height: string | number;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const _default: typeof __VLS_export;

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

@@ -25,5 +25,5 @@ export declare const KIconDefaultProps: {
 export declare function useKIconLogic(props: KIconProps): {
     widthPx: import("vue").ComputedRef<string | undefined>;
     heightPx: import("vue").ComputedRef<string>;
-    iconComponent: import("vue").ComputedRef<any>;
+    iconComponent: import("vue").ComputedRef<string | null>;
 };

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

@@ -18,20 +18,25 @@ export const KIconDefaultProps = {
   }
 };
 export function useKIconLogic(props) {
-  const modules = import.meta.glob("../../presets/default/assets/svg/*.svg", { eager: true });
+  const modules = import.meta.glob("../../presets/default/assets/svg/*.svg", { eager: true, as: "raw" });
   const iconMap = {};
   for (const path in modules) {
     const match = path.match(/([^/]+)\.svg$/);
     if (match) {
-      iconMap[match[1]] = modules[path].default;
+      iconMap[match[1]] = modules[path];
     }
   }
-  const widthPx = computed(
-    () => typeof props.width === "number" || typeof props.width === "string" ? `${props.width}px` : props.width
-  );
-  const heightPx = computed(
-    () => typeof props.height === "number" || typeof props.height === "string" ? `${props.height}px` : props.height ? props.height : "12px"
-  );
+  const formatSize = (val) => {
+    if (val === void 0 || val === null || val === "") return void 0;
+    if (typeof val === "number") return `${val}px`;
+    if (typeof val === "string") {
+      if (/^\d+$/.test(val)) return `${val}px`;
+      return val;
+    }
+    return val;
+  };
+  const widthPx = computed(() => formatSize(props.width));
+  const heightPx = computed(() => formatSize(props.height) || "12px");
   const iconComponent = computed(() => iconMap[props.iconname] || null);
   return {
     widthPx,

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

@@ -8,7 +8,7 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
         default: boolean;
     };
     size: {
-        type: PropType<"small" | "medium" | "large">;
+        type: import("vue").PropType<"small" | "medium" | "large">;
         default: string;
     };
 }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
@@ -21,11 +21,11 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
         default: boolean;
     };
     size: {
-        type: PropType<"small" | "medium" | "large">;
+        type: import("vue").PropType<"small" | "medium" | "large">;
         default: string;
     };
 }>> & Readonly<{}>, {
-    size: any;
+    size: "small" | "large" | "medium";
     overlay: boolean;
     loading: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

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

@@ -8,7 +8,7 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
         default: boolean;
     };
     size: {
-        type: PropType<"small" | "medium" | "large">;
+        type: import("vue").PropType<"small" | "medium" | "large">;
         default: string;
     };
 }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
@@ -21,11 +21,11 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
         default: boolean;
     };
     size: {
-        type: PropType<"small" | "medium" | "large">;
+        type: import("vue").PropType<"small" | "medium" | "large">;
         default: string;
     };
 }>> & Readonly<{}>, {
-    size: any;
+    size: "small" | "large" | "medium";
     overlay: boolean;
     loading: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

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

@@ -1,3 +1,4 @@
+import { type PropType } from 'vue';
 export interface KLoaderProps {
     loading?: boolean;
     overlay?: boolean;
@@ -18,5 +19,11 @@ export declare const KLoaderDefaultProps: {
     };
 };
 export declare function useKLoaderLogic(props: KLoaderProps): {
-    loaderClasses: any;
+    loaderClasses: import("vue").ComputedRef<(string | {
+        'is-overlay': boolean | undefined;
+        'is-loading'?: undefined;
+    } | {
+        'is-loading': boolean | undefined;
+        'is-overlay'?: undefined;
+    })[]>;
 };

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

@@ -1,3 +1,4 @@
+import { computed } from "vue";
 export const KLoaderDefaultProps = {
   loading: {
     type: Boolean,

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

@@ -18,7 +18,7 @@ const templateProps = computed(() => ({
 <template lang="pug">
 component(
 	:is="presetComponent" 
-	v-bind="templateProps" 
+	v-bind="{ ...templateProps, ...$attrs }" 
 	@update:maskedValue="maskedValue = $event"
 	@clear="handleClear"
 )

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

@@ -4,13 +4,16 @@ import { usePresetComponent } from "../../composables/usePresetComponent";
 import { computed } from "vue";
 import KModalDefault from "../../presets/default/components/KModal/KModal.vue";
 const props = defineProps(KModalDefaultProps);
-const { opened, openModal, closeModal } = useKModalLogic(props);
+const useId = globalThis.useId || (() => `k-modal-${Math.random().toString(36).slice(2, 9)}`);
+const stableId = useId();
+const { modalId, opened, openModal, closeModal } = useKModalLogic(props, stableId);
 defineExpose({
   openModal,
   closeModal
 });
 const presetComponent = usePresetComponent("KModal", KModalDefault);
 const templateProps = computed(() => ({
+  modalId: modalId.value,
   opened: opened.value,
   closeModal
 }));

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

@@ -1,7 +1,9 @@
+export declare const KMODAL_PORTAL_ID_KEY = "KMODAL_PORTAL_ID";
 export interface KModalProps {
 }
 export declare const KModalDefaultProps: {};
-export declare function useKModalLogic(props: KModalProps): {
+export declare function useKModalLogic(props: KModalProps, stableId: string): {
+    modalId: import("vue").ComputedRef<string>;
     opened: import("vue").Ref<boolean, boolean>;
     openModal: () => void;
     closeModal: () => void;

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

@@ -1,6 +1,9 @@
-import { ref } from "vue";
+import { ref, provide, computed } from "vue";
+export const KMODAL_PORTAL_ID_KEY = "KMODAL_PORTAL_ID";
 export const KModalDefaultProps = {};
-export function useKModalLogic(props) {
+export function useKModalLogic(props, stableId) {
+  const modalId = computed(() => stableId);
+  provide(KMODAL_PORTAL_ID_KEY, modalId);
   const opened = ref(false);
   function openModal() {
     opened.value = true;
@@ -9,6 +12,7 @@ export function useKModalLogic(props) {
     opened.value = false;
   }
   return {
+    modalId,
     opened,
     openModal,
     closeModal

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

@@ -1,33 +1,10 @@
-declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
-    title: {
-        type: StringConstructor;
-        default: string;
-    };
-    noGap: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    flexContent: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
-    title: {
-        type: StringConstructor;
-        default: string;
-    };
-    noGap: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    flexContent: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-}>> & Readonly<{}>, {
+import { type KPanelProps } from './KPanel.logic.js';
+declare const __VLS_export: import("vue").DefineComponent<KPanelProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<KPanelProps> & Readonly<{}>, {
+    type: "default" | "primary" | "danger" | "success" | "warning" | "info";
     title: string;
     noGap: boolean;
     flexContent: boolean;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+    scrollable: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -1,14 +1,22 @@
 <script setup>
-import { useKPanelLogic, KPanelDefaultProps } from "./KPanel.logic";
+import { useKPanelLogic } from "./KPanel.logic";
 import { usePresetComponent } from "../../composables/usePresetComponent";
 import { computed } from "vue";
 import KPanelDefault from "../../presets/default/components/KPanel/KPanel.vue";
-const props = defineProps(KPanelDefaultProps);
-useKPanelLogic(props);
+const props = defineProps({
+  title: { type: String, required: false, default: "" },
+  noGap: { type: Boolean, required: false, default: true },
+  flexContent: { type: Boolean, required: false, default: false },
+  scrollable: { type: Boolean, required: false, default: false },
+  type: { type: String, required: false, default: "default" }
+});
 const presetComponent = usePresetComponent("KPanel", KPanelDefault);
 const templateProps = computed(() => ({
+  title: props.title,
   noGap: props.noGap,
-  flexContent: props.flexContent
+  flexContent: props.flexContent,
+  scrollable: props.scrollable,
+  type: props.type
 }));
 </script>
 

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

@@ -1,33 +1,10 @@
-declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
-    title: {
-        type: StringConstructor;
-        default: string;
-    };
-    noGap: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    flexContent: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
-    title: {
-        type: StringConstructor;
-        default: string;
-    };
-    noGap: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    flexContent: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-}>> & Readonly<{}>, {
+import { type KPanelProps } from './KPanel.logic.js';
+declare const __VLS_export: import("vue").DefineComponent<KPanelProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<KPanelProps> & Readonly<{}>, {
+    type: "default" | "primary" | "danger" | "success" | "warning" | "info";
     title: string;
     noGap: boolean;
     flexContent: boolean;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+    scrollable: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -2,6 +2,8 @@ export interface KPanelProps {
     title?: string;
     noGap?: boolean;
     flexContent?: boolean;
+    scrollable?: boolean;
+    type?: 'default' | 'primary' | 'danger' | 'success' | 'warning' | 'info';
 }
 export declare const KPanelDefaultProps: {
     title: {
@@ -16,5 +18,13 @@ export declare const KPanelDefaultProps: {
         type: BooleanConstructor;
         default: boolean;
     };
+    scrollable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    type: {
+        type: StringConstructor;
+        default: string;
+    };
 };
 export declare function useKPanelLogic(props: KPanelProps): {};

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

@@ -10,6 +10,14 @@ export const KPanelDefaultProps = {
   flexContent: {
     type: Boolean,
     default: false
+  },
+  scrollable: {
+    type: Boolean,
+    default: false
+  },
+  type: {
+    type: String,
+    default: "default"
   }
 };
 export function useKPanelLogic(props) {

package/dist/runtime/components/KTextbox/KTextbox.global.d.vue.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>;