sean/manja_dev_ui
1
0
Fork 0
Code Issues Pull Requests Actions 3 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/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]}}