winbox-ui-next
Version:
We Design Vue 2.0: A Vue.js 3 UI Library
195 lines (194 loc) • 6.63 kB
JavaScript
;
var __defProp = Object.defineProperty;
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __propIsEnum = Object.prototype.propertyIsEnumerable;
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
var __spreadValues = (a, b) => {
for (var prop in b || (b = {}))
if (__hasOwnProp.call(b, prop))
__defNormalProp(a, prop, b[prop]);
if (__getOwnPropSymbols)
for (var prop of __getOwnPropSymbols(b)) {
if (__propIsEnum.call(b, prop))
__defNormalProp(a, prop, b[prop]);
}
return a;
};
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 pluginVue_exportHelper = require("../_virtual/plugin-vue_export-helper");
const _sfc_main = vue.defineComponent({
name: "Avatar",
components: {
ResizeObserver: resizeObserverV2
},
props: {
shape: {
type: String,
default: "circle"
},
size: Number,
autoFixFontSize: {
type: Boolean,
default: true
},
triggerType: {
type: String,
default: "button"
},
triggerIconStyle: {
type: Object
}
},
emits: {
click: (ev) => 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 index = 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 ? index.value + 1 : groupCtx.total - index.value;
style.marginLeft = index.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) {
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%)`;
}
});
}
};
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 ? `${prefixCls}-image` : `${prefixCls}-text`);
const onClick = (e) => {
emit("click", e);
};
const handleResize = () => {
if (mergedAutoFixFontSize.value) {
autoFixFontSizeHandler();
}
};
return {
prefixCls,
itemRef,
cls,
outerStyle,
wrapperRef,
wrapperCls,
computedTriggerIconStyle,
isImage,
onClick,
handleResize
};
}
});
const useTriggerIconStyle = ({
triggerType,
inlineStyle = {},
triggerIconStyle = {}
}) => {
let addon = {};
if (triggerType === "button" && (!triggerIconStyle || triggerIconStyle && !triggerIconStyle.color) && inlineStyle && inlineStyle.backgroundColor) {
addon = { color: inlineStyle.backgroundColor };
}
return __spreadValues(__spreadValues({}, triggerIconStyle), addon);
};
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
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[0] || (_cache[0] = (...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)
}, [
vue.renderSlot(_ctx.$slots, "default")
], 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;