@fifteen/design-system-vue/dist/cjs/components/FPopup.js

Vue 3 (Composition API + Typescript) implementation of the Fifteen Design System

"use strict";const e=require("vue"),P=require("../vendor/@fifteen/vue3-popper/dist/popper.esm.js"),x=require("../vendor/@fifteen/shared-lib/dist/es/composables/useVModelProxy.js");require("../vendor/countup.js/dist/countUp.min.js");const c=require("@vueuse/core");require("../vendor/@fifteen/shared-lib/dist/es/composables/useLocaleFormat.js");require("../vendor/@fifteen/shared-lib/dist/es/helpers/consoleWatch.js");require("../vendor/@fifteen/shared-lib/dist/es/utils/text.js");const k=require("../utils/genSize.js"),S=e.defineComponent({__name:"FPopup",props:{modelValue:{type:Boolean,default:!1},persistent:{type:Boolean,default:!1},width:{default:300},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},preventActivation:{type:Boolean,default:!1}},emits:["update:modelValue"],setup(p){const t=p,v=e.computed(()=>({"--FPopup--width":k.genSize(t.width)})),m=e.computed(()=>({placement:"bottom-start",strategy:t.absolute?"absolute":"fixed",zIndex:t.zIndex,offsetSkid:String(t.offsetSkid),offsetDistance:String(t.offsetDistance)})),o=x.useVModelProxy({props:t}),s=e.ref(),b=e.computed(()=>({"FPopup--disabled":t.disabled,"FPopup--inanimated":t.inanimated})),y=["button:not(.FButton)","[href]","input","select","textarea",'[tabindex]:not([tabindex="-1"])'].join(", ");function r(){if(!o.value||t.disabled)return;Array.from(s.value?.querySelectorAll(y)??[]).some(a=>!a.hasAttribute("disabled"))||s.value?.focus()}async function i(){t.disabled||(o.value=!o.value)}function l(){t.disabled||(o.value=!0)}function u(){t.disabled||(o.value=!1)}e.watch(o,n=>{n&&r()});function h(n){t.preventActivation||(l(),n.preventDefault())}const d=e.ref();c.onClickOutside(d,()=>{t.persistent||(o.value=!1)});const f=e.ref();return e.onMounted(()=>{c.useMutationObserver(f,()=>e.nextTick(()=>window.dispatchEvent(new Event("resize"))),{childList:!0})}),(n,a)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["FPopup",e.unref(b)]),ref_key:"popupRef",ref:d,style:e.normalizeStyle(e.unref(v)),role:"button",tabindex:"-1"},[e.createVNode(e.unref(P),e.mergeProps({show:e.unref(o)},e.unref(m)),{content:e.withCtx(()=>[e.createElementVNode("div",{class:"FPopup__content",ref_key:"contentRef",ref:f,role:"listbox",tabindex:"-1",onClick:r,onKeydown:e.withKeys(r,["enter"])},[e.renderSlot(n.$slots,"default",e.normalizeProps(e.guardReactiveProps({toggle:i,open:l,close:u})))],544)]),default:e.withCtx(()=>[e.createElementVNode("div",{class:"FPopup__activator",ref_key:"activatorRef",ref:s,role:"button",tabindex:"-1",onKeydown:[e.withKeys(h,["enter"]),a[0]||(a[0]=e.withKeys(e.withModifiers(w=>u(),["prevent"]),["esc"]))],onClick:a[1]||(a[1]=w=>!n.preventActivation&&i())},[e.renderSlot(n.$slots,"activator",e.normalizeProps(e.guardReactiveProps({toggle:i,open:l,close:u})))],544)]),_:3},16,["show"])],6))}});module.exports=S;