修改gitignore文件

Author: zepang

.gitignore

@@ -1,2 +1,2 @@
 node_modules/
-/dist/
+dist/

deploy.sh

@@ -0,0 +1,6 @@
+cd docs/.vuepress/dist
+
+git init
+git add .
+git commit -m 'deploy'
+git push -f git@github.com:zepang/lai-ui.git master:gh-pages

docs/.vuepress/components/tree/deepClone.js

@@ -0,0 +1,37 @@
+function typeOf (obj) {
+  const map = {
+    '[object Boolean]'  : 'boolean',
+    '[object Number]'   : 'number',
+    '[object String]'   : 'string',
+    '[object Function]' : 'function',
+    '[object Array]'    : 'array',
+    '[object Date]'     : 'date',
+    '[object RegExp]'   : 'regExp',
+    '[object Undefined]': 'undefined',
+    '[object Null]'     : 'null',
+    '[object Object]'   : 'object'
+  }
+  return map[Object.prototype.toString.call(obj)]
+}
+
+function deepClone (data) {
+  let obj
+
+  if (typeOf(data) === 'array') {
+    obj = []
+    for (let i = 0; i < data.length; i++) {
+      obj.push(data[i])
+    }
+  } else if (typeOf(data) === 'object') {
+    obj = {}
+    for (let key in data) {
+      obj[key] = deepClone(data[key])
+    }
+  } else {
+    return data
+  }
+
+  return obj
+}
+
+export default deepClone

docs/.vuepress/components/tree/index.vue

@@ -0,0 +1,54 @@
+<template>
+  <div>
+    <tree-node
+      v-for="(item, index) in cloneData"
+      :key="index"
+      :data="item"
+      :show-checkbox="showCheckbox">
+    </tree-node>
+  </div>
+</template>
+
+<script>
+import deepClone from './deepClone'
+import TreeNode from './node'
+export default {
+  provide () {
+    return {
+      tree: this
+    }
+  },
+  props: {
+    data: {
+      type: Array,
+      default: () => []
+    },
+    showCheckbox: {
+      type: Boolean,
+      default: false
+    }
+  },
+  components: { TreeNode },
+  data () {
+    return {
+      cloneData: []
+    }
+  },
+  created () {
+    this.updateData()
+  },
+  methods: {
+    updateData () {
+      this.cloneData = deepClone(this.data)
+    },
+    onCheckChange (data) {
+      this.$emit('on-check-change', data, this.data)
+    }
+  },
+  watch: {
+    data () {
+      this.updateData()
+    }
+  }
+}
+</script>

docs/.vuepress/components/tree/node.vue

@@ -0,0 +1,86 @@
+<template>
+  <ul class="tree-list">
+    <li class="tree-item">
+      <span class="tree-expand" @click="handleExpand">
+        <span v-if="data.children && data.children.length && !data.expand">+</span>
+        <span v-if="data.children && data.children.length && data.expand">-</span>
+      </span>
+      <checkbox 
+        v-if="showCheckbox" 
+        v-model="data.checked" 
+        @on-change="handleCheck">
+      </checkbox>
+      <span>{{ data.title }}</span>
+      <tree-node
+        v-if="data.expand"
+        v-for="(item, index) in data.children"
+        :key="index"
+        :data="item"
+        :show-checkbox="showCheckbox"
+      ></tree-node>
+    </li>
+  </ul>
+</template>
+
+<script>
+import checkbox from '../checkbox'
+export default {
+  name: 'TreeNode',
+  inject: ['tree'],
+  props: {
+    data: {
+      type: Object,
+      default: () => {}
+    },
+    showCheckbox: {
+      type: Boolean,
+      default: false
+    }
+  },
+  components: { checkbox },
+  methods: {
+    updateTreeDown (data, checked) {
+      this.$set(data, 'checked', checked)
+      if (data.children && data.children.length) {
+        data.children.forEach(item => {
+          this.updateTreeDown(item, checked)
+        })
+      }
+    },
+    handleCheck (checked) {
+      this.updateTreeDown(this.data, checked)
+      this.tree.onCheckChange(this.data)
+    },
+    handleExpand () {
+      this.$set(this.data, 'expand', !this.data.expand)
+    }
+  },
+  watch: {
+    'data.children': {
+      handler (data) {
+        if (data) {
+          const checkedAll = data.every(item => item.checked)
+          this.$set(this.data, 'checked', checkedAll)
+        }
+      },
+      deep: true
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.tree-list, .tree-item{
+  list-style: none;
+  padding-left: 1em;
+}
+.tree-item {
+  padding-top: 0.5em;
+  padding-bottom: 0.5em;
+}
+.tree-expand{
+  cursor: pointer;
+}
+</style>
+
+

docs/.vuepress/config.js

@@ -1,4 +1,5 @@
 module.exports = {
+  base: '/lai-ui/',
   title: 'Components Learning With Vue',
   head: [
     ['link', { rel: 'icon', href: '/img/favicon.ico' }]
@@ -8,7 +9,7 @@ module.exports = {
     nav: [
       { text: 'Home', link: '/' },
       { text: 'documents', link: '/posts/' },
-      { text: 'github', link: 'https://google.com' },
+      { text: 'github', link: 'https://github.com/zepang/lai-ui' },
     ],
     sidebar: [
       '/posts/',
@@ -40,5 +41,10 @@ module.exports = {
         ]
       }
     ]
+  },
+  configureWebpack: (config, isServer) => {
+    if (!isServer) {
+      config.output.publicPath = '/lai-ui/'
+    }
   }
 }

docs/.vuepress/dist/404.html

@@ -5,13 +5,13 @@
     <meta name="viewport" content="width=device-width,initial-scale=1">
     <title>Components Learning With Vue</title>
     <meta name="description" content="">
-    <link rel="icon" href="/img/favicon.ico">
+    <link rel="icon" href="/lai-ui/img/favicon.ico">
 
-    <link rel="preload" href="/assets/css/0.styles.21f7e899.css" as="style"><link rel="preload" href="/assets/js/app.44af0a7b.js" as="script"><link rel="prefetch" href="/assets/js/10.494e2e99.js"><link rel="prefetch" href="/assets/js/11.51c7e3b3.js"><link rel="prefetch" href="/assets/js/12.53865723.js"><link rel="prefetch" href="/assets/js/13.56d7017a.js"><link rel="prefetch" href="/assets/js/14.b47db088.js"><link rel="prefetch" href="/assets/js/15.866ce069.js"><link rel="prefetch" href="/assets/js/16.9c9874ab.js"><link rel="prefetch" href="/assets/js/17.e4b37813.js"><link rel="prefetch" href="/assets/js/18.4847872e.js"><link rel="prefetch" href="/assets/js/19.7e8d0a8c.js"><link rel="prefetch" href="/assets/js/2.dc5535aa.js"><link rel="prefetch" href="/assets/js/20.0b4a1283.js"><link rel="prefetch" href="/assets/js/21.a59d724e.js"><link rel="prefetch" href="/assets/js/22.19b76e1c.js"><link rel="prefetch" href="/assets/js/23.697a48d7.js"><link rel="prefetch" href="/assets/js/24.4c274ec0.js"><link rel="prefetch" href="/assets/js/25.4b4c5d3c.js"><link rel="prefetch" href="/assets/js/26.79c293aa.js"><link rel="prefetch" href="/assets/js/27.ae439a8b.js"><link rel="prefetch" href="/assets/js/28.59752271.js"><link rel="prefetch" href="/assets/js/29.88dfb98b.js"><link rel="prefetch" href="/assets/js/3.403da4fe.js"><link rel="prefetch" href="/assets/js/30.e697eda4.js"><link rel="prefetch" href="/assets/js/31.315ebd79.js"><link rel="prefetch" href="/assets/js/32.d2f03d59.js"><link rel="prefetch" href="/assets/js/33.f22d52b8.js"><link rel="prefetch" href="/assets/js/34.efbe991a.js"><link rel="prefetch" href="/assets/js/35.2548d21b.js"><link rel="prefetch" href="/assets/js/36.2b9b0e53.js"><link rel="prefetch" href="/assets/js/37.34de78d5.js"><link rel="prefetch" href="/assets/js/4.a97e2175.js"><link rel="prefetch" href="/assets/js/5.0ef2f1d3.js"><link rel="prefetch" href="/assets/js/6.3bc55169.js"><link rel="prefetch" href="/assets/js/7.ca82f957.js"><link rel="prefetch" href="/assets/js/8.be648d3a.js"><link rel="prefetch" href="/assets/js/9.eeb2b467.js">
-    <link rel="stylesheet" href="/assets/css/0.styles.21f7e899.css">
+    <link rel="preload" href="/lai-ui/assets/css/0.styles.1a4d2eed.css" as="style"><link rel="preload" href="/lai-ui/assets/js/app.9f69d2e5.js" as="script"><link rel="prefetch" href="/lai-ui/assets/js/10.9e3e7dbc.js"><link rel="prefetch" href="/lai-ui/assets/js/11.95dea5ef.js"><link rel="prefetch" href="/lai-ui/assets/js/12.a9268648.js"><link rel="prefetch" href="/lai-ui/assets/js/13.23cc5671.js"><link rel="prefetch" href="/lai-ui/assets/js/14.ea67ba93.js"><link rel="prefetch" href="/lai-ui/assets/js/15.866ce069.js"><link rel="prefetch" href="/lai-ui/assets/js/16.2662502a.js"><link rel="prefetch" href="/lai-ui/assets/js/17.56e6ed80.js"><link rel="prefetch" href="/lai-ui/assets/js/18.e0e6d450.js"><link rel="prefetch" href="/lai-ui/assets/js/19.9b135584.js"><link rel="prefetch" href="/lai-ui/assets/js/2.dc5535aa.js"><link rel="prefetch" href="/lai-ui/assets/js/20.6d949404.js"><link rel="prefetch" href="/lai-ui/assets/js/21.ab9f510c.js"><link rel="prefetch" href="/lai-ui/assets/js/22.95405f80.js"><link rel="prefetch" href="/lai-ui/assets/js/23.15ef849f.js"><link rel="prefetch" href="/lai-ui/assets/js/24.557cd419.js"><link rel="prefetch" href="/lai-ui/assets/js/25.c1c37d04.js"><link rel="prefetch" href="/lai-ui/assets/js/26.2b7ed4dc.js"><link rel="prefetch" href="/lai-ui/assets/js/27.a634c945.js"><link rel="prefetch" href="/lai-ui/assets/js/28.f93c58e6.js"><link rel="prefetch" href="/lai-ui/assets/js/29.1c7b219d.js"><link rel="prefetch" href="/lai-ui/assets/js/3.f18ba24a.js"><link rel="prefetch" href="/lai-ui/assets/js/30.3ebc2342.js"><link rel="prefetch" href="/lai-ui/assets/js/31.5ede36f9.js"><link rel="prefetch" href="/lai-ui/assets/js/32.60d7396c.js"><link rel="prefetch" href="/lai-ui/assets/js/33.52a1b322.js"><link rel="prefetch" href="/lai-ui/assets/js/34.c7921474.js"><link rel="prefetch" href="/lai-ui/assets/js/35.548f2d85.js"><link rel="prefetch" href="/lai-ui/assets/js/36.3f0c4bb3.js"><link rel="prefetch" href="/lai-ui/assets/js/37.34de78d5.js"><link rel="prefetch" href="/lai-ui/assets/js/4.59a31b92.js"><link rel="prefetch" href="/lai-ui/assets/js/5.7e683ae2.js"><link rel="prefetch" href="/lai-ui/assets/js/6.9d16e7a4.js"><link rel="prefetch" href="/lai-ui/assets/js/7.1ad10451.js"><link rel="prefetch" href="/lai-ui/assets/js/8.f3dccb5a.js"><link rel="prefetch" href="/lai-ui/assets/js/9.e1fbec58.js">
+    <link rel="stylesheet" href="/lai-ui/assets/css/0.styles.1a4d2eed.css">
   </head>
   <body>
-    <div id="app" data-server-rendered="true"><div class="theme-container"><div class="content"><h1>404</h1> <blockquote>There's nothing here.</blockquote> <a href="/" class="router-link-active">Take me home.</a></div></div></div>
-    <script src="/assets/js/app.44af0a7b.js" defer></script>
+    <div id="app" data-server-rendered="true"><div class="theme-container"><div class="content"><h1>404</h1> <blockquote>There's nothing here.</blockquote> <a href="/lai-ui/" class="router-link-active">Take me home.</a></div></div></div>
+    <script src="/lai-ui/assets/js/app.9f69d2e5.js" defer></script>
   </body>
 </html>