@katlux/toolkit 0.1.0-beta.5 → 0.1.0-beta.50

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

@@ -1,11 +1,16 @@
-import type { IMarkedDay, IDefinedDay } from '@katlux/toolkit/components/KCalendar/types.ts';
+import { type PropType } from 'vue';
+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[];
+    teleportTo?: string;
 }
 export declare const KDateTimePickerDefaultProps: {
     format: {
@@ -20,6 +25,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;
@@ -32,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

@@ -1,4 +1,4 @@
-import { ref, 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
@@ -23,6 +35,10 @@ export const KDateTimePickerDefaultProps = {
   calendarMarkedDays: {
     type: Array,
     default: () => []
+  },
+  teleportTo: {
+    type: String,
+    default: void 0
   }
 };
 export function useKDateTimePickerLogic(props) {
@@ -30,21 +46,93 @@ export function useKDateTimePickerLogic(props) {
   const _time = ref("");
   const maskedModel = ref("");
   const calendarShow = ref(false);
+  watch(maskedModel, (newVal) => {
+    if (newVal === "") {
+      if (_date.value !== "") {
+        _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));
+      }
+      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;
+          if (hours.length === 2 && minutes.length === 2) {
+            _time.value = `${hours}:${minutes}`;
+          }
+        }
+      }
+    }
+  });
   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}`;
+      }
+    } else {
+      maskedModel.value = "";
     }
   };
   const formatDate = (date) => {
@@ -59,11 +147,64 @@ 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(() => {
+    syncValue(props.modelValue || props.day);
+    if (props.isOpen) {
+      calendarShow.value = props.isOpen;
+    }
+  });
+  const syncValue = (val) => {
+    if (val === void 0 || val === null || val === "") {
+      _date.value = "";
+      _time.value = "";
+      maskedModel.value = "";
+      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();
+  };
+  watch(() => props.modelValue, (newVal) => {
+    if (newVal !== void 0) {
+      const d1 = newVal && (newVal instanceof Date || typeof newVal === "string") ? newVal instanceof Date ? newVal.getTime() : new Date(newVal).getTime() : 0;
+      const d2 = _date.value instanceof Date ? _date.value.getTime() : new Date(_date.value || "").getTime();
+      if (d1 !== d2 || !newVal && _date.value) {
+        syncValue(newVal);
+      }
+    }
+  });
+  watch(() => props.day, (newDay) => {
+    if (newDay !== void 0) {
+      const d1 = newDay && (newDay instanceof Date || typeof newDay === "string") ? newDay instanceof Date ? newDay.getTime() : new Date(newDay).getTime() : 0;
+      const d2 = _date.value instanceof Date ? _date.value.getTime() : new Date(_date.value || "").getTime();
+      if (d1 !== d2 || !newDay && _date.value) {
+        syncValue(newDay);
+      }
+    }
+  });
+  watch(() => props.isOpen, (newVal) => {
+    calendarShow.value = !!newVal;
+  });
   return {
     _date,
     _time,

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

@@ -7,6 +7,14 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
         type: BooleanConstructor;
         default: boolean;
     };
+    anchorEl: {
+        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<{
@@ -18,11 +26,21 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
         type: BooleanConstructor;
         default: boolean;
     };
+    anchorEl: {
+        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>;
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -1,21 +1,30 @@
 <script setup>
 import { useKDropdownLogic, KDropdownDefaultProps } from "./KDropdown.logic";
 import { usePresetComponent } from "../../composables/usePresetComponent";
-import { computed } from "vue";
+import { computed, watch } from "vue";
 import KDropdownDefault from "../../presets/default/components/KDropdown/KDropdown.vue";
 const props = defineProps(KDropdownDefaultProps);
 const emit = defineEmits(["update:isOpen"]);
-const { open, clickoutside } = useKDropdownLogic(props, emit);
+const { open, dropdownRect, clickoutside, teleportTarget, isInModal, updatePosition } = useKDropdownLogic(props, emit);
 const presetComponent = usePresetComponent("KDropdown", KDropdownDefault);
+watch(presetComponent, () => {
+  if (open.value) {
+    updatePosition();
+  }
+});
 const templateProps = computed(() => ({
   open: open.value,
   fullWidth: props.fullWidth,
-  clickoutside
+  anchorEl: props.anchorEl,
+  dropdownRect: dropdownRect.value,
+  clickoutside,
+  teleportTarget: teleportTarget.value,
+  isInModal: isInModal.value
 }));
 </script>
 
 <template lang="pug">
-component(:is="presetComponent" v-bind="templateProps")
+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

@@ -7,6 +7,14 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
         type: BooleanConstructor;
         default: boolean;
     };
+    anchorEl: {
+        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<{
@@ -18,11 +26,21 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
         type: BooleanConstructor;
         default: boolean;
     };
+    anchorEl: {
+        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>;
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -1,6 +1,9 @@
+import { type PropType, type Ref } from 'vue';
 export interface KDropdownProps {
     isOpen: boolean;
     fullWidth: boolean;
+    anchorEl?: HTMLElement;
+    teleportTo?: string;
 }
 export interface KDropdownEmits {
     (e: 'update:isOpen', value: boolean): void;
@@ -14,8 +17,32 @@ export declare const KDropdownDefaultProps: {
         type: BooleanConstructor;
         default: boolean;
     };
+    anchorEl: {
+        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>;
+    open: Ref<boolean, boolean>;
+    dropdownRect: Ref<{
+        top: number;
+        left: number;
+        width: number;
+    }, {
+        top: number;
+        left: number;
+        width: number;
+    } | {
+        top: number;
+        left: number;
+        width: number;
+    }>;
     clickoutside: () => void;
+    teleportTarget: import("vue").ComputedRef<string>;
+    isInModal: import("vue").ComputedRef<boolean>;
+    updatePosition: () => void;
 };

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

@@ -1,4 +1,5 @@
-import { ref, watch, onMounted } 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,
@@ -7,25 +8,105 @@ export const KDropdownDefaultProps = {
   fullWidth: {
     type: Boolean,
     default: false
+  },
+  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?.value);
+  const teleportTarget = computed(() => {
+    if (props.teleportTo) return props.teleportTo;
+    if (isInModal.value && modalPortalId?.value) {
+      const targetId = `#${modalPortalId.value}`;
+      if (typeof document !== "undefined" && !document.querySelector(targetId)) {
+        const activePortal = document.querySelector(".modal-portal");
+        if (activePortal && activePortal.id) return `#${activePortal.id}`;
+      }
+      return targetId;
+    }
+    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 = () => {
+    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 = () => {
+    if (open.value) {
+      updatePosition();
+    }
+  };
   watch(
     () => props.isOpen,
     (newValue) => {
-      open.value = newValue;
+      if (newValue) {
+        updatePosition();
+        nextTick(() => {
+          open.value = true;
+        });
+      } else {
+        open.value = false;
+      }
+    },
+    { immediate: true }
+  );
+  watch(
+    () => props.anchorEl,
+    () => {
+      if (open.value) {
+        updatePosition();
+      }
     }
   );
   onMounted(() => {
-    open.value = props.isOpen;
+    window.addEventListener("scroll", onScrollResize, true);
+    window.addEventListener("resize", onScrollResize);
+  });
+  onUnmounted(() => {
+    window.removeEventListener("scroll", onScrollResize, true);
+    window.removeEventListener("resize", onScrollResize);
   });
   return {
     open,
-    clickoutside
+    dropdownRect,
+    clickoutside,
+    teleportTarget,
+    isInModal,
+    updatePosition
   };
 }

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

@@ -1,60 +1,11 @@
-declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
-    direction: {
-        type: PropType<"row" | "column">;
-        default: string;
-    };
-    wrap: {
-        type: PropType<"wrap" | "nowrap">;
-        default: string;
-    };
-    flexChild: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    align: {
-        type: PropType<"start" | "center" | "end" | "stretch" | "baseline">;
-        default: string;
-    };
-    justify: {
-        type: PropType<"start" | "center" | "end" | "space-between" | "around" | "evenly">;
-        default: string;
-    };
-    noGap: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
-    direction: {
-        type: PropType<"row" | "column">;
-        default: string;
-    };
-    wrap: {
-        type: PropType<"wrap" | "nowrap">;
-        default: string;
-    };
-    flexChild: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    align: {
-        type: PropType<"start" | "center" | "end" | "stretch" | "baseline">;
-        default: string;
-    };
-    justify: {
-        type: PropType<"start" | "center" | "end" | "space-between" | "around" | "evenly">;
-        default: string;
-    };
-    noGap: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-}>> & Readonly<{}>, {
-    wrap: any;
-    direction: any;
+import { type KGridProps } from './KGrid.logic.js';
+declare const __VLS_export: import("vue").DefineComponent<KGridProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<KGridProps> & Readonly<{}>, {
+    wrap: "wrap" | "nowrap";
+    direction: "row" | "column";
     flexChild: boolean;
-    align: any;
-    justify: any;
+    align: "start" | "center" | "end" | "stretch" | "baseline";
+    justify: "start" | "center" | "end" | "space-between" | "around" | "evenly";
     noGap: boolean;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -1,9 +1,16 @@
 <script setup>
-import { useKGridLogic, KGridDefaultProps } from "./KGrid.logic";
+import { useKGridLogic } from "./KGrid.logic";
 import { usePresetComponent } from "../../composables/usePresetComponent";
 import { computed } from "vue";
 import KGridDefault from "../../presets/default/components/KGrid/KGrid.vue";
-const props = defineProps(KGridDefaultProps);
+const props = defineProps({
+  direction: { type: String, required: false, default: "row" },
+  wrap: { type: String, required: false, default: "wrap" },
+  flexChild: { type: Boolean, required: false, default: false },
+  align: { type: String, required: false, default: "start" },
+  justify: { type: String, required: false, default: "start" },
+  noGap: { type: Boolean, required: false, default: false }
+});
 const { classes } = useKGridLogic(props);
 const presetComponent = usePresetComponent("KGrid", KGridDefault);
 const templateProps = computed(() => ({

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

@@ -1,60 +1,11 @@
-declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
-    direction: {
-        type: PropType<"row" | "column">;
-        default: string;
-    };
-    wrap: {
-        type: PropType<"wrap" | "nowrap">;
-        default: string;
-    };
-    flexChild: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    align: {
-        type: PropType<"start" | "center" | "end" | "stretch" | "baseline">;
-        default: string;
-    };
-    justify: {
-        type: PropType<"start" | "center" | "end" | "space-between" | "around" | "evenly">;
-        default: string;
-    };
-    noGap: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
-    direction: {
-        type: PropType<"row" | "column">;
-        default: string;
-    };
-    wrap: {
-        type: PropType<"wrap" | "nowrap">;
-        default: string;
-    };
-    flexChild: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    align: {
-        type: PropType<"start" | "center" | "end" | "stretch" | "baseline">;
-        default: string;
-    };
-    justify: {
-        type: PropType<"start" | "center" | "end" | "space-between" | "around" | "evenly">;
-        default: string;
-    };
-    noGap: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-}>> & Readonly<{}>, {
-    wrap: any;
-    direction: any;
+import { type KGridProps } from './KGrid.logic.js';
+declare const __VLS_export: import("vue").DefineComponent<KGridProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<KGridProps> & Readonly<{}>, {
+    wrap: "wrap" | "nowrap";
+    direction: "row" | "column";
     flexChild: boolean;
-    align: any;
-    justify: any;
+    align: "start" | "center" | "end" | "stretch" | "baseline";
+    justify: "start" | "center" | "end" | "space-between" | "around" | "evenly";
     noGap: boolean;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;