vitepress-plugin-toolkit 0.2.0 → 0.3.0

package/dist/client/browser/index.d.ts

@@ -37,16 +37,42 @@ interface SizeOptions {
 type __VLS_Props$1 = {
   text: string;
 };
-declare const __VLS_export$1: import("vue").DefineComponent<__VLS_Props$1, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props$1> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-declare const _default: typeof __VLS_export$1;
+declare const __VLS_export$2: import("vue").DefineComponent<__VLS_Props$1, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props$1> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export$2;
 //#endregion
 //#region src/client/components/VPLoading.vue.d.ts
 type __VLS_Props = {
   absolute?: boolean;
   height?: string;
 };
-declare const __VLS_export: 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>;
-declare const _default$1: typeof __VLS_export;
+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>;
+declare const _default$1: typeof __VLS_export$1;
+//#endregion
+//#region src/client/components/VPTabSwitch.vue.d.ts
+interface Item<T> {
+  value: T;
+  label: string;
+}
+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<{
+  props: import("vue").PublicProps & __VLS_PrettifyLocal<({
+    items: Item<T>[];
+  } & {
+    modelValue?: T;
+  }) & {
+    onUpdate?: ((tab: T) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: T | undefined) => any) | undefined;
+  }> & (typeof globalThis extends {
+    __VLS_PROPS_FALLBACK: infer P;
+  } ? P : {});
+  expose: (exposed: {}) => void;
+  attrs: any;
+  slots: {};
+  emit: ((evt: "update", tab: T) => void) & ((event: "update:modelValue", value: T | undefined) => void);
+}>) => import("vue").VNode & {
+  __ctx?: Awaited<typeof __VLS_setup>;
+};
+declare const _default$2: typeof __VLS_export;
+type __VLS_PrettifyLocal<T> = (T extends any ? { [K in keyof T]: T[K] } : { [K in keyof T as K]: T[K] }) & {};
 //#endregion
 //#region src/client/composables/use-size.d.ts
 interface SizeInfo {
@@ -56,6 +82,21 @@ interface SizeInfo {
 }
 declare function useSize<T extends HTMLElement>(el: TemplateRef<T>, options: ToRefs<SizeOptions>, extraHeight?: MaybeRef<number>): SizeInfo;
 //#endregion
+//#region src/client/composables/use-zoom-and-drag.d.ts
+declare function useZoomAndDrag(parentEl: TemplateRef<HTMLDivElement>): {
+  actorStyle: import("vue").ComputedRef<{
+    left: string;
+    top: string;
+    width: string | undefined;
+    height: string;
+  }>;
+  zoom: import("vue").ComputedRef<string>;
+  reset: (isFullscreen?: boolean) => void;
+  zoomIn: () => void;
+  zoomOut: () => void;
+  resetZoom: () => void;
+};
+//#endregion
 //#region src/client/utils/env.d.ts
 interface NavigatorUAData {
   platform?: string;
@@ -123,4 +164,4 @@ declare function isMobile(): boolean;
  */
 declare function isSafari(): boolean;
 //#endregion
-export { EXTERNAL_URL_RE, SizeInfo, SizeOptions, URL_PROTOCOL_RE, _default as VPCopyButton, _default$1 as VPLoading, isExternal, isIOS, isLinkWithProtocol, isMacOS, isMobile, isSafari, isWindows, isiPad, isiPhone, useSize };
+export { EXTERNAL_URL_RE, SizeInfo, SizeOptions, URL_PROTOCOL_RE, _default as VPCopyButton, _default$1 as VPLoading, _default$2 as VPTabSwitch, isExternal, isIOS, isLinkWithProtocol, isMacOS, isMobile, isSafari, isWindows, isiPad, isiPhone, useSize, useZoomAndDrag };

package/dist/client/browser/index.js

@@ -1,5 +1,5 @@
-import { computed, createElementBlock, createElementVNode, defineComponent, isRef, normalizeClass, normalizeStyle, onMounted, openBlock, ref, toValue, unref, watch } from "vue";
-import { useClipboard, useEventListener } from "@vueuse/core";
+import { Fragment, computed, createElementBlock, createElementVNode, defineComponent, isRef, mergeModels, nextTick, normalizeClass, normalizeStyle, onMounted, openBlock, ref, renderList, shallowRef, toDisplayString, toValue, unref, useModel, watch } from "vue";
+import { useClipboard, useEventListener, useMediaQuery, useMutationObserver } from "@vueuse/core";
 //#region src/shared/link.ts
 const EXTERNAL_URL_RE = /^(?:[a-z]+:|\/\/)/i;
 function isExternal(path) {
@@ -11,7 +11,7 @@ function isLinkWithProtocol(link) {
 }
 //#endregion
 //#region src/client/components/VPCopyButton.vue
-const _sfc_main = /* @__PURE__ */ defineComponent({
+const _sfc_main = /*@__PURE__*/ defineComponent({
 	__name: "VPCopyButton",
 	props: { text: {} },
 	setup(__props) {
@@ -28,7 +28,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
 });
 //#endregion
 //#region src/client/components/VPLoading.vue
-const _sfc_main$1 = /* @__PURE__ */ defineComponent({
+const _sfc_main$1 = /*@__PURE__*/ defineComponent({
 	__name: "VPLoading",
 	props: {
 		absolute: { type: Boolean },
@@ -68,6 +68,38 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
 	}
 });
 //#endregion
+//#region src/client/components/VPTabSwitch.vue
+const _hoisted_1 = { class: "vp-tab-switch-list" };
+const _hoisted_2 = ["onClick"];
+const _sfc_main$2 = /*@__PURE__*/ defineComponent({
+	__name: "VPTabSwitch",
+	props: /*@__PURE__*/ mergeModels({ items: {} }, {
+		"modelValue": {},
+		"modelModifiers": {}
+	}),
+	emits: /*@__PURE__*/ mergeModels(["update"], ["update:modelValue"]),
+	setup(__props, { emit: __emit }) {
+		const emit = __emit;
+		const tab = useModel(__props, "modelValue");
+		watch(() => __props.items, () => {
+			tab.value = __props.items[0].value;
+		});
+		function onClick(item) {
+			tab.value = item;
+			emit("update", item);
+		}
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", _hoisted_1, [(openBlock(true), createElementBlock(Fragment, null, renderList(__props.items, (item) => {
+				return openBlock(), createElementBlock("button", {
+					key: item.label,
+					class: normalizeClass({ active: tab.value === item.value }),
+					onClick: ($event) => onClick(item.value)
+				}, toDisplayString(item.label), 11, _hoisted_2);
+			}), 128))]);
+		};
+	}
+});
+//#endregion
 //#region src/client/composables/use-size.ts
 function useSize(el, options, extraHeight = 0) {
 	const width = computed(() => toValue(options.width) || "100%");
@@ -101,6 +133,160 @@ function getRadio(ratio) {
 	return typeof ratio === "number" ? ratio : 16 / 9;
 }
 //#endregion
+//#region src/client/composables/use-zoom-and-drag.ts
+function useZoomAndDrag(parentEl) {
+	const actorEl = shallowRef();
+	let ratio = 0;
+	const x = ref(0);
+	const y = ref(0);
+	const width = ref(void 0);
+	let originalWidth = 0;
+	let initialState = {
+		width: 0,
+		x: 0,
+		y: 0
+	};
+	const isDesktop = useMediaQuery("(min-width: 640px)");
+	useMutationObserver(actorEl, (mutationList) => {
+		if (mutationList.some((mutation) => mutation.type === "childList")) nextTick(initialize);
+	}, {
+		subtree: true,
+		childList: true,
+		attributes: false
+	});
+	onMounted(() => nextTick(initialize));
+	function initialize(isFullscreen = false) {
+		if (!parentEl.value) return;
+		const actor = parentEl.value.querySelector(".content");
+		actorEl.value = actor;
+		if (!actor) return;
+		actor.style.width = "max-content";
+		actor.style.height = "";
+		const stage = parentEl.value;
+		const clientHeight = document.documentElement.clientHeight;
+		const maxHeight = isFullscreen ? clientHeight : isDesktop.value ? clientHeight * .75 : clientHeight / 2;
+		const { offsetWidth: actorWidth, offsetHeight: actorHeight } = actor;
+		const stageWidth = stage.offsetWidth;
+		ratio = actorWidth / actorHeight;
+		let tryZoom = 1;
+		let stageHeight = isFullscreen ? clientHeight : actorHeight;
+		let newActorHeight = actorHeight;
+		if (actorWidth > stageWidth) {
+			tryZoom = stageWidth / actorWidth;
+			newActorHeight = actorHeight * tryZoom;
+		}
+		if (newActorHeight > maxHeight) {
+			tryZoom = maxHeight / actorHeight;
+			stageHeight = maxHeight;
+		}
+		stage.style.height = `${stageHeight + 24}px`;
+		if (tryZoom === 1) {
+			width.value = actorWidth;
+			x.value = (stageWidth - width.value) / 2;
+			y.value = (stageHeight - actorHeight) / 2;
+		} else {
+			width.value = actorWidth * tryZoom;
+			const zoomHeight = width.value / ratio;
+			x.value = (stageWidth - width.value) / 2;
+			y.value = Math.max(0, ((isFullscreen ? clientHeight : stage.offsetHeight) - zoomHeight) / 2);
+		}
+		originalWidth = actorWidth;
+		initialState = {
+			width: width.value,
+			x: x.value,
+			y: y.value
+		};
+	}
+	let isDragging = false;
+	let startX = 0;
+	let startY = 0;
+	useEventListener(parentEl, "mousedown", (e) => {
+		if (e.target.matches("button,[class^=\"vpi-\"]")) return;
+		e.preventDefault();
+		startX = e.clientX;
+		startY = e.clientY;
+		isDragging = true;
+		parentEl.value.style.cursor = "move";
+	});
+	useEventListener(parentEl, "mousemove", (e) => {
+		if (isDragging) {
+			e.preventDefault();
+			x.value += e.clientX - startX;
+			y.value += e.clientY - startY;
+			startX = e.clientX;
+			startY = e.clientY;
+		}
+	});
+	useEventListener(parentEl, "mouseup", () => {
+		isDragging = false;
+		parentEl.value.style.cursor = "";
+	});
+	let startGap = 0;
+	let currentWidth = 0;
+	useEventListener(parentEl, "touchstart", (e) => {
+		if (e.target.matches("button,[class^=\"vpi-\"]")) return;
+		e.preventDefault();
+		const touches = e.touches;
+		startX = touches[0].clientX;
+		startY = touches[0].clientY;
+		isDragging = true;
+		if (touches[1]) {
+			startGap = Math.abs(touches[1].clientX - touches[0].clientX);
+			currentWidth = width.value || originalWidth;
+		}
+	}, { passive: false });
+	useEventListener(parentEl, "touchmove", (e) => {
+		if (!isDragging) return;
+		const touches = e.touches;
+		e.preventDefault();
+		x.value += touches[0].clientX - startX;
+		y.value += touches[0].clientY - startY;
+		startX = touches[0].clientX;
+		startY = touches[0].clientY;
+		if (touches[1]) width.value = currentWidth + Math.abs(touches[1].clientX - touches[0].clientX) - startGap;
+	}, { passive: false });
+	useEventListener(parentEl, "touchend", () => {
+		isDragging = false;
+	}, { passive: false });
+	function zoom(type) {
+		if (typeof width.value === "undefined" || !actorEl.value) return;
+		if (type === 0) {
+			zooming();
+			x.value = initialState.x;
+			y.value = initialState.y;
+			width.value = initialState.width;
+		} else {
+			const steps = initialState.width / 10 * type;
+			if (width.value + steps <= 100) return;
+			zooming();
+			width.value += steps;
+			x.value -= steps / 2;
+			y.value -= steps / ratio / 2;
+		}
+	}
+	let zoomTimer;
+	function zooming() {
+		actorEl.value?.classList.add("zooming");
+		if (zoomTimer) clearTimeout(zoomTimer);
+		zoomTimer = setTimeout(() => {
+			actorEl.value.classList.remove("zooming");
+		}, 250);
+	}
+	return {
+		actorStyle: computed(() => ({
+			left: `${Math.ceil(x.value)}px`,
+			top: `${Math.ceil(y.value)}px`,
+			width: width.value ? `${Math.ceil(width.value)}px` : void 0,
+			height: `${width.value ? Math.ceil(width.value / ratio) : void 0}px`
+		})),
+		zoom: computed(() => `${Math.round((width.value || originalWidth) / originalWidth * 100)}%`),
+		reset: initialize,
+		zoomIn: () => zoom(1),
+		zoomOut: () => zoom(-1),
+		resetZoom: () => zoom(0)
+	};
+}
+//#endregion
 //#region src/client/utils/env.ts
 function getPlatform() {
 	return navigator.userAgentData?.platform ?? navigator.platform;
@@ -178,4 +364,4 @@ function isSafari() {
 	return /safari/iu.test(ua) && !/chrome|crios|fxios|edgios|edg|opr|opera|ucbrowser|qqbrowser|baidubrowser/iu.test(ua);
 }
 //#endregion
-export { EXTERNAL_URL_RE, URL_PROTOCOL_RE, _sfc_main as VPCopyButton, _sfc_main$1 as VPLoading, isExternal, isIOS, isLinkWithProtocol, isMacOS, isMobile, isSafari, isWindows, isiPad, isiPhone, useSize };
+export { EXTERNAL_URL_RE, URL_PROTOCOL_RE, _sfc_main as VPCopyButton, _sfc_main$1 as VPLoading, _sfc_main$2 as VPTabSwitch, isExternal, isIOS, isLinkWithProtocol, isMacOS, isMobile, isSafari, isWindows, isiPad, isiPhone, useSize, useZoomAndDrag };

package/dist/client/ssr/index.d.ts

@@ -37,16 +37,42 @@ interface SizeOptions {
 type __VLS_Props$1 = {
   text: string;
 };
-declare const __VLS_export$1: import("vue").DefineComponent<__VLS_Props$1, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props$1> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-declare const _default: typeof __VLS_export$1;
+declare const __VLS_export$2: import("vue").DefineComponent<__VLS_Props$1, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props$1> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export$2;
 //#endregion
 //#region src/client/components/VPLoading.vue.d.ts
 type __VLS_Props = {
   absolute?: boolean;
   height?: string;
 };
-declare const __VLS_export: 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>;
-declare const _default$1: typeof __VLS_export;
+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>;
+declare const _default$1: typeof __VLS_export$1;
+//#endregion
+//#region src/client/components/VPTabSwitch.vue.d.ts
+interface Item<T> {
+  value: T;
+  label: string;
+}
+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<{
+  props: import("vue").PublicProps & __VLS_PrettifyLocal<({
+    items: Item<T>[];
+  } & {
+    modelValue?: T;
+  }) & {
+    onUpdate?: ((tab: T) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: T | undefined) => any) | undefined;
+  }> & (typeof globalThis extends {
+    __VLS_PROPS_FALLBACK: infer P;
+  } ? P : {});
+  expose: (exposed: {}) => void;
+  attrs: any;
+  slots: {};
+  emit: ((evt: "update", tab: T) => void) & ((event: "update:modelValue", value: T | undefined) => void);
+}>) => import("vue").VNode & {
+  __ctx?: Awaited<typeof __VLS_setup>;
+};
+declare const _default$2: typeof __VLS_export;
+type __VLS_PrettifyLocal<T> = (T extends any ? { [K in keyof T]: T[K] } : { [K in keyof T as K]: T[K] }) & {};
 //#endregion
 //#region src/client/composables/use-size.d.ts
 interface SizeInfo {
@@ -56,6 +82,21 @@ interface SizeInfo {
 }
 declare function useSize<T extends HTMLElement>(el: TemplateRef<T>, options: ToRefs<SizeOptions>, extraHeight?: MaybeRef<number>): SizeInfo;
 //#endregion
+//#region src/client/composables/use-zoom-and-drag.d.ts
+declare function useZoomAndDrag(parentEl: TemplateRef<HTMLDivElement>): {
+  actorStyle: import("vue").ComputedRef<{
+    left: string;
+    top: string;
+    width: string | undefined;
+    height: string;
+  }>;
+  zoom: import("vue").ComputedRef<string>;
+  reset: (isFullscreen?: boolean) => void;
+  zoomIn: () => void;
+  zoomOut: () => void;
+  resetZoom: () => void;
+};
+//#endregion
 //#region src/client/utils/env.d.ts
 interface NavigatorUAData {
   platform?: string;
@@ -123,4 +164,4 @@ declare function isMobile(): boolean;
  */
 declare function isSafari(): boolean;
 //#endregion
-export { EXTERNAL_URL_RE, SizeInfo, SizeOptions, URL_PROTOCOL_RE, _default as VPCopyButton, _default$1 as VPLoading, isExternal, isIOS, isLinkWithProtocol, isMacOS, isMobile, isSafari, isWindows, isiPad, isiPhone, useSize };
+export { EXTERNAL_URL_RE, SizeInfo, SizeOptions, URL_PROTOCOL_RE, _default as VPCopyButton, _default$1 as VPLoading, _default$2 as VPTabSwitch, isExternal, isIOS, isLinkWithProtocol, isMacOS, isMobile, isSafari, isWindows, isiPad, isiPhone, useSize, useZoomAndDrag };

package/dist/client/ssr/index.js

@@ -1,6 +1,6 @@
-import { computed, defineComponent, isRef, mergeProps, onMounted, ref, toValue, unref, useSSRContext, watch } from "vue";
-import { ssrRenderAttrs } from "vue/server-renderer";
-import { useClipboard, useEventListener } from "@vueuse/core";
+import { computed, defineComponent, isRef, mergeModels, mergeProps, nextTick, onMounted, ref, shallowRef, toValue, unref, useModel, useSSRContext, watch } from "vue";
+import { ssrInterpolate, ssrRenderAttrs, ssrRenderClass, ssrRenderList } from "vue/server-renderer";
+import { useClipboard, useEventListener, useMediaQuery, useMutationObserver } from "@vueuse/core";
 //#region src/shared/link.ts
 const EXTERNAL_URL_RE = /^(?:[a-z]+:|\/\/)/i;
 function isExternal(path) {
@@ -12,7 +12,7 @@ function isLinkWithProtocol(link) {
 }
 //#endregion
 //#region src/client/components/VPCopyButton.vue
-const _sfc_main = /* @__PURE__ */ defineComponent({
+const _sfc_main = /*@__PURE__*/ defineComponent({
 	__name: "VPCopyButton",
 	__ssrInlineRender: true,
 	props: { text: {} },
@@ -27,15 +27,15 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
 		};
 	}
 });
-const _sfc_setup$1 = _sfc_main.setup;
+const _sfc_setup$2 = _sfc_main.setup;
 _sfc_main.setup = (props, ctx) => {
 	const ssrContext = useSSRContext();
 	(ssrContext.modules || (ssrContext.modules = /* @__PURE__ */ new Set())).add("src/client/components/VPCopyButton.vue");
-	return _sfc_setup$1 ? _sfc_setup$1(props, ctx) : void 0;
+	return _sfc_setup$2 ? _sfc_setup$2(props, ctx) : void 0;
 };
 //#endregion
 //#region src/client/components/VPLoading.vue
-const _sfc_main$1 = /* @__PURE__ */ defineComponent({
+const _sfc_main$1 = /*@__PURE__*/ defineComponent({
 	__name: "VPLoading",
 	__ssrInlineRender: true,
 	props: {
@@ -51,10 +51,40 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
 		};
 	}
 });
-const _sfc_setup = _sfc_main$1.setup;
+const _sfc_setup$1 = _sfc_main$1.setup;
 _sfc_main$1.setup = (props, ctx) => {
 	const ssrContext = useSSRContext();
 	(ssrContext.modules || (ssrContext.modules = /* @__PURE__ */ new Set())).add("src/client/components/VPLoading.vue");
+	return _sfc_setup$1 ? _sfc_setup$1(props, ctx) : void 0;
+};
+//#endregion
+//#region src/client/components/VPTabSwitch.vue
+const _sfc_main$2 = /*@__PURE__*/ defineComponent({
+	__name: "VPTabSwitch",
+	__ssrInlineRender: true,
+	props: /*@__PURE__*/ mergeModels({ items: {} }, {
+		"modelValue": {},
+		"modelModifiers": {}
+	}),
+	emits: /*@__PURE__*/ mergeModels(["update"], ["update:modelValue"]),
+	setup(__props, { emit: __emit }) {
+		const tab = useModel(__props, "modelValue");
+		watch(() => __props.items, () => {
+			tab.value = __props.items[0].value;
+		});
+		return (_ctx, _push, _parent, _attrs) => {
+			_push(`<div${ssrRenderAttrs(mergeProps({ class: "vp-tab-switch-list" }, _attrs))}><!--[-->`);
+			ssrRenderList(__props.items, (item) => {
+				_push(`<button class="${ssrRenderClass({ active: tab.value === item.value })}">${ssrInterpolate(item.label)}</button>`);
+			});
+			_push(`<!--]--></div>`);
+		};
+	}
+});
+const _sfc_setup = _sfc_main$2.setup;
+_sfc_main$2.setup = (props, ctx) => {
+	const ssrContext = useSSRContext();
+	(ssrContext.modules || (ssrContext.modules = /* @__PURE__ */ new Set())).add("src/client/components/VPTabSwitch.vue");
 	return _sfc_setup ? _sfc_setup(props, ctx) : void 0;
 };
 //#endregion
@@ -91,6 +121,160 @@ function getRadio(ratio) {
 	return typeof ratio === "number" ? ratio : 16 / 9;
 }
 //#endregion
+//#region src/client/composables/use-zoom-and-drag.ts
+function useZoomAndDrag(parentEl) {
+	const actorEl = shallowRef();
+	let ratio = 0;
+	const x = ref(0);
+	const y = ref(0);
+	const width = ref(void 0);
+	let originalWidth = 0;
+	let initialState = {
+		width: 0,
+		x: 0,
+		y: 0
+	};
+	const isDesktop = useMediaQuery("(min-width: 640px)");
+	useMutationObserver(actorEl, (mutationList) => {
+		if (mutationList.some((mutation) => mutation.type === "childList")) nextTick(initialize);
+	}, {
+		subtree: true,
+		childList: true,
+		attributes: false
+	});
+	onMounted(() => nextTick(initialize));
+	function initialize(isFullscreen = false) {
+		if (!parentEl.value) return;
+		const actor = parentEl.value.querySelector(".content");
+		actorEl.value = actor;
+		if (!actor) return;
+		actor.style.width = "max-content";
+		actor.style.height = "";
+		const stage = parentEl.value;
+		const clientHeight = document.documentElement.clientHeight;
+		const maxHeight = isFullscreen ? clientHeight : isDesktop.value ? clientHeight * .75 : clientHeight / 2;
+		const { offsetWidth: actorWidth, offsetHeight: actorHeight } = actor;
+		const stageWidth = stage.offsetWidth;
+		ratio = actorWidth / actorHeight;
+		let tryZoom = 1;
+		let stageHeight = isFullscreen ? clientHeight : actorHeight;
+		let newActorHeight = actorHeight;
+		if (actorWidth > stageWidth) {
+			tryZoom = stageWidth / actorWidth;
+			newActorHeight = actorHeight * tryZoom;
+		}
+		if (newActorHeight > maxHeight) {
+			tryZoom = maxHeight / actorHeight;
+			stageHeight = maxHeight;
+		}
+		stage.style.height = `${stageHeight + 24}px`;
+		if (tryZoom === 1) {
+			width.value = actorWidth;
+			x.value = (stageWidth - width.value) / 2;
+			y.value = (stageHeight - actorHeight) / 2;
+		} else {
+			width.value = actorWidth * tryZoom;
+			const zoomHeight = width.value / ratio;
+			x.value = (stageWidth - width.value) / 2;
+			y.value = Math.max(0, ((isFullscreen ? clientHeight : stage.offsetHeight) - zoomHeight) / 2);
+		}
+		originalWidth = actorWidth;
+		initialState = {
+			width: width.value,
+			x: x.value,
+			y: y.value
+		};
+	}
+	let isDragging = false;
+	let startX = 0;
+	let startY = 0;
+	useEventListener(parentEl, "mousedown", (e) => {
+		if (e.target.matches("button,[class^=\"vpi-\"]")) return;
+		e.preventDefault();
+		startX = e.clientX;
+		startY = e.clientY;
+		isDragging = true;
+		parentEl.value.style.cursor = "move";
+	});
+	useEventListener(parentEl, "mousemove", (e) => {
+		if (isDragging) {
+			e.preventDefault();
+			x.value += e.clientX - startX;
+			y.value += e.clientY - startY;
+			startX = e.clientX;
+			startY = e.clientY;
+		}
+	});
+	useEventListener(parentEl, "mouseup", () => {
+		isDragging = false;
+		parentEl.value.style.cursor = "";
+	});
+	let startGap = 0;
+	let currentWidth = 0;
+	useEventListener(parentEl, "touchstart", (e) => {
+		if (e.target.matches("button,[class^=\"vpi-\"]")) return;
+		e.preventDefault();
+		const touches = e.touches;
+		startX = touches[0].clientX;
+		startY = touches[0].clientY;
+		isDragging = true;
+		if (touches[1]) {
+			startGap = Math.abs(touches[1].clientX - touches[0].clientX);
+			currentWidth = width.value || originalWidth;
+		}
+	}, { passive: false });
+	useEventListener(parentEl, "touchmove", (e) => {
+		if (!isDragging) return;
+		const touches = e.touches;
+		e.preventDefault();
+		x.value += touches[0].clientX - startX;
+		y.value += touches[0].clientY - startY;
+		startX = touches[0].clientX;
+		startY = touches[0].clientY;
+		if (touches[1]) width.value = currentWidth + Math.abs(touches[1].clientX - touches[0].clientX) - startGap;
+	}, { passive: false });
+	useEventListener(parentEl, "touchend", () => {
+		isDragging = false;
+	}, { passive: false });
+	function zoom(type) {
+		if (typeof width.value === "undefined" || !actorEl.value) return;
+		if (type === 0) {
+			zooming();
+			x.value = initialState.x;
+			y.value = initialState.y;
+			width.value = initialState.width;
+		} else {
+			const steps = initialState.width / 10 * type;
+			if (width.value + steps <= 100) return;
+			zooming();
+			width.value += steps;
+			x.value -= steps / 2;
+			y.value -= steps / ratio / 2;
+		}
+	}
+	let zoomTimer;
+	function zooming() {
+		actorEl.value?.classList.add("zooming");
+		if (zoomTimer) clearTimeout(zoomTimer);
+		zoomTimer = setTimeout(() => {
+			actorEl.value.classList.remove("zooming");
+		}, 250);
+	}
+	return {
+		actorStyle: computed(() => ({
+			left: `${Math.ceil(x.value)}px`,
+			top: `${Math.ceil(y.value)}px`,
+			width: width.value ? `${Math.ceil(width.value)}px` : void 0,
+			height: `${width.value ? Math.ceil(width.value / ratio) : void 0}px`
+		})),
+		zoom: computed(() => `${Math.round((width.value || originalWidth) / originalWidth * 100)}%`),
+		reset: initialize,
+		zoomIn: () => zoom(1),
+		zoomOut: () => zoom(-1),
+		resetZoom: () => zoom(0)
+	};
+}
+//#endregion
 //#region src/client/utils/env.ts
 function getPlatform() {
 	return navigator.userAgentData?.platform ?? navigator.platform;
@@ -168,4 +352,4 @@ function isSafari() {
 	return /safari/iu.test(ua) && !/chrome|crios|fxios|edgios|edg|opr|opera|ucbrowser|qqbrowser|baidubrowser/iu.test(ua);
 }
 //#endregion
-export { EXTERNAL_URL_RE, URL_PROTOCOL_RE, _sfc_main as VPCopyButton, _sfc_main$1 as VPLoading, isExternal, isIOS, isLinkWithProtocol, isMacOS, isMobile, isSafari, isWindows, isiPad, isiPhone, useSize };
+export { EXTERNAL_URL_RE, URL_PROTOCOL_RE, _sfc_main as VPCopyButton, _sfc_main$1 as VPLoading, _sfc_main$2 as VPTabSwitch, isExternal, isIOS, isLinkWithProtocol, isMacOS, isMobile, isSafari, isWindows, isiPad, isiPhone, useSize, useZoomAndDrag };

package/dist/client/styles/tab-switch.css

@@ -0,0 +1,31 @@
+.vp-tab-switch-list {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  justify-content: center;
+  padding-block: 2px;
+  padding-inline: 4px;
+  background-color: var(--vp-c-gray-soft);
+  border-radius: 6px;
+}
+
+.vp-tab-switch-list button {
+  display: inline-block;
+  padding-block: 2px;
+  padding-inline: 6px;
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 18px;
+  color: var(--vp-c-text-3);
+  cursor: pointer;
+  user-select: none;
+  background-color: transparent;
+  border-radius: 6px;
+  transition: background-color 0.25s ease-in-out;
+}
+
+.vp-tab-switch-list button.active {
+  color: var(--vp-c-text-1);
+  background-color: var(--vp-c-bg);
+  box-shadow: var(--vp-shadow-1);
+}

package/dist/node/index.d.ts

@@ -1,7 +1,7 @@
 import MarkdownIt from "markdown-it";
 import { RenderRule } from "markdown-it/lib/renderer.mjs";
 import { RuleOptions } from "markdown-it/lib/ruler.mjs";
-import { MarkdownEnv, SiteConfig } from "vitepress";
+import { MarkdownEnv, Plugin, SiteConfig } from "vitepress";
 
 //#region src/shared/link.d.ts
 declare const EXTERNAL_URL_RE: RegExp;
@@ -184,19 +184,24 @@ declare function createEmbedRuleBlock<Meta extends Record<string, any> = Record<
 }: EmbedRuleBlockOptions<Meta>): void;
 //#endregion
 //#region src/node/utils/constants.d.ts
+declare const isBuild: boolean;
+declare const isDev: boolean;
 /**
- * 支持的视频文件名扩展名
+ * 浏览器支持的视频文件名扩展名
  */
 declare const EXTENSION_VIDEOS: string[];
 /**
- * 支持的图片文件名扩展名
+ * 浏览器支持的图片文件名扩展名
  */
 declare const EXTENSION_IMAGES: string[];
 /**
- * 支持的音频文件名扩展名
+ * 浏览器支持的音频文件名扩展名
  */
 declare const EXTENSION_AUDIOS: string[];
 //#endregion
+//#region src/node/utils/hash.d.ts
+declare function genHash(data: unknown, length?: number): string;
+//#endregion
 //#region src/node/utils/logger.d.ts
 type LogType = 'info' | 'warn' | 'error' | 'debug';
 type LogLevel = LogType | 'silent';
@@ -305,6 +310,14 @@ declare function stringifyAttrs<T extends object = object>(attrs: T, withUndefin
 //#region src/node/utils/treat-as-html.d.ts
 declare function treatAsHtml(filename: string): boolean;
 //#endregion
+//#region src/node/vite-plugins/iconPlugin.d.ts
+interface Icon {
+  name: string;
+  svg: string;
+  classname?: string;
+}
+declare function iconPlugin(icons: Icon[]): Plugin;
+//#endregion
 //#region src/node/vitepress/createLocales.d.ts
 type BuiltinLocale<LocaleData extends Record<string, unknown>> = [langCodes: string[], localeData: LocaleData];
 type BuiltinLocales<LocaleData extends Record<string, unknown>> = BuiltinLocale<LocaleData>[];
@@ -328,4 +341,4 @@ declare function getVitepressConfig(): SiteConfig;
 //#region src/node/vitepress/resolve-route-link.d.ts
 declare function resolveRouteLink(url: string, env: MarkdownEnv): string;
 //#endregion
-export { BuiltinLocale, BuiltinLocales, ContainerOptions, EXTENSION_AUDIOS, EXTENSION_IMAGES, EXTENSION_VIDEOS, EXTERNAL_URL_RE, EmbedRuleBlockOptions, LogLevel, LogType, Logger, SizeOptions, URL_PROTOCOL_RE, createContainerPlugin, createContainerSyntaxPlugin, createEmbedRuleBlock, createLocales, createLogger, getLocaleWithPath, getVitepressConfig, isExternal, isLinkWithProtocol, logLevels, parseRect, resolveAttr, resolveAttrs, resolveRouteLink, slugify, stringifyAttrs, treatAsHtml };
+export { BuiltinLocale, BuiltinLocales, ContainerOptions, EXTENSION_AUDIOS, EXTENSION_IMAGES, EXTENSION_VIDEOS, EXTERNAL_URL_RE, EmbedRuleBlockOptions, LogLevel, LogType, Logger, SizeOptions, URL_PROTOCOL_RE, createContainerPlugin, createContainerSyntaxPlugin, createEmbedRuleBlock, createLocales, createLogger, genHash, getLocaleWithPath, getVitepressConfig, iconPlugin, isBuild, isDev, isExternal, isLinkWithProtocol, logLevels, parseRect, resolveAttr, resolveAttrs, resolveRouteLink, slugify, stringifyAttrs, treatAsHtml };

package/dist/node/index.js

@@ -1,7 +1,8 @@
 import container from "markdown-it-container";
-import { camelCase, deepMerge, isBoolean, isNull, isNumber, isString, isUndefined, kebabCase, objectEntries, objectKeys, slash } from "@pengzhanbo/utils";
-import ansis from "ansis";
+import { camelCase, deepMerge, isBoolean, isNull, isNumber, isPrimitive, isString, isUndefined, kebabCase, objectEntries, objectKeys, omit, slash } from "@pengzhanbo/utils";
 import process from "node:process";
+import { createHash } from "node:crypto";
+import ansis from "ansis";
 //#region src/shared/link.ts
 const EXTERNAL_URL_RE = /^(?:[a-z]+:|\/\/)/i;
 function isExternal(path) {
@@ -202,8 +203,10 @@ function createEmbedRuleBlock(md, { type, name = type, syntaxPattern, beforeName
 }
 //#endregion
 //#region src/node/utils/constants.ts
+const isBuild = process.env.NODE_ENV === "production";
+const isDev = process.env.NODE_ENV === "development";
 /**
-* 支持的视频文件名扩展名
+* 浏览器支持的视频文件名扩展名
 */
 const EXTENSION_VIDEOS = [
 	"mp4",
@@ -221,7 +224,7 @@ const EXTENSION_VIDEOS = [
 	"ogv"
 ];
 /**
-* 支持的图片文件名扩展名
+* 浏览器支持的图片文件名扩展名
 */
 const EXTENSION_IMAGES = [
 	"jpg",
@@ -241,7 +244,7 @@ const EXTENSION_IMAGES = [
 	"xbm"
 ];
 /**
-* 支持的音频文件名扩展名
+* 浏览器支持的音频文件名扩展名
 */
 const EXTENSION_AUDIOS = [
 	"mp3",
@@ -253,6 +256,13 @@ const EXTENSION_AUDIOS = [
 	"acc"
 ];
 //#endregion
+//#region src/node/utils/hash.ts
+function genHash(data, length) {
+	const str = isPrimitive(data) ? String(data) : JSON.stringify(data);
+	const hash = createHash("sha256").update(str).digest("hex");
+	return length ? hash.slice(0, length) : hash;
+}
+//#endregion
 //#region src/node/utils/logger.ts
 /**
 * Log levels mapping
@@ -375,6 +385,44 @@ function treatAsHtml(filename) {
 	return ext == null || !KNOWN_EXTENSIONS.has(ext.toLowerCase());
 }
 //#endregion
+//#region src/node/vite-plugins/iconPlugin.ts
+const name = "vitepress:tuck-icons";
+const iconList = [];
+let isProcessing = false;
+function iconPlugin(icons) {
+	for (const icon of icons) {
+		const index = iconList.findIndex((item) => item.name === icon.name);
+		if (index === -1) iconList.push({
+			...omit(icon, ["classname"]),
+			classname: new Set([icon.classname || icon.name])
+		});
+		else icon.classname && iconList[index].classname.add(icon.classname);
+	}
+	const moduleId = "virtual:tuck-icons.css";
+	const resolveId = `\0${moduleId}`;
+	return {
+		name,
+		enforce: "post",
+		resolveId(id) {
+			if (id === moduleId) {
+				isProcessing = true;
+				return resolveId;
+			}
+		},
+		load(id) {
+			if (id !== resolveId) return null;
+			if (!isProcessing) return null;
+			let css = "";
+			for (const icon of iconList) {
+				const classname = Array.from(icon.classname).map((name) => `.vpi-${name}`).join(",\n");
+				css += `${classname} {\n  --icon: ${icon.svg};\n}\n`;
+			}
+			isProcessing = false;
+			return css;
+		}
+	};
+}
+//#endregion
 //#region src/node/vitepress/get-vitepress-config.ts
 function getVitepressConfig() {
 	const config = globalThis.VITEPRESS_CONFIG;
@@ -444,4 +492,4 @@ function normalizeHash(str) {
 	return str ? encodeURI(`#${slugify(decodeURI(str).slice(1))}`) : "";
 }
 //#endregion
-export { EXTENSION_AUDIOS, EXTENSION_IMAGES, EXTENSION_VIDEOS, EXTERNAL_URL_RE, URL_PROTOCOL_RE, createContainerPlugin, createContainerSyntaxPlugin, createEmbedRuleBlock, createLocales, createLogger, getLocaleWithPath, getVitepressConfig, isExternal, isLinkWithProtocol, logLevels, parseRect, resolveAttr, resolveAttrs, resolveRouteLink, slugify, stringifyAttrs, treatAsHtml };
+export { EXTENSION_AUDIOS, EXTENSION_IMAGES, EXTENSION_VIDEOS, EXTERNAL_URL_RE, URL_PROTOCOL_RE, createContainerPlugin, createContainerSyntaxPlugin, createEmbedRuleBlock, createLocales, createLogger, genHash, getLocaleWithPath, getVitepressConfig, iconPlugin, isBuild, isDev, isExternal, isLinkWithProtocol, logLevels, parseRect, resolveAttr, resolveAttrs, resolveRouteLink, slugify, stringifyAttrs, treatAsHtml };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "vitepress-plugin-toolkit",
   "type": "module",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "Development toolkit for vitepress plugins",
   "author": "pengzhanbo <q942450674@outlook.com> (https://github.com/pengzhanbo/)",
   "license": "MIT",