vlite3 0.1.0 → 0.1.2

package/src/components/FileTree/FileTree.vue

@@ -1,334 +0,0 @@
-<script setup lang="ts">
-import { ref, watch, computed, toRaw } from 'vue'
-import type { FileNode, FileTreeProps, FileTreeEvents } from './types'
-import FileTreeNode from './FileTreeNode.vue'
-// Removed unused uuid import
-
-const props = withDefaults(defineProps<FileTreeProps>(), {
-  modelValue: () => [],
-  data: () => [],
-  selectionMode: 'single',
-  showCheckboxes: false,
-  defaultExpandedKeys: () => [],
-  highlightSearch: true,
-})
-
-const emit = defineEmits<FileTreeEvents>()
-
-// State
-const expandedKeys = ref(new Set<string>(props.defaultExpandedKeys))
-const loadingKeys = ref(new Set<string>())
-// We maintain local indeterminate logic manually or derive it.
-// Deriving Indeterminate State:
-// We need a map of Parent -> Children.
-// If 'multiple' mode and checkboxes:
-// Indeterminate = Some but not all children selected.
-// This requires traversing the entire tree or having a flat map.
-// To support "Efficient performance", we should flatten the tree map once on data change.
-
-// Helper: Flatten Tree & Map Parents
-const nodeMap = ref(new Map<string, FileNode>())
-const parentMap = ref(new Map<string, string>())
-
-const buildMaps = (nodes: FileNode[], parentId?: string) => {
-  for (const node of nodes) {
-    nodeMap.value.set(node.id, node)
-    if (parentId) parentMap.value.set(node.id, parentId)
-    if (node.children) {
-      buildMaps(node.children, node.id)
-    }
-  }
-}
-
-watch(
-  () => props.data,
-  (newData) => {
-    nodeMap.value.clear()
-    parentMap.value.clear()
-    buildMaps(newData)
-  },
-  { immediate: true, deep: true }
-)
-
-// Helper: Get All Descendants IDs
-const getDescendants = (node: FileNode): string[] => {
-  let ids: string[] = []
-  if (node.children) {
-    for (const child of node.children) {
-      ids.push(child.id)
-      ids = ids.concat(getDescendants(child))
-    }
-  }
-  return ids
-}
-
-// Selection State
-const selectedKeys = computed(() => new Set(props.modelValue))
-
-// Indeterminate State Calculation
-const indeterminateKeys = computed(() => {
-  const indeterminate = new Set<string>()
-  if (props.selectionMode !== 'multiple') return indeterminate
-
-  // Bottom-up traversal or check every folder?
-  // Check every folder in nodeMap?
-  // Optimized: We can assume if we are strictly managing state, we might know.
-  // But let's verify.
-
-  // We iterate all nodes where isFolder is true
-  nodeMap.value.forEach((node) => {
-    if ((node.isFolder || (node.children && node.children.length)) && node.children) {
-      const allChildrenCount = node.children.length
-      if (allChildrenCount === 0) return
-
-      let selectedCount = 0
-      let indeterminateCount = 0
-
-      // Shallow check of direct children is enough IF we propagate correctly?
-      // No, usually 'indeterminate' implies ANY descendant is selected but not all.
-      // Standard definition:
-      // Checked: All descendants checked.
-      // Indeterminate: Some descendants checked (or some indeterminate).
-      // Unchecked: No descendants checked.
-
-      // Let's rely on a recursive helper that might be heavy?
-      // For large trees, this computed might be slow.
-      // Better: Update indeterminate set during selection mutation.
-      // BUT `modelValue` is a prop we don't own. We strictly react to it.
-      // So we MUST compute it from `modelValue`.
-
-      // Optimization:
-      // Recursive check logic is unavoidable if we only have the list of selected IDs.
-    }
-  })
-
-  // Re-approach: Traverse bottom-up?
-  // Since we have parentMap, we can just look at leaves? No.
-
-  // Let's do a standard recursive check from Root.
-  const traverse = (node: FileNode): { status: 'checked' | 'unchecked' | 'indeterminate' } => {
-    if (!node.children || node.children.length === 0) {
-      return selectedKeys.value.has(node.id) ? { status: 'checked' } : { status: 'unchecked' }
-    }
-
-    let hasChecked = false
-    let hasUnchecked = false
-    let hasIndeterminate = false
-
-    for (const child of node.children) {
-      const res = traverse(child)
-      if (res.status === 'checked') hasChecked = true
-      if (res.status === 'unchecked') hasUnchecked = true
-      if (res.status === 'indeterminate') hasIndeterminate = true
-    }
-
-    if (hasIndeterminate || (hasChecked && hasUnchecked)) {
-      indeterminate.add(node.id)
-      return { status: 'indeterminate' }
-    }
-
-    if (hasChecked) return { status: 'checked' }
-    return { status: 'unchecked' }
-  }
-
-  props.data.forEach(traverse)
-
-  return indeterminate
-})
-
-// Handlers
-const handleToggleExpand = async (node: FileNode) => {
-  if (node.disabled) return
-
-  const isExpanded = expandedKeys.value.has(node.id)
-
-  if (isExpanded) {
-    // Collapse: Recursive close
-    expandedKeys.value.delete(node.id)
-
-    // Find all descendants and remove them from expandedKeys
-    // We use the original node from map to get full hierarchy
-    const originalNode = nodeMap.value.get(node.id) || node
-    const descendants = getDescendants(originalNode)
-    descendants.forEach((id) => expandedKeys.value.delete(id))
-
-    emit('expand', node, false)
-  } else {
-    // Expand
-    expandedKeys.value.add(node.id)
-    emit('expand', node, true)
-
-    // Async Load
-    if (props.loadData && !node.isLoaded && (!node.children || node.children.length === 0)) {
-      loadingKeys.value.add(node.id)
-      try {
-        await props.loadData(node)
-      } finally {
-        loadingKeys.value.delete(node.id)
-      }
-    }
-  }
-}
-
-const handleToggleSelect = (node: FileNode) => {
-  if (node.disabled) return
-
-  // Use original node from map to ensure we have all children, not just filtered ones
-  const originalNode = nodeMap.value.get(node.id) || node
-
-  let newSelected = new Set(selectedKeys.value)
-  const isCurrentlySelected = newSelected.has(node.id)
-
-  if (props.selectionMode === 'single') {
-    newSelected.clear()
-    if (!isCurrentlySelected) {
-      newSelected.add(node.id)
-    }
-  } else if (props.selectionMode === 'multiple') {
-    // Recursive Logic using original structure
-    const descendants = getDescendants(originalNode)
-    const targetState = !isCurrentlySelected // Toggle
-
-    const updateSet = (id: string, add: boolean) => {
-      if (add) newSelected.add(id)
-      else newSelected.delete(id)
-    }
-
-    // 1. Update Node and All Descendants
-    updateSet(node.id, targetState)
-    descendants.forEach((id) => updateSet(id, targetState))
-
-    // 2. Update Ancestors (Bubble Up)
-    let curr = originalNode
-    while (true) {
-      const parentId = parentMap.value.get(curr.id)
-      if (!parentId) break
-
-      const parent = nodeMap.value.get(parentId)
-      if (!parent) break
-
-      // Check all children of parent
-      if (!parent.children) break
-
-      const allSiblingsSelected = parent.children.every((child) => newSelected.has(child.id))
-
-      if (allSiblingsSelected) {
-        newSelected.add(parent.id)
-      } else {
-        newSelected.delete(parent.id)
-      }
-
-      curr = parent
-    }
-  }
-
-  emit('update:modelValue', Array.from(newSelected))
-  emit('select', originalNode, !isCurrentlySelected)
-}
-
-// Search Filtering
-// We don't mutate `data` prop. We filter visibly?
-// If we use v-show on nodes, we need to pass `searchQuery` down.
-// BUT `FileTreeNode` handles visibility?
-// Better: We compute a filtered tree or set of "Visible IDs".
-// And we Auto-Expand.
-
-const filteredData = computed(() => {
-  // If no search, return match
-  // Actually, passing data as-is and letting nodes decide highlight is one thing,
-  // but filtering (hiding non-matches) implies structure change.
-  // "The tree should automatically expand folders that contain matching results"
-
-  if (!props.searchQuery) return props.data
-
-  // Return same structure?
-  // We usually want to show the path to the match.
-  // We can just rely on `v-show` if we pass a "isVisible" prop?
-  // Or we create a filtered clone? Clone is safer for render loops.
-
-  // Let's do a filter+clone.
-  const query = props.searchQuery.toLowerCase()
-
-  const filterNode = (node: FileNode): FileNode | null => {
-    const match = node.label.toLowerCase().includes(query)
-    let filteredChildren: FileNode[] = []
-
-    if (node.children) {
-      filteredChildren = node.children.map(filterNode).filter((n) => n !== null) as FileNode[]
-    }
-
-    if (match || filteredChildren.length > 0) {
-      // Return clone properties + filtered children
-      return {
-        ...node,
-        children: filteredChildren,
-      }
-    }
-
-    return null
-  }
-
-  return props.data.map(filterNode).filter((n) => n !== null) as FileNode[]
-})
-
-// Auto Expand on Search
-watch(
-  () => props.searchQuery,
-  (newVal) => {
-    if (newVal) {
-      const query = newVal.toLowerCase()
-      const toExpand = new Set<string>()
-
-      const visit = (node: FileNode): boolean => {
-        let childMatch = false
-        if (node.children) {
-          for (const child of node.children) {
-            if (visit(child)) childMatch = true
-          }
-        }
-
-        const selfMatch = node.label.toLowerCase().includes(query)
-
-        if (childMatch) {
-          toExpand.add(node.id)
-        }
-
-        return selfMatch || childMatch
-      }
-
-      props.data.forEach(visit)
-
-      // Merge with existing expanded
-      toExpand.forEach((id) => expandedKeys.value.add(id))
-    }
-  }
-)
-</script>
-
-<template>
-  <div :class="['w-full h-full overflow-y-auto', props.class]">
-    <!-- Debug Info (Temporary) -->
-    <!-- <div class="text-xs text-red-500 border-b p-1">
-      Data Len: {{ data.length }} | Filtered: {{ filteredData.length }} | Search: "{{ searchQuery }}"
-    </div> -->
-
-    <template v-if="filteredData.length > 0">
-      <FileTreeNode
-        v-for="node in filteredData"
-        :key="node.id"
-        :node="node"
-        :selection-mode="selectionMode"
-        :selected-keys="selectedKeys"
-        :expanded-keys="expandedKeys"
-        :indeterminate-keys="indeterminateKeys"
-        :loading-keys="loadingKeys"
-        :show-checkboxes="showCheckboxes"
-        :highlight-search="highlightSearch"
-        :search-query="searchQuery"
-        @toggle-expand="handleToggleExpand"
-        @toggle-select="handleToggleSelect"
-        @click-node="(n) => emit('node-click', n)" />
-    </template>
-    <div v-else class="text-sm text-muted-foreground p-4 text-center">No results found.</div>
-  </div>
-</template>

package/src/components/FileTree/FileTreeNode.vue

@@ -1,225 +0,0 @@
-<script setup lang="ts">
-import { computed, inject } from 'vue'
-import type { FileNode, FileTreeSelectionMode } from './types'
-import Icon from '../Icon.vue'
-import CheckBox from '../CheckBox.vue'
-
-defineOptions({
-  name: 'FileTreeNode',
-})
-
-interface Props {
-  node: FileNode
-  depth?: number
-  selectionMode?: FileTreeSelectionMode
-  selectedKeys: Set<string>
-  indeterminateKeys: Set<string>
-  expandedKeys: Set<string>
-  loadingKeys: Set<string>
-  showCheckboxes?: boolean
-  highlightSearch?: boolean
-  searchQuery?: string
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  depth: 0,
-  selectionMode: 'single',
-  showCheckboxes: false,
-  highlightSearch: false,
-})
-
-const emit = defineEmits<{
-  (e: 'toggle-expand', node: FileNode): void
-  (e: 'toggle-select', node: FileNode): void
-  (e: 'click-node', node: FileNode): void
-}>()
-
-// Computed
-const isSelected = computed(() => props.selectedKeys.has(props.node.id))
-const isIndeterminate = computed(() => props.indeterminateKeys.has(props.node.id))
-const isExpanded = computed(() => props.expandedKeys.has(props.node.id))
-const isLoading = computed(() => props.loadingKeys.has(props.node.id))
-
-const isFolder = computed(
-  () => props.node.isFolder || (props.node.children && props.node.children.length > 0)
-)
-
-const paddingLeft = computed(() => {
-  return props.depth * 20 + 'px' // 20px per level
-})
-
-// Truncation Helper
-const truncatedLabel = computed(() => {
-  const label = props.node.label
-  const maxLength = 35 // Max chars before truncation logic kicks in
-
-  if (label.length <= maxLength) return label
-
-  // Attempt to preserve extension
-  const lastDotIndex = label.lastIndexOf('.')
-
-  // If no extension or it's a folder usually (folders might have dots too but fewer rules)
-  // or extension is too long (weird case)
-  if (lastDotIndex === -1 || label.length - lastDotIndex > 10) {
-    return label.substring(0, maxLength) + '...'
-  }
-
-  const ext = label.substring(lastDotIndex)
-  const name = label.substring(0, lastDotIndex)
-
-  // We want total length ~ maxLength
-  // Available for name = maxLength - ext.length - 3 (for '...')
-  const available = Math.max(0, maxLength - ext.length - 3)
-
-  return name.substring(0, available) + '...' + ext
-})
-
-// Highlight Search
-const labelParts = computed(() => {
-  const displayText = truncatedLabel.value
-
-  if (!props.highlightSearch || !props.searchQuery) {
-    return [{ text: displayText, highlight: false }]
-  }
-  const query = props.searchQuery.toLowerCase()
-  const index = displayText.toLowerCase().indexOf(query)
-
-  if (index === -1) return [{ text: displayText, highlight: false }]
-
-  return [
-    { text: displayText.slice(0, index), highlight: false },
-    {
-      text: displayText.slice(index, index + query.length),
-      highlight: true,
-    },
-    { text: displayText.slice(index + query.length), highlight: false },
-  ]
-})
-
-// Handlers
-const handleExpand = (e?: MouseEvent) => {
-  if (e) e.stopPropagation()
-  emit('toggle-expand', props.node)
-}
-
-const handleSelect = (e?: Event | boolean) => {
-  // Checkbox change
-  emit('toggle-select', props.node)
-}
-
-const handleClick = (e: MouseEvent) => {
-  e.stopPropagation()
-
-  // UX Improvement:
-  // If Folder -> Expand/Collapse
-  if (isFolder.value) {
-    handleExpand()
-  } else {
-    // If File -> Toggle Selection (if mode allows)
-    // Works for both checkbox and single mode
-    if (props.selectionMode !== 'none') {
-      emit('toggle-select', props.node)
-    }
-  }
-
-  emit('click-node', props.node)
-}
-</script>
-
-<template>
-  <div class="flex flex-col select-none">
-    <!-- Node Row -->
-    <div
-      class="group flex items-center py-1 pr-2 rounded-md hover:bg-accent/50 transition-colors cursor-pointer min-h-[32px]"
-      :class="{
-        'bg-accent/50 text-accent-foreground':
-          isSelected && selectionMode === 'single' && !showCheckboxes,
-        'opacity-50 pointer-events-none': node.disabled,
-      }"
-      :style="{ paddingLeft }"
-      @click="handleClick"
-      :title="node.label">
-      <!-- Expand Logic: Chevron or Spacer -->
-      <!-- We keep the button for explicit chevron clicking, but row click also triggers it -->
-      <button
-        v-if="isFolder"
-        type="button"
-        class="p-1 mr-1 rounded-sm hover:bg-muted text-muted-foreground transition-transform duration-200 focus:outline-none"
-        :class="{ 'rotate-90': isExpanded }"
-        @click.stop="handleExpand">
-        <Icon icon="lucide:chevron-right" class="w-4 h-4" />
-      </button>
-      <div v-else class="w-6 mr-1" />
-      <!-- Spacer for non-folders -->
-
-      <!-- Checkbox -->
-      <div
-        v-if="showCheckboxes && selectionMode !== 'none'"
-        class="mr-2 flex items-center justify-center bg-transparent"
-        @click.stop>
-        <CheckBox
-          :checked="isSelected"
-          :indeterminate="isIndeterminate"
-          :disabled="node.disabled"
-          @update:checked="handleSelect"
-          rounded="sm"
-          size="sm" />
-      </div>
-
-      <!-- Icon -->
-      <div class="mr-2 text-muted-foreground shrink-0">
-        <Icon v-if="isLoading" icon="lucide:loader-2" class="w-4 h-4 animate-spin" />
-        <Icon v-else-if="node.icon" :icon="node.icon" class="w-4 h-4" />
-        <Icon
-          v-else-if="isFolder"
-          :icon="isExpanded ? 'lucide:folder-open' : 'lucide:folder'"
-          class="w-4 h-4" />
-        <Icon v-else icon="lucide:file" class="w-4 h-4" />
-      </div>
-
-      <!-- Label -->
-      <div class="flex-1 truncate text-sm font-medium">
-        <template v-for="(part, i) in labelParts" :key="i">
-          <span
-            :class="{
-              'bg-yellow-100 text-yellow-900 rounded-sm px-0.5': part.highlight,
-            }"
-            >{{ part.text }}</span
-          >
-        </template>
-      </div>
-    </div>
-
-    <!-- Children (Recursive) -->
-    <div v-if="isExpanded && isFolder && !isLoading" class="relative flex flex-col">
-      <!-- Vertical Line -->
-      <div
-        class="absolute top-1 bottom-1 border-l border-border"
-        :style="{ left: depth * 20 + 10 + 'px' }"></div>
-
-      <template v-if="node.children && node.children.length > 0">
-        <FileTreeNode
-          v-for="child in node.children"
-          :key="child.id"
-          :node="child"
-          :depth="depth + 1"
-          :selection-mode="selectionMode"
-          :selected-keys="selectedKeys"
-          :expanded-keys="expandedKeys"
-          :indeterminate-keys="indeterminateKeys"
-          :loading-keys="loadingKeys"
-          :show-checkboxes="showCheckboxes"
-          :highlight-search="highlightSearch"
-          :search-query="searchQuery"
-          @toggle-expand="(n) => $emit('toggle-expand', n)"
-          @toggle-select="(n) => $emit('toggle-select', n)"
-          @click-node="(n) => $emit('click-node', n)" />
-      </template>
-      <!-- Empty State - Adjusted Padding -->
-      <div
-        v-else-if="isExpanded && isFolder && (!node.children || node.children.length === 0)"
-        class="py-0.5 text-xs text-muted-foreground italic"
-        :style="{ paddingLeft: (depth + 1) * 20 + 26 + 'px' }"></div>
-    </div>
-  </div>
-</template>

package/src/components/FileTree/index.ts

@@ -1,2 +0,0 @@
-export { default as FileTree } from './FileTree.vue'
-export * from './types'

package/src/components/FileTree/types.ts

@@ -1,31 +0,0 @@
-export interface FileNode {
-  id: string
-  label: string
-  isFolder?: boolean
-  children?: FileNode[]
-  disabled?: boolean
-  icon?: string
-  data?: any
-  isLoaded?: boolean
-}
-
-export type FileTreeSelectionMode = 'single' | 'multiple' | 'none'
-
-export interface FileTreeProps {
-  data: FileNode[]
-  modelValue?: string[]
-  selectionMode?: FileTreeSelectionMode
-  showCheckboxes?: boolean
-  defaultExpandedKeys?: string[]
-  loadData?: (node: FileNode) => Promise<FileNode[]>
-  searchQuery?: string
-  highlightSearch?: boolean
-  class?: string
-}
-
-export interface FileTreeEvents {
-  (e: 'update:modelValue', value: string[]): void
-  (e: 'select', node: FileNode, selected: boolean): void
-  (e: 'expand', node: FileNode, expanded: boolean): void
-  (e: 'node-click', node: FileNode): void
-}

package/src/components/FileTree/useTreeSelection.ts

@@ -1,66 +0,0 @@
-import { computed, type Ref } from 'vue'
-import type { FileNode } from './types'
-
-interface UseTreeSelectionProps {
-  data: Ref<FileNode[]>
-  selectedKeys: Ref<Set<string>>
-  selectionMode: Ref<'single' | 'multiple' | 'none'>
-  emit: (event: 'update:modelValue' | 'select', ...args: any[]) => void
-}
-
-export function useTreeSelection({
-  data,
-  selectedKeys,
-  selectionMode,
-  emit,
-}: UseTreeSelectionProps) {
-  // Helper to find parent of a node (needed for verifying indeterminate state upwards)
-  // Since we don't have back-pointers, we might need a map or traverse.
-  // For performance on large trees, a flat map of ID -> ParentID is useful.
-  // But let's start with traversal if needed, or assume we handle it via events propagating up/down?
-  // Actually, standard approach:
-  // 1. Flatten map for quick lookups?
-  // 2. Or recursive "check all" down, and "verify all" up.
-
-  // Let's implement a recursive toggle.
-
-  const toggleSelection = (node: FileNode, selected: boolean) => {
-    if (node.disabled) return
-
-    const newSelected = new Set(selectedKeys.value)
-
-    if (selectionMode.value === 'single') {
-      newSelected.clear()
-      if (selected) {
-        newSelected.add(node.id)
-      }
-    } else if (selectionMode.value === 'multiple') {
-      // Recursive selection
-      const traverse = (n: FileNode, val: boolean) => {
-        if (n.disabled) return
-        if (val) newSelected.add(n.id)
-        else newSelected.delete(n.id)
-
-        if (n.children) {
-          n.children.forEach((c) => traverse(c, val))
-        }
-      }
-      traverse(node, selected)
-
-      // We also need to re-verify parents (if a child is unchecked, parent must be unchecked)
-      // This is tricky without parent pointers.
-      // OPTION: We assume the parent component (FileTree) re-calculates or we use a helper to re-evaluate the whole tree state based on leaves?
-      // "Selecting a folder should recursively select all nested files".
-      // "Unselecting a child -> Parent unselected" is standard but not explicitly requested, but implies consistency.
-      // Let's implement robust consistency in the main component or here if we have access to full tree.
-      // We have `data` ref. We can rebuild consistency.
-    }
-
-    emit('update:modelValue', Array.from(newSelected))
-    emit('select', node, selected)
-  }
-
-  return {
-    toggleSelection,
-  }
-}