y-admin-pro 0.0.1

package/packages/ele-dropdown/components/pro-dropdown.vue

@@ -0,0 +1,196 @@
+<template>
+  <EleTooltip
+    :tabindex="tabindex"
+    v-bind="tooltipProps"
+    ref="tooltipRef"
+    @update:visible="handleUpdateVisible"
+    @before-show="handlePopBeforeEnter"
+    @before-hide="handlePopBeforeLeave"
+    @show="handlePopAfterEnter"
+    @hide="handlePopAfterLeave"
+  >
+    <ElButton
+      v-if="splitButton"
+      :type="type"
+      :size="size"
+      :disabled="disabled"
+      :icon="ArrowDown"
+      class="ele-dropdown-caret-button"
+      v-bind="caretButtonProps || {}"
+    />
+    <slot v-else :active="modelValue" :selected="selected"></slot>
+    <template #body>
+      <div
+        v-if="hasSubMenu"
+        class="ele-dropdown-wrapper"
+        @contextmenu="handleWrapperContext"
+      >
+        <DropdownMenus
+          v-if="items && items.length"
+          :role="role"
+          :items="items"
+          :selected="modelValue"
+          :menuStyle="menuStyle"
+          :iconProps="iconProps"
+          :size="size"
+          @itemClick="handleItemClick"
+          @wrapperContext="handleWrapperContext"
+        >
+          <template
+            v-for="name in Object.keys($slots).filter((k) => 'default' !== k)"
+            #[name]="slotProps"
+          >
+            <slot :name="name" v-bind="slotProps || {}"></slot>
+          </template>
+        </DropdownMenus>
+      </div>
+      <ElScrollbar
+        v-else
+        :maxHeight="maxHeight"
+        class="ele-dropdown-wrapper"
+        @contextmenu="handleWrapperContext"
+      >
+        <DropdownMenus
+          v-if="items && items.length"
+          :role="role"
+          :items="items"
+          :selected="modelValue"
+          :menuStyle="menuStyle"
+          :iconProps="iconProps"
+          :size="size"
+          @itemClick="handleItemClick"
+          @wrapperContext="handleWrapperContext"
+        >
+          <template
+            v-for="name in Object.keys($slots).filter((k) => 'default' !== k)"
+            #[name]="slotProps"
+          >
+            <slot :name="name" v-bind="slotProps || {}"></slot>
+          </template>
+        </DropdownMenus>
+      </ElScrollbar>
+    </template>
+  </EleTooltip>
+</template>
+
+<script lang="ts" setup>
+  import type { PropType } from 'vue';
+  import { ref, computed } from 'vue';
+  import { ElButton, ElScrollbar } from 'element-plus';
+  import { ArrowDown } from '../../icons/index';
+  import type { EleTooltipInstance, EleTooltipProps } from '../../ele-app/plus';
+  import { pick } from '../../utils/common';
+  import EleTooltip from '../../ele-tooltip/index.vue';
+  import { tooltipPropKeys } from '../../ele-tooltip/props';
+  import DropdownMenus from './dropdown-menus.vue';
+  import type { DropdownItem } from '../types';
+  import { dropdownProps, dropdownEmits } from '../props';
+
+  defineOptions({ name: 'ProDropdown' });
+
+  const props = defineProps({
+    ...dropdownProps,
+    /** 当前选中菜单项 */
+    selected: Object as PropType<DropdownItem | null>
+  });
+
+  const emit = defineEmits(dropdownEmits);
+
+  /** 气泡组件 */
+  const tooltipRef = ref<EleTooltipInstance>(null);
+
+  /** 气泡组件属性 */
+  const tooltipProps = computed<EleTooltipProps>(() => {
+    const options: EleTooltipProps = pick(props, tooltipPropKeys as any);
+    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: string[] = ['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<boolean>(
+    () => !!(props.items && props.items.some((d) => !!d.children?.length))
+  );
+
+  /** 关闭气泡 */
+  const hidePopper = () => {
+    tooltipRef.value && tooltipRef.value.hide();
+  };
+
+  /** 更新气泡 */
+  const updatePopper = () => {
+    tooltipRef.value && tooltipRef.value.updatePopper();
+  };
+
+  /** 更新气泡打开状态 */
+  const handleUpdateVisible = (visible: boolean) => {
+    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: DropdownItem) => {
+    if (props.hideOnClick && !item.children?.length) {
+      hidePopper();
+    }
+    emit('command', item.command);
+  };
+
+  /** 打开下拉菜单 */
+  const handleOpen = () => {
+    if (props.disabled) {
+      return;
+    }
+    tooltipRef.value && tooltipRef.value.handleOpen();
+  };
+
+  /** 关闭下拉菜单 */
+  const handleClose = () => {
+    hidePopper();
+  };
+
+  /** 下拉容器右键事件 */
+  const handleWrapperContext = (e: MouseEvent) => {
+    if (props.preventContextmenu) {
+      e.preventDefault();
+    }
+  };
+
+  defineExpose({
+    tooltipRef,
+    hidePopper,
+    updatePopper,
+    handleOpen,
+    handleClose
+  });
+</script>

package/packages/ele-dropdown/index.vue

@@ -0,0 +1,213 @@
+<!-- 下拉菜单 -->
+<template>
+  <template v-if="componentType === 'pro'">
+    <ProDropdown
+      v-if="virtualTriggering"
+      v-bind="$props"
+      ref="dropdownRef"
+      :splitButton="false"
+      :selected="selected"
+      @command="handleMenuClick"
+      @visibleChange="handlePopVisibleChange"
+    >
+      <template v-for="name in Object.keys($slots)" #[name]="slotProps">
+        <slot :name="name" v-bind="slotProps || {}"></slot>
+      </template>
+    </ProDropdown>
+    <div v-else class="ele-dropdown-trigger">
+      <ElButtonGroup v-if="splitButton">
+        <ElButton
+          :type="type"
+          :size="size"
+          :disabled="disabled"
+          v-bind="splitButtonProps || {}"
+          @click="handleBtnClick"
+        >
+          <slot :active="modelValue" :selected="selected"></slot>
+        </ElButton>
+        <ProDropdown
+          v-bind="$props"
+          ref="dropdownRef"
+          :selected="selected"
+          @command="handleMenuClick"
+          @visibleChange="handlePopVisibleChange"
+        >
+          <template v-for="name in Object.keys($slots)" #[name]="slotProps">
+            <slot :name="name" v-bind="slotProps || {}"></slot>
+          </template>
+        </ProDropdown>
+      </ElButtonGroup>
+      <ProDropdown
+        v-else
+        v-bind="$props"
+        ref="dropdownRef"
+        :selected="selected"
+        @command="handleMenuClick"
+        @visibleChange="handlePopVisibleChange"
+      >
+        <template v-for="name in Object.keys($slots)" #[name]="slotProps">
+          <slot :name="name" v-bind="slotProps || {}"></slot>
+        </template>
+      </ProDropdown>
+    </div>
+  </template>
+  <ElDropdown
+    v-else
+    class="ele-dropdown-trigger"
+    v-bind="dropdownPropsData"
+    ref="dropdownRef"
+    @click="handleBtnClick"
+    @command="handleMenuClick"
+    @visibleChange="handlePopVisibleChange"
+  >
+    <slot :active="modelValue" :selected="selected"></slot>
+    <template #dropdown>
+      <slot v-if="!items && $slots.dropdown" name="dropdown"></slot>
+      <ElDropdownMenu v-else :style="menuStyle">
+        <template v-if="items">
+          <ElDropdownItem
+            v-for="item in items"
+            :key="item.key == null ? JSON.stringify(item.command) : item.key"
+            :class="[
+              { 'is-active': modelValue === item.command },
+              { 'is-danger': !!item.danger }
+            ]"
+            v-bind="
+              omit(item, [
+                'icon',
+                'title',
+                'iconProps',
+                'iconStyle',
+                'slot',
+                'danger'
+              ])
+            "
+          >
+            <template
+              v-if="item.slot && item.slot !== 'default' && $slots[item.slot]"
+            >
+              <slot :name="item.slot" :item="item"></slot>
+            </template>
+            <template v-else>
+              <ElIcon
+                v-if="item.icon"
+                v-bind="{ ...(iconProps || {}), ...(item.iconProps || {}) }"
+              >
+                <component :is="item.icon" :style="item.iconStyle" />
+              </ElIcon>
+              <span v-if="item.title">{{ item.title }}</span>
+            </template>
+          </ElDropdownItem>
+        </template>
+        <slot v-else-if="$slots.dropdownMenu" name="dropdownMenu"></slot>
+      </ElDropdownMenu>
+    </template>
+  </ElDropdown>
+</template>
+
+<script lang="ts" setup>
+  import type { Ref } from 'vue';
+  import { ref, computed } from 'vue';
+  import {
+    ElDropdown,
+    ElDropdownMenu,
+    ElDropdownItem,
+    ElButtonGroup,
+    ElButton,
+    ElIcon
+  } from 'element-plus';
+  import type { ElDropdownProps } from '../ele-app/el';
+  import { omit, pick } from '../utils/common';
+  import { useFormValidate } from '../ele-basic-select/util';
+  import ProDropdown from './components/pro-dropdown.vue';
+  import type { DropdownItem } from './types';
+  import { dropdownProps, dropdownEmits, elDropdownPropKeys } from './props';
+  import type { DropdownInstance } from './props';
+
+  defineOptions({ name: 'EleDropdown' });
+
+  const props = defineProps(dropdownProps);
+
+  const emit = defineEmits(dropdownEmits);
+
+  const { validateChange } = useFormValidate();
+
+  /** 下拉菜单组件 */
+  const dropdownRef: Ref<DropdownInstance> = ref<DropdownInstance>(null);
+
+  /** 下拉菜单属性 */
+  const dropdownPropsData = computed<ElDropdownProps>(() => {
+    const options = pick(props, elDropdownPropKeys);
+    const classes: string[] = ['ele-popper', 'ele-dropdown'];
+    if (props.popperClass) {
+      classes.push(props.popperClass);
+    }
+    (options as any).popperClass = classes.join(' ');
+    return options;
+  });
+
+  /** 当前选中菜单项 */
+  const selected = computed<DropdownItem | null | undefined>(() => {
+    if (props.modelValue == null || props.modelValue === '' || !props.items) {
+      return;
+    }
+    return props.items.find((d) => d.command === props.modelValue);
+  });
+
+  /** 更新选中值 */
+  const updateModelValue = (value: DropdownItem['command']) => {
+    if (value !== props.modelValue) {
+      emit('update:modelValue', value);
+      if (props.validateEvent) {
+        validateChange();
+      }
+      emit('change', value);
+    }
+  };
+
+  /** 菜单项点击事件 */
+  const handleMenuClick = (command: DropdownItem['command']) => {
+    updateModelValue(command);
+    emit('command', command);
+  };
+
+  /** 内容按钮点击事件 */
+  const handleBtnClick = (e: MouseEvent) => {
+    emit('click', e);
+  };
+
+  /** 下拉框显示状态改变事件 */
+  const handlePopVisibleChange = (visible: boolean) => {
+    emit('visibleChange', visible);
+  };
+
+  /** 打开下拉菜单 */
+  const handleOpen = () => {
+    if (dropdownRef.value) {
+      dropdownRef.value.handleOpen();
+    }
+  };
+
+  /** 关闭下拉菜单 */
+  const handleClose = () => {
+    if (dropdownRef.value) {
+      dropdownRef.value.handleClose();
+    }
+  };
+
+  /** 更新气泡 */
+  const updatePopper = () => {
+    // @ts-ignore
+    if (dropdownRef.value && dropdownRef.value.updatePopper) {
+      // @ts-ignore
+      dropdownRef.value.updatePopper();
+    }
+  };
+
+  defineExpose({
+    dropdownRef,
+    handleOpen,
+    handleClose,
+    updatePopper
+  });
+</script>

package/packages/ele-dropdown/props.ts

@@ -0,0 +1,107 @@
+import type { PropType, ExtractPropTypes } from 'vue';
+import { dropdownProps as elDropdownProps } from 'element-plus';
+import type { StyleValue } from '../ele-app/types';
+import type {
+  ElIconProps,
+  ElButtonProps,
+  ElDropdownInstance
+} from '../ele-app/el';
+import { omit } from '../utils/common';
+import { popoverProps, popoverEmits } from '../ele-popover/props';
+import type ProDropdown from './components/pro-dropdown.vue';
+import type { DropdownItem } from './types';
+const normalizePopoverProps = omit(popoverProps, [
+  'title',
+  'effect',
+  'content',
+  'width',
+  'placement',
+  'disabled',
+  'popperOptions',
+  'popperClass',
+  'showAfter',
+  'hideAfter',
+  'autoClose',
+  'tabindex',
+  'teleported',
+  'bodyClass',
+  'bodyStyle',
+  'titleStyle',
+  'contentStyle'
+]);
+const normalizeDropdownProps = omit(elDropdownProps, [
+  'onCommand',
+  'onClick',
+  'onVisibleChange',
+  'onVisible-change'
+] as unknown as Array<'trigger' | 'size'>);
+
+/**
+ * 属性
+ */
+export const dropdownProps = {
+  ...normalizePopoverProps,
+  size: String as PropType<ElButtonProps['size']>,
+  ...normalizeDropdownProps,
+  /** 下拉框渐变动画 */
+  transition: {
+    type: String,
+    default: 'el-zoom-in-top'
+  },
+  /** 下拉菜单数据 */
+  items: Array as PropType<DropdownItem[]>,
+  /** 选中的菜单 */
+  modelValue: [String, Number, Object] as PropType<DropdownItem['command']>,
+  /** 自定义下拉菜单样式 */
+  menuStyle: Object as PropType<StyleValue>,
+  /** 自定义图标属性 */
+  iconProps: Object as PropType<ElIconProps>,
+  /** 下拉菜单使用的组件类型 */
+  componentType: String as PropType<'pro'>,
+  /** 是否阻止下拉菜单的右键事件 */
+  preventContextmenu: Boolean,
+  /** 内容按钮属性 */
+  splitButtonProps: Object as PropType<ElButtonProps>,
+  /** 箭头按钮属性 */
+  caretButtonProps: Object as PropType<ElButtonProps>,
+  /** 是否触发表单验证 */
+  validateEvent: {
+    type: Boolean,
+    default: true
+  }
+};
+
+export type DropdownProps = ExtractPropTypes<typeof dropdownProps>;
+
+/**
+ * 事件
+ */
+export const dropdownEmits = {
+  ...popoverEmits,
+  /** 内容按钮点击事件 */
+  click: (_e: MouseEvent) => true,
+  /** 菜单项点击事件 */
+  command: (_command: DropdownItem['command']) => true,
+  /** 下拉框显示状态改变事件 */
+  visibleChange: (_visible: boolean) => true,
+  /** 更新选中值 */
+  'update:modelValue': (_value: DropdownItem['command']) => true,
+  /** 选中改变的事件 */
+  change: (_active: DropdownItem['command']) => true
+};
+
+/**
+ * 属性名
+ */
+export type ElDropdownPropKeys = Array<keyof typeof normalizeDropdownProps>;
+
+export const elDropdownPropKeys = Object.keys(
+  normalizeDropdownProps
+) as ElDropdownPropKeys;
+
+/**
+ * 下拉菜单组件实例
+ */
+export type ProDropdownInstance = InstanceType<typeof ProDropdown> | null;
+
+export type DropdownInstance = ElDropdownInstance | ProDropdownInstance;

package/packages/ele-dropdown/style/css-var.scss

@@ -0,0 +1,8 @@
+@use '../../style/util.scss' as *;
+
+/* 下拉菜单主题变量 */
+@mixin set-dropdown-var($var) {
+  .ele-dropdown {
+    @include set-ele-var('dropdown', $var);
+  }
+}