yuang-framework-ui-pc 1.1.43 → 1.1.45

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

@@ -0,0 +1,205 @@
+import { defineComponent, ref, computed, resolveComponent, createBlock, openBlock, mergeProps, withCtx, renderSlot, createElementBlock, createCommentVNode, createSlots, renderList, normalizeProps, guardReactiveProps } from "vue";
+import { ElScrollbar, ElButton } 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 DropdownMenus from "./dropdown-menus";
+import { dropdownEmits, dropdownProps } from "../props";
+const _sfc_main = defineComponent({
+  name: "ProDropdown",
+  components: { ElButton, ElScrollbar, EleTooltip, DropdownMenus },
+  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 hasSubMenu = computed(
+      () => !!(props.items && props.items.some((d) => {
+        var _a;
+        return !!((_a = d.children) == null ? void 0 : _a.length);
+      }))
+    );
+    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) => {
+      var _a;
+      if (props.hideOnClick && !((_a = item.children) == null ? void 0 : _a.length)) {
+        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 handleWrapperContext = (e) => {
+      if (props.preventContextmenu) {
+        e.preventDefault();
+      }
+    };
+    return {
+      ArrowDown,
+      tooltipRef,
+      tooltipProps,
+      hasSubMenu,
+      hidePopper,
+      updatePopper,
+      handleUpdateVisible,
+      handlePopBeforeEnter,
+      handlePopBeforeLeave,
+      handlePopAfterEnter,
+      handlePopAfterLeave,
+      handleItemClick,
+      handleBtnClick,
+      handleOpen,
+      handleClose,
+      handleWrapperContext
+    };
+  }
+});
+const _export_sfc = (sfc, props) => {
+  const target = sfc.__vccOpts || sfc;
+  for (const [key, val] of props) {
+    target[key] = val;
+  }
+  return target;
+};
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_ElButton = resolveComponent("ElButton");
+  const _component_DropdownMenus = resolveComponent("DropdownMenus");
+  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(() => [
+      _ctx.hasSubMenu ? (openBlock(), createElementBlock("div", {
+        key: 0,
+        class: "ele-dropdown-wrapper",
+        onContextmenu: _cache[0] || (_cache[0] = (...args) => _ctx.handleWrapperContext && _ctx.handleWrapperContext(...args))
+      }, [
+        _ctx.items && _ctx.items.length ? (openBlock(), createBlock(_component_DropdownMenus, {
+          key: 0,
+          role: _ctx.role,
+          items: _ctx.items,
+          selected: _ctx.modelValue,
+          menuStyle: _ctx.menuStyle,
+          iconProps: _ctx.iconProps,
+          size: _ctx.size,
+          onItemClick: _ctx.handleItemClick,
+          onWrapperContext: _ctx.handleWrapperContext
+        }, createSlots({ _: 2 }, [
+          renderList(Object.keys(_ctx.$slots).filter((k) => "default" !== k), (name) => {
+            return {
+              name,
+              fn: withCtx((slotProps) => [
+                renderSlot(_ctx.$slots, name, normalizeProps(guardReactiveProps(slotProps || {})))
+              ])
+            };
+          })
+        ]), 1032, ["role", "items", "selected", "menuStyle", "iconProps", "size", "onItemClick", "onWrapperContext"])) : createCommentVNode("", true)
+      ], 32)) : (openBlock(), createBlock(_component_ElScrollbar, {
+        key: 1,
+        maxHeight: _ctx.maxHeight,
+        class: "ele-dropdown-wrapper",
+        onContextmenu: _ctx.handleWrapperContext
+      }, {
+        default: withCtx(() => [
+          _ctx.items && _ctx.items.length ? (openBlock(), createBlock(_component_DropdownMenus, {
+            key: 0,
+            role: _ctx.role,
+            items: _ctx.items,
+            selected: _ctx.modelValue,
+            menuStyle: _ctx.menuStyle,
+            iconProps: _ctx.iconProps,
+            size: _ctx.size,
+            onItemClick: _ctx.handleItemClick,
+            onWrapperContext: _ctx.handleWrapperContext
+          }, createSlots({ _: 2 }, [
+            renderList(Object.keys(_ctx.$slots).filter((k) => "default" !== k), (name) => {
+              return {
+                name,
+                fn: withCtx((slotProps) => [
+                  renderSlot(_ctx.$slots, name, normalizeProps(guardReactiveProps(slotProps || {})))
+                ])
+              };
+            })
+          ]), 1032, ["role", "items", "selected", "menuStyle", "iconProps", "size", "onItemClick", "onWrapperContext"])) : createCommentVNode("", true)
+        ]),
+        _: 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
+};

package/es/ele-dropdown/style/index.scss

@@ -0,0 +1,314 @@
+@use '../../style/themes/default.scss' as *;
+@use '../../style/util.scss' as *;
+@use './css-var.scss' as *;
+
+@include set-dropdown-var($ele);
+
+.ele-dropdown-trigger > .el-tooltip__trigger {
+  outline: none;
+}
+
+.ele-dropdown {
+  &.ele-popper.ele-popover {
+    min-width: auto;
+    width: max-content;
+  }
+
+  & > .el-scrollbar,
+  & > .ele-dropdown-wrapper {
+    background: inherit;
+    border-radius: inherit;
+  }
+}
+
+.ele-dropdown-menu {
+  padding: eleVar('dropdown', 'padding');
+  box-sizing: border-box;
+}
+
+.ele-dropdown-menu-item {
+  display: flex;
+  align-items: center;
+  height: eleVar('dropdown', 'item-height');
+  line-height: eleVar('dropdown', 'item-height');
+  color: eleVar('dropdown', 'item-color');
+  font-size: eleVar('dropdown', 'item-font-size');
+  padding: eleVar('dropdown', 'item-padding');
+  border-radius: eleVar('dropdown', 'item-radius');
+  transition: (color $transition-base, background-color $transition-base);
+  box-sizing: border-box;
+  position: relative;
+  cursor: pointer;
+
+  & + .ele-dropdown-menu-item {
+    margin-top: eleVar('dropdown', 'item-margin');
+  }
+
+  & > .el-icon {
+    font-size: eleVar('dropdown', 'icon-size');
+    margin: eleVar('dropdown', 'icon-margin');
+  }
+
+  & > .ele-dropdown-menu-item-arrow {
+    color: eleVar('dropdown', 'arrow-color');
+    font-size: eleVar('dropdown', 'arrow-size');
+    padding: eleVar('dropdown', 'arrow-padding');
+    margin: eleVar('dropdown', 'arrow-margin');
+  }
+
+  &:hover,
+  &:focus {
+    color: eleVar('dropdown', 'item-hover-color');
+    background: eleVar('dropdown', 'item-hover-bg');
+  }
+
+  &.is-active {
+    color: eleVar('dropdown', 'item-active-color');
+    background: eleVar('dropdown', 'item-active-bg');
+    font-weight: eleVar('dropdown', 'item-active-font-weight');
+
+    &:hover,
+    &:focus {
+      background: eleVar('dropdown', 'item-active-hover-bg');
+    }
+  }
+
+  &.is-danger {
+    color: eleVar('dropdown', 'item-danger-color');
+
+    &.is-active {
+      background: eleVar('dropdown', 'item-danger-bg');
+
+      &:hover,
+      &:focus {
+        background: eleVar('dropdown', 'item-danger-hover-bg');
+      }
+    }
+  }
+
+  &.is-disabled {
+    color: eleVar('dropdown', 'item-disabled-color');
+    background: none;
+    cursor: not-allowed;
+
+    &.is-active,
+    &.is-active:hover,
+    &.is-active:focus {
+      background: eleVar('dropdown', 'item-disabled-bg');
+    }
+  }
+}
+
+.ele-dropdown-menu-divider {
+  border-top: eleVar('dropdown', 'divider');
+  margin: eleVar('dropdown', 'divider-margin');
+}
+
+.ele-dropdown-caret-button {
+  width: 32px;
+  padding-left: 0;
+  padding-right: 0;
+}
+
+/* 小尺寸 */
+.ele-dropdown-menu.is-small {
+  padding: eleVar('dropdown', 'sm-padding');
+
+  .ele-dropdown-menu-item {
+    height: eleVar('dropdown', 'sm-item-height');
+    line-height: eleVar('dropdown', 'sm-item-height');
+    font-size: eleVar('dropdown', 'sm-item-font-size');
+    padding: eleVar('dropdown', 'sm-item-padding');
+
+    & > .el-icon {
+      font-size: eleVar('dropdown', 'sm-icon-size');
+    }
+  }
+
+  .ele-dropdown-menu-divider {
+    margin: eleVar('dropdown', 'sm-divider-margin');
+  }
+}
+
+/* 大尺寸 */
+.ele-dropdown-menu.is-large {
+  padding: eleVar('dropdown', 'lg-padding');
+
+  .ele-dropdown-menu-item {
+    height: eleVar('dropdown', 'lg-item-height');
+    line-height: eleVar('dropdown', 'lg-item-height');
+    font-size: eleVar('dropdown', 'lg-item-font-size');
+    padding: eleVar('dropdown', 'lg-item-padding');
+
+    & > .el-icon {
+      font-size: eleVar('dropdown', 'lg-icon-size');
+    }
+  }
+
+  .ele-dropdown-menu-divider {
+    margin: eleVar('dropdown', 'lg-divider-margin');
+  }
+}
+
+/* 子菜单 */
+.ele-dropdown-wrapper.is-sub-menu {
+  width: max-content;
+  background: eleVar('popper', 'bg');
+  border: eleVar('popper', 'border');
+  box-shadow: eleVar('popper', 'shadow');
+  border-radius: eleVar('popper', 'radius');
+  position: absolute;
+  left: 100%;
+  top: 0;
+  transform-origin: top left;
+  transition: all $transition-slow;
+
+  &.is-right-end {
+    top: auto;
+    bottom: 0;
+    transform-origin: bottom left;
+  }
+
+  &.is-left-start {
+    left: auto;
+    right: 100%;
+    transform-origin: top right;
+  }
+
+  &.is-left-end {
+    top: auto;
+    bottom: 0;
+    left: auto;
+    right: 100%;
+    transform-origin: bottom right;
+  }
+}
+
+.ele-dropdown-menu-item:not(:hover) > .ele-dropdown-wrapper,
+.ele-dropdown-menu-item.is-disabled > .ele-dropdown-wrapper {
+  opacity: 0;
+  transform: scale(0.6);
+  pointer-events: none;
+  visibility: hidden;
+}
+
+/* ElDropdown */
+.ele-dropdown-trigger.el-dropdown {
+  color: inherit;
+  font-size: inherit;
+  line-height: inherit;
+}
+
+.ele-dropdown {
+  .el-dropdown-menu {
+    background: none;
+    border-radius: 0;
+    padding: eleVar('dropdown', 'padding');
+    box-sizing: border-box;
+  }
+
+  .el-dropdown-menu__item {
+    height: eleVar('dropdown', 'item-height');
+    line-height: eleVar('dropdown', 'item-height');
+    color: eleVar('dropdown', 'item-color');
+    font-size: eleVar('dropdown', 'item-font-size');
+    padding: eleVar('dropdown', 'item-padding');
+    border-radius: eleVar('dropdown', 'item-radius');
+    transition: (color $transition-base, background-color $transition-base);
+
+    & + .el-dropdown-menu__item {
+      margin-top: eleVar('dropdown', 'item-margin');
+    }
+
+    & > .el-icon {
+      font-size: eleVar('dropdown', 'icon-size');
+      margin: eleVar('dropdown', 'icon-margin');
+    }
+
+    &:not(.is-disabled):hover,
+    &:not(.is-disabled):focus {
+      color: eleVar('dropdown', 'item-hover-color');
+      background: eleVar('dropdown', 'item-hover-bg');
+    }
+
+    &:not(.is-disabled).is-active {
+      color: eleVar('dropdown', 'item-active-color');
+      background: eleVar('dropdown', 'item-active-bg');
+      font-weight: eleVar('dropdown', 'item-active-font-weight');
+
+      &:hover,
+      &:focus {
+        background: eleVar('dropdown', 'item-active-hover-bg');
+      }
+    }
+
+    &:not(.is-disabled).is-danger {
+      color: eleVar('dropdown', 'item-danger-color');
+
+      &.is-active {
+        background: eleVar('dropdown', 'item-danger-bg');
+
+        &:hover,
+        &:focus {
+          background: eleVar('dropdown', 'item-danger-hover-bg');
+        }
+      }
+    }
+
+    &.is-disabled {
+      color: eleVar('dropdown', 'item-disabled-color');
+      background: none;
+      cursor: not-allowed;
+
+      &.is-active,
+      &.is-active:hover,
+      &.is-active:focus {
+        background: eleVar('dropdown', 'item-disabled-bg');
+        font-weight: eleVar('dropdown', 'item-active-font-weight');
+      }
+    }
+  }
+
+  .el-dropdown-menu__item--divided {
+    border-top: eleVar('dropdown', 'divider');
+    margin: eleVar('dropdown', 'divider-margin');
+  }
+
+  .el-dropdown-menu--small {
+    padding: eleVar('dropdown', 'sm-padding');
+
+    .el-dropdown-menu__item {
+      height: eleVar('dropdown', 'sm-item-height');
+      line-height: eleVar('dropdown', 'sm-item-height');
+      font-size: eleVar('dropdown', 'sm-item-font-size');
+      padding: eleVar('dropdown', 'sm-item-padding');
+
+      & > .el-icon {
+        font-size: eleVar('dropdown', 'sm-icon-size');
+      }
+    }
+
+    .el-dropdown-menu__item--divided {
+      margin: eleVar('dropdown', 'sm-divider-margin');
+    }
+  }
+
+  .el-dropdown-menu--large {
+    padding: eleVar('dropdown', 'lg-padding');
+
+    .el-dropdown-menu__item {
+      height: eleVar('dropdown', 'lg-item-height');
+      line-height: eleVar('dropdown', 'lg-item-height');
+      font-size: eleVar('dropdown', 'lg-item-font-size');
+      padding: eleVar('dropdown', 'lg-item-padding');
+
+      & > .el-icon {
+        font-size: eleVar('dropdown', 'lg-icon-size');
+      }
+    }
+
+    .el-dropdown-menu__item--divided {
+      margin: eleVar('dropdown', 'lg-divider-margin');
+    }
+  }
+}