@flowdrop/flowdrop 1.4.0 → 1.6.0

package/dist/components/SchemaForm.stories.svelte

@@ -1,17 +1,17 @@
 <script module>
-  import { defineMeta } from "@storybook/addon-svelte-csf";
-  import SchemaForm from "./SchemaForm.svelte";
-  import { fn } from "storybook/test";
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import SchemaForm from './SchemaForm.svelte';
+  import { fn } from 'storybook/test';
 
   const { Story } = defineMeta({
-    title: "Form/SchemaForm",
+    title: 'Form/SchemaForm',
     component: SchemaForm,
-    tags: ["autodocs"],
+    tags: ['autodocs'],
     args: {
       onChange: fn(),
       onSave: fn(),
-      onCancel: fn(),
-    },
+      onCancel: fn()
+    }
   });
 </script>
 
@@ -19,19 +19,19 @@
   name="Simple Form"
   args={{
     schema: {
-      type: "object",
+      type: 'object',
       properties: {
         name: {
-          type: "string",
-          title: "Name",
-          description: "Enter your full name",
+          type: 'string',
+          title: 'Name',
+          description: 'Enter your full name'
         },
-        age: { type: "number", title: "Age", minimum: 0, maximum: 120 },
-        active: { type: "boolean", title: "Active", default: true },
+        age: { type: 'number', title: 'Age', minimum: 0, maximum: 120 },
+        active: { type: 'boolean', title: 'Active', default: true }
       },
-      required: ["name"],
+      required: ['name']
     },
-    values: { name: "Alice", age: 30, active: true },
+    values: { name: 'Alice', age: 30, active: true }
   }}
 />
 
@@ -39,39 +39,39 @@
   name="Select Fields"
   args={{
     schema: {
-      type: "object",
+      type: 'object',
       properties: {
         model: {
-          type: "string",
-          title: "AI Model",
+          type: 'string',
+          title: 'AI Model',
           oneOf: [
-            { const: "gpt-4", title: "GPT-4" },
-            { const: "gpt-3.5", title: "GPT-3.5 Turbo" },
-            { const: "claude-3", title: "Claude 3" },
-          ],
+            { const: 'gpt-4', title: 'GPT-4' },
+            { const: 'gpt-3.5', title: 'GPT-3.5 Turbo' },
+            { const: 'claude-3', title: 'Claude 3' }
+          ]
         },
         temperature: {
-          type: "number",
-          title: "Temperature",
-          format: "range",
+          type: 'number',
+          title: 'Temperature',
+          format: 'range',
           minimum: 0,
           maximum: 2,
           step: 0.1,
-          default: 0.7,
+          default: 0.7
         },
         prompt: {
-          type: "string",
-          title: "System Prompt",
-          format: "multiline",
-          description: "The system prompt for the AI model",
-        },
-      },
+          type: 'string',
+          title: 'System Prompt',
+          format: 'multiline',
+          description: 'The system prompt for the AI model'
+        }
+      }
     },
     values: {
-      model: "gpt-4",
+      model: 'gpt-4',
       temperature: 0.7,
-      prompt: "You are a helpful assistant.",
-    },
+      prompt: 'You are a helpful assistant.'
+    }
   }}
 />
 
@@ -79,17 +79,17 @@
   name="With Actions"
   args={{
     schema: {
-      type: "object",
+      type: 'object',
       properties: {
-        email: { type: "string", title: "Email" },
-        notifications: { type: "boolean", title: "Enable Notifications" },
+        email: { type: 'string', title: 'Email' },
+        notifications: { type: 'boolean', title: 'Enable Notifications' }
       },
-      required: ["email"],
+      required: ['email']
     },
-    values: { email: "", notifications: true },
+    values: { email: '', notifications: true },
     showActions: true,
-    saveLabel: "Save Settings",
-    cancelLabel: "Reset",
+    saveLabel: 'Save Settings',
+    cancelLabel: 'Reset'
   }}
 />
 
@@ -97,14 +97,14 @@
   name="Loading"
   args={{
     schema: {
-      type: "object",
+      type: 'object',
       properties: {
-        name: { type: "string", title: "Name" },
-      },
+        name: { type: 'string', title: 'Name' }
+      }
     },
-    values: { name: "Test" },
+    values: { name: 'Test' },
     showActions: true,
-    loading: true,
+    loading: true
   }}
 />
 
@@ -112,13 +112,13 @@
   name="Disabled"
   args={{
     schema: {
-      type: "object",
+      type: 'object',
       properties: {
-        name: { type: "string", title: "Name" },
-        role: { type: "string", title: "Role" },
-      },
+        name: { type: 'string', title: 'Name' },
+        role: { type: 'string', title: 'Role' }
+      }
     },
-    values: { name: "Admin", role: "Super User" },
-    disabled: true,
+    values: { name: 'Admin', role: 'Super User' },
+    disabled: true
   }}
 />

package/dist/components/SchemaForm.stories.svelte.d.ts

@@ -11,7 +11,7 @@ declare const SchemaForm: $$__sveltets_2_IsomorphicComponent<{
 }, {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, string>;
-import SchemaForm from "./SchemaForm.svelte";
+import SchemaForm from './SchemaForm.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/SchemaForm.svelte

@@ -54,13 +54,13 @@
 -->
 
 <script lang="ts">
-  import { setContext } from "svelte";
-  import Icon from "@iconify/svelte";
-  import type { ConfigSchema, AuthProvider } from "../types/index.js";
-  import type { UISchemaElement } from "../types/uischema.js";
-  import { FormField } from "./form/index.js";
-  import FormUISchemaRenderer from "./form/FormUISchemaRenderer.svelte";
-  import type { FieldSchema } from "./form/index.js";
+  import { setContext } from 'svelte';
+  import Icon from '@iconify/svelte';
+  import type { ConfigSchema, AuthProvider } from '../types/index.js';
+  import type { UISchemaElement } from '../types/uischema.js';
+  import { FormField } from './form/index.js';
+  import FormUISchemaRenderer from './form/FormUISchemaRenderer.svelte';
+  import type { FieldSchema } from './form/index.js';
 
   /**
    * Props interface for SchemaForm component
@@ -160,25 +160,22 @@
     values = {},
     onChange,
     showActions = false,
-    saveLabel = "Save",
-    cancelLabel = "Cancel",
+    saveLabel = 'Save',
+    cancelLabel = 'Cancel',
     onSave,
     onCancel,
     loading = false,
     disabled = false,
-    class: className = "",
+    class: className = '',
     authProvider,
-    baseUrl = "",
+    baseUrl = ''
   }: Props = $props();
 
   // Set context for child components (e.g., FormAutocomplete)
   // Use getter functions to ensure child components always get the current prop value,
   // even if the prop changes after initial mount
-  setContext<() => AuthProvider | undefined>(
-    "flowdrop:getAuthProvider",
-    () => authProvider,
-  );
-  setContext<() => string>("flowdrop:getBaseUrl", () => baseUrl);
+  setContext<() => AuthProvider | undefined>('flowdrop:getAuthProvider', () => authProvider);
+  setContext<() => string>('flowdrop:getBaseUrl', () => baseUrl);
 
   /**
    * Reference to this component's form element
@@ -200,8 +197,7 @@
       Object.entries(schema.properties).forEach(([key, field]) => {
         const fieldConfig = field as Record<string, unknown>;
         // Use provided value if available, otherwise use schema default
-        mergedValues[key] =
-          values[key] !== undefined ? values[key] : fieldConfig.default;
+        mergedValues[key] = values[key] !== undefined ? values[key] : fieldConfig.default;
       });
       formValues = mergedValues;
     }
@@ -247,29 +243,18 @@
     const updatedValues: Record<string, unknown> = { ...formValues };
 
     if (formRef) {
-      const inputs = formRef.querySelectorAll("input, select, textarea");
+      const inputs = formRef.querySelectorAll('input, select, textarea');
       inputs.forEach((input: Element) => {
-        const inputEl = input as
-          | HTMLInputElement
-          | HTMLSelectElement
-          | HTMLTextAreaElement;
+        const inputEl = input as HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement;
         if (inputEl.id) {
-          if (
-            inputEl instanceof HTMLInputElement &&
-            inputEl.type === "checkbox"
-          ) {
+          if (inputEl instanceof HTMLInputElement && inputEl.type === 'checkbox') {
             updatedValues[inputEl.id] = inputEl.checked;
           } else if (
             inputEl instanceof HTMLInputElement &&
-            (inputEl.type === "number" || inputEl.type === "range")
-          ) {
-            updatedValues[inputEl.id] = inputEl.value
-              ? Number(inputEl.value)
-              : inputEl.value;
-          } else if (
-            inputEl instanceof HTMLInputElement &&
-            inputEl.type === "hidden"
+            (inputEl.type === 'number' || inputEl.type === 'range')
           ) {
+            updatedValues[inputEl.id] = inputEl.value ? Number(inputEl.value) : inputEl.value;
+          } else if (inputEl instanceof HTMLInputElement && inputEl.type === 'hidden') {
             // Parse hidden field values that might be JSON
             try {
               const parsed = JSON.parse(inputEl.value);
@@ -289,14 +274,10 @@
     if (values && schema?.properties) {
       Object.entries(schema.properties).forEach(
         ([key, property]: [string, Record<string, unknown>]) => {
-          if (
-            property.format === "hidden" &&
-            !(key in updatedValues) &&
-            key in values
-          ) {
+          if (property.format === 'hidden' && !(key in updatedValues) && key in values) {
             updatedValues[key] = values[key];
           }
-        },
+        }
       );
     }
 
@@ -479,11 +460,7 @@
   }
 
   .schema-form__button--primary {
-    background: linear-gradient(
-      135deg,
-      var(--fd-primary) 0%,
-      var(--fd-primary-hover) 100%
-    );
+    background: linear-gradient(135deg, var(--fd-primary) 0%, var(--fd-primary-hover) 100%);
     color: var(--fd-primary-foreground);
     box-shadow:
       0 1px 3px rgba(59, 130, 246, 0.3),
@@ -491,11 +468,7 @@
   }
 
   .schema-form__button--primary:hover:not(:disabled) {
-    background: linear-gradient(
-      135deg,
-      var(--fd-primary-hover) 0%,
-      var(--fd-primary-hover) 100%
-    );
+    background: linear-gradient(135deg, var(--fd-primary-hover) 0%, var(--fd-primary-hover) 100%);
     box-shadow:
       0 4px 12px rgba(59, 130, 246, 0.35),
       inset 0 1px 0 rgba(255, 255, 255, 0.1);

package/dist/components/SchemaForm.svelte.d.ts

@@ -1,5 +1,5 @@
-import type { ConfigSchema, AuthProvider } from "../types/index.js";
-import type { UISchemaElement } from "../types/uischema.js";
+import type { ConfigSchema, AuthProvider } from '../types/index.js';
+import type { UISchemaElement } from '../types/uischema.js';
 /**
  * Props interface for SchemaForm component
  */

package/dist/components/SettingsModal.svelte

@@ -24,9 +24,9 @@
 -->
 
 <script lang="ts">
-  import Icon from "@iconify/svelte";
-  import SettingsPanel from "./SettingsPanel.svelte";
-  import type { SettingsCategory } from "../types/settings.js";
+  import Icon from '@iconify/svelte';
+  import SettingsPanel from './SettingsPanel.svelte';
+  import type { SettingsCategory } from '../types/settings.js';
 
   /**
    * Props interface for SettingsModal component
@@ -43,10 +43,7 @@
     /** Callback when modal is closed */
     onClose?: () => void;
     /** Callback when settings change */
-    onSettingsChange?: (
-      category: SettingsCategory,
-      values: Record<string, unknown>,
-    ) => void;
+    onSettingsChange?: (category: SettingsCategory, values: Record<string, unknown>) => void;
     /** Custom CSS class for the modal */
     class?: string;
   }
@@ -58,7 +55,7 @@
     showResetButton = true,
     onClose,
     onSettingsChange,
-    class: className = "",
+    class: className = ''
   }: Props = $props();
 
   /**
@@ -103,7 +100,7 @@
    * Handle keyboard events
    */
   function handleKeydown(event: KeyboardEvent): void {
-    if (event.key === "Escape") {
+    if (event.key === 'Escape') {
       event.preventDefault();
       closeModal();
     }

package/dist/components/SettingsModal.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { SettingsCategory } from "../types/settings.js";
+import type { SettingsCategory } from '../types/settings.js';
 /**
  * Props interface for SettingsModal component
  */