maz-ui
Version:
A standalone components library for Vue.Js 3 & Nuxt.Js 3
115 lines (114 loc) • 5 kB
JavaScript
import { defineComponent, mergeModels, useModel, ref, computed, onMounted, useTemplateRef, createBlock, openBlock, mergeProps, unref } from "vue";
import { useTranslations } from "@maz-ui/translations";
import { useInjectStrict } from "../composables/useInjectStrict.js";
import MazInput from "../components/MazInput.js";
import { u as useLibphonenumber, a as useMazInputPhoneNumber } from "./MazInputPhoneNumber.CDy6n_Qj.js";
import { _ as _export_sfc } from "./_plugin-vue_export-helper.B--vMWp3.js";
import '../assets/PhoneInput.DkOXlrI9.css';const _sfc_main = /* @__PURE__ */ defineComponent({
__name: "PhoneInput",
props: /* @__PURE__ */ mergeModels({
style: {},
class: {},
placeholder: {},
label: {},
topLabel: {},
assistiveText: {},
color: {},
type: {},
required: { type: Boolean },
disabled: { type: Boolean },
readonly: { type: Boolean },
id: {},
error: { type: Boolean },
success: { type: Boolean },
warning: { type: Boolean },
hint: {},
inputClasses: {},
border: { type: Boolean },
inputmode: {},
size: {},
debounce: { type: [Boolean, Number] },
autoFocus: { type: Boolean },
borderActive: { type: Boolean },
leftIcon: { type: [String, Function, Object] },
rightIcon: { type: [String, Function, Object] },
roundedSize: {},
block: { type: Boolean },
name: {},
autocomplete: {},
loading: { type: Boolean },
locales: {},
example: { type: Boolean },
hasRadius: { type: Boolean },
autoFormat: { type: [String, Boolean] }
}, {
modelValue: {},
modelModifiers: {}
}),
emits: ["update:modelValue"],
setup(__props, { expose: __expose }) {
const { getPhoneNumberExample, getAsYouTypeFormat, loadExamples } = useLibphonenumber(), { sanitizePhoneNumber } = useMazInputPhoneNumber(), { results, selectedCountry } = useInjectStrict("mazInputPhoneNumberData"), modelValue = useModel(__props, "modelValue"), inputFocused = ref(!1), asYouTypeFormatted = computed(() => {
const phoneNumberToFormat = results.value.isValid ? results.value.formatNational : modelValue.value;
return getAsYouTypeFormat(selectedCountry.value, phoneNumberToFormat) || phoneNumberToFormat;
}), displayedPhoneNumber = computed({
get: () => !inputFocused.value && __props.autoFormat === "blur" || __props.autoFormat === "typing" ? asYouTypeFormatted.value : modelValue.value,
set: (value) => {
modelValue.value = sanitizePhoneNumber(value);
}
}), { t } = useTranslations();
function getCountryPhoneNumberExample(selectedCountry2) {
const example = getPhoneNumberExample(selectedCountry2);
if (example)
return __props.locales.example ? __props.locales.example.replace("{example}", example) : t("inputPhoneNumber.phoneInput.example", { example });
}
const inputLabelOrPlaceholder = computed(() => {
if (__props.label || __props.placeholder)
return __props.label || __props.placeholder;
const defaultPlaceholder = __props.locales.placeholder;
if (!__props.example || !inputFocused.value)
return defaultPlaceholder;
{
const phoneExample = getCountryPhoneNumberExample(selectedCountry.value);
return results.value?.isValid || !phoneExample ? defaultPlaceholder : phoneExample;
}
}), inputProps = computed(() => __props.placeholder ? { placeholder: inputLabelOrPlaceholder.value } : { label: inputLabelOrPlaceholder.value });
onMounted(() => {
__props.example && loadExamples();
});
const inputRef = useTemplateRef("input");
return __expose({
/**
* Focus the input
* @description This is used to focus the input
*/
focus: () => {
inputRef.value?.$el.querySelector("input")?.focus();
}
}), (_ctx, _cache) => (openBlock(), createBlock(MazInput, mergeProps({ id: _ctx.id }, { ..._ctx.$attrs, ...inputProps.value }, {
ref: "input",
modelValue: displayedPhoneNumber.value,
"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => displayedPhoneNumber.value = $event),
disabled: _ctx.disabled,
color: _ctx.color,
error: _ctx.error,
size: _ctx.size,
success: _ctx.success,
block: "",
name: _ctx.name,
inputmode: _ctx.inputmode,
autocomplete: _ctx.autocomplete,
class: ["m-phone-input", [
{
"--border-radius": _ctx.hasRadius,
"--error": _ctx.error || !unref(results).isValid,
"--focused": inputFocused.value
}
]],
onFocus: _cache[1] || (_cache[1] = ($event) => inputFocused.value = !0),
onBlur: _cache[2] || (_cache[2] = ($event) => inputFocused.value = !1)
}), null, 16, ["id", "modelValue", "disabled", "color", "error", "size", "success", "name", "inputmode", "autocomplete", "class"]));
}
}), PhoneInput = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-3777a81d"]]);
export {
PhoneInput as default
};