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

refactor: change v-model to .sync modifier, other small changes

Browse Source
This commit is contained in:
woothu
2019-04-04 09:46:15 +02:00
parent 53a9f470e5
commit d5a0511652
8 changed files with 124 additions and 109 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/containers/DefaultHeaderDropdownAccnt.vue
+1 -1
View File
@@ -6,7 +6,7 @@
noPopper
addMenuClasses="dropdown-menu-right"
>
<template #buttonContent>
<template #button-content>
<img
src="img/avatars/6.jpg"
class="img-avatar"
src/views/Dashboard.vue
+1 -1
View File
@@ -55,7 +55,7 @@
</CRow>
</CCardFooter>
</CCard>
<Widgets04/>
<WidgetsSocial/>
<CRow>
<CCol md="12">
<CCard headerHtml="Traffic &amp; Sales" bodyWrapper>
src/views/base/Paginations.vue
+32 -14
View File
@@ -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>
src/views/base/Switches.vue
+6 -14
View File
@@ -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>
src/views/base/Table.vue
+1 -1
View File
@@ -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>
src/views/base/Tables.vue
+37 -37
View File
@@ -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>
src/views/base/Tabs.vue
-2
View File
@@ -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',
src/views/notifications/Modals.vue
+46 -39
View File
@@ -42,9 +42,9 @@
</CRow>
</div>
<!-- Modal Component -->
<CModal title="Modal title"
:visible="myModal"
@hide="myModal = false"
<CModal
title="Modal title"
:visible.sync="myModal"
>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
@@ -53,9 +53,10 @@
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</CModal>
<CModal title="Modal title"
size="lg"
v-model="largeModal"
<CModal
title="Modal title"
size="lg"
:visible.sync="largeModal"
>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
@@ -66,7 +67,7 @@
</CModal>
<CModal title="Modal title"
size="sm"
v-model="smallModal"
:visible.sync="smallModal"
>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
@@ -76,9 +77,10 @@
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</CModal>
<CModal title="Modal title"
class="modal-primary"
v-model="primaryModal"
<CModal
title="Modal title"
class="modal-primary"
:visible.sync="primaryModal"
>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
@@ -87,9 +89,10 @@
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</CModal>
<CModal title="Modal title"
class="modal-success"
v-model="successModal"
<CModal
title="Modal title"
class="modal-success"
:visible.sync="successModal"
>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
@@ -98,9 +101,10 @@
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</CModal>
<CModal title="Modal title"
class="modal-warning"
v-model="warningModal"
<CModal
title="Modal title"
class="modal-warning"
:visible.sync="warningModal"
>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
@@ -109,9 +113,10 @@
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</CModal>
<CModal title="Modal title"
class="modal-danger"
v-model="dangerModal"
<CModal
title="Modal title"
class="modal-danger"
:visible.sync="dangerModal"
>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
@@ -120,9 +125,10 @@
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</CModal>
<CModal title="Modal title"
class="modal-info"
v-model="infoModal"
<CModal
title="Modal title"
class="modal-info"
:visible.sync="infoModal"
>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
@@ -131,21 +137,22 @@
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</CModal>
<CModal v-model="darkModal"
:noBackdrop="false"
:noCloseOnBackdrop="false"
:noFade="false"
:centered="true"
title="Modal title 2"
size="lg"
variant="dark"
borderVariant="danger2"
addModalClasses="hehe1"
addDialogClasses="hehe2"
addContentClasses="hehe3"
:noHeader="false"
:noBody="false"
:noFooter="false"
<CModal
:visible.sync="darkModal"
:noBackdrop="false"
:noCloseOnBackdrop="false"
:noFade="false"
:centered="true"
title="Modal title 2"
size="lg"
variant="dark"
borderVariant="danger2"
addModalClasses="hehe1"
addDialogClasses="hehe2"
addContentClasses="hehe3"
:noHeader="false"
:noBody="false"
:noFooter="false"
>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
@@ -153,11 +160,11 @@
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.
<template v-slot:header="{hide}">
<template #header="{hide}">
<h5 class="modal-title">Custom modal title</h5>
<CButtonClose @click="hide()" class="text-white"/>
</template>
<template v-slot:footer="{hide}">
<template #footer="{hide}">
<CButton @click="hide()" variant="danger">Discard</CButton>
<CButton @click="hide()" variant="success">Accept</CButton>
</template>