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.
@@ -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
- * Size Options
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 {