@vuesimple/vs-accordion
Version:
A simple vue accordion.
182 lines (181 loc) • 7.36 kB
JavaScript
(function(){ try {var elementStyle = document.createElement('style'); elementStyle.appendChild(document.createTextNode(".vs-accordion{list-style:none;margin:0;padding:0}.vs-accordion__item:last-child{border-bottom:none}.vs-accordion{--vs-accordion-border-color: #d8dcde;--vs-accordion-border-radius: 4px;--vs-accordion-padding: 20px;--vs-accordion-compact-padding: 10px}.vs-accordion__item{border-bottom:1px solid var(--vs-accordion-border-color);position:relative}.vs-accordion__item.vs-accordion--box{border:1px solid var(--vs-accordion-border-color);border-radius:var(--vs-accordion-border-radius);margin-bottom:10px}.vs-accordion__trigger{cursor:pointer;display:flex;align-items:center;justify-content:space-between;padding:var(--vs-accordion-padding);transition:all .25s ease-in-out 0s}.vs-accordion__non-clickable{padding:0 var(--vs-accordion-padding) var(--vs-accordion-padding) var(--vs-accordion-padding)}.vs-accordion--compact .vs-accordion__trigger{padding:var(--vs-accordion-compact-padding)}.vs-accordion--compact .vs-accordion__non-clickable{padding:0 var(--vs-accordion-compact-padding) var(--vs-accordion-compact-padding) var(--vs-accordion-compact-padding)}.vs-accordion--compact .vs-accordion__content-wrapper{padding:0 var(--vs-accordion-compact-padding) var(--vs-accordion-compact-padding)}.vs-accordion--icon-active{transform:rotate(180deg)}.vs-accordion__button{background:transparent;border:0;outline:none;padding:0;color:inherit;font:inherit;cursor:pointer;width:100%;text-align:left}.vs-accordion--icon{flex:0 0 16px;width:16px;height:16px;vertical-align:middle;color:#68737d;transition:all .25s ease-in-out 0s}.vs-accordion.vs-accordion--disable-animate .vs-accordion--icon{transition:none}.vs-accordion__content-wrapper{padding:0 var(--vs-accordion-padding) var(--vs-accordion-padding)}.vs-accordion:not(.vs-accordion--disable-animate) .vs-accordion-enter-active,.vs-accordion:not(.vs-accordion--disable-animate) .vs-accordion-leave-active{will-change:height,opacity;transition:height .3s ease,opacity .3s ease;overflow:hidden}.vs-accordion-enter-from,.vs-accordion-leave-to{height:0!important;opacity:0}")); document.head.appendChild(elementStyle);} catch(e) {console.error('vite-plugin-css-injected-by-js', e);} })();import { openBlock as a, createElementBlock as l, normalizeClass as d, renderSlot as t, createElementVNode as c, createCommentVNode as p, createVNode as _, Transition as b, withCtx as x, withDirectives as m, vShow as u } from "vue";
const h = (e, s) => {
const n = e.__vccOpts || e;
for (const [r, i] of s)
n[r] = i;
return n;
}, g = {
name: "VsAccordion",
props: {
active: {
type: Number
},
isBox: {
type: Boolean
},
isExpandable: {
type: Boolean
},
level: {
type: Number
},
isCompact: {
type: Boolean,
default: !1
},
disableAnimate: {
type: Boolean,
default: !1
}
},
data() {
return {
Accordion: {
count: 0,
active: this.active,
isBox: this.isBox,
isExpandable: this.isExpandable,
level: this.level,
isCompact: this.isCompact
}
};
},
provide() {
return {
Accordion: this.Accordion
};
},
watch: {
active(e) {
this.Accordion.active = e;
}
}
};
function f(e, s, n, r, i, o) {
return a(), l("ul", {
class: d(["vs-accordion", { "vs-accordion--disable-animate": n.disableAnimate }])
}, [
t(e.$slots, "default")
], 2);
}
const A = /* @__PURE__ */ h(g, [["render", f]]);
const E = {
name: "VsAccordionItem",
props: {},
inject: ["Accordion"],
data() {
return {
index: null,
isBox: !1,
isExpandable: !1,
isExpandableToggle: !1,
level: null,
hasNonClickableContent: this.$slots["accordion-non-clickable"]
};
},
computed: {
visible() {
return this.index == this.Accordion.active;
}
},
created() {
this.index = this.Accordion.count++, this.isBox = this.Accordion.isBox, this.level = this.Accordion.level, this.isCompact = this.Accordion.isCompact, this.isExpandable = this.Accordion.isExpandable, this.isExpandable && (this.isExpandableToggle = this.index === this.Accordion.active);
},
methods: {
open() {
if (this.isExpandable) {
this.isExpandableToggle = !this.isExpandableToggle, this.$emit("change", { visible: this.isExpandableToggle, index: this.index });
return;
}
this.visible ? this.Accordion.active = null : this.Accordion.active = this.index, this.$emit("change", { visible: this.visible, index: this.index });
},
start(e) {
e.style.height = e.scrollHeight + "px";
},
onEnter(e) {
this.$emit("open"), e.style.height = "";
},
onLeave(e) {
this.$emit("hide"), e.style.height = "";
}
}
}, y = ["aria-level"], B = ["id", "aria-expanded"], C = /* @__PURE__ */ c("path", {
fill: "currentColor",
d: "M12.688 5.61a.5.5 0 01.69.718l-.066.062-5 4a.5.5 0 01-.542.054l-.082-.054-5-4a.5.5 0 01.55-.83l.074.05L8 9.359l4.688-3.75z"
}, null, -1), w = [
C
], k = {
key: 0,
class: "vs-accordion__non-clickable"
}, T = ["aria-labelledby", "aria-hidden"], V = { class: "vs-accordion__content-wrapper" };
function L(e, s, n, r, i, o) {
return a(), l("li", {
class: d(["vs-accordion__item", [
{ "vs-accordion--box": i.isBox },
{ "vs-accordion--compact": e.isCompact },
{ "vs-accordion__active": i.isExpandable ? i.isExpandableToggle : o.visible }
]])
}, [
c("div", {
class: "vs-accordion__trigger",
role: "heading",
"aria-level": i.level,
onClick: s[0] || (s[0] = (...v) => o.open && o.open(...v))
}, [
c("button", {
class: "vs-accordion__button",
id: `accordion-${i.index + 1}`,
tabindex: "0",
"aria-expanded": o.visible ? "true" : "false"
}, [
t(e.$slots, "accordion-trigger")
], 8, B),
t(e.$slots, "accordion-icon", {}, () => [
(a(), l("svg", {
xmlns: "http://www.w3.org/2000/svg",
width: "16",
height: "16",
viewBox: "0 0 16 16",
focusable: "false",
role: "presentation",
class: d(["vs-accordion--icon", { "vs-accordion--icon-active": i.isExpandable ? i.isExpandableToggle : o.visible }])
}, w, 2))
])
], 8, y),
i.hasNonClickableContent ? (a(), l("div", k, [
t(e.$slots, "accordion-non-clickable")
])) : p("", !0),
_(b, {
name: "vs-accordion",
onEnter: o.start,
onAfterEnter: o.onEnter,
onBeforeLeave: o.start,
onAfterLeave: o.onLeave
}, {
default: x(() => [
m(c("div", {
class: "vs-accordion__content",
"aria-labelledby": `accordion-${i.index + 1}`,
"aria-hidden": o.visible ? "false" : "true"
}, [
c("div", V, [
t(e.$slots, "default")
])
], 8, T), [
[u, i.isExpandable ? i.isExpandableToggle : o.visible]
])
]),
_: 3
}, 8, ["onEnter", "onAfterEnter", "onBeforeLeave", "onAfterLeave"])
], 2);
}
const N = /* @__PURE__ */ h(E, [["render", L]]), z = {
install(e) {
e.component("VsAccordion", A), e.component("VsAccordionItem", N);
}
};
export {
A as VsAccordion,
N as VsAccordionItem,
z as plugin
};