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

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

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