yuang-framework-ui-pc 1.1.44 → 1.1.46

package/lib/ele-dropdown/index.cjs

@@ -0,0 +1,243 @@
+"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-danger": !!item.danger }
+                ]
+              },
+              { ref_for: true },
+              _ctx.omit(item, [
+                "icon",
+                "title",
+                "iconProps",
+                "iconStyle",
+                "slot",
+                "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;

package/lib/ele-dropdown/props.cjs

@@ -0,0 +1,75 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const elementPlus = require("element-plus");
+const core = require("../utils/core");
+const props = require("../ele-popover/props");
+const normalizePopoverProps = core.omit(props.popoverProps, [
+  "title",
+  "effect",
+  "content",
+  "width",
+  "placement",
+  "disabled",
+  "popperOptions",
+  "popperClass",
+  "showAfter",
+  "hideAfter",
+  "autoClose",
+  "tabindex",
+  "teleported",
+  "bodyClass",
+  "bodyStyle",
+  "titleStyle",
+  "contentStyle"
+]);
+const normalizeDropdownProps = core.omit(elementPlus.dropdownProps, [
+  "onCommand",
+  "onClick",
+  "onVisibleChange",
+  "onVisible-change"
+]);
+const dropdownProps = {
+  ...normalizePopoverProps,
+  size: String,
+  ...normalizeDropdownProps,
+  /** 下拉框渐变动画 */
+  transition: {
+    type: String,
+    default: "el-zoom-in-top"
+  },
+  /** 下拉菜单数据 */
+  items: Array,
+  /** 选中的菜单 */
+  modelValue: [String, Number, Object],
+  /** 自定义下拉菜单样式 */
+  menuStyle: Object,
+  /** 自定义图标属性 */
+  iconProps: Object,
+  /** 下拉菜单使用的组件类型 */
+  componentType: String,
+  /** 是否阻止下拉菜单的右键事件 */
+  preventContextmenu: Boolean,
+  /** 内容按钮属性 */
+  splitButtonProps: Object,
+  /** 箭头按钮属性 */
+  caretButtonProps: Object
+};
+const dropdownEmits = {
+  ...props.popoverEmits,
+  /** 内容按钮点击事件 */
+  click: (_e) => true,
+  /** 菜单项点击事件 */
+  command: (_command) => true,
+  /** 下拉框显示状态改变事件 */
+  visibleChange: (_visible) => true,
+  /** 更新选中值 */
+  "update:modelValue": (_value) => true,
+  /** 选中改变的事件 */
+  change: (_active) => true
+};
+const elDropdownPropKeys = Object.keys(
+  normalizeDropdownProps
+);
+exports.dropdownEmits = dropdownEmits;
+exports.dropdownProps = dropdownProps;
+exports.elDropdownPropKeys = elDropdownPropKeys;