UNPKG

vue-clipboard-package

Version:

A powerful Vue 3 package providing a directive, composable, and component for copying text to the clipboard. This package offers flexible solutions with modern clipboard APIs and fallback mechanisms for legacy browsers.

166 lines (165 loc) 5.65 kB
import { openBlock as f, createElementBlock as m, createStaticVNode as x, createElementVNode as C, ref as _, computed as h, defineComponent as $, resolveDirective as E, withDirectives as B, normalizeClass as w, unref as v, renderSlot as b, createVNode as g } from "vue"; const y = (t, e) => { const a = t.__vccOpts || t; for (const [r, l] of e) a[r] = l; return a; }, S = {}, H = { part: "checked-icon svg", class: "checkbox__icon", viewBox: "0 0 16 16" }; function N(t, e) { return f(), m("svg", H, e[0] || (e[0] = [ x('<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round"><g stroke="currentColor"><g transform="translate(3.428571, 3.428571)"><path d="M0,5.71428571 L3.42857143,9.14285714"></path><path d="M9.14285714,0 L3.42857143,9.14285714"></path></g></g></g>', 1) ])); } const T = /* @__PURE__ */ y(S, [["render", N]]), V = {}, M = { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: "currentColor", class: "bi bi-copy", viewBox: "0 0 16 16", part: "svg" }; function D(t, e) { return f(), m("svg", M, e[0] || (e[0] = [ C("path", { "fill-rule": "evenodd", d: "M4 2a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V2Zm2-1a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H6ZM2 5a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1v-1h1v1a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h1v1H2Z" }, null, -1) ])); } const I = /* @__PURE__ */ y(V, [["render", D]]), Z = {}, P = { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: "currentColor", class: "bi bi-x-lg", viewBox: "0 0 16 16", part: "svg" }; function A(t, e) { return f(), m("svg", P, e[0] || (e[0] = [ C("path", { d: "M2.146 2.854a.5.5 0 1 1 .708-.708L8 7.293l5.146-5.147a.5.5 0 0 1 .708.708L8.707 8l5.147 5.146a.5.5 0 0 1-.708.708L8 8.707l-5.146 5.147a.5.5 0 0 1-.708-.708L7.293 8 2.146 2.854Z" }, null, -1) ])); } const q = /* @__PURE__ */ y(Z, [["render", A]]); function k(t = {}) { t.duration = t.duration || 1e3, t.legacy = t.legacy || !1; const e = _(!1), a = _(null), r = h( () => typeof navigator < "u" && "clipboard" in navigator && window.isSecureContext ), l = h( () => r.value || t.legacy ), c = async (s) => { try { return (await navigator.permissions.query({ name: s })).state; } catch (n) { return console.error("Error checking clipboard permission:", n), "denied"; } }, i = async (s) => { if (!r.value && t.legacy) return d(s); const u = await c("clipboard-write"); if (u === "granted" || u === "prompt") try { await navigator.clipboard.writeText(s), o(); } catch (L) { p(L); } else p(new Error("Clipboard write permission denied")); }, d = (s) => { const n = document.createElement("textarea"); n.value = s, n.style.position = "absolute", n.style.left = "-999999px", document.body.appendChild(n), n.select(); try { document.execCommand("copy"), o(); } catch (u) { p(u); } finally { n.remove(); } }, o = () => { e.value = !0, setTimeout(() => { e.value = !1; }, t.duration); }, p = (s) => { a.value = s, setTimeout(() => { a.value = null; }, t.duration); }; return { copied: e, error: a, copy: i, isSupported: l }; } const z = /* @__PURE__ */ $({ __name: "ClipboardButton", props: { value: {}, disabled: { type: Boolean, default: !1 }, copyLabel: { default: "Copy" }, errorLabel: { default: "Error" }, successLabel: { default: "Copied" }, tooltipPlacement: { default: "top" }, feedbackDuration: { default: 1e3 }, legacy: { type: Boolean, default: !0 } }, emits: ["copied", "error"], setup(t, { emit: e }) { const a = e, r = t, { copied: l, error: c, copy: i } = k({ duration: r.feedbackDuration, legacy: r.legacy }), d = h(() => l.value ? (a("copied"), r.successLabel) : c.value ? (a("error", c.value), r.errorLabel) : r.copyLabel); return (o, p) => { const s = E("tooltip"); return B((f(), m("span", { class: w(["clipboard", { "clipboard-disabled": o.disabled }]) }, [ v(l) ? b(o.$slots, "success-icon", { key: 0 }, () => [ g(T) ], !0) : v(c) ? b(o.$slots, "error-icon", { key: 1 }, () => [ g(q) ], !0) : b(o.$slots, "copy-icon", { key: 2, copy: v(i) }, () => [ C("span", { class: w(o.disabled ? "pointer-none" : "cursor-pointer"), onClick: p[0] || (p[0] = (n) => v(i)(o.value)) }, [ g(I) ], 2) ], !0) ], 2)), [ [s, { location: o.tooltipPlacement, text: d.value, disabled: o.disabled }] ]); }; } }), U = /* @__PURE__ */ y(z, [["__scopeId", "data-v-ddeefb17"]]), j = { mounted(t, e) { var c, i, d; const { copy: a } = k({ duration: ((c = e.arg) == null ? void 0 : c.duration) || 1e3, // Optional duration argument legacy: ((i = e.arg) == null ? void 0 : i.legacy) || !0 // Optional legacy argument }), r = ((d = e.arg) == null ? void 0 : d.event) || "click", l = async () => { const o = e.value; typeof o == "string" ? a(o) : console.error("v-clipboard: No valid text provided for copying."); }; t.addEventListener(r, l), t._vClipboardHandler = l; }, beforeUnmount(t) { const e = t._vClipboardHandler; e && (t.removeEventListener("click", e), delete t._vClipboardHandler); } }; export { U as ClipboardButton, k as useCopyToClipboard, j as vClipboard };