@flowdrop/flowdrop 1.5.0 → 1.7.0

package/dist/components/form/FormFieldLight.svelte

@@ -33,19 +33,19 @@
 -->
 
 <script lang="ts">
-  import FormFieldWrapper from "./FormFieldWrapper.svelte";
-  import FormTextField from "./FormTextField.svelte";
-  import FormTextarea from "./FormTextarea.svelte";
-  import FormNumberField from "./FormNumberField.svelte";
-  import FormRangeField from "./FormRangeField.svelte";
-  import FormToggle from "./FormToggle.svelte";
-  import FormSelect from "./FormSelect.svelte";
-  import FormCheckboxGroup from "./FormCheckboxGroup.svelte";
-  import FormArray from "./FormArray.svelte";
-  import { fieldComponentRegistry } from "../../form/fieldRegistry.js";
-  import { getResolvedTheme } from "../../stores/settingsStore.svelte.js";
-  import type { FieldSchema } from "./types.js";
-  import { getSchemaOptions } from "./types.js";
+  import FormFieldWrapper from './FormFieldWrapper.svelte';
+  import FormTextField from './FormTextField.svelte';
+  import FormTextarea from './FormTextarea.svelte';
+  import FormNumberField from './FormNumberField.svelte';
+  import FormRangeField from './FormRangeField.svelte';
+  import FormToggle from './FormToggle.svelte';
+  import FormSelect from './FormSelect.svelte';
+  import FormCheckboxGroup from './FormCheckboxGroup.svelte';
+  import FormArray from './FormArray.svelte';
+  import { fieldComponentRegistry } from '../../form/fieldRegistry.js';
+  import { getResolvedTheme } from '../../stores/settingsStore.svelte.js';
+  import type { FieldSchema } from './types.js';
+  import { getSchemaOptions } from './types.js';
 
   interface Props {
     /** Unique key/id for the field */
@@ -62,20 +62,13 @@
     onChange: (value: unknown) => void;
   }
 
-  let {
-    fieldKey,
-    schema,
-    value,
-    required = false,
-    animationIndex = 0,
-    onChange,
-  }: Props = $props();
+  let { fieldKey, schema, value, required = false, animationIndex = 0, onChange }: Props = $props();
 
   /**
    * Computed description ID for ARIA association
    */
   const descriptionId = $derived(
-    schema.description && schema.title ? `${fieldKey}-description` : undefined,
+    schema.description && schema.title ? `${fieldKey}-description` : undefined
   );
 
   /**
@@ -86,16 +79,12 @@
   /**
    * Field label - prefer title, fall back to description, then key
    */
-  const fieldLabel = $derived(
-    String(schema.title ?? schema.description ?? fieldKey),
-  );
+  const fieldLabel = $derived(String(schema.title ?? schema.description ?? fieldKey));
 
   /**
    * Check if there's a registered custom component for this schema
    */
-  const registeredComponent = $derived(
-    fieldComponentRegistry.resolveFieldComponent(schema),
-  );
+  const registeredComponent = $derived(fieldComponentRegistry.resolveFieldComponent(schema));
 
   /**
    * Determine the field type to render (for non-registered components)
@@ -103,83 +92,80 @@
   const fieldType = $derived.by(() => {
     // If a custom component is registered, use it
     if (registeredComponent) {
-      return "registered";
+      return 'registered';
     }
 
     // Hidden fields should not be rendered
-    if (schema.format === "hidden") {
-      return "hidden";
+    if (schema.format === 'hidden') {
+      return 'hidden';
     }
 
     // Check for heavy editor formats that need registration
-    if (schema.format === "json" || schema.format === "code") {
-      return "code-editor-fallback";
+    if (schema.format === 'json' || schema.format === 'code') {
+      return 'code-editor-fallback';
     }
 
-    if (schema.format === "markdown") {
-      return "markdown-editor-fallback";
+    if (schema.format === 'markdown') {
+      return 'markdown-editor-fallback';
     }
 
-    if (schema.format === "template") {
-      return "template-editor-fallback";
+    if (schema.format === 'template') {
+      return 'template-editor-fallback';
     }
 
     // Object type without specific format would use code editor
-    if (schema.type === "object" && !schema.format) {
-      return "code-editor-fallback";
+    if (schema.type === 'object' && !schema.format) {
+      return 'code-editor-fallback';
     }
 
     // Enum with multiple selection -> checkbox group
     if (schema.enum && schema.multiple) {
-      return "checkbox-group";
+      return 'checkbox-group';
     }
 
     // Enum with single selection -> select
     if (schema.enum) {
-      return "select-enum";
+      return 'select-enum';
     }
 
     // oneOf with labeled options (standard JSON Schema) -> select
     // Must be checked before basic type checks since oneOf schemas often have type: 'string'
     if (schema.oneOf && schema.oneOf.length > 0) {
-      return "select-options";
+      return 'select-options';
     }
 
     // Multiline string -> textarea
-    if (schema.type === "string" && schema.format === "multiline") {
-      return "textarea";
+    if (schema.type === 'string' && schema.format === 'multiline') {
+      return 'textarea';
     }
 
     // Range slider for number/integer with format: "range"
-    if (
-      (schema.type === "number" || schema.type === "integer") &&
-      schema.format === "range"
-    ) {
-      return "range";
+    if ((schema.type === 'number' || schema.type === 'integer') && schema.format === 'range') {
+      return 'range';
     }
 
     // String -> text field
-    if (schema.type === "string") {
-      return "text";
+    if (schema.type === 'string') {
+      return 'text';
     }
 
     // Number or integer -> number field
-    if (schema.type === "number" || schema.type === "integer") {
-      return "number";
+    if (schema.type === 'number' || schema.type === 'integer') {
+      return 'number';
     }
 
     // Boolean -> toggle
-    if (schema.type === "boolean") {
-      return "toggle";
+    if (schema.type === 'boolean') {
+      return 'toggle';
     }
 
     // Array type
-    if (schema.type === "array") {
-      return "array";
+    if (schema.type === 'array') {
+      return 'array';
     }
 
     // Fallback to text
-    return "text";
+    return 'text';
   });
 
   /**
@@ -199,7 +185,7 @@
   /**
    * Get current value as the appropriate type
    */
-  const stringValue = $derived(String(value ?? ""));
+  const stringValue = $derived(String(value ?? ''));
   const numberValue = $derived(value as number | string);
   const booleanValue = $derived(Boolean(value ?? schema.default ?? false));
   const arrayValue = $derived.by((): string[] => {
@@ -220,19 +206,19 @@
    */
   function getEditorHint(editorType: string): string {
     switch (editorType) {
-      case "code-editor-fallback":
+      case 'code-editor-fallback':
         return "Code editor requires: import { registerCodeEditorField } from '@flowdrop/flowdrop/form/code'; registerCodeEditorField();";
-      case "markdown-editor-fallback":
+      case 'markdown-editor-fallback':
         return "Markdown editor requires: import { registerMarkdownEditorField } from '@flowdrop/flowdrop/form/markdown'; registerMarkdownEditorField();";
-      case "template-editor-fallback":
+      case 'template-editor-fallback':
         return "Template editor requires: import { registerTemplateEditorField } from '@flowdrop/flowdrop/form/code'; registerTemplateEditorField();";
       default:
-        return "This field type requires additional registration.";
+        return 'This field type requires additional registration.';
     }
   }
 </script>
 
-{#if fieldType !== "hidden"}
+{#if fieldType !== 'hidden'}
   <FormFieldWrapper
     id={fieldKey}
     label={fieldLabel}
@@ -240,17 +226,17 @@
     description={schema.title ? schema.description : undefined}
     {animationDelay}
   >
-    {#if fieldType === "registered" && registeredComponent}
+    {#if fieldType === 'registered' && registeredComponent}
       <!-- Render registered custom component -->
       <!-- darkTheme: use schema value if explicitly set, otherwise derive from resolved theme -->
       <registeredComponent.component
         id={fieldKey}
         {value}
-        placeholder={schema.placeholder ?? ""}
+        placeholder={schema.placeholder ?? ''}
         {required}
         ariaDescribedBy={descriptionId}
         height={schema.height as string | undefined}
-        darkTheme={schema.darkTheme ?? getResolvedTheme() === "dark"}
+        darkTheme={schema.darkTheme ?? getResolvedTheme() === 'dark'}
         autoFormat={schema.autoFormat as boolean | undefined}
         showToolbar={schema.showToolbar as boolean | undefined}
         showStatusBar={schema.showStatusBar as boolean | undefined}
@@ -259,7 +245,7 @@
         placeholderExample={schema.placeholderExample as string | undefined}
         onChange={(val: unknown) => onChange(val)}
       />
-    {:else if fieldType === "checkbox-group"}
+    {:else if fieldType === 'checkbox-group'}
       <FormCheckboxGroup
         id={fieldKey}
         value={arrayValue}
@@ -267,7 +253,7 @@
         ariaDescribedBy={descriptionId}
         onChange={(val) => onChange(val)}
       />
-    {:else if fieldType === "select-enum"}
+    {:else if fieldType === 'select-enum'}
       <FormSelect
         id={fieldKey}
         value={stringValue}
@@ -276,36 +262,36 @@
         ariaDescribedBy={descriptionId}
         onChange={(val) => onChange(val)}
       />
-    {:else if fieldType === "textarea"}
+    {:else if fieldType === 'textarea'}
       <FormTextarea
         id={fieldKey}
         value={stringValue}
-        placeholder={schema.placeholder ?? ""}
+        placeholder={schema.placeholder ?? ''}
         {required}
         ariaDescribedBy={descriptionId}
         onChange={(val) => onChange(val)}
       />
-    {:else if fieldType === "text"}
+    {:else if fieldType === 'text'}
       <FormTextField
         id={fieldKey}
         value={stringValue}
-        placeholder={schema.placeholder ?? ""}
+        placeholder={schema.placeholder ?? ''}
         {required}
         ariaDescribedBy={descriptionId}
         onChange={(val) => onChange(val)}
       />
-    {:else if fieldType === "number"}
+    {:else if fieldType === 'number'}
       <FormNumberField
         id={fieldKey}
         value={numberValue}
-        placeholder={schema.placeholder ?? ""}
+        placeholder={schema.placeholder ?? ''}
         min={schema.minimum}
         max={schema.maximum}
         {required}
         ariaDescribedBy={descriptionId}
         onChange={(val) => onChange(val)}
       />
-    {:else if fieldType === "range"}
+    {:else if fieldType === 'range'}
       <FormRangeField
         id={fieldKey}
         value={numberValue}
@@ -316,14 +302,14 @@
         ariaDescribedBy={descriptionId}
         onChange={(val) => onChange(val)}
       />
-    {:else if fieldType === "toggle"}
+    {:else if fieldType === 'toggle'}
       <FormToggle
         id={fieldKey}
         value={booleanValue}
         ariaDescribedBy={descriptionId}
         onChange={(val) => onChange(val)}
       />
-    {:else if fieldType === "select-options"}
+    {:else if fieldType === 'select-options'}
       <FormSelect
         id={fieldKey}
         value={stringValue}
@@ -332,17 +318,17 @@
         ariaDescribedBy={descriptionId}
         onChange={(val) => onChange(val)}
       />
-    {:else if fieldType === "array" && schema.items}
+    {:else if fieldType === 'array' && schema.items}
       <FormArray
         id={fieldKey}
         value={arrayItems}
         itemSchema={schema.items}
         minItems={schema.minItems}
         maxItems={schema.maxItems}
-        addLabel={`Add ${schema.items.title ?? "Item"}`}
+        addLabel={`Add ${schema.items.title ?? 'Item'}`}
         onChange={(val) => onChange(val)}
       />
-    {:else if fieldType.endsWith("-fallback")}
+    {:else if fieldType.endsWith('-fallback')}
       <!-- Fallback for unregistered heavy editors -->
       <div class="form-field-fallback">
         <div class="form-field-fallback__message">
@@ -366,15 +352,13 @@
         <!-- Provide a basic textarea fallback for editing -->
         <FormTextarea
           id={fieldKey}
-          value={typeof value === "string"
-            ? value
-            : JSON.stringify(value, null, 2)}
-          placeholder={schema.placeholder ?? "Enter value..."}
+          value={typeof value === 'string' ? value : JSON.stringify(value, null, 2)}
+          placeholder={schema.placeholder ?? 'Enter value...'}
           {required}
           ariaDescribedBy={descriptionId}
           onChange={(val) => {
             // Try to parse as JSON for object types
-            if (schema.type === "object" || schema.format === "json") {
+            if (schema.type === 'object' || schema.format === 'json') {
               try {
                 onChange(JSON.parse(val));
               } catch {
@@ -391,7 +375,7 @@
       <FormTextField
         id={fieldKey}
         value={stringValue}
-        placeholder={schema.placeholder ?? ""}
+        placeholder={schema.placeholder ?? ''}
         ariaDescribedBy={descriptionId}
         onChange={(val) => onChange(val)}
       />
@@ -432,7 +416,7 @@
     background-color: var(--fd-muted);
     border: 1px solid var(--fd-border);
     border-radius: var(--fd-radius-md);
-    font-family: "JetBrains Mono", "Fira Code", "Monaco", "Menlo", monospace;
+    font-family: 'JetBrains Mono', 'Fira Code', 'Monaco', 'Menlo', monospace;
     font-size: 0.6875rem;
     line-height: 1.5;
     color: var(--fd-muted-foreground);

package/dist/components/form/FormFieldLight.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { FieldSchema } from "./types.js";
+import type { FieldSchema } from './types.js';
 interface Props {
     /** Unique key/id for the field */
     fieldKey: string;

package/dist/components/form/FormFieldWrapper.stories.svelte

@@ -1,24 +1,24 @@
 <script module>
-  import { defineMeta } from "@storybook/addon-svelte-csf";
-  import FormFieldWrapper from "./FormFieldWrapper.svelte";
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import FormFieldWrapper from './FormFieldWrapper.svelte';
 
   const { Story } = defineMeta({
-    title: "Form/FormFieldWrapper",
+    title: 'Form/FormFieldWrapper',
     component: FormFieldWrapper,
-    tags: ["autodocs"],
+    tags: ['autodocs'],
     argTypes: {
-      label: { control: "text" },
-      required: { control: "boolean" },
-      description: { control: "text" },
+      label: { control: 'text' },
+      required: { control: 'boolean' },
+      description: { control: 'text' }
     },
     args: {
-      id: "demo-wrapper",
-      label: "Field Label",
-    },
+      id: 'demo-wrapper',
+      label: 'Field Label'
+    }
   });
 </script>
 
-<Story name="Default" args={{ label: "Username" }}>
+<Story name="Default" args={{ label: 'Username' }}>
   <input
     type="text"
     id="demo-wrapper"
@@ -30,9 +30,9 @@
 <Story
   name="With Description"
   args={{
-    label: "Email",
+    label: 'Email',
     description: "We'll never share your email with anyone.",
-    required: true,
+    required: true
   }}
 >
   <input
@@ -43,7 +43,7 @@
   />
 </Story>
 
-<Story name="Required" args={{ label: "Password", required: true }}>
+<Story name="Required" args={{ label: 'Password', required: true }}>
   <input
     type="password"
     id="demo-wrapper"

package/dist/components/form/FormFieldWrapper.stories.svelte.d.ts

@@ -11,7 +11,7 @@ declare const FormFieldWrapper: $$__sveltets_2_IsomorphicComponent<{
 }, {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, string>;
-import FormFieldWrapper from "./FormFieldWrapper.svelte";
+import FormFieldWrapper from './FormFieldWrapper.svelte';
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;

package/dist/components/form/FormFieldWrapper.svelte

@@ -10,7 +10,7 @@
 -->
 
 <script lang="ts">
-  import type { Snippet } from "svelte";
+  import type { Snippet } from 'svelte';
 
   interface Props {
     /** Field identifier for label association */
@@ -27,14 +27,7 @@
     children: Snippet;
   }
 
-  let {
-    id,
-    label,
-    required = false,
-    description,
-    animationDelay = 0,
-    children,
-  }: Props = $props();
+  let { id, label, required = false, description, animationDelay = 0, children }: Props = $props();
 
   /**
    * Computed description ID for ARIA association

package/dist/components/form/FormFieldWrapper.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { Snippet } from "svelte";
+import type { Snippet } from 'svelte';
 interface Props {
     /** Field identifier for label association */
     id: string;

package/dist/components/form/FormFieldset.svelte

@@ -14,9 +14,9 @@
 -->
 
 <script lang="ts">
-  import type { Snippet } from "svelte";
-  import type { UISchemaGroup } from "../../types/uischema.js";
-  import Icon from "@iconify/svelte";
+  import type { Snippet } from 'svelte';
+  import type { UISchemaGroup } from '../../types/uischema.js';
+  import Icon from '@iconify/svelte';
 
   interface Props {
     /** The UISchema Group element to render */

package/dist/components/form/FormFieldset.svelte.d.ts

@@ -1,5 +1,5 @@
-import type { Snippet } from "svelte";
-import type { UISchemaGroup } from "../../types/uischema.js";
+import type { Snippet } from 'svelte';
+import type { UISchemaGroup } from '../../types/uischema.js';
 interface Props {
     /** The UISchema Group element to render */
     group: UISchemaGroup;