@katlux/toolkit 0.1.0-beta.44 → 0.1.0-beta.45

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "@katlux/toolkit",
   "configKey": "katluxToolkit",
-  "version": "0.1.0-beta.44",
+  "version": "0.1.0-beta.45",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "3.6.1"

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

@@ -86,13 +86,13 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
     "onUpdate:modelValue"?: ((value: import("@katlux/providers").TDataRow | import("@katlux/providers").TDataRow[] | null) => any) | undefined;
 }>, {
     disabled: boolean;
+    modelValue: import("@katlux/providers").TDataRow | import("@katlux/providers").TDataRow[] | null;
     searchbox: boolean;
     placeholder: string;
     closeOnSelect: boolean;
     multiSelect: boolean;
     maxSelectedDisplay: string | number | boolean;
     visibleFields: String[];
-    modelValue: import("@katlux/providers").TDataRow | import("@katlux/providers").TDataRow[] | null;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -86,13 +86,13 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
     "onUpdate:modelValue"?: ((value: import("@katlux/providers").TDataRow | import("@katlux/providers").TDataRow[] | null) => any) | undefined;
 }>, {
     disabled: boolean;
+    modelValue: import("@katlux/providers").TDataRow | import("@katlux/providers").TDataRow[] | null;
     searchbox: boolean;
     placeholder: string;
     closeOnSelect: boolean;
     multiSelect: boolean;
     maxSelectedDisplay: string | number | boolean;
     visibleFields: String[];
-    modelValue: import("@katlux/providers").TDataRow | import("@katlux/providers").TDataRow[] | null;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -15,6 +15,10 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
         type: BooleanConstructor;
         default: boolean;
     };
+    showClear: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     calendarDefinedDays: {
         type: import("vue").PropType<IDefinedDay[]>;
         default: () => never[];
@@ -46,6 +50,10 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
         type: BooleanConstructor;
         default: boolean;
     };
+    showClear: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     calendarDefinedDays: {
         type: import("vue").PropType<IDefinedDay[]>;
         default: () => never[];
@@ -65,6 +73,7 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
     day: string | Date;
     modelValue: string | Date;
     format: string;
+    showClear: boolean;
     calendarDefinedDays: IDefinedDay[];
     calendarMarkedDays: IMarkedDay[];
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

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

@@ -20,6 +20,7 @@ const templateProps = computed(() => ({
   _date: _date.value,
   calendarDay: calendarDay.value,
   format: props.format,
+  showClear: props.showClear,
   calendarDefinedDays: props.calendarDefinedDays,
   calendarMarkedDays: props.calendarMarkedDays,
   textboxClicked,

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

@@ -15,6 +15,10 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
         type: BooleanConstructor;
         default: boolean;
     };
+    showClear: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     calendarDefinedDays: {
         type: import("vue").PropType<IDefinedDay[]>;
         default: () => never[];
@@ -46,6 +50,10 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
         type: BooleanConstructor;
         default: boolean;
     };
+    showClear: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     calendarDefinedDays: {
         type: import("vue").PropType<IDefinedDay[]>;
         default: () => never[];
@@ -65,6 +73,7 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
     day: string | Date;
     modelValue: string | Date;
     format: string;
+    showClear: boolean;
     calendarDefinedDays: IDefinedDay[];
     calendarMarkedDays: IMarkedDay[];
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

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

@@ -5,6 +5,7 @@ export interface KDatePickerProps {
     day?: Date | string;
     modelValue?: Date | string;
     isOpen?: boolean;
+    showClear?: boolean;
     calendarDefinedDays: IDefinedDay[];
     calendarMarkedDays: IMarkedDay[];
 }
@@ -25,6 +26,10 @@ export declare const KDatePickerDefaultProps: {
         type: BooleanConstructor;
         default: boolean;
     };
+    showClear: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     calendarDefinedDays: {
         type: PropType<IDefinedDay[]>;
         default: () => never[];

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

@@ -16,6 +16,10 @@ export const KDatePickerDefaultProps = {
     type: Boolean,
     default: false
   },
+  showClear: {
+    type: Boolean,
+    default: false
+  },
   calendarDefinedDays: {
     type: Array,
     default: () => []
@@ -29,6 +33,34 @@ export function useKDatePickerLogic(props) {
   const _date = ref("");
   const maskedModel = ref("");
   const calendarShow = ref(false);
+  watch(maskedModel, (newVal) => {
+    if (newVal === "") {
+      _date.value = "";
+      return;
+    }
+    const format = props.format;
+    let day = "", month = "", year = "";
+    let rawIdx = 0;
+    for (let i = 0; i < format.length; i++) {
+      const char = format[i];
+      if (char === "M") {
+        month += newVal[rawIdx] || "";
+        rawIdx++;
+      } else if (char === "D") {
+        day += newVal[rawIdx] || "";
+        rawIdx++;
+      } else if (char === "Y") {
+        year += newVal[rawIdx] || "";
+        rawIdx++;
+      }
+    }
+    if (month.length === 2 && day.length === 2 && year.length === 4) {
+      const d = new Date(parseInt(year), parseInt(month) - 1, parseInt(day));
+      if (!isNaN(d.getTime())) {
+        _date.value = d;
+      }
+    }
+  });
   const textboxClicked = () => {
     calendarShow.value = true;
   };

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

@@ -11,6 +11,18 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
         type: (DateConstructor | StringConstructor)[];
         default: undefined;
     };
+    modelValue: {
+        type: (DateConstructor | StringConstructor)[];
+        default: undefined;
+    };
+    isOpen: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    showClear: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     timeStep: {
         type: NumberConstructor;
         default: number;
@@ -23,7 +35,12 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
         type: import("vue").PropType<IMarkedDay[]>;
         default: () => never[];
     };
-}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    "update:modelValue": (value: string | Date) => any;
+    "update:maskedModel": (value: string) => any;
+    "update:calendarShow": (value: boolean) => any;
+    "update:isOpen": (value: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     format: {
         type: StringConstructor;
         default: string;
@@ -36,6 +53,18 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
         type: (DateConstructor | StringConstructor)[];
         default: undefined;
     };
+    modelValue: {
+        type: (DateConstructor | StringConstructor)[];
+        default: undefined;
+    };
+    isOpen: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    showClear: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     timeStep: {
         type: NumberConstructor;
         default: number;
@@ -48,9 +77,17 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
         type: import("vue").PropType<IMarkedDay[]>;
         default: () => never[];
     };
-}>> & Readonly<{}>, {
+}>> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string | Date) => any) | undefined;
+    "onUpdate:maskedModel"?: ((value: string) => any) | undefined;
+    "onUpdate:calendarShow"?: ((value: boolean) => any) | undefined;
+    "onUpdate:isOpen"?: ((value: boolean) => any) | undefined;
+}>, {
+    isOpen: boolean;
     day: string | Date;
+    modelValue: string | Date;
     format: string;
+    showClear: boolean;
     calendarDefinedDays: IDefinedDay[];
     calendarMarkedDays: IMarkedDay[];
     timeFormat: string;

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

@@ -1,9 +1,10 @@
 <script setup>
 import { useKDateTimePickerLogic, KDateTimePickerDefaultProps } from "./KDateTimePicker.logic";
 import { usePresetComponent } from "../../composables/usePresetComponent";
-import { computed } from "vue";
+import { computed, watch } from "vue";
 import KDateTimePickerDefault from "../../presets/default/components/KDateTimePicker/KDateTimePicker.vue";
 const props = defineProps(KDateTimePickerDefaultProps);
+const emit = defineEmits(["update:maskedModel", "update:calendarShow", "update:modelValue", "update:isOpen"]);
 const {
   _date,
   _time,
@@ -26,6 +27,7 @@ const templateProps = computed(() => ({
   timeStep: props.timeStep,
   calendarDefinedDays: props.calendarDefinedDays,
   calendarMarkedDays: props.calendarMarkedDays,
+  showClear: props.showClear,
   textboxClicked,
   dateSelected,
   timeSelected
@@ -36,6 +38,12 @@ const updateMaskedModel = (val) => {
 const updateCalendarShow = (val) => {
   calendarShow.value = val;
 };
+watch(_date, (newDate) => {
+  emit("update:modelValue", newDate);
+});
+watch(calendarShow, (newVal) => {
+  emit("update:isOpen", newVal);
+});
 </script>
 
 <template lang="pug">

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

@@ -11,6 +11,18 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
         type: (DateConstructor | StringConstructor)[];
         default: undefined;
     };
+    modelValue: {
+        type: (DateConstructor | StringConstructor)[];
+        default: undefined;
+    };
+    isOpen: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    showClear: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     timeStep: {
         type: NumberConstructor;
         default: number;
@@ -23,7 +35,12 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
         type: import("vue").PropType<IMarkedDay[]>;
         default: () => never[];
     };
-}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    "update:modelValue": (value: string | Date) => any;
+    "update:maskedModel": (value: string) => any;
+    "update:calendarShow": (value: boolean) => any;
+    "update:isOpen": (value: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     format: {
         type: StringConstructor;
         default: string;
@@ -36,6 +53,18 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
         type: (DateConstructor | StringConstructor)[];
         default: undefined;
     };
+    modelValue: {
+        type: (DateConstructor | StringConstructor)[];
+        default: undefined;
+    };
+    isOpen: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    showClear: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     timeStep: {
         type: NumberConstructor;
         default: number;
@@ -48,9 +77,17 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
         type: import("vue").PropType<IMarkedDay[]>;
         default: () => never[];
     };
-}>> & Readonly<{}>, {
+}>> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string | Date) => any) | undefined;
+    "onUpdate:maskedModel"?: ((value: string) => any) | undefined;
+    "onUpdate:calendarShow"?: ((value: boolean) => any) | undefined;
+    "onUpdate:isOpen"?: ((value: boolean) => any) | undefined;
+}>, {
+    isOpen: boolean;
     day: string | Date;
+    modelValue: string | Date;
     format: string;
+    showClear: boolean;
     calendarDefinedDays: IDefinedDay[];
     calendarMarkedDays: IMarkedDay[];
     timeFormat: string;

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

@@ -4,6 +4,9 @@ export interface KDateTimePickerProps {
     format?: string;
     timeFormat?: string;
     day?: Date | string;
+    modelValue?: Date | string;
+    isOpen?: boolean;
+    showClear?: boolean;
     timeStep?: number;
     calendarDefinedDays?: IDefinedDay[];
     calendarMarkedDays?: IMarkedDay[];
@@ -21,6 +24,18 @@ export declare const KDateTimePickerDefaultProps: {
         type: (DateConstructor | StringConstructor)[];
         default: undefined;
     };
+    modelValue: {
+        type: (DateConstructor | StringConstructor)[];
+        default: undefined;
+    };
+    isOpen: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    showClear: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     timeStep: {
         type: NumberConstructor;
         default: number;

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

@@ -1,4 +1,4 @@
-import { ref, onMounted, computed } from "vue";
+import { ref, watch, onMounted, computed } from "vue";
 export const KDateTimePickerDefaultProps = {
   format: {
     type: String,
@@ -12,6 +12,18 @@ export const KDateTimePickerDefaultProps = {
     type: [Date, String],
     default: void 0
   },
+  modelValue: {
+    type: [Date, String],
+    default: void 0
+  },
+  isOpen: {
+    type: Boolean,
+    default: false
+  },
+  showClear: {
+    type: Boolean,
+    default: false
+  },
   timeStep: {
     type: Number,
     default: 30
@@ -30,22 +42,84 @@ export function useKDateTimePickerLogic(props) {
   const _time = ref("");
   const maskedModel = ref("");
   const calendarShow = ref(false);
+  watch(maskedModel, (newVal) => {
+    if (newVal === "") {
+      _date.value = "";
+      _time.value = "";
+      return;
+    }
+    const format = props.format || "MM-DD-YYYY HH:mm";
+    let day = "", month = "", year = "", hours = "", minutes = "";
+    let rawIdx = 0;
+    for (let i = 0; i < format.length; i++) {
+      const char = format[i];
+      if (char === "M") {
+        month += newVal[rawIdx] || "";
+        rawIdx++;
+      } else if (char === "D") {
+        day += newVal[rawIdx] || "";
+        rawIdx++;
+      } else if (char === "Y") {
+        year += newVal[rawIdx] || "";
+        rawIdx++;
+      } else if (char === "H") {
+        hours += newVal[rawIdx] || "";
+        rawIdx++;
+      } else if (char === "m") {
+        minutes += newVal[rawIdx] || "";
+        rawIdx++;
+      }
+    }
+    if (month.length === 2 && day.length === 2 && year.length === 4) {
+      const d = new Date(parseInt(year), parseInt(month) - 1, parseInt(day));
+      if (hours.length === 2 && minutes.length === 2) {
+        d.setHours(parseInt(hours));
+        d.setMinutes(parseInt(minutes));
+        _time.value = `${hours}:${minutes}`;
+      }
+      if (!isNaN(d.getTime())) {
+        _date.value = d;
+      }
+    }
+  });
   const textboxClicked = () => {
     calendarShow.value = true;
   };
   const dateSelected = (date) => {
-    _date.value = date;
+    const newDate = new Date(date);
+    if (_time.value) {
+      const [h, m] = _time.value.split(":").map(Number);
+      newDate.setHours(h);
+      newDate.setMinutes(m);
+    } else {
+      _time.value = "00:00";
+      newDate.setHours(0);
+      newDate.setMinutes(0);
+    }
+    _date.value = newDate;
     updateMaskedModel();
   };
   const timeSelected = (time) => {
     _time.value = time;
+    if (_date.value) {
+      const current = _date.value instanceof Date ? _date.value : new Date(_date.value);
+      const newDate = new Date(current);
+      const [h, m] = time.split(":").map(Number);
+      newDate.setHours(h);
+      newDate.setMinutes(m);
+      _date.value = newDate;
+    }
     updateMaskedModel();
     calendarShow.value = false;
   };
   const updateMaskedModel = () => {
-    if (_date.value && _time.value) {
-      const dateStr = formatDate(_date.value);
-      maskedModel.value = `${dateStr} ${_time.value}`;
+    if (_date.value) {
+      const d = _date.value instanceof Date ? _date.value : new Date(_date.value);
+      if (!isNaN(d.getTime())) {
+        const dateStr = formatDate(d);
+        const timeStr = _time.value || "00:00";
+        maskedModel.value = `${dateStr} ${timeStr}`;
+      }
     }
   };
   const formatDate = (date) => {
@@ -60,20 +134,46 @@ export function useKDateTimePickerLogic(props) {
     return formattedDate;
   };
   const calendarDay = computed(() => {
-    if (props.day) {
-      return props.day;
+    const val = props.modelValue || props.day;
+    if (val) {
+      return val;
     }
     return /* @__PURE__ */ new Date();
   });
   onMounted(() => {
-    if (props.day) {
-      _date.value = props.day;
-      if (typeof _date.value === "string" && _date.value.includes(":")) {
-        const parts = _date.value.split(" ");
-        _time.value = parts[1] || "";
+    syncValue(props.modelValue || props.day);
+    if (props.isOpen) {
+      calendarShow.value = props.isOpen;
+    }
+  });
+  const syncValue = (val) => {
+    if (!val) return;
+    if (val instanceof Date) {
+      _date.value = val;
+      const h = val.getHours().toString().padStart(2, "0");
+      const m = val.getMinutes().toString().padStart(2, "0");
+      _time.value = `${h}:${m}`;
+    } else if (typeof val === "string") {
+      if (val.includes(" ")) {
+        const parts = val.split(" ");
+        _date.value = parts[0];
+        _time.value = parts[1];
+      } else if (val.includes(":")) {
+        _time.value = val;
+      } else {
+        _date.value = val;
       }
-      updateMaskedModel();
     }
+    updateMaskedModel();
+  };
+  watch(() => props.modelValue, (newVal) => {
+    syncValue(newVal);
+  });
+  watch(() => props.day, (newDay) => {
+    syncValue(newDay);
+  });
+  watch(() => props.isOpen, (newVal) => {
+    calendarShow.value = !!newVal;
   });
   return {
     _date,

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,13 +67,24 @@ 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;
-    placeholder: string;
     modelValue: string;
+    placeholder: string;
     format: string;
+    showClear: boolean;
     step: number;
     startHour: string;
     endHour: 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, ...$attrs}"
-	@update:isOpen="handleUpdateIsOpen"
+	@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,13 +67,24 @@ 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;
-    placeholder: string;
     modelValue: string;
+    placeholder: string;
     format: string;
+    showClear: boolean;
     step: number;
     startHour: string;
     endHour: 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/KMaskTextbox/KMaskTextbox.global.d.vue.ts

@@ -37,8 +37,8 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
 }>> & Readonly<{
     "onUpdate:modelValue"?: ((value: string) => any) | undefined;
 }>, {
-    placeholder: string;
     modelValue: string;
+    placeholder: string;
     showClear: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const _default: typeof __VLS_export;

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

@@ -37,8 +37,8 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
 }>> & Readonly<{
     "onUpdate:modelValue"?: ((value: string) => any) | undefined;
 }>, {
-    placeholder: string;
     modelValue: string;
+    placeholder: string;
     showClear: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const _default: typeof __VLS_export;

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

@@ -2,7 +2,7 @@ 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;
@@ -22,7 +22,7 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
 }, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     modelValue: {
         type: StringConstructor;
-        required: boolean;
+        default: string;
     };
     placeholder: {
         type: StringConstructor;
@@ -41,6 +41,7 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
     "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.global.vue

@@ -5,11 +5,11 @@ 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,
   type: props.type

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

@@ -2,7 +2,7 @@ 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;
@@ -22,7 +22,7 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
 }, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     modelValue: {
         type: StringConstructor;
-        required: boolean;
+        default: string;
     };
     placeholder: {
         type: StringConstructor;
@@ -41,6 +41,7 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
     "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,6 +1,6 @@
 export interface KTextboxProps {
-    modelValue: string;
-    placeholder: string;
+    modelValue?: string;
+    placeholder?: string;
     showClear?: boolean;
     type?: 'text' | 'password' | 'email' | 'url' | 'tel' | 'search' | 'number';
 }
@@ -12,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 | undefined>;
     clear: () => void;
 };
 /**
@@ -21,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;

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

@@ -1,10 +1,10 @@
 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(() => {
+  const showClear = computed(() => {
     return props.showClear && text.value !== "";
   });
   const clear = () => {
@@ -12,14 +12,14 @@ export function useKTextboxLogic(props, emit) {
   };
   return {
     text,
-    showClearIcon,
+    showClear,
     clear
   };
 }
 export const KTextboxDefaultProps = {
   modelValue: {
     type: String,
-    required: true
+    default: ""
   },
   placeholder: {
     type: String,

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

@@ -107,12 +107,12 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
     idKey: string;
     disabled: boolean;
     loading: boolean;
+    modelValue: any;
     searchbox: boolean;
     placeholder: string;
     dataProvider: any;
     closeOnSelect: boolean;
     multiSelect: boolean;
-    modelValue: any;
     iconField: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const _default: typeof __VLS_export;

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

@@ -107,12 +107,12 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
     idKey: string;
     disabled: boolean;
     loading: boolean;
+    modelValue: any;
     searchbox: boolean;
     placeholder: string;
     dataProvider: any;
     closeOnSelect: boolean;
     multiSelect: boolean;
-    modelValue: any;
     iconField: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const _default: typeof __VLS_export;

package/dist/runtime/presets/default/components/KDatePicker/KDatePicker.d.vue.ts

@@ -5,9 +5,11 @@ type __VLS_Props = {
     _date: any;
     calendarDay: Date | string;
     format: string;
+    showClear: boolean;
     calendarDefinedDays: IDefinedDay[];
     calendarMarkedDays: IMarkedDay[];
     textboxClicked: () => void;
+    onClear: () => void;
     dateSelected: (date: Date) => void;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {

package/dist/runtime/presets/default/components/KDatePicker/KDatePicker.vue

@@ -1,6 +1,6 @@
 <template lang="pug">
 .KDatePicker(ref="activatorRef")
-	KMaskTextbox(v-model="maskedModel" :key="maskedModel" :mask="format" :placeholder="format" @click.stop="textboxClicked" showClear)
+	KMaskTextbox(v-model="maskedModel" :key="maskedModel" :mask="format" :placeholder="format" @click.stop="textboxClicked" :showClear="showClear" @clear="onClear")
 	KDropdown(v-model:isOpen="calendarShow" :anchorEl="activatorRef")
 		KCalendar(view="month" :viewCount="1" :day="calendarDay" :selectedDay="_date" @dayClicked="dateSelected" :definedDays="calendarDefinedDays" :markedDays="calendarMarkedDays")
 </template>
@@ -19,9 +19,11 @@ const props = defineProps<{
 	_date: any
 	calendarDay: Date | string
 	format: string
+	showClear: boolean
 	calendarDefinedDays: IDefinedDay[]
 	calendarMarkedDays: IMarkedDay[]
 	textboxClicked: () => void
+	onClear: () => void
 	dateSelected: (date: Date) => void
 }>()
 

package/dist/runtime/presets/default/components/KDatePicker/KDatePicker.vue.d.ts

@@ -5,9 +5,11 @@ type __VLS_Props = {
     _date: any;
     calendarDay: Date | string;
     format: string;
+    showClear: boolean;
     calendarDefinedDays: IDefinedDay[];
     calendarMarkedDays: IMarkedDay[];
     textboxClicked: () => void;
+    onClear: () => void;
     dateSelected: (date: Date) => void;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {

package/dist/runtime/presets/default/components/KDateTimePicker/KDateTimePicker.d.vue.ts

@@ -10,7 +10,9 @@ type __VLS_Props = {
     timeStep: number;
     calendarDefinedDays: IDefinedDay[];
     calendarMarkedDays: IMarkedDay[];
+    showClear: boolean;
     textboxClicked: () => void;
+    onClear: () => void;
     dateSelected: (date: Date) => void;
     timeSelected: (time: string) => void;
 };

package/dist/runtime/presets/default/components/KDateTimePicker/KDateTimePicker.vue

@@ -1,6 +1,6 @@
 <template lang="pug">
 .KDateTimePicker(ref="activatorRef" @click.stop="textboxClicked")
-	KMaskTextbox(v-model="maskedModel" :key="maskedModel" :mask="format" :placeholder="format" showClear)
+	KMaskTextbox(v-model="maskedModel" :key="maskedModel" :mask="format" :placeholder="format" :showClear="showClear" @clear="onClear")
 	KDropdown(v-model:isOpen="calendarShow" :anchorEl="activatorRef")
 		KGrid(direction="row" align="start" :noGap="false" wrap="nowrap").datetime-picker-grid
 			.calendar-section
@@ -28,7 +28,9 @@ const props = defineProps<{
 	timeStep: number
 	calendarDefinedDays: IDefinedDay[]
 	calendarMarkedDays: IMarkedDay[]
+	showClear: boolean
 	textboxClicked: () => void
+	onClear: () => void
 	dateSelected: (date: Date) => void
 	timeSelected: (time: string) => void
 }>()

package/dist/runtime/presets/default/components/KDateTimePicker/KDateTimePicker.vue.d.ts

@@ -10,7 +10,9 @@ type __VLS_Props = {
     timeStep: number;
     calendarDefinedDays: IDefinedDay[];
     calendarMarkedDays: IMarkedDay[];
+    showClear: boolean;
     textboxClicked: () => void;
+    onClear: () => void;
     dateSelected: (date: Date) => void;
     timeSelected: (time: string) => void;
 };

package/dist/runtime/presets/default/components/KHourPicker/KHourPicker.d.vue.ts

@@ -1,5 +1,5 @@
 type __VLS_Props = {
-    modelValue: string;
+    maskedModel: string;
     isOpen: boolean;
     step: number;
     format: string;
@@ -7,13 +7,17 @@ type __VLS_Props = {
     endHour?: string;
     placeholder: string;
     disabled: boolean;
-    toggleDropdown: () => void;
+    showClear: boolean;
+    textboxClicked: () => void;
     closeDropdown: () => void;
     onTimeSelect: (time: string) => void;
+    clear: () => void;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    "update:maskedModel": (value: string) => any;
     "update:isOpen": (value: boolean) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:maskedModel"?: ((value: string) => any) | undefined;
     "onUpdate:isOpen"?: ((value: boolean) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;

package/dist/runtime/presets/default/components/KHourPicker/KHourPicker.vue

@@ -1,14 +1,15 @@
 <template lang="pug">
-.KHourPicker(ref="activatorRef" v-click-outside="closeDropdown")
-	KTextbox(
-		:modelValue="modelValue"
+.KHourPicker(ref="activatorRef")
+	KMaskTextbox(
+		v-model:maskedValue="maskedModel"
+		:mask="format"
 		:placeholder="placeholder"
-		:disabled="disabled"
-		readonly
-		@click.stop="toggleDropdown"
+		:showClear="showClear"
+		@click.stop="textboxClicked"
+		@clear="clear"
 	)
 		template(#append)
-			KIcon(iconname="clock" clickable @click.stop="toggleDropdown")
+			KIcon(iconname="clock" clickable @click.stop="textboxClicked")
 
 	KDropdown(
 		:isOpen="isOpen" 
@@ -16,7 +17,7 @@
 		:anchorEl="activatorRef"
 	)
 		KHourSelect(
-			:modelValue="modelValue"
+			:modelValue="maskedModel"
 			:step="step"
 			:format="format"
 			:startHour="startHour"
@@ -26,12 +27,13 @@
 </template>
 
 <script lang="ts" setup>
-import { ref } from 'vue'
+import { ref, computed } from 'vue'
 const activatorRef = ref<HTMLElement | null>(null)
 import KHourSelect from '../../../../components/KHourSelect/KHourSelect.global.vue'
+import KMaskTextbox from '../../../../components/KMaskTextbox/KMaskTextbox.global.vue'
 
-defineProps<{
-	modelValue: string
+const props = defineProps<{
+	maskedModel: string
 	isOpen: boolean
 	step: number
 	format: string
@@ -39,14 +41,22 @@ defineProps<{
 	endHour?: string
 	placeholder: string
 	disabled: boolean
-	toggleDropdown: () => void
+	showClear: boolean
+	textboxClicked: () => void
 	closeDropdown: () => void
 	onTimeSelect: (time: string) => void
+	clear: () => void
 }>()
 
-defineEmits<{
+const emit = defineEmits<{
 	(e: 'update:isOpen', value: boolean): void
+	(e: 'update:maskedModel', value: string): void
 }>()
+
+const maskedModel = computed({
+	get: () => props.maskedModel,
+	set: (value) => emit('update:maskedModel', value)
+})
 </script>
 
 <style lang="scss" scoped>

package/dist/runtime/presets/default/components/KHourPicker/KHourPicker.vue.d.ts

@@ -1,5 +1,5 @@
 type __VLS_Props = {
-    modelValue: string;
+    maskedModel: string;
     isOpen: boolean;
     step: number;
     format: string;
@@ -7,13 +7,17 @@ type __VLS_Props = {
     endHour?: string;
     placeholder: string;
     disabled: boolean;
-    toggleDropdown: () => void;
+    showClear: boolean;
+    textboxClicked: () => void;
     closeDropdown: () => void;
     onTimeSelect: (time: string) => void;
+    clear: () => void;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    "update:maskedModel": (value: string) => any;
     "update:isOpen": (value: boolean) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:maskedModel"?: ((value: string) => any) | undefined;
     "onUpdate:isOpen"?: ((value: boolean) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;

package/dist/runtime/presets/default/components/KMaskTextbox/KMaskTextbox.vue

@@ -1,9 +1,10 @@
 <template lang="pug">
-.KMaskTextbox
+.KMaskTextbox(@click.stop)
 	KTextbox(
 		:modelValue="maskedValue"
 		:placeholder="placeholder"
 		:showClear="showClear"
+		:clear="handleClear"
 		:maxlength="mask.length"
 		@update:modelValue="handleUpdate"
 		@beforeinput="handleBeforeInput"
@@ -118,6 +119,10 @@ const handleBeforeInput = (event: InputEvent) => {
 const handleUpdate = (value: string) => {
 	emit('update:maskedValue', value)
 }
+
+const handleClear = () => {
+	emit('clear')
+}
 </script>
 
 <style lang="scss" scoped>

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

@@ -1,6 +1,6 @@
 type __VLS_Props = {
     text: string;
-    showClearIcon: boolean;
+    showClear: boolean;
     clear: () => void;
     placeholder: string;
     type: string;

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

@@ -1,7 +1,7 @@
 <template lang="pug">
 KGrid(align="center" noGap).KTextbox
 	input(:type="props.type" v-model="text" :placeholder="placeholder")
-	KIcon(v-if="showClearIcon" @click="clear" iconname="close" width="12" height="12").closeIcon
+	KIcon(v-if="showClear" @click.stop="clear" @mousedown.stop iconname="close" width="12" height="12").closeIcon
 </template>
 
 <script lang="ts" setup>
@@ -9,7 +9,7 @@ import { computed } from 'vue'
 // Default template for KTextbox
 const props = defineProps<{
 	text: string
-	showClearIcon: boolean
+	showClear: boolean
 	clear: () => void
 	placeholder: string
 	type: string

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

@@ -1,6 +1,6 @@
 type __VLS_Props = {
     text: string;
-    showClearIcon: boolean;
+    showClear: boolean;
     clear: () => void;
     placeholder: string;
     type: string;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@katlux/toolkit",
-	"version": "0.1.0-beta.44",
+	"version": "0.1.0-beta.45",
 	"description": "Core UI toolkit and utilities for the Katlux ecosystem",
 	"author": "Katlux",
 	"license": "MIT",