yuang-framework-ui-pc/es/ele-icon-select/components/icon-grid.js

yuang-framework-ui-pc Library

import { defineComponent, ref, watch, resolveComponent, createBlock, openBlock, withCtx, createElementVNode, createElementBlock, createCommentVNode, createVNode, normalizeStyle, Fragment, renderList, normalizeClass, renderSlot, mergeProps } from "vue";
import { ElScrollbar, ElEmpty } from "element-plus";
import EleTooltip from "../../ele-tooltip/index";
const _sfc_main = defineComponent({
  name: "IconGrid",
  components: { ElEmpty, 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 = ref(false);
    const tooltipContent = ref("");
    const virtualRef = 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);
    };
    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 = resolveComponent("ElEmpty");
  const _component_EleTooltip = resolveComponent("EleTooltip");
  const _component_ElScrollbar = resolveComponent("ElScrollbar");
  return openBlock(), createBlock(_component_ElScrollbar, { class: "ele-icon-select-body" }, {
    default: withCtx(() => [
      createElementVNode("div", {
        class: "ele-icon-select-grid",
        style: normalizeStyle(_ctx.gridStyle)
      }, [
        (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.data, (d, i) => {
          return openBlock(), createElementBlock("div", {
            key: i + "-" + d,
            class: normalizeClass(["ele-icon-select-item", { "is-active": _ctx.icon && d === _ctx.icon }]),
            title: _ctx.tooltip ? void 0 : d,
            style: normalizeStyle(_ctx.itemStyle),
            onClick: ($event) => _ctx.handleItemClick(d),
            onMouseover: (e) => _ctx.handleItemHover(d, e)
          }, [
            renderSlot(_ctx.$slots, "icon", { icon: d })
          ], 46, _hoisted_1);
        }), 128))
      ], 4),
      !_ctx.data || !_ctx.data.length ? (openBlock(), createElementBlock("div", _hoisted_2, [
        createVNode(_component_ElEmpty, mergeProps({ imageSize: 60 }, _ctx.emptyProps || {}), null, 16)
      ])) : createCommentVNode("", true),
      createVNode(_component_EleTooltip, 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]]);
export {
  iconGrid as default
};