@operato/form 2.0.0-alpha.68 → 2.0.0-alpha.85
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 +9 -0
- package/dist/src/filters/filter-checkbox.js +4 -2
- package/dist/src/filters/filter-checkbox.js.map +1 -1
- package/dist/src/filters/filter-styles.js +35 -28
- package/dist/src/filters/filter-styles.js.map +1 -1
- package/dist/src/filters/ox-filters-form-base.js +49 -46
- package/dist/src/filters/ox-filters-form-base.js.map +1 -1
- package/dist/stories/ox-filters-form-barcode.stories.js +1 -5
- package/dist/stories/ox-filters-form-barcode.stories.js.map +1 -1
- package/dist/stories/ox-filters-form-base.stories.js +28 -0
- package/dist/stories/ox-filters-form-base.stories.js.map +1 -1
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +2 -2
- package/src/filters/filter-checkbox.ts +4 -2
- package/src/filters/filter-styles.ts +35 -28
- package/src/filters/ox-filters-form-base.ts +50 -47
- package/stories/ox-filters-form-barcode.stories.ts +1 -5
- package/stories/ox-filters-form-base.stories.ts +28 -0
- package/themes/form-theme.css +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,15 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
## [2.0.0-alpha.85](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.84...v2.0.0-alpha.85) (2024-04-16)
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
### :bug: Bug Fix
|
|
10
|
+
|
|
11
|
+
* tweak filters-form style ([6fb293d](https://github.com/hatiolab/operato/commit/6fb293d7d34ea7b01b3011264f554158beb62621))
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
|
|
6
15
|
## [2.0.0-alpha.68](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.67...v2.0.0-alpha.68) (2024-04-13)
|
|
7
16
|
|
|
8
17
|
|
|
@@ -1,13 +1,14 @@
|
|
|
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 } = filter;
|
|
4
|
+
const { name, label } = filter;
|
|
5
5
|
return html `
|
|
6
6
|
<ox-checkbox
|
|
7
7
|
name=${name}
|
|
8
8
|
?checked=${value}
|
|
9
9
|
indeterminatable
|
|
10
10
|
?indeterminate=${value === undefined}
|
|
11
|
+
left-label
|
|
11
12
|
@change=${(e) => {
|
|
12
13
|
;
|
|
13
14
|
e.target.dispatchEvent(new CustomEvent('filter-change', {
|
|
@@ -20,7 +21,8 @@ export const FilterCheckbox = (filter, value, owner) => {
|
|
|
20
21
|
}
|
|
21
22
|
}));
|
|
22
23
|
}}
|
|
23
|
-
|
|
24
|
+
><label><span>${label}</span></label></ox-checkbox
|
|
25
|
+
>
|
|
24
26
|
`;
|
|
25
27
|
};
|
|
26
28
|
//# sourceMappingURL=filter-checkbox.js.map
|
|
@@ -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,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,GAAG,MAAM,CAAA;IAE9B,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;sBACe,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 } = 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 ><label><span>${label}</span></label></ox-checkbox\n >\n `\n}\n"]}
|
|
@@ -1,56 +1,65 @@
|
|
|
1
1
|
import { css } from 'lit';
|
|
2
2
|
export const FilterStyles = css `
|
|
3
3
|
:host {
|
|
4
|
-
--ox-input-placeholder-color: var(--primary-color);
|
|
5
|
-
|
|
6
|
-
--ox-input-
|
|
7
|
-
--ox-input-border: 1px solid
|
|
8
|
-
--ox-input-
|
|
9
|
-
--ox-input-
|
|
10
|
-
--ox-input-
|
|
11
|
-
--ox-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
--ox-filters-form-
|
|
15
|
-
--ox-filters-
|
|
16
|
-
|
|
4
|
+
--ox-filters-input-placeholder-color: var(--input-placeholder-color, var(--primary-color));
|
|
5
|
+
|
|
6
|
+
--ox-filters-input-border: var(--input-border, 1px solid rgba(0, 0, 0, 0.2));
|
|
7
|
+
--ox-filters-input-focus-border: var(--input-focus-border, 1px solid var(--primary-color));
|
|
8
|
+
--ox-filters-input-font: var(--input-font, normal 14px var(--theme-font));
|
|
9
|
+
--ox-filters-input-color: var(--input-color, var(--primary-text-color));
|
|
10
|
+
--ox-filters-input-focus-color: var(--input-focus-color, var(--primary-color));
|
|
11
|
+
--ox-filters-label-font: var(--label-font, normal 14px var(--theme-font));
|
|
12
|
+
--ox-filters-label-color: var(--label-color, var(--primary-text-color));
|
|
13
|
+
|
|
14
|
+
--ox-filters-form-gap: var(--input-gap-vertical, 8px) var(--input-gap-horizontal, 16px);
|
|
15
|
+
--ox-filters-input-padding: var(--input-padding, 6px 2px);
|
|
16
|
+
|
|
17
|
+
--ox-select-padding: var(--ox-filters-input-padding);
|
|
17
18
|
}
|
|
18
19
|
|
|
19
20
|
label {
|
|
20
|
-
font: var(--ox-filters-
|
|
21
|
-
color: var(--ox-filters-
|
|
21
|
+
font: var(--ox-filters-label-font);
|
|
22
|
+
color: var(--ox-filters-label-color);
|
|
22
23
|
}
|
|
24
|
+
|
|
23
25
|
span {
|
|
24
|
-
margin-right: var(--margin-narrow);
|
|
25
26
|
text-transform: capitalize;
|
|
26
27
|
}
|
|
27
28
|
|
|
28
29
|
input::placeholder {
|
|
29
|
-
color: var(--ox-input-placeholder-color);
|
|
30
|
+
color: var(--ox-filters-input-placeholder-color);
|
|
30
31
|
opacity: 0.6;
|
|
31
32
|
}
|
|
32
33
|
|
|
34
|
+
input {
|
|
35
|
+
padding: var(--ox-filters-input-padding);
|
|
36
|
+
}
|
|
37
|
+
|
|
33
38
|
ox-select,
|
|
34
39
|
input {
|
|
35
|
-
padding: var(--input-padding);
|
|
36
40
|
border: none;
|
|
37
|
-
border-bottom: var(--ox-input-border);
|
|
38
|
-
font: var(--ox-input-font);
|
|
39
|
-
color: var(--ox-input-color);
|
|
41
|
+
border-bottom: var(--ox-filters-input-border);
|
|
42
|
+
font: var(--ox-filters-input-font);
|
|
43
|
+
color: var(--ox-filters-input-color);
|
|
40
44
|
}
|
|
41
45
|
|
|
42
46
|
ox-select:focus,
|
|
43
47
|
input:focus {
|
|
44
48
|
outline: none;
|
|
45
|
-
border-bottom: var(--ox-input-focus-border);
|
|
46
|
-
color: var(--
|
|
49
|
+
border-bottom: var(--ox-filters-input-focus-border);
|
|
50
|
+
color: var(--ox-filters-input-focus-color);
|
|
47
51
|
}
|
|
52
|
+
|
|
48
53
|
ox-select {
|
|
49
|
-
|
|
54
|
+
min-width: 90px;
|
|
55
|
+
max-width: 170px;
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
ox-input-search {
|
|
59
|
+
max-width: 150px;
|
|
50
60
|
}
|
|
51
61
|
|
|
52
62
|
input[type='number'] {
|
|
53
|
-
padding-right: var(--padding-narrow);
|
|
54
63
|
max-width: 90px;
|
|
55
64
|
}
|
|
56
65
|
|
|
@@ -58,15 +67,13 @@ export const FilterStyles = css `
|
|
|
58
67
|
input[type*='time'],
|
|
59
68
|
input[type='week'],
|
|
60
69
|
input[type='month'] {
|
|
61
|
-
padding: 8px var(--padding-narrow) 8px var(--padding-default);
|
|
62
70
|
max-width: 170px;
|
|
63
71
|
}
|
|
64
72
|
|
|
65
73
|
@media only screen and (max-width: 460px) {
|
|
66
74
|
:host {
|
|
67
75
|
--ox-filters-form-label-font: bold 13px var(--theme-font);
|
|
68
|
-
--ox-input-font: normal 16px var(--theme-font);
|
|
69
|
-
--ox-filters-form-gap: var(--margin-narrow);
|
|
76
|
+
--ox-filters-input-font: normal 16px var(--theme-font);
|
|
70
77
|
}
|
|
71
78
|
|
|
72
79
|
input[from],
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"filter-styles.js","sourceRoot":"","sources":["../../../src/filters/filter-styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,MAAM,CAAC,MAAM,YAAY,GAAG,GAAG,CAAA
|
|
1
|
+
{"version":3,"file":"filter-styles.js","sourceRoot":"","sources":["../../../src/filters/filter-styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,MAAM,CAAC,MAAM,YAAY,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwF9B,CAAA","sourcesContent":["import { css } from 'lit'\n\nexport const FilterStyles = css`\n :host {\n --ox-filters-input-placeholder-color: var(--input-placeholder-color, var(--primary-color));\n\n --ox-filters-input-border: var(--input-border, 1px solid rgba(0, 0, 0, 0.2));\n --ox-filters-input-focus-border: var(--input-focus-border, 1px solid var(--primary-color));\n --ox-filters-input-font: var(--input-font, normal 14px var(--theme-font));\n --ox-filters-input-color: var(--input-color, var(--primary-text-color));\n --ox-filters-input-focus-color: var(--input-focus-color, var(--primary-color));\n --ox-filters-label-font: var(--label-font, normal 14px var(--theme-font));\n --ox-filters-label-color: var(--label-color, var(--primary-text-color));\n\n --ox-filters-form-gap: var(--input-gap-vertical, 8px) var(--input-gap-horizontal, 16px);\n --ox-filters-input-padding: var(--input-padding, 6px 2px);\n\n --ox-select-padding: var(--ox-filters-input-padding);\n }\n\n label {\n font: var(--ox-filters-label-font);\n color: var(--ox-filters-label-color);\n }\n\n span {\n text-transform: capitalize;\n }\n\n input::placeholder {\n color: var(--ox-filters-input-placeholder-color);\n opacity: 0.6;\n }\n\n input {\n padding: var(--ox-filters-input-padding);\n }\n\n ox-select,\n input {\n border: none;\n border-bottom: var(--ox-filters-input-border);\n font: var(--ox-filters-input-font);\n color: var(--ox-filters-input-color);\n }\n\n ox-select:focus,\n input:focus {\n outline: none;\n border-bottom: var(--ox-filters-input-focus-border);\n color: var(--ox-filters-input-focus-color);\n }\n\n ox-select {\n min-width: 90px;\n max-width: 170px;\n }\n\n ox-input-search {\n max-width: 150px;\n }\n\n input[type='number'] {\n max-width: 90px;\n }\n\n input[type*='date'],\n input[type*='time'],\n input[type='week'],\n input[type='month'] {\n max-width: 170px;\n }\n\n @media only screen and (max-width: 460px) {\n :host {\n --ox-filters-form-label-font: bold 13px var(--theme-font);\n --ox-filters-input-font: normal 16px var(--theme-font);\n }\n\n input[from],\n input[to] {\n max-width: 44%;\n }\n\n input[type*='datetime'][from],\n input[type*='datetime'][to] {\n padding-right: var(--padding-narrow);\n min-width: 91%;\n }\n }\n`\n"]}
|
|
@@ -65,53 +65,55 @@ let OxFiltersFormBase = class OxFiltersFormBase extends LitElement {
|
|
|
65
65
|
}
|
|
66
66
|
return type === 'search'
|
|
67
67
|
? html `<ox-input-search name="search" .value=${value} ?autofocus=${this.autofocus}></ox-input-search>`
|
|
68
|
-
: type
|
|
69
|
-
?
|
|
70
|
-
|
|
71
|
-
><span>${label}</span> ${renderer(filter, value, this)}
|
|
72
|
-
</label>
|
|
73
|
-
`
|
|
74
|
-
: operator === 'in'
|
|
68
|
+
: type === 'boolean'
|
|
69
|
+
? renderer(filter, value, this)
|
|
70
|
+
: type !== 'select'
|
|
75
71
|
? html `
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
72
|
+
<label filter-title ?between=${operator == 'between'}
|
|
73
|
+
><span>${label}</span> ${renderer(filter, value, this)}
|
|
74
|
+
</label>
|
|
75
|
+
`
|
|
76
|
+
: operator === 'in'
|
|
77
|
+
? html `
|
|
78
|
+
<ox-select
|
|
79
|
+
name=${name}
|
|
80
|
+
placeholder=${label}
|
|
81
|
+
.value=${value}
|
|
82
|
+
@change=${(e) => {
|
|
83
|
+
var _a;
|
|
84
|
+
return (_a = e.target) === null || _a === void 0 ? void 0 : _a.dispatchEvent(new CustomEvent('filter-change', {
|
|
85
|
+
detail: {
|
|
86
|
+
name,
|
|
87
|
+
operator,
|
|
88
|
+
value: e.detail
|
|
89
|
+
}
|
|
90
|
+
}));
|
|
91
|
+
}}
|
|
92
|
+
>
|
|
93
|
+
<ox-popup-list multiple attr-selected="checked" with-search>
|
|
94
|
+
${renderer(filter, value, this)}
|
|
95
|
+
</ox-popup-list>
|
|
96
|
+
</ox-select>
|
|
97
|
+
`
|
|
98
|
+
: html `
|
|
99
|
+
<ox-select
|
|
100
|
+
name=${name}
|
|
101
|
+
placeholder=${label}
|
|
102
|
+
.value=${value}
|
|
103
|
+
@change=${(e) => {
|
|
104
|
+
var _a;
|
|
105
|
+
return (_a = e.target) === null || _a === void 0 ? void 0 : _a.dispatchEvent(new CustomEvent('filter-change', {
|
|
106
|
+
detail: {
|
|
107
|
+
name,
|
|
108
|
+
operator,
|
|
109
|
+
value: e.detail
|
|
110
|
+
}
|
|
111
|
+
}));
|
|
112
|
+
}}
|
|
113
|
+
>
|
|
114
|
+
<ox-popup-list with-search> ${renderer(filter, value, this)} </ox-popup-list>
|
|
115
|
+
</ox-select>
|
|
116
|
+
`;
|
|
115
117
|
})}
|
|
116
118
|
</form>
|
|
117
119
|
`;
|
|
@@ -229,6 +231,7 @@ OxFiltersFormBase.styles = [
|
|
|
229
231
|
form > * {
|
|
230
232
|
display: flex;
|
|
231
233
|
align-items: center;
|
|
234
|
+
gap: var(--input-intra-gap, 7px);
|
|
232
235
|
}
|
|
233
236
|
|
|
234
237
|
label span {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ox-filters-form-base.js","sourceRoot":"","sources":["../../../src/filters/ox-filters-form-base.ts"],"names":[],"mappings":"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","sourcesContent":["import '@operato/input/ox-checkbox.js'\nimport '@operato/input/ox-select.js'\nimport '@operato/popup/ox-popup-list.js'\nimport '@operato/input/ox-input-search.js'\n\nimport json5 from 'json5'\nimport { css, html, LitElement, PropertyValues, TemplateResult } from 'lit'\nimport { customElement, property, queryAsync } from 'lit/decorators.js'\n\nimport { getDefaultValue } from '@operato/time-calculator'\n\nimport { FilterStyles } from './filter-styles.js'\nimport { getFilterRenderer } from './registry.js'\nimport { FilterConfig, FilterOperator, FilterValue } from '../types.js'\n\nexport type QueryFilterRangeValue = [from: number, to: number]\n\n@customElement('ox-filters-form-base')\nexport class OxFiltersFormBase extends LitElement {\n static styles = [\n FilterStyles,\n css`\n :host {\n display: flex;\n }\n\n form {\n flex: 1;\n\n display: flex;\n flex-flow: row wrap;\n gap: var(--ox-filters-form-gap);\n }\n\n form > * {\n display: flex;\n align-items: center;\n }\n\n label span {\n display: block;\n }\n\n @media only screen and (max-width: 460px) {\n label[between] {\n display: block;\n }\n }\n `\n ]\n\n @property({ type: Array }) value: FilterValue[] = []\n @property({ type: Array }) filters: FilterConfig[] = []\n @property({ type: Boolean, attribute: 'url-params-sensitive' }) urlParamsSensitive?: boolean\n @property({ type: Boolean, attribute: 'autofocus' }) autofocus: boolean = true\n\n @queryAsync('form') form!: HTMLFormElement\n\n private _popstateEventHandler?: EventListener\n private _filtersChangeHandler?: EventListener\n\n connectedCallback(): void {\n super.connectedCallback()\n\n this.renderRoot.addEventListener('change', async (e: Event) => {\n const { target, detail: value } = e as CustomEvent\n const name = (target as HTMLInputElement).name\n const {\n label,\n type,\n operator,\n value: defaultValue,\n onchange\n } = this.filters.find(filter => filter.name == name) || {}\n\n const keepGoing = onchange ? onchange.call(null, value ?? (target as HTMLInputElement).value, this) : true\n\n keepGoing &&\n this.dispatchEvent(\n new CustomEvent('filters-change', {\n bubbles: true,\n composed: true,\n detail: {\n filters: this.value,\n from: 'filters-form'\n }\n })\n )\n })\n }\n\n buildDefaultValue(operator: string, defaultValue: any) {\n if (defaultValue === undefined) {\n return\n }\n if (operator == 'between') {\n return (defaultValue as Array<any>).map(v => getDefaultValue(v, this))\n } else {\n return getDefaultValue(defaultValue, this)\n }\n }\n\n render(): TemplateResult {\n return html`\n <form\n @submit=${(e: Event) => {\n e.preventDefault()\n }}\n >\n ${this.filters.map((filter: FilterConfig) => {\n const { name, label, type, operator, value: defaultValue } = filter\n const idx = operator === 'between' ? 1 : 0\n const renderer = getFilterRenderer(\n operator === 'like' || operator === 'i_like' || operator === 'i_nlike' || operator === 'nlike'\n ? 'text'\n : type\n )[idx]\n\n const value =\n this.value?.find(filter => filter.name == name)?.value ?? this.buildDefaultValue(operator!, defaultValue)\n\n if (!renderer) {\n return html``\n }\n\n return type === 'search'\n ? html`<ox-input-search name=\"search\" .value=${value} ?autofocus=${this.autofocus}></ox-input-search>`\n : type !== 'select'\n ? html`\n <label filter-title ?between=${operator == 'between'}\n ><span>${label}</span> ${renderer(filter, value, this)}\n </label>\n `\n : operator === 'in'\n ? html`\n <ox-select\n name=${name}\n placeholder=${label}\n .value=${value}\n @change=${(e: CustomEvent) =>\n e.target?.dispatchEvent(\n new CustomEvent('filter-change', {\n detail: {\n name,\n operator,\n value: e.detail\n }\n })\n )}\n >\n <ox-popup-list multiple attr-selected=\"checked\" with-search>\n ${renderer(filter, value, this)}\n </ox-popup-list>\n </ox-select>\n `\n : html`\n <ox-select\n name=${name}\n placeholder=${label}\n .value=${value}\n @change=${(e: CustomEvent) =>\n e.target?.dispatchEvent(\n new CustomEvent('filter-change', {\n detail: {\n name,\n operator,\n value: e.detail\n }\n })\n )}\n >\n <ox-popup-list with-search> ${renderer(filter, value, this)} </ox-popup-list>\n </ox-select>\n `\n })}\n </form>\n `\n }\n\n getFieldByName(name: string) {\n return this.renderRoot.querySelector(`[name=${name}]`)\n }\n\n async updated(changes: PropertyValues<this>) {\n if (changes.has('urlParamsSensitive')) {\n if (this.urlParamsSensitive) {\n this._popstateEventHandler = () => {\n const queryString = window.location.search\n const urlParams = new URLSearchParams(queryString)\n var filters = urlParams.get('filters')\n\n if (filters) {\n try {\n this.value = json5.parse(filters)\n this.dispatchEvent(\n new CustomEvent('filters-change', {\n bubbles: true,\n composed: true,\n detail: {\n filters: json5.parse(filters),\n from: 'url-parameter'\n }\n })\n )\n } catch (e) {\n console.error(`invalid filters params on URL query string : ${e}`)\n }\n }\n }\n\n //@ts-ignore\n this._popstateEventHandler() // call for the first time\n\n window.addEventListener('popstate', this._popstateEventHandler)\n\n this._filtersChangeHandler = (e: Event) => {\n const urlParams = new URLSearchParams(window.location.search)\n const { filters, from } = (e as CustomEvent).detail || {}\n\n if (from === 'url-parameter') {\n return\n }\n\n if (filters.length > 0) {\n urlParams.set('filters', json5.stringify(filters))\n } else {\n urlParams.delete('filters')\n }\n const queryString = String(urlParams)\n const url = `${window.location.pathname}${queryString ? `?${queryString}` : ''}`\n\n history.pushState({}, document.title, url)\n }\n\n this.addEventListener('filters-change', this._filtersChangeHandler)\n } else {\n if (this._popstateEventHandler) {\n window.removeEventListener('popstate', this._popstateEventHandler)\n }\n if (this._filtersChangeHandler) {\n this.removeEventListener('popstate', this._filtersChangeHandler)\n }\n }\n }\n }\n\n async getQueryFilters(): Promise<FilterValue[]> {\n const formData = new FormData(await this.form)\n\n var filters = this.filters\n .map((filter: FilterConfig) => {\n const { name, type, operator } = filter\n\n var value = formData.getAll(name)\n if (value.length == 0) {\n return\n }\n\n if (-1 === value.findIndex(v => v !== '')) {\n return\n }\n\n const filterValue = value.map(v => {\n const value = v.toString()\n\n /* TODO registry에서 타입별로 parsing 방법을 지정할 수 있도록 해야한다. */\n switch (type) {\n case 'integer':\n case 'float':\n case 'number':\n case 'progress':\n case 'checkbox':\n case 'boolean':\n return !value ? undefined : JSON.parse(value)\n default:\n return value\n }\n })\n\n return {\n name,\n operator,\n value: filterValue.length === 1 ? filterValue[0] : filterValue\n }\n })\n .filter(result => result !== undefined) as FilterValue[]\n\n return filters\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"ox-filters-form-base.js","sourceRoot":"","sources":["../../../src/filters/ox-filters-form-base.ts"],"names":[],"mappings":"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","sourcesContent":["import '@operato/input/ox-checkbox.js'\nimport '@operato/input/ox-select.js'\nimport '@operato/popup/ox-popup-list.js'\nimport '@operato/input/ox-input-search.js'\n\nimport json5 from 'json5'\nimport { css, html, LitElement, PropertyValues, TemplateResult } from 'lit'\nimport { customElement, property, queryAsync } from 'lit/decorators.js'\n\nimport { getDefaultValue } from '@operato/time-calculator'\n\nimport { FilterStyles } from './filter-styles.js'\nimport { getFilterRenderer } from './registry.js'\nimport { FilterConfig, FilterOperator, FilterValue } from '../types.js'\n\nexport type QueryFilterRangeValue = [from: number, to: number]\n\n@customElement('ox-filters-form-base')\nexport class OxFiltersFormBase extends LitElement {\n static styles = [\n FilterStyles,\n css`\n :host {\n display: flex;\n }\n\n form {\n flex: 1;\n\n display: flex;\n flex-flow: row wrap;\n gap: var(--ox-filters-form-gap);\n }\n\n form > * {\n display: flex;\n align-items: center;\n gap: var(--input-intra-gap, 7px);\n }\n\n label span {\n display: block;\n }\n\n @media only screen and (max-width: 460px) {\n label[between] {\n display: block;\n }\n }\n `\n ]\n\n @property({ type: Array }) value: FilterValue[] = []\n @property({ type: Array }) filters: FilterConfig[] = []\n @property({ type: Boolean, attribute: 'url-params-sensitive' }) urlParamsSensitive?: boolean\n @property({ type: Boolean, attribute: 'autofocus' }) autofocus: boolean = true\n\n @queryAsync('form') form!: HTMLFormElement\n\n private _popstateEventHandler?: EventListener\n private _filtersChangeHandler?: EventListener\n\n connectedCallback(): void {\n super.connectedCallback()\n\n this.renderRoot.addEventListener('change', async (e: Event) => {\n const { target, detail: value } = e as CustomEvent\n const name = (target as HTMLInputElement).name\n const {\n label,\n type,\n operator,\n value: defaultValue,\n onchange\n } = this.filters.find(filter => filter.name == name) || {}\n\n const keepGoing = onchange ? onchange.call(null, value ?? (target as HTMLInputElement).value, this) : true\n\n keepGoing &&\n this.dispatchEvent(\n new CustomEvent('filters-change', {\n bubbles: true,\n composed: true,\n detail: {\n filters: this.value,\n from: 'filters-form'\n }\n })\n )\n })\n }\n\n buildDefaultValue(operator: string, defaultValue: any) {\n if (defaultValue === undefined) {\n return\n }\n if (operator == 'between') {\n return (defaultValue as Array<any>).map(v => getDefaultValue(v, this))\n } else {\n return getDefaultValue(defaultValue, this)\n }\n }\n\n render(): TemplateResult {\n return html`\n <form\n @submit=${(e: Event) => {\n e.preventDefault()\n }}\n >\n ${this.filters.map((filter: FilterConfig) => {\n const { name, label, type, operator, value: defaultValue } = filter\n const idx = operator === 'between' ? 1 : 0\n const renderer = getFilterRenderer(\n operator === 'like' || operator === 'i_like' || operator === 'i_nlike' || operator === 'nlike'\n ? 'text'\n : type\n )[idx]\n\n const value =\n this.value?.find(filter => filter.name == name)?.value ?? this.buildDefaultValue(operator!, defaultValue)\n\n if (!renderer) {\n return html``\n }\n\n return type === 'search'\n ? html`<ox-input-search name=\"search\" .value=${value} ?autofocus=${this.autofocus}></ox-input-search>`\n : type === 'boolean'\n ? renderer(filter, value, this)\n : type !== 'select'\n ? html`\n <label filter-title ?between=${operator == 'between'}\n ><span>${label}</span> ${renderer(filter, value, this)}\n </label>\n `\n : operator === 'in'\n ? html`\n <ox-select\n name=${name}\n placeholder=${label}\n .value=${value}\n @change=${(e: CustomEvent) =>\n e.target?.dispatchEvent(\n new CustomEvent('filter-change', {\n detail: {\n name,\n operator,\n value: e.detail\n }\n })\n )}\n >\n <ox-popup-list multiple attr-selected=\"checked\" with-search>\n ${renderer(filter, value, this)}\n </ox-popup-list>\n </ox-select>\n `\n : html`\n <ox-select\n name=${name}\n placeholder=${label}\n .value=${value}\n @change=${(e: CustomEvent) =>\n e.target?.dispatchEvent(\n new CustomEvent('filter-change', {\n detail: {\n name,\n operator,\n value: e.detail\n }\n })\n )}\n >\n <ox-popup-list with-search> ${renderer(filter, value, this)} </ox-popup-list>\n </ox-select>\n `\n })}\n </form>\n `\n }\n\n getFieldByName(name: string) {\n return this.renderRoot.querySelector(`[name=${name}]`)\n }\n\n async updated(changes: PropertyValues<this>) {\n if (changes.has('urlParamsSensitive')) {\n if (this.urlParamsSensitive) {\n this._popstateEventHandler = () => {\n const queryString = window.location.search\n const urlParams = new URLSearchParams(queryString)\n var filters = urlParams.get('filters')\n\n if (filters) {\n try {\n this.value = json5.parse(filters)\n this.dispatchEvent(\n new CustomEvent('filters-change', {\n bubbles: true,\n composed: true,\n detail: {\n filters: json5.parse(filters),\n from: 'url-parameter'\n }\n })\n )\n } catch (e) {\n console.error(`invalid filters params on URL query string : ${e}`)\n }\n }\n }\n\n //@ts-ignore\n this._popstateEventHandler() // call for the first time\n\n window.addEventListener('popstate', this._popstateEventHandler)\n\n this._filtersChangeHandler = (e: Event) => {\n const urlParams = new URLSearchParams(window.location.search)\n const { filters, from } = (e as CustomEvent).detail || {}\n\n if (from === 'url-parameter') {\n return\n }\n\n if (filters.length > 0) {\n urlParams.set('filters', json5.stringify(filters))\n } else {\n urlParams.delete('filters')\n }\n const queryString = String(urlParams)\n const url = `${window.location.pathname}${queryString ? `?${queryString}` : ''}`\n\n history.pushState({}, document.title, url)\n }\n\n this.addEventListener('filters-change', this._filtersChangeHandler)\n } else {\n if (this._popstateEventHandler) {\n window.removeEventListener('popstate', this._popstateEventHandler)\n }\n if (this._filtersChangeHandler) {\n this.removeEventListener('popstate', this._filtersChangeHandler)\n }\n }\n }\n }\n\n async getQueryFilters(): Promise<FilterValue[]> {\n const formData = new FormData(await this.form)\n\n var filters = this.filters\n .map((filter: FilterConfig) => {\n const { name, type, operator } = filter\n\n var value = formData.getAll(name)\n if (value.length == 0) {\n return\n }\n\n if (-1 === value.findIndex(v => v !== '')) {\n return\n }\n\n const filterValue = value.map(v => {\n const value = v.toString()\n\n /* TODO registry에서 타입별로 parsing 방법을 지정할 수 있도록 해야한다. */\n switch (type) {\n case 'integer':\n case 'float':\n case 'number':\n case 'progress':\n case 'checkbox':\n case 'boolean':\n return !value ? undefined : JSON.parse(value)\n default:\n return value\n }\n })\n\n return {\n name,\n operator,\n value: filterValue.length === 1 ? filterValue[0] : filterValue\n }\n })\n .filter(result => result !== undefined) as FilterValue[]\n\n return filters\n }\n}\n"]}
|
|
@@ -12,6 +12,7 @@ export default {
|
|
|
12
12
|
const Template = ({ value, filters, urlParamsSensitive }) => html `
|
|
13
13
|
<link href="/themes/app-theme.css" rel="stylesheet" />
|
|
14
14
|
<link href="/themes/form-theme.css" rel="stylesheet" />
|
|
15
|
+
|
|
15
16
|
<link
|
|
16
17
|
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1"
|
|
17
18
|
rel="stylesheet"
|
|
@@ -25,11 +26,6 @@ const Template = ({ value, filters, urlParamsSensitive }) => html `
|
|
|
25
26
|
rel="stylesheet"
|
|
26
27
|
/>
|
|
27
28
|
|
|
28
|
-
<style>
|
|
29
|
-
body {
|
|
30
|
-
}
|
|
31
|
-
</style>
|
|
32
|
-
|
|
33
29
|
<ox-filters-form-base
|
|
34
30
|
.value=${value}
|
|
35
31
|
.filters=${filters}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ox-filters-form-barcode.stories.js","sourceRoot":"","sources":["../../stories/ox-filters-form-barcode.stories.ts"],"names":[],"mappings":"AAAA,OAAO,wCAAwC,CAAA;AAE/C,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAA;AAE1C,eAAe;IACb,KAAK,EAAE,yBAAyB;IAChC,SAAS,EAAE,yBAAyB;IACpC,QAAQ,EAAE;QACR,KAAK,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;QAC5B,OAAO,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;QAC9B,kBAAkB,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;KAC3C;CACF,CAAA;AAcD,MAAM,QAAQ,GAAoB,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,kBAAkB,EAAY,EAAE,EAAE,CAAC,IAAI,CAAA
|
|
1
|
+
{"version":3,"file":"ox-filters-form-barcode.stories.js","sourceRoot":"","sources":["../../stories/ox-filters-form-barcode.stories.ts"],"names":[],"mappings":"AAAA,OAAO,wCAAwC,CAAA;AAE/C,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAA;AAE1C,eAAe;IACb,KAAK,EAAE,yBAAyB;IAChC,SAAS,EAAE,yBAAyB;IACpC,QAAQ,EAAE;QACR,KAAK,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;QAC5B,OAAO,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;QAC9B,kBAAkB,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;KAC3C;CACF,CAAA;AAcD,MAAM,QAAQ,GAAoB,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,kBAAkB,EAAY,EAAE,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;;;;aAkB/E,KAAK;eACH,OAAO;4BACM,kBAAkB;sBACxB,CAAC,CAAc,EAAE,EAAE;IACnC,OAAO,CAAC,GAAG,CAAC,iBAAiB,EAAE,CAAC,CAAC,MAAM,CAAC,CAAA;AAC1C,CAAC;;;CAGJ,CAAA;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACxC,OAAO,CAAC,IAAI,GAAG;IACb,OAAO,EAAE;QACP;YACE,IAAI,EAAE,MAAM;YACZ,IAAI,EAAE,SAAS;YACf,KAAK,EAAE,MAAM;YACb,QAAQ,EAAE,IAAI;SACf;QACD;YACE,IAAI,EAAE,QAAQ;YACd,IAAI,EAAE,SAAS;YACf,KAAK,EAAE,QAAQ;YACf,QAAQ,EAAE,IAAI;SACf;QACD;YACE,IAAI,EAAE,KAAK;YACX,IAAI,EAAE,QAAQ;YACd,KAAK,EAAE,KAAK;YACZ,QAAQ,EAAE,IAAI;YACd,OAAO,EAAE,GAAG,EAAE;gBACZ,OAAO;oBACL;wBACE,OAAO,EAAE,EAAE;wBACX,KAAK,EAAE,EAAE;qBACV;oBACD;wBACE,OAAO,EAAE,KAAK;wBACd,KAAK,EAAE,KAAK;qBACb;oBACD;wBACE,OAAO,EAAE,KAAK;wBACd,KAAK,EAAE,KAAK;qBACb;iBACF,CAAA;YACH,CAAC;SACF;QACD;YACE,IAAI,EAAE,OAAO;YACb,IAAI,EAAE,QAAQ;YACd,KAAK,EAAE,OAAO;YACd,QAAQ,EAAE,SAAS;SACpB;QACD;YACE,IAAI,EAAE,YAAY;YAClB,IAAI,EAAE,UAAU;YAChB,KAAK,EAAE,MAAM;YACb,QAAQ,EAAE,SAAS;SACpB;KACF;CACF,CAAA","sourcesContent":["import '../src/filters/ox-filters-form-base.js'\n\nimport { html, TemplateResult } from 'lit'\n\nexport default {\n title: 'ox-filters-form-barcode',\n component: 'ox-filters-form-barcode',\n argTypes: {\n value: { control: 'object' },\n filters: { control: 'object' },\n urlParamsSensitive: { control: 'boolean' }\n }\n}\n\ninterface Story<T> {\n (args: T): TemplateResult\n args?: Partial<T>\n argTypes?: Record<string, unknown>\n}\n\ninterface ArgTypes {\n value?: object\n filters?: object\n urlParamsSensitive: boolean\n}\n\nconst Template: Story<ArgTypes> = ({ value, filters, urlParamsSensitive }: ArgTypes) => html`\n <link href=\"/themes/app-theme.css\" rel=\"stylesheet\" />\n <link href=\"/themes/form-theme.css\" rel=\"stylesheet\" />\n\n <link\n href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1\"\n rel=\"stylesheet\"\n />\n <link\n href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1\"\n rel=\"stylesheet\"\n />\n <link\n href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1\"\n rel=\"stylesheet\"\n />\n\n <ox-filters-form-base\n .value=${value}\n .filters=${filters}\n ?url-params-sensitive=${urlParamsSensitive}\n @filters-change=${(e: CustomEvent) => {\n console.log('filters changed', e.detail)\n }}\n >\n </ox-filters-form-base>\n`\n\nexport const Regular = Template.bind({})\nRegular.args = {\n filters: [\n {\n name: 'test',\n type: 'barcode',\n label: 'name',\n operator: 'eq'\n },\n {\n name: 'active',\n type: 'boolean',\n label: 'active',\n operator: 'eq'\n },\n {\n name: 'sss',\n type: 'select',\n label: 'sss',\n operator: 'eq',\n options: () => {\n return [\n {\n display: '',\n value: ''\n },\n {\n display: 'ABC',\n value: 'ABC'\n },\n {\n display: 'DEF',\n value: 'DEF'\n }\n ]\n }\n },\n {\n name: 'range',\n type: 'number',\n label: 'range',\n operator: 'between'\n },\n {\n name: 'date-range',\n type: 'datetime',\n label: 'date',\n operator: 'between'\n }\n ]\n}\n"]}
|
|
@@ -27,6 +27,27 @@ const Template = ({ value, filters, urlParamsSensitive }) => html `
|
|
|
27
27
|
|
|
28
28
|
<style>
|
|
29
29
|
body {
|
|
30
|
+
height: 500px;
|
|
31
|
+
}
|
|
32
|
+
</style>
|
|
33
|
+
|
|
34
|
+
<style>
|
|
35
|
+
ox-filters-form-base {
|
|
36
|
+
--input-gap-vertical: 8px;
|
|
37
|
+
--input-gap-horizontal: 16px;
|
|
38
|
+
|
|
39
|
+
--ox-filters-input-placeholder-color: var(--primary-color);
|
|
40
|
+
|
|
41
|
+
--ox-filters-input-border: 1px solid rgba(0, 0, 0, 0.2);
|
|
42
|
+
--ox-filters-input-focus-border: 1px solid var(--primary-color);
|
|
43
|
+
--ox-filters-input-font: normal 14px var(--theme-font);
|
|
44
|
+
--ox-filters-input-color: var(--primary-text-color);
|
|
45
|
+
--ox-filters-input-focus-color: var(--primary-color);
|
|
46
|
+
--ox-filters-label-font: normal 14px var(--theme-font);
|
|
47
|
+
--ox-filters-label-color: var(--primary-text-color);
|
|
48
|
+
|
|
49
|
+
--ox-filters-form-gap: var(--input-gap-vertical, 8px) var(--input-gap-horizontal, 16px);
|
|
50
|
+
--ox-filters-input-padding: 6px 2px;
|
|
30
51
|
}
|
|
31
52
|
</style>
|
|
32
53
|
|
|
@@ -43,6 +64,13 @@ const Template = ({ value, filters, urlParamsSensitive }) => html `
|
|
|
43
64
|
export const Regular = Template.bind({});
|
|
44
65
|
Regular.args = {
|
|
45
66
|
filters: [
|
|
67
|
+
{
|
|
68
|
+
name: 'search',
|
|
69
|
+
type: 'search',
|
|
70
|
+
label: 'search',
|
|
71
|
+
operator: 'eq',
|
|
72
|
+
value: ''
|
|
73
|
+
},
|
|
46
74
|
{
|
|
47
75
|
name: 'test',
|
|
48
76
|
type: 'string',
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ox-filters-form-base.stories.js","sourceRoot":"","sources":["../../stories/ox-filters-form-base.stories.ts"],"names":[],"mappings":"AAAA,OAAO,wCAAwC,CAAA;AAE/C,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAA;AAG1C,eAAe;IACb,KAAK,EAAE,sBAAsB;IAC7B,SAAS,EAAE,sBAAsB;IACjC,QAAQ,EAAE;QACR,KAAK,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;QAC5B,OAAO,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;QAC9B,kBAAkB,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;KAC3C;CACF,CAAA;AAcD,MAAM,QAAQ,GAAoB,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,kBAAkB,EAAY,EAAE,EAAE,CAAC,IAAI,CAAA
|
|
1
|
+
{"version":3,"file":"ox-filters-form-base.stories.js","sourceRoot":"","sources":["../../stories/ox-filters-form-base.stories.ts"],"names":[],"mappings":"AAAA,OAAO,wCAAwC,CAAA;AAE/C,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAA;AAG1C,eAAe;IACb,KAAK,EAAE,sBAAsB;IAC7B,SAAS,EAAE,sBAAsB;IACjC,QAAQ,EAAE;QACR,KAAK,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;QAC5B,OAAO,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;QAC9B,kBAAkB,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;KAC3C;CACF,CAAA;AAcD,MAAM,QAAQ,GAAoB,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,kBAAkB,EAAY,EAAE,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;aA2C/E,KAAM;eACJ,OAAQ;4BACK,kBAAkB;sBACxB,CAAC,CAAc,EAAE,EAAE;IACnC,OAAO,CAAC,GAAG,CAAC,iBAAiB,EAAE,CAAC,CAAC,MAAM,CAAC,CAAA;AAC1C,CAAC;;;CAGJ,CAAA;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACxC,OAAO,CAAC,IAAI,GAAG;IACb,OAAO,EAAE;QACP;YACE,IAAI,EAAE,QAAQ;YACd,IAAI,EAAE,QAAQ;YACd,KAAK,EAAE,QAAQ;YACf,QAAQ,EAAE,IAAI;YACd,KAAK,EAAE,EAAE;SACV;QACD;YACE,IAAI,EAAE,MAAM;YACZ,IAAI,EAAE,QAAQ;YACd,KAAK,EAAE,MAAM;YACb,QAAQ,EAAE,IAAI;YACd,KAAK,EAAE,SAAS;SACjB;QACD;YACE,IAAI,EAAE,QAAQ;YACd,IAAI,EAAE,SAAS;YACf,KAAK,EAAE,QAAQ;YACf,QAAQ,EAAE,IAAI;YACd,KAAK,EAAE,IAAI;YACX,QAAQ,EAAE,CAAC,KAAK,EAAE,QAA2B,EAAE,EAAE;gBAC/C,MAAM,GAAG,GAAG,QAAQ,CAAC,cAAc,CAAC,KAAK,CAAqB,CAAA;gBAC9D,GAAG,CAAC,KAAK,GAAG,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,CAAA;gBAEjC,OAAO,KAAK,CAAA;YACd,CAAC;SACF;QACD;YACE,IAAI,EAAE,KAAK;YACX,IAAI,EAAE,QAAQ;YACd,KAAK,EAAE,KAAK;YACZ,QAAQ,EAAE,IAAI;YACd,OAAO,EAAE,GAAG,EAAE;gBACZ,OAAO;oBACL;wBACE,OAAO,EAAE,EAAE;wBACX,KAAK,EAAE,EAAE;qBACV;oBACD;wBACE,OAAO,EAAE,KAAK;wBACd,KAAK,EAAE,KAAK;qBACb;oBACD;wBACE,OAAO,EAAE,KAAK;wBACd,KAAK,EAAE,KAAK;qBACb;iBACF,CAAA;YACH,CAAC;SACF;QACD;YACE,IAAI,EAAE,OAAO;YACb,IAAI,EAAE,QAAQ;YACd,KAAK,EAAE,OAAO;YACd,QAAQ,EAAE,SAAS;SACpB;QACD;YACE,IAAI,EAAE,YAAY;YAClB,IAAI,EAAE,MAAM;YACZ,KAAK,EAAE,MAAM;YACb,QAAQ,EAAE,SAAS;YACnB,KAAK,EAAE;gBACL,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,EAAE,EAAE,aAAa,EAAE,CAAC,CAAC,EAAE,EAAE;gBAC/C,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,EAAE,EAAE,YAAY,EAAE,CAAC,CAAC,EAAE,EAAE;aAChD;SACF;KACF;CACF,CAAA","sourcesContent":["import '../src/filters/ox-filters-form-base.js'\n\nimport { html, TemplateResult } from 'lit'\nimport { OxFiltersFormBase, FilterConfig, FilterValue } from '../src/index.js'\n\nexport default {\n title: 'ox-filters-form-base',\n component: 'ox-filters-form-base',\n argTypes: {\n value: { control: 'object' },\n filters: { control: 'object' },\n urlParamsSensitive: { control: 'boolean' }\n }\n}\n\ninterface Story<T> {\n (args: T): TemplateResult\n args?: Partial<T>\n argTypes?: Record<string, unknown>\n}\n\ninterface ArgTypes {\n value?: FilterValue[]\n filters?: FilterConfig[]\n urlParamsSensitive: boolean\n}\n\nconst Template: Story<ArgTypes> = ({ value, filters, urlParamsSensitive }: ArgTypes) => html`\n <link href=\"/themes/app-theme.css\" rel=\"stylesheet\" />\n <link href=\"/themes/form-theme.css\" rel=\"stylesheet\" />\n <link\n href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1\"\n rel=\"stylesheet\"\n />\n <link\n href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1\"\n rel=\"stylesheet\"\n />\n <link\n href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1\"\n rel=\"stylesheet\"\n />\n\n <style>\n body {\n height: 500px;\n }\n </style>\n\n <style>\n ox-filters-form-base {\n --input-gap-vertical: 8px;\n --input-gap-horizontal: 16px;\n\n --ox-filters-input-placeholder-color: var(--primary-color);\n\n --ox-filters-input-border: 1px solid rgba(0, 0, 0, 0.2);\n --ox-filters-input-focus-border: 1px solid var(--primary-color);\n --ox-filters-input-font: normal 14px var(--theme-font);\n --ox-filters-input-color: var(--primary-text-color);\n --ox-filters-input-focus-color: var(--primary-color);\n --ox-filters-label-font: normal 14px var(--theme-font);\n --ox-filters-label-color: var(--primary-text-color);\n\n --ox-filters-form-gap: var(--input-gap-vertical, 8px) var(--input-gap-horizontal, 16px);\n --ox-filters-input-padding: 6px 2px;\n }\n </style>\n\n <ox-filters-form-base\n .value=${value!}\n .filters=${filters!}\n ?url-params-sensitive=${urlParamsSensitive}\n @filters-change=${(e: CustomEvent) => {\n console.log('filters changed', e.detail)\n }}\n >\n </ox-filters-form-base>\n`\n\nexport const Regular = Template.bind({})\nRegular.args = {\n filters: [\n {\n name: 'search',\n type: 'search',\n label: 'search',\n operator: 'eq',\n value: ''\n },\n {\n name: 'test',\n type: 'string',\n label: 'name',\n operator: 'eq',\n value: 'No Name'\n },\n {\n name: 'active',\n type: 'boolean',\n label: 'active',\n operator: 'eq',\n value: true,\n onchange: (value, formBase: OxFiltersFormBase) => {\n const sss = formBase.getFieldByName('sss') as HTMLInputElement\n sss.value = value ? 'DEF' : 'ABC'\n\n return false\n }\n },\n {\n name: 'sss',\n type: 'select',\n label: 'sss',\n operator: 'eq',\n options: () => {\n return [\n {\n display: '',\n value: ''\n },\n {\n display: 'ABC',\n value: 'ABC'\n },\n {\n display: 'DEF',\n value: 'DEF'\n }\n ]\n }\n },\n {\n name: 'range',\n type: 'number',\n label: 'range',\n operator: 'between'\n },\n {\n name: 'date-range',\n type: 'date',\n label: 'date',\n operator: 'between',\n value: [\n { name: 'week', params: { relativeWeeks: -1 } },\n { name: 'today', params: { relativeDays: +1 } }\n ]\n }\n ]\n}\n"]}
|