248 lines
11 KiB
JavaScript
248 lines
11 KiB
JavaScript
import { createApp, h, ref } from 'vue';
|
|
import '../../resources/css/app.css';
|
|
import AppearanceTabs from '../../resources/js/components/AppearanceTabs.vue';
|
|
import {
|
|
Avatar,
|
|
AvatarFallback,
|
|
} from '../../resources/js/components/ui/avatar';
|
|
import { Badge } from '../../resources/js/components/ui/badge';
|
|
import { Button } from '../../resources/js/components/ui/button';
|
|
import { Checkbox } from '../../resources/js/components/ui/checkbox';
|
|
import { Input } from '../../resources/js/components/ui/input';
|
|
import {
|
|
Select,
|
|
SelectContent,
|
|
SelectItem,
|
|
SelectTrigger,
|
|
SelectValue,
|
|
} from '../../resources/js/components/ui/select';
|
|
import { createAppearance } from '../../resources/js/composables/useAppearance';
|
|
import { createLocalization } from '../../resources/js/lib/localization';
|
|
|
|
const Demo = {
|
|
setup() {
|
|
const selectedStatus = ref('review');
|
|
const subscribed = ref(true);
|
|
|
|
return () =>
|
|
h('main', { class: 'mx-auto grid max-w-4xl gap-column p-page' }, [
|
|
h(
|
|
'div',
|
|
{
|
|
class: 'flex flex-wrap items-center justify-between gap-stack',
|
|
},
|
|
[
|
|
h('div', {}, [
|
|
h(
|
|
'h1',
|
|
{ class: 'text-headline' },
|
|
'Foundational UI components',
|
|
),
|
|
h(
|
|
'p',
|
|
{ class: 'text-muted-foreground' },
|
|
'Fluid Emerald states and controls',
|
|
),
|
|
]),
|
|
h(AppearanceTabs),
|
|
],
|
|
),
|
|
h('section', { class: 'grid gap-column sm:grid-cols-2' }, [
|
|
h(
|
|
'article',
|
|
{
|
|
class: 'grid content-start gap-column rounded-md border bg-card p-card',
|
|
},
|
|
[
|
|
h(
|
|
'h2',
|
|
{ class: 'text-title' },
|
|
'Buttons and badges',
|
|
),
|
|
h('div', { class: 'flex flex-wrap gap-stack' }, [
|
|
h(Button, {}, () => 'Primary'),
|
|
h(
|
|
Button,
|
|
{ variant: 'secondary' },
|
|
() => 'Secondary',
|
|
),
|
|
h(
|
|
Button,
|
|
{ variant: 'outline' },
|
|
() => 'Outline',
|
|
),
|
|
h(
|
|
Button,
|
|
{ variant: 'destructive' },
|
|
() => 'Delete',
|
|
),
|
|
h(Button, { disabled: true }, () => 'Disabled'),
|
|
h(Button, { loading: true }, () => 'Saving'),
|
|
]),
|
|
h('div', { class: 'flex flex-wrap gap-stack' }, [
|
|
h(Badge, {}, () => 'Active'),
|
|
h(Badge, { variant: 'success' }, () => 'Done'),
|
|
h(
|
|
Badge,
|
|
{ variant: 'warning' },
|
|
() => 'Medium',
|
|
),
|
|
h(Badge, { variant: 'info' }, () => 'Low'),
|
|
h(
|
|
Badge,
|
|
{ variant: 'destructive' },
|
|
() => 'High',
|
|
),
|
|
h(
|
|
Badge,
|
|
{ variant: 'outline' },
|
|
() => 'KAN-18',
|
|
),
|
|
]),
|
|
],
|
|
),
|
|
h(
|
|
'article',
|
|
{
|
|
class: 'grid content-start gap-column rounded-md border bg-card p-card',
|
|
},
|
|
[
|
|
h(
|
|
'h2',
|
|
{ class: 'text-title' },
|
|
'Inputs and selection',
|
|
),
|
|
h(
|
|
'label',
|
|
{ class: 'grid gap-stack', for: 'title' },
|
|
[
|
|
h(
|
|
'span',
|
|
{ class: 'text-body font-medium' },
|
|
'Title',
|
|
),
|
|
h(Input, {
|
|
id: 'title',
|
|
placeholder: 'Ticket title',
|
|
}),
|
|
],
|
|
),
|
|
h(
|
|
'label',
|
|
{
|
|
class: 'grid gap-stack',
|
|
for: 'invalid-title',
|
|
},
|
|
[
|
|
h(
|
|
'span',
|
|
{ class: 'text-body font-medium' },
|
|
'Invalid title',
|
|
),
|
|
h(Input, {
|
|
id: 'invalid-title',
|
|
invalid: true,
|
|
modelValue: 'Needs attention',
|
|
}),
|
|
],
|
|
),
|
|
h(
|
|
'label',
|
|
{ class: 'grid gap-stack', for: 'status' },
|
|
[
|
|
h(
|
|
'span',
|
|
{ class: 'text-body font-medium' },
|
|
'Status',
|
|
),
|
|
h(
|
|
Select,
|
|
{
|
|
modelValue: selectedStatus.value,
|
|
'onUpdate:modelValue': (value) => {
|
|
selectedStatus.value = value;
|
|
},
|
|
},
|
|
{
|
|
default: () => [
|
|
h(
|
|
SelectTrigger,
|
|
{
|
|
id: 'status',
|
|
class: 'w-full',
|
|
},
|
|
{
|
|
default: () =>
|
|
h(SelectValue, {
|
|
placeholder:
|
|
'Choose a status',
|
|
}),
|
|
},
|
|
),
|
|
h(SelectContent, {}, () => [
|
|
h(
|
|
SelectItem,
|
|
{ value: 'todo' },
|
|
() => 'To do',
|
|
),
|
|
h(
|
|
SelectItem,
|
|
{ value: 'review' },
|
|
() => 'Review',
|
|
),
|
|
h(
|
|
SelectItem,
|
|
{ value: 'done' },
|
|
() => 'Done',
|
|
),
|
|
]),
|
|
],
|
|
},
|
|
),
|
|
],
|
|
),
|
|
h(
|
|
'label',
|
|
{ class: 'flex items-center gap-stack' },
|
|
[
|
|
h(Checkbox, {
|
|
modelValue: subscribed.value,
|
|
'onUpdate:modelValue': (value) => {
|
|
subscribed.value = Boolean(value);
|
|
},
|
|
}),
|
|
h('span', {}, 'Notify me about changes'),
|
|
],
|
|
),
|
|
],
|
|
),
|
|
]),
|
|
h(
|
|
'section',
|
|
{
|
|
class: 'flex items-center gap-stack rounded-md border bg-card p-card',
|
|
},
|
|
[
|
|
h(Avatar, { size: 'sm' }, () =>
|
|
h(AvatarFallback, {}, () => 'NS'),
|
|
),
|
|
h(Avatar, {}, () => h(AvatarFallback, {}, () => 'AK')),
|
|
h(Avatar, { size: 'lg' }, () =>
|
|
h(AvatarFallback, {}, () => 'LT'),
|
|
),
|
|
h(
|
|
'span',
|
|
{ class: 'text-muted-foreground' },
|
|
'24px, 32px and 40px avatars',
|
|
),
|
|
],
|
|
),
|
|
]);
|
|
},
|
|
};
|
|
|
|
createApp(Demo)
|
|
.use(createLocalization())
|
|
.use(createAppearance('light'))
|
|
.mount('#app');
|