@limetech/lime-elements 37.65.6 → 37.65.8
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 +16 -0
- package/dist/cjs/limel-form.cjs.entry.js +5 -2
- package/dist/cjs/limel-form.cjs.entry.js.map +1 -1
- package/dist/collection/components/form/templates/array-field-collapsible-item.js +2 -2
- package/dist/collection/components/form/templates/array-field-collapsible-item.js.map +1 -1
- package/dist/collection/components/form/templates/grid-layout.js +3 -0
- package/dist/collection/components/form/templates/grid-layout.js.map +1 -1
- package/dist/esm/limel-form.entry.js +5 -2
- package/dist/esm/limel-form.entry.js.map +1 -1
- package/dist/lime-elements/lime-elements.esm.js +1 -1
- package/dist/lime-elements/{p-da0be036.entry.js → p-4d483ad2.entry.js} +2 -2
- package/dist/lime-elements/{p-da0be036.entry.js.map → p-4d483ad2.entry.js.map} +1 -1
- package/package.json +1 -1
|
@@ -15,9 +15,9 @@ export class CollapsibleItemTemplate extends React.Component {
|
|
|
15
15
|
};
|
|
16
16
|
this.handleAction = this.handleAction.bind(this);
|
|
17
17
|
this.isDeepEmpty = this.isDeepEmpty.bind(this);
|
|
18
|
-
this.
|
|
18
|
+
this.state = {
|
|
19
19
|
isOpen: this.isDeepEmpty(props.data),
|
|
20
|
-
}
|
|
20
|
+
};
|
|
21
21
|
}
|
|
22
22
|
componentDidMount() {
|
|
23
23
|
const section = this.refs.section;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"array-field-collapsible-item.js","sourceRoot":"","sources":["../../../../src/components/form/templates/array-field-collapsible-item.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAErC,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AA8BpC,MAAM,OAAO,uBAAwB,SAAQ,KAAK,CAAC,SAAS;EAMxD,YAAmB,KAA2B;IAC1C,KAAK,CAAC,KAAK,CAAC,CAAC;IADE,UAAK,GAAL,KAAK,CAAsB;IAJ9C,UAAK,GAAG;MACJ,MAAM,EAAE,KAAK;KAChB,CAAC;IAiFM,eAAU,GAAG,GAAG,EAAE;MACtB,IAAI,CAAC,QAAQ,CAAC;QACV,MAAM,EAAE,IAAI;OACf,CAAC,CAAC;IACP,CAAC,CAAC;IAjFE,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IACjD,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAE/C,IAAI,CAAC,
|
|
1
|
+
{"version":3,"file":"array-field-collapsible-item.js","sourceRoot":"","sources":["../../../../src/components/form/templates/array-field-collapsible-item.ts"],"names":[],"mappings":"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","sourcesContent":["import { Action } from '../../collapsible-section/action';\nimport React from 'react';\nimport { findTitle } from './common';\nimport { ArrayFieldItem, Runnable } from './types';\nimport { isEmpty } from 'lodash-es';\nimport { JSONSchema7 } from 'json-schema';\n\ninterface CollapsibleItemProps {\n /**\n * Data from reach-jsonschema-form\n */\n item: ArrayFieldItem;\n\n /**\n * The index of the field in the array\n */\n index: number;\n\n /**\n * The value of the field\n */\n data: any;\n\n /**\n * Schema for the field\n */\n schema: JSONSchema7;\n\n /**\n * Schema for the entire form\n */\n formSchema: JSONSchema7;\n}\n\nexport class CollapsibleItemTemplate extends React.Component {\n public refs: { section: any };\n state = {\n isOpen: false,\n };\n\n constructor(public props: CollapsibleItemProps) {\n super(props);\n this.handleAction = this.handleAction.bind(this);\n this.isDeepEmpty = this.isDeepEmpty.bind(this);\n\n this.state = {\n isOpen: this.isDeepEmpty(props.data),\n };\n }\n\n public componentDidMount() {\n const section: HTMLLimelCollapsibleSectionElement = this.refs.section;\n section.addEventListener('action', this.handleAction);\n section.addEventListener('open', this.handleOpen);\n\n this.setActions(section);\n }\n\n public componentDidUpdate() {\n const section: HTMLLimelCollapsibleSectionElement = this.refs.section;\n this.setActions(section);\n }\n\n public componentWillUnmount() {\n const section: HTMLLimelCollapsibleSectionElement = this.refs.section;\n section.removeEventListener('action', this.handleAction);\n section.removeEventListener('open', this.handleOpen);\n }\n\n public render() {\n const { data, schema, formSchema } = this.props;\n let children: any;\n if (this.state.isOpen) {\n children = this.props.item.children;\n }\n\n return React.createElement(\n 'limel-collapsible-section',\n {\n header: findTitle(data, schema, formSchema) || 'New item',\n class: 'limel-form-array-item--object',\n ref: 'section',\n 'is-open': this.state.isOpen,\n },\n children,\n );\n }\n\n private setActions(element: HTMLLimelCollapsibleSectionElement) {\n const { item, index } = this.props;\n const actions: Array<Action & Runnable> = [\n {\n id: 'down',\n icon: 'down_arrow',\n disabled: !item.hasMoveDown,\n run: item.onReorderClick(index, index + 1),\n },\n {\n id: 'up',\n icon: 'up_arrow',\n disabled: !item.hasMoveUp,\n run: item.onReorderClick(index, index - 1),\n },\n {\n id: 'remove',\n icon: 'trash',\n disabled: !item.hasRemove,\n run: item.onDropIndexClick(index),\n },\n ];\n\n element.actions = actions;\n }\n\n private handleAction(event: CustomEvent<Action & Runnable>) {\n event.stopPropagation();\n event.detail.run(event);\n }\n\n private handleOpen = () => {\n this.setState({\n isOpen: true,\n });\n };\n\n private isDeepEmpty(data) {\n if (typeof data !== 'object') {\n return false;\n }\n\n if (isEmpty(data)) {\n return true;\n }\n\n return Object.values(data).every(this.isDeepEmpty);\n }\n}\n"]}
|
|
@@ -30,6 +30,9 @@ export class GridLayout extends React.Component {
|
|
|
30
30
|
handleResize() {
|
|
31
31
|
requestAnimationFrame(() => {
|
|
32
32
|
const element = this.elementRef.current;
|
|
33
|
+
if (!element) {
|
|
34
|
+
return;
|
|
35
|
+
}
|
|
33
36
|
const width = element.getBoundingClientRect().width;
|
|
34
37
|
const maxColumns = Math.min(MAX_COLUMNS, Math.max(1, Math.floor(width / (MAX_COLUMN_WIDTH * PX_PER_REM))));
|
|
35
38
|
const columns = this.getColumnCount(maxColumns);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"grid-layout.js","sourceRoot":"","sources":["../../../../src/components/form/templates/grid-layout.ts"],"names":[],"mappings":"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","sourcesContent":["import React from 'react';\nimport { FormLayoutOptions, GridLayoutOptions } from '../form.types';\n\nconst MAX_COLUMNS = 5;\nconst MAX_COLUMN_WIDTH = 15;\nconst PX_PER_REM = 16;\nconst COLUMN_COUNT = '--number-of-columns';\n\nexport class GridLayout extends React.Component<LayoutProps, LayoutState> {\n private elementRef: React.RefObject<HTMLElement>;\n private observer: ResizeObserver;\n\n constructor(public props: LayoutProps) {\n super(props);\n\n this.handleResize = this.handleResize.bind(this);\n\n this.state = {\n maxColumns: MAX_COLUMNS,\n };\n this.elementRef = React.createRef();\n }\n\n public componentDidMount() {\n this.observer = new ResizeObserver(this.handleResize);\n this.observer.observe(this.elementRef.current);\n window.addEventListener('resize', this.handleResize, {\n capture: true,\n passive: true,\n });\n }\n\n public componentWillUnmount() {\n this.observer.unobserve(this.elementRef.current);\n window.removeEventListener('resize', this.handleResize, {\n capture: true,\n });\n }\n\n public handleResize() {\n requestAnimationFrame(() => {\n const element = this.elementRef.current;\n const width = element.getBoundingClientRect().width;\n const maxColumns = Math.min(\n MAX_COLUMNS,\n Math.max(\n 1,\n Math.floor(width / (MAX_COLUMN_WIDTH * PX_PER_REM)),\n ),\n );\n\n const columns = this.getColumnCount(maxColumns);\n if (element.style.getPropertyValue(COLUMN_COUNT) !== `${columns}`) {\n element.style.setProperty(COLUMN_COUNT, `${columns}`);\n }\n\n if (maxColumns !== this.state.maxColumns) {\n this.setState({\n maxColumns: maxColumns,\n });\n }\n });\n }\n\n public render() {\n const classes = ['limel-form-layout--grid'];\n const columns = this.getColumnCount(this.state.maxColumns);\n\n classes.push(`layout-${columns}-columns`);\n if (this.hasAutoFlowDense()) {\n classes.push('auto-reorder-to-avoid-empty-cells');\n }\n\n return React.createElement(\n 'div',\n {\n className: classes.join(' '),\n ref: this.elementRef,\n },\n this.props.children,\n );\n }\n\n private getColumnCount(maxColumns: number) {\n const layout: GridLayoutOptions = this.props.options as any;\n\n return Math.min(layout.columns || MAX_COLUMNS, maxColumns);\n }\n\n private hasAutoFlowDense(): boolean {\n const layout: GridLayoutOptions = this.props.options as any;\n\n return layout.dense !== false;\n }\n}\n\ninterface LayoutProps {\n options: FormLayoutOptions;\n children?: any;\n}\n\ninterface LayoutState {\n maxColumns: number;\n}\n"]}
|
|
1
|
+
{"version":3,"file":"grid-layout.js","sourceRoot":"","sources":["../../../../src/components/form/templates/grid-layout.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,MAAM,WAAW,GAAG,CAAC,CAAC;AACtB,MAAM,gBAAgB,GAAG,EAAE,CAAC;AAC5B,MAAM,UAAU,GAAG,EAAE,CAAC;AACtB,MAAM,YAAY,GAAG,qBAAqB,CAAC;AAE3C,MAAM,OAAO,UAAW,SAAQ,KAAK,CAAC,SAAmC;EAIrE,YAAmB,KAAkB;IACjC,KAAK,CAAC,KAAK,CAAC,CAAC;IADE,UAAK,GAAL,KAAK,CAAa;IAGjC,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAEjD,IAAI,CAAC,KAAK,GAAG;MACT,UAAU,EAAE,WAAW;KAC1B,CAAC;IACF,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC,SAAS,EAAE,CAAC;EACxC,CAAC;EAEM,iBAAiB;IACpB,IAAI,CAAC,QAAQ,GAAG,IAAI,cAAc,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;IACtD,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC;IAC/C,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAAC,YAAY,EAAE;MACjD,OAAO,EAAE,IAAI;MACb,OAAO,EAAE,IAAI;KAChB,CAAC,CAAC;EACP,CAAC;EAEM,oBAAoB;IACvB,IAAI,CAAC,QAAQ,CAAC,SAAS,CAAC,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC;IACjD,MAAM,CAAC,mBAAmB,CAAC,QAAQ,EAAE,IAAI,CAAC,YAAY,EAAE;MACpD,OAAO,EAAE,IAAI;KAChB,CAAC,CAAC;EACP,CAAC;EAEM,YAAY;IACf,qBAAqB,CAAC,GAAG,EAAE;MACvB,MAAM,OAAO,GAAG,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC;MACxC,IAAI,CAAC,OAAO,EAAE;QACV,OAAO;OACV;MAED,MAAM,KAAK,GAAG,OAAO,CAAC,qBAAqB,EAAE,CAAC,KAAK,CAAC;MACpD,MAAM,UAAU,GAAG,IAAI,CAAC,GAAG,CACvB,WAAW,EACX,IAAI,CAAC,GAAG,CACJ,CAAC,EACD,IAAI,CAAC,KAAK,CAAC,KAAK,GAAG,CAAC,gBAAgB,GAAG,UAAU,CAAC,CAAC,CACtD,CACJ,CAAC;MAEF,MAAM,OAAO,GAAG,IAAI,CAAC,cAAc,CAAC,UAAU,CAAC,CAAC;MAChD,IAAI,OAAO,CAAC,KAAK,CAAC,gBAAgB,CAAC,YAAY,CAAC,KAAK,GAAG,OAAO,EAAE,EAAE;QAC/D,OAAO,CAAC,KAAK,CAAC,WAAW,CAAC,YAAY,EAAE,GAAG,OAAO,EAAE,CAAC,CAAC;OACzD;MAED,IAAI,UAAU,KAAK,IAAI,CAAC,KAAK,CAAC,UAAU,EAAE;QACtC,IAAI,CAAC,QAAQ,CAAC;UACV,UAAU,EAAE,UAAU;SACzB,CAAC,CAAC;OACN;IACL,CAAC,CAAC,CAAC;EACP,CAAC;EAEM,MAAM;IACT,MAAM,OAAO,GAAG,CAAC,yBAAyB,CAAC,CAAC;IAC5C,MAAM,OAAO,GAAG,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC;IAE3D,OAAO,CAAC,IAAI,CAAC,UAAU,OAAO,UAAU,CAAC,CAAC;IAC1C,IAAI,IAAI,CAAC,gBAAgB,EAAE,EAAE;MACzB,OAAO,CAAC,IAAI,CAAC,mCAAmC,CAAC,CAAC;KACrD;IAED,OAAO,KAAK,CAAC,aAAa,CACtB,KAAK,EACL;MACI,SAAS,EAAE,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC;MAC5B,GAAG,EAAE,IAAI,CAAC,UAAU;KACvB,EACD,IAAI,CAAC,KAAK,CAAC,QAAQ,CACtB,CAAC;EACN,CAAC;EAEO,cAAc,CAAC,UAAkB;IACrC,MAAM,MAAM,GAAsB,IAAI,CAAC,KAAK,CAAC,OAAc,CAAC;IAE5D,OAAO,IAAI,CAAC,GAAG,CAAC,MAAM,CAAC,OAAO,IAAI,WAAW,EAAE,UAAU,CAAC,CAAC;EAC/D,CAAC;EAEO,gBAAgB;IACpB,MAAM,MAAM,GAAsB,IAAI,CAAC,KAAK,CAAC,OAAc,CAAC;IAE5D,OAAO,MAAM,CAAC,KAAK,KAAK,KAAK,CAAC;EAClC,CAAC;CACJ","sourcesContent":["import React from 'react';\nimport { FormLayoutOptions, GridLayoutOptions } from '../form.types';\n\nconst MAX_COLUMNS = 5;\nconst MAX_COLUMN_WIDTH = 15;\nconst PX_PER_REM = 16;\nconst COLUMN_COUNT = '--number-of-columns';\n\nexport class GridLayout extends React.Component<LayoutProps, LayoutState> {\n private elementRef: React.RefObject<HTMLElement>;\n private observer: ResizeObserver;\n\n constructor(public props: LayoutProps) {\n super(props);\n\n this.handleResize = this.handleResize.bind(this);\n\n this.state = {\n maxColumns: MAX_COLUMNS,\n };\n this.elementRef = React.createRef();\n }\n\n public componentDidMount() {\n this.observer = new ResizeObserver(this.handleResize);\n this.observer.observe(this.elementRef.current);\n window.addEventListener('resize', this.handleResize, {\n capture: true,\n passive: true,\n });\n }\n\n public componentWillUnmount() {\n this.observer.unobserve(this.elementRef.current);\n window.removeEventListener('resize', this.handleResize, {\n capture: true,\n });\n }\n\n public handleResize() {\n requestAnimationFrame(() => {\n const element = this.elementRef.current;\n if (!element) {\n return;\n }\n\n const width = element.getBoundingClientRect().width;\n const maxColumns = Math.min(\n MAX_COLUMNS,\n Math.max(\n 1,\n Math.floor(width / (MAX_COLUMN_WIDTH * PX_PER_REM)),\n ),\n );\n\n const columns = this.getColumnCount(maxColumns);\n if (element.style.getPropertyValue(COLUMN_COUNT) !== `${columns}`) {\n element.style.setProperty(COLUMN_COUNT, `${columns}`);\n }\n\n if (maxColumns !== this.state.maxColumns) {\n this.setState({\n maxColumns: maxColumns,\n });\n }\n });\n }\n\n public render() {\n const classes = ['limel-form-layout--grid'];\n const columns = this.getColumnCount(this.state.maxColumns);\n\n classes.push(`layout-${columns}-columns`);\n if (this.hasAutoFlowDense()) {\n classes.push('auto-reorder-to-avoid-empty-cells');\n }\n\n return React.createElement(\n 'div',\n {\n className: classes.join(' '),\n ref: this.elementRef,\n },\n this.props.children,\n );\n }\n\n private getColumnCount(maxColumns: number) {\n const layout: GridLayoutOptions = this.props.options as any;\n\n return Math.min(layout.columns || MAX_COLUMNS, maxColumns);\n }\n\n private hasAutoFlowDense(): boolean {\n const layout: GridLayoutOptions = this.props.options as any;\n\n return layout.dense !== false;\n }\n}\n\ninterface LayoutProps {\n options: FormLayoutOptions;\n children?: any;\n}\n\ninterface LayoutState {\n maxColumns: number;\n}\n"]}
|
|
@@ -23720,9 +23720,9 @@ class CollapsibleItemTemplate extends react.Component {
|
|
|
23720
23720
|
};
|
|
23721
23721
|
this.handleAction = this.handleAction.bind(this);
|
|
23722
23722
|
this.isDeepEmpty = this.isDeepEmpty.bind(this);
|
|
23723
|
-
this.
|
|
23723
|
+
this.state = {
|
|
23724
23724
|
isOpen: this.isDeepEmpty(props.data),
|
|
23725
|
-
}
|
|
23725
|
+
};
|
|
23726
23726
|
}
|
|
23727
23727
|
componentDidMount() {
|
|
23728
23728
|
const section = this.refs.section;
|
|
@@ -23931,6 +23931,9 @@ class GridLayout extends react.Component {
|
|
|
23931
23931
|
handleResize() {
|
|
23932
23932
|
requestAnimationFrame(() => {
|
|
23933
23933
|
const element = this.elementRef.current;
|
|
23934
|
+
if (!element) {
|
|
23935
|
+
return;
|
|
23936
|
+
}
|
|
23934
23937
|
const width = element.getBoundingClientRect().width;
|
|
23935
23938
|
const maxColumns = Math.min(MAX_COLUMNS, Math.max(1, Math.floor(width / (MAX_COLUMN_WIDTH * PX_PER_REM))));
|
|
23936
23939
|
const columns = this.getColumnCount(maxColumns);
|