restrucuture and add readme
This commit is contained in:
khairulhaaziq
parent
c297f5a24e
commit
0c7d567f5c
23
README.md
23
README.md
|
|
@ -3,8 +3,29 @@
|
||||||
Vue port of shadcn-ui.
|
Vue port of shadcn-ui.
|
||||||
This project is in active development by [radix vue](github.com/radix-vue/radix-vue) team. We are working on this while porting radix to vue, simultaneously.
|
This project is in active development by [radix vue](github.com/radix-vue/radix-vue) team. We are working on this while porting radix to vue, simultaneously.
|
||||||
|
|
||||||
|
## Installation
|
||||||
|
|
||||||
|
Coming soon
|
||||||
|
|
||||||
|
|
||||||
|
## Usage
|
||||||
|
Examples can see at [App.vue](./packages/shadcn-vue/src/App.vue)
|
||||||
|
|
||||||
|
## Contributors
|
||||||
|
|
||||||
We welcome contributors to both [radix vue](github.com/radix-vue/radix-vue) and [shadcn vue](github.com/radix-vue/shadcn-vue). We are actively looking someone that can lead the shadcn vue project based on radix-vue. Please [join our discord](https://discord.gg/dpf7BZY3) and we will get you up and running with the project, lets build them together!
|
We welcome contributors to both [radix vue](github.com/radix-vue/radix-vue) and [shadcn vue](github.com/radix-vue/shadcn-vue). We are actively looking someone that can lead the shadcn vue project based on radix-vue. Please [join our discord](https://discord.gg/dpf7BZY3) and we will get you up and running with the project, lets build them together!
|
||||||
|
|
||||||
If you want to get notified when we release the initial version, please give it a star! Hopefully we will get them done by this month!
|
If you want to get notified when we release the initial version, please give it a star! Hopefully we will get them done by this month!
|
||||||
|
|
||||||
Sincerely, radix-vue team.
|
## Community
|
||||||
|
|
||||||
|
- [Join us on discord!](https://discord.gg/dpf7BZY3)
|
||||||
|
|
||||||
|
## Authors
|
||||||
|
|
||||||
|
- @khairulhaaziq
|
||||||
|
- @mujahidfa
|
||||||
|
- @zernonia
|
||||||
|
|
||||||
|
## License
|
||||||
|
- MIT License
|
||||||
|
|
|
||||||
|
|
@ -1,50 +1,50 @@
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { ref } from "vue";
|
import { ref } from "vue";
|
||||||
import {
|
import {
|
||||||
Accordion,
|
Accordion,
|
||||||
AccordionTrigger,
|
AccordionTrigger,
|
||||||
AccordionItem,
|
AccordionItem,
|
||||||
AccordionContent,
|
AccordionContent,
|
||||||
} from "./components/Accordion";
|
} from "./components/ui/Accordion";
|
||||||
import { Alert, AlertDescription, AlertTitle } from "./components/Alert";
|
import { Alert, AlertDescription, AlertTitle } from "./components/ui/Alert";
|
||||||
import { Card as InternalCard } from "./components/Internal/Docs/Card";
|
import { Card as InternalCard } from "./components/Internal/Docs/Card";
|
||||||
import { TransitionExpand } from "@morev/vue-transitions";
|
import { TransitionExpand } from "@morev/vue-transitions";
|
||||||
import { Icon } from "@iconify/vue";
|
import { Icon } from "@iconify/vue";
|
||||||
import { Button } from "./components/Button";
|
import { Button } from "./components/ui/Button";
|
||||||
import {
|
import {
|
||||||
AlertDialog,
|
AlertDialog,
|
||||||
AlertDialogTitle,
|
AlertDialogTitle,
|
||||||
AlertDialogHeader,
|
AlertDialogHeader,
|
||||||
AlertDialogDescription,
|
AlertDialogDescription,
|
||||||
AlertDialogFooter,
|
AlertDialogFooter,
|
||||||
} from "./components/AlertDialog";
|
} from "./components/ui/AlertDialog";
|
||||||
import {
|
import {
|
||||||
Dialog,
|
Dialog,
|
||||||
DialogTitle,
|
DialogTitle,
|
||||||
DialogHeader,
|
DialogHeader,
|
||||||
DialogDescription,
|
DialogDescription,
|
||||||
DialogFooter,
|
DialogFooter,
|
||||||
} from "./components/Dialog";
|
} from "./components/ui/Dialog";
|
||||||
import { Avatar, AvatarFallback, AvatarImage } from "./components/Avatar";
|
import { Avatar, AvatarFallback, AvatarImage } from "./components/ui/Avatar";
|
||||||
import { Badge } from "./components/Badge";
|
import { Badge } from "./components/ui/Badge";
|
||||||
import { Checkbox } from "./components/Checkbox";
|
import { Checkbox } from "./components/ui/Checkbox";
|
||||||
import { Label } from "./components/Label";
|
import { Label } from "./components/ui/Label";
|
||||||
import { Input } from "./components/Input";
|
import { Input } from "./components/ui/Input";
|
||||||
import { Textarea } from "./components/Textarea";
|
import { Textarea } from "./components/ui/Textarea";
|
||||||
import { Switch } from "./components/Switch";
|
import { Switch } from "./components/ui/Switch";
|
||||||
import { Toggle } from "./components/Toggle";
|
import { Toggle } from "./components/ui/Toggle";
|
||||||
import { Card } from "./components/Demos";
|
import { Card } from "./components/ui/Demos";
|
||||||
import { AspectRatio, Image } from "./components/AspectRatio";
|
import { AspectRatio, Image } from "./components/ui/AspectRatio";
|
||||||
import {
|
import {
|
||||||
Collapsible,
|
Collapsible,
|
||||||
CollapsibleTrigger,
|
CollapsibleTrigger,
|
||||||
CollapsibleContent,
|
CollapsibleContent,
|
||||||
} from "./components/Collapsible";
|
} from "./components/ui/Collapsible";
|
||||||
import { Select, SelectContent, SelectItem, SelectLabel, SelectTrigger } from "./components/Select";
|
import { Select, SelectContent, SelectItem, SelectLabel, SelectTrigger } from "./components/ui/Select";
|
||||||
import { Popover, PopoverContent, PopoverTrigger } from "./components/Popover";
|
import { Popover, PopoverContent, PopoverTrigger } from "./components/ui/Popover";
|
||||||
import { Separator } from "./components/Separator";
|
import { Separator } from "./components/ui/Separator";
|
||||||
import { Tooltip, TooltipTrigger } from "./components/Tooltip";
|
import { Tooltip, TooltipTrigger } from "./components/ui/Tooltip";
|
||||||
import { RadioGroup, RadioGroupItem } from "./components/RadioGroup";
|
import { RadioGroup, RadioGroupItem } from "./components/ui/RadioGroup";
|
||||||
|
|
||||||
const alertDialogIsOpen = ref(false);
|
const alertDialogIsOpen = ref(false);
|
||||||
const dialogIsOpen = ref(false);
|
const dialogIsOpen = ref(false);
|
||||||
|
|
@ -54,333 +54,333 @@ const checkboxEnabled2 = ref(false);
|
||||||
const toggleEnabled = ref(false);
|
const toggleEnabled = ref(false);
|
||||||
|
|
||||||
const people = [
|
const people = [
|
||||||
{ id: 1, name: "Durward Reynolds", unavailable: false },
|
{ id: 1, name: "Durward Reynolds", unavailable: false },
|
||||||
{ id: 2, name: "Kenton Towne", unavailable: false },
|
{ id: 2, name: "Kenton Towne", unavailable: false },
|
||||||
{ id: 3, name: "Therese Wunsch", unavailable: false },
|
{ id: 3, name: "Therese Wunsch", unavailable: false },
|
||||||
{ id: 4, name: "Benedict Kessler", unavailable: true },
|
{ id: 4, name: "Benedict Kessler", unavailable: true },
|
||||||
{ id: 5, name: "Katelyn Rohan", unavailable: false },
|
{ id: 5, name: "Katelyn Rohan", unavailable: false },
|
||||||
];
|
];
|
||||||
const selectedPerson = ref(people[0]);
|
const selectedPerson = ref(people[0]);
|
||||||
|
|
||||||
const radioOptions = [
|
const radioOptions = [
|
||||||
"Default",
|
"Default",
|
||||||
"Comfortable",
|
"Comfortable",
|
||||||
"Compact",
|
"Compact",
|
||||||
];
|
];
|
||||||
|
|
||||||
const radioValue = ref(radioOptions[0]);
|
const radioValue = ref(radioOptions[0]);
|
||||||
|
|
||||||
const components = [
|
const components = [
|
||||||
"Accordion",
|
"Accordion",
|
||||||
"Alert",
|
"Alert",
|
||||||
"Alert Dialog",
|
"Alert Dialog",
|
||||||
"Aspect Ratio",
|
"Aspect Ratio",
|
||||||
"Avatar",
|
"Avatar",
|
||||||
"Badge",
|
"Badge",
|
||||||
"Button",
|
"Button",
|
||||||
"Calendar",
|
"Calendar",
|
||||||
"Card",
|
"Card",
|
||||||
"Checkbox",
|
"Checkbox",
|
||||||
"Collapsible",
|
"Collapsible",
|
||||||
"Combobox",
|
"Combobox",
|
||||||
"Command",
|
"Command",
|
||||||
"Context Menu",
|
"Context Menu",
|
||||||
"Data Table",
|
"Data Table",
|
||||||
"Date Picker",
|
"Date Picker",
|
||||||
"Dialog",
|
"Dialog",
|
||||||
"Dropdown Menu",
|
"Dropdown Menu",
|
||||||
"Form",
|
"Form",
|
||||||
"Hover Card",
|
"Hover Card",
|
||||||
"Input",
|
"Input",
|
||||||
"Label",
|
"Label",
|
||||||
"Menubar",
|
"Menubar",
|
||||||
"Navigation Menu",
|
"Navigation Menu",
|
||||||
"Popover",
|
"Popover",
|
||||||
"Progress",
|
"Progress",
|
||||||
"Radio Group",
|
"Radio Group",
|
||||||
"Scroll Area",
|
"Scroll Area",
|
||||||
"Select",
|
"Select",
|
||||||
"Separator",
|
"Separator",
|
||||||
"Sheet",
|
"Sheet",
|
||||||
"Skeleton",
|
"Skeleton",
|
||||||
"Slider",
|
"Slider",
|
||||||
"Switch",
|
"Switch",
|
||||||
"Table",
|
"Table",
|
||||||
"Tabs",
|
"Tabs",
|
||||||
"Textarea",
|
"Textarea",
|
||||||
"Toast",
|
"Toast",
|
||||||
"Toggle",
|
"Toggle",
|
||||||
"Tooltip",
|
"Tooltip",
|
||||||
];
|
];
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="flex flex-col items-center px-6 pb-6">
|
<div class="flex flex-col items-center px-6 pb-6">
|
||||||
<div class="mt-32 mb-16 w-full max-w-6xl flex flex-col items-center">
|
<div class="mt-32 mb-16 w-full max-w-6xl flex flex-col items-center">
|
||||||
<h1 class="text-7xl font-bold mb-2">shadcn vue</h1>
|
<h1 class="text-7xl font-bold mb-2">shadcn vue</h1>
|
||||||
<p class="text-md text-neutral-700">
|
<p class="text-md text-neutral-700">
|
||||||
This is a description of easy UI that has been remade over 10000 times.
|
This is a description of easy UI that has been remade over 10000 times.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="flex max-w-6xl">
|
<div class="flex max-w-6xl">
|
||||||
<div class="w-[200px] pr-4">
|
<div class="w-[200px] pr-4">
|
||||||
<nav class="gap-0.5 flex flex-col text-sm sticky top-0 max-h-screen overflow-scroll">
|
<nav class="gap-0.5 flex flex-col text-sm sticky top-0 max-h-screen overflow-scroll">
|
||||||
<button v-for="(link, index) of components" :key="index"
|
<button v-for="(link, index) of components" :key="index"
|
||||||
:class="` group relative flex items-center gap-2.5 px-3 py-1.5 rounded-md text-gray-600 hover:text-black hover:bg-gray-200`">
|
:class="` group relative flex items-center gap-2.5 px-3 py-1.5 rounded-md text-gray-600 hover:text-black hover:bg-gray-200`">
|
||||||
<span :class="`truncate relative`">{{ link }}</span>
|
<span :class="`truncate relative`">{{ link }}</span>
|
||||||
</button>
|
</button>
|
||||||
</nav>
|
</nav>
|
||||||
</div>
|
</div>
|
||||||
<div class="flex-grow grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
|
<div class="flex-grow grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
|
||||||
<InternalCard title="Accordion">
|
<InternalCard title="Accordion">
|
||||||
<div class="w-full max-w-[400px]">
|
<div class="w-full max-w-[400px]">
|
||||||
<Accordion>
|
<Accordion>
|
||||||
<AccordionItem>
|
<AccordionItem>
|
||||||
<AccordionTrigger> Is it accessible? </AccordionTrigger>
|
<AccordionTrigger> Is it accessible? </AccordionTrigger>
|
||||||
<transition-expand>
|
<transition-expand>
|
||||||
<AccordionContent>
|
<AccordionContent>
|
||||||
Yes. It adheres to the WAI-ARIA design pattern.
|
Yes. It adheres to the WAI-ARIA design pattern.
|
||||||
</AccordionContent>
|
</AccordionContent>
|
||||||
</transition-expand>
|
</transition-expand>
|
||||||
</AccordionItem>
|
</AccordionItem>
|
||||||
<AccordionItem>
|
<AccordionItem>
|
||||||
<AccordionTrigger> Is it styled? </AccordionTrigger>
|
<AccordionTrigger> Is it styled? </AccordionTrigger>
|
||||||
<transition-expand>
|
<transition-expand>
|
||||||
<AccordionContent>
|
<AccordionContent>
|
||||||
Yes. It comes with default styles that matches the other components'
|
Yes. It comes with default styles that matches the other components'
|
||||||
aesthetic.
|
aesthetic.
|
||||||
</AccordionContent>
|
</AccordionContent>
|
||||||
</transition-expand>
|
</transition-expand>
|
||||||
</AccordionItem>
|
</AccordionItem>
|
||||||
<AccordionItem>
|
<AccordionItem>
|
||||||
<AccordionTrigger> Is it animated? </AccordionTrigger>
|
<AccordionTrigger> Is it animated? </AccordionTrigger>
|
||||||
<transition-expand>
|
<transition-expand>
|
||||||
<AccordionContent>
|
<AccordionContent>
|
||||||
Yes. It's animated by default, but you can disable it if you prefer.
|
Yes. It's animated by default, but you can disable it if you prefer.
|
||||||
</AccordionContent>
|
</AccordionContent>
|
||||||
</transition-expand>
|
</transition-expand>
|
||||||
</AccordionItem>
|
</AccordionItem>
|
||||||
</Accordion>
|
</Accordion>
|
||||||
</div>
|
</div>
|
||||||
</InternalCard>
|
</InternalCard>
|
||||||
<InternalCard title="Alert">
|
<InternalCard title="Alert">
|
||||||
<div class="max-w-[400px]">
|
<div class="max-w-[400px]">
|
||||||
<Alert>
|
<Alert>
|
||||||
<Icon icon="lucide:terminal" class="h-4 w-4" />
|
<Icon icon="lucide:terminal" class="h-4 w-4" />
|
||||||
<AlertTitle>Heads up!</AlertTitle>
|
<AlertTitle>Heads up!</AlertTitle>
|
||||||
<AlertDescription>
|
<AlertDescription>
|
||||||
You can add components to your app using the cli.
|
You can add components to your app using the cli.
|
||||||
</AlertDescription>
|
</AlertDescription>
|
||||||
</Alert>
|
</Alert>
|
||||||
</div>
|
</div>
|
||||||
</InternalCard>
|
</InternalCard>
|
||||||
<InternalCard title="Alert Dialog">
|
<InternalCard title="Alert Dialog">
|
||||||
<Button label="Open" @click="alertDialogIsOpen = true">Show Dialog</Button>
|
<Button label="Open" @click="alertDialogIsOpen = true">Show Dialog</Button>
|
||||||
<AlertDialog v-model="alertDialogIsOpen">
|
<AlertDialog v-model="alertDialogIsOpen">
|
||||||
<AlertDialogHeader>
|
<AlertDialogHeader>
|
||||||
<AlertDialogTitle>Title</AlertDialogTitle>
|
<AlertDialogTitle>Title</AlertDialogTitle>
|
||||||
<AlertDialogDescription>
|
<AlertDialogDescription>
|
||||||
This action cannot be undone. This will permanently delete your account
|
This action cannot be undone. This will permanently delete your account
|
||||||
and remove your data from our servers.
|
and remove your data from our servers.
|
||||||
</AlertDialogDescription>
|
</AlertDialogDescription>
|
||||||
</AlertDialogHeader>
|
</AlertDialogHeader>
|
||||||
<AlertDialogFooter><Button variant="outline"
|
<AlertDialogFooter><Button variant="outline" @click="alertDialogIsOpen = false">Cancel</Button><Button>CTA
|
||||||
@click="alertDialogIsOpen = false">Cancel</Button><Button>CTA Button</Button>
|
Button</Button>
|
||||||
</AlertDialogFooter>
|
</AlertDialogFooter>
|
||||||
</AlertDialog>
|
</AlertDialog>
|
||||||
</InternalCard>
|
</InternalCard>
|
||||||
<InternalCard title="Aspect Ratio">
|
<InternalCard title="Aspect Ratio">
|
||||||
<AspectRatio :ratio="16 / 9" class="bg-muted">
|
<AspectRatio :ratio="16 / 9" class="bg-muted">
|
||||||
<Image src="https://images.unsplash.com/photo-1588345921523-c2dcdb7f1dcd?w=800&dpr=2&q=80"
|
<Image src="https://images.unsplash.com/photo-1588345921523-c2dcdb7f1dcd?w=800&dpr=2&q=80"
|
||||||
alt="Photo by Drew Beamer" fill class="rounded-md object-cover" />
|
alt="Photo by Drew Beamer" fill class="rounded-md object-cover" />
|
||||||
</AspectRatio>
|
</AspectRatio>
|
||||||
</InternalCard>
|
</InternalCard>
|
||||||
<InternalCard title="Avatar">
|
<InternalCard title="Avatar">
|
||||||
<Avatar>
|
<Avatar>
|
||||||
<AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
|
<AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
|
||||||
<AvatarFallback>CN</AvatarFallback>
|
<AvatarFallback>CN</AvatarFallback>
|
||||||
</Avatar>
|
</Avatar>
|
||||||
</InternalCard>
|
</InternalCard>
|
||||||
<InternalCard title="Badge">
|
<InternalCard title="Badge">
|
||||||
<Badge>Badge</Badge>
|
<Badge>Badge</Badge>
|
||||||
</InternalCard>
|
</InternalCard>
|
||||||
<InternalCard title="Button">
|
<InternalCard title="Button">
|
||||||
<Button>Button</Button>
|
<Button>Button</Button>
|
||||||
</InternalCard>
|
</InternalCard>
|
||||||
<InternalCard title="Calendar"></InternalCard>
|
<InternalCard title="Calendar"></InternalCard>
|
||||||
<InternalCard title="Card">
|
<InternalCard title="Card">
|
||||||
<Card />
|
<Card />
|
||||||
</InternalCard>
|
</InternalCard>
|
||||||
<InternalCard title="Checkbox">
|
<InternalCard title="Checkbox">
|
||||||
<div class="flex items-center space-x-2">
|
<div class="flex items-center space-x-2">
|
||||||
<Checkbox id="terms" v-model="checkboxEnabled" />
|
<Checkbox id="terms" v-model="checkboxEnabled" />
|
||||||
<label htmlFor="terms"
|
<label htmlFor="terms"
|
||||||
class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">
|
class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">
|
||||||
Accept terms and conditions
|
Accept terms and conditions
|
||||||
</label>
|
</label>
|
||||||
</div>
|
</div>
|
||||||
</InternalCard>
|
</InternalCard>
|
||||||
<InternalCard title="Collapsible">
|
<InternalCard title="Collapsible">
|
||||||
<Collapsible class="w-[350px] space-y-2" v-slot="{ open }">
|
<Collapsible class="w-[350px] space-y-2" v-slot="{ open }">
|
||||||
<div class="flex items-center justify-between space-x-4 px-4">
|
<div class="flex items-center justify-between space-x-4 px-4">
|
||||||
<h4 class="text-sm font-semibold">@peduarte starred 3 repositories</h4>
|
<h4 class="text-sm font-semibold">@peduarte starred 3 repositories</h4>
|
||||||
<CollapsibleTrigger>
|
<CollapsibleTrigger>
|
||||||
<Button variant="outline" class="w-9 p-0 aspect-square">
|
<Button variant="outline" class="w-9 p-0 aspect-square">
|
||||||
<span>
|
<span>
|
||||||
<Icon v-show="!open" icon="lucide:chevrons-up-down" class="h-4 w-4 text-black" />
|
<Icon v-show="!open" icon="lucide:chevrons-up-down" class="h-4 w-4 text-black" />
|
||||||
<Icon v-show="open" icon="lucide:x" class="h-4 w-4 text-black" />
|
<Icon v-show="open" icon="lucide:x" class="h-4 w-4 text-black" />
|
||||||
</span>
|
</span>
|
||||||
</Button>
|
</Button>
|
||||||
</CollapsibleTrigger>
|
</CollapsibleTrigger>
|
||||||
</div>
|
</div>
|
||||||
<div class="rounded-md border px-4 py-3 font-mono text-sm">
|
<div class="rounded-md border px-4 py-3 font-mono text-sm">
|
||||||
@radix-ui/primitives
|
@radix-ui/primitives
|
||||||
</div>
|
</div>
|
||||||
<CollapsibleContent class="space-y-2">
|
<CollapsibleContent class="space-y-2">
|
||||||
<div class="rounded-md border px-4 py-3 font-mono text-sm">
|
<div class="rounded-md border px-4 py-3 font-mono text-sm">
|
||||||
@radix-ui/colors
|
@radix-ui/colors
|
||||||
</div>
|
</div>
|
||||||
<div class="rounded-md border px-4 py-3 font-mono text-sm">
|
<div class="rounded-md border px-4 py-3 font-mono text-sm">
|
||||||
@stitches/react
|
@stitches/react
|
||||||
</div>
|
</div>
|
||||||
</CollapsibleContent>
|
</CollapsibleContent>
|
||||||
</Collapsible>
|
</Collapsible>
|
||||||
</InternalCard>
|
</InternalCard>
|
||||||
<InternalCard title="Combobox"></InternalCard>
|
<InternalCard title="Combobox"></InternalCard>
|
||||||
<InternalCard title="Command"></InternalCard>
|
<InternalCard title="Command"></InternalCard>
|
||||||
<InternalCard title="Context Menu"></InternalCard>
|
<InternalCard title="Context Menu"></InternalCard>
|
||||||
<InternalCard title="Data Table"></InternalCard>
|
<InternalCard title="Data Table"></InternalCard>
|
||||||
<InternalCard title="Date Picker"></InternalCard>
|
<InternalCard title="Date Picker"></InternalCard>
|
||||||
<InternalCard title="Dialog">
|
<InternalCard title="Dialog">
|
||||||
<Button label="Open" @click="dialogIsOpen = true">Show Dialog</Button>
|
<Button label="Open" @click="dialogIsOpen = true">Show Dialog</Button>
|
||||||
<Dialog v-model="dialogIsOpen">
|
<Dialog v-model="dialogIsOpen">
|
||||||
<DialogHeader>
|
<DialogHeader>
|
||||||
<DialogTitle>Title</DialogTitle>
|
<DialogTitle>Title</DialogTitle>
|
||||||
<DialogDescription>
|
<DialogDescription>
|
||||||
This action cannot be undone. This will permanently delete your account
|
This action cannot be undone. This will permanently delete your account
|
||||||
and remove your data from our servers.
|
and remove your data from our servers.
|
||||||
</DialogDescription>
|
</DialogDescription>
|
||||||
</DialogHeader>
|
</DialogHeader>
|
||||||
<DialogFooter><Button variant="outline" @click="dialogIsOpen = false">Cancel</Button><Button>CTA
|
<DialogFooter><Button variant="outline" @click="dialogIsOpen = false">Cancel</Button><Button>CTA
|
||||||
Button</Button>
|
Button</Button>
|
||||||
</DialogFooter>
|
</DialogFooter>
|
||||||
</Dialog>
|
</Dialog>
|
||||||
</InternalCard>
|
</InternalCard>
|
||||||
<InternalCard title="Dropdown Menu"></InternalCard>
|
<InternalCard title="Dropdown Menu"></InternalCard>
|
||||||
<InternalCard title="Hover Card"></InternalCard>
|
<InternalCard title="Hover Card"></InternalCard>
|
||||||
<InternalCard title="Input">
|
<InternalCard title="Input">
|
||||||
<Input type="email" placeholder="Email" />
|
<Input type="email" placeholder="Email" />
|
||||||
</InternalCard>
|
</InternalCard>
|
||||||
<InternalCard title="Label">
|
<InternalCard title="Label">
|
||||||
<div class="flex items-center space-x-2">
|
<div class="flex items-center space-x-2">
|
||||||
<Checkbox id="terms2" v-model="checkboxEnabled2" />
|
<Checkbox id="terms2" v-model="checkboxEnabled2" />
|
||||||
<Label htmlFor="terms2">Accept terms and conditions</Label>
|
<Label htmlFor="terms2">Accept terms and conditions</Label>
|
||||||
</div>
|
</div>
|
||||||
</InternalCard>
|
</InternalCard>
|
||||||
<InternalCard title="Menubar"></InternalCard>
|
<InternalCard title="Menubar"></InternalCard>
|
||||||
<InternalCard title="Navigation Menu"></InternalCard>
|
<InternalCard title="Navigation Menu"></InternalCard>
|
||||||
<InternalCard title="Popover">
|
<InternalCard title="Popover">
|
||||||
<Popover>
|
<Popover>
|
||||||
<PopoverTrigger><Button variant="outline">Open popover</Button></PopoverTrigger>
|
<PopoverTrigger><Button variant="outline">Open popover</Button></PopoverTrigger>
|
||||||
<PopoverContent class="w-80">
|
<PopoverContent class="w-80">
|
||||||
<div class="grid gap-4">
|
<div class="grid gap-4">
|
||||||
<div class="space-y-2">
|
<div class="space-y-2">
|
||||||
<h4 class="font-medium leading-none">Dimensions</h4>
|
<h4 class="font-medium leading-none">Dimensions</h4>
|
||||||
<p class="text-sm text-muted-foreground">
|
<p class="text-sm text-muted-foreground">
|
||||||
Set the dimensions for the layer.
|
Set the dimensions for the layer.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="grid gap-2">
|
<div class="grid gap-2">
|
||||||
<div class="grid grid-cols-3 items-center gap-4">
|
<div class="grid grid-cols-3 items-center gap-4">
|
||||||
<Label htmlFor="width">Width</Label>
|
<Label htmlFor="width">Width</Label>
|
||||||
<Input id="width" defaultValue="100%" class="col-span-2 h-8" />
|
<Input id="width" defaultValue="100%" class="col-span-2 h-8" />
|
||||||
</div>
|
</div>
|
||||||
<div class="grid grid-cols-3 items-center gap-4">
|
<div class="grid grid-cols-3 items-center gap-4">
|
||||||
<Label htmlFor="maxWidth">Max. width</Label>
|
<Label htmlFor="maxWidth">Max. width</Label>
|
||||||
<Input id="maxWidth" defaultValue="300px" class="col-span-2 h-8" />
|
<Input id="maxWidth" defaultValue="300px" class="col-span-2 h-8" />
|
||||||
</div>
|
</div>
|
||||||
<div class="grid grid-cols-3 items-center gap-4">
|
<div class="grid grid-cols-3 items-center gap-4">
|
||||||
<Label htmlFor="height">Height</Label>
|
<Label htmlFor="height">Height</Label>
|
||||||
<Input id="height" defaultValue="25px" class="col-span-2 h-8" />
|
<Input id="height" defaultValue="25px" class="col-span-2 h-8" />
|
||||||
</div>
|
</div>
|
||||||
<div class="grid grid-cols-3 items-center gap-4">
|
<div class="grid grid-cols-3 items-center gap-4">
|
||||||
<Label htmlFor="maxHeight">Max. height</Label>
|
<Label htmlFor="maxHeight">Max. height</Label>
|
||||||
<Input id="maxHeight" defaultValue="none" class="col-span-2 h-8" />
|
<Input id="maxHeight" defaultValue="none" class="col-span-2 h-8" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</PopoverContent>
|
</PopoverContent>
|
||||||
</Popover>
|
</Popover>
|
||||||
</InternalCard>
|
</InternalCard>
|
||||||
<InternalCard title="Progress"></InternalCard>
|
<InternalCard title="Progress"></InternalCard>
|
||||||
<InternalCard title="Radio Group">
|
<InternalCard title="Radio Group">
|
||||||
<RadioGroup v-model="radioValue">
|
<RadioGroup v-model="radioValue">
|
||||||
<RadioGroupItem v-for="option in radioOptions" :value="option" :id="option">
|
<RadioGroupItem v-for="option in radioOptions" :value="option" :id="option">
|
||||||
<Label :for="option">{{ option }}</Label>
|
<Label :for="option">{{ option }}</Label>
|
||||||
</RadioGroupItem>
|
</RadioGroupItem>
|
||||||
</RadioGroup>
|
</RadioGroup>
|
||||||
</InternalCard>
|
</InternalCard>
|
||||||
<InternalCard title="Scroll Area"></InternalCard>
|
<InternalCard title="Scroll Area"></InternalCard>
|
||||||
<InternalCard title="Select">
|
<InternalCard title="Select">
|
||||||
<Select v-model="selectedPerson.id">
|
<Select v-model="selectedPerson.id">
|
||||||
<SelectTrigger class="w-[210px]">
|
<SelectTrigger class="w-[210px]">
|
||||||
{{ selectedPerson.name }}
|
{{ selectedPerson.name }}
|
||||||
</SelectTrigger>
|
</SelectTrigger>
|
||||||
<SelectContent>
|
<SelectContent>
|
||||||
<SelectLabel>Fruits</SelectLabel>
|
<SelectLabel>Fruits</SelectLabel>
|
||||||
<SelectItem v-for="person in people" :key="person.id" :value="person.id"
|
<SelectItem v-for="person in people" :key="person.id" :value="person.id" :disabled="person.unavailable">{{
|
||||||
:disabled="person.unavailable">{{ person.name }}</SelectItem>
|
person.name }}</SelectItem>
|
||||||
</SelectContent>
|
</SelectContent>
|
||||||
</Select>
|
</Select>
|
||||||
</InternalCard>
|
</InternalCard>
|
||||||
<InternalCard title="Separator">
|
<InternalCard title="Separator">
|
||||||
<div>
|
<div>
|
||||||
<div className="space-y-1">
|
<div className="space-y-1">
|
||||||
<h4 className="text-sm font-medium leading-none">Radix Primitives</h4>
|
<h4 className="text-sm font-medium leading-none">Radix Primitives</h4>
|
||||||
<p className="text-sm text-muted-foreground">
|
<p className="text-sm text-muted-foreground">
|
||||||
An open-source UI component library.
|
An open-source UI component library.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<Separator class="my-4" />
|
<Separator class="my-4" />
|
||||||
<div className="flex h-5 items-center space-x-4 text-sm">
|
<div className="flex h-5 items-center space-x-4 text-sm">
|
||||||
<div>Blog</div>
|
<div>Blog</div>
|
||||||
<Separator orientation="vertical" />
|
<Separator orientation="vertical" />
|
||||||
<div>Docs</div>
|
<div>Docs</div>
|
||||||
<Separator orientation="vertical" />
|
<Separator orientation="vertical" />
|
||||||
<div>Source</div>
|
<div>Source</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</InternalCard>
|
</InternalCard>
|
||||||
<InternalCard title="Sheet"></InternalCard>
|
<InternalCard title="Sheet"></InternalCard>
|
||||||
<InternalCard title="Skeleton"></InternalCard>
|
<InternalCard title="Skeleton"></InternalCard>
|
||||||
<InternalCard title="Slider"></InternalCard>
|
<InternalCard title="Slider"></InternalCard>
|
||||||
<InternalCard title="Switch">
|
<InternalCard title="Switch">
|
||||||
<div class="flex items-center space-x-2">
|
<div class="flex items-center space-x-2">
|
||||||
<Switch id="airplane-mode" v-model="enabled" />
|
<Switch id="airplane-mode" v-model="enabled" />
|
||||||
<Label htmlFor="airplane-mode">Airplane Mode</Label>
|
<Label htmlFor="airplane-mode">Airplane Mode</Label>
|
||||||
</div>
|
</div>
|
||||||
</InternalCard>
|
</InternalCard>
|
||||||
<InternalCard title="Table"></InternalCard>
|
<InternalCard title="Table"></InternalCard>
|
||||||
<InternalCard title="Tabs"></InternalCard>
|
<InternalCard title="Tabs"></InternalCard>
|
||||||
<InternalCard title="Textarea"><Textarea placeholder="Type your message here." /></InternalCard>
|
<InternalCard title="Textarea"><Textarea placeholder="Type your message here." /></InternalCard>
|
||||||
<InternalCard title="Toast"></InternalCard>
|
<InternalCard title="Toast"></InternalCard>
|
||||||
<InternalCard title="Toggle">
|
<InternalCard title="Toggle">
|
||||||
<Toggle aria-label="Toggle italic" v-model="toggleEnabled">
|
<Toggle aria-label="Toggle italic" v-model="toggleEnabled">
|
||||||
<Icon icon="lucide:bold" class="h-4 w-4" />
|
<Icon icon="lucide:bold" class="h-4 w-4" />
|
||||||
</Toggle>
|
</Toggle>
|
||||||
</InternalCard>
|
</InternalCard>
|
||||||
<InternalCard title="Tooltip">
|
<InternalCard title="Tooltip">
|
||||||
<Tooltip>
|
<Tooltip>
|
||||||
<TooltipTrigger>Hover</TooltipTrigger>
|
<TooltipTrigger>Hover</TooltipTrigger>
|
||||||
</Tooltip>
|
</Tooltip>
|
||||||
</InternalCard>
|
</InternalCard>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
body {
|
body {
|
||||||
@apply bg-neutral-100;
|
@apply bg-neutral-100;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,7 @@
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import { Icon } from "@iconify/vue";
|
import { Icon } from "@iconify/vue";
|
||||||
import { Button } from "@/src/components/Button"
|
import { Button } from "@/src/components/ui/Button"
|
||||||
import {
|
import {
|
||||||
Card,
|
Card,
|
||||||
CardContent,
|
CardContent,
|
||||||
|
|
@ -9,7 +9,7 @@ import {
|
||||||
CardFooter,
|
CardFooter,
|
||||||
CardHeader,
|
CardHeader,
|
||||||
CardTitle,
|
CardTitle,
|
||||||
} from "@/src/components/Card"
|
} from "@/src/components/ui/Card"
|
||||||
|
|
||||||
const notifications = [
|
const notifications = [
|
||||||
{
|
{
|
||||||
Loading…
Reference in New Issue
Block a user