autoform-svelte 0.1.0

package/README.md

@@ -0,0 +1,100 @@
+# autoform-svelte
+
+Schema-first generated forms for Svelte 5 with adapter-based schema support.
+
+## Install
+
+```bash
+bun install autoform-svelte
+```
+
+If you use Zod schemas:
+
+```bash
+bun install zod
+```
+
+## Usage
+
+```svelte
+<script lang="ts">
+  import { Autoform } from "autoform-svelte";
+  import { zodAdapter } from "autoform-svelte/adapters/zod";
+  import { z } from "zod";
+
+  const schema = z.object({
+    query: z.string().min(1),
+    enabled: z.boolean().default(true),
+  });
+
+  let data = $state({
+    query: "",
+    enabled: true,
+  });
+</script>
+
+<Autoform
+  {schema}
+  adapter={zodAdapter}
+  bind:data
+  onsubmit={(e) => console.log("submit", e.detail.data)}
+  oncancel={() => console.log("cancel")}
+/>
+```
+
+## Adapters
+
+- `zodAdapter` from `autoform-svelte/adapters/zod`
+- `jsonSchemaAdapter` (default) from `autoform-svelte`
+- `createCustomAdapter()` for custom libraries
+
+```ts
+import { createCustomAdapter } from "autoform-svelte";
+
+const myAdapter = createCustomAdapter((schema) => schema.toJSON());
+```
+
+## Field metadata
+
+Use schema metadata to customize form rendering:
+
+```ts
+z.string().meta({
+  form: {
+    label: "Message",
+    widget: "textarea",
+    placeholder: "Write your message",
+  },
+});
+
+z.object({
+  title: z.string(),
+  details: z.string(),
+}).meta({
+  form: {
+    reorderable: true,
+  },
+});
+```
+
+Supported keys:
+
+- `form.widget`: `"input" | "textarea"` (string fields only, default is `"input"`)
+- `form.label`: field label override
+- `form.placeholder`: placeholder text for supported controls (input/textarea/select/date/number)
+- `form.reorderable`: enable object key reordering controls (default is disabled)
+
+## Component API
+
+- `schema`: `unknown` (required)
+- `adapter?`: `SchemaAdapter` (default: `jsonSchemaAdapter`)
+- `data`: `Record<string, any>` (bindable)
+- `title?`: `string`
+- `submitLabel?`: `string` (default: `"Save"`)
+- `cancelLabel?`: `string` (default: `"Cancel"`)
+
+## Events
+
+- `submit`: `{ data: Record<string, any> }`
+- `cancel`
+- `error`: `{ errors: string[] }`

package/dist/index.css

@@ -0,0 +1 @@
+.af-form.svelte-18268fr{display:flex;flex-direction:column;gap:.75rem}.af-title.svelte-18268fr{margin:0;font-size:1rem;font-weight:600}.af-errors.svelte-18268fr{border:1px solid #ef4444;border-radius:.375rem;padding:.625rem;font-size:.75rem;color:#dc2626}.af-actions.svelte-18268fr{display:flex;justify-content:space-between;margin-top:.5rem}.af-btn.svelte-18268fr{border-radius:.375rem;border:1px solid transparent;padding:.375rem .625rem;font-size:.75rem;cursor:pointer}.af-btn.svelte-18268fr:disabled{opacity:.5;cursor:not-allowed}.af-btn-primary.svelte-18268fr{background:#2563eb;color:#fff}.af-btn-secondary.svelte-18268fr{border-color:color-mix(in oklab,currentColor 22%,transparent);background:transparent;color:inherit}.af-label.svelte-yr0bu8{font-size:.875rem;font-weight:500}.af-help.svelte-yr0bu8{margin:0;font-size:.75rem;color:color-mix(in oklab,currentColor 60%,transparent)}.af-input.svelte-yr0bu8{width:100%;border:1px solid color-mix(in oklab,currentColor 22%,transparent);border-radius:.375rem;padding:.5rem .625rem;background:transparent;box-sizing:border-box}.af-label.svelte-1cde0jg{font-size:.875rem;font-weight:500}.af-help.svelte-1cde0jg{margin:0;font-size:.75rem;color:color-mix(in oklab,currentColor 60%,transparent)}.af-input.svelte-1cde0jg{width:100%;border:1px solid color-mix(in oklab,currentColor 22%,transparent);border-radius:.375rem;padding:.5rem .625rem;background:transparent;box-sizing:border-box}.af-checkbox-row.svelte-1onbcyh{display:inline-flex;align-items:center;gap:.5rem;font-size:.875rem}.af-help.svelte-1onbcyh{margin:0;font-size:.75rem;color:color-mix(in oklab,currentColor 60%,transparent)}.af-label.svelte-6rq2q9{font-size:.875rem;font-weight:500}.af-help.svelte-6rq2q9{margin:0;font-size:.75rem;color:color-mix(in oklab,currentColor 60%,transparent)}.af-input.svelte-6rq2q9{width:100%;border:1px solid color-mix(in oklab,currentColor 22%,transparent);border-radius:.375rem;padding:.5rem .625rem;background:transparent;box-sizing:border-box}.af-label.svelte-5p4vbg{font-size:.875rem;font-weight:500}.af-help.svelte-5p4vbg{margin:0;font-size:.75rem;color:color-mix(in oklab,currentColor 60%,transparent)}.af-input.svelte-5p4vbg{width:100%;border:1px solid color-mix(in oklab,currentColor 22%,transparent);border-radius:.375rem;padding:.5rem .625rem;background:transparent;box-sizing:border-box}.af-label.svelte-1c6lbe6{font-size:.875rem;font-weight:500}.af-label-row.svelte-1c6lbe6{display:flex;align-items:center;justify-content:space-between;gap:.5rem}.af-help.svelte-1c6lbe6{margin:0;font-size:.75rem;color:color-mix(in oklab,currentColor 60%,transparent)}.af-input.svelte-1c6lbe6{width:100%;border:1px solid color-mix(in oklab,currentColor 22%,transparent);border-radius:.375rem;padding:.5rem .625rem;background:transparent;box-sizing:border-box}.af-nested.svelte-1c6lbe6{border-left:2px solid color-mix(in oklab,currentColor 18%,transparent);padding-left:.75rem;margin:.5rem 0}.af-move-row.svelte-1c6lbe6{display:flex;align-items:center;gap:.375rem;margin-bottom:.375rem}.af-btn.svelte-1c6lbe6{border-radius:.375rem;border:1px solid transparent;padding:.375rem .625rem;font-size:.75rem;cursor:pointer}.af-btn.svelte-1c6lbe6:disabled{opacity:.5;cursor:not-allowed}.af-btn-secondary.svelte-1c6lbe6{border-color:color-mix(in oklab,currentColor 22%,transparent);background:transparent;color:inherit}.af-btn-danger.svelte-1c6lbe6{border-color:#dc2626;color:#dc2626;background:transparent}.af-label.svelte-zpgw7y{font-size:.875rem;font-weight:500}.af-label-row.svelte-zpgw7y{display:flex;align-items:center;justify-content:space-between;gap:.5rem}.af-help.svelte-zpgw7y{margin:0;font-size:.75rem;color:color-mix(in oklab,currentColor 60%,transparent)}.af-nested.svelte-zpgw7y{border-left:2px solid color-mix(in oklab,currentColor 18%,transparent);padding-left:.75rem;margin:.5rem 0}.af-move-row.svelte-zpgw7y{display:flex;align-items:center;gap:.375rem;margin-bottom:.375rem}.af-btn.svelte-zpgw7y{border-radius:.375rem;border:1px solid transparent;padding:.375rem .625rem;font-size:.75rem;cursor:pointer}.af-btn.svelte-zpgw7y:disabled{opacity:.5;cursor:not-allowed}.af-btn-secondary.svelte-zpgw7y{border-color:color-mix(in oklab,currentColor 22%,transparent);background:transparent;color:inherit}.af-btn-danger.svelte-zpgw7y{border-color:#dc2626;color:#dc2626;background:transparent}.af-label.svelte-1a7i94f{font-size:.875rem;font-weight:500}.af-help.svelte-1a7i94f{margin:0;font-size:.75rem;color:color-mix(in oklab,currentColor 60%,transparent)}