vlite3 0.1.0 → 0.1.2

package/src/playground/demos/ChoiceBoxDemo.vue

@@ -1,160 +0,0 @@
-<script setup lang="ts">
-import { ref } from 'vue'
-import { ChoiceBox, type ChoiceBoxOption } from '@/components/ChoiceBox'
-import Icon from '@/components/Icon.vue'
-
-const plans: ChoiceBoxOption[] = [
-	{
-		id: 'basic',
-		title: 'Basic Plan',
-		description:
-			'Perfect for starters. Includes basic features and community support.',
-		icon: 'lucide:box',
-		badge: 'Free',
-	},
-	{
-		id: 'pro',
-		title: 'Pro Plan',
-		description:
-			'For growing businesses. Advanced analytics and priority support.',
-		icon: 'lucide:zap',
-		badge: 'Popular',
-	},
-	{
-		id: 'enterprise',
-		title: 'Enterprise',
-		description: 'Unlimited possibilities for large scale organizations.',
-		icon: 'lucide:building-2',
-	},
-]
-
-const features: ChoiceBoxOption[] = [
-	{
-		id: 'seo',
-		title: 'SEO Optimization',
-		description: 'Rank higher on search engines.',
-		icon: 'lucide:search',
-	},
-	{
-		id: 'analytics',
-		title: 'Advanced Analytics',
-		description: 'Know your audience better.',
-		icon: 'lucide:bar-chart',
-	},
-	{
-		id: 'security',
-		title: 'Enhanced Security',
-		description: 'Keep your data safe.',
-		icon: 'lucide:shield-check',
-	},
-	{
-		id: 'backup',
-		title: 'Daily Backups',
-		description: 'Never lose your data.',
-		icon: 'lucide:database',
-		disabled: true,
-	},
-]
-
-const selectedPlan = ref<string>('pro')
-const selectedFeatures = ref<string[]>(['seo', 'security'])
-const layoutVal = ref('grid')
-
-const handleChange = (label: string, val: any) => {
-	console.log(`[${label}] Changed:`, val)
-}
-</script>
-
-<template>
-	<div class="space-y-8 p-4 max-w-4xl mx-auto">
-		<div>
-			<h2 class="text-2xl font-bold mb-2">ChoiceBox Component</h2>
-			<p class="text-gray-500 mb-6">
-				A rich selection component for presenting options with titles,
-				descriptions, and icons.
-			</p>
-		</div>
-
-		<!-- 1. Single Select (Plans) -->
-		<section class="space-y-4">
-			<h3 class="text-lg font-semibold flex items-center gap-2">
-				<Icon
-					icon="lucide:check-circle"
-					class="text-primary" />
-				Single Selection (Radio Style)
-			</h3>
-			<div class="p-6 border rounded-xl bg-gray-50/50">
-				<ChoiceBox
-					v-model="selectedPlan"
-					:options="plans"
-					title="Choose your plan"
-					description="Select the plan that fits your needs best."
-					:grid="3"
-					@change="(v) => handleChange('Plan', v)" />
-				<div
-					class="mt-6 text-sm text-gray-600 bg-white p-3 rounded border">
-					Selected Plan ID: <strong>{{ selectedPlan }}</strong>
-				</div>
-			</div>
-		</section>
-
-		<!-- 2. Multi Select (Features) -->
-		<section class="space-y-4">
-			<h3 class="text-lg font-semibold flex items-center gap-2">
-				<Icon
-					icon="lucide:check-square"
-					class="text-primary" />
-				Multi Selection (Checkbox Style)
-			</h3>
-			<div class="p-6 border rounded-xl bg-gray-50/50">
-				<ChoiceBox
-					v-model="selectedFeatures"
-					:options="features"
-					multiple
-					title="Add-on Features"
-					description="Enhance your workspace with these powerful tools."
-					:grid="2"
-					@change="(v) => handleChange('Features', v)" />
-				<div
-					class="mt-6 text-sm text-gray-600 bg-white p-3 rounded border">
-					Selected Features: <strong>{{ selectedFeatures }}</strong>
-				</div>
-			</div>
-		</section>
-
-		<!-- 3. Layout Variations -->
-		<section class="space-y-4">
-			<h3 class="text-lg font-semibold flex items-center gap-2">
-				<Icon
-					icon="lucide:layout-grid"
-					class="text-primary" />
-				Layout Options
-			</h3>
-			<div class="p-6 border rounded-xl bg-gray-50/50 space-y-6">
-				<!-- Stacked list -->
-				<div>
-					<p class="text-sm font-medium mb-3">
-						Vertical List (Grid = 1)
-					</p>
-					<ChoiceBox
-						v-model="layoutVal"
-						:options="[
-							{
-								id: 'grid',
-								title: 'Grid Layout',
-								description: 'Items arranged in columns',
-								icon: 'lucide:layout-grid',
-							},
-							{
-								id: 'list',
-								title: 'List Layout',
-								description: 'Items stacked vertically',
-								icon: 'lucide:list',
-							},
-						]"
-						:grid="1" />
-				</div>
-			</div>
-		</section>
-	</div>
-</template>

package/src/playground/demos/ColorPickerDemo.vue

@@ -1,30 +0,0 @@
-<script setup lang="ts">
-import ColorPicker from '@/components/ColorPicker/ColorPicker.vue'
-import Label from '@/components/Label.vue'
-import { ref } from 'vue'
-
-const color = ref('#4f46e5')
-</script>
-
-<template>
-	<div class="space-y-10">
-		<div class="space-y-2">
-			<h2 class="text-2xl font-bold">ColorPicker</h2>
-			<p class="text-gray-500">
-				A component to pick colors conveniently.
-			</p>
-		</div>
-
-		<section class="space-y-4">
-			<h3 class="text-lg font-semibold">Usage</h3>
-			<div class="flex flex-col gap-2">
-				<Label>Accent Color</Label>
-				<ColorPicker v-model="color" />
-				<p class="text-sm text-gray-500 mt-2">
-					Selected:
-					<span class="font-mono text-gray-900">{{ color }}</span>
-				</p>
-			</div>
-		</section>
-	</div>
-</template>

package/src/playground/demos/ColorsDemo.vue

@@ -1,295 +0,0 @@
-<script setup lang="ts">
-import Icon from '@/components/Icon.vue'
-
-const semanticColors = [
-  {
-    title: 'Background',
-    colors: [
-      {
-        name: 'Background',
-        bg: 'bg-background',
-        text: 'text-foreground',
-        var: '--background',
-        textVar: '--foreground',
-      },
-      {
-        name: 'Card',
-        bg: 'bg-card',
-        text: 'text-card-foreground',
-        var: '--card',
-        textVar: '--card-foreground',
-      },
-      {
-        name: 'Card Muted',
-        bg: 'bg-card-muted',
-        text: 'text-card-foreground',
-        var: '--card-muted',
-        textVar: '--card-foreground',
-      },
-      {
-        name: 'Muted',
-        bg: 'bg-muted',
-        text: 'text-muted-foreground',
-        var: '--muted',
-        textVar: '--muted-foreground',
-      },
-    ],
-  },
-  {
-    title: 'Actions',
-    colors: [
-      {
-        name: 'Primary',
-        bg: 'bg-primary',
-        text: 'text-primary-foreground',
-        var: '--primary',
-        textVar: '--primary-foreground',
-      },
-      {
-        name: 'Secondary',
-        bg: 'bg-secondary',
-        text: 'text-secondary-foreground',
-        var: '--secondary',
-        textVar: '--secondary-foreground',
-      },
-      {
-        name: 'Accent',
-        bg: 'bg-accent',
-        text: 'text-accent-foreground',
-        var: '--accent',
-        textVar: '--accent-foreground',
-      },
-      {
-        name: 'Destructive',
-        bg: 'bg-destructive',
-        text: 'text-destructive-foreground',
-        var: '--destructive',
-        textVar: '--destructive-foreground',
-      },
-    ],
-  },
-  {
-    title: 'Status',
-    colors: [
-      {
-        name: 'Danger',
-        bg: 'bg-danger',
-        text: 'text-danger-fg',
-        var: '--color-danger',
-        textVar: '--color-danger-fg',
-      },
-      {
-        name: 'Warning',
-        bg: 'bg-warning',
-        text: 'text-warning-fg',
-        var: '--color-warning',
-        textVar: '--color-warning-fg',
-      },
-      {
-        name: 'Info',
-        bg: 'bg-info',
-        text: 'text-info-fg',
-        var: '--color-info',
-        textVar: '--color-info-fg',
-      },
-      {
-        name: 'Success',
-        bg: 'bg-success',
-        text: 'text-success-fg',
-        var: '--color-success',
-        textVar: '--color-success-fg',
-      },
-    ],
-  },
-]
-
-const variantColors = [
-  {
-    name: 'Primary',
-    variants: [
-      {
-        label: 'Light',
-        bg: 'bg-primary-light',
-        text: 'text-primary-fg-light',
-        var: '--color-primary-light',
-      },
-      { label: 'Main', bg: 'bg-primary', text: 'text-primary-fg', var: '--color-primary' },
-      {
-        label: 'Dark',
-        bg: 'bg-primary-dark',
-        text: 'text-primary-fg',
-        var: '--color-primary-dark',
-      },
-    ],
-  },
-  {
-    name: 'Danger',
-    variants: [
-      {
-        label: 'Light',
-        bg: 'bg-danger-light',
-        text: 'text-danger-fg-light',
-        var: '--color-danger-light',
-      },
-      { label: 'Main', bg: 'bg-danger', text: 'text-danger-fg', var: '--color-danger' },
-      { label: 'Dark', bg: 'bg-danger-dark', text: 'text-danger-fg', var: '--color-danger-dark' },
-    ],
-  },
-  {
-    name: 'Warning',
-    variants: [
-      {
-        label: 'Light',
-        bg: 'bg-warning-light',
-        text: 'text-warning-fg-light',
-        var: '--color-warning-light',
-      },
-      { label: 'Main', bg: 'bg-warning', text: 'text-warning-fg', var: '--color-warning' },
-      {
-        label: 'Dark',
-        bg: 'bg-warning-dark',
-        text: 'text-warning-fg',
-        var: '--color-warning-dark',
-      },
-    ],
-  },
-  {
-    name: 'Success',
-    variants: [
-      {
-        label: 'Light',
-        bg: 'bg-success-light',
-        text: 'text-success-fg-light',
-        var: '--color-success-light',
-      },
-      { label: 'Main', bg: 'bg-success', text: 'text-success-fg', var: '--color-success' },
-      {
-        label: 'Dark',
-        bg: 'bg-success-dark',
-        text: 'text-success-fg',
-        var: '--color-success-dark',
-      },
-    ],
-  },
-  {
-    name: 'Info',
-    variants: [
-      {
-        label: 'Light',
-        bg: 'bg-info-light',
-        text: 'text-info-fg-light',
-        var: '--color-info-light',
-      },
-      { label: 'Main', bg: 'bg-info', text: 'text-info-fg', var: '--color-info' },
-      { label: 'Dark', bg: 'bg-info-dark', text: 'text-info-fg', var: '--color-info-dark' },
-    ],
-  },
-]
-
-const grayShades = [
-  'bg-gray-50',
-  'bg-gray-100',
-  'bg-gray-150',
-  'bg-gray-200',
-  'bg-gray-250',
-  'bg-gray-300',
-  'bg-gray-400',
-  'bg-gray-500',
-  'bg-gray-600',
-  'bg-gray-700',
-  'bg-gray-800',
-  'bg-gray-900',
-  'bg-gray-950',
-  'bg-white',
-  'bg-black',
-]
-
-const borderColors = [
-  { name: 'border', var: '--border' },
-  { name: 'input', var: '--input' },
-]
-</script>
-
-<template>
-  <div class="max-w-7xl mx-auto p-6 space-y-14">
-    <!-- Semantic -->
-    <div v-for="group in semanticColors" :key="group.title" class="space-y-4">
-      <h2 class="text-lg font-semibold text-foreground">{{ group.title }}</h2>
-      <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-4">
-        <div
-          v-for="c in group.colors"
-          :key="c.name"
-          :class="[c.bg, 'rounded-lg p-4 h-24 flex flex-col justify-between border border-border']">
-          <div :class="[c.text, 'text-sm font-semibold']">{{ c.name }}</div>
-          <div :class="[c.text, 'text-[10px] font-mono opacity-70']">
-            {{ c.var }}
-          </div>
-        </div>
-      </div>
-    </div>
-
-    <!-- Variants -->
-    <div class="space-y-6">
-      <h2 class="text-lg font-semibold text-foreground">Variants</h2>
-      <div v-for="group in variantColors" :key="group.name" class="space-y-3">
-        <div class="text-sm font-medium text-muted-foreground">{{ group.name }}</div>
-        <div class="grid grid-cols-3 gap-4">
-          <div
-            v-for="v in group.variants"
-            :key="v.label"
-            :class="[v.bg, 'rounded-lg h-20 p-3 flex flex-col justify-between']">
-            <span :class="[v.text, 'text-xs font-semibold']">{{ v.label }}</span>
-            <span :class="[v.text, 'text-[10px] font-mono opacity-70']">{{ v.var }}</span>
-          </div>
-        </div>
-      </div>
-    </div>
-
-    <!-- Grays -->
-    <div class="space-y-4">
-      <h2 class="text-lg font-semibold text-foreground">Grays</h2>
-      <div class="grid grid-cols-6 md:grid-cols-11 gap-3">
-        <div v-for="g in grayShades" :key="g" class="space-y-1 text-center">
-          <div :class="`${g}`" class="h-16 rounded-md border border-border"></div>
-          <code class="text-[10px] font-mono text-muted-foreground">{{ g }}</code>
-        </div>
-      </div>
-    </div>
-
-    <!-- Borders -->
-    <div class="space-y-4">
-      <h2 class="text-lg font-semibold text-foreground">Borders</h2>
-      <div class="grid grid-cols-3 gap-4">
-        <div
-          v-for="b in borderColors"
-          :key="b.name"
-          class="rounded-lg p-4 bg-card border border-border space-y-2">
-          <div :class="`border-4 border-${b.name}`" class="h-10 rounded-md bg-background"></div>
-          <code class="text-[10px] font-mono text-muted-foreground">{{ b.var }}</code>
-        </div>
-      </div>
-    </div>
-
-    <!-- Minimal UI Proof -->
-    <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
-      <button class="bg-primary text-primary-foreground rounded-lg py-3 font-semibold">
-        Primary
-      </button>
-
-      <div class="bg-danger-light text-danger-fg-light rounded-lg p-3 flex items-center gap-2">
-        <Icon icon="lucide:alert-circle" class="w-4 h-4" />
-        Error
-      </div>
-
-      <div class="bg-success text-success-fg rounded-lg p-3 flex items-center gap-2">
-        <Icon icon="lucide:check-circle" class="w-4 h-4" />
-        Success
-      </div>
-
-      <div class="bg-info-light text-info-fg-light rounded-lg p-3 flex items-center gap-2">
-        <Icon icon="lucide:info" class="w-4 h-4" />
-        Info
-      </div>
-    </div>
-  </div>
-</template>

package/src/playground/demos/DataTableDemo.vue

@@ -1,215 +0,0 @@
-<script setup lang="ts">
-import { ref, computed, watch } from 'vue'
-import { DataTable } from '@/components/DataTable'
-import Input from '@/components/Input.vue'
-import Button from '@/components/Button.vue'
-import Badge from '@/components/Badge.vue'
-import Avatar from '@/components/Avatar.vue'
-import type {
-	TableHeader,
-	TableFilter,
-	PageInfo,
-	PaginationConfig,
-	SortConfig,
-	SelectionState,
-	TableState,
-} from '@/components/DataTable/types'
-import { useGetUsers, type User } from '../composables/useGetUsers'
-
-const searchQuery = ref('')
-// selectedCount definition removed (ref defined later)
-
-const { result, loading, refetch } = useGetUsers()
-
-const users = computed<User[]>(() => result.value?.users || [])
-const pageInfo = computed<PageInfo | undefined>(() => result.value?.pageInfo)
-
-const columns = ref<TableHeader[]>([
-	{
-		field: 'name',
-		title: 'User',
-		sortable: true,
-	},
-	{
-		field: 'email',
-		title: 'Email',
-		width: '20%',
-		sortable: true,
-		hideOnMobile: true,
-	},
-	{
-		field: 'role',
-		title: 'Role',
-		width: '12%',
-		sortable: true,
-		capitalize: true,
-	},
-	{
-		field: 'department',
-		title: 'Department',
-		width: '15%',
-		sortable: true,
-		hideOnMobile: true,
-	},
-	{
-		field: 'status',
-		title: 'Status',
-		width: '10%',
-		sortable: true,
-		capitalize: true,
-		addStatusColor: true,
-	},
-	{
-		field: 'action',
-		title: 'Actions',
-		width: '8%',
-		sortable: false,
-		align: 'center',
-	},
-])
-
-// Initial state
-const currentTableState = ref<TableState>({
-	pagination: {
-		page: 1,
-		limit: 10,
-	},
-	sorting: {
-		field: '',
-		order: '',
-	},
-	search: '',
-})
-
-const handleTableChange = async (state: TableState) => {
-	console.log('handleTableChange', state)
-	currentTableState.value = state
-	await refreshData()
-}
-
-const refreshData = async () => {
-	const filter: TableFilter = {
-		pagination: currentTableState.value.pagination,
-		filter: {
-			search: currentTableState.value.search,
-			sorting: currentTableState.value.sorting,
-		},
-	}
-	console.log('Fetching data with:', filter)
-	await refetch(filter)
-}
-
-const handleEdit = (user: User) => {
-	console.log('Edit user:', user)
-	alert(`Edit user: ${user.name}`)
-}
-
-const handleView = (user: User) => {
-	console.log('View user:', user)
-	alert(`View user: ${user.name}`)
-}
-
-const getStatusVariant = (status: string) => {
-	const map: Record<string, 'success' | 'secondary' | 'warning'> = {
-		active: 'success',
-		inactive: 'secondary',
-		pending: 'warning',
-	}
-	return map[status] || 'secondary'
-}
-
-const handleAddUser = () => {
-	alert('Add User Clicked')
-}
-
-const handleDelete = (rows: User[]) => {
-	console.log('Delete rows:', rows)
-	alert(
-		`Deleting ${rows.length} users:\n` + rows.map((u) => u.name).join(', '),
-	)
-}
-</script>
-
-<template>
-	<div class="space-y-8">
-		<!-- Header -->
-		<div class="space-y-2">
-			<h1 class="text-2xl font-bold">DataTable</h1>
-			<p class="text-muted-foreground">
-				Refactored DataTable with external controls (Search, Actions)
-				and built-in pagination.
-			</p>
-		</div>
-
-		<!-- Main Demo -->
-		<section class="space-y-4">
-			<h2 class="text-lg font-semibold">User Management</h2>
-
-			<DataTable
-				:rows="users"
-				:headers="columns"
-				:page-info="pageInfo"
-				:loading="loading"
-				:search="searchQuery"
-				:items-per-page-options="[10, 25, 50, 100]"
-				key-field="_id"
-				selectable
-				hoverable
-				bordered
-				@change="handleTableChange"
-				@delete="handleDelete">
-				<template #toolbar-right>
-					<div class="">
-						<Button
-							variant="primary"
-							icon="lucide:plus"
-							@click="handleAddUser"
-							>Add User</Button
-						>
-					</div>
-				</template>
-				<!-- Custom User Cell with Avatar -->
-				<template #name="{ value }">
-					<div class="flex items-center gap-3">
-						<Avatar
-							:src="value.avatar"
-							:alt="value.name"
-							size="sm" />
-						<div class="min-w-0">
-							<p class="font-medium text-foreground truncate">
-								{{ value.name }}
-							</p>
-							<p
-								class="text-xs text-muted-foreground truncate md:hidden">
-								{{ value.email }}
-							</p>
-						</div>
-					</div>
-				</template>
-
-				<!-- Status Badge -->
-				<template #status="{ value }">
-					<Badge :variant="getStatusVariant(value.status)">
-						{{ value.status }}
-					</Badge>
-				</template>
-
-				<!-- Actions Column -->
-				<template #action="{ value }">
-					<div class="flex items-center justify-center gap-1">
-						<Button
-							variant="ghost"
-							size="xs"
-							icon="lucide:eye"
-							@click.stop="handleView(value)" />
-						<Button
-							variant="ghost"
-							size="xs"
-							icon="lucide:pencil"
-							@click.stop="handleEdit(value)" />
-					</div>
-				</template>
-			</DataTable>
-		</section>
-	</div>
-</template>