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

Vue3 large screen data display component library

"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("vue"),V=require("../../hooks/useResize.js"),g=require("../../hooks/useUuid.js"),a=require("../../utils/borderBox.js"),y=require("../../utils/common.js"),u=require("../../utils/styled.js"),$=require("../styled/borderBox.js");require("lodash-es");require("../../utils/logger.js");const x=["#11eefd","#0078d2"],B=u.styled.svg`
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0px;
  top: 0px;
`("border-svg-container"),k=y.withInstall(t.defineComponent({name:"BorderBox9",props:a.createBorderBoxCommonProps(),setup(f,{slots:l,expose:c}){const{autoBindRef:p,refreshLayoutSize:N,domSize:m}=V.useResize();c({refreshLayoutSize:N});const n=g.useUuid();return()=>{const{color:b,backgroundColor:h}=f,{width:e,height:o}=m,r=a.mergeColor(x,b),i=`border-box-9-gradient-${n.id}`,s=`border-box-9-mask-${n.id}`;return t.createVNode($.BorderBoxContainer,{class:u.styled.getClassNameForBind("border-box-9"),ref:p},{default:()=>[t.createVNode(B,{width:e,height:o},{default:()=>[t.createVNode("defs",null,[t.createVNode("linearGradient",{id:i,x1:"0%",y1:"0%",x2:"100%",y2:"100%"},[t.createVNode("animate",{attributeName:"x1",values:"0%;100%;0%",dur:"10s",begin:"0s",repeatCount:"indefinite"},null),t.createVNode("animate",{attributeName:"x2",values:"100%;0%;100%",dur:"10s",begin:"0s",repeatCount:"indefinite"},null),t.createVNode("stop",{offset:"0%","stop-color":r[0]},[t.createVNode("animate",{attributeName:"stop-color",values:`${r[0]};${r[1]};${r[0]}`,dur:"10s",begin:"0s",repeatCount:"indefinite"},null)]),t.createVNode("stop",{offset:"100%","stop-color":r[1]},[t.createVNode("animate",{attributeName:"stop-color",values:`${r[1]};${r[0]};${r[1]}`,dur:"10s",begin:"0s",repeatCount:"indefinite"},null)])]),t.createVNode("mask",{id:s},[t.createVNode("polyline",{stroke:"#fff","stroke-width":"3",fill:"transparent",points:`8, ${o*.4} 8, 3, ${e*.4+7}, 3`},null),t.createVNode("polyline",{fill:"#fff",points:`
                      8, ${o*.15} 8, 3, ${e*.1+7}, 3
                      ${e*.1}, 8 14, 8 14, ${o*.15-7}
                    `},null),t.createVNode("polyline",{stroke:"#fff","stroke-width":"3",fill:"transparent",points:`${e*.5}, 3 ${e-3}, 3, ${e-3}, ${o*.25}`},null),t.createVNode("polyline",{fill:"#fff",points:`
                      ${e*.52}, 3 ${e*.58}, 3
                      ${e*.58-7}, 9 ${e*.52+7}, 9
                    `},null),t.createVNode("polyline",{fill:"#fff",points:`
                      ${e*.9}, 3 ${e-3}, 3 ${e-3}, ${o*.1}
                      ${e-9}, ${o*.1-7} ${e-9}, 9 ${e*.9+7}, 9
                    `},null),t.createVNode("polyline",{stroke:"#fff","stroke-width":"3",fill:"transparent",points:`8, ${o*.5} 8, ${o-3} ${e*.3+7}, ${o-3}`},null),t.createVNode("polyline",{fill:"#fff",points:`
                      8, ${o*.55} 8, ${o*.7}
                      2, ${o*.7-7} 2, ${o*.55+7}
                    `},null),t.createVNode("polyline",{stroke:"#fff","stroke-width":"3",fill:"transparent",points:`${e*.35}, ${o-3} ${e-3}, ${o-3} ${e-3}, ${o*.35}`},null),t.createVNode("polyline",{fill:"#fff",points:`
                      ${e*.92}, ${o-3} ${e-3}, ${o-3} ${e-3}, ${o*.8} ${e-9}, ${o*.8+7} ${e-9}, ${o-9} ${e*.92+7}, ${o-9}`},null)])]),t.createVNode("polygon",{fill:h,points:`
                  15, 9 ${e*.1+1}, 9 ${e*.1+4}, 6 ${e*.52+2}, 6
                  ${e*.52+6}, 10 ${e*.58-7}, 10 ${e*.58-2}, 6
                  ${e*.9+2}, 6 ${e*.9+6}, 10 ${e-10}, 10 ${e-10}, ${o*.1-6}
                  ${e-6}, ${o*.1-1} ${e-6}, ${o*.8+1} ${e-10}, ${o*.8+6}
                  ${e-10}, ${o-10} ${e*.92+7}, ${o-10}  ${e*.92+2}, ${o-6}
                  11, ${o-6} 11, ${o*.15-2} 15, ${o*.15-7}
                `},null),t.createVNode("rect",{x:"0",y:"0",width:e,height:o,fill:`url(#${i})`,mask:`url(#${s})`},null)]}),t.createVNode($.BorderBoxContent,null,{default:()=>{var d;return[(d=l.default)==null?void 0:d.call(l)]}})]})}}}));exports.BorderBox9=k;