@operato/input 2.0.0-beta.2 → 2.0.0-beta.22
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 +139 -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 +1 -6
- package/dist/src/ox-checkbox.js.map +1 -1
- package/dist/src/ox-input-select-buttons.d.ts +1 -1
- package/dist/src/ox-input-select-buttons.js +2 -2
- package/dist/src/ox-input-select-buttons.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-input-unit-number.d.ts +0 -2
- package/dist/src/ox-input-unit-number.js +3 -5
- package/dist/src/ox-input-unit-number.js.map +1 -1
- 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 +13 -8
- package/src/index.ts +1 -0
- package/src/ox-checkbox.ts +1 -6
- package/src/ox-input-select-buttons.ts +2 -2
- package/src/ox-input-table-column-config.ts +211 -0
- package/src/ox-input-unit-number.ts +5 -6
- package/src/ox-select.ts +1 -14
- package/stories/ox-input-table-column-config.stories.ts +120 -0
- package/themes/grist-theme.css +4 -0
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,145 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
## [2.0.0-beta.22](https://github.com/hatiolab/operato/compare/v2.0.0-beta.21...v2.0.0-beta.22) (2024-06-13)
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
### :bug: Bug Fix
|
|
10
|
+
|
|
11
|
+
* operato tag for all package.json ([2334960](https://github.com/hatiolab/operato/commit/2334960db2186ade87ee590796a269fe5f5e9419))
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
## [2.0.0-beta.20](https://github.com/hatiolab/operato/compare/v2.0.0-beta.19...v2.0.0-beta.20) (2024-06-11)
|
|
16
|
+
|
|
17
|
+
|
|
18
|
+
### :bug: Bug Fix
|
|
19
|
+
|
|
20
|
+
* support function for defaultValue in ox-property-editor ([efe7590](https://github.com/hatiolab/operato/commit/efe7590a41d223d92ef7b96c3e1b49c3691599d0))
|
|
21
|
+
|
|
22
|
+
|
|
23
|
+
|
|
24
|
+
## [2.0.0-beta.19](https://github.com/hatiolab/operato/compare/v2.0.0-beta.18...v2.0.0-beta.19) (2024-06-11)
|
|
25
|
+
|
|
26
|
+
|
|
27
|
+
### :rocket: New Features
|
|
28
|
+
|
|
29
|
+
* gantt chart ([3daba7f](https://github.com/hatiolab/operato/commit/3daba7fbd8c270dc01c72b8d6602de75b370d59e))
|
|
30
|
+
|
|
31
|
+
|
|
32
|
+
|
|
33
|
+
## [2.0.0-beta.18](https://github.com/hatiolab/operato/compare/v2.0.0-beta.17...v2.0.0-beta.18) (2024-06-11)
|
|
34
|
+
|
|
35
|
+
|
|
36
|
+
### :rocket: New Features
|
|
37
|
+
|
|
38
|
+
* ox-input-table-column-config ([39be540](https://github.com/hatiolab/operato/commit/39be54054e210f6ce5d55499dffe78f4426d0d76))
|
|
39
|
+
|
|
40
|
+
|
|
41
|
+
|
|
42
|
+
## [2.0.0-beta.17](https://github.com/hatiolab/operato/compare/v2.0.0-beta.16...v2.0.0-beta.17) (2024-06-11)
|
|
43
|
+
|
|
44
|
+
|
|
45
|
+
### :rocket: New Features
|
|
46
|
+
|
|
47
|
+
* ox-input-table-column-config ([0b84541](https://github.com/hatiolab/operato/commit/0b84541ec63fc71538292abd9e81d8c38baee44c))
|
|
48
|
+
|
|
49
|
+
|
|
50
|
+
|
|
51
|
+
## [2.0.0-beta.16](https://github.com/hatiolab/operato/compare/v2.0.0-beta.15...v2.0.0-beta.16) (2024-06-10)
|
|
52
|
+
|
|
53
|
+
**Note:** Version bump only for package @operato/input
|
|
54
|
+
|
|
55
|
+
|
|
56
|
+
|
|
57
|
+
|
|
58
|
+
|
|
59
|
+
## [2.0.0-beta.15](https://github.com/hatiolab/operato/compare/v2.0.0-beta.14...v2.0.0-beta.15) (2024-06-10)
|
|
60
|
+
|
|
61
|
+
**Note:** Version bump only for package @operato/input
|
|
62
|
+
|
|
63
|
+
|
|
64
|
+
|
|
65
|
+
|
|
66
|
+
|
|
67
|
+
## [2.0.0-beta.14](https://github.com/hatiolab/operato/compare/v2.0.0-beta.13...v2.0.0-beta.14) (2024-06-10)
|
|
68
|
+
|
|
69
|
+
|
|
70
|
+
### :bug: Bug Fix
|
|
71
|
+
|
|
72
|
+
* gantt ([2ba0fc3](https://github.com/hatiolab/operato/commit/2ba0fc3b6928502c5667e59178391affa7b73294))
|
|
73
|
+
|
|
74
|
+
|
|
75
|
+
|
|
76
|
+
## [2.0.0-beta.13](https://github.com/hatiolab/operato/compare/v2.0.0-beta.12...v2.0.0-beta.13) (2024-06-09)
|
|
77
|
+
|
|
78
|
+
|
|
79
|
+
### :rocket: New Features
|
|
80
|
+
|
|
81
|
+
* tooltip-reactive-controller for mouse over/out ([73f069b](https://github.com/hatiolab/operato/commit/73f069b4e8c1472cc991010bbe7b3866035a05f0))
|
|
82
|
+
|
|
83
|
+
|
|
84
|
+
|
|
85
|
+
## [2.0.0-beta.12](https://github.com/hatiolab/operato/compare/v2.0.0-beta.11...v2.0.0-beta.12) (2024-06-09)
|
|
86
|
+
|
|
87
|
+
**Note:** Version bump only for package @operato/input
|
|
88
|
+
|
|
89
|
+
|
|
90
|
+
|
|
91
|
+
|
|
92
|
+
|
|
93
|
+
## [2.0.0-beta.9](https://github.com/hatiolab/operato/compare/v2.0.0-beta.8...v2.0.0-beta.9) (2024-06-08)
|
|
94
|
+
|
|
95
|
+
**Note:** Version bump only for package @operato/input
|
|
96
|
+
|
|
97
|
+
|
|
98
|
+
|
|
99
|
+
|
|
100
|
+
|
|
101
|
+
## [2.0.0-beta.8](https://github.com/hatiolab/operato/compare/v2.0.0-beta.7...v2.0.0-beta.8) (2024-06-07)
|
|
102
|
+
|
|
103
|
+
|
|
104
|
+
### :bug: Bug Fix
|
|
105
|
+
|
|
106
|
+
* ox-input-select-buttons 모바일에서 click 이벤트가 발생하지 않으므로, tap 이벤트 처리로 변경함 ([4bef771](https://github.com/hatiolab/operato/commit/4bef771d93875138a44a2edd60bf38734dedc50b))
|
|
107
|
+
|
|
108
|
+
|
|
109
|
+
|
|
110
|
+
## [2.0.0-beta.7](https://github.com/hatiolab/operato/compare/v2.0.0-beta.6...v2.0.0-beta.7) (2024-06-07)
|
|
111
|
+
|
|
112
|
+
|
|
113
|
+
### :rocket: New Features
|
|
114
|
+
|
|
115
|
+
* add user-preference-context into p13n module ([ba9901d](https://github.com/hatiolab/operato/commit/ba9901d5cc5df85ed1db8aeae471819be03244ca))
|
|
116
|
+
|
|
117
|
+
|
|
118
|
+
|
|
119
|
+
## [2.0.0-beta.5](https://github.com/hatiolab/operato/compare/v2.0.0-beta.4...v2.0.0-beta.5) (2024-06-04)
|
|
120
|
+
|
|
121
|
+
|
|
122
|
+
### :bug: Bug Fix
|
|
123
|
+
|
|
124
|
+
* theming design token : --border-dark-color => --border-dim-color ([eaf0866](https://github.com/hatiolab/operato/commit/eaf08667f6133cc4bcabf161bbe04305e0ff57e7))
|
|
125
|
+
|
|
126
|
+
|
|
127
|
+
|
|
128
|
+
## [2.0.0-beta.4](https://github.com/hatiolab/operato/compare/v2.0.0-beta.3...v2.0.0-beta.4) (2024-06-04)
|
|
129
|
+
|
|
130
|
+
|
|
131
|
+
### :bug: Bug Fix
|
|
132
|
+
|
|
133
|
+
* theming styles ([15fa201](https://github.com/hatiolab/operato/commit/15fa20198d7adc6b57f16e408f8dee94c40113f5))
|
|
134
|
+
|
|
135
|
+
|
|
136
|
+
|
|
137
|
+
## [2.0.0-beta.3](https://github.com/hatiolab/operato/compare/v2.0.0-beta.2...v2.0.0-beta.3) (2024-06-04)
|
|
138
|
+
|
|
139
|
+
**Note:** Version bump only for package @operato/input
|
|
140
|
+
|
|
141
|
+
|
|
142
|
+
|
|
143
|
+
|
|
144
|
+
|
|
6
145
|
## [2.0.0-beta.2](https://github.com/hatiolab/operato/compare/v2.0.0-beta.1...v2.0.0-beta.2) (2024-06-04)
|
|
7
146
|
|
|
8
147
|
|
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-primary));
|
|
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
|
|
|
@@ -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-primary));\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-surface-variant));\n font-size: var(--md-sys-typescale-label-large-size, 0.875rem);\n line-height: var(--md-sys-typescale-label-medium-line-height, 1rem);\n }\n :host([checked]) .label {\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"]}
|
|
@@ -32,13 +32,13 @@ let OxInputSelectButtons = class OxInputSelectButtons extends OxFormField {
|
|
|
32
32
|
data-value=${value}
|
|
33
33
|
label=${display}
|
|
34
34
|
?selected=${values.includes(value)}
|
|
35
|
-
@
|
|
35
|
+
@tap=${(e) => !this.disabled && this.onTap(e)}
|
|
36
36
|
></md-filter-chip>
|
|
37
37
|
`)}
|
|
38
38
|
</md-chip-set>
|
|
39
39
|
`;
|
|
40
40
|
}
|
|
41
|
-
|
|
41
|
+
onTap(e) {
|
|
42
42
|
e.stopPropagation();
|
|
43
43
|
const target = e.target;
|
|
44
44
|
const value = target.getAttribute('data-value');
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ox-input-select-buttons.js","sourceRoot":"","sources":["../../src/ox-input-select-buttons.ts"],"names":[],"mappings":"AAAA;;GAEG;;AAEH,OAAO,oCAAoC,CAAA;AAC3C,OAAO,iCAAiC,CAAA;AAExC,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAC/B,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAE3D,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAA;AAMtC,IAAM,oBAAoB,GAA1B,MAAM,oBAAqB,SAAQ,WAAW;IAA9C;;QAUsB,UAAK,GAAkC,EAAE,CAAA;QACzC,YAAO,GAAa,EAAE,CAAA;QACpB,aAAQ,GAAY,KAAK,CAAA;IA4CxD,CAAC;aAvDQ,WAAM,GAAG,GAAG,CAAA;;;;;;;GAOlB,AAPY,CAOZ;IAMD,MAAM;QACJ,MAAM,OAAO,GAAG,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAA;QAC7D,MAAM,MAAM,GAAG,IAAI,CAAC,KAAK,YAAY,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,OAAO,IAAI,CAAC,KAAK,IAAI,QAAQ,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,EAAE,CAAA;QAE3G,OAAO,IAAI,CAAA;;UAEL,CAAC,OAAO,IAAI,EAAE,CAAC,CAAC,GAAG,CACnB,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,IAAI,CAAA;;2BAEX,KAAK;sBACV,OAAO;0BACH,MAAM,CAAC,QAAQ,CAAC,KAAK,CAAC;
|
|
1
|
+
{"version":3,"file":"ox-input-select-buttons.js","sourceRoot":"","sources":["../../src/ox-input-select-buttons.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport '@material/web/chips/filter-chip.js'\nimport '@material/web/chips/chip-set.js'\n\nimport { css, html } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { OxFormField } from './ox-form-field'\nimport { MdFilterChip } from '@material/web/chips/filter-chip.js'\n\ntype Option = { display: string; value: string }\n\n@customElement('ox-input-select-buttons')\nexport class OxInputSelectButtons extends OxFormField {\n static styles = css`\n :host {\n display: flex;\n flex-flow: row;\n flex-wrap: wrap;\n gap: var(--spacing-medium);\n }\n `\n\n @property({ type: Array }) value: string[] | string | undefined = []\n @property({ type: Array }) options: Option[] = []\n @property({ type: Boolean }) multiple: boolean = false\n\n render() {\n const options = this.options.filter(option => !!option.value)\n const values = this.value instanceof Array ? this.value : typeof this.value == 'string' ? [this.value] : []\n\n return html`\n <md-chip-set>\n ${(options || []).map(\n ({ display, value }) => html`\n <md-filter-chip\n data-value=${value}\n label=${display}\n ?selected=${values.includes(value)}\n @tap=${(e: MouseEvent | TouchEvent) => !this.disabled && this.onTap(e)}\n ></md-filter-chip>\n `\n )}\n </md-chip-set>\n `\n }\n\n onTap(e: MouseEvent | TouchEvent) {\n e.stopPropagation()\n\n const target = e.target as MdFilterChip\n const value = target.getAttribute('data-value') as string\n\n if (this.multiple) {\n const values = this.value instanceof Array ? this.value : typeof this.value == 'string' ? [this.value] : []\n\n const idx = (this.value || []).indexOf(value)\n if (idx != -1) {\n values.splice(idx, 1)\n } else {\n values.push(value)\n }\n this.value = [...values]\n } else {\n this.value = this.value === value ? undefined : value\n }\n\n this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true, detail: this.value }))\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"]}
|
|
@@ -2,7 +2,6 @@
|
|
|
2
2
|
* @license Copyright © HatioLab Inc. All rights reserved.
|
|
3
3
|
*/
|
|
4
4
|
import '@material/web/icon/icon.js';
|
|
5
|
-
import { PropertyValues } from 'lit';
|
|
6
5
|
import { OxPopupList } from '@operato/popup';
|
|
7
6
|
import { OxFormField } from './ox-form-field';
|
|
8
7
|
export declare class OxInputUnitNumber extends OxFormField {
|
|
@@ -13,7 +12,6 @@ export declare class OxInputUnitNumber extends OxFormField {
|
|
|
13
12
|
input: HTMLInputElement;
|
|
14
13
|
popup: OxPopupList;
|
|
15
14
|
render(): import("lit-html").TemplateResult<1>;
|
|
16
|
-
updated(changes: PropertyValues<this>): void;
|
|
17
15
|
_onChangeValue(e: Event): void;
|
|
18
16
|
_toUserUnit(stdValue: string | number | undefined): number | undefined;
|
|
19
17
|
_toUserUnitByRate(stdValue: string | number | undefined, converterRate: number): number;
|
|
@@ -251,6 +251,9 @@ let OxInputUnitNumber = class OxInputUnitNumber extends OxFormField {
|
|
|
251
251
|
.value=${userUnit}
|
|
252
252
|
@select=${(e) => {
|
|
253
253
|
this.userUnit = e.detail;
|
|
254
|
+
this.dispatchEvent(new CustomEvent('user-unit-change', {
|
|
255
|
+
detail: this.userUnit
|
|
256
|
+
}));
|
|
254
257
|
}}
|
|
255
258
|
>
|
|
256
259
|
<div option value=${this.stdUnit}>${this.stdUnit}</div>
|
|
@@ -260,11 +263,6 @@ let OxInputUnitNumber = class OxInputUnitNumber extends OxFormField {
|
|
|
260
263
|
</div>
|
|
261
264
|
`;
|
|
262
265
|
}
|
|
263
|
-
updated(changes) {
|
|
264
|
-
// if (changes.has('stdUnit')) {
|
|
265
|
-
// this.userUnit = this.userUnit || this.stdUnit
|
|
266
|
-
// }
|
|
267
|
-
}
|
|
268
266
|
_onChangeValue(e) {
|
|
269
267
|
this.value = this._toStdUnit(this.input.value);
|
|
270
268
|
this.dispatchEvent(new CustomEvent('change', {
|