vlite3 0.1.0 → 0.1.2

package/src/components/Dropdown/DropdownMenu.vue

@@ -1,374 +0,0 @@
-<script setup lang="ts">
-import {
-  computed,
-  ref,
-  watch,
-  onMounted,
-  onBeforeUnmount,
-  defineAsyncComponent,
-  nextTick,
-  toRef,
-} from 'vue'
-import Icon from '../Icon.vue'
-import type { IDropdownOptions, IDropdownOption } from '@/types'
-import Input from '../Input.vue'
-import DropdownItem from './DropdownItem.vue'
-import DropdownBooleanItem from './DropdownBooleanItem.vue'
-import DropdownGroupedLayout from './DropdownGroupedLayout.vue'
-import { useDropdownNavigation } from './composables/useDropdownNavigation'
-import { useDropdownIds } from './composables/useDropdownIds'
-
-// Async import for recursion
-const Dropdown = defineAsyncComponent(() => import('./Dropdown.vue'))
-
-interface Props {
-  options?: IDropdownOptions
-  cachedOptions?: IDropdownOptions
-  selected?: any
-  selectedIndex?: number | null
-  class?: string
-  maxHeight?: string
-  nestedPosition?: any
-  nestedOffset?: [number, number]
-  selectable?: boolean
-  layout?: 'default' | 'grouped'
-  columns?: number | string
-  // Pagination & Search
-  loading?: boolean
-  hasMore?: boolean
-  searchable?: boolean
-  remote?: boolean
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  options: () => [],
-  cachedOptions: () => [],
-  class: '',
-  maxHeight: '300px',
-  selectedIndex: null,
-  nestedPosition: 'right-start',
-  nestedOffset: () => [0, -5],
-  selectable: true,
-  layout: 'default',
-  columns: 3,
-  loading: false,
-  hasMore: false,
-  searchable: true,
-  remote: false,
-})
-
-const emit = defineEmits<{
-  (e: 'select', option: IDropdownOption): void
-  (e: 'close'): void
-  (e: 'load-more'): void
-  (e: 'search', query: string): void
-}>()
-
-const containerRef = ref<HTMLElement | null>(null)
-const searchQuery = ref('')
-const { getMenuId, getAllRecursiveIds } = useDropdownIds()
-
-// --- Search Logic ---
-const showSearch = computed(() => {
-  // If remote, respect searchable prop. If local, use existing > 10 logic or force searchable.
-  if (props.remote) return props.searchable
-  return props.searchable && (props.options?.length || 0) > 9
-})
-
-let debounceTimer: ReturnType<typeof setTimeout> | null = null
-
-watch(searchQuery, (newQuery) => {
-  if (props.remote) {
-    if (debounceTimer) clearTimeout(debounceTimer)
-    debounceTimer = setTimeout(() => {
-      if (newQuery) {
-        emit('search', newQuery)
-      }
-    }, 100)
-  }
-})
-
-// --- Scroll / Pagination Logic ---
-const handleScroll = (e: Event) => {
-  const el = e.target as HTMLElement
-  // Threshold: 20px from bottom (or 50px?)
-  const threshold = 50
-  const isNearBottom = el.scrollTop + el.clientHeight >= el.scrollHeight - threshold
-
-  if (isNearBottom && props.hasMore && !props.loading) {
-    emit('load-more')
-  }
-}
-
-const handleSelect = (option: IDropdownOption, index?: number) => {
-  if (option.disabled) return
-  emit('select', option)
-}
-
-const {
-  focusedIndex,
-  isKeyboardMode,
-  filteredOptions: navFilteredOptions, // rename
-  handleKeyDown,
-  handleMouseMove,
-  onMouseEnterItem,
-  scrollToIndex,
-} = useDropdownNavigation({
-  options: toRef(props, 'options'),
-  searchQuery,
-  containerRef,
-  emit: (event: string, ...args: any[]) => (emit as any)(event, ...args),
-  handleSelect: (opt, idx) => handleSelect(opt, idx),
-})
-
-// Fix for Remote Filtering:
-// If remote is true:
-//  - If Query is empty: Show Cached Options (Full History)
-//  - If Query exists: Show Props.Options (Current Search Results)
-const filteredOptions = computed(() => {
-  if (props.remote) {
-    if (!searchQuery.value) {
-      return props.cachedOptions.length ? props.cachedOptions : props.options
-    }
-    return props.options
-  }
-  return navFilteredOptions.value
-})
-
-// Recursive Helper
-const getChildSelected = (option: IDropdownOption) => {
-  if (!props.selected || typeof props.selected !== 'object') return undefined
-  if (option.key && option.key in props.selected) {
-    return props.selected[option.key]
-  }
-  return undefined
-}
-
-const isOptionSelected = (option: IDropdownOption) => {
-  if (option.disabled) return false
-
-  if (Array.isArray(props.selected)) {
-    return props.selected.includes(option.value)
-  }
-
-  if (props.selected && typeof props.selected === 'object') {
-    if (option.key) {
-      return props.selected[option.key] === option.value
-    }
-    return props.selected === option.value
-  }
-  return props.selected === option.value
-}
-
-// Boolean option helpers
-const getBooleanValue = (option: IDropdownOption): boolean => {
-  if (!option.key || !props.selected || typeof props.selected !== 'object') {
-    return false
-  }
-  return !!props.selected[option.key]
-}
-
-const handleBooleanChange = (value: boolean, option: IDropdownOption) => {
-  if (!option.key) return
-
-  const virtualOption: IDropdownOption = {
-    label: option.label,
-    value: value,
-    key: option.key,
-    data: option.data,
-  }
-  emit('select', virtualOption)
-}
-
-const handleRecursiveSelect = (
-  parentOption: IDropdownOption,
-  payload: { value: any; data?: any }
-) => {
-  let valueToEmit = payload.value
-
-  if (parentOption.key) {
-    valueToEmit = { [parentOption.key]: valueToEmit }
-  }
-
-  const virtualOption: IDropdownOption = {
-    label: parentOption.label,
-    value: valueToEmit,
-    data: payload.data,
-    key: parentOption.key,
-  }
-
-  emit('select', virtualOption)
-}
-
-// Initial Scroll Logic
-const scrollToSelected = async () => {
-  await nextTick()
-  let targetIndex = -1
-
-  // Scroll logic mainly for 'default' linear list.
-  // For grouped, we might need different logic, but skip for now as 'scrollToIndex' assumes linear list refs.
-  if (props.layout === 'grouped') return
-
-  if (props.selectedIndex !== null && props.selectedIndex >= 0) {
-    targetIndex = props.selectedIndex
-  } else if (props.selected !== undefined && typeof props.selected !== 'object') {
-    targetIndex = props.options.findIndex((opt) => opt.value === props.selected)
-  }
-
-  if (targetIndex !== -1) {
-    scrollToIndex(targetIndex)
-  }
-}
-
-watch(
-  () => filteredOptions.value,
-  () => {
-    focusedIndex.value = -1
-  }
-)
-
-onMounted(() => {
-  scrollToSelected()
-  window.addEventListener('keydown', handleKeyDown)
-})
-
-onBeforeUnmount(() => {
-  window.removeEventListener('keydown', handleKeyDown)
-})
-</script>
-
-<template>
-  <div class="dropdown-menu w-full min-w-[150px] flex flex-col">
-    <!-- Fixed Search -->
-    <div v-if="showSearch" class="bg-body border-b mb-1 z-10 rounded-t-md shrink-0">
-      <Input
-        v-model="searchQuery"
-        placeholder="Search..."
-        icon="lucide:search"
-        size="sm"
-        variant="transparent"
-        :show-clear-button="false" />
-    </div>
-
-    <!-- Fixed Header Slot -->
-    <div v-if="$slots.header" class="shrink-0">
-      <slot name="header" />
-    </div>
-
-    <!-- Scrollable Options Area -->
-    <div
-      ref="containerRef"
-      tabindex="0"
-      role="menu"
-      :class="[
-        'w-full p-1 space-y-0.5 overflow-y-auto overflow-x-hidden focus:outline-none flex-1',
-        props.class,
-      ]"
-      :style="{ maxHeight: props.maxHeight }"
-      @mousemove="handleMouseMove"
-      @scroll="handleScroll">
-      <!-- No header slot here anymore -->
-
-      <div
-        v-if="filteredOptions.length === 0 && options?.length > 0 && !loading"
-        class="px-2 py-6 text-center text-sm text-muted-foreground">
-        No options found
-      </div>
-
-      <!-- GROUPED MODE -->
-      <template v-if="layout === 'grouped'">
-        <DropdownGroupedLayout
-          :options="filteredOptions"
-          :selected="selected"
-          :selectable="selectable"
-          :columns="columns"
-          @select="handleSelect" />
-      </template>
-
-      <!-- DEFAULT RECURSIVE MODE -->
-      <template v-else>
-        <template v-for="(option, index) in filteredOptions" :key="index">
-          <!-- Divider -->
-          <div v-if="option.label === '---'" class="h-px bg-border my-1 mx-1" />
-
-          <!-- Boolean Toggle Item -->
-          <DropdownBooleanItem
-            v-else-if="option.data?.isBoolean"
-            :option="option"
-            :value="getBooleanValue(option)"
-            :focused="isKeyboardMode && focusedIndex === index"
-            @change="handleBooleanChange"
-            @mouseenter="onMouseEnterItem(index)" />
-
-          <!-- Nested Dropdown -->
-          <template v-else-if="option.children && option.children.length > 0">
-            <Dropdown
-              :position="option.position || props.nestedPosition"
-              :offset="option.offset || props.nestedOffset"
-              class="w-full"
-              :options="option.children"
-              :selected="getChildSelected(option)"
-              :menuId="getMenuId(option)"
-              :nestedPosition="props.nestedPosition"
-              :nestedOffset="props.nestedOffset"
-              :selectable="props.selectable"
-              :ignoreClickOutside="getAllRecursiveIds(option.children)"
-              @onSelect="(payload: any) => handleRecursiveSelect(option, payload)">
-              <template #trigger>
-                <div
-                  data-dropdown-item
-                  class="relative flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors justify-between w-full"
-                  :class="[
-                    isKeyboardMode && focusedIndex === index
-                      ? 'bg-accent text-accent-foreground'
-                      : 'hover:bg-accent hover:text-accent-foreground',
-                    option.disabled ? 'opacity-50 cursor-not-allowed' : '',
-                  ]"
-                  @mouseenter="onMouseEnterItem(index)">
-                  <div class="flex items-center gap-2 flex-1 min-w-0">
-                    <Icon
-                      v-if="option.icon"
-                      :icon="option.icon"
-                      class="h-4 w-4 shrink-0 opacity-70" />
-                    <span class="truncate">{{ option.label }}</span>
-                  </div>
-                  <Icon
-                    icon="lucide:chevron-right"
-                    class="h-4 w-4 text-muted-foreground shrink-0 ml-2" />
-                </div>
-              </template>
-            </Dropdown>
-          </template>
-
-          <!-- Standard Item -->
-          <DropdownItem
-            v-else
-            :option="option"
-            :index="index"
-            :selected="isOptionSelected(option)"
-            :focused="isKeyboardMode && focusedIndex === index"
-            :selectable="selectable"
-            @click="handleSelect(option, index)"
-            @mouseenter="onMouseEnterItem(index)">
-            <template #default="slotProps">
-              <slot name="item" v-bind="slotProps" />
-            </template>
-          </DropdownItem>
-        </template>
-      </template>
-
-      <!-- Loading Spinner -->
-      <div v-if="loading" class="flex justify-center py-2">
-        <Icon icon="lucide:loader-2" class="w-4 h-4 animate-spin text-muted-foreground" />
-      </div>
-
-      <slot name="menu" />
-      <!-- No footer slot here anymore -->
-    </div>
-
-    <!-- Fixed Footer Slot -->
-    <div v-if="$slots.footer" class="shrink-0 border-t mt-1 pt-1">
-      <slot name="footer" />
-    </div>
-  </div>
-</template>

package/src/components/Dropdown/DropdownTrigger.vue

@@ -1,27 +0,0 @@
-<script setup lang="ts">
-import Button from '@/components/Button.vue'
-
-interface Props {
-  selectedLabel?: string
-  placeholder?: string
-  isOpen?: boolean
-  disabled?: boolean
-  className?: string
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  selectedLabel: '',
-  placeholder: 'Select an option',
-  disabled: false,
-})
-</script>
-
-<template>
-  <Button
-    :text="selectedLabel || placeholder"
-    iconRight="iconamoon:arrow-down-2"
-    variant="outline"
-    :disabled="disabled"
-    class="w-full justify-between! font-normal"
-    :class="className" />
-</template>

package/src/components/Dropdown/composables/useDropdownIds.ts

@@ -1,27 +0,0 @@
-import type { IDropdownOption, IDropdownOptions } from '@/types'
-
-export function useDropdownIds() {
-  const getMenuId = (option: IDropdownOption) => {
-    if (option.key) return `nested-${option.key}`
-    const cleanLabel = option.label ? option.label.replace(/\s+/g, '-').toLowerCase() : 'menu'
-    return `nested-${cleanLabel}`
-  }
-
-  const getAllRecursiveIds = (options: IDropdownOptions = []): string[] => {
-    const ids: string[] = []
-    options.forEach((opt) => {
-      if (opt.children?.length) {
-        const id = getMenuId(opt)
-        ids.push(`#${id}`)
-        const childIds = getAllRecursiveIds(opt.children)
-        ids.push(...childIds)
-      }
-    })
-    return ids
-  }
-
-  return {
-    getMenuId,
-    getAllRecursiveIds,
-  }
-}

package/src/components/Dropdown/composables/useDropdownNavigation.ts

@@ -1,109 +0,0 @@
-import { ref, computed, nextTick, type Ref } from 'vue'
-import type { IDropdownOption, IDropdownOptions } from '@/types'
-
-interface UseDropdownNavigationProps {
-  options: Ref<IDropdownOptions>
-  searchQuery: Ref<string>
-  containerRef: Ref<HTMLElement | null>
-  emit: (event: 'select' | 'close', ...args: any[]) => void
-  handleSelect: (option: IDropdownOption, index: number) => void
-}
-
-export function useDropdownNavigation(props: UseDropdownNavigationProps) {
-  const focusedIndex = ref(-1)
-  const isKeyboardMode = ref(false)
-
-  const filteredOptions = computed(() => {
-    const opts = props.options.value
-    if (!props.searchQuery.value) return opts
-
-    const query = props.searchQuery.value.toLowerCase()
-    return opts.filter((option) => option.label.toLowerCase().includes(query))
-  })
-
-  const scrollToIndex = (index: number) => {
-    if (!props.containerRef.value || index < 0) return
-
-    const items = props.containerRef.value.querySelectorAll('[data-dropdown-item]')
-    const targetItem = items[index] as HTMLElement
-
-    if (targetItem) {
-      targetItem.scrollIntoView({ block: 'nearest' })
-    }
-  }
-
-  const handleKeyDown = (e: KeyboardEvent) => {
-    const visibleOptions = filteredOptions.value
-
-    if (visibleOptions.length === 0) return
-
-    if (['ArrowDown', 'ArrowUp', 'Enter'].includes(e.key)) {
-      isKeyboardMode.value = true
-    }
-
-    switch (e.key) {
-      case 'ArrowDown':
-        e.preventDefault()
-        e.stopPropagation()
-        if (focusedIndex.value < visibleOptions.length - 1) {
-          focusedIndex.value++
-        } else {
-          focusedIndex.value = 0
-        }
-        scrollToIndex(focusedIndex.value)
-        break
-
-      case 'ArrowUp':
-        e.preventDefault()
-        e.stopPropagation()
-        if (focusedIndex.value > 0) {
-          focusedIndex.value--
-        } else if (focusedIndex.value === -1) {
-          focusedIndex.value = visibleOptions.length - 1
-        } else {
-          focusedIndex.value = visibleOptions.length - 1
-        }
-        scrollToIndex(focusedIndex.value)
-        break
-
-      case 'Enter':
-        e.preventDefault()
-        e.stopPropagation()
-        if (focusedIndex.value >= 0 && focusedIndex.value < visibleOptions.length) {
-          const option = visibleOptions[focusedIndex.value]
-          // If it's a recursive item, Enter might not open it correctly unless we programmatically open the generic Dropdown?
-          // For now, strictly handle leaf selection.
-          if (!option.children) {
-            props.handleSelect(option, focusedIndex.value)
-          }
-        }
-        break
-
-      case 'Escape':
-        e.preventDefault()
-        e.stopPropagation()
-        props.emit('close')
-        break
-    }
-  }
-
-  const handleMouseMove = () => {
-    if (isKeyboardMode.value) {
-      isKeyboardMode.value = false
-    }
-  }
-
-  const onMouseEnterItem = (index: number) => {
-    focusedIndex.value = index
-  }
-
-  return {
-    focusedIndex,
-    isKeyboardMode,
-    filteredOptions,
-    handleKeyDown,
-    handleMouseMove,
-    onMouseEnterItem,
-    scrollToIndex,
-  }
-}

package/src/components/Dropdown/composables/useDropdownSelection.ts

@@ -1,106 +0,0 @@
-import { computed } from 'vue'
-import { deepMerge } from '@/utils/object'
-import type { IDropdownOption, IDropdownOptions } from '@/types'
-
-interface UseDropdownSelectionProps {
-  modelValue: any
-  selected?: any
-  toggleSelection?: boolean
-  showSelectedLabel?: boolean
-  selectable?: boolean
-  options?: IDropdownOptions
-}
-
-type EmitFn = (event: 'update:modelValue' | 'onSelect', ...args: any[]) => void
-
-export function useDropdownSelection(props: UseDropdownSelectionProps, emit: EmitFn) {
-  // Unified Value
-  const currentValue = computed(() => {
-    return props.modelValue !== undefined ? props.modelValue : props.selected
-  })
-
-  // Label Resolution
-  const getLabelFromValue = (options: IDropdownOptions = [], value: any): string => {
-    for (const opt of options) {
-      // Exact match
-      if (opt.value === value) return opt.label
-
-      // Key/Object match
-      if (opt.key && typeof value === 'object' && value !== null && opt.key in value) {
-        if (opt.children) {
-          const childLabel = getLabelFromValue(opt.children, value[opt.key])
-          if (childLabel) return `${opt.label} / ${childLabel}`
-        }
-        // If no children but key matched (top level leaf with key)
-        if (opt.value === value[opt.key]) return opt.label
-
-        return opt.label
-      }
-    }
-    return ''
-  }
-
-  const selectedLabel = computed(() => {
-    if (!props.showSelectedLabel) return ''
-    if (!props.selectable) return ''
-    if (!props.options?.length) return ''
-    return getLabelFromValue(props.options, currentValue.value)
-  })
-
-  // Selection Logic
-  const selectOption = (option: IDropdownOption) => {
-    if (typeof option !== 'string' && option?.disabled) return
-
-    const currentVal = currentValue.value
-    let value = option?.value ?? option?.label
-    const data = option.data
-
-    // Recursive / Partial Update Logic
-    if (option.key) {
-      const isWrapped = typeof value === 'object' && value !== null && option.key in value
-
-      if (!isWrapped) {
-        value = { [option.key]: value }
-      }
-    }
-
-    // Merge Logic: If currentValue is an object (config mode)
-    if (currentVal && typeof currentVal === 'object' && !Array.isArray(currentVal) && option.key) {
-      // Toggle Logic: Check if already selected
-      const key = option.key
-      const targetVal = option.value ?? option.label
-
-      const isSelected = currentVal[key] === targetVal
-
-      // If toggle enabled and already selected, remove it
-      if (props.toggleSelection && isSelected) {
-        const clone = { ...currentVal }
-        delete clone[key]
-        emit('update:modelValue', clone)
-        emit('onSelect', { value: clone, data })
-        return
-      }
-
-      // Otherwise Merge
-      const merged = deepMerge(currentVal, value)
-      emit('update:modelValue', merged)
-      emit('onSelect', { value: merged, data })
-    } else {
-      // Standard replace (Primitive or Single Object)
-      // Toggle logic for simple mode
-      if (props.toggleSelection && currentVal === (option.value ?? option.label)) {
-        emit('update:modelValue', undefined)
-        emit('onSelect', { value: undefined, data })
-      } else {
-        emit('update:modelValue', value)
-        emit('onSelect', { value, data })
-      }
-    }
-  }
-
-  return {
-    currentValue,
-    selectedLabel,
-    selectOption,
-  }
-}

package/src/components/Dropdown/index.ts

@@ -1,6 +0,0 @@
-export { default as Dropdown } from './Dropdown.vue'
-export { default as DropdownMenu } from './DropdownMenu.vue'
-export { default as DropdownTrigger } from './DropdownTrigger.vue'
-export { default as DropdownItem } from './DropdownItem.vue'
-export * from './composables/useDropdownSelection'
-export * from './composables/useDropdownIds'