kayforms 0.1.1

package/packages/vanilla/src/index.ts

@@ -0,0 +1,254 @@
+// ============================================================================
+// @kayforms/vanilla — Vanilla JS Adapter
+// ============================================================================
+// Binds Kayforms signal-based forms to plain DOM elements.
+// Supports both programmatic binding and declarative data-attribute binding.
+// ============================================================================
+
+import {
+  createEffect,
+  type FormStore,
+  type FieldNode,
+} from "@kayforms/core";
+
+// ---------------------------------------------------------------------------
+// Types
+// ---------------------------------------------------------------------------
+
+export interface BindFieldOptions {
+  /** Custom value extractor (default: el.value) */
+  getValue?: (el: HTMLElement) => unknown;
+  /** Custom value setter (default: el.value = ...) */
+  setValue?: (el: HTMLElement, value: unknown) => void;
+  /** CSS class to add when field has error */
+  errorClass?: string;
+  /** Element to display error message (created automatically if not provided) */
+  errorElement?: HTMLElement;
+}
+
+export interface BindFormOptions extends BindFieldOptions {
+  /** CSS class for error messages (default: 'kayform-error') */
+  errorClass?: string;
+  /** Whether to prevent default form submit (default: true) */
+  preventDefault?: boolean;
+}
+
+// ---------------------------------------------------------------------------
+// bindField — Bind a single input to a FieldNode
+// ---------------------------------------------------------------------------
+
+/**
+ * Bind a DOM input element to a Kayforms FieldNode.
+ * Automatically syncs value, error state, and touched state.
+ * Returns an unbind function.
+ *
+ * @example
+ * ```ts
+ * const form = createForm({ initialValues: { email: '' } });
+ * const emailInput = document.querySelector('#email');
+ * const unbind = bindField(emailInput, form.getField('email'));
+ * // Later: unbind();
+ * ```
+ */
+export function bindField(
+  element: HTMLElement,
+  field: FieldNode,
+  options: BindFieldOptions = {}
+): () => void {
+  const {
+    getValue = (el) => (el as HTMLInputElement).value,
+    setValue = (el, v) => {
+      (el as HTMLInputElement).value = String(v ?? "");
+    },
+    errorClass = "kayform-error",
+  } = options;
+
+  const cleanups: (() => void)[] = [];
+
+  // --- Sync value: signal → DOM ---
+  const disposeValueEffect = createEffect(() => {
+    const val = field.value.value;
+    setValue(element, val);
+  });
+  cleanups.push(disposeValueEffect);
+
+  // --- Sync value: DOM → signal ---
+  const handleInput = () => {
+    const domValue = getValue(element);
+    field.onChange(domValue);
+  };
+  element.addEventListener("input", handleInput);
+  cleanups.push(() => element.removeEventListener("input", handleInput));
+
+  // For select, radio, checkbox
+  const handleChange = () => {
+    const el = element as HTMLInputElement;
+    if (el.type === "checkbox") {
+      field.onChange(el.checked);
+    } else if (el.type === "radio") {
+      if (el.checked) field.onChange(el.value);
+    } else {
+      field.onChange(getValue(element));
+    }
+  };
+  element.addEventListener("change", handleChange);
+  cleanups.push(() => element.removeEventListener("change", handleChange));
+
+  // --- Blur → touched ---
+  const handleBlur = () => field.onBlur();
+  element.addEventListener("blur", handleBlur);
+  cleanups.push(() => element.removeEventListener("blur", handleBlur));
+
+  // --- Error display ---
+  let errorEl = options.errorElement;
+  if (!errorEl) {
+    errorEl = document.createElement("span");
+    errorEl.className = errorClass;
+    errorEl.setAttribute("role", "alert");
+    errorEl.setAttribute("aria-live", "polite");
+    element.parentNode?.insertBefore(errorEl, element.nextSibling);
+    cleanups.push(() => errorEl?.remove());
+  }
+
+  const disposeErrorEffect = createEffect(() => {
+    const err = field.error.value;
+    const isTouched = field.touched.value;
+    if (errorEl) {
+      errorEl.textContent = isTouched && err ? err : "";
+      errorEl.style.display = isTouched && err ? "" : "none";
+    }
+    if (isTouched && err) {
+      element.classList.add(errorClass);
+      element.setAttribute("aria-invalid", "true");
+    } else {
+      element.classList.remove(errorClass);
+      element.removeAttribute("aria-invalid");
+    }
+  });
+  cleanups.push(disposeErrorEffect);
+
+  // Return unbind function
+  return () => {
+    for (const cleanup of cleanups) {
+      cleanup();
+    }
+  };
+}
+
+// ---------------------------------------------------------------------------
+// bindForm — Bind an entire form element
+// ---------------------------------------------------------------------------
+
+/**
+ * Bind a form element to a Kayforms FormStore.
+ * Automatically binds all child inputs with `name` attributes.
+ * Returns an unbind function.
+ *
+ * @example
+ * ```ts
+ * const form = createForm({
+ *   initialValues: { email: '', password: '' },
+ *   onSubmit: (values) => console.log(values),
+ * });
+ * const unbind = bindForm(document.querySelector('form'), form);
+ * ```
+ */
+export function bindForm(
+  formElement: HTMLFormElement,
+  store: FormStore,
+  options: BindFormOptions = {}
+): () => void {
+  const { preventDefault = true, ...fieldOptions } = options;
+  const cleanups: (() => void)[] = [];
+
+  // Find all named inputs
+  const inputs = formElement.querySelectorAll<HTMLElement>(
+    "input[name], select[name], textarea[name]"
+  );
+
+  for (const input of inputs) {
+    const name = input.getAttribute("name");
+    if (!name) continue;
+
+    const field = store.getField(name);
+    const unbind = bindField(input, field, fieldOptions);
+    cleanups.push(unbind);
+  }
+
+  // Handle form submit
+  const handleSubmit = (e: Event) => {
+    if (preventDefault) {
+      e.preventDefault();
+    }
+    store.submit();
+  };
+  formElement.addEventListener("submit", handleSubmit);
+  cleanups.push(() =>
+    formElement.removeEventListener("submit", handleSubmit)
+  );
+
+  return () => {
+    for (const cleanup of cleanups) {
+      cleanup();
+    }
+  };
+}
+
+// ---------------------------------------------------------------------------
+// autoBindForm — Data-attribute-based declarative binding
+// ---------------------------------------------------------------------------
+
+/**
+ * Automatically bind form elements using `data-kayform` attributes.
+ *
+ * @example
+ * ```html
+ * <form id="login">
+ *   <input data-kayform="email" type="email" />
+ *   <input data-kayform="password" type="password" />
+ *   <button type="submit">Login</button>
+ * </form>
+ * ```
+ * ```ts
+ * const form = createForm({ initialValues: { email: '', password: '' } });
+ * const unbind = autoBindForm(document.querySelector('#login'), form);
+ * ```
+ */
+export function autoBindForm(
+  formElement: HTMLFormElement,
+  store: FormStore,
+  options: BindFormOptions = {}
+): () => void {
+  const { preventDefault = true, ...fieldOptions } = options;
+  const cleanups: (() => void)[] = [];
+
+  // Find all elements with data-kayform attribute
+  const elements = formElement.querySelectorAll<HTMLElement>("[data-kayform]");
+
+  for (const el of elements) {
+    const path = el.getAttribute("data-kayform");
+    if (!path) continue;
+
+    const field = store.getField(path);
+    const unbind = bindField(el, field, fieldOptions);
+    cleanups.push(unbind);
+  }
+
+  // Handle form submit
+  const handleSubmit = (e: Event) => {
+    if (preventDefault) {
+      e.preventDefault();
+    }
+    store.submit();
+  };
+  formElement.addEventListener("submit", handleSubmit);
+  cleanups.push(() =>
+    formElement.removeEventListener("submit", handleSubmit)
+  );
+
+  return () => {
+    for (const cleanup of cleanups) {
+      cleanup();
+    }
+  };
+}

package/packages/vanilla/tsconfig.json

@@ -0,0 +1,8 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "outDir": "./dist",
+    "rootDir": "./src"
+  },
+  "include": ["src"]
+}

package/packages/vanilla/tsup.config.ts

@@ -0,0 +1,17 @@
+import { defineConfig } from "tsup";
+
+export default defineConfig({
+  entry: ["src/index.ts"],
+  format: ["esm", "cjs"],
+  dts: true,
+  clean: true,
+  sourcemap: true,
+  minify: false,
+  treeshake: true,
+  external: ["@kayforms/core"],
+  outExtension({ format }) {
+    return {
+      js: format === "cjs" ? ".cjs" : ".js",
+    };
+  },
+});

package/packages/vue/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "@kayforms/vue",
+  "version": "0.1.0",
+  "description": "Vue 3 adapter for Kayforms reactive form library",
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      },
+      "require": {
+        "types": "./dist/index.d.cts",
+        "default": "./dist/index.cjs"
+      }
+    }
+  },
+  "files": ["dist"],
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "clean": "rimraf dist",
+    "typecheck": "tsc --noEmit"
+  },
+  "dependencies": {
+    "@kayforms/core": "workspace:*"
+  },
+  "peerDependencies": {
+    "vue": "^3.0.0"
+  },
+  "devDependencies": {
+    "vue": "^3.4.0",
+    "tsup": "^8.0.0",
+    "typescript": "^5.5.0",
+    "rimraf": "^5.0.0"
+  },
+  "sideEffects": false,
+  "license": "MIT"
+}

package/packages/vue/src/index.ts

@@ -0,0 +1,217 @@
+// ============================================================================
+// @kayforms/vue — Vue 3 Adapter
+// ============================================================================
+// Bridges Kayforms reactive signals to Vue's reactive ref system.
+// Each useField() injects the parent form context and resolves field states.
+// ============================================================================
+
+import {
+  inject,
+  provide,
+  shallowRef,
+  onUnmounted,
+  defineComponent,
+  type InjectionKey,
+  type ShallowRef,
+} from "vue";
+import {
+  createForm,
+  createEffect,
+  type FormConfig,
+  type FormStore,
+  type FormErrors,
+  type FieldNode,
+  type Signal,
+  type Computed,
+} from "@kayforms/core";
+
+// ---------------------------------------------------------------------------
+// Signal → Vue Ref bridge
+// ---------------------------------------------------------------------------
+
+/**
+ * Hook to convert a Kayforms Signal or Computed to a Vue Ref.
+ * Subscribes to the signal and updates the ref value, cleaning up on unmount.
+ */
+export function useSignalValue<T>(signal: Signal<T> | Computed<T>): ShallowRef<T> {
+  const r = shallowRef<T>(signal.peek());
+  const dispose = createEffect(() => {
+    r.value = signal.value;
+  });
+  onUnmounted(dispose);
+  return r;
+}
+
+// ---------------------------------------------------------------------------
+// Injection Context
+// ---------------------------------------------------------------------------
+
+const FORM_KEY: InjectionKey<FormStore> = Symbol("kayforms");
+
+/** Provide form context in a parent component */
+export function provideForm(store: FormStore) {
+  provide(FORM_KEY, store);
+}
+
+/** Inject form context in a child component */
+export function useFormContext(): FormStore {
+  const store = inject(FORM_KEY);
+  if (!store) {
+    throw new Error(
+      "[kayforms/vue] useField must be used inside a form context. " +
+        "Wrap your form with <FormProvider :form=\"...\"> or call provideForm(form.store)."
+    );
+  }
+  return store;
+}
+
+// ---------------------------------------------------------------------------
+// useForm
+// ---------------------------------------------------------------------------
+
+export interface UseFormReturn<T extends Record<string, unknown>> {
+  /** The reactive form store */
+  store: FormStore<T>;
+  /** Current values (reactive) */
+  values: ShallowRef<T>;
+  /** Current errors (reactive) */
+  errors: ShallowRef<FormErrors<T>>;
+  /** Whether the form is dirty */
+  dirty: ShallowRef<boolean>;
+  /** Whether the form is valid */
+  valid: ShallowRef<boolean>;
+  /** Whether the form is submitting */
+  submitting: ShallowRef<boolean>;
+  /** Whether any async validation is running */
+  validating: ShallowRef<boolean>;
+  /** Handle form submission */
+  handleSubmit: (e?: Event) => void;
+  /** Reset the form */
+  reset: (values?: Partial<T>) => void;
+  /** Get a field node by path */
+  getField: <V = unknown>(path: string) => FieldNode<V>;
+}
+
+/**
+ * Create and manage a Kayforms form in a Vue component.
+ */
+export function useForm<T extends Record<string, unknown>>(
+  config: FormConfig<T>
+): UseFormReturn<T> {
+  const store = createForm(config);
+
+  onUnmounted(() => {
+    store.dispose();
+  });
+
+  const values = useSignalValue(store.values);
+  const errors = useSignalValue(store.errors);
+  const dirty = useSignalValue(store.dirty);
+  const valid = useSignalValue(store.valid);
+  const submitting = useSignalValue(store.submitting);
+  const validating = useSignalValue(store.validating);
+
+  const handleSubmit = (e?: Event) => {
+    e?.preventDefault();
+    store.submit();
+  };
+
+  const reset = (newValues?: Partial<T>) => {
+    store.reset(newValues);
+  };
+
+  return {
+    store,
+    values,
+    errors,
+    dirty,
+    valid,
+    submitting,
+    validating,
+    handleSubmit,
+    reset,
+    getField: store.getField,
+  };
+}
+
+// ---------------------------------------------------------------------------
+// useField
+// ---------------------------------------------------------------------------
+
+export interface UseFieldReturn<V = unknown> {
+  /** Current field value */
+  value: ShallowRef<V>;
+  /** Current error message (undefined = valid) */
+  error: ShallowRef<string | undefined>;
+  /** Whether the field has been touched */
+  touched: ShallowRef<boolean>;
+  /** Whether the field value differs from initial */
+  dirty: ShallowRef<boolean>;
+  /** Whether async validation is in progress */
+  validating: ShallowRef<boolean>;
+  /** Update the field value */
+  onChange: (value: V) => void;
+  /** Mark as touched */
+  onBlur: () => void;
+  /** Input props for binding */
+  inputProps: {
+    value: V;
+    onInput: (e: Event) => void;
+    onBlur: () => void;
+  };
+}
+
+/**
+ * Subscribe to a single field's reactive state in a Vue component.
+ */
+export function useField<V = unknown>(path: string): UseFieldReturn<V> {
+  const store = useFormContext();
+  const field = store.getField<V>(path);
+
+  const value = useSignalValue(field.value);
+  const error = useSignalValue(field.error);
+  const touched = useSignalValue(field.touched);
+  const dirty = useSignalValue(field.dirty);
+  const validating = useSignalValue(field.validating);
+
+  const onChange = (v: V) => field.onChange(v);
+  const onBlur = () => field.onBlur();
+
+  const handleInput = (e: Event) => {
+    const val = (e.target as HTMLInputElement).value;
+    field.onChange(val as unknown as V);
+  };
+
+  return {
+    value,
+    error,
+    touched,
+    dirty,
+    validating,
+    onChange,
+    onBlur,
+    inputProps: {
+      value: value.value,
+      onInput: handleInput,
+      onBlur,
+    },
+  };
+}
+
+// ---------------------------------------------------------------------------
+// FormProvider
+// ---------------------------------------------------------------------------
+
+export const FormProvider = defineComponent({
+  name: "FormProvider",
+  props: {
+    form: {
+      type: Object as () => FormStore<any>,
+      required: true,
+    },
+  },
+  setup(props, { slots }) {
+    provideForm(props.form);
+    return () => slots.default?.();
+  },
+});

package/packages/vue/tsconfig.json

@@ -0,0 +1,8 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "outDir": "./dist",
+    "rootDir": "./src"
+  },
+  "include": ["src"]
+}

package/packages/vue/tsup.config.ts

@@ -0,0 +1,17 @@
+import { defineConfig } from "tsup";
+
+export default defineConfig({
+  entry: ["src/index.ts"],
+  format: ["esm", "cjs"],
+  dts: true,
+  clean: true,
+  sourcemap: true,
+  minify: false,
+  treeshake: true,
+  external: ["vue", "@kayforms/core"],
+  outExtension({ format }) {
+    return {
+      js: format === "cjs" ? ".cjs" : ".js",
+    };
+  },
+});

package/pnpm-workspace.yaml

@@ -0,0 +1,3 @@
+packages:
+  - "packages/*"
+  - "examples/*"

package/tsconfig.base.json

@@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "strict": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "declaration": true,
+    "declarationMap": true,
+    "sourceMap": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "jsx": "react-jsx"
+  }
+}