naive-ui 2.35.0 → 2.37.0

package/es/image/src/ImagePreview.mjs

@@ -0,0 +1,541 @@
+import { h, defineComponent, Fragment, ref, withDirectives, Transition, vShow, watch, computed, toRef, onBeforeUnmount, inject, normalizeStyle } from 'vue';
+import { zindexable } from 'vdirs';
+import { useIsMounted } from 'vooks';
+import { LazyTeleport } from 'vueuc';
+import { on, off } from 'evtd';
+import { beforeNextFrameOnce } from 'seemly';
+import { kebabCase } from 'lodash-es';
+import { RotateClockwiseIcon, RotateCounterclockwiseIcon, ZoomInIcon, ZoomOutIcon, ResizeSmallIcon } from "../../_internal/icons/index.mjs";
+import { useConfig, useLocale, useTheme, useThemeClass } from "../../_mixins/index.mjs";
+import { NBaseIcon } from "../../_internal/index.mjs";
+import { download } from "../../_utils/index.mjs";
+import { NTooltip } from "../../tooltip/index.mjs";
+import { imageLight } from "../styles/index.mjs";
+import { prevIcon, nextIcon, closeIcon, downloadIcon } from "./icons.mjs";
+import { imageContextKey, imagePreviewSharedProps } from "./interface.mjs";
+import style from "./styles/index.cssr.mjs";
+const BLEEDING = 32;
+export default defineComponent({
+  name: 'ImagePreview',
+  props: Object.assign(Object.assign({}, imagePreviewSharedProps), {
+    onNext: Function,
+    onPrev: Function,
+    clsPrefix: {
+      type: String,
+      required: true
+    }
+  }),
+  setup(props) {
+    const themeRef = useTheme('Image', '-image', style, imageLight, props, toRef(props, 'clsPrefix'));
+    let thumbnailEl = null;
+    const previewRef = ref(null);
+    const previewWrapperRef = ref(null);
+    const previewSrcRef = ref(undefined);
+    const showRef = ref(false);
+    const displayedRef = ref(false);
+    const {
+      localeRef
+    } = 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;
+      }
+    }
+    watch(showRef, value => {
+      if (value) {
+        on('keydown', document, handleKeydown);
+      } else off('keydown', document, handleKeydown);
+    });
+    onBeforeUnmount(() => {
+      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;
+      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) {
+      off('mousemove', document, handleMouseMove);
+      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 = inject(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();
+      on('mousemove', document, handleMouseMove);
+      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) {
+        download(src, undefined);
+      }
+    }
+    function derivePreviewStyle(transition = true) {
+      var _a;
+      const {
+        value: preview
+      } = previewRef;
+      if (!preview) return;
+      const {
+        style
+      } = preview;
+      const controlledStyle = 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 += `${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 h(NTooltip, {
+          to: false,
+          theme: theme.peers.Tooltip,
+          themeOverrides: theme.peerOverrides.Tooltip,
+          keepAliveOnHover: false
+        }, {
+          default: () => {
+            return localeRef.value[tooltipKey];
+          },
+          trigger: () => node
+        });
+      } else {
+        return node;
+      }
+    }
+    const cssVarsRef = computed(() => {
+      const {
+        common: {
+          cubicBezierEaseInOut
+        },
+        self: {
+          toolbarIconColor,
+          toolbarBorderRadius,
+          toolbarBoxShadow,
+          toolbarColor
+        }
+      } = themeRef.value;
+      return {
+        '--n-bezier': cubicBezierEaseInOut,
+        '--n-toolbar-icon-color': toolbarIconColor,
+        '--n-toolbar-color': toolbarColor,
+        '--n-toolbar-border-radius': toolbarBorderRadius,
+        '--n-toolbar-box-shadow': toolbarBoxShadow
+      };
+    });
+    const {
+      inlineThemeDisabled
+    } = useConfig();
+    const themeClassHandle = inlineThemeDisabled ? useThemeClass('image-preview', undefined, cssVarsRef, props) : undefined;
+    return Object.assign({
+      previewRef,
+      previewWrapperRef,
+      previewSrc: previewSrcRef,
+      show: showRef,
+      appear: 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 h(Fragment, null, (_b = (_a = this.$slots).default) === null || _b === void 0 ? void 0 : _b.call(_a), h(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 withDirectives(h("div", {
+          class: [`${clsPrefix}-image-preview-container`, this.themeClass],
+          style: this.cssVars,
+          onWheel: this.handleWheel
+        }, h(Transition, {
+          name: "fade-in-transition",
+          appear: this.appear
+        }, {
+          default: () => this.show ? h("div", {
+            class: `${clsPrefix}-image-preview-overlay`,
+            onClick: this.toggleShow
+          }) : null
+        }), this.showToolbar ? h(Transition, {
+          name: "fade-in-transition",
+          appear: this.appear
+        }, {
+          default: () => {
+            if (!this.show) return null;
+            const {
+              withTooltip
+            } = this;
+            return h("div", {
+              class: `${clsPrefix}-image-preview-toolbar`
+            }, this.onPrev ? h(Fragment, null, withTooltip(h(NBaseIcon, {
+              clsPrefix: clsPrefix,
+              onClick: this.handleSwitchPrev
+            }, {
+              default: () => prevIcon
+            }), 'tipPrevious'), withTooltip(h(NBaseIcon, {
+              clsPrefix: clsPrefix,
+              onClick: this.handleSwitchNext
+            }, {
+              default: () => nextIcon
+            }), 'tipNext')) : null, withTooltip(h(NBaseIcon, {
+              clsPrefix: clsPrefix,
+              onClick: this.rotateCounterclockwise
+            }, {
+              default: () => h(RotateCounterclockwiseIcon, null)
+            }), 'tipCounterclockwise'), withTooltip(h(NBaseIcon, {
+              clsPrefix: clsPrefix,
+              onClick: this.rotateClockwise
+            }, {
+              default: () => h(RotateClockwiseIcon, null)
+            }), 'tipClockwise'), withTooltip(h(NBaseIcon, {
+              clsPrefix: clsPrefix,
+              onClick: this.resizeToOrignalImageSize
+            }, {
+              default: () => {
+                return h(ResizeSmallIcon, null);
+              }
+            }), 'tipOriginalSize'), withTooltip(h(NBaseIcon, {
+              clsPrefix: clsPrefix,
+              onClick: this.zoomOut
+            }, {
+              default: () => h(ZoomOutIcon, null)
+            }), 'tipZoomOut'), withTooltip(h(NBaseIcon, {
+              clsPrefix: clsPrefix,
+              onClick: this.zoomIn
+            }, {
+              default: () => h(ZoomInIcon, null)
+            }), 'tipZoomIn'), withTooltip(h(NBaseIcon, {
+              clsPrefix: clsPrefix,
+              onClick: this.handleDownloadClick
+            }, {
+              default: () => downloadIcon
+            }), 'tipDownload'), withTooltip(h(NBaseIcon, {
+              clsPrefix: clsPrefix,
+              onClick: this.toggleShow
+            }, {
+              default: () => closeIcon
+            }), 'tipClose'));
+          }
+        }) : null, h(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 withDirectives(h("div", {
+              class: `${clsPrefix}-image-preview-wrapper`,
+              ref: "previewWrapperRef"
+            }, 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
+            }))), [[vShow, this.show]]);
+          }
+        })), [[zindexable, {
+          enabled: this.show
+        }]]);
+      }
+    }));
+  }
+});

package/es/image/src/icons.mjs

@@ -0,0 +1,34 @@
+import { h } from 'vue';
+export const prevIcon = h("svg", {
+  viewBox: "0 0 20 20",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg"
+}, 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"
+}));
+export const nextIcon = h("svg", {
+  viewBox: "0 0 20 20",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg"
+}, 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"
+}));
+export const closeIcon = h("svg", {
+  viewBox: "0 0 20 20",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg"
+}, 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"
+}));
+export const downloadIcon = h("svg", {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "32",
+  height: "32",
+  viewBox: "0 0 1024 1024"
+}, 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/es/image/src/interface.mjs

@@ -0,0 +1,12 @@
+import { useTheme } from "../../_mixins/index.mjs";
+import { createInjectionKey } from "../../_utils/index.mjs";
+export const imagePreviewSharedProps = Object.assign(Object.assign({}, useTheme.props), {
+  onPreviewPrev: Function,
+  onPreviewNext: Function,
+  showToolbar: {
+    type: Boolean,
+    default: true
+  },
+  showToolbarTooltip: Boolean
+});
+export const imageContextKey = createInjectionKey('n-image');

package/es/image/src/styles/index.cssr.mjs

@@ -0,0 +1,68 @@
+import { c, cB, cNotM } from "../../../_utils/cssr/index.mjs";
+import { fadeInTransition } from "../../../_styles/transitions/fade-in.cssr.mjs";
+import { fadeInScaleUpTransition } from "../../../_styles/transitions/fade-in-scale-up.cssr.mjs";
+// vars:
+// --n-toolbar-icon-color
+// --n-toolbar-color
+// --n-toolbar-border-radius
+// --n-toolbar-box-shadow
+// --n-bezier
+export default c([c('body >', [cB('image-container', 'position: fixed;')]), cB('image-preview-container', `
+ position: fixed;
+ left: 0;
+ right: 0;
+ top: 0;
+ bottom: 0;
+ display: flex;
+ `), cB('image-preview-overlay', `
+ z-index: -1;
+ position: absolute;
+ left: 0;
+ right: 0;
+ top: 0;
+ bottom: 0;
+ background: rgba(0, 0, 0, .3);
+ `, [fadeInTransition()]), cB('image-preview-toolbar', `
+ z-index: 1;
+ position: absolute;
+ left: 50%;
+ transform: translateX(-50%);
+ border-radius: var(--n-toolbar-border-radius);
+ height: 48px;
+ bottom: 40px;
+ padding: 0 12px;
+ background: var(--n-toolbar-color);
+ box-shadow: var(--n-toolbar-box-shadow);
+ color: var(--n-toolbar-icon-color);
+ transition: color .3s var(--n-bezier);
+ display: flex;
+ align-items: center;
+ `, [cB('base-icon', `
+ padding: 0 8px;
+ font-size: 28px;
+ cursor: pointer;
+ `), fadeInTransition()]), cB('image-preview-wrapper', `
+ position: absolute;
+ left: 0;
+ right: 0;
+ top: 0;
+ bottom: 0;
+ display: flex;
+ pointer-events: none;
+ `, [fadeInScaleUpTransition()]), 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(--n-bezier);
+ `), cB('image', `
+ display: inline-flex;
+ max-height: 100%;
+ max-width: 100%;
+ `, [cNotM('preview-disabled', `
+ cursor: pointer;
+ `), c('img', `
+ border-radius: inherit;
+ `)])]);