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

package/dist/module.json

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

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

@@ -39,6 +39,10 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
         type: import("vue").PropType<import("./KCombobox.logic.js").ComboboxItem | import("./KCombobox.logic.js").ComboboxItem[] | null>;
         default: null;
     };
+    teleportTo: {
+        type: import("vue").PropType<string>;
+        default: undefined;
+    };
 }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
     "update:modelValue": (value: import("@katlux/providers").TDataRow | import("@katlux/providers").TDataRow[] | null) => any;
 }, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
@@ -82,6 +86,10 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
         type: import("vue").PropType<import("./KCombobox.logic.js").ComboboxItem | import("./KCombobox.logic.js").ComboboxItem[] | null>;
         default: null;
     };
+    teleportTo: {
+        type: import("vue").PropType<string>;
+        default: undefined;
+    };
 }>> & Readonly<{
     "onUpdate:modelValue"?: ((value: import("@katlux/providers").TDataRow | import("@katlux/providers").TDataRow[] | null) => any) | undefined;
 }>, {
@@ -89,6 +97,7 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
     modelValue: import("@katlux/providers").TDataRow | import("@katlux/providers").TDataRow[] | null;
     searchbox: boolean;
     placeholder: string;
+    teleportTo: string;
     closeOnSelect: boolean;
     multiSelect: boolean;
     maxSelectedDisplay: string | number | boolean;

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

@@ -31,7 +31,8 @@ const templateProps = computed(() => ({
   closeDropdown,
   selectItem,
   isSelected,
-  loading: loading.value
+  loading: loading.value,
+  teleportTo: props.teleportTo
 }));
 function updateSearchText(val) {
   searchtext.value = val;

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

@@ -39,6 +39,10 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
         type: import("vue").PropType<import("./KCombobox.logic.js").ComboboxItem | import("./KCombobox.logic.js").ComboboxItem[] | null>;
         default: null;
     };
+    teleportTo: {
+        type: import("vue").PropType<string>;
+        default: undefined;
+    };
 }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
     "update:modelValue": (value: import("@katlux/providers").TDataRow | import("@katlux/providers").TDataRow[] | null) => any;
 }, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
@@ -82,6 +86,10 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
         type: import("vue").PropType<import("./KCombobox.logic.js").ComboboxItem | import("./KCombobox.logic.js").ComboboxItem[] | null>;
         default: null;
     };
+    teleportTo: {
+        type: import("vue").PropType<string>;
+        default: undefined;
+    };
 }>> & Readonly<{
     "onUpdate:modelValue"?: ((value: import("@katlux/providers").TDataRow | import("@katlux/providers").TDataRow[] | null) => any) | undefined;
 }>, {
@@ -89,6 +97,7 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
     modelValue: import("@katlux/providers").TDataRow | import("@katlux/providers").TDataRow[] | null;
     searchbox: boolean;
     placeholder: string;
+    teleportTo: string;
     closeOnSelect: boolean;
     multiSelect: boolean;
     maxSelectedDisplay: string | number | boolean;

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

@@ -13,6 +13,7 @@ export interface KComboboxProps {
     visibleFields?: Array<String> | null;
     labelField: string;
     modelValue?: ComboboxItem | ComboboxItem[] | null;
+    teleportTo?: string;
 }
 export interface KComboboxEmits {
     (e: 'update:modelValue', value: ComboboxItem | ComboboxItem[] | null): void;
@@ -58,6 +59,10 @@ export declare const KComboboxDefaultProps: {
         type: PropType<ComboboxItem | ComboboxItem[] | null>;
         default: null;
     };
+    teleportTo: {
+        type: PropType<string>;
+        default: undefined;
+    };
 };
 export declare function useKComboboxLogic(props: KComboboxProps, emit: KComboboxEmits): {
     selectedItems: import("vue").Ref<TDataRow[] | null, TDataRow[] | null>;

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

@@ -42,6 +42,10 @@ export const KComboboxDefaultProps = {
   modelValue: {
     type: [Object, Array],
     default: null
+  },
+  teleportTo: {
+    type: String,
+    default: void 0
   }
 };
 export function useKComboboxLogic(props, emit) {

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

@@ -20,13 +20,17 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
         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[];
     };
+    teleportTo: {
+        type: import("vue").PropType<string>;
+        default: undefined;
+    };
 }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
     "update:modelValue": (value: string | Date) => any;
     "update:maskedModel": (value: string) => any;
@@ -55,13 +59,17 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
         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[];
     };
+    teleportTo: {
+        type: import("vue").PropType<string>;
+        default: undefined;
+    };
 }>> & Readonly<{
     "onUpdate:modelValue"?: ((value: string | Date) => any) | undefined;
     "onUpdate:maskedModel"?: ((value: string) => any) | undefined;
@@ -72,10 +80,11 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
     isOpen: boolean;
     day: string | Date;
     modelValue: string | Date;
+    teleportTo: string;
     format: string;
     showClear: boolean;
-    calendarDefinedDays: IDefinedDay[];
-    calendarMarkedDays: IMarkedDay[];
+    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

@@ -24,8 +24,14 @@ const templateProps = computed(() => ({
   calendarDefinedDays: props.calendarDefinedDays,
   calendarMarkedDays: props.calendarMarkedDays,
   textboxClicked,
-  dateSelected: handleDateSelected
+  onClear: handleClear,
+  dateSelected: handleDateSelected,
+  teleportTo: props.teleportTo
 }));
+const handleClear = () => {
+  _date.value = "";
+  maskedModel.value = "";
+};
 const updateMaskedModel = (val) => {
   maskedModel.value = val;
 };
@@ -36,8 +42,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

@@ -20,13 +20,17 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
         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[];
     };
+    teleportTo: {
+        type: import("vue").PropType<string>;
+        default: undefined;
+    };
 }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
     "update:modelValue": (value: string | Date) => any;
     "update:maskedModel": (value: string) => any;
@@ -55,13 +59,17 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
         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[];
     };
+    teleportTo: {
+        type: import("vue").PropType<string>;
+        default: undefined;
+    };
 }>> & Readonly<{
     "onUpdate:modelValue"?: ((value: string | Date) => any) | undefined;
     "onUpdate:maskedModel"?: ((value: string) => any) | undefined;
@@ -72,10 +80,11 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
     isOpen: boolean;
     day: string | Date;
     modelValue: string | Date;
+    teleportTo: string;
     format: string;
     showClear: boolean;
-    calendarDefinedDays: IDefinedDay[];
-    calendarMarkedDays: IMarkedDay[];
+    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,5 +1,5 @@
 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;
@@ -8,6 +8,7 @@ export interface KDatePickerProps {
     showClear?: boolean;
     calendarDefinedDays: IDefinedDay[];
     calendarMarkedDays: IMarkedDay[];
+    teleportTo?: string;
 }
 export declare const KDatePickerDefaultProps: {
     format: {
@@ -38,6 +39,10 @@ export declare const KDatePickerDefaultProps: {
         type: PropType<IMarkedDay[]>;
         default: () => never[];
     };
+    teleportTo: {
+        type: PropType<string>;
+        default: undefined;
+    };
 };
 export declare function useKDatePickerLogic(props: KDatePickerProps): {
     _date: import("vue").Ref<string | Date, string | Date>;

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

@@ -27,6 +27,10 @@ export const KDatePickerDefaultProps = {
   calendarMarkedDays: {
     type: Array,
     default: () => []
+  },
+  teleportTo: {
+    type: String,
+    default: void 0
   }
 };
 export function useKDatePickerLogic(props) {
@@ -35,7 +39,9 @@ export function useKDatePickerLogic(props) {
   const calendarShow = ref(false);
   watch(maskedModel, (newVal) => {
     if (newVal === "") {
-      _date.value = "";
+      if (_date.value !== "") {
+        _date.value = "";
+      }
       return;
     }
     const format = props.format;
@@ -57,7 +63,10 @@ export function useKDatePickerLogic(props) {
     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 oldTime = _date.value instanceof Date ? _date.value.getTime() : new Date(_date.value).getTime();
+        if (d.getTime() !== oldTime) {
+          _date.value = d;
+        }
       }
     }
   });
@@ -101,14 +110,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

@@ -28,13 +28,17 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
         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[];
     };
+    teleportTo: {
+        type: import("vue").PropType<string>;
+        default: undefined;
+    };
 }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
     "update:modelValue": (value: string | Date) => any;
     "update:maskedModel": (value: string) => any;
@@ -70,13 +74,17 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
         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[];
     };
+    teleportTo: {
+        type: import("vue").PropType<string>;
+        default: undefined;
+    };
 }>> & Readonly<{
     "onUpdate:modelValue"?: ((value: string | Date) => any) | undefined;
     "onUpdate:maskedModel"?: ((value: string) => any) | undefined;
@@ -86,10 +94,11 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
     isOpen: boolean;
     day: string | Date;
     modelValue: string | Date;
+    teleportTo: string;
     format: string;
     showClear: boolean;
-    calendarDefinedDays: IDefinedDay[];
-    calendarMarkedDays: IMarkedDay[];
+    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

@@ -29,9 +29,16 @@ const templateProps = computed(() => ({
   calendarMarkedDays: props.calendarMarkedDays,
   showClear: props.showClear,
   textboxClicked,
+  onClear: handleClear,
   dateSelected,
-  timeSelected
+  timeSelected,
+  teleportTo: props.teleportTo
 }));
+const handleClear = () => {
+  _date.value = "";
+  _time.value = "";
+  maskedModel.value = "";
+};
 const updateMaskedModel = (val) => {
   maskedModel.value = val;
 };
@@ -39,7 +46,18 @@ const updateCalendarShow = (val) => {
   calendarShow.value = val;
 };
 watch(_date, (newDate) => {
-  emit("update:modelValue", 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);

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

@@ -28,13 +28,17 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
         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[];
     };
+    teleportTo: {
+        type: import("vue").PropType<string>;
+        default: undefined;
+    };
 }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
     "update:modelValue": (value: string | Date) => any;
     "update:maskedModel": (value: string) => any;
@@ -70,13 +74,17 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
         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[];
     };
+    teleportTo: {
+        type: import("vue").PropType<string>;
+        default: undefined;
+    };
 }>> & Readonly<{
     "onUpdate:modelValue"?: ((value: string | Date) => any) | undefined;
     "onUpdate:maskedModel"?: ((value: string) => any) | undefined;
@@ -86,10 +94,11 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
     isOpen: boolean;
     day: string | Date;
     modelValue: string | Date;
+    teleportTo: string;
     format: string;
     showClear: boolean;
-    calendarDefinedDays: IDefinedDay[];
-    calendarMarkedDays: IMarkedDay[];
+    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,5 +1,5 @@
 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;
@@ -10,6 +10,7 @@ export interface KDateTimePickerProps {
     timeStep?: number;
     calendarDefinedDays?: IDefinedDay[];
     calendarMarkedDays?: IMarkedDay[];
+    teleportTo?: string;
 }
 export declare const KDateTimePickerDefaultProps: {
     format: {
@@ -48,6 +49,10 @@ export declare const KDateTimePickerDefaultProps: {
         type: PropType<IMarkedDay[]>;
         default: () => never[];
     };
+    teleportTo: {
+        type: PropType<string>;
+        default: undefined;
+    };
 };
 export declare function useKDateTimePickerLogic(props: KDateTimePickerProps): {
     _date: import("vue").Ref<string | Date, string | Date>;

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

@@ -35,6 +35,10 @@ export const KDateTimePickerDefaultProps = {
   calendarMarkedDays: {
     type: Array,
     default: () => []
+  },
+  teleportTo: {
+    type: String,
+    default: void 0
   }
 };
 export function useKDateTimePickerLogic(props) {
@@ -44,8 +48,10 @@ export function useKDateTimePickerLogic(props) {
   const calendarShow = ref(false);
   watch(maskedModel, (newVal) => {
     if (newVal === "") {
-      _date.value = "";
-      _time.value = "";
+      if (_date.value !== "") {
+        _date.value = "";
+        _time.value = "";
+      }
       return;
     }
     const format = props.format || "MM-DD-YYYY HH:mm";
@@ -75,10 +81,15 @@ export function useKDateTimePickerLogic(props) {
       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 oldTime = _date.value instanceof Date ? _date.value.getTime() : new Date(_date.value).getTime();
+        if (d.getTime() !== oldTime) {
+          _date.value = d;
+          if (hours.length === 2 && minutes.length === 2) {
+            _time.value = `${hours}:${minutes}`;
+          }
+        }
       }
     }
   });
@@ -167,10 +178,22 @@ export function useKDateTimePickerLogic(props) {
     updateMaskedModel();
   };
   watch(() => props.modelValue, (newVal) => {
-    syncValue(newVal);
+    if (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) {
+        syncValue(newVal);
+      }
+    }
   });
   watch(() => props.day, (newDay) => {
-    syncValue(newDay);
+    if (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) {
+        syncValue(newDay);
+      }
+    }
   });
   watch(() => props.isOpen, (newVal) => {
     calendarShow.value = !!newVal;

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

@@ -11,6 +11,10 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
         type: import("vue").PropType<HTMLElement>;
         default: undefined;
     };
+    teleportTo: {
+        type: import("vue").PropType<string>;
+        default: undefined;
+    };
 }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
     "update:isOpen": (value: boolean) => any;
 }, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
@@ -26,10 +30,15 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
         type: import("vue").PropType<HTMLElement>;
         default: undefined;
     };
+    teleportTo: {
+        type: import("vue").PropType<string>;
+        default: undefined;
+    };
 }>> & Readonly<{
     "onUpdate:isOpen"?: ((value: boolean) => any) | undefined;
 }>, {
     isOpen: boolean;
+    teleportTo: string;
     fullWidth: boolean;
     anchorEl: HTMLElement;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

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

@@ -5,19 +5,21 @@ import { computed } from "vue";
 import KDropdownDefault from "../../presets/default/components/KDropdown/KDropdown.vue";
 const props = defineProps(KDropdownDefaultProps);
 const emit = defineEmits(["update:isOpen"]);
-const { open, dropdownRect, clickoutside } = useKDropdownLogic(props, emit);
+const { open, dropdownRect, clickoutside, teleportTarget, isInModal } = useKDropdownLogic(props, emit);
 const presetComponent = usePresetComponent("KDropdown", KDropdownDefault);
 const templateProps = computed(() => ({
   open: open.value,
   fullWidth: props.fullWidth,
   anchorEl: props.anchorEl,
   dropdownRect: dropdownRect.value,
-  clickoutside
+  clickoutside,
+  teleportTarget: teleportTarget.value,
+  isInModal: isInModal.value
 }));
 </script>
 
 <template lang="pug">
-component(:is="presetComponent" v-bind="{ ...templateProps, ...$attrs }")
+component(:is="presetComponent" v-bind="{ ...templateProps, ...$attrs }" @update:isOpen="emit('update:isOpen', $event)")
 	template(v-for="(_, slot) in $slots" #[slot]="scope")
 		slot(:name="slot" v-bind="scope")
 </template>

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

@@ -11,6 +11,10 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
         type: import("vue").PropType<HTMLElement>;
         default: undefined;
     };
+    teleportTo: {
+        type: import("vue").PropType<string>;
+        default: undefined;
+    };
 }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
     "update:isOpen": (value: boolean) => any;
 }, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
@@ -26,10 +30,15 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
         type: import("vue").PropType<HTMLElement>;
         default: undefined;
     };
+    teleportTo: {
+        type: import("vue").PropType<string>;
+        default: undefined;
+    };
 }>> & Readonly<{
     "onUpdate:isOpen"?: ((value: boolean) => any) | undefined;
 }>, {
     isOpen: boolean;
+    teleportTo: string;
     fullWidth: boolean;
     anchorEl: HTMLElement;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

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

@@ -3,6 +3,7 @@ export interface KDropdownProps {
     isOpen: boolean;
     fullWidth: boolean;
     anchorEl?: HTMLElement;
+    teleportTo?: string;
 }
 export interface KDropdownEmits {
     (e: 'update:isOpen', value: boolean): void;
@@ -20,6 +21,10 @@ export declare const KDropdownDefaultProps: {
         type: PropType<HTMLElement>;
         default: undefined;
     };
+    teleportTo: {
+        type: PropType<string>;
+        default: undefined;
+    };
 };
 export declare function useKDropdownLogic(props: KDropdownProps, emit: KDropdownEmits): {
     open: import("vue").Ref<boolean, boolean>;
@@ -37,4 +42,6 @@ export declare function useKDropdownLogic(props: KDropdownProps, emit: KDropdown
         width: number;
     }>;
     clickoutside: () => void;
+    teleportTarget: import("vue").ComputedRef<string>;
+    isInModal: import("vue").ComputedRef<boolean>;
 };

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

@@ -1,4 +1,5 @@
-import { ref, watch, onMounted, onUnmounted, nextTick } from "vue";
+import { ref, watch, onMounted, onUnmounted, nextTick, inject, computed } from "vue";
+import { KMODAL_PORTAL_ID_KEY } from "../KModal/KModal.logic.js";
 export const KDropdownDefaultProps = {
   isOpen: {
     type: Boolean,
@@ -11,24 +12,51 @@ export const KDropdownDefaultProps = {
   anchorEl: {
     type: Object,
     default: void 0
+  },
+  teleportTo: {
+    type: String,
+    default: void 0
   }
 };
 export function useKDropdownLogic(props, emit) {
+  const modalPortalId = inject(KMODAL_PORTAL_ID_KEY, null);
+  const isInModal = computed(() => !!modalPortalId);
+  const teleportTarget = computed(() => {
+    if (props.teleportTo) return props.teleportTo;
+    if (isInModal.value) return `#${modalPortalId}`;
+    return "body";
+  });
   const open = ref(false);
   const dropdownRect = ref({ top: 0, left: 0, width: 0 });
   const clickoutside = () => {
     open.value = false;
     emit("update:isOpen", open.value);
   };
-  const updatePosition = async () => {
-    await nextTick();
-    if (props.anchorEl) {
-      const rect = props.anchorEl.getBoundingClientRect();
-      dropdownRect.value = {
-        top: rect.bottom + window.scrollY,
-        left: rect.left + window.scrollX,
-        width: rect.width
-      };
+  const updatePosition = () => {
+    try {
+      if (props.anchorEl) {
+        const el = props.anchorEl.$el || props.anchorEl;
+        if (el && typeof el.getBoundingClientRect === "function") {
+          const rect = el.getBoundingClientRect();
+          if (teleportTarget.value === "body" || teleportTarget.value === void 0) {
+            dropdownRect.value = {
+              top: rect.bottom + window.scrollY,
+              left: rect.left + window.scrollX,
+              width: rect.width
+            };
+          } else {
+            const portalEl = document.querySelector(teleportTarget.value);
+            const portalRect = portalEl ? portalEl.getBoundingClientRect() : { top: 0, left: 0 };
+            dropdownRect.value = {
+              top: rect.bottom - portalRect.top,
+              left: rect.left - portalRect.left,
+              width: rect.width
+            };
+          }
+        }
+      }
+    } catch (e) {
+      console.error("[KDropdown] Failed to update position", e);
     }
   };
   const onScrollResize = () => {
@@ -39,11 +67,16 @@ export function useKDropdownLogic(props, emit) {
   watch(
     () => props.isOpen,
     (newValue) => {
-      open.value = newValue;
       if (newValue) {
         updatePosition();
+        nextTick(() => {
+          open.value = true;
+        });
+      } else {
+        open.value = false;
       }
-    }
+    },
+    { immediate: true }
   );
   watch(
     () => props.anchorEl,
@@ -54,9 +87,11 @@ export function useKDropdownLogic(props, emit) {
     }
   );
   onMounted(() => {
-    open.value = props.isOpen;
-    if (open.value) {
+    if (props.isOpen) {
       updatePosition();
+      nextTick(() => {
+        open.value = true;
+      });
     }
     window.addEventListener("scroll", onScrollResize, true);
     window.addEventListener("resize", onScrollResize);
@@ -68,6 +103,8 @@ export function useKDropdownLogic(props, emit) {
   return {
     open,
     dropdownRect,
-    clickoutside
+    clickoutside,
+    teleportTarget,
+    isInModal
   };
 }

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

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

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

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

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

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

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

@@ -13,6 +13,7 @@ type __VLS_Props = {
     selectItem: (option: ComboboxItem) => void;
     isSelected: (option: ComboboxItem) => boolean;
     loading: boolean;
+    teleportTo?: string;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
     "update:searchtext": (value: string) => any;

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

@@ -9,7 +9,7 @@
 			) {{ item[labelField] }}
 			.KCombobox__selected-content-placeholder(v-else) {{placeholder}}
 		KIcon(iconname="chevron" width="12" height="12").chevron
-	KDropdown(:isOpen="isOptionsOpen" :anchorEl="activatorRef" fullWidth).KCombobox__options
+	KDropdown(:isOpen="isOptionsOpen" :anchorEl="activatorRef" fullWidth :teleportTo="teleportTo").KCombobox__options
 		slot
 			KComboboxList(
 				:searchbox="searchbox"
@@ -42,6 +42,7 @@ const props = defineProps<{
 	selectItem: (option: ComboboxItem) => void
 	isSelected: (option: ComboboxItem) => boolean
 	loading: boolean
+	teleportTo?: string
 }>()
 
 const emit = defineEmits<{

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

@@ -13,6 +13,7 @@ type __VLS_Props = {
     selectItem: (option: ComboboxItem) => void;
     isSelected: (option: ComboboxItem) => boolean;
     loading: boolean;
+    teleportTo?: string;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
     "update:searchtext": (value: string) => any;

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

@@ -9,8 +9,9 @@ type __VLS_Props = {
     calendarDefinedDays: IDefinedDay[];
     calendarMarkedDays: IMarkedDay[];
     textboxClicked: () => void;
-    onClear: () => void;
+    onClear?: () => void;
     dateSelected: (date: Date) => void;
+    teleportTo?: string;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
     "update:maskedModel": (value: string) => any;

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

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

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

@@ -9,8 +9,9 @@ type __VLS_Props = {
     calendarDefinedDays: IDefinedDay[];
     calendarMarkedDays: IMarkedDay[];
     textboxClicked: () => void;
-    onClear: () => void;
+    onClear?: () => void;
     dateSelected: (date: Date) => void;
+    teleportTo?: string;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
     "update:maskedModel": (value: string) => any;

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

@@ -12,9 +12,10 @@ type __VLS_Props = {
     calendarMarkedDays: IMarkedDay[];
     showClear: boolean;
     textboxClicked: () => void;
-    onClear: () => void;
+    onClear?: () => void;
     dateSelected: (date: Date) => void;
     timeSelected: (time: string) => void;
+    teleportTo?: string;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
     "update:maskedModel": (value: string) => any;

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

@@ -1,7 +1,7 @@
 <template lang="pug">
 .KDateTimePicker(ref="activatorRef" @click.stop="textboxClicked")
 	KMaskTextbox(v-model="maskedModel" :key="maskedModel" :mask="format" :placeholder="format" :showClear="showClear" @clear="onClear")
-	KDropdown(v-model:isOpen="calendarShow" :anchorEl="activatorRef")
+	KDropdown(v-model:isOpen="calendarShow" :anchorEl="activatorRef" :teleportTo="teleportTo")
 		KGrid(direction="row" align="start" :noGap="false" wrap="nowrap").datetime-picker-grid
 			.calendar-section
 				KCalendar(view="month" :viewCount="1" :day="calendarDay" :selectedDay="_date" @dayClicked="dateSelected" :definedDays="calendarDefinedDays" :markedDays="calendarMarkedDays")
@@ -30,9 +30,10 @@ const props = defineProps<{
 	calendarMarkedDays: IMarkedDay[]
 	showClear: boolean
 	textboxClicked: () => void
-	onClear: () => void
+	onClear?: () => void
 	dateSelected: (date: Date) => void
 	timeSelected: (time: string) => void
+	teleportTo?: string
 }>()
 
 const emit = defineEmits<{

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

@@ -12,9 +12,10 @@ type __VLS_Props = {
     calendarMarkedDays: IMarkedDay[];
     showClear: boolean;
     textboxClicked: () => void;
-    onClear: () => void;
+    onClear?: () => void;
     dateSelected: (date: Date) => void;
     timeSelected: (time: string) => void;
+    teleportTo?: string;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
     "update:maskedModel": (value: string) => any;

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

@@ -8,6 +8,8 @@ type __VLS_Props = {
         width: number;
     };
     clickoutside: () => void;
+    teleportTarget: string | null;
+    isInModal: boolean;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;

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

@@ -1,12 +1,18 @@
 <template lang="pug">
-Teleport(to="body")
-	.KDropdown(v-if="open" v-click-outside="clickoutside" :style="dialogStyle")
-		KPanel.KDropdown-container(:class="{'fullWidth': fullWidth}")
-			slot
+.KDropdown-source
+	Teleport(v-if="isMounted && open && teleportTarget" :to="teleportTarget")
+		.KDropdown-teleported
+			.KDropdown(v-click-outside="clickoutside" :style="dialogStyle" v-bind="$attrs")
+				KPanel.KDropdown-container(:class="{'fullWidth': fullWidth}")
+					slot
 </template>
 
 <script lang="ts" setup>
-import { computed } from 'vue'
+import { computed, ref, onMounted } from 'vue'
+
+defineOptions({
+	inheritAttrs: false
+})
 
 const props = defineProps<{
 	open: boolean
@@ -14,14 +20,21 @@ const props = defineProps<{
 	anchorEl?: HTMLElement
 	dropdownRect: { top: number, left: number, width: number }
 	clickoutside: () => void
+	teleportTarget: string | null
+	isInModal: boolean
 }>()
 
+const isMounted = ref(false)
+onMounted(() => {
+	isMounted.value = true
+})
+
 const dialogStyle = computed(() => ({
 	position: 'absolute',
 	top: `${props.dropdownRect.top}px`,
 	left: `${props.dropdownRect.left}px`,
 	width: props.fullWidth ? `${props.dropdownRect.width}px` : 'fit-content',
-	zIndex: 1000
+	zIndex: 2000
 }))
 </script>
 

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

@@ -8,6 +8,8 @@ type __VLS_Props = {
         width: number;
     };
     clickoutside: () => void;
+    teleportTarget: string | null;
+    isInModal: boolean;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;

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

@@ -1,4 +1,5 @@
 type __VLS_Props = {
+    modalId: string;
     opened: boolean;
     closeModal: () => void;
 };

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

@@ -1,5 +1,6 @@
 <template lang="pug">
 dialog.k-dialog(ref="dialogRef" @close="closeModal" @click="handleBackdropClick")
+	.modal-portal(:id="modalId" style="position: absolute; top: 0; left: 0;")
 	KPanel(no-gap flex-content scrollable).modal-container
 		template(#header)
 			slot(name="header")
@@ -12,6 +13,7 @@ dialog.k-dialog(ref="dialogRef" @close="closeModal" @click="handleBackdropClick"
 import { ref, watch, onMounted } from 'vue'
 
 const props = defineProps<{
+	modalId: string
 	opened: boolean
 	closeModal: () => void
 }>()

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

@@ -1,4 +1,5 @@
 type __VLS_Props = {
+    modalId: string;
     opened: boolean;
     closeModal: () => void;
 };

package/package.json

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