sean/manja_dev_ui
1
0
Fork 0
Code Issues Pull Requests Actions 4 Packages Projects Releases Wiki Activity

feat: Initial commit of v3-alpha

Browse Source
This commit is contained in:
woothu
2019-02-06 10:57:52 +01:00
parent 74b325afc5
commit da02129f01
22 changed files with 1020 additions and 685 deletions
Download Patch File Download Diff File Expand all files Collapse all files
package.json
+4 -2
View File
@@ -14,19 +14,21 @@
"test:e2e": "vue-cli-service test:e2e"
},
"dependencies": {
"@coreui/coreui": "^2.0.20",
"@coreui/coreui": "^2.1.6",
"@coreui/coreui-plugin-chartjs-custom-tooltips": "^1.2.0",
"@coreui/icons": "0.3.0",
"@coreui/vue": "github:coreui/coreui-vue#vue_cli3",
"@coreui/vue": "github:coreui/coreui-vue#woothu",
"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",
"element-resize-detector": "^1.2.0",
"flag-icon-css": "^3.2.0",
"font-awesome": "^4.7.0",
"perfect-scrollbar": "^1.4.0",
"simple-line-icons": "^2.4.1",
"tooltip.js": "^1.3.1",
"vue": "^2.5.17",
"vue-chartjs": "^3.4.0",
"vue-perfect-scrollbar": "^0.1.0",
src/containers/DefaultContainer.vue
+6 -1
View File
@@ -32,7 +32,7 @@
<AppSidebar fixed>
<SidebarHeader/>
<SidebarForm/>
<SidebarNav :navItems="nav"></SidebarNav>
<SidebarNav :navItems="computedNav"></SidebarNav>
<SidebarFooter/>
<SidebarMinimizer/>
</AppSidebar>
@@ -88,6 +88,11 @@ export default {
return {
nav: nav.items
}
},
computed: {
computedNav () {
return this.nav.filter((item) => item.name !== 'Dashboard')
}
}
}
</script>
src/containers/DefaultHeaderDropdownAccnt.vue
+36 -26
View File
@@ -1,48 +1,58 @@
<template>
<c-nav-item-dropdown no-caret right>
<template slot="button-content">
<img
<CDropdown right class="nav-item" toggleClasses="nav-link" menuClasses="hehe">
<img slot="button"
src="img/avatars/6.jpg"
class="img-avatar"
alt="admin@bootstrapmaster.com" />
</template>
alt="admin@bootstrapmaster.com"
/>
<b-dropdown-header tag="div" class="text-center"><strong>Account</strong></b-dropdown-header>
<b-dropdown-item><i class="fa fa-bell-o" /> Updates
<c-dropdown-header tag="div" class="text-center"><strong>Account</strong></c-dropdown-header>
<c-dropdown-item><i class="fa fa-bell-o" /> Updates
<c-badge variant="info" additionalClasses="hehe">{{ itemsCount }}</c-badge>
</b-dropdown-item>
<b-dropdown-item><i class="fa fa-envelope-o" /> Messages
</c-dropdown-item>
<c-dropdown-item><i class="fa fa-envelope-o" /> Messages
<c-badge variant="success">{{ itemsCount }}</c-badge>
</b-dropdown-item>
<b-dropdown-item><i class="fa fa-tasks" /> Tasks
</c-dropdown-item>
<c-dropdown-item><i class="fa fa-tasks" /> Tasks
<c-badge variant="danger">{{ itemsCount }}</c-badge>
</b-dropdown-item>
<b-dropdown-item><i class="fa fa-comments" /> Comments
</c-dropdown-item>
<c-dropdown-item><i class="fa fa-comments" /> Comments
<c-badge variant="warning">{{ itemsCount }}</c-badge>
</b-dropdown-item>
<b-dropdown-header
</c-dropdown-item>
<c-dropdown-header
tag="div"
class="text-center">
<strong>Settings</strong>
</b-dropdown-header>
<b-dropdown-item><i class="fa fa-user" /> Profile</b-dropdown-item>
<b-dropdown-item><i class="fa fa-wrench" /> Settings</b-dropdown-item>
<b-dropdown-item><i class="fa fa-usd" /> Payments
</c-dropdown-header>
<c-dropdown-item><i class="fa fa-user" /> Profile</c-dropdown-item>
<c-dropdown-item><i class="fa fa-wrench" /> Settings</c-dropdown-item>
<c-dropdown-item><i class="fa fa-usd" /> Payments
<c-badge variant="secondary">{{ itemsCount }}</c-badge>
</b-dropdown-item>
<b-dropdown-item><i class="fa fa-file" /> Projects
</c-dropdown-item>
<c-dropdown-item><i class="fa fa-file" /> Projects
<c-badge variant="primary">{{ itemsCount }}</c-badge>
</b-dropdown-item>
<b-dropdown-divider />
<b-dropdown-item><i class="fa fa-shield" /> Lock Account</b-dropdown-item>
<b-dropdown-item><i class="fa fa-lock" /> Logout</b-dropdown-item>
</c-nav-item-dropdown>
</c-dropdown-item>
<CDropdownDivider/>
<c-dropdown-item><i class="fa fa-shield" /> Lock Account</c-dropdown-item>
<c-dropdown-item><i class="fa fa-lock" /> Logout</c-dropdown-item>
</CDropdown>
</template>
<script>
// import CDropdown from './CDropdown'
// import CDropdownHeader from './CDropdownHeader'
// import CDropdownDivider from './CDropdownDivider'
// import CDropdownItem from './CDropdownItem'
export default {
name: 'DefaultHeaderDropdownAccnt',
// components: {
// CDropdown,
// CDropdownHeader,
// CDropdownDivider,
// CDropdownItem
// },
data: () => {
return { itemsCount: 42 }
},
src/views/Dashboard.vue
+45 -41
View File
@@ -2,43 +2,7 @@
<div class="animated fadeIn">
<b-row>
<b-col sm="6" lg="3">
<c-widget06 cardClasses="bg-primary" header="9.823" text="Members online">
<b-dropdown slot='dropdown' class="float-right" variant="transparent p-0" right>
<template slot="button-content">
<i class="icon-settings"></i>
</template>
<b-dropdown-item>Action</b-dropdown-item>
<b-dropdown-item>Another action</b-dropdown-item>
<b-dropdown-item>Something else here...</b-dropdown-item>
<b-dropdown-item disabled>Disabled action</b-dropdown-item>
</b-dropdown>
<c-simple-pointed-chart class='px-3' :data='[65, 59, 84, 84, 51, 55, 40]'
:labels="['January', 'February', 'March', 'April', 'May', 'June', 'July']"
style='height:70px' label='Members' pointHoverColor='primary'/>
</c-widget06>
</b-col>
<b-col sm="6" lg="3">
<c-widget06 cardClasses="bg-info" header="9.823" text="Members online">
<template slot='dropdown'>
<b-dropdown class="float-right" variant="transparent p-0" right no-caret>
<template slot="button-content">
<i class="icon-location-pin"></i>
</template>
<b-dropdown-item>Action</b-dropdown-item>
<b-dropdown-item>Another action</b-dropdown-item>
<b-dropdown-item>Something else here...</b-dropdown-item>
<b-dropdown-item disabled>Disabled action</b-dropdown-item>
</b-dropdown>
</template>
<c-simple-pointed-chart class='px-3' :data='[1, 18, 9, 17, 34, 22, 11]'
:labels="['January', 'February', 'March', 'April', 'May', 'June', 'July']"
style='height:70px' label='Members' :options='{elements: {line: {tension: 0.00001}}}'
pointHoverColor='info'/>
</c-widget06>
</b-col>
<b-col sm="6" lg="3">
<c-widget06 cardClasses="bg-warning" header="9.823" text="Members online">
<c-widget06 header="9.823" text="Members online">
<template slot='dropdown'>
<b-dropdown class="float-right" variant="transparent p-0" right>
<template slot="button-content">
@@ -50,15 +14,54 @@
<b-dropdown-item disabled>Disabled action</b-dropdown-item>
</b-dropdown>
</template>
<c-simple-line-chart :data='[78, 81, 80, 45, 34, 12, 40]'
<c-simple-pointed-chart class='px-3' :data='[65, 59, 84, 84, 51, 55, 40]'
:labels="['January', 'February', 'March', 'April', 'May', 'June', 'July']"
style='height:70px' label='Members' pointHoverColor='primary'/>
</c-widget06>
</b-col>
<b-col sm="6" lg="3">
<c-widget06 variant="info" header="9.823" text="Members online">
<b-dropdown slot="dropdown" class="float-right" variant="transparent p-0" right no-caret>
<i slot="button-content"
class="icon-location-pin"
></i>
<b-dropdown-item>Action</b-dropdown-item>
<b-dropdown-item>Another action</b-dropdown-item>
<b-dropdown-item>Something else here...</b-dropdown-item>
<b-dropdown-item disabled>Disabled action</b-dropdown-item>
</b-dropdown>
<CSimplePointedChart class="px-3"
:data="[1, 18, 9, 17, 34, 22, 11]"
:labels="['January', 'February', 'March', 'April', 'May', 'June', 'July']"
style="height:70px"
label="Members"
:options="{elements: {line: {tension: 0.00001}}}"
pointHoverColor="info"
/>
</c-widget06>
</b-col>
<b-col sm="6" lg="3">
<c-widget06 variant="warning" header="9.823" text="Members online">
<template slot='dropdown'>
<b-dropdown class="float-right" variant="transparent p-0" right>
<template slot="button-content">
<i class="icon-settings"></i>
</template>
<b-dropdown-item>Action</b-dropdown-item>
<b-dropdown-item>Another action</b-dropdown-item>
<b-dropdown-item>Something else here...</b-dropdown-item>
<b-dropdown-item disabled>Disabled action</b-dropdown-item>
</b-dropdown>
</template>
<c-simple-line-chart chartId="c-widget06_3" :data='[78, 81, 80, 45, 34, 12, 40]'
:labels="['January', 'February', 'March', 'April', 'May', 'June', 'July']"
style='height:70px' color ='rgba(255,255,255,.2)' label='Members'
:options="{elements: {line: {borderWidth: 2.5}}}" pointHoverColor='warning'/>
</c-widget06>
</b-col>
<b-col sm="6" lg="3">
<c-widget06 cardClasses="bg-danger" header="9.823" text="Members online">
<template slot='dropdown'>
<c-widget06 variant="danger" header="9.823" text="Members online">
<template slot="dropdown">
<b-dropdown class="float-right" variant="transparent p-0" right>
<template slot="button-content">
<i class="icon-settings"></i>
@@ -69,11 +72,12 @@
<b-dropdown-item disabled>Disabled action</b-dropdown-item>
</b-dropdown>
</template>
<c-simple-bar-chart :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]'
<c-simple-bar-chart chartId="CWidget06_4" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]'
label='Members' color='rgb(250, 152, 152)' style='height:70px' />
</c-widget06>
</b-col>
</b-row>
<b-card>
<b-row>
<b-col sm="5">
src/views/Widgets.vue
+13 -9
View File
@@ -3,7 +3,7 @@
<b-row>
<b-col sm="6" lg="3">
<c-widget01 header="89.9%" text="Lorem ipsum..." footer="Lorem ipsum dolor sit amet enim.">
<CProgress variant="success" :value="25" class="progress-xs my-3 mb-0"/>
<CProgress color="success" :value="25" class="progress-xs my-3 mb-0"/>
</c-widget01>
</b-col>
<b-col sm="6" lg="3">
@@ -201,7 +201,7 @@
</b-row>
<b-row>
<b-col sm="6" lg="3">
<c-widget06 cardClasses="bg-primary" header="9.823" text="Members online">
<c-widget06 header="9.823" text="Members online">
<template slot='dropdown'>
<b-dropdown class="float-right" variant="transparent p-0" right>
<template slot="button-content">
@@ -219,7 +219,7 @@
</c-widget06>
</b-col>
<b-col sm="6" lg="3">
<c-widget06 cardClasses="bg-info" header="9.823" text="Members online">
<c-widget06 variant="info" header="9.823" text="Members online">
<b-dropdown slot="dropdown" class="float-right" variant="transparent p-0" right no-caret>
<i slot="button-content"
class="icon-location-pin"
@@ -240,7 +240,7 @@
</c-widget06>
</b-col>
<b-col sm="6" lg="3">
<c-widget06 cardClasses="bg-warning" header="9.823" text="Members online">
<c-widget06 variant="warning" header="9.823" text="Members online">
<template slot='dropdown'>
<b-dropdown class="float-right" variant="transparent p-0" right>
<template slot="button-content">
@@ -259,7 +259,7 @@
</c-widget06>
</b-col>
<b-col sm="6" lg="3">
<c-widget06 cardClasses="bg-danger" header="9.823" text="Members online">
<c-widget06 variant="danger" header="9.823" text="Members online">
<template slot="dropdown">
<b-dropdown class="float-right" variant="transparent p-0" right>
<template slot="button-content">
@@ -287,19 +287,19 @@
</c-widget07>
</b-col>
<b-col sm="6" lg="3">
<c-widget07 cardClasses='bg-success' rightHeader='SALE' rightFooter='Today 6:43 AM' leftHeader='$1.890,65' leftFooter='+432,50 (15,78%)'>
<c-widget07 variant='success' rightHeader='SALE' rightFooter='Today 6:43 AM' leftHeader='$1.890,65' leftFooter='+432,50 (15,78%)'>
<c-simple-line-chart style="height:40px" chartId="c-widget07_line2" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]' label='Sales'/>
<c-simple-bar-chart style="height:40px" chartId="c-widget07_bar2" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]' label='Sales'/>
</c-widget07>
</b-col>
<b-col sm="6" lg="3">
<c-widget07 cardClasses='bg-danger' rightHeader='SALE' rightFooter='Today 6:43 AM' leftHeader='$1.890,65' leftFooter='+432,50 (15,78%)'>
<c-widget07 variant='danger' rightHeader='SALE' rightFooter='Today 6:43 AM' leftHeader='$1.890,65' leftFooter='+432,50 (15,78%)'>
<c-simple-line-chart style="height:40px" chartId="c-widget07_line3" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]' label='Sales'/>
<c-simple-bar-chart style="height:40px" chartId="c-widget07_bar3" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]' label='Sales'/>
</c-widget07>
</b-col>
<b-col sm="6" lg="3">
<c-widget07 cardClasses='bg-warning' rightHeader='SALE' rightFooter='Today 6:43 AM' leftHeader='$1.890,65' leftFooter='+432,50 (15,78%)'>
<c-widget07 variant='warning' rightHeader='SALE' rightFooter='Today 6:43 AM' leftHeader='$1.890,65' leftFooter='+432,50 (15,78%)'>
<c-simple-line-chart style="height:40px" chartId="c-widget07_line4" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]' label='Sales'/>
<c-simple-bar-chart style="height:40px" chartId="c-widget07_bar4" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]' label='Sales'/>
</c-widget07>
@@ -350,7 +350,11 @@
</template>
<script>
// import CWidget06 from './CWidget06'
export default {
name: 'Widgets'
name: 'Widgets',
// components: {
// CWidget06
// }
}
</script>
src/views/base/Breadcrumbs.vue
+1 -1
View File
@@ -17,7 +17,7 @@
<CBreadcrumb :items="items"/>
<CBreadcrumb :items="items2"/>
<CBreadcrumb :items="items3"/>
<Breadcrumb :list="items3"/>
<!-- <Breadcrumb :list="items3"/> -->
</b-card>
</b-col>
src/views/base/CLink.js
-170
View File
@@ -1,170 +0,0 @@
import { mergeData } from 'vue-functional-data-merge'
/**
* The Link component is used in many other BV components.
* As such, sharing its props makes supporting all its features easier.
* However, some components need to modify the defaults for their own purpose.
* Prefer sharing a fresh copy of the props to ensure mutations
* do not affect other component references to the props.
*
* https://github.com/vuejs/vue-router/blob/dev/src/components/link.js
* @return {{}}
*/
export function propsFactory () {
return {
href: {
type: String,
default: null
},
rel: {
type: String,
default: null
},
target: {
type: String,
default: '_self'
},
active: {
type: Boolean,
default: false
},
activeClass: {
type: String,
default: 'active'
},
append: {
type: Boolean,
default: false
},
disabled: {
type: Boolean,
default: false
},
event: {
type: [String, Array],
default: 'click'
},
exact: {
type: Boolean,
default: false
},
exactActiveClass: {
type: String,
default: 'active'
},
replace: {
type: Boolean,
default: false
},
routerTag: {
type: String,
default: 'a'
},
to: {
type: [String, Object],
default: null
}
}
}
export const props = propsFactory()
function computeTag (props, parent) {
return Boolean(parent.$router) && props.to && !props.disabled ? 'router-link' : 'a'
}
/*eslint no-unused-vars: ["error", {"args": "none"}]*/
function computeHref ({ disabled, href, to }, tag) {
// We've already checked the parent.$router in computeTag,
// so router-link means live router.
// When deferring to Vue Router's router-link,
// don't use the href attr at all.
// Must return undefined for router-link to populate href.
if (tag === 'router-link') return void 0
// If href explicitly provided
if (href) return href
// Reconstruct href when `to` used, but no router
if (to) {
// Fallback to `to` prop (if `to` is a string)
if (typeof to === 'string') return to
// Fallback to `to.path` prop (if `to` is an object)
if (typeof to === 'object' && typeof to.path === 'string') return to.path
}
// If nothing is provided use '#'
return '#'
}
function computeRel ({ target, rel }) {
if (target === '_blank' && rel === null) {
return 'noopener'
}
return rel || null
}
function clickHandlerFactory ({ disabled, tag, href, suppliedHandler, parent }) {
const isRouterLink = tag === 'router-link'
return function onClick (e) {
if (disabled && e instanceof Event) {
// Stop event from bubbling up.
e.stopPropagation()
// Kill the event loop attached to this specific EventTarget.
e.stopImmediatePropagation()
} else {
parent.$root.$emit('clicked::link', e)
if (isRouterLink && e.target.__vue__) {
e.target.__vue__.$emit('click', e)
}
if (typeof suppliedHandler === 'function') {
suppliedHandler(...arguments)
}
}
if ((!isRouterLink && href === '#') || disabled) {
// Stop scroll-to-top behavior or navigation.
e.preventDefault()
}
}
}
export default {
functional: true,
name: 'CLink',
props: propsFactory(),
render (h, { props, data, parent, children }) {
const tag = computeTag(props, parent)
const rel = computeRel(props)
const href = computeHref(props, tag)
const eventType = tag === 'router-link' ? 'nativeOn' : 'on'
const suppliedHandler = (data[eventType] || {}).click
const handlers = { click: clickHandlerFactory({ tag, href, disabled: props.disabled, suppliedHandler, parent }) }
const componentData = mergeData(data, {
class: [
props.active ? (props.exact ? props.exactActiveClass : props.activeClass) : null,
{ disabled: props.disabled }
],
attrs: {
rel,
href,
target: props.target,
tabindex: props.disabled ? '-1' : (data.attrs ? data.attrs.tabindex : null),
'aria-disabled': (tag === 'a' && props.disabled) ? 'true' : null
},
props: Object.assign(props, { tag: props.routerTag })
})
// If href prop exists on router-link (even undefined or null) it fails working on SSR
if (!componentData.attrs.href) {
delete componentData.attrs.href
}
// We want to overwrite any click handler since our callback
// will invoke the supplied handler if !props.disabled
componentData[eventType] = Object.assign(componentData[eventType] || {}, handlers)
return h(tag, componentData, children)
}
}
src/views/base/CNavItemDropdown.vue
-90
View File
@@ -1,90 +0,0 @@
<template>
<li :class='dropdownClasses' :id="safeId">
<a href="#" :id="'C-' + safeId" aria-haspopup="true" :aria-expanded="visible"
:class="toggleClasses" @click="toggle(!visible)" @blur="toggle(false)">
<slot name="button-content">{{text}}</slot>
</a>
<div :class='menuClasses' :aria-labbeledby="'C-' + safeId">
<slot></slot>
<slot name="dropdown"></slot>
</div>
</li>
</template>
<script>
export default {
name: 'CNavItemDropdown',
data () {
return {
visible: this.show
}
},
props: {
noCaret: {
type: Boolean,
default: false
},
extraToggleClasses: {
type: String,
default: ''
},
extraMenuClasses: {
type: String,
default: ''
},
text: {
type: String,
default: 'Dropdown'
},
show: {
type: Boolean,
default: false
},
dropup: {
type: Boolean,
default: false
},
disabled: {
type: Boolean,
default: false
},
right: {
type: Boolean,
default: false
},
},
methods:{
toggle (visible) {
if(this.disabled)
return
this.visible = visible
}
},
computed: {
dropdownClasses () {
return [
'nav-item',
'dropdown',
this.dropup ? 'dropup' : '',
this.visible ? 'show' : ''
]
},
toggleClasses () {
return [
'nav-link',
this.noCaret ? '' : 'dropdown-toggle',
this.disabled ? 'disabled' : '',
this.extraToggleClasses ? this.extraToggleClasses : ''
]
},
menuClasses () {
return [
'dropdown-menu',
this.right ? 'dropdown-menu-right' : 'dropdown-menu-left',
this.visible ? 'show' : '',
this.extraMenuClasses ? this.extraMenuClasses : ''
]
}
},
}
</script>
src/views/base/CSwitch.vue
-116
View File
@@ -1,116 +0,0 @@
<template>
<label :class="classList">
<input
:id="id"
:name="name"
:type="type"
:checked="isChecked"
:disabled="disabled"
:required="required"
:value="value"
class="switch-input form-check-input"
@change="toggle"
>
<span
:data-checked="dataOn"
:data-unchecked="dataOff"
class="switch-slider"
>
</span>
</label>
</template>
<script>
export default {
name:'CSwitch',
model: {
prop: 'passedValue',
event: 'change'
},
data: function () {
return {
isChecked: null,
passedValue: null
}
},
props: {
variant: {
type: String,
default: 'secondary'
},
outline: {
type: [Boolean, String],
default: null,
validator: value => [false, true, '', 'alt'].indexOf(value) !== -1
},
size: {
type: String,
default: null,
validator: value => ['', 'lg', 'sm'].indexOf(value) !== -1
},
shape: {
type: String,
default: null,
validator: value => [null, '3d', 'pill'].indexOf(value) !== -1
},
id: String,
name: String,
checked: {
type: Boolean,
default: false
},
disabled: Boolean,
required: Boolean,
value: String,
trueValue: [String, Number, Array, Object],
falseValue: [String, Number, Array, Object],
dataOn: String,
dataOff: String,
type: {
type: String,
default: 'checkbox'
}
},
computed: {
classList () {
return [
'switch',
this.dataOn || this.dataOff ? 'switch-label' : '',
this.size ? `switch-${this.size}` : '',
this.shape ? `switch-${this.shape}` : '',
`switch${this.outline ? '-outline' : ''}-${this.variant}${this.outline==='alt' ? '-alt' : ''}`,
'form-check-label'
]
}
},
methods: {
toggle (event) {
this.setValues(event.target.checked)
this.$emit('change', this.passedValue, event);
},
setValues (checked) {
this.isChecked = checked
if(checked)
this.passedValue = this.trueValue !== undefined ? this.trueValue : checked
else
this.passedValue = this.falseValue !== undefined ? this.falseValue : checked
},
detectPassedCheck (modelValue) {
if(typeof modelValue === 'boolean')
this.isChecked = modelValue
else if (modelValue === this.falseValue)
this.isChecked = false
else if (modelValue === this.trueValue)
this.isChecked = true
else if (this.type === 'checkbox')
console.warn('Value passed to CSwitch component by v-model property is not of boolean type and does not equal trueValue or falseValue property.')
}
},
created () {
if(this.$vnode.data.model)
this.detectPassedCheck(this.$vnode.data.model.value)
else
this.isChecked = this.checked
}
}
</script>
src/views/base/Cards.vue
+92 -34
View File
@@ -1,21 +1,94 @@
<template>
<div class="animated fadeIn">
<!-- <CContainer fluid>
<CRow>
<CColumn lg md="7" :sm="{'order': 2, offset:'0', size:'4'}" class="hehe">
hehe
</CColumn>
</CRow>
</CContainer> -->
<CNavbar toggleable="md" light variant="light">
<CNavbarToggle class="hehe" @click="test2 = !test2"/>
<CLink class="navbar-brand">NavBar</CLink>
<CCollapse :duration="500" :show="test2" navbar @finish="test2 = test2" >
<CNavbarNav pills class="navbar-nav">
<CNavItem>
hehehe1
</CNavItem>
<CNavItem class="nav-item">
hehehe1
</CNavItem>
<CNavItem class="nav-item">
hehehe2
</CNavItem>
<DefaultHeaderDropdownAccnt/>
</CNavbarNav>
<CNavbarNav class="ml-auto">
<CDropdown right class="nav-item b-nav-dropdown" toggleClasses="nav-link">
<c-dropdown-item><i class="fa fa-file" /> Projects
<c-badge variant="primary">32</c-badge>
</c-dropdown-item>
<c-dropdown-item><i class="fa fa-shield" /> Lock Account</c-dropdown-item>
<c-dropdown-item><i class="fa fa-lock" /> Logout</c-dropdown-item>
</CDropdown>
</CNavbarNav>
</CCollapse>
</CNavbar>
<br>
<b-row>
<b-col sm="6" md="4">
<b-card header="Card title">
<transition name="fade">
<c-card class="bg-secondary" no-body v-if="show" >
<CCardHeader slot="header">
Card with header actions
<div class="card-header-actions">
<c-link href="#" class="card-header-action btn-setting" >
<i class="icon-settings"></i>
</c-link>
<c-link class="card-header-action btn-minimize" v-c-collapse:collapse1="test" @click="test = !test" data-duration="600">
<i :class="`icon-arrow-${ !test ? 'up' : 'down'}`"></i>
</c-link>
<c-link href="#" class="card-header-action btn-close" v-on:click="show = !show">
<i class="icon-close"></i>
</c-link>
</div>
</CCardHeader>
<c-card-body id="collapse1">
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.
</b-card>
</c-card-body>
</c-card>
</transition>
</b-col>
<b-col sm="6" md="4">
<b-card show-footer>
<c-card>
<CCardImg imgSrc="https://picsum.photos/600/300/?image=25" class="mb-2"/>
<CCardHeader header="Card title"/>
<CCardBody style="max-height:200px;overflow-y:auto">
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.
<div slot="footer">Card footer</div>
</b-card>
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.
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.
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.
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.
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>
</c-card>
</b-col>
<b-col sm="6" md="4">
<b-card 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.
</b-card>
<c-card footer="Card footer"
body="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."
header="<i class='fa fa-check'></i> Card with icon"/>
</b-col>
<b-col sm="6" md="4">
<CCard footer="Card footer">
<CCardHeader slot="header">
<i class='fa fa-check'></i> Card with icon
</CCardHeader>
<CCardBody slot="body"
title="title"
subtitle="subtitle"
body="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>
</b-col>
<b-col sm="6" md="4">
<b-card>
@@ -202,41 +275,26 @@
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.
</b-card>
</b-col>
<b-col sm="6" md="4">
<transition name="fade">
<b-card class="bg-secondary" no-body v-if="show">
<div slot="header">
Card with header actions
<div class="card-header-actions">
<b-link href="#" class="card-header-action btn-setting">
<i class="icon-settings"></i>
</b-link>
<b-link class="card-header-action btn-minimize" v-b-toggle.collapse1>
<i class="icon-arrow-up"></i>
</b-link>
<b-link href="#" class="card-header-action btn-close" v-on:click="show = !show">
<i class="icon-close"></i>
</b-link>
</div>
</div>
<b-collapse id="collapse1" visible>
<b-card-body>
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.
</b-card-body>
</b-collapse>
</b-card>
</transition>
</b-col>
</b-row><!--/.row-->
</div>
</template>
<script>
import DefaultHeaderDropdownAccnt from'../../containers/DefaultHeaderDropdownAccnt'
export default {
name: 'cards',
components: {
DefaultHeaderDropdownAccnt
},
data: function () {
return {
show: true
show: true,
showCollapse: true,
test: true,
test2: false,
form: 1,
smh: 'sdfsdf'
}
}
}
src/views/base/Forms.vue
+178 -5
View File
@@ -440,7 +440,7 @@
<div slot="header">
<strong>Normal</strong> Form
</div>
<b-form>
<b-form novalidate>
<b-form-group validated
label="Email"
label-for="normalEmail"
@@ -1022,29 +1022,202 @@
</b-form-group>
<div class="form-actions">
<b-button type="submit" variant="primary">Save changes</b-button>
<b-button type="button" variant="secondary">Cancel</b-button>
<b-button type="button" variant="secondary" @click="testt">Cancel</b-button>
</div>
</b-card-body>
</b-collapse>
</b-card>
</transition>
<b-card>
<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"
>
<b-button slot="prepend" class="btn btn-success">asd</b-button>
</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"
>
<b-button slot="prepends" class="btn btn-success">dssdf</b-button>
</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"/>
</b-card>
</b-col>
</b-row>
</div>
</template>
<script>
// import CForm from './CForm'
// import CFormInput from './CFormInput'
// import CFormFile from './CFormFile'
// import CFormSelect from './CFormSelect'
// import CFormCheckbox from './CFormCheckbox'
// import CFormTextarea from './CFormTextarea'
// import CSpinner from './CSpinner'
export default {
name: 'forms',
// components: { CForm, CFormInput, CFormFile, CFormSelect,
// CFormCheckbox, CFormTextarea, CSpinner},
data () {
return {
selected: [], // Must be an array reference!
show: true
show: true,
id: 'sdfjosdf22',
cInput: false,
smh: 'shnsad',
trueValue:'someTrueValue',
falseValue:'someFalseValue',
checks: ['someTrueValue','hehehe2','',1,1,1,1,1,1,1,1,1,1,1,1],
selected: 'first',
isValid: '',
testkkk: 2,
}
},
updated () {
console.log('parent updated')
},
methods: {
click () {
// do nothing
testt (e) {
// console.log(e)
// this.selected = 3
this.cInput += 100
},
validator (val) {
return val ? val.length > 4 : null
}
}
}
src/views/base/Jumbotrons.vue
+15 -17
View File
@@ -15,10 +15,10 @@
</div>
</div>
<div>
<b-jumbotron header="Bootstrap 4" lead="Bootstrap 4 Components for Vue.js 2">
<c-jumbotron header="Bootstrap 4" lead="Bootstrap 4 Components for Vue.js 2">
<p>For more information visit website</p>
<b-btn variant="primary" href="#">More Info</b-btn>
</b-jumbotron>
</c-jumbotron>
</div>
</b-card>
</b-col>
@@ -31,14 +31,12 @@
<small>with slots</small>
</div>
<div>
<b-jumbotron>
<template slot="header">
Bootstrap 4
</template>
<template slot="lead">
<c-jumbotron header="Bootstrap 4" lead="">
<p slot="lead" class="lead">
This is a simple hero unit, a simple jumbotron-style component for
calling extra attention to featured content or information.
</template>
</p>
<hr class="my-4">
<p>
It uses utility classes for typography and spacing to space content
@@ -46,7 +44,7 @@
</p>
<b-btn variant="primary" href="#">Do Something</b-btn>
<b-btn variant="success" href="#">Do Something Else</b-btn>
</b-jumbotron>
</c-jumbotron>
</div>
</b-card>
</b-col>
@@ -61,20 +59,21 @@
<small>variants</small>
</div>
<div>
<b-jumbotron bg-variant="info" text-variant="white" border-variant="dark">
<template slot="header">
Bootstrap 4
</template>
<template slot="lead">
<c-jumbotron variant="info"
text-variant="white"
border-variant="dark"
header="Bootstrap 4">
<p slot="lead" class="lead">
This is a simple hero unit, a simple jumbotron-style component for
calling extra attention to featured content or information.
</template>
</p>
<hr class="my-4">
<p>
It uses utility classes for typography and spacing to space content
out within the larger container.
</p>
</b-jumbotron>
</c-jumbotron>
</div>
</b-card>
</b-col>
@@ -88,4 +87,3 @@ export default {
name: 'jumbotrons'
}
</script>
src/views/base/ListGroups.vue
+93 -82
View File
@@ -1,6 +1,18 @@
<template>
<div class="wrapper">
<div class="animated fadeIn">
<!-- <b-row>
<b-col>
<b-card>
<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>
</b-card>
</b-col>
</b-row> -->
<b-row>
<b-col md="6">
<b-card
@@ -14,13 +26,13 @@
</a>
</div>
</div>
<b-list-group>
<b-list-group-item>Cras justo odio</b-list-group-item>
<b-list-group-item>Dapibus ac facilisis in</b-list-group-item>
<b-list-group-item>Morbi leo risus</b-list-group-item>
<b-list-group-item>Porta ac consectetur ac</b-list-group-item>
<b-list-group-item>Vestibulum at eros</b-list-group-item>
</b-list-group>
<CListGroup>
<CListGroupItem>Cras justo odio</CListGroupItem>
<CListGroupItem>Dapibus ac facilisis in</CListGroupItem>
<CListGroupItem>Morbi leo risus</CListGroupItem>
<CListGroupItem>Porta ac consectetur ac</CListGroupItem>
<CListGroupItem>Vestibulum at eros</CListGroupItem>
</CListGroup>
</b-card>
</b-col>
<b-col md="6">
@@ -30,13 +42,13 @@
<div slot="header">
<i class="fa fa-align-justify"></i><strong> List group </strong><small>active items</small>
</div>
<b-list-group>
<b-list-group-item>Cras justo odio</b-list-group-item>
<b-list-group-item active>Dapibus ac facilisis in</b-list-group-item>
<b-list-group-item>Morbi leo risus</b-list-group-item>
<b-list-group-item>Porta ac consectetur ac</b-list-group-item>
<b-list-group-item>Vestibulum at eros</b-list-group-item>
</b-list-group>
<CListGroup>
<CListGroupItem>Cras justo odio</CListGroupItem>
<CListGroupItem active>Dapibus ac facilisis in</CListGroupItem>
<CListGroupItem>Morbi leo risus</CListGroupItem>
<CListGroupItem>Porta ac consectetur ac</CListGroupItem>
<CListGroupItem>Vestibulum at eros</CListGroupItem>
</CListGroup>
</b-card>
</b-col>
</b-row>
@@ -48,13 +60,13 @@
<div slot="header">
<i class="fa fa-align-justify"></i><strong> List group </strong><small>disabled items</small>
</div>
<b-list-group>
<b-list-group-item disabled>Cras justo odio</b-list-group-item>
<b-list-group-item>Dapibus ac facilisis in</b-list-group-item>
<b-list-group-item>Morbi leo risus</b-list-group-item>
<b-list-group-item disabled>Porta ac consectetur ac</b-list-group-item>
<b-list-group-item>Vestibulum at eros</b-list-group-item>
</b-list-group>
<CListGroup>
<CListGroupItem disabled>Cras justo odio</CListGroupItem>
<CListGroupItem>Dapibus ac facilisis in</CListGroupItem>
<CListGroupItem>Morbi leo risus</CListGroupItem>
<CListGroupItem disabled>Porta ac consectetur ac</CListGroupItem>
<CListGroupItem>Vestibulum at eros</CListGroupItem>
</CListGroup>
</b-card>
</b-col>
<b-col md="6">
@@ -64,12 +76,12 @@
<div slot="header">
<i class="fa fa-align-justify"></i><strong> List group </strong><small>actionable items</small>
</div>
<b-list-group>
<b-list-group-item href="#some-link">Awesome link</b-list-group-item>
<b-list-group-item href="#" active>Link with active state</b-list-group-item>
<b-list-group-item href="#">Action links are easy</b-list-group-item>
<b-list-group-item href="#foobar" disabled>Disabled link</b-list-group-item>
</b-list-group>
<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>
</b-card>
</b-col>
</b-row>
@@ -81,12 +93,12 @@
<div slot="header">
<i class="fa fa-align-justify"></i><strong> List group </strong><small>buttons</small>
</div>
<b-list-group>
<b-list-group-item button>Button item</b-list-group-item>
<b-list-group-item button>I am a button</b-list-group-item>
<b-list-group-item button disabled>Disabled button</b-list-group-item>
<b-list-group-item button>This is a button too</b-list-group-item>
</b-list-group>
<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>
</b-card>
</b-col>
<b-col md="6">
@@ -96,20 +108,20 @@
<div slot="header">
<i class="fa fa-align-justify"></i><strong> List group </strong><small>with badges</small>
</div>
<b-list-group>
<b-list-group-item class="d-flex justify-content-between align-items-center">
<CListGroup>
<CListGroupItem class="d-flex justify-content-between align-items-center">
Cras justo odio
<b-badge variant="primary" pill>14</b-badge>
</b-list-group-item>
<b-list-group-item class="d-flex justify-content-between align-items-center">
</CListGroupItem>
<CListGroupItem class="d-flex justify-content-between align-items-center">
Dapibus ac facilisis in
<b-badge variant="primary" pill>2</b-badge>
</b-list-group-item>
<b-list-group-item class="d-flex justify-content-between align-items-center">
</CListGroupItem>
<CListGroupItem class="d-flex justify-content-between align-items-center">
Morbi leo risus
<b-badge variant="primary" pill>1</b-badge>
</b-list-group-item>
</b-list-group>
</CListGroupItem>
</CListGroup>
</b-card>
</b-col>
</b-row>
@@ -121,17 +133,17 @@
<div slot="header">
<i class="fa fa-align-justify"></i><strong> List group </strong><small>variants</small>
</div>
<b-list-group>
<b-list-group-item>This is a default list group item</b-list-group-item>
<b-list-group-item variant="primary">This is a primary list group item</b-list-group-item>
<b-list-group-item variant="secondary">This is a secondary list group item</b-list-group-item>
<b-list-group-item variant="success">This is a success list group item</b-list-group-item>
<b-list-group-item variant="danger">This is a danger list group item</b-list-group-item>
<b-list-group-item variant="warning">This is a warning list group item</b-list-group-item>
<b-list-group-item variant="info">This is a info list group item</b-list-group-item>
<b-list-group-item variant="light">This is a light list group item</b-list-group-item>
<b-list-group-item variant="dark">This is a dark list group item</b-list-group-item>
</b-list-group>
<CListGroup>
<CListGroupItem>This is a default list group item</CListGroupItem>
<CListGroupItem variant="primary">This is a primary list group item</CListGroupItem>
<CListGroupItem variant="secondary">This is a secondary list group item</CListGroupItem>
<CListGroupItem variant="success">This is a success list group item</CListGroupItem>
<CListGroupItem variant="danger">This is a danger list group item</CListGroupItem>
<CListGroupItem variant="warning">This is a warning list group item</CListGroupItem>
<CListGroupItem variant="info">This is a info list group item</CListGroupItem>
<CListGroupItem variant="light">This is a light list group item</CListGroupItem>
<CListGroupItem variant="dark">This is a dark list group item</CListGroupItem>
</CListGroup>
</b-card>
</b-col>
<b-col md="6">
@@ -141,17 +153,17 @@
<div slot="header">
<i class="fa fa-align-justify"></i><strong> List group </strong><small>variants active</small>
</div>
<b-list-group>
<b-list-group-item href="#">This is a default list group item</b-list-group-item>
<b-list-group-item href="#" variant="primary">This is a primary list group item</b-list-group-item>
<b-list-group-item href="#" variant="secondary">This is a secondary list group item</b-list-group-item>
<b-list-group-item href="#" variant="success">This is a success list group item</b-list-group-item>
<b-list-group-item href="#" variant="danger">This is a danger list group item</b-list-group-item>
<b-list-group-item href="#" variant="warning">This is a warning list group item</b-list-group-item>
<b-list-group-item href="#" variant="info">This is a info list group item</b-list-group-item>
<b-list-group-item href="#" variant="light">This is a light list group item</b-list-group-item>
<b-list-group-item href="#" variant="dark">This is a dark list group item</b-list-group-item>
</b-list-group>
<CListGroup>
<CListGroupItem href="#">This is a default list group item</CListGroupItem>
<CListGroupItem href="#" variant="primary">This is a primary list group item</CListGroupItem>
<CListGroupItem href="#" variant="secondary">This is a secondary list group item</CListGroupItem>
<CListGroupItem href="#" variant="success">This is a success list group item</CListGroupItem>
<CListGroupItem href="#" variant="danger">This is a danger list group item</CListGroupItem>
<CListGroupItem href="#" variant="warning">This is a warning list group item</CListGroupItem>
<CListGroupItem href="#" variant="info">This is a info list group item</CListGroupItem>
<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>
</b-card>
</b-col>
</b-row>
@@ -165,11 +177,11 @@
</div>
<b-card-group deck>
<b-card header="<b>Card with list group</b>">
<b-list-group>
<b-list-group-item href="#">Cras justo odio</b-list-group-item>
<b-list-group-item href="#">Dapibus ac facilisis in</b-list-group-item>
<b-list-group-item href="#">Vestibulum at eros</b-list-group-item>
</b-list-group>
<CListGroup>
<CListGroupItem href="#">Cras justo odio</CListGroupItem>
<CListGroupItem href="#">Dapibus ac facilisis in</CListGroupItem>
<CListGroupItem href="#">Vestibulum at eros</CListGroupItem>
</CListGroup>
<p class="card-text mt-2">
Quis magna Lorem anim amet ipsum do mollit sit cillum voluptate ex
nulla tempor. Laborum consequat non elit enim exercitation cillum aliqua
@@ -178,11 +190,11 @@
</p>
</b-card>
<b-card no-body header="<b>Card with flush list group</b>">
<b-list-group flush>
<b-list-group-item href="#">Cras justo odio</b-list-group-item>
<b-list-group-item href="#">Dapibus ac facilisis in</b-list-group-item>
<b-list-group-item href="#">Vestibulum at eros</b-list-group-item>
</b-list-group>
<CListGroup flush>
<CListGroupItem href="#">Cras justo odio</CListGroupItem>
<CListGroupItem href="#">Dapibus ac facilisis in</CListGroupItem>
<CListGroupItem href="#">Vestibulum at eros</CListGroupItem>
</CListGroup>
<b-card-body>
Quis magna Lorem anim amet ipsum do mollit sit cillum voluptate ex
nulla tempor. Laborum consequat non elit enim exercitation cillum aliqua
@@ -202,8 +214,8 @@
<div slot="header">
<i class="fa fa-align-justify"></i><strong> List group </strong><small>custom content</small>
</div>
<b-list-group>
<b-list-group-item href="#" active class="flex-column align-items-start">
<CListGroup>
<CListGroupItem href="#" active class="flex-column align-items-start">
<div class="d-flex w-100 justify-content-between">
<h5 class="mb-1">List group item heading</h5>
<small>3 days ago</small>
@@ -213,8 +225,8 @@
sed diam eget risus varius blandit.
</p>
<small>Donec id elit non mi porta.</small>
</b-list-group-item>
<b-list-group-item href="#" class="flex-column align-items-start">
</CListGroupItem>
<CListGroupItem href="#" class="flex-column align-items-start">
<div class="d-flex w-100 justify-content-between">
<h5 class="mb-1">List group item heading</h5>
<small class="text-muted">3 days ago</small>
@@ -224,8 +236,8 @@
sed diam eget risus varius blandit.
</p>
<small class="text-muted">Donec id elit non mi porta.</small>
</b-list-group-item>
<b-list-group-item href="#" disabled class="flex-column align-items-start">
</CListGroupItem>
<CListGroupItem href="#" disabled class="flex-column align-items-start">
<div class="d-flex w-100 justify-content-between">
<h5 class="mb-1">Disabled List group item</h5>
<small class="text-muted">3 days ago</small>
@@ -235,8 +247,8 @@
sed diam eget risus varius blandit.
</p>
<small class="text-muted">Donec id elit non mi porta.</small>
</b-list-group-item>
</b-list-group>
</CListGroupItem>
</CListGroup>
</b-card>
</b-col>
</b-row>
@@ -249,4 +261,3 @@ export default {
name: 'list-groups'
}
</script>
src/views/base/Navbars.vue
+8 -8
View File
@@ -33,20 +33,20 @@
<b-button size="sm" class="my-2 my-sm-0" type="submit">Search</b-button>
</b-nav-form>
<c-nav-item-dropdown text="Lang">
<!-- <template slot="button-content">
<!-- <c-nav-item-dropdown text="Lang">
<template slot="button-content">
<img
src="img/avatars/6.jpg"
class="img-avatar"
alt="admin@bootstrapmaster.com" />
</template> -->
</template>
<template slot="dropdown">
<a href="#" class='dropdown-item'>EN</a>
<a href="#" class='dropdown-item'>ES</a>
<a href="#" class='dropdown-item'>RU</a>
<a href="#" class='dropdown-item'>FA</a>
</template>
</c-nav-item-dropdown>
</c-nav-item-dropdown> -->
<b-nav-item-dropdown right>
<!-- Using button-content slot -->
@@ -165,12 +165,12 @@
</template>
<script>
import CNavItemDropdown from './CNavItemDropdown'
// import CNavItemDropdown from './CNavItemDropdown'
export default {
name: 'navbars',
components:{
CNavItemDropdown
}
// components:{
// CNavItemDropdown
// }
}
</script>
src/views/base/Navs.vue
+87 -50
View File
@@ -13,12 +13,12 @@
</div>
</div>
<div>
<b-nav>
<b-nav-item active>Active</b-nav-item>
<b-nav-item>Link</b-nav-item>
<b-nav-item>Another Link</b-nav-item>
<b-nav-item disabled>Disabled</b-nav-item>
</b-nav>
<c-nav>
<c-nav-item active>Active</c-nav-item>
<c-nav-item>Link</c-nav-item>
<c-nav-item>Another Link</c-nav-item>
<c-nav-item disabled>Disabled</c-nav-item>
</c-nav>
</div>
</b-card>
<b-card
@@ -28,27 +28,47 @@
<i class="fa fa-align-justify"></i><strong> Bootstrap Navs </strong><small>tab style</small>
</div>
<div>
<b-nav tabs>
<b-nav-item active>Active</b-nav-item>
<b-nav-item>Link</b-nav-item>
<b-nav-item>Another Link</b-nav-item>
<b-nav-item disabled>Disabled</b-nav-item>
</b-nav>
<c-nav tabs v-model="item" tab-content>
<!-- <c-nav-item index="hehe2">Active</c-nav-item> -->
<c-nav-item id="hehe">
<i class="icon-basket-loaded"></i> Active
<div slot="tab">hehe</div>
</c-nav-item>
<c-nav-item>
Link
</c-nav-item>
<c-nav-item>
Another Link
<div slot="tab">hehe3</div>
</c-nav-item>
<c-nav-item disabled>Disabled</c-nav-item>
</c-nav>
<!-- <CTab fade :activeItem="item">
<CTabItem id="hehe2">text1</CTabItem>
<CTabItem>text1</CTabItem>
<CTabItem>text2</CTabItem>
<CTabItem @click="smh = 1">text3</CTabItem>
<CTabItem>text4</CTabItem>
</CTab> -->
</div>
</b-card>
<b-card
header-tag="header"
footer-tag="footer">
<div slot="header">
<div slot="header" @click="item++">
<i class="fa fa-align-justify"></i><strong> Bootstrap Navs </strong><small>pill style</small>
</div>
<div>
<b-nav pills>
<b-nav-item active>Active</b-nav-item>
<b-nav-item>Link</b-nav-item>
<b-nav-item>Another Link</b-nav-item>
<b-nav-item disabled>Disabled</b-nav-item>
</b-nav>
<div @click="item--">
<c-nav pills>
<c-nav-item active>Active</c-nav-item>
<c-nav-item>Link</c-nav-item>
<c-nav-item>Another Link</c-nav-item>
<c-nav-item disabled>Disabled</c-nav-item>
</c-nav>
</div>
</b-card>
<b-card
@@ -58,12 +78,12 @@
<i class="fa fa-align-justify"></i><strong> Bootstrap Navs </strong><small>fill tabs</small>
</div>
<div>
<b-nav fill tabs>
<b-nav-item active>Active</b-nav-item>
<b-nav-item>Link</b-nav-item>
<b-nav-item>Link with a long name </b-nav-item>
<b-nav-item disabled>Disabled</b-nav-item>
</b-nav>
<c-nav fill tabs>
<c-nav-item active>Active</c-nav-item>
<c-nav-item>Link</c-nav-item>
<c-nav-item>Link with a long name </c-nav-item>
<c-nav-item disabled>Disabled</c-nav-item>
</c-nav>
</div>
</b-card>
<b-card
@@ -73,12 +93,12 @@
<i class="fa fa-align-justify"></i><strong> Bootstrap Navs </strong><small>justified tabs</small>
</div>
<div>
<b-nav justified tabs>
<b-nav-item active>Active</b-nav-item>
<b-nav-item>Link</b-nav-item>
<b-nav-item>Link with a long name </b-nav-item>
<b-nav-item disabled>Disabled</b-nav-item>
</b-nav>
<c-nav justified tabs>
<c-nav-item active>Active</c-nav-item>
<c-nav-item>Link</c-nav-item>
<c-nav-item>Link with a long name </c-nav-item>
<c-nav-item disabled>Disabled</c-nav-item>
</c-nav>
</div>
</b-card>
<b-card
@@ -88,16 +108,17 @@
<i class="fa fa-align-justify"></i><strong> Bootstrap Navs </strong><small>dropdown support</small>
</div>
<div>
<b-nav pills>
<b-nav-item active>Active</b-nav-item>
<b-nav-item>Link</b-nav-item>
<b-nav-item-dropdown id="nav7_ddown" text="Dropdown" right>
<b-dropdown-item>one</b-dropdown-item>
<b-dropdown-item>two</b-dropdown-item>
<b-dropdown-divider></b-dropdown-divider>
<b-dropdown-item>three</b-dropdown-item>
</b-nav-item-dropdown>
</b-nav>
<c-nav pills>
<c-nav-item active>Active</c-nav-item>
<c-nav-item>Link</c-nav-item>
<c-dropdown id="nav7_ddown" text="Dropdown" right>
<a class="nav-link dropdown-toggle" slot="button">Dropdown</a>
<c-dropdown-item>one</c-dropdown-item>
<c-dropdown-item>two</c-dropdown-item>
<c-dropdown-divider></c-dropdown-divider>
<c-dropdown-item>three</c-dropdown-item>
</c-dropdown>
</c-nav>
</div>
</b-card>
<b-card
@@ -107,12 +128,12 @@
<i class="fa fa-align-justify"></i><strong> Bootstrap Navs </strong><small>vertical variation</small>
</div>
<div>
<b-nav vertical class="w-25">
<b-nav-item active>Active</b-nav-item>
<b-nav-item>Link</b-nav-item>
<b-nav-item>Another Link</b-nav-item>
<b-nav-item disabled>Disabled</b-nav-item>
</b-nav>
<c-nav vertical class="w-25">
<c-nav-item active>Active</c-nav-item>
<c-nav-item>Link</c-nav-item>
<c-nav-item>Another Link</c-nav-item>
<c-nav-item disabled>Disabled</c-nav-item>
</c-nav>
</div>
</b-card>
</div>
@@ -120,8 +141,24 @@
</template>
<script>
// import CNav from './CNav'
// import CNavItem from './CNavItem'
// import CTab from './CTab'
// import CTabItem from './CTabItem'
export default {
name: 'navs'
name: 'navs',
data () {
return {
item: 2
}
},
// components: {
// CNav,
// CNavItem,
// CTab,
// CTabItem
// }
}
</script>
src/views/base/Paginations.vue
+24 -2
View File
@@ -13,6 +13,19 @@
</div>
</div>
<div>
<h6>CPagination</h6>
<CPagination v-model="currentPage2"
:itemsNumber="1111"
@change="hehe"
size="lg"
align="center"
:limit="6"
:noDots="false"
:noDoubleArrows="false"
:noArrows="false"
/>
<br>
<h6>Default</h6>
<b-pagination size="md" :total-rows="100" v-model="currentPage" :per-page="10">
</b-pagination>
@@ -82,18 +95,27 @@
</template>
<script>
// import CPagination from './CPagination'
export default {
name: 'paginations',
// components: {
// CPagination
// },
data () {
return {
currentPage: 3
currentPage: 3,
currentPage2: 3
}
},
methods: {
linkGen (pageNum) {
return '#page/' + pageNum + '/foobar'
},
hehe (val) {
// console.log(this.currentPage)
}
}
}
</script>
src/views/base/Switches.vue
+17 -4
View File
@@ -7,7 +7,7 @@
<CSwitch v-model="myFlag2" checked @change="test" /> -->
<b-row>
<b-col xs="12" md="6">
<b-card>
<b-card v-if="true">
<div slot="header">
<h5>
Radio switches
@@ -15,7 +15,7 @@
<b-badge variant="danger" class="float-right">NEW</b-badge>
</h5>
</div>
<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" variant="primary" shape="3d" outline="alt" v-bind="labelIcon" type="radio" name="radio" v-model="radio" trueValue="primary"/> -->
<CSwitch class="mx-1"
:key="key"
:variant="variant"
@@ -25,8 +25,8 @@
type="radio"
name="radio"
v-model="radio"
:trueValue="variant"
v-for="(variant, key) in ['secondary','warning','success','info','danger','light','dark']"
:value="variant"
v-for="(variant, key) in ['primary','secondary','warning','success','info','danger','light','dark']"
/>
</b-card>
</b-col>
@@ -47,6 +47,14 @@
trueValue="yes"
falseValue="no"
/>
<CSwitch class="mx-1"
ref="totest"
variant="primary"
checked
name="switch1"
:checked="true"
value="someValue"
/>
<CSwitch class="mx-1"
:variant="variant"
checked
@@ -474,6 +482,7 @@ export default {
],
checker: 'yes',
radio: 'primary',
radio2: 'warning',
myFlag1: true,
myFlag2: false,
picker: '',
@@ -492,6 +501,10 @@ export default {
console.log(a)
console.log(typeof a)
console.log(event)
},
test2 () {
console.log(this.$refs.totest)
this.$refs.totest.$forceUpdate()
}
}
}
src/views/base/Tables.vue
+177 -8
View File
@@ -1,40 +1,209 @@
<template>
<div class="animated fadeIn">
<b-row>
<b-col sm="12">
<b-card header="test1 ">
<CTable :items="items.slice(0)"
:fields="fields"
:activePage="page"
@pages-change="val => pages = val"
:perPage="5"
ref="table"
indexCol="onlyFilter"
filterRow
smalls
noPagination
@row-clicked2="(item, index) => toggleDetails(index)"
loading
hover
striped
optionsRow="onlyFilter2"
:defaultSorter="{ name:'username', direction:'desc'}"
defaultTableFilter="staff"
:defaultColumnFilter="{username:'zby'}"
>
<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}"
@click="toggleDetails(index)"
style="cursor:pointer"
>
<i class="icons font-lg d-block cui-chevron-right"
style="transition: transform 0.4s"
:style="details.includes(index) ? 'transform:rotate(90deg)': ''"></i>
</td> -->
<CCollapse :show="details.includes(index)"
slot="details"
slot-scope="{item, index}">
<CCardBody>
{{index + 1}} - {{item}}
</CCardBody>
</CCollapse>
</CTable>
<CPagination v-show="pages > 1"
v-model="page"
:pages="pages"
align="center"
size="lg"
/>
</b-card>
</b-col>
</b-row>
<b-row>
<b-col sm="12">
<b-card header="test2">
<CTable :items="items.slice(0)"
:fields="fields"
:perPage="5"
indexCol="onlyIndexes2"
filterRow
optionsRow="onlyFilter2"
:paginationProps="{align:'center', size:'lg'}"
noPagination
>
<td slot="status" slot-scope="{item}">
<CBadge :variant="getBadge(item.status)">{{item.status}}</CBadge>
</td>
</CTable>
</b-card>
</b-col>
</b-row>
<b-row @click="test">
<b-col lg="6">
<c-table caption="<i class='fa fa-align-justify' items='{username: 'Samppa Nori', registered: '2012/01/01', role: 'Member', status: 'Active'}' ></i> Simple Table"></c-table>
<old-table caption="<i class='fa fa-align-justify' items='{username: 'Samppa Nori', registered: '2012/01/01', role: 'Member', status: 'Active'}' ></i> Simple Table"></old-table>
</b-col><!--/.col-->
<b-col lg="6">
<c-table striped caption="<i class='fa fa-align-justify'></i> Striped Table"></c-table>
<old-table striped caption="<i class='fa fa-align-justify'></i> Striped Table"></old-table>
</b-col><!--/.col-->
</b-row><!--/.row-->
<b-row>
<b-col lg="6">
<c-table small caption="<i class='fa fa-align-justify'></i> Condensed Table"></c-table>
<old-table small caption="<i class='fa fa-align-justify'></i> Condensed Table"></old-table>
</b-col><!--/.col-->
<b-col lg="6">
<c-table fixed bordered caption="<i class='fa fa-align-justify'></i> Bordered Table"></c-table>
<old-table fixed bordered caption="<i class='fa fa-align-justify'></i> Bordered Table"></old-table>
</b-col><!--/.col-->
</b-row><!--/.row-->
<b-row>
<b-col sm="12">
<c-table hover striped bordered small fixed caption="<i class='fa fa-align-justify'></i> Combined All Table"></c-table>
<old-table hover striped bordered small fixed caption="<i class='fa fa-align-justify'></i> Combined All Table"></old-table>
</b-col>
</b-row>
</div>
</template>
<script>
import cTable from './Table.vue'
import oldTable 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 },
]
const items = [
{number:11.1, username: '<b>Samppa Nori</b>', registered: '2012/01/01', _classes: 'table-success2',_cellClasses: {role: 'table-success'}, role: 'Member', status: 'Active'},
{number:1.3, username: 'Estavan Lykos', registered: '2012/02/01', role: 'Staff', status: 'Banned'},
{number:1.3, username: 'Chetan Mohamed', registered: '2012/02/01', role: 'Admin', status: 'Inactive'},
{number:1.3, username: 'Derick Maximinus', registered: '2012/03/01', role: 'Member', status: 'Pending'},
{number:1.3, username: 'Friderik Dávid', registered: '2012/01/21', role: 'Staff', status: 'Active'},
{number:1.3, username: 'Yiorgos Avraamu', registered: '2012/01/01', role: 'Member', status: 'Active'},
{number:1.3, username: 'Avram Tarasios', registered: '2012/02/01', role: 'Staff', status: 'Banned'},
{number:1.3, username: 'Quintin Ed', registered: '2012/02/01', role: 'Admin', status: 'Inactive'},
{number:1.3, username: 'Enéas Kwadwo', registered: '2012/03/01', role: 'Member', status: 'Pending'},
{number:1.3, username: 'Agapetus Tadeáš', registered: '2012/01/21', role: 'Staff', status: 'Active'},
{number:1.3, username: 'Carwyn Fachtna', registered: '2012/01/01', role: 'Member', status: 'Active'},
{number:1.3, username: 'Nehemiah Tatius', registered: '2012/02/01', role: 'Staff', status: 'Banned'},
{number:1.3, username: 'Ebbe Gemariah', registered: '2012/02/01', role: 'Admin', status: 'Inactive'},
{number:1.3, username: 'Eustorgios Amulius', registered: '2012/03/01', role: 'Member', status: 'Pending'},
{number:1.3, username: 'Leopold Gáspár', registered: '2012/01/21', role: 'Staff', status: 'Active'},
{number:1.3, username: 'Pompeius René', registered: '2012/01/01', role: 'Member', status: 'Active'},
{number:1.3, username: 'Paĉjo Jadon', registered: '2012/02/01', role: 'Staff', status: 'Banned'},
{number:1.3, username: 'Micheal Mercurius', registered: '2012/02/01', role: 'Admin', status: 'Inactive'},
{number:2.3, username: 'Ganesha Dubhghall', registered: '2012/03/01', role: 'Member', status: 'Pending'},
{number:1.3, username: 'Hiroto Šimun', registered: '2012/01/21', role: 'Staff', status: 'Active'},
{number:1.3, username: 'Vishnu Serghei', registered: '2012/01/01', role: 'Member', status: 'Active'},
{number: 0.9, username: 'Zbyněk Phoibos', registered: '2012/02/01', role: 'Staff', status: 'Banned'},
{number: 1.3, username: 'Einar Randall', registered: '2012/02/01', role: 'Admin', status: 'Inactive'},
{number: 1.2, username: 'Félix Troels', registered: '2012/03/21', role: 'Staff', status: 'Active'},
{number: 11.1, username: 'Aulus Agmundr', registered: '2012/01/01', role: 'Member', status: 'Pending'}
]
export default {
name: 'tables',
components: {cTable}
components: { oldTable },
data () {
return {
items: items,
fields: fields,
page: 1,
page2: 1,
itemsNumber: 0,
pages: null,
details: []
}
},
methods: {
getBadge (status) {
return status === 'Active' ? 'success'
: status === 'Inactive' ? 'secondary'
: status === 'Pending' ? 'warning'
: status === 'Banned' ? 'danger' : 'primary'
},
test () {
this.$refs.table.changeSort('username')
this.$refs.table.filter = 't'
// console.log(this.items)
},
test3 (item, index) {
alert(index + ' - ' + item.username)
// console.log()
},
log(val) {
console.log(val)
},
toggleDetails (index) {
// console.log('hehe')
const position = this.details.indexOf(index)
position !== -1 ? this.details.splice(position, 1) : this.details.push(index)
}
}
// computed: {
// pages () {
// return this.$refs.table.pages
// }
// }
}
</script>
src/views/base/Tooltips.vue
+47 -3
View File
@@ -89,7 +89,8 @@
</b-card>
<b-card
header-tag="header"
footer-tag="footer">
footer-tag="footer"
id="boundary">
<div slot="header">
<i class="fa fa-align-justify"></i><strong> Tooltips </strong><small><code>enable disable</code> events</small>
</div>
@@ -111,18 +112,57 @@
</b-tooltip>
</div>
</div>
<b-btn @click="test" id="refButton2">
test
</b-btn><br><br>
<b-btn id="refButton" data-toggle="tooltip" class="px-1" >button</b-btn>
<CTooltip targetId="refButton"
:placement="placement"
content="sas"
ref="tooltip"
:active="true"
:popover="show"
popoverHeader="smh"
:delay="smh"
:offset="smh"
boundaries="boundary1"
:appendToBody="false"
/><br><br><br>
<!-- :content="this is HTML <b>content!</b>" -->
<!-- :popover="true"
popoverHeader="Something" -->
<!-- title="<div class='card'><img src='https://picsum.photos/600/300/?image=25' class='card-img mb-2'><div class='card-header'><div>Card title</div></div><div class='card-body' style='max-height: 200px; overflow-y: auto;'>
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.
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.
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.
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.
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.
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.
</div></div>" -->
<!-- <div class="tooltip" id="hehe33">
<div class="inner-tooltip">
hfhsdasad
</div>
</div> -->
</b-card>
</div>
</div>
</template>
<script>
// import CTooltip from './CTooltip'
export default {
name: 'tooltips',
// components: {
// CTooltip
// },
data () {
return {
show: true,
disabled: false
disabled: false,
smh: 0,
placement: 'bottom-end'
}
},
methods: {
@@ -138,8 +178,12 @@ export default {
} else {
this.$refs.tooltip2.$emit('disable')
}
},
test () {
this.show = !this.show
this.placement = 'right'
this.smh = 200
}
}
}
</script>
src/views/buttons/ButtonGroups.vue
+120 -3
View File
@@ -15,13 +15,69 @@
</div>
</div>
<div>
<b-button-group>
<CButton variant="success" to="/dashboard" disabled>sdjk</CButton>
<CButton variant="success" to="/dashboard" role="smh">sdjk</CButton>
<CButton variant="success" :pressed.sync="myToggle">sdjk</CButton>
<CButton variant="success" :pressed.sync="myToggle2">sdjk</CButton>
<CButton variant="outline-success" pressed>sdjk</CButton>
<CButton square block ghost>sdjk</CButton>
</br></br>
<CButton pill ghost>sdjk</CButton>
<CButton block size="sm" variant="success" pill square :pressed="false" disabled>sdjk</CButton>
<CButton block size="sm" variant="success" pill square to="/dashboard" disabled>sdjk</CButton>
<CButton block size="lg" variant="info" square >sdjk</CButton>
</br></br>
<CEmbed
tag="p"
aspect="16by9"
src="https://www.youtube.com/embed/axTSc3e6wu8"
frameborder="0"
allow="accelerometer;autoplay; encrypted-media; gyroscope; picture-in-picture"
>
</CEmbed>
<b-nav pills>
<b-nav-item active>Active</b-nav-item>
<b-nav-item>Link</b-nav-item>
<b-nav-item-dropdown id="nav7_ddown" text="Dropdown" extra-toggle-classes="nav-link-custom" right>
<b-dropdown-item>one</b-dropdown-item>
<b-dropdown-item>two</b-dropdown-item>
<b-dropdown-divider></b-dropdown-divider>
<b-dropdown-item>three</b-dropdown-item>
</b-nav-item-dropdown>
</b-nav>
<b-nav pills>
<b-nav-item active>Active</b-nav-item>
<b-nav-item>Link</b-nav-item>
<!-- <c-nav-item-dropdown id="nav7_ddown" text="Dropdown" extra-toggle-classes="nav-link-custom" right>
<b-dropdown-item>one</b-dropdown-item>
<b-dropdown-item>two</b-dropdown-item>
<b-dropdown-divider></b-dropdown-divider>
<b-dropdown-item>three</b-dropdown-item>
</c-nav-item-dropdown> -->
</b-nav>
<CButtonToolbar role="smh">
<c-button-group>
<b-button>One</b-button>
<b-button>Two</b-button>
<b-button>Three</b-button>
<b-button>Four</b-button>
<b-button class="d-sm-down-none">Five</b-button>
</b-button-group>
</c-button-group>
<c-button-group>
<b-button>One</b-button>
<b-button>Two</b-button>
<b-button>Three</b-button>
<b-button>Four</b-button>
<b-button class="d-sm-down-none">Five</b-button>
</c-button-group>
</CButtonToolbar>
<br><br>
<b-button-group>
<b-button class="d-sm-down-none" variant="success">Success</b-button>
@@ -34,6 +90,43 @@
</div>
</b-card>
</b-col>
<CDropdown no-caret show>
<img slot="button-content"
src="img/avatars/6.jpg"
class="img-avatar"
alt="admin@bootstrapmaster.com"
/>
<b-dropdown-header tag="div" class="text-center"><strong>Account</strong></b-dropdown-header>
<b-dropdown-item><i class="fa fa-bell-o" /> Updates
<c-badge variant="info" additionalClasses="hehe">{{ itemsCount }}</c-badge>
</b-dropdown-item>
<b-dropdown-item><i class="fa fa-envelope-o" /> Messages
<c-badge variant="success">{{ itemsCount }}</c-badge>
</b-dropdown-item>
<b-dropdown-item><i class="fa fa-tasks" /> Tasks
<c-badge variant="danger">{{ itemsCount }}</c-badge>
</b-dropdown-item>
<b-dropdown-item><i class="fa fa-comments" /> Comments
<c-badge variant="warning">{{ itemsCount }}</c-badge>
</b-dropdown-item>
<b-dropdown-header
tag="div"
class="text-center">
<strong>Settings</strong>
</b-dropdown-header>
<b-dropdown-item><i class="fa fa-user" /> Profile</b-dropdown-item>
<b-dropdown-item><i class="fa fa-wrench" /> Settings</b-dropdown-item>
<b-dropdown-item><i class="fa fa-usd" /> Payments
<c-badge variant="secondary">{{ itemsCount }}</c-badge>
</b-dropdown-item>
<b-dropdown-item><i class="fa fa-file" /> Projects
<c-badge variant="primary">{{ itemsCount }}</c-badge>
</b-dropdown-item>
<b-dropdown-divider ></b-dropdown-divider >
<b-dropdown-item><i class="fa fa-shield" /> Lock Account</b-dropdown-item>
<b-dropdown-item><i class="fa fa-lock" /> Logout</b-dropdown-item>
</CDropdown>
<b-col cols="12">
<b-card
header-tag="header"
@@ -190,7 +283,31 @@
</template>
<script>
// import CButton from './CButton'
// import CButtonGroup from './CButtonGroup'
// import CButtonToolbar from './CButtonToolbar'
// import CEmbed from './CEmbed'
// import CDropdown from '../../containers/CDropdown'
export default {
name: 'button-groups'
name: 'button-groups',
// components: {
// CButtonGroup,
// CButtonToolbar,
// CButton
// },
// components: {
// CEmbed,
// CDropdown
// },
data () {
return {
myToggle: false,
myToggle2: false,
itemsCount: 33
}
}
}
</script>
src/views/notifications/Alerts.vue
+2 -1
View File
@@ -115,7 +115,8 @@
dismissible
fade
:show="showDismissibleAlert"
@dismissed="showDismissibleAlert=false">
@dismissed="showDismissibleAlert=false"
>
Dismissible Alert!
</CAlert>
<b-btn @click="showDismissibleAlert=true" variant="info" class="m-1">
src/views/notifications/Modals.vue
+44 -1
View File
@@ -13,6 +13,8 @@
<b-button type="button" variant="warning" @click="warningModal = true" class="mr-1">Launch warning modal</b-button>
<b-button type="button" variant="danger" @click="dangerModal = true" class="mr-1">Launch danger modal</b-button>
<b-button type="button" variant="info" @click="infoModal = true" class="mr-1">Launch info modal</b-button>
<b-button type="button" variant="info" @click="cmodal = !cmodal" class="mr-1">CModal</b-button>
</b-card>
</b-col><!--/.col-->
</b-row><!--/.row-->
@@ -84,13 +86,53 @@
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</b-modal>
<CModal v-model="cmodal"
:noBackdrop="false"
:noCloseOnBackdrop="false"
:noFade="false"
:centered="true"
title="Modal title 2"
size="lg"
variant="success"
borderVariant="danger2"
addModalClasses="hehe1"
addDialogClasses="hehe2"
addContentClasses="hehe3"
:noHeader="true"
:noBody="false"
:noFooter="true"
>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<!-- <div slot="header" class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">new header</h5>
<button type="button" class="close closeModal" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div> -->
<div slot="body" class="modal-body">
n
</div>
<div class="modal-footer" slot="footer">
<button type="button" class="btn btn-secondary closeModal">Close2</button>
<button type="button" class="btn btn-primary closeModal">OK2</button>
</div>
</CModal>
</div>
</template>
<script>
// import CModal from './CModal'
export default {
name: 'modals',
// components: {
// CModal
// },
data () {
return {
myModal: false,
@@ -100,7 +142,8 @@ export default {
successModal: false,
warningModal: false,
dangerModal: false,
infoModal: false
infoModal: false,
cmodal: false
}
}
}