yuang-framework-ui-pc 1.1.15 → 1.1.17

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (52) hide show
  1. package/es/core-components.js +3 -4
  2. package/es/ele-dialog/index.d.ts +2 -2
  3. package/es/ele-dialog/index.js +15 -15
  4. package/es/ele-dialog/props.d.ts +3 -3
  5. package/es/ele-dialog/props.js +4 -4
  6. package/es/ele-dialog/util.d.ts +8 -8
  7. package/es/ele-dialog/util.js +93 -101
  8. package/es/style/plus.scss +2 -0
  9. package/es/style/themes/default.scss +26 -0
  10. package/es/yu-slider-captcha-dialog/SliderCaptcha.d.ts +67 -0
  11. package/es/yu-slider-captcha-dialog/SliderCaptcha.js +528 -0
  12. package/es/yu-slider-captcha-dialog/index.d.ts +14 -0
  13. package/es/yu-slider-captcha-dialog/index.js +75 -0
  14. package/es/yu-slider-captcha-dialog/style.css +175 -0
  15. package/lib/core-components.cjs +53 -54
  16. package/lib/ele-dialog/index.cjs +13 -13
  17. package/lib/ele-dialog/index.d.ts +2 -2
  18. package/lib/ele-dialog/props.cjs +4 -4
  19. package/lib/ele-dialog/props.d.ts +3 -3
  20. package/lib/ele-dialog/util.cjs +93 -101
  21. package/lib/ele-dialog/util.d.ts +8 -8
  22. package/lib/style/plus.scss +2 -0
  23. package/lib/style/themes/default.scss +26 -0
  24. package/lib/yu-slider-captcha-dialog/SliderCaptcha.cjs +527 -0
  25. package/lib/yu-slider-captcha-dialog/SliderCaptcha.d.ts +67 -0
  26. package/lib/yu-slider-captcha-dialog/index.cjs +74 -0
  27. package/lib/yu-slider-captcha-dialog/index.d.ts +14 -0
  28. package/lib/yu-slider-captcha-dialog/style.css +175 -0
  29. package/package.json +2 -2
  30. package/typings/global.d.ts +0 -1
  31. package/es/ele-modal/index.d.ts +0 -245
  32. package/es/ele-modal/index.js +0 -342
  33. package/es/ele-modal/props.d.ts +0 -135
  34. package/es/ele-modal/props.js +0 -71
  35. package/es/ele-modal/style/css-var.scss +0 -8
  36. package/es/ele-modal/style/index.d.ts +0 -1
  37. package/es/ele-modal/style/index.js +0 -3
  38. package/es/ele-modal/style/index.scss +0 -259
  39. package/es/ele-modal/types.d.ts +0 -43
  40. package/es/ele-modal/util.d.ts +0 -52
  41. package/es/ele-modal/util.js +0 -301
  42. package/lib/ele-modal/index.cjs +0 -341
  43. package/lib/ele-modal/index.d.ts +0 -245
  44. package/lib/ele-modal/props.cjs +0 -71
  45. package/lib/ele-modal/props.d.ts +0 -135
  46. package/lib/ele-modal/style/css-var.scss +0 -8
  47. package/lib/ele-modal/style/index.cjs +0 -4
  48. package/lib/ele-modal/style/index.d.ts +0 -1
  49. package/lib/ele-modal/style/index.scss +0 -259
  50. package/lib/ele-modal/types.d.ts +0 -43
  51. package/lib/ele-modal/util.cjs +0 -301
  52. package/lib/ele-modal/util.d.ts +0 -52
@@ -23,8 +23,7 @@ import { default as default23 } from "./ele-icon-select/index";
23
23
  import { default as default24 } from "./ele-image-viewer/index";
24
24
  import { default as default25 } from "./ele-loading/index";
25
25
  import { default as default26 } from "./ele-menus/index";
26
- import { default as default27 } from "./ele-dialog/index";
27
- import { default as default28 } from "./ele-dialog/index";
26
+ import { default as default27, default as default28 } from "./ele-dialog/index";
28
27
  import { default as default29 } from "./ele-page/index";
29
28
  import { default as default30 } from "./ele-pagination/index";
30
29
  import { default as default31 } from "./ele-popconfirm/index";
@@ -66,7 +65,7 @@ export {
66
65
  default13 as EleCopyable,
67
66
  default14 as EleDashboard,
68
67
  default15 as EleDataTable,
69
- default28 as EleDialog,
68
+ default27 as EleDialog,
70
69
  default16 as EleDot,
71
70
  default17 as EleDrawer,
72
71
  default18 as EleDropdown,
@@ -78,7 +77,7 @@ export {
78
77
  default24 as EleImageViewer,
79
78
  default25 as EleLoading,
80
79
  default26 as EleMenus,
81
- default27 as EleModal,
80
+ default28 as EleModal,
82
81
  default29 as ElePage,
83
82
  default30 as ElePagination,
84
83
  default31 as ElePopconfirm,
@@ -91,7 +91,7 @@ declare const _default: import('vue').DefineComponent<{
91
91
  }, {
92
92
  dialogRef: import('vue').Ref<ElDialogInstance>;
93
93
  isFullscreen: import('vue').Ref<boolean>;
94
- dialogClass: import('vue').ComputedRef<string>;
94
+ modalClass: import('vue').ComputedRef<string>;
95
95
  teleportTo: import('vue').ComputedRef<string | Element>;
96
96
  teleportDisabled: import('vue').ComputedRef<boolean>;
97
97
  handleHeaderMousedown: (e: MouseEvent) => void;
@@ -238,8 +238,8 @@ declare const _default: import('vue').DefineComponent<{
238
238
  minHeight: number;
239
239
  multiple: boolean;
240
240
  responsive: boolean;
241
+ inner: boolean;
241
242
  resetOnClose: boolean;
242
243
  maxable: boolean;
243
- inner: boolean;
244
244
  }, {}>;
245
245
  export default _default;
@@ -3,8 +3,8 @@ import { ElDialog, ElIcon } from "element-plus";
3
3
  import { CloseOutlined, CompressOutlined, ExpandOutlined, ResizeOutlined } from "../icons";
4
4
  import ReceiverView from "../ele-config-provider/components/receiver-view";
5
5
  import { useLayoutState, useResponsive } from "../ele-pro-layout/util";
6
- import { getModalContainer, useModalEvent, wrapperClass, closedClass } from "./util";
7
- import { modalProps, modalEmits } from "./props";
6
+ import { getDialogContainer, useDialogEvent, wrapperClass, closedClass } from "./util";
7
+ import { eleDialogProps, eleDialogEmits } from "./props";
8
8
  const _sfc_main = defineComponent({
9
9
  name: "EleDialog",
10
10
  components: {
@@ -17,15 +17,15 @@ const _sfc_main = defineComponent({
17
17
  ReceiverView
18
18
  },
19
19
  inheritAttrs: false,
20
- props: modalProps,
21
- emits: modalEmits,
20
+ props: eleDialogProps,
21
+ emits: eleDialogEmits,
22
22
  setup(props, { emit }) {
23
23
  const layoutState = useLayoutState();
24
24
  const isResponsive = useResponsive(props);
25
25
  const dialogRef = ref(null);
26
26
  const isFullscreen = ref(props.fullscreen ?? false);
27
27
  const isActivated = ref(true);
28
- const dialogClass = computed(() => {
28
+ const modalClass = computed(() => {
29
29
  const classes = [wrapperClass];
30
30
  if (props.responsive ?? isResponsive.value ?? true) {
31
31
  classes.push("ele-dialog-responsive");
@@ -76,11 +76,11 @@ const _sfc_main = defineComponent({
76
76
  return classes.join(" ");
77
77
  });
78
78
  const teleportTo = computed(() => {
79
- return getModalContainer(
79
+ return getDialogContainer(
80
80
  props.inner,
81
81
  props.multiple,
82
82
  props.appendTo,
83
- layoutState.modalsEl
83
+ layoutState.dialogsEl
84
84
  );
85
85
  });
86
86
  const teleportDisabled = computed(() => {
@@ -95,17 +95,17 @@ const _sfc_main = defineComponent({
95
95
  handleResizeTouchstart,
96
96
  bindAutoTopEvent,
97
97
  unbindAutoTopEvent,
98
- topModal,
98
+ topDialog,
99
99
  setInitPosition,
100
- resetModalStyle
101
- } = useModalEvent(dialogRef, props, isFullscreen);
100
+ resetDialogStyle
101
+ } = useDialogEvent(dialogRef, props, isFullscreen);
102
102
  const updateModelValue = (modelValue) => {
103
103
  emit("update:modelValue", modelValue);
104
104
  };
105
105
  const toggleFullscreen = (fullscreen) => {
106
106
  isFullscreen.value = fullscreen ?? !isFullscreen.value;
107
107
  nextTick(() => {
108
- topModal();
108
+ topDialog();
109
109
  });
110
110
  emit("update:fullscreen", isFullscreen.value);
111
111
  };
@@ -115,11 +115,11 @@ const _sfc_main = defineComponent({
115
115
  }
116
116
  nextTick(() => {
117
117
  if (props.resetOnClose) {
118
- resetModalStyle();
118
+ resetDialogStyle();
119
119
  } else {
120
120
  setInitPosition();
121
121
  }
122
- topModal();
122
+ topDialog();
123
123
  });
124
124
  emit("open");
125
125
  };
@@ -160,7 +160,7 @@ const _sfc_main = defineComponent({
160
160
  return {
161
161
  dialogRef,
162
162
  isFullscreen,
163
- dialogClass,
163
+ modalClass,
164
164
  teleportTo,
165
165
  teleportDisabled,
166
166
  handleHeaderMousedown,
@@ -204,7 +204,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
204
204
  width: _ctx.width,
205
205
  fullscreen: false,
206
206
  modal: _ctx.multiple ? false : _ctx.modal,
207
- modalClass: _ctx.dialogClass,
207
+ modalClass: _ctx.modalClass,
208
208
  appendToBody: false,
209
209
  lockScroll: _ctx.inner || _ctx.multiple ? false : _ctx.lockScroll,
210
210
  openDelay: _ctx.openDelay,
@@ -6,7 +6,7 @@ import { Resizable, MoveOut, Position } from './types';
6
6
  /**
7
7
  * 属性
8
8
  */
9
- export declare const modalProps: {
9
+ export declare const eleDialogProps: {
10
10
  appendToBody: {
11
11
  type: BooleanConstructor;
12
12
  default: boolean;
@@ -113,11 +113,11 @@ export declare const modalProps: {
113
113
  title: import('element-plus/es/utils/index').EpPropFinalized<StringConstructor, unknown, unknown, "", boolean>;
114
114
  ariaLevel: import('element-plus/es/utils/index').EpPropFinalized<StringConstructor, unknown, unknown, "2", boolean>;
115
115
  };
116
- export type ModalProps = ExtractPropTypes<typeof modalProps>;
116
+ export type DialogProps = ExtractPropTypes<typeof dialogProps>;
117
117
  /**
118
118
  * 事件
119
119
  */
120
- export declare const modalEmits: {
120
+ export declare const eleDialogEmits: {
121
121
  /** 更新全屏状态 */
122
122
  'update:fullscreen': (_fullscreen: boolean) => boolean;
123
123
  open: () => boolean;
@@ -1,5 +1,5 @@
1
1
  import { dialogProps, dialogEmits } from "element-plus";
2
- const modalProps = {
2
+ const eleDialogProps = {
3
3
  ...dialogProps,
4
4
  appendToBody: {
5
5
  type: Boolean,
@@ -58,7 +58,7 @@ const modalProps = {
58
58
  /** 是否是表单弹窗 */
59
59
  form: Boolean
60
60
  };
61
- const modalEmits = {
61
+ const eleDialogEmits = {
62
62
  ...dialogEmits,
63
63
  /** 更新全屏状态 */
64
64
  "update:fullscreen": (_fullscreen) => true
@@ -66,6 +66,6 @@ const modalEmits = {
66
66
  const dialogPropKeys = Object.keys(dialogProps);
67
67
  export {
68
68
  dialogPropKeys,
69
- modalEmits,
70
- modalProps
69
+ eleDialogEmits,
70
+ eleDialogProps
71
71
  };
@@ -1,6 +1,6 @@
1
1
  import { Ref } from 'vue';
2
2
  import { ElDialogInstance } from '../ele-app/el';
3
- import { ModalProps } from './props';
3
+ import { DialogProps } from './props';
4
4
 
5
5
  export declare const containerClass = "ele-dialog-container";
6
6
  export declare const wrapperClass = "ele-dialog";
@@ -10,16 +10,16 @@ export declare const closedClass = "ele-dialog-closed";
10
10
  * @param inner 是否限制在主体内部
11
11
  * @param multiple 是否支持同时打开多个
12
12
  * @param appendTo 自定义插入的容器
13
- * @param modalsEl 限制在主体内部时的容器
13
+ * @param dialogsEl 限制在主体内部时的容器
14
14
  */
15
- export declare function getModalContainer(inner?: boolean, multiple?: boolean, appendTo?: string | HTMLElement, modalsEl?: HTMLElement | null): HTMLElement | string;
15
+ export declare function getDialogContainer(inner?: boolean, multiple?: boolean, appendTo?: string | HTMLElement, dialogsEl?: HTMLElement | null): HTMLElement | string;
16
16
  /**
17
17
  * 弹窗支持移动
18
18
  * @param dialogRef 弹窗实例
19
19
  * @param props 属性
20
20
  * @param isFullscreen 全屏状态
21
21
  */
22
- export declare function useModalMove(dialogRef: Ref<ElDialogInstance>, props: ModalProps, isFullscreen: Ref<boolean>): {
22
+ export declare function useDialogMove(dialogRef: Ref<ElDialogInstance>, props: DialogProps, isFullscreen: Ref<boolean>): {
23
23
  handleHeaderMousedown: (e: MouseEvent) => void;
24
24
  handleHeaderTouchstart: (e: TouchEvent) => void;
25
25
  };
@@ -29,7 +29,7 @@ export declare function useModalMove(dialogRef: Ref<ElDialogInstance>, props: Mo
29
29
  * @param props 属性
30
30
  * @param isFullscreen 全屏状态
31
31
  */
32
- export declare function useModalResize(dialogRef: Ref<ElDialogInstance>, props: ModalProps, isFullscreen: Ref<boolean>): {
32
+ export declare function useDialogResize(dialogRef: Ref<ElDialogInstance>, props: DialogProps, isFullscreen: Ref<boolean>): {
33
33
  handleResizeMousedown: (e: MouseEvent) => void;
34
34
  handleResizeTouchstart: (e: TouchEvent) => void;
35
35
  };
@@ -39,14 +39,14 @@ export declare function useModalResize(dialogRef: Ref<ElDialogInstance>, props:
39
39
  * @param props 属性
40
40
  * @param isFullscreen 全屏状态
41
41
  */
42
- export declare function useModalEvent(dialogRef: Ref<ElDialogInstance>, props: ModalProps, isFullscreen: Ref<boolean>): {
42
+ export declare function useDialogEvent(dialogRef: Ref<ElDialogInstance>, props: DialogProps, isFullscreen: Ref<boolean>): {
43
43
  handleHeaderMousedown: (e: MouseEvent) => void;
44
44
  handleHeaderTouchstart: (e: TouchEvent) => void;
45
45
  handleResizeMousedown: (e: MouseEvent) => void;
46
46
  handleResizeTouchstart: (e: TouchEvent) => void;
47
47
  bindAutoTopEvent: () => void;
48
48
  unbindAutoTopEvent: () => void;
49
- topModal: (el?: HTMLElement) => void;
49
+ topDialog: (el?: HTMLElement) => void;
50
50
  setInitPosition: () => void;
51
- resetModalStyle: () => void;
51
+ resetDialogStyle: () => void;
52
52
  };
@@ -6,18 +6,18 @@ const wrapperClass = "ele-dialog";
6
6
  const closedClass = "ele-dialog-closed";
7
7
  const fixTop = 0.65;
8
8
  const fixLeft = 0.65;
9
- function getModalEl(dialogRef) {
9
+ function getDialogEl(dialogRef) {
10
10
  var _a, _b;
11
11
  const el = (_b = unref((_a = unref(dialogRef)) == null ? void 0 : _a.dialogContentRef)) == null ? void 0 : _b.$el;
12
12
  return el;
13
13
  }
14
- function initModalStyle(modalEl) {
15
- modalEl.style.top = modalEl.offsetTop + "px";
16
- modalEl.style.left = modalEl.offsetLeft + "px";
17
- modalEl.style.right = "auto";
18
- modalEl.style.bottom = "auto";
19
- modalEl.style.position = "absolute";
20
- modalEl.style.margin = "0";
14
+ function initDialogStyle(dialogEl) {
15
+ dialogEl.style.top = dialogEl.offsetTop + "px";
16
+ dialogEl.style.left = dialogEl.offsetLeft + "px";
17
+ dialogEl.style.right = "auto";
18
+ dialogEl.style.bottom = "auto";
19
+ dialogEl.style.position = "absolute";
20
+ dialogEl.style.margin = "0";
21
21
  }
22
22
  function canMoveOut(moveOut, direction) {
23
23
  if (direction && moveOut != null && Array.isArray(moveOut)) {
@@ -25,9 +25,9 @@ function canMoveOut(moveOut, direction) {
25
25
  }
26
26
  return false;
27
27
  }
28
- function getModalContainer(inner, multiple, appendTo, modalsEl) {
28
+ function getDialogContainer(inner, multiple, appendTo, dialogsEl) {
29
29
  if (multiple) {
30
- const parent = (inner ? modalsEl : void 0) || document.body;
30
+ const parent = (inner ? dialogsEl : void 0) || document.body;
31
31
  const wrapper = queryChild(parent, containerClass);
32
32
  if (wrapper) {
33
33
  return wrapper;
@@ -37,37 +37,37 @@ function getModalContainer(inner, multiple, appendTo, modalsEl) {
37
37
  parent.appendChild(elem);
38
38
  return elem;
39
39
  }
40
- if (inner && modalsEl) {
41
- return modalsEl;
40
+ if (inner && dialogsEl) {
41
+ return dialogsEl;
42
42
  }
43
43
  return appendTo || "body";
44
44
  }
45
- function useModalMove(dialogRef, props, isFullscreen) {
46
- let modalEl = null;
45
+ function useDialogMove(dialogRef, props, isFullscreen) {
46
+ let dialogEl = null;
47
47
  let wrapEl = null;
48
48
  let downOL = null;
49
49
  let downOT = null;
50
50
  const { handleMousedown, handleTouchstart } = useMoveEvent({
51
51
  start: () => {
52
- modalEl = getModalEl(dialogRef);
53
- wrapEl = modalEl == null ? void 0 : modalEl.parentElement;
54
- if (!modalEl || !wrapEl || !props.draggable || isFullscreen.value) {
52
+ dialogEl = getDialogEl(dialogRef);
53
+ wrapEl = dialogEl == null ? void 0 : dialogEl.parentElement;
54
+ if (!dialogEl || !wrapEl || !props.draggable || isFullscreen.value) {
55
55
  return;
56
56
  }
57
- modalEl.style.userSelect = "none";
58
- initModalStyle(modalEl);
59
- downOL = modalEl.offsetLeft;
60
- downOT = modalEl.offsetTop;
57
+ dialogEl.style.userSelect = "none";
58
+ initDialogStyle(dialogEl);
59
+ downOL = dialogEl.offsetLeft;
60
+ downOT = dialogEl.offsetTop;
61
61
  },
62
62
  move: ({ distanceX, distanceY, e }) => {
63
- if (!modalEl || !wrapEl || downOL == null || downOT == null || distanceX == null || distanceY == null) {
63
+ if (!dialogEl || !wrapEl || downOL == null || downOT == null || distanceX == null || distanceY == null) {
64
64
  return;
65
65
  }
66
66
  e.preventDefault();
67
67
  let positionLeft = distanceX + downOL;
68
68
  let positionTop = distanceY + downOT;
69
- const limitL = wrapEl.clientWidth - modalEl.clientWidth - fixLeft;
70
- const limitT = wrapEl.clientHeight - modalEl.clientHeight - fixTop;
69
+ const limitL = wrapEl.clientWidth - dialogEl.clientWidth - fixLeft;
70
+ const limitT = wrapEl.clientHeight - dialogEl.clientHeight - fixTop;
71
71
  if (!props.moveOut) {
72
72
  if (positionLeft < 0) {
73
73
  positionLeft = 0;
@@ -102,16 +102,16 @@ function useModalMove(dialogRef, props, isFullscreen) {
102
102
  positionTop = minLimitT;
103
103
  }
104
104
  }
105
- modalEl.style.left = `${Math.floor(positionLeft)}px`;
106
- modalEl.style.top = `${Math.floor(positionTop)}px`;
105
+ dialogEl.style.left = `${Math.floor(positionLeft)}px`;
106
+ dialogEl.style.top = `${Math.floor(positionTop)}px`;
107
107
  },
108
108
  end: () => {
109
- if (modalEl) {
110
- modalEl.style.userSelect = "";
109
+ if (dialogEl) {
110
+ dialogEl.style.userSelect = "";
111
111
  }
112
112
  downOL = null;
113
113
  downOT = null;
114
- modalEl = null;
114
+ dialogEl = null;
115
115
  wrapEl = null;
116
116
  },
117
117
  touchmoveOptions: { passive: false }
@@ -121,52 +121,52 @@ function useModalMove(dialogRef, props, isFullscreen) {
121
121
  handleHeaderTouchstart: handleTouchstart
122
122
  };
123
123
  }
124
- function useModalResize(dialogRef, props, isFullscreen) {
125
- let modalEl = null;
124
+ function useDialogResize(dialogRef, props, isFullscreen) {
125
+ let dialogEl = null;
126
126
  let wrapEl = null;
127
127
  let downW = null;
128
128
  let downH = null;
129
129
  const { handleMousedown, handleTouchstart } = useMoveEvent({
130
130
  start: () => {
131
- modalEl = getModalEl(dialogRef);
132
- wrapEl = modalEl == null ? void 0 : modalEl.parentElement;
133
- if (!modalEl || !wrapEl || !props.resizable || isFullscreen.value) {
131
+ dialogEl = getDialogEl(dialogRef);
132
+ wrapEl = dialogEl == null ? void 0 : dialogEl.parentElement;
133
+ if (!dialogEl || !wrapEl || !props.resizable || isFullscreen.value) {
134
134
  return;
135
135
  }
136
- modalEl.style.userSelect = "none";
137
- initModalStyle(modalEl);
138
- downW = modalEl.clientWidth;
139
- downH = modalEl.clientHeight;
136
+ dialogEl.style.userSelect = "none";
137
+ initDialogStyle(dialogEl);
138
+ downW = dialogEl.clientWidth;
139
+ downH = dialogEl.clientHeight;
140
140
  },
141
141
  move: ({ distanceX, distanceY, e }) => {
142
- if (!modalEl || !wrapEl || downW == null || downH == null || distanceX == null || distanceY == null) {
142
+ if (!dialogEl || !wrapEl || downW == null || downH == null || distanceX == null || distanceY == null) {
143
143
  return;
144
144
  }
145
145
  e.preventDefault();
146
146
  if (props.resizable !== "vertical") {
147
147
  const w = distanceX + downW;
148
- const maxW = wrapEl.clientWidth - modalEl.offsetLeft - fixLeft;
148
+ const maxW = wrapEl.clientWidth - dialogEl.offsetLeft - fixLeft;
149
149
  const nw = (w < props.minWidth ? props.minWidth : !canMoveOut(props.moveOut, "right") && w > maxW ? maxW : w) + "px";
150
- modalEl.style.width = nw;
151
- modalEl.style.maxWidth = nw;
152
- modalEl.style.minWidth = nw;
150
+ dialogEl.style.width = nw;
151
+ dialogEl.style.maxWidth = nw;
152
+ dialogEl.style.minWidth = nw;
153
153
  }
154
154
  if (props.resizable !== "horizontal") {
155
155
  const h = distanceY + downH;
156
- const maxH = wrapEl.clientHeight - modalEl.offsetTop - fixTop;
156
+ const maxH = wrapEl.clientHeight - dialogEl.offsetTop - fixTop;
157
157
  const nh = (h < props.minHeight ? props.minHeight : !canMoveOut(props.moveOut, "bottom") && h > maxH ? maxH : h) + "px";
158
- modalEl.style.height = nh;
159
- modalEl.style.maxHeight = nh;
160
- modalEl.style.minHeight = nh;
158
+ dialogEl.style.height = nh;
159
+ dialogEl.style.maxHeight = nh;
160
+ dialogEl.style.minHeight = nh;
161
161
  }
162
162
  },
163
163
  end: () => {
164
- if (modalEl) {
165
- modalEl.style.userSelect = "";
164
+ if (dialogEl) {
165
+ dialogEl.style.userSelect = "";
166
166
  }
167
167
  downW = null;
168
168
  downH = null;
169
- modalEl = null;
169
+ dialogEl = null;
170
170
  wrapEl = null;
171
171
  },
172
172
  touchmoveOptions: { passive: false }
@@ -176,38 +176,30 @@ function useModalResize(dialogRef, props, isFullscreen) {
176
176
  handleResizeTouchstart: handleTouchstart
177
177
  };
178
178
  }
179
- function useModalEvent(dialogRef, props, isFullscreen) {
180
- const { handleHeaderMousedown, handleHeaderTouchstart } = useModalMove(
181
- dialogRef,
182
- props,
183
- isFullscreen
184
- );
185
- const { handleResizeMousedown, handleResizeTouchstart } = useModalResize(
186
- dialogRef,
187
- props,
188
- isFullscreen
189
- );
179
+ function useDialogEvent(dialogRef, props, isFullscreen) {
180
+ const { handleHeaderMousedown, handleHeaderTouchstart } = useDialogMove(dialogRef, props, isFullscreen);
181
+ const { handleResizeMousedown, handleResizeTouchstart } = useDialogResize(dialogRef, props, isFullscreen);
190
182
  let isInitPosition = true;
191
183
  const getZIndex = () => {
192
184
  return props.zIndex ?? 2e3;
193
185
  };
194
- const topModal = (el) => {
186
+ const topDialog = (el) => {
195
187
  var _a;
196
- const modalEl = el ?? getModalEl(dialogRef);
197
- const overlayEl = (_a = modalEl == null ? void 0 : modalEl.parentElement) == null ? void 0 : _a.parentElement;
188
+ const dialogEl = el ?? getDialogEl(dialogRef);
189
+ const overlayEl = (_a = dialogEl == null ? void 0 : dialogEl.parentElement) == null ? void 0 : _a.parentElement;
198
190
  if (!overlayEl) {
199
191
  return;
200
192
  }
201
193
  const currentIndex = getCurrentStyle(overlayEl).zIndex;
202
194
  const containerEl = overlayEl.parentElement;
203
195
  const cls = `.${wrapperClass}:not(.${closedClass})`;
204
- const modals = containerEl ? containerEl.querySelectorAll(cls) : void 0;
196
+ const dialogs = containerEl ? containerEl.querySelectorAll(cls) : void 0;
205
197
  let maxIndex = 0;
206
- (modals ? Array.from(modals) : []).forEach((modalEl2) => {
207
- const zIndex = getCurrentStyle(modalEl2).zIndex;
198
+ (dialogs ? Array.from(dialogs) : []).forEach((dialogEl2) => {
199
+ const zIndex = getCurrentStyle(dialogEl2).zIndex;
208
200
  if (zIndex != null) {
209
201
  const index = Number(zIndex);
210
- if (index >= maxIndex && (!overlayEl || modalEl2 !== overlayEl)) {
202
+ if (index >= maxIndex && (!overlayEl || dialogEl2 !== overlayEl)) {
211
203
  maxIndex = index + 1;
212
204
  }
213
205
  }
@@ -218,21 +210,21 @@ function useModalEvent(dialogRef, props, isFullscreen) {
218
210
  };
219
211
  const mousedownListener = (event) => {
220
212
  if (props.multiple) {
221
- topModal(event.currentTarget);
213
+ topDialog(event.currentTarget);
222
214
  }
223
215
  };
224
216
  const bindAutoTopEvent = () => {
225
- const modalEl = getModalEl(dialogRef);
226
- if (modalEl) {
227
- modalEl.addEventListener("mousedown", mousedownListener);
228
- modalEl.addEventListener("touchstart", mousedownListener);
217
+ const dialogEl = getDialogEl(dialogRef);
218
+ if (dialogEl) {
219
+ dialogEl.addEventListener("mousedown", mousedownListener);
220
+ dialogEl.addEventListener("touchstart", mousedownListener);
229
221
  }
230
222
  };
231
223
  const unbindAutoTopEvent = () => {
232
- const modalEl = getModalEl(dialogRef);
233
- if (modalEl) {
234
- modalEl.removeEventListener("mousedown", mousedownListener);
235
- modalEl.removeEventListener("touchstart", mousedownListener);
224
+ const dialogEl = getDialogEl(dialogRef);
225
+ if (dialogEl) {
226
+ dialogEl.removeEventListener("mousedown", mousedownListener);
227
+ dialogEl.removeEventListener("touchstart", mousedownListener);
236
228
  }
237
229
  };
238
230
  const getPositionMargin = (position) => {
@@ -253,29 +245,29 @@ function useModalEvent(dialogRef, props, isFullscreen) {
253
245
  const setInitPosition = () => {
254
246
  if (isInitPosition) {
255
247
  isInitPosition = false;
256
- const modalEl = getModalEl(dialogRef);
248
+ const dialogEl = getDialogEl(dialogRef);
257
249
  const margin = getPositionMargin(getPosition());
258
- if (modalEl && margin != null) {
259
- modalEl.style.margin = margin;
250
+ if (dialogEl && margin != null) {
251
+ dialogEl.style.margin = margin;
260
252
  }
261
253
  }
262
254
  };
263
- const resetModalStyle = () => {
264
- const modalEl = getModalEl(dialogRef);
265
- if (modalEl) {
255
+ const resetDialogStyle = () => {
256
+ const dialogEl = getDialogEl(dialogRef);
257
+ if (dialogEl) {
266
258
  const w = props.width;
267
- modalEl.style.margin = getPositionMargin(getPosition()) || "";
268
- modalEl.style.position = "";
269
- modalEl.style.top = "";
270
- modalEl.style.left = "";
271
- modalEl.style.right = "";
272
- modalEl.style.bottom = "";
273
- modalEl.style.height = "";
274
- modalEl.style.maxHeight = "";
275
- modalEl.style.minHeight = "";
276
- modalEl.style.width = typeof w === "number" ? `${w}px` : w ?? "";
277
- modalEl.style.maxWidth = "";
278
- modalEl.style.minWidth = "";
259
+ dialogEl.style.margin = getPositionMargin(getPosition()) || "";
260
+ dialogEl.style.position = "";
261
+ dialogEl.style.top = "";
262
+ dialogEl.style.left = "";
263
+ dialogEl.style.right = "";
264
+ dialogEl.style.bottom = "";
265
+ dialogEl.style.height = "";
266
+ dialogEl.style.maxHeight = "";
267
+ dialogEl.style.minHeight = "";
268
+ dialogEl.style.width = typeof w === "number" ? `${w}px` : w ?? "";
269
+ dialogEl.style.maxWidth = "";
270
+ dialogEl.style.minWidth = "";
279
271
  }
280
272
  };
281
273
  return {
@@ -285,17 +277,17 @@ function useModalEvent(dialogRef, props, isFullscreen) {
285
277
  handleResizeTouchstart,
286
278
  bindAutoTopEvent,
287
279
  unbindAutoTopEvent,
288
- topModal,
280
+ topDialog,
289
281
  setInitPosition,
290
- resetModalStyle
282
+ resetDialogStyle
291
283
  };
292
284
  }
293
285
  export {
294
286
  closedClass,
295
287
  containerClass,
296
- getModalContainer,
297
- useModalEvent,
298
- useModalMove,
299
- useModalResize,
288
+ getDialogContainer,
289
+ useDialogEvent,
290
+ useDialogMove,
291
+ useDialogResize,
300
292
  wrapperClass
301
293
  };
@@ -22,7 +22,9 @@
22
22
  @use '../ele-loading/style/index.scss' as loading;
23
23
  @use '../ele-map-picker/style/index.scss' as mapPicker;
24
24
  @use '../ele-menus/style/index.scss' as menus;
25
+ // temp
25
26
  @use '../ele-dialog/style/index.scss' as modal;
27
+ @use '../ele-dialog/style/index.scss' as dialog;
26
28
  @use '../ele-page/style/index.scss' as page;
27
29
  @use '../ele-pagination/style/index.scss' as pagination;
28
30
  @use '../ele-popconfirm/style/index.scss' as popconfirm;
@@ -460,6 +460,7 @@ $ele: map.deep-merge(
460
460
  'bg-7': #7dd733,
461
461
  'bg-8': #faad14
462
462
  ),
463
+ // temp
463
464
  'modal': (
464
465
  // 弹窗
465
466
  'bg': elVar('bg-color', 'overlay'),
@@ -484,6 +485,31 @@ $ele: map.deep-merge(
484
485
  'fullscreen-border': 1px solid elVar('border-color', 'light'),
485
486
  'mobile-space': 16px
486
487
  ),
488
+
489
+ 'dialog': (
490
+ // 弹窗
491
+ 'bg': elVar('bg-color', 'overlay'),
492
+ 'radius': elVar('border-radius', 'base'),
493
+ 'header-color': elVar('text-color', 'primary'),
494
+ 'header-font-size': elVar('font-size', 'medium'),
495
+ 'header-font-weight': normal,
496
+ 'header-line-height': 24px,
497
+ 'header-padding': 14px 20px,
498
+ 'header-border': 1px solid elVar('border-color', 'light'),
499
+ 'icon-size': 22px,
500
+ 'icon-font-size': 16px,
501
+ 'icon-color': elVar('text-color', 'secondary'),
502
+ 'icon-hover-color': elVar('text-color', 'primary'),
503
+ 'icon-hover-bg': transparent,
504
+ 'icon-radius': elVar('border-radius', 'small'),
505
+ 'icon-space': 8px,
506
+ 'body-padding': 24px 22px,
507
+ 'form-body-padding': 24px 22px 12px 20px,
508
+ 'footer-padding': 10px 20px,
509
+ 'footer-border': 1px solid elVar('border-color', 'light'),
510
+ 'fullscreen-border': 1px solid elVar('border-color', 'light'),
511
+ 'mobile-space': 16px
512
+ ),
487
513
  'page': (
488
514
  // 页面容器
489
515
  'padding': 16px,