vlite3 0.1.0 → 0.1.2

package/src/playground/demos/DatePickerDemo.vue

@@ -1,43 +0,0 @@
-<script setup lang="ts">
-import DatePicker from '@/components/DatePicker.vue'
-import { ref } from 'vue'
-
-const date = ref<Date | null>(new Date())
-const emptyDate = ref<Date | null>(null)
-</script>
-
-<template>
-	<div class="space-y-10">
-		<div class="space-y-2">
-			<h2 class="text-2xl font-bold">DatePicker</h2>
-			<p class="text-gray-500">A component for selecting a date.</p>
-		</div>
-
-		<section class="space-y-8 max-w-sm">
-			<!-- <div class="space-y-2">
-				<h3 class="text-lg font-semibold">Basic</h3>
-				<DatePicker
-					v-model="date"
-					mode="date" />
-				<p class="text-xs text-gray-500">Value: {{ date }}</p>
-			</div>
-
-			<div class="space-y-2">
-				<h3 class="text-lg font-semibold">Empty State</h3>
-				<DatePicker
-					v-model="emptyDate"
-					mode="date"
-					placeholder="Choose a date" />
-			</div> -->
-
-			<!-- DateTime Mode -->
-			<div class="space-y-2">
-				<h3 class="text-lg font-semibold">DateTime Mode</h3>
-				<DatePicker
-					v-model="date"
-					mode="dateTime" />
-				<p class="text-xs text-gray-500">Value: {{ date }}</p>
-			</div>
-		</section>
-	</div>
-</template>

package/src/playground/demos/DisplayDemo.vue

@@ -1,101 +0,0 @@
-<script setup lang="ts">
-import { ref } from 'vue'
-import Avatar from '@/components/Avatar.vue'
-import Alert from '@/components/Alert.vue'
-import Accordion from '@/components/Accordion/Accordion.vue'
-import AccordionItem from '@/components/Accordion/AccordionItem.vue'
-import AccordionTrigger from '@/components/Accordion/AccordionTrigger.vue'
-import AccordionContent from '@/components/Accordion/AccordionContent.vue'
-import Timeline from '@/components/Timeline.vue'
-import { TimelineStep } from '@/types'
-import Button from '@/components/Button.vue'
-
-const activeStep = ref(1)
-const timelineSteps = ref<TimelineStep[]>([
-  { id: 1, title: 'Drafting', icon: 'lucide:pen-tool' },
-  { id: 2, title: 'Review', icon: 'lucide:eye' },
-  { id: 3, title: 'Approved', icon: 'lucide:check-circle' },
-  { id: 4, title: 'Published', icon: 'lucide:send' },
-])
-</script>
-
-<template>
-  <section class="space-y-12">
-    <div class="space-y-2">
-      <h2 class="text-xl font-semibold tracking-tight">Data Display</h2>
-      <p class="text-sm text-gray-500">
-        Components for displaying diverse types of data and states.
-      </p>
-    </div>
-
-    <div class="grid gap-x-8 gap-y-12 xl:grid-cols-2">
-       
-       <!-- Avatars -->
-       <div class="space-y-6">
-          <h3 class="text-sm font-medium text-gray-500 uppercase tracking-wider">Avatars</h3>
-          <div class="flex items-end gap-3 flex-wrap">
-             <Avatar size="xs" src="https://i.pravatar.cc/150?u=1" />
-             <Avatar size="sm" src="https://i.pravatar.cc/150?u=2" />
-             <Avatar size="md" src="https://i.pravatar.cc/150?u=3" />
-             <Avatar size="lg" src="https://i.pravatar.cc/150?u=4" />
-             <Avatar size="xl" src="https://i.pravatar.cc/150?u=5" />
-             <Avatar size="2xl" src="https://i.pravatar.cc/150?u=6" />
-          </div>
-          <div class="flex gap-4">
-             <Avatar rounded="none" fallback="Sq" />
-             <Avatar rounded="md" fallback="Md" />
-             <Avatar rounded="full" fallback="Fu" />
-          </div>
-       </div>
-
-       <!-- Alerts -->
-       <div class="space-y-6">
-          <h3 class="text-sm font-medium text-gray-500 uppercase tracking-wider">Alerts</h3>
-          <div class="space-y-3">
-             <Alert title="Information" description="New features are available." icon="lucide:info" variant="primary" />
-             <Alert title="Success" description="Changes saved successfully." icon="lucide:check" variant="success" />
-             <Alert title="Warning" description="Your account is pending verification." icon="lucide:alert-triangle" variant="warning" />
-             <Alert title="Error" description="Unable to connect to server." icon="lucide:alert-octagon" variant="danger" />
-          </div>
-       </div>
-    </div>
-
-    <!-- Accordion -->
-    <!-- Accordion Demo (Disabled due to API mismatch in old demo) -->
-    <!-- 
-    <div class="space-y-6">
-        <h3 class="text-sm font-medium text-gray-500 uppercase tracking-wider">Accordion</h3>
-        <Accordion type="single" collapsible class="w-full border rounded-lg divide-y">
-            <AccordionItem value="item-1" class="px-4 border-none">
-              <AccordionTrigger>What is Builto?</AccordionTrigger>
-              <AccordionContent>Builto is a modern Vue 3 component library designed for speed and flexibility.</AccordionContent>
-            </AccordionItem>
-            <AccordionItem value="item-2" class="px-4 border-none">
-              <AccordionTrigger>Is it accessible?</AccordionTrigger>
-              <AccordionContent>Yes, it follows WAI-ARIA patterns for maximum accessibility.</AccordionContent>
-            </AccordionItem>
-            <AccordionItem value="item-3" class="px-4 border-none">
-              <AccordionTrigger>Can I customize it?</AccordionTrigger>
-              <AccordionContent>Absolutely! It's built with Tailwind CSS, making customization trivial.</AccordionContent>
-            </AccordionItem>
-        </Accordion>
-    </div>
-    -->
-
-    <!-- Timeline -->
-    <div class="space-y-6">
-        <div class="flex items-center justify-between">
-            <h3 class="text-sm font-medium text-gray-500 uppercase tracking-wider">Timeline</h3>
-            <div class="flex gap-2">
-                <Button size="sm" variant="outline" :disabled="activeStep === 0" @click="activeStep--">Prev</Button>
-                <Button size="sm" variant="outline" :disabled="activeStep === timelineSteps.length" @click="activeStep++">Next</Button>
-            </div>
-        </div>
-        
-        <div class="p-6 border border-border rounded-lg bg-gray-50/30">
-           <Timeline :steps="timelineSteps" :active-step="activeStep" />
-        </div>
-    </div>
-
-  </section>
-</template>