@ued_fpi/data-visual/dist/lib/wgms/src/common/select-panel.vue.js

<br /> <br /> <div style="text-align:center"> <b style="font-size:30px">@ued_fpi/data-visual</b> <p>基于Vite4+TypeScript的Vue3大屏组件库开发框架</p> <img style="display:inline" src="https://img.shields.io/npm/v/@ued_fpi/data-visual" />

'use strict';

Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });

const es = require('element-plus/es');
require('element-plus/es/components/base/style/css');
require('element-plus/es/components/scrollbar/style/css');
const vue = require('vue');

const _hoisted_1 = { class: "dv-wgms-container-select" };
const _hoisted_2 = ["onClick"];
const _hoisted_3 = ["onClick"];
const _sfc_main = /* @__PURE__ */ vue.defineComponent({
  __name: "select-panel",
  props: {
    /**
     * 配置项用于生成表格
     */
    option: {
      type: Array,
      default: () => {
        return [];
      }
    },
    /**
     * 默认选择index
     */
    defaultSelect: {
      type: Number,
      default: void 0
    },
    /**
     * 默认选择 defaultValue 优先级    defaultSelect>defaultValue
     */
    defaultValue: {
      type: [Number, String],
      default: void 0
    },
    boxStyle: {
      type: Object,
      default: void 0
    },
    labelStyle: {
      type: Object,
      default: void 0
    },
    selectBoxStyle: {
      type: Object,
      default: void 0
    },
    selectItemStyle: {
      type: Object,
      default: void 0
    },
    placeholder: {
      type: String,
      default: ""
    },
    /**
     * 箭头类型
     */
    arrow: {
      type: String,
      default: "box"
    },
    /**
     * 箭头大小比例
     */
    arrowScale: {
      type: Number,
      default: 1
    },
    /**
     * 是否显示背景
     */
    isShowBack: {
      type: Boolean,
      default: false
    }
  },
  emits: ["change"],
  setup(__props, { emit }) {
    const props = __props;
    const data = vue.reactive({
      isShowOption: false,
      label: "--",
      activeIndex: 0,
      width: "65px",
      id: `optionList${Math.random()}`
    });
    vue.watch(() => props.option, (val) => {
      if (val && val.length) {
        if (props.defaultSelect === -1) {
          data.activeIndex = props.defaultSelect;
        } else if (typeof props.defaultSelect === "number") {
          const currData = val[props.defaultSelect];
          data.label = currData.label;
          data.activeIndex = props.defaultSelect;
        } else {
          const index = props.defaultValue === void 0 ? 0 : val.findIndex((item) => item.value === props.defaultValue);
          data.label = val[~index ? index : 0].label;
          data.activeIndex = ~index ? index : 0;
        }
      }
    }, { deep: true, immediate: true });
    vue.watch(() => props.defaultValue, (val) => {
      const index = val === void 0 ? 0 : props.option.findIndex((item) => item.value === val);
      data.label = props.option[~index ? index : 0].label;
      data.activeIndex = ~index ? index : 0;
    });
    let listener;
    vue.onMounted(() => {
      listener = document.addEventListener("mouseup", (e) => {
        const pop = document.getElementById(data.id);
        if (data.isShowOption && pop) {
          if (!pop.contains(e.target)) {
            setTimeout(() => {
              data.isShowOption = false;
            });
          }
        }
      });
    });
    vue.onUnmounted(() => {
      listener && listener.removeEventListener();
    });
    const clickSelect = () => {
      data.isShowOption = !data.isShowOption;
    };
    const clickCurrItem = (item, index) => {
      data.activeIndex = index;
      data.isShowOption = false;
      data.label = item.label;
      emit("change", item, index);
    };
    const { isShowOption, label, activeIndex, id } = vue.toRefs(data);
    return (_ctx, _cache) => {
      const _component_el_scrollbar = es.ElScrollbar;
      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
        vue.createElementVNode("div", {
          class: vue.normalizeClass(["select-box", [__props.isShowBack ? "select-box-father" : ""]]),
          style: vue.normalizeStyle(__props.boxStyle),
          onClick: vue.withModifiers(clickSelect, ["stop"])
        }, [
          vue.createElementVNode("div", {
            class: "label",
            style: vue.normalizeStyle(__props.labelStyle)
          }, [
            vue.withDirectives(vue.createElementVNode("span", null, vue.toDisplayString(vue.unref(label)), 513), [
              [vue.vShow, vue.unref(activeIndex) !== -1]
            ]),
            vue.withDirectives(vue.createElementVNode("span", { class: "placeholder" }, vue.toDisplayString(__props.placeholder), 513), [
              [vue.vShow, vue.unref(activeIndex) === -1]
            ])
          ], 4),
          __props.arrow === "box" ? (vue.openBlock(), vue.createElementBlock("div", {
            key: 0,
            class: vue.normalizeClass(["arrow-white tran05", vue.unref(isShowOption) ? "ro-180" : ""])
          }, null, 2)) : vue.createCommentVNode("", true),
          __props.arrow === "line" ? (vue.openBlock(), vue.createElementBlock("div", {
            key: 1,
            class: vue.normalizeClass(["arrow-line tran05", vue.unref(isShowOption) ? "arrow-line-ro" : ""])
          }, null, 2)) : vue.createCommentVNode("", true)
        ], 14, _hoisted_2),
        vue.createVNode(vue.Transition, { name: "height-to-down" }, {
          default: vue.withCtx(() => [
            vue.withDirectives(vue.createVNode(_component_el_scrollbar, {
              id: vue.unref(id),
              class: "option-list",
              style: vue.normalizeStyle(__props.selectBoxStyle)
            }, {
              default: vue.withCtx(() => [
                (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(__props.option, (item, index) => {
                  return vue.openBlock(), vue.createElementBlock("div", {
                    key: index,
                    class: vue.normalizeClass(["select-item", [vue.unref(activeIndex) === index ? "select-item-check" : ""]]),
                    style: vue.normalizeStyle(__props.selectItemStyle),
                    onClick: ($event) => clickCurrItem(item, index)
                  }, vue.toDisplayString(item.selectLabel || item.label), 15, _hoisted_3);
                }), 128))
              ]),
              _: 1
            }, 8, ["id", "style"]), [
              [vue.vShow, vue.unref(isShowOption)]
            ])
          ]),
          _: 1
        })
      ]);
    };
  }
});

exports.default = _sfc_main;