@v-c/image 1.0.2 → 1.0.4

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/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/dist/util/dist/hooks/useControlledState.js

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

package/dist/util/dist/index.js

@@ -2,6 +2,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 { warning_default } from "./warning.js";

package/package.json

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