@operato/form 2.0.0-alpha.51 → 2.0.0-alpha.68
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 +17 -0
- package/demo/index.html +14 -3
- package/dist/src/components/ox-file-uploader.js +7 -7
- package/dist/src/components/ox-file-uploader.js.map +1 -1
- package/dist/src/components/ox-search-form.d.ts +1 -1
- package/dist/src/components/ox-search-form.js +36 -36
- package/dist/src/components/ox-search-form.js.map +1 -1
- package/dist/stories/ox-filters-form-barcode.stories.js +13 -1
- package/dist/stories/ox-filters-form-barcode.stories.js.map +1 -1
- package/dist/stories/ox-filters-form-base.stories.js +13 -1
- package/dist/stories/ox-filters-form-base.stories.js.map +1 -1
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +6 -6
- package/src/components/ox-file-uploader.ts +7 -7
- package/src/components/ox-search-form.ts +83 -83
- package/stories/ox-filters-form-barcode.stories.ts +13 -1
- package/stories/ox-filters-form-base.stories.ts +13 -1
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,23 @@
|
|
|
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.68](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.67...v2.0.0-alpha.68) (2024-04-13)
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
### :bug: Bug Fix
|
|
10
|
+
|
|
11
|
+
* mwc=>md for context ([2bc13f2](https://github.com/hatiolab/operato/commit/2bc13f285f257782f73e5d7b5d1ddd197df85393))
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
## [2.0.0-alpha.57](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.56...v2.0.0-alpha.57) (2024-04-07)
|
|
16
|
+
|
|
17
|
+
**Note:** Version bump only for package @operato/form
|
|
18
|
+
|
|
19
|
+
|
|
20
|
+
|
|
21
|
+
|
|
22
|
+
|
|
6
23
|
## [2.0.0-alpha.51](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.50...v2.0.0-alpha.51) (2024-03-29)
|
|
7
24
|
|
|
8
25
|
|
package/demo/index.html
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
<!
|
|
1
|
+
<!doctype html>
|
|
2
2
|
<html lang="en-GB">
|
|
3
3
|
<head>
|
|
4
4
|
<meta charset="utf-8" />
|
|
@@ -18,7 +18,18 @@
|
|
|
18
18
|
}
|
|
19
19
|
</style>
|
|
20
20
|
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet" />
|
|
21
|
-
<link
|
|
21
|
+
<link
|
|
22
|
+
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1"
|
|
23
|
+
rel="stylesheet"
|
|
24
|
+
/>
|
|
25
|
+
<link
|
|
26
|
+
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1"
|
|
27
|
+
rel="stylesheet"
|
|
28
|
+
/>
|
|
29
|
+
<link
|
|
30
|
+
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1"
|
|
31
|
+
rel="stylesheet"
|
|
32
|
+
/>
|
|
22
33
|
|
|
23
34
|
<link href="/themes/app-theme.css" rel="stylesheet" />
|
|
24
35
|
<link href="/themes/form-theme.css" rel="stylesheet" />
|
|
@@ -28,7 +39,7 @@
|
|
|
28
39
|
|
|
29
40
|
<script type="module">
|
|
30
41
|
import { html, render } from 'lit'
|
|
31
|
-
import '@material/
|
|
42
|
+
import '@material/web/icon/icon.js'
|
|
32
43
|
import '../dist/src/filters/ox-filters-form-base.js'
|
|
33
44
|
|
|
34
45
|
const form = document.querySelector('#demo')
|
|
@@ -12,7 +12,7 @@ let FileUploader = class FileUploader extends LitElement {
|
|
|
12
12
|
render() {
|
|
13
13
|
var _a;
|
|
14
14
|
return html `
|
|
15
|
-
<
|
|
15
|
+
<md-icon>post_add</md-icon>
|
|
16
16
|
<span>add file or drop files here!</span>
|
|
17
17
|
<input
|
|
18
18
|
id="input-file"
|
|
@@ -53,12 +53,12 @@ let FileUploader = class FileUploader extends LitElement {
|
|
|
53
53
|
${this._files.map(file => html `
|
|
54
54
|
<li>
|
|
55
55
|
- ${file.name}
|
|
56
|
-
<
|
|
56
|
+
<md-icon
|
|
57
57
|
@click=${(e) => {
|
|
58
58
|
this._files.splice(this._files.indexOf(file), 1);
|
|
59
59
|
this.requestUpdate();
|
|
60
60
|
}}
|
|
61
|
-
>delete_outline</
|
|
61
|
+
>delete_outline</md-icon
|
|
62
62
|
>
|
|
63
63
|
</li>
|
|
64
64
|
`)}
|
|
@@ -96,7 +96,7 @@ FileUploader.styles = [
|
|
|
96
96
|
font: var(--file-uploader-font) !important;
|
|
97
97
|
color: var(--file-uploader-color);
|
|
98
98
|
}
|
|
99
|
-
:host >
|
|
99
|
+
:host > md-icon {
|
|
100
100
|
color: var(--file-uploader-icon-color);
|
|
101
101
|
}
|
|
102
102
|
|
|
@@ -132,14 +132,14 @@ FileUploader.styles = [
|
|
|
132
132
|
padding: var(--file-uploader-li-padding);
|
|
133
133
|
border-bottom: var(--file-uploader-li-border-bottom);
|
|
134
134
|
}
|
|
135
|
-
li
|
|
135
|
+
li md-icon {
|
|
136
136
|
float: right;
|
|
137
137
|
cursor: pointer;
|
|
138
138
|
font: var(--file-uploader-li-icon-font);
|
|
139
139
|
margin: var(--file-uploader-li-icon-margin);
|
|
140
140
|
}
|
|
141
|
-
li
|
|
142
|
-
li
|
|
141
|
+
li md-icon:hover,
|
|
142
|
+
li md-icon:active {
|
|
143
143
|
color: var(--file-uploader-li-icon-focus-color);
|
|
144
144
|
}
|
|
145
145
|
`
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ox-file-uploader.js","sourceRoot":"","sources":["../../../src/components/ox-file-uploader.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, css, html } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\n\nimport { FileDropHelper } from '@operato/utils'\n\n@customElement('ox-file-uploader')\nexport class FileUploader extends LitElement {\n static styles = [\n css`\n :host {\n display: flex;\n flex-direction: column;\n border-radius: var(--border-radius);\n text-align: center;\n padding-bottom: 5px !important;\n text-transform: capitalize;\n\n border: var(--file-uploader-border);\n background-color: var(--main-section-background-color);\n font: var(--file-uploader-font) !important;\n color: var(--file-uploader-color);\n }\n :host >
|
|
1
|
+
{"version":3,"file":"ox-file-uploader.js","sourceRoot":"","sources":["../../../src/components/ox-file-uploader.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, css, html } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\n\nimport { FileDropHelper } from '@operato/utils'\n\n@customElement('ox-file-uploader')\nexport class FileUploader extends LitElement {\n static styles = [\n css`\n :host {\n display: flex;\n flex-direction: column;\n border-radius: var(--border-radius);\n text-align: center;\n padding-bottom: 5px !important;\n text-transform: capitalize;\n\n border: var(--file-uploader-border);\n background-color: var(--main-section-background-color);\n font: var(--file-uploader-font) !important;\n color: var(--file-uploader-color);\n }\n :host > md-icon {\n color: var(--file-uploader-icon-color);\n }\n\n :host(.candrop) {\n background-color: var(--file-uploader-candrop-background-color);\n }\n\n #input-file {\n display: none;\n }\n\n label {\n position: relative;\n width: auto;\n border: none;\n text-transform: capitalize;\n\n padding: var(--file-uploader-label-padding);\n border-radius: var(--file-uploader-label-border-radius);\n background-color: var(--file-uploader-label-background-color);\n color: var(--file-uploader-label-color);\n font: var(--file-uploader-label-font) !important;\n }\n\n ul {\n max-width: 500px;\n list-style: none;\n padding: 0;\n }\n li {\n text-align: left;\n\n padding: var(--file-uploader-li-padding);\n border-bottom: var(--file-uploader-li-border-bottom);\n }\n li md-icon {\n float: right;\n cursor: pointer;\n font: var(--file-uploader-li-icon-font);\n margin: var(--file-uploader-li-icon-margin);\n }\n li md-icon:hover,\n li md-icon:active {\n color: var(--file-uploader-li-icon-focus-color);\n }\n `\n ]\n\n @property({ type: Boolean }) multiple: boolean = false\n @property({ type: String }) accept: string = '*/*'\n @property({ type: String }) label?: string\n\n @property({ type: Array }) _files: File[] = []\n\n @query('#input-file') fileInput!: HTMLInputElement\n\n render() {\n return html`\n <md-icon>post_add</md-icon>\n <span>add file or drop files here!</span>\n <input\n id=\"input-file\"\n type=\"file\"\n accept=${this.accept}\n ?multiple=${this.multiple}\n hidden\n @change=${(e: Event) => {\n const fileInput = e.currentTarget as HTMLInputElement\n const files = fileInput.files as FileList\n //// Temporary Validation preventing file size more than 10mb to be uploaded\n for (let index = 0; index < files.length; index++) {\n if (files[index].size > 9999999) {\n document.dispatchEvent(\n new CustomEvent('notify', {\n detail: {\n type: 'error',\n message: 'File size must be less than 10 MB.'\n }\n })\n )\n throw new Error('File size must be less than 10 MB.')\n }\n }\n\n this._files = [...this._files, ...Array.from(files)]\n\n this.dispatchEvent(\n new CustomEvent('files-change', {\n bubbles: true,\n composed: true,\n detail: {\n files: files\n }\n })\n )\n\n fileInput.value = ''\n }}\n />\n <label for=\"input-file\">${this.label || 'select file'}</label>\n\n ${this._files?.length\n ? html` <ul>\n ${this._files.map(\n file => html`\n <li>\n - ${file.name}\n <md-icon\n @click=${(e: Event) => {\n this._files.splice(this._files.indexOf(file), 1)\n this.requestUpdate()\n }}\n >delete_outline</md-icon\n >\n </li>\n `\n )}\n </ul>`\n : ''}\n `\n }\n\n firstUpdated() {\n FileDropHelper.set(this)\n\n this.addEventListener('file-drop', (e: Event) => {\n const de = e as any\n this._files = this.multiple ? de.detail : de.detail[0] ? [de.detail[0]] : []\n })\n }\n\n get files() {\n return this._files\n }\n\n reset() {\n this.fileInput.value = ''\n this._files = []\n }\n}\n"]}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { __decorate } from "tslib";
|
|
2
|
-
import '@material/
|
|
2
|
+
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';
|
|
@@ -42,13 +42,13 @@ let SearchForm = class SearchForm extends LitElement {
|
|
|
42
42
|
`
|
|
43
43
|
: field.type === 'checkbox'
|
|
44
44
|
? html `
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
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
52
|
const checkbox = e.currentTarget;
|
|
53
53
|
if (checkbox.hasAttribute('indeterminate')) {
|
|
54
54
|
const values = [undefined, 'on', 'off'];
|
|
@@ -68,40 +68,40 @@ let SearchForm = class SearchForm extends LitElement {
|
|
|
68
68
|
checkbox._value = newValue;
|
|
69
69
|
}
|
|
70
70
|
}}
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
71
|
+
/>
|
|
72
|
+
<label for="ckbx_${field.name}" ?hidden=${field.hidden}
|
|
73
|
+
>${field.label || field.name || field.id}</label
|
|
74
|
+
>
|
|
75
|
+
`
|
|
76
76
|
: field.type === 'object'
|
|
77
77
|
? html `
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
78
|
+
<label ?hidden=${field.hidden}>${field.label || field.name || field.id}</label>
|
|
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
90
|
: html `
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
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
|
+
`}
|
|
101
101
|
`)}
|
|
102
102
|
${this.hideSearchButton || false
|
|
103
103
|
? ``
|
|
104
|
-
: html `<
|
|
104
|
+
: html `<md-icon @click=${(e) => this.submit()} search>search</md-icon>`}
|
|
105
105
|
</form>
|
|
106
106
|
`;
|
|
107
107
|
}
|
|
@@ -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/mwc-icon'\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`<mwc-icon @click=${(e: MouseEvent) => this.submit()} search>search</mwc-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, 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"]}
|
|
@@ -12,7 +12,19 @@ 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
|
-
<link
|
|
15
|
+
<link
|
|
16
|
+
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1"
|
|
17
|
+
rel="stylesheet"
|
|
18
|
+
/>
|
|
19
|
+
<link
|
|
20
|
+
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1"
|
|
21
|
+
rel="stylesheet"
|
|
22
|
+
/>
|
|
23
|
+
<link
|
|
24
|
+
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1"
|
|
25
|
+
rel="stylesheet"
|
|
26
|
+
/>
|
|
27
|
+
|
|
16
28
|
<style>
|
|
17
29
|
body {
|
|
18
30
|
}
|
|
@@ -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;;;;;;;;;;;;;;;;;;;;;;aAsB/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 <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 }\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: '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"]}
|
|
@@ -12,7 +12,19 @@ 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
|
-
<link
|
|
15
|
+
<link
|
|
16
|
+
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1"
|
|
17
|
+
rel="stylesheet"
|
|
18
|
+
/>
|
|
19
|
+
<link
|
|
20
|
+
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1"
|
|
21
|
+
rel="stylesheet"
|
|
22
|
+
/>
|
|
23
|
+
<link
|
|
24
|
+
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1"
|
|
25
|
+
rel="stylesheet"
|
|
26
|
+
/>
|
|
27
|
+
|
|
16
28
|
<style>
|
|
17
29
|
body {
|
|
18
30
|
}
|
|
@@ -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;;;;;;;;;;;;;;;;;;;;;;aAsB/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,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 }\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: '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"]}
|