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

package/dist/module.json

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

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

@@ -22,7 +22,7 @@ export interface KButtonEmits {
 export declare function useKButtonLogic(props: KButtonProps, emit: KButtonEmits): {
     isLink: import("vue").ComputedRef<boolean>;
     isDisabled: import("vue").ComputedRef<boolean | undefined>;
-    buttonClasses: import("vue").ComputedRef<("info" | "default" | "primary" | "danger" | "success" | "warning" | "light" | "dark" | "small" | "large" | "medium" | {
+    buttonClasses: import("vue").ComputedRef<("info" | "default" | "small" | "primary" | "danger" | "success" | "warning" | "light" | "dark" | "large" | "medium" | {
         disabled: boolean | undefined;
     })[]>;
     onClick: () => void;

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/KDatatable/KDataIterator.logic.d.ts

@@ -1,20 +0,0 @@
-import { ADataProvider } from '@katlux/providers';
-export interface KDataIteratorProps {
-    dataProvider: ADataProvider;
-    visibleFields?: Array<string> | null;
-    loading?: boolean;
-    search?: string;
-    itemsPerPage?: number;
-    page?: number;
-}
-export declare const KDataIteratorDefaultProps: {
-    visibleFields: null;
-    loading: boolean;
-    search: string;
-    itemsPerPage: number;
-    page: number;
-};
-export declare function useKDataIteratorLogic(props: KDataIteratorProps): {
-    selectedRows: import("vue").Ref<any[], any[]>;
-    selectAll: import("vue").Ref<boolean, boolean>;
-};

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

@@ -1,12 +0,0 @@
-import { ADataProvider } from '@katlux/providers';
-export interface KDatatableProps {
-    dataProvider: ADataProvider;
-    visibleFields?: Array<string> | null;
-}
-export declare const KDatatableDefaultProps: {
-    visibleFields: null;
-};
-export declare function useKDatatableLogic(props: KDatatableProps): {
-    selectedRows: import("vue").Ref<any[], any[]>;
-    selectAll: import("vue").Ref<boolean, boolean>;
-};

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

@@ -15,12 +15,16 @@ 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[]>;
+        type: import("vue").PropType<import("../KCalendar/types.js").IDefinedDay[]>;
         default: () => never[];
     };
     calendarMarkedDays: {
-        type: import("vue").PropType<IMarkedDay[]>;
+        type: import("vue").PropType<import("../KCalendar/types.js").IMarkedDay[]>;
         default: () => never[];
     };
 }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
@@ -46,12 +50,16 @@ 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[]>;
+        type: import("vue").PropType<import("../KCalendar/types.js").IDefinedDay[]>;
         default: () => never[];
     };
     calendarMarkedDays: {
-        type: import("vue").PropType<IMarkedDay[]>;
+        type: import("vue").PropType<import("../KCalendar/types.js").IMarkedDay[]>;
         default: () => never[];
     };
 }>> & Readonly<{
@@ -65,8 +73,9 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
     day: string | Date;
     modelValue: string | Date;
     format: string;
-    calendarDefinedDays: IDefinedDay[];
-    calendarMarkedDays: IMarkedDay[];
+    showClear: boolean;
+    calendarDefinedDays: import("../KCalendar/types.js").IDefinedDay[];
+    calendarMarkedDays: import("../KCalendar/types.js").IMarkedDay[];
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -20,11 +20,17 @@ const templateProps = computed(() => ({
   _date: _date.value,
   calendarDay: calendarDay.value,
   format: props.format,
+  showClear: props.showClear,
   calendarDefinedDays: props.calendarDefinedDays,
   calendarMarkedDays: props.calendarMarkedDays,
   textboxClicked,
+  onClear: handleClear,
   dateSelected: handleDateSelected
 }));
+const handleClear = () => {
+  _date.value = "";
+  maskedModel.value = "";
+};
 const updateMaskedModel = (val) => {
   maskedModel.value = val;
 };
@@ -35,8 +41,13 @@ const handleDateSelected = (date) => {
   dateSelected(date);
 };
 watch(_date, (newDate) => {
-  emit("update:day", newDate);
-  emit("update:modelValue", newDate);
+  const d1 = newDate instanceof Date ? newDate.getTime() : new Date(newDate).getTime();
+  const d2 = props.modelValue instanceof Date ? props.modelValue.getTime() : new Date(props.modelValue || "").getTime();
+  const d3 = props.day instanceof Date ? props.day.getTime() : new Date(props.day || "").getTime();
+  if (d1 !== d2 && d1 !== d3) {
+    emit("update:day", newDate);
+    emit("update:modelValue", newDate);
+  }
 });
 watch(calendarShow, (newVal) => {
   emit("update:isOpen", newVal);

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

@@ -15,12 +15,16 @@ 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[]>;
+        type: import("vue").PropType<import("../KCalendar/types.js").IDefinedDay[]>;
         default: () => never[];
     };
     calendarMarkedDays: {
-        type: import("vue").PropType<IMarkedDay[]>;
+        type: import("vue").PropType<import("../KCalendar/types.js").IMarkedDay[]>;
         default: () => never[];
     };
 }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
@@ -46,12 +50,16 @@ 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[]>;
+        type: import("vue").PropType<import("../KCalendar/types.js").IDefinedDay[]>;
         default: () => never[];
     };
     calendarMarkedDays: {
-        type: import("vue").PropType<IMarkedDay[]>;
+        type: import("vue").PropType<import("../KCalendar/types.js").IMarkedDay[]>;
         default: () => never[];
     };
 }>> & Readonly<{
@@ -65,8 +73,9 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
     day: string | Date;
     modelValue: string | Date;
     format: string;
-    calendarDefinedDays: IDefinedDay[];
-    calendarMarkedDays: IMarkedDay[];
+    showClear: boolean;
+    calendarDefinedDays: import("../KCalendar/types.js").IDefinedDay[];
+    calendarMarkedDays: import("../KCalendar/types.js").IMarkedDay[];
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -1,10 +1,11 @@
 import { type PropType } from 'vue';
-import type { IMarkedDay, IDefinedDay } from '@katlux/toolkit/components/KCalendar/types.ts';
+import type { IMarkedDay, IDefinedDay } from '../KCalendar/types.js';
 export interface KDatePickerProps {
     format: string;
     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,39 @@ export function useKDatePickerLogic(props) {
   const _date = ref("");
   const maskedModel = ref("");
   const calendarShow = ref(false);
+  watch(maskedModel, (newVal) => {
+    if (newVal === "") {
+      if (_date.value !== "") {
+        _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())) {
+        const oldTime = _date.value instanceof Date ? _date.value.getTime() : new Date(_date.value).getTime();
+        if (d.getTime() !== oldTime) {
+          _date.value = d;
+        }
+      }
+    }
+  });
   const textboxClicked = () => {
     calendarShow.value = true;
   };
@@ -69,14 +106,22 @@ export function useKDatePickerLogic(props) {
   });
   watch(() => props.day, (newDay) => {
     if (newDay) {
-      _date.value = newDay;
-      syncMaskedModel(newDay);
+      const d1 = newDay instanceof Date ? newDay.getTime() : new Date(newDay).getTime();
+      const d2 = _date.value instanceof Date ? _date.value.getTime() : new Date(_date.value).getTime();
+      if (d1 !== d2) {
+        _date.value = newDay;
+        syncMaskedModel(newDay);
+      }
     }
   });
   watch(() => props.modelValue, (newVal) => {
     if (newVal) {
-      _date.value = newVal;
-      syncMaskedModel(newVal);
+      const d1 = newVal instanceof Date ? newVal.getTime() : new Date(newVal).getTime();
+      const d2 = _date.value instanceof Date ? _date.value.getTime() : new Date(_date.value).getTime();
+      if (d1 !== d2) {
+        _date.value = newVal;
+        syncMaskedModel(newVal);
+      }
     }
   });
   watch(() => props.isOpen, (newVal) => {

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

@@ -11,19 +11,36 @@ 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;
     };
     calendarDefinedDays: {
-        type: import("vue").PropType<IDefinedDay[]>;
+        type: import("vue").PropType<import("../KCalendar/types.js").IDefinedDay[]>;
         default: () => never[];
     };
     calendarMarkedDays: {
-        type: import("vue").PropType<IMarkedDay[]>;
+        type: import("vue").PropType<import("../KCalendar/types.js").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,23 +53,43 @@ 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;
     };
     calendarDefinedDays: {
-        type: import("vue").PropType<IDefinedDay[]>;
+        type: import("vue").PropType<import("../KCalendar/types.js").IDefinedDay[]>;
         default: () => never[];
     };
     calendarMarkedDays: {
-        type: import("vue").PropType<IMarkedDay[]>;
+        type: import("vue").PropType<import("../KCalendar/types.js").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;
-    calendarDefinedDays: IDefinedDay[];
-    calendarMarkedDays: IMarkedDay[];
+    showClear: boolean;
+    calendarDefinedDays: import("../KCalendar/types.js").IDefinedDay[];
+    calendarMarkedDays: import("../KCalendar/types.js").IMarkedDay[];
     timeFormat: string;
     timeStep: number;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

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,16 +27,40 @@ const templateProps = computed(() => ({
   timeStep: props.timeStep,
   calendarDefinedDays: props.calendarDefinedDays,
   calendarMarkedDays: props.calendarMarkedDays,
+  showClear: props.showClear,
   textboxClicked,
+  onClear: handleClear,
   dateSelected,
   timeSelected
 }));
+const handleClear = () => {
+  _date.value = "";
+  _time.value = "";
+  maskedModel.value = "";
+};
 const updateMaskedModel = (val) => {
   maskedModel.value = val;
 };
 const updateCalendarShow = (val) => {
   calendarShow.value = val;
 };
+watch(_date, (newDate) => {
+  if (!newDate) {
+    if (props.modelValue || props.day) {
+      emit("update:modelValue", "");
+    }
+    return;
+  }
+  const d1 = newDate instanceof Date ? newDate.getTime() : new Date(newDate).getTime();
+  const d2 = props.modelValue instanceof Date ? props.modelValue.getTime() : new Date(props.modelValue || "").getTime();
+  const d3 = props.day instanceof Date ? props.day.getTime() : new Date(props.day || "").getTime();
+  if (d1 !== d2 && d1 !== d3) {
+    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,19 +11,36 @@ 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;
     };
     calendarDefinedDays: {
-        type: import("vue").PropType<IDefinedDay[]>;
+        type: import("vue").PropType<import("../KCalendar/types.js").IDefinedDay[]>;
         default: () => never[];
     };
     calendarMarkedDays: {
-        type: import("vue").PropType<IMarkedDay[]>;
+        type: import("vue").PropType<import("../KCalendar/types.js").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,23 +53,43 @@ 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;
     };
     calendarDefinedDays: {
-        type: import("vue").PropType<IDefinedDay[]>;
+        type: import("vue").PropType<import("../KCalendar/types.js").IDefinedDay[]>;
         default: () => never[];
     };
     calendarMarkedDays: {
-        type: import("vue").PropType<IMarkedDay[]>;
+        type: import("vue").PropType<import("../KCalendar/types.js").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;
-    calendarDefinedDays: IDefinedDay[];
-    calendarMarkedDays: IMarkedDay[];
+    showClear: boolean;
+    calendarDefinedDays: import("../KCalendar/types.js").IDefinedDay[];
+    calendarMarkedDays: import("../KCalendar/types.js").IMarkedDay[];
     timeFormat: string;
     timeStep: number;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

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

@@ -1,9 +1,12 @@
 import { type PropType } from 'vue';
-import type { IMarkedDay, IDefinedDay } from '@katlux/toolkit/components/KCalendar/types.ts';
+import type { IMarkedDay, IDefinedDay } from '../KCalendar/types.js';
 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;