yc-design-vue 1.7.6 → 1.7.7

package/es/Image/Image.vue.js

@@ -1,7 +1,184 @@
-import _sfc_main from "./Image.vue2.js";
-/* empty css           */
-import _export_sfc from "../_virtual/_plugin-vue_export-helper.js";
-const _Image = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-2df87875"]]);
+import { defineComponent, toRefs, ref, watch, createElementBlock, openBlock, normalizeStyle, unref, createElementVNode, createBlock, createCommentVNode, mergeProps, isRef, createSlots, withCtx, renderSlot, createVNode, toDisplayString, normalizeClass } from "vue";
+import "../node_modules/tinycolor2/esm/tinycolor.js";
+import { valueToPx } from "../_shared/utils/dom.js";
+import "../_shared/utils/time.js";
+import "../Empty/index.js";
+/* empty css                             */
+import _sfc_main$2 from "../_shared/icons/IconImageClose.vue.js";
+import useControlValue from "../_shared/utils/control.js";
+import useContext from "./hooks/useContext.js";
+import Spin from "../Spin/index.js";
+import _sfc_main$1 from "./ImagePreview.vue.js";
+/* empty css                  */
+const _hoisted_1 = ["src", "title", "alt"];
+const _hoisted_2 = {
+  key: 1,
+  class: "yc-image-overlay"
+};
+const _hoisted_3 = { class: "yc-image-loader" };
+const _hoisted_4 = {
+  key: 2,
+  class: "yc-image-overlay"
+};
+const _hoisted_5 = { class: "yc-image-error" };
+const _hoisted_6 = { class: "yc-image-error-icon" };
+const _hoisted_7 = { class: "yc-image-error-alt" };
+const _hoisted_8 = { class: "yc-image-footer-caption" };
+const _hoisted_9 = ["title"];
+const _hoisted_10 = ["title"];
+const _hoisted_11 = {
+  key: 0,
+  class: "yc-image-footer-extra"
+};
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...{
+    name: "Image"
+  },
+  __name: "Image",
+  props: {
+    src: { default: "" },
+    width: {},
+    height: {},
+    title: { default: "" },
+    description: { default: "" },
+    fit: {},
+    alt: {},
+    hideFooter: { type: [Boolean, String], default: false },
+    footerPosition: { default: "inner" },
+    showLoader: { type: Boolean, default: false },
+    preview: { type: Boolean, default: true },
+    previewVisible: { type: Boolean, default: void 0 },
+    defaultPreviewVisible: { type: Boolean, default: false },
+    previewProps: { default: () => {
+      return {};
+    } },
+    footerClass: { default: "" }
+  },
+  emits: ["update:previewVisible", "preview-visible-change"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emits = __emit;
+    const { src, preview, previewVisible, defaultPreviewVisible } = toRefs(props);
+    const { hasGroupFather, handleClick: previewImage } = useContext().inject();
+    const computedVisible = useControlValue(
+      previewVisible,
+      defaultPreviewVisible.value,
+      (val) => {
+        emits("update:previewVisible", val);
+        emits("preview-visible-change", val);
+      }
+    );
+    const isError = ref(false);
+    const loading = ref(false);
+    const handleLoad = () => {
+      loading.value = false;
+      isError.value = false;
+    };
+    const handleError = () => {
+      loading.value = false;
+      isError.value = true;
+    };
+    const handleClick = () => {
+      if (hasGroupFather.value) {
+        return previewImage(src.value);
+      }
+      if (!preview.value) return;
+      computedVisible.value = true;
+    };
+    watch(
+      () => src.value,
+      () => {
+        loading.value = true;
+        isError.value = false;
+      },
+      {
+        immediate: true
+      }
+    );
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: "yc-image",
+        style: normalizeStyle({
+          width: unref(valueToPx)(_ctx.width),
+          height: unref(valueToPx)(_ctx.height)
+        })
+      }, [
+        createElementVNode("img", {
+          src: unref(src),
+          title: _ctx.title,
+          alt: _ctx.alt ?? _ctx.description,
+          style: normalizeStyle({
+            width: unref(valueToPx)(_ctx.width),
+            height: unref(valueToPx)(_ctx.height),
+            objectFit: _ctx.fit
+          }),
+          class: "yc-image-img",
+          onLoad: handleLoad,
+          onError: handleError,
+          onClick: handleClick
+        }, null, 44, _hoisted_1),
+        unref(preview) ? (openBlock(), createBlock(_sfc_main$1, mergeProps({
+          key: 0,
+          visible: unref(computedVisible),
+          "onUpdate:visible": _cache[0] || (_cache[0] = ($event) => isRef(computedVisible) ? computedVisible.value = $event : null),
+          src: unref(src)
+        }, _ctx.previewProps), createSlots({ _: 2 }, [
+          _ctx.$slots["preview-actions"] ? {
+            name: "actions",
+            fn: withCtx(() => [
+              renderSlot(_ctx.$slots, "preview-actions")
+            ]),
+            key: "0"
+          } : void 0
+        ]), 1040, ["visible", "src"])) : createCommentVNode("", true),
+        (_ctx.showLoader || _ctx.$slots.loader) && loading.value ? (openBlock(), createElementBlock("div", _hoisted_2, [
+          createElementVNode("div", _hoisted_3, [
+            renderSlot(_ctx.$slots, "loader", {}, () => [
+              createVNode(unref(Spin), {
+                size: 30,
+                tip: "加载中"
+              })
+            ])
+          ])
+        ])) : createCommentVNode("", true),
+        isError.value ? (openBlock(), createElementBlock("div", _hoisted_4, [
+          renderSlot(_ctx.$slots, "error", {}, () => [
+            createElementVNode("div", _hoisted_5, [
+              renderSlot(_ctx.$slots, "error-icon", {}, () => [
+                createElementVNode("div", _hoisted_6, [
+                  createVNode(unref(_sfc_main$2), { size: 60 })
+                ])
+              ]),
+              createElementVNode("div", _hoisted_7, toDisplayString(_ctx.alt ?? _ctx.description), 1)
+            ])
+          ])
+        ])) : createCommentVNode("", true),
+        !_ctx.hideFooter && (_ctx.title || _ctx.description || _ctx.$slots.extra) ? (openBlock(), createElementBlock("div", {
+          key: 3,
+          class: normalizeClass([
+            "yc-image-footer",
+            _ctx.footerPosition == "inner" ? "yc-image-footer-inner" : "yc-image-footer-outer",
+            _ctx.footerClass
+          ])
+        }, [
+          createElementVNode("div", _hoisted_8, [
+            createElementVNode("div", {
+              class: "yc-image-footer-caption-title",
+              title: _ctx.title
+            }, toDisplayString(_ctx.title), 9, _hoisted_9),
+            createElementVNode("div", {
+              class: "yc-image-footer-caption-description",
+              title: _ctx.description
+            }, toDisplayString(_ctx.description), 9, _hoisted_10)
+          ]),
+          _ctx.$slots.extra ? (openBlock(), createElementBlock("div", _hoisted_11, [
+            renderSlot(_ctx.$slots, "extra")
+          ])) : createCommentVNode("", true)
+        ], 2)) : createCommentVNode("", true)
+      ], 4);
+    };
+  }
+});
 export {
-  _Image as default
+  _sfc_main as default
 };

package/es/Image/Image.vue3.js

@@ -0,0 +1,5 @@
+import _sfc_main from "./Image.vue.js";
+/* empty css           */
+export {
+  _sfc_main as default
+};

package/es/Image/ImagePreview.vue.js

@@ -1,7 +1,214 @@
-import _sfc_main from "./ImagePreview.vue2.js";
-/* empty css                  */
-import _export_sfc from "../_virtual/_plugin-vue_export-helper.js";
-const ImagePreview = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-35243e9c"]]);
+import { defineComponent, toRefs, ref, createBlock, openBlock, Teleport, unref, createElementBlock, createCommentVNode, normalizeStyle, normalizeClass, createVNode, Transition, withCtx, withDirectives, createElementVNode, vShow, withModifiers, renderSlot, createSlots } from "vue";
+import "../node_modules/tinycolor2/esm/tinycolor.js";
+import "../_shared/utils/dom.js";
+import "../_shared/utils/time.js";
+import { getGlobalConfig } from "../_shared/utils/global-config.js";
+import useControlValue from "../_shared/utils/control.js";
+/* empty css                             */
+import _sfc_main$2 from "../_shared/icons/IconClose.vue.js";
+import { useEventListener, onKeyStroke } from "../node_modules/@vueuse/core/index.js";
+import useModalClose from "../Modal/hooks/useModalClose.js";
+import _sfc_main$1 from "./ImagePreviewToolbar.vue.js";
+/* empty css                         */
+const _hoisted_1 = { class: "yc-image-preview-mask" };
+const _hoisted_2 = ["src"];
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...{
+    name: "ImagePreview",
+    inheritAttrs: false
+  },
+  __name: "ImagePreview",
+  props: {
+    src: { default: "" },
+    visible: { type: Boolean, default: void 0 },
+    defaultVisible: { type: Boolean, default: false },
+    maskClosable: { type: Boolean, default: true },
+    closable: { type: Boolean, default: true },
+    actionsLayout: { default: () => [
+      "fullScreen",
+      "rotateRight",
+      "rotateLeft",
+      "zoomIn",
+      "zoomOut",
+      "originalSize"
+    ] },
+    popupContainer: { default: void 0 },
+    escToClose: { type: Boolean, default: true },
+    wheelZoom: { type: Boolean, default: true },
+    keyboard: { type: Boolean, default: true },
+    defaultScale: { default: 1 },
+    zoomRate: { default: 1.1 }
+  },
+  emits: ["update:visible", "close"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emits = __emit;
+    const {
+      visible,
+      defaultVisible,
+      maskClosable,
+      escToClose,
+      defaultScale,
+      zoomRate,
+      wheelZoom,
+      keyboard,
+      popupContainer: _popupContainer
+    } = toRefs(props);
+    const { zIndex, popupContainer } = getGlobalConfig(props);
+    const imageRef = ref();
+    const scale = useControlValue(ref(), defaultScale.value);
+    const rotate = ref(0);
+    const { outerVisible, innerVisible, handleClose, handleAfterLeave } = useModalClose({
+      visible,
+      defaultVisible,
+      escToClose,
+      maskClosable,
+      onBeforeOk: () => true,
+      onBeforeCancel: () => true,
+      emits
+    });
+    const handleAction = (action) => {
+      switch (action) {
+        case "rotateRight":
+          {
+            rotate.value += 90;
+          }
+          break;
+        case "rotateLeft":
+          {
+            rotate.value -= 90;
+          }
+          break;
+        case "zoomIn":
+          {
+            scale.value *= zoomRate.value;
+          }
+          break;
+        case "zoomOut":
+          {
+            scale.value /= zoomRate.value;
+          }
+          break;
+        case "originalSize":
+          {
+            scale.value = defaultScale.value;
+            rotate.value = 0;
+          }
+          break;
+        case "fullScreen":
+          {
+            const { offsetWidth, offsetHeight } = imageRef.value;
+            if (offsetWidth > offsetHeight) {
+              scale.value = window.innerHeight / offsetHeight;
+            } else {
+              scale.value = window.innerHeight / offsetWidth;
+            }
+          }
+          break;
+      }
+    };
+    const intLisenter = () => {
+      if (wheelZoom.value) {
+        useEventListener("wheel", (e) => {
+          e.preventDefault();
+          e.stopPropagation();
+          const delta = e.deltaY < 0 ? 1 : -1;
+          scale.value *= Math.pow(zoomRate.value, delta);
+        });
+      }
+      if (keyboard.value) {
+        const map = {
+          ArrowUp: "zoomIn",
+          ArrowDown: "zoomOut",
+          " ": "originalSize"
+        };
+        onKeyStroke(["ArrowUp", "ArrowDown", " "], (e) => {
+          handleAction(map[e.key]);
+        });
+      }
+    };
+    intLisenter();
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(Teleport, { to: unref(popupContainer) }, [
+        unref(outerVisible) ? (openBlock(), createElementBlock("div", {
+          key: 0,
+          class: normalizeClass([
+            "yc-image-preview",
+            _ctx.$attrs.class,
+            {
+              "yc-image-preview-absolute": unref(_popupContainer)
+            }
+          ]),
+          style: normalizeStyle({
+            zIndex: unref(zIndex),
+            ..._ctx.$attrs.style ?? {}
+          })
+        }, [
+          createVNode(Transition, { name: "fade" }, {
+            default: withCtx(() => [
+              withDirectives(createElementVNode("div", _hoisted_1, null, 512), [
+                [vShow, unref(innerVisible)]
+              ])
+            ]),
+            _: 1
+          }),
+          createVNode(Transition, {
+            name: "fade",
+            onAfterLeave: unref(handleAfterLeave)
+          }, {
+            default: withCtx(() => [
+              withDirectives(createElementVNode("div", {
+                class: "yc-image-preview-wrapper",
+                onClick: _cache[2] || (_cache[2] = withModifiers(($event) => unref(handleClose)("mask", $event, false), ["self"]))
+              }, [
+                createElementVNode("div", {
+                  style: normalizeStyle({
+                    transform: `scale(${unref(scale)}, ${unref(scale)})`
+                  }),
+                  class: "yc-image-preview-img-container",
+                  onClick: _cache[0] || (_cache[0] = withModifiers(($event) => unref(handleClose)("mask", $event, false), ["self"]))
+                }, [
+                  createElementVNode("img", {
+                    src: _ctx.src,
+                    style: normalizeStyle({
+                      transform: `translate(-50%, -50%) rotate(${rotate.value}deg)`
+                    }),
+                    class: "yc-image-preview-img",
+                    ref_key: "imageRef",
+                    ref: imageRef
+                  }, null, 12, _hoisted_2)
+                ], 4),
+                createVNode(_sfc_main$1, {
+                  actionsLayout: _ctx.actionsLayout,
+                  onClick: handleAction
+                }, createSlots({ _: 2 }, [
+                  _ctx.$slots.actions ? {
+                    name: "actions",
+                    fn: withCtx(() => [
+                      renderSlot(_ctx.$slots, "actions")
+                    ]),
+                    key: "0"
+                  } : void 0
+                ]), 1032, ["actionsLayout"]),
+                renderSlot(_ctx.$slots, "arrow"),
+                _ctx.closable ? (openBlock(), createElementBlock("div", {
+                  key: 0,
+                  class: "yc-image-preview-close-btn",
+                  onClick: _cache[1] || (_cache[1] = ($event) => unref(handleClose)("closeBtn", $event))
+                }, [
+                  createVNode(unref(_sfc_main$2))
+                ])) : createCommentVNode("", true)
+              ], 512), [
+                [vShow, unref(innerVisible)]
+              ])
+            ]),
+            _: 3
+          }, 8, ["onAfterLeave"])
+        ], 6)) : createCommentVNode("", true)
+      ], 8, ["to"]);
+    };
+  }
+});
 export {
-  ImagePreview as default
+  _sfc_main as default
 };

package/es/Image/ImagePreview.vue3.js

@@ -0,0 +1,5 @@
+import _sfc_main from "./ImagePreview.vue.js";
+/* empty css                  */
+export {
+  _sfc_main as default
+};

package/es/Image/ImagePreviewAction.vue.js

@@ -1,7 +1,51 @@
-import _sfc_main from "./ImagePreviewAction.vue2.js";
-/* empty css                        */
-import _export_sfc from "../_virtual/_plugin-vue_export-helper.js";
-const ImagePreviewAction = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-d98ed90b"]]);
+import { defineComponent, createBlock, openBlock, unref, withCtx, createElementVNode, normalizeClass, renderSlot } from "vue";
+import Tooltip from "../Tooltip/index.js";
+const _hoisted_1 = { class: "yc-image-preview-toolbar-action-content" };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...{
+    name: "ImagePreviewAction"
+  },
+  __name: "ImagePreviewAction",
+  props: {
+    name: { default: "" },
+    disabled: { type: Boolean, default: false }
+  },
+  emits: ["click", "dblclick", "contextmenu"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emits = __emit;
+    const handleEvent = (type, ev) => {
+      if (props.disabled) return;
+      emits(type, ev);
+    };
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(Tooltip), {
+        content: _ctx.name,
+        disabled: !_ctx.name.length,
+        position: "top"
+      }, {
+        default: withCtx(() => [
+          createElementVNode("div", {
+            class: normalizeClass([
+              "yc-image-preview-toolbar-action",
+              {
+                "yc-image-preview-toolbar-action-disabled": _ctx.disabled
+              }
+            ]),
+            onClick: _cache[0] || (_cache[0] = ($event) => handleEvent("click", $event)),
+            onDblclick: _cache[1] || (_cache[1] = ($event) => handleEvent("dblclick", $event)),
+            onContextmenu: _cache[2] || (_cache[2] = ($event) => handleEvent("contextmenu", $event))
+          }, [
+            createElementVNode("span", _hoisted_1, [
+              renderSlot(_ctx.$slots, "default")
+            ])
+          ], 34)
+        ]),
+        _: 3
+      }, 8, ["content", "disabled"]);
+    };
+  }
+});
 export {
-  ImagePreviewAction as default
+  _sfc_main as default
 };

package/es/Image/ImagePreviewAction.vue3.js

@@ -0,0 +1,5 @@
+import _sfc_main from "./ImagePreviewAction.vue.js";
+/* empty css                        */
+export {
+  _sfc_main as default
+};

package/es/Image/ImagePreviewArrow.vue.js

@@ -1,7 +1,27 @@
-import _sfc_main from "./ImagePreviewArrow.vue2.js";
-/* empty css                       */
-import _export_sfc from "../_virtual/_plugin-vue_export-helper.js";
-const ImagePreviewArrow = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-c45164cb"]]);
+import { defineComponent, createElementBlock, openBlock, normalizeClass, createVNode, unref } from "vue";
+import "../node_modules/tinycolor2/esm/tinycolor.js";
+import "../_shared/utils/dom.js";
+import "../_shared/utils/time.js";
+import "../Empty/index.js";
+/* empty css                             */
+import _sfc_main$1 from "../_shared/icons/IconArrowRight.vue.js";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "ImagePreviewArrow",
+  props: {
+    type: {}
+  },
+  setup(__props) {
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass([`yc-image-preview-arrow-${_ctx.type}`])
+      }, [
+        createVNode(unref(_sfc_main$1), {
+          rotate: _ctx.type == "left" ? 180 : 0
+        }, null, 8, ["rotate"])
+      ], 2);
+    };
+  }
+});
 export {
-  ImagePreviewArrow as default
+  _sfc_main as default
 };

package/es/Image/ImagePreviewArrow.vue3.js

@@ -0,0 +1,5 @@
+import _sfc_main from "./ImagePreviewArrow.vue.js";
+/* empty css                       */
+export {
+  _sfc_main as default
+};

package/es/Image/ImagePreviewGroup.vue.js

@@ -1,8 +1,10 @@
 import { defineComponent, toRefs, createElementBlock, openBlock, Fragment, renderSlot, createCommentVNode, createVNode, unref, mergeProps, isRef, createSlots, withCtx, createElementVNode } from "vue";
 import { onKeyStroke } from "../node_modules/@vueuse/core/index.js";
 import useContext from "./hooks/useContext.js";
-import ImagePreview from "./ImagePreview.vue.js";
-import ImagePreviewArrow from "./ImagePreviewArrow.vue.js";
+import _sfc_main$1 from "./ImagePreview.vue.js";
+/* empty css                  */
+import _sfc_main$2 from "./ImagePreviewArrow.vue.js";
+/* empty css                       */
 const _hoisted_1 = { class: "yc-image-preview-arrow" };
 const _sfc_main = /* @__PURE__ */ defineComponent({
   ...{
@@ -72,7 +74,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock(Fragment, null, [
         _ctx.$slots.default && !unref(_srcList).length ? renderSlot(_ctx.$slots, "default", { key: 0 }) : createCommentVNode("", true),
-        createVNode(ImagePreview, mergeProps(props, {
+        createVNode(_sfc_main$1, mergeProps(props, {
           visible: unref(computedVisible),
           "onUpdate:visible": _cache[2] || (_cache[2] = ($event) => isRef(computedVisible) ? computedVisible.value = $event : null),
           src: unref(src),
@@ -81,11 +83,11 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         }), createSlots({
           arrow: withCtx(() => [
             createElementVNode("div", _hoisted_1, [
-              createVNode(ImagePreviewArrow, {
+              createVNode(_sfc_main$2, {
                 type: "left",
                 onClick: _cache[0] || (_cache[0] = ($event) => handleCurrentChange("pre"))
               }),
-              createVNode(ImagePreviewArrow, {
+              createVNode(_sfc_main$2, {
                 type: "right",
                 onClick: _cache[1] || (_cache[1] = ($event) => handleCurrentChange("next"))
               })

package/es/Image/ImagePreviewToolbar.vue.js

@@ -1,7 +1,75 @@
-import _sfc_main from "./ImagePreviewToolbar.vue2.js";
-/* empty css                         */
-import _export_sfc from "../_virtual/_plugin-vue_export-helper.js";
-const ImagePreviewToolbar = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-f838cc3a"]]);
+import { defineComponent, createElementBlock, createCommentVNode, openBlock, renderSlot, Fragment, renderList, createBlock, withCtx, resolveDynamicComponent } from "vue";
+import "../node_modules/tinycolor2/esm/tinycolor.js";
+import "../_shared/utils/dom.js";
+import "../_shared/utils/time.js";
+import "../Empty/index.js";
+/* empty css                             */
+import _sfc_main$6 from "../_shared/icons/IconFullScreen.vue2.js";
+import _sfc_main$1 from "../_shared/icons/IconOriginSize.vue2.js";
+import _sfc_main$4 from "../_shared/icons/IconRotateLeft.vue2.js";
+import _sfc_main$5 from "../_shared/icons/IconRotateRight.vue2.js";
+import _sfc_main$3 from "../_shared/icons/IconZoomIn.vue2.js";
+import _sfc_main$2 from "../_shared/icons/IconZoomOut.vue2.js";
+import _sfc_main$7 from "./ImagePreviewAction.vue.js";
+/* empty css                        */
+const _hoisted_1 = {
+  key: 0,
+  class: "yc-image-preview-toolbar"
+};
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "ImagePreviewToolbar",
+  props: {
+    actionsLayout: { default: () => [] }
+  },
+  emits: ["click"],
+  setup(__props) {
+    const actionMap = {
+      fullScreen: {
+        icon: _sfc_main$6,
+        name: "全屏"
+      },
+      rotateRight: {
+        icon: _sfc_main$5,
+        name: "向右旋转"
+      },
+      rotateLeft: {
+        icon: _sfc_main$4,
+        name: "向左旋转"
+      },
+      zoomIn: {
+        icon: _sfc_main$3,
+        name: "放大"
+      },
+      zoomOut: {
+        icon: _sfc_main$2,
+        name: "缩小"
+      },
+      originalSize: {
+        icon: _sfc_main$1,
+        name: "还原"
+      }
+    };
+    return (_ctx, _cache) => {
+      return _ctx.actionsLayout.length ? (openBlock(), createElementBlock("div", _hoisted_1, [
+        (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.actionsLayout, (action) => {
+          return openBlock(), createElementBlock(Fragment, { key: action }, [
+            actionMap[action] ? (openBlock(), createBlock(_sfc_main$7, {
+              key: 0,
+              name: actionMap[action].name,
+              onClick: (ev) => _ctx.$emit("click", action, ev)
+            }, {
+              default: withCtx(() => [
+                (openBlock(), createBlock(resolveDynamicComponent(actionMap[action].icon)))
+              ]),
+              _: 2
+            }, 1032, ["name", "onClick"])) : createCommentVNode("", true)
+          ], 64);
+        }), 128)),
+        renderSlot(_ctx.$slots, "actions")
+      ])) : createCommentVNode("", true);
+    };
+  }
+});
 export {
-  ImagePreviewToolbar as default
+  _sfc_main as default
 };

package/es/Image/ImagePreviewToolbar.vue3.js

@@ -0,0 +1,5 @@
+import _sfc_main from "./ImagePreviewToolbar.vue.js";
+/* empty css                         */
+export {
+  _sfc_main as default
+};

package/es/Image/hooks/useContext.js

@@ -6,7 +6,8 @@ import { findComponentsFromVnodes } from "../../_shared/utils/vue-utils.js";
 import "../../Empty/index.js";
 /* empty css                                */
 import useControlValue from "../../_shared/utils/control.js";
-import _Image from "../Image.vue.js";
+import _sfc_main from "../Image.vue.js";
+/* empty css            */
 const IMAGE_CONTEXT_KEY = "image-context";
 const useContext = () => {
   const provide$1 = (props, emits) => {
@@ -24,7 +25,7 @@ const useContext = () => {
       if (!slots.default) return [];
       const images = findComponentsFromVnodes(
         ((_a = slots.default) == null ? void 0 : _a.call(slots)) || [],
-        _Image.name
+        _sfc_main.name
       );
       return images.map((image) => {
         var _a2;