vitepress-component-medium-zoom 1.0.0 → 1.1.0

package/README.md

@@ -45,19 +45,30 @@ Create or update `.vitepress/theme/MyLayout.vue`:
 <script setup>
 import DefaultTheme from 'vitepress/theme';
 import { MediumZoom } from 'vitepress-component-medium-zoom';
+import 'vitepress-component-medium-zoom/style.css';
 
 const { Layout } = DefaultTheme;
 </script>
 
 <template>
   <Layout>...</Layout>
-  <!-- Import here -->
+  <!-- Use here -->
   <MediumZoom />
 </template>
 ```
 
 **Note:** The component doesn't render any visible content, so you can place it anywhere in your layout. It will automatically handle image zooming for all images matching the selector.
 
+⚠️ **Important:** You need to add the following configuration to `.vitepress/config.ts`, otherwise the build will fail:
+
+```js
+vite: {
+  ssr: {
+    noExternal: ['vitepress-component-medium-zoom'];
+  }
+}
+```
+
 ## Props
 
 ### selector
@@ -73,6 +84,24 @@ Customize the image selector. This follows the [medium-zoom](https://github.com/
 <MediumZoom selector=".vp-doc img" />
 ```
 
+If you want to exclude certain images from zooming, you can use a custom data attribute and exclude them from the selector.
+
+```vue
+<MediumZoom selector=".vp-doc img:not([data-disable-zoom])" />
+```
+
+**Example:**
+
+```md
+![foo](./assets/foo.png){data-disable-zoom}
+```
+
+or
+
+```vue
+<img src="image.png" data-disable-zoom />
+```
+
 ### options
 
 - **Type**: `ZoomOptions`
@@ -92,16 +121,17 @@ Configuration options for medium-zoom. See the [medium-zoom documentation](https
 />
 ```
 
-If you want to exclude certain images from zooming, you can use a custom data attribute and exclude them from the selector.
+### zIndex
 
-```vue
-<MediumZoom selector=".vp-doc img:not([data-disable-zoom])" />
-```
+- **Type**: `number`
+- **Default**: `999`
+
+Customize the z-index value for the overlay and zoomed image.
 
 **Example:**
 
 ```vue
-<img src="image.png" data-disable-zoom />
+<MediumZoom :z-index="2000" />
 ```
 
 ## How It Works

package/README.zh-CN.md

@@ -21,7 +21,7 @@ pnpm add vitepress-component-medium-zoom
 yarn add vitepress-component-medium-zoom
 ```
 
-## 使用方法
+## 使用
 
 参考 [VitePress Layout Slots](https://vitepress.dev/guide/extending-default-theme#layout-slots)，在布局中直接引入组件。
 
@@ -45,19 +45,30 @@ export default {
 <script setup>
 import DefaultTheme from 'vitepress/theme';
 import { MediumZoom } from 'vitepress-component-medium-zoom';
+import 'vitepress-component-medium-zoom/style.css';
 
 const { Layout } = DefaultTheme;
 </script>
 
 <template>
   <Layout>...</Layout>
-  <!-- 在这里引入 -->
+  <!-- 在这里使用 -->
   <MediumZoom />
 </template>
 ```
 
 **注意：** 该组件不会渲染任何可见内容，因此可以将其放置在布局的任何位置。它会自动处理所有匹配选择器的图片缩放功能。
 
+⚠️ **重要：** 需要把下面这个配置添加到 `.vitepress/config.ts` 中，否则构建会报错：
+
+```js
+vite: {
+  ssr: {
+    noExternal: ['vitepress-component-medium-zoom'];
+  }
+}
+```
+
 ## Props
 
 ### selector
@@ -73,6 +84,24 @@ const { Layout } = DefaultTheme;
 <MediumZoom selector=".vp-doc img" />
 ```
 
+如果某些图像不要 zoom，可以自定义一个 data 值，然后从 selector 中排除掉。
+
+```vue
+<MediumZoom selector=".vp-doc img:not([data-disable-zoom])" />
+```
+
+**示例：**
+
+```md
+![foo](./assets/foo.png){data-disable-zoom}
+```
+
+或
+
+```vue
+<img src="image.png" data-disable-zoom />
+```
+
 ### options
 
 - **类型**: `ZoomOptions`
@@ -92,16 +121,17 @@ medium-zoom 的配置选项。查看 [medium-zoom 文档](https://github.com/fra
 />
 ```
 
-如果某些图像不要 zoom，可以自定义一个 data 值，然后从 selector 中排除掉。
+### zIndex
 
-```vue
-<MediumZoom selector=".vp-doc img:not([data-disable-zoom])" />
-```
+- **类型**: `number`
+- **默认值**: `999`
+
+自定义遮罩层和放大图片的 z-index 值。
 
 **示例：**
 
 ```vue
-<img src="image.png" data-disable-zoom />
+<MediumZoom :z-index="2000" />
 ```
 
 ## 工作原理

package/dist/index.css

@@ -2,6 +2,6 @@
 /* https://github.com/francoischalifour/medium-zoom#debugging */
 .medium-zoom-overlay,
 .medium-zoom-image--opened {
-  z-index: 999;
+  z-index: var(--7055c699-zIndex);
 }
 

package/dist/index.d.ts

@@ -5,10 +5,12 @@ import { ZoomOptions, ZoomSelector } from "medium-zoom";
 type __VLS_Props = {
   selector?: ZoomSelector;
   options?: ZoomOptions;
+  zIndex?: number;
 };
 declare const __VLS_export: vue0.DefineComponent<__VLS_Props, {}, {}, {}, {}, vue0.ComponentOptionsMixin, vue0.ComponentOptionsMixin, {}, string, vue0.PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
   selector: ZoomSelector;
   options: ZoomOptions;
+  zIndex: number;
 }, {}, {}, {}, string, vue0.ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 //#endregion

package/dist/index.js

@@ -1 +1 @@
-import{defineComponent as e,nextTick as t,onBeforeUnmount as n,onMounted as r}from"vue";import{useRouter as i}from"vitepress";import a from"medium-zoom";var o=e({__name:`MediumZoom`,props:{selector:{type:null,required:!1,default:`.vp-doc img`},options:{type:Object,required:!1,default:()=>({})}},setup(e){let o=e,s,c,l=i();l.onAfterRouteChange=u,r(u),n(()=>{clearTimeout(c),s&&(s.detach(),s.close())});function u(){t(()=>{s&&=(s.detach(),s.close(),void 0),clearTimeout(c),c=setTimeout(()=>{s=a(o.selector,{background:`var(--vp-c-bg)`,...o.options})},100)})}return()=>{}}});export{o as MediumZoom};
+import{defineComponent as e,nextTick as t,onBeforeUnmount as n,onMounted as r,useCssVars as i}from"vue";import{useRouter as a}from"vitepress";import o from"medium-zoom";var s=e({__name:`MediumZoom`,props:{selector:{type:null,required:!1,default:`.vp-doc img`},options:{type:Object,required:!1,default:()=>({})},zIndex:{type:Number,required:!1,default:999}},setup(e){i(e=>({"7055c699-zIndex":e.zIndex}));let s=e,c,l,u=a();u.onAfterRouteChange=d,r(d),n(()=>{clearTimeout(l),c&&(c.detach(),c.close())});function d(){t(()=>{c&&=(c.detach(),c.close(),void 0),clearTimeout(l),l=setTimeout(()=>{c=o(s.selector,{background:`var(--vp-c-bg)`,...s.options})},100)})}return()=>{}}});export{s as MediumZoom};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vitepress-component-medium-zoom",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "VitePress image preview component with medium-zoom support",
   "keywords": [
     "vitepress",
@@ -58,10 +58,6 @@
     "vue": "^3.5.26",
     "vue-tsc": "^3.2.1"
   },
-  "peerDependencies": {
-    "vitepress": "^1.0.0",
-    "vue": "^3.0.0"
-  },
   "publishConfig": {
     "access": "public"
   },