@volverjs/ui-vue
Version:
@volverjs/ui-vue is a lightweight Vue 3 component library to accompany @volverjs/style.
2 lines (1 loc) • 4.01 kB
JavaScript
!function(e,o){"object"==typeof exports&&"undefined"!=typeof module?module.exports=o(require("vue"),require("@vueuse/core")):"function"==typeof define&&define.amd?define(["vue","@vueuse/core"],o):(e="undefined"!=typeof globalThis?globalThis:e||self).VvAccordion=o(e.vue,e.core)}(this,function(e,o){"use strict";var t=(e=>(e.local="local",e.session="session",e))(t||{}),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||{}),a=(e=>(e.button="button",e.submit="submit",e.reset="reset",e))(a||{}),u=(e=>(e.nuxtLink="nuxt-link",e.routerLink="router-link",e.a="a",e.button="button",e))(u||{});const i=Symbol.for("accordionGroup"),l={modifiers:{type:[String,Array],default:void 0}};r.before,n.bottom,a.button,u.button,t.local;const s={...l,name:String,title:String,content:String,modelValue:{type:Boolean,default:void 0},disabled:Boolean,not:Boolean};function d(o){const{group:t,isInGroup:n}=function(o){const t=e.inject(o,void 0),n=e.computed(()=>void 0!==t);return{group:t,isInGroup:n,getGroupOrLocalRef:function(o,n,r){const a=t?.[o];if(a)return e.computed({get:()=>a.value,set(e){a.value=e}});const u=e.toRef(n,o);return e.computed({get:()=>u.value,set(e){r&&r(`update:${o}`,e)}})}}}(i),r=e.computed(()=>Boolean(o.disabled||t?.disabled.value)),a=e.computed(()=>{let e=o.modifiers,n=t?.modifiers.value;const r=new Set;return e&&(Array.isArray(e)||(e=e.split(" ")),e.forEach(e=>r.add(e))),n&&(Array.isArray(n)||(n=n.split(" ")),n.forEach(e=>r.add(e))),Array.from(r)});return{isInGroup:n,group:t,modifiers:a,disabled:r,bus:t?.bus}}const c=["id","open"],p=["aria-controls","aria-expanded"],f=["aria-hidden"];return e.defineComponent({name:"VvAccordion",props:s,emits:["update:modelValue"],setup(t,{expose:n,emit:r}){const a=t,u=r,i=e.useAttrs(),l=o.useVModel(a,"modelValue",u),s=e.computed(()=>a.name||i?.id||e.useId()),{title:m,content:v,not:g}=e.toRefs(a),{isInGroup:b,modifiers:y,disabled:x,bus:h}=d(a),A=e.ref(!1);function E(){x.value||(b.value?h?.emit("toggle",{name:s.value,value:!A.value}):A.value=!A.value)}function V(){A.value||E()}function S(){A.value&&E()}function $(e){h?h.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 k(e){h?h?.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(l,e=>{"boolean"==typeof e&&(A.value=g.value?!e:e)},{immediate:!0}),e.watch(A,e=>{l.value=g.value?!e:e}),h?.on("toggle",({name:e,value:o})=>{e===s.value&&(A.value=o)}),e.watch(s,(e,o)=>{h&&(o&&o!==e&&h.emit("unregister",{name:o}),h.emit("register",{name:e}))},{immediate:!0}),e.onBeforeUnmount(()=>{h&&h.emit("unregister",{name:s.value})}),n({isExpanded:A,expand:V,collapse:S,groupExpand:$,groupCollapse:k});const w=function(o,t,n){return e.computed(()=>{const r={[o]:!0},a="string"==typeof t?.value?t.value.split(" "):t?.value;return a&&Array.isArray(a)&&a.forEach(e=>{e&&(r[`${o}--${e}`]=!0)}),n&&Object.keys(n.value).forEach(t=>{r[`${o}--${t}`]=e.unref(n.value[t])}),r})}("vv-accordion",y,e.computed(()=>({disabled:x.value})));return(o,t)=>(e.openBlock(),e.createElementBlock("details",{id:e.unref(s),class:e.normalizeClass(e.unref(w)),open:e.unref(A)},[e.createElementVNode("summary",{"aria-controls":e.unref(s),"aria-expanded":e.unref(A),class:"vv-accordion__summary",onClick:t[0]||(t[0]=e.withModifiers(e=>E(),["prevent"]))},[e.renderSlot(o.$slots,"summary",e.normalizeProps(e.guardReactiveProps({isExpanded:e.unref(A),expand:V,collapse:S,groupExpand:$,groupCollapse:k})),()=>[e.createTextVNode(e.toDisplayString(e.unref(m)),1)])],8,p),e.createElementVNode("div",{"aria-hidden":!e.unref(A),class:"vv-accordion__content"},[e.renderSlot(o.$slots,"default",e.normalizeProps(e.guardReactiveProps({isExpanded:e.unref(A),expand:V,collapse:S,groupExpand:$,groupCollapse:k})),()=>[e.createTextVNode(e.toDisplayString(e.unref(v)),1)])],8,f)],10,c))}})});