vlite3 0.1.0 → 0.1.2

package/src/components/Workbook/Sheet.vue

@@ -1,185 +0,0 @@
-<script setup lang="ts">
-import { ref, nextTick, computed, onMounted } from 'vue'
-import Icon from '../Icon.vue'
-import type { WorkbookSheet } from './types'
-import { Dropdown } from '@/components/Dropdown'
-import IconPicker from '@/components/IconPicker.vue'
-
-interface Props {
-  sheet: WorkbookSheet
-  isActive: boolean
-  isEditing?: boolean
-  canDelete?: boolean
-  confirmDelete?: boolean
-  confirmDeleteTexts?: {
-    title?: string
-    description?: string
-    confirm?: string
-    cancel?: string
-  }
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  isEditing: false,
-  canDelete: true,
-  confirmDelete: false,
-})
-
-const emit = defineEmits<{
-  (e: 'select', id: string): void
-  (e: 'update:title', id: string, newTitle: string): void
-  (e: 'update:icon', id: string, newIcon: string): void
-  (e: 'edit-start', id: string): void
-  (e: 'edit-end', id: string): void
-  (e: 'duplicate', id: string): void
-  (e: 'delete', id: string): void
-}>()
-
-const inputRef = ref<HTMLInputElement | null>(null)
-const localTitle = ref(props.sheet.title)
-
-// Focus input when editing starts
-const startEdit = () => {
-  localTitle.value = props.sheet.title
-  emit('edit-start', props.sheet.id)
-  nextTick(() => {
-    inputRef.value?.focus()
-    inputRef.value?.select()
-  })
-}
-
-const saveEdit = () => {
-  if (!props.isEditing) return
-  const val = localTitle.value.trim()
-  if (val) {
-    emit('update:title', props.sheet.id, val)
-  } else {
-    // Revert if empty
-    localTitle.value = props.sheet.title
-  }
-  emit('edit-end', props.sheet.id)
-}
-
-const cancelEdit = () => {
-  localTitle.value = props.sheet.title
-  emit('edit-end', props.sheet.id)
-}
-
-const handleKeyDown = (e: KeyboardEvent) => {
-  if (e.key === 'Enter') saveEdit()
-  if (e.key === 'Escape') cancelEdit()
-}
-
-// Menu Actions
-const menuOptions = computed(() => [
-  { label: 'Rename', value: 'rename', icon: 'lucide:pencil' },
-  { label: 'Duplicate', value: 'duplicate', icon: 'lucide:copy' },
-  {
-    label: 'Delete',
-    value: 'delete',
-    icon: 'lucide:trash-2',
-    class: 'text-danger',
-    disabled: !props.canDelete,
-    confirmation: props.confirmDelete
-      ? {
-          title: props.confirmDeleteTexts?.title,
-          description: props.confirmDeleteTexts?.description,
-          confirmText: props.confirmDeleteTexts?.confirm,
-          cancelText: props.confirmDeleteTexts?.cancel,
-          variant: 'danger' as const,
-        }
-      : undefined,
-  },
-])
-
-const handleMenuSelect = (option: any) => {
-  if (option.value === 'rename') startEdit()
-  if (option.value === 'duplicate') emit('duplicate', props.sheet.id)
-  if (option.value === 'delete') {
-    if (!props.canDelete) return
-    emit('delete', props.sheet.id)
-  }
-}
-
-// Styles
-const containerClass = computed(() => {
-  return [
-    'group relative flex items-center min-w-[120px] max-w-[240px] h-9 px-3 border-r border-border select-none cursor-pointer transition-all duration-200 ease-out',
-    props.isActive
-      ? 'bg-muted text-foreground ring-1 ring-border ring-b-0 z-10'
-      : 'text-muted-foreground hover:bg-accent/50',
-    props.isEditing ? 'cursor-text' : '',
-  ].join(' ') // "border-b-0" logic handled by parent container's bottom border or z-index
-})
-</script>
-
-<template>
-  <div :class="containerClass" @click="emit('select', sheet.id)" @dblclick="startEdit">
-    <!-- Icon / IconPicker -->
-    <div @click.stop class="mr-2 flex items-center shrink-0">
-      <IconPicker
-        v-if="sheet.icon || isEditing"
-        :value="sheet.icon || 'lucide:file'"
-        position="bottom-start"
-        @onSelect="(val) => emit('update:icon', sheet.id, val)">
-        <template #default>
-          <button
-            type="button"
-            class="flex items-center justify-center rounded hover:bg-accent transition-colors p-0.5 outline-none focus-visible:ring-2 focus-visible:ring-primary/20">
-            <Icon
-              :icon="sheet.icon || 'lucide:file'"
-              class="w-4 h-4 opacity-70 hover:opacity-100 transition-opacity" />
-          </button>
-        </template>
-      </IconPicker>
-      <!-- If no icon and not editing, maybe show nothing or default? 
-                 User said "showing the icon with the tab title". 
-                 If tab.icon is missing, usually we showed nothing? 
-                 The original code was v-if="tab.icon". 
-                 Let's stick to showing it if it exists OR if we want to allow adding one (maybe isEditing is a good trigger to show a placeholder?)
-                 For now, let's stick to replacing the existing v-if="tab.icon" block essentially, 
-                 but wrapping it in IconPicker. 
-            -->
-    </div>
-
-    <!-- Title / Input -->
-    <div class="flex-1 min-w-0 pr-1">
-      <input
-        v-if="isEditing"
-        ref="inputRef"
-        v-model="localTitle"
-        type="text"
-        class="w-full bg-transparent border-none outline-none p-0 text-sm font-medium text-foreground placeholder-muted-foreground focus:ring-0"
-        @blur="saveEdit"
-        @keydown="handleKeyDown"
-        @click.stop />
-      <span v-else class="block truncate text-sm font-medium leading-normal">
-        {{ sheet.title }}
-      </span>
-    </div>
-
-    <!-- Hover Actions (Menu) -->
-    <div
-      class="opacity-0 group-hover:opacity-100 transition-opacity ml-auto pl-1 flex items-center bg-inherit">
-      <Dropdown
-        :options="menuOptions"
-        :position="'bottom-end'"
-        :width="'140px'"
-        :teleport="true"
-        @onSelect="handleMenuSelect">
-        <template #trigger>
-          <button
-            class="p-1 rounded-md hover:bg-accent text-muted-foreground hover:text-foreground transition-colors">
-            <Icon icon="lucide:more-vertical" class="w-3.5 h-3.5" />
-          </button>
-        </template>
-        <template #item="{ option }">
-          <div :class="['flex items-center']">
-            <Icon v-if="option?.icon" :icon="option?.icon" class="w-3.5 h-3.5 mr-2 opacity-70" />
-            {{ option?.label }}
-          </div>
-        </template>
-      </Dropdown>
-    </div>
-  </div>
-</template>

package/src/components/Workbook/Workbook.vue

@@ -1,231 +0,0 @@
-<script setup lang="ts">
-import { ref, watch, nextTick, computed } from 'vue'
-import { useDragAndDrop } from '@formkit/drag-and-drop/vue'
-import { animations } from '@formkit/drag-and-drop'
-import type { WorkbookSheet, WorkbookProps, AddButtonPosition } from './types'
-import SheetItem from './Sheet.vue'
-import WorkbookAddButton from './WorkbookAddButton.vue'
-
-// Props
-const props = withDefaults(defineProps<WorkbookProps>(), {
-  editable: true,
-  addable: true,
-  draggable: true,
-  addButtonPosition: 'fixed-right' as AddButtonPosition,
-  variant: 'chrome',
-  modelValue: '',
-  sheets: () => [],
-  maxSheets: 50,
-  confirmDelete: false,
-})
-
-const emit = defineEmits<{
-  (e: 'update:modelValue', id: string): void
-  (e: 'update:sheets', sheets: WorkbookSheet[]): void
-  (e: 'change', id: string): void
-  (e: 'add'): void
-  (e: 'delete', id: string): void
-  (e: 'duplicate', id: string): void
-  (e: 'edit-start', id: string): void
-  (e: 'edit-end', id: string): void
-}>()
-
-// State
-const scrollContainer = ref<HTMLElement | null>(null)
-const editingTabId = ref<string | null>(null)
-
-// Drag and Drop
-const [parent, sheetsList] = useDragAndDrop(props.sheets, {
-  plugins: [animations()],
-  draggable: (el) => {
-    // Only allow dragging if enabled and not currently editing
-    // We check props.draggable and ensure we aren't in edit mode
-    return props.draggable && !editingTabId.value
-  },
-  onSort: (state) => {
-    // Sync order changes back to parent
-    // Cast state.values to WorkbookSheet[] if needed, typically it infers correctly
-    emit('update:sheets', state.values as WorkbookSheet[])
-  },
-})
-
-// Watch for external updates to sheets prop
-watch(
-  () => props.sheets,
-  (newSheets) => {
-    if (JSON.stringify(newSheets) !== JSON.stringify(sheetsList.value)) {
-      sheetsList.value = [...newSheets]
-    }
-  },
-  { deep: true }
-)
-
-const handleSelect = (id: string) => {
-  emit('update:modelValue', id)
-  emit('change', id)
-}
-
-// Add New
-const handleAdd = () => {
-  if (props.sheets.length >= props.maxSheets) return
-  emit('add')
-}
-
-// Edit Flow
-const handleUpdateTitle = (id: string, newTitle: string) => {
-  const idx = props.sheets.findIndex((t) => t.id === id)
-  if (idx !== -1) {
-    const newSheets = [...props.sheets]
-    newSheets[idx] = { ...newSheets[idx], title: newTitle }
-    emit('update:sheets', newSheets)
-  }
-}
-
-const handleUpdateIcon = (id: string, newIcon: string) => {
-  const idx = props.sheets.findIndex((t) => t.id === id)
-  if (idx !== -1) {
-    const newSheets = [...props.sheets]
-    newSheets[idx] = { ...newSheets[idx], icon: newIcon }
-    emit('update:sheets', newSheets)
-  }
-}
-
-const handleEditStart = (id: string) => {
-  editingTabId.value = id
-  emit('edit-start', id)
-}
-
-const handleEditEnd = (id: string) => {
-  editingTabId.value = null
-  emit('edit-end', id)
-}
-
-// Duplicate logic
-const handleDuplicate = (id: string) => {
-  emit('duplicate', id)
-}
-
-// Delete logic
-const handleDelete = (id: string) => {
-  // If confirmation was needed, it's already handled by Sheet -> Dropdown before emitting 'delete'
-  const idx = props.sheets.findIndex((t) => t.id === id)
-  if (idx === -1) return
-
-  // 1. Emit update:sheets (Auto-delete)
-  const newSheets = [...props.sheets]
-  newSheets.splice(idx, 1)
-  emit('update:sheets', newSheets)
-
-  // 2. Emit delete event (Legacy / Notification)
-  emit('delete', id)
-
-  // 3. Handle Active State
-  if (props.modelValue === id) {
-    let newActiveId = ''
-    if (newSheets.length > 0) {
-      // Prefer same index (next item moves in), else last item
-      const newIdx = Math.min(idx, newSheets.length - 1)
-      newActiveId = newSheets[newIdx].id
-    }
-    emit('update:modelValue', newActiveId)
-    emit('change', newActiveId)
-  }
-}
-
-// Watchers for "Auto Edit newly added sheet"
-watch(
-  () => props.sheets.length,
-  (newLen, oldLen) => {
-    if (newLen > oldLen && props.addable) {
-      nextTick(() => {
-        const lastSheet = props.sheets[props.sheets.length - 1]
-        if (lastSheet.id === props.modelValue) {
-          editingTabId.value = lastSheet.id
-        }
-      })
-    }
-  }
-)
-
-// Scroll behavior (horizontal wheel)
-const onWheel = (e: WheelEvent) => {
-  if (scrollContainer.value) {
-    if (e.deltaY !== 0) {
-      scrollContainer.value.scrollLeft += e.deltaY
-      e.preventDefault()
-    }
-  }
-}
-
-// Use props.tabs for length check to rely on "upstream" truth rather than internal drag state
-const canDeleteSheet = computed(() => props.sheets.length > 1)
-</script>
-
-<template>
-  <div class="flex flex-col w-full font-sans">
-    <!-- Header / Workbook Bar -->
-    <div class="flex items-end w-full border-b px-1 gap-2">
-      <!-- Left Slot -->
-      <div v-if="$slots['left-addons']" class="flex items-center mb-1 mr-2">
-        <slot name="left-addons" />
-      </div>
-
-      <!-- Scrollable Area -->
-      <div
-        ref="scrollContainer"
-        class="flex-1 flex items-end overflow-x-auto scrollbar-none overscroll-contain"
-        style="scrollbar-width: none; -ms-overflow-style: none"
-        @wheel="onWheel">
-        <!-- Sheets List (Drag Parent) -->
-        <!-- Replaced TransitionGroup with div and parent ref -->
-        <!-- We use a wrapper div to serve as the drag parent so add button isn't mixed in -->
-        <div ref="parent" class="flex items-end">
-          <SheetItem
-            v-for="sheet in sheetsList"
-            :key="sheet.id"
-            :sheet="sheet"
-            :is-active="modelValue === sheet.id"
-            :is-editing="editingTabId === sheet.id"
-            :can-delete="canDeleteSheet"
-            :confirm-delete="confirmDelete"
-            :confirm-delete-texts="confirmDeleteTexts"
-            @select="handleSelect"
-            @update:title="handleUpdateTitle"
-            @update:icon="handleUpdateIcon"
-            @edit-start="handleEditStart"
-            @edit-end="handleEditEnd"
-            @duplicate="handleDuplicate"
-            @delete="handleDelete" />
-        </div>
-
-        <!-- Attached Add Button -->
-        <div v-if="addable && addButtonPosition === 'attached'" class="shrink-0 mb-1">
-          <WorkbookAddButton @click="handleAdd" />
-        </div>
-
-        <!-- Spacer to ensure last sheet isn't cut off if sticky right -->
-        <div class="w-1 shrink-0"></div>
-      </div>
-
-      <!-- Fixed Right Add Button & Right Slots -->
-      <div class="flex items-center mb-0.5 z-20 sticky right-0 ml-auto box-decoration-clone">
-        <div v-if="addable && addButtonPosition === 'fixed-right'">
-          <WorkbookAddButton @click="handleAdd" />
-        </div>
-
-        <div v-if="$slots['right-addons']">
-          <slot name="right-addons" />
-        </div>
-      </div>
-    </div>
-
-    <!-- Content Area -->
-    <div class="flex-1 relative bg-white w-full">
-      <slot />
-    </div>
-  </div>
-</template>
-
-<style scoped>
-/* Removed TransitionGroup styles as FormKit/drag-and-drop handles animations */
-</style>

package/src/components/Workbook/WorkbookAddButton.vue

@@ -1,17 +0,0 @@
-<script setup lang="ts">
-import Button from '@/components/Button.vue'
-
-const emit = defineEmits<{
-  (e: 'click', event: MouseEvent): void
-}>()
-</script>
-
-<template>
-  <Button
-    variant="ghost"
-    size="sm"
-    icon="lucide:plus"
-    title="Add New Sheet"
-    rounded="none"
-    @click="emit('click', $event)" />
-</template>

package/src/components/Workbook/index.ts

@@ -1,3 +0,0 @@
-export { default as Workbook } from './Workbook.vue'
-export { default as Sheet } from './Sheet.vue'
-export * from './types'

package/src/components/Workbook/types.ts

@@ -1,43 +0,0 @@
-export interface WorkbookSheet {
-  id: string
-  title: string
-  icon?: string
-  content?: string
-  closable?: boolean
-  disabled?: boolean
-  [key: string]: any
-}
-
-export type SheetPosition = 'top' | 'bottom' | 'left' | 'right'
-export type AddButtonPosition = 'attached' | 'fixed-right'
-
-export interface WorkbookProps {
-  modelValue?: string
-  sheets?: WorkbookSheet[]
-  editable?: boolean
-  addable?: boolean
-  draggable?: boolean
-  addButtonPosition?: AddButtonPosition
-
-  // Limits
-  maxSheets?: number
-
-  // Style
-  variant?: 'chrome' | 'folder' | 'simple' | 'card'
-  class?: string
-
-  // Delete Confirmation
-  confirmDelete?: boolean
-  confirmDeleteTexts?: {
-    title?: string
-    description?: string
-    confirm?: string
-    cancel?: string
-  }
-}
-
-export interface SheetEvent {
-  id: string
-  sheet: WorkbookSheet
-  originalEvent?: Event
-}