vitepress-component-medium-zoom 0.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/LICENSE +21 -0
  2. package/README.md +124 -0
  3. package/README.zh-CN.md +124 -0
  4. package/dist/index.css +7 -0
  5. package/dist/index.d.ts +15 -0
  6. package/dist/index.js +1 -0
  7. package/package.json +79 -0
package/LICENSE ADDED
@@ -0,0 +1,21 @@
1
+ MIT License
2
+
3
+ Copyright (c) 2025-present, Zhifeng (Jeff) Wang<https://github.com/refinist>
4
+
5
+ Permission is hereby granted, free of charge, to any person obtaining a copy
6
+ of this software and associated documentation files (the "Software"), to deal
7
+ in the Software without restriction, including without limitation the rights
8
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9
+ copies of the Software, and to permit persons to whom the Software is
10
+ furnished to do so, subject to the following conditions:
11
+
12
+ The above copyright notice and this permission notice shall be included in all
13
+ copies or substantial portions of the Software.
14
+
15
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21
+ SOFTWARE.
package/README.md ADDED
@@ -0,0 +1,124 @@
1
+ # vitepress-component-medium-zoom
2
+
3
+ English | [中文](./README.zh-CN.md)
4
+
5
+ VitePress image preview component
6
+
7
+ ## Features
8
+
9
+ - 🖼️ Click images to zoom in/out
10
+ - 🔄 Automatically reinitialize on route changes
11
+ - ⚙️ Customizable selector and options
12
+ - 🎨 Built-in z-index styling for overlay
13
+
14
+ ## Installation
15
+
16
+ ```bash
17
+ npm install vitepress-component-medium-zoom
18
+ # or
19
+ pnpm add vitepress-component-medium-zoom
20
+ # or
21
+ yarn add vitepress-component-medium-zoom
22
+ ```
23
+
24
+ ## Usage
25
+
26
+ Refer to [VitePress Layout Slots](https://vitepress.dev/guide/extending-default-theme#layout-slots), import the component directly in your layout.
27
+
28
+ Create or update `.vitepress/theme/index.js`:
29
+
30
+ ```js
31
+ import DefaultTheme from 'vitepress/theme';
32
+ import MyLayout from './MyLayout.vue';
33
+
34
+ export default {
35
+ extends: DefaultTheme,
36
+ // override the Layout with a wrapper component that
37
+ // injects the slots
38
+ Layout: MyLayout
39
+ };
40
+ ```
41
+
42
+ Create or update `.vitepress/theme/MyLayout.vue`:
43
+
44
+ ```vue
45
+ <script setup>
46
+ import DefaultTheme from 'vitepress/theme';
47
+ import { MediumZoom } from 'vitepress-component-medium-zoom';
48
+
49
+ const { Layout } = DefaultTheme;
50
+ </script>
51
+
52
+ <template>
53
+ <Layout>...</Layout>
54
+ <!-- Import here -->
55
+ <MediumZoom />
56
+ </template>
57
+ ```
58
+
59
+ **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.
60
+
61
+ ## Props
62
+
63
+ ### selector
64
+
65
+ - **Type**: `string | HTMLElement | HTMLElement[] | NodeList`
66
+ - **Default**: `'.vp-doc img'`
67
+
68
+ Customize the image selector. This follows the [medium-zoom](https://github.com/francoischalifour/medium-zoom#selectors) selector format.
69
+
70
+ **Example:**
71
+
72
+ ```vue
73
+ <MediumZoom selector=".vp-doc img" />
74
+ ```
75
+
76
+ ### options
77
+
78
+ - **Type**: `ZoomOptions`
79
+ - **Default**: `{}`
80
+
81
+ Configuration options for medium-zoom. See the [medium-zoom documentation](https://github.com/francoischalifour/medium-zoom#options) for available options.
82
+
83
+ **Example:**
84
+
85
+ ```vue
86
+ <MediumZoom
87
+ :selector="'.vp-doc img'"
88
+ :options="{
89
+ background: 'rgba(0, 0, 0, 0.8)',
90
+ margin: 24
91
+ }"
92
+ />
93
+ ```
94
+
95
+ If you want to exclude certain images from zooming, you can use a custom data attribute and exclude them from the selector.
96
+
97
+ ```vue
98
+ <MediumZoom selector=".vp-doc img:not([data-disable-zoom])" />
99
+ ```
100
+
101
+ **Example:**
102
+
103
+ ```vue
104
+ <img src="image.png" data-disable-zoom />
105
+ ```
106
+
107
+ ## How It Works
108
+
109
+ This component uses the [medium-zoom](https://github.com/francoischalifour/medium-zoom) library to provide image zoom functionality. It:
110
+
111
+ 1. Automatically initializes when the component is mounted
112
+ 2. Reinitializes when the route changes (using VitePress router hooks)
113
+ 3. Cleans up resources when the component is unmounted
114
+ 4. Applies appropriate z-index styling to ensure the overlay appears above content
115
+
116
+ ## Reference
117
+
118
+ This component references the design of [@rspress/plugin-medium-zoom](https://rspress.rs/plugin/official-plugins/medium-zoom) from the Rspress documentation framework.
119
+
120
+ ## License
121
+
122
+ [MIT](./LICENSE)
123
+
124
+ Copyright (c) 2026-present, REFINITIST
package/README.zh-CN.md ADDED
@@ -0,0 +1,124 @@
1
+ # vitepress-component-medium-zoom
2
+
3
+ [English](./README.md) | 中文
4
+
5
+ VitePress 图片预览功能组件
6
+
7
+ ## 特性
8
+
9
+ - 🖼️ 点击图片放大/缩小
10
+ - 🔄 路由变化时自动重新初始化
11
+ - ⚙️ 可自定义选择器和配置选项
12
+ - 🎨 内置 z-index 样式，确保遮罩层正确显示
13
+
14
+ ## 安装
15
+
16
+ ```bash
17
+ npm install vitepress-component-medium-zoom
18
+ # 或
19
+ pnpm add vitepress-component-medium-zoom
20
+ # 或
21
+ yarn add vitepress-component-medium-zoom
22
+ ```
23
+
24
+ ## 使用方法
25
+
26
+ 参考 [VitePress Layout Slots](https://vitepress.dev/guide/extending-default-theme#layout-slots)，在布局中直接引入组件。
27
+
28
+ 创建或更新 `.vitepress/theme/index.js`：
29
+
30
+ ```js
31
+ import DefaultTheme from 'vitepress/theme';
32
+ import MyLayout from './MyLayout.vue';
33
+
34
+ export default {
35
+ extends: DefaultTheme,
36
+ // override the Layout with a wrapper component that
37
+ // injects the slots
38
+ Layout: MyLayout
39
+ };
40
+ ```
41
+
42
+ 创建或更新 `.vitepress/theme/MyLayout.vue`：
43
+
44
+ ```vue
45
+ <script setup>
46
+ import DefaultTheme from 'vitepress/theme';
47
+ import { MediumZoom } from 'vitepress-component-medium-zoom';
48
+
49
+ const { Layout } = DefaultTheme;
50
+ </script>
51
+
52
+ <template>
53
+ <Layout>...</Layout>
54
+ <!-- 在这里引入 -->
55
+ <MediumZoom />
56
+ </template>
57
+ ```
58
+
59
+ **注意：** 该组件不会渲染任何可见内容，因此可以将其放置在布局的任何位置。它会自动处理所有匹配选择器的图片缩放功能。
60
+
61
+ ## Props
62
+
63
+ ### selector
64
+
65
+ - **类型**: `string | HTMLElement | HTMLElement[] | NodeList`
66
+ - **默认值**: `'.vp-doc img'`
67
+
68
+ 自定义图片选择器。遵循 [medium-zoom](https://github.com/francoischalifour/medium-zoom#selectors) 的选择器格式。
69
+
70
+ **示例：**
71
+
72
+ ```vue
73
+ <MediumZoom selector=".vp-doc img" />
74
+ ```
75
+
76
+ ### options
77
+
78
+ - **类型**: `ZoomOptions`
79
+ - **默认值**: `{}`
80
+
81
+ medium-zoom 的配置选项。查看 [medium-zoom 文档](https://github.com/francoischalifour/medium-zoom#options) 了解可用的配置选项。
82
+
83
+ **示例：**
84
+
85
+ ```vue
86
+ <MediumZoom
87
+ selector=".vp-doc img"
88
+ :options="{
89
+ background: 'rgba(0, 0, 0, 0.8)',
90
+ margin: 24
91
+ }"
92
+ />
93
+ ```
94
+
95
+ 如果某些图像不要 zoom，可以自定义一个 data 值，然后从 selector 中排除掉。
96
+
97
+ ```vue
98
+ <MediumZoom selector=".vp-doc img:not([data-disable-zoom])" />
99
+ ```
100
+
101
+ **示例：**
102
+
103
+ ```vue
104
+ <img src="image.png" data-disable-zoom />
105
+ ```
106
+
107
+ ## 工作原理
108
+
109
+ 该组件使用 [medium-zoom](https://github.com/francoischalifour/medium-zoom) 库来提供图片缩放功能。它：
110
+
111
+ 1. 组件挂载时自动初始化
112
+ 2. 路由变化时重新初始化（使用 VitePress 路由钩子）
113
+ 3. 组件卸载时清理资源
114
+ 4. 应用适当的 z-index 样式，确保遮罩层显示在内容之上
115
+
116
+ ## 参考
117
+
118
+ 组件参考了 Rspress 文档框架中的 [@rspress/plugin-medium-zoom](https://rspress.rs/plugin/official-plugins/medium-zoom) 的设计。
119
+
120
+ ## License
121
+
122
+ [MIT](./LICENSE)
123
+
124
+ Copyright (c) 2026-present, REFINITIST
package/dist/index.css ADDED
@@ -0,0 +1,7 @@
1
+
2
+ /* https://github.com/francoischalifour/medium-zoom#debugging */
3
+ .medium-zoom-overlay,
4
+ .medium-zoom-image--opened {
5
+ z-index: 999;
6
+ }
7
+
package/dist/index.d.ts ADDED
@@ -0,0 +1,15 @@
1
+ import * as vue0 from "vue";
2
+ import { ZoomOptions, ZoomSelector } from "medium-zoom";
3
+
4
+ //#region src/MediumZoom.vue.d.ts
5
+ type __VLS_Props = {
6
+ selector?: ZoomSelector;
7
+ options?: ZoomOptions;
8
+ };
9
+ declare const __VLS_export: vue0.DefineComponent<__VLS_Props, {}, {}, {}, {}, vue0.ComponentOptionsMixin, vue0.ComponentOptionsMixin, {}, string, vue0.PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
10
+ selector: ZoomSelector;
11
+ options: ZoomOptions;
12
+ }, {}, {}, {}, string, vue0.ComponentProvideOptions, false, {}, any>;
13
+ declare const _default: typeof __VLS_export;
14
+ //#endregion
15
+ export { _default as MediumZoom };
package/dist/index.js ADDED
@@ -0,0 +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};
package/package.json ADDED
@@ -0,0 +1,79 @@
1
+ {
2
+ "name": "vitepress-component-medium-zoom",
3
+ "version": "0.0.1",
4
+ "description": "VitePress image preview component with medium-zoom support",
5
+ "keywords": [
6
+ "vitepress",
7
+ "medium-zoom",
8
+ "image",
9
+ "zoom",
10
+ "preview",
11
+ "vue",
12
+ "vue3",
13
+ "component",
14
+ "markdown"
15
+ ],
16
+ "homepage": "https://github.com/refinist/vitepress-component-medium-zoom#readme",
17
+ "bugs": {
18
+ "url": "https://github.com/refinist/vitepress-component-medium-zoom/issues"
19
+ },
20
+ "repository": {
21
+ "type": "git",
22
+ "url": "git+https://github.com/refinist/vitepress-component-medium-zoom.git"
23
+ },
24
+ "license": "MIT",
25
+ "author": "REFINIST",
26
+ "sideEffects": [
27
+ "dist/index.css"
28
+ ],
29
+ "type": "module",
30
+ "exports": {
31
+ ".": "./dist/index.js",
32
+ "./style.css": "./dist/index.css",
33
+ "./index.css": "./dist/index.css",
34
+ "./package.json": "./package.json"
35
+ },
36
+ "main": "./dist/index.js",
37
+ "module": "./dist/index.js",
38
+ "types": "./dist/index.d.ts",
39
+ "files": [
40
+ "dist"
41
+ ],
42
+ "scripts": {
43
+ "build": "tsdown",
44
+ "dev": "tsdown --watch",
45
+ "format": "prettier --cache --write .",
46
+ "lint": "eslint --cache .",
47
+ "lint:fix": "pnpm run lint --fix",
48
+ "prepublishOnly": "pnpm run build",
49
+ "release": "bumpp",
50
+ "typecheck": "vue-tsc --noEmit"
51
+ },
52
+ "prettier": "@refinist/prettier-config",
53
+ "dependencies": {
54
+ "medium-zoom": "^1.1.0"
55
+ },
56
+ "devDependencies": {
57
+ "@refinist/eslint-config": "^1.0.7",
58
+ "@refinist/prettier-config": "^1.0.1",
59
+ "@types/node": "^22.19.3",
60
+ "@vitejs/plugin-vue": "^6.0.3",
61
+ "bumpp": "^10.3.2",
62
+ "eslint": "^9.39.2",
63
+ "prettier": "^3.7.4",
64
+ "tsdown": "0.19.0-beta.2",
65
+ "typescript": "^5.9.3",
66
+ "vite": "^7.3.0",
67
+ "vitepress": "^1.6.4",
68
+ "vue": "^3.5.26",
69
+ "vue-tsc": "^3.2.1"
70
+ },
71
+ "peerDependencies": {
72
+ "vitepress": "^1.0.0",
73
+ "vue": "^3.0.0"
74
+ },
75
+ "packageManager": "pnpm@10.27.0",
76
+ "publishConfig": {
77
+ "access": "public"
78
+ }
79
+ }