yuang-framework-ui-pc/lib/ele-dropdown/index.cjs

yuang-framework-ui-pc Library

"use strict";
const vue = require("vue");
const elementPlus = require("element-plus");
const core = require("../utils/core");
const util = require("../ele-basic-select/util");
const ProDropdown = require("./components/pro-dropdown");
const props = require("./props");
const _sfc_main = vue.defineComponent({
  name: "EleDropdown",
  components: {
    ElDropdown: elementPlus.ElDropdown,
    ElDropdownMenu: elementPlus.ElDropdownMenu,
    ElDropdownItem: elementPlus.ElDropdownItem,
    ElButtonGroup: elementPlus.ElButtonGroup,
    ElButton: elementPlus.ElButton,
    ElIcon: elementPlus.ElIcon,
    ProDropdown
  },
  props: props.dropdownProps,
  emits: props.dropdownEmits,
  setup(props$1, { emit }) {
    const { validateChange } = util.useFormValidate();
    const dropdownRef = vue.ref(null);
    const dropdownProps2 = vue.computed(() => {
      const options = core.pick(props$1, props.elDropdownPropKeys);
      const classes = ["ele-popper", "ele-dropdown"];
      if (props$1.popperClass) {
        classes.push(props$1.popperClass);
      }
      options.popperClass = classes.join(" ");
      return options;
    });
    const selected = vue.computed(() => {
      if (props$1.modelValue == null || props$1.modelValue === "" || !props$1.items) {
        return;
      }
      return props$1.items.find((d) => d.command === props$1.modelValue);
    });
    const updateModelValue = (value) => {
      if (value !== props$1.modelValue) {
        emit("update:modelValue", value);
        validateChange();
        emit("change", value);
      }
    };
    const handleMenuClick = (command) => {
      updateModelValue(command);
      emit("command", command);
    };
    const handleBtnClick = (e) => {
      emit("click", e);
    };
    const handlePopVisibleChange = (visible) => {
      emit("visibleChange", visible);
    };
    const handleOpen = () => {
      if (dropdownRef.value) {
        dropdownRef.value.handleOpen();
      }
    };
    const handleClose = () => {
      if (dropdownRef.value) {
        dropdownRef.value.handleClose();
      }
    };
    const updatePopper = () => {
      if (dropdownRef.value && dropdownRef.value.updatePopper) {
        dropdownRef.value.updatePopper();
      }
    };
    return {
      omit: core.omit,
      dropdownRef,
      dropdownProps: dropdownProps2,
      selected,
      handleMenuClick,
      handleBtnClick,
      handlePopVisibleChange,
      handleOpen,
      handleClose,
      updatePopper
    };
  }
});
const _export_sfc = (sfc, props2) => {
  const target = sfc.__vccOpts || sfc;
  for (const [key, val] of props2) {
    target[key] = val;
  }
  return target;
};
const _hoisted_1 = {
  key: 1,
  class: "ele-dropdown-trigger"
};
const _hoisted_2 = { key: 1 };
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
  const _component_ProDropdown = vue.resolveComponent("ProDropdown");
  const _component_ElButton = vue.resolveComponent("ElButton");
  const _component_ElButtonGroup = vue.resolveComponent("ElButtonGroup");
  const _component_ElIcon = vue.resolveComponent("ElIcon");
  const _component_ElDropdownItem = vue.resolveComponent("ElDropdownItem");
  const _component_ElDropdownMenu = vue.resolveComponent("ElDropdownMenu");
  const _component_ElDropdown = vue.resolveComponent("ElDropdown");
  return _ctx.componentType === "pro" ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
    _ctx.virtualTriggering ? (vue.openBlock(), vue.createBlock(_component_ProDropdown, vue.mergeProps({ key: 0 }, _ctx.$props, {
      ref: "dropdownRef",
      splitButton: false,
      selected: _ctx.selected,
      onClick: _ctx.handleBtnClick,
      onCommand: _ctx.handleMenuClick,
      onVisibleChange: _ctx.handlePopVisibleChange
    }), vue.createSlots({ _: 2 }, [
      vue.renderList(Object.keys(_ctx.$slots), (name) => {
        return {
          name,
          fn: vue.withCtx((slotProps) => [
            vue.renderSlot(_ctx.$slots, name, vue.normalizeProps(vue.guardReactiveProps(slotProps || {})))
          ])
        };
      })
    ]), 1040, ["selected", "onClick", "onCommand", "onVisibleChange"])) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
      _ctx.splitButton ? (vue.openBlock(), vue.createBlock(_component_ElButtonGroup, { key: 0 }, {
        default: vue.withCtx(() => [
          vue.createVNode(_component_ElButton, vue.mergeProps({
            type: _ctx.type,
            size: _ctx.size,
            disabled: _ctx.disabled
          }, _ctx.splitButtonProps || {}, { onClick: _ctx.handleBtnClick }), {
            default: vue.withCtx(() => [
              vue.renderSlot(_ctx.$slots, "default", {
                active: _ctx.modelValue,
                selected: _ctx.selected
              })
            ]),
            _: 3
          }, 16, ["type", "size", "disabled", "onClick"]),
          vue.createVNode(_component_ProDropdown, vue.mergeProps(_ctx.$props, {
            ref: "dropdownRef",
            selected: _ctx.selected,
            onClick: _ctx.handleBtnClick,
            onCommand: _ctx.handleMenuClick,
            onVisibleChange: _ctx.handlePopVisibleChange
          }), vue.createSlots({ _: 2 }, [
            vue.renderList(Object.keys(_ctx.$slots), (name) => {
              return {
                name,
                fn: vue.withCtx((slotProps) => [
                  vue.renderSlot(_ctx.$slots, name, vue.normalizeProps(vue.guardReactiveProps(slotProps || {})))
                ])
              };
            })
          ]), 1040, ["selected", "onClick", "onCommand", "onVisibleChange"])
        ]),
        _: 3
      })) : (vue.openBlock(), vue.createBlock(_component_ProDropdown, vue.mergeProps({ key: 1 }, _ctx.$props, {
        ref: "dropdownRef",
        selected: _ctx.selected,
        onClick: _ctx.handleBtnClick,
        onCommand: _ctx.handleMenuClick,
        onVisibleChange: _ctx.handlePopVisibleChange
      }), vue.createSlots({ _: 2 }, [
        vue.renderList(Object.keys(_ctx.$slots), (name) => {
          return {
            name,
            fn: vue.withCtx((slotProps) => [
              vue.renderSlot(_ctx.$slots, name, vue.normalizeProps(vue.guardReactiveProps(slotProps || {})))
            ])
          };
        })
      ]), 1040, ["selected", "onClick", "onCommand", "onVisibleChange"]))
    ]))
  ], 64)) : (vue.openBlock(), vue.createBlock(_component_ElDropdown, vue.mergeProps({
    key: 1,
    class: "ele-dropdown-trigger"
  }, _ctx.dropdownProps, {
    ref: "dropdownRef",
    onClick: _ctx.handleBtnClick,
    onCommand: _ctx.handleMenuClick,
    onVisibleChange: _ctx.handlePopVisibleChange
  }), {
    dropdown: vue.withCtx(() => [
      !_ctx.items && _ctx.$slots.dropdown ? vue.renderSlot(_ctx.$slots, "dropdown", { key: 0 }) : (vue.openBlock(), vue.createBlock(_component_ElDropdownMenu, {
        key: 1,
        style: vue.normalizeStyle(_ctx.menuStyle)
      }, {
        default: vue.withCtx(() => [
          _ctx.items ? (vue.openBlock(true), vue.createElementBlock(vue.Fragment, { key: 0 }, vue.renderList(_ctx.items, (item) => {
            return vue.openBlock(), vue.createBlock(_component_ElDropdownItem, vue.mergeProps(
              {
                key: item.key == null ? JSON.stringify(item.command) : item.key,
                class: [
                  { "is-active": _ctx.modelValue === item.command },
                  { "is-primary": !!item.primary },
                  { "is-danger": !!item.danger }
                ]
              },
              { ref_for: true },
              _ctx.omit(item, [
                "icon",
                "title",
                "iconProps",
                "iconStyle",
                "slot",
                "primary",
                "danger"
              ])
            ), {
              default: vue.withCtx(() => [
                item.slot && item.slot !== "default" && _ctx.$slots[item.slot] ? vue.renderSlot(_ctx.$slots, item.slot, {
                  key: 0,
                  item
                }) : (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 1 }, [
                  item.icon ? (vue.openBlock(), vue.createBlock(_component_ElIcon, vue.mergeProps({
                    key: 0,
                    ref_for: true
                  }, { ..._ctx.iconProps || {}, ...item.iconProps || {} }), {
                    default: vue.withCtx(() => [
                      (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(item.icon), {
                        style: vue.normalizeStyle(item.iconStyle)
                      }, null, 8, ["style"]))
                    ]),
                    _: 2
                  }, 1040)) : vue.createCommentVNode("", true),
                  item.title ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_2, vue.toDisplayString(item.title), 1)) : vue.createCommentVNode("", true)
                ], 64))
              ]),
              _: 2
            }, 1040, ["class"]);
          }), 128)) : _ctx.$slots.dropdownMenu ? vue.renderSlot(_ctx.$slots, "dropdownMenu", { key: 1 }) : vue.createCommentVNode("", true)
        ]),
        _: 3
      }, 8, ["style"]))
    ]),
    default: vue.withCtx(() => [
      vue.renderSlot(_ctx.$slots, "default", {
        active: _ctx.modelValue,
        selected: _ctx.selected
      })
    ]),
    _: 3
  }, 16, ["onClick", "onCommand", "onVisibleChange"]));
}
const index = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
module.exports = index;