yuang-framework-ui-pc/lib/ele-icon-select/components/icon-grid.cjs

yuang-framework-ui-pc Library

"use strict";
const vue = require("vue");
const elementPlus = require("element-plus");
const EleTooltip = require("../../ele-tooltip/index");
const _sfc_main = vue.defineComponent({
  name: "IconGrid",
  components: { ElEmpty: elementPlus.ElEmpty, ElScrollbar: elementPlus.ElScrollbar, EleTooltip },
  props: {
    /** 选中的图标 */
    icon: String,
    /** 图标数据 */
    data: {
      type: Array,
      required: true
    },
    /** 空组件属性 */
    emptyProps: Object,
    /** 是否显示提示 */
    tooltip: Boolean,
    /** 提示属性 */
    tooltipProps: Object,
    /** 气泡是否展开 */
    popperVisible: Boolean,
    /** 网格样式 */
    gridStyle: Object,
    /** 图标样式 */
    itemStyle: Object
  },
  emits: {
    select: (_icon) => true
  },
  setup(props, { emit }) {
    const tooltipVisible = vue.ref(false);
    const tooltipContent = vue.ref("");
    const virtualRef = vue.ref();
    const updateTooltipVisible = (visible) => {
      tooltipVisible.value = visible;
    };
    const hideTooltip = () => {
      updateTooltipVisible(false);
    };
    const handleItemHover = (icon, e) => {
      if (props.tooltip && props.popperVisible && icon) {
        virtualRef.value = e.currentTarget;
        tooltipContent.value = icon;
        tooltipVisible.value = true;
      }
    };
    const handleItemClick = (icon) => {
      emit("select", icon);
    };
    vue.watch(
      () => props.popperVisible,
      (visible) => {
        if (!visible) {
          hideTooltip();
        }
      }
    );
    return {
      tooltipVisible,
      tooltipContent,
      virtualRef,
      updateTooltipVisible,
      hideTooltip,
      handleItemHover,
      handleItemClick
    };
  }
});
const _export_sfc = (sfc, props) => {
  const target = sfc.__vccOpts || sfc;
  for (const [key, val] of props) {
    target[key] = val;
  }
  return target;
};
const _hoisted_1 = ["title", "onClick", "onMouseover"];
const _hoisted_2 = {
  key: 0,
  class: "ele-icon-select-empty"
};
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
  const _component_ElEmpty = vue.resolveComponent("ElEmpty");
  const _component_EleTooltip = vue.resolveComponent("EleTooltip");
  const _component_ElScrollbar = vue.resolveComponent("ElScrollbar");
  return vue.openBlock(), vue.createBlock(_component_ElScrollbar, { class: "ele-icon-select-body" }, {
    default: vue.withCtx(() => [
      vue.createElementVNode("div", {
        class: "ele-icon-select-grid",
        style: vue.normalizeStyle(_ctx.gridStyle)
      }, [
        (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.data, (d, i) => {
          return vue.openBlock(), vue.createElementBlock("div", {
            key: i + "-" + d,
            class: vue.normalizeClass(["ele-icon-select-item", { "is-active": _ctx.icon && d === _ctx.icon }]),
            title: _ctx.tooltip ? void 0 : d,
            style: vue.normalizeStyle(_ctx.itemStyle),
            onClick: ($event) => _ctx.handleItemClick(d),
            onMouseover: (e) => _ctx.handleItemHover(d, e)
          }, [
            vue.renderSlot(_ctx.$slots, "icon", { icon: d })
          ], 46, _hoisted_1);
        }), 128))
      ], 4),
      !_ctx.data || !_ctx.data.length ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2, [
        vue.createVNode(_component_ElEmpty, vue.mergeProps({ imageSize: 60 }, _ctx.emptyProps || {}), null, 16)
      ])) : vue.createCommentVNode("", true),
      vue.createVNode(_component_EleTooltip, vue.mergeProps({
        placement: "top",
        offset: 6,
        teleported: false
      }, _ctx.tooltipProps || {}, {
        visible: _ctx.tooltipVisible,
        content: _ctx.tooltipContent,
        virtualRef: _ctx.virtualRef,
        virtualTriggering: true,
        "onUpdate:visible": _ctx.updateTooltipVisible
      }), null, 16, ["visible", "content", "virtualRef", "onUpdate:visible"])
    ]),
    _: 3
  });
}
const iconGrid = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
module.exports = iconGrid;