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

package/dist/module.json

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

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

@@ -1,12 +1,17 @@
 <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, teleportTarget, isInModal } = 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,

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

@@ -1,4 +1,4 @@
-import { type PropType } from 'vue';
+import { type PropType, type Ref } from 'vue';
 export interface KDropdownProps {
     isOpen: boolean;
     fullWidth: boolean;
@@ -27,8 +27,8 @@ export declare const KDropdownDefaultProps: {
     };
 };
 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;
@@ -44,4 +44,5 @@ export declare function useKDropdownLogic(props: KDropdownProps, emit: KDropdown
     clickoutside: () => void;
     teleportTarget: import("vue").ComputedRef<string>;
     isInModal: import("vue").ComputedRef<boolean>;
+    updatePosition: () => void;
 };

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

@@ -20,10 +20,17 @@ export const KDropdownDefaultProps = {
 };
 export function useKDropdownLogic(props, emit) {
   const modalPortalId = inject(KMODAL_PORTAL_ID_KEY, null);
-  const isInModal = computed(() => !!modalPortalId);
+  const isInModal = computed(() => !!modalPortalId?.value);
   const teleportTarget = computed(() => {
     if (props.teleportTo) return props.teleportTo;
-    if (isInModal.value) return `#${modalPortalId}`;
+    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);
@@ -87,12 +94,6 @@ export function useKDropdownLogic(props, emit) {
     }
   );
   onMounted(() => {
-    if (props.isOpen) {
-      updatePosition();
-      nextTick(() => {
-        open.value = true;
-      });
-    }
     window.addEventListener("scroll", onScrollResize, true);
     window.addEventListener("resize", onScrollResize);
   });
@@ -105,6 +106,7 @@ export function useKDropdownLogic(props, emit) {
     dropdownRect,
     clickoutside,
     teleportTarget,
-    isInModal
+    isInModal,
+    updatePosition
   };
 }

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

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

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

@@ -3,7 +3,7 @@ export interface KModalProps {
 }
 export declare const KModalDefaultProps: {};
 export declare function useKModalLogic(props: KModalProps, stableId: string): {
-    modalId: 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,8 +1,8 @@
-import { ref, provide } from "vue";
+import { ref, provide, computed } from "vue";
 export const KMODAL_PORTAL_ID_KEY = "KMODAL_PORTAL_ID";
 export const KModalDefaultProps = {};
 export function useKModalLogic(props, stableId) {
-  const modalId = stableId;
+  const modalId = computed(() => stableId);
   provide(KMODAL_PORTAL_ID_KEY, modalId);
   const opened = ref(false);
   function openModal() {

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/KModal/KModal.vue

@@ -1,6 +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;")
+	.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")
@@ -57,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/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.47",
+	"version": "0.1.0-beta.48",
 	"description": "Core UI toolkit and utilities for the Katlux ecosystem",
 	"author": "Katlux",
 	"license": "MIT",