@volverjs/ui-vue
Version:
@volverjs/ui-vue is a lightweight Vue 3 component library to accompany @volverjs/style.
2 lines (1 loc) • 3.74 kB
JavaScript
import{inject as e,computed as o,toRef as a,unref as t,defineComponent as n,useAttrs as r,useId as i,toRefs as u,ref as l,watch as s,onBeforeUnmount as d,createElementBlock as c,openBlock as p,normalizeClass as v,createElementVNode as m,withModifiers as f,renderSlot as g,normalizeProps as b,guardReactiveProps as y,createTextVNode as x,toDisplayString as A}from"vue";import{useVModel as E}from"@vueuse/core";var $=/* @__PURE__ */(e=>(e.local="local",e.session="session",e))($||{}),h=/* @__PURE__ */(e=>(e.left="left",e.right="right",e.top="top",e.bottom="bottom",e))(h||{}),k=/* @__PURE__ */(e=>(e.before="before",e.after="after",e))(k||{}),G=/* @__PURE__ */(e=>(e.button="button",e.submit="submit",e.reset="reset",e))(G||{}),S=/* @__PURE__ */(e=>(e.nuxtLink="nuxt-link",e.routerLink="router-link",e.a="a",e.button="button",e))(S||{});const V=Symbol.for("accordionGroup"),B={modifiers:{type:[String,Array],default:void 0}};k.before,h.bottom,G.button,S.button,$.local;const C={...B,name:String,title:String,content:String,modelValue:{type:Boolean,default:void 0},disabled:Boolean,not:Boolean};function I(t){const{group:n,isInGroup:r}=function(t){const n=e(t,void 0),r=o(()=>void 0!==n);return{group:n,isInGroup:r,getGroupOrLocalRef:function(e,t,r){const i=n?.[e];if(i)return o({get:()=>i.value,set(e){i.value=e}});const u=a(t,e);return o({get:()=>u.value,set(o){r&&r(`update:${e}`,o)}})}}}(V),i=o(()=>Boolean(t.disabled||n?.disabled.value)),u=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:r,group:n,modifiers:u,disabled:i,bus:n?.bus}}const _=["id","open"],w=["aria-controls","aria-expanded"],L=["aria-hidden"],O=/* @__PURE__ */n({name:"VvAccordion",props:C,emits:["update:modelValue"],setup(e,{expose:a,emit:n}){const $=e,h=n,k=r(),G=E($,"modelValue",h),S=o(()=>$.name||k?.id||i()),{title:V,content:B,not:C}=u($),{isInGroup:O,modifiers:Y,disabled:j,bus:R}=I($),q=l(!1);function z(){j.value||(O.value?R?.emit("toggle",{name:S.value,value:!q.value}):q.value=!q.value)}function D(){q.value||z()}function F(){q.value&&z()}function H(e){R?R.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 J(e){R?R?.emit("collapse",{name:e}):console.warn(`[VvAccordion]: You are trying to collapse accordion group of "${S.value}" but it is not in a group`)}s(G,e=>{"boolean"==typeof e&&(q.value=C.value?!e:e)},{immediate:!0}),s(q,e=>{G.value=C.value?!e:e}),R?.on("toggle",({name:e,value:o})=>{e===S.value&&(q.value=o)}),s(S,(e,o)=>{R&&(o&&o!==e&&R.emit("unregister",{name:o}),R.emit("register",{name:e}))},{immediate:!0}),d(()=>{R&&R.emit("unregister",{name:S.value})}),a({isExpanded:q,expand:D,collapse:F,groupExpand:H,groupCollapse:J});const K=function(e,a,n){return o(()=>{const o={[e]:!0},r="string"==typeof a?.value?a.value.split(" "):a?.value;return r&&Array.isArray(r)&&r.forEach(a=>{a&&(o[`${e}--${a}`]=!0)}),n&&Object.keys(n.value).forEach(a=>{o[`${e}--${a}`]=t(n.value[a])}),o})}("vv-accordion",Y,o(()=>({disabled:j.value})));return(e,o)=>(p(),c("details",{id:t(S),class:v(t(K)),open:t(q)},[m("summary",{"aria-controls":t(S),"aria-expanded":t(q),class:"vv-accordion__summary",onClick:o[0]||(o[0]=f(e=>z(),["prevent"]))},[g(e.$slots,"summary",b(y({isExpanded:t(q),expand:D,collapse:F,groupExpand:H,groupCollapse:J})),()=>[x(A(t(V)),1)])],8,w),m("div",{"aria-hidden":!t(q),class:"vv-accordion__content"},[g(e.$slots,"default",b(y({isExpanded:t(q),expand:D,collapse:F,groupExpand:H,groupCollapse:J})),()=>[x(A(t(B)),1)])],8,L)],10,_))}});export{O as default};