@volverjs/ui-vue/dist/components/VvAccordionGroup/VvAccordionGroup.umd.js

@volverjs/ui-vue is a lightweight Vue 3 component library to accompany @volverjs/style.

!function(e,o){"object"==typeof exports&&"undefined"!=typeof module?module.exports=o(require("vue"),require("mitt"),require("@vueuse/core")):"function"==typeof define&&define.amd?define(["vue","mitt","@vueuse/core"],o):(e="undefined"!=typeof globalThis?globalThis:e||self).VvAccordionGroup=o(e.vue,e.mitt,e.core)}(this,function(e,o,t){"use strict";var a=(e=>(e.local="local",e.session="session",e))(a||{}),n=(e=>(e.left="left",e.right="right",e.top="top",e.bottom="bottom",e))(n||{}),r=(e=>(e.before="before",e.after="after",e))(r||{}),l=(e=>(e.button="button",e.submit="submit",e.reset="reset",e))(l||{}),i=(e=>(e.nuxtLink="nuxt-link",e.routerLink="router-link",e.a="a",e.button="button",e))(i||{});const u=Symbol.for("accordionGroup"),s={modifiers:{type:[String,Array],default:void 0}};r.before,n.bottom,l.button,i.button;const d={storageType:{type:String,default:a.local,validator:e=>Object.values(a).includes(e)},storageKey:String},c={...s,...d,modelValue:{type:[String,Array],default:void 0},items:{type:Array,default:()=>[]},collapse:Boolean,itemModifiers:{type:[String,Array],default:""},disabled:Boolean,not:Boolean};const m={...s,name:String,title:String,content:String,modelValue:{type:Boolean,default:void 0},disabled:Boolean,not:Boolean};function p(o){const{group:t,isInGroup:a}=function(o){const t=e.inject(o,void 0),a=e.computed(()=>void 0!==t);return{group:t,isInGroup:a,getGroupOrLocalRef:function(o,a,n){const r=t?.[o];if(r)return e.computed({get:()=>r.value,set(e){r.value=e}});const l=e.toRef(a,o);return e.computed({get:()=>l.value,set(e){n&&n(`update:${o}`,e)}})}}}(u),n=e.computed(()=>Boolean(o.disabled||t?.disabled.value)),r=e.computed(()=>{let e=o.modifiers,a=t?.modifiers.value;const n=new Set;return e&&(Array.isArray(e)||(e=e.split(" ")),e.forEach(e=>n.add(e))),a&&(Array.isArray(a)||(a=a.split(" ")),a.forEach(e=>n.add(e))),Array.from(n)});return{isInGroup:a,group:t,modifiers:r,disabled:n,bus:t?.bus}}function f(o,t,a){return e.computed(()=>{const n={[o]:!0},r="string"==typeof t?.value?t.value.split(" "):t?.value;return r&&Array.isArray(r)&&r.forEach(e=>{e&&(n[`${o}--${e}`]=!0)}),a&&Object.keys(a.value).forEach(t=>{n[`${o}--${t}`]=e.unref(a.value[t])}),n})}const v=["id","open"],g=["aria-controls","aria-expanded"],y=["aria-hidden"],b=e.defineComponent({name:"VvAccordion",props:m,emits:["update:modelValue"],setup(o,{expose:a,emit:n}){const r=o,l=n,i=e.useAttrs(),u=t.useVModel(r,"modelValue",l),s=e.computed(()=>r.name||i?.id||e.useId()),{title:d,content:c,not:m}=e.toRefs(r),{isInGroup:b,modifiers:S,disabled:x,bus:A}=p(r),h=e.ref(!1);function w(){x.value||(b.value?A?.emit("toggle",{name:s.value,value:!h.value}):h.value=!h.value)}function V(){h.value||w()}function k(){h.value&&w()}function $(e){A?A.emit("expand",{name:e}):console.warn(`[VvAccordion]: You are trying to expand accordion group of "${s.value}" but it is not in a group`)}function B(e){A?A?.emit("collapse",{name:e}):console.warn(`[VvAccordion]: You are trying to collapse accordion group of "${s.value}" but it is not in a group`)}e.watch(u,e=>{"boolean"==typeof e&&(h.value=m.value?!e:e)},{immediate:!0}),e.watch(h,e=>{u.value=m.value?!e:e}),A?.on("toggle",({name:e,value:o})=>{e===s.value&&(h.value=o)}),e.watch(s,(e,o)=>{A&&(o&&o!==e&&A.emit("unregister",{name:o}),A.emit("register",{name:e}))},{immediate:!0}),e.onBeforeUnmount(()=>{A&&A.emit("unregister",{name:s.value})}),a({isExpanded:h,expand:V,collapse:k,groupExpand:$,groupCollapse:B});const E=f("vv-accordion",S,e.computed(()=>({disabled:x.value})));return(o,t)=>(e.openBlock(),e.createElementBlock("details",{id:e.unref(s),class:e.normalizeClass(e.unref(E)),open:e.unref(h)},[e.createElementVNode("summary",{"aria-controls":e.unref(s),"aria-expanded":e.unref(h),class:"vv-accordion__summary",onClick:t[0]||(t[0]=e.withModifiers(e=>w(),["prevent"]))},[e.renderSlot(o.$slots,"summary",e.normalizeProps(e.guardReactiveProps({isExpanded:e.unref(h),expand:V,collapse:k,groupExpand:$,groupCollapse:B})),()=>[e.createTextVNode(e.toDisplayString(e.unref(d)),1)])],8,g),e.createElementVNode("div",{"aria-hidden":!e.unref(h),class:"vv-accordion__content"},[e.renderSlot(o.$slots,"default",e.normalizeProps(e.guardReactiveProps({isExpanded:e.unref(h),expand:V,collapse:k,groupExpand:$,groupCollapse:B})),()=>[e.createTextVNode(e.toDisplayString(e.unref(c)),1)])],8,y)],10,v))}});return e.defineComponent({name:"VvAccordionGroup",props:c,emits:["update:modelValue"],setup(n,{expose:r,emit:l}){const i=n,s=l,{disabled:d,modifiers:c,itemModifiers:m,items:p,storageKey:v,storageType:g}=e.toRefs(i);e.watchEffect(()=>{"string"==typeof i.modelValue&&i.collapse&&console.warn("[VvAccordionGroup]: modelValue is a string but collapse is true.")});const y=e.reactive(new Set),S=function(o,n=a.local,r){const l=e.ref();let i;return r&&(l.value=r),e.onMounted(()=>{o&&e.watch(o,(o,r)=>{const u=e.unref(n)===a.session?sessionStorage:localStorage;if(r&&r!==o&&u.removeItem(r),o)return i=t.useStorage(o,i?.value??l.value,u),void(i.value&&(l.value=i.value));i=void 0},{immediate:!0}),e.isRef(n)&&e.watch(n,(e,n)=>{if(o?.value){if(e){const n=e===a.session?sessionStorage:localStorage;i=t.useStorage(o.value,i?.value??l.value,n)}n&&n!==e&&(n===a.session?sessionStorage:localStorage).removeItem(o.value)}})}),e.watch(l,e=>{i&&(i.value=e)},{deep:!0,immediate:!0}),l}(v,g,[]),x=e.computed({get:()=>null!==i.modelValue&&void 0!==i.modelValue?i.modelValue:S.value,set:e=>{s("update:modelValue",e),S.value=e}}),A=e.computed({get:()=>{if(void 0===x.value)return new Set;let e=new Set;return i.not?"string"==typeof x.value?e=new Set([...y].filter(e=>e!==x.value)):Array.isArray(x.value)&&(e=new Set([...y].filter(e=>!x.value.includes(e)))):"string"==typeof x.value?e=new Set([x.value]):Array.isArray(x.value)&&(e=new Set(x.value)),e},set:e=>{i.not?x.value=[...y].filter(o=>!e.has(o)):i.collapse?x.value=[...e]:x.value=e.values().next().value}});e.onMounted(()=>{i.not&&void 0===x.value&&(x.value=i.collapse?[]:[...y.values()].splice(1,y.size)),e.nextTick(()=>{for(const e of y)h.emit("toggle",{name:e,value:A.value.has(e)})})});const h=o();var w,V;function k(e){if("string"!=typeof e)if(Array.isArray(e))for(const o of e)h.emit("toggle",{name:o,value:!0});else for(const o of y)h.emit("toggle",{name:o,value:!0});else h.emit("toggle",{name:e,value:!0})}function $(e){if("string"!=typeof e)if(Array.isArray(e))for(const o of e)h.emit("toggle",{name:o,value:!1});else for(const o of y)h.emit("toggle",{name:o,value:!1});else h.emit("toggle",{name:e,value:!1})}w=u,V={disabled:d,modifiers:m,bus:h},e.provide(w,V),h.on("register",({name:e})=>{y.add(e)}),h.on("unregister",({name:e})=>{y.delete(e)}),h.on("toggle",({name:e,value:o})=>{const t=new Set(A.value);if(o){if(!i.collapse){for(const o of t)o!==e&&h.emit("toggle",{name:o,value:!1});t.clear()}return t.add(e),void(A.value=t)}t.delete(e),A.value=t}),h.on("expand",({name:e})=>k(e)),h.on("collapse",({name:e})=>$(e)),r({expandedAccordions:A,expand:k,collapse:$});const B=f("vv-accordion-group",c,e.computed(()=>({disabled:d.value})));return(o,t)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(e.unref(B))},[e.renderSlot(o.$slots,"default",e.normalizeProps(e.guardReactiveProps({expandedAccordions:e.unref(A),expand:k,collapse:$})),()=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(e.unref(p),t=>(e.openBlock(),e.createBlock(b,e.mergeProps({key:t.title},{ref_for:!0},{name:t.name,title:t.title,content:t.content}),e.createSlots({_:2},[o.$slots[`summary::${t.name}`]?{name:"summary",fn:e.withCtx(a=>[e.renderSlot(o.$slots,`summary::${t.name}`,e.mergeProps({ref_for:!0},a))]),key:"0"}:void 0,o.$slots[`content::${t.name}`]?{name:"default",fn:e.withCtx(a=>[e.renderSlot(o.$slots,`content::${t.name}`,e.mergeProps({ref_for:!0},a))]),key:"1"}:void 0]),1040))),128))])],2))}})});