docs: fix checkbox form examples (#785)

huntabyte · Feb 21, 2024 · 2e50bfd · 2e50bfd
1 parent c11d65b
commit 2e50bfd
Show file tree

Hide file tree

Showing 13 changed files with 24 additions and 103 deletions.
diff --git a/.editorconfig b/.editorconfig
diff --git a/.eslintrc.cjs b/.eslintrc.cjs
diff --git a/.prettierignore b/.prettierignore
diff --git a/.prettierrc b/.prettierrc
diff --git a/apps/www/package.json b/apps/www/package.json
@@ -22,9 +22,9 @@
 		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
 		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
 		"test:unit": "vitest",
-		"lint": "prettier --plugin-search-dir . --check . && eslint .",
-		"format": "prettier --plugin-search-dir . --write .",
-		"format:check": "prettier --plugin-search-dir . --check ."
+		"lint": "prettier --check . && eslint .",
+		"format": "prettier --write .",
+		"format:check": "prettier --check ."
 	},
 	"devDependencies": {
 		"@faker-js/faker": "^8.0.2",
@@ -53,8 +53,8 @@
 		"postcss": "^8.4.31",
 		"postcss-load-config": "^4.0.1",
 		"prettier": "^3.1.1",
-		"prettier-plugin-svelte": "^3.1.2",
-		"prettier-plugin-tailwindcss": "^0.5.9",
+		"prettier-plugin-svelte": "^3.2.1",
+		"prettier-plugin-tailwindcss": "^0.5.11",
 		"rehype-pretty-code": "^0.13.0",
 		"rehype-slug": "^6.0.0",
 		"remark-code-import": "^1.2.0",

diff --git a/apps/www/pnpm-lock.yaml b/apps/www/pnpm-lock.yaml
diff --git a/apps/www/src/lib/registry/default/example/checkbox-form-multiple.svelte b/apps/www/src/lib/registry/default/example/checkbox-form-multiple.svelte
@@ -82,10 +82,8 @@
 				{@const checked = $formData.items.includes(item.id)}
 				<div class="flex flex-row items-start space-x-3">
 					<Form.Control let:attrs>
-						<!-- We pull out the name so it doesn't get used on the `Checkbox` underlying checkbox hidden input -->
-						{@const { name, ...rest } = attrs}
 						<Checkbox
-							{...rest}
+							{...attrs}
 							{checked}
 							onCheckedChange={(v) => {
 								if (v) {
@@ -98,8 +96,7 @@
 						<Form.Label class="font-normal">
 							{item.label}
 						</Form.Label>
-						<!-- Custom input since we are not using the standard `boolean` value -->
-						<input hidden type="checkbox" {name} value={item.id} {checked} />
+						<input hidden type="checkbox" name={attrs.name} value={item.id} {checked} />
 					</Form.Control>
 				</div>
 			{/each}

diff --git a/apps/www/src/lib/registry/default/example/checkbox-form-single.svelte b/apps/www/src/lib/registry/default/example/checkbox-form-single.svelte
@@ -46,6 +46,7 @@
 					> page.
 				</Form.Description>
 			</div>
+			<input name={attrs.name} value={$formData.mobile} hidden />
 		</Form.Control>
 	</Form.Field>
 	<Form.Button>Submit</Form.Button>

diff --git a/apps/www/src/lib/registry/new-york/example/checkbox-form-multiple.svelte b/apps/www/src/lib/registry/new-york/example/checkbox-form-multiple.svelte
@@ -81,10 +81,8 @@
 				{@const checked = $formData.items.includes(item.id)}
 				<div class="flex flex-row items-start space-x-3">
 					<Form.Control let:attrs>
-						<!-- We pull out the name so it doesn't get used on the `Checkbox` underlying checkbox hidden input -->
-						{@const { name, ...rest } = attrs}
 						<Checkbox
-							{...rest}
+							{...attrs}
 							{checked}
 							onCheckedChange={(v) => {
 								if (v) {
@@ -97,8 +95,7 @@
 						<Form.Label class="text-sm font-normal">
 							{item.label}
 						</Form.Label>
-						<!-- Custom input since we are not using the standard `boolean` value -->
-						<input hidden type="checkbox" {name} value={item.id} {checked} />
+						<input hidden type="checkbox" name={attrs.name} value={item.id} {checked} />
 					</Form.Control>
 				</div>
 			{/each}

diff --git a/apps/www/src/lib/registry/new-york/example/checkbox-form-single.svelte b/apps/www/src/lib/registry/new-york/example/checkbox-form-single.svelte
@@ -46,6 +46,7 @@
 					> page.
 				</Form.Description>
 			</div>
+			<input name={attrs.name} value={$formData.mobile} hidden />
 		</Form.Control>
 	</Form.Field>
 	<Form.Button>Submit</Form.Button>

diff --git a/apps/www/src/routes/examples/forms/account/account-form.svelte b/apps/www/src/routes/examples/forms/account/account-form.svelte
@@ -140,7 +140,7 @@
 						"Select a language"}
 					<CaretSort class="ml-2 size-4 shrink-0 opacity-50" />
 				</Popover.Trigger>
-				<input hidden bind:value={$formData.language} name={attrs.name} />
+				<input hidden value={$formData.language} name={attrs.name} />
 			</Form.Control>
 			<Popover.Content class="w-[200px] p-0">
 				<Command.Root>

diff --git a/apps/www/src/routes/examples/forms/appearance/appearance-form.svelte b/apps/www/src/routes/examples/forms/appearance/appearance-form.svelte
@@ -20,7 +20,7 @@
 	import SuperDebug, { type SuperValidated, type Infer, superForm } from "sveltekit-superforms";
 	import * as Form from "@/registry/new-york/ui/form";
 	import * as RadioGroup from "@/registry/new-york/ui/radio-group";
-	import Label from "@/registry/new-york/ui/label/label.svelte";
+	import { Label } from "@/registry/new-york/ui/label";
 	import { zodClient } from "sveltekit-superforms/adapters";
 	import { cn } from "$lib/utils";
 	import { buttonVariants } from "@/registry/new-york/ui/button";

diff --git a/apps/www/src/routes/examples/forms/notifications/notifications-form.svelte b/apps/www/src/routes/examples/forms/notifications/notifications-form.svelte
@@ -19,7 +19,7 @@
 	import * as RadioGroup from "@/registry/new-york/ui/radio-group";
 	import { Switch } from "@/registry/new-york/ui/switch";
 	import { zodClient } from "sveltekit-superforms/adapters";
-	import Checkbox from "@/registry/new-york/ui/checkbox/checkbox.svelte";
+	import { Checkbox } from "@/registry/new-york/ui/checkbox";
 	import { browser } from "$app/environment";
 
 	export let data: SuperValidated<Infer<NotificationFormSchema>>;
@@ -134,7 +134,7 @@
 					> page.
 				</Form.Description>
 			</div>
-			<input name={attrs.name} bind:value={$formData.mobile} hidden />
+			<input name={attrs.name} value={$formData.mobile} hidden />
 		</Form.Control>
 	</Form.Field>
 	<Form.Button>Update notifications</Form.Button>