t-fighting-design/lib/expand-card/src/index2.js

Fighting design can quickly build interactive interfaces in vue3 applications, which looks good.

"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),_=require("./index3.js"),c=require("../../_utils/index3.js"),f=["onClick"],g=e.defineComponent({name:"FExpandCard"}),k=e.defineComponent({...g,props:_.Props,setup(l){const r=l,a=e.ref(r.expandIndex),u=t=>{a.value=t},i=t=>{if(t===a.value)return"f-expand-card__active"},d=e.computed(()=>{const{round:t}=r;return["f-expand-card__item",{"f-expand-card__round":t}]}),p=e.computed(()=>{const{imageList:t}=r;return t.map(n=>c.isString(n)?{url:n}:n)}),m=e.computed(()=>{const{width:t,height:n}=r;return{width:c.sizeChange(t),height:c.sizeChange(n)}});return(t,n)=>(e.openBlock(),e.createElementBlock("div",{class:"f-expand-card",style:e.normalizeStyle(e.unref(m))},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(e.unref(p),(o,s)=>(e.openBlock(),e.createElementBlock("div",{key:s,class:e.normalizeClass([i(s),...e.unref(d)]),style:e.normalizeStyle({backgroundImage:`url(${o.url})`}),onClick:x=>u(s)},[o.text?(e.openBlock(),e.createElementBlock("h3",{key:0,class:"f-expand-card__title",style:e.normalizeStyle({color:t.color})},e.toDisplayString(o.text),5)):e.createCommentVNode("",!0)],14,f))),128))],4))}});exports.default=k;