@operato/input 10.3.3 → 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 +28 -0
- package/dist/src/locale/locale-codes.d.ts +2 -2
- package/dist/src/locale/locale-codes.js +6 -2
- package/dist/src/locale/locale-codes.js.map +1 -1
- package/dist/src/locale/locale-picker.js +3 -2
- package/dist/src/locale/locale-picker.js.map +1 -1
- package/dist/src/locales/ja.d.ts +19 -0
- package/dist/src/locales/ja.js +24 -0
- package/dist/src/locales/ja.js.map +1 -0
- package/dist/src/locales/ms.d.ts +10 -10
- package/dist/src/locales/ms.js +17 -17
- package/dist/src/locales/ms.js.map +1 -1
- package/dist/src/locales/zh.d.ts +10 -10
- package/dist/src/locales/zh.js +17 -17
- package/dist/src/locales/zh.js.map +1 -1
- package/dist/src/ox-input-select-buttons.d.ts +8 -0
- package/dist/src/ox-input-select-buttons.js +53 -10
- package/dist/src/ox-input-select-buttons.js.map +1 -1
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/lit-localize.json +7 -1
- package/package.json +34 -32
- package/xliff/ja.xlf +75 -0
- package/xliff/ms.xlf +17 -0
- package/xliff/zh.xlf +17 -0
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,34 @@
|
|
|
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
|
+
|
|
25
|
+
### [10.3.4](https://github.com/hatiolab/operato/compare/v10.3.3...v10.3.4) (2026-08-31)
|
|
26
|
+
|
|
27
|
+
|
|
28
|
+
### :bug: Bug Fix
|
|
29
|
+
|
|
30
|
+
* **input:** 다국어를 밖에서 켤 수 없었다 · 일본어 추가 · 말레이·중국어는 빈 채였다 ([f397826](https://github.com/hatiolab/operato/commit/f39782687e53afffb03b8f378d5c6d86a526e057))
|
|
31
|
+
|
|
32
|
+
|
|
33
|
+
|
|
6
34
|
### [10.3.3](https://github.com/hatiolab/operato/compare/v10.3.2...v10.3.3) (2026-08-31)
|
|
7
35
|
|
|
8
36
|
**Note:** Version bump only for package @operato/input
|
|
@@ -6,8 +6,8 @@ export declare const sourceLocale = "en";
|
|
|
6
6
|
* The other locale codes that this application is localized into. Sorted
|
|
7
7
|
* lexicographically.
|
|
8
8
|
*/
|
|
9
|
-
export declare const targetLocales: readonly ["
|
|
9
|
+
export declare const targetLocales: readonly ["ja", "ko", "ms", "zh"];
|
|
10
10
|
/**
|
|
11
11
|
* All valid project locale codes. Sorted lexicographically.
|
|
12
12
|
*/
|
|
13
|
-
export declare const allLocales: readonly ["en", "
|
|
13
|
+
export declare const allLocales: readonly ["en", "ja", "ko", "ms", "zh"];
|
|
@@ -1,5 +1,9 @@
|
|
|
1
1
|
// Do not modify this file by hand!
|
|
2
2
|
// Re-generate this file by running lit-localize.
|
|
3
|
+
//
|
|
4
|
+
// 주의: `lit-localize.json` 에 `output.localeCodesModule` 이 없어서, 지금은 이 파일이 자동으로
|
|
5
|
+
// 다시 만들어지지 않는다. 언어를 늘리면 `lit-localize.json` 의 targetLocales 와 여기를 함께 고쳐야
|
|
6
|
+
// 한다. 한쪽만 고치면 번들은 생기는데 아무도 그 언어를 고를 수 없다(ja 가 그 상태였다).
|
|
3
7
|
/**
|
|
4
8
|
* The locale code that templates in this source code are written in.
|
|
5
9
|
*/
|
|
@@ -8,9 +12,9 @@ export const sourceLocale = `en`;
|
|
|
8
12
|
* The other locale codes that this application is localized into. Sorted
|
|
9
13
|
* lexicographically.
|
|
10
14
|
*/
|
|
11
|
-
export const targetLocales = [`
|
|
15
|
+
export const targetLocales = [`ja`, `ko`, `ms`, `zh`];
|
|
12
16
|
/**
|
|
13
17
|
* All valid project locale codes. Sorted lexicographically.
|
|
14
18
|
*/
|
|
15
|
-
export const allLocales = [`en`, `
|
|
19
|
+
export const allLocales = [`en`, `ja`, `ko`, `ms`, `zh`];
|
|
16
20
|
//# sourceMappingURL=locale-codes.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"locale-codes.js","sourceRoot":"","sources":["../../../src/locale/locale-codes.ts"],"names":[],"mappings":"AAAA,mCAAmC;AACnC,iDAAiD;
|
|
1
|
+
{"version":3,"file":"locale-codes.js","sourceRoot":"","sources":["../../../src/locale/locale-codes.ts"],"names":[],"mappings":"AAAA,mCAAmC;AACnC,iDAAiD;AACjD,EAAE;AACF,6EAA6E;AAC7E,yEAAyE;AACzE,uDAAuD;AAEvD;;GAEG;AACH,MAAM,CAAC,MAAM,YAAY,GAAG,IAAI,CAAA;AAEhC;;;GAGG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,CAAU,CAAA;AAE9D;;GAEG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,CAAU,CAAA","sourcesContent":["// Do not modify this file by hand!\n// Re-generate this file by running lit-localize.\n//\n// 주의: `lit-localize.json` 에 `output.localeCodesModule` 이 없어서, 지금은 이 파일이 자동으로\n// 다시 만들어지지 않는다. 언어를 늘리면 `lit-localize.json` 의 targetLocales 와 여기를 함께 고쳐야\n// 한다. 한쪽만 고치면 번들은 생기는데 아무도 그 언어를 고를 수 없다(ja 가 그 상태였다).\n\n/**\n * The locale code that templates in this source code are written in.\n */\nexport const sourceLocale = `en`\n\n/**\n * The other locale codes that this application is localized into. Sorted\n * lexicographically.\n */\nexport const targetLocales = [`ja`, `ko`, `ms`, `zh`] as const\n\n/**\n * All valid project locale codes. Sorted lexicographically.\n */\nexport const allLocales = [`en`, `ja`, `ko`, `ms`, `zh`] as const\n"]}
|
|
@@ -6,9 +6,10 @@ import { allLocales } from './locale-codes.js';
|
|
|
6
6
|
import { getLocale, setLocaleFromUrl } from './localization.js';
|
|
7
7
|
const localeNames = {
|
|
8
8
|
en: 'English',
|
|
9
|
+
ja: '日本語',
|
|
9
10
|
ko: '한국어',
|
|
10
|
-
|
|
11
|
-
|
|
11
|
+
ms: 'Bahasa Melayu',
|
|
12
|
+
zh: '中文 (简体)'
|
|
12
13
|
};
|
|
13
14
|
// Note we use updateWhenLocaleChanges here so that we're always up to date with
|
|
14
15
|
// the active locale (the result of getLocale()) when the locale changes via a
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"locale-picker.js","sourceRoot":"","sources":["../../../src/locale/locale-picker.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AACtC,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAA;AAEjD,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAA;AAEzC,OAAO,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAA;AAC9C,OAAO,EAAE,SAAS,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAA;AAE/D,MAAM,WAAW,GAEb;IACF,EAAE,EAAE,SAAS;IACb,EAAE,EAAE,KAAK;IACT,EAAE,EAAE,
|
|
1
|
+
{"version":3,"file":"locale-picker.js","sourceRoot":"","sources":["../../../src/locale/locale-picker.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AACtC,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAA;AAEjD,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAA;AAEzC,OAAO,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAA;AAC9C,OAAO,EAAE,SAAS,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAA;AAE/D,MAAM,WAAW,GAEb;IACF,EAAE,EAAE,SAAS;IACb,EAAE,EAAE,KAAK;IACT,EAAE,EAAE,KAAK;IACT,EAAE,EAAE,eAAe;IACnB,EAAE,EAAE,SAAS;CACd,CAAA;AAED,gFAAgF;AAChF,8EAA8E;AAC9E,sBAAsB;AAGf,IAAM,YAAY,GAAlB,MAAM,YAAa,SAAQ,UAAU;IAC1C,MAAM;QACJ,OAAO,IAAI,CAAA;wBACS,IAAI,CAAC,aAAa;UAChC,UAAU,CAAC,GAAG,CACd,MAAM,CAAC,EAAE,CAAC,IAAI,CAAA,iBAAiB,MAAM,cAAc,MAAM,KAAK,SAAS,EAAE,IAAI,WAAW,CAAC,MAAM,CAAC,WAAW,CAC5G;;KAEJ,CAAA;IACH,CAAC;IAED,aAAa,CAAC,KAAY;QACxB,MAAM,SAAS,GAAI,KAAK,CAAC,MAA4B,CAAC,KAAK,CAAA;QAC3D,IAAI,SAAS,KAAK,SAAS,EAAE,EAAE,CAAC;YAC9B,MAAM,GAAG,GAAG,IAAI,GAAG,CAAC,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAA;YACzC,GAAG,CAAC,YAAY,CAAC,GAAG,CAAC,QAAQ,EAAE,SAAS,CAAC,CAAA;YACzC,MAAM,CAAC,OAAO,CAAC,SAAS,CAAC,IAAI,EAAE,EAAE,EAAE,GAAG,CAAC,QAAQ,EAAE,CAAC,CAAA;YAClD,gBAAgB,EAAE,CAAA;QACpB,CAAC;IACH,CAAC;CACF,CAAA;AApBY,YAAY;IAFxB,SAAS,EAAE;IACX,aAAa,CAAC,eAAe,CAAC;GAClB,YAAY,CAoBxB","sourcesContent":["import { html, LitElement } from 'lit'\nimport { customElement } from 'lit/decorators.js'\n\nimport { localized } from '@lit/localize'\n\nimport { allLocales } from './locale-codes.js'\nimport { getLocale, setLocaleFromUrl } from './localization.js'\n\nconst localeNames: {\n [L in typeof allLocales[number]]: string\n} = {\n en: 'English',\n ja: '日本語',\n ko: '한국어',\n ms: 'Bahasa Melayu',\n zh: '中文 (简体)'\n}\n\n// Note we use updateWhenLocaleChanges here so that we're always up to date with\n// the active locale (the result of getLocale()) when the locale changes via a\n// history navigation.\n@localized()\n@customElement('locale-picker')\nexport class LocalePicker extends LitElement {\n render() {\n return html`\n <select @change=${this.localeChanged}>\n ${allLocales.map(\n locale => html`<option value=${locale} ?selected=${locale === getLocale()}>${localeNames[locale]}</option>`\n )}\n </select>\n `\n }\n\n localeChanged(event: Event) {\n const newLocale = (event.target as HTMLSelectElement).value\n if (newLocale !== getLocale()) {\n const url = new URL(window.location.href)\n url.searchParams.set('locale', newLocale)\n window.history.pushState(null, '', url.toString())\n setLocaleFromUrl()\n }\n }\n}\n"]}
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
export declare const templates: {
|
|
2
|
+
s075cb2f53173bd8a: string;
|
|
3
|
+
s29ec9210c8a8222e: string;
|
|
4
|
+
s31be7a0b4a5853dd: string;
|
|
5
|
+
s42670fc325584e15: string;
|
|
6
|
+
s4cbf3a26fca1d74a: string;
|
|
7
|
+
s5191b91c637d7da1: string;
|
|
8
|
+
s63c6e58ec805a9eb: string;
|
|
9
|
+
s685db98545dc9448: string;
|
|
10
|
+
s6aacb9fbb71a1d91: string;
|
|
11
|
+
s77c8560cf63a372d: string;
|
|
12
|
+
s9f41d726ecec72c2: string;
|
|
13
|
+
sb9874d345b5e590a: string;
|
|
14
|
+
sc4bcadba8e631b86: string;
|
|
15
|
+
scff69aa7239287b0: string;
|
|
16
|
+
sd793f87f18747a63: string;
|
|
17
|
+
sf9b52aece5aed0f7: string;
|
|
18
|
+
sfcc01216c601ec9e: string;
|
|
19
|
+
};
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
// Do not modify this file by hand!
|
|
2
|
+
// Re-generate this file by running lit-localize
|
|
3
|
+
/* eslint-disable no-irregular-whitespace */
|
|
4
|
+
/* eslint-disable @typescript-eslint/no-explicit-any */
|
|
5
|
+
export const templates = {
|
|
6
|
+
's075cb2f53173bd8a': `回転`,
|
|
7
|
+
's29ec9210c8a8222e': `当日`,
|
|
8
|
+
's31be7a0b4a5853dd': `z 軸`,
|
|
9
|
+
's42670fc325584e15': `前日`,
|
|
10
|
+
's4cbf3a26fca1d74a': `位置`,
|
|
11
|
+
's5191b91c637d7da1': `特殊文字は使用できません`,
|
|
12
|
+
's63c6e58ec805a9eb': `開始日`,
|
|
13
|
+
's685db98545dc9448': `終了日`,
|
|
14
|
+
's6aacb9fbb71a1d91': `スケール`,
|
|
15
|
+
's77c8560cf63a372d': `終了時刻`,
|
|
16
|
+
's9f41d726ecec72c2': `y 軸`,
|
|
17
|
+
'sb9874d345b5e590a': `タグが重複しています`,
|
|
18
|
+
'sc4bcadba8e631b86': `名前`,
|
|
19
|
+
'scff69aa7239287b0': `翌日`,
|
|
20
|
+
'sd793f87f18747a63': `寸法`,
|
|
21
|
+
'sf9b52aece5aed0f7': `x 軸`,
|
|
22
|
+
'sfcc01216c601ec9e': `開始時刻`,
|
|
23
|
+
};
|
|
24
|
+
//# sourceMappingURL=ja.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ja.js","sourceRoot":"","sources":["../../../src/locales/ja.ts"],"names":[],"mappings":"AACI,mCAAmC;AACnC,gDAAgD;AAKhD,4CAA4C;AAC5C,uDAAuD;AAEvD,MAAM,CAAC,MAAM,SAAS,GAAG;IACvB,mBAAmB,EAAE,IAAI;IAC/B,mBAAmB,EAAE,IAAI;IACzB,mBAAmB,EAAE,KAAK;IAC1B,mBAAmB,EAAE,IAAI;IACzB,mBAAmB,EAAE,IAAI;IACzB,mBAAmB,EAAE,cAAc;IACnC,mBAAmB,EAAE,KAAK;IAC1B,mBAAmB,EAAE,KAAK;IAC1B,mBAAmB,EAAE,MAAM;IAC3B,mBAAmB,EAAE,MAAM;IAC3B,mBAAmB,EAAE,KAAK;IAC1B,mBAAmB,EAAE,YAAY;IACjC,mBAAmB,EAAE,IAAI;IACzB,mBAAmB,EAAE,IAAI;IACzB,mBAAmB,EAAE,IAAI;IACzB,mBAAmB,EAAE,KAAK;IAC1B,mBAAmB,EAAE,MAAM;CACtB,CAAC","sourcesContent":["\n // Do not modify this file by hand!\n // Re-generate this file by running lit-localize\n\n \n \n\n /* eslint-disable no-irregular-whitespace */\n /* eslint-disable @typescript-eslint/no-explicit-any */\n\n export const templates = {\n 's075cb2f53173bd8a': `回転`,\n's29ec9210c8a8222e': `当日`,\n's31be7a0b4a5853dd': `z 軸`,\n's42670fc325584e15': `前日`,\n's4cbf3a26fca1d74a': `位置`,\n's5191b91c637d7da1': `特殊文字は使用できません`,\n's63c6e58ec805a9eb': `開始日`,\n's685db98545dc9448': `終了日`,\n's6aacb9fbb71a1d91': `スケール`,\n's77c8560cf63a372d': `終了時刻`,\n's9f41d726ecec72c2': `y 軸`,\n'sb9874d345b5e590a': `タグが重複しています`,\n'sc4bcadba8e631b86': `名前`,\n'scff69aa7239287b0': `翌日`,\n'sd793f87f18747a63': `寸法`,\n'sf9b52aece5aed0f7': `x 軸`,\n'sfcc01216c601ec9e': `開始時刻`,\n };\n "]}
|
package/dist/src/locales/ms.d.ts
CHANGED
|
@@ -1,19 +1,19 @@
|
|
|
1
1
|
export declare const templates: {
|
|
2
|
-
|
|
3
|
-
|
|
2
|
+
s075cb2f53173bd8a: string;
|
|
3
|
+
s29ec9210c8a8222e: string;
|
|
4
4
|
s31be7a0b4a5853dd: string;
|
|
5
|
-
|
|
5
|
+
s42670fc325584e15: string;
|
|
6
6
|
s4cbf3a26fca1d74a: string;
|
|
7
|
-
s6aacb9fbb71a1d91: string;
|
|
8
|
-
s075cb2f53173bd8a: string;
|
|
9
|
-
sb9874d345b5e590a: string;
|
|
10
7
|
s5191b91c637d7da1: string;
|
|
11
|
-
sc4bcadba8e631b86: string;
|
|
12
8
|
s63c6e58ec805a9eb: string;
|
|
13
|
-
sfcc01216c601ec9e: string;
|
|
14
9
|
s685db98545dc9448: string;
|
|
10
|
+
s6aacb9fbb71a1d91: string;
|
|
15
11
|
s77c8560cf63a372d: string;
|
|
16
|
-
|
|
17
|
-
|
|
12
|
+
s9f41d726ecec72c2: string;
|
|
13
|
+
sb9874d345b5e590a: string;
|
|
14
|
+
sc4bcadba8e631b86: string;
|
|
18
15
|
scff69aa7239287b0: string;
|
|
16
|
+
sd793f87f18747a63: string;
|
|
17
|
+
sf9b52aece5aed0f7: string;
|
|
18
|
+
sfcc01216c601ec9e: string;
|
|
19
19
|
};
|
package/dist/src/locales/ms.js
CHANGED
|
@@ -3,22 +3,22 @@
|
|
|
3
3
|
/* eslint-disable no-irregular-whitespace */
|
|
4
4
|
/* eslint-disable @typescript-eslint/no-explicit-any */
|
|
5
5
|
export const templates = {
|
|
6
|
-
'
|
|
7
|
-
'
|
|
8
|
-
's31be7a0b4a5853dd': `z
|
|
9
|
-
'
|
|
10
|
-
's4cbf3a26fca1d74a': `
|
|
11
|
-
'
|
|
12
|
-
'
|
|
13
|
-
'
|
|
14
|
-
'
|
|
15
|
-
'
|
|
16
|
-
'
|
|
17
|
-
'
|
|
18
|
-
'
|
|
19
|
-
'
|
|
20
|
-
'
|
|
21
|
-
'
|
|
22
|
-
'
|
|
6
|
+
's075cb2f53173bd8a': `putar`,
|
|
7
|
+
's29ec9210c8a8222e': `hari itu`,
|
|
8
|
+
's31be7a0b4a5853dd': `paksi z`,
|
|
9
|
+
's42670fc325584e15': `sehari sebelum`,
|
|
10
|
+
's4cbf3a26fca1d74a': `kedudukan`,
|
|
11
|
+
's5191b91c637d7da1': `aksara khas tidak dibenarkan`,
|
|
12
|
+
's63c6e58ec805a9eb': `tarikh mula`,
|
|
13
|
+
's685db98545dc9448': `tarikh tamat`,
|
|
14
|
+
's6aacb9fbb71a1d91': `skala`,
|
|
15
|
+
's77c8560cf63a372d': `masa tamat`,
|
|
16
|
+
's9f41d726ecec72c2': `paksi y`,
|
|
17
|
+
'sb9874d345b5e590a': `tag berganda`,
|
|
18
|
+
'sc4bcadba8e631b86': `nama`,
|
|
19
|
+
'scff69aa7239287b0': `sehari selepas`,
|
|
20
|
+
'sd793f87f18747a63': `dimensi`,
|
|
21
|
+
'sf9b52aece5aed0f7': `paksi x`,
|
|
22
|
+
'sfcc01216c601ec9e': `masa mula`,
|
|
23
23
|
};
|
|
24
24
|
//# sourceMappingURL=ms.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ms.js","sourceRoot":"","sources":["../../../src/locales/ms.ts"],"names":[],"mappings":"AACI,mCAAmC;AACnC,gDAAgD;AAKhD,4CAA4C;AAC5C,uDAAuD;AAEvD,MAAM,CAAC,MAAM,SAAS,GAAG;IACvB,mBAAmB,EAAE,
|
|
1
|
+
{"version":3,"file":"ms.js","sourceRoot":"","sources":["../../../src/locales/ms.ts"],"names":[],"mappings":"AACI,mCAAmC;AACnC,gDAAgD;AAKhD,4CAA4C;AAC5C,uDAAuD;AAEvD,MAAM,CAAC,MAAM,SAAS,GAAG;IACvB,mBAAmB,EAAE,OAAO;IAClC,mBAAmB,EAAE,UAAU;IAC/B,mBAAmB,EAAE,SAAS;IAC9B,mBAAmB,EAAE,gBAAgB;IACrC,mBAAmB,EAAE,WAAW;IAChC,mBAAmB,EAAE,8BAA8B;IACnD,mBAAmB,EAAE,aAAa;IAClC,mBAAmB,EAAE,cAAc;IACnC,mBAAmB,EAAE,OAAO;IAC5B,mBAAmB,EAAE,YAAY;IACjC,mBAAmB,EAAE,SAAS;IAC9B,mBAAmB,EAAE,cAAc;IACnC,mBAAmB,EAAE,MAAM;IAC3B,mBAAmB,EAAE,gBAAgB;IACrC,mBAAmB,EAAE,SAAS;IAC9B,mBAAmB,EAAE,SAAS;IAC9B,mBAAmB,EAAE,WAAW;CAC3B,CAAC","sourcesContent":["\n // Do not modify this file by hand!\n // Re-generate this file by running lit-localize\n\n \n \n\n /* eslint-disable no-irregular-whitespace */\n /* eslint-disable @typescript-eslint/no-explicit-any */\n\n export const templates = {\n 's075cb2f53173bd8a': `putar`,\n's29ec9210c8a8222e': `hari itu`,\n's31be7a0b4a5853dd': `paksi z`,\n's42670fc325584e15': `sehari sebelum`,\n's4cbf3a26fca1d74a': `kedudukan`,\n's5191b91c637d7da1': `aksara khas tidak dibenarkan`,\n's63c6e58ec805a9eb': `tarikh mula`,\n's685db98545dc9448': `tarikh tamat`,\n's6aacb9fbb71a1d91': `skala`,\n's77c8560cf63a372d': `masa tamat`,\n's9f41d726ecec72c2': `paksi y`,\n'sb9874d345b5e590a': `tag berganda`,\n'sc4bcadba8e631b86': `nama`,\n'scff69aa7239287b0': `sehari selepas`,\n'sd793f87f18747a63': `dimensi`,\n'sf9b52aece5aed0f7': `paksi x`,\n'sfcc01216c601ec9e': `masa mula`,\n };\n "]}
|
package/dist/src/locales/zh.d.ts
CHANGED
|
@@ -1,19 +1,19 @@
|
|
|
1
1
|
export declare const templates: {
|
|
2
|
-
|
|
3
|
-
|
|
2
|
+
s075cb2f53173bd8a: string;
|
|
3
|
+
s29ec9210c8a8222e: string;
|
|
4
4
|
s31be7a0b4a5853dd: string;
|
|
5
|
-
|
|
5
|
+
s42670fc325584e15: string;
|
|
6
6
|
s4cbf3a26fca1d74a: string;
|
|
7
|
-
s6aacb9fbb71a1d91: string;
|
|
8
|
-
s075cb2f53173bd8a: string;
|
|
9
|
-
sb9874d345b5e590a: string;
|
|
10
7
|
s5191b91c637d7da1: string;
|
|
11
|
-
sc4bcadba8e631b86: string;
|
|
12
8
|
s63c6e58ec805a9eb: string;
|
|
13
|
-
sfcc01216c601ec9e: string;
|
|
14
9
|
s685db98545dc9448: string;
|
|
10
|
+
s6aacb9fbb71a1d91: string;
|
|
15
11
|
s77c8560cf63a372d: string;
|
|
16
|
-
|
|
17
|
-
|
|
12
|
+
s9f41d726ecec72c2: string;
|
|
13
|
+
sb9874d345b5e590a: string;
|
|
14
|
+
sc4bcadba8e631b86: string;
|
|
18
15
|
scff69aa7239287b0: string;
|
|
16
|
+
sd793f87f18747a63: string;
|
|
17
|
+
sf9b52aece5aed0f7: string;
|
|
18
|
+
sfcc01216c601ec9e: string;
|
|
19
19
|
};
|
package/dist/src/locales/zh.js
CHANGED
|
@@ -3,22 +3,22 @@
|
|
|
3
3
|
/* eslint-disable no-irregular-whitespace */
|
|
4
4
|
/* eslint-disable @typescript-eslint/no-explicit-any */
|
|
5
5
|
export const templates = {
|
|
6
|
-
'
|
|
7
|
-
'
|
|
8
|
-
's31be7a0b4a5853dd': `z
|
|
9
|
-
'
|
|
10
|
-
's4cbf3a26fca1d74a':
|
|
11
|
-
'
|
|
12
|
-
'
|
|
13
|
-
'
|
|
14
|
-
'
|
|
15
|
-
'
|
|
16
|
-
'
|
|
17
|
-
'
|
|
18
|
-
'
|
|
19
|
-
'
|
|
20
|
-
'
|
|
21
|
-
'
|
|
22
|
-
'
|
|
6
|
+
's075cb2f53173bd8a': `旋转`,
|
|
7
|
+
's29ec9210c8a8222e': `当天`,
|
|
8
|
+
's31be7a0b4a5853dd': `z 轴`,
|
|
9
|
+
's42670fc325584e15': `前一天`,
|
|
10
|
+
's4cbf3a26fca1d74a': `位置`,
|
|
11
|
+
's5191b91c637d7da1': `不允许使用特殊字符`,
|
|
12
|
+
's63c6e58ec805a9eb': `开始日期`,
|
|
13
|
+
's685db98545dc9448': `结束日期`,
|
|
14
|
+
's6aacb9fbb71a1d91': `缩放`,
|
|
15
|
+
's77c8560cf63a372d': `结束时间`,
|
|
16
|
+
's9f41d726ecec72c2': `y 轴`,
|
|
17
|
+
'sb9874d345b5e590a': `标签重复`,
|
|
18
|
+
'sc4bcadba8e631b86': `名称`,
|
|
19
|
+
'scff69aa7239287b0': `后一天`,
|
|
20
|
+
'sd793f87f18747a63': `尺寸`,
|
|
21
|
+
'sf9b52aece5aed0f7': `x 轴`,
|
|
22
|
+
'sfcc01216c601ec9e': `开始时间`,
|
|
23
23
|
};
|
|
24
24
|
//# sourceMappingURL=zh.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"zh.js","sourceRoot":"","sources":["../../../src/locales/zh.ts"],"names":[],"mappings":"AACI,mCAAmC;AACnC,gDAAgD;AAKhD,4CAA4C;AAC5C,uDAAuD;AAEvD,MAAM,CAAC,MAAM,SAAS,GAAG;IACvB,mBAAmB,EAAE,
|
|
1
|
+
{"version":3,"file":"zh.js","sourceRoot":"","sources":["../../../src/locales/zh.ts"],"names":[],"mappings":"AACI,mCAAmC;AACnC,gDAAgD;AAKhD,4CAA4C;AAC5C,uDAAuD;AAEvD,MAAM,CAAC,MAAM,SAAS,GAAG;IACvB,mBAAmB,EAAE,IAAI;IAC/B,mBAAmB,EAAE,IAAI;IACzB,mBAAmB,EAAE,KAAK;IAC1B,mBAAmB,EAAE,KAAK;IAC1B,mBAAmB,EAAE,IAAI;IACzB,mBAAmB,EAAE,WAAW;IAChC,mBAAmB,EAAE,MAAM;IAC3B,mBAAmB,EAAE,MAAM;IAC3B,mBAAmB,EAAE,IAAI;IACzB,mBAAmB,EAAE,MAAM;IAC3B,mBAAmB,EAAE,KAAK;IAC1B,mBAAmB,EAAE,MAAM;IAC3B,mBAAmB,EAAE,IAAI;IACzB,mBAAmB,EAAE,KAAK;IAC1B,mBAAmB,EAAE,IAAI;IACzB,mBAAmB,EAAE,KAAK;IAC1B,mBAAmB,EAAE,MAAM;CACtB,CAAC","sourcesContent":["\n // Do not modify this file by hand!\n // Re-generate this file by running lit-localize\n\n \n \n\n /* eslint-disable no-irregular-whitespace */\n /* eslint-disable @typescript-eslint/no-explicit-any */\n\n export const templates = {\n 's075cb2f53173bd8a': `旋转`,\n's29ec9210c8a8222e': `当天`,\n's31be7a0b4a5853dd': `z 轴`,\n's42670fc325584e15': `前一天`,\n's4cbf3a26fca1d74a': `位置`,\n's5191b91c637d7da1': `不允许使用特殊字符`,\n's63c6e58ec805a9eb': `开始日期`,\n's685db98545dc9448': `结束日期`,\n's6aacb9fbb71a1d91': `缩放`,\n's77c8560cf63a372d': `结束时间`,\n's9f41d726ecec72c2': `y 轴`,\n'sb9874d345b5e590a': `标签重复`,\n'sc4bcadba8e631b86': `名称`,\n'scff69aa7239287b0': `后一天`,\n'sd793f87f18747a63': `尺寸`,\n'sf9b52aece5aed0f7': `x 轴`,\n'sfcc01216c601ec9e': `开始时间`,\n };\n "]}
|
|
@@ -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"]}
|