fix id errors

lib/components/borderBox11/src/main.vue

@@ -245,10 +245,15 @@ export default {
     }
   },
   data () {
-    const timestamp = Date.now()
+    let d = new Date().getTime();
+    const uuid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
+      var r = (d + Math.random()*16)%16 | 0;
+      d = Math.floor(d/16);
+      return (c=='x' ? r : (r&0x7|0x8)).toString(16);
+   });
     return {
       ref: 'border-box-11',
-      filterId: `border-box-11-filterId-${timestamp}`,
+      filterId: `border-box-11-filterId-${uuid}`,
 
       defaultColor: ['#8aaafb', '#1f33a2'],
 

lib/components/borderBox12/src/main.vue

@@ -113,10 +113,15 @@ export default {
     }
   },
   data () {
-    const timestamp = +new Date()
+    let d = new Date().getTime();
+    const uuid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
+      var r = (d + Math.random()*16)%16 | 0;
+      d = Math.floor(d/16);
+      return (c=='x' ? r : (r&0x7|0x8)).toString(16);
+   });
     return {
       ref: 'border-box-12',
-      filterId: `borderr-box-12-filterId-${timestamp}`,
+      filterId: `borderr-box-12-filterId-${uuid}`,
 
       defaultColor: ['#2e6099', '#7ce7fd'],
 

lib/components/borderBox13/src/main.vue

@@ -61,7 +61,12 @@ export default {
     }
   },
   data () {
-    const timestamp = +new Date()
+    let d = new Date().getTime();
+    const uuid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
+      var r = (d + Math.random()*16)%16 | 0;
+      d = Math.floor(d/16);
+      return (c=='x' ? r : (r&0x7|0x8)).toString(16);
+   });
     return {
       ref: 'border-box-13',
 

lib/components/borderBox8/src/main.vue

@@ -92,12 +92,17 @@ export default {
     }
   },
   data () {
-    const timestamp = Date.now()
+    let d = new Date().getTime();
+    const uuid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
+      var r = (d + Math.random()*16)%16 | 0;
+      d = Math.floor(d/16);
+      return (c=='x' ? r : (r&0x7|0x8)).toString(16);
+   });
     return {
       ref: 'border-box-8',
-      path: `border-box-8-path-${timestamp}`,
+      path: `border-box-8-path-${uuid}`,
-      gradient: `border-box-8-gradient-${timestamp}`,
+      gradient: `border-box-8-gradient-${uuid}`,
-      mask: `border-box-8-mask-${timestamp}`,
+      mask: `border-box-8-mask-${uuid}`,
 
       defaultColor: ['#235fa7', '#4fd2dd'],
 

lib/components/borderBox9/src/main.vue

@@ -144,12 +144,17 @@ export default {
     }
   },
   data () {
-    const timestamp = Date.now()
+    let d = new Date().getTime();
+    const uuid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
+      var r = (d + Math.random()*16)%16 | 0;
+      d = Math.floor(d/16);
+      return (c=='x' ? r : (r&0x7|0x8)).toString(16);
+   });
     return {
       ref: 'border-box-9',
 
-      gradientId: `border-box-9-gradient-${timestamp}`,
+      gradientId: `border-box-9-gradient-${uuid}`,
-      maskId: `border-box-9-mask-${timestamp}`,
+      maskId: `border-box-9-mask-${uuid}`,
 
       defaultColor: ['#11eefd', '#0078d2'],
 

lib/components/charts/src/main.vue

@@ -19,10 +19,15 @@ export default {
     }
   },
   data () {
-    const timestamp = Date.now()
+    let d = new Date().getTime();
+    const uuid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
+      var r = (d + Math.random()*16)%16 | 0;
+      d = Math.floor(d/16);
+      return (c=='x' ? r : (r&0x7|0x8)).toString(16);
+   });
     return {
-      ref: `charts-container-${timestamp}`,
+      ref: `charts-container-${uuid}`,
-      chartRef: `chart-${timestamp}`,
+      chartRef: `chart-${uuid}`,
 
       chart: null
     }

lib/components/decoration10/src/main.vue

@@ -162,17 +162,22 @@ export default {
     }
   },
   data () {
-    const timestamp = Date.now()
+    let d = new Date().getTime();
+    const uuid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
+      var r = (d + Math.random()*16)%16 | 0;
+      d = Math.floor(d/16);
+      return (c=='x' ? r : (r&0x7|0x8)).toString(16);
+   });
     return {
       ref: 'decoration-10',
 
-      animationId1: `d10ani1${timestamp}`,
+      animationId1: `d10ani1${uuid}`,
-      animationId2: `d10ani2${timestamp}`,
+      animationId2: `d10ani2${uuid}`,
-      animationId3: `d10ani3${timestamp}`,
+      animationId3: `d10ani3${uuid}`,
-      animationId4: `d10ani4${timestamp}`,
+      animationId4: `d10ani4${uuid}`,
-      animationId5: `d10ani5${timestamp}`,
+      animationId5: `d10ani5${uuid}`,
-      animationId6: `d10ani6${timestamp}`,
+      animationId6: `d10ani6${uuid}`,
-      animationId7: `d10ani7${timestamp}`,
+      animationId7: `d10ani7${uuid}`,
 
       defaultColor: ['#00c2ff', 'rgba(0, 194, 255, 0.3)'],
 

lib/components/decoration11/src/main.vue

@@ -72,7 +72,12 @@ export default {
     }
   },
   data () {
-    const timestamp = Date.now()
+    let d = new Date().getTime();
+    const uuid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
+      var r = (d + Math.random()*16)%16 | 0;
+      d = Math.floor(d/16);
+      return (c=='x' ? r : (r&0x7|0x8)).toString(16);
+   });
     return {
       ref: 'decoration-11',
 

lib/components/decoration9/src/main.vue

@@ -106,11 +106,16 @@ export default {
     }
   },
   data () {
-    const timestamp = Date.now()
+    let d = new Date().getTime();
+    const uuid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
+      var r = (d + Math.random()*16)%16 | 0;
+      d = Math.floor(d/16);
+      return (c=='x' ? r : (r&0x7|0x8)).toString(16);
+   });
     return {
       ref: 'decoration-9',
 
-      polygonId: `decoration-9-polygon-${timestamp}`,
+      polygonId: `decoration-9-polygon-${uuid}`,
 
       svgWH: [100, 100],
 

lib/components/flylineChart/src/main.vue

@@ -171,14 +171,19 @@ export default {
     }
   },
   data () {
-    const timestamp = Date.now()
+    let d = new Date().getTime();
+    const uuid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
+      var r = (d + Math.random()*16)%16 | 0;
+      d = Math.floor(d/16);
+      return (c=='x' ? r : (r&0x7|0x8)).toString(16);
+   });
     return {
       ref: 'dv-flyline-chart',
       unique: Math.random(),
-      maskId: `flyline-mask-id-${timestamp}`,
+      maskId: `flyline-mask-id-${uuid}`,
-      maskCircleId: `mask-circle-id-${timestamp}`,
+      maskCircleId: `mask-circle-id-${uuid}`,
-      gradientId: `gradient-id-${timestamp}`,
+      gradientId: `gradient-id-${uuid}`,
-      gradient2Id: `gradient2-id-${timestamp}`,
+      gradient2Id: `gradient2-id-${uuid}`,
 
       defaultConfig: {
         /**

lib/components/flylineChartEnhanced/src/main.vue

@@ -173,12 +173,17 @@ export default {
     }
   },
   data () {
-    const timestamp = Date.now()
+    let d = new Date().getTime();
+    const uuid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
+      var r = (d + Math.random()*16)%16 | 0;
+      d = Math.floor(d/16);
+      return (c=='x' ? r : (r&0x7|0x8)).toString(16);
+   });
     return {
       ref: 'dv-flyline-chart-enhanced',
       unique: Math.random(),
-      flylineGradientId: `flyline-gradient-id-${timestamp}`,
+      flylineGradientId: `flyline-gradient-id-${uuid}`,
-      haloGradientId: `halo-gradient-id-${timestamp}`,
+      haloGradientId: `halo-gradient-id-${uuid}`,
       /**
        * @description Type Declaration
        * 

lib/components/percentPond/src/main.vue

@@ -57,10 +57,15 @@ export default {
     }
   },
   data () {
-    const timestamp = Date.now()
+    let d = new Date().getTime();
+    const uuid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
+      var r = (d + Math.random()*16)%16 | 0;
+      d = Math.floor(d/16);
+      return (c=='x' ? r : (r&0x7|0x8)).toString(16);
+   });
     return {
-      gradientId1: `percent-pond-gradientId1-${timestamp}`,
+      gradientId1: `percent-pond-gradientId1-${uuid}`,
-      gradientId2: `percent-pond-gradientId2-${timestamp}`,
+      gradientId2: `percent-pond-gradientId2-${uuid}`,
 
       width: 0,
       height: 0,

lib/components/waterLevelPond/src/main.vue

@@ -53,9 +53,14 @@ export default {
     default: () => ({})
   },
   data () {
-    const timestamp = Date.now()
+    let d = new Date().getTime();
+    const uuid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
+      var r = (d + Math.random()*16)%16 | 0;
+      d = Math.floor(d/16);
+      return (c=='x' ? r : (r&0x7|0x8)).toString(16);
+   });
     return {
-      gradientId: `water-level-pond-${timestamp}`,
+      gradientId: `water-level-pond-${uuid}`,
 
       defaultConfig: {
         /**

src/components/borderBox11/src/main.vue

@@ -245,10 +245,15 @@ export default {
     }
   },
   data () {
-    const timestamp = Date.now()
+    let d = new Date().getTime();
+    const uuid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
+      var r = (d + Math.random()*16)%16 | 0;
+      d = Math.floor(d/16);
+      return (c=='x' ? r : (r&0x7|0x8)).toString(16);
+   });
     return {
       ref: 'border-box-11',
-      filterId: `border-box-11-filterId-${timestamp}`,
+      filterId: `border-box-11-filterId-${uuid}`,
 
       defaultColor: ['#8aaafb', '#1f33a2'],
 

src/components/borderBox12/src/main.vue

@@ -113,10 +113,15 @@ export default {
     }
   },
   data () {
-    const timestamp = +new Date()
+    let d = new Date().getTime();
+    const uuid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
+      var r = (d + Math.random()*16)%16 | 0;
+      d = Math.floor(d/16);
+      return (c=='x' ? r : (r&0x7|0x8)).toString(16);
+   });
     return {
       ref: 'border-box-12',
-      filterId: `borderr-box-12-filterId-${timestamp}`,
+      filterId: `borderr-box-12-filterId-${uuid}`,
 
       defaultColor: ['#2e6099', '#7ce7fd'],
 

src/components/borderBox13/src/main.vue

@@ -61,7 +61,12 @@ export default {
     }
   },
   data () {
-    const timestamp = +new Date()
+    let d = new Date().getTime();
+    const uuid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
+      var r = (d + Math.random()*16)%16 | 0;
+      d = Math.floor(d/16);
+      return (c=='x' ? r : (r&0x7|0x8)).toString(16);
+   });
     return {
       ref: 'border-box-13',
 

src/components/borderBox8/src/main.vue

@@ -92,12 +92,17 @@ export default {
     }
   },
   data () {
-    const timestamp = Date.now()
+    let d = new Date().getTime();
+    const uuid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
+      var r = (d + Math.random()*16)%16 | 0;
+      d = Math.floor(d/16);
+      return (c=='x' ? r : (r&0x7|0x8)).toString(16);
+   });
     return {
       ref: 'border-box-8',
-      path: `border-box-8-path-${timestamp}`,
+      path: `border-box-8-path-${uuid}`,
-      gradient: `border-box-8-gradient-${timestamp}`,
+      gradient: `border-box-8-gradient-${uuid}`,
-      mask: `border-box-8-mask-${timestamp}`,
+      mask: `border-box-8-mask-${uuid}`,
 
       defaultColor: ['#235fa7', '#4fd2dd'],
 

src/components/borderBox9/src/main.vue

@@ -144,12 +144,17 @@ export default {
     }
   },
   data () {
-    const timestamp = Date.now()
+    let d = new Date().getTime();
+    const uuid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
+      var r = (d + Math.random()*16)%16 | 0;
+      d = Math.floor(d/16);
+      return (c=='x' ? r : (r&0x7|0x8)).toString(16);
+   });
     return {
       ref: 'border-box-9',
 
-      gradientId: `border-box-9-gradient-${timestamp}`,
+      gradientId: `border-box-9-gradient-${uuid}`,
-      maskId: `border-box-9-mask-${timestamp}`,
+      maskId: `border-box-9-mask-${uuid}`,
 
       defaultColor: ['#11eefd', '#0078d2'],
 

src/components/charts/src/main.vue

@@ -19,10 +19,15 @@ export default {
     }
   },
   data () {
-    const timestamp = Date.now()
+    let d = new Date().getTime();
+    const uuid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
+      var r = (d + Math.random()*16)%16 | 0;
+      d = Math.floor(d/16);
+      return (c=='x' ? r : (r&0x7|0x8)).toString(16);
+   });
     return {
-      ref: `charts-container-${timestamp}`,
+      ref: `charts-container-${uuid}`,
-      chartRef: `chart-${timestamp}`,
+      chartRef: `chart-${uuid}`,
 
       chart: null
     }

src/components/decoration10/src/main.vue

@@ -162,17 +162,22 @@ export default {
     }
   },
   data () {
-    const timestamp = Date.now()
+    let d = new Date().getTime();
+    const uuid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
+      var r = (d + Math.random()*16)%16 | 0;
+      d = Math.floor(d/16);
+      return (c=='x' ? r : (r&0x7|0x8)).toString(16);
+   });
     return {
       ref: 'decoration-10',
 
-      animationId1: `d10ani1${timestamp}`,
+      animationId1: `d10ani1${uuid}`,
-      animationId2: `d10ani2${timestamp}`,
+      animationId2: `d10ani2${uuid}`,
-      animationId3: `d10ani3${timestamp}`,
+      animationId3: `d10ani3${uuid}`,
-      animationId4: `d10ani4${timestamp}`,
+      animationId4: `d10ani4${uuid}`,
-      animationId5: `d10ani5${timestamp}`,
+      animationId5: `d10ani5${uuid}`,
-      animationId6: `d10ani6${timestamp}`,
+      animationId6: `d10ani6${uuid}`,
-      animationId7: `d10ani7${timestamp}`,
+      animationId7: `d10ani7${uuid}`,
 
       defaultColor: ['#00c2ff', 'rgba(0, 194, 255, 0.3)'],
 

src/components/decoration11/src/main.vue

@@ -72,7 +72,12 @@ export default {
     }
   },
   data () {
-    const timestamp = Date.now()
+    let d = new Date().getTime();
+    const uuid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
+      var r = (d + Math.random()*16)%16 | 0;
+      d = Math.floor(d/16);
+      return (c=='x' ? r : (r&0x7|0x8)).toString(16);
+   });
     return {
       ref: 'decoration-11',
 

src/components/decoration9/src/main.vue

@@ -106,11 +106,16 @@ export default {
     }
   },
   data () {
-    const timestamp = Date.now()
+    let d = new Date().getTime();
+    const uuid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
+      var r = (d + Math.random()*16)%16 | 0;
+      d = Math.floor(d/16);
+      return (c=='x' ? r : (r&0x7|0x8)).toString(16);
+   });
     return {
       ref: 'decoration-9',
 
-      polygonId: `decoration-9-polygon-${timestamp}`,
+      polygonId: `decoration-9-polygon-${uuid}`,
 
       svgWH: [100, 100],
 

src/components/flylineChart/src/main.vue

@@ -171,14 +171,19 @@ export default {
     }
   },
   data () {
-    const timestamp = Date.now()
+    let d = new Date().getTime();
+    const uuid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
+      var r = (d + Math.random()*16)%16 | 0;
+      d = Math.floor(d/16);
+      return (c=='x' ? r : (r&0x7|0x8)).toString(16);
+   });
     return {
       ref: 'dv-flyline-chart',
       unique: Math.random(),
-      maskId: `flyline-mask-id-${timestamp}`,
+      maskId: `flyline-mask-id-${uuid}`,
-      maskCircleId: `mask-circle-id-${timestamp}`,
+      maskCircleId: `mask-circle-id-${uuid}`,
-      gradientId: `gradient-id-${timestamp}`,
+      gradientId: `gradient-id-${uuid}`,
-      gradient2Id: `gradient2-id-${timestamp}`,
+      gradient2Id: `gradient2-id-${uuid}`,
 
       defaultConfig: {
         /**

src/components/flylineChartEnhanced/src/main.vue

@@ -173,12 +173,17 @@ export default {
     }
   },
   data () {
-    const timestamp = Date.now()
+    let d = new Date().getTime();
+    const uuid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
+      var r = (d + Math.random()*16)%16 | 0;
+      d = Math.floor(d/16);
+      return (c=='x' ? r : (r&0x7|0x8)).toString(16);
+   });
     return {
       ref: 'dv-flyline-chart-enhanced',
       unique: Math.random(),
-      flylineGradientId: `flyline-gradient-id-${timestamp}`,
+      flylineGradientId: `flyline-gradient-id-${uuid}`,
-      haloGradientId: `halo-gradient-id-${timestamp}`,
+      haloGradientId: `halo-gradient-id-${uuid}`,
       /**
        * @description Type Declaration
        * 

src/components/percentPond/src/main.vue

@@ -57,10 +57,15 @@ export default {
     }
   },
   data () {
-    const timestamp = Date.now()
+    let d = new Date().getTime();
+    const uuid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
+      var r = (d + Math.random()*16)%16 | 0;
+      d = Math.floor(d/16);
+      return (c=='x' ? r : (r&0x7|0x8)).toString(16);
+   });
     return {
-      gradientId1: `percent-pond-gradientId1-${timestamp}`,
+      gradientId1: `percent-pond-gradientId1-${uuid}`,
-      gradientId2: `percent-pond-gradientId2-${timestamp}`,
+      gradientId2: `percent-pond-gradientId2-${uuid}`,
 
       width: 0,
       height: 0,

src/components/waterLevelPond/src/main.vue

@@ -53,9 +53,14 @@ export default {
     default: () => ({})
   },
   data () {
-    const timestamp = Date.now()
+    let d = new Date().getTime();
+    const uuid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
+      var r = (d + Math.random()*16)%16 | 0;
+      d = Math.floor(d/16);
+      return (c=='x' ? r : (r&0x7|0x8)).toString(16);
+   });
     return {
-      gradientId: `water-level-pond-${timestamp}`,
+      gradientId: `water-level-pond-${uuid}`,
 
       defaultConfig: {
         /**