y-admin-pro 0.0.1

package/packages/ele-menus/style/index.ts

@@ -0,0 +1,8 @@
+import 'element-plus/es/components/menu/style/index';
+import 'element-plus/es/components/menu-item/style/index';
+import 'element-plus/es/components/menu-item-group/style/index';
+import 'element-plus/es/components/sub-menu/style/index';
+import 'element-plus/es/components/icon/style/index';
+import 'element-plus/es/components/badge/style/index';
+import '../../ele-tooltip/style/index';
+import './index.scss';

package/packages/ele-menus/types.ts

@@ -0,0 +1,108 @@
+import type { StyleValue, UserComponent } from '../ele-app/types';
+import type {
+  ElIconProps,
+  ElMenuItemProps,
+  ElSubMenuProps,
+  ElMenuItemGroupProps,
+  ElBadgeProps
+} from '../ele-app/el';
+import type { EleTooltipProps } from '../ele-app/plus';
+
+/**
+ * 菜单数据
+ */
+export interface MenuItem
+  extends Omit<ElMenuItemProps, 'style' | 'class'>,
+    Omit<ElSubMenuProps, 'index' | 'style' | 'class'>,
+    ElMenuItemGroupProps {
+  /** 唯一标识 */
+  key?: string | number;
+  /** 标题 */
+  title?: string;
+  /** 图标 */
+  icon?: UserComponent;
+  /** 图标属性 */
+  iconProps?: ElIconProps;
+  /** 图标样式 */
+  iconStyle?: StyleValue;
+  /** 菜单链接地址 */
+  path?: string;
+  /** 菜单的打开位置 */
+  pathTarget?: string;
+  /** 是否展示为分组菜单 */
+  group?: boolean;
+  /** 徽章 */
+  badge?: ElBadgeProps;
+  /** 子级数据 */
+  children?: MenuItem[];
+  /** 附加数据 */
+  meta?: Record<keyof any, any>;
+  /** 是否是溢出的菜单(内部属性) */
+  overflow?: boolean;
+}
+
+/**
+ * 菜单展示模式
+ */
+export type MenuMode = 'horizontal' | 'vertical' | 'compact';
+
+/**
+ * 主题
+ */
+export type MenuTheme = 'light' | 'dark';
+
+/**
+ * 弹出菜单主题
+ */
+export type PopupMenuTheme = 'auto' | MenuTheme;
+
+/**
+ * 弹出菜单是否彩色图标
+ */
+export type PopupColorful = 'auto' | boolean;
+
+/**
+ * 子菜单项点击事件
+ */
+export type MenuItemEvent = (item: MenuItem, e: MouseEvent) => void;
+
+/**
+ * 省略菜单的属性
+ */
+export interface EllipsisProps extends ElSubMenuProps {
+  /** 唯一标识 */
+  key?: string | number;
+  /** 图标 */
+  icon?: UserComponent;
+  /** 图标属性 */
+  iconProps?: ElIconProps;
+  /** 图标样式 */
+  iconStyle?: StyleValue;
+}
+
+/**
+ * 菜单文本溢出提示
+ */
+export type TextEllipsisTooltip = boolean | EleTooltipProps;
+
+/**
+ * 生成菜单数据返回结果
+ */
+export interface MenuResult {
+  /** 菜单数据 */
+  items?: MenuItem[];
+  /** 省略的菜单数据 */
+  moreItems?: MenuItem[];
+}
+
+/**
+ * 菜单省略计算参数
+ */
+export interface MenuEllipsisOption {
+  /** 获取菜单节点的方法 */
+  getMenuEl: () => HTMLElement | null;
+  /** 获取菜单省略项节点的方法 */
+  getMoreEl: () => HTMLElement | null;
+  /** 计算结果回调 */
+  onEllipsis: (index: number) => void;
+}

package/packages/ele-menus/util.ts

@@ -0,0 +1,193 @@
+import { onBeforeUnmount, onActivated, onDeactivated } from 'vue';
+import { debounce, getCurrentStyle } from '../utils/common';
+import type {
+  MenuItem,
+  MenuTheme,
+  PopupMenuTheme,
+  PopupColorful,
+  MenuResult,
+  MenuEllipsisOption
+} from './types';
+
+/**
+ * 生成气泡菜单的类名
+ * @param customerClass 自定义的类名
+ * @param theme 主题
+ * @param popTheme 气泡菜单主题
+ * @param colorful 是否彩色图标
+ * @param popupColorful 气泡菜单是否彩色图标
+ * @param firstPopClass 第一级气泡菜单类名
+ * @param first 是否是第一级菜单
+ * @param webkit 是否是webkit内核
+ */
+export function getPopperClass(
+  customerClass?: string,
+  theme?: MenuTheme,
+  popTheme?: PopupMenuTheme,
+  colorful?: boolean,
+  popupColorful?: PopupColorful,
+  firstPopClass?: string,
+  first?: boolean,
+  webkit?: boolean
+): string {
+  const popperClass: string[] = ['ele-menu'];
+  if (webkit) {
+    popperClass.push('is-webkit');
+  }
+  if (popTheme === 'dark' || (popTheme === 'auto' && theme === 'dark')) {
+    popperClass.push('is-night ele-menu-dark');
+  }
+  if (popupColorful === true || (popupColorful === 'auto' && colorful)) {
+    popperClass.push('is-colorful ele-menu-colorful');
+  }
+  if (first && firstPopClass) {
+    popperClass.push(firstPopClass);
+  }
+  if (customerClass) {
+    popperClass.push(customerClass);
+  }
+  return popperClass.join(' ');
+}
+
+/**
+ * 生成菜单数据
+ * @param items 菜单数据
+ * @param index 省略位置
+ * @param horizontal 是否是水平菜单
+ */
+export function getMenuItems(
+  menus?: MenuItem[],
+  index?: number,
+  horizontal?: boolean
+): MenuResult {
+  if (!horizontal || !menus || !menus.length) {
+    return { items: menus };
+  }
+  const data = menus.map((d) => {
+    return { ...d, group: false };
+  });
+  if (index == null || index < 0 || index >= data.length) {
+    return { items: data };
+  }
+  const items = index === 0 ? [] : data.slice(0, index);
+  const moreItems = index === 0 ? data : data.slice(index);
+  moreItems.forEach((d) => {
+    items.push({
+      ...d,
+      key: `overflow-${d.key || d.index || d.path}`,
+      index: `overflow-${d.index || d.path}`,
+      overflow: true,
+      children: (d.children?.length ? [null] : void 0) as any
+    });
+  });
+  return { items, moreItems };
+}
+
+/**
+ * 获取菜单节点宽度
+ * @param el 菜单节点
+ */
+export function getMenuWidth(el?: HTMLElement | null): number | undefined {
+  if (!el) {
+    return;
+  }
+  const style = getCurrentStyle(el);
+  const pl = Number.parseInt(style.paddingLeft || '0', 10);
+  const pr = Number.parseInt(style.paddingRight || '0', 10);
+  return el.clientWidth - pl - pr;
+}
+
+/**
+ * 获取菜单项节点宽度
+ * @param el 菜单项节点
+ */
+export function getItemWidth(el?: HTMLElement | null): number | undefined {
+  if (!el) {
+    return;
+  }
+  const style = getCurrentStyle(el);
+  const ml = Number.parseInt(style.marginLeft || '0', 10);
+  const mr = Number.parseInt(style.marginRight || '0', 10);
+  return el.offsetWidth + ml + mr;
+}
+
+/**
+ * 获取菜单子级节点
+ * @param el 菜单节点
+ */
+export function getMenuChilds(el: HTMLElement): HTMLElement[] {
+  const ellipsisClass = 'ele-sub-menu-ellipsis';
+  return Array.from(el.childNodes ?? []).filter((t: HTMLElement) => {
+    return t.nodeName === 'LI' && !t.classList.contains(ellipsisClass);
+  }) as HTMLElement[];
+}
+
+/**
+ * 菜单溢出省略
+ */
+export function useMenuEllipsis(option: MenuEllipsisOption) {
+  const { getMenuEl, getMoreEl, onEllipsis } = option;
+  const state = { activated: true };
+  /** 菜单尺寸改变监听器 */
+  const observer = new ResizeObserver(
+    debounce(() => {
+      computedEllipsis();
+    }, 350)
+  );
+
+  /** 计算省略索引 */
+  const computedEllipsis = () => {
+    const menuEl = getMenuEl();
+    if (!menuEl || !state.activated) {
+      return;
+    }
+    const childs = getMenuChilds(menuEl);
+    const menuWidth = getMenuWidth(menuEl) || 0;
+    const moreWidth = getItemWidth(getMoreEl()) || 48;
+    let index = 0;
+    let calcWidth = 0;
+    for (let i = 0; i < childs.length; i++) {
+      const width = getItemWidth(childs[i]) || 0;
+      calcWidth += width;
+      if (calcWidth > menuWidth) {
+        if (calcWidth - width + moreWidth > menuWidth) {
+          index = i - 1;
+        }
+        break;
+      }
+      index = i + 1;
+    }
+    onEllipsis(index);
+  };
+
+  /** 开始监听菜单尺寸改变 */
+  const observe = () => {
+    unobserve();
+    const menuEl = getMenuEl();
+    if (menuEl) {
+      observer.observe(menuEl);
+    }
+  };
+
+  /** 结束监听菜单尺寸改变 */
+  const unobserve = () => {
+    const menuEl = getMenuEl();
+    if (menuEl) {
+      observer.unobserve(menuEl);
+    }
+  };
+
+  onBeforeUnmount(() => {
+    unobserve();
+  });
+
+  onActivated(() => {
+    state.activated = true;
+  });
+
+  onDeactivated(() => {
+    state.activated = false;
+  });
+
+  return { observe, unobserve, computedEllipsis };
+}

package/packages/ele-modal/index.vue

@@ -0,0 +1,352 @@
+<!-- 弹窗 -->
+<template>
+  <Teleport :to="teleportTo" :disabled="teleportDisabled">
+    <ElDialog
+      v-bind="$attrs"
+      ref="dialogRef"
+      :modelValue="modelValue"
+      :title="title"
+      :width="width"
+      :fullscreen="false"
+      :modal="multiple ? false : modal"
+      :modalClass="dialogClass"
+      :appendToBody="false"
+      :lockScroll="inner || multiple ? false : lockScroll"
+      :openDelay="openDelay"
+      :closeDelay="closeDelay"
+      :closeOnClickModal="closeOnClickModal"
+      :closeOnPressEscape="closeOnPressEscape"
+      :showClose="false"
+      :beforeClose="beforeClose"
+      :draggable="false"
+      :overflow="false"
+      :center="center"
+      :alignCenter="false"
+      :destroyOnClose="destroyOnClose"
+      :zIndex="zIndex"
+      :headerAriaLevel="headerAriaLevel"
+      @update:modelValue="updateModelValue"
+      @open="handleOpen"
+      @opened="handleOpened"
+      @close="handleClose"
+      @closed="handleClosed"
+      @openAutoFocus="handleOpenAutoFocus"
+      @closeAutoFocus="handleCloseAutoFocus"
+    >
+      <template #header="{ close, titleId, titleClass }">
+        <div
+          :style="headerStyle"
+          class="ele-modal-header"
+          @mousedown="handleHeaderMousedown"
+          @touchstart="handleHeaderTouchstart"
+        >
+          <div class="ele-modal-title" :style="titleStyle">
+            <slot
+              name="header"
+              :close="close"
+              :titleId="titleId"
+              :titleClass="titleClass"
+            >
+              {{ title }}
+            </slot>
+          </div>
+          <!-- 最大化图标 -->
+          <div
+            v-if="maxable"
+            class="ele-modal-tool ele-modal-tool-max"
+            :style="fullscreenBtnStyle"
+            @click="toggleFullscreen()"
+            @mousedown.stop=""
+            @touchstart.stop=""
+          >
+            <slot name="maxIcon" :fullscreen="isFullscreen">
+              <ElIcon>
+                <CompressOutlined v-if="isFullscreen" />
+                <ExpandOutlined v-else />
+              </ElIcon>
+            </slot>
+          </div>
+          <!-- 关闭图标 -->
+          <div
+            v-if="showClose"
+            class="ele-modal-tool"
+            :style="closeBtnStyle"
+            @click="updateModelValue(false)"
+            @mousedown.stop=""
+            @touchstart.stop=""
+          >
+            <slot name="closeIcon">
+              <ElIcon>
+                <component v-if="closeIcon" :is="closeIcon" />
+                <CloseOutlined v-else />
+              </ElIcon>
+            </slot>
+          </div>
+        </div>
+        <!-- 拉伸图标 -->
+        <div
+          v-if="resizable"
+          :class="[
+            'ele-modal-resize-icon',
+            { 'is-horizontal': resizable === 'horizontal' },
+            { 'is-vertical': resizable === 'vertical' }
+          ]"
+          :style="resizeIconStyle"
+          @mousedown="handleResizeMousedown"
+          @touchstart="handleResizeTouchstart"
+        >
+          <slot name="resizeIcon">
+            <ElIcon>
+              <ResizeOutlined />
+            </ElIcon>
+          </slot>
+        </div>
+      </template>
+      <template v-if="$slots.footer" #footer>
+        <div class="ele-modal-footer" :style="footerStyle">
+          <slot name="footer"></slot>
+        </div>
+      </template>
+      <ReceiverView
+        :wrapPosition="false"
+        :class="['ele-modal-body', { 'is-form': form }, modalBodyClass]"
+        :style="bodyStyle"
+      >
+        <slot></slot>
+      </ReceiverView>
+    </ElDialog>
+  </Teleport>
+</template>
+
+<script lang="ts" setup>
+  import {
+    ref,
+    computed,
+    onMounted,
+    onActivated,
+    onDeactivated,
+    nextTick,
+    watch
+  } from 'vue';
+  import { ElDialog, ElIcon } from 'element-plus';
+  import {
+    CloseOutlined,
+    CompressOutlined,
+    ExpandOutlined,
+    ResizeOutlined
+  } from '../icons/index';
+  import type { ElDialogInstance } from '../ele-app/el';
+  import ReceiverView from '../ele-config-provider/components/receiver-view';
+  import { useLayoutState, useResponsive } from '../ele-pro-layout/util';
+  import {
+    wrapperClass,
+    closedClass,
+    getModalContainer,
+    useModalEvent
+  } from './util';
+  import { modalEmits, modalProps } from './props';
+
+  defineOptions({ name: 'EleModal', inheritAttrs: false });
+
+  const props = defineProps(modalProps);
+
+  const emit = defineEmits(modalEmits);
+
+  const layoutState = useLayoutState();
+  const isResponsive = useResponsive(props);
+
+  /** 弹窗组件 */
+  const dialogRef = ref<ElDialogInstance>(null);
+
+  /** 弹窗是否全屏 */
+  const isFullscreen = ref<boolean>(props.fullscreen ?? false);
+
+  /** 适配组件缓存 */
+  const isActivated = ref<boolean>(true);
+
+  /** 弹窗类名 */
+  const dialogClass = computed<string>(() => {
+    const classes: string[] = [wrapperClass];
+    // 开启布局响应
+    if (props.responsive ?? isResponsive.value ?? true) {
+      classes.push('ele-modal-responsive');
+    }
+    // 初始位置
+    if (props.alignCenter || props.position === 'center') {
+      classes.push('ele-modal-center');
+    } else if (props.position === 'top') {
+      classes.push('ele-modal-top');
+    } else if (props.position === 'bottom') {
+      classes.push('ele-modal-bottom');
+    } else if (props.position === 'left') {
+      classes.push('ele-modal-left');
+    } else if (props.position === 'right') {
+      classes.push('ele-modal-right');
+    } else if (props.position === 'leftTop') {
+      classes.push('ele-modal-left-top');
+    } else if (props.position === 'leftBottom') {
+      classes.push('ele-modal-left-bottom');
+    } else if (props.position === 'rightTop') {
+      classes.push('ele-modal-right-top');
+    } else if (props.position === 'rightBottom') {
+      classes.push('ele-modal-right-bottom');
+    }
+    // 支持拖动
+    if (props.draggable) {
+      classes.push('ele-modal-movable');
+    }
+    // 支持拉伸
+    if (props.resizable) {
+      classes.push('ele-modal-resizable');
+    }
+    // 支持打开多个
+    if (props.multiple) {
+      classes.push('ele-modal-multiple');
+    }
+    // 全屏
+    if (isFullscreen.value) {
+      classes.push('ele-modal-fullscreen');
+    }
+    // 关闭状态
+    if (!props.modelValue) {
+      classes.push(closedClass);
+    }
+    // 失活状态
+    if (!isActivated.value && props.modelValue) {
+      classes.push('ele-modal-hide');
+    }
+    // 限制在内部区域
+    if (props.inner) {
+      classes.push('ele-modal-inner');
+    }
+    // 自定义类名
+    if (props.modalClass) {
+      classes.push(props.modalClass);
+    }
+    return classes.join(' ');
+  });
+
+  /** 弹窗插入位置 */
+  const teleportTo = computed<Element | string>(() => {
+    return getModalContainer(
+      props.inner,
+      props.multiple,
+      props.appendTo,
+      layoutState.modalsEl
+    );
+  });
+
+  /** 禁用弹窗插入其它位置 */
+  const teleportDisabled = computed<boolean>(() => {
+    const appendTo = props.appendTo || 'body';
+    const disabled = appendTo === 'body' ? !props.appendToBody : false;
+    return props.multiple || props.inner ? false : disabled;
+  });
+
+  /** 弹窗支持拖拽拉伸点击置顶 */
+  const {
+    handleHeaderMousedown,
+    handleHeaderTouchstart,
+    handleResizeMousedown,
+    handleResizeTouchstart,
+    bindAutoTopEvent,
+    unbindAutoTopEvent,
+    topModal,
+    setInitPosition,
+    resetModalStyle
+  } = useModalEvent(dialogRef, props, isFullscreen);
+
+  /** 更新显示状态 */
+  const updateModelValue = (modelValue: boolean) => {
+    emit('update:modelValue', modelValue);
+  };
+
+  /** 弹窗全屏切换 */
+  const toggleFullscreen = (fullscreen?: boolean) => {
+    isFullscreen.value = fullscreen ?? !isFullscreen.value;
+    nextTick(() => {
+      topModal();
+    });
+    emit('update:fullscreen', isFullscreen.value);
+  };
+
+  /** 打开的回调 */
+  const handleOpen = () => {
+    if (props.resetOnClose || props.destroyOnClose) {
+      isFullscreen.value = props.fullscreen ?? false;
+    }
+    nextTick(() => {
+      if (props.resetOnClose) {
+        resetModalStyle();
+      } else {
+        setInitPosition();
+      }
+      topModal();
+    });
+    emit('open');
+  };
+
+  /** 打开动画结束的回调 */
+  const handleOpened = () => {
+    bindAutoTopEvent();
+    emit('opened');
+  };
+
+  /** 关闭的回调 */
+  const handleClose = () => {
+    unbindAutoTopEvent();
+    emit('close');
+  };
+
+  /** 关闭动画结束的回调 */
+  const handleClosed = () => {
+    emit('closed');
+  };
+
+  /** 内容获取焦点的回调 */
+  const handleOpenAutoFocus = () => {
+    emit('openAutoFocus');
+  };
+
+  /** 内容失去焦点的回调 */
+  const handleCloseAutoFocus = () => {
+    emit('closeAutoFocus');
+  };
+
+  /** 重置弹窗位置 */
+  const resetPosition = () => {
+    resetModalStyle();
+  };
+
+  /** 关闭弹窗 */
+  const closeModal = () => {
+    dialogRef.value && dialogRef.value.handleClose();
+  };
+
+  watch(
+    () => props.fullscreen,
+    (fullscreen) => {
+      isFullscreen.value = fullscreen ?? false;
+    }
+  );
+
+  onMounted(() => {
+    if (props.modelValue) {
+      setInitPosition();
+    }
+  });
+
+  onActivated(() => {
+    isActivated.value = true;
+  });
+
+  onDeactivated(() => {
+    isActivated.value = false;
+  });
+
+  defineExpose({
+    dialogRef,
+    resetPosition,
+    handleClose: closeModal
+  });
+</script>