@omegagrid/grid 0.10.82 → 0.10.86

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.
@@ -41,6 +41,7 @@ declare const _default: {
41
41
  COLORPICKER_COLOR_SIZE: number;
42
42
  DEFAULT_NUMBER_FORMAT: string;
43
43
  BUTTON_HEIGHT: number;
44
+ RESIZE_HANDLE_SIZE: number;
44
45
  FONT_SIZE: number;
45
46
  FLOATING_WINDOW_MAX_WIDTH: number;
46
47
  ROW_HEIGHT: number;
@@ -1 +1 @@
1
- {"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../src/constants.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AACA,wBAKE"}
1
+ {"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../src/constants.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AACA,wBAKE"}
@@ -9,7 +9,7 @@ export declare class DropdownFilter extends BaseFilter {
9
9
  willUpdate(props: Map<string, unknown>): void;
10
10
  firstUpdated(): Promise<void>;
11
11
  _onChange: () => void;
12
- _onKeyDown: (e: KeyboardEvent) => void;
12
+ _onKeyDown: (e: KeyboardEvent) => Promise<void>;
13
13
  render: () => import("lit-html").TemplateResult<1>;
14
14
  activate(): void;
15
15
  deactivate(): void;
@@ -1 +1 @@
1
- {"version":3,"file":"dropdownFilter.d.ts","sourceRoot":"","sources":["../../src/filters/dropdownFilter.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAE1C,OAAO,EAAE,WAAW,EAAE,YAAY,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAInF,qBACa,cAAe,SAAQ,UAAU;IAE7C,MAAM,CAAC,MAAM,4BAWV;IAGH,QAAQ,EAAE,YAAY,CAAC;IAGvB,KAAK,EAAE,UAAU,CAAM;IAGvB,OAAO,EAAE,WAAW,CAAC;IAGrB,KAAK,EAAE,SAAS,CAAC;IAEjB,UAAU,CAAC,KAAK,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IAYhC,YAAY;IAMlB,SAAS,aAQR;IAED,UAAU,GAAI,GAAG,aAAa,UAU7B;IAED,MAAM,6CAYJ;IAEF,QAAQ;IAUR,UAAU;CAKV"}
1
+ {"version":3,"file":"dropdownFilter.d.ts","sourceRoot":"","sources":["../../src/filters/dropdownFilter.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAE1C,OAAO,EAAE,WAAW,EAAE,YAAY,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAInF,qBACa,cAAe,SAAQ,UAAU;IAE7C,MAAM,CAAC,MAAM,4BAWV;IAGH,QAAQ,EAAE,YAAY,CAAC;IAGvB,KAAK,EAAE,UAAU,CAAM;IAGvB,OAAO,EAAE,WAAW,CAAC;IAGrB,KAAK,EAAE,SAAS,CAAC;IAEjB,UAAU,CAAC,KAAK,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IAYhC,YAAY;IAMlB,SAAS,aAQR;IAKD,UAAU,GAAU,GAAG,aAAa,mBAoBnC;IAED,MAAM,6CAYJ;IAEF,QAAQ;IAUR,UAAU;CAKV"}
@@ -26,18 +26,29 @@ let DropdownFilter = class DropdownFilter extends BaseFilter {
26
26
  else
27
27
  this.clearFilter();
28
28
  };
29
- this._onKeyDown = (e) => {
30
- // handle value in search field
31
- if (e.key == 'Enter') {
32
- if (this.dropdown) {
33
- if (this.dropdown.input.value == null)
34
- this.clearFilter();
35
- else
36
- this.filter(this.dropdown.input.value);
37
- this.deactivate();
38
- }
39
- e.stopImmediatePropagation();
29
+ // a value typed into the search field is resolved to the matching items of the list,
30
+ // so the filter works with their keys instead of the searched text - the field holds
31
+ // the whole filter, several values can be entered separated by a comma
32
+ this._onKeyDown = async (e) => {
33
+ if (e.key != 'Enter')
34
+ return;
35
+ e.stopImmediatePropagation();
36
+ if (!this.dropdown)
37
+ return;
38
+ const term = this.dropdown.input?.value?.trim();
39
+ if (!term) {
40
+ await this.dropdown.clearSelection(); // an empty search field clears the whole filter
41
+ this.clearFilter();
42
+ this.deactivate();
43
+ return;
40
44
  }
45
+ await this.dropdown.filter(term); // the search field filters with a delay, apply the term right away
46
+ const count = await this.dropdown.selectFiltered(false, true);
47
+ if (count == 0)
48
+ return; // nothing matches the term, keep the dropdown open to correct it
49
+ this._onChange();
50
+ await this.dropdown.clearFilter();
51
+ this.deactivate();
41
52
  };
42
53
  this.render = () => html `
43
54
  <div class="filter-inner">
@@ -73,8 +84,8 @@ let DropdownFilter = class DropdownFilter extends BaseFilter {
73
84
  }
74
85
  activate() {
75
86
  super.activate();
76
- setTimeout(() => {
77
- this.dropdown.open();
87
+ setTimeout(async () => {
88
+ await this.dropdown.open();
78
89
  if (utils.isString(this.currentValue)) {
79
90
  this.dropdown.filter(this.currentValue);
80
91
  }
@@ -1 +1 @@
1
- {"version":3,"file":"dropdownFilter.js","sourceRoot":"","sources":["../../src/filters/dropdownFilter.ts"],"names":[],"mappings":"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","sourcesContent":["import constants from \"../constants\";\nimport { customElement, property, query, state } from 'lit/decorators.js';\nimport { BaseFilter } from \"./baseFilter\";\nimport { html, css } from 'lit';\nimport { TreeAdapter, TreeDropdown, TreeModel, TreeSource } from \"@omegagrid/tree\";\nimport { KeyValue, utils } from \"@omegagrid/core\";\n\n\n@customElement(`${constants.PREFIX}-filter-dropdown`)\nexport class DropdownFilter extends BaseFilter {\n\t\n\tstatic styles = [...BaseFilter.styles, css`\n\t\t.filter-inner {\n\t\t\theight: 100%;\n\t\t\tdisplay: flex;\n\t\t\tflex-direction: row;\n\t\t\toverflow: hidden;\n\t\t}\n\n\t\tog-tree-dropdown {\n\t\t\twidth: 100%;\n\t\t}\n\t`];\n\n\t@query('og-tree-dropdown')\n\tdropdown: TreeDropdown;\n\n\t@property({type: Array})\n\titems: TreeSource = [];\n\n\t@property({type: Object})\n\tadapter: TreeAdapter;\n\n\t@state()\n\tmodel: TreeModel;\n\n\twillUpdate(props: Map<string, unknown>) {\n\t\tif (props.has('items')) {\n\t\t\tif (this.adapter) {\n\t\t\t\tthis.model = null;\n\t\t\t} else if (this.items) {\n\t\t\t\tthis.model = new TreeModel(this.items, {});\n\t\t\t} else {\n\t\t\t\tthis.model = null;\n\t\t\t}\n\t\t}\n\t}\n\n\tasync firstUpdated() {\n\t\tawait this.dropdown.updateComplete;\n\t\tthis.dropdown.dropdown.addEventListener('mousedown', (e: MouseEvent) => e.stopPropagation());\n\t\tthis.dropdown.input.addEventListener('keydown', this._onKeyDown);\n\t}\n\n\t_onChange = () => {\n\t\tconst values: KeyValue[] = [];\n\t\tthis.dropdown.selection.items.forEach((_, key) => {\n\t\t\tconst node = this.dropdown.tree.model.nodeMap.get(key);\n\t\t\tif (key != null) values.push({key: key, value: node?.value});\n\t\t});\n\t\tif (values.length) this.filter(values);\n\t\telse this.clearFilter();\n\t}\n\n\t_onKeyDown = (e: KeyboardEvent) => {\n\t\t// handle value in search field\n\t\tif (e.key == 'Enter') {\n\t\t\tif (this.dropdown) {\n\t\t\t\tif (this.dropdown.input.value == null) this.clearFilter();\n\t\t\t\telse this.filter(this.dropdown.input.value);\n\t\t\t\tthis.deactivate();\n\t\t\t}\n\t\t\te.stopImmediatePropagation();\n\t\t}\n\t}\n\n\trender = () => html`\n\t\t<div class=\"filter-inner\">\n\t\t\t<og-tree-dropdown\n\t\t\t\tcross\n\t\t\t\tbuttonInput\n\t\t\t\tpreventInputEnter\n\t\t\t\t.options=\"${{selectMode: 'multiple'}}\"\n\t\t\t\t.model=\"${this.model}\"\n\t\t\t\t.adapter=\"${this.adapter}\"\n\t\t\t\t@change=\"${this._onChange}\">\n\t\t\t</og-tree-dropdown>\n\t\t</div>\n\t`;\n\n\tactivate() {\n\t\tsuper.activate();\n\t\tsetTimeout(() => {\n\t\t\tthis.dropdown.open();\n\t\t\tif (utils.isString(this.currentValue)) {\n\t\t\t\tthis.dropdown.filter(this.currentValue as string);\n\t\t\t}\n\t\t}, 100);\n\t}\n\n\tdeactivate() {\n\t\tthis.dropdown.close();\n\t\tsuper.deactivate();\n\t}\n\n}"]}
1
+ {"version":3,"file":"dropdownFilter.js","sourceRoot":"","sources":["../../src/filters/dropdownFilter.ts"],"names":[],"mappings":"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","sourcesContent":["import constants from \"../constants\";\nimport { customElement, property, query, state } from 'lit/decorators.js';\nimport { BaseFilter } from \"./baseFilter\";\nimport { html, css } from 'lit';\nimport { TreeAdapter, TreeDropdown, TreeModel, TreeSource } from \"@omegagrid/tree\";\nimport { KeyValue, utils } from \"@omegagrid/core\";\n\n\n@customElement(`${constants.PREFIX}-filter-dropdown`)\nexport class DropdownFilter extends BaseFilter {\n\t\n\tstatic styles = [...BaseFilter.styles, css`\n\t\t.filter-inner {\n\t\t\theight: 100%;\n\t\t\tdisplay: flex;\n\t\t\tflex-direction: row;\n\t\t\toverflow: hidden;\n\t\t}\n\n\t\tog-tree-dropdown {\n\t\t\twidth: 100%;\n\t\t}\n\t`];\n\n\t@query('og-tree-dropdown')\n\tdropdown: TreeDropdown;\n\n\t@property({type: Array})\n\titems: TreeSource = [];\n\n\t@property({type: Object})\n\tadapter: TreeAdapter;\n\n\t@state()\n\tmodel: TreeModel;\n\n\twillUpdate(props: Map<string, unknown>) {\n\t\tif (props.has('items')) {\n\t\t\tif (this.adapter) {\n\t\t\t\tthis.model = null;\n\t\t\t} else if (this.items) {\n\t\t\t\tthis.model = new TreeModel(this.items, {});\n\t\t\t} else {\n\t\t\t\tthis.model = null;\n\t\t\t}\n\t\t}\n\t}\n\n\tasync firstUpdated() {\n\t\tawait this.dropdown.updateComplete;\n\t\tthis.dropdown.dropdown.addEventListener('mousedown', (e: MouseEvent) => e.stopPropagation());\n\t\tthis.dropdown.input.addEventListener('keydown', this._onKeyDown);\n\t}\n\n\t_onChange = () => {\n\t\tconst values: KeyValue[] = [];\n\t\tthis.dropdown.selection.items.forEach((_, key) => {\n\t\t\tconst node = this.dropdown.tree.model.nodeMap.get(key);\n\t\t\tif (key != null) values.push({key: key, value: node?.value});\n\t\t});\n\t\tif (values.length) this.filter(values);\n\t\telse this.clearFilter();\n\t}\n\n\t// a value typed into the search field is resolved to the matching items of the list,\n\t// so the filter works with their keys instead of the searched text - the field holds\n\t// the whole filter, several values can be entered separated by a comma\n\t_onKeyDown = async (e: KeyboardEvent) => {\n\t\tif (e.key != 'Enter') return;\n\t\te.stopImmediatePropagation();\n\t\tif (!this.dropdown) return;\n\n\t\tconst term = this.dropdown.input?.value?.trim();\n\t\tif (!term) {\n\t\t\tawait this.dropdown.clearSelection(); // an empty search field clears the whole filter\n\t\t\tthis.clearFilter();\n\t\t\tthis.deactivate();\n\t\t\treturn;\n\t\t}\n\n\t\tawait this.dropdown.filter(term); // the search field filters with a delay, apply the term right away\n\t\tconst count = await this.dropdown.selectFiltered(false, true);\n\t\tif (count == 0) return; // nothing matches the term, keep the dropdown open to correct it\n\n\t\tthis._onChange();\n\t\tawait this.dropdown.clearFilter();\n\t\tthis.deactivate();\n\t}\n\n\trender = () => html`\n\t\t<div class=\"filter-inner\">\n\t\t\t<og-tree-dropdown\n\t\t\t\tcross\n\t\t\t\tbuttonInput\n\t\t\t\tpreventInputEnter\n\t\t\t\t.options=\"${{selectMode: 'multiple'}}\"\n\t\t\t\t.model=\"${this.model}\"\n\t\t\t\t.adapter=\"${this.adapter}\"\n\t\t\t\t@change=\"${this._onChange}\">\n\t\t\t</og-tree-dropdown>\n\t\t</div>\n\t`;\n\n\tactivate() {\n\t\tsuper.activate();\n\t\tsetTimeout(async () => {\n\t\t\tawait this.dropdown.open();\n\t\t\tif (utils.isString(this.currentValue)) {\n\t\t\t\tthis.dropdown.filter(this.currentValue as string);\n\t\t\t}\n\t\t}, 100);\n\t}\n\n\tdeactivate() {\n\t\tthis.dropdown.close();\n\t\tsuper.deactivate();\n\t}\n\n}"]}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@omegagrid/grid",
3
- "version": "0.10.82",
3
+ "version": "0.10.86",
4
4
  "license": "UNLICENSED",
5
5
  "description": "Universal datagrid component",
6
6
  "main": "./dist/index.js",
@@ -35,12 +35,12 @@
35
35
  "_prepublish": "yarn test && yarn lint"
36
36
  },
37
37
  "dependencies": {
38
- "@omegagrid/commands": "^0.10.82",
39
- "@omegagrid/core": "^0.10.82",
40
- "@omegagrid/grid-core": "^0.10.82",
41
- "@omegagrid/localize": "^0.10.82",
42
- "@omegagrid/tabs": "^0.10.82",
43
- "@omegagrid/tree": "^0.10.82",
38
+ "@omegagrid/commands": "^0.10.86",
39
+ "@omegagrid/core": "^0.10.86",
40
+ "@omegagrid/grid-core": "^0.10.86",
41
+ "@omegagrid/localize": "^0.10.86",
42
+ "@omegagrid/tabs": "^0.10.86",
43
+ "@omegagrid/tree": "^0.10.86",
44
44
  "@stdlib/stats": "^0.0.13",
45
45
  "date-fns": "^3.2.0",
46
46
  "lit": "^3.1.1",