t-fighting-design
Version:
Fighting design can quickly build interactive interfaces in vue3 applications, which looks good.
2 lines (1 loc) • 1.2 kB
JavaScript
"use strict";var n=Object.defineProperty;var p=(s,e,t)=>e in s?n(s,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):s[e]=t;var i=(s,e,t)=>(p(s,typeof e!="symbol"?e+"":e,t),t);Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});class r{constructor(e,t,o){i(this,"evt");i(this,"node");i(this,"option");i(this,"clickRipples",()=>{const{layerX:e,layerY:t}=this.evt,o=this.renderElement(e,t);this.node.appendChild(o),this.removeElement(o)});i(this,"computedRipplesColor",()=>{if(this.option.ripplesColor)return this.option.ripplesColor;const e={default:"#f0f0f0",primary:"#2d5af1",success:"#52b35e",danger:"#ff0200",warning:"#fcc202"};if(this.option.component==="f-button"){const{simple:t,text:o}=this.option;return t||o?e[this.option.type]:""}return e[this.option.type]});i(this,"renderElement",(e,t)=>{const o=document.createElement("span");return o.className=this.option.className,o.style.background=this.computedRipplesColor(),o.style.left=`${e}px`,this.option.component==="f-button"&&(o.style.top=`${t}px`),o});i(this,"removeElement",e=>{setTimeout(()=>{e.remove()},this.option.duration||400)});this.evt=e,this.node=t,this.option=o}}exports.Ripples=r;