@operato/input 2.0.0-beta.9 → 7.0.0-rc.0
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 +160 -0
- package/dist/src/index.d.ts +1 -0
- package/dist/src/index.js +1 -0
- package/dist/src/index.js.map +1 -1
- package/dist/src/ox-checkbox.js +4 -8
- package/dist/src/ox-checkbox.js.map +1 -1
- package/dist/src/ox-input-multiple-colors.d.ts +1 -1
- package/dist/src/ox-input-multiple-colors.js +22 -13
- package/dist/src/ox-input-multiple-colors.js.map +1 -1
- package/dist/src/ox-input-table-column-config.d.ts +21 -0
- package/dist/src/ox-input-table-column-config.js +202 -0
- package/dist/src/ox-input-table-column-config.js.map +1 -0
- package/dist/src/ox-select.js +1 -12
- package/dist/src/ox-select.js.map +1 -1
- package/dist/stories/ox-input-table-column-config.stories.d.ts +34 -0
- package/dist/stories/ox-input-table-column-config.stories.js +99 -0
- package/dist/stories/ox-input-table-column-config.stories.js.map +1 -0
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +16 -9
- package/src/index.ts +1 -0
- package/src/ox-checkbox.ts +4 -8
- package/src/ox-input-multiple-colors.ts +23 -13
- package/src/ox-input-table-column-config.ts +211 -0
- package/src/ox-select.ts +1 -14
- package/stories/ox-input-table-column-config.stories.ts +120 -0
- package/themes/grist-theme.css +0 -2
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,166 @@
|
|
|
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
|
+
## [7.0.0-rc.0](https://github.com/hatiolab/operato/compare/v2.0.0-beta.35...v7.0.0-rc.0) (2024-06-21)
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
### :bug: Bug Fix
|
|
10
|
+
|
|
11
|
+
* styles using material-design token ([1bfca4e](https://github.com/hatiolab/operato/commit/1bfca4e00834db5c6ce4514e858b7637916dfbd6))
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
## [2.0.0-beta.35](https://github.com/hatiolab/operato/compare/v2.0.0-beta.34...v2.0.0-beta.35) (2024-06-19)
|
|
16
|
+
|
|
17
|
+
**Note:** Version bump only for package @operato/input
|
|
18
|
+
|
|
19
|
+
|
|
20
|
+
|
|
21
|
+
|
|
22
|
+
|
|
23
|
+
## [2.0.0-beta.31](https://github.com/hatiolab/operato/compare/v2.0.0-beta.30...v2.0.0-beta.31) (2024-06-19)
|
|
24
|
+
|
|
25
|
+
**Note:** Version bump only for package @operato/input
|
|
26
|
+
|
|
27
|
+
|
|
28
|
+
|
|
29
|
+
|
|
30
|
+
|
|
31
|
+
## [2.0.0-beta.30](https://github.com/hatiolab/operato/compare/v2.0.0-beta.29...v2.0.0-beta.30) (2024-06-18)
|
|
32
|
+
|
|
33
|
+
**Note:** Version bump only for package @operato/input
|
|
34
|
+
|
|
35
|
+
|
|
36
|
+
|
|
37
|
+
|
|
38
|
+
|
|
39
|
+
## [2.0.0-beta.26](https://github.com/hatiolab/operato/compare/v2.0.0-beta.25...v2.0.0-beta.26) (2024-06-18)
|
|
40
|
+
|
|
41
|
+
|
|
42
|
+
### :bug: Bug Fix
|
|
43
|
+
|
|
44
|
+
* grist filter personalizer ([a41eb91](https://github.com/hatiolab/operato/commit/a41eb912700149a5c6ed910d40c6c1cb74b09976))
|
|
45
|
+
|
|
46
|
+
|
|
47
|
+
### :rocket: New Features
|
|
48
|
+
|
|
49
|
+
* chart config editor ([71d49fe](https://github.com/hatiolab/operato/commit/71d49fee7d9c329ec957df36845be1a6aa8a8260))
|
|
50
|
+
|
|
51
|
+
|
|
52
|
+
|
|
53
|
+
## [2.0.0-beta.25](https://github.com/hatiolab/operato/compare/v2.0.0-beta.24...v2.0.0-beta.25) (2024-06-17)
|
|
54
|
+
|
|
55
|
+
**Note:** Version bump only for package @operato/input
|
|
56
|
+
|
|
57
|
+
|
|
58
|
+
|
|
59
|
+
|
|
60
|
+
|
|
61
|
+
## [2.0.0-beta.24](https://github.com/hatiolab/operato/compare/v2.0.0-beta.23...v2.0.0-beta.24) (2024-06-15)
|
|
62
|
+
|
|
63
|
+
|
|
64
|
+
### :bug: Bug Fix
|
|
65
|
+
|
|
66
|
+
* remove default value for data property editor ([bf680c5](https://github.com/hatiolab/operato/commit/bf680c5da4856316e2a96f0231f2354cd305008f))
|
|
67
|
+
|
|
68
|
+
|
|
69
|
+
|
|
70
|
+
## [2.0.0-beta.23](https://github.com/hatiolab/operato/compare/v2.0.0-beta.22...v2.0.0-beta.23) (2024-06-13)
|
|
71
|
+
|
|
72
|
+
|
|
73
|
+
### :bug: Bug Fix
|
|
74
|
+
|
|
75
|
+
* export package.json ([538e6e0](https://github.com/hatiolab/operato/commit/538e6e050f5a3d77b8ed805968d66a9093a7d5e9))
|
|
76
|
+
|
|
77
|
+
|
|
78
|
+
|
|
79
|
+
## [2.0.0-beta.22](https://github.com/hatiolab/operato/compare/v2.0.0-beta.21...v2.0.0-beta.22) (2024-06-13)
|
|
80
|
+
|
|
81
|
+
|
|
82
|
+
### :bug: Bug Fix
|
|
83
|
+
|
|
84
|
+
* operato tag for all package.json ([2334960](https://github.com/hatiolab/operato/commit/2334960db2186ade87ee590796a269fe5f5e9419))
|
|
85
|
+
|
|
86
|
+
|
|
87
|
+
|
|
88
|
+
## [2.0.0-beta.20](https://github.com/hatiolab/operato/compare/v2.0.0-beta.19...v2.0.0-beta.20) (2024-06-11)
|
|
89
|
+
|
|
90
|
+
|
|
91
|
+
### :bug: Bug Fix
|
|
92
|
+
|
|
93
|
+
* support function for defaultValue in ox-property-editor ([efe7590](https://github.com/hatiolab/operato/commit/efe7590a41d223d92ef7b96c3e1b49c3691599d0))
|
|
94
|
+
|
|
95
|
+
|
|
96
|
+
|
|
97
|
+
## [2.0.0-beta.19](https://github.com/hatiolab/operato/compare/v2.0.0-beta.18...v2.0.0-beta.19) (2024-06-11)
|
|
98
|
+
|
|
99
|
+
|
|
100
|
+
### :rocket: New Features
|
|
101
|
+
|
|
102
|
+
* gantt chart ([3daba7f](https://github.com/hatiolab/operato/commit/3daba7fbd8c270dc01c72b8d6602de75b370d59e))
|
|
103
|
+
|
|
104
|
+
|
|
105
|
+
|
|
106
|
+
## [2.0.0-beta.18](https://github.com/hatiolab/operato/compare/v2.0.0-beta.17...v2.0.0-beta.18) (2024-06-11)
|
|
107
|
+
|
|
108
|
+
|
|
109
|
+
### :rocket: New Features
|
|
110
|
+
|
|
111
|
+
* ox-input-table-column-config ([39be540](https://github.com/hatiolab/operato/commit/39be54054e210f6ce5d55499dffe78f4426d0d76))
|
|
112
|
+
|
|
113
|
+
|
|
114
|
+
|
|
115
|
+
## [2.0.0-beta.17](https://github.com/hatiolab/operato/compare/v2.0.0-beta.16...v2.0.0-beta.17) (2024-06-11)
|
|
116
|
+
|
|
117
|
+
|
|
118
|
+
### :rocket: New Features
|
|
119
|
+
|
|
120
|
+
* ox-input-table-column-config ([0b84541](https://github.com/hatiolab/operato/commit/0b84541ec63fc71538292abd9e81d8c38baee44c))
|
|
121
|
+
|
|
122
|
+
|
|
123
|
+
|
|
124
|
+
## [2.0.0-beta.16](https://github.com/hatiolab/operato/compare/v2.0.0-beta.15...v2.0.0-beta.16) (2024-06-10)
|
|
125
|
+
|
|
126
|
+
**Note:** Version bump only for package @operato/input
|
|
127
|
+
|
|
128
|
+
|
|
129
|
+
|
|
130
|
+
|
|
131
|
+
|
|
132
|
+
## [2.0.0-beta.15](https://github.com/hatiolab/operato/compare/v2.0.0-beta.14...v2.0.0-beta.15) (2024-06-10)
|
|
133
|
+
|
|
134
|
+
**Note:** Version bump only for package @operato/input
|
|
135
|
+
|
|
136
|
+
|
|
137
|
+
|
|
138
|
+
|
|
139
|
+
|
|
140
|
+
## [2.0.0-beta.14](https://github.com/hatiolab/operato/compare/v2.0.0-beta.13...v2.0.0-beta.14) (2024-06-10)
|
|
141
|
+
|
|
142
|
+
|
|
143
|
+
### :bug: Bug Fix
|
|
144
|
+
|
|
145
|
+
* gantt ([2ba0fc3](https://github.com/hatiolab/operato/commit/2ba0fc3b6928502c5667e59178391affa7b73294))
|
|
146
|
+
|
|
147
|
+
|
|
148
|
+
|
|
149
|
+
## [2.0.0-beta.13](https://github.com/hatiolab/operato/compare/v2.0.0-beta.12...v2.0.0-beta.13) (2024-06-09)
|
|
150
|
+
|
|
151
|
+
|
|
152
|
+
### :rocket: New Features
|
|
153
|
+
|
|
154
|
+
* tooltip-reactive-controller for mouse over/out ([73f069b](https://github.com/hatiolab/operato/commit/73f069b4e8c1472cc991010bbe7b3866035a05f0))
|
|
155
|
+
|
|
156
|
+
|
|
157
|
+
|
|
158
|
+
## [2.0.0-beta.12](https://github.com/hatiolab/operato/compare/v2.0.0-beta.11...v2.0.0-beta.12) (2024-06-09)
|
|
159
|
+
|
|
160
|
+
**Note:** Version bump only for package @operato/input
|
|
161
|
+
|
|
162
|
+
|
|
163
|
+
|
|
164
|
+
|
|
165
|
+
|
|
6
166
|
## [2.0.0-beta.9](https://github.com/hatiolab/operato/compare/v2.0.0-beta.8...v2.0.0-beta.9) (2024-06-08)
|
|
7
167
|
|
|
8
168
|
**Note:** Version bump only for package @operato/input
|
package/dist/src/index.d.ts
CHANGED
package/dist/src/index.js
CHANGED
|
@@ -28,4 +28,5 @@ export * from './ox-input-quantifier.js';
|
|
|
28
28
|
export * from './ox-input-select-buttons.js';
|
|
29
29
|
export * from './ox-input-textarea.js';
|
|
30
30
|
export * from './ox-input-direction.js';
|
|
31
|
+
export * from './ox-input-table-column-config.js';
|
|
31
32
|
//# sourceMappingURL=index.js.map
|
package/dist/src/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,cAAc,oBAAoB,CAAA;AAClC,cAAc,uBAAuB,CAAA;AACrC,cAAc,kBAAkB,CAAA;AAChC,cAAc,gBAAgB,CAAA;AAC9B,cAAc,qBAAqB,CAAA;AACnC,cAAc,qBAAqB,CAAA;AACnC,cAAc,qBAAqB,CAAA;AACnC,cAAc,qBAAqB,CAAA;AACnC,cAAc,uBAAuB,CAAA;AACrC,cAAc,oBAAoB,CAAA;AAClC,cAAc,qBAAqB,CAAA;AACnC,cAAc,+BAA+B,CAAA;AAC7C,cAAc,2BAA2B,CAAA;AACzC,cAAc,8BAA8B,CAAA;AAC5C,cAAc,oBAAoB,CAAA;AAClC,cAAc,qBAAqB,CAAA;AACnC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,yBAAyB,CAAA;AACvC,cAAc,qBAAqB,CAAA;AACnC,cAAc,kCAAkC,CAAA;AAChD,cAAc,uBAAuB,CAAA;AACrC,cAAc,8BAA8B,CAAA;AAC5C,cAAc,wBAAwB,CAAA;AACtC,cAAc,0BAA0B,CAAA;AACxC,cAAc,8BAA8B,CAAA;AAC5C,cAAc,wBAAwB,CAAA;AACtC,cAAc,yBAAyB,CAAA","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nexport * from './ox-form-field.js'\nexport * from './ox-buttons-radio.js'\nexport * from './ox-checkbox.js'\nexport * from './ox-select.js'\nexport * from './ox-input-angle.js'\nexport * from './ox-input-3dish.js'\nexport * from './ox-input-3axis.js'\nexport * from './ox-input-stack.js'\nexport * from './ox-input-barcode.js'\nexport * from './ox-input-code.js'\nexport * from './ox-input-color.js'\nexport * from './ox-input-multiple-colors.js'\nexport * from './ox-input-color-stops.js'\nexport * from './ox-input-color-gradient.js'\nexport * from './ox-input-file.js'\nexport * from './ox-input-image.js'\nexport * from './ox-input-value-ranges.js'\nexport * from './ox-input-value-map.js'\nexport * from './ox-input-table.js'\nexport * from './ox-input-scene-component-id.js'\nexport * from './ox-input-crontab.js'\nexport * from './ox-input-partition-keys.js'\nexport * from './ox-input-duration.js'\nexport * from './ox-input-quantifier.js'\nexport * from './ox-input-select-buttons.js'\nexport * from './ox-input-textarea.js'\nexport * from './ox-input-direction.js'\n"]}
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,cAAc,oBAAoB,CAAA;AAClC,cAAc,uBAAuB,CAAA;AACrC,cAAc,kBAAkB,CAAA;AAChC,cAAc,gBAAgB,CAAA;AAC9B,cAAc,qBAAqB,CAAA;AACnC,cAAc,qBAAqB,CAAA;AACnC,cAAc,qBAAqB,CAAA;AACnC,cAAc,qBAAqB,CAAA;AACnC,cAAc,uBAAuB,CAAA;AACrC,cAAc,oBAAoB,CAAA;AAClC,cAAc,qBAAqB,CAAA;AACnC,cAAc,+BAA+B,CAAA;AAC7C,cAAc,2BAA2B,CAAA;AACzC,cAAc,8BAA8B,CAAA;AAC5C,cAAc,oBAAoB,CAAA;AAClC,cAAc,qBAAqB,CAAA;AACnC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,yBAAyB,CAAA;AACvC,cAAc,qBAAqB,CAAA;AACnC,cAAc,kCAAkC,CAAA;AAChD,cAAc,uBAAuB,CAAA;AACrC,cAAc,8BAA8B,CAAA;AAC5C,cAAc,wBAAwB,CAAA;AACtC,cAAc,0BAA0B,CAAA;AACxC,cAAc,8BAA8B,CAAA;AAC5C,cAAc,wBAAwB,CAAA;AACtC,cAAc,yBAAyB,CAAA;AACvC,cAAc,mCAAmC,CAAA","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nexport * from './ox-form-field.js'\nexport * from './ox-buttons-radio.js'\nexport * from './ox-checkbox.js'\nexport * from './ox-select.js'\nexport * from './ox-input-angle.js'\nexport * from './ox-input-3dish.js'\nexport * from './ox-input-3axis.js'\nexport * from './ox-input-stack.js'\nexport * from './ox-input-barcode.js'\nexport * from './ox-input-code.js'\nexport * from './ox-input-color.js'\nexport * from './ox-input-multiple-colors.js'\nexport * from './ox-input-color-stops.js'\nexport * from './ox-input-color-gradient.js'\nexport * from './ox-input-file.js'\nexport * from './ox-input-image.js'\nexport * from './ox-input-value-ranges.js'\nexport * from './ox-input-value-map.js'\nexport * from './ox-input-table.js'\nexport * from './ox-input-scene-component-id.js'\nexport * from './ox-input-crontab.js'\nexport * from './ox-input-partition-keys.js'\nexport * from './ox-input-duration.js'\nexport * from './ox-input-quantifier.js'\nexport * from './ox-input-select-buttons.js'\nexport * from './ox-input-textarea.js'\nexport * from './ox-input-direction.js'\nexport * from './ox-input-table-column-config.js'\n"]}
|
package/dist/src/ox-checkbox.js
CHANGED
|
@@ -43,12 +43,8 @@ let OxCheckbox = class OxCheckbox extends OxFormField {
|
|
|
43
43
|
justify-content: center;
|
|
44
44
|
}
|
|
45
45
|
|
|
46
|
-
:host([indeterminate]) .checkbox {
|
|
47
|
-
background-color: var(--ox-checkbox-unchecked-background-color, var(--md-ref-palette-primary80));
|
|
48
|
-
}
|
|
49
|
-
|
|
50
46
|
:host([checked]) .checkbox {
|
|
51
|
-
background-color: var(--ox-checkbox-checked-background-color, var(--md-
|
|
47
|
+
background-color: var(--ox-checkbox-checked-background-color, var(--md-sys-color-surface-tint));
|
|
52
48
|
}
|
|
53
49
|
|
|
54
50
|
path {
|
|
@@ -56,7 +52,6 @@ let OxCheckbox = class OxCheckbox extends OxFormField {
|
|
|
56
52
|
}
|
|
57
53
|
|
|
58
54
|
:host([indeterminate]) line {
|
|
59
|
-
fill: var(--ox-checkbox-intermidiate-color, var(--md-sys-color-on-surface-variant));
|
|
60
55
|
stroke: var(--ox-checkbox-intermidiate-color, var(--md-sys-color-outline));
|
|
61
56
|
}
|
|
62
57
|
|
|
@@ -70,11 +65,12 @@ let OxCheckbox = class OxCheckbox extends OxFormField {
|
|
|
70
65
|
}
|
|
71
66
|
|
|
72
67
|
.label {
|
|
73
|
-
color: var(--ox-checkbox-label-color, var(--md-sys-color-on-
|
|
74
|
-
font-size: var(--md-sys-typescale-label-
|
|
68
|
+
color: var(--ox-checkbox-label-color, var(--md-sys-color-on-primary-container));
|
|
69
|
+
font-size: var(--md-sys-typescale-label-medium-size, 1rem);
|
|
75
70
|
line-height: var(--md-sys-typescale-label-medium-line-height, 1rem);
|
|
76
71
|
}
|
|
77
72
|
:host([checked]) .label {
|
|
73
|
+
color:var(ox-checkbox-label-checked-color, var(--md-sys-color-primary));
|
|
78
74
|
font-weight: 700;
|
|
79
75
|
}
|
|
80
76
|
`
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ox-checkbox.js","sourceRoot":"","sources":["../../src/ox-checkbox.ts"],"names":[],"mappings":"AAAA;;GAEG;;AAEH;;EAEE;AAEF,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAC/B,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAElE,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAA;AAGtC,IAAM,UAAU,GAAhB,MAAM,UAAW,SAAQ,WAAW;IAApC;;
|
|
1
|
+
{"version":3,"file":"ox-checkbox.js","sourceRoot":"","sources":["../../src/ox-checkbox.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\n/*\n This component is inspired by https://github.com/Polydile/dile-components, thanks Dile.\n*/\n\nimport { css, html } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\n\nimport { OxFormField } from './ox-form-field'\n\n@customElement('ox-checkbox')\nexport class OxCheckbox extends OxFormField {\n static styles = [\n css`\n div {\n display: flex;\n gap: var(--input-intra-gap, 7px);\n\n align-items: center;\n cursor: pointer;\n }\n\n [disabled] {\n opacity: var(--ox-checkbox-disabled-opacity, 0.5);\n cursor: auto;\n }\n\n .checkbox {\n display: flex;\n border-radius: var(--ox-checkbox-border-radius, 4px);\n background-color: var(--ox-checkbox-unchecked-background-color, var(--md-sys-color-surface-container-lowest));\n border: var(--ox-checkbox-unchecked-border, 1px solid var(--md-sys-color-outline));\n width: var(--ox-checkbox-size, 15px);\n height: var(--ox-checkbox-size, 15px);\n align-items: center;\n justify-content: center;\n }\n\n :host([checked]) .checkbox {\n background-color: var(--ox-checkbox-checked-background-color, var(--md-sys-color-surface-tint));\n }\n\n path {\n fill: var(--ox-checkbox-unchecked-color, var(--md-sys-color-surface-container-lowest));\n }\n\n :host([indeterminate]) line {\n stroke: var(--ox-checkbox-intermidiate-color, var(--md-sys-color-outline));\n }\n\n :host([checked]) path {\n fill: var(--ox-checkbox-checked-color, var(--md-sys-color-on-primary));\n }\n\n svg {\n width: var(--ox-checkbox-size, 15px);\n height: var(--ox-checkbox-size, 15px);\n }\n\n .label {\n color: var(--ox-checkbox-label-color, var(--md-sys-color-on-primary-container));\n font-size: var(--md-sys-typescale-label-medium-size, 1rem);\n line-height: var(--md-sys-typescale-label-medium-line-height, 1rem);\n }\n :host([checked]) .label {\n color:var(ox-checkbox-label-checked-color, var(--md-sys-color-primary));\n font-weight: 700;\n }\n `\n ]\n\n @property({ type: Boolean, attribute: 'checked', reflect: true }) checked: boolean | undefined = false\n @property({ type: Boolean, attribute: 'indeterminatable' }) indeterminatable: boolean = false\n @property({ type: Boolean, attribute: 'indeterminate', reflect: true }) indeterminate: boolean = false\n @property({ type: Boolean, attribute: 'left-label' }) left: boolean = false\n\n @state() _hasInner: boolean = !!this.innerHTML.trim().length\n\n render() {\n return html`\n <div @click=${this.onClick} ?disabled=${this.disabled}>\n ${this._hasInner && this.left\n ? html` <span label>\n <slot></slot>\n </span>`\n : ''}\n <a href=\"#\" @click=${(e: Event) => e.preventDefault()} class=\"checkbox\">\n ${this.indeterminate ? this.indeterminateIcon : this.checked ? this.checkedIcon : this.uncheckedIcon}\n </a>\n ${this._hasInner && !this.left\n ? html` <span class=\"label\">\n <slot></slot>\n </span>`\n : ''}\n </div>\n `\n }\n\n connectedCallback() {\n super.connectedCallback()\n\n this.setAttribute('tabindex', '0')\n this.addEventListener('keydown', this.onKeyDown.bind(this))\n }\n\n onClick() {\n if (this.disabled) {\n return\n }\n\n if (!this.indeterminatable) {\n this.indeterminate = false\n this.checked = !this.checked\n } else {\n if (this.indeterminate) {\n this.indeterminate = false\n this.checked = true\n } else if (this.checked) {\n this.indeterminate = false\n this.checked = false\n } else {\n this.indeterminate = true\n this.checked = undefined\n }\n }\n\n this.dispatchEvent(\n new CustomEvent('change', {\n bubbles: true,\n composed: true,\n detail: this.checked\n })\n )\n }\n\n get checkedIcon() {\n return html`\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n <path d=\"M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z\" />\n </svg>\n `\n }\n\n get uncheckedIcon() {\n return html`\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n <path d=\"M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z\" />\n </svg>\n `\n }\n\n get indeterminateIcon() {\n return html`\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n <line x1=\"4\" x2=\"20\" y1=\"12\" y2=\"12\" stroke-width=\"2\" stroke-linecap=\"round\" />\n </svg>\n `\n }\n\n onKeyDown(e: KeyboardEvent) {\n e.preventDefault()\n\n if (e.key === ' ' || e.key == 'Spacebar') {\n this.onClick()\n }\n }\n\n protected appendFormData({ formData }: FormDataEvent): void {\n this.name && !this.indeterminate && formData.append(this.name, this.checked ? 'true' : 'false')\n }\n}\n"]}
|
|
@@ -24,6 +24,6 @@ export declare class OxInputMultipleColors extends OxFormField {
|
|
|
24
24
|
firstUpdated(): void;
|
|
25
25
|
render(): import("lit-html").TemplateResult<1>;
|
|
26
26
|
_onValueChanged(): void;
|
|
27
|
-
_appendEditorColor(): void;
|
|
27
|
+
_appendEditorColor(e: Event): void;
|
|
28
28
|
_removeEditorColor(e: Event): void;
|
|
29
29
|
}
|
|
@@ -6,6 +6,7 @@ import './ox-input-color.js';
|
|
|
6
6
|
import '@material/web/icon/icon.js';
|
|
7
7
|
import { css, html } from 'lit';
|
|
8
8
|
import { customElement, property, query, queryAll } from 'lit/decorators.js';
|
|
9
|
+
import { random as randomColor } from '@ctrl/tinycolor';
|
|
9
10
|
import { OxFormField } from './ox-form-field.js';
|
|
10
11
|
/**
|
|
11
12
|
색상 배열을 편집하는 컴포넌트이다.
|
|
@@ -36,29 +37,32 @@ let OxInputMultipleColors = class OxInputMultipleColors extends OxFormField {
|
|
|
36
37
|
grid-gap: var(--spacing-medium);
|
|
37
38
|
align-items: center;
|
|
38
39
|
justify-content: left;
|
|
39
|
-
margin-bottom: var(--
|
|
40
|
+
margin-bottom: var(--spacing-tiny, 2px);
|
|
40
41
|
}
|
|
41
42
|
|
|
42
43
|
ox-input-color {
|
|
43
44
|
width: 100%;
|
|
44
45
|
}
|
|
45
46
|
|
|
47
|
+
md-icon {
|
|
48
|
+
pointer-events: none;
|
|
49
|
+
}
|
|
50
|
+
|
|
46
51
|
button {
|
|
47
52
|
height: 100%;
|
|
48
53
|
border: var(--button-border);
|
|
49
|
-
border-radius:
|
|
50
|
-
background-color:
|
|
54
|
+
border-radius: 0;
|
|
55
|
+
background-color: transparent;
|
|
51
56
|
line-height: 0.8;
|
|
52
|
-
color: var(--
|
|
57
|
+
color: var(--md-sys-color-on-surface);
|
|
53
58
|
cursor: pointer;
|
|
54
59
|
}
|
|
55
60
|
|
|
56
|
-
button:focus,
|
|
57
61
|
button:hover,
|
|
58
62
|
button:active {
|
|
59
63
|
border: var(--button-activ-border);
|
|
60
|
-
background-color: var(--
|
|
61
|
-
color: var(--md-sys-color-primary
|
|
64
|
+
background-color: var(--md-sys-color-on-primary);
|
|
65
|
+
color: var(--md-sys-color-primary);
|
|
62
66
|
}
|
|
63
67
|
`; }
|
|
64
68
|
firstUpdated() {
|
|
@@ -69,7 +73,7 @@ let OxInputMultipleColors = class OxInputMultipleColors extends OxFormField {
|
|
|
69
73
|
<div id="colors-container">
|
|
70
74
|
${(this.value || []).map((item, index) => html `
|
|
71
75
|
<div>
|
|
72
|
-
<button @
|
|
76
|
+
<button @tap=${(e) => this._appendEditorColor(e)} data-index=${index} ?disabled=${this.disabled}>
|
|
73
77
|
<md-icon>add</md-icon>
|
|
74
78
|
</button>
|
|
75
79
|
<ox-input-color .value=${item} ?disabled=${this.disabled}> </ox-input-color>
|
|
@@ -77,7 +81,7 @@ let OxInputMultipleColors = class OxInputMultipleColors extends OxFormField {
|
|
|
77
81
|
${(this.value || []).length > 1
|
|
78
82
|
? html `
|
|
79
83
|
<button
|
|
80
|
-
@
|
|
84
|
+
@tap=${(e) => this._removeEditorColor(e)}
|
|
81
85
|
data-index=${index}
|
|
82
86
|
?disabled=${this.disabled}
|
|
83
87
|
>
|
|
@@ -93,17 +97,22 @@ let OxInputMultipleColors = class OxInputMultipleColors extends OxFormField {
|
|
|
93
97
|
_onValueChanged() {
|
|
94
98
|
this.value = Array.from(this.colors).map(color => color.value);
|
|
95
99
|
}
|
|
96
|
-
_appendEditorColor() {
|
|
97
|
-
|
|
100
|
+
_appendEditorColor(e) {
|
|
101
|
+
const idx = Number(e.target.getAttribute('data-index'));
|
|
102
|
+
const hue = this.value[idx] || '#fff';
|
|
103
|
+
this.value.splice(idx + 1, 0, randomColor({ hue }).toRgbString());
|
|
104
|
+
this.value = [...this.value];
|
|
98
105
|
this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }));
|
|
99
106
|
}
|
|
100
107
|
_removeEditorColor(e) {
|
|
101
108
|
var values = [];
|
|
102
109
|
for (var i = 0; i < this.value.length; i++) {
|
|
103
|
-
if (i == Number(e.target.
|
|
110
|
+
if (i == Number(e.target.getAttribute('data-index'))) {
|
|
104
111
|
continue;
|
|
105
|
-
|
|
112
|
+
}
|
|
113
|
+
else {
|
|
106
114
|
values.push(this.value[i]);
|
|
115
|
+
}
|
|
107
116
|
}
|
|
108
117
|
this.value = values;
|
|
109
118
|
this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ox-input-multiple-colors.js","sourceRoot":"","sources":["../../src/ox-input-multiple-colors.ts"],"names":[],"mappings":"AAAA;;GAEG;;AAEH,OAAO,qBAAqB,CAAA;AAC5B,OAAO,4BAA4B,CAAA;AAEnC,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAC/B,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;
|
|
1
|
+
{"version":3,"file":"ox-input-multiple-colors.js","sourceRoot":"","sources":["../../src/ox-input-multiple-colors.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport './ox-input-color.js'\nimport '@material/web/icon/icon.js'\n\nimport { css, html } from 'lit'\nimport { customElement, property, query, queryAll } from 'lit/decorators.js'\nimport { random as randomColor, TinyColor } from '@ctrl/tinycolor'\n\nimport { OxFormField } from './ox-form-field.js'\nimport { OxInputColor } from './ox-input-color.js'\n\n/**\n색상 배열을 편집하는 컴포넌트이다.\n\n새로운 색상을 추가하고자 할 때는 `+` 버튼을 클릭한다.<br />\n색상을 제거하고자 할 때는 `-` 버튼을 클릭한다.<br />\n\nExample:\n\n <ox-input-multiple-colors values=${values}>\n </ox-input-multiple-colors>\n*/\n\n@customElement('ox-input-multiple-colors')\nexport class OxInputMultipleColors extends OxFormField {\n static styles = css`\n :host {\n display: inline-block;\n\n --md-icon-size: var(--fontsize-default, 14px);\n }\n\n #colors-container > div {\n display: grid;\n grid-template-columns: 34px 1fr 34px;\n grid-gap: var(--spacing-medium);\n align-items: center;\n justify-content: left;\n margin-bottom: var(--spacing-tiny, 2px);\n }\n\n ox-input-color {\n width: 100%;\n }\n\n md-icon {\n pointer-events: none;\n }\n\n button {\n height: 100%;\n border: var(--button-border);\n border-radius: 0;\n background-color: transparent;\n line-height: 0.8;\n color: var(--md-sys-color-on-surface);\n cursor: pointer;\n }\n\n button:hover,\n button:active {\n border: var(--button-activ-border);\n background-color: var(--md-sys-color-on-primary);\n color: var(--md-sys-color-primary);\n }\n `\n\n @property({ type: Array }) value: string[] = []\n\n @query('#colors-container') colorsContainer!: HTMLDivElement\n @queryAll('ox-input-color') colors!: NodeListOf<OxInputColor>\n\n firstUpdated() {\n this.renderRoot.addEventListener('change', this._onValueChanged.bind(this))\n }\n\n render() {\n return html`\n <div id=\"colors-container\">\n ${(this.value || []).map(\n (item, index) => html`\n <div>\n <button @tap=${(e: Event) => this._appendEditorColor(e)} data-index=${index} ?disabled=${this.disabled}>\n <md-icon>add</md-icon>\n </button>\n <ox-input-color .value=${item} ?disabled=${this.disabled}> </ox-input-color>\n\n ${(this.value || []).length > 1\n ? html`\n <button\n @tap=${(e: Event) => this._removeEditorColor(e)}\n data-index=${index}\n ?disabled=${this.disabled}\n >\n <md-icon>remove</md-icon>\n </button>\n `\n : html``}\n </div>\n `\n )}\n </div>\n `\n }\n\n _onValueChanged() {\n this.value = Array.from(this.colors).map(color => color.value!)\n }\n\n _appendEditorColor(e: Event) {\n const idx = Number((e.target as HTMLElement).getAttribute('data-index'))\n const hue = this.value[idx] || '#fff'\n this.value.splice(idx + 1, 0, randomColor({ hue }).toRgbString())\n this.value = [...this.value]\n\n this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))\n }\n\n _removeEditorColor(e: Event) {\n var values = []\n for (var i = 0; i < this.value.length; i++) {\n if (i == Number((e.target as HTMLElement).getAttribute('data-index'))) {\n continue\n } else {\n values.push(this.value[i])\n }\n }\n\n this.value = values\n this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))\n }\n}\n"]}
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import { OxFormField } from './ox-form-field';
|
|
2
|
+
import '@material/web/icon/icon.js';
|
|
3
|
+
export interface ColumnConfig {
|
|
4
|
+
name: string;
|
|
5
|
+
label: string;
|
|
6
|
+
visible: boolean;
|
|
7
|
+
width: number;
|
|
8
|
+
order: number;
|
|
9
|
+
}
|
|
10
|
+
export declare class OxInputTableColumnConfig extends OxFormField {
|
|
11
|
+
static styles: import("lit").CSSResult[];
|
|
12
|
+
value: ColumnConfig[];
|
|
13
|
+
render(): import("lit-html").TemplateResult<1>;
|
|
14
|
+
private _updateVisibility;
|
|
15
|
+
private _updateLabel;
|
|
16
|
+
private _updateWidth;
|
|
17
|
+
private _moveUp;
|
|
18
|
+
private _moveDown;
|
|
19
|
+
private _updateOrder;
|
|
20
|
+
private _notifyChange;
|
|
21
|
+
}
|
|
@@ -0,0 +1,202 @@
|
|
|
1
|
+
import { __decorate } from "tslib";
|
|
2
|
+
import { css, html } from 'lit';
|
|
3
|
+
import { customElement, property } from 'lit/decorators.js';
|
|
4
|
+
import { OxFormField } from './ox-form-field';
|
|
5
|
+
import '@material/web/icon/icon.js';
|
|
6
|
+
let OxInputTableColumnConfig = class OxInputTableColumnConfig extends OxFormField {
|
|
7
|
+
constructor() {
|
|
8
|
+
super(...arguments);
|
|
9
|
+
this.value = [];
|
|
10
|
+
}
|
|
11
|
+
static { this.styles = [
|
|
12
|
+
css `
|
|
13
|
+
:host {
|
|
14
|
+
display: block;
|
|
15
|
+
padding: 4px;
|
|
16
|
+
border: 1px solid var(--ox-input-table-column-config-border-color, var(--md-sys-color-on-surface));
|
|
17
|
+
background-color: var(--ox-input-table-column-config-background-color, var(--md-sys-color-surface));
|
|
18
|
+
color: var(--ox-input-table-column-config-color, var(--md-sys-color-on-surface));
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
table {
|
|
22
|
+
width: auto;
|
|
23
|
+
border-collapse: collapse;
|
|
24
|
+
font-size: 12px;
|
|
25
|
+
border: 0;
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
tr {
|
|
29
|
+
border-bottom: 1px solid var(--ox-input-table-column-config-border-color, var(--md-sys-color-on-surface));
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
th,
|
|
33
|
+
td {
|
|
34
|
+
padding: 0 var(--spacing-small, 2px);
|
|
35
|
+
text-align: left;
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
th {
|
|
39
|
+
text-transform: capitalize;
|
|
40
|
+
text-align: center;
|
|
41
|
+
background-color: var(
|
|
42
|
+
--ox-input-table-column-config-header-background-color,
|
|
43
|
+
var(--md-sys-color-secondary-container)
|
|
44
|
+
);
|
|
45
|
+
color: var(--ox-input-table-column-config-header-background-color, var(--md-sys-color-on-secondary-container));
|
|
46
|
+
white-space: nowrap;
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
th *,
|
|
50
|
+
td * {
|
|
51
|
+
vertical-align: middle;
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
td[width] {
|
|
55
|
+
width: 60px;
|
|
56
|
+
text-align: right;
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
input {
|
|
60
|
+
font-size: 12px;
|
|
61
|
+
padding: 0;
|
|
62
|
+
margin: 0;
|
|
63
|
+
border: none;
|
|
64
|
+
width: 100%;
|
|
65
|
+
box-sizing: border-box;
|
|
66
|
+
outline: none;
|
|
67
|
+
background-color: var(--ox-input-table-column-config-input-background-color, var(--md-sys-color-surface));
|
|
68
|
+
color: var(--ox-input-table-column-config-input-color, var(--md-sys-color-on-surface));
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
input[type='number'] {
|
|
72
|
+
text-align: right;
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
md-icon {
|
|
76
|
+
cursor: pointer;
|
|
77
|
+
padding: 0;
|
|
78
|
+
margin: 0;
|
|
79
|
+
border: none;
|
|
80
|
+
background: none;
|
|
81
|
+
|
|
82
|
+
--md-icon-size: 16px;
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
md-icon[disabled] {
|
|
86
|
+
cursor: not-allowed;
|
|
87
|
+
color: var(--ox-input-table-column-config-disabled-color, var(--md-sys-color-surface-variant, #ccc));
|
|
88
|
+
}
|
|
89
|
+
`
|
|
90
|
+
]; }
|
|
91
|
+
render() {
|
|
92
|
+
console.log('this.value', this.value);
|
|
93
|
+
return html `
|
|
94
|
+
<table>
|
|
95
|
+
<thead>
|
|
96
|
+
<tr>
|
|
97
|
+
<th></th>
|
|
98
|
+
<th>name</th>
|
|
99
|
+
<th>label</th>
|
|
100
|
+
<th>width</th>
|
|
101
|
+
<th></th>
|
|
102
|
+
</tr>
|
|
103
|
+
</thead>
|
|
104
|
+
<tbody>
|
|
105
|
+
${(this.value || []).map((col, index) => html `
|
|
106
|
+
<tr name=${col.name}>
|
|
107
|
+
<td>
|
|
108
|
+
<input
|
|
109
|
+
type="checkbox"
|
|
110
|
+
.checked=${col.visible}
|
|
111
|
+
@change=${(e) => this._updateVisibility(e, index)}
|
|
112
|
+
/>
|
|
113
|
+
</td>
|
|
114
|
+
<td name>${col.name}</td>
|
|
115
|
+
<td>
|
|
116
|
+
<input type="text" .value=${col.label} @input=${(e) => this._updateLabel(e, index)} />
|
|
117
|
+
</td>
|
|
118
|
+
<td width>
|
|
119
|
+
<input
|
|
120
|
+
type="number"
|
|
121
|
+
.value=${String(col.width)}
|
|
122
|
+
@input=${(e) => this._updateWidth(e, index)}
|
|
123
|
+
/>
|
|
124
|
+
</td>
|
|
125
|
+
<td buttons>
|
|
126
|
+
<md-icon class="icon-button" @click=${() => this._moveUp(index)} ?disabled=${index === 0}>
|
|
127
|
+
arrow_upward
|
|
128
|
+
</md-icon>
|
|
129
|
+
<md-icon
|
|
130
|
+
class="icon-button"
|
|
131
|
+
@click=${() => this._moveDown(index)}
|
|
132
|
+
?disabled=${index === this.value.length - 1}
|
|
133
|
+
>
|
|
134
|
+
arrow_downward
|
|
135
|
+
</md-icon>
|
|
136
|
+
</td>
|
|
137
|
+
</tr>
|
|
138
|
+
`)}
|
|
139
|
+
</tbody>
|
|
140
|
+
</table>
|
|
141
|
+
`;
|
|
142
|
+
}
|
|
143
|
+
_updateVisibility(event, index) {
|
|
144
|
+
const target = event.target;
|
|
145
|
+
this.value[index].visible = target.checked;
|
|
146
|
+
this.requestUpdate();
|
|
147
|
+
this._notifyChange();
|
|
148
|
+
}
|
|
149
|
+
_updateLabel(event, index) {
|
|
150
|
+
const target = event.target;
|
|
151
|
+
this.value[index].label = target.value;
|
|
152
|
+
this.requestUpdate();
|
|
153
|
+
this._notifyChange();
|
|
154
|
+
}
|
|
155
|
+
_updateWidth(event, index) {
|
|
156
|
+
const target = event.target;
|
|
157
|
+
this.value[index].width = target.valueAsNumber;
|
|
158
|
+
this.requestUpdate();
|
|
159
|
+
this._notifyChange();
|
|
160
|
+
}
|
|
161
|
+
_moveUp(index) {
|
|
162
|
+
if (index === 0)
|
|
163
|
+
return;
|
|
164
|
+
const temp = this.value[index];
|
|
165
|
+
this.value[index] = this.value[index - 1];
|
|
166
|
+
this.value[index - 1] = temp;
|
|
167
|
+
this._updateOrder();
|
|
168
|
+
this.requestUpdate();
|
|
169
|
+
this._notifyChange();
|
|
170
|
+
}
|
|
171
|
+
_moveDown(index) {
|
|
172
|
+
if (index === this.value.length - 1)
|
|
173
|
+
return;
|
|
174
|
+
const temp = this.value[index];
|
|
175
|
+
this.value[index] = this.value[index + 1];
|
|
176
|
+
this.value[index + 1] = temp;
|
|
177
|
+
this._updateOrder();
|
|
178
|
+
this.requestUpdate();
|
|
179
|
+
this._notifyChange();
|
|
180
|
+
}
|
|
181
|
+
_updateOrder() {
|
|
182
|
+
this.value = this.value.map((col, index) => ({
|
|
183
|
+
...col,
|
|
184
|
+
order: index + 1
|
|
185
|
+
}));
|
|
186
|
+
}
|
|
187
|
+
_notifyChange() {
|
|
188
|
+
this.dispatchEvent(new CustomEvent('change', {
|
|
189
|
+
detail: this.value,
|
|
190
|
+
bubbles: true,
|
|
191
|
+
composed: true
|
|
192
|
+
}));
|
|
193
|
+
}
|
|
194
|
+
};
|
|
195
|
+
__decorate([
|
|
196
|
+
property({ type: Array })
|
|
197
|
+
], OxInputTableColumnConfig.prototype, "value", void 0);
|
|
198
|
+
OxInputTableColumnConfig = __decorate([
|
|
199
|
+
customElement('ox-input-table-column-config')
|
|
200
|
+
], OxInputTableColumnConfig);
|
|
201
|
+
export { OxInputTableColumnConfig };
|
|
202
|
+
//# sourceMappingURL=ox-input-table-column-config.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ox-input-table-column-config.js","sourceRoot":"","sources":["../../src/ox-input-table-column-config.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport { OxFormField } from './ox-form-field'\nimport '@material/web/icon/icon.js'\n\nexport interface ColumnConfig {\n name: string\n label: string\n visible: boolean\n width: number\n order: number\n}\n\n@customElement('ox-input-table-column-config')\nexport class OxInputTableColumnConfig extends OxFormField {\n static styles = [\n css`\n :host {\n display: block;\n padding: 4px;\n border: 1px solid var(--ox-input-table-column-config-border-color, var(--md-sys-color-on-surface));\n background-color: var(--ox-input-table-column-config-background-color, var(--md-sys-color-surface));\n color: var(--ox-input-table-column-config-color, var(--md-sys-color-on-surface));\n }\n\n table {\n width: auto;\n border-collapse: collapse;\n font-size: 12px;\n border: 0;\n }\n\n tr {\n border-bottom: 1px solid var(--ox-input-table-column-config-border-color, var(--md-sys-color-on-surface));\n }\n\n th,\n td {\n padding: 0 var(--spacing-small, 2px);\n text-align: left;\n }\n\n th {\n text-transform: capitalize;\n text-align: center;\n background-color: var(\n --ox-input-table-column-config-header-background-color,\n var(--md-sys-color-secondary-container)\n );\n color: var(--ox-input-table-column-config-header-background-color, var(--md-sys-color-on-secondary-container));\n white-space: nowrap;\n }\n\n th *,\n td * {\n vertical-align: middle;\n }\n\n td[width] {\n width: 60px;\n text-align: right;\n }\n\n input {\n font-size: 12px;\n padding: 0;\n margin: 0;\n border: none;\n width: 100%;\n box-sizing: border-box;\n outline: none;\n background-color: var(--ox-input-table-column-config-input-background-color, var(--md-sys-color-surface));\n color: var(--ox-input-table-column-config-input-color, var(--md-sys-color-on-surface));\n }\n\n input[type='number'] {\n text-align: right;\n }\n\n md-icon {\n cursor: pointer;\n padding: 0;\n margin: 0;\n border: none;\n background: none;\n\n --md-icon-size: 16px;\n }\n\n md-icon[disabled] {\n cursor: not-allowed;\n color: var(--ox-input-table-column-config-disabled-color, var(--md-sys-color-surface-variant, #ccc));\n }\n `\n ]\n\n @property({ type: Array }) value: ColumnConfig[] = []\n\n render() {\n console.log('this.value', this.value)\n return html`\n <table>\n <thead>\n <tr>\n <th></th>\n <th>name</th>\n <th>label</th>\n <th>width</th>\n <th></th>\n </tr>\n </thead>\n <tbody>\n ${(this.value || []).map(\n (col, index) => html`\n <tr name=${col.name}>\n <td>\n <input\n type=\"checkbox\"\n .checked=${col.visible}\n @change=${(e: Event) => this._updateVisibility(e, index)}\n />\n </td>\n <td name>${col.name}</td>\n <td>\n <input type=\"text\" .value=${col.label} @input=${(e: Event) => this._updateLabel(e, index)} />\n </td>\n <td width>\n <input\n type=\"number\"\n .value=${String(col.width)}\n @input=${(e: Event) => this._updateWidth(e, index)}\n />\n </td>\n <td buttons>\n <md-icon class=\"icon-button\" @click=${() => this._moveUp(index)} ?disabled=${index === 0}>\n arrow_upward\n </md-icon>\n <md-icon\n class=\"icon-button\"\n @click=${() => this._moveDown(index)}\n ?disabled=${index === this.value.length - 1}\n >\n arrow_downward\n </md-icon>\n </td>\n </tr>\n `\n )}\n </tbody>\n </table>\n `\n }\n\n private _updateVisibility(event: Event, index: number) {\n const target = event.target as HTMLInputElement\n this.value[index].visible = target.checked\n this.requestUpdate()\n this._notifyChange()\n }\n\n private _updateLabel(event: Event, index: number) {\n const target = event.target as HTMLInputElement\n this.value[index].label = target.value\n this.requestUpdate()\n this._notifyChange()\n }\n\n private _updateWidth(event: Event, index: number) {\n const target = event.target as HTMLInputElement\n this.value[index].width = target.valueAsNumber\n this.requestUpdate()\n this._notifyChange()\n }\n\n private _moveUp(index: number) {\n if (index === 0) return\n const temp = this.value[index]\n this.value[index] = this.value[index - 1]\n this.value[index - 1] = temp\n this._updateOrder()\n this.requestUpdate()\n this._notifyChange()\n }\n\n private _moveDown(index: number) {\n if (index === this.value.length - 1) return\n const temp = this.value[index]\n this.value[index] = this.value[index + 1]\n this.value[index + 1] = temp\n this._updateOrder()\n this.requestUpdate()\n this._notifyChange()\n }\n\n private _updateOrder() {\n this.value = this.value.map((col, index) => ({\n ...col,\n order: index + 1\n }))\n }\n\n private _notifyChange() {\n this.dispatchEvent(\n new CustomEvent('change', {\n detail: this.value,\n bubbles: true,\n composed: true\n })\n )\n }\n}\n"]}
|