@arco-design/web-vue
Version:
Arco Design Vue 2.0: A Vue.js 3 UI Library
243 lines (242 loc) • 8.43 kB
JavaScript
;
var vue = require("vue");
var globalConfig = require("../_utils/global-config.js");
var useIndex = require("../_hooks/use-index.js");
var resizeObserverV2 = require("../_components/resize-observer-v2.js");
var context = require("./context.js");
var is = require("../_utils/is.js");
var index = require("../icon/icon-image-close/index.js");
var index$1 = require("../icon/icon-loading/index.js");
var pluginVue_exportHelper = require("../_virtual/plugin-vue_export-helper.js");
const _sfc_main = vue.defineComponent({
name: "Avatar",
components: {
ResizeObserver: resizeObserverV2,
IconImageClose: index,
IconLoading: index$1
},
props: {
shape: {
type: String,
default: "circle"
},
imageUrl: String,
size: Number,
autoFixFontSize: {
type: Boolean,
default: true
},
triggerType: {
type: String,
default: "button"
},
triggerIconStyle: {
type: Object
},
objectFit: {
type: String
}
},
emits: {
click: (ev) => true,
error: () => true,
load: () => true
},
setup(props, { slots, emit, attrs }) {
const { shape, size, autoFixFontSize, triggerType, triggerIconStyle } = vue.toRefs(props);
const prefixCls = globalConfig.getPrefixCls("avatar");
const groupCtx = vue.inject(context.avatarGroupInjectionKey, void 0);
const itemRef = vue.ref();
const wrapperRef = vue.ref();
const mergedShape = vue.computed(() => {
var _a;
return (_a = groupCtx == null ? void 0 : groupCtx.shape) != null ? _a : shape.value;
});
const mergedSize = vue.computed(() => {
var _a;
return (_a = groupCtx == null ? void 0 : groupCtx.size) != null ? _a : size.value;
});
const mergedAutoFixFontSize = vue.computed(
() => {
var _a;
return (_a = groupCtx == null ? void 0 : groupCtx.autoFixFontSize) != null ? _a : autoFixFontSize.value;
}
);
const isImage = vue.ref(false);
const hasError = vue.ref(false);
const shouldLoad = vue.ref(true);
const isLoaded = vue.ref(false);
const index2 = groupCtx ? useIndex.useIndex({
itemRef,
selector: `.${prefixCls}`
}).computedIndex : vue.ref(-1);
const outerStyle = vue.computed(() => {
var _a;
const style = is.isNumber(mergedSize.value) ? {
width: `${mergedSize.value}px`,
height: `${mergedSize.value}px`,
fontSize: `${mergedSize.value / 2}px`
} : {};
if (groupCtx) {
style.zIndex = groupCtx.zIndexAscend ? index2.value + 1 : groupCtx.total - index2.value;
style.marginLeft = index2.value !== 0 ? `-${((_a = mergedSize.value) != null ? _a : 40) / 4}px` : "0";
}
return style;
});
const computedTriggerIconStyle = useTriggerIconStyle({
triggerIconStyle: triggerIconStyle == null ? void 0 : triggerIconStyle.value,
inlineStyle: attrs.style,
triggerType: triggerType.value
});
const autoFixFontSizeHandler = () => {
if (!isImage.value && !props.imageUrl) {
vue.nextTick(() => {
var _a;
if (!wrapperRef.value || !itemRef.value) {
return;
}
const textWidth = wrapperRef.value.clientWidth;
const avatarWidth = (_a = mergedSize.value) != null ? _a : itemRef.value.offsetWidth;
const scale = avatarWidth / (textWidth + 8);
if (avatarWidth && scale < 1) {
wrapperRef.value.style.transform = `scale(${scale}) translateX(-50%)`;
}
shouldLoad.value = true;
});
}
};
vue.onMounted(() => {
var _a;
if (((_a = wrapperRef.value) == null ? void 0 : _a.firstElementChild) && ["IMG", "PICTURE"].includes(wrapperRef.value.firstElementChild.tagName)) {
isImage.value = true;
}
if (mergedAutoFixFontSize.value) {
autoFixFontSizeHandler();
}
});
vue.watch(size, () => {
if (mergedAutoFixFontSize.value) {
autoFixFontSizeHandler();
}
});
const cls = vue.computed(() => [
prefixCls,
`${prefixCls}-${mergedShape.value}`
]);
const wrapperCls = vue.computed(
() => isImage.value || props.imageUrl ? `${prefixCls}-image` : `${prefixCls}-text`
);
const onClick = (e) => {
emit("click", e);
};
const handleResize = () => {
if (mergedAutoFixFontSize.value) {
autoFixFontSizeHandler();
}
};
const handleImgLoad = () => {
isLoaded.value = true;
emit("load");
};
const handleImgError = () => {
hasError.value = true;
emit("error");
};
return {
prefixCls,
itemRef,
cls,
outerStyle,
wrapperRef,
wrapperCls,
computedTriggerIconStyle,
isImage,
shouldLoad,
isLoaded,
hasError,
onClick,
handleResize,
handleImgLoad,
handleImgError
};
}
});
const useTriggerIconStyle = ({
triggerType,
inlineStyle = {},
triggerIconStyle = {}
}) => {
let addon = {};
if (triggerType === "button" && (!triggerIconStyle || triggerIconStyle && !triggerIconStyle.color) && inlineStyle && inlineStyle.backgroundColor) {
addon = { color: inlineStyle.backgroundColor };
}
return {
...triggerIconStyle,
...addon
};
};
const _hoisted_1 = ["src"];
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
const _component_IconImageClose = vue.resolveComponent("IconImageClose");
const _component_IconLoading = vue.resolveComponent("IconLoading");
const _component_resize_observer = vue.resolveComponent("resize-observer");
return vue.openBlock(), vue.createElementBlock("div", {
ref: "itemRef",
style: vue.normalizeStyle(_ctx.outerStyle),
class: vue.normalizeClass([
_ctx.cls,
{
[`${_ctx.prefixCls}-with-trigger-icon`]: Boolean(_ctx.$slots["trigger-icon"])
}
]),
onClick: _cache[2] || (_cache[2] = (...args) => _ctx.onClick && _ctx.onClick(...args))
}, [
vue.createVNode(_component_resize_observer, { onResize: _ctx.handleResize }, {
default: vue.withCtx(() => [
vue.createElementVNode("span", {
ref: "wrapperRef",
class: vue.normalizeClass(_ctx.wrapperCls)
}, [
_ctx.imageUrl ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
_ctx.hasError ? vue.renderSlot(_ctx.$slots, "error", { key: 0 }, () => [
vue.createElementVNode("div", {
class: vue.normalizeClass(`${_ctx.prefixCls}-image-icon`)
}, [
vue.createVNode(_component_IconImageClose)
], 2)
]) : vue.createCommentVNode("v-if", true),
!(_ctx.hasError || !_ctx.shouldLoad) && !_ctx.isLoaded ? vue.renderSlot(_ctx.$slots, "default", { key: 1 }, () => [
vue.createElementVNode("div", {
class: vue.normalizeClass(`${_ctx.prefixCls}-image-icon`)
}, [
vue.createVNode(_component_IconLoading)
], 2)
]) : vue.createCommentVNode("v-if", true),
!(_ctx.hasError || !_ctx.shouldLoad) ? (vue.openBlock(), vue.createElementBlock("img", {
key: 2,
src: _ctx.imageUrl,
style: vue.normalizeStyle({
width: _ctx.size + "px",
height: _ctx.size + "px",
objectFit: _ctx.objectFit
}),
alt: "avatar",
onLoad: _cache[0] || (_cache[0] = (...args) => _ctx.handleImgLoad && _ctx.handleImgLoad(...args)),
onError: _cache[1] || (_cache[1] = (...args) => _ctx.handleImgError && _ctx.handleImgError(...args))
}, null, 44, _hoisted_1)) : vue.createCommentVNode("v-if", true)
], 64)) : vue.renderSlot(_ctx.$slots, "default", { key: 1 })
], 2)
]),
_: 3
}, 8, ["onResize"]),
_ctx.$slots["trigger-icon"] ? (vue.openBlock(), vue.createElementBlock("div", {
key: 0,
class: vue.normalizeClass(`${_ctx.prefixCls}-trigger-icon-${_ctx.triggerType}`),
style: vue.normalizeStyle(_ctx.computedTriggerIconStyle)
}, [
vue.renderSlot(_ctx.$slots, "trigger-icon")
], 6)) : vue.createCommentVNode("v-if", true)
], 6);
}
var _Avatar = /* @__PURE__ */ pluginVue_exportHelper(_sfc_main, [["render", _sfc_render]]);
module.exports = _Avatar;