glib-web 0.5.98 → 0.6.2

package/components/fields/phone/field.vue

@@ -1,351 +1,351 @@
-<template>
-  <div :style="$styles()" :class="classes()">
-    <div class="country-code">
-      <v-select
-        v-model="countryCode"
-        :items="sortedCountries"
-        :disabled="spec.readOnly"
-        :outlined="$classes().includes('outlined')"
-        :rounded="$classes().includes('rounded')"
-        :dense="$classes().includes('dense')"
-        item-text="name"
-        item-value="iso2"
-        return-object
-        @change="onChangeCountryCode"
-      >
-        <template v-slot:selection>
-          <div :class="activeCountry.iso2.toLowerCase()" class="country_flag" />
-        </template>
-        <template v-slot:item="data">
-          <span :class="data.item.iso2.toLowerCase()" class="country_flag" />
-          <span>{{ data.item.name }} {{ `+${data.item.dialCode}` }}</span>
-        </template>
-      </v-select>
-    </div>
-    <v-text-field
-      :id="inputId"
-      ref="input"
-      v-model="phone"
-      class="tel"
-      :label="spec.label"
-      :name="fieldName"
-      :value="spec.value"
-      :hint="spec.hint"
-      :placeholder="spec.placeholder"
-      :maxlength="spec.maxLength || 25"
-      :disabled="spec.readOnly"
-      type="tel"
-      :rules="hiddenDisplay() ? [] : rules"
-      :prefix="spec.leftText"
-      :suffix="spec.rightText"
-      :outlined="$classes().includes('outlined')"
-      :dense="$classes().includes('dense')"
-      :rounded="$classes().includes('rounded')"
-      :autofocus="spec.autoFocus || false"
-      validate-on-blur
-    >
-    </v-text-field>
-    <input
-      v-if="spec.readOnly"
-      type="hidden"
-      :name="fieldName"
-      :value="phone"
-    />
-  </div>
-</template>
-
-<script>
-import PhoneNumber from "awesome-phonenumber";
-import allCountries from "./countries";
-
-function getCountryByIp() {
-  return fetch("https://ip2c.org/s")
-    .then(response => response.text())
-    .then(response => {
-      const result = (response || "").toString();
-      if (!result || result[0] !== "1") {
-        throw new Error("unable to fetch the country");
-      }
-      return result.substr(2, 2);
-    });
-}
-
-export default {
-  props: {
-    spec: {
-      type: Object,
-      required: true
-    },
-    rules: {
-      type: Array,
-      default: () => [
-        v =>
-          !v ||
-          /^\+[1-9]([0-9\(\)\-\ ]*)$/.test(v) ||
-          "Must be a valid international phone number with prefix (e.g. +1 416 555 0134)"
-      ]
-    },
-    disableFetchingCountry: {
-      type: Boolean,
-      default: () => false
-    },
-    mode: {
-      type: String,
-      default: () => ""
-    },
-    allCountries: {
-      type: Array,
-      default: () => allCountries
-    },
-    preferredCountries: {
-      type: Array,
-      default: () => []
-    },
-    inputId: {
-      type: String,
-      default: () => ""
-    }
-  },
-  data() {
-    return {
-      phone: "",
-      activeCountry: { iso2: "" },
-      selectedIndex: null,
-      countryCode: null
-    };
-  },
-  computed: {
-    parsedMode() {
-      if (this.mode) {
-        if (!["international", "national"].includes(this.mode)) {
-          console.error('Invalid value of prop "mode"');
-        } else {
-          return this.mode;
-        }
-      }
-      if (!this.phone || this.phone[0] !== "+") {
-        return "national";
-      }
-      return "international";
-    },
-    sortedCountries() {
-      // Sort by preferred countries
-      const preferredCountries = this.getCountries(
-        this.preferredCountries
-      ).map(country => ({ ...country, preferred: true }));
-      return [...preferredCountries, ...this.allCountries];
-    },
-    phoneObject() {
-      const result = PhoneNumber(
-        this.phone || "",
-        this.activeCountry.iso2
-      ).toJSON();
-      Object.assign(result, {
-        isValid: result.valid,
-        country: this.activeCountry
-      });
-      if (!this.phone) {
-        return {
-          ...result,
-          number: {
-            input: ""
-          }
-        };
-      }
-      return result;
-    },
-    phoneText() {
-      let key = "input";
-      if (this.phoneObject.valid) {
-        key = this.parsedMode;
-      }
-      return this.phoneObject.number[key] || "";
-    }
-  },
-  watch: {
-    phone(val) {
-      if (val) {
-        if (val[0] === "+") {
-          const code = PhoneNumber(val).getRegionCode();
-          if (code) {
-            this.activeCountry = this.findCountry(code) || this.activeCountry;
-          }
-        }
-      }
-    }
-  },
-  mounted() {
-    this.initializeCountry()
-      .then(() => {
-        if (!this.phone && this.activeCountry.dialCode) {
-          this.phone = `+${this.activeCountry.dialCode}`;
-        }
-        this.countryCode = this.activeCountry;
-      })
-      .catch(console.error);
-  },
-  created() {
-    if (this.spec.value) {
-      this.phone = this.spec.value.trim();
-    }
-  },
-  methods: {
-    hiddenDisplay() {
-      return this.$styles()["display"] == "none";
-    },
-    classes() {
-      return this.$classes().concat(["g-text-field--hintless", "fields-phone"]);
-    },
-    initializeCountry() {
-      return new Promise(resolve => {
-        // 1. If the phone included prefix (+12), try to get the country and set it
-        if (this.phone && this.phone[0] === "+") {
-          const activeCountry = PhoneNumber(this.phone).getRegionCode();
-          if (activeCountry) {
-            this.choose(activeCountry);
-            resolve();
-            return;
-          }
-        }
-        // 2. Use default country if passed from parent
-        if (this.spec.defaultCountry) {
-          const defaultCountry = this.findCountry(this.spec.defaultCountry);
-          if (defaultCountry) {
-            this.choose(defaultCountry);
-            resolve();
-            return;
-          }
-        }
-        const fallbackCountry =
-          this.findCountry(this.preferredCountries[0]) || this.allCountries[0];
-        // 3. Check if fetching country based on user's IP is allowed, set it as the default country
-        if (!this.disableFetchingCountry) {
-          getCountryByIp()
-            .then(res => {
-              if (this.phone === "") {
-                this.activeCountry =
-                  this.findCountry(res) || this.activeCountry;
-              }
-            })
-            .catch(error => {
-              console.warn(error);
-              // 4. Use the first country from preferred list (if available) or all countries list
-              this.choose(fallbackCountry);
-            })
-            .finally(() => {
-              resolve();
-            });
-        } else {
-          // 4. Use the first country from preferred list (if available) or all countries list
-          this.choose(fallbackCountry);
-          resolve();
-        }
-      });
-    },
-    // Get ISO2 code from a list of countries
-    getCountries(list = []) {
-      return list
-        .map(countryCode => this.findCountry(countryCode))
-        .filter(Boolean);
-    },
-    findCountry(iso = "") {
-      return this.allCountries.find(
-        country => country.iso2 === iso.toUpperCase()
-      );
-    },
-    getItemClass(index, iso2) {
-      const highlighted = this.selectedIndex === index;
-      const lastPreferred = index === this.preferredCountries.length - 1;
-      const preferred = this.preferredCountries.some(
-        c => c.toUpperCase() === iso2
-      );
-      return {
-        highlighted,
-        "last-preferred": lastPreferred,
-        preferred
-      };
-    },
-    choose(country) {
-      this.activeCountry = country || this.activeCountry || {};
-      if (
-        this.phone &&
-        this.phone[0] === "+" &&
-        this.activeCountry.iso2 &&
-        this.phoneObject.number.significant
-      ) {
-        // If country is selected & the field has a valid international phone number
-        this.phone = PhoneNumber(
-          this.phoneObject.number.significant,
-          this.activeCountry.iso2
-        ).getNumber("international");
-      } else if (
-        country &&
-        this.phone &&
-        (!this.phoneObject.number.significant || this.phone[0] !== "+")
-      ) {
-        // If a new country is selected & the field has NO valid international phone number
-        this.phone = `+${country.dialCode}`;
-      } else if (country && !this.phone) {
-        // If a new country is selected & the field has NO value
-        this.phone = `+${country.dialCode}`;
-      }
-    },
-    reset() {
-      this.selectedIndex = this.sortedCountries
-        .map(c => c.iso2)
-        .indexOf(this.activeCountry.iso2);
-    },
-    onChangeCountryCode() {
-      this.choose(this.countryCode, true);
-    }
-  }
-};
-</script>
-
-<style src="./sprite.css"></style>
-<style lang="scss">
-.g-text-field--hintless {
-  .v-text-field {
-    .v-text-field__details {
-      min-height: 0;
-      margin-bottom: 0;
-      .v-messages__message {
-        min-height: 0;
-        line-height: 14px;
-      }
-    }
-  }
-}
-.country_flag {
-  margin-right: 8px;
-}
-.fields-phone {
-  display: flex;
-  align-items: center;
-  .country-code {
-    width: 75px;
-  }
-  li.last-preferred {
-    border-bottom: 1px solid #cacaca;
-  }
-  .v-text-field {
-    .v-select__selections {
-      position: relative;
-      .country_flag {
-        position: absolute;
-        margin-left: 18px;
-      }
-    }
-    &--outlined {
-      .v-select__selections {
-        .country_flag {
-          margin-left: auto;
-        }
-      }
-    }
-  }
-}
-.fields-phone.outlined .country-code {
-  margin-right: 6px;
-}
-</style>
+<template>
+  <div :style="$styles()" :class="classes()">
+    <div class="country-code">
+      <v-select
+        v-model="countryCode"
+        :items="sortedCountries"
+        :disabled="spec.readOnly"
+        :outlined="$classes().includes('outlined')"
+        :rounded="$classes().includes('rounded')"
+        :dense="$classes().includes('dense')"
+        item-text="name"
+        item-value="iso2"
+        return-object
+        @change="onChangeCountryCode"
+      >
+        <template v-slot:selection>
+          <div :class="activeCountry.iso2.toLowerCase()" class="country_flag" />
+        </template>
+        <template v-slot:item="data">
+          <span :class="data.item.iso2.toLowerCase()" class="country_flag" />
+          <span>{{ data.item.name }} {{ `+${data.item.dialCode}` }}</span>
+        </template>
+      </v-select>
+    </div>
+    <v-text-field
+      :id="inputId"
+      ref="input"
+      v-model="phone"
+      class="tel"
+      :label="spec.label"
+      :name="fieldName"
+      :value="spec.value"
+      :hint="spec.hint"
+      :placeholder="spec.placeholder"
+      :maxlength="spec.maxLength || 25"
+      :disabled="spec.readOnly"
+      type="tel"
+      :rules="hiddenDisplay() ? [] : rules"
+      :prefix="spec.leftText"
+      :suffix="spec.rightText"
+      :outlined="$classes().includes('outlined')"
+      :dense="$classes().includes('dense')"
+      :rounded="$classes().includes('rounded')"
+      :autofocus="spec.autoFocus || false"
+      validate-on-blur
+    >
+    </v-text-field>
+    <input
+      v-if="spec.readOnly"
+      type="hidden"
+      :name="fieldName"
+      :value="phone"
+    />
+  </div>
+</template>
+
+<script>
+import PhoneNumber from "awesome-phonenumber";
+import allCountries from "./countries";
+
+function getCountryByIp() {
+  return fetch("https://ip2c.org/s")
+    .then(response => response.text())
+    .then(response => {
+      const result = (response || "").toString();
+      if (!result || result[0] !== "1") {
+        throw new Error("unable to fetch the country");
+      }
+      return result.substr(2, 2);
+    });
+}
+
+export default {
+  props: {
+    spec: {
+      type: Object,
+      required: true
+    },
+    rules: {
+      type: Array,
+      default: () => [
+        v =>
+          !v ||
+          /^\+[1-9]([0-9\(\)\-\ ]*)$/.test(v) ||
+          "Must be a valid international phone number with prefix (e.g. +1 416 555 0134)"
+      ]
+    },
+    disableFetchingCountry: {
+      type: Boolean,
+      default: () => false
+    },
+    mode: {
+      type: String,
+      default: () => ""
+    },
+    allCountries: {
+      type: Array,
+      default: () => allCountries
+    },
+    preferredCountries: {
+      type: Array,
+      default: () => []
+    },
+    inputId: {
+      type: String,
+      default: () => ""
+    }
+  },
+  data() {
+    return {
+      phone: "",
+      activeCountry: { iso2: "" },
+      selectedIndex: null,
+      countryCode: null
+    };
+  },
+  computed: {
+    parsedMode() {
+      if (this.mode) {
+        if (!["international", "national"].includes(this.mode)) {
+          console.error('Invalid value of prop "mode"');
+        } else {
+          return this.mode;
+        }
+      }
+      if (!this.phone || this.phone[0] !== "+") {
+        return "national";
+      }
+      return "international";
+    },
+    sortedCountries() {
+      // Sort by preferred countries
+      const preferredCountries = this.getCountries(
+        this.preferredCountries
+      ).map(country => ({ ...country, preferred: true }));
+      return [...preferredCountries, ...this.allCountries];
+    },
+    phoneObject() {
+      const result = PhoneNumber(
+        this.phone || "",
+        this.activeCountry.iso2
+      ).toJSON();
+      Object.assign(result, {
+        isValid: result.valid,
+        country: this.activeCountry
+      });
+      if (!this.phone) {
+        return {
+          ...result,
+          number: {
+            input: ""
+          }
+        };
+      }
+      return result;
+    },
+    phoneText() {
+      let key = "input";
+      if (this.phoneObject.valid) {
+        key = this.parsedMode;
+      }
+      return this.phoneObject.number[key] || "";
+    }
+  },
+  watch: {
+    phone(val) {
+      if (val) {
+        if (val[0] === "+") {
+          const code = PhoneNumber(val).getRegionCode();
+          if (code) {
+            this.activeCountry = this.findCountry(code) || this.activeCountry;
+          }
+        }
+      }
+    }
+  },
+  mounted() {
+    this.initializeCountry()
+      .then(() => {
+        if (!this.phone && this.activeCountry.dialCode) {
+          this.phone = `+${this.activeCountry.dialCode}`;
+        }
+        this.countryCode = this.activeCountry;
+      })
+      .catch(console.error);
+  },
+  created() {
+    if (this.spec.value) {
+      this.phone = this.spec.value.trim();
+    }
+  },
+  methods: {
+    hiddenDisplay() {
+      return this.$styles()["display"] == "none";
+    },
+    classes() {
+      return this.$classes().concat(["g-text-field--hintless", "fields-phone"]);
+    },
+    initializeCountry() {
+      return new Promise(resolve => {
+        // 1. If the phone included prefix (+12), try to get the country and set it
+        if (this.phone && this.phone[0] === "+") {
+          const activeCountry = PhoneNumber(this.phone).getRegionCode();
+          if (activeCountry) {
+            this.choose(activeCountry);
+            resolve();
+            return;
+          }
+        }
+        // 2. Use default country if passed from parent
+        if (this.spec.defaultCountry) {
+          const defaultCountry = this.findCountry(this.spec.defaultCountry);
+          if (defaultCountry) {
+            this.choose(defaultCountry);
+            resolve();
+            return;
+          }
+        }
+        const fallbackCountry =
+          this.findCountry(this.preferredCountries[0]) || this.allCountries[0];
+        // 3. Check if fetching country based on user's IP is allowed, set it as the default country
+        if (!this.disableFetchingCountry) {
+          getCountryByIp()
+            .then(res => {
+              if (this.phone === "") {
+                this.activeCountry =
+                  this.findCountry(res) || this.activeCountry;
+              }
+            })
+            .catch(error => {
+              console.warn(error);
+              // 4. Use the first country from preferred list (if available) or all countries list
+              this.choose(fallbackCountry);
+            })
+            .finally(() => {
+              resolve();
+            });
+        } else {
+          // 4. Use the first country from preferred list (if available) or all countries list
+          this.choose(fallbackCountry);
+          resolve();
+        }
+      });
+    },
+    // Get ISO2 code from a list of countries
+    getCountries(list = []) {
+      return list
+        .map(countryCode => this.findCountry(countryCode))
+        .filter(Boolean);
+    },
+    findCountry(iso = "") {
+      return this.allCountries.find(
+        country => country.iso2 === iso.toUpperCase()
+      );
+    },
+    getItemClass(index, iso2) {
+      const highlighted = this.selectedIndex === index;
+      const lastPreferred = index === this.preferredCountries.length - 1;
+      const preferred = this.preferredCountries.some(
+        c => c.toUpperCase() === iso2
+      );
+      return {
+        highlighted,
+        "last-preferred": lastPreferred,
+        preferred
+      };
+    },
+    choose(country) {
+      this.activeCountry = country || this.activeCountry || {};
+      if (
+        this.phone &&
+        this.phone[0] === "+" &&
+        this.activeCountry.iso2 &&
+        this.phoneObject.number.significant
+      ) {
+        // If country is selected & the field has a valid international phone number
+        this.phone = PhoneNumber(
+          this.phoneObject.number.significant,
+          this.activeCountry.iso2
+        ).getNumber("international");
+      } else if (
+        country &&
+        this.phone &&
+        (!this.phoneObject.number.significant || this.phone[0] !== "+")
+      ) {
+        // If a new country is selected & the field has NO valid international phone number
+        this.phone = `+${country.dialCode}`;
+      } else if (country && !this.phone) {
+        // If a new country is selected & the field has NO value
+        this.phone = `+${country.dialCode}`;
+      }
+    },
+    reset() {
+      this.selectedIndex = this.sortedCountries
+        .map(c => c.iso2)
+        .indexOf(this.activeCountry.iso2);
+    },
+    onChangeCountryCode() {
+      this.choose(this.countryCode, true);
+    }
+  }
+};
+</script>
+
+<style src="./sprite.css"></style>
+<style lang="scss">
+.g-text-field--hintless {
+  .v-text-field {
+    .v-text-field__details {
+      min-height: 0;
+      margin-bottom: 0;
+      .v-messages__message {
+        min-height: 0;
+        line-height: 14px;
+      }
+    }
+  }
+}
+.country_flag {
+  margin-right: 8px;
+}
+.fields-phone {
+  display: flex;
+  align-items: center;
+  .country-code {
+    width: 75px;
+  }
+  li.last-preferred {
+    border-bottom: 1px solid #cacaca;
+  }
+  .v-text-field {
+    .v-select__selections {
+      position: relative;
+      .country_flag {
+        position: absolute;
+        margin-left: 18px;
+      }
+    }
+    &--outlined {
+      .v-select__selections {
+        .country_flag {
+          margin-left: auto;
+        }
+      }
+    }
+  }
+}
+.fields-phone.outlined .country-code {
+  margin-right: 6px;
+}
+</style>