Initial commit

app/components/common/InputPhone.vue

@@ -0,0 +1,55 @@
+<template>
+  <div class="control has-icons-left">
+    <input
+      class="input"
+      type="text"
+      :placeholder="placeholder || ''"
+      v-model="value"
+      :disabled="disabled || false"
+      inputmode="numeric"
+      autocomplete="tel"
+    />
+    <span class="icon is-left">
+      <SvgIcon v-bind="{name: 'phone.png', type: 'gray', size: 20}"></SvgIcon>
+    </span>
+  </div>
+</template>
+
+<script>
+export default {
+  props: ["record", "attr", "placeholder", "disabled"],
+
+  data() {
+    return {
+      value: "",
+    };
+  },
+
+  created() {
+    const initial = this.record?.[this.attr];
+    this.value = initial ? String(initial) : "";
+  },
+
+  watch: {
+    /** giống InputEmail.vue: watch value → emit ngay */
+    value(newVal) {
+      // giữ lại CHỈ chữ số
+      const digits = String(newVal).replace(/\D/g, "");
+
+      // sync lại UI nếu user nhập ký tự khác số
+      if (digits !== newVal) {
+        this.value = digits;
+        return;
+      }
+
+      // emit string số hoặc null
+      this.$emit("phone", digits.length ? digits : null);
+    },
+
+    record(newVal) {
+      const v = newVal?.[this.attr];
+      this.value = v ? String(v) : "";
+    },
+  },
+};
+</script>