import Vue from 'vue'
  import components from 'vue-ncu-unit'

  new Vue({
    el: '#app',
    components: {
      college: components.College,
      degree: components.Degree,
      department: components.Department,
      grade: components.Grade,
      trans: components.Trans
    }
    // or in es2015...
    components
  })
          

<college defaults="工學院"></college>
          

  <department defaults="32060"
              :filtering="{
                              college: '工學院',
                              degree: '碩士班'
                          }"></department>
            

<degree defaults="碩士班"></degree>
          

<degree defaults="碩士班" id="demo-degree"></degree>
<grade degree="碩士班"
          defaults="3"
          listen-to-degree="demo-degree"></grade>
            
          

import { bus, events } from '../'

let event = events.changeDegree.withID('demo-degree')
// event = 'changeDegree:demo-degree'

bus.$on(event, function (data) {
  document.getElementById('demoCallback').textContent = data.degree.id
})
          

<department defaults="32060"
           :filtering="{
              college: '工學院',
              degree: '碩士班'
            }"
           :except="[32010, 32020, 32030, 32040]"></department>

<department defaults="32060"
            :filtering="{
              college: '工學院',
              degree: '碩士班'
            }"
            :only="[32060, 32080, 32090]">
            

<degree id="demo-degree"></degree>
<college id="demo-college"></college>
<department listen-to-degree="demo-degree"
            listen-to-college="demo-college"</department>
          

.ncu-unit {
    font-weight: 700;
}

.ncu-unit--degree {
  background-color: lightskyblue;
  color: dimgrey;
}

.ncu-unit--college {
    background-color: red;
    color: white;
}

.ncu-unit--department {
    background-color: yellow;
    color: brown;
}

.ncu-unit--grade {
    background-color: limegreen;
    color: purple;       
}
          

<degree defaults="博士班" locale="en"></degree>
<college defaults="工學院" locale="en"></college>
<department locale="en"
            defaults="34060"
            :filtering="{
                            college: '工學院',
                            degree: '博士班'
                          }"
            </department>
<grade degree="博士班" defaults="3" locale="en"</grade>
          

<trans type="degree" trans-id="博士班"></trans>
<trans type="degree" trans-id="博士班" locale="en"></trans>
<trans type="college" trans-id="工學院"></trans>
<trans type="college" trans-id="工學院" locale="en"></trans>
<trans type="department" trans-id="34060"></trans>
<trans type="department" trans-id="34060" locale="en"></trans>