@limetech/lime-elements 37.1.0-next.85 → 37.1.0-next.87
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +17 -0
- package/dist/cjs/limel-breadcrumbs_3.cjs.entry.js +3 -4
- package/dist/cjs/limel-breadcrumbs_3.cjs.entry.js.map +1 -1
- package/dist/cjs/limel-form.cjs.entry.js +20 -4
- package/dist/cjs/limel-form.cjs.entry.js.map +1 -1
- package/dist/cjs/limel-markdown.cjs.entry.js +7 -3
- package/dist/cjs/limel-markdown.cjs.entry.js.map +1 -1
- package/dist/collection/components/form/adapters/widget-adapter.js +3 -2
- package/dist/collection/components/form/adapters/widget-adapter.js.map +1 -1
- package/dist/collection/components/form/fields/schema-field.js +2 -1
- package/dist/collection/components/form/fields/schema-field.js.map +1 -1
- package/dist/collection/components/form/form.css +18 -0
- package/dist/collection/components/form/form.js +1 -0
- package/dist/collection/components/form/form.js.map +1 -1
- package/dist/collection/components/form/form.types.js.map +1 -1
- package/dist/collection/components/form/help/help.js +18 -0
- package/dist/collection/components/form/help/help.js.map +1 -0
- package/dist/collection/components/form/help/index.js +2 -0
- package/dist/collection/components/form/help/index.js.map +1 -0
- package/dist/collection/components/menu/menu.js +3 -4
- package/dist/collection/components/menu/menu.js.map +1 -1
- package/dist/esm/limel-breadcrumbs_3.entry.js +3 -4
- package/dist/esm/limel-breadcrumbs_3.entry.js.map +1 -1
- package/dist/esm/limel-form.entry.js +20 -4
- package/dist/esm/limel-form.entry.js.map +1 -1
- package/dist/esm/limel-markdown.entry.js +7 -3
- package/dist/esm/limel-markdown.entry.js.map +1 -1
- package/dist/lime-elements/lime-elements.esm.js +1 -1
- package/dist/lime-elements/{p-551fdf0b.entry.js → p-261ceebe.entry.js} +2 -2
- package/dist/lime-elements/p-261ceebe.entry.js.map +1 -0
- package/dist/lime-elements/p-4465e78d.entry.js +2 -0
- package/dist/lime-elements/p-4465e78d.entry.js.map +1 -0
- package/dist/lime-elements/{p-d8b3e6f0.entry.js → p-6c7668ef.entry.js} +2 -2
- package/dist/lime-elements/p-6c7668ef.entry.js.map +1 -0
- package/dist/types/components/form/adapters/widget-adapter.d.ts +3 -6
- package/dist/types/components/form/form.d.ts +1 -0
- package/dist/types/components/form/form.types.d.ts +2 -0
- package/dist/types/components/form/help/help.d.ts +10 -0
- package/dist/types/components/form/help/index.d.ts +1 -0
- package/dist/types/components.d.ts +4 -0
- package/package.json +5 -5
- package/dist/lime-elements/p-551fdf0b.entry.js.map +0 -1
- package/dist/lime-elements/p-989b3cb9.entry.js +0 -2
- package/dist/lime-elements/p-989b3cb9.entry.js.map +0 -1
- package/dist/lime-elements/p-d8b3e6f0.entry.js.map +0 -1
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { LimeElementsAdapter } from './base-adapter';
|
|
3
3
|
import { capitalize } from 'lodash-es';
|
|
4
|
+
import { getHelpComponent } from '../help';
|
|
4
5
|
/**
|
|
5
6
|
* A widget is a concept in react-jsonschema-form (rjsf).
|
|
6
7
|
* It represents a HTML tag for the user to enter data, eg. input, select, etc.
|
|
@@ -71,11 +72,11 @@ export class LimeElementsWidgetAdapter extends React.Component {
|
|
|
71
72
|
const value = this.getValue();
|
|
72
73
|
const readonly = this.isReadOnly();
|
|
73
74
|
const newEvents = Object.assign({ change: this.props.widgetProps.onChange, blur: this.handleBlur }, events);
|
|
74
|
-
return React.createElement(LimeElementsAdapter, {
|
|
75
|
+
return React.createElement(React.Fragment, {}, React.createElement(LimeElementsAdapter, {
|
|
75
76
|
name: name,
|
|
76
77
|
elementProps: Object.assign({ value: value, label: this.getLabel(), disabled: disabled, readonly: readonly, required: this.isRequired(), invalid: this.isInvalid(), 'helper-text': this.getHelperText() }, extraProps),
|
|
77
78
|
events: newEvents,
|
|
78
|
-
});
|
|
79
|
+
}), getHelpComponent(this.props.widgetProps.schema));
|
|
79
80
|
}
|
|
80
81
|
isDisabled() {
|
|
81
82
|
var _a, _b;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"widget-adapter.js","sourceRoot":"","sources":["../../../../src/components/form/adapters/widget-adapter.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,mBAAmB,EAAE,MAAM,gBAAgB,CAAC;AACrD,OAAO,EAAE,UAAU,EAAE,MAAM,WAAW,CAAC;
|
|
1
|
+
{"version":3,"file":"widget-adapter.js","sourceRoot":"","sources":["../../../../src/components/form/adapters/widget-adapter.ts"],"names":[],"mappings":"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","sourcesContent":["import React from 'react';\nimport { WidgetProps } from '../widgets/types';\nimport { LimeElementsAdapter } from './base-adapter';\nimport { capitalize } from 'lodash-es';\nimport { LimeSchemaOptions } from '../../../interface';\nimport { getHelpComponent } from '../help';\n\ninterface WidgetAdapterProps {\n name: string;\n value?: any;\n widgetProps: WidgetProps;\n extraProps?: any;\n events?: { [key: string]: (event: any) => void };\n}\n\n/**\n * A widget is a concept in react-jsonschema-form (rjsf).\n * It represents a HTML tag for the user to enter data, eg. input, select, etc.\n *\n * We use the widget adapter exclusively so we can use lime-elements instead of the\n * default input/select/checkbox/etc fields that rjsf provides.\n *\n * Please read the docs for more info.\n * Link: https://react-jsonschema-form.readthedocs.io/\n */\nexport class LimeElementsWidgetAdapter extends React.Component {\n state = {\n modified: false,\n };\n\n constructor(public props: WidgetAdapterProps) {\n super(props);\n\n this.handleBlur = this.handleBlur.bind(this);\n }\n\n private hasValue() {\n const value = this.getValue();\n if (!value) {\n return false;\n }\n\n if (Array.isArray(value)) {\n return !!value.length;\n }\n\n if (typeof value === 'object') {\n return !!Object.entries(value).length;\n }\n\n return true;\n }\n\n private handleBlur() {\n this.setState({ modified: true });\n }\n\n private getLabel() {\n const { schema, label } = this.props.widgetProps;\n\n return label || schema.title;\n }\n\n private isInvalid() {\n const { modified } = this.state;\n const { rawErrors } = this.props.widgetProps;\n\n return (\n !!rawErrors && (modified || this.hasValue() || !this.isRequired())\n );\n }\n\n private isRequired() {\n const { required, schema } = this.props.widgetProps;\n\n return required || schema.minItems > 0;\n }\n\n private getHelperText() {\n const { rawErrors, schema } = this.props.widgetProps;\n\n if (!this.isInvalid()) {\n return schema.description;\n }\n\n if (rawErrors) {\n return capitalize(rawErrors[0]);\n }\n\n return schema.description;\n }\n\n private getValue() {\n const { value } = this.props;\n const { value: widgetValue } = this.props.widgetProps;\n\n // Use widgetValue unless its overriden in widget\n return value || widgetValue;\n }\n\n render() {\n const { name, events, extraProps } = this.props;\n const disabled = this.isDisabled();\n const value = this.getValue();\n const readonly = this.isReadOnly();\n\n const newEvents = {\n change: this.props.widgetProps.onChange,\n blur: this.handleBlur,\n ...events,\n };\n\n return React.createElement(\n React.Fragment,\n {},\n React.createElement(LimeElementsAdapter, {\n name: name,\n elementProps: {\n value: value,\n label: this.getLabel(),\n disabled: disabled,\n readonly: readonly,\n required: this.isRequired(),\n invalid: this.isInvalid(),\n 'helper-text': this.getHelperText(),\n ...extraProps,\n },\n events: newEvents,\n }),\n getHelpComponent(this.props.widgetProps.schema),\n );\n }\n\n private isDisabled() {\n const widgetProps = this.props.widgetProps;\n const options: LimeSchemaOptions = widgetProps.schema.lime;\n\n return (\n widgetProps.disabled ||\n options?.disabled ||\n options?.component?.props?.disabled\n );\n }\n\n private isReadOnly() {\n const widgetProps = this.props.widgetProps;\n\n return widgetProps.readonly;\n }\n}\n"]}
|
|
@@ -4,6 +4,7 @@ import React from 'react';
|
|
|
4
4
|
import { isEmpty, capitalize } from 'lodash-es';
|
|
5
5
|
import { resetDependentFields } from './field-helpers';
|
|
6
6
|
import { FieldTemplate } from '../templates';
|
|
7
|
+
import { getHelpComponent } from '../help';
|
|
7
8
|
/**
|
|
8
9
|
* If given a value and schema, check if the value should be translated
|
|
9
10
|
* from null to undefined to avoid issues with validation
|
|
@@ -169,7 +170,7 @@ export class SchemaField extends React.Component {
|
|
|
169
170
|
change: this.handleCustomComponentChange,
|
|
170
171
|
},
|
|
171
172
|
});
|
|
172
|
-
return React.createElement(FieldTemplate, Object.assign(Object.assign({}, this.props), { classNames: 'form-group field field-custom' }), component);
|
|
173
|
+
return React.createElement(FieldTemplate, Object.assign(Object.assign({}, this.props), { classNames: 'form-group field field-custom' }), component, getHelpComponent(props.schema));
|
|
173
174
|
}
|
|
174
175
|
render() {
|
|
175
176
|
if (hasCustomComponent(this.props.schema)) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"schema-field.js","sourceRoot":"","sources":["../../../../src/components/form/fields/schema-field.ts"],"names":[],"mappings":"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","sourcesContent":["import { LimeElementsAdapter } from '../adapters';\nimport JSONSchemaField from '@rjsf/core/lib/components/fields/SchemaField';\nimport React from 'react';\nimport { FieldProps } from './types';\nimport { isEmpty, capitalize } from 'lodash-es';\nimport { resetDependentFields } from './field-helpers';\nimport { FieldTemplate } from '../templates';\n\n/**\n * If given a value and schema, check if the value should be translated\n * from null to undefined to avoid issues with validation\n *\n * This function needs to be used for several reasons:\n * 1. CustomEvent does not allow `detail` to equal `undefined`, but we can call onChange with `undefined` in React\n * 2. `null` is treated as a valid value in a jsonschema and with marshmallow and it has its own type (null)\n * 3. Without changing `null` to `undefined` there would be no way to remove a field from\n * from the submitted form data once it had any data. (when POSTing, undefined is not posted since its not valid json)\n * 4. The only applies to custom web components since widgets handle transforming null/'' to undefined depending on the widget\n * and its purpose.\n *\n * Example:\n * If I have an object { name?: string, email?: string } that I am using a custom web component for `name`,\n * then initially, the formData will be {} which is fine because neither name or email are required. Then if i input a\n * value for name the formData will be { name: 'some_value' } which is also fine. But then if I want to remove name\n * from the form data I would delete all the text from the name input field. Web components would emit this empty value\n * as '' or null. If the web component tries to emit `undefined`, null would be emitted instead because CustomEvent has\n * a default `detail` value of null\n * @param {any} value the value associated with the schema\n * @param {any} schema the schema for the value\n * @returns {boolean} whether or not null should be changed to undefined\n */\nconst shouldChangeToUndefined = (value, schema): boolean => {\n return value === null && !schema.type.includes('null');\n};\n\nconst hasCustomComponent = (schema): boolean => {\n const name = schema.lime?.component?.name;\n if (!name) {\n return false;\n }\n\n try {\n verifyCustomComponentIsDefined(name);\n } catch {\n // eslint-disable-next-line no-console\n console.warn(`Custom component ${name} not defined`);\n\n return false;\n }\n\n return true;\n};\n\nconst verifyCustomComponentIsDefined = (elementName): void => {\n const supportsCustomElements = 'customElements' in window;\n\n if (!supportsCustomElements) {\n throw new Error(\n 'Custom form elements are not supported by this browser!',\n );\n }\n\n if (!customElements.get(elementName)) {\n throw new Error(`Custom form element '${elementName}' is not defined!`);\n }\n};\n\nconst getCustomComponent = (\n schema,\n): { name: string; props: { [key: string]: any } } => {\n const name = schema.lime?.component?.name;\n const props = schema.lime?.component?.props || {};\n\n return { name: name, props: props };\n};\n\n/**\n * Create properties from the factory that is set on `limel-form`\n * @param {*} formContext the form context\n * @param {*} schema the schema for the current field\n * @returns {object} the properties created by the factory\n */\nexport function getFactoryProps(\n formContext: any,\n schema: any,\n): Record<string, any> {\n const factory: (schema: any) => Record<string, any> =\n formContext.propsFactory;\n if (typeof factory !== 'function') {\n return {};\n }\n\n const props = factory(schema);\n if (!props) {\n return {};\n }\n\n return props;\n}\n\nexport class SchemaField extends React.Component<FieldProps> {\n state = {\n modified: false,\n };\n\n constructor(props) {\n super(props);\n this.handleChange = this.handleChange.bind(this);\n this.handleCustomComponentChange =\n this.handleCustomComponentChange.bind(this);\n }\n\n private hasValue() {\n const value = this.getValue();\n if (!value) {\n return false;\n }\n\n if (Array.isArray(value)) {\n return !!value.length;\n }\n\n if (typeof value === 'object') {\n return !isEmpty(value);\n }\n\n return true;\n }\n\n private getLabel() {\n const { schema } = this.props;\n\n return schema.title;\n }\n\n private isInvalid() {\n const { modified } = this.state;\n const { errorSchema } = this.props;\n\n return (\n (modified || this.hasValue() || !this.isRequired()) &&\n !isEmpty(errorSchema)\n );\n }\n\n private isRequired() {\n const { required, schema } = this.props;\n\n return required || schema.minItems > 0;\n }\n\n private getHelperText() {\n const { errorSchema, schema } = this.props;\n\n if (!this.isInvalid()) {\n const helperText = schema.lime?.component?.props?.helperText;\n\n return helperText || schema.description;\n }\n\n if (!isEmpty(errorSchema) && '__errors' in errorSchema) {\n return capitalize(errorSchema.__errors[0]); // eslint-disable-line no-underscore-dangle\n }\n\n return schema.description;\n }\n\n private getValue() {\n const { formData } = this.props;\n\n return formData;\n }\n\n private handleCustomComponentChange(event) {\n const { schema } = this.props;\n event.stopPropagation();\n\n let value = event.detail;\n\n if (shouldChangeToUndefined(value, schema)) {\n value = undefined;\n }\n\n this.handleChange(value);\n }\n\n private handleChange(data) {\n const { formData, schema } = this.props;\n const { rootSchema } = this.props.registry;\n\n this.setState({ modified: true });\n\n const newData = resetDependentFields(\n formData,\n data,\n schema,\n rootSchema,\n );\n\n this.props.onChange(newData);\n }\n\n private buildCustomComponentProps() {\n const {\n disabled,\n readonly,\n name,\n registry,\n schema,\n errorSchema,\n idSchema,\n } = this.props;\n const factoryProps = getFactoryProps(registry.formContext, schema);\n\n return {\n ...factoryProps,\n value: this.getValue(),\n required: this.isRequired(),\n readonly: readonly || schema.readOnly,\n disabled: disabled,\n invalid: this.isInvalid(),\n label: this.getLabel(),\n helperText: this.getHelperText(),\n formInfo: {\n schema: schema,\n rootSchema: registry.formContext.schema,\n errorSchema: errorSchema,\n rootValue: registry.formContext.rootValue,\n name: name,\n schemaPath: this.getSchemaPath(idSchema?.$id),\n },\n };\n }\n\n private renderCustomComponent(props: FieldProps) {\n const { name, props: userDefinedComponentProps } = getCustomComponent(\n props.schema,\n );\n\n verifyCustomComponentIsDefined(name);\n\n const component = React.createElement(LimeElementsAdapter, {\n name: name,\n elementProps: {\n ...userDefinedComponentProps,\n ...this.buildCustomComponentProps(),\n },\n events: {\n change: this.handleCustomComponentChange,\n },\n });\n\n return React.createElement(\n FieldTemplate,\n {\n ...this.props,\n classNames: 'form-group field field-custom',\n },\n component,\n );\n }\n\n render() {\n if (hasCustomComponent(this.props.schema)) {\n return this.renderCustomComponent(this.props);\n }\n\n const fieldProps = {\n ...this.props,\n onChange: this.handleChange,\n };\n\n return React.createElement(JSONSchemaField, fieldProps);\n }\n\n /**\n * Gets the path to the current property within the schema\n * @param {string} schemaId the id of the schema\n * @returns {string[]} an array with the schema path for the current property\n * @example\n * const schemaId = 'root_sections_0_controls_0_name';\n * const schemaPath = getSchemaPath(schemaId);\n * // => ['sections', '0', 'controls', '0', 'name']\n */\n private getSchemaPath(schemaId: string): string[] {\n if (schemaId === undefined) {\n return undefined;\n }\n\n return schemaId.replace('root_', '').split('_');\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"schema-field.js","sourceRoot":"","sources":["../../../../src/components/form/fields/schema-field.ts"],"names":[],"mappings":"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","sourcesContent":["import { LimeElementsAdapter } from '../adapters';\nimport JSONSchemaField from '@rjsf/core/lib/components/fields/SchemaField';\nimport React from 'react';\nimport { FieldProps } from './types';\nimport { isEmpty, capitalize } from 'lodash-es';\nimport { resetDependentFields } from './field-helpers';\nimport { FieldTemplate } from '../templates';\nimport { getHelpComponent } from '../help';\n\n/**\n * If given a value and schema, check if the value should be translated\n * from null to undefined to avoid issues with validation\n *\n * This function needs to be used for several reasons:\n * 1. CustomEvent does not allow `detail` to equal `undefined`, but we can call onChange with `undefined` in React\n * 2. `null` is treated as a valid value in a jsonschema and with marshmallow and it has its own type (null)\n * 3. Without changing `null` to `undefined` there would be no way to remove a field from\n * from the submitted form data once it had any data. (when POSTing, undefined is not posted since its not valid json)\n * 4. The only applies to custom web components since widgets handle transforming null/'' to undefined depending on the widget\n * and its purpose.\n *\n * Example:\n * If I have an object { name?: string, email?: string } that I am using a custom web component for `name`,\n * then initially, the formData will be {} which is fine because neither name or email are required. Then if i input a\n * value for name the formData will be { name: 'some_value' } which is also fine. But then if I want to remove name\n * from the form data I would delete all the text from the name input field. Web components would emit this empty value\n * as '' or null. If the web component tries to emit `undefined`, null would be emitted instead because CustomEvent has\n * a default `detail` value of null\n * @param {any} value the value associated with the schema\n * @param {any} schema the schema for the value\n * @returns {boolean} whether or not null should be changed to undefined\n */\nconst shouldChangeToUndefined = (value, schema): boolean => {\n return value === null && !schema.type.includes('null');\n};\n\nconst hasCustomComponent = (schema): boolean => {\n const name = schema.lime?.component?.name;\n if (!name) {\n return false;\n }\n\n try {\n verifyCustomComponentIsDefined(name);\n } catch {\n // eslint-disable-next-line no-console\n console.warn(`Custom component ${name} not defined`);\n\n return false;\n }\n\n return true;\n};\n\nconst verifyCustomComponentIsDefined = (elementName): void => {\n const supportsCustomElements = 'customElements' in window;\n\n if (!supportsCustomElements) {\n throw new Error(\n 'Custom form elements are not supported by this browser!',\n );\n }\n\n if (!customElements.get(elementName)) {\n throw new Error(`Custom form element '${elementName}' is not defined!`);\n }\n};\n\nconst getCustomComponent = (\n schema,\n): { name: string; props: { [key: string]: any } } => {\n const name = schema.lime?.component?.name;\n const props = schema.lime?.component?.props || {};\n\n return { name: name, props: props };\n};\n\n/**\n * Create properties from the factory that is set on `limel-form`\n * @param {*} formContext the form context\n * @param {*} schema the schema for the current field\n * @returns {object} the properties created by the factory\n */\nexport function getFactoryProps(\n formContext: any,\n schema: any,\n): Record<string, any> {\n const factory: (schema: any) => Record<string, any> =\n formContext.propsFactory;\n if (typeof factory !== 'function') {\n return {};\n }\n\n const props = factory(schema);\n if (!props) {\n return {};\n }\n\n return props;\n}\n\nexport class SchemaField extends React.Component<FieldProps> {\n state = {\n modified: false,\n };\n\n constructor(props) {\n super(props);\n this.handleChange = this.handleChange.bind(this);\n this.handleCustomComponentChange =\n this.handleCustomComponentChange.bind(this);\n }\n\n private hasValue() {\n const value = this.getValue();\n if (!value) {\n return false;\n }\n\n if (Array.isArray(value)) {\n return !!value.length;\n }\n\n if (typeof value === 'object') {\n return !isEmpty(value);\n }\n\n return true;\n }\n\n private getLabel() {\n const { schema } = this.props;\n\n return schema.title;\n }\n\n private isInvalid() {\n const { modified } = this.state;\n const { errorSchema } = this.props;\n\n return (\n (modified || this.hasValue() || !this.isRequired()) &&\n !isEmpty(errorSchema)\n );\n }\n\n private isRequired() {\n const { required, schema } = this.props;\n\n return required || schema.minItems > 0;\n }\n\n private getHelperText() {\n const { errorSchema, schema } = this.props;\n\n if (!this.isInvalid()) {\n const helperText = schema.lime?.component?.props?.helperText;\n\n return helperText || schema.description;\n }\n\n if (!isEmpty(errorSchema) && '__errors' in errorSchema) {\n return capitalize(errorSchema.__errors[0]); // eslint-disable-line no-underscore-dangle\n }\n\n return schema.description;\n }\n\n private getValue() {\n const { formData } = this.props;\n\n return formData;\n }\n\n private handleCustomComponentChange(event) {\n const { schema } = this.props;\n event.stopPropagation();\n\n let value = event.detail;\n\n if (shouldChangeToUndefined(value, schema)) {\n value = undefined;\n }\n\n this.handleChange(value);\n }\n\n private handleChange(data) {\n const { formData, schema } = this.props;\n const { rootSchema } = this.props.registry;\n\n this.setState({ modified: true });\n\n const newData = resetDependentFields(\n formData,\n data,\n schema,\n rootSchema,\n );\n\n this.props.onChange(newData);\n }\n\n private buildCustomComponentProps() {\n const {\n disabled,\n readonly,\n name,\n registry,\n schema,\n errorSchema,\n idSchema,\n } = this.props;\n const factoryProps = getFactoryProps(registry.formContext, schema);\n\n return {\n ...factoryProps,\n value: this.getValue(),\n required: this.isRequired(),\n readonly: readonly || schema.readOnly,\n disabled: disabled,\n invalid: this.isInvalid(),\n label: this.getLabel(),\n helperText: this.getHelperText(),\n formInfo: {\n schema: schema,\n rootSchema: registry.formContext.schema,\n errorSchema: errorSchema,\n rootValue: registry.formContext.rootValue,\n name: name,\n schemaPath: this.getSchemaPath(idSchema?.$id),\n },\n };\n }\n\n private renderCustomComponent(props: FieldProps) {\n const { name, props: userDefinedComponentProps } = getCustomComponent(\n props.schema,\n );\n\n verifyCustomComponentIsDefined(name);\n\n const component = React.createElement(LimeElementsAdapter, {\n name: name,\n elementProps: {\n ...userDefinedComponentProps,\n ...this.buildCustomComponentProps(),\n },\n events: {\n change: this.handleCustomComponentChange,\n },\n });\n\n return React.createElement(\n FieldTemplate,\n {\n ...this.props,\n classNames: 'form-group field field-custom',\n },\n component,\n getHelpComponent(props.schema),\n );\n }\n\n render() {\n if (hasCustomComponent(this.props.schema)) {\n return this.renderCustomComponent(this.props);\n }\n\n const fieldProps = {\n ...this.props,\n onChange: this.handleChange,\n };\n\n return React.createElement(JSONSchemaField, fieldProps);\n }\n\n /**\n * Gets the path to the current property within the schema\n * @param {string} schemaId the id of the schema\n * @returns {string[]} an array with the schema path for the current property\n * @example\n * const schemaId = 'root_sections_0_controls_0_name';\n * const schemaPath = getSchemaPath(schemaId);\n * // => ['sections', '0', 'controls', '0', 'name']\n */\n private getSchemaPath(schemaId: string): string[] {\n if (schemaId === undefined) {\n return undefined;\n }\n\n return schemaId.replace('root_', '').split('_');\n }\n}\n"]}
|
|
@@ -547,6 +547,14 @@ limel-code-editor {
|
|
|
547
547
|
position: relative;
|
|
548
548
|
}
|
|
549
549
|
|
|
550
|
+
.form-group {
|
|
551
|
+
position: relative;
|
|
552
|
+
}
|
|
553
|
+
.form-group limel-help {
|
|
554
|
+
position: absolute;
|
|
555
|
+
top: calc(var(--form-row-gap, 1rem) * -0.5);
|
|
556
|
+
left: calc(var(--form-column-gap, 1rem) * -0.5);
|
|
557
|
+
}
|
|
550
558
|
.form-group .mdc-typography--headline1,
|
|
551
559
|
.form-group .mdc-typography--body1 {
|
|
552
560
|
color: rgb(var(--contrast-1100));
|
|
@@ -715,12 +723,22 @@ limel-code-editor {
|
|
|
715
723
|
border-radius: 0 0 var(--limel-form-row-border-radius) var(--limel-form-row-border-radius);
|
|
716
724
|
}
|
|
717
725
|
.limel-form-row--layout .main-information {
|
|
726
|
+
position: relative;
|
|
718
727
|
display: flex;
|
|
719
728
|
flex-direction: row;
|
|
720
729
|
align-items: center;
|
|
721
730
|
gap: var(--limel-form-row-main-information-gap);
|
|
722
731
|
min-width: 0;
|
|
723
732
|
}
|
|
733
|
+
.limel-form-row--layout .main-information {
|
|
734
|
+
position: relative;
|
|
735
|
+
}
|
|
736
|
+
.limel-form-row--layout .main-information > .form-group.field {
|
|
737
|
+
position: unset;
|
|
738
|
+
}
|
|
739
|
+
.limel-form-row--layout .main-information > .form-group.field limel-help {
|
|
740
|
+
top: 0;
|
|
741
|
+
}
|
|
724
742
|
.limel-form-row--layout limel-icon {
|
|
725
743
|
color: rgb(var(--contrast-1200));
|
|
726
744
|
width: var(--limel-form-row-icon-size);
|
|
@@ -23,6 +23,7 @@ import { mapValues } from 'lodash-es';
|
|
|
23
23
|
* @exampleComponent limel-example-form-span-fields
|
|
24
24
|
* @exampleComponent limel-example-custom-error-message
|
|
25
25
|
* @exampleComponent limel-example-server-errors
|
|
26
|
+
* @exampleComponent limel-example-form-with-help
|
|
26
27
|
* @exampleComponent limel-example-form-row-layout
|
|
27
28
|
*/
|
|
28
29
|
export class Form {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"form.js","sourceRoot":"","sources":["../../../src/components/form/form.tsx"],"names":[],"mappings":"AAAA,OAAO,EACH,SAAS,EACT,OAAO,EACP,KAAK,EAEL,CAAC,EACD,IAAI,EACJ,KAAK,GACR,MAAM,eAAe,CAAC;AACvB,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,UAAU,EAAQ,MAAM,kBAAkB,CAAC;AACpD,OAAO,cAA4B,MAAM,YAAY,CAAC;AACtD,OAAO,cAAc,MAAM,kCAAkC,CAAC;AAE9D,OAAO,EACH,kBAAkB,EAClB,aAAa,EACb,mBAAmB,GACtB,MAAM,aAAa,CAAC;AACrB,OAAO,EAAE,WAAW,IAAI,iBAAiB,EAAE,MAAM,uBAAuB,CAAC;AACzE,OAAO,EAAE,UAAU,IAAI,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AACtE,OAAO,EAAE,WAAW,IAAI,iBAAiB,EAAE,MAAM,uBAAuB,CAAC;AACzE,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,kBAAkB,EAAE,MAAM,0BAA0B,CAAC;AAC9D,OAAO,GAAuB,MAAM,KAAK,CAAC;AAC1C,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzC,OAAO,EAAE,SAAS,EAAE,MAAM,WAAW,CAAC;AAEtC;;;;;;;;;;;;GAYG;AAMH,MAAM,OAAO,IAAI;EAoEb;IALQ,YAAO,GAAG,IAAI,CAAC;kBAvDnB,EAAE;;oBAYY,KAAK;;;;IAiDnB,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IACjD,IAAI,CAAC,sBAAsB,GAAG,IAAI,CAAC,sBAAsB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;GACxE;EAEM,iBAAiB;IACpB,IAAI,CAAC,UAAU,EAAE,CAAC;EACtB,CAAC;EAEM,iBAAiB;IACpB,IAAI,CAAC,WAAW,EAAE,CAAC;IACnB,IAAI,CAAC,eAAe,EAAE,CAAC;EAC3B,CAAC;EAEM,gBAAgB;IACnB,IAAI,CAAC,UAAU,EAAE,CAAC;EACtB,CAAC;EAEO,UAAU;IACd,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,OAAO,CAAC,EAAE;MAC9C,OAAO;KACV;IAED,IAAI,CAAC,WAAW,EAAE,CAAC;IACnB,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;IACrC,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;EAClC,CAAC;EAEM,kBAAkB;IACrB,IAAI,CAAC,WAAW,EAAE,CAAC;IACnB,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;EAClC,CAAC;EAEM,oBAAoB;IACvB,IAAI,IAAI,CAAC,IAAI,EAAE;MACX,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE,CAAC;MACpB,IAAI,CAAC,IAAI,GAAG,SAAS,CAAC;KACzB;EACL,CAAC;EAEM,MAAM;IACT,OAAO,WAAK,KAAK,EAAC,MAAM,GAAG,CAAC;EAChC,CAAC;EAEO,WAAW;IACf,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE;MACZ,MAAM,WAAW,GAAG,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;MAChE,IAAI,CAAC,IAAI,GAAG,UAAU,CAAC,WAAW,CAAC,CAAC;KACvC;IAED,IAAI,CAAC,IAAI,CAAC,MAAM,CACZ,KAAK,CAAC,aAAa,CACf,cAAc,EACd;MACI,MAAM,EAAE,IAAI,CAAC,cAAc;MAC3B,QAAQ,EAAE,IAAI,CAAC,KAAK;MACpB,QAAQ,EAAE,IAAI,CAAC,YAAY;MAC3B,OAAO,EAAE,OAAO;MAChB,YAAY,EAAE,IAAI;MAClB,aAAa,EAAE,KAAK;MACpB,WAAW,EAAE,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,MAAM,CAAC;MAC7C,aAAa,EAAE,aAAa;MAC5B,kBAAkB,EAAE,kBAAyB;MAC7C,mBAAmB,EAAE,mBAAmB;MACxC,QAAQ,EAAE,IAAI,CAAC,QAAQ;MACvB,eAAe,EAAE,IAAI,CAAC,sBAAsB;MAC5C,WAAW,EAAE;QACT,MAAM,EAAE,IAAI,CAAC,cAAc;QAC3B,SAAS,EAAE,IAAI,CAAC,KAAK;QACrB,YAAY,EAAE,IAAI,CAAC,YAAY;OAClC;MACD,MAAM,EAAE;QACJ,WAAW,EAAE,iBAAwB;QACrC,UAAU,EAAE,gBAAuB;QACnC,WAAW,EAAE,iBAAwB;OACxC;KACJ,EACD,EAAE,CACL,CACJ,CAAC;EACN,CAAC;EAEO,YAAY,CAAC,KAAU;IAC3B,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;EACrC,CAAC;EAEO,YAAY,CAAC,KAAa;IAC9B,MAAM,OAAO,GAAG,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,KAAK,IAAI,CAAC;IAC/C,MAAM,MAAM,GAAgB,IAAI,CAAC,mBAAmB,EAAE,CAAC;IACvD,MAAM,MAAM,GAAqB;MAC7B,KAAK,EAAE,OAAO;MACd,MAAM,EAAE,MAAM;KACjB,CAAC;IAEF,IAAI,IAAI,CAAC,OAAO,KAAK,MAAM,CAAC,KAAK,IAAI,CAAC,MAAM,CAAC,KAAK,EAAE;MAChD,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;KAC9B;IAED,IAAI,CAAC,OAAO,GAAG,MAAM,CAAC,KAAK,CAAC;EAChC,CAAC;EAGM,SAAS;IACZ,IAAI,CAAC,WAAW,EAAE,CAAC;IACnB,IAAI,CAAC,eAAe,EAAE,CAAC;EAC3B,CAAC;EAEO,WAAW;IACf,gGAAgG;IAChG,8DAA8D;IAC9D,iEAAiE;IACjE,MAAM,EAAE,GAAG,GAAG,IAAI,CAAC,MAAM,CAAC,GAAG,IAAI,kBAAkB,EAAE,EAAE,CAAC;IACxD,IAAI,CAAC,cAAc,mCACZ,IAAI,CAAC,MAAM,KACd,EAAE,EAAE,EAAE,EACN,GAAG,EAAE,EAAE,GACV,CAAC;EACN,CAAC;EAEO,eAAe;IACnB,MAAM,SAAS,GAAG,IAAI,GAAG,CAAC;MACtB,cAAc,EAAE,QAAQ;MACxB,SAAS,EAAE,IAAI;MACf,mBAAmB,EAAE,CAAC;KACzB,CAAC,CAAC,SAAS,CAAC,SAAS,EAAE,SAAS,CAAC,CAAC;IACnC,IAAI,CAAC,SAAS,GAAG,SAAS,CAAC,OAAO,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;EACpD,CAAC;EAEO,mBAAmB;IACvB,MAAM,MAAM,GAAG,IAAI,CAAC,SAAS,CAAC,MAAM,IAAI,EAAE,CAAC;IAE3C,OAAO,MAAM,CAAC,GAAG,CAAC,CAAC,KAAsB,EAAa,EAAE;MACpD,IAAI,QAAQ,GAAG,KAAK,CAAC,QAAQ,CAAC;MAC9B,IAAI,KAAK,CAAC,OAAO,KAAK,UAAU,EAAE;QAC9B,QAAQ,GAAI,KAAK,CAAC,MAAyB,CAAC,eAAe,CAAC;OAC/D;MAED,OAAO;QACH,IAAI,EAAE,KAAK,CAAC,OAAO;QACnB,QAAQ,EAAE,QAAQ;QAClB,OAAO,EAAE,KAAK,CAAC,OAAO;QACtB,UAAU,EAAE,KAAK,CAAC,UAAU;OAC/B,CAAC;IACN,CAAC,CAAC,CAAC;EACP,CAAC;EAEO,cAAc,CAAC,MAAuB;IAC1C,IAAI,CAAC,MAAM,EAAE;MACT,OAAO;KACV;IAED,OAAO,SAAS,CAAC,MAAM,EAAE,CAAC,KAAK,EAAE,EAAE;MAC/B,IAAI,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE;QACtB,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,CAAC;OAC9B;MAED,OAAO,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC;IACtC,CAAC,CAAC,CAAC;EACP,CAAC;EAEO,sBAAsB,CAAC,cAA0B;IACrD,IAAI,CAAC,IAAI,CAAC,eAAe,EAAE;MACvB,OAAO,cAAc,CAAC;KACzB;IAED,MAAM,MAAM,GAAgB,cAAc,CAAC,GAAG,CAAC,CAAC,KAAe,EAAE,EAAE;MAC/D,OAAO;QACH,IAAI,EAAE,KAAK,CAAC,IAAI;QAChB,MAAM,EAAE,KAAK,CAAC,MAAM;QACpB,QAAQ,EAAE,KAAK,CAAC,QAAQ;QACxB,OAAO,EAAE,KAAK,CAAC,OAAO;QACtB,6EAA6E;QAC7E,iEAAiE;QACjE,2DAA2D;QAC3D,UAAU,EAAE,KAAK,CAAC,YAAY,CAAC;OAClC,CAAC;IACN,CAAC,CAAC,CAAC;IAEH,uEAAuE;IACvE,sEAAsE;IACtE,8BAA8B;IAC9B,OAAO,IAAI,CAAC,eAAe;OACtB,IAAI,CAAC,EAAE,EAAE,MAAM,CAAC;OAChB,GAAG,CAAC,CAAC,gBAA2B,EAAE,EAAE;MACjC,MAAM,aAAa,GAAG,cAAc,CAAC,IAAI,CAAC,CAAC,KAAe,EAAE,EAAE;QAC1D,OAAO,gBAAgB,CAAC,QAAQ,KAAK,KAAK,CAAC,QAAQ,CAAC;MACxD,CAAC,CAAC,CAAC;MAEH,uCACO,aAAa,KAChB,OAAO,EAAE,gBAAgB,CAAC,OAAO,IACnC;IACN,CAAC,CAAC,CAAC;EACX,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACJ","sourcesContent":["import {\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Prop,\n Watch,\n} from '@stencil/core';\nimport React from 'react';\nimport { createRoot, Root } from 'react-dom/client';\nimport JSONSchemaForm, { AjvError } from '@rjsf/core';\nimport retargetEvents from 'react-shadow-dom-retarget-events';\nimport { FormError, ValidationError, ValidationStatus } from '../../interface';\nimport {\n ArrayFieldTemplate,\n FieldTemplate,\n ObjectFieldTemplate,\n} from './templates';\nimport { SchemaField as CustomSchemaField } from './fields/schema-field';\nimport { ArrayField as CustomArrayField } from './fields/array-field';\nimport { ObjectField as CustomObjectField } from './fields/object-field';\nimport { widgets } from './widgets';\nimport { createRandomString } from '../../util/random-string';\nimport Ajv, { RequiredParams } from 'ajv';\nimport { isInteger } from './validators';\nimport { mapValues } from 'lodash-es';\n\n/**\n * @exampleComponent limel-example-form\n * @exampleComponent limel-example-nested-form\n * @exampleComponent limel-example-list-form\n * @exampleComponent limel-example-dynamic-form\n * @exampleComponent limel-example-custom-component-form\n * @exampleComponent limel-example-props-factory-form\n * @exampleComponent limel-example-form-layout\n * @exampleComponent limel-example-form-span-fields\n * @exampleComponent limel-example-custom-error-message\n * @exampleComponent limel-example-server-errors\n * @exampleComponent limel-example-form-row-layout\n */\n@Component({\n tag: 'limel-form',\n shadow: true,\n styleUrl: 'form.scss',\n})\nexport class Form {\n /**\n * The schema used to render the form\n */\n @Prop()\n public schema: {\n id?: string;\n [key: string]: any;\n } = {};\n\n /**\n * Value of the form\n */\n @Prop()\n public value: object;\n\n /**\n * Set to `true` to disable the whole form.\n */\n @Prop()\n public disabled = false;\n\n /**\n * Factory for creating properties for custom form components\n *\n * When using custom components in the form some properties might have to be\n * set dynamically. If this factory is set, it will be called with the\n * current schema for the field for each custom component in the form. The\n * factory must return an object where each key is the name of the property\n * that should be set, along with its value.\n */\n @Prop()\n public propsFactory?: (schema: Record<string, any>) => Record<string, any>;\n\n /**\n * Custom function to customize the default error messages\n */\n @Prop()\n public transformErrors?: (errors: FormError[]) => FormError[];\n\n /**\n * Extra errors to display in the form. Typical use case is asynchronous\n * errors generated server side.\n */\n @Prop()\n public errors: ValidationError;\n\n /**\n * Emitted when a change is made within the form\n */\n @Event()\n public change: EventEmitter<object>;\n\n /**\n * Emitted when the validity of the form changes, or when\n * a change is made to an invalid form\n */\n @Event()\n public validate: EventEmitter<ValidationStatus>;\n\n @Element()\n private host: HTMLLimelFormElement;\n\n private isValid = true;\n private modifiedSchema: object;\n private validator: Ajv.ValidateFunction;\n private root: Root;\n\n public constructor() {\n this.handleChange = this.handleChange.bind(this);\n this.getCustomErrorMessages = this.getCustomErrorMessages.bind(this);\n }\n\n public connectedCallback() {\n this.initialize();\n }\n\n public componentWillLoad() {\n this.setSchemaId();\n this.createValidator();\n }\n\n public componentDidLoad() {\n this.initialize();\n }\n\n private initialize() {\n if (!this.host.shadowRoot.querySelector('.root')) {\n return;\n }\n\n this.reactRender();\n retargetEvents(this.host.shadowRoot);\n this.validateForm(this.value);\n }\n\n public componentDidUpdate() {\n this.reactRender();\n this.validateForm(this.value);\n }\n\n public disconnectedCallback() {\n if (this.root) {\n this.root.unmount();\n this.root = undefined;\n }\n }\n\n public render() {\n return <div class=\"root\" />;\n }\n\n private reactRender() {\n if (!this.root) {\n const rootElement = this.host.shadowRoot.querySelector('.root');\n this.root = createRoot(rootElement);\n }\n\n this.root.render(\n React.createElement(\n JSONSchemaForm,\n {\n schema: this.modifiedSchema,\n formData: this.value,\n onChange: this.handleChange,\n widgets: widgets,\n liveValidate: true,\n showErrorList: false,\n extraErrors: this.getExtraErrors(this.errors),\n FieldTemplate: FieldTemplate,\n ArrayFieldTemplate: ArrayFieldTemplate as any,\n ObjectFieldTemplate: ObjectFieldTemplate,\n disabled: this.disabled,\n transformErrors: this.getCustomErrorMessages,\n formContext: {\n schema: this.modifiedSchema,\n rootValue: this.value,\n propsFactory: this.propsFactory,\n },\n fields: {\n SchemaField: CustomSchemaField as any,\n ArrayField: CustomArrayField as any,\n ObjectField: CustomObjectField as any,\n },\n },\n [],\n ),\n );\n }\n\n private handleChange(event: any) {\n this.change.emit(event.formData);\n }\n\n private validateForm(value: object) {\n const isValid = this.validator(value) === true;\n const errors: FormError[] = this.getValidationErrors();\n const status: ValidationStatus = {\n valid: isValid,\n errors: errors,\n };\n\n if (this.isValid !== status.valid || !status.valid) {\n this.validate.emit(status);\n }\n\n this.isValid = status.valid;\n }\n\n @Watch('schema')\n public setSchema() {\n this.setSchemaId();\n this.createValidator();\n }\n\n private setSchemaId() {\n // Due to a bug in react-jsonschema-form, validation will stop working if the schema is updated.\n // A workaround at the moment is to always give it a unique ID\n // https://github.com/rjsf-team/react-jsonschema-form/issues/1563\n const id = `${this.schema.$id}-${createRandomString()}`;\n this.modifiedSchema = {\n ...this.schema,\n id: id,\n $id: id,\n };\n }\n\n private createValidator() {\n const validator = new Ajv({\n unknownFormats: 'ignore',\n allErrors: true,\n multipleOfPrecision: 2,\n }).addFormat('integer', isInteger);\n this.validator = validator.compile(this.schema);\n }\n\n private getValidationErrors(): FormError[] {\n const errors = this.validator.errors || [];\n\n return errors.map((error: Ajv.ErrorObject): FormError => {\n let property = error.dataPath;\n if (error.keyword === 'required') {\n property = (error.params as RequiredParams).missingProperty;\n }\n\n return {\n name: error.keyword,\n property: property,\n message: error.message,\n schemaPath: error.schemaPath,\n };\n });\n }\n\n private getExtraErrors(errors: ValidationError): ExtraError | undefined {\n if (!errors) {\n return;\n }\n\n return mapValues(errors, (error) => {\n if (Array.isArray(error)) {\n return { __errors: error };\n }\n\n return this.getExtraErrors(error);\n });\n }\n\n private getCustomErrorMessages(originalErrors: AjvError[]): AjvError[] {\n if (!this.transformErrors) {\n return originalErrors;\n }\n\n const errors: FormError[] = originalErrors.map((error: AjvError) => {\n return {\n name: error.name,\n params: error.params,\n property: error.property,\n message: error.message,\n // For some reason 'schemaPath' is missing from the AjvError type definition:\n // https://github.com/rjsf-team/react-jsonschema-form/issues/2140\n // eslint-disable-next-line @typescript-eslint/dot-notation\n schemaPath: error['schemaPath'],\n };\n });\n\n // Use `.call({}, …)` here to bind `this` to an empty object to prevent\n // the consumer submitted `transformErrors` from getting access to our\n // component's internals. /Ads\n return this.transformErrors\n .call({}, errors)\n .map((transformedError: FormError) => {\n const originalError = originalErrors.find((error: AjvError) => {\n return transformedError.property === error.property;\n });\n\n return {\n ...originalError,\n message: transformedError.message,\n };\n });\n }\n}\n\ninterface ExtraError {\n [key: string]:\n | ExtraError\n | {\n __errors: string[];\n };\n}\n"]}
|
|
1
|
+
{"version":3,"file":"form.js","sourceRoot":"","sources":["../../../src/components/form/form.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Prop,\n Watch,\n} from '@stencil/core';\nimport React from 'react';\nimport { createRoot, Root } from 'react-dom/client';\nimport JSONSchemaForm, { AjvError } from '@rjsf/core';\nimport retargetEvents from 'react-shadow-dom-retarget-events';\nimport { FormError, ValidationError, ValidationStatus } from '../../interface';\nimport {\n ArrayFieldTemplate,\n FieldTemplate,\n ObjectFieldTemplate,\n} from './templates';\nimport { SchemaField as CustomSchemaField } from './fields/schema-field';\nimport { ArrayField as CustomArrayField } from './fields/array-field';\nimport { ObjectField as CustomObjectField } from './fields/object-field';\nimport { widgets } from './widgets';\nimport { createRandomString } from '../../util/random-string';\nimport Ajv, { RequiredParams } from 'ajv';\nimport { isInteger } from './validators';\nimport { mapValues } from 'lodash-es';\n\n/**\n * @exampleComponent limel-example-form\n * @exampleComponent limel-example-nested-form\n * @exampleComponent limel-example-list-form\n * @exampleComponent limel-example-dynamic-form\n * @exampleComponent limel-example-custom-component-form\n * @exampleComponent limel-example-props-factory-form\n * @exampleComponent limel-example-form-layout\n * @exampleComponent limel-example-form-span-fields\n * @exampleComponent limel-example-custom-error-message\n * @exampleComponent limel-example-server-errors\n * @exampleComponent limel-example-form-with-help\n * @exampleComponent limel-example-form-row-layout\n */\n@Component({\n tag: 'limel-form',\n shadow: true,\n styleUrl: 'form.scss',\n})\nexport class Form {\n /**\n * The schema used to render the form\n */\n @Prop()\n public schema: {\n id?: string;\n [key: string]: any;\n } = {};\n\n /**\n * Value of the form\n */\n @Prop()\n public value: object;\n\n /**\n * Set to `true` to disable the whole form.\n */\n @Prop()\n public disabled = false;\n\n /**\n * Factory for creating properties for custom form components\n *\n * When using custom components in the form some properties might have to be\n * set dynamically. If this factory is set, it will be called with the\n * current schema for the field for each custom component in the form. The\n * factory must return an object where each key is the name of the property\n * that should be set, along with its value.\n */\n @Prop()\n public propsFactory?: (schema: Record<string, any>) => Record<string, any>;\n\n /**\n * Custom function to customize the default error messages\n */\n @Prop()\n public transformErrors?: (errors: FormError[]) => FormError[];\n\n /**\n * Extra errors to display in the form. Typical use case is asynchronous\n * errors generated server side.\n */\n @Prop()\n public errors: ValidationError;\n\n /**\n * Emitted when a change is made within the form\n */\n @Event()\n public change: EventEmitter<object>;\n\n /**\n * Emitted when the validity of the form changes, or when\n * a change is made to an invalid form\n */\n @Event()\n public validate: EventEmitter<ValidationStatus>;\n\n @Element()\n private host: HTMLLimelFormElement;\n\n private isValid = true;\n private modifiedSchema: object;\n private validator: Ajv.ValidateFunction;\n private root: Root;\n\n public constructor() {\n this.handleChange = this.handleChange.bind(this);\n this.getCustomErrorMessages = this.getCustomErrorMessages.bind(this);\n }\n\n public connectedCallback() {\n this.initialize();\n }\n\n public componentWillLoad() {\n this.setSchemaId();\n this.createValidator();\n }\n\n public componentDidLoad() {\n this.initialize();\n }\n\n private initialize() {\n if (!this.host.shadowRoot.querySelector('.root')) {\n return;\n }\n\n this.reactRender();\n retargetEvents(this.host.shadowRoot);\n this.validateForm(this.value);\n }\n\n public componentDidUpdate() {\n this.reactRender();\n this.validateForm(this.value);\n }\n\n public disconnectedCallback() {\n if (this.root) {\n this.root.unmount();\n this.root = undefined;\n }\n }\n\n public render() {\n return <div class=\"root\" />;\n }\n\n private reactRender() {\n if (!this.root) {\n const rootElement = this.host.shadowRoot.querySelector('.root');\n this.root = createRoot(rootElement);\n }\n\n this.root.render(\n React.createElement(\n JSONSchemaForm,\n {\n schema: this.modifiedSchema,\n formData: this.value,\n onChange: this.handleChange,\n widgets: widgets,\n liveValidate: true,\n showErrorList: false,\n extraErrors: this.getExtraErrors(this.errors),\n FieldTemplate: FieldTemplate,\n ArrayFieldTemplate: ArrayFieldTemplate as any,\n ObjectFieldTemplate: ObjectFieldTemplate,\n disabled: this.disabled,\n transformErrors: this.getCustomErrorMessages,\n formContext: {\n schema: this.modifiedSchema,\n rootValue: this.value,\n propsFactory: this.propsFactory,\n },\n fields: {\n SchemaField: CustomSchemaField as any,\n ArrayField: CustomArrayField as any,\n ObjectField: CustomObjectField as any,\n },\n },\n [],\n ),\n );\n }\n\n private handleChange(event: any) {\n this.change.emit(event.formData);\n }\n\n private validateForm(value: object) {\n const isValid = this.validator(value) === true;\n const errors: FormError[] = this.getValidationErrors();\n const status: ValidationStatus = {\n valid: isValid,\n errors: errors,\n };\n\n if (this.isValid !== status.valid || !status.valid) {\n this.validate.emit(status);\n }\n\n this.isValid = status.valid;\n }\n\n @Watch('schema')\n public setSchema() {\n this.setSchemaId();\n this.createValidator();\n }\n\n private setSchemaId() {\n // Due to a bug in react-jsonschema-form, validation will stop working if the schema is updated.\n // A workaround at the moment is to always give it a unique ID\n // https://github.com/rjsf-team/react-jsonschema-form/issues/1563\n const id = `${this.schema.$id}-${createRandomString()}`;\n this.modifiedSchema = {\n ...this.schema,\n id: id,\n $id: id,\n };\n }\n\n private createValidator() {\n const validator = new Ajv({\n unknownFormats: 'ignore',\n allErrors: true,\n multipleOfPrecision: 2,\n }).addFormat('integer', isInteger);\n this.validator = validator.compile(this.schema);\n }\n\n private getValidationErrors(): FormError[] {\n const errors = this.validator.errors || [];\n\n return errors.map((error: Ajv.ErrorObject): FormError => {\n let property = error.dataPath;\n if (error.keyword === 'required') {\n property = (error.params as RequiredParams).missingProperty;\n }\n\n return {\n name: error.keyword,\n property: property,\n message: error.message,\n schemaPath: error.schemaPath,\n };\n });\n }\n\n private getExtraErrors(errors: ValidationError): ExtraError | undefined {\n if (!errors) {\n return;\n }\n\n return mapValues(errors, (error) => {\n if (Array.isArray(error)) {\n return { __errors: error };\n }\n\n return this.getExtraErrors(error);\n });\n }\n\n private getCustomErrorMessages(originalErrors: AjvError[]): AjvError[] {\n if (!this.transformErrors) {\n return originalErrors;\n }\n\n const errors: FormError[] = originalErrors.map((error: AjvError) => {\n return {\n name: error.name,\n params: error.params,\n property: error.property,\n message: error.message,\n // For some reason 'schemaPath' is missing from the AjvError type definition:\n // https://github.com/rjsf-team/react-jsonschema-form/issues/2140\n // eslint-disable-next-line @typescript-eslint/dot-notation\n schemaPath: error['schemaPath'],\n };\n });\n\n // Use `.call({}, …)` here to bind `this` to an empty object to prevent\n // the consumer submitted `transformErrors` from getting access to our\n // component's internals. /Ads\n return this.transformErrors\n .call({}, errors)\n .map((transformedError: FormError) => {\n const originalError = originalErrors.find((error: AjvError) => {\n return transformedError.property === error.property;\n });\n\n return {\n ...originalError,\n message: transformedError.message,\n };\n });\n }\n}\n\ninterface ExtraError {\n [key: string]:\n | ExtraError\n | {\n __errors: string[];\n };\n}\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"form.types.js","sourceRoot":"","sources":["../../../src/components/form/form.types.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"form.types.js","sourceRoot":"","sources":["../../../src/components/form/form.types.ts"],"names":[],"mappings":"AAyOA,MAAM,CAAN,IAAY,cAmBX;AAnBD,WAAY,cAAc;EACtB;;KAEG;EACH,qCAAmB,CAAA;EAEnB;;KAEG;EACH,+BAAa,CAAA;EAEb;;;;;;KAMG;EACH,6BAAW,CAAA;AACf,CAAC,EAnBW,cAAc,KAAd,cAAc,QAmBzB","sourcesContent":["import { Components } from '@limetech/lime-elements';\nimport { EventEmitter } from '@stencil/core';\n\nexport interface ValidationStatus {\n /**\n * True if the form is valid, false otherwise\n *\n * If the form is invalid, any errors can be found on the `errors` property\n */\n valid: boolean;\n\n /**\n * List of validation errors\n */\n errors?: FormError[];\n}\n\nexport interface FormError {\n /**\n * Name of the error\n */\n name: string;\n\n /**\n * Params of the error\n */\n params?: unknown;\n\n /**\n * Name of the invalid property\n */\n property: string;\n\n /**\n * Path to the property within the schema\n */\n schemaPath: string;\n\n /**\n * String describing the error\n */\n message: string;\n}\n\nexport type ValidationError = {\n /**\n * Name of the field the error belongs to\n */\n [key: string]: string[] | ValidationError;\n};\n\nexport interface FormComponent<T = any> {\n /**\n * The value of the current property\n */\n value: T;\n\n /**\n * Whether or not the current property is required\n */\n required?: boolean;\n\n /**\n * Whether or not the current property is readonly\n */\n readonly?: boolean;\n\n /**\n * Whether or not the current property is disabled\n */\n disabled?: boolean;\n\n /**\n * The label of the current property\n */\n label?: string;\n\n /**\n * The helper text for the current property\n */\n helperText?: string;\n\n /**\n * Additional contextual information about the form\n */\n formInfo?: FormInfo;\n\n /**\n * The event to emit when the value of the current property has changed\n */\n change: EventEmitter<T>;\n}\n\nexport interface FormInfo {\n /**\n * The schema of the current property\n */\n schema?: object;\n\n /**\n * The schema of the whole form\n */\n rootSchema?: object;\n\n /**\n * A tree of errors for this property and its children\n */\n errorSchema?: object;\n\n /**\n * The value of the whole form\n */\n rootValue?: any;\n\n /**\n * The name of the current property\n */\n name?: string;\n\n /**\n * Path to the property within the schema\n */\n schemaPath?: string[];\n}\n\n/**\n * Lime elements specific options that can be specified under the `lime` key in\n * a schema, e.g.\n *\n * ```ts\n * const schema = {\n * type: 'object',\n * lime: {\n * collapsible: true,\n * },\n * };\n * ```\n */\nexport interface LimeSchemaOptions {\n /**\n * When specified on an object it will render all sub components inside a\n * collapsible section\n */\n collapsible?: boolean;\n\n /**\n * When `collapsible` is `true`, set this to `false` to make the\n * collapsible section load in the open state.\n * Defaults to `true`.\n */\n collapsed?: boolean;\n\n /**\n * Will render the field using the specified component. The component\n * should implement the `FormComponent` interface\n */\n component?: FormComponentOptions;\n\n /**\n * When specified on an object it will render the sub components with the\n * specified layout\n */\n layout?: FormLayoutOptions<any>;\n\n /**\n * Mark the field as disabled\n */\n disabled?: boolean;\n\n help?: string | Components.LimelHelp;\n}\n\n/**\n * Options for a component to be rendered inside a form\n */\nexport interface FormComponentOptions {\n /**\n * Name of the component\n */\n name?: string;\n\n /**\n * Extra properties to give the component in addition to the properties\n * specified on the `FormComponent` interface\n */\n props?: Record<string, any>;\n}\n\nexport interface FormLayoutOptions<T = FormLayoutType.Default> {\n /**\n * The type of layout to use\n */\n type: T;\n}\n\nexport interface GridLayoutOptions\n extends FormLayoutOptions<FormLayoutType.Grid> {\n /**\n * When specified on a component within the grid, the component will take\n * up the the specified number of columns in the form\n */\n // eslint-disable-next-line no-magic-numbers\n colSpan?: 1 | 2 | 3 | 4 | 5 | 'all';\n\n /**\n * When specified on a component within the grid, the component will take\n * up the the specified number of rows in the form\n */\n rowSpan?: number;\n\n /**\n * Number of columns to use in the layout\n */\n // eslint-disable-next-line no-magic-numbers\n columns?: 1 | 2 | 3 | 4 | 5;\n\n /**\n * Attempts to fill in holes earlier in the grid, if smaller items come up\n * later. This may cause items to appear out-of-order, when doing so would\n * fill holes left by larger items. Defaults to `true`.\n */\n dense?: boolean;\n}\n\nexport interface RowLayoutOptions\n extends FormLayoutOptions<FormLayoutType.Row> {\n /**\n * When specified on a field, the chosen icon will be displayed\n * on the left side of the row, beside the title.\n */\n icon?: string;\n}\n\nexport enum FormLayoutType {\n /**\n * The default layout\n */\n Default = 'default',\n\n /**\n * Render the form fields using a responsive grid layout\n */\n Grid = 'grid',\n\n /**\n * Render the form fields in full-width rows.\n * Each row can have a leading `icon`, and a field.\n * `title` and `description` provided by the schema will be placed\n * on the row itself, and not on the field.\n * This layout is good for creating UIs for user settings pages.\n */\n Row = 'row',\n}\n"]}
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { LimeElementsAdapter } from '../adapters/base-adapter';
|
|
3
|
+
export function getHelpComponent(schema) {
|
|
4
|
+
var _a;
|
|
5
|
+
const help = (_a = schema.lime) === null || _a === void 0 ? void 0 : _a.help;
|
|
6
|
+
if (!help) {
|
|
7
|
+
return;
|
|
8
|
+
}
|
|
9
|
+
if (typeof help === 'string') {
|
|
10
|
+
return React.createElement('limel-help', { value: help });
|
|
11
|
+
}
|
|
12
|
+
const helpProps = help;
|
|
13
|
+
return React.createElement(LimeElementsAdapter, {
|
|
14
|
+
name: 'limel-help',
|
|
15
|
+
elementProps: helpProps,
|
|
16
|
+
});
|
|
17
|
+
}
|
|
18
|
+
//# sourceMappingURL=help.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"help.js","sourceRoot":"","sources":["../../../../src/components/form/help/help.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAC;AAG/D,MAAM,UAAU,gBAAgB,CAAC,MAAsB;;EACnD,MAAM,IAAI,GAAG,MAAA,MAAM,CAAC,IAAI,0CAAE,IAAI,CAAC;EAE/B,IAAI,CAAC,IAAI,EAAE;IACP,OAAO;GACV;EAED,IAAI,OAAO,IAAI,KAAK,QAAQ,EAAE;IAC1B,OAAO,KAAK,CAAC,aAAa,CAAC,YAAY,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,CAAC,CAAC;GAC7D;EAED,MAAM,SAAS,GAAG,IAAI,CAAC;EAEvB,OAAO,KAAK,CAAC,aAAa,CAAC,mBAAmB,EAAE;IAC5C,IAAI,EAAE,YAAY;IAClB,YAAY,EAAE,SAAS;GAC1B,CAAC,CAAC;AACP,CAAC","sourcesContent":["import React from 'react';\nimport { LimeElementsAdapter } from '../adapters/base-adapter';\nimport { LimeJSONSchema } from '../internal.types';\n\nexport function getHelpComponent(schema: LimeJSONSchema) {\n const help = schema.lime?.help;\n\n if (!help) {\n return;\n }\n\n if (typeof help === 'string') {\n return React.createElement('limel-help', { value: help });\n }\n\n const helpProps = help;\n\n return React.createElement(LimeElementsAdapter, {\n name: 'limel-help',\n elementProps: helpProps,\n });\n}\n"]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/form/help/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAC","sourcesContent":["export * from './help';\n"]}
|
|
@@ -52,6 +52,7 @@ export class Menu {
|
|
|
52
52
|
this.handleBreadcrumbsSelect = (event) => {
|
|
53
53
|
if (!event.detail.menuItem) {
|
|
54
54
|
this.currentSubMenu = null;
|
|
55
|
+
this.clearSearch();
|
|
55
56
|
this.navigateMenu.emit(null);
|
|
56
57
|
this.setFocus();
|
|
57
58
|
return;
|
|
@@ -193,6 +194,7 @@ export class Menu {
|
|
|
193
194
|
// If only one step down, go to the root of the menu.
|
|
194
195
|
// No need to load a sub-menu.
|
|
195
196
|
this.currentSubMenu = null;
|
|
197
|
+
this.clearSearch();
|
|
196
198
|
this.navigateMenu.emit(null);
|
|
197
199
|
this.setFocus();
|
|
198
200
|
return;
|
|
@@ -243,6 +245,7 @@ export class Menu {
|
|
|
243
245
|
this.loadingSubItems = false;
|
|
244
246
|
if (subItems === null || subItems === void 0 ? void 0 : subItems.length) {
|
|
245
247
|
this.currentSubMenu = menuItem;
|
|
248
|
+
this.clearSearch();
|
|
246
249
|
this.navigateMenu.emit(menuItem);
|
|
247
250
|
this.setFocus();
|
|
248
251
|
return;
|
|
@@ -354,10 +357,6 @@ export class Menu {
|
|
|
354
357
|
}
|
|
355
358
|
}
|
|
356
359
|
currentSubMenuWatcher() {
|
|
357
|
-
if (this.searchValue) {
|
|
358
|
-
this.menuBreadCrumb = [];
|
|
359
|
-
return;
|
|
360
|
-
}
|
|
361
360
|
const breadCrumbItems = [];
|
|
362
361
|
let currentItem = this.currentSubMenu;
|
|
363
362
|
while (currentItem) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"menu.js","sourceRoot":"","sources":["../../../src/components/menu/menu.tsx"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable sonarjs/no-duplicate-string */\nimport {\n Component,\n Event,\n EventEmitter,\n h,\n Prop,\n Element,\n Watch,\n State,\n} from '@stencil/core';\nimport { createRandomString } from '../../util/random-string';\nimport { zipObject, isFunction } from 'lodash-es';\nimport {\n LimelBreadcrumbsCustomEvent,\n LimelInputFieldCustomEvent,\n} from '@limetech/lime-elements';\n\nimport { BreadcrumbsItem } from '../breadcrumbs/breadcrumbs.types';\nimport { ListSeparator } from '../list/list-item.types';\nimport {\n OpenDirection,\n MenuItem,\n MenuLoader,\n SurfaceWidth,\n MenuSearcher,\n} from './menu.types';\n\nimport {\n ARROW_DOWN,\n ARROW_DOWN_KEY_CODE,\n ARROW_LEFT,\n ARROW_LEFT_KEY_CODE,\n ARROW_RIGHT,\n ARROW_RIGHT_KEY_CODE,\n ARROW_UP,\n ARROW_UP_KEY_CODE,\n TAB,\n TAB_KEY_CODE,\n} from '../../util/keycodes';\nimport AwesomeDebouncePromise from 'awesome-debounce-promise';\n\ninterface MenuCrumbItem extends BreadcrumbsItem {\n menuItem: MenuItem;\n}\n\nconst SEARCH_DEBOUNCE = 500;\n\n/**\n * @slot trigger - Element to use as a trigger for the menu.\n * @exampleComponent limel-example-menu-basic\n * @exampleComponent limel-example-menu-disabled\n * @exampleComponent limel-example-menu-open-direction\n * @exampleComponent limel-example-menu-surface-width\n * @exampleComponent limel-example-menu-separators\n * @exampleComponent limel-example-menu-icons\n * @exampleComponent limel-example-menu-badge-icons\n * @exampleComponent limel-example-menu-grid\n * @exampleComponent limel-example-menu-hotkeys\n * @exampleComponent limel-example-menu-secondary-text\n * @exampleComponent limel-example-menu-notification\n * @exampleComponent limel-example-menu-sub-menus\n * @exampleComponent limel-example-menu-sub-menu-lazy-loading\n * @exampleComponent limel-example-menu-sub-menu-lazy-loading-infinite\n * @exampleComponent limel-example-menu-searchable\n * @exampleComponent limel-example-menu-composite\n */\n@Component({\n tag: 'limel-menu',\n shadow: true,\n styleUrl: 'menu.scss',\n})\nexport class Menu {\n /**\n * A list of items and separators to show in the menu.\n */\n @Prop()\n public items: Array<MenuItem | ListSeparator> = [];\n\n /**\n * Sets the disabled state of the menu.\n */\n @Prop({ reflect: true })\n public disabled = false;\n\n /**\n * Decides the menu's location in relation to its trigger\n */\n @Prop({ reflect: true })\n public openDirection: OpenDirection = 'bottom-start';\n\n /**\n * Decides the width of menu's dropdown\n */\n @Prop({ reflect: true })\n public surfaceWidth: SurfaceWidth = 'inherit-from-items';\n\n /**\n * Sets the open state of the menu.\n */\n @Prop({ mutable: true, reflect: true })\n public open = false;\n\n /**\n * Defines whether the menu should show badges.\n */\n @Prop({ reflect: true })\n public badgeIcons = false;\n\n /**\n * Renders list items in a grid layout, rather than a vertical list\n */\n @Prop({ reflect: true })\n public gridLayout = false;\n\n /**\n * :::warning Internal Use Only\n * This property is for internal use only. We need it for now, but want to\n * find a better implementation of the functionality it currently enables.\n * If and when we do so, this property will be removed without prior\n * notice. If you use it, your code _will_ break in the future.\n * :::\n * @internal\n */\n @Prop({ reflect: true })\n public loading = false;\n\n /**\n * :::warning Internal Use Only\n * This property is for internal use only. We need it for now, but want to\n * find a better implementation of the functionality it currently enables.\n * If and when we do so, this property will be removed without prior\n * notice. If you use it, your code _will_ break in the future.\n * :::\n * @internal\n */\n @Prop({ mutable: true })\n public currentSubMenu: MenuItem;\n\n /**\n * Is emitted when the menu is cancelled.\n */\n @Event()\n public cancel: EventEmitter<void>;\n\n /**\n * Is emitted when a menu item is selected.\n */\n @Event()\n public select: EventEmitter<MenuItem>;\n\n /**\n * A search function that takes a search-string as an argument,\n * and returns a promise that will eventually be resolved with\n * an array of `MenuItem`:s.\n *\n * See the docs for the type `MenuSearcher` for type information on\n * the searcher function itself.\n */\n @Prop()\n public searcher: MenuSearcher;\n\n /**\n * Message to display when search returns 0 results.\n */\n @Prop()\n public emptyResultMessage?: string;\n\n /**\n * Is emitted when a menu item with a sub-menu is selected.\n */\n @Event()\n public navigateMenu: EventEmitter<MenuItem>;\n\n @Element()\n private host: HTMLLimelMenuElement;\n\n @State()\n private loadingSubItems: boolean;\n\n @State()\n private menuBreadCrumb: MenuCrumbItem[] = [];\n\n @State()\n private searchValue: string;\n\n @State()\n private searchResults: Array<MenuItem | ListSeparator>;\n\n private list: HTMLLimelMenuListElement;\n private searchInput: HTMLLimelInputFieldElement;\n private portalId: string;\n private triggerElement: HTMLSlotElement;\n private debouncedSearch: MenuSearcher;\n\n constructor() {\n this.createDebouncedSearcher = this.createDebouncedSearcher.bind(this);\n this.portalId = createRandomString();\n }\n\n public componentDidLoad() {\n this.createDebouncedSearcher(this.searcher);\n }\n\n public componentDidRender() {\n const slotElement = this.host.shadowRoot.querySelector('slot');\n slotElement.assignedElements().forEach(this.setTriggerAttributes);\n }\n\n public render() {\n const cssProperties = this.getCssProperties();\n\n const dropdownZIndex = getComputedStyle(this.host).getPropertyValue(\n '--dropdown-z-index',\n );\n\n const menuSurfaceWidth = this.getMenuSurfaceWidth(\n cssProperties['--menu-surface-width'],\n );\n\n return (\n <div class=\"mdc-menu-surface--anchor\" onClick={this.onTriggerClick}>\n <slot ref={this.setTriggerRef} name=\"trigger\" />\n {this.renderNotificationBadge()}\n <limel-portal\n visible={this.open}\n containerId={this.portalId}\n openDirection={this.openDirection}\n position=\"absolute\"\n containerStyle={{ 'z-index': dropdownZIndex }}\n >\n <limel-menu-surface\n open={this.open}\n onDismiss={this.onClose}\n style={{\n ...cssProperties,\n '--mdc-menu-min-width': menuSurfaceWidth,\n '--limel-menu-surface-display': 'flex',\n '--limel-menu-surface-flex-direction': 'column',\n }}\n class={{\n 'has-grid-layout': this.gridLayout,\n }}\n >\n {this.renderSearchField()}\n {this.renderBreadcrumb()}\n {this.renderLoader()}\n {this.renderEmptyMessage()}\n {this.renderMenuList()}\n </limel-menu-surface>\n </limel-portal>\n </div>\n );\n }\n\n @Watch('items')\n protected itemsWatcher() {\n this.clearSearch();\n this.setFocus();\n }\n\n @Watch('open')\n protected openWatcher(newValue: boolean) {\n if (newValue) {\n this.setFocus();\n } else {\n this.clearSearch();\n }\n }\n\n @Watch('currentSubMenu')\n protected currentSubMenuWatcher() {\n if (this.searchValue) {\n this.menuBreadCrumb = [];\n\n return;\n }\n\n const breadCrumbItems: MenuCrumbItem[] = [];\n let currentItem = this.currentSubMenu;\n while (currentItem) {\n breadCrumbItems.push({\n text: currentItem.text,\n icon: currentItem.icon,\n menuItem: currentItem,\n });\n currentItem = currentItem.parentItem;\n }\n\n if (breadCrumbItems.length) {\n breadCrumbItems.push({\n text: '',\n icon: {\n name: 'home',\n },\n type: 'icon-only',\n } as MenuCrumbItem);\n }\n\n this.menuBreadCrumb = breadCrumbItems.reverse();\n }\n\n @Watch('searcher')\n protected createDebouncedSearcher(newValue: MenuSearcher) {\n if (typeof newValue !== 'function') {\n return;\n }\n\n this.debouncedSearch = AwesomeDebouncePromise(\n newValue,\n SEARCH_DEBOUNCE,\n );\n }\n\n private renderLoader = () => {\n if (!this.loadingSubItems && !this.loading) {\n return;\n }\n\n const cssProperties = this.getCssProperties();\n\n return (\n <div\n style={{\n width: cssProperties['--menu-surface-width'],\n display: 'flex',\n 'align-items': 'center',\n 'justify-content': 'center',\n padding: '0.5rem 0',\n }}\n >\n <limel-spinner size=\"mini\" limeBranded={false} />\n </div>\n );\n };\n\n private renderBreadcrumb = () => {\n if (!this.menuBreadCrumb?.length) {\n return;\n }\n\n return (\n <limel-breadcrumbs\n style={{\n 'border-bottom': 'solid 1px rgb(var(--contrast-500))',\n 'flex-shrink': '0',\n }}\n onSelect={this.handleBreadcrumbsSelect}\n items={this.menuBreadCrumb}\n />\n );\n };\n\n private handleBreadcrumbsSelect = (\n event: LimelBreadcrumbsCustomEvent<MenuCrumbItem>,\n ) => {\n if (!event.detail.menuItem) {\n this.currentSubMenu = null;\n this.navigateMenu.emit(null);\n\n this.setFocus();\n\n return;\n }\n\n this.handleSelect(event.detail.menuItem);\n };\n\n private renderSearchField = () => {\n if (!this.searcher) {\n return;\n }\n\n return (\n <limel-input-field\n tabindex=\"0\"\n ref={this.setSearchElement}\n type=\"search\"\n leadingIcon=\"search\"\n style={{\n padding: '0.25rem',\n 'box-sizing': 'border-box',\n }}\n value={this.searchValue}\n onChange={this.handleTextInput}\n onKeyDown={this.handleInputKeyDown}\n />\n );\n };\n\n private renderEmptyMessage = () => {\n if (\n this.loading ||\n this.loadingSubItems ||\n !this.emptyResultMessage ||\n !Array.isArray(this.searchResults) ||\n this.searchResults?.length\n ) {\n return null;\n }\n\n return (\n <p\n style={{\n padding: '0 1rem',\n 'text-align': 'center',\n }}\n >\n {this.emptyResultMessage}\n </p>\n );\n };\n\n private renderMenuList = () => {\n let items = this.visibleItems;\n\n if (this.searchResults?.length) {\n items = this.searchResults;\n }\n\n if (this.loadingSubItems || this.loading) {\n items = [];\n }\n\n return (\n <limel-menu-list\n style={{\n 'overflow-y': 'auto',\n 'flex-grow': '1',\n }}\n class={{\n 'has-grid-layout has-interactive-items': this.gridLayout,\n }}\n items={items}\n type=\"menu\"\n badgeIcons={this.badgeIcons}\n onSelect={this.onSelect}\n ref={this.setListElement}\n onKeyDown={this.handleMenuKeyDown}\n />\n );\n };\n\n private handleTextInput = async (\n event: LimelInputFieldCustomEvent<string>,\n ) => {\n event.stopPropagation();\n\n const query = event.detail;\n this.searchValue = query;\n if (query === '') {\n this.searchResults = null;\n\n return;\n }\n\n this.loadingSubItems = true;\n\n const result = await this.debouncedSearch(query);\n\n this.searchResults = result;\n this.loadingSubItems = false;\n };\n\n // Key handler for the input search field\n // Will change focus to the first/last item in the dropdown\n // list to enable selection with the keyboard\n private handleInputKeyDown = (event: KeyboardEvent) => {\n const isForwardTab =\n (event.key === TAB || event.keyCode === TAB_KEY_CODE) &&\n !event.altKey &&\n !event.metaKey &&\n !event.shiftKey;\n const isUp =\n event.key === ARROW_UP || event.keyCode === ARROW_UP_KEY_CODE;\n const isDown =\n event.key === ARROW_DOWN || event.keyCode === ARROW_DOWN_KEY_CODE;\n\n if (!isForwardTab && !isUp && !isDown) {\n return;\n }\n\n if (!this.list) {\n return;\n }\n\n event.stopPropagation();\n event.preventDefault();\n\n if (isForwardTab || isDown) {\n const listElement: HTMLElement = this.list.shadowRoot.querySelector(\n '.mdc-deprecated-list-item:first-child',\n );\n listElement.focus();\n\n return;\n }\n\n if (isUp) {\n const listElement: HTMLElement = this.list.shadowRoot.querySelector(\n '.mdc-deprecated-list-item:last-child',\n );\n listElement.focus();\n }\n };\n\n // Key handler for the menu list\n // Will change focus to the search field if using shift+tab\n // And can go forward/back with righ/left arrow keys\n private handleMenuKeyDown = (event: KeyboardEvent) => {\n const isBackwardTab =\n (event.key === TAB || event.keyCode === TAB_KEY_CODE) &&\n !event.altKey &&\n !event.metaKey &&\n event.shiftKey;\n\n const isLeft =\n event.key === ARROW_LEFT || event.keyCode === ARROW_LEFT_KEY_CODE;\n\n const isRight =\n event.key === ARROW_RIGHT || event.keyCode === ARROW_RIGHT_KEY_CODE;\n\n if (!isBackwardTab && !isLeft && !isRight) {\n return;\n }\n\n if (isBackwardTab) {\n event.stopPropagation();\n event.preventDefault();\n this.searchInput?.focus();\n } else if (!this.gridLayout) {\n const currentItem = this.getCurrentItem();\n\n event.stopPropagation();\n event.preventDefault();\n if (isRight) {\n this.goForward(currentItem);\n } else if (isLeft) {\n this.goBack();\n }\n }\n };\n\n private clearSearch = () => {\n this.searchValue = '';\n this.searchResults = null;\n };\n\n private getCurrentItem = (): MenuItem => {\n const activeItem = this.list?.shadowRoot?.querySelector(\n '[role=\"menuitem\"][tabindex=\"0\"]',\n );\n const attrIndex = activeItem?.attributes?.getNamedItem('data-index');\n const dataIndex = parseInt(attrIndex?.value || '0', 10);\n\n return this.visibleItems[dataIndex] as MenuItem;\n };\n\n private goForward = (currentItem: MenuItem) => {\n this.handleSelect(currentItem, false);\n };\n\n private goBack = () => {\n if (!this.currentSubMenu) {\n // Already in the root of the menu\n return;\n }\n\n const parent = this.currentSubMenu.parentItem;\n if (!parent) {\n // If only one step down, go to the root of the menu.\n // No need to load a sub-menu.\n this.currentSubMenu = null;\n this.navigateMenu.emit(null);\n\n this.setFocus();\n\n return;\n }\n\n this.handleSelect(parent);\n };\n\n private setTriggerAttributes = (element: HTMLElement) => {\n const attributes = {\n 'aria-haspopup': true,\n 'aria-expanded': this.open,\n disabled: this.disabled,\n role: 'button',\n };\n\n for (const [key, value] of Object.entries(attributes)) {\n if (!value) {\n element.removeAttribute(key);\n } else {\n element.setAttribute(key, String(value));\n }\n }\n };\n\n private onClose = () => {\n this.cancel.emit();\n this.open = false;\n this.currentSubMenu = null;\n };\n\n private onTriggerClick = (event: MouseEvent) => {\n event.stopPropagation();\n if (this.disabled) {\n return;\n }\n\n this.open = !this.open;\n };\n\n private handleSelect = async (\n menuItem: MenuItem,\n selectOnEmptyChildren: boolean = true,\n ) => {\n if (Array.isArray(menuItem?.items) && menuItem.items.length > 0) {\n this.clearSearch();\n this.currentSubMenu = menuItem;\n this.navigateMenu.emit(menuItem);\n\n this.setFocus();\n\n return;\n } else if (isFunction(menuItem?.items)) {\n const menuLoader = menuItem.items as MenuLoader;\n this.loadingSubItems = true;\n const subItems = await menuLoader(menuItem);\n menuItem.items = subItems;\n this.loadingSubItems = false;\n\n if (subItems?.length) {\n this.currentSubMenu = menuItem;\n this.navigateMenu.emit(menuItem);\n\n this.setFocus();\n\n return;\n }\n }\n\n if (!selectOnEmptyChildren) {\n return;\n }\n\n this.select.emit(menuItem);\n this.open = false;\n this.currentSubMenu = null;\n this.setFocus();\n };\n\n private onSelect = (event: CustomEvent<MenuItem>) => {\n event.stopPropagation();\n this.handleSelect(event.detail);\n };\n\n private getCssProperties() {\n const propertyNames = [\n '--menu-surface-width',\n '--list-grid-item-max-width',\n '--list-grid-item-min-width',\n '--list-grid-gap',\n '--notification-badge-background-color',\n '--notification-badge-text-color',\n ] as const;\n const style = getComputedStyle(this.host);\n const values = propertyNames.map((property) => {\n return style.getPropertyValue(property);\n });\n\n type PropName = (typeof propertyNames)[number];\n\n return zipObject(propertyNames, values) as Record<PropName, string>;\n }\n\n private setListElement = (element: HTMLLimelMenuListElement) => {\n this.list = element;\n };\n\n private setFocus = () => {\n setTimeout(() => {\n if (this.searchInput && this.searcher) {\n const observer = new IntersectionObserver(() => {\n observer.unobserve(this.searchInput);\n if (this.searchInput === window.document.activeElement) {\n return;\n }\n\n this.searchInput.focus();\n });\n observer.observe(this.searchInput);\n } else if (this.list) {\n const observer = new IntersectionObserver(() => {\n observer.unobserve(this.list);\n this.focusMenuItem();\n });\n observer.observe(this.list);\n }\n }, 0);\n };\n\n private setSearchElement = (element: HTMLLimelInputFieldElement) => {\n this.searchInput = element;\n };\n\n private focusMenuItem = () => {\n if (!this.list) {\n return;\n }\n\n const activeElement = this.list.shadowRoot.activeElement as HTMLElement;\n activeElement?.blur();\n\n const menuItems = this.visibleItems.filter(this.isMenuItem);\n const selectedIndex = Math.max(\n menuItems.findIndex((item) => item.selected),\n 0,\n );\n const menuElements: HTMLElement[] = Array.from(\n this.list.shadowRoot.querySelectorAll('[role=\"menuitem\"]'),\n );\n menuElements[selectedIndex]?.focus();\n };\n\n private isMenuItem(item: MenuItem | ListSeparator): item is MenuItem {\n return !('separator' in item);\n }\n\n private renderNotificationBadge = () => {\n if (this.items.some(this.hasNotificationBadge)) {\n return <limel-badge />;\n }\n };\n\n private hasNotificationBadge = (item: MenuItem | ListSeparator) =>\n this.isMenuItem(item) && item.badge !== undefined;\n\n private setTriggerRef = (elm?: HTMLSlotElement) => {\n this.triggerElement = elm;\n };\n\n private getMenuSurfaceWidth(customWidth: string): string {\n if (customWidth) {\n return customWidth;\n }\n\n if (this.surfaceWidth === 'inherit-from-trigger') {\n const assignedTriggers = this.triggerElement?.assignedElements();\n\n if (\n !assignedTriggers?.length ||\n !assignedTriggers[0]?.clientWidth\n ) {\n return '';\n }\n\n return `${assignedTriggers[0].clientWidth}px`;\n } else if (this.surfaceWidth === 'inherit-from-menu') {\n if (!this.host?.clientWidth) {\n return '';\n }\n\n return `${this.host?.clientWidth}px`;\n }\n\n return '';\n }\n\n private get visibleItems(): Array<MenuItem | ListSeparator> {\n if (Array.isArray(this.currentSubMenu?.items)) {\n return this.currentSubMenu.items.map((item) => ({\n ...item,\n parentItem: this.currentSubMenu,\n }));\n }\n\n return this.items;\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"menu.js","sourceRoot":"","sources":["../../../src/components/menu/menu.tsx"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable sonarjs/no-duplicate-string */\nimport {\n Component,\n Event,\n EventEmitter,\n h,\n Prop,\n Element,\n Watch,\n State,\n} from '@stencil/core';\nimport { createRandomString } from '../../util/random-string';\nimport { zipObject, isFunction } from 'lodash-es';\nimport {\n LimelBreadcrumbsCustomEvent,\n LimelInputFieldCustomEvent,\n} from '@limetech/lime-elements';\n\nimport { BreadcrumbsItem } from '../breadcrumbs/breadcrumbs.types';\nimport { ListSeparator } from '../list/list-item.types';\nimport {\n OpenDirection,\n MenuItem,\n MenuLoader,\n SurfaceWidth,\n MenuSearcher,\n} from './menu.types';\n\nimport {\n ARROW_DOWN,\n ARROW_DOWN_KEY_CODE,\n ARROW_LEFT,\n ARROW_LEFT_KEY_CODE,\n ARROW_RIGHT,\n ARROW_RIGHT_KEY_CODE,\n ARROW_UP,\n ARROW_UP_KEY_CODE,\n TAB,\n TAB_KEY_CODE,\n} from '../../util/keycodes';\nimport AwesomeDebouncePromise from 'awesome-debounce-promise';\n\ninterface MenuCrumbItem extends BreadcrumbsItem {\n menuItem: MenuItem;\n}\n\nconst SEARCH_DEBOUNCE = 500;\n\n/**\n * @slot trigger - Element to use as a trigger for the menu.\n * @exampleComponent limel-example-menu-basic\n * @exampleComponent limel-example-menu-disabled\n * @exampleComponent limel-example-menu-open-direction\n * @exampleComponent limel-example-menu-surface-width\n * @exampleComponent limel-example-menu-separators\n * @exampleComponent limel-example-menu-icons\n * @exampleComponent limel-example-menu-badge-icons\n * @exampleComponent limel-example-menu-grid\n * @exampleComponent limel-example-menu-hotkeys\n * @exampleComponent limel-example-menu-secondary-text\n * @exampleComponent limel-example-menu-notification\n * @exampleComponent limel-example-menu-sub-menus\n * @exampleComponent limel-example-menu-sub-menu-lazy-loading\n * @exampleComponent limel-example-menu-sub-menu-lazy-loading-infinite\n * @exampleComponent limel-example-menu-searchable\n * @exampleComponent limel-example-menu-composite\n */\n@Component({\n tag: 'limel-menu',\n shadow: true,\n styleUrl: 'menu.scss',\n})\nexport class Menu {\n /**\n * A list of items and separators to show in the menu.\n */\n @Prop()\n public items: Array<MenuItem | ListSeparator> = [];\n\n /**\n * Sets the disabled state of the menu.\n */\n @Prop({ reflect: true })\n public disabled = false;\n\n /**\n * Decides the menu's location in relation to its trigger\n */\n @Prop({ reflect: true })\n public openDirection: OpenDirection = 'bottom-start';\n\n /**\n * Decides the width of menu's dropdown\n */\n @Prop({ reflect: true })\n public surfaceWidth: SurfaceWidth = 'inherit-from-items';\n\n /**\n * Sets the open state of the menu.\n */\n @Prop({ mutable: true, reflect: true })\n public open = false;\n\n /**\n * Defines whether the menu should show badges.\n */\n @Prop({ reflect: true })\n public badgeIcons = false;\n\n /**\n * Renders list items in a grid layout, rather than a vertical list\n */\n @Prop({ reflect: true })\n public gridLayout = false;\n\n /**\n * :::warning Internal Use Only\n * This property is for internal use only. We need it for now, but want to\n * find a better implementation of the functionality it currently enables.\n * If and when we do so, this property will be removed without prior\n * notice. If you use it, your code _will_ break in the future.\n * :::\n * @internal\n */\n @Prop({ reflect: true })\n public loading = false;\n\n /**\n * :::warning Internal Use Only\n * This property is for internal use only. We need it for now, but want to\n * find a better implementation of the functionality it currently enables.\n * If and when we do so, this property will be removed without prior\n * notice. If you use it, your code _will_ break in the future.\n * :::\n * @internal\n */\n @Prop({ mutable: true })\n public currentSubMenu: MenuItem;\n\n /**\n * Is emitted when the menu is cancelled.\n */\n @Event()\n public cancel: EventEmitter<void>;\n\n /**\n * Is emitted when a menu item is selected.\n */\n @Event()\n public select: EventEmitter<MenuItem>;\n\n /**\n * A search function that takes a search-string as an argument,\n * and returns a promise that will eventually be resolved with\n * an array of `MenuItem`:s.\n *\n * See the docs for the type `MenuSearcher` for type information on\n * the searcher function itself.\n */\n @Prop()\n public searcher: MenuSearcher;\n\n /**\n * Message to display when search returns 0 results.\n */\n @Prop()\n public emptyResultMessage?: string;\n\n /**\n * Is emitted when a menu item with a sub-menu is selected.\n */\n @Event()\n public navigateMenu: EventEmitter<MenuItem>;\n\n @Element()\n private host: HTMLLimelMenuElement;\n\n @State()\n private loadingSubItems: boolean;\n\n @State()\n private menuBreadCrumb: MenuCrumbItem[] = [];\n\n @State()\n private searchValue: string;\n\n @State()\n private searchResults: Array<MenuItem | ListSeparator>;\n\n private list: HTMLLimelMenuListElement;\n private searchInput: HTMLLimelInputFieldElement;\n private portalId: string;\n private triggerElement: HTMLSlotElement;\n private debouncedSearch: MenuSearcher;\n\n constructor() {\n this.createDebouncedSearcher = this.createDebouncedSearcher.bind(this);\n this.portalId = createRandomString();\n }\n\n public componentDidLoad() {\n this.createDebouncedSearcher(this.searcher);\n }\n\n public componentDidRender() {\n const slotElement = this.host.shadowRoot.querySelector('slot');\n slotElement.assignedElements().forEach(this.setTriggerAttributes);\n }\n\n public render() {\n const cssProperties = this.getCssProperties();\n\n const dropdownZIndex = getComputedStyle(this.host).getPropertyValue(\n '--dropdown-z-index',\n );\n\n const menuSurfaceWidth = this.getMenuSurfaceWidth(\n cssProperties['--menu-surface-width'],\n );\n\n return (\n <div class=\"mdc-menu-surface--anchor\" onClick={this.onTriggerClick}>\n <slot ref={this.setTriggerRef} name=\"trigger\" />\n {this.renderNotificationBadge()}\n <limel-portal\n visible={this.open}\n containerId={this.portalId}\n openDirection={this.openDirection}\n position=\"absolute\"\n containerStyle={{ 'z-index': dropdownZIndex }}\n >\n <limel-menu-surface\n open={this.open}\n onDismiss={this.onClose}\n style={{\n ...cssProperties,\n '--mdc-menu-min-width': menuSurfaceWidth,\n '--limel-menu-surface-display': 'flex',\n '--limel-menu-surface-flex-direction': 'column',\n }}\n class={{\n 'has-grid-layout': this.gridLayout,\n }}\n >\n {this.renderSearchField()}\n {this.renderBreadcrumb()}\n {this.renderLoader()}\n {this.renderEmptyMessage()}\n {this.renderMenuList()}\n </limel-menu-surface>\n </limel-portal>\n </div>\n );\n }\n\n @Watch('items')\n protected itemsWatcher() {\n this.clearSearch();\n this.setFocus();\n }\n\n @Watch('open')\n protected openWatcher(newValue: boolean) {\n if (newValue) {\n this.setFocus();\n } else {\n this.clearSearch();\n }\n }\n\n @Watch('currentSubMenu')\n protected currentSubMenuWatcher() {\n const breadCrumbItems: MenuCrumbItem[] = [];\n let currentItem = this.currentSubMenu;\n while (currentItem) {\n breadCrumbItems.push({\n text: currentItem.text,\n icon: currentItem.icon,\n menuItem: currentItem,\n });\n currentItem = currentItem.parentItem;\n }\n\n if (breadCrumbItems.length) {\n breadCrumbItems.push({\n text: '',\n icon: {\n name: 'home',\n },\n type: 'icon-only',\n } as MenuCrumbItem);\n }\n\n this.menuBreadCrumb = breadCrumbItems.reverse();\n }\n\n @Watch('searcher')\n protected createDebouncedSearcher(newValue: MenuSearcher) {\n if (typeof newValue !== 'function') {\n return;\n }\n\n this.debouncedSearch = AwesomeDebouncePromise(\n newValue,\n SEARCH_DEBOUNCE,\n );\n }\n\n private renderLoader = () => {\n if (!this.loadingSubItems && !this.loading) {\n return;\n }\n\n const cssProperties = this.getCssProperties();\n\n return (\n <div\n style={{\n width: cssProperties['--menu-surface-width'],\n display: 'flex',\n 'align-items': 'center',\n 'justify-content': 'center',\n padding: '0.5rem 0',\n }}\n >\n <limel-spinner size=\"mini\" limeBranded={false} />\n </div>\n );\n };\n\n private renderBreadcrumb = () => {\n if (!this.menuBreadCrumb?.length) {\n return;\n }\n\n return (\n <limel-breadcrumbs\n style={{\n 'border-bottom': 'solid 1px rgb(var(--contrast-500))',\n 'flex-shrink': '0',\n }}\n onSelect={this.handleBreadcrumbsSelect}\n items={this.menuBreadCrumb}\n />\n );\n };\n\n private handleBreadcrumbsSelect = (\n event: LimelBreadcrumbsCustomEvent<MenuCrumbItem>,\n ) => {\n if (!event.detail.menuItem) {\n this.currentSubMenu = null;\n this.clearSearch();\n this.navigateMenu.emit(null);\n\n this.setFocus();\n\n return;\n }\n\n this.handleSelect(event.detail.menuItem);\n };\n\n private renderSearchField = () => {\n if (!this.searcher) {\n return;\n }\n\n return (\n <limel-input-field\n tabindex=\"0\"\n ref={this.setSearchElement}\n type=\"search\"\n leadingIcon=\"search\"\n style={{\n padding: '0.25rem',\n 'box-sizing': 'border-box',\n }}\n value={this.searchValue}\n onChange={this.handleTextInput}\n onKeyDown={this.handleInputKeyDown}\n />\n );\n };\n\n private renderEmptyMessage = () => {\n if (\n this.loading ||\n this.loadingSubItems ||\n !this.emptyResultMessage ||\n !Array.isArray(this.searchResults) ||\n this.searchResults?.length\n ) {\n return null;\n }\n\n return (\n <p\n style={{\n padding: '0 1rem',\n 'text-align': 'center',\n }}\n >\n {this.emptyResultMessage}\n </p>\n );\n };\n\n private renderMenuList = () => {\n let items = this.visibleItems;\n\n if (this.searchResults?.length) {\n items = this.searchResults;\n }\n\n if (this.loadingSubItems || this.loading) {\n items = [];\n }\n\n return (\n <limel-menu-list\n style={{\n 'overflow-y': 'auto',\n 'flex-grow': '1',\n }}\n class={{\n 'has-grid-layout has-interactive-items': this.gridLayout,\n }}\n items={items}\n type=\"menu\"\n badgeIcons={this.badgeIcons}\n onSelect={this.onSelect}\n ref={this.setListElement}\n onKeyDown={this.handleMenuKeyDown}\n />\n );\n };\n\n private handleTextInput = async (\n event: LimelInputFieldCustomEvent<string>,\n ) => {\n event.stopPropagation();\n\n const query = event.detail;\n this.searchValue = query;\n if (query === '') {\n this.searchResults = null;\n\n return;\n }\n\n this.loadingSubItems = true;\n\n const result = await this.debouncedSearch(query);\n\n this.searchResults = result;\n this.loadingSubItems = false;\n };\n\n // Key handler for the input search field\n // Will change focus to the first/last item in the dropdown\n // list to enable selection with the keyboard\n private handleInputKeyDown = (event: KeyboardEvent) => {\n const isForwardTab =\n (event.key === TAB || event.keyCode === TAB_KEY_CODE) &&\n !event.altKey &&\n !event.metaKey &&\n !event.shiftKey;\n const isUp =\n event.key === ARROW_UP || event.keyCode === ARROW_UP_KEY_CODE;\n const isDown =\n event.key === ARROW_DOWN || event.keyCode === ARROW_DOWN_KEY_CODE;\n\n if (!isForwardTab && !isUp && !isDown) {\n return;\n }\n\n if (!this.list) {\n return;\n }\n\n event.stopPropagation();\n event.preventDefault();\n\n if (isForwardTab || isDown) {\n const listElement: HTMLElement = this.list.shadowRoot.querySelector(\n '.mdc-deprecated-list-item:first-child',\n );\n listElement.focus();\n\n return;\n }\n\n if (isUp) {\n const listElement: HTMLElement = this.list.shadowRoot.querySelector(\n '.mdc-deprecated-list-item:last-child',\n );\n listElement.focus();\n }\n };\n\n // Key handler for the menu list\n // Will change focus to the search field if using shift+tab\n // And can go forward/back with righ/left arrow keys\n private handleMenuKeyDown = (event: KeyboardEvent) => {\n const isBackwardTab =\n (event.key === TAB || event.keyCode === TAB_KEY_CODE) &&\n !event.altKey &&\n !event.metaKey &&\n event.shiftKey;\n\n const isLeft =\n event.key === ARROW_LEFT || event.keyCode === ARROW_LEFT_KEY_CODE;\n\n const isRight =\n event.key === ARROW_RIGHT || event.keyCode === ARROW_RIGHT_KEY_CODE;\n\n if (!isBackwardTab && !isLeft && !isRight) {\n return;\n }\n\n if (isBackwardTab) {\n event.stopPropagation();\n event.preventDefault();\n this.searchInput?.focus();\n } else if (!this.gridLayout) {\n const currentItem = this.getCurrentItem();\n\n event.stopPropagation();\n event.preventDefault();\n if (isRight) {\n this.goForward(currentItem);\n } else if (isLeft) {\n this.goBack();\n }\n }\n };\n\n private clearSearch = () => {\n this.searchValue = '';\n this.searchResults = null;\n };\n\n private getCurrentItem = (): MenuItem => {\n const activeItem = this.list?.shadowRoot?.querySelector(\n '[role=\"menuitem\"][tabindex=\"0\"]',\n );\n const attrIndex = activeItem?.attributes?.getNamedItem('data-index');\n const dataIndex = parseInt(attrIndex?.value || '0', 10);\n\n return this.visibleItems[dataIndex] as MenuItem;\n };\n\n private goForward = (currentItem: MenuItem) => {\n this.handleSelect(currentItem, false);\n };\n\n private goBack = () => {\n if (!this.currentSubMenu) {\n // Already in the root of the menu\n return;\n }\n\n const parent = this.currentSubMenu.parentItem;\n if (!parent) {\n // If only one step down, go to the root of the menu.\n // No need to load a sub-menu.\n this.currentSubMenu = null;\n this.clearSearch();\n this.navigateMenu.emit(null);\n\n this.setFocus();\n\n return;\n }\n\n this.handleSelect(parent);\n };\n\n private setTriggerAttributes = (element: HTMLElement) => {\n const attributes = {\n 'aria-haspopup': true,\n 'aria-expanded': this.open,\n disabled: this.disabled,\n role: 'button',\n };\n\n for (const [key, value] of Object.entries(attributes)) {\n if (!value) {\n element.removeAttribute(key);\n } else {\n element.setAttribute(key, String(value));\n }\n }\n };\n\n private onClose = () => {\n this.cancel.emit();\n this.open = false;\n this.currentSubMenu = null;\n };\n\n private onTriggerClick = (event: MouseEvent) => {\n event.stopPropagation();\n if (this.disabled) {\n return;\n }\n\n this.open = !this.open;\n };\n\n private handleSelect = async (\n menuItem: MenuItem,\n selectOnEmptyChildren: boolean = true,\n ) => {\n if (Array.isArray(menuItem?.items) && menuItem.items.length > 0) {\n this.clearSearch();\n this.currentSubMenu = menuItem;\n this.navigateMenu.emit(menuItem);\n\n this.setFocus();\n\n return;\n } else if (isFunction(menuItem?.items)) {\n const menuLoader = menuItem.items as MenuLoader;\n this.loadingSubItems = true;\n const subItems = await menuLoader(menuItem);\n menuItem.items = subItems;\n this.loadingSubItems = false;\n\n if (subItems?.length) {\n this.currentSubMenu = menuItem;\n this.clearSearch();\n this.navigateMenu.emit(menuItem);\n\n this.setFocus();\n\n return;\n }\n }\n\n if (!selectOnEmptyChildren) {\n return;\n }\n\n this.select.emit(menuItem);\n this.open = false;\n this.currentSubMenu = null;\n this.setFocus();\n };\n\n private onSelect = (event: CustomEvent<MenuItem>) => {\n event.stopPropagation();\n this.handleSelect(event.detail);\n };\n\n private getCssProperties() {\n const propertyNames = [\n '--menu-surface-width',\n '--list-grid-item-max-width',\n '--list-grid-item-min-width',\n '--list-grid-gap',\n '--notification-badge-background-color',\n '--notification-badge-text-color',\n ] as const;\n const style = getComputedStyle(this.host);\n const values = propertyNames.map((property) => {\n return style.getPropertyValue(property);\n });\n\n type PropName = (typeof propertyNames)[number];\n\n return zipObject(propertyNames, values) as Record<PropName, string>;\n }\n\n private setListElement = (element: HTMLLimelMenuListElement) => {\n this.list = element;\n };\n\n private setFocus = () => {\n setTimeout(() => {\n if (this.searchInput && this.searcher) {\n const observer = new IntersectionObserver(() => {\n observer.unobserve(this.searchInput);\n if (this.searchInput === window.document.activeElement) {\n return;\n }\n\n this.searchInput.focus();\n });\n observer.observe(this.searchInput);\n } else if (this.list) {\n const observer = new IntersectionObserver(() => {\n observer.unobserve(this.list);\n this.focusMenuItem();\n });\n observer.observe(this.list);\n }\n }, 0);\n };\n\n private setSearchElement = (element: HTMLLimelInputFieldElement) => {\n this.searchInput = element;\n };\n\n private focusMenuItem = () => {\n if (!this.list) {\n return;\n }\n\n const activeElement = this.list.shadowRoot.activeElement as HTMLElement;\n activeElement?.blur();\n\n const menuItems = this.visibleItems.filter(this.isMenuItem);\n const selectedIndex = Math.max(\n menuItems.findIndex((item) => item.selected),\n 0,\n );\n const menuElements: HTMLElement[] = Array.from(\n this.list.shadowRoot.querySelectorAll('[role=\"menuitem\"]'),\n );\n menuElements[selectedIndex]?.focus();\n };\n\n private isMenuItem(item: MenuItem | ListSeparator): item is MenuItem {\n return !('separator' in item);\n }\n\n private renderNotificationBadge = () => {\n if (this.items.some(this.hasNotificationBadge)) {\n return <limel-badge />;\n }\n };\n\n private hasNotificationBadge = (item: MenuItem | ListSeparator) =>\n this.isMenuItem(item) && item.badge !== undefined;\n\n private setTriggerRef = (elm?: HTMLSlotElement) => {\n this.triggerElement = elm;\n };\n\n private getMenuSurfaceWidth(customWidth: string): string {\n if (customWidth) {\n return customWidth;\n }\n\n if (this.surfaceWidth === 'inherit-from-trigger') {\n const assignedTriggers = this.triggerElement?.assignedElements();\n\n if (\n !assignedTriggers?.length ||\n !assignedTriggers[0]?.clientWidth\n ) {\n return '';\n }\n\n return `${assignedTriggers[0].clientWidth}px`;\n } else if (this.surfaceWidth === 'inherit-from-menu') {\n if (!this.host?.clientWidth) {\n return '';\n }\n\n return `${this.host?.clientWidth}px`;\n }\n\n return '';\n }\n\n private get visibleItems(): Array<MenuItem | ListSeparator> {\n if (Array.isArray(this.currentSubMenu?.items)) {\n return this.currentSubMenu.items.map((item) => ({\n ...item,\n parentItem: this.currentSubMenu,\n }));\n }\n\n return this.items;\n }\n}\n"]}
|
|
@@ -132,6 +132,7 @@ const Menu = class {
|
|
|
132
132
|
this.handleBreadcrumbsSelect = (event) => {
|
|
133
133
|
if (!event.detail.menuItem) {
|
|
134
134
|
this.currentSubMenu = null;
|
|
135
|
+
this.clearSearch();
|
|
135
136
|
this.navigateMenu.emit(null);
|
|
136
137
|
this.setFocus();
|
|
137
138
|
return;
|
|
@@ -273,6 +274,7 @@ const Menu = class {
|
|
|
273
274
|
// If only one step down, go to the root of the menu.
|
|
274
275
|
// No need to load a sub-menu.
|
|
275
276
|
this.currentSubMenu = null;
|
|
277
|
+
this.clearSearch();
|
|
276
278
|
this.navigateMenu.emit(null);
|
|
277
279
|
this.setFocus();
|
|
278
280
|
return;
|
|
@@ -323,6 +325,7 @@ const Menu = class {
|
|
|
323
325
|
this.loadingSubItems = false;
|
|
324
326
|
if (subItems === null || subItems === void 0 ? void 0 : subItems.length) {
|
|
325
327
|
this.currentSubMenu = menuItem;
|
|
328
|
+
this.clearSearch();
|
|
326
329
|
this.navigateMenu.emit(menuItem);
|
|
327
330
|
this.setFocus();
|
|
328
331
|
return;
|
|
@@ -434,10 +437,6 @@ const Menu = class {
|
|
|
434
437
|
}
|
|
435
438
|
}
|
|
436
439
|
currentSubMenuWatcher() {
|
|
437
|
-
if (this.searchValue) {
|
|
438
|
-
this.menuBreadCrumb = [];
|
|
439
|
-
return;
|
|
440
|
-
}
|
|
441
440
|
const breadCrumbItems = [];
|
|
442
441
|
let currentItem = this.currentSubMenu;
|
|
443
442
|
while (currentItem) {
|