vlite3 0.1.0 → 0.1.2

package/src/playground/demos/OverlaysDemo.vue

@@ -1,104 +0,0 @@
-<script setup lang="ts">
-import { ref } from 'vue'
-import Button from '@/components/Button.vue'
-import { Dropdown } from '@/components/Dropdown'
-import Modal from '@/components/Modal.vue'
-import ConfirmationModal from '@/components/ConfirmationModal.vue'
-import Tooltip from '@/components/Tooltip.vue'
-import SidePanel from '@/components/SidePanel.vue'
-import Input from '@/components/Input.vue'
-import Avatar from '@/components/Avatar.vue'
-
-const dropdownValue = ref('1')
-const showModal = ref(false)
-const showConfirm = ref(false)
-const showSidePanel = ref(false)
-</script>
-
-<template>
-  <section class="space-y-6">
-    <div class="space-y-2">
-      <h2 class="text-xl font-semibold tracking-tight">Overlays & Popups</h2>
-      <p class="text-sm text-gray-500">
-        Components that appear on top of other content.
-      </p>
-    </div>
-
-    <div class="flex flex-wrap gap-4 items-center">
-      <!-- Dropdown -->
-      <Dropdown
-        @on-select="(props) => { dropdownValue = props?.value }"
-        :options="[
-          { value: '1', label: 'Profile', icon: 'lucide:user' },
-          { value: '2', label: 'Billing', icon: 'lucide:credit-card' },
-          { value: '3', label: 'Settings', icon: 'lucide:settings' },
-          { value: '4', label: 'Logout', icon: 'lucide:log-out', disabled: true },
-        ]"
-        :selected="dropdownValue"
-      >
-        <template #trigger>
-          <Button variant="outline" icon-right="lucide:chevron-down">Options Menu</Button>
-        </template>
-      </Dropdown>
-
-      <!-- Tooltip -->
-      <Tooltip content="Tooltip content helps users">
-        <Button variant="secondary">Hover for Tooltip</Button>
-      </Tooltip>
-
-      <!-- Modal Trigger -->
-      <Button @click="showModal = true">Standard Modal</Button>
-      
-      <!-- Confirmation Trigger -->
-      <Button variant="danger" @click="showConfirm = true">Delete Action</Button>
-
-      <!-- SidePanel Trigger -->
-      <Button variant="primary" @click="showSidePanel = true">Open Side Panel</Button>
-    </div>
-
-    <!-- Modals (Hidden by default) -->
-    <Modal v-model:show="showModal" title="Edit Profile" description="Make changes to your profile here.">
-       <div class="space-y-4 py-2">
-          <Input label="Name" placeholder="John Doe" />
-          <Input label="Email" placeholder="john@example.com" />
-       </div>
-       <template #footer="{ close }">
-          <div class="flex justify-end gap-2 w-full">
-             <Button variant="outline" @click="close">Cancel</Button>
-             <Button @click="close">Save Changes</Button>
-          </div>
-       </template>
-    </Modal>
-
-    <ConfirmationModal
-       v-model:show="showConfirm"
-       title="Delete Item?"
-       description="This action cannot be undone. Are you sure you want to proceed?"
-       confirm-text="Yes, Delete"
-       @confirm="showConfirm = false"
-       @cancel="showConfirm = false"
-    />
-
-    <SidePanel
-       v-model:show="showSidePanel"
-       title="Notifications"
-       description="Manage your notification preferences."
-       position="right"
-    >
-       <div class="space-y-4">
-          <div class="bg-gray-50 p-4 rounded-lg flex items-start gap-3">
-             <Avatar size="sm" fallback="Sys" />
-             <div>
-                <p class="text-sm font-medium">System Update</p>
-                <p class="text-xs text-gray-500">Your system was updated successfully.</p>
-             </div>
-          </div>
-          <Input label="Quick Note" type="textarea" :rows="3" placeholder="Add a note..." />
-       </div>
-       <template #footer="{ close }">
-          <Button class="w-full" @click="close">Done</Button>
-       </template>
-    </SidePanel>
-
-  </section>
-</template>

package/src/playground/demos/PaginationDemo.vue

@@ -1,130 +0,0 @@
-<script setup lang="ts">
-import { ref } from 'vue'
-import { Pagination } from '@/components/Pagination'
-import Icon from '@/components/Icon.vue'
-
-const page1 = ref(1)
-const page2 = ref(5)
-const page3 = ref(1)
-const page4 = ref(1)
-const page5 = ref(1)
-
-// Full Featured state
-const itemsPerPage = ref(10)
-const totalItems = 100 // Hypothetical total
-// const totalPages is derived in real apps, but here we just mock it or calculate
-// totalPages = Math.ceil(totalItems / itemsPerPage.value)
-
-const handleChange = (label: string, val: number) => {
-	console.log(`[${label}] Page changed to:`, val)
-}
-
-const handlePerPageChange = (val: number) => {
-	console.log('[Full Featured] Items per page changed to:', val)
-	// In real app, you'd fetch new data and update total pages if needed
-}
-</script>
-
-<template>
-	<div class="space-y-8 p-4 max-w-4xl mx-auto">
-		<div>
-			<h2 class="text-2xl font-bold mb-2">Pagination Component</h2>
-			<p class="text-gray-500 mb-6">
-				Navigate through large lists of data with ease. Now with page
-				info, items per page selector, and configurable navigation
-				styles.
-			</p>
-		</div>
-
-		<!-- 1. Full Featured -->
-		<section class="space-y-4">
-			<h3 class="text-lg font-semibold flex items-center gap-2">
-				<Icon
-					icon="lucide:star"
-					class="text-primary" />
-				Full Featured
-			</h3>
-			<div
-				class="p-6 border rounded-xl bg-gray-50/50 flex flex-col items-center gap-4">
-				<Pagination
-					v-model:current-page="page5"
-					v-model:items-per-page="itemsPerPage"
-					:total-pages="10"
-					show-items-per-page
-					show-edges
-					@change="(v) => handleChange('Full', v)"
-					@change:items-per-page="handlePerPageChange" />
-			</div>
-		</section>
-
-		<!-- 2. Icon Navigation -->
-		<section class="space-y-4">
-			<h3 class="text-lg font-semibold flex items-center gap-2">
-				<Icon
-					icon="lucide:arrow-right-circle"
-					class="text-primary" />
-				Icon Only Navigation
-			</h3>
-			<div
-				class="p-6 border rounded-xl bg-gray-50/50 flex flex-col items-center gap-4">
-				<Pagination
-					v-model:current-page="page1"
-					:total-pages="5"
-					nav-type="icon"
-					@change="(v) => handleChange('Icon Only', v)" />
-			</div>
-		</section>
-
-		<!-- 3. Smart Truncation -->
-		<section class="space-y-4">
-			<h3 class="text-lg font-semibold flex items-center gap-2">
-				<Icon
-					icon="lucide:more-horizontal"
-					class="text-primary" />
-				Smart Truncation
-			</h3>
-			<div
-				class="p-6 border rounded-xl bg-gray-50/50 flex flex-col items-center gap-4">
-				<Pagination
-					v-model:current-page="page2"
-					:total-pages="20"
-					@change="(v) => handleChange('Truncation', v)" />
-			</div>
-		</section>
-
-		<!-- 4. With Edges (First/Last) -->
-		<section class="space-y-4">
-			<h3 class="text-lg font-semibold flex items-center gap-2">
-				<Icon
-					icon="lucide:chevrons-left-right"
-					class="text-primary" />
-				With First/Last Buttons
-			</h3>
-			<div
-				class="p-6 border rounded-xl bg-gray-50/50 flex flex-col items-center gap-4">
-				<Pagination
-					v-model:current-page="page3"
-					:total-pages="15"
-					show-edges
-					@change="(v) => handleChange('Edges', v)" />
-			</div>
-		</section>
-
-		<!-- 5. Disabled -->
-		<section class="space-y-4">
-			<h3 class="text-lg font-semibold flex items-center gap-2">
-				<Icon
-					icon="lucide:ban"
-					class="text-primary" />
-				Disabled State
-			</h3>
-			<div
-				class="p-6 border rounded-xl bg-gray-50/50 flex flex-col items-center gap-4">
-				<Pagination
-					v-model:current-page="page4"
-					:total-pages="10"
-					disabled />
-			</div>
-		</section>
-	</div>
-</template>

package/src/playground/demos/PricingPlanDemo.vue

@@ -1,110 +0,0 @@
-<script setup lang="ts">
-import { ref } from 'vue'
-import { PricingPlan } from '@/components/PricingPlan'
-import type { PricingPlanItemSchema } from '@/components/PricingPlan/types'
-
-const selectedPlan = ref<string | number>('pro')
-const selectedEnterprise = ref<string | number>('ent-2')
-
-const plans: PricingPlanItemSchema[] = [
-  {
-    id: 'basic',
-    title: 'Basic',
-    price: '$0',
-    period: '/month',
-    description: 'Perfect for getting started.',
-    buttonText: 'Start for Free',
-    features: [
-      '5 Projects',
-      'Basic Analytics',
-      { text: 'Custom Domain', included: false },
-      { text: 'Priority Support', included: false },
-    ]
-  },
-  {
-    id: 'pro',
-    title: 'Pro',
-    price: '$29',
-    period: '/month',
-    description: 'Best for growing teams.',
-    popular: true,
-    buttonText: 'Get Started',
-    features: [
-      'Unlimited Projects',
-      'Advanced Analytics',
-      'Custom Domain',
-      { text: 'Priority Support', included: false },
-    ]
-  },
-  {
-    id: 'enterprise',
-    title: 'Enterprise',
-    price: '$99',
-    period: '/month',
-    description: 'For large scale organizations.',
-    buttonText: 'Contact Sales',
-    features: [
-      'Unlimited Projects',
-      'Advanced Analytics',
-      'Custom Domain',
-      'Priority Support',
-    ]
-  }
-]
-
-const enterprisePlans: PricingPlanItemSchema[] = [
-    {
-        id: 'ent-1',
-        title: 'Startup',
-        price: '$499',
-        features: ['All Pro Features', 'Dedicated Support']
-    },
-    {
-        id: 'ent-2',
-        title: 'Scale',
-        price: '$999',
-        recommended: true,
-        variant: 'solid',
-        features: ['All Startup Features', 'SLA', 'Account Manager']
-    }
-]
-
-</script>
-
-<template>
-  <div class="space-y-12 p-10">
-    
-    <!-- Outline Variant (Default) -->
-    <section>
-        <h2 class="text-2xl font-bold mb-6">Pricing Plans (Outline)</h2>
-        <div class="bg-background p-6 rounded-xl border">
-            <PricingPlan 
-                v-model="selectedPlan" 
-                :items="plans" 
-                variant="outline"
-            />
-            
-            <div class="mt-4 p-4 bg-muted rounded">
-                Selected Plan ID: <strong>{{ selectedPlan }}</strong>
-            </div>
-        </div>
-    </section>
-
-    <!-- Solid Variant -->
-    <section>
-        <h2 class="text-2xl font-bold mb-6">Pricing Plans (Solid & Custom Grid)</h2>
-        <div class="bg-background p-6 rounded-xl border">
-            <PricingPlan 
-                v-model="selectedEnterprise" 
-                :items="enterprisePlans" 
-                variant="solid" 
-                :columns="2"
-            />
-             <div class="mt-4 p-4 bg-muted rounded">
-                Selected Enterprise ID: <strong>{{ selectedEnterprise }}</strong>
-            </div>
-        </div>
-    </section>
-
-  </div>
-</template>

package/src/playground/demos/SidePanelDemo.vue

@@ -1,45 +0,0 @@
-<script setup lang="ts">
-import SidePanel from '@/components/SidePanel.vue'
-import Button from '@/components/Button.vue'
-import { ref } from 'vue'
-
-const showRight = ref(false)
-const showLeft = ref(false)
-const showLg = ref(false)
-</script>
-
-<template>
-  <div class="space-y-10">
-    <div class="space-y-2">
-      <h2 class="text-2xl font-bold">SidePanel</h2>
-      <p class="text-gray-500">A panel that slides in from the edge of the screen.</p>
-    </div>
-
-    <section class="space-y-4">
-      <h3 class="text-lg font-semibold">Positions</h3>
-      <div class="flex gap-4">
-        <Button @click="showRight = true">Right (Default)</Button>
-        <Button @click="showLeft = true" variant="outline">Left</Button>
-      </div>
-
-       <SidePanel v-model:show="showRight" title="Right Panel" position="right">
-          <p class="text-gray-600">Content goes here...</p>
-       </SidePanel>
-
-       <SidePanel v-model:show="showLeft" title="Left Panel" position="left">
-          <p class="text-gray-600">Content goes here...</p>
-       </SidePanel>
-    </section>
-
-    <section class="space-y-4">
-      <h3 class="text-lg font-semibold">Sizes</h3>
-      <Button @click="showLg = true">Large Panel</Button>
-      
-      <SidePanel v-model:show="showLg" title="Large Panel" size="lg">
-         <div class="space-y-4">
-            <p v-for="i in 5" :key="i">Some substantial content requiring more width...</p>
-         </div>
-      </SidePanel>
-    </section>
-  </div>
-</template>

package/src/playground/demos/SidebarMenuDemo.vue

@@ -1,170 +0,0 @@
-<script setup lang="ts">
-import { ref } from 'vue'
-import { SidebarMenu } from '@/components/SidebarMenu'
-import { SidebarMenuItemSchema } from '@/components/SidebarMenu/types'
-import Button from '@/components/Button.vue'
-import CheckBox from '@/components/CheckBox.vue'
-
-// Demo Configuration
-const allowMultiple = ref(true)
-const variant = ref<'default' | 'ghost'>('default')
-const renderMode = ref<'tree' | 'popover'>('tree')
-
-const toggleVariant = () => {
-	variant.value = variant.value === 'default' ? 'ghost' : 'default'
-}
-const toggleMode = () => {
-	renderMode.value = renderMode.value === 'tree' ? 'popover' : 'tree'
-}
-
-// Mock Items
-const menuItems: SidebarMenuItemSchema[] = [
-	{
-		label: 'Dashboard',
-		icon: 'lucide:layout-dashboard',
-		to: '/dashboard',
-		badge: 'New',
-		badgeClass: 'bg-primary/10 text-primary',
-	},
-	{
-		label: 'Analytics',
-		icon: 'lucide:bar-chart-3',
-		// Example of mixed mode: Force dropdown on this specific item if needed?
-		renderMode: 'popover',
-		children: [
-			{ label: 'Overview', to: '/analytics/overview' },
-			{ label: 'Performance', to: '/analytics/performance' },
-			{
-				label: 'Real-time',
-				to: '/analytics/realtime',
-				badge: 'Live',
-				badgeClass: 'bg-green-100 text-green-700',
-			},
-		],
-	},
-	{
-		label: 'Projects',
-		icon: 'lucide:folder',
-		children: [
-			{
-				label: 'Active Projects',
-				children: [
-					{ label: 'Website Redesign', to: '/projects/website' },
-					{ label: 'Mobile App', to: '/projects/app' },
-				],
-			},
-			{ label: 'Archived', to: '/projects/archived', disabled: true },
-		],
-	},
-	{
-		label: 'Team',
-		icon: 'lucide:users',
-		children: [
-			{ label: 'Members', to: '/team/members' },
-			{ label: 'Permissions', to: '/team/permissions' },
-		],
-	},
-	{
-		label: 'Documents',
-		icon: 'lucide:file-text',
-		// Example of simple action instead of route
-		action: () => alert('Documents clicked!'),
-	},
-	{
-		label: 'Settings',
-		icon: 'lucide:settings',
-		children: [
-			{ label: 'Account', to: '/settings/account' },
-			{ label: 'Billing', to: '/settings/billing' },
-			{ label: 'Notifications', to: '/settings/notifications' },
-		],
-	},
-]
-</script>
-
-<template>
-	<div class="space-y-6">
-		<div class="flex items-center justify-between border-b pb-4">
-			<div>
-				<h2 class="text-2xl font-bold tracking-tight">Sidebar Menu</h2>
-				<p class="text-gray-500">
-					A recursive, accessible navigation menu with smooth
-					animations.
-				</p>
-			</div>
-			<div class="flex items-center gap-4">
-				<CheckBox
-					v-model="allowMultiple"
-					label="Allow Multiple Expanded" />
-				<Button
-					size="sm"
-					variant="outline"
-					@click="toggleMode">
-					Mode: {{ renderMode }}
-				</Button>
-				<Button
-					size="sm"
-					variant="outline"
-					@click="toggleVariant">
-					Variant: {{ variant }}
-				</Button>
-			</div>
-		</div>
-
-		<!-- Layout Simulation -->
-		<div
-			class="flex h-[600px] border rounded-xl overflow-hidden bg-white shadow-sm">
-			<!-- Sidebar -->
-			<div class="w-64 border-r bg-gray-50/50 flex flex-col">
-				<div
-					class="p-4 border-b h-16 flex items-center font-bold text-lg px-6">
-					Acme Inc.
-				</div>
-
-				<div class="flex-1 overflow-y-auto p-3">
-					<SidebarMenu
-						:items="menuItems"
-						:allow-multiple="allowMultiple"
-						:variant="variant"
-						:render-mode="renderMode" />
-				</div>
-
-				<div class="p-4 border-t bg-gray-50">
-					<div class="flex items-center gap-3">
-						<div
-							class="h-8 w-8 rounded-full bg-primary/20 flex items-center justify-center text-primary font-bold">
-							U
-						</div>
-						<div class="text-sm">
-							<div class="font-medium">User Name</div>
-							<div class="text-gray-500 text-xs">
-								user@example.com
-							</div>
-						</div>
-					</div>
-				</div>
-			</div>
-
-			<!-- Main Content -->
-			<div class="flex-1 flex flex-col bg-white">
-				<div
-					class="h-16 border-b flex items-center px-6 text-gray-400 text-sm">
-					Header
-				</div>
-				<div
-					class="flex-1 p-8 flex items-center justify-center text-gray-400 bg-gray-50/20">
-					<div class="text-center space-y-2">
-						<div class="text-4xl">👋</div>
-						<p>
-							Select an item from the sidebar to see active
-							states.
-						</p>
-						<p class="text-xs text-gray-400">
-							(Routing is simulated in this demo)
-						</p>
-					</div>
-				</div>
-			</div>
-		</div>
-	</div>
-</template>

package/src/playground/demos/SliderDemo.vue

@@ -1,48 +0,0 @@
-<script setup lang="ts">
-import Slider from '@/components/Slider.vue'
-import { ref } from 'vue'
-
-const val1 = ref(50)
-const val2 = ref(75)
-const val3 = ref(0)
-</script>
-
-<template>
-  <div class="space-y-10">
-    <div class="space-y-2">
-      <h2 class="text-2xl font-bold">Slider</h2>
-      <p class="text-gray-500">An input where the user selects a value from within a given range.</p>
-    </div>
-
-    <section class="space-y-8 max-w-xl">
-      <h3 class="text-lg font-semibold">Examples</h3>
-      
-      <Slider 
-        label="Standard (0-100)" 
-        v-model="val1" 
-      />
-      
-      <Slider 
-        label="Range (50-200)" 
-        :min="50" 
-        :max="200" 
-        v-model="val2" 
-        icon="lucide:maximize"
-      />
-
-      <Slider 
-        label="Bipolar / Balance (-50 to 50)" 
-        :min="-50" 
-        :max="50" 
-        v-model="val3" 
-        icon="lucide:scale"
-      />
-
-      <Slider 
-        label="Disabled" 
-        :model-value="30" 
-        disabled 
-      />
-    </section>
-  </div>
-</template>

package/src/playground/demos/SwitchDemo.vue

@@ -1,40 +0,0 @@
-<script setup lang="ts">
-import Switch from '@/components/Switch.vue'
-import Label from '@/components/Label.vue'
-import { ref } from 'vue'
-
-const active = ref(false)
-const active2 = ref(true)
-</script>
-
-<template>
-  <div class="space-y-10">
-    <div class="space-y-2">
-      <h2 class="text-2xl font-bold">Switch</h2>
-      <p class="text-gray-500">A control that allows the user to toggle between two states.</p>
-    </div>
-
-    <section class="space-y-4">
-      <h3 class="text-lg font-semibold">Basic Usage</h3>
-      <div class="flex items-center justify-between max-w-sm p-4 border rounded-lg">
-         <Label>Airplane Mode</Label>
-         <Switch v-model="active" />
-      </div>
-       <p class="text-xs text-gray-400">Value: {{ active }}</p>
-    </section>
-
-    <section class="space-y-4">
-      <h3 class="text-lg font-semibold">States</h3>
-      <div class="grid gap-4 max-w-sm">
-        <div class="flex items-center justify-between p-4 border rounded-lg bg-gray-50">
-           <Label class="text-gray-400">Disabled Off</Label>
-           <Switch :model-value="false" disabled />
-        </div>
-        <div class="flex items-center justify-between p-4 border rounded-lg bg-gray-50">
-           <Label class="text-gray-400">Disabled On</Label>
-           <Switch :model-value="true" disabled />
-        </div>
-      </div>
-    </section>
-  </div>
-</template>