zmp-vue/cjs/zalo-ui-kits/avatar.js

Build full featured iOS & Android apps using ZMP & Vue

"use strict";

exports.__esModule = true;
exports.default = void 0;

var _vue = require("vue");

var _utils = require("../shared/utils");

var _constants = require("../../common/constants");

var _utils2 = require("../../common/utils");

var _hoisted_1 = {
  key: 2,
  class: "avatar-online"
};

function render(_ctx, _cache) {
  return (0, _vue.openBlock)(), (0, _vue.createBlock)("div", (0, _vue.mergeProps)(_ctx.$attrs, {
    class: _ctx.classes
  }), [_ctx.src ? ((0, _vue.openBlock)(), (0, _vue.createBlock)("img", {
    key: 0,
    class: "avatar-image",
    src: _ctx.src,
    alt: ""
  }, null, 8, ["src"])) : ((0, _vue.openBlock)(), (0, _vue.createBlock)("div", {
    key: 1,
    class: "avatar-inner " + _ctx.bgColor
  }, [(0, _vue.renderSlot)(_ctx.$slots, "default")], 2)), _ctx.online ? ((0, _vue.openBlock)(), (0, _vue.createBlock)("span", _hoisted_1)) : (0, _vue.createCommentVNode)("", true)], 16);
}

var _default = {
  name: 'zmp-avatar',
  render: render,
  props: {
    online: Boolean,
    story: Boolean,
    size: String,
    src: [String, Object],
    avatarColor: String
  },
  setup: function setup(props, _ref) {
    var slots = _ref.slots;
    var bgColor = (0, _vue.computed)(function () {
      var bgColor = _constants.AVATAR_COLOR_PROPS[props.avatarColor] || '';

      if (!bgColor && slots.default && slots.default().length) {
        bgColor = (0, _utils2.calculateAvatarColor)(slots.default()[0].children) || _constants.AVATAR_DEFAULT_BG_COLOR[0];
      }

      return bgColor;
    });
    var classes = (0, _vue.computed)(function () {
      var sizeClass = _constants.AVATAR_SIZE[props.size] || '';
      return (0, _utils.classNames)('avatar', {
        'avatar-story': props.story
      }, sizeClass);
    });
    return {
      classes: classes,
      bgColor: bgColor
    };
  }
};
exports.default = _default;