vlite3 0.1.0 → 0.1.2

package/src/components/Dropdown/Dropdown.vue

@@ -1,348 +0,0 @@
-<script setup lang="ts">
-import ToolTip from 'v-tooltip-lite'
-import 'v-tooltip-lite/style.css'
-import { computed, ref, watch, reactive, toRefs } from 'vue'
-import type { IDropdownOptions, IDropdownOption } from '@/types/styles'
-import type { TooltTipPlacement } from 'v-tooltip-lite/types'
-import DropdownMenu from './DropdownMenu.vue'
-import DropdownTrigger from './DropdownTrigger.vue'
-import ConfirmationModal from '@/components/ConfirmationModal.vue'
-import { useDropdownIds } from './composables/useDropdownIds'
-import { useDropdownSelection } from './composables/useDropdownSelection'
-
-const props = withDefaults(
-	defineProps<{
-		selected?: any
-		modelValue?: any
-		className?: string
-		emptyMessage?: string
-		position?: TooltTipPlacement
-		closeOnSelect?: boolean
-		toggleSelection?: boolean
-		options?: IDropdownOptions
-		canCloseOutside?: boolean
-		caret?: boolean
-		offset?: [number, number]
-		isOpen?: boolean
-		teleport?: boolean
-		selectedIndex?: number | null
-		maxHeight?: string
-		width?: string
-		ignoreClickOutside?: string[]
-		menuId?: string
-		nestedPosition?: TooltTipPlacement
-		nestedOffset?: [number, number]
-		showSelectedLabel?: boolean
-		selectable?: boolean
-		doubleConfirmation?: boolean
-		layout?: 'default' | 'grouped'
-		columns?: number | string
-		// Pagination & Search
-		loading?: boolean
-		hasMore?: boolean
-		searchable?: boolean
-		remote?: boolean
-	}>(),
-	{
-		canCloseOutside: true,
-		closeOnSelect: true,
-		toggleSelection: true,
-		position: 'bottom-end',
-		emptyMessage: 'No options found',
-		offset: () => [0, 8],
-		isOpen: undefined,
-		teleport: true,
-		selectedIndex: null,
-		maxHeight: '300px',
-		showSelectedLabel: true,
-		selectable: true,
-		doubleConfirmation: false,
-		layout: 'default',
-		columns: 3,
-		loading: false,
-		hasMore: false,
-		searchable: true,
-		remote: false,
-	},
-)
-
-const emit = defineEmits<{
-	(e: 'onSelect', payload: { value: any; data?: any }): void
-	(e: 'update:modelValue', value: any): void
-	(e: 'onOpen'): void
-	(e: 'onClose'): void
-	(e: 'update:isOpen', value: boolean): void
-	// new events
-	(e: 'load-more'): void
-	(e: 'search', query: string): void
-}>()
-
-const showConfirmation = ref(false)
-const pendingOption = ref<IDropdownOption | null>(null)
-const confirmationConfig = ref<{
-	title: string
-	description: string
-	confirmText: string
-	cancelText: string
-	variant: 'danger' | 'primary' | 'warning' | 'success' | 'info'
-}>({
-	title: 'Confirm Selection',
-	description: 'Are you sure you want to select this option?',
-	confirmText: 'Confirm',
-	cancelText: 'Cancel',
-	variant: 'primary',
-})
-
-// Internal State for Open/Close
-// We need this because if no v-model:isOpen is passed, we still need to force close logic.
-const internalIsOpen = ref(props.isOpen || false)
-
-watch(
-	() => props.isOpen,
-	(val) => {
-		if (val !== undefined) {
-			internalIsOpen.value = val
-		}
-	},
-)
-
-const handleVisibilityChange = (val: boolean) => {
-	internalIsOpen.value = val
-	emit('update:isOpen', val)
-	if (val) emit('onOpen')
-	else emit('onClose')
-}
-
-// Internal Options Caching Logic
-const internalOptions = ref<IDropdownOptions>([])
-
-watch(
-	() => props.options,
-	(newVal) => {
-		if (!newVal) return
-
-		if (props.remote) {
-			// Merge logic: Add new options to internalOptions if not already present
-			const newOptions = [...internalOptions.value]
-			newVal.forEach((opt) => {
-				const exists = newOptions.some((existing) => {
-					// Unique check: Value or Label
-					if (
-						existing.value !== undefined &&
-						opt.value !== undefined
-					) {
-						// Check for object value equality if necessary, but typically value is primitive or has ID
-						// For complex objects, simple equality might trigger dupes. Assuming primitive or stable ref.
-						// If value is object, maybe check key?
-						if (
-							typeof existing.value === 'object' &&
-							existing.key &&
-							opt.key
-						) {
-							return (
-								existing.key === opt.key &&
-								existing.value[existing.key] ===
-									opt.value[opt.key]
-							)
-						}
-						return existing.value === opt.value
-					}
-					return existing.label === opt.label
-				})
-
-				if (!exists) {
-					newOptions.push(opt)
-				}
-			})
-			internalOptions.value = newOptions
-		} else {
-			internalOptions.value = newVal
-		}
-	},
-	{ immediate: true, deep: true },
-)
-
-const { getAllRecursiveIds } = useDropdownIds()
-
-// useDropdownSelection needs ALL options to resolve labels correctly, especially for cached items not in current props.options
-// We construct a reactive props proxy to inject internalOptions
-const selectionProps = reactive({
-	...toRefs(props),
-	options: internalOptions,
-})
-
-const { currentValue, selectedLabel, selectOption } = useDropdownSelection(
-	selectionProps as any, // Cast to any to satisfy strict prop types if needed, or define interface
-	emit,
-)
-
-const finalIgnoreClickOutside = computed(() => {
-	const propsList = props.ignoreClickOutside || []
-	// Use internalOptions to include cached recursive IDs
-	const recursiveIds = getAllRecursiveIds(internalOptions.value)
-	return [...new Set([...propsList, ...recursiveIds])]
-})
-
-const handleOptionSelect = (
-	option: import('@/types/styles').IDropdownOption,
-) => {
-	// Check if double confirmation is enabled globally or per-option
-	const needsConfirmation = props.doubleConfirmation || !!option.confirmation
-
-	if (needsConfirmation) {
-		pendingOption.value = option
-
-		// Configure Modal
-		if (typeof option.confirmation === 'object') {
-			confirmationConfig.value = {
-				title: option.confirmation.title || 'Confirm Selection',
-				description:
-					option.confirmation.description ||
-					'Are you sure you want to select this option?',
-				confirmText: option.confirmation.confirmText || 'Confirm',
-				cancelText: option.confirmation.cancelText || 'Cancel',
-				variant: option.confirmation.variant || 'primary',
-			}
-		} else {
-			// Default / Global
-			confirmationConfig.value = {
-				title: 'Confirm Selection',
-				description: `Are you sure you want to select "${option.label}"?`,
-				confirmText: 'Confirm',
-				cancelText: 'Cancel',
-				variant: 'primary',
-			}
-		}
-
-		showConfirmation.value = true
-		// Close dropdown immediately? Or wait?
-		// Requirement: "Visually state should only change after confirmation" implies we wait.
-		// So we don't close until confirm? Or we close dropdown to show modal?
-		// Modal usually overlays everything. Better to close dropdown to reduce clutter,
-		// but if we cancel, users might expect dropdown to stay open?
-		// Let's close dropdown to properly focus on modal.
-		handleClose()
-	} else {
-		performSelection(option)
-		if (props.closeOnSelect) {
-			handleClose()
-		}
-	}
-}
-
-const performSelection = (option: import('@/types/styles').IDropdownOption) => {
-	selectOption(option)
-}
-
-const confirmSelection = () => {
-	if (pendingOption.value) {
-		performSelection(pendingOption.value)
-		pendingOption.value = null
-		showConfirmation.value = false
-	}
-}
-
-const cancelSelection = () => {
-	pendingOption.value = null
-	showConfirmation.value = false
-}
-
-const handleClose = () => {
-	handleVisibilityChange(false)
-}
-</script>
-
-<template>
-	<div class="relative inline-block text-left">
-		<ToolTip
-			content=""
-			trigger="click"
-			:arrow="false"
-			:teleport="teleport"
-			:offset="offset"
-			:placement="position"
-			:isOpen="internalIsOpen"
-			:menuId="menuId"
-			:ignoreClickOutside="finalIgnoreClickOutside"
-			class="w-full"
-			:className="'dropdown ' + (className || '')"
-			@onShow="$emit('onOpen')"
-			@onHide="$emit('onClose')"
-			@update:isOpen="handleVisibilityChange"
-			triggerClass="w-full"
-			:styles="{ padding: '0' }">
-			<template #trigger="{ isOpen }">
-				<slot
-					name="trigger"
-					v-bind="{ selectedLabel, isOpen }">
-					<DropdownTrigger
-						:selected-label="selectedLabel"
-						:is-open="isOpen"
-						class="w-full" />
-				</slot>
-			</template>
-
-			<template #default>
-				<slot />
-
-				<DropdownMenu
-					v-if="
-						options?.length ||
-						internalOptions.length ||
-						$slots.menu ||
-						$slots.item ||
-						remote ||
-						searchable
-					"
-					:options="options"
-					:cachedOptions="internalOptions"
-					:class="className"
-					:selected="currentValue"
-					:selectedIndex="selectedIndex"
-					:maxHeight="maxHeight"
-					:nestedPosition="nestedPosition"
-					:nestedOffset="nestedOffset"
-					:selectable="selectable"
-					:layout="layout"
-					:columns="columns"
-					:loading="loading"
-					:hasMore="hasMore"
-					:searchable="searchable"
-					:remote="remote"
-					@select="handleOptionSelect"
-					@close="handleClose"
-					@load-more="$emit('load-more')"
-					@search="(q) => $emit('search', q)">
-					<template #menu>
-						<slot name="menu" />
-					</template>
-					<template #item="slotProps">
-						<slot
-							name="item"
-							v-bind="slotProps" />
-					</template>
-					<template
-						#header
-						v-if="$slots.header">
-						<slot name="header" />
-					</template>
-					<template
-						#footer
-						v-if="$slots.footer">
-						<slot name="footer" />
-					</template>
-				</DropdownMenu>
-			</template>
-		</ToolTip>
-
-		<ConfirmationModal
-			:show="showConfirmation"
-			:title="confirmationConfig.title"
-			:description="confirmationConfig.description"
-			:confirm-text="confirmationConfig.confirmText"
-			:cancel-text="confirmationConfig.cancelText"
-			:variant="confirmationConfig.variant"
-			@confirm="confirmSelection"
-			@cancel="cancelSelection" />
-	</div>
-</template>

package/src/components/Dropdown/DropdownBooleanItem.vue

@@ -1,40 +0,0 @@
-<script setup lang="ts">
-import Switch from '../Switch.vue'
-import Icon from '../Icon.vue'
-import type { IDropdownOption } from '@/types'
-
-interface Props {
-  option: IDropdownOption
-  value: boolean
-  focused?: boolean
-}
-
-const props = defineProps<Props>()
-
-const emit = defineEmits<{
-  (e: 'change', value: boolean, option: IDropdownOption): void
-}>()
-
-const handleToggle = (newValue: boolean) => {
-  emit('change', newValue, props.option)
-}
-</script>
-
-<template>
-  <div
-    data-dropdown-item
-    class="relative flex cursor-pointer select-none items-center justify-between rounded-sm px-2 py-1.5 text-sm outline-none transition-colors"
-    :class="[
-      focused ? 'bg-accent text-accent-foreground' : 'hover:bg-accent hover:text-accent-foreground',
-    ]"
-    @click.stop="handleToggle(!value)">
-    <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 font-medium">{{ option.label }}</span>
-    </div>
-    <Switch
-      :model-value="value"
-      class="ml-3 shrink-0 scale-75 origin-right"
-      @update:model-value="handleToggle" />
-  </div>
-</template>

package/src/components/Dropdown/DropdownGroupedLayout.vue

@@ -1,115 +0,0 @@
-<script setup lang="ts">
-import { computed } from 'vue'
-import Icon from '../Icon.vue'
-import type { IDropdownOptions, IDropdownOption } from '@/types'
-import DropdownItem from './DropdownItem.vue'
-
-interface Props {
-  options: IDropdownOptions
-  selected?: any
-  selectable?: boolean
-  columns?: number | string
-  itemsClass?: string
-  headerClass?: string
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  options: () => [],
-  selectable: true,
-  columns: 3,
-})
-
-const emit = defineEmits<{
-  (e: 'select', option: IDropdownOption): void
-  (e: 'mouseenter', payload: any): void
-}>()
-
-// Calculate Grid Columns
-const gridStyle = computed(() => {
-  const cols = props.columns
-  if (typeof cols === 'number') {
-    return { gridTemplateColumns: `repeat(${cols}, minmax(0, 1fr))` }
-  }
-  return { gridTemplateColumns: cols } // Allow custom string like '200px 1fr'
-})
-
-// Check selection helper (reusing logic visual)
-const isSelected = (option: IDropdownOption) => {
-  // Similar logic to parent, but we rely on simple check here for UI
-  // The parent DropdownMenu logic handles the 'selected' prop complexity usually.
-  // If selected is complex object, simple equality might fail, but let's assume parent passes relevant checker or we check values.
-  // Actually the parent `DropdownMenu` passes `selected` which is the value.
-  if (!props.selected) return false
-
-  // Array check
-  if (Array.isArray(props.selected)) return props.selected.includes(option.value)
-
-  // Object/Primitive check
-  if (typeof props.selected === 'object' && props.selected !== null) {
-    if (option.key && option.key in props.selected)
-      return props.selected[option.key] === option.value
-  }
-
-  return props.selected === option.value
-}
-
-// Flat list for simple linear index emulation if needed,
-// but here we just render structurally.
-// Keyboard nav relying on 'filteredOptions' in parent might need to map to this structure.
-// For now, we render semantically.
-</script>
-
-<template>
-  <div class="grid gap-6 p-4" :style="gridStyle">
-    <div
-      v-for="(group, gIndex) in options"
-      :key="group.key || group.value || gIndex"
-      class="flex flex-col space-y-2 min-w-[150px]">
-      <!-- Group Header -->
-      <div class="flex items-center gap-2 px-2 py-1 mb-1" :class="headerClass">
-        <span class="font-semibold text-sm text-foreground">
-          {{ group.label }}
-        </span>
-        <Icon v-if="group.icon" :icon="group.icon" class="w-4 h-4 text-muted-foreground" />
-      </div>
-
-      <!-- Divider if needed? -->
-      <!-- <div class="h-px bg-border w-full mb-2"></div> -->
-
-      <!-- Children Items -->
-      <div class="flex flex-col space-y-1">
-        <template v-if="group.children && group.children.length">
-          <template
-            v-for="(child, cIndex) in group.children"
-            :key="child.key || child.value || cIndex">
-            <!-- Standard Item -->
-            <DropdownItem
-              :option="child"
-              :selected="isSelected(child)"
-              :selectable="selectable"
-              class="w-full"
-              @click="$emit('select', child)" />
-
-            <!-- Grandchildren (Flattened with Indent) -->
-            <!-- If we want to support 3rd level in grouped view, usually it's just indented below parent -->
-            <template v-if="child.children && child.children.length">
-              <div class="flex flex-col space-y-1 ml-3 pl-3 border-l border-border mt-0.5 mb-1.5">
-                <DropdownItem
-                  v-for="(grandChild, gcIndex) in child.children"
-                  :key="grandChild.key || grandChild.value || gcIndex"
-                  :option="grandChild"
-                  :selected="isSelected(grandChild)"
-                  :selectable="selectable"
-                  class="w-full text-xs"
-                  @click="$emit('select', grandChild)" />
-              </div>
-            </template>
-          </template>
-        </template>
-
-        <!-- Empty State for Group -->
-        <div v-else class="px-2 text-xs text-muted-foreground italic">No items</div>
-      </div>
-    </div>
-  </div>
-</template>

package/src/components/Dropdown/DropdownItem.vue

@@ -1,56 +0,0 @@
-<script setup lang="ts">
-import Icon from '../Icon.vue'
-import type { IDropdownOption } from '@/types'
-
-interface Props {
-  option: IDropdownOption
-  selected?: boolean
-  focused?: boolean
-  selectable?: boolean
-  index?: number
-}
-
-defineProps<Props>()
-
-const emit = defineEmits<{
-  (e: 'click', option: IDropdownOption): void
-  (e: 'mouseenter', index: number): void
-}>()
-</script>
-
-<template>
-  <div
-    data-dropdown-item
-    class="relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors data-disabled:pointer-events-none data-disabled:opacity-50"
-    :class="[
-      selectable && selected && !option.children ? 'bg-accent' : '',
-      focused ? 'bg-accent text-accent-foreground' : 'hover:bg-accent hover:text-accent-foreground',
-      option.disabled ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer',
-    ]"
-    :data-disabled="option.disabled ? true : undefined"
-    @click="emit('click', option)"
-    @mouseenter="$emit('mouseenter', index ?? -1)">
-    <slot name="default" v-bind="{ option, index, selected }">
-      <Icon v-if="option.icon" :icon="option.icon" class="mr-2 h-4 w-4 shrink-0 mt-0.5" />
-      <div class="flex flex-col flex-1 min-w-0">
-        <div class="flex items-center justify-between gap-2">
-          <span class="truncate font-medium">{{ option.label }}</span>
-          <span
-            v-if="option.subtitle"
-            class="text-xs text-muted-foreground whitespace-nowrap opacity-90"
-            >{{ option.subtitle }}</span
-          >
-        </div>
-        <span
-          v-if="option.description"
-          class="text-[10px] text-muted-foreground truncate opacity-70"
-          >{{ option.description }}</span
-        >
-      </div>
-      <Icon
-        v-if="selectable && selected"
-        icon="lucide:check"
-        class="ml-2 h-4 w-4 shrink-0 text-primary" />
-    </slot>
-  </div>
-</template>