@vaadin/hilla-react-crud 24.9.2 → 25.0.0-alpha10
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/autocrud-dialog.js +1 -1
- package/autocrud-dialog.js.map +1 -1
- package/autocrud.d.ts +4 -2
- package/autocrud.js +4 -3
- package/autocrud.js.map +1 -1
- package/autocrud.obj.js +1 -1
- package/autogrid.obj.js +1 -1
- package/index.js +1 -1
- package/index.js.map +1 -1
- package/locale.d.ts +2 -2
- package/locale.js +1 -10
- package/locale.js.map +1 -1
- package/package.json +6 -6
- package/util.js +1 -1
- package/util.js.map +1 -1
package/autocrud-dialog.js
CHANGED
|
@@ -5,6 +5,6 @@ import { Icon } from '@vaadin/react-components/Icon';
|
|
|
5
5
|
import '@vaadin/vaadin-lumo-styles/vaadin-iconset.js';
|
|
6
6
|
export function AutoCrudDialog(props) {
|
|
7
7
|
const { header, children, opened, onClose } = props;
|
|
8
|
-
return (_jsx(Dialog, {
|
|
8
|
+
return (_jsx(Dialog, { className: "auto-crud-dialog", opened: opened, headerRenderer: () => (_jsxs("div", { className: "auto-crud-dialog-header", children: [header, _jsx(Button, { theme: "tertiary", onClick: onClose, "aria-label": "Close", children: _jsx(Icon, { icon: "lumo:cross", style: { height: 'var(--lumo-icon-size-l)', width: 'var(--lumo-icon-size-l)' } }) })] })), children: children }));
|
|
9
9
|
}
|
|
10
10
|
//# sourceMappingURL=autocrud-dialog.js.map
|
package/autocrud-dialog.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"autocrud-dialog.js","sourceRoot":"","sources":["src/autocrud-dialog.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,iCAAiC,CAAC;AACzD,OAAO,EAAE,MAAM,EAAE,MAAM,iCAAiC,CAAC;AACzD,OAAO,EAAE,IAAI,EAAE,MAAM,+BAA+B,CAAC;AAIrD,OAAO,8CAA8C,CAAC;AAUtD,MAAM,UAAU,cAAc,CAAC,KAA0B;IACvD,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,OAAO,EAAE,GAAG,KAAK,CAAC;IACpD,OAAO,CACL,KAAC,MAAM,IACL,
|
|
1
|
+
{"version":3,"file":"autocrud-dialog.js","sourceRoot":"","sources":["src/autocrud-dialog.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,iCAAiC,CAAC;AACzD,OAAO,EAAE,MAAM,EAAE,MAAM,iCAAiC,CAAC;AACzD,OAAO,EAAE,IAAI,EAAE,MAAM,+BAA+B,CAAC;AAIrD,OAAO,8CAA8C,CAAC;AAUtD,MAAM,UAAU,cAAc,CAAC,KAA0B;IACvD,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,OAAO,EAAE,GAAG,KAAK,CAAC;IACpD,OAAO,CACL,KAAC,MAAM,IACL,SAAS,EAAC,kBAAkB,EAC5B,MAAM,EAAE,MAAM,EACd,cAAc,EAAE,GAAG,EAAE,CAAC,CACpB,eAAK,SAAS,EAAC,yBAAyB,aACrC,MAAM,EACP,KAAC,MAAM,IAAC,KAAK,EAAC,UAAU,EAAC,OAAO,EAAE,OAAO,gBAAa,OAAO,YAC3D,KAAC,IAAI,IAAC,IAAI,EAAC,YAAY,EAAC,KAAK,EAAE,EAAE,MAAM,EAAE,yBAAyB,EAAE,KAAK,EAAE,yBAAyB,EAAE,GAAI,GACnG,IACL,CACP,YAEA,QAAQ,GACF,CACV,CAAC;AACJ,CAAC","sourcesContent":["import { Button } from '@vaadin/react-components/Button';\nimport { Dialog } from '@vaadin/react-components/Dialog';\nimport { Icon } from '@vaadin/react-components/Icon';\nimport type { JSX } from 'react';\n\n// eslint-disable-next-line\nimport '@vaadin/vaadin-lumo-styles/vaadin-iconset.js';\n\ninterface AutoCrudDialogProps {\n header: JSX.Element | null | undefined;\n children: React.ReactElement;\n opened: boolean;\n // eslint-disable-next-line @typescript-eslint/method-signature-style\n onClose: () => void;\n}\n\nexport function AutoCrudDialog(props: AutoCrudDialogProps): JSX.Element {\n const { header, children, opened, onClose } = props;\n return (\n <Dialog\n className=\"auto-crud-dialog\"\n opened={opened}\n headerRenderer={() => (\n <div className=\"auto-crud-dialog-header\">\n {header}\n <Button theme=\"tertiary\" onClick={onClose} aria-label=\"Close\">\n <Icon icon=\"lumo:cross\" style={{ height: 'var(--lumo-icon-size-l)', width: 'var(--lumo-icon-size-l)' }} />\n </Button>\n </div>\n )}\n >\n {children}\n </Dialog>\n );\n}\n"]}
|
package/autocrud.d.ts
CHANGED
|
@@ -1,10 +1,11 @@
|
|
|
1
1
|
import type { AbstractModel, DetachedModelConstructor, Value } from '@vaadin/hilla-lit-form';
|
|
2
|
-
import { type JSX } from 'react';
|
|
2
|
+
import { type JSX, type ReactNode } from 'react';
|
|
3
3
|
import { type AutoFormProps } from './autoform.js';
|
|
4
4
|
import { type AutoGridProps } from './autogrid.js';
|
|
5
5
|
import type { CrudService } from './crud.js';
|
|
6
6
|
import { type ComponentStyleProps } from './util.js';
|
|
7
7
|
export type AutoCrudFormHeaderRenderer<TItem> = (editedItem: TItem | null, disabled: boolean) => JSX.Element | null | undefined;
|
|
8
|
+
export type AutoCrudToolbarRenderer = (defaultContent: ReactNode) => ReactNode;
|
|
8
9
|
export type AutoCrudFormProps<TModel extends AbstractModel> = Omit<Partial<AutoFormProps<TModel>>, 'disabled' | 'item' | 'model' | 'onDeleteSuccess' | 'onSubmitSuccess' | 'service'> & Readonly<{
|
|
9
10
|
headerRenderer?: AutoCrudFormHeaderRenderer<Value<TModel>>;
|
|
10
11
|
}>;
|
|
@@ -14,7 +15,8 @@ export type AutoCrudProps<TModel extends AbstractModel = AbstractModel> = Compon
|
|
|
14
15
|
model: DetachedModelConstructor<TModel>;
|
|
15
16
|
itemIdProperty?: string;
|
|
16
17
|
noNewButton?: boolean;
|
|
18
|
+
toolbarRenderer?: AutoCrudToolbarRenderer;
|
|
17
19
|
formProps?: AutoCrudFormProps<TModel>;
|
|
18
20
|
gridProps?: AutoCrudGridProps<Value<TModel>>;
|
|
19
21
|
}>;
|
|
20
|
-
export declare function AutoCrud<TModel extends AbstractModel>({ service, model, itemIdProperty, noNewButton, formProps, gridProps, style, id, className, }: AutoCrudProps<TModel>): JSX.Element;
|
|
22
|
+
export declare function AutoCrud<TModel extends AbstractModel>({ service, model, itemIdProperty, noNewButton, toolbarRenderer, formProps, gridProps, style, id, className, }: AutoCrudProps<TModel>): JSX.Element;
|
package/autocrud.js
CHANGED
|
@@ -13,7 +13,7 @@ function defaultFormHeaderRenderer(editedItem, disabled) {
|
|
|
13
13
|
const style = { color: disabled ? 'var(--lumo-disabled-text-color)' : 'var(--lumo-text-color)' };
|
|
14
14
|
return editedItem ? _jsx("h3", { style: style, children: "Edit item" }) : _jsx("h3", { style: style, children: "New item" });
|
|
15
15
|
}
|
|
16
|
-
export function AutoCrud({ service, model, itemIdProperty, noNewButton, formProps, gridProps, style, id, className, }) {
|
|
16
|
+
export function AutoCrud({ service, model, itemIdProperty, noNewButton, toolbarRenderer = (defaultContent) => defaultContent, formProps, gridProps, style, id, className, }) {
|
|
17
17
|
const [item, setItem] = useState(undefined);
|
|
18
18
|
const fullScreen = useMediaQuery('(max-width: 600px), (max-height: 600px)');
|
|
19
19
|
const autoGridRef = useRef(null);
|
|
@@ -27,10 +27,11 @@ export function AutoCrud({ service, model, itemIdProperty, noNewButton, formProp
|
|
|
27
27
|
setItem(undefined);
|
|
28
28
|
}
|
|
29
29
|
const formHeader = item && item !== emptyItem ? formHeaderRenderer(item, !item) : formHeaderRenderer(null, !item);
|
|
30
|
+
const toolbarContent = toolbarRenderer(noNewButton ? null : (_jsx(Button, { theme: "primary", onClick: () => setItem(emptyItem), children: "+ New" })));
|
|
30
31
|
const mainSection = (_jsxs("div", { className: "auto-crud-main", children: [_jsx(AutoGrid, { ...gridProps, service: service, model: model, itemIdProperty: itemIdProperty, selectedItems: item && item !== emptyItem ? [item] : [], onActiveItemChanged: (e) => {
|
|
31
32
|
const activeItem = e.detail.value;
|
|
32
33
|
setItem(activeItem ?? undefined);
|
|
33
|
-
}, ref: autoGridRef, "aria-controls": autoFormProps.id ?? `auto-form-${id ?? autoCrudId}` }),
|
|
34
|
+
}, ref: autoGridRef, "aria-controls": autoFormProps.id ?? `auto-form-${id ?? autoCrudId}` }), toolbarContent && _jsx("div", { className: "auto-crud-toolbar", children: toolbarContent })] }));
|
|
34
35
|
const autoForm = (_jsx(AutoForm, { id: autoFormProps.id ?? `auto-form-${id ?? autoCrudId}`, deleteButtonVisible: true, ...autoFormProps, disabled: !item, service: service, model: model, itemIdProperty: itemIdProperty, item: item, onSubmitSuccess: ({ item: submittedItem }) => {
|
|
35
36
|
if (fullScreen) {
|
|
36
37
|
setItem(undefined);
|
|
@@ -43,6 +44,6 @@ export function AutoCrud({ service, model, itemIdProperty, noNewButton, formProp
|
|
|
43
44
|
setItem(undefined);
|
|
44
45
|
refreshGrid();
|
|
45
46
|
} }));
|
|
46
|
-
return (_jsx("div", { className: `auto-crud ${className ?? ''}`, id: id, style: style, children:
|
|
47
|
+
return (_jsx("div", { className: `auto-crud ${className ?? ''}`, id: id, style: style, children: fullScreen ? (_jsxs(_Fragment, { children: [mainSection, _jsx(AutoCrudDialog, { opened: !!item, header: formHeader, onClose: handleCancel, children: autoForm })] })) : (_jsxs(SplitLayout, { theme: "small", children: [mainSection, (!noNewButton || (item && item !== emptyItem)) && (_jsxs("div", { className: "auto-crud-form", children: [_jsx("div", { className: "auto-crud-form-header", children: formHeader }), autoForm] }))] })) }));
|
|
47
48
|
}
|
|
48
49
|
//# sourceMappingURL=autocrud.js.map
|
package/autocrud.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"autocrud.js","sourceRoot":"","sources":["src/autocrud.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { AbstractModel, DetachedModelConstructor, Value } from '@vaadin/hilla-lit-form';\nimport { Button } from '@vaadin/react-components/Button.js';\nimport { SplitLayout } from '@vaadin/react-components/SplitLayout.js';\nimport { type JSX, useId, useRef, useState } from 'react';\nimport { AutoCrudDialog } from './autocrud-dialog.js';\nimport css from './autocrud.obj.js';\nimport { type AutoFormProps, emptyItem, AutoForm } from './autoform.js';\nimport { type AutoGridProps, AutoGrid, type AutoGridRef } from './autogrid.js';\nimport type { CrudService } from './crud.js';\nimport { useMediaQuery } from './media-query.js';\nimport { type ComponentStyleProps, registerStylesheet } from './util.js';\n\nregisterStylesheet(css);\n\nexport type AutoCrudFormHeaderRenderer<TItem> = (\n editedItem: TItem | null,\n disabled: boolean,\n) => JSX.Element | null | undefined;\n\nexport type AutoCrudFormProps<TModel extends AbstractModel> = Omit<\n Partial<AutoFormProps<TModel>>,\n 'disabled' | 'item' | 'model' | 'onDeleteSuccess' | 'onSubmitSuccess' | 'service'\n> &\n Readonly<{\n /**\n * A custom renderer function to create the header for the form. The\n * function receives the edited item as the first parameter, and a boolean\n * indicating whether the form is disabled as the second parameter. The\n * edited item is `null` when creating a new item.\n *\n * By default, the header shows \"New item\" when creating a new item, and\n * \"Edit item\" when editing an existing item.\n */\n headerRenderer?: AutoCrudFormHeaderRenderer<Value<TModel>>;\n }>;\n\nexport type AutoCrudGridProps<TItem> = Omit<\n Partial<AutoGridProps<TItem>>,\n 'model' | 'onActiveItemChanged' | 'selectedItems' | 'service'\n>;\n\nexport type AutoCrudProps<TModel extends AbstractModel = AbstractModel> = ComponentStyleProps &\n Readonly<{\n /**\n * The service to use for fetching the data, as well saving and deleting\n * items. This must be a TypeScript service that has been generated by Hilla\n * from a backend Java service that implements the\n * `com.vaadin.hilla.crud.CrudService` interface.\n */\n service: CrudService<Value<TModel>>;\n /**\n * The entity model to use for the CRUD. This determines which columns to\n * show in the grid, and which fields to show in the form. This must be a\n * Typescript model class that has been generated by Hilla from a backend\n * Java class. The model must match with the type of the items returned by\n * the service. For example, a `PersonModel` can be used with a service that\n * returns `Person` instances.\n *\n * By default, the grid shows columns for all properties of the model which\n * have a type that is supported. Use the `gridProps.visibleColumns` option\n * to customize which columns to show and in which order.\n *\n * By default, the form shows fields for all properties of the model which\n * have a type that is supported. Use the `formProps.visibleFields`\n * option to customize which fields to show and in which order.\n */\n model: DetachedModelConstructor<TModel>;\n /**\n * The property to use to detect an item's ID. The item ID is required for\n * deleting items via the `CrudService.delete` method as well as keeping the\n * selection state after reloading the grid.\n *\n * By default, the component uses the property annotated with\n * `jakarta.persistence.Id`, or a property named `id`, in that order.\n * This option can be used to override the default behavior, or define the ID\n * property in case a class doesn't have a property matching the defaults.\n */\n itemIdProperty?: string;\n /**\n * Determines whether to hide the \"New\" button in the toolbar.\n *\n * NOTE: This setting only hides the button; it does not prevent new items\n * from being sent to the service. Ensure your backend Java service is\n * properly secured to prevent unauthorized creation of new items.\n *\n * @defaultValue `false` meaning the button will be shown.\n */\n noNewButton?: boolean;\n /**\n * Props to pass to the form. See the `AutoForm` component for details.\n */\n formProps?: AutoCrudFormProps<TModel>;\n /**\n * Props to pass to the grid. See the `AutoGrid` component for details.\n */\n gridProps?: AutoCrudGridProps<Value<TModel>>;\n }>;\n\nfunction defaultFormHeaderRenderer<TItem>(editedItem: TItem | null, disabled: boolean): JSX.Element | null | undefined {\n const style = { color: disabled ? 'var(--lumo-disabled-text-color)' : 'var(--lumo-text-color)' };\n return editedItem ? <h3 style={style}>Edit item</h3> : <h3 style={style}>New item</h3>;\n}\n\n/**\n * Auto CRUD is a component that provides CRUD (create, read, update, delete)\n * functionality based on a Java backend service. It automatically generates a\n * grid that shows data from the service, and a form for creating, updating and\n * deleting items.\n *\n * Example usage:\n * ```tsx\n * import { AutoCrud } from '@hilla/react-crud';\n * import PersonService from 'Frontend/generated/endpoints';\n * import PersonModel from 'Frontend/generated/com/example/application/Person';\n *\n * <AutoCrud service={PersonService} model={PersonModel} />\n * ```\n */\nexport function AutoCrud<TModel extends AbstractModel>({\n service,\n model,\n itemIdProperty,\n noNewButton,\n formProps,\n gridProps,\n style,\n id,\n className,\n}: AutoCrudProps<TModel>): JSX.Element {\n const [item, setItem] = useState<Value<TModel> | typeof emptyItem | undefined>(undefined);\n const fullScreen = useMediaQuery('(max-width: 600px), (max-height: 600px)');\n const autoGridRef = useRef<AutoGridRef>(null);\n const { headerRenderer: customFormHeaderRenderer, ...autoFormProps } = formProps ?? {};\n const formHeaderRenderer: AutoCrudFormHeaderRenderer<Value<TModel>> =\n customFormHeaderRenderer ?? defaultFormHeaderRenderer;\n\n const autoCrudId = useId();\n\n function refreshGrid() {\n autoGridRef.current?.refresh();\n }\n\n function handleCancel() {\n setItem(undefined);\n }\n\n const formHeader = item && item !== emptyItem ? formHeaderRenderer(item, !item) : formHeaderRenderer(null, !item);\n\n const mainSection = (\n <div className=\"auto-crud-main\">\n <AutoGrid\n {...gridProps}\n service={service}\n model={model as DetachedModelConstructor<AbstractModel<Value<TModel>>>}\n itemIdProperty={itemIdProperty}\n selectedItems={item && item !== emptyItem ? [item] : []}\n onActiveItemChanged={(e) => {\n const activeItem = e.detail.value;\n setItem(activeItem ?? undefined);\n }}\n ref={autoGridRef}\n aria-controls={autoFormProps.id ?? `auto-form-${id ?? autoCrudId}`}\n ></AutoGrid>\n {/* As the toolbar only contains the \"New\" button at the moment, and as an empty toolbar\n renders as a half-height bar, let's hide it completely when the button is hidden */}\n {!noNewButton && (\n <div className=\"auto-crud-toolbar\">\n <Button theme=\"primary\" onClick={() => setItem(emptyItem)}>\n + New\n </Button>\n </div>\n )}\n </div>\n );\n\n const autoForm = (\n <AutoForm\n id={autoFormProps.id ?? `auto-form-${id ?? autoCrudId}`}\n deleteButtonVisible={true}\n {...autoFormProps}\n disabled={!item}\n service={service}\n model={model}\n itemIdProperty={itemIdProperty}\n item={item}\n onSubmitSuccess={({ item: submittedItem }) => {\n if (fullScreen) {\n setItem(undefined);\n } else {\n setItem(submittedItem);\n }\n refreshGrid();\n }}\n onDeleteSuccess={() => {\n setItem(undefined);\n refreshGrid();\n }}\n />\n );\n\n // If the \"New\" button is visible, the form is always shown.\n // Otherwise, the form is only shown when an item is being edited.\n return (\n <div className={`auto-crud ${className ?? ''}`} id={id} style={style}>\n {noNewButton && (!item || item === emptyItem) ? (\n mainSection\n ) : fullScreen ? (\n <>\n {mainSection}\n <AutoCrudDialog opened={!!item} header={formHeader} onClose={handleCancel}>\n {autoForm}\n </AutoCrudDialog>\n </>\n ) : (\n <SplitLayout theme=\"small\">\n {mainSection}\n <div className=\"auto-crud-form\">\n <div className=\"auto-crud-form-header\">{formHeader}</div>\n {autoForm}\n </div>\n </SplitLayout>\n )}\n </div>\n );\n}\n"]}
|
|
1
|
+
{"version":3,"file":"autocrud.js","sourceRoot":"","sources":["src/autocrud.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { AbstractModel, DetachedModelConstructor, Value } from '@vaadin/hilla-lit-form';\nimport { Button } from '@vaadin/react-components/Button.js';\nimport { SplitLayout } from '@vaadin/react-components/SplitLayout.js';\nimport { type JSX, type ReactNode, useId, useRef, useState } from 'react';\nimport { AutoCrudDialog } from './autocrud-dialog.js';\nimport css from './autocrud.obj.js';\nimport { type AutoFormProps, emptyItem, AutoForm } from './autoform.js';\nimport { type AutoGridProps, AutoGrid, type AutoGridRef } from './autogrid.js';\nimport type { CrudService } from './crud.js';\nimport { useMediaQuery } from './media-query.js';\nimport { type ComponentStyleProps, registerStylesheet } from './util.js';\n\nregisterStylesheet(css);\n\nexport type AutoCrudFormHeaderRenderer<TItem> = (\n editedItem: TItem | null,\n disabled: boolean,\n) => JSX.Element | null | undefined;\n\nexport type AutoCrudToolbarRenderer = (defaultContent: ReactNode) => ReactNode;\n\nexport type AutoCrudFormProps<TModel extends AbstractModel> = Omit<\n Partial<AutoFormProps<TModel>>,\n 'disabled' | 'item' | 'model' | 'onDeleteSuccess' | 'onSubmitSuccess' | 'service'\n> &\n Readonly<{\n /**\n * A custom renderer function to create the header for the form. The\n * function receives the edited item as the first parameter, and a boolean\n * indicating whether the form is disabled as the second parameter. The\n * edited item is `null` when creating a new item.\n *\n * By default, the header shows \"New item\" when creating a new item, and\n * \"Edit item\" when editing an existing item.\n */\n headerRenderer?: AutoCrudFormHeaderRenderer<Value<TModel>>;\n }>;\n\nexport type AutoCrudGridProps<TItem> = Omit<\n Partial<AutoGridProps<TItem>>,\n 'model' | 'onActiveItemChanged' | 'selectedItems' | 'service'\n>;\n\nexport type AutoCrudProps<TModel extends AbstractModel = AbstractModel> = ComponentStyleProps &\n Readonly<{\n /**\n * The service to use for fetching the data, as well saving and deleting\n * items. This must be a TypeScript service that has been generated by Hilla\n * from a backend Java service that implements the\n * `com.vaadin.hilla.crud.CrudService` interface.\n */\n service: CrudService<Value<TModel>>;\n /**\n * The entity model to use for the CRUD. This determines which columns to\n * show in the grid, and which fields to show in the form. This must be a\n * Typescript model class that has been generated by Hilla from a backend\n * Java class. The model must match with the type of the items returned by\n * the service. For example, a `PersonModel` can be used with a service that\n * returns `Person` instances.\n *\n * By default, the grid shows columns for all properties of the model which\n * have a type that is supported. Use the `gridProps.visibleColumns` option\n * to customize which columns to show and in which order.\n *\n * By default, the form shows fields for all properties of the model which\n * have a type that is supported. Use the `formProps.visibleFields`\n * option to customize which fields to show and in which order.\n */\n model: DetachedModelConstructor<TModel>;\n /**\n * The property to use to detect an item's ID. The item ID is required for\n * deleting items via the `CrudService.delete` method as well as keeping the\n * selection state after reloading the grid.\n *\n * By default, the component uses the property annotated with\n * `jakarta.persistence.Id`, or a property named `id`, in that order.\n * This option can be used to override the default behavior, or define the ID\n * property in case a class doesn't have a property matching the defaults.\n */\n itemIdProperty?: string;\n /**\n * Determines whether to hide the \"New\" button in the toolbar.\n *\n * NOTE: This setting only hides the button; it does not prevent new items\n * from being sent to the service. Ensure your backend Java service is\n * properly secured to prevent unauthorized creation of new items.\n *\n * @defaultValue `false` meaning the button will be shown.\n */\n noNewButton?: boolean;\n /**\n * A custom renderer function to create the toolbar content. The function\n * receives the default toolbar content as a parameter, which can be used\n * or not, depending on the implementation.\n */\n toolbarRenderer?: AutoCrudToolbarRenderer;\n /**\n * Props to pass to the form. See the `AutoForm` component for details.\n */\n formProps?: AutoCrudFormProps<TModel>;\n /**\n * Props to pass to the grid. See the `AutoGrid` component for details.\n */\n gridProps?: AutoCrudGridProps<Value<TModel>>;\n }>;\n\nfunction defaultFormHeaderRenderer<TItem>(editedItem: TItem | null, disabled: boolean): JSX.Element | null | undefined {\n const style = { color: disabled ? 'var(--lumo-disabled-text-color)' : 'var(--lumo-text-color)' };\n return editedItem ? <h3 style={style}>Edit item</h3> : <h3 style={style}>New item</h3>;\n}\n\n/**\n * Auto CRUD is a component that provides CRUD (create, read, update, delete)\n * functionality based on a Java backend service. It automatically generates a\n * grid that shows data from the service, and a form for creating, updating and\n * deleting items.\n *\n * Example usage:\n * ```tsx\n * import { AutoCrud } from '@hilla/react-crud';\n * import PersonService from 'Frontend/generated/endpoints';\n * import PersonModel from 'Frontend/generated/com/example/application/Person';\n *\n * <AutoCrud service={PersonService} model={PersonModel} />\n * ```\n */\nexport function AutoCrud<TModel extends AbstractModel>({\n service,\n model,\n itemIdProperty,\n noNewButton,\n toolbarRenderer = (defaultContent): ReactNode => defaultContent,\n formProps,\n gridProps,\n style,\n id,\n className,\n}: AutoCrudProps<TModel>): JSX.Element {\n const [item, setItem] = useState<Value<TModel> | typeof emptyItem | undefined>(undefined);\n const fullScreen = useMediaQuery('(max-width: 600px), (max-height: 600px)');\n const autoGridRef = useRef<AutoGridRef>(null);\n const { headerRenderer: customFormHeaderRenderer, ...autoFormProps } = formProps ?? {};\n const formHeaderRenderer: AutoCrudFormHeaderRenderer<Value<TModel>> =\n customFormHeaderRenderer ?? defaultFormHeaderRenderer;\n\n const autoCrudId = useId();\n\n function refreshGrid() {\n autoGridRef.current?.refresh();\n }\n\n function handleCancel() {\n setItem(undefined);\n }\n\n const formHeader = item && item !== emptyItem ? formHeaderRenderer(item, !item) : formHeaderRenderer(null, !item);\n\n const toolbarContent = toolbarRenderer(\n noNewButton ? null : (\n <Button theme=\"primary\" onClick={() => setItem(emptyItem)}>\n + New\n </Button>\n ),\n );\n\n const mainSection = (\n <div className=\"auto-crud-main\">\n <AutoGrid\n {...gridProps}\n service={service}\n model={model as DetachedModelConstructor<AbstractModel<Value<TModel>>>}\n itemIdProperty={itemIdProperty}\n selectedItems={item && item !== emptyItem ? [item] : []}\n onActiveItemChanged={(e) => {\n const activeItem = e.detail.value;\n setItem(activeItem ?? undefined);\n }}\n ref={autoGridRef}\n aria-controls={autoFormProps.id ?? `auto-form-${id ?? autoCrudId}`}\n ></AutoGrid>\n {toolbarContent && <div className=\"auto-crud-toolbar\">{toolbarContent}</div>}\n </div>\n );\n\n const autoForm = (\n <AutoForm\n id={autoFormProps.id ?? `auto-form-${id ?? autoCrudId}`}\n deleteButtonVisible={true}\n {...autoFormProps}\n disabled={!item}\n service={service}\n model={model}\n itemIdProperty={itemIdProperty}\n item={item}\n onSubmitSuccess={({ item: submittedItem }) => {\n if (fullScreen) {\n setItem(undefined);\n } else {\n setItem(submittedItem);\n }\n refreshGrid();\n }}\n onDeleteSuccess={() => {\n setItem(undefined);\n refreshGrid();\n }}\n />\n );\n\n // If the \"New\" button is visible, the form is always shown.\n // Otherwise, the form is only shown when an item is being edited.\n return (\n <div className={`auto-crud ${className ?? ''}`} id={id} style={style}>\n {fullScreen ? (\n <>\n {mainSection}\n <AutoCrudDialog opened={!!item} header={formHeader} onClose={handleCancel}>\n {autoForm}\n </AutoCrudDialog>\n </>\n ) : (\n <SplitLayout theme=\"small\">\n {mainSection}\n {(!noNewButton || (item && item !== emptyItem)) && (\n <div className=\"auto-crud-form\">\n <div className=\"auto-crud-form-header\">{formHeader}</div>\n {autoForm}\n </div>\n )}\n </SplitLayout>\n )}\n </div>\n );\n}\n"]}
|
package/autocrud.obj.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
const css = new CSSStyleSheet();css.replaceSync(`.auto-crud{border:1px solid var(--lumo-contrast-20pct);display:flex;height:462px;overflow:hidden}.auto-crud>vaadin-split-layout{align-items:stretch;flex:1 1 100%}.auto-crud>vaadin-split-layout::part(splitter){border-left:1px solid var(--lumo-contrast-20pct);border-top:1px solid var(--lumo-contrast-20pct)}.auto-crud-main{display:flex;flex:1 1 100%;flex-direction:column;min-width:200px}.auto-crud-main>vaadin-grid{border:none;height:auto}.auto-crud-toolbar{align-items:baseline;background-color:var(--lumo-contrast-5pct);border-top:1px solid var(--lumo-contrast-10pct);display:flex;flex-shrink:0;justify-content:flex-end;padding:var(--lumo-space-s) var(--lumo-space-m)}.auto-crud-form{align-items:stretch;display:flex;flex-direction:column;min-width:300px;width:40%}.auto-crud .auto-crud-form:before{box-shadow:var(--lumo-box-shadow-s);content:"";height:100%;pointer-events:none;position:absolute;width:100%;z-index:1}.auto-crud-form-header{padding:var(--lumo-space-m) var(--lumo-space-m) var(--lumo-space-s) var(--lumo-space-m)}.auto-crud .auto-form,.auto-crud-dialog .auto-form{align-items:stretch;display:flex;flex:1 1 0;flex-direction:column}.auto-crud .auto-form-fields,.auto-crud-dialog .auto-form-fields{flex:1 1 0;min-height:0;overflow-y:auto;padding:0 var(--lumo-space-m)}.auto-crud .auto-form-toolbar,.auto-crud-dialog .auto-form-toolbar{background-color:var(--lumo-contrast-5pct);border-top:1px solid var(--lumo-contrast-10pct);flex:0 0 auto;padding:var(--lumo-space-s) var(--lumo-space-m)}.auto-crud-dialog{
|
|
1
|
+
const css = new CSSStyleSheet();css.replaceSync(`.auto-crud{border:1px solid var(--lumo-contrast-20pct);display:flex;height:462px;overflow:hidden;position:relative}.auto-crud>vaadin-split-layout{align-items:stretch;flex:1 1 100%;max-width:100%}.auto-crud>vaadin-split-layout::part(splitter){border-left:1px solid var(--lumo-contrast-20pct);border-top:1px solid var(--lumo-contrast-20pct)}.auto-crud-main{display:flex;flex:1 1 100%;flex-direction:column;min-width:200px}.auto-crud-main>vaadin-grid{border:none;height:auto}.auto-crud-toolbar{align-items:baseline;background-color:var(--lumo-contrast-5pct);border-top:1px solid var(--lumo-contrast-10pct);display:flex;flex-shrink:0;justify-content:flex-end;padding:var(--lumo-space-s) var(--lumo-space-m)}.auto-crud-form{align-items:stretch;display:flex;flex-direction:column;min-width:300px;width:40%}.auto-crud .auto-crud-form:before{box-shadow:var(--lumo-box-shadow-s);content:"";height:100%;pointer-events:none;position:absolute;width:100%;z-index:1}.auto-crud-form-header{padding:var(--lumo-space-m) var(--lumo-space-m) var(--lumo-space-s) var(--lumo-space-m)}.auto-crud .auto-form,.auto-crud-dialog .auto-form{align-items:stretch;display:flex;flex:1 1 0;flex-direction:column}.auto-crud .auto-form-fields,.auto-crud-dialog .auto-form-fields{flex:1 1 0;min-height:0;overflow-y:auto;padding:0 var(--lumo-space-m)}.auto-crud .auto-form-toolbar,.auto-crud-dialog .auto-form-toolbar{background-color:var(--lumo-contrast-5pct);border-top:1px solid var(--lumo-contrast-10pct);flex:0 0 auto;padding:var(--lumo-space-s) var(--lumo-space-m)}.auto-crud-dialog{--vaadin-overlay-viewport-inset:0}.auto-crud-dialog::part(overlay){border-radius:0;height:100%;width:100%}.auto-crud-dialog::part(content){padding:0}.auto-crud-dialog .auto-crud-dialog-header{align-items:center;display:flex;justify-content:space-between;width:100%}.auto-crud-dialog .auto-form{height:100%;width:100%}`);export default css;
|
package/autogrid.obj.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
const css = new CSSStyleSheet();css.replaceSync(`.auto-grid-comparation-selection{--vaadin-field-default-width:2em}.auto-grid-comparation-selection>vaadin-select-value-button{--_lumo-text-field-overflow-mask-image:none!important;color:var(--lumo-secondary-text-color)}.auto-grid-comparation-selection::part(toggle-button){display:none}.auto-grid-string-filter{display:flex}.auto-grid-string-filter vaadin-text-field{flex:1 1 0;width:100px}.auto-grid-boolean-filter{display:flex}.auto-grid-boolean-filter vaadin-select{flex:1 1 0;width:80px}.auto-grid-boolean-filter vaadin-select-
|
|
1
|
+
const css = new CSSStyleSheet();css.replaceSync(`.auto-grid-comparation-selection{--vaadin-field-default-width:2em}.auto-grid-comparation-selection>vaadin-select-value-button{--_lumo-text-field-overflow-mask-image:none!important;color:var(--lumo-secondary-text-color)}.auto-grid-comparation-selection::part(toggle-button){display:none}.auto-grid-string-filter{display:flex}.auto-grid-string-filter vaadin-text-field{flex:1 1 0;width:100px}.auto-grid-boolean-filter{display:flex}.auto-grid-boolean-filter vaadin-select{flex:1 1 0;width:80px}.auto-grid-boolean-filter vaadin-select-value-button{font-size:14px}.auto-grid-number-filter{display:flex}.auto-grid-number-filter vaadin-number-field{flex:1 1 0;width:100px}.auto-grid-number-filter vaadin-select::part(input-field){border-bottom-right-radius:0;border-top-right-radius:0}.auto-grid-number-filter vaadin-number-field::part(input-field){border-bottom-left-radius:0;border-top-left-radius:0}.auto-grid-enum-filter{display:flex}.auto-grid-enum-filter vaadin-select{flex:1 1 0;width:120px}.auto-grid-enum-filter vaadin-select-value-button{font-size:14px}.auto-grid-date-filter{display:flex}.auto-grid-date-filter vaadin-date-picker{flex:1 1 0;width:120px}.auto-grid-date-filter vaadin-select::part(input-field){border-bottom-right-radius:0;border-top-right-radius:0}.auto-grid-date-filter vaadin-date-picker::part(input-field){border-bottom-left-radius:0;border-top-left-radius:0}.auto-grid-time-filter{display:flex}.auto-grid-time-filter vaadin-time-picker{flex:1 1 0;width:100px}.auto-grid-time-filter vaadin-select::part(input-field){border-bottom-right-radius:0;border-top-right-radius:0}.auto-grid-time-filter vaadin-time-picker::part(input-field){border-bottom-left-radius:0;border-top-left-radius:0}`);export default css;
|
package/index.js
CHANGED
|
@@ -6,7 +6,7 @@ export { useDataProvider, useGridDataProvider, useComboBoxDataProvider } from '.
|
|
|
6
6
|
vaadinObj.registrations ??= [];
|
|
7
7
|
vaadinObj.registrations.push({
|
|
8
8
|
is: feature ? `@vaadin/hilla-react-crud/${feature}` : '@vaadin/hilla-react-crud',
|
|
9
|
-
version: '
|
|
9
|
+
version: '25.0.0-alpha10',
|
|
10
10
|
});
|
|
11
11
|
})();
|
|
12
12
|
//# sourceMappingURL=index.js.map
|
package/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["src/index.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAC;AAEtC,cAAc,uBAAuB,CAAC;AACtC,cAAc,uBAAuB,CAAC;AACtC,OAAO,EAAE,eAAe,EAAE,mBAAmB,EAAE,uBAAuB,EAAE,MAAM,oBAAoB,CAAC;AAInG,CAAC,CAAC,OAAO,EAAE,SAAS,GAAG,CAAC,UAAU,CAAC,MAAM,KAAK,EAAE,CAAC,EAAE,EAAE;IACnD,SAAS,CAAC,aAAa,KAAK,EAAE,CAAC;IAC/B,SAAS,CAAC,aAAa,CAAC,IAAI,CAAC;QAC3B,EAAE,EAAE,OAAO,CAAC,CAAC,CAAC,4BAA4B,OAAO,EAAE,CAAC,CAAC,CAAC,0BAA0B;QAChF,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["src/index.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAC;AAEtC,cAAc,uBAAuB,CAAC;AACtC,cAAc,uBAAuB,CAAC;AACtC,OAAO,EAAE,eAAe,EAAE,mBAAmB,EAAE,uBAAuB,EAAE,MAAM,oBAAoB,CAAC;AAInG,CAAC,CAAC,OAAO,EAAE,SAAS,GAAG,CAAC,UAAU,CAAC,MAAM,KAAK,EAAE,CAAC,EAAE,EAAE;IACnD,SAAS,CAAC,aAAa,KAAK,EAAE,CAAC;IAC/B,SAAS,CAAC,aAAa,CAAC,IAAI,CAAC;QAC3B,EAAE,EAAE,OAAO,CAAC,CAAC,CAAC,4BAA4B,OAAO,EAAE,CAAC,CAAC,CAAC,0BAA0B;QAChF,OAAO,EAAE,gBAAgB;KAC1B,CAAC,CAAC;AACL,CAAC,CAAC,EAAE,CAAC","sourcesContent":["export * from './autogrid-feature.js';\nexport type * from './crud.js';\nexport * from './autoform-feature.js';\nexport * from './autocrud-feature.js';\nexport { useDataProvider, useGridDataProvider, useComboBoxDataProvider } from './data-provider.js';\n\n// @ts-expect-error: esbuild injection\n// eslint-disable-next-line @typescript-eslint/no-unsafe-call\n((feature, vaadinObj = (globalThis.Vaadin ??= {})) => {\n vaadinObj.registrations ??= [];\n vaadinObj.registrations.push({\n is: feature ? `@vaadin/hilla-react-crud/${feature}` : '@vaadin/hilla-react-crud',\n version: '25.0.0-alpha10',\n });\n})();\n"]}
|
package/locale.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import {
|
|
1
|
+
import type { DatePickerDate, DatePickerI18n } from '@vaadin/react-components/DatePicker.js';
|
|
2
|
+
import type { DateTimePickerI18n } from '@vaadin/react-components/DateTimePicker.js';
|
|
3
3
|
import type { SetRequired } from 'type-fest';
|
|
4
4
|
export declare const LocaleContext: import("react").Context<string>;
|
|
5
5
|
export declare class LocaleFormatter {
|
package/locale.js
CHANGED
|
@@ -1,5 +1,3 @@
|
|
|
1
|
-
import { DatePickerElement } from '@vaadin/react-components/DatePicker.js';
|
|
2
|
-
import { DateTimePickerElement } from '@vaadin/react-components/DateTimePicker.js';
|
|
3
1
|
import { createContext, useContext, useMemo } from 'react';
|
|
4
2
|
export const LocaleContext = createContext(navigator.language);
|
|
5
3
|
function getFormatRegex(format) {
|
|
@@ -88,11 +86,9 @@ export function useLocaleFormatter() {
|
|
|
88
86
|
const locale = useContext(LocaleContext);
|
|
89
87
|
return useMemo(() => new LocaleFormatter(locale), [locale]);
|
|
90
88
|
}
|
|
91
|
-
const defaultDatePickerI18n = new DatePickerElement().i18n;
|
|
92
89
|
export function useDatePickerI18n() {
|
|
93
90
|
const formatter = useLocaleFormatter();
|
|
94
91
|
return useMemo(() => ({
|
|
95
|
-
...defaultDatePickerI18n,
|
|
96
92
|
formatDate(value) {
|
|
97
93
|
return formatter.formatDate(value);
|
|
98
94
|
},
|
|
@@ -101,12 +97,7 @@ export function useDatePickerI18n() {
|
|
|
101
97
|
},
|
|
102
98
|
}), [formatter]);
|
|
103
99
|
}
|
|
104
|
-
const defaultDateTimePickerI18n = new DateTimePickerElement().i18n;
|
|
105
100
|
export function useDateTimePickerI18n() {
|
|
106
|
-
|
|
107
|
-
return useMemo(() => ({
|
|
108
|
-
...defaultDateTimePickerI18n,
|
|
109
|
-
...datePickerI18n,
|
|
110
|
-
}), [datePickerI18n]);
|
|
101
|
+
return useDatePickerI18n();
|
|
111
102
|
}
|
|
112
103
|
//# sourceMappingURL=locale.js.map
|
package/locale.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"locale.js","sourceRoot":"","sources":["src/locale.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"locale.js","sourceRoot":"","sources":["src/locale.ts"],"names":[],"mappings":"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","sourcesContent":["import type { DatePickerDate, DatePickerI18n } from '@vaadin/react-components/DatePicker.js';\nimport type { DateTimePickerI18n } from '@vaadin/react-components/DateTimePicker.js';\nimport { createContext, useContext, useMemo } from 'react';\nimport type { SetRequired } from 'type-fest';\n\nexport const LocaleContext = createContext(navigator.language);\n\nfunction getFormatRegex(format: Intl.DateTimeFormat) {\n const sampleDate = new Date(1234, 5 - 1, 6);\n const formattedSample = format.format(sampleDate);\n const pattern = formattedSample\n .replace('1234', '(?<year>\\\\d+)')\n .replace('05', '(?<month>\\\\d+)')\n .replace('5', '(?<month>\\\\d+)')\n .replace('06', '(?<day>\\\\d+)')\n .replace('6', '(?<day>\\\\d+)');\n\n return new RegExp(pattern, 'u');\n}\n\nfunction tryFormatDate(formatter: Intl.DateTimeFormat, value?: string): string {\n try {\n return value ? formatter.format(new Date(value)) : '';\n } catch {\n return '';\n }\n}\n\nexport class LocaleFormatter {\n readonly #date: Intl.DateTimeFormat;\n readonly #localTime: Intl.DateTimeFormat;\n readonly #localDateTime: Intl.DateTimeFormat;\n readonly #integer: Intl.NumberFormat;\n readonly #decimal: Intl.NumberFormat;\n readonly #parsePattern: RegExp;\n\n constructor(locale?: string) {\n this.#date = new Intl.DateTimeFormat(locale);\n\n this.#localTime = new Intl.DateTimeFormat(locale, {\n hour: 'numeric',\n minute: 'numeric',\n });\n\n this.#localDateTime = new Intl.DateTimeFormat(locale, {\n day: 'numeric',\n month: 'numeric',\n year: 'numeric',\n hour: 'numeric',\n minute: 'numeric',\n });\n\n this.#integer = new Intl.NumberFormat(locale, {\n maximumFractionDigits: 0,\n });\n\n this.#decimal = new Intl.NumberFormat(locale, {\n maximumFractionDigits: 2,\n minimumFractionDigits: 2,\n });\n\n this.#parsePattern = getFormatRegex(this.#date);\n }\n\n formatDate(value?: string): string;\n formatDate(value: DatePickerDate): string;\n formatDate(value?: DatePickerDate | string): string {\n if (typeof value === 'object') {\n const { year, month, day } = value;\n const date = new Date();\n date.setFullYear(year, month, day);\n return this.#date.format(date);\n }\n\n return tryFormatDate(this.#date, value);\n }\n\n formatLocalTime(value?: string): string {\n return tryFormatDate(this.#localTime, `2000-01-01T${value}`);\n }\n\n formatLocalDateTime(value?: string): string {\n return tryFormatDate(this.#localDateTime, value);\n }\n\n formatInteger(value?: number): string {\n return Number.isFinite(value) ? this.#integer.format(value!) : '';\n }\n\n formatDecimal(value?: number): string {\n return Number.isFinite(value) ? this.#decimal.format(value!) : '';\n }\n\n parse(dateString: string): DatePickerDate | undefined {\n const match = this.#parsePattern.exec(dateString);\n const year = Number(match?.groups?.year);\n const month = Number(match?.groups?.month) - 1;\n const day = Number(match?.groups?.day);\n\n // Verify that the parsed date is valid\n const dateInstance = new Date();\n dateInstance.setFullYear(year, month, day);\n\n if (dateInstance.getFullYear() !== year || dateInstance.getMonth() !== month || dateInstance.getDate() !== day) {\n return undefined;\n }\n\n return { year, month, day };\n }\n}\n\nexport function useLocaleFormatter(): LocaleFormatter {\n const locale = useContext(LocaleContext);\n return useMemo(() => new LocaleFormatter(locale), [locale]);\n}\n\nexport function useDatePickerI18n(): SetRequired<DatePickerI18n, 'formatDate' | 'parseDate'> {\n const formatter = useLocaleFormatter();\n\n return useMemo(\n () => ({\n formatDate(value) {\n return formatter.formatDate(value);\n },\n parseDate(value) {\n return formatter.parse(value);\n },\n }),\n [formatter],\n );\n}\n\nexport function useDateTimePickerI18n(): DateTimePickerI18n {\n return useDatePickerI18n();\n}\n"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vaadin/hilla-react-crud",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "25.0.0-alpha10",
|
|
4
4
|
"description": "Hilla CRUD utils for React",
|
|
5
5
|
"main": "index.js",
|
|
6
6
|
"module": "index.js",
|
|
@@ -54,11 +54,11 @@
|
|
|
54
54
|
"access": "public"
|
|
55
55
|
},
|
|
56
56
|
"dependencies": {
|
|
57
|
-
"@vaadin/hilla-frontend": "
|
|
58
|
-
"@vaadin/hilla-lit-form": "
|
|
59
|
-
"@vaadin/hilla-react-form": "
|
|
60
|
-
"@vaadin/vaadin-lumo-styles": "
|
|
61
|
-
"@vaadin/react-components": "
|
|
57
|
+
"@vaadin/hilla-frontend": "25.0.0-alpha10",
|
|
58
|
+
"@vaadin/hilla-lit-form": "25.0.0-alpha10",
|
|
59
|
+
"@vaadin/hilla-react-form": "25.0.0-alpha10",
|
|
60
|
+
"@vaadin/vaadin-lumo-styles": "25.0.0-alpha21",
|
|
61
|
+
"@vaadin/react-components": "25.0.0-alpha21",
|
|
62
62
|
"type-fest": "4.35.0"
|
|
63
63
|
},
|
|
64
64
|
"peerDependencies": {
|
package/util.js
CHANGED
|
@@ -24,7 +24,7 @@ function useFeatureRegistration(feature) {
|
|
|
24
24
|
vaadinObj.registrations ??= [];
|
|
25
25
|
vaadinObj.registrations.push({
|
|
26
26
|
is: feature ? `@vaadin/hilla-react-crud/${feature}` : '@vaadin/hilla-react-crud',
|
|
27
|
-
version: '
|
|
27
|
+
version: '25.0.0-alpha10',
|
|
28
28
|
});
|
|
29
29
|
})(feature);
|
|
30
30
|
}
|
package/util.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"util.js","sourceRoot":"","sources":["src/util.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,EAAE,EAAsB,UAAU,EAAE,MAAM,OAAO,CAAC;AAS9D,MAAM,UAAU,kBAAkB,CAAC,WAAmB;IAEpD,MAAM,gBAAgB,GAAG,WAAW,CAAC,OAAO,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC;IAGzD,MAAM,KAAK,GAAG,gBAAgB,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;IAC1C,MAAM,cAAc,GAAG,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,CAAC,CAAC;IAGvG,OAAO,cAAc,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;AAClC,CAAC;AAED,MAAM,UAAU,kBAAkB,CAAC,UAAyB;IAC1D,MAAM,GAAG,GAAG,KAAK,CAAC,IAAI,CAAC,UAAU,CAAC,QAAQ,CAAC;SACxC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,OAAO,CAAC;SAC3B,IAAI,CAAC,IAAI,CAAC,CAAC;IAEd,MAAM,QAAQ,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;IACjD,QAAQ,CAAC,WAAW,GAAG,GAAG,CAAC;IAC3B,QAAQ,CAAC,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC;AAClC,CAAC;AAED,MAAM,kBAAkB,GAAG,IAAI,GAAG,EAAU,CAAC;AAC7C,SAAS,sBAAsB,CAAC,OAAe;IAC7C,IAAI,kBAAkB,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE,CAAC;QACpC,OAAO;IACT,CAAC;IAED,kBAAkB,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC;IAGhC,CAAC,CAAC,OAAO,EAAE,SAAS,GAAG,CAAC,UAAU,CAAC,MAAM,KAAK,EAAE,CAAC,EAAE,EAAE;QACrD,SAAS,CAAC,aAAa,KAAK,EAAE,CAAC;QAC/B,SAAS,CAAC,aAAa,CAAC,IAAI,CAAC;YAC3B,EAAE,EAAE,OAAO,CAAC,CAAC,CAAC,4BAA4B,OAAO,EAAE,CAAC,CAAC,CAAC,0BAA0B;YAChF,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"util.js","sourceRoot":"","sources":["src/util.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { type CSSProperties, forwardRef } from 'react';\nimport type FilterUnion from './types/com/vaadin/hilla/crud/filter/FilterUnion.js';\n\nexport type ComponentStyleProps = Readonly<{\n id?: string;\n style?: CSSProperties;\n className?: string;\n}>;\n\nexport function convertToTitleCase(inputString: string): string {\n // Convert underscores to spaces\n const stringWithSpaces = inputString.replace(/_/gu, ' ');\n\n // Convert to title case\n const words = stringWithSpaces.split(' ');\n const titleCaseWords = words.map((word) => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase());\n\n // Join the title case words with spaces\n return titleCaseWords.join(' ');\n}\n\nexport function registerStylesheet(stylesheet: CSSStyleSheet): void {\n const css = Array.from(stylesheet.cssRules)\n .map((rule) => rule.cssText)\n .join('\\n');\n\n const styleTag = document.createElement('style');\n styleTag.textContent = css;\n document.head.prepend(styleTag);\n}\n\nconst registeredFeatures = new Set<string>();\nfunction useFeatureRegistration(feature: string): void {\n if (registeredFeatures.has(feature)) {\n return;\n }\n\n registeredFeatures.add(feature);\n // @ts-expect-error: esbuild injection\n // eslint-disable-next-line @typescript-eslint/no-unsafe-call\n ((feature, vaadinObj = (globalThis.Vaadin ??= {})) => {\n vaadinObj.registrations ??= [];\n vaadinObj.registrations.push({\n is: feature ? `@vaadin/hilla-react-crud/${feature}` : '@vaadin/hilla-react-crud',\n version: '25.0.0-alpha10',\n });\n})(feature);\n}\n\nexport function featureRegistration<C extends (...args: any[]) => any>(Component: C, feature: string): C {\n return forwardRef<unknown, React.JSX.LibraryManagedAttributes<C, NonNullable<unknown>>>((props, ref) => {\n useFeatureRegistration(feature);\n return <Component {...(props as any)} ref={ref} />;\n }) as unknown as C;\n}\n\nexport function isFilterEmpty(filter: FilterUnion): boolean {\n if (filter['@type'] === 'and' || filter['@type'] === 'or') {\n if (filter.children.length === 0) {\n return true;\n }\n return filter.children.every((child) => isFilterEmpty(child as FilterUnion));\n }\n if ('filterValue' in filter) {\n return filter.filterValue === '';\n }\n throw new Error(`Unknown filter type: ${'@type' in filter ? filter['@type'] : JSON.stringify(filter)} `);\n}\n"]}
|