yuang-framework-ui-pc 1.1.45 → 1.1.47

package/lib/ele-dialog/props.d.ts

@@ -0,0 +1,215 @@
+import { PropType, ExtractPropTypes } from 'vue';
+import { dialogProps } from 'element-plus';
+import { StyleValue } from '../ele-app/types';
+import { Resizable, MoveOut, Position } from './types';
+
+/**
+ * 属性
+ */
+export declare const eleDialogProps: {
+    appendToBody: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    draggable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** 是否可以拖出边界 */
+    moveOut: PropType<MoveOut>;
+    /** 是否可以拉伸 */
+    resizable: PropType<Resizable>;
+    /** 初始位置 */
+    position: PropType<Position>;
+    /** 是否在弹窗关闭后重置位置和大小 */
+    resetOnClose: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** 是否显示最大化切换按钮 */
+    maxable: BooleanConstructor;
+    /** 是否支持打开多个 */
+    multiple: BooleanConstructor;
+    /** 是否限制在主体内部 */
+    inner: BooleanConstructor;
+    /** 最小拉伸宽度 */
+    minWidth: {
+        type: NumberConstructor;
+        default: number;
+    };
+    /** 最小拉伸高度 */
+    minHeight: {
+        type: NumberConstructor;
+        default: number;
+    };
+    /** 标题栏样式 */
+    headerStyle: PropType<StyleValue>;
+    /** 标题样式 */
+    titleStyle: PropType<StyleValue>;
+    /** 主体样式 */
+    bodyStyle: PropType<StyleValue>;
+    /** 底栏样式 */
+    footerStyle: PropType<StyleValue>;
+    /** 自定义关闭按钮样式 */
+    closeBtnStyle: PropType<StyleValue>;
+    /** 自定义全屏按钮样式 */
+    fullscreenBtnStyle: PropType<StyleValue>;
+    /** 拉伸图标样式 */
+    resizeIconStyle: PropType<StyleValue>;
+    /** 是否开启响应式 */
+    responsive: {
+        type: BooleanConstructor;
+        default: null;
+    };
+    /** 是否是表单弹窗 */
+    form: BooleanConstructor;
+    appendTo: {
+        readonly type: PropType<string | HTMLElement>;
+        readonly required: false;
+        readonly validator: ((val: unknown) => boolean) | undefined;
+        __epPropKey: true;
+    } & {
+        readonly default: "body";
+    };
+    beforeClose: {
+        readonly type: PropType<import('element-plus').DialogBeforeCloseFn>;
+        readonly required: false;
+        readonly validator: ((val: unknown) => boolean) | undefined;
+        __epPropKey: true;
+    };
+    destroyOnClose: BooleanConstructor;
+    closeOnClickModal: {
+        readonly type: PropType<boolean>;
+        readonly required: false;
+        readonly validator: ((val: unknown) => boolean) | undefined;
+        __epPropKey: true;
+    } & {
+        readonly default: true;
+    };
+    closeOnPressEscape: {
+        readonly type: PropType<boolean>;
+        readonly required: false;
+        readonly validator: ((val: unknown) => boolean) | undefined;
+        __epPropKey: true;
+    } & {
+        readonly default: true;
+    };
+    lockScroll: {
+        readonly type: PropType<boolean>;
+        readonly required: false;
+        readonly validator: ((val: unknown) => boolean) | undefined;
+        __epPropKey: true;
+    } & {
+        readonly default: true;
+    };
+    modal: {
+        readonly type: PropType<boolean>;
+        readonly required: false;
+        readonly validator: ((val: unknown) => boolean) | undefined;
+        __epPropKey: true;
+    } & {
+        readonly default: true;
+    };
+    openDelay: {
+        readonly type: PropType<number>;
+        readonly required: false;
+        readonly validator: ((val: unknown) => boolean) | undefined;
+        __epPropKey: true;
+    } & {
+        readonly default: 0;
+    };
+    closeDelay: {
+        readonly type: PropType<number>;
+        readonly required: false;
+        readonly validator: ((val: unknown) => boolean) | undefined;
+        __epPropKey: true;
+    } & {
+        readonly default: 0;
+    };
+    top: {
+        readonly type: PropType<string>;
+        readonly required: false;
+        readonly validator: ((val: unknown) => boolean) | undefined;
+        __epPropKey: true;
+    };
+    modelValue: BooleanConstructor;
+    modalClass: StringConstructor;
+    headerClass: StringConstructor;
+    bodyClass: StringConstructor;
+    footerClass: StringConstructor;
+    width: {
+        readonly type: PropType<string | number>;
+        readonly required: false;
+        readonly validator: ((val: unknown) => boolean) | undefined;
+        __epPropKey: true;
+    };
+    zIndex: {
+        readonly type: PropType<number>;
+        readonly required: false;
+        readonly validator: ((val: unknown) => boolean) | undefined;
+        __epPropKey: true;
+    };
+    trapFocus: BooleanConstructor;
+    headerAriaLevel: {
+        readonly type: PropType<string>;
+        readonly required: false;
+        readonly validator: ((val: unknown) => boolean) | undefined;
+        __epPropKey: true;
+    } & {
+        readonly default: "2";
+    };
+    center: BooleanConstructor;
+    alignCenter: BooleanConstructor;
+    closeIcon: {
+        readonly type: PropType<string | import('vue').Component>;
+        readonly required: false;
+        readonly validator: ((val: unknown) => boolean) | undefined;
+        __epPropKey: true;
+    };
+    overflow: BooleanConstructor;
+    fullscreen: BooleanConstructor;
+    showClose: {
+        readonly type: PropType<boolean>;
+        readonly required: false;
+        readonly validator: ((val: unknown) => boolean) | undefined;
+        __epPropKey: true;
+    } & {
+        readonly default: true;
+    };
+    title: {
+        readonly type: PropType<string>;
+        readonly required: false;
+        readonly validator: ((val: unknown) => boolean) | undefined;
+        __epPropKey: true;
+    } & {
+        readonly default: "";
+    };
+    ariaLevel: {
+        readonly type: PropType<string>;
+        readonly required: false;
+        readonly validator: ((val: unknown) => boolean) | undefined;
+        __epPropKey: true;
+    } & {
+        readonly default: "2";
+    };
+};
+export type EleDialogProps = ExtractPropTypes<typeof eleDialogProps>;
+/**
+ * 事件
+ */
+export declare const eleDialogEmits: {
+    /** 更新全屏状态 */
+    'update:fullscreen': (_fullscreen: boolean) => boolean;
+    open: () => boolean;
+    opened: () => boolean;
+    close: () => boolean;
+    closed: () => boolean;
+    "update:modelValue": (value: boolean) => boolean;
+    openAutoFocus: () => boolean;
+    closeAutoFocus: () => boolean;
+};
+export type EleDialogPropKeys = Array<keyof typeof dialogProps>;
+/**
+ * 弹窗组件属性名
+ */
+export declare const eleDialogPropKeys: EleDialogPropKeys;

package/lib/ele-dialog/style/index.d.ts

@@ -0,0 +1 @@
+

package/lib/ele-dialog/style/index.scss

@@ -0,0 +1,259 @@
+@use '../../style/themes/default.scss' as *;
+@use '../../style/util.scss' as *;
+@use './css-var.scss' as *;
+
+@include set-dialog-var($ele);
+
+.ele-dialog {
+  &.el-overlay {
+    height: auto;
+  }
+
+  & > .el-overlay-dialog {
+    position: absolute;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: center;
+
+    & > .el-dialog {
+      padding: 0;
+      flex-shrink: 0;
+      position: relative;
+      background: eleVar('dialog', 'bg');
+      border-radius: eleVar('dialog', 'radius');
+      margin-bottom: eleVar('dialog', 'mobile-space');
+
+      // 让 model 外层不出现滚动条
+      position: absolute!important;
+      left: 50%;
+      top: 50%;
+      margin-top: 0!important;
+      transform: translate(-50%,-50%);
+      max-height: calc(100% - 30px);
+      max-width: calc(100% - 30px);
+      display: flex;
+      flex-direction: column;
+
+      & > .el-dialog__header,
+      & > .el-dialog__footer {
+        flex-shrink: 0;
+        border: none;
+        padding: 0;
+        margin: 0;
+      }
+
+      & > .el-dialog__body {
+        padding: 0;
+        color: inherit;
+        font-size: inherit;
+
+        overflow: scroll;
+      }
+    }
+  }
+}
+
+/* header */
+.ele-dialog-header {
+  display: flex;
+  align-items: center;
+  box-sizing: border-box;
+  padding: eleVar('dialog', 'header-padding');
+  border-bottom: eleVar('dialog', 'header-border');
+}
+
+.ele-dialog-title {
+  flex: 1;
+  color: eleVar('dialog', 'header-color');
+  font-size: eleVar('dialog', 'header-font-size');
+  line-height: eleVar('dialog', 'header-line-height');
+  font-weight: eleVar('dialog', 'header-font-weight');
+  box-sizing: border-box;
+}
+
+/* 图标按钮 */
+.ele-dialog-tool {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: eleVar('dialog', 'icon-size');
+  height: eleVar('dialog', 'icon-size');
+  line-height: eleVar('dialog', 'icon-size');
+  color: eleVar('dialog', 'icon-color');
+  font-size: eleVar('dialog', 'icon-font-size');
+  border-radius: eleVar('dialog', 'icon-radius');
+  transition: (color $transition-base, background-color $transition-base);
+  box-sizing: border-box;
+  cursor: pointer;
+
+  &:hover {
+    color: eleVar('dialog', 'icon-hover-color');
+    background: eleVar('dialog', 'icon-hover-bg');
+  }
+
+  & + .ele-dialog-tool {
+    margin-left: eleVar('dialog', 'icon-space');
+  }
+}
+
+/* body */
+.ele-dialog-body {
+  padding: eleVar('dialog', 'body-padding');
+  box-sizing: border-box;
+
+  &.is-form {
+    padding: eleVar('dialog', 'form-body-padding');
+  }
+}
+
+/* footer */
+.ele-dialog-footer {
+  padding: eleVar('dialog', 'footer-padding');
+  border-top: eleVar('dialog', 'footer-border');
+  box-sizing: border-box;
+}
+
+/* 默认位置 */
+.ele-dialog-top > .el-overlay-dialog > .el-dialog {
+  margin: 0;
+}
+
+.ele-dialog-center > .el-overlay-dialog > .el-dialog {
+  margin: auto;
+}
+
+.ele-dialog-bottom > .el-overlay-dialog > .el-dialog {
+  margin: auto auto 0 auto;
+}
+
+.ele-dialog-left > .el-overlay-dialog > .el-dialog {
+  margin: auto auto auto 0;
+}
+
+.ele-dialog-right > .el-overlay-dialog > .el-dialog {
+  margin: auto 0 auto auto;
+}
+
+.ele-dialog-left-top > .el-overlay-dialog > .el-dialog {
+  margin: 0 auto 0 0;
+}
+
+.ele-dialog-left-bottom > .el-overlay-dialog > .el-dialog {
+  margin: auto auto 0 0;
+}
+
+.ele-dialog-right-top > .el-overlay-dialog > .el-dialog {
+  margin: 0 0 0 auto;
+}
+
+.ele-dialog-right-bottom > .el-overlay-dialog > .el-dialog {
+  margin: auto 0 0 auto;
+}
+
+/* 支持拖拽 */
+.ele-dialog-movable > .el-overlay-dialog > .el-dialog > .el-dialog__header {
+  cursor: move;
+  user-select: none;
+}
+
+/* 支持拉伸 */
+.ele-dialog-resize-icon {
+  position: absolute;
+  right: 2px;
+  bottom: 2px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: eleVar('dialog', 'icon-color');
+  font-size: 12px;
+  cursor: se-resize;
+
+  &.is-horizontal {
+    cursor: e-resize;
+  }
+
+  &.is-vertical {
+    cursor: s-resize;
+  }
+}
+
+.ele-dialog-resizable > .el-overlay-dialog > .el-dialog,
+.ele-dialog-fullscreen > .el-overlay-dialog > .el-dialog {
+  display: flex;
+  flex-direction: column;
+
+  & > .el-dialog__body {
+    flex: auto;
+    overflow: auto;
+  }
+}
+
+/* 全屏 */
+.ele-dialog-fullscreen > .el-overlay-dialog > .el-dialog {
+  top: 0 !important;
+  left: 0 !important;
+  margin: 0 !important;
+  width: 100% !important;
+  height: 100% !important;
+  display: flex !important;
+  max-width: none !important;
+  min-width: auto !important;
+  max-height: none !important;
+  min-height: auto !important;
+  border-radius: 0 !important;
+
+  & > .el-dialog__header {
+    cursor: default;
+
+    & > .ele-dialog-resize-icon {
+      display: none;
+    }
+  }
+}
+
+/* 同时打开多个 */
+.ele-dialog-container {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  box-sizing: border-box;
+  z-index: elVar('index', 'popper');
+  overflow: hidden;
+}
+
+.ele-dialog-multiple {
+  pointer-events: none !important;
+  position: absolute !important;
+
+  & > .el-overlay-dialog {
+    pointer-events: none;
+    overflow: hidden;
+
+    & > .el-dialog {
+      pointer-events: auto;
+    }
+  }
+}
+
+/* 失活状态 */
+.ele-dialog-hide {
+  display: none !important;
+}
+
+/* 最大宽度适应屏幕 */
+.ele-dialog-responsive > .el-overlay-dialog > .el-dialog {
+  max-width: calc(100% - #{eleVar('dialog', 'mobile-space')} * 2);
+}
+
+/* 限制在主体区域 */
+.ele-admin-dialogs > .ele-dialog {
+  pointer-events: auto;
+  position: absolute !important;
+}

package/lib/ele-dialog/types.d.ts

@@ -0,0 +1,43 @@
+/**
+ * 拉伸类型
+ */
+export type Resizable = boolean | 'horizontal' | 'vertical';
+
+/**
+ * 拖出边界字符类型
+ */
+export type MoveOutValue = 'top' | 'left' | 'right' | 'bottom';
+
+/**
+ * 拖出边界类型
+ */
+export type MoveOut = boolean | MoveOutValue[];
+
+/**
+ * 初始位置对象类型
+ */
+export interface PositionObject {
+  top?: string | number;
+  left?: string | number;
+  bottom?: string | number;
+  right?: string | number;
+}
+
+/**
+ * 初始位置字符类型
+ */
+export type PositionValue =
+  | 'top'
+  | 'bottom'
+  | 'left'
+  | 'right'
+  | 'leftTop'
+  | 'leftBottom'
+  | 'rightTop'
+  | 'rightBottom'
+  | 'center';
+
+/**
+ * 初始位置类型
+ */
+export type Position = PositionValue | PositionObject;

package/lib/ele-dialog/util.d.ts

@@ -0,0 +1,52 @@
+import { Ref } from 'vue';
+import { ElDialogInstance } from '../ele-app/el';
+import { EleDialogProps } from './props';
+
+export declare const containerClass = "ele-dialog-container";
+export declare const wrapperClass = "ele-dialog";
+export declare const closedClass = "ele-dialog-closed";
+/**
+ * 获取弹窗容器
+ * @param inner 是否限制在主体内部
+ * @param multiple 是否支持同时打开多个
+ * @param appendTo 自定义插入的容器
+ * @param dialogsEl 限制在主体内部时的容器
+ */
+export declare function getDialogContainer(inner?: boolean, multiple?: boolean, appendTo?: string | HTMLElement, dialogsEl?: HTMLElement | null): HTMLElement | string;
+/**
+ * 弹窗支持移动
+ * @param dialogRef 弹窗实例
+ * @param props 属性
+ * @param isFullscreen 全屏状态
+ */
+export declare function useDialogMove(dialogRef: Ref<ElDialogInstance>, props: EleDialogProps, isFullscreen: Ref<boolean>): {
+    handleHeaderMousedown: (e: MouseEvent) => void;
+    handleHeaderTouchstart: (e: TouchEvent) => void;
+};
+/**
+ * 弹窗支持拉伸
+ * @param dialogRef 弹窗实例
+ * @param props 属性
+ * @param isFullscreen 全屏状态
+ */
+export declare function useDialogResize(dialogRef: Ref<ElDialogInstance>, props: EleDialogProps, isFullscreen: Ref<boolean>): {
+    handleResizeMousedown: (e: MouseEvent) => void;
+    handleResizeTouchstart: (e: TouchEvent) => void;
+};
+/**
+ * 弹窗事件处理
+ * @param dialogRef 弹窗实例
+ * @param props 属性
+ * @param isFullscreen 全屏状态
+ */
+export declare function useDialogEvent(dialogRef: Ref<ElDialogInstance>, props: EleDialogProps, isFullscreen: Ref<boolean>): {
+    handleHeaderMousedown: (e: MouseEvent) => void;
+    handleHeaderTouchstart: (e: TouchEvent) => void;
+    handleResizeMousedown: (e: MouseEvent) => void;
+    handleResizeTouchstart: (e: TouchEvent) => void;
+    bindAutoTopEvent: () => void;
+    unbindAutoTopEvent: () => void;
+    topDialog: (el?: HTMLElement) => void;
+    setInitPosition: () => void;
+    resetDialogStyle: () => void;
+};

package/lib/ele-dot/index.d.ts

@@ -0,0 +1,29 @@
+declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    type: import('vue').PropType<import('./types').DotType>;
+    color: StringConstructor;
+    ripple: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    text: StringConstructor;
+    size: {
+        type: StringConstructor;
+        default: string;
+    };
+}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    type: import('vue').PropType<import('./types').DotType>;
+    color: StringConstructor;
+    ripple: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    text: StringConstructor;
+    size: {
+        type: StringConstructor;
+        default: string;
+    };
+}>> & Readonly<{}>, {
+    ripple: boolean;
+    size: string;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default _default;

package/lib/ele-dot/props.d.ts

@@ -0,0 +1,25 @@
+import { PropType, ExtractPropTypes } from 'vue';
+import { DotType } from './types';
+
+/**
+ * 属性
+ */
+export declare const dotProps: {
+    /** 类型 */
+    type: PropType<DotType>;
+    /** 自定义颜色 */
+    color: StringConstructor;
+    /** 是否显示水波动画 */
+    ripple: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** 文本 */
+    text: StringConstructor;
+    /** 尺寸 */
+    size: {
+        type: StringConstructor;
+        default: string;
+    };
+};
+export type DotProps = ExtractPropTypes<typeof dotProps>;

package/lib/ele-dot/style/index.cjs

@@ -0,0 +1,2 @@
+"use strict";
+require("./index.scss");

package/lib/ele-dot/style/index.d.ts

@@ -0,0 +1 @@
+

package/lib/ele-dot/style/index.scss

@@ -0,0 +1,68 @@
+@use '../../style/themes/default.scss' as *;
+@use '../../style/util.scss' as *;
+
+.ele-dot {
+  display: inline-flex;
+  align-items: center;
+
+  .ele-dot-text {
+    flex-shrink: 0;
+    margin-left: 8px;
+  }
+
+  .ele-dot-status {
+    flex-shrink: 0;
+    background: elVar('color-primary');
+    border-radius: 50%;
+    position: relative;
+  }
+
+  .ele-dot-ripple {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: elVar('color-primary');
+    animation: eleAnimDot 1.2s ease-in-out infinite;
+    transform-origin: center;
+    border-radius: 50%;
+    display: none;
+  }
+
+  &.is-ripple .ele-dot-ripple {
+    display: block;
+  }
+
+  &.is-success .ele-dot-status,
+  &.is-success .ele-dot-ripple {
+    background: elVar('color-success');
+  }
+
+  &.is-warning .ele-dot-status,
+  &.is-warning .ele-dot-ripple {
+    background: elVar('color-warning');
+  }
+
+  &.is-danger .ele-dot-status,
+  &.is-danger .ele-dot-ripple {
+    background: elVar('color-danger');
+  }
+
+  &.is-info .ele-dot-status,
+  &.is-info .ele-dot-ripple {
+    background: elVar('color-info');
+  }
+}
+
+@keyframes eleAnimDot {
+  from {
+    transform: scale(0.8);
+    opacity: 0.6;
+  }
+
+  to {
+    transform: scale(2.4);
+    opacity: 0;
+  }
+}

package/lib/ele-dot/types.d.ts

@@ -0,0 +1,4 @@
+/**
+ * 类型
+ */
+export type DotType = 'primary' | 'success' | 'warning' | 'danger' | 'info';