@v-c/image 0.0.2 → 1.0.0

package/dist/{image/src/Image.cjs → Image.cjs}

@@ -2,13 +2,13 @@ Object.defineProperties(exports, {
 	__esModule: { value: true },
 	[Symbol.toStringTag]: { value: "Module" }
 });
+const require_index = require("./util/dist/props-util/index.cjs");
+const require_classnames = require("./util/dist/classnames.cjs");
+const require_useMergedState = require("./util/dist/hooks/useMergedState.cjs");
+require("./util/dist/index.cjs");
+const require_pickAttrs = require("./util/dist/pickAttrs.cjs");
 const require_common = require("./common.cjs");
 const require_context = require("./context.cjs");
-const require_classnames = require("../../util/dist/classnames.cjs");
-const require_useMergedState = require("../../util/dist/hooks/useMergedState.cjs");
-const require_index = require("../../util/dist/props-util/index.cjs");
-require("../../util/dist/index.cjs");
-const require_pickAttrs = require("../../util/dist/pickAttrs.cjs");
 const require_useRegisterImage = require("./hooks/useRegisterImage.cjs");
 const require_useStatus = require("./hooks/useStatus.cjs");
 const require_index$2 = require("./Preview/index.cjs");

package/dist/{image/src/Image.js → Image.js}

@@ -1,10 +1,10 @@
+import { getAttrStyleAndClass, getStylePxValue } from "./util/dist/props-util/index.js";
+import { clsx } from "./util/dist/classnames.js";
+import { useMergedState } from "./util/dist/hooks/useMergedState.js";
+import "./util/dist/index.js";
+import { pickAttrs } from "./util/dist/pickAttrs.js";
 import { COMMON_PROPS } from "./common.js";
 import { usePreviewGroupContext } from "./context.js";
-import { clsx } from "../../util/dist/classnames.js";
-import { useMergedState } from "../../util/dist/hooks/useMergedState.js";
-import { getAttrStyleAndClass, getStylePxValue } from "../../util/dist/props-util/index.js";
-import "../../util/dist/index.js";
-import { pickAttrs } from "../../util/dist/pickAttrs.js";
 import useRegisterImage from "./hooks/useRegisterImage.js";
 import useStatus from "./hooks/useStatus.js";
 import Preview_default from "./Preview/index.js";

package/dist/{image/src/Preview → Preview}/Footer.cjs

@@ -2,8 +2,8 @@ Object.defineProperties(exports, {
 	__esModule: { value: true },
 	[Symbol.toStringTag]: { value: "Module" }
 });
-const require_classnames = require("../../../util/dist/classnames.cjs");
-require("../../../util/dist/index.cjs");
+const require_classnames = require("../util/dist/classnames.cjs");
+require("../util/dist/index.cjs");
 let vue = require("vue");
 var Footer = /* @__PURE__ */ (0, vue.defineComponent)((props) => {
 	const renderOperation = ({ type, disabled, onClick, icon }) => {

package/dist/{image/src/Preview → Preview}/Footer.js

@@ -1,5 +1,5 @@
-import { clsx } from "../../../util/dist/classnames.js";
-import "../../../util/dist/index.js";
+import { clsx } from "../util/dist/classnames.js";
+import "../util/dist/index.js";
 import { createVNode, defineComponent } from "vue";
 var Footer_default = /* @__PURE__ */ defineComponent((props) => {
 	const renderOperation = ({ type, disabled, onClick, icon }) => {

package/dist/{image/src/Preview → Preview}/PrevNext.cjs

@@ -2,8 +2,8 @@ Object.defineProperties(exports, {
 	__esModule: { value: true },
 	[Symbol.toStringTag]: { value: "Module" }
 });
-const require_classnames = require("../../../util/dist/classnames.cjs");
-require("../../../util/dist/index.cjs");
+const require_classnames = require("../util/dist/classnames.cjs");
+require("../util/dist/index.cjs");
 let vue = require("vue");
 var PrevNext = /* @__PURE__ */ (0, vue.defineComponent)((props) => {
 	return () => {

package/dist/{image/src/Preview → Preview}/PrevNext.js

@@ -1,5 +1,5 @@
-import { clsx } from "../../../util/dist/classnames.js";
-import "../../../util/dist/index.js";
+import { clsx } from "../util/dist/classnames.js";
+import "../util/dist/index.js";
 import { Fragment, createVNode, defineComponent } from "vue";
 var PrevNext_default = /* @__PURE__ */ defineComponent((props) => {
 	return () => {

package/dist/{image/src/Preview → Preview}/index.cjs

@@ -2,13 +2,14 @@ Object.defineProperties(exports, {
 	__esModule: { value: true },
 	[Symbol.toStringTag]: { value: "Module" }
 });
+const require_KeyCode = require("../util/dist/KeyCode.cjs");
+const require_classnames = require("../util/dist/classnames.cjs");
+require("../util/dist/index.cjs");
 const require_context = require("../context.cjs");
-const require_classnames = require("../../../util/dist/classnames.cjs");
-const require_KeyCode = require("../../../util/dist/KeyCode.cjs");
-require("../../../util/dist/index.cjs");
 const require_useStatus = require("../hooks/useStatus.cjs");
-const require_index$1 = require("../../../portal/dist/index.cjs");
-const require_transition = require("../../../util/dist/utils/transition.cjs");
+const require_canUseDom = require("../util/dist/Dom/canUseDom.cjs");
+const require_index$1 = require("../portal/dist/index.cjs");
+const require_transition = require("../util/dist/utils/transition.cjs");
 const require_useImageTransform = require("../hooks/useImageTransform.cjs");
 const require_previewConfig = require("../previewConfig.cjs");
 const require_useMouseEvent = require("../hooks/useMouseEvent.cjs");
@@ -88,6 +89,7 @@ var Preview = /* @__PURE__ */ (0, vue.defineComponent)((props, { attrs, slots })
 		}
 	};
 	(0, vue.watchEffect)((onCleanup) => {
+		if (!require_canUseDom.canUseDom()) return;
 		if (props.open) window.addEventListener("keydown", onKeyDown);
 		onCleanup(() => {
 			window.removeEventListener("keydown", onKeyDown);

package/dist/{image/src/Preview → Preview}/index.js

@@ -1,10 +1,11 @@
+import { KeyCodeStr } from "../util/dist/KeyCode.js";
+import { clsx } from "../util/dist/classnames.js";
+import "../util/dist/index.js";
 import { usePreviewGroupContext } from "../context.js";
-import { clsx } from "../../../util/dist/classnames.js";
-import { KeyCodeStr } from "../../../util/dist/KeyCode.js";
-import "../../../util/dist/index.js";
 import useStatus from "../hooks/useStatus.js";
-import { src_default } from "../../../portal/dist/index.js";
-import { getTransitionProps } from "../../../util/dist/utils/transition.js";
+import { canUseDom } from "../util/dist/Dom/canUseDom.js";
+import { src_default } from "../portal/dist/index.js";
+import { getTransitionProps } from "../util/dist/utils/transition.js";
 import useImageTransform from "../hooks/useImageTransform.js";
 import { BASE_SCALE_RATIO } from "../previewConfig.js";
 import useMouseEvent from "../hooks/useMouseEvent.js";
@@ -84,6 +85,7 @@ var Preview_default = /* @__PURE__ */ defineComponent((props, { attrs, slots })
 		}
 	};
 	watchEffect((onCleanup) => {
+		if (!canUseDom()) return;
 		if (props.open) window.addEventListener("keydown", onKeyDown);
 		onCleanup(() => {
 			window.removeEventListener("keydown", onKeyDown);

package/dist/{image/src/PreviewGroup.cjs → PreviewGroup.cjs}

@@ -2,8 +2,8 @@ Object.defineProperties(exports, {
 	__esModule: { value: true },
 	[Symbol.toStringTag]: { value: "Module" }
 });
+const require_useMergedState = require("./util/dist/hooks/useMergedState.cjs");
 const require_context = require("./context.cjs");
-const require_useMergedState = require("../../util/dist/hooks/useMergedState.cjs");
 const require_index = require("./Preview/index.cjs");
 const require_usePreviewItems = require("./hooks/usePreviewItems.cjs");
 let vue = require("vue");

package/dist/{image/src/PreviewGroup.js → PreviewGroup.js}

@@ -1,5 +1,5 @@
+import { useMergedState } from "./util/dist/hooks/useMergedState.js";
 import { usePreviewGroupProvider } from "./context.js";
-import { useMergedState } from "../../util/dist/hooks/useMergedState.js";
 import Preview_default from "./Preview/index.js";
 import usePreviewItems from "./hooks/usePreviewItems.js";
 import { Fragment, computed, createVNode, defineComponent, mergeDefaults, mergeProps, shallowRef, toRef, watch } from "vue";

package/dist/{image/src/hooks → hooks}/useImageTransform.cjs

@@ -2,9 +2,9 @@ Object.defineProperties(exports, {
 	__esModule: { value: true },
 	[Symbol.toStringTag]: { value: "Module" }
 });
+const require_raf = require("../util/dist/raf.cjs");
 const require_util = require("../util.cjs");
-const require_raf = require("../../../util/dist/raf.cjs");
-const require_isEqual = require("../../../util/dist/isEqual.cjs");
+const require_isEqual = require("../util/dist/isEqual.cjs");
 let vue = require("vue");
 var initialTransform = {
 	x: 0,

package/dist/{image/src/hooks → hooks}/useImageTransform.js

@@ -1,6 +1,6 @@
+import { raf_default } from "../util/dist/raf.js";
 import { getClientSize } from "../util.js";
-import { raf_default } from "../../../util/dist/raf.js";
-import { isEqual_default } from "../../../util/dist/isEqual.js";
+import { isEqual_default } from "../util/dist/isEqual.js";
 import { ref, shallowRef } from "vue";
 var initialTransform = {
 	x: 0,

package/dist/{image/src/hooks → hooks}/useMouseEvent.cjs

@@ -2,9 +2,9 @@ Object.defineProperties(exports, {
 	__esModule: { value: true },
 	[Symbol.toStringTag]: { value: "Module" }
 });
+const require_warning = require("../util/dist/warning.cjs");
+require("../util/dist/index.cjs");
 const require_getFixScaleEleTransPosition = require("../getFixScaleEleTransPosition.cjs");
-const require_warning = require("../../../util/dist/warning.cjs");
-require("../../../util/dist/index.cjs");
 const require_previewConfig = require("../previewConfig.cjs");
 let vue = require("vue");
 function useMouseEvent(imgRef, movable, open, scaleStep, transform, updateTransform, dispatchZoomChange) {

package/dist/{image/src/hooks → hooks}/useMouseEvent.js

@@ -1,6 +1,6 @@
+import { warning_default } from "../util/dist/warning.js";
+import "../util/dist/index.js";
 import getFixScaleEleTransPosition from "../getFixScaleEleTransPosition.js";
-import { warning_default } from "../../../util/dist/warning.js";
-import "../../../util/dist/index.js";
 import { BASE_SCALE_RATIO, WHEEL_MAX_SCALE_RATIO } from "../previewConfig.js";
 import { shallowRef, watch } from "vue";
 function useMouseEvent(imgRef, movable, open, scaleStep, transform, updateTransform, dispatchZoomChange) {

package/dist/{image/src/hooks → hooks}/useTouchEvent.cjs

@@ -2,6 +2,7 @@ Object.defineProperties(exports, {
 	__esModule: { value: true },
 	[Symbol.toStringTag]: { value: "Module" }
 });
+const require_canUseDom = require("../util/dist/Dom/canUseDom.cjs");
 const require_getFixScaleEleTransPosition = require("../getFixScaleEleTransPosition.cjs");
 let vue = require("vue");
 function getDistance(a, b) {
@@ -110,6 +111,7 @@ function useTouchEvent(imgRef, movable, open, minScale, transform, updateTransfo
 		};
 		if (open.value && movable.value) window.addEventListener("touchmove", preventDefault, { passive: false });
 		onCleanup(() => {
+			if (!require_canUseDom.canUseDom()) return;
 			window.removeEventListener("touchmove", preventDefault);
 		});
 	});

package/dist/{image/src/hooks → hooks}/useTouchEvent.js

@@ -1,3 +1,4 @@
+import { canUseDom } from "../util/dist/Dom/canUseDom.js";
 import getFixScaleEleTransPosition from "../getFixScaleEleTransPosition.js";
 import { shallowRef, watchEffect } from "vue";
 function getDistance(a, b) {
@@ -106,6 +107,7 @@ function useTouchEvent(imgRef, movable, open, minScale, transform, updateTransfo
 		};
 		if (open.value && movable.value) window.addEventListener("touchmove", preventDefault, { passive: false });
 		onCleanup(() => {
+			if (!canUseDom()) return;
 			window.removeEventListener("touchmove", preventDefault);
 		});
 	});

package/dist/portal/dist/Portal.cjs

@@ -20,7 +20,7 @@ function getPortalContainer(getContainer) {
 var Portal_default = /* @__PURE__ */ (0, vue.defineComponent)((props, { slots, expose }) => {
 	const shouldRender = (0, vue.shallowRef)(props.open);
 	const mergedRender = (0, vue.computed)(() => shouldRender.value || props.open);
-	if (process.env.NODE_ENV !== "production") require_warning.warning_default(require_canUseDom.canUseDom() || !open, `Portal only work in client side. Please call 'useEffect' to show Portal instead default render in SSR.`);
+	if (process.env.NODE_ENV !== "production") require_warning.warning_default(require_canUseDom.canUseDom() || !props.open, `Portal only work in client side. Please call 'useEffect' to show Portal instead default render in SSR.`);
 	(0, vue.watch)([() => props.open, () => props.autoDestroy], () => {
 		if (props.autoDestroy || props.open) shouldRender.value = props.open;
 	});

package/dist/portal/dist/Portal.js

@@ -20,7 +20,7 @@ function getPortalContainer(getContainer) {
 var Portal_default = /* @__PURE__ */ defineComponent((props, { slots, expose }) => {
 	const shouldRender = shallowRef(props.open);
 	const mergedRender = computed(() => shouldRender.value || props.open);
-	if (process.env.NODE_ENV !== "production") warning_default(canUseDom() || !open, `Portal only work in client side. Please call 'useEffect' to show Portal instead default render in SSR.`);
+	if (process.env.NODE_ENV !== "production") warning_default(canUseDom() || !props.open, `Portal only work in client side. Please call 'useEffect' to show Portal instead default render in SSR.`);
 	watch([() => props.open, () => props.autoDestroy], () => {
 		if (props.autoDestroy || props.open) shouldRender.value = props.open;
 	});

package/dist/util/dist/index.cjs

@@ -1,8 +1,7 @@
+const require_raf = require("./raf.cjs");
+const require_omit = require("./omit.cjs");
+require("./RenderComponent.cjs");
 const require_classnames = require("./classnames.cjs");
-require("./hooks/useControlledState.cjs");
 require("./hooks/useId.cjs");
 const require_useMergedState = require("./hooks/useMergedState.cjs");
-const require_omit = require("./omit.cjs");
-const require_raf = require("./raf.cjs");
-require("./RenderComponent.cjs");
 const require_warning = require("./warning.cjs");

package/dist/util/dist/index.js

@@ -1,8 +1,7 @@
+import { raf_default } from "./raf.js";
+import { omit } from "./omit.js";
+import "./RenderComponent.js";
 import { classNames, clsx } from "./classnames.js";
-import "./hooks/useControlledState.js";
 import "./hooks/useId.js";
 import { useMergedState } from "./hooks/useMergedState.js";
-import { omit } from "./omit.js";
-import { raf_default } from "./raf.js";
-import "./RenderComponent.js";
 import { warning_default } from "./warning.js";

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@v-c/image",
   "type": "module",
-  "version": "0.0.2",
+  "version": "1.0.0",
   "description": "image component",
   "author": "",
   "license": "MIT",
@@ -32,8 +32,8 @@
     "vue": "^3.0.0"
   },
   "dependencies": {
-    "@v-c/portal": "^1.0.4",
-    "@v-c/util": "^1.0.8"
+    "@v-c/util": "^1.0.8",
+    "@v-c/portal": "^1.0.5"
   },
   "devDependencies": {
     "@ant-design/icons-vue": "^7.0.1"

package/dist/util/dist/hooks/useControlledState.cjs

@@ -1 +0,0 @@
-let vue = require("vue");

package/dist/util/dist/hooks/useControlledState.js

@@ -1 +0,0 @@
-import { nextTick, shallowRef, watch } from "vue";