@vaadin/crud 24.8.0-alpha2 → 24.8.0-alpha4
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/package.json +16 -16
- package/src/vaadin-crud-mixin.d.ts +22 -22
- package/web-types.json +15 -6
- package/web-types.lit.json +4 -4
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vaadin/crud",
|
|
3
|
-
"version": "24.8.0-
|
|
3
|
+
"version": "24.8.0-alpha4",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -37,23 +37,23 @@
|
|
|
37
37
|
"dependencies": {
|
|
38
38
|
"@open-wc/dedupe-mixin": "^1.3.0",
|
|
39
39
|
"@polymer/polymer": "^3.0.0",
|
|
40
|
-
"@vaadin/a11y-base": "24.8.0-
|
|
41
|
-
"@vaadin/button": "24.8.0-
|
|
42
|
-
"@vaadin/component-base": "24.8.0-
|
|
43
|
-
"@vaadin/confirm-dialog": "24.8.0-
|
|
44
|
-
"@vaadin/dialog": "24.8.0-
|
|
45
|
-
"@vaadin/form-layout": "24.8.0-
|
|
46
|
-
"@vaadin/grid": "24.8.0-
|
|
47
|
-
"@vaadin/overlay": "24.8.0-
|
|
48
|
-
"@vaadin/text-field": "24.8.0-
|
|
49
|
-
"@vaadin/vaadin-lumo-styles": "24.8.0-
|
|
50
|
-
"@vaadin/vaadin-material-styles": "24.8.0-
|
|
51
|
-
"@vaadin/vaadin-themable-mixin": "24.8.0-
|
|
40
|
+
"@vaadin/a11y-base": "24.8.0-alpha4",
|
|
41
|
+
"@vaadin/button": "24.8.0-alpha4",
|
|
42
|
+
"@vaadin/component-base": "24.8.0-alpha4",
|
|
43
|
+
"@vaadin/confirm-dialog": "24.8.0-alpha4",
|
|
44
|
+
"@vaadin/dialog": "24.8.0-alpha4",
|
|
45
|
+
"@vaadin/form-layout": "24.8.0-alpha4",
|
|
46
|
+
"@vaadin/grid": "24.8.0-alpha4",
|
|
47
|
+
"@vaadin/overlay": "24.8.0-alpha4",
|
|
48
|
+
"@vaadin/text-field": "24.8.0-alpha4",
|
|
49
|
+
"@vaadin/vaadin-lumo-styles": "24.8.0-alpha4",
|
|
50
|
+
"@vaadin/vaadin-material-styles": "24.8.0-alpha4",
|
|
51
|
+
"@vaadin/vaadin-themable-mixin": "24.8.0-alpha4",
|
|
52
52
|
"lit": "^3.0.0"
|
|
53
53
|
},
|
|
54
54
|
"devDependencies": {
|
|
55
|
-
"@vaadin/chai-plugins": "24.8.0-
|
|
56
|
-
"@vaadin/test-runner-commands": "24.8.0-
|
|
55
|
+
"@vaadin/chai-plugins": "24.8.0-alpha4",
|
|
56
|
+
"@vaadin/test-runner-commands": "24.8.0-alpha4",
|
|
57
57
|
"@vaadin/testing-helpers": "^1.1.0",
|
|
58
58
|
"sinon": "^18.0.0"
|
|
59
59
|
},
|
|
@@ -62,5 +62,5 @@
|
|
|
62
62
|
"web-types.json",
|
|
63
63
|
"web-types.lit.json"
|
|
64
64
|
],
|
|
65
|
-
"gitHead": "
|
|
65
|
+
"gitHead": "88251b4c84ebb8849dde982acb62cc2b20eeec31"
|
|
66
66
|
}
|
|
@@ -9,7 +9,7 @@
|
|
|
9
9
|
* license.
|
|
10
10
|
*/
|
|
11
11
|
import type { Constructor } from '@open-wc/dedupe-mixin';
|
|
12
|
-
import type { I18nMixinClass
|
|
12
|
+
import type { I18nMixinClass } from '@vaadin/component-base/src/i18n-mixin.js';
|
|
13
13
|
import type { GridFilterDefinition, GridSorterDefinition } from '@vaadin/grid/src/vaadin-grid.js';
|
|
14
14
|
|
|
15
15
|
export type CrudDataProviderCallback<T> = (items: T[], size?: number) => void;
|
|
@@ -25,32 +25,32 @@ export type CrudDataProvider<T> = (params: CrudDataProviderParams, callback: Cru
|
|
|
25
25
|
|
|
26
26
|
export type CrudEditorPosition = '' | 'aside' | 'bottom';
|
|
27
27
|
|
|
28
|
-
export
|
|
29
|
-
newItem
|
|
30
|
-
editItem
|
|
31
|
-
saveItem
|
|
32
|
-
cancel
|
|
33
|
-
deleteItem
|
|
34
|
-
editLabel
|
|
35
|
-
confirm
|
|
36
|
-
delete
|
|
37
|
-
title
|
|
38
|
-
content
|
|
39
|
-
button
|
|
40
|
-
confirm
|
|
41
|
-
dismiss
|
|
28
|
+
export interface CrudI18n {
|
|
29
|
+
newItem?: string;
|
|
30
|
+
editItem?: string;
|
|
31
|
+
saveItem?: string;
|
|
32
|
+
cancel?: string;
|
|
33
|
+
deleteItem?: string;
|
|
34
|
+
editLabel?: string;
|
|
35
|
+
confirm?: {
|
|
36
|
+
delete?: {
|
|
37
|
+
title?: string;
|
|
38
|
+
content?: string;
|
|
39
|
+
button?: {
|
|
40
|
+
confirm?: string;
|
|
41
|
+
dismiss?: string;
|
|
42
42
|
};
|
|
43
43
|
};
|
|
44
|
-
cancel
|
|
45
|
-
title
|
|
46
|
-
content
|
|
47
|
-
button
|
|
48
|
-
confirm
|
|
49
|
-
dismiss
|
|
44
|
+
cancel?: {
|
|
45
|
+
title?: string;
|
|
46
|
+
content?: string;
|
|
47
|
+
button?: {
|
|
48
|
+
confirm?: string;
|
|
49
|
+
dismiss?: string;
|
|
50
50
|
};
|
|
51
51
|
};
|
|
52
52
|
};
|
|
53
|
-
}
|
|
53
|
+
}
|
|
54
54
|
|
|
55
55
|
/**
|
|
56
56
|
* Fired when the `editorOpened` property changes.
|
package/web-types.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"$schema": "https://json.schemastore.org/web-types",
|
|
3
3
|
"name": "@vaadin/crud",
|
|
4
|
-
"version": "24.8.0-
|
|
4
|
+
"version": "24.8.0-alpha4",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"contributions": {
|
|
7
7
|
"html": {
|
|
@@ -357,8 +357,17 @@
|
|
|
357
357
|
},
|
|
358
358
|
{
|
|
359
359
|
"name": "vaadin-crud",
|
|
360
|
-
"description": "`<vaadin-crud>` is a Web Component for [CRUD](https://en.wikipedia.org/wiki/Create,_read,_update_and_delete) operations.\n\n### Quick Start\n\nAssign an array to the [`items`](https://cdn.vaadin.com/vaadin-web-components/24.8.0-
|
|
360
|
+
"description": "`<vaadin-crud>` is a Web Component for [CRUD](https://en.wikipedia.org/wiki/Create,_read,_update_and_delete) operations.\n\n### Quick Start\n\nAssign an array to the [`items`](https://cdn.vaadin.com/vaadin-web-components/24.8.0-alpha4/#/elements/vaadin-crud#property-items) property.\n\nA grid and an editor will be automatically generated and configured based on the data structure provided.\n\n```html\n<vaadin-crud></vaadin-crud>\n```\n```js\nconst crud = document.querySelector('vaadin-crud');\n\ncrud.items = [\n { name: 'John', surname: 'Lennon', role: 'singer' },\n { name: 'Ringo', surname: 'Starr', role: 'drums' },\n // ... more items\n];\n```\n\n### Data Provider Function\n\nOtherwise, you can provide a [`dataProvider`](https://cdn.vaadin.com/vaadin-web-components/24.8.0-alpha4/#/elements/vaadin-crud#property-dataProvider) function.\n\n```js\nconst crud = document.querySelector('vaadin-crud');\n\nconst users = [\n { name: 'John', surname: 'Lennon', role: 'singer' },\n { name: 'Ringo', surname: 'Starr', role: 'drums' },\n // ... more items\n];\n\ncrud.dataProvider = (params, callback) => {\n const chunk = users.slice(params.page * params.pageSize, params.page * params.pageSize + params.pageSize);\n callback(chunk, people.length);\n};\n```\n\nNOTE: The auto-generated editor only supports string types. If you need to handle special cases\ncustomizing the editor is discussed below.\n\n### Customization\n\nAlternatively you can fully configure the component by using `slot` names.\n\nSlot name | Description\n---------------|----------------\n`grid` | To replace the auto-generated grid with a custom one.\n`form` | To replace the auto-generated form.\n`save-button` | To replace the \"Save\" button.\n`cancel-button`| To replace the \"Cancel\" button.\n`delete-button`| To replace the \"Delete\" button.\n`toolbar` | To provide the toolbar content (by default, it's empty).\n`new-button` | To replace the \"New item\" button.\n\n#### Example:\n\n```html\n<vaadin-crud id=\"crud\">\n <vaadin-grid slot=\"grid\">\n <vaadin-crud-edit-column></vaadin-crud-edit-column>\n <vaadin-grid-column id=\"column1\"></vaadin-grid-column>\n <vaadin-grid-column id=\"column2\"></vaadin-grid-column>\n </vaadin-grid>\n\n <vaadin-form-layout slot=\"form\">\n <vaadin-text-field label=\"First\" path=\"name\"></vaadin-text-field>\n <vaadin-text-field label=\"Surname\" path=\"surname\"></vaadin-text-field>\n </vaadin-form-layout>\n\n <div slot=\"toolbar\">Total singers: 2</div>\n <button slot=\"new-button\">New singer</button>\n\n <button slot=\"save-button\">Save changes</button>\n <button slot=\"cancel-button\">Discard changes</button>\n <button slot=\"delete-button\">Delete singer</button>\n</vaadin-crud>\n```\n```js\nconst crud = document.querySelector('#crud');\n\nconst column1 = document.querySelector('#column1');\ncolumn1.headerRenderer = (root, column) => {\n root.textContent = 'Name';\n};\ncolumn1.renderer = (root, column, model) => {\n root.textContent = model.item.name;\n};\n\nconst column2 = document.querySelector('#column2');\ncolumn2.headerRenderer = (root, column) => {\n root.textContent = 'Surname';\n};\ncolumn2.renderer = (root, column, model) => {\n root.textContent = model.item.surname;\n};\n\ncrud.items = [\n { name: 'John', surname: 'Lennon', role: 'singer' },\n { name: 'Ringo', surname: 'Starr', role: 'drums' },\n // ... more items\n];\n```\n\n### Helpers\n\nThe following elements are used to auto-configure the grid and the editor\n- [`<vaadin-crud-edit-column>`](https://cdn.vaadin.com/vaadin-web-components/24.8.0-alpha4/#/elements/vaadin-crud-edit-column)\n- `<vaadin-crud-grid>` - can be replaced with custom [`<vaadin-grid>`](https://cdn.vaadin.com/vaadin-web-components/24.8.0-alpha4/#/elements/vaadin-grid)\n- `<vaadin-crud-form>` - can be replaced with custom [`<vaadin-form-layout>`](https://cdn.vaadin.com/vaadin-web-components/24.8.0-alpha4/#/elements/vaadin-form-layout)\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n----------------|----------------\n`toolbar` | Toolbar container at the bottom. By default it contains the the `new` button\n\nThe following custom properties are available:\n\nCustom Property | Description | Default\n----------------|----------------\n--vaadin-crud-editor-max-height | max height of editor when opened on the bottom | 40%\n--vaadin-crud-editor-max-width | max width of editor when opened on the side | 40%\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
|
|
361
361
|
"attributes": [
|
|
362
|
+
{
|
|
363
|
+
"name": "i18n",
|
|
364
|
+
"description": "The object used to localize this component. To change the default\nlocalization, replace this with an object that provides all properties, or\njust the individual properties you want to change.\n\nShould be overridden by subclasses to provide a custom JSDoc with the\ndefault I18N properties.",
|
|
365
|
+
"value": {
|
|
366
|
+
"type": [
|
|
367
|
+
"Object"
|
|
368
|
+
]
|
|
369
|
+
}
|
|
370
|
+
},
|
|
362
371
|
{
|
|
363
372
|
"name": "editor-position",
|
|
364
373
|
"description": "Sets how editor will be presented on desktop screen.\n\nAccepted values are:\n - `` (default) - form will open as overlay\n - `bottom` - form will open below the grid\n - `aside` - form will open on the grid side (_right_, if lft and _left_ if rtl)",
|
|
@@ -412,7 +421,7 @@
|
|
|
412
421
|
},
|
|
413
422
|
{
|
|
414
423
|
"name": "include",
|
|
415
|
-
"description": "A comma-separated list of fields to include in the generated grid and the generated editor.\n\nIt can be used to explicitly define the field order.\n\nWhen it is defined [`exclude`](https://cdn.vaadin.com/vaadin-web-components/24.8.0-
|
|
424
|
+
"description": "A comma-separated list of fields to include in the generated grid and the generated editor.\n\nIt can be used to explicitly define the field order.\n\nWhen it is defined [`exclude`](https://cdn.vaadin.com/vaadin-web-components/24.8.0-alpha4/#/elements/vaadin-crud#property-exclude) is ignored.\n\nDefault is undefined meaning that all properties in the object should be mapped to fields.",
|
|
416
425
|
"value": {
|
|
417
426
|
"type": [
|
|
418
427
|
"string",
|
|
@@ -423,7 +432,7 @@
|
|
|
423
432
|
},
|
|
424
433
|
{
|
|
425
434
|
"name": "exclude",
|
|
426
|
-
"description": "A comma-separated list of fields to be excluded from the generated grid and the generated editor.\n\nWhen [`include`](https://cdn.vaadin.com/vaadin-web-components/24.8.0-
|
|
435
|
+
"description": "A comma-separated list of fields to be excluded from the generated grid and the generated editor.\n\nWhen [`include`](https://cdn.vaadin.com/vaadin-web-components/24.8.0-alpha4/#/elements/vaadin-crud#property-include) is defined, this parameter is ignored.\n\nDefault is to exclude all private fields (those properties starting with underscore)",
|
|
427
436
|
"value": {
|
|
428
437
|
"type": [
|
|
429
438
|
"string",
|
|
@@ -559,7 +568,7 @@
|
|
|
559
568
|
},
|
|
560
569
|
{
|
|
561
570
|
"name": "include",
|
|
562
|
-
"description": "A comma-separated list of fields to include in the generated grid and the generated editor.\n\nIt can be used to explicitly define the field order.\n\nWhen it is defined [`exclude`](https://cdn.vaadin.com/vaadin-web-components/24.8.0-
|
|
571
|
+
"description": "A comma-separated list of fields to include in the generated grid and the generated editor.\n\nIt can be used to explicitly define the field order.\n\nWhen it is defined [`exclude`](https://cdn.vaadin.com/vaadin-web-components/24.8.0-alpha4/#/elements/vaadin-crud#property-exclude) is ignored.\n\nDefault is undefined meaning that all properties in the object should be mapped to fields.",
|
|
563
572
|
"value": {
|
|
564
573
|
"type": [
|
|
565
574
|
"string",
|
|
@@ -570,7 +579,7 @@
|
|
|
570
579
|
},
|
|
571
580
|
{
|
|
572
581
|
"name": "exclude",
|
|
573
|
-
"description": "A comma-separated list of fields to be excluded from the generated grid and the generated editor.\n\nWhen [`include`](https://cdn.vaadin.com/vaadin-web-components/24.8.0-
|
|
582
|
+
"description": "A comma-separated list of fields to be excluded from the generated grid and the generated editor.\n\nWhen [`include`](https://cdn.vaadin.com/vaadin-web-components/24.8.0-alpha4/#/elements/vaadin-crud#property-include) is defined, this parameter is ignored.\n\nDefault is to exclude all private fields (those properties starting with underscore)",
|
|
574
583
|
"value": {
|
|
575
584
|
"type": [
|
|
576
585
|
"string",
|
package/web-types.lit.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"$schema": "https://json.schemastore.org/web-types",
|
|
3
3
|
"name": "@vaadin/crud",
|
|
4
|
-
"version": "24.8.0-
|
|
4
|
+
"version": "24.8.0-alpha4",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"framework": "lit",
|
|
7
7
|
"framework-config": {
|
|
@@ -142,7 +142,7 @@
|
|
|
142
142
|
},
|
|
143
143
|
{
|
|
144
144
|
"name": "vaadin-crud",
|
|
145
|
-
"description": "`<vaadin-crud>` is a Web Component for [CRUD](https://en.wikipedia.org/wiki/Create,_read,_update_and_delete) operations.\n\n### Quick Start\n\nAssign an array to the [`items`](https://cdn.vaadin.com/vaadin-web-components/24.8.0-
|
|
145
|
+
"description": "`<vaadin-crud>` is a Web Component for [CRUD](https://en.wikipedia.org/wiki/Create,_read,_update_and_delete) operations.\n\n### Quick Start\n\nAssign an array to the [`items`](https://cdn.vaadin.com/vaadin-web-components/24.8.0-alpha4/#/elements/vaadin-crud#property-items) property.\n\nA grid and an editor will be automatically generated and configured based on the data structure provided.\n\n```html\n<vaadin-crud></vaadin-crud>\n```\n```js\nconst crud = document.querySelector('vaadin-crud');\n\ncrud.items = [\n { name: 'John', surname: 'Lennon', role: 'singer' },\n { name: 'Ringo', surname: 'Starr', role: 'drums' },\n // ... more items\n];\n```\n\n### Data Provider Function\n\nOtherwise, you can provide a [`dataProvider`](https://cdn.vaadin.com/vaadin-web-components/24.8.0-alpha4/#/elements/vaadin-crud#property-dataProvider) function.\n\n```js\nconst crud = document.querySelector('vaadin-crud');\n\nconst users = [\n { name: 'John', surname: 'Lennon', role: 'singer' },\n { name: 'Ringo', surname: 'Starr', role: 'drums' },\n // ... more items\n];\n\ncrud.dataProvider = (params, callback) => {\n const chunk = users.slice(params.page * params.pageSize, params.page * params.pageSize + params.pageSize);\n callback(chunk, people.length);\n};\n```\n\nNOTE: The auto-generated editor only supports string types. If you need to handle special cases\ncustomizing the editor is discussed below.\n\n### Customization\n\nAlternatively you can fully configure the component by using `slot` names.\n\nSlot name | Description\n---------------|----------------\n`grid` | To replace the auto-generated grid with a custom one.\n`form` | To replace the auto-generated form.\n`save-button` | To replace the \"Save\" button.\n`cancel-button`| To replace the \"Cancel\" button.\n`delete-button`| To replace the \"Delete\" button.\n`toolbar` | To provide the toolbar content (by default, it's empty).\n`new-button` | To replace the \"New item\" button.\n\n#### Example:\n\n```html\n<vaadin-crud id=\"crud\">\n <vaadin-grid slot=\"grid\">\n <vaadin-crud-edit-column></vaadin-crud-edit-column>\n <vaadin-grid-column id=\"column1\"></vaadin-grid-column>\n <vaadin-grid-column id=\"column2\"></vaadin-grid-column>\n </vaadin-grid>\n\n <vaadin-form-layout slot=\"form\">\n <vaadin-text-field label=\"First\" path=\"name\"></vaadin-text-field>\n <vaadin-text-field label=\"Surname\" path=\"surname\"></vaadin-text-field>\n </vaadin-form-layout>\n\n <div slot=\"toolbar\">Total singers: 2</div>\n <button slot=\"new-button\">New singer</button>\n\n <button slot=\"save-button\">Save changes</button>\n <button slot=\"cancel-button\">Discard changes</button>\n <button slot=\"delete-button\">Delete singer</button>\n</vaadin-crud>\n```\n```js\nconst crud = document.querySelector('#crud');\n\nconst column1 = document.querySelector('#column1');\ncolumn1.headerRenderer = (root, column) => {\n root.textContent = 'Name';\n};\ncolumn1.renderer = (root, column, model) => {\n root.textContent = model.item.name;\n};\n\nconst column2 = document.querySelector('#column2');\ncolumn2.headerRenderer = (root, column) => {\n root.textContent = 'Surname';\n};\ncolumn2.renderer = (root, column, model) => {\n root.textContent = model.item.surname;\n};\n\ncrud.items = [\n { name: 'John', surname: 'Lennon', role: 'singer' },\n { name: 'Ringo', surname: 'Starr', role: 'drums' },\n // ... more items\n];\n```\n\n### Helpers\n\nThe following elements are used to auto-configure the grid and the editor\n- [`<vaadin-crud-edit-column>`](https://cdn.vaadin.com/vaadin-web-components/24.8.0-alpha4/#/elements/vaadin-crud-edit-column)\n- `<vaadin-crud-grid>` - can be replaced with custom [`<vaadin-grid>`](https://cdn.vaadin.com/vaadin-web-components/24.8.0-alpha4/#/elements/vaadin-grid)\n- `<vaadin-crud-form>` - can be replaced with custom [`<vaadin-form-layout>`](https://cdn.vaadin.com/vaadin-web-components/24.8.0-alpha4/#/elements/vaadin-form-layout)\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n----------------|----------------\n`toolbar` | Toolbar container at the bottom. By default it contains the the `new` button\n\nThe following custom properties are available:\n\nCustom Property | Description | Default\n----------------|----------------\n--vaadin-crud-editor-max-height | max height of editor when opened on the bottom | 40%\n--vaadin-crud-editor-max-width | max width of editor when opened on the side | 40%\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
|
|
146
146
|
"extension": true,
|
|
147
147
|
"attributes": [
|
|
148
148
|
{
|
|
@@ -224,14 +224,14 @@
|
|
|
224
224
|
},
|
|
225
225
|
{
|
|
226
226
|
"name": ".include",
|
|
227
|
-
"description": "A comma-separated list of fields to include in the generated grid and the generated editor.\n\nIt can be used to explicitly define the field order.\n\nWhen it is defined [`exclude`](https://cdn.vaadin.com/vaadin-web-components/24.8.0-
|
|
227
|
+
"description": "A comma-separated list of fields to include in the generated grid and the generated editor.\n\nIt can be used to explicitly define the field order.\n\nWhen it is defined [`exclude`](https://cdn.vaadin.com/vaadin-web-components/24.8.0-alpha4/#/elements/vaadin-crud#property-exclude) is ignored.\n\nDefault is undefined meaning that all properties in the object should be mapped to fields.",
|
|
228
228
|
"value": {
|
|
229
229
|
"kind": "expression"
|
|
230
230
|
}
|
|
231
231
|
},
|
|
232
232
|
{
|
|
233
233
|
"name": ".exclude",
|
|
234
|
-
"description": "A comma-separated list of fields to be excluded from the generated grid and the generated editor.\n\nWhen [`include`](https://cdn.vaadin.com/vaadin-web-components/24.8.0-
|
|
234
|
+
"description": "A comma-separated list of fields to be excluded from the generated grid and the generated editor.\n\nWhen [`include`](https://cdn.vaadin.com/vaadin-web-components/24.8.0-alpha4/#/elements/vaadin-crud#property-include) is defined, this parameter is ignored.\n\nDefault is to exclude all private fields (those properties starting with underscore)",
|
|
235
235
|
"value": {
|
|
236
236
|
"kind": "expression"
|
|
237
237
|
}
|