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

package/dist/ImagePreview/props.js

@@ -1,53 +0,0 @@
-import { baseProps } from "../props.js";
-
-//#region src/ImagePreview/props.ts
-var props_default = {
-	urls: {
-		type: Array,
-		default: () => []
-	},
-	open: {
-		type: Boolean,
-		default: false
-	},
-	scaleStep: {
-		type: Number,
-		default: .5
-	},
-	minScale: {
-		type: Number,
-		default: .32
-	},
-	maxScale: {
-		type: Number,
-		default: 32
-	},
-	movable: {
-		type: Boolean,
-		default: true
-	},
-	disabled: Boolean,
-	zIndex: baseProps.zIndex,
-	current: baseProps.current,
-	infinite: baseProps.infinite,
-	getContainer: baseProps.getContainer,
-	onHideOnClickModal: {
-		type: Boolean,
-		default: true
-	},
-	countRender: [
-		Function,
-		Array,
-		Object
-	],
-	icons: {
-		type: Object,
-		default: () => ({})
-	},
-	onTransform: Function,
-	onOpenChange: Function,
-	"onUpdate:open": Function
-};
-
-//#endregion
-export { props_default as default };

package/dist/ImagePreview/style.d.ts

@@ -1,30 +0,0 @@
-import * as vue0 from "vue";
-import { CSSObject, Keyframe, ProAliasToken } from "@gx-design-vue/pro-provider";
-import * as ant_design_vue_es__util_type0 from "ant-design-vue/es/_util/type";
-
-//#region src/ImagePreview/style.d.ts
-interface ImageToken extends ProAliasToken {
-  previewCls: string;
-  zIndexPopup: number;
-  previewOperationSize: number;
-  modalMaskBg: string;
-  componentCls: string;
-  iconCls: string;
-  previewOperationHoverColor: string;
-  previewOperationColor: string;
-  imagePreviewSwitchSize: number;
-  previewOperationColorDisabled: string;
-}
-declare const viewFadeIn: Keyframe;
-declare const viewFadeOut: Keyframe;
-type PositionType = 'static' | 'relative' | 'fixed' | 'absolute' | 'sticky' | undefined;
-declare function genBoxStyle(position?: PositionType): CSSObject;
-declare function resetComponent(token: ProAliasToken): CSSObject;
-declare function genPreviewOperationsStyle(token: ImageToken): CSSObject;
-declare function genPreviewSwitchStyle(token: ImageToken): CSSObject;
-declare function useStyle(componentCls: string): {
-  wrapSSR: (node: ant_design_vue_es__util_type0.VueNode) => ant_design_vue_es__util_type0.VueNode;
-  hashId: vue0.ComputedRef<string>;
-};
-//#endregion
-export { ImageToken, PositionType, genBoxStyle, genPreviewOperationsStyle, genPreviewSwitchStyle, resetComponent, useStyle, viewFadeIn, viewFadeOut };

package/dist/ImagePreview/style.js

@@ -1,286 +0,0 @@
-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

@@ -1,19 +0,0 @@
-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

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