Tree view

shekarsiri · Apr 2, 2018 · 5c29891 · 5c29891
1 parent ca71dc6
commit 5c29891
Show file tree

Hide file tree

Showing 21 changed files with 7,166 additions and 8 deletions.
diff --git a/.gitignore b/.gitignore
@@ -3,4 +3,5 @@ node_modules/
 dist/
 npm-debug.log
 package-lock.json
+/yarn-error.log
 .idea/
diff --git a/package.json b/package.json
@@ -87,6 +87,7 @@
     "semver": "5.3.0",
     "shelljs": "0.7.6",
     "url-loader": "0.5.8",
+    "vue-component-tree": "^2.2.1",
     "vue-loader": "13.3.0",
     "vue-style-loader": "3.0.1",
     "vue-template-compiler": "2.5.2",

diff --git a/src/components/ui/tree-view/TreeView.vue b/src/components/ui/tree-view/TreeView.vue
@@ -0,0 +1,116 @@
+<template>
+  <div class="sets-list row">
+    <div class="col-md-12">
+      <div class="row">
+
+        <div class="small-set col-lg-6">
+          <vuestic-widget :headerText="$t('treeView.basic')">
+            <div class="set-content">
+              <div class="overlay">
+                <vuestic-tree-view
+                  :options="treeViewData.basic"
+                >
+                </vuestic-tree-view>
+              </div>
+            </div>
+          </vuestic-widget>
+        </div>
+
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+  import VuesticTreeView
+    from '../../../vuestic-theme/vuestic-components/vuestic-tree-view/VuesticTreeView.vue'
+  import VuesticWidget
+    from '../../../vuestic-theme/vuestic-components/vuestic-widget/VuesticWidget.vue'
+
+  import VuesticTreeNode
+    from '../../../vuestic-theme/vuestic-components/vuestic-tree-view/VuesticTreeNode'
+  import VuesticTreeNodeCategory
+    from '../../../vuestic-theme/vuestic-components/vuestic-tree-view/VuesticTreeNodeCategory'
+
+  export default {
+    name: 'tree-view',
+    components: {
+      VuesticTreeView,
+      VuesticWidget
+    },
+    data () {
+      return {
+        treeViewData: {
+          basic: [
+            new VuesticTreeNodeCategory({
+              data: 'Products',
+              children: [
+                new VuesticTreeNode({
+                  data: 'Product 1'
+                }),
+                new VuesticTreeNode({
+                  data: 'Product 2'
+                }),
+                new VuesticTreeNode({
+                  data: 'Product 3'
+                })
+              ]
+            }),
+            new VuesticTreeNodeCategory({
+              data: 'Electronics',
+              open: true,
+              children: [
+                new VuesticTreeNode({
+                  data: 'Cellphones'
+                }),
+                new VuesticTreeNode({
+                  data: 'Camera Body Kits',
+                  selected: true
+                }),
+                new VuesticTreeNode({
+                  data: 'External HDDs'
+                })
+              ]
+            }),
+            new VuesticTreeNodeCategory({
+              data: 'Apparel',
+              children: [
+                new VuesticTreeNode({
+                  data: 'Apparel 1'
+                }),
+                new VuesticTreeNode({
+                  data: 'Apparel 2'
+                }),
+                new VuesticTreeNode({
+                  data: 'Apparel 3'
+                })
+              ]
+            }),
+            new VuesticTreeNodeCategory({
+              data: 'Furniture',
+              children: [
+                new VuesticTreeNode({
+                  data: 'Furniture 1'
+                }),
+                new VuesticTreeNode({
+                  data: 'Furniture 2'
+                }),
+                new VuesticTreeNode({
+                  data: 'Furniture 3'
+                })
+              ]
+            })
+          ]
+        },
+        treeViewDataSelected: {
+          basic: []
+        }
+      }
+    }
+  }
+</script>
+
+<style lang="scss">
+
+</style>
+
diff --git a/src/i18n/en.json b/src/i18n/en.json
@@ -174,7 +174,8 @@
     "statistics": "Statistics",
     "tables": "Tables",
     "typography": "Typography",
-    "uiElements": "UI Elements"
+    "uiElements": "UI Elements",
+    "treeView": "Tree view"
   },
   "messages": {
     "all": "See all messages",

diff --git a/src/router/index.js b/src/router/index.js
@@ -1,14 +1,27 @@
 import Vue from 'vue'
 import Router from 'vue-router'
 
+import VueComponentTree from 'vue-component-tree'
+
 import menuModule from 'vuex-store/modules/menu'
 
 Vue.use(Router)
 
+const demoRoutes = []
+if (process.env.NODE_ENV === 'development') {
+  demoRoutes.push(
+    VueComponentTree(require.context('./..', true, /.demo.vue$/), '/demo')
+  )
+}
+
 export default new Router({
   routes: [
+    ...demoRoutes,
     ...generateRoutesFromMenu(menuModule.state.items),
-    {path: '*', redirect: { name: getDefaultRoute(menuModule.state.items).name }}
+    {
+      path: '*',
+      redirect: { name: getDefaultRoute(menuModule.state.items).name }
+    }
   ]
 })
 

diff --git a/src/sass/_variables.scss b/src/sass/_variables.scss
@@ -6,6 +6,7 @@ $charcoal: #555;
 $darkest-gray: #333;
 $almost-black: #161616;
 $vue-green: #4ae387;
+$vue-light-green: #dbf9e8;
 $light-green: #c8f9c5;
 $light-blue: #dcf1ff;
 $light-yellow: #fff1c8;

diff --git a/src/store/modules/menu/ui.js b/src/store/modules/menu/ui.js
@@ -79,6 +79,14 @@ export default {
       meta: {
         title: 'menu.modals'
       }
+    },
+    {
+      name: 'TreeView',
+      path: '/ui/tree-view',
+      component: lazyLoading('ui/tree-view/TreeView'),
+      meta: {
+        title: 'menu.treeView'
+      }
     }
   ]
 }

diff --git a/src/vuestic-theme/vuestic-components/vuestic-checkbox/VuesticCheckbox.vue b/src/vuestic-theme/vuestic-components/vuestic-checkbox/VuesticCheckbox.vue
@@ -1,6 +1,8 @@
 <template>
-  <div class="form-check abc-checkbox" :class="additionalClasses">
-    <input class="form-check-input" :id="id" type="checkbox" :name="name" :checked="checked" @change="onChange" :disabled="disabled">
+  <div class="vuestic-checkbox form-check abc-checkbox"
+       :class="additionalClasses">
+    <input class="form-check-input" :id="id" type="checkbox" :name="name"
+           :checked="checked" @change="onChange" :disabled="disabled">
     <label class="form-check-label" :for="id">
       <template v-if="label">
         <span class="abc-label-text">{{label}}</span>
@@ -15,7 +17,6 @@
 </template>
 
 <script>
-
   export default {
     name: 'vuestic-checkbox',
     props: {
@@ -72,7 +73,9 @@
 </script>
 
 <style lang="scss">
-    @import "../../../sass/variables";
+  @import "../../../sass/variables";
 
+  .vuestic-checkbox {
 
+  }
 </style>
diff --git a/src/vuestic-theme/vuestic-components/vuestic-radio-button/VuesticRadioButton.vue b/src/vuestic-theme/vuestic-components/vuestic-radio-button/VuesticRadioButton.vue
@@ -1,6 +1,9 @@
 <template>
-  <div class="form-check radio abc-radio" :class="additionalClasses">
-    <input class="form-check-input" type="radio" :name="name" :id="id" :value="value" :checked="checkState" @change="onChange" :disabled="disabled">
+  <div class="vuestic-radio-button form-check radio abc-radio"
+       :class="additionalClasses">
+    <input class="form-check-input" type="radio" :name="name" :id="id"
+           :value="value" :checked="checkState" @change="onChange"
+           :disabled="disabled">
     <label class="form-check-label" :for="id">
       <span class="abc-label-text">{{'forms.controls.radio' | translate}}</span>
     </label>
@@ -88,5 +91,7 @@
 <style lang="scss">
   @import "../../../sass/variables";
 
+  .vuestic-radio-button {
 
+  }
 </style>
diff --git a/src/vuestic-theme/vuestic-components/vuestic-tree-view/VuesticTreeNode.js b/src/vuestic-theme/vuestic-components/vuestic-tree-view/VuesticTreeNode.js
@@ -0,0 +1,14 @@
+export default class VuesticTreeNode {
+  constructor (data) {
+    /**
+     * @type string
+     */
+    this.label = data.label || ''
+
+    /**
+     * @type boolean
+     */
+
+    this.selected = data.selected || false
+  }
+}
diff --git a/src/vuestic-theme/vuestic-components/vuestic-tree-view/VuesticTreeNodeCategory.js b/src/vuestic-theme/vuestic-components/vuestic-tree-view/VuesticTreeNodeCategory.js
@@ -0,0 +1,46 @@
+export default class VuesticTreeNodeCategory {
+  constructor (data) {
+    /**
+     * @type any
+     */
+    this.label = data.label || null
+
+    /**
+     * @type VuesticTreeNode[] | VuesticTreeNodeCategory[]
+     */
+    this.children = data.children || []
+
+    /**
+     * @type boolean
+     */
+    this.isOpen = data.isOpen || false
+
+    if (!this.children.length) {
+      throw new Error('VuesticTreeNodeCategory should have at least one child')
+    }
+  }
+
+  /**
+   * @return void
+   */
+  expand () {
+    this.isOpen = true
+    this.children.forEach(node => {
+      if (node instanceof VuesticTreeNodeCategory) {
+        node.expand()
+      }
+    })
+  }
+
+  /**
+   * @return void
+   */
+  collapse () {
+    this.isOpen = false
+    this.children.forEach(node => {
+      if (node instanceof VuesticTreeNodeCategory) {
+        node.expand()
+      }
+    })
+  }
+}
diff --git a/src/vuestic-theme/vuestic-components/vuestic-tree-view/VuesticTreeRoot.js b/src/vuestic-theme/vuestic-components/vuestic-tree-view/VuesticTreeRoot.js
@@ -0,0 +1,32 @@
+import VuesticTreeNodeCategory from './VuesticTreeNodeCategory'
+
+export default class VuesticTreeRoot {
+  constructor (nodes) {
+    /**
+     * @type VuesticTreeNode | VuesticTreeNodeCategory
+     */
+    this.nodes = nodes
+  }
+
+  /**
+   * @return void
+   */
+  collapse () {
+    this.nodes.forEach(node => {
+      if (node instanceof VuesticTreeNodeCategory) {
+        node.collapse()
+      }
+    })
+  }
+
+  /**
+   * @return void
+   */
+  expand () {
+    this.nodes.forEach(node => {
+      if (node instanceof VuesticTreeNodeCategory) {
+        node.expand()
+      }
+    })
+  }
+}