Fix: form submit (#76)

* fix: worker template extension form submit

* bump @kksh/api

* update api package version

.changeset/config.json

@@ -9,11 +9,13 @@
 	"updateInternalDependencies": "patch",
 	"ignore": [
 		"jarvis",
+		"form-view",
 		"@kksh/desktop",
 		"@kksh/supabase",
 		"@kksh/utils",
 		"@kksh/extension",
 		"@kksh/schema",
-		"@kksh/supabase"
+		"@kksh/supabase",
+		"@kksh/ui"
 	]
 }

apps/cli/CHANGELOG.md

@@ -1,5 +1,12 @@
 # kksh
 
+## 0.0.30
+
+### Patch Changes
+
+- Updated dependencies
+  - @kksh/api@0.0.53
+
 ## 0.0.29
 
 ### Patch Changes

apps/cli/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "kksh",
 	"module": "dist/cli.js",
-	"version": "0.0.29",
+	"version": "0.0.30",
 	"type": "module",
 	"bin": {
 		"kksh": "./dist/cli.js",

apps/create-kunkun/CHANGELOG.md

@@ -1,5 +1,12 @@
 # create-kunkun
 
+## 0.1.40
+
+### Patch Changes
+
+- Updated dependencies
+  - @kksh/api@0.0.53
+
 ## 0.1.38
 
 ### Patch Changes

apps/create-kunkun/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "create-kunkun",
 	"type": "module",
-	"version": "0.1.39",
+	"version": "0.1.40",
 	"bin": {
 		"create-kunkun": "dist/index.mjs"
 	},

apps/desktop/src/routes/app/extension/ui-worker/+page.svelte

@@ -359,7 +359,14 @@
 		{/snippet}
 	</Templates.ListView>
 {:else if loaded && formViewContent !== undefined}
-	<Templates.FormView {formViewContent} onGoBack={goBack} />
+	<Templates.FormView
+		{formViewContent}
+		onGoBack={goBack}
+		onSubmit={(formData: Record<string, string | number | boolean>) => {
+			console.log("formData", formData)
+			workerAPI?.onFormSubmit(formData)
+		}}
+	/>
 {:else if loaded && markdownViewContent !== undefined}
 	<Templates.MarkdownView {markdownViewContent} onGoBack={goBack} />
 {/if}

packages/api/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @kksh/api
 
+## 0.0.53
+
+### Patch Changes
+
+- Add Show Debug option for worker template form view
+
 ## 0.0.48
 
 ### Patch Changes

packages/api/jsr.json

@@ -1,7 +1,7 @@
 {
 	"$schema": "https://jsr.io/schema/config-file.v1.json",
 	"name": "@kunkun/api",
-	"version": "0.0.52",
+	"version": "0.0.53",
 	"license": "MIT",
 	"exports": {
 		".": "./src/index.ts",
@@ -17,6 +17,6 @@
 		"./dev": "./src/dev/index.ts",
 		"./events": "./src/events.ts",
 		"./extensions/jsr": "./src/extensions/jsr/index.ts"
-	},
+	},	
 	"imports": {}
 }

packages/api/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@kksh/api",
-	"version": "0.0.52",
+	"version": "0.0.53",
 	"type": "module",
 	"exports": {
 		".": "./src/index.ts",

packages/api/src/ui/worker/components/form-view.ts

@@ -137,6 +137,7 @@ export class ArrayField
 export class Form implements IComponent<FormSchema.Form> {
 	nodeName: FormNodeName = FormNodeNameEnum.Form
 	fields: (AllFormFields | Form)[]
+	showFormDataDebug?: boolean
 	key: string
 	title?: string
 	description?: string
@@ -148,6 +149,7 @@ export class Form implements IComponent<FormSchema.Form> {
 		this.title = model.title
 		this.description = model.description
 		this.submitBtnText = model.submitBtnText
+		this.showFormDataDebug = model.showFormDataDebug
 	}
 
 	toModel(): FormSchema.Form {

packages/api/src/ui/worker/schema/form.ts

@@ -136,6 +136,7 @@ export type FormField = InferOutput<typeof FormField>
 export const Form: GenericSchema<Form> = object({
 	nodeName: FormNodeName,
 	key: string(),
+	showFormDataDebug: optional(boolean()),
 	fields: array(union([lazy(() => Form), FormField])),
 	title: optional(string()),
 	description: optional(string()),
@@ -144,6 +145,7 @@ export const Form: GenericSchema<Form> = object({
 export type Form = {
 	nodeName: FormNodeName
 	title?: string
+	showFormDataDebug?: boolean
 	description?: string
 	submitBtnText?: string
 	key: string

packages/api/src/version.ts

@@ -21,7 +21,7 @@ export const breakingChangesVersionCheckpoints = [
 const checkpointVersions = breakingChangesVersionCheckpoints.map((c) => c.version)
 const sortedCheckpointVersions = sort(checkpointVersions)
 
-export const version = "0.0.52"
+export const version = "0.0.53"
 
 export function isVersionBetween(v: string, start: string, end: string) {
 	const vCleaned = clean(v)

packages/extensions/demo-worker-template-ext/CHANGELOG.md

@@ -1,5 +1,12 @@
 # demo-template-extension
 
+## 0.0.6
+
+### Patch Changes
+
+- Updated dependencies
+  - @kksh/api@0.0.53
+
 ## 0.0.5
 
 ### Patch Changes

packages/extensions/demo-worker-template-ext/package.json

@@ -1,7 +1,7 @@
 {
 	"$schema": "../../schema/manifest-json-schema.json",
 	"name": "demo-template-extension",
-	"version": "0.0.5",
+	"version": "0.0.6",
 	"type": "module",
 	"license": "MIT",
 	"kunkun": {

packages/extensions/ext-sveltekit-exp/CHANGELOG.md

@@ -1,5 +1,12 @@
 # template-ext-sveltekit
 
+## 0.0.6
+
+### Patch Changes
+
+- Updated dependencies
+  - @kksh/api@0.0.53
+
 ## 0.0.5
 
 ### Patch Changes

packages/extensions/ext-sveltekit-exp/package.json

@@ -1,7 +1,7 @@
 {
 	"$schema": "https://schema.kunkun.sh",
 	"name": "ext-sveltekit-exp",
-	"version": "0.0.5",
+	"version": "0.0.6",
 	"license": "MIT",
 	"kunkun": {
 		"name": "TODO: Change Display Name",

packages/extensions/form-view/src/index.ts

@@ -25,10 +25,11 @@ class ExtensionTemplate extends WorkerExtension {
 		const markdown = new Markdown(`# Hello World
 <img src="https://github.com/huakunshen.png" />`)
 		// markdown.toModel
-		return ui.render(markdown)
+		// return ui.render(markdown)
 		const form = new Form.Form({
 			title: "Form 1",
 			key: "form1",
+			showFormDataDebug: true,
 			submitBtnText: "Download",
 			fields: [
 				new Form.DateField({

packages/templates/template-ext-headless/CHANGELOG.md

@@ -1,5 +1,12 @@
 # template-ext-worker
 
+## 0.0.5
+
+### Patch Changes
+
+- Updated dependencies
+  - @kksh/api@0.0.53
+
 ## 0.0.4
 
 ### Patch Changes

packages/templates/template-ext-headless/package.json

@@ -1,7 +1,7 @@
 {
 	"$schema": "./node_modules/@kksh/api/dist/schema.json",
 	"name": "template-ext-headless",
-	"version": "0.0.4",
+	"version": "0.0.5",
 	"license": "MIT",
 	"type": "module",
 	"kunkun": {

packages/templates/template-ext-next/CHANGELOG.md

@@ -1,5 +1,12 @@
 # template-ext-next
 
+## 0.1.4
+
+### Patch Changes
+
+- Updated dependencies
+  - @kksh/api@0.0.53
+
 ## 0.1.3
 
 ### Patch Changes

packages/templates/template-ext-next/package.json

@@ -1,7 +1,7 @@
 {
 	"$schema": "./node_modules/@kksh/api/dist/schema.json",
 	"name": "template-ext-next",
-	"version": "0.1.3",
+	"version": "0.1.4",
 	"license": "MIT",
 	"kunkun": {
 		"name": "TODO: Change Display Name",

packages/templates/template-ext-nuxt/CHANGELOG.md

@@ -1,5 +1,12 @@
 # template-ext-nuxt
 
+## 0.0.6
+
+### Patch Changes
+
+- Updated dependencies
+  - @kksh/api@0.0.53
+
 ## 0.0.5
 
 ### Patch Changes

packages/templates/template-ext-nuxt/package.json

@@ -1,7 +1,7 @@
 {
 	"$schema": "./node_modules/@kksh/api/dist/schema.json",
 	"name": "template-ext-nuxt",
-	"version": "0.0.5",
+	"version": "0.0.6",
 	"type": "module",
 	"license": "MIT",
 	"kunkun": {

packages/templates/template-ext-react/CHANGELOG.md

@@ -1,5 +1,12 @@
 # template-ext-react
 
+## 0.0.5
+
+### Patch Changes
+
+- Updated dependencies
+  - @kksh/api@0.0.53
+
 ## 0.0.4
 
 ### Patch Changes

packages/templates/template-ext-react/package.json

@@ -2,7 +2,7 @@
 	"$schema": "./node_modules/@kksh/api/dist/schema.json",
 	"name": "template-ext-react",
 	"license": "MIT",
-	"version": "0.0.4",
+	"version": "0.0.5",
 	"type": "module",
 	"kunkun": {
 		"name": "TODO: Change Display Name",

packages/templates/template-ext-svelte/CHANGELOG.md

@@ -1,5 +1,12 @@
 # template-ext-svelte
 
+## 0.0.5
+
+### Patch Changes
+
+- Updated dependencies
+  - @kksh/api@0.0.53
+
 ## 0.0.4
 
 ### Patch Changes

packages/templates/template-ext-svelte/package.json

@@ -2,7 +2,7 @@
 	"$schema": "./node_modules/@kksh/api/dist/schema.json",
 	"name": "template-ext-svelte",
 	"license": "MIT",
-	"version": "0.0.4",
+	"version": "0.0.5",
 	"type": "module",
 	"kunkun": {
 		"name": "TODO: Change Display Name",

packages/templates/template-ext-sveltekit/CHANGELOG.md

@@ -1,5 +1,12 @@
 # template-ext-sveltekit
 
+## 0.0.6
+
+### Patch Changes
+
+- Updated dependencies
+  - @kksh/api@0.0.53
+
 ## 0.0.5
 
 ### Patch Changes

packages/templates/template-ext-sveltekit/package.json

@@ -1,7 +1,7 @@
 {
 	"$schema": "./node_modules/@kksh/api/dist/schema.json",
 	"name": "template-ext-sveltekit",
-	"version": "0.0.5",
+	"version": "0.0.6",
 	"license": "MIT",
 	"kunkun": {
 		"name": "TODO: Change Display Name",

packages/templates/template-ext-vue/CHANGELOG.md

@@ -1,5 +1,12 @@
 # template-ext-vue
 
+## 0.0.3
+
+### Patch Changes
+
+- Updated dependencies
+  - @kksh/api@0.0.53
+
 ## 0.0.2
 
 ### Patch Changes

packages/templates/template-ext-vue/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "template-ext-vue",
 	"license": "MIT",
-	"version": "0.0.2",
+	"version": "0.0.3",
 	"type": "module",
 	"scripts": {
 		"dev": "vite",

packages/templates/template-ext-worker/CHANGELOG.md

@@ -1,5 +1,12 @@
 # template-ext-worker
 
+## 0.0.5
+
+### Patch Changes
+
+- Updated dependencies
+  - @kksh/api@0.0.53
+
 ## 0.0.4
 
 ### Patch Changes

packages/templates/template-ext-worker/package.json

@@ -1,7 +1,7 @@
 {
 	"$schema": "./node_modules/@kksh/api/dist/schema.json",
 	"name": "template-ext-worker",
-	"version": "0.0.4",
+	"version": "0.0.5",
 	"license": "MIT",
 	"type": "module",
 	"kunkun": {

packages/ui/src/components/common/date/DatePickerWithPreset.svelte

@@ -10,12 +10,16 @@
 
 	let {
 		date = $bindable(),
+		dateValue = $bindable(),
 		class: className,
 		value = $bindable()
-	}: { date?: DateValue; class?: string; value?: string } = $props()
+	}: { date?: Date; dateValue?: DateValue; class?: string; value?: string } = $props()
-	const valueString = $derived(date ? df.format(date.toDate(getLocalTimeZone())) : "")
+	const valueString = $derived(dateValue ? df.format(dateValue.toDate(getLocalTimeZone())) : "")
 	$effect(() => {
-		value = date ? date.toString() : ""
+		value = dateValue ? dateValue.toString() : ""
+		if (dateValue) {
+			date = dateValue?.toDate(getLocalTimeZone())
+		}
 	})
 	const items = [
 		{ value: 0, label: "Today" },
@@ -32,12 +36,12 @@
 				variant: "outline",
 				class: "w-[280px] justify-start text-left font-normal"
 			}),
-			!date && "text-muted-foreground",
+			!dateValue && "text-muted-foreground",
 			className
 		)}
 	>
 		<CalendarIcon class="mr-2 size-4" />
-		{date ? df.format(date.toDate(getLocalTimeZone())) : "Pick a date"}
+		{dateValue ? df.format(dateValue.toDate(getLocalTimeZone())) : "Pick a date"}
 	</Popover.Trigger>
 	<Popover.Content class="flex w-auto flex-col space-y-2 p-2">
 		<Select.Root
@@ -46,7 +50,7 @@
 			controlledValue
 			onValueChange={(v: string) => {
 				if (!v) return
-				date = today(getLocalTimeZone()).add({ days: Number.parseInt(v) })
+				dateValue = today(getLocalTimeZone()).add({ days: Number.parseInt(v) })
 			}}
 		>
 			<Select.Trigger>
@@ -59,7 +63,7 @@
 			</Select.Content>
 		</Select.Root>
 		<div class="rounded-md border">
-			<Calendar.Calendar type="single" bind:value={date} />
+			<Calendar.Calendar type="single" bind:value={dateValue} />
 		</div>
 	</Popover.Content>
 </Popover.Root>

packages/ui/src/components/extension/templates/form-view.svelte

@@ -4,8 +4,15 @@
 	import { ArrowLeftIcon } from "lucide-svelte"
 	import Form from "./form.svelte"
 
-	let { formViewContent, onGoBack }: { formViewContent: FormSchema.Form; onGoBack: () => void } =
+	let {
-		$props()
+		formViewContent,
+		onGoBack,
+		onSubmit
+	}: {
+		formViewContent: FormSchema.Form
+		onGoBack: () => void
+		onSubmit?: (formData: Record<string, string | number | boolean>) => void
+	} = $props()
 </script>
 
 <div data-tauri-drag-region class="h-12 w-full"></div>
@@ -14,5 +21,5 @@
 </Button>
 <main class="container flex flex-col gap-2 pb-4">
 	<h1 class="text-2xl font-bold">{formViewContent.title}</h1>
-	<Form {formViewContent} />
+	<Form {formViewContent} {onSubmit} />
 </main>

packages/ui/src/components/extension/templates/form.svelte

@@ -1,14 +1,12 @@
 <script lang="ts">
-	import type { DateValue } from "@internationalized/date"
 	import { FormNodeNameEnum, FormSchema } from "@kksh/api/models"
-	import { Button, Checkbox, Form, Input, Label, Select } from "@kksh/svelte5"
+	import { Button, Checkbox, Input, Label, Select } from "@kksh/svelte5"
-	import { DatePickerWithPreset, Shiki } from "@kksh/ui"
+	import { DatePickerWithPreset } from "@kksh/ui"
 	import { buildFormSchema, cn } from "@kksh/ui/utils"
-	import { onMount, tick } from "svelte"
+	import { onMount } from "svelte"
 	import SuperDebug, { defaults, superForm } from "sveltekit-superforms"
 	import { valibot, valibotClient } from "sveltekit-superforms/adapters"
 	import * as v from "valibot"
-	import DatePicker from "../../common/date/DatePicker.svelte"
 	import TauriLink from "../../common/TauriLink.svelte"
 
 	let {
@@ -37,16 +35,15 @@
 			validators: valibotClient(formSchema),
 			SPA: true,
 			onUpdate({ form, cancel }) {
-				cancel()
-				console.log($formData)
 				if (!form.valid) return
+				cancel()
 				const parsedData = v.parse(formSchema, $formData)
-				console.log(parsedData)
 				onSubmit?.(parsedData)
 			}
 		})
 	)
 	const { form: formData, enhance, errors } = $derived(form)
+	$inspect(formData)
 </script>
 
 {#snippet error(messages?: string[])}
@@ -83,7 +80,7 @@
 				/>
 			{:else if field.nodeName === FormNodeNameEnum.Date}
 				{@const field2 = field as FormSchema.DateField}
-				<DatePickerWithPreset class="w-full" bind:value={$formData[field2.key]} />
+				<DatePickerWithPreset class="w-full" bind:date={$formData[field2.key]} />
 			{:else if field.nodeName === FormNodeNameEnum.Select}
 				{@const field2 = field as FormSchema.SelectField}
 				<Select.Root type="single" name="favoriteFruit" bind:value={$formData[field2.key]}>
@@ -141,4 +138,6 @@
 		<Button type="submit">{formViewContent.submitBtnText ?? "Submit"}</Button>
 	</form>
 {/key}
-<!-- <SuperDebug data={$formData} /> -->
+{#if formViewContent.showFormDataDebug}
+	<SuperDebug data={$formData} />
+{/if}