diff --git a/apps/www/package.json b/apps/www/package.json index 101941a50..ed29d206e 100644 --- a/apps/www/package.json +++ b/apps/www/package.json @@ -62,7 +62,7 @@ "rimraf": "^4.4.1", "shiki": "^1.1.5", "svelte": "^4.2.11", - "svelte-check": "^3.5.2", + "svelte-check": "^3.6.4", "sveltekit-superforms": "^2.3.0", "tailwind-variants": "^0.1.20", "tailwindcss": "^3.4.1", diff --git a/apps/www/pnpm-lock.yaml b/apps/www/pnpm-lock.yaml index c73bfcfd3..ad7f1cc6c 100644 --- a/apps/www/pnpm-lock.yaml +++ b/apps/www/pnpm-lock.yaml @@ -170,8 +170,8 @@ devDependencies: specifier: ^4.2.11 version: 4.2.11 svelte-check: - specifier: ^3.5.2 - version: 3.5.2(postcss-load-config@4.0.1)(postcss@8.4.31)(svelte@4.2.11) + specifier: ^3.6.4 + version: 3.6.4(postcss-load-config@4.0.1)(postcss@8.4.31)(svelte@4.2.11) sveltekit-superforms: specifier: ^2.3.0 version: 2.3.0(@sveltejs/kit@1.27.1)(@types/json-schema@7.0.15)(esbuild-runner@2.2.2)(esbuild@0.18.20)(svelte@4.2.11) @@ -2975,17 +2975,6 @@ packages: resolution: {integrity: sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==} dev: true - /fast-glob@3.2.12: - resolution: {integrity: sha512-DVj4CQIYYow0BlaelwK1pHl5n5cRSJfM60UA0zK891sVInoPri2Ekj7+e1CT3/3qxXenpI+nBBmQAcJPJgaj4w==} - engines: {node: '>=8.6.0'} - dependencies: - '@nodelib/fs.stat': 2.0.5 - '@nodelib/fs.walk': 1.2.8 - glob-parent: 5.1.2 - merge2: 1.4.1 - micromatch: 4.0.5 - dev: true - /fast-glob@3.3.1: resolution: {integrity: sha512-kNFPyjhh5cKjrUltxs+wFx+ZkbRaxxmZ+X0ZU31SOsxCEtP9VPgtq2teZw1DebupL5GmDaNQ6yKMMVcM41iqDg==} engines: {node: '>=8.6.0'} @@ -3723,13 +3712,6 @@ packages: svelte: 4.2.11 dev: false - /magic-string@0.27.0: - resolution: {integrity: sha512-8UnnX2PeRAPZuN12svgR9j7M1uWMovg/CEnIwIG0LFkXSJJe4PdfUGiTGl8V9bsBHFUtfVINcSyYxd7q+kx9fA==} - engines: {node: '>=12'} - dependencies: - '@jridgewell/sourcemap-codec': 1.4.15 - dev: true - /magic-string@0.30.5: resolution: {integrity: sha512-7xlpfBaQaP/T6Vh8MO/EqXSW5En6INHEvEXQiuff7Gku0PWjU3uf6w/j9o7O+SpB5fOAkrI5HeoNgwjEO0pFsA==} engines: {node: '>=12'} @@ -5210,20 +5192,20 @@ packages: resolution: {integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==} engines: {node: '>= 0.4'} - /svelte-check@3.5.2(postcss-load-config@4.0.1)(postcss@8.4.31)(svelte@4.2.11): - resolution: {integrity: sha512-5a/YWbiH4c+AqAUP+0VneiV5bP8YOk9JL3jwvN+k2PEPLgpu85bjQc5eE67+eIZBBwUEJzmO3I92OqKcqbp3fw==} + /svelte-check@3.6.4(postcss-load-config@4.0.1)(postcss@8.4.31)(svelte@4.2.11): + resolution: {integrity: sha512-mY/dqucqm46p72M8yZmn81WPZx9mN6uuw8UVfR3ZKQeLxQg5HDGO3HHm5AZuWZPYNMLJ+TRMn+TeN53HfQ/vsw==} hasBin: true peerDependencies: - svelte: ^3.55.0 || ^4.0.0-next.0 || ^4.0.0 + svelte: ^3.55.0 || ^4.0.0-next.0 || ^4.0.0 || ^5.0.0-next.0 dependencies: '@jridgewell/trace-mapping': 0.3.18 chokidar: 3.5.3 - fast-glob: 3.2.12 + fast-glob: 3.3.1 import-fresh: 3.3.0 picocolors: 1.0.0 sade: 1.8.1 svelte: 4.2.11 - svelte-preprocess: 5.0.4(postcss-load-config@4.0.1)(postcss@8.4.31)(svelte@4.2.11)(typescript@5.2.2) + svelte-preprocess: 5.1.3(postcss-load-config@4.0.1)(postcss@8.4.31)(svelte@4.2.11)(typescript@5.2.2) typescript: 5.2.2 transitivePeerDependencies: - '@babel/core' @@ -5301,21 +5283,21 @@ packages: svelte: 4.2.11 dev: false - /svelte-preprocess@5.0.4(postcss-load-config@4.0.1)(postcss@8.4.31)(svelte@4.2.11)(typescript@5.2.2): - resolution: {integrity: sha512-ABia2QegosxOGsVlsSBJvoWeXy1wUKSfF7SWJdTjLAbx/Y3SrVevvvbFNQqrSJw89+lNSsM58SipmZJ5SRi5iw==} - engines: {node: '>= 14.10.0'} + /svelte-preprocess@5.1.3(postcss-load-config@4.0.1)(postcss@8.4.31)(svelte@4.2.11)(typescript@5.2.2): + resolution: {integrity: sha512-xxAkmxGHT+J/GourS5mVJeOXZzne1FR5ljeOUAMXUkfEhkLEllRreXpbl3dIYJlcJRfL1LO1uIAPpBpBfiqGPw==} + engines: {node: '>= 16.0.0', pnpm: ^8.0.0} requiresBuild: true peerDependencies: '@babel/core': ^7.10.2 coffeescript: ^2.5.1 less: ^3.11.3 || ^4.0.0 postcss: ^7 || ^8 - postcss-load-config: ^2.1.0 || ^3.0.0 || ^4.0.0 + postcss-load-config: ^2.1.0 || ^3.0.0 || ^4.0.0 || ^5.0.0 pug: ^3.0.0 sass: ^1.26.8 stylus: ^0.55.0 sugarss: ^2.0.0 || ^3.0.0 || ^4.0.0 - svelte: ^3.23.0 || ^4.0.0-next.0 || ^4.0.0 + svelte: ^3.23.0 || ^4.0.0-next.0 || ^4.0.0 || ^5.0.0-next.0 typescript: '>=3.9.5 || ^4.0.0 || ^5.0.0' peerDependenciesMeta: '@babel/core': @@ -5341,7 +5323,7 @@ packages: dependencies: '@types/pug': 2.0.6 detect-indent: 6.1.0 - magic-string: 0.27.0 + magic-string: 0.30.5 postcss: 8.4.31 postcss-load-config: 4.0.1(postcss@8.4.31) sorcery: 0.11.0 diff --git a/apps/www/src/lib/components/docs/forms/form-preview.svelte b/apps/www/src/lib/components/docs/forms/form-preview.svelte index 4fa777811..e8a705666 100644 --- a/apps/www/src/lib/components/docs/forms/form-preview.svelte +++ b/apps/www/src/lib/components/docs/forms/form-preview.svelte @@ -4,9 +4,9 @@ import type { FormSchema } from "@/registry/default/example/form-demo.svelte"; import DefaultFormDemo from "@/registry/default/example/form-demo.svelte"; import NewYorkFormDemo from "@/registry/new-york/example/form-demo.svelte"; - import type { SuperValidated } from "sveltekit-superforms"; + import type { SuperValidated, Infer } from "sveltekit-superforms"; - export let form: SuperValidated; + export let form: SuperValidated>; diff --git a/apps/www/src/lib/registry/default/example/radio-group-form.svelte b/apps/www/src/lib/registry/default/example/radio-group-form.svelte index c324cf6a1..bfa1e30d4 100644 --- a/apps/www/src/lib/registry/default/example/radio-group-form.svelte +++ b/apps/www/src/lib/registry/default/example/radio-group-form.svelte @@ -12,40 +12,44 @@ - - - - Notify me about... - - - - - - - - - - - - - - - - - +
+ + Notify me about... + +
+ + + All new messages + +
+
+ + + Direction messages and mentions + +
+
+ + + Nothing + +
+ + + Submit - +
diff --git a/apps/www/src/lib/registry/default/example/switch-form.svelte b/apps/www/src/lib/registry/default/example/switch-form.svelte index 5e963272b..78826d9f2 100644 --- a/apps/www/src/lib/registry/default/example/switch-form.svelte +++ b/apps/www/src/lib/registry/default/example/switch-form.svelte @@ -10,44 +10,60 @@ - +
Email Notifications
- - + +
Marketing emails Receive emails about new products, features, and more.
- - + + - - + +
Security emails Receive emails about your account security.
- - + +
Submit - +
diff --git a/apps/www/src/lib/registry/new-york/ui/super-form/form-description.svelte b/apps/www/src/lib/registry/new-york/ui/super-form/form-description.svelte deleted file mode 100644 index 68ff75148..000000000 --- a/apps/www/src/lib/registry/new-york/ui/super-form/form-description.svelte +++ /dev/null @@ -1,17 +0,0 @@ - - -

- -

diff --git a/apps/www/src/lib/registry/new-york/ui/super-form/form-field.svelte b/apps/www/src/lib/registry/new-york/ui/super-form/form-field.svelte deleted file mode 100644 index 964452eae..000000000 --- a/apps/www/src/lib/registry/new-york/ui/super-form/form-field.svelte +++ /dev/null @@ -1,40 +0,0 @@ - - -
- -
diff --git a/apps/www/src/lib/registry/new-york/ui/super-form/form-label.svelte b/apps/www/src/lib/registry/new-york/ui/super-form/form-label.svelte deleted file mode 100644 index 7adf3c4aa..000000000 --- a/apps/www/src/lib/registry/new-york/ui/super-form/form-label.svelte +++ /dev/null @@ -1,14 +0,0 @@ - - - diff --git a/apps/www/src/lib/registry/new-york/ui/super-form/form-message.svelte b/apps/www/src/lib/registry/new-york/ui/super-form/form-message.svelte deleted file mode 100644 index f83ae601c..000000000 --- a/apps/www/src/lib/registry/new-york/ui/super-form/form-message.svelte +++ /dev/null @@ -1,15 +0,0 @@ - - -{#if $errors} -

- {$errors} -

-{/if} diff --git a/apps/www/src/lib/registry/new-york/ui/super-form/form.svelte b/apps/www/src/lib/registry/new-york/ui/super-form/form.svelte deleted file mode 100644 index 6fbbc8703..000000000 --- a/apps/www/src/lib/registry/new-york/ui/super-form/form.svelte +++ /dev/null @@ -1,41 +0,0 @@ - - - - -
- - diff --git a/apps/www/src/lib/registry/new-york/ui/super-form/index.ts b/apps/www/src/lib/registry/new-york/ui/super-form/index.ts deleted file mode 100644 index 5777e1958..000000000 --- a/apps/www/src/lib/registry/new-york/ui/super-form/index.ts +++ /dev/null @@ -1,72 +0,0 @@ -import Root from "./form.svelte"; -import Description from "./form-description.svelte"; -import Field from "./form-field.svelte"; -import Label from "./form-label.svelte"; -import Message from "./form-message.svelte"; - -import { setContext } from "svelte"; -import type { FieldAttrs, Form, FormFieldContext, FormStores } from "./types"; -import { formFieldProxy } from "sveltekit-superforms/client"; -import type { AnyZodObject, z } from "zod"; - -import type { FormPathLeaves, UnwrapEffects, ZodValidation } from "sveltekit-superforms"; - -export const FORM_CONTROL_CONTEXT = "FormFieldControl"; -export const FORM_FIELD_CONTEXT = "FormField"; - -export function createFormField< - T extends ZodValidation, - Path extends FormPathLeaves>> ->( - form: Form, - name: Path -): { - stores: FormStores; - getFieldAttrs: (val: T, errors: string[] | undefined) => FieldAttrs; -} { - const id = Math.random().toString(36).slice(2); - const stores = formFieldProxy(form.form, name); - const { errors } = stores; - - const context: FormFieldContext = { - formItemId: id, - formDescriptionId: `${id}-form-item-description`, - formMessageId: `${id}-form-item-message`, - name, - errors, - }; - setContext(FORM_FIELD_CONTEXT, context); - - function getFieldAttrs(val: T, errors: string[] | undefined) { - return { - "aria-invalid": errors ? true : undefined, - "aria-describedby": !errors - ? context.formDescriptionId - : `${context.formDescriptionId} ${context.formMessageId}`, - "data-invalid": errors ? true : undefined, - "data-valid": errors ? undefined : true, - name, - id: context.formItemId, - value: val, - }; - } - - return { - stores, - getFieldAttrs, - }; -} - -export { - Root, - Description, - Field, - Label, - Message, - // - Root as Form, - Description as FormDescription, - Field as FormField, - Label as FormLabel, - Message as FormMessage, -}; diff --git a/apps/www/src/lib/registry/new-york/ui/super-form/types.ts b/apps/www/src/lib/registry/new-york/ui/super-form/types.ts deleted file mode 100644 index 81608486c..000000000 --- a/apps/www/src/lib/registry/new-york/ui/super-form/types.ts +++ /dev/null @@ -1,50 +0,0 @@ -import type { Writable } from "svelte/store"; -import type { FormPathLeaves, UnwrapEffects, ZodValidation } from "sveltekit-superforms"; -import type { SuperForm, formFieldProxy } from "sveltekit-superforms/client"; -import type { AnyZodObject, z } from "zod"; - -export type Expand = T extends object - ? T extends infer O - ? { [K in keyof O]: O[K] } - : never - : T; - -export type ExpandDeep = T extends object - ? T extends infer O - ? { [K in keyof O]: ExpandDeep } - : never - : T; - -export type Form> = { - schema: T; - form: SuperForm; -}; - -export type FormValidation = ZodValidation; -export type FormFieldName> = FormPathLeaves>; - -export type FormFieldContext = { - name: string; - formItemId: string; - formDescriptionId: string; - formMessageId: string; - errors: Writable; -}; - -export type FieldAttrs = { - "aria-invalid"?: boolean; - "aria-describedby"?: string; - name: string; - id: string; - value: T; -}; - -export type ControlFieldAttrs = { - control: Omit, "name">; - input: Pick, "value" | "name">; -}; - -export type FormStores< - T extends ZodValidation, - Path extends FormPathLeaves>> -> = ReturnType>; diff --git a/apps/www/src/routes/docs/[...slug]/+page.server.ts b/apps/www/src/routes/docs/[...slug]/+page.server.ts index ae30c6af5..b9d36d755 100644 --- a/apps/www/src/routes/docs/[...slug]/+page.server.ts +++ b/apps/www/src/routes/docs/[...slug]/+page.server.ts @@ -1,4 +1,4 @@ -import { superValidate } from "sveltekit-superforms/server"; +import { superValidate } from "sveltekit-superforms"; import type { Actions, PageServerLoad, RequestEvent } from "./$types"; import { formSchema } from "@/registry/default/example/form-demo.svelte"; import { formSchema as checkboxSingleSchema } from "@/registry/default/example/checkbox-form-single.svelte"; @@ -11,17 +11,18 @@ import { formSchema as datePickerFormSchema } from "@/registry/default/example/d import { fail } from "@sveltejs/kit"; import type { AnyZodObject } from "zod"; +import { zod } from "sveltekit-superforms/adapters"; export const load: PageServerLoad = async () => { return { - form: await superValidate(formSchema), - checkboxSingle: await superValidate(checkboxSingleSchema), - radioGroup: await superValidate(radioGroupSchema), - select: await superValidate(selectSchema), - switch: await superValidate(switchSchema), - textarea: await superValidate(textareaSchema), - combobox: await superValidate(comboboxFormSchema), - datePicker: await superValidate(datePickerFormSchema), + form: await superValidate(zod(formSchema)), + checkboxSingle: await superValidate(zod(checkboxSingleSchema)), + radioGroup: await superValidate(zod(radioGroupSchema)), + select: await superValidate(zod(selectSchema)), + switch: await superValidate(zod(switchSchema)), + textarea: await superValidate(zod(textareaSchema)), + combobox: await superValidate(zod(comboboxFormSchema)), + datePicker: await superValidate(zod(datePickerFormSchema)), }; }; @@ -37,7 +38,7 @@ export const actions: Actions = { }; async function handleForm(event: RequestEvent, schema: AnyZodObject) { - const form = await superValidate(event, schema); + const form = await superValidate(event, zod(schema)); if (!form.valid) { return fail(400, { form, diff --git a/apps/www/src/routes/examples/forms/+layout.svelte b/apps/www/src/routes/examples/forms/+layout.svelte index 6581f16a6..708658b2d 100644 --- a/apps/www/src/routes/examples/forms/+layout.svelte +++ b/apps/www/src/routes/examples/forms/+layout.svelte @@ -19,6 +19,10 @@ title: "Notifications", href: "/examples/forms/notifications", }, + { + title: "Display", + href: "/examples/forms/display", + }, ]; diff --git a/apps/www/src/routes/examples/forms/+page.server.ts b/apps/www/src/routes/examples/forms/+page.server.ts index 51c7682d2..cb9625f2b 100644 --- a/apps/www/src/routes/examples/forms/+page.server.ts +++ b/apps/www/src/routes/examples/forms/+page.server.ts @@ -1,17 +1,18 @@ import type { PageServerLoad } from "./$types"; -import { superValidate } from "sveltekit-superforms/server"; +import { superValidate } from "sveltekit-superforms"; +import { zod } from "sveltekit-superforms/adapters"; import { profileFormSchema } from "./profile-form.svelte"; import { fail, type Actions } from "@sveltejs/kit"; export const load: PageServerLoad = async () => { return { - form: await superValidate(profileFormSchema), + form: await superValidate(zod(profileFormSchema)), }; }; export const actions: Actions = { default: async (event) => { - const form = await superValidate(event, profileFormSchema); + const form = await superValidate(event, zod(profileFormSchema)); if (!form.valid) { return fail(400, { form, diff --git a/apps/www/src/routes/examples/forms/account/+page.server.ts b/apps/www/src/routes/examples/forms/account/+page.server.ts index 24b05e341..1eaf6956e 100644 --- a/apps/www/src/routes/examples/forms/account/+page.server.ts +++ b/apps/www/src/routes/examples/forms/account/+page.server.ts @@ -1,18 +1,20 @@ -import { superValidate } from "sveltekit-superforms/server"; +import { superValidate } from "sveltekit-superforms"; +import { zod } from "sveltekit-superforms/adapters"; import type { PageServerLoad } from "./$types"; import { accountFormSchema } from "./account-form.svelte"; import { fail, type Actions } from "@sveltejs/kit"; export const load: PageServerLoad = async () => { return { - form: await superValidate(accountFormSchema), + form: await superValidate(zod(accountFormSchema)), }; }; export const actions: Actions = { default: async (event) => { - const form = await superValidate(event, accountFormSchema); + const form = await superValidate(event, zod(accountFormSchema)); if (!form.valid) { + console.log(form); return fail(400, { form, }); diff --git a/apps/www/src/routes/examples/forms/account/account-form.svelte b/apps/www/src/routes/examples/forms/account/account-form.svelte index 5feb96f31..02e0c396a 100644 --- a/apps/www/src/routes/examples/forms/account/account-form.svelte +++ b/apps/www/src/routes/examples/forms/account/account-form.svelte @@ -1,19 +1,19 @@ - - - +
+ + Name - - - This is the name that will be displayed on your profile and in emails. - - - - - - - {@const { value } = attrs.input} - Language - - + + + + + + Date of Birth + + + + {dobValue ? df.format(dobValue.toDate(getLocalTimeZone())) : "Pick a date"} + + + { + const currDateObj = currDate.toDate(getLocalTimeZone()); + const today = new Date(); + today.setHours(0, 0, 0, 0); + + if (currDateObj > today || currDate.year < 1900) return true; + + return false; + }} + onValueChange={(value) => { + if (value === undefined) { + $formData.dob = undefined; + validate("dob"); + return; + } + $formData.dob = value.toDate(getLocalTimeZone()).toISOString(); + validate("dob"); + }} + /> + + + + + + + + + + + Language + - - {#each Object.entries(languages) as [value, lang]} - - {lang} - - {/each} - - - - This is the language that will be used in the dashboard. - - - - + {...attrs} + > + {languages.find((lang) => lang.value === $formData.language)?.label || + "Select a language"} + + + + + + + + No language found. + + {#each languages as language} + { + $formData.language = language.value; + validate("language"); + }} + > + + {language.label} + + {/each} + + + + + + Update account - + + +{#if browser} + +{/if} diff --git a/apps/www/src/routes/examples/forms/appearance/+page.server.ts b/apps/www/src/routes/examples/forms/appearance/+page.server.ts index 945abb50f..dc249bceb 100644 --- a/apps/www/src/routes/examples/forms/appearance/+page.server.ts +++ b/apps/www/src/routes/examples/forms/appearance/+page.server.ts @@ -1,17 +1,18 @@ -import { superValidate } from "sveltekit-superforms/server"; +import { superValidate } from "sveltekit-superforms"; +import { zod } from "sveltekit-superforms/adapters"; import type { PageServerLoad } from "../$types"; import { appearanceFormSchema } from "./appearance-form.svelte"; import { fail, type Actions } from "@sveltejs/kit"; export const load: PageServerLoad = async () => { return { - form: await superValidate(appearanceFormSchema), + form: await superValidate(zod(appearanceFormSchema)), }; }; export const actions: Actions = { default: async (event) => { - const form = await superValidate(event, appearanceFormSchema); + const form = await superValidate(event, zod(appearanceFormSchema)); if (!form.valid) { return fail(400, { form, diff --git a/apps/www/src/routes/examples/forms/appearance/appearance-form.svelte b/apps/www/src/routes/examples/forms/appearance/appearance-form.svelte index b5d229493..a1f2b780e 100644 --- a/apps/www/src/routes/examples/forms/appearance/appearance-form.svelte +++ b/apps/www/src/routes/examples/forms/appearance/appearance-form.svelte @@ -1,5 +1,4 @@ - - - +
+ + Font -
- +
+ +
- Set the font you want to use in the dashboard. - - - - - - Theme - Select the theme for the dashboard. - - - + + Theme + Select the theme for the dashboard. + + + + - + + - - - + + + + Update preferences - + + +{#if browser} + +{/if} diff --git a/apps/www/src/routes/examples/forms/display/+page.server.ts b/apps/www/src/routes/examples/forms/display/+page.server.ts new file mode 100644 index 000000000..953ee9b5b --- /dev/null +++ b/apps/www/src/routes/examples/forms/display/+page.server.ts @@ -0,0 +1,25 @@ +import type { PageServerLoad } from "./$types"; +import { superValidate } from "sveltekit-superforms"; +import { zod } from "sveltekit-superforms/adapters"; +import { displayFormSchema } from "./display-form.svelte"; +import { fail, type Actions } from "@sveltejs/kit"; + +export const load: PageServerLoad = async () => { + return { + form: await superValidate(zod(displayFormSchema)), + }; +}; + +export const actions: Actions = { + default: async (event) => { + const form = await superValidate(event, zod(displayFormSchema)); + if (!form.valid) { + return fail(400, { + form, + }); + } + return { + form, + }; + }, +}; diff --git a/apps/www/src/routes/examples/forms/display/+page.svelte b/apps/www/src/routes/examples/forms/display/+page.svelte new file mode 100644 index 000000000..c233d7b58 --- /dev/null +++ b/apps/www/src/routes/examples/forms/display/+page.svelte @@ -0,0 +1,17 @@ + + +
+
+

Display

+

+ Turn items on or off to control what's displayed in the app. +

+
+ + +
diff --git a/apps/www/src/routes/examples/forms/display/display-form.svelte b/apps/www/src/routes/examples/forms/display/display-form.svelte new file mode 100644 index 000000000..73837504c --- /dev/null +++ b/apps/www/src/routes/examples/forms/display/display-form.svelte @@ -0,0 +1,93 @@ + + + + +
+ +
+ Sidebar + + Select the items you want to display in the sidebar. + +
+
+ {#each items as item} +
+ + { + if (v) { + $formData.items = [...$formData.items, item.id]; + } else { + $formData.items = $formData.items.filter((i) => i !== item.id); + } + }} + /> + + {item.label} + + +
+ + + {/each} + +
+ + Update display +
+ +{#if browser} + +{/if} diff --git a/apps/www/src/routes/examples/forms/notifications/+page.server.ts b/apps/www/src/routes/examples/forms/notifications/+page.server.ts index 50a0ad3ae..cd07e30c6 100644 --- a/apps/www/src/routes/examples/forms/notifications/+page.server.ts +++ b/apps/www/src/routes/examples/forms/notifications/+page.server.ts @@ -1,17 +1,18 @@ -import { superValidate } from "sveltekit-superforms/server"; +import { superValidate } from "sveltekit-superforms"; +import { zod } from "sveltekit-superforms/adapters"; import type { PageServerLoad } from "../$types"; import { notificationsFormSchema } from "./notifications-form.svelte"; import { fail, type Actions } from "@sveltejs/kit"; export const load: PageServerLoad = async () => { return { - form: await superValidate(notificationsFormSchema), + form: await superValidate(zod(notificationsFormSchema)), }; }; export const actions: Actions = { default: async (event) => { - const form = await superValidate(event, notificationsFormSchema); + const form = await superValidate(event, zod(notificationsFormSchema)); if (!form.valid) { return fail(400, { form, diff --git a/apps/www/src/routes/examples/forms/notifications/notifications-form.svelte b/apps/www/src/routes/examples/forms/notifications/notifications-form.svelte index 5bd7bc1cb..f37735cb8 100644 --- a/apps/www/src/routes/examples/forms/notifications/notifications-form.svelte +++ b/apps/www/src/routes/examples/forms/notifications/notifications-form.svelte @@ -14,100 +14,132 @@ - - - - Notify me about... - +
+ + Notify me about... + +
- - + + + All new messages +
- - + + + Direct messages and mentions +
- - + + + Nothing +
- - - + + + +

Email Notifications

- - + +
Communication emails Receive emails about your account activity.
- - + + - - + +
Marketing emails Receive emails about new products, features, and more.
- - + + - - + +
Social emails Receive emails for friend requests, follows, and more.
- - + + - - + +
Security emails Receive emails about your account activity and security.
- - + +
- - - + + +
Use different settings for my mobile devices - You can manage your mobile notifications in the{" "}mobile settings page.
- + + Update notifications - +
+ +{#if browser} + +{/if} diff --git a/apps/www/src/routes/examples/forms/profile-form.svelte b/apps/www/src/routes/examples/forms/profile-form.svelte index 7aaed5f13..aef920e8d 100644 --- a/apps/www/src/routes/examples/forms/profile-form.svelte +++ b/apps/www/src/routes/examples/forms/profile-form.svelte @@ -7,82 +7,116 @@ .max(30, "Username must not be longer than 30 characters"), email: z.string({ required_error: "Please select an email to display" }).email(), bio: z.string().min(4).max(160).default("I own a computer."), - website: z - .string() - .url({ message: "Please enter a valid URL." }) - .default("https://shadcn-svelte.com"), + urls: z + .array(z.string().url()) + .default(["https://shadcn.com", "https://twitter.com/shadcn"]), }); export type ProfileFormSchema = typeof profileFormSchema; - - - +
+ + Username - - - This is your public display name. It can be your real name or a pseudonym. You can - only change this once every 30 days. - - - - - - + + + + This is your public display name. It can be your real name or a pseudonym. You can only + change this once every 30 days. + + + + + + Email - - - - m@example.com - - m@google.com - - m@support.com - - - - - You can manage verified email addresses in your email settings. - - - - - - + { + s && ($formData.email = s.value); + }} + > + + + + + + + + + + + + + You can manage verified email addresses in your email settings. + + + + + Bio - - - You can @mention other users and organizations to link to them. - - - - - - - Website - - Your personal website, blog, or portfolio. - - - +