@vuesax-alpha/nightly
Version:
A Component Library for Vue 3
199 lines (194 loc) • 6.82 kB
JavaScript
;
Object.defineProperty(exports, '__esModule', { value: true });
var vue = require('vue');
require('../../../hooks/index.js');
require('../../../utils/index.js');
var index$3 = require('../../icon/index.js');
var avatar = require('./avatar.js');
require('./composables/index.js');
var pluginVue_exportHelper = require('../../../_virtual/plugin-vue_export-helper.js');
var index = require('../../../hooks/use-namespace/index.js');
var useAvatarStatus = require('./composables/use-avatar-status.js');
var index$1 = require('../../../hooks/use-base-component/index.js');
var index$2 = require('../../../hooks/use-common-props/index.js');
var color = require('../../../utils/color.js');
const __default__ = vue.defineComponent({
name: "VsAvatar"
});
const _sfc_main = vue.defineComponent({
...__default__,
props: avatar.avatarProps,
setup(__props) {
const props = __props;
const slots = vue.useSlots();
const ns = index.useNamespace("avatar");
const root$ = vue.ref();
const { isHidden, isLastest, getText, showLastest, moreNumber } = useAvatarStatus.useAvatarStatus(slots);
const vsBaseClasses = index$1.useVuesaxBaseComponent(index$2.useColor());
const avatarClassess = vue.computed(() => [
ns.b("content"),
vsBaseClasses,
props.history && "history",
props.historyGradient && "history--gradient",
props.shape != "default" && `${ns.be("content", props.shape)}`,
isHidden.value && `${ns.be("content", "hidden")}`,
isLastest.value && `${ns.be("content", "latest")}`,
slots.icons && `${ns.be("content", "hasIcons")}`
]);
const avatarStyles = vue.computed(
() => ({
width: `${props.size}px`,
height: `${props.size}px`,
cursor: props.pointer ? "pointer" : "",
...ns.cssVar({
color: color.getVsColor(props.color)
})
})
);
vue.watch(
() => props.badgeColor,
() => {
var _a;
color.setCssVar("avatar-badge", color.getVsColor(props.badgeColor), root$.value);
(_a = root$.value) == null ? void 0 : _a.classList.add(ns.em("badge", "change-color"));
}
);
vue.onMounted(() => {
var _a;
(_a = root$.value) == null ? void 0 : _a.classList.add(ns.em("badge", "change-color"));
color.setCssVar("avatar-badge", color.getVsColor(props.badgeColor), root$.value);
});
return (_ctx, _cache) => {
return vue.openBlock(), vue.createElementBlock(
"div",
{
ref_key: "root$",
ref: root$,
class: vue.normalizeClass(avatarClassess.value),
style: vue.normalizeStyle(avatarStyles.value)
},
[
_ctx.loading ? (vue.openBlock(), vue.createElementBlock(
"div",
{
key: 0,
class: vue.normalizeClass(vue.unref(ns).e("loading"))
},
[
vue.createElementVNode(
"div",
{
class: vue.normalizeClass(vue.unref(ns).em("loading", "animate"))
},
[
vue.createVNode(vue.unref(index$3.IconLoading))
],
2
)
],
2
)) : vue.createCommentVNode("v-if", true),
vue.createElementVNode(
"div",
{
class: vue.normalizeClass([
vue.unref(ns).b(),
vue.unref(getText).length > 2 && vue.unref(ns).em("letter", `${vue.unref(getText).length}`)
])
},
[
_ctx.$slots.text ? (vue.openBlock(), vue.createElementBlock(
vue.Fragment,
{ key: 0 },
[
vue.createTextVNode(
vue.toDisplayString(vue.unref(getText)),
1
)
],
64
)) : vue.createCommentVNode("v-if", true),
vue.renderSlot(_ctx.$slots, "default")
],
2
),
_ctx.$slots.badge || _ctx.badge ? (vue.openBlock(), vue.createElementBlock(
"div",
{
key: 1,
class: vue.normalizeClass([
vue.unref(ns).e("badge"),
vue.unref(ns).is("slot", !!_ctx.$slots.badge),
vue.unref(ns).is("writing", _ctx.writing),
_ctx.badgePosition
])
},
[
_ctx.writing ? (vue.openBlock(), vue.createElementBlock(
"div",
{
key: 0,
class: vue.normalizeClass(vue.unref(ns).e("points"))
},
[
vue.createElementVNode(
"div",
{
class: vue.normalizeClass(vue.unref(ns).em("points", "item"))
},
null,
2
),
vue.createElementVNode(
"div",
{
class: vue.normalizeClass(vue.unref(ns).em("points", "item"))
},
null,
2
),
vue.createElementVNode(
"div",
{
class: vue.normalizeClass(vue.unref(ns).em("points", "item"))
},
null,
2
)
],
2
)) : vue.renderSlot(_ctx.$slots, "badge", { key: 1 })
],
2
)) : vue.createCommentVNode("v-if", true),
vue.unref(isLastest) ? vue.withDirectives((vue.openBlock(), vue.createElementBlock(
"div",
{
key: 2,
class: vue.normalizeClass(vue.unref(ns).e("lastest"))
},
vue.toDisplayString(`+${vue.unref(moreNumber)}`),
3
)), [
[vue.vShow, vue.unref(showLastest)]
]) : vue.createCommentVNode("v-if", true),
_ctx.$slots.icons ? (vue.openBlock(), vue.createElementBlock(
"div",
{
key: 3,
class: vue.normalizeClass(vue.unref(ns).e("icons"))
},
[
vue.renderSlot(_ctx.$slots, "icons")
],
2
)) : vue.createCommentVNode("v-if", true)
],
6
);
};
}
});
var Avatar = /* @__PURE__ */ pluginVue_exportHelper["default"](_sfc_main, [["__file", "/home/runner/work/vuesax-alpha/vuesax-alpha/packages/components/avatar/src/avatar.vue"]]);
exports["default"] = Avatar;
//# sourceMappingURL=avatar2.js.map