@iwusong/datav-vue3
Version:
Vue3 large screen data display component library
15 lines (14 loc) • 2.95 kB
JavaScript
"use strict";var w=Object.defineProperty;var d=Object.getOwnPropertySymbols;var C=Object.prototype.hasOwnProperty,_=Object.prototype.propertyIsEnumerable;var f=(o,e,r)=>e in o?w(o,e,{enumerable:!0,configurable:!0,writable:!0,value:r}):o[e]=r,n=(o,e)=>{for(var r in e||(e={}))C.call(e,r)&&f(o,r,e[r]);if(d)for(var r of d(e))_.call(e,r)&&f(o,r,e[r]);return o};Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("vue"),p=require("@jiaminghi/color"),$=require("../../hooks/useResize.js"),x=require("../../hooks/useUuid.js"),h=require("../../utils/common.js"),g=require("../../utils/decoration.js"),D=require("../../utils/styled.js");require("lodash-es");require("../../utils/logger.js");function S(){return n(n({},g.createColorProps()),g.createDurationProps(3))}const a=["rgba(3, 166, 224, 0.8)","rgba(3, 166, 224, 0.5)"],m=100,y=100,z=D.styled.div`
position: relative;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.__STYLED__ svg.svg-origin {
position: absolute;
left: 0px;
top: 0px;
transform-origin: left top;
`("decoration-9"),T=h.withInstall(t.defineComponent({name:"Decoration9",props:S(),setup(o,{slots:e,expose:r}){const{autoBindRef:k,refreshLayoutSize:v,domSize:N}=$.useResize();r({refreshLayoutSize:v});const c=`decoration-9-polygon-${x.useUuid().id}`;return()=>{const{width:V,height:b}=N,{color:j,duration:i}=o,s=h.mergeColor(a,j),q={transform:`scale(${V/m},${b/y})`};return t.createVNode(z,{ref:k},{default:()=>{var l;return[t.createVNode("svg",{class:"svg-origin",width:m,height:y,style:q},[t.createVNode("defs",null,[t.createVNode("polygon",{id:c,points:"15, 46.5, 21, 47.5, 21, 52.5, 15, 53.5"},null)]),t.createVNode("circle",{cx:"50",cy:"50",r:"45",fill:"transparent",stroke:s[1],"stroke-width":"10","stroke-dasharray":"80, 100, 30, 100"},[t.createVNode("animateTransform",{attributeName:"transform",type:"rotate",values:"0 50 50;360 50 50",dur:`${i}s`,repeatCount:"indefinite"},null)]),t.createVNode("circle",{cx:"50",cy:"50",r:"45",fill:"transparent",stroke:s[0],"stroke-width":"6","stroke-dasharray":"50, 66, 100, 66"},[t.createVNode("animateTransform",{attributeName:"transform",type:"rotate",values:"0 50 50;-360 50 50",dur:`${i}s`,repeatCount:"indefinite"},null)]),t.createVNode("circle",{cx:"50",cy:"50",r:"38",fill:"transparent",stroke:p.fade(s[1]||a[1],30),"stroke-width":"1","stroke-dasharray":"5, 1"},null),new Array(20).fill(0).map((R,u)=>t.createVNode("use",{key:u,"xlink:href":`#${c}`,stroke:s[1],fill:Math.random()>.4?"transparent":s[0]},[t.createVNode("animateTransform",{attributeName:"transform",type:"rotate",values:"0 50 50;360 50 50",dur:`${i}s`,begin:`${u*i/20}s`,repeatCount:"indefinite"},null)])),t.createVNode("circle",{cx:"50",cy:"50",r:"26",fill:"transparent",stroke:p.fade(s[1]||a[1],30),"stroke-width":"1","stroke-dasharray":"5, 1"},null)]),(l=e.default)==null?void 0:l.call(e)]}})}}}));exports.Decoration9=T;