@operato/input 8.0.0-alpha.37 → 8.0.0-alpha.41
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 +9 -0
- package/dist/src/ox-input-direction.d.ts +1 -0
- package/dist/src/ox-input-direction.js +37 -4
- package/dist/src/ox-input-direction.js.map +1 -1
- package/dist/stories/ox-input-direction.stories.js +11 -0
- package/dist/stories/ox-input-direction.stories.js.map +1 -1
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +3 -3
- package/src/ox-input-direction.ts +31 -4
- package/stories/ox-input-direction.stories.ts +11 -0
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,15 @@
|
|
|
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
|
+
## [8.0.0-alpha.41](https://github.com/hatiolab/operato/compare/v8.0.0-alpha.40...v8.0.0-alpha.41) (2024-10-21)
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
### :bug: Bug Fix
|
|
10
|
+
|
|
11
|
+
* add inbound property for ox-input-direction ([c1e8b99](https://github.com/hatiolab/operato/commit/c1e8b99bccb179b883a04c2463391865055116bc))
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
|
|
6
15
|
## [8.0.0-alpha.37](https://github.com/hatiolab/operato/compare/v8.0.0-alpha.36...v8.0.0-alpha.37) (2024-10-20)
|
|
7
16
|
|
|
8
17
|
|
|
@@ -6,6 +6,7 @@ import { OxFormField } from './ox-form-field';
|
|
|
6
6
|
export declare class OxInputDirection extends OxFormField {
|
|
7
7
|
static styles: import("lit").CSSResult;
|
|
8
8
|
value?: string;
|
|
9
|
+
inbound?: boolean;
|
|
9
10
|
render(): import("lit-html").TemplateResult<1>;
|
|
10
11
|
onClick(e: MouseEvent): void;
|
|
11
12
|
}
|
|
@@ -7,6 +7,10 @@ import { css, html } from 'lit';
|
|
|
7
7
|
import { customElement, property } from 'lit/decorators.js';
|
|
8
8
|
import { OxFormField } from './ox-form-field';
|
|
9
9
|
let OxInputDirection = class OxInputDirection extends OxFormField {
|
|
10
|
+
constructor() {
|
|
11
|
+
super(...arguments);
|
|
12
|
+
this.inbound = false;
|
|
13
|
+
}
|
|
10
14
|
static { this.styles = css `
|
|
11
15
|
:host {
|
|
12
16
|
--md-icon-size: 1.4em;
|
|
@@ -27,15 +31,41 @@ let OxInputDirection = class OxInputDirection extends OxFormField {
|
|
|
27
31
|
color: var(--md-sys-color-on-primary);
|
|
28
32
|
background-color: var(--md-sys-color-primary);
|
|
29
33
|
}
|
|
34
|
+
|
|
35
|
+
/* 아이콘 회전 */
|
|
36
|
+
md-icon[data-value='W'] {
|
|
37
|
+
transform: rotate(-90deg);
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
md-icon[data-value='N'] {
|
|
41
|
+
transform: rotate(0deg);
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
md-icon[data-value='S'] {
|
|
45
|
+
transform: rotate(180deg);
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
md-icon[data-value='E'] {
|
|
49
|
+
transform: rotate(90deg);
|
|
50
|
+
}
|
|
30
51
|
`; }
|
|
31
52
|
render() {
|
|
32
53
|
const value = this.value;
|
|
33
54
|
return html `
|
|
34
55
|
<div @click=${this.onClick.bind(this)}>
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
56
|
+
${this.inbound
|
|
57
|
+
? html `
|
|
58
|
+
<md-icon ?selected=${value == 'W'} data-value="W">step_into</md-icon>
|
|
59
|
+
<md-icon ?selected=${value == 'N'} data-value="N">step_into</md-icon>
|
|
60
|
+
<md-icon ?selected=${value == 'S'} data-value="S">step_into</md-icon>
|
|
61
|
+
<md-icon ?selected=${value == 'E'} data-value="E">step_into</md-icon>
|
|
62
|
+
`
|
|
63
|
+
: html `
|
|
64
|
+
<md-icon ?selected=${value == 'W'} data-value="W">step_out</md-icon>
|
|
65
|
+
<md-icon ?selected=${value == 'N'} data-value="N">step_out</md-icon>
|
|
66
|
+
<md-icon ?selected=${value == 'S'} data-value="S">step_out</md-icon>
|
|
67
|
+
<md-icon ?selected=${value == 'E'} data-value="E">step_out</md-icon>
|
|
68
|
+
`}
|
|
39
69
|
</div>
|
|
40
70
|
`;
|
|
41
71
|
}
|
|
@@ -53,6 +83,9 @@ let OxInputDirection = class OxInputDirection extends OxFormField {
|
|
|
53
83
|
__decorate([
|
|
54
84
|
property({ type: String })
|
|
55
85
|
], OxInputDirection.prototype, "value", void 0);
|
|
86
|
+
__decorate([
|
|
87
|
+
property({ type: Boolean })
|
|
88
|
+
], OxInputDirection.prototype, "inbound", void 0);
|
|
56
89
|
OxInputDirection = __decorate([
|
|
57
90
|
customElement('ox-input-direction')
|
|
58
91
|
], OxInputDirection);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ox-input-direction.js","sourceRoot":"","sources":["../../src/ox-input-direction.ts"],"names":[],"mappings":"AAAA;;GAEG;;AAEH,OAAO,4BAA4B,CAAA;AAEnC,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;AAGtC,IAAM,gBAAgB,GAAtB,MAAM,gBAAiB,SAAQ,WAAW;
|
|
1
|
+
{"version":3,"file":"ox-input-direction.js","sourceRoot":"","sources":["../../src/ox-input-direction.ts"],"names":[],"mappings":"AAAA;;GAEG;;AAEH,OAAO,4BAA4B,CAAA;AAEnC,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;AAGtC,IAAM,gBAAgB,GAAtB,MAAM,gBAAiB,SAAQ,WAAW;IAA1C;;QAyCwB,YAAO,GAAa,KAAK,CAAA;IAsCxD,CAAC;aA9EQ,WAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqClB,AArCY,CAqCZ;IAKD,MAAM;QACJ,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAA;QAExB,OAAO,IAAI,CAAA;oBACK,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC;UACjC,IAAI,CAAC,OAAO;YACZ,CAAC,CAAC,IAAI,CAAA;mCACmB,KAAK,IAAI,GAAG;mCACZ,KAAK,IAAI,GAAG;mCACZ,KAAK,IAAI,GAAG;mCACZ,KAAK,IAAI,GAAG;aAClC;YACH,CAAC,CAAC,IAAI,CAAA;mCACmB,KAAK,IAAI,GAAG;mCACZ,KAAK,IAAI,GAAG;mCACZ,KAAK,IAAI,GAAG;mCACZ,KAAK,IAAI,GAAG;aAClC;;KAER,CAAA;IACH,CAAC;IAED,OAAO,CAAC,CAAa;QACnB,CAAC,CAAC,eAAe,EAAE,CAAA;QAEnB,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YAClB,OAAM;QACR,CAAC;QAED,MAAM,MAAM,GAAG,CAAC,CAAC,MAAiB,CAAA;QAClC,MAAM,KAAK,GAAG,MAAM,CAAC,YAAY,CAAC,YAAY,CAAW,CAAA;QAEzD,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,KAAK,KAAK,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,CAAA;QAErD,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,QAAQ,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC,CAAA;IACtG,CAAC;;AAtC2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;+CAAe;AACb;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;iDAA0B;AAzC3C,gBAAgB;IAD5B,aAAa,CAAC,oBAAoB,CAAC;GACvB,gBAAgB,CA+E5B","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport '@material/web/icon/icon.js'\n\nimport { css, html } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { OxFormField } from './ox-form-field'\n\n@customElement('ox-input-direction')\nexport class OxInputDirection extends OxFormField {\n static styles = css`\n :host {\n --md-icon-size: 1.4em;\n }\n\n div {\n display: flex;\n justify-content: space-between;\n max-width: 140px;\n }\n\n md-icon {\n color: var(--md-sys-color-on-background);\n background-color: var(--md-sys-color-background);\n }\n\n md-icon[selected] {\n color: var(--md-sys-color-on-primary);\n background-color: var(--md-sys-color-primary);\n }\n\n /* 아이콘 회전 */\n md-icon[data-value='W'] {\n transform: rotate(-90deg);\n }\n\n md-icon[data-value='N'] {\n transform: rotate(0deg);\n }\n\n md-icon[data-value='S'] {\n transform: rotate(180deg);\n }\n\n md-icon[data-value='E'] {\n transform: rotate(90deg);\n }\n `\n\n @property({ type: String }) value?: string\n @property({ type: Boolean }) inbound?: boolean = false\n\n render() {\n const value = this.value\n\n return html`\n <div @click=${this.onClick.bind(this)}>\n ${this.inbound\n ? html`\n <md-icon ?selected=${value == 'W'} data-value=\"W\">step_into</md-icon>\n <md-icon ?selected=${value == 'N'} data-value=\"N\">step_into</md-icon>\n <md-icon ?selected=${value == 'S'} data-value=\"S\">step_into</md-icon>\n <md-icon ?selected=${value == 'E'} data-value=\"E\">step_into</md-icon>\n `\n : html`\n <md-icon ?selected=${value == 'W'} data-value=\"W\">step_out</md-icon>\n <md-icon ?selected=${value == 'N'} data-value=\"N\">step_out</md-icon>\n <md-icon ?selected=${value == 'S'} data-value=\"S\">step_out</md-icon>\n <md-icon ?selected=${value == 'E'} data-value=\"E\">step_out</md-icon>\n `}\n </div>\n `\n }\n\n onClick(e: MouseEvent) {\n e.stopPropagation()\n\n if (this.disabled) {\n return\n }\n\n const target = e.target as Element\n const value = target.getAttribute('data-value') as string\n\n this.value = this.value === value ? undefined : value\n\n this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true, detail: this.value }))\n }\n}\n"]}
|
|
@@ -55,6 +55,17 @@ const Template = ({ name = 'options', value, disabled }) => html `
|
|
|
55
55
|
?disabled=${disabled}
|
|
56
56
|
>
|
|
57
57
|
</ox-input-direction>
|
|
58
|
+
<br />
|
|
59
|
+
<ox-input-direction
|
|
60
|
+
@change=${(e) => {
|
|
61
|
+
console.log(e.target.value);
|
|
62
|
+
}}
|
|
63
|
+
name=${name}
|
|
64
|
+
.value=${value}
|
|
65
|
+
?disabled=${disabled}
|
|
66
|
+
inbound
|
|
67
|
+
>
|
|
68
|
+
</ox-input-direction>
|
|
58
69
|
</div>
|
|
59
70
|
`;
|
|
60
71
|
export const Regular = Template.bind({});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ox-input-direction.stories.js","sourceRoot":"","sources":["../../stories/ox-input-direction.stories.ts"],"names":[],"mappings":"AAAA,OAAO,8BAA8B,CAAA;AAErC,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAA;AAC1C,OAAO,EAAE,MAAM,IAAI,iBAAiB,EAAE,MAAM,8CAA8C,CAAA;AAE1F,eAAe;IACb,KAAK,EAAE,oBAAoB;IAC3B,SAAS,EAAE,oBAAoB;IAC/B,QAAQ,EAAE;QACR,KAAK,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;QAC5B,IAAI,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;QACzB,QAAQ,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;KACjC;CACF,CAAA;AAcD,MAAM,QAAQ,GAAoB,CAAC,EAAE,IAAI,GAAG,SAAS,EAAE,KAAK,EAAE,QAAQ,EAAY,EAAE,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;MAqBrF,iBAAiB,CAAC,OAAO;;;;;;;;;;;;;;;;gBAgBf,CAAC,CAAQ,EAAE,EAAE;IACrB,OAAO,CAAC,GAAG,CAAE,CAAC,CAAC,MAA2B,CAAC,KAAK,CAAC,CAAA;AACnD,CAAC;aACM,IAAI;eACF,KAAK;kBACF,QAAQ
|
|
1
|
+
{"version":3,"file":"ox-input-direction.stories.js","sourceRoot":"","sources":["../../stories/ox-input-direction.stories.ts"],"names":[],"mappings":"AAAA,OAAO,8BAA8B,CAAA;AAErC,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAA;AAC1C,OAAO,EAAE,MAAM,IAAI,iBAAiB,EAAE,MAAM,8CAA8C,CAAA;AAE1F,eAAe;IACb,KAAK,EAAE,oBAAoB;IAC3B,SAAS,EAAE,oBAAoB;IAC/B,QAAQ,EAAE;QACR,KAAK,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;QAC5B,IAAI,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;QACzB,QAAQ,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;KACjC;CACF,CAAA;AAcD,MAAM,QAAQ,GAAoB,CAAC,EAAE,IAAI,GAAG,SAAS,EAAE,KAAK,EAAE,QAAQ,EAAY,EAAE,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;MAqBrF,iBAAiB,CAAC,OAAO;;;;;;;;;;;;;;;;gBAgBf,CAAC,CAAQ,EAAE,EAAE;IACrB,OAAO,CAAC,GAAG,CAAE,CAAC,CAAC,MAA2B,CAAC,KAAK,CAAC,CAAA;AACnD,CAAC;aACM,IAAI;eACF,KAAK;kBACF,QAAQ;;;;;gBAKV,CAAC,CAAQ,EAAE,EAAE;IACrB,OAAO,CAAC,GAAG,CAAE,CAAC,CAAC,MAA2B,CAAC,KAAK,CAAC,CAAA;AACnD,CAAC;aACM,IAAI;eACF,KAAK;kBACF,QAAQ;;;;;CAKzB,CAAA;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACxC,OAAO,CAAC,IAAI,GAAG;IACb,IAAI,EAAE,SAAS;IACf,KAAK,EAAE,EAAE;CACV,CAAA","sourcesContent":["import '../src/ox-input-direction.js'\n\nimport { html, TemplateResult } from 'lit'\nimport { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles'\n\nexport default {\n title: 'ox-input-direction',\n component: 'ox-input-direction',\n argTypes: {\n value: { control: 'object' },\n name: { control: 'text' },\n disabled: { control: 'boolean' }\n }\n}\n\ninterface Story<T> {\n (args: T): TemplateResult\n args?: Partial<T>\n argTypes?: Record<string, unknown>\n}\n\ninterface ArgTypes {\n name?: string\n value?: object | string\n disabled?: boolean\n}\n\nconst Template: Story<ArgTypes> = ({ name = 'options', value, disabled }: ArgTypes) => html`\n <link href=\"https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap\" rel=\"stylesheet\" />\n\n <link href=\"/themes/light.css\" rel=\"stylesheet\" />\n <link href=\"/themes/dark.css\" rel=\"stylesheet\" />\n <link href=\"/themes/spacing.css\" rel=\"stylesheet\" />\n\n <link\n href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1\"\n rel=\"stylesheet\"\n />\n <link\n href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1\"\n rel=\"stylesheet\"\n />\n <link\n href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1\"\n rel=\"stylesheet\"\n />\n\n <style>\n ${MDTypeScaleStyles.cssText}\n </style>\n\n <style>\n .container {\n height: 500px;\n text-align: center;\n padding: 20px;\n\n background-color: var(--md-sys-color-primary-container);\n color: var(--md-sys-color-on-primary-container);\n }\n </style>\n\n <div class=\"container\">\n <ox-input-direction\n @change=${(e: Event) => {\n console.log((e.target as HTMLInputElement).value)\n }}\n name=${name}\n .value=${value}\n ?disabled=${disabled}\n >\n </ox-input-direction>\n <br />\n <ox-input-direction\n @change=${(e: Event) => {\n console.log((e.target as HTMLInputElement).value)\n }}\n name=${name}\n .value=${value}\n ?disabled=${disabled}\n inbound\n >\n </ox-input-direction>\n </div>\n`\n\nexport const Regular = Template.bind({})\nRegular.args = {\n name: 'options',\n value: ''\n}\n"]}
|