winbox-ui-next/es/avatar/avatar.js

We Design Vue 2.0: A Vue.js 3 UI Library

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;
};
import { defineComponent, toRefs, inject, ref, computed, onMounted, watch, nextTick, resolveComponent, openBlock, createElementBlock, normalizeStyle, normalizeClass, createVNode, withCtx, createElementVNode, renderSlot, createCommentVNode } from "vue";
import { getPrefixCls } from "../_utils/global-config.js";
import { useIndex } from "../_hooks/use-index.js";
import ResizeObserver from "../_components/resize-observer-v2.js";
import { avatarGroupInjectionKey } from "./context.js";
import { isNumber } from "../_utils/is.js";
import _export_sfc from "../_virtual/plugin-vue_export-helper";
const _sfc_main = defineComponent({
  name: "Avatar",
  components: {
    ResizeObserver
  },
  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 } = toRefs(props);
    const prefixCls = getPrefixCls("avatar");
    const groupCtx = inject(avatarGroupInjectionKey, void 0);
    const itemRef = ref();
    const wrapperRef = ref();
    const mergedShape = computed(() => {
      var _a;
      return (_a = groupCtx == null ? void 0 : groupCtx.shape) != null ? _a : shape.value;
    });
    const mergedSize = computed(() => {
      var _a;
      return (_a = groupCtx == null ? void 0 : groupCtx.size) != null ? _a : size.value;
    });
    const mergedAutoFixFontSize = computed(() => {
      var _a;
      return (_a = groupCtx == null ? void 0 : groupCtx.autoFixFontSize) != null ? _a : autoFixFontSize.value;
    });
    const isImage = ref(false);
    const index = groupCtx ? useIndex({
      itemRef,
      selector: `.${prefixCls}`
    }).computedIndex : ref(-1);
    const outerStyle = computed(() => {
      var _a;
      const style = 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) {
        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%)`;
          }
        });
      }
    };
    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();
      }
    });
    watch(size, () => {
      if (mergedAutoFixFontSize.value) {
        autoFixFontSizeHandler();
      }
    });
    const cls = computed(() => [
      prefixCls,
      `${prefixCls}-${mergedShape.value}`
    ]);
    const wrapperCls = 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 = resolveComponent("resize-observer");
  return openBlock(), createElementBlock("div", {
    ref: "itemRef",
    style: normalizeStyle(_ctx.outerStyle),
    class: normalizeClass([
      _ctx.cls,
      {
        [`${_ctx.prefixCls}-with-trigger-icon`]: Boolean(_ctx.$slots["trigger-icon"])
      }
    ]),
    onClick: _cache[0] || (_cache[0] = (...args) => _ctx.onClick && _ctx.onClick(...args))
  }, [
    createVNode(_component_resize_observer, { onResize: _ctx.handleResize }, {
      default: withCtx(() => [
        createElementVNode("span", {
          ref: "wrapperRef",
          class: normalizeClass(_ctx.wrapperCls)
        }, [
          renderSlot(_ctx.$slots, "default")
        ], 2)
      ]),
      _: 3
    }, 8, ["onResize"]),
    _ctx.$slots["trigger-icon"] ? (openBlock(), createElementBlock("div", {
      key: 0,
      class: normalizeClass(`${_ctx.prefixCls}-trigger-icon-${_ctx.triggerType}`),
      style: normalizeStyle(_ctx.computedTriggerIconStyle)
    }, [
      renderSlot(_ctx.$slots, "trigger-icon")
    ], 6)) : createCommentVNode("v-if", true)
  ], 6);
}
var _Avatar = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
export { _Avatar as default };