@whitesev/pops 3.1.2 → 3.2.0

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 (61) hide show
  1. package/dist/index.amd.js +337 -250
  2. package/dist/index.amd.js.map +1 -1
  3. package/dist/index.amd.min.js +1 -1
  4. package/dist/index.amd.min.js.map +1 -1
  5. package/dist/index.cjs.js +337 -250
  6. package/dist/index.cjs.js.map +1 -1
  7. package/dist/index.cjs.min.js +1 -1
  8. package/dist/index.cjs.min.js.map +1 -1
  9. package/dist/index.esm.js +337 -250
  10. package/dist/index.esm.js.map +1 -1
  11. package/dist/index.esm.min.js +1 -1
  12. package/dist/index.esm.min.js.map +1 -1
  13. package/dist/index.iife.js +337 -250
  14. package/dist/index.iife.js.map +1 -1
  15. package/dist/index.iife.min.js +1 -1
  16. package/dist/index.iife.min.js.map +1 -1
  17. package/dist/index.system.js +337 -250
  18. package/dist/index.system.js.map +1 -1
  19. package/dist/index.system.min.js +1 -1
  20. package/dist/index.system.min.js.map +1 -1
  21. package/dist/index.umd.js +337 -250
  22. package/dist/index.umd.js.map +1 -1
  23. package/dist/index.umd.min.js +1 -1
  24. package/dist/index.umd.min.js.map +1 -1
  25. package/dist/types/src/Pops.d.ts +10 -10
  26. package/dist/types/src/components/panel/index.d.ts +2 -2
  27. package/dist/types/src/components/rightClickMenu/index.d.ts +1 -1
  28. package/dist/types/src/components/rightClickMenu/types/index.d.ts +8 -1
  29. package/dist/types/src/components/tooltip/index.d.ts +5 -5
  30. package/dist/types/src/components/tooltip/types/index.d.ts +15 -14
  31. package/dist/types/src/handler/PopsHandler.d.ts +4 -4
  32. package/dist/types/src/types/PopsDOMUtilsEventType.d.ts +39 -0
  33. package/dist/types/src/types/components.d.ts +2 -1
  34. package/dist/types/src/types/event.d.ts +13 -3
  35. package/dist/types/src/types/inst.d.ts +4 -0
  36. package/dist/types/src/utils/PopsDOMUtils.d.ts +10 -12
  37. package/dist/types/src/utils/PopsInstanceUtils.d.ts +2 -2
  38. package/package.json +9 -9
  39. package/src/components/alert/index.ts +3 -1
  40. package/src/components/confirm/index.ts +3 -1
  41. package/src/components/drawer/index.ts +3 -1
  42. package/src/components/folder/index.ts +3 -1
  43. package/src/components/iframe/index.ts +6 -4
  44. package/src/components/panel/handlerComponents.ts +26 -26
  45. package/src/components/panel/index.ts +3 -1
  46. package/src/components/prompt/index.ts +3 -1
  47. package/src/components/rightClickMenu/defaultConfig.ts +1 -0
  48. package/src/components/rightClickMenu/index.ts +18 -7
  49. package/src/components/rightClickMenu/types/index.ts +8 -1
  50. package/src/components/searchSuggestion/index.ts +7 -19
  51. package/src/components/tooltip/defaultConfig.ts +1 -1
  52. package/src/components/tooltip/index.ts +38 -23
  53. package/src/components/tooltip/types/index.ts +15 -14
  54. package/src/handler/PopsHandler.ts +22 -19
  55. package/src/types/PopsDOMUtilsEventType.d.ts +39 -0
  56. package/src/types/components.d.ts +2 -1
  57. package/src/types/event.d.ts +13 -3
  58. package/src/types/inst.d.ts +4 -0
  59. package/src/utils/PopsDOMUtils.ts +71 -40
  60. package/src/utils/PopsInstanceUtils.ts +62 -30
  61. package/src/utils/PopsUtils.ts +1 -1
@@ -171,12 +171,12 @@ export const PopsHandler = {
171
171
  );
172
172
  }
173
173
  // 判断按下的元素是否是pops-anim
174
- popsDOMUtils.on(config.animElement, ["touchstart", "mousedown"], void 0, (event) => {
174
+ popsDOMUtils.on(config.animElement, ["touchstart", "mousedown"], (event) => {
175
175
  const $click = event.composedPath()[0] as HTMLElement;
176
176
  isMaskClick = isAnimElement($click);
177
177
  });
178
178
  // 如果有动画层,在动画层上监听点击事件
179
- popsDOMUtils.on<MouseEvent | PointerEvent>(config.animElement, "click", void 0, (event) => {
179
+ popsDOMUtils.on<MouseEvent | PointerEvent>(config.animElement, "click", (event) => {
180
180
  const $click = event.composedPath()[0] as HTMLElement;
181
181
  if (isAnimElement($click) && isMaskClick) {
182
182
  return clickEvent(event);
@@ -184,7 +184,7 @@ export const PopsHandler = {
184
184
  });
185
185
  // 在遮罩层监听点击事件
186
186
  // 如果有动画层,那么该点击事件触发不了
187
- popsDOMUtils.on<MouseEvent | PointerEvent>(result.maskElement, "click", void 0, (event) => {
187
+ popsDOMUtils.on<MouseEvent | PointerEvent>(result.maskElement, "click", (event) => {
188
188
  isMaskClick = true;
189
189
  clickEvent(event);
190
190
  });
@@ -343,7 +343,7 @@ export const PopsHandler = {
343
343
  * @param guid
344
344
  * @param $shadowContainer
345
345
  * @param $shadowRoot
346
- * @param mode 当前弹窗类型
346
+ * @param type 当前弹窗类型
347
347
  * @param $anim 动画层
348
348
  * @param $pops 主元素
349
349
  * @param $mask 遮罩层
@@ -362,7 +362,7 @@ export const PopsHandler = {
362
362
  guid: string,
363
363
  $shadowContainer: HTMLDivElement,
364
364
  $shadowRoot: ShadowRoot | HTMLElement,
365
- mode: PopsInstStoreType,
365
+ type: PopsInstStoreType,
366
366
  $anim: HTMLDivElement,
367
367
  $pops: HTMLDivElement,
368
368
  $mask?: HTMLDivElement
@@ -374,23 +374,26 @@ export const PopsHandler = {
374
374
  $anim: $anim,
375
375
  $pops: $pops,
376
376
  $mask: $mask,
377
- mode: mode,
377
+ mode: type,
378
378
  guid: guid,
379
379
  close() {
380
- return PopsInstanceUtils.close(config, mode, PopsInstData[mode], guid, $anim);
380
+ return PopsInstanceUtils.close(config, type, PopsInstData[type], guid, $anim);
381
381
  },
382
382
  hide() {
383
- return PopsInstanceUtils.hide(config, mode, PopsInstData[mode], guid, $anim, $mask);
383
+ return PopsInstanceUtils.hide(config, type, PopsInstData[type], guid, $anim, $mask);
384
384
  },
385
- show() {
386
- return PopsInstanceUtils.show(config, mode, PopsInstData[mode], guid, $anim, $mask);
385
+ show($parent?: HTMLElement | Document | ShadowRoot) {
386
+ if ($parent) {
387
+ $parent.appendChild(PopsInstData[type][0].$shadowRoot);
388
+ }
389
+ return PopsInstanceUtils.show(config, type, PopsInstData[type], guid, $anim, $mask);
387
390
  },
388
391
  };
389
392
  },
390
393
  /**
391
394
  * 获取loading的事件配置
392
395
  * @param guid
393
- * @param mode 当前弹窗类型
396
+ * @param type 当前弹窗类型
394
397
  * @param $anim 动画层
395
398
  * @param $pops 主元素
396
399
  * @param $mask 遮罩层
@@ -407,7 +410,7 @@ export const PopsHandler = {
407
410
  | PopsPanelConfig
408
411
  | PopsFolderConfig,
409
412
  guid: string,
410
- mode: "loading",
413
+ type: "loading",
411
414
  $anim: HTMLDivElement,
412
415
  $pops: HTMLDivElement,
413
416
  $mask?: HTMLDivElement
@@ -417,16 +420,16 @@ export const PopsHandler = {
417
420
  $anim: $anim,
418
421
  $pops: $pops,
419
422
  $mask: $mask,
420
- mode: mode,
423
+ mode: type,
421
424
  guid: guid,
422
425
  close() {
423
- return PopsInstanceUtils.close(config, mode, PopsInstData[mode], guid, $anim);
426
+ return PopsInstanceUtils.close(config, type, PopsInstData[type], guid, $anim);
424
427
  },
425
428
  hide() {
426
- return PopsInstanceUtils.hide(config, mode, PopsInstData[mode], guid, $anim, $mask);
429
+ return PopsInstanceUtils.hide(config, type, PopsInstData[type], guid, $anim, $mask);
427
430
  },
428
431
  show() {
429
- return PopsInstanceUtils.show(config, mode, PopsInstData[mode], guid, $anim, $mask);
432
+ return PopsInstanceUtils.show(config, type, PopsInstData[type], guid, $anim, $mask);
430
433
  },
431
434
  };
432
435
  },
@@ -563,8 +566,8 @@ export const PopsHandler = {
563
566
  handleOnly<T extends Required<PopsSupportOnlyConfig[keyof PopsSupportOnlyConfig]>>(type: PopsType, config: T): T {
564
567
  if (config.only) {
565
568
  // .loading
566
- // .tooltip
567
569
  // .rightClickMenu
570
+ // .tooltip
568
571
  // 单独处理
569
572
  if (type === "loading" || type === "tooltip" || type === "rightClickMenu") {
570
573
  const inst = PopsInstData[type as keyof typeof PopsInstData];
@@ -576,11 +579,11 @@ export const PopsHandler = {
576
579
  [
577
580
  PopsInstData.alert,
578
581
  PopsInstData.confirm,
579
- PopsInstData.prompt,
580
- PopsInstData.iframe,
581
582
  PopsInstData.drawer,
582
583
  PopsInstData.folder,
584
+ PopsInstData.iframe,
583
585
  PopsInstData.panel,
586
+ PopsInstData.prompt,
584
587
  ],
585
588
  "",
586
589
  true
@@ -272,3 +272,42 @@ export declare type PopsDOMUtilsEventListenerOption = AddEventListenerOptions &
272
272
  */
273
273
  isComposedPath?: boolean;
274
274
  };
275
+
276
+ export type PopsDOMUtilsTargetElementType = HTMLElement | string | NodeList | HTMLElement[];
277
+
278
+ /**
279
+ * 属性转驼峰
280
+ */
281
+ export type PopsDOMUtilsCamelToKebabCSSProperty<S extends string> = S extends `webkit${infer U}`
282
+ ? `-${Lowercase<"webkit">}${U extends `${infer First}${infer Rest}`
283
+ ? First extends Uppercase<First>
284
+ ? `-${Uncapitalize<First>}${PopsDOMUtilsCamelToKebabCSSProperty<Rest>}`
285
+ : `${First}${PopsDOMUtilsCamelToKebabCSSProperty<Rest>}`
286
+ : U}`
287
+ : S extends `${infer T}${infer U}`
288
+ ? U extends Uncapitalize<U>
289
+ ? `${Uncapitalize<T>}${PopsDOMUtilsCamelToKebabCSSProperty<U>}`
290
+ : `${Uncapitalize<T>}-${PopsDOMUtilsCamelToKebabCSSProperty<U>}`
291
+ : S;
292
+
293
+ export type PopsDOMUtilsCSSPropertyType = PopsDOMUtilsCamelToKebabCSSProperty<
294
+ Extract<
295
+ keyof Omit<
296
+ CSSStyleDeclaration,
297
+ | "cssFloat"
298
+ | "cssText"
299
+ | "length"
300
+ | "parentRule"
301
+ | "getPropertyPriority"
302
+ | "getPropertyValue"
303
+ | "item"
304
+ | "removeProperty"
305
+ | "setProperty"
306
+ >,
307
+ string
308
+ >
309
+ >;
310
+
311
+ export type PopsDOMUtilsCSSProperty = {
312
+ [P in PopsDOMUtilsCSSPropertyType]: string | number;
313
+ };
@@ -184,7 +184,7 @@ export interface PopsGeneralConfig {
184
184
  *
185
185
  * @default 10000
186
186
  */
187
- zIndex?: number | (() => number);
187
+ zIndex?: IFunction<number>;
188
188
  /**
189
189
  * 遮罩层
190
190
  */
@@ -199,6 +199,7 @@ export interface PopsGeneralConfig {
199
199
  forbiddenScroll?: boolean;
200
200
  /**
201
201
  * (可选)自定义style
202
+ * @default ""
202
203
  */
203
204
  style?: string | null;
204
205
  /**
@@ -18,10 +18,20 @@ export interface PopsEventConfig {
18
18
  $mask?: HTMLDivElement;
19
19
  /** 当前弹窗类型 */
20
20
  mode: PopsType;
21
+ /** 唯一id */
21
22
  guid: string;
22
- close: () => Promise<void>;
23
- hide: () => Promise<void>;
24
- show: () => Promise<void>;
23
+ /**
24
+ * 关闭弹窗
25
+ */
26
+ close(): Promise<void>;
27
+ /**
28
+ * 隐藏弹窗
29
+ */
30
+ hide(): Promise<void>;
31
+ /**
32
+ * 显示弹出
33
+ */
34
+ show($parent?: HTMLElement | Document | ShadowRoot): Promise<void>;
25
35
  }
26
36
 
27
37
  /**
@@ -21,4 +21,8 @@ export interface PopsInstGeneralConfig extends PopsInstConfig {
21
21
  $shadowRoot: ShadowRoot | HTMLElement;
22
22
  /** 移除实例前的回调函数 */
23
23
  beforeRemoveCallBack?: (instCommonConfig: PopsInstGeneralConfig) => void;
24
+ /** 配置 */
25
+ config: any;
26
+ /** 销毁元素 */
27
+ destory(): void | Promise<void>;
24
28
  }
@@ -7,6 +7,9 @@ import type {
7
7
  PopsDOMUtils_Event,
8
8
  PopsDOMUtilsElementEventType,
9
9
  PopsDOMUtilsAddEventListenerResult,
10
+ PopsDOMUtilsCSSProperty,
11
+ PopsDOMUtilsCSSPropertyType,
12
+ PopsDOMUtilsTargetElementType,
10
13
  } from "../types/PopsDOMUtilsEventType";
11
14
  import { SymbolEvents } from "./PopsDOMUtilsEventsConfig";
12
15
  import { OriginPrototype, PopsCore } from "../PopsCore";
@@ -479,12 +482,12 @@ class PopsDOMUtilsEvent {
479
482
  if (element == null) {
480
483
  return;
481
484
  }
482
- let elementList: HTMLElement[] = [];
485
+ let $elList: HTMLElement[] = [];
483
486
  if (element instanceof NodeList || Array.isArray(element)) {
484
487
  element = element as HTMLElement[];
485
- elementList = [...element];
488
+ $elList = $elList.concat(element);
486
489
  } else {
487
- elementList.push(element as HTMLElement);
490
+ $elList.push(element as HTMLElement);
488
491
  }
489
492
  let eventTypeList: string[] = [];
490
493
  if (Array.isArray(eventType)) {
@@ -540,7 +543,7 @@ class PopsDOMUtilsEvent {
540
543
  array: PopsDOMUtilsEventListenerOptionsAttribute[]
541
544
  ) => boolean;
542
545
  }
543
- elementList.forEach((elementItem) => {
546
+ $elList.forEach((elementItem) => {
544
547
  // 获取对象上的事件
545
548
  const elementEvents: {
546
549
  [key: string]: PopsDOMUtilsEventListenerOptionsAttribute[];
@@ -606,17 +609,18 @@ class PopsDOMUtilsEvent {
606
609
  element: PopsDOMUtilsElementEventType,
607
610
  eventType?: PopsDOMUtils_EventType | PopsDOMUtils_EventType[] | string
608
611
  ) {
612
+ const that = this;
609
613
  if (typeof element === "string") {
610
- element = PopsCore.document.querySelectorAll(element);
614
+ element = that.selectorAll(element);
611
615
  }
612
616
  if (element == null) {
613
617
  return;
614
618
  }
615
- let elementList: HTMLElement[] = [];
619
+ let $elList: (Element | Document | Window | typeof globalThis | Node | ChildNode | EventTarget)[] = [];
616
620
  if (element instanceof NodeList || Array.isArray(element)) {
617
- elementList = [...(element as HTMLElement[])];
621
+ $elList = $elList.concat(Array.from(element as HTMLElement[]));
618
622
  } else {
619
- elementList.push(element as HTMLElement);
623
+ $elList.push(element);
620
624
  }
621
625
 
622
626
  let eventTypeList: string[] = [];
@@ -625,24 +629,28 @@ class PopsDOMUtilsEvent {
625
629
  } else if (typeof eventType === "string") {
626
630
  eventTypeList = eventTypeList.concat(eventType.split(" "));
627
631
  }
628
- elementList.forEach((elementItem) => {
629
- Object.getOwnPropertySymbols(elementItem).forEach((__symbolEvents) => {
630
- if (!__symbolEvents.toString().startsWith("Symbol(events_")) {
632
+ $elList.forEach(($elItem) => {
633
+ const symbolList = [...new Set([...Object.getOwnPropertySymbols($elItem), SymbolEvents])];
634
+ symbolList.forEach((symbolItem) => {
635
+ if (!symbolItem.toString().startsWith("Symbol(events_")) {
631
636
  return;
632
637
  }
633
- const elementEvents = (elementItem as any)[__symbolEvents] || {};
638
+ const elementEvents: {
639
+ [key: string]: PopsDOMUtilsEventListenerOptionsAttribute[];
640
+ } = Reflect.get($elItem, symbolItem) || {};
634
641
  const iterEventNameList = eventTypeList.length ? eventTypeList : Object.keys(elementEvents);
635
642
  iterEventNameList.forEach((eventName) => {
636
- const handlers = elementEvents[eventName];
643
+ const handlers: PopsDOMUtilsEventListenerOptionsAttribute[] = elementEvents[eventName];
637
644
  if (!handlers) {
638
645
  return;
639
646
  }
640
647
  for (const handler of handlers) {
641
- elementItem.removeEventListener(eventName, handler.callback, {
648
+ $elItem.removeEventListener(eventName, handler.callback, {
642
649
  capture: handler["option"]["capture"],
643
650
  });
644
651
  }
645
- popsUtils.delete((elementItem as any)[__symbolEvents], eventName);
652
+ const events = Reflect.get($elItem, symbolItem);
653
+ popsUtils.delete(events, eventName);
646
654
  });
647
655
  });
648
656
  });
@@ -1666,7 +1674,7 @@ class PopsDOMUtils extends PopsDOMUtilsEvent {
1666
1674
  }
1667
1675
  /**
1668
1676
  * 获取元素的样式属性值
1669
- * @param element 目标元素
1677
+ * @param $el 目标元素
1670
1678
  * @param property 样式属性名或包含多个属性名和属性值的对象
1671
1679
  * @example
1672
1680
  * // 获取元素a.xx的CSS属性display
@@ -1674,10 +1682,10 @@ class PopsDOMUtils extends PopsDOMUtilsEvent {
1674
1682
  * DOMUtils.css("a.xx","display");
1675
1683
  * > "none"
1676
1684
  * */
1677
- css(element: HTMLElement | string, property: keyof CSSStyleDeclaration): string;
1685
+ css($el: PopsDOMUtilsTargetElementType, property: PopsDOMUtilsCSSPropertyType): string;
1678
1686
  /**
1679
1687
  * 获取元素的样式属性值
1680
- * @param element 目标元素
1688
+ * @param $el 目标元素
1681
1689
  * @param property 样式属性名或包含多个属性名和属性值的对象
1682
1690
  * @example
1683
1691
  * // 获取元素a.xx的CSS属性display
@@ -1685,10 +1693,10 @@ class PopsDOMUtils extends PopsDOMUtilsEvent {
1685
1693
  * DOMUtils.css("a.xx","display");
1686
1694
  * > "none"
1687
1695
  * */
1688
- css(element: HTMLElement | string, property: string): string;
1696
+ css($el: PopsDOMUtilsTargetElementType, property: string): string;
1689
1697
  /**
1690
1698
  * 设置元素的样式属性
1691
- * @param element 目标元素
1699
+ * @param $el 目标元素
1692
1700
  * @param property 样式属性名或包含多个属性名和属性值的对象
1693
1701
  * @param value 样式属性值
1694
1702
  * @example
@@ -1702,10 +1710,14 @@ class PopsDOMUtils extends PopsDOMUtilsEvent {
1702
1710
  * DOMUtils.css(document.querySelector("a.xx"),"top","10px");
1703
1711
  * DOMUtils.css(document.querySelector("a.xx"),"top",10);
1704
1712
  * */
1705
- css(element: HTMLElement | string, property: keyof CSSStyleDeclaration & string, value: string | number): string;
1713
+ css(
1714
+ $el: PopsDOMUtilsTargetElementType,
1715
+ property: PopsDOMUtilsCSSPropertyType & string,
1716
+ value: string | number
1717
+ ): string;
1706
1718
  /**
1707
1719
  * 设置元素的样式属性
1708
- * @param element 目标元素
1720
+ * @param $el 目标元素
1709
1721
  * @param property 样式属性名或包含多个属性名和属性值的对象
1710
1722
  * @param value 样式属性值
1711
1723
  * @example
@@ -1718,25 +1730,20 @@ class PopsDOMUtils extends PopsDOMUtilsEvent {
1718
1730
  * DOMUtils.css(document.querySelector("a.xx"),{ top: 10 });
1719
1731
  * */
1720
1732
  css(
1721
- element: HTMLElement | string,
1733
+ $el: PopsDOMUtilsTargetElementType,
1722
1734
  property:
1723
- | {
1724
- [P in keyof CSSStyleDeclaration]?: CSSStyleDeclaration[P];
1725
- }
1735
+ | PopsDOMUtilsCSSProperty
1726
1736
  | {
1727
1737
  [key: string]: string | number;
1728
1738
  }
1739
+ | string
1729
1740
  ): string;
1730
1741
  css(
1731
- element: HTMLElement | string,
1732
- property:
1733
- | keyof CSSStyleDeclaration
1734
- | string
1735
- | {
1736
- [P in keyof CSSStyleDeclaration]?: string | number | CSSStyleDeclaration[P];
1737
- },
1742
+ $el: PopsDOMUtilsTargetElementType,
1743
+ property: PopsDOMUtilsCSSPropertyType | string | PopsDOMUtilsCSSProperty,
1738
1744
  value?: string | number
1739
1745
  ) {
1746
+ const that = this;
1740
1747
  /**
1741
1748
  * 把纯数字没有px的加上
1742
1749
  */
@@ -1750,10 +1757,31 @@ class PopsDOMUtils extends PopsDOMUtilsEvent {
1750
1757
  }
1751
1758
  return propertyValue;
1752
1759
  }
1753
- if (typeof element === "string") {
1754
- element = PopsCore.document.querySelector(element) as HTMLElement;
1760
+ if (typeof $el === "string") {
1761
+ $el = that.selectorAll($el);
1755
1762
  }
1756
- if (element == null) {
1763
+ if ($el == null) {
1764
+ return;
1765
+ }
1766
+ if (Array.isArray($el) || $el instanceof NodeList) {
1767
+ if (typeof property === "string") {
1768
+ if (value == null) {
1769
+ // 获取属性
1770
+ return that.css($el[0] as HTMLElement, property);
1771
+ } else {
1772
+ // 设置属性
1773
+ $el.forEach(($elItem) => {
1774
+ that.css($elItem as HTMLElement, property);
1775
+ });
1776
+ return;
1777
+ }
1778
+ } else if (typeof property === "object") {
1779
+ // 设置属性
1780
+ $el.forEach(($elItem) => {
1781
+ that.css($elItem as HTMLElement, property as PopsDOMUtilsCSSProperty);
1782
+ });
1783
+ return;
1784
+ }
1757
1785
  return;
1758
1786
  }
1759
1787
  const setStyleProperty = (propertyName: string, propertyValue: string | number) => {
@@ -1762,23 +1790,26 @@ class PopsDOMUtils extends PopsDOMUtilsEvent {
1762
1790
  .trim()
1763
1791
  .replace(/!important$/gi, "")
1764
1792
  .trim();
1765
- element.style.setProperty(propertyName, propertyValue, "important");
1793
+ $el.style.setProperty(propertyName, propertyValue, "important");
1766
1794
  } else {
1767
1795
  propertyValue = handlePixe(propertyName, propertyValue);
1768
- element.style.setProperty(propertyName, propertyValue);
1796
+ $el.style.setProperty(propertyName, propertyValue);
1769
1797
  }
1770
1798
  };
1771
1799
  if (typeof property === "string") {
1772
1800
  if (value == null) {
1773
- return getComputedStyle(element).getPropertyValue(property);
1801
+ return PopsCore.globalThis.getComputedStyle($el).getPropertyValue(property);
1774
1802
  } else {
1775
1803
  setStyleProperty(property, value);
1776
1804
  }
1777
1805
  } else if (typeof property === "object") {
1778
1806
  for (const prop in property) {
1779
- const value = property[prop];
1807
+ const value = property[prop as keyof typeof property];
1780
1808
  setStyleProperty(prop, value!);
1781
1809
  }
1810
+ } else {
1811
+ // 其他情况
1812
+ throw new TypeError("property must be string or object");
1782
1813
  }
1783
1814
  }
1784
1815
  /**
@@ -13,6 +13,8 @@ import { popsUtils } from "./PopsUtils";
13
13
  import { PopsCore } from "../PopsCore";
14
14
  import { PopsInstData } from "../PopsInst";
15
15
  import { PopsAnimation } from "../PopsAnimation";
16
+ import type { PopsRightClickMenuConfig } from "../components/rightClickMenu/types";
17
+ import type { PopsToolTipConfig } from "../components/tooltip/types";
16
18
 
17
19
  export const PopsInstanceUtils = {
18
20
  /**
@@ -155,16 +157,16 @@ export const PopsInstanceUtils = {
155
157
  },
156
158
  /**
157
159
  * 删除配置中对应的对象
158
- * @param instConfigList 配置实例列表
160
+ * @param totalInstConfigList 配置实例列表
159
161
  * @param guid 唯一标识
160
162
  * @param isAll 是否全部删除
161
163
  */
162
- removeInstance(instConfigList: PopsInstGeneralConfig[][], guid: string, isAll = false) {
164
+ async removeInstance(totalInstConfigList: PopsInstGeneralConfig[][], guid?: string, isAll = false) {
163
165
  /**
164
166
  * 移除元素实例
165
167
  * @param instCommonConfig
166
168
  */
167
- function removeItem(instCommonConfig: PopsInstGeneralConfig) {
169
+ const removeInst = function (instCommonConfig: PopsInstGeneralConfig) {
168
170
  if (typeof instCommonConfig.beforeRemoveCallBack === "function") {
169
171
  // 调用移除签的回调
170
172
  instCommonConfig.beforeRemoveCallBack(instCommonConfig);
@@ -173,43 +175,49 @@ export const PopsInstanceUtils = {
173
175
  instCommonConfig?.$pops?.remove();
174
176
  instCommonConfig?.$mask?.remove();
175
177
  instCommonConfig?.$shadowContainer?.remove();
176
- }
178
+ };
179
+ const asyncInstTask: Promise<void>[] = [];
177
180
  // [ inst[], inst[],...]
178
- instConfigList.forEach((instConfigList) => {
181
+ totalInstConfigList.forEach((instConfigList) => {
179
182
  // inst[]
180
- instConfigList.forEach((instConfigItem, index) => {
183
+ instConfigList.forEach(async (instConfigItem, index) => {
181
184
  // 移除全部或者guid相同
182
- if (isAll || instConfigItem["guid"] === guid) {
185
+ if (isAll || (typeof guid === "string" && instConfigItem.guid === guid)) {
183
186
  // 判断是否有动画
184
187
  const animName = instConfigItem.$anim.getAttribute("anim")!;
185
188
  if (PopsAnimation.hasAnim(animName)) {
186
189
  const reverseAnimName = animName + "-reverse";
187
- instConfigItem.$anim.style.width = "100%";
188
- instConfigItem.$anim.style.height = "100%";
189
- (instConfigItem.$anim.style as any)["animation-name"] = reverseAnimName;
190
- if (PopsAnimation.hasAnim((instConfigItem.$anim.style as any)["animation-name"])) {
191
- popsDOMUtils.on(
192
- instConfigItem.$anim,
193
- popsDOMUtils.getAnimationEndNameList(),
194
- function () {
195
- removeItem(instConfigItem);
196
- },
197
- {
198
- capture: true,
199
- }
190
+ popsDOMUtils.css(instConfigItem.$anim, "width", "100%");
191
+ popsDOMUtils.css(instConfigItem.$anim, "height", "100%");
192
+ popsDOMUtils.css(instConfigItem.$anim, "animation-name", reverseAnimName);
193
+ if (PopsAnimation.hasAnim(popsDOMUtils.css(instConfigItem.$anim, "animation-name"))) {
194
+ asyncInstTask.push(
195
+ new Promise<void>((resolve) => {
196
+ popsDOMUtils.on(
197
+ instConfigItem.$anim,
198
+ popsDOMUtils.getAnimationEndNameList(),
199
+ function () {
200
+ removeInst(instConfigItem);
201
+ resolve();
202
+ },
203
+ {
204
+ capture: true,
205
+ }
206
+ );
207
+ })
200
208
  );
201
209
  } else {
202
- removeItem(instConfigItem);
210
+ removeInst(instConfigItem);
203
211
  }
204
212
  } else {
205
- removeItem(instConfigItem);
213
+ removeInst(instConfigItem);
206
214
  }
207
215
  instConfigList.splice(index, 1);
208
216
  }
209
217
  });
210
218
  });
211
-
212
- return instConfigList;
219
+ await Promise.all(asyncInstTask);
220
+ return totalInstConfigList;
213
221
  },
214
222
  /**
215
223
  * 隐藏
@@ -385,7 +393,7 @@ export const PopsInstanceUtils = {
385
393
  * @param config
386
394
  * @param $anim
387
395
  */
388
- close(
396
+ async close(
389
397
  config:
390
398
  | PopsAlertConfig
391
399
  | PopsDrawerConfig
@@ -400,7 +408,8 @@ export const PopsInstanceUtils = {
400
408
  guid: string,
401
409
  $anim: HTMLElement
402
410
  ) {
403
- return new Promise<void>((resolve) => {
411
+ // eslint-disable-next-line no-async-promise-executor
412
+ await new Promise<void>(async (resolve) => {
404
413
  const $pops = $anim.querySelector<HTMLDivElement>(".pops[type-value]")!;
405
414
  const drawerConfig = config as Required<PopsDrawerConfig>;
406
415
  /**
@@ -410,12 +419,12 @@ export const PopsInstanceUtils = {
410
419
  /**
411
420
  * 弹窗已关闭的回调
412
421
  */
413
- function closeCallBack(event: Event) {
422
+ async function closeCallBack(event: Event) {
414
423
  if ((event as TransitionEvent).propertyName !== "transform") {
415
424
  return;
416
425
  }
417
- popsDOMUtils.off($pops, popsDOMUtils.getTransitionEndNameList(), void 0, closeCallBack);
418
- PopsInstanceUtils.removeInstance([instConfigList], guid);
426
+ popsDOMUtils.off($pops, popsDOMUtils.getTransitionEndNameList(), closeCallBack);
427
+ await PopsInstanceUtils.removeInstance([instConfigList], guid);
419
428
  resolve();
420
429
  }
421
430
  // 监听过渡结束
@@ -443,10 +452,33 @@ export const PopsInstanceUtils = {
443
452
  transitionendEvent();
444
453
  }, drawerConfig.closeDelay);
445
454
  } else {
446
- PopsInstanceUtils.removeInstance([instConfigList], guid);
455
+ await PopsInstanceUtils.removeInstance([instConfigList], guid);
447
456
  resolve();
448
457
  }
449
458
  });
459
+
460
+ // 判断组件内是否有rightClickMenu、tooltip、searchSuggestion组件
461
+ // 有的话也需要关闭
462
+ PopsInstData.rightClickMenu.forEach((itemConfig) => {
463
+ const config = itemConfig.config as PopsRightClickMenuConfig;
464
+ if (config.$target instanceof HTMLElement) {
465
+ const $root = config.$target.getRootNode();
466
+ if ($root instanceof HTMLElement && $root.parentElement == null) {
467
+ // 触发销毁元素
468
+ itemConfig.destory();
469
+ }
470
+ }
471
+ });
472
+ PopsInstData.tooltip.forEach((itemConfig) => {
473
+ const config = itemConfig.config as PopsToolTipConfig;
474
+ if (config.$target instanceof HTMLElement) {
475
+ const $root = config.$target.getRootNode();
476
+ if ($root instanceof HTMLElement && $root.parentElement == null) {
477
+ // 触发销毁元素
478
+ itemConfig.destory();
479
+ }
480
+ }
481
+ });
450
482
  },
451
483
  /**
452
484
  * 拖拽元素
@@ -66,7 +66,7 @@ class PopsUtils {
66
66
  * @param propName
67
67
  */
68
68
  delete(target: any, propName: any) {
69
- if (typeof Reflect === "object" && Reflect.deleteProperty) {
69
+ if (typeof Reflect === "object" && typeof Reflect.deleteProperty === "function") {
70
70
  Reflect.deleteProperty(target, propName);
71
71
  } else {
72
72
  delete target[propName];