Hello World!

Vue_Starter/src/components/Aside.vue

@@ -0,0 +1,11 @@
+<template>
+  <aside class="aside-menu">
+
+  </aside>
+</template>
+
+<script>
+export default {
+  name: 'aside'
+}
+</script>

Vue_Starter/src/components/Breadcrumb.vue

@@ -0,0 +1,33 @@
+<template>
+  <ol class="breadcrumb">
+    <li class="breadcrumb-item" v-for="(item, index) in list"><span class="active" v-if="isLast(index)">{{ showName(item) }}</span>
+      <router-link :to="item.path" v-else>{{ showName(item) }}</router-link>
+    </li>
+  </ol>
+</template>
+
+<script>
+export default {
+  props: {
+    list: {
+      type: Array,
+      required: true,
+      default: () => []
+    }
+  },
+  methods: {
+    isLast (index) {
+      return index === this.list.length - 1
+    },
+    showName (item) {
+      if (item.meta && item.meta.label) {
+        item = item.meta && item.meta.label
+      }
+      if (item.name) {
+        item = item.name
+      }
+      return item
+    }
+  }
+}
+</script>

Vue_Starter/src/components/Callout.vue

@@ -0,0 +1,26 @@
+<template>
+  <div :class="classList">
+    <slot></slot>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    variant: {
+      type: String
+    }
+  },
+  computed: {
+    classList () {
+      return [
+        'callout',
+        this.calloutVariant
+      ]
+    },
+    calloutVariant () {
+      return this.variant ? `callout-${this.variant}` : ''
+    }
+  }
+}
+</script>

Vue_Starter/src/components/Footer.vue

@@ -0,0 +1,11 @@
+<template>
+  <footer class="app-footer">
+    <a href="http://coreui.io">CoreUI</a> &copy; 2017 creativeLabs.
+    <span class="float-right">Powered by <a href="http://coreui.io">CoreUI</a></span>
+  </footer>
+</template>
+<script>
+export default {
+  name: 'footer'
+}
+</script>

Vue_Starter/src/components/Header.vue

@@ -0,0 +1,31 @@
+<template>
+  <header class="app-header navbar">
+    <button class="navbar-toggler mobile-sidebar-toggler d-lg-none" type="button" @click="mobileSidebarToggle">&#9776;</button>
+    <b-link class="navbar-brand" to="#"></b-link>
+    <button class="navbar-toggler sidebar-toggler d-md-down-none mr-auto" type="button" @click="sidebarMinimize">&#9776;</button>
+    <button class="navbar-toggler aside-menu-toggler d-md-down-none" type="button" @click="asideToggle">&#9776;</button>
+  </header>
+</template>
+<script>
+export default {
+  name: 'header',
+  methods: {
+    sidebarToggle (e) {
+      e.preventDefault()
+      document.body.classList.toggle('sidebar-hidden')
+    },
+    sidebarMinimize (e) {
+      e.preventDefault()
+      document.body.classList.toggle('sidebar-minimized')
+    },
+    mobileSidebarToggle (e) {
+      e.preventDefault()
+      document.body.classList.toggle('sidebar-mobile-show')
+    },
+    asideToggle (e) {
+      e.preventDefault()
+      document.body.classList.toggle('aside-menu-hidden')
+    }
+  }
+}
+</script>

Vue_Starter/src/components/Sidebar.vue

@@ -0,0 +1,74 @@
+<template>
+  <div class="sidebar">
+    <nav class="sidebar-nav">
+      <div slot="header"></div>
+      <ul class="nav">
+        <li class="nav-item" v-for="(item, index) in navItems">
+          <template v-if="item.title">
+            <SidebarNavTitle :name="item.name"/>
+          </template>
+          <template v-else-if="item.divider">
+            <li class="divider"></li>
+          </template>
+          <template v-else>
+            <template v-if="item.children">
+              <SidebarNavDropdown :name="item.name" :url="item.url" :icon="item.icon">
+                <template v-for="(child, index) in item.children">
+                  <template v-if="child.children">
+                    <SidebarNavDropdown :name="child.name" :url="child.url" :icon="child.icon">
+                      <li class="nav-item" v-for="(child, index) in item.children">
+                        <SidebarNavLink :name="child.name" :url="child.url" :icon="child.icon" :badge="child.badge"/>
+                      </li>
+                    </SidebarNavDropdown>
+                  </template>
+                  <template v-else>
+                    <li class="nav-item">
+                      <SidebarNavLink :name="child.name" :url="child.url" :icon="child.icon" :badge="child.badge"/>
+                    </li>
+                  </template>
+                </template>
+              </SidebarNavDropdown>
+            </template>
+            <template v-else>
+              <SidebarNavLink :name="item.name" :url="item.url" :icon="item.icon" :badge="item.badge"/>
+            </template>
+          </template>
+        </li>
+      </ul>
+      <slot></slot>
+      <div slot="footer"></div>
+    </nav>
+  </div>
+</template>
+<script>
+import SidebarNavDropdown from './SidebarNavDropdown'
+import SidebarNavLink from './SidebarNavLink'
+import SidebarNavTitle from './SidebarNavTitle'
+export default {
+  name: 'sidebar',
+  props: {
+    navItems: {
+      type: Array,
+      required: true,
+      default: () => []
+    }
+  },
+  components: {
+    SidebarNavDropdown,
+    SidebarNavLink,
+    SidebarNavTitle
+  },
+  methods: {
+    handleClick (e) {
+      e.preventDefault()
+      e.target.parentElement.classList.toggle('open')
+    }
+  }
+}
+</script>
+
+<style lang="css">
+  .nav-link {
+    cursor:pointer;
+  }
+</style>

Vue_Starter/src/components/SidebarNavDropdown.vue

@@ -0,0 +1,33 @@
+<template>
+  <router-link tag="li" class="nav-item nav-dropdown" :to="url" disabled>
+    <div class="nav-link nav-dropdown-toggle" @click="handleClick"><i :class="icon"></i> {{name}}</div>
+    <ul class="nav-dropdown-items">
+      <slot></slot>
+    </ul>
+  </router-link>
+</template>
+
+<script>
+export default {
+  props: {
+    name: {
+      type: String,
+      default: ''
+    },
+    url: {
+      type: String,
+      default: ''
+    },
+    icon: {
+      type: String,
+      default: ''
+    }
+  },
+  methods: {
+    handleClick (e) {
+      e.preventDefault()
+      e.target.parentElement.classList.toggle('open')
+    }
+  }
+}
+</script>

Vue_Starter/src/components/SidebarNavLink.vue

@@ -0,0 +1,29 @@
+<template>
+  <router-link :to="url" class="nav-link">
+    <i :class="icon"></i> {{name}}
+    <b-badge :variant="badge.variant">{{badge.text}}</b-badge>
+  </router-link>
+</template>
+
+<script>
+export default {
+  name: 'sidebar-nav-link',
+  props: {
+    name: {
+      type: String,
+      default: ''
+    },
+    url: {
+      type: String,
+      default: ''
+    },
+    icon: {
+      type: String,
+      default: ''
+    },
+    badge: {
+      default: ''
+    }
+  }
+}
+</script>

Vue_Starter/src/components/SidebarNavTitle.vue

@@ -0,0 +1,16 @@
+<template>
+  <li class="nav-title">
+    {{name}}
+  </li>
+</template>
+
+<script>
+export default {
+  props: {
+    name: {
+      type: String,
+      default: ''
+    }
+  }
+}
+</script>

Vue_Starter/src/components/Switch.vue

@@ -0,0 +1,94 @@
+<template>
+  <label :class="classList">
+    <input type="checkbox"
+           class="switch-input"
+           :value="value"
+           :checked="isChecked"
+           @change="handleChange">
+    <template v-if="isOn">
+      <span class="switch-label" :data-on="on" :data-off="off"></span>
+    </template>
+    <template v-else>
+      <span class="switch-label"></span>
+    </template>
+    <span class="switch-handle"></span>
+  </label>
+</template>
+
+<script>
+export default {
+  model: {
+    prop: 'checked',
+    event: 'change'
+  },
+  props: {
+    value: {
+      default: true
+    },
+    uncheckedValue: {
+      default: false
+    },
+    checked: {
+      default: false
+    },
+    type: {
+      type: String,
+      default: 'default'
+    },
+    variant: {
+      type: String,
+      default: ''
+    },
+    pill: {
+      type: Boolean,
+      default: false
+    },
+    on: {
+      type: String,
+      default: null
+    },
+    off: {
+      type: String,
+      default: null
+    },
+    size: {
+      type: String,
+      default: null
+    }
+  },
+  computed: {
+    classList () {
+      return [
+        'switch',
+        this.switchType,
+        this.switchVariant,
+        this.switchPill,
+        this.switchSize
+      ]
+    },
+    switchType () {
+      return this.type ? `switch-${this.type}` : `switch-default`
+    },
+    switchVariant () {
+      return this.variant ? `switch-${this.variant}` : `switch-secondary`
+    },
+    switchPill () {
+      return !this.pill ? null : `switch-pill`
+    },
+    switchSize () {
+      return this.size ? `switch-${this.size}` : ''
+    },
+    isChecked () {
+      return this.checked === this.value
+    },
+    isOn () {
+      return !this.on ? null : true
+    }
+  },
+  methods: {
+    handleChange ({ target: { checked } }) {
+      this.$emit('change', checked ? this.value : this.uncheckedValue)
+    }
+  }
+}
+</script>

Vue_Starter/src/components/index.js

@@ -0,0 +1,17 @@
+import Aside from './Aside.vue'
+import Breadcrumb from './Breadcrumb.vue'
+import Callout from './Callout.vue'
+import Footer from './Footer.vue'
+import Header from './Header.vue'
+import Sidebar from './Sidebar.vue'
+import Switch from './Switch.vue'
+
+export {
+  Aside,
+  Breadcrumb,
+  Callout,
+  Footer,
+  Header,
+  Sidebar,
+  Switch
+}