refactor: change v-model to .sync modifier, other small changes
This commit is contained in:
woothu
@@ -3,7 +3,8 @@
|
||||
<div class="animated fadeIn">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<i class="fa fa-align-justify"></i><strong> Bootstrap Pagination</strong>
|
||||
<i class="fa fa-align-justify"></i>
|
||||
<strong> Bootstrap Pagination</strong>
|
||||
<!-- <div class="card-header-actions">
|
||||
<a href="https://bootstrap-vue.js.org/docs/components/pagination" class="card-header-action" rel="noreferrer noopener" target="_blank">
|
||||
<small class="text-muted">docs</small>
|
||||
@@ -12,16 +13,26 @@
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<h6>Default</h6>
|
||||
<CPagination v-model="currentPage" :pages="10"/>
|
||||
<CPagination
|
||||
:activePage.sync="currentPage"
|
||||
:pages="10"
|
||||
/>
|
||||
<br>
|
||||
|
||||
<h6>Small</h6>
|
||||
<CPagination size="sm" v-model="currentPage" :pages="10"/>
|
||||
<CPagination
|
||||
size="sm"
|
||||
:activePage.sync="currentPage"
|
||||
:pages="10"/>
|
||||
<br>
|
||||
|
||||
<div class="d-sm-down-none">
|
||||
<h6>Large</h6>
|
||||
<CPagination size="lg" v-model="currentPage" :pages="10"/>
|
||||
<CPagination
|
||||
size="lg"
|
||||
:activePage.sync="currentPage"
|
||||
:pages="10"
|
||||
/>
|
||||
<br>
|
||||
</div>
|
||||
|
||||
@@ -30,20 +41,32 @@
|
||||
</CCard>
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<i class="fa fa-align-justify"></i><strong> Pagination </strong>
|
||||
<i class="fa fa-align-justify"></i>
|
||||
<strong> Pagination </strong>
|
||||
<small>alignment</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<h6>Left alignment (default)</h6>
|
||||
<CPagination v-model="currentPage" :pages="10"/>
|
||||
<CPagination
|
||||
:activePage.sync="currentPage"
|
||||
:pages="10"
|
||||
/>
|
||||
<br>
|
||||
|
||||
<h6>Center alignment</h6>
|
||||
<CPagination align="center" :pages="10" v-model="currentPage"/>
|
||||
<CPagination
|
||||
align="center"
|
||||
:pages="10"
|
||||
:activePage.sync="currentPage"
|
||||
/>
|
||||
<br>
|
||||
|
||||
<h6>Right (end) alignment</h6>
|
||||
<CPagination align="end" v-model="currentPage" :pages="10"/>
|
||||
<CPagination
|
||||
align="end"
|
||||
:activePage.sync="currentPage"
|
||||
:pages="10"
|
||||
/>
|
||||
<br>
|
||||
|
||||
<div>currentPage: {{currentPage}}</div>
|
||||
@@ -60,11 +83,6 @@ export default {
|
||||
return {
|
||||
currentPage: 3,
|
||||
}
|
||||
},
|
||||
// methods: {
|
||||
// linkGen (pageNum) {
|
||||
// return '#page/' + pageNum + '/foobar'
|
||||
// },
|
||||
// }
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -12,7 +12,7 @@
|
||||
</h5>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<!-- <CSwitch class="mx-1" variant="primary" shape="3d" outline="alt" v-bind="labelIcon" type="radio" name="radio" v-model="radio" trueValue="primary"/> -->
|
||||
<!-- <CSwitch class="mx-1" variant="primary" shape="3d" outline="alt" v-bind="labelIcon" type="radio" name="radio" checked.sync="radio" trueValue="primary"/> -->
|
||||
<CSwitch class="mx-1"
|
||||
:key="key"
|
||||
:variant="variant"
|
||||
@@ -21,7 +21,7 @@
|
||||
v-bind="labelIcon"
|
||||
type="radio"
|
||||
name="radio"
|
||||
v-model="radio"
|
||||
:checked.sync="radio"
|
||||
:value="variant"
|
||||
v-for="(variant, key) in ['primary','secondary','warning','success','info','danger','light','dark']"
|
||||
/>
|
||||
@@ -37,27 +37,19 @@
|
||||
<CBadge variant="primary">{{checker}}</CBadge>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CSwitch class="mx-1"
|
||||
<CSwitch
|
||||
class="mx-1"
|
||||
variant="primary"
|
||||
checked
|
||||
name="switch1"
|
||||
v-model="checker"
|
||||
value="someValue"
|
||||
:checked.sync="checker"
|
||||
trueValue="yes"
|
||||
falseValue="no"
|
||||
/>
|
||||
<CSwitch class="mx-1"
|
||||
variant="primary"
|
||||
checked
|
||||
name="switch1"
|
||||
:checked="true"
|
||||
value="someValue"
|
||||
/>
|
||||
<CSwitch class="mx-1"
|
||||
:variant="variant"
|
||||
checked
|
||||
:key="key"
|
||||
v-for="(variant, key) in ['secondary', 'success','warning','info','danger','light','dark','primary']"
|
||||
v-for="(variant, key) in ['secondary', 'success','warning','info','danger','light','dark']"
|
||||
/>
|
||||
<CSwitch class="mx-1" variant="primary" disabled />
|
||||
</CCardBody>
|
||||
|
||||
@@ -12,7 +12,7 @@
|
||||
:dark="dark"
|
||||
noSorting
|
||||
>
|
||||
<template v-slot:status="{item}">
|
||||
<template #status="{item}">
|
||||
<td>
|
||||
<CBadge :variant="getBadge(item.status)">{{item.status}}</CBadge>
|
||||
</td>
|
||||
|
||||
+37
-37
@@ -14,44 +14,44 @@
|
||||
:defaultSorter="{ name:'username', direction:'desc'}"
|
||||
:defaultColumnFilter="{ role:'staff' }"
|
||||
>
|
||||
<template #index-col="{index}">
|
||||
<td
|
||||
<template #index-column="{index}">
|
||||
<td
|
||||
@click="toggleDetails(index)"
|
||||
style="cursor:pointer"
|
||||
class="text-center"
|
||||
>
|
||||
<i
|
||||
class="icons font-lg d-block cui-chevron-right"
|
||||
style="transition: transform 0.4s"
|
||||
:style="details.includes(index) ? 'transform:rotate(90deg)': ''"
|
||||
></i>
|
||||
</td>
|
||||
</template>
|
||||
<template #status="{item}">
|
||||
<td>
|
||||
<CBadge :variant="getBadge(item.status)">
|
||||
{{item.status}}
|
||||
</CBadge>
|
||||
</td>
|
||||
</template>
|
||||
<template #show_details="{item, index}">
|
||||
<td class="py-2">
|
||||
<CButton
|
||||
variant="outline-primary"
|
||||
square
|
||||
size="sm"
|
||||
@click="toggleDetails(index)"
|
||||
style="cursor:pointer"
|
||||
class="text-center"
|
||||
>
|
||||
<i
|
||||
class="icons font-lg d-block cui-chevron-right"
|
||||
style="transition: transform 0.4s"
|
||||
:style="details.includes(index) ? 'transform:rotate(90deg)': ''"
|
||||
></i>
|
||||
</td>
|
||||
</template>
|
||||
<template #status="{item}">
|
||||
<td>
|
||||
<CBadge :variant="getBadge(item.status)">
|
||||
{{item.status}}
|
||||
</CBadge>
|
||||
</td>
|
||||
</template>
|
||||
<template #show_details="{item, index}">
|
||||
<td class="py-2">
|
||||
<CButton
|
||||
variant="outline-primary"
|
||||
square
|
||||
size="sm"
|
||||
@click="toggleDetails(index)"
|
||||
:textHtml="details.includes(index) ? 'Hide' : 'Show'"
|
||||
/>
|
||||
</td>
|
||||
</template>
|
||||
<template #details="{item, index}">
|
||||
<CCollapse :show="details.includes(index)">
|
||||
<CCardBody>
|
||||
{{index + 1}} - {{item}}
|
||||
</CCardBody>
|
||||
</CCollapse>
|
||||
</template>
|
||||
:textHtml="details.includes(index) ? 'Hide' : 'Show'"
|
||||
/>
|
||||
</td>
|
||||
</template>
|
||||
<template #details="{item, index}">
|
||||
<CCollapse :show="details.includes(index)">
|
||||
<CCardBody>
|
||||
{{index + 1}} - {{item}}
|
||||
</CCardBody>
|
||||
</CCollapse>
|
||||
</template>
|
||||
</CTable>
|
||||
</CCard>
|
||||
</CCol>
|
||||
|
||||
@@ -163,7 +163,6 @@
|
||||
card
|
||||
pills
|
||||
vertical="4"
|
||||
v-model="tabIndex[1]"
|
||||
>
|
||||
<CTab active>
|
||||
<template slot="title">
|
||||
@@ -208,7 +207,6 @@ export default {
|
||||
name: 'tabs',
|
||||
data () {
|
||||
return {
|
||||
tabIndex: [0, 0],
|
||||
tabs: [
|
||||
'Calculator',
|
||||
'Shopping cart',
|
||||
|
||||
Reference in New Issue
Block a user