@ozdao/martyrs 0.2.488 → 0.2.489

package/dist/martyrs/src/components/FieldPhone/FieldPhone.vue.js

@@ -0,0 +1,602 @@
+import { ref, onMounted, computed, watch, nextTick, createElementBlock, openBlock, Fragment, createElementVNode, createVNode, normalizeStyle, normalizeClass, withDirectives, renderSlot, withKeys, createCommentVNode, vModelText, renderList, toDisplayString, vShow, unref, vModelDynamic, Transition, withCtx } from "vue";
+import clickOutside from "./click-outside.js";
+import allCountries from "./all-countries.js";
+/* empty css                */
+import { parsePhoneNumber } from "../../../node_modules/.pnpm/libphonenumber-js@1.12.6/node_modules/libphonenumber-js/min/exports/parsePhoneNumber.js";
+const _hoisted_1 = ["tabindex"];
+const _hoisted_2 = { class: "flex-nowrap flex flex-v-center p-medium vti__selection" };
+const _hoisted_3 = ["innerHTML"];
+const _hoisted_4 = ["placeholder", "disabled", "size"];
+const _hoisted_5 = ["onClick", "onMousemove"];
+const _hoisted_6 = ["innerHTML"];
+const _hoisted_7 = { key: 1 };
+const _hoisted_8 = ["type", "autocomplete", "autofocus", "disabled", "id", "maxlength", "name", "placeholder", "readonly", "required", "tabindex"];
+const _hoisted_9 = {
+  key: 0,
+  class: "mn-t-thin mn-b-thin invalid-feedback"
+};
+const _sfc_main = {
+  __name: "FieldPhone",
+  props: {
+    modelValue: { type: String, default: "" },
+    badClass: { type: [String, Array, Object], default: "" },
+    goodClass: { type: [String, Array, Object], default: "" },
+    badStyle: { type: [String, Array, Object], default: "" },
+    goodStyle: { type: [String, Array, Object], default: "" },
+    badInputClass: { type: [String, Array, Object], default: "" },
+    goodInputClass: { type: [String, Array, Object], default: "" },
+    badInputStyle: { type: [String, Array, Object], default: "" },
+    goodInputStyle: { type: [String, Array, Object], default: "" },
+    allCountries: { type: Array, default: () => allCountries },
+    autoFormat: { type: Boolean, default: true },
+    validation: { type: [Boolean, Object], default: false },
+    customValidate: { type: [Boolean, RegExp], default: false },
+    defaultCountry: { type: String, default: "" },
+    disabled: { type: Boolean, default: false },
+    autoDefaultCountry: { type: Boolean, default: true },
+    ignoredCountries: { type: Array, default: () => [] },
+    invalidMsg: { type: String, default: "" },
+    mode: { type: String, default: "auto" },
+    onlyCountries: { type: Array, default: () => [] },
+    preferredCountries: { type: Array, default: () => [] },
+    validCharactersOnly: { type: Boolean, default: false },
+    rootClass: { type: [String, Array, Object], default: "" },
+    inputClass: { type: [String, Array, Object], default: "" },
+    rootStyle: { type: [String, Array, Object], default: "" },
+    dropdownStyle: { type: [String, Array, Object], default: "" },
+    listStyle: { type: [String, Array, Object], default: "" },
+    inputStyle: { type: [String, Array, Object], default: "" },
+    inputId: { type: [String, Array, Object], default: "" },
+    Placeholder: { type: [String, Object, Function], default: "" },
+    dropdownOptions: {
+      type: Object,
+      default: () => ({
+        showDialCodeInList: true,
+        showDialCodeInSelection: false,
+        showFlags: true,
+        tabindex: 0
+      })
+    },
+    inputOptions: {
+      type: Object,
+      default: () => ({
+        autocomplete: "on",
+        autofocus: false,
+        id: "",
+        maxlength: 25,
+        name: "telephone",
+        placeholder: "Enter a phone number",
+        readonly: false,
+        required: false,
+        tabindex: 0,
+        type: "tel",
+        styleClasses: ""
+      })
+    }
+  },
+  emits: [
+    "update:modelValue",
+    "change",
+    "validate",
+    "country-changed",
+    "open",
+    "close",
+    "blur",
+    "focus",
+    "enter",
+    "space"
+  ],
+  setup(__props, { emit: __emit }) {
+    let vClickOutside = clickOutside;
+    const props = __props;
+    const emits = __emit;
+    const phone = ref(props.modelValue || "");
+    const activeCountryCode = ref("");
+    const dialCodeInput = ref("");
+    const dialCodeFilter = ref("");
+    const open = ref(false);
+    const finishMounted = ref(false);
+    const selectedIndex = ref(null);
+    const typeToFindInput = ref("");
+    const typeToFindTimer = ref(null);
+    const dropdownOpenDirection = ref("below");
+    const parsedPlaceholder = ref(props.Placeholder !== "" ? props.Placeholder : props.inputOptions.placeholder);
+    const rootElement = ref(null);
+    const list = ref(null);
+    const input = ref(null);
+    onMounted(() => {
+      if (props.modelValue) {
+        phone.value = props.modelValue;
+      }
+      cleanInvalidCharacters();
+      initializeCountry().then(() => {
+        var _a;
+        if (!phone.value && ((_a = props.inputOptions) == null ? void 0 : _a.showDialCode) && activeCountryCode.value) {
+          phone.value = `+${activeCountryCode.value}`;
+        }
+        if (activeCountry.value && props.dropdownOptions.showDialCodeInSelection) {
+          dialCodeInput.value = `+${activeCountry.value.dialCode}`;
+        }
+        emits("validate", phoneObject.value);
+      }).catch(console.error).then(() => {
+        finishMounted.value = true;
+      });
+    });
+    const activeCountry = computed(() => {
+      return findCountry(activeCountryCode.value);
+    });
+    const activeCountryFlag = computed(() => {
+      return activeCountry.value ? activeCountry.value.flag : null;
+    });
+    const parsedMode = computed(() => {
+      if (props.mode === "auto") {
+        if (!phone.value || phone.value[0] !== "+") {
+          return "national";
+        }
+        return "international";
+      }
+      if (!["international", "national"].includes(props.mode)) {
+        console.error('Invalid value of prop "mode"');
+        return "international";
+      }
+      return props.mode;
+    });
+    const filteredCountries = computed(() => {
+      let countries = props.allCountries;
+      if (props.onlyCountries && props.onlyCountries.length) {
+        countries = countries.filter(
+          ({ iso2 }) => props.onlyCountries.includes(iso2.toUpperCase())
+        );
+      } else if (props.ignoredCountries && props.ignoredCountries.length) {
+        countries = countries.filter(
+          ({ iso2 }) => !props.ignoredCountries.includes(iso2.toUpperCase()) && !props.ignoredCountries.includes(iso2.toLowerCase())
+        );
+      }
+      if (dialCodeFilter.value) {
+        const filterValue = dialCodeFilter.value.replace("+", "");
+        countries = countries.filter(
+          (country) => country.dialCode.startsWith(filterValue)
+        );
+      }
+      return countries;
+    });
+    const filteredAndSortedCountries = computed(() => {
+      const preferredCountries = getCountries(props.preferredCountries).filter((country) => {
+        if (!dialCodeFilter.value) return true;
+        const filterValue = dialCodeFilter.value.replace("+", "");
+        return country.dialCode.startsWith(filterValue);
+      }).map((country) => ({ ...country, preferred: true }));
+      return [...preferredCountries, ...filteredCountries.value];
+    });
+    const phoneObject = computed(() => {
+      var _a, _b, _c;
+      let result = {};
+      if (((_a = phone.value) == null ? void 0 : _a[0]) === "+") {
+        result = parsePhoneNumber(phone.value) || {};
+      } else {
+        result = parsePhoneNumber(phone.value, activeCountryCode.value) || {};
+      }
+      const { metadata, ...phoneDetails } = result;
+      let valid = (_b = result.isValid) == null ? void 0 : _b.call(result);
+      let formatted = phone.value;
+      if (valid) {
+        formatted = (_c = result.format) == null ? void 0 : _c.call(result, parsedMode.value.toUpperCase(), { nationalPrefix: false });
+      }
+      if (result.country && (props.ignoredCountries.length || props.onlyCountries.length)) {
+        if (!findCountry(result.country)) {
+          valid = false;
+          result = { ...result, country: null };
+        }
+      }
+      return {
+        ...phoneDetails,
+        countryCode: result.country,
+        valid,
+        country: activeCountry.value,
+        formatted
+      };
+    });
+    const classes = computed(() => {
+      return phoneObject.value.valid === true ? props.goodClass : phoneObject.value.valid === false ? props.badClass : void 0;
+    });
+    const styles = computed(() => {
+      return phoneObject.value.valid === true ? props.goodStyle : phoneObject.value.valid === false ? props.badStyle : void 0;
+    });
+    const Iclasses = computed(() => {
+      return phoneObject.value.valid === true ? props.goodInputClass : phoneObject.value.valid === false ? props.badInputClass : void 0;
+    });
+    const Istyles = computed(() => {
+      return phoneObject.value.valid === true ? props.goodInputStyle : phoneObject.value.valid === false ? props.badInputStyle : void 0;
+    });
+    watch(activeCountry, (newValue, oldValue) => {
+      if (!newValue && (oldValue == null ? void 0 : oldValue.iso2)) {
+        activeCountryCode.value = oldValue.iso2;
+        return;
+      }
+      if (newValue == null ? void 0 : newValue.iso2) {
+        emits("country-changed", newValue);
+        resetPlaceholder();
+        dialCodeInput.value = `+${newValue.dialCode}`;
+      }
+    });
+    watch(() => phoneObject.value.countryCode, (newValue) => {
+      activeCountryCode.value = newValue;
+    });
+    watch(() => phoneObject.value.valid, () => {
+      emits("validate", phoneObject.value);
+    });
+    watch(() => phoneObject.value.formatted, (newValue) => {
+      if (!props.autoFormat || props.customValidate) {
+        return;
+      }
+      emitInput(newValue);
+      nextTick(() => {
+        if (newValue && !props.modelValue) {
+          phone.value = newValue;
+        }
+      });
+    });
+    watch(() => props.inputOptions.placeholder, () => {
+      resetPlaceholder();
+    });
+    watch(() => props.modelValue, (newValue, oldValue) => {
+      if (!testCharacters()) {
+        nextTick(() => {
+          phone.value = oldValue;
+          onInput();
+        });
+      } else {
+        phone.value = newValue;
+      }
+    });
+    watch(open, (isDropdownOpened) => {
+      if (isDropdownOpened) {
+        setDropdownPosition();
+        emits("open");
+      } else {
+        emits("close");
+      }
+    });
+    function onDialCodeInput() {
+      if (!dialCodeInput.value.startsWith("+")) {
+        dialCodeInput.value = "+" + dialCodeInput.value.replace(/^\+*/, "");
+      }
+      dialCodeInput.value = dialCodeInput.value.replace(/[^\+\d]/g, "");
+      const plusCount = (dialCodeInput.value.match(/\+/g) || []).length;
+      if (plusCount > 1) {
+        dialCodeInput.value = "+" + dialCodeInput.value.replace(/\+/g, "");
+      }
+      dialCodeFilter.value = dialCodeInput.value;
+      open.value = true;
+      const exactMatch = filteredCountries.value.find(
+        (country) => `+${country.dialCode}` === dialCodeInput.value
+      );
+      if (exactMatch && filteredAndSortedCountries.value.length === 1) {
+        choose(exactMatch);
+      }
+    }
+    function onDialCodeBlur() {
+      setTimeout(() => {
+        if (!dialCodeInput.value && activeCountry.value) {
+          dialCodeInput.value = `+${activeCountry.value.dialCode}`;
+        }
+      }, 200);
+    }
+    function openDropdown() {
+      if (!props.disabled) {
+        open.value = true;
+      }
+    }
+    function setCaretPosition(ctrl, pos) {
+      if (ctrl.setSelectionRange) {
+        ctrl.focus();
+        ctrl.setSelectionRange(pos, pos);
+      } else if (ctrl.createTextRange) {
+        const range = ctrl.createTextRange();
+        range.collapse(true);
+        range.moveEnd("character", pos);
+        range.moveStart("character", pos);
+        range.select();
+      }
+    }
+    function resetPlaceholder() {
+      parsedPlaceholder.value = props.inputOptions.placeholder;
+    }
+    function initializeCountry() {
+      return new Promise((resolve) => {
+        var _a;
+        if (((_a = phone.value) == null ? void 0 : _a[0]) === "+") {
+          resolve();
+          return;
+        }
+        if (props.defaultCountry) {
+          choose(props.defaultCountry);
+          resolve();
+          return;
+        }
+        const fallbackCountry = props.preferredCountries[0] || filteredCountries.value[0];
+        if (props.autoDefaultCountry) {
+          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);
+          }).then((res) => {
+            choose(res || activeCountryCode.value);
+          }).catch((error) => {
+            console.warn(error);
+            choose(fallbackCountry);
+          }).finally(() => {
+            resolve();
+          });
+        } else {
+          choose(fallbackCountry);
+          resolve();
+        }
+      });
+    }
+    function getCountries(list2 = []) {
+      return list2.map((countryCode) => findCountry(countryCode)).filter(Boolean);
+    }
+    function findCountry(iso = "") {
+      return filteredCountries.value.find((country) => country.iso2 === iso.toUpperCase());
+    }
+    function getItemClass(index, iso2) {
+      const highlighted = selectedIndex.value === index;
+      const lastPreferred = index === props.preferredCountries.length - 1;
+      const preferred = props.preferredCountries.some((c) => c.toUpperCase() === iso2);
+      return { highlighted, "last-preferred": lastPreferred, preferred };
+    }
+    function choose(country) {
+      var _a;
+      let parsedCountry = typeof country === "string" ? findCountry(country) : country;
+      if (!parsedCountry) return;
+      if (((_a = phone.value) == null ? void 0 : _a[0]) === "+" && parsedCountry.iso2 && phoneObject.value.nationalNumber) {
+        activeCountryCode.value = parsedCountry.iso2;
+        phone.value = parsePhoneNumber(
+          phoneObject.value.nationalNumber,
+          parsedCountry.iso2
+        ).formatInternational();
+      } else {
+        activeCountryCode.value = parsedCountry.iso2;
+      }
+      dialCodeInput.value = `+${parsedCountry.dialCode}`;
+      dialCodeFilter.value = "";
+      open.value = false;
+      nextTick(() => {
+        if (input.value) {
+          input.value.focus();
+        }
+      });
+      emitInput(phone.value);
+    }
+    function cleanInvalidCharacters() {
+      const currentPhone = phone.value;
+      if (props.validCharactersOnly) {
+        const results = phone.value.match(/[()\-+0-9\s]*/g);
+        phone.value = results.join("");
+      }
+      if (props.customValidate && props.customValidate instanceof RegExp) {
+        const results = phone.value.match(props.customValidate);
+        phone.value = results ? results.join("") : "";
+      }
+      if (currentPhone !== phone.value) {
+        emitInput(phone.value);
+      }
+    }
+    function testCharacters() {
+      if (props.validCharactersOnly) {
+        const result = /^[()\-+0-9\s]*$/.test(phone.value);
+        if (!result) return false;
+      }
+      if (props.customValidate) {
+        return testCustomValidate();
+      }
+      return true;
+    }
+    function testCustomValidate() {
+      return props.customValidate instanceof RegExp ? props.customValidate.test(phone.value) : false;
+    }
+    function onInput() {
+      input.value.setCustomValidity(phoneObject.valid ? "" : props.invalidMsg);
+      emitInput(phone.value);
+    }
+    function emitInput(value) {
+      emits("update:modelValue", value);
+      if (phoneObject.value.valid) {
+        emits("change", phoneObject.value.number);
+        emits("country", phoneObject.value.number);
+      } else {
+        emits("country", null);
+      }
+    }
+    function onBlur() {
+      emits("blur");
+    }
+    function onFocus() {
+      setCaretPosition(input.value, phone.value.length);
+      emits("focus");
+    }
+    function onEnter() {
+      emits("enter");
+    }
+    function onSpace() {
+      emits("space");
+    }
+    function clickedOutside() {
+      open.value = false;
+      dialCodeFilter.value = "";
+    }
+    function keyboardNav(e) {
+      if (e.keyCode === 40) {
+        e.preventDefault();
+        open.value = true;
+        selectedIndex.value = selectedIndex.value === null ? 0 : Math.min(filteredAndSortedCountries.value.length - 1, selectedIndex.value + 1);
+        nextTick(() => {
+          const selEle = list.value.children[selectedIndex.value];
+          if (selEle.offsetTop + selEle.clientHeight > list.value.scrollTop + list.value.clientHeight) {
+            list.value.scrollTop = selEle.offsetTop - list.value.clientHeight + selEle.clientHeight;
+          }
+        });
+      } else if (e.keyCode === 38) {
+        e.preventDefault();
+        open.value = true;
+        selectedIndex.value = selectedIndex.value === null ? filteredAndSortedCountries.value.length - 1 : Math.max(0, selectedIndex.value - 1);
+        nextTick(() => {
+          const selEle = list.value.children[selectedIndex.value];
+          if (selEle.offsetTop < list.value.scrollTop) {
+            list.value.scrollTop = selEle.offsetTop;
+          }
+        });
+      } else if (e.keyCode === 13) {
+        e.preventDefault();
+        if (selectedIndex.value !== null) {
+          choose(filteredAndSortedCountries.value[selectedIndex.value]);
+        }
+      } else {
+        if (e.target.classList.contains("vti__country-code-input")) return;
+        typeToFindInput.value += e.key;
+        clearTimeout(typeToFindTimer);
+        typeToFindTimer = setTimeout(() => {
+          typeToFindInput.value = "";
+        }, 700);
+        nextTick(() => {
+          const typedCountryI = filteredAndSortedCountries.value.slice(props.preferredCountries.length).findIndex((c) => c.name.toLowerCase().startsWith(typeToFindInput.value));
+          if (typedCountryI >= 0) {
+            selectedIndex.value = props.preferredCountries.length + typedCountryI;
+            const selEle = list.value.children[selectedIndex.value];
+            const needToScroll = selEle.offsetTop < list.value.scrollTop || selEle.offsetTop + selEle.clientHeight > list.value.scrollTop + list.value.clientHeight;
+            if (needToScroll) {
+              list.value.scrollTop = selEle.offsetTop - list.value.clientHeight / 2;
+            }
+          }
+        });
+      }
+    }
+    function reset() {
+      selectedIndex.value = filteredAndSortedCountries.value.map((c) => c.iso2).indexOf(activeCountryCode.value);
+      open.value = false;
+    }
+    function setDropdownPosition() {
+      const spaceBelow = window.innerHeight - rootElement.value.getBoundingClientRect().bottom;
+      const hasEnoughSpaceBelow = spaceBelow > 200;
+      dropdownOpenDirection.value = hasEnoughSpaceBelow ? "below" : "above";
+    }
+    return (_ctx, _cache) => {
+      var _a, _b;
+      return openBlock(), createElementBlock(Fragment, null, [
+        createElementVNode("div", {
+          class: normalizeClass([[
+            __props.rootClass,
+            classes.value,
+            _ctx.$attrs.class,
+            { "bg-fourth-nano": __props.validation },
+            { disabled: __props.disabled }
+          ], "field-wrapper vue3-reactive-tel-input"]),
+          style: normalizeStyle([__props.rootStyle, styles.value]),
+          ref_key: "rootElement",
+          ref: rootElement
+        }, [
+          withDirectives((openBlock(), createElementBlock("div", {
+            class: normalizeClass([["vti__dropdown", { open: open.value }], "br-solid br-black-transp br-1px radius-thin"]),
+            style: normalizeStyle([__props.dropdownStyle]),
+            tabindex: __props.dropdownOptions.tabindex,
+            onKeydown: withKeys(reset, ["esc"])
+          }, [
+            createElementVNode("span", _hoisted_2, [
+              __props.dropdownOptions.showFlags ? (openBlock(), createElementBlock("span", {
+                key: 0,
+                innerHTML: activeCountryFlag.value,
+                class: "mn-r-nano"
+              }, null, 8, _hoisted_3)) : createCommentVNode("", true),
+              __props.dropdownOptions.showDialCodeInSelection ? withDirectives((openBlock(), createElementBlock("input", {
+                key: 1,
+                "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => dialCodeInput.value = $event),
+                onInput: onDialCodeInput,
+                onFocus: openDropdown,
+                onBlur: onDialCodeBlur,
+                onKeydown: keyboardNav,
+                type: "text",
+                class: "vti__country-code-input",
+                placeholder: `+${((_a = activeCountry.value) == null ? void 0 : _a.dialCode) || ""}`,
+                disabled: __props.disabled,
+                size: Math.max((((_b = dialCodeInput.value) == null ? void 0 : _b.length) || 0) + 1, 3),
+                maxlength: "5"
+              }, null, 40, _hoisted_4)), [
+                [vModelText, dialCodeInput.value]
+              ]) : createCommentVNode("", true)
+            ]),
+            withDirectives(createElementVNode("ul", {
+              ref_key: "list",
+              ref: list,
+              class: normalizeClass(["bs-black radius-small vti__dropdown-list", dropdownOpenDirection.value]),
+              style: normalizeStyle([__props.listStyle])
+            }, [
+              (openBlock(true), createElementBlock(Fragment, null, renderList(filteredAndSortedCountries.value, (pb, index) => {
+                return openBlock(), createElementBlock("li", {
+                  class: normalizeClass(["flex-nowrap flex w-max", ["vti__dropdown-item", getItemClass(index, pb.iso2)]]),
+                  key: pb.iso2 + (pb.preferred ? "-preferred" : ""),
+                  onClick: ($event) => choose(pb),
+                  onMousemove: ($event) => selectedIndex.value = index
+                }, [
+                  __props.dropdownOptions.showFlags ? (openBlock(), createElementBlock("span", {
+                    key: 0,
+                    innerHTML: pb.flag,
+                    class: "mn-r-thin"
+                  }, null, 8, _hoisted_6)) : createCommentVNode("", true),
+                  createElementVNode("strong", null, toDisplayString(pb.name), 1),
+                  __props.dropdownOptions.showDialCodeInList ? (openBlock(), createElementBlock("span", _hoisted_7, " +" + toDisplayString(pb.dialCode), 1)) : createCommentVNode("", true)
+                ], 42, _hoisted_5);
+              }), 128))
+            ], 6), [
+              [vShow, open.value]
+            ])
+          ], 46, _hoisted_1)), [
+            [unref(vClickOutside), clickedOutside]
+          ]),
+          withDirectives(createElementVNode("input", {
+            "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => phone.value = $event),
+            inputmode: "numeric",
+            pattern: "\\d*",
+            ref_key: "input",
+            ref: input,
+            type: __props.inputOptions.type,
+            autocomplete: __props.inputOptions.autocomplete,
+            autofocus: __props.inputOptions.autofocus,
+            class: normalizeClass(["vti__input", __props.inputOptions.styleClasses, __props.inputClass, Iclasses.value]),
+            style: normalizeStyle([__props.inputStyle, Istyles.value]),
+            disabled: __props.disabled,
+            id: __props.inputId !== "" ? __props.inputId : __props.inputOptions.id,
+            maxlength: __props.inputOptions.maxlength,
+            name: __props.inputId !== "" ? __props.inputId : __props.inputOptions.name,
+            placeholder: parsedPlaceholder.value,
+            readonly: __props.inputOptions.readonly,
+            required: __props.inputOptions.required,
+            tabindex: __props.inputOptions.tabindex,
+            onBlur,
+            onFocus,
+            onInput,
+            onKeyup: [
+              withKeys(onEnter, ["enter"]),
+              withKeys(onSpace, ["space"])
+            ]
+          }, null, 46, _hoisted_8), [
+            [vModelDynamic, phone.value]
+          ]),
+          renderSlot(_ctx.$slots, "default")
+        ], 6),
+        createVNode(Transition, { name: "fade" }, {
+          default: withCtx(() => [
+            __props.validation ? (openBlock(), createElementBlock("div", _hoisted_9, " * " + toDisplayString(__props.validation.message), 1)) : createCommentVNode("", true)
+          ]),
+          _: 1
+        })
+      ], 64);
+    };
+  }
+};
+export {
+  _sfc_main as default
+};
+//# sourceMappingURL=FieldPhone.vue.js.map