yuang-framework-ui-pc/es/ele-dropdown/index.js

yuang-framework-ui-pc Library

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