@operato/form 9.0.0-beta.10 → 9.0.0-beta.11
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/components/ox-custom-input.js +3 -61
- package/dist/src/components/ox-custom-input.js.map +1 -1
- package/dist/src/components/ox-custom-select.js +3 -49
- package/dist/src/components/ox-custom-select.js.map +1 -1
- package/dist/src/components/ox-file-uploader.js +6 -38
- package/dist/src/components/ox-file-uploader.js.map +1 -1
- package/dist/src/components/ox-form-master.js +6 -61
- package/dist/src/components/ox-form-master.js.map +1 -1
- package/dist/src/components/ox-form-paginator.js +5 -25
- package/dist/src/components/ox-form-paginator.js.map +1 -1
- package/dist/src/components/ox-search-form-paginator.js +4 -19
- package/dist/src/components/ox-search-form-paginator.js.map +1 -1
- package/dist/src/components/ox-search-form.js +8 -52
- package/dist/src/components/ox-search-form.js.map +1 -1
- package/dist/src/filters/ox-filter-personalizer.js +4 -20
- package/dist/src/filters/ox-filter-personalizer.js.map +1 -1
- package/dist/src/filters/ox-filters-form-base.js +9 -76
- package/dist/src/filters/ox-filters-form-base.js.map +1 -1
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +6 -6
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
|
+
## [9.0.0-beta.11](https://github.com/hatiolab/operato/compare/v9.0.0-beta.10...v9.0.0-beta.11) (2025-01-25)
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
### :bug: Bug Fix
|
|
10
|
+
|
|
11
|
+
* tsconfig option useDefineForClassFields=false ([0d77c0a](https://github.com/hatiolab/operato/commit/0d77c0aa620282c65b3c05f8e0b559e82836b6ab))
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
|
|
6
15
|
## [9.0.0-beta.10](https://github.com/hatiolab/operato/compare/v9.0.0-beta.9...v9.0.0-beta.10) (2025-01-25)
|
|
7
16
|
|
|
8
17
|
|
|
@@ -4,60 +4,7 @@ import { customElement, property, query } from 'lit/decorators.js';
|
|
|
4
4
|
let CustomInput = class CustomInput extends LitElement {
|
|
5
5
|
constructor() {
|
|
6
6
|
super(...arguments);
|
|
7
|
-
|
|
8
|
-
enumerable: true,
|
|
9
|
-
configurable: true,
|
|
10
|
-
writable: true,
|
|
11
|
-
value: void 0
|
|
12
|
-
});
|
|
13
|
-
Object.defineProperty(this, "placeholder", {
|
|
14
|
-
enumerable: true,
|
|
15
|
-
configurable: true,
|
|
16
|
-
writable: true,
|
|
17
|
-
value: void 0
|
|
18
|
-
});
|
|
19
|
-
Object.defineProperty(this, "type", {
|
|
20
|
-
enumerable: true,
|
|
21
|
-
configurable: true,
|
|
22
|
-
writable: true,
|
|
23
|
-
value: void 0
|
|
24
|
-
});
|
|
25
|
-
Object.defineProperty(this, "props", {
|
|
26
|
-
enumerable: true,
|
|
27
|
-
configurable: true,
|
|
28
|
-
writable: true,
|
|
29
|
-
value: void 0
|
|
30
|
-
});
|
|
31
|
-
Object.defineProperty(this, "attrs", {
|
|
32
|
-
enumerable: true,
|
|
33
|
-
configurable: true,
|
|
34
|
-
writable: true,
|
|
35
|
-
value: void 0
|
|
36
|
-
});
|
|
37
|
-
Object.defineProperty(this, "valueField", {
|
|
38
|
-
enumerable: true,
|
|
39
|
-
configurable: true,
|
|
40
|
-
writable: true,
|
|
41
|
-
value: void 0
|
|
42
|
-
});
|
|
43
|
-
Object.defineProperty(this, "value", {
|
|
44
|
-
enumerable: true,
|
|
45
|
-
configurable: true,
|
|
46
|
-
writable: true,
|
|
47
|
-
value: void 0
|
|
48
|
-
});
|
|
49
|
-
Object.defineProperty(this, "autofocus", {
|
|
50
|
-
enumerable: true,
|
|
51
|
-
configurable: true,
|
|
52
|
-
writable: true,
|
|
53
|
-
value: false
|
|
54
|
-
});
|
|
55
|
-
Object.defineProperty(this, "input", {
|
|
56
|
-
enumerable: true,
|
|
57
|
-
configurable: true,
|
|
58
|
-
writable: true,
|
|
59
|
-
value: void 0
|
|
60
|
-
});
|
|
7
|
+
this.autofocus = false;
|
|
61
8
|
}
|
|
62
9
|
render() {
|
|
63
10
|
return html `
|
|
@@ -120,11 +67,7 @@ let CustomInput = class CustomInput extends LitElement {
|
|
|
120
67
|
return this.input.checkValidity();
|
|
121
68
|
}
|
|
122
69
|
};
|
|
123
|
-
|
|
124
|
-
enumerable: true,
|
|
125
|
-
configurable: true,
|
|
126
|
-
writable: true,
|
|
127
|
-
value: css `
|
|
70
|
+
CustomInput.styles = css `
|
|
128
71
|
input {
|
|
129
72
|
margin: auto 0;
|
|
130
73
|
border: 1px solid var(--md-sys-color-outline);
|
|
@@ -136,8 +79,7 @@ Object.defineProperty(CustomInput, "styles", {
|
|
|
136
79
|
color: var(--form-input-background-color, var(--md-sys-color-on-surface-variant));
|
|
137
80
|
background-color: var(--form-input-background-color, var(--md-sys-color-surface-variant));
|
|
138
81
|
}
|
|
139
|
-
|
|
140
|
-
});
|
|
82
|
+
`;
|
|
141
83
|
__decorate([
|
|
142
84
|
property({ type: String })
|
|
143
85
|
], CustomInput.prototype, "name", void 0);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ox-custom-input.js","sourceRoot":"","sources":["../../../src/components/ox-custom-input.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAkB,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAC3D,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAS,MAAM,mBAAmB,CAAA;AAGlE,IAAM,WAAW,GAAjB,MAAM,WAAY,SAAQ,UAAU;IAApC;;
|
|
1
|
+
{"version":3,"file":"ox-custom-input.js","sourceRoot":"","sources":["../../../src/components/ox-custom-input.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, PropertyValues, css, html } from 'lit'\nimport { customElement, property, query, state } from 'lit/decorators.js'\n\n@customElement('ox-custom-input')\nexport class CustomInput extends LitElement {\n static styles = css`\n input {\n margin: auto 0;\n border: 1px solid var(--md-sys-color-outline);\n padding: 0 var(--spacing-small);\n min-width: var(--form-input-width, 300px);\n max-width: var(--form-input-width, 300px);\n height: var(--form-element-height-medium);\n outline: var(--form-input-outline, none);\n color: var(--form-input-background-color, var(--md-sys-color-on-surface-variant));\n background-color: var(--form-input-background-color, var(--md-sys-color-surface-variant));\n }\n `\n\n @property({ type: String }) name?: string\n @property({ type: String }) placeholder?: string\n @property({ type: String }) type?: string\n @property({ type: Object }) props: any\n @property({ type: Array }) attrs: any\n @property({ type: String }) valueField?: string\n @property({ type: Object }) value: any\n @property({ type: Boolean }) autofocus: boolean = false\n\n @query('input') input!: HTMLInputElement\n\n render() {\n return html`\n <input\n name=${this.name}\n placeholder=${this.placeholder}\n type=${this.type || 'text'}\n value=${this.value || ''}\n @input=${(e: InputEvent) => (this.value = (e.currentTarget as HTMLInputElement).value)}\n ?autofocus=${this.autofocus}\n />\n `\n }\n\n get checked() {\n return this.input.checked\n }\n\n set checked(checked) {\n this.input.checked = checked\n }\n\n firstUpdated() {\n this.dispatchEvent(new CustomEvent('load'))\n }\n\n updated(changes: PropertyValues<this>) {\n if (changes.has('props')) {\n if (this._isObject(this.props)) {\n for (let prop in this.props) {\n if (this.props[prop]) {\n this.input.setAttribute(prop, this.props[prop])\n this.setAttribute(prop, this.props[prop])\n }\n }\n }\n }\n\n if (changes.has('attrs')) {\n if (this.attrs && Array.isArray(this.attrs)) {\n this.attrs.forEach(attr => {\n this.input.setAttribute(attr, '')\n this.setAttribute(attr, '')\n })\n }\n }\n\n if (changes.has('value') && this._isObject(this.value)) {\n let value = this.value\n this.value = (this.valueField && value[this.valueField]) || value[Object.keys(value)[0]]\n }\n }\n\n _isObject(v: any) {\n return v instanceof Object && !Array.isArray(v)\n }\n\n focus() {\n this.input.focus()\n }\n\n select() {\n this.input.select()\n }\n\n blur() {\n this.input.blur()\n }\n\n checkValidity() {\n return this.input.checkValidity()\n }\n}\n"]}
|
|
@@ -4,48 +4,7 @@ import { customElement, property, query } from 'lit/decorators.js';
|
|
|
4
4
|
let CustomSelect = class CustomSelect extends LitElement {
|
|
5
5
|
constructor() {
|
|
6
6
|
super(...arguments);
|
|
7
|
-
|
|
8
|
-
enumerable: true,
|
|
9
|
-
configurable: true,
|
|
10
|
-
writable: true,
|
|
11
|
-
value: void 0
|
|
12
|
-
});
|
|
13
|
-
Object.defineProperty(this, "options", {
|
|
14
|
-
enumerable: true,
|
|
15
|
-
configurable: true,
|
|
16
|
-
writable: true,
|
|
17
|
-
value: void 0
|
|
18
|
-
});
|
|
19
|
-
Object.defineProperty(this, "props", {
|
|
20
|
-
enumerable: true,
|
|
21
|
-
configurable: true,
|
|
22
|
-
writable: true,
|
|
23
|
-
value: void 0
|
|
24
|
-
});
|
|
25
|
-
Object.defineProperty(this, "attrs", {
|
|
26
|
-
enumerable: true,
|
|
27
|
-
configurable: true,
|
|
28
|
-
writable: true,
|
|
29
|
-
value: void 0
|
|
30
|
-
});
|
|
31
|
-
Object.defineProperty(this, "value", {
|
|
32
|
-
enumerable: true,
|
|
33
|
-
configurable: true,
|
|
34
|
-
writable: true,
|
|
35
|
-
value: void 0
|
|
36
|
-
});
|
|
37
|
-
Object.defineProperty(this, "autofocus", {
|
|
38
|
-
enumerable: true,
|
|
39
|
-
configurable: true,
|
|
40
|
-
writable: true,
|
|
41
|
-
value: false
|
|
42
|
-
});
|
|
43
|
-
Object.defineProperty(this, "select", {
|
|
44
|
-
enumerable: true,
|
|
45
|
-
configurable: true,
|
|
46
|
-
writable: true,
|
|
47
|
-
value: void 0
|
|
48
|
-
});
|
|
7
|
+
this.autofocus = false;
|
|
49
8
|
}
|
|
50
9
|
render() {
|
|
51
10
|
return html `
|
|
@@ -94,11 +53,7 @@ let CustomSelect = class CustomSelect extends LitElement {
|
|
|
94
53
|
return this.select.checkValidity();
|
|
95
54
|
}
|
|
96
55
|
};
|
|
97
|
-
|
|
98
|
-
enumerable: true,
|
|
99
|
-
configurable: true,
|
|
100
|
-
writable: true,
|
|
101
|
-
value: css `
|
|
56
|
+
CustomSelect.styles = css `
|
|
102
57
|
select {
|
|
103
58
|
margin: auto 0;
|
|
104
59
|
border-style: var(--form-input-border-style, solid);
|
|
@@ -117,8 +72,7 @@ Object.defineProperty(CustomSelect, "styles", {
|
|
|
117
72
|
-webkit-appearance: none;
|
|
118
73
|
-webkit-border-radius: 0px;
|
|
119
74
|
}
|
|
120
|
-
|
|
121
|
-
});
|
|
75
|
+
`;
|
|
122
76
|
__decorate([
|
|
123
77
|
property({ type: String })
|
|
124
78
|
], CustomSelect.prototype, "name", void 0);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ox-custom-select.js","sourceRoot":"","sources":["../../../src/components/ox-custom-select.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAkB,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAC3D,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAG3D,IAAM,YAAY,GAAlB,MAAM,YAAa,SAAQ,UAAU;IAArC;;
|
|
1
|
+
{"version":3,"file":"ox-custom-select.js","sourceRoot":"","sources":["../../../src/components/ox-custom-select.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, PropertyValues, css, html } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\n\n@customElement('ox-custom-select')\nexport class CustomSelect extends LitElement {\n static styles = css`\n select {\n margin: auto 0;\n border-style: var(--form-input-border-style, solid);\n border-width: var(--form-input-border-width, 1px);\n border-color: var(--form-input-border-color, #c4c5c6);\n padding: var(--form-input-padding, 5px);\n outline: var(--form-input-outline, none);\n color: var(--form-input-background-color, var(--md-sys-color-on-surface-variant));\n background-color: var(--form-input-background-color, var(--md-sys-color-surface-variant));\n min-width: calc(\n var(--form-input-width, 300px) + 2 * var(--form-input-padding, 5px) + 2 * var(--form-input-border-width, 1px)\n );\n max-width: calc(\n var(--form-input-width) + 2 * var(--form-input-padding, 5px) + 2 * var(--form-input-border-width, 1px)\n );\n -webkit-appearance: none;\n -webkit-border-radius: 0px;\n }\n `\n\n @property({ type: String }) name?: string\n @property({ type: Array }) options?: { name: string; value: any }[]\n @property({ type: Object }) props: any\n @property({ type: Array }) attrs: any\n @property({ type: String }) value: any\n @property({ type: Boolean }) autofocus: boolean = false\n\n @query('select') select!: HTMLInputElement\n\n render() {\n return html`\n <select\n name=${this.name}\n ?autofocus=${this.autofocus}\n @change=${(e: Event) => (this.value = (e.currentTarget as HTMLSelectElement).value)}\n >\n ${(this.options || []).map(\n option => html`\n <option value=${option.value} ?selected=${this.value === option.value}>${option.name}</option>\n `\n )}\n </select>\n `\n }\n\n firstUpdated() {\n this.dispatchEvent(new CustomEvent('load'))\n }\n\n updated(changes: PropertyValues<this>) {\n if (changes.has('props') && this._isObject(this.props)) {\n for (let prop in this.props) {\n if (this.props[prop]) {\n this.select.setAttribute(prop, this.props[prop])\n this.setAttribute(prop, this.props[prop])\n }\n }\n }\n\n if (changes.has('attrs')) {\n if (this.attrs && Array.isArray(this.attrs)) {\n this.attrs.forEach(attr => {\n this.select.setAttribute(attr, '')\n this.setAttribute(attr, '')\n })\n }\n }\n }\n\n _isObject(v: any) {\n return v instanceof Object && !Array.isArray(v)\n }\n\n focus() {\n this.select.focus()\n }\n\n blur() {\n this.select.blur()\n }\n\n checkValidity() {\n return this.select.checkValidity()\n }\n}\n"]}
|
|
@@ -5,36 +5,9 @@ import { FileDropHelper } from '@operato/utils';
|
|
|
5
5
|
let FileUploader = class FileUploader extends LitElement {
|
|
6
6
|
constructor() {
|
|
7
7
|
super(...arguments);
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
writable: true,
|
|
12
|
-
value: false
|
|
13
|
-
});
|
|
14
|
-
Object.defineProperty(this, "accept", {
|
|
15
|
-
enumerable: true,
|
|
16
|
-
configurable: true,
|
|
17
|
-
writable: true,
|
|
18
|
-
value: '*/*'
|
|
19
|
-
});
|
|
20
|
-
Object.defineProperty(this, "label", {
|
|
21
|
-
enumerable: true,
|
|
22
|
-
configurable: true,
|
|
23
|
-
writable: true,
|
|
24
|
-
value: void 0
|
|
25
|
-
});
|
|
26
|
-
Object.defineProperty(this, "_files", {
|
|
27
|
-
enumerable: true,
|
|
28
|
-
configurable: true,
|
|
29
|
-
writable: true,
|
|
30
|
-
value: []
|
|
31
|
-
});
|
|
32
|
-
Object.defineProperty(this, "fileInput", {
|
|
33
|
-
enumerable: true,
|
|
34
|
-
configurable: true,
|
|
35
|
-
writable: true,
|
|
36
|
-
value: void 0
|
|
37
|
-
});
|
|
8
|
+
this.multiple = false;
|
|
9
|
+
this.accept = '*/*';
|
|
10
|
+
this._files = [];
|
|
38
11
|
}
|
|
39
12
|
render() {
|
|
40
13
|
var _a;
|
|
@@ -108,12 +81,8 @@ let FileUploader = class FileUploader extends LitElement {
|
|
|
108
81
|
this._files = [];
|
|
109
82
|
}
|
|
110
83
|
};
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
configurable: true,
|
|
114
|
-
writable: true,
|
|
115
|
-
value: [
|
|
116
|
-
css `
|
|
84
|
+
FileUploader.styles = [
|
|
85
|
+
css `
|
|
117
86
|
:host {
|
|
118
87
|
display: flex;
|
|
119
88
|
flex-direction: column;
|
|
@@ -175,8 +144,7 @@ Object.defineProperty(FileUploader, "styles", {
|
|
|
175
144
|
color: var(--file-uploader-li-icon-focus-color);
|
|
176
145
|
}
|
|
177
146
|
`
|
|
178
|
-
|
|
179
|
-
});
|
|
147
|
+
];
|
|
180
148
|
__decorate([
|
|
181
149
|
property({ type: Boolean })
|
|
182
150
|
], FileUploader.prototype, "multiple", void 0);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ox-file-uploader.js","sourceRoot":"","sources":["../../../src/components/ox-file-uploader.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAElE,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAA;AAGxC,IAAM,YAAY,GAAlB,MAAM,YAAa,SAAQ,UAAU;IAArC;;QAkEwB
|
|
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(--md-sys-color-background);\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 display: flex;\n align-items: center;\n }\n li md-icon {\n cursor: pointer;\n font: var(--file-uploader-li-icon-font);\n margin-left: auto;\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"]}
|
|
@@ -4,60 +4,10 @@ import { customElement, property, query, state } from 'lit/decorators.js';
|
|
|
4
4
|
let FormMaster = class FormMaster extends LitElement {
|
|
5
5
|
constructor() {
|
|
6
6
|
super(...arguments);
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
value: void 0
|
|
12
|
-
});
|
|
13
|
-
Object.defineProperty(this, "maxRowCount", {
|
|
14
|
-
enumerable: true,
|
|
15
|
-
configurable: true,
|
|
16
|
-
writable: true,
|
|
17
|
-
value: 2
|
|
18
|
-
});
|
|
19
|
-
Object.defineProperty(this, "maxColumnCount", {
|
|
20
|
-
enumerable: true,
|
|
21
|
-
configurable: true,
|
|
22
|
-
writable: true,
|
|
23
|
-
value: 4
|
|
24
|
-
});
|
|
25
|
-
Object.defineProperty(this, "initFocus", {
|
|
26
|
-
enumerable: true,
|
|
27
|
-
configurable: true,
|
|
28
|
-
writable: true,
|
|
29
|
-
value: void 0
|
|
30
|
-
});
|
|
31
|
-
Object.defineProperty(this, "pageCount", {
|
|
32
|
-
enumerable: true,
|
|
33
|
-
configurable: true,
|
|
34
|
-
writable: true,
|
|
35
|
-
value: void 0
|
|
36
|
-
});
|
|
37
|
-
Object.defineProperty(this, "form", {
|
|
38
|
-
enumerable: true,
|
|
39
|
-
configurable: true,
|
|
40
|
-
writable: true,
|
|
41
|
-
value: void 0
|
|
42
|
-
});
|
|
43
|
-
Object.defineProperty(this, "loadedCount", {
|
|
44
|
-
enumerable: true,
|
|
45
|
-
configurable: true,
|
|
46
|
-
writable: true,
|
|
47
|
-
value: 0
|
|
48
|
-
});
|
|
49
|
-
Object.defineProperty(this, "resizeEventHandler", {
|
|
50
|
-
enumerable: true,
|
|
51
|
-
configurable: true,
|
|
52
|
-
writable: true,
|
|
53
|
-
value: void 0
|
|
54
|
-
});
|
|
55
|
-
Object.defineProperty(this, "currentPage", {
|
|
56
|
-
enumerable: true,
|
|
57
|
-
configurable: true,
|
|
58
|
-
writable: true,
|
|
59
|
-
value: 1
|
|
60
|
-
});
|
|
7
|
+
this.maxRowCount = 2;
|
|
8
|
+
this.maxColumnCount = 4;
|
|
9
|
+
this.loadedCount = 0;
|
|
10
|
+
this.currentPage = 1;
|
|
61
11
|
}
|
|
62
12
|
connectedCallback() {
|
|
63
13
|
super.connectedCallback();
|
|
@@ -226,11 +176,7 @@ let FormMaster = class FormMaster extends LitElement {
|
|
|
226
176
|
}
|
|
227
177
|
}
|
|
228
178
|
};
|
|
229
|
-
|
|
230
|
-
enumerable: true,
|
|
231
|
-
configurable: true,
|
|
232
|
-
writable: true,
|
|
233
|
-
value: css `
|
|
179
|
+
FormMaster.styles = css `
|
|
234
180
|
form {
|
|
235
181
|
display: grid;
|
|
236
182
|
padding: var(--form-padding, 10px);
|
|
@@ -242,8 +188,7 @@ Object.defineProperty(FormMaster, "styles", {
|
|
|
242
188
|
custom-select {
|
|
243
189
|
justify-self: center;
|
|
244
190
|
}
|
|
245
|
-
|
|
246
|
-
});
|
|
191
|
+
`;
|
|
247
192
|
__decorate([
|
|
248
193
|
property({ type: Array })
|
|
249
194
|
], FormMaster.prototype, "fields", void 0);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ox-form-master.js","sourceRoot":"","sources":["../../../src/components/ox-form-master.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, PropertyValues, css, html } from 'lit'\nimport { customElement, property, query, state } from 'lit/decorators.js'\n\nimport { CustomInput } from './ox-custom-input.js'\nimport { CustomSelect } from './ox-custom-select.js'\nimport { FormPaginator } from './ox-form-paginator.js'\n\n@customElement('ox-form-master')\nclass FormMaster extends LitElement {\n static styles = css`\n form {\n display: grid;\n padding: var(--form-padding, 10px);\n grid-gap: var(--form-grid-gap, 10px);\n grid-template-columns: var(--form-grid-template-columns);\n background-color: var(--form-background-color, #e5e5e5);\n }\n custom-input,\n custom-select {\n justify-self: center;\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 valueField?: string\n displayField?: string\n options: { name: string; value: string }[]\n }[]\n @property({ type: Number }) maxRowCount: number = 2\n @property({ type: Number }) maxColumnCount: number = 4\n @property({ type: String }) initFocus?: string\n\n @state() private pageCount!: number\n\n @query('form') form!: HTMLFormElement\n\n private loadedCount: number = 0\n private resizeEventHandler?: EventListener\n\n connectedCallback(): void {\n super.connectedCallback()\n\n this.resizeEventHandler = this._adjustColumnProperty.bind(this)\n window.addEventListener('resize', this.resizeEventHandler)\n }\n\n disconnectedCallback(): void {\n super.disconnectedCallback()\n\n if (this.resizeEventHandler) {\n window.removeEventListener('resize', this.resizeEventHandler)\n }\n }\n\n render() {\n return html`\n <form\n @keypress=${(e: KeyboardEvent) => {\n if (e.key === 'Enter') {\n this.submit()\n }\n }}\n @submit=${(e: Event) => {\n e.preventDefault() // input=\"text\" 가 한개만 있을경우에 엔터를 치면 강제 submit되는 증상 방지\n }}\n >\n ${(this.fields || []).map(\n field => html`\n ${field.type === 'select'\n ? html`\n <ox-custom-select\n id=${field.id || field.name}\n name=${field.name || field.id}\n .props=${field.props}\n .attrs=${field.attrs}\n .value=${field.value}\n .autofocus=${this.initFocus === field.name}\n placeholder=${field.placeholder}\n @load=${this._onInputLoad.bind(this)}\n .options=${field.options}\n ></ox-custom-select>\n `\n : html`\n <ox-custom-input\n id=${field.id || field.name}\n name=${field.name || field.id}\n .props=${field.props}\n .attrs=${field.attrs}\n .valueField=${field.valueField}\n .displayField=${field.displayField}\n .value=${field.value}\n .autofocus=${this.initFocus === field.name}\n placeholder=${field.placeholder}\n @load=${this._onInputLoad.bind(this)}\n ></ox-custom-input>\n `}\n `\n )}\n </form>\n\n <form-paginator .pageCount=${this.pageCount} @pageChange=${this._onPageChangeHandler.bind(this)}></form-paginator>\n `\n }\n\n updated(changes: PropertyValues<this>) {\n if (changes.has('fields')) {\n this._checkInputValidity()\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 _onInputLoad() {\n this.loadedCount++\n if (this.loadedCount === (this.fields || []).length - 1) {\n this._adjustColumnProperty()\n this._initFocus()\n this.dispatchEvent(new CustomEvent('load'))\n }\n }\n\n getFields(): (CustomInput | CustomSelect)[] {\n return Array.from(this.form.querySelectorAll('ox-custom-select, ox-custom-input') || [])\n }\n\n private currentPage: number = 1\n\n _adjustColumnProperty() {\n const inputElements = this.getFields()\n\n if (inputElements.length === 0) return\n const inputWidth = inputElements[0].offsetWidth\n const totalWidth = window.innerWidth\n const inputCount = inputElements.length\n let columnCount =\n Math.floor(totalWidth / inputWidth) < this.maxColumnCount\n ? Math.floor(totalWidth / inputWidth)\n : this.maxColumnCount > inputCount\n ? inputCount\n : this.maxColumnCount\n\n if (columnCount === 1) {\n this.pageCount = Math.ceil(inputElements.length / this.maxRowCount)\n this._filterActiveFields(this.currentPage)\n } else {\n this.pageCount = 1\n this._activeFields()\n }\n\n this.style.setProperty('--form-grid-template-columns', `repeat(${columnCount}, 1fr)`)\n }\n\n _initFocus() {\n if (!this.initFocus) this.getFields()[0].focus()\n }\n\n getFieldByName(name: string) {\n return this.renderRoot.querySelector(`[name=${name}]`)\n }\n\n reset() {\n this.form && this.form.reset()\n }\n\n submit() {\n this.dispatchEvent(new CustomEvent('submit'))\n }\n\n focusById(id: string) {\n const input = this.renderRoot.querySelector(`form > #${id}`) as CustomInput | CustomSelect\n input.focus()\n }\n\n checkValidity() {\n return this.form.checkValidity()\n }\n\n serialize() {\n let data: { [name: string]: any } = {}\n\n this.getFields().forEach(field => {\n const name = field.name\n if (name) {\n data[name] = field.value\n }\n })\n\n return data\n }\n\n get searchParams() {\n let searchParam = new URLSearchParams()\n const data = this.serialize()\n const fields = this.getFields()\n fields.forEach(field => searchParam.append(field.name!, field.value))\n\n return decodeURI(searchParam.toString())\n }\n\n _onPageChangeHandler(event: Event) {\n this.currentPage = (event.currentTarget as FormPaginator).currentPage\n this._filterActiveFields(this.currentPage)\n }\n\n _activeFields() {\n this.getFields().forEach(field => (field.hidden = false))\n }\n\n _filterActiveFields(currentPage = 1) {\n if (this.pageCount > 1) {\n const fields = this.getFields()\n\n const chunkedFields = []\n for (let i = 0, j = fields.length; i < j; i += this.maxRowCount) {\n chunkedFields.push(fields.slice(i, i + this.maxRowCount))\n }\n\n chunkedFields.forEach((fields, idx) => {\n if (currentPage === idx + 1) {\n fields.forEach(field => (field.hidden = false))\n } else {\n fields.forEach(field => (field.hidden = true))\n }\n })\n }\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"ox-form-master.js","sourceRoot":"","sources":["../../../src/components/ox-form-master.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, PropertyValues, css, html } from 'lit'\nimport { customElement, property, query, state } from 'lit/decorators.js'\n\nimport { CustomInput } from './ox-custom-input.js'\nimport { CustomSelect } from './ox-custom-select.js'\nimport { FormPaginator } from './ox-form-paginator.js'\n\n@customElement('ox-form-master')\nclass FormMaster extends LitElement {\n static styles = css`\n form {\n display: grid;\n padding: var(--form-padding, 10px);\n grid-gap: var(--form-grid-gap, 10px);\n grid-template-columns: var(--form-grid-template-columns);\n background-color: var(--form-background-color, #e5e5e5);\n }\n custom-input,\n custom-select {\n justify-self: center;\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 valueField?: string\n displayField?: string\n options: { name: string; value: string }[]\n }[]\n @property({ type: Number }) maxRowCount: number = 2\n @property({ type: Number }) maxColumnCount: number = 4\n @property({ type: String }) initFocus?: string\n\n @state() private pageCount!: number\n\n @query('form') form!: HTMLFormElement\n\n private loadedCount: number = 0\n private resizeEventHandler?: EventListener\n\n connectedCallback(): void {\n super.connectedCallback()\n\n this.resizeEventHandler = this._adjustColumnProperty.bind(this)\n window.addEventListener('resize', this.resizeEventHandler)\n }\n\n disconnectedCallback(): void {\n super.disconnectedCallback()\n\n if (this.resizeEventHandler) {\n window.removeEventListener('resize', this.resizeEventHandler)\n }\n }\n\n render() {\n return html`\n <form\n @keypress=${(e: KeyboardEvent) => {\n if (e.key === 'Enter') {\n this.submit()\n }\n }}\n @submit=${(e: Event) => {\n e.preventDefault() // input=\"text\" 가 한개만 있을경우에 엔터를 치면 강제 submit되는 증상 방지\n }}\n >\n ${(this.fields || []).map(\n field => html`\n ${field.type === 'select'\n ? html`\n <ox-custom-select\n id=${field.id || field.name}\n name=${field.name || field.id}\n .props=${field.props}\n .attrs=${field.attrs}\n .value=${field.value}\n .autofocus=${this.initFocus === field.name}\n placeholder=${field.placeholder}\n @load=${this._onInputLoad.bind(this)}\n .options=${field.options}\n ></ox-custom-select>\n `\n : html`\n <ox-custom-input\n id=${field.id || field.name}\n name=${field.name || field.id}\n .props=${field.props}\n .attrs=${field.attrs}\n .valueField=${field.valueField}\n .displayField=${field.displayField}\n .value=${field.value}\n .autofocus=${this.initFocus === field.name}\n placeholder=${field.placeholder}\n @load=${this._onInputLoad.bind(this)}\n ></ox-custom-input>\n `}\n `\n )}\n </form>\n\n <form-paginator .pageCount=${this.pageCount} @pageChange=${this._onPageChangeHandler.bind(this)}></form-paginator>\n `\n }\n\n updated(changes: PropertyValues<this>) {\n if (changes.has('fields')) {\n this._checkInputValidity()\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 _onInputLoad() {\n this.loadedCount++\n if (this.loadedCount === (this.fields || []).length - 1) {\n this._adjustColumnProperty()\n this._initFocus()\n this.dispatchEvent(new CustomEvent('load'))\n }\n }\n\n getFields(): (CustomInput | CustomSelect)[] {\n return Array.from(this.form.querySelectorAll('ox-custom-select, ox-custom-input') || [])\n }\n\n private currentPage: number = 1\n\n _adjustColumnProperty() {\n const inputElements = this.getFields()\n\n if (inputElements.length === 0) return\n const inputWidth = inputElements[0].offsetWidth\n const totalWidth = window.innerWidth\n const inputCount = inputElements.length\n let columnCount =\n Math.floor(totalWidth / inputWidth) < this.maxColumnCount\n ? Math.floor(totalWidth / inputWidth)\n : this.maxColumnCount > inputCount\n ? inputCount\n : this.maxColumnCount\n\n if (columnCount === 1) {\n this.pageCount = Math.ceil(inputElements.length / this.maxRowCount)\n this._filterActiveFields(this.currentPage)\n } else {\n this.pageCount = 1\n this._activeFields()\n }\n\n this.style.setProperty('--form-grid-template-columns', `repeat(${columnCount}, 1fr)`)\n }\n\n _initFocus() {\n if (!this.initFocus) this.getFields()[0].focus()\n }\n\n getFieldByName(name: string) {\n return this.renderRoot.querySelector(`[name=${name}]`)\n }\n\n reset() {\n this.form && this.form.reset()\n }\n\n submit() {\n this.dispatchEvent(new CustomEvent('submit'))\n }\n\n focusById(id: string) {\n const input = this.renderRoot.querySelector(`form > #${id}`) as CustomInput | CustomSelect\n input.focus()\n }\n\n checkValidity() {\n return this.form.checkValidity()\n }\n\n serialize() {\n let data: { [name: string]: any } = {}\n\n this.getFields().forEach(field => {\n const name = field.name\n if (name) {\n data[name] = field.value\n }\n })\n\n return data\n }\n\n get searchParams() {\n let searchParam = new URLSearchParams()\n const data = this.serialize()\n const fields = this.getFields()\n fields.forEach(field => searchParam.append(field.name!, field.value))\n\n return decodeURI(searchParam.toString())\n }\n\n _onPageChangeHandler(event: Event) {\n this.currentPage = (event.currentTarget as FormPaginator).currentPage\n this._filterActiveFields(this.currentPage)\n }\n\n _activeFields() {\n this.getFields().forEach(field => (field.hidden = false))\n }\n\n _filterActiveFields(currentPage = 1) {\n if (this.pageCount > 1) {\n const fields = this.getFields()\n\n const chunkedFields = []\n for (let i = 0, j = fields.length; i < j; i += this.maxRowCount) {\n chunkedFields.push(fields.slice(i, i + this.maxRowCount))\n }\n\n chunkedFields.forEach((fields, idx) => {\n if (currentPage === idx + 1) {\n fields.forEach(field => (field.hidden = false))\n } else {\n fields.forEach(field => (field.hidden = true))\n }\n })\n }\n }\n}\n"]}
|
|
@@ -4,24 +4,9 @@ import { customElement, property, state } from 'lit/decorators.js';
|
|
|
4
4
|
let FormPaginator = class FormPaginator extends LitElement {
|
|
5
5
|
constructor() {
|
|
6
6
|
super(...arguments);
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
writable: true,
|
|
11
|
-
value: 1
|
|
12
|
-
});
|
|
13
|
-
Object.defineProperty(this, "selectors", {
|
|
14
|
-
enumerable: true,
|
|
15
|
-
configurable: true,
|
|
16
|
-
writable: true,
|
|
17
|
-
value: []
|
|
18
|
-
});
|
|
19
|
-
Object.defineProperty(this, "currentPage", {
|
|
20
|
-
enumerable: true,
|
|
21
|
-
configurable: true,
|
|
22
|
-
writable: true,
|
|
23
|
-
value: 1
|
|
24
|
-
});
|
|
7
|
+
this.pageCount = 1;
|
|
8
|
+
this.selectors = [];
|
|
9
|
+
this.currentPage = 1;
|
|
25
10
|
}
|
|
26
11
|
render() {
|
|
27
12
|
return html `
|
|
@@ -55,11 +40,7 @@ let FormPaginator = class FormPaginator extends LitElement {
|
|
|
55
40
|
}
|
|
56
41
|
}
|
|
57
42
|
};
|
|
58
|
-
|
|
59
|
-
enumerable: true,
|
|
60
|
-
configurable: true,
|
|
61
|
-
writable: true,
|
|
62
|
-
value: css `
|
|
43
|
+
FormPaginator.styles = css `
|
|
63
44
|
:host {
|
|
64
45
|
display: block;
|
|
65
46
|
background-color: var(--form-background-color, #e5e5e5);
|
|
@@ -72,8 +53,7 @@ Object.defineProperty(FormPaginator, "styles", {
|
|
|
72
53
|
[selected] {
|
|
73
54
|
color: #6f6f6f;
|
|
74
55
|
}
|
|
75
|
-
|
|
76
|
-
});
|
|
56
|
+
`;
|
|
77
57
|
__decorate([
|
|
78
58
|
property({ type: Number })
|
|
79
59
|
], FormPaginator.prototype, "pageCount", void 0);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ox-form-paginator.js","sourceRoot":"","sources":["../../../src/components/ox-form-paginator.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAkB,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAC3D,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAG3D,IAAM,aAAa,GAAnB,MAAM,aAAc,SAAQ,UAAU;IAAtC;;QAgBuB
|
|
1
|
+
{"version":3,"file":"ox-form-paginator.js","sourceRoot":"","sources":["../../../src/components/ox-form-paginator.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAkB,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAC3D,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAG3D,IAAM,aAAa,GAAnB,MAAM,aAAc,SAAQ,UAAU;IAAtC;;QAgBuB,cAAS,GAAW,CAAC,CAAA;QACtB,cAAS,GAAa,EAAE,CAAA;QAEnC,gBAAW,GAAW,CAAC,CAAA;IAoCzC,CAAC;IAlCC,MAAM;QACJ,OAAO,IAAI,CAAA;QACP,IAAI,CAAC,SAAS,CAAC,GAAG,CAClB,IAAI,CAAC,EAAE,CAAC,IAAI,CAAA;;mBAED,IAAI;wBACC,IAAI,IAAI,IAAI,CAAC,WAAW;qBAC3B,CAAC,CAAa,EAAE,EAAE;YACzB,IAAI,CAAC,WAAW,GAAG,IAAI,CAAA;YACvB,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,YAAY,CAAC,CAAC,CAAA;YACjD,IAAI,CAAC,aAAa,EAAE,CAAA;QACtB,CAAC;;;SAGJ,CACF;KACF,CAAA;IACH,CAAC;IAED,OAAO,CAAC,OAA6B;QACnC,IAAI,OAAO,CAAC,GAAG,CAAC,WAAW,CAAC,EAAE,CAAC;YAC7B,IAAI,IAAI,CAAC,SAAS,GAAG,CAAC,EAAE,CAAC;gBACvB,IAAI,CAAC,GAAG,CAAC,CAAA;gBACT,IAAI,CAAC,SAAS,GAAG,EAAE,CAAA;gBAEnB,OAAO,CAAC,IAAI,IAAI,CAAC,SAAS,EAAE,CAAC;oBAC3B,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC,CAAA;oBACtB,CAAC,EAAE,CAAA;gBACL,CAAC;YACH,CAAC;iBAAM,CAAC;gBACN,IAAI,CAAC,SAAS,GAAG,EAAE,CAAA;YACrB,CAAC;QACH,CAAC;IACH,CAAC;;AArDM,oBAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;GAalB,AAbY,CAaZ;AAE2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;gDAAsB;AACtB;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;gDAAyB;AAEnC;IAAf,KAAK,EAAE;kDAA+B;AAnB5B,aAAa;IADzB,aAAa,CAAC,gBAAgB,CAAC;GACnB,aAAa,CAuDzB","sourcesContent":["import { LitElement, PropertyValues, css, html } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\n\n@customElement('form-paginator')\nexport class FormPaginator extends LitElement {\n static styles = css`\n :host {\n display: block;\n background-color: var(--form-background-color, #e5e5e5);\n font-size: 1.5em;\n line-height: 0.5em;\n text-align: center;\n color: #c4c5c6;\n }\n\n [selected] {\n color: #6f6f6f;\n }\n `\n\n @property({ type: Number }) pageCount: number = 1\n @property({ type: Array }) selectors: number[] = []\n\n @state() public currentPage: number = 1\n\n render() {\n return html`\n ${this.selectors.map(\n page => html`\n <span\n page=${page}\n ?selected=${page == this.currentPage}\n @click=${(e: MouseEvent) => {\n this.currentPage = page\n this.dispatchEvent(new CustomEvent('pageChange'))\n this.requestUpdate()\n }}\n >•</span\n >\n `\n )}\n `\n }\n\n updated(changes: PropertyValues<this>) {\n if (changes.has('pageCount')) {\n if (this.pageCount > 1) {\n let i = 1\n this.selectors = []\n\n while (i <= this.pageCount) {\n this.selectors.push(i)\n i++\n }\n } else {\n this.selectors = []\n }\n }\n }\n}\n"]}
|
|
@@ -4,18 +4,8 @@ import { customElement, property } from 'lit/decorators.js';
|
|
|
4
4
|
let SearchFormPaginator = class SearchFormPaginator extends LitElement {
|
|
5
5
|
constructor() {
|
|
6
6
|
super(...arguments);
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
configurable: true,
|
|
10
|
-
writable: true,
|
|
11
|
-
value: 0
|
|
12
|
-
});
|
|
13
|
-
Object.defineProperty(this, "currentPage", {
|
|
14
|
-
enumerable: true,
|
|
15
|
-
configurable: true,
|
|
16
|
-
writable: true,
|
|
17
|
-
value: 0
|
|
18
|
-
});
|
|
7
|
+
this.pageCount = 0;
|
|
8
|
+
this.currentPage = 0;
|
|
19
9
|
}
|
|
20
10
|
render() {
|
|
21
11
|
return html `
|
|
@@ -35,11 +25,7 @@ let SearchFormPaginator = class SearchFormPaginator extends LitElement {
|
|
|
35
25
|
`;
|
|
36
26
|
}
|
|
37
27
|
};
|
|
38
|
-
|
|
39
|
-
enumerable: true,
|
|
40
|
-
configurable: true,
|
|
41
|
-
writable: true,
|
|
42
|
-
value: css `
|
|
28
|
+
SearchFormPaginator.styles = css `
|
|
43
29
|
:host {
|
|
44
30
|
display: block;
|
|
45
31
|
background-color: var(--form-background-color, #e5e5e5);
|
|
@@ -52,8 +38,7 @@ Object.defineProperty(SearchFormPaginator, "styles", {
|
|
|
52
38
|
[selected] {
|
|
53
39
|
color: #6f6f6f;
|
|
54
40
|
}
|
|
55
|
-
|
|
56
|
-
});
|
|
41
|
+
`;
|
|
57
42
|
__decorate([
|
|
58
43
|
property({ type: Number })
|
|
59
44
|
], SearchFormPaginator.prototype, "pageCount", void 0);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ox-search-form-paginator.js","sourceRoot":"","sources":["../../../src/components/ox-search-form-paginator.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAG3D,IAAM,mBAAmB,GAAzB,MAAM,mBAAoB,SAAQ,UAAU;IAA5C;;QAgB8B
|
|
1
|
+
{"version":3,"file":"ox-search-form-paginator.js","sourceRoot":"","sources":["../../../src/components/ox-search-form-paginator.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAG3D,IAAM,mBAAmB,GAAzB,MAAM,mBAAoB,SAAQ,UAAU;IAA5C;;QAgB8B,cAAS,GAAW,CAAC,CAAA;QACrB,gBAAW,GAAW,CAAC,CAAA;IAwBrD,CAAC;IAtBC,MAAM;QACJ,OAAO,IAAI,CAAA;QACP,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC;aACpB,IAAI,CAAC,EAAE,CAAC;aACR,GAAG,CACF,CAAC,CAAC,EAAE,IAAI,EAAE,EAAE,CAAC,IAAI,CAAA;;0BAED,IAAI,IAAI,IAAI,CAAC,WAAW;uBAC3B,CAAC,CAAa,EAAE,EAAE,CACzB,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,aAAa,EAAE;YAC7B,MAAM,EAAE;gBACN,IAAI;aACL;SACF,CAAC,CACH;;;WAGN,CACF;KACJ,CAAA;IACH,CAAC;;AAvCM,0BAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;GAalB,AAbY,CAaZ;AAE2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;sDAAsB;AACrB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;wDAAwB;AAjB/C,mBAAmB;IADxB,aAAa,CAAC,0BAA0B,CAAC;GACpC,mBAAmB,CAyCxB","sourcesContent":["import { LitElement, css, html } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\n@customElement('ox-search-form-paginator')\nclass SearchFormPaginator extends LitElement {\n static styles = css`\n :host {\n display: block;\n background-color: var(--form-background-color, #e5e5e5);\n font-size: 1.5em;\n line-height: 0.5em;\n text-align: center;\n color: #c4c5c6;\n }\n\n [selected] {\n color: #6f6f6f;\n }\n `\n\n @property({ type: Number }) pageCount: number = 0\n @property({ type: Number }) currentPage: number = 0\n\n render() {\n return html`\n ${Array(this.pageCount)\n .fill('')\n .map(\n (_, page) => html`\n <span\n ?selected=${page == this.currentPage}\n @click=${(e: MouseEvent) =>\n this.dispatchEvent(\n new CustomEvent('pagechanged', {\n detail: {\n page\n }\n })\n )}\n >•</span\n >\n `\n )}\n `\n }\n}\n"]}
|