@operato/input 2.0.0-alpha.13 → 2.0.0-alpha.134

package/package.json

@@ -2,7 +2,7 @@
   "name": "@operato/input",
   "description": "Webcomponents for input following open-wc recommendations",
   "author": "heartyoh@hatiolab.com",
-  "version": "2.0.0-alpha.13",
+  "version": "2.0.0-alpha.134",
   "main": "dist/src/index.js",
   "module": "dist/src/index.js",
   "license": "MIT",
@@ -46,6 +46,7 @@
     "./ox-input-search.js": "./dist/src/ox-input-search.js",
     "./ox-input-value-map.js": "./dist/src/ox-input-value-map.js",
     "./ox-input-value-ranges.js": "./dist/src/ox-input-value-ranges.js",
+    "./ox-input-i18n-label.js": "./dist/src/ox-input-i18n-label.js",
     "./ox-input-partition-keys.js": "./dist/src/ox-input-partition-keys.js",
     "./ox-input-table.js": "./dist/src/ox-input-table.js",
     "./ox-input-scene-component-id.js": "./dist/src/ox-input-scene-component-id.js",
@@ -143,6 +144,9 @@
       "./ox-input-value-ranges.js": [
         "./dist/src/ox-input-value-ranges.d.ts"
       ],
+      "./ox-input-i18n-label.js": [
+        "./dist/src/ox-input-i18n-label.d.ts"
+      ],
       "./ox-input-partition-keys.js": [
         "./dist/src/ox-input-partition-keys.d.ts"
       ],
@@ -189,39 +193,39 @@
     "@codemirror/state": "^6.3.3",
     "@codemirror/theme-one-dark": "^6.1.2",
     "@codemirror/view": "^6.22.1",
-    "@lit/localize": "^0.11.2",
-    "@material/mwc-icon": "^0.27.0",
-    "@operato/color-picker": "^2.0.0-alpha.0",
-    "@operato/i18n": "^2.0.0-alpha.0",
-    "@operato/popup": "^2.0.0-alpha.9",
-    "@operato/styles": "^2.0.0-alpha.0",
-    "@operato/utils": "^2.0.0-alpha.8",
+    "@lit/localize": "^0.12.1",
+    "@material/web": "^1.4.0",
+    "@operato/color-picker": "^2.0.0-alpha.111",
+    "@operato/i18n": "^2.0.0-alpha.111",
+    "@operato/popup": "^2.0.0-alpha.134",
+    "@operato/styles": "^2.0.0-alpha.134",
+    "@operato/utils": "^2.0.0-alpha.122",
     "@polymer/paper-dropdown-menu": "^3.2.0",
     "@polymer/paper-item": "^3.0.1",
     "@thebespokepixel/es-tinycolor": "^3.1.0",
     "@types/codemirror": "^5.60.5",
     "@undecaf/zbar-wasm": "^0.10.1",
     "codemirror": "^6.0.1",
-    "lit": "^2.5.0",
+    "lit": "^3.1.2",
     "lodash-es": "^4.17.21"
   },
   "devDependencies": {
-    "@custom-elements-manifest/analyzer": "^0.8.1",
+    "@custom-elements-manifest/analyzer": "^0.9.2",
     "@hatiolab/prettier-config": "^1.0.0",
-    "@lit/localize-tools": "^0.6.3",
-    "@open-wc/eslint-config": "^10.0.0",
+    "@lit/localize-tools": "^0.7.2",
+    "@open-wc/eslint-config": "^12.0.3",
     "@open-wc/testing": "^3.1.6",
-    "@typescript-eslint/eslint-plugin": "^5.59.1",
-    "@typescript-eslint/parser": "^5.59.1",
+    "@typescript-eslint/eslint-plugin": "^7.0.1",
+    "@typescript-eslint/parser": "^7.0.1",
     "@web/dev-server": "^0.3.0",
-    "@web/dev-server-storybook": "^0.7.4",
-    "@web/test-runner": "^0.17.0",
+    "@web/dev-server-storybook": "^2.0.1",
+    "@web/test-runner": "^0.18.0",
     "concurrently": "^8.0.1",
     "eslint": "^8.39.0",
-    "eslint-config-prettier": "^8.3.0",
-    "husky": "^8.0.1",
-    "lint-staged": "^13.2.2",
-    "prettier": "^2.4.1",
+    "eslint-config-prettier": "^9.1.0",
+    "husky": "^9.0.11",
+    "lint-staged": "^15.2.2",
+    "prettier": "^3.2.5",
     "tslib": "^2.3.1",
     "typescript": "^5.0.4"
   },
@@ -239,5 +243,5 @@
       "prettier --write"
     ]
   },
-  "gitHead": "112ec6a672e96837e01ffe55048f543fffa19e02"
+  "gitHead": "25c5412eb62e6feb4fc0dcc8edca55b0025810bc"
 }

package/src/ox-checkbox.ts

@@ -15,12 +15,10 @@ import { OxFormField } from './ox-form-field'
 export class OxCheckbox extends OxFormField {
   static styles = [
     css`
-      :host {
-        display: flex;
-      }
-
       div {
         display: flex;
+        gap: var(--input-intra-gap, 7px);
+
         align-items: center;
         cursor: pointer;
       }
@@ -65,7 +63,6 @@ export class OxCheckbox extends OxFormField {
       }
 
       [label] {
-        margin: var(--ox-checkbox-label-margin, 0 0 0 7px);
         color: var(--ox-checkbox-label-color, #3a5877);
       }
 
@@ -78,16 +75,22 @@ export class OxCheckbox extends OxFormField {
   @property({ type: Boolean, attribute: 'checked', reflect: true }) checked: boolean | undefined = false
   @property({ type: Boolean, attribute: 'indeterminatable' }) indeterminatable: boolean = false
   @property({ type: Boolean, attribute: 'indeterminate', reflect: true }) indeterminate: boolean = false
+  @property({ type: Boolean, attribute: 'left-label' }) left: boolean = false
 
   @state() _hasInner: boolean = !!this.innerHTML.trim().length
 
   render() {
     return html`
       <div @click=${this.onClick} ?disabled=${this.disabled}>
+        ${this._hasInner && this.left
+          ? html` <span label>
+              <slot></slot>
+            </span>`
+          : ''}
         <a href="#" @click=${(e: Event) => e.preventDefault()} checkbox>
           ${this.indeterminate ? this.indeterminateIcon : this.checked ? this.checkedIcon : this.uncheckedIcon}
         </a>
-        ${this._hasInner
+        ${this._hasInner && !this.left
           ? html` <span label>
               <slot></slot>
             </span>`

package/src/ox-input-barcode.ts

@@ -60,13 +60,13 @@ export class OxInputBarcode extends OxFormField {
 
       input {
         flex: 1;
-        width: 10px; /* intentionally width set */
         border: 0;
         border-bottom: var(--border-dark-color);
         padding: var(--input-padding);
         padding-right: 35px;
         font: var(--input-font);
         color: var(--primary-text-color);
+        background-color: inherit;
       }
       input:focus {
         outline: none;
@@ -225,12 +225,12 @@ export class OxInputBarcode extends OxFormField {
       this.popup = OxPopup.open({
         template: html`
           <video></video>
-          <mwc-icon
+          <md-icon
             style="position: fixed; right: 0; top: 0; color: red; tabindex: 0"
             @click=${() => {
               this.stopScan()
             }}
-            >close</mwc-icon
+            >close</md-icon
           >
         `,
         width: '100vw',

package/src/ox-input-code.ts

@@ -5,8 +5,9 @@
 import { css, PropertyValues } from 'lit'
 import { customElement, property } from 'lit/decorators.js'
 
+import { minimalSetup } from 'codemirror'
 import { history, historyKeymap, indentWithTab } from '@codemirror/commands'
-import { EditorView, highlightActiveLine, keymap } from '@codemirror/view'
+import { EditorView, highlightActiveLine, keymap, lineNumbers } from '@codemirror/view'
 import { autocompletion, closeBrackets } from '@codemirror/autocomplete'
 import { bracketMatching, LanguageSupport, syntaxHighlighting } from '@codemirror/language'
 import { oneDarkHighlightStyle, oneDark } from '@codemirror/theme-one-dark'
@@ -25,7 +26,7 @@ WEB Component for code-mirror code editor.
 
 Example:
 
-  <ox-input-code .value=${text} tab-size="4" tab-as-space="true" language="javascript">
+  <ox-input-code .value=${text} language="javascript" show-line-numbers>
   </ox-input-code>
 */
 @customElement('ox-input-code')
@@ -51,8 +52,7 @@ export class OxInputCode extends OxFormField {
    * `value`는 에디터에서 작성중인 contents이다.
    */
   @property({ type: String }) value: string = ''
-  @property({ type: Number, attribute: 'tab-size' }) tabSize: number = 2
-  @property({ type: Boolean, attribute: 'tab-as-space' }) tabAsSpace: boolean = true
+  @property({ type: Boolean, attribute: 'show-line-numbers' }) showLineNumbers: boolean = false
   @property({ type: String }) language?: string = 'javascript'
 
   private _self_changing: boolean = false
@@ -88,7 +88,9 @@ export class OxInputCode extends OxFormField {
       this._editor = new EditorView({
         doc: this.value,
         extensions: [
+          minimalSetup,
           ...language,
+          ...(this.showLineNumbers ? [lineNumbers()] : []),
           bracketMatching(),
           closeBrackets(),
           history(),
@@ -129,15 +131,6 @@ export class OxInputCode extends OxFormField {
       this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true, detail: this.value }))
     })
 
-    // this._editor.contentDOM.addEventListener('change', async e => {
-    //   this._self_changing = true
-    //   this._changed = true
-
-    //   await this.updateComplete
-
-    //   this._self_changing = false
-    // })
-
     return this._editor
   }
 }

package/src/ox-input-container.ts

@@ -2,7 +2,7 @@
  * @license Copyright © HatioLab Inc. All rights reserved.
  */
 
-import '@material/mwc-icon'
+import '@material/web/icon/icon.js'
 import '@operato/popup/ox-popup-list.js'
 
 import { css, html, LitElement } from 'lit'
@@ -17,7 +17,7 @@ export class OxInputContainer extends LitElement {
   render() {
     return html`
       <slot> </slot>
-      <mwc-icon @click=${this.openPopupList.bind(this)}>menu</mwc-icon>
+      <md-icon @click=${this.openPopupList.bind(this)}>menu</md-icon>
 
       <ox-popup-list></ox-popup-list>
     `

package/src/ox-input-crontab.ts

@@ -2,8 +2,6 @@
  * @license Copyright © HatioLab Inc. All rights reserved.
  */
 
-import '@material/mwc-button'
-
 import { css, html, PropertyValues } from 'lit'
 import { customElement, property, state } from 'lit/decorators.js'
 
@@ -211,14 +209,12 @@ export class OxInputCrontab extends OxFormField {
       margin: -0.25rem;
     }
 
-    mwc-button {
-      background-color: var(--secondary-color);
+    button {
       border-radius: var(--button-border-radius);
-      --mdc-theme-primary: #fff;
       margin: 0.25rem;
     }
-    mwc-button:hover,
-    mwc-button:active {
+    button:hover,
+    button:active {
       background-color: var(--primary-color);
     }
   `
@@ -399,7 +395,7 @@ export class OxInputCrontab extends OxFormField {
   }
 
   get focusableElements(): HTMLElement[] {
-    return Array.from(this.renderRoot.querySelectorAll('select, input, mwc-button'))
+    return Array.from(this.renderRoot.querySelectorAll('select, input, button'))
   }
 
   firstUpdated() {

package/src/ox-input-data.ts

@@ -4,12 +4,13 @@
 
 import './ox-input-code'
 
-import { css, html, PropertyValues } from 'lit'
-import { customElement, state } from 'lit/decorators.js'
+import { css, html } from 'lit'
+import { customElement } from 'lit/decorators.js'
 import { live } from 'lit/directives/live.js'
 
 import { OxFormField } from './ox-form-field.js'
 import { OxInputCode } from './ox-input-code.js'
+import { isEqual } from 'lodash-es'
 
 /**
 WEB Component for code-mirror based data editor.
@@ -37,7 +38,7 @@ export class OxInputData extends OxFormField {
         font-size: small;
       }
 
-      div[datatype] mwc-icon {
+      div[datatype] md-icon {
         margin-left: auto;
       }
 
@@ -87,10 +88,19 @@ export class OxInputData extends OxFormField {
         />
         <label for="object">object</label>
 
-        <mwc-icon @click=${() => this._clearData()} title="delete">delete_forever</mwc-icon>
+        <md-icon @click=${() => this._clearData()} title="delete">delete_forever</md-icon>
       </div>
 
-      <ox-input-code .value=${this._getStringData(this.value)} language="javascript" editor ?disabled=${this.disabled}>
+      <ox-input-code
+        .value=${this._getStringData(this.value)}
+        language="text"
+        editor
+        ?disabled=${this.disabled}
+        @change=${(e: CustomEvent) => {
+          e.stopPropagation()
+          this._setDataTypeAndValue(valueType, (e.target as any).value)
+        }}
+      >
       </ox-input-code>
     `
   }
@@ -109,29 +119,63 @@ export class OxInputData extends OxFormField {
     })
   }
 
+  _setDataTypeAndValue(type: string | undefined | null, value: any) {
+    /* value must be a string */
+    try {
+      switch (type) {
+        case 'number':
+          if (!isNaN(Number(value))) {
+            value = Number(value)
+          }
+          break
+        case 'object':
+          value = eval('(' + value + ')')
+          break
+      }
+    } catch (e) {}
+
+    if (isEqual(this.value, value)) {
+      return
+    }
+
+    this.value = value
+
+    this.requestUpdate()
+    this._onAfterValueChange()
+  }
+
   _setDataType(type: string | undefined | null) {
-    if (typeof this.value !== type) {
-      var value = this.value
-
-      try {
-        switch (type) {
-          case 'string':
-            this.value = this._getStringData(value)
-            break
-          case 'number':
-            if (!isNaN(value)) {
-              this.value = Number(value)
-            }
-            break
-          case 'object':
-            this.value = eval('(' + value + ')')
-            break
-        }
-      } catch (e) {
-        console.log(e)
+    if (typeof this.value == type) {
+      return
+    }
+
+    var value = this.value
+
+    try {
+      switch (type) {
+        case 'string':
+          value = this._getStringData(value)
+          break
+        case 'number':
+          if (!isNaN(value)) {
+            value = Number(value)
+          }
+          break
+        case 'object':
+          value = eval('(' + value + ')')
+          break
       }
+    } catch (e) {
+      console.log(e)
     }
 
+    if (isEqual(this.value, value)) {
+      this.requestUpdate()
+      return
+    }
+
+    this.value = value
+
     this.requestUpdate()
     this._onAfterValueChange()
   }

package/src/ox-input-duration.ts

@@ -2,8 +2,6 @@
  * @license Copyright © HatioLab Inc. All rights reserved.
  */
 
-import '@material/mwc-button'
-
 import { css, html } from 'lit'
 import { customElement, property, query } from 'lit/decorators.js'
 
@@ -28,9 +26,14 @@ export class OxInputDuration extends OxFormField {
     }
 
     form {
-      width: 100%;
-      height: 100%;
-      justify-content: center;
+      display: flex;
+      flex-direction: row;
+
+      align-items: center;
+    }
+
+    [padding] {
+      min-width: 100px;
     }
 
     input {
@@ -65,18 +68,16 @@ export class OxInputDuration extends OxFormField {
       border: var(--button-border);
       border-radius: var(--border-radius);
       background-color: var(--button-background-color);
-      padding: var(--padding-narrow) var(--padding-default);
       min-height: 35px;
       line-height: 0.8;
       color: var(--button-color);
       cursor: pointer;
     }
+
     button + button {
       margin-left: -5px;
     }
-    button mwc-icon {
-      font-size: var(--fontsize-default);
-    }
+
     button:focus,
     button:hover,
     button:active {
@@ -100,6 +101,7 @@ export class OxInputDuration extends OxFormField {
 
     return html`
       <form @change=${this.onChange.bind(this)}>
+        <div padding></div>
         <input id="days" type="number" .value=${String(days || 0)} pattern="\\d*" ?disabled=${this.disabled} />
         <label for="days">${i18next.t('label.days')}</label>
 
@@ -148,8 +150,9 @@ export class OxInputDuration extends OxFormField {
           }}
           ?disabled=${this.disabled}
         >
-          <mwc-icon>backspace</mwc-icon>
+          <md-icon>backspace</md-icon>
         </button>
+        <div padding></div>
       </form>
     `
   }

package/src/ox-input-file.ts

@@ -2,7 +2,7 @@
  * @license Copyright © HatioLab Inc. All rights reserved.
  */
 
-import '@material/mwc-icon'
+import '@material/web/icon/icon.js'
 
 import { css, html, PropertyValues } from 'lit'
 import { customElement, property, query } from 'lit/decorators.js'
@@ -32,9 +32,10 @@ export class OxInputFile extends OxFormField {
         font: var(--file-uploader-font) !important;
         color: var(--file-uploader-color);
       }
-      :host > mwc-icon {
+
+      :host > md-icon {
         color: var(--file-uploader-icon-color);
-        --mdc-icon-size: var(--file-uploader-icon-size, 36px);
+        --md-icon-size: var(--file-uploader-icon-size, 36px);
       }
 
       :host(.candrop) {
@@ -75,14 +76,14 @@ export class OxInputFile extends OxFormField {
         border-bottom: var(--file-uploader-li-border-bottom);
         font: normal 14px var(--theme-font);
       }
-      li mwc-icon {
+      li md-icon {
         float: right;
         cursor: pointer;
         margin: var(--file-uploader-li-icon-margin);
         font-size: 1em;
       }
-      li mwc-icon:hover,
-      li mwc-icon:active {
+      li md-icon:hover,
+      li md-icon:active {
         color: var(--file-uploader-li-icon-focus-color);
       }
     `
@@ -104,7 +105,7 @@ export class OxInputFile extends OxFormField {
     var files: File[] = this.value || []
 
     return html`
-      <mwc-icon>${this.icon || 'upload'}</mwc-icon>
+      <md-icon>${this.icon || 'upload'}</md-icon>
 
       <span>${this.description || 'drop files here!'}</span>
 
@@ -127,7 +128,7 @@ export class OxInputFile extends OxFormField {
               file => html`
                 <li>
                   - ${file.name}
-                  <mwc-icon
+                  <md-icon
                     @click=${(e: Event) => {
                       if (this.disabled) {
                         return
@@ -136,7 +137,7 @@ export class OxInputFile extends OxFormField {
                       this.value = [...files]
                       this._notifyChange()
                     }}
-                    >delete_outline</mwc-icon
+                    >delete_outline</md-icon
                   >
                 </li>
               `

package/src/ox-input-i18n-label.ts

@@ -0,0 +1,140 @@
+/**
+ * @license Copyright © HatioLab Inc. All rights reserved.
+ */
+
+import '@material/web/icon/icon.js'
+
+import { css, html } from 'lit'
+import { customElement, property, queryAll } from 'lit/decorators.js'
+
+import { OxFormField } from './ox-form-field'
+
+type I18nLabel = { [code: string]: string }
+
+const LANGUAGES = [
+  {
+    code: 'en',
+    display: 'English'
+  }
+]
+
+/**
+ input component for i18n labels
+ 
+ Example:
+ 
+   <ox-input-i18n-label 
+     value=${map}
+     languages=${languages}
+   </ox-input-i18n-label>
+ */
+@customElement('ox-input-i18n-label')
+export class OxInputI18nLabels extends OxFormField {
+  static styles = css`
+    :host {
+      display: flex;
+      flex-direction: column;
+      overflow: hidden;
+      gap: 10px;
+    }
+
+    [data-record] {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      gap: 10px;
+    }
+
+    label {
+      width: 80px;
+      text-align: end;
+    }
+
+    input {
+      flex: 1;
+      border: 0;
+      border-bottom: var(--border-dark-color);
+      padding: var(--input-padding);
+      font: var(--input-font);
+      color: var(--primary-text-color);
+      min-width: 100px;
+    }
+
+    input:focus {
+      outline: none;
+      border-bottom: 1px solid var(--primary-color);
+    }
+
+    input[type='hidden'] {
+      flex: 0;
+    }
+  `
+
+  @property({ type: Object }) value: I18nLabel = {}
+  @property({ type: Array }) languages: { display: string; code: string }[] = LANGUAGES
+
+  @queryAll('[data-record]') records!: NodeListOf<HTMLElement>
+
+  private changing: boolean = false
+
+  firstUpdated() {
+    this.renderRoot.addEventListener('change', this.onChange.bind(this))
+  }
+
+  render() {
+    const value = !this.value || typeof this.value !== 'object' ? {} : this.value
+    const languages = (this.languages && this.languages.length > 0 && this.languages) || LANGUAGES
+
+    return html`
+      ${languages.map(
+        ({ display, code }) => html`
+          <div data-record>
+            <label>${display}</label>
+            <input type="hidden" data-code value=${code} />
+            <input
+              type="text"
+              data-label
+              placeholder="label"
+              .value=${value?.[code] || ''}
+              ?disabled=${this.disabled}
+            />
+          </div>
+        `
+      )}
+    `
+  }
+
+  private onChange(e: Event) {
+    e.stopPropagation()
+
+    if (this.changing) {
+      return
+    }
+
+    this.changing = true
+
+    this.build()
+
+    this.changing = false
+  }
+
+  private build() {
+    var records = this.renderRoot.querySelectorAll('[data-record]') as NodeListOf<HTMLElement>
+
+    var newmap: I18nLabel = {}
+
+    for (var i = 0; i < records.length; i++) {
+      var record = records[i]
+
+      const code = (record.querySelector('[data-code]') as HTMLInputElement).value
+      const label = (record.querySelector('[data-label]') as HTMLInputElement).value
+
+      if (code) {
+        newmap[code] = label || ''
+      }
+    }
+
+    this.value = { ...this.value, ...newmap }
+    this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true, detail: this.value }))
+  }
+}