sean/manja_ui_dev
1
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

Chore: Merge branch 'dev' into v3-alpha to create v3.0.0-alpha.1 version

Browse Source
This commit is contained in:
woothu
2019-03-05 14:44:07 +01:00
parent f0e3d72423 eddfdfdb8a
commit 7253a904ff
41 changed files with 2937 additions and 3065 deletions
Download Patch File Download Diff File Expand all files Collapse all files
babel.config.js
+2 -7
View File
@@ -1,12 +1,7 @@
module.exports = {
presets: [
['@vue/app', {
polyfills: [
'es6.promise', // already default included now
'es6.array.iterator', // already default included now
'es6.symbol',
'es6.object.assign'
]
[ "@vue/app", {
"useBuiltIns": 'entry'
}]
]
}
package.json
+7 -4
View File
@@ -1,6 +1,6 @@
{
"name": "@coreui/coreui-free-vue-admin-template",
"version": "3.0.0-alpha",
"version": "3.0.0-alpha.1",
"description": "Open Source Bootstrap Admin Template",
"author": "Łukasz Holeczek",
"homepage": "http://coreui.io",
@@ -8,7 +8,7 @@
"license": "MIT",
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"build": "vue-cli-service build --modern",
"lint": "vue-cli-service lint",
"test:unit": "vue-cli-service test:unit",
"test:e2e": "vue-cli-service test:e2e"
@@ -19,10 +19,10 @@
"@coreui/icons": "0.3.0",
"@coreui/vue": "github:coreui/coreui-vue#v3-bridge-alpha",
"bootstrap": "^4.1.3",
"bootstrap-vue": "^2.0.0-rc.11",
"chart.js": "^2.7.3",
"core-js": "^2.5.7",
"css-vars-ponyfill": "^1.11.1",
"current-script-polyfill": "^1.0.0",
"element-resize-detector": "^1.2.0",
"flag-icon-css": "^3.2.0",
"font-awesome": "^4.7.0",
@@ -41,7 +41,10 @@
"@vue/cli-plugin-unit-jest": "^3.0.5",
"@vue/cli-service": "^3.0.5",
"@vue/test-utils": "^1.0.0-beta.25",
"babel-core": "^7.0.0-bridge.0",
"babel-core": "^6.26.3",
"babel-plugin-dynamic-import-node": "^2.2.0",
"babel-plugin-module-resolver": "^3.1.2",
"babel-preset-vue-app": "^2.0.0",
"babel-jest": "^23.6.0",
"growl": "^1.10.5",
"https-proxy-agent": "^2.2.1",
src/containers/DefaultContainer.vue
+33 -1
View File
@@ -32,7 +32,13 @@
<CSidebar fixed>
<CSidebarHeader/>
<CSidebarForm/>
<CSidebarNav :navItems="computedNav"></CSidebarNav>
<!-- <CSidebarNav :navItems="computedNav"/> -->
<nav class="sidebar-nav">
<VuePerfectScrollbar class="scroll-area" :settings="psSettings"
@ps-scroll-y="scrollHandle">
<CSidebarNavItems :items="computedNav"/>
</VuePerfectScrollbar>
</nav>
<CSidebarFooter/>
<CSidebarMinimizer/>
</CSidebar>
@@ -65,12 +71,14 @@
import nav from '@/_nav'
import DefaultAside from './DefaultAside'
import DefaultHeaderDropdownAccnt from './DefaultHeaderDropdownAccnt'
import VuePerfectScrollbar from 'vue-perfect-scrollbar'
export default {
name: 'full',
components: {
DefaultAside,
DefaultHeaderDropdownAccnt,
VuePerfectScrollbar
},
data () {
return {
@@ -80,7 +88,31 @@ export default {
computed: {
computedNav () {
return this.nav.filter((item) => item.name !== 'Dashboard')
},
psSettings: () => {
// ToDo: find better rtl fix
return {
maxScrollbarLength: 200,
minScrollbarLength: 40,
suppressScrollX: getComputedStyle(document.querySelector('html')).direction !== 'rtl',
wheelPropagation: false,
interceptRailY: styles => ({ ...styles, height: 0 })
}
}
},
methods: {
/*eslint no-unused-vars: ["error", { "argsIgnorePattern": "evt" }]*/
scrollHandle (evt) {
// console.log(evt)
}
}
}
</script>
<style scoped lang="css">
.scroll-area {
position: absolute;
height: 100%;
margin: auto;
}
</style>
src/containers/DefaultHeaderDropdownAccnt.vue
+36 -16
View File
@@ -1,44 +1,64 @@
<template>
<CDropdown right
<CDropdown
right
nav
no-caret
no-popper
noCaret
noPopper
addMenuClasses="dropdown-menu-right"
>
<img slot="buttonContent"
<template #buttonContent>
<img
src="img/avatars/6.jpg"
class="img-avatar"
alt="admin@bootstrapmaster.com"
/>
<CDropdownHeader tag="div" class="text-center"><strong>Account</strong></CDropdownHeader>
<CDropdownItem><i class="fa fa-bell-o" /> Updates
</template>
<CDropdownHeader tag="div" class="text-center">
<strong>Account</strong>
</CDropdownHeader>
<CDropdownItem>
<i class="fa fa-bell-o" /> Updates
<CBadge variant="info" additionalClasses="hehe">{{ itemsCount }}</CBadge>
</CDropdownItem>
<CDropdownItem><i class="fa fa-envelope-o" /> Messages
<CDropdownItem>
<i class="fa fa-envelope-o" /> Messages
<CBadge variant="success">{{ itemsCount }}</CBadge>
</CDropdownItem>
<CDropdownItem><i class="fa fa-tasks" /> Tasks
<CDropdownItem>
<i class="fa fa-tasks" /> Tasks
<CBadge variant="danger">{{ itemsCount }}</CBadge>
</CDropdownItem>
<CDropdownItem><i class="fa fa-comments" /> Comments
<CDropdownItem>
<i class="fa fa-comments" /> Comments
<CBadge variant="warning">{{ itemsCount }}</CBadge>
</CDropdownItem>
<CDropdownHeader
tag="div"
class="text-center">
class="text-center"
>
<strong>Settings</strong>
</CDropdownHeader>
<CDropdownItem><i class="fa fa-user" /> Profile</CDropdownItem>
<CDropdownItem><i class="fa fa-wrench" /> Settings</CDropdownItem>
<CDropdownItem><i class="fa fa-usd" /> Payments
<CDropdownItem>
<i class="fa fa-user" /> Profile
</CDropdownItem>
<CDropdownItem>
<i class="fa fa-wrench" /> Settings
</CDropdownItem>
<CDropdownItem>
<i class="fa fa-usd" /> Payments
<CBadge variant="secondary">{{ itemsCount }}</CBadge>
</CDropdownItem>
<CDropdownItem><i class="fa fa-file" /> Projects
<CDropdownItem>
<i class="fa fa-file" /> Projects
<CBadge variant="primary">{{ itemsCount }}</CBadge>
</CDropdownItem>
<CDropdownDivider/>
<CDropdownItem><i class="fa fa-shield" /> Lock Account</CDropdownItem>
<CDropdownItem><i class="fa fa-lock" /> Logout</CDropdownItem>
<CDropdownItem>
<i class="fa fa-shield" /> Lock Account
</CDropdownItem>
<CDropdownItem>
<i class="fa fa-lock" /> Logout
</CDropdownItem>
</CDropdown>
</template>
src/main.js
+3 -3
View File
@@ -1,21 +1,21 @@
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import 'core-js/es6/promise'
import 'core-js/es6/string'
import 'core-js/es7/array'
import '@babel/polyfill'
// import cssVars from 'css-vars-ponyfill'
import Vue from 'vue'
import BootstrapVue from 'bootstrap-vue'
import App from './App'
import router from './router'
//Import built package
import CoreuiVue from '@coreui/vue/src'
import CoreuiVue from '@coreui/vue'
Vue.config.performance = true
// todo
// cssVars()
Vue.use(BootstrapVue)
Vue.use(CoreuiVue)
src/views/Charts.vue
+9 -9
View File
@@ -1,34 +1,34 @@
<template>
<div class="animated fadeIn">
<CCardGroup columns class="card-columns">
<CCard header="Line Chart">
<CCard header="Line Chart" bodyWrapper>
<LineExample/>
</CCard>
<CCard header="Bar Chart">
<CCard header="Bar Chart" bodyWrapper>
<BarExample/>
</CCard>
<CCard header="Doughnut Chart">
<CCard header="Doughnut Chart" bodyWrapper>
<DoughnutExample/>
</CCard>
<CCard header="Radar Chart">
<CCard header="Radar Chart" bodyWrapper>
<RadarExample/>
</CCard>
<CCard header="Pie Chart">
<CCard header="Pie Chart" bodyWrapper>
<PieExample/>
</CCard>
<CCard header="Polar Area Chart">
<CCard header="Polar Area Chart" bodyWrapper>
<PolarAreaExample/>
</CCard>
<CCard header="Simple line chart">
<CCard header="Simple line chart" bodyWrapper>
<CSimpleLineChart style="height:80px" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]'
label='Sales' borderColor='success'/>
</CCard>
<CCard header="Simple pointed chart">
<CCard header="Simple pointed chart" bodyWrapper>
<CSimplePointedChart class='px-3' :data='[65, 59, 84, 84, 51, 55, 40]'
:labels="['January', 'February', 'March', 'April', 'May', 'June', 'July']"
style='height:80px' label='Members' pointHoverColor='warning' borderColor='warning'/>
</CCard>
<CCard header="Simple bar chart">
<CCard header="Simple bar chart" bodyWrapper>
<CSimpleBarChart style="height:80px" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]'
label='Sales' color='danger'/>
</CCard>
src/views/Dashboard.vue
+19 -17
View File
@@ -7,10 +7,10 @@
<CDropdown class="float-right"
variant="transparent p-0"
right
button-content="<i class='icon-settings'></i>"
buttonContent="<i class='icon-settings'></i>"
tag="div"
>
<!-- <template slot="button-content">
<!-- <template slot="buttonContent">
</template> -->
<CDropdownItem>Action</CDropdownItem>
@@ -31,10 +31,10 @@
variant="transparent p-0"
right
no-caret
button-content="<i class='icon-location-pin'></i>"
buttonContent="<i class='icon-location-pin'></i>"
tag="div"
>
<!-- <i slot="button-content"
<!-- <i slot="buttonContent"
class="icon-location-pin"
></i> -->
<CDropdownItem>Action</CDropdownItem>
@@ -58,7 +58,7 @@
<CDropdown class="float-right"
variant="transparent p-0"
right
button-content="<i class='icon-settings'></i>"
buttonContent="<i class='icon-settings'></i>"
tag="div"
>
@@ -80,9 +80,9 @@
<CDropdown class="float-right"
variant="transparent p-0"
right
button-content="<i class='icon-settings'></i>"
buttonContent="<i class='icon-settings'></i>"
>
<!-- <template slot="button-content">
<!-- <template slot="buttonContent">
<i class="icon-settings"></i>
</template> -->
<CDropdownItem>Action</CDropdownItem>
@@ -98,6 +98,7 @@
</CRow>
<CCard>
<CCardBody>
<CRow>
<CCol sm="5">
<h4 id="traffic" class="card-title mb-0">Traffic</h4>
@@ -119,7 +120,8 @@
</CCol>
</CRow>
<MainChartExample style="height:300px;margin-top:40px;" height="300"></MainChartExample>
<CCardFooter slot="footer">
</CCardBody>
<CCardFooter>
<CRow class="text-center">
<CCol md sm="12" class="mb-sm-2 mb-0">
<div class="text-muted">Visits</div>
@@ -181,28 +183,28 @@
</CRow><!--/.row-->
<CRow>
<CCol md="12">
<CCard header="Traffic &amp; Sales">
<CCard header="Traffic &amp; Sales" bodyWrapper>
<CRow>
<CCol sm="12" lg="6">
<CRow>
<CCol sm="6">
<Callout variant="info">
<CCallout variant="info">
<small class="text-muted">New Clients</small><br>
<strong class="h4">9,123</strong>
<div :style="{ top: '-10px'}">
<!--<CalloutChartExample :data="[35, 23, 56, 22, 97, 23, 64]" variant="#20a8d8" width="80" height="30" />-->
<CalloutChartExample :data="[35, 23, 56, 22, 97, 23, 64]" variant="info" width="80" height="30" />
</div>
</Callout>
</CCallout>
</CCol>
<CCol sm="6">
<Callout variant="danger">
<CCallout variant="danger">
<small class="text-muted">Recurring Clients</small><br>
<strong class="h4">22,643</strong>
<div :style="{ top: '-10px'}">
<CalloutChartExample :data="[65, 59, 84, 84, 51, 55, 40]" variant="danger" width="80" height="30" />
</div>
</Callout>
</CCallout>
</CCol>
</CRow>
<hr class="mt-0">
@@ -296,22 +298,22 @@
<CCol sm="12" lg="6">
<CRow>
<CCol sm="6">
<Callout variant="warning">
<CCallout variant="warning">
<small class="text-muted">Pageviews</small><br>
<strong class="h4">78,623</strong>
<div :style="{ top: '-10px'}">
<CalloutChartExample :data="[35, 23, 56, 22, 97, 23, 64]" variant="#f8cb00" width="80" height="30"/>
</div>
</Callout>
</CCallout>
</CCol>
<CCol sm="6">
<Callout variant="success">
<CCallout variant="success">
<small class="text-muted">Organic</small><br>
<strong class="h4">49,123</strong>
<div :style="{ top: '-10px'}">
<CalloutChartExample :data="[65, 59, 84, 84, 51, 55, 40]" variant="#4dbd74" width="80" height="30" />
</div>
</Callout>
</CCallout>
</CCol>
</CRow>
<hr class="mt-0">
src/views/Widgets.vue
+8 -8
View File
@@ -203,8 +203,8 @@
<CCol sm="6" lg="3">
<CWidget06 header="9.823" text="Members online">
<template slot='dropdown'>
<CDropdownclass="float-right" variant="transparent p-0" right>
<template slot="button-content">
<CDropdown class="float-right" variant="transparent p-0" right>
<template slot="buttonContent">
<i class="icon-settings"></i>
</template>
<CDropdownItem>Action</CDropdownItem>
@@ -220,8 +220,8 @@
</CCol>
<CCol sm="6" lg="3">
<CWidget06 variant="info" header="9.823" text="Members online">
<CDropdownslot="dropdown" class="float-right" variant="transparent p-0" right no-caret>
<i slot="button-content"
<CDropdown slot="dropdown" class="float-right" variant="transparent p-0" right no-caret>
<i slot="buttonContent"
class="icon-location-pin"
></i>
<CDropdownItem>Action</CDropdownItem>
@@ -242,8 +242,8 @@
<CCol sm="6" lg="3">
<CWidget06 variant="warning" header="9.823" text="Members online">
<template slot='dropdown'>
<CDropdownclass="float-right" variant="transparent p-0" right>
<template slot="button-content">
<CDropdown class="float-right" variant="transparent p-0" right>
<template slot="buttonContent">
<i class="icon-settings"></i>
</template>
<CDropdownItem>Action</CDropdownItem>
@@ -261,8 +261,8 @@
<CCol sm="6" lg="3">
<CWidget06 variant="danger" header="9.823" text="Members online">
<template slot="dropdown">
<CDropdownclass="float-right" variant="transparent p-0" right>
<template slot="button-content">
<CDropdown class="float-right" variant="transparent p-0" right>
<template slot="buttonContent">
<i class="icon-settings"></i>
</template>
<CDropdownItem>Action</CDropdownItem>
src/views/base/Breadcrumbs.vue
+5 -3
View File
@@ -4,17 +4,19 @@
<CRow>
<CCol cols>
<CCard>
<CCardHeader slot="header">
<CCardHeader>
<i class="fa fa-align-justify"></i><strong> Bootstrap Breadcrumb</strong>
<div class="card-header-actions">
<!-- <div class="card-header-actions">
<a href="https://bootstrap-vue.js.org/docs/components/breadcrumb" class="card-header-action" rel="noreferrer noopener" target="_blank">
<small class="text-muted">docs</small>
</a>
</div>
</div> -->
</CCardHeader>
<CCardBody>
<CBreadcrumb :items="items" addLinkClasses="sss" lastItemClasses="aaa"/>
<CBreadcrumb :items="items2"/>
<CBreadcrumb :items="items3"/>
</CCardBody>
</CCard>
</CCol>
</CRow>
src/views/base/Cards.vue
+67 -53
View File
@@ -2,80 +2,93 @@
<div class="animated fadeIn">
<CRow>
<CCol sm="6" md="4">
<CCard header="Card title">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</CCard>
<CCard header="Card title" :body="loremIpsum"/>
</CCol>
<CCol sm="6" md="4">
<CCard footer="Card Footer">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</CCard>
<CCard footer="Card Footer" :body="loremIpsum" />
</CCol>
<CCol sm="6" md="4">
<CCard header="<i class='fa fa-check'></i> Card with icon">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</CCard>
<CCard
header="<i class='fa fa-check'></i> Card with icon"
:body="loremIpsum"
/>
</CCol>
<CCol sm="6" md="4">
<CCard>
<CCardHeader slot="header">
<CCardHeader>
Card with switch
<label class="switch switch-sm switch-text switch-info float-right mb-0">
<input type="checkbox" class="switch-input">
<span class="switch-label" data-on="On" data-off="Off"></span>
<span class="switch-handle"></span>
</label>
<CSwitch
class="float-right"
size="sm"
shape="pill"
variant="info"
dataOn="On"
dataOff="Off"
:checked="true"
/>
</CCardHeader>
<CCardBody>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</CCardBody>
</CCard>
</CCol>
<CCol sm="6" md="4">
<CCard>
<CCardHeader slot="header">
<CCardHeader>
Card with label
<CBadge variant="success" class="float-right">Success</CBadge>
</CCardHeader>
<CCardBody>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</CCardBody>
</CCard>
</CCol>
<CCol sm="6" md="4">
<CCard>
<CCardHeader slot="header">
<CCardHeader>
Card with label
<CBadge pill variant="danger" class="float-right">42</CBadge>
</CCardHeader>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
<CCardBody :body="loremIpsum"/>
</CCard>
</CCol>
</CRow><!--/.row-->
<CRow>
<CCol sm="6" md="4">
<CCard header="Card outline primary" border-variant="primary">
<CCard
header="Card outline primary"
borderVariant="primary"
:body="loremIpsum"
/>
</CCol>
<CCol sm="6" md="4">
<CCard
header="Card outline secondary"
borderVariant="secondary"
:body="loremIpsum"
/>
</CCol>
<CCol sm="6" md="4">
<CCard
header="Card outline success"
borderVariant="success"
bodyWrapper
>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</CCard>
</CCol>
<CCol sm="6" md="4">
<CCard header="Card outline secondary" border-variant="secondary">
<CCard header="Card outline info" borderVariant="info" bodyWrapper>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</CCard>
</CCol>
<CCol sm="6" md="4">
<CCard header="Card outline success" border-variant="success">
<CCard header="Card outline warning" borderVariant="warning" bodyWrapper>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</CCard>
</CCol>
<CCol sm="6" md="4">
<CCard header="Card outline info" border-variant="info">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</CCard>
</CCol>
<CCol sm="6" md="4">
<CCard header="Card outline warning" border-variant="warning">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</CCard>
</CCol>
<CCol sm="6" md="4">
<CCard header="Card outline danger" border-variant="danger">
<CCard header="Card outline danger" borderVariant="danger" bodyWrapper>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</CCard>
</CCol>
@@ -83,22 +96,22 @@
<CRow>
<CCol sm="6" md="4">
<CCard class="card-accent-primary" header="Card with primary accent">
<CCard class="card-accent-primary" header="Card with primary accent" bodyWrapper>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</CCard>
</CCol>
<CCol sm="6" md="4">
<CCard class="card-accent-secondary" header="Card with secondary accent">
<CCard class="card-accent-secondary" header="Card with secondary accent" bodyWrapper>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</CCard>
</CCol>
<CCol sm="6" md="4">
<CCard class="card-accent-success" header="Card with success accent">
<CCard class="card-accent-success" header="Card with success accent" bodyWrapper>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</CCard>
</CCol>
<CCol sm="6" md="4">
<CCard class="card-accent-info" header="Card with info accent">
<CCard class="card-accent-info" header="Card with info accent" bodyWrapper>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</CCard>
</CCol>
@@ -108,14 +121,14 @@
</CCard>
</CCol>
<CCol sm="6" md="4">
<CCard class="card-accent-danger" header="Card with danger accent">
<CCard class="card-accent-danger" header="Card with danger accent" bodyWrapper>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</CCard>
</CCol>
</CRow><!--/.row-->
<CRow>
<CCol sm="6" md="4">
<CCard class="bg-primary text-center">
<CCard class="bg-primary text-center" bodyWrapper>
<blockquote class="card-blockquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer>Someone famous in
@@ -125,7 +138,7 @@
</CCard>
</CCol>
<CCol sm="6" md="4">
<CCard class="bg-success text-center">
<CCard class="bg-success text-center" bodyWrapper>
<blockquote class="card-blockquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer>Someone famous in
@@ -135,7 +148,7 @@
</CCard>
</CCol>
<CCol sm="6" md="4">
<CCard class="bg-info text-center">
<CCard class="bg-info text-center" bodyWrapper>
<blockquote class="card-blockquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer>Someone famous in
@@ -145,7 +158,7 @@
</CCard>
</CCol>
<CCol sm="6" md="4">
<CCard class="bg-warning text-center">
<CCard class="bg-warning text-center" bodyWrapper>
<blockquote class="card-blockquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer>Someone famous in
@@ -155,7 +168,7 @@
</CCard>
</CCol>
<CCol sm="6" md="4">
<CCard class="bg-danger text-center">
<CCard class="bg-danger text-center" bodyWrapper>
<blockquote class="card-blockquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer>Someone famous in
@@ -165,7 +178,7 @@
</CCard>
</CCol>
<CCol sm="6" md="4">
<CCard class="bg-secondary text-center">
<CCard class="bg-secondary text-center" bodyWrapper>
<blockquote class="card-blockquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer>Someone famous in
@@ -177,34 +190,34 @@
</CRow><!--/.row-->
<CRow>
<CCol sm="6" md="4">
<CCard header="Card title" class="bg-primary">
<CCard header="Card title" class="bg-primary" bodyWrapper>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</CCard>
</CCol>
<CCol sm="6" md="4">
<CCard header="Card title" class="bg-success">
<CCard header="Card title" class="bg-success" bodyWrapper>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</CCard>
</CCol>
<CCol sm="6" md="4">
<CCard header="Card title" class="bg-info">
<CCard header="Card title" class="bg-info" bodyWrapper>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</CCard>
</CCol>
<CCol sm="6" md="4">
<CCard header="Card title" class="bg-warning">
<CCard header="Card title" class="bg-warning" bodyWrapper>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</CCard>
</CCol>
<CCol sm="6" md="4">
<CCard header="Card title" class="bg-danger">
<CCard header="Card title" class="bg-danger" bodyWrapper>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</CCard>
</CCol>
<CCol sm="6" md="4">
<transition name="fade">
<CCard class="bg-secondary" no-body v-if="show" >
<CCardHeader slot="header">
<CCard class="bg-secondary" v-if="show" >
<CCardHeader>
Card with header actions
<div class="card-header-actions">
<CLink href="#" class="card-header-action btn-setting" >
@@ -218,7 +231,7 @@
</CLink>
</div>
</CCardHeader>
<CCollapse slot="body" :show="isCollapsed" :duration="400">
<CCollapse :show="isCollapsed" :duration="400">
<CCardBody>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</CCardBody>
@@ -229,7 +242,7 @@
</CRow>
<!-- <CRow>
<CCol sm="6" md="4">
<CCard noWrapper>
<CCard >
<CCardImg imgSrc="https://picsum.photos/600/300/?image=25"/>
<CCardHeader header="Card title"/>
<CCardBody style="max-height:200px;overflow-y:auto">
@@ -253,7 +266,8 @@ export default {
data: function () {
return {
show: true,
isCollapsed: true
isCollapsed: true,
loremIpsum: 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.'
}
}
}
src/views/base/Carousels.vue
+5 -3
View File
@@ -4,10 +4,10 @@
<CRow>
<CCol md="12" lg="9" >
<CCard>
<CCardHeader slot="header">
<CCardHeader>
<i class="fa fa-align-justify"></i>
<strong> Bootstrap Carousel</strong>
<div class="card-header-actions">
<!-- <div class="card-header-actions">
<a
href="https://bootstrap-vue.js.org/docs/components/carousel"
class="card-header-action"
@@ -16,8 +16,9 @@
>
<small class="text-muted">docs</small>
</a>
</div>
</div> -->
</CCardHeader>
<CCardBody>
<CCarousel>
<CCarouselItem
caption="First Slide"
@@ -32,6 +33,7 @@
imgSrc="https://lorempixel.com/1024/480/technics/8/"
/>
</CCarousel>
</CCardBody>
</CCard>
</CCol>
</CRow>
src/views/base/Collapses.vue
+34 -34
View File
@@ -4,41 +4,43 @@
<CRow>
<CCol cols="12" md="6">
<CCard>
<CCardHeader slot="header">
<i class="fa fa-align-justify"></i><strong> Bootstrap Collapse </strong>
<div class="Fcard-header-actions">
<a href="https://bootstrap-vue.js.org/docs/components/collapse" class="card-header-action" rel="noreferrer noopener" target="_blank">
<CCardHeader>
<i class="fa fa-align-justify"></i>
<strong> Bootstrap Collapse </strong>
<!-- <div class="card-header-actions">
<CLink class="card-header-action">
<small class="text-muted">docs</small>
</a>
</div>
</CLink>
</div> -->
</CCardHeader>
<div>
<CButton v-b-toggle.collapse1 variant="primary">Toggle Collapse</CButton>
<CCollapse id="collapse1" class="mt-2">
<CCard>
<CCardBody>
<CButton id="collapse1" variant="primary">
Toggle Collapse
</CButton>
<CCollapse toggler="collapse1" class="mt-2">
<CCard bodyWrapper>
<p class="card-text">Collapse contents Here</p>
<CButton v-b-toggle.collapse1_inner size="sm">Toggle Inner Collapse</CButton>
<CCollapse id=collapse1_inner class="mt-2">
<CButton id="collapse2" size="sm">
Toggle Inner Collapse
</CButton>
<CCollapse toggler="collapse2" class="mt-2">
<CCard>Hello!</CCard>
</CCollapse>
</CCard>
</CCollapse>
</div>
</CCardBody>
</CCard>
</CCol>
<CCol cols="12" md="6">
<!-- <CCol cols="12" md="6">
<CCard>
<CCardHeader slot="header">
<CCardHeader>
<i class="fa fa-align-justify"></i><strong> Collapse </strong> <small>with <code>v-b-toggle</code> directive</small>
</CCardHeader>
<div>
<!-- Using modifiers -->
<CButton v-b-toggle.collapse2 class="m-1">Toggle Collapse</CButton>
<!-- Using value -->
<CButton v-b-toggle="'collapse2'" class="m-1">Toggle Collapse</CButton>
<!-- element to collapse -->
<CCollapse id="collapse2">
<CCard>
I am collapsible content!
@@ -51,7 +53,7 @@
<CRow>
<CCol cols="12" md="6">
<CCard>
<CCardHeader slot="header">
<CCardHeader>
<i class="fa fa-align-justify"></i><strong> Collapse </strong> <small>with <code>visibility</code></small>
</CCardHeader>
<div>
@@ -66,7 +68,7 @@
</CCol>
<CCol cols="12" md="6">
<CCard>
<CCardHeader slot="header">
<CCardHeader>
<i class="fa fa-align-justify"></i><strong> Collapse </strong> <small>with <code>v-model</code></small>
</CCardHeader>
<div>
@@ -88,14 +90,12 @@
<CRow>
<CCol cols="12" md="6">
<CCard>
<CCardHeader slot="header">
<CCardHeader>
<i class="fa fa-align-justify"></i><strong> Collapse </strong> <small>multiple elements</small>
</CCardHeader>
<div>
<!-- Single button triggers two CCollapse components -->
<CButton v-b-toggle.collapseA.collapseB>Toggle Both Collapse A and B</CButton>
<!-- elements to collapse -->
<CCollapse id="collapseA" class="mt-2">
<CCard>
I am collapsable content A!
@@ -111,16 +111,16 @@
</CCol>
<CCol cols="12" md="6">
<CCard>
<CCardHeader slot="header">
<CCardHeader>
<i class="fa fa-align-justify"></i><strong> Collapse </strong> <small><code>accordion</code> support</small>
</CCardHeader>
<div role="tablist">
<CCard noWrapper class="mb-1">
<CCardHeader slot="header" class="p-1" role="tab">
<CCard class="mb-1">
<CCardHeader class="p-1" role="tab">
<CButton block href="#" v-b-toggle.accordion1 variant="info">Accordion 1</CButton>
</CCardHeader>
<CCollapse id="accordion1" visible accordion="my-accordion" role="tabpanel">
<CCardBody slot="body">
<CCardBody>
<p class="card-text">
I start opened because <code>visible</code> is <code>true</code>
</p>
@@ -130,24 +130,24 @@
</CCardBody>
</CCollapse>
</CCard>
<CCard noWrapper class="mb-1">
<CCardHeader slot="header" class="p-1" role="tab">
<CCard class="mb-1">
<CCardHeader class="p-1" role="tab">
<CButton block href="#" v-b-toggle.accordion2 variant="info">Accordion 2</CButton>
</CCardHeader>
<CCollapse id="accordion2" accordion="my-accordion" role="tabpanel">
<CCardBody slot="body">
<CCardBody>
<p class="card-text">
{{ text }}
</p>
</CCardBody>
</CCollapse>
</CCard>
<CCard noWrapper class="mb-1">
<CCardHeader slot="header" class="p-1" role="tab">
<CCard class="mb-1">
<CCardHeader class="p-1" role="tab">
<CButton block href="#" v-b-toggle.accordion3 variant="info">Accordion 3</CButton>
</CCardHeader>
<CCollapse id="accordion3" accordion="my-accordion" role="tabpanel">
<CCardBody slot="body">
<CCardBody>
<p class="card-text">
{{ text }}
</p>
@@ -156,7 +156,7 @@
</CCard>
</div>
</CCard>
</CCol>
</CCol> -->
</CRow>
</div>
</div>
src/views/base/Forms.vue
+89 -200
View File
@@ -3,9 +3,10 @@
<CRow>
<CCol sm="6">
<CCard>
<CCardHeader slot="header">
<CCardHeader>
<strong>Credit Card </strong> <small>Form</small>
</CCardHeader>
<CCardBody>
<CRow>
<CCol sm="12">
<CFormInput
@@ -42,13 +43,15 @@
/>
</CCol>
</CRow>
</CCardBody>
</CCard>
</CCol>
<CCol sm="6">
<CCard>
<CCardHeader slot="header">
<CCardHeader>
<strong>Company </strong><small>Form</small>
</CCardHeader>
<CCardBody>
<CFormInput
label="Company"
placeholder="Enter your company name"
@@ -79,15 +82,17 @@
label="Country"
placeholder="Country name"
/>
</CCardBody>
</CCard>
</CCol>
</CRow>
<CRow>
<CCol md="6">
<CCard>
<CCardHeader slot="header">
<CCardHeader>
<strong>Basic Form</strong> Elements
</CCardHeader>
<CCardBody>
<CForm>
<CFormInput
description="Let us know your full name."
@@ -199,16 +204,18 @@
multiple
/>
</CForm>
<CCardFooter slot="footer">
</CCardBody>
<CCardFooter>
<CButton type="submit" size="sm" variant="primary"><i class="fa fa-dot-circle-o"></i> Submit</CButton>
<CButton type="reset" size="sm" variant="danger"><i class="fa fa-ban"></i> Reset</CButton>
</CCardFooter>
</CCard>
<CCard>
<CCardHeader slot="header">
<CCardHeader>
<strong>Inline</strong> Form
</CCardHeader>
<CCardBody>
<!-- Bootstrap Vue has some problems with Inline forms that's why we use some standard bootstrap classes -->
<CForm inline>
<CFormInput
@@ -222,7 +229,8 @@
autocomplete="email"
/>
</CForm>
<CCardFooter slot="footer">
</CCardBody>
<CCardFooter>
<CButton type="submit" size="sm" variant="primary"><i class="fa fa-dot-circle-o"></i> Submit</CButton>
<CButton type="reset" size="sm" variant="danger"><i class="fa fa-ban"></i> Reset</CButton>
</CCardFooter>
@@ -230,9 +238,10 @@
</CCol>
<CCol md="6">
<CCard>
<CCardHeader slot="header">
<CCardHeader>
<strong>Horizontal</strong> Form
</CCardHeader>
<CCardBody>
<CForm>
<CFormInput
type="email"
@@ -250,17 +259,19 @@
horizontal
placeholder="Enter Password..."
/>
<CCardFooter slot="footer">
<CCardFooter>
<CButton type="submit" size="sm" variant="primary"><i class="fa fa-dot-circle-o"></i> Submit</CButton>
<CButton type="reset" size="sm" variant="danger"><i class="fa fa-ban"></i> Reset</CButton>
</CCardFooter>
</CForm>
</CCardBody>
</CCard>
<CCard>
<CCardHeader slot="header">
<CCardHeader>
<strong>Normal</strong> Form
</CCardHeader>
<CForm novalidate>
<CCardBody>
<CFormInput
type="email"
description="Please enter your email."
@@ -268,7 +279,7 @@
label="Email"
placeholder="Enter Email..."
required
was-validated
wasValidated
/>
<CFormInput
type="password"
@@ -277,18 +288,20 @@
label="Password"
placeholder="Enter Password..."
required
was-validated
wasValidated
/>
<CCardFooter slot="footer">
</CCardBody>
<CCardFooter>
<CButton type="submit" size="sm" variant="primary"><i class="fa fa-dot-circle-o"></i> Submit</CButton>
<CButton type="reset" size="sm" variant="danger"><i class="fa fa-ban"></i> Reset</CButton>
</CCardFooter>
</CForm>
</CCard>
<CCard :no-block="true">
<CCardHeader slot="header">
<CCard>
<CCardHeader>
Input <strong>Grid</strong>
</CCardHeader>
<CCardBody>
<CRow class="form-group">
<CCol sm="3">
<CFormInput class="mb-0" placeholder=".col-sm-3"/>
@@ -339,15 +352,17 @@
<CFormInput class="mb-0" placeholder=".col-sm-12"/>
</CCol>
</CRow>
<CCardFooter slot="footer">
</CCardBody>
<CCardFooter>
<CButton type="submit" size="sm" variant="primary"><i class="fa fa-user"></i> Login</CButton>
<CButton type="reset" size="sm" variant="danger"><i class="fa fa-ban"></i> Reset</CButton>
</CCardFooter>
</CCard>
<CCard>
<CCardHeader slot="header">
<CCardHeader>
Input <strong>Sizes</strong>
</CCardHeader>
<CCardBody>
<CFormInput
label="Small input"
size="sm"
@@ -365,7 +380,8 @@
horizontal
placeholder="size='lg'"
/>
<CCardFooter slot="footer">
</CCardBody>
<CCardFooter>
<CButton type="submit" size="sm" variant="primary"><i class="fa fa-dot-circle-o"></i> Submit</CButton>
<CButton type="reset" size="sm" variant="danger"><i class="fa fa-ban"></i> Reset</CButton>
</CCardFooter>
@@ -375,11 +391,11 @@
<CRow>
<CCol sm="12" md="6">
<CCard noWrapper :no-block="true">
<CCardHeader slot="header">
<CCard>
<CCardHeader>
<strong>Basic Validation</strong> Form
</CCardHeader>
<CCardBody slot="body">
<CCardBody>
<CForm validated novalidate>
<CFormInput
label="Input is valid"
@@ -396,7 +412,11 @@
</CCard>
</CCol>
<CCol sm="12" md="6">
<CCard header="<strong>Custom Validation</strong> Form">
<CCard>
<CCardHeader>
<strong>Custom Validation</strong> Form
</CCardHeader>
<CCardBody>
<CForm>
<CFormInput
label="Input is valid"
@@ -412,15 +432,17 @@
:isValid="validator"
/>
</CForm>
</CCardBody>
</CCard>
</CCol>
</CRow>
<CRow>
<CCol sm="4">
<CCard>
<CCardHeader slot="header">
<CCardHeader>
<strong>Icon/Text</strong> Groups
</CCardHeader>
<CCardBody>
<CFormInput
placeholder="Username"
prepend="<i class='fa fa-user'></i>"
@@ -436,14 +458,19 @@
placeholder="ex. $1.000.000"
append=".00"
/>
<CCardFooter slot="footer">
</CCardBody>
<CCardFooter>
<CButton type="submit" size="sm" variant="success"><i class="fa fa-dot-circle-o"></i> Submit</CButton>
<CButton type="reset" size="sm" variant="danger"><i class="fa fa-ban"></i> Reset</CButton>
</CCardFooter>
</CCard>
</CCol>
<CCol sm="4" >
<CCard header="<strong>Buttons</strong> Groups">
<CCol sm="4">
<CCard>
<CCardHeader>
<strong>Buttons</strong> Groups
</CCardHeader>
<CCardBody>
<CFormInput placeholder="Username">
<template #prepend>
<CButton variant="primary"><i class="fa fa-search"></i> Search</CButton>
@@ -470,18 +497,23 @@
<CButton variant="primary"><i class="fa fa-twitter"></i></CButton>
</template>
</CFormInput>
<CCardFooter slot="footer">
</CCardBody>
<CCardFooter>
<CButton type="submit" size="sm" variant="success"><i class="fa fa-dot-circle-o"></i> Submit</CButton>
<CButton type="reset" size="sm" variant="danger"><i class="fa fa-ban"></i> Reset</CButton>
</CCardFooter>
</CCard>
</CCol>
<CCol sm="4">
<CCard header="<strong>Dropdowns</strong> Groups">
<CCard>
<CCardHeader>
<strong>Dropdowns</strong> Groups
</CCardHeader>
<CCardBody>
<CFormInput placeholder="Username">
<template #prepend>
<CDropdown
button-content="Action"
buttonContent="Action"
variant="primary"
>
<CDropdownItem>Action</CDropdownItem>
@@ -498,7 +530,7 @@
>
<template #append>
<CDropdown
button-content="Action"
buttonContent="Action"
variant="primary"
right
>
@@ -513,7 +545,7 @@
<template #prepend>
<CDropdown
button-content="Split"
buttonContent="Split"
variant="primary"
split
>
@@ -526,7 +558,7 @@
<template #append>
<CDropdown
button-content="Action"
buttonContent="Action"
variant="primary"
right
>
@@ -538,9 +570,8 @@
</template>
</CFormInput>
<CCardFooter slot="footer">
</CCardBody>
<CCardFooter>
<CButton type="submit" size="sm" variant="success"><i class="fa fa-dot-circle-o"></i> Submit</CButton>
<CButton type="reset" size="sm" variant="danger"><i class="fa fa-ban"></i> Reset</CButton>
</CCardFooter>
@@ -550,9 +581,10 @@
<CRow>
<CCol md="6">
<CCard>
<CCardHeader slot="header">
<CCardHeader>
Use the grid for big devices! <small><code>.col-lg-*</code> <code>.col-md-*</code> <code>.col-sm-*</code></small>
</CCardHeader>
<CCardBody>
<CRow
class="form-group"
v-for="(number, key) in [4,5,6,7,8]"
@@ -565,7 +597,8 @@
<CFormInput class="mb-0" :placeholder="`.col-md-${number}`"/>
</CCol>
</CRow>
<CCardFooter slot="footer">
</CCardBody>
<CCardFooter>
<CButton size="sm" variant="primary">Action</CButton>
<CButton size="sm" variant="danger">Action</CButton>
<CButton size="sm" variant="warning">Action</CButton>
@@ -576,9 +609,10 @@
</CCol>
<CCol md="6">
<CCard>
<CCardHeader slot="header">
<CCardHeader>
Input Grid for small devices! <small> <code>.col-*</code></small>
</CCardHeader>
<CCardBody>
<CRow
class="form-group"
v-for="(number, key) in [4,5,6,7,8]"
@@ -591,7 +625,8 @@
<CFormInput class="mb-0" :placeholder="`.col-${12 - number}`"/>
</CCol>
</CRow>
<CCardFooter slot="footer">
</CCardBody>
<CCardFooter>
<CButton size="sm" variant="primary">Action</CButton>
<CButton size="sm" variant="danger">Action</CButton>
<CButton size="sm" variant="warning">Action</CButton>
@@ -604,9 +639,10 @@
<CRow>
<CCol sm="4">
<CCard>
<CCardHeader slot="header">
<CCardHeader>
Example Form
</CCardHeader>
<CCardBody>
<CForm>
<CFormInput
prepend="Username"
@@ -628,13 +664,15 @@
<CButton type="submit" size="sm" variant="primary">Submit</CButton>
</div>
</CForm>
</CCardBody>
</CCard>
</CCol>
<CCol sm="4">
<CCard>
<CCardHeader slot="header">
<CCardHeader>
Example Form
</CCardHeader>
<CCardBody>
<CForm>
<CFormInput
placeholder="Username"
@@ -656,13 +694,15 @@
<CButton type="submit" class="btn btn-sm btn-secondary">Submit</CButton>
</div>
</CForm>
</CCardBody>
</CCard>
</CCol>
<CCol sm="4">
<CCard>
<CCardHeader slot="header">
<CCardHeader>
Example Form
</CCardHeader>
<CCardBody>
<CForm>
<CFormInput
placeholder="Username"
@@ -684,17 +724,15 @@
<CButton type="submit" size="sm" variant="success">Submit</CButton>
</div>
</CForm>
</CCardBody>
</CCard>
</CCol>
</CRow>
<CRow>
<CCol lg="12">
<transition name="fade">
<CCard
v-if="show"
no-wrapper
>
<CCardHeader slot="header">
<CCard v-if="show">
<CCardHeader>
<i class="fa fa-edit"></i> Form Elements
<div class="card-header-actions">
<CLink href="#" class="card-header-action btn-setting">
@@ -702,19 +740,16 @@
</CLink>
<CLink
class="card-header-action btn-minimize"
@click="formElements=!formElements"
@click="formCollapsed=!formCollapsed"
>
<i :class="`icon-arrow-${formElements ? 'down' : 'up'}`"></i>
<i :class="`icon-arrow-${formCollapsed ? 'down' : 'up'}`"></i>
</CLink>
<CLink href="#" class="card-header-action btn-close" v-on:click="show = !show">
<i class="icon-close"></i>
</CLink>
</div>
</CCardHeader>
<CCollapse
slot="body"
:show="formElements"
>
<CCollapse :show="formCollapsed">
<CCardBody>
<CFormInput
label="Prepended text"
@@ -738,7 +773,7 @@
label="Append with button"
description="Here's some help text"
>
<template v-slot:append>
<template #append>
<CButton variant="primary">Go!</CButton>
</template>
</CFormInput>
@@ -756,152 +791,6 @@
</CCollapse>
</CCard>
</transition>
<CCard>
<!-- <CForm :id="id">
<input type="text" :value="cInput"/>
<CFormInput type="email"
label="CFormInput"
placeholder="Email input"
description="input description"
size="lg"
:readonly="false"
:plaintext="false"
:horizontal="{input: 'col-sm-8', label: 'col-sm-4'}"
:disabled="false"
validFeedback="valid feedback"
invalidFeedback="invalid feedback"
append=".00"
prepend="$"
required
:tooltipFeedbacks="true"
:isValid="validator"
:was-validateds="true"
addInputClasses="hehe"
addLabelClasses="heh2"
addWrapperClasses="heh2"
v-model="cInput"
lazys
/>
<CFormTextarea label="Input label"
placeholder="Placeholder for textarea"
descriptiond="input description"
size="lg"
:readonly="false"
:plaintext="false"
:horizontal="{input: 'col-sm-8', label: 'col-sm-4'}"
:disabled="false"
validFeedback="valid feedback"
invalidFeedback="invalid feedback"
append=".00"
prepends="$"
required
value="wsewrwed"
:tooltipFeedbacks="true"
:isValids="true"
:was-validated="true"
addInputClasses="fsad"
addLabelClassesa="heh2"
:rows="20"
:cols="12"
v-model="cInput"
>
<CButton slot="prepend" class="btn btn-success">asd</CButton>
</CFormTextarea>
<br>
<CFormSelect label="Input label"
:options="['first', true,3,{value:'fourth', text:'Another text', disabled:'disabled'},
{value:null, text:'boolean value'}]"
placeholder="Placeholder test"
description="input description"
size="lg"
customs
plaintexts
:horizontal="{input: 'col-sm-8', label: 'col-sm-4'}"
disableds="disabled"
validFeedback="valid feedback"
invalidFeedback="invalid feedback"
appenda=".00"
prepends="$"
required
:tooltipFeedback="true"
:isValidf="true"
:was-validated="true"
addInputClassess="form-control-plaintext"
addLabelClasses="heh2"
addWrapperClasses="hehe22"
v-model="selected"
>
<CButton slot="prepends" class="btn btn-success">dssdf</CButton>
</CFormSelect>
{{String(selected)}}
<CFormFile label="Input label"
description="input description"
size="lg"
:horizontals="{input: 'col-sm-8', label: 'col-sm-4'}"
:disabled="false"
validFeedback="valid feedback"
invalidFeedback="invalid feedback"
required
:tooltipFeedback="true"
:isValid="true"
:was-validateds="true"
addInputClassesa="hehe"
addLabelClassesa="heh2"
custom
multiple
accept="image/*"
/>
<div class="my-radio-group row">
<div class="col-sm-4">
My radio group
</div>
<div class="col-sm-8" >
<CFormCheckbox type="radio"
:label="String(value)"
descriptions="input description"
:disabled="false"
validFeedback="valid feedback"
invalidFeedback="invalid feedback"
required
:tooltipFeedbacks="true"
:was-validateds="true"
addLabelClassesa="heh2"
custom
name="someName"
:value="value"
v-model="checks[1]"
:key="key"
inline
v-for="(value, key) in ['first', null, 3, false]"
/>
<CFormCheckbox label="Input label"
descriptions="input description"
sizes="lg"
:disabled="false"
validFeedback="valid feedback"
invalidFeedback="invalid feedback"
required
:tooltipFeedback="true"
:was-validated="true"
addInputClassesa="hehe"
addLabelClassesa="heh2"
:isValidss="true"
value="hehes"
custom="radio"
v-model="checks[0]"
/>
</div>
</div>
</CForm>
<CSpinner variant="success"/>
<CSpinner grow/>
<CSpinner small />
<CSpinner small grow/>
<CSpinner grow tag="span"/> -->
</CCard>
</CCol>
</CRow>
</div>
@@ -925,7 +814,7 @@ export default {
testkkk: 2,
horizontal: { label:'col-3', input:'col-9' },
options: ['Option 1', 'Option 2', 'Option 3'],
formElements: true,
formCollapsed: true,
checkboxNames: ['Radios', 'Inline Radios',
'Checkboxes', 'Inline Checkboxes',
'Radios - custom', 'Inline Radios - custom',
src/views/base/Jumbotrons.vue
+15 -14
View File
@@ -4,29 +4,30 @@
<CRow>
<CCol>
<CCard>
<CCardHeader slot="header">
<i class="fa fa-align-justify"></i> <strong> Bootstrap Jumbotron </strong>
<div class="card-header-actions">
<CCardHeader>
<i class="fa fa-align-justify"></i>
<strong> Bootstrap Jumbotron </strong>
<!-- <div class="card-header-actions">
<a href="https://bootstrap-vue.js.org/docs/components/jumbotron" class="card-header-action" rel="noreferrer noopener" target="_blank">
<small class="text-muted">docs</small>
</a>
</div>
</div> -->
</CCardHeader>
<div>
<CCardBody>
<CJumbotron header="Bootstrap 4" lead="Bootstrap 4 Components for Vue.js 2">
<p>For more information visit website</p>
<CButton variant="primary" href="#">More Info</CButton>
</CJumbotron>
</div>
</CCardBody>
</CCard>
</CCol>
<CCol>
<CCard>
<CCardHeader slot="header">
<CCardHeader>
<i class="fa fa-align-justify"></i> <strong> Jumbotron </strong>
<small>with slots</small>
</CCardHeader>
<div>
<CCardBody>
<CJumbotron header="Bootstrap 4" lead="">
<p slot="lead" class="lead">
This is a simple hero unit, a simple jumbotron-style component for
@@ -40,21 +41,21 @@
<CButton variant="primary" href="#">Do Something</CButton>
<CButton variant="success" href="#">Do Something Else</CButton>
</CJumbotron>
</div>
</CCardBody>
</CCard>
</CCol>
</CRow>
<CRow>
<CCol>
<CCard>
<CCardHeader slot="header">
<CCardHeader>
<i class="fa fa-align-justify"></i> <strong> Jumbotron </strong>
<small>variants</small>
</CCardHeader>
<div>
<CCardBody>
<CJumbotron variant="info"
text-variant="white"
border-variant="dark"
textVariant="white"
borderVariant="dark"
header="Bootstrap 4">
<p slot="lead" class="lead">
@@ -67,7 +68,7 @@
out within the larger container.
</p>
</CJumbotron>
</div>
</CCardBody>
</CCard>
</CCol>
</CRow>
src/views/base/ListGroups.vue
+51 -32
View File
@@ -1,29 +1,19 @@
<template>
<div class="wrapper">
<div class="animated fadeIn">
<!-- <CRow>
<CCol>
<CCard>
<CMedia asideClasses="m-5 align-self-end" asideRight>
<img slot="aside" src="img/avatars/6.jpg">
<div class="text-center">
ehhehefgofdjdjfd<br><br><br><br><br><br><br><br><br><br><br><br>dfs
</div>
</CMedia>
</CCard>
</CCol>
</CRow> -->
<CRow>
<CCol md="6">
<CCard>
<CCardHeader slot="header">
<i class="fa fa-align-justify"></i><strong> Bootstrap list group </strong>
<div class="card-header-actions">
<CCardHeader>
<i class="fa fa-align-justify"></i>
<strong> Bootstrap list group </strong>
<!-- <div class="card-header-actions">
<a href="https://bootstrap-vue.js.org/docs/components/list-group" class="card-header-action" rel="noreferrer noopener" target="_blank">
<small class="text-muted">docs</small>
</a>
</div>
</div> -->
</CCardHeader>
<CCardBody>
<CListGroup>
<CListGroupItem>Cras justo odio</CListGroupItem>
<CListGroupItem>Dapibus ac facilisis in</CListGroupItem>
@@ -31,13 +21,15 @@
<CListGroupItem>Porta ac consectetur ac</CListGroupItem>
<CListGroupItem>Vestibulum at eros</CListGroupItem>
</CListGroup>
</CCardBody>
</CCard>
</CCol>
<CCol md="6">
<CCard>
<CCardHeader slot="header">
<CCardHeader>
<i class="fa fa-align-justify"></i><strong> List group </strong><small>active items</small>
</CCardHeader>
<CCardBody>
<CListGroup>
<CListGroupItem>Cras justo odio</CListGroupItem>
<CListGroupItem active>Dapibus ac facilisis in</CListGroupItem>
@@ -45,15 +37,19 @@
<CListGroupItem>Porta ac consectetur ac</CListGroupItem>
<CListGroupItem>Vestibulum at eros</CListGroupItem>
</CListGroup>
</CCardBody>
</CCard>
</CCol>
</CRow>
<CRow>
<CCol md="6">
<CCard>
<CCardHeader slot="header">
<i class="fa fa-align-justify"></i><strong> List group </strong><small>disabled items</small>
<CCardHeader>
<i class="fa fa-align-justify"></i>
<strong> List group </strong>
<small>disabled items</small>
</CCardHeader>
<CCardBody>
<CListGroup>
<CListGroupItem disabled>Cras justo odio</CListGroupItem>
<CListGroupItem>Dapibus ac facilisis in</CListGroupItem>
@@ -61,41 +57,53 @@
<CListGroupItem disabled>Porta ac consectetur ac</CListGroupItem>
<CListGroupItem>Vestibulum at eros</CListGroupItem>
</CListGroup>
</CCardBody>
</CCard>
</CCol>
<CCol md="6">
<CCard>
<CCardHeader slot="header">
<i class="fa fa-align-justify"></i><strong> List group </strong><small>actionable items</small>
<CCardHeader>
<i class="fa fa-align-justify"></i>
<strong> List group </strong>
<small>actionable items</small>
</CCardHeader>
<CCardBody>
<CListGroup>
<CListGroupItem href="#some-link">Awesome link</CListGroupItem>
<CListGroupItem href="#" active>Link with active state</CListGroupItem>
<CListGroupItem href="#">Action links are easy</CListGroupItem>
<CListGroupItem href="#foobar" disabled>Disabled link</CListGroupItem>
</CListGroup>
</CCardBody>
</CCard>
</CCol>
</CRow>
<CRow>
<CCol md="6">
<CCard>
<CCardHeader slot="header">
<i class="fa fa-align-justify"></i><strong> List group </strong><small>buttons</small>
<CCardHeader>
<i class="fa fa-align-justify"></i>
<strong> List group </strong>
<small>buttons</small>
</CCardHeader>
<CCardBody>
<CListGroup>
<CListGroupItem tag="button">Button item</CListGroupItem>
<CListGroupItem tag="button">I am a button</CListGroupItem>
<CListGroupItem tag="button" disabled>Disabled button</CListGroupItem>
<CListGroupItem tag="button">This is a button too</CListGroupItem>
</CListGroup>
</CCardBody>
</CCard>
</CCol>
<CCol md="6">
<CCard>
<CCardHeader slot="header">
<i class="fa fa-align-justify"></i><strong> List group </strong><small>with badges</small>
<CCardHeader>
<i class="fa fa-align-justify"></i>
<strong> List group </strong>
<small>with badges</small>
</CCardHeader>
<CCardBody>
<CListGroup>
<CListGroupItem class="d-flex justify-content-between align-items-center">
Cras justo odio
@@ -110,17 +118,19 @@
<CBadge variant="primary" pill>1</CBadge>
</CListGroupItem>
</CListGroup>
</CCardBody>
</CCard>
</CCol>
</CRow>
<CRow>
<CCol md="6">
<CCard>
<CCardHeader slot="header">
<CCardHeader>
<i class="fa fa-align-justify"></i>
<strong> List group </strong>
<small>variants</small>
</CCardHeader>
<CCardBody>
<CListGroup>
<CListGroupItem>This is a default list group item</CListGroupItem>
<CListGroupItem variant="primary">This is a primary list group item</CListGroupItem>
@@ -132,15 +142,17 @@
<CListGroupItem variant="light">This is a light list group item</CListGroupItem>
<CListGroupItem variant="dark">This is a dark list group item</CListGroupItem>
</CListGroup>
</CCardBody>
</CCard>
</CCol>
<CCol md="6">
<CCard>
<CCardHeader slot="header">
<CCardHeader>
<i class="fa fa-align-justify"></i>
<strong> List group </strong>
<small>variants active</small>
</CCardHeader>
<CCardBody>
<CListGroup>
<CListGroupItem href="#">This is a default list group item</CListGroupItem>
<CListGroupItem href="#" variant="primary">This is a primary list group item</CListGroupItem>
@@ -152,15 +164,19 @@
<CListGroupItem href="#" variant="light">This is a light list group item</CListGroupItem>
<CListGroupItem href="#" variant="dark">This is a dark list group item</CListGroupItem>
</CListGroup>
</CCardBody>
</CCard>
</CCol>
</CRow>
<CRow>
<CCol cols="12">
<CCard>
<CCardHeader slot="header">
<i class="fa fa-align-justify"></i><strong> List group </strong><small>inside cards</small>
<CCardHeader>
<i class="fa fa-align-justify"></i>
<strong> List group </strong>
<small>inside cards</small>
</CCardHeader>
<CCardBody>
<CCardGroup deck>
<CCard header="<b>Card with list group</b>">
<CListGroup>
@@ -175,13 +191,13 @@
ad sit ipsum anim Lorem.
</p>
</CCard>
<CCard noWrapper header="<b>Card with flush list group</b>">
<CCard header="<b>Card with flush list group</b>">
<CListGroup flush>
<CListGroupItem href="#">Cras justo odio</CListGroupItem>
<CListGroupItem href="#">Dapibus ac facilisis in</CListGroupItem>
<CListGroupItem href="#">Vestibulum at eros</CListGroupItem>
</CListGroup>
<CCardBody slot="body">
<CCardBody>
Quis magna Lorem anim amet ipsum do mollit sit cillum voluptate ex
nulla tempor. Laborum consequat non elit enim exercitation cillum aliqua
consequat id aliqua. Esse ex consectetur mollit voluptate est in duis laboris
@@ -189,15 +205,17 @@
</CCardBody>
</CCard>
</CCardGroup>
</CCardBody>
</CCard>
</CCol>
</CRow>
<CRow>
<CCol md="6">
<CCard>
<CCardHeader slot="header">
<CCardHeader>
<i class="fa fa-align-justify"></i><strong> List group </strong><small>custom content</small>
</CCardHeader>
<CCardBody>
<CListGroup>
<CListGroupItem href="#" active class="flex-column align-items-start">
<div class="d-flex w-100 justify-content-between">
@@ -233,6 +251,7 @@
<small class="text-muted">Donec id elit non mi porta.</small>
</CListGroupItem>
</CListGroup>
</CCardBody>
</CCard>
</CCol>
</CRow>
src/views/base/Navbars.vue
+26 -23
View File
@@ -31,14 +31,16 @@
</CNavbar>
</CCard> -->
<CCard>
<CCardHeader slot="header">
<i class="fa fa-align-justify"></i><strong> Bootstrap Navbar </strong>
<div class="card-header-actions">
<CCardHeader>
<i class="fa fa-align-justify"></i>
<strong> Bootstrap Navbar </strong>
<!-- <div class="card-header-actions">
<a href="https://bootstrap-vue.js.org/docs/components/navbar" class="card-header-action" rel="noreferrer noopener" target="_blank">
<small class="text-muted">docs</small>
</a>
</div>
</div> -->
</CCardHeader>
<CCardBody>
<CNavbar toggleable="md" type="dark" variant="info">
<CNavbarToggle @click="show=!show"/>
<CNavbarBrand href="#">NavBar</CNavbarBrand>
@@ -61,7 +63,7 @@
<CButton size="sm" class="my-2 my-sm-0" type="submit">Search</CButton>
</CForm>
<CDropdown button-content="Lang"
<CDropdown buttonContent="Lang"
nav
placement="bottom-end"
>
@@ -72,7 +74,7 @@
</CDropdown>
<CDropdown nav
button-content="<em>User</em>"
buttonContent="<em>User</em>"
placement="bottom-end"
>
<CDropdownItem>Profile</CDropdownItem>
@@ -81,13 +83,14 @@
</CNavbarNav>
</CCollapse>
</CNavbar>
</CCardBody>
</CCard>
<CCard>
<CCardHeader slot="header">
<CCardHeader>
<i class="fa fa-align-justify"></i> <strong> Navbar </strong>
<small>brand</small>
</CCardHeader>
<div>
<CCardBody>
<!-- Image and text -->
<CNavbar variant="faded" light>
<CNavbarBrand href="#">
@@ -95,14 +98,14 @@
BootstrapVue
</CNavbarBrand>
</CNavbar>
</div>
</CCardBody>
</CCard>
<CCard>
<CCardHeader slot="header">
<CCardHeader>
<i class="fa fa-align-justify"></i> <strong> Navbar </strong>
<small>text</small>
</CCardHeader>
<div>
<CCardBody>
<CNavbar toggleable="sm" light variant="light">
<CNavbarToggle @click="navbarText=!navbarText"></CNavbarToggle>
<CNavbarBrand>BootstrapVue</CNavbarBrand>
@@ -112,14 +115,14 @@
</CNavbarNav>
</CCollapse>
</CNavbar>
</div>
</CCardBody>
</CCard>
<CCard>
<CCardHeader slot="header">
<CCardHeader>
<i class="fa fa-align-justify"></i> <strong> Navbar </strong>
<small>dropdown</small>
</CCardHeader>
<div>
<CCardBody>
<CNavbar type="dark" variant="primary">
<!-- <CNavbarToggle @click="navbarDropdown = !navbarDropdown"></CNavbarToggle>
<CCollapse :show="navbarDropdown" navbar> -->
@@ -127,27 +130,27 @@
<CNavItem href="#">Home</CNavItem>
<CNavItem href="#">Link</CNavItem>
<!-- Navbar dropdowns -->
<CDropdown button-content="Lang" right nav>
<CDropdown buttonContent="Lang" right nav>
<CDropdownItem>EN</CDropdownItem>
<CDropdownItem>ES</CDropdownItem>
<CDropdownItem>RU</CDropdownItem>
<CDropdownItem>FA</CDropdownItem>
</CDropdown>
<CDropdown button-content="User" right nav>
<CDropdown buttonContent="User" right nav>
<CDropdownItem>Account</CDropdownItem>
<CDropdownItem>Settings</CDropdownItem>
</CDropdown>
</CNavbarNav>
<!-- </CCollapse> -->
</CNavbar>
</div>
</CCardBody>
</CCard>
<CCard>
<CCardHeader slot="header">
<CCardHeader>
<i class="fa fa-align-justify"></i> <strong> Navbar </strong>
<small>form</small>
</CCardHeader>
<div>
<CCardBody>
<CNavbar type="light" variant="light">
<CForm inline>
<CFormInput
@@ -158,14 +161,14 @@
<CButton variant="outline-success" class="my-2 my-sm-0" type="submit">Search</CButton>
</CForm>
</CNavbar>
</div>
</CCardBody>
</CCard>
<CCard>
<CCardHeader slot="header">
<CCardHeader>
<i class="fa fa-align-justify"></i> <strong> Navbar </strong>
<small>input group</small>
</CCardHeader>
<div>
<CCardBody>
<CNavbar type="light" variant="light">
<CForm inline>
<CFormInput
@@ -174,7 +177,7 @@
/>
</CForm>
</CNavbar>
</div>
</CCardBody>
</CCard>
</div>
</div>
src/views/base/Navs.vue
+47 -32
View File
@@ -2,28 +2,33 @@
<div class="wrapper">
<div class="animated fadeIn">
<CCard>
<CCardHeader slot="header">
<CCardHeader>
<i class="fa fa-align-justify"></i><strong> Bootstrap Navs</strong>
<div class="card-header-actions">
<a href="https://bootstrap-vue.js.org/docs/components/nav" class="card-header-action" rel="noreferrer noopener" target="_blank">
<!-- <div class="card-header-actions">
<CLink
href="#"
class="card-header-action"
>
<small class="text-muted">docs</small>
</a>
</div>
</CLink>
</div> -->
</CCardHeader>
<div>
<CCardBody>
<CNav>
<CNavItem active>Active</CNavItem>
<CNavItem title="Link"/>
<CNavItem>Another Link</CNavItem>
<CNavItem disabled>Disabled</CNavItem>
</CNav>
</div>
</CCardBody>
</CCard>
<CCard>
<CCardHeader slot="header">
<i class="fa fa-align-justify"></i><strong> Bootstrap Navs </strong><small>icons</small>
<CCardHeader>
<i class="fa fa-align-justify"></i>
<strong> Bootstrap Navs </strong>
<small>icons</small>
</CCardHeader>
<div>
<CCardBody>
<CNav>
<CNavItem active>
<i class="icon-basket-loaded"></i>
@@ -36,13 +41,15 @@
</CNavItem>
<CNavItem disabled>Disabled</CNavItem>
</CNav>
</div>
</CCardBody>
</CCard>
<CCard>
<CCardHeader slot="header">
<i class="fa fa-align-justify"></i><strong> Bootstrap Navs </strong><small>tab style</small>
<CCardHeader>
<i class="fa fa-align-justify"></i>
<strong> Bootstrap Navs </strong>
<small>tab style</small>
</CCardHeader>
<div>
<CCardBody>
<CNav tabs>
<CNavItem active>
Active
@@ -55,61 +62,67 @@
</CNavItem>
<CNavItem disabled>Disabled</CNavItem>
</CNav>
</div>
</CCardBody>
</CCard>
<CCard>
<CCardHeader slot="header" @click="item++">
<i class="fa fa-align-justify"></i><strong> Bootstrap Navs </strong><small>pill style</small>
<CCardHeader @click="item++">
<i class="fa fa-align-justify"></i>
<strong> Bootstrap Navs </strong>
<small>pill style</small>
</CCardHeader>
<div>
<CCardBody>
<CNav pills>
<CNavItem active>Active</CNavItem>
<CNavItem>Link</CNavItem>
<CNavItem>Another Link</CNavItem>
<CNavItem disabled>Disabled</CNavItem>
</CNav>
</div>
</CCardBody>
</CCard>
<CCard>
<CCardHeader slot="header">
<i class="fa fa-align-justify"></i><strong> Bootstrap Navs </strong><small>fill tabs</small>
<CCardHeader>
<i class="fa fa-align-justify"></i>
<strong> Bootstrap Navs </strong>
<small>fill tabs</small>
</CCardHeader>
<div>
<CCardBody>
<CNav fill tabs>
<CNavItem active>Active</CNavItem>
<CNavItem>Link</CNavItem>
<CNavItem>Link with a long name </CNavItem>
<CNavItem disabled>Disabled</CNavItem>
</CNav>
</div>
</CCardBody>
</CCard>
<CCard>
<CCardHeader slot="header">
<i class="fa fa-align-justify"></i><strong> Bootstrap Navs </strong><small>justified tabs</small>
<CCardHeader>
<i class="fa fa-align-justify"></i>
<strong> Bootstrap Navs </strong>
<small>justified tabs</small>
</CCardHeader>
<div>
<CCardBody>
<CNav justified tabs>
<CNavItem active>Active</CNavItem>
<CNavItem>Link</CNavItem>
<CNavItem>Link with a long name </CNavItem>
<CNavItem disabled>Disabled</CNavItem>
</CNav>
</div>
</CCardBody>
</CCard>
<CCard>
<CCardHeader slot="header">
<CCardHeader>
<i class="fa fa-align-justify"></i>
<strong> Bootstrap Navs </strong>
<small>dropdown support</small>
</CCardHeader>
<div>
<CCardBody>
<CNav pills>
<CNavItem active>Active</CNavItem>
<CNavItem>Link</CNavItem>
<CDropdown id="nav7_ddown"
nav
placement="bottom-end"
button-content="Dropdown"
buttonContent="Dropdown"
>
<!-- <a class="nav-link dropdown-toggle" slot="button">Dropdown</a> -->
<CDropdownItem>one</CDropdownItem>
@@ -118,14 +131,15 @@
<CDropdownItem>three</CDropdownItem>
</CDropdown>
</CNav>
</div>
</CCardBody>
</CCard>
<CCard>
<CCardHeader slot="header">
<CCardHeader>
<i class="fa fa-align-justify"></i>
<strong> Bootstrap Navs </strong>
<small>vertical variation</small>
</CCardHeader>
<CCardBody>
<CRow>
<CCol cols="3" class="m-0">
<CNav vertical pills >
@@ -136,6 +150,7 @@
</CNav>
</CCol>
</CRow>
</CCardBody>
</CCard>
</div>
</div>
src/views/base/Paginations.vue
+8 -8
View File
@@ -2,15 +2,15 @@
<div class="wrapper">
<div class="animated fadeIn">
<CCard>
<CCardHeader slot="header">
<CCardHeader>
<i class="fa fa-align-justify"></i><strong> Bootstrap Pagination</strong>
<div class="card-header-actions">
<!-- <div class="card-header-actions">
<a href="https://bootstrap-vue.js.org/docs/components/pagination" class="card-header-action" rel="noreferrer noopener" target="_blank">
<small class="text-muted">docs</small>
</a>
</div>
</div> -->
</CCardHeader>
<div>
<CCardBody>
<h6>Default</h6>
<CPagination v-model="currentPage" :pages="10"/>
<br>
@@ -26,14 +26,14 @@
</div>
<div>currentPage: {{currentPage}}</div>
</div>
</CCardBody>
</CCard>
<CCard>
<CCardHeader slot="header">
<CCardHeader>
<i class="fa fa-align-justify"></i><strong> Pagination </strong>
<small>alignment</small>
</CCardHeader>
<div>
<CCardBody>
<h6>Left alignment (default)</h6>
<CPagination v-model="currentPage" :pages="10"/>
<br>
@@ -47,7 +47,7 @@
<br>
<div>currentPage: {{currentPage}}</div>
</div>
</CCardBody>
</CCard>
</div>
</div>
src/views/base/Popovers.vue
+35 -140
View File
@@ -2,19 +2,22 @@
<div class="wrapper">
<div class="animated fadeIn">
<CCard>
<CCardHeader slot="header">
<i class="fa fa-align-justify"></i><strong> Bootstrap Popovers</strong>
<div class="card-header-actions">
<CCardHeader>
<i class="fa fa-align-justify"></i>
<strong> Bootstrap Popovers</strong>
<!-- <div class="card-header-actions">
<a href="https://bootstrap-vue.js.org/docs/components/popovers" class="card-header-action" rel="noreferrer noopener" target="_blank">
<small class="text-muted">docs</small>
</a>
</div>
</div> -->
</CCardHeader>
<CCardBody>
<CRow>
<CCol cols="6">
<CCol cols="4">
<div class="my-3 text-center">
<CButton
v-c-popover.hover="{
variant="primary"
v-c-popover="{
header: 'Popover header',
content: 'I am popover content!'
}"
@@ -23,27 +26,43 @@
</CButton>
</div>
</CCol>
<CCol cols="6">
<CCol cols="4">
<div class="my-3 text-center">
<CButton
variant="primary"
v-c-popover.hover.active="{
v-c-popover="{
header: 'Popover!',
content: 'I start <strong>open</strong>'
content: 'I start <strong>open</strong>',
active: true
}"
text="Hover me"
/>
</div>
</CCol>
<CCol cols="4">
<div class="my-3 text-center">
<CButton
variant="primary"
v-c-popover.click="{
header: 'Popover!',
content: 'I am showing on click and hiding on click outside tooltip!',
placement: 'bottom'
}"
>
Button
Click me
</CButton>
</div>
</CCol>
</CRow>
</CCardBody>
</CCard>
<CCard>
<CCardHeader slot="header">
<i class="fa fa-align-justify"></i><strong> Popovers </strong>
<CCardHeader>
<i class="fa fa-align-justify"></i>
<strong> Popovers </strong>
<small>placement</small>
</CCardHeader>
<div class="my-3">
<CCardBody class="my-3">
<CRow>
<CCol
md="4"
@@ -53,7 +72,7 @@
>
<CButton
variant="primary"
v-c-popover.hover.focus="{
v-c-popover="{
header: 'Popover!',
content: `Placement ${placement}`,
placement
@@ -63,116 +82,8 @@
</CButton>
</CCol>
</CRow>
</div>
</CCardBody>
</CCard>
<!-- <CCard class="d-sm-down-none">
<CCardHeader slot="header">
<i class="fa fa-align-justify"></i><strong> Popovers </strong>
<small>via properties or slots</small>
</CCardHeader>
<CRow>
<CCol md="6" class="py-4 text-center">
<CButton id="exPopover2" variant="primary">Using properties</CButton>
<b-popover target="exPopover2"
title="Prop Examples"
triggers="hover focus"
content="Embedding content using properties is easy">
</b-popover>
</CCol>
<CCol md="6" class="py-4 text-center">
<CButton id="exPopover3" variant="primary">Using slots</CButton>
<b-popover target="exPopover3" triggers="hover focus">
<template slot="title">Content via Slots</template>
Embedding content <span class="text-danger">using slots</span>
affords you <em>greater <strong>control.</strong></em> and
basic HTML support.
</b-popover>
</CCol>
</CRow>
</CCard>
<CCard>
<CCardHeader slot="header">
<i class="fa fa-align-justify"></i><strong> Popovers </strong>
<small>show</small>
</CCardHeader>
<div class="d-flex flex-column text-md-center">
<div class="p-2">
<CButton id="popoverButton-sync" variant="primary">I have a popover</CButton>
</div>
<div class="p-2">
<CButton class="px-1" @click="show = !show">Toggle Popover</CButton>
<b-popover :show.sync="show" target="popoverButton-sync" title="Popover">
Hello <strong>World!</strong>
</b-popover>
</div>
</div>
</CCard>
<CCard>
<CCardHeader slot="header">
<i class="fa fa-align-justify"></i><strong> Popover </strong>
<small>open/close events</small>
</CCardHeader>
<div class="d-flex flex-column text-md-center">
<div class="p-2">
<CButton id="popoverButton-event" variant="primary">I have a popover</CButton>
</div>
<div class="p-2">
<CButton class="px-1" @click="onOpen">Open</CButton>
<CButton class="px-1" @click="onClose">Close</CButton>
</div>
<b-popover ref="popover1" target="popoverButton-event" title="Popover">
Hello <strong>World!</strong>
</b-popover>
</div>
</CCard>
<CCard>
<CCardHeader slot="header">
<i class="fa fa-align-justify"></i><strong> Popover </strong>
<small>enable/disable events</small>
</CCardHeader>
<div class="d-flex flex-column text-md-center">
<div class="p-2">
<CButton id="popoverButton-disableevent" variant="primary">I have a popover</CButton>
</div>
<div class="p-2">
<CButton class="px-1" @click="onEnable">Enable</CButton>
<CButton class="px-1" @click="onDisable">Disable</CButton>
</div>
<b-popover ref="popover2" target="popoverButton-disableevent" title="Popover">
Hello <strong>World!</strong>
</b-popover>
</div>
</CCard> -->
<!-- <CCard>
<CCardHeader slot="header">
<i class="fa fa-align-justify"></i><strong> Popover </strong><small><code>v-b-popover</code> directive</small>
</CCardHeader>
<CRow>
<CCol md="3" class="py-3 text-center">
<CButton v-b-popover.hover.top="'I am Top'"
title="Popover!"
variant="primary">Top</CButton>
</CCol>
<CCol md="3" class="py-3 text-center">
<CButton v-b-popover.hover.left="'I am Left'"
title="Popover!"
variant="primary">Left</CButton>
</CCol>
<CCol md="3" class="py-3 text-center">
<CButton v-b-popover.hover.right="'I am Right'"
title="Popover!"
variant="primary">Right</CButton>
</CCol>
<CCol md="3" class="py-3 text-center">
<CButton v-b-popover.hover.bottom="'I am Bottom'"
title="Popover!"
variant="primary">Bottom</CButton>
</CCol>
</CRow>
</CCard> -->
</div>
</div>
</template>
@@ -187,23 +98,7 @@ export default {
'bottom-start', 'bottom', 'bottom-end',
'right-start', 'right', 'right-end',
'left-start', 'left', 'left-end'
],
show: false,
counter: 0
}
},
methods: {
onOpen () {
this.$refs.popover1.$emit('open')
},
onClose () {
this.$refs.popover1.$emit('close')
},
onEnable () {
this.$refs.popover2.$emit('enable')
},
onDisable () {
this.$refs.popover2.$emit('disable')
]
}
}
}
src/views/base/ProgressBars.vue
+28 -27
View File
@@ -2,15 +2,16 @@
<div class="wrapper">
<div class="animated fadeIn">
<CCard>
<CCardHeader slot="header">
<i class="fa fa-align-justify"></i><strong> Bootstrap Progress</strong>
<div class="card-header-actions">
<CCardHeader>
<i class="fa fa-align-justify"></i>
<strong> Bootstrap Progress</strong>
<!-- <div class="card-header-actions">
<a href="https://bootstrap-vue.js.org/docs/components/progress" class="card-header-action" rel="noreferrer noopener" target="_blank">
<small class="text-muted">docs</small>
</a>
</div>
</div> -->
</CCardHeader>
<div>
<CCardBody>
<CProgress :value="counter" :max="max" show-progress animated></CProgress>
<CProgress class="mt-1" :max="max" show-value>
<CProgressBar :value="counter*(6/10)" variant="success"/>
@@ -18,13 +19,13 @@
<CProgressBar :value="counter*(1.5/10)" variant="danger"/>
</CProgress>
<CButton class="mt-4" @click="clicked">Click me</CButton>
</div>
</CCardBody>
</CCard>
<CCard>
<CCardHeader slot="header">
<CCardHeader>
<i class="fa fa-align-justify"></i> <strong> Progress </strong><small>labels</small>
</CCardHeader>
<div>
<CCardBody>
<h6>No label</h6>
<CProgress :value="value" :max="max2" class="mb-3"></CProgress>
<h6>Value label</h6>
@@ -35,39 +36,39 @@
<CProgress :value="value" :max="max2" :precision="2" show-value class="mb-3"></CProgress>
<h6>Progress label with precision</h6>
<CProgress :value="value" :max="max2" :precision="2" show-progress class="mb-3"></CProgress>
</div>
</CCardBody>
</CCard>
<CCard>
<CCardHeader slot="header">
<CCardHeader>
<i class="fa fa-align-justify"></i><strong> Progress </strong><small>width</small>
</CCardHeader>
<div>
<CCardBody>
<h6>Default width</h6>
<CProgress :value="value3" class="mb-3"></CProgress>
<h6>Custom widths</h6>
<CProgress :value="value3" class="w-75 mb-2"></CProgress>
<CProgress :value="value3" class="w-50 mb-2"></CProgress>
<CProgress :value="value3" class="w-25"></CProgress>
</div>
</CCardBody>
</CCard>
<CCard>
<CCardHeader slot="header">
<CCardHeader>
<i class="fa fa-align-justify"></i><strong> Progress </strong><small>height</small>
</CCardHeader>
<div>
<CCardBody>
<h6>Default height</h6>
<CProgress :value="value3" show-progress class="mb-3"></CProgress>
<h6>Custom heights</h6>
<CProgress height="2rem" :value="value3" show-progress class="mb-2"></CProgress>
<CProgress height="20px" :value="value3" show-progress class="mb-2"></CProgress>
<CProgress height="2px" :value="value3"></CProgress>
</div>
</CCardBody>
</CCard>
<CCard>
<CCardHeader slot="header">
<CCardHeader>
<i class="fa fa-align-justify"></i><strong> Progress </strong><small>variants</small>
</CCardHeader>
<div>
<CCardBody>
<div :key="index" v-for="(bar, index) in bars" class="row mb-1">
<div class="col-sm-2">{{ bar.variant }}:</div>
<div class="col-sm-10 pt-1">
@@ -77,13 +78,13 @@
></CProgress>
</div>
</div>
</div>
</CCardBody>
</CCard>
<CCard>
<CCardHeader slot="header">
<CCardHeader>
<i class="fa fa-align-justify"></i><strong> Progress </strong><small>striped</small>
</CCardHeader>
<div>
<CCardBody>
<CProgress :value="25" variant="success" :striped="striped" class="mb-2"></CProgress>
<CProgress :value="50" variant="info" :striped="striped" class="mb-2"></CProgress>
<CProgress :value="75" variant="warning" :striped="striped" class="mb-2"></CProgress>
@@ -91,13 +92,13 @@
<CButton variant="secondary" @click="striped = !striped">
{{ striped ? 'Remove' : 'Add'}} Striped
</CButton>
</div>
</CCardBody>
</CCard>
<CCard>
<CCardHeader slot="header">
<CCardHeader>
<i class="fa fa-align-justify"></i><strong> Progress </strong><small>animated</small>
</CCardHeader>
<div>
<CCardBody>
<CProgress :value="25" variant="success" striped :animated="animate" class="mb-2"></CProgress>
<CProgress :value="50" variant="info" striped :animated="animate" class="mb-2"></CProgress>
<CProgress :value="75" variant="warning" striped :animated="animate" class="mb-2"></CProgress>
@@ -105,13 +106,13 @@
<CButton variant="secondary" @click="animate = !animate">
{{ animate ? 'Stop' : 'Start'}} Animation
</CButton>
</div>
</CCardBody>
</CCard>
<CCard>
<CCardHeader slot="header">
<CCardHeader>
<i class="fa fa-align-justify"></i><strong> Progress </strong><small>multiple bars</small>
</CCardHeader>
<div>
<CCardBody>
<CProgress :max="max3" class="mb-3">
<CProgressBar variant="primary" :value="values[0]"></CProgressBar>
<CProgressBar variant="success" :value="values[1]"></CProgressBar>
@@ -132,7 +133,7 @@
<CProgressBar variant="success" :value="values[1]" animated show-progress></CProgressBar>
<CProgressBar variant="info" :value="values[2]" striped show-progress></CProgressBar>
</CProgress>
</div>
</CCardBody>
</CCard>
</div>
</div>
src/views/base/Switches.vue
+80 -60
View File
@@ -1,20 +1,17 @@
<template>
<div class="animated fadeIn">
<!-- <p>myFlag1: {{radio}}</p>
<p>myFlag1: {{myFlag1}}</p>
<p>myFlag2: {{myFlag2}}</p>
<CSwitch v-model="myFlag1"/>
<CSwitch v-model="myFlag2" checked @change="test" /> -->
<CRow>
<CCol xs="12" md="6">
<CCard v-if="true">
<CCardHeader slot="header">
<CCardHeader>
<h5>
Radio switches
<CBadge :variant="radio" class="mr-auto">{{radio}}</CBadge>
<CBadge variant="danger" class="float-right">NEW</CBadge>
</h5>
</CCardHeader>
<CCardBody>
<!-- <CSwitch class="mx-1" variant="primary" shape="3d" outline="alt" v-bind="labelIcon" type="radio" name="radio" v-model="radio" trueValue="primary"/> -->
<CSwitch class="mx-1"
:key="key"
@@ -28,16 +25,18 @@
:value="variant"
v-for="(variant, key) in ['primary','secondary','warning','success','info','danger','light','dark']"
/>
</CCardBody>
</CCard>
</CCol>
</CRow>
<CRow>
<CCol xs="12" md="6">
<CCard>
<CCardHeader slot="header">
<CCardHeader>
Switch default
<CBadge variant="primary">{{checker}}</CBadge>
</CCardHeader>
<CCardBody>
<CSwitch class="mx-1"
variant="primary"
checked
@@ -48,7 +47,6 @@
falseValue="no"
/>
<CSwitch class="mx-1"
ref="totest"
variant="primary"
checked
name="switch1"
@@ -62,13 +60,15 @@
v-for="(variant, key) in ['secondary', 'success','warning','info','danger','light','dark','primary']"
/>
<CSwitch class="mx-1" variant="primary" disabled />
</CCardBody>
</CCard>
</CCol>
<CCol xs="12" md="6">
<CCard>
<CCardHeader slot="header">
<CCardHeader>
Switch pills
</CCardHeader>
<CCardBody>
<CSwitch class="mx-1" variant="primary" checked shape="pill"/>
<CSwitch class="mx-1" variant="secondary" checked shape="pill" />
<CSwitch class="mx-1" variant="success" checked shape="pill" />
@@ -78,13 +78,15 @@
<CSwitch class="mx-1" variant="light" checked shape="pill" />
<CSwitch class="mx-1" variant="dark" checked shape="pill" />
<CSwitch class="mx-1" variant="primary" disabled shape="pill" />
</CCardBody>
</CCard>
</CCol>
<CCol xs="12" md="6">
<CCard>
<CCardHeader slot="header">
<CCardHeader>
3d Switch
</CCardHeader>
<CCardBody>
<CSwitch class="mx-1" variant="primary" checked shape="3d" />
<CSwitch class="mx-1" variant="secondary" checked shape="3d" />
<CSwitch class="mx-1" variant="success" checked shape="3d" />
@@ -94,13 +96,15 @@
<CSwitch class="mx-1" variant="light" checked shape="3d" />
<CSwitch class="mx-1" variant="dark" checked shape="3d" />
<CSwitch class="mx-1" variant="primary" disabled shape="3d" />
</CCardBody>
</CCard>
</CCol>
<CCol xs="12" md="6">
<CCard>
<CCardHeader slot="header">
<CCardHeader>
3d Switch <small><code>disabled</code></small>
</CCardHeader>
<CCardBody>
<CSwitch class="mx-1" variant="primary" checked shape="3d" disabled />
<CSwitch class="mx-1" variant="secondary" checked shape="3d" disabled />
<CSwitch class="mx-1" variant="success" checked shape="3d" disabled />
@@ -110,13 +114,15 @@
<CSwitch class="mx-1" variant="light" checked shape="3d" disabled />
<CSwitch class="mx-1" variant="dark" checked shape="3d" disabled />
<CSwitch class="mx-1" variant="primary" disabled shape="3d" />
</CCardBody>
</CCard>
</CCol>
<CCol xs="12" md="6">
<CCard>
<CCardHeader slot="header">
<CCardHeader>
3d Switch <small><code>outline="alt"</code></small>
</CCardHeader>
<CCardBody>
<CSwitch class="mx-1" variant="primary" checked shape="3d" outline="alt" />
<CSwitch class="mx-1" variant="secondary" checked shape="3d" outline="alt" />
<CSwitch class="mx-1" variant="success" checked shape="3d" outline="alt" />
@@ -126,13 +132,15 @@
<CSwitch class="mx-1" variant="light" checked shape="3d" outline="alt" />
<CSwitch class="mx-1" variant="dark" checked shape="3d" outline="alt" />
<CSwitch class="mx-1" variant="primary" disabled shape="3d" outline="alt" />
</CCardBody>
</CCard>
</CCol>
<CCol xs="12" md="6">
<CCard>
<CCardHeader slot="header">
<CCardHeader>
3d Switch <small><code>label</code></small>
</CCardHeader>
<CCardBody>
<CSwitch class="mx-1" variant="primary" shape="3d" checked v-bind="labelIcon"/>
<CSwitch class="mx-1" variant="secondary" checked shape="3d" v-bind="labelIcon" />
<CSwitch class="mx-1" variant="success" checked shape="3d" v-bind="labelIcon" />
@@ -142,13 +150,15 @@
<CSwitch class="mx-1" variant="light" checked shape="3d" v-bind="labelIcon" />
<CSwitch class="mx-1" variant="dark" checked shape="3d" v-bind="labelIcon" />
<CSwitch class="mx-1" variant="primary" disabled shape="3d" v-bind="labelIcon" />
</CCardBody>
</CCard>
</CCol>
<CCol xs="12" md="6">
<CCard>
<CCardHeader slot="header">
<CCardHeader>
3d Switch <small><code>outline="alt"</code></small>
</CCardHeader>
<CCardBody>
<CSwitch class="mx-1" variant="primary" checked shape="3d" outline="alt" v-bind="labelIcon" />
<CSwitch class="mx-1" variant="secondary" checked shape="3d" outline="alt" v-bind="labelIcon" />
<CSwitch class="mx-1" variant="success" checked shape="3d" outline="alt" v-bind="labelIcon" />
@@ -158,13 +168,15 @@
<CSwitch class="mx-1" variant="light" checked shape="3d" outline="alt" v-bind="labelIcon" />
<CSwitch class="mx-1" variant="dark" checked shape="3d" outline="alt" v-bind="labelIcon" />
<CSwitch class="mx-1" variant="primary" disabled shape="3d" outline="alt" v-bind="labelIcon" />
</CCardBody>
</CCard>
</CCol>
<CCol xs="12" md="6">
<CCard>
<CCardHeader slot="header">
<CCardHeader>
3d Switch <small><code>outline="alt"</code></small>
</CCardHeader>
<CCardBody>
<CSwitch class="mx-1" variant="primary" checked shape="3d" outline="alt" />
<CSwitch class="mx-1" variant="secondary" checked shape="3d" outline="alt" />
<CSwitch class="mx-1" variant="success" checked shape="3d" outline="alt" />
@@ -174,13 +186,15 @@
<CSwitch class="mx-1" variant="light" checked shape="3d" outline="alt" />
<CSwitch class="mx-1" variant="dark" checked shape="3d" outline="alt" />
<CSwitch class="mx-1" variant="primary" disabled shape="3d" outline="alt" />
</CCardBody>
</CCard>
</CCol>
<CCol xs="12" md="6">
<CCard>
<CCardHeader slot="header">
<CCardHeader>
Switch <small><code>outline</code></small>
</CCardHeader>
<CCardBody>
<CSwitch class="mx-1" variant="primary" checked outline />
<CSwitch class="mx-1" variant="secondary" checked outline />
<CSwitch class="mx-1" variant="success" checked outline />
@@ -190,13 +204,15 @@
<CSwitch class="mx-1" variant="light" checked outline />
<CSwitch class="mx-1" variant="dark" checked outline />
<CSwitch class="mx-1" variant="primary" outline disabled />
</CCardBody>
</CCard>
</CCol>
<CCol xs="12" md="6">
<CCard>
<CCardHeader slot="header">
<CCardHeader>
Switch <small><code>outline shape="pill"</code></small>
</CCardHeader>
<CCardBody>
<CSwitch class="mx-1" variant="primary" checked outline shape="pill"/>
<CSwitch class="mx-1" variant="secondary" checked outline shape="pill" />
<CSwitch class="mx-1" variant="success" checked outline shape="pill" />
@@ -206,13 +222,15 @@
<CSwitch class="mx-1" variant="light" checked outline shape="pill" />
<CSwitch class="mx-1" variant="dark" checked outline shape="pill" />
<CSwitch class="mx-1" variant="primary" outline shape="pill" disabled />
</CCardBody>
</CCard>
</CCol>
<CCol xs="12" md="6">
<CCard>
<CCardHeader slot="header">
<CCardHeader>
Switch <small><code>outline="alt"</code></small>
</CCardHeader>
<CCardBody>
<CSwitch class="mx-1" variant="primary" checked outline="alt" />
<CSwitch class="mx-1" variant="secondary" checked outline="alt" />
<CSwitch class="mx-1" variant="success" checked outline="alt" />
@@ -222,13 +240,15 @@
<CSwitch class="mx-1" variant="light" checked outline="alt" />
<CSwitch class="mx-1" variant="dark" checked outline="alt" />
<CSwitch class="mx-1" variant="primary" outline="alt" disabled />
</CCardBody>
</CCard>
</CCol>
<CCol xs="12" md="6">
<CCard>
<CCardHeader slot="header">
<CCardHeader>
Switch <small><code>outline="alt" shape="pill"</code></small>
</CCardHeader>
<CCardBody>
<CSwitch class="mx-1" variant="primary" checked outline="alt" shape="pill"/>
<CSwitch class="mx-1" variant="secondary" checked outline="alt" shape="pill" />
<CSwitch class="mx-1" variant="success" checked outline="alt" shape="pill" />
@@ -238,13 +258,15 @@
<CSwitch class="mx-1" variant="light" checked outline="alt" shape="pill" />
<CSwitch class="mx-1" variant="dark" checked outline="alt" shape="pill" />
<CSwitch class="mx-1" variant="primary" outline="alt" shape="pill" disabled />
</CCardBody>
</CCard>
</CCol>
<CCol xs="12" md="6">
<CCard>
<CCardHeader slot="header">
<CCardHeader>
Switch <small><code>label</code></small>
</CCardHeader>
<CCardBody>
<CSwitch class="mx-1" variant="primary" checked />
<CSwitch class="mx-1" variant="secondary" checked />
<CSwitch class="mx-1" variant="success" checked />
@@ -254,13 +276,15 @@
<CSwitch class="mx-1" variant="light" checked />
<CSwitch class="mx-1" variant="dark" checked />
<CSwitch class="mx-1" variant="primary" disabled />
</CCardBody>
</CCard>
</CCol>
<CCol xs="12" md="6">
<CCard>
<CCardHeader slot="header">
<CCardHeader>
Switch <small><code>label shape="pill"</code></small>
</CCardHeader>
<CCardBody>
<CSwitch class="mx-1" variant="primary" checked shape="pill" />
<CSwitch class="mx-1" variant="secondary" checked shape="pill" />
<CSwitch class="mx-1" variant="success" checked shape="pill" />
@@ -270,13 +294,15 @@
<CSwitch class="mx-1" variant="light" checked shape="pill" />
<CSwitch class="mx-1" variant="dark" checked shape="pill" />
<CSwitch class="mx-1" variant="primary" shape="pill" disabled />
</CCardBody>
</CCard>
</CCol>
<CCol xs="12" md="6">
<CCard>
<CCardHeader slot="header">
<CCardHeader>
Switch <small><code>label outline</code></small>
</CCardHeader>
<CCardBody>
<CSwitch class="mx-1" variant="primary" checked outline />
<CSwitch class="mx-1" variant="secondary" checked outline />
<CSwitch class="mx-1" variant="success" checked outline />
@@ -286,13 +312,15 @@
<CSwitch class="mx-1" variant="light" checked outline />
<CSwitch class="mx-1" variant="dark" checked outline />
<CSwitch class="mx-1" variant="primary" outline disabled />
</CCardBody>
</CCard>
</CCol>
<CCol xs="12" md="6">
<CCard>
<CCardHeader slot="header">
<CCardHeader>
Switch <small><code>label outline</code></small>
</CCardHeader>
<CCardBody>
<CSwitch class="mx-1" variant="primary" checked outline shape="pill" />
<CSwitch class="mx-1" variant="secondary" checked outline shape="pill" />
<CSwitch class="mx-1" variant="success" checked outline shape="pill" />
@@ -302,13 +330,15 @@
<CSwitch class="mx-1" variant="light" checked outline shape="pill" />
<CSwitch class="mx-1" variant="dark" checked outline shape="pill" />
<CSwitch class="mx-1" variant="primary" outline shape="pill" disabled />
</CCardBody>
</CCard>
</CCol>
<CCol xs="12" md="6">
<CCard>
<CCardHeader slot="header">
<CCardHeader>
Switch <small><code>label outline</code></small>
</CCardHeader>
<CCardBody>
<CSwitch class="mx-1" variant="primary" checked outline="alt" />
<CSwitch class="mx-1" variant="secondary" checked outline="alt" />
<CSwitch class="mx-1" variant="success" checked outline="alt" />
@@ -318,13 +348,15 @@
<CSwitch class="mx-1" variant="light" checked outline="alt" />
<CSwitch class="mx-1" variant="dark" checked outline="alt" />
<CSwitch class="mx-1" variant="primary" outline="alt" disabled />
</CCardBody>
</CCard>
</CCol>
<CCol xs="12" md="6">
<CCard>
<CCardHeader slot="header">
<CCardHeader>
Switch <small><code>label outline</code></small>
</CCardHeader>
<CCardBody>
<CSwitch class="mx-1" variant="primary" checked outline="alt" shape="pill" />
<CSwitch class="mx-1" variant="secondary" checked outline="alt" shape="pill" />
<CSwitch class="mx-1" variant="success" checked outline="alt" shape="pill" />
@@ -334,14 +366,16 @@
<CSwitch class="mx-1" variant="light" checked outline="alt" shape="pill" />
<CSwitch class="mx-1" variant="dark" checked outline="alt" shape="pill" />
<CSwitch class="mx-1" variant="primary" outline="alt" shape="pill" disabled />
</CCardBody>
</CCard>
</CCol>
<CCol xs="12" md="6">
<CCard>
<CCardHeader slot="header">
<CCardHeader>
Switch <small><code>label</code></small>
</CCardHeader>
<CCardBody>
<CSwitch class="mx-1" variant="primary" checked dataOn="" dataOff=""/>
<CSwitch class="mx-1" variant="secondary" checked v-bind="labelIcon" />
<CSwitch class="mx-1" variant="success" checked v-bind="labelIcon" />
@@ -351,13 +385,15 @@
<CSwitch class="mx-1" variant="light" checked v-bind="labelIcon" />
<CSwitch class="mx-1" variant="dark" checked v-bind="labelIcon" />
<CSwitch class="mx-1" variant="primary" disabled v-bind="labelIcon" />
</CCardBody>
</CCard>shape
</CCol>
<CCol xs="12" md="6">
<CCard>
<CCardHeader slot="header">
<CCardHeader>
Switch <small><code>label shape="pill"</code></small>
</CCardHeader>
<CCardBody>
<CSwitch class="mx-1" variant="primary" checked shape="pill" v-bind="labelIcon" />
<CSwitch class="mx-1" variant="secondary" checked shape="pill" v-bind="labelIcon" />
<CSwitch class="mx-1" variant="success" checked shape="pill" v-bind="labelIcon" />
@@ -367,13 +403,15 @@
<CSwitch class="mx-1" variant="light" checked shape="pill" v-bind="labelIcon" />
<CSwitch class="mx-1" variant="dark" checked shape="pill" v-bind="labelIcon" />
<CSwitch class="mx-1" variant="primary" shape="pill" disabled v-bind="labelIcon" />
</CCardBody>
</CCard>
</CCol>
<CCol xs="12" md="6">
<CCard>
<CCardHeader slot="header">
<CCardHeader>
Switch <small><code>label outline</code></small>
</CCardHeader>
<CCardBody>
<CSwitch class="mx-1" variant="primary" checked outline v-bind="labelIcon" />
<CSwitch class="mx-1" variant="secondary" checked outline v-bind="labelIcon" />
<CSwitch class="mx-1" variant="success" checked outline v-bind="labelIcon" />
@@ -383,13 +421,15 @@
<CSwitch class="mx-1" variant="light" checked outline v-bind="labelIcon" />
<CSwitch class="mx-1" variant="dark" checked outline v-bind="labelIcon" />
<CSwitch class="mx-1" variant="primary" outline disabled v-bind="labelIcon" />
</CCardBody>
</CCard>
</CCol>
<CCol xs="12" md="6">
<CCard>
<CCardHeader slot="header">
<CCardHeader>
Switch <small><code>label outline</code></small>
</CCardHeader>
<CCardBody>
<CSwitch class="mx-1" variant="primary" checked outline shape="pill" v-bind="labelIcon" />
<CSwitch class="mx-1" variant="secondary" checked outline shape="pill" v-bind="labelIcon" />
<CSwitch class="mx-1" variant="success" checked outline shape="pill" v-bind="labelIcon" />
@@ -399,13 +439,15 @@
<CSwitch class="mx-1" variant="light" checked outline shape="pill" v-bind="labelIcon" />
<CSwitch class="mx-1" variant="dark" checked outline shape="pill" v-bind="labelIcon" />
<CSwitch class="mx-1" variant="primary" outline shape="pill" disabled v-bind="labelIcon" />
</CCardBody>
</CCard>
</CCol>
<CCol xs="12" md="6">
<CCard>
<CCardHeader slot="header">
<CCardHeader>
Switch <small><code>label outline</code></small>
</CCardHeader>
<CCardBody>
<CSwitch class="mx-1" variant="primary" checked outline="alt" v-bind="labelIcon" />
<CSwitch class="mx-1" variant="secondary" checked outline="alt" v-bind="labelIcon" />
<CSwitch class="mx-1" variant="success" checked outline="alt" v-bind="labelIcon" />
@@ -415,13 +457,15 @@
<CSwitch class="mx-1" variant="light" checked outline="alt" v-bind="labelIcon" />
<CSwitch class="mx-1" variant="dark" checked outline="alt" v-bind="labelIcon" />
<CSwitch class="mx-1" variant="primary" outline="alt" disabled v-bind="labelIcon" />
</CCardBody>
</CCard>
</CCol>
<CCol xs="12" md="6">
<CCard>
<CCardHeader slot="header">
<CCardHeader>
Switch <small><code>label outline</code></small>
</CCardHeader>
<CCardBody>
<CSwitch class="mx-1" variant="primary" checked outline="alt" shape="pill" v-bind="labelTxt" />
<CSwitch class="mx-1" variant="secondary" checked outline="alt" shape="pill" v-bind="labelIcon" />
<CSwitch class="mx-1" variant="success" checked outline="alt" shape="pill" v-bind="labelIcon" />
@@ -431,15 +475,16 @@
<CSwitch class="mx-1" variant="light" checked outline="alt" shape="pill" v-bind="labelIcon" />
<CSwitch class="mx-1" variant="dark" checked outline="alt" shape="pill" v-bind="labelIcon" />
<CSwitch class="mx-1" variant="primary" outline="alt" shape="pill" disabled v-bind="labelIcon" />
</CCardBody>
</CCard>
</CCol>
<CCol md="12">
<CCard noWrapper>
<CCardHeader slot="header">
<CCard>
<CCardHeader>
Sizes
</CCardHeader>
<CCardBody slot="body" class="p-0">
<CCardBody class="p-0">
<CTable
hover
striped
@@ -472,19 +517,9 @@
</template>
<script>
// import CSwitch from './CSwitch'
export default {
name: 'switches',
computed: {
icon (icon) {
return icon
}
},
// components: {
// CSwitch
// },
data: () => {
data () {
return {
fields: [
{key: 'size'},
@@ -498,10 +533,6 @@ export default {
],
checker: 'yes',
radio: 'primary',
radio2: 'warning',
myFlag1: true,
myFlag2: false,
picker: '',
labelIcon: {
dataOn: '\u2713',
dataOff: '\u2715'
@@ -511,17 +542,6 @@ export default {
dataOff: 'no'
}
}
},
methods: {
test (a, event) {
console.log(a)
console.log(typeof a)
console.log(event)
},
test2 () {
console.log(this.$refs.totest)
this.$refs.totest.$forceUpdate()
}
}
}
</script>
src/views/base/Table.vue
+1 -1
View File
@@ -1,5 +1,5 @@
<template>
<CCard :header="caption">
<CCard :header="caption" bodyWrapper>
<CTable
:hover="hover"
:striped="striped"
src/views/base/Tables.vue
+42 -79
View File
@@ -2,82 +2,61 @@
<div class="animated fadeIn">
<CRow>
<CCol sm="12">
<CCard header="test1 ">
<!-- <CTable :items="items.slice(0)"
noSorting
striped
/> -->
<CCard header="CTable power presentation" bodyWrapper>
<CTable :items="items.slice(0)"
:fields="fields"
:activePage="page"
@pages-change="val => pages = val"
:perPage="5"
ref="table"
indexCol="onlyFilter"
:perPage="6"
indexColumn
filterRow
smalls
noPagination
@row-clicked2="(item, index) => toggleDetails(index)"
optionsRow
loadings
hover
striped
optionsRow="onlyFilter2"
:defaultSorter="{ name:'username', direction:'desc'}"
defaultTableFilter="staff"
:defaultColumnFilter="{username:'zby'}"
:defaultColumnFilter="{ role:'staff' }"
>
<template slot="status-header" slot-scope="{item}">
Status scoped slot
</template>
<!-- <tempalate slot="sorting-icon" slot-scope={state}>
{{state}}
</tempalate> -->
<!-- <td slot="status-filter" slot-scope="{clear, colName}" @click="clear">
<i class="cui-ban icons text-danger d-block mt-2 ml-1"></i>
</td> -->
<!-- <div slot="underTable">hehe</div>
<caption slot="caption" style="caption-side: top;">
This is a table caption at the top.
</caption> -->
<td slot="status" slot-scope="{item}">
<CBadge :variant="getBadge(item.status)">{{item.status}}</CBadge>
</td>
<td slot="show_details" slot-scope="{item, index}">
<button class="btn btn-primary" @click="toggleDetails(index)">
{{details.includes(index) ? 'Hide' : 'Show'}}
</button>
</td>
<td slot="index-col"
slot-scope="{index}"
<template #index-col="{index}">
<td
@click="toggleDetails(index)"
style="cursor:pointer"
class="text-center"
>
<i class="icons font-lg d-block cui-chevron-right"
<i
class="icons font-lg d-block cui-chevron-right"
style="transition: transform 0.4s"
:style="details.includes(index) ? 'transform:rotate(90deg)': ''"></i>
:style="details.includes(index) ? 'transform:rotate(90deg)': ''"
></i>
</td>
<CCollapse :show="details.includes(index)"
slot="details"
slot-scope="{item, index}">
</template>
<template #status="{item}">
<td>
<CBadge :variant="getBadge(item.status)">
{{item.status}}
</CBadge>
</td>
</template>
<template #show_details="{item, index}">
<td class="py-2">
<CButton
variant="outline-primary"
square
size="sm"
@click="toggleDetails(index)"
:text="details.includes(index) ? 'Hide' : 'Show'"
/>
</td>
</template>
<template #details="{item, index}">
<CCollapse :show="details.includes(index)">
<CCardBody>
{{index + 1}} - {{item}}
</CCardBody>
</CCollapse>
</template>
</CTable>
<CPagination v-show="pages > 1"
v-model="page"
:pages="pages"
align="center"
size="lg"
/>
</CCard>
</CCol>
</CRow>
<CRow>
<!-- <CRow>
<CCol sm="12">
<CCard header="test2">
<CTable
@@ -86,8 +65,8 @@
:perPage="5"
indexCol="onlyCleaner"
filterRow
optionsRow="onlyFilter"
:paginationProps="{align:'center', size:'lg'}"
optionsRow="onlyFiltesr"
:paginationProps="{align:'center'}"
>
<td slot="status" slot-scope="{item}">
<CBadge :variant="getBadge(item.status)">{{item.status}}</CBadge>
@@ -95,7 +74,7 @@
</CTable>
</CCard>
</CCol>
</CRow>
</CRow> -->
<CRow>
@@ -171,13 +150,12 @@
<script>
import CTableWrapper from './Table.vue'
// const fields = ['username', 'registered', 'role']
const fields = [
{ key: 'username', label: 'UsErNaMe', _style:'width:40%'},
{ key: 'registered' , style:'width:20%', noSorting: true, noFilter: true},
{ key: 'role', _classes: 'table-danger2', _style:'width:20%; color:bluse'},
{ key: 'status' },
// { key: 'show_details' , label:'',_style:'width:1%', noSorting: true, noFilter: true },
{ key: 'username', _style:'width:40%' },
{ key: 'registered' , style:'width:20%' },
{ key: 'role', _style:'width:20%;' },
{ key: 'status', _style:'width:20%;' },
{ key: 'show_details' , label:'', _style:'width:1%', noSorting: true, noFilter: true },
]
const items = [
{number:11.1, username: '<b>Samppa Nori</b>', registered: '2012/01/01', role: 'Member', status: 'Active'},
@@ -215,8 +193,6 @@ export default {
items: items,
fields: fields,
page: 1,
page2: 1,
itemsNumber: 0,
pages: null,
details: []
}
@@ -228,11 +204,6 @@ export default {
: status === 'Pending' ? 'warning'
: status === 'Banned' ? 'danger' : 'primary'
},
// test () {
// this.$refs.table.changeSort('username')
// this.$refs.table.filter = 't'
// // console.log(this.items)
// },
shuffleArray (array) {
for (let i = array.length - 1; i > 0; i--) {
let j = Math.floor(Math.random() * (i + 1))
@@ -242,9 +213,6 @@ export default {
}
return array
},
log(val) {
console.log(val)
},
toggleDetails (index) {
const position = this.details.indexOf(index)
position !== -1 ? this.details.splice(position, 1) : this.details.push(index)
@@ -253,10 +221,5 @@ export default {
return this.shuffleArray(this.items.slice(0))
}
}
// computed: {
// pages () {
// return this.$refs.table.pages
// }
// }
}
</script>
src/views/base/Tabs.vue
+15 -5
View File
@@ -3,9 +3,10 @@
<CRow>
<CCol xs="12" lg="6">
<CCard>
<CCardHeader slot="header">
<CCardHeader>
Tabs
</CCardHeader>
<CCardBody>
<CTabs addTabClasses="mt-1">
<CTab title="Home" active>
1. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
@@ -29,13 +30,15 @@
officia deserunt mollit anim id est laborum.
</CTab>
</CTabs>
</CCardBody>
</CCard>
</CCol>
<CCol xs="12" lg="6">
<CCard>
<CCardHeader slot="header">
<CCardHeader>
Tabs
</CCardHeader>
<CCardBody>
<CTabs
pills
addNavClasses="mb-3"
@@ -62,13 +65,15 @@
officia deserunt mollit anim id est laborum.
</CTab>
</CTabs>
</CCardBody>
</CCard>
</CCol>
<CCol xs="12" lg="6">
<CCard>
<CCardHeader slot="header">
<CCardHeader>
Tabs with icons
</CCardHeader>
<CCardBody>
<CTabs addTabClasses="mt-1">
<CTab active>
<template slot="title">
@@ -101,13 +106,15 @@
officia deserunt mollit anim id est laborum.
</CTab>
</CTabs>
</CCardBody>
</CCard>
</CCol>
<CCol xs="12" lg="6">
<CCard>
<CCardHeader slot="header">
<CCardHeader>
Tabs with icons
</CCardHeader>
<CCardBody>
<CTabs
addTabClasses="mt-1"
card
@@ -143,13 +150,15 @@
officia deserunt mollit anim id est laborum.
</CTab>
</CTabs>
</CCardBody>
</CCard>
</CCol>
<CCol xs="12" lg="6">
<CCard>
<CCardHeader slot="header">
<CCardHeader>
Tabs vertical
</CCardHeader>
<CCardBody>
<CTabs
card
pills
@@ -187,6 +196,7 @@
officia deserunt mollit anim id est laborum.
</CTab>
</CTabs>
</CCardBody>
</CCard>
</CCol>
</CRow>
src/views/base/Tooltips.vue
+22 -103
View File
@@ -2,39 +2,51 @@
<div class="wrapper">
<div class="animated fadeIn">
<CCard>
<CCardHeader slot="header">
<CCardHeader>
<i class="fa fa-align-justify"></i>
<strong> Bootstrap Tooltips </strong>
<small><code>v-c-tooltip</code> directive</small>
<div class="card-header-actions">
<!-- <div class="card-header-actions">
<a href="https://bootstrap-vue.js.org/docs/components/tooltip" class="card-header-action" rel="noreferrer noopener" target="_blank">
<small class="text-muted">docs</small>
</a>
</div>
</div> -->
</CCardHeader>
<CCardBody>
<CRow>
<CCol cols="6">
<CCol cols="4">
<div class="text-center my-3">
<CButton v-c-tooltip.hover="'I am a tooltip!'">
<CButton v-c-tooltip.hover.click="'I am a tooltip!'">
Hover Me
</CButton>
</div>
</CCol>
<CCol cols="6">
<CCol cols="4">
<div class="text-center my-3">
<CButton v-c-tooltip.hover.active="'I start open!'">
Button
<CButton v-c-tooltip="{content: 'I start open!', active:true }">
Hover me
</CButton>
</div>
</CCol>
<CCol cols="4">
<div class="text-center my-3">
<CButton v-c-tooltip.click="
'I am showing on click and hiding on click outside tooltip!'
">
Click me
</CButton>
</div>
</CCol>
</CRow>
</CCardBody>
</CCard>
<CCard>
<CCardHeader slot="header">
<CCardHeader>
<i class="fa fa-align-justify"></i>
<strong> Tooltips </strong>
<small>placement</small>
</CCardHeader>
<CCardBody>
<div class="my-3">
<CRow>
<CCol
@@ -55,77 +67,8 @@
</CCol>
</CRow>
</div>
</CCardBody>
</CCard>
<!-- <CRow>
<CCol md="6" class="py-4 text-center">
<CButton id="exButton1" variant="outline-success">Live chat</CButton>
</CCol>
<CCol md="6" class="py-4 text-center">
<CButton id="exButton2" variant="outline-success">Html chat</CButton>
</CCol>
</CRow>
<b-tooltip target="exButton1" title="Online!"></b-tooltip>
<b-tooltip target="exButton2" placement="bottom">
Hello <strong>World!</strong>
</b-tooltip>
</CCard>
<CCard>
<CCardHeader slot="header">
<i class="fa fa-align-justify"></i><strong> Tooltips </strong><small><code>show</code> prop</small>
</CCardHeader>
<div class="text-center">
<CButton id="tooltipButton-1" variant="primary">I have a tooltip</CButton>
<br><br>
<CButton @click="show = !show">Toggle Tooltip</CButton>
<b-tooltip :show.sync="show" target="tooltipButton-1" placement="top">
Hello <strong>World!</strong>
</b-tooltip>
</div>
</CCard>
<CCard>
<CCardHeader slot="header">
<i class="fa fa-align-justify"></i><strong> Tooltips </strong><small><code>open close</code> events</small>
</CCardHeader>
<div class="d-flex flex-column text-md-center">
<div class="p-2">
<CButton id="tooltipButton-showEvent" variant="primary">I have a tooltip</CButton>
</div>
<div class="p-2">
<CButton class="px-1 mr-1" @click="onOpen">Open</CButton>
<CButton class="px-1" @click="onClose">Close</CButton>
</div>
<b-tooltip ref="tooltip" target="tooltipButton-showEvent">
Hello <strong>World!</strong>
</b-tooltip>
</div>
</CCard>
<CCard id="boundary">
<CCardHeader slot="header">
<i class="fa fa-align-justify"></i><strong> Tooltips </strong><small><code>enable disable</code> events</small>
</CCardHeader>
<div class="d-flex flex-column text-md-center">
<div class="p-2">
<CButton id="tooltipButton-disable" variant="primary">I have a tooltip</CButton>
</div>
<div class="p-2">
<CButton @click="disabled = !disabled" class="mr-1">
{{ disabled ? 'Enable' : 'Disable' }} Tooltip by prop
</CButton>
<CButton @click="disableByRef">
{{ disabled ? 'Enable' : 'Disable' }} Tooltip by $ref event
</CButton>
<b-tooltip :disabled.sync="disabled" ref="tooltip2" target="tooltipButton-disable">
Hello <strong>World!</strong>
</b-tooltip>
</div>
</div>
</CCard> -->
</div>
</div>
</template>
@@ -135,10 +78,6 @@ export default {
name: 'tooltips',
data () {
return {
// show: true,
// disabled: false,
// smh: 0,
// placement: 'bottom-end',
placements: [
'top-start', 'top', 'top-end',
'bottom-start', 'bottom', 'bottom-end',
@@ -146,26 +85,6 @@ export default {
'left-start', 'left', 'left-end'
]
}
},
methods: {
// onOpen () {
// this.$refs.tooltip.$emit('open')
// },
// onClose () {
// this.$refs.tooltip.$emit('close')
// },
// disableByRef () {
// if (this.disabled) {
// this.$refs.tooltip2.$emit('enable')
// } else {
// this.$refs.tooltip2.$emit('disable')
// }
// },
// test () {
// this.show = !this.show
// this.placement = 'right'
// this.smh = 200
// }
}
}
</script>
src/views/buttons/BrandButtons.vue
+9 -3
View File
@@ -3,9 +3,10 @@
<CRow>
<CCol cols="12">
<CCard>
<CCardHeader slot="header">
<CCardHeader>
<strong>Brand Button</strong>
</CCardHeader>
<CCardBody>
<small>Usage </small><code>&lt;CButton variant="facebook"&gt;&lt;span&gt;Facebook&lt;/span&gt;&lt;/CButton&gt;</code>
<hr/>
<h6>Size Small <small>Add <code>size="sm"</code></small></h6>
@@ -92,13 +93,15 @@
<CButton size="lg" variant="foursquare" class="mr-1 btn-brand"><i class="fa fa-foursquare"></i><span>Forsquare</span></CButton>
<CButton size="lg" variant="vimeo" class="mr-1 btn-brand"><i class="fa fa-vimeo"></i><span>Vimeo</span></CButton>
</p>
</CCardBody>
</CCard>
</CCol><!--/.col-->
<CCol cols="12">
<CCard>
<CCardHeader slot="header">
<CCardHeader>
<strong>Brand Button </strong> <small>Icons only</small>
</CCardHeader>
<CCardBody>
<small>Usage </small> <code>&lt;CButton variant="facebook icon"&gt;&lt;span&gt;Facebook&lt;/span&gt;&lt;/CButton&gt;</code>
<hr/>
<h6>Size Small <small>Add <code>size="sm"</code></small></h6>
@@ -185,14 +188,16 @@
<CButton size="lg" variant="foursquare icon" class="mr-1 btn-brand"><i class="fa fa-foursquare"></i></CButton>
<CButton size="lg" variant="vimeo icon" class="mr-1 btn-brand"><i class="fa fa-vimeo"></i></CButton>
</p>
</CCardBody>
</CCard>
</CCol><!--/.col-->
<CCol cols="12">
<CCard>
<CCardHeader slot="header">
<CCardHeader>
<strong>Brand Button </strong> <small>Text only</small>
</CCardHeader>
<CCardBody>
<small>Usage </small> <code>&lt;CButton variant="facebook text"&gt;&lt;span&gt;Facebook&lt;/span&gt;&lt;/CButton&gt;</code>
<hr/>
<h6>Size Small <small>Add <code>size="sm"</code></small></h6>
@@ -279,6 +284,7 @@
<CButton size="lg" variant="foursquare text" class="mr-1 btn-brand"><span>Forsquare</span></CButton>
<CButton size="lg" variant="vimeo text" class="mr-1 btn-brand"><span>Vimeo</span></CButton>
</p>
</CCardBody>
</CCard>
</CCol><!--/.col-->
</CRow><!--/.row-->
src/views/buttons/ButtonGroups.vue
+23 -11
View File
@@ -4,14 +4,15 @@
<CRow>
<CCol cols="12" >
<CCard>
<CCardHeader slot="header">
<CCardHeader>
<i class="fa fa-align-justify"></i><strong> Bootstrap button group</strong>
<div class="card-header-actions">
<!-- <div class="card-header-actions">
<a href="https://bootstrap-vue.js.org/docs/components/button-group" class="card-header-action" rel="noreferrer noopener" target="_blank">
<small class="text-muted">docs</small>
</a>
</div>
</div> -->
</CCardHeader>
<CCardBody>
<div>
<CButtonGroup>
<CButton>One</CButton>
@@ -30,13 +31,15 @@
<CButton variant="link">Link</CButton>
</CButtonGroup>
</div>
</CCardBody>
</CCard>
</CCol>
<CCol cols="12">
<CCard>
<CCardHeader slot="header">
<CCardHeader>
<i class="fa fa-align-justify"></i><strong> Button group </strong>sizing
</CCardHeader>
<CCardBody>
<div>
<CButtonGroup>
<CButton>Left</CButton>
@@ -56,13 +59,15 @@
<CButton>Right</CButton>
</CButtonGroup>
</div>
</CCardBody>
</CCard>
</CCol>
<CCol cols="12">
<CCard>
<CCardHeader slot="header">
<CCardHeader>
<i class="fa fa-align-justify"></i><strong> Button group </strong>dropdown support
</CCardHeader>
<CCardBody>
<div>
<CButtonGroup>
<CButton class="d-sm-down-none">Button 1</CButton>
@@ -82,13 +87,15 @@
</CDropdown>
</CButtonGroup>
</div>
</CCardBody>
</CCard>
</CCol>
<CCol cols="12">
<CCard>
<CCardHeader slot="header">
<CCardHeader>
<i class="fa fa-align-justify"></i><strong> Button group </strong>vertical variation
</CCardHeader>
<CCardBody>
<div>
<CButtonGroup vertical>
<CButton>Top</CButton>
@@ -96,18 +103,22 @@
<CButton>Bottom</CButton>
</CButtonGroup>
</div>
</CCardBody>
</CCard>
</CCol>
<CCol cols="12">
<CCard>
<CCardHeader slot="header">
<i class="fa fa-align-justify"></i> <strong>Button toolbar</strong> <small>with button groups</small>
<div class="card-header-actions">
<CCardHeader>
<i class="fa fa-align-justify"></i>
<strong> Button toolbar </strong>
<small>with button groups</small>
<!-- <div class="card-header-actions">
<a href="https://bootstrap-vue.js.org/docs/components/button-toolbar" class="card-header-action" rel="noreferrer noopener" target="_blank">
<small class="text-muted">docs</small>
</a>
</div>
</div> -->
</CCardHeader>
<CCardBody>
<div>
<CButtonToolbar key-nav aria-label="Toolbar with button groups">
<CButtonGroup class="mx-1">
@@ -164,7 +175,7 @@
<CDropdown
class="mx-1"
placement="bottom-end"
button-content="Menu"
buttonContent="Menu"
>
<CDropdownItem>Item 1</CDropdownItem>
<CDropdownItem>Item 2</CDropdownItem>
@@ -176,6 +187,7 @@
</CButtonGroup>
</CButtonToolbar>
</div>
</CCardBody>
</CCard>
</CCol>
</CRow>
src/views/buttons/Dropdowns.vue
+51 -48
View File
@@ -4,16 +4,18 @@
<CRow>
<CCol cols="12" md="6">
<CCard>
<CCardHeader slot="header">
<i class="fa fa-align-justify"></i><strong> Bootstrap Dropdown</strong>
<div class="card-header-actions">
<CCardHeader>
<i class="fa fa-align-justify"></i>
<strong> Bootstrap Dropdown</strong>
<!-- <div class="card-header-actions">
<a href="https://bootstrap-vue.js.org/docs/components/dropdown" class="card-header-action" rel="noreferrer noopener" target="_blank">
<small class="text-muted">docs</small>
</a>
</div>
</div> -->
</CCardHeader>
<CCardBody>
<div>
<CDropdown id="ddown1" button-content="Dropdown Button" class="m-2">
<CDropdown id="ddown1" buttonContent="Dropdown Button" class="m-2">
<CDropdownItem>First Action</CDropdownItem>
<CDropdownItem>Second Action</CDropdownItem>
<CDropdownItem>Third Action</CDropdownItem>
@@ -23,7 +25,7 @@
</CDropdown>
</div>
<!-- <div>
<CDropdown id="ddown-buttons" button-content="Dropdown using buttons as menu items" class="m-2">
<CDropdown id="ddown-buttons" buttonContent="Dropdown using buttons as menu items" class="m-2">
<CDropdownItem>I'm a button</CDropdownItem>
<CDropdownItem>I'm also a button</CDropdownItem>
<CDropdownItem disabled>I'm a button, but disabled!</CDropdownItem>
@@ -31,7 +33,7 @@
</CDropdown>
</div> -->
<div>
<CDropdown id="ddown-divider" button-content="Dropdown with divider" class="m-2">
<CDropdown id="ddown-divider" buttonContent="Dropdown with divider" class="m-2">
<CDropdownItem>First item</CDropdownItem>
<CDropdownItem>Second item</CDropdownItem>
<CDropdownDivider></CDropdownDivider>
@@ -39,30 +41,30 @@
</CDropdown>
</div>
<div>
<CDropdown id="ddown-header" button-content="Dropdown with header" class="m-2">
<CDropdown id="ddown-header" buttonContent="Dropdown with header" class="m-2">
<CDropdownHeader>Dropdown header</CDropdownHeader>
<CDropdownItem>First item</CDropdownItem>
<CDropdownItem>Second Item</CDropdownItem>
</CDropdown>
</div>
</CCardBody>
</CCard>
</CCol>
<CCol cols="12" md="6">
<CCard
>
<CCardHeader slot="header">
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i><strong> Dropdown </strong><small>positioning</small>
</CCardHeader>
<CCardBody>
<div>
<CDropdown id="ddown-left" button-content="Left align" variant="primary" class="m-2">
<CDropdown id="ddown-left" buttonContent="Left align" variant="primary" class="m-2">
<CDropdownItem>Action</CDropdownItem>
<CDropdownItem>Another action</CDropdownItem>
<CDropdownItem>Something else here</CDropdownItem>
</CDropdown>
<CDropdown id="ddown-right"
placement="bottom-end"
button-content="Right align"
buttonContent="Right align"
variant="primary"
class="m-2"
>
@@ -73,7 +75,7 @@
</div>
<div>
<CDropdown id="ddown-dropup"
button-content="Drop-Up"
buttonContent="Drop-Up"
variant="info"
class="m-2"
dropup
@@ -86,7 +88,7 @@
<div>
<CDropdown id="ddown-offset"
:offset="25"
button-content="Offset Dropdown"
buttonContent="Offset Dropdown"
class="m-2"
>
<CDropdownItem>Action</CDropdownItem>
@@ -95,27 +97,27 @@
</CDropdown>
</div>
<div>
<CDropdown id="ddown-split" split button-content="Split Dropdown" class="m-2">
<CDropdown id="ddown-split" split buttonContent="Split Dropdown" class="m-2">
<CDropdownItem>Action</CDropdownItem>
<CDropdownItem>Another action</CDropdownItem>
<CDropdownItem>Something else here...</CDropdownItem>
</CDropdown>
</div>
</CCardBody>
</CCard>
</CCol>
</CRow>
<CRow>
<CCol cols="12" md="6">
<CCard
>
<CCardHeader slot="header">
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i><strong> Dropdown </strong><small>hidden caret</small>
</CCardHeader>
<CCardBody>
<div>
<CDropdown variant="link"
size="lg"
button-content="&#x1f50d;<span class='sr-only'>Search</span>"
buttonContent="&#x1f50d;<span class='sr-only'>Search</span>"
no-caret
>
<CDropdownItem>Action</CDropdownItem>
@@ -123,51 +125,51 @@
<CDropdownItem>Something else here...</CDropdownItem>
</CDropdown>
</div>
</CCardBody>
</CCard>
</CCol>
<CCol cols="12" md="6">
<CCard
>
<CCardHeader slot="header">
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i><strong> Dropdown </strong><small>sizing</small>
</CCardHeader>
<CCardBody>
<div>
<CDropdown id="ddown-lg" size="lg" button-content="Large" class="m-2">
<CDropdown id="ddown-lg" size="lg" buttonContent="Large" class="m-2">
<CDropdownItem>Action</CDropdownItem>
<CDropdownItem>Another action</CDropdownItem>
<CDropdownItem>Something else here</CDropdownItem>
</CDropdown>
<CDropdown id="ddown-lg-split" size="lg" split button-content="Large Split" class="m-2">
<CDropdown id="ddown-lg-split" size="lg" split buttonContent="Large Split" class="m-2">
<CDropdownItem>Action</CDropdownItem>
<CDropdownItem>Another action</CDropdownItem>
<CDropdownItem>Something else here...</CDropdownItem>
</CDropdown>
<br>
<CDropdown id="ddown-sm" size="sm" button-content="Small" class="m-2">
<CDropdown id="ddown-sm" size="sm" buttonContent="Small" class="m-2">
<CDropdownItem>Action</CDropdownItem>
<CDropdownItem>Another action</CDropdownItem>
<CDropdownItem>Something else here...</CDropdownItem>
</CDropdown>
<CDropdown id="ddown-sm-split" size="sm" split button-content="Small Split" class="m-2">
<CDropdown id="ddown-sm-split" size="sm" split buttonContent="Small Split" class="m-2">
<CDropdownItem>Action</CDropdownItem>
<CDropdownItem>Another action</CDropdownItem>
<CDropdownItem>Something else here...</CDropdownItem>
</CDropdown>
</div>
</CCardBody>
</CCard>
</CCol>
</CRow>
<CRow>
<CCol cols="12" md="6">
<CCard
>
<CCardHeader slot="header">
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i><strong> Dropdown </strong><small>headers and accessibility</small>
</CCardHeader>
<CCardBody>
<div>
<CDropdown id="ddown-aria" button-content="Dropdown ARIA" variant="primary" class="m-2">
<CDropdown id="ddown-aria" buttonContent="Dropdown ARIA" variant="primary" class="m-2">
<div role="group" aria-lableledby="header1">
<CDropdownHeader id="header1">Groups</CDropdownHeader>
<CDropdownItem aria-describedby="header1">Add</CDropdownItem>
@@ -182,60 +184,61 @@
<CDropdownItem>Something <strong>not</strong> associated with user</CDropdownItem>
</CDropdown>
</div>
</CCardBody>
</CCard>
</CCol>
<CCol cols="12" md="6">
<CCard
>
<CCardHeader slot="header">
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i><strong> Dropdown </strong><small><code>variant</code></small>
</CCardHeader>
<CDropdown size="sm" id="ddown_primary" button-content="Primary" variant="primary" class="m-0">
<CCardBody>
<CDropdown size="sm" id="ddown_primary" buttonContent="Primary" variant="primary" class="m-0">
<CDropdownItem>First Action</CDropdownItem>
<CDropdownItem>Second Action</CDropdownItem>
<CDropdownItem>Third Action</CDropdownItem>
</CDropdown>
<CDropdown size="sm" id="ddown_secondary" button-content="Secondary" variant="secondary" class="m-0">
<CDropdown size="sm" id="ddown_secondary" buttonContent="Secondary" variant="secondary" class="m-0">
<CDropdownItem>First Action</CDropdownItem>
<CDropdownItem>Second Action</CDropdownItem>
<CDropdownItem>Third Action</CDropdownItem>
</CDropdown>
<CDropdown size="sm" id="ddown_success" button-content="Success" variant="success" class="m-0">
<CDropdown size="sm" id="ddown_success" buttonContent="Success" variant="success" class="m-0">
<CDropdownItem>First Action</CDropdownItem>
<CDropdownItem>Second Action</CDropdownItem>
<CDropdownItem>Third Action</CDropdownItem>
</CDropdown>
<CDropdown size="sm" id="ddown_warning" button-content="Warning" variant="warning" class="m-0">
<CDropdown size="sm" id="ddown_warning" buttonContent="Warning" variant="warning" class="m-0">
<CDropdownItem>First Action</CDropdownItem>
<CDropdownItem>Second Action</CDropdownItem>
<CDropdownItem>Third Action</CDropdownItem>
</CDropdown>
<CDropdown size="sm" id="ddown_danger" button-content="Danger" variant="danger" class="m-0">
<CDropdown size="sm" id="ddown_danger" buttonContent="Danger" variant="danger" class="m-0">
<CDropdownItem>First Action</CDropdownItem>
<CDropdownItem>Second Action</CDropdownItem>
<CDropdownItem>Third Action</CDropdownItem>
</CDropdown>
<CDropdown size="sm" id="ddown_info" button-content="Info" variant="info" class="m-0">
<CDropdown size="sm" id="ddown_info" buttonContent="Info" variant="info" class="m-0">
<CDropdownItem>First Action</CDropdownItem>
<CDropdownItem>Second Action</CDropdownItem>
<CDropdownItem>Third Action</CDropdownItem>
</CDropdown>
<CDropdown size="sm" id="ddown_light" button-content="Light" variant="light" class="m-0">
<CDropdown size="sm" id="ddown_light" buttonContent="Light" variant="light" class="m-0">
<CDropdownItem>First Action</CDropdownItem>
<CDropdownItem>Second Action</CDropdownItem>
<CDropdownItem>Third Action</CDropdownItem>
</CDropdown>
<CDropdown size="sm" id="ddown_dark" button-content="Dark" variant="dark" class="m-0">
<CDropdown size="sm" id="ddown_dark" buttonContent="Dark" variant="dark" class="m-0">
<CDropdownItem>First Action</CDropdownItem>
<CDropdownItem>Second Action</CDropdownItem>
<CDropdownItem>Third Action</CDropdownItem>
</CDropdown>
<CDropdown size="sm" id="ddown_link" button-content="Link" variant="link" class="m-0">
<CDropdown size="sm" id="ddown_link" buttonContent="Link" variant="link" class="m-0">
<CDropdownItem>First Action</CDropdownItem>
<CDropdownItem>Second Action</CDropdownItem>
<CDropdownItem>Third Action</CDropdownItem>
</CDropdown>
</CCardBody>
</CCard>
</CCol>
</CRow>
src/views/buttons/StandardButtons.vue
+33 -27
View File
@@ -1,10 +1,10 @@
<template>
<div class="animated fadeIn">
<CCard noWrapper>
<CCardHeader slot="header">
<CCard >
<CCardHeader>
<strong>Standard buttons</strong>
</CCardHeader>
<CCardBody slot="body">
<CCardBody>
<CRow class="align-items-center">
<CCol cols="12" xl class="mb-3 mb-xl-0">
Normal
@@ -103,11 +103,11 @@
</CRow>
</CCardBody>
</CCard>
<CCard noWrapper>
<CCardHeader slot="header">
<CCard >
<CCardHeader>
<strong>Outline Buttons</strong>
</CCardHeader>
<CCardBody slot="body">
<CCardBody>
<p>
Use <code>variant="outline-*"</code> prop
</p>
@@ -203,11 +203,11 @@
</CRow>
</CCardBody>
</CCard>
<CCard noWrapper>
<CCardHeader slot="header">
<CCard >
<CCardHeader>
<strong>Ghost Buttons</strong>
</CCardHeader>
<CCardBody slot="body">
<CCardBody>
<p>
Use
<code>ghost</code> prop for ghost buttons.
@@ -304,11 +304,11 @@
</CRow>
</CCardBody>
</CCard>
<CCard noWrapper>
<CCardHeader slot="header">
<CCard >
<CCardHeader>
<strong>Square Buttons</strong>
</CCardHeader>
<CCardBody slot="body">
<CCardBody>
<p>
Use
<code>square</code> prop for square buttons.
@@ -411,11 +411,11 @@
</CRow>
</CCardBody>
</CCard>
<CCard noWrapper>
<CCardHeader slot="header">
<CCard >
<CCardHeader>
<strong>Pill Buttons</strong>
</CCardHeader>
<CCardBody slot="body">
<CCardBody>
<p>
Use
<code>pill</code> prop for pill buttons.
@@ -518,11 +518,11 @@
</CRow>
</CCardBody>
</CCard>
<CCard noWrapper>
<CCardHeader slot="header">
<CCard >
<CCardHeader>
<strong>Sizes</strong>
</CCardHeader>
<CCardBody slot="body">
<CCardBody>
<p>Fancy larger or smaller buttons? Add <code>size="lg"</code> or <code>size="sm"</code> for additional sizes.</p>
<CRow class="align-items-center">
<CCol cols="2" xl class="mb-3 mb-xl-0">
@@ -586,12 +586,12 @@
</CRow>
</CCardBody>
</CCard>
<CCard noWrapper>
<CCardHeader slot="header">
<CCard >
<CCardHeader>
<strong>With Icons</strong>
</CCardHeader>
<CCardBody slot="body">
<CRow class="align-items-center mt-3">
<CCardBody>
<CRow class="align-items-center">
<CCol sm xs="12" class="text-center mt-3">
<CButton variant="primary">
<i class="fa fa-lightbulb-o"></i>&nbsp;Standard Button
@@ -621,9 +621,10 @@
</CCardBody>
</CCard>
<CCard>
<CCardHeader slot="header">
<CCardHeader>
<strong>Toggle pressed state</strong>
</CCardHeader>
<CCardBody>
<CRow>
<CCol sm xs="12" class="text-center mt-3">
<CButton variant="outline-primary" :pressed.sync="togglePress">Primary {{togglePress ? 'On ' : 'Off'}}</CButton>
@@ -644,13 +645,15 @@
<CButton variant="outline-danger" :pressed.sync="togglePress">Danger {{togglePress ? 'On ' : 'Off'}}</CButton>
</CCol>
</CRow>
</CCardBody>
</CCard>
<CRow>
<CCol xs="12" md="6">
<CCard>
<CCardHeader slot="header">
<strong>Block Level CButtons</strong> <small>Add this <code>block</code></small>
<CCardHeader>
<strong>Block Level CButtons </strong><small>Add this <code>block</code></small>
</CCardHeader>
<CCardBody>
<CButton size="lg" variant="secondary" block>Block level button</CButton>
<CButton size="lg" variant="primary" block>Block level button</CButton>
<CButton size="lg" variant="success" block>Block level button</CButton>
@@ -658,13 +661,15 @@
<CButton size="lg" variant="warning" block>Block level button</CButton>
<CButton size="lg" variant="danger" block>Block level button</CButton>
<CButton size="lg" variant="link" block>Block level button</CButton>
</CCardBody>
</CCard>
</CCol>
<CCol xs="12" md="6">
<CCard>
<CCardHeader slot="header">
<strong>Block Level CButtons</strong> <small>Add this <code>block</code></small>
<CCardHeader>
<strong>Block Level CButtons </strong><small>Add this <code>block</code></small>
</CCardHeader>
<CCardBody>
<CButton size="lg" variant="outline-secondary" block>Block level button</CButton>
<CButton size="lg" variant="outline-primary" block>Block level button</CButton>
<CButton size="lg" variant="outline-success" block>Block level button</CButton>
@@ -672,6 +677,7 @@
<CButton size="lg" variant="outline-warning" block>Block level button</CButton>
<CButton size="lg" variant="outline-danger" block>Block level button</CButton>
<CButton size="lg" ghost variant="info" block>Block level button</CButton>
</CCardBody>
</CCard>
</CCol>
</CRow>
src/views/icons/CoreUIIcons.vue
+3 -3
View File
@@ -1,7 +1,7 @@
<template>
<div class="animated fadeIn">
<CCard noWrapper>
<CCardHeader slot="header">
<CCard >
<CCardHeader>
<i class="fa fa-picture-o"></i>CoreUI Icons <CBadge variant="info">New</CBadge>
<div class="card-header-actions">
<a href="https://github.com/coreui/coreui-icons" rel="noreferrer noopener" target="_blank" class="card-header-action">
@@ -9,7 +9,7 @@
</a>
</div>
</CCardHeader>
<CCardBody slot="body">
<CCardBody>
<CRow class="text-center">
<CCol cols="6" sm="4" md="3" xl="2">
<i class="cui-account-logout icons font-2xl d-block mt-4"></i>
src/views/icons/Flags.vue
+3 -3
View File
@@ -1,10 +1,10 @@
<template>
<div class="animated fadeIn">
<CCard noWrapper id="new47">
<CCardHeader slot="header">
<CCard id="new47">
<CCardHeader>
<i class="fa fa-font-awesome"></i> Flags
</CCardHeader>
<CCardBody slot="body">
<CCardBody>
<CRow class="text-center">
<CCol class="mb-5" cols="12">
For using the flags inline with text add the classes <code>.flag-icon</code> and <code>.flag-icon-xx</code> (where xx is the ISO 3166-1-alpha-2 code of a country) to an empty span. If you want to have a squared version flag then add the class flag-icon-squared as well.
src/views/icons/FontAwesome.vue
+51 -51
View File
@@ -1,10 +1,10 @@
<template>
<div class="animated fadeIn">
<CCard noWrapper id="new47">
<CCardHeader slot="header">
<CCard id="new47">
<CCardHeader>
<i class="fa fa-font-awesome"></i> 50 New Icons in 4.7
</CCardHeader>
<CCardBody slot="body">
<CCardBody>
<CRow class="text-center">
<CCol cols="6" sm="4" md="3" lg="2">
<i class="fa fa-address-book fa-lg mt-4"></i><br/>address-book
@@ -174,9 +174,9 @@
</CRow>
</CCardBody>
</CCard>
<CCard noWrapper id="new">
<CCardHeader slot="header">20 New Icons in 4.5</CCardHeader>
<CCardBody slot="body">
<CCard id="new">
<CCardHeader>20 New Icons in 4.5</CCardHeader>
<CCardBody>
<CRow class="text-center">
<CCol cols="6" sm="4" md="3" lg="2">
@@ -245,9 +245,9 @@
</CCardBody>
</CCard>
<CCard noWrapper id="web-application">
<CCardHeader slot="header">Web Application Icons</CCardHeader>
<CCardBody slot="body">
<CCard id="web-application">
<CCardHeader>Web Application Icons</CCardHeader>
<CCardBody>
<CRow class="text-center">
<CCol cols="6" sm="4" md="3" lg="2">
@@ -1432,9 +1432,9 @@
</CCard>
<CCard noWrapper id="hand">
<CCardHeader slot="header">Hand Icons</CCardHeader>
<CCardBody slot="body">
<CCard id="hand">
<CCardHeader>Hand Icons</CCardHeader>
<CCardBody>
<CRow class="text-center">
<CCol cols="6" sm="4" md="3" lg="2">
@@ -1494,9 +1494,9 @@
</CCard>
<CCard noWrapper id="transportation">
<CCardHeader slot="header">Transportation Icons</CCardHeader>
<CCardBody slot="body">
<CCard id="transportation">
<CCardHeader>Transportation Icons</CCardHeader>
<CCardBody>
<CRow class="text-center">
<CCol cols="6" sm="4" md="3" lg="2">
@@ -1555,9 +1555,9 @@
</CCardBody>
</CCard>
<CCard noWrapper id="gender">
<CCardHeader slot="header">Gender Icons</CCardHeader>
<CCardBody slot="body">
<CCard id="gender">
<CCardHeader>Gender Icons</CCardHeader>
<CCardBody>
<CRow class="text-center">
<CCol cols="6" sm="4" md="3" lg="2">
@@ -1607,9 +1607,9 @@
</CCardBody>
</CCard>
<CCard noWrapper id="file-type">
<CCardHeader slot="header">File Type Icons</CCardHeader>
<CCardBody slot="body">
<CCard id="file-type">
<CCardHeader>File Type Icons</CCardHeader>
<CCardBody>
<CRow class="text-center">
<CCol cols="6" sm="4" md="3" lg="2">
@@ -1671,9 +1671,9 @@
</CCardBody>
</CCard>
<CCard noWrapper id="spinner">
<CCardHeader slot="header">Spinner Icons</CCardHeader>
<CCardBody slot="body">
<CCard id="spinner">
<CCardHeader>Spinner Icons</CCardHeader>
<CCardBody>
<div class="alert alert-success">
<ul class="fa-ul">
<li>
@@ -1704,9 +1704,9 @@
</CCardBody>
</CCard>
<CCard noWrapper id="form-control">
<CCardHeader slot="header">Form Control Icons</CCardHeader>
<CCardBody slot="body">
<CCard id="form-control">
<CCardHeader>Form Control Icons</CCardHeader>
<CCardBody>
<CRow class="text-center">
<CCol cols="6" sm="4" md="3" lg="2">
@@ -1747,9 +1747,9 @@
</CCardBody>
</CCard>
<CCard noWrapper id="payment">
<CCardHeader slot="header">Payment Icons</CCardHeader>
<CCardBody slot="body">
<CCard id="payment">
<CCardHeader>Payment Icons</CCardHeader>
<CCardBody>
<CRow class="text-center">
<CCol cols="6" sm="4" md="3" lg="2">
@@ -1793,9 +1793,9 @@
</CCardBody>
</CCard>
<CCard noWrapper id="chart">
<CCardHeader slot="header">Chart Icons</CCardHeader>
<CCardBody slot="body">
<CCard id="chart">
<CCardHeader>Chart Icons</CCardHeader>
<CCardBody>
<CRow class="text-center">
<CCol cols="6" sm="4" md="3" lg="2">
@@ -1818,9 +1818,9 @@
</CCardBody>
</CCard>
<CCard noWrapper id="currency">
<CCardHeader slot="header">Currency Icons</CCardHeader>
<CCardBody slot="body">
<CCard id="currency">
<CCardHeader>Currency Icons</CCardHeader>
<CCardBody>
<CRow class="text-center">
<CCol cols="6" sm="4" md="3" lg="2">
@@ -1906,9 +1906,9 @@
</CCardBody>
</CCard>
<CCard noWrapper id="text-editor">
<CCardHeader slot="header">Text Editor Icons</CCardHeader>
<CCardBody slot="body">
<CCard id="text-editor">
<CCardHeader>Text Editor Icons</CCardHeader>
<CCardBody>
<CRow class="text-center">
<CCol cols="6" sm="4" md="3" lg="2">
@@ -2063,9 +2063,9 @@
</CCardBody>
</CCard>
<CCard noWrapper id="directional">
<CCardHeader slot="header">Directional Icons</CCardHeader>
<CCardBody slot="body">
<CCard id="directional">
<CCardHeader>Directional Icons</CCardHeader>
<CCardBody>
<CRow class="text-center">
<CCol cols="6" sm="4" md="3" lg="2">
@@ -2232,9 +2232,9 @@
</CCardBody>
</CCard>
<CCard noWrapper id="video-player">
<CCardHeader slot="header">Video Player Icons</CCardHeader>
<CCardBody slot="body">
<CCard id="video-player">
<CCardHeader>Video Player Icons</CCardHeader>
<CCardBody>
<CRow class="text-center">
<CCol cols="6" sm="4" md="3" lg="2">
@@ -2305,9 +2305,9 @@
</CCardBody>
</CCard>
<CCard noWrapper id="brand">
<CCardHeader slot="header">Brand Icons</CCardHeader>
<CCardBody slot="body">
<CCard id="brand">
<CCardHeader>Brand Icons</CCardHeader>
<CCardBody>
<div class="alert alert-warning">
<h4><i class="fa fa-warning"></i> Warning!</h4>
Apparently, Adblock Plus can remove Font Awesome brand icons with their "Remove Social
@@ -2796,9 +2796,9 @@
</CCardBody>
</CCard>
<CCard noWrapper id="medical">
<CCardHeader slot="header">Medical Icons</CCardHeader>
<CCardBody slot="body">
<CCard id="medical">
<CCardHeader>Medical Icons</CCardHeader>
<CCardBody>
<CRow class="text-center">
<CCol cols="6" sm="4" md="3" lg="2">
src/views/icons/SimpleLineIcons.vue
+3 -3
View File
@@ -1,10 +1,10 @@
<template>
<div class="animated fadeIn">
<CCard noWrapper class="card-default">
<CCardHeader slot="header">
<CCard class="card-default">
<CCardHeader>
<i class="fa fa-picture-o"></i> Simple Line Icons
</CCardHeader>
<CCardBody slot="body">
<CCardBody>
<CRow class="text-center">
<CCol cols="6" sm="4" md="3">
src/views/notifications/Alerts.vue
+19 -8
View File
@@ -4,14 +4,16 @@
<CRow>
<CCol cols="12" md="6">
<CCard>
<CCardHeader slot="header">
<i class="fa fa-align-justify"></i><strong> Bootstrap Alert</strong>
<div class="card-header-actions">
<CCardHeader>
<i class="fa fa-align-justify"></i>
<strong> Bootstrap Alert</strong>
<!-- <div class="card-header-actions">
<a href="https://bootstrap-vue.js.org/docs/components/alert" class="card-header-action" rel="noreferrer noopener" target="_blank">
<small class="text-muted">docs</small>
</a>
</div>
</div> -->
</CCardHeader>
<CCardBody>
<div>
<p></p>
<CAlert show variant="primary">Primary Alert</CAlert>
@@ -23,14 +25,16 @@
<CAlert show variant="light">Light Alert</CAlert>
<CAlert show variant="dark">Dark Alert</CAlert>
</div>
</CCardBody>
</CCard>
</CCol>
<CCol cols="12" md="6">
<CCard>
<CCardHeader slot="header">
<CCardHeader>
<i class="fa fa-align-justify"></i> Alert
<small> use <code>.alert-link</code> to provide links</small>
</CCardHeader>
<CCardBody>
<div>
<CAlert show variant="primary">
Primary Alert with <a href="#" class="alert-link">an example link</a>.
@@ -59,13 +63,15 @@
.
</CAlert>
</div>
</CCardBody>
</CCard>
</CCol>
<CCol cols="12" md="6">
<CCard>
<CCardHeader slot="header">
<CCardHeader>
<i class="fa fa-align-justify"></i> Alerts <small>with additional content</small>
</CCardHeader>
<CCardBody>
<CAlert show variant="success">
<h4 class="alert-heading">Well done!</h4>
<p>
@@ -78,13 +84,15 @@
Whenever you need to, be sure to use margin utilities to keep things nice and tidy.
</p>
</CAlert>
</CCardBody>
</CCard>
</CCol>
<CCol cols="12" md="6">
<CCard>
<CCardHeader slot="header">
<CCardHeader>
<i class="fa fa-align-justify"></i> Alerts <small>dismissible</small>
</CCardHeader>
<CCardBody>
<div>
<CAlert :show="true" dismissible disabled>
Dismissible Alert!
@@ -115,11 +123,13 @@
Show dismissible alert ({{showDismissibleAlert?'visible':'hidden'}})
</CButton>
</div>
</CCardBody>
</CCard>
<CCard>
<CCardHeader slot="header">
<CCardHeader>
<i class="fa fa-align-justify"></i> Alerts <small>auto dismissible</small>
</CCardHeader>
<CCardBody>
<div>
<CAlert :show="dismissCountDown"
dismissible
@@ -145,6 +155,7 @@
Show alert with timer
</CButton>
</div>
</CCardBody>
</CCard>
</CCol>
</CRow>
src/views/notifications/Badges.vue
+31 -22
View File
@@ -1,25 +1,26 @@
<template>
<template functional>
<div class="wrapper">
<div class="animated fadeIn">
<CRow>
<CCol cols="12" md="6">
<CCard>
<CCardHeader slot="header">
<i class="fa fa-align-justify"></i><strong> Bootstrap Badge</strong>
<div class="card-header-actions">
<CCardHeader>
<i class="fa fa-align-justify"></i>
<strong> Bootstrap Badge</strong>
<!-- <div class="card-header-actions">
<a href="https://bootstrap-vue.js.org/docs/components/badge" class="card-header-action" rel="noreferrer noopener" target="_blank">
<small class="text-muted">docs</small>
</a>
</div>
</div> -->
</CCardHeader>
<div>
<CCardBody>
<h2>Example heading <CBadge>New</CBadge></h2>
<h3>Example heading <CBadge>New</CBadge></h3>
<h4>Example heading <CBadge>New</CBadge></h4>
<h5>Example heading <CBadge>New</CBadge></h5>
<h6>Example heading <CBadge>New</CBadge></h6>
</div>
<CCardFooter slot="footer">
</CCardBody>
<CCardFooter>
<CButton variant="primary">
Notifications <CBadge variant="light" :style="{position: 'static'}">4</CBadge>
</CButton>
@@ -27,8 +28,12 @@
</CCard>
</CCol>
<CCol cols="12" md="6">
<CCard header="<i class='fa fa-align-justify'></i> Badge <small>contextual variations</small>">
<div>
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i> Badge
<small>contextual variations</small>
</CCardHeader>
<CCardBody>
<CBadge variant="primary">Primary</CBadge>
<CBadge variant="secondary">Secondary</CBadge>
<CBadge variant="success">Success</CBadge>
@@ -37,10 +42,14 @@
<CBadge variant="info">Info</CBadge>
<CBadge variant="light">Light</CBadge>
<CBadge variant="dark">Dark</CBadge>
</div>
</CCardBody>
</CCard>
<CCard header="<i class='fa fa-align-justify'></i> Badge <small>pills</small>">
<div>
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i> Badge
<small>pills</small>
</CCardHeader>
<CCardBody>
<CBadge pill variant="primary">Primary</CBadge>
<CBadge pill variant="secondary">Secondary</CBadge>
<CBadge pill variant="success">Success</CBadge>
@@ -49,10 +58,14 @@
<CBadge pill variant="info">Info</CBadge>
<CBadge pill variant="light">Light</CBadge>
<CBadge pill variant="dark">Dark</CBadge>
</div>
</CCardBody>
</CCard>
<CCard header="<i class='fa fa-align-justify'></i> Badge <small>actionable</small>">
<div>
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i> Badge
<small>actionable</small>
</CCardHeader>
<CCardBody>
<CBadge href="#" variant="primary">Primary</CBadge>
<CBadge href="#" variant="secondary">Secondary</CBadge>
<CBadge href="#" variant="success">Success</CBadge>
@@ -61,7 +74,7 @@
<CBadge href="#" variant="info">Info</CBadge>
<CBadge href="#" variant="light">Light</CBadge>
<CBadge href="#" variant="dark">Dark</CBadge>
</div>
</CCardBody>
</CCard>
</CCol>
</CRow>
@@ -71,10 +84,6 @@
<script>
export default {
name: 'badges',
data () {
return {
}
}
name: 'badges'
}
</script>
src/views/notifications/Modals.vue
+33 -10
View File
@@ -3,17 +3,40 @@
<div class="animated fadeIn">
<CRow>
<CCol cols="12">
<CCard header="<i class='fa fa-align-justify'></i> Bootstrap Modals">
<CButton variant="secondary" @click="myModal = true" class="mr-1">Launch demo modal</CButton>
<CButton variant="secondary" @click="largeModal = true" class="mr-1">Launch large modal</CButton>
<CButton variant="secondary" @click="smallModal = true" class="mr-1">Launch small modal</CButton>
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i> Bootstrap Modals
</CCardHeader>
<CCardBody>
<CButton variant="secondary" @click="myModal = true" class="mr-1">
Launch demo modal
</CButton>
<CButton variant="secondary" @click="largeModal = true" class="mr-1">
Launch large modal
</CButton>
<CButton variant="secondary" @click="smallModal = true" class="mr-1">
Launch small modal
</CButton>
<hr>
<CButton variant="primary" @click="primaryModal = true" class="mr-1">Launch primary modal</CButton>
<CButton variant="success" @click="successModal = true" class="mr-1">Launch success modal</CButton>
<CButton variant="warning" @click="warningModal = true" class="mr-1">Launch warning modal</CButton>
<CButton variant="danger" @click="dangerModal = true" class="mr-1">Launch danger modal</CButton>
<CButton variant="info" @click="infoModal = true" class="mr-1">Launch info modal</CButton>
<CButton variant="dark" @click="darkModal = !darkModal" class="mr-1">Launch dark modal</CButton>
<CButton variant="primary" @click="primaryModal = true" class="mr-1">
Launch primary modal
</CButton>
<CButton variant="success" @click="successModal = true" class="mr-1">
Launch success modal
</CButton>
<CButton variant="warning" @click="warningModal = true" class="mr-1">
Launch warning modal
</CButton>
<CButton variant="danger" @click="dangerModal = true" class="mr-1">
Launch danger modal
</CButton>
<CButton variant="info" @click="infoModal = true" class="mr-1">
Launch info modal
</CButton>
<CButton variant="dark" @click="darkModal = true" class="mr-1">
Launch dark modal
</CButton>
</CCardBody>
</CCard>
</CCol><!--/.col-->
</CRow><!--/.row-->
src/views/pages/Login.vue
+3 -2
View File
@@ -4,8 +4,8 @@
<CRow class="justify-content-center">
<CCol md="8">
<CCardGroup>
<CCard noWrapper class="p-4">
<CCardBody slot="body">
<CCard class="p-4">
<CCardBody>
<CForm>
<h1>Login</h1>
<p class="text-muted">Sign In to your account</p>
@@ -34,6 +34,7 @@
<CCard
class="text-white text-center bg-primary py-5 d-md-down-none"
style="width:44%"
bodyWrapper
>
<h2>Sign up</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
src/views/pages/Register.vue
-4
View File
@@ -4,7 +4,6 @@
<CRow class="justify-content-center">
<CCol md="6" sm="8">
<CCard class="mx-4">
<template #body>
<CCardBody class="p-4">
<CForm>
<h1>Register</h1>
@@ -35,8 +34,6 @@
<CButton variant="success" block>Create Account</CButton>
</CForm>
</CCardBody>
</template>
<template #footer>
<CCardFooter class="p-4">
<CRow>
<CCol cols="6">
@@ -47,7 +44,6 @@
</CCol>
</CRow>
</CCardFooter>
</template>
</CCard>
</CCol>
</CRow>
src/views/theme/Colors.vue
+7 -7
View File
@@ -1,10 +1,10 @@
<template>
<div class="animated fadeIn">
<CCard >
<CCardHeader slot="header">
<CCardHeader>
<i class="icon-drop"></i> Theme colors
</CCardHeader>
<CCardBody slot="body">
<CCardBody>
<CRow>
<ColorTheme color="bg-primary">
<h6>Brand Primary Color</h6>
@@ -19,11 +19,11 @@
</CRow>
</CCardBody>
</CCard>
<CCard >
<CCardHeader slot="header">
<CCard>
<CCardHeader>
<i class="icon-drop"></i> Grays
</CCardHeader>
<CCardBody slot="body">
<CCardBody>
<CRow>
<ColorTheme color="bg-gray-100"><h6>Brand 100 Color</h6></ColorTheme>
<ColorTheme color="bg-gray-200"><h6>Brand 200 Color</h6></ColorTheme>
@@ -38,10 +38,10 @@
</CCardBody>
</CCard>
<CCard >
<CCardHeader slot="header">
<CCardHeader>
<i class="icon-drop"></i> Additional colors
</CCardHeader>
<CCardBody slot="body">
<CCardBody>
<CRow>
<ColorTheme color="bg-blue"><h6>Brand Blue Color</h6></ColorTheme>
<ColorTheme color="bg-indigo"><h6>Brand Indigo Color</h6></ColorTheme>
src/views/users/User.vue
+8 -8
View File
@@ -1,21 +1,21 @@
<template>
<CRow>
<CCol cols="12"
lg="6"
>
<CCard no-header>
<template slot="header">
<CCol cols="12" lg="6">
<CCard>
<CCardHeader>
User id: {{ $route.params.id }}
</template>
</CCardHeader>
<CCardBody>
<CTable striped
small
fixed
:items="items($route.params.id)"
:fields="$options.fields"
/>
<template slot="footer">
</CCardBody>
<CCardFooter>
<CButton @click="goBack">Back</CButton>
</template>
</CCardFooter>
</CCard>
</CCol>
</CRow>
src/views/users/Users.vue
+2 -2
View File
@@ -1,8 +1,8 @@
<template>
<CRow>
<CCol cols="12" xl="6">
<CCol cols="12" xl="8">
<transition name="slide">
<CCard header="users">
<CCard header="users" bodyWrapper>
<CTable hover
striped
:items="items"