@operato/form 2.0.0-alpha.94 → 2.0.0-beta.1
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/CHANGELOG.md +280 -0
- package/dist/src/components/ox-custom-input.js +5 -5
- package/dist/src/components/ox-custom-input.js.map +1 -1
- package/dist/src/components/ox-custom-select.js +2 -1
- package/dist/src/components/ox-custom-select.js.map +1 -1
- package/dist/src/components/ox-file-uploader.js +1 -1
- package/dist/src/components/ox-file-uploader.js.map +1 -1
- package/dist/src/components/ox-search-form.d.ts +12 -23
- package/dist/src/components/ox-search-form.js +227 -91
- package/dist/src/components/ox-search-form.js.map +1 -1
- package/dist/src/filters/filter-checkbox.js +2 -1
- package/dist/src/filters/filter-checkbox.js.map +1 -1
- package/dist/src/filters/filter-input-barcode.js +5 -3
- package/dist/src/filters/filter-input-barcode.js.map +1 -1
- package/dist/src/filters/filter-input.js +2 -1
- package/dist/src/filters/filter-input.js.map +1 -1
- package/dist/src/filters/filter-range-date.js +3 -1
- package/dist/src/filters/filter-range-date.js.map +1 -1
- package/dist/src/filters/filter-range-number.js +3 -1
- package/dist/src/filters/filter-range-number.js.map +1 -1
- package/dist/src/filters/filter-select.js +23 -11
- package/dist/src/filters/filter-select.js.map +1 -1
- package/dist/src/filters/filter-styles.js +56 -24
- package/dist/src/filters/filter-styles.js.map +1 -1
- package/dist/src/filters/ox-filter-personalizer.d.ts +8 -0
- package/dist/src/filters/ox-filter-personalizer.js +175 -0
- package/dist/src/filters/ox-filter-personalizer.js.map +1 -0
- package/dist/src/filters/ox-filters-form-base.d.ts +13 -3
- package/dist/src/filters/ox-filters-form-base.js +196 -60
- package/dist/src/filters/ox-filters-form-base.js.map +1 -1
- package/dist/src/styles/multi-column-form-styles.js +6 -6
- package/dist/src/styles/multi-column-form-styles.js.map +1 -1
- package/dist/src/styles/search-form-styles.js +23 -18
- package/dist/src/styles/search-form-styles.js.map +1 -1
- package/dist/src/styles/single-column-form-styles.js +5 -5
- package/dist/src/styles/single-column-form-styles.js.map +1 -1
- package/dist/src/types.d.ts +42 -2
- package/dist/src/types.js.map +1 -1
- package/dist/stories/ox-filters-form-barcode.stories.d.ts +5 -0
- package/dist/stories/ox-filters-form-barcode.stories.js +51 -12
- package/dist/stories/ox-filters-form-barcode.stories.js.map +1 -1
- package/dist/stories/ox-filters-form-base-bounded.stories.d.ts +35 -0
- package/dist/stories/ox-filters-form-base-bounded.stories.js +187 -0
- package/dist/stories/ox-filters-form-base-bounded.stories.js.map +1 -0
- package/dist/stories/ox-filters-form-base-change-handler.stories.d.ts +35 -0
- package/dist/stories/ox-filters-form-base-change-handler.stories.js +199 -0
- package/dist/stories/ox-filters-form-base-change-handler.stories.js.map +1 -0
- package/dist/stories/ox-filters-form-base-page-preference.stories.d.ts +31 -0
- package/dist/stories/ox-filters-form-base-page-preference.stories.js +173 -0
- package/dist/stories/ox-filters-form-base-page-preference.stories.js.map +1 -0
- package/dist/stories/ox-filters-form-base.stories.d.ts +5 -0
- package/dist/stories/ox-filters-form-base.stories.js +57 -27
- package/dist/stories/ox-filters-form-base.stories.js.map +1 -1
- package/dist/stories/ox-search-form-change-handler.stories.d.ts +34 -0
- package/dist/stories/ox-search-form-change-handler.stories.js +227 -0
- package/dist/stories/ox-search-form-change-handler.stories.js.map +1 -0
- package/dist/stories/ox-search-form.stories.d.ts +45 -0
- package/dist/stories/ox-search-form.stories.js +235 -0
- package/dist/stories/ox-search-form.stories.js.map +1 -0
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +7 -5
- package/src/components/ox-custom-input.ts +5 -5
- package/src/components/ox-custom-select.ts +2 -1
- package/src/components/ox-file-uploader.ts +1 -1
- package/src/components/ox-search-form.ts +231 -97
- package/src/filters/filter-checkbox.ts +2 -1
- package/src/filters/filter-input-barcode.ts +5 -3
- package/src/filters/filter-input.ts +2 -1
- package/src/filters/filter-range-date.ts +3 -1
- package/src/filters/filter-range-number.ts +3 -1
- package/src/filters/filter-select.ts +29 -20
- package/src/filters/filter-styles.ts +56 -24
- package/src/filters/ox-filter-personalizer.ts +188 -0
- package/src/filters/ox-filters-form-base.ts +222 -79
- package/src/styles/multi-column-form-styles.ts +6 -6
- package/src/styles/search-form-styles.ts +23 -18
- package/src/styles/single-column-form-styles.ts +5 -5
- package/src/types.ts +48 -2
- package/stories/ox-filters-form-barcode.stories.ts +54 -14
- package/stories/ox-filters-form-base-bounded.stories.ts +213 -0
- package/stories/ox-filters-form-base-change-handler.stories.ts +225 -0
- package/stories/ox-filters-form-base-page-preference.stories.ts +192 -0
- package/stories/ox-filters-form-base.stories.ts +63 -31
- package/stories/ox-search-form-change-handler.stories.ts +252 -0
- package/stories/ox-search-form.stories.ts +269 -0
- package/themes/dark-hc.css +151 -0
- package/themes/dark-mc.css +151 -0
- package/themes/dark.css +151 -0
- package/themes/grist-theme.css +169 -0
- package/themes/light-hc.css +151 -0
- package/themes/light-mc.css +151 -0
- package/themes/light.css +151 -0
- package/themes/md-typescale-styles.css +100 -0
- package/themes/spacing.css +43 -0
- package/themes/state-color.css +6 -0
- package/themes/app-theme.css +0 -145
- package/themes/form-theme.css +0 -75
|
@@ -3,110 +3,179 @@ import '@material/web/icon/icon.js';
|
|
|
3
3
|
import './ox-custom-input.js';
|
|
4
4
|
import './ox-custom-select.js';
|
|
5
5
|
import gql from 'graphql-tag';
|
|
6
|
-
import { css, html, LitElement } from 'lit';
|
|
7
|
-
import { customElement, property, query, queryAll } from 'lit/decorators.js';
|
|
6
|
+
import { css, html, LitElement, nothing } from 'lit';
|
|
7
|
+
import { customElement, property, query, queryAll, queryAsync } from 'lit/decorators.js';
|
|
8
|
+
import { ifDefined } from 'lit/directives/if-defined.js';
|
|
9
|
+
import { until } from 'lit/directives/until.js';
|
|
10
|
+
import { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles';
|
|
8
11
|
import { buildArgs, client } from '@operato/graphql';
|
|
9
12
|
import { SearchFormStyles } from '../styles/search-form-styles.js';
|
|
10
|
-
|
|
13
|
+
function buildOptions(field, options) {
|
|
14
|
+
const selectOptionObjects = options.map(option => {
|
|
15
|
+
switch (typeof option) {
|
|
16
|
+
case 'string':
|
|
17
|
+
return {
|
|
18
|
+
name: option,
|
|
19
|
+
value: option
|
|
20
|
+
};
|
|
21
|
+
case 'object':
|
|
22
|
+
return {
|
|
23
|
+
name: option.name || option.display,
|
|
24
|
+
value: option.value
|
|
25
|
+
};
|
|
26
|
+
default:
|
|
27
|
+
return option;
|
|
28
|
+
}
|
|
29
|
+
});
|
|
30
|
+
return html `
|
|
31
|
+
${selectOptionObjects === null || selectOptionObjects === void 0 ? void 0 : selectOptionObjects.map(({ value, display, name }) => html `
|
|
32
|
+
<option ?selected=${value == field.value} value=${value}>${name || display}</option>
|
|
33
|
+
`)}
|
|
34
|
+
`;
|
|
35
|
+
}
|
|
36
|
+
let OxSearchForm = class OxSearchForm extends LitElement {
|
|
11
37
|
constructor() {
|
|
12
38
|
super(...arguments);
|
|
13
39
|
this.hideSearchButton = false;
|
|
14
40
|
this.autofocus = false;
|
|
41
|
+
this.autoUpdateTargetsOnChange = {};
|
|
15
42
|
}
|
|
16
43
|
render() {
|
|
17
44
|
var autofocusConsumed = 0;
|
|
18
45
|
return html `
|
|
19
46
|
<form
|
|
20
|
-
class="search-form"
|
|
21
|
-
@
|
|
22
|
-
|
|
23
|
-
|
|
47
|
+
class="search-form md-typescale-body-medium-prominent"
|
|
48
|
+
@change=${async (e) => {
|
|
49
|
+
var _a;
|
|
50
|
+
const field = e.target;
|
|
51
|
+
const name = field === null || field === void 0 ? void 0 : field.getAttribute('name');
|
|
52
|
+
const value = field.value;
|
|
53
|
+
if (name && this.autoUpdateTargetsOnChange[name]) {
|
|
54
|
+
;
|
|
55
|
+
(this.autoUpdateTargetsOnChange[name] || []).forEach(name => {
|
|
56
|
+
const target = this.renderRoot.querySelector(`[name='${name}']`);
|
|
57
|
+
if (target) {
|
|
58
|
+
;
|
|
59
|
+
target.value = '';
|
|
60
|
+
}
|
|
61
|
+
});
|
|
62
|
+
this.requestUpdate();
|
|
63
|
+
}
|
|
64
|
+
const { onchange } = ((_a = this.fields) === null || _a === void 0 ? void 0 : _a.find(field => field.name == name)) || {};
|
|
65
|
+
const keepGoing = onchange ? await onchange.call(null, value, this) : true;
|
|
66
|
+
if (keepGoing) {
|
|
67
|
+
this.dispatchEvent(new CustomEvent('change', { detail: value }));
|
|
24
68
|
this.submit();
|
|
25
69
|
}
|
|
26
70
|
}}
|
|
27
71
|
>
|
|
28
72
|
${(this.fields || []).map(field => html `
|
|
29
73
|
${field.type === 'select'
|
|
30
|
-
?
|
|
31
|
-
<label ?hidden=${field.hidden}>${field.label || field.name || field.id}</label>
|
|
32
|
-
<select
|
|
33
|
-
.value=${field.value}
|
|
34
|
-
.name=${field.name}
|
|
35
|
-
?hidden=${field.hidden}
|
|
36
|
-
.placeholder=${field.placeholder || ''}
|
|
37
|
-
>
|
|
38
|
-
${(field.options || []).map((option) => html `
|
|
39
|
-
<option ?selected=${option.value == field.value} value=${option.value}>${option.name}</option>
|
|
40
|
-
`)}
|
|
41
|
-
</select>
|
|
42
|
-
`
|
|
74
|
+
? this.renderSelect(field)
|
|
43
75
|
: field.type === 'checkbox'
|
|
44
|
-
?
|
|
45
|
-
<input
|
|
46
|
-
id="ckbx_${field.name}"
|
|
47
|
-
type="checkbox"
|
|
48
|
-
?checked="${field.value}"
|
|
49
|
-
.name=${field.name}
|
|
50
|
-
?hidden=${field.hidden}
|
|
51
|
-
@click=${(e) => {
|
|
52
|
-
const checkbox = e.currentTarget;
|
|
53
|
-
if (checkbox.hasAttribute('indeterminate')) {
|
|
54
|
-
const values = [undefined, 'on', 'off'];
|
|
55
|
-
const currentValue = checkbox._value;
|
|
56
|
-
const newValue = values.indexOf(currentValue) + 1 > values.length - 1
|
|
57
|
-
? values[0]
|
|
58
|
-
: values[values.indexOf(currentValue) + 1];
|
|
59
|
-
if (newValue === 'on') {
|
|
60
|
-
checkbox.checked = true;
|
|
61
|
-
}
|
|
62
|
-
else if (newValue === 'off') {
|
|
63
|
-
checkbox.checked = false;
|
|
64
|
-
}
|
|
65
|
-
else {
|
|
66
|
-
checkbox.indeterminate = true;
|
|
67
|
-
}
|
|
68
|
-
checkbox._value = newValue;
|
|
69
|
-
}
|
|
70
|
-
}}
|
|
71
|
-
/>
|
|
72
|
-
<label for="ckbx_${field.name}" ?hidden=${field.hidden}
|
|
73
|
-
>${field.label || field.name || field.id}</label
|
|
74
|
-
>
|
|
75
|
-
`
|
|
76
|
+
? this.renderCheckbox(field)
|
|
76
77
|
: field.type === 'object'
|
|
77
|
-
?
|
|
78
|
-
|
|
79
|
-
<input
|
|
80
|
-
.type=${field.type}
|
|
81
|
-
.value=${field.value || ''}
|
|
82
|
-
.name=${field.name}
|
|
83
|
-
.field=${field.field}
|
|
84
|
-
.queryName=${field.queryName}
|
|
85
|
-
.placeholder=${field.placeholder || ''}
|
|
86
|
-
?hidden=${field.hidden}
|
|
87
|
-
?autofocus=${!field.hidden && 0 === autofocusConsumed++}
|
|
88
|
-
/>
|
|
89
|
-
`
|
|
90
|
-
: html `
|
|
91
|
-
<label ?hidden=${field.hidden}>${field.label || field.name || field.id}</label>
|
|
92
|
-
<input
|
|
93
|
-
.type=${field.type}
|
|
94
|
-
.value=${field.value || ''}
|
|
95
|
-
.name=${field.name}
|
|
96
|
-
.placeholder=${field.placeholder || ''}
|
|
97
|
-
?hidden=${field.hidden}
|
|
98
|
-
?autofocus=${!field.hidden && 0 === autofocusConsumed++}
|
|
99
|
-
/>
|
|
100
|
-
`}
|
|
78
|
+
? this.renderObject(field, autofocusConsumed++)
|
|
79
|
+
: this.renderElse(field, autofocusConsumed++)}
|
|
101
80
|
`)}
|
|
102
|
-
${this.hideSearchButton
|
|
103
|
-
?
|
|
81
|
+
${!!this.hideSearchButton
|
|
82
|
+
? nothing
|
|
104
83
|
: html `<md-icon @click=${(e) => this.submit()} search>search</md-icon>`}
|
|
105
84
|
</form>
|
|
106
85
|
`;
|
|
107
86
|
}
|
|
87
|
+
renderSelect(field) {
|
|
88
|
+
var { id, options, readonly, label, name, value, placeholder, hidden } = field;
|
|
89
|
+
if (typeof options === 'function') {
|
|
90
|
+
options = options.call(field, this);
|
|
91
|
+
if (options instanceof Promise) {
|
|
92
|
+
var optionsTemplate = html `${until(options.then(options => buildOptions(field, options)))}`;
|
|
93
|
+
}
|
|
94
|
+
else {
|
|
95
|
+
var optionsTemplate = buildOptions(field, (options || []));
|
|
96
|
+
}
|
|
97
|
+
}
|
|
98
|
+
else {
|
|
99
|
+
var optionsTemplate = buildOptions(field, (options || []));
|
|
100
|
+
}
|
|
101
|
+
return html `
|
|
102
|
+
<label ?hidden=${hidden}>${label || name || id}</label>
|
|
103
|
+
<select
|
|
104
|
+
.value=${value}
|
|
105
|
+
name=${ifDefined(name)}
|
|
106
|
+
placeholder=${ifDefined(placeholder)}
|
|
107
|
+
?hidden=${hidden}
|
|
108
|
+
?readonly=${readonly}
|
|
109
|
+
>
|
|
110
|
+
${optionsTemplate}
|
|
111
|
+
</select>
|
|
112
|
+
`;
|
|
113
|
+
}
|
|
114
|
+
renderCheckbox(field) {
|
|
115
|
+
return html `
|
|
116
|
+
<input
|
|
117
|
+
id="ckbx_${field.name}"
|
|
118
|
+
type="checkbox"
|
|
119
|
+
name=${ifDefined(field.name)}
|
|
120
|
+
?checked=${field.value}
|
|
121
|
+
?hidden=${field.hidden}
|
|
122
|
+
?readonly=${field.readonly}
|
|
123
|
+
@click=${(e) => {
|
|
124
|
+
const checkbox = e.currentTarget;
|
|
125
|
+
if (checkbox.hasAttribute('indeterminate')) {
|
|
126
|
+
const values = [undefined, 'on', 'off'];
|
|
127
|
+
const currentValue = checkbox._value;
|
|
128
|
+
const newValue = values.indexOf(currentValue) + 1 > values.length - 1
|
|
129
|
+
? values[0]
|
|
130
|
+
: values[values.indexOf(currentValue) + 1];
|
|
131
|
+
if (newValue === 'on') {
|
|
132
|
+
checkbox.checked = true;
|
|
133
|
+
}
|
|
134
|
+
else if (newValue === 'off') {
|
|
135
|
+
checkbox.checked = false;
|
|
136
|
+
}
|
|
137
|
+
else {
|
|
138
|
+
checkbox.indeterminate = true;
|
|
139
|
+
}
|
|
140
|
+
checkbox._value = newValue;
|
|
141
|
+
}
|
|
142
|
+
}}
|
|
143
|
+
/>
|
|
144
|
+
<label for="ckbx_${field.name}" ?hidden=${field.hidden}>${field.label || field.name || field.id}</label>
|
|
145
|
+
`;
|
|
146
|
+
}
|
|
147
|
+
renderObject(field, autofocusConsumed) {
|
|
148
|
+
return html `
|
|
149
|
+
<label ?hidden=${field.hidden}>${field.label || field.name || field.id}</label>
|
|
150
|
+
<input
|
|
151
|
+
.type=${field.type}
|
|
152
|
+
name=${ifDefined(field.name)}
|
|
153
|
+
placeholder=${ifDefined(field.placeholder)}
|
|
154
|
+
.value=${field.value || ''}
|
|
155
|
+
.field=${field.field}
|
|
156
|
+
.queryName=${field.queryName}
|
|
157
|
+
?hidden=${field.hidden}
|
|
158
|
+
?readonly=${field.readonly}
|
|
159
|
+
?autofocus=${!field.hidden && 0 === autofocusConsumed}
|
|
160
|
+
/>
|
|
161
|
+
`;
|
|
162
|
+
}
|
|
163
|
+
renderElse(field, autofocusConsumed) {
|
|
164
|
+
return html `
|
|
165
|
+
<label ?hidden=${field.hidden}>${field.label || field.name || field.id}</label>
|
|
166
|
+
<input
|
|
167
|
+
.type=${field.type}
|
|
168
|
+
.value=${field.value || ''}
|
|
169
|
+
name=${ifDefined(field.name)}
|
|
170
|
+
placeholder=${ifDefined(field.placeholder)}
|
|
171
|
+
?hidden=${field.hidden}
|
|
172
|
+
?readonly=${field.readonly}
|
|
173
|
+
?autofocus=${!field.hidden && 0 === autofocusConsumed++}
|
|
174
|
+
/>
|
|
175
|
+
`;
|
|
176
|
+
}
|
|
108
177
|
async updated(changes) {
|
|
109
|
-
var _a;
|
|
178
|
+
var _a, _b;
|
|
110
179
|
if (changes.has('fields')) {
|
|
111
180
|
this._checkInputValidity();
|
|
112
181
|
var formFields = Array.from(this.formFields);
|
|
@@ -141,8 +210,20 @@ let SearchForm = class SearchForm extends LitElement {
|
|
|
141
210
|
await this.requestUpdate();
|
|
142
211
|
(_a = this.autofocused) === null || _a === void 0 ? void 0 : _a.focus();
|
|
143
212
|
}
|
|
213
|
+
this.autoUpdateTargetsOnChange = {};
|
|
214
|
+
(_b = this.fields) === null || _b === void 0 ? void 0 : _b.filter(filter => filter.boundTo && filter.boundTo.length > 0).map(({ name, boundTo }) => {
|
|
215
|
+
boundTo.forEach(to => {
|
|
216
|
+
const origin = this.autoUpdateTargetsOnChange[to] || [];
|
|
217
|
+
if (name && !origin.includes(name)) {
|
|
218
|
+
this.autoUpdateTargetsOnChange[to] = [...origin, name];
|
|
219
|
+
}
|
|
220
|
+
});
|
|
221
|
+
});
|
|
144
222
|
}
|
|
145
223
|
}
|
|
224
|
+
getFieldByName(name) {
|
|
225
|
+
return this.renderRoot.querySelector(`[name=${name}]`);
|
|
226
|
+
}
|
|
146
227
|
_checkInputValidity() {
|
|
147
228
|
var _a;
|
|
148
229
|
const names = ((_a = this.fields) === null || _a === void 0 ? void 0 : _a.map(i => i.name)) || [];
|
|
@@ -256,46 +337,101 @@ let SearchForm = class SearchForm extends LitElement {
|
|
|
256
337
|
});
|
|
257
338
|
return data;
|
|
258
339
|
}
|
|
340
|
+
reset(value) {
|
|
341
|
+
this.form
|
|
342
|
+
.then((form) => {
|
|
343
|
+
if (value) {
|
|
344
|
+
if (value instanceof Array) {
|
|
345
|
+
value
|
|
346
|
+
.filter(item => typeof item == 'string')
|
|
347
|
+
.forEach(item => {
|
|
348
|
+
const field = this.getFieldByName(item);
|
|
349
|
+
if (field) {
|
|
350
|
+
;
|
|
351
|
+
field.value = '';
|
|
352
|
+
}
|
|
353
|
+
});
|
|
354
|
+
}
|
|
355
|
+
else {
|
|
356
|
+
const keys = Object.keys(value);
|
|
357
|
+
keys
|
|
358
|
+
.filter(key => typeof key == 'string')
|
|
359
|
+
.forEach(key => {
|
|
360
|
+
const field = this.getFieldByName(key);
|
|
361
|
+
if (field) {
|
|
362
|
+
;
|
|
363
|
+
field.value = value[key];
|
|
364
|
+
}
|
|
365
|
+
});
|
|
366
|
+
}
|
|
367
|
+
}
|
|
368
|
+
else {
|
|
369
|
+
form.reset();
|
|
370
|
+
}
|
|
371
|
+
})
|
|
372
|
+
.catch((error) => {
|
|
373
|
+
console.error('Error resetting the form:', error);
|
|
374
|
+
});
|
|
375
|
+
}
|
|
259
376
|
submit() {
|
|
260
377
|
this.dispatchEvent(new CustomEvent('submit'));
|
|
261
378
|
}
|
|
262
379
|
};
|
|
263
|
-
|
|
380
|
+
OxSearchForm.styles = [
|
|
381
|
+
MDTypeScaleStyles,
|
|
264
382
|
SearchFormStyles,
|
|
265
383
|
css `
|
|
266
384
|
:host {
|
|
267
385
|
display: flex;
|
|
268
386
|
flex-direction: column;
|
|
387
|
+
padding: var(--spacing-small);
|
|
269
388
|
|
|
270
389
|
position: relative;
|
|
271
390
|
}
|
|
272
391
|
|
|
273
392
|
::placeholder {
|
|
274
393
|
text-transform: capitalize;
|
|
275
|
-
color: var(--
|
|
394
|
+
color: rgba(var(--secondary-color-rgb), 0.5);
|
|
395
|
+
}
|
|
396
|
+
label {
|
|
397
|
+
font-size: var(--md-sys-typescale-label-large-size, 0.875rem);
|
|
398
|
+
color: var(--md-sys-color-primary);
|
|
399
|
+
}
|
|
400
|
+
select,
|
|
401
|
+
input {
|
|
402
|
+
border: none;
|
|
403
|
+
border-bottom: var(--ox-filters-input-border, 1px solid var(--md-sys-color-outline));
|
|
404
|
+
font: var(--ox-filters-input-font);
|
|
405
|
+
}
|
|
406
|
+
|
|
407
|
+
select:focus,
|
|
408
|
+
input:focus {
|
|
409
|
+
outline: none;
|
|
410
|
+
border-bottom: var(--ox-filters-input-focus-border, 1px solid var(--md-ref-palette-primary50));
|
|
411
|
+
color: var(--ox-filters-input-focus-color, var(--md-sys-color-primary));
|
|
276
412
|
}
|
|
277
413
|
`
|
|
278
414
|
];
|
|
279
415
|
__decorate([
|
|
280
416
|
property({ type: Array })
|
|
281
|
-
],
|
|
417
|
+
], OxSearchForm.prototype, "fields", void 0);
|
|
282
418
|
__decorate([
|
|
283
419
|
property({ type: Boolean })
|
|
284
|
-
],
|
|
420
|
+
], OxSearchForm.prototype, "hideSearchButton", void 0);
|
|
285
421
|
__decorate([
|
|
286
422
|
property({ type: Boolean, attribute: true })
|
|
287
|
-
],
|
|
423
|
+
], OxSearchForm.prototype, "autofocus", void 0);
|
|
288
424
|
__decorate([
|
|
289
|
-
|
|
290
|
-
],
|
|
425
|
+
queryAsync('form')
|
|
426
|
+
], OxSearchForm.prototype, "form", void 0);
|
|
291
427
|
__decorate([
|
|
292
428
|
query('input[autofocus]')
|
|
293
|
-
],
|
|
429
|
+
], OxSearchForm.prototype, "autofocused", void 0);
|
|
294
430
|
__decorate([
|
|
295
431
|
queryAll('input, select')
|
|
296
|
-
],
|
|
297
|
-
|
|
432
|
+
], OxSearchForm.prototype, "formFields", void 0);
|
|
433
|
+
OxSearchForm = __decorate([
|
|
298
434
|
customElement('ox-search-form')
|
|
299
|
-
],
|
|
300
|
-
export {
|
|
435
|
+
], OxSearchForm);
|
|
436
|
+
export { OxSearchForm };
|
|
301
437
|
//# sourceMappingURL=ox-search-form.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ox-search-form.js","sourceRoot":"","sources":["../../../src/components/ox-search-form.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\nimport './ox-custom-input.js'\nimport './ox-custom-select.js'\n\nimport gql from 'graphql-tag'\nimport { css, html, LitElement, PropertyValues } from 'lit'\nimport { customElement, property, query, queryAll } from 'lit/decorators.js'\n\nimport { buildArgs, client } from '@operato/graphql'\n\nimport { SearchFormStyles } from '../styles/search-form-styles.js'\n\n@customElement('ox-search-form')\nexport class SearchForm extends LitElement {\n static styles = [\n SearchFormStyles,\n css`\n :host {\n display: flex;\n flex-direction: column;\n\n position: relative;\n }\n\n ::placeholder {\n text-transform: capitalize;\n color: var(--theme-white-color);\n }\n `\n ]\n\n @property({ type: Array }) fields?: {\n type: string\n hidden: boolean\n name: string\n id: string\n label: string\n placeholder: string\n value: any\n field: string\n queryName: string\n props: { [prop: string]: string }\n attrs: string[]\n options: { name: string; value: string }[]\n handlers: { [event: string]: EventListener }\n }[]\n @property({ type: Boolean }) hideSearchButton: boolean = false\n @property({ type: Boolean, attribute: true }) autofocus: boolean = false\n\n @query('form') form!: HTMLFormElement\n @query('input[autofocus]') autofocused?: HTMLInputElement\n @queryAll('input, select') formFields!: ((HTMLInputElement | HTMLSelectElement) & { field: string; _value: any })[]\n\n render() {\n var autofocusConsumed = 0\n\n return html`\n <form\n class=\"search-form\"\n @keypress=${(e: KeyboardEvent) => {\n if (e.key === 'Enter') {\n e.preventDefault()\n this.submit()\n }\n }}\n >\n ${(this.fields || []).map(\n field => html`\n ${field.type === 'select'\n ? html`\n <label ?hidden=${field.hidden}>${field.label || field.name || field.id}</label>\n <select\n .value=${field.value}\n .name=${field.name}\n ?hidden=${field.hidden}\n .placeholder=${field.placeholder || ''}\n >\n ${(field.options || []).map(\n (option: { name: string; value: string }) => html`\n <option ?selected=${option.value == field.value} value=${option.value}>${option.name}</option>\n `\n )}\n </select>\n `\n : field.type === 'checkbox'\n ? html`\n <input\n id=\"ckbx_${field.name}\"\n type=\"checkbox\"\n ?checked=\"${field.value}\"\n .name=${field.name}\n ?hidden=${field.hidden}\n @click=${(e: MouseEvent) => {\n const checkbox = e.currentTarget as HTMLInputElement & { _value: any }\n if (checkbox.hasAttribute('indeterminate')) {\n const values = [undefined, 'on', 'off']\n const currentValue = checkbox._value\n const newValue =\n values.indexOf(currentValue) + 1 > values.length - 1\n ? values[0]\n : values[values.indexOf(currentValue) + 1]\n\n if (newValue === 'on') {\n checkbox.checked = true\n } else if (newValue === 'off') {\n checkbox.checked = false\n } else {\n checkbox.indeterminate = true\n }\n checkbox._value = newValue\n }\n }}\n />\n <label for=\"ckbx_${field.name}\" ?hidden=${field.hidden}\n >${field.label || field.name || field.id}</label\n >\n `\n : field.type === 'object'\n ? html`\n <label ?hidden=${field.hidden}>${field.label || field.name || field.id}</label>\n <input\n .type=${field.type}\n .value=${field.value || ''}\n .name=${field.name}\n .field=${field.field}\n .queryName=${field.queryName}\n .placeholder=${field.placeholder || ''}\n ?hidden=${field.hidden}\n ?autofocus=${!field.hidden && 0 === autofocusConsumed++}\n />\n `\n : html`\n <label ?hidden=${field.hidden}>${field.label || field.name || field.id}</label>\n <input\n .type=${field.type}\n .value=${field.value || ''}\n .name=${field.name}\n .placeholder=${field.placeholder || ''}\n ?hidden=${field.hidden}\n ?autofocus=${!field.hidden && 0 === autofocusConsumed++}\n />\n `}\n `\n )}\n ${this.hideSearchButton || false\n ? ``\n : html`<md-icon @click=${(e: MouseEvent) => this.submit()} search>search</md-icon>`}\n </form>\n `\n }\n\n async updated(changes: PropertyValues<this>) {\n if (changes.has('fields')) {\n this._checkInputValidity()\n\n var formFields = Array.from(this.formFields)\n this.fields &&\n this.fields.forEach(field => {\n var formField = formFields.find(f => f.name == field.name)\n if (field.props instanceof Object && !Array.isArray(field.props)) {\n for (let prop in field.props) {\n if (field.props[prop]) {\n formField!.setAttribute(prop, field.props[prop])\n }\n }\n }\n\n if (field.attrs && Array.isArray(field.attrs)) {\n field.attrs.forEach(attr => {\n if (attr === 'indeterminate') {\n ;(formField as HTMLInputElement).indeterminate = true\n } else {\n formField!.setAttribute(attr, '')\n }\n })\n }\n\n if (field.handlers instanceof Object && !Array.isArray(field.handlers)) {\n for (let eventName in field.handlers) {\n formField!.addEventListener(eventName, field.handlers[eventName])\n }\n }\n })\n\n if (this.autofocus) {\n await this.requestUpdate()\n this.autofocused?.focus()\n }\n }\n }\n\n _checkInputValidity() {\n const names = this.fields?.map(i => i.name) || []\n const result = names.every(name => {\n return names.indexOf(name) === names.lastIndexOf(name)\n })\n if (!result) {\n throw new Error('Field name is duplicated.')\n }\n }\n\n get searchParams() {\n let searchParam = new URLSearchParams()\n const fields = Array.from(this.formFields)\n fields.forEach(field => searchParam.append(field.name, field.value))\n\n return decodeURI(searchParam.toString())\n }\n\n get queryFilters() {\n return Array.from(this.formFields)\n .filter(\n field =>\n (field.type !== 'checkbox' && field.value && field.value !== '') ||\n (field.type === 'checkbox' && !field.hasAttribute('indeterminate')) ||\n (field.type === 'checkbox' && field.hasAttribute('indeterminate') && field._value)\n )\n .map(field => {\n const operator = field.getAttribute('searchOper') || ''\n let value = operator.indexOf('like') >= 0 ? `%${field.value}%` : field.value\n return {\n name: field.name,\n value:\n field.type === 'text'\n ? value\n : field.type === 'checkbox'\n ? field.hasAttribute('indeterminate')\n ? field._value === 'on'\n ? true\n : false\n : (field as HTMLInputElement).checked\n : field.type === 'number'\n ? parseFloat(value)\n : value,\n operator\n }\n })\n }\n\n public async getQueryFilters() {\n return await Promise.all(\n Array.from(this.formFields)\n .filter(\n field =>\n (field.type !== 'checkbox' && field.value && field.value !== '') ||\n (field.type === 'checkbox' && !field.hasAttribute('indeterminate')) ||\n (field.type === 'checkbox' && field.hasAttribute('indeterminate') && field._value)\n )\n .map(async field => {\n const name = field.name\n const operator = (field.type === 'text' && field.field ? 'in' : field.getAttribute('searchOper')) || ''\n const value = operator.indexOf('like') >= 0 ? `%${field.value}%` : field.value\n const filter = {\n name,\n operator,\n value:\n field.type === 'text' && field.getAttribute('type') === 'object'\n ? await this._getResourceIds(field)\n : field.type === 'text'\n ? value\n : field.type === 'checkbox'\n ? field.hasAttribute('indeterminate')\n ? field._value === 'on'\n ? true\n : false\n : (field as HTMLInputElement).checked\n : field.type === 'number'\n ? parseFloat(value)\n : value,\n relation: field.type === 'text' && field.getAttribute('type') === 'object'\n }\n return filter\n })\n )\n }\n\n private async _getResourceIds(inputField: HTMLInputElement | HTMLSelectElement) {\n const {\n field = 'name',\n value,\n queryName\n } = inputField as (HTMLInputElement | HTMLSelectElement) & { field: string; queryName: string }\n\n const response = await client.query({\n query: gql`\n query {\n fetch: ${queryName}(${buildArgs({\n filters: [\n {\n name: field,\n operator: 'i_like',\n value: `%${value}%`\n }\n ]\n })}) {\n items {\n id\n }\n }\n }\n `\n })\n\n if (!response.errors) {\n const items = response.data.fetch.items as { id: string }[]\n return (items && items.map(item => item.id)) || []\n }\n }\n\n serialize() {\n let data: { [name: string]: any } = {}\n\n Array.from(this.formFields).forEach(field => {\n const name = field.name\n if (field.type === 'number') {\n data[name] = parseFloat(field.value)\n } else if (field.type === 'checkbox') {\n data[name] = (field as HTMLInputElement).checked\n } else {\n data[name] = field.value\n }\n })\n\n return data\n }\n\n submit() {\n this.dispatchEvent(new CustomEvent('submit'))\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"ox-search-form.js","sourceRoot":"","sources":["../../../src/components/ox-search-form.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\nimport './ox-custom-input.js'\nimport './ox-custom-select.js'\n\nimport gql from 'graphql-tag'\nimport { css, html, LitElement, nothing, PropertyValues } from 'lit'\nimport { customElement, property, query, queryAll, queryAsync } from 'lit/decorators.js'\nimport { ifDefined } from 'lit/directives/if-defined.js'\nimport { until } from 'lit/directives/until.js'\nimport { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles'\n\nimport { buildArgs, client } from '@operato/graphql'\n\nimport { SearchFormStyles } from '../styles/search-form-styles.js'\nimport { SearchFormField, SelectOption, SelectOptionObject } from '../types.js'\n\nfunction buildOptions(field: SearchFormField, options: SelectOption[]) {\n const selectOptionObjects = options.map(option => {\n switch (typeof option) {\n case 'string':\n return {\n name: option,\n value: option\n }\n case 'object':\n return {\n name: option.name || option.display,\n value: option.value\n }\n default:\n return option\n }\n }) as SelectOptionObject[]\n\n return html`\n ${selectOptionObjects?.map(\n ({ value, display, name }) => html`\n <option ?selected=${value == field.value} value=${value}>${name || display}</option>\n `\n )}\n `\n}\n\n@customElement('ox-search-form')\nexport class OxSearchForm extends LitElement {\n static styles = [\n MDTypeScaleStyles,\n SearchFormStyles,\n css`\n :host {\n display: flex;\n flex-direction: column;\n padding: var(--spacing-small);\n\n position: relative;\n }\n\n ::placeholder {\n text-transform: capitalize;\n color: rgba(var(--secondary-color-rgb), 0.5);\n }\n label {\n font-size: var(--md-sys-typescale-label-large-size, 0.875rem);\n color: var(--md-sys-color-primary);\n }\n select,\n input {\n border: none;\n border-bottom: var(--ox-filters-input-border, 1px solid var(--md-sys-color-outline));\n font: var(--ox-filters-input-font);\n }\n\n select:focus,\n input:focus {\n outline: none;\n border-bottom: var(--ox-filters-input-focus-border, 1px solid var(--md-ref-palette-primary50));\n color: var(--ox-filters-input-focus-color, var(--md-sys-color-primary));\n }\n `\n ]\n\n @property({ type: Array }) fields?: SearchFormField[]\n @property({ type: Boolean }) hideSearchButton: boolean = false\n @property({ type: Boolean, attribute: true }) autofocus: boolean = false\n\n @queryAsync('form') form!: HTMLFormElement\n @query('input[autofocus]') autofocused?: HTMLInputElement\n @queryAll('input, select') formFields!: ((HTMLInputElement | HTMLSelectElement) & { field: string; _value: any })[]\n\n private autoUpdateTargetsOnChange: { [name: string]: string[] } = {}\n\n render() {\n var autofocusConsumed = 0\n\n return html`\n <form\n class=\"search-form md-typescale-body-medium-prominent\"\n @change=${async (e: Event) => {\n const field = e.target as HTMLInputElement\n const name = field?.getAttribute('name')\n const value = field.value\n\n if (name && this.autoUpdateTargetsOnChange[name]) {\n ;(this.autoUpdateTargetsOnChange[name] || []).forEach(name => {\n const target = this.renderRoot.querySelector(`[name='${name}']`)\n if (target) {\n ;(target as HTMLInputElement).value = ''\n }\n })\n\n this.requestUpdate()\n }\n\n const { onchange } = this.fields?.find(field => field.name == name) || {}\n\n const keepGoing = onchange ? await onchange.call(null, value, this) : true\n\n if (keepGoing) {\n this.dispatchEvent(new CustomEvent('change', { detail: value }))\n this.submit()\n }\n }}\n >\n ${(this.fields || []).map(\n field => html`\n ${field.type === 'select'\n ? this.renderSelect(field)\n : field.type === 'checkbox'\n ? this.renderCheckbox(field)\n : field.type === 'object'\n ? this.renderObject(field, autofocusConsumed++)\n : this.renderElse(field, autofocusConsumed++)}\n `\n )}\n ${!!this.hideSearchButton\n ? nothing\n : html`<md-icon @click=${(e: MouseEvent) => this.submit()} search>search</md-icon>`}\n </form>\n `\n }\n\n renderSelect(field: SearchFormField) {\n var { id, options, readonly, label, name, value, placeholder, hidden } = field\n\n if (typeof options === 'function') {\n options = (options as Function).call(field, this)\n\n if (options instanceof Promise) {\n var optionsTemplate = html`${until(options.then(options => buildOptions(field, options)))}`\n } else {\n var optionsTemplate = buildOptions(field, (options || []) as SelectOption[])\n }\n } else {\n var optionsTemplate = buildOptions(field, (options || []) as SelectOption[])\n }\n\n return html`\n <label ?hidden=${hidden}>${label || name || id}</label>\n <select\n .value=${value}\n name=${ifDefined(name)}\n placeholder=${ifDefined(placeholder)}\n ?hidden=${hidden}\n ?readonly=${readonly}\n >\n ${optionsTemplate!}\n </select>\n `\n }\n\n renderCheckbox(field: SearchFormField) {\n return html`\n <input\n id=\"ckbx_${field.name}\"\n type=\"checkbox\"\n name=${ifDefined(field.name)}\n ?checked=${field.value}\n ?hidden=${field.hidden}\n ?readonly=${field.readonly}\n @click=${(e: MouseEvent) => {\n const checkbox = e.currentTarget as HTMLInputElement & { _value: any }\n if (checkbox.hasAttribute('indeterminate')) {\n const values = [undefined, 'on', 'off']\n const currentValue = checkbox._value\n const newValue =\n values.indexOf(currentValue) + 1 > values.length - 1\n ? values[0]\n : values[values.indexOf(currentValue) + 1]\n\n if (newValue === 'on') {\n checkbox.checked = true\n } else if (newValue === 'off') {\n checkbox.checked = false\n } else {\n checkbox.indeterminate = true\n }\n checkbox._value = newValue\n }\n }}\n />\n <label for=\"ckbx_${field.name}\" ?hidden=${field.hidden}>${field.label || field.name || field.id}</label>\n `\n }\n\n renderObject(field: SearchFormField, autofocusConsumed: number) {\n return html`\n <label ?hidden=${field.hidden}>${field.label || field.name || field.id}</label>\n <input\n .type=${field.type}\n name=${ifDefined(field.name)}\n placeholder=${ifDefined(field.placeholder)}\n .value=${field.value || ''}\n .field=${field.field}\n .queryName=${field.queryName}\n ?hidden=${field.hidden}\n ?readonly=${field.readonly}\n ?autofocus=${!field.hidden && 0 === autofocusConsumed}\n />\n `\n }\n\n renderElse(field: SearchFormField, autofocusConsumed: number) {\n return html`\n <label ?hidden=${field.hidden}>${field.label || field.name || field.id}</label>\n <input\n .type=${field.type}\n .value=${field.value || ''}\n name=${ifDefined(field.name)}\n placeholder=${ifDefined(field.placeholder)}\n ?hidden=${field.hidden}\n ?readonly=${field.readonly}\n ?autofocus=${!field.hidden && 0 === autofocusConsumed++}\n />\n `\n }\n\n async updated(changes: PropertyValues<this>) {\n if (changes.has('fields')) {\n this._checkInputValidity()\n\n var formFields = Array.from(this.formFields)\n this.fields &&\n this.fields.forEach(field => {\n var formField = formFields.find(f => f.name == field.name)\n if (field.props instanceof Object && !Array.isArray(field.props)) {\n for (let prop in field.props) {\n if (field.props[prop]) {\n formField!.setAttribute(prop, field.props[prop])\n }\n }\n }\n\n if (field.attrs && Array.isArray(field.attrs)) {\n field.attrs.forEach(attr => {\n if (attr === 'indeterminate') {\n ;(formField as HTMLInputElement).indeterminate = true\n } else {\n formField!.setAttribute(attr, '')\n }\n })\n }\n\n if (field.handlers instanceof Object && !Array.isArray(field.handlers)) {\n for (let eventName in field.handlers) {\n formField!.addEventListener(eventName, field.handlers[eventName])\n }\n }\n })\n\n if (this.autofocus) {\n await this.requestUpdate()\n this.autofocused?.focus()\n }\n\n this.autoUpdateTargetsOnChange = {}\n this.fields\n ?.filter(filter => filter.boundTo && filter.boundTo.length > 0)\n .map(({ name, boundTo }) => {\n boundTo!.forEach(to => {\n const origin = this.autoUpdateTargetsOnChange[to] || []\n if (name && !origin.includes(name)) {\n this.autoUpdateTargetsOnChange[to] = [...origin, name]\n }\n })\n })\n }\n }\n\n getFieldByName(name: string) {\n return this.renderRoot.querySelector(`[name=${name}]`)\n }\n\n _checkInputValidity() {\n const names = this.fields?.map(i => i.name) || []\n const result = names.every(name => {\n return names.indexOf(name) === names.lastIndexOf(name)\n })\n if (!result) {\n throw new Error('Field name is duplicated.')\n }\n }\n\n get searchParams() {\n let searchParam = new URLSearchParams()\n const fields = Array.from(this.formFields)\n fields.forEach(field => searchParam.append(field.name, field.value))\n\n return decodeURI(searchParam.toString())\n }\n\n get queryFilters() {\n return Array.from(this.formFields)\n .filter(\n field =>\n (field.type !== 'checkbox' && field.value && field.value !== '') ||\n (field.type === 'checkbox' && !field.hasAttribute('indeterminate')) ||\n (field.type === 'checkbox' && field.hasAttribute('indeterminate') && field._value)\n )\n .map(field => {\n const operator = field.getAttribute('searchOper') || ''\n let value = operator.indexOf('like') >= 0 ? `%${field.value}%` : field.value\n return {\n name: field.name,\n value:\n field.type === 'text'\n ? value\n : field.type === 'checkbox'\n ? field.hasAttribute('indeterminate')\n ? field._value === 'on'\n ? true\n : false\n : (field as HTMLInputElement).checked\n : field.type === 'number'\n ? parseFloat(value)\n : value,\n operator\n }\n })\n }\n\n public async getQueryFilters() {\n return await Promise.all(\n Array.from(this.formFields)\n .filter(\n field =>\n (field.type !== 'checkbox' && field.value && field.value !== '') ||\n (field.type === 'checkbox' && !field.hasAttribute('indeterminate')) ||\n (field.type === 'checkbox' && field.hasAttribute('indeterminate') && field._value)\n )\n .map(async field => {\n const name = field.name\n const operator = (field.type === 'text' && field.field ? 'in' : field.getAttribute('searchOper')) || ''\n const value = operator.indexOf('like') >= 0 ? `%${field.value}%` : field.value\n const filter = {\n name,\n operator,\n value:\n field.type === 'text' && field.getAttribute('type') === 'object'\n ? await this._getResourceIds(field)\n : field.type === 'text'\n ? value\n : field.type === 'checkbox'\n ? field.hasAttribute('indeterminate')\n ? field._value === 'on'\n ? true\n : false\n : (field as HTMLInputElement).checked\n : field.type === 'number'\n ? parseFloat(value)\n : value,\n relation: field.type === 'text' && field.getAttribute('type') === 'object'\n }\n return filter\n })\n )\n }\n\n private async _getResourceIds(inputField: HTMLInputElement | HTMLSelectElement) {\n const {\n field = 'name',\n value,\n queryName\n } = inputField as (HTMLInputElement | HTMLSelectElement) & { field: string; queryName: string }\n\n const response = await client.query({\n query: gql`\n query {\n fetch: ${queryName}(${buildArgs({\n filters: [\n {\n name: field,\n operator: 'i_like',\n value: `%${value}%`\n }\n ]\n })}) {\n items {\n id\n }\n }\n }\n `\n })\n\n if (!response.errors) {\n const items = response.data.fetch.items as { id: string }[]\n return (items && items.map(item => item.id)) || []\n }\n }\n\n serialize() {\n let data: { [name: string]: any } = {}\n\n Array.from(this.formFields).forEach(field => {\n const name = field.name\n if (field.type === 'number') {\n data[name] = parseFloat(field.value)\n } else if (field.type === 'checkbox') {\n data[name] = (field as HTMLInputElement).checked\n } else {\n data[name] = field.value\n }\n })\n\n return data\n }\n\n reset(value?: string[] | { [field: string]: any }) {\n this.form\n .then((form: HTMLFormElement) => {\n if (value) {\n if (value instanceof Array) {\n value\n .filter(item => typeof item == 'string')\n .forEach(item => {\n const field = this.getFieldByName(item)\n if (field) {\n ;(field as HTMLInputElement).value = ''\n }\n })\n } else {\n const keys = Object.keys(value)\n keys\n .filter(key => typeof key == 'string')\n .forEach(key => {\n const field = this.getFieldByName(key)\n if (field) {\n ;(field as HTMLInputElement).value = value[key]\n }\n })\n }\n } else {\n form.reset()\n }\n })\n .catch((error: any) => {\n console.error('Error resetting the form:', error)\n })\n }\n\n submit() {\n this.dispatchEvent(new CustomEvent('submit'))\n }\n}\n"]}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import '@operato/input/ox-checkbox.js';
|
|
2
2
|
import { html } from 'lit-html';
|
|
3
3
|
export const FilterCheckbox = (filter, value, owner) => {
|
|
4
|
-
const { name, label } = filter;
|
|
4
|
+
const { name, label, readonly } = filter;
|
|
5
5
|
return html `
|
|
6
6
|
<ox-checkbox
|
|
7
7
|
name=${name}
|
|
@@ -21,6 +21,7 @@ export const FilterCheckbox = (filter, value, owner) => {
|
|
|
21
21
|
}
|
|
22
22
|
}));
|
|
23
23
|
}}
|
|
24
|
+
?readonly=${readonly}
|
|
24
25
|
><label><span>${label}</span></label></ox-checkbox
|
|
25
26
|
>
|
|
26
27
|
`;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"filter-checkbox.js","sourceRoot":"","sources":["../../../src/filters/filter-checkbox.ts"],"names":[],"mappings":"AAAA,OAAO,+BAA+B,CAAA;AAEtC,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAA;AAI/B,MAAM,CAAC,MAAM,cAAc,GAAyB,CAAC,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE;IAC3E,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,GAAG,MAAM,CAAA;
|
|
1
|
+
{"version":3,"file":"filter-checkbox.js","sourceRoot":"","sources":["../../../src/filters/filter-checkbox.ts"],"names":[],"mappings":"AAAA,OAAO,+BAA+B,CAAA;AAEtC,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAA;AAI/B,MAAM,CAAC,MAAM,cAAc,GAAyB,CAAC,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE;IAC3E,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,QAAQ,EAAE,GAAG,MAAM,CAAA;IAExC,OAAO,IAAI,CAAA;;aAEA,IAAI;iBACA,KAAK;;uBAEC,KAAK,KAAK,SAAS;;gBAE1B,CAAC,CAAc,EAAE,EAAE;QAC3B,CAAC;QAAC,CAAC,CAAC,MAAsB,CAAC,aAAa,CACtC,IAAI,WAAW,CAAC,eAAe,EAAE;YAC/B,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;YACd,MAAM,EAAE;gBACN,IAAI,EAAE,IAAI;gBACV,QAAQ,EAAE,MAAM,CAAC,QAAQ;gBACzB,KAAK,EAAG,CAAC,CAAC,MAAqD,CAAC,OAAO;aACxE;SACF,CAAC,CACH,CAAA;IACH,CAAC;kBACW,QAAQ;sBACJ,KAAK;;GAExB,CAAA;AACH,CAAC,CAAA","sourcesContent":["import '@operato/input/ox-checkbox.js'\n\nimport { html } from 'lit-html'\n\nimport { FilterSelectRenderer } from '../types.js'\n\nexport const FilterCheckbox: FilterSelectRenderer = (filter, value, owner) => {\n const { name, label, readonly } = filter\n\n return html`\n <ox-checkbox\n name=${name}\n ?checked=${value}\n indeterminatable\n ?indeterminate=${value === undefined}\n left-label\n @change=${(e: CustomEvent) => {\n ;(e.target as HTMLElement).dispatchEvent(\n new CustomEvent('filter-change', {\n bubbles: true,\n composed: true,\n detail: {\n name: name,\n operator: filter.operator,\n value: (e.target as Element & { checked: boolean | undefined }).checked\n }\n })\n )\n }}\n ?readonly=${readonly}\n ><label><span>${label}</span></label></ox-checkbox\n >\n `\n}\n"]}
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import '@operato/input/ox-input-barcode.js';
|
|
2
2
|
import { html } from 'lit-html';
|
|
3
3
|
export const FilterInputBarcode = (filter, value, owner) => {
|
|
4
|
-
const { name,
|
|
5
|
-
const { englishOnly, selectAfterChange } =
|
|
4
|
+
const { name, readonly, options } = filter;
|
|
5
|
+
const { englishOnly, selectAfterChange } = (options || {});
|
|
6
6
|
return html `
|
|
7
7
|
<ox-input-barcode
|
|
8
8
|
name=${name}
|
|
@@ -21,7 +21,9 @@ export const FilterInputBarcode = (filter, value, owner) => {
|
|
|
21
21
|
}
|
|
22
22
|
}));
|
|
23
23
|
}}
|
|
24
|
-
|
|
24
|
+
filter-input
|
|
25
|
+
?readonly=${readonly}
|
|
26
|
+
></ox-input-barcode>
|
|
25
27
|
`;
|
|
26
28
|
};
|
|
27
29
|
//# sourceMappingURL=filter-input-barcode.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"filter-input-barcode.js","sourceRoot":"","sources":["../../../src/filters/filter-input-barcode.ts"],"names":[],"mappings":"AAAA,OAAO,oCAAoC,CAAA;AAE3C,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAA;AAI/B,MAAM,CAAC,MAAM,kBAAkB,GAAyB,CAAC,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE;IAC/E,MAAM,EAAE,IAAI,EAAE,
|
|
1
|
+
{"version":3,"file":"filter-input-barcode.js","sourceRoot":"","sources":["../../../src/filters/filter-input-barcode.ts"],"names":[],"mappings":"AAAA,OAAO,oCAAoC,CAAA;AAE3C,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAA;AAI/B,MAAM,CAAC,MAAM,kBAAkB,GAAyB,CAAC,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE;IAC/E,MAAM,EAAE,IAAI,EAAE,QAAQ,EAAE,OAAO,EAAE,GAAG,MAAM,CAAA;IAC1C,MAAM,EAAE,WAAW,EAAE,iBAAiB,EAAE,GAAG,CAAC,OAAO,IAAI,EAAE,CAA2B,CAAA;IAEpF,OAAO,IAAI,CAAA;;aAEA,IAAI;sBACK,WAAW;6BACJ,iBAAiB;eAC/B,KAAK,KAAK,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK;gBAC/B,CAAC,CAAc,EAAE,EAAE;QAC3B,MAAM,KAAK,GAAG,CAAC,CAAC,MAA0B,CAAA;QAC1C,KAAK,CAAC,aAAa,CACjB,IAAI,WAAW,CAAC,eAAe,EAAE;YAC/B,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;YACd,MAAM,EAAE;gBACN,IAAI;gBACJ,QAAQ,EAAE,MAAM,CAAC,QAAQ;gBACzB,KAAK,EAAE,KAAK,CAAC,KAAK;aACnB;SACF,CAAC,CACH,CAAA;IACH,CAAC;;kBAEW,QAAQ;;GAEvB,CAAA;AACH,CAAC,CAAA","sourcesContent":["import '@operato/input/ox-input-barcode.js'\n\nimport { html } from 'lit-html'\n\nimport { FilterSelectRenderer } from '../types.js'\n\nexport const FilterInputBarcode: FilterSelectRenderer = (filter, value, owner) => {\n const { name, readonly, options } = filter\n const { englishOnly, selectAfterChange } = (options || {}) as { [key: string]: any }\n\n return html`\n <ox-input-barcode\n name=${name}\n ?english-only=${englishOnly}\n ?select-after-change=${selectAfterChange}\n .value=${value === undefined ? '' : value}\n @change=${(e: CustomEvent) => {\n const input = e.target as HTMLInputElement\n input.dispatchEvent(\n new CustomEvent('filter-change', {\n bubbles: true,\n composed: true,\n detail: {\n name,\n operator: filter.operator,\n value: input.value\n }\n })\n )\n }}\n filter-input\n ?readonly=${readonly}\n ></ox-input-barcode>\n `\n}\n"]}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { html } from 'lit-html';
|
|
2
2
|
export const FilterInput = (filter, value, owner) => {
|
|
3
|
-
const { name, type } = filter;
|
|
3
|
+
const { name, type, readonly } = filter;
|
|
4
4
|
return html `
|
|
5
5
|
<input
|
|
6
6
|
type=${type}
|
|
@@ -18,6 +18,7 @@ export const FilterInput = (filter, value, owner) => {
|
|
|
18
18
|
}
|
|
19
19
|
}));
|
|
20
20
|
}}
|
|
21
|
+
?readonly=${readonly}
|
|
21
22
|
/>
|
|
22
23
|
`;
|
|
23
24
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"filter-input.js","sourceRoot":"","sources":["../../../src/filters/filter-input.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAA;AAI/B,MAAM,CAAC,MAAM,WAAW,GAAyB,CAAC,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE;IACxE,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,GAAG,MAAM,CAAA;
|
|
1
|
+
{"version":3,"file":"filter-input.js","sourceRoot":"","sources":["../../../src/filters/filter-input.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAA;AAI/B,MAAM,CAAC,MAAM,WAAW,GAAyB,CAAC,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE;IACxE,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAE,GAAG,MAAM,CAAA;IAEvC,OAAO,IAAI,CAAA;;aAEA,IAAI;aACJ,IAAI;eACF,KAAK,KAAK,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK;gBAC/B,CAAC,CAAc,EAAE,EAAE;QAC3B,MAAM,KAAK,GAAG,CAAC,CAAC,MAA0B,CAAA;QAC1C,KAAK,CAAC,aAAa,CACjB,IAAI,WAAW,CAAC,eAAe,EAAE;YAC/B,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;YACd,MAAM,EAAE;gBACN,IAAI,EAAE,IAAI;gBACV,QAAQ,EAAE,MAAM,CAAC,QAAQ;gBACzB,KAAK,EAAE,KAAK,CAAC,KAAK;aACnB;SACF,CAAC,CACH,CAAA;IACH,CAAC;kBACW,QAAQ;;GAEvB,CAAA;AACH,CAAC,CAAA","sourcesContent":["import { html } from 'lit-html'\n\nimport { FilterSelectRenderer } from '../types.js'\n\nexport const FilterInput: FilterSelectRenderer = (filter, value, owner) => {\n const { name, type, readonly } = filter\n\n return html`\n <input\n type=${type}\n name=${name}\n .value=${value === undefined ? '' : value}\n @change=${(e: CustomEvent) => {\n const input = e.target as HTMLInputElement\n input.dispatchEvent(\n new CustomEvent('filter-change', {\n bubbles: true,\n composed: true,\n detail: {\n name: name,\n operator: filter.operator,\n value: input.value\n }\n })\n )\n }}\n ?readonly=${readonly}\n />\n `\n}\n"]}
|
|
@@ -9,7 +9,7 @@ function formatDate(type, date) {
|
|
|
9
9
|
return type == 'date' ? formatDate : formatDate + 'T' + hours + ':' + minutes;
|
|
10
10
|
}
|
|
11
11
|
export const FilterRangeDate = (filter, value, owner) => {
|
|
12
|
-
var { name, type, operator } = filter;
|
|
12
|
+
var { name, type, operator, readonly } = filter;
|
|
13
13
|
var [from, to] = value instanceof Array ? value : [];
|
|
14
14
|
if (type === 'datetime') {
|
|
15
15
|
type = 'datetime-local';
|
|
@@ -37,6 +37,7 @@ export const FilterRangeDate = (filter, value, owner) => {
|
|
|
37
37
|
}
|
|
38
38
|
}));
|
|
39
39
|
}}
|
|
40
|
+
?readonly=${readonly}
|
|
40
41
|
/>
|
|
41
42
|
~
|
|
42
43
|
<input
|
|
@@ -59,6 +60,7 @@ export const FilterRangeDate = (filter, value, owner) => {
|
|
|
59
60
|
}
|
|
60
61
|
}));
|
|
61
62
|
}}
|
|
63
|
+
?readonly=${readonly}
|
|
62
64
|
/>
|
|
63
65
|
`;
|
|
64
66
|
};
|