@wfrog/vc/dist/es/components/image/image.mjs

vue3 组件库 vc

import './index.css'
import '../../chunk/E_WRn0OP.mjs';
/* empty css                    */
import { a as ElTooltip } from '../../chunk/DUd8IaU9.mjs';
import { E as ElImage } from '../../chunk/D3Dgi5XT.mjs';
import { defineComponent, useSlots, useTemplateRef, ref, computed, createElementBlock, openBlock, Fragment, createCommentVNode, createBlock, unref, normalizeClass, createElementVNode, withCtx, createVNode, renderSlot, createTextVNode, toDisplayString, normalizeStyle } from 'vue';
import { C as Component$1 } from '../el-icon/el-icon.mjs';
import { C as Component$2 } from '../text-ellipsis/text-ellipsis.mjs';
import { _ as _export_sfc } from '../../chunk/pcqpp-6-.mjs';

const fixWidth = 5;
const _sfc_main = /* @__PURE__ */ defineComponent({
  __name: "image",
  props: {
    type: { default: "image" },
    text: { default: "" },
    src: { default: "" },
    previewSrcList: { default: () => [] },
    width: { default: "160px" },
    height: { default: "90px" },
    fit: { default: "cover" },
    textMaxWidth: { default: 0 },
    showTooltip: { type: Boolean, default: true },
    effect: { default: "dark" },
    placement: { default: "top" },
    popperClass: { default: "" },
    enterable: { type: Boolean, default: false }
  },
  setup(__props) {
    const props = __props;
    const $slots = useSlots();
    const textRef = useTemplateRef("textRef");
    const textWrapperRef = useTemplateRef("textWrapperRef");
    const comEllipsis = ref();
    const isImageType = computed(() => props.type === "image");
    const isTextType = computed(() => props.type === "text");
    const mySrc = computed(() => {
      if (props.type === "text" && textRef.value) {
        const canvas = document.createElement("canvas");
        canvas.width = textRef.value.offsetWidth + fixWidth;
        canvas.height = textRef.value.getBoundingClientRect().height;
        return canvas.toDataURL("image/png");
      }
      return props.src || props.previewSrcList[0];
    });
    const myMaxWidth = computed(() => props.textMaxWidth || textWrapperRef.value?.offsetWidth || 0);
    const imageStyle = computed(() => {
      if (isImageType.value) {
        return {
          width: props.width,
          height: props.height
        };
      }
      return {};
    });
    const combineText = computed(() => {
      if (!isTextType.value) {
        return "";
      }
      let slotText = "";
      if ($slots.default) {
        const [slot] = $slots.default({});
        slotText = slot.children?.toString() || "";
      }
      return props.text || slotText;
    });
    const mySrcList = computed(() => props.previewSrcList.length === 0 ? [props.src] : props.previewSrcList);
    const tipsVisible = computed(() => comEllipsis.value?.tipsVisible ?? false);
    return (_ctx, _cache) => {
      const _component_ElImage = ElImage;
      const _component_ElTooltip = ElTooltip;
      return openBlock(), createElementBlock(Fragment, null, [
        unref(isTextType) ? (openBlock(), createElementBlock("div", {
          key: 0,
          ref_key: "textWrapperRef",
          ref: textWrapperRef,
          class: normalizeClass(_ctx.$style["text-wrapper"])
        }, [
          unref(tipsVisible) && __props.showTooltip ? (openBlock(), createBlock(_component_ElTooltip, {
            key: 0,
            effect: __props.effect,
            placement: __props.placement,
            "popper-class": __props.popperClass,
            enterable: __props.enterable,
            content: unref(combineText)
          }, {
            default: withCtx(() => [
              createVNode(_component_ElImage, {
                src: unref(mySrc),
                "preview-src-list": unref(mySrcList),
                class: normalizeClass(_ctx.$style.image),
                lazy: "",
                "preview-teleported": ""
              }, null, 8, ["src", "preview-src-list", "class"])
            ]),
            _: 1
          }, 8, ["effect", "placement", "popper-class", "enterable", "content"])) : createCommentVNode("", true),
          !unref(tipsVisible) || !__props.showTooltip ? (openBlock(), createBlock(_component_ElImage, {
            key: 1,
            src: unref(mySrc),
            "preview-src-list": unref(mySrcList),
            class: normalizeClass(_ctx.$style.image),
            lazy: "",
            "preview-teleported": ""
          }, null, 8, ["src", "preview-src-list", "class"])) : createCommentVNode("", true),
          createElementVNode("span", {
            ref_key: "textRef",
            ref: textRef,
            class: normalizeClass(_ctx.$style.text)
          }, [
            createVNode(Component$1, {
              name: "Picture",
              class: normalizeClass(_ctx.$style.icon)
            }, null, 8, ["class"]),
            createVNode(Component$2, {
              ref_key: "comEllipsis",
              ref: comEllipsis,
              placement: "top-start",
              "max-width": unref(myMaxWidth),
              "show-tooltip": false
            }, {
              default: withCtx(() => [
                renderSlot(_ctx.$slots, "default", {}, () => [
                  createTextVNode(toDisplayString(__props.text), 1)
                ])
              ]),
              _: 3
            }, 8, ["max-width"])
          ], 2)
        ], 2)) : createCommentVNode("", true),
        unref(isImageType) ? (openBlock(), createBlock(_component_ElImage, {
          key: 1,
          src: unref(mySrc),
          "preview-src-list": unref(mySrcList),
          style: normalizeStyle(unref(imageStyle)),
          fit: __props.fit,
          class: normalizeClass(_ctx.$style["image-wrapper"]),
          lazy: "",
          "preview-teleported": ""
        }, null, 8, ["src", "preview-src-list", "style", "fit", "class"])) : createCommentVNode("", true)
      ], 64);
    };
  }
});

/* unplugin-vue-components disabled */const image = "_image_1toev_4";
const text = "_text_1toev_1";
const icon = "_icon_1toev_12";
const style0 = {
	"text-wrapper": "_text-wrapper_1toev_1",
	image: image,
	text: text,
	icon: icon,
	"image-wrapper": "_image-wrapper_1toev_18"
};

const cssModules = {
  "$style": style0
};
const Component = /* @__PURE__ */ _export_sfc(_sfc_main, [["__cssModules", cssModules]]);

const __vite_glob_0_19 = /*#__PURE__*/Object.freeze(/*#__PURE__*/Object.defineProperty({
  __proto__: null,
  default: Component
}, Symbol.toStringTag, { value: 'Module' }));

export { Component as C, __vite_glob_0_19 as _ };