@operato/data-grist 0.2.52 → 0.3.7

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 (131) hide show
  1. package/CHANGELOG.md +85 -0
  2. package/custom-elements.json +1311 -2838
  3. package/demo/index.html +72 -16
  4. package/dist/src/data-card/data-card-field.js +11 -2
  5. package/dist/src/data-card/data-card-field.js.map +1 -1
  6. package/dist/src/data-card/data-card-gutter-menu.d.ts +1 -1
  7. package/dist/src/data-card/data-card-gutter-menu.js +10 -6
  8. package/dist/src/data-card/data-card-gutter-menu.js.map +1 -1
  9. package/dist/src/data-card/data-card.js +0 -4
  10. package/dist/src/data-card/data-card.js.map +1 -1
  11. package/dist/src/data-card/event-handlers/record-card-click-handler.js +15 -15
  12. package/dist/src/data-card/event-handlers/record-card-click-handler.js.map +1 -1
  13. package/dist/src/data-card/record-card.js +9 -11
  14. package/dist/src/data-card/record-card.js.map +1 -1
  15. package/dist/src/data-grid/data-grid-header.d.ts +2 -2
  16. package/dist/src/data-grid/data-grid-header.js +14 -10
  17. package/dist/src/data-grid/data-grid-header.js.map +1 -1
  18. package/dist/src/data-grid/data-grid.js +0 -1
  19. package/dist/src/data-grid/data-grid.js.map +1 -1
  20. package/dist/src/data-list/data-list.js +0 -4
  21. package/dist/src/data-list/data-list.js.map +1 -1
  22. package/dist/src/data-list/event-handlers/record-partial-click-handler.js +15 -15
  23. package/dist/src/data-list/event-handlers/record-partial-click-handler.js.map +1 -1
  24. package/dist/src/filters/filter-checkbox.js +1 -0
  25. package/dist/src/filters/filter-checkbox.js.map +1 -1
  26. package/dist/src/filters/filter-input.js +1 -1
  27. package/dist/src/filters/filter-input.js.map +1 -1
  28. package/dist/src/filters/filter-range-date.js +1 -1
  29. package/dist/src/filters/filter-range-date.js.map +1 -1
  30. package/dist/src/filters/filter-range-number.js +2 -1
  31. package/dist/src/filters/filter-range-number.js.map +1 -1
  32. package/dist/src/filters/filter-select.d.ts +1 -1
  33. package/dist/src/filters/filter-select.js +1 -1
  34. package/dist/src/filters/filter-select.js.map +1 -1
  35. package/dist/src/filters/filters-form.d.ts +19 -0
  36. package/dist/src/filters/filters-form.js +99 -0
  37. package/dist/src/filters/filters-form.js.map +1 -0
  38. package/dist/src/filters/index.d.ts +1 -0
  39. package/dist/src/filters/index.js +1 -0
  40. package/dist/src/filters/index.js.map +1 -1
  41. package/dist/src/filters/registry.d.ts +5 -5
  42. package/dist/src/filters/registry.js +25 -25
  43. package/dist/src/filters/registry.js.map +1 -1
  44. package/dist/src/index.d.ts +2 -2
  45. package/dist/src/index.js +2 -2
  46. package/dist/src/index.js.map +1 -1
  47. package/dist/src/types.d.ts +4 -3
  48. package/dist/src/types.js.map +1 -1
  49. package/dist/tsconfig.tsbuildinfo +1 -1
  50. package/package.json +9 -8
  51. package/src/data-card/data-card-field.ts +11 -2
  52. package/src/data-card/data-card-gutter-menu.ts +11 -7
  53. package/src/data-card/data-card.ts +0 -5
  54. package/src/data-card/event-handlers/record-card-click-handler.ts +16 -18
  55. package/src/data-card/record-card.ts +9 -11
  56. package/src/data-grid/data-grid-header.ts +15 -10
  57. package/src/data-grid/data-grid.ts +0 -1
  58. package/src/data-list/data-list.ts +0 -5
  59. package/src/data-list/event-handlers/record-partial-click-handler.ts +16 -18
  60. package/src/filters/filter-checkbox.ts +1 -0
  61. package/src/filters/filter-input.ts +1 -1
  62. package/src/filters/filter-range-date.ts +1 -1
  63. package/src/filters/filter-range-number.ts +2 -1
  64. package/src/filters/filter-select.ts +3 -2
  65. package/src/filters/filters-form.ts +132 -0
  66. package/src/filters/index.ts +2 -0
  67. package/src/filters/registry.ts +26 -26
  68. package/src/index.ts +3 -3
  69. package/src/types.ts +34 -4
  70. package/tsconfig.json +3 -1
  71. package/dist/src/data-card/event-handlers/data-card-click-handler.d.ts +0 -6
  72. package/dist/src/data-card/event-handlers/data-card-click-handler.js +0 -16
  73. package/dist/src/data-card/event-handlers/data-card-click-handler.js.map +0 -1
  74. package/dist/src/data-card/event-handlers/data-card-dblclick-handler.d.ts +0 -6
  75. package/dist/src/data-card/event-handlers/data-card-dblclick-handler.js +0 -16
  76. package/dist/src/data-card/event-handlers/data-card-dblclick-handler.js.map +0 -1
  77. package/dist/src/data-list/event-handlers/data-list-click-handler.d.ts +0 -6
  78. package/dist/src/data-list/event-handlers/data-list-click-handler.js +0 -16
  79. package/dist/src/data-list/event-handlers/data-list-click-handler.js.map +0 -1
  80. package/dist/src/data-list/event-handlers/data-list-dblclick-handler.d.ts +0 -6
  81. package/dist/src/data-list/event-handlers/data-list-dblclick-handler.js +0 -16
  82. package/dist/src/data-list/event-handlers/data-list-dblclick-handler.js.map +0 -1
  83. package/dist/src/interfaces/index.d.ts +0 -2
  84. package/dist/src/interfaces/index.js +0 -3
  85. package/dist/src/interfaces/index.js.map +0 -1
  86. package/dist/src/interfaces/ox-grist-search-form.d.ts +0 -6
  87. package/dist/src/interfaces/ox-grist-search-form.js +0 -2
  88. package/dist/src/interfaces/ox-grist-search-form.js.map +0 -1
  89. package/dist/src/interfaces/ox-search-field.d.ts +0 -39
  90. package/dist/src/interfaces/ox-search-field.js +0 -2
  91. package/dist/src/interfaces/ox-search-field.js.map +0 -1
  92. package/dist/src/search-form/index.d.ts +0 -7
  93. package/dist/src/search-form/index.js +0 -8
  94. package/dist/src/search-form/index.js.map +0 -1
  95. package/dist/src/search-form/ox-basic-field.d.ts +0 -18
  96. package/dist/src/search-form/ox-basic-field.js +0 -75
  97. package/dist/src/search-form/ox-basic-field.js.map +0 -1
  98. package/dist/src/search-form/ox-checkbox-field.d.ts +0 -11
  99. package/dist/src/search-form/ox-checkbox-field.js +0 -60
  100. package/dist/src/search-form/ox-checkbox-field.js.map +0 -1
  101. package/dist/src/search-form/ox-grist-search-form.d.ts +0 -11
  102. package/dist/src/search-form/ox-grist-search-form.js +0 -177
  103. package/dist/src/search-form/ox-grist-search-form.js.map +0 -1
  104. package/dist/src/search-form/ox-number-field.d.ts +0 -14
  105. package/dist/src/search-form/ox-number-field.js +0 -112
  106. package/dist/src/search-form/ox-number-field.js.map +0 -1
  107. package/dist/src/search-form/ox-search-form.d.ts +0 -15
  108. package/dist/src/search-form/ox-search-form.js +0 -53
  109. package/dist/src/search-form/ox-search-form.js.map +0 -1
  110. package/dist/src/search-form/ox-select-field.d.ts +0 -21
  111. package/dist/src/search-form/ox-select-field.js +0 -181
  112. package/dist/src/search-form/ox-select-field.js.map +0 -1
  113. package/dist/src/search-form/ox-text-field.d.ts +0 -11
  114. package/dist/src/search-form/ox-text-field.js +0 -60
  115. package/dist/src/search-form/ox-text-field.js.map +0 -1
  116. package/src/data-card/event-handlers/data-card-click-handler.ts +0 -19
  117. package/src/data-card/event-handlers/data-card-dblclick-handler.ts +0 -19
  118. package/src/data-list/event-handlers/data-list-click-handler.ts +0 -19
  119. package/src/data-list/event-handlers/data-list-dblclick-handler.ts +0 -19
  120. package/src/interfaces/index.ts +0 -2
  121. package/src/interfaces/ox-grist-search-form.ts +0 -7
  122. package/src/interfaces/ox-search-field.ts +0 -52
  123. package/src/search-form/index.ts +0 -7
  124. package/src/search-form/ox-basic-field.ts +0 -86
  125. package/src/search-form/ox-checkbox-field.ts +0 -57
  126. package/src/search-form/ox-grist-search-form.ts +0 -200
  127. package/src/search-form/ox-number-field.ts +0 -113
  128. package/src/search-form/ox-search-form.ts +0 -71
  129. package/src/search-form/ox-select-field.ts +0 -188
  130. package/src/search-form/ox-text-field.ts +0 -55
  131. package/yarn-error.log +0 -16718
@@ -1,112 +0,0 @@
1
- import { __decorate } from "tslib";
2
- import '@material/mwc-icon';
3
- import { css, html } from 'lit';
4
- import { ifDefined } from 'lit-html/directives/if-defined.js';
5
- import { customElement, property } from 'lit/decorators.js';
6
- import { OXBasicField } from './ox-basic-field';
7
- let OXNumberField = class OXNumberField extends OXBasicField {
8
- setDefaultValue(defaultValue) {
9
- this.value = defaultValue;
10
- }
11
- render() {
12
- const { name, hidden, id, placeholder, min, max, step } = this.field;
13
- return html `
14
- <span class="input-wrapper" ?hidden=${hidden}>
15
- <button @click=${this.decrease.bind(this)}>
16
- <mwc-icon>add</mwc-icon>
17
- </button>
18
- <input
19
- id=${ifDefined(id)}
20
- name=${name}
21
- type="number"
22
- placeholder=${ifDefined(placeholder)}
23
- min=${ifDefined(min)}
24
- max=${ifDefined(max)}
25
- step=${ifDefined(step)}
26
- .value=${String(this.value) || ''}
27
- @change=${this.onChangeHandler.bind(this)}
28
- />
29
- <button @click=${this.increase.bind(this)}>
30
- <mwc-icon>remove</mwc-icon>
31
- </button>
32
- </span>
33
- `;
34
- }
35
- decrease() {
36
- var _a;
37
- let fractionDigits = 0;
38
- if (this.field.step) {
39
- fractionDigits = String(this.field.step).split('.')[1].length;
40
- }
41
- this.value = Number((((_a = this.value) !== null && _a !== void 0 ? _a : 0) - (this.field.step || 1)).toFixed(fractionDigits));
42
- }
43
- increase() {
44
- var _a;
45
- let fractionDigits = 0;
46
- if (this.field.step) {
47
- fractionDigits = String(this.field.step).split('.')[1].length;
48
- }
49
- this.value = Number((((_a = this.value) !== null && _a !== void 0 ? _a : 0) + (this.field.step || 1)).toFixed(fractionDigits));
50
- }
51
- onChangeHandler() {
52
- if (this.input.value) {
53
- this.value = Number(this.input.value);
54
- }
55
- else {
56
- this.value = undefined;
57
- }
58
- }
59
- };
60
- OXNumberField.styles = [
61
- css `
62
- :host {
63
- display: inline-flex;
64
- flex-direction: column;
65
- }
66
- input::-webkit-outer-spin-button,
67
- input::-webkit-inner-spin-button {
68
- -webkit-appearance: none;
69
- margin: 0;
70
- }
71
-
72
- span.input-wrapper {
73
- display: inline-flex;
74
- }
75
-
76
- button {
77
- padding: var(--padding-narrow);
78
- height: 24px;
79
- background-color: var(--theme-white-color);
80
- border: 1px solid rgba(var(--primary-color-rgb), 0.5);
81
- border-radius: 50%;
82
- opacity: 0.6;
83
- cursor: pointer;
84
- }
85
- button mwc-icon {
86
- font-size: var(--fontsize-default, 16px);
87
- color: var(--primary-text-color, #476172);
88
- }
89
- button:hover {
90
- opacity: 1;
91
- }
92
- input {
93
- border: none;
94
- outline: none;
95
- padding: 4px 9px;
96
- text-align: center;
97
- font-size: var(--fontsize-default, 14px);
98
- color: var(--primary-text-color, #476172);
99
- }
100
- `
101
- ];
102
- __decorate([
103
- property({ type: Object })
104
- ], OXNumberField.prototype, "field", void 0);
105
- __decorate([
106
- property({ type: Number })
107
- ], OXNumberField.prototype, "value", void 0);
108
- OXNumberField = __decorate([
109
- customElement('ox-number-field')
110
- ], OXNumberField);
111
- export { OXNumberField };
112
- //# sourceMappingURL=ox-number-field.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"ox-number-field.js","sourceRoot":"","sources":["../../../src/search-form/ox-number-field.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/mwc-icon'\n\nimport { css, CSSResult, html, TemplateResult } from 'lit'\nimport { ifDefined } from 'lit-html/directives/if-defined.js'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { OXNumberFieldProps } from '..'\nimport { OXBasicField } from './ox-basic-field'\n\n@customElement('ox-number-field')\nexport class OXNumberField extends OXBasicField {\n @property({ type: Object }) field!: OXNumberFieldProps\n @property({ type: Number }) value?: number\n\n setDefaultValue(defaultValue: number): void {\n this.value = defaultValue\n }\n\n static styles: CSSResult[] = [\n css`\n :host {\n display: inline-flex;\n flex-direction: column;\n }\n input::-webkit-outer-spin-button,\n input::-webkit-inner-spin-button {\n -webkit-appearance: none;\n margin: 0;\n }\n\n span.input-wrapper {\n display: inline-flex;\n }\n\n button {\n padding: var(--padding-narrow);\n height: 24px;\n background-color: var(--theme-white-color);\n border: 1px solid rgba(var(--primary-color-rgb), 0.5);\n border-radius: 50%;\n opacity: 0.6;\n cursor: pointer;\n }\n button mwc-icon {\n font-size: var(--fontsize-default, 16px);\n color: var(--primary-text-color, #476172);\n }\n button:hover {\n opacity: 1;\n }\n input {\n border: none;\n outline: none;\n padding: 4px 9px;\n text-align: center;\n font-size: var(--fontsize-default, 14px);\n color: var(--primary-text-color, #476172);\n }\n `\n ]\n\n render(): TemplateResult {\n const { name, hidden, id, placeholder, min, max, step } = this.field\n\n return html`\n <span class=\"input-wrapper\" ?hidden=${hidden}>\n <button @click=${this.decrease.bind(this)}>\n <mwc-icon>add</mwc-icon>\n </button>\n <input\n id=${ifDefined(id)}\n name=${name}\n type=\"number\"\n placeholder=${ifDefined(placeholder)}\n min=${ifDefined(min)}\n max=${ifDefined(max)}\n step=${ifDefined(step)}\n .value=${String(this.value) || ''}\n @change=${this.onChangeHandler.bind(this)}\n />\n <button @click=${this.increase.bind(this)}>\n <mwc-icon>remove</mwc-icon>\n </button>\n </span>\n `\n }\n\n decrease(): void {\n let fractionDigits: number = 0\n if (this.field.step) {\n fractionDigits = String(this.field.step).split('.')[1].length\n }\n\n this.value = Number(((this.value ?? 0) - (this.field.step || 1)).toFixed(fractionDigits))\n }\n\n increase(): void {\n let fractionDigits: number = 0\n if (this.field.step) {\n fractionDigits = String(this.field.step).split('.')[1].length\n }\n\n this.value = Number(((this.value ?? 0) + (this.field.step || 1)).toFixed(fractionDigits))\n }\n\n private onChangeHandler(): void {\n if (this.input.value) {\n this.value = Number(this.input.value)\n } else {\n this.value = undefined\n }\n }\n}\n"]}
@@ -1,15 +0,0 @@
1
- import './ox-text-field';
2
- import './ox-checkbox-field';
3
- import './ox-select-field';
4
- import './ox-number-field';
5
- import { LitElement, TemplateResult } from 'lit';
6
- import { OXCheckboxField, OXNumberField, OXSearchFieldProps, OXSelectField, OXTextField } from '..';
7
- export declare type OXSearchFieldTypes = OXTextField | OXNumberField | OXSelectField | OXCheckboxField;
8
- export declare class OXSearchForm extends LitElement {
9
- fields: OXSearchFieldProps[];
10
- form: HTMLFormElement;
11
- render(): TemplateResult;
12
- get searchFields(): OXSearchFieldTypes[];
13
- private renderField;
14
- _submitFieldHandler(): void;
15
- }
@@ -1,53 +0,0 @@
1
- import { __decorate } from "tslib";
2
- import './ox-text-field';
3
- import './ox-checkbox-field';
4
- import './ox-select-field';
5
- import './ox-number-field';
6
- import { LitElement, html } from 'lit';
7
- import { customElement, property, query } from 'lit/decorators.js';
8
- let OXSearchForm = class OXSearchForm extends LitElement {
9
- render() {
10
- return html `
11
- <form @submit-field=${this._submitFieldHandler.bind(this)}>
12
- <slot></slot>
13
- ${this.fields.map(this.renderField)}
14
- </form>
15
- `;
16
- }
17
- get searchFields() {
18
- return Array.from(this.form.querySelectorAll('*'));
19
- }
20
- renderField(field) {
21
- const { type } = field;
22
- switch (type) {
23
- case 'text':
24
- return html `<ox-text-field .field=${field}></ox-text-field>`;
25
- case 'number':
26
- return html `<ox-number-field .field=${field}></ox-number-field>`;
27
- case 'select':
28
- return html `<ox-select-field .field=${field}></ox-select-field>`;
29
- case 'checkbox':
30
- return html `<ox-checkbox-field .field=${field}></ox-checkbox-field>`;
31
- default:
32
- return html `<ox-text-field .field=${field}></ox-text-field>`;
33
- }
34
- }
35
- _submitFieldHandler() {
36
- this.dispatchEvent(new CustomEvent('submit', {
37
- composed: true,
38
- bubbles: true,
39
- cancelable: true
40
- })) && this.form.submit();
41
- }
42
- };
43
- __decorate([
44
- property({ type: Array })
45
- ], OXSearchForm.prototype, "fields", void 0);
46
- __decorate([
47
- query('form')
48
- ], OXSearchForm.prototype, "form", void 0);
49
- OXSearchForm = __decorate([
50
- customElement('ox-search-form')
51
- ], OXSearchForm);
52
- export { OXSearchForm };
53
- //# sourceMappingURL=ox-search-form.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"ox-search-form.js","sourceRoot":"","sources":["../../../src/search-form/ox-search-form.ts"],"names":[],"mappings":";AAAA,OAAO,iBAAiB,CAAA;AACxB,OAAO,qBAAqB,CAAA;AAC5B,OAAO,mBAAmB,CAAA;AAC1B,OAAO,mBAAmB,CAAA;AAE1B,OAAO,EAAE,UAAU,EAAkB,IAAI,EAAE,MAAM,KAAK,CAAA;AAYtD,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAY,MAAM,mBAAmB,CAAA;AAK5E,IAAa,YAAY,GAAzB,MAAa,YAAa,SAAQ,UAAU;IAK1C,MAAM;QACJ,OAAO,IAAI,CAAA;4BACa,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,IAAI,CAAC;;UAErD,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,IAAI,CAAC,WAAW,CAAC;;KAEtC,CAAA;IACH,CAAC;IAED,IAAI,YAAY;QACd,OAAO,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,GAAG,CAAC,CAAC,CAAA;IACpD,CAAC;IAEO,WAAW,CAAC,KAAyB;QAC3C,MAAM,EAAE,IAAI,EAAE,GAAG,KAAK,CAAA;QAEtB,QAAQ,IAAI,EAAE;YACZ,KAAK,MAAM;gBACT,OAAO,IAAI,CAAA,yBAAyB,KAAyB,mBAAmB,CAAA;YAElF,KAAK,QAAQ;gBACX,OAAO,IAAI,CAAA,2BAA2B,KAA2B,qBAAqB,CAAA;YAExF,KAAK,QAAQ;gBACX,OAAO,IAAI,CAAA,2BAA2B,KAA2B,qBAAqB,CAAA;YAExF,KAAK,UAAU;gBACb,OAAO,IAAI,CAAA,6BAA6B,KAA6B,uBAAuB,CAAA;YAE9F;gBACE,OAAO,IAAI,CAAA,yBAAyB,KAAyB,mBAAmB,CAAA;SACnF;IACH,CAAC;IAED,mBAAmB;QACjB,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,QAAQ,EAAE;YACxB,QAAQ,EAAE,IAAI;YACd,OAAO,EAAE,IAAI;YACb,UAAU,EAAE,IAAI;SACjB,CAAC,CACH,IAAI,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE,CAAA;IACzB,CAAC;CACF,CAAA;AA/C4B;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;4CAA8B;AAEzC;IAAd,KAAK,CAAC,MAAM,CAAC;0CAAuB;AAH1B,YAAY;IADxB,aAAa,CAAC,gBAAgB,CAAC;GACnB,YAAY,CAgDxB;SAhDY,YAAY","sourcesContent":["import './ox-text-field'\nimport './ox-checkbox-field'\nimport './ox-select-field'\nimport './ox-number-field'\n\nimport { LitElement, TemplateResult, html } from 'lit'\nimport {\n OXCheckboxField,\n OXCheckboxFieldProps,\n OXNumberField,\n OXNumberFieldProps,\n OXSearchFieldProps,\n OXSelectField,\n OXSelectFieldProps,\n OXTextField,\n OXTextFieldProps\n} from '..'\nimport { customElement, property, query, queryAll } from 'lit/decorators.js'\n\nexport type OXSearchFieldTypes = OXTextField | OXNumberField | OXSelectField | OXCheckboxField\n\n@customElement('ox-search-form')\nexport class OXSearchForm extends LitElement {\n @property({ type: Array }) fields!: OXSearchFieldProps[]\n\n @query('form') form!: HTMLFormElement\n\n render(): TemplateResult {\n return html`\n <form @submit-field=${this._submitFieldHandler.bind(this)}>\n <slot></slot>\n ${this.fields.map(this.renderField)}\n </form>\n `\n }\n\n get searchFields(): OXSearchFieldTypes[] {\n return Array.from(this.form.querySelectorAll('*'))\n }\n\n private renderField(field: OXSearchFieldProps): TemplateResult {\n const { type } = field\n\n switch (type) {\n case 'text':\n return html`<ox-text-field .field=${field as OXTextFieldProps}></ox-text-field>`\n\n case 'number':\n return html`<ox-number-field .field=${field as OXNumberFieldProps}></ox-number-field>`\n\n case 'select':\n return html`<ox-select-field .field=${field as OXSelectFieldProps}></ox-select-field>`\n\n case 'checkbox':\n return html`<ox-checkbox-field .field=${field as OXCheckboxFieldProps}></ox-checkbox-field>`\n\n default:\n return html`<ox-text-field .field=${field as OXTextFieldProps}></ox-text-field>`\n }\n }\n\n _submitFieldHandler(): void {\n this.dispatchEvent(\n new CustomEvent('submit', {\n composed: true,\n bubbles: true,\n cancelable: true\n })\n ) && this.form.submit()\n }\n}\n"]}
@@ -1,21 +0,0 @@
1
- import '@operato/popup';
2
- import '@material/mwc-icon';
3
- import { CSSResult, TemplateResult } from 'lit';
4
- import { OXFieldOptionProps, OXSelectFieldProps } from '..';
5
- import { OXBasicField } from './ox-basic-field';
6
- export declare class OXSelectField extends OXBasicField {
7
- field: OXSelectFieldProps;
8
- checked: boolean;
9
- searchCondition: string;
10
- value: string;
11
- static styles: CSSResult[];
12
- get input(): HTMLInputElement;
13
- get checkedOption(): OXFieldOptionProps;
14
- get displayValue(): string;
15
- get searchInput(): HTMLInputElement;
16
- setDefaultValue(defaultValue: any): void;
17
- render(): TemplateResult;
18
- openPopup(event: MouseEvent): void;
19
- onSearchInputHandler(): void;
20
- onValueChange(event: Event): void;
21
- }
@@ -1,181 +0,0 @@
1
- import { __decorate } from "tslib";
2
- import '@operato/popup';
3
- import '@material/mwc-icon';
4
- import { css, html } from 'lit';
5
- import { customElement, property } from 'lit/decorators.js';
6
- import { OXBasicField } from './ox-basic-field';
7
- import { ifDefined } from 'lit-html/directives/if-defined.js';
8
- let OXSelectField = class OXSelectField extends OXBasicField {
9
- constructor() {
10
- super(...arguments);
11
- this.checked = false;
12
- this.searchCondition = '';
13
- this.value = '';
14
- }
15
- get input() {
16
- const input = this.renderRoot.querySelector('input[readonly]');
17
- if (!input)
18
- throw new Error('Failed to find input element');
19
- return input;
20
- }
21
- get checkedOption() {
22
- if (!this.value)
23
- throw new Error('Value is not defined yet');
24
- const checkedOption = this.field.options.find((option) => option.value === this.value);
25
- if (!checkedOption)
26
- throw new Error('No checked option found');
27
- return checkedOption;
28
- }
29
- get displayValue() {
30
- try {
31
- return this.checkedOption.name || this.checkedOption.value;
32
- }
33
- catch (e) {
34
- return '';
35
- }
36
- }
37
- get searchInput() {
38
- const searchInput = this.renderRoot.querySelector('input#search-input');
39
- if (!searchInput)
40
- throw new Error('No search input found');
41
- return searchInput;
42
- }
43
- setDefaultValue(defaultValue) {
44
- const input = this.renderRoot.querySelector(`input[value="${defaultValue}"]`);
45
- if (!input)
46
- return;
47
- input.checked = true;
48
- const option = this.field.options.find((option) => option.value === defaultValue);
49
- if (!option)
50
- throw new Error('No matched option found');
51
- this.value = option.name || option.value;
52
- }
53
- render() {
54
- const { name, hidden, id, options, searchEnable = true, placeholder } = this.field;
55
- return html `
56
- <span class="input-wrapper" ?hidden=${hidden} @click=${this.openPopup.bind(this)}>
57
- <input
58
- id=${ifDefined(id)}
59
- name=${name}
60
- readonly
61
- placeholder=${ifDefined(placeholder)}
62
- .value=${this.displayValue}
63
- />
64
- <mwc-icon>keyboard_arrow_down</mwc-icon>
65
- </span>
66
-
67
- <ox-popup-list id="popup-list" multiple>
68
- ${searchEnable
69
- ? html `
70
- <div class="search-input-wrapper">
71
- <input id="search-input" type="text" @input=${this.onSearchInputHandler.bind(this)} />
72
- <mwc-icon>search</mwc-icon>
73
- </div>
74
- `
75
- : ''}
76
- ${options
77
- .filter((option) => option.value.indexOf(this.searchCondition) >= 0 ||
78
- (option.name && (option === null || option === void 0 ? void 0 : option.name.indexOf(this.searchCondition)) >= 0))
79
- .map((option) => html `
80
- <label option>
81
- <input
82
- name=${name}
83
- type="checkbox"
84
- .value=${option.value}
85
- @change=${this.onValueChange.bind(this)}
86
- .checked=${this.value === option.value}
87
- />
88
- <span>${option.name || option.value}</span>
89
- </label>
90
- `)}
91
- </ox-popup-list>
92
- `;
93
- }
94
- openPopup(event) {
95
- const popupList = this.renderRoot.querySelector('#popup-list');
96
- if (!popupList)
97
- throw new Error('Failed to find popup element');
98
- const offsetHeight = this.input.offsetHeight;
99
- const { x, y } = this.input.getBoundingClientRect();
100
- popupList.open({ left: x, top: y + offsetHeight });
101
- }
102
- onSearchInputHandler() {
103
- this.searchCondition = this.searchInput.value;
104
- }
105
- onValueChange(event) {
106
- if (this.value) {
107
- const prevCheckedInput = this.renderRoot.querySelector(`input[value=${this.value}`);
108
- if (prevCheckedInput)
109
- prevCheckedInput.checked = false;
110
- }
111
- const checkedInput = event.currentTarget;
112
- if (!checkedInput)
113
- throw new Error('No checked input found');
114
- if (checkedInput.value === this.value) {
115
- this.value = '';
116
- }
117
- else {
118
- const foundOption = this.field.options.find((option) => option.value === checkedInput.value);
119
- if (!foundOption)
120
- throw new Error('No matched option found');
121
- this.value = foundOption.value;
122
- }
123
- }
124
- };
125
- OXSelectField.styles = [
126
- css `
127
- :host > label {
128
- display: inline-flex;
129
- flex-direction: column;
130
- font-size: var(--fontsize-default, 14px);
131
- color: var(--primary-text-color, #476172);
132
- }
133
- .input-wrapper {
134
- display: inline-flex;
135
- }
136
- .input-wrapper mwc-icon {
137
- opacity: 0.7;
138
- font-size: var(--fontsize-default, 16px);
139
- color: var(--primary-text-color, #476172);
140
- line-height: 2;
141
- }
142
- input {
143
- border: none;
144
- outline: none;
145
- padding: 4px 9px;
146
- font-size: var(--fontsize-default, 14px);
147
- color: var(--primary-text-color, #476172);
148
- }
149
- .search-input-wrapper {
150
- display: inline-flex;
151
- border-bottom: var(--border-dark-color, 1px solid rgba(0, 0, 0, 0.15));
152
- }
153
- .search-input-wrapper mwc-icon {
154
- opacity: 0.7;
155
- font-size: 20px;
156
- color: var(--primary-text-color, #476172);
157
- }
158
- label[option] {
159
- display: inline-flex;
160
- margin: 5px 0px;
161
- gap: 5px;
162
- }
163
- `
164
- ];
165
- __decorate([
166
- property({ type: Object })
167
- ], OXSelectField.prototype, "field", void 0);
168
- __decorate([
169
- property({ type: Boolean })
170
- ], OXSelectField.prototype, "checked", void 0);
171
- __decorate([
172
- property({ type: String })
173
- ], OXSelectField.prototype, "searchCondition", void 0);
174
- __decorate([
175
- property({ type: String })
176
- ], OXSelectField.prototype, "value", void 0);
177
- OXSelectField = __decorate([
178
- customElement('ox-select-field')
179
- ], OXSelectField);
180
- export { OXSelectField };
181
- //# sourceMappingURL=ox-select-field.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"ox-select-field.js","sourceRoot":"","sources":["../../../src/search-form/ox-select-field.ts"],"names":[],"mappings":"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","sourcesContent":["import '@operato/popup'\nimport '@material/mwc-icon'\n\nimport { CSSResult, TemplateResult, css, html } from 'lit'\nimport { OXFieldOptionProps, OXSelectFieldProps } from '..'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { OXBasicField } from './ox-basic-field'\nimport { OxPopupList } from '@operato/popup'\nimport { ifDefined } from 'lit-html/directives/if-defined.js'\n\n@customElement('ox-select-field')\nexport class OXSelectField extends OXBasicField {\n @property({ type: Object }) field!: OXSelectFieldProps\n @property({ type: Boolean }) checked: boolean = false\n @property({ type: String }) searchCondition: string = ''\n @property({ type: String }) value: string = ''\n\n static styles: CSSResult[] = [\n css`\n :host > label {\n display: inline-flex;\n flex-direction: column;\n font-size: var(--fontsize-default, 14px);\n color: var(--primary-text-color, #476172);\n }\n .input-wrapper {\n display: inline-flex;\n }\n .input-wrapper mwc-icon {\n opacity: 0.7;\n font-size: var(--fontsize-default, 16px);\n color: var(--primary-text-color, #476172);\n line-height: 2;\n }\n input {\n border: none;\n outline: none;\n padding: 4px 9px;\n font-size: var(--fontsize-default, 14px);\n color: var(--primary-text-color, #476172);\n }\n .search-input-wrapper {\n display: inline-flex;\n border-bottom: var(--border-dark-color, 1px solid rgba(0, 0, 0, 0.15));\n }\n .search-input-wrapper mwc-icon {\n opacity: 0.7;\n font-size: 20px;\n color: var(--primary-text-color, #476172);\n }\n label[option] {\n display: inline-flex;\n margin: 5px 0px;\n gap: 5px;\n }\n `\n ]\n\n get input(): HTMLInputElement {\n const input: HTMLInputElement | null = this.renderRoot.querySelector('input[readonly]')\n if (!input) throw new Error('Failed to find input element')\n\n return input\n }\n\n get checkedOption(): OXFieldOptionProps {\n if (!this.value) throw new Error('Value is not defined yet')\n\n const checkedOption: OXFieldOptionProps | undefined = this.field.options.find(\n (option: OXFieldOptionProps) => option.value === this.value\n )\n if (!checkedOption) throw new Error('No checked option found')\n\n return checkedOption\n }\n\n get displayValue(): string {\n try {\n return this.checkedOption.name || this.checkedOption.value\n } catch (e) {\n return ''\n }\n }\n\n get searchInput(): HTMLInputElement {\n const searchInput: HTMLInputElement | null = this.renderRoot.querySelector('input#search-input')\n if (!searchInput) throw new Error('No search input found')\n\n return searchInput\n }\n\n setDefaultValue(defaultValue: any): void {\n const input: HTMLInputElement | null = this.renderRoot.querySelector(`input[value=\"${defaultValue}\"]`)\n if (!input) return\n input.checked = true\n\n const option: OXFieldOptionProps | undefined = this.field.options.find(\n (option: OXFieldOptionProps) => option.value === defaultValue\n )\n if (!option) throw new Error('No matched option found')\n\n this.value = option.name || option.value\n }\n\n render(): TemplateResult {\n const { name, hidden, id, options, searchEnable = true, placeholder } = this.field\n\n return html`\n <span class=\"input-wrapper\" ?hidden=${hidden} @click=${this.openPopup.bind(this)}>\n <input\n id=${ifDefined(id)}\n name=${name}\n readonly\n placeholder=${ifDefined(placeholder)}\n .value=${this.displayValue}\n />\n <mwc-icon>keyboard_arrow_down</mwc-icon>\n </span>\n\n <ox-popup-list id=\"popup-list\" multiple>\n ${searchEnable\n ? html`\n <div class=\"search-input-wrapper\">\n <input id=\"search-input\" type=\"text\" @input=${this.onSearchInputHandler.bind(this)} />\n <mwc-icon>search</mwc-icon>\n </div>\n `\n : ''}\n ${options\n .filter(\n (option: OXFieldOptionProps) =>\n option.value.indexOf(this.searchCondition) >= 0 ||\n (option.name && option?.name.indexOf(this.searchCondition) >= 0)\n )\n .map(\n (option: OXFieldOptionProps) => html`\n <label option>\n <input\n name=${name}\n type=\"checkbox\"\n .value=${option.value}\n @change=${this.onValueChange.bind(this)}\n .checked=${this.value === option.value}\n />\n <span>${option.name || option.value}</span>\n </label>\n `\n )}\n </ox-popup-list>\n `\n }\n\n openPopup(event: MouseEvent): void {\n const popupList: OxPopupList | null = this.renderRoot.querySelector('#popup-list')\n if (!popupList) throw new Error('Failed to find popup element')\n\n const offsetHeight: number = this.input.offsetHeight\n const { x, y } = this.input.getBoundingClientRect()\n\n popupList.open({ left: x, top: y + offsetHeight })\n }\n\n onSearchInputHandler(): void {\n this.searchCondition = this.searchInput.value\n }\n\n onValueChange(event: Event): void {\n if (this.value) {\n const prevCheckedInput: HTMLInputElement | null = this.renderRoot.querySelector(`input[value=${this.value}`)\n if (prevCheckedInput) prevCheckedInput.checked = false\n }\n\n const checkedInput: HTMLInputElement | null = event.currentTarget as HTMLInputElement | null\n if (!checkedInput) throw new Error('No checked input found')\n\n if (checkedInput.value === this.value) {\n this.value = ''\n } else {\n const foundOption: OXFieldOptionProps | undefined = this.field.options.find(\n (option: OXFieldOptionProps) => option.value === checkedInput.value\n )\n if (!foundOption) throw new Error('No matched option found')\n\n this.value = foundOption.value\n }\n }\n}\n"]}
@@ -1,11 +0,0 @@
1
- import { TemplateResult } from 'lit';
2
- import { OXTextFieldProps } from '..';
3
- import { OXBasicField } from './ox-basic-field';
4
- export declare class OXTextField extends OXBasicField {
5
- field: OXTextFieldProps;
6
- value: string;
7
- static styles: import("lit").CSSResult[];
8
- setDefaultValue(defaultValue: string): void;
9
- render(): TemplateResult;
10
- private onChangeHandler;
11
- }
@@ -1,60 +0,0 @@
1
- import { __decorate } from "tslib";
2
- import { css, html } from 'lit';
3
- import { customElement, property } from 'lit/decorators.js';
4
- import { ifDefined } from 'lit/directives/if-defined.js';
5
- import { OXBasicField } from './ox-basic-field';
6
- let OXTextField = class OXTextField extends OXBasicField {
7
- constructor() {
8
- super(...arguments);
9
- this.value = '';
10
- }
11
- setDefaultValue(defaultValue) {
12
- this.value = defaultValue;
13
- }
14
- render() {
15
- if (!this.field)
16
- return html ``;
17
- const { name, hidden, id, placeholder } = this.field;
18
- return html `
19
- <label>
20
- <span class="input-wrapper" ?hidden=${hidden}>
21
- <input
22
- id=${ifDefined(id)}
23
- name=${name}
24
- type="text"
25
- placeholder=${ifDefined(placeholder)}
26
- .value=${this.value}
27
- @input=${this.onChangeHandler.bind(this)}
28
- />
29
- </span>
30
- </label>
31
- `;
32
- }
33
- onChangeHandler() {
34
- this.value = this.input.value;
35
- }
36
- };
37
- OXTextField.styles = [
38
- ...OXBasicField.styles,
39
- css `
40
- label {
41
- display: inline-flex;
42
- flex-direction: column;
43
- }
44
- span.input-wrapper {
45
- display: inline-flex;
46
- border-bottom: var(--border-dark-color, 1px solid rgba(0, 0, 0, 0.15));
47
- }
48
- `
49
- ];
50
- __decorate([
51
- property({ type: Object })
52
- ], OXTextField.prototype, "field", void 0);
53
- __decorate([
54
- property({ type: String })
55
- ], OXTextField.prototype, "value", void 0);
56
- OXTextField = __decorate([
57
- customElement('ox-text-field')
58
- ], OXTextField);
59
- export { OXTextField };
60
- //# sourceMappingURL=ox-text-field.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"ox-text-field.js","sourceRoot":"","sources":["../../../src/search-form/ox-text-field.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAA;AAC/C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAC3D,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAA;AAGxD,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAA;AAG/C,IAAa,WAAW,GAAxB,MAAa,WAAY,SAAQ,YAAY;IAA7C;;QAE8B,UAAK,GAAW,EAAE,CAAA;IA4ChD,CAAC;IA5BC,eAAe,CAAC,YAAoB;QAClC,IAAI,CAAC,KAAK,GAAG,YAAY,CAAA;IAC3B,CAAC;IAED,MAAM;QACJ,IAAI,CAAC,IAAI,CAAC,KAAK;YAAE,OAAO,IAAI,CAAA,EAAE,CAAA;QAE9B,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE,EAAE,WAAW,EAAE,GAAG,IAAI,CAAC,KAAK,CAAA;QAEpD,OAAO,IAAI,CAAA;;8CAE+B,MAAM;;iBAEnC,SAAS,CAAC,EAAE,CAAC;mBACX,IAAI;;0BAEG,SAAS,CAAC,WAAW,CAAC;qBAC3B,IAAI,CAAC,KAAK;qBACV,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC;;;;KAI/C,CAAA;IACH,CAAC;IAEO,eAAe;QACrB,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,CAAA;IAC/B,CAAC;CACF,CAAA;AA1CQ,kBAAM,GAAG;IACd,GAAG,YAAY,CAAC,MAAM;IACtB,GAAG,CAAA;;;;;;;;;KASF;CACF,CAAA;AAf2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;0CAAyB;AACxB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;0CAAmB;AAFnC,WAAW;IADvB,aAAa,CAAC,eAAe,CAAC;GAClB,WAAW,CA8CvB;SA9CY,WAAW","sourcesContent":["import { css, html, TemplateResult } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport { ifDefined } from 'lit/directives/if-defined.js'\n\nimport { OXTextFieldProps } from '..'\nimport { OXBasicField } from './ox-basic-field'\n\n@customElement('ox-text-field')\nexport class OXTextField extends OXBasicField {\n @property({ type: Object }) field!: OXTextFieldProps\n @property({ type: String }) value: string = ''\n\n static styles = [\n ...OXBasicField.styles,\n css`\n label {\n display: inline-flex;\n flex-direction: column;\n }\n span.input-wrapper {\n display: inline-flex;\n border-bottom: var(--border-dark-color, 1px solid rgba(0, 0, 0, 0.15));\n }\n `\n ]\n\n setDefaultValue(defaultValue: string) {\n this.value = defaultValue\n }\n\n render(): TemplateResult {\n if (!this.field) return html``\n\n const { name, hidden, id, placeholder } = this.field\n\n return html`\n <label>\n <span class=\"input-wrapper\" ?hidden=${hidden}>\n <input\n id=${ifDefined(id)}\n name=${name}\n type=\"text\"\n placeholder=${ifDefined(placeholder)}\n .value=${this.value}\n @input=${this.onChangeHandler.bind(this)}\n />\n </span>\n </label>\n `\n }\n\n private onChangeHandler(): void {\n this.value = this.input.value\n }\n}\n"]}
@@ -1,19 +0,0 @@
1
- import { DataCardField } from '../data-card-field'
2
-
3
- /**
4
- * ox-card 의 click handler
5
- *
6
- * - handler의 this 는 ox-card임.
7
- */
8
- export function dataCardClickHandler(e: MouseEvent): void {
9
- e.stopPropagation()
10
-
11
- /* target should be 'ox-record-card' */
12
- var target = e.target as DataCardField
13
- var { record, rowIndex } = target
14
-
15
- /* do rows click handler */
16
- // var { click: rowsClick } = this.config.rows.handlers
17
- // var columns = this.config.columns
18
- // rowsClick && rowsClick(columns, this.data, null /* column */, record, rowIndex, target)
19
- }
@@ -1,19 +0,0 @@
1
- import { DataCardField } from '../data-card-field'
2
-
3
- /**
4
- * ox-card 의 dblclick handler
5
- *
6
- * - handler의 this 는 ox-card임.
7
- */
8
- export function dataCardDblclickHandler(e: MouseEvent): void {
9
- e.stopPropagation()
10
-
11
- /* target should be 'ox-record-card' */
12
- var target = e.target as DataCardField
13
- var { record, rowIndex } = target
14
-
15
- /* do rows dblclick handler */
16
- // var { click: rowsDblclick } = this.config.rows.handlers
17
- // var columns = this.config.columns
18
- // rowsDblclick && rowsDblclick(columns, this.data, null /* column */, record, rowIndex, target)
19
- }
@@ -1,19 +0,0 @@
1
- import { DataListField } from '../data-list-field'
2
-
3
- /**
4
- * ox-list 의 click handler
5
- *
6
- * - handler의 this 는 ox-list임.
7
- */
8
- export function dataListClickHandler(e: MouseEvent): void {
9
- e.stopPropagation()
10
-
11
- /* target should be 'record-partial' */
12
- var target = e.target as DataListField
13
- var { record, rowIndex } = target
14
-
15
- /* do rows click handler */
16
- // var { click: rowsClick } = this.config.rows.handlers
17
- // var columns = this.config.columns
18
- // rowsClick && rowsClick(columns, this.data, null /* column */, record, rowIndex, target)
19
- }
@@ -1,19 +0,0 @@
1
- import { DataListField } from '../data-list-field'
2
-
3
- /**
4
- * ox-list 의 dblclick handler
5
- *
6
- * - handler의 this 는 ox-list임.
7
- */
8
- export function dataListDblclickHandler(e: MouseEvent): void {
9
- e.stopPropagation()
10
-
11
- /* target should be 'record-partial' */
12
- var target = e.target as DataListField
13
- var { record, rowIndex } = target
14
-
15
- /* do rows dblclick handler */
16
- // var { click: rowsDblclick } = this.config.rows.handlers
17
- // var columns = this.config.columns
18
- // rowsDblclick && rowsDblclick(columns, this.data, null /* column */, record, rowIndex, target)
19
- }
@@ -1,2 +0,0 @@
1
- export * from './ox-search-field'
2
- export * from './ox-grist-search-form'
@@ -1,7 +0,0 @@
1
- export type QueryFilterRangeValue = [from: number, to: number]
2
-
3
- export type QueryFilter = {
4
- name: string
5
- operator?: string
6
- value: any
7
- }
@@ -1,52 +0,0 @@
1
- export type OXSearchFieldType = 'select' | 'checkbox' | 'text' | 'number'
2
-
3
- export interface OXFieldOptionProps {
4
- name?: string
5
- value: string
6
- }
7
-
8
- export interface OXBasicFieldProps {
9
- name: string
10
- type?: OXSearchFieldType
11
- hidden?: boolean
12
- id?: string
13
- placeholder?: string
14
- handlers?: Record<string, (event: Event) => void>
15
- defaultValue?: any
16
- operator?: string
17
- }
18
-
19
- export interface OXTextFieldProps extends OXBasicFieldProps {
20
- defaultValue?: string
21
- }
22
-
23
- export interface OXNumberFieldProps extends OXBasicFieldProps {
24
- min?: number
25
- max?: number
26
- step: number
27
- defaultValue?: number
28
- }
29
-
30
- export interface OXObjectFieldProps extends OXBasicFieldProps {
31
- field: string
32
- queryName: string
33
- defaultValue?: Record<string, any>
34
- }
35
-
36
- export interface OXSelectFieldProps extends OXBasicFieldProps {
37
- searchEnable?: boolean
38
- options: OXFieldOptionProps[]
39
- defaultValue?: any
40
- }
41
-
42
- export interface OXCheckboxFieldProps extends OXBasicFieldProps {
43
- indeterminate?: boolean
44
- defaultValue?: boolean
45
- }
46
-
47
- export type OXSearchFieldProps =
48
- | OXTextFieldProps
49
- | OXNumberFieldProps
50
- | OXObjectFieldProps
51
- | OXSelectFieldProps
52
- | OXCheckboxFieldProps