fix: fix button field optiong

Author: nichenqin

apps/frontend/src/lib/components/blocks/field-control/attachment-control.svelte

@@ -7,6 +7,7 @@
   import { selectedAttachment } from "$lib/store/attachment.store"
 
   export let field: AttachmentField
+  export let onValueChange: (value: IAttachmentFieldValue) => void
 
   export let value: IAttachmentFieldValue = []
   export let readonly = false
@@ -68,6 +69,7 @@
           signedUrl,
         },
       ]
+      onValueChange?.(value)
     } catch (error) {
       console.error(error)
     } finally {

apps/frontend/src/lib/components/blocks/field-control/checkbox-control.svelte

@@ -3,8 +3,14 @@
 
   export let readonly = false
   export let value: boolean
+  export let onValueChange: (value: boolean) => void
 </script>
 
 <div class="flex h-full items-center">
-  <Switch {...$$restProps} disabled={readonly} bind:checked={value} />
+  <Switch
+    {...$$restProps}
+    disabled={readonly}
+    bind:checked={value}
+    on:change={(e) => onValueChange?.(e.target.checked)}
+  />
 </div>

apps/frontend/src/lib/components/blocks/field-control/currency-control.svelte

@@ -3,8 +3,10 @@
 
   export let readonly = false
   export let value: number
+  export let onValueChange: (value: number) => void
   const onInput = (event: Event) => {
     value = +(event.target as HTMLInputElement).value
+    onValueChange?.(value)
   }
 </script>
 
@@ -14,7 +16,6 @@
   {value}
   on:input={onInput}
   type="number"
-  on:change
   step={0.01}
   {...$$restProps}
 />

apps/frontend/src/lib/components/blocks/field-control/date-control.svelte

@@ -14,6 +14,7 @@
   export let readonly = false
   export let disabled = false
   export let field: DateField
+  export let onValueChange: (value: string | Date | undefined | null) => void
 
   $: formatter = field.formatter
   $: includeTime = field.includeTime
@@ -36,6 +37,7 @@
     if (!includeTime) {
       open = false
     }
+    onValueChange?.(value)
   }
 </script>
 
@@ -89,6 +91,7 @@
           onValueChange={(v) => {
             if (!value) return
             value = new Date(new Date(value).setHours(v.hour, v.minute, 0, 0)).toISOString()
+            onValueChange?.(value)
           }}
         />
       </div>
@@ -108,6 +111,7 @@
         on:click={() => {
           if (value) {
             value = null
+            onValueChange?.(value)
           }
           open = false
         }}

apps/frontend/src/lib/components/blocks/field-control/duration-control.svelte

@@ -4,6 +4,7 @@
 
   export let readonly = false
   export let value: number
+  export let onValueChange: (value: number) => void
 </script>
 
 <DurationInput
@@ -14,4 +15,5 @@
     "border-input placeholder:text-muted-foreground focus-visible:ring-ring flex h-9 w-full rounded-md border bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:outline-none focus-visible:ring-1 disabled:cursor-not-allowed disabled:opacity-50",
     $$restProps.class,
   )}
+  on:change={(e) => onValueChange?.(e.target.value)}
 />

apps/frontend/src/lib/components/blocks/field-control/email-control.svelte

@@ -3,6 +3,14 @@
 
   export let value: string
   export let readonly = false
+  export let onValueChange: (value: string) => void
 </script>
 
-<Input bind:value {...$$restProps} type="email" on:change disabled={readonly} />
+<Input
+  bind:value
+  {...$$restProps}
+  type="email"
+  on:change
+  disabled={readonly}
+  on:input={(e) => onValueChange?.(e.target.value)}
+/>

apps/frontend/src/lib/components/blocks/field-control/field-control.svelte

@@ -32,6 +32,7 @@
   export let r: Writable<string | null>
   export let value: any
   export let displayValue: any
+  export let onValueChange: (value: any) => void
 
   function handleValue() {
     const { success } = field.valueSchema.safeParse(value)
@@ -73,7 +74,6 @@
 <svelte:component
   this={map[field.type]}
   {readonly}
-  on:change
   {...$$restProps}
   bind:value
   {displayValue}
@@ -82,4 +82,5 @@
   {recordId}
   {record}
   {r}
+  {onValueChange}
 />

apps/frontend/src/lib/components/blocks/field-control/json-control.svelte

@@ -4,6 +4,7 @@
   export let value: Json | undefined = undefined
   export let field: JsonField
   export let readonly = false
+  export let onValueChange: (value: Json) => void
 
   let content: Content = {
     text: "{}",
@@ -12,8 +13,11 @@
 
   const handleChange: OnChange = (updatedContent, previousContent, { contentErrors, patchResult }) => {
     content = updatedContent
-    // @ts-ignore
-    if (!contentErrors) value = JSON.parse(content.text)
+    if (!contentErrors) {
+      // @ts-ignore
+      value = JSON.parse(content.text)
+      onValueChange?.(value)
+    }
   }
 </script>
 

apps/frontend/src/lib/components/blocks/field-control/long-text-control.svelte

@@ -6,10 +6,11 @@
   export let field: LongTextField
   export let value: string
   export let readonly = false
+  export let onValueChange: (value: string) => void
 </script>
 
 {#if field.allowRichText}
-  <Tiptap {readonly} bind:value />
+  <Tiptap {readonly} bind:value {onValueChange} />
 {:else}
-  <Textarea rows={5} bind:value {...$$restProps} on:change disabled={readonly} />
+  <Textarea rows={5} bind:value {...$$restProps}  disabled={readonly} on:input={(e) => onValueChange?.(e.target.value)} />
 {/if}

apps/frontend/src/lib/components/blocks/field-control/number-control.svelte

@@ -3,8 +3,10 @@
 
   export let readonly = false
   export let value: number
+  export let onValueChange: (value: number) => void
   const onInput = (event: Event) => {
     value = +(event.target as HTMLInputElement).value
+    onValueChange?.(value)
   }
 </script>