@operato/input 2.0.0-beta.24 → 2.0.0-beta.26
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 +22 -0
- package/dist/src/ox-checkbox.js +4 -3
- 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/tsconfig.tsbuildinfo +1 -1
- package/package.json +5 -4
- package/src/ox-checkbox.ts +4 -3
- package/src/ox-input-multiple-colors.ts +23 -13
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,28 @@
|
|
|
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.26](https://github.com/hatiolab/operato/compare/v2.0.0-beta.25...v2.0.0-beta.26) (2024-06-18)
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
### :bug: Bug Fix
|
|
10
|
+
|
|
11
|
+
* grist filter personalizer ([a41eb91](https://github.com/hatiolab/operato/commit/a41eb912700149a5c6ed910d40c6c1cb74b09976))
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
### :rocket: New Features
|
|
15
|
+
|
|
16
|
+
* chart config editor ([71d49fe](https://github.com/hatiolab/operato/commit/71d49fee7d9c329ec957df36845be1a6aa8a8260))
|
|
17
|
+
|
|
18
|
+
|
|
19
|
+
|
|
20
|
+
## [2.0.0-beta.25](https://github.com/hatiolab/operato/compare/v2.0.0-beta.24...v2.0.0-beta.25) (2024-06-17)
|
|
21
|
+
|
|
22
|
+
**Note:** Version bump only for package @operato/input
|
|
23
|
+
|
|
24
|
+
|
|
25
|
+
|
|
26
|
+
|
|
27
|
+
|
|
6
28
|
## [2.0.0-beta.24](https://github.com/hatiolab/operato/compare/v2.0.0-beta.23...v2.0.0-beta.24) (2024-06-15)
|
|
7
29
|
|
|
8
30
|
|
package/dist/src/ox-checkbox.js
CHANGED
|
@@ -44,7 +44,7 @@ let OxCheckbox = class OxCheckbox extends OxFormField {
|
|
|
44
44
|
}
|
|
45
45
|
|
|
46
46
|
:host([checked]) .checkbox {
|
|
47
|
-
background-color: var(--ox-checkbox-checked-background-color, var(--md-sys-color-
|
|
47
|
+
background-color: var(--ox-checkbox-checked-background-color, var(--md-sys-color-surface-tint));
|
|
48
48
|
}
|
|
49
49
|
|
|
50
50
|
path {
|
|
@@ -65,11 +65,12 @@ let OxCheckbox = class OxCheckbox extends OxFormField {
|
|
|
65
65
|
}
|
|
66
66
|
|
|
67
67
|
.label {
|
|
68
|
-
color: var(--ox-checkbox-label-color, var(--md-sys-color-on-
|
|
69
|
-
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);
|
|
70
70
|
line-height: var(--md-sys-typescale-label-medium-line-height, 1rem);
|
|
71
71
|
}
|
|
72
72
|
:host([checked]) .label {
|
|
73
|
+
color:var(ox-checkbox-label-checked-color, var(--md-sys-color-primary));
|
|
73
74
|
font-weight: 700;
|
|
74
75
|
}
|
|
75
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"]}
|