@whitesev/pops 4.2.1 → 4.2.2

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.esm.js CHANGED
@@ -1,4 +1,4 @@
1
- const version = "4.2.1";
1
+ const version = "4.2.2";
2
2
 
3
3
  const GlobalConfig = {
4
4
  config: {},
@@ -242,6 +242,24 @@ const PopsIcon = {
242
242
  },
243
243
  };
244
244
 
245
+ /**
246
+ * 通用的CSS类名
247
+ */
248
+ const PopsCommonCSSClassName = {
249
+ flexCenter: "pops-flex-items-center",
250
+ flexYCenter: "pops-flex-y-center",
251
+ flexXCenter: "pops-flex-x-center",
252
+ hide: "pops-hide",
253
+ hideImportant: "pops-hide-important",
254
+ noBorder: "pops-no-border",
255
+ noBorderImportant: "pops-no-border-important",
256
+ userSelectNone: "pops-user-select-none",
257
+ lineHeightCenter: "pops-line-height-center",
258
+ widthFill: "pops-width-fill",
259
+ textIsDisabled: "pops-text-is-disabled",
260
+ textIsDisabledImportant: "pops-text-is-disabled-important",
261
+ };
262
+
245
263
  const OriginPrototype = {
246
264
  Object: {
247
265
  defineProperty: Object.defineProperty,
@@ -291,6 +309,30 @@ const PopsCore = {
291
309
  },
292
310
  };
293
311
 
312
+ const PopsSafeUtils = {
313
+ /**
314
+ * 获取安全的html
315
+ */
316
+ getSafeHTML(text) {
317
+ if (window.trustedTypes) {
318
+ const policy = window.trustedTypes.createPolicy("safe-innerHTML", {
319
+ createHTML: (html) => html,
320
+ });
321
+ return policy.createHTML(text);
322
+ }
323
+ else {
324
+ return text;
325
+ }
326
+ },
327
+ /**
328
+ * 设置安全的html
329
+ */
330
+ setSafeHTML($el, text) {
331
+ // 创建 TrustedHTML 策略(需 CSP 允许)
332
+ $el.innerHTML = this.getSafeHTML(text);
333
+ },
334
+ };
335
+
294
336
  const n$1="clientX",e$2="clientY",t$1=16,c$3="start",o$1="move",s$1="cancel",u$3="end",a$2="left",i$3="right",r$4="up",d$1="down",m$2={4:"start",5:"move",1:"end",3:"cancel"};function v$1(n){return m$2[n]}function b(n,e,t){const c={1:{0:{move:4},4:{move:5,end:1,cancel:3},5:{move:5,end:1,cancel:3}},0:{4:{move:2,end:1,cancel:3},5:{start:2,move:2,end:1,cancel:3}}}[Number(n)][e];return void 0!==c&&c[t]||0}function g$1(n){[1,3,2].includes(n.state)&&(n.state=0);}function h$3(n){return [5,1,3].includes(n)}function j(n){if(n.disabled)return n.state=0,true}function O(n,e){return Object.assign(Object.assign(Object.assign({},n),e),{state:0,disabled:false})}function p$3(n){return Math.round(100*n)/100}
295
337
 
296
338
  var x=r=>Math.sqrt(r.x*r.x+r.y*r.y),y=(r,a)=>r.x*a.x+r.y*a.y,e$1=(r,a)=>{var t=x(r)*x(a);if(0===t)return 0;var h=y(r,a)/t;return h>1&&(h=1),Math.acos(h)},n=(r,a)=>r.x*a.y-a.x*r.y,o=r=>r/Math.PI*180,s=(r,a)=>{var t=e$1(r,a);return n(r,a)>0&&(t*=-1),o(t)},u$2=(x,y)=>{if(0!==x||0!==y)return Math.abs(x)>=Math.abs(y)?0<x?i$3:a$2:0<y?d$1:r$4};
@@ -760,48 +802,6 @@ class PopsUtils {
760
802
  }
761
803
  const popsUtils = new PopsUtils();
762
804
 
763
- const PopsSafeUtils = {
764
- /**
765
- * 获取安全的html
766
- */
767
- getSafeHTML(text) {
768
- if (window.trustedTypes) {
769
- const policy = window.trustedTypes.createPolicy("safe-innerHTML", {
770
- createHTML: (html) => html,
771
- });
772
- return policy.createHTML(text);
773
- }
774
- else {
775
- return text;
776
- }
777
- },
778
- /**
779
- * 设置安全的html
780
- */
781
- setSafeHTML($el, text) {
782
- // 创建 TrustedHTML 策略(需 CSP 允许)
783
- $el.innerHTML = this.getSafeHTML(text);
784
- },
785
- };
786
-
787
- /**
788
- * 通用的CSS类名
789
- */
790
- const PopsCommonCSSClassName = {
791
- flexCenter: "pops-flex-items-center",
792
- flexYCenter: "pops-flex-y-center",
793
- flexXCenter: "pops-flex-x-center",
794
- hide: "pops-hide",
795
- hideImportant: "pops-hide-important",
796
- noBorder: "pops-no-border",
797
- noBorderImportant: "pops-no-border-important",
798
- userSelectNone: "pops-user-select-none",
799
- lineHeightCenter: "pops-line-height-center",
800
- widthFill: "pops-width-fill",
801
- textIsDisabled: "pops-text-is-disabled",
802
- textIsDisabledImportant: "pops-text-is-disabled-important",
803
- };
804
-
805
805
  /**
806
806
  * 存储在元素属性上的事件名
807
807
  */
@@ -891,91 +891,91 @@ class PopsDOMUtilsEvent {
891
891
  // 这是存在selector的情况
892
892
  listenerOption = getOption(args, 4, listenerOption);
893
893
  }
894
- /**
895
- * 如果是once,那么删除该监听和元素上的事件和监听
896
- */
897
- const checkOptionOnceToRemoveEventListener = ($el) => {
898
- if (listenerOption.once) {
899
- this.off($el, eventTypeList, selector, callback, option);
900
- }
901
- };
902
894
  $elList.forEach(($elItem) => {
903
- /**
904
- * 事件回调
905
- * @param event
906
- */
907
- const handlerCallBack = function (event) {
908
- let call_this = void 0;
909
- let call_event = void 0;
910
- let call_$selector = void 0;
911
- let execCallback = false;
912
- if (selectorList.length) {
913
- // 存在子元素选择器
914
- // 这时候的this和target都是子元素选择器的元素
915
- let $target;
916
- if (listenerOption.isComposedPath) {
917
- // 可能为空
918
- const composedPath = event.composedPath();
919
- if (!composedPath.length && event.target) {
920
- composedPath.push(event.target);
921
- }
922
- $target = composedPath[0];
895
+ // 遍历事件名设置元素事件
896
+ eventTypeList.forEach((eventName) => {
897
+ /**
898
+ * 如果是option.once,那么删除该监听和元素上的事件和监听
899
+ */
900
+ const checkOptionOnceToRemoveEventListener = () => {
901
+ if (listenerOption.once) {
902
+ this.off($elItem, eventName, selector, callback, option);
923
903
  }
924
- else {
925
- $target = event.target;
926
- }
927
- let $parent = $elItem;
928
- if (popsUtils.isWin($parent)) {
929
- // window和document共用一个对象
930
- // 这样就能处理子元素选择器无法匹配的问题
931
- $parent = PopsCore.document.documentElement;
932
- }
933
- const findValue = selectorList.find((selectors) => {
934
- // 判断目标元素是否匹配选择器
935
- if (that.matches($target, selectors)) {
936
- // 当前目标可以被selector所匹配到
937
- return true;
904
+ };
905
+ /**
906
+ * 事件回调
907
+ * @param event
908
+ */
909
+ const handlerCallBack = function (event) {
910
+ let call_this = void 0;
911
+ let call_event = void 0;
912
+ let call_$selector = void 0;
913
+ let execCallback = false;
914
+ if (selectorList.length) {
915
+ // 存在子元素选择器
916
+ // 这时候的this和target都是子元素选择器的元素
917
+ let $target;
918
+ if (listenerOption.isComposedPath) {
919
+ // 可能为空
920
+ const composedPath = event.composedPath();
921
+ if (!composedPath.length && event.target) {
922
+ composedPath.push(event.target);
923
+ }
924
+ $target = composedPath[0];
938
925
  }
939
- // 在上层与主元素之间寻找可以被selector所匹配到的
940
- const $closestMatches = that.closest($target, selectors);
941
- if ($closestMatches && $parent?.contains?.($closestMatches)) {
942
- $target = $closestMatches;
943
- return true;
926
+ else {
927
+ $target = event.target;
944
928
  }
945
- return false;
946
- });
947
- if (findValue) {
948
- // 这里尝试使用defineProperty修改event的target值
949
- try {
950
- OriginPrototype.Object.defineProperty(event, "target", {
951
- get() {
952
- return $target;
953
- },
954
- });
955
- // oxlint-disable-next-line no-empty
929
+ let $parent = $elItem;
930
+ if (popsUtils.isWin($parent)) {
931
+ // window和document共用一个对象
932
+ // 这样就能处理子元素选择器无法匹配的问题
933
+ $parent = PopsCore.document.documentElement;
956
934
  }
957
- catch { }
935
+ const findValue = selectorList.find((selectors) => {
936
+ // 判断目标元素是否匹配选择器
937
+ if (that.matches($target, selectors)) {
938
+ // 当前目标可以被selector所匹配到
939
+ return true;
940
+ }
941
+ // 在上层与主元素之间寻找可以被selector所匹配到的
942
+ const $closestMatches = that.closest($target, selectors);
943
+ if ($closestMatches && $parent?.contains?.($closestMatches)) {
944
+ $target = $closestMatches;
945
+ return true;
946
+ }
947
+ return false;
948
+ });
949
+ if (findValue) {
950
+ // 这里尝试使用defineProperty修改event的target值
951
+ try {
952
+ OriginPrototype.Object.defineProperty(event, "target", {
953
+ get() {
954
+ return $target;
955
+ },
956
+ });
957
+ // oxlint-disable-next-line no-empty
958
+ }
959
+ catch { }
960
+ execCallback = true;
961
+ call_this = $target;
962
+ call_event = event;
963
+ call_$selector = $target;
964
+ }
965
+ }
966
+ else {
958
967
  execCallback = true;
959
- call_this = $target;
968
+ call_this = $elItem;
960
969
  call_event = event;
961
- call_$selector = $target;
962
970
  }
963
- }
964
- else {
965
- execCallback = true;
966
- call_this = $elItem;
967
- call_event = event;
968
- }
969
- if (execCallback) {
970
- const result = listenerCallBack.call(call_this, call_event, call_$selector);
971
- checkOptionOnceToRemoveEventListener($elItem);
972
- if (typeof result === "boolean" && !result) {
973
- return false;
971
+ if (execCallback) {
972
+ const result = listenerCallBack.call(call_this, call_event, call_$selector);
973
+ checkOptionOnceToRemoveEventListener();
974
+ if (typeof result === "boolean" && !result) {
975
+ return false;
976
+ }
974
977
  }
975
- }
976
- };
977
- // 遍历事件名设置元素事件
978
- eventTypeList.forEach((eventName) => {
978
+ };
979
979
  // add listener
980
980
  $elItem.addEventListener(eventName, handlerCallBack, listenerOption);
981
981
  // 获取对象上的事件
@@ -1088,31 +1088,34 @@ class PopsDOMUtilsEvent {
1088
1088
  const elementEvents = Reflect.get($elItem, SymbolEvents) || {};
1089
1089
  eventTypeList.forEach((eventName) => {
1090
1090
  const handlers = elementEvents[eventName] || [];
1091
- const filterHandler = typeof filter === "function" ? handlers.filter(filter) : handlers;
1092
- for (let index = 0; index < filterHandler.length; index++) {
1093
- const handler = filterHandler[index];
1091
+ // 过滤出需要删除的事件
1092
+ const handlersFiltered = typeof filter === "function" ? handlers.filter(filter) : handlers;
1093
+ for (let index = 0; index < handlersFiltered.length; index++) {
1094
+ const handler = handlersFiltered[index];
1095
+ // 过滤出的事件再根据下面的条件进行判断处理移除
1096
+ // 1. callback内存地址必须相同
1097
+ // 2. selector必须相同
1098
+ // 3. option.capture必须相同
1094
1099
  let flag = true;
1095
1100
  if (flag && listenerCallBack && handler.callback !== listenerCallBack) {
1096
- // callback不同
1097
1101
  flag = false;
1098
1102
  }
1099
1103
  if (flag && selectorList.length && Array.isArray(handler.selector)) {
1100
1104
  if (JSON.stringify(handler.selector) !== JSON.stringify(selectorList)) {
1101
- // 子元素选择器不同
1102
1105
  flag = false;
1103
1106
  }
1104
1107
  }
1105
1108
  if (flag &&
1106
1109
  typeof handler.option.capture === "boolean" &&
1107
1110
  listenerOption.capture !== handler.option.capture) {
1108
- // 事件的配置项不同
1109
1111
  flag = false;
1110
1112
  }
1111
1113
  if (flag) {
1112
1114
  $elItem.removeEventListener(eventName, handler.handlerCallBack, handler.option);
1113
- const findIndex = handlers.findIndex((item) => item === handler);
1114
- if (findIndex !== -1) {
1115
- handlers.splice(findIndex, 1);
1115
+ for (let i = handlers.length - 1; i >= 0; i--) {
1116
+ if (handlers[i] === handler) {
1117
+ handlers.splice(i, 1);
1118
+ }
1116
1119
  }
1117
1120
  }
1118
1121
  }