@navette-js/forms 1.0.0-beta.3 → 1.0.0-beta.5

package/lib/rich-editor-tools.js

@@ -0,0 +1,394 @@
+export const RICH_EDITOR_TOOL_DEFINITIONS = [
+    {
+        "name": "bold",
+        "label": "filament-forms::components.rich_editor.tools.bold",
+        "jsHandler": "$getEditor()?.chain().focus().toggleBold().run()",
+        "toggle": true,
+        "icon": "m-bold"
+    },
+    {
+        "name": "italic",
+        "label": "filament-forms::components.rich_editor.tools.italic",
+        "jsHandler": "$getEditor()?.chain().focus().toggleItalic().run()",
+        "toggle": true,
+        "icon": "m-italic"
+    },
+    {
+        "name": "underline",
+        "label": "filament-forms::components.rich_editor.tools.underline",
+        "jsHandler": "$getEditor()?.chain().focus().toggleUnderline().run()",
+        "toggle": true,
+        "icon": "m-underline"
+    },
+    {
+        "name": "strike",
+        "label": "filament-forms::components.rich_editor.tools.strike",
+        "jsHandler": "$getEditor()?.chain().focus().toggleStrike().run()",
+        "toggle": true,
+        "icon": "m-strikethrough"
+    },
+    {
+        "name": "subscript",
+        "label": "filament-forms::components.rich_editor.tools.subscript",
+        "jsHandler": "$getEditor()?.chain().focus().toggleSubscript().run()",
+        "toggle": true,
+        "icon": "fi-o-subscript"
+    },
+    {
+        "name": "superscript",
+        "label": "filament-forms::components.rich_editor.tools.superscript",
+        "jsHandler": "$getEditor()?.chain().focus().toggleSuperscript().run()",
+        "toggle": true,
+        "icon": "fi-o-superscript"
+    },
+    {
+        "name": "link",
+        "label": "filament-forms::components.rich_editor.tools.link",
+        "action": "{ url: $getEditor().getAttributes('link')?.href, shouldOpenInNewTab: $getEditor().getAttributes('link')?.target === '_blank' }",
+        "toggle": true,
+        "icon": "m-link"
+    },
+    {
+        "name": "textColor",
+        "label": "filament-forms::components.rich_editor.tools.text_color",
+        "action": "{ color: $getEditor().getAttributes('textColor')['data-color'] ?? null }",
+        "toggle": true,
+        "icon": "m-swatch"
+    },
+    {
+        "name": "h1",
+        "label": "filament-forms::components.rich_editor.tools.h1",
+        "jsHandler": "$getEditor()?.chain().focus().toggleHeading({ level: 1 }).run()",
+        "toggle": true,
+        "icon": "fi-o-h1",
+        "activeKey": "heading",
+        "activeOptions": {
+            "level": 1
+        }
+    },
+    {
+        "name": "h2",
+        "label": "filament-forms::components.rich_editor.tools.h2",
+        "jsHandler": "$getEditor()?.chain().focus().toggleHeading({ level: 2 }).run()",
+        "toggle": true,
+        "icon": "fi-o-h2",
+        "activeKey": "heading",
+        "activeOptions": {
+            "level": 2
+        }
+    },
+    {
+        "name": "h3",
+        "label": "filament-forms::components.rich_editor.tools.h3",
+        "jsHandler": "$getEditor()?.chain().focus().toggleHeading({ level: 3 }).run()",
+        "toggle": true,
+        "icon": "fi-o-h3",
+        "activeKey": "heading",
+        "activeOptions": {
+            "level": 3
+        }
+    },
+    {
+        "name": "paragraph",
+        "label": "filament-forms::components.rich_editor.tools.paragraph",
+        "jsHandler": "$getEditor()?.chain().focus().setParagraph().run()",
+        "toggle": true,
+        "icon": "fi-o-paragraph"
+    },
+    {
+        "name": "h4",
+        "label": "filament-forms::components.rich_editor.tools.h4",
+        "jsHandler": "$getEditor()?.chain().focus().toggleHeading({ level: 4 }).run()",
+        "toggle": true,
+        "icon": "fi-o-h4",
+        "activeKey": "heading",
+        "activeOptions": {
+            "level": 4
+        }
+    },
+    {
+        "name": "h5",
+        "label": "filament-forms::components.rich_editor.tools.h5",
+        "jsHandler": "$getEditor()?.chain().focus().toggleHeading({ level: 5 }).run()",
+        "toggle": true,
+        "icon": "fi-o-h5",
+        "activeKey": "heading",
+        "activeOptions": {
+            "level": 5
+        }
+    },
+    {
+        "name": "h6",
+        "label": "filament-forms::components.rich_editor.tools.h6",
+        "jsHandler": "$getEditor()?.chain().focus().toggleHeading({ level: 6 }).run()",
+        "toggle": true,
+        "icon": "fi-o-h6",
+        "activeKey": "heading",
+        "activeOptions": {
+            "level": 6
+        }
+    },
+    {
+        "name": "blockquote",
+        "label": "filament-forms::components.rich_editor.tools.blockquote",
+        "jsHandler": "$getEditor()?.chain().focus().toggleBlockquote().run()",
+        "toggle": true,
+        "icon": "m-chat-bubble-bottom-center-text"
+    },
+    {
+        "name": "code",
+        "label": "filament-forms::components.rich_editor.tools.code",
+        "jsHandler": "$getEditor()?.chain().focus().toggleCode().run()",
+        "toggle": true,
+        "icon": "fi-o-code"
+    },
+    {
+        "name": "codeBlock",
+        "label": "filament-forms::components.rich_editor.tools.code_block",
+        "jsHandler": "$getEditor()?.chain().focus().toggleCodeBlock().run()",
+        "toggle": true,
+        "icon": "fi-o-code-block"
+    },
+    {
+        "name": "bulletList",
+        "label": "filament-forms::components.rich_editor.tools.bullet_list",
+        "jsHandler": "$getEditor()?.chain().focus().toggleBulletList().run()",
+        "toggle": true,
+        "icon": "m-list-bullet"
+    },
+    {
+        "name": "orderedList",
+        "label": "filament-forms::components.rich_editor.tools.ordered_list",
+        "jsHandler": "$getEditor()?.chain().focus().toggleOrderedList().run()",
+        "toggle": true,
+        "icon": "m-numbered-list"
+    },
+    {
+        "name": "table",
+        "label": "filament-forms::components.rich_editor.tools.table",
+        "jsHandler": "$getEditor()?.commands.insertTable({ rows: 2, cols: 3, withHeaderRow: true })",
+        "icon": "fi-o-table"
+    },
+    {
+        "name": "tableAddColumnBefore",
+        "label": "filament-forms::components.rich_editor.tools.table_add_column_before",
+        "jsHandler": "$getEditor()?.chain().focus().addColumnBefore().run()",
+        "icon": "fi-o-table-add-column-before"
+    },
+    {
+        "name": "tableAddColumnAfter",
+        "label": "filament-forms::components.rich_editor.tools.table_add_column_after",
+        "jsHandler": "$getEditor()?.chain().focus().addColumnAfter().run()",
+        "icon": "fi-o-table-add-column-after"
+    },
+    {
+        "name": "tableDeleteColumn",
+        "label": "filament-forms::components.rich_editor.tools.table_delete_column",
+        "jsHandler": "$getEditor()?.chain().focus().deleteColumn().run()",
+        "icon": "fi-o-table-delete-column"
+    },
+    {
+        "name": "tableAddRowBefore",
+        "label": "filament-forms::components.rich_editor.tools.table_add_row_before",
+        "jsHandler": "$getEditor()?.chain().focus().addRowBefore().run()",
+        "icon": "fi-o-table-add-row-before"
+    },
+    {
+        "name": "tableAddRowAfter",
+        "label": "filament-forms::components.rich_editor.tools.table_add_row_after",
+        "jsHandler": "$getEditor()?.chain().focus().addRowAfter().run()",
+        "icon": "fi-o-table-add-row-after"
+    },
+    {
+        "name": "tableDeleteRow",
+        "label": "filament-forms::components.rich_editor.tools.table_delete_row",
+        "jsHandler": "$getEditor()?.chain().focus().deleteRow().run()",
+        "icon": "fi-o-table-delete-row"
+    },
+    {
+        "name": "tableMergeCells",
+        "label": "filament-forms::components.rich_editor.tools.table_merge_cells",
+        "jsHandler": "$getEditor()?.chain().focus().mergeCells().run()",
+        "icon": "fi-o-table-merge-cells"
+    },
+    {
+        "name": "tableSplitCell",
+        "label": "filament-forms::components.rich_editor.tools.table_split_cell",
+        "jsHandler": "$getEditor()?.chain().focus().splitCell().run()",
+        "icon": "fi-o-table-split-cell"
+    },
+    {
+        "name": "tableToggleHeaderRow",
+        "label": "filament-forms::components.rich_editor.tools.table_toggle_header_row",
+        "jsHandler": "$getEditor()?.chain().focus().toggleHeaderRow().run()",
+        "icon": "fi-o-table-toggle-header-row"
+    },
+    {
+        "name": "tableToggleHeaderCell",
+        "label": "filament-forms::components.rich_editor.tools.table_toggle_header_cell",
+        "jsHandler": "$getEditor()?.chain().focus().toggleHeaderCell().run()",
+        "icon": "fi-o-table-toggle-header-cell"
+    },
+    {
+        "name": "tableDelete",
+        "label": "filament-forms::components.rich_editor.tools.table_delete",
+        "jsHandler": "$getEditor()?.chain().focus().deleteTable().run()",
+        "icon": "fi-o-table-delete"
+    },
+    {
+        "name": "attachFiles",
+        "label": "filament-forms::components.rich_editor.tools.attach_files",
+        "action": "{ alt: $getEditor().getAttributes('image')?.alt, id: $getEditor().getAttributes('image')?.id, src: $getEditor().getAttributes('image')?.src }",
+        "icon": "m-paper-clip",
+        "activeKey": "image"
+    },
+    {
+        "name": "customBlocks",
+        "label": "filament-forms::components.rich_editor.tools.custom_blocks",
+        "jsHandler": "togglePanel('customBlocks')",
+        "icon": "m-squares-plus",
+        "activeJsExpression": "isPanelActive('customBlocks')"
+    },
+    {
+        "name": "mergeTags",
+        "label": "filament-forms::components.rich_editor.tools.merge_tags",
+        "jsHandler": "togglePanel('mergeTags')",
+        "icon": "fi-o-merge-tag",
+        "activeJsExpression": "isPanelActive('mergeTags')"
+    },
+    {
+        "name": "horizontalRule",
+        "label": "filament-forms::components.rich_editor.tools.horizontal_rule",
+        "jsHandler": "$getEditor()?.chain().focus().setHorizontalRule().run()",
+        "icon": "m-minus"
+    },
+    {
+        "name": "highlight",
+        "label": "filament-forms::components.rich_editor.tools.highlight",
+        "jsHandler": "$getEditor()?.chain().focus().toggleHighlight().run()",
+        "toggle": true,
+        "icon": "fi-o-highlight"
+    },
+    {
+        "name": "small",
+        "label": "filament-forms::components.rich_editor.tools.small",
+        "jsHandler": "$getEditor()?.chain().focus().toggleSmall().run()",
+        "toggle": true,
+        "icon": "fi-o-small"
+    },
+    {
+        "name": "lead",
+        "label": "filament-forms::components.rich_editor.tools.lead",
+        "jsHandler": "$getEditor()?.chain().focus().toggleLead().run()",
+        "toggle": true,
+        "icon": "fi-o-lead"
+    },
+    {
+        "name": "undo",
+        "label": "filament-forms::components.rich_editor.tools.undo",
+        "jsHandler": "$getEditor()?.chain().focus().undo().run()",
+        "icon": "m-arrow-uturn-left"
+    },
+    {
+        "name": "redo",
+        "label": "filament-forms::components.rich_editor.tools.redo",
+        "jsHandler": "$getEditor()?.chain().focus().redo().run()",
+        "icon": "m-arrow-uturn-right"
+    },
+    {
+        "name": "alignStart",
+        "label": "filament-forms::components.rich_editor.tools.align_start",
+        "jsHandler": "$getEditor()?.chain().focus().setTextAlign('start').run()",
+        "toggle": true,
+        "icon": "fi-o-align-start",
+        "activeJsExpression": "$getEditor()?.isActive({ textAlign: 'start' })"
+    },
+    {
+        "name": "alignCenter",
+        "label": "filament-forms::components.rich_editor.tools.align_center",
+        "jsHandler": "$getEditor()?.chain().focus().setTextAlign('center').run()",
+        "toggle": true,
+        "icon": "fi-o-align-center",
+        "activeJsExpression": "$getEditor()?.isActive({ textAlign: 'center' })"
+    },
+    {
+        "name": "alignEnd",
+        "label": "filament-forms::components.rich_editor.tools.align_end",
+        "jsHandler": "$getEditor()?.chain().focus().setTextAlign('end').run()",
+        "toggle": true,
+        "icon": "fi-o-align-end",
+        "activeJsExpression": "$getEditor()?.isActive({ textAlign: 'end' })"
+    },
+    {
+        "name": "alignJustify",
+        "label": "filament-forms::components.rich_editor.tools.align_justify",
+        "jsHandler": "$getEditor()?.chain().focus().setTextAlign('justify').run()",
+        "toggle": true,
+        "icon": "fi-o-align-justify",
+        "activeJsExpression": "$getEditor()?.isActive({ textAlign: 'justify' })"
+    },
+    {
+        "name": "grid",
+        "label": "filament-forms::components.rich_editor.tools.grid",
+        "action": "{}",
+        "icon": "fi-o-columns",
+        "activeJsExpression": "false"
+    },
+    {
+        "name": "gridAddColumnBefore",
+        "label": "filament-forms::components.rich_editor.tools.table_add_column_before",
+        "jsHandler": "$getEditor()?.chain().focus().addGridColumnBefore().run()",
+        "icon": "fi-o-table-add-column-before",
+        "activeJsExpression": "$getEditor()?.can().addGridColumnBefore()",
+        "activeStyling": false,
+        "disabledWhenNotActive": true,
+        "extraAttributes": {
+            "data-testid": "grid-add-column-before"
+        }
+    },
+    {
+        "name": "gridAddColumnAfter",
+        "label": "filament-forms::components.rich_editor.tools.table_add_column_after",
+        "jsHandler": "$getEditor()?.chain().focus().addGridColumnAfter().run()",
+        "icon": "fi-o-table-add-column-after",
+        "activeJsExpression": "$getEditor()?.can().addGridColumnAfter()",
+        "activeStyling": false,
+        "disabledWhenNotActive": true,
+        "extraAttributes": {
+            "data-testid": "grid-add-column-after"
+        }
+    },
+    {
+        "name": "gridDeleteColumn",
+        "label": "filament-forms::components.rich_editor.tools.table_delete_column",
+        "jsHandler": "$getEditor()?.chain().focus().deleteGridColumn().run()",
+        "icon": "fi-o-table-delete-column",
+        "activeJsExpression": "$getEditor()?.can().deleteGridColumn()",
+        "activeStyling": false,
+        "disabledWhenNotActive": true,
+        "extraAttributes": {
+            "data-testid": "grid-delete-column"
+        }
+    },
+    {
+        "name": "gridDelete",
+        "label": "filament-forms::components.rich_editor.tools.grid_delete",
+        "jsHandler": "$getEditor()?.chain().focus().deleteGrid().run()",
+        "icon": "fi-o-columns-delete",
+        "activeKey": "grid",
+        "activeStyling": false,
+        "disabledWhenNotActive": true
+    },
+    {
+        "name": "details",
+        "label": "filament-forms::components.rich_editor.tools.details",
+        "jsHandler": "$getEditor()?.chain().focus().setDetails().run()",
+        "icon": "fi-o-details"
+    },
+    {
+        "name": "clearFormatting",
+        "label": "filament-forms::components.rich_editor.tools.clear_formatting",
+        "jsHandler": "$getEditor()?.chain().focus().clearNodes().unsetAllMarks().run()",
+        "icon": "fi-o-clear-formatting"
+    }
+];

package/lib/rules.d.ts

@@ -0,0 +1,19 @@
+import type { ComponentContext } from '@navette-js/schemas';
+/** `implicit`: the rule also runs on an empty value (required, accepted...); other rules are skipped when the value is empty. */
+export type Rule = {
+    name: string;
+    passes: (value: unknown, ctx: ComponentContext) => boolean | Promise<boolean>;
+    message: (attribute: string) => string;
+    implicit?: boolean;
+};
+export declare const isBlank: (v: unknown) => boolean;
+/** A Laravel `regex:` parameter (`/pattern/flags`) as a RegExp; only `i`, `m`, `s` and `u` flags. */
+export declare function parseRegex(source: string): RegExp;
+/**
+ * Builds a rule from a string such as `'max:255'`. `numeric` tells whether sizes are compared as numbers (numeric fields).
+ * An unknown rule throws when the field is declared, instead of being silently ignored.
+ */
+export declare function stringRule(spec: string, options: {
+    numeric: boolean;
+    name: string;
+}): Rule | null;

package/lib/rules.js

@@ -0,0 +1,148 @@
+export const isBlank = (v) => v === null || v === undefined || v === '' || (Array.isArray(v) && v.length === 0);
+const isNumeric = (value) => (typeof value === 'number' && Number.isFinite(value)) || (typeof value === 'string' && value.trim() !== '' && Number.isFinite(Number(value)));
+/** Size of a value: its number when numeric (for a numeric field), its length for text and lists. */
+const sizeOf = (value, numeric) => (Array.isArray(value) ? value.length : numeric && isNumeric(value) ? Number(value) : String(value ?? '').length);
+const unit = (value, numeric) => (Array.isArray(value) ? ' items' : numeric ? '' : ' characters');
+const dateOf = (value) => { const time = Date.parse(String(value ?? '')); return Number.isFinite(time) ? time : null; };
+const list = (parameter) => parameter.split(',').map((item) => item.trim());
+/** A Laravel `regex:` parameter (`/pattern/flags`) as a RegExp; only `i`, `m`, `s` and `u` flags. */
+export function parseRegex(source) {
+    const match = /^\/(.*)\/([imsu]*)$/s.exec(source.trim());
+    if (!match)
+        throw new Error(`Invalid regex rule: ${source} (expected /pattern/flags).`);
+    return new RegExp(match[1], match[2]);
+}
+/** A sibling value of the same form, read from the component context (`confirmed`, `same`, `different`, `gt`...). */
+const sibling = (ctx, name) => ctx.get(name);
+const compareTo = (parameter, ctx) => (isNumeric(parameter) ? Number(parameter) : isNumeric(sibling(ctx, parameter)) ? Number(sibling(ctx, parameter)) : null);
+/**
+ * Builds a rule from a string such as `'max:255'`. `numeric` tells whether sizes are compared as numbers (numeric fields).
+ * An unknown rule throws when the field is declared, instead of being silently ignored.
+ */
+export function stringRule(spec, options) {
+    const colon = spec.indexOf(':');
+    const name = (colon < 0 ? spec : spec.slice(0, colon)).trim();
+    const parameter = colon < 0 ? '' : spec.slice(colon + 1);
+    const numeric = options.numeric;
+    const make = (passes, message) => ({ name, passes, message });
+    const implicit = (passes, message) => ({ name, passes, message, implicit: true });
+    const [otherField, ...otherValues] = list(parameter);
+    const otherIs = (ctx) => { const other = sibling(ctx, otherField); return (Array.isArray(other) ? other : [other]).some((item) => otherValues.includes(String(item ?? ''))); };
+    const otherName = otherField?.replace(/_/g, ' ');
+    switch (name) {
+        case 'nullable':
+        case 'sometimes':
+        case 'bail':
+        case 'string':
+        case 'present': return null;
+        case 'required':
+        case 'filled': return implicit((value) => !isBlank(value), (a) => `The ${a} field is required.`);
+        case 'required_if': return implicit((value, ctx) => !otherIs(ctx) || !isBlank(value), (a) => `The ${a} field is required when ${otherName} is ${otherValues.join(', ')}.`);
+        case 'required_unless': return implicit((value, ctx) => otherIs(ctx) || !isBlank(value), (a) => `The ${a} field is required unless ${otherName} is in ${otherValues.join(', ')}.`);
+        case 'required_if_accepted': return implicit((value, ctx) => ![true, 1, '1', 'yes', 'on', 'true'].includes(sibling(ctx, otherField)) || !isBlank(value), (a) => `The ${a} field is required when ${otherName} is accepted.`);
+        case 'required_with':
+        case 'required_with_all':
+        case 'required_without':
+        case 'required_without_all': {
+            const fields = list(parameter);
+            const present = (ctx) => fields.map((field) => !isBlank(sibling(ctx, field)));
+            const needed = { required_with: (p) => p.some(Boolean), required_with_all: (p) => p.every(Boolean), required_without: (p) => p.some((x) => !x), required_without_all: (p) => p.every((x) => !x) }[name];
+            const words = { required_with: 'is present', required_with_all: 'are present', required_without: 'is not present', required_without_all: 'none of them are present' }[name];
+            return implicit((value, ctx) => !needed(present(ctx)) || !isBlank(value), (a) => `The ${a} field is required when ${fields.map((field) => field.replace(/_/g, ' ')).join(' / ')} ${words}.`);
+        }
+        case 'prohibited': return implicit((value) => isBlank(value), (a) => `The ${a} field is prohibited.`);
+        case 'prohibited_if': return implicit((value, ctx) => !otherIs(ctx) || isBlank(value), (a) => `The ${a} field is prohibited when ${otherName} is ${otherValues.join(', ')}.`);
+        case 'prohibited_unless': return implicit((value, ctx) => otherIs(ctx) || isBlank(value), (a) => `The ${a} field is prohibited unless ${otherName} is in ${otherValues.join(', ')}.`);
+        case 'prohibits': return make((_value, ctx) => list(parameter).every((field) => isBlank(sibling(ctx, field))), (a) => `The ${a} field prohibits ${list(parameter).map((field) => field.replace(/_/g, ' ')).join(' / ')} from being present.`);
+        case 'accepted': return implicit((value) => [true, 1, '1', 'yes', 'on', 'true'].includes(value), (a) => `The ${a} field must be accepted.`);
+        case 'declined': return implicit((value) => [false, 0, '0', 'no', 'off', 'false'].includes(value), (a) => `The ${a} field must be declined.`);
+        case 'numeric': return make(isNumeric, (a) => `The ${a} field must be a number.`);
+        case 'integer': return make((value) => /^-?\d+$/.test(String(value).trim()), (a) => `The ${a} field must be an integer.`);
+        case 'boolean': return make((value) => [true, false, 0, 1, '0', '1'].includes(value), (a) => `The ${a} field must be true or false.`);
+        case 'array': return make((value) => Array.isArray(value), (a) => `The ${a} field must be an array.`);
+        case 'email': return make((value) => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(String(value)), (a) => `The ${a} field must be a valid email address.`);
+        case 'url': return make((value) => { try {
+            return ['http:', 'https:'].includes(new URL(String(value)).protocol);
+        }
+        catch {
+            return false;
+        } }, (a) => `The ${a} field must be a valid URL.`);
+        case 'uuid': return make((value) => /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i.test(String(value)), (a) => `The ${a} field must be a valid UUID.`);
+        case 'ulid': return make((value) => /^[0-7][0-9A-HJKMNP-TV-Z]{25}$/i.test(String(value)), (a) => `The ${a} field must be a valid ULID.`);
+        case 'alpha': return make((value) => /^[\p{L}\p{M}]+$/u.test(String(value)), (a) => `The ${a} field must only contain letters.`);
+        case 'alpha_dash': return make((value) => /^[\p{L}\p{M}\p{N}_-]+$/u.test(String(value)), (a) => `The ${a} field must only contain letters, numbers, dashes, and underscores.`);
+        case 'alpha_num': return make((value) => /^[\p{L}\p{M}\p{N}]+$/u.test(String(value)), (a) => `The ${a} field must only contain letters and numbers.`);
+        case 'ascii': return make((value) => /^[\x00-\x7F]*$/.test(String(value)), (a) => `The ${a} field must only contain single-byte alphanumeric characters and symbols.`);
+        case 'lowercase': return make((value) => String(value) === String(value).toLowerCase(), (a) => `The ${a} field must be lowercase.`);
+        case 'uppercase': return make((value) => String(value) === String(value).toUpperCase(), (a) => `The ${a} field must be uppercase.`);
+        case 'json': return make((value) => { try {
+            JSON.parse(String(value));
+            return true;
+        }
+        catch {
+            return false;
+        } }, (a) => `The ${a} field must be a valid JSON string.`);
+        case 'ip': return make((value) => isIpv4(String(value)) || isIpv6(String(value)), (a) => `The ${a} field must be a valid IP address.`);
+        case 'ipv4': return make((value) => isIpv4(String(value)), (a) => `The ${a} field must be a valid IPv4 address.`);
+        case 'ipv6': return make((value) => isIpv6(String(value)), (a) => `The ${a} field must be a valid IPv6 address.`);
+        case 'mac_address': return make((value) => /^([0-9A-Fa-f]{2}[:-]){5}[0-9A-Fa-f]{2}$/.test(String(value)), (a) => `The ${a} field must be a valid MAC address.`);
+        case 'hex_color': return make((value) => /^#([0-9a-f]{3}|[0-9a-f]{4}|[0-9a-f]{6}|[0-9a-f]{8})$/i.test(String(value)), (a) => `The ${a} field must be a valid hexadecimal color.`);
+        case 'date': return make((value) => dateOf(value) !== null, (a) => `The ${a} field must be a valid date.`);
+        case 'min': return make((value) => sizeOf(value, numeric) >= Number(parameter), (a) => (numeric ? `The ${a} field must be at least ${parameter}.` : `The ${a} field must be at least ${parameter}${unit(undefined, numeric)}.`));
+        case 'max': return make((value) => sizeOf(value, numeric) <= Number(parameter), (a) => (numeric ? `The ${a} field must not be greater than ${parameter}.` : `The ${a} field must not be greater than ${parameter}${unit(undefined, numeric)}.`));
+        case 'size': return make((value) => sizeOf(value, numeric) === Number(parameter), (a) => (numeric ? `The ${a} field must be ${parameter}.` : `The ${a} field must be ${parameter}${unit(undefined, numeric)}.`));
+        case 'between': {
+            const [low, high] = list(parameter).map(Number);
+            return make((value) => { const size = sizeOf(value, numeric); return size >= low && size <= high; }, (a) => `The ${a} field must be between ${low} and ${high}${unit(undefined, numeric)}.`);
+        }
+        case 'digits': return make((value) => new RegExp(`^\\d{${Number(parameter)}}$`).test(String(value)), (a) => `The ${a} field must be ${parameter} digits.`);
+        case 'digits_between': {
+            const [low, high] = list(parameter).map(Number);
+            return make((value) => /^\d+$/.test(String(value)) && String(value).length >= low && String(value).length <= high, (a) => `The ${a} field must be between ${low} and ${high} digits.`);
+        }
+        case 'multiple_of': return make((value) => isNumeric(value) && Math.abs(Number(value) / Number(parameter) - Math.round(Number(value) / Number(parameter))) < 1e-9, (a) => `The ${a} field must be a multiple of ${parameter}.`);
+        case 'in': return make((value) => (Array.isArray(value) ? value : [value]).every((item) => list(parameter).includes(String(item))), (a) => `The selected ${a} is invalid.`);
+        case 'not_in': return make((value) => (Array.isArray(value) ? value : [value]).every((item) => !list(parameter).includes(String(item))), (a) => `The selected ${a} is invalid.`);
+        case 'regex': {
+            const pattern = parseRegex(parameter);
+            return make((value) => pattern.test(String(value)), (a) => `The ${a} field format is invalid.`);
+        }
+        case 'not_regex': {
+            const pattern = parseRegex(parameter);
+            return make((value) => !pattern.test(String(value)), (a) => `The ${a} field format is invalid.`);
+        }
+        case 'starts_with': return make((value) => list(parameter).some((prefix) => String(value).startsWith(prefix)), (a) => `The ${a} field must start with one of the following: ${list(parameter).join(', ')}.`);
+        case 'ends_with': return make((value) => list(parameter).some((suffix) => String(value).endsWith(suffix)), (a) => `The ${a} field must end with one of the following: ${list(parameter).join(', ')}.`);
+        case 'doesnt_start_with': return make((value) => !list(parameter).some((prefix) => String(value).startsWith(prefix)), (a) => `The ${a} field must not start with one of the following: ${list(parameter).join(', ')}.`);
+        case 'doesnt_end_with': return make((value) => !list(parameter).some((suffix) => String(value).endsWith(suffix)), (a) => `The ${a} field must not end with one of the following: ${list(parameter).join(', ')}.`);
+        case 'distinct': return make((value) => !Array.isArray(value) || new Set(value.map(String)).size === value.length, (a) => `The ${a} field has a duplicate value.`);
+        case 'confirmed': return make((value, ctx) => String(value) === String(sibling(ctx, parameter || `${options.name}_confirmation`) ?? ''), (a) => `The ${a} field confirmation does not match.`);
+        case 'same': return make((value, ctx) => String(value) === String(sibling(ctx, parameter) ?? ''), (a) => `The ${a} field must match ${parameter.replace(/_/g, ' ')}.`);
+        case 'different': return make((value, ctx) => String(value) !== String(sibling(ctx, parameter) ?? ''), (a) => `The ${a} field and ${parameter.replace(/_/g, ' ')} must be different.`);
+        case 'gt':
+        case 'gte':
+        case 'lt':
+        case 'lte': {
+            const operator = { gt: (x, y) => x > y, gte: (x, y) => x >= y, lt: (x, y) => x < y, lte: (x, y) => x <= y }[name];
+            const words = { gt: 'greater than', gte: 'greater than or equal to', lt: 'less than', lte: 'less than or equal to' }[name];
+            return make((value, ctx) => { const other = compareTo(parameter, ctx); return other === null || operator(sizeOf(value, true), other); }, (a) => `The ${a} field must be ${words} ${isNumeric(parameter) ? parameter : parameter.replace(/_/g, ' ')}.`);
+        }
+        case 'after':
+        case 'after_or_equal':
+        case 'before':
+        case 'before_or_equal': {
+            const reference = (ctx) => dateOf(parameter === 'today' ? new Date().toISOString().slice(0, 10) : parameter === 'tomorrow' ? new Date(Date.now() + 86400000).toISOString().slice(0, 10) : (dateOf(parameter) !== null ? parameter : sibling(ctx, parameter)));
+            const test = { after: (x, y) => x > y, after_or_equal: (x, y) => x >= y, before: (x, y) => x < y, before_or_equal: (x, y) => x <= y }[name];
+            const words = { after: 'after', after_or_equal: 'after or equal to', before: 'before', before_or_equal: 'before or equal to' }[name];
+            return make((value, ctx) => { const own = dateOf(value), other = reference(ctx); return own !== null && (other === null || test(own, other)); }, (a) => `The ${a} field must be a date ${words} ${parameter.replace(/_/g, ' ')}.`);
+        }
+        default: throw new Error(`Unknown validation rule "${name}": write it as a custom rule with rule().`);
+    }
+}
+function isIpv4(value) { return /^(25[0-5]|2[0-4]\d|1?\d?\d)(\.(25[0-5]|2[0-4]\d|1?\d?\d)){3}$/.test(value); }
+function isIpv6(value) {
+    if (!/^[0-9a-fA-F:.]+$/.test(value) || (value.match(/::/g) ?? []).length > 1)
+        return false;
+    const groups = value.split(':');
+    return groups.length >= 3 && groups.length <= 8 && groups.every((group) => group === '' || /^[0-9a-fA-F]{1,4}$/.test(group) || isIpv4(group));
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navette-js/forms",
-  "version": "1.0.0-beta.3",
+  "version": "1.0.0-beta.5",
   "description": "Form fields and validation for Navette admin panels.",
   "license": "MIT",
   "type": "module",
@@ -42,9 +42,9 @@
     "node"
   ],
   "dependencies": {
-    "@navette-js/actions": "1.0.0-beta.3",
-    "@navette-js/schemas": "1.0.0-beta.3",
-    "@navette-js/support": "1.0.0-beta.3",
+    "@navette-js/actions": "1.0.0-beta.5",
+    "@navette-js/schemas": "1.0.0-beta.5",
+    "@navette-js/support": "1.0.0-beta.5",
     "@tiptap/core": "^3.33.1",
     "@tiptap/extension-highlight": "^3.33.1",
     "@tiptap/extension-image": "^3.33.1",

package/views/components/text-input.ejs

@@ -1,20 +1,29 @@
-<%# Text input with its prefix/suffix wrapper. %>
+<%# Text input with its prefix/suffix wrapper: labels, icons and actions. %>
 <div <%- wrapper %>>
-    <% if (prefix !== null) { %>
-        <div x-on:click="if (! $event.target.closest('.fi-input-wrp-actions')) $dispatch('focus-input')" class="fi-input-wrp-prefix fi-input-wrp-prefix-has-content fi-input-wrp-prefix-has-label">
+    <% if (hasPrefix) { %>
+        <div<% if (prefix !== null || prefixIcon) { %> x-on:click="if (! $event.target.closest('.fi-input-wrp-actions')) $dispatch('focus-input')"<% } %> class="<%- cls(['fi-input-wrp-prefix', 'fi-input-wrp-prefix-has-content', { 'fi-inline': prefixInline, 'fi-input-wrp-prefix-has-label': prefix !== null }]) %>">
+            <% if (prefixActions.length) { %><div class="fi-input-wrp-actions"><%- prefixActions.join('') %></div><% } %>
+            <%- prefixIcon %>
+            <% if (prefix !== null) { %>
             <span class="fi-input-wrp-label">
                 <%= prefix %>
             </span>
+            <% } %>
         </div>
     <% } %>
     <div class="fi-input-wrp-content-ctn">
         <input <%- input %> />
+        <% if (datalist) { %><datalist id="<%= datalist.id %>"><% for (const option of datalist.options) { %><option value="<%= option %>"></option><% } %></datalist><% } %>
     </div>
-    <% if (suffix !== null) { %>
-        <div x-on:click="if (! $event.target.closest('.fi-input-wrp-actions')) $dispatch('focus-input')" class="fi-input-wrp-suffix fi-input-wrp-suffix-has-label">
+    <% if (hasSuffix) { %>
+        <div<% if (suffix !== null || suffixIcon) { %> x-on:click="if (! $event.target.closest('.fi-input-wrp-actions')) $dispatch('focus-input')"<% } %> class="<%- cls(['fi-input-wrp-suffix', { 'fi-inline': suffixInline, 'fi-input-wrp-suffix-has-label': suffix !== null }]) %>">
+            <% if (suffix !== null) { %>
             <span class="fi-input-wrp-label">
                 <%= suffix %>
             </span>
+            <% } %>
+            <%- suffixIcon %>
+            <% if (suffixActions.length) { %><div class="fi-input-wrp-actions"><%- suffixActions.join('') %></div><% } %>
         </div>
     <% } %>
     <% if (revealable) { %>