vitepress-plugin-toolkit 0.3.0 → 0.5.0
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.
- package/README.md +391 -0
- package/README.zh-CN.md +389 -0
- package/dist/client/browser/index.d.ts +174 -10
- package/dist/client/browser/index.js +209 -0
- package/dist/client/ssr/index.d.ts +174 -10
- package/dist/client/ssr/index.js +187 -0
- package/dist/node/index.d.ts +420 -45
- package/dist/node/index.js +432 -29
- package/package.json +7 -2
|
@@ -1,20 +1,96 @@
|
|
|
1
1
|
import { Fragment, computed, createElementBlock, createElementVNode, defineComponent, isRef, mergeModels, nextTick, normalizeClass, normalizeStyle, onMounted, openBlock, ref, renderList, shallowRef, toDisplayString, toValue, unref, useModel, watch } from "vue";
|
|
2
2
|
import { useClipboard, useEventListener, useMediaQuery, useMutationObserver } from "@vueuse/core";
|
|
3
3
|
//#region src/shared/link.ts
|
|
4
|
+
/**
|
|
5
|
+
* Regular expression that matches external URLs.
|
|
6
|
+
*
|
|
7
|
+
* Matches URLs that start with a protocol (such as `http:` or `mailto:`) or
|
|
8
|
+
* with `//` (protocol-relative URLs).
|
|
9
|
+
*
|
|
10
|
+
* 匹配外部链接的正则表达式。
|
|
11
|
+
*
|
|
12
|
+
* 匹配以协议(如 `http:` 或 `mailto:`)或 `//`(协议相对链接)开头的 URL。
|
|
13
|
+
*
|
|
14
|
+
* @example
|
|
15
|
+
* EXTERNAL_URL_RE.test('https://example.com') // true
|
|
16
|
+
* EXTERNAL_URL_RE.test('//cdn.example.com/lib.js') // true
|
|
17
|
+
* EXTERNAL_URL_RE.test('/about') // false
|
|
18
|
+
*/
|
|
4
19
|
const EXTERNAL_URL_RE = /^(?:[a-z]+:|\/\/)/i;
|
|
20
|
+
/**
|
|
21
|
+
* Checks whether the given path is an external URL.
|
|
22
|
+
*
|
|
23
|
+
* 判断给定路径是否为外部链接。
|
|
24
|
+
*
|
|
25
|
+
* @param path - The path to check / 要检查的路径
|
|
26
|
+
* @returns `true` if the path is an external URL, otherwise `false` / 若为外部链接返回 `true`,否则返回 `false`
|
|
27
|
+
* @example
|
|
28
|
+
* isExternal('https://example.com') // true
|
|
29
|
+
* isExternal('//cdn.example.com/lib.js') // true
|
|
30
|
+
* isExternal('/about') // false
|
|
31
|
+
* isExternal('mailto:foo@example.com') // true
|
|
32
|
+
*/
|
|
5
33
|
function isExternal(path) {
|
|
6
34
|
return EXTERNAL_URL_RE.test(path);
|
|
7
35
|
}
|
|
36
|
+
/**
|
|
37
|
+
* Regular expression that matches the protocol scheme of a URL.
|
|
38
|
+
*
|
|
39
|
+
* Matches the leading protocol portion such as `http:`, `https:`, or
|
|
40
|
+
* `mailto:`. Does not match protocol-relative URLs (`//`).
|
|
41
|
+
*
|
|
42
|
+
* 匹配 URL 协议部分的正则表达式。
|
|
43
|
+
*
|
|
44
|
+
* 匹配前导协议部分,如 `http:`、`https:` 或 `mailto:`。
|
|
45
|
+
* 不匹配协议相对链接(`//`)。
|
|
46
|
+
*
|
|
47
|
+
* @example
|
|
48
|
+
* URL_PROTOCOL_RE.test('https://example.com') // true
|
|
49
|
+
* URL_PROTOCOL_RE.test('mailto:foo@example.com') // true
|
|
50
|
+
* URL_PROTOCOL_RE.test('//cdn.example.com/lib.js') // false
|
|
51
|
+
*/
|
|
8
52
|
const URL_PROTOCOL_RE = /^[a-z][a-z0-9+.-]*:/;
|
|
53
|
+
/**
|
|
54
|
+
* Checks whether the given link contains a URL protocol scheme or is a
|
|
55
|
+
* protocol-relative URL.
|
|
56
|
+
*
|
|
57
|
+
* Unlike {@link isExternal}, this function also matches links that start with
|
|
58
|
+
* `//` via an additional check, in addition to those matched by
|
|
59
|
+
* {@link URL_PROTOCOL_RE}.
|
|
60
|
+
*
|
|
61
|
+
* 判断给定链接是否包含 URL 协议部分或为协议相对链接。
|
|
62
|
+
*
|
|
63
|
+
* 与 {@link isExternal} 不同,此函数除了匹配 {@link URL_PROTOCOL_RE} 之外,
|
|
64
|
+
* 还会通过额外检查匹配以 `//` 开头的链接。
|
|
65
|
+
*
|
|
66
|
+
* @param link - The link to check / 要检查的链接
|
|
67
|
+
* @returns `true` if the link has a protocol or starts with `//` / 若链接包含协议或以 `//` 开头则返回 `true`
|
|
68
|
+
* @example
|
|
69
|
+
* isLinkWithProtocol('https://example.com') // true
|
|
70
|
+
* isLinkWithProtocol('mailto:foo@example.com') // true
|
|
71
|
+
* isLinkWithProtocol('//cdn.example.com/lib.js') // true
|
|
72
|
+
* isLinkWithProtocol('/about') // false
|
|
73
|
+
*/
|
|
9
74
|
function isLinkWithProtocol(link) {
|
|
10
75
|
return URL_PROTOCOL_RE.test(link) || link.startsWith("//");
|
|
11
76
|
}
|
|
12
77
|
//#endregion
|
|
13
78
|
//#region src/client/components/VPCopyButton.vue
|
|
79
|
+
/** Text to copy to the clipboard / 要复制到剪贴板的文本 */
|
|
14
80
|
const _sfc_main = /*@__PURE__*/ defineComponent({
|
|
15
81
|
__name: "VPCopyButton",
|
|
16
82
|
props: { text: {} },
|
|
17
83
|
setup(__props) {
|
|
84
|
+
/**
|
|
85
|
+
* A button component that copies the given text to the clipboard.
|
|
86
|
+
*
|
|
87
|
+
* 复制指定文本到剪贴板的按钮组件。
|
|
88
|
+
*
|
|
89
|
+
* @example
|
|
90
|
+
* ```vue
|
|
91
|
+
* <VPCopyButton text="Hello, world!" />
|
|
92
|
+
* ```
|
|
93
|
+
*/
|
|
18
94
|
const { copied, copy } = useClipboard();
|
|
19
95
|
return (_ctx, _cache) => {
|
|
20
96
|
return openBlock(), createElementBlock("button", {
|
|
@@ -35,6 +111,18 @@ const _sfc_main$1 = /*@__PURE__*/ defineComponent({
|
|
|
35
111
|
height: {}
|
|
36
112
|
},
|
|
37
113
|
setup(__props) {
|
|
114
|
+
/**
|
|
115
|
+
* A loading indicator component with an animated SVG spinner.
|
|
116
|
+
*
|
|
117
|
+
* 带有 SVG 动画旋转图标的加载指示器组件。
|
|
118
|
+
*
|
|
119
|
+
* @example
|
|
120
|
+
* ```vue
|
|
121
|
+
* <VPLoading />
|
|
122
|
+
*
|
|
123
|
+
* <VPLoading absolute height="200px" />
|
|
124
|
+
* ```
|
|
125
|
+
*/
|
|
38
126
|
return (_ctx, _cache) => {
|
|
39
127
|
return openBlock(), createElementBlock("div", {
|
|
40
128
|
class: normalizeClass(["vp-loading", { absolute: __props.absolute }]),
|
|
@@ -71,6 +159,7 @@ const _sfc_main$1 = /*@__PURE__*/ defineComponent({
|
|
|
71
159
|
//#region src/client/components/VPTabSwitch.vue
|
|
72
160
|
const _hoisted_1 = { class: "vp-tab-switch-list" };
|
|
73
161
|
const _hoisted_2 = ["onClick"];
|
|
162
|
+
/** List of tab items to render / 要渲染的标签项列表 */
|
|
74
163
|
const _sfc_main$2 = /*@__PURE__*/ defineComponent({
|
|
75
164
|
__name: "VPTabSwitch",
|
|
76
165
|
props: /*@__PURE__*/ mergeModels({ items: {} }, {
|
|
@@ -79,11 +168,34 @@ const _sfc_main$2 = /*@__PURE__*/ defineComponent({
|
|
|
79
168
|
}),
|
|
80
169
|
emits: /*@__PURE__*/ mergeModels(["update"], ["update:modelValue"]),
|
|
81
170
|
setup(__props, { emit: __emit }) {
|
|
171
|
+
/**
|
|
172
|
+
* A tab switcher component that renders a list of selectable tab buttons.
|
|
173
|
+
*
|
|
174
|
+
* 渲染一组可选标签按钮的标签切换组件。
|
|
175
|
+
*
|
|
176
|
+
* @example
|
|
177
|
+
* ```vue
|
|
178
|
+
* <VPTabSwitch
|
|
179
|
+
* v-model="active"
|
|
180
|
+
* :items="[{ value: 'a', label: 'A' }, { value: 'b', label: 'B' }]"
|
|
181
|
+
* @update="onTabChange"
|
|
182
|
+
* />
|
|
183
|
+
* ```
|
|
184
|
+
*/
|
|
185
|
+
/** Emitted when the active tab changes / 当活动标签切换时触发 */
|
|
82
186
|
const emit = __emit;
|
|
187
|
+
/** Current active tab value (v-model) / 当前活动标签的值(v-model) */
|
|
83
188
|
const tab = useModel(__props, "modelValue");
|
|
84
189
|
watch(() => __props.items, () => {
|
|
85
190
|
tab.value = __props.items[0].value;
|
|
86
191
|
});
|
|
192
|
+
/**
|
|
193
|
+
* Handle tab button click, updating the active tab and emitting the update event.
|
|
194
|
+
*
|
|
195
|
+
* 处理标签按钮点击,更新活动标签并触发 update 事件。
|
|
196
|
+
*
|
|
197
|
+
* @param item - The clicked tab item / 被点击的标签项
|
|
198
|
+
*/
|
|
87
199
|
function onClick(item) {
|
|
88
200
|
tab.value = item;
|
|
89
201
|
emit("update", item);
|
|
@@ -101,6 +213,23 @@ const _sfc_main$2 = /*@__PURE__*/ defineComponent({
|
|
|
101
213
|
});
|
|
102
214
|
//#endregion
|
|
103
215
|
//#region src/client/composables/use-size.ts
|
|
216
|
+
/**
|
|
217
|
+
* Composable that provides reactive size tracking for an element based on width,
|
|
218
|
+
* height, and aspect ratio options.
|
|
219
|
+
*
|
|
220
|
+
* 基于宽度、高度和宽高比选项为元素提供响应式尺寸追踪的组合式函数。
|
|
221
|
+
*
|
|
222
|
+
* @template T - HTMLElement type of the target element / 目标元素的 HTMLElement 类型
|
|
223
|
+
* @param el - Template ref to the target element / 目标元素的模板 ref
|
|
224
|
+
* @param options - Reactive size options (width, height, ratio) / 响应式尺寸选项(width、height、ratio)
|
|
225
|
+
* @param extraHeight - Extra height in pixels to add to the computed height / 要加到计算高度上的额外像素高度
|
|
226
|
+
* @returns Reactive size info with width, height, and a resize function / 包含 width、height 和 resize 函数的响应式尺寸信息
|
|
227
|
+
* @example
|
|
228
|
+
* ```ts
|
|
229
|
+
* const el = ref<HTMLElement>()
|
|
230
|
+
* const { width, height, resize } = useSize(el, toRefs({ width: '100%', ratio: '16:9' }))
|
|
231
|
+
* ```
|
|
232
|
+
*/
|
|
104
233
|
function useSize(el, options, extraHeight = 0) {
|
|
105
234
|
const width = computed(() => toValue(options.width) || "100%");
|
|
106
235
|
const height = ref("auto");
|
|
@@ -124,6 +253,27 @@ function useSize(el, options, extraHeight = 0) {
|
|
|
124
253
|
resize
|
|
125
254
|
};
|
|
126
255
|
}
|
|
256
|
+
/**
|
|
257
|
+
* Parse a ratio value into a numeric width-to-height ratio.
|
|
258
|
+
*
|
|
259
|
+
* 将宽高比值解析为数值形式的宽高比。
|
|
260
|
+
*
|
|
261
|
+
* Accepts a number, a string like `"16:9"`, or `undefined` (defaults to 16:9).
|
|
262
|
+
*
|
|
263
|
+
* 接受数字、形如 `"16:9"` 的字符串或 `undefined`(默认为 16:9)。
|
|
264
|
+
*
|
|
265
|
+
* @param ratio - Ratio value, can be:
|
|
266
|
+
* - `number`: Used directly as the ratio / 直接作为宽高比
|
|
267
|
+
* - `string`: Parsed from "width:height" format / 从 "width:height" 格式解析
|
|
268
|
+
* - `undefined`: Defaults to 16/9 / 默认为 16/9
|
|
269
|
+
* @returns Numeric width-to-height ratio / 数值形式的宽高比
|
|
270
|
+
* @example
|
|
271
|
+
* ```ts
|
|
272
|
+
* getRadio(2) // 2
|
|
273
|
+
* getRadio('16:9') // 1.777...
|
|
274
|
+
* getRadio(undefined) // 1.777...
|
|
275
|
+
* ```
|
|
276
|
+
*/
|
|
127
277
|
function getRadio(ratio) {
|
|
128
278
|
if (typeof ratio === "string") {
|
|
129
279
|
const [width, height] = ratio.split(":");
|
|
@@ -134,6 +284,26 @@ function getRadio(ratio) {
|
|
|
134
284
|
}
|
|
135
285
|
//#endregion
|
|
136
286
|
//#region src/client/composables/use-zoom-and-drag.ts
|
|
287
|
+
/**
|
|
288
|
+
* Composable that provides zoom and drag interaction for a content stage,
|
|
289
|
+
* supporting mouse drag, touch drag, pinch-to-zoom, and programmatic zoom.
|
|
290
|
+
*
|
|
291
|
+
* 为内容舞台提供缩放和拖拽交互的组合式函数,支持鼠标拖拽、触摸拖拽、双指缩放和编程式缩放。
|
|
292
|
+
*
|
|
293
|
+
* @param parentEl - Template ref to the stage container element / 舞台容器元素的模板 ref
|
|
294
|
+
* @returns Interaction controls and reactive state, including:
|
|
295
|
+
* - `actorStyle`: Reactive style object for the actor element / actor 元素的响应式样式对象
|
|
296
|
+
* - `zoom`: Reactive zoom percentage string / 响应式缩放百分比字符串
|
|
297
|
+
* - `reset`: Reset layout to fit the stage / 重置布局以适配舞台
|
|
298
|
+
* - `zoomIn`: Zoom in by one step / 放大一个步长
|
|
299
|
+
* - `zoomOut`: Zoom out by one step / 缩小一个步长
|
|
300
|
+
* - `resetZoom`: Reset zoom to the initial state / 重置缩放至初始状态
|
|
301
|
+
* @example
|
|
302
|
+
* ```ts
|
|
303
|
+
* const stageEl = ref<HTMLDivElement>()
|
|
304
|
+
* const { actorStyle, zoom, zoomIn, zoomOut, resetZoom, reset } = useZoomAndDrag(stageEl)
|
|
305
|
+
* ```
|
|
306
|
+
*/
|
|
137
307
|
function useZoomAndDrag(parentEl) {
|
|
138
308
|
const actorEl = shallowRef();
|
|
139
309
|
let ratio = 0;
|
|
@@ -155,6 +325,14 @@ function useZoomAndDrag(parentEl) {
|
|
|
155
325
|
attributes: false
|
|
156
326
|
});
|
|
157
327
|
onMounted(() => nextTick(initialize));
|
|
328
|
+
/**
|
|
329
|
+
* Initialize the actor layout by measuring content size and computing the
|
|
330
|
+
* initial zoom, position, and stage height to fit the available space.
|
|
331
|
+
*
|
|
332
|
+
* 通过测量内容尺寸并计算初始缩放、位置和舞台高度来初始化 actor 布局,以适配可用空间。
|
|
333
|
+
*
|
|
334
|
+
* @param isFullscreen - Whether the stage is in fullscreen mode / 舞台是否处于全屏模式
|
|
335
|
+
*/
|
|
158
336
|
function initialize(isFullscreen = false) {
|
|
159
337
|
if (!parentEl.value) return;
|
|
160
338
|
const actor = parentEl.value.querySelector(".content");
|
|
@@ -248,6 +426,16 @@ function useZoomAndDrag(parentEl) {
|
|
|
248
426
|
useEventListener(parentEl, "touchend", () => {
|
|
249
427
|
isDragging = false;
|
|
250
428
|
}, { passive: false });
|
|
429
|
+
/**
|
|
430
|
+
* Adjust the zoom level by a fixed step, or reset to the initial state.
|
|
431
|
+
*
|
|
432
|
+
* 按固定步长调整缩放级别,或重置到初始状态。
|
|
433
|
+
*
|
|
434
|
+
* @param type - Zoom direction, can be:
|
|
435
|
+
* - `1`: Zoom in by one step / 放大一个步长
|
|
436
|
+
* - `-1`: Zoom out by one step / 缩小一个步长
|
|
437
|
+
* - `0`: Reset to the initial zoom and position / 重置到初始缩放和位置
|
|
438
|
+
*/
|
|
251
439
|
function zoom(type) {
|
|
252
440
|
if (typeof width.value === "undefined" || !actorEl.value) return;
|
|
253
441
|
if (type === 0) {
|
|
@@ -265,6 +453,12 @@ function useZoomAndDrag(parentEl) {
|
|
|
265
453
|
}
|
|
266
454
|
}
|
|
267
455
|
let zoomTimer;
|
|
456
|
+
/**
|
|
457
|
+
* Temporarily add a `zooming` class to the actor element to enable CSS
|
|
458
|
+
* transitions during zoom, and remove it after the transition completes.
|
|
459
|
+
*
|
|
460
|
+
* 临时为 actor 元素添加 `zooming` 类以在缩放时启用 CSS 过渡,并在过渡结束后移除该类。
|
|
461
|
+
*/
|
|
268
462
|
function zooming() {
|
|
269
463
|
actorEl.value?.classList.add("zooming");
|
|
270
464
|
if (zoomTimer) clearTimeout(zoomTimer);
|
|
@@ -288,9 +482,24 @@ function useZoomAndDrag(parentEl) {
|
|
|
288
482
|
}
|
|
289
483
|
//#endregion
|
|
290
484
|
//#region src/client/utils/env.ts
|
|
485
|
+
/**
|
|
486
|
+
* Get the platform string of the user device, preferring UA-CH data over the
|
|
487
|
+
* legacy `navigator.platform`.
|
|
488
|
+
*
|
|
489
|
+
* 获取用户设备的平台字符串,优先使用 UA-CH 数据,其次使用传统的 `navigator.platform`。
|
|
490
|
+
*
|
|
491
|
+
* @returns Platform string / 平台字符串
|
|
492
|
+
*/
|
|
291
493
|
function getPlatform() {
|
|
292
494
|
return navigator.userAgentData?.platform ?? navigator.platform;
|
|
293
495
|
}
|
|
496
|
+
/**
|
|
497
|
+
* Get the user agent string of the browser.
|
|
498
|
+
*
|
|
499
|
+
* 获取浏览器的 user agent 字符串。
|
|
500
|
+
*
|
|
501
|
+
* @returns User agent string / user agent 字符串
|
|
502
|
+
*/
|
|
294
503
|
const getUA = () => navigator.userAgent;
|
|
295
504
|
/**
|
|
296
505
|
* Check if the user device is iPhone or iPod.
|
|
@@ -1,39 +1,130 @@
|
|
|
1
1
|
import { MaybeRef, Ref, TemplateRef, ToRefs } from "vue";
|
|
2
2
|
|
|
3
3
|
//#region src/shared/link.d.ts
|
|
4
|
+
/**
|
|
5
|
+
* Regular expression that matches external URLs.
|
|
6
|
+
*
|
|
7
|
+
* Matches URLs that start with a protocol (such as `http:` or `mailto:`) or
|
|
8
|
+
* with `//` (protocol-relative URLs).
|
|
9
|
+
*
|
|
10
|
+
* 匹配外部链接的正则表达式。
|
|
11
|
+
*
|
|
12
|
+
* 匹配以协议(如 `http:` 或 `mailto:`)或 `//`(协议相对链接)开头的 URL。
|
|
13
|
+
*
|
|
14
|
+
* @example
|
|
15
|
+
* EXTERNAL_URL_RE.test('https://example.com') // true
|
|
16
|
+
* EXTERNAL_URL_RE.test('//cdn.example.com/lib.js') // true
|
|
17
|
+
* EXTERNAL_URL_RE.test('/about') // false
|
|
18
|
+
*/
|
|
4
19
|
declare const EXTERNAL_URL_RE: RegExp;
|
|
20
|
+
/**
|
|
21
|
+
* Checks whether the given path is an external URL.
|
|
22
|
+
*
|
|
23
|
+
* 判断给定路径是否为外部链接。
|
|
24
|
+
*
|
|
25
|
+
* @param path - The path to check / 要检查的路径
|
|
26
|
+
* @returns `true` if the path is an external URL, otherwise `false` / 若为外部链接返回 `true`,否则返回 `false`
|
|
27
|
+
* @example
|
|
28
|
+
* isExternal('https://example.com') // true
|
|
29
|
+
* isExternal('//cdn.example.com/lib.js') // true
|
|
30
|
+
* isExternal('/about') // false
|
|
31
|
+
* isExternal('mailto:foo@example.com') // true
|
|
32
|
+
*/
|
|
5
33
|
declare function isExternal(path: string): boolean;
|
|
34
|
+
/**
|
|
35
|
+
* Regular expression that matches the protocol scheme of a URL.
|
|
36
|
+
*
|
|
37
|
+
* Matches the leading protocol portion such as `http:`, `https:`, or
|
|
38
|
+
* `mailto:`. Does not match protocol-relative URLs (`//`).
|
|
39
|
+
*
|
|
40
|
+
* 匹配 URL 协议部分的正则表达式。
|
|
41
|
+
*
|
|
42
|
+
* 匹配前导协议部分,如 `http:`、`https:` 或 `mailto:`。
|
|
43
|
+
* 不匹配协议相对链接(`//`)。
|
|
44
|
+
*
|
|
45
|
+
* @example
|
|
46
|
+
* URL_PROTOCOL_RE.test('https://example.com') // true
|
|
47
|
+
* URL_PROTOCOL_RE.test('mailto:foo@example.com') // true
|
|
48
|
+
* URL_PROTOCOL_RE.test('//cdn.example.com/lib.js') // false
|
|
49
|
+
*/
|
|
6
50
|
declare const URL_PROTOCOL_RE: RegExp;
|
|
51
|
+
/**
|
|
52
|
+
* Checks whether the given link contains a URL protocol scheme or is a
|
|
53
|
+
* protocol-relative URL.
|
|
54
|
+
*
|
|
55
|
+
* Unlike {@link isExternal}, this function also matches links that start with
|
|
56
|
+
* `//` via an additional check, in addition to those matched by
|
|
57
|
+
* {@link URL_PROTOCOL_RE}.
|
|
58
|
+
*
|
|
59
|
+
* 判断给定链接是否包含 URL 协议部分或为协议相对链接。
|
|
60
|
+
*
|
|
61
|
+
* 与 {@link isExternal} 不同,此函数除了匹配 {@link URL_PROTOCOL_RE} 之外,
|
|
62
|
+
* 还会通过额外检查匹配以 `//` 开头的链接。
|
|
63
|
+
*
|
|
64
|
+
* @param link - The link to check / 要检查的链接
|
|
65
|
+
* @returns `true` if the link has a protocol or starts with `//` / 若链接包含协议或以 `//` 开头则返回 `true`
|
|
66
|
+
* @example
|
|
67
|
+
* isLinkWithProtocol('https://example.com') // true
|
|
68
|
+
* isLinkWithProtocol('mailto:foo@example.com') // true
|
|
69
|
+
* isLinkWithProtocol('//cdn.example.com/lib.js') // true
|
|
70
|
+
* isLinkWithProtocol('/about') // false
|
|
71
|
+
*/
|
|
7
72
|
declare function isLinkWithProtocol(link: string): boolean;
|
|
8
73
|
//#endregion
|
|
9
74
|
//#region src/shared/size.d.ts
|
|
10
75
|
/**
|
|
11
|
-
*
|
|
76
|
+
* Options for describing the size of an element.
|
|
77
|
+
*
|
|
78
|
+
* Used by plugins to normalize width, height, and aspect ratio inputs into a
|
|
79
|
+
* consistent CSS-friendly form.
|
|
12
80
|
*
|
|
13
|
-
*
|
|
81
|
+
* 描述元素尺寸的选项。
|
|
82
|
+
*
|
|
83
|
+
* 供插件使用,将宽度、高度和宽高比输入归一化为一致的 CSS 友好形式。
|
|
84
|
+
*
|
|
85
|
+
* @example
|
|
86
|
+
* const options: SizeOptions = {
|
|
87
|
+
* width: '100%',
|
|
88
|
+
* ratio: 16 / 9,
|
|
89
|
+
* }
|
|
14
90
|
*/
|
|
15
91
|
interface SizeOptions {
|
|
16
92
|
/**
|
|
17
|
-
* Width
|
|
93
|
+
* Width of the element, expressed as a CSS value.
|
|
94
|
+
*
|
|
95
|
+
* 元素的宽度,以 CSS 值表示。
|
|
18
96
|
*
|
|
19
|
-
*
|
|
97
|
+
* @example
|
|
98
|
+
* '100%' | '640px' | 'auto'
|
|
20
99
|
*/
|
|
21
100
|
width?: string;
|
|
22
101
|
/**
|
|
23
|
-
* Height
|
|
102
|
+
* Height of the element, expressed as a CSS value.
|
|
24
103
|
*
|
|
25
|
-
*
|
|
104
|
+
* 元素的高度,以 CSS 值表示。
|
|
105
|
+
*
|
|
106
|
+
* @example
|
|
107
|
+
* '100%' | '360px' | 'auto'
|
|
26
108
|
*/
|
|
27
109
|
height?: string;
|
|
28
110
|
/**
|
|
29
|
-
* Aspect ratio
|
|
111
|
+
* Aspect ratio of the element. Can be:
|
|
112
|
+
* - `number`: Numeric ratio (for example `16 / 9` represents 16:9)
|
|
113
|
+
* - `string`: CSS aspect-ratio value (for example `'16 / 9'` or `'1.77'`)
|
|
114
|
+
*
|
|
115
|
+
* 元素的宽高比。可以是:
|
|
116
|
+
* - `number`:数字比例(例如 `16 / 9` 表示 16:9)
|
|
117
|
+
* - `string`:CSS aspect-ratio 值(例如 `'16 / 9'` 或 `'1.77'`)
|
|
30
118
|
*
|
|
31
|
-
*
|
|
119
|
+
* @example
|
|
120
|
+
* 16 / 9
|
|
121
|
+
* '16 / 9'
|
|
32
122
|
*/
|
|
33
123
|
ratio?: number | string;
|
|
34
124
|
}
|
|
35
125
|
//#endregion
|
|
36
126
|
//#region src/client/components/VPCopyButton.vue.d.ts
|
|
127
|
+
/** Text to copy to the clipboard / 要复制到剪贴板的文本 */
|
|
37
128
|
type __VLS_Props$1 = {
|
|
38
129
|
text: string;
|
|
39
130
|
};
|
|
@@ -41,23 +132,44 @@ declare const __VLS_export$2: import("vue").DefineComponent<__VLS_Props$1, {}, {
|
|
|
41
132
|
declare const _default: typeof __VLS_export$2;
|
|
42
133
|
//#endregion
|
|
43
134
|
//#region src/client/components/VPLoading.vue.d.ts
|
|
135
|
+
/**
|
|
136
|
+
* A loading indicator component with an animated SVG spinner.
|
|
137
|
+
*
|
|
138
|
+
* 带有 SVG 动画旋转图标的加载指示器组件。
|
|
139
|
+
*
|
|
140
|
+
* @example
|
|
141
|
+
* ```vue
|
|
142
|
+
* <VPLoading />
|
|
143
|
+
*
|
|
144
|
+
* <VPLoading absolute height="200px" />
|
|
145
|
+
* ```
|
|
146
|
+
*/
|
|
44
147
|
type __VLS_Props = {
|
|
45
|
-
absolute?: boolean;
|
|
148
|
+
/** Whether to position the loader absolutely / 是否以绝对定位渲染加载器 */absolute?: boolean; /** Custom height for the loading container / 加载容器的自定义高度 */
|
|
46
149
|
height?: string;
|
|
47
150
|
};
|
|
48
151
|
declare const __VLS_export$1: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
|
|
49
152
|
declare const _default$1: typeof __VLS_export$1;
|
|
50
153
|
//#endregion
|
|
51
154
|
//#region src/client/components/VPTabSwitch.vue.d.ts
|
|
155
|
+
/**
|
|
156
|
+
* Represents a single tab item.
|
|
157
|
+
*
|
|
158
|
+
* 表示单个标签项。
|
|
159
|
+
*
|
|
160
|
+
* @template T - Type of the tab value / 标签值的类型
|
|
161
|
+
*/
|
|
52
162
|
interface Item<T> {
|
|
163
|
+
/** Value of the tab item / 标签项的值 */
|
|
53
164
|
value: T;
|
|
165
|
+
/** Display label of the tab item / 标签项的显示文本 */
|
|
54
166
|
label: string;
|
|
55
167
|
}
|
|
56
168
|
declare const __VLS_export: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
|
|
57
169
|
props: import("vue").PublicProps & __VLS_PrettifyLocal<({
|
|
58
170
|
items: Item<T>[];
|
|
59
171
|
} & {
|
|
60
|
-
modelValue?: T;
|
|
172
|
+
/** Current active tab value (v-model) / 当前活动标签的值(v-model) */modelValue?: T;
|
|
61
173
|
}) & {
|
|
62
174
|
onUpdate?: ((tab: T) => any) | undefined;
|
|
63
175
|
"onUpdate:modelValue"?: ((value: T | undefined) => any) | undefined;
|
|
@@ -75,14 +187,59 @@ declare const _default$2: typeof __VLS_export;
|
|
|
75
187
|
type __VLS_PrettifyLocal<T> = (T extends any ? { [K in keyof T]: T[K] } : { [K in keyof T as K]: T[K] }) & {};
|
|
76
188
|
//#endregion
|
|
77
189
|
//#region src/client/composables/use-size.d.ts
|
|
190
|
+
/**
|
|
191
|
+
* Reactive size information returned by `useSize`.
|
|
192
|
+
*
|
|
193
|
+
* `useSize` 返回的响应式尺寸信息。
|
|
194
|
+
*/
|
|
78
195
|
interface SizeInfo {
|
|
196
|
+
/** Reactive width value (e.g. "100%" or "500px") / 响应式宽度值(例如 "100%" 或 "500px") */
|
|
79
197
|
width: Ref<string>;
|
|
198
|
+
/** Reactive height value (e.g. "auto" or "300px") / 响应式高度值(例如 "auto" 或 "300px") */
|
|
80
199
|
height: Ref<string>;
|
|
200
|
+
/** Manually trigger a size recalculation / 手动触发尺寸重新计算 */
|
|
81
201
|
resize: () => void;
|
|
82
202
|
}
|
|
203
|
+
/**
|
|
204
|
+
* Composable that provides reactive size tracking for an element based on width,
|
|
205
|
+
* height, and aspect ratio options.
|
|
206
|
+
*
|
|
207
|
+
* 基于宽度、高度和宽高比选项为元素提供响应式尺寸追踪的组合式函数。
|
|
208
|
+
*
|
|
209
|
+
* @template T - HTMLElement type of the target element / 目标元素的 HTMLElement 类型
|
|
210
|
+
* @param el - Template ref to the target element / 目标元素的模板 ref
|
|
211
|
+
* @param options - Reactive size options (width, height, ratio) / 响应式尺寸选项(width、height、ratio)
|
|
212
|
+
* @param extraHeight - Extra height in pixels to add to the computed height / 要加到计算高度上的额外像素高度
|
|
213
|
+
* @returns Reactive size info with width, height, and a resize function / 包含 width、height 和 resize 函数的响应式尺寸信息
|
|
214
|
+
* @example
|
|
215
|
+
* ```ts
|
|
216
|
+
* const el = ref<HTMLElement>()
|
|
217
|
+
* const { width, height, resize } = useSize(el, toRefs({ width: '100%', ratio: '16:9' }))
|
|
218
|
+
* ```
|
|
219
|
+
*/
|
|
83
220
|
declare function useSize<T extends HTMLElement>(el: TemplateRef<T>, options: ToRefs<SizeOptions>, extraHeight?: MaybeRef<number>): SizeInfo;
|
|
84
221
|
//#endregion
|
|
85
222
|
//#region src/client/composables/use-zoom-and-drag.d.ts
|
|
223
|
+
/**
|
|
224
|
+
* Composable that provides zoom and drag interaction for a content stage,
|
|
225
|
+
* supporting mouse drag, touch drag, pinch-to-zoom, and programmatic zoom.
|
|
226
|
+
*
|
|
227
|
+
* 为内容舞台提供缩放和拖拽交互的组合式函数,支持鼠标拖拽、触摸拖拽、双指缩放和编程式缩放。
|
|
228
|
+
*
|
|
229
|
+
* @param parentEl - Template ref to the stage container element / 舞台容器元素的模板 ref
|
|
230
|
+
* @returns Interaction controls and reactive state, including:
|
|
231
|
+
* - `actorStyle`: Reactive style object for the actor element / actor 元素的响应式样式对象
|
|
232
|
+
* - `zoom`: Reactive zoom percentage string / 响应式缩放百分比字符串
|
|
233
|
+
* - `reset`: Reset layout to fit the stage / 重置布局以适配舞台
|
|
234
|
+
* - `zoomIn`: Zoom in by one step / 放大一个步长
|
|
235
|
+
* - `zoomOut`: Zoom out by one step / 缩小一个步长
|
|
236
|
+
* - `resetZoom`: Reset zoom to the initial state / 重置缩放至初始状态
|
|
237
|
+
* @example
|
|
238
|
+
* ```ts
|
|
239
|
+
* const stageEl = ref<HTMLDivElement>()
|
|
240
|
+
* const { actorStyle, zoom, zoomIn, zoomOut, resetZoom, reset } = useZoomAndDrag(stageEl)
|
|
241
|
+
* ```
|
|
242
|
+
*/
|
|
86
243
|
declare function useZoomAndDrag(parentEl: TemplateRef<HTMLDivElement>): {
|
|
87
244
|
actorStyle: import("vue").ComputedRef<{
|
|
88
245
|
left: string;
|
|
@@ -98,8 +255,15 @@ declare function useZoomAndDrag(parentEl: TemplateRef<HTMLDivElement>): {
|
|
|
98
255
|
};
|
|
99
256
|
//#endregion
|
|
100
257
|
//#region src/client/utils/env.d.ts
|
|
258
|
+
/**
|
|
259
|
+
* User-Agent Client Hints data provided by modern browsers.
|
|
260
|
+
*
|
|
261
|
+
* 现代浏览器提供的 User-Agent 客户端提示数据。
|
|
262
|
+
*/
|
|
101
263
|
interface NavigatorUAData {
|
|
264
|
+
/** Operating system platform identifier / 操作系统平台标识符 */
|
|
102
265
|
platform?: string;
|
|
266
|
+
/** Whether the device is a mobile device / 设备是否为移动设备 */
|
|
103
267
|
mobile?: boolean;
|
|
104
268
|
}
|
|
105
269
|
declare global {
|