vue-amazing-ui
Version:
An Amazing Vue3 UI Components Library, Using TypeScript.
210 lines (209 loc) • 7.39 kB
JavaScript
import { defineComponent as L, ref as g, watchEffect as N, createElementBlock as d, openBlock as y, normalizeClass as p, Fragment as D, renderList as R, normalizeStyle as w, createElementVNode as n, createVNode as A, withKeys as F, createCommentVNode as j, renderSlot as f, createBlock as H, resolveDynamicComponent as M, createTextVNode as i, toDisplayString as v, Transition as O, withCtx as S, withDirectives as q, unref as G, mergeProps as I, vShow as J } from "vue";
import Q from "../button/index.js";
import { debounce as U } from "../utils/index.js";
const W = ["onClick", "onKeydown"], X = { class: "collapse-header" }, Y = { class: "collapse-extra" }, Z = { class: "collapse-lang" }, oe = /* @__PURE__ */ L({
__name: "Collapse",
props: {
items: { default: () => [] },
activeKey: { default: null },
bordered: { type: Boolean, default: !0 },
disabled: { type: Boolean, default: !1 },
ghost: { type: Boolean, default: !1 },
headerStyle: { default: () => ({}) },
contentStyle: { default: () => ({}) },
collapseStyle: { default: () => ({}) },
arrow: { type: [Object, Function], default: void 0 },
showArrow: { type: Boolean, default: !0 },
arrowPlacement: { default: "left" },
arrowStyle: { default: () => ({}) },
extra: { default: void 0 },
lang: { default: void 0 },
copyable: { type: Boolean, default: !1 },
copyProps: { default: () => ({}) },
copyText: { default: "Copy" },
copiedText: { default: "Copied" }
},
emits: ["update:activeKey", "change"],
setup(P, { emit: _ }) {
const s = P, k = g(), V = g(), u = g([]), C = _;
N(() => {
V.value = s.copyText;
});
function a(o, l) {
let e = s[l];
return o?.[l] !== void 0 && (e = o[l]), e;
}
function r(o, l) {
return o !== void 0 ? o : l;
}
function b(o) {
o.style.height = o.lastElementChild.offsetHeight + (s.bordered && !s.ghost ? 1 : 0) + "px", o.style.opacity = "1";
}
function K(o) {
o.style.removeProperty("height"), o.style.removeProperty("opacity");
}
function h(o) {
C("update:activeKey", o), C("change", o);
}
function B(o) {
if (c(o))
if (Array.isArray(s.activeKey)) {
const l = s.activeKey.filter((e) => e !== o);
h(l);
} else
h(null);
else
Array.isArray(s.activeKey) ? h([...s.activeKey, o]) : h(o);
}
function c(o) {
return Array.isArray(s.activeKey) ? s.activeKey.includes(o) : s.activeKey === o;
}
function $(o, l) {
const e = a(o, "copyText"), t = a(o, "copiedText");
return u.value.includes(r(o.key, l)) ? t : e;
}
const E = U((o) => {
u.value = u.value.filter((l) => l !== o);
}, 3e3);
function z(o, l) {
navigator.clipboard.writeText(k.value[o].innerText || "").then(
() => {
u.value.includes(l) || u.value.push(l), E(l);
},
(e) => {
console.log("copy failed", e);
}
);
}
return (o, l) => (y(), d("div", {
class: p(["collapse-wrap", {
"collapse-borderless": !o.bordered,
"collapse-ghost": o.ghost
}])
}, [
(y(!0), d(D, null, R(o.items, (e, t) => (y(), d("div", {
class: p(["collapse-item", {
"collapse-arrow-left": a(e, "arrowPlacement") === "left",
"collapse-arrow-right": a(e, "arrowPlacement") === "right",
"collapse-item-disabled": a(e, "disabled")
}]),
style: w(a(e, "collapseStyle")),
key: t
}, [
n("div", {
tabindex: "0",
class: p(["collapse-header-wrap", { "collapse-header-no-arrow": a(e, "showArrow") }]),
style: w(a(e, "headerStyle")),
onClick: (T) => a(e, "disabled") ? () => !1 : B(r(e.key, t)),
onKeydown: F((T) => B(r(e.key, t)), ["enter"])
}, [
a(e, "showArrow") ? (y(), d("div", {
key: 0,
class: "collapse-arrow",
style: w(a(e, "arrowStyle"))
}, [
f(o.$slots, "arrow", {
item: e,
key: r(e.key, t),
active: c(r(e.key, t))
}, () => [
a(e, "arrow") ? (y(), H(M(a(e, "arrow")), {
key: 0,
class: p(["arrow-svg", { "arrow-rotate": c(r(e.key, t)) }])
}, null, 8, ["class"])) : (y(), d("svg", {
key: 1,
class: p(["arrow-svg", { "arrow-rotate": c(r(e.key, t)) }]),
focusable: "false",
"data-icon": "right",
width: "1em",
height: "1em",
fill: "currentColor",
"aria-hidden": "true",
viewBox: "64 64 896 896"
}, [...l[0] || (l[0] = [
n("path", { d: "M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z" }, null, -1)
])], 2))
], !0)
], 4)) : j("", !0),
n("div", X, [
f(o.$slots, "header", {
item: e,
header: e.header,
key: r(e.key, t),
active: c(r(e.key, t))
}, () => [
i(v(e.header), 1)
], !0)
]),
n("div", Y, [
f(o.$slots, "extra", {
item: e,
extra: a(e, "extra"),
key: r(e.key, t),
active: c(r(e.key, t))
}, () => [
i(v(a(e, "extra")), 1)
], !0)
])
], 46, W),
A(O, {
name: "collapse",
onEnter: b,
onAfterEnter: K,
onLeave: b,
onAfterLeave: K
}, {
default: S(() => [
q(n("div", {
class: p(["collapse-content-wrap", { "collapse-copyable": a(e, "copyable") }])
}, [
n("div", Z, [
f(o.$slots, "lang", {
item: e,
lang: a(e, "lang"),
key: r(e.key, t),
active: c(r(e.key, t))
}, () => [
i(v(a(e, "lang")), 1)
], !0)
]),
A(G(Q), I({
class: "collapse-copy",
size: "small",
type: "primary",
onClick: (T) => z(t, r(e.key, t))
}, { ref_for: !0 }, a(e, "copyProps")), {
default: S(() => [
i(v($(e, t)), 1)
]),
_: 2
}, 1040, ["onClick"]),
n("div", {
ref_for: !0,
ref_key: "contentRef",
ref: k,
class: "collapse-content",
style: w(a(e, "contentStyle"))
}, [
f(o.$slots, "content", {
item: e,
content: e.content,
key: r(e.key, t),
active: c(r(e.key, t))
}, () => [
i(v(e.content), 1)
], !0)
], 4)
], 2), [
[J, c(r(e.key, t))]
])
]),
_: 2
}, 1024)
], 6))), 128))
], 2));
}
});
export {
oe as default
};