@v-c/image 1.0.1 → 1.0.3

package/dist/Image.js

@@ -74,7 +74,7 @@ var Image_default = /* @__PURE__ */ defineComponent((props, { attrs, slots }) =>
 		const { width, height } = props;
 		const { className, style: attrStyle, restAttrs } = getAttrStyleAndClass(attrs);
 		const coverPlacement = typeof cover.value === "object" && cover.value && cover.value.placement ? cover.value.placement || "center" : "center";
-		const coverNode = typeof cover.value === "object" && cover.value && cover.value.coverNode ? cover.value.coverNode : cover.value;
+		const coverNode = slots.cover?.() || (typeof cover.value === "object" && cover.value && cover.value.coverNode ? cover.value.coverNode : cover.value);
 		const imgStyle = [
 			height ? { height: getStylePxValue(height) } : null,
 			props.styles?.image,

package/dist/Preview/index.js

@@ -95,7 +95,7 @@ var Preview_default = /* @__PURE__ */ defineComponent((props, { attrs, slots })
 	watch(() => props.open, (open) => {
 		if (open) lockScroll.value = true;
 	});
-	const portalRender = shallowRef(false);
+	const portalRender = shallowRef(props?.open ?? false);
 	watch(() => props.open, (open) => {
 		if (open) portalRender.value = true;
 	});

package/dist/portal/dist/Portal.js

@@ -6,6 +6,7 @@ import { canUseDom } from "../../util/dist/Dom/canUseDom.js";
 import { useDom } from "./useDom.js";
 import { useEscKeyDown } from "./useEscKeyDown.js";
 import { useScrollLocker } from "./useScrollLocker.js";
+import { getDOM } from "../../util/dist/Dom/findDOMNode.js";
 import { Teleport, computed, createVNode, defineComponent, isVNode, mergeDefaults, onMounted, shallowRef, watch } from "vue";
 function _isSlot(s) {
 	return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
@@ -14,8 +15,8 @@ function getPortalContainer(getContainer) {
 	if (getContainer === false) return false;
 	if (!canUseDom() || !getContainer) return null;
 	if (typeof getContainer === "string") return document.querySelector(getContainer);
-	if (typeof getContainer === "function") return getContainer();
-	return getContainer;
+	if (typeof getContainer === "function") return getDOM(getContainer());
+	return typeof getContainer === "object" ? getDOM(getContainer) : getContainer;
 }
 var Portal_default = /* @__PURE__ */ defineComponent((props, { slots, expose }) => {
 	const shouldRender = shallowRef(props.open);

package/dist/util/dist/Dom/findDOMNode.js

@@ -0,0 +1,20 @@
+import { canUseDom } from "./canUseDom.js";
+import { unref } from "vue";
+function isDOM(node) {
+	return node instanceof HTMLElement || node instanceof SVGElement;
+}
+function getDOM(elementRef) {
+	const unrefElementRef = unref(elementRef);
+	if (!canUseDom()) return unrefElementRef;
+	const dom = findDOMNode(unrefElementRef) || (unrefElementRef && typeof unrefElementRef === "object" ? findDOMNode(unrefElementRef.nativeElement) : null);
+	if (dom && (dom.nodeType === 3 || dom.nodeType === 8) && dom.nextElementSibling) return dom.nextElementSibling;
+	return dom;
+}
+function findDOMNode(_node) {
+	const node = unref(_node);
+	if (!canUseDom()) return node;
+	if (isDOM(node)) return node;
+	else if (node && "$el" in node) return node.$el;
+	return null;
+}
+export { getDOM };

package/dist/util/dist/getScrollBarSize.js

@@ -1,53 +1,51 @@
-var cached;
-function getScrollBarSize(fresh) {
-	if (typeof document === "undefined") return 0;
-	if (fresh || cached === void 0) {
-		const inner = document.createElement("div");
-		inner.style.width = "100%";
-		inner.style.height = "200px";
-		const outer = document.createElement("div");
-		const outerStyle = outer.style;
-		outerStyle.position = "absolute";
-		outerStyle.top = "0";
-		outerStyle.left = "0";
-		outerStyle.pointerEvents = "none";
-		outerStyle.visibility = "hidden";
-		outerStyle.width = "200px";
-		outerStyle.height = "150px";
-		outerStyle.overflow = "hidden";
-		outer.appendChild(inner);
-		document.body.appendChild(outer);
-		const widthContained = inner.offsetWidth;
-		outer.style.overflow = "scroll";
-		let widthScroll = inner.offsetWidth;
-		if (widthContained === widthScroll) widthScroll = outer.clientWidth;
-		document.body.removeChild(outer);
-		cached = widthContained - widthScroll;
+import { removeCSS, updateCSS } from "./Dom/dynamicCSS.js";
+function measureScrollbarSize(ele) {
+	const randomId = `vc-scrollbar-measure-${Math.random().toString(36).substring(7)}`;
+	const measureEle = document.createElement("div");
+	measureEle.id = randomId;
+	const measureStyle = measureEle.style;
+	measureStyle.position = "absolute";
+	measureStyle.left = "0";
+	measureStyle.top = "0";
+	measureStyle.width = "100px";
+	measureStyle.height = "100px";
+	measureStyle.overflow = "scroll";
+	let fallbackWidth;
+	let fallbackHeight;
+	if (ele) {
+		const targetStyle = getComputedStyle(ele);
+		measureStyle.scrollbarColor = targetStyle.scrollbarColor;
+		measureStyle.scrollbarWidth = targetStyle.scrollbarWidth;
+		const webkitScrollbarStyle = getComputedStyle(ele, "::-webkit-scrollbar");
+		const width = parseInt(webkitScrollbarStyle.width, 10);
+		const height = parseInt(webkitScrollbarStyle.height, 10);
+		try {
+			updateCSS(`
+#${randomId}::-webkit-scrollbar {
+${width ? `width: ${webkitScrollbarStyle.width};` : ""}
+${height ? `height: ${webkitScrollbarStyle.height};` : ""}
+}`, randomId);
+		} catch (e) {
+			console.error(e);
+			fallbackWidth = width;
+			fallbackHeight = height;
+		}
 	}
-	return cached;
-}
-function ensureSize(str) {
-	const match = str.match(/^(.*)px$/);
-	const value = Number(match?.[1]);
-	return Number.isNaN(value) ? getScrollBarSize() : value;
+	document.body.appendChild(measureEle);
+	const scrollWidth = ele && fallbackWidth && !Number.isNaN(fallbackWidth) ? fallbackWidth : measureEle.offsetWidth - measureEle.clientWidth;
+	const scrollHeight = ele && fallbackHeight && !Number.isNaN(fallbackHeight) ? fallbackHeight : measureEle.offsetHeight - measureEle.clientHeight;
+	document.body.removeChild(measureEle);
+	removeCSS(randomId);
+	return {
+		width: scrollWidth,
+		height: scrollHeight
+	};
 }
 function getTargetScrollBarSize(target) {
 	if (typeof document === "undefined" || !target || !(target instanceof Element)) return {
 		width: 0,
 		height: 0
 	};
-	if (typeof navigator !== "undefined" && /jsdom/i.test(navigator.userAgent)) return {
-		width: 0,
-		height: 0
-	};
-	let width = "0px";
-	let height = "0px";
-	try {
-		({width, height} = getComputedStyle(target, "::-webkit-scrollbar"));
-	} catch {}
-	return {
-		width: ensureSize(width),
-		height: ensureSize(height)
-	};
+	return measureScrollbarSize(target);
 }
 export { getTargetScrollBarSize };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@v-c/image",
   "type": "module",
-  "version": "1.0.1",
+  "version": "1.0.3",
   "description": "image component",
   "author": "",
   "license": "MIT",
@@ -14,7 +14,7 @@
     ".": {
       "types": "./dist/index.d.ts",
       "import": "./dist/index.js",
-      "require": "./dist/index.cjs"
+      "default": "./dist/index.js"
     },
     "./dist/*": "./dist/*",
     "./package.json": "./package.json"
@@ -28,21 +28,21 @@
   "publishConfig": {
     "access": "public"
   },
+  "scripts": {
+    "build": "vite build",
+    "prepublish": "pnpm build",
+    "test": "vitest run",
+    "patch": "bumpp --release patch",
+    "bump": "bumpp"
+  },
   "peerDependencies": {
     "vue": "^3.0.0"
   },
   "dependencies": {
-    "@v-c/portal": "^1.0.6",
-    "@v-c/util": "^1.0.9"
+    "@v-c/portal": "workspace:^",
+    "@v-c/util": "workspace:^"
   },
   "devDependencies": {
     "@ant-design/icons-vue": "^7.0.1"
-  },
-  "scripts": {
-    "build": "vite build",
-    "prepublish": "pnpm build",
-    "test": "vitest run",
-    "patch": "bumpp --release patch",
-    "bump": "bumpp"
   }
-}
+}

package/LICENSE

@@ -1,21 +0,0 @@
-MIT License
-
-Copyright (c) 2023 antdv-community
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.

package/dist/Image.cjs

@@ -1,231 +0,0 @@
-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_useRegisterImage = require("./hooks/useRegisterImage.cjs");
-const require_useStatus = require("./hooks/useStatus.cjs");
-const require_index$2 = require("./Preview/index.cjs");
-let vue = require("vue");
-var Image = /* @__PURE__ */ (0, vue.defineComponent)((props, { attrs, slots }) => {
-	const groupContext = require_context.usePreviewGroupContext();
-	const prefixCls = (0, vue.computed)(() => props.prefixCls ?? "vc-image");
-	const previewPrefixCls = (0, vue.computed)(() => props.previewPrefixCls ?? `${prefixCls.value}-preview`);
-	const canPreview = (0, vue.computed)(() => !!props.preview);
-	const mergedPreviewConfig = (0, vue.computed)(() => {
-		if (props.preview && typeof props.preview === "object") return props.preview;
-		return {};
-	});
-	const previewSrc = (0, vue.computed)(() => mergedPreviewConfig.value.src);
-	const previewOpen = (0, vue.computed)(() => mergedPreviewConfig.value.open);
-	const cover = (0, vue.computed)(() => mergedPreviewConfig.value.cover);
-	const previewRootClassName = (0, vue.computed)(() => mergedPreviewConfig.value.rootClassName);
-	const [isShowPreview, setShowPreview] = require_useMergedState.useMergedState(!!previewOpen.value, { value: previewOpen });
-	const mousePosition = (0, vue.shallowRef)(null);
-	const triggerPreviewOpen = (nextOpen) => {
-		setShowPreview(nextOpen);
-		mergedPreviewConfig.value.onOpenChange?.(nextOpen);
-	};
-	const onPreviewClose = () => {
-		triggerPreviewOpen(false);
-		mousePosition.value = null;
-	};
-	const isCustomPlaceholder = (0, vue.computed)(() => !!slots.placeholder || !!(props.placeholder && props.placeholder !== true));
-	const src = (0, vue.computed)(() => previewSrc.value ?? props.src);
-	const [getImgRef, srcAndOnload, status] = require_useStatus.default({
-		src: (0, vue.computed)(() => props.src),
-		isCustomPlaceholder,
-		fallback: (0, vue.computed)(() => props.fallback)
-	});
-	const imgCommonProps = (0, vue.computed)(() => {
-		const obj = {};
-		require_common.COMMON_PROPS.forEach((prop) => {
-			if (props[prop] !== void 0) obj[prop] = props[prop];
-		});
-		return obj;
-	});
-	const imageId = require_useRegisterImage.default(canPreview, (0, vue.computed)(() => ({
-		...imgCommonProps.value,
-		src: src.value
-	})));
-	const onPreview = (e) => {
-		const rect = (e.currentTarget || e.target).getBoundingClientRect();
-		const left = rect.x + rect.width / 2;
-		const top = rect.y + rect.height / 2;
-		if (groupContext) groupContext.onPreview(imageId, src.value || "", left, top);
-		else {
-			mousePosition.value = {
-				x: left,
-				y: top
-			};
-			triggerPreviewOpen(true);
-		}
-		props.onClick?.(e);
-	};
-	const onInternalClick = (e) => {
-		props.onClick?.(e);
-	};
-	const onImgError = (e) => {
-		props.onError?.(e);
-	};
-	return () => {
-		const { width, height } = props;
-		const { className, style: attrStyle, restAttrs } = require_index.getAttrStyleAndClass(attrs);
-		const coverPlacement = typeof cover.value === "object" && cover.value && cover.value.placement ? cover.value.placement || "center" : "center";
-		const coverNode = typeof cover.value === "object" && cover.value && cover.value.coverNode ? cover.value.coverNode : cover.value;
-		const imgStyle = [
-			height ? { height: require_index.getStylePxValue(height) } : null,
-			props.styles?.image,
-			attrStyle
-		];
-		const rootStyle = {
-			width: require_index.getStylePxValue(width),
-			height: require_index.getStylePxValue(height),
-			...props.styles?.root ?? {}
-		};
-		const rootCls = require_classnames.clsx(prefixCls.value, props.rootClassName, props.classNames?.root, { [`${prefixCls.value}-error`]: status.value === "error" });
-		const imgCls = require_classnames.clsx(`${prefixCls.value}-img`, { [`${prefixCls.value}-img-placeholder`]: props.placeholder === true }, props.classNames?.image, className);
-		const imageRender = slots.imageRender ? (originNode, info) => slots.imageRender?.(originNode, info) : mergedPreviewConfig.value.imageRender;
-		const placeholderNode = slots.placeholder?.() ?? (props.placeholder === true ? null : props.placeholder);
-		const actionsRender = slots.actionsRender ? (originNode, info) => slots.actionsRender?.({
-			actionsNode: originNode,
-			...info
-		}) : mergedPreviewConfig.value.actionsRender;
-		const { src: _previewSrc, open: _previewOpen, onOpenChange: _onPreviewOpenChange, cover: _cover, rootClassName: _previewRootCls, ...restPreviewProps } = mergedPreviewConfig.value;
-		return (0, vue.createVNode)(vue.Fragment, null, [(0, vue.createVNode)("div", (0, vue.mergeProps)(require_pickAttrs.pickAttrs(restAttrs, false), {
-			"class": rootCls,
-			"onClick": canPreview.value ? onPreview : onInternalClick,
-			"style": rootStyle
-		}), [
-			(0, vue.createVNode)("img", (0, vue.mergeProps)(imgCommonProps.value, {
-				"src": srcAndOnload.value.src,
-				"class": imgCls,
-				"style": imgStyle,
-				"ref": getImgRef,
-				"width": width,
-				"height": height,
-				"onLoad": srcAndOnload.value.onLoad,
-				"onError": onImgError
-			}), null),
-			status.value === "loading" && (0, vue.createVNode)("div", {
-				"aria-hidden": "true",
-				"class": `${prefixCls.value}-placeholder`
-			}, [placeholderNode]),
-			cover.value !== false && canPreview.value && (0, vue.createVNode)("div", {
-				"class": require_classnames.clsx(`${prefixCls.value}-cover`, props.classNames?.cover, `${prefixCls.value}-cover-${coverPlacement}`),
-				"style": props.styles?.cover
-			}, [coverNode])
-		]), !groupContext && canPreview.value && (0, vue.createVNode)(require_index$2.default, (0, vue.mergeProps)({
-			"aria-hidden": !isShowPreview.value,
-			"open": isShowPreview.value,
-			"prefixCls": previewPrefixCls.value,
-			"onClose": onPreviewClose,
-			"mousePosition": mousePosition.value,
-			"src": src.value,
-			"alt": props.alt,
-			"imageInfo": {
-				width: props.width,
-				height: props.height
-			},
-			"fallback": props.fallback,
-			"imgCommonProps": imgCommonProps.value,
-			"imageRender": imageRender,
-			"actionsRender": actionsRender
-		}, restPreviewProps, {
-			"classNames": props.classNames?.popup,
-			"styles": props.styles?.popup,
-			"rootClassName": require_classnames.clsx(previewRootClassName.value, props.rootClassName)
-		}), null)]);
-	};
-}, {
-	props: /* @__PURE__ */ (0, vue.mergeDefaults)({
-		prefixCls: {
-			type: String,
-			required: false,
-			default: void 0
-		},
-		previewPrefixCls: {
-			type: String,
-			required: false,
-			default: void 0
-		},
-		rootClassName: {
-			type: String,
-			required: false,
-			default: void 0
-		},
-		classNames: {
-			type: Object,
-			required: false,
-			default: void 0
-		},
-		styles: {
-			type: Object,
-			required: false,
-			default: void 0
-		},
-		src: {
-			type: String,
-			required: false,
-			default: void 0
-		},
-		placeholder: {
-			type: [
-				Boolean,
-				Object,
-				Function,
-				String,
-				Number,
-				null,
-				Array
-			],
-			required: false,
-			default: void 0
-		},
-		fallback: {
-			type: String,
-			required: false,
-			default: void 0
-		},
-		preview: {
-			type: [Boolean, Object],
-			required: false,
-			default: void 0
-		},
-		onClick: {
-			type: Function,
-			required: false,
-			default: void 0
-		},
-		onError: {
-			type: Function,
-			required: false,
-			default: void 0
-		},
-		width: {
-			type: [String, Number],
-			required: false,
-			default: void 0
-		},
-		height: {
-			type: [String, Number],
-			required: false,
-			default: void 0
-		}
-	}, {
-		prefixCls: "vc-image",
-		preview: true,
-		classNames: {},
-		styles: {}
-	}),
-	name: "Image",
-	inheritAttrs: false
-});
-var Image_default = Image;
-exports.default = Image_default;

package/dist/Preview/CloseBtn.cjs

@@ -1,44 +0,0 @@
-Object.defineProperties(exports, {
-	__esModule: { value: true },
-	[Symbol.toStringTag]: { value: "Module" }
-});
-let vue = require("vue");
-var CloseBtn = /* @__PURE__ */ (0, vue.defineComponent)((props) => {
-	return () => {
-		const { prefixCls, icon, onClick } = props;
-		return (0, vue.createVNode)("button", {
-			"class": `${prefixCls}-close`,
-			"type": "button",
-			"onClick": onClick
-		}, [icon]);
-	};
-}, {
-	props: {
-		prefixCls: {
-			type: String,
-			required: true,
-			default: void 0
-		},
-		icon: {
-			type: [
-				Object,
-				Function,
-				String,
-				Number,
-				null,
-				Boolean,
-				Array
-			],
-			required: false,
-			default: void 0
-		},
-		onClick: {
-			type: Function,
-			required: true,
-			default: void 0
-		}
-	},
-	name: "ImagePreviewCloseBtn"
-});
-var CloseBtn_default = CloseBtn;
-exports.default = CloseBtn_default;