@operato/input 10.3.4 → 10.6.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
CHANGED
|
@@ -3,6 +3,25 @@
|
|
|
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
|
+
## [10.6.0](https://github.com/hatiolab/operato/compare/v10.5.0...v10.6.0) (2026-09-02)
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
### :bug: Bug Fix
|
|
10
|
+
|
|
11
|
+
* **data-grist,input:** 날짜는 앱 언어를 따른다 · 거르개는 목록보다 조용하다 ([1022153](https://github.com/hatiolab/operato/commit/10221535e5a2ea9699443a64109a16fdeefc1926))
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
### :memo: Documentation
|
|
15
|
+
|
|
16
|
+
* **input:** 주석의 「거르개」를 필터로 ([95992f5](https://github.com/hatiolab/operato/commit/95992f51079548cc4217f08cbe2f924236ec42f4))
|
|
17
|
+
|
|
18
|
+
|
|
19
|
+
### :rocket: New Features
|
|
20
|
+
|
|
21
|
+
* **input:** 필터 칩이 뜻을 함께 낼 수 있다 ([0ab556f](https://github.com/hatiolab/operato/commit/0ab556f74c53f8c6889c2b09f7d8728a365367ec))
|
|
22
|
+
|
|
23
|
+
|
|
24
|
+
|
|
6
25
|
### [10.3.4](https://github.com/hatiolab/operato/compare/v10.3.3...v10.3.4) (2026-08-31)
|
|
7
26
|
|
|
8
27
|
|
|
@@ -7,6 +7,14 @@ import { OxFormField } from './ox-form-field.js';
|
|
|
7
7
|
type Option = {
|
|
8
8
|
display: string;
|
|
9
9
|
value: string;
|
|
10
|
+
/**
|
|
11
|
+
* 마우스를 올렸을 때 보이는 뜻.
|
|
12
|
+
*
|
|
13
|
+
* 칩의 이름은 짧아야 하는데, 이름만으로는 무엇이 걸러지는지 알 수 없는 것이 있다 — 「중요」가
|
|
14
|
+
* 우선순위 몇 이상인지, 「만기」가 몇 시간 안인지. 그 값을 화면이 말하지 않으면 사용자는 눌러 보고
|
|
15
|
+
* 결과를 되짚어야 한다.
|
|
16
|
+
*/
|
|
17
|
+
hint?: string;
|
|
10
18
|
};
|
|
11
19
|
export declare class OxInputSelectButtons extends OxFormField {
|
|
12
20
|
static styles: import("lit").CSSResult[];
|
|
@@ -6,6 +6,7 @@ import '@material/web/chips/filter-chip.js';
|
|
|
6
6
|
import '@material/web/chips/chip-set.js';
|
|
7
7
|
import { css, html } from 'lit';
|
|
8
8
|
import { customElement, property } from 'lit/decorators.js';
|
|
9
|
+
import { ifDefined } from 'lit/directives/if-defined.js';
|
|
9
10
|
import { OxFormField } from './ox-form-field.js';
|
|
10
11
|
import { InputStyles } from './input-styles.js';
|
|
11
12
|
let OxInputSelectButtons = class OxInputSelectButtons extends OxFormField {
|
|
@@ -15,25 +16,67 @@ let OxInputSelectButtons = class OxInputSelectButtons extends OxFormField {
|
|
|
15
16
|
this.options = [];
|
|
16
17
|
this.multiple = false;
|
|
17
18
|
}
|
|
18
|
-
static { this.styles = [
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
19
|
+
static { this.styles = [
|
|
20
|
+
InputStyles,
|
|
21
|
+
css `
|
|
22
|
+
/*
|
|
23
|
+
* 필터는 **목록보다 조용해야 한다.**
|
|
24
|
+
*
|
|
25
|
+
* 재보니 칩 글자가 16px 이었고 목록 본문은 14px 이었다. 걸러진 것이 하나도 없는 상태에서도 이
|
|
26
|
+
* 줄이 화면에서 가장 크고 진했다. 테두리 색도 본문 글자와 같은 검정이라, 네 개가 나란히 서면
|
|
27
|
+
* 그 선들이 제일 먼저 눈에 걸렸다.
|
|
28
|
+
*
|
|
29
|
+
* 그래서 꺼져 있을 때는 물러나고 켜져 있을 때만 나선다. 지금 무엇으로 걸렀는지가 이 줄에서
|
|
30
|
+
* 바로 읽혀야 한다 — 목록이 짧아진 이유를 화면이 말해야 한다.
|
|
31
|
+
*
|
|
32
|
+
* md 칩을 갈아치우지 않고 그 토큰으로만 조정한다. 이 컴포넌트를 쓰는 화면이 많고, 자기 것으로
|
|
33
|
+
* 다시 만들면 그 화면들이 두 모양으로 갈린다.
|
|
34
|
+
*/
|
|
35
|
+
:host {
|
|
36
|
+
display: flex;
|
|
37
|
+
flex-flow: row;
|
|
38
|
+
flex-wrap: wrap;
|
|
39
|
+
gap: 6px;
|
|
24
40
|
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
41
|
+
/* 크기 — 목록 본문보다 한 단계 작게. */
|
|
42
|
+
--md-filter-chip-container-height: 26px;
|
|
43
|
+
--md-filter-chip-label-text-size: 12.5px;
|
|
44
|
+
--md-filter-chip-label-text-weight: 560;
|
|
45
|
+
--md-filter-chip-container-shape: 13px;
|
|
46
|
+
--md-filter-chip-leading-space: 11px;
|
|
47
|
+
--md-filter-chip-trailing-space: 11px;
|
|
48
|
+
--md-filter-chip-with-leading-icon-leading-space: 8px;
|
|
49
|
+
--md-filter-chip-icon-size: 15px;
|
|
50
|
+
|
|
51
|
+
/* 꺼진 상태 — 선은 흐리게, 글자는 보조 글자 색으로. */
|
|
52
|
+
--md-filter-chip-outline-color: var(--md-sys-color-outline-variant);
|
|
53
|
+
--md-filter-chip-outline-width: 1px;
|
|
54
|
+
--md-filter-chip-label-text-color: var(--md-sys-color-on-surface-variant);
|
|
55
|
+
--md-filter-chip-hover-label-text-color: var(--md-sys-color-on-surface);
|
|
56
|
+
--md-filter-chip-hover-state-layer-opacity: 0.06;
|
|
57
|
+
|
|
58
|
+
/* 켜진 상태 — 채워서 확실히 다르게. 켜졌는지 아닌지가 헷갈리면 필터는 쓸모가 없다. */
|
|
59
|
+
--md-filter-chip-selected-container-color: var(--md-sys-color-primary);
|
|
60
|
+
--md-filter-chip-selected-label-text-color: var(--md-sys-color-on-primary);
|
|
61
|
+
--md-filter-chip-selected-outline-width: 0px;
|
|
62
|
+
--md-filter-chip-selected-focus-label-text-color: var(--md-sys-color-on-primary);
|
|
63
|
+
--md-filter-chip-selected-hover-label-text-color: var(--md-sys-color-on-primary);
|
|
64
|
+
--md-filter-chip-selected-pressed-label-text-color: var(--md-sys-color-on-primary);
|
|
65
|
+
--md-filter-chip-selected-leading-icon-color: var(--md-sys-color-on-primary);
|
|
66
|
+
--md-filter-chip-selected-hover-leading-icon-color: var(--md-sys-color-on-primary);
|
|
67
|
+
}
|
|
68
|
+
`
|
|
69
|
+
]; }
|
|
28
70
|
render() {
|
|
29
71
|
const options = this.options.filter(option => !!option.value);
|
|
30
72
|
const values = this.value instanceof Array ? this.value : typeof this.value == 'string' ? [this.value] : [];
|
|
31
73
|
return html `
|
|
32
74
|
<md-chip-set>
|
|
33
|
-
${(options || []).map(({ display, value }) => html `
|
|
75
|
+
${(options || []).map(({ display, value, hint }) => html `
|
|
34
76
|
<md-filter-chip
|
|
35
77
|
data-value=${value}
|
|
36
78
|
label=${display}
|
|
79
|
+
title=${ifDefined(hint)}
|
|
37
80
|
?selected=${values.includes(value)}
|
|
38
81
|
@click=${(e) => !this.disabled && this.onClick(e)}
|
|
39
82
|
></md-filter-chip>
|
|
@@ -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;
|
|
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'\nimport { ifDefined } from 'lit/directives/if-defined.js'\n\nimport { OxFormField } from './ox-form-field.js'\nimport { InputStyles } from './input-styles.js'\nimport { MdFilterChip } from '@material/web/chips/filter-chip.js'\n\ntype Option = {\n display: string\n value: string\n /**\n * 마우스를 올렸을 때 보이는 뜻.\n *\n * 칩의 이름은 짧아야 하는데, 이름만으로는 무엇이 걸러지는지 알 수 없는 것이 있다 — 「중요」가\n * 우선순위 몇 이상인지, 「만기」가 몇 시간 안인지. 그 값을 화면이 말하지 않으면 사용자는 눌러 보고\n * 결과를 되짚어야 한다.\n */\n hint?: string\n}\n\n@customElement('ox-input-select-buttons')\nexport class OxInputSelectButtons extends OxFormField {\n static styles = [\n InputStyles,\n css`\n /*\n * 필터는 **목록보다 조용해야 한다.**\n *\n * 재보니 칩 글자가 16px 이었고 목록 본문은 14px 이었다. 걸러진 것이 하나도 없는 상태에서도 이\n * 줄이 화면에서 가장 크고 진했다. 테두리 색도 본문 글자와 같은 검정이라, 네 개가 나란히 서면\n * 그 선들이 제일 먼저 눈에 걸렸다.\n *\n * 그래서 꺼져 있을 때는 물러나고 켜져 있을 때만 나선다. 지금 무엇으로 걸렀는지가 이 줄에서\n * 바로 읽혀야 한다 — 목록이 짧아진 이유를 화면이 말해야 한다.\n *\n * md 칩을 갈아치우지 않고 그 토큰으로만 조정한다. 이 컴포넌트를 쓰는 화면이 많고, 자기 것으로\n * 다시 만들면 그 화면들이 두 모양으로 갈린다.\n */\n :host {\n display: flex;\n flex-flow: row;\n flex-wrap: wrap;\n gap: 6px;\n\n /* 크기 — 목록 본문보다 한 단계 작게. */\n --md-filter-chip-container-height: 26px;\n --md-filter-chip-label-text-size: 12.5px;\n --md-filter-chip-label-text-weight: 560;\n --md-filter-chip-container-shape: 13px;\n --md-filter-chip-leading-space: 11px;\n --md-filter-chip-trailing-space: 11px;\n --md-filter-chip-with-leading-icon-leading-space: 8px;\n --md-filter-chip-icon-size: 15px;\n\n /* 꺼진 상태 — 선은 흐리게, 글자는 보조 글자 색으로. */\n --md-filter-chip-outline-color: var(--md-sys-color-outline-variant);\n --md-filter-chip-outline-width: 1px;\n --md-filter-chip-label-text-color: var(--md-sys-color-on-surface-variant);\n --md-filter-chip-hover-label-text-color: var(--md-sys-color-on-surface);\n --md-filter-chip-hover-state-layer-opacity: 0.06;\n\n /* 켜진 상태 — 채워서 확실히 다르게. 켜졌는지 아닌지가 헷갈리면 필터는 쓸모가 없다. */\n --md-filter-chip-selected-container-color: var(--md-sys-color-primary);\n --md-filter-chip-selected-label-text-color: var(--md-sys-color-on-primary);\n --md-filter-chip-selected-outline-width: 0px;\n --md-filter-chip-selected-focus-label-text-color: var(--md-sys-color-on-primary);\n --md-filter-chip-selected-hover-label-text-color: var(--md-sys-color-on-primary);\n --md-filter-chip-selected-pressed-label-text-color: var(--md-sys-color-on-primary);\n --md-filter-chip-selected-leading-icon-color: var(--md-sys-color-on-primary);\n --md-filter-chip-selected-hover-leading-icon-color: var(--md-sys-color-on-primary);\n }\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, hint }) => html`\n <md-filter-chip\n data-value=${value}\n label=${display}\n title=${ifDefined(hint)}\n ?selected=${values.includes(value)}\n @click=${(e: MouseEvent | TouchEvent) => !this.disabled && this.onClick(e)}\n ></md-filter-chip>\n `\n )}\n </md-chip-set>\n `\n }\n\n onClick(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"]}
|