vlite3 0.1.0 → 0.1.2

package/src/playground/demos/FilePickerDemo.vue

@@ -1,175 +0,0 @@
-<script setup lang="ts">
-import { ref } from 'vue'
-import { FilePicker, type FilePickerValue } from '@/components/FilePicker'
-import Button from '@/components/Button.vue'
-import Icon from '@/components/Icon.vue'
-
-const basicFiles = ref<FilePickerValue | null>(null)
-const multiFiles = ref<FilePickerValue[] | null>(null)
-const imageFiles = ref<FilePickerValue | null>(null)
-const base64Files = ref<FilePickerValue | null>(null)
-const customTriggerFiles = ref<FilePickerValue | null>(null)
-
-const logChange = (label: string, val: any) => {
-	console.log(`[${label}] Changed:`, val)
-}
-
-const handleError = (err: string) => {
-	alert(err)
-}
-</script>
-
-<template>
-	<div class="space-y-8 p-4 max-w-3xl mx-auto">
-		<div>
-			<h2 class="text-2xl font-bold mb-2">FilePicker Component</h2>
-			<p class="text-gray-500 mb-6">
-				A versatile file selection component with drag & drop,
-				multi-select, and custom trigger support.
-			</p>
-		</div>
-
-		<!-- 1. Basic Usage -->
-		<section class="space-y-4">
-			<h3 class="text-lg font-semibold flex items-center gap-2">
-				<Icon
-					icon="lucide:file"
-					class="text-primary" />
-				Basic Usage
-			</h3>
-			<div class="p-4 border rounded-xl bg-gray-50/50">
-				<FilePicker
-					v-model="basicFiles"
-					@change="(val) => logChange('Basic', val)"
-					@error="handleError" />
-			</div>
-		</section>
-
-		<!-- 2. Multi-Select -->
-		<section class="space-y-4">
-			<h3 class="text-lg font-semibold flex items-center gap-2">
-				<Icon
-					icon="lucide:files"
-					class="text-primary" />
-				Multi-Select
-			</h3>
-			<div class="p-4 border rounded-xl bg-gray-50/50">
-				<FilePicker
-					v-model="multiFiles"
-					multi-select
-					@change="(val) => logChange('Multi', val)"
-					@error="handleError" />
-			</div>
-		</section>
-
-		<!-- 3. Restricted File Types (Images) -->
-		<section class="space-y-4">
-			<h3 class="text-lg font-semibold flex items-center gap-2">
-				<Icon
-					icon="lucide:image"
-					class="text-primary" />
-				Restricted Types (Images Only)
-			</h3>
-			<div class="p-4 border rounded-xl bg-gray-50/50">
-				<FilePicker
-					v-model="imageFiles"
-					:file-types="['image/*', '.png', '.jpg', '.jpeg', '.webp']"
-					@change="(val) => logChange('Images', val)"
-					@error="handleError" />
-			</div>
-		</section>
-
-		<!-- 4. Base64 Return Format -->
-		<section class="space-y-4">
-			<h3 class="text-lg font-semibold flex items-center gap-2">
-				<Icon
-					icon="lucide:code-2"
-					class="text-primary" />
-				Base64 Output
-			</h3>
-			<div class="p-4 border rounded-xl bg-gray-50/50">
-				<FilePicker
-					v-model="base64Files"
-					return-format="base64"
-					:file-types="['image/*']"
-					@change="(val) => logChange('Base64', val)"
-					@error="handleError" />
-				<div
-					v-if="base64Files && base64Files.base64"
-					class="mt-4">
-					<p class="text-xs text-gray-500 mb-2">
-						Preview from Base64:
-					</p>
-					<img
-						:src="base64Files.base64"
-						class="h-20 w-auto rounded border shadow-sm" />
-				</div>
-			</div>
-		</section>
-
-		<!-- 5. Custom Trigger -->
-		<section class="space-y-4">
-			<h3 class="text-lg font-semibold flex items-center gap-2">
-				<Icon
-					icon="lucide:mouse-pointer-click"
-					class="text-primary" />
-				Custom Trigger
-			</h3>
-			<div class="p-4 border rounded-xl bg-gray-50/50">
-				<FilePicker
-					v-model="customTriggerFiles"
-					@change="(val) => logChange('Custom', val)"
-					@error="handleError">
-					<template #trigger="{ trigger, files, isLoading }">
-						<div class="flex items-center gap-4">
-							<Button
-								:loading="isLoading"
-								icon="lucide:upload"
-								@click="trigger">
-								{{
-									files && files.length
-										? 'Change File'
-										: 'Upload File'
-								}}
-							</Button>
-
-							<div
-								v-if="files && files.length > 0"
-								class="flex items-center gap-2 text-sm text-gray-700">
-								<Icon
-									icon="lucide:check-circle"
-									class="text-success h-4 w-4" />
-								{{ files[0].fileName }}
-							</div>
-							<div
-								v-else
-								class="text-sm text-gray-400 italic">
-								No file selected
-							</div>
-						</div>
-					</template>
-				</FilePicker>
-			</div>
-		</section>
-
-		<!-- 6. States -->
-		<section class="space-y-4">
-			<h3 class="text-lg font-semibold flex items-center gap-2">
-				<Icon
-					icon="lucide:toggle-left"
-					class="text-primary" />
-				States
-			</h3>
-			<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
-				<div class="p-4 border rounded-xl bg-gray-50/50">
-					<p class="text-sm font-medium mb-2">Disabled</p>
-					<FilePicker disabled />
-				</div>
-				<div class="p-4 border rounded-xl bg-gray-50/50">
-					<p class="text-sm font-medium mb-2">Loading</p>
-					<FilePicker loading />
-				</div>
-			</div>
-		</section>
-	</div>
-</template>

package/src/playground/demos/FileTreeDemo.vue

@@ -1,150 +0,0 @@
-<script setup lang="ts">
-import { ref } from 'vue'
-import { FileTree, FileNode } from '@/components/FileTree'
-import Button from '@/components/Button.vue'
-import Input from '@/components/Input.vue'
-
-// --- Data ---
-const basicData = ref<FileNode[]>([
-  {
-    id: 'root',
-    label: 'Project Root',
-    isFolder: true,
-    children: [
-      {
-        id: 'src',
-        label: 'src',
-        isFolder: true,
-        children: [
-            { id: 'components', label: 'components', isFolder: true, children: [] },
-            { id: 'assets', label: 'assets', isFolder: true, children: [] },
-            { id: 'main', label: 'main.ts', isFolder: false, icon: 'lucide:file-code' },
-            { id: 'App', label: 'App.vue', isFolder: false, icon: 'lucide:file-code' }
-        ]
-      },
-      { id: 'package', label: 'package.json', isFolder: false, icon: 'lucide:file-json' },
-      { id: 'readme', label: 'README.md', isFolder: false, icon: 'lucide:file-text' }
-    ]
-  }
-])
-
-const asyncData = ref<FileNode[]>([
-    { id: 'cloud', label: 'Cloud Storage', isFolder: true, children: [] },
-    { id: 'local', label: 'Local Disk', isFolder: true, children: [] }
-])
-
-// --- State ---
-const singleSelection = ref<string[]>(['main'])
-const multiSelection = ref<string[]>([])
-const searchQuery = ref('')
-
-// --- Async Loader ---
-const handleLoad = async (node: FileNode) => {
-    // Simulate network delay
-    return new Promise<FileNode[]>(resolve => {
-        setTimeout(() => {
-            // Mock response
-            const newChildren: FileNode[] = [
-                { id: `${node.id}-1`, label: `Dynamic Folder ${Math.floor(Math.random() * 100)}`, isFolder: true, children: [] },
-                { id: `${node.id}-2`, label: `File ${Math.floor(Math.random() * 100)}.txt`, isFolder: false }
-            ]
-            node.children = newChildren
-            resolve(newChildren)
-        }, 1500)
-    })
-}
-
-// --- Verification Logs ---
-const logs = ref<string[]>([])
-const handleLog = (msg: string) => {
-    logs.value.unshift(`[${new Date().toLocaleTimeString()}] ${msg}`)
-    if (logs.value.length > 5) logs.value.pop()
-}
-
-</script>
-
-<template>
-    <div class="space-y-10">
-        <!-- Header -->
-        <div>
-            <h2 class="text-2xl font-bold mb-2">File Tree</h2>
-            <p class="text-gray-500">
-                A recursive tree component for displaying hierarchical data with selection, search, and async loading.
-            </p>
-        </div>
-
-        <!-- 1. Single Selection & Search -->
-        <div class="space-y-4">
-            <h3 class="text-lg font-semibold border-b pb-2">Single Selection & Search</h3>
-            <div class="flex gap-6">
-                <div class="w-1/2 border rounded-lg p-4 bg-card h-[400px] flex flex-col">
-                    <div class="mb-4">
-                         <Input v-model="searchQuery" placeholder="Search files..." icon="lucide:search" />
-                    </div>
-                    <FileTree 
-                        :data="basicData" 
-                        v-model="singleSelection"
-                        :search-query="searchQuery"
-                        selection-mode="single"
-                        :default-expanded-keys="['root', 'src']"
-                        @node-click="(n) => handleLog(`Clicked: ${n.label}`)"
-                        @select="(n, val) => handleLog(`Selected: ${n.label} (${val})`)"
-                        class="flex-1"
-                    />
-                </div>
-                <div class="w-1/2 space-y-4">
-                    <div class="p-4 bg-muted rounded-lg">
-                        <h4 class="font-medium mb-2">State</h4>
-                        <pre class="text-xs">{{ singleSelection }}</pre>
-                    </div>
-                     <div class="p-4 bg-muted rounded-lg">
-                        <h4 class="font-medium mb-2">Logs</h4>
-                        <div class="text-xs space-y-1 text-muted-foreground">
-                            <div v-for="(log, i) in logs" :key="i">{{ log }}</div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-
-        <!-- 2. Multiple Selection (Checkboxes) -->
-        <div class="space-y-4">
-            <h3 class="text-lg font-semibold border-b pb-2">Multiple Selection (Checkboxes)</h3>
-            <div class="flex gap-6">
-                <div class="w-1/2 border rounded-lg p-4 bg-card h-[400px]">
-                    <FileTree 
-                        :data="basicData" 
-                        v-model="multiSelection"
-                        selection-mode="multiple"
-                        show-checkboxes
-                        :default-expanded-keys="['root']"
-                    />
-                </div>
-                <div class="w-1/2">
-                    <div class="p-4 bg-muted rounded-lg h-full overflow-auto">
-                        <h4 class="font-medium mb-2">Selected Keys</h4>
-                        <pre class="text-xs">{{ multiSelection }}</pre>
-                    </div>
-                </div>
-            </div>
-        </div>
-
-        <!-- 3. Async Loading -->
-        <div class="space-y-4">
-            <h3 class="text-lg font-semibold border-b pb-2">Async Loading</h3>
-             <p class="text-sm text-gray-500 mb-2">
-                Expand "Cloud Storage" or "Local Disk" to load children dynamically.
-            </p>
-            <div class="flex gap-6">
-                <div class="w-1/2 border rounded-lg p-4 bg-card h-[300px]">
-                    <FileTree 
-                        :data="asyncData" 
-                        selection-mode="single"
-                        :load-data="handleLoad"
-                    />
-                </div>
-            </div>
-        </div>
-
-    </div>
-</template>