v1.0.0

2017-09-28 12:44:26 +02:00
parent 5271e28c36
commit 0a00ed0646
518 changed files with 492 additions and 163 deletions
@@ -12,6 +12,9 @@
  // Header options
  1. '.header-fixed'					- Fixed Header

+  // Brand options
+  1. '.brand-minimized'       - Minimized brand (Only symbol)
+
  // Sidebar options
  1. '.sidebar-fixed'					- Fixed Sidebar
  2. '.sidebar-hidden'				- Hidden Sidebar
@@ -1,7 +1,7 @@
 {
-  "name": "coreui-vue",
+  "name": "@coreui/vue",
  "version": "1.0.0",
-  "description": "Open Source Admin Template",
+  "description": "",
  "author": "Łukasz Holeczek <lukasz@holeczek.pl>",
  "private": true,
  "scripts": {
@@ -14,9 +14,10 @@
    "lint": "eslint --ext .js,.vue src test/unit/specs test/e2e/specs"
  },
  "dependencies": {
-    "bootstrap-vue": "1.0.0-beta.7",
+    "bootstrap-vue": "1.0.0-beta.9",
    "chart.js": "2.7.0",
    "font-awesome": "^4.7.0",
+    "is-url-external": "^1.0.3",
    "simple-line-icons": "^2.4.1",
    "vue": "2.4.4",
    "vue-chartjs": "2.8.7",
@@ -35,7 +36,7 @@
    "connect-history-api-fallback": "^1.3.0",
    "copy-webpack-plugin": "^4.0.1",
    "css-loader": "0.28.7",
-    "eslint": "4.7.1",
+    "eslint": "4.7.2",
    "eslint-friendly-formatter": "3.0.0",
    "eslint-loader": "1.9.0",
    "eslint-plugin-html": "3.2.2",
@@ -45,7 +46,7 @@
    "eslint-plugin-promise": "3.5.0",
    "eslint-plugin-standard": "3.0.1",
    "eventsource-polyfill": "^0.9.6",
-    "express": "4.15.4",
+    "express": "4.15.5",
    "extract-text-webpack-plugin": "3.0.0",
    "file-loader": "0.11.2",
    "friendly-errors-webpack-plugin": "1.6.1",
@@ -57,7 +58,7 @@
    "karma-coverage": "^1.1.1",
    "karma-mocha": "^1.3.0",
    "karma-phantomjs-launcher": "1.0.4",
-    "karma-phantomjs-shim": "^1.4.0",
+    "karma-phantomjs-shim": "^1.5.0",
    "karma-sinon-chai": "1.3.2",
    "karma-sourcemap-loader": "^0.3.7",
    "karma-spec-reporter": "0.0.31",
@@ -1,33 +1,17 @@
 // scss-lint:disable all
-@charset "UTF-8";
-
 .animated {
-  -webkit-animation-duration: 1s;
  animation-duration: 1s;
-  -webkit-animation-fill-mode: both;
-  animation-fill-mode: both;
+  // animation-fill-mode: both;
 }

 .animated.infinite {
-  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
 }

 .animated.hinge {
-  -webkit-animation-duration: 2s;
  animation-duration: 2s;
 }

-@-webkit-keyframes fadeIn {
-  from {
-    opacity: 0;
-  }
-
-  to {
-    opacity: 1;
-  }
-}
-
@keyframes fadeIn {
  from {
    opacity: 0;
@@ -39,6 +23,5 @@
 }

 .fadeIn {
-  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
 }
@@ -11,8 +11,8 @@
 app-dashboard,
 app-root {
  display: flex;
-  min-height: 100vh;
  flex-direction: column;
+  min-height: 100vh;
 }

 .app-header {
@@ -26,12 +26,12 @@ app-root {
 .app-body {
  display: flex;
  flex-direction: row;
-  overflow-x: hidden;
  flex-grow: 1;
+  overflow-x: hidden;

  .main {
-    min-width: 0;
    flex: 1;
+    min-width: 0;
  }

  .sidebar {
@@ -134,11 +134,6 @@ app-root {
  .sidebar-minimized {
    .sidebar {
      flex: 0 0 $sidebar-minimized-width;
-      .sidebar-header,
-      .sidebar-form,
-      .sidebar-footer {
-        display: none;
-      }
    }

    &.sidebar-hidden {
@@ -344,6 +339,10 @@ app-root {
    .nav {
      width: $mobile-sidebar-width !important;
    }
+
+    .sidebar-minimizer {
+      display: none;
+    }
  }

  .main, .app-footer {
@@ -1,7 +1,7 @@
 .app-header.navbar {
  position: relative;
-  height: $navbar-height;
  flex-direction: row;
+  height: $navbar-height;
  padding: 0;
  margin: 0;
  background-color: $navbar-bg;
@@ -101,3 +101,14 @@
 .navbar-divider {
  background-color: rgba(0,0,0,.075);
 }
+
+.brand-minimized {
+  .app-header.navbar {
+    .navbar-brand {
+      width: $navbar-brand-minimized-width;
+      background-color: $navbar-brand-minimized-bg;
+      background-image: $navbar-brand-minimized-logo;
+      background-size: $navbar-brand-minimized-logo-size;
+    }
+  }
+}
@@ -78,7 +78,8 @@

  .nav {
    @include sidebar-width($sidebar-borders, $sidebar-width);
-    flex-direction: column !important;
+    flex-direction: column;
+    min-height: 100%;
  }

  .nav-title {
@@ -148,8 +149,8 @@
    }

    &:hover {
-      color: $sidebar-nav-link-hover-color !important;
-      background: $sidebar-nav-link-hover-bg !important;
+      color: $sidebar-nav-link-hover-color;
+      background: $sidebar-nav-link-hover-bg;
      @include borders($sidebar-nav-link-hover-borders);

      i {
@@ -160,6 +161,21 @@
        background-image: $sidebar-nav-dropdown-indicator-hover;
      }
    }
+
+    @each $color, $value in $theme-colors {
+      &.nav-link-#{$color} {
+        background: $value;
+        i {
+          color: rgba(255,255,255,.7);
+        }
+        &:hover {
+          background: darken($value,5%) !important;
+          i {
+            color: #fff;
+          }
+        }
+      }
+    }
  }

  //  ex. <a class="nav-link nav-dropdown-toggle" href="#">Components</a>
@@ -239,6 +255,39 @@
    padding: $sidebar-footer-padding-y $sidebar-footer-padding-x;
    background: $sidebar-footer-bg;
  }
+
+  .sidebar-minimizer {
+    position: relative;
+    flex: 0 0 $sidebar-minimizer-height;
+    background-color: $sidebar-minimizer-bg;
+    border: 0;
+
+    &::before {
+      position: absolute;
+      top: 0;
+      right: 0;
+      width: $sidebar-minimizer-height;
+      height: $sidebar-minimizer-height;
+      content: "";
+      background-image: $sidebar-minimizer-indicator;
+      background-repeat: no-repeat;
+      background-position: center;
+      background-size: $sidebar-minimizer-height / 4;
+      transition: .3s;
+    }
+
+    &:focus,
+    &.focus {
+      outline: 0;
+    }
+
+    &:hover {
+      background-color: $sidebar-minimizer-hover-bg;
+      &::before {
+        background-image: $sidebar-minimizer-hover-indicator;
+      }
+    }
+  }
 }

@include media-breakpoint-up(lg) {
@@ -312,6 +361,11 @@
        display: none;
      }

+      .sidebar-minimizer::before {
+        width: 100%;
+        transform: rotate(-180deg);
+      }
+
      .nav-item {
        width: $sidebar-minimized-width;
        overflow: hidden;
@@ -1,3 +1,4 @@
+// scss-lint:disable all
 // Core Admin Variables

 $enable-sidebar-nav-rounded:          false !default;
@@ -57,6 +58,11 @@ $navbar-brand-border: (
  )
 ) !default;

+$navbar-brand-minimized-width:        50px !default
+$navbar-brand-minimized-bg:           #fff !default;
+$navbar-brand-minimized-logo:         url('../img/logo-symbol.png') !default;
+$navbar-brand-minimized-logo-size:    24px !default;
+
 $navbar-color:                        $gray-600 !default;
 $navbar-hover-color:                  $gray-800 !default;
 $navbar-active-color:                 $gray-800 !default;
@@ -127,6 +133,17 @@ $sidebar-footer-bg:                   rgba(0,0,0,.2) !default;
 $sidebar-footer-padding-y:            .75rem !default;
 $sidebar-footer-padding-x:            1rem !default;

+// Sidebar Minimizer
+
+$sidebar-minimizer-height:            50px !default;
+$sidebar-minimizer-bg:                rgba(0,0,0,.2) !default;
+$sidebar-minimizer-indicator-color:   $gray-600 !default;
+$sidebar-minimizer-indicator:         str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 14'%3E%3Cpath fill='#{$sidebar-minimizer-indicator-color}' d='M9.148 2.352l-4.148 4.148 4.148 4.148q0.148 0.148 0.148 0.352t-0.148 0.352l-1.297 1.297q-0.148 0.148-0.352 0.148t-0.352-0.148l-5.797-5.797q-0.148-0.148-0.148-0.352t0.148-0.352l5.797-5.797q0.148-0.148 0.352-0.148t0.352 0.148l1.297 1.297q0.148 0.148 0.148 0.352t-0.148 0.352z'/%3E%3C/svg%3E"), "#", "%23") !default;
+$sidebar-minimizer-hover-bg:          rgba(0,0,0,.3) !default;
+$sidebar-minimizer-hover-indicator-color:$sidebar-nav-link-hover-color !default;
+$sidebar-minimizer-hover-indicator:   str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 14'%3E%3Cpath fill='#{$sidebar-minimizer-hover-indicator-color}' d='M9.148 2.352l-4.148 4.148 4.148 4.148q0.148 0.148 0.148 0.352t-0.148 0.352l-1.297 1.297q-0.148 0.148-0.352 0.148t-0.352-0.148l-5.797-5.797q-0.148-0.148-0.148-0.352t0.148-0.352l5.797-5.797q0.148-0.148 0.352-0.148t0.352 0.148l1.297 1.297q0.148 0.148 0.148 0.352t-0.148 0.352z'/%3E%3C/svg%3E"), "#", "%23") !default;
+
+
 // Top Navigation

 $top-nav-bg:                          #fff !default;
@@ -1,4 +1,4 @@
-/**
+/*!
 * CoreUI - Open Source Bootstrap Admin Template
 * @version v1.0.0
 * @link http://coreui.io
@@ -128,6 +128,19 @@ export default {
          icon: 'icon-star'
        }
      ]
+    },
+    {
+      name: 'Download CoreUI',
+      url: 'http://coreui.io/vue/',
+      icon: 'icon-cloud-download',
+      class: 'mt-auto',
+      variant: 'success'
+    },
+    {
+      name: 'Try CoreUI PRO',
+      url: 'http://coreui.io/pro/vue/',
+      icon: 'icon-layers',
+      variant: 'danger'
    }
  ]
 }
@@ -2,7 +2,7 @@
  <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" type="button" @click="sidebarMinimize">&#9776;</button>
+    <button class="navbar-toggler sidebar-toggler d-md-down-none" type="button" @click="sidebarToggle">&#9776;</button>
    <b-nav is-nav-bar class="d-md-down-none">
      <b-nav-item class="px-3">Dashboard</b-nav-item>
      <b-nav-item class="px-3">Users</b-nav-item>
@@ -21,22 +21,22 @@
                    <!-- Second level dropdown -->
                    <SidebarNavDropdown :name="childL1.name" :url="childL1.url" :icon="childL1.icon">
                      <li class="nav-item" v-for="(childL2, index) in childL1.children">
-                        <SidebarNavLink :name="childL2.name" :url="childL2.url" :icon="childL2.icon" :badge="childL2.badge"/>
+                        <SidebarNavLink :name="childL2.name" :url="childL2.url" :icon="childL2.icon" :badge="childL2.badge" :variant="item.variant"/>
                      </li>
                    </SidebarNavDropdown>
                  </template>
                  <template v-else>
-                    <li class="nav-item">
-                      <SidebarNavLink :name="childL1.name" :url="childL1.url" :icon="childL1.icon" :badge="childL1.badge"/>
-                    </li>
+                    <SidebarNavItem :classes="item.class">
+                      <SidebarNavLink :name="childL1.name" :url="childL1.url" :icon="childL1.icon" :badge="childL1.badge" :variant="item.variant"/>
+                    </SidebarNavItem>
                  </template>
                </template>
              </SidebarNavDropdown>
            </template>
            <template v-else>
-              <li class="nav-item">
-                <SidebarNavLink :name="item.name" :url="item.url" :icon="item.icon" :badge="item.badge"/>
-              </li>
+              <SidebarNavItem :classes="item.class">
+                <SidebarNavLink :name="item.name" :url="item.url" :icon="item.icon" :badge="item.badge" :variant="item.variant"/>
+              </SidebarNavItem>
            </template>
          </template>
        </template>
@@ -44,15 +44,18 @@
      <slot></slot>
    </nav>
    <SidebarFooter/>
+    <SidebarMinimizer/>
  </div>
 </template>
 <script>
 import SidebarFooter from './SidebarFooter'
 import SidebarForm from './SidebarForm'
 import SidebarHeader from './SidebarHeader'
+import SidebarMinimizer from './SidebarMinimizer'
 import SidebarNavDropdown from './SidebarNavDropdown'
 import SidebarNavLink from './SidebarNavLink'
 import SidebarNavTitle from './SidebarNavTitle'
+import SidebarNavItem from './SidebarNavItem'
 export default {
  name: 'sidebar',
  props: {
@@ -66,9 +69,11 @@ export default {
    SidebarFooter,
    SidebarForm,
    SidebarHeader,
+    SidebarMinimizer,
    SidebarNavDropdown,
    SidebarNavLink,
-    SidebarNavTitle
+    SidebarNavTitle,
+    SidebarNavItem
  },
  methods: {
    handleClick (e) {
@@ -0,0 +1,17 @@
+<template>
+  <button class="sidebar-minimizer" type="button" @click="sidebarMinimize();brandMinimize()"></button>
+</template>
+<script>
+
+export default {
+  name: 'sidebar-minimizer',
+  methods: {
+    sidebarMinimize () {
+      document.body.classList.toggle('sidebar-minimized')
+    },
+    brandMinimize () {
+      document.body.classList.toggle('brand-minimized')
+    }
+  }
+}
+</script>
@@ -0,0 +1,28 @@
+<template>
+  <li :class="classList">
+    <slot></slot>
+  </li>
+</template>
+
+<script>
+  export default {
+    name: 'sidebar-nav-item',
+    props: {
+      classes: {
+        type: String,
+        default: ''
+      }
+    },
+    computed: {
+      classList () {
+        return [
+          'nav-item',
+          ...this.itemClasses
+        ]
+      },
+      itemClasses () {
+        return this.classes ? this.classes.split(' ') : ''
+      }
+    }
+  }
+</script>
@@ -1,29 +1,58 @@
 <template>
-  <router-link :to="url" class="nav-link">
-    <i :class="icon"></i> {{name}}
-    <b-badge v-if="badge.text" :variant="badge.variant">{{badge.text}}</b-badge>
-  </router-link>
+  <div v-if="linkExternal">
+    <a :href="url" :class="classList">
+      <i :class="icon"></i> {{name}}
+      <b-badge v-if="badge && badge.text" :variant="badge.variant">{{badge.text}}</b-badge>
+    </a>
+  </div>
+  <div v-else>
+    <router-link :to="url" :class="classList">
+      <i :class="icon"></i> {{name}}
+      <b-badge v-if="badge && badge.text" :variant="badge.variant">{{badge.text}}</b-badge>
+    </router-link>
+  </div>
 </template>

 <script>
-export default {
-  name: 'sidebar-nav-link',
-  props: {
-    name: {
-      type: String,
-      default: ''
+  import isExternal from 'is-url-external'
+
+  export default {
+    name: 'sidebar-nav-link',
+    props: {
+      name: {
+        type: String,
+        default: ''
+      },
+      url: {
+        type: String,
+        default: ''
+      },
+      icon: {
+        type: String,
+        default: ''
+      },
+      badge: {
+        type: Object,
+        default: () => {}
+      },
+      variant: {
+        type: String,
+        default: ''
+      }
    },
-    url: {
-      type: String,
-      default: ''
-    },
-    icon: {
-      type: String,
-      default: ''
-    },
-    badge: {
-      default: ''
+    computed: {
+      classList () {
+        return [
+          'nav-link',
+          this.linkVariant
+        ]
+      },
+      linkVariant () {
+        return this.variant ? `nav-link-${this.variant}` : ''
+      },
+      linkExternal () {
+        return isExternal(this.url)
+      }
    }
  }
-}
 </script>
@@ -1,5 +1,5 @@
 <template>
-  <li class="nav-title" v-bind:class="classes">
+  <li :class="classList">
    <template v-if="wrapper && wrapper.element">
      <component v-bind:is="wrapper.element" v-bind="wrapper.attributes">
        {{name}}
@@ -12,20 +12,31 @@
 </template>

 <script>
-export default {
-  props: {
-    name: {
-      type: String,
-      default: ''
+  export default {
+    props: {
+      name: {
+        type: String,
+        default: ''
+      },
+      classes: {
+        type: String,
+        default: ''
+      },
+      wrapper: {
+        type: Object,
+        default: () => {}
+      }
    },
-    classes: {
-      type: String,
-      default: ''
-    },
-    wrapper: {
-      type: Object,
-      default: () => {}
+    computed: {
+      classList () {
+        return [
+          'nav-title',
+          ...this.itemClasses
+        ]
+      },
+      itemClasses () {
+        return this.classes ? this.classes.split(' ') : ''
+      }
    }
  }
-}
 </script>
--- a/Show More
+++ b/Show More