@limetech/lime-elements 39.13.3 → 39.14.0

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

@@ -2,12 +2,12 @@ import { h, } from "@stencil/core";
 import React from "react";
 import { createRoot } from "react-dom/client";
 import JSONSchemaForm from "@rjsf/core";
-import { ArrayFieldTemplate, FieldTemplate, ObjectFieldTemplate, } from "./templates";
+import { ArrayFieldTemplate, ArrayFieldItemTemplate, FieldTemplate, ObjectFieldTemplate, } from "./templates";
 import { SchemaField as CustomSchemaField } from "./fields/schema-field";
 import { ArrayField as CustomArrayField } from "./fields/array-field";
 import { ObjectField as CustomObjectField } from "./fields/object-field";
 import { widgets } from "./widgets";
-import { getValidator, getSchemaId } from "./schema-cache";
+import { rjsfValidator } from "./validator";
 import { mapValues } from "lodash-es";
 /**
  * @exampleComponent limel-example-form
@@ -44,10 +44,6 @@ export class Form {
     connectedCallback() {
         this.initialize();
     }
-    componentWillLoad() {
-        this.setSchemaId();
-        this.createValidator();
-    }
     componentDidLoad() {
         this.initialize();
     }
@@ -60,11 +56,11 @@ export class Form {
         }
         this.initialized = true;
         this.reactRender();
-        this.validateForm(this.value);
+        this.validateFormData();
     }
     componentDidUpdate() {
         this.reactRender();
-        this.validateForm(this.value);
+        this.validateFormData();
     }
     disconnectedCallback() {
         if (this.root) {
@@ -74,7 +70,7 @@ export class Form {
         this.initialized = false;
     }
     render() {
-        return h("div", { key: '8e03d70f44885de2f18b20e649cd419e030208fd', class: "root" });
+        return h("div", { key: '56c9180ab3e5b4ee3282db2c38b5eaf522e8c60f', class: "root" });
     }
     reactRender() {
         if (!this.root) {
@@ -82,20 +78,24 @@ export class Form {
             this.root = createRoot(rootElement);
         }
         this.root.render(React.createElement(JSONSchemaForm, {
-            schema: this.modifiedSchema,
+            schema: this.schema,
             formData: this.value,
             onChange: this.handleChange,
             widgets: widgets,
-            liveValidate: true,
+            validator: rjsfValidator,
+            liveValidate: 'onChange',
             showErrorList: false,
             extraErrors: this.getExtraErrors(this.errors),
-            FieldTemplate: FieldTemplate,
-            ArrayFieldTemplate: ArrayFieldTemplate,
-            ObjectFieldTemplate: ObjectFieldTemplate,
+            templates: {
+                FieldTemplate: FieldTemplate,
+                ArrayFieldTemplate: ArrayFieldTemplate,
+                ArrayFieldItemTemplate: ArrayFieldItemTemplate,
+                ObjectFieldTemplate: ObjectFieldTemplate,
+            },
             disabled: this.disabled,
             transformErrors: this.getCustomErrorMessages,
             formContext: {
-                schema: this.modifiedSchema,
+                schema: this.schema,
                 rootValue: this.value,
                 propsFactory: this.propsFactory,
             },
@@ -109,46 +109,31 @@ export class Form {
     handleChange(event) {
         this.change.emit(event.formData);
     }
-    validateForm(value) {
-        const isValid = this.validator(value) === true;
-        const errors = this.getValidationErrors();
-        const status = {
-            valid: isValid,
-            errors: errors,
-        };
-        if (this.isValid !== status.valid || !status.valid) {
-            this.validate.emit(status);
-        }
-        this.isValid = status.valid;
-    }
-    setSchema() {
-        this.setSchemaId();
-        this.createValidator();
+    validateFormData() {
+        var _a;
+        const { errors } = rjsfValidator.validateFormData((_a = this.value) !== null && _a !== void 0 ? _a : {}, this.schema);
+        this.emitValidationStatus(errors);
     }
-    setSchemaId() {
-        // RJSF v2 requires a unique $id per distinct schema to avoid
-        // validation cache collisions.
-        // https://github.com/rjsf-team/react-jsonschema-form/issues/1563
-        const id = getSchemaId(this.schema);
-        this.modifiedSchema = Object.assign(Object.assign({}, this.schema), { id: id, $id: id });
+    hasExtraErrors() {
+        return !!this.errors && Object.keys(this.errors).length > 0;
     }
-    createValidator() {
-        this.validator = getValidator(this.schema);
+    emitValidationStatus(errors) {
+        const valid = (!errors || errors.length === 0) && !this.hasExtraErrors();
+        const formErrors = this.mapErrors(errors !== null && errors !== void 0 ? errors : []);
+        const status = { valid: valid, errors: formErrors };
+        if (this.isValid !== valid || !valid) {
+            this.validate.emit(status);
+        }
+        this.isValid = valid;
     }
-    getValidationErrors() {
-        const errors = [...(this.validator.errors || [])];
-        return errors.map((error) => {
-            let property = error.dataPath;
-            if (error.keyword === 'required') {
-                property = error.params.missingProperty;
-            }
-            return {
-                name: error.keyword,
-                property: property,
-                message: error.message,
-                schemaPath: error.schemaPath,
-            };
-        });
+    mapErrors(errors) {
+        return errors.map((error) => ({
+            name: error.name,
+            property: error.property,
+            message: error.message,
+            schemaPath: error.schemaPath,
+            params: error.params,
+        }));
     }
     getExtraErrors(errors) {
         if (!errors) {
@@ -165,20 +150,9 @@ export class Form {
         if (!this.transformErrors) {
             return originalErrors;
         }
-        const errors = originalErrors.map((error) => {
-            return {
-                name: error.name,
-                params: error.params,
-                property: error.property,
-                message: error.message,
-                // For some reason 'schemaPath' is missing from the AjvError type definition:
-                // https://github.com/rjsf-team/react-jsonschema-form/issues/2140
-                schemaPath: error['schemaPath'],
-            };
-        });
-        // Use `.call({}, …)` here to bind `this` to an empty object to prevent
-        // the consumer submitted `transformErrors` from getting access to our
-        // component's internals. /Ads
+        const errors = this.mapErrors(originalErrors);
+        // Use `.call({}, …)` to prevent the consumer's `transformErrors`
+        // from getting access to our component's internals. /Ads
         return this.transformErrors
             .call({}, errors)
             .map((transformedError) => {
@@ -383,10 +357,4 @@ export class Form {
             }];
     }
     static get elementRef() { return "host"; }
-    static get watchers() {
-        return [{
-                "propName": "schema",
-                "methodName": "setSchema"
-            }];
-    }
 }

package/dist/collection/components/form/form.test-schemas.js

@@ -0,0 +1,308 @@
+export const stringSchema = {
+    type: 'object',
+    properties: {
+        name: { type: 'string', title: 'Name' },
+    },
+};
+export const numberSchema = {
+    type: 'object',
+    properties: {
+        age: { type: 'number', title: 'Age' },
+    },
+};
+export const booleanSchema = {
+    type: 'object',
+    properties: {
+        active: { type: 'boolean', title: 'Active' },
+    },
+};
+export const enumSchema = {
+    type: 'object',
+    properties: {
+        color: {
+            type: 'string',
+            title: 'Color',
+            enum: ['red', 'green', 'blue'],
+        },
+    },
+};
+export const requiredFieldSchema = {
+    type: 'object',
+    properties: {
+        name: { type: 'string', title: 'Name' },
+    },
+    required: ['name'],
+};
+export const emailFormatSchema = {
+    type: 'object',
+    properties: {
+        email: { type: 'string', title: 'Email', format: 'email' },
+    },
+    required: ['email'],
+};
+export const arraySchema = {
+    type: 'object',
+    properties: {
+        tags: {
+            type: 'array',
+            title: 'Tags',
+            items: { type: 'string' },
+        },
+    },
+};
+export const nestedObjectSchema = {
+    type: 'object',
+    properties: {
+        address: {
+            type: 'object',
+            title: 'Address',
+            properties: {
+                street: { type: 'string', title: 'Street' },
+                city: { type: 'string', title: 'City' },
+            },
+        },
+    },
+};
+export const arrayOfObjectsSchema = {
+    type: 'object',
+    properties: {
+        heroes: {
+            type: 'array',
+            title: 'Heroes',
+            items: {
+                type: 'object',
+                title: 'Hero',
+                properties: {
+                    name: { type: 'string', title: 'Name' },
+                },
+            },
+        },
+    },
+};
+export const dynamicSchema = {
+    type: 'object',
+    properties: {
+        name: { type: 'string', title: 'Name' },
+    },
+};
+export const dynamicSchemaUpdated = {
+    type: 'object',
+    properties: {
+        name: { type: 'string', title: 'Name' },
+        email: { type: 'string', title: 'Email' },
+    },
+};
+export const helpSchema = {
+    type: 'object',
+    properties: {
+        name: {
+            type: 'string',
+            title: 'Name',
+            lime: {
+                help: {
+                    value: 'Enter your full name',
+                },
+            },
+        },
+    },
+};
+export const gridLayoutSchema = {
+    type: 'object',
+    properties: {
+        first: { type: 'string', title: 'First' },
+        second: { type: 'string', title: 'Second' },
+    },
+    lime: {
+        layout: {
+            type: 'grid',
+            columns: 2,
+        },
+    },
+};
+export const collapsibleSchema = {
+    type: 'object',
+    properties: {
+        details: {
+            type: 'object',
+            title: 'Details',
+            properties: {
+                info: { type: 'string', title: 'Info' },
+            },
+            lime: {
+                collapsible: true,
+            },
+        },
+    },
+};
+export const dateSchema = {
+    type: 'object',
+    properties: {
+        birthday: { type: 'string', title: 'Birthday', format: 'date' },
+    },
+};
+export const integerSchema = {
+    type: 'object',
+    properties: {
+        count: { type: 'integer', title: 'Count' },
+    },
+};
+export const serverErrorsSchema = {
+    type: 'object',
+    properties: {
+        name: { type: 'string', title: 'Name' },
+    },
+};
+export const transformErrorsSchema = {
+    type: 'object',
+    properties: {
+        code: { type: 'string', title: 'Code', pattern: '^[A-Z]{3}$' },
+    },
+    required: ['code'],
+};
+export const customComponentSchema = {
+    type: 'object',
+    properties: {
+        enabled: {
+            type: 'boolean',
+            title: 'Enabled',
+            lime: {
+                component: {
+                    name: 'limel-switch',
+                },
+            },
+        },
+    },
+};
+export const undefinedComponentSchema = {
+    type: 'object',
+    properties: {
+        field: {
+            type: 'string',
+            title: 'Field',
+            lime: {
+                component: {
+                    name: 'limel-does-not-exist',
+                },
+            },
+        },
+    },
+};
+export const emptySchema = {
+    type: 'object',
+    properties: {},
+};
+export const hiddenFieldSchema = {
+    type: 'object',
+    properties: {
+        visible: { type: 'string', title: 'Visible' },
+        secret: {
+            type: 'string',
+            title: 'Secret',
+            lime: { hidden: true },
+        },
+    },
+};
+export const readOnlyFieldSchema = {
+    type: 'object',
+    properties: {
+        locked: {
+            type: 'string',
+            title: 'Locked',
+            readOnly: true,
+        },
+    },
+};
+export const arrayMaxItemsSchema = {
+    type: 'object',
+    properties: {
+        tags: {
+            type: 'array',
+            title: 'Tags',
+            items: { type: 'string' },
+            maxItems: 2,
+        },
+    },
+};
+export const arrayItemControlsSchema = {
+    type: 'object',
+    properties: {
+        items: {
+            type: 'array',
+            title: 'Items',
+            items: { type: 'string' },
+            lime: {
+                allowItemReorder: false,
+                allowItemRemoval: false,
+            },
+        },
+    },
+};
+export const rowLayoutSchema = {
+    type: 'object',
+    properties: {
+        first: {
+            type: 'string',
+            title: 'First',
+            description: 'First field description',
+        },
+        second: {
+            type: 'string',
+            title: 'Second',
+            description: 'Second field description',
+        },
+    },
+    lime: {
+        layout: {
+            type: 'row',
+        },
+    },
+};
+export const rowLayoutWithCustomComponentSchema = {
+    type: 'object',
+    properties: {
+        name: {
+            type: 'string',
+            title: 'Name',
+            description: 'Name description',
+        },
+        active: {
+            type: 'boolean',
+            title: 'Active',
+            description: 'Active description',
+            lime: {
+                component: {
+                    name: 'limel-switch',
+                },
+            },
+        },
+    },
+    lime: {
+        layout: {
+            type: 'row',
+        },
+    },
+};
+export const nestedArrayObjectSchema = {
+    type: 'object',
+    properties: {
+        people: {
+            type: 'array',
+            title: 'People',
+            items: {
+                type: 'object',
+                title: 'Person',
+                properties: {
+                    name: { type: 'string', title: 'Name' },
+                    address: {
+                        type: 'object',
+                        title: 'Address',
+                        properties: {
+                            street: { type: 'string', title: 'Street' },
+                            city: { type: 'string', title: 'City' },
+                        },
+                    },
+                },
+            },
+        },
+    },
+};

package/dist/collection/components/form/row/row-context.js

@@ -0,0 +1,2 @@
+import { createContext } from "react";
+export const RowLayoutContext = createContext(false);

package/dist/collection/components/form/row/row.js

@@ -1,4 +1,5 @@
 import React from "react";
+import { RowLayoutContext } from "./row-context";
 export class Row extends React.Component {
     constructor(props) {
         super(props);
@@ -37,8 +38,7 @@ export class Row extends React.Component {
         }
     }
     renderChildren() {
-        const children = this.props.children;
-        return Object.assign(Object.assign({}, children), { props: Object.assign(Object.assign({}, children.props), { schema: Object.assign(Object.assign({}, children.props.schema), { title: null, description: null }) }) });
+        return React.createElement(RowLayoutContext.Provider, { value: true }, this.props.children);
     }
     get schema() {
         return this.props.children.props.schema;

package/dist/collection/components/form/templates/array-context.js

@@ -0,0 +1,2 @@
+import { createContext } from "react";
+export const ArrayFieldContext = createContext(null);

package/dist/collection/components/form/templates/array-field-collapsible-item.js

@@ -37,7 +37,7 @@ export class CollapsibleItemTemplate extends React.Component {
         const { data, schema, formSchema } = this.props;
         let children;
         if (this.state.isOpen) {
-            children = this.props.item.children;
+            children = this.props.children;
         }
         const dragHandle = this.props.allowItemReorder
             ? React.createElement('limel-drag-handle', {
@@ -59,14 +59,14 @@ export class CollapsibleItemTemplate extends React.Component {
         }, dragHandle, children);
     }
     setActions(element) {
-        const { item, index, allowItemRemoval } = this.props;
+        const { buttonsProps, allowItemRemoval } = this.props;
         const actions = [];
         if (allowItemRemoval) {
             actions.push({
                 id: 'remove',
                 icon: 'trash',
-                disabled: !item.hasRemove,
-                run: item.onDropIndexClick(index),
+                disabled: !buttonsProps.hasRemove,
+                run: buttonsProps.onRemoveItem,
             });
         }
         element.actions = actions;

package/dist/collection/components/form/templates/array-field-item.js

@@ -0,0 +1,47 @@
+import React, { useContext } from "react";
+import { isObjectType } from "../schema";
+import { CollapsibleItemTemplate } from "./array-field-collapsible-item";
+import { SimpleItemTemplate } from "./array-field-simple-item";
+import { ArrayFieldContext } from "./array-context";
+export const ArrayFieldItemTemplate = (props) => {
+    const arrayContext = useContext(ArrayFieldContext);
+    const schema = arrayContext === null || arrayContext === void 0 ? void 0 : arrayContext.arraySchema;
+    const formData = arrayContext === null || arrayContext === void 0 ? void 0 : arrayContext.formData;
+    const formContext = props.registry.formContext;
+    const allowItemReorder = canItemReorder(props, schema);
+    const allowItemRemoval = canRemoveItems(schema);
+    if (schema && isObjectType(schema.items)) {
+        const itemData = Array.isArray(formData)
+            ? formData[props.index]
+            : undefined;
+        return React.createElement(CollapsibleItemTemplate, {
+            key: props.itemKey,
+            buttonsProps: props.buttonsProps,
+            index: props.index,
+            data: itemData,
+            schema: schema,
+            formSchema: formContext === null || formContext === void 0 ? void 0 : formContext.schema,
+            allowItemRemoval: allowItemRemoval,
+            allowItemReorder: allowItemReorder,
+        }, props.children);
+    }
+    return React.createElement(SimpleItemTemplate, {
+        key: props.itemKey,
+        buttonsProps: props.buttonsProps,
+        index: props.index,
+        allowItemRemoval: allowItemRemoval,
+        allowItemReorder: allowItemReorder,
+    }, props.children);
+};
+function canRemoveItems(schema) {
+    const limeOptions = (schema === null || schema === void 0 ? void 0 : schema.lime) || {};
+    return limeOptions.allowItemRemoval !== false;
+}
+function canItemReorder(props, schema) {
+    const limeOptions = (schema === null || schema === void 0 ? void 0 : schema.lime) || {};
+    if (limeOptions.allowItemReorder === false) {
+        return false;
+    }
+    const { buttonsProps } = props;
+    return Boolean((buttonsProps === null || buttonsProps === void 0 ? void 0 : buttonsProps.hasMoveDown) || (buttonsProps === null || buttonsProps === void 0 ? void 0 : buttonsProps.hasMoveUp));
+}

package/dist/collection/components/form/templates/array-field-simple-item.js

@@ -5,8 +5,7 @@ export class SimpleItemTemplate extends React.Component {
         super(props);
         this.props = props;
         this.handleRemove = (event) => {
-            const { item, index } = this.props;
-            item.onDropIndexClick(index)(event);
+            this.props.buttonsProps.onRemoveItem(event);
         };
         this.setRemoveButton = (button) => {
             if (this.removeButton) {
@@ -22,12 +21,12 @@ export class SimpleItemTemplate extends React.Component {
         this.setRemoveButton(undefined);
     }
     render() {
-        const { item, allowItemReorder } = this.props;
+        const { allowItemReorder } = this.props;
         return React.createElement('div', {
             className: 'array-item limel-form-array-item--simple',
-            'data-reorder-id': String(this.props.dataIndex),
+            'data-reorder-id': String(this.props.index),
             'data-reorderable': allowItemReorder ? 'true' : 'false',
-        }, this.props.item.children, this.renderRemoveButton(item), this.renderDragHandle());
+        }, this.props.children, this.renderRemoveButton(), this.renderDragHandle());
     }
     renderDragHandle() {
         if (!this.props.allowItemReorder) {
@@ -37,13 +36,13 @@ export class SimpleItemTemplate extends React.Component {
             class: 'drag-handle',
         });
     }
-    renderRemoveButton(item) {
+    renderRemoveButton() {
         if (!this.props.allowItemRemoval) {
             return;
         }
         const props = {
             icon: 'trash',
-            disabled: !item.hasRemove,
+            disabled: !this.props.buttonsProps.hasRemove,
             ref: this.setRemoveButton,
         };
         return React.createElement(LIMEL_ICON_BUTTON, props);