feat: add profile section in forms example (#44)
* feat: add profile section in forms example * feat: add account and appearance sections in forms example * feat: add notifications and display sections in forms example * fix: fix checked prop in display form
This commit is contained in:
Ahmed Mayara
GitHub
parent
912be8edcf
commit
3636e992c3
|
|
@ -30,7 +30,7 @@ const examples = [
|
|||
},
|
||||
{
|
||||
name: 'Forms',
|
||||
href: '/examples/forms',
|
||||
href: '/examples/forms/forms',
|
||||
code: 'https://github.com/radix-vue/shadcn-vue/tree/dev/apps/www/src/examples/forms',
|
||||
},
|
||||
{
|
||||
|
|
|
|||
5
apps/www/src/content/examples/forms/account.md
Normal file
5
apps/www/src/content/examples/forms/account.md
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
<script setup>
|
||||
import AccountExample from "@/examples/forms/Account.vue"
|
||||
</script>
|
||||
|
||||
<AccountExample />
|
||||
5
apps/www/src/content/examples/forms/appearance.md
Normal file
5
apps/www/src/content/examples/forms/appearance.md
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
<script setup>
|
||||
import AppearanceExample from "@/examples/forms/Appearance.vue"
|
||||
</script>
|
||||
|
||||
<AppearanceExample />
|
||||
5
apps/www/src/content/examples/forms/display.md
Normal file
5
apps/www/src/content/examples/forms/display.md
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
<script setup>
|
||||
import DisplayExample from "@/examples/forms/Display.vue"
|
||||
</script>
|
||||
|
||||
<DisplayExample />
|
||||
5
apps/www/src/content/examples/forms/forms.md
Normal file
5
apps/www/src/content/examples/forms/forms.md
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
<script setup>
|
||||
import FormsExample from "@/examples/forms/Example.vue"
|
||||
</script>
|
||||
|
||||
<FormsExample />
|
||||
5
apps/www/src/content/examples/forms/notifications.md
Normal file
5
apps/www/src/content/examples/forms/notifications.md
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
<script setup>
|
||||
import NotificationsExample from "@/examples/forms/Notifications.vue"
|
||||
</script>
|
||||
|
||||
<NotificationsExample />
|
||||
10
apps/www/src/examples/forms/Account.vue
Normal file
10
apps/www/src/examples/forms/Account.vue
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
<script setup lang="ts">
|
||||
import FormsLayout from './layouts/FormsLayout.vue'
|
||||
import AccountForm from './components/AccountForm.vue'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<FormsLayout>
|
||||
<AccountForm />
|
||||
</FormsLayout>
|
||||
</template>
|
||||
10
apps/www/src/examples/forms/Appearance.vue
Normal file
10
apps/www/src/examples/forms/Appearance.vue
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
<script setup lang="ts">
|
||||
import FormsLayout from './layouts/FormsLayout.vue'
|
||||
import AppearanceForm from './components/AppearanceForm.vue'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<FormsLayout>
|
||||
<AppearanceForm />
|
||||
</FormsLayout>
|
||||
</template>
|
||||
10
apps/www/src/examples/forms/Display.vue
Normal file
10
apps/www/src/examples/forms/Display.vue
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
<script setup lang="ts">
|
||||
import FormsLayout from './layouts/FormsLayout.vue'
|
||||
import DisplayForm from './components/DisplayForm.vue'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<FormsLayout>
|
||||
<DisplayForm />
|
||||
</FormsLayout>
|
||||
</template>
|
||||
10
apps/www/src/examples/forms/Example.vue
Normal file
10
apps/www/src/examples/forms/Example.vue
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
<script setup lang="ts">
|
||||
import FormsLayout from './layouts/FormsLayout.vue'
|
||||
import ProfileForm from './components/ProfileForm.vue'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<FormsLayout>
|
||||
<ProfileForm />
|
||||
</FormsLayout>
|
||||
</template>
|
||||
10
apps/www/src/examples/forms/Notifications.vue
Normal file
10
apps/www/src/examples/forms/Notifications.vue
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
<script setup lang="ts">
|
||||
import FormsLayout from './layouts/FormsLayout.vue'
|
||||
import NotificationsForm from './components/NotificationsForm.vue'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<FormsLayout>
|
||||
<NotificationsForm />
|
||||
</FormsLayout>
|
||||
</template>
|
||||
158
apps/www/src/examples/forms/components/AccountForm.vue
Normal file
158
apps/www/src/examples/forms/components/AccountForm.vue
Normal file
|
|
@ -0,0 +1,158 @@
|
|||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import * as z from 'zod'
|
||||
import { format } from 'date-fns'
|
||||
import { cn } from '@/lib/utils'
|
||||
|
||||
import RadixIconsCalendar from '~icons/radix-icons/calendar'
|
||||
|
||||
import { Input } from '@/lib/registry/new-york/ui/input'
|
||||
import { Label } from '@/lib/registry/new-york/ui/label'
|
||||
import { Separator } from '@/lib/registry/new-york/ui/separator'
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectGroup,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from '@/lib/registry/new-york/ui/select'
|
||||
import { Button } from '@/lib/registry/new-york/ui/button'
|
||||
import {
|
||||
Popover,
|
||||
PopoverContent,
|
||||
PopoverTrigger,
|
||||
} from '@/lib/registry/default/ui/popover'
|
||||
import { Calendar } from '@/lib/registry/new-york/ui/calendar'
|
||||
|
||||
const accountForm = ref({
|
||||
name: '',
|
||||
dob: null,
|
||||
language: '',
|
||||
})
|
||||
|
||||
const languages = [
|
||||
{ label: 'English', value: 'en' },
|
||||
{ label: 'French', value: 'fr' },
|
||||
{ label: 'German', value: 'de' },
|
||||
{ label: 'Spanish', value: 'es' },
|
||||
{ label: 'Portuguese', value: 'pt' },
|
||||
{ label: 'Russian', value: 'ru' },
|
||||
{ label: 'Japanese', value: 'ja' },
|
||||
{ label: 'Korean', value: 'ko' },
|
||||
{ label: 'Chinese', value: 'zh' },
|
||||
] as const
|
||||
|
||||
const accountFormSchema = z.object({
|
||||
name: z
|
||||
.string()
|
||||
.min(2, {
|
||||
message: 'Name must be at least 2 characters.',
|
||||
})
|
||||
.max(30, {
|
||||
message: 'Name must not be longer than 30 characters.',
|
||||
}),
|
||||
dob: z.date({
|
||||
required_error: 'A date of birth is required.',
|
||||
}),
|
||||
language: z.string().nonempty({
|
||||
message: 'Please select a language.',
|
||||
}),
|
||||
})
|
||||
|
||||
type AccountFormValues = z.infer<typeof accountFormSchema>
|
||||
const errors = ref<z.ZodFormattedError<AccountFormValues> | null>(null)
|
||||
|
||||
async function handleSubmit() {
|
||||
const result = accountFormSchema.safeParse(accountForm.value)
|
||||
if (!result.success) {
|
||||
errors.value = result.error.format()
|
||||
console.log(errors.value)
|
||||
return
|
||||
}
|
||||
|
||||
console.log('Form submitted!', accountForm.value)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<h3 class="text-lg font-medium">
|
||||
Account
|
||||
</h3>
|
||||
<p class="text-sm text-muted-foreground">
|
||||
Update your account settings. Set your preferred language and timezone.
|
||||
</p>
|
||||
</div>
|
||||
<Separator />
|
||||
<form class="space-y-8" @submit.prevent="handleSubmit">
|
||||
<div class="grid gap-2">
|
||||
<Label for="name" :class="cn('text-sm', errors?.name && 'text-destructive')">
|
||||
Name
|
||||
</Label>
|
||||
<Input id="name" v-model="accountForm.name" placeholder="Your name" />
|
||||
<span class="text-muted-foreground text-sm">
|
||||
This is the name that will be displayed on your profile and in emails.
|
||||
</span>
|
||||
<div v-if="errors?.name" class="text-sm text-destructive">
|
||||
<span v-for="error in errors.name._errors" :key="error">{{ error }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid gap-2">
|
||||
<Label for="dob" :class="cn('text-sm', errors?.dob && 'text-destructive')">
|
||||
Date of Birth
|
||||
</Label>
|
||||
<Popover>
|
||||
<PopoverTrigger as-child>
|
||||
<Button
|
||||
variant="outline"
|
||||
:class="cn(
|
||||
'w-[280px] pl-3 text-left font-normal',
|
||||
!accountForm.dob && 'text-muted-foreground',
|
||||
)"
|
||||
>
|
||||
<span>{{ accountForm.dob ? format(accountForm.dob, "PPP") : "Pick a date" }}</span>
|
||||
<RadixIconsCalendar class="ml-auto h-4 w-4 opacity-50" />
|
||||
</Button>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent class="p-0">
|
||||
<Calendar v-model="accountForm.dob" />
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
<span class="text-muted-foreground text-sm">
|
||||
Your date of birth is used to calculate your age.
|
||||
</span>
|
||||
<div v-if="errors?.dob" class="text-sm text-destructive">
|
||||
<span v-for="error in errors.dob._errors" :key="error">{{ error }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid gap-2">
|
||||
<Label for="language" :class="cn('text-sm', errors?.language && 'text-destructive')">
|
||||
Language
|
||||
</Label>
|
||||
<Select id="language" v-model="accountForm.language">
|
||||
<SelectTrigger class="w-[200px]">
|
||||
<SelectValue placeholder="Select a language" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectGroup>
|
||||
<SelectItem v-for="language in languages" :key="language.value" :value="language.value">
|
||||
{{ language.label }}
|
||||
</SelectItem>
|
||||
</SelectGroup>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<span class="text-muted-foreground text-sm">
|
||||
This is the language that will be used in the dashboard.
|
||||
</span>
|
||||
<div v-if="errors?.language" class="text-sm text-destructive">
|
||||
<span v-for="error in errors.language._errors" :key="error">{{ error }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex justify-start">
|
||||
<Button type="submit">
|
||||
Update account
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
</template>
|
||||
169
apps/www/src/examples/forms/components/AppearanceForm.vue
Normal file
169
apps/www/src/examples/forms/components/AppearanceForm.vue
Normal file
|
|
@ -0,0 +1,169 @@
|
|||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import * as z from 'zod'
|
||||
import { cn } from '@/lib/utils'
|
||||
|
||||
import { Label } from '@/lib/registry/new-york/ui/label'
|
||||
import { Separator } from '@/lib/registry/new-york/ui/separator'
|
||||
import { RadioGroup, RadioGroupItem } from '@/lib/registry/default/ui/radio-group'
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectGroup,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from '@/lib/registry/new-york/ui/select'
|
||||
import { Button } from '@/lib/registry/new-york/ui/button'
|
||||
|
||||
const appearenceForm = ref({
|
||||
theme: 'light',
|
||||
font: '',
|
||||
})
|
||||
|
||||
const appearanceFormSchema = z.object({
|
||||
theme: z.enum(['light', 'dark'], {
|
||||
required_error: 'Please select a theme.',
|
||||
}),
|
||||
font: z.enum(['inter', 'manrope', 'system'], {
|
||||
invalid_type_error: 'Select a font',
|
||||
required_error: 'Please select a font.',
|
||||
}),
|
||||
})
|
||||
|
||||
type AppearanceFormValues = z.infer<typeof appearanceFormSchema>
|
||||
const errors = ref<z.ZodFormattedError<AppearanceFormValues> | null>(null)
|
||||
|
||||
async function handleSubmit() {
|
||||
const result = appearanceFormSchema.safeParse(appearenceForm.value)
|
||||
if (!result.success) {
|
||||
errors.value = result.error.format()
|
||||
console.log(errors.value)
|
||||
return
|
||||
}
|
||||
|
||||
console.log('Form submitted!', appearenceForm.value)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<h3 class="text-lg font-medium">
|
||||
Appearence
|
||||
</h3>
|
||||
<p class="text-sm text-muted-foreground">
|
||||
Customize the appearance of the app. Automatically switch between day and night themes.
|
||||
</p>
|
||||
</div>
|
||||
<Separator />
|
||||
<form class="space-y-8" @submit.prevent="handleSubmit">
|
||||
<div class="grid gap-2">
|
||||
<Label for="font" :class="cn('text-sm', errors?.font && 'text-destructive')">
|
||||
Font
|
||||
</Label>
|
||||
<Select id="font" v-model="appearenceForm.font">
|
||||
<SelectTrigger class="w-[200px]">
|
||||
<SelectValue placeholder="Select a font" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectGroup>
|
||||
<SelectItem value="inter">
|
||||
Inter
|
||||
</SelectItem>
|
||||
<SelectItem value="manrope">
|
||||
Manrope
|
||||
</SelectItem>
|
||||
<SelectItem value="system">
|
||||
System
|
||||
</SelectItem>
|
||||
</SelectGroup>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<span class="text-muted-foreground text-xs">
|
||||
Set the font you want to use in the dashboard.
|
||||
</span>
|
||||
<div v-if="errors?.font" class="text-sm text-destructive">
|
||||
<span v-for="error in errors.font._errors" :key="error">{{ error }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid gap-2">
|
||||
<Label for="theme" :class="cn('text-sm', errors?.theme && 'text-destructive')">
|
||||
Theme
|
||||
</Label>
|
||||
<span class="text-muted-foreground text-xs">
|
||||
Select the theme for the dashboard.
|
||||
</span>
|
||||
<RadioGroup
|
||||
v-model="appearenceForm.theme"
|
||||
default-value="light"
|
||||
class="grid max-w-md grid-cols-2 gap-8 pt-2"
|
||||
>
|
||||
<div class="grid gap-2">
|
||||
<Label class="[&:has([data-state=checked])>div]:border-primary">
|
||||
<div>
|
||||
<RadioGroupItem value="light" class="sr-only" />
|
||||
</div>
|
||||
<div class="items-center rounded-md border-2 border-muted p-1 hover:border-accent">
|
||||
<div class="space-y-2 rounded-sm bg-[#ecedef] p-2">
|
||||
<div class="space-y-2 rounded-md bg-white p-2 shadow-sm">
|
||||
<div class="h-2 w-[80px] rounded-lg bg-[#ecedef]" />
|
||||
<div class="h-2 w-[100px] rounded-lg bg-[#ecedef]" />
|
||||
</div>
|
||||
<div class="flex items-center space-x-2 rounded-md bg-white p-2 shadow-sm">
|
||||
<div class="h-4 w-4 rounded-full bg-[#ecedef]" />
|
||||
<div class="h-2 w-[100px] rounded-lg bg-[#ecedef]" />
|
||||
</div>
|
||||
<div class="flex items-center space-x-2 rounded-md bg-white p-2 shadow-sm">
|
||||
<div class="h-4 w-4 rounded-full bg-[#ecedef]" />
|
||||
<div class="h-2 w-[100px] rounded-lg bg-[#ecedef]" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<span class="block w-full p-2 text-center font-normal">
|
||||
Light
|
||||
</span>
|
||||
</Label>
|
||||
</div>
|
||||
<div>
|
||||
<Label class="[&:has([data-state=checked])>div]:border-primary">
|
||||
<div>
|
||||
<RadioGroupItem value="dark" class="sr-only" />
|
||||
</div>
|
||||
<div class="items-center rounded-md border-2 border-muted bg-popover p-1 hover:bg-accent hover:text-accent-foreground">
|
||||
<div class="space-y-2 rounded-sm bg-slate-950 p-2">
|
||||
<div class="space-y-2 rounded-md bg-slate-800 p-2 shadow-sm">
|
||||
<div class="h-2 w-[80px] rounded-lg bg-slate-400" />
|
||||
<div class="h-2 w-[100px] rounded-lg bg-slate-400" />
|
||||
</div>
|
||||
<div class="flex items-center space-x-2 rounded-md bg-slate-800 p-2 shadow-sm">
|
||||
<div class="h-4 w-4 rounded-full bg-slate-400" />
|
||||
<div class="h-2 w-[100px] rounded-lg bg-slate-400" />
|
||||
</div>
|
||||
<div class="flex items-center space-x-2 rounded-md bg-slate-800 p-2 shadow-sm">
|
||||
<div class="h-4 w-4 rounded-full bg-slate-400" />
|
||||
<div class="h-2 w-[100px] rounded-lg bg-slate-400" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<span class="block w-full p-2 text-center font-normal">
|
||||
Dark
|
||||
</span>
|
||||
</Label>
|
||||
</div>
|
||||
|
||||
<div class="col-span-2">
|
||||
<span v-if="errors?.theme" class="text-sm text-destructive">
|
||||
<span v-for="error in errors.theme._errors" :key="error">{{ error }}</span>
|
||||
</span>
|
||||
</div>
|
||||
</RadioGroup>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-start">
|
||||
<Button type="submit">
|
||||
Update preferences
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
</template>
|
||||
98
apps/www/src/examples/forms/components/DisplayForm.vue
Normal file
98
apps/www/src/examples/forms/components/DisplayForm.vue
Normal file
|
|
@ -0,0 +1,98 @@
|
|||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import * as z from 'zod'
|
||||
import { cn } from '@/lib/utils'
|
||||
|
||||
import { Label } from '@/lib/registry/new-york/ui/label'
|
||||
import { Separator } from '@/lib/registry/new-york/ui/separator'
|
||||
import { Checkbox } from '@/lib/registry/new-york/ui/checkbox'
|
||||
import { Button } from '@/lib/registry/new-york/ui/button'
|
||||
|
||||
const displayForm = ref({
|
||||
items: ['recents', 'home'],
|
||||
})
|
||||
|
||||
const items = [
|
||||
{
|
||||
id: 'recents',
|
||||
label: 'Recents',
|
||||
},
|
||||
{
|
||||
id: 'home',
|
||||
label: 'Home',
|
||||
},
|
||||
{
|
||||
id: 'applications',
|
||||
label: 'Applications',
|
||||
|
||||
},
|
||||
{
|
||||
id: 'desktop',
|
||||
label: 'Desktop',
|
||||
|
||||
},
|
||||
{
|
||||
id: 'downloads',
|
||||
label: 'Downloads',
|
||||
|
||||
},
|
||||
{
|
||||
id: 'documents',
|
||||
label: 'Documents',
|
||||
|
||||
},
|
||||
] as const
|
||||
|
||||
const displayFormSchema = z.object({
|
||||
items: z.array(z.string()).refine(value => value.some(item => item), {
|
||||
message: 'You have to select at least one item.',
|
||||
}),
|
||||
})
|
||||
|
||||
type DisplayFormValues = z.infer<typeof displayFormSchema>
|
||||
const errors = ref<z.ZodFormattedError<DisplayFormValues> | null>(null)
|
||||
|
||||
async function handleSubmit() {
|
||||
const result = displayFormSchema.safeParse(displayForm.value)
|
||||
if (!result.success) {
|
||||
errors.value = result.error.format()
|
||||
console.log(errors.value)
|
||||
return
|
||||
}
|
||||
|
||||
console.log('Form submitted!', displayForm.value)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<h3 class="text-lg font-medium">
|
||||
Display
|
||||
</h3>
|
||||
<p class="text-sm text-muted-foreground">
|
||||
Turn items on or off to control what's displayed in the app.
|
||||
</p>
|
||||
</div>
|
||||
<Separator />
|
||||
<form @submit.prevent="handleSubmit">
|
||||
<div class="mb-4">
|
||||
<Label for="sidebar" :class="cn('text-md', errors?.items && 'text-destructive')">
|
||||
Sidebar
|
||||
</Label>
|
||||
<span class="text-xs text-muted-foreground">
|
||||
Select the items you want to display in the sidebar.
|
||||
</span>
|
||||
</div>
|
||||
<div v-for="item in items" :key="item.id" class="pb-1">
|
||||
<div class="flex flex-row items-center space-x-3 space-y-0">
|
||||
<Checkbox :id="item.id" :checked="displayForm.items.includes(item.id)" @change="displayForm.items.includes(item.id) ? displayForm.items.splice(displayForm.items.indexOf(item.id), 1) : displayForm.items.push(item.id)" />
|
||||
<Label :for="item.id">{{ item.label }}</Label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex justify-start mt-4">
|
||||
<Button type="submit">
|
||||
Update display
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
</template>
|
||||
176
apps/www/src/examples/forms/components/NotificationsForm.vue
Normal file
176
apps/www/src/examples/forms/components/NotificationsForm.vue
Normal file
|
|
@ -0,0 +1,176 @@
|
|||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import * as z from 'zod'
|
||||
import { cn } from '@/lib/utils'
|
||||
|
||||
import { Label } from '@/lib/registry/new-york/ui/label'
|
||||
import { Separator } from '@/lib/registry/new-york/ui/separator'
|
||||
import { RadioGroup, RadioGroupItem } from '@/lib/registry/new-york/ui/radio-group'
|
||||
import { Switch } from '@/lib/registry/new-york/ui/switch'
|
||||
import { Checkbox } from '@/lib/registry/new-york/ui/checkbox'
|
||||
import { Button } from '@/lib/registry/new-york/ui/button'
|
||||
|
||||
const notificationsForm = ref({
|
||||
type: '',
|
||||
mobile: false,
|
||||
communication_emails: false,
|
||||
social_emails: true,
|
||||
marketing_emails: false,
|
||||
security_emails: true,
|
||||
})
|
||||
|
||||
const notificationsFormSchema = z.object({
|
||||
type: z.enum(['all', 'mentions', 'none'], {
|
||||
required_error: 'You need to select a notification type.',
|
||||
}),
|
||||
mobile: z.boolean().default(false).optional(),
|
||||
communication_emails: z.boolean().default(false).optional(),
|
||||
social_emails: z.boolean().default(false).optional(),
|
||||
marketing_emails: z.boolean().default(false).optional(),
|
||||
security_emails: z.boolean(),
|
||||
})
|
||||
|
||||
type notificationsFormValues = z.infer<typeof notificationsFormSchema>
|
||||
const errors = ref<z.ZodFormattedError<notificationsFormValues> | null>(null)
|
||||
|
||||
async function handleSubmit() {
|
||||
const result = notificationsFormSchema.safeParse(notificationsForm.value)
|
||||
if (!result.success) {
|
||||
errors.value = result.error.format()
|
||||
console.log(errors.value)
|
||||
return
|
||||
}
|
||||
|
||||
console.log('Form submitted!', notificationsForm.value)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<h3 class="text-lg font-medium">
|
||||
Notifications
|
||||
</h3>
|
||||
<p class="text-sm text-muted-foreground">
|
||||
Configure how you receive notifications.
|
||||
</p>
|
||||
</div>
|
||||
<Separator />
|
||||
<form class="space-y-8" @submit.prevent="handleSubmit">
|
||||
<div class="grid gap-2">
|
||||
<Label for="font" :class="cn('text-sm', errors?.type && 'text-destructive')">
|
||||
Notify me about...
|
||||
</Label>
|
||||
<RadioGroup
|
||||
v-model="notificationsForm.type"
|
||||
default-value="all"
|
||||
class="flex flex-col space-y-1"
|
||||
>
|
||||
<div class="flex items-center space-x-3 space-y-0">
|
||||
<RadioGroupItem id="all" value="all" />
|
||||
<Label for="all">All new messages</Label>
|
||||
</div>
|
||||
<div class="flex items-center space-x-3 space-y-0">
|
||||
<RadioGroupItem id="mentions" value="mentions" />
|
||||
<Label for="mentions">Direct messages and mentions</Label>
|
||||
</div>
|
||||
<div class="flex items-center space-x-3 space-y-0">
|
||||
<RadioGroupItem id="none" value="none" />
|
||||
<Label for="none">Nothing</Label>
|
||||
</div>
|
||||
<div v-if="errors?.type" class="text-sm text-destructive">
|
||||
<span v-for="error in errors.type._errors" :key="error">{{ error }}</span>
|
||||
</div>
|
||||
</RadioGroup>
|
||||
</div>
|
||||
|
||||
<div class="grid gap-2">
|
||||
<h3 class="mb-4 text-lg font-medium">
|
||||
Email Notifications
|
||||
</h3>
|
||||
<div class="space-y-4">
|
||||
<div class="flex flex-row items-center justify-between rounded-lg border p-4">
|
||||
<div class="space-y-0.5">
|
||||
<Label class="text-base" for="communication_emails">
|
||||
Communication emails
|
||||
</Label>
|
||||
<span class="text-xs text-muted-foreground">
|
||||
Receive emails about your account activity.
|
||||
</span>
|
||||
</div>
|
||||
<Switch
|
||||
id="communication_emails"
|
||||
v-model:checked="notificationsForm.communication_emails"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-row items-center justify-between rounded-lg border p-4">
|
||||
<div class="space-y-0.5">
|
||||
<Label class="text-base" for="marketing_emails">
|
||||
Marketing emails
|
||||
</Label>
|
||||
<span class="text-xs text-muted-foreground">
|
||||
Receive emails about new products, features, and more.
|
||||
</span>
|
||||
</div>
|
||||
<Switch
|
||||
id="marketing_emails"
|
||||
v-model:checked="notificationsForm.marketing_emails"
|
||||
/>
|
||||
</div>
|
||||
<div class="flex flex-row items-center justify-between rounded-lg border p-4">
|
||||
<div class="space-y-0.5">
|
||||
<Label class="text-base" for="social_emails">
|
||||
Social emails
|
||||
</Label>
|
||||
<span class="text-xs text-muted-foreground">
|
||||
Receive emails for friend requests, follows, and more.
|
||||
</span>
|
||||
</div>
|
||||
<Switch
|
||||
id="social_emails"
|
||||
v-model:checked="notificationsForm.social_emails"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row items-center justify-between rounded-lg border p-4">
|
||||
<div class="space-y-0.5">
|
||||
<Label class="text-base" for="security_emails">
|
||||
Security emails
|
||||
</Label>
|
||||
<span class="text-xs text-muted-foreground">
|
||||
Receive emails about your account activity and security.
|
||||
</span>
|
||||
</div>
|
||||
<Switch
|
||||
id="security_emails"
|
||||
v-model:checked="notificationsForm.security_emails"
|
||||
disabled
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid gap-2">
|
||||
<div class="flex flex-row items-start space-x-3 space-y-0">
|
||||
<Checkbox
|
||||
id="mobile"
|
||||
v-model:checked="notificationsForm.mobile"
|
||||
/>
|
||||
<div>
|
||||
<Label for="mobile">
|
||||
Use different settings for my mobile devices
|
||||
</Label>
|
||||
<span class="text-xs text-muted-foreground">
|
||||
You can manage your mobile notifications in the {{ " " }}
|
||||
<a href="/examples/forms">mobile settings</a> page.
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-start">
|
||||
<Button type="submit">
|
||||
Update notifications
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
</template>
|
||||
152
apps/www/src/examples/forms/components/ProfileForm.vue
Normal file
152
apps/www/src/examples/forms/components/ProfileForm.vue
Normal file
|
|
@ -0,0 +1,152 @@
|
|||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import * as z from 'zod'
|
||||
import { cn } from '@/lib/utils'
|
||||
|
||||
import { Input } from '@/lib/registry/new-york/ui/input'
|
||||
import { Label } from '@/lib/registry/new-york/ui/label'
|
||||
import { Separator } from '@/lib/registry/new-york/ui/separator'
|
||||
import { Textarea } from '@/lib/registry/new-york/ui/textarea'
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectGroup,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from '@/lib/registry/new-york/ui/select'
|
||||
import { Button } from '@/lib/registry/new-york/ui/button'
|
||||
|
||||
const verifiedEmails = ref(['m@example.com', 'm@google.com', 'm@support.com'])
|
||||
|
||||
const profileForm = ref({
|
||||
username: '',
|
||||
email: '',
|
||||
bio: 'I own a computer.',
|
||||
urls: [
|
||||
{ value: 'https://shadcn.com' },
|
||||
{ value: 'http://twitter.com/shadcn' },
|
||||
],
|
||||
})
|
||||
|
||||
const profileFormSchema = z.object({
|
||||
username: z
|
||||
.string()
|
||||
.min(2, {
|
||||
message: 'Username must be at least 2 characters.',
|
||||
})
|
||||
.max(30, {
|
||||
message: 'Username must not be longer than 30 characters.',
|
||||
}),
|
||||
email: z
|
||||
.string({
|
||||
required_error: 'Please select an email to display.',
|
||||
})
|
||||
.email(),
|
||||
bio: z.string().max(160, { message: 'Bio must not be longer than 160 characters.' }).min(4, { message: 'Bio must be at least 2 characters.' }),
|
||||
urls: z
|
||||
.array(
|
||||
z.object({
|
||||
value: z.string().url({ message: 'Please enter a valid URL.' }),
|
||||
}),
|
||||
)
|
||||
.optional(),
|
||||
})
|
||||
|
||||
type ProfileFormValues = z.infer<typeof profileFormSchema>
|
||||
const errors = ref<z.ZodFormattedError<ProfileFormValues> | null>(null)
|
||||
|
||||
async function handleSubmit() {
|
||||
const result = profileFormSchema.safeParse(profileForm.value)
|
||||
if (!result.success) {
|
||||
errors.value = result.error.format()
|
||||
return
|
||||
}
|
||||
errors.value = null
|
||||
console.log('Form submitted!')
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<h3 class="text-lg font-medium">
|
||||
Profile
|
||||
</h3>
|
||||
<p class="text-sm text-muted-foreground">
|
||||
This is how others will see you on the site.
|
||||
</p>
|
||||
</div>
|
||||
<Separator />
|
||||
<form class="space-y-8" @submit.prevent="handleSubmit">
|
||||
<div class="grid gap-2">
|
||||
<Label for="username" :class="cn('text-sm', errors?.username && 'text-destructive')">
|
||||
Username
|
||||
</Label>
|
||||
<Input id="username" v-model="profileForm.username" placeholder="shadcn" />
|
||||
<span class="text-muted-foreground text-sm">
|
||||
This is your public display name. It can be your real name or a pseudonym. You can only change this once every 30 days.
|
||||
</span>
|
||||
<div v-if="errors?.username" class="text-sm text-destructive">
|
||||
<span v-for="error in errors.username._errors" :key="error">{{ error }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid gap-2">
|
||||
<Label for="email" :class="cn('text-sm', errors?.email && 'text-destructive')">
|
||||
Email
|
||||
</Label>
|
||||
<Select id="email" v-model="profileForm.email">
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Select an email" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectGroup>
|
||||
<SelectItem v-for="email in verifiedEmails" :key="email" :value="email">
|
||||
{{ email }}
|
||||
</SelectItem>
|
||||
</SelectGroup>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<span class="text-muted-foreground text-sm">
|
||||
You can manage verified email addresses in your email settings.
|
||||
</span>
|
||||
<div v-if="errors?.email" class="text-sm text-destructive">
|
||||
<span v-for="error in errors.email._errors" :key="error">{{ error }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid gap-2">
|
||||
<Label for="bio" :class="cn('text-sm', errors?.bio && 'text-destructive')">
|
||||
Bio
|
||||
</Label>
|
||||
<Textarea id="bio" v-model="profileForm.bio" placeholder="Tell us about yourself." />
|
||||
<span class="text-muted-foreground text-sm">
|
||||
You can @mention other users and organizations to link to them.
|
||||
</span>
|
||||
<div v-if="errors?.bio" class="text-sm text-destructive">
|
||||
<span v-for="error in errors.bio._errors" :key="error">{{ error }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid gap-2">
|
||||
<Label for="urls" :class="cn('text-sm', errors?.urls && 'text-destructive')">
|
||||
URLs
|
||||
</Label>
|
||||
<Input v-for="(url, index) in profileForm.urls" id="urls" :key="index" v-model="url.value" />
|
||||
<div v-if="errors?.urls" class="text-sm text-destructive">
|
||||
<span v-for="error in errors.urls._errors" :key="error">{{ error }}</span>
|
||||
</div>
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
size="sm"
|
||||
class="text-xs w-20 mt-2"
|
||||
@click="profileForm.urls?.push({ value: '' })"
|
||||
>
|
||||
Add URL
|
||||
</Button>
|
||||
</div>
|
||||
<div class="flex justify-start">
|
||||
<Button type="submit">
|
||||
Update profile
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
</template>
|
||||
53
apps/www/src/examples/forms/components/SidebarNav.vue
Normal file
53
apps/www/src/examples/forms/components/SidebarNav.vue
Normal file
|
|
@ -0,0 +1,53 @@
|
|||
<script setup lang="ts">
|
||||
import { useRoute } from 'vitepress'
|
||||
import { cn } from '@/lib/utils'
|
||||
import { Button } from '@/lib/registry/new-york/ui/button'
|
||||
|
||||
interface Item {
|
||||
title: string
|
||||
href: string
|
||||
}
|
||||
|
||||
const $route = useRoute()
|
||||
|
||||
const sidebarNavItems: Item[] = [
|
||||
{
|
||||
title: 'Profile',
|
||||
href: '/examples/forms/forms',
|
||||
},
|
||||
{
|
||||
title: 'Account',
|
||||
href: '/examples/forms/account',
|
||||
},
|
||||
{
|
||||
title: 'Appearance',
|
||||
href: '/examples/forms/appearance',
|
||||
},
|
||||
{
|
||||
title: 'Notifications',
|
||||
href: '/examples/forms/notifications',
|
||||
},
|
||||
{
|
||||
title: 'Display',
|
||||
href: '/examples/forms/display',
|
||||
},
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<nav class="flex space-x-2 lg:flex-col lg:space-x-0 lg:space-y-1">
|
||||
<Button
|
||||
v-for="item in sidebarNavItems"
|
||||
:key="item.title"
|
||||
as="a"
|
||||
:href="item.href"
|
||||
variant="ghost"
|
||||
:class="cn(
|
||||
'w-full text-left justify-start',
|
||||
$route.path === `${item.href}.html` && 'bg-muted hover:bg-muted',
|
||||
)"
|
||||
>
|
||||
{{ item.title }}
|
||||
</Button>
|
||||
</nav>
|
||||
</template>
|
||||
29
apps/www/src/examples/forms/layouts/FormsLayout.vue
Normal file
29
apps/www/src/examples/forms/layouts/FormsLayout.vue
Normal file
|
|
@ -0,0 +1,29 @@
|
|||
<script setup lang="ts">
|
||||
import SidebarNav from '../components/SidebarNav.vue'
|
||||
import { Separator } from '@/lib/registry/new-york/ui/separator'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="md:hidden" />
|
||||
<div class="hidden space-y-6 p-10 pb-16 md:block">
|
||||
<div class="space-y-0.5">
|
||||
<h2 class="text-2xl font-bold tracking-tight">
|
||||
Settings
|
||||
</h2>
|
||||
<p class="text-muted-foreground">
|
||||
Manage your account settings and set e-mail preferences.
|
||||
</p>
|
||||
</div>
|
||||
<Separator class="my-6" />
|
||||
<div class="flex flex-col space-y-8 lg:flex-row lg:space-x-12 lg:space-y-0">
|
||||
<aside class="-mx-4 lg:w-1/5">
|
||||
<SidebarNav />
|
||||
</aside>
|
||||
<div class="flex-1 lg:max-w-2xl">
|
||||
<div class="space-y-6">
|
||||
<slot />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -1,12 +1,16 @@
|
|||
<script setup lang="ts">
|
||||
import { RadioGroupRoot, type RadioGroupRootProps } from 'radix-vue'
|
||||
import { cn } from '@/lib/utils'
|
||||
import { RadioGroupRoot, type RadioGroupRootEmits, type RadioGroupRootProps } from 'radix-vue'
|
||||
import { cn, useEmitAsProps } from '@/lib/utils'
|
||||
|
||||
const props = defineProps<RadioGroupRootProps & { class?: string }>()
|
||||
|
||||
const emits = defineEmits<RadioGroupRootEmits>()
|
||||
|
||||
const emitsAsProps = useEmitAsProps(emits)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<RadioGroupRoot :class="cn('grid gap-2', props.class)" v-bind="props">
|
||||
<RadioGroupRoot :class="cn('grid gap-2', props.class)" v-bind="{ ...props, ...emitsAsProps }">
|
||||
<slot />
|
||||
</RadioGroupRoot>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -1,12 +1,16 @@
|
|||
<script setup lang="ts">
|
||||
import { RadioGroupRoot, type RadioGroupRootProps } from 'radix-vue'
|
||||
import { cn } from '@/lib/utils'
|
||||
import { RadioGroupRoot, type RadioGroupRootEmits, type RadioGroupRootProps } from 'radix-vue'
|
||||
import { cn, useEmitAsProps } from '@/lib/utils'
|
||||
|
||||
const props = defineProps<RadioGroupRootProps & { class?: string }>()
|
||||
|
||||
const emits = defineEmits<RadioGroupRootEmits>()
|
||||
|
||||
const emitsAsProps = useEmitAsProps(emits)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<RadioGroupRoot :class="cn('grid gap-2', props.class)" v-bind="props">
|
||||
<RadioGroupRoot :class="cn('grid gap-2', props.class)" v-bind="{ ...props, ...emitsAsProps }">
|
||||
<slot />
|
||||
</RadioGroupRoot>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -33,7 +33,7 @@ const emitsAsProps = useEmitAsProps(emits)
|
|||
>
|
||||
<SelectViewport
|
||||
:class="
|
||||
cn('p-1',
|
||||
cn('p-0',
|
||||
position === 'popper'
|
||||
&& 'h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]')"
|
||||
>
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@ const props = withDefaults(
|
|||
v-bind="props"
|
||||
:class="[
|
||||
cn(
|
||||
'flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
|
||||
'flex h-9 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
|
||||
props.class,
|
||||
),
|
||||
props.invalid
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user