@foormjs/vue 0.2.4 → 0.2.5

package/skills/foormjs-vue/defaults.md

@@ -0,0 +1,266 @@
+# Default Components — @foormjs/vue
+
+> Built-in field components, what each renders, internal helpers, and how to use or override them.
+
+## Using Default Components
+
+### Option 1: Use `createDefaultTypes()` for all defaults
+
+```ts
+import { createDefaultTypes } from '@foormjs/vue'
+
+const types = createDefaultTypes()
+```
+
+### Option 2: Spread and override specific types
+
+```ts
+import { createDefaultTypes } from '@foormjs/vue'
+import MyInput from './components/MyInput.vue'
+import MySelect from './components/MySelect.vue'
+
+const types = { ...createDefaultTypes(), text: MyInput, select: MySelect }
+```
+
+### Option 3: Build from scratch (full control)
+
+```ts
+import type { TFoormTypeComponents } from '@foormjs/vue'
+import {
+  OoInput,
+  OoSelect,
+  OoRadio,
+  OoCheckbox,
+  OoParagraph,
+  OoAction,
+  OoObject,
+  OoArray,
+  OoUnion,
+  OoTuple,
+} from '@foormjs/vue'
+
+const types: TFoormTypeComponents = {
+  text: OoInput,
+  password: OoInput,
+  number: OoInput,
+  select: OoSelect,
+  radio: OoRadio,
+  checkbox: OoCheckbox,
+  paragraph: OoParagraph,
+  action: OoAction,
+  object: OoObject,
+  array: OoArray,
+  union: OoUnion,
+  tuple: OoTuple,
+}
+```
+
+### Option 4: Add custom type keys
+
+```ts
+const types = { ...createDefaultTypes(), textarea: MyTextarea, date: MyDatePicker }
+```
+
+Use `@foorm.type 'textarea'` or `@foorm.type 'date'` in the schema to route to your component.
+
+### Option 5: Per-field named component override
+
+Use `@foorm.component` in the schema + `components` prop on OoForm:
+
+```
+// schema.as — @foorm.component takes priority over @foorm.type / auto-inferred type
+@foorm.component 'StarRating'
+rating?: number
+```
+
+```vue
+<OoForm :types="types" :components="{ StarRating: MyStarRating }" ... />
+```
+
+## Default Type-to-Component Map
+
+| Type key    | Component   | Schema trigger                         |
+| ----------- | ----------- | -------------------------------------- |
+| `text`      | OoInput     | `string` fields (default)              |
+| `password`  | OoInput     | `@foorm.type 'password'`               |
+| `number`    | OoInput     | `number` fields                        |
+| `select`    | OoSelect    | `foorm.select` primitive               |
+| `radio`     | OoRadio     | `foorm.radio` primitive                |
+| `checkbox`  | OoCheckbox  | `boolean` / `foorm.checkbox`           |
+| `paragraph` | OoParagraph | `foorm.paragraph` phantom              |
+| `action`    | OoAction    | `foorm.action` phantom                 |
+| `object`    | OoObject    | nested objects / `@foorm.title` groups |
+| `array`     | OoArray     | `type[]` arrays                        |
+| `union`     | OoUnion     | union types (`A \| B`)                 |
+| `tuple`     | OoTuple     | tuple types `[A, B]`                   |
+
+## Responsibility Matrix — What Each Default Handles
+
+|                         | OoInput/Select/Radio/Checkbox             | OoObject               | OoArray                               | OoUnion              | OoTuple                | OoParagraph | OoAction       |
+| ----------------------- | ----------------------------------------- | ---------------------- | ------------------------------------- | -------------------- | ---------------------- | ----------- | -------------- |
+| **Label**               | via OoFieldShell                          | —                      | —                                     | —                    | —                      | —           | —              |
+| **Title**               | —                                         | OoStructuredHeader     | OoStructuredHeader                    | —                    | OoStructuredHeader     | —           | —              |
+| **Description**         | via OoFieldShell                          | —                      | —                                     | —                    | —                      | —           | —              |
+| **Hint**                | via OoFieldShell                          | —                      | —                                     | —                    | —                      | —           | —              |
+| **Error**               | via OoFieldShell                          | inline div             | inline div                            | —                    | inline div             | —           | —              |
+| **Remove/clear button** | via OoFieldShell                          | OoStructuredHeader     | —                                     | —                    | OoStructuredHeader     | —           | —              |
+| **Variant picker**      | via OoFieldShell                          | OoStructuredHeader     | OoStructuredHeader                    | — (provides context) | OoStructuredHeader     | —           | —              |
+| **Optional N/A**        | via OoFieldShell (OoNoData)               | OoNoData               | OoNoData                              | OoNoData             | OoNoData               | —           | —              |
+| **Sub-field iteration** | —                                         | OoIterator             | OoField per item                      | OoField (inner)      | OoField per pos        | —           | —              |
+| **Composables**         | useConsumeUnionContext (via OoFieldShell) | useConsumeUnionContext | useFoormArray, useConsumeUnionContext | useFoormUnion        | useConsumeUnionContext | —           | —              |
+| **Change events**       | — (OoField handles)                       | —                      | via useFoormArray                     | via useFoormUnion    | —                      | —           | emits `action` |
+
+## Default Component Details
+
+### OoInput (text, password, number)
+
+Wraps `<input>` in OoFieldShell. The `type` prop determines the HTML input type.
+
+- **Label/description/hint/error:** Delegated to OoFieldShell
+- **Remove button:** Delegated to OoFieldShell (renders when `onRemove` provided)
+- **Optional N/A:** Delegated to OoFieldShell
+- **Variant picker:** Delegated to OoFieldShell (renders inline if union context present)
+- **Bindings:** `v-model` on input, `@blur` → `onBlur`
+- **Accessibility:** `aria-required`, `aria-invalid`, `aria-describedby` (via OoFieldShell)
+
+### OoSelect
+
+Wraps `<select>` with `<option>` per entry in OoFieldShell.
+
+- **All chrome:** Delegated to OoFieldShell (same as OoInput)
+- **Options:** Uses `optKey()`/`optLabel()` from `@foormjs/atscript`
+- **Placeholder:** Disabled first `<option>` when `placeholder` prop present
+- **Bindings:** `v-model` on select, `@change` and `@blur` both call `onBlur`
+
+### OoRadio
+
+Wraps radio group in OoFieldShell with custom header slot.
+
+- **All chrome:** Delegated to OoFieldShell
+- **Custom header:** Renders label + description in OoFieldShell's `#header` slot (not as default label)
+- **Radios:** `v-for` over options, grouped by `name` prop, `role="radiogroup"`
+
+### OoCheckbox
+
+Wraps checkbox in OoFieldShell with custom header slot.
+
+- **All chrome:** Delegated to OoFieldShell
+- **Custom header:** Renders label only when optional && not enabled (in `#header` slot)
+- **Label:** Wraps checkbox input for click area
+- **Description:** In `#after-input` slot (after the checkbox label)
+- **Binding:** `:checked` + `@change` manual update + `onBlur()`
+
+### OoParagraph (phantom)
+
+Simple `<p>` tag displaying `value` prop. No OoFieldShell, no model, no validation. Respects `v-show="!hidden"`.
+
+### OoAction (phantom)
+
+Button that emits `action` event with `altAction.id`. No OoFieldShell, no model, no validation. OoField catches the `action` emit and forwards to OoForm.
+
+### OoObject
+
+Container for nested object fields.
+
+- **Title:** OoStructuredHeader (h2 at level 0, h3 at deeper levels)
+- **Remove button:** OoStructuredHeader (when `onRemove` provided)
+- **Variant picker:** OoStructuredHeader (when union context has multiple variants)
+- **Optional N/A:** OoNoData placeholder
+- **Sub-fields:** OoIterator with the nested `objectDef`
+- **Composables:** `useConsumeUnionContext()` — reads and clears union context
+- **Array index:** `formatIndexedLabel()` for titles like "Address #1"
+
+### OoArray
+
+List container with add/remove buttons.
+
+- **Title:** OoStructuredHeader
+- **Items:** `<OoField>` per item (NOT OoIterator) with stable keys from `useFoormArray`
+- **Remove:** Passed as `onRemove` prop to each item's OoField
+- **Add button:** Simple button for scalar items; dropdown with variant options for union items (via `useDropdown()`)
+- **Variant picker:** OoStructuredHeader (when union context present)
+- **Optional N/A:** OoNoData placeholder
+- **Composables:** `useFoormArray()` (manages state + emits `array-add`/`array-remove`), `useConsumeUnionContext()`, `useDropdown()`
+- **Constraints:** `canAdd` respects `@expect.maxLength`, `canRemove` respects `@expect.minLength`
+
+### OoUnion
+
+Variant selector that provides context to children.
+
+- **Variant management:** `useFoormUnion()` — manages variant index, data stashing (saves/restores data on switch)
+- **Provides:** `__foorm_union` context `{ variants, currentIndex, changeVariant }` — consumed by the inner field's component (object/tuple renders variant picker in its header)
+- **Inner field:** Renders `<OoField :key="localUnionIndex">` for the selected variant
+- **Optional N/A:** OoNoData with variant picker dropdown for multiple variants
+- **Does NOT render:** title, label, variant picker, remove button (delegates all to inner field)
+- **Passes through:** `onRemove`/`canRemove`/`removeLabel`/`arrayIndex` to the inner OoField
+
+### OoTuple
+
+Fixed-length field list.
+
+- **Title:** OoStructuredHeader
+- **Items:** `<OoField>` per position from `tupleField.itemFields` (fixed count, no add/remove)
+- **Remove button:** OoStructuredHeader (when `onRemove` provided)
+- **Variant picker:** OoStructuredHeader (when union context present)
+- **Optional N/A:** OoNoData placeholder
+- **Composables:** `useConsumeUnionContext()`
+
+## Internal Components (Not Exported)
+
+Used by default components. Custom components must handle these responsibilities themselves.
+
+### OoFieldShell
+
+Wrapper for leaf field components. Provides:
+
+- Header row: label + required indicator + optional clear button + remove button
+- Inline variant picker (when `__foorm_union` context exists with multiple variants)
+- Optional N/A state (OoNoData)
+- Input slot for the actual element
+- Error/hint display
+- Accessibility IDs: `inputId`, `errorId`, `descId`
+- Slots: `#header`, `#default` (input), `#after-input`
+
+### OoStructuredHeader
+
+Header for structural components (object, array, tuple). Provides:
+
+- Title: `<h2>` at level 0, `<h3>` at deeper levels
+- Inline variant picker (OoVariantPicker) when union context has multiple variants
+- Optional clear button
+- Remove button (when `onRemove` provided)
+- Flexbox layout: title left, buttons right
+
+### OoNoData
+
+Clickable placeholder for optional fields in N/A state.
+
+- Dashed border with "No Data" text
+- Hover state: "Edit" text
+- Click/keyboard triggers `onEdit` callback
+
+### OoVariantPicker
+
+Dropdown for switching union variants.
+
+- Three-dot icon button
+- Dropdown menu listing all variants
+- Active variant highlighted
+- Uses `useDropdown()` for open/close + click-outside
+
+## Styles
+
+```ts
+import '@foormjs/vue/styles' // optional — provides CSS for default components
+```
+
+CSS classes use `oo-` prefix: `oo-form`, `oo-field`, `oo-object`, `oo-array`, etc.
+
+## Gotchas
+
+- Internal components (OoFieldShell, OoStructuredHeader, OoNoData, OoVariantPicker) are NOT exported — custom components must handle label/error/hint/N/A rendering themselves
+- OoInput serves three type keys (`text`, `password`, `number`) — the `type` prop determines behavior
+- OoObject without `@foorm.title` still renders as a container — just without a visible title
+- OoArray uses `<OoField>` per item (not OoIterator) because it needs per-item remove props and stable keys
+- OoUnion renders NO chrome — it provides context and delegates everything to the inner variant's component
+- Default styles are optional but recommended when using default components

package/skills/foormjs-vue/rendering.md

@@ -0,0 +1,175 @@
+# Rendering Architecture — @foormjs/vue
+
+> OoField internals, component resolution, nesting levels, provide/inject keys, and the allStatic optimization.
+
+## Rendering Chain
+
+```
+OoForm (provides context, renders rootField)
+  └── OoField(def.rootField) → types['object'] → OoObject
+        └── OoIterator (iterates def.fields)
+              ├── OoField (leaf) → types['text'] → OoInput / your component
+              ├── OoField (object with @foorm.title) → types['object'] → OoObject
+              │     └── OoIterator → OoField ...
+              ├── OoField (array) → types['array'] → OoArray
+              │     └── OoField (per item via useFoormArray) → ...
+              ├── OoField (union) → types['union'] → OoUnion
+              │     └── OoField (selected variant) → ...
+              └── OoField (tuple) → types['tuple'] → OoTuple
+                    └── OoField (per position) → ...
+```
+
+## OoField — Universal Renderer
+
+`OoField` is the core of the rendering pipeline. For each field it:
+
+1. **Injects** types, components, errors, action handler, change handler from parent OoForm
+2. **Resolves component**: `@foorm.component` → `components[name]`, else → `types[field.type]`
+3. **Resolves all field props** (label, placeholder, disabled, hidden, options, etc.)
+4. **Tracks nesting level** via `__foorm_level` inject/provide
+5. **Renders** via `<component :is="resolvedComponent" v-bind="componentProps" />`
+
+### Two-Path Optimization
+
+OoField detects whether a field has any computed annotations:
+
+- **`allStatic` fast path** — no `@foorm.fn.*` or `@foorm.validate` annotations. All props resolved once at setup, no Vue `computed()` refs created. Significantly reduces reactive overhead.
+- **Dynamic path** — per-property static/dynamic detection. Only properties with `@foorm.fn.*` become computed refs; static props remain plain values.
+
+The `allStatic` flag is set by `createFoormDef` via `hasComputedAnnotations()`.
+
+### Lazy Scope Construction
+
+OoField builds scopes in two phases (dual-scope pattern):
+
+1. **`baseScope`** — `{ v, data, context }` — resolves constraints (disabled, hidden, readonly)
+2. **`fullScope`** — `{ v, data, context, entry }` — resolves display props (label, placeholder, options)
+
+This prevents circular dependency: options can reference constraint state via `entry.disabled`.
+
+### Component Resolution Order
+
+1. `@foorm.component` annotation value → lookup in `components` prop
+2. `types[field.type]` → lookup in `types` prop
+3. If not found → renders error div: `[label] No component for type "X"`
+
+## OoIterator
+
+Iterates `def.fields` and renders `<OoField>` per field. Used by object and tuple components.
+
+```vue
+<OoIterator :def="objectDef" />
+
+<!-- With path prefix (for array items) -->
+<OoIterator :def="objectDef" path-prefix="[0]" />
+
+<!-- With remove props (passed through to child fields) -->
+<OoIterator
+  :def="objectDef"
+  :on-remove="onRemove"
+  :can-remove="canRemove"
+  :remove-label="removeLabel"
+/>
+```
+
+**Props:**
+
+- `def: FoormDef` — form definition to iterate
+- `pathPrefix?: string` — custom path segment (e.g., `[0]` for array items)
+- `onRemove?`, `canRemove?`, `removeLabel?` — passed through to child `OoField`
+
+## Nesting Level Tracking
+
+`OoField` manages nesting depth via `__foorm_level` inject/provide:
+
+- Root object = level 0 (inject default: -1, increments for object/array/tuple types)
+- Each nested object/array/tuple increments the level
+- **Union fields do NOT increment** — prevents double-counting (union → inner object would be +2 otherwise)
+
+Level-aware rendering in default components:
+
+- Level 0: title rendered as `<h2>`, no left border
+- Level > 0: title rendered as `<h3>`, left border + padding
+
+## Provide/Inject Keys
+
+### Set by OoForm
+
+| Key                      | Type                                     | Description                      |
+| ------------------------ | ---------------------------------------- | -------------------------------- |
+| `__foorm_root_data`      | `ComputedRef<TFormData>`                 | Reactive form data               |
+| `__foorm_path_prefix`    | `ComputedRef<string>`                    | Current path prefix ('' at root) |
+| `__foorm_types`          | `ComputedRef<TFoormTypeComponents>`      | Type-to-component map            |
+| `__foorm_components`     | `ComputedRef<Record<string, Component>>` | Named component map              |
+| `__foorm_errors`         | `ComputedRef<Record<string, string>>`    | External errors                  |
+| `__foorm_action_handler` | `(name, data) => void`                   | Action event forwarder           |
+| `__foorm_change_handler` | `(type, path, value) => void`            | Change event emitter             |
+
+### Set by OoField
+
+| Key                   | Type                  | Description               |
+| --------------------- | --------------------- | ------------------------- |
+| `__foorm_path_prefix` | `ComputedRef<string>` | Updated path for children |
+| `__foorm_level`       | `number`              | Incremented nesting level |
+
+### Set by useFoormForm (from @foormjs/composables)
+
+| Key                    | Type                     | Description                       |
+| ---------------------- | ------------------------ | --------------------------------- |
+| `__foorm_form`         | `TFoormState`            | Form state (validation, registry) |
+| `__foorm_form_data`    | `ComputedRef<TFormData>` | Form data wrapper                 |
+| `__foorm_form_context` | `ComputedRef<TContext>`  | External context                  |
+
+### Set by useFoormUnion
+
+| Key             | Type                 | Description                     |
+| --------------- | -------------------- | ------------------------------- |
+| `__foorm_union` | `TFoormUnionContext` | Variant state + change function |
+
+## useFoormContext (Internal)
+
+Internal composable used by default components to access form state and build scopes.
+
+```ts
+const {
+  foormState, // TFoormState
+  rootFormData, // () => Record<string, unknown>
+  pathPrefix, // ComputedRef<string>
+  formContext, // ComputedRef<Record<string, unknown>>
+  joinPath, // (segment | fn) => ComputedRef<string>
+  buildPath, // (segment) => string
+  getByPath, // (path) => unknown
+  setByPath, // (path, value) => void
+  buildScope, // (v?, entry?) => TFoormFnScope
+} = useFoormContext('MyComponent')
+```
+
+Not publicly exported — use `getByPath`/`setByPath` from `@foormjs/atscript` directly in custom components.
+
+## Change Events
+
+OoField and composables emit change events via `__foorm_change_handler`:
+
+| Source        | Type             | When                                      |
+| ------------- | ---------------- | ----------------------------------------- |
+| OoField       | `'update'`       | On blur, if value changed since last blur |
+| useFoormArray | `'array-add'`    | After `addItem()`                         |
+| useFoormArray | `'array-remove'` | After `removeItem()`                      |
+| useFoormUnion | `'union-switch'` | After `changeVariant()`                   |
+
+Note: `'update'` fires on blur (not on every keystroke) to reduce noise.
+
+## Best Practices
+
+- Use `OoIterator` in custom object components — don't manually iterate `objectDef.fields`
+- Pass through `onRemove`/`canRemove`/`removeLabel` from your component to `OoField` or `OoIterator`
+- Don't access provide/inject keys directly in custom components — use the composables (`useFoormArray`, etc.)
+- The `allStatic` optimization is automatic — no action needed from custom components
+
+## Gotchas
+
+- Union fields provide `__foorm_path_prefix` but NOT an incremented `__foorm_level` — prevents double nesting visuals
+- `OoIterator` provides its own `__foorm_path_prefix` — nested iterators correctly stack path segments
+- `__foorm_level` defaults to `-1` when injected, so the first object/array increments it to `0`
+- Change events are batched per-field — multiple rapid changes to the same field only emit once on blur
+- Missing component for a field type renders an error div, not an exception — check console for warnings

package/dist/index.umd.cjs

@@ -1 +0,0 @@
-(function(p,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue"),require("foorm"),require("vuiless-forms"),require("@foormjs/atscript")):typeof define=="function"&&define.amd?define(["exports","vue","foorm","vuiless-forms","@foormjs/atscript"],e):(p=typeof globalThis<"u"?globalThis:p||self,e(p.index={},p.Vue,p.foorm,p.vuilessForms,p.atscript))})(this,function(p,e,V,F,q){"use strict";function A(r,o){if(!r)return;const n={};for(const[m,c]of Object.entries(r))n[m]=V.evalComputed(c,o);return n}const w=e.defineComponent({__name:"oo-field",props:{field:{},type:{},component:{},autocomplete:{},altAction:{},order:{},name:{},phantom:{type:Boolean},label:{type:[String,Function]},description:{type:[String,Function]},hint:{type:[String,Function]},placeholder:{type:[String,Function]},optional:{type:[Boolean,Function]},disabled:{type:[Boolean,Function]},hidden:{type:[Boolean,Function]},readonly:{type:[Boolean,Function]},classes:{type:[String,Object,Function]},styles:{type:[String,Object,Function]},options:{type:[Array,Function]},attrs:{},value:{type:Function},validators:{},maxLength:{},minLength:{},min:{},max:{},error:{}},setup(r){const o=r,n=e.inject("vuiless");function m(a,u,h){return typeof a=="function"?e.computed(()=>a(u.value)):a??h}const c=a=>typeof a=="object"&&a!==null&&"value"in a?a.value:a,k=e.computed(()=>({v:n.value.formData[o.field],data:n.value.formData,context:n.value.formContext??{},entry:void 0})),b=m(o.optional,k,!1),D=m(o.disabled,k,!1),B=m(o.hidden,k,!1),g=m(o.readonly,k,!1),x=o.phantom?void 0:e.computed(()=>!c(b)),i=e.computed(()=>({v:n.value.formData[o.field],data:n.value.formData,context:n.value.formContext??{},entry:{field:o.field,type:o.type,component:o.component,name:o.name||o.field,optional:c(b),disabled:c(D),hidden:c(B),readonly:c(g)}})),S=m(o.label,i,void 0),l=m(o.description,i,void 0),C=m(o.hint,i,void 0),d=m(o.placeholder,i,void 0),y=m(o.options,i,void 0),E=m(o.styles,i,void 0),t=e.computed(()=>{const a=typeof o.classes=="function"?o.classes(i.value):o.classes;return typeof a=="string"?{[a]:!0,disabled:c(D),required:!c(b)}:{...a,disabled:c(D),required:!c(b)}});function f(a,u){return{...t.value,error:!!a||!!u}}const N=e.computed(()=>A(o.attrs,i.value)),_=o.phantom?e.computed(()=>typeof o.value=="function"?o.value(i.value):o.value):void 0;if(typeof o.value=="function"&&!o.phantom){const a=e.computed(()=>{if(c(g))return o.value(i.value)});e.watch(a,u=>{u!==void 0&&c(g)&&(n.value.formData[o.field]=u)},{immediate:!0})}const s=o.validators.map(a=>(u,h,ne)=>a({v:u,data:h,context:ne??{},entry:i.value.entry}));return(a,u)=>(e.openBlock(),e.createBlock(e.unref(F.VuilessField),{modelValue:e.unref(n).formData[o.field],"onUpdate:modelValue":u[0]||(u[0]=h=>e.unref(n).formData[o.field]=h),rules:e.unref(s)},{default:e.withCtx(h=>[e.renderSlot(a.$slots,"default",{onBlur:h.onBlur,error:r.error||h.error,model:h.model,formData:e.unref(n).formData,formContext:e.unref(n).formContext,label:e.unref(S),description:e.unref(l),hint:e.unref(C),placeholder:e.unref(d),value:e.unref(_),classes:f(r.error,h.error),styles:e.unref(E),optional:e.unref(b),disabled:e.unref(D),hidden:e.unref(B),readonly:e.unref(g),type:r.type,altAction:r.altAction,component:r.component,vName:r.name,field:r.field,options:e.unref(y),maxLength:r.maxLength,required:e.unref(x),autocomplete:r.autocomplete,attrs:N.value})]),_:3},8,["modelValue","rules"]))}}),U={key:0},L={key:1},$={key:0},j=["onUpdate:modelValue","onBlur","placeholder","autocomplete","name","type","disabled","readonly"],P={class:"oo-error-slot"},O={key:4},T={key:0},z=["onUpdate:modelValue","onBlur","name","disabled","readonly"],M={key:0,value:"",disabled:""},R=["value"],K={class:"oo-error-slot"},G={class:"oo-field-label"},H={key:0},I={class:"oo-radio-group"},J=["value","onUpdate:modelValue","onBlur","name","disabled","readonly"],Q={class:"oo-error-slot"},W=["onUpdate:modelValue","onBlur","name","disabled","readonly"],X={key:0},Y={class:"oo-error-slot"},Z=["onClick"],v={key:9},ee=["disabled"],te=e.defineComponent({__name:"oo-form",props:{form:{},formData:{},formContext:{},firstValidation:{},components:{},types:{},errors:{}},emits:["submit","action","unsupported-action"],setup(r,{emit:o}){const n=r,m=e.ref({}),c=e.computed(()=>n.formData||m.value),k=e.computed(()=>({v:void 0,data:c.value,context:n.formContext??{},entry:void 0})),b=e.computed(()=>V.evalComputed(n.form.title,k.value)),D=e.computed(()=>V.evalComputed(n.form.submit.text,k.value)),B=e.computed(()=>V.evalComputed(n.form.submit.disabled,k.value));function g(l){V.supportsAltAction(n.form,l)?x("action",l,c.value):x("unsupported-action",l,c.value)}const x=o;function i(l){return typeof l=="string"?l:l.key}function S(l){return typeof l=="string"?l:l.label}return(l,C)=>(e.openBlock(),e.createBlock(e.unref(F.VuilessForm),{"first-validation":r.firstValidation,onSubmit:C[0]||(C[0]=d=>x("submit",d)),"form-data":c.value,"form-context":r.formContext},{default:e.withCtx(d=>[e.renderSlot(l.$slots,"form.header",{clearErrors:d.clearErrors,reset:d.reset,title:b.value,formContext:r.formContext,disabled:B.value},()=>[b.value?(e.openBlock(),e.createElementBlock("h2",U,e.toDisplayString(b.value),1)):e.createCommentVNode("",!0)]),e.renderSlot(l.$slots,"form.before",{clearErrors:d.clearErrors,reset:d.reset}),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(n.form.fields,y=>{var E;return e.openBlock(),e.createBlock(w,e.mergeProps({key:y.field},{ref_for:!0},y,{error:(E=r.errors)==null?void 0:E[y.field]}),{default:e.withCtx(t=>[e.renderSlot(l.$slots,`field:${t.type}`,e.mergeProps({ref_for:!0},t),()=>{var f,N,_;return[y.component&&((f=n.components)!=null&&f[y.component])?(e.openBlock(),e.createBlock(e.resolveDynamicComponent(n.components[y.component]),e.mergeProps({key:0,"on-blur":t.onBlur,error:t.error,model:t.model,"form-data":t.formData,"form-context":t.formContext,label:t.label,description:t.description,hint:t.hint,placeholder:t.placeholder,class:t.classes,style:t.styles,optional:t.optional,required:!t.required,disabled:t.disabled,hidden:t.hidden,type:t.type,"alt-action":t.altAction,name:t.vName,field:t,options:t.options,"max-length":t.maxLength,autocomplete:t.autocomplete,onAction:g},{ref_for:!0},t.attrs,{modelValue:t.model.value,"onUpdate:modelValue":s=>t.model.value=s}),null,16,["on-blur","error","model","form-data","form-context","label","description","hint","placeholder","class","style","optional","required","disabled","hidden","type","alt-action","name","field","options","max-length","autocomplete","modelValue","onUpdate:modelValue"])):y.component&&!((N=n.components)!=null&&N[y.component])?(e.openBlock(),e.createElementBlock("div",L," ["+e.toDisplayString(t.label)+'] Component "'+e.toDisplayString(t.component)+'" not supplied ',1)):(_=n.types)!=null&&_[y.type]?(e.openBlock(),e.createBlock(e.resolveDynamicComponent(n.types[y.type]),e.mergeProps({key:2,"on-blur":t.onBlur,error:t.error,model:t.model,"form-data":t.formData,"form-context":t.formContext,label:t.label,description:t.description,hint:t.hint,placeholder:t.placeholder,class:t.classes,style:t.styles,optional:t.optional,required:!t.required,disabled:t.disabled,hidden:t.hidden,type:t.type,"alt-action":t.altAction,name:t.vName,field:t,options:t.options,"max-length":t.maxLength,autocomplete:t.autocomplete,onAction:g},{ref_for:!0},t.attrs,{modelValue:t.model.value,"onUpdate:modelValue":s=>t.model.value=s}),null,16,["on-blur","error","model","form-data","form-context","label","description","hint","placeholder","class","style","optional","required","disabled","hidden","type","alt-action","name","field","options","max-length","autocomplete","modelValue","onUpdate:modelValue"])):["text","password","number"].includes(t.type)?e.withDirectives((e.openBlock(),e.createElementBlock("div",{key:3,class:e.normalizeClass(["oo-default-field",t.classes])},[e.createElementVNode("label",null,e.toDisplayString(t.label),1),t.description?(e.openBlock(),e.createElementBlock("span",$,e.toDisplayString(t.description),1)):e.createCommentVNode("",!0),e.withDirectives(e.createElementVNode("input",e.mergeProps({"onUpdate:modelValue":s=>t.model.value=s,onBlur:t.onBlur,placeholder:t.placeholder,autocomplete:t.autocomplete,name:t.vName,type:t.type,disabled:t.disabled,readonly:t.readonly},{ref_for:!0},t.attrs),null,16,j),[[e.vModelDynamic,t.model.value]]),e.createElementVNode("div",P,e.toDisplayString(t.error||t.hint),1)],2)),[[e.vShow,!t.hidden]]):t.type==="paragraph"?(e.openBlock(),e.createElementBlock("p",O,e.toDisplayString(t.value),1)):t.type==="select"?e.withDirectives((e.openBlock(),e.createElementBlock("div",{key:5,class:e.normalizeClass(["oo-default-field",t.classes])},[e.createElementVNode("label",null,e.toDisplayString(t.label),1),t.description?(e.openBlock(),e.createElementBlock("span",T,e.toDisplayString(t.description),1)):e.createCommentVNode("",!0),e.withDirectives(e.createElementVNode("select",e.mergeProps({"onUpdate:modelValue":s=>t.model.value=s,onBlur:t.onBlur,name:t.vName,disabled:t.disabled,readonly:t.readonly},{ref_for:!0},t.attrs),[t.placeholder?(e.openBlock(),e.createElementBlock("option",M,e.toDisplayString(t.placeholder),1)):e.createCommentVNode("",!0),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.options,s=>(e.openBlock(),e.createElementBlock("option",{key:i(s),value:i(s)},e.toDisplayString(S(s)),9,R))),128))],16,z),[[e.vModelSelect,t.model.value]]),e.createElementVNode("div",K,e.toDisplayString(t.error||t.hint),1)],2)),[[e.vShow,!t.hidden]]):t.type==="radio"?e.withDirectives((e.openBlock(),e.createElementBlock("div",{key:6,class:e.normalizeClass(["oo-default-field oo-radio-field",t.classes])},[e.createElementVNode("span",G,e.toDisplayString(t.label),1),t.description?(e.openBlock(),e.createElementBlock("span",H,e.toDisplayString(t.description),1)):e.createCommentVNode("",!0),e.createElementVNode("div",I,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.options,s=>(e.openBlock(),e.createElementBlock("label",{key:i(s)},[e.withDirectives(e.createElementVNode("input",e.mergeProps({type:"radio",value:i(s),"onUpdate:modelValue":a=>t.model.value=a,onBlur:t.onBlur,name:t.vName,disabled:t.disabled,readonly:t.readonly},{ref_for:!0},t.attrs),null,16,J),[[e.vModelRadio,t.model.value]]),e.createTextVNode(" "+e.toDisplayString(S(s)),1)]))),128))]),e.createElementVNode("div",Q,e.toDisplayString(t.error||t.hint),1)],2)),[[e.vShow,!t.hidden]]):t.type==="checkbox"?e.withDirectives((e.openBlock(),e.createElementBlock("div",{key:7,class:e.normalizeClass(["oo-default-field oo-checkbox-field",t.classes])},[e.createElementVNode("label",null,[e.withDirectives(e.createElementVNode("input",e.mergeProps({type:"checkbox","onUpdate:modelValue":s=>t.model.value=s,onBlur:t.onBlur,name:t.vName,disabled:t.disabled,readonly:t.readonly},{ref_for:!0},t.attrs),null,16,W),[[e.vModelCheckbox,t.model.value]]),e.createTextVNode(" "+e.toDisplayString(t.label),1)]),t.description?(e.openBlock(),e.createElementBlock("span",X,e.toDisplayString(t.description),1)):e.createCommentVNode("",!0),e.createElementVNode("div",Y,e.toDisplayString(t.error||t.hint),1)],2)),[[e.vShow,!t.hidden]]):t.type==="action"?(e.openBlock(),e.createElementBlock("div",{key:8,class:e.normalizeClass(["oo-default-field oo-action-field",t.classes])},[e.createElementVNode("button",{type:"button",onClick:s=>g(t.altAction)},e.toDisplayString(t.label),9,Z)],2)):(e.openBlock(),e.createElementBlock("div",v," ["+e.toDisplayString(t.label)+'] Not supported field type "'+e.toDisplayString(t.type)+'" '+e.toDisplayString(t.component),1))]})]),_:2},1040,["error"])}),128)),e.renderSlot(l.$slots,"form.after",{clearErrors:d.clearErrors,reset:d.reset,disabled:B.value,formContext:r.formContext}),e.renderSlot(l.$slots,"form.submit",{disabled:B.value,text:D.value,clearErrors:d.clearErrors,reset:d.reset,formContext:r.formContext},()=>[e.createElementVNode("button",{disabled:B.value},e.toDisplayString(D.value),9,ee)]),e.renderSlot(l.$slots,"form.footer",{disabled:B.value,clearErrors:d.clearErrors,reset:d.reset,formContext:r.formContext})]),_:3},8,["first-validation","form-data","form-context"]))}});function oe(r){const o=q.createFoorm(r),n=e.reactive(V.createFormData(o.fields));return{form:o,formData:n}}p.OoField=w,p.OoForm=te,p.useFoorm=oe,Object.defineProperty(p,Symbol.toStringTag,{value:"Module"})});

package/dist/style.css

@@ -1 +0,0 @@
-.oo-default-field{display:flex;flex-direction:column;gap:4px;margin-bottom:4px}.oo-default-field label{font-size:13px;font-weight:600;color:#374151}.oo-default-field.required label:after{content:" *";color:#ef4444}.oo-default-field span{font-size:12px;color:#6b7280}.oo-default-field input,.oo-default-field select{padding:8px 12px;border:1px solid #d1d5db;border-radius:6px;font-size:14px;color:#1d1d1f;background:#fff;transition:border-color .15s,box-shadow .15s;outline:none}.oo-default-field input::placeholder{color:#9ca3af}.oo-default-field input:focus,.oo-default-field select:focus{border-color:#6366f1;box-shadow:0 0 0 3px #6366f126}.oo-default-field input:disabled,.oo-default-field select:disabled{background:#f3f4f6;color:#9ca3af;cursor:not-allowed}.oo-default-field.error input,.oo-default-field.error select{border-color:#ef4444}.oo-default-field.error input:focus,.oo-default-field.error select:focus{box-shadow:0 0 0 3px #ef444426}.oo-default-field .oo-field-label{font-size:13px;font-weight:600;color:#374151}.oo-radio-group{display:flex;flex-direction:column;gap:6px}.oo-radio-group label{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:400;color:#1d1d1f;cursor:pointer}.oo-radio-group input[type=radio]{padding:0;border:none;box-shadow:none}.oo-checkbox-field>label{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:400;color:#1d1d1f;cursor:pointer}.oo-checkbox-field>label input[type=checkbox]{padding:0;border:none;box-shadow:none}.oo-default-field .oo-error-slot{min-height:16px;line-height:16px;font-size:12px;color:#6b7280}.oo-default-field.error .oo-error-slot{color:#ef4444}.oo-default-field.oo-action-field button{padding:8px 16px;border:1px solid #d1d5db;border-radius:6px;background:#fff;font-size:13px;font-weight:500;color:#374151;cursor:pointer;transition:background .15s,border-color .15s}.oo-default-field.oo-action-field button:hover{background:#f9fafb;border-color:#9ca3af}h2{margin:0 0 8px;font-size:20px;font-weight:700;color:#111827}p{margin:0 0 4px;font-size:14px;color:#6b7280}button[type=submit],button:not([type]){margin-top:8px;padding:10px 20px;border:none;border-radius:6px;background:#6366f1;color:#fff;font-size:14px;font-weight:600;cursor:pointer;transition:background .15s}button[type=submit]:hover,button:not([type]):hover{background:#4f46e5}button[type=submit]:disabled,button:not([type]):disabled{background:#c7d2fe;cursor:not-allowed}