@omegagrid/editor 0.10.92 → 0.10.93

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.
Files changed (5) hide show
  1. package/dist/ui/editors/themeItemEditor.d.ts +14 -4
  2. package/dist/ui/editors/themeItemEditor.d.ts.map +1 -1
  3. package/dist/ui/editors/themeItemEditor.js +95 -30
  4. package/dist/ui/editors/themeItemEditor.js.map +1 -1
  5. package/package.json +10 -10
package/dist/ui/editors/themeItemEditor.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import { ConditionalFormatType, Style, ThemeColumnItem, ThemeRowItem } from '@omegagrid/grid';
1
+ import { ConditionalFormatType, MatchItem, Style, ThemeColumnItem, ThemeRowItem } from '@omegagrid/grid';
2
2
  import { events, OmegaComponent } from '@omegagrid/core';
3
3
  import { RuleEditor } from './ruleEditor';
4
4
  import { StyleEditor } from './styleEditor';
@@ -17,9 +17,19 @@ export declare class ThemeItemEditor extends OmegaComponent {
17
17
  updateRuleType(type: ConditionalFormatType): void;
18
18
  _onStyleChange: (e: events.ChangeEvent<Style>) => void;
19
19
  _dispatchChange: () => void;
20
- /** empty input deletes the property - the matchers test level/index > -1 and a truthy name */
21
- _onMatcherChange(key: 'level' | 'index' | 'height' | 'width', value: number | string | null): void;
22
- _onNameChange: (e: events.ChangeEvent<string>) => void;
20
+ /**
21
+ * Conditions of the item as a list of match items. The legacy root matchers
22
+ * are shown converted with their original semantics (index wins over level,
23
+ * the name filters on top) and become themeItem.matches on the first edit.
24
+ */
25
+ getMatchItems(): MatchItem[];
26
+ private commitMatchItems;
27
+ addCondition(property: string): void;
28
+ removeCondition(index: number): void;
29
+ /** comma-separated input = OR of the values; an empty input removes the condition */
30
+ _onConditionChange(index: number, raw: string): void;
31
+ private formatConditionValue;
32
+ _onSizeChange: (e: events.ChangeEvent<number>) => void;
23
33
  render: () => import("lit-html").TemplateResult<1>;
24
34
  }
25
35
  export {};
package/dist/ui/editors/themeItemEditor.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"themeItemEditor.d.ts","sourceRoot":"","sources":["../../../src/ui/editors/themeItemEditor.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,qBAAqB,EAAE,KAAK,EAAE,eAAe,EAAa,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAEzG,OAAO,EAAE,MAAM,EAAY,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAEnE,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAE5C,KAAK,aAAa,GAAG,MAAM,GAAC,SAAS,GAAC,OAAO,CAAC;AAU9C,qBACa,eAAgB,SAAQ,cAAc;IAGlD,KAAK,EAAE,MAAM,CAAC;IAGd,SAAS,EAAE,eAAe,GAAG,YAAY,CAAC;IAG1C,QAAQ,EAAE,aAAa,CAAC;IAGxB,MAAM,EAAE,WAAW,CAAC;IAGpB,UAAU,EAAE,WAAW,CAAC;IAGxB,UAAU,EAAE,UAAU,CAAC;IAGvB,WAAW,EAAE,WAAW,CAAC;IAEzB,MAAM,CAAC,MAAM,iCA6CV;IAEH,UAAU;IAKV,cAAc,CAAC,IAAI,EAAE,qBAAqB;IAS1C,cAAc,GAAI,GAAG,MAAM,CAAC,WAAW,CAAC,KAAK,CAAC,UAG7C;IAED,eAAe,aAEd;IAED,8FAA8F;IAC9F,gBAAgB,CAAC,GAAG,EAAE,OAAO,GAAC,OAAO,GAAC,QAAQ,GAAC,OAAO,EAAE,KAAK,EAAE,MAAM,GAAC,MAAM,GAAC,IAAI;IAMjF,aAAa,GAAI,GAAG,MAAM,CAAC,WAAW,CAAC,MAAM,CAAC,UAI7C;IAED,MAAM,6CAwFJ;CACF"}
1
+ {"version":3,"file":"themeItemEditor.d.ts","sourceRoot":"","sources":["../../../src/ui/editors/themeItemEditor.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,qBAAqB,EAAE,SAAS,EAAc,KAAK,EAAE,eAAe,EAAa,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAEhI,OAAO,EAAE,MAAM,EAAY,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAGnE,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAE5C,KAAK,aAAa,GAAG,MAAM,GAAC,SAAS,GAAC,OAAO,CAAC;AAa9C,qBACa,eAAgB,SAAQ,cAAc;IAGlD,KAAK,EAAE,MAAM,CAAC;IAGd,SAAS,EAAE,eAAe,GAAG,YAAY,CAAC;IAG1C,QAAQ,EAAE,aAAa,CAAC;IAGxB,MAAM,EAAE,WAAW,CAAC;IAGpB,UAAU,EAAE,WAAW,CAAC;IAGxB,UAAU,EAAE,UAAU,CAAC;IAGvB,WAAW,EAAE,WAAW,CAAC;IAEzB,MAAM,CAAC,MAAM,iCAuDV;IAEH,UAAU;IAKV,cAAc,CAAC,IAAI,EAAE,qBAAqB;IAS1C,cAAc,GAAI,GAAG,MAAM,CAAC,WAAW,CAAC,KAAK,CAAC,UAG7C;IAED,eAAe,aAEd;IAED;;;;OAIG;IACH,aAAa,IAAI,SAAS,EAAE;IAW5B,OAAO,CAAC,gBAAgB;IASxB,YAAY,CAAC,QAAQ,EAAE,MAAM;IAI7B,eAAe,CAAC,KAAK,EAAE,MAAM;IAI7B,qFAAqF;IACrF,kBAAkB,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM;IAe7C,OAAO,CAAC,oBAAoB;IAK5B,aAAa,GAAI,GAAG,MAAM,CAAC,WAAW,CAAC,MAAM,CAAC,UAK7C;IAED,MAAM,6CAkGJ;CACF"}
package/dist/ui/editors/themeItemEditor.js CHANGED
@@ -8,6 +8,7 @@ import { customElement, property, query } from 'lit/decorators.js';
8
8
  import { css, html } from 'lit';
9
9
  import { OmegaComponent } from '@omegagrid/core';
10
10
  import { msg } from '@omegagrid/localize';
11
+ import { map } from 'lit-html/directives/map.js';
11
12
  const ruleTypes = [
12
13
  { key: null, value: 'Static style' },
13
14
  { key: 'formula', value: 'Formula' },
@@ -15,6 +16,8 @@ const ruleTypes = [
15
16
  { key: 'bar', value: 'Data Bar' },
16
17
  { key: 'icon', value: 'Icon Set' },
17
18
  ];
19
+ /** node properties offered by the add-condition dropdown */
20
+ const matchProperties = ['name', 'level', 'index'];
18
21
  let ThemeItemEditor = class ThemeItemEditor extends OmegaComponent {
19
22
  constructor() {
20
23
  super(...arguments);
@@ -25,11 +28,12 @@ let ThemeItemEditor = class ThemeItemEditor extends OmegaComponent {
25
28
  this._dispatchChange = () => {
26
29
  this.editor?.dispatchThemeChange();
27
30
  };
28
- this._onNameChange = (e) => {
31
+ this._onSizeChange = (e) => {
32
+ const key = this.itemType == 'rows' ? 'height' : 'width';
29
33
  if (e.value == null || e.value === '')
30
- delete this.themeItem.name;
34
+ delete this.themeItem[key];
31
35
  else
32
- this.themeItem.name = e.value;
36
+ this.themeItem[key] = Number(e.value);
33
37
  this._dispatchChange();
34
38
  };
35
39
  this.render = () => html `
@@ -65,34 +69,44 @@ let ThemeItemEditor = class ThemeItemEditor extends OmegaComponent {
65
69
  </div>
66
70
 
67
71
  ${this.itemType != 'cells' ? html `
68
- <div class="row">${msg('Conditions')}</div>
69
-
70
- <div class="row">
71
- <label>${msg('Level')}</label>
72
- <og-numericinput buttons min="0"
73
- .value="${this.themeItem?.level}"
74
- @change="${(e) => this._onMatcherChange('level', e.value)}">
75
- </og-numericinput>
76
- <label>${msg('Index')}</label>
77
- <og-numericinput buttons min="0"
78
- .value="${this.themeItem?.index}"
79
- @change="${(e) => this._onMatcherChange('index', e.value)}">
80
- </og-numericinput>
72
+ <div class="row section">
73
+ <div>${msg('Conditions')}</div>
74
+ <og-dropdown-menu
75
+ noCaret
76
+ dynamicWidth
77
+ alignment="right"
78
+ color="transparent"
79
+ .items="${matchProperties.map(property => ({
80
+ key: property,
81
+ value: msg(property.charAt(0).toUpperCase() + property.slice(1)),
82
+ exec: () => this.addCondition(property)
83
+ }))}">
84
+ <div slot="label"><og-icon icon="plus"></og-icon></div>
85
+ </og-dropdown-menu>
81
86
  </div>
82
87
 
83
- <div class="row">
84
- <label>${msg('Name')}</label>
85
- <og-input
86
- .value="${this.themeItem?.name ?? ''}"
87
- @change="${this._onNameChange}">
88
- </og-input>
89
- </div>
88
+ ${map(this.getMatchItems(), (match, i) => html `
89
+ <div class="row">
90
+ <label>${msg(match.property.charAt(0).toUpperCase() + match.property.slice(1))}</label>
91
+ <og-input
92
+ style="text-align: left"
93
+ .value="${this.formatConditionValue(match.value)}"
94
+ @change="${(e) => this._onConditionChange(i, e.value)}">
95
+ </og-input>
96
+ <og-button
97
+ icon="trash"
98
+ color="transparent"
99
+ style="flex: 0 0 20px; color: red"
100
+ @click="${() => this.removeCondition(i)}">
101
+ </og-button>
102
+ </div>
103
+ `)}
90
104
 
91
105
  <div class="row">
92
106
  <label>${msg(this.itemType == 'rows' ? 'Height' : 'Width')}</label>
93
107
  <og-numericinput buttons min="0"
94
108
  .value="${this.itemType == 'rows' ? this.themeItem?.height : this.themeItem?.width}"
95
- @change="${(e) => this._onMatcherChange(this.itemType == 'rows' ? 'height' : 'width', e.value)}">
109
+ @change="${this._onSizeChange}">
96
110
  </og-numericinput>
97
111
  </div>
98
112
  ` : ''}
@@ -135,13 +149,54 @@ let ThemeItemEditor = class ThemeItemEditor extends OmegaComponent {
135
149
  this.requestUpdate();
136
150
  this.ruleEditor?.requestUpdate();
137
151
  }
138
- /** empty input deletes the property - the matchers test level/index > -1 and a truthy name */
139
- _onMatcherChange(key, value) {
140
- if (value == null || value === '')
141
- delete this.themeItem[key];
142
- else
143
- this.themeItem[key] = Number(value);
152
+ /**
153
+ * Conditions of the item as a list of match items. The legacy root matchers
154
+ * are shown converted with their original semantics (index wins over level,
155
+ * the name filters on top) and become themeItem.matches on the first edit.
156
+ */
157
+ getMatchItems() {
158
+ const item = this.themeItem;
159
+ if (item.matches)
160
+ return Array.isArray(item.matches) ? item.matches : [item.matches];
161
+ const items = [];
162
+ if (item.index > -1)
163
+ items.push({ property: 'index', value: item.index });
164
+ else if (item.level > -1)
165
+ items.push({ property: 'level', value: item.level });
166
+ if (item.name)
167
+ items.push({ property: 'name', value: item.name });
168
+ return items;
169
+ }
170
+ commitMatchItems(items) {
171
+ this.themeItem.matches = items;
172
+ delete this.themeItem.name;
173
+ delete this.themeItem.level;
174
+ delete this.themeItem.index;
144
175
  this._dispatchChange();
176
+ this.requestUpdate();
177
+ }
178
+ addCondition(property) {
179
+ this.commitMatchItems([...this.getMatchItems(), { property, value: property == 'name' ? '' : 0 }]);
180
+ }
181
+ removeCondition(index) {
182
+ this.commitMatchItems(this.getMatchItems().filter((_, i) => i != index));
183
+ }
184
+ /** comma-separated input = OR of the values; an empty input removes the condition */
185
+ _onConditionChange(index, raw) {
186
+ const items = [...this.getMatchItems()];
187
+ const property = items[index].property;
188
+ const parts = String(raw ?? '').split(',').map(part => part.trim()).filter(part => part !== '');
189
+ const values = property == 'name' ? parts : parts.map(Number).filter(value => !isNaN(value));
190
+ if (!values.length) {
191
+ this.removeCondition(index);
192
+ return;
193
+ }
194
+ items[index] = { property, value: values.length == 1 ? values[0] : values };
195
+ this.commitMatchItems(items);
196
+ }
197
+ formatConditionValue(value) {
198
+ const format = (item) => item instanceof RegExp ? `/${item.source}/` : String(item ?? '');
199
+ return Array.isArray(value) ? value.map(format).join(', ') : format(value);
145
200
  }
146
201
  };
147
202
  ThemeItemEditor.styles = [OmegaComponent.styles, css `
@@ -189,6 +244,16 @@ ThemeItemEditor.styles = [OmegaComponent.styles, css `
189
244
  display: flex;
190
245
  flex-direction: row;
191
246
  }
247
+
248
+ .section {
249
+ display: flex;
250
+ flex-direction: row;
251
+ align-items: center;
252
+ }
253
+
254
+ .section > div {
255
+ flex: 1;
256
+ }
192
257
  `];
193
258
  __decorate([
194
259
  property({ type: Number })
package/dist/ui/editors/themeItemEditor.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"themeItemEditor.js","sourceRoot":"","sources":["../../../src/ui/editors/themeItemEditor.ts"],"names":[],"mappings":"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","sourcesContent":["import { customElement, property, query } from 'lit/decorators.js';\nimport { ConditionalFormatType, Style, ThemeColumnItem, ThemeItem, ThemeRowItem } from '@omegagrid/grid';\nimport { css, html } from 'lit';\nimport { events, MenuItem, OmegaComponent } from '@omegagrid/core';\nimport { msg } from '@omegagrid/localize';\nimport { RuleEditor } from './ruleEditor';\nimport { StyleEditor } from './styleEditor';\nimport { ThemeEditor } from './themeEditor';\n\ntype ThemeItemType = 'rows'|'columns'|'cells';\n\nconst ruleTypes: MenuItem[] = [\n\t{key: null, value: 'Static style'},\n\t{key: 'formula', value: 'Formula'},\n\t{key: 'scale', value: 'Scale'},\n\t{key: 'bar', value: 'Data Bar'},\n\t{key: 'icon', value: 'Icon Set'},\n];\n\n@customElement('og-editor-themeitem')\nexport class ThemeItemEditor extends OmegaComponent {\n\t\n\t@property({type: Number})\n\tindex: number;\n\n\t@property({type: Object})\n\tthemeItem: ThemeColumnItem & ThemeRowItem;\n\n\t@property({type: String})\n\titemType: ThemeItemType;\n\n\t@property({type: Object})\n\teditor: ThemeEditor;\n\n\t@query('.move-handle')\n\tmoveHandle: HTMLElement;\n\n\t@query('og-editor-ruleeditor')\n\truleEditor: RuleEditor;\n\n\t@query('og-editor-styleeditor')\n\tstyleEditor: StyleEditor;\n\n\tstatic styles = [OmegaComponent.styles, css`\n\t\t:host {\n\t\t\tline-height: 22px;\n\t\t}\n\n\t\t.row {\n\t\t\tdisplay: flex;\n\t\t\tflex-direction: row;\n\t\t\tmargin: 2px 0;\n\t\t\talign-items: center;\n\t\t}\n\n\t\tlabel {\n\t\t\tflex: 0 60px;\n\t\t\ttext-align: right;\n\t\t\tmargin-right: 10px;\n\t\t}\n\n\t\tog-dropdown-list, og-dropdown-menu, og-editor-ruleeditor {\n\t\t\tline-height: 16px;\n\t\t}\n\n\t\tog-numericinput, og-input {\n\t\t\tflex: 1;\n\t\t\tdisplay: block;\n\t\t\twidth: 100%;\n\t\t\tline-height: 20px;\n\t\t\ttext-align: center;\n\t\t}\n\n\t\t.move-handle {\n\t\t\tcursor: move;\n\t\t}\n\n\t\tog-dropdown-list {\n\t\t\tflex: 1;\n\t\t}\n\n\t\t.header {\n\t\t\tpadding-left: 5px;\n\t\t\tborder-top: 1px solid var(--og-border-color);\n\t\t\tborder-bottom: 1px solid var(--og-border-color);\n\t\t\tdisplay: flex;\n\t\t\tflex-direction: row;\n\t\t}\n\t`];\n\n\twillUpdate() {\n\t\tthis.themeItem = this.themeItem || {} as ThemeItem;\n\t\tthis.updateRuleType(this.themeItem.type);\n\t}\n\n\tupdateRuleType(type: ConditionalFormatType) {\n\t\tthis.themeItem.type = type;\n\t\tif (type) delete this.themeItem.style;\n\t\telse this.themeItem.style = this.themeItem.style || {} as Style;\n\n\t\tthis.requestUpdate();\n\t\tthis.ruleEditor?.requestUpdate();\n\t}\n\n\t_onStyleChange = (e: events.ChangeEvent<Style>) => {\n\t\tthis.themeItem.style = e.value;\n\t\tthis._dispatchChange();\n\t}\n\n\t_dispatchChange = () => {\n\t\tthis.editor?.dispatchThemeChange();\n\t}\n\n\t/** empty input deletes the property - the matchers test level/index > -1 and a truthy name */\n\t_onMatcherChange(key: 'level'|'index'|'height'|'width', value: number|string|null) {\n\t\tif (value == null || value === '') delete this.themeItem[key];\n\t\telse this.themeItem[key] = Number(value);\n\t\tthis._dispatchChange();\n\t}\n\n\t_onNameChange = (e: events.ChangeEvent<string>) => {\n\t\tif (e.value == null || e.value === '') delete this.themeItem.name;\n\t\telse this.themeItem.name = e.value;\n\t\tthis._dispatchChange();\n\t}\n\n\trender = () => html`\n\t\t<div class=\"header\">\n\t\t\t<div style=\"flex: 1\" class=\"move-handle\">${msg('Rule')} #${this.index + 1}</div>\n\n\t\t\t<div>\n\t\t\t\t<og-dropdown-menu\n\t\t\t\t\tnoCaret\n\t\t\t\t\tdynamicWidth\n\t\t\t\t\talignment=\"right\"\n\t\t\t\t\tcolor=\"transparent\"\n\t\t\t\t\t.items=\"${[{\n\t\t\t\t\t\tkey: 'moveUp',\n\t\t\t\t\t\tvalue: msg('Move up'),\n\t\t\t\t\t\ticon: 'arrow-up',\n\t\t\t\t\t\texec: () => this.editor.moveItemUp(this.index, this.itemType)\n\t\t\t\t\t}, {\n\t\t\t\t\t\tkey: 'moveDown',\n\t\t\t\t\t\tvalue: msg('Move down'),\n\t\t\t\t\t\ticon: 'arrow-down',\n\t\t\t\t\t\texec: () => this.editor.moveItemDown(this.index, this.itemType)\n\t\t\t\t\t}, {\n\t\t\t\t\t\tkey: 'delete',\n\t\t\t\t\t\tvalue: msg('Delete'),\n\t\t\t\t\t\ticon: 'trash',\n\t\t\t\t\t\tcolor: 'red',\n\t\t\t\t\t\texec: () => this.editor.deleteItem(this.index, this.itemType)\n\t\t\t\t\t}]}\">\n\t\t\t\t\t<div slot=\"label\"><og-icon icon=\"ellipsis\"></og-icon></div>\n\t\t\t\t</og-dropdown-menu>\n\t\t\t</div>\n\t\t</div>\n\n\t\t${this.itemType != 'cells' ? html`\n\t\t\t<div class=\"row\">${msg('Conditions')}</div>\n\n\t\t\t<div class=\"row\">\n\t\t\t\t<label>${msg('Level')}</label>\n\t\t\t\t<og-numericinput buttons min=\"0\"\n\t\t\t\t\t.value=\"${this.themeItem?.level}\"\n\t\t\t\t\t@change=\"${(e: events.ChangeEvent<number>) => this._onMatcherChange('level', e.value)}\">\n\t\t\t\t</og-numericinput>\n\t\t\t\t<label>${msg('Index')}</label>\n\t\t\t\t<og-numericinput buttons min=\"0\"\n\t\t\t\t\t.value=\"${this.themeItem?.index}\"\n\t\t\t\t\t@change=\"${(e: events.ChangeEvent<number>) => this._onMatcherChange('index', e.value)}\">\n\t\t\t\t</og-numericinput>\n\t\t\t</div>\n\n\t\t\t<div class=\"row\">\n\t\t\t\t<label>${msg('Name')}</label>\n\t\t\t\t<og-input\n\t\t\t\t\t.value=\"${this.themeItem?.name ?? ''}\"\n\t\t\t\t\t@change=\"${this._onNameChange}\">\n\t\t\t\t</og-input>\n\t\t\t</div>\n\n\t\t\t<div class=\"row\">\n\t\t\t\t<label>${msg(this.itemType == 'rows' ? 'Height' : 'Width')}</label>\n\t\t\t\t<og-numericinput buttons min=\"0\"\n\t\t\t\t\t.value=\"${this.itemType == 'rows' ? this.themeItem?.height : this.themeItem?.width}\"\n\t\t\t\t\t@change=\"${(e: events.ChangeEvent<number>) => this._onMatcherChange(this.itemType == 'rows' ? 'height' : 'width', e.value)}\">\n\t\t\t\t</og-numericinput>\n\t\t\t</div>\n\t\t` : ''}\n\n\t\t<div class=\"row\">${msg('Style definition')}</div>\n\n\t\t<div class=\"row\">\n\t\t\t<og-dropdown-list\n\t\t\t\t.value = \"${this.themeItem?.type ?? null}\"\n\t\t\t\t.items=\"${ruleTypes}\"\n\t\t\t\t@change=\"${(e: events.ChangeEvent<ConditionalFormatType>) => { this.updateRuleType(e.value); this._dispatchChange(); }}\">\n\t\t\t</og-dropdown-list>\n\t\t</div>\n\n\t\t<div>\n\t\t\t${this.themeItem?.type ? html`\n\t\t\t\t<og-editor-ruleeditor \n\t\t\t\t\t.format=\"${this.themeItem}\"\n\t\t\t\t\t@change=\"${this._dispatchChange}\">\n\t\t\t\t</og-editor-ruleeditor>\n\t\t\t`: html`\n\t\t\t\t<og-editor-styleeditor \n\t\t\t\t\t@change=\"${this._onStyleChange}\"\n\t\t\t\t\t.data=\"${this.themeItem.style}\">\n\t\t\t\t</og-editor-styleeditor>\n\t\t\t`}\n\t\t</div>\n\t`;\n}\n"]}
1
+ {"version":3,"file":"themeItemEditor.js","sourceRoot":"","sources":["../../../src/ui/editors/themeItemEditor.ts"],"names":[],"mappings":"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","sourcesContent":["import { customElement, property, query } from 'lit/decorators.js';\nimport { ConditionalFormatType, MatchItem, MatchValue, Style, ThemeColumnItem, ThemeItem, ThemeRowItem } from '@omegagrid/grid';\nimport { css, html } from 'lit';\nimport { events, MenuItem, OmegaComponent } from '@omegagrid/core';\nimport { msg } from '@omegagrid/localize';\nimport { map } from 'lit-html/directives/map.js';\nimport { RuleEditor } from './ruleEditor';\nimport { StyleEditor } from './styleEditor';\nimport { ThemeEditor } from './themeEditor';\n\ntype ThemeItemType = 'rows'|'columns'|'cells';\n\nconst ruleTypes: MenuItem[] = [\n\t{key: null, value: 'Static style'},\n\t{key: 'formula', value: 'Formula'},\n\t{key: 'scale', value: 'Scale'},\n\t{key: 'bar', value: 'Data Bar'},\n\t{key: 'icon', value: 'Icon Set'},\n];\n\n/** node properties offered by the add-condition dropdown */\nconst matchProperties = ['name', 'level', 'index'];\n\n@customElement('og-editor-themeitem')\nexport class ThemeItemEditor extends OmegaComponent {\n\t\n\t@property({type: Number})\n\tindex: number;\n\n\t@property({type: Object})\n\tthemeItem: ThemeColumnItem & ThemeRowItem;\n\n\t@property({type: String})\n\titemType: ThemeItemType;\n\n\t@property({type: Object})\n\teditor: ThemeEditor;\n\n\t@query('.move-handle')\n\tmoveHandle: HTMLElement;\n\n\t@query('og-editor-ruleeditor')\n\truleEditor: RuleEditor;\n\n\t@query('og-editor-styleeditor')\n\tstyleEditor: StyleEditor;\n\n\tstatic styles = [OmegaComponent.styles, css`\n\t\t:host {\n\t\t\tline-height: 22px;\n\t\t}\n\n\t\t.row {\n\t\t\tdisplay: flex;\n\t\t\tflex-direction: row;\n\t\t\tmargin: 2px 0;\n\t\t\talign-items: center;\n\t\t}\n\n\t\tlabel {\n\t\t\tflex: 0 60px;\n\t\t\ttext-align: right;\n\t\t\tmargin-right: 10px;\n\t\t}\n\n\t\tog-dropdown-list, og-dropdown-menu, og-editor-ruleeditor {\n\t\t\tline-height: 16px;\n\t\t}\n\n\t\tog-numericinput, og-input {\n\t\t\tflex: 1;\n\t\t\tdisplay: block;\n\t\t\twidth: 100%;\n\t\t\tline-height: 20px;\n\t\t\ttext-align: center;\n\t\t}\n\n\t\t.move-handle {\n\t\t\tcursor: move;\n\t\t}\n\n\t\tog-dropdown-list {\n\t\t\tflex: 1;\n\t\t}\n\n\t\t.header {\n\t\t\tpadding-left: 5px;\n\t\t\tborder-top: 1px solid var(--og-border-color);\n\t\t\tborder-bottom: 1px solid var(--og-border-color);\n\t\t\tdisplay: flex;\n\t\t\tflex-direction: row;\n\t\t}\n\n\t\t.section {\n\t\t\tdisplay: flex;\n\t\t\tflex-direction: row;\n\t\t\talign-items: center;\n\t\t}\n\n\t\t.section > div {\n\t\t\tflex: 1;\n\t\t}\n\t`];\n\n\twillUpdate() {\n\t\tthis.themeItem = this.themeItem || {} as ThemeItem;\n\t\tthis.updateRuleType(this.themeItem.type);\n\t}\n\n\tupdateRuleType(type: ConditionalFormatType) {\n\t\tthis.themeItem.type = type;\n\t\tif (type) delete this.themeItem.style;\n\t\telse this.themeItem.style = this.themeItem.style || {} as Style;\n\n\t\tthis.requestUpdate();\n\t\tthis.ruleEditor?.requestUpdate();\n\t}\n\n\t_onStyleChange = (e: events.ChangeEvent<Style>) => {\n\t\tthis.themeItem.style = e.value;\n\t\tthis._dispatchChange();\n\t}\n\n\t_dispatchChange = () => {\n\t\tthis.editor?.dispatchThemeChange();\n\t}\n\n\t/**\n\t * Conditions of the item as a list of match items. The legacy root matchers\n\t * are shown converted with their original semantics (index wins over level,\n\t * the name filters on top) and become themeItem.matches on the first edit.\n\t */\n\tgetMatchItems(): MatchItem[] {\n\t\tconst item = this.themeItem;\n\t\tif (item.matches) return Array.isArray(item.matches) ? item.matches : [item.matches];\n\n\t\tconst items: MatchItem[] = [];\n\t\tif (item.index > -1) items.push({property: 'index', value: item.index});\n\t\telse if (item.level > -1) items.push({property: 'level', value: item.level});\n\t\tif (item.name) items.push({property: 'name', value: item.name as MatchValue});\n\t\treturn items;\n\t}\n\n\tprivate commitMatchItems(items: MatchItem[]) {\n\t\tthis.themeItem.matches = items;\n\t\tdelete this.themeItem.name;\n\t\tdelete this.themeItem.level;\n\t\tdelete this.themeItem.index;\n\t\tthis._dispatchChange();\n\t\tthis.requestUpdate();\n\t}\n\n\taddCondition(property: string) {\n\t\tthis.commitMatchItems([...this.getMatchItems(), {property, value: property == 'name' ? '' : 0}]);\n\t}\n\n\tremoveCondition(index: number) {\n\t\tthis.commitMatchItems(this.getMatchItems().filter((_, i) => i != index));\n\t}\n\n\t/** comma-separated input = OR of the values; an empty input removes the condition */\n\t_onConditionChange(index: number, raw: string) {\n\t\tconst items = [...this.getMatchItems()];\n\t\tconst property = items[index].property;\n\t\tconst parts = String(raw ?? '').split(',').map(part => part.trim()).filter(part => part !== '');\n\t\tconst values = property == 'name' ? parts : parts.map(Number).filter(value => !isNaN(value));\n\n\t\tif (!values.length) {\n\t\t\tthis.removeCondition(index);\n\t\t\treturn;\n\t\t}\n\n\t\titems[index] = {property, value: values.length == 1 ? values[0] : values};\n\t\tthis.commitMatchItems(items);\n\t}\n\n\tprivate formatConditionValue(value: MatchValue|MatchValue[]): string {\n\t\tconst format = (item: MatchValue) => item instanceof RegExp ? `/${item.source}/` : String(item ?? '');\n\t\treturn Array.isArray(value) ? value.map(format).join(', ') : format(value);\n\t}\n\n\t_onSizeChange = (e: events.ChangeEvent<number>) => {\n\t\tconst key = this.itemType == 'rows' ? 'height' : 'width';\n\t\tif (e.value == null || e.value as unknown === '') delete this.themeItem[key];\n\t\telse this.themeItem[key] = Number(e.value);\n\t\tthis._dispatchChange();\n\t}\n\n\trender = () => html`\n\t\t<div class=\"header\">\n\t\t\t<div style=\"flex: 1\" class=\"move-handle\">${msg('Rule')} #${this.index + 1}</div>\n\n\t\t\t<div>\n\t\t\t\t<og-dropdown-menu\n\t\t\t\t\tnoCaret\n\t\t\t\t\tdynamicWidth\n\t\t\t\t\talignment=\"right\"\n\t\t\t\t\tcolor=\"transparent\"\n\t\t\t\t\t.items=\"${[{\n\t\t\t\t\t\tkey: 'moveUp',\n\t\t\t\t\t\tvalue: msg('Move up'),\n\t\t\t\t\t\ticon: 'arrow-up',\n\t\t\t\t\t\texec: () => this.editor.moveItemUp(this.index, this.itemType)\n\t\t\t\t\t}, {\n\t\t\t\t\t\tkey: 'moveDown',\n\t\t\t\t\t\tvalue: msg('Move down'),\n\t\t\t\t\t\ticon: 'arrow-down',\n\t\t\t\t\t\texec: () => this.editor.moveItemDown(this.index, this.itemType)\n\t\t\t\t\t}, {\n\t\t\t\t\t\tkey: 'delete',\n\t\t\t\t\t\tvalue: msg('Delete'),\n\t\t\t\t\t\ticon: 'trash',\n\t\t\t\t\t\tcolor: 'red',\n\t\t\t\t\t\texec: () => this.editor.deleteItem(this.index, this.itemType)\n\t\t\t\t\t}]}\">\n\t\t\t\t\t<div slot=\"label\"><og-icon icon=\"ellipsis\"></og-icon></div>\n\t\t\t\t</og-dropdown-menu>\n\t\t\t</div>\n\t\t</div>\n\n\t\t${this.itemType != 'cells' ? html`\n\t\t\t<div class=\"row section\">\n\t\t\t\t<div>${msg('Conditions')}</div>\n\t\t\t\t<og-dropdown-menu\n\t\t\t\t\tnoCaret\n\t\t\t\t\tdynamicWidth\n\t\t\t\t\talignment=\"right\"\n\t\t\t\t\tcolor=\"transparent\"\n\t\t\t\t\t.items=\"${matchProperties.map(property => ({\n\t\t\t\t\t\tkey: property,\n\t\t\t\t\t\tvalue: msg(property.charAt(0).toUpperCase() + property.slice(1)),\n\t\t\t\t\t\texec: () => this.addCondition(property)\n\t\t\t\t\t}))}\">\n\t\t\t\t\t<div slot=\"label\"><og-icon icon=\"plus\"></og-icon></div>\n\t\t\t\t</og-dropdown-menu>\n\t\t\t</div>\n\n\t\t\t${map(this.getMatchItems(), (match, i) => html`\n\t\t\t\t<div class=\"row\">\n\t\t\t\t\t<label>${msg(match.property.charAt(0).toUpperCase() + match.property.slice(1))}</label>\n\t\t\t\t\t<og-input\n\t\t\t\t\t\tstyle=\"text-align: left\"\n\t\t\t\t\t\t.value=\"${this.formatConditionValue(match.value)}\"\n\t\t\t\t\t\t@change=\"${(e: events.ChangeEvent<string>) => this._onConditionChange(i, e.value)}\">\n\t\t\t\t\t</og-input>\n\t\t\t\t\t<og-button\n\t\t\t\t\t\ticon=\"trash\"\n\t\t\t\t\t\tcolor=\"transparent\"\n\t\t\t\t\t\tstyle=\"flex: 0 0 20px; color: red\"\n\t\t\t\t\t\t@click=\"${() => this.removeCondition(i)}\">\n\t\t\t\t\t</og-button>\n\t\t\t\t</div>\n\t\t\t`)}\n\n\t\t\t<div class=\"row\">\n\t\t\t\t<label>${msg(this.itemType == 'rows' ? 'Height' : 'Width')}</label>\n\t\t\t\t<og-numericinput buttons min=\"0\"\n\t\t\t\t\t.value=\"${this.itemType == 'rows' ? this.themeItem?.height : this.themeItem?.width}\"\n\t\t\t\t\t@change=\"${this._onSizeChange}\">\n\t\t\t\t</og-numericinput>\n\t\t\t</div>\n\t\t` : ''}\n\n\t\t<div class=\"row\">${msg('Style definition')}</div>\n\n\t\t<div class=\"row\">\n\t\t\t<og-dropdown-list\n\t\t\t\t.value = \"${this.themeItem?.type ?? null}\"\n\t\t\t\t.items=\"${ruleTypes}\"\n\t\t\t\t@change=\"${(e: events.ChangeEvent<ConditionalFormatType>) => { this.updateRuleType(e.value); this._dispatchChange(); }}\">\n\t\t\t</og-dropdown-list>\n\t\t</div>\n\n\t\t<div>\n\t\t\t${this.themeItem?.type ? html`\n\t\t\t\t<og-editor-ruleeditor \n\t\t\t\t\t.format=\"${this.themeItem}\"\n\t\t\t\t\t@change=\"${this._dispatchChange}\">\n\t\t\t\t</og-editor-ruleeditor>\n\t\t\t`: html`\n\t\t\t\t<og-editor-styleeditor \n\t\t\t\t\t@change=\"${this._onStyleChange}\"\n\t\t\t\t\t.data=\"${this.themeItem.style}\">\n\t\t\t\t</og-editor-styleeditor>\n\t\t\t`}\n\t\t</div>\n\t`;\n}\n"]}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@omegagrid/editor",
3
- "version": "0.10.92",
3
+ "version": "0.10.93",
4
4
  "license": "UNLICENSED",
5
5
  "description": "Spreadsheet editor",
6
6
  "main": "./dist/index.js",
@@ -27,15 +27,15 @@
27
27
  "_prepublish": "yarn test && yarn lint"
28
28
  },
29
29
  "dependencies": {
30
- "@omegagrid/commands": "^0.10.92",
31
- "@omegagrid/core": "^0.10.92",
32
- "@omegagrid/form": "^0.10.92",
33
- "@omegagrid/grid": "^0.10.92",
34
- "@omegagrid/localize": "^0.10.92",
35
- "@omegagrid/statusbar": "^0.10.92",
36
- "@omegagrid/tabs": "^0.10.92",
37
- "@omegagrid/toolbar": "^0.10.92",
38
- "@omegagrid/tree": "^0.10.92",
30
+ "@omegagrid/commands": "^0.10.93",
31
+ "@omegagrid/core": "^0.10.93",
32
+ "@omegagrid/form": "^0.10.93",
33
+ "@omegagrid/grid": "^0.10.93",
34
+ "@omegagrid/localize": "^0.10.93",
35
+ "@omegagrid/statusbar": "^0.10.93",
36
+ "@omegagrid/tabs": "^0.10.93",
37
+ "@omegagrid/toolbar": "^0.10.93",
38
+ "@omegagrid/tree": "^0.10.93",
39
39
  "lit": "^3.1.1",
40
40
  "lit-html": "^3.1.1",
41
41
  "ts-debounce": "^4.0.0"