Initial commit

app/components/common/InputNumber.vue

@@ -0,0 +1,94 @@
+<template>
+  <div class="control has-icons-left">
+    <input
+      :class="`input ${disabled ? 'has-text-black' : ''}`"
+      type="text"
+      :placeholder="placeholder || ''"
+      v-model="value"
+      @keyup="doCheck"
+      :disabled="disabled || false"
+    />
+    <span class="icon is-left">
+      <SvgIcon v-bind="{ name: 'calculator.svg', type: 'gray', size: 22 }"></SvgIcon>
+    </span>
+  </div>
+</template>
+<script>
+export default {
+  props: ["record", "attr", "placeholder", "disabled", "defaultValue"],
+  data() {
+    return {
+      value: this.getInitialValue(),
+      timer: undefined,
+    };
+  },
+  created() {
+    if (this.defaultValue) {
+      this.value = this.value !== undefined ? this.$numtoString(this.value) : this.$numtoString(0);
+    } else {
+      if (this.value !== undefined && this.value !== null) {
+        this.value = this.$numtoString(this.value);
+      } else {
+        this.value = "";
+      }
+    }
+  },
+  watch: {
+    record: function (newVal) {
+      this.value = this.$numtoString(this.record[this.attr]);
+    },
+  },
+  methods: {
+    getInitialValue() {
+      const recordValue = this.record ? this.record[this.attr] : undefined;
+
+      if (this.defaultValue) {
+        if (recordValue === null || recordValue === undefined || recordValue === "") {
+          return 0;
+        }
+        return this.$copy ? this.$copy(recordValue) : recordValue;
+      } else {
+        if (recordValue === null || recordValue === undefined || recordValue === "") {
+          return undefined;
+        }
+        return this.$copy ? this.$copy(recordValue) : recordValue;
+      }
+    },
+
+    getDisplayValue(recordValue) {
+      if (this.defaultValue) {
+        if (recordValue === null || recordValue === undefined || recordValue === "") {
+          return this.$numtoString(0);
+        }
+        return this.$numtoString(recordValue);
+      } else {
+        if (recordValue === null || recordValue === undefined || recordValue === "") {
+          return "";
+        }
+        return this.$numtoString(recordValue);
+      }
+    },
+    doCheck() {
+      if (this.timer) clearTimeout(this.timer);
+      this.timer = setTimeout(() => this.checkChange(), 500);
+    },
+    doChange() {
+      this.$emit("change", this.value);
+    },
+    checkChange() {
+      if (!this.$empty(this.value)) {
+        this.value = this.$numtoString(this.$formatNumber(this.value));
+        this.$emit("number", this.$formatNumber(this.value));
+      } else {
+        if (this.defaultValue) {
+          this.value = this.$numtoString(0);
+          this.$emit("number", 0);
+        } else {
+          this.value = "";
+          this.$emit("number", null);
+        }
+      }
+    },
+  },
+};
+</script>