t-fighting-design
Version:
Fighting design can quickly build interactive interfaces in vue3 applications, which looks good.
2 lines (1 loc) • 1.75 kB
JavaScript
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),u=require("./index3.js"),_=require("../../_utils/index3.js"),p={key:0,class:"f-sticky-card__source"},f={class:"f-sticky-card__content"},k=["onClick"],m={class:"f-sticky-card__option-left"},y=["onClick"],h={class:"f-sticky-card__option-right"},C=e.defineComponent({name:"FStickyCard"}),v=e.defineComponent({...C,props:u.Props,setup(r){const n=r,o=e.ref(n.open),c=()=>{o.value=!e.unref(o);const{openEnd:t,closeEnd:s}=n;e.unref(o)?t(!0):s(!1)},i=e.computed(()=>{const{openText:t,closeText:s}=n;return`${e.unref(o)?t:s}`}),l=e.computed(()=>{const{background:t,openHeight:s,borderColor:d}=n;return{"--sticky-card-content-background":t,"--sticky-card-border-color":d,"--sticky-card-max-height":_.sizeChange(s)}}),a=e.computed(()=>["f-sticky-card__box",{"f-sticky-card__box-open":e.unref(o)}]);return(t,s)=>(e.openBlock(),e.createElementBlock("div",{class:"f-sticky-card",style:e.normalizeStyle(e.unref(l))},[t.$slots.source?(e.openBlock(),e.createElementBlock("div",p,[e.renderSlot(t.$slots,"source")])):e.createCommentVNode("",!0),e.createElementVNode("div",{class:e.normalizeClass(e.unref(a))},[e.createElementVNode("div",f,[e.renderSlot(t.$slots,"default")])],2),e.createElementVNode("div",{class:e.normalizeClass(["f-sticky-card__option",{"f-sticky-card__option-open":o.value}]),onClick:e.withModifiers(c,["self"])},[e.createElementVNode("span",m,[e.renderSlot(t.$slots,"optionLeft")]),e.createElementVNode("span",{class:"f-sticky-card__option-text",onClick:e.withModifiers(c,["self"])},e.toDisplayString(e.unref(i)),9,y),e.createElementVNode("span",h,[e.renderSlot(t.$slots,"optionRight")])],10,k)],4))}});exports.default=v;