@iwusong/datav-vue3
Version:
Vue3 large screen data display component library
8 lines (7 loc) • 1.89 kB
JavaScript
"use strict";var N=Object.defineProperty;var f=Object.getOwnPropertySymbols;var j=Object.prototype.hasOwnProperty,q=Object.prototype.propertyIsEnumerable;var m=(o,e,t)=>e in o?N(o,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):o[e]=t,c=(o,e)=>{for(var t in e||(e={}))j.call(e,t)&&m(o,t,e[t]);if(f)for(var t of f(e))q.call(e,t)&&m(o,t,e[t]);return o};Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("vue"),x=require("../../hooks/useResize.js"),g=require("../../utils/common.js"),a=require("../../utils/decoration.js"),D=require("../../utils/styled.js");require("lodash-es");require("../../utils/logger.js");const S=["#3faacb","#fff"];function V(){return c(c(c({},a.createColorProps()),a.createReverseProps()),a.createDurationProps(6))}function k(o,e,t){return o?{width:1,height:t,x:e/2,y:0}:{width:e,height:1,x:0,y:t/2}}const b=D.styled.div`
display: flex;
width: 100%;
height: 100%;
justify-content: center;
align-items: center;
`("decoration-2"),z=g.withInstall(r.defineComponent({name:"Decoration2",props:V(),setup(o,{expose:e}){const{autoBindRef:t,refreshLayoutSize:y,domSize:p}=x.useResize();return e({refreshLayoutSize:y}),()=>{const{width:s,height:n}=p,{color:v,reverse:i,duration:u}=o,l=g.mergeColor(S,v),{x:d,y:h,width:w,height:C}=k(i,s,n);return r.createVNode(b,{ref:t},{default:()=>[r.createVNode("svg",{width:s,height:n},[r.createVNode("rect",{x:d,y:h,width:w,height:C,fill:l[0]},[r.createVNode("animate",{attributeName:i?"height":"width",from:"0",to:i?n:s,dur:`${u}s`,calcMode:"spline",keyTimes:"0;1",keySplines:".42,0,.58,1",repeatCount:"indefinite"},null)]),r.createVNode("rect",{x:d,y:h,width:"1",height:"1",fill:l[1]},[r.createVNode("animate",{attributeName:i?"y":"x",from:"0",to:i?n:s,dur:`${u}s`,calcMode:"spline",keyTimes:"0;1",keySplines:"0.42,0,0.58,1",repeatCount:"indefinite"},null)])])]})}}}));exports.Decoration2=z;