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

Build full featured iOS & Android apps using ZMP & Vue

import { openBlock as _openBlock, createBlock as _createBlock, createCommentVNode as _createCommentVNode, renderSlot as _renderSlot, mergeProps as _mergeProps } from "vue";
var _hoisted_1 = {
  key: 2,
  class: "avatar-online"
};

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

import { computed } from 'vue';
import { classNames } from '../shared/utils';
import { AVATAR_SIZE, AVATAR_DEFAULT_BG_COLOR, AVATAR_COLOR_PROPS } from '../../common/constants';
import { calculateAvatarColor } from '../../common/utils';
export 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 = computed(function () {
      var bgColor = AVATAR_COLOR_PROPS[props.avatarColor] || '';

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

      return bgColor;
    });
    var classes = computed(function () {
      var sizeClass = AVATAR_SIZE[props.size] || '';
      return classNames('avatar', {
        'avatar-story': props.story
      }, sizeClass);
    });
    return {
      classes: classes,
      bgColor: bgColor
    };
  }
};