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

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

@@ -1,33 +1,54 @@
 <template lang="pug">
-.KDropdown(v-if="open" v-click-outside="clickoutside")
-	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 setup>
-const props = defineProps({
-  open: { type: Boolean, required: true },
-  fullWidth: { type: Boolean, required: true },
-  clickoutside: { type: Function, required: true }
-});
+<script lang="ts" setup>
+import { computed, ref, onMounted } from 'vue'
+
+defineOptions({
+	inheritAttrs: false
+})
+
+const props = defineProps<{
+	open: boolean
+	fullWidth: boolean
+	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: 2000
+}))
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
 .KDropdown {
-  position: relative;
-}
-.KDropdown .KPanel {
-  position: absolute;
-  max-width: 100%;
-  left: 0px;
-  top: var(--component-gap);
-  z-index: 2;
-}
-.KDropdown .KPanel.fullWidth {
-  width: unset;
-  max-width: unset;
-}
-.KDropdown .KPanel :deep .KPanel--content {
-  padding: var(--component-gap);
+	.KPanel {
+		width: auto !important;
+		max-width: 100vw;
+		box-shadow: var(--shadow-xl);
+		:deep {
+			.KPanel--content {
+				padding: var(--component-gap);
+			}
+		}
+	}
 }
 </style>

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

@@ -1,7 +1,15 @@
 type __VLS_Props = {
     open: boolean;
     fullWidth: boolean;
+    anchorEl?: HTMLElement;
+    dropdownRect: {
+        top: number;
+        left: number;
+        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;