y-admin-pro 0.0.1

package/packages/ele-modal/util.ts

@@ -0,0 +1,414 @@
+import type { Ref } from 'vue';
+import { unref } from 'vue';
+import type { ElDialogInstance } from '../ele-app/el';
+import { getCurrentStyle, queryChild } from '../utils/common';
+import { useMoveEvent } from '../utils/hook';
+import type { MoveOut, MoveOutValue, Position } from './types';
+import type { ModalProps } from './props';
+export const containerClass = 'ele-modal-container';
+export const wrapperClass = 'ele-modal';
+export const closedClass = 'ele-modal-closed';
+const fixTop = 0.65;
+const fixLeft = 0.65;
+
+/**
+ * 获取弹窗节点
+ * @param dialogRef 弹窗实例
+ */
+function getModalEl(dialogRef: Ref<ElDialogInstance>) {
+  const el = unref(unref(dialogRef)?.dialogContentRef)?.$el;
+  return el as HTMLElement | undefined;
+}
+
+/**
+ * 初始化弹窗样式
+ * @param modalEl 弹窗节点
+ */
+function initModalStyle(modalEl: HTMLElement) {
+  modalEl.style.top = modalEl.offsetTop + 'px';
+  modalEl.style.left = modalEl.offsetLeft + 'px';
+  modalEl.style.right = 'auto';
+  modalEl.style.bottom = 'auto';
+  modalEl.style.position = 'absolute';
+  modalEl.style.margin = '0';
+}
+
+/**
+ * 是否可拉出指定方向
+ * @param moveOut 拉出值
+ * @param direction 方向
+ */
+function canMoveOut(moveOut?: MoveOut, direction?: MoveOutValue): boolean {
+  if (direction && moveOut != null && Array.isArray(moveOut)) {
+    return moveOut.includes(direction);
+  }
+  return false;
+}
+
+/**
+ * 获取弹窗容器
+ * @param inner 是否限制在主体内部
+ * @param multiple 是否支持同时打开多个
+ * @param appendTo 自定义插入的容器
+ * @param modalsEl 限制在主体内部时的容器
+ */
+export function getModalContainer(
+  inner?: boolean,
+  multiple?: boolean,
+  appendTo?: string | HTMLElement,
+  modalsEl?: HTMLElement | null
+): HTMLElement | string {
+  if (multiple) {
+    const parent = (inner ? modalsEl : void 0) || document.body;
+    const wrapper = queryChild(parent, containerClass);
+    if (wrapper) {
+      return wrapper as HTMLElement;
+    }
+    const elem = document.createElement('div');
+    elem.classList.add(containerClass);
+    parent.appendChild(elem);
+    return elem;
+  }
+  if (inner && modalsEl) {
+    return modalsEl;
+  }
+  return appendTo || 'body';
+}
+
+/**
+ * 弹窗支持移动
+ * @param dialogRef 弹窗实例
+ * @param props 属性
+ * @param isFullscreen 全屏状态
+ */
+export function useModalMove(
+  dialogRef: Ref<ElDialogInstance>,
+  props: ModalProps,
+  isFullscreen: Ref<boolean>
+) {
+  let modalEl: HTMLElement | undefined | null = null;
+  let wrapEl: HTMLElement | undefined | null = null;
+  let downOL: number | null = null;
+  let downOT: number | null = null;
+
+  const { handleMousedown, handleTouchstart } = useMoveEvent({
+    start: () => {
+      modalEl = getModalEl(dialogRef);
+      wrapEl = modalEl?.parentElement;
+      if (!modalEl || !wrapEl || !props.draggable || isFullscreen.value) {
+        return;
+      }
+      modalEl.style.userSelect = 'none';
+      initModalStyle(modalEl);
+      downOL = modalEl.offsetLeft;
+      downOT = modalEl.offsetTop;
+    },
+    move: ({ distanceX, distanceY, e }) => {
+      if (
+        !modalEl ||
+        !wrapEl ||
+        downOL == null ||
+        downOT == null ||
+        distanceX == null ||
+        distanceY == null
+      ) {
+        return;
+      }
+      e.preventDefault();
+      let positionLeft = distanceX + downOL;
+      let positionTop = distanceY + downOT;
+      // 边界判断
+      const limitL = wrapEl.clientWidth - modalEl.clientWidth - fixLeft;
+      const limitT = wrapEl.clientHeight - modalEl.clientHeight - fixTop;
+      if (!props.moveOut) {
+        if (positionLeft < 0) {
+          positionLeft = 0;
+        } else if (positionLeft > limitL) {
+          positionLeft = limitL;
+        }
+        if (positionTop > limitT) {
+          positionTop = limitT;
+        }
+        if (positionTop < 0) {
+          positionTop = 0;
+        }
+      } else {
+        if (!canMoveOut(props.moveOut, 'left') && positionLeft < 0) {
+          positionLeft = 0;
+        }
+        if (!canMoveOut(props.moveOut, 'right') && positionLeft > limitL) {
+          positionLeft = limitL;
+        }
+        if (!canMoveOut(props.moveOut, 'bottom') && positionTop > limitT) {
+          positionTop = limitT;
+        }
+        if (!canMoveOut(props.moveOut, 'top') && positionTop < 0) {
+          positionTop = 0;
+        }
+        const minLimitL = wrapEl.clientWidth - 48;
+        if (positionLeft > minLimitL) {
+          positionLeft = minLimitL;
+        }
+        const minLimitT = wrapEl.clientHeight - 48;
+        if (props.multiple && positionTop > minLimitT) {
+          positionTop = minLimitT;
+        }
+      }
+      // 移动
+      modalEl.style.left = `${Math.floor(positionLeft)}px`;
+      modalEl.style.top = `${Math.floor(positionTop)}px`;
+    },
+    end: () => {
+      if (modalEl) {
+        modalEl.style.userSelect = '';
+      }
+      downOL = null;
+      downOT = null;
+      modalEl = null;
+      wrapEl = null;
+    },
+    touchmoveOptions: { passive: false }
+  });
+
+  return {
+    handleHeaderMousedown: handleMousedown,
+    handleHeaderTouchstart: handleTouchstart
+  };
+}
+
+/**
+ * 弹窗支持拉伸
+ * @param dialogRef 弹窗实例
+ * @param props 属性
+ * @param isFullscreen 全屏状态
+ */
+export function useModalResize(
+  dialogRef: Ref<ElDialogInstance>,
+  props: ModalProps,
+  isFullscreen: Ref<boolean>
+) {
+  let modalEl: HTMLElement | undefined | null = null;
+  let wrapEl: HTMLElement | undefined | null = null;
+  let downW: number | null = null;
+  let downH: number | null = null;
+
+  const { handleMousedown, handleTouchstart } = useMoveEvent({
+    start: () => {
+      modalEl = getModalEl(dialogRef);
+      wrapEl = modalEl?.parentElement;
+      if (!modalEl || !wrapEl || !props.resizable || isFullscreen.value) {
+        return;
+      }
+      modalEl.style.userSelect = 'none';
+      initModalStyle(modalEl);
+      downW = modalEl.clientWidth;
+      downH = modalEl.clientHeight;
+    },
+    move: ({ distanceX, distanceY, e }) => {
+      if (
+        !modalEl ||
+        !wrapEl ||
+        downW == null ||
+        downH == null ||
+        distanceX == null ||
+        distanceY == null
+      ) {
+        return;
+      }
+      e.preventDefault();
+      if (props.resizable !== 'vertical') {
+        const w = distanceX + downW;
+        const maxW = wrapEl.clientWidth - modalEl.offsetLeft - fixLeft;
+        const nw =
+          (w < props.minWidth
+            ? props.minWidth
+            : !canMoveOut(props.moveOut, 'right') && w > maxW
+              ? maxW
+              : w) + 'px';
+        modalEl.style.width = nw;
+        modalEl.style.maxWidth = nw;
+        modalEl.style.minWidth = nw;
+      }
+      if (props.resizable !== 'horizontal') {
+        const h = distanceY + downH;
+        const maxH = wrapEl.clientHeight - modalEl.offsetTop - fixTop;
+        const nh =
+          (h < props.minHeight
+            ? props.minHeight
+            : !canMoveOut(props.moveOut, 'bottom') && h > maxH
+              ? maxH
+              : h) + 'px';
+        modalEl.style.height = nh;
+        modalEl.style.maxHeight = nh;
+        modalEl.style.minHeight = nh;
+      }
+    },
+    end: () => {
+      if (modalEl) {
+        modalEl.style.userSelect = '';
+      }
+      downW = null;
+      downH = null;
+      modalEl = null;
+      wrapEl = null;
+    },
+    touchmoveOptions: { passive: false }
+  });
+
+  return {
+    handleResizeMousedown: handleMousedown,
+    handleResizeTouchstart: handleTouchstart
+  };
+}
+
+/**
+ * 弹窗事件处理
+ * @param dialogRef 弹窗实例
+ * @param props 属性
+ * @param isFullscreen 全屏状态
+ */
+export function useModalEvent(
+  dialogRef: Ref<ElDialogInstance>,
+  props: ModalProps,
+  isFullscreen: Ref<boolean>
+) {
+  const { handleHeaderMousedown, handleHeaderTouchstart } = useModalMove(
+    dialogRef,
+    props,
+    isFullscreen
+  );
+  const { handleResizeMousedown, handleResizeTouchstart } = useModalResize(
+    dialogRef,
+    props,
+    isFullscreen
+  );
+
+  // 是否还未设置过弹窗初始位置
+  let isInitPosition = true;
+
+  /** 获取弹窗默认层级 */
+  const getZIndex = () => {
+    return props.zIndex ?? 2000;
+  };
+
+  /** 置顶弹窗 */
+  const topModal = (el?: HTMLElement) => {
+    const modalEl = el ?? getModalEl(dialogRef);
+    const overlayEl = modalEl?.parentElement?.parentElement;
+    if (!overlayEl) {
+      return;
+    }
+    const currentIndex = getCurrentStyle(overlayEl).zIndex;
+    const containerEl = overlayEl.parentElement;
+    const cls = `.${wrapperClass}:not(.${closedClass})`;
+    const modals = containerEl ? containerEl.querySelectorAll(cls) : void 0;
+    let maxIndex = 0;
+    (modals ? Array.from(modals) : []).forEach((modalEl) => {
+      const zIndex = getCurrentStyle(modalEl).zIndex;
+      if (zIndex != null) {
+        const index = Number(zIndex);
+        if (index >= maxIndex && (!overlayEl || modalEl !== overlayEl)) {
+          maxIndex = index + 1;
+        }
+      }
+    });
+    if (maxIndex > Number(currentIndex || getZIndex() || 0)) {
+      overlayEl.style.zIndex = String(maxIndex);
+    }
+  };
+
+  /** 弹窗点击自动置顶事件处理 */
+  const mousedownListener = (event: MouseEvent) => {
+    if (props.multiple) {
+      topModal(event.currentTarget as HTMLElement);
+    }
+  };
+
+  const bindAutoTopEvent = () => {
+    const modalEl = getModalEl(dialogRef);
+    if (modalEl) {
+      modalEl.addEventListener('mousedown', mousedownListener);
+      modalEl.addEventListener('touchstart', mousedownListener);
+    }
+  };
+
+  const unbindAutoTopEvent = () => {
+    const modalEl = getModalEl(dialogRef);
+    if (modalEl) {
+      modalEl.removeEventListener('mousedown', mousedownListener);
+      modalEl.removeEventListener('touchstart', mousedownListener);
+    }
+  };
+
+  /** 获取位置对应的外间距值 */
+  const getPositionMargin = (position?: Position) => {
+    if (
+      position == null ||
+      typeof position !== 'object' ||
+      (position.top == null &&
+        position.right == null &&
+        position.bottom == null &&
+        position.left == null)
+    ) {
+      return;
+    }
+    return [position.top, position.right, position.bottom, position.left]
+      .map((p) => (typeof p === 'number' ? `${p}px` : p || 'auto'))
+      .join(' ');
+  };
+
+  /** 获取弹窗初始位置 */
+  const getPosition = (): Position | undefined => {
+    if (props.alignCenter) {
+      return 'center';
+    }
+    if (props.top != null && props.top !== '') {
+      return { top: props.top };
+    }
+    return props.position;
+  };
+
+  /** 设置弹窗初始位置 */
+  const setInitPosition = () => {
+    if (isInitPosition) {
+      isInitPosition = false;
+      const modalEl = getModalEl(dialogRef);
+      const margin = getPositionMargin(getPosition());
+      if (modalEl && margin != null) {
+        modalEl.style.margin = margin;
+      }
+    }
+  };
+
+  /** 重置弹窗位置及大小 */
+  const resetModalStyle = () => {
+    const modalEl = getModalEl(dialogRef);
+    if (modalEl) {
+      const w = props.width;
+      modalEl.style.margin = getPositionMargin(getPosition()) || '';
+      modalEl.style.position = '';
+      modalEl.style.top = '';
+      modalEl.style.left = '';
+      modalEl.style.right = '';
+      modalEl.style.bottom = '';
+      modalEl.style.height = '';
+      modalEl.style.maxHeight = '';
+      modalEl.style.minHeight = '';
+      modalEl.style.width = typeof w === 'number' ? `${w}px` : (w ?? '');
+      modalEl.style.maxWidth = '';
+      modalEl.style.minWidth = '';
+    }
+  };
+
+  return {
+    handleHeaderMousedown,
+    handleHeaderTouchstart,
+    handleResizeMousedown,
+    handleResizeTouchstart,
+    bindAutoTopEvent,
+    unbindAutoTopEvent,
+    topModal,
+    setInitPosition,
+    resetModalStyle
+  };
+}

package/packages/ele-page/index.vue

@@ -0,0 +1,22 @@
+<!-- 页面容器 -->
+<template>
+  <div
+    :class="[
+      'ele-page',
+      { 'is-plain': plain },
+      { 'is-multi-card': multiCard },
+      { 'is-flex-table': flexTable },
+      { 'is-hide-footer': hideFooter }
+    ]"
+  >
+    <slot></slot>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { pageProps } from './props';
+
+  defineOptions({ name: 'ElePage' });
+
+  defineProps(pageProps);
+</script>

package/packages/ele-page/props.ts

@@ -0,0 +1,20 @@
+import type { ExtractPropTypes } from 'vue';
+
+/**
+ * 属性
+ */
+export const pageProps = {
+  /** 是否是单纯的容器 */
+  plain: Boolean,
+  /** 内容是否为多个卡片 */
+  multiCard: {
+    type: Boolean,
+    default: true
+  },
+  /** 内部表格是否弹性布局 */
+  flexTable: Boolean,
+  /** 是否关闭页脚 */
+  hideFooter: Boolean
+};
+
+export type PageProps = ExtractPropTypes<typeof pageProps>;

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

@@ -0,0 +1,9 @@
+@use '../../style/util.scss' as *;
+
+/* 页面容器主题变量 */
+@mixin set-page-var($var) {
+  .ele-page,
+  .ele-admin-tabs {
+    @include set-ele-var('page', $var);
+  }
+}

package/packages/ele-page/style/index.scss

@@ -0,0 +1,74 @@
+@use '../../style/themes/default.scss' as *;
+@use '../../style/util.scss' as *;
+@use './css-var.scss' as *;
+
+@include set-page-var($ele);
+
+.ele-page {
+  box-sizing: border-box;
+
+  &:not(.is-plain) {
+    padding: eleVar('page', 'padding');
+  }
+
+  /* 多个卡片 */
+  &.is-multi-card {
+    padding-bottom: 0;
+
+    .ele-card,
+    .el-card {
+      margin-bottom: eleVar('page', 'padding');
+    }
+  }
+
+  /* 关闭页脚 */
+  &.is-hide-footer + .ele-footer {
+    display: none;
+  }
+}
+
+/* 撑开页脚 */
+.ele-admin-content > .ele-page {
+  flex: auto;
+}
+
+.ele-page.is-hide-footer {
+  flex: none;
+}
+
+/* 内部表格高度铺满 */
+.ele-page.is-flex-table {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  overflow: auto;
+
+  & > .ele-pro-table {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    overflow: auto;
+
+    & > .ele-pro-table-view {
+      flex: 1;
+      height: 100%;
+      overflow: hidden;
+    }
+  }
+}
+
+/* 内容定宽 */
+.ele-admin-limited > .ele-admin-main > .ele-admin-body > .ele-admin-wrapper {
+  & > .ele-admin-content > .ele-page:not(.is-plain) {
+    margin: 0 auto;
+    width: eleVar('page', 'max-width');
+    max-width: 100%;
+  }
+}
+
+/* 按钮风格页签 */
+.ele-admin-tabs.is-button + .ele-admin-wrapper > .ele-admin-content {
+  & > .ele-page:first-child {
+    padding-top: 0;
+  }
+}

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

@@ -0,0 +1 @@
+import './index.scss';

package/packages/ele-pagination/index.vue

@@ -0,0 +1,94 @@
+<!-- 分页 -->
+<template>
+  <ElPagination
+    ref="paginationRef"
+    :small="small"
+    :size="size"
+    :background="type === 'circle' ? false : background"
+    :pageSize="pageSize"
+    :defaultPageSize="defaultPageSize"
+    :total="pageTotal"
+    :pageCount="pageCount"
+    :pagerCount="pagerCount"
+    :currentPage="currentPage"
+    :defaultCurrentPage="defaultCurrentPage"
+    :layout="layout"
+    :pageSizes="pageSizes"
+    :popperClass="sizesPopperClass"
+    :prevText="prevText"
+    :prevIcon="prevIcon"
+    :nextText="nextText"
+    :nextIcon="nextIcon"
+    :disabled="disabled"
+    :teleported="teleported"
+    :hideOnSinglePage="hideOnSinglePage"
+    :class="[
+      'ele-pagination',
+      { 'is-circle': type === 'circle' },
+      { 'is-infinite': isInfinite }
+    ]"
+    @update:currentPage="handleUpdateCurrentPage"
+    @update:pageSize="handleUpdatePageSize"
+  >
+    <template v-for="name in Object.keys($slots)" #[name]="slotProps">
+      <slot :name="name" v-bind="slotProps || {}"></slot>
+    </template>
+  </ElPagination>
+</template>
+
+<script lang="ts" setup>
+  import { ref, computed } from 'vue';
+  import { ElPagination } from 'element-plus';
+  import type { ElPaginationInstance } from '../ele-app/el';
+  import { paginationProps, paginationEmits } from './props';
+
+  defineOptions({ name: 'ElePagination' });
+
+  const props = defineProps(paginationProps);
+
+  const emit = defineEmits(paginationEmits);
+
+  /** 组件引用 */
+  const paginationRef = ref<ElPaginationInstance>(null);
+
+  /** 是否无限页数 */
+  const isInfinite = computed<boolean>(() => '*' === props.total);
+
+  /** 总条目数 */
+  const pageTotal = computed<number | undefined>(() => {
+    if (isInfinite.value) {
+      if (props.hasNext) {
+        return Number.MAX_SAFE_INTEGER;
+      }
+      return (props.currentPage || 1) * (props.pageSize || 10);
+    }
+    const num = props.total == null ? void 0 : Number(props.total);
+    return num == null || isNaN(num) ? void 0 : num;
+  });
+
+  /** 每页数量选择下拉类名 */
+  const sizesPopperClass = computed<string>(() => {
+    const classes: string[] = ['ele-pagination-popper'];
+    if (props.isFixedPopper) {
+      classes.push('is-fixed');
+    }
+    if (typeof props.popperClass === 'string' && props.popperClass) {
+      classes.push(props.popperClass);
+    }
+    return classes.join(' ');
+  });
+
+  /** 更新页码 */
+  const handleUpdateCurrentPage = (currentPage: number) => {
+    emit('update:currentPage', currentPage);
+  };
+
+  /** 更新每页数量 */
+  const handleUpdatePageSize = (pageSize: number) => {
+    emit('update:pageSize', pageSize);
+  };
+
+  defineExpose({
+    paginationRef
+  });
+</script>

package/packages/ele-pagination/props.ts

@@ -0,0 +1,39 @@
+import type { PropType, ExtractPropTypes } from 'vue';
+import { paginationProps as elPaginationProps } from 'element-plus';
+import type { PaginationType, PaginationTotal } from './types';
+
+/**
+ * 属性
+ */
+export const paginationProps = {
+  ...elPaginationProps,
+  /** 总条目数 */
+  total: [String, Number] as PropType<PaginationTotal>,
+  /** 是否还有下一页 */
+  hasNext: {
+    type: Boolean,
+    default: true
+  },
+  /** 风格 */
+  type: {
+    type: String as PropType<PaginationType>,
+    default: 'circle'
+  },
+  /** 每页数量选择下拉是否使用固定定位 */
+  isFixedPopper: {
+    type: Boolean,
+    default: true
+  }
+};
+
+export type PaginationProps = ExtractPropTypes<typeof paginationProps>;
+
+/**
+ * 事件
+ */
+export const paginationEmits = {
+  /** 更新页码 */
+  'update:currentPage': (_currentPage: number) => true,
+  /** 更新每页数量 */
+  'update:pageSize': (_pageSize: number) => true
+};

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

@@ -0,0 +1,8 @@
+@use '../../style/util.scss' as *;
+
+/* 分页主题变量 */
+@mixin set-pagination-var($var) {
+  .ele-pagination {
+    @include set-ele-var('pagination', $var);
+  }
+}