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

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;
     modelValue: string;
-    format: 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;
     modelValue: string;
-    format: 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/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

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

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

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

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;
 };