@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.
- package/dist/index.amd.js +337 -250
- package/dist/index.amd.js.map +1 -1
- package/dist/index.amd.min.js +1 -1
- package/dist/index.amd.min.js.map +1 -1
- package/dist/index.cjs.js +337 -250
- package/dist/index.cjs.js.map +1 -1
- package/dist/index.cjs.min.js +1 -1
- package/dist/index.cjs.min.js.map +1 -1
- package/dist/index.esm.js +337 -250
- package/dist/index.esm.js.map +1 -1
- package/dist/index.esm.min.js +1 -1
- package/dist/index.esm.min.js.map +1 -1
- package/dist/index.iife.js +337 -250
- package/dist/index.iife.js.map +1 -1
- package/dist/index.iife.min.js +1 -1
- package/dist/index.iife.min.js.map +1 -1
- package/dist/index.system.js +337 -250
- package/dist/index.system.js.map +1 -1
- package/dist/index.system.min.js +1 -1
- package/dist/index.system.min.js.map +1 -1
- package/dist/index.umd.js +337 -250
- package/dist/index.umd.js.map +1 -1
- package/dist/index.umd.min.js +1 -1
- package/dist/index.umd.min.js.map +1 -1
- package/dist/types/src/Pops.d.ts +10 -10
- package/dist/types/src/components/panel/index.d.ts +2 -2
- package/dist/types/src/components/rightClickMenu/index.d.ts +1 -1
- package/dist/types/src/components/rightClickMenu/types/index.d.ts +8 -1
- package/dist/types/src/components/tooltip/index.d.ts +5 -5
- package/dist/types/src/components/tooltip/types/index.d.ts +15 -14
- package/dist/types/src/handler/PopsHandler.d.ts +4 -4
- package/dist/types/src/types/PopsDOMUtilsEventType.d.ts +39 -0
- package/dist/types/src/types/components.d.ts +2 -1
- package/dist/types/src/types/event.d.ts +13 -3
- package/dist/types/src/types/inst.d.ts +4 -0
- package/dist/types/src/utils/PopsDOMUtils.d.ts +10 -12
- package/dist/types/src/utils/PopsInstanceUtils.d.ts +2 -2
- package/package.json +9 -9
- package/src/components/alert/index.ts +3 -1
- package/src/components/confirm/index.ts +3 -1
- package/src/components/drawer/index.ts +3 -1
- package/src/components/folder/index.ts +3 -1
- package/src/components/iframe/index.ts +6 -4
- package/src/components/panel/handlerComponents.ts +26 -26
- package/src/components/panel/index.ts +3 -1
- package/src/components/prompt/index.ts +3 -1
- package/src/components/rightClickMenu/defaultConfig.ts +1 -0
- package/src/components/rightClickMenu/index.ts +18 -7
- package/src/components/rightClickMenu/types/index.ts +8 -1
- package/src/components/searchSuggestion/index.ts +7 -19
- package/src/components/tooltip/defaultConfig.ts +1 -1
- package/src/components/tooltip/index.ts +38 -23
- package/src/components/tooltip/types/index.ts +15 -14
- package/src/handler/PopsHandler.ts +22 -19
- package/src/types/PopsDOMUtilsEventType.d.ts +39 -0
- package/src/types/components.d.ts +2 -1
- package/src/types/event.d.ts +13 -3
- package/src/types/inst.d.ts +4 -0
- package/src/utils/PopsDOMUtils.ts +71 -40
- package/src/utils/PopsInstanceUtils.ts +62 -30
- 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"],
|
|
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",
|
|
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",
|
|
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
|
|
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
|
-
|
|
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:
|
|
377
|
+
mode: type,
|
|
378
378
|
guid: guid,
|
|
379
379
|
close() {
|
|
380
|
-
return PopsInstanceUtils.close(config,
|
|
380
|
+
return PopsInstanceUtils.close(config, type, PopsInstData[type], guid, $anim);
|
|
381
381
|
},
|
|
382
382
|
hide() {
|
|
383
|
-
return PopsInstanceUtils.hide(config,
|
|
383
|
+
return PopsInstanceUtils.hide(config, type, PopsInstData[type], guid, $anim, $mask);
|
|
384
384
|
},
|
|
385
|
-
show() {
|
|
386
|
-
|
|
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
|
|
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
|
-
|
|
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:
|
|
423
|
+
mode: type,
|
|
421
424
|
guid: guid,
|
|
422
425
|
close() {
|
|
423
|
-
return PopsInstanceUtils.close(config,
|
|
426
|
+
return PopsInstanceUtils.close(config, type, PopsInstData[type], guid, $anim);
|
|
424
427
|
},
|
|
425
428
|
hide() {
|
|
426
|
-
return PopsInstanceUtils.hide(config,
|
|
429
|
+
return PopsInstanceUtils.hide(config, type, PopsInstData[type], guid, $anim, $mask);
|
|
427
430
|
},
|
|
428
431
|
show() {
|
|
429
|
-
return PopsInstanceUtils.show(config,
|
|
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
|
|
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
|
/**
|
package/src/types/event.d.ts
CHANGED
|
@@ -18,10 +18,20 @@ export interface PopsEventConfig {
|
|
|
18
18
|
$mask?: HTMLDivElement;
|
|
19
19
|
/** 当前弹窗类型 */
|
|
20
20
|
mode: PopsType;
|
|
21
|
+
/** 唯一id */
|
|
21
22
|
guid: string;
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
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
|
/**
|
package/src/types/inst.d.ts
CHANGED
|
@@ -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
|
|
485
|
+
let $elList: HTMLElement[] = [];
|
|
483
486
|
if (element instanceof NodeList || Array.isArray(element)) {
|
|
484
487
|
element = element as HTMLElement[];
|
|
485
|
-
|
|
488
|
+
$elList = $elList.concat(element);
|
|
486
489
|
} else {
|
|
487
|
-
|
|
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
|
-
|
|
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 =
|
|
614
|
+
element = that.selectorAll(element);
|
|
611
615
|
}
|
|
612
616
|
if (element == null) {
|
|
613
617
|
return;
|
|
614
618
|
}
|
|
615
|
-
let
|
|
619
|
+
let $elList: (Element | Document | Window | typeof globalThis | Node | ChildNode | EventTarget)[] = [];
|
|
616
620
|
if (element instanceof NodeList || Array.isArray(element)) {
|
|
617
|
-
|
|
621
|
+
$elList = $elList.concat(Array.from(element as HTMLElement[]));
|
|
618
622
|
} else {
|
|
619
|
-
|
|
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
|
-
|
|
629
|
-
Object.getOwnPropertySymbols(
|
|
630
|
-
|
|
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
|
|
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
|
-
|
|
648
|
+
$elItem.removeEventListener(eventName, handler.callback, {
|
|
642
649
|
capture: handler["option"]["capture"],
|
|
643
650
|
});
|
|
644
651
|
}
|
|
645
|
-
|
|
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
|
|
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(
|
|
1685
|
+
css($el: PopsDOMUtilsTargetElementType, property: PopsDOMUtilsCSSPropertyType): string;
|
|
1678
1686
|
/**
|
|
1679
1687
|
* 获取元素的样式属性值
|
|
1680
|
-
* @param
|
|
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(
|
|
1696
|
+
css($el: PopsDOMUtilsTargetElementType, property: string): string;
|
|
1689
1697
|
/**
|
|
1690
1698
|
* 设置元素的样式属性
|
|
1691
|
-
* @param
|
|
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(
|
|
1713
|
+
css(
|
|
1714
|
+
$el: PopsDOMUtilsTargetElementType,
|
|
1715
|
+
property: PopsDOMUtilsCSSPropertyType & string,
|
|
1716
|
+
value: string | number
|
|
1717
|
+
): string;
|
|
1706
1718
|
/**
|
|
1707
1719
|
* 设置元素的样式属性
|
|
1708
|
-
* @param
|
|
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
|
-
|
|
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
|
-
|
|
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
|
|
1754
|
-
|
|
1760
|
+
if (typeof $el === "string") {
|
|
1761
|
+
$el = that.selectorAll($el);
|
|
1755
1762
|
}
|
|
1756
|
-
if (
|
|
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
|
-
|
|
1793
|
+
$el.style.setProperty(propertyName, propertyValue, "important");
|
|
1766
1794
|
} else {
|
|
1767
1795
|
propertyValue = handlePixe(propertyName, propertyValue);
|
|
1768
|
-
|
|
1796
|
+
$el.style.setProperty(propertyName, propertyValue);
|
|
1769
1797
|
}
|
|
1770
1798
|
};
|
|
1771
1799
|
if (typeof property === "string") {
|
|
1772
1800
|
if (value == null) {
|
|
1773
|
-
return getComputedStyle(
|
|
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
|
|
160
|
+
* @param totalInstConfigList 配置实例列表
|
|
159
161
|
* @param guid 唯一标识
|
|
160
162
|
* @param isAll 是否全部删除
|
|
161
163
|
*/
|
|
162
|
-
removeInstance(
|
|
164
|
+
async removeInstance(totalInstConfigList: PopsInstGeneralConfig[][], guid?: string, isAll = false) {
|
|
163
165
|
/**
|
|
164
166
|
* 移除元素实例
|
|
165
167
|
* @param instCommonConfig
|
|
166
168
|
*/
|
|
167
|
-
function
|
|
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
|
-
|
|
181
|
+
totalInstConfigList.forEach((instConfigList) => {
|
|
179
182
|
// inst[]
|
|
180
|
-
instConfigList.forEach((instConfigItem, index) => {
|
|
183
|
+
instConfigList.forEach(async (instConfigItem, index) => {
|
|
181
184
|
// 移除全部或者guid相同
|
|
182
|
-
if (isAll ||
|
|
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
|
|
188
|
-
instConfigItem.$anim
|
|
189
|
-
(instConfigItem.$anim
|
|
190
|
-
if (PopsAnimation.hasAnim((instConfigItem.$anim
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
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
|
-
|
|
210
|
+
removeInst(instConfigItem);
|
|
203
211
|
}
|
|
204
212
|
} else {
|
|
205
|
-
|
|
213
|
+
removeInst(instConfigItem);
|
|
206
214
|
}
|
|
207
215
|
instConfigList.splice(index, 1);
|
|
208
216
|
}
|
|
209
217
|
});
|
|
210
218
|
});
|
|
211
|
-
|
|
212
|
-
return
|
|
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
|
-
|
|
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(),
|
|
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
|
* 拖拽元素
|
package/src/utils/PopsUtils.ts
CHANGED
|
@@ -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];
|