@sakoa/ui 0.2.2 → 0.2.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sakoa/ui",
-  "version": "0.2.2",
+  "version": "0.2.4",
   "type": "module",
   "main": "./dist/saka-ui.umd.cjs",
   "module": "./dist/saka-ui.js",
@@ -39,6 +39,7 @@
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "highlight.js": "^11.11.1",
+    "lucide-vue-next": "^0.577.0",
     "tailwind-merge": "^3.5.0",
     "vue": "^3.5.29",
     "vue-router": "^4.6.4"

package/registry/source/components/ui/dropdown/SDropdown.vue

@@ -45,12 +45,20 @@ export interface SDropdownContext {
 }
 
 export const SDropdownContextKey: InjectionKey<SDropdownContext> = Symbol('SDropdownContext')
+
+export interface SDropdownParentContext {
+  registerChildRef: (ref: Ref<HTMLElement | null>) => void
+  unregisterChildRef: (ref: Ref<HTMLElement | null>) => void
+  cancelHide: () => void
+}
+
+export const SDropdownParentKey: InjectionKey<SDropdownParentContext> = Symbol('SDropdownParent')
 </script>
 
 <script setup lang="ts">
 defineOptions({ inheritAttrs: false })
 
-import { ref, computed, provide, watch, onMounted, onBeforeUnmount, nextTick } from 'vue'
+import { ref, computed, provide, inject, watch, onMounted, onBeforeUnmount, nextTick } from 'vue'
 import { cn } from '../../../lib/utils'
 
 export interface Props {
@@ -157,6 +165,23 @@ const menuPosition = ref<{
 let showTimeout: ReturnType<typeof setTimeout> | null = null
 let hideTimeout: ReturnType<typeof setTimeout> | null = null
 
+// Nested dropdown support: track child teleported menu refs
+const childDropdownRefs = new Set<Ref<HTMLElement | null>>()
+const parentDropdown = inject(SDropdownParentKey, null)
+
+provide(SDropdownParentKey, {
+  registerChildRef: (childRef: Ref<HTMLElement | null>) => { childDropdownRefs.add(childRef) },
+  unregisterChildRef: (childRef: Ref<HTMLElement | null>) => { childDropdownRefs.delete(childRef) },
+  cancelHide: () => {
+    if (hideTimeout) {
+      clearTimeout(hideTimeout)
+      hideTimeout = null
+    }
+    // Propagate up the chain for deeply nested dropdowns
+    parentDropdown?.cancelHide()
+  }
+})
+
 // Computed
 const isManual = computed(() => props.trigger === 'manual')
 
@@ -339,12 +364,15 @@ const calculatePosition = () => {
 
 const open = async () => {
   if (props.disabled || isOpen.value) return
-  
+
   if (hideTimeout) {
     clearTimeout(hideTimeout)
     hideTimeout = null
   }
-  
+
+  // Cancel parent hide timeout when a nested dropdown opens
+  parentDropdown?.cancelHide()
+
   isOpen.value = true
   emit('update:visible', true)
   emit('open')
@@ -413,6 +441,8 @@ const handleMenuMouseEnter = () => {
       hideTimeout = null
     }
   }
+  // Also cancel parent hide when entering a nested menu
+  parentDropdown?.cancelHide()
 }
 
 const handleMenuMouseLeave = () => {
@@ -427,7 +457,9 @@ const handleClickOutside = (event: MouseEvent) => {
     triggerRef.value &&
     dropdownRef.value &&
     !triggerRef.value.contains(target) &&
-    !dropdownRef.value.contains(target)
+    !dropdownRef.value.contains(target) &&
+    // Don't close if click is inside a child dropdown's teleported menu
+    ![...childDropdownRefs].some(childRef => childRef.value?.contains(target))
   ) {
     close()
   }
@@ -528,6 +560,11 @@ watch(isOpen, (val) => {
   }
 })
 
+// Register this dropdown's menu ref with parent (for nested teleported menus)
+if (parentDropdown) {
+  parentDropdown.registerChildRef(dropdownRef)
+}
+
 // Lifecycle
 onMounted(() => {
   document.addEventListener('mousedown', handleClickOutside)
@@ -536,6 +573,9 @@ onMounted(() => {
 onBeforeUnmount(() => {
   if (showTimeout) clearTimeout(showTimeout)
   if (hideTimeout) clearTimeout(hideTimeout)
+  if (parentDropdown) {
+    parentDropdown.unregisterChildRef(dropdownRef)
+  }
   document.removeEventListener('mousedown', handleClickOutside)
   window.removeEventListener('scroll', calculatePosition, true)
   window.removeEventListener('resize', calculatePosition)

package/registry/source/components/ui/dropdown/SDropdownItem.vue

@@ -27,6 +27,8 @@ export interface Props {
   checked?: boolean
   /** Custom color for this item */
   color?: string
+  /** Custom icon color */
+  iconColor?: string
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -38,7 +40,8 @@ const props = withDefaults(defineProps<Props>(), {
   disabled: false,
   danger: false,
   checked: undefined,
-  color: undefined
+  color: undefined,
+  iconColor: undefined
 })
 
 const emit = defineEmits<{
@@ -71,15 +74,21 @@ onBeforeUnmount(() => {
 const sizeConfig = computed(() => ({
   small: {
     item: 'px-2 py-1 text-xs',
-    icon: 'text-sm'
+    icon: 'text-sm',
+    iconSize: 'w-3.5 h-3.5',
+    iconPx: 14
   },
   medium: {
     item: 'px-2.5 py-1.5 text-sm',
-    icon: 'text-base'
+    icon: 'text-base',
+    iconSize: 'w-4 h-4',
+    iconPx: 16
   },
   large: {
     item: 'px-3 py-2 text-base',
-    icon: 'text-lg'
+    icon: 'text-lg',
+    iconSize: 'w-5 h-5',
+    iconPx: 20
   }
 }[context?.size ?? 'medium']))
 
@@ -131,7 +140,7 @@ const handleClick = (event: MouseEvent) => {
     />
     
     <!-- Leading icon -->
-    <component v-else-if="icon && isIconComponent(icon)" :is="icon" :class="[sizeConfig.icon, 'mr-2.5', danger ? '' : 'text-muted-foreground group-hover:text-foreground']" />
+    <component v-else-if="icon && isIconComponent(icon)" :is="icon" :size="sizeConfig.iconPx" :class="['mr-2.5 shrink-0', !iconColor && !danger ? 'text-muted-foreground group-hover:text-foreground' : '']" :style="iconColor ? { color: iconColor } : {}" />
     <span
       v-else-if="icon"
       :class="['mdi', `mdi-${icon}`, sizeConfig.icon, 'mr-2.5', danger ? '' : 'text-muted-foreground group-hover:text-foreground']"
@@ -162,7 +171,7 @@ const handleClick = (event: MouseEvent) => {
       </kbd>
       
       <!-- Trailing icon -->
-      <component v-if="trailingIcon && isIconComponent(trailingIcon)" :is="trailingIcon" :class="[sizeConfig.icon, 'text-muted-foreground']" />
+      <component v-if="trailingIcon && isIconComponent(trailingIcon)" :is="trailingIcon" :size="sizeConfig.iconPx" class="text-muted-foreground" />
       <span
         v-else-if="trailingIcon"
         :class="['mdi', `mdi-${trailingIcon}`, sizeConfig.icon, 'text-muted-foreground']"