minsky-webform-formkit 1.0.0

package/src/components/FormKit/FormKitPhoneEnhanced/FormKitPhoneEnhanced.js

@@ -0,0 +1,100 @@
+import examples from 'libphonenumber-js/mobile/examples';
+import getUnicodeFlagIcon from 'country-flag-icons/unicode';
+import { getExampleNumber, parsePhoneNumber } from 'libphonenumber-js';
+import { watchEffect, nextTick } from 'vue';
+import countryCodes from './countryCodes';
+
+const isOnlyNumbers = /[0-9.]/;
+
+export default {
+  props: {
+    context: {
+      type: Object,
+    },
+  },
+
+  components: {},
+
+  beforeMount() {
+    this.setCode();
+  },
+
+  mounted() {
+    this.setCountries();
+
+    // for prefilling number from userData
+    watchEffect(async () => {
+      if (this.context.value) {
+        await nextTick(); // Ensure DOM updates if needed
+        const parsedNumber = parsePhoneNumber(this.context.value);
+        this.country = parsedNumber.country;
+        this.phone = parsedNumber.nationalNumber;
+      }
+    });
+  },
+
+  data() {
+    return {
+      country: this.context.attrs.initialCountry,
+      countries: [],
+      code: '',
+    };
+  },
+
+  computed: {
+    maskFn() {
+      const exampleNumber = getExampleNumber(this.country, examples);
+      const phoneNumber = exampleNumber.formatInternational();
+      return maskPhoneExceptCode(this.code, phoneNumber);
+    },
+  },
+
+  methods: {
+    getUnicodeFlagIcon,
+
+    setCode() {
+      this.code = countryCodes.find((obj) => obj.code === this.country).dial_code;
+    },
+
+    setCountries() {
+      const countries = [...countryCodes];
+      if (this.context.attrs.preferredCountries) {
+        if (this.context.attrs.preferredCountries) {
+          this.context.attrs.preferredCountries.reverse().forEach((prefCode) => {
+            countries.sort((a) => (a.code === prefCode ? -1 : 1));
+          });
+        }
+
+        if (this.context.attrs.initialCountry) countries.sort((a) => (a.code === this.context.attrs.initialCountry ? -1 : 1));
+        this.countries = countries;
+      }
+
+      if (this.context.attrs.initialCountry) countries.sort((a) => (a.code === this.context.attrs.initialCountry ? -1 : 1));
+      this.countries = countries;
+    },
+  },
+
+  watch: {
+    country() {
+      this.setCode();
+      this.context.value = '';
+    },
+
+    'context.value': function (val) {
+      this.context.node.input(val);
+    },
+  },
+};
+
+function maskPhoneExceptCode(code, phone) {
+  const codeDigits = String(code).replace(/\D/g, ''); // remove + or other chars
+  let matchIndex = 0;
+
+  return phone.replace(/\d/g, (digit) => {
+    if (matchIndex < codeDigits.length && digit === codeDigits[matchIndex]) {
+      matchIndex += 1;
+      return digit;
+    }
+    return '#';
+  });
+}

package/src/components/FormKit/FormKitPhoneEnhanced/FormKitPhoneEnhanced.vue

@@ -0,0 +1,30 @@
+<!-- prettier-ignore -->
+<template>
+  <div class="formkit-phone-enhanced">
+    <div class="formkit-phone-enhanced__flag">
+      <select class="formkit-phone-enhanced__list" v-model="country">
+        <option v-for="c in countries" :key="c.code" :value="c.code">{{ getUnicodeFlagIcon(c.code) }} {{ c.name }}</option>
+      </select>
+      <div class="formkit-phone-enhanced__flag-wrapper">
+        <img :src="`https://purecatamphetamine.github.io/country-flag-icons/3x2/${country}.svg`" alt="" />
+      </div>
+      <Icon name="chevron-down-fat" />
+    </div>
+    <!-- label field filled is in here (and hidden with css) to send label value to local storage (see setUserData() in Webform.vue) -->
+    <FormKit
+      :classes="{
+        outer: 'formkit-phone-enhanced__outer',
+        input: 'formkit-phone-enhanced__input',
+      }"
+      :label="context.label"
+      type="mask"
+      :name="context.node.name"
+      :id="context.id"
+      :mask="maskFn"
+      :key="code"
+      v-model="context.value"
+      />
+  </div>
+</template>
+<!-- prettier-ignore -->
+<script src="./FormKitPhoneEnhanced.js"></script>