Merge pull request epicmaxco#148 from asvae/tree-view

Tree view
yevdyko · Apr 5, 2018 · b6c0eba · b6c0eba
2 parents ca71dc6 + 0df9a5c
commit b6c0eba
Show file tree

Hide file tree

Showing 29 changed files with 7,406 additions and 69 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -17,6 +17,7 @@ module.exports = {
   ],
   // add your custom rules here
   'rules': {
+    'comma-dangle': 'off',
     // allow paren-less arrow functions
     'arrow-parens': 0,
     // allow async-await

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/build/webpack.prod.conf.js b/build/webpack.prod.conf.js
@@ -99,7 +99,7 @@ const webpackConfig = merge(baseWebpackConfig, {
     new CopyWebpackPlugin([
       {
         from: path.resolve(__dirname, '../favicon.ico'),
-        to: config.build.assetsRoot,
+        to: config.build.assetsRoot
       }
     ])
   ]

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/icons/Set.vue b/src/components/ui/icons/Set.vue
@@ -58,11 +58,10 @@
                   :class="iconClass(list.icons[(i - 1) * 8 + j - 1])"
                   :style="`font-size: ${iconSize}px`"
                   aria-hidden="true"
-                >
-                </span>
-                <div class="iconText">
-                  {{ list.icons[(i - 1) * 8 + j - 1] }}
-                </div>
+                />
+              </div>
+              <div class="iconText">
+                {{ list.icons[(i - 1) * 8 + j - 1] }}
               </div>
             </div>
           </div>
@@ -187,13 +186,16 @@
 
     .row {
       .icon-grid-container {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-direction: column;
+
         position: relative;
         float: left;
         height: 6rem;
         min-height: 1px;
         margin: 0 0 .5rem;
-        padding-right: .625rem;
-        padding-left: .625rem;
         text-align: center;
 
         &:hover {
@@ -203,13 +205,13 @@
         }
 
         .icon {
-          margin: 0 0 .5rem;
+          margin: 0 0 1rem;
           padding: 1rem 0 0;
+        }
 
-          .iconText {
-            font-size: .6rem;
-            text-align: center;
-          }
+        .iconText {
+          font-size: .6rem;
+          text-align: center;
         }
       }
     }

diff --git a/src/components/ui/notifications/Notifications.vue b/src/components/ui/notifications/Notifications.vue
@@ -210,5 +210,4 @@
       transform: translateY(0);
     }
   }
-
 </style>
diff --git a/src/components/ui/tree-view/TreeView.vue b/src/components/ui/tree-view/TreeView.vue
@@ -0,0 +1,72 @@
+<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')">
+            <tree-view-basic-preview/>
+          </vuestic-widget>
+        </div>
+
+        <div class="small-set col-lg-6">
+          <vuestic-widget :headerText="$t('treeView.icons')">
+            <tree-view-icons-preview/>
+          </vuestic-widget>
+        </div>
+
+        <div class="small-set col-lg-6">
+          <vuestic-widget :headerText="$t('treeView.advanced')">
+            <tree-view-advanced-preview/>
+          </vuestic-widget>
+        </div>
+
+
+        <div class="small-set col-lg-6">
+          <vuestic-widget :headerText="$t('treeView.editable')">
+            <tree-view-editable-preview/>
+          </vuestic-widget>
+        </div>
+
+        <div class="small-set col-lg-6">
+          <vuestic-widget :headerText="$t('treeView.selectable')">
+            <tree-view-selectable-preview/>
+          </vuestic-widget>
+        </div>
+
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+  import VuesticWidget
+    from '../../../vuestic-theme/vuestic-components/vuestic-widget/VuesticWidget.vue'
+  import TreeViewBasicPreview from './TreeViewBasicPreview'
+  import TreeViewIconsPreview from './TreeViewIconsPreview'
+  import TreeViewSelectablePreview from './TreeViewSelectablePreview'
+  import TreeViewAdvancedPreview from './TreeViewAdvancedPreview'
+  import TreeViewEditablePreview from './TreeViewEditablePreview'
+
+  export default {
+    name: 'tree-view',
+    components: {
+      TreeViewEditablePreview,
+      TreeViewAdvancedPreview,
+      TreeViewSelectablePreview,
+      TreeViewIconsPreview,
+      TreeViewBasicPreview,
+      VuesticWidget
+    },
+    data () {
+      return {
+        treeViewData: {}
+      }
+    }
+  }
+</script>
+
+<style lang="scss">
+
+</style>
+
diff --git a/src/components/ui/tree-view/TreeViewAdvancedPreview.vue b/src/components/ui/tree-view/TreeViewAdvancedPreview.vue
@@ -0,0 +1,48 @@
+<template>
+  <div class="tree-view-advanced-preview">
+    <div class="row mb-4">
+      <div class="small-set col-sm-6 d-flex justify-content-center">
+        <button class="btn btn-primary btn-micro"
+                @click="$refs.treeView.expand()"
+        >
+          EXPAND ALL
+        </button>
+      </div>
+      <div class="small-set col-sm-6 d-flex justify-content-center">
+        <button class="btn btn-primary btn-micro"
+                @click="$refs.treeView.collapse()"
+        >
+          COLLAPSE ALL
+        </button>
+      </div>
+    </div>
+
+    <vuestic-tree-root ref="treeView">
+      <vuestic-tree-category label="Electronics">
+        <vuestic-tree-node>Cellphones</vuestic-tree-node>
+        <vuestic-tree-node>Camera Body Kits</vuestic-tree-node>
+        <vuestic-tree-node>External HDDs</vuestic-tree-node>
+      </vuestic-tree-category>
+      <vuestic-tree-category isOpen label="Products">
+        <vuestic-tree-category label="Cables">
+          <vuestic-tree-node>Audio</vuestic-tree-node>
+          <vuestic-tree-node>Video</vuestic-tree-node>
+          <vuestic-tree-node>Optical</vuestic-tree-node>
+        </vuestic-tree-category>
+        <vuestic-tree-node>Monitors</vuestic-tree-node>
+        <vuestic-tree-node>Keyboards</vuestic-tree-node>
+      </vuestic-tree-category>
+      <vuestic-tree-category label="Apparel">
+        <vuestic-tree-node>Jackets</vuestic-tree-node>
+        <vuestic-tree-node>Pants</vuestic-tree-node>
+        <vuestic-tree-node>Skirts</vuestic-tree-node>
+      </vuestic-tree-category>
+    </vuestic-tree-root>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'tree-view-advanced-preview',
+  }
+</script>
diff --git a/src/components/ui/tree-view/TreeViewBasicPreview.vue b/src/components/ui/tree-view/TreeViewBasicPreview.vue
@@ -0,0 +1,29 @@
+<template>
+  <vuestic-tree-root>
+    <vuestic-tree-category label="Electronics">
+      <vuestic-tree-node>Cellphones</vuestic-tree-node>
+      <vuestic-tree-node>Camera Body Kits</vuestic-tree-node>
+      <vuestic-tree-node>External HDDs</vuestic-tree-node>
+    </vuestic-tree-category>
+    <vuestic-tree-category isOpen label="Products">
+      <vuestic-tree-category label="Cables">
+        <vuestic-tree-node>Audio</vuestic-tree-node>
+        <vuestic-tree-node>Video</vuestic-tree-node>
+        <vuestic-tree-node>Optical</vuestic-tree-node>
+      </vuestic-tree-category>
+      <vuestic-tree-node>Monitors</vuestic-tree-node>
+      <vuestic-tree-node>Keyboards</vuestic-tree-node>
+    </vuestic-tree-category>
+    <vuestic-tree-category label="Apparel">
+      <vuestic-tree-node>Jackets</vuestic-tree-node>
+      <vuestic-tree-node>Pants</vuestic-tree-node>
+      <vuestic-tree-node>Skirts</vuestic-tree-node>
+    </vuestic-tree-category>
+  </vuestic-tree-root>
+</template>
+
+<script>
+  export default {
+    name: 'tree-view-basic-preview',
+  }
+</script>
diff --git a/src/components/ui/tree-view/TreeViewEditablePreview.vue b/src/components/ui/tree-view/TreeViewEditablePreview.vue
@@ -0,0 +1,72 @@
+<template>
+  <vuestic-tree-root>
+
+    <vuestic-tree-category label="Electronics">
+      <vuestic-tree-node v-for="electronic in electronics" :key="electronic.id">
+        <div class="form-group">
+          <div class="input-group">
+            <input v-model="electronic.name">
+            <i class="bar"></i>
+          </div>
+        </div>
+      </vuestic-tree-node>
+    </vuestic-tree-category>
+
+    <vuestic-tree-category isOpen label="Products">
+      <vuestic-tree-node v-for="product in products" :key="product.id">
+        <div class="form-group">
+          <div class="input-group">
+            <input v-model="product.name">
+            <i class="bar"></i>
+          </div>
+        </div>
+        <div slot="iconRight" class="icon" @click="removeProduct(product)">
+          <span aria-hidden="true" class="ion ion-md-close"/>
+        </div>
+      </vuestic-tree-node>
+      <vuestic-tree-node>
+        <button class="btn btn-primary btn-micro mb-2"
+                @click="addProduct()"
+        >
+          Add new product
+        </button>
+      </vuestic-tree-node>
+    </vuestic-tree-category>
+
+  </vuestic-tree-root>
+</template>
+
+<script>
+  export default {
+    name: 'tree-view-editable-preview',
+    data () {
+      return {
+        electronics: [
+          { id: 1, name: 'Cellphones' },
+          { id: 2, name: 'Camera Body Kits' },
+          { id: 3, name: 'External HDDs' },
+        ],
+        products: [
+          { id: 4, name: 'Cables' },
+          { id: 5, name: 'Monitors' },
+          { id: 6, name: 'Keyboards' },
+        ],
+      }
+    },
+    methods: {
+      addProduct () {
+        this.products.push({
+          id: this.products[this.products.length - 1].id,
+          name: 'New product'
+        })
+      },
+      removeProduct (product) {
+        this.products = this.products.filter(productToFilter => productToFilter !== product)
+      }
+    },
+  }
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/components/ui/tree-view/TreeViewIconsPreview.vue b/src/components/ui/tree-view/TreeViewIconsPreview.vue
@@ -0,0 +1,79 @@
+<template>
+  <vuestic-tree-root>
+    <vuestic-tree-category label="Images">
+      <div slot="icon" class="icon">
+        <span aria-hidden="true" class="ion ion-md-images"/>
+      </div>
+      <vuestic-tree-node>
+        <div slot="icon" class="icon">
+          <span aria-hidden="true" class="ion ion-md-image"/>
+        </div>
+        sick_catz_cuddling.jpg
+      </vuestic-tree-node>
+      <vuestic-tree-node>
+        <div slot="icon" class="icon">
+          <span aria-hidden="true" class="ion ion-md-image"/>
+        </div>
+        pins-and-needles.jpg
+      </vuestic-tree-node>
+      <vuestic-tree-node>
+        <div slot="icon" class="icon">
+          <span aria-hidden="true" class="ion ion-md-image"/>
+        </div>
+        avatar_50x50.jpg
+      </vuestic-tree-node>
+    </vuestic-tree-category>
+    <vuestic-tree-category label="Music" isOpen>
+      <div slot="icon" class="icon">
+        <span aria-hidden="true" class="ion ion-md-star-outline"/>
+      </div>
+      <vuestic-tree-node>
+        <div slot="icon" class="icon">
+          <span aria-hidden="true" class="ion ion-md-musical-notes"/>
+        </div>
+        Taylor_swift_hello.mp3
+      </vuestic-tree-node>
+      <vuestic-tree-node>
+        <div slot="icon" class="icon">
+          <span aria-hidden="true" class="ion ion-md-musical-notes"/>
+        </div>
+        straight_to_the_bank.wav
+      </vuestic-tree-node>
+      <vuestic-tree-node>
+        <div slot="icon" class="icon">
+          <span aria-hidden="true" class="ion ion-md-musical-notes"/>
+        </div>
+        imagine_dragons_promo.mp3
+      </vuestic-tree-node>
+    </vuestic-tree-category>
+    <vuestic-tree-category label="Miscellaneous">
+      <div slot="icon" class="icon">
+        <span aria-hidden="true" class="ion ion-md-list"/>
+      </div>
+      <vuestic-tree-node>
+        <div slot="icon" class="icon">
+          <span aria-hidden="true" class="ion ion-md-grid"/>
+        </div>
+        dump.sql
+      </vuestic-tree-node>
+      <vuestic-tree-node>
+        <div slot="icon" class="icon">
+          <span aria-hidden="true" class="ion ion-md-help"/>
+        </div>
+        unknown-file
+      </vuestic-tree-node>
+      <vuestic-tree-node>
+        <div slot="icon" class="icon">
+          <span aria-hidden="true" class="ion ion-md-key"/>
+        </div>
+        secure.key
+      </vuestic-tree-node>
+    </vuestic-tree-category>
+  </vuestic-tree-root>
+</template>
+
+<script>
+  export default {
+    name: 'tree-view-icons-preview',
+  }
+</script>
-Original file line number
+Diff line change
@@ Expand Up / @@ -210,5 +210,4 @@ @@
           transform: translateY(0);
         }
       }
     </style>