x0k/svelte-jsonschema-form/sjsf-custom-components

<script lang="ts" module>
  import type { HTMLInputAttributes } from "svelte/elements";
 
  declare module "@sjsf/form" {
    interface UiOptions {
      myColorPicker?: HTMLInputAttributes;
    }
  }
</script>
 
<script lang="ts">
  import {
    getFormContext,
    inputAttributes,
    type ComponentProps,
  } from "@sjsf/form";
 
  let {
    value = $bindable(),
    config,
    handlers,
  }: ComponentProps["textWidget"] = $props();
 
  const ctx = getFormContext();
 
  const attributes = $derived(
    inputAttributes(ctx, config, "myColorPicker", handlers, { type: "color" })
  );
</script>
 
<input bind:value {...attributes} />

<!-- color-picker-widget.svelte (attributes from above) -->
<MyWrapper bind:value {...attributes} />

<!-- MyWrapper.svelte -->
<script lang="ts">
  import type { HTMLInputAttributes } from "svelte/elements";
 
  let { value = $bindable(), ...rest }: HTMLInputAttributes = $props();
</script>
 
<input bind:value {...rest} />

<CustomInput {value} {...handlers} />

// When you wrap the event with extra logic:
function handleValueChange(details: { value: string }) {
  value = details.value;
  handlers.oninput?.();
  handlers.onchange?.();
}

<script lang="ts">
  import {
    createForm,
    BasicForm,
    type Schema,
    type UiSchema,
  } from "@sjsf/form";
  import * as defaults from "$lib/sjsf/defaults";
  import ColorPickerWidget from "./color-picker-widget.svelte";
 
  const schema = {
    type: "object",
    properties: {
      brandColor: { type: "string", title: "Theme Color" },
    },
  } as const satisfies Schema;
 
  const uiSchema: UiSchema = {
    brandColor: {
      "ui:components": {
        textWidget: ColorPickerWidget,
      },
    },
  };
 
  const form = createForm({
    ...defaults,
    schema,
    uiSchema,
  });
</script>
 
<BasicForm {form} />

// src/lib/sjsf/theme.ts
import { overrideByRecord } from "@sjsf/form/lib/resolver";
import { theme as baseTheme } from "@sjsf/shadcn4-theme";
import CustomTextWidget from "./custom-text-widget.svelte";
import CustomFieldTemplate from "./custom-field-template.svelte";
export const theme = overrideByRecord(baseTheme, {
  textWidget: CustomTextWidget,
  fieldTemplate: CustomFieldTemplate,
});

// src/lib/sjsf/types.d.ts
import type { HTMLInputAttributes } from "svelte/elements";
declare module "@sjsf/form" {
  interface UiOptions {
    myColorPicker?: HTMLInputAttributes;
  }
}

import {
  ariaDescribedByProp,
  ariaInvalidProp,
  composeProps,
  disabledProp,
  getFormContext,
  inputProps,
  uiOptionProps,
} from "@sjsf/form";
const ctx = getFormContext();
const props = $derived(
  composeProps(
    ctx,
    config,
    { type: "color" },
    inputProps,
    uiOptionProps("myColorPicker"),
    disabledProp,
    ariaInvalidProp,
    ariaDescribedByProp
  )
);