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

refactor: change camelCase props to kebab-case

Browse Source
This commit is contained in:
woothu
2019-06-03 15:47:41 +02:00
parent 4ce4b01cae
commit 989220f82a
31 changed files with 420 additions and 480 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/containers/DefaultHeaderDropdownAccnt.vue
+5 -5
View File
@@ -1,9 +1,9 @@
<template>
<CDropdown
nav
noCaret
noPopper
addMenuClasses="c-dropdown-menu-right"
no-caret
no-popper
add-menu-classes="c-dropdown-menu-right"
>
<template #button-content>
<img
@@ -17,7 +17,7 @@
</CDropdownHeader>
<CDropdownItem>
<i class="cui-bell"/> Updates
<CBadge variant="info" additionalClasses="hehe">{{ itemsCount }}</CBadge>
<CBadge variant="info" additional-classes="hehe">{{ itemsCount }}</CBadge>
</CDropdownItem>
<CDropdownItem>
<i class="cui-envelope-open" /> Messages
@@ -32,7 +32,7 @@
<CBadge variant="warning">{{ itemsCount }}</CBadge>
</CDropdownItem>
<CDropdownHeader
tag="div"
tag="div"
class="c-text-center"
>
<strong>Settings</strong>
src/containers/TheAside.vue
+7 -6
View File
@@ -1,13 +1,14 @@
<template>
<CSidebar aside fixed light :display="false">
<CTabs addTabClasses="c-p-0">
<CTabs add-tab-classes="c-p-0">
<CTab active>
<template slot="title">
<i class="cui-list"></i>
</template>
<CListGroup class="c-list-group-accent">
<CListGroupItem
class="c-list-group-item-accent-secondary c-bg-light c-text-center c-font-weight-bold c-text-muted c-text-uppercase c-small">
class="c-list-group-item-accent-secondary c-bg-light c-text-center c-font-weight-bold c-text-muted c-text-uppercase c-small"
>
Today
</CListGroupItem>
<CListGroupItem href="#" class="c-list-group-item-accent-warning c-list-group-item-divider">
@@ -207,7 +208,7 @@
<div class="c-aside-options">
<div class="c-clearfix c-mt-3">
<small><b>Option 3</b></small>
<CSwitch variant="success" label shape="pill" size="sm" class="c-float-right" disabled defaultChecked/>
<CSwitch variant="success" label shape="pill" size="sm" class="c-float-right" disabled default-checked/>
</div>
<div>
<small class="c-text-muted">Disabled option.</small>
@@ -224,17 +225,17 @@
<div class="c-text-uppercase c-mb-1 c-mt-4">
<small><b>CPU Usage</b></small>
</div>
<CProgress class="c-progress-xs" variant="info" :value="25"></CProgress>
<CProgress class="c-progress-xs" variant="info" :value="25"></CProgress>
<small class="c-text-muted">348 Processes. 1/4 Cores.</small>
<div class="c-text-uppercase c-mb-1 c-mt-2">
<small><b>Memory Usage</b></small>
</div>
<CProgress class="c-progress-xs" variant="warning" :value="70"></CProgress>
<CProgress class="c-progress-xs" variant="warning" :value="70"></CProgress>
<small class="c-text-muted">11444GB/16384MB</small>
<div class="c-text-uppercase c-mb-1 c-mt-2">
<small><b>SSD 1 Usage</b></small>
</div>
<CProgress class="c-progress-xs" variant="danger" :value="95"></CProgress>
<CProgress class="c-progress-xs" variant="danger" :value="95"></CProgress>
<small class="c-text-muted">243GB/256GB</small>
<div class="c-text-uppercase c-mb-1 c-mt-2">
<small><b>SSD 2 Usage</b></small>
src/containers/TheSidebar.vue
+1 -1
View File
@@ -2,7 +2,7 @@
<CSidebar fixed>
<CSidebarHeader/>
<CSidebarForm/>
<CSidebarNav :navItems="computedNav"/>
<CSidebarNav :nav-items="computedNav"/>
<CSidebarFooter/>
<CSidebarMinimizer/>
</CSidebar>
src/views/Charts.vue
+12 -12
View File
@@ -1,32 +1,32 @@
<template>
<div class="c-animated c-fadeIn">
<CCardGroup columns class="c-card-columns c-cols-2">
<CCard headerHtml="Line Chart" bodyWrapper>
<CCard header-html="Line Chart" body-wrapper>
<CChartLineExample/>
</CCard>
<CCard headerHtml="Bar Chart" bodyWrapper>
<CCard header-html="Bar Chart" body-wrapper>
<CChartBarExample/>
</CCard>
<CCard headerHtml="Doughnut Chart" bodyWrapper>
<CCard header-html="Doughnut Chart" body-wrapper>
<CChartDoughnutExample/>
</CCard>
<CCard headerHtml="Radar Chart" bodyWrapper>
<CCard header-html="Radar Chart" body-wrapper>
<CChartRadarExample/>
</CCard>
<CCard headerHtml="Pie Chart" bodyWrapper>
<CCard header-html="Pie Chart" body-wrapper>
<CChartPieExample/>
</CCard>
<CCard headerHtml="Polar Area Chart" bodyWrapper>
<CCard header-html="Polar Area Chart" body-wrapper>
<CChartPolarAreaExample/>
</CCard>
<CCard headerHtml="Simple line chart" bodyWrapper>
<CChartLineSimple borderColor="success" labels="months"/>
<CCard header-html="Simple line chart" body-wrapper>
<CChartLineSimple border-color="success" labels="months"/>
</CCard>
<CCard headerHtml="Simple pointed chart" bodyWrapper>
<CChartLineSimple pointed borderColor="warning"/>
<CCard header-html="Simple pointed chart" body-wrapper>
<CChartLineSimple pointed border-color="warning"/>
</CCard>
<CCard headerHtml="Simple bar chart" bodyWrapper>
<CChartBarSimple backgroundColor="danger"/>
<CCard header-html="Simple bar chart" body-wrapper>
<CChartBarSimple background-color="danger"/>
</CCard>
</CCardGroup>
</div>
src/views/Dashboard.vue
+2 -2
View File
@@ -85,7 +85,7 @@
<WidgetsSocial/>
<CRow>
<CCol md="12">
<CCard headerHtml="Traffic &amp; Sales" bodyWrapper>
<CCard header-html="Traffic &amp; Sales" body-wrapper>
<CRow>
<CCol sm="12" lg="6">
<CRow>
@@ -382,7 +382,7 @@
:items="tableItems"
:fields="tableFields"
head-variant="light"
noSorting
no-sorting
>
<!-- <div slot="activity-header">
A tu nic
src/views/base/Breadcrumbs.vue
+1 -1
View File
@@ -13,7 +13,7 @@
</div> -->
</CCardHeader>
<CCardBody>
<CBreadcrumb :items="items" addLinkClasses="sss" lastItemClasses="aaa"/>
<CBreadcrumb :items="items" add-link-classes="sss" last-item-classes="aaa"/>
<CBreadcrumb :items="items2"/>
<CBreadcrumb :items="items3"/>
</CCardBody>
src/views/base/Cards.vue
+33 -33
View File
@@ -2,10 +2,10 @@
<div class="c-animated c-fadeIn">
<CRow>
<CCol sm="6" md="4">
<CCard headerHtml="Card title" :bodyHtml="loremIpsum"/>
<CCard header-html="Card title" :body-html="loremIpsum"/>
</CCol>
<CCol sm="6" md="4">
<CCard footerHtml="Card Footer" :bodyHtml="loremIpsum" />
<CCard footer-html="Card Footer" :body-html="loremIpsum" />
</CCol>
<CCol sm="6" md="4">
<CCard
@@ -22,8 +22,8 @@
size="sm"
shape="pill"
variant="info"
dataOn="On"
dataOff="Off"
data-on="On"
data-off="Off"
:checked="true"
/>
</CCardHeader>
@@ -49,7 +49,7 @@
Card with label
<CBadge pill variant="danger" class="c-float-right">42</CBadge>
</CCardHeader>
<CCardBody :bodyHtml="loremIpsum"/>
<CCardBody :body-html="loremIpsum"/>
</CCard>
</CCol>
</CRow>
@@ -57,38 +57,38 @@
<CCol sm="6" md="4">
<CCard
header="Card outline primary"
borderVariant="primary"
:bodyHtml="loremIpsum"
border-variant="primary"
:body-html="loremIpsum"
/>
</CCol>
<CCol sm="6" md="4">
<CCard
header="Card outline secondary"
borderVariant="secondary"
:bodyHtml="loremIpsum"
border-variant="secondary"
:body-html="loremIpsum"
/>
</CCol>
<CCol sm="6" md="4">
<CCard
header="Card outline success"
borderVariant="success"
bodyWrapper
border-variant="success"
body-wrapper
>
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 headerHtml="Card outline info" borderVariant="info" bodyWrapper>
<CCard header-html="Card outline info" border-variant="info" body-wrapper>
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 headerHtml="Card outline warning" borderVariant="warning" bodyWrapper>
<CCard header-html="Card outline warning" border-variant="warning" body-wrapper>
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 headerHtml="Card outline danger" borderVariant="danger" bodyWrapper>
<CCard header-html="Card outline danger" border-variant="danger" body-wrapper>
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>
@@ -96,39 +96,39 @@
<CRow>
<CCol sm="6" md="4">
<CCard class="c-card-accent-primary" header="Card with primary accent" bodyWrapper>
<CCard class="c-card-accent-primary" header="Card with primary accent" body-wrapper>
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="c-card-accent-secondary" header="Card with secondary accent" bodyWrapper>
<CCard class="c-card-accent-secondary" header="Card with secondary accent" body-wrapper>
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="c-card-accent-success" header="Card with success accent" bodyWrapper>
<CCard class="c-card-accent-success" header="Card with success accent" body-wrapper>
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="c-card-accent-info" header="Card with info accent" bodyWrapper>
<CCard class="c-card-accent-info" header="Card with info accent" body-wrapper>
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="c-card-accent-warning" header="Card with warning accent" bodyWrapper>
<CCard class="c-card-accent-warning" header="Card with warning accent" body-wrapper>
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="c-card-accent-danger" header="Card with danger accent" bodyWrapper>
<CCard class="c-card-accent-danger" header="Card with danger accent" body-wrapper>
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>
<CRow>
<CCol sm="6" md="4">
<CCard class="c-bg-primary c-text-center" bodyWrapper>
<CCard class="c-bg-primary c-text-center" body-wrapper>
<blockquote class="c-card-blockquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer>Someone famous in
@@ -138,7 +138,7 @@
</CCard>
</CCol>
<CCol sm="6" md="4">
<CCard class="c-bg-success c-text-center" bodyWrapper>
<CCard class="c-bg-success c-text-center" body-wrapper>
<blockquote class="c-card-blockquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer>Someone famous in
@@ -148,7 +148,7 @@
</CCard>
</CCol>
<CCol sm="6" md="4">
<CCard class="c-bg-info c-text-center" bodyWrapper>
<CCard class="c-bg-info c-text-center" body-wrapper>
<blockquote class="c-card-blockquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer>Someone famous in
@@ -158,7 +158,7 @@
</CCard>
</CCol>
<CCol sm="6" md="4">
<CCard class="c-bg-warning c-text-center" bodyWrapper>
<CCard class="c-bg-warning c-text-center" body-wrapper>
<blockquote class="c-card-blockquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer>Someone famous in
@@ -168,7 +168,7 @@
</CCard>
</CCol>
<CCol sm="6" md="4">
<CCard class="c-bg-danger c-text-center" bodyWrapper>
<CCard class="c-bg-danger c-text-center" body-wrapper>
<blockquote class="c-card-blockquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer>Someone famous in
@@ -178,7 +178,7 @@
</CCard>
</CCol>
<CCol sm="6" md="4">
<CCard class="c-bg-secondary c-text-center" bodyWrapper>
<CCard class="c-bg-secondary c-text-center" body-wrapper>
<blockquote class="c-card-blockquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer>Someone famous in
@@ -190,27 +190,27 @@
</CRow>
<CRow>
<CCol sm="6" md="4">
<CCard headerHtml="Card title" class="c-bg-primary" bodyWrapper>
<CCard header-html="Card title" class="c-bg-primary" body-wrapper>
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 headerHtml="Card title" class="c-bg-success" bodyWrapper>
<CCard header-html="Card title" class="c-bg-success" body-wrapper>
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 headerHtml="Card title" class="c-bg-info" bodyWrapper>
<CCard header-html="Card title" class="c-bg-info" body-wrapper>
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 headerHtml="Card title" class="c-bg-warning" bodyWrapper>
<CCard header-html="Card title" class="c-bg-warning" body-wrapper>
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 headerHtml="Card title" class="c-bg-danger" bodyWrapper>
<CCard header-html="Card title" class="c-bg-danger" body-wrapper>
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>
@@ -243,8 +243,8 @@
<!-- <CRow>
<CCol sm="6" md="4">
<CCard >
<CCardImg imgSrc="https://picsum.photos/600/300/?image=25"/>
<CCardHeader headerHtml="Card title"/>
<CCardImg img-src="https://picsum.photos/600/300/?image=25"/>
<CCardHeader header-html="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.
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
+3 -3
View File
@@ -26,15 +26,15 @@
>
<CCarouselItem
caption="First Slide"
imgSrc="https://lorempixel.com/1024/480/technics/2/"
img-src="https://lorempixel.com/1024/480/technics/2/"
text="Nulla vitae elit libero, a pharetra augue mollis interdum."
/>
<CCarouselItem
active
imgSrc="https://lorempixel.com/1024/480/technics/4/"
img-src="https://lorempixel.com/1024/480/technics/4/"
/>
<CCarouselItem
imgSrc="https://lorempixel.com/1024/480/technics/8/"
img-src="https://lorempixel.com/1024/480/technics/8/"
/>
</CCarousel>
</CCardBody>
src/views/base/Collapses.vue
+2 -128
View File
@@ -18,145 +18,19 @@
Toggle Collapse
</CButton>
<CCollapse toggler="collapse1" class="c-mt-2">
<CCard bodyWrapper>
<CCard body-wrapper>
<p class="c-card-text">Collapse contents Here</p>
<CButton id="collapse2" size="sm">
Toggle Inner Collapse
</CButton>
<CCollapse toggler="collapse2" class="c-mt-2">
<CCard bodyWrapper>Hello!</CCard>
<CCard body-wrapper>Hello!</CCard>
</CCollapse>
</CCard>
</CCollapse>
</CCardBody>
</CCard>
</CCol>
<!-- <CCol col="12" md="6">
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i><strong> Collapse </strong> <small>with <code>v-b-toggle</code> directive</small>
</CCardHeader>
<div>
<CButton v-b-toggle.collapse2 class="m-1">Toggle Collapse</CButton>
<CButton v-b-toggle="'collapse2'" class="m-1">Toggle Collapse</CButton>
<CCollapse id="collapse2">
<CCard>
I am collapsible content!
</CCard>
</CCollapse>
</div>
</CCard>
</CCol>
</CRow>
<CRow>
<CCol col="12" md="6">
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i><strong> Collapse </strong> <small>with <code>visibility</code></small>
</CCardHeader>
<div>
<CButton v-b-toggle.collapse3 class="m-1">Toggle Collapse</CButton>
<CCollapse visible id="collapse3">
<CCard>
I should start open!
</CCard>
</CCollapse>
</div>
</CCard>
</CCol>
<CCol col="12" md="6">
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i><strong> Collapse </strong> <small>with <code>v-model</code></small>
</CCardHeader>
<div>
<CButton @click="showCollapse = !showCollapse"
:class="showCollapse ? 'collapsed' : null"
aria-controls="collapse4"
:aria-expanded="showCollapse ? 'true' : 'false'">
Toggle Collapse
</CButton>
<CCollapse class="mt-2" v-model="showCollapse" id="collapse4">
<CCard>
I should start open!
</CCard>
</CCollapse>
</div>
</CCard>
</CCol>
</CRow>
<CRow>
<CCol col="12" md="6">
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i><strong> Collapse </strong> <small>multiple elements</small>
</CCardHeader>
<div>
<CButton v-b-toggle.collapseA.collapseB>Toggle Both Collapse A and B</CButton>
<CCollapse id="collapseA" class="mt-2">
<CCard>
I am collapsable content A!
</CCard>
</CCollapse>
<CCollapse id="collapseB" class="mt-2">
<CCard>
I am collapsable content B!
</CCard>
</CCollapse>
</div>
</CCard>
</CCol>
<CCol col="12" md="6">
<CCard>
<CCardHeader>
<i class="fa fa-align-justify"></i><strong> Collapse </strong> <small><code>accordion</code> support</small>
</CCardHeader>
<div role="tablist">
<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>
<p class="card-text">
I start opened because <code>visible</code> is <code>true</code>
</p>
<p class="card-text">
{{ text }}
</p>
</CCardBody>
</CCollapse>
</CCard>
<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>
<p class="card-text">
{{ text }}
</p>
</CCardBody>
</CCollapse>
</CCard>
<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>
<p class="card-text">
{{ text }}
</p>
</CCardBody>
</CCollapse>
</CCard>
</div>
</CCard>
</CCol> -->
</CRow>
</div>
</div>
src/views/base/Forms.vue
+15 -15
View File
@@ -315,7 +315,7 @@
label="Email"
placeholder="Enter Email..."
required
wasValidated
was-validated
/>
<CFormInput
type="password"
@@ -324,7 +324,7 @@
label="Password"
placeholder="Enter Password..."
required
wasValidated
was-validated
/>
</CCardBody>
<CCardFooter>
@@ -459,13 +459,13 @@
valid-feedback="Input is valid."
invalid-feedback="Please provide at least 4 characters."
value="Valid value"
:isValid="validator"
:is-valid="validator"
/>
<CFormInput
label="Input is invalid"
valid-feedback="Thank you :)"
invalid-feedback="Please provide at least 4 characters."
:isValid="validator"
:is-valid="validator"
/>
</CForm>
</CCardBody>
@@ -551,7 +551,7 @@
<CFormInput placeholder="Username">
<template #prepend>
<CDropdown
buttonHtml="Action"
button-html="Action"
variant="primary"
>
<CDropdownItem>Action</CDropdownItem>
@@ -568,7 +568,7 @@
>
<template #append>
<CDropdown
buttonHtml="Action"
button-html="Action"
variant="primary"
right
>
@@ -583,7 +583,7 @@
<template #prepend>
<CDropdown
buttonHtml="Split"
button-html="Split"
variant="primary"
split
>
@@ -596,7 +596,7 @@
<template #append>
<CDropdown
buttonHtml="Action"
button-html="Action"
variant="primary"
right
>
@@ -683,17 +683,17 @@
<CCardBody>
<CForm>
<CFormInput
prependHtml="Username"
prepend-html="Username"
appendHtml="<i class='cui-user'></i>"
/>
<CFormInput
prependHtml="Email"
prepend-html="Email"
type="email"
autocomplete="email"
appendHtml="<i class='cui-envelope-closed'></i>"
/>
<CFormInput
prependHtml="Password"
prepend-html="Password"
type="password"
autocomplete="current-password"
appendHtml="<i class='fa fa-asterisk'></i>"
@@ -797,20 +797,20 @@
<CCardBody>
<CFormInput
label="Prepended text"
prependHtml="@"
prepend-html="@"
description="Here's some help text"
type="email"
autocomplete="email"
/>
<CFormInput
label="Appended text"
appendHtml=".00"
append-html=".00"
description="Here's some help text"
/>
<CFormInput
label="Appended and prepended text"
prependHtml="$"
appendHtml=".00"
prepend-html="$"
append-html=".00"
description="Here's some help text"
/>
<CFormInput
src/views/base/Jumbotrons.vue
+2 -2
View File
@@ -55,8 +55,8 @@
<CCardBody>
<CJumbotron
variant="info"
textVariant="white"
borderVariant="dark"
text-variant="white"
border-variant="dark"
header="Bootstrap 4"
>
<p slot="lead" class="c-lead">
src/views/base/ListGroups.vue
+1 -1
View File
@@ -197,7 +197,7 @@
ad sit ipsum anim Lorem.
</p>
</CCard>
<CCard 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>
src/views/base/Navbars.vue
+4 -4
View File
@@ -19,7 +19,7 @@
<DefaultHeaderDropdownAccnt/>
</CNavbarNav>
<CNavbarNav class="ml-auto">
<CDropdown right class="nav-item b-nav-dropdown" toggleClasses="nav-link">
<CDropdown right class="nav-item b-nav-dropdown" toggle-classes="nav-link">
<CDropdownItem><i class="cui-file" /> Projects
<CBadge variant="primary">32</CBadge>
</CDropdownItem>
@@ -67,7 +67,7 @@
</CForm>
<CDropdown
buttonHtml="Lang"
button-html="Lang"
nav
placement="bottom-end"
>
@@ -136,7 +136,7 @@
<CNavItem href="#">Link</CNavItem>
<!-- Navbar dropdowns -->
<CDropdown
buttonHtml="Lang"
button-html="Lang"
right
nav
>
@@ -146,7 +146,7 @@
<CDropdownItem>FA</CDropdownItem>
</CDropdown>
<CDropdown
buttonHtml="User"
button-html="User"
right
nav
>
src/views/base/Navs.vue
+5 -4
View File
@@ -119,10 +119,11 @@
<CNav pills>
<CNavItem active>Active</CNavItem>
<CNavItem>Link</CNavItem>
<CDropdown id="nav7_ddown"
nav
placement="bottom-end"
buttonContent="Dropdown"
<CDropdown
id="nav7_ddown"
nav
placement="bottom-end"
button-content="Dropdown"
>
<!-- <a class="c-nav-link c-dropdown-toggle" slot="button">Dropdown</a> -->
<CDropdownItem>one</CDropdownItem>
src/views/base/Paginations.vue
+6 -6
View File
@@ -14,7 +14,7 @@
<CCardBody>
<h6>Default</h6>
<CPagination
:activePage.sync="currentPage"
:active-page.sync="currentPage"
:pages="10"
/>
<br>
@@ -22,7 +22,7 @@
<h6>Small</h6>
<CPagination
size="sm"
:activePage.sync="currentPage"
:active-page.sync="currentPage"
:pages="10"/>
<br>
@@ -30,7 +30,7 @@
<h6>Large</h6>
<CPagination
size="lg"
:activePage.sync="currentPage"
:active-page.sync="currentPage"
:pages="10"
/>
<br>
@@ -48,7 +48,7 @@
<CCardBody>
<h6>Left alignment (default)</h6>
<CPagination
:activePage.sync="currentPage"
:active-page.sync="currentPage"
:pages="10"
/>
<br>
@@ -57,14 +57,14 @@
<CPagination
align="center"
:pages="10"
:activePage.sync="currentPage"
:active-page.sync="currentPage"
/>
<br>
<h6>Right (end) alignment</h6>
<CPagination
align="end"
:activePage.sync="currentPage"
:active-page.sync="currentPage"
:pages="10"
/>
<br>
src/views/base/Switches.vue
+60 -60
View File
@@ -13,13 +13,13 @@
<CCardBody>
<!-- <CSwitch
:checked.sync="test11"
trueValue="yes"
falseValue="no"
true-value="yes"
false-value="no"
id="alt"
name="lg"
required
/> -->
<!-- <CSwitch class="c-mx-1" variant="primary" shape="3d" outline="alt" v-bind="labelIcon" type="radio" name="radio" checked.sync="radio" trueValue="primary"/> -->
<!-- <CSwitch class="c-mx-1" variant="primary" shape="3d" outline="alt" v-bind="labelIcon" type="radio" name="radio" checked.sync="radio" true-value="primary"/> -->
<CSwitch
class="c-mx-1"
:key="key"
@@ -50,8 +50,8 @@
variant="primary"
name="switch1"
:checked.sync="checker"
trueValue="yes"
falseValue="no"
true-value="yes"
false-value="no"
/>
<CSwitch
class="c-mx-1"
@@ -70,15 +70,15 @@
Switch pills
</CCardHeader>
<CCardBody>
<CSwitch class="c-mx-1" variant="primary" checked shape="pill"/>
<CSwitch class="c-mx-1" variant="secondary" checked shape="pill" />
<CSwitch class="c-mx-1" variant="success" checked shape="pill" />
<CSwitch class="c-mx-1" variant="warning" checked shape="pill" />
<CSwitch class="c-mx-1" variant="info" checked shape="pill" />
<CSwitch class="c-mx-1" variant="danger" checked shape="pill" />
<CSwitch class="c-mx-1" variant="light" checked shape="pill" />
<CSwitch class="c-mx-1" variant="dark" checked shape="pill" />
<CSwitch class="c-mx-1" variant="primary" disabled shape="pill" />
<CSwitch class="c-mx-1" variant="primary" checked shape="pill"/>
<CSwitch class="c-mx-1" variant="secondary" checked shape="pill" />
<CSwitch class="c-mx-1" variant="success" checked shape="pill" />
<CSwitch class="c-mx-1" variant="warning" checked shape="pill" />
<CSwitch class="c-mx-1" variant="info" checked shape="pill" />
<CSwitch class="c-mx-1" variant="danger" checked shape="pill" />
<CSwitch class="c-mx-1" variant="light" checked shape="pill" />
<CSwitch class="c-mx-1" variant="dark" checked shape="pill" />
<CSwitch class="c-mx-1" variant="primary" disabled shape="pill" />
</CCardBody>
</CCard>
</CCol>
@@ -88,15 +88,15 @@
3d Switch
</CCardHeader>
<CCardBody>
<CSwitch class="c-mx-1" variant="primary" checked shape="3d" />
<CSwitch class="c-mx-1" variant="secondary" checked shape="3d" />
<CSwitch class="c-mx-1" variant="success" checked shape="3d" />
<CSwitch class="c-mx-1" variant="warning" checked shape="3d" />
<CSwitch class="c-mx-1" variant="info" checked shape="3d" />
<CSwitch class="c-mx-1" variant="danger" checked shape="3d" />
<CSwitch class="c-mx-1" variant="light" checked shape="3d" />
<CSwitch class="c-mx-1" variant="dark" checked shape="3d" />
<CSwitch class="c-mx-1" variant="primary" disabled shape="3d" />
<CSwitch class="c-mx-1" variant="primary" checked shape="3d" />
<CSwitch class="c-mx-1" variant="secondary" checked shape="3d" />
<CSwitch class="c-mx-1" variant="success" checked shape="3d" />
<CSwitch class="c-mx-1" variant="warning" checked shape="3d" />
<CSwitch class="c-mx-1" variant="info" checked shape="3d" />
<CSwitch class="c-mx-1" variant="danger" checked shape="3d" />
<CSwitch class="c-mx-1" variant="light" checked shape="3d" />
<CSwitch class="c-mx-1" variant="dark" checked shape="3d" />
<CSwitch class="c-mx-1" variant="primary" disabled shape="3d" />
</CCardBody>
</CCard>
</CCol>
@@ -124,15 +124,15 @@
3d Switch <small><code>outline="alt"</code></small>
</CCardHeader>
<CCardBody>
<CSwitch class="c-mx-1" variant="primary" checked shape="3d" outline="alt" />
<CSwitch class="c-mx-1" variant="secondary" checked shape="3d" outline="alt" />
<CSwitch class="c-mx-1" variant="success" checked shape="3d" outline="alt" />
<CSwitch class="c-mx-1" variant="warning" checked shape="3d" outline="alt" />
<CSwitch class="c-mx-1" variant="info" checked shape="3d" outline="alt" />
<CSwitch class="c-mx-1" variant="danger" checked shape="3d" outline="alt" />
<CSwitch class="c-mx-1" variant="light" checked shape="3d" outline="alt" />
<CSwitch class="c-mx-1" variant="dark" checked shape="3d" outline="alt" />
<CSwitch class="c-mx-1" variant="primary" disabled shape="3d" outline="alt" />
<CSwitch class="c-mx-1" variant="primary" checked shape="3d" outline="alt" />
<CSwitch class="c-mx-1" variant="secondary" checked shape="3d" outline="alt" />
<CSwitch class="c-mx-1" variant="success" checked shape="3d" outline="alt" />
<CSwitch class="c-mx-1" variant="warning" checked shape="3d" outline="alt" />
<CSwitch class="c-mx-1" variant="info" checked shape="3d" outline="alt" />
<CSwitch class="c-mx-1" variant="danger" checked shape="3d" outline="alt" />
<CSwitch class="c-mx-1" variant="light" checked shape="3d" outline="alt" />
<CSwitch class="c-mx-1" variant="dark" checked shape="3d" outline="alt" />
<CSwitch class="c-mx-1" variant="primary" disabled shape="3d" outline="alt" />
</CCardBody>
</CCard>
</CCol>
@@ -160,15 +160,15 @@
3d Switch <small><code>outline="alt"</code></small>
</CCardHeader>
<CCardBody>
<CSwitch class="c-mx-1" variant="primary" checked shape="3d" outline="alt" v-bind="labelIcon" />
<CSwitch class="c-mx-1" variant="secondary" checked shape="3d" outline="alt" v-bind="labelIcon" />
<CSwitch class="c-mx-1" variant="success" checked shape="3d" outline="alt" v-bind="labelIcon" />
<CSwitch class="c-mx-1" variant="warning" checked shape="3d" outline="alt" v-bind="labelIcon" />
<CSwitch class="c-mx-1" variant="info" checked shape="3d" outline="alt" v-bind="labelIcon" />
<CSwitch class="c-mx-1" variant="danger" checked shape="3d" outline="alt" v-bind="labelIcon" />
<CSwitch class="c-mx-1" variant="light" checked shape="3d" outline="alt" v-bind="labelIcon" />
<CSwitch class="c-mx-1" variant="dark" checked shape="3d" outline="alt" v-bind="labelIcon" />
<CSwitch class="c-mx-1" variant="primary" disabled shape="3d" outline="alt" v-bind="labelIcon" />
<CSwitch class="c-mx-1" variant="primary" checked shape="3d" outline="alt" v-bind="labelIcon" />
<CSwitch class="c-mx-1" variant="secondary" checked shape="3d" outline="alt" v-bind="labelIcon" />
<CSwitch class="c-mx-1" variant="success" checked shape="3d" outline="alt" v-bind="labelIcon" />
<CSwitch class="c-mx-1" variant="warning" checked shape="3d" outline="alt" v-bind="labelIcon" />
<CSwitch class="c-mx-1" variant="info" checked shape="3d" outline="alt" v-bind="labelIcon" />
<CSwitch class="c-mx-1" variant="danger" checked shape="3d" outline="alt" v-bind="labelIcon" />
<CSwitch class="c-mx-1" variant="light" checked shape="3d" outline="alt" v-bind="labelIcon" />
<CSwitch class="c-mx-1" variant="dark" checked shape="3d" outline="alt" v-bind="labelIcon" />
<CSwitch class="c-mx-1" variant="primary" disabled shape="3d" outline="alt" v-bind="labelIcon" />
</CCardBody>
</CCard>
</CCol>
@@ -178,15 +178,15 @@
3d Switch <small><code>outline="alt"</code></small>
</CCardHeader>
<CCardBody>
<CSwitch class="c-mx-1" variant="primary" checked shape="3d" outline="alt" />
<CSwitch class="c-mx-1" variant="secondary" checked shape="3d" outline="alt" />
<CSwitch class="c-mx-1" variant="success" checked shape="3d" outline="alt" />
<CSwitch class="c-mx-1" variant="warning" checked shape="3d" outline="alt" />
<CSwitch class="c-mx-1" variant="info" checked shape="3d" outline="alt" />
<CSwitch class="c-mx-1" variant="danger" checked shape="3d" outline="alt" />
<CSwitch class="c-mx-1" variant="light" checked shape="3d" outline="alt" />
<CSwitch class="c-mx-1" variant="dark" checked shape="3d" outline="alt" />
<CSwitch class="c-mx-1" variant="primary" disabled shape="3d" outline="alt" />
<CSwitch class="c-mx-1" variant="primary" checked shape="3d" outline="alt" />
<CSwitch class="c-mx-1" variant="secondary" checked shape="3d" outline="alt" />
<CSwitch class="c-mx-1" variant="success" checked shape="3d" outline="alt" />
<CSwitch class="c-mx-1" variant="warning" checked shape="3d" outline="alt" />
<CSwitch class="c-mx-1" variant="info" checked shape="3d" outline="alt" />
<CSwitch class="c-mx-1" variant="danger" checked shape="3d" outline="alt" />
<CSwitch class="c-mx-1" variant="light" checked shape="3d" outline="alt" />
<CSwitch class="c-mx-1" variant="dark" checked shape="3d" outline="alt" />
<CSwitch class="c-mx-1" variant="primary" disabled shape="3d" outline="alt" />
</CCardBody>
</CCard>
</CCol>
@@ -214,15 +214,15 @@
Switch <small><code>outline shape="pill"</code></small>
</CCardHeader>
<CCardBody>
<CSwitch class="c-mx-1" variant="primary" checked outline shape="pill"/>
<CSwitch class="c-mx-1" variant="secondary" checked outline shape="pill" />
<CSwitch class="c-mx-1" variant="success" checked outline shape="pill" />
<CSwitch class="c-mx-1" variant="warning" checked outline shape="pill" />
<CSwitch class="c-mx-1" variant="info" checked outline shape="pill" />
<CSwitch class="c-mx-1" variant="danger" checked outline shape="pill" />
<CSwitch class="c-mx-1" variant="light" checked outline shape="pill" />
<CSwitch class="c-mx-1" variant="dark" checked outline shape="pill" />
<CSwitch class="c-mx-1" variant="primary" outline shape="pill" disabled />
<CSwitch class="c-mx-1" variant="primary" checked outline shape="pill"/>
<CSwitch class="c-mx-1" variant="secondary" checked outline shape="pill" />
<CSwitch class="c-mx-1" variant="success" checked outline shape="pill" />
<CSwitch class="c-mx-1" variant="warning" checked outline shape="pill" />
<CSwitch class="c-mx-1" variant="info" checked outline shape="pill" />
<CSwitch class="c-mx-1" variant="danger" checked outline shape="pill" />
<CSwitch class="c-mx-1" variant="light" checked outline shape="pill" />
<CSwitch class="c-mx-1" variant="dark" checked outline shape="pill" />
<CSwitch class="c-mx-1" variant="primary" outline shape="pill" disabled />
</CCardBody>
</CCard>
</CCol>
@@ -492,7 +492,7 @@
class="c-table-align-middle c-mb-0"
:items="items"
:fields="fields"
noSorting
no-sorting
>
<template #example="{item}">
<td>
src/views/base/Table.vue
+2 -2
View File
@@ -1,5 +1,5 @@
<template>
<CCard :header="caption" bodyWrapper>
<CCard :header="caption" body-wrapper>
<CTable
:hover="hover"
:striped="striped"
@@ -10,7 +10,7 @@
:fields="fields"
:per-page="small ? 10 : 5"
:dark="dark"
noSorting
no-sorting
>
<template #status="{item}">
<td>
src/views/base/Tables.vue
+15 -15
View File
@@ -2,19 +2,19 @@
<div class="c-animated c-fadeIn">
<CRow>
<CCol sm="12">
<CCard headerHtml="CTable power presentation" bodyWrapper>
<CCard header-html="CTable power presentation" body-wrapper>
<CTable
:items="getItems()"
:fields="fields"
:perPage="6"
:activePage="page"
indexColumn
filterRow
optionsRow="noFilter"
:per-page="6"
:active-page="page"
index-column
filter-row
options-row="noFilter"
loadings
hover
:defaultColumnFilter="{ role:'staff' }"
darkHeader
:default-column-filter="{ role:'staff' }"
dark-header
footer
:pagination="{size: 'lg'}"
>
@@ -45,7 +45,7 @@
square
size="sm"
@click="toggleDetails(index)"
:textHtml="details.includes(index) ? 'Hide' : 'Show'"
:text-html="details.includes(index) ? 'Hide' : 'Show'"
/>
</td>
</template>
@@ -67,15 +67,15 @@
</CRow>
<!-- <CRow>
<CCol sm="12">
<CCard headerHtml="test2">
<CCard header-html="test2">
<CTable
:items="items.slice(0)"
:fields="fields"
:perPage="5"
indexCol="onlyCleaner"
filterRow
optionsRow="onlyFiltesr"
:paginationProps="{align:'center'}"
:per-page="5"
index-col="onlyCleaner"
filter-row
options-row="onlyFiltesr"
:pagination-props="{align:'center'}"
>
<td slot="status" slot-scope="{item}">
<CBadge :variant="getBadge(item.status)">{{item.status}}</CBadge>
src/views/base/Tabs.vue
+10 -10
View File
@@ -7,22 +7,22 @@
Tabs
</CCardHeader>
<CCardBody>
<CTabs addTabClasses="c-mt-1">
<CTab titleHtml="Home" active>
<CTabs add-tab-classes="c-mt-1">
<CTab title-html="Home" active>
1. 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.
</CTab>
<CTab titleHtml="Profile" >
<CTab title-html="Profile" >
2. 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.
</CTab>
<CTab titleHtml="Disabled" disabled>
<CTab title-html="Disabled" disabled>
3. 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
@@ -41,23 +41,23 @@
<CCardBody>
<CTabs
pills
addNavClasses="c-mb-3"
add-nav-classes="c-mb-3"
>
<CTab titleHtml="Home" active>
<CTab title-html="Home" active>
1. 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.
</CTab>
<CTab titleHtml="Profile" >
<CTab title-html="Profile" >
2. 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.
</CTab>
<CTab titleHtml="Disabled" disabled>
<CTab title-html="Disabled" disabled>
3. 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
@@ -74,7 +74,7 @@
Tabs with icons
</CCardHeader>
<CCardBody>
<CTabs addTabClasses="c-mt-1">
<CTabs add-tab-classes="c-mt-1">
<CTab active>
<template slot="title">
<i class="cui-calculator"></i>
@@ -115,7 +115,7 @@
Tabs with icons
</CCardHeader>
<CCardBody>
<CTabs addTabClasses="c-mt-1">
<CTabs add-tab-classes="c-mt-1">
<CTab active>
<template slot="title">
<i class="cui-calculator"></i> {{tabs[0]}}
src/views/buttons/BrandButtons.vue
+91 -27
View File
@@ -10,33 +10,96 @@
<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>
<h6>
Size Small
<small>Add <code>size="sm"</code></small>
</h6>
<p>
<CButton size="sm" class="c-mr-1 c-btn-brand" variant="facebook"><i class="fa fa-facebook"></i><span>Facebook</span></CButton>
<CButton size="sm" class="c-mr-1 c-btn-brand" variant="twitter"><i class="fa fa-twitter"></i><span>Twitter</span></CButton>
<CButton size="sm" variant="linkedin" class="c-mr-1 c-btn-brand"><i class="fa fa-linkedin"></i><span>LinkedIn</span></CButton>
<CButton size="sm" variant="flickr" class="c-mr-1 c-btn-brand"><i class="fa fa-flickr"></i><span>Flickr</span></CButton>
<CButton size="sm" variant="tumblr" class="c-mr-1 c-btn-brand"><i class="fa fa-tumblr"></i><span>Tumblr</span></CButton>
<CButton size="sm" variant="xing" class="c-mr-1 c-btn-brand"><i class="fa fa-xing"></i><span>Xing</span></CButton>
<CButton size="sm" variant="github" class="c-mr-1 c-btn-brand"><i class="fa fa-github"></i><span>Github</span></CButton>
<CButton size="sm" variant="html5" class="c-mr-1 c-btn-brand"><i class="fa fa-html5"></i><span>HTML5</span></CButton>
<CButton size="sm" variant="openid" class="c-mr-1 c-btn-brand"><i class="fa fa-openid"></i><span>OpenID</span></CButton>
<CButton size="sm" variant="stack-overflow" class="c-mr-1 c-btn-brand"><i class="fa fa-stack-overflow"></i><span>StackOverflow</span></CButton>
<CButton size="sm" variant="css3" class="c-mr-1 c-btn-brand"><i class="fa fa-css3"></i><span>CSS3</span></CButton>
<CButton size="sm" variant="youtube" class="c-mr-1 c-btn-brand"><i class="fa fa-youtube"></i><span>YouTube</span></CButton>
<CButton size="sm" variant="dribbble" class="c-mr-1 c-btn-brand"><i class="fa fa-dribbble"></i><span>Dribbble</span></CButton>
<CButton size="sm" variant="google-plus" class="c-mr-1 c-btn-brand"><i class="fa fa-google-plus"></i><span>Google+</span></CButton>
<CButton size="sm" variant="instagram" class="c-mr-1 c-btn-brand"><i class="fa fa-instagram"></i><span>Instagram</span></CButton>
<CButton size="sm" variant="pinterest" class="c-mr-1 c-btn-brand"><i class="fa fa-pinterest"></i><span>Pinterest</span></CButton>
<CButton size="sm" variant="vk" class="c-mr-1 c-btn-brand"><i class="fa fa-vk"></i><span>VK</span></CButton>
<CButton size="sm" variant="yahoo" class="c-mr-1 c-btn-brand"><i class="fa fa-yahoo"></i><span>Yahoo</span></CButton>
<CButton size="sm" variant="behance" class="c-mr-1 c-btn-brand"><i class="fa fa-behance"></i><span>Behance</span></CButton>
<CButton size="sm" variant="dropbox" class="c-mr-1 c-btn-brand"><i class="fa fa-dropbox"></i><span>Dropbox</span></CButton>
<CButton size="sm" variant="reddit" class="c-mr-1 c-btn-brand"><i class="fa fa-reddit"></i><span>Reddit</span></CButton>
<CButton size="sm" variant="spotify" class="c-mr-1 c-btn-brand"><i class="fa fa-spotify"></i><span>Spotify</span></CButton>
<CButton size="sm" variant="vine" class="c-mr-1 c-btn-brand"><i class="fa fa-vine"></i><span>Vine</span></CButton>
<CButton size="sm" variant="foursquare" class="c-mr-1 c-btn-brand"><i class="fa fa-foursquare"></i><span>Forsquare</span></CButton>
<CButton size="sm" variant="vimeo" class="c-mr-1 c-btn-brand"><i class="fa fa-vimeo"></i><span>Vimeo</span></CButton>
<!-- <template v-for="(brand, key) in $options.brands">
<button
type="button"
:class="`c-btn-${brand}`"
class="c-btn c-btn-sm c-btn-brand c-mr-1"
>
<i :class="`fa fa-${brand}`"></i>
<span>{{brand}}</span>
</button>
</template> -->
<CButton size="sm" class="c-mr-1 c-btn-brand" variant="facebook">
<i class="fa fa-facebook"></i><span>Facebook</span>
</CButton>
<CButton size="sm" class="c-mr-1 c-btn-brand" variant="twitter">
<i class="fa fa-twitter"></i><span>Twitter</span>
</CButton>
<CButton size="sm" variant="linkedin" class="c-mr-1 c-btn-brand">
<i class="fa fa-linkedin"></i><span>LinkedIn</span>
</CButton>
<CButton size="sm" variant="flickr" class="c-mr-1 c-btn-brand">
<i class="fa fa-flickr"></i><span>Flickr</span>
</CButton>
<CButton size="sm" variant="tumblr" class="c-mr-1 c-btn-brand">
<i class="fa fa-tumblr"></i><span>Tumblr</span>
</CButton>
<CButton size="sm" variant="xing" class="c-mr-1 c-btn-brand">
<i class="fa fa-xing"></i><span>Xing</span>
</CButton>
<CButton size="sm" variant="github" class="c-mr-1 c-btn-brand">
<i class="fa fa-github"></i><span>Github</span>
</CButton>
<CButton size="sm" variant="html5" class="c-mr-1 c-btn-brand">
<i class="fa fa-html5"></i><span>HTML5</span>
</CButton>
<CButton size="sm" variant="openid" class="c-mr-1 c-btn-brand">
<i class="fa fa-openid"></i><span>OpenID</span>
</CButton>
<CButton size="sm" variant="stack-overflow" class="c-mr-1 c-btn-brand">
<i class="fa fa-stack-overflow"></i><span>StackOverflow</span>
</CButton>
<CButton size="sm" variant="css3" class="c-mr-1 c-btn-brand">
<i class="fa fa-css3"></i><span>CSS3</span>
</CButton>
<CButton size="sm" variant="youtube" class="c-mr-1 c-btn-brand">
<i class="fa fa-youtube"></i><span>YouTube</span>
</CButton>
<CButton size="sm" variant="dribbble" class="c-mr-1 c-btn-brand">
<i class="fa fa-dribbble"></i><span>Dribbble</span>
</CButton>
<CButton size="sm" variant="google-plus" class="c-mr-1 c-btn-brand">
<i class="fa fa-google-plus"></i><span>Google+</span>
</CButton>
<CButton size="sm" variant="instagram" class="c-mr-1 c-btn-brand">
<i class="fa fa-instagram"></i><span>Instagram</span>
</CButton>
<CButton size="sm" variant="pinterest" class="c-mr-1 c-btn-brand">
<i class="fa fa-pinterest"></i><span>Pinterest</span>
</CButton>
<CButton size="sm" variant="vk" class="c-mr-1 c-btn-brand">
<i class="fa fa-vk"></i><span>VK</span>
</CButton>
<CButton size="sm" variant="yahoo" class="c-mr-1 c-btn-brand">
<i class="fa fa-yahoo"></i><span>Yahoo</span>
</CButton>
<CButton size="sm" variant="behance" class="c-mr-1 c-btn-brand">
<i class="fa fa-behance"></i><span>Behance</span>
</CButton>
<CButton size="sm" variant="dropbox" class="c-mr-1 c-btn-brand">
<i class="fa fa-dropbox"></i><span>Dropbox</span>
</CButton>
<CButton size="sm" variant="reddit" class="c-mr-1 c-btn-brand">
<i class="fa fa-reddit"></i><span>Reddit</span>
</CButton>
<CButton size="sm" variant="spotify" class="c-mr-1 c-btn-brand">
<i class="fa fa-spotify"></i><span>Spotify</span>
</CButton>
<CButton size="sm" variant="vine" class="c-mr-1 c-btn-brand">
<i class="fa fa-vine"></i><span>Vine</span>
</CButton>
<CButton size="sm" variant="foursquare" class="c-mr-1 c-btn-brand">
<i class="fa fa-foursquare"></i><span>Forsquare</span>
</CButton>
<CButton size="sm" variant="vimeo" class="c-mr-1 c-btn-brand">
<i class="fa fa-vimeo"></i><span>Vimeo</span>
</CButton>
</p>
<h6>Size Normal</h6>
<p>
@@ -294,7 +357,8 @@
<script>
export default {
name: 'brand-buttons'
name: 'brand-buttons',
brands: ['facebook', 'twitter', 'linkedin']
}
</script>
src/views/buttons/ButtonGroups.vue
+4 -4
View File
@@ -152,14 +152,14 @@
<CFormInput
class="c-mb-0 c-w-25 c-mx-1"
size="sm"
prependHtml="$"
appendHtml=".00"
prepend-html="$"
append-html=".00"
value="100"
/>
<CFormSelect
class="c-mb-0 c-w-25 c-mx-1"
size="sm"
prependHtml="Size"
prepend-html="Size"
value="Medium"
:options="['Large','Medium','Small']"
custom
@@ -181,7 +181,7 @@
<CDropdown
class="c-mx-1"
placement="bottom-end"
buttonContent="Menu"
button-content="Menu"
>
<CDropdownItem>Item 1</CDropdownItem>
<CDropdownItem>Item 2</CDropdownItem>
src/views/buttons/Dropdowns.vue
+23 -23
View File
@@ -15,7 +15,7 @@
</CCardHeader>
<CCardBody>
<div>
<CDropdown buttonHtml="Dropdown Button" class="c-m-2">
<CDropdown button-html="Dropdown Button" class="c-m-2">
<CDropdownItem>First Action</CDropdownItem>
<CDropdownItem>Second Action</CDropdownItem>
<CDropdownItem>Third Action</CDropdownItem>
@@ -25,7 +25,7 @@
</CDropdown>
</div>
<!-- <div>
<CDropdown buttonHtml="Dropdown using buttons as menu items" class="c-m-2">
<CDropdown button-html="Dropdown using buttons as menu items" class="c-m-2">
<CDropdownItem>I'm a button</CDropdownItem>
<CDropdownItem>I'm also a button</CDropdownItem>
<CDropdownItem disabled>I'm a button, but disabled!</CDropdownItem>
@@ -33,7 +33,7 @@
</CDropdown>
</div> -->
<div>
<CDropdown buttonHtml="Dropdown with divider" class="c-m-2">
<CDropdown button-html="Dropdown with divider" class="c-m-2">
<CDropdownItem>First item</CDropdownItem>
<CDropdownItem>Second item</CDropdownItem>
<CDropdownDivider></CDropdownDivider>
@@ -41,7 +41,7 @@
</CDropdown>
</div>
<div>
<CDropdown buttonHtml="Dropdown with header" class="c-m-2">
<CDropdown button-html="Dropdown with header" class="c-m-2">
<CDropdownHeader>Dropdown header</CDropdownHeader>
<CDropdownItem>First item</CDropdownItem>
<CDropdownItem>Second Item</CDropdownItem>
@@ -60,7 +60,7 @@
<CCardBody>
<div>
<CDropdown
buttonHtml="Left align"
button-html="Left align"
variant="primary"
class="c-m-2"
>
@@ -70,7 +70,7 @@
</CDropdown>
<CDropdown
placement="bottom-end"
buttonHtml="Right align"
button-html="Right align"
variant="primary"
class="c-m-2"
>
@@ -81,7 +81,7 @@
</div>
<div>
<CDropdown
buttonHtml="Drop-Up"
button-html="Drop-Up"
variant="info"
class="c-m-2"
dropup
@@ -94,7 +94,7 @@
<div>
<CDropdown
:offset="25"
buttonHtml="Offset Dropdown"
button-html="Offset Dropdown"
class="c-m-2"
>
<CDropdownItem>Action</CDropdownItem>
@@ -105,7 +105,7 @@
<div>
<CDropdown
split
buttonHtml="Split Dropdown"
button-html="Split Dropdown"
class="c-m-2"
>
<CDropdownItem>Action</CDropdownItem>
@@ -152,7 +152,7 @@
<div>
<CDropdown
size="lg"
buttonHtml="Large"
button-html="Large"
class="c-m-2"
>
<CDropdownItem>Action</CDropdownItem>
@@ -162,7 +162,7 @@
<CDropdown
size="lg"
split
buttonHtml="Large Split"
button-html="Large Split"
class="c-m-2"
>
<CDropdownItem>Action</CDropdownItem>
@@ -172,7 +172,7 @@
<br>
<CDropdown
size="sm"
buttonHtml="Small"
button-html="Small"
class="c-m-2"
>
<CDropdownItem>Action</CDropdownItem>
@@ -181,7 +181,7 @@
</CDropdown>
<CDropdown
size="sm"
split buttonHtml="Small Split"
split button-html="Small Split"
class="c-m-2"
>
<CDropdownItem>Action</CDropdownItem>
@@ -204,7 +204,7 @@
<CCardBody>
<div>
<CDropdown
buttonHtml="Dropdown ARIA" variant="primary"
button-html="Dropdown ARIA" variant="primary"
class="c-m-2"
>
<div role="group">
@@ -236,7 +236,7 @@
<CCardBody>
<CDropdown
size="sm"
buttonHtml="Primary"
button-html="Primary"
variant="primary"
class="c-m-0"
>
@@ -246,7 +246,7 @@
</CDropdown>
<CDropdown
size="sm"
buttonHtml="Secondary"
button-html="Secondary"
variant="secondary"
class="c-m-0"
>
@@ -256,7 +256,7 @@
</CDropdown>
<CDropdown
size="sm"
buttonHtml="Success"
button-html="Success"
variant="success"
class="c-m-0"
>
@@ -266,7 +266,7 @@
</CDropdown>
<CDropdown
size="sm"
buttonHtml="Warning"
button-html="Warning"
variant="warning"
class="c-m-0"
>
@@ -276,7 +276,7 @@
</CDropdown>
<CDropdown
size="sm"
buttonHtml="Danger"
button-html="Danger"
variant="danger"
class="c-m-0"
>
@@ -286,7 +286,7 @@
</CDropdown>
<CDropdown
size="sm"
buttonHtml="Info"
button-html="Info"
variant="info"
class="c-m-0"
>
@@ -296,7 +296,7 @@
</CDropdown>
<CDropdown
size="sm"
buttonHtml="Light"
button-html="Light"
variant="light"
class="c-m-0"
>
@@ -306,7 +306,7 @@
</CDropdown>
<CDropdown
size="sm"
buttonHtml="Dark"
button-html="Dark"
variant="dark"
class="c-m-0"
>
@@ -316,7 +316,7 @@
</CDropdown>
<CDropdown
size="sm"
buttonHtml="Link"
button-html="Link"
variant="link"
class="c-m-0"
>
src/views/icons/FontAwesome.vue
+16 -16
View File
@@ -174,7 +174,7 @@
</CRow>
</CCardBody>
</CCard>
<CCard id="new">
<CCard id="new">
<CCardHeader>20 New Icons in 4.5</CCardHeader>
<CCardBody>
<CRow class="text-center">
@@ -245,7 +245,7 @@
</CCardBody>
</CCard>
<CCard id="web-application">
<CCard id="web-application">
<CCardHeader>Web Application Icons</CCardHeader>
<CCardBody>
<CRow class="text-center">
@@ -1432,7 +1432,7 @@
</CCard>
<CCard id="hand">
<CCard id="hand">
<CCardHeader>Hand Icons</CCardHeader>
<CCardBody>
<CRow class="text-center">
@@ -1494,7 +1494,7 @@
</CCard>
<CCard id="transportation">
<CCard id="transportation">
<CCardHeader>Transportation Icons</CCardHeader>
<CCardBody>
<CRow class="text-center">
@@ -1555,7 +1555,7 @@
</CCardBody>
</CCard>
<CCard id="gender">
<CCard id="gender">
<CCardHeader>Gender Icons</CCardHeader>
<CCardBody>
<CRow class="text-center">
@@ -1607,7 +1607,7 @@
</CCardBody>
</CCard>
<CCard id="file-type">
<CCard id="file-type">
<CCardHeader>File Type Icons</CCardHeader>
<CCardBody>
<CRow class="text-center">
@@ -1671,7 +1671,7 @@
</CCardBody>
</CCard>
<CCard id="spinner">
<CCard id="spinner">
<CCardHeader>Spinner Icons</CCardHeader>
<CCardBody>
<div class="alert alert-success">
@@ -1704,7 +1704,7 @@
</CCardBody>
</CCard>
<CCard id="form-control">
<CCard id="form-control">
<CCardHeader>Form Control Icons</CCardHeader>
<CCardBody>
<CRow class="text-center">
@@ -1747,7 +1747,7 @@
</CCardBody>
</CCard>
<CCard id="payment">
<CCard id="payment">
<CCardHeader>Payment Icons</CCardHeader>
<CCardBody>
<CRow class="text-center">
@@ -1793,7 +1793,7 @@
</CCardBody>
</CCard>
<CCard id="chart">
<CCard id="chart">
<CCardHeader>Chart Icons</CCardHeader>
<CCardBody>
<CRow class="text-center">
@@ -1818,7 +1818,7 @@
</CCardBody>
</CCard>
<CCard id="currency">
<CCard id="currency">
<CCardHeader>Currency Icons</CCardHeader>
<CCardBody>
<CRow class="text-center">
@@ -1906,7 +1906,7 @@
</CCardBody>
</CCard>
<CCard id="text-editor">
<CCard id="text-editor">
<CCardHeader>Text Editor Icons</CCardHeader>
<CCardBody>
<CRow class="text-center">
@@ -2063,7 +2063,7 @@
</CCardBody>
</CCard>
<CCard id="directional">
<CCard id="directional">
<CCardHeader>Directional Icons</CCardHeader>
<CCardBody>
<CRow class="text-center">
@@ -2232,7 +2232,7 @@
</CCardBody>
</CCard>
<CCard id="video-player">
<CCard id="video-player">
<CCardHeader>Video Player Icons</CCardHeader>
<CCardBody>
<CRow class="text-center">
@@ -2305,7 +2305,7 @@
</CCardBody>
</CCard>
<CCard id="brand">
<CCard id="brand">
<CCardHeader>Brand Icons</CCardHeader>
<CCardBody>
<div class="alert alert-warning">
@@ -2796,7 +2796,7 @@
</CCardBody>
</CCard>
<CCard id="medical">
<CCard id="medical">
<CCardHeader>Medical Icons</CCardHeader>
<CCardBody>
<CRow class="text-center">
src/views/icons/SimpleLineIcons.vue
+1 -1
View File
@@ -1,6 +1,6 @@
<template>
<div class="c-animated c-fadeIn">
<CCard class="c-card-default">
<CCard class="c-card-default">
<CCardHeader>
<i class="fa fa-picture-o"></i> Simple Line Icons
</CCardHeader>
src/views/notifications/Modals.vue
+10 -10
View File
@@ -140,20 +140,20 @@
</CModal>
<CModal
:visible.sync="darkModal"
:noBackdrop="false"
:noCloseOnBackdrop="fsalse"
:noFade="false"
:no-backdrop="false"
:no-close-on-backdrop="fsalse"
:no-fade="false"
:centered="true"
title="Modal title 2"
size="lg"
variant="dark"
borderVariant="danger2"
addModalClassess="hehe1"
addDialogClassess="hehe2"
addContentClassess="hehe3"
:noHeader="false"
:noBody="false"
:noFooter="false"
border-variant="danger2"
add-modal-classess="hehe1"
add-dialog-classess="hehe2"
add-content-classess="hehe3"
:no-header="false"
:no-body="false"
:no-footer="false"
>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
src/views/pages/Login.vue
+1 -1
View File
@@ -36,7 +36,7 @@
<CCard
class="c-text-white c-text-center c-bg-primary c-py-5 c-d-md-down-none"
style="width:44%"
bodyWrapper
body-wrapper
>
<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
+1 -1
View File
@@ -15,7 +15,7 @@
/>
<CFormInput
placeholder="Email"
prependHtml="@"
prepend-html="@"
autocomplete="email"
/>
<CFormInput
src/views/users/Users.vue
+2 -2
View File
@@ -2,7 +2,7 @@
<CRow>
<CCol col="12" xl="8">
<transition name="slide">
<CCard headerHtml="users" bodyWrapper>
<CCard header-html="users" body-wrapper>
<CTable
hover
striped
@@ -11,7 +11,7 @@
:current-page="currentPage"
:per-page="perPage"
@row-clicked="rowClicked"
:paginationProps="$options.paginationProps"
:pagination-props="$options.paginationProps"
>
<td slot="id" slot-scope="data">
<strong>{{data.item.id}}</strong>
src/views/widgets/Widgets.vue
+35 -35
View File
@@ -169,7 +169,7 @@
header="$1.999,50"
text="Income"
variant="primary"
noPadding
no-padding
>
<CIcon name="settings" width="24"/>
</CWidgetIcon>
@@ -179,7 +179,7 @@
header="$1.999,50"
text="Income"
variant="info"
noPadding
no-padding
>
<CIcon name="laptop" width="24"/>
</CWidgetIcon>
@@ -189,7 +189,7 @@
header="$1.999,50"
text="Income"
variant="warning"
noPadding
no-padding
>
<CIcon name="moon" width="24"/>
</CWidgetIcon>
@@ -199,7 +199,7 @@
header="$1.999,50"
text="Income"
variant="danger"
noPadding
no-padding
>
<CIcon name="bell" width="24"/>
</CWidgetIcon>
@@ -211,7 +211,7 @@
header="$1.999,50"
text="Income"
variant="primary"
noPadding
no-padding
>
<CIcon name="settings" class="c-mx-5 " width="24"/>
</CWidgetIcon>
@@ -221,7 +221,7 @@
header="$1.999,50"
text="Income"
variant="info"
noPadding
no-padding
>
<CIcon name="laptop" class="c-mx-5 " width="24"/>
</CWidgetIcon>
@@ -231,7 +231,7 @@
header="$1.999,50"
text="Income"
variant="warning"
noPadding
no-padding
>
<CIcon name="moon" class="c-mx-5 " width="24"/>
</CWidgetIcon>
@@ -243,7 +243,7 @@
header="$1.999,50"
text="Income"
variant="primary"
noPadding
no-padding
link="#"
>
<CIcon name="settings" class="c-mx-5 " width="24"/>
@@ -254,7 +254,7 @@
header="$1.999,50"
text="Income"
variant="info"
noPadding
no-padding
link="#"
>
<CIcon name="laptop" class="c-mx-5 " width="24"/>
@@ -265,7 +265,7 @@
header="$1.999,50"
text="Income"
variant="warning"
noPadding
no-padding
link="#"
>
<CIcon name="moon" class="c-mx-5" width="24"/>
@@ -474,10 +474,10 @@
<CRow>
<CCol sm="6" lg="3">
<CWidgetSmallText
rightHeader="SALE"
rightFooter="Today 6:43 AM"
leftHeader="$1.890,65"
leftFooter="+432,50 (15,78%)"
right-header="SALE"
right-footer="Today 6:43 AM"
left-header="$1.890,65"
left-footer="+432,50 (15,78%)"
>
<CChartLineSimple style="height:40px"/>
<CChartBarSimple style="height:40px"/>
@@ -486,10 +486,10 @@
<CCol sm="6" lg="3">
<CWidgetSmallText
variant="success"
rightHeader="SALE"
rightFooter="Today 6:43 AM"
leftHeader="$1.890,65"
leftFooter="+432,50 (15,78%)"
right-header="SALE"
right-footer="Today 6:43 AM"
left-header="$1.890,65"
left-footer="+432,50 (15,78%)"
>
<CChartLineSimple style="height:40px"/>
<CChartBarSimple style="height:40px"/>
@@ -498,10 +498,10 @@
<CCol sm="6" lg="3">
<CWidgetSmallText
variant="danger"
rightHeader="SALE"
rightFooter="Today 6:43 AM"
leftHeader="$1.890,65"
leftFooter="+432,50 (15,78%)"
right-header="SALE"
right-footer="Today 6:43 AM"
left-header="$1.890,65"
left-footer="+432,50 (15,78%)"
>
<CChartLineSimple style="height:40px"/>
<CChartBarSimple style="height:40px"/>
@@ -510,10 +510,10 @@
<CCol sm="6" lg="3">
<CWidgetSmallText
variant="warning"
rightHeader="SALE"
rightFooter="Today 6:43 AM"
leftHeader="$1.890,65"
leftFooter="+432,50 (15,78%)"
right-header="SALE"
right-footer="Today 6:43 AM"
left-header="$1.890,65"
left-footer="+432,50 (15,78%)"
>
<CChartLineSimple style="height:40px"/>
<CChartBarSimple style="height:40px"/>
@@ -523,32 +523,32 @@
<CRow>
<CCol sm="4" lg="2">
<CWidgetSimple header="title" text="1,123">
<CChartLineSimple style="height:40px" borderColor="danger"/>
<CChartLineSimple style="height:40px" border-color="danger"/>
</CWidgetSimple>
</CCol>
<CCol sm="4" lg="2">
<CWidgetSimple header="title" text="1,123">
<CChartLineSimple style="height:40px" borderColor="primary"/>
<CChartLineSimple style="height:40px" border-color="primary"/>
</CWidgetSimple>
</CCol>
<CCol sm="4" lg="2">
<CWidgetSimple header="title" text="1,123">
<CChartLineSimple style="height:40px" borderColor="success"/>
<CChartLineSimple style="height:40px" border-color="success"/>
</CWidgetSimple>
</CCol>
<CCol sm="4" lg="2">
<CWidgetSimple header="title" text="1,123">
<CChartBarSimple style="height:40px" backgroundColor="danger"/>
<CWidgetSimple header="title" text="1,123">
<CChartBarSimple style="height:40px" background-color="danger"/>
</CWidgetSimple>
</CCol>
<CCol sm="4" lg="2">
<CWidgetSimple header="title" text="1,123">
<CChartBarSimple style="height:40px" backgroundColor="primary"/>
<CWidgetSimple header="title" text="1,123">
<CChartBarSimple style="height:40px" background-color="primary"/>
</CWidgetSimple>
</CCol>
<CCol sm="4" lg="2">
<CWidgetSimple header="title" text="1,123">
<CChartBarSimple style="height:40px" backgroundColor="success"/>
<CWidgetSimple header="title" text="1,123">
<CChartBarSimple style="height:40px" background-color="success"/>
</CWidgetSimple>
</CCol>
</CRow>
src/views/widgets/WidgetsDropdown.vue
+9 -9
View File
@@ -19,8 +19,8 @@
pointed
class="c-px-3"
style="height:70px"
:dataPoints="[65, 59, 84, 84, 51, 55, 40]"
backgroundColor="primary"
:data-points="[65, 59, 84, 84, 51, 55, 40]"
background-color="primary"
label="Members"
labels="months"
/>
@@ -33,7 +33,7 @@
class="c-float-right"
variant="transparent c-p-0"
placement="bottom-end"
noCaret
no-caret
buttonHtml="<i class='cui-location-pin'></i>"
>
<CDropdownItem>Action</CDropdownItem>
@@ -46,8 +46,8 @@
pointed
class="c-px-3"
style="height:70px"
:dataPoints="[1, 18, 9, 17, 34, 22, 11]"
backgroundColor="info"
:data-points="[1, 18, 9, 17, 34, 22, 11]"
background-color="info"
:options="{ elements: { line: { tension: 0.00001 }}}"
label="Members"
labels="months"
@@ -76,10 +76,10 @@
</template>
<CChartLineSimple
style="height:70px"
backgroundColor="rgba(255,255,255,.2)"
:dataPoints="[78, 81, 80, 45, 34, 12, 40]"
background-color="rgba(255,255,255,.2)"
:data-points="[78, 81, 80, 45, 34, 12, 40]"
:options="{ elements: { line: { borderWidth: 2.5 }}}"
pointHoverBackgroundColor="warning"
point-hover-background-color="warning"
label="Members"
labels="months"
/>
@@ -107,7 +107,7 @@
</template>
<CChartBarSimple
style="height:70px"
backgroundColor="rgb(250, 152, 152)"
background-color="rgb(250, 152, 152)"
label="Members"
labels="months"
/>
src/views/widgets/WidgetsSocial.vue
+40 -40
View File
@@ -4,10 +4,10 @@
<CCol md="3" sm="6">
<CWidgetSocial
variant="facebook"
rightHeader="89k"
rightFooter="friends"
leftHeader="459"
leftFooter="feeds"
right-header="89k"
right-footer="friends"
left-header="459"
left-footer="feeds"
>
<CIcon
name="socialFacebook"
@@ -16,8 +16,8 @@
/>
<CChartLineSimple
style="height:100px"
backgroundColor="rgba(255,255,255,.1)"
:dataPoints="[65, 59, 84, 84, 51, 55, 40]"
background-color="rgba(255,255,255,.1)"
:data-points="[65, 59, 84, 84, 51, 55, 40]"
label="Friends"
labels="months"
/>
@@ -26,10 +26,10 @@
<CCol md="3" sm="6">
<CWidgetSocial
variant="twitter"
rightHeader="973k"
rightFooter="followers"
leftHeader="1.792"
leftFooter="tweets"
right-header="973k"
right-footer="followers"
left-header="1.792"
left-footer="tweets"
>
<CIcon
name="socialTwitter"
@@ -38,8 +38,8 @@
/>
<CChartLineSimple
style="height:100px"
backgroundColor="rgba(255,255,255,.1)"
:dataPoints="[1, 13, 9, 17, 34, 41, 38]"
background-color="rgba(255,255,255,.1)"
:data-points="[1, 13, 9, 17, 34, 41, 38]"
label="Followers"
labels="months"
/>
@@ -48,10 +48,10 @@
<CCol md="3" sm="6">
<CWidgetSocial
variant="linkedin"
rightHeader="500+"
rightFooter="contracts"
leftHeader="292"
leftFooter="feeds"
right-header="500+"
right-footer="contracts"
left-header="292"
left-footer="feeds"
>
<CIcon
name="socialLinkedin"
@@ -60,8 +60,8 @@
/>
<CChartLineSimple
style="height:100px"
backgroundColor="rgba(255,255,255,.1)"
:dataPoints="[78, 81, 80, 45, 34, 12, 40]"
background-color="rgba(255,255,255,.1)"
:data-points="[78, 81, 80, 45, 34, 12, 40]"
label="Contracts"
labels="months"
/>
@@ -69,10 +69,10 @@
</CCol>
<CCol md="3" sm="6">
<CWidgetSocial
rightHeader="12"
rightFooter="events"
leftHeader="4"
leftFooter="meetings"
right-header="12"
right-footer="events"
left-header="4"
left-footer="meetings"
variant="warning"
>
<CIcon
@@ -82,8 +82,8 @@
/>
<CChartLineSimple
style="height:100px"
backgroundColor="rgba(255,255,255,.1)"
:dataPoints="[35, 23, 56, 22, 97, 23, 64]"
background-color="rgba(255,255,255,.1)"
:data-points="[35, 23, 56, 22, 97, 23, 64]"
label="Followers"
labels="months"
/>
@@ -94,10 +94,10 @@
<CCol md="3" sm="6">
<CWidgetSocial
variant="facebook"
rightHeader="89k"
rightFooter="friends"
leftHeader="459"
leftFooter="feeds"
right-header="89k"
right-footer="friends"
left-header="459"
left-footer="feeds"
>
<CIcon
name="socialFacebook"
@@ -109,10 +109,10 @@
<CCol md="3" sm="6">
<CWidgetSocial
variant="twitter"
rightHeader="973k"
rightFooter="followers"
leftHeader="1.792"
leftFooter="tweets"
right-header="973k"
right-footer="followers"
left-header="1.792"
left-footer="tweets"
>
<CIcon
name="socialTwitter"
@@ -124,10 +124,10 @@
<CCol md="3" sm="6">
<CWidgetSocial
variant="linkedin"
rightHeader="500+"
rightFooter="contracts"
leftHeader="292"
leftFooter="feeds"
right-header="500+"
right-footer="contracts"
left-header="292"
left-footer="feeds"
>
<CIcon
name="socialLinkedin"
@@ -138,10 +138,10 @@
</CCol>
<CCol md="3" sm="6">
<CWidgetSocial
rightHeader="12"
rightFooter="events"
leftHeader="4"
leftFooter="meetings"
right-header="12"
right-footer="events"
left-header="4"
left-footer="meetings"
variant="warning"
>
<CIcon