@windrun-huaiin/third-ui 12.1.0 → 13.0.1

package/dist/node_modules/.pnpm/react-medium-image-zoom@5.4.1_react-dom@19.2.4_react@19.2.4__react@19.2.4/node_modules/react-medium-image-zoom/dist/Controlled.mjs

@@ -0,0 +1,435 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { IEnlarge, ICompress } from './icons.mjs';
+import { getStyleGhost, getImgSrc, testImg, testImgLoaded, testSvg, adjustSvgIDs, testDiv, getImgAlt, getStyleModalImg } from './utils.mjs';
+
+const IMAGE_QUERY = ['img', 'svg', '[role="img"]', '[data-zoom]']
+    .map(x => `${x}:not([aria-hidden="true"])`)
+    .join(',');
+const defaultBodyAttrs = {
+    overflow: '',
+    width: '',
+};
+function Controlled(props) {
+    return React.createElement(ControlledBase, { ...props });
+}
+class ControlledBase extends React.Component {
+    constructor() {
+        super(...arguments);
+        this.state = {
+            id: '',
+            isZoomImgLoaded: false,
+            loadedImgEl: undefined,
+            modalState: "UNLOADED",
+            shouldRefresh: false,
+            styleGhost: {},
+        };
+        this.refContent = React.createRef();
+        this.refDialog = React.createRef();
+        this.refModalContent = React.createRef();
+        this.refModalImg = React.createRef();
+        this.refWrap = React.createRef();
+        this.imgEl = null;
+        this.isScaling = false;
+        this.prevBodyAttrs = defaultBodyAttrs;
+        this.styleModalImg = {};
+        this.handleModalStateChange = (prevModalState) => {
+            const { modalState } = this.state;
+            if (prevModalState !== "LOADING" &&
+                modalState === "LOADING") {
+                this.loadZoomImg();
+                window.addEventListener('resize', this.handleResize, { passive: true });
+                window.addEventListener('touchstart', this.handleTouchStart, {
+                    passive: true,
+                });
+                window.addEventListener('touchmove', this.handleTouchMove, {
+                    passive: true,
+                });
+                window.addEventListener('touchend', this.handleTouchEnd, {
+                    passive: true,
+                });
+                window.addEventListener('touchcancel', this.handleTouchCancel, {
+                    passive: true,
+                });
+                document.addEventListener('keydown', this.handleKeyDown, true);
+            }
+            else if (prevModalState !== "LOADED" &&
+                modalState === "LOADED") {
+                window.addEventListener('wheel', this.handleWheel, { passive: true });
+            }
+            else if (prevModalState !== "UNLOADING" &&
+                modalState === "UNLOADING") {
+                this.ensureImgTransitionEnd();
+                window.removeEventListener('wheel', this.handleWheel);
+                window.removeEventListener('touchstart', this.handleTouchStart);
+                window.removeEventListener('touchmove', this.handleTouchMove);
+                window.removeEventListener('touchend', this.handleTouchEnd);
+                window.removeEventListener('touchcancel', this.handleTouchCancel);
+                document.removeEventListener('keydown', this.handleKeyDown, true);
+            }
+            else if (prevModalState !== "UNLOADED" &&
+                modalState === "UNLOADED") {
+                this.bodyScrollEnable();
+                window.removeEventListener('resize', this.handleResize);
+                this.refModalImg.current?.removeEventListener?.('transitionend', this.handleImgTransitionEnd);
+                this.refDialog.current?.close?.();
+            }
+        };
+        this.getDialogContainer = () => {
+            let el = document.querySelector('[data-rmiz-portal]');
+            if (el == null) {
+                el = document.createElement('div');
+                el.setAttribute('data-rmiz-portal', '');
+                document.body.appendChild(el);
+            }
+            return el;
+        };
+        this.setId = () => {
+            const gen4 = () => Math.random().toString(16).slice(-4);
+            this.setState({ id: gen4() + gen4() + gen4() });
+        };
+        this.setAndTrackImg = () => {
+            const contentEl = this.refContent.current;
+            if (!contentEl)
+                return;
+            this.imgEl = contentEl.querySelector(IMAGE_QUERY);
+            if (this.imgEl) {
+                this.contentNotFoundChangeObserver?.disconnect?.();
+                this.imgEl.addEventListener('load', this.handleImgLoad);
+                this.imgEl.addEventListener('click', this.handleZoom);
+                if (!this.state.loadedImgEl) {
+                    this.handleImgLoad();
+                }
+                this.imgElResizeObserver = new ResizeObserver(entries => {
+                    const entry = entries[0];
+                    if (entry?.target) {
+                        this.imgEl = entry.target;
+                        this.setState({ styleGhost: getStyleGhost(this.imgEl) });
+                    }
+                });
+                this.imgElResizeObserver.observe(this.imgEl);
+                if (!this.contentChangeObserver) {
+                    this.contentChangeObserver = new MutationObserver(() => {
+                        this.setState({ styleGhost: getStyleGhost(this.imgEl) });
+                    });
+                    this.contentChangeObserver.observe(contentEl, {
+                        attributes: true,
+                        childList: true,
+                        subtree: true,
+                    });
+                }
+            }
+            else if (!this.contentNotFoundChangeObserver) {
+                this.contentNotFoundChangeObserver = new MutationObserver(this.setAndTrackImg);
+                this.contentNotFoundChangeObserver.observe(contentEl, {
+                    childList: true,
+                    subtree: true,
+                });
+            }
+        };
+        this.handleIfZoomChanged = (prevIsZoomed) => {
+            const { isZoomed } = this.props;
+            if (!prevIsZoomed && isZoomed) {
+                this.zoom();
+            }
+            else if (prevIsZoomed && !isZoomed) {
+                this.unzoom();
+            }
+        };
+        this.handleImgLoad = () => {
+            const imgSrc = getImgSrc(this.imgEl);
+            if (!imgSrc)
+                return;
+            const img = new Image();
+            if (testImg(this.imgEl)) {
+                img.sizes = this.imgEl.sizes;
+                img.srcset = this.imgEl.srcset;
+                img.crossOrigin = this.imgEl.crossOrigin;
+            }
+            img.src = imgSrc;
+            const setLoaded = () => {
+                this.setState({
+                    loadedImgEl: img,
+                    styleGhost: getStyleGhost(this.imgEl),
+                });
+            };
+            img
+                .decode()
+                .then(setLoaded)
+                .catch(() => {
+                if (testImgLoaded(img)) {
+                    setLoaded();
+                    return;
+                }
+                img.onload = setLoaded;
+            });
+        };
+        this.handleZoom = (e) => {
+            if (!this.props.isDisabled && this.hasImage()) {
+                this.props.onZoomChange?.(true, { event: e });
+            }
+        };
+        this.handleUnzoom = (e) => {
+            if (!this.props.isDisabled) {
+                this.props.onZoomChange?.(false, { event: e });
+            }
+        };
+        this.handleBtnUnzoomClick = (e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            this.handleUnzoom(e);
+        };
+        this.handleDialogCancel = (e) => {
+            e.preventDefault();
+        };
+        this.handleDialogClick = (e) => {
+            if (e.target === this.refModalContent.current ||
+                e.target === this.refModalImg.current) {
+                e.stopPropagation();
+                this.handleUnzoom(e);
+            }
+        };
+        this.handleDialogClose = (e) => {
+            e.stopPropagation();
+            this.handleUnzoom(e);
+        };
+        this.handleKeyDown = (e) => {
+            if (e.key === 'Escape' || e.keyCode === 27) {
+                e.preventDefault();
+                e.stopPropagation();
+                this.handleUnzoom(e);
+            }
+        };
+        this.handleWheel = (e) => {
+            if (e.ctrlKey)
+                return;
+            e.stopPropagation();
+            queueMicrotask(() => {
+                this.handleUnzoom(e);
+            });
+        };
+        this.handleTouchStart = (e) => {
+            if (e.touches.length > 1) {
+                this.isScaling = true;
+                return;
+            }
+            if (e.changedTouches.length === 1 && e.changedTouches[0]) {
+                this.touchYStart = e.changedTouches[0].screenY;
+            }
+        };
+        this.handleTouchMove = (e) => {
+            const browserScale = window.visualViewport?.scale ?? 1;
+            if (this.props.canSwipeToUnzoom &&
+                !this.isScaling &&
+                browserScale <= 1 &&
+                this.touchYStart != null &&
+                e.changedTouches[0]) {
+                this.touchYEnd = e.changedTouches[0].screenY;
+                const max = Math.max(this.touchYStart, this.touchYEnd);
+                const min = Math.min(this.touchYStart, this.touchYEnd);
+                const delta = Math.abs(max - min);
+                if (delta > this.props.swipeToUnzoomThreshold) {
+                    this.touchYStart = undefined;
+                    this.touchYEnd = undefined;
+                    this.handleUnzoom(e);
+                }
+            }
+        };
+        this.handleTouchEnd = () => {
+            this.isScaling = false;
+            this.touchYStart = undefined;
+            this.touchYEnd = undefined;
+        };
+        this.handleTouchCancel = () => {
+            this.isScaling = false;
+            this.touchYStart = undefined;
+            this.touchYEnd = undefined;
+        };
+        this.handleResize = () => {
+            this.setState({ shouldRefresh: true });
+        };
+        this.hasImage = () => {
+            return (this.imgEl &&
+                (this.state.loadedImgEl || testSvg(this.imgEl)) &&
+                window.getComputedStyle(this.imgEl).display !== 'none');
+        };
+        this.zoom = () => {
+            this.bodyScrollDisable();
+            this.refDialog.current?.showModal?.();
+            this.refModalImg.current?.addEventListener?.('transitionend', this.handleImgTransitionEnd);
+            this.setState({ modalState: "LOADING" });
+        };
+        this.unzoom = () => {
+            this.setState({ modalState: "UNLOADING" });
+        };
+        this.handleImgTransitionEnd = () => {
+            clearTimeout(this.timeoutTransitionEnd);
+            if (this.state.modalState === "LOADING") {
+                this.setState({ modalState: "LOADED" });
+            }
+            else if (this.state.modalState === "UNLOADING") {
+                this.setState({ shouldRefresh: false, modalState: "UNLOADED" });
+            }
+        };
+        this.ensureImgTransitionEnd = () => {
+            if (this.refModalImg.current) {
+                const td = window.getComputedStyle(this.refModalImg.current).transitionDuration;
+                const tdFloat = parseFloat(td);
+                if (tdFloat) {
+                    const tdMs = tdFloat * (td.endsWith('ms') ? 1 : 1000) + 50;
+                    this.timeoutTransitionEnd = setTimeout(this.handleImgTransitionEnd, tdMs);
+                }
+            }
+        };
+        this.bodyScrollDisable = () => {
+            this.prevBodyAttrs = {
+                overflow: document.body.style.overflow,
+                width: document.body.style.width,
+            };
+            const clientWidth = document.body.clientWidth;
+            document.body.style.overflow = 'hidden';
+            document.body.style.width = `${clientWidth}px`;
+        };
+        this.bodyScrollEnable = () => {
+            document.body.style.width = this.prevBodyAttrs.width;
+            document.body.style.overflow = this.prevBodyAttrs.overflow;
+            this.prevBodyAttrs = defaultBodyAttrs;
+        };
+        this.loadZoomImg = () => {
+            const { props: { zoomImg }, } = this;
+            const zoomImgSrc = zoomImg?.src;
+            if (zoomImgSrc) {
+                const img = new Image();
+                img.sizes = zoomImg?.sizes ?? '';
+                img.srcset = zoomImg?.srcSet ?? '';
+                img.crossOrigin = zoomImg?.crossOrigin ?? undefined;
+                img.src = zoomImgSrc;
+                const setLoaded = () => {
+                    this.setState({ isZoomImgLoaded: true });
+                };
+                img
+                    .decode()
+                    .then(setLoaded)
+                    .catch(() => {
+                    if (testImgLoaded(img)) {
+                        setLoaded();
+                        return;
+                    }
+                    img.onload = setLoaded;
+                });
+            }
+        };
+        this.UNSAFE_handleSvg = () => {
+            const { imgEl, refModalImg, styleModalImg } = this;
+            if (testSvg(imgEl)) {
+                const svgEl = imgEl.cloneNode(true);
+                adjustSvgIDs(svgEl);
+                svgEl.style.width = `${styleModalImg.width || 0}px`;
+                svgEl.style.height = `${styleModalImg.height || 0}px`;
+                svgEl.addEventListener('click', this.handleUnzoom);
+                refModalImg.current?.firstChild?.remove?.();
+                refModalImg.current?.appendChild?.(svgEl);
+            }
+        };
+    }
+    render() {
+        const { handleBtnUnzoomClick, handleDialogCancel, handleDialogClick, handleDialogClose, handleUnzoom, handleZoom, imgEl, props: { a11yNameButtonUnzoom, a11yNameButtonZoom, children, classDialog, IconUnzoom, IconZoom, isZoomed, wrapElement: WrapElement, ZoomContent, zoomImg, zoomMargin, }, refContent, refDialog, refModalContent, refModalImg, refWrap, state: { id, isZoomImgLoaded, loadedImgEl, modalState, shouldRefresh, styleGhost, }, } = this;
+        const idModal = `rmiz-modal-${id}`;
+        const idModalImg = `rmiz-modal-img-${id}`;
+        const isDiv = testDiv(imgEl);
+        const isImg = testImg(imgEl);
+        const isSvg = testSvg(imgEl);
+        const imgAlt = getImgAlt(imgEl);
+        const imgSrc = getImgSrc(imgEl);
+        const imgSizes = isImg ? imgEl.sizes : undefined;
+        const imgSrcSet = isImg ? imgEl.srcset : undefined;
+        const imgCrossOrigin = isImg ? imgEl.crossOrigin : undefined;
+        const hasZoomImg = !!zoomImg?.src;
+        const hasImage = this.hasImage();
+        const labelBtnZoom = imgAlt
+            ? `${a11yNameButtonZoom}: ${imgAlt}`
+            : a11yNameButtonZoom;
+        const isModalActive = modalState === "LOADING" || modalState === "LOADED";
+        const dataContentState = hasImage ? 'found' : 'not-found';
+        const dataOverlayState = modalState === "UNLOADED" || modalState === "UNLOADING"
+            ? 'hidden'
+            : 'visible';
+        const styleContent = {
+            visibility: modalState === "UNLOADED" ? 'visible' : 'hidden',
+        };
+        this.styleModalImg = hasImage
+            ? getStyleModalImg({
+                hasZoomImg,
+                imgSrc,
+                isSvg,
+                isZoomed: isZoomed && isModalActive,
+                loadedImgEl,
+                offset: zoomMargin,
+                shouldRefresh,
+                targetEl: imgEl,
+            })
+            : {};
+        let modalContent = null;
+        if (hasImage) {
+            const modalImg = isImg || isDiv ? (React.createElement("img", { alt: imgAlt, crossOrigin: imgCrossOrigin, sizes: imgSizes, src: imgSrc, srcSet: imgSrcSet, ...(isZoomImgLoaded && modalState === "LOADED"
+                    ? zoomImg
+                    : {}), "data-rmiz-modal-img": "", height: this.styleModalImg.height || undefined, id: idModalImg, ref: refModalImg, style: this.styleModalImg, width: this.styleModalImg.width || undefined })) : isSvg ? (React.createElement("div", { "data-rmiz-modal-img": true, ref: refModalImg, style: this.styleModalImg })) : null;
+            const modalBtnUnzoom = (React.createElement("button", { "aria-label": a11yNameButtonUnzoom, "data-rmiz-btn-unzoom": "", onClick: handleBtnUnzoomClick, type: "button" },
+                React.createElement(IconUnzoom, null)));
+            modalContent = ZoomContent ? (React.createElement(ZoomContent, { buttonUnzoom: modalBtnUnzoom, modalState: modalState, img: modalImg, isZoomImgLoaded: isZoomImgLoaded, onUnzoom: handleUnzoom })) : (React.createElement(React.Fragment, null,
+                modalImg,
+                modalBtnUnzoom));
+        }
+        return (React.createElement(WrapElement, { "aria-owns": idModal, "data-rmiz": "", ref: refWrap },
+            React.createElement(WrapElement, { "data-rmiz-content": dataContentState, ref: refContent, style: styleContent }, children),
+            hasImage && (React.createElement(WrapElement, { "data-rmiz-ghost": "", style: styleGhost },
+                React.createElement("button", { "aria-label": labelBtnZoom, "data-rmiz-btn-zoom": "", onClick: handleZoom, type: "button" },
+                    React.createElement(IconZoom, null)))),
+            hasImage &&
+                ReactDOM.createPortal(React.createElement("dialog", { "aria-labelledby": idModalImg, "aria-modal": "true", className: classDialog, "data-rmiz-modal": "", id: idModal, onClick: handleDialogClick, onClose: handleDialogClose, onCancel: handleDialogCancel, ref: refDialog, role: "dialog" },
+                    React.createElement("div", { "data-rmiz-modal-overlay": dataOverlayState }),
+                    React.createElement("div", { "data-rmiz-modal-content": "", ref: refModalContent }, modalContent)), this.getDialogContainer())));
+    }
+    componentDidMount() {
+        this.setId();
+        this.setAndTrackImg();
+        this.handleImgLoad();
+        this.UNSAFE_handleSvg();
+    }
+    componentWillUnmount() {
+        if (this.state.modalState !== "UNLOADED") {
+            this.bodyScrollEnable();
+        }
+        this.contentChangeObserver?.disconnect?.();
+        this.contentNotFoundChangeObserver?.disconnect?.();
+        this.imgElResizeObserver?.disconnect?.();
+        this.imgEl?.removeEventListener?.('load', this.handleImgLoad);
+        this.imgEl?.removeEventListener?.('click', this.handleZoom);
+        this.refModalImg.current?.removeEventListener?.('transitionend', this.handleImgTransitionEnd);
+        window.removeEventListener('wheel', this.handleWheel);
+        window.removeEventListener('touchstart', this.handleTouchStart);
+        window.removeEventListener('touchmove', this.handleTouchMove);
+        window.removeEventListener('touchend', this.handleTouchEnd);
+        window.removeEventListener('touchcancel', this.handleTouchCancel);
+        window.removeEventListener('resize', this.handleResize);
+        document.removeEventListener('keydown', this.handleKeyDown, true);
+    }
+    componentDidUpdate(prevProps, prevState) {
+        this.handleModalStateChange(prevState.modalState);
+        this.UNSAFE_handleSvg();
+        this.handleIfZoomChanged(prevProps.isZoomed);
+    }
+}
+ControlledBase.defaultProps = {
+    a11yNameButtonUnzoom: 'Minimize image',
+    a11yNameButtonZoom: 'Expand image',
+    canSwipeToUnzoom: true,
+    IconUnzoom: ICompress,
+    IconZoom: IEnlarge,
+    isDisabled: false,
+    swipeToUnzoomThreshold: 10,
+    wrapElement: 'div',
+    zoomMargin: 0,
+};
+
+export { Controlled };

package/dist/node_modules/.pnpm/react-medium-image-zoom@5.4.1_react-dom@19.2.4_react@19.2.4__react@19.2.4/node_modules/react-medium-image-zoom/dist/Uncontrolled.js

@@ -0,0 +1,15 @@
+'use strict';
+
+var React = require('react');
+var Controlled = require('./Controlled.js');
+
+function Uncontrolled({ onZoomChange, ...props }) {
+    const [isZoomed, setIsZoomed] = React.useState(false);
+    const handleZoomChange = React.useCallback((value, { event }) => {
+        setIsZoomed(value);
+        onZoomChange?.(value, { event });
+    }, [onZoomChange]);
+    return (React.createElement(Controlled.Controlled, { ...props, isZoomed: isZoomed, onZoomChange: handleZoomChange }));
+}
+
+exports.Uncontrolled = Uncontrolled;

package/dist/node_modules/.pnpm/react-medium-image-zoom@5.4.1_react-dom@19.2.4_react@19.2.4__react@19.2.4/node_modules/react-medium-image-zoom/dist/Uncontrolled.mjs

@@ -0,0 +1,13 @@
+import React from 'react';
+import { Controlled } from './Controlled.mjs';
+
+function Uncontrolled({ onZoomChange, ...props }) {
+    const [isZoomed, setIsZoomed] = React.useState(false);
+    const handleZoomChange = React.useCallback((value, { event }) => {
+        setIsZoomed(value);
+        onZoomChange?.(value, { event });
+    }, [onZoomChange]);
+    return (React.createElement(Controlled, { ...props, isZoomed: isZoomed, onZoomChange: handleZoomChange }));
+}
+
+export { Uncontrolled };

package/dist/node_modules/.pnpm/react-medium-image-zoom@5.4.1_react-dom@19.2.4_react@19.2.4__react@19.2.4/node_modules/react-medium-image-zoom/dist/icons.js

@@ -0,0 +1,15 @@
+'use strict';
+
+var React = require('react');
+
+function ICompress() {
+    return (React.createElement("svg", { "aria-hidden": "true", "data-rmiz-btn-unzoom-icon": true, fill: "currentColor", focusable: "false", viewBox: "0 0 16 16", xmlns: "http://www.w3.org/2000/svg" },
+        React.createElement("path", { d: "M 14.144531 1.148438 L 9 6.292969 L 9 3 L 8 3 L 8 8 L 13 8 L 13 7 L 9.707031 7 L 14.855469 1.851563 Z M 8 8 L 3 8 L 3 9 L 6.292969 9 L 1.148438 14.144531 L 1.851563 14.855469 L 7 9.707031 L 7 13 L 8 13 Z" })));
+}
+function IEnlarge() {
+    return (React.createElement("svg", { "aria-hidden": "true", "data-rmiz-btn-zoom-icon": true, fill: "currentColor", focusable: "false", viewBox: "0 0 16 16", xmlns: "http://www.w3.org/2000/svg" },
+        React.createElement("path", { d: "M 9 1 L 9 2 L 12.292969 2 L 2 12.292969 L 2 9 L 1 9 L 1 14 L 6 14 L 6 13 L 2.707031 13 L 13 2.707031 L 13 6 L 14 6 L 14 1 Z" })));
+}
+
+exports.ICompress = ICompress;
+exports.IEnlarge = IEnlarge;

package/dist/node_modules/.pnpm/react-medium-image-zoom@5.4.1_react-dom@19.2.4_react@19.2.4__react@19.2.4/node_modules/react-medium-image-zoom/dist/icons.mjs

@@ -0,0 +1,12 @@
+import React from 'react';
+
+function ICompress() {
+    return (React.createElement("svg", { "aria-hidden": "true", "data-rmiz-btn-unzoom-icon": true, fill: "currentColor", focusable: "false", viewBox: "0 0 16 16", xmlns: "http://www.w3.org/2000/svg" },
+        React.createElement("path", { d: "M 14.144531 1.148438 L 9 6.292969 L 9 3 L 8 3 L 8 8 L 13 8 L 13 7 L 9.707031 7 L 14.855469 1.851563 Z M 8 8 L 3 8 L 3 9 L 6.292969 9 L 1.148438 14.144531 L 1.851563 14.855469 L 7 9.707031 L 7 13 L 8 13 Z" })));
+}
+function IEnlarge() {
+    return (React.createElement("svg", { "aria-hidden": "true", "data-rmiz-btn-zoom-icon": true, fill: "currentColor", focusable: "false", viewBox: "0 0 16 16", xmlns: "http://www.w3.org/2000/svg" },
+        React.createElement("path", { d: "M 9 1 L 9 2 L 12.292969 2 L 2 12.292969 L 2 9 L 1 9 L 1 14 L 6 14 L 6 13 L 2.707031 13 L 13 2.707031 L 13 6 L 14 6 L 14 1 Z" })));
+}
+
+export { ICompress, IEnlarge };