@fifteen/design-system-vue
Version:
Vue 3 (Composition API + Typescript) implementation of the Fifteen Design System
2 lines (1 loc) • 7.81 kB
JavaScript
;const X=require("./FLoader.js");;/* empty css */const e=require("vue"),Z=require("../vendor/@fifteen/vue3-popper/dist/popper.esm.js"),P=require("../vendor/fast-deep-equal/es6/index.js"),R=require("../vendor/@fifteen/shared-lib/dist/es/composables/useVModelProxy.js");require("../vendor/countup.js/dist/countUp.min.js");const B=require("@vueuse/core");require("../vendor/@fifteen/shared-lib/dist/es/composables/useLocaleFormat.js");require("../vendor/@fifteen/shared-lib/dist/es/helpers/consoleWatch.js");const v=require("../vendor/@fifteen/shared-lib/dist/es/utils/text.js"),h=require("../utils/noop.js"),w=require("../utils/getCssColor.js"),q=require("../utils/genSize.js"),ee=["aria-selected","onClick","onKeydown","onMouseenter"],te={class:"FMenu__option__content"},oe={key:0,class:"FMenu__option__description"},ne={key:1,class:"FMenu__noOption"},re=800,se=e.defineComponent({__name:"FMenu",props:{modelValue:{type:Boolean,default:!1},selectedOption:{default:void 0},options:{default:()=>[]},preventSelection:{type:Boolean,default:!1},preventSearch:{type:Boolean,default:!1},persistent:{type:Boolean,default:!1},emptyText:{default:""},width:{default:300},color:{default:"primary"},textColor:{default:"neutral--light-5"},selectedOptionColor:{default:"primary--light-2"},selectedOptionTextColor:{default:"primary--dark-2"},disabled:{type:Boolean,default:!1},inanimated:{type:Boolean,default:!1},loading:{type:Boolean,default:!1},absolute:{type:Boolean,default:!1},zIndex:{default:9999},offsetSkid:{default:0},offsetDistance:{default:16},optionHeight:{default:52},preventActivation:{type:Boolean,default:!1}},emits:["update:modelValue","update:selectedOption","before-select-option"],setup($,{expose:N,emit:T}){const n=$;N({selectOption:g});const D=T,I=e.computed(()=>({"--fmenu--width":q.genSize(n.width),"--fmenu--color":w.getCssColor(n.color),"--fmenu--text-color":w.getCssColor(n.textColor),"--fmenu--selected-option-color":w.getCssColor(n.selectedOptionColor),"--fmenu--selected-option-text-color":w.getCssColor(n.selectedOptionTextColor),"--fmenu-option-height":q.genSize(n.optionHeight)})),z=e.computed(()=>({placement:"bottom-start",strategy:n.absolute?"absolute":"fixed",zIndex:n.zIndex,offsetSkid:String(n.offsetSkid),offsetDistance:String(n.offsetDistance)})),i=R.useVModelProxy({props:n}),m=R.useVModelProxy({props:n,propName:"selectedOption"}),_=e.ref([]),b=e.ref(),L=e.computed(()=>({"FMenu--disabled":n.disabled,"FMenu--inanimated":n.inanimated})),a=e.ref(-1),C=e.ref(!1);async function O(){n.disabled||(i.value=!i.value)}const A=["button:not(.FButton)","[href]","input","select","textarea",'[tabindex]:not([tabindex="-1"])'].join(", ");function M(){if(!i.value||n.disabled)return;Array.from(b.value?.querySelectorAll(A)??[]).some(t=>!t.hasAttribute("disabled"))||b.value?.focus()}function F(){n.disabled||(i.value=!0)}function k(){n.disabled||(i.value=!1)}e.watch(i,o=>{o?M():d(-1)}),e.watch(()=>n.options,()=>{d(0)});function d(o){a.value=o}function p(o){return n.options.findIndex(t=>P(t.value,m.value))===o}function H(o){return{"FMenu__option--preselected":a.value===o,"FMenu__option--selected":p(o)}}function x(o){C.value||d(o)}function W(o){switch(o){case"first":return 0;case"last":return n.options.length-1;case"prev":return a.value-1<0?n.options.length-1:a.value-1;case"next":return a.value+1>n.options.length-1?0:a.value+1}}function c(o){if(!i.value||!n.options.length)return;C.value=!0;const t=W(o);S(t),d(t)}const y=e.ref(),{top:Y,bottom:j,height:G}=B.useElementBounding(y);function S(o){const t=_.value[o],{top:l,bottom:r,height:s}=t.getBoundingClientRect();if(l<Y.value)return y.value.scrollTo(0,o*(s+4));if(r>j.value)return y.value.scrollTo(0,(o+1)*(s+4)-G.value+12)}function g(o){if(!n.options.length||n.disabled)return;if(!o&&a.value===-1){if(m.value){const l=n.options.findIndex(r=>P(r.value,m.value));d(l),S(l)}return}const t=o??n.options[a.value];D("before-select-option",t.value),!n.preventSelection&&(m.value=t.value,k())}let f="",E;function J(o){if(o.stopPropagation(),!i.value||n.preventSearch)return;f=v.removeDiacritics(f+o.key).toLocaleLowerCase();function t(s){const u=v.removeDiacritics(s.label.toLowerCase()),U=v.removeDiacritics(v.stringify(s.value).toLowerCase());return u.startsWith(f)||U.startsWith(f)}E=setTimeout(()=>{clearTimeout(E),f=""},re);const l=n.options.findIndex(t),r=n.options.filter(t).length;if(l===-1){f="";return}S(l),d(l),r===1&&(f="")}function Q(o){n.preventActivation||(F(),o.preventDefault()),g()}const K=e.ref();B.onClickOutside(K,()=>{n.persistent||(i.value=!1)});const V=e.ref();return e.onMounted(()=>{B.useMutationObserver(V,()=>e.nextTick(()=>window.dispatchEvent(new Event("resize"))),{childList:!0})}),(o,t)=>{const l=X;return e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["FMenu",e.unref(L)]),ref_key:"menuRef",ref:K,style:e.normalizeStyle(e.unref(I)),role:"button",tabindex:"-1",onKeydown:J},[e.createVNode(e.unref(Z),e.mergeProps({show:e.unref(i)},e.unref(z)),{content:e.withCtx(()=>[e.createElementVNode("div",{class:"FMenu__content",ref_key:"contentRef",ref:V,role:"listbox",tabindex:"-1",onClick:M,onKeydown:e.withKeys(M,["enter"]),onMousemove:t[12]||(t[12]=r=>C.value=!1)},[o.options.length?(e.openBlock(),e.createElementBlock("div",{key:0,class:"FMenu__optionsMenu",ref_key:"menuOptionsRef",ref:y},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(o.options,(r,s)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["FMenu__option",H(s)]),ref_for:!0,ref_key:"optionRefs",ref:_,key:e.unref(v.stringify)(r.value),role:"option",tabindex:"-1","aria-selected":p(s),onClick:u=>g(r),onKeydown:e.withKeys(u=>g(r),["enter"]),onMouseenter:u=>x(s),onMouseleave:t[9]||(t[9]=u=>x(-1)),onFocus:t[10]||(t[10]=(...u)=>e.unref(h.noop)&&e.unref(h.noop)(...u)),onFocusout:t[11]||(t[11]=(...u)=>e.unref(h.noop)&&e.unref(h.noop)(...u))},[e.renderSlot(o.$slots,"option-prefix",e.mergeProps({ref_for:!0},{option:r,index:s,isSelected:p(s)})),e.createElementVNode("div",te,[e.renderSlot(o.$slots,"option",e.mergeProps({ref_for:!0},{option:r,index:s,isSelected:p(s)}),()=>[e.createElementVNode("span",null,e.toDisplayString(r.label),1)]),r.description?(e.openBlock(),e.createElementBlock("span",oe,e.toDisplayString(r.description),1)):e.createCommentVNode("",!0)]),t[13]||(t[13]=e.createElementVNode("div",{class:"FMenu__option__spacer"},null,-1)),e.renderSlot(o.$slots,"option-suffix",e.mergeProps({ref_for:!0},{option:r,index:s,isSelected:p(s)}))],42,ee))),128))],512)):e.createCommentVNode("",!0),o.options.length===0?(e.openBlock(),e.createElementBlock("div",ne,[o.loading?(e.openBlock(),e.createBlock(l,{key:0,class:"FMenu__loader",height:"20"})):e.createCommentVNode("",!0),e.createElementVNode("span",null,e.toDisplayString(o.emptyText),1)])):e.createCommentVNode("",!0)],544)]),default:e.withCtx(()=>[e.createElementVNode("div",{class:"FMenu__activator",ref_key:"activatorRef",ref:b,role:"button",tabindex:"-1",onKeydown:[t[0]||(t[0]=e.withKeys(e.withModifiers(r=>c("next"),["prevent"]),["down"])),t[1]||(t[1]=e.withKeys(e.withModifiers(r=>c("prev"),["prevent"]),["up"])),t[2]||(t[2]=e.withKeys(e.withModifiers(r=>c("first"),["prevent"]),["home"])),t[3]||(t[3]=e.withKeys(e.withModifiers(r=>c("last"),["prevent"]),["end"])),t[4]||(t[4]=e.withKeys(e.withModifiers(r=>{c("next"),e.unref(i)&&r.preventDefault()},["exact"]),["tab"])),t[5]||(t[5]=e.withKeys(e.withModifiers(r=>{c("prev"),e.unref(i)&&r.preventDefault()},["shift"]),["tab"])),t[6]||(t[6]=e.withKeys(r=>Q(r),["enter"])),t[7]||(t[7]=e.withKeys(e.withModifiers(r=>k(),["prevent"]),["esc"]))],onClick:t[8]||(t[8]=r=>!o.preventActivation&&O())},[e.renderSlot(o.$slots,"activator",e.normalizeProps(e.guardReactiveProps({toggleMenu:O,openMenu:F,closeMenu:k})))],544)]),_:3},16,["show"])],38)}}});module.exports=se;