data-view-vue3
Version:
18 lines (17 loc) • 11.2 kB
JavaScript
(function(d,e){typeof exports=="object"&&typeof module!="undefined"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(d=typeof globalThis!="undefined"?globalThis:d||self,e(d["data-view-vue3"]={},d.Vue))})(this,function(d,e){"use strict";function E(t,i){let s;return()=>{clearTimeout(s);const[c,r]=[this,arguments];s=setTimeout(()=>{i.apply(c,r)},t)}}function V(t,i){const s=window.MutationObserver||window.WebKitMutationObserver||window.MozMutationObserver,c=new s(i);return c.observe(t,{attributes:!0,attributeFilter:["style"],attributeOldValue:!0}),c}function $(t,i){for(const s in i){if(t[s]&&typeof t[s]=="object"){$(t[s],i[s]);continue}if(typeof i[s]=="object"){t[s]=_(i[s],!0);continue}t[s]=i[s]}return t}function _(t,i=!1){if(!t)return t;const{parse:s,stringify:c}=JSON;if(!i)return s(c(t));const r=t instanceof Array?[]:{};if(t&&typeof t=="object")for(const o in t)t.hasOwnProperty(o)&&(t[o]&&typeof t[o]=="object"?r[o]=_(t[o],!0):r[o]=t[o]);return r}function p(t,i,s){let c=e.ref();const r=e.ref(0),o=e.ref(0);let n=()=>{},l=null;const a=async()=>{await f(!1),g(),m(),typeof s=="function"&&s()},f=(de=!0)=>new Promise(fe=>{e.nextTick(()=>{c=t,r.value=c.value?c.value.clientWidth:0,o.value=c.value?c.value.clientHeight:0,c.value?(!r.value||!o.value)&&console.warn("DataV: Component width or height is 0px, rendering abnormality may occur!"):console.warn("DataV: Failed to get dom node, component rendering may be abnormal!"),typeof i=="function"&&de&&i(),fe()})}),g=()=>{n=E(100,f)},m=()=>{l=V(c.value,n),window.addEventListener("resize",n)},ae=()=>{!l||(l.disconnect(),l.takeRecords(),l=null,window.removeEventListener("resize",n))};return e.onMounted(()=>{a()}),e.onBeforeUnmount(()=>{ae()}),{dom:c,width:r,height:o,debounceInitWHFun:n,domObserver:l}}var _e="",u=(t,i)=>{const s=t.__vccOpts||t;for(const[c,r]of i)s[c]=r;return s};const w=["width","height"],B=["fill","points"],N=["fill"],x=["values"],C=["fill"],D=["values"],M=["fill"],R=["values"],O={class:"border-box-content"};var h=u(e.defineComponent({props:{color:{default:()=>[]},backgroundColor:{default:"transparent"}},setup(t){const i=t,s=e.ref(null),c=e.ref(["left-top","right-top","left-bottom","right-bottom"]),r=e.ref(["#4fd2dd","#235fa7"]),o=e.ref([]),{width:n,height:l}=p(s);e.watch(e.toRef(i,"color"),f=>{a()});const a=()=>{o.value=$(_(r.value,!0),e.toRef(i,"color")||[])};return e.onMounted(()=>{a()}),(f,g)=>(e.openBlock(),e.createElementBlock("div",{ref_key:"refDom",ref:s,class:"dv-border-box-1"},[(e.openBlock(),e.createElementBlock("svg",{class:"border",width:e.unref(n),height:e.unref(l)},[e.createElementVNode("polygon",{fill:t.backgroundColor,points:`10, 27 10, ${e.unref(l)-27} 13, ${e.unref(l)-24} 13, ${e.unref(l)-21} 24, ${e.unref(l)-11}
38, ${e.unref(l)-11} 41, ${e.unref(l)-8} 73, ${e.unref(l)-8} 75, ${e.unref(l)-10} 81, ${e.unref(l)-10}
85, ${e.unref(l)-6} ${e.unref(n)-85}, ${e.unref(l)-6} ${e.unref(n)-81}, ${e.unref(l)-10} ${e.unref(n)-75}, ${e.unref(l)-10}
${e.unref(n)-73}, ${e.unref(l)-8} ${e.unref(n)-41}, ${e.unref(l)-8} ${e.unref(n)-38}, ${e.unref(l)-11}
${e.unref(n)-24}, ${e.unref(l)-11} ${e.unref(n)-13}, ${e.unref(l)-21} ${e.unref(n)-13}, ${e.unref(l)-24}
${e.unref(n)-10}, ${e.unref(l)-27} ${e.unref(n)-10}, 27 ${e.unref(n)-13}, 25 ${e.unref(n)-13}, 21
${e.unref(n)-24}, 11 ${e.unref(n)-38}, 11 ${e.unref(n)-41}, 8 ${e.unref(n)-73}, 8 ${e.unref(n)-75}, 10
${e.unref(n)-81}, 10 ${e.unref(n)-85}, 6 85, 6 81, 10 75, 10 73, 8 41, 8 38, 11 24, 11 13, 21 13, 24`},null,8,B)],8,w)),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(c.value,m=>(e.openBlock(),e.createElementBlock("svg",{key:m,width:"150px",height:"150px",class:e.normalizeClass(`${m} border`)},[e.createElementVNode("polygon",{fill:o.value[0],points:"6,66 6,18 12,12 18,12 24,6 27,6 30,9 36,9 39,6 84,6 81,9 75,9 73.2,7 40.8,7 37.8,10.2 24,10.2 12,21 12,24 9,27 9,51 7.8,54 7.8,63"},[e.createElementVNode("animate",{attributeName:"fill",values:`${o.value[0]};${o.value[1]};${o.value[0]}`,dur:"0.5s",begin:"0s",repeatCount:"indefinite"},null,8,x)],8,N),e.createElementVNode("polygon",{fill:o.value[1],points:"27.599999999999998,4.8 38.4,4.8 35.4,7.8 30.599999999999998,7.8"},[e.createElementVNode("animate",{attributeName:"fill",values:`${o.value[1]};${o.value[0]};${o.value[1]}`,dur:"0.5s",begin:"0s",repeatCount:"indefinite"},null,8,D)],8,C),e.createElementVNode("polygon",{fill:o.value[0],points:"9,54 9,63 7.199999999999999,66 7.199999999999999,75 7.8,78 7.8,110 8.4,110 8.4,66 9.6,66 9.6,54"},[e.createElementVNode("animate",{attributeName:"fill",values:`${o.value[0]};${o.value[1]};transparent`,dur:"1s",begin:"0s",repeatCount:"indefinite"},null,8,R)],8,M)],2))),128)),e.createElementVNode("div",O,[e.renderSlot(f.$slots,"default",{},void 0,!0)])],512))}}),[["__scopeId","data-v-24d741b4"]]),pe="";const z=["width","height"],S=["fill","points"],T=["stroke","points"],I=["stroke","points"],F=["fill"],W=["fill","cx"],H=["fill","cx","cy"],L=["fill","cy"],P={class:"border-box-content"};var b=u(e.defineComponent({props:{color:{default:()=>[]},backgroundColor:{default:"transparent"}},setup(t){const i=t,s=e.ref(null),c=e.ref(["#fff","rgba(255,255,255,.6)"]),r=e.ref([]),{width:o,height:n}=p(s);e.watch(e.toRef(i,"color"),a=>{l()});const l=()=>{r.value=$(_(c.value,!0),e.toRef(i,"color")||[])};return e.onMounted(()=>{l()}),(a,f)=>(e.openBlock(),e.createElementBlock("div",{ref_key:"refDom",ref:s,class:"dv-border-box-2"},[(e.openBlock(),e.createElementBlock("svg",{class:"dv-border-svg-container",width:e.unref(o),height:e.unref(n)},[e.createElementVNode("polygon",{fill:t.backgroundColor,points:`
7, 7 ${e.unref(o)-7}, 7 ${e.unref(o)-7}, ${e.unref(n)-7} 7, ${e.unref(n)-7}
`},null,8,S),e.createElementVNode("polyline",{stroke:r.value[0],points:`2, 2 ${e.unref(o)-2} ,2 ${e.unref(o)-2}, ${e.unref(n)-2} 2, ${e.unref(n)-2} 2, 2`},null,8,T),e.createElementVNode("polyline",{stroke:r.value[1],points:`6, 6 ${e.unref(o)-6}, 6 ${e.unref(o)-6}, ${e.unref(n)-6} 6, ${e.unref(n)-6} 6, 6`},null,8,I),e.createElementVNode("circle",{fill:r.value[0],cx:"11",cy:"11",r:"1"},null,8,F),e.createElementVNode("circle",{fill:r.value[0],cx:e.unref(o)-11,cy:"11",r:"1"},null,8,W),e.createElementVNode("circle",{fill:r.value[0],cx:e.unref(o)-11,cy:e.unref(n)-11,r:"1"},null,8,H),e.createElementVNode("circle",{fill:r.value[0],cx:"11",cy:e.unref(n)-11,r:"1"},null,8,L)],8,z)),e.createElementVNode("div",P,[e.renderSlot(a.$slots,"default",{},void 0,!0)])],512))}}),[["__scopeId","data-v-7904dcac"]]),me="";const q=["width","height"],A=["fill","points"],J=["stroke","points"],K=["stroke","points"],U=["stroke","points"],G=["stroke","points"],Q={class:"border-box-content"};var k=u(e.defineComponent({props:{color:{default:()=>[]},backgroundColor:{default:"transparent"}},setup(t){const i=t,s=e.ref(null),c=e.ref(["#2862b7","#2862b7"]),r=e.ref([]),{width:o,height:n}=p(s);e.watch(e.toRef(i,"color"),a=>{l()});const l=()=>{r.value=$(_(c.value,!0),e.toRef(i,"color")||[])};return e.onMounted(()=>{l()}),(a,f)=>(e.openBlock(),e.createElementBlock("div",{ref_key:"refDom",ref:s,class:"dv-border-box-3"},[(e.openBlock(),e.createElementBlock("svg",{class:"dv-border-svg-container",width:e.unref(o),height:e.unref(n)},[e.createElementVNode("polygon",{fill:t.backgroundColor,points:`
23, 23 ${e.unref(o)-24}, 23 ${e.unref(o)-24}, ${e.unref(n)-24} 23, ${e.unref(n)-24}
`},null,8,A),e.createElementVNode("polyline",{class:"dv-bb3-line1",stroke:r.value[0],points:`4, 4 ${e.unref(o)-22} ,4 ${e.unref(o)-22}, ${e.unref(n)-22} 4, ${e.unref(n)-22} 4, 4`},null,8,J),e.createElementVNode("polyline",{class:"dv-bb3-line2",stroke:r.value[1],points:`10, 10 ${e.unref(o)-16}, 10 ${e.unref(o)-16}, ${e.unref(n)-16} 10, ${e.unref(n)-16} 10, 10`},null,8,K),e.createElementVNode("polyline",{class:"dv-bb3-line2",stroke:r.value[1],points:`16, 16 ${e.unref(o)-10}, 16 ${e.unref(o)-10}, ${e.unref(n)-10} 16, ${e.unref(n)-10} 16, 16`},null,8,U),e.createElementVNode("polyline",{class:"dv-bb3-line2",stroke:r.value[1],points:`22, 22 ${e.unref(o)-4}, 22 ${e.unref(o)-4}, ${e.unref(n)-4} 22, ${e.unref(n)-4} 22, 22`},null,8,G)],8,q)),e.createElementVNode("div",Q,[e.renderSlot(a.$slots,"default",{},void 0,!0)])],512))}}),[["__scopeId","data-v-82ce63bc"]]),be="";const X=["width","height"],Y=["fill","points"],Z=["stroke","points"],j=["stroke","points"],v=["stroke","points"],ee=["stroke"],ne=["stroke"],oe=["stroke"],te=["stroke"],re=["stroke"],le=["stroke","points"],se=["stroke","points"],ie={class:"border-box-content"};var y=u(e.defineComponent({props:{color:{default:()=>[]},reverse:{default:()=>!1},backgroundColor:{default:"transparent"}},setup(t){const i=t,s=e.ref(null),c=e.ref(["red","rgba(0,0,255,.8)"]),r=e.ref([]),{width:o,height:n}=p(s);e.watch(e.toRef(i,"color"),a=>{l()});const l=()=>{r.value=$(_(c.value,!0),e.toRef(i,"color")||[])};return e.onMounted(()=>{l()}),(a,f)=>(e.openBlock(),e.createElementBlock("div",{ref_key:"refDom",ref:s,class:"dv-border-box-4"},[(e.openBlock(),e.createElementBlock("svg",{class:e.normalizeClass(`dv-border-svg-container ${t.reverse&&"dv-reverse"}`),width:e.unref(o),height:e.unref(n)},[e.createElementVNode("polygon",{fill:t.backgroundColor,points:`
${e.unref(o)-15}, 22 170, 22 150, 7 40, 7 28, 21 32, 24
16, 42 16, ${e.unref(n)-32} 41, ${e.unref(n)-7} ${e.unref(o)-15}, ${e.unref(n)-7}
`},null,8,Y),e.createElementVNode("polyline",{class:"dv-bb4-line-1",stroke:r.value[0],points:`145, ${e.unref(n)-5} 40, ${e.unref(n)-5} 10, ${e.unref(n)-35}
10, 40 40, 5 150, 5 170, 20 ${e.unref(o)-15}, 20`},null,8,Z),e.createElementVNode("polyline",{stroke:r.value[1],class:"dv-bb4-line-2",points:`245, ${e.unref(n)-1} 36, ${e.unref(n)-1} 14, ${e.unref(n)-23}
14, ${e.unref(n)-100}`},null,8,j),e.createElementVNode("polyline",{class:"dv-bb4-line-3",stroke:r.value[0],points:`7, ${e.unref(n)-40} 7, ${e.unref(n)-75}`},null,8,v),e.createElementVNode("polyline",{class:"dv-bb4-line-4",stroke:r.value[0],points:"28, 24 13, 41 13, 64"},null,8,ee),e.createElementVNode("polyline",{class:"dv-bb4-line-5",stroke:r.value[0],points:"5, 45 5, 140"},null,8,ne),e.createElementVNode("polyline",{class:"dv-bb4-line-6",stroke:r.value[1],points:"14, 75 14, 180"},null,8,oe),e.createElementVNode("polyline",{class:"dv-bb4-line-7",stroke:r.value[1],points:"55, 11 147, 11 167, 26 250, 26"},null,8,te),e.createElementVNode("polyline",{class:"dv-bb4-line-8",stroke:r.value[1],points:"158, 5 173, 16"},null,8,re),e.createElementVNode("polyline",{class:"dv-bb4-line-9",stroke:r.value[0],points:`200, 17 ${e.unref(o)-10}, 17`},null,8,le),e.createElementVNode("polyline",{class:"dv-bb4-line-10",stroke:r.value[1],points:`385, 17 ${e.unref(o)-10}, 17`},null,8,se)],10,X)),e.createElementVNode("div",ie,[e.renderSlot(a.$slots,"default",{},void 0,!0)])],512))}}),[["__scopeId","data-v-3771e0b1"]]);const ce={install:t=>{t.component("DvBorderBox1",h),t.component("DvBorderBox2",b),t.component("DvBorderBox3",k),t.component("DvBorderBox4",y)}};d.borderBox1=h,d.borderBox2=b,d.borderBox3=k,d.borderBox4=y,d.default=ce,Object.defineProperties(d,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});