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 k, watchEffect as N, createElementBlock as p, openBlock as y, normalizeClass as u, Fragment as D, renderList as R, normalizeStyle as g, createElementVNode as n, createVNode as S, withKeys as F, createCommentVNode as j, renderSlot as f, createBlock as x, resolveDynamicComponent as H, createTextVNode as i, toDisplayString as v, Transition as M, withCtx as P, withDirectives as O, unref as q, mergeProps as G, vShow as I } from "vue";
import J from "../button/index.js";
import { debounce as Q } from "../utils/index.js";
const U = ["onClick", "onKeydown"], W = { class: "collapse-header" }, X = { class: "collapse-extra" }, Y = { class: "collapse-lang" }, te = /* @__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(h, { emit: V }) {
const s = h, C = k(), $ = k(), d = k([]), b = V;
N(() => {
$.value = s.copyText;
});
function a(t, l) {
let e = s[l];
return t?.[l] !== void 0 && (e = t[l]), e;
}
function r(t, l) {
return t !== void 0 ? t : l;
}
function K(t) {
t.style.height = t.lastElementChild.offsetHeight + (s.bordered && !s.ghost ? 1 : 0) + "px", t.style.opacity = "1";
}
function B(t) {
t.style.removeProperty("height"), t.style.removeProperty("opacity");
}
function w(t) {
b("update:activeKey", t), b("change", t);
}
function T(t) {
if (c(t))
if (Array.isArray(s.activeKey)) {
const l = s.activeKey.filter((e) => e !== t);
w(l);
} else
w(null);
else
Array.isArray(s.activeKey) ? w([...s.activeKey, t]) : w(t);
}
function c(t) {
return Array.isArray(s.activeKey) ? s.activeKey.includes(t) : s.activeKey === t;
}
function E(t, l) {
const e = a(t, "copyText"), o = a(t, "copiedText");
return d.value.includes(r(t.key, l)) ? o : e;
}
const _ = Q((t) => {
d.value = d.value.filter((l) => l !== t);
}, 3e3);
function z(t, l) {
navigator.clipboard.writeText(C.value[t].innerText || "").then(
() => {
d.value.includes(l) || d.value.push(l), _(l);
},
(e) => {
console.log("copy failed", e);
}
);
}
return (t, l) => (y(), p("div", {
class: u(["collapse-wrap", {
"collapse-borderless": !h.bordered,
"collapse-ghost": h.ghost
}])
}, [
(y(!0), p(D, null, R(h.items, (e, o) => (y(), p("div", {
class: u(["collapse-item", {
"collapse-arrow-left": a(e, "arrowPlacement") === "left",
"collapse-arrow-right": a(e, "arrowPlacement") === "right",
"collapse-item-disabled": a(e, "disabled")
}]),
style: g(a(e, "collapseStyle")),
key: o
}, [
n("div", {
tabindex: "0",
class: u(["collapse-header-wrap", { "collapse-header-no-arrow": a(e, "showArrow") }]),
style: g(a(e, "headerStyle")),
onClick: (A) => a(e, "disabled") ? () => !1 : T(r(e.key, o)),
onKeydown: F((A) => T(r(e.key, o)), ["enter"])
}, [
a(e, "showArrow") ? (y(), p("div", {
key: 0,
class: "collapse-arrow",
style: g(a(e, "arrowStyle"))
}, [
f(t.$slots, "arrow", {
item: e,
key: r(e.key, o),
active: c(r(e.key, o))
}, () => [
a(e, "arrow") ? (y(), x(H(a(e, "arrow")), {
key: 0,
class: u(["arrow-svg", { "arrow-rotate": c(r(e.key, o)) }])
}, null, 8, ["class"])) : (y(), p("svg", {
key: 1,
class: u(["arrow-svg", { "arrow-rotate": c(r(e.key, o)) }]),
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", W, [
f(t.$slots, "header", {
item: e,
header: e.header,
key: r(e.key, o),
active: c(r(e.key, o))
}, () => [
i(v(e.header), 1)
], !0)
]),
n("div", X, [
f(t.$slots, "extra", {
item: e,
extra: a(e, "extra"),
key: r(e.key, o),
active: c(r(e.key, o))
}, () => [
i(v(a(e, "extra")), 1)
], !0)
])
], 46, U),
S(M, {
name: "collapse",
onEnter: K,
onAfterEnter: B,
onLeave: K,
onAfterLeave: B
}, {
default: P(() => [
O(n("div", {
class: u(["collapse-content-wrap", { "collapse-copyable": a(e, "copyable") }])
}, [
n("div", Y, [
f(t.$slots, "lang", {
item: e,
lang: a(e, "lang"),
key: r(e.key, o),
active: c(r(e.key, o))
}, () => [
i(v(a(e, "lang")), 1)
], !0)
]),
S(q(J), G({
class: "collapse-copy",
size: "small",
type: "primary",
onClick: (A) => z(o, r(e.key, o))
}, { ref_for: !0 }, a(e, "copyProps")), {
default: P(() => [
i(v(E(e, o)), 1)
]),
_: 2
}, 1040, ["onClick"]),
n("div", {
ref_for: !0,
ref_key: "contentRef",
ref: C,
class: "collapse-content",
style: g(a(e, "contentStyle"))
}, [
f(t.$slots, "content", {
item: e,
content: e.content,
key: r(e.key, o),
active: c(r(e.key, o))
}, () => [
i(v(e.content), 1)
], !0)
], 4)
], 2), [
[I, c(r(e.key, o))]
])
]),
_: 2
}, 1024)
], 6))), 128))
], 2));
}
});
export {
te as default
};