maz-ui
Version:
A standalone components library for Vue.Js 3 & Nuxt.Js 3
125 lines (124 loc) • 6.31 kB
JavaScript
import { defineComponent, defineAsyncComponent, computed, createBlock, openBlock, resolveDynamicComponent, normalizeClass, normalizeStyle, withCtx, createElementVNode, renderSlot, createElementBlock, createCommentVNode, Fragment, unref, mergeProps, toDisplayString, createVNode } from "vue";
import { MazPencil } from "@maz-ui/icons";
import { _ as _export_sfc } from "../chunks/_plugin-vue_export-helper.B--vMWp3.js";
import '../assets/MazAvatar.DuuEqNTd.css';const _hoisted_1 = ["tabindex"], _hoisted_2 = ["src", "alt", "loading"], _hoisted_3 = { class: "m-avatar__initial" }, _hoisted_4 = {
key: 0,
class: "m-avatar__caption"
}, _sfc_main = /* @__PURE__ */ defineComponent({
inheritAttrs: !1,
__name: "MazAvatar",
props: {
style: {},
class: {},
src: { default: void 0 },
caption: { default: void 0 },
href: { default: void 0 },
to: { default: void 0 },
alt: { default: "avatar image" },
target: { default: "_self" },
size: { default: void 0 },
bordered: { type: Boolean },
clickable: { type: Boolean },
square: { type: Boolean },
noElevation: { type: Boolean },
showCaption: { type: Boolean },
imageHeightFull: { type: Boolean },
hideLoader: { type: Boolean },
buttonColor: { default: "info" },
hideClickableIcon: { type: Boolean },
letterCount: { default: void 0 },
roundedSize: { default: "full" },
fallbackSrc: { default: void 0 },
loading: { default: "intersecting" }
},
emits: ["click", "intersecting", "loading", "loaded", "error"],
setup(__props, { emit: __emit }) {
const props = __props, emits = __emit, MazLazyImg = defineAsyncComponent(() => import("./MazLazyImg.js")), componentType = computed(() => props.to ? "RouterLink" : props.href ? "a" : "div"), isLink = computed(() => !!props.to || !!props.href);
function getInitials(name, lettersCount = props.letterCount) {
return name.split(" ").map((word) => word[0]).join("").slice(0, lettersCount);
}
const shouldDisplayImg = computed(() => props.src || !props.src && !props.caption);
function handleImageError(event) {
if (emits("error", event.target), props.fallbackSrc && event.target instanceof HTMLImageElement) {
const currentSrc = new URL(event.target.src), fallbackSrc = new URL(props.fallbackSrc);
if (currentSrc.href === fallbackSrc.href)
return;
event.target.src = props.fallbackSrc;
}
}
return (_ctx, _cache) => (openBlock(), createBlock(resolveDynamicComponent(componentType.value), {
style: normalizeStyle([{ fontSize: __props.size }, __props.style]),
class: normalizeClass(["m-avatar m-reset-css", [
{
"--has-link": isLink.value
},
props.class
]]),
href: __props.href,
to: __props.to,
target: isLink.value ? __props.target : void 0
}, {
default: withCtx(() => [
createElementVNode("div", {
class: normalizeClass(["m-avatar__wrapper", [
{
"--has-shadow": !__props.noElevation,
"--bordered": __props.bordered,
"--clickable": __props.clickable,
"--has-initial": !__props.src && __props.caption
},
`--rounded-${__props.square ? "none" : __props.roundedSize}`
]]),
tabindex: __props.clickable ? 0 : -1
}, [
shouldDisplayImg.value ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
__props.loading === "intersecting" ? (openBlock(), createBlock(unref(MazLazyImg), mergeProps({ key: 0 }, _ctx.$attrs, {
class: "m-avatar__picture maz-w-full maz-max-w-full",
src: __props.src,
alt: __props.alt,
"image-height-full": "",
"hide-loader": __props.hideLoader,
"fallback-src": __props.fallbackSrc,
onClick: _cache[0] || (_cache[0] = ($event) => __props.clickable ? _ctx.$emit("click", $event) : null),
onError: _cache[1] || (_cache[1] = ($event) => _ctx.$emit("error", $event)),
onLoaded: _cache[2] || (_cache[2] = ($event) => _ctx.$emit("loaded", $event)),
onLoading: _cache[3] || (_cache[3] = ($event) => _ctx.$emit("loading", $event)),
onIntersecting: _cache[4] || (_cache[4] = ($event) => _ctx.$emit("intersecting", $event))
}), null, 16, ["src", "alt", "hide-loader", "fallback-src"])) : (openBlock(), createElementBlock("img", {
key: 1,
class: "m-avatar__picture maz-w-full maz-max-w-full",
src: __props.src ?? __props.fallbackSrc,
alt: __props.alt,
loading: __props.loading,
onError: handleImageError
}, null, 40, _hoisted_2))
], 64)) : createCommentVNode("", !0),
__props.caption && !__props.src ? renderSlot(_ctx.$slots, "round-text", { key: 1 }, () => [
createElementVNode("span", _hoisted_3, toDisplayString(getInitials(__props.caption)), 1)
], !0) : createCommentVNode("", !0),
__props.clickable ? (openBlock(), createElementBlock("button", {
key: 2,
type: "button",
tabindex: "-1",
class: "m-avatar__button",
style: normalizeStyle({
backgroundColor: __props.src ? `hsl(var(--maz-${__props.buttonColor}) / 60%)` : `hsl(var(--maz-${__props.buttonColor}))`
}),
onClick: _cache[5] || (_cache[5] = ($event) => _ctx.$emit("click", $event))
}, [
__props.hideClickableIcon ? createCommentVNode("", !0) : renderSlot(_ctx.$slots, "icon", { key: 0 }, () => [
createVNode(unref(MazPencil), { class: "m-avatar__button__icon" })
], !0)
], 4)) : createCommentVNode("", !0)
], 10, _hoisted_1),
renderSlot(_ctx.$slots, "caption", {}, () => [
__props.showCaption && __props.caption ? (openBlock(), createElementBlock("p", _hoisted_4, toDisplayString(__props.caption), 1)) : createCommentVNode("", !0)
], !0)
]),
_: 3
}, 8, ["style", "class", "href", "to", "target"]));
}
}), MazAvatar = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-e59161a3"]]);
export {
MazAvatar as default
};