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

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "@katlux/toolkit",
   "configKey": "katluxToolkit",
-  "version": "0.1.0-beta.46",
+  "version": "0.1.0-beta.48",
   "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" | "small" | "primary" | "danger" | "success" | "warning" | "light" | "dark" | "large" | "medium" | {
+    buttonClasses: import("vue").ComputedRef<("info" | "default" | "primary" | "danger" | "success" | "warning" | "light" | "dark" | "small" | "large" | "medium" | {
         disabled: boolean | undefined;
     })[]>;
     onClick: () => void;

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

@@ -0,0 +1,20 @@
+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

@@ -0,0 +1,12 @@
+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

@@ -27,6 +27,10 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
         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;
@@ -62,6 +66,10 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
         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,6 +80,7 @@ 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: import("../KCalendar/types.js").IDefinedDay[];

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

@@ -25,7 +25,8 @@ const templateProps = computed(() => ({
   calendarMarkedDays: props.calendarMarkedDays,
   textboxClicked,
   onClear: handleClear,
-  dateSelected: handleDateSelected
+  dateSelected: handleDateSelected,
+  teleportTo: props.teleportTo
 }));
 const handleClear = () => {
   _date.value = "";

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

@@ -27,6 +27,10 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
         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;
@@ -62,6 +66,10 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
         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,6 +80,7 @@ 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: import("../KCalendar/types.js").IDefinedDay[];

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

@@ -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) {

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

@@ -35,6 +35,10 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
         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;
@@ -77,6 +81,10 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
         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,6 +94,7 @@ 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: import("../KCalendar/types.js").IDefinedDay[];

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

@@ -31,7 +31,8 @@ const templateProps = computed(() => ({
   textboxClicked,
   onClear: handleClear,
   dateSelected,
-  timeSelected
+  timeSelected,
+  teleportTo: props.teleportTo
 }));
 const handleClear = () => {
   _date.value = "";

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

@@ -35,6 +35,10 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
         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;
@@ -77,6 +81,10 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
         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,6 +94,7 @@ 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: import("../KCalendar/types.js").IDefinedDay[];

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

@@ -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) {

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

@@ -1,23 +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, dropdownRect, 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,
   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

@@ -1,8 +1,9 @@
-import { type PropType } from 'vue';
+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;
@@ -20,10 +21,14 @@ 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>;
-    dropdownRect: import("vue").Ref<{
+    open: Ref<boolean, boolean>;
+    dropdownRect: Ref<{
         top: number;
         left: number;
         width: number;
@@ -37,4 +42,7 @@ export declare function useKDropdownLogic(props: KDropdownProps, emit: KDropdown
         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, 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,58 @@ 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?.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 = 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 +74,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,10 +94,6 @@ export function useKDropdownLogic(props, emit) {
     }
   );
   onMounted(() => {
-    open.value = props.isOpen;
-    if (open.value) {
-      updatePosition();
-    }
     window.addEventListener("scroll", onScrollResize, true);
     window.addEventListener("resize", onScrollResize);
   });
@@ -68,6 +104,9 @@ export function useKDropdownLogic(props, emit) {
   return {
     open,
     dropdownRect,
-    clickoutside
+    clickoutside,
+    teleportTarget,
+    isInModal,
+    updatePosition
   };
 }

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

@@ -4,13 +4,16 @@ 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 useId = globalThis.useId || (() => `k-modal-${Math.random().toString(36).slice(2, 9)}`);
+const stableId = useId();
+const { modalId, opened, openModal, closeModal } = useKModalLogic(props, stableId);
 defineExpose({
   openModal,
   closeModal
 });
 const presetComponent = usePresetComponent("KModal", KModalDefault);
 const templateProps = computed(() => ({
+  modalId: modalId.value,
   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: import("vue").ComputedRef<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, computed } 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 = computed(() => 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/components/KTreePicker/KTreePicker.global.d.vue.ts

@@ -103,6 +103,8 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
     onChange?: ((value: any) => any) | undefined;
     "onUpdate:modelValue"?: ((value: any) => any) | undefined;
 }>, {
+    parentKey: string;
+    idKey: string;
     disabled: boolean;
     loading: boolean;
     modelValue: any;
@@ -112,8 +114,6 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
     closeOnSelect: boolean;
     multiSelect: boolean;
     iconField: string;
-    idKey: string;
-    parentKey: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -103,6 +103,8 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
     onChange?: ((value: any) => any) | undefined;
     "onUpdate:modelValue"?: ((value: any) => any) | undefined;
 }>, {
+    parentKey: string;
+    idKey: string;
     disabled: boolean;
     loading: boolean;
     modelValue: any;
@@ -112,8 +114,6 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
     closeOnSelect: boolean;
     multiSelect: boolean;
     iconField: string;
-    idKey: string;
-    parentKey: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -81,14 +81,14 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
         default: () => {};
     };
 }>> & Readonly<{}>, {
+    parentKey: string;
+    idKey: string;
+    expandedByDefault: boolean;
     bulkActions: import("@katlux/providers").IKDatatableAction[];
     rowActions: import("./KTreeView.logic.js").IRowAction[];
     cellSlots: Record<string, any>;
     headerSlots: Record<string, any>;
     treeColumnIndex: number;
-    idKey: string;
-    parentKey: string;
-    expandedByDefault: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -81,14 +81,14 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
         default: () => {};
     };
 }>> & Readonly<{}>, {
+    parentKey: string;
+    idKey: string;
+    expandedByDefault: boolean;
     bulkActions: import("@katlux/providers").IKDatatableAction[];
     rowActions: import("./KTreeView.logic.js").IRowAction[];
     cellSlots: Record<string, any>;
     headerSlots: Record<string, any>;
     treeColumnIndex: number;
-    idKey: string;
-    parentKey: string;
-    expandedByDefault: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/presets/default/assets/scss/css-variables.css

@@ -124,9 +124,11 @@
   --button-bg-dark: var(--neutral-900);
   --button-text-dark: var(--font-color-light);
   --button-hover-bg-dark: var(--neutral-700);
-  --panel-bg-default: var(--yellow-300);
-  --panel-header-bg-default: var(--yellow-500);
-  --panel-footer-bg-default: var(--blue-100);
+  --panel-bg-opacity: 1;
+  --panel-blur: 0px;
+  --panel-bg-default: var(--neutral-50);
+  --panel-header-bg-default: var(--neutral-100);
+  --panel-footer-bg-default: var(--neutral-100);
   --panel-bg-primary: var(--blue-300);
   --panel-header-bg-primary: var(--blue-500);
   --panel-footer-bg-primary: var(--blue-100);
@@ -162,6 +164,7 @@
   --component-gap: var(--gap-sm);
   --layover: var(--neutral-600);
   --modal-overlay-bg: rgba(0, 0, 0, 0.5);
+  --modal-backdrop-blur: 0px;
   --layout-header-height: 60px;
   --layout-header-bg: var(--background-color);
   --layout-sidebar-width: 200px;

package/dist/runtime/presets/default/assets/scss/css-variables.scss

@@ -178,9 +178,11 @@
 	--button-hover-bg-dark: var(--neutral-700);
 
 	// Panel Colors - Default
-	--panel-bg-default: var(--yellow-300);
-	--panel-header-bg-default: var(--yellow-500);
-	--panel-footer-bg-default: var(--blue-100);
+	--panel-bg-opacity: 1;
+	--panel-blur: 0px;
+	--panel-bg-default: var(--neutral-50);
+	--panel-header-bg-default: var(--neutral-100);
+	--panel-footer-bg-default: var(--neutral-100);
 
 	// Panel Colors - Primary
 	--panel-bg-primary: var(--blue-300);
@@ -236,6 +238,7 @@
 	--component-gap: var(--gap-sm);
 	--layover: var(--neutral-600);
 	--modal-overlay-bg: rgba(0, 0, 0, 0.5);
+	--modal-backdrop-blur: 0px;
 
 	// Layout Variables
 	--layout-header-height: 60px;

package/dist/runtime/presets/default/assets/scss/index.css

@@ -141,9 +141,11 @@ li {
   --button-bg-dark: var(--neutral-900);
   --button-text-dark: var(--font-color-light);
   --button-hover-bg-dark: var(--neutral-700);
-  --panel-bg-default: var(--yellow-300);
-  --panel-header-bg-default: var(--yellow-500);
-  --panel-footer-bg-default: var(--blue-100);
+  --panel-bg-opacity: 1;
+  --panel-blur: 0px;
+  --panel-bg-default: var(--neutral-50);
+  --panel-header-bg-default: var(--neutral-100);
+  --panel-footer-bg-default: var(--neutral-100);
   --panel-bg-primary: var(--blue-300);
   --panel-header-bg-primary: var(--blue-500);
   --panel-footer-bg-primary: var(--blue-100);
@@ -179,6 +181,7 @@ li {
   --component-gap: var(--gap-sm);
   --layover: var(--neutral-600);
   --modal-overlay-bg: rgba(0, 0, 0, 0.5);
+  --modal-backdrop-blur: 0px;
   --layout-header-height: 60px;
   --layout-header-bg: var(--background-color);
   --layout-sidebar-width: 200px;

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

@@ -11,6 +11,7 @@ type __VLS_Props = {
     textboxClicked: () => 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>
 
@@ -25,6 +25,7 @@ const props = defineProps<{
 	textboxClicked: () => void
 	onClear?: () => void
 	dateSelected: (date: Date) => void
+	teleportTo?: string
 }>()
 
 const emit = defineEmits<{

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

@@ -11,6 +11,7 @@ type __VLS_Props = {
     textboxClicked: () => 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

@@ -15,6 +15,7 @@ type __VLS_Props = {
     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")
@@ -33,6 +33,7 @@ const props = defineProps<{
 	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

@@ -15,6 +15,7 @@ type __VLS_Props = {
     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,14 @@
 <template lang="pug">
-Teleport(to="body")
-	.KDropdown(v-if="open" v-click-outside="clickoutside" :style="dialogStyle" v-bind="$attrs")
-		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
@@ -18,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; z-index: 2000;")
 	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
 }>()
@@ -55,6 +57,7 @@ const handleBackdropClick = (event: MouseEvent) => {
 	
 	&::backdrop {
 		background-color: var(--modal-overlay-bg);
+		backdrop-filter: blur(var(--modal-backdrop-blur));
 	}
 
 	.modal-container {

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/dist/runtime/presets/default/components/KPanel/KPanel.vue

@@ -33,8 +33,8 @@ const props = withDefaults(defineProps<{
 	border-radius: var(--border-radius-lg);
 	border: 1px solid var(--neutral-200);
 	box-shadow: var(--shadow-md);
-	background-color: color-mix(in srgb, var(--current-panel-bg), transparent 99%);
-	backdrop-filter: blur(8px);
+	background-color: color-mix(in srgb, var(--current-panel-bg), transparent calc((1 - var(--panel-bg-opacity)) * 100%));
+	backdrop-filter: blur(var(--panel-blur));
 	width: 100%;
 	display: flex;
 	flex-direction: column;

package/package.json

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