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