vue-amazing-ui
Version:
An Amazing Vue3 UI Components Library, Using TypeScript.
211 lines (210 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 H, renderSlot as f, createBlock as M, resolveDynamicComponent as j, createTextVNode as i, toDisplayString as v, Transition as q, withCtx as S, withDirectives as G, unref as I, mergeProps as J, vShow as O } 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: { 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 == null ? void 0 : 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(["m-collapse", {
"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(), M(j(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)) : H("", !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(q, {
name: "collapse",
onEnter: b,
onAfterEnter: K,
onLeave: b,
onAfterLeave: K
}, {
default: S(() => [
G(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(I(Q), J({
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), [
[O, c(r(e.key, t))]
])
]),
_: 2
}, 1024)
], 6))), 128))
], 2));
}
});
export {
oe as default
};