@limetech/lime-elements 39.13.2 → 39.14.0

package/dist/collection/components/form/form.css

@@ -124,10 +124,10 @@
 .limel-form-row--layout .main-information {
   position: relative;
 }
-.limel-form-row--layout .main-information > .form-group.field {
+.limel-form-row--layout .main-information > .rjsf-field {
   position: unset;
 }
-.limel-form-row--layout .main-information > .form-group.field limel-help {
+.limel-form-row--layout .main-information > .rjsf-field limel-help {
   top: 0;
 }
 .limel-form-row--layout limel-icon {
@@ -155,12 +155,12 @@
 .limel-form-row--layout .has-icon .description {
   padding-left: calc(var(--limel-form-row-icon-size) + var(--limel-form-row-main-information-gap));
 }
-.limel-form-row--layout .form-group.field {
+.limel-form-row--layout .rjsf-field {
   flex-shrink: 0;
   display: flex;
   align-content: center;
 }
-.limel-form-row--layout .form-group.field limel-slider {
+.limel-form-row--layout .rjsf-field limel-slider {
   min-width: 8rem;
   display: block;
 }
@@ -185,7 +185,7 @@
   box-sizing: border-box;
 }
 
-.form-group {
+.rjsf-field {
   min-width: 0;
 }
 
@@ -368,26 +368,26 @@ limel-markdown {
   margin-bottom: 0.5rem;
 }
 
-.form-group {
+.rjsf-field {
   position: relative;
 }
-.form-group limel-help {
+.rjsf-field limel-help {
   position: absolute;
   top: calc(var(--form-row-gap, 1rem) * -0.5);
   left: calc(var(--form-column-gap, 1rem) * -0.5);
 }
-.form-group h1 {
+.rjsf-field h1 {
   color: rgb(var(--contrast-1400), 0.8);
 }
-.form-group h1 {
+.rjsf-field h1 {
   --limel-form-h1-font-size: 1.476rem;
   font-weight: 800;
 }
-.form-group .form-group h1 {
+.rjsf-field .rjsf-field h1 {
   --limel-form-h1-font-size: 1.383rem;
   font-weight: 700;
 }
-.form-group .form-group h1:before {
+.rjsf-field .rjsf-field h1:before {
   content: "";
   display: block;
   position: absolute;
@@ -401,28 +401,28 @@ limel-markdown {
   border-radius: 0.125rem;
   opacity: 0.6;
 }
-.form-group .form-group .form-group h1 {
+.rjsf-field .rjsf-field .rjsf-field h1 {
   --limel-form-h1-font-size: 1.296rem;
   font-weight: 600;
 }
-.form-group .form-group .form-group h1:before {
+.rjsf-field .rjsf-field .rjsf-field h1:before {
   display: none;
 }
-.form-group .form-group .form-group .form-group h1 {
+.rjsf-field .rjsf-field .rjsf-field .rjsf-field h1 {
   --limel-form-h1-font-size: 1.215rem;
 }
-.form-group .form-group .form-group .form-group h1:before {
+.rjsf-field .rjsf-field .rjsf-field .rjsf-field h1:before {
   display: none;
 }
-.form-group .form-group .form-group .form-group .form-group h1 {
+.rjsf-field .rjsf-field .rjsf-field .rjsf-field .rjsf-field h1 {
   --limel-form-h1-font-size: 1.138rem;
 }
-.form-group .form-group .form-group .form-group .form-group h1:before {
+.rjsf-field .rjsf-field .rjsf-field .rjsf-field .rjsf-field h1:before {
   display: none;
 }
-.form-group .form-group .form-group .form-group .form-group .form-group h1 {
+.rjsf-field .rjsf-field .rjsf-field .rjsf-field .rjsf-field .rjsf-field h1 {
   --limel-form-h1-font-size: 1.067rem;
 }
-.form-group .form-group .form-group .form-group .form-group .form-group h1:before {
+.rjsf-field .rjsf-field .rjsf-field .rjsf-field .rjsf-field .rjsf-field h1:before {
   display: none;
 }

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;