@gx-design-vue/image 0.1.1 → 0.2.0-alpha.0

package/dist/ImagePreview/style.js

@@ -0,0 +1,286 @@
+import { Keyframe, mergeToken, useStyle as useStyle$1 } from "@gx-design-vue/pro-provider";
+import { TinyColor } from "@ctrl/tinycolor";
+
+//#region src/ImagePreview/style.ts
+const viewFadeIn = new Keyframe("viewFadeIn", {
+	"0%": { opacity: 0 },
+	"100%": { opacity: 1 }
+});
+const viewFadeOut = new Keyframe("viewFadeOut", {
+	"0%": { opacity: 1 },
+	"100%": { opacity: 0 }
+});
+const viewZoomBadgeIn = new Keyframe("viewZoomBadgeIn", {
+	"0%": {
+		transform: "scale(0)",
+		opacity: 0
+	},
+	"100%": {
+		transform: "scale(1)",
+		opacity: 1
+	}
+});
+const viewZoomBadgeOut = new Keyframe("viewZoomBadgeOut", {
+	"0%": { transform: "scale(1)" },
+	"100%": {
+		transform: "scale(0)",
+		opacity: 0
+	}
+});
+function genBoxStyle(position) {
+	return {
+		position: position || "absolute",
+		inset: 0
+	};
+}
+function box(position) {
+	return {
+		position,
+		top: 0,
+		insetInlineEnd: 0,
+		bottom: 0,
+		insetInlineStart: 0
+	};
+}
+function resetComponent(token) {
+	return {
+		boxSizing: "border-box",
+		margin: 0,
+		padding: 0,
+		color: token.colorText,
+		fontSize: token.fontSize,
+		lineHeight: token.lineHeight,
+		listStyle: "none",
+		fontFamily: token.fontFamily
+	};
+}
+function genPreviewOperationsStyle(token) {
+	const { previewCls, modalMaskBg, marginXL, margin, colorTextLightSolid, previewOperationColorDisabled, previewOperationHoverColor, motionDurationSlow, iconCls } = token;
+	const closeBg = new TinyColor(modalMaskBg).setAlpha(.1);
+	const closeBgHover = closeBg.clone().setAlpha(.2);
+	const operationBg = new TinyColor(modalMaskBg).setAlpha(.5);
+	const operationsBgHover = new TinyColor(modalMaskBg).setAlpha(.03);
+	return {
+		[`${previewCls}-footer`]: {
+			position: "fixed",
+			bottom: marginXL,
+			left: {
+				_skip_check_: true,
+				value: "50%"
+			},
+			display: "flex",
+			flexDirection: "column",
+			alignItems: "center",
+			color: token.previewOperationColor,
+			transform: "translateX(-50%)"
+		},
+		[`${previewCls}-progress`]: { marginBottom: margin },
+		[`${previewCls}-close`]: {
+			position: "fixed",
+			top: marginXL,
+			right: {
+				_skip_check_: true,
+				value: marginXL
+			},
+			display: "flex",
+			alignItems: "center",
+			justifyContent: "center",
+			color: colorTextLightSolid,
+			backgroundColor: closeBg.toRgbString(),
+			borderRadius: token.borderRadiusLG,
+			backdropFilter: "saturate(180%) blur(10px)",
+			width: token.sizeXL,
+			height: token.sizeXL,
+			outline: 0,
+			border: 0,
+			cursor: "pointer",
+			transition: `all ${motionDurationSlow}`,
+			"&:hover": { backgroundColor: closeBgHover.toRgbString() },
+			[`& > ${iconCls}`]: { fontSize: token.previewOperationSize }
+		},
+		[`${previewCls}-operations`]: {
+			display: "flex",
+			alignItems: "center",
+			gap: token.sizeXXS,
+			padding: token.paddingXXS,
+			border: `1px solid ${token.colorBorderSecondary}`,
+			backgroundColor: operationBg.toRgbString(),
+			borderRadius: token.borderRadiusLG,
+			backdropFilter: "saturate(150%) blur(10px)",
+			"&-operation": {
+				display: "flex",
+				alignItems: "center",
+				justifyContent: "center",
+				width: token.sizeXL + 4,
+				height: token.sizeXL + 4,
+				cursor: "pointer",
+				color: colorTextLightSolid,
+				borderRadius: token.borderRadiusSM,
+				transition: `all ${motionDurationSlow}`,
+				userSelect: "none",
+				[`&:not(${previewCls}-operations-operation-disabled):hover > ${iconCls}`]: { color: previewOperationHoverColor },
+				"&:hover": { backgroundColor: operationsBgHover.toRgbString() },
+				"&-disabled": {
+					color: previewOperationColorDisabled,
+					cursor: "not-allowed"
+				},
+				"&:first-of-type": { marginInlineStart: 0 },
+				[`& > ${iconCls}`]: { fontSize: token.previewOperationSize }
+			}
+		}
+	};
+}
+function genPreviewSwitchStyle(token) {
+	const { modalMaskBg, iconCls, previewOperationColorDisabled, previewCls, zIndexPopup, motionDurationSlow, colorTextLightSolid } = token;
+	const operationBg = new TinyColor(modalMaskBg).setAlpha(.1);
+	const operationBgHover = operationBg.clone().setAlpha(.2);
+	return {
+		[`${previewCls}-switch-left, ${previewCls}-switch-right`]: {
+			position: "fixed",
+			insetBlockStart: "50%",
+			zIndex: token.calc(zIndexPopup).add(1).equal(),
+			display: "flex",
+			alignItems: "center",
+			justifyContent: "center",
+			borderRadius: token.borderRadius,
+			backdropFilter: "saturate(180%) blur(10px)",
+			width: token.imagePreviewSwitchSize,
+			height: token.imagePreviewSwitchSize,
+			marginTop: token.calc(token.imagePreviewSwitchSize).mul(-1).div(2).equal(),
+			color: colorTextLightSolid,
+			background: operationBg.toRgbString(),
+			transform: `translateY(-50%)`,
+			cursor: "pointer",
+			transition: `all ${motionDurationSlow}`,
+			userSelect: "none",
+			"&:hover": { background: operationBgHover.toRgbString() },
+			"&-disabled": { "&, &:hover": {
+				color: previewOperationColorDisabled,
+				background: "transparent",
+				cursor: "not-allowed",
+				[`> ${iconCls}`]: { cursor: "not-allowed" }
+			} },
+			[`> ${iconCls}`]: { fontSize: token.previewOperationSize }
+		},
+		[`${previewCls}-switch-left`]: { insetInlineStart: token.marginSM },
+		[`${previewCls}-switch-right`]: { insetInlineEnd: token.marginSM }
+	};
+}
+const genImagePreviewStyle = (token) => {
+	const { motionEaseOut, motionDurationSlow } = token;
+	return {
+		[token.componentCls]: {
+			height: "100%",
+			textAlign: "center",
+			pointerEvents: "none",
+			"&-root": {
+				...box("fixed"),
+				zIndex: token.zIndexPopup,
+				overflow: "auto",
+				outline: 0,
+				WebkitOverflowScrolling: "touch"
+			},
+			"&-wrap": {
+				...box("fixed"),
+				zIndex: token.zIndexPopup,
+				overflow: "auto",
+				outline: 0,
+				WebkitOverflowScrolling: "touch"
+			},
+			"&-mask": {
+				...box("fixed"),
+				zIndex: token.zIndexPopupBase,
+				height: "100%",
+				backgroundColor: token.colorBgMask,
+				backdropFilter: "blur(8px)"
+			},
+			"&-body": {
+				...genBoxStyle(),
+				overflow: "hidden"
+			},
+			"&-img": {
+				maxWidth: "100%",
+				maxHeight: "70%",
+				verticalAlign: "middle",
+				transform: "scale3d(1, 1, 1)",
+				cursor: "grab",
+				transition: `transform ${motionDurationSlow} ${motionEaseOut} 0s`,
+				userSelect: "none",
+				"&-wrapper": {
+					...genBoxStyle(),
+					transition: `transform ${motionDurationSlow} ${motionEaseOut} 0s`,
+					display: "flex",
+					justifyContent: "center",
+					alignItems: "center",
+					"& > *": { pointerEvents: "auto" },
+					"&::before": {
+						display: "inline-block",
+						width: 1,
+						height: "50%",
+						marginInlineEnd: -1,
+						content: "\"\""
+					}
+				}
+			},
+			[`&-moving`]: { [`${token.componentCls}-view-img`]: {
+				cursor: "grabbing",
+				"&-wrapper": { transitionDuration: "0s" }
+			} },
+			[`&-mask-zoom-appear, &-mask-zoom-enter`]: {
+				animationName: viewFadeIn,
+				animationDuration: token.motionDurationSlow,
+				animationTimingFunction: "linear",
+				userSelect: "none"
+			},
+			[`&-mask-zoom-leave`]: {
+				animationName: viewFadeOut,
+				animationDuration: token.motionDurationSlow,
+				animationTimingFunction: "linear",
+				pointerEvents: "none"
+			},
+			[`&-zoom-appear, &-zoom-enter`]: {
+				animationName: viewZoomBadgeIn,
+				opacity: 0,
+				animationTimingFunction: token.motionEaseOutCirc,
+				animationFillMode: "both",
+				transform: "none",
+				animationDuration: token.motionDurationMid,
+				userSelect: "none"
+			},
+			[`&-zoom-enter-active`]: { animationPlayState: "running" },
+			[`&-zoom-leave`]: {
+				animationName: viewZoomBadgeOut,
+				animationDuration: token.motionDurationSlow,
+				animationTimingFunction: token.motionEaseInOutCirc,
+				animationFillMode: "both"
+			}
+		},
+		[`${token.componentCls}-root`]: { [`${token.componentCls}-wrapper`]: { zIndex: token.zIndexPopup } },
+		[`${token.componentCls}-operations-wrapper`]: {
+			position: "fixed",
+			insetBlockStart: 0,
+			insetInlineEnd: 0,
+			zIndex: token.calc(token.zIndexPopup).add(1).equal(),
+			width: "100%"
+		},
+		"&": [genPreviewOperationsStyle(token), genPreviewSwitchStyle(token)]
+	};
+};
+function useStyle(componentCls) {
+	return useStyle$1("ImageViewer", (token) => {
+		return [genImagePreviewStyle(mergeToken(token, {
+			zIndexPopup: token.zIndexPopupBase + 80,
+			previewOperationColor: new TinyColor(token.colorTextLightSolid).setAlpha(.65).toRgbString(),
+			previewOperationHoverColor: new TinyColor(token.colorTextLightSolid).setAlpha(.85).toRgbString(),
+			previewOperationColorDisabled: new TinyColor(token.colorTextLightSolid).setAlpha(.25).toRgbString(),
+			imagePreviewSwitchSize: token.sizeXL,
+			modalMaskBg: new TinyColor("#000").setAlpha(.45).toRgbString(),
+			previewOperationSize: token.fontSizeIcon * 1.5,
+			iconCls: ".anticon",
+			previewCls: token.componentCls
+		}))];
+	}, componentCls);
+}
+
+//#endregion
+export { genBoxStyle, genPreviewOperationsStyle, genPreviewSwitchStyle, resetComponent, useStyle, viewFadeIn, viewFadeOut };

package/dist/ImagePreview/typings.d.ts

@@ -0,0 +1,19 @@
+import { PreviewPropsIcons } from "./props.js";
+import { ComputedRef } from "vue";
+import { CustomRender, WithFalse } from "@gx-design-vue/pro-utils";
+
+//#region src/ImagePreview/typings.d.ts
+type MouseEventHandler = (e: MouseEvent) => void;
+interface PreviewUrl {
+  url: string;
+  loading: boolean;
+  canPreview: boolean;
+}
+interface ImagePreviewTools {
+  type: keyof PreviewPropsIcons;
+  icon: WithFalse<CustomRender>;
+  onClick: () => void;
+  disabled?: ComputedRef<boolean>;
+}
+//#endregion
+export { ImagePreviewTools, MouseEventHandler, PreviewUrl };

package/dist/ImagePreview/typings.js

@@ -0,0 +1 @@
+export {  };