@uzum-tech/ui 0.1.0 → 0.1.2

package/lib/image/src/ImagePreview.js

@@ -0,0 +1,435 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const vue_1 = require("vue");
+const vdirs_1 = require("vdirs");
+const vooks_1 = require("vooks");
+const vueuc_1 = require("vueuc");
+const evtd_1 = require("evtd");
+const seemly_1 = require("seemly");
+const lodash_1 = require("lodash");
+const utils_1 = require("../../upload/src/utils");
+const icons_1 = require("../../_internal/icons");
+const _mixins_1 = require("../../_mixins");
+const _internal_1 = require("../../_internal");
+const tooltip_1 = require("../../tooltip");
+const styles_1 = require("../styles");
+const icons_2 = require("./icons");
+const interface_1 = require("./interface");
+const index_cssr_1 = __importDefault(require("./styles/index.cssr"));
+const BLEEDING = 32;
+exports.default = (0, vue_1.defineComponent)({
+    name: 'ImagePreview',
+    props: Object.assign(Object.assign({}, interface_1.imagePreviewSharedProps), { onNext: Function, onPrev: Function, clsPrefix: {
+            type: String,
+            required: true
+        } }),
+    setup(props) {
+        const themeRef = (0, _mixins_1.useTheme)('Image', '-image', index_cssr_1.default, styles_1.imageLight, props, (0, vue_1.toRef)(props, 'clsPrefix'));
+        let thumbnailEl = null;
+        const previewRef = (0, vue_1.ref)(null);
+        const previewWrapperRef = (0, vue_1.ref)(null);
+        const previewSrcRef = (0, vue_1.ref)(undefined);
+        const showRef = (0, vue_1.ref)(false);
+        const displayedRef = (0, vue_1.ref)(false);
+        const { localeRef } = (0, _mixins_1.useLocale)('Image');
+        function syncTransformOrigin() {
+            const { value: previewWrapper } = previewWrapperRef;
+            if (!thumbnailEl || !previewWrapper)
+                return;
+            const { style } = previewWrapper;
+            const tbox = thumbnailEl.getBoundingClientRect();
+            const tx = tbox.left + tbox.width / 2;
+            const ty = tbox.top + tbox.height / 2;
+            style.transformOrigin = `${tx}px ${ty}px`;
+        }
+        function handleKeydown(e) {
+            var _a, _b;
+            switch (e.key) {
+                case ' ':
+                    e.preventDefault();
+                    break;
+                case 'ArrowLeft':
+                    (_a = props.onPrev) === null || _a === void 0 ? void 0 : _a.call(props);
+                    break;
+                case 'ArrowRight':
+                    (_b = props.onNext) === null || _b === void 0 ? void 0 : _b.call(props);
+                    break;
+                case 'Escape':
+                    toggleShow();
+                    break;
+            }
+        }
+        (0, vue_1.watch)(showRef, (value) => {
+            if (value) {
+                (0, evtd_1.on)('keydown', document, handleKeydown);
+            }
+            else
+                (0, evtd_1.off)('keydown', document, handleKeydown);
+        });
+        (0, vue_1.onBeforeUnmount)(() => {
+            (0, evtd_1.off)('keydown', document, handleKeydown);
+        });
+        let startX = 0;
+        let startY = 0;
+        let offsetX = 0;
+        let offsetY = 0;
+        let startOffsetX = 0;
+        let startOffsetY = 0;
+        let mouseDownClientX = 0;
+        let mouseDownClientY = 0;
+        let dragging = false;
+        function handleMouseMove(e) {
+            const { clientX, clientY } = e;
+            offsetX = clientX - startX;
+            offsetY = clientY - startY;
+            (0, seemly_1.beforeNextFrameOnce)(derivePreviewStyle);
+        }
+        function getMoveStrategy(opts) {
+            const { mouseUpClientX, mouseUpClientY, mouseDownClientX, mouseDownClientY } = opts;
+            const deltaHorizontal = mouseDownClientX - mouseUpClientX;
+            const deltaVertical = mouseDownClientY - mouseUpClientY;
+            const moveVerticalDirection = `vertical${deltaVertical > 0 ? 'Top' : 'Bottom'}`;
+            const moveHorizontalDirection = `horizontal${deltaHorizontal > 0 ? 'Left' : 'Right'}`;
+            return {
+                moveVerticalDirection,
+                moveHorizontalDirection,
+                deltaHorizontal,
+                deltaVertical
+            };
+        }
+        // avoid image move outside viewport
+        function getDerivedOffset(moveStrategy) {
+            const { value: preview } = previewRef;
+            if (!preview)
+                return { offsetX: 0, offsetY: 0 };
+            const pbox = preview.getBoundingClientRect();
+            const { moveVerticalDirection, moveHorizontalDirection, deltaHorizontal, deltaVertical } = moveStrategy || {};
+            let nextOffsetX = 0;
+            let nextOffsetY = 0;
+            if (pbox.width <= window.innerWidth) {
+                nextOffsetX = 0;
+            }
+            else if (pbox.left > 0) {
+                nextOffsetX = (pbox.width - window.innerWidth) / 2;
+            }
+            else if (pbox.right < window.innerWidth) {
+                nextOffsetX = -(pbox.width - window.innerWidth) / 2;
+            }
+            else if (moveHorizontalDirection === 'horizontalRight') {
+                nextOffsetX = Math.min((pbox.width - window.innerWidth) / 2, startOffsetX - (deltaHorizontal !== null && deltaHorizontal !== void 0 ? deltaHorizontal : 0));
+            }
+            else {
+                nextOffsetX = Math.max(-((pbox.width - window.innerWidth) / 2), startOffsetX - (deltaHorizontal !== null && deltaHorizontal !== void 0 ? deltaHorizontal : 0));
+            }
+            if (pbox.height <= window.innerHeight) {
+                nextOffsetY = 0;
+            }
+            else if (pbox.top > 0) {
+                nextOffsetY = (pbox.height - window.innerHeight) / 2;
+            }
+            else if (pbox.bottom < window.innerHeight) {
+                nextOffsetY = -(pbox.height - window.innerHeight) / 2;
+            }
+            else if (moveVerticalDirection === 'verticalBottom') {
+                nextOffsetY = Math.min((pbox.height - window.innerHeight) / 2, startOffsetY - (deltaVertical !== null && deltaVertical !== void 0 ? deltaVertical : 0));
+            }
+            else {
+                nextOffsetY = Math.max(-((pbox.height - window.innerHeight) / 2), startOffsetY - (deltaVertical !== null && deltaVertical !== void 0 ? deltaVertical : 0));
+            }
+            return {
+                offsetX: nextOffsetX,
+                offsetY: nextOffsetY
+            };
+        }
+        function handleMouseUp(e) {
+            (0, evtd_1.off)('mousemove', document, handleMouseMove);
+            (0, evtd_1.off)('mouseup', document, handleMouseUp);
+            const { clientX: mouseUpClientX, clientY: mouseUpClientY } = e;
+            dragging = false;
+            const moveStrategy = getMoveStrategy({
+                mouseUpClientX,
+                mouseUpClientY,
+                mouseDownClientX,
+                mouseDownClientY
+            });
+            const offset = getDerivedOffset(moveStrategy);
+            offsetX = offset.offsetX;
+            offsetY = offset.offsetY;
+            derivePreviewStyle();
+        }
+        const imageContext = (0, vue_1.inject)(interface_1.imageContextKey, null);
+        function handlePreviewMousedown(e) {
+            var _a, _b;
+            (_b = (_a = imageContext === null || imageContext === void 0 ? void 0 : imageContext.previewedImgPropsRef.value) === null || _a === void 0 ? void 0 : _a.onMousedown) === null || _b === void 0 ? void 0 : _b.call(_a, e);
+            if (e.button !== 0)
+                return;
+            const { clientX, clientY } = e;
+            dragging = true;
+            startX = clientX - offsetX;
+            startY = clientY - offsetY;
+            startOffsetX = offsetX;
+            startOffsetY = offsetY;
+            mouseDownClientX = clientX;
+            mouseDownClientY = clientY;
+            derivePreviewStyle();
+            (0, evtd_1.on)('mousemove', document, handleMouseMove);
+            (0, evtd_1.on)('mouseup', document, handleMouseUp);
+        }
+        function handlePreviewDblclick(e) {
+            var _a, _b;
+            (_b = (_a = imageContext === null || imageContext === void 0 ? void 0 : imageContext.previewedImgPropsRef.value) === null || _a === void 0 ? void 0 : _a.onDblclick) === null || _b === void 0 ? void 0 : _b.call(_a, e);
+            const originalImageSizeScale = getOrignalImageSizeScale();
+            scale = scale === originalImageSizeScale ? 1 : originalImageSizeScale;
+            derivePreviewStyle();
+        }
+        const scaleRadix = 1.5;
+        let scaleExp = 0;
+        let scale = 1;
+        let rotate = 0;
+        function resetScale() {
+            scale = 1;
+            scaleExp = 0;
+        }
+        function handleSwitchPrev() {
+            var _a;
+            resetScale();
+            rotate = 0;
+            (_a = props.onPrev) === null || _a === void 0 ? void 0 : _a.call(props);
+        }
+        function handleSwitchNext() {
+            var _a;
+            resetScale();
+            rotate = 0;
+            (_a = props.onNext) === null || _a === void 0 ? void 0 : _a.call(props);
+        }
+        function rotateCounterclockwise() {
+            rotate -= 90;
+            derivePreviewStyle();
+        }
+        function rotateClockwise() {
+            rotate += 90;
+            derivePreviewStyle();
+        }
+        function getMaxScale() {
+            const { value: preview } = previewRef;
+            if (!preview)
+                return 1;
+            const { innerWidth, innerHeight } = window;
+            const heightMaxScale = Math.max(1, preview.naturalHeight / (innerHeight - BLEEDING));
+            const widthMaxScale = Math.max(1, preview.naturalWidth / (innerWidth - BLEEDING));
+            return Math.max(3, heightMaxScale * 2, widthMaxScale * 2);
+        }
+        function getOrignalImageSizeScale() {
+            const { value: preview } = previewRef;
+            if (!preview)
+                return 1;
+            const { innerWidth, innerHeight } = window;
+            const heightScale = preview.naturalHeight / (innerHeight - BLEEDING);
+            const widthScale = preview.naturalWidth / (innerWidth - BLEEDING);
+            if (heightScale < 1 && widthScale < 1) {
+                return 1;
+            }
+            return Math.max(heightScale, widthScale);
+        }
+        function zoomIn() {
+            const maxScale = getMaxScale();
+            if (scale < maxScale) {
+                scaleExp += 1;
+                scale = Math.min(maxScale, Math.pow(scaleRadix, scaleExp));
+                derivePreviewStyle();
+            }
+        }
+        function zoomOut() {
+            if (scale > 0.5) {
+                const originalScale = scale;
+                scaleExp -= 1;
+                scale = Math.max(0.5, Math.pow(scaleRadix, scaleExp));
+                const diff = originalScale - scale;
+                derivePreviewStyle(false);
+                const offset = getDerivedOffset();
+                scale += diff;
+                derivePreviewStyle(false);
+                scale -= diff;
+                offsetX = offset.offsetX;
+                offsetY = offset.offsetY;
+                derivePreviewStyle();
+            }
+        }
+        function handleDownloadClick() {
+            const src = previewSrcRef.value;
+            if (src) {
+                (0, utils_1.download)(src, undefined);
+            }
+        }
+        function derivePreviewStyle(transition = true) {
+            var _a;
+            const { value: preview } = previewRef;
+            if (!preview)
+                return;
+            const { style } = preview;
+            const controlledStyle = (0, vue_1.normalizeStyle)((_a = imageContext === null || imageContext === void 0 ? void 0 : imageContext.previewedImgPropsRef.value) === null || _a === void 0 ? void 0 : _a.style);
+            let controlledStyleString = '';
+            if (typeof controlledStyle === 'string') {
+                controlledStyleString = controlledStyle + ';';
+            }
+            else {
+                for (const key in controlledStyle) {
+                    controlledStyleString += `${(0, lodash_1.kebabCase)(key)}: ${controlledStyle[key]};`;
+                }
+            }
+            const transformStyle = `transform-origin: center; transform: translateX(${offsetX}px) translateY(${offsetY}px) rotate(${rotate}deg) scale(${scale});`;
+            if (dragging) {
+                style.cssText =
+                    controlledStyleString +
+                        'cursor: grabbing; transition: none;' +
+                        transformStyle;
+            }
+            else {
+                style.cssText =
+                    controlledStyleString +
+                        'cursor: grab;' +
+                        transformStyle +
+                        (transition ? '' : 'transition: none;');
+            }
+            if (!transition) {
+                void preview.offsetHeight;
+            }
+        }
+        function toggleShow() {
+            showRef.value = !showRef.value;
+            displayedRef.value = true;
+        }
+        function resizeToOrignalImageSize() {
+            scale = getOrignalImageSizeScale();
+            scaleExp = Math.ceil(Math.log(scale) / Math.log(scaleRadix));
+            offsetX = 0;
+            offsetY = 0;
+            derivePreviewStyle();
+        }
+        const exposedMethods = {
+            setPreviewSrc: (src) => {
+                previewSrcRef.value = src;
+            },
+            setThumbnailEl: (el) => {
+                thumbnailEl = el;
+            },
+            toggleShow
+        };
+        function withTooltip(node, tooltipKey) {
+            if (props.showToolbarTooltip) {
+                const { value: theme } = themeRef;
+                return ((0, vue_1.h)(tooltip_1.UTooltip, { to: false, theme: theme.peers.Tooltip, themeOverrides: theme.peerOverrides.Tooltip, keepAliveOnHover: false }, {
+                    default: () => {
+                        return localeRef.value[tooltipKey];
+                    },
+                    trigger: () => node
+                }));
+            }
+            else {
+                return node;
+            }
+        }
+        const cssVarsRef = (0, vue_1.computed)(() => {
+            const { common: { cubicBezierEaseInOut }, self: { toolbarIconColor, toolbarBorderRadius, toolbarBoxShadow, toolbarColor } } = themeRef.value;
+            return {
+                '--u-bezier': cubicBezierEaseInOut,
+                '--u-toolbar-icon-color': toolbarIconColor,
+                '--u-toolbar-color': toolbarColor,
+                '--u-toolbar-border-radius': toolbarBorderRadius,
+                '--u-toolbar-box-shadow': toolbarBoxShadow
+            };
+        });
+        const { inlineThemeDisabled } = (0, _mixins_1.useConfig)();
+        const themeClassHandle = inlineThemeDisabled
+            ? (0, _mixins_1.useThemeClass)('image-preview', undefined, cssVarsRef, props)
+            : undefined;
+        return Object.assign({ previewRef,
+            previewWrapperRef, previewSrc: previewSrcRef, show: showRef, appear: (0, vooks_1.useIsMounted)(), displayed: displayedRef, previewedImgProps: imageContext === null || imageContext === void 0 ? void 0 : imageContext.previewedImgPropsRef, handleWheel(e) {
+                e.preventDefault();
+            },
+            handlePreviewMousedown,
+            handlePreviewDblclick,
+            syncTransformOrigin, handleAfterLeave: () => {
+                resetScale();
+                rotate = 0;
+                displayedRef.value = false;
+            }, handleDragStart: (e) => {
+                var _a, _b;
+                (_b = (_a = imageContext === null || imageContext === void 0 ? void 0 : imageContext.previewedImgPropsRef.value) === null || _a === void 0 ? void 0 : _a.onDragstart) === null || _b === void 0 ? void 0 : _b.call(_a, e);
+                e.preventDefault();
+            }, zoomIn,
+            zoomOut,
+            handleDownloadClick,
+            rotateCounterclockwise,
+            rotateClockwise,
+            handleSwitchPrev,
+            handleSwitchNext,
+            withTooltip,
+            resizeToOrignalImageSize, cssVars: inlineThemeDisabled ? undefined : cssVarsRef, themeClass: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.themeClass, onRender: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.onRender }, exposedMethods);
+    },
+    render() {
+        var _a, _b;
+        const { clsPrefix } = this;
+        return ((0, vue_1.h)(vue_1.Fragment, null, (_b = (_a = this.$slots).default) === null || _b === void 0 ? void 0 :
+            _b.call(_a),
+            (0, vue_1.h)(vueuc_1.LazyTeleport, { show: this.show }, {
+                default: () => {
+                    var _a;
+                    if (!(this.show || this.displayed)) {
+                        return null;
+                    }
+                    (_a = this.onRender) === null || _a === void 0 ? void 0 : _a.call(this);
+                    return (0, vue_1.withDirectives)((0, vue_1.h)("div", { class: [
+                            `${clsPrefix}-image-preview-container`,
+                            this.themeClass
+                        ], style: this.cssVars, onWheel: this.handleWheel },
+                        (0, vue_1.h)(vue_1.Transition, { name: "fade-in-transition", appear: this.appear }, {
+                            default: () => this.show ? ((0, vue_1.h)("div", { class: `${clsPrefix}-image-preview-overlay`, onClick: this.toggleShow })) : null
+                        }),
+                        this.showToolbar ? ((0, vue_1.h)(vue_1.Transition, { name: "fade-in-transition", appear: this.appear }, {
+                            default: () => {
+                                if (!this.show)
+                                    return null;
+                                const { withTooltip } = this;
+                                return ((0, vue_1.h)("div", { class: `${clsPrefix}-image-preview-toolbar` },
+                                    this.onPrev ? ((0, vue_1.h)(vue_1.Fragment, null,
+                                        withTooltip((0, vue_1.h)(_internal_1.UBaseIcon, { clsPrefix: clsPrefix, onClick: this.handleSwitchPrev }, { default: () => icons_2.prevIcon }), 'tipPrevious'),
+                                        withTooltip((0, vue_1.h)(_internal_1.UBaseIcon, { clsPrefix: clsPrefix, onClick: this.handleSwitchNext }, { default: () => icons_2.nextIcon }), 'tipNext'))) : null,
+                                    withTooltip((0, vue_1.h)(_internal_1.UBaseIcon, { clsPrefix: clsPrefix, onClick: this.rotateCounterclockwise }, {
+                                        default: () => ((0, vue_1.h)(icons_1.RotateCounterclockwiseIcon, null))
+                                    }), 'tipCounterclockwise'),
+                                    withTooltip((0, vue_1.h)(_internal_1.UBaseIcon, { clsPrefix: clsPrefix, onClick: this.rotateClockwise }, {
+                                        default: () => (0, vue_1.h)(icons_1.RotateClockwiseIcon, null)
+                                    }), 'tipClockwise'),
+                                    withTooltip((0, vue_1.h)(_internal_1.UBaseIcon, { clsPrefix: clsPrefix, onClick: this.resizeToOrignalImageSize }, {
+                                        default: () => {
+                                            return (0, vue_1.h)(icons_1.ResizeSmallIcon, null);
+                                        }
+                                    }), 'tipOriginalSize'),
+                                    withTooltip((0, vue_1.h)(_internal_1.UBaseIcon, { clsPrefix: clsPrefix, onClick: this.zoomOut }, { default: () => (0, vue_1.h)(icons_1.ZoomOutIcon, null) }), 'tipZoomOut'),
+                                    withTooltip((0, vue_1.h)(_internal_1.UBaseIcon, { clsPrefix: clsPrefix, onClick: this.zoomIn }, { default: () => (0, vue_1.h)(icons_1.ZoomInIcon, null) }), 'tipZoomIn'),
+                                    withTooltip((0, vue_1.h)(_internal_1.UBaseIcon, { clsPrefix: clsPrefix, onClick: this.handleDownloadClick }, { default: () => icons_2.downloadIcon }), 'tipDownload'),
+                                    withTooltip((0, vue_1.h)(_internal_1.UBaseIcon, { clsPrefix: clsPrefix, onClick: this.toggleShow }, { default: () => icons_2.closeIcon }), 'tipClose')));
+                            }
+                        })) : null,
+                        (0, vue_1.h)(vue_1.Transition, { name: "fade-in-scale-up-transition", onAfterLeave: this.handleAfterLeave, appear: this.appear, 
+                            // BUG:
+                            // onEnter will be called twice, I don't know why
+                            // Maybe it is a bug of vue
+                            onEnter: this.syncTransformOrigin, onBeforeLeave: this.syncTransformOrigin }, {
+                            default: () => {
+                                const { previewedImgProps = {} } = this;
+                                return (0, vue_1.withDirectives)((0, vue_1.h)("div", { class: `${clsPrefix}-image-preview-wrapper`, ref: "previewWrapperRef" },
+                                    (0, vue_1.h)("img", Object.assign({}, previewedImgProps, { draggable: false, onMousedown: this.handlePreviewMousedown, onDblclick: this.handlePreviewDblclick, class: [
+                                            `${clsPrefix}-image-preview`,
+                                            previewedImgProps.class
+                                        ], key: this.previewSrc, src: this.previewSrc, ref: "previewRef", onDragstart: this.handleDragStart }))), [[vue_1.vShow, this.show]]);
+                            }
+                        })), [[vdirs_1.zindexable, { enabled: this.show }]]);
+                }
+            })));
+    }
+});

package/lib/image/src/icons.d.ts

@@ -0,0 +1,4 @@
+export declare const prevIcon: JSX.Element;
+export declare const nextIcon: JSX.Element;
+export declare const closeIcon: JSX.Element;
+export declare const downloadIcon: JSX.Element;

package/lib/image/src/icons.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.downloadIcon = exports.closeIcon = exports.nextIcon = exports.prevIcon = void 0;
+const vue_1 = require("vue");
+exports.prevIcon = ((0, vue_1.h)("svg", { viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+    (0, vue_1.h)("path", { d: "M6 5C5.75454 5 5.55039 5.17688 5.50806 5.41012L5.5 5.5V14.5C5.5 14.7761 5.72386 15 6 15C6.24546 15 6.44961 14.8231 6.49194 14.5899L6.5 14.5V5.5C6.5 5.22386 6.27614 5 6 5ZM13.8536 5.14645C13.68 4.97288 13.4106 4.9536 13.2157 5.08859L13.1464 5.14645L8.64645 9.64645C8.47288 9.82001 8.4536 10.0894 8.58859 10.2843L8.64645 10.3536L13.1464 14.8536C13.3417 15.0488 13.6583 15.0488 13.8536 14.8536C14.0271 14.68 14.0464 14.4106 13.9114 14.2157L13.8536 14.1464L9.70711 10L13.8536 5.85355C14.0488 5.65829 14.0488 5.34171 13.8536 5.14645Z", fill: "currentColor" })));
+exports.nextIcon = ((0, vue_1.h)("svg", { viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+    (0, vue_1.h)("path", { d: "M13.5 5C13.7455 5 13.9496 5.17688 13.9919 5.41012L14 5.5V14.5C14 14.7761 13.7761 15 13.5 15C13.2545 15 13.0504 14.8231 13.0081 14.5899L13 14.5V5.5C13 5.22386 13.2239 5 13.5 5ZM5.64645 5.14645C5.82001 4.97288 6.08944 4.9536 6.28431 5.08859L6.35355 5.14645L10.8536 9.64645C11.0271 9.82001 11.0464 10.0894 10.9114 10.2843L10.8536 10.3536L6.35355 14.8536C6.15829 15.0488 5.84171 15.0488 5.64645 14.8536C5.47288 14.68 5.4536 14.4106 5.58859 14.2157L5.64645 14.1464L9.79289 10L5.64645 5.85355C5.45118 5.65829 5.45118 5.34171 5.64645 5.14645Z", fill: "currentColor" })));
+exports.closeIcon = ((0, vue_1.h)("svg", { viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+    (0, vue_1.h)("path", { d: "M4.089 4.216l.057-.07a.5.5 0 0 1 .638-.057l.07.057L10 9.293l5.146-5.147a.5.5 0 0 1 .638-.057l.07.057a.5.5 0 0 1 .057.638l-.057.07L10.707 10l5.147 5.146a.5.5 0 0 1 .057.638l-.057.07a.5.5 0 0 1-.638.057l-.07-.057L10 10.707l-5.146 5.147a.5.5 0 0 1-.638.057l-.07-.057a.5.5 0 0 1-.057-.638l.057-.07L9.293 10L4.146 4.854a.5.5 0 0 1-.057-.638l.057-.07l-.057.07z", fill: "currentColor" })));
+exports.downloadIcon = ((0, vue_1.h)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "32", height: "32", viewBox: "0 0 1024 1024" },
+    (0, vue_1.h)("path", { fill: "currentColor", d: "M505.7 661a8 8 0 0 0 12.6 0l112-141.7c4.1-5.2.4-12.9-6.3-12.9h-74.1V168c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v338.3H400c-6.7 0-10.4 7.7-6.3 12.9l112 141.8zM878 626h-60c-4.4 0-8 3.6-8 8v154H214V634c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v198c0 17.7 14.3 32 32 32h684c17.7 0 32-14.3 32-32V634c0-4.4-3.6-8-8-8z" })));

package/lib/image/src/interface.d.ts

@@ -0,0 +1,137 @@
+import type { ImgHTMLAttributes, PropType, Ref } from 'vue';
+export interface MoveStrategy {
+    moveVerticalDirection: 'verticalTop' | 'verticalBottom';
+    moveHorizontalDirection: 'horizontalLeft' | 'horizontalRight';
+    deltaHorizontal: number;
+    deltaVertical: number;
+}
+export declare const imagePreviewSharedProps: {
+    onPreviewPrev: PropType<() => void>;
+    onPreviewNext: PropType<() => void>;
+    showToolbar: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    showToolbarTooltip: BooleanConstructor;
+    theme: PropType<import("../../_mixins").Theme<"Image", {
+        toolbarIconColor: string;
+        toolbarColor: string;
+        toolbarBoxShadow: string;
+        toolbarBorderRadius: string;
+    }, {
+        Tooltip: import("../../_mixins").Theme<"Tooltip", {
+            borderRadius: string;
+            color: string;
+            textColor: string;
+            padding: string;
+            textPadding: string;
+            titleSize: string;
+            titleWeight: string;
+            titleLineHeight: string;
+            subtitleSize: string;
+            subtitleMargin: string;
+            subtitleWeight: string;
+            subtitleLineHeight: string;
+            iconSize: string;
+            arrowSpace: string;
+            noArrowSpace: string;
+        }, {
+            Popover: import("../../_mixins").Theme<"Popover", {
+                fontSize: string;
+                borderRadius: string;
+                color: string;
+                dividerColor: string;
+                textColor: string;
+                boxShadow: string;
+                space: string;
+                spaceArrow: string;
+                arrowOffset: string;
+                arrowOffsetVertical: string;
+                arrowHeight: string;
+                padding: string;
+            }, any>;
+        }>;
+    }>>;
+    themeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Image", {
+        toolbarIconColor: string;
+        toolbarColor: string;
+        toolbarBoxShadow: string;
+        toolbarBorderRadius: string;
+    }, {
+        Tooltip: import("../../_mixins").Theme<"Tooltip", {
+            borderRadius: string;
+            color: string;
+            textColor: string;
+            padding: string;
+            textPadding: string;
+            titleSize: string;
+            titleWeight: string;
+            titleLineHeight: string;
+            subtitleSize: string;
+            subtitleMargin: string;
+            subtitleWeight: string;
+            subtitleLineHeight: string;
+            iconSize: string;
+            arrowSpace: string;
+            noArrowSpace: string;
+        }, {
+            Popover: import("../../_mixins").Theme<"Popover", {
+                fontSize: string;
+                borderRadius: string;
+                color: string;
+                dividerColor: string;
+                textColor: string;
+                boxShadow: string;
+                space: string;
+                spaceArrow: string;
+                arrowOffset: string;
+                arrowOffsetVertical: string;
+                arrowHeight: string;
+                padding: string;
+            }, any>;
+        }>;
+    }>>>;
+    builtinThemeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Image", {
+        toolbarIconColor: string;
+        toolbarColor: string;
+        toolbarBoxShadow: string;
+        toolbarBorderRadius: string;
+    }, {
+        Tooltip: import("../../_mixins").Theme<"Tooltip", {
+            borderRadius: string;
+            color: string;
+            textColor: string;
+            padding: string;
+            textPadding: string;
+            titleSize: string;
+            titleWeight: string;
+            titleLineHeight: string;
+            subtitleSize: string;
+            subtitleMargin: string;
+            subtitleWeight: string;
+            subtitleLineHeight: string;
+            iconSize: string;
+            arrowSpace: string;
+            noArrowSpace: string;
+        }, {
+            Popover: import("../../_mixins").Theme<"Popover", {
+                fontSize: string;
+                borderRadius: string;
+                color: string;
+                dividerColor: string;
+                textColor: string;
+                boxShadow: string;
+                space: string;
+                spaceArrow: string;
+                arrowOffset: string;
+                arrowOffsetVertical: string;
+                arrowHeight: string;
+                padding: string;
+            }, any>;
+        }>;
+    }>>>;
+};
+export interface ImageContext {
+    previewedImgPropsRef: Ref<ImgHTMLAttributes | undefined>;
+}
+export declare const imageContextKey: import("vue").InjectionKey<ImageContext>;

package/lib/image/src/interface.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.imageContextKey = exports.imagePreviewSharedProps = void 0;
+const _mixins_1 = require("../../_mixins");
+const _utils_1 = require("../../_utils");
+exports.imagePreviewSharedProps = Object.assign(Object.assign({}, _mixins_1.useTheme.props), { onPreviewPrev: Function, onPreviewNext: Function, showToolbar: { type: Boolean, default: true }, showToolbarTooltip: Boolean });
+exports.imageContextKey = (0, _utils_1.createInjectionKey)('u-image');

package/lib/image/src/styles/index.cssr.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("css-render").CNode;
+export default _default;

package/lib/image/src/styles/index.cssr.js

@@ -0,0 +1,73 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+const cssr_1 = require("../../../_utils/cssr");
+const fade_in_cssr_1 = require("../../../_styles/transitions/fade-in.cssr");
+const fade_in_scale_up_cssr_1 = require("../../../_styles/transitions/fade-in-scale-up.cssr");
+// vars:
+// --u-toolbar-icon-color
+// --u-toolbar-color
+// --u-toolbar-border-radius
+// --u-toolbar-box-shadow
+// --u-bezier
+exports.default = (0, cssr_1.c)([(0, cssr_1.c)('body >', [(0, cssr_1.cB)('image-container', 'position: fixed;')]), (0, cssr_1.cB)('image-preview-container', `
+ position: fixed;
+ left: 0;
+ right: 0;
+ top: 0;
+ bottom: 0;
+ display: flex;
+ `), (0, cssr_1.cB)('image-preview-overlay', `
+ z-index: -1;
+ position: absolute;
+ left: 0;
+ right: 0;
+ top: 0;
+ bottom: 0;
+ background: rgba(0, 0, 0, .3);
+ `, [(0, fade_in_cssr_1.fadeInTransition)()]), (0, cssr_1.cB)('image-preview-toolbar', `
+ z-index: 1;
+ position: absolute;
+ left: 50%;
+ transform: translateX(-50%);
+ border-radius: var(--u-toolbar-border-radius);
+ height: 48px;
+ bottom: 40px;
+ padding: 0 12px;
+ background: var(--u-toolbar-color);
+ box-shadow: var(--u-toolbar-box-shadow);
+ color: var(--u-toolbar-icon-color);
+ transition: color .3s var(--u-bezier);
+ display: flex;
+ align-items: center;
+ `, [(0, cssr_1.cB)('base-icon', `
+ padding: 0 8px;
+ font-size: 28px;
+ cursor: pointer;
+ `), (0, fade_in_cssr_1.fadeInTransition)()]), (0, cssr_1.cB)('image-preview-wrapper', `
+ position: absolute;
+ left: 0;
+ right: 0;
+ top: 0;
+ bottom: 0;
+ display: flex;
+ pointer-events: none;
+ `, [(0, fade_in_scale_up_cssr_1.fadeInScaleUpTransition)()]), (0, cssr_1.cB)('image-preview', `
+ user-select: none;
+ -webkit-user-select: none;
+ pointer-events: all;
+ margin: auto;
+ max-height: calc(100vh - 32px);
+ max-width: calc(100vw - 32px);
+ transition: transform .3s var(--u-bezier);
+ `), (0, cssr_1.cB)('image', `
+ display: inline-flex;
+ max-height: 100%;
+ max-width: 100%;
+ `, [(0, cssr_1.cNotM)('preview-disabled', `
+ cursor: pointer;
+ `), (0, cssr_1.c)('img', `
+ border-radius: inherit;
+ `)])]);