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
JavaScript
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
};