@iwusong/datav-vue3/dist/cjs/components/border-box-8/index.js

Vue3 large screen data display component library

"use strict";var L=Object.defineProperty,j=Object.defineProperties;var v=Object.getOwnPropertyDescriptors;var h=Object.getOwnPropertySymbols;var _=Object.prototype.hasOwnProperty,w=Object.prototype.propertyIsEnumerable;var m=(r,e,t)=>e in r?L(r,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):r[e]=t,$=(r,e)=>{for(var t in e||(e={}))_.call(e,t)&&m(r,t,e[t]);if(h)for(var t of h(e))w.call(e,t)&&m(r,t,e[t]);return r},x=(r,e)=>j(r,v(e));Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("vue"),z=require("../../hooks/useResize.js"),S=require("../../hooks/useUuid.js"),b=require("../../utils/borderBox.js"),I=require("../../utils/common.js"),g=require("../../utils/styled.js"),B=require("../styled/borderBox.js");require("lodash-es");require("../../utils/logger.js");const M=["#235fa7","#4fd2dd"],R=g.styled.svg`
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0px;
  top: 0px;
`("border-svg-container"),P=()=>x($({},b.createBorderBoxCommonProps()),{duration:{type:Number,default:3},reverse:{type:Boolean,default:!1}}),U=I.withInstall(o.defineComponent({name:"BorderBox8",props:P(),setup(r,{slots:e,expose:t}){const{autoBindRef:N,refreshLayoutSize:y,domSize:k}=z.useResize();t({refreshLayoutSize:y});const n=S.useUuid();return()=>{const{color:V,backgroundColor:C,duration:a,reverse:q}=r,{width:s,height:d}=k,l=b.mergeColor(M,V),i=`border-box-8-path-${n.id}`,u=`border-box-8-gradient-${n.id}`,c=`border-box-8-mask-${n.id}`,f=q?`M 2.5, 2.5 L 2.5, ${d-2.5} L ${s-2.5}, ${d-2.5} L ${s-2.5}, 2.5 L 2.5, 2.5`:`M2.5, 2.5 L${s-2.5}, 2.5 L${s-2.5}, ${d-2.5} L2.5, ${d-2.5} L2.5, 2.5`;return o.createVNode(B.BorderBoxContainer,{class:g.styled.getClassNameForBind("border-box-8"),ref:N},{default:()=>[o.createVNode(R,{width:s,height:d},{default:()=>[o.createVNode("defs",null,[o.createVNode("path",{id:i,d:f,fill:"transparent"},null),o.createVNode("radialGradient",{id:u,cx:"50%",cy:"50%",r:"50%"},[o.createVNode("stop",{offset:"0%","stop-color":"#fff","stop-opacity":"1"},null),o.createVNode("stop",{offset:"100%","stop-color":"#fff","stop-opacity":"0"},null)]),o.createVNode("mask",{id:c},[o.createVNode("circle",{cx:"0",cy:"0",r:"150",fill:`url(#${u})`},[o.createVNode("animateMotion",{dur:`${a}s`,path:f,rotate:"auto",repeatCount:"indefinite"},null)])])]),o.createVNode("polygon",{fill:C,points:`5, 5 ${s-5}, 5 ${s-5} ${d-5} 5, ${d-5}`},null),o.createVNode("use",{stroke:l[0],"stroke-width":"1","xlink:href":`#${i}`},null),o.createVNode("use",{stroke:l[1],"stroke-width":"3","xlink:href":`#${i}`,mask:`url(#${c})`},[o.createVNode("animate",{attributeName:"stroke-dasharray",from:`0, ${length}`,to:`${length}, 0`,dur:`${a}s`,repeatCount:"indefinite"},null)])]}),o.createVNode(B.BorderBoxContent,null,{default:()=>{var p;return[(p=e.default)==null?void 0:p.call(e)]}})]})}}}));exports.BorderBox8=U;