vitepress-plugin-toolkit 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 pengzhanbo
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

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

@@ -0,0 +1,126 @@
+import { MaybeRef, Ref, TemplateRef, ToRefs } from "vue";
+
+//#region src/shared/link.d.ts
+declare const EXTERNAL_URL_RE: RegExp;
+declare function isExternal(path: string): boolean;
+declare const URL_PROTOCOL_RE: RegExp;
+declare function isLinkWithProtocol(link: string): boolean;
+//#endregion
+//#region src/shared/size.d.ts
+/**
+ * Size Options
+ *
+ * 尺寸选项
+ */
+interface SizeOptions {
+  /**
+   * Width
+   *
+   * 宽度
+   */
+  width?: string;
+  /**
+   * Height
+   *
+   * 高度
+   */
+  height?: string;
+  /**
+   * Aspect ratio
+   *
+   * 宽高比
+   */
+  ratio?: number | string;
+}
+//#endregion
+//#region src/client/components/VPCopyButton.vue.d.ts
+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;
+//#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;
+//#endregion
+//#region src/client/composables/use-size.d.ts
+interface SizeInfo {
+  width: Ref<string>;
+  height: Ref<string>;
+  resize: () => void;
+}
+declare function useSize<T extends HTMLElement>(el: TemplateRef<T>, options: ToRefs<SizeOptions>, extraHeight?: MaybeRef<number>): SizeInfo;
+//#endregion
+//#region src/client/utils/env.d.ts
+interface NavigatorUAData {
+  platform?: string;
+  mobile?: boolean;
+}
+declare global {
+  interface Navigator {
+    userAgentData?: NavigatorUAData;
+  }
+}
+/**
+ * Check if the user device is iPhone or iPod.
+ *
+ * 检查用户设备是否为 iPhone 或 iPod。
+ *
+ * @returns Whether it's iPhone or iPod / 是否为 iPhone 或 iPod
+ */
+declare const isiPhone: () => boolean;
+/**
+ * Check if the user device is Windows.
+ *
+ * 检查用户设备是否为 Windows。
+ *
+ * @returns Whether it's Windows / 是否为 Windows
+ */
+declare function isWindows(): boolean;
+/**
+ * Check if the user device is iPad.
+ *
+ * 检查用户设备是否为 iPad。
+ *
+ * @returns Whether it's iPad / 是否为 iPad
+ */
+declare const isiPad: () => boolean;
+/**
+ * Check if the user device is iOS (iPhone, iPad, or iPod).
+ *
+ * 检查用户设备是否为 iOS (iPhone, iPad, iPod)。
+ *
+ * @returns Whether it's iOS / 是否为 iOS
+ */
+declare function isIOS(): boolean;
+/**
+ * Check if the user device is macOS.
+ *
+ * 检查用户设备是否为 macOS。
+ *
+ * @returns Whether it's macOS / 是否为 macOS
+ */
+declare function isMacOS(): boolean;
+/**
+ * Check if the user device is a mobile device.
+ *
+ * 检查用户设备是否为移动设备。
+ *
+ * @returns Whether it's a mobile device / 是否为移动设备
+ */
+declare function isMobile(): boolean;
+/**
+ * Check if the user device is Safari.
+ *
+ * 检查用户设备是否为 Safari。
+ *
+ * @returns Whether it's Safari / 是否为 Safari
+ */
+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 };

package/dist/client/browser/index.js

@@ -0,0 +1,181 @@
+import { computed, createElementBlock, createElementVNode, defineComponent, isRef, normalizeClass, normalizeStyle, onMounted, openBlock, ref, toValue, unref, watch } from "vue";
+import { useClipboard, useEventListener } from "@vueuse/core";
+//#region src/shared/link.ts
+const EXTERNAL_URL_RE = /^(?:[a-z]+:|\/\/)/i;
+function isExternal(path) {
+	return EXTERNAL_URL_RE.test(path);
+}
+const URL_PROTOCOL_RE = /^[a-z][a-z0-9+.-]*:/;
+function isLinkWithProtocol(link) {
+	return URL_PROTOCOL_RE.test(link) || link.startsWith("//");
+}
+//#endregion
+//#region src/client/components/VPCopyButton.vue
+const _sfc_main = /* @__PURE__ */ defineComponent({
+	__name: "VPCopyButton",
+	props: { text: {} },
+	setup(__props) {
+		const { copied, copy } = useClipboard();
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("button", {
+				class: normalizeClass(["vp-copy", { copied: unref(copied) }]),
+				"aria-label": "Copy",
+				type: "button",
+				onClick: _cache[0] || (_cache[0] = ($event) => unref(copy)(__props.text))
+			}, null, 2);
+		};
+	}
+});
+//#endregion
+//#region src/client/components/VPLoading.vue
+const _sfc_main$1 = /* @__PURE__ */ defineComponent({
+	__name: "VPLoading",
+	props: {
+		absolute: { type: Boolean },
+		height: {}
+	},
+	setup(__props) {
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				class: normalizeClass(["vp-loading", { absolute: __props.absolute }]),
+				style: normalizeStyle({ height: __props.height })
+			}, [..._cache[0] || (_cache[0] = [createElementVNode("svg", {
+				xmlns: "http://www.w3.org/2000/svg",
+				width: "1em",
+				height: "1em",
+				viewBox: "0 0 24 24"
+			}, [createElementVNode("path", {
+				fill: "none",
+				stroke: "currentColor",
+				"stroke-dasharray": "15",
+				"stroke-dashoffset": "15",
+				"stroke-linecap": "round",
+				"stroke-width": "2",
+				d: "M12 3C16.9706 3 21 7.02944 21 12"
+			}, [createElementVNode("animate", {
+				fill: "freeze",
+				attributeName: "stroke-dashoffset",
+				dur: "0.3s",
+				values: "15;0"
+			}), createElementVNode("animateTransform", {
+				attributeName: "transform",
+				dur: "1.5s",
+				repeatCount: "indefinite",
+				type: "rotate",
+				values: "0 12 12;360 12 12"
+			})])], -1)])], 6);
+		};
+	}
+});
+//#endregion
+//#region src/client/composables/use-size.ts
+function useSize(el, options, extraHeight = 0) {
+	const width = computed(() => toValue(options.width) || "100%");
+	const height = ref("auto");
+	const getHeight = (width) => {
+		const height = toValue(options.height);
+		const ratio = getRadio(toValue(options.ratio));
+		return height || `${Number(width) / ratio + toValue(extraHeight)}px`;
+	};
+	const resize = () => {
+		if (el.value) height.value = getHeight(el.value.offsetWidth);
+	};
+	onMounted(() => {
+		resize();
+		if (isRef(extraHeight)) watch(extraHeight, resize);
+		useEventListener("orientationchange", resize);
+		useEventListener("resize", resize);
+	});
+	return {
+		width,
+		height,
+		resize
+	};
+}
+function getRadio(ratio) {
+	if (typeof ratio === "string") {
+		const [width, height] = ratio.split(":");
+		const parsedRadio = Number(width) / Number(height);
+		if (!Number.isNaN(parsedRadio)) return parsedRadio;
+	}
+	return typeof ratio === "number" ? ratio : 16 / 9;
+}
+//#endregion
+//#region src/client/utils/env.ts
+function getPlatform() {
+	return navigator.userAgentData?.platform ?? navigator.platform;
+}
+const getUA = () => navigator.userAgent;
+/**
+* Check if the user device is iPhone or iPod.
+*
+* 检查用户设备是否为 iPhone 或 iPod。
+*
+* @returns Whether it's iPhone or iPod / 是否为 iPhone 或 iPod
+*/
+const isiPhone = () => /\biPhone\b/iu.test(getPlatform());
+/**
+* Check if the user device is Windows.
+*
+* 检查用户设备是否为 Windows。
+*
+* @returns Whether it's Windows / 是否为 Windows
+*/
+function isWindows() {
+	return /\b(?:Windows|Win32)\b/iu.test(getPlatform());
+}
+/**
+* Check if the user device is iPad.
+*
+* 检查用户设备是否为 iPad。
+*
+* @returns Whether it's iPad / 是否为 iPad
+*/
+const isiPad = () => /\biPad\b/iu.test(getPlatform());
+/**
+* Check if the user device is iOS (iPhone, iPad, or iPod).
+*
+* 检查用户设备是否为 iOS (iPhone, iPad, iPod)。
+*
+* @returns Whether it's iOS / 是否为 iOS
+*/
+function isIOS() {
+	return /ios/iu.test(getPlatform()) || isiPhone() || isiPad();
+}
+/**
+* Check if the user device is macOS.
+*
+* 检查用户设备是否为 macOS。
+*
+* @returns Whether it's macOS / 是否为 macOS
+*/
+function isMacOS() {
+	const platform = getPlatform();
+	if (platform) return /mac/iu.test(platform);
+	return /macintosh|mac os x/iu.test(getUA()) && !isIOS();
+}
+/**
+* Check if the user device is a mobile device.
+*
+* 检查用户设备是否为移动设备。
+*
+* @returns Whether it's a mobile device / 是否为移动设备
+*/
+function isMobile() {
+	const uaDataMobile = navigator.userAgentData?.mobile;
+	if (typeof uaDataMobile === "boolean") return uaDataMobile;
+	return /\b(?:Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini|Mobile|CriOS|FxiOS)\b/iu.test(getUA());
+}
+/**
+* Check if the user device is Safari.
+*
+* 检查用户设备是否为 Safari。
+*
+* @returns Whether it's Safari / 是否为 Safari
+*/
+function isSafari() {
+	const ua = getUA();
+	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 };

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

@@ -0,0 +1,126 @@
+import { MaybeRef, Ref, TemplateRef, ToRefs } from "vue";
+
+//#region src/shared/link.d.ts
+declare const EXTERNAL_URL_RE: RegExp;
+declare function isExternal(path: string): boolean;
+declare const URL_PROTOCOL_RE: RegExp;
+declare function isLinkWithProtocol(link: string): boolean;
+//#endregion
+//#region src/shared/size.d.ts
+/**
+ * Size Options
+ *
+ * 尺寸选项
+ */
+interface SizeOptions {
+  /**
+   * Width
+   *
+   * 宽度
+   */
+  width?: string;
+  /**
+   * Height
+   *
+   * 高度
+   */
+  height?: string;
+  /**
+   * Aspect ratio
+   *
+   * 宽高比
+   */
+  ratio?: number | string;
+}
+//#endregion
+//#region src/client/components/VPCopyButton.vue.d.ts
+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;
+//#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;
+//#endregion
+//#region src/client/composables/use-size.d.ts
+interface SizeInfo {
+  width: Ref<string>;
+  height: Ref<string>;
+  resize: () => void;
+}
+declare function useSize<T extends HTMLElement>(el: TemplateRef<T>, options: ToRefs<SizeOptions>, extraHeight?: MaybeRef<number>): SizeInfo;
+//#endregion
+//#region src/client/utils/env.d.ts
+interface NavigatorUAData {
+  platform?: string;
+  mobile?: boolean;
+}
+declare global {
+  interface Navigator {
+    userAgentData?: NavigatorUAData;
+  }
+}
+/**
+ * Check if the user device is iPhone or iPod.
+ *
+ * 检查用户设备是否为 iPhone 或 iPod。
+ *
+ * @returns Whether it's iPhone or iPod / 是否为 iPhone 或 iPod
+ */
+declare const isiPhone: () => boolean;
+/**
+ * Check if the user device is Windows.
+ *
+ * 检查用户设备是否为 Windows。
+ *
+ * @returns Whether it's Windows / 是否为 Windows
+ */
+declare function isWindows(): boolean;
+/**
+ * Check if the user device is iPad.
+ *
+ * 检查用户设备是否为 iPad。
+ *
+ * @returns Whether it's iPad / 是否为 iPad
+ */
+declare const isiPad: () => boolean;
+/**
+ * Check if the user device is iOS (iPhone, iPad, or iPod).
+ *
+ * 检查用户设备是否为 iOS (iPhone, iPad, iPod)。
+ *
+ * @returns Whether it's iOS / 是否为 iOS
+ */
+declare function isIOS(): boolean;
+/**
+ * Check if the user device is macOS.
+ *
+ * 检查用户设备是否为 macOS。
+ *
+ * @returns Whether it's macOS / 是否为 macOS
+ */
+declare function isMacOS(): boolean;
+/**
+ * Check if the user device is a mobile device.
+ *
+ * 检查用户设备是否为移动设备。
+ *
+ * @returns Whether it's a mobile device / 是否为移动设备
+ */
+declare function isMobile(): boolean;
+/**
+ * Check if the user device is Safari.
+ *
+ * 检查用户设备是否为 Safari。
+ *
+ * @returns Whether it's Safari / 是否为 Safari
+ */
+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 };

package/dist/client/ssr/index.js

@@ -0,0 +1,171 @@
+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";
+//#region src/shared/link.ts
+const EXTERNAL_URL_RE = /^(?:[a-z]+:|\/\/)/i;
+function isExternal(path) {
+	return EXTERNAL_URL_RE.test(path);
+}
+const URL_PROTOCOL_RE = /^[a-z][a-z0-9+.-]*:/;
+function isLinkWithProtocol(link) {
+	return URL_PROTOCOL_RE.test(link) || link.startsWith("//");
+}
+//#endregion
+//#region src/client/components/VPCopyButton.vue
+const _sfc_main = /* @__PURE__ */ defineComponent({
+	__name: "VPCopyButton",
+	__ssrInlineRender: true,
+	props: { text: {} },
+	setup(__props) {
+		const { copied, copy } = useClipboard();
+		return (_ctx, _push, _parent, _attrs) => {
+			_push(`<button${ssrRenderAttrs(mergeProps({
+				class: ["vp-copy", { copied: unref(copied) }],
+				"aria-label": "Copy",
+				type: "button"
+			}, _attrs))}></button>`);
+		};
+	}
+});
+const _sfc_setup$1 = _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;
+};
+//#endregion
+//#region src/client/components/VPLoading.vue
+const _sfc_main$1 = /* @__PURE__ */ defineComponent({
+	__name: "VPLoading",
+	__ssrInlineRender: true,
+	props: {
+		absolute: { type: Boolean },
+		height: {}
+	},
+	setup(__props) {
+		return (_ctx, _push, _parent, _attrs) => {
+			_push(`<div${ssrRenderAttrs(mergeProps({
+				class: ["vp-loading", { absolute: __props.absolute }],
+				style: { height: __props.height }
+			}, _attrs))}><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-dasharray="15" stroke-dashoffset="15" stroke-linecap="round" stroke-width="2" d="M12 3C16.9706 3 21 7.02944 21 12"><animate fill="freeze" attributeName="stroke-dashoffset" dur="0.3s" values="15;0"></animate><animateTransform attributeName="transform" dur="1.5s" repeatCount="indefinite" type="rotate" values="0 12 12;360 12 12"></animateTransform></path></svg></div>`);
+		};
+	}
+});
+const _sfc_setup = _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 ? _sfc_setup(props, ctx) : void 0;
+};
+//#endregion
+//#region src/client/composables/use-size.ts
+function useSize(el, options, extraHeight = 0) {
+	const width = computed(() => toValue(options.width) || "100%");
+	const height = ref("auto");
+	const getHeight = (width) => {
+		const height = toValue(options.height);
+		const ratio = getRadio(toValue(options.ratio));
+		return height || `${Number(width) / ratio + toValue(extraHeight)}px`;
+	};
+	const resize = () => {
+		if (el.value) height.value = getHeight(el.value.offsetWidth);
+	};
+	onMounted(() => {
+		resize();
+		if (isRef(extraHeight)) watch(extraHeight, resize);
+		useEventListener("orientationchange", resize);
+		useEventListener("resize", resize);
+	});
+	return {
+		width,
+		height,
+		resize
+	};
+}
+function getRadio(ratio) {
+	if (typeof ratio === "string") {
+		const [width, height] = ratio.split(":");
+		const parsedRadio = Number(width) / Number(height);
+		if (!Number.isNaN(parsedRadio)) return parsedRadio;
+	}
+	return typeof ratio === "number" ? ratio : 16 / 9;
+}
+//#endregion
+//#region src/client/utils/env.ts
+function getPlatform() {
+	return navigator.userAgentData?.platform ?? navigator.platform;
+}
+const getUA = () => navigator.userAgent;
+/**
+* Check if the user device is iPhone or iPod.
+*
+* 检查用户设备是否为 iPhone 或 iPod。
+*
+* @returns Whether it's iPhone or iPod / 是否为 iPhone 或 iPod
+*/
+const isiPhone = () => /\biPhone\b/iu.test(getPlatform());
+/**
+* Check if the user device is Windows.
+*
+* 检查用户设备是否为 Windows。
+*
+* @returns Whether it's Windows / 是否为 Windows
+*/
+function isWindows() {
+	return /\b(?:Windows|Win32)\b/iu.test(getPlatform());
+}
+/**
+* Check if the user device is iPad.
+*
+* 检查用户设备是否为 iPad。
+*
+* @returns Whether it's iPad / 是否为 iPad
+*/
+const isiPad = () => /\biPad\b/iu.test(getPlatform());
+/**
+* Check if the user device is iOS (iPhone, iPad, or iPod).
+*
+* 检查用户设备是否为 iOS (iPhone, iPad, iPod)。
+*
+* @returns Whether it's iOS / 是否为 iOS
+*/
+function isIOS() {
+	return /ios/iu.test(getPlatform()) || isiPhone() || isiPad();
+}
+/**
+* Check if the user device is macOS.
+*
+* 检查用户设备是否为 macOS。
+*
+* @returns Whether it's macOS / 是否为 macOS
+*/
+function isMacOS() {
+	const platform = getPlatform();
+	if (platform) return /mac/iu.test(platform);
+	return /macintosh|mac os x/iu.test(getUA()) && !isIOS();
+}
+/**
+* Check if the user device is a mobile device.
+*
+* 检查用户设备是否为移动设备。
+*
+* @returns Whether it's a mobile device / 是否为移动设备
+*/
+function isMobile() {
+	const uaDataMobile = navigator.userAgentData?.mobile;
+	if (typeof uaDataMobile === "boolean") return uaDataMobile;
+	return /\b(?:Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini|Mobile|CriOS|FxiOS)\b/iu.test(getUA());
+}
+/**
+* Check if the user device is Safari.
+*
+* 检查用户设备是否为 Safari。
+*
+* @returns Whether it's Safari / 是否为 Safari
+*/
+function isSafari() {
+	const ua = getUA();
+	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 };

package/dist/client/styles/copy-button.css

@@ -0,0 +1,75 @@
+.vp-doc .has-copy > button.vp-copy {
+  position: absolute;
+  top: 12px;
+
+  /* rtl:ignore */
+  right: 12px;
+  z-index: 3;
+  width: 40px;
+  height: 40px;
+  cursor: pointer;
+  background-color: var(--vp-code-copy-code-bg);
+  background-image: var(--vp-icon-copy);
+  background-repeat: no-repeat;
+  background-position: 50%;
+  background-size: 20px;
+  border: 1px solid var(--vp-code-copy-code-border-color);
+  border-radius: 4px;
+  opacity: 0;
+  transition:
+    border-color 0.25s,
+    background-color 0.25s,
+    opacity 0.25s;
+
+  /* rtl:ignore */
+  direction: ltr;
+}
+
+.vp-doc .has-copy:hover > button.vp-copy,
+.vp-doc .has-copy > button.vp-copy:focus {
+  opacity: 1;
+}
+
+.vp-doc .has-copy > button.vp-copy:hover,
+.vp-doc .has-copy > button.vp-copy.copied {
+  background-color: var(--vp-code-copy-code-hover-bg);
+  border-color: var(--vp-code-copy-code-hover-border-color);
+}
+
+.vp-doc .has-copy > button.vp-copy.copied,
+.vp-doc .has-copy > button.vp-copy:hover.copied {
+  background-color: var(--vp-code-copy-code-hover-bg);
+  background-image: var(--vp-icon-copied);
+
+  /* rtl:ignore */
+  border-radius: 0 4px 4px 0;
+}
+
+.vp-doc .has-copy > button.vp-copy.copied::before,
+.vp-doc .has-copy > button.vp-copy:hover.copied::before {
+  position: relative;
+  top: -1px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: fit-content;
+  height: 40px;
+  padding: 0 10px;
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--vp-code-copy-code-active-text);
+  text-align: center;
+  white-space: nowrap;
+  content: var(--vp-code-copy-copied-text-content);
+  background-color: var(--vp-code-copy-code-hover-bg);
+  border: 1px solid var(--vp-code-copy-code-hover-border-color);
+
+  /* rtl:ignore */
+  border-right: 0;
+
+  /* rtl:ignore */
+  border-radius: 4px 0 0 4px;
+
+  /* rtl:ignore */
+  transform: translateX(calc(-100% - 1px));
+}