glib-web 0.5.77

package/components/fields/phone/countries.js

@@ -0,0 +1,315 @@
+// [
+//    Country name,
+//    iso2 code,
+//    International dial code,
+//    Order (if >1 country with same dial code),
+//    Area codes
+// ]
+const allCountries = [
+  ["Afghanistan (‫افغانستان‬‎)", "af", "93"],
+  ["Albania (Shqipëri)", "al", "355"],
+  ["Algeria (‫الجزائر‬‎)", "dz", "213"],
+  ["American Samoa", "as", "1684"],
+  ["Andorra", "ad", "376"],
+  ["Angola", "ao", "244"],
+  ["Anguilla", "ai", "1264"],
+  ["Antigua and Barbuda", "ag", "1268"],
+  ["Argentina", "ar", "54"],
+  ["Armenia (Հայաստան)", "am", "374"],
+  ["Aruba", "aw", "297"],
+  ["Australia", "au", "61", 0],
+  ["Austria (Österreich)", "at", "43"],
+  ["Azerbaijan (Azərbaycan)", "az", "994"],
+  ["Bahamas", "bs", "1242"],
+  ["Bahrain (‫البحرين‬‎)", "bh", "973"],
+  ["Bangladesh (বাংলাদেশ)", "bd", "880"],
+  ["Barbados", "bb", "1246"],
+  ["Belarus (Беларусь)", "by", "375"],
+  ["Belgium (België)", "be", "32"],
+  ["Belize", "bz", "501"],
+  ["Benin (Bénin)", "bj", "229"],
+  ["Bermuda", "bm", "1441"],
+  ["Bhutan (འབྲུག)", "bt", "975"],
+  ["Bolivia", "bo", "591"],
+  ["Bosnia and Herzegovina (Босна и Херцеговина)", "ba", "387"],
+  ["Botswana", "bw", "267"],
+  ["Brazil (Brasil)", "br", "55"],
+  ["British Indian Ocean Territory", "io", "246"],
+  ["British Virgin Islands", "vg", "1284"],
+  ["Brunei", "bn", "673"],
+  ["Bulgaria (България)", "bg", "359"],
+  ["Burkina Faso", "bf", "226"],
+  ["Burundi (Uburundi)", "bi", "257"],
+  ["Cambodia (កម្ពុជា)", "kh", "855"],
+  ["Cameroon (Cameroun)", "cm", "237"],
+  [
+    "Canada",
+    "ca",
+    "1",
+    1,
+    [
+      "204",
+      "226",
+      "236",
+      "249",
+      "250",
+      "289",
+      "306",
+      "343",
+      "365",
+      "387",
+      "403",
+      "416",
+      "418",
+      "431",
+      "437",
+      "438",
+      "450",
+      "506",
+      "514",
+      "519",
+      "548",
+      "579",
+      "581",
+      "587",
+      "604",
+      "613",
+      "639",
+      "647",
+      "672",
+      "705",
+      "709",
+      "742",
+      "778",
+      "780",
+      "782",
+      "807",
+      "819",
+      "825",
+      "867",
+      "873",
+      "902",
+      "905"
+    ]
+  ],
+  ["Cape Verde (Kabu Verdi)", "cv", "238"],
+  ["Caribbean Netherlands", "bq", "599", 1],
+  ["Cayman Islands", "ky", "1345"],
+  ["Central African Republic (République centrafricaine)", "cf", "236"],
+  ["Chad (Tchad)", "td", "235"],
+  ["Chile", "cl", "56"],
+  ["China (中国)", "cn", "86"],
+  ["Christmas Island", "cx", "61", 2],
+  ["Cocos (Keeling) Islands", "cc", "61", 1],
+  ["Colombia", "co", "57"],
+  ["Comoros (‫جزر القمر‬‎)", "km", "269"],
+  ["Congo (DRC) (Jamhuri ya Kidemokrasia ya Kongo)", "cd", "243"],
+  ["Congo (Republic) (Congo-Brazzaville)", "cg", "242"],
+  ["Cook Islands", "ck", "682"],
+  ["Costa Rica", "cr", "506"],
+  ["Côte d’Ivoire", "ci", "225"],
+  ["Croatia (Hrvatska)", "hr", "385"],
+  ["Cuba", "cu", "53"],
+  ["Curaçao", "cw", "599", 0],
+  ["Cyprus (Κύπρος)", "cy", "357"],
+  ["Czech Republic (Česká republika)", "cz", "420"],
+  ["Denmark (Danmark)", "dk", "45"],
+  ["Djibouti", "dj", "253"],
+  ["Dominica", "dm", "1767"],
+  [
+    "Dominican Republic (República Dominicana)",
+    "do",
+    "1",
+    2,
+    ["809", "829", "849"]
+  ],
+  ["Ecuador", "ec", "593"],
+  ["Egypt (‫مصر‬‎)", "eg", "20"],
+  ["El Salvador", "sv", "503"],
+  ["Equatorial Guinea (Guinea Ecuatorial)", "gq", "240"],
+  ["Eritrea", "er", "291"],
+  ["Estonia (Eesti)", "ee", "372"],
+  ["Ethiopia", "et", "251"],
+  ["Falkland Islands (Islas Malvinas)", "fk", "500"],
+  ["Faroe Islands (Føroyar)", "fo", "298"],
+  ["Fiji", "fj", "679"],
+  ["Finland (Suomi)", "fi", "358", 0],
+  ["France", "fr", "33"],
+  ["French Guiana (Guyane française)", "gf", "594"],
+  ["French Polynesia (Polynésie française)", "pf", "689"],
+  ["Gabon", "ga", "241"],
+  ["Gambia", "gm", "220"],
+  ["Georgia (საქართველო)", "ge", "995"],
+  ["Germany (Deutschland)", "de", "49"],
+  ["Ghana (Gaana)", "gh", "233"],
+  ["Gibraltar", "gi", "350"],
+  ["Greece (Ελλάδα)", "gr", "30"],
+  ["Greenland (Kalaallit Nunaat)", "gl", "299"],
+  ["Grenada", "gd", "1473"],
+  ["Guadeloupe", "gp", "590", 0],
+  ["Guam", "gu", "1671"],
+  ["Guatemala", "gt", "502"],
+  ["Guernsey", "gg", "44", 1],
+  ["Guinea (Guinée)", "gn", "224"],
+  ["Guinea-Bissau (Guiné Bissau)", "gw", "245"],
+  ["Guyana", "gy", "592"],
+  ["Haiti", "ht", "509"],
+  ["Honduras", "hn", "504"],
+  ["Hong Kong (香港)", "hk", "852"],
+  ["Hungary (Magyarország)", "hu", "36"],
+  ["Iceland (Ísland)", "is", "354"],
+  ["India (भारत)", "in", "91"],
+  ["Indonesia", "id", "62"],
+  ["Iran (‫ایران‬‎)", "ir", "98"],
+  ["Iraq (‫العراق‬‎)", "iq", "964"],
+  ["Ireland", "ie", "353"],
+  ["Isle of Man", "im", "44", 2],
+  ["Israel (‫ישראל‬‎)", "il", "972"],
+  ["Italy (Italia)", "it", "39", 0],
+  ["Jamaica", "jm", "1876"],
+  ["Japan (日本)", "jp", "81"],
+  ["Jersey", "je", "44", 3],
+  ["Jordan (‫الأردن‬‎)", "jo", "962"],
+  ["Kazakhstan (Казахстан)", "kz", "7", 1],
+  ["Kenya", "ke", "254"],
+  ["Kiribati", "ki", "686"],
+  ["Kosovo", "xk", "383"],
+  ["Kuwait (‫الكويت‬‎)", "kw", "965"],
+  ["Kyrgyzstan (Кыргызстан)", "kg", "996"],
+  ["Laos (ລາວ)", "la", "856"],
+  ["Latvia (Latvija)", "lv", "371"],
+  ["Lebanon (‫لبنان‬‎)", "lb", "961"],
+  ["Lesotho", "ls", "266"],
+  ["Liberia", "lr", "231"],
+  ["Libya (‫ليبيا‬‎)", "ly", "218"],
+  ["Liechtenstein", "li", "423"],
+  ["Lithuania (Lietuva)", "lt", "370"],
+  ["Luxembourg", "lu", "352"],
+  ["Macau (澳門)", "mo", "853"],
+  ["Macedonia (FYROM) (Македонија)", "mk", "389"],
+  ["Madagascar (Madagasikara)", "mg", "261"],
+  ["Malawi", "mw", "265"],
+  ["Malaysia", "my", "60"],
+  ["Maldives", "mv", "960"],
+  ["Mali", "ml", "223"],
+  ["Malta", "mt", "356"],
+  ["Marshall Islands", "mh", "692"],
+  ["Martinique", "mq", "596"],
+  ["Mauritania (‫موريتانيا‬‎)", "mr", "222"],
+  ["Mauritius (Moris)", "mu", "230"],
+  ["Mayotte", "yt", "262", 1],
+  ["Mexico (México)", "mx", "52"],
+  ["Micronesia", "fm", "691"],
+  ["Moldova (Republica Moldova)", "md", "373"],
+  ["Monaco", "mc", "377"],
+  ["Mongolia (Монгол)", "mn", "976"],
+  ["Montenegro (Crna Gora)", "me", "382"],
+  ["Montserrat", "ms", "1664"],
+  ["Morocco (‫المغرب‬‎)", "ma", "212", 0],
+  ["Mozambique (Moçambique)", "mz", "258"],
+  ["Myanmar (Burma) (မြန်မာ)", "mm", "95"],
+  ["Namibia (Namibië)", "na", "264"],
+  ["Nauru", "nr", "674"],
+  ["Nepal (नेपाल)", "np", "977"],
+  ["Netherlands (Nederland)", "nl", "31"],
+  ["New Caledonia (Nouvelle-Calédonie)", "nc", "687"],
+  ["New Zealand", "nz", "64"],
+  ["Nicaragua", "ni", "505"],
+  ["Niger (Nijar)", "ne", "227"],
+  ["Nigeria", "ng", "234"],
+  ["Niue", "nu", "683"],
+  ["Norfolk Island", "nf", "672"],
+  ["North Korea (조선 민주주의 인민 공화국)", "kp", "850"],
+  ["Northern Mariana Islands", "mp", "1670"],
+  ["Norway (Norge)", "no", "47", 0],
+  ["Oman (‫عُمان‬‎)", "om", "968"],
+  ["Pakistan (‫پاکستان‬‎)", "pk", "92"],
+  ["Palau", "pw", "680"],
+  ["Palestine (‫فلسطين‬‎)", "ps", "970"],
+  ["Panama (Panamá)", "pa", "507"],
+  ["Papua New Guinea", "pg", "675"],
+  ["Paraguay", "py", "595"],
+  ["Peru (Perú)", "pe", "51"],
+  ["Philippines", "ph", "63"],
+  ["Poland (Polska)", "pl", "48"],
+  ["Portugal", "pt", "351"],
+  ["Puerto Rico", "pr", "1", 3, ["787", "939"]],
+  ["Qatar (‫قطر‬‎)", "qa", "974"],
+  ["Réunion (La Réunion)", "re", "262", 0],
+  ["Romania (România)", "ro", "40"],
+  ["Russia (Россия)", "ru", "7", 0],
+  ["Rwanda", "rw", "250"],
+  ["Saint Barthélemy", "bl", "590", 1],
+  ["Saint Helena", "sh", "290"],
+  ["Saint Kitts and Nevis", "kn", "1869"],
+  ["Saint Lucia", "lc", "1758"],
+  ["Saint Martin (Saint-Martin (partie française))", "mf", "590", 2],
+  ["Saint Pierre and Miquelon (Saint-Pierre-et-Miquelon)", "pm", "508"],
+  ["Saint Vincent and the Grenadines", "vc", "1784"],
+  ["Samoa", "ws", "685"],
+  ["San Marino", "sm", "378"],
+  ["São Tomé and Príncipe (São Tomé e Príncipe)", "st", "239"],
+  ["Saudi Arabia (‫المملكة العربية السعودية‬‎)", "sa", "966"],
+  ["Senegal (Sénégal)", "sn", "221"],
+  ["Serbia (Србија)", "rs", "381"],
+  ["Seychelles", "sc", "248"],
+  ["Sierra Leone", "sl", "232"],
+  ["Singapore", "sg", "65"],
+  ["Sint Maarten", "sx", "1721"],
+  ["Slovakia (Slovensko)", "sk", "421"],
+  ["Slovenia (Slovenija)", "si", "386"],
+  ["Solomon Islands", "sb", "677"],
+  ["Somalia (Soomaaliya)", "so", "252"],
+  ["South Africa", "za", "27"],
+  ["South Korea (대한민국)", "kr", "82"],
+  ["South Sudan (‫جنوب السودان‬‎)", "ss", "211"],
+  ["Spain (España)", "es", "34"],
+  ["Sri Lanka (ශ්‍රී ලංකාව)", "lk", "94"],
+  ["Sudan (‫السودان‬‎)", "sd", "249"],
+  ["Suriname", "sr", "597"],
+  ["Svalbard and Jan Mayen", "sj", "47", 1],
+  ["Swaziland", "sz", "268"],
+  ["Sweden (Sverige)", "se", "46"],
+  ["Switzerland (Schweiz)", "ch", "41"],
+  ["Syria (‫سوريا‬‎)", "sy", "963"],
+  ["Taiwan (台灣)", "tw", "886"],
+  ["Tajikistan", "tj", "992"],
+  ["Tanzania", "tz", "255"],
+  ["Thailand (ไทย)", "th", "66"],
+  ["Timor-Leste", "tl", "670"],
+  ["Togo", "tg", "228"],
+  ["Tokelau", "tk", "690"],
+  ["Tonga", "to", "676"],
+  ["Trinidad and Tobago", "tt", "1868"],
+  ["Tunisia (‫تونس‬‎)", "tn", "216"],
+  ["Turkey (Türkiye)", "tr", "90"],
+  ["Turkmenistan", "tm", "993"],
+  ["Turks and Caicos Islands", "tc", "1649"],
+  ["Tuvalu", "tv", "688"],
+  ["U.S. Virgin Islands", "vi", "1340"],
+  ["Uganda", "ug", "256"],
+  ["Ukraine (Україна)", "ua", "380"],
+  ["United Arab Emirates (‫الإمارات العربية المتحدة‬‎)", "ae", "971"],
+  ["United Kingdom", "gb", "44", 0],
+  ["United States", "us", "1", 0],
+  ["Uruguay", "uy", "598"],
+  ["Uzbekistan (Oʻzbekiston)", "uz", "998"],
+  ["Vanuatu", "vu", "678"],
+  ["Vatican City (Città del Vaticano)", "va", "39", 1],
+  ["Venezuela", "ve", "58"],
+  ["Vietnam (Việt Nam)", "vn", "84"],
+  ["Wallis and Futuna (Wallis-et-Futuna)", "wf", "681"],
+  ["Western Sahara (‫الصحراء الغربية‬‎)", "eh", "212", 1],
+  ["Yemen (‫اليمن‬‎)", "ye", "967"],
+  ["Zambia", "zm", "260"],
+  ["Zimbabwe", "zw", "263"],
+  ["Åland Islands", "ax", "358", 1]
+];
+
+export default allCountries.map(country => ({
+  name: country[0],
+  iso2: country[1].toUpperCase(),
+  dialCode: country[2],
+  priority: country[3] || 0,
+  areaCodes: country[4] || null
+}));

package/components/fields/phone/field.vue

@@ -0,0 +1,348 @@
+<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="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: {
+    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>