@v-c/image 1.0.4 → 1.0.5-beta.1

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 (7) hide show
  1. package/dist/hooks/useMouseEvent.js +11 -11
  2. package/dist/hooks/useTouchEvent.js +1 -1
  3. package/dist/portal/dist/useDom.js +6 -1
  4. package/dist/portal/dist/useEscKeyDown.js +6 -4
  5. package/dist/util/dist/getScrollBarSize.js +44 -42
  6. package/dist/util.js +5 -1
  7. package/package.json +3 -3
package/dist/hooks/useMouseEvent.js CHANGED
@@ -1,5 +1,6 @@
1
1
  import { warning_default } from "../util/dist/warning.js";
2
2
  import "../util/dist/index.js";
3
+ import { canUseDom } from "../util/dist/Dom/canUseDom.js";
3
4
  import getFixScaleEleTransPosition from "../getFixScaleEleTransPosition.js";
4
5
  import { BASE_SCALE_RATIO, WHEEL_MAX_SCALE_RATIO } from "../previewConfig.js";
5
6
  import { shallowRef, watch } from "vue";
@@ -58,18 +59,17 @@ function useMouseEvent(imgRef, movable, open, scaleStep, transform, updateTransf
58
59
  transform,
59
60
  movable
60
61
  ], (_n, _o, onCleanup) => {
61
- if (movable.value) {
62
- window.addEventListener("mouseup", onMouseUp, false);
63
- window.addEventListener("mousemove", onMouseMove, false);
64
- try {
65
- /* istanbul ignore next */
66
- if (window.top !== window.self) {
67
- window?.top?.addEventListener("mouseup", onMouseUp, false);
68
- window?.top?.addEventListener("mousemove", onMouseMove, false);
69
- }
70
- } catch (e) {
71
- warning_default(false, `[vc-image] ${e}`);
62
+ if (!canUseDom() || !movable.value) return;
63
+ window.addEventListener("mouseup", onMouseUp, false);
64
+ window.addEventListener("mousemove", onMouseMove, false);
65
+ try {
66
+ /* istanbul ignore next */
67
+ if (window.top !== window.self) {
68
+ window?.top?.addEventListener("mouseup", onMouseUp, false);
69
+ window?.top?.addEventListener("mousemove", onMouseMove, false);
72
70
  }
71
+ } catch (e) {
72
+ warning_default(false, `[vc-image] ${e}`);
73
73
  }
74
74
  onCleanup(() => {
75
75
  window.removeEventListener("mouseup", onMouseUp);
package/dist/hooks/useTouchEvent.js CHANGED
@@ -102,12 +102,12 @@ function useTouchEvent(imgRef, movable, open, minScale, transform, updateTransfo
102
102
  if (fixState) updateTransform({ ...fixState }, "dragRebound");
103
103
  };
104
104
  watchEffect((onCleanup) => {
105
+ if (!canUseDom()) return;
105
106
  const preventDefault = (e) => {
106
107
  e.preventDefault();
107
108
  };
108
109
  if (open.value && movable.value) window.addEventListener("touchmove", preventDefault, { passive: false });
109
110
  onCleanup(() => {
110
- if (!canUseDom()) return;
111
111
  window.removeEventListener("touchmove", preventDefault);
112
112
  });
113
113
  });
package/dist/portal/dist/useDom.js CHANGED
@@ -17,12 +17,17 @@ function useDom(render, debug) {
17
17
  queue.value = [appendFn, ...queue.value];
18
18
  }));
19
19
  function append() {
20
+ if (!ele || !canUseDom()) return;
20
21
  if (!ele?.parentElement) document.body.appendChild(ele);
21
22
  appendedRef.value = true;
22
23
  }
23
24
  function cleanup() {
25
+ if (!ele || !canUseDom()) {
26
+ appendedRef.value = false;
27
+ return;
28
+ }
24
29
  if (ele?.parentElement) ele?.parentElement?.removeChild(ele);
25
- else if (ele && appendedRef.value) document.body?.removeChild?.(ele);
30
+ else if (appendedRef.value) document.body?.removeChild?.(ele);
26
31
  appendedRef.value = false;
27
32
  }
28
33
  watch(render, () => {
package/dist/portal/dist/useEscKeyDown.js CHANGED
@@ -1,3 +1,4 @@
1
+ import { canUseDom } from "../../util/dist/Dom/canUseDom.js";
1
2
  import { useId, watch } from "vue";
2
3
  var stack = [];
3
4
  var IME_LOCK_DURATION = 200;
@@ -17,14 +18,14 @@ function onGlobalCompositionEnd() {
17
18
  lastCompositionEndTime = Date.now();
18
19
  }
19
20
  function attachGlobalEventListeners() {
21
+ if (!canUseDom()) return;
20
22
  window.addEventListener("keydown", onGlobalKeyDown);
21
23
  window.addEventListener("compositionend", onGlobalCompositionEnd);
22
24
  }
23
25
  function detachGlobalEventListeners() {
24
- if (stack.length === 0) {
25
- window.removeEventListener("keydown", onGlobalKeyDown);
26
- window.removeEventListener("compositionend", onGlobalCompositionEnd);
27
- }
26
+ if (!canUseDom() || stack.length !== 0) return;
27
+ window.removeEventListener("keydown", onGlobalKeyDown);
28
+ window.removeEventListener("compositionend", onGlobalCompositionEnd);
28
29
  }
29
30
  function useEscKeyDown(open, onEsc = () => {}) {
30
31
  const id = useId();
@@ -39,6 +40,7 @@ function useEscKeyDown(open, onEsc = () => {}) {
39
40
  stack = stack.filter((item) => item.id !== id);
40
41
  };
41
42
  watch(open, (_, _o, onCleanup) => {
43
+ if (!canUseDom()) return;
42
44
  if (open.value) {
43
45
  ensure();
44
46
  attachGlobalEventListeners();
package/dist/util/dist/getScrollBarSize.js CHANGED
@@ -1,51 +1,53 @@
1
- import { removeCSS, updateCSS } from "./Dom/dynamicCSS.js";
2
- function measureScrollbarSize(ele) {
3
- const randomId = `vc-scrollbar-measure-${Math.random().toString(36).substring(7)}`;
4
- const measureEle = document.createElement("div");
5
- measureEle.id = randomId;
6
- const measureStyle = measureEle.style;
7
- measureStyle.position = "absolute";
8
- measureStyle.left = "0";
9
- measureStyle.top = "0";
10
- measureStyle.width = "100px";
11
- measureStyle.height = "100px";
12
- measureStyle.overflow = "scroll";
13
- let fallbackWidth;
14
- let fallbackHeight;
15
- if (ele) {
16
- const targetStyle = getComputedStyle(ele);
17
- measureStyle.scrollbarColor = targetStyle.scrollbarColor;
18
- measureStyle.scrollbarWidth = targetStyle.scrollbarWidth;
19
- const webkitScrollbarStyle = getComputedStyle(ele, "::-webkit-scrollbar");
20
- const width = parseInt(webkitScrollbarStyle.width, 10);
21
- const height = parseInt(webkitScrollbarStyle.height, 10);
22
- try {
23
- updateCSS(`
24
- #${randomId}::-webkit-scrollbar {
25
- ${width ? `width: ${webkitScrollbarStyle.width};` : ""}
26
- ${height ? `height: ${webkitScrollbarStyle.height};` : ""}
27
- }`, randomId);
28
- } catch (e) {
29
- console.error(e);
30
- fallbackWidth = width;
31
- fallbackHeight = height;
32
- }
1
+ var cached;
2
+ function getScrollBarSize(fresh) {
3
+ if (typeof document === "undefined") return 0;
4
+ if (fresh || cached === void 0) {
5
+ const inner = document.createElement("div");
6
+ inner.style.width = "100%";
7
+ inner.style.height = "200px";
8
+ const outer = document.createElement("div");
9
+ const outerStyle = outer.style;
10
+ outerStyle.position = "absolute";
11
+ outerStyle.top = "0";
12
+ outerStyle.left = "0";
13
+ outerStyle.pointerEvents = "none";
14
+ outerStyle.visibility = "hidden";
15
+ outerStyle.width = "200px";
16
+ outerStyle.height = "150px";
17
+ outerStyle.overflow = "hidden";
18
+ outer.appendChild(inner);
19
+ document.body.appendChild(outer);
20
+ const widthContained = inner.offsetWidth;
21
+ outer.style.overflow = "scroll";
22
+ let widthScroll = inner.offsetWidth;
23
+ if (widthContained === widthScroll) widthScroll = outer.clientWidth;
24
+ document.body.removeChild(outer);
25
+ cached = widthContained - widthScroll;
33
26
  }
34
- document.body.appendChild(measureEle);
35
- const scrollWidth = ele && fallbackWidth && !Number.isNaN(fallbackWidth) ? fallbackWidth : measureEle.offsetWidth - measureEle.clientWidth;
36
- const scrollHeight = ele && fallbackHeight && !Number.isNaN(fallbackHeight) ? fallbackHeight : measureEle.offsetHeight - measureEle.clientHeight;
37
- document.body.removeChild(measureEle);
38
- removeCSS(randomId);
39
- return {
40
- width: scrollWidth,
41
- height: scrollHeight
42
- };
27
+ return cached;
28
+ }
29
+ function ensureSize(str) {
30
+ const match = str.match(/^(.*)px$/);
31
+ const value = Number(match?.[1]);
32
+ return Number.isNaN(value) ? getScrollBarSize() : value;
43
33
  }
44
34
  function getTargetScrollBarSize(target) {
45
35
  if (typeof document === "undefined" || !target || !(target instanceof Element)) return {
46
36
  width: 0,
47
37
  height: 0
48
38
  };
49
- return measureScrollbarSize(target);
39
+ if (typeof navigator !== "undefined" && /jsdom/i.test(navigator.userAgent)) return {
40
+ width: 0,
41
+ height: 0
42
+ };
43
+ let width = "0px";
44
+ let height = "0px";
45
+ try {
46
+ ({width, height} = getComputedStyle(target, "::-webkit-scrollbar"));
47
+ } catch {}
48
+ return {
49
+ width: ensureSize(width),
50
+ height: ensureSize(height)
51
+ };
50
52
  }
51
53
  export { getTargetScrollBarSize };
package/dist/util.js CHANGED
@@ -6,7 +6,7 @@ function isImageValid(src) {
6
6
  }
7
7
  const isTestEnv = typeof process !== "undefined" && process.env.NODE_ENV === "test";
8
8
  const isJSDomUA = typeof navigator !== "undefined" && /jsdom/i.test(navigator.userAgent);
9
- if (isTestEnv || isJSDomUA) {
9
+ if (isTestEnv || isJSDomUA || !(typeof document !== "undefined" && typeof window !== "undefined")) {
10
10
  resolve(/^(https?:)?\/\//.test(src) || /^(data|blob):/.test(src) || src.startsWith("/") || src.startsWith("./") || src.startsWith("../"));
11
11
  return;
12
12
  }
@@ -17,6 +17,10 @@ function isImageValid(src) {
17
17
  });
18
18
  }
19
19
  function getClientSize() {
20
+ if (typeof document === "undefined" || typeof window === "undefined") return {
21
+ width: 0,
22
+ height: 0
23
+ };
20
24
  return {
21
25
  width: document.documentElement.clientWidth,
22
26
  height: window.innerHeight || document.documentElement.clientHeight
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@v-c/image",
3
3
  "type": "module",
4
- "version": "1.0.4",
4
+ "version": "1.0.5-beta.1",
5
5
  "description": "image component",
6
6
  "author": "",
7
7
  "license": "MIT",
@@ -32,8 +32,8 @@
32
32
  "vue": "^3.0.0"
33
33
  },
34
34
  "dependencies": {
35
- "@v-c/portal": "^1.0.7",
36
- "@v-c/util": "^1.0.17"
35
+ "@v-c/portal": "^1.0.8-beta.1",
36
+ "@v-c/util": "^1.0.18"
37
37
  },
38
38
  "devDependencies": {
39
39
  "@ant-design/icons-vue": "^7.0.1"