@prolibu-suite/cobalt-form 0.1.1 → 0.2.1

package/dist/collection/components/co-form/co-form.js

@@ -1,6 +1,14 @@
-import { h } from "@stencil/core";
-import { createForm, createInlineValidator, describeFields, normalizeForValidation, } from "@prolibu-suite/cobalt-form-core";
+import { h, Host } from "@stencil/core";
+import { createForm, createInlineValidator, describeFields, normalizeForValidation, resolveTheme, themeToStyles, } from "@prolibu-suite/cobalt-form-core";
 const PAGE_SIZE = 20;
+function safeParse(json) {
+    try {
+        return JSON.parse(json);
+    }
+    catch (_a) {
+        return null;
+    }
+}
 const blankRefState = () => ({
     options: [],
     selectedDisplay: [],
@@ -37,6 +45,14 @@ export class CoForm {
         this.disabled = false;
         /** Read-only mode for all fields. */
         this.readOnly = false;
+        /** Grid columns (1-4). Fields with `full: true` always span all columns. */
+        this.columns = 2;
+        /** Spacing between fields. */
+        this.gap = 'lg';
+        /** Footer alignment for the default submit button. */
+        this.footerAlign = 'end';
+        /** Hide the entire footer (use when embedded in a wizard or custom shell). */
+        this.hideFooter = false;
         this.snapshot = {
             values: {},
             errors: {},
@@ -46,6 +62,9 @@ export class CoForm {
             isSubmitting: false,
         };
         this.refStates = {};
+        /** Resolved theme — applied via <Host> in render() so data-attrs stick. */
+        this.themeStyles = null;
+        this.hasBg = false;
         this.controller = null;
         this.fields = [];
         this.unsubscribe = null;
@@ -112,15 +131,57 @@ export class CoForm {
     }
     componentWillLoad() {
         this.rebuildController();
+        this.applyTheme();
     }
     onSchemaChange() {
         this.rebuildController();
     }
+    onThemeChange() {
+        this.applyTheme();
+    }
     disconnectedCallback() {
         var _a;
         (_a = this.unsubscribe) === null || _a === void 0 ? void 0 : _a.call(this);
         this.unsubscribe = null;
     }
+    /**
+     * Compute the resolved theme and store in `@State()`. The render method
+     * binds the styles + data-attrs via `<Host>` — no imperative setAttribute,
+     * which avoids the timing issues we hit with shadow:false.
+     */
+    applyTheme() {
+        if (!this.theme) {
+            this.themeStyles = null;
+            this.hasBg = false;
+            return;
+        }
+        const raw = typeof this.theme === 'string' ? safeParse(this.theme) : this.theme;
+        const resolved = resolveTheme(raw);
+        this.themeStyles = themeToStyles(resolved);
+        this.hasBg = !!(resolved.background.color || resolved.background.imageUrl);
+    }
+    /**
+     * Background-only styles applied to the Host. The host acts as the
+     * backdrop layer (full bleed) while the inner <form> is the centered
+     * card surface — same two-layer pattern as the wizard.
+     */
+    hostProps() {
+        const t = this.themeStyles;
+        if (!t)
+            return {};
+        return { style: t.inlineStyles };
+    }
+    /**
+     * Data attrs + CSS custom properties on the inner <form>. Stencil's
+     * shadow:false doesn't reliably rewrite `:host([attr])`, so the
+     * theme-driven selectors target `form[data-...]` instead.
+     */
+    formProps() {
+        const t = this.themeStyles;
+        if (!t)
+            return {};
+        return Object.assign(Object.assign(Object.assign({ 'data-theme': t.modifiers.colorScheme, 'data-density': t.modifiers.density, 'data-appearance': t.modifiers.appearance, 'data-radius': t.modifiers.radius }, (this.hasBg ? { 'data-has-bg': '' } : {})), (t.modifiers.hideHeader ? { 'data-hide-header': '' } : {})), { style: t.customProperties });
+    }
     // ── Controller wiring ─────────────────────────────────────────────────────
     rebuildController() {
         var _a;
@@ -197,6 +258,28 @@ export class CoForm {
         var _a;
         (_a = this.controller) === null || _a === void 0 ? void 0 : _a.touch(name);
     }
+    /**
+     * Validate and return the current values. Used by `<co-form-wizard>` to
+     * commit a page before advancing. If validation fails, marks all fields
+     * touched (so errors render) and returns `valid: false`.
+     */
+    async validateAndCollect() {
+        if (!this.controller)
+            return { valid: false, values: {} };
+        const valid = this.controller.validate();
+        if (!valid) {
+            this.controller.touchAll();
+            return { valid: false, values: this.controller.state.values };
+        }
+        const properties = this.controller.fields.reduce((acc, f) => {
+            acc[f.name] = f.ajvProperty;
+            return acc;
+        }, {});
+        return {
+            valid: true,
+            values: normalizeForValidation(this.controller.state.values, properties),
+        };
+    }
     hasSlotContent(slotName) {
         return !!this.host.querySelector(`[slot="${slotName}"]`);
     }
@@ -329,12 +412,23 @@ export class CoForm {
     }
     // ── Render ────────────────────────────────────────────────────────────────
     render() {
+        var _a;
         const excluded = this.excludedSet;
-        const visible = this.fields.filter((f) => !f.hidden && !excluded.has(f.name));
-        return (h("form", { key: '6cd71dc417b9a74b5131e9fe34955b4f4cced8a4', onSubmit: this.handleSubmit }, h("slot", { key: 'ef994d53f763fbe954f104a880bc675d60db8b79', name: "header" }), h("div", { key: '930d1f56c0f66e42441ffa57d71bcfdcd94d4677', class: `co-form-layout co-form-layout--${this.layout}` }, visible.map((f) => this.renderField(f))), h("div", { key: '2680a1eb2ddfc67773f247e226c1e8710514550f', class: "co-form-footer" }, h("slot", { key: '0c8adac9743830a4f990a5dfb3d0927ad5185d5f', name: "footer" }, h("co-button", { key: 'a092584e93fb6dd7623f537a4f9792f368454d45', type: "submit", label: "Enviar", variant: "primary" })))));
+        const visible = this.fields.filter((f) => {
+            if (excluded.has(f.name))
+                return false;
+            if (!this.controller)
+                return !f.hidden;
+            return this.controller.getFieldState(f.name).visible;
+        });
+        const layoutStyle = this.layout === 'grid'
+            ? { 'grid-template-columns': `repeat(${this.columns}, minmax(0, 1fr))` }
+            : undefined;
+        const customCss = (_a = this.themeStyles) === null || _a === void 0 ? void 0 : _a.customCss;
+        return (h(Host, Object.assign({}, this.hostProps()), h("form", Object.assign({ onSubmit: this.handleSubmit }, this.formProps()), customCss && h("style", null, customCss), h("slot", { name: "header" }), h("div", { class: `co-form-layout co-form-layout--${this.layout} co-form-layout--gap-${this.gap}`, style: layoutStyle }, visible.map((f) => (h("div", { key: f.name, class: "co-form-field-wrap", "data-full": f.fullWidth ? 'true' : 'false', "data-co-field": f.name, "data-co-field-kind": f.kind }, this.renderField(f))))), !this.hideFooter && (h("div", { class: `co-form-footer co-form-footer--${this.footerAlign}` }, h("slot", { name: "footer" }, h("co-button", { type: "submit", label: "Enviar", variant: "primary" })))))));
     }
     renderField(f) {
-        var _a;
+        var _a, _b, _c, _d, _e, _f, _g, _h;
         // If the consumer provided a slot for this field, let it take over
         // regardless of the kind. Lets external HTML replace any field rendering.
         const slotName = `field:${f.name}`;
@@ -346,12 +440,14 @@ export class CoForm {
         const status = errors.length > 0 ? 'error' : 'default';
         const helperText = errors[0] || f.helperText;
         const value = this.snapshot.values[f.name];
-        const disabled = this.disabled || f.disabled;
+        const runtime = (_a = this.controller) === null || _a === void 0 ? void 0 : _a.getFieldState(f.name);
+        const disabled = this.disabled || (runtime === null || runtime === void 0 ? void 0 : runtime.disabled) || f.disabled;
+        const required = (_b = runtime === null || runtime === void 0 ? void 0 : runtime.required) !== null && _b !== void 0 ? _b : f.required;
         const common = {
             key: f.name,
             label: f.label,
             placeholder: f.placeholder,
-            required: f.required,
+            required,
             disabled,
             status: status,
             helperText: helperText,
@@ -371,8 +467,20 @@ export class CoForm {
                 return (h("co-switch", Object.assign({}, common, { checked: !!value, onCoChange: (e) => this.handleFieldChange(f.name, e.detail) })));
             case 'select':
                 return (h("co-select", Object.assign({}, common, { options: JSON.stringify(this.optionsFor(f)), value: String(value !== null && value !== void 0 ? value : ''), onCoChange: (e) => this.handleFieldChange(f.name, e.detail) })));
+            case 'rating':
+                return (h("co-rating", Object.assign({}, common, { value: typeof value === 'number' ? value : 0, max: Number((_c = f.originalAttrs.max) !== null && _c !== void 0 ? _c : 5), onCoChange: (e) => this.handleFieldChange(f.name, e.detail) })));
+            case 'slider':
+                return (h("co-slider", Object.assign({}, common, { value: typeof value === 'number' ? value : Number((_d = f.originalAttrs.min) !== null && _d !== void 0 ? _d : 0), min: Number((_e = f.originalAttrs.min) !== null && _e !== void 0 ? _e : 0), max: Number((_f = f.originalAttrs.max) !== null && _f !== void 0 ? _f : 100), step: Number((_g = f.originalAttrs.step) !== null && _g !== void 0 ? _g : 1), onCoChange: (e) => this.handleFieldChange(f.name, e.detail) })));
+            case 'color':
+                return (h("co-input", Object.assign({}, common, { type: "color", value: typeof value === 'string' ? value : '#000000', onCoInput: (e) => this.handleFieldChange(f.name, e.detail) })));
+            case 'section':
+                return (h("div", { class: "co-form-section", key: f.name }, h("h3", { class: "co-form-section__title" }, f.label), f.helperText && h("p", { class: "co-form-section__desc" }, f.helperText)));
+            case 'file':
+                return (h("co-input", Object.assign({}, common, { type: "file", onCoInput: (e) => this.handleFieldChange(f.name, e.detail) })));
+            case 'array':
+                return this.renderRepeater(f, value);
             case 'ref': {
-                const refState = (_a = this.refStates[f.name]) !== null && _a !== void 0 ? _a : blankRefState();
+                const refState = (_h = this.refStates[f.name]) !== null && _h !== void 0 ? _h : blankRefState();
                 const isMultiple = !!f.originalAttrs.multiple || f.originalAttrs.type === 'array';
                 return (h("co-ref-field", Object.assign({}, common, { model: f.originalAttrs.ref, multiple: isMultiple, value: this.refValueAsString(f, value), options: JSON.stringify(refState.options), selectedDisplay: JSON.stringify(refState.selectedDisplay), loading: refState.loading, total: refState.total, onCoOpen: () => {
                         // Lazy-load on first open if we haven't fetched yet.
@@ -392,6 +500,35 @@ export class CoForm {
             return [];
         return raw.map((v) => ({ label: String(v), value: String(v) }));
     }
+    // ── Repeater (kind: 'array') ──────────────────────────────────────────────
+    /**
+     * Renders a dynamic list of subforms. The schema for each row is taken from
+     * `itemSchema` (a Mongoose-style property map) on the field's originalAttrs.
+     * Values are stored as an array of objects.
+     */
+    renderRepeater(f, value) {
+        const rows = Array.isArray(value) ? value : [];
+        const itemSchema = f.originalAttrs.itemSchema || f.originalAttrs.objectShape || {};
+        const fieldNames = Object.keys(itemSchema);
+        const update = (next) => this.handleFieldChange(f.name, next);
+        const addRow = () => {
+            const blank = fieldNames.reduce((acc, n) => {
+                var _a;
+                acc[n] = (_a = itemSchema[n]) === null || _a === void 0 ? void 0 : _a.default;
+                return acc;
+            }, {});
+            update([...rows, blank]);
+        };
+        const removeRow = (idx) => update(rows.filter((_, i) => i !== idx));
+        const patchRow = (idx, name, v) => {
+            const next = rows.map((r, i) => (i === idx ? Object.assign(Object.assign({}, r), { [name]: v }) : r));
+            update(next);
+        };
+        return (h("div", { class: "co-form-repeater", key: f.name }, f.label && h("label", { class: "co-form-repeater__label" }, f.label), rows.map((row, idx) => (h("div", { class: "co-form-repeater__row", key: `${f.name}-${idx}` }, h("div", { class: "co-form-repeater__fields" }, fieldNames.map((n) => {
+            var _a, _b;
+            return (h("co-input", { key: n, label: ((_a = itemSchema[n]) === null || _a === void 0 ? void 0 : _a.label) || n, value: (_b = row[n]) !== null && _b !== void 0 ? _b : '', disabled: this.disabled || f.disabled, onCoInput: (e) => patchRow(idx, n, e.detail) }));
+        })), h("co-icon-button", { icon: "trash", variant: "ghost", onClick: () => removeRow(idx), disabled: this.disabled || f.disabled })))), h("co-button", { label: "Agregar", variant: "outlined", "icon-left": "plus", onClick: addRow, disabled: this.disabled || f.disabled })));
+    }
     static get is() { return "co-form"; }
     static get originalStyleUrls() {
         return {
@@ -596,13 +733,121 @@ export class CoForm {
                 "reflect": false,
                 "attribute": "read-only",
                 "defaultValue": "false"
+            },
+            "columns": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "1 | 2 | 3 | 4",
+                    "resolved": "1 | 2 | 3 | 4",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Grid columns (1-4). Fields with `full: true` always span all columns."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "columns",
+                "defaultValue": "2"
+            },
+            "gap": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'sm' | 'md' | 'lg'",
+                    "resolved": "\"lg\" | \"md\" | \"sm\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Spacing between fields."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "gap",
+                "defaultValue": "'lg'"
+            },
+            "footerAlign": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'start' | 'end' | 'center' | 'between' | 'stretch'",
+                    "resolved": "\"between\" | \"center\" | \"end\" | \"start\" | \"stretch\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Footer alignment for the default submit button."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "footer-align",
+                "defaultValue": "'end'"
+            },
+            "hideFooter": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Hide the entire footer (use when embedded in a wizard or custom shell)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "hide-footer",
+                "defaultValue": "false"
+            },
+            "theme": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | ThemeSpec",
+                    "resolved": "ThemeSpec | string | undefined",
+                    "references": {
+                        "ThemeSpec": {
+                            "location": "import",
+                            "path": "@prolibu-suite/cobalt-form-core",
+                            "id": "../form-core/dist/index.d.ts::ThemeSpec",
+                            "referenceLocation": "ThemeSpec"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Theme overrides. JSON string OR a ThemeSpec assigned as a JS property.\nApplied as scoped CSS custom properties on the host so global tokens are\nnever touched. See `@prolibu-suite/cobalt-form-core` `resolveTheme` for\naccepted shape and defaults."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "theme"
             }
         };
     }
     static get states() {
         return {
             "snapshot": {},
-            "refStates": {}
+            "refStates": {},
+            "themeStyles": {},
+            "hasBg": {}
         };
     }
     static get events() {
@@ -731,6 +976,27 @@ export class CoForm {
                     "text": "Mark a field as touched (forces its errors to be visible).",
                     "tags": []
                 }
+            },
+            "validateAndCollect": {
+                "complexType": {
+                    "signature": "() => Promise<{ valid: boolean; values: Record<string, any>; }>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "Record": {
+                            "location": "global",
+                            "id": "global::Record"
+                        }
+                    },
+                    "return": "Promise<{ valid: boolean; values: Record<string, any>; }>"
+                },
+                "docs": {
+                    "text": "Validate and return the current values. Used by `<co-form-wizard>` to\ncommit a page before advancing. If validation fails, marks all fields\ntouched (so errors render) and returns `valid: false`.",
+                    "tags": []
+                }
             }
         };
     }
@@ -745,6 +1011,9 @@ export class CoForm {
             }, {
                 "propName": "locale",
                 "methodName": "onSchemaChange"
+            }, {
+                "propName": "theme",
+                "methodName": "onThemeChange"
             }];
     }
 }