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

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "@katlux/toolkit",
   "configKey": "katluxToolkit",
-  "version": "0.1.0-beta.43",
+  "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

@@ -87,12 +87,12 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
 }>, {
     disabled: boolean;
     modelValue: import("@katlux/providers").TDataRow | import("@katlux/providers").TDataRow[] | null;
-    visibleFields: String[];
     searchbox: boolean;
     placeholder: string;
     closeOnSelect: boolean;
     multiSelect: boolean;
     maxSelectedDisplay: string | number | boolean;
+    visibleFields: String[];
 }, {}, {}, {}, 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

@@ -87,12 +87,12 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
 }>, {
     disabled: boolean;
     modelValue: import("@katlux/providers").TDataRow | import("@katlux/providers").TDataRow[] | null;
-    visibleFields: String[];
     searchbox: boolean;
     placeholder: string;
     closeOnSelect: boolean;
     multiSelect: boolean;
     maxSelectedDisplay: string | number | boolean;
+    visibleFields: String[];
 }, {}, {}, {}, 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

@@ -7,6 +7,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;
+    };
     calendarDefinedDays: {
         type: import("vue").PropType<IDefinedDay[]>;
         default: () => never[];
@@ -15,7 +27,13 @@ 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:day": (value: string | Date) => any;
+    "update:isOpen": (value: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     format: {
         type: StringConstructor;
         default: string;
@@ -24,6 +42,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;
+    };
     calendarDefinedDays: {
         type: import("vue").PropType<IDefinedDay[]>;
         default: () => never[];
@@ -32,9 +62,18 @@ 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:day"?: ((value: string | Date) => any) | undefined;
+    "onUpdate:isOpen"?: ((value: boolean) => any) | undefined;
+}>, {
+    isOpen: boolean;
     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

@@ -1,9 +1,10 @@
 <script setup>
 import { useKDatePickerLogic, KDatePickerDefaultProps } from "./KDatePicker.logic";
 import { usePresetComponent } from "../../composables/usePresetComponent";
-import { computed } from "vue";
+import { computed, watch } from "vue";
 import KDatePickerDefault from "../../presets/default/components/KDatePicker/KDatePicker.vue";
 const props = defineProps(KDatePickerDefaultProps);
+const emit = defineEmits(["update:maskedModel", "update:calendarShow", "update:day", "update:modelValue", "update:isOpen"]);
 const {
   _date,
   maskedModel,
@@ -19,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,
@@ -33,6 +35,13 @@ const updateCalendarShow = (val) => {
 const handleDateSelected = (date) => {
   dateSelected(date);
 };
+watch(_date, (newDate) => {
+  emit("update:day", newDate);
+  emit("update:modelValue", newDate);
+});
+watch(calendarShow, (newVal) => {
+  emit("update:isOpen", newVal);
+});
 </script>
 
 <template lang="pug">

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

@@ -7,6 +7,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;
+    };
     calendarDefinedDays: {
         type: import("vue").PropType<IDefinedDay[]>;
         default: () => never[];
@@ -15,7 +27,13 @@ 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:day": (value: string | Date) => any;
+    "update:isOpen": (value: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     format: {
         type: StringConstructor;
         default: string;
@@ -24,6 +42,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;
+    };
     calendarDefinedDays: {
         type: import("vue").PropType<IDefinedDay[]>;
         default: () => never[];
@@ -32,9 +62,18 @@ 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:day"?: ((value: string | Date) => any) | undefined;
+    "onUpdate:isOpen"?: ((value: boolean) => any) | undefined;
+}>, {
+    isOpen: boolean;
     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

@@ -3,6 +3,9 @@ import type { IMarkedDay, IDefinedDay } from '@katlux/toolkit/components/KCalend
 export interface KDatePickerProps {
     format: string;
     day?: Date | string;
+    modelValue?: Date | string;
+    isOpen?: boolean;
+    showClear?: boolean;
     calendarDefinedDays: IDefinedDay[];
     calendarMarkedDays: IMarkedDay[];
 }
@@ -15,6 +18,18 @@ export declare const KDatePickerDefaultProps: {
         type: (DateConstructor | StringConstructor)[];
         default: undefined;
     };
+    modelValue: {
+        type: (DateConstructor | StringConstructor)[];
+        default: undefined;
+    };
+    isOpen: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    showClear: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     calendarDefinedDays: {
         type: PropType<IDefinedDay[]>;
         default: () => never[];

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

@@ -1,4 +1,4 @@
-import { ref, onMounted, computed } from "vue";
+import { ref, watch, onMounted, computed } from "vue";
 export const KDatePickerDefaultProps = {
   format: {
     type: String,
@@ -8,6 +8,18 @@ export const KDatePickerDefaultProps = {
     type: [Date, String],
     default: void 0
   },
+  modelValue: {
+    type: [Date, String],
+    default: void 0
+  },
+  isOpen: {
+    type: Boolean,
+    default: false
+  },
+  showClear: {
+    type: Boolean,
+    default: false
+  },
   calendarDefinedDays: {
     type: Array,
     default: () => []
@@ -21,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;
   };
@@ -44,11 +84,46 @@ export function useKDatePickerLogic(props) {
     return formattedDate;
   };
   onMounted(() => {
-    maskedModel.value = _date.value.toString();
+    if (props.modelValue) {
+      _date.value = props.modelValue;
+    } else if (props.day) {
+      _date.value = props.day;
+    }
+    if (props.isOpen) {
+      calendarShow.value = props.isOpen;
+    }
+    if (_date.value) {
+      const initialDate = _date.value instanceof Date ? _date.value : new Date(_date.value);
+      if (!isNaN(initialDate.getTime())) {
+        maskedModel.value = formatDate(initialDate);
+      }
+    }
   });
+  watch(() => props.day, (newDay) => {
+    if (newDay) {
+      _date.value = newDay;
+      syncMaskedModel(newDay);
+    }
+  });
+  watch(() => props.modelValue, (newVal) => {
+    if (newVal) {
+      _date.value = newVal;
+      syncMaskedModel(newVal);
+    }
+  });
+  watch(() => props.isOpen, (newVal) => {
+    calendarShow.value = !!newVal;
+  });
+  const syncMaskedModel = (val) => {
+    const d = val instanceof Date ? val : new Date(val);
+    if (!isNaN(d.getTime())) {
+      maskedModel.value = formatDate(d);
+    }
+  };
   const calendarDay = computed(() => {
-    if (props.day) {
-      return props.day;
+    const val = props.modelValue || props.day;
+    if (val) {
+      return val;
     }
     return /* @__PURE__ */ new Date();
   });

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;