@operato/form 9.0.0-beta.0 → 9.0.0-beta.10
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 +44 -0
- package/dist/src/components/ox-custom-input.js +61 -3
- package/dist/src/components/ox-custom-input.js.map +1 -1
- package/dist/src/components/ox-custom-select.js +49 -3
- package/dist/src/components/ox-custom-select.js.map +1 -1
- package/dist/src/components/ox-file-uploader.js +38 -6
- package/dist/src/components/ox-file-uploader.js.map +1 -1
- package/dist/src/components/ox-form-master.js +61 -6
- package/dist/src/components/ox-form-master.js.map +1 -1
- package/dist/src/components/ox-form-paginator.js +25 -5
- package/dist/src/components/ox-form-paginator.js.map +1 -1
- package/dist/src/components/ox-search-form-paginator.js +19 -4
- package/dist/src/components/ox-search-form-paginator.js.map +1 -1
- package/dist/src/components/ox-search-form.js +53 -9
- package/dist/src/components/ox-search-form.js.map +1 -1
- package/dist/src/filters/ox-filter-personalizer.js +20 -4
- package/dist/src/filters/ox-filter-personalizer.js.map +1 -1
- package/dist/src/filters/ox-filters-form-base.js +77 -10
- package/dist/src/filters/ox-filters-form-base.js.map +1 -1
- package/dist/src/index.d.ts +4 -4
- package/dist/src/index.js +4 -4
- package/dist/src/index.js.map +1 -1
- package/dist/src/styles/index.d.ts +3 -3
- package/dist/src/styles/index.js +3 -3
- package/dist/src/styles/index.js.map +1 -1
- package/dist/src/types.d.ts +2 -2
- package/dist/src/types.js.map +1 -1
- package/dist/stories/ox-filters-form-barcode.stories.js +1 -1
- package/dist/stories/ox-filters-form-barcode.stories.js.map +1 -1
- package/dist/stories/ox-filters-form-base-bounded.stories.js +1 -1
- package/dist/stories/ox-filters-form-base-bounded.stories.js.map +1 -1
- package/dist/stories/ox-filters-form-base-change-handler.stories.js +1 -1
- package/dist/stories/ox-filters-form-base-change-handler.stories.js.map +1 -1
- package/dist/stories/ox-filters-form-base.stories.js +1 -1
- package/dist/stories/ox-filters-form-base.stories.js.map +1 -1
- package/dist/stories/ox-search-form-change-handler.stories.js +1 -1
- package/dist/stories/ox-search-form-change-handler.stories.js.map +1 -1
- package/dist/stories/ox-search-form.stories.js +1 -1
- package/dist/stories/ox-search-form.stories.js.map +1 -1
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +8 -7
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,50 @@
|
|
|
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.10](https://github.com/hatiolab/operato/compare/v9.0.0-beta.9...v9.0.0-beta.10) (2025-01-25)
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
### :bug: Bug Fix
|
|
10
|
+
|
|
11
|
+
* tweak tsconfig.json ([3c424b1](https://github.com/hatiolab/operato/commit/3c424b18d046f95d5619076d113d49a4b4dc9bbb))
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
## [9.0.0-beta.7](https://github.com/hatiolab/operato/compare/v9.0.0-beta.6...v9.0.0-beta.7) (2025-01-20)
|
|
16
|
+
|
|
17
|
+
**Note:** Version bump only for package @operato/form
|
|
18
|
+
|
|
19
|
+
|
|
20
|
+
|
|
21
|
+
|
|
22
|
+
|
|
23
|
+
## [9.0.0-beta.6](https://github.com/hatiolab/operato/compare/v9.0.0-beta.5...v9.0.0-beta.6) (2025-01-20)
|
|
24
|
+
|
|
25
|
+
|
|
26
|
+
### :bug: Bug Fix
|
|
27
|
+
|
|
28
|
+
* esm module ([9642b97](https://github.com/hatiolab/operato/commit/9642b97650623d9ce71f6db0fd1995a2379205b5))
|
|
29
|
+
|
|
30
|
+
|
|
31
|
+
|
|
32
|
+
## [9.0.0-beta.5](https://github.com/hatiolab/operato/compare/v9.0.0-beta.4...v9.0.0-beta.5) (2025-01-20)
|
|
33
|
+
|
|
34
|
+
|
|
35
|
+
### :bug: Bug Fix
|
|
36
|
+
|
|
37
|
+
* esm module ([1319b00](https://github.com/hatiolab/operato/commit/1319b00d6955a514f63b3469fb514a28f84168a2))
|
|
38
|
+
|
|
39
|
+
|
|
40
|
+
|
|
41
|
+
## [9.0.0-beta.4](https://github.com/hatiolab/operato/compare/v9.0.0-beta.3...v9.0.0-beta.4) (2025-01-20)
|
|
42
|
+
|
|
43
|
+
|
|
44
|
+
### :bug: Bug Fix
|
|
45
|
+
|
|
46
|
+
* esm module ([0402232](https://github.com/hatiolab/operato/commit/04022327fa47eac64eaf3c56eeec55b9ace13e0e))
|
|
47
|
+
|
|
48
|
+
|
|
49
|
+
|
|
6
50
|
## [9.0.0-beta.0](https://github.com/hatiolab/operato/compare/v8.0.0-beta.11...v9.0.0-beta.0) (2025-01-13)
|
|
7
51
|
|
|
8
52
|
**Note:** Version bump only for package @operato/form
|
|
@@ -4,7 +4,60 @@ import { customElement, property, query } from 'lit/decorators.js';
|
|
|
4
4
|
let CustomInput = class CustomInput extends LitElement {
|
|
5
5
|
constructor() {
|
|
6
6
|
super(...arguments);
|
|
7
|
-
this
|
|
7
|
+
Object.defineProperty(this, "name", {
|
|
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
|
+
});
|
|
8
61
|
}
|
|
9
62
|
render() {
|
|
10
63
|
return html `
|
|
@@ -67,7 +120,11 @@ let CustomInput = class CustomInput extends LitElement {
|
|
|
67
120
|
return this.input.checkValidity();
|
|
68
121
|
}
|
|
69
122
|
};
|
|
70
|
-
CustomInput
|
|
123
|
+
Object.defineProperty(CustomInput, "styles", {
|
|
124
|
+
enumerable: true,
|
|
125
|
+
configurable: true,
|
|
126
|
+
writable: true,
|
|
127
|
+
value: css `
|
|
71
128
|
input {
|
|
72
129
|
margin: auto 0;
|
|
73
130
|
border: 1px solid var(--md-sys-color-outline);
|
|
@@ -79,7 +136,8 @@ CustomInput.styles = css `
|
|
|
79
136
|
color: var(--form-input-background-color, var(--md-sys-color-on-surface-variant));
|
|
80
137
|
background-color: var(--form-input-background-color, var(--md-sys-color-surface-variant));
|
|
81
138
|
}
|
|
82
|
-
|
|
139
|
+
`
|
|
140
|
+
});
|
|
83
141
|
__decorate([
|
|
84
142
|
property({ type: String })
|
|
85
143
|
], 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,7 +4,48 @@ import { customElement, property, query } from 'lit/decorators.js';
|
|
|
4
4
|
let CustomSelect = class CustomSelect extends LitElement {
|
|
5
5
|
constructor() {
|
|
6
6
|
super(...arguments);
|
|
7
|
-
this
|
|
7
|
+
Object.defineProperty(this, "name", {
|
|
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
|
+
});
|
|
8
49
|
}
|
|
9
50
|
render() {
|
|
10
51
|
return html `
|
|
@@ -53,7 +94,11 @@ let CustomSelect = class CustomSelect extends LitElement {
|
|
|
53
94
|
return this.select.checkValidity();
|
|
54
95
|
}
|
|
55
96
|
};
|
|
56
|
-
CustomSelect
|
|
97
|
+
Object.defineProperty(CustomSelect, "styles", {
|
|
98
|
+
enumerable: true,
|
|
99
|
+
configurable: true,
|
|
100
|
+
writable: true,
|
|
101
|
+
value: css `
|
|
57
102
|
select {
|
|
58
103
|
margin: auto 0;
|
|
59
104
|
border-style: var(--form-input-border-style, solid);
|
|
@@ -72,7 +117,8 @@ CustomSelect.styles = css `
|
|
|
72
117
|
-webkit-appearance: none;
|
|
73
118
|
-webkit-border-radius: 0px;
|
|
74
119
|
}
|
|
75
|
-
|
|
120
|
+
`
|
|
121
|
+
});
|
|
76
122
|
__decorate([
|
|
77
123
|
property({ type: String })
|
|
78
124
|
], 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,9 +5,36 @@ import { FileDropHelper } from '@operato/utils';
|
|
|
5
5
|
let FileUploader = class FileUploader extends LitElement {
|
|
6
6
|
constructor() {
|
|
7
7
|
super(...arguments);
|
|
8
|
-
this
|
|
9
|
-
|
|
10
|
-
|
|
8
|
+
Object.defineProperty(this, "multiple", {
|
|
9
|
+
enumerable: true,
|
|
10
|
+
configurable: true,
|
|
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
|
+
});
|
|
11
38
|
}
|
|
12
39
|
render() {
|
|
13
40
|
var _a;
|
|
@@ -81,8 +108,12 @@ let FileUploader = class FileUploader extends LitElement {
|
|
|
81
108
|
this._files = [];
|
|
82
109
|
}
|
|
83
110
|
};
|
|
84
|
-
FileUploader
|
|
85
|
-
|
|
111
|
+
Object.defineProperty(FileUploader, "styles", {
|
|
112
|
+
enumerable: true,
|
|
113
|
+
configurable: true,
|
|
114
|
+
writable: true,
|
|
115
|
+
value: [
|
|
116
|
+
css `
|
|
86
117
|
:host {
|
|
87
118
|
display: flex;
|
|
88
119
|
flex-direction: column;
|
|
@@ -144,7 +175,8 @@ FileUploader.styles = [
|
|
|
144
175
|
color: var(--file-uploader-li-icon-focus-color);
|
|
145
176
|
}
|
|
146
177
|
`
|
|
147
|
-
]
|
|
178
|
+
]
|
|
179
|
+
});
|
|
148
180
|
__decorate([
|
|
149
181
|
property({ type: Boolean })
|
|
150
182
|
], 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,10 +4,60 @@ 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
|
-
this
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
7
|
+
Object.defineProperty(this, "fields", {
|
|
8
|
+
enumerable: true,
|
|
9
|
+
configurable: true,
|
|
10
|
+
writable: true,
|
|
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
|
+
});
|
|
11
61
|
}
|
|
12
62
|
connectedCallback() {
|
|
13
63
|
super.connectedCallback();
|
|
@@ -176,7 +226,11 @@ let FormMaster = class FormMaster extends LitElement {
|
|
|
176
226
|
}
|
|
177
227
|
}
|
|
178
228
|
};
|
|
179
|
-
FormMaster
|
|
229
|
+
Object.defineProperty(FormMaster, "styles", {
|
|
230
|
+
enumerable: true,
|
|
231
|
+
configurable: true,
|
|
232
|
+
writable: true,
|
|
233
|
+
value: css `
|
|
180
234
|
form {
|
|
181
235
|
display: grid;
|
|
182
236
|
padding: var(--form-padding, 10px);
|
|
@@ -188,7 +242,8 @@ FormMaster.styles = css `
|
|
|
188
242
|
custom-select {
|
|
189
243
|
justify-self: center;
|
|
190
244
|
}
|
|
191
|
-
|
|
245
|
+
`
|
|
246
|
+
});
|
|
192
247
|
__decorate([
|
|
193
248
|
property({ type: Array })
|
|
194
249
|
], 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,9 +4,24 @@ import { customElement, property, state } from 'lit/decorators.js';
|
|
|
4
4
|
let FormPaginator = class FormPaginator extends LitElement {
|
|
5
5
|
constructor() {
|
|
6
6
|
super(...arguments);
|
|
7
|
-
this
|
|
8
|
-
|
|
9
|
-
|
|
7
|
+
Object.defineProperty(this, "pageCount", {
|
|
8
|
+
enumerable: true,
|
|
9
|
+
configurable: true,
|
|
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
|
+
});
|
|
10
25
|
}
|
|
11
26
|
render() {
|
|
12
27
|
return html `
|
|
@@ -40,7 +55,11 @@ let FormPaginator = class FormPaginator extends LitElement {
|
|
|
40
55
|
}
|
|
41
56
|
}
|
|
42
57
|
};
|
|
43
|
-
FormPaginator
|
|
58
|
+
Object.defineProperty(FormPaginator, "styles", {
|
|
59
|
+
enumerable: true,
|
|
60
|
+
configurable: true,
|
|
61
|
+
writable: true,
|
|
62
|
+
value: css `
|
|
44
63
|
:host {
|
|
45
64
|
display: block;
|
|
46
65
|
background-color: var(--form-background-color, #e5e5e5);
|
|
@@ -53,7 +72,8 @@ FormPaginator.styles = css `
|
|
|
53
72
|
[selected] {
|
|
54
73
|
color: #6f6f6f;
|
|
55
74
|
}
|
|
56
|
-
|
|
75
|
+
`
|
|
76
|
+
});
|
|
57
77
|
__decorate([
|
|
58
78
|
property({ type: Number })
|
|
59
79
|
], 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;;;;mBAAoB,CAAC;WAAA;QACtB;;;;mBAAsB,EAAE;WAAA;QAEnC;;;;mBAAsB,CAAC;WAAA;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;;;;WAAS,GAAG,CAAA;;;;;;;;;;;;;GAalB;EAbY,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,8 +4,18 @@ import { customElement, property } from 'lit/decorators.js';
|
|
|
4
4
|
let SearchFormPaginator = class SearchFormPaginator extends LitElement {
|
|
5
5
|
constructor() {
|
|
6
6
|
super(...arguments);
|
|
7
|
-
this
|
|
8
|
-
|
|
7
|
+
Object.defineProperty(this, "pageCount", {
|
|
8
|
+
enumerable: true,
|
|
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
|
+
});
|
|
9
19
|
}
|
|
10
20
|
render() {
|
|
11
21
|
return html `
|
|
@@ -25,7 +35,11 @@ let SearchFormPaginator = class SearchFormPaginator extends LitElement {
|
|
|
25
35
|
`;
|
|
26
36
|
}
|
|
27
37
|
};
|
|
28
|
-
SearchFormPaginator
|
|
38
|
+
Object.defineProperty(SearchFormPaginator, "styles", {
|
|
39
|
+
enumerable: true,
|
|
40
|
+
configurable: true,
|
|
41
|
+
writable: true,
|
|
42
|
+
value: css `
|
|
29
43
|
:host {
|
|
30
44
|
display: block;
|
|
31
45
|
background-color: var(--form-background-color, #e5e5e5);
|
|
@@ -38,7 +52,8 @@ SearchFormPaginator.styles = css `
|
|
|
38
52
|
[selected] {
|
|
39
53
|
color: #6f6f6f;
|
|
40
54
|
}
|
|
41
|
-
|
|
55
|
+
`
|
|
56
|
+
});
|
|
42
57
|
__decorate([
|
|
43
58
|
property({ type: Number })
|
|
44
59
|
], 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;;;;mBAAoB,CAAC;WAAA;QACrB;;;;mBAAsB,CAAC;WAAA;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;;;;WAAS,GAAG,CAAA;;;;;;;;;;;;;GAalB;EAbY,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"]}
|