update dist and lib

lib/components/borderBox8/src/main.vue

@@ -24,7 +24,7 @@
         <mask :id="mask">
           <circle cx="0" cy="0" r="150" :fill="`url(#${gradient})`">
             <animateMotion
-              dur="3s"
+              :dur="`${dur}s`"
               :path="`M2.5, 2.5 L${width - 2.5}, 2.5 L${width - 2.5}, ${height - 2.5} L2.5, ${height - 2.5} L2.5, 2.5`"
               rotate="auto"
               repeatCount="indefinite"
@@ -34,13 +34,13 @@
       </defs>
 
       <use
-        stroke="#235fa7"
+        :stroke="mergedColor[0]"
         stroke-width="1"
         :xlink:href="`#${path}`"
       />
 
       <use
-        stroke="#4fd2dd"
+        :stroke="mergedColor[1]"
         stroke-width="3"
         :xlink:href="`#${path}`"
         :mask="`url(#${mask})`"
@@ -49,7 +49,7 @@
           attributeName="stroke-dasharray"
           :from="`0, ${length}`"
           :to="`${length}, 0`"
-          dur="3s"
+          :dur="`${dur}s`"
           repeatCount="indefinite"
         />
       </use>
@@ -64,16 +64,34 @@
 <script>
 import autoResize from '../../../mixin/autoResize'
 
+import { deepMerge } from '@jiaminghi/charts/lib/util/index'
+
+import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'
+
 export default {
   name: 'DvBorderBox8',
   mixins: [autoResize],
+  props: {
+    color: {
+      type: Array,
+      default: () => ([])
+    },
+    dur: {
+      type: Number,
+      default: 3
+    }
+  },
   data () {
     const timestamp = Date.now()
     return {
       ref: 'border-box-8',
       path: `border-box-8-path-${timestamp}`,
       gradient: `border-box-8-gradient-${timestamp}`,
-      mask: `border-box-8-mask-${timestamp}`
+      mask: `border-box-8-mask-${timestamp}`,
+
+      defaultColor: ['#235fa7', '#4fd2dd'],
+
+      mergedColor: []
     }
   },
   computed: {
@@ -82,6 +100,25 @@ export default {
 
       return (width + height - 5) * 2
     }
+  },
+  watch: {
+    color () {
+      const { mergeColor } = this
+
+      mergeColor()
+    }
+  },
+  methods: {
+    mergeColor () {
+      const { color, defaultColor } = this
+
+      this.mergedColor = deepMerge(deepClone(defaultColor, true), color || [])
+    }
+  },
+  mounted () {
+    const { mergeColor } = this
+
+    mergeColor()
   }
 }
 </script>