ele-admin-plus 1.2.1-beta.3 → 1.2.1-beta.4

package/es/ele-dropdown/components/pro-dropdown.js

@@ -0,0 +1,204 @@
+import { defineComponent, ref, computed, resolveComponent, openBlock, createBlock, mergeProps, withCtx, createVNode, createElementVNode, normalizeClass, normalizeStyle, createElementBlock, Fragment, renderList, createCommentVNode, renderSlot, resolveDynamicComponent, toDisplayString } from "vue";
+import { ElIcon, ElButtonGroup, ElButton, ElScrollbar } from "element-plus";
+import { ArrowDown } from "../../icons";
+import { pick } from "../../utils/core";
+import EleTooltip from "../../ele-tooltip/index";
+import { tooltipPropKeys } from "../../ele-tooltip/props";
+import { dropdownProps, dropdownEmits } from "../props";
+const _sfc_main = defineComponent({
+  name: "ProDropdown",
+  components: { ElIcon, ElButtonGroup, ElButton, ElScrollbar, EleTooltip },
+  props: {
+    ...dropdownProps,
+    /** 当前选中菜单项 */
+    selected: Object
+  },
+  emits: dropdownEmits,
+  setup(props, { emit }) {
+    const tooltipRef = ref(null);
+    const tooltipProps = computed(() => {
+      const options = pick(props, tooltipPropKeys);
+      options.showAfter = props.trigger === "hover" ? props.showTimeout : 0;
+      options.hideAfter = props.trigger === "hover" ? props.hideTimeout : 0;
+      options.gpuAcceleration = props.transition === "el-fade-in-linear";
+      const classes = ["ele-dropdown"];
+      if (props.preventContextmenu) {
+        classes.push("is-prevent-event");
+      }
+      if (typeof props.popperClass === "string" && props.popperClass) {
+        classes.push(props.popperClass);
+      }
+      options.popperClass = classes.join(" ");
+      options.isPopover = true;
+      return options;
+    });
+    const hidePopper = () => {
+      tooltipRef.value && tooltipRef.value.hide();
+    };
+    const updatePopper = () => {
+      tooltipRef.value && tooltipRef.value.updatePopper();
+    };
+    const handleUpdateVisible = (visible) => {
+      emit("update:visible", visible);
+      emit("visibleChange", visible);
+    };
+    const handlePopBeforeEnter = () => {
+      emit("before-enter");
+    };
+    const handlePopBeforeLeave = () => {
+      emit("before-leave");
+    };
+    const handlePopAfterEnter = () => {
+      emit("after-enter");
+    };
+    const handlePopAfterLeave = () => {
+      emit("after-leave");
+    };
+    const handleItemClick = (item) => {
+      if (item.disabled) {
+        return;
+      }
+      if (props.hideOnClick) {
+        hidePopper();
+      }
+      emit("command", item.command);
+    };
+    const handleBtnClick = (e) => {
+      emit("click", e);
+    };
+    const handleOpen = () => {
+      if (props.disabled) {
+        return;
+      }
+      tooltipRef.value && tooltipRef.value.handleOpen();
+    };
+    const handleClose = () => {
+      hidePopper();
+    };
+    const handleContextmenu = (e) => {
+      if (props.preventContextmenu) {
+        e.preventDefault();
+      }
+    };
+    return {
+      ArrowDown,
+      tooltipRef,
+      tooltipProps,
+      hidePopper,
+      updatePopper,
+      handleUpdateVisible,
+      handlePopBeforeEnter,
+      handlePopBeforeLeave,
+      handlePopAfterEnter,
+      handlePopAfterLeave,
+      handleItemClick,
+      handleBtnClick,
+      handleOpen,
+      handleClose,
+      handleContextmenu
+    };
+  }
+});
+const _export_sfc = (sfc, props) => {
+  const target = sfc.__vccOpts || sfc;
+  for (const [key, val] of props) {
+    target[key] = val;
+  }
+  return target;
+};
+const _hoisted_1 = ["role"];
+const _hoisted_2 = {
+  key: 0,
+  class: "ele-dropdown-menu-divider"
+};
+const _hoisted_3 = ["onClick"];
+const _hoisted_4 = { key: 1 };
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_ElButton = resolveComponent("ElButton");
+  const _component_ElIcon = resolveComponent("ElIcon");
+  const _component_ElScrollbar = resolveComponent("ElScrollbar");
+  const _component_EleTooltip = resolveComponent("EleTooltip");
+  return openBlock(), createBlock(_component_EleTooltip, mergeProps({ tabindex: _ctx.tabindex }, _ctx.tooltipProps, {
+    ref: "tooltipRef",
+    "onUpdate:visible": _ctx.handleUpdateVisible,
+    onBeforeShow: _ctx.handlePopBeforeEnter,
+    onBeforeHide: _ctx.handlePopBeforeLeave,
+    onShow: _ctx.handlePopAfterEnter,
+    onHide: _ctx.handlePopAfterLeave
+  }), {
+    body: withCtx(() => [
+      createVNode(_component_ElScrollbar, {
+        maxHeight: _ctx.maxHeight,
+        class: "ele-dropdown-wrapper",
+        onContextmenu: _ctx.handleContextmenu
+      }, {
+        default: withCtx(() => [
+          createElementVNode("div", {
+            role: _ctx.role,
+            class: normalizeClass([
+              "ele-dropdown-menu",
+              { "is-small": _ctx.size === "small" },
+              { "is-large": _ctx.size === "large" }
+            ]),
+            style: normalizeStyle(_ctx.menuStyle)
+          }, [
+            (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.items, (item) => {
+              return openBlock(), createElementBlock(Fragment, {
+                key: item.key == null ? JSON.stringify(item.command) : item.key
+              }, [
+                item.divided ? (openBlock(), createElementBlock("div", _hoisted_2)) : createCommentVNode("", true),
+                createElementVNode("div", {
+                  class: normalizeClass([
+                    "ele-dropdown-menu-item",
+                    { "is-disabled": !!item.disabled },
+                    { "is-active": _ctx.modelValue === item.command },
+                    { "is-danger": !!item.danger }
+                  ]),
+                  onClick: ($event) => _ctx.handleItemClick(item)
+                }, [
+                  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_4, toDisplayString(item.title), 1)) : createCommentVNode("", true)
+                  ], 64))
+                ], 10, _hoisted_3)
+              ], 64);
+            }), 128))
+          ], 14, _hoisted_1)
+        ]),
+        _: 3
+      }, 8, ["maxHeight", "onContextmenu"])
+    ]),
+    default: withCtx(() => [
+      _ctx.splitButton ? (openBlock(), createBlock(_component_ElButton, mergeProps({
+        key: 0,
+        type: _ctx.type,
+        size: _ctx.size,
+        disabled: _ctx.disabled,
+        icon: _ctx.ArrowDown,
+        class: "ele-dropdown-caret-button"
+      }, _ctx.caretButtonProps || {}), null, 16, ["type", "size", "disabled", "icon"])) : renderSlot(_ctx.$slots, "default", {
+        key: 1,
+        active: _ctx.modelValue,
+        selected: _ctx.selected
+      })
+    ]),
+    _: 3
+  }, 16, ["tabindex", "onUpdate:visible", "onBeforeShow", "onBeforeHide", "onShow", "onHide"]);
+}
+const proDropdown = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+export {
+  proDropdown as default
+};