update version to v2.3.0

.gitignore

@@ -1,5 +1,6 @@
 .DS_Store
 node_modules
+/lib
 /dist
 /.svn
 /DataV
@@ -12,6 +13,7 @@ node_modules
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+yarn.lock
 
 # Editor directories and files
 .idea

.npmignore

@@ -0,0 +1,7 @@
+src/
+publish/
+
+package-lock.json
+
+prepublish.js
+publish.js

CHANGELOG.md

@@ -1,3 +1,77 @@
+# 2.3.0-alpha (2019-07-04)
+
+### Directory Structure Change
+
+* **before**
+
+  ```
+  .
+  ├── components
+  │   ├── borderBox1
+  │   │   └── index.vue
+  │   ├── borderBox2
+  │   │   └── index.vue
+  │   ├── etc.
+  │   └── index.js
+  ├── mixins
+  │   └── autoResize.js
+  ├── util
+  │   └── index.js
+  │
+  ├── index.js
+  │
+  ├── package.json // main: 'index.js'
+  └── etc.
+  ```
+
+* **after**
+
+  ```
+  .
+  ├── lib // After compilation
+  │   ├── components
+  │   │   ├── borderBox1
+  │   │   |   ├── src
+  │   │   |   |   ├── main.vue
+  │   │   |   |   └── main.css
+  │   │   |   └── index.js
+  │   │   ├── etc.
+  │   │   └── index.js
+  │   ├── mixin
+  │   │   └── autoResize.js
+  │   ├── util
+  │   │   └── index.js
+  │   └── index.js
+  │
+  ├── publish // For pre-publish process
+  │
+  ├── src // For development environments
+  │   ├── components
+  │   │   ├── borderBox1
+  │   │   |   ├── src
+  │   │   |   |   └── main.vue
+  │   │   |   └── index.js
+  │   │   ├── etc.
+  │   │   └── index.js
+  │   ├── mixin
+  │   │   └── autoResize.js
+  │   ├── util
+  │   │   └── index.js
+  │   └── index.js
+  │
+  ├── package.json // main: '/lib/index.js'
+  ├── publish.js
+  └── etc.
+  ```
+
+* **Introduced on demand**
+
+  ```js
+  import borderBox1 from '@jiaminghi/data-view/lib/components/borderBox1'
+  
+  Vue.use(borderBox1)
+  ```
+
 # 2.2.0-alpha (2019-06-29)
 
 ### New

components/index.js

@@ -1,78 +0,0 @@
-import fullScreenContainer from './fullScreenContainer'
-import loading from './loading/index.vue'
-
-// border box
-import borderBox1 from './borderBox1/index'
-import borderBox2 from './borderBox2/index'
-import borderBox3 from './borderBox3/index'
-import borderBox4 from './borderBox4/index'
-import borderBox5 from './borderBox5/index'
-import borderBox6 from './borderBox6/index'
-import borderBox7 from './borderBox7/index'
-import borderBox8 from './borderBox8/index'
-import borderBox9 from './borderBox9/index'
-
-// decoration
-import decoration1 from './decoration1/index'
-import decoration2 from './decoration2/index'
-import decoration3 from './decoration3/index'
-import decoration4 from './decoration4/index'
-import decoration5 from './decoration5/index'
-import decoration6 from './decoration6/index'
-import decoration7 from './decoration7/index'
-import decoration8 from './decoration8/index'
-import decoration9 from './decoration9/index'
-import decoration10 from './decoration10/index'
-
-// charts
-import charts from './charts/index.vue'
-
-import activeRingChart from './activeRingChart'
-import waterLevelPond from './waterLevelPond/index.vue'
-import percentPond from './percentPond/index.vue'
-import flylineChart from './flylineChart'
-import conicalColumnChart from './conicalColumnChart'
-import digitalFlop from './digitalFlop'
-import scrollBoard from './scrollBoard/index.vue'
-import scrollRankingBoard from './scrollRankingBoard/index.vue'
-
-export default function (Vue) {
-  Vue.component('dvFullScreenContainer', fullScreenContainer)
-
-  Vue.component('dvLoading', loading)
-
-  // border box
-  Vue.component('dvBorderBox1', borderBox1)
-  Vue.component('dvBorderBox2', borderBox2)
-  Vue.component('dvBorderBox3', borderBox3)
-  Vue.component('dvBorderBox4', borderBox4)
-  Vue.component('dvBorderBox5', borderBox5)
-  Vue.component('dvBorderBox6', borderBox6)
-  Vue.component('dvBorderBox7', borderBox7)
-  Vue.component('dvBorderBox8', borderBox8)
-  Vue.component('dvBorderBox9', borderBox9)
-
-  // decoration
-  Vue.component('dvDecoration1', decoration1)
-  Vue.component('dvDecoration2', decoration2)
-  Vue.component('dvDecoration3', decoration3)
-  Vue.component('dvDecoration4', decoration4)
-  Vue.component('dvDecoration5', decoration5)
-  Vue.component('dvDecoration6', decoration6)
-  Vue.component('dvDecoration7', decoration7)
-  Vue.component('dvDecoration8', decoration8)
-  Vue.component('dvDecoration9', decoration9)
-  Vue.component('dvDecoration10', decoration10)
-
-  // charts
-  Vue.component('dvCharts', charts)
-
-  Vue.component('dvActiveRingChart', activeRingChart)
-  Vue.component('dvWaterLevelPond', waterLevelPond)
-  Vue.component('dvPercentPond', percentPond)
-  Vue.component('dvFlylineChart', flylineChart)
-  Vue.component('dvConicalColumnChart', conicalColumnChart)
-  Vue.component('dvDigitalFlop', digitalFlop)
-  Vue.component('dvScrollBoard', scrollBoard)
-  Vue.component('dvScrollRankingBoard', scrollRankingBoard)
-}

package.json

@@ -1,14 +1,16 @@
 {
   "name": "@jiaminghi/data-view",
-  "version": "2.2.0",
+  "version": "2.3.0",
   "author": "JiaMing <743192023@qq.com>",
   "description": "Vue Large screen data display component library",
-  "main": "index.js",
+  "main": "/lib/index.js",
   "repository": {
     "type": "git",
     "url": "https://github.com/jiaming743/DataV.git"
   },
   "scripts": {
+    "compile": "node publish.js",
+    "prepublish": "npm run compile",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "license": "MIT",
@@ -20,10 +22,6 @@
     "chart",
     "dataview"
   ],
-  "devDependencies": {
-    "less": "^3.9.0",
-    "less-loader": "^4.1.0"
-  },
   "dependencies": {
     "@jiaminghi/charts": "*"
   },

publish.js

@@ -0,0 +1,3 @@
+const start = require('./publish/index')
+
+start()

publish/index.js

@@ -0,0 +1,151 @@
+const { copyDir, fileForEach, readFile, writeFile, unlinkDirFileByExtname } = require('./plugin/fs')
+const print = require('./plugin/print')
+const path = require('path')
+const doExec = require('./plugin/exec')
+
+const PACKAGE_SRC = './src'
+const COMPILE_SRC = './lib'
+
+async function start () {
+  const copyPackage = await copyDir(PACKAGE_SRC, COMPILE_SRC)
+
+  if (!copyPackage) {
+    print.error('Exception in file copy!')
+
+    return false
+  }
+
+  print.success('Complete file copy!')
+
+  const abstract = await abstractLessFromVue()
+
+  if (!abstract) {
+    print.error('Exception in less file extraction!')
+
+    return false
+  }
+
+  print.success('Complete less file extraction!')
+
+  await compileLessToCss()
+
+  print.success('Complete less compilation to css!')
+
+  const unlink = await unlinkDirFileByExtname(COMPILE_SRC, ['.less'])
+
+  if (!unlink) {
+    print.error('Exception in less file deletion!')
+
+    return false
+  }
+
+  print.success('Complete less file deletion!')
+
+  const addImport = await addCssImport()
+
+  if (!addImport) {
+    print.error('Exception in adding css import statement!')
+
+    return false
+  }
+
+  print.success('Finish adding css import statement!')
+
+  print.yellow('-------------------------------------')
+  print.success('     DataV lib Compile Success!      ')
+  print.yellow('-------------------------------------')
+
+  return true
+}
+
+async function abstractLessFromVue () {
+  let abstractSuccess = true
+
+  await fileForEach(COMPILE_SRC, async src => {
+    if (path.extname(src) !== '.vue') return
+
+    let template = await readFile(src)
+
+    let style = template.match(/<style[ \S\n\r]*/g)
+    if (style) style = style[0]
+    if (!style) return
+
+    style = style.replace(/<style[ a-z="']*>(\n|\r)?|<\/style>/g, '')
+    style = style.replace(/[\n\r]*$/, '')
+
+    const styleSrc = src.replace('.vue', '.less')
+    let write = await writeFile(styleSrc, style)
+
+    if (!write) {
+      print.error(styleSrc + ' write error!')
+
+      abstractSuccess = false
+    }
+
+    template = template.replace(/<style[ \S\n\r]*/g, '')
+    template = template.replace(/[\n\r]*$/, '')
+    write = await writeFile(src, template)
+
+    if (!write) {
+      print.error(src + ' rewrite error!')
+
+      abstractSuccess = false
+    }
+  })
+
+  return abstractSuccess
+}
+
+async function compileLessToCss () {
+  let compileSuccess = true
+
+  await fileForEach(COMPILE_SRC, async src => {
+    if (path.extname(src) !== '.less') return
+
+    src = src.replace('./', '')
+
+    const execString = `lessc ${src} ${src.replace('less', 'css')}`
+
+    print.yellow(execString, {
+      maxBuffer: 1024 ** 5
+    })
+
+    const compile = await doExec(execString)
+
+    if (!compile) {
+      print.error(execString + ' Error!')
+
+      compileSuccess = false
+    }
+  })
+
+  return compileSuccess
+}
+
+async function addCssImport () {
+  let importSuccess = true
+
+  await fileForEach(COMPILE_SRC + '/components', async src => {
+    if (path.extname(src) !== '.js') return
+
+    let content = await readFile(src)
+
+    if (content.search(/import[ \S]* from '[\S]*\.vue'/) === -1) return
+
+    content = `import './src/main.css'\n` + content
+
+    let write = await writeFile(src, content)
+
+    if (!write) {
+      print.error(src + ' write import error!')
+
+      importSuccess = false
+    }
+  })
+
+  return importSuccess
+}
+
+module.exports = start
+
+

publish/plugin/exec.js

@@ -0,0 +1,19 @@
+const { exec } = require('child_process')
+
+function doExec (execString, maxBuffer = 1024 ** 5) {
+  return new Promise(resolve => {
+    exec(execString, {
+      maxBuffer
+    }, err => {
+      if (err) {
+        console.error(err)
+
+        resolve(false)
+      } else {
+        resolve(true)
+      }
+    })
+  })
+}
+
+module.exports = doExec

publish/plugin/fs.js

@@ -0,0 +1,323 @@
+const fs = require('fs')
+const path = require('path')
+
+function readDir (src) {
+  return new Promise(resolve => {
+    fs.readdir(src, (err, paths) => {
+      if (err) {
+        console.error(err)
+
+        resolve(false)
+      }
+
+      resolve(paths)
+    })
+  })
+}
+
+function stat (src) {
+  return new Promise(resolve => {
+    fs.stat(src, (err, stats) => {
+      if (err) {
+        console.error(err)
+
+        resolve(false)
+      }
+
+      resolve(stats)
+    })
+  })
+}
+
+function mkdir (src) {
+  return new Promise(resolve => {
+    fs.mkdir(src, err => {
+      if (err) {
+        console.error(err)
+
+        resolve(false)
+      }
+
+      resolve(true)
+    })
+  })
+}
+
+function access (src, mode = fs.constants.F_OK) {
+  return new Promise(resolve => {
+    fs.access(src, mode, err => {
+      if (err) {
+        resolve(false)
+
+        return
+      }
+
+      resolve(true)
+    })
+  })
+}
+
+function unlink (src) {
+  return new Promise(resolve => {
+    fs.unlink(src, err => {
+      if (err) {
+        console.error(err)
+
+        resolve(false)
+      }
+
+      resolve(true)
+    })
+  })
+}
+
+function rmDir (src) {
+  return new Promise(resolve => {
+    fs.rmdir(src, err => {
+      if (err) {
+        resolve(false)
+      } else {
+        resolve(true)
+      }
+    })
+  })
+}
+
+async function clearDir (src) {
+  const isExists = await access(src)
+
+  if (!isExists) {
+    await mkdir(src)
+
+    return true
+  }
+
+  return await emptyDir(src)
+}
+
+async function emptyDir (src) {
+  const paths = await readDir(src)
+  if (!paths) {
+    console.error('Exception in emptyDir: paths!')
+
+    return false
+  }
+
+  for (let i = 0; i < paths.length; i++) {
+    const fullSrc = src + '/' + paths[i]
+    const stats = await stat(fullSrc)
+
+    if (!stats) {
+      console.error('Exception in emptyDir: stats!')
+
+      return false
+    }
+
+    if (stats.isFile()) {
+      const isUnlink = await unlink(fullSrc)
+
+      if (!isUnlink) {
+        console.error('Exception in emptyDir: isUnlink!')
+
+        return false
+      }
+    } else if (stats.isDirectory()) {
+      const isEmpty = await emptyDir(fullSrc)
+
+      if (!isEmpty) {
+        console.error('Exception in emptyDir: isEmpty!')
+
+        return false
+      }
+
+      if (!await rmDir(fullSrc)) {
+        console.error('Exception in emptyDir: rmDir!')
+
+        return false
+      }
+    }
+  }
+
+  return true
+}
+
+async function unlinkDirFileByExtname (src, extnames = []) {
+  const paths = await readDir(src)
+
+  if (!paths) {
+    console.error('Exception in unlinkDirFileByExtname: paths!')
+
+    return false
+  }
+
+  for (let i = 0; i < paths.length; i++) {
+    const fullSrc = src + '/' + paths[i]
+    const stats = await stat(fullSrc)
+
+    if (!stats) {
+      console.error('Exception in unlinkDirFileByExtname: stats!')
+
+      return false
+    }
+
+    if (stats.isFile()) {
+      const cxtname = path.extname(fullSrc)
+      if (extnames.findIndex(name => name === cxtname) === -1) continue
+
+      const isUnlink = await unlink(fullSrc)
+      if (!isUnlink) {
+        console.error('Exception in unlinkDirFileByExtname: isUnlink!')
+
+        return false
+      }
+    } else if (stats.isDirectory()) {
+      const recursive = await unlinkDirFileByExtname(fullSrc, extnames)
+
+      if (!recursive) {
+        console.error('Exception in unlinkDirFileByExtname: recursive!')
+
+        return false
+      }
+    }
+  }
+
+  return true
+}
+
+async function copyDir (src, target) {
+  if (!src || !target) {
+    console.error('copyDir missing parameters!')
+
+    return false
+  }
+
+  const isClear = await clearDir(target)
+
+  if (!isClear) {
+    console.error('Exception in copyDir: isClear!')
+
+    return false
+  }
+
+  const paths = await readDir(src)
+  if (!paths) {
+    console.error('Exception in copyDir: paths!')
+
+    return false
+  }
+
+  for (let i = 0; i < paths.length; i++) {
+    const fullSrc = src + '/' + paths[i]
+    const fullTarget = target + '/' + paths[i]
+    const stats = await stat(fullSrc)
+
+    if (!stats) {
+      console.error('Exception in copyDir: stats!')
+
+      return false
+    }
+
+    if (stats.isFile()) {
+      fs.createReadStream(fullSrc).pipe(fs.createWriteStream(fullTarget))
+    } else if (stats.isDirectory()) {
+      const isMkdir = await mkdir(fullTarget)
+
+      if (!isMkdir) {
+        console.error('Exception in copyDir: isMkdir!')
+
+        return false
+      }
+
+      const isCopy = await copyDir(fullSrc, fullTarget)
+
+      if (!isCopy) {
+        console.error('Exception in copyDir: isCopy!')
+
+        return false
+      }
+    }
+  }
+
+  return true
+}
+
+async function fileForEach (src, callback) {
+  if (!src || !callback) {
+    console.error('fileForEach missing parameters!')
+
+    return false
+  }
+
+  const paths = await readDir(src)
+  if (!paths) {
+    console.error('Exception in fileForEach: paths!')
+
+    return false
+  }
+
+  for (let i = 0; i < paths.length; i++) {
+    const fullSrc = src + '/' + paths[i]
+    const stats = await stat(fullSrc)
+
+    if (!stats) {
+      console.error('Exception in fileForEach: stats!')
+
+      return false
+    }
+
+    if (stats.isFile()) {
+      await callback(fullSrc)
+    } else if (stats.isDirectory()) {
+      const recursive = await fileForEach(fullSrc, callback)
+
+      if (!recursive) {
+        console.error('Exception in fileForEach: recursive!')
+
+        return false
+      }
+    }
+  }
+
+  return true
+}
+
+async function readFile (src, encoding = 'utf8') {
+  return new Promise(resolve => {
+    fs.readFile(src, encoding, (err, data) => {
+      if (err) {
+        console.error(err)
+
+        resolve(false)
+      } else {
+        resolve(data)
+      }
+    })
+  })
+}
+
+async function writeFile (src, string, encoding = 'utf8') {
+  return new Promise(resolve => {
+    fs.writeFile(src, string, encoding, err => {
+      if (err) {
+        console.error(err)
+
+        resolve(false)
+      } else {
+        resolve(true)
+      }
+    })
+  })
+}
+
+module.exports = {
+  readDir,
+  stat,
+  mkdir,
+  clearDir,
+  emptyDir,
+  unlinkDirFileByExtname,
+  copyDir,
+  fileForEach,
+  readFile,
+  writeFile
+}

publish/plugin/print.js

@@ -0,0 +1,22 @@
+const print = {
+  log (info) {
+    console.log(info)
+  },
+  warn (info) {
+    console.log('\033[31;33m' + info + '\033[0m')
+  },
+  error (info) {
+    console.log('\033[31;40m' + info + '\033[0m')
+  },
+  tip (info) {
+    console.log('\033[40;32m' + info + '\033[0m')
+  },
+  success (info) {
+    console.log('\033[42;30m' + info + '\033[0m')
+  },
+  yellow (info) {
+    console.log('\033[31;33m' + info + '\033[0m')
+  }
+}
+
+module.exports = print

src/components/activeRingChart/index.js

@@ -0,0 +1,5 @@
+import ActiveRingChart from './src/main.vue'
+
+export default function (Vue) {
+  Vue.component(ActiveRingChart.name, ActiveRingChart)
+}

src/components/activeRingChart/src/main.vue

@@ -11,14 +11,14 @@
 <script>
 import Charts from '@jiaminghi/charts'
 
-import dvDigitalFlop from '../digitalFlop'
+import dvDigitalFlop from '../../digitalFlop/src/main'
 
 import { deepMerge } from '@jiaminghi/charts/lib/util/index'
 
 import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'
 
 export default {
-  name: 'ActiveRingChart',
+  name: 'DvActiveRingChart',
   components: {
     dvDigitalFlop
   },

src/components/borderBox1/index.js

@@ -0,0 +1,5 @@
+import BorderBox1 from './src/main.vue'
+
+export default function (Vue) {
+  Vue.component(BorderBox1.name, BorderBox1)
+}

src/components/borderBox1/src/main.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="dv-border-box-1" :ref="ref">
+  <div class="dv-border-box-1">
     <svg
       width="150px"
       height="150px"
@@ -53,11 +53,9 @@
 
 <script>
 export default {
-  name: 'BorderBox1',
+  name: 'DvBorderBox1',
   data () {
     return {
-      ref: 'border-box-1',
-
       border: ['left-top', 'right-top', 'left-bottom', 'right-bottom']
     }
   }

src/components/borderBox2/index.js

@@ -0,0 +1,5 @@
+import BorderBox2 from './src/main.vue'
+
+export default function (Vue) {
+  Vue.component(BorderBox2.name, BorderBox2)
+}

src/components/borderBox2/src/main.vue

@@ -18,10 +18,10 @@
 </template>
 
 <script>
-import autoResize from '../../mixins/autoResize.js'
+import autoResize from '../../../mixin/autoResize'
 
 export default {
-  name: 'BorderBox2',
+  name: 'DvBorderBox2',
   mixins: [autoResize],
   data () {
     return {

src/components/borderBox3/index.js

@@ -0,0 +1,5 @@
+import BorderBox3 from './src/main.vue'
+
+export default function (Vue) {
+  Vue.component(BorderBox3.name, BorderBox3)
+}

src/components/borderBox3/src/main.vue

@@ -18,10 +18,10 @@
 </template>
 
 <script>
-import autoResize from '../../mixins/autoResize.js'
+import autoResize from '../../../mixin/autoResize'
 
 export default {
-  name: 'BorderBox3',
+  name: 'DvBorderBox3',
   mixins: [autoResize],
   data () {
     return {

src/components/borderBox4/index.js

@@ -0,0 +1,5 @@
+import BorderBox4 from './src/main.vue'
+
+export default function (Vue) {
+  Vue.component(BorderBox4.name, BorderBox4)
+}

src/components/borderBox4/src/main.vue

@@ -22,10 +22,10 @@
 </template>
 
 <script>
-import autoResize from '../../mixins/autoResize.js'
+import autoResize from '../../../mixin/autoResize'
 
 export default {
-  name: 'BorderBox4',
+  name: 'DvBorderBox4',
   mixins: [autoResize],
   data () {
     return {
@@ -41,7 +41,7 @@ export default {
 }
 </script>
 
-<style lang="less" scoped>
+<style lang="less">
 .dv-border-box-4 {
   position: relative;
   width: 100%;

src/components/borderBox5/index.js

@@ -0,0 +1,5 @@
+import BorderBox5 from './src/main.vue'
+
+export default function (Vue) {
+  Vue.component(BorderBox5.name, BorderBox5)
+}

src/components/borderBox5/src/main.vue

@@ -18,10 +18,10 @@
 </template>
 
 <script>
-import autoResize from '../../mixins/autoResize.js'
+import autoResize from '../../../mixin/autoResize'
 
 export default {
-  name: 'BorderBox5',
+  name: 'DvBorderBox5',
   mixins: [autoResize],
   data () {
     return {

src/components/borderBox6/index.js

@@ -0,0 +1,5 @@
+import BorderBox6 from './src/main.vue'
+
+export default function (Vue) {
+  Vue.component(BorderBox6.name, BorderBox6)
+}

src/components/borderBox6/src/main.vue

@@ -26,10 +26,10 @@
 </template>
 
 <script>
-import autoResize from '../../mixins/autoResize.js'
+import autoResize from '../../../mixin/autoResize.js'
 
 export default {
-  name: 'BorderBox6',
+  name: 'DvBorderBox6',
   mixins: [autoResize],
   data () {
     return {

src/components/borderBox7/index.js

@@ -0,0 +1,5 @@
+import BorderBox7 from './src/main.vue'
+
+export default function (Vue) {
+  Vue.component(BorderBox7.name, BorderBox7)
+}

src/components/borderBox7/src/main.vue

@@ -19,10 +19,10 @@
 </template>
 
 <script>
-import autoResize from '../../mixins/autoResize.js'
+import autoResize from '../../../mixin/autoResize'
 
 export default {
-  name: 'BorderBox7',
+  name: 'DvBorderBox7',
   mixins: [autoResize],
   data () {
     return {

src/components/borderBox8/index.js

@@ -0,0 +1,5 @@
+import BorderBox8 from './src/main.vue'
+
+export default function (Vue) {
+  Vue.component(BorderBox8.name, BorderBox8)
+}

src/components/borderBox8/src/main.vue

@@ -62,10 +62,10 @@
 </template>
 
 <script>
-import autoResize from '../../mixins/autoResize.js'
+import autoResize from '../../../mixin/autoResize'
 
 export default {
-  name: 'BorderBox8',
+  name: 'DvBorderBox8',
   mixins: [autoResize],
   data () {
     return {

src/components/borderBox9/index.js

@@ -0,0 +1,5 @@
+import BorderBox9 from './src/main.vue'
+
+export default function (Vue) {
+  Vue.component(BorderBox9.name, BorderBox9)
+}

src/components/borderBox9/src/main.vue

@@ -83,10 +83,10 @@
 </template>
 
 <script>
-import autoResize from '../../mixins/autoResize.js'
+import autoResize from '../../../mixin/autoResize'
 
 export default {
-  name: 'BorderBox9',
+  name: 'DvBorderBox9',
   mixins: [autoResize],
   data () {
     return {

src/components/charts/index.js

@@ -0,0 +1,5 @@
+import Charts from './src/main.vue'
+
+export default function (Vue) {
+  Vue.component(Charts.name, Charts)
+}

src/components/charts/src/main.vue

@@ -5,12 +5,12 @@
 </template>
 
 <script>
-import autoResize from '../../mixins/autoResize.js'
+import autoResize from '../../../mixin/autoResize'
 
 import Charts from '@jiaminghi/charts'
 
 export default {
-  name: 'Charts',
+  name: 'DvCharts',
   mixins: [autoResize],
   props: {
     option: {

src/components/conicalColumnChart/index.js

@@ -0,0 +1,5 @@
+import ConicalColumnChart from './src/main.vue'
+
+export default function (Vue) {
+  Vue.component(ConicalColumnChart.name, ConicalColumnChart)
+}

src/components/conicalColumnChart/src/main.vue

@@ -40,14 +40,14 @@
 </template>
 
 <script>
-import autoResize from '../../mixins/autoResize.js'
+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: 'ConicalColumnChart',
+  name: 'DvConicalColumnChart',
   mixins: [autoResize],
   props: {
     config: {

src/components/decoration1/index.js

@@ -0,0 +1,5 @@
+import Decoration1 from './src/main.vue'
+
+export default function (Vue) {
+  Vue.component(Decoration1.name, Decoration1)
+}

src/components/decoration1/src/main.vue

@@ -85,10 +85,10 @@
 </template>
 
 <script>
-import autoResize from '../../mixins/autoResize.js'
+import autoResize from '../../../mixin/autoResize'
 
 export default {
-  name: 'Decoration1',
+  name: 'DvDecoration1',
   mixins: [autoResize],
   data () {
     const pointSideLength = 2.5

src/components/decoration10/index.js

@@ -0,0 +1,5 @@
+import Decoration10 from './src/main.vue'
+
+export default function (Vue) {
+  Vue.component(Decoration10.name, Decoration10)
+}

src/components/decoration10/src/main.vue

@@ -146,10 +146,10 @@
 </template>
 
 <script>
-import autoResize from '../../mixins/autoResize.js'
+import autoResize from '../../../mixin/autoResize'
 
 export default {
-  name: 'Decoration9',
+  name: 'DvDecoration10',
   mixins: [autoResize],
   data () {
     return {

src/components/decoration2/index.js

@@ -0,0 +1,5 @@
+import Decoration2 from './src/main.vue'
+
+export default function (Vue) {
+  Vue.component(Decoration2.name, Decoration2)
+}

src/components/decoration2/src/main.vue

@@ -31,10 +31,10 @@
 </template>
 
 <script>
-import autoResize from '../../mixins/autoResize.js'
+import autoResize from '../../../mixin/autoResize'
 
 export default {
-  name: 'Decoration2',
+  name: 'DvDecoration2',
   mixins: [autoResize],
   props: {
     reverse: {

src/components/decoration3/index.js

@@ -0,0 +1,5 @@
+import Decoration3 from './src/main.vue'
+
+export default function (Vue) {
+  Vue.component(Decoration3.name, Decoration3)
+}

src/components/decoration3/src/main.vue

@@ -28,10 +28,10 @@
 </template>
 
 <script>
-import autoResize from '../../mixins/autoResize.js'
+import autoResize from '../../../mixin/autoResize'
 
 export default {
-  name: 'Decoration3',
+  name: 'DvDecoration3',
   mixins: [autoResize],
   data () {
     const pointSideLength = 7

src/components/decoration4/index.js

@@ -0,0 +1,5 @@
+import Decoration4 from './src/main.vue'
+
+export default function (Vue) {
+  Vue.component(Decoration4.name, Decoration4)
+}

src/components/decoration4/src/main.vue

@@ -23,10 +23,10 @@
 </template>
 
 <script>
-import autoResize from '../../mixins/autoResize.js'
+import autoResize from '../../../mixin/autoResize'
 
 export default {
-  name: 'Decoration4',
+  name: 'DvDecoration4',
   mixins: [autoResize],
   props: ['reverse'],
   data () {

src/components/decoration5/index.js

@@ -0,0 +1,5 @@
+import Decoration5 from './src/main.vue'
+
+export default function (Vue) {
+  Vue.component(Decoration5.name, Decoration5)
+}

src/components/decoration5/src/main.vue

@@ -44,12 +44,12 @@
 </template>
 
 <script>
-import autoResize from '../../mixins/autoResize.js'
+import autoResize from '../../../mixin/autoResize'
 
 import { getPolylineLength } from '@jiaminghi/charts/lib/util'
 
 export default {
-  name: 'Decoration5',
+  name: 'DvDecoration5',
   mixins: [autoResize],
   data () {
     return {

src/components/decoration6/index.js

@@ -0,0 +1,5 @@
+import Decoration6 from './src/main.vue'
+
+export default function (Vue) {
+  Vue.component(Decoration6.name, Decoration6)
+}

src/components/decoration6/src/main.vue

@@ -39,12 +39,12 @@
 </template>
 
 <script>
-import autoResize from '../../mixins/autoResize.js'
+import autoResize from '../../../mixin/autoResize'
 
-import { randomExtend } from '../../util'
+import { randomExtend } from '../../../util'
 
 export default {
-  name: 'Decoration6',
+  name: 'DvDecoration6',
   mixins: [autoResize],
   data () {
     const rectWidth = 7

src/components/decoration7/index.js

@@ -0,0 +1,5 @@
+import Decoration7 from './src/main.vue'
+
+export default function (Vue) {
+  Vue.component(Decoration7.name, Decoration7)
+}

src/components/decoration7/src/main.vue

@@ -34,7 +34,7 @@
 
 <script>
 export default {
-  name: 'Decoration7'
+  name: 'DvDecoration7'
 }
 </script>
 

src/components/decoration8/index.js

@@ -0,0 +1,5 @@
+import Decoration8 from './src/main.vue'
+
+export default function (Vue) {
+  Vue.component(Decoration8.name, Decoration8)
+}

src/components/decoration8/src/main.vue

@@ -26,10 +26,10 @@
 </template>
 
 <script>
-import autoResize from '../../mixins/autoResize.js'
+import autoResize from '../../../mixin/autoResize'
 
 export default {
-  name: 'Decoration8',
+  name: 'DvDecoration8',
   mixins: [autoResize],
   props: {
     reverse: {

src/components/decoration9/index.js

@@ -0,0 +1,5 @@
+import Decoration9 from './src/main.vue'
+
+export default function (Vue) {
+  Vue.component(Decoration9.name, Decoration9)
+}

src/components/decoration9/src/main.vue

@@ -84,10 +84,10 @@
 </template>
 
 <script>
-import autoResize from '../../mixins/autoResize.js'
+import autoResize from '../../../mixin/autoResize'
 
 export default {
-  name: 'Decoration9',
+  name: 'DvDecoration9',
   mixins: [autoResize],
   data () {
     return {

src/components/digitalFlop/index.js

@@ -0,0 +1,5 @@
+import DigitalFlop from './src/main.vue'
+
+export default function (Vue) {
+  Vue.component(DigitalFlop.name, DigitalFlop)
+}

src/components/digitalFlop/src/main.vue

@@ -14,7 +14,7 @@ import { deepMerge } from '@jiaminghi/charts/lib/util/index'
 import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'
 
 export default {
-  name: 'DigitalFlop',
+  name: 'DvDigitalFlop',
   props: {
     config: {
       type: Object,

src/components/flylineChart/index.js

@@ -0,0 +1,5 @@
+import FlylineChart from './src/main.vue'
+
+export default function (Vue) {
+  Vue.component(FlylineChart.name, FlylineChart)
+}

src/components/flylineChart/src/main.vue

@@ -153,12 +153,12 @@ import { deepMerge } from '@jiaminghi/charts/lib/util/index'
 
 import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'
 
-import { randomExtend, getPointDistance } from '../../util/index'
+import { randomExtend, getPointDistance } from '../../../util/index'
 
-import autoResize from '../../mixins/autoResize.js'
+import autoResize from '../../../mixin/autoResize'
 
 export default {
-  name: 'PercentPond',
+  name: 'DvFlylineChart',
   mixins: [autoResize],
   props: {
     config: {

src/components/fullScreenContainer/index.js

@@ -0,0 +1,5 @@
+import FullScreenContainer from './src/main.vue'
+
+export default function (Vue) {
+  Vue.component(FullScreenContainer.name, FullScreenContainer)
+}

src/components/fullScreenContainer/src/main.vue

@@ -6,7 +6,7 @@
 
 <script>
 export default {
-  name: 'FullScreenContainer',
+  name: 'DvFullScreenContainer',
   data () {
     return {
       scale: 0,

src/components/index.js

@@ -0,0 +1,77 @@
+import fullScreenContainer from './fullScreenContainer/index'
+import loading from './loading/index'
+
+// border box
+import borderBox1 from './borderBox1/index'
+import borderBox2 from './borderBox2/index'
+import borderBox3 from './borderBox3/index'
+import borderBox4 from './borderBox4/index'
+import borderBox5 from './borderBox5/index'
+import borderBox6 from './borderBox6/index'
+import borderBox7 from './borderBox7/index'
+import borderBox8 from './borderBox8/index'
+import borderBox9 from './borderBox9/index'
+
+// decoration
+import decoration1 from './decoration1/index'
+import decoration2 from './decoration2/index'
+import decoration3 from './decoration3/index'
+import decoration4 from './decoration4/index'
+import decoration5 from './decoration5/index'
+import decoration6 from './decoration6/index'
+import decoration7 from './decoration7/index'
+import decoration8 from './decoration8/index'
+import decoration9 from './decoration9/index'
+import decoration10 from './decoration10/index'
+
+// charts
+import charts from './charts/index'
+
+import activeRingChart from './activeRingChart'
+import waterLevelPond from './waterLevelPond/index'
+import percentPond from './percentPond/index'
+import flylineChart from './flylineChart'
+import conicalColumnChart from './conicalColumnChart'
+import digitalFlop from './digitalFlop'
+import scrollBoard from './scrollBoard/index'
+import scrollRankingBoard from './scrollRankingBoard/index'
+
+export default function (Vue) {
+  Vue.use(fullScreenContainer)
+  Vue.use(loading)
+
+  // border box
+  Vue.use(borderBox1)
+  Vue.use(borderBox2)
+  Vue.use(borderBox3)
+  Vue.use(borderBox4)
+  Vue.use(borderBox5)
+  Vue.use(borderBox6)
+  Vue.use(borderBox7)
+  Vue.use(borderBox8)
+  Vue.use(borderBox9)
+
+  // decoration
+  Vue.use(decoration1)
+  Vue.use(decoration2)
+  Vue.use(decoration3)
+  Vue.use(decoration4)
+  Vue.use(decoration5)
+  Vue.use(decoration6)
+  Vue.use(decoration7)
+  Vue.use(decoration8)
+  Vue.use(decoration9)
+  Vue.use(decoration10)
+
+  // charts
+  Vue.use(charts)
+
+  Vue.use(activeRingChart)
+  Vue.use(waterLevelPond)
+  Vue.use(percentPond)
+  Vue.use(flylineChart)
+  Vue.use(conicalColumnChart)
+  Vue.use(digitalFlop)
+  Vue.use(scrollBoard)
+  Vue.use(scrollRankingBoard)
+}

src/components/loading/index.js

@@ -0,0 +1,5 @@
+import Loading from './src/main.vue'
+
+export default function (Vue) {
+  Vue.component(Loading.name, Loading)
+}

src/components/loading/src/main.vue

@@ -59,7 +59,7 @@
 
 <script>
 export default {
-  name: 'Loading'
+  name: 'DvLoading'
 }
 </script>
 
@@ -74,7 +74,6 @@ export default {
 
   .loading-tip {
     font-size: 15px;
-    color: #fff;
   }
 }
 </style>

src/components/percentPond/index.js

@@ -0,0 +1,5 @@
+import PercentPond from './src/main.vue'
+
+export default function (Vue) {
+  Vue.component(PercentPond.name, PercentPond)
+}

src/components/percentPond/src/main.vue

@@ -49,7 +49,7 @@ import { deepMerge } from '@jiaminghi/charts/lib/util/index'
 import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'
 
 export default {
-  name: 'PercentPond',
+  name: 'DvPercentPond',
   props: {
     config: {
       type: Object,

src/components/scrollBoard/index.js

@@ -0,0 +1,5 @@
+import ScrollBoard from './src/main.vue'
+
+export default function (Vue) {
+  Vue.component(ScrollBoard.name, ScrollBoard)
+}

src/components/scrollBoard/src/main.vue

@@ -47,14 +47,14 @@
 </template>
 
 <script>
-import autoResize from '../../mixins/autoResize.js'
+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: 'ScrollBoard',
+  name: 'DvScrollBoard',
   mixins: [autoResize],
   props: {
     config: {

src/components/scrollRankingBoard/index.js

@@ -0,0 +1,5 @@
+import ScrollRankingBoard from './src/main.vue'
+
+export default function (Vue) {
+  Vue.component(ScrollRankingBoard.name, ScrollRankingBoard)
+}

src/components/scrollRankingBoard/src/main.vue

@@ -25,14 +25,14 @@
 </template>
 
 <script>
-import autoResize from '../../mixins/autoResize.js'
+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: 'ScrollRankingBoard',
+  name: 'DvScrollRankingBoard',
   mixins: [autoResize],
   props: {
     config: {
@@ -264,13 +264,13 @@ export default {
       width: 50px;
       transform: translateX(-100%);
       background: radial-gradient(rgb(40, 248, 255) 5%, transparent 80%);
-      animation: shine 3s ease-in-out infinite;
+      animation: shine 3s ease-in-out infinite alternate;
     }
   }
 }
 
 @keyframes shine {
-  85% {
+  80% {
     left: 0%;
     transform: translateX(-100%);
   }

src/components/waterLevelPond/index.js

@@ -0,0 +1,5 @@
+import WaterLevelPond from './src/main.vue'
+
+export default function (Vue) {
+  Vue.component(WaterLevelPond.name, WaterLevelPond)
+}

src/components/waterLevelPond/src/main.vue

@@ -47,7 +47,7 @@ import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'
 import CRender from '@jiaminghi/c-render'
 
 export default {
-  name: 'waterLevelPond',
+  name: 'DvWaterLevelPond',
   props: {
     config: Object,
     default: () => ({})