@operato/input 1.11.13 → 1.12.3

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

@@ -58,9 +58,9 @@ export class OxInput3Axis extends OxFormField {
   render() {
     const { x, y, z } = this.value
     return html`
-      <input type="number" id="x" placeholder="X" .value=${String(x)} />
-      <input type="number" id="y" placeholder="Y" .value=${String(y)} />
-      <input type="number" id="z" placeholder="Z" .value=${String(z)} />
+      <input type="number" id="x" placeholder="X" .value=${String(x)} ?disabled=${this.disabled} />
+      <input type="number" id="y" placeholder="Y" .value=${String(y)} ?disabled=${this.disabled} />
+      <input type="number" id="z" placeholder="Z" .value=${String(z)} ?disabled=${this.disabled} />
     `
   }
 }

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

@@ -183,24 +183,24 @@ export class OxInput3Dish extends OxFormField {
       <span>${msg('z-axes')}</span>
 
       <label>${msg('dimension')}</label>
-      <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)} />
+      <input type="number" id="dwidth" .value=${String(this.dimension?.width)} ?disabled=${this.disabled} />
+      <input type="number" id="dheight" .value=${String(this.dimension?.height)} ?disabled=${this.disabled} />
+      <input type="number" id="ddepth" .value=${String(this.dimension?.depth)} ?disabled=${this.disabled} />
 
       <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)} />
+      <input type="number" id="tx" .value=${String(this.position?.x)} ?disabled=${this.disabled} />
+      <input type="number" id="ty" .value=${String(this.position?.y)} ?disabled=${this.disabled} />
+      <input type="number" id="tz" .value=${String(this.position?.z)} ?disabled=${this.disabled} />
 
       <label>${msg('scale')}</label>
-      <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)} />
+      <input type="number" id="sx" .value=${String(this.scale?.x)} ?disabled=${this.disabled} />
+      <input type="number" id="sy" .value=${String(this.scale?.y)} ?disabled=${this.disabled} />
+      <input type="number" id="sz" .value=${String(this.scale?.z)} ?disabled=${this.disabled} />
 
       <label>${msg('rotate')}</label>
-      <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>
+      <ox-input-angle id="rx" .value=${String(this.rotate?.x)} ?disabled=${this.disabled}></ox-input-angle>
+      <ox-input-angle id="ry" .value=${String(this.rotate?.y)} ?disabled=${this.disabled}></ox-input-angle>
+      <ox-input-angle id="rz" .value=${String(this.rotate?.z)} ?disabled=${this.disabled}></ox-input-angle>
     `
   }
 }

package/src/ox-input-angle.ts

@@ -39,6 +39,7 @@ export class OxInputAngle extends OxFormField {
         .value=${String(this._toDegree(this.value))}
         .placeholder=${this.placeholder || '0°'}
         @change=${(e: Event) => this._onChangeValue(e)}
+        ?disabled=${this.disabled}
       />
     `
   }

package/src/ox-input-barcode.ts

@@ -133,6 +133,7 @@ export class OxInputBarcode extends OxFormField {
         .value=${this.value || ''}
         @change=${(e: Event) => this.onInputChange(e)}
         @keydown=${(e: KeyboardEvent) => this.onInputKeyDown(e)}
+        ?disabled=${this.disabled}
       />
       <button
         ?hidden=${!this.scannable}
@@ -140,6 +141,7 @@ export class OxInputBarcode extends OxFormField {
         @click=${(e: MouseEvent) => {
           this.scan(e)
         }}
+        ?disabled=${this.disabled}
       ></button>
 
       <ox-popup

package/src/ox-input-color-gradient.ts

@@ -255,13 +255,13 @@ export class OxInputColorGradient extends OxFormField {
 
     return html`
       <label> <ox-i18n msgid="label.type">type</ox-i18n> </label>
-      <select value-key="type" .value=${value.type || 'linear'}>
+      <select value-key="type" .value=${value.type || 'linear'} ?disabled=${this.disabled}>
         <option>linear</option>
         <option>radial</option>
       </select>
 
       <label class="icon-only-label color"></label>
-      <ox-input-angle value-key="rotation" .value=${value.rotation || 0}> </ox-input-angle>
+      <ox-input-angle value-key="rotation" .value=${value.rotation || 0} ?disabled=${this.disabled}> </ox-input-angle>
 
       <label> <ox-i18n msgid="label.direction">direction</ox-i18n> </label>
       <div editors>
@@ -304,7 +304,13 @@ export class OxInputColorGradient extends OxFormField {
         </paper-dropdown-menu>
       </div>
 
-      <ox-input-color-stops value-key="colorStops" type="gradient" .value=${value.colorStops}> </ox-input-color-stops>
+      <ox-input-color-stops
+        value-key="colorStops"
+        type="gradient"
+        .value=${value.colorStops}
+        ?disabled=${this.disabled}
+      >
+      </ox-input-color-stops>
     `
   }
 

package/src/ox-input-color-stops.ts

@@ -237,6 +237,7 @@ export class OxInputColorStops extends OxFormField {
         id="color-editor"
         .value=${this.focused && this.focused.color}
         @change=${(e: Event) => this._onChangeSubComponent(e)}
+        ?disabled=${this.disabled}
       >
       </ox-input-color>
 
@@ -247,6 +248,7 @@ export class OxInputColorStops extends OxFormField {
         .value=${this.focused && this.focused.position}
         @change=${(e: Event) => this._onChangeSubComponent(e)}
         step="0.01"
+        ?disabled=${this.disabled}
       />
     `
   }
@@ -384,6 +386,10 @@ export class OxInputColorStops extends OxFormField {
   }
 
   _onDblClickColorbar(e: MouseEvent) {
+    if (this.disabled) {
+      return
+    }
+
     /* 마커를 클릭한 경우를 걸러낸다. */
     if (e.target !== this.colorbar) return
 
@@ -409,10 +415,18 @@ export class OxInputColorStops extends OxFormField {
   }
 
   _onDblClickMarkers(e: MouseEvent) {
+    if (this.disabled) {
+      return
+    }
+
     this.colorEditor.showPicker()
   }
 
   _onMouseDown(e: MouseEvent) {
+    if (this.disabled) {
+      return
+    }
+
     var marker = e.target as HTMLElement
     var index = marker.getAttribute('marker-index')
 
@@ -422,6 +436,10 @@ export class OxInputColorStops extends OxFormField {
   private dragstart: { position: number; x: number; y: number } = { position: 0, x: 0, y: 0 }
 
   _onDragStart(e: DragEvent) {
+    if (this.disabled) {
+      return
+    }
+
     /* drag 시에 ghost image를 보이지 않게 하려고 함 */
     e.dataTransfer?.setDragImage(this._dragImage!, 0, 0)
 
@@ -446,6 +464,10 @@ export class OxInputColorStops extends OxFormField {
   }
 
   _onDrag(e: DragEvent) {
+    if (this.disabled) {
+      return
+    }
+
     if (e.clientX <= 0) {
       return
     }
@@ -464,6 +486,10 @@ export class OxInputColorStops extends OxFormField {
   }
 
   _onDragEnd(e: DragEvent) {
+    if (this.disabled) {
+      return
+    }
+
     if (e.clientY - this.dragstart.y > 40) {
       this.value!.splice(this.focused.index, 1)
       this.value = this.value!.slice()

package/src/ox-input-color.ts

@@ -232,6 +232,7 @@ export class OxInputColor extends OxFormField {
         .value=${this.value || ''}
         @change=${(e: Event) => this._onInputChanged(e)}
         .placeholder=${this.getAttribute('placeholder') || ''}
+        ?disabled=${this.disabled}
       />
 
       <a @click=${(e: MouseEvent) => this.showPicker()}>
@@ -268,6 +269,10 @@ export class OxInputColor extends OxFormField {
    * 외부에서 호출 가능한 메쏘드임.
    */
   showPicker() {
+    if (this.disabled) {
+      return
+    }
+
     var { withoutAlpha } = this.properties || {}
 
     var color = tinycolor(this.value, {})

package/src/ox-input-container.ts

@@ -12,13 +12,6 @@ import { OxPopupList } from '@operato/popup'
 
 @customElement('ox-input-container')
 export class OxInputContainer extends LitElement {
-  static styles = [
-    css`
-      :host {
-      }
-    `
-  ]
-
   @query('ox-popup-list') popupList!: OxPopupList
 
   render() {

package/src/ox-input-data.ts

@@ -57,6 +57,7 @@ export class OxInputData extends OxFormField {
           data-value="string"
           .checked=${typeof this.value == 'string'}
           @click=${() => this._setDataType('string')}
+          ?disabled=${this.disabled}
         />string
 
         <input
@@ -65,6 +66,7 @@ export class OxInputData extends OxFormField {
           data-value="number"
           .checked=${typeof this.value == 'number'}
           @click=${() => this._setDataType('number')}
+          ?disabled=${this.disabled}
         />number
 
         <input
@@ -73,11 +75,13 @@ export class OxInputData extends OxFormField {
           data-value="object"
           .checked=${typeof this.value == 'object'}
           @click=${() => this._setDataType('object')}
+          ?disabled=${this.disabled}
         />object
         <mwc-icon @click=${() => this._clearData()} title="delete">delete_forever</mwc-icon>
       </div>
 
-      <ox-input-code .value=${this._getData(this.value)} language="javascript" editor> </ox-input-code>
+      <ox-input-code .value=${this._getData(this.value)} language="javascript" editor ?disabled=${this.disabled}>
+      </ox-input-code>
     `
   }
 

package/src/ox-input-duration.ts

@@ -100,16 +100,34 @@ export class OxInputDuration extends OxFormField {
 
     return html`
       <form @change=${this.onChange.bind(this)}>
-        <input id="days" type="number" .value=${String(days || 0)} pattern="\\d*" />
+        <input id="days" type="number" .value=${String(days || 0)} pattern="\\d*" ?disabled=${this.disabled} />
         <label for="days">${i18next.t('label.days')}</label>
 
-        <input id="hours" type="number" .value=${String(hours || 0)} pattern="[01]?\\d|2[0-3]" />
+        <input
+          id="hours"
+          type="number"
+          .value=${String(hours || 0)}
+          pattern="[01]?\\d|2[0-3]"
+          ?disabled=${this.disabled}
+        />
         <label for="hour">${i18next.t('label.hours')}</label>
 
-        <input id="minutes" type="number" .value=${String(minutes || 0)} pattern="[0-5]?\\d" />
+        <input
+          id="minutes"
+          type="number"
+          .value=${String(minutes || 0)}
+          pattern="[0-5]?\\d"
+          ?disabled=${this.disabled}
+        />
         <label for="minute">${i18next.t('label.minutes')}</label>
 
-        <input id="seconds" type="number" .value=${String(seconds || 0)} pattern="[0-5]?\\d" />
+        <input
+          id="seconds"
+          type="number"
+          .value=${String(seconds || 0)}
+          pattern="[0-5]?\\d"
+          ?disabled=${this.disabled}
+        />
         <label for="second">${i18next.t('label.seconds')}</label>
 
         <button
@@ -128,6 +146,7 @@ export class OxInputDuration extends OxFormField {
               })
             )
           }}
+          ?disabled=${this.disabled}
         >
           <mwc-icon>backspace</mwc-icon>
         </button>

package/src/ox-input-file.ts

@@ -116,6 +116,7 @@ export class OxInputFile extends OxFormField {
         hidden
         capture="environment"
         @change=${(e: Event) => this._onChangeValue(e)}
+        ?disabled=${this.disabled}
       />
 
       <label for="input-file">${this.label || 'select files'}</label>
@@ -128,6 +129,9 @@ export class OxInputFile extends OxFormField {
                   - ${file.name}
                   <mwc-icon
                     @click=${(e: Event) => {
+                      if (this.disabled) {
+                        return
+                      }
                       files.splice(files.indexOf(file), 1)
                       this.value = [...files]
                       this._notifyChange()
@@ -152,6 +156,10 @@ export class OxInputFile extends OxFormField {
     FileDropHelper.set(this)
 
     this.addEventListener('file-drop', (e: Event) => {
+      if (this.disabled) {
+        return
+      }
+
       const detail = (e as CustomEvent).detail
       this.value = this.multiple ? detail : detail[0] ? [detail[0]] : []
 

package/src/ox-input-hashtags.ts

@@ -17,11 +17,11 @@ export class OxInputHashtags extends OxFormField {
     #editor {
       display: block;
       box-sizing: border-box;
-      --hashtag-padding : 2px 4px;
-      --hashtag-background : rgba(var(--primary-color-rgb),.15);
-      --hashtag-background-hover : rgba(var(--primary-color-rgb),1);
-      --hashtag-closer-padding:0 2px 0 4px;
-      --hashtag-input-padding : 2px;
+      --hashtag-padding: 2px 4px;
+      --hashtag-background: rgba(var(--primary-color-rgb), 0.15);
+      --hashtag-background-hover: rgba(var(--primary-color-rgb), 1);
+      --hashtag-closer-padding: 0 2px 0 4px;
+      --hashtag-input-padding: 2px;
     }
 
     .tags {
@@ -31,25 +31,25 @@ export class OxInputHashtags extends OxFormField {
     .tag {
       border-radius: var(--border-radius);
       background-color: var(--hashtag-background);
-      padding:var(--hashtag-padding);
+      padding: var(--hashtag-padding);
       font: var(--input-font);
       color: var(--primary-text-color);
-      cursor:pointer;
+      cursor: pointer;
     }
 
     .tag:hover {
       background-color: var(--hashtag-background-hover);
       color: var(--theme-white-color) !important;
     }
-    
+
     .closer {
-      opacity:.3;
-      padding:var(--hashtag-closer-padding);
-      text-transform:uppercase;
+      opacity: 0.3;
+      padding: var(--hashtag-closer-padding);
+      text-transform: uppercase;
       color: var(--primary-text-color);
     }
-    .tag:hover .closer{
-      opacity:.9;
+    .tag:hover .closer {
+      opacity: 0.9;
       color: var(--theme-white-color);
     }
 
@@ -61,7 +61,7 @@ export class OxInputHashtags extends OxFormField {
     .input::before {
       display: inline;
       position: relative;
-      opacity:.5;
+      opacity: 0.5;
       top: -1px;
       content: '#';
       vertical-align: middle;
@@ -75,7 +75,7 @@ export class OxInputHashtags extends OxFormField {
       border: 0;
       border-bottom: var(--border-dark-color);
       outline: none;
-      font-weight:bold;
+      font-weight: bold;
     }
 
     input:focus {
@@ -84,7 +84,7 @@ export class OxInputHashtags extends OxFormField {
     }
 
     .error {
-      margin:var(--margin-narrow);
+      margin: var(--margin-narrow);
       color: var(--status-danger-color);
       font: var(--input-font);
       text-align: left;
@@ -106,13 +106,16 @@ export class OxInputHashtags extends OxFormField {
             tag => tag,
             (tag, index) =>
               html`
-                <span class="tag">#${tag} <span @click=${() => this.removeHashtag(index)} class="closer">x</span></span>
+                <span class="tag"
+                  >#${tag}
+                  <span @click=${() => !this.disabled && this.removeHashtag(index)} class="closer">x</span></span
+                >
               `
           )}
         </div>
 
         <div class="input">
-          <input type="text" @keyup=${this.onInputKeyup} placeholder="태그입력" />
+          <input type="text" @keyup=${this.onInputKeyup} placeholder="태그입력" ?disabled=${this.disabled} />
         </div>
       </div>
 

package/src/ox-input-image.ts

@@ -116,6 +116,7 @@ export class OxInputImage extends OxFormField {
             hidden
             capture="environment"
             @change=${(e: Event) => this._onChangeValue(e)}
+            ?disabled=${this.disabled}
           />
           <mwc-icon>upload</mwc-icon>
         </label>

package/src/ox-input-key-values.ts

@@ -4,7 +4,7 @@
 
 import '@material/mwc-icon'
 
-import { css, html } from 'lit'
+import { css, html, nothing } from 'lit'
 import { customElement, property, queryAll } from 'lit/decorators.js'
 
 import { OxFormField } from './ox-form-field'
@@ -97,30 +97,55 @@ export class OxInputKeyValues extends OxFormField {
       ${this._toArray(value).map(
         item => html`
           <div data-record>
-            <input type="text" data-key placeholder="key" .value=${item.key} />
-            <input type="text" data-value placeholder="value" .value=${item.value} list="value-template" />
-            <button class="record-action" @click=${(e: MouseEvent) => this._delete(e)} tabindex="-1">
+            <input type="text" data-key placeholder="key" .value=${item.key} ?disabled=${this.disabled} />
+            <input
+              type="text"
+              data-value
+              placeholder="value"
+              .value=${item.value}
+              list="value-template"
+              ?disabled=${this.disabled}
+            />
+            <button
+              class="record-action"
+              @click=${(e: MouseEvent) => this._delete(e)}
+              tabindex="-1"
+              ?disabled=${this.disabled}
+            >
               <mwc-icon>remove</mwc-icon>
             </button>
-            <button class="record-action" @click=${(e: MouseEvent) => this._up(e)} tabindex="-1">
+            <button
+              class="record-action"
+              @click=${(e: MouseEvent) => this._up(e)}
+              tabindex="-1"
+              ?disabled=${this.disabled}
+            >
               <mwc-icon>arrow_upward</mwc-icon>
             </button>
-            <button class="record-action" @click=${(e: MouseEvent) => this._down(e)} tabindex="-1">
+            <button
+              class="record-action"
+              @click=${(e: MouseEvent) => this._down(e)}
+              tabindex="-1"
+              ?disabled=${this.disabled}
+            >
               <mwc-icon>arrow_downward</mwc-icon>
             </button>
           </div>
         `
       )}
-
-      <div data-record-new>
-        <input type="text" data-key placeholder="key" value="" />
-        <input type="text" data-value placeholder="value" value="" list="value-template" />
-        <button class="record-action" @click=${(e: MouseEvent) => this._add()} tabindex="-1">
-          <mwc-icon>add</mwc-icon>
-        </button>
-        <button class="hidden"><mwc-icon>add</mwc-icon></button>
-        <button class="hidden"><mwc-icon>add</mwc-icon></button>
-      </div>
+      ${this.disabled
+        ? nothing
+        : html`
+            <div data-record-new>
+              <input type="text" data-key placeholder="key" value="" />
+              <input type="text" data-value placeholder="value" value="" list="value-template" />
+              <button class="record-action" @click=${(e: MouseEvent) => this._add()} tabindex="-1">
+                <mwc-icon>add</mwc-icon>
+              </button>
+              <button class="hidden"><mwc-icon>add</mwc-icon></button>
+              <button class="hidden"><mwc-icon>add</mwc-icon></button>
+            </div>
+          `}
 
       <datalist id="value-template">
         ${options.map(({ display, value }) => html` <option value="${value}">${display}</option> `)}

package/src/ox-input-mass-fraction.ts

@@ -6,7 +6,7 @@ import '@material/mwc-icon'
 import '@operato/popup/ox-popup-list.js'
 import './ox-select.js'
 
-import { css, html } from 'lit'
+import { css, html, nothing } from 'lit'
 import { customElement, property, queryAll } from 'lit/decorators.js'
 import { live } from 'lit/directives/live.js'
 
@@ -166,15 +166,21 @@ export class OxInputMassFraction extends OxFormField {
                     step="0.01"
                     .value=${String(item.value)}
                     list="value-template"
+                    ?disabled=${this.disabled}
                   />
-                  <button class="record-action" @click=${(e: MouseEvent) => this._delete(e)} tabindex="-1">
+                  <button
+                    class="record-action"
+                    @click=${(e: MouseEvent) => this._delete(e)}
+                    tabindex="-1"
+                    ?disabled=${this.disabled}
+                  >
                     <mwc-icon>remove</mwc-icon>
                   </button>
                   <button
                     class="record-action"
                     @click=${(e: MouseEvent) => this._up(e)}
                     tabindex="-1"
-                    ?disabled=${idx === 0}
+                    ?disabled=${this.disabled || idx === 0}
                   >
                     <mwc-icon>arrow_upward</mwc-icon>
                   </button>
@@ -182,7 +188,7 @@ export class OxInputMassFraction extends OxFormField {
                     class="record-action"
                     @click=${(e: MouseEvent) => this._down(e)}
                     tabindex="-1"
-                    ?disabled=${idx === arrayed.length - 1}
+                    ?disabled=${this.disabled || idx === arrayed.length - 1}
                   >
                     <mwc-icon>arrow_downward</mwc-icon>
                   </button>
@@ -192,49 +198,53 @@ export class OxInputMassFraction extends OxFormField {
           : html`<div nofraction>No Fractions</div>`}
       </div>
 
-      <div data-record-new>
-        <ox-select
-          data-key
-          placeholder="Fluid"
-          .value=${live('')}
-          @change=${(e: Event) => {
-            e.stopPropagation()
-          }}
-        >
-          <ox-popup-list with-search> ${this.options} </ox-popup-list>
-        </ox-select>
-
-        <input
-          type="number"
-          data-value
-          placeholder="proportion"
-          min="0"
-          max="1"
-          step="0.01"
-          value=""
-          list="value-template"
-        />
-        <button class="record-action" @click=${(e: MouseEvent) => this._add()} tabindex="-1">
-          <mwc-icon>add</mwc-icon>
-        </button>
-        <button
-          title="fill with the values suggested"
-          @click=${() => {
-            this.value = { ...this.defaultValue }
-            this.dispatchChangeEvent()
-          }}
-        >
-          <mwc-icon>settings_suggest</mwc-icon>
-        </button>
-        <button
-          title="normalize fraction"
-          @click=${() => {
-            this._normalize()
-          }}
-        >
-          <mwc-icon>repartition</mwc-icon>
-        </button>
-      </div>
+      ${this.disabled
+        ? nothing
+        : html`
+            <div data-record-new>
+              <ox-select
+                data-key
+                placeholder="Fluid"
+                .value=${live('')}
+                @change=${(e: Event) => {
+                  e.stopPropagation()
+                }}
+              >
+                <ox-popup-list with-search> ${this.options} </ox-popup-list>
+              </ox-select>
+
+              <input
+                type="number"
+                data-value
+                placeholder="proportion"
+                min="0"
+                max="1"
+                step="0.01"
+                value=""
+                list="value-template"
+              />
+              <button class="record-action" @click=${(e: MouseEvent) => this._add()} tabindex="-1">
+                <mwc-icon>add</mwc-icon>
+              </button>
+              <button
+                title="fill with the values suggested"
+                @click=${() => {
+                  this.value = { ...this.defaultValue }
+                  this.dispatchChangeEvent()
+                }}
+              >
+                <mwc-icon>settings_suggest</mwc-icon>
+              </button>
+              <button
+                title="normalize fraction"
+                @click=${() => {
+                  this._normalize()
+                }}
+              >
+                <mwc-icon>repartition</mwc-icon>
+              </button>
+            </div>
+          `}
     `
   }