@operato/input 1.0.6 → 1.0.20

package/src/ox-input-unit-number.ts

@@ -0,0 +1,310 @@
+/**
+ * @license Copyright © HatioLab Inc. All rights reserved.
+ */
+
+import { css, html, PropertyValues } from 'lit'
+import { customElement, property, query } from 'lit/decorators.js'
+
+import { OxPopupList } from '@operato/popup'
+
+import { OxFormField } from './ox-form-field'
+
+const UNIT_SYSTEMS: { [unit: string]: { [unit: string]: number | ((v: number) => number)[] }  } = {
+  kg: {
+    mg: 1000000,
+    g: 1000,
+    ton: 0.001
+  },
+  rad: {
+    degree: 180 / Math.PI
+  },
+  sec: {
+    msec: 1000,
+    min: 1 / 60,
+    hr: 1 / 3600,
+    day: 1 / (3600 * 24),
+    year: 1 / (3600 * 24 * 365)
+  },
+  m: {
+    mm: 1000,
+    cm: 100,
+    inch: 39.37008
+  },
+  'g/mol': {
+    'kg/kmol': 1,
+    'g/kmol': 1000
+  },
+  m2: {
+    mm2: 1000000,
+    cm2: 1000
+  },
+  m3: {
+    cm3: 1000000,
+    L: 1000,
+    mL: 1000000
+  },
+  'kg/m3': {
+    'g/m3': 1000,
+    'g/L': 1,
+    'g/cm3': 0.001,
+    'kg/L': 0.001,
+    'g/mL': 0.001
+  },
+  'm/sec': {
+    'm/min': 60,
+    'm/hr': 3600,
+    'cm/sec': 100,
+    'cm/min': 6000,
+    'cm/hr': 360000
+  },
+  N: {
+    kN: 0.001,
+    kgf: 0.101971621
+  },
+  Pa: {
+    atm: 1 / 101325,
+    bar: 1 / 100000,
+    'kgf/cm2': 1 / 9.80665 / 10000,
+    MPa: 1 / 1000000,
+    kPa: 1 / 1000,
+    psi: 1 / 6894.76,
+    mmH2O: 1 / 9.80665,
+    mmHg: 1 / 133.32
+  },
+  'kg/sec': {
+    'kg/min': 60,
+    'kg/hr': 3600,
+    'ton/hr': 3.6,
+    'ton/year': (60 * 60 * 24 * 365) / 1000
+  },
+  'kg/m2/sec': {
+    'kg/m2/min': 60,
+    'kg/m2/hr': 3600
+  },
+  'mol/sec': {
+    'kmol/sec': 1 / 1000
+  },
+  'mol/m2/sec': {
+    'kmol/m2/sec': 1 / 1000
+  },
+  'Sm3/sec': {
+    'Sm3/hr': 3600,
+    'Sm3/min': 60,
+    'SL/min': 60000,
+    'SL/sec': 1000,
+    'Scm3/min': 60000000,
+    'Scm3/sec': 1000000
+  },
+  'Nm3/sec': {
+    'Am3/hr': 3600,
+    'Am3/min': 60,
+    'AL/min': 60000,
+    'AL/sec': 1000,
+    'Acm3/min': 60000000,
+    'Acm3/sec': 1000000
+  },
+  J: {
+    kJ: 1 / 1000,
+    MJ: 1 / 1000000,
+    cal: 1 / 4.184,
+    kcal: 1 / 4.184 / 1000
+  },
+  W: {
+    kW: 1 / 1000,
+    MW: 1 / 1000000,
+    'kcal/hr': 859.85 / 1000,
+    hp: 1 / 745.7
+  },
+  'W/m2': {
+    'kW/m2': 1 / 1000,
+    'W/cm2': 1 / 10000,
+    'kW/cm2': 1 / 10000000
+  },
+  'J/kg': {
+    'kJ/kg': 1 / 1000,
+    'cal/g': 1 / 4.184 / 1000,
+    'cal/kg': 1 / 4.184,
+    'kcal/kg': 1 / 4.184 / 1000
+  },
+  'J/kg/K': {
+    'kJ/kg/K': 1 / 1000,
+    'cal/kg/K': 1 / 4.184,
+    'kcal/kg/K': 1 / 4.184 / 1000,
+    'cal/g/K': 1 / 4.184 / 1000
+  },
+  'W/m/K': {
+    'kW/m/K': 1 / 1000,
+    'W/cm/K': 1 / 100,
+    'kW/cm/K': 1 / 100 / 1000
+  },
+  'W/m2/K': {
+    'kW/m2/K': 1 / 1000,
+    'kcal/hr/m2/oC': 1 / 1.163
+  },
+  'N sec/m2': {
+    'Pa sec': 1,
+    'mPa sec': 1000,
+    'kg/m/sec': 1,
+    'g/cm/sec': 10,
+    P: 10,
+    cP: 1000
+  },
+  'm2 oC/W': {
+    'm2 oC/kW': 1000
+  },
+  K: {
+    C: [
+      (v: number) => v - 273.15,
+      (v: number) => v + 273.15
+    ]
+  }
+}
+
+@customElement('ox-input-unit-number')
+export class OxInputUnit extends OxFormField {
+  static styles = [
+    css`
+      input {
+        border: 0;
+        border-bottom: var(--border-dark-color);
+        padding: var(--input-padding);
+        font: var(--input-font);
+        color: var(--primary-text-color);
+      }
+      input:focus {
+        outline: none;
+        border-bottom: 1px solid var(--primary-color);
+      }
+
+      input::-webkit-outer-spin-button,
+      input::-webkit-inner-spin-button {
+        -webkit-appearance: none;
+        margin: 0;
+      }
+
+      input[type='number'] {
+        -moz-appearance: textfield;
+      }
+
+      div {
+        display: inline;
+        position: relative;
+        margin-left: var(--margin-narrow);
+        font: var(--label-font);
+        color: var(--label-color);
+      }
+    `
+  ]
+
+  @property({ type: String }) placeholder?: string
+  @property({ type: String, attribute: 'std-unit' }) stdUnit!: string
+  @property({ type: String, attribute: 'user-unit' }) userUnit?: string
+
+  @query('input') input!: HTMLInputElement
+  @query('ox-popup-list') popup!: OxPopupList
+
+  render() {
+    const userUnit = this.userUnit || this.stdUnit
+    const units = Object.keys(UNIT_SYSTEMS[this.stdUnit])
+    const rate = !this.userUnit || this.userUnit === this.stdUnit ? 1 : UNIT_SYSTEMS[this.stdUnit][this.userUnit] || 1
+
+    return html`
+      <input
+        type="number"
+        .value=${this._toUserUnit(this.value)}
+        placeholder=${this.placeholder}
+        @change=${(e: Event) => this._onChangeValue(e)}
+      />
+      <div
+        @click=${(e: Event) => {
+          const target = e.currentTarget as HTMLElement
+          this.popup.open({
+            right: 0,
+            top: target.clientTop + target.offsetHeight
+          })
+        }}
+      >
+        ${userUnit}
+        <ox-popup-list
+          .value=${userUnit}
+          @select=${(e: CustomEvent) => {
+            this.userUnit = e.detail
+          }}
+        >
+          <div option value=${this.stdUnit}>${this.stdUnit}</div>
+          ${units.map(unit => html`<div option value=${unit}>${unit}</div>`)}
+        </ox-popup-list>
+      </div>
+    `
+  }
+
+  updated(changes: PropertyValues<this>) {
+    if (changes.has('stdUnit')) {
+      this.userUnit = this.stdUnit
+    }
+  }
+
+  _onChangeValue(e: Event) {
+    this.value = this._toStdUnit(this.input.value)
+
+    this.dispatchEvent(
+      new CustomEvent('change', {
+        bubbles: true,
+        composed: true,
+        detail: this.value
+      })
+    )
+  }
+
+  _toUserUnit(stdValue: string | number | undefined) {
+    if(!this.userUnit) {
+      return
+    }
+
+    if(this.userUnit === this.stdUnit) {
+      return Number(stdValue)
+    }
+
+    const converterValue = UNIT_SYSTEMS[this.stdUnit][this.userUnit]
+    
+    if(typeof converterValue === 'number') {
+      return this._toUserUnitByRate(stdValue, converterValue || 1) 
+    } else /* should be converter function array */{
+      return this._toUserUnitByFunction(stdValue, converterValue as ((v: number) => number)[])
+    }
+  }
+
+  _toUserUnitByRate(stdValue: string | number | undefined, converterRate: number) {
+    return Number(stdValue) * converterRate
+  }
+
+  _toUserUnitByFunction(stdValue: string | number | undefined, converterFunctions: ((v: number) => number)[]) {
+    return converterFunctions[0](Number(stdValue))
+  }
+
+  _toStdUnit(userValue: string | number | undefined) {
+    if(!this.userUnit) {
+      return
+    }
+
+    if(this.userUnit === this.stdUnit) {
+      return Number(userValue)
+    }
+
+    const converterValue = UNIT_SYSTEMS[this.stdUnit][this.userUnit]
+    
+    if(typeof converterValue === 'number') {
+      return this._toStdUnitByRate(userValue, converterValue || 1) 
+    } else /* should be converter function array */{
+      return this._toStdUnitByFunction(userValue, converterValue as ((v: number) => number)[])
+    }
+  }
+
+  _toStdUnitByRate(userValue: string | number | undefined, converterRate: number) {
+    return isNaN(Number(userValue)) ? undefined : Number(userValue) / converterRate
+  }
+
+  _toStdUnitByFunction(userValue: string | number | undefined, converterFunctions: ((v: number) => number)[]) {
+    return converterFunctions[1](Number(userValue))
+  }
+}

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

@@ -1,16 +1,45 @@
-import '../src/ox-input-unit.js'
+import '../src/ox-input-unit-number.js'
 
 import { html, TemplateResult } from 'lit'
 
 export default {
-  title: 'ox-input-unit',
-  component: 'ox-input-unit',
+  title: 'ox-input-unit-number',
+  component: 'ox-input-unit-number',
   argTypes: {
     placeholder: { control: 'text' },
     name: { control: 'text' },
     value: { control: 'number' },
-    stdUnit: { control: 'select', options: ['kg', 'rad'] },
-    userUnit: { control: 'select', options: ['mg', 'g', 'ton', 'degree'] }
+    stdUnit: {
+      control: 'select',
+      options: [
+        'kg',
+        'rad',
+        'm',
+        'g/mol',
+        'm2',
+        'm3',
+        'kg/m3',
+        'm/sec',
+        'N',
+        'Pa',
+        'kg/sec',
+        'kg/m2/sec',
+        'mol/sec',
+        'mol/m2/sec',
+        'Sm3/sec',
+        'Nm3/sec',
+        'J',
+        'W',
+        'W/m2',
+        'J/kg',
+        'J/kg/K',
+        'W/m/K',
+        'W/m2/K',
+        'N sec/m2',
+        'm2 oC/W',
+        'K'
+      ]
+    }
   }
 }
 
@@ -25,26 +54,23 @@ interface ArgTypes {
   name?: string
   value?: number
   stdUnit: string
-  userUnit?: string
 }
 
 const Template: Story<ArgTypes> = ({
   placeholder = 'unit',
   name = 'hello',
   value = 0,
-  stdUnit = 'kg',
-  userUnit
+  stdUnit = 'kg'
 }: ArgTypes) => html`
   <link href="/themes/app-theme.css" rel="stylesheet" />
-  <ox-input-unit
+  <ox-input-unit-number
     name=${name}
     placeholder=${placeholder}
     .value=${value}
     std-unit=${stdUnit}
-    user-unit=${userUnit}
     @change=${(e: CustomEvent) => console.log(e.detail)}
   >
-  </ox-input-unit>
+  </ox-input-unit-number>
 `
 
 export const Weight = Template.bind({})
@@ -52,8 +78,7 @@ Weight.args = {
   placeholder: 'weight',
   name: 'weight',
   value: 0,
-  stdUnit: 'kg',
-  userUnit: 'g'
+  stdUnit: 'kg'
 }
 
 export const Angle = Template.bind({})
@@ -61,6 +86,13 @@ Angle.args = {
   placeholder: 'angle',
   name: 'angle',
   value: 0,
-  stdUnit: 'rad',
-  userUnit: 'degree'
+  stdUnit: 'rad'
+}
+
+export const Temperature = Template.bind({})
+Temperature.args = {
+  placeholder: 'temperature',
+  name: 'temperature',
+  value: 0,
+  stdUnit: 'K'
 }

package/dist/src/ox-input-unit.d.ts

@@ -1,17 +0,0 @@
-/**
- * @license Copyright © HatioLab Inc. All rights reserved.
- */
-import { OxPopupList } from '@operato/popup';
-import { OxFormField } from './ox-form-field';
-export declare class OxInputUnit extends OxFormField {
-    static styles: import("lit").CSSResult[];
-    placeholder?: string;
-    stdUnit: string;
-    userUnit?: string;
-    input: HTMLInputElement;
-    popup: OxPopupList;
-    render(): import("lit-html").TemplateResult<1>;
-    _onChangeValue(e: Event): void;
-    _toUserUnit(stdValue: string | number | undefined): number;
-    _toStdUnit(userValue: string | number | undefined): number | undefined;
-}

package/dist/src/ox-input-unit.js

@@ -1,122 +0,0 @@
-/**
- * @license Copyright © HatioLab Inc. All rights reserved.
- */
-import { __decorate } from "tslib";
-import { css, html } from 'lit';
-import { customElement, property, query } from 'lit/decorators.js';
-import { OxFormField } from './ox-form-field';
-const UNIT_SYSTEMS = {
-    kg: {
-        mg: 1000000,
-        g: 1000,
-        ton: 0.001
-    },
-    rad: {
-        degree: 180 / Math.PI
-    }
-};
-let OxInputUnit = class OxInputUnit extends OxFormField {
-    static { this.styles = [
-        css `
-      input {
-        border: 0;
-        border-bottom: var(--border-dark-color);
-        padding: var(--input-padding);
-        font: var(--input-font);
-        color: var(--primary-text-color);
-      }
-      input:focus {
-        outline: none;
-        border-bottom: 1px solid var(--primary-color);
-      }
-
-      input::-webkit-outer-spin-button,
-      input::-webkit-inner-spin-button {
-        -webkit-appearance: none;
-        margin: 0;
-      }
-
-      input[type='number'] {
-        -moz-appearance: textfield;
-      }
-
-      div {
-        display: inline;
-        position: relative;
-        margin-left: var(--margin-narrow);
-        font: var(--label-font);
-        color: var(--label-color);
-        opacity: 0.7;
-      }
-    `
-    ]; }
-    render() {
-        const userUnit = this.userUnit || this.stdUnit;
-        const units = Object.keys(UNIT_SYSTEMS[this.stdUnit]);
-        const rate = !this.userUnit || this.userUnit === this.stdUnit ? 1 : UNIT_SYSTEMS[this.stdUnit][this.userUnit] || 1;
-        return html `
-      <input
-        type="number"
-        .value=${this._toUserUnit(this.value)}
-        placeholder=${this.placeholder}
-        @change=${(e) => this._onChangeValue(e)}
-      />
-      <div
-        @click=${(e) => {
-            const target = e.currentTarget;
-            this.popup.open({
-                right: 0,
-                top: target.offsetTop + target.offsetHeight
-            });
-        }}
-      >
-        ${userUnit}
-        <ox-popup-list
-          .value=${userUnit}
-          @select=${(e) => {
-            this.userUnit = e.detail;
-        }}
-        >
-          <div option value=${this.stdUnit}>${this.stdUnit}</div>
-          ${units.map(unit => html `<div option value=${unit}>${unit}</div>`)}
-        </ox-popup-list>
-      </div>
-    `;
-    }
-    _onChangeValue(e) {
-        this.value = this._toStdUnit(this.input.value);
-        this.dispatchEvent(new CustomEvent('change', {
-            bubbles: true,
-            composed: true,
-            detail: this.value
-        }));
-    }
-    _toUserUnit(stdValue) {
-        const rate = !this.userUnit || this.userUnit === this.stdUnit ? 1 : UNIT_SYSTEMS[this.stdUnit][this.userUnit] || 1;
-        return Number(stdValue) * rate;
-    }
-    _toStdUnit(userValue) {
-        const rate = !this.userUnit || this.userUnit === this.stdUnit ? 1 : UNIT_SYSTEMS[this.stdUnit][this.userUnit] || 1;
-        return isNaN(Number(userValue)) ? undefined : Number(userValue) / rate;
-    }
-};
-__decorate([
-    property({ type: String })
-], OxInputUnit.prototype, "placeholder", void 0);
-__decorate([
-    property({ type: String, attribute: 'std-unit' })
-], OxInputUnit.prototype, "stdUnit", void 0);
-__decorate([
-    property({ type: String, attribute: 'user-unit' })
-], OxInputUnit.prototype, "userUnit", void 0);
-__decorate([
-    query('input')
-], OxInputUnit.prototype, "input", void 0);
-__decorate([
-    query('ox-popup-list')
-], OxInputUnit.prototype, "popup", void 0);
-OxInputUnit = __decorate([
-    customElement('ox-input-unit')
-], OxInputUnit);
-export { OxInputUnit };
-//# sourceMappingURL=ox-input-unit.js.map

package/dist/src/ox-input-unit.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ox-input-unit.js","sourceRoot":"","sources":["../../src/ox-input-unit.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport { css, html } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\n\nimport { OxPopupList } from '@operato/popup'\n\nimport { OxFormField } from './ox-form-field'\n\nconst UNIT_SYSTEMS: { [unit: string]: { [unit: string]: number } } = {\n  kg: {\n    mg: 1000000,\n    g: 1000,\n    ton: 0.001\n  },\n  rad: {\n    degree: 180 / Math.PI\n  }\n}\n\n@customElement('ox-input-unit')\nexport class OxInputUnit extends OxFormField {\n  static styles = [\n    css`\n      input {\n        border: 0;\n        border-bottom: var(--border-dark-color);\n        padding: var(--input-padding);\n        font: var(--input-font);\n        color: var(--primary-text-color);\n      }\n      input:focus {\n        outline: none;\n        border-bottom: 1px solid var(--primary-color);\n      }\n\n      input::-webkit-outer-spin-button,\n      input::-webkit-inner-spin-button {\n        -webkit-appearance: none;\n        margin: 0;\n      }\n\n      input[type='number'] {\n        -moz-appearance: textfield;\n      }\n\n      div {\n        display: inline;\n        position: relative;\n        margin-left: var(--margin-narrow);\n        font: var(--label-font);\n        color: var(--label-color);\n        opacity: 0.7;\n      }\n    `\n  ]\n\n  @property({ type: String }) placeholder?: string\n  @property({ type: String, attribute: 'std-unit' }) stdUnit!: string\n  @property({ type: String, attribute: 'user-unit' }) userUnit?: string\n\n  @query('input') input!: HTMLInputElement\n  @query('ox-popup-list') popup!: OxPopupList\n\n  render() {\n    const userUnit = this.userUnit || this.stdUnit\n    const units = Object.keys(UNIT_SYSTEMS[this.stdUnit])\n    const rate = !this.userUnit || this.userUnit === this.stdUnit ? 1 : UNIT_SYSTEMS[this.stdUnit][this.userUnit] || 1\n\n    return html`\n      <input\n        type=\"number\"\n        .value=${this._toUserUnit(this.value)}\n        placeholder=${this.placeholder}\n        @change=${(e: Event) => this._onChangeValue(e)}\n      />\n      <div\n        @click=${(e: Event) => {\n          const target = e.currentTarget as HTMLElement\n          this.popup.open({\n            right: 0,\n            top: target.offsetTop + target.offsetHeight\n          })\n        }}\n      >\n        ${userUnit}\n        <ox-popup-list\n          .value=${userUnit}\n          @select=${(e: CustomEvent) => {\n            this.userUnit = e.detail\n          }}\n        >\n          <div option value=${this.stdUnit}>${this.stdUnit}</div>\n          ${units.map(unit => html`<div option value=${unit}>${unit}</div>`)}\n        </ox-popup-list>\n      </div>\n    `\n  }\n\n  _onChangeValue(e: Event) {\n    this.value = this._toStdUnit(this.input.value)\n\n    this.dispatchEvent(\n      new CustomEvent('change', {\n        bubbles: true,\n        composed: true,\n        detail: this.value\n      })\n    )\n  }\n\n  _toUserUnit(stdValue: string | number | undefined) {\n    const rate = !this.userUnit || this.userUnit === this.stdUnit ? 1 : UNIT_SYSTEMS[this.stdUnit][this.userUnit] || 1\n    return Number(stdValue) * rate\n  }\n\n  _toStdUnit(userValue: string | number | undefined) {\n    const rate = !this.userUnit || this.userUnit === this.stdUnit ? 1 : UNIT_SYSTEMS[this.stdUnit][this.userUnit] || 1\n    return isNaN(Number(userValue)) ? undefined : Number(userValue) / rate\n  }\n}\n"]}

package/src/ox-input-unit.ts

@@ -1,123 +0,0 @@
-/**
- * @license Copyright © HatioLab Inc. All rights reserved.
- */
-
-import { css, html } from 'lit'
-import { customElement, property, query } from 'lit/decorators.js'
-
-import { OxPopupList } from '@operato/popup'
-
-import { OxFormField } from './ox-form-field'
-
-const UNIT_SYSTEMS: { [unit: string]: { [unit: string]: number } } = {
-  kg: {
-    mg: 1000000,
-    g: 1000,
-    ton: 0.001
-  },
-  rad: {
-    degree: 180 / Math.PI
-  }
-}
-
-@customElement('ox-input-unit')
-export class OxInputUnit extends OxFormField {
-  static styles = [
-    css`
-      input {
-        border: 0;
-        border-bottom: var(--border-dark-color);
-        padding: var(--input-padding);
-        font: var(--input-font);
-        color: var(--primary-text-color);
-      }
-      input:focus {
-        outline: none;
-        border-bottom: 1px solid var(--primary-color);
-      }
-
-      input::-webkit-outer-spin-button,
-      input::-webkit-inner-spin-button {
-        -webkit-appearance: none;
-        margin: 0;
-      }
-
-      input[type='number'] {
-        -moz-appearance: textfield;
-      }
-
-      div {
-        display: inline;
-        position: relative;
-        margin-left: var(--margin-narrow);
-        font: var(--label-font);
-        color: var(--label-color);
-        opacity: 0.7;
-      }
-    `
-  ]
-
-  @property({ type: String }) placeholder?: string
-  @property({ type: String, attribute: 'std-unit' }) stdUnit!: string
-  @property({ type: String, attribute: 'user-unit' }) userUnit?: string
-
-  @query('input') input!: HTMLInputElement
-  @query('ox-popup-list') popup!: OxPopupList
-
-  render() {
-    const userUnit = this.userUnit || this.stdUnit
-    const units = Object.keys(UNIT_SYSTEMS[this.stdUnit])
-    const rate = !this.userUnit || this.userUnit === this.stdUnit ? 1 : UNIT_SYSTEMS[this.stdUnit][this.userUnit] || 1
-
-    return html`
-      <input
-        type="number"
-        .value=${this._toUserUnit(this.value)}
-        placeholder=${this.placeholder}
-        @change=${(e: Event) => this._onChangeValue(e)}
-      />
-      <div
-        @click=${(e: Event) => {
-          const target = e.currentTarget as HTMLElement
-          this.popup.open({
-            right: 0,
-            top: target.offsetTop + target.offsetHeight
-          })
-        }}
-      >
-        ${userUnit}
-        <ox-popup-list
-          .value=${userUnit}
-          @select=${(e: CustomEvent) => {
-            this.userUnit = e.detail
-          }}
-        >
-          <div option value=${this.stdUnit}>${this.stdUnit}</div>
-          ${units.map(unit => html`<div option value=${unit}>${unit}</div>`)}
-        </ox-popup-list>
-      </div>
-    `
-  }
-
-  _onChangeValue(e: Event) {
-    this.value = this._toStdUnit(this.input.value)
-
-    this.dispatchEvent(
-      new CustomEvent('change', {
-        bubbles: true,
-        composed: true,
-        detail: this.value
-      })
-    )
-  }
-
-  _toUserUnit(stdValue: string | number | undefined) {
-    const rate = !this.userUnit || this.userUnit === this.stdUnit ? 1 : UNIT_SYSTEMS[this.stdUnit][this.userUnit] || 1
-    return Number(stdValue) * rate
-  }
-
-  _toStdUnit(userValue: string | number | undefined) {
-    const rate = !this.userUnit || this.userUnit === this.stdUnit ? 1 : UNIT_SYSTEMS[this.stdUnit][this.userUnit] || 1
-    return isNaN(Number(userValue)) ? undefined : Number(userValue) / rate
-  }
-}