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

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

"use strict";const e=require("vue"),g=require("../vendor/@fifteen/shared-lib/dist/es/composables/useVModelProxy.js");require("../vendor/countup.js/dist/countUp.min.js");const h=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 n=require("../utils/genSize.js"),s=require("../utils/getCssColor.js"),v=["aria-checked","onKeydown"],x={class:"FExpandable__container"},E=e.defineComponent({__name:"FExpandable",props:{modelValue:{type:Boolean,default:!1},gap:{default:24},titleVerticalPadding:{default:16},iconScale:{default:1},withHoverAnimation:{type:Boolean,default:!1},hoverColor:{default:"primary"},textHoverColor:{default:"neutral--light-5"},noIsolation:{type:Boolean,default:!1}},setup(d){const t=d,o=g.useVModelProxy({props:t}),a=e.ref(),{height:c}=h.useElementSize(a),u=e.computed(()=>({"FExpandable--toggled":o.value})),p=e.computed(()=>({"FExpandable__title--withHover":t.withHoverAnimation})),f=e.computed(()=>({"--FExpandable--container-height":n.genSize(c.value),"--FExpandable--container-gap":n.genSize(t.gap),"--FExpandable--title-vertical-padding":n.genSize(t.titleVerticalPadding),"--FExpandable--icon-scale":String(t.iconScale),"--FExpandable--hover-color":s.getCssColor(t.hoverColor),"--FExpandable--text-hover-color":s.getCssColor(t.textHoverColor),"--FExpandable--isolation":t.noIsolation?"auto":"isolate"}));function l(){o.value=!o.value}return(r,i)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["FExpandable",e.unref(u)]),style:e.normalizeStyle(e.unref(f))},[e.createElementVNode("div",{class:e.normalizeClass(["FExpandable__title",e.unref(p)]),tabindex:"0",role:"switch","aria-checked":e.unref(o),onClick:l,onKeydown:[e.withKeys(e.withModifiers(l,["stop"]),["enter"]),e.withKeys(e.withModifiers(l,["prevent"]),["space"])]},[e.renderSlot(r.$slots,"title"),i[0]||(i[0]=e.createElementVNode("div",{class:"FExpandable__title__highlighter"},null,-1))],42,v),e.createElementVNode("div",x,[e.createElementVNode("div",{class:"FExpandable__content",ref_key:"contentRef",ref:a},[e.renderSlot(r.$slots,"default")],512)])],6))}});module.exports=E;