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