refactor: components, containers
This commit is contained in:
xidedix
+24
-60
@@ -1,64 +1,28 @@
|
||||
## [vue](./README.md) version `changelog`
|
||||
|
||||
##### `v1.0.10`
|
||||
- fix: `className` -> `class`
|
||||
- refactor: `<b-input-group-prepend>`
|
||||
- refactor: `<b-input-group-append>`
|
||||
- refactor: `<b-input-group-text>`
|
||||
- refactor: remove `<b-input-group-button>`
|
||||
- test: initial `Dashboard` unit test added
|
||||
- update: bootstrap-vue to `2.0.0-rc.1`
|
||||
- chore: dependencies update
|
||||
##### `v2.0.0-alpha.0`
|
||||
- refactor: separation of concerns - (CoreUI template vs CoreUI components) prepare to use CoreUI as dependency
|
||||
- refactor: project structure change
|
||||
- refactor: moved to [vuejs-templates](http://vuejs-templates.github.io/webpack/)
|
||||
- chore: moved to [Semantic Versioning](https://semver.org/)
|
||||
- refactor: move to [CoreUI-Vue](https://github.com/coreui/coreui-vue) components `v2`
|
||||
- refactor: rename containers
|
||||
- refactor(Colors): view layout, sub-components
|
||||
- refactor(Switches): move to `Switch component v2`
|
||||
|
||||
###### `v1.0.9`
|
||||
- refactor: Sidebar structure
|
||||
- test: initial e2e test added
|
||||
- chore: dependencies update
|
||||
|
||||
###### `v1.0.8`
|
||||
- update: vue to `2.5.13`
|
||||
- update: Bootstrap to `4.0.0-beta.3`
|
||||
- update: bootstrap-vue to `1.4.0`
|
||||
- chore: dependencies update
|
||||
- refactor: `<b-table>` use the prop `responsive="sm"` instead of `class="table-responsive-sm"`
|
||||
- fix: `Vue warn:` Do not use built-in or reserved HTML elements as component id: (header, aside, footer, table)
|
||||
- feature: some Bootstrap4 components added
|
||||
- temp tweaks(b4 beta3): `InputGroupAddon` and `InputGroupButton`
|
||||
- refactor(checkboxes, radios, labels): temp tweaks
|
||||
- feat: mobile sidebar link click closes the sidebar [#18](https://github.com/mrholek/CoreUI-Vue/pull/18)
|
||||
|
||||
###### `v1.0.6`
|
||||
- refactor: raw html to `b-row`, `b-col`, `b-card`, `b-button` components
|
||||
- fix: Cards.vue: change `variant="accent-` to `class="card-accent-`
|
||||
- refactor: Modal's ok-button variants
|
||||
- refactor: forms with validation feedback
|
||||
- update: bootstrap-vue to `1.1.0`
|
||||
- update: to vue: `2.5.6`
|
||||
|
||||
###### `v1.0.5`
|
||||
- update: bootstrap-vue to `1.0.x`
|
||||
- fix: use `<b-form-radio-group>` instead of `<b-form-radio>` **[breaking change](https://bootstrap-vue.js.org/docs/components/form-radios)** :fire:
|
||||
- refactor: `<b-table>` bootstrap-vue component in `Tables` #24
|
||||
- refactor: extract `Table` component from `Tables`
|
||||
- refactor: `<b-table>` bootstrap-vue component in `Switches` #24
|
||||
- fix: add `table-responsive-sm` class to `Tables` #26
|
||||
- refactor: use component `<b-navbar-nav>` instead of deprecated prop `is-nav-bar`
|
||||
- fix: `b-progress` `height` property workaround (bootstrap-vue)
|
||||
- chore: dependencies update
|
||||
|
||||
###### `v1.0.4`
|
||||
- refactor: import Bootstrap 4 SCSS files from node_modules
|
||||
- fix: callouts styles
|
||||
|
||||
###### `v1.0.3`
|
||||
- update: Bootstrap version to `4.0.0-beta.2`
|
||||
- update: vue-chartjs to `3.0.0` **[breaking change](https://github.com/apertureless/vue-chartjs/releases/tag/v3.0.0)** :fire:
|
||||
|
||||
###### `v1.0.2`
|
||||
- update: to vue: `^2.5.x`
|
||||
- update: bootstrap-vue to `1.0.0-beta.9`
|
||||
- refactor: (vue `v2.5.x`) deprecated `<template scope="props">` replace with `<div slot-scope="props">`
|
||||
- refactor: `HeaderDropdown` component added to `Header`
|
||||
- refactor: `b-badge` component added (bootstrap-vue)
|
||||
- chore: `package.json` project dependencies update
|
||||
other:
|
||||
|
||||
- feat: app-footer fixed
|
||||
- refactor(dashboard): brand-card, progress-group-bars
|
||||
- refactor(social-box-chart-example): props
|
||||
- feat(forms): new `<b-form-input type="date">` example added
|
||||
- refactor(cards): Card outline, Card accent - title variants added
|
||||
- feat: card-header-actions
|
||||
- feat(_nav): Navbars example added
|
||||
- update: vuejs-templates/webpack to v1.3.1
|
||||
- fix: eslint `valid template root`
|
||||
- refactor: card header title spacing
|
||||
- refactor: btn-brand
|
||||
- test(e2e): update
|
||||
- refactor: sidebar
|
||||
- refactor: chart examples
|
||||
|
||||
+28
-25
@@ -1,5 +1,5 @@
|
||||
{
|
||||
"name": "@coreui/vue",
|
||||
"name": "@coreui/coreui-free-vue-admin-template",
|
||||
"version": "2.0.0-alpha.0",
|
||||
"description": "Open Source Bootstrap Admin Template",
|
||||
"author": "Łukasz Holeczek",
|
||||
@@ -18,9 +18,12 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@coreui/coreui": "^2.0.1",
|
||||
"@coreui/vue": "^2.0.0-alpha.0",
|
||||
"bootstrap": "^4.1.1",
|
||||
"bootstrap-vue": "^2.0.0-rc.9",
|
||||
"bootstrap-vue": "^2.0.0-rc.11",
|
||||
"chart.js": "^2.7.2",
|
||||
"core-js": "^2.5.6",
|
||||
"css-vars-ponyfill": "^1.7.2",
|
||||
"flag-icon-css": "^3.0.0",
|
||||
"font-awesome": "^4.7.0",
|
||||
"perfect-scrollbar": "^1.3.0",
|
||||
@@ -31,30 +34,30 @@
|
||||
"vue-router": "^3.0.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"autoprefixer": "7.2.5",
|
||||
"babel-core": "^6.26.0",
|
||||
"babel-eslint": "^8.2.2",
|
||||
"autoprefixer": "^8.5.0",
|
||||
"babel-core": "^6.26.3",
|
||||
"babel-eslint": "^8.2.3",
|
||||
"babel-helper-vue-jsx-merge-props": "^2.0.3",
|
||||
"babel-loader": "^7.1.4",
|
||||
"babel-plugin-istanbul": "^4.1.6",
|
||||
"babel-plugin-syntax-jsx": "^6.18.0",
|
||||
"babel-plugin-transform-runtime": "^6.23.0",
|
||||
"babel-plugin-transform-vue-jsx": "^3.7.0",
|
||||
"babel-preset-env": "^1.6.1",
|
||||
"babel-preset-env": "^1.7.0",
|
||||
"babel-preset-stage-2": "^6.24.1",
|
||||
"babel-register": "^6.26.0",
|
||||
"chai": "^4.1.2",
|
||||
"chalk": "^2.3.2",
|
||||
"chromedriver": "^2.37.0",
|
||||
"copy-webpack-plugin": "^4.3.1",
|
||||
"cross-env": "^5.1.4",
|
||||
"chalk": "^2.4.1",
|
||||
"chromedriver": "^2.38.3",
|
||||
"copy-webpack-plugin": "^4.5.1",
|
||||
"cross-env": "^5.1.5",
|
||||
"cross-spawn": "^6.0.5",
|
||||
"css-loader": "^0.28.11",
|
||||
"eslint": "^4.19.1",
|
||||
"eslint-config-standard": "^11.0.0",
|
||||
"eslint-friendly-formatter": "^3.0.0",
|
||||
"eslint-loader": "^2.0.0",
|
||||
"eslint-plugin-import": "^2.10.0",
|
||||
"eslint-plugin-import": "^2.12.0",
|
||||
"eslint-plugin-node": "^6.0.1",
|
||||
"eslint-plugin-promise": "^3.6.0",
|
||||
"eslint-plugin-standard": "^3.0.1",
|
||||
@@ -64,40 +67,40 @@
|
||||
"friendly-errors-webpack-plugin": "^1.7.0",
|
||||
"html-webpack-plugin": "^2.30.1",
|
||||
"inject-loader": "^3.0.1",
|
||||
"karma": "^2.0.0",
|
||||
"karma-coverage": "^1.1.1",
|
||||
"karma": "^2.0.2",
|
||||
"karma-coverage": "^1.1.2",
|
||||
"karma-mocha": "^1.3.0",
|
||||
"karma-phantomjs-launcher": "^1.0.4",
|
||||
"karma-phantomjs-shim": "^1.5.0",
|
||||
"karma-sinon-chai": "^1.3.3",
|
||||
"karma-sinon-chai": "^1.3.4",
|
||||
"karma-sourcemap-loader": "^0.3.7",
|
||||
"karma-spec-reporter": "^0.0.32",
|
||||
"karma-webpack": "^2.0.9",
|
||||
"mocha": "^5.0.5",
|
||||
"nightwatch": "0.9.20",
|
||||
"mocha": "^5.2.0",
|
||||
"nightwatch": "^1.0.6",
|
||||
"node-notifier": "^5.1.2",
|
||||
"node-sass": "^4.8.3",
|
||||
"node-sass": "^4.9.0",
|
||||
"optimize-css-assets-webpack-plugin": "^3.2.0",
|
||||
"ora": "^2.0.0",
|
||||
"ora": "^2.1.0",
|
||||
"phantomjs-prebuilt": "^2.1.16",
|
||||
"portfinder": "^1.0.13",
|
||||
"postcss-import": "^11.1.0",
|
||||
"postcss-loader": "^2.1.3",
|
||||
"postcss-loader": "^2.1.5",
|
||||
"postcss-url": "^7.3.2",
|
||||
"rimraf": "^2.6.2",
|
||||
"sass-loader": "^6.0.7",
|
||||
"selenium-server": "3.11.0",
|
||||
"selenium-server": "^3.12.0",
|
||||
"semver": "^5.5.0",
|
||||
"shelljs": "^0.8.1",
|
||||
"shelljs": "^0.8.2",
|
||||
"sinon": "^4.5.0",
|
||||
"sinon-chai": "^2.14.0",
|
||||
"uglifyjs-webpack-plugin": "^1.1.1",
|
||||
"uglifyjs-webpack-plugin": "^1.2.5",
|
||||
"url-loader": "^1.0.1",
|
||||
"vue-loader": "^14.2.2",
|
||||
"vue-style-loader": "^4.1.0",
|
||||
"vue-template-compiler": "^2.5.16",
|
||||
"webpack": "^3.6.0",
|
||||
"webpack-bundle-analyzer": "^2.11.1",
|
||||
"webpack": "^3.12.0",
|
||||
"webpack-bundle-analyzer": "^2.13.0",
|
||||
"webpack-dev-server": "^2.11.2",
|
||||
"webpack-merge": "^4.1.2"
|
||||
},
|
||||
@@ -108,6 +111,6 @@
|
||||
"browserslist": [
|
||||
"> 1%",
|
||||
"last 2 versions",
|
||||
"not ie <= 8"
|
||||
"not ie <= 9"
|
||||
]
|
||||
}
|
||||
|
||||
@@ -1,48 +0,0 @@
|
||||
<template>
|
||||
<aside class="aside-menu">
|
||||
<slot>Aside</slot>
|
||||
</aside>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// import { asideMenuCssClasses, validBreakpoints, checkBreakpoint } from '../../shared/classes'
|
||||
|
||||
export default {
|
||||
name: 'AppAside',
|
||||
props: {
|
||||
fixed: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
display: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
offCanvas: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
}
|
||||
},
|
||||
mounted: function () {
|
||||
this.isFixed(this.fixed)
|
||||
this.isOffCanvas(this.offCanvas)
|
||||
// this.displayBreakpoint(this.display)
|
||||
},
|
||||
methods: {
|
||||
isFixed (fixed) {
|
||||
fixed ? document.body.classList.add('aside-menu-fixed') : document.body.classList.remove('aside-menu-fixed')
|
||||
return fixed
|
||||
},
|
||||
isOffCanvas (offCanvas) {
|
||||
offCanvas ? document.body.classList.add('aside-menu-off-canvas') : document.body.classList.remove('aside-menu-off-canvas')
|
||||
}
|
||||
// displayBreakpoint (display) {
|
||||
// let cssClass = asideMenuCssClasses[0]
|
||||
// if (display && checkBreakpoint(display, validBreakpoints)) {
|
||||
// cssClass = `aside-menu-${display}-show`
|
||||
// }
|
||||
// document.body.classList.add(cssClass)
|
||||
// }
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,55 +0,0 @@
|
||||
<template>
|
||||
<button
|
||||
:display="display"
|
||||
:mobile="mobile"
|
||||
:class="classList"
|
||||
type="button"
|
||||
@click="asideToggle">
|
||||
<span class="navbar-toggler-icon" />
|
||||
</button>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { asideMenuCssClasses, validBreakpoints, checkBreakpoint } from '../../shared/classes'
|
||||
import toggleClasses from '../../shared/toggle-classes'
|
||||
|
||||
export default {
|
||||
name: 'AsideToggler',
|
||||
props: {
|
||||
mobile: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
display: {
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
classList () {
|
||||
return [
|
||||
'navbar-toggler'
|
||||
// 'd-none',
|
||||
// 'd-lg-inline-block'
|
||||
]
|
||||
}
|
||||
},
|
||||
mounted: function () {
|
||||
// this.toggle()
|
||||
},
|
||||
methods: {
|
||||
toggle () {
|
||||
const [display, mobile] = [this.display, this.mobile]
|
||||
let cssClass = asideMenuCssClasses[0]
|
||||
if (!mobile && display && checkBreakpoint(display, validBreakpoints)) {
|
||||
cssClass = `aside-menu-${display}-show`
|
||||
}
|
||||
toggleClasses(cssClass, asideMenuCssClasses)
|
||||
},
|
||||
asideToggle (e) {
|
||||
e.preventDefault()
|
||||
this.toggle()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,7 +0,0 @@
|
||||
import Aside from './Aside'
|
||||
import AsideToggler from './AsideToggler'
|
||||
|
||||
export {
|
||||
Aside,
|
||||
AsideToggler
|
||||
}
|
||||
@@ -1,34 +0,0 @@
|
||||
<template>
|
||||
<ol class="breadcrumb">
|
||||
<li class="breadcrumb-item" :key="index" v-for="(item, index) in list">
|
||||
<span class="active" v-if="isLast(index)">{{ showName(item) }}</span>
|
||||
<router-link :to="item" 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>
|
||||
@@ -1,27 +0,0 @@
|
||||
<template>
|
||||
<div :class="classList">
|
||||
<slot>Callout</slot>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
variant: {
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
classList () {
|
||||
return [
|
||||
'callout',
|
||||
this.calloutVariant
|
||||
]
|
||||
},
|
||||
calloutVariant () {
|
||||
return this.variant ? `callout-${this.variant}` : ''
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,41 +0,0 @@
|
||||
<template>
|
||||
<footer :class="classList">
|
||||
<slot>
|
||||
<div>
|
||||
<a href="https://coreui.io">CoreUI</a>
|
||||
<span>© 2018 creativeLabs.</span>
|
||||
</div>
|
||||
<div class="ml-auto">
|
||||
<span>Powered by</span>
|
||||
<a href="https://coreui.io">CoreUI for Vue</a>
|
||||
</div>
|
||||
</slot>
|
||||
</footer>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'AppFooter',
|
||||
props: {
|
||||
fixed: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
mounted: function () {
|
||||
this.isFixed()
|
||||
},
|
||||
computed: {
|
||||
classList () {
|
||||
return [
|
||||
'app-footer'
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
isFixed () {
|
||||
this.fixed ? document.body.classList.add('footer-fixed') : document.body.classList.remove('footer-fixed')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,35 +0,0 @@
|
||||
<template>
|
||||
<header
|
||||
:class="classList">
|
||||
<slot>Header</slot>
|
||||
</header>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'AppHeader',
|
||||
props: {
|
||||
fixed: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
classList () {
|
||||
return [
|
||||
'app-header',
|
||||
'navbar'
|
||||
]
|
||||
}
|
||||
},
|
||||
mounted: function () {
|
||||
this.isFixed(this.fixed)
|
||||
},
|
||||
methods: {
|
||||
isFixed (fixed) {
|
||||
fixed ? document.body.classList.add('header-fixed') : document.body.classList.remove('header-fixed')
|
||||
return fixed
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,33 +0,0 @@
|
||||
<template>
|
||||
<b-nav-item-dropdown :right="right" :no-caret="noCaret">
|
||||
<template slot="button-content">
|
||||
<slot name="button-content">
|
||||
<img
|
||||
src="static/img/avatars/6.jpg"
|
||||
class="img-avatar"
|
||||
alt="admin@bootstrapmaster.com" />
|
||||
</slot>
|
||||
</template>
|
||||
<slot>
|
||||
<div :style="{ right: 'auto', height: '400px' }">dropdown</div>
|
||||
</slot>
|
||||
</b-nav-item-dropdown>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: 'HeaderDropdown',
|
||||
props: {
|
||||
right: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
noCaret: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
data: () => {
|
||||
return { itemsCount: 42 }
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,7 +0,0 @@
|
||||
import Header from './Header'
|
||||
import HeaderDropdown from './HeaderDropdown'
|
||||
|
||||
export {
|
||||
Header,
|
||||
HeaderDropdown
|
||||
}
|
||||
@@ -1,25 +0,0 @@
|
||||
<template>
|
||||
<div class="sidebar">
|
||||
<slot>Sidebar</slot>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: 'sidebar',
|
||||
props: {
|
||||
fixed: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
mounted: function () {
|
||||
this.isFixed()
|
||||
},
|
||||
methods: {
|
||||
isFixed () {
|
||||
this.fixed ? document.body.classList.add('sidebar-fixed') : document.body.classList.remove('sidebar-fixed')
|
||||
return this.fixed
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,11 +0,0 @@
|
||||
/* eslint-disable */
|
||||
<template>
|
||||
<div></div>
|
||||
<!--<div class="sidebar-footer"></div>-->
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'sidebar-footer'
|
||||
}
|
||||
</script>
|
||||
@@ -1,11 +0,0 @@
|
||||
/* eslint-disable */
|
||||
<template>
|
||||
<div></div>
|
||||
<!-- <div class="sidebar-form"></div> -->
|
||||
</template>
|
||||
<script>
|
||||
|
||||
export default {
|
||||
name: 'sidebar-form'
|
||||
}
|
||||
</script>
|
||||
@@ -1,11 +0,0 @@
|
||||
/* eslint-disable */
|
||||
<template>
|
||||
<div></div>
|
||||
<!-- <div class="sidebar-header"></div> -->
|
||||
</template>
|
||||
<script>
|
||||
|
||||
export default {
|
||||
name: 'sidebar-header'
|
||||
}
|
||||
</script>
|
||||
@@ -1,17 +0,0 @@
|
||||
<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>
|
||||
@@ -1,97 +0,0 @@
|
||||
<template>
|
||||
<nav class="sidebar-nav">
|
||||
<VuePerfectScrollbar class="scroll-area" :settings="psSettings" @ps-scroll-y="scrollHandle">
|
||||
<ul class="nav">
|
||||
<template v-for="(item, index) in navItems">
|
||||
<template v-if="item.title">
|
||||
<SidebarNavTitle :key="index" :name="item.name" :classes="item.class" :wrapper="item.wrapper"/>
|
||||
</template>
|
||||
<template v-else-if="item.divider">
|
||||
<SidebarNavDivider :key="index" :classes="item.class"/>
|
||||
</template>
|
||||
<template v-else-if="item.label">
|
||||
<SidebarNavLabel :key="index" :name="item.name" :url="item.url" :icon="item.icon" :label="item.label" :classes="item.class"/>
|
||||
</template>
|
||||
<template v-else>
|
||||
<template v-if="item.children">
|
||||
<!-- First level dropdown -->
|
||||
<SidebarNavDropdown :key="index" :name="item.name" :url="item.url" :icon="item.icon">
|
||||
<template v-for="(childL1, index1) in item.children">
|
||||
<template v-if="childL1.children">
|
||||
<!-- Second level dropdown -->
|
||||
<SidebarNavDropdown :key="index1" :name="childL1.name" :url="childL1.url" :icon="childL1.icon">
|
||||
<li :key="index2" class="nav-item" v-for="(childL2, index2) in childL1.children">
|
||||
<SidebarNavLink :name="childL2.name" :url="childL2.url" :icon="childL2.icon" :badge="childL2.badge" :variant="item.variant"/>
|
||||
</li>
|
||||
</SidebarNavDropdown>
|
||||
</template>
|
||||
<template v-else>
|
||||
<SidebarNavItem :key="index1" :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>
|
||||
<SidebarNavItem :key="index" :classes="item.class">
|
||||
<SidebarNavLink :name="item.name" :url="item.url" :icon="item.icon" :badge="item.badge" :variant="item.variant"/>
|
||||
</SidebarNavItem>
|
||||
</template>
|
||||
</template>
|
||||
</template>
|
||||
</ul>
|
||||
<slot></slot>
|
||||
</VuePerfectScrollbar>
|
||||
</nav>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import SidebarNavDivider from './SidebarNavDivider'
|
||||
import SidebarNavDropdown from './SidebarNavDropdown'
|
||||
import SidebarNavLink from './SidebarNavLink'
|
||||
import SidebarNavTitle from './SidebarNavTitle'
|
||||
import SidebarNavItem from './SidebarNavItem'
|
||||
import SidebarNavLabel from './SidebarNavLabel'
|
||||
import VuePerfectScrollbar from 'vue-perfect-scrollbar'
|
||||
|
||||
export default {
|
||||
name: 'SidebarNav',
|
||||
props: {
|
||||
navItems: {
|
||||
type: Array,
|
||||
required: true,
|
||||
default: () => []
|
||||
}
|
||||
},
|
||||
components: {
|
||||
SidebarNavDivider,
|
||||
SidebarNavDropdown,
|
||||
SidebarNavLink,
|
||||
SidebarNavTitle,
|
||||
SidebarNavItem,
|
||||
SidebarNavLabel,
|
||||
VuePerfectScrollbar
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
psSettings: {
|
||||
maxScrollbarLength: 200
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
scrollHandle (evt) {
|
||||
// console.log(evt)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="css">
|
||||
.scroll-area {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
margin: auto;
|
||||
}
|
||||
</style>
|
||||
@@ -1,26 +0,0 @@
|
||||
<template>
|
||||
<li :class="classList"></li>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'sidebar-nav-divider',
|
||||
props: {
|
||||
classes: {
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
classList () {
|
||||
return [
|
||||
'divider',
|
||||
...this.itemClasses
|
||||
]
|
||||
},
|
||||
itemClasses () {
|
||||
return this.classes ? this.classes.split(' ') : ''
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,47 +0,0 @@
|
||||
<template>
|
||||
<router-link tag="li" class="nav-item nav-dropdown" :to="url" disabled>
|
||||
<div class="nav-link nav-dropdown-toggle" @click="handleClick"><i :class="classIcon"></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: ''
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
classIcon () {
|
||||
return [
|
||||
'nav-icon',
|
||||
this.icon
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleClick (e) {
|
||||
e.preventDefault()
|
||||
e.target.parentElement.classList.toggle('open')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="css">
|
||||
.nav-link {
|
||||
cursor:pointer;
|
||||
}
|
||||
</style>
|
||||
@@ -1,35 +0,0 @@
|
||||
<template>
|
||||
<li :class="classList" @click="hideMobile">
|
||||
<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(' ') : ''
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
hideMobile () {
|
||||
if (document.body.classList.contains('sidebar-show')) {
|
||||
document.body.classList.toggle('sidebar-show')
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,59 +0,0 @@
|
||||
<template>
|
||||
<SidebarNavItem :classes="classList.navItem">
|
||||
<a :class="classList.navLink" :href="url"><i :class="classList.icon"></i> {{name}}</a>
|
||||
</SidebarNavItem>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import SidebarNavItem from './SidebarNavItem'
|
||||
import SidebarNavLink from './SidebarNavLink'
|
||||
export default {
|
||||
name: 'sidebar-nav-label',
|
||||
components: {
|
||||
SidebarNavItem,
|
||||
SidebarNavLink
|
||||
},
|
||||
props: {
|
||||
name: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
url: {
|
||||
type: String,
|
||||
default: '#'
|
||||
},
|
||||
icon: {
|
||||
type: String,
|
||||
default: 'fa fa-circle'
|
||||
},
|
||||
classes: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
label: {
|
||||
type: Object,
|
||||
required: true,
|
||||
default: () => {}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
classList () {
|
||||
const classes = {
|
||||
navItem: ['hidden-cn', ...this.getClasses(this.classes)].join(' '),
|
||||
navLink: 'nav-label',
|
||||
icon: [
|
||||
this.icon ? this.icon : 'fa fa-circle',
|
||||
this.label.variant ? `text-${this.label.variant}` : '',
|
||||
this.label.class ? this.label.class : ''
|
||||
].join(' ')
|
||||
}
|
||||
return classes
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getClasses (classes) {
|
||||
return classes ? classes.split(' ') : []
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,74 +0,0 @@
|
||||
<template>
|
||||
<div v-if="isExternalLink">
|
||||
<a :href="url" :class="classList">
|
||||
<i :class="classIcon"></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="classIcon"></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: ''
|
||||
},
|
||||
url: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
icon: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
badge: {
|
||||
type: Object,
|
||||
default: () => {}
|
||||
},
|
||||
variant: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
classes: {
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
classList () {
|
||||
return [
|
||||
'nav-link',
|
||||
this.linkVariant,
|
||||
...this.itemClasses
|
||||
]
|
||||
},
|
||||
classIcon () {
|
||||
return [
|
||||
'nav-icon',
|
||||
this.icon
|
||||
]
|
||||
},
|
||||
linkVariant () {
|
||||
return this.variant ? `nav-link-${this.variant}` : ''
|
||||
},
|
||||
itemClasses () {
|
||||
return this.classes ? this.classes.split(' ') : []
|
||||
},
|
||||
isExternalLink () {
|
||||
if (this.url.substring(0, 4) === 'http') {
|
||||
return true
|
||||
} else {
|
||||
return false
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,42 +0,0 @@
|
||||
<template>
|
||||
<li :class="classList">
|
||||
<template v-if="wrapper && wrapper.element">
|
||||
<component v-bind:is="wrapper.element" v-bind="wrapper.attributes">
|
||||
{{name}}
|
||||
</component>
|
||||
</template>
|
||||
<template v-else>
|
||||
{{name}}
|
||||
</template>
|
||||
</li>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
name: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
classes: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
wrapper: {
|
||||
type: Object,
|
||||
default: () => {}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
classList () {
|
||||
return [
|
||||
'nav-title',
|
||||
...this.itemClasses
|
||||
]
|
||||
},
|
||||
itemClasses () {
|
||||
return this.classes ? this.classes.split(' ') : ''
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,55 +0,0 @@
|
||||
<template>
|
||||
<button
|
||||
:display="display"
|
||||
:mobile="mobile"
|
||||
:class="classList"
|
||||
type="button"
|
||||
@click="sidebarToggle">
|
||||
<span class="navbar-toggler-icon" />
|
||||
</button>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { sidebarCssClasses, validBreakpoints, checkBreakpoint } from '../../shared/classes'
|
||||
import toggleClasses from '../../shared/toggle-classes'
|
||||
|
||||
export default {
|
||||
name: 'SidebarToggler',
|
||||
props: {
|
||||
mobile: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
display: {
|
||||
type: String,
|
||||
default: 'lg'
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
classList () {
|
||||
return [
|
||||
'navbar-toggler'
|
||||
// 'd-none',
|
||||
// 'd-lg-inline-block'
|
||||
]
|
||||
}
|
||||
},
|
||||
mounted: function () {
|
||||
this.toggle()
|
||||
},
|
||||
methods: {
|
||||
toggle () {
|
||||
const [display, mobile] = [this.display, this.mobile]
|
||||
let cssClass = sidebarCssClasses[0]
|
||||
if (!mobile && display && checkBreakpoint(display, validBreakpoints)) {
|
||||
cssClass = `sidebar-${display}-show`
|
||||
}
|
||||
toggleClasses(cssClass, sidebarCssClasses)
|
||||
},
|
||||
sidebarToggle (e) {
|
||||
e.preventDefault()
|
||||
this.toggle()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,17 +0,0 @@
|
||||
import Sidebar from './Sidebar.vue'
|
||||
import SidebarFooter from './SidebarFooter'
|
||||
import SidebarForm from './SidebarForm'
|
||||
import SidebarHeader from './SidebarHeader'
|
||||
import SidebarMinimizer from './SidebarMinimizer'
|
||||
import SidebarNav from './SidebarNav'
|
||||
import SidebarNavDivider from './SidebarNavDivider'
|
||||
import SidebarNavDropdown from './SidebarNavDropdown'
|
||||
import SidebarNavItem from './SidebarNavItem'
|
||||
import SidebarNavLabel from './SidebarNavLabel'
|
||||
import SidebarNavLink from './SidebarNavLink'
|
||||
import SidebarNavTitle from './SidebarNavTitle'
|
||||
import SidebarToggler from './SidebarToggler'
|
||||
|
||||
export {
|
||||
Sidebar, SidebarFooter, SidebarForm, SidebarHeader, SidebarMinimizer, SidebarNav, SidebarNavDivider, SidebarNavItem, SidebarNavDropdown, SidebarNavLabel, SidebarNavLink, SidebarNavTitle, SidebarToggler
|
||||
}
|
||||
@@ -1,110 +0,0 @@
|
||||
<template>
|
||||
<label :class="classList">
|
||||
<input
|
||||
:value="value"
|
||||
:checked="isChecked"
|
||||
:disabled="isDisabled"
|
||||
type="checkbox"
|
||||
class="switch-input"
|
||||
@change="handleChange">
|
||||
<template v-if="isOn">
|
||||
<span
|
||||
:data-on="on"
|
||||
:data-off="off"
|
||||
class="switch-label" />
|
||||
</template>
|
||||
<template v-else>
|
||||
<span class="switch-label" />
|
||||
</template>
|
||||
<span class="switch-handle" />
|
||||
</label>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
model: {
|
||||
prop: 'checked',
|
||||
event: 'change'
|
||||
},
|
||||
props: {
|
||||
value: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
uncheckedValue: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
checked: {
|
||||
type: Boolean,
|
||||
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
|
||||
},
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
|
||||
},
|
||||
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 ? `switch-pill` : null
|
||||
},
|
||||
switchSize () {
|
||||
return this.size ? `switch-${this.size}` : ''
|
||||
},
|
||||
isChecked () {
|
||||
return this.checked === this.value
|
||||
},
|
||||
isDisabled () {
|
||||
return this.disabled ? true : null
|
||||
},
|
||||
isOn () {
|
||||
return this.on ? true : null
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleChange ({ target: { checked } }) {
|
||||
this.$emit('change', checked ? this.value : this.uncheckedValue)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,32 +0,0 @@
|
||||
import Breadcrumb from './Breadcrumb/Breadcrumb'
|
||||
import Callout from './Callout/Callout'
|
||||
import Footer from './Footer/Footer'
|
||||
import Switch from './Switch/Switch'
|
||||
|
||||
import { Aside, AsideToggler } from './Aside'
|
||||
import { Header, HeaderDropdown } from './Header'
|
||||
import { Sidebar, SidebarFooter, SidebarForm, SidebarHeader, SidebarMinimizer, SidebarNav, SidebarNavDivider, SidebarNavItem, SidebarNavDropdown, SidebarNavLabel, SidebarNavLink, SidebarNavTitle, SidebarToggler } from './Sidebar'
|
||||
|
||||
export {
|
||||
Aside,
|
||||
AsideToggler,
|
||||
Breadcrumb,
|
||||
Callout,
|
||||
Footer,
|
||||
Header,
|
||||
HeaderDropdown,
|
||||
Sidebar,
|
||||
SidebarFooter,
|
||||
SidebarForm,
|
||||
SidebarHeader,
|
||||
SidebarMinimizer,
|
||||
SidebarNav,
|
||||
SidebarNavDivider,
|
||||
SidebarNavItem,
|
||||
SidebarNavDropdown,
|
||||
SidebarNavLabel,
|
||||
SidebarNavLink,
|
||||
SidebarNavTitle,
|
||||
SidebarToggler,
|
||||
Switch
|
||||
}
|
||||
@@ -8,7 +8,7 @@
|
||||
<b-list-group-item class="list-group-item-accent-secondary bg-light text-center font-weight-bold text-muted text-uppercase small">
|
||||
Today
|
||||
</b-list-group-item>
|
||||
<b-list-group-item class="list-group-item list-group-item-accent-warning list-group-item-divider">
|
||||
<b-list-group-item href="#" class="list-group-item-accent-warning list-group-item-divider">
|
||||
<div class="avatar float-right">
|
||||
<img class="img-avatar" src="static/img/avatars/7.jpg" alt="admin@bootstrapmaster.com">
|
||||
</div>
|
||||
@@ -22,7 +22,7 @@
|
||||
<i class="icon-location-pin"></i> Palo Alto, CA
|
||||
</small>
|
||||
</b-list-group-item>
|
||||
<b-list-group-item class="list-group-item-accent-info">
|
||||
<b-list-group-item href="#" class="list-group-item-accent-info">
|
||||
<div class="avatar float-right">
|
||||
<img class="img-avatar" src="static/img/avatars/4.jpg" alt="admin@bootstrapmaster.com">
|
||||
</div>
|
||||
@@ -35,7 +35,7 @@
|
||||
<b-list-group-item class="list-group-item-accent-secondary bg-light text-center font-weight-bold text-muted text-uppercase small">
|
||||
Tomorrow
|
||||
</b-list-group-item>
|
||||
<b-list-group-item class="list-group-item-accent-danger list-group-item-divider">
|
||||
<b-list-group-item href="#" class="list-group-item-accent-danger list-group-item-divider">
|
||||
<div>New UI Project - <strong>deadline</strong>
|
||||
</div>
|
||||
<small class="text-muted mr-3"><i class="icon-calendar"></i> 10 - 11pm</small>
|
||||
@@ -58,12 +58,12 @@
|
||||
</div>
|
||||
</div>
|
||||
</b-list-group-item>
|
||||
<b-list-group-item class="list-group-item-accent-success list-group-item-divider">
|
||||
<b-list-group-item href="#" class="list-group-item-accent-success list-group-item-divider">
|
||||
<div><strong>#10 Startups.Garden</strong> Meetup</div>
|
||||
<small class="text-muted mr-3"><i class="icon-calendar"></i> 1 - 3pm</small>
|
||||
<small class="text-muted"><i class="icon-location-pin"></i> Palo Alto, CA</small>
|
||||
</b-list-group-item>
|
||||
<b-list-group-item class="list-group-item-accent-primary list-group-item-divider">
|
||||
<b-list-group-item href="#" class="list-group-item-accent-primary list-group-item-divider">
|
||||
<div><strong>Team meeting</strong></div>
|
||||
<small class="text-muted mr-3"><i class="icon-calendar"></i> 4 - 6pm</small>
|
||||
<small class="text-muted"><i class="icon-home"></i> creativeLabs HQ</small>
|
||||
@@ -183,7 +183,7 @@
|
||||
<div class="aside-options">
|
||||
<div class="clearfix mt-4">
|
||||
<small><b>Option 1</b></small>
|
||||
<c-switch type="text" variant="success" on="on" off="off" :pill="true" size="sm" class="float-right" :checked="true" />
|
||||
<c-switch color="success" label variant="pill" size="sm" class="float-right" checked />
|
||||
</div>
|
||||
<div>
|
||||
<small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</small>
|
||||
@@ -192,7 +192,7 @@
|
||||
<div class="aside-options">
|
||||
<div class="clearfix mt-3">
|
||||
<small><b>Option 2</b></small>
|
||||
<c-switch type="text" variant="success" on="on" off="off" :pill="true" size="sm" class="float-right" />
|
||||
<c-switch color="success" label variant="pill" size="sm" class="float-right" />
|
||||
</div>
|
||||
<div>
|
||||
<small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</small>
|
||||
@@ -201,7 +201,7 @@
|
||||
<div class="aside-options">
|
||||
<div class="clearfix mt-3">
|
||||
<small><b>Option 3</b></small>
|
||||
<c-switch type="text" variant="success" on="on" off="off" :pill="true" size="sm" class="float-right" disabled />
|
||||
<c-switch color="success" label variant="pill" size="sm" class="float-right" disabled defaultChecked/>
|
||||
</div>
|
||||
<div>
|
||||
<small class="text-muted">Disabled option.</small>
|
||||
@@ -210,7 +210,7 @@
|
||||
<div class="aside-options">
|
||||
<div class="clearfix mt-3">
|
||||
<small><b>Option 4</b></small>
|
||||
<c-switch type="text" variant="success" on="on" off="off" :pill="true" size="sm" class="float-right" checked />
|
||||
<c-switch color="success" label variant="pill" size="sm" class="float-right" checked />
|
||||
</div>
|
||||
</div>
|
||||
<hr>
|
||||
@@ -241,9 +241,9 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {Switch as cSwitch} from '../components'
|
||||
import { Switch as cSwitch } from '@coreui/vue'
|
||||
export default {
|
||||
name: 'FullAside',
|
||||
name: 'DafaultAside',
|
||||
components: {
|
||||
cSwitch
|
||||
}
|
||||
@@ -82,19 +82,21 @@
|
||||
</main>
|
||||
<AppAside fixed>
|
||||
<!--aside-->
|
||||
<FullAside/>
|
||||
<DafaultAside/>
|
||||
</AppAside>
|
||||
</div>
|
||||
<AppFooter fixed>
|
||||
<TheFooter>
|
||||
<!--footer-->
|
||||
</AppFooter>
|
||||
</TheFooter>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import nav from '../_nav'
|
||||
import { Header as AppHeader, HeaderDropdown as AppHeaderDropdown, SidebarToggler, Sidebar as AppSidebar, SidebarFooter, SidebarForm, SidebarHeader, SidebarMinimizer, SidebarNav, Aside as AppAside, AsideToggler, Footer as AppFooter, Breadcrumb } from '../components/'
|
||||
import FullAside from './FullAside'
|
||||
import { Header as AppHeader, HeaderDropdown as AppHeaderDropdown, SidebarToggler, Sidebar as AppSidebar, SidebarFooter, SidebarForm, SidebarHeader, SidebarMinimizer, SidebarNav, Aside as AppAside, AsideToggler, Footer as TheFooter, Breadcrumb } from '@coreui/vue'
|
||||
// import { Header as AppHeader, HeaderDropdown as AppHeaderDropdown, SidebarToggler, Sidebar as AppSidebar, SidebarFooter, SidebarForm, SidebarHeader, SidebarMinimizer, SidebarNav, Aside as AppAside, AsideToggler, Breadcrumb } from '../components/'
|
||||
// import { Footer as TheFooter } from '@coreui/vue'
|
||||
import DafaultAside from './DafaultAside'
|
||||
|
||||
export default {
|
||||
name: 'full',
|
||||
@@ -104,9 +106,9 @@ export default {
|
||||
AppHeaderDropdown,
|
||||
AppSidebar,
|
||||
AppAside,
|
||||
AppFooter,
|
||||
TheFooter,
|
||||
Breadcrumb,
|
||||
FullAside,
|
||||
DafaultAside,
|
||||
SidebarForm,
|
||||
SidebarFooter,
|
||||
SidebarToggler,
|
||||
+4
-4
@@ -2,7 +2,7 @@ import Vue from 'vue'
|
||||
import Router from 'vue-router'
|
||||
|
||||
// Containers
|
||||
import Full from '@/containers/Full'
|
||||
import DefaultContainer from '@/containers/DefaultContainer'
|
||||
|
||||
// Views
|
||||
import Dashboard from '@/views/Dashboard'
|
||||
@@ -63,7 +63,7 @@ export default new Router({
|
||||
path: '/',
|
||||
redirect: '/dashboard',
|
||||
name: 'Home',
|
||||
component: Full,
|
||||
component: DefaultContainer,
|
||||
children: [
|
||||
{
|
||||
path: 'dashboard',
|
||||
@@ -187,7 +187,7 @@ export default new Router({
|
||||
},
|
||||
{
|
||||
path: 'buttons',
|
||||
redirect: '/buttons/buttons',
|
||||
redirect: '/buttons/standard-buttons',
|
||||
name: 'Buttons',
|
||||
component: {
|
||||
render (c) { return c('router-view') }
|
||||
@@ -195,7 +195,7 @@ export default new Router({
|
||||
children: [
|
||||
{
|
||||
path: 'standard-buttons',
|
||||
name: 'Buttons',
|
||||
name: 'Standard Buttons',
|
||||
component: StandardButtons
|
||||
},
|
||||
{
|
||||
|
||||
@@ -456,7 +456,7 @@ import CardBarChartExample from './dashboard/CardBarChartExample'
|
||||
import MainChartExample from './dashboard/MainChartExample'
|
||||
import SocialBoxChartExample from './dashboard/SocialBoxChartExample'
|
||||
import CalloutChartExample from './dashboard/CalloutChartExample'
|
||||
import { Callout } from '../components/'
|
||||
import { Callout } from '@coreui/vue'
|
||||
|
||||
export default {
|
||||
name: 'dashboard',
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<script>
|
||||
import { Line } from 'vue-chartjs'
|
||||
import { getStyle } from '@coreui/coreui/js/src/utilities'
|
||||
import { getStyle } from '@coreui/coreui/dist/js/coreui-utilities'
|
||||
|
||||
// const brandPrimary = '#20a8d8'
|
||||
// const brandSuccess = '#4dbd74'
|
||||
|
||||
@@ -0,0 +1,29 @@
|
||||
<template>
|
||||
<b-col xl="2" md="4" sm="6" xs="12" class="mb-4">
|
||||
<div :class="[classObj, color]" :style="{ paddingTop: '75%' }"></div>
|
||||
<slot></slot>
|
||||
<color-view/>
|
||||
</b-col>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ColorView from './ColorView'
|
||||
export default {
|
||||
name: 'ColorTheme',
|
||||
components: { ColorView },
|
||||
props: {
|
||||
classObj: {
|
||||
type: String,
|
||||
default: 'theme-color w-75 rounded mb-3'
|
||||
},
|
||||
color: {
|
||||
type: String,
|
||||
default: 'bg-secondary'
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,46 @@
|
||||
<template>
|
||||
<table class="w-100">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="text-muted">HEX:</td>
|
||||
<td class="font-weight-bold">{{this.hexColor}}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="text-muted">RGB:</td>
|
||||
<td class="font-weight-bold">{{this.bgColor}}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { rgbToHex } from '@coreui/coreui/dist/js/coreui-utilities'
|
||||
export default {
|
||||
name: 'ColorView',
|
||||
data: function () {
|
||||
return {
|
||||
bgColor: 'rgb(255, 255, 255)'
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
hexColor () {
|
||||
return rgbToHex(this.bgColor)
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
setColor () {
|
||||
const elem = this.$parent.$el.children[0]
|
||||
const color = window.getComputedStyle(elem).getPropertyValue('background-color')
|
||||
this.bgColor = color || this.bgColor
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
console.log('mounted')
|
||||
this.setColor()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
+54
-87
@@ -1,102 +1,69 @@
|
||||
<template>
|
||||
<div class="animated fadeIn">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<b-card header-tag="header">
|
||||
<div slot="header">
|
||||
<i class="icon-drop"></i> Theme colors
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="row">
|
||||
<div class="col-md-4">
|
||||
<div class="p-3 mb-3 bg-primary">Primary</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="p-3 mb-3 bg-secondary">Secondary</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="p-3 mb-3 bg-success">Success</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="p-3 mb-3 bg-danger">Danger</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="p-3 mb-3 bg-warning">Warning</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="p-3 mb-3 bg-info">Info</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="p-3 mb-3 bg-light">Light</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="p-3 mb-3 bg-dark">Dark</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<b-card-body>
|
||||
<b-row>
|
||||
<color-theme color="bg-primary">
|
||||
<h6>Brand Primary Color</h6>
|
||||
</color-theme>
|
||||
<color-theme color="bg-secondary"><h6>Brand Secondary Color</h6></color-theme>
|
||||
<color-theme color="bg-success"><h6>Brand Success Color</h6></color-theme>
|
||||
<color-theme color="bg-danger"><h6>Brand Danger Color</h6></color-theme>
|
||||
<color-theme color="bg-warning"><h6>Brand Warning Color</h6></color-theme>
|
||||
<color-theme color="bg-info"><h6>Brand Info Color</h6></color-theme>
|
||||
<color-theme color="bg-light"><h6>Brand Light Color</h6></color-theme>
|
||||
<color-theme color="bg-dark"><h6>Brand Dark Color</h6></color-theme>
|
||||
</b-row>
|
||||
</b-card-body>
|
||||
</b-card>
|
||||
<b-card header-tag="header">
|
||||
<div slot="header">
|
||||
<i class="icon-drop"></i> Grays
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="row mb-3">
|
||||
<div class="col-md-4">
|
||||
<div class="p-3 bg-gray-100">100</div>
|
||||
<div class="p-3 bg-gray-200">200</div>
|
||||
<div class="p-3 bg-gray-300">300</div>
|
||||
<div class="p-3 bg-gray-400">400</div>
|
||||
<div class="p-3 bg-gray-500">500</div>
|
||||
<div class="p-3 bg-gray-600">600</div>
|
||||
<div class="p-3 bg-gray-700">700</div>
|
||||
<div class="p-3 bg-gray-800">800</div>
|
||||
<div class="p-3 bg-gray-900">900</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<b-card-body>
|
||||
<b-row>
|
||||
<color-theme color="bg-gray-100"><h6>Brand 100 Color</h6></color-theme>
|
||||
<color-theme color="bg-gray-200"><h6>Brand 200 Color</h6></color-theme>
|
||||
<color-theme color="bg-gray-300"><h6>Brand 300 Color</h6></color-theme>
|
||||
<color-theme color="bg-gray-400"><h6>Brand 400 Color</h6></color-theme>
|
||||
<color-theme color="bg-gray-500"><h6>Brand 500 Color</h6></color-theme>
|
||||
<color-theme color="bg-gray-600"><h6>Brand 600 Color</h6></color-theme>
|
||||
<color-theme color="bg-gray-700"><h6>Brand 700 Color</h6></color-theme>
|
||||
<color-theme color="bg-gray-800"><h6>Brand 800 Color</h6></color-theme>
|
||||
<color-theme color="bg-gray-900"><h6>Brand 900 Color</h6></color-theme>
|
||||
</b-row>
|
||||
</b-card-body>
|
||||
</b-card>
|
||||
<b-card header-tag="header">
|
||||
<div slot="header">
|
||||
<i class="icon-drop"></i> Additional colors
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="row">
|
||||
<div class="col-md-4">
|
||||
<div class="p-3 mb-3 bg-blue">Blue</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="p-3 mb-3 bg-indigo">Indigo</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="p-3 mb-3 bg-purple">Purple</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="p-3 mb-3 bg-pink">Pink</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="p-3 mb-3 bg-red">Red</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="p-3 mb-3 bg-orange">Orange</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="p-3 mb-3 bg-yellow">Yellow</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="p-3 mb-3 bg-green">Green</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="p-3 mb-3 bg-teal">Teal</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="p-3 mb-3 bg-cyan">Cyan</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<b-card-body>
|
||||
<b-row>
|
||||
<color-theme color="bg-blue"><h6>Brand Blue Color</h6></color-theme>
|
||||
<color-theme color="bg-indigo"><h6>Brand Indigo Color</h6></color-theme>
|
||||
<color-theme color="bg-purple"><h6>Brand Purple Color</h6></color-theme>
|
||||
<color-theme color="bg-pink"><h6>Brand Pink Color</h6></color-theme>
|
||||
<color-theme color="bg-red"><h6>Brand Red Color</h6></color-theme>
|
||||
<color-theme color="bg-orange"><h6>Brand Orange Color</h6></color-theme>
|
||||
<color-theme color="bg-yellow"><h6>Brand Yellow Color</h6></color-theme>
|
||||
<color-theme color="bg-green"><h6>Brand Green Color</h6></color-theme>
|
||||
<color-theme color="bg-teal"><h6>Brand Teal Color</h6></color-theme>
|
||||
<color-theme color="bg-cyan"><h6>Brand Cyan Color</h6></color-theme>
|
||||
</b-row>
|
||||
</b-card-body>
|
||||
</b-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ColorTheme from './ColorTheme'
|
||||
|
||||
export default {
|
||||
name: 'colors'
|
||||
name: 'colors',
|
||||
components: { ColorTheme }
|
||||
}
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user