maz-ui
Version:
A standalone components library for Vue.Js 3 & Nuxt.Js 3
205 lines (204 loc) • 11.3 kB
JavaScript
import { defineComponent, computed, defineAsyncComponent, createElementBlock, openBlock, normalizeStyle, normalizeClass, createVNode, mergeProps, unref, withCtx, createElementVNode, createCommentVNode, renderSlot, createBlock, toDisplayString } from "vue";
import { useTranslations } from "@maz-ui/translations";
import { i as isServer } from "../chunks/vClickOutside.DIOiluy0.js";
import { useDisplayNames } from "../composables/useDisplayNames.js";
import { useInstanceUniqId } from "../composables/useInstanceUniqId.js";
import MazSelect from "./MazSelect.js";
import { _ as _export_sfc } from "../chunks/_plugin-vue_export-helper.B--vMWp3.js";
import '../assets/MazSelectCountry.BR2tSQzn.css';function getBrowserLocale() {
try {
return isServer() ? void 0 : globalThis.navigator.language;
} catch (error) {
throw new Error(`[MazInputPhoneNumber] (browserLocale) ${error}`);
}
}
const _supportedCodes = ["ad", "ae", "af", "ag", "ai", "al", "am", "ao", "aq", "ar", "as", "at", "au", "aw", "ax", "az", "ba", "bb", "bd", "be", "bf", "bg", "bh", "bi", "bj", "bl", "bm", "bn", "bo", "bq", "br", "bs", "bt", "bv", "bw", "by", "bz", "ca", "cc", "cd", "cf", "cg", "ch", "ci", "ck", "cl", "cm", "cn", "co", "cr", "cu", "cv", "cw", "cx", "cy", "cz", "de", "dj", "dk", "dm", "do", "dz", "ec", "ee", "eg", "eh", "er", "es", "et", "eu", "fi", "fj", "fk", "fm", "fo", "fr", "ga", "gb", "gb-eng", "gb-nir", "gb-sct", "gb-wls", "gd", "ge", "gf", "gg", "gh", "gi", "gl", "gm", "gn", "gp", "gq", "gr", "gs", "gt", "gu", "gw", "gy", "hk", "hm", "hn", "hr", "ht", "hu", "id", "ie", "il", "im", "in", "io", "iq", "ir", "is", "it", "je", "jm", "jo", "jp", "ke", "kg", "kh", "ki", "km", "kn", "kp", "kr", "kw", "ky", "kz", "la", "lb", "lc", "li", "lk", "lr", "ls", "lt", "lu", "lv", "ly", "ma", "mc", "md", "me", "mf", "mg", "mh", "mk", "ml", "mm", "mn", "mo", "mp", "mq", "mr", "ms", "mt", "mu", "mv", "mw", "mx", "my", "mz", "na", "nc", "ne", "nf", "ng", "ni", "nl", "no", "np", "nr", "nu", "nz", "om", "pa", "pe", "pf", "pg", "ph", "pk", "pl", "pm", "pn", "pr", "ps", "pt", "pw", "py", "qa", "re", "ro", "rs", "ru", "rw", "sa", "sb", "sc", "sd", "se", "sg", "sh", "si", "sj", "sk", "sl", "sm", "sn", "so", "sr", "ss", "st", "sv", "sx", "sy", "sz", "tc", "td", "tf", "tg", "th", "tj", "tk", "tl", "tm", "tn", "to", "tr", "tt", "tv", "tw", "tz", "ua", "ug", "um", "un", "us", "us-ak", "us-al", "us-ar", "us-az", "us-ca", "us-co", "us-ct", "us-de", "us-fl", "us-ga", "us-hi", "us-ia", "us-id", "us-il", "us-in", "us-ks", "us-ky", "us-la", "us-ma", "us-md", "us-me", "us-mi", "us-mn", "us-mo", "us-ms", "us-mt", "us-nc", "us-nd", "us-ne", "us-nh", "us-nj", "us-nm", "us-nv", "us-ny", "us-oh", "us-ok", "us-or", "us-pa", "us-ri", "us-sc", "us-sd", "us-tn", "us-tx", "us-ut", "us-va", "us-vt", "us-wa", "us-wi", "us-wv", "us-wy", "uy", "uz", "va", "vc", "ve", "vg", "vi", "vn", "vu", "wf", "ws", "xk", "ye", "yt", "za", "zm", "zw"];
function getCountryFlagUrl(countryIsoCode, size) {
const code = countryIsoCode.toLowerCase();
if (_supportedCodes.includes(code))
return size ? `https://flagcdn.com/${size}/${code}.png` : `https://flagcdn.com/${code}.svg`;
}
const _hoisted_1 = {
key: 0,
class: "m-select-country__select__item__flag-container"
}, _hoisted_2 = {
key: 1,
class: "m-select-country__select__item__list-flag"
}, _hoisted_3 = { class: "maz-text-muted" }, _sfc_main = /* @__PURE__ */ defineComponent({
inheritAttrs: !1,
__name: "MazSelectCountry",
props: {
style: {},
class: {},
id: {},
color: { default: "primary" },
size: { default: "md" },
preferredCodes: {},
ignoredCodes: {},
onlyCodes: {},
listPosition: {},
hideFlags: { type: Boolean },
search: { type: Boolean, default: !0 },
showCodeInList: { type: Boolean, default: !1 },
locale: {},
success: { type: Boolean },
error: { type: Boolean },
warning: { type: Boolean },
displayCode: { type: Boolean },
searchThreshold: {},
translations: {},
hint: {},
options: {},
displayNamesOptions: { default: () => ({ type: "region", languageDisplay: "standard", fallback: "code", style: "long" }) },
codesType: {},
open: { type: Boolean },
label: {},
placeholder: {},
modelValue: {},
optionValueKey: { default: "code" },
optionLabelKey: { default: "name" },
optionInputValueKey: { default: "name" },
preferPosition: {},
fallbackPosition: {},
itemHeight: {},
maxListHeight: {},
maxListWidth: { default: 250 },
minListHeight: {},
minListWidth: { default: 200 },
searchFunction: { type: Function },
required: { type: Boolean },
disabled: { type: Boolean },
block: { type: Boolean },
autocomplete: {},
formatInputValue: { type: Function },
transition: {}
},
emits: ["update:model-value"],
setup(__props) {
const instanceId = useInstanceUniqId({
componentName: "MazSelectCountry",
providedId: __props.id
}), { t, locale: mazLocale } = useTranslations(), locale = computed(() => __props.locale ?? mazLocale.value ?? getBrowserLocale()), MazLazyImg = defineAsyncComponent(() => import("./MazLazyImg.js")), { getAllDisplayNames } = useDisplayNames(locale), _codesType = computed(() => __props.codesType ? __props.codesType : __props.displayNamesOptions.type === "region" ? "country" : "iso"), displayNames = getAllDisplayNames({
type: () => __props.displayNamesOptions.type,
languageDisplay: () => __props.displayNamesOptions.languageDisplay,
fallback: () => __props.displayNamesOptions.fallback,
style: () => __props.displayNamesOptions.style,
onlyCodes: () => __props.onlyCodes,
excludedCodes: () => __props.ignoredCodes,
preferredCodes: () => __props.preferredCodes,
codesType: _codesType
}), countriesOptions = computed(() => __props.options ? __props.options : displayNames?.value ?? []), messages = computed(() => ({
searchPlaceholder: __props.translations?.searchPlaceholder ?? t("selectCountry.searchPlaceholder")
}));
function getFlagUrl(code, size = "h20") {
return getCountryFlagUrl(code.slice(0, 2), size) || getCountryFlagUrl(code.slice(3, 5), size) || getCountryFlagUrl(code, size);
}
const flagUrl = computed(() => {
if (__props.modelValue)
return getFlagUrl(__props.modelValue);
});
return (_ctx, _cache) => (openBlock(), createElementBlock("div", {
class: normalizeClass(["m-select-country m-reset-css", [__props.class, { "--no-flags": __props.hideFlags }]]),
style: normalizeStyle(__props.style)
}, [
createVNode(MazSelect, mergeProps({
id: unref(instanceId),
"model-value": __props.modelValue
}, _ctx.$attrs, {
class: "m-select-country__select",
"option-value-key": __props.optionValueKey,
"option-label-key": __props.optionLabelKey,
"option-input-value-key": __props.displayCode ? "code" : __props.optionInputValueKey,
"max-list-width": __props.maxListWidth,
"min-list-width": __props.minListWidth,
disabled: __props.disabled,
color: __props.color,
placeholder: __props.placeholder,
label: __props.label,
size: __props.size,
multiple: !1,
"list-position": __props.listPosition,
error: __props.error,
warning: __props.warning,
success: __props.success,
search: __props.search,
block: __props.block,
autocomplete: __props.autocomplete,
"item-height": __props.itemHeight,
"max-list-height": __props.maxListHeight,
"min-list-height": __props.minListHeight,
required: __props.required,
"search-function": __props.searchFunction,
"format-input-value": __props.formatInputValue,
translations: messages.value,
"search-threshold": __props.searchThreshold,
options: countriesOptions.value,
hint: __props.hint,
open: __props.open,
"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => _ctx.$emit("update:model-value", $event))
}), {
"left-icon": withCtx(() => [
renderSlot(_ctx.$slots, "selector-flag", { countryCode: __props.modelValue }, () => [
flagUrl.value && !__props.hideFlags ? (openBlock(), createBlock(unref(MazLazyImg), {
key: 0,
src: flagUrl.value,
alt: __props.modelValue,
width: "20",
height: "20",
class: "maz-size-5 maz-rounded",
"img-class": "maz-size-5 maz-rounded"
}, null, 8, ["src", "alt"])) : createCommentVNode("", !0)
], !0)
]),
"no-results": withCtx(() => [
renderSlot(_ctx.$slots, "no-results", {}, void 0, !0)
]),
default: withCtx(({ option, isSelected }) => [
createElementVNode("div", {
class: normalizeClass(["m-select-country__select__item", {
"m-select-country__select__item--selected": isSelected
}])
}, [
!__props.hideFlags && typeof option.code == "string" ? (openBlock(), createElementBlock("span", _hoisted_1, [
renderSlot(_ctx.$slots, "country-list-flag", {
option,
isSelected
}, () => [
option.code && getFlagUrl(option.code) ? (openBlock(), createBlock(unref(MazLazyImg), {
key: 0,
src: getFlagUrl(option.code),
alt: `${option.name} flag`,
width: "20",
height: "20",
class: "maz-size-5 maz-rounded",
"img-class": "maz-rounded maz-h-5 maz-w-5"
}, null, 8, ["src", "alt"])) : (openBlock(), createElementBlock("span", _hoisted_2, toDisplayString(option.code), 1))
], !0)
])) : createCommentVNode("", !0),
createElementVNode("div", {
class: normalizeClass(["maz-flex maz-flex-1 maz-gap-2 maz-truncate", { "maz-font-semibold": isSelected }])
}, [
__props.showCodeInList ? renderSlot(_ctx.$slots, "country-list-code", {
key: 0,
option,
isSelected
}, () => [
createElementVNode("span", _hoisted_3, toDisplayString(option.code), 1)
], !0) : createCommentVNode("", !0),
renderSlot(_ctx.$slots, "country-list-name", {
option,
isSelected
}, () => [
createElementVNode("span", null, toDisplayString(option.name), 1)
], !0)
], 2)
], 2)
]),
_: 3
}, 16, ["id", "model-value", "option-value-key", "option-label-key", "option-input-value-key", "max-list-width", "min-list-width", "disabled", "color", "placeholder", "label", "size", "list-position", "error", "warning", "success", "search", "block", "autocomplete", "item-height", "max-list-height", "min-list-height", "required", "search-function", "format-input-value", "translations", "search-threshold", "options", "hint", "open"])
], 6));
}
}), MazSelectCountry = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-e22ddc22"]]);
export {
MazSelectCountry as default
};