@shamar/core 0.1.0

package/dist/form.js

@@ -0,0 +1,756 @@
+import { buildSchemaNodes, collectFields, } from './schemas.js';
+import { currencySymbol, normalizeCurrencyOptions, } from './currency.js';
+import { applyRelationship, } from './relation.js';
+/**
+ * Base for form field components (`TextInput::make()` style).
+ * Field chains only expose field modifiers — never sibling factories.
+ */
+export class FormComponent {
+    /** Shared schema leaf marker (Filament 5 schemas). */
+    _schemaLeaf = 'field';
+    config;
+    constructor(name, type) {
+        this.config = { name, type };
+    }
+    /** Apply Filament-style relationship binding. */
+    applyRelationship(resource, titleAttribute, options) {
+        applyRelationship(this.config, resource, titleAttribute, options);
+    }
+    setCreateOption(value) {
+        if (!this.config.relation) {
+            throw new Error(`Call .relationship() before .createOption() on field "${this.config.name}"`);
+        }
+        this.config.relation.createOption = value;
+    }
+    setCreateAndEditOption(value) {
+        if (!this.config.relation) {
+            throw new Error(`Call .relationship() before .createAndEditOption() on field "${this.config.name}"`);
+        }
+        this.config.relation.createAndEditOption = value;
+    }
+    setRelationWidget(widget) {
+        if (!this.config.relation) {
+            throw new Error(`Call .relationship() before .widget() on field "${this.config.name}"`);
+        }
+        this.config.relation.widget = widget;
+        if (widget === 'radio') {
+            this.config.type = 'radio';
+        }
+        else if (widget === 'checkboxList') {
+            this.config.type = 'checkboxList';
+            this.config.multiple = true;
+        }
+        else if (widget === 'table') {
+            this.config.type = 'relationTable';
+            this.config.multiple = true;
+        }
+        else {
+            this.config.type = 'relation';
+        }
+    }
+    label(value) {
+        this.config.label = value;
+        return this;
+    }
+    required(value = true) {
+        this.config.required = value;
+        return this;
+    }
+    searchable(value = true) {
+        this.config.searchable = value;
+        return this;
+    }
+    placeholder(value) {
+        this.config.placeholder = value;
+        return this;
+    }
+    /** Helper text below the field. Alias: `helperText()`. */
+    help(value) {
+        this.config.help = value;
+        return this;
+    }
+    /** Filament-style alias for `help()`. */
+    helperText(value) {
+        return this.help(value);
+    }
+    /** Short text beside the label. */
+    hint(value) {
+        this.config.hint = value;
+        return this;
+    }
+    hiddenOnForm(value = true) {
+        this.config.hiddenOnForm = value;
+        return this;
+    }
+    hiddenOnDetail(value = true) {
+        this.config.hiddenOnDetail = value;
+        return this;
+    }
+    readonly(value = true) {
+        this.config.readonly = value;
+        return this;
+    }
+    disabled(value = true) {
+        this.config.disabled = value;
+        return this;
+    }
+    visible(value = true) {
+        this.config.visible = value;
+        return this;
+    }
+    /**
+     * Hide when true (inverse of {@link visible}).
+     * Closures receive the same FieldContext as `visible` / `required`.
+     */
+    hidden(value = true) {
+        if (typeof value === 'function') {
+            const predicate = value;
+            this.config.visible = (ctx) => !predicate(ctx);
+        }
+        else {
+            this.config.visible = !value;
+        }
+        return this;
+    }
+    dehydrated(value = true) {
+        this.config.dehydrated = value;
+        return this;
+    }
+    default(value) {
+        this.config.default = value;
+        return this;
+    }
+    createOnly(value = true) {
+        this.config.createOnly = value;
+        return this;
+    }
+    columnSpan(value) {
+        this.config.columnSpan = value;
+        return this;
+    }
+    colspan(value) {
+        return this.columnSpan(value);
+    }
+    columnSpanFull() {
+        this.config.columnSpan = 'full';
+        return this;
+    }
+    colspanFull() {
+        return this.columnSpanFull();
+    }
+    columnStart(value) {
+        this.config.columnStart = value;
+        return this;
+    }
+    /** Filament-style horizontal alignment of the field control. */
+    alignment(value) {
+        this.config.alignment = value;
+        return this;
+    }
+    alignStart() {
+        return this.alignment('start');
+    }
+    alignCenter() {
+        return this.alignment('center');
+    }
+    alignEnd() {
+        return this.alignment('end');
+    }
+    alignJustify() {
+        return this.alignment('justify');
+    }
+    alignLeft() {
+        return this.alignment('left');
+    }
+    alignRight() {
+        return this.alignment('right');
+    }
+    inline(value = true) {
+        this.config.inline = value;
+        return this;
+    }
+    rows(value) {
+        this.config.rows = value;
+        return this;
+    }
+    prefix(value) {
+        this.config.prefix = value;
+        return this;
+    }
+    suffix(value) {
+        this.config.suffix = value;
+        return this;
+    }
+    /** Filament-style: prefix inside (default) or outside the input border. */
+    inlinePrefix(value = true) {
+        this.config.inlinePrefix = value;
+        return this;
+    }
+    /** Filament-style: suffix inside (default) or outside the input border. */
+    inlineSuffix(value = true) {
+        this.config.inlineSuffix = value;
+        return this;
+    }
+    /** Set both prefix and suffix inline mode. */
+    inlineAffixes(value = true) {
+        this.config.inlinePrefix = value;
+        this.config.inlineSuffix = value;
+        return this;
+    }
+    prefixIcon(value) {
+        this.config.prefixIcon = value;
+        return this;
+    }
+    suffixIcon(value) {
+        this.config.suffixIcon = value;
+        return this;
+    }
+    autocomplete(value) {
+        this.config.autocomplete = value;
+        return this;
+    }
+    inputMode(value) {
+        this.config.inputMode = value;
+        return this;
+    }
+    /** Exact string length (also sets minLength + maxLength). */
+    length(value) {
+        this.config.length = value;
+        this.config.minLength = value;
+        this.config.maxLength = value;
+        return this;
+    }
+    minLength(value) {
+        this.config.minLength = value;
+        return this;
+    }
+    maxLength(value) {
+        this.config.maxLength = value;
+        return this;
+    }
+    minValue(value) {
+        this.config.minValue = value;
+        return this;
+    }
+    /** Filament alias for numeric/date lower bound. */
+    min(value) {
+        return this.minValue(value);
+    }
+    maxValue(value) {
+        this.config.maxValue = value;
+        return this;
+    }
+    /** Filament alias for numeric/date upper bound. */
+    max(value) {
+        return this.maxValue(value);
+    }
+    step(value) {
+        this.config.step = value;
+        return this;
+    }
+    /** HTML `pattern` + server-side RegExp check. */
+    pattern(value) {
+        this.config.pattern = value;
+        return this;
+    }
+    /** Alias for `pattern()`. */
+    regex(value) {
+        return this.pattern(value);
+    }
+    copyable(value = true) {
+        this.config.copyable = value;
+        return this;
+    }
+    datalist(values) {
+        this.config.datalist = [...values];
+        return this;
+    }
+    extraInputAttributes(attrs, options) {
+        this.config.extraInputAttributes = options?.merge
+            ? { ...this.config.extraInputAttributes, ...attrs }
+            : { ...attrs };
+        return this;
+    }
+    /**
+     * Re-evaluate form state while typing (Filament-style).
+     */
+    live(mode = true) {
+        this.config.live = mode;
+        return this;
+    }
+    afterStateUpdated(callback) {
+        this.config.afterStateUpdated = callback;
+        return this;
+    }
+    unique(options = true) {
+        this.config.unique = options;
+        return this;
+    }
+    /** @internal */
+    build() {
+        return { ...this.config };
+    }
+}
+/** Filament `TextInput::make()`. */
+export class TextInput extends FormComponent {
+    static make(name) {
+        return new TextInput(name);
+    }
+    constructor(name) {
+        super(name, 'text');
+    }
+    email() {
+        this.config.type = 'email';
+        return this;
+    }
+    password() {
+        this.config.type = 'password';
+        return this;
+    }
+    /** Filament `revealable()` — show/hide password toggle. */
+    revealable(value = true) {
+        this.config.revealable = value;
+        return this;
+    }
+    tel() {
+        this.config.type = 'tel';
+        this.config.inputMode = this.config.inputMode ?? 'tel';
+        return this;
+    }
+    url() {
+        this.config.type = 'url';
+        return this;
+    }
+    numeric() {
+        this.config.type = 'number';
+        this.config.inputMode = this.config.inputMode ?? 'decimal';
+        return this;
+    }
+    integer() {
+        this.config.type = 'number';
+        this.config.step = this.config.step ?? 1;
+        this.config.inputMode = this.config.inputMode ?? 'numeric';
+        return this;
+    }
+    /**
+     * Format a numeric field as currency (display via Intl; value stays numeric).
+     * Sets `numeric()` and a currency-symbol prefix when none is set.
+     */
+    currency(codeOrOptions = 'USD', options) {
+        this.numeric();
+        const currency = normalizeCurrencyOptions(codeOrOptions, options);
+        this.config.currency = currency;
+        this.config.step = this.config.step ?? (currency.precision === 0 ? 1 : 0.01);
+        if (this.config.prefix == null && this.config.prefixIcon == null) {
+            this.config.prefix = currencySymbol(currency.code, currency.locale);
+        }
+        return this;
+    }
+}
+/** Filament `Textarea::make()`. */
+export class Textarea extends FormComponent {
+    static make(name) {
+        return new Textarea(name);
+    }
+    constructor(name) {
+        super(name, 'textarea');
+    }
+}
+/** Filament `Select::make()`. */
+export class Select extends FormComponent {
+    static make(name) {
+        return new Select(name);
+    }
+    constructor(name) {
+        super(name, 'select');
+        this.config.options = [];
+    }
+    options(entries) {
+        this.config.options = entries;
+        return this;
+    }
+    multiple(value = true) {
+        this.config.multiple = value;
+        return this;
+    }
+    /**
+     * When `false`, omit the blank placeholder option (Filament `selectablePlaceholder(false)`).
+     */
+    selectablePlaceholder(value = true) {
+        this.config.selectablePlaceholder = value;
+        return this;
+    }
+    /**
+     * Use a native `<select>` instead of the Shamar combobox.
+     * Useful for simple forms or when custom OS select behaviour is preferred.
+     */
+    native(value = true) {
+        this.config.nativeSelect = value;
+        return this;
+    }
+    /**
+     * Filament-style relationship binding.
+     * @example Select.make('companyId').relationship('companies', 'name')
+     * @example Select.make('categoryIds').relationship('categories', 'name', { kind: 'manyToMany' }).multiple()
+     */
+    relationship(resource, titleAttribute, options) {
+        this.applyRelationship(resource, titleAttribute, options);
+        return this;
+    }
+    /** Presentation widget (`combobox` default for BelongsTo / M2M). */
+    widget(value) {
+        this.setRelationWidget(value);
+        return this;
+    }
+    /** Use radio buttons for a BelongsTo relationship. */
+    radio() {
+        return this.widget('radio');
+    }
+    /** Enable inline Create from the search query (quick-create). */
+    createOption(value = true) {
+        this.setCreateOption(value);
+        return this;
+    }
+    /** Enable Create & Edit (open related create dialog, then pick). */
+    createAndEditOption(value = true) {
+        this.setCreateAndEditOption(value);
+        return this;
+    }
+}
+/** Filament `Toggle::make()` — switch UI. */
+export class Toggle extends FormComponent {
+    static make(name) {
+        return new Toggle(name);
+    }
+    constructor(name) {
+        super(name, 'boolean');
+    }
+}
+/** Filament `Checkbox::make()` — native checkbox (distinct from Toggle). */
+export class Checkbox extends FormComponent {
+    static make(name) {
+        return new Checkbox(name);
+    }
+    constructor(name) {
+        super(name, 'checkbox');
+    }
+}
+/** Filament `Radio::make()`. */
+export class Radio extends FormComponent {
+    static make(name) {
+        return new Radio(name);
+    }
+    constructor(name) {
+        super(name, 'radio');
+        this.config.options = [];
+    }
+    options(entries) {
+        this.config.options = entries;
+        return this;
+    }
+    relationship(resource, titleAttribute, options) {
+        this.applyRelationship(resource, titleAttribute, {
+            ...options,
+            kind: options?.kind ?? 'belongsTo',
+            widget: options?.widget ?? 'radio',
+        });
+        return this;
+    }
+    createOption(value = true) {
+        this.setCreateOption(value);
+        return this;
+    }
+    createAndEditOption(value = true) {
+        this.setCreateAndEditOption(value);
+        return this;
+    }
+}
+/** Multi-option checkbox list (static options or manyToMany relationship). */
+export class CheckboxList extends FormComponent {
+    static make(name) {
+        return new CheckboxList(name);
+    }
+    constructor(name) {
+        super(name, 'checkboxList');
+        this.config.options = [];
+        this.config.multiple = true;
+    }
+    options(entries) {
+        this.config.options = entries;
+        return this;
+    }
+    relationship(resource, titleAttribute, options) {
+        this.applyRelationship(resource, titleAttribute, {
+            ...options,
+            kind: options?.kind ?? 'manyToMany',
+            widget: options?.widget ?? 'checkboxList',
+        });
+        return this;
+    }
+    createOption(value = true) {
+        this.setCreateOption(value);
+        return this;
+    }
+    createAndEditOption(value = true) {
+        this.setCreateAndEditOption(value);
+        return this;
+    }
+    checkboxColumns(count) {
+        this.config.checkboxColumns = count;
+        if (this.config.relation)
+            this.config.relation.checkboxColumns = count;
+        return this;
+    }
+    checkboxFramed(value = true) {
+        this.config.checkboxFramed = value;
+        if (this.config.relation)
+            this.config.relation.checkboxFramed = value;
+        return this;
+    }
+    cascadeWildcards(value = true) {
+        this.config.cascadeWildcards = value;
+        if (this.config.relation)
+            this.config.relation.cascadeWildcards = value;
+        return this;
+    }
+    groupBy(field) {
+        this.config.groupBy = field;
+        if (this.config.relation)
+            this.config.relation.groupBy = field;
+        return this;
+    }
+}
+/**
+ * Loom-style permission assignment for Role forms (ORM-agnostic).
+ *
+ * Requires a registered `permissions` resource whose records expose
+ * `name`, `resource`, `ability`, and `label`. Adapters enrich relation
+ * search with `name` / `group` / `ability` for grouping and wildcard cascade.
+ *
+ * @example
+ * PermissionsAssignment.make('permissionIds')
+ * PermissionsAssignment.make('permissionIds').relationship('perms', 'name')
+ */
+export class PermissionsAssignment extends CheckboxList {
+    static make(name = 'permissionIds') {
+        return new PermissionsAssignment(name);
+    }
+    constructor(name) {
+        super(name);
+        this.label('Permissions')
+            .relationship('permissions', 'label')
+            .checkboxColumns(4)
+            .groupBy('resource')
+            .cascadeWildcards()
+            .checkboxFramed(false)
+            .columnSpanFull();
+    }
+}
+/**
+ * Catalog-backed ability picker — same UI as {@link PermissionsAssignment},
+ * but dehydrates permission **names** (`products:view`, `*`) instead of ids.
+ *
+ * @example
+ * AbilitiesAssignment.make('abilities')
+ */
+export class AbilitiesAssignment extends CheckboxList {
+    static make(name = 'abilities') {
+        return new AbilitiesAssignment(name);
+    }
+    constructor(name) {
+        super(name);
+        this.label('Abilities')
+            .relationship('permissions', 'label', { valueAttribute: 'name' })
+            .checkboxColumns(4)
+            .groupBy('resource')
+            .cascadeWildcards()
+            .checkboxFramed(false)
+            .columnSpanFull();
+    }
+}
+/**
+ * Inline relationship table for HasMany / ManyToMany (attach, create, create & edit).
+ * HasMany fields are not dehydrated — children own the foreign key.
+ */
+export class RelationTable extends FormComponent {
+    static make(name) {
+        return new RelationTable(name);
+    }
+    constructor(name) {
+        super(name, 'relationTable');
+        this.config.multiple = true;
+        this.config.dehydrated = false;
+    }
+    relationship(resource, titleAttribute, options) {
+        this.applyRelationship(resource, titleAttribute, {
+            ...options,
+            kind: options?.kind ?? 'hasMany',
+            widget: options?.widget ?? 'table',
+        });
+        return this;
+    }
+    createOption(value = true) {
+        this.setCreateOption(value);
+        return this;
+    }
+    createAndEditOption(value = true) {
+        this.setCreateAndEditOption(value);
+        return this;
+    }
+}
+/** Filament `Hidden::make()`. */
+export class Hidden extends FormComponent {
+    static make(name) {
+        return new Hidden(name);
+    }
+    constructor(name) {
+        super(name, 'hidden');
+    }
+}
+/** Filament `ColorPicker::make()`. */
+export class ColorPicker extends FormComponent {
+    static make(name) {
+        return new ColorPicker(name);
+    }
+    constructor(name) {
+        super(name, 'color');
+    }
+}
+/** Filament `TagsInput::make()` — state is `string[]`. */
+export class TagsInput extends FormComponent {
+    static make(name) {
+        return new TagsInput(name);
+    }
+    constructor(name) {
+        super(name, 'tags');
+    }
+}
+/** Filament `DatePicker::make()`. */
+export class DatePicker extends FormComponent {
+    static make(name) {
+        return new DatePicker(name);
+    }
+    constructor(name) {
+        super(name, 'date');
+    }
+    minDate(value) {
+        return this.minValue(value);
+    }
+    maxDate(value) {
+        return this.maxValue(value);
+    }
+}
+/** Filament `DateTimePicker::make()`. */
+export class DateTimePicker extends FormComponent {
+    static make(name) {
+        return new DateTimePicker(name);
+    }
+    constructor(name) {
+        super(name, 'datetime');
+    }
+    minDate(value) {
+        return this.minValue(value);
+    }
+    maxDate(value) {
+        return this.maxValue(value);
+    }
+}
+/** Filament `FileUpload::make()`. */
+export class FileUpload extends FormComponent {
+    static make(name) {
+        return new FileUpload(name);
+    }
+    constructor(name) {
+        super(name, 'file');
+    }
+    image() {
+        this.config.type = 'image';
+        this.config.accept = this.config.accept ?? 'image/*';
+        return this;
+    }
+    accept(value) {
+        this.config.accept = value;
+        return this;
+    }
+    multiple(value = true) {
+        this.config.multiple = value;
+        return this;
+    }
+}
+/**
+ * Form root — Filament `$form->columns(2)->schema([...])`.
+ */
+export class FormBuilder {
+    rootColumns = 2;
+    children = [];
+    columns(value) {
+        this.rootColumns = value;
+        return this;
+    }
+    schema(children) {
+        this.children = [...children];
+        return this;
+    }
+    build() {
+        let schema = buildSchemaNodes(this.children);
+        // Wrap bare fields in a plain container when only leaves at root.
+        const onlyLeaves = schema.length > 0 && schema.every((n) => n.kind === 'field' || n.kind === 'entry');
+        if (onlyLeaves || schema.length === 0) {
+            schema = [
+                {
+                    kind: 'plain',
+                    name: '_fields',
+                    title: '',
+                    columns: this.rootColumns,
+                    children: schema.filter((n) => n.kind === 'field'),
+                },
+            ];
+        }
+        const fields = collectFields(schema);
+        const sections = schema.map((node) => {
+            if (node.kind === 'section' || node.kind === 'fieldset' || node.kind === 'plain') {
+                return {
+                    name: node.name ?? 'section',
+                    title: node.title ?? '',
+                    description: node.description,
+                    icon: node.icon,
+                    kind: node.kind === 'fieldset' ? 'fieldset' : node.kind === 'plain' ? 'plain' : 'section',
+                    card: node.card,
+                    columns: node.columns,
+                    fields: collectFields([node]),
+                    collapsible: node.collapsible,
+                    collapsed: node.collapsed,
+                    dense: node.dense,
+                    gap: node.gap,
+                    extraAttributes: node.extraAttributes,
+                };
+            }
+            // Non-section root layouts still expose a synthetic section for BC consumers.
+            return {
+                name: node.name ?? 'layout',
+                title: node.title ?? '',
+                description: node.description,
+                icon: node.icon,
+                kind: 'section',
+                card: node.card,
+                columns: node.columns ?? this.rootColumns,
+                fields: collectFields([node]),
+                collapsible: node.collapsible,
+                collapsed: node.collapsed,
+                dense: node.dense,
+                gap: node.gap,
+                extraAttributes: node.extraAttributes,
+            };
+        });
+        return { schema, sections, fields };
+    }
+}
+export function form(callback) {
+    const builder = new FormBuilder();
+    callback(builder);
+    return builder.build();
+}
+export function fieldTypeLabel(type) {
+    return type.charAt(0).toUpperCase() + type.slice(1);
+}
+//# sourceMappingURL=form.js.map