@operato/input 1.1.84 → 1.2.3

package/src/locales/ko.ts

@@ -1,25 +1,30 @@
-// Do not modify this file by hand!
-// Re-generate this file by running lit-localize
 
-/* eslint-disable no-irregular-whitespace */
-/* eslint-disable @typescript-eslint/no-explicit-any */
+    // Do not modify this file by hand!
+    // Re-generate this file by running lit-localize
 
-export const templates = {
-  s075cb2f53173bd8a: `회전`,
-  s29ec9210c8a8222e: `당일`,
-  s31be7a0b4a5853dd: `z 축`,
-  s42670fc325584e15: `전날`,
-  s63c6e58ec805a9eb: `시작일`,
-  s685db98545dc9448: `완료일`,
-  s6aacb9fbb71a1d91: `스케일`,
-  s77c8560cf63a372d: `완료시간`,
-  s9f41d726ecec72c2: `y 축`,
-  sc4bcadba8e631b86: `이름`,
-  scff69aa7239287b0: `다음날`,
-  sd793f87f18747a63: `체적`,
-  sf95fdd7da4fc2295: `변환`,
-  sf9b52aece5aed0f7: `x 축`,
-  sfcc01216c601ec9e: `시작시간`,
-  sb9874d345b5e590a: `태그가 중복되었습니다.`,
-  s5191b91c637d7da1: `특수문자는 사용할 수 없습니다.`
-}
+    
+    
+
+    /* eslint-disable no-irregular-whitespace */
+    /* eslint-disable @typescript-eslint/no-explicit-any */
+
+    export const templates = {
+      's075cb2f53173bd8a': `회전`,
+'s29ec9210c8a8222e': `당일`,
+'s31be7a0b4a5853dd': `z 축`,
+'s42670fc325584e15': `전날`,
+'s4cbf3a26fca1d74a': `위치`,
+'s5191b91c637d7da1': `특수문자는 허용되지 않습니다`,
+'s63c6e58ec805a9eb': `시작일`,
+'s685db98545dc9448': `완료일`,
+'s6aacb9fbb71a1d91': `스케일`,
+'s77c8560cf63a372d': `완료시간`,
+'s9f41d726ecec72c2': `y 축`,
+'sb9874d345b5e590a': `태그가 중복되었습니다`,
+'sc4bcadba8e631b86': `이름`,
+'scff69aa7239287b0': `다음날`,
+'sd793f87f18747a63': `체적`,
+'sf9b52aece5aed0f7': `x 축`,
+'sfcc01216c601ec9e': `시작시간`,
+    };
+  

package/src/locales/ms.ts

@@ -13,7 +13,7 @@
 's9f41d726ecec72c2': `y-axes`,
 's31be7a0b4a5853dd': `z-axes`,
 'sd793f87f18747a63': `dimension`,
-'sf95fdd7da4fc2295': `translate`,
+'s4cbf3a26fca1d74a': `position`,
 's6aacb9fbb71a1d91': `scale`,
 's075cb2f53173bd8a': `rotate`,
 'sb9874d345b5e590a': `tag duplicated`,

package/src/locales/zh.ts

@@ -13,7 +13,7 @@
 's9f41d726ecec72c2': `y-axes`,
 's31be7a0b4a5853dd': `z-axes`,
 'sd793f87f18747a63': `dimension`,
-'sf95fdd7da4fc2295': `translate`,
+'s4cbf3a26fca1d74a': `position`,
 's6aacb9fbb71a1d91': `scale`,
 's075cb2f53173bd8a': `rotate`,
 'sb9874d345b5e590a': `tag duplicated`,

package/src/ox-input-3dish.ts

@@ -2,6 +2,8 @@
  * @license Copyright © HatioLab Inc. All rights reserved.
  */
 
+import './ox-input-angle'
+
 import { css, html } from 'lit'
 import { customElement, property } from 'lit/decorators.js'
 
@@ -37,7 +39,8 @@ export class OxInput3Dish extends OxFormField {
         color: var(--legend-color);
       }
 
-      input {
+      input,
+      ox-input-angle {
         grid-column: span 2;
         border: 0;
         border-bottom: var(--border-dark-color);
@@ -45,6 +48,11 @@ export class OxInput3Dish extends OxFormField {
         font: var(--input-font);
         color: var(--primary-text-color);
       }
+
+      ox-input-angle {
+        --input-border: 0;
+      }
+
       input:focus {
         outline: none;
         border-bottom: 1px solid var(--primary-color);
@@ -53,8 +61,7 @@ export class OxInput3Dish extends OxFormField {
   ]
 
   @property({ type: Object }) dimension?: { width?: number; height?: number; depth?: number }
-  // translate는 고유한 html element의 attribute이므로, property는 translatex로 한다.
-  @property({ type: Object }) translatex?: { x?: number; y?: number; z?: number }
+  @property({ type: Object }) position?: { x?: number; y?: number; z?: number }
   @property({ type: Object }) rotate?: { x?: number; y?: number; z?: number }
   @property({ type: Object }) scale?: { x?: number; y?: number; z?: number }
 
@@ -81,17 +88,17 @@ export class OxInput3Dish extends OxFormField {
       case 'tx':
       case 'ty':
       case 'tz':
-        this.translatex = {
-          ...this.translatex,
+        this.position = {
+          ...this.position,
           [prop]: value
         }
 
         this.dispatchEvent(
-          new CustomEvent('translate-changed', {
+          new CustomEvent('position-changed', {
             bubbles: true,
             composed: true,
             detail: {
-              value: this.translatex
+              value: this.position
             }
           })
         )
@@ -154,7 +161,7 @@ export class OxInput3Dish extends OxFormField {
     }
 
     this.value = {
-      translate: this.translatex,
+      position: this.position,
       rotate: this.rotate,
       scale: this.scale,
       dimension: this.dimension
@@ -176,24 +183,24 @@ export class OxInput3Dish extends OxFormField {
       <span>${msg('z-axes')}</span>
 
       <label>${msg('dimension')}</label>
-      <input type="number" id="dwidth" .value=${this.dimension?.width} />
-      <input type="number" id="dheight" .value=${this.dimension?.height} />
-      <input type="number" id="ddepth" .value=${this.dimension?.depth} />
+      <input type="number" id="dwidth" .value=${String(this.dimension?.width)} />
+      <input type="number" id="dheight" .value=${String(this.dimension?.height)} />
+      <input type="number" id="ddepth" .value=${String(this.dimension?.depth)} />
 
-      <label>${msg('translate')}</label>
-      <input type="number" id="tx" .value=${this.translatex?.x} />
-      <input type="number" id="ty" .value=${this.translatex?.y} />
-      <input type="number" id="tz" .value=${this.translatex?.z} />
+      <label>${msg('position')}</label>
+      <input type="number" id="tx" .value=${String(this.position?.x)} />
+      <input type="number" id="ty" .value=${String(this.position?.y)} />
+      <input type="number" id="tz" .value=${String(this.position?.z)} />
 
       <label>${msg('scale')}</label>
-      <input type="number" id="sx" .value=${this.scale?.x} />
-      <input type="number" id="sy" .value=${this.scale?.y} />
-      <input type="number" id="sz" .value=${this.scale?.z} />
+      <input type="number" id="sx" .value=${String(this.scale?.x)} />
+      <input type="number" id="sy" .value=${String(this.scale?.y)} />
+      <input type="number" id="sz" .value=${String(this.scale?.z)} />
 
       <label>${msg('rotate')}</label>
-      <ox-input-angle id="rx" .value=${this.rotate?.x}></ox-input-angle>
-      <ox-input-angle id="ry" .value=${this.rotate?.y}></ox-input-angle>
-      <ox-input-angle id="rz" .value=${this.rotate?.z}></ox-input-angle>
+      <ox-input-angle id="rx" .value=${String(this.rotate?.x)}></ox-input-angle>
+      <ox-input-angle id="ry" .value=${String(this.rotate?.y)}></ox-input-angle>
+      <ox-input-angle id="rz" .value=${String(this.rotate?.z)}></ox-input-angle>
     `
   }
 }

package/src/ox-input-angle.ts

@@ -19,7 +19,11 @@ export class OxInputAngle extends OxFormField {
         width: 100%;
         height: 100%;
         box-sizing: border-box;
-        border: 1px solid rgba(0, 0, 0, 0.2);
+        border: var(--input-border, 1px solid rgba(0, 0, 0, 0.2));
+      }
+
+      input:focus {
+        outline: var(--input-focus-outline, inherit);
       }
     `
   ]
@@ -32,7 +36,7 @@ export class OxInputAngle extends OxFormField {
     return html`
       <input
         type="number"
-        .value=${this._toDegree(this.value)}
+        .value=${String(this._toDegree(this.value))}
         .placeholder=${this.placeholder || '0°'}
         @change=${(e: Event) => this._onChangeValue(e)}
       />

package/stories/ox-input-angle.stories.ts

@@ -0,0 +1,51 @@
+import '../src/ox-input-angle.js'
+import '../src/locale/locale-picker.js'
+
+import { html, TemplateResult } from 'lit'
+
+export default {
+  title: 'ox-input-angle',
+  component: 'ox-input-angle',
+  argTypes: {
+    value: { control: 'number' },
+    name: { control: 'text' }
+  }
+}
+
+interface Story<T> {
+  (args: T): TemplateResult
+  args?: Partial<T>
+  argTypes?: Record<string, unknown>
+}
+
+interface ArgTypes {
+  name?: string
+  value?: number
+}
+
+const Template: Story<ArgTypes> = ({ name = '3dish', value = 0 }: ArgTypes) => html`
+  <link href="/themes/app-theme.css" rel="stylesheet" />
+  <link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet" />
+  <style>
+    body {
+    }
+  </style>
+
+  <locale-picker></locale-picker>
+  <br /><br />
+
+  <ox-input-angle
+    @change=${(e: Event) => {
+      console.log((e.target as HTMLInputElement).value)
+    }}
+    name=${name}
+    .value=${value}
+  >
+  </ox-input-angle>
+`
+
+export const Regular = Template.bind({})
+Regular.args = {
+  name: 'angle',
+  value: 0
+}

package/xliff/en.xlf

@@ -14,9 +14,6 @@
 <trans-unit id="sd793f87f18747a63">
   <source>dimension</source>
 </trans-unit>
-<trans-unit id="sf95fdd7da4fc2295">
-  <source>translate</source>
-</trans-unit>
 <trans-unit id="s6aacb9fbb71a1d91">
   <source>scale</source>
 </trans-unit>
@@ -47,6 +44,15 @@
 <trans-unit id="scff69aa7239287b0">
   <source>The day after</source>
 </trans-unit>
+<trans-unit id="s4cbf3a26fca1d74a">
+  <source>position</source>
+</trans-unit>
+<trans-unit id="sb9874d345b5e590a">
+  <source>tag duplicated</source>
+</trans-unit>
+<trans-unit id="s5191b91c637d7da1">
+  <source>special characters not allowed</source>
+</trans-unit>
 </body>
 </file>
 </xliff>

package/xliff/ko.xlf

@@ -18,10 +18,6 @@
   <source>dimension</source>
   <target>체적</target>
 </trans-unit>
-<trans-unit id="sf95fdd7da4fc2295">
-  <source>translate</source>
-  <target>변환</target>
-</trans-unit>
 <trans-unit id="s6aacb9fbb71a1d91">
   <source>scale</source>
   <target>스케일</target>
@@ -62,6 +58,18 @@
   <source>The day after</source>
   <target>다음날</target>
 </trans-unit>
+<trans-unit id="s4cbf3a26fca1d74a">
+  <source>position</source>
+  <target>위치</target>
+</trans-unit>
+<trans-unit id="sb9874d345b5e590a">
+  <source>tag duplicated</source>
+  <target>태그가 중복되었습니다</target>
+</trans-unit>
+<trans-unit id="s5191b91c637d7da1">
+  <source>special characters not allowed</source>
+  <target>특수문자는 허용되지 않습니다</target>
+</trans-unit>
 </body>
 </file>
 </xliff>

package/xliff/ms.xlf

@@ -14,9 +14,6 @@
 <trans-unit id="sd793f87f18747a63">
   <source>dimension</source>
 </trans-unit>
-<trans-unit id="sf95fdd7da4fc2295">
-  <source>translate</source>
-</trans-unit>
 <trans-unit id="s6aacb9fbb71a1d91">
   <source>scale</source>
 </trans-unit>
@@ -47,6 +44,15 @@
 <trans-unit id="scff69aa7239287b0">
   <source>The day after</source>
 </trans-unit>
+<trans-unit id="s4cbf3a26fca1d74a">
+  <source>position</source>
+</trans-unit>
+<trans-unit id="sb9874d345b5e590a">
+  <source>tag duplicated</source>
+</trans-unit>
+<trans-unit id="s5191b91c637d7da1">
+  <source>special characters not allowed</source>
+</trans-unit>
 </body>
 </file>
 </xliff>

package/xliff/zh.xlf

@@ -14,9 +14,6 @@
 <trans-unit id="sd793f87f18747a63">
   <source>dimension</source>
 </trans-unit>
-<trans-unit id="sf95fdd7da4fc2295">
-  <source>translate</source>
-</trans-unit>
 <trans-unit id="s6aacb9fbb71a1d91">
   <source>scale</source>
 </trans-unit>
@@ -47,6 +44,15 @@
 <trans-unit id="scff69aa7239287b0">
   <source>The day after</source>
 </trans-unit>
+<trans-unit id="s4cbf3a26fca1d74a">
+  <source>position</source>
+</trans-unit>
+<trans-unit id="sb9874d345b5e590a">
+  <source>tag duplicated</source>
+</trans-unit>
+<trans-unit id="s5191b91c637d7da1">
+  <source>special characters not allowed</source>
+</trans-unit>
 </body>
 </file>
 </xliff>