update code
This commit is contained in:
manhlab
121
resources/js/src/views/Dashboard.vue
Normal file
121
resources/js/src/views/Dashboard.vue
Normal file
@@ -0,0 +1,121 @@
|
||||
<template>
|
||||
<div>
|
||||
<CRow>
|
||||
<CCol v-for="book in books" sm="6" md="4" :key="book.id">
|
||||
<CWidgetBrand
|
||||
color="white"
|
||||
:right-header="''+book.unread"
|
||||
right-footer="Chưa xem"
|
||||
:left-header="''+book.count"
|
||||
left-footer="Đã nhận"
|
||||
>
|
||||
<h3 style="color:#3c4b64" class="m-3">{{book.name}}</h3>
|
||||
</CWidgetBrand>
|
||||
</CCol>
|
||||
</CRow>
|
||||
<CRow>
|
||||
<CCol col="12">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<CIcon name="cil-grid" /> Văn bản gần đây
|
||||
</CCardHeader>
|
||||
<CCardBody class="p-0">
|
||||
<CDataTable
|
||||
hover
|
||||
striped
|
||||
:loading="loading"
|
||||
:items="items"
|
||||
:fields="fields"
|
||||
clickable-rows
|
||||
@row-clicked="rowClicked"
|
||||
>
|
||||
<template #type="{item}">
|
||||
<td>{{item.type.name}}</td>
|
||||
</template>
|
||||
<template #book="{item}">
|
||||
<td>{{item.book.name}}</td>
|
||||
</template>
|
||||
<template #abstract="{item}">
|
||||
<td>
|
||||
<label :class="!item.seen ? highlightStyle : ''">{{item.abstract}}</label>
|
||||
</td>
|
||||
</template>
|
||||
</CDataTable>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import services from "../services/factory";
|
||||
|
||||
export default {
|
||||
name: "Dashboard",
|
||||
data() {
|
||||
return {
|
||||
books: [],
|
||||
loading: true,
|
||||
items: null,
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.init();
|
||||
},
|
||||
computed: {
|
||||
query() {
|
||||
return {
|
||||
...this.withQuery,
|
||||
...this.orderQuery,
|
||||
};
|
||||
},
|
||||
withQuery() {
|
||||
return {
|
||||
with: "book;type",
|
||||
};
|
||||
},
|
||||
orderQuery() {
|
||||
return {
|
||||
orderBy: "updated_at",
|
||||
sortedBy: "desc",
|
||||
};
|
||||
},
|
||||
fields() {
|
||||
return [
|
||||
{ key: "symbol", label: "Số ký hiệu" },
|
||||
{
|
||||
key: "abstract",
|
||||
label: "Trích yếu",
|
||||
_classes: "w-50 font-weight-bold",
|
||||
},
|
||||
{ key: "type", label: "Loại" },
|
||||
{ key: "book", label: "Sổ" },
|
||||
];
|
||||
},
|
||||
highlightStyle() {
|
||||
return "font-weight-bold";
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
init() {
|
||||
this.fetchBooks();
|
||||
this.fetchDocuments();
|
||||
},
|
||||
async fetchBooks() {
|
||||
const bookResponse = await services.book.all();
|
||||
this.books = bookResponse.data;
|
||||
return bookResponse;
|
||||
},
|
||||
async fetchDocuments() {
|
||||
this.loading = true;
|
||||
const response = await services.document.all(this.query);
|
||||
this.items = response.data.data;
|
||||
this.loading = false;
|
||||
},
|
||||
rowClicked(item, index) {
|
||||
this.$router.push({ path: `/documents/${item.id}` });
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
96
resources/js/src/views/base/Breadcrumbs.vue
Normal file
96
resources/js/src/views/base/Breadcrumbs.vue
Normal file
@@ -0,0 +1,96 @@
|
||||
<template>
|
||||
<CRow>
|
||||
<CCol col>
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<CIcon name="cil-justify-center"/><strong> Bootstrap Breadcrumb</strong>
|
||||
<div class="card-header-actions">
|
||||
<a
|
||||
href="https://coreui.io/vue/docs/components/breadcrumb"
|
||||
class="card-header-action"
|
||||
rel="noreferrer noopener"
|
||||
target="_blank"
|
||||
>
|
||||
<small class="text-muted">docs</small>
|
||||
</a>
|
||||
</div>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CBreadcrumb :items="items"/>
|
||||
<CBreadcrumb :items="items2"/>
|
||||
<CBreadcrumb :items="items3"/>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'Breadcrumbs',
|
||||
data () {
|
||||
return {
|
||||
items: [
|
||||
{
|
||||
text: 'Admin',
|
||||
href: '#'
|
||||
},
|
||||
{
|
||||
text: 'Manage',
|
||||
href: '#'
|
||||
},
|
||||
{
|
||||
text: 'Library'
|
||||
}
|
||||
],
|
||||
|
||||
|
||||
items2: [
|
||||
{
|
||||
text: 'Go to dashboard',
|
||||
to: '/dashboard'
|
||||
},
|
||||
{
|
||||
text: 'Go to widgets',
|
||||
to: '/Widgets'
|
||||
},
|
||||
{
|
||||
text: 'Go to Google',
|
||||
href: 'http://google.com'
|
||||
},
|
||||
{
|
||||
text: 'Current page'
|
||||
}
|
||||
],
|
||||
|
||||
|
||||
items3: [
|
||||
{
|
||||
text: 'Added',
|
||||
to: '#2',
|
||||
addClasses: 'font-xl'
|
||||
},
|
||||
{
|
||||
text: 'Custom',
|
||||
to: '#3',
|
||||
addClasses: 'font-xl'
|
||||
},
|
||||
{
|
||||
text: 'Classes',
|
||||
to: '#4',
|
||||
addClasses: 'font-xl text-danger'
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.breadcrumb-item + .font-xl.breadcrumb-item::before {
|
||||
color: rgb(140, 195, 38);
|
||||
content: '>>';
|
||||
padding: 0px 10px;
|
||||
|
||||
}
|
||||
</style>
|
||||
289
resources/js/src/views/base/Cards.vue
Normal file
289
resources/js/src/views/base/Cards.vue
Normal file
@@ -0,0 +1,289 @@
|
||||
<template>
|
||||
<div>
|
||||
<CRow>
|
||||
<CCol sm="6" md="4">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
Card title
|
||||
<div class="card-header-actions">
|
||||
<a
|
||||
href="https://coreui.io/vue/docs/components/card-components"
|
||||
class="card-header-action"
|
||||
rel="noreferrer noopener"
|
||||
target="_blank"
|
||||
>
|
||||
<small class="text-muted">docs</small>
|
||||
</a>
|
||||
</div>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
{{loremIpsum}}
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol sm="6" md="4">
|
||||
<CCard>
|
||||
<CCardBody>{{loremIpsum}}</CCardBody>
|
||||
<CCardFooter>Card Footer</CCardFooter>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol sm="6" md="4">
|
||||
<CCard>
|
||||
<CCardHeader><CIcon name="cil-check"/> Card with icon</CCardHeader>
|
||||
<CCardBody>{{loremIpsum}}</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol sm="6" md="4">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
Card with switch
|
||||
<CSwitch
|
||||
class="float-right"
|
||||
size="sm"
|
||||
shape="pill"
|
||||
color="info"
|
||||
data-on="On"
|
||||
data-off="Off"
|
||||
:checked="true"
|
||||
/>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
{{loremIpsum}}
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol sm="6" md="4">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
Card with label
|
||||
<CBadge color="success" class="float-right">Success</CBadge>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
{{loremIpsum}}
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol sm="6" md="4">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
Card with label
|
||||
<CBadge shape="pill" color="danger" class="float-right">42</CBadge>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
{{loremIpsum}}
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
<CRow>
|
||||
<CCol sm="6" md="4">
|
||||
<CCard border-color="primary">
|
||||
<CCardHeader>Card outline primary</CCardHeader>
|
||||
<CCardBody>{{loremIpsum}}</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol sm="6" md="4">
|
||||
<CCard border-color="secondary">
|
||||
<CCardHeader>Card outline secondary</CCardHeader>
|
||||
<CCardBody>{{loremIpsum}}</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol sm="6" md="4">
|
||||
<CCard border-color="success">
|
||||
<CCardHeader>Card outline success</CCardHeader>
|
||||
<CCardBody>{{loremIpsum}}</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol sm="6" md="4">
|
||||
<CCard border-color="info">
|
||||
<CCardHeader>Card outline info</CCardHeader>
|
||||
<CCardBody>{{loremIpsum}}</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol sm="6" md="4">
|
||||
<CCard border-color="warning">
|
||||
<CCardHeader>Card outline warning</CCardHeader>
|
||||
<CCardBody>{{loremIpsum}}</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol sm="6" md="4">
|
||||
<CCard border-color="danger">
|
||||
<CCardHeader>Card outline danger</CCardHeader>
|
||||
<CCardBody>{{loremIpsum}}</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
|
||||
<CRow>
|
||||
<CCol sm="6" md="4">
|
||||
<CCard accent-color="primary">
|
||||
<CCardHeader>Card with primary accent</CCardHeader>
|
||||
<CCardBody>{{loremIpsum}}</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol sm="6" md="4">
|
||||
<CCard accent-color="secondary">
|
||||
<CCardHeader>Card with secondary accent</CCardHeader>
|
||||
<CCardBody>{{loremIpsum}}</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol sm="6" md="4">
|
||||
<CCard accent-color="success">
|
||||
<CCardHeader>Card with success accent</CCardHeader>
|
||||
<CCardBody>{{loremIpsum}}</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol sm="6" md="4">
|
||||
<CCard accent-color="info">
|
||||
<CCardHeader>Card with info accent</CCardHeader>
|
||||
<CCardBody>{{loremIpsum}}</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol sm="6" md="4">
|
||||
<CCard accent-color="info">
|
||||
<CCardHeader>Card with info accent</CCardHeader>
|
||||
<CCardBody>{{loremIpsum}}</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol sm="6" md="4">
|
||||
<CCard accent-color="danger">
|
||||
<CCardHeader>Card with danger accent</CCardHeader>
|
||||
<CCardBody>{{loremIpsum}}</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
<CRow>
|
||||
<CCol sm="6" md="4">
|
||||
<CCard color="primary" class="text-center" body-wrapper text-color="white">
|
||||
<blockquote class="card-blockquote">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
|
||||
<footer>Someone famous in
|
||||
<cite title="Source Title">Source Title</cite>
|
||||
</footer>
|
||||
</blockquote>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol sm="6" md="4">
|
||||
<CCard
|
||||
color="success"
|
||||
class="text-center"
|
||||
body-wrapper
|
||||
text-color="white"
|
||||
>
|
||||
<blockquote class="card-blockquote">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
|
||||
<footer>Someone famous in
|
||||
<cite title="Source Title">Source Title</cite>
|
||||
</footer>
|
||||
</blockquote>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol sm="6" md="4">
|
||||
<CCard color="info" class="text-center" body-wrapper text-color="white">
|
||||
<blockquote class="card-blockquote">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
|
||||
<footer>Someone famous in
|
||||
<cite title="Source Title">Source Title</cite>
|
||||
</footer>
|
||||
</blockquote>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol sm="6" md="4">
|
||||
<CCard color="warning" class="text-center" body-wrapper text-color="white">
|
||||
<blockquote class="card-blockquote">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
|
||||
<footer>Someone famous in
|
||||
<cite title="Source Title">Source Title</cite>
|
||||
</footer>
|
||||
</blockquote>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol sm="6" md="4">
|
||||
<CCard color="danger" class="text-center" body-wrapper text-color="white">
|
||||
<blockquote class="card-blockquote">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
|
||||
<footer>Someone famous in
|
||||
<cite title="Source Title">Source Title</cite>
|
||||
</footer>
|
||||
</blockquote>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol sm="6" md="4">
|
||||
<CCard color="secondary" class="text-center" body-wrapper>
|
||||
<blockquote class="card-blockquote">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
|
||||
<footer>Someone famous in
|
||||
<cite title="Source Title">Source Title</cite>
|
||||
</footer>
|
||||
</blockquote>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
<CRow>
|
||||
<CCol sm="6" md="4">
|
||||
<CCard color="primary" body-wrapper text-color="white">
|
||||
{{loremIpsum}}
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol sm="6" md="4">
|
||||
<CCard color="success" body-wrapper text-color="white">
|
||||
{{loremIpsum}}
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol sm="6" md="4">
|
||||
<CCard color="info" body-wrapper text-color="white">
|
||||
{{loremIpsum}}
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol sm="6" md="4">
|
||||
<CCard color="warning" body-wrapper text-color="white">
|
||||
{{loremIpsum}}
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol sm="6" md="4">
|
||||
<CCard color="danger" body-wrapper text-color="white">
|
||||
{{loremIpsum}}
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol sm="6" md="4">
|
||||
<transition name="fade">
|
||||
<CCard v-if="show" color="secondary">
|
||||
<CCardHeader>
|
||||
Card with header actions
|
||||
<div class="card-header-actions">
|
||||
<CLink href="#" class="card-header-action btn-setting">
|
||||
<CIcon name="cil-settings"/>
|
||||
</CLink>
|
||||
<CLink class="card-header-action btn-minimize" @click="isCollapsed = !isCollapsed">
|
||||
<CIcon :name="`cil-chevron-${isCollapsed ? 'bottom' : 'top'}`"/>
|
||||
</CLink>
|
||||
<CLink href="#" class="card-header-action btn-close" v-on:click="show = false">
|
||||
<CIcon name="cil-x-circle"/>
|
||||
</CLink>
|
||||
</div>
|
||||
</CCardHeader>
|
||||
<CCollapse :show="isCollapsed" :duration="400">
|
||||
<CCardBody>
|
||||
{{loremIpsum}}
|
||||
</CCardBody>
|
||||
</CCollapse>
|
||||
</CCard>
|
||||
</transition>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
name: 'Cards',
|
||||
data: function () {
|
||||
return {
|
||||
show: true,
|
||||
isCollapsed: true,
|
||||
loremIpsum: '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.'
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
50
resources/js/src/views/base/Carousels.vue
Normal file
50
resources/js/src/views/base/Carousels.vue
Normal file
@@ -0,0 +1,50 @@
|
||||
<template>
|
||||
<CRow>
|
||||
<CCol md="12" lg="7">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<CIcon name="cil-justify-center"/>
|
||||
<strong> Bootstrap Carousel</strong>
|
||||
<div class="card-header-actions">
|
||||
<a
|
||||
href="https://coreui.io/vue/docs/components/carousel"
|
||||
class="card-header-action"
|
||||
rel="noreferrer noopener"
|
||||
target="_blank"
|
||||
>
|
||||
<small class="text-muted">docs</small>
|
||||
</a>
|
||||
</div>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CCarousel
|
||||
arrows
|
||||
indicators
|
||||
animate
|
||||
height="400px"
|
||||
>
|
||||
<CCarouselItem
|
||||
captionHeader="First Slide"
|
||||
image="https://picsum.photos/1024/480/?image=52"
|
||||
captionText="Nulla vitae elit libero, a pharetra augue mollis interdum."
|
||||
/>
|
||||
<CCarouselItem
|
||||
captionHeader="Blank page"
|
||||
:image="{ placeholderColor: 'grey' }"
|
||||
captionText="Nulla vitae elit libero, a pharetra augue mollis interdum."
|
||||
/>
|
||||
<CCarouselItem
|
||||
image="https://picsum.photos/1024/480/?image=54"
|
||||
/>
|
||||
</CCarousel>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'Carousels'
|
||||
}
|
||||
</script>
|
||||
80
resources/js/src/views/base/Collapses.vue
Normal file
80
resources/js/src/views/base/Collapses.vue
Normal file
@@ -0,0 +1,80 @@
|
||||
<template>
|
||||
<CRow>
|
||||
<CCol col="12" md="6">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<CIcon name="cil-justify-center"/>
|
||||
<strong> Bootstrap Collapse </strong>
|
||||
<div class="card-header-actions">
|
||||
<a
|
||||
href="https://coreui.io/vue/docs/components/collapse"
|
||||
class="card-header-action"
|
||||
rel="noreferrer noopener"
|
||||
target="_blank"
|
||||
>
|
||||
<small class="text-muted">docs</small>
|
||||
</a>
|
||||
</div>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CButton @click="collapse = !collapse" color="primary" class="mb-2">
|
||||
Toggle Collapse
|
||||
</CButton>
|
||||
<CCollapse :show="collapse" :duration="400">
|
||||
<CCard body-wrapper>
|
||||
<CCardText>Collapse contents Here</CCardText>
|
||||
<CButton
|
||||
@click="innerCollapse = !innerCollapse"
|
||||
size="sm"
|
||||
color="secondary"
|
||||
>
|
||||
Toggle Inner Collapse
|
||||
</CButton>
|
||||
<CCollapse :show="innerCollapse" class="mt-2">
|
||||
<CCard body-wrapper>Hello!</CCard>
|
||||
</CCollapse>
|
||||
</CCard>
|
||||
</CCollapse>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol col="12" md="6">
|
||||
<CCard>
|
||||
<CCardHeader
|
||||
@click="cardCollapse = !cardCollapse"
|
||||
class="btn text-left"
|
||||
>
|
||||
<strong>Collapsible card</strong>
|
||||
</CCardHeader>
|
||||
<CCollapse :show="cardCollapse">
|
||||
<CCardBody class="m-1">
|
||||
{{text}}
|
||||
</CCardBody>
|
||||
</CCollapse>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'Collapses',
|
||||
data () {
|
||||
return {
|
||||
collapse: false,
|
||||
cardCollapse: true,
|
||||
innerCollapse: false,
|
||||
text: `
|
||||
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry
|
||||
richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor
|
||||
brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon
|
||||
tempor, sunt aliqua put a bird on it squid single-origin coffee nulla
|
||||
assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore
|
||||
wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher
|
||||
vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic
|
||||
synth nesciunt you probably haven't heard of them accusamus labore VHS.
|
||||
`
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
881
resources/js/src/views/base/Forms.vue
Normal file
881
resources/js/src/views/base/Forms.vue
Normal file
@@ -0,0 +1,881 @@
|
||||
<template>
|
||||
<div>
|
||||
<CRow>
|
||||
<CCol sm="6">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<strong>Credit Card </strong> <small>Form</small>
|
||||
<div class="card-header-actions">
|
||||
<a
|
||||
href="https://coreui.io/vue/docs/components/form-components"
|
||||
class="card-header-action"
|
||||
rel="noreferrer noopener"
|
||||
target="_blank"
|
||||
>
|
||||
<small class="text-muted">docs</small>
|
||||
</a>
|
||||
</div>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CRow>
|
||||
<CCol sm="12">
|
||||
<CInput
|
||||
label="Name"
|
||||
placeholder="Enter your name"
|
||||
/>
|
||||
</CCol>
|
||||
</CRow>
|
||||
<CRow>
|
||||
<CCol sm="12">
|
||||
<CInput
|
||||
label="Credit Card Number"
|
||||
placeholder="0000 0000 0000 0000"
|
||||
/>
|
||||
</CCol>
|
||||
</CRow>
|
||||
<CRow>
|
||||
<CCol sm="4">
|
||||
<CSelect
|
||||
label="Month"
|
||||
:options="[1,2,3,4,5,6,7,8,9,10,11,12]"
|
||||
/>
|
||||
</CCol>
|
||||
<CCol sm="4">
|
||||
<CSelect
|
||||
label="Year"
|
||||
:options="[2014,2015,2016,2017,2018,2019,2020,2021,2022,2023,2024,2025]"
|
||||
/>
|
||||
</CCol>
|
||||
<CCol sm="4">
|
||||
<CInput
|
||||
label="CVV/CVC"
|
||||
placeholder="123"
|
||||
/>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol sm="6">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<strong>Company </strong><small>Form</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CInput
|
||||
label="Company"
|
||||
placeholder="Enter your company name"
|
||||
/>
|
||||
<CInput
|
||||
label="VAT"
|
||||
placeholder="PL1234567890"
|
||||
/>
|
||||
<CInput
|
||||
label="Street"
|
||||
placeholder="Enter street name"
|
||||
/>
|
||||
<CRow>
|
||||
<CCol sm="8">
|
||||
<CInput
|
||||
label="City"
|
||||
placeholder="Enter your city"
|
||||
/>
|
||||
</CCol>
|
||||
<CCol sm="4">
|
||||
<CInput
|
||||
label="Postal code"
|
||||
placeholder="Postal code"
|
||||
/>
|
||||
</CCol>
|
||||
</CRow>
|
||||
<CInput
|
||||
label="Country"
|
||||
placeholder="Country name"
|
||||
/>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
<CRow>
|
||||
<CCol md="6">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<strong>Basic Form</strong> Elements
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CForm>
|
||||
<CInput
|
||||
description="Let us know your full name."
|
||||
label="Enter your name"
|
||||
horizontal
|
||||
autocomplete="name"
|
||||
/>
|
||||
<CInput
|
||||
label="Static"
|
||||
value="Username"
|
||||
horizontal
|
||||
plaintext
|
||||
/>
|
||||
<CInput
|
||||
label="Text input"
|
||||
description="This is a help text"
|
||||
placeholder="Text"
|
||||
horizontal
|
||||
/>
|
||||
<CInput
|
||||
label="Date"
|
||||
type="date"
|
||||
horizontal
|
||||
/>
|
||||
<CInput
|
||||
label="Email input"
|
||||
description="Please enter your email"
|
||||
placeholder="Enter your email"
|
||||
type="email"
|
||||
horizontal
|
||||
autocomplete="email"
|
||||
/>
|
||||
<CInput
|
||||
label="Password Input"
|
||||
description="Please enter a complex password"
|
||||
placeholder="Enter your password"
|
||||
type="password"
|
||||
horizontal
|
||||
autocomplete="current-password"
|
||||
/>
|
||||
<CInput
|
||||
label="Disabled Input"
|
||||
placeholder="Disabled"
|
||||
horizontal
|
||||
disabled
|
||||
/>
|
||||
<CTextarea
|
||||
label="Textarea"
|
||||
placeholder="Content..."
|
||||
horizontal
|
||||
rows="9"
|
||||
/>
|
||||
<CSelect
|
||||
label="Select"
|
||||
horizontal
|
||||
:options="options"
|
||||
placeholder="Please select"
|
||||
/>
|
||||
<CSelect
|
||||
label="Large select"
|
||||
size="lg"
|
||||
horizontal
|
||||
:value.sync="selectedOption"
|
||||
:options="selectOptions"
|
||||
placeholder="Please select"
|
||||
/>
|
||||
<CSelect
|
||||
label="Small select"
|
||||
size="sm"
|
||||
horizontal
|
||||
:options="options"
|
||||
placeholder="Please select"
|
||||
/>
|
||||
<CSelect
|
||||
label="Select"
|
||||
horizontal
|
||||
:options="options"
|
||||
placeholder="Please select"
|
||||
disabled
|
||||
/>
|
||||
<template v-for="(name, key) in checkboxNames">
|
||||
<CRow form class="form-group" :key="name">
|
||||
<CCol tag="label" sm="3" class="col-form-label">
|
||||
{{name}}
|
||||
</CCol>
|
||||
<CCol sm="9" :class="key % 2 === 1 ? 'form-inline' : ''">
|
||||
<CInputCheckbox
|
||||
v-for="(option, optionIndex) in options"
|
||||
:key="key + option"
|
||||
:label="option"
|
||||
:value="option"
|
||||
:custom="key > 1"
|
||||
:name="`Option 1${key}`"
|
||||
:checked="optionIndex === key"
|
||||
:inline="key % 2 === 1"
|
||||
/>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</template>
|
||||
<template v-for="(name, key) in radioNames">
|
||||
<CRow form class="form-group" :key="name">
|
||||
<CCol sm="3">
|
||||
{{name}}
|
||||
</CCol>
|
||||
<CInputRadioGroup
|
||||
class="col-sm-9"
|
||||
:options="options"
|
||||
:custom="key > 1"
|
||||
:checked="`Option ${key}`"
|
||||
:inline="key % 2 === 1"
|
||||
/>
|
||||
</CRow>
|
||||
</template>
|
||||
<CInputFile
|
||||
label="File input"
|
||||
horizontal
|
||||
/>
|
||||
<CInputFile
|
||||
label="Multiple file input"
|
||||
horizontal
|
||||
multiple
|
||||
/>
|
||||
<CInputFile
|
||||
label="File custom input"
|
||||
horizontal
|
||||
custom
|
||||
/>
|
||||
<CInputFile
|
||||
label="Multiple file custom input"
|
||||
horizontal
|
||||
multiple
|
||||
custom
|
||||
/>
|
||||
</CForm>
|
||||
</CCardBody>
|
||||
<CCardFooter>
|
||||
<CButton type="submit" size="sm" color="primary"><CIcon name="cil-check-circle"/> Submit</CButton>
|
||||
<CButton type="reset" size="sm" color="danger"><CIcon name="cil-ban"/> Reset</CButton>
|
||||
</CCardFooter>
|
||||
</CCard>
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<strong>Inline</strong> Form
|
||||
</CCardHeader>
|
||||
|
||||
<CCardBody>
|
||||
<!-- Bootstrap Vue has some problems with Inline forms that's why we use some standard bootstrap classes -->
|
||||
<CForm inline>
|
||||
<CInput
|
||||
class="mr-2"
|
||||
placeholder="Jane Doe"
|
||||
>
|
||||
<template #label>
|
||||
<small>Name: </small>
|
||||
</template>
|
||||
</CInput>
|
||||
<CInput
|
||||
placeholder="jane.doe@example.com"
|
||||
autocomplete="email"
|
||||
>
|
||||
<template #label>
|
||||
<small>Email: </small>
|
||||
</template>
|
||||
</CInput>
|
||||
</CForm>
|
||||
</CCardBody>
|
||||
<CCardFooter>
|
||||
<CButton type="submit" size="sm" color="primary"><CIcon name="cil-check-circle"/> Submit</CButton>
|
||||
<CButton type="reset" size="sm" color="danger"><CIcon name="cil-ban"/> Reset</CButton>
|
||||
</CCardFooter>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol md="6">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<strong>Horizontal</strong> Form
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CForm>
|
||||
<CInput
|
||||
type="email"
|
||||
description="Please enter your email."
|
||||
autocomplete="email"
|
||||
label="Email"
|
||||
horizontal
|
||||
placeholder="Enter Email..."
|
||||
/>
|
||||
<CInput
|
||||
type="password"
|
||||
description="Please enter your password."
|
||||
autocomplete="current-password"
|
||||
label="Password"
|
||||
horizontal
|
||||
placeholder="Enter Password..."
|
||||
/>
|
||||
</CForm>
|
||||
</CCardBody>
|
||||
<CCardFooter>
|
||||
<CButton type="submit" size="sm" color="primary"><CIcon name="cil-check-circle"/> Submit</CButton>
|
||||
<CButton type="reset" size="sm" color="danger"><CIcon name="cil-ban"/> Reset</CButton>
|
||||
</CCardFooter>
|
||||
</CCard>
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<strong>Normal</strong> Form
|
||||
</CCardHeader>
|
||||
<CForm novalidate>
|
||||
<CCardBody>
|
||||
<CInput
|
||||
type="email"
|
||||
description="Please enter your email."
|
||||
autocomplete="email"
|
||||
label="Email"
|
||||
placeholder="Enter Email..."
|
||||
required
|
||||
was-validated
|
||||
/>
|
||||
<CInput
|
||||
type="password"
|
||||
description="Please enter your password."
|
||||
autocomplete="current-password"
|
||||
label="Password"
|
||||
placeholder="Enter Password..."
|
||||
required
|
||||
was-validated
|
||||
/>
|
||||
</CCardBody>
|
||||
<CCardFooter>
|
||||
<CButton type="submit" size="sm" color="primary"><CIcon name="cil-check-circle"/> Submit</CButton>
|
||||
<CButton type="reset" size="sm" color="danger"><CIcon name="cil-ban"/> Reset</CButton>
|
||||
</CCardFooter>
|
||||
</CForm>
|
||||
</CCard>
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
Input <strong>Grid</strong>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CRow class="form-group">
|
||||
<CCol sm="3">
|
||||
<CInput class="mb-0" placeholder=".col-sm-3"/>
|
||||
</CCol>
|
||||
</CRow>
|
||||
<CRow class="form-group">
|
||||
<CCol sm="4">
|
||||
<CInput class="mb-0" placeholder=".col-sm-4"/>
|
||||
</CCol>
|
||||
</CRow>
|
||||
<CRow class="form-group">
|
||||
<CCol sm="5">
|
||||
<CInput class="mb-0" placeholder=".col-sm-5"/>
|
||||
</CCol>
|
||||
</CRow>
|
||||
<CRow class="form-group">
|
||||
<CCol sm="6">
|
||||
<CInput class="mb-0" placeholder=".col-sm-6"/>
|
||||
</CCol>
|
||||
</CRow>
|
||||
<CRow class="form-group">
|
||||
<CCol sm="7">
|
||||
<CInput class="mb-0" placeholder=".col-sm-7"/>
|
||||
</CCol>
|
||||
</CRow>
|
||||
<CRow class="form-group">
|
||||
<CCol sm="8">
|
||||
<CInput class="mb-0" placeholder=".col-sm-8"/>
|
||||
</CCol>
|
||||
</CRow>
|
||||
<CRow class="form-group">
|
||||
<CCol sm="9">
|
||||
<CInput class="mb-0" placeholder=".col-sm-9"/>
|
||||
</CCol>
|
||||
</CRow>
|
||||
<CRow class="form-group">
|
||||
<CCol sm="10">
|
||||
<CInput class="mb-0" placeholder=".col-sm-10"/>
|
||||
</CCol>
|
||||
</CRow>
|
||||
<CRow class="form-group">
|
||||
<CCol sm="11">
|
||||
<CInput class="mb-0" placeholder=".col-sm-11"/>
|
||||
</CCol>
|
||||
</CRow>
|
||||
<CRow class="form-group">
|
||||
<CCol sm="12">
|
||||
<CInput class="mb-0" placeholder=".col-sm-12"/>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</CCardBody>
|
||||
<CCardFooter>
|
||||
<CButton type="submit" size="sm" color="primary"><CIcon name="cil-user"/> Login</CButton>
|
||||
<CButton type="reset" size="sm" color="danger"><CIcon name="cil-ban"/> Reset</CButton>
|
||||
</CCardFooter>
|
||||
</CCard>
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
Input <strong>Sizes</strong>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CInput
|
||||
label="Small input"
|
||||
size="sm"
|
||||
horizontal
|
||||
placeholder="size='sm'"
|
||||
/>
|
||||
<CInput
|
||||
label="Default input"
|
||||
horizontal
|
||||
placeholder="normal"
|
||||
/>
|
||||
<CInput
|
||||
label="Large input"
|
||||
size="lg"
|
||||
horizontal
|
||||
placeholder="size='lg'"
|
||||
/>
|
||||
</CCardBody>
|
||||
<CCardFooter>
|
||||
<CButton type="submit" size="sm" color="primary"><CIcon name="cil-check-circle"/> Submit</CButton>
|
||||
<CButton type="reset" size="sm" color="danger"><CIcon name="cil-ban"/> Reset</CButton>
|
||||
</CCardFooter>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
<CRow>
|
||||
|
||||
<CCol sm="12" md="6">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<strong>Basic Validation</strong> Form
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CForm validated novalidate>
|
||||
<CInput
|
||||
label="Input is valid"
|
||||
valid-feedback="Input is not required."
|
||||
/>
|
||||
<CInput
|
||||
label="Input is invalid"
|
||||
required
|
||||
valid-feedback="Thank you :)"
|
||||
invalid-feedback="Please provide a required input."
|
||||
/>
|
||||
</CForm>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol sm="12" md="6">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<strong>Custom Validation</strong> Form
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CForm>
|
||||
<CInput
|
||||
label="Input is valid"
|
||||
valid-feedback="Input is valid."
|
||||
invalid-feedback="Please provide at least 4 characters."
|
||||
value="Valid value"
|
||||
:is-valid="validator"
|
||||
/>
|
||||
<CInput
|
||||
label="Input is invalid"
|
||||
valid-feedback="Thank you :)"
|
||||
invalid-feedback="Please provide at least 4 characters."
|
||||
:is-valid="validator"
|
||||
/>
|
||||
</CForm>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
<CRow>
|
||||
<CCol sm="4">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<strong>Icon/Text</strong> Groups
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CInput placeholder="Username">
|
||||
<template #prepend-content><CIcon name="cil-user"/></template>
|
||||
</CInput>
|
||||
<CInput
|
||||
type="email"
|
||||
placeholder="Email"
|
||||
autocomplete="email"
|
||||
>
|
||||
<template #append-content><CIcon name="cil-envelope-open"/></template>
|
||||
</CInput>
|
||||
<CInput
|
||||
placeholder="ex. $1.000.000"
|
||||
append=".00"
|
||||
>
|
||||
<template #prepend-content><CIcon name="cil-euro"/></template>
|
||||
</CInput>
|
||||
</CCardBody>
|
||||
<CCardFooter>
|
||||
<CButton type="submit" size="sm" color="success"><CIcon name="cil-check-circle"/> Submit</CButton>
|
||||
<CButton type="reset" size="sm" color="danger"><CIcon name="cil-ban"/> Reset</CButton>
|
||||
</CCardFooter>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol sm="4">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<strong>Buttons</strong> Groups
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CInput placeholder="Username">
|
||||
<template #prepend>
|
||||
<CButton color="primary">
|
||||
<CIcon name="cil-magnifying-glass"/> Search
|
||||
</CButton>
|
||||
</template>
|
||||
</CInput>
|
||||
<CInput
|
||||
type="email"
|
||||
placeholder="Email"
|
||||
autocomplete="email"
|
||||
>
|
||||
<template #append>
|
||||
<CButton type="submit" color="primary">Submit</CButton>
|
||||
</template>
|
||||
</CInput>
|
||||
<CInput
|
||||
type="email"
|
||||
placeholder="Email"
|
||||
autocomplete="email"
|
||||
>
|
||||
<template #prepend>
|
||||
<CButton color="primary"><CIcon name="cib-facebook" height="14"/></CButton>
|
||||
</template>
|
||||
<template #append>
|
||||
<CButton color="primary"><CIcon name="cib-twitter" height="14"/></CButton>
|
||||
</template>
|
||||
</CInput>
|
||||
</CCardBody>
|
||||
<CCardFooter>
|
||||
<CButton type="submit" size="sm" color="success"><CIcon name="cil-check-circle"/> Submit</CButton>
|
||||
<CButton type="reset" size="sm" color="danger"><CIcon name="cil-ban"/> Reset</CButton>
|
||||
</CCardFooter>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol sm="4">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<strong>Dropdowns</strong> Groups
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CInput placeholder="Username">
|
||||
<template #prepend>
|
||||
<CDropdown
|
||||
togglerText="Action"
|
||||
color="primary"
|
||||
>
|
||||
<CDropdownItem>Action</CDropdownItem>
|
||||
<CDropdownItem>Another action</CDropdownItem>
|
||||
<CDropdownItem>Something else here...</CDropdownItem>
|
||||
<CDropdownItem disabled>Disabled action</CDropdownItem>
|
||||
</CDropdown>
|
||||
</template>
|
||||
</CInput>
|
||||
<CInput
|
||||
type="email"
|
||||
placeholder="Email"
|
||||
autocomplete="email"
|
||||
>
|
||||
<template #append>
|
||||
<CDropdown
|
||||
togglerText="Action"
|
||||
color="primary"
|
||||
right
|
||||
>
|
||||
<CDropdownItem>Action</CDropdownItem>
|
||||
<CDropdownItem>Another action</CDropdownItem>
|
||||
<CDropdownItem>Something else here...</CDropdownItem>
|
||||
<CDropdownItem disabled>Disabled action</CDropdownItem>
|
||||
</CDropdown>
|
||||
</template>
|
||||
</CInput>
|
||||
<CInput placeholder="...">
|
||||
|
||||
<template #prepend>
|
||||
<CDropdown
|
||||
togglerText="Split"
|
||||
color="primary"
|
||||
split
|
||||
>
|
||||
<CDropdownItem href="#">Action</CDropdownItem>
|
||||
<CDropdownItem href="#">Another action</CDropdownItem>
|
||||
<CDropdownItem href="#">Something else here...</CDropdownItem>
|
||||
<CDropdownItem disabled>Disabled action</CDropdownItem>
|
||||
</CDropdown>
|
||||
</template>
|
||||
|
||||
<template #append>
|
||||
<CDropdown
|
||||
togglerText="Action"
|
||||
color="primary"
|
||||
right
|
||||
>
|
||||
<CDropdownItem>Action</CDropdownItem>
|
||||
<CDropdownItem>Another action</CDropdownItem>
|
||||
<CDropdownItem>Something else here...</CDropdownItem>
|
||||
<CDropdownItem disabled>Disabled action</CDropdownItem>
|
||||
</CDropdown>
|
||||
</template>
|
||||
|
||||
</CInput>
|
||||
</CCardBody>
|
||||
<CCardFooter>
|
||||
<CButton type="submit" size="sm" color="success"><CIcon name="cil-check-circle"/> Submit</CButton>
|
||||
<CButton type="reset" size="sm" color="danger"><CIcon name="cil-ban"/> Reset</CButton>
|
||||
</CCardFooter>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
<CRow>
|
||||
<CCol md="6">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
Use the grid for big devices! <small><code>.col-lg-*</code> <code>.col-md-*</code> <code>.col-sm-*</code></small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CRow
|
||||
class="form-group"
|
||||
v-for="(number, key) in [4,5,6,7,8]"
|
||||
:key="key"
|
||||
>
|
||||
<CCol :col="12 - number">
|
||||
<CInput class="mb-0" :placeholder="`.col-md-${12 - number}`"/>
|
||||
</CCol>
|
||||
<CCol :col="number">
|
||||
<CInput class="mb-0" :placeholder="`.col-md-${number}`"/>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</CCardBody>
|
||||
<CCardFooter>
|
||||
<CButton size="sm" color="primary">Action</CButton>
|
||||
<CButton size="sm" color="danger">Action</CButton>
|
||||
<CButton size="sm" color="warning">Action</CButton>
|
||||
<CButton size="sm" color="info">Action</CButton>
|
||||
<CButton size="sm" color="success">Action</CButton>
|
||||
</CCardFooter>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol md="6">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
Input Grid for small devices! <small> <code>.col-*</code></small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CRow
|
||||
class="form-group"
|
||||
v-for="(number, key) in [4,5,6,7,8]"
|
||||
:key="key"
|
||||
>
|
||||
<CCol :col="number">
|
||||
<CInput class="mb-0" :placeholder="`.col-${number}`"/>
|
||||
</CCol>
|
||||
<CCol :col="12 - number">
|
||||
<CInput class="mb-0" :placeholder="`.col-${12 - number}`"/>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</CCardBody>
|
||||
<CCardFooter>
|
||||
<CButton size="sm" color="primary">Action</CButton>
|
||||
<CButton size="sm" color="danger">Action</CButton>
|
||||
<CButton size="sm" color="warning">Action</CButton>
|
||||
<CButton size="sm" color="info">Action</CButton>
|
||||
<CButton size="sm" color="success">Action</CButton>
|
||||
</CCardFooter>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
<CRow>
|
||||
<CCol sm="4">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
Example Form
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CForm>
|
||||
<CInput prepend="Username">
|
||||
<template #append-content><CIcon name="cil-user"/></template>
|
||||
</CInput>
|
||||
<CInput
|
||||
type="email"
|
||||
autocomplete="email"
|
||||
prepend="Email"
|
||||
>
|
||||
<template #append-content><CIcon name="cil-envelope-closed"/></template>
|
||||
</CInput>
|
||||
<CInput
|
||||
type="password"
|
||||
autocomplete="current-password"
|
||||
prepend="Password"
|
||||
>
|
||||
<template #append-content><CIcon name="cil-shield-alt"/></template>
|
||||
</CInput>
|
||||
<div class="form-group form-actions">
|
||||
<CButton type="submit" size="sm" color="primary">
|
||||
Submit
|
||||
</CButton>
|
||||
</div>
|
||||
</CForm>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol sm="4">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
Example Form
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CForm>
|
||||
<CInput placeholder="Username">
|
||||
<template #append-content><CIcon name="cil-user"/></template>
|
||||
</CInput>
|
||||
<CInput
|
||||
placeholder="Email"
|
||||
type="email"
|
||||
autocomplete="email"
|
||||
>
|
||||
<template #append-content><CIcon name="cil-envelope-closed"/></template>
|
||||
</CInput>
|
||||
<CInput
|
||||
placeholder="Password"
|
||||
type="password"
|
||||
autocomplete="current-password"
|
||||
>
|
||||
<template #append-content><CIcon name="cil-shield-alt"/></template>
|
||||
</CInput>
|
||||
<div class="form-group form-actions">
|
||||
<CButton type="submit" class="btn btn-sm btn-secondary">
|
||||
Submit
|
||||
</CButton>
|
||||
</div>
|
||||
</CForm>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol sm="4">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
Example Form
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CForm>
|
||||
<CInput placeholder="Username">
|
||||
<template #prepend-content><CIcon name="cil-user"/></template>
|
||||
</CInput>
|
||||
<CInput
|
||||
placeholder="Email"
|
||||
type="email"
|
||||
autocomplete="email"
|
||||
>
|
||||
<template #prepend-content><CIcon name="cil-envelope-closed"/></template>
|
||||
</CInput>
|
||||
<CInput
|
||||
placeholder="Password"
|
||||
type="password"
|
||||
autocomplete="current-password"
|
||||
>
|
||||
<template #prepend-content><CIcon name="cil-shield-alt"/></template>
|
||||
</CInput>
|
||||
<div class="form-group form-actions">
|
||||
<CButton type="submit" size="sm" color="success">
|
||||
Submit
|
||||
</CButton>
|
||||
</div>
|
||||
</CForm>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
<CRow>
|
||||
<CCol lg="12">
|
||||
<transition name="fade">
|
||||
<CCard v-if="show">
|
||||
<CCardHeader>
|
||||
<CIcon name="cil-pencil"/> Form Elements
|
||||
<div class="card-header-actions">
|
||||
<CLink href="#" class="card-header-action btn-setting">
|
||||
<CIcon name="cil-settings"/>
|
||||
</CLink>
|
||||
<CLink
|
||||
class="card-header-action btn-minimize"
|
||||
@click="formCollapsed=!formCollapsed"
|
||||
>
|
||||
<CIcon :name="`cil-chevron-${formCollapsed ? 'bottom' : 'top'}`"/>
|
||||
</CLink>
|
||||
<CLink href="#" class="card-header-action btn-close" v-on:click="show = !show">
|
||||
<CIcon name="cil-x-circle"/>
|
||||
</CLink>
|
||||
</div>
|
||||
</CCardHeader>
|
||||
<CCollapse :show="formCollapsed">
|
||||
<CCardBody>
|
||||
<CInput
|
||||
label="Prepended text"
|
||||
description="Here's some help text"
|
||||
type="email"
|
||||
autocomplete="email"
|
||||
prepend="@"
|
||||
/>
|
||||
<CInput
|
||||
label="Appended text"
|
||||
append=".00"
|
||||
description="Here's some help text"
|
||||
/>
|
||||
<CInput
|
||||
label="Appended and prepended text"
|
||||
append=".00"
|
||||
description="Here's some help text"
|
||||
prepend="$"
|
||||
/>
|
||||
<CInput
|
||||
label="Append with button"
|
||||
description="Here's some help text"
|
||||
>
|
||||
<template #append>
|
||||
<CButton color="primary">Go!</CButton>
|
||||
</template>
|
||||
</CInput>
|
||||
<CInput label="Two-buttons append">
|
||||
<template #append>
|
||||
<CButton color="primary">Search</CButton>
|
||||
<CButton color="danger">Options</CButton>
|
||||
</template>
|
||||
</CInput>
|
||||
<div class="form-actions">
|
||||
<CButton type="submit" color="primary">Save changes</CButton>
|
||||
<CButton color="secondary">Cancel</CButton>
|
||||
</div>
|
||||
</CCardBody>
|
||||
</CCollapse>
|
||||
</CCard>
|
||||
</transition>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'Forms',
|
||||
data () {
|
||||
return {
|
||||
selected: [], // Must be an array reference!
|
||||
show: true,
|
||||
horizontal: { label:'col-3', input:'col-9' },
|
||||
options: ['Option 1', 'Option 2', 'Option 3'],
|
||||
selectOptions: [
|
||||
'Option 1', 'Option 2', 'Option 3',
|
||||
{
|
||||
value: ['some value', 'another value'],
|
||||
label: 'Selected option'
|
||||
}
|
||||
],
|
||||
selectedOption: ['some value', 'another value'],
|
||||
|
||||
formCollapsed: true,
|
||||
checkboxNames: ['Checkboxes', 'Inline Checkboxes',
|
||||
'Checkboxes - custom', 'Inline Checkboxes - custom'],
|
||||
radioNames: ['Radios', 'Inline Radios',
|
||||
'Radios - custom', 'Inline Radios - custom']
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
validator (val) {
|
||||
return val ? val.length >= 4 : false
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
90
resources/js/src/views/base/Jumbotrons.vue
Normal file
90
resources/js/src/views/base/Jumbotrons.vue
Normal file
@@ -0,0 +1,90 @@
|
||||
<template>
|
||||
<div>
|
||||
<CRow>
|
||||
<CCol>
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<CIcon name="cil-justify-center"/>
|
||||
<strong> Bootstrap Jumbotron </strong>
|
||||
<div class="card-header-actions">
|
||||
<a
|
||||
href="https://coreui.io/vue/docs/components/jumbotron"
|
||||
class="card-header-action"
|
||||
rel="noreferrer noopener"
|
||||
target="_blank"
|
||||
>
|
||||
<small class="text-muted">docs</small>
|
||||
</a>
|
||||
</div>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CJumbotron>
|
||||
<h1 class="display-3">Bootstrap 4</h1>
|
||||
<p class="lead">Bootstrap 4 Components for Vue.js 2.6+</p>
|
||||
<p>For more information visit website</p>
|
||||
<CButton color="primary" href="#">More Info</CButton>
|
||||
</CJumbotron>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol>
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<CIcon name="cil-justify-center"/> <strong> Jumbotron </strong>
|
||||
<small>with slots</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CJumbotron header="Bootstrap 4" lead="">
|
||||
<h1 class="display-3">Bootstrap 4</h1>
|
||||
<p class="lead">
|
||||
This is a simple hero unit, a simple jumbotron-style component for
|
||||
calling extra attention to featured content or information.
|
||||
</p>
|
||||
<hr class="my-4">
|
||||
<p>
|
||||
It uses utility classes for typography and spacing to space content
|
||||
out within the larger container.
|
||||
</p>
|
||||
<CButton color="primary" href="#">Do Something</CButton>
|
||||
<CButton color="success" href="#">Do Something Else</CButton>
|
||||
</CJumbotron>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
<CRow>
|
||||
<CCol>
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<CIcon name="cil-justify-center"/> <strong> Jumbotron </strong>
|
||||
<small>colors</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CJumbotron
|
||||
color="info"
|
||||
text-color="white"
|
||||
border-color="dark"
|
||||
>
|
||||
<h1 class="display-3">Bootstrap 4</h1>
|
||||
<p class="lead">
|
||||
This is a simple hero unit, a simple jumbotron-style component for
|
||||
calling extra attention to featured content or information.
|
||||
</p>
|
||||
<hr class="my-4">
|
||||
<p>
|
||||
It uses utility classes for typography and spacing to space content
|
||||
out within the larger container.
|
||||
</p>
|
||||
</CJumbotron>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'Jumbotrons'
|
||||
}
|
||||
</script>
|
||||
285
resources/js/src/views/base/ListGroups.vue
Normal file
285
resources/js/src/views/base/ListGroups.vue
Normal file
@@ -0,0 +1,285 @@
|
||||
<template>
|
||||
<div>
|
||||
<CRow>
|
||||
<CCol md="6">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<CIcon name="cil-justify-center"/>
|
||||
<strong> Bootstrap list group </strong>
|
||||
<div class="card-header-actions">
|
||||
<a
|
||||
href="https://coreui.io/vue/docs/components/list-group"
|
||||
class="card-header-action"
|
||||
rel="noreferrer noopener"
|
||||
target="_blank"
|
||||
>
|
||||
<small class="text-muted">docs</small>
|
||||
</a>
|
||||
</div>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CListGroup>
|
||||
<CListGroupItem>Cras justo odio</CListGroupItem>
|
||||
<CListGroupItem>Dapibus ac facilisis in</CListGroupItem>
|
||||
<CListGroupItem>Morbi leo risus</CListGroupItem>
|
||||
<CListGroupItem>Porta ac consectetur ac</CListGroupItem>
|
||||
<CListGroupItem>Vestibulum at eros</CListGroupItem>
|
||||
</CListGroup>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol md="6">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<CIcon name="cil-justify-center"/><strong> List group </strong><small>active items</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CListGroup>
|
||||
<CListGroupItem>Cras justo odio</CListGroupItem>
|
||||
<CListGroupItem active>Dapibus ac facilisis in</CListGroupItem>
|
||||
<CListGroupItem>Morbi leo risus</CListGroupItem>
|
||||
<CListGroupItem>Porta ac consectetur ac</CListGroupItem>
|
||||
<CListGroupItem>Vestibulum at eros</CListGroupItem>
|
||||
</CListGroup>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
<CRow>
|
||||
<CCol md="6">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<CIcon name="cil-justify-center"/>
|
||||
<strong> List group </strong>
|
||||
<small>disabled items</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CListGroup>
|
||||
<CListGroupItem disabled>Cras justo odio</CListGroupItem>
|
||||
<CListGroupItem>Dapibus ac facilisis in</CListGroupItem>
|
||||
<CListGroupItem>Morbi leo risus</CListGroupItem>
|
||||
<CListGroupItem disabled>Porta ac consectetur ac</CListGroupItem>
|
||||
<CListGroupItem>Vestibulum at eros</CListGroupItem>
|
||||
</CListGroup>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol md="6">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<CIcon name="cil-justify-center"/>
|
||||
<strong> List group </strong>
|
||||
<small>actionable items</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CListGroup>
|
||||
<CListGroupItem href="#some-link">Awesome link</CListGroupItem>
|
||||
<CListGroupItem href="#" active>Link with active state</CListGroupItem>
|
||||
<CListGroupItem href="#">Action links are easy</CListGroupItem>
|
||||
<CListGroupItem href="#foobar" disabled>Disabled link</CListGroupItem>
|
||||
</CListGroup>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
<CRow>
|
||||
<CCol md="6">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<CIcon name="cil-justify-center"/>
|
||||
<strong> List group </strong>
|
||||
<small>buttons</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CListGroup>
|
||||
<CListGroupItem tag="button">Button item</CListGroupItem>
|
||||
<CListGroupItem tag="button">I am a button</CListGroupItem>
|
||||
<CListGroupItem tag="button" disabled>Disabled button</CListGroupItem>
|
||||
<CListGroupItem tag="button">This is a button too</CListGroupItem>
|
||||
</CListGroup>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol md="6">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<CIcon name="cil-justify-center"/>
|
||||
<strong> List group </strong>
|
||||
<small>with badges</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CListGroup>
|
||||
<CListGroupItem
|
||||
class="d-flex justify-content-between align-items-center"
|
||||
>
|
||||
Cras justo odio
|
||||
<CBadge color="primary" shape="pill">14</CBadge>
|
||||
</CListGroupItem>
|
||||
<CListGroupItem
|
||||
class="d-flex justify-content-between align-items-center"
|
||||
>
|
||||
Dapibus ac facilisis in
|
||||
<CBadge color="primary" shape="pill">2</CBadge>
|
||||
</CListGroupItem>
|
||||
<CListGroupItem
|
||||
class="d-flex justify-content-between align-items-center"
|
||||
>
|
||||
Morbi leo risus
|
||||
<CBadge color="primary" shape="pill">1</CBadge>
|
||||
</CListGroupItem>
|
||||
</CListGroup>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
<CRow>
|
||||
<CCol md="6">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<CIcon name="cil-justify-center"/>
|
||||
<strong> List group </strong>
|
||||
<small>colors</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CListGroup>
|
||||
<CListGroupItem>This is a default list group item</CListGroupItem>
|
||||
<CListGroupItem color="primary">This is a primary list group item</CListGroupItem>
|
||||
<CListGroupItem color="secondary">This is a secondary list group item</CListGroupItem>
|
||||
<CListGroupItem color="success">This is a success list group item</CListGroupItem>
|
||||
<CListGroupItem color="danger">This is a danger list group item</CListGroupItem>
|
||||
<CListGroupItem color="warning">This is a warning list group item</CListGroupItem>
|
||||
<CListGroupItem color="info">This is a info list group item</CListGroupItem>
|
||||
<CListGroupItem color="light">This is a light list group item</CListGroupItem>
|
||||
<CListGroupItem color="dark">This is a dark list group item</CListGroupItem>
|
||||
</CListGroup>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol md="6">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<CIcon name="cil-justify-center"/>
|
||||
<strong> List group </strong>
|
||||
<small>colors active</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CListGroup>
|
||||
<CListGroupItem href="#">This is a default list group item</CListGroupItem>
|
||||
<CListGroupItem href="#" color="primary">This is a primary list group item</CListGroupItem>
|
||||
<CListGroupItem href="#" color="secondary">This is a secondary list group item</CListGroupItem>
|
||||
<CListGroupItem href="#" color="success">This is a success list group item</CListGroupItem>
|
||||
<CListGroupItem href="#" color="danger">This is a danger list group item</CListGroupItem>
|
||||
<CListGroupItem href="#" color="warning">This is a warning list group item</CListGroupItem>
|
||||
<CListGroupItem href="#" color="info">This is a info list group item</CListGroupItem>
|
||||
<CListGroupItem href="#" color="light">This is a light list group item</CListGroupItem>
|
||||
<CListGroupItem href="#" color="dark">This is a dark list group item</CListGroupItem>
|
||||
</CListGroup>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
<CRow>
|
||||
<CCol col="12">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<CIcon name="cil-justify-center"/>
|
||||
<strong> List group </strong>
|
||||
<small>inside cards</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CCardGroup deck>
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<b>Card with list group</b>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CListGroup>
|
||||
<CListGroupItem href="#">Cras justo odio</CListGroupItem>
|
||||
<CListGroupItem href="#">Dapibus ac facilisis in</CListGroupItem>
|
||||
<CListGroupItem href="#">Vestibulum at eros</CListGroupItem>
|
||||
</CListGroup>
|
||||
<CCardText class="mt-2">
|
||||
Quis magna Lorem anim amet ipsum do mollit sit cillum voluptate ex
|
||||
nulla tempor. Laborum consequat non elit enim exercitation cillum aliqua
|
||||
consequat id aliqua. Esse ex consectetur mollit voluptate est in duis laboris
|
||||
ad sit ipsum anim Lorem.
|
||||
</CCardText>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
<CCard>
|
||||
<CCardHeader><b>Card with flush list group</b></CCardHeader>
|
||||
<CListGroup flush>
|
||||
<CListGroupItem href="#">Cras justo odio</CListGroupItem>
|
||||
<CListGroupItem href="#">Dapibus ac facilisis in</CListGroupItem>
|
||||
<CListGroupItem href="#">Vestibulum at eros</CListGroupItem>
|
||||
</CListGroup>
|
||||
<CCardBody>
|
||||
Quis magna Lorem anim amet ipsum do mollit sit cillum voluptate ex
|
||||
nulla tempor. Laborum consequat non elit enim exercitation cillum aliqua
|
||||
consequat id aliqua. Esse ex consectetur mollit voluptate est in duis laboris
|
||||
ad sit ipsum anim Lorem.
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCardGroup>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
<CRow>
|
||||
<CCol md="6">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<CIcon name="cil-justify-center"/><strong> List group </strong><small>custom content</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CListGroup>
|
||||
<CListGroupItem
|
||||
href="#"
|
||||
active
|
||||
class="flex-column align-items-start"
|
||||
>
|
||||
<div class="d-flex w-100 justify-content-between">
|
||||
<h5 class="mb-1">List group item heading</h5>
|
||||
<small>3 days ago</small>
|
||||
</div>
|
||||
<p class="mb-1">
|
||||
Donec id elit non mi porta gravida at eget metus. Maecenas
|
||||
sed diam eget risus varius blandit.
|
||||
</p>
|
||||
<small>Donec id elit non mi porta.</small>
|
||||
</CListGroupItem>
|
||||
<CListGroupItem href="#" class="flex-column align-items-start">
|
||||
<div class="d-flex w-100 justify-content-between">
|
||||
<h5 class="mb-1">List group item heading</h5>
|
||||
<small class="text-muted">3 days ago</small>
|
||||
</div>
|
||||
<p class="mb-1">
|
||||
Donec id elit non mi porta gravida at eget metus. Maecenas
|
||||
sed diam eget risus varius blandit.
|
||||
</p>
|
||||
<small class="text-muted">Donec id elit non mi porta.</small>
|
||||
</CListGroupItem>
|
||||
<CListGroupItem href="#" disabled class="flex-column align-items-start">
|
||||
<div class="d-flex w-100 justify-content-between">
|
||||
<h5 class="mb-1">Disabled List group item</h5>
|
||||
<small class="text-muted">3 days ago</small>
|
||||
</div>
|
||||
<p class="mb-1">
|
||||
Donec id elit non mi porta gravida at eget metus. Maecenas
|
||||
sed diam eget risus varius blandit.
|
||||
</p>
|
||||
<small class="text-muted">Donec id elit non mi porta.</small>
|
||||
</CListGroupItem>
|
||||
</CListGroup>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'ListGroups'
|
||||
}
|
||||
</script>
|
||||
179
resources/js/src/views/base/Navbars.vue
Normal file
179
resources/js/src/views/base/Navbars.vue
Normal file
@@ -0,0 +1,179 @@
|
||||
<template>
|
||||
<div>
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<CIcon name="cil-justify-center"/>
|
||||
<strong> Bootstrap Navbar </strong>
|
||||
<div class="card-header-actions">
|
||||
<a
|
||||
href="https://coreui.io/vue/docs/components/navbar"
|
||||
class="card-header-action"
|
||||
rel="noreferrer noopener"
|
||||
target="_blank"
|
||||
>
|
||||
<small class="text-muted">docs</small>
|
||||
</a>
|
||||
</div>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CNavbar
|
||||
expandable="md"
|
||||
color="info"
|
||||
>
|
||||
<CToggler inNavbar @click="show=!show"/>
|
||||
<CNavbarBrand href="#">NavBar</CNavbarBrand>
|
||||
<CCollapse :show="show" navbar>
|
||||
<CNavbarNav>
|
||||
<CNavItem href="#">Link</CNavItem>
|
||||
<CNavItem href="#" disabled>Disabled</CNavItem>
|
||||
</CNavbarNav>
|
||||
|
||||
<!-- Right aligned nav items -->
|
||||
<CNavbarNav class="ml-auto">
|
||||
<CForm inline class="align-middle">
|
||||
<CInput
|
||||
class="mr-2 my-0"
|
||||
placeholder="Search"
|
||||
size="sm"
|
||||
/>
|
||||
<CButton color="light" size="sm">
|
||||
Search
|
||||
</CButton>
|
||||
</CForm>
|
||||
|
||||
<CDropdown
|
||||
toggler-text="Lang"
|
||||
in-nav
|
||||
>
|
||||
<CDropdownItem>EN</CDropdownItem>
|
||||
<CDropdownItem>ES</CDropdownItem>
|
||||
<CDropdownItem>RU</CDropdownItem>
|
||||
<CDropdownItem>FA</CDropdownItem>
|
||||
</CDropdown>
|
||||
|
||||
<CDropdown
|
||||
in-nav
|
||||
toggler-text="User"
|
||||
>
|
||||
<CDropdownItem>Profile</CDropdownItem>
|
||||
<CDropdownItem>Signout</CDropdownItem>
|
||||
</CDropdown>
|
||||
</CNavbarNav>
|
||||
</CCollapse>
|
||||
</CNavbar>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<CIcon name="cil-justify-center"/> <strong> Navbar </strong>
|
||||
<small>brand</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<!-- Image and text -->
|
||||
<CNavbar color="faded" light>
|
||||
<CNavbarBrand href="#">
|
||||
<img src="https://placekitten.com/g/30/30" class="d-inline-block align-top" alt="CoreuiVue">
|
||||
CoreuiVue
|
||||
</CNavbarBrand>
|
||||
</CNavbar>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<CIcon name="cil-justify-center"/> <strong> Navbar </strong>
|
||||
<small>text</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CNavbar toggleable="sm" light color="light">
|
||||
<CToggler inNavbar @click="navbarText=!navbarText"/>
|
||||
<CNavbarBrand>CoreuiVue</CNavbarBrand>
|
||||
<CCollapse :show="navbarText" navbar>
|
||||
<CNavbarNav>
|
||||
<CNavbarText>Navbar text</CNavbarText>
|
||||
</CNavbarNav>
|
||||
</CCollapse>
|
||||
</CNavbar>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<CIcon name="cil-justify-center"/> <strong> Navbar </strong>
|
||||
<small>dropdown</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CNavbar expandable="sm" color="primary" >
|
||||
<CToggler inNavbar @click="navbarDropdown = !navbarDropdown"/>
|
||||
<CCollapse :show="navbarDropdown" navbar>
|
||||
<CNavbarNav>
|
||||
<CNavItem href="#">Home</CNavItem>
|
||||
<CNavItem href="#">Link</CNavItem>
|
||||
<!-- Navbar dropdowns -->
|
||||
<CDropdown
|
||||
toggler-text="Lang"
|
||||
in-nav
|
||||
>
|
||||
<CDropdownItem>EN</CDropdownItem>
|
||||
<CDropdownItem>ES</CDropdownItem>
|
||||
<CDropdownItem>RU</CDropdownItem>
|
||||
<CDropdownItem>FA</CDropdownItem>
|
||||
</CDropdown>
|
||||
<CDropdown
|
||||
toggler-text="User"
|
||||
in-nav
|
||||
>
|
||||
<CDropdownItem>Account</CDropdownItem>
|
||||
<CDropdownItem>Settings</CDropdownItem>
|
||||
</CDropdown>
|
||||
</CNavbarNav>
|
||||
</CCollapse>
|
||||
</CNavbar>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<CIcon name="cil-justify-center"/> <strong> Navbar </strong>
|
||||
<small>form</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CNavbar light color="light">
|
||||
<CForm inline>
|
||||
<CInput
|
||||
class="mr-sm-2"
|
||||
placeholder="Search"
|
||||
size="sm"
|
||||
/>
|
||||
<CButton color="outline-success" class="my-2 my-sm-0" type="submit">Search</CButton>
|
||||
</CForm>
|
||||
</CNavbar>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<CIcon name="cil-justify-center"/> <strong> Navbar </strong>
|
||||
<small>input group</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CNavbar light color="light">
|
||||
<CForm inline>
|
||||
<CInput
|
||||
class="mr-sm-2"
|
||||
placeholder="Username"
|
||||
/>
|
||||
</CForm>
|
||||
</CNavbar>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: 'Navbars',
|
||||
data () {
|
||||
return {
|
||||
show: false,
|
||||
navbarText: false,
|
||||
navbarDropdown: false
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
164
resources/js/src/views/base/Navs.vue
Normal file
164
resources/js/src/views/base/Navs.vue
Normal file
@@ -0,0 +1,164 @@
|
||||
<template>
|
||||
<div>
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<CIcon name="cil-justify-center"/><strong> Bootstrap Navs</strong>
|
||||
<div class="card-header-actions">
|
||||
<a
|
||||
href="https://coreui.io/vue/docs/components/nav"
|
||||
class="card-header-action"
|
||||
rel="noreferrer noopener"
|
||||
target="_blank"
|
||||
>
|
||||
<small class="text-muted">docs</small>
|
||||
</a>
|
||||
</div>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CNav>
|
||||
<CNavItem active>Active</CNavItem>
|
||||
<CNavItem title="Link"/>
|
||||
<CNavItem>Another Link</CNavItem>
|
||||
<CNavItem disabled>Disabled</CNavItem>
|
||||
</CNav>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<CIcon name="cil-justify-center"/>
|
||||
<strong> Bootstrap Navs </strong>
|
||||
<small>icons</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CNav variant="pills">
|
||||
<CNavItem active>
|
||||
<CIcon name="cil-basket"/>
|
||||
</CNavItem>
|
||||
<CNavItem>
|
||||
<CIcon name="cil-settings"/>
|
||||
</CNavItem>
|
||||
<CNavItem>
|
||||
<CIcon name="cil-bell"/>
|
||||
</CNavItem>
|
||||
<CNavItem disabled>
|
||||
<CIcon name="cil-envelope-closed"/>
|
||||
</CNavItem>
|
||||
</CNav>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<CIcon name="cil-justify-center"/>
|
||||
<strong> Bootstrap Navs </strong>
|
||||
<small>tab style</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CNav variant="tabs">
|
||||
<CNavItem active>
|
||||
Active
|
||||
</CNavItem>
|
||||
<CNavItem>
|
||||
Link
|
||||
</CNavItem>
|
||||
<CNavItem>
|
||||
Another Link
|
||||
</CNavItem>
|
||||
<CNavItem disabled>Disabled</CNavItem>
|
||||
</CNav>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
<CCard>
|
||||
<CCardHeader @click="item++">
|
||||
<CIcon name="cil-justify-center"/>
|
||||
<strong> Bootstrap Navs </strong>
|
||||
<small>pill style</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CNav variant="pills">
|
||||
<CNavItem active>Active</CNavItem>
|
||||
<CNavItem>Link</CNavItem>
|
||||
<CNavItem>Another Link</CNavItem>
|
||||
<CNavItem disabled>Disabled</CNavItem>
|
||||
</CNav>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<CIcon name="cil-justify-center"/>
|
||||
<strong> Bootstrap Navs </strong>
|
||||
<small>fill tabs</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CNav fill variant="tabs">
|
||||
<CNavItem active>Active</CNavItem>
|
||||
<CNavItem>Link</CNavItem>
|
||||
<CNavItem>Link with a long name </CNavItem>
|
||||
<CNavItem disabled>Disabled</CNavItem>
|
||||
</CNav>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<CIcon name="cil-justify-center"/>
|
||||
<strong> Bootstrap Navs </strong>
|
||||
<small>justified tabs</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CNav justified variant="tabs">
|
||||
<CNavItem active>Active</CNavItem>
|
||||
<CNavItem>Link</CNavItem>
|
||||
<CNavItem>Link with a long name </CNavItem>
|
||||
<CNavItem disabled>Disabled</CNavItem>
|
||||
</CNav>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<CIcon name="cil-justify-center"/>
|
||||
<strong> Bootstrap Navs </strong>
|
||||
<small>dropdown support</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CNav variant="pills">
|
||||
<CNavItem>Active</CNavItem>
|
||||
<CNavItem>Link</CNavItem>
|
||||
<CDropdown
|
||||
in-nav
|
||||
placement="bottom-end"
|
||||
button-content="Dropdown"
|
||||
>
|
||||
<CDropdownItem>one</CDropdownItem>
|
||||
<CDropdownItem>two</CDropdownItem>
|
||||
<CDropdownDivider/>
|
||||
<CDropdownItem>three</CDropdownItem>
|
||||
</CDropdown>
|
||||
</CNav>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<CIcon name="cil-justify-center"/>
|
||||
<strong> Bootstrap Navs </strong>
|
||||
<small>vertical variation</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CRow>
|
||||
<CCol col="3" class="m-0">
|
||||
<CNav vertical pills >
|
||||
<CNavItem active>Active</CNavItem>
|
||||
<CNavItem>Link</CNavItem>
|
||||
<CNavItem>Another Link</CNavItem>
|
||||
<CNavItem disabled>Disabled</CNavItem>
|
||||
</CNav>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'Navs'
|
||||
}
|
||||
</script>
|
||||
94
resources/js/src/views/base/Paginations.vue
Normal file
94
resources/js/src/views/base/Paginations.vue
Normal file
@@ -0,0 +1,94 @@
|
||||
<template>
|
||||
<div>
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<CIcon name="cil-justify-center"/>
|
||||
<strong> Pagination </strong>
|
||||
<small>size</small>
|
||||
<div class="card-header-actions">
|
||||
<a
|
||||
href="https://coreui.io/vue/docs/components/pagination"
|
||||
class="card-header-action"
|
||||
rel="noreferrer noopener"
|
||||
target="_blank"
|
||||
>
|
||||
<small class="text-muted">docs</small>
|
||||
</a>
|
||||
</div>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<h6>Default</h6>
|
||||
<CPagination
|
||||
:active-page.sync="currentPage"
|
||||
:pages="10"
|
||||
responsive
|
||||
/>
|
||||
<br>
|
||||
|
||||
<h6>Small</h6>
|
||||
<CPagination
|
||||
size="sm"
|
||||
:active-page.sync="currentPage"
|
||||
:pages="10"/>
|
||||
<br>
|
||||
|
||||
<div class="d-md-down-none">
|
||||
<h6>Large</h6>
|
||||
<CPagination
|
||||
size="lg"
|
||||
:active-page.sync="currentPage"
|
||||
:pages="10"
|
||||
responsive
|
||||
/>
|
||||
<br>
|
||||
</div>
|
||||
|
||||
<div>currentPage: {{currentPage}}</div>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<CIcon name="cil-justify-center"/>
|
||||
<strong> Pagination </strong>
|
||||
<small>alignment</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<h6>Left alignment (default)</h6>
|
||||
<CPagination
|
||||
:active-page.sync="currentPage"
|
||||
:pages="10"
|
||||
/>
|
||||
<br>
|
||||
|
||||
<h6>Center alignment</h6>
|
||||
<CPagination
|
||||
align="center"
|
||||
:pages="10"
|
||||
:active-page.sync="currentPage"
|
||||
/>
|
||||
<br>
|
||||
|
||||
<h6>Right (end) alignment</h6>
|
||||
<CPagination
|
||||
align="end"
|
||||
:active-page.sync="currentPage"
|
||||
:pages="10"
|
||||
/>
|
||||
<br>
|
||||
|
||||
<div>currentPage: {{currentPage}}</div>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'Paginations',
|
||||
data () {
|
||||
return {
|
||||
currentPage: 3
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
95
resources/js/src/views/base/Popovers.vue
Normal file
95
resources/js/src/views/base/Popovers.vue
Normal file
@@ -0,0 +1,95 @@
|
||||
<template>
|
||||
<div>
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<CIcon name="cil-justify-center"/>
|
||||
<strong> Bootstrap Popovers</strong>
|
||||
<div class="card-header-actions">
|
||||
<a
|
||||
href="https://coreui.io/vue/docs/directives/popover"
|
||||
class="card-header-action"
|
||||
rel="noreferrer noopener"
|
||||
target="_blank"
|
||||
>
|
||||
<small class="text-muted">docs</small>
|
||||
</a>
|
||||
</div>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CRow>
|
||||
<CCol col="6">
|
||||
<div class="my-3 text-center">
|
||||
<CButton
|
||||
color="primary"
|
||||
v-c-popover="{
|
||||
header: 'Popover header',
|
||||
content: 'I am popover content!'
|
||||
}"
|
||||
>
|
||||
Click Me
|
||||
</CButton>
|
||||
</div>
|
||||
</CCol>
|
||||
<CCol col="6">
|
||||
<div class="my-3 text-center">
|
||||
<CButton
|
||||
color="primary"
|
||||
v-c-popover="{
|
||||
header: 'Popover!',
|
||||
content: 'I start <strong>open</strong>',
|
||||
active: true
|
||||
}"
|
||||
>
|
||||
Click me
|
||||
</CButton>
|
||||
</div>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<CIcon name="cil-justify-center"/>
|
||||
<strong> Popovers </strong>
|
||||
<small>placement</small>
|
||||
</CCardHeader>
|
||||
<CCardBody class="my-3">
|
||||
<CRow>
|
||||
<CCol
|
||||
md="4"
|
||||
class="py-4 text-center"
|
||||
v-for="placement in placements"
|
||||
:key="placement"
|
||||
>
|
||||
<CButton
|
||||
color="primary"
|
||||
v-c-popover="{
|
||||
header: 'Popover!',
|
||||
content: `Placement ${placement}`,
|
||||
placement
|
||||
}"
|
||||
>
|
||||
{{ placement }}
|
||||
</CButton>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'Popovers',
|
||||
data () {
|
||||
return {
|
||||
placements: [
|
||||
'top-start', 'top', 'top-end',
|
||||
'bottom-start', 'bottom', 'bottom-end',
|
||||
'right-start', 'right', 'right-end',
|
||||
'left-start', 'left', 'left-end'
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
250
resources/js/src/views/base/ProgressBars.vue
Normal file
250
resources/js/src/views/base/ProgressBars.vue
Normal file
@@ -0,0 +1,250 @@
|
||||
<template>
|
||||
<div>
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<CIcon name="cil-justify-center"/>
|
||||
<strong> Bootstrap Progress</strong>
|
||||
<div class="card-header-actions">
|
||||
<a
|
||||
href="https://coreui.io/vue/docs/components/progress"
|
||||
class="card-header-action"
|
||||
rel="noreferrer noopener"
|
||||
target="_blank"
|
||||
>
|
||||
<small class="text-muted">docs</small>
|
||||
</a>
|
||||
</div>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CProgress :value="counter" :max="max" show-percentage animated></CProgress>
|
||||
<CProgress class="mt-1" :max="max" show-value>
|
||||
<CProgressBar :value="counter*(6/10)" color="success"/>
|
||||
<CProgressBar :value="counter*(2.5/10)" color="warning"/>
|
||||
<CProgressBar :value="counter*(1.5/10)" color="danger"/>
|
||||
</CProgress>
|
||||
<CButton
|
||||
@click="clicked"
|
||||
color="secondary"
|
||||
class="mt-4"
|
||||
>
|
||||
Click me to animate progress bars
|
||||
</CButton>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<CIcon name="cil-justify-center"/> <strong> Progress </strong><small>labels</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<h6>No label</h6>
|
||||
<CProgress :value="value" :max="max2" class="mb-3"/>
|
||||
<h6>Value label</h6>
|
||||
<CProgress :value="value" :max="max2" show-value class="mb-3"/>
|
||||
<h6>Progress label</h6>
|
||||
<CProgress :value="value" :max="max2" show-percentage class="mb-3"/>
|
||||
<h6>Value label with precision</h6>
|
||||
<CProgress :value="value" :max="max2" :precision="2" show-value class="mb-3"/>
|
||||
<h6>Progress label with precision</h6>
|
||||
<CProgress :value="value" :max="max2" :precision="2" show-percentage class="mb-3"/>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<CIcon name="cil-justify-center"/>
|
||||
<strong> Progress </strong>
|
||||
<small>width</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<h6>Default width</h6>
|
||||
<CProgress :value="value3" class="mb-3"/>
|
||||
<h6>Custom widths</h6>
|
||||
<CProgress :value="value3" class="w-75 mb-2"/>
|
||||
<CProgress :value="value3" class="w-50 mb-2"/>
|
||||
<CProgress :value="value3" class="w-25"/>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<CIcon name="cil-justify-center"/>
|
||||
<strong> Progress </strong>
|
||||
<small>height</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<h6>Default height</h6>
|
||||
<CProgress :value="value3" show-percentage class="mb-3"/>
|
||||
<h6>Custom heights</h6>
|
||||
<CProgress height="2rem" :value="value3" show-percentage class="mb-2"/>
|
||||
<CProgress height="20px" :value="value3" show-percentage class="mb-2"/>
|
||||
<CProgress height="2px" :value="value3"/>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<CIcon name="cil-justify-center"/>
|
||||
<strong> Progress </strong>
|
||||
<small>colors</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<div :key="index" v-for="(bar, index) in bars" class="row mb-1">
|
||||
<div class="col-sm-2">{{ bar.color }}:</div>
|
||||
<div class="col-sm-10 pt-1">
|
||||
<CProgress
|
||||
:value="bar.value"
|
||||
:color="bar.color"
|
||||
:key="bar.color"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<CIcon name="cil-justify-center"/>
|
||||
<strong> Progress </strong>
|
||||
<small>striped</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CProgress
|
||||
:value="25"
|
||||
color="success"
|
||||
:striped="striped"
|
||||
class="mb-2"
|
||||
/>
|
||||
<CProgress
|
||||
:value="50"
|
||||
color="info"
|
||||
:striped="striped"
|
||||
class="mb-2"
|
||||
/>
|
||||
<CProgress
|
||||
:value="75"
|
||||
color="warning"
|
||||
:striped="striped"
|
||||
class="mb-2"
|
||||
/>
|
||||
<CProgress
|
||||
:value="100"
|
||||
color="danger"
|
||||
:striped="striped"
|
||||
class="mb-2"
|
||||
/>
|
||||
<CButton color="secondary" @click="striped = !striped">
|
||||
{{ striped ? 'Remove' : 'Add'}} Striped
|
||||
</CButton>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<CIcon name="cil-justify-center"/>
|
||||
<strong> Progress </strong>
|
||||
<small>animated</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CProgress
|
||||
:value="25"
|
||||
color="success"
|
||||
striped
|
||||
:animated="animate"
|
||||
class="mb-2"
|
||||
/>
|
||||
<CProgress
|
||||
:value="50"
|
||||
color="info"
|
||||
striped
|
||||
:animated="animate"
|
||||
class="mb-2"
|
||||
/>
|
||||
<CProgress
|
||||
:value="75"
|
||||
color="warning"
|
||||
striped
|
||||
:animated="animate"
|
||||
class="mb-2"
|
||||
/>
|
||||
<CProgress
|
||||
:value="100"
|
||||
color="danger"
|
||||
:animated="animate"
|
||||
class="mb-3"
|
||||
/>
|
||||
<CButton color="secondary" @click="animate = !animate">
|
||||
{{ animate ? 'Stop' : 'Start'}} Animation
|
||||
</CButton>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<CIcon name="cil-justify-center"/>
|
||||
<strong> Progress </strong>
|
||||
<small>multiple bars</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CProgress :max="max3" class="mb-3">
|
||||
<CProgressBar color="primary" :value="values[0]"/>
|
||||
<CProgressBar color="success" :value="values[1]"/>
|
||||
<CProgressBar color="info" :value="values[2]"/>
|
||||
</CProgress>
|
||||
<CProgress show-percentage :max="max3" class="mb-3">
|
||||
<CProgressBar color="primary" :value="values[0]"/>
|
||||
<CProgressBar color="success" :value="values[1]"/>
|
||||
<CProgressBar color="info" :value="values[2]"/>
|
||||
</CProgress>
|
||||
<CProgress show-value striped :max="max3" class="mb-3">
|
||||
<CProgressBar color="primary" :value="values[0]"/>
|
||||
<CProgressBar color="success" :value="values[1]"/>
|
||||
<CProgressBar color="info" :value="values[2]"/>
|
||||
</CProgress>
|
||||
<CProgress :max="max3" class="mb-3">
|
||||
<CProgressBar color="primary" :value="values[0]" show-percentage/>
|
||||
<CProgressBar color="success" :value="values[1]" animated show-percentage/>
|
||||
<CProgressBar color="info" :value="values[2]" striped show-percentage/>
|
||||
</CProgress>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'ProgressBars',
|
||||
data () {
|
||||
return {
|
||||
counter: 73,
|
||||
max: 100,
|
||||
max2: 50,
|
||||
value: 33.333333333,
|
||||
value3: 75,
|
||||
bars: [
|
||||
{color: 'success', value: 75},
|
||||
{color: 'info', value: 75},
|
||||
{color: 'warning', value: 75},
|
||||
{color: 'danger', value: 75},
|
||||
{color: 'primary', value: 75},
|
||||
{color: 'secondary', value: 75},
|
||||
{color: 'dark', value: 75}
|
||||
],
|
||||
timer: null,
|
||||
striped: true,
|
||||
animate: true,
|
||||
max3: 100,
|
||||
values: [ 15, 30, 20 ]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
clicked () {
|
||||
this.counter = Math.random() * this.max
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.timer = setInterval(() => {
|
||||
this.bars.forEach(bar => {
|
||||
bar.value = 25 + (Math.random() * 75)
|
||||
})
|
||||
}, 2000)
|
||||
},
|
||||
beforeDestroy () {
|
||||
clearInterval(this.timer)
|
||||
this.timer = null
|
||||
}
|
||||
}
|
||||
</script>
|
||||
396
resources/js/src/views/base/Switches.vue
Normal file
396
resources/js/src/views/base/Switches.vue
Normal file
@@ -0,0 +1,396 @@
|
||||
<template>
|
||||
<div>
|
||||
<CRow>
|
||||
<CCol xs="12" md="6">
|
||||
<CCard v-if="true">
|
||||
<CCardHeader>
|
||||
Radio switches
|
||||
<CBadge :color="radio" class="mr-auto">{{radio}}</CBadge>
|
||||
<div class="card-header-actions">
|
||||
<a
|
||||
href="https://coreui.io/vue/docs/components/switch"
|
||||
class="card-header-action"
|
||||
rel="noreferrer noopener"
|
||||
target="_blank"
|
||||
>
|
||||
<small class="text-muted">docs</small>
|
||||
</a>
|
||||
</div>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CSwitch
|
||||
v-for="(color, key) in colors"
|
||||
:key="'radio' + key"
|
||||
class="mx-1"
|
||||
:color="color"
|
||||
variant="3d"
|
||||
v-bind="labelIcon"
|
||||
type="radio"
|
||||
name="radio"
|
||||
:checked="key === 2"
|
||||
@update:checked="(val) => val ? radio = color : null"
|
||||
:value="color"
|
||||
/>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
<CRow>
|
||||
<CCol xs="12" md="6">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
Switch default
|
||||
<CBadge color="primary">{{checker}}</CBadge>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CSwitch
|
||||
class="mx-1"
|
||||
color="primary"
|
||||
name="switch1"
|
||||
:checked.sync="checker"
|
||||
/>
|
||||
<CSwitch
|
||||
class="mx-1"
|
||||
:color="color"
|
||||
checked
|
||||
:key="key"
|
||||
v-for="(color, key) in ['secondary', 'success','warning','info','danger','light','dark']"
|
||||
/>
|
||||
<CSwitch class="mx-1" color="primary" disabled />
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs="12" md="6">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
Switch pills
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CSwitch class="mx-1" color="primary" checked shape="pill"/>
|
||||
<CSwitch class="mx-1" color="secondary" checked shape="pill" />
|
||||
<CSwitch class="mx-1" color="success" checked shape="pill" />
|
||||
<CSwitch class="mx-1" color="warning" checked shape="pill" />
|
||||
<CSwitch class="mx-1" color="info" checked shape="pill" />
|
||||
<CSwitch class="mx-1" color="danger" checked shape="pill" />
|
||||
<CSwitch class="mx-1" color="light" checked shape="pill" />
|
||||
<CSwitch class="mx-1" color="dark" checked shape="pill" />
|
||||
<CSwitch class="mx-1" color="primary" disabled shape="pill" />
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs="12" md="6">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
3d Switch
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CSwitch class="mx-1" color="primary" checked variant="3d" />
|
||||
<CSwitch class="mx-1" color="secondary" checked variant="3d" />
|
||||
<CSwitch class="mx-1" color="success" checked variant="3d" />
|
||||
<CSwitch class="mx-1" color="warning" checked variant="3d" />
|
||||
<CSwitch class="mx-1" color="info" checked variant="3d" />
|
||||
<CSwitch class="mx-1" color="danger" checked variant="3d" />
|
||||
<CSwitch class="mx-1" color="light" checked variant="3d" />
|
||||
<CSwitch class="mx-1" color="dark" checked variant="3d" />
|
||||
<CSwitch class="mx-1" color="primary" disabled variant="3d" />
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs="12" md="6">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
3d Switch <small><code>disabled</code></small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CSwitch class="mx-1" color="primary" checked variant="3d" disabled />
|
||||
<CSwitch class="mx-1" color="secondary" checked variant="3d" disabled />
|
||||
<CSwitch class="mx-1" color="success" checked variant="3d" disabled />
|
||||
<CSwitch class="mx-1" color="warning" checked variant="3d" disabled />
|
||||
<CSwitch class="mx-1" color="info" checked variant="3d" disabled />
|
||||
<CSwitch class="mx-1" color="danger" checked variant="3d" disabled />
|
||||
<CSwitch class="mx-1" color="light" checked variant="3d" disabled />
|
||||
<CSwitch class="mx-1" color="dark" checked variant="3d" disabled />
|
||||
<CSwitch class="mx-1" color="primary" disabled variant="3d" />
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs="12" md="6">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
3d Switch <small><code>label</code></small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CSwitch class="mx-1" color="primary" variant="3d" shape="square" checked v-bind="labelIcon"/>
|
||||
<CSwitch class="mx-1" color="secondary" checked variant="3d" v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" color="success" checked variant="3d" v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" color="warning" checked variant="3d" v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" color="info" checked variant="3d" v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" color="danger" checked variant="3d" v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" color="light" checked variant="3d" v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" color="dark" checked variant="3d" v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" color="primary" disabled variant="3d" v-bind="labelIcon" />
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs="12" md="6">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
Switch <small><code>variant="outline"</code></small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CSwitch class="mx-1" color="primary" checked variant="outline" />
|
||||
<CSwitch class="mx-1" color="secondary" checked variant="outline" />
|
||||
<CSwitch class="mx-1" color="success" checked variant="outline" />
|
||||
<CSwitch class="mx-1" color="warning" checked variant="outline" />
|
||||
<CSwitch class="mx-1" color="info" checked variant="outline" />
|
||||
<CSwitch class="mx-1" color="danger" checked variant="outline" />
|
||||
<CSwitch class="mx-1" color="light" checked variant="outline" />
|
||||
<CSwitch class="mx-1" color="dark" checked variant="outline" />
|
||||
<CSwitch class="mx-1" color="primary" variant="outline" disabled />
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs="12" md="6">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
Switch <small><code>variant="outline" shape="pill"</code></small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CSwitch class="mx-1" color="primary" checked variant="outline" shape="pill"/>
|
||||
<CSwitch class="mx-1" color="secondary" checked variant="outline" shape="pill" />
|
||||
<CSwitch class="mx-1" color="success" checked variant="outline" shape="pill" />
|
||||
<CSwitch class="mx-1" color="warning" checked variant="outline" shape="pill" />
|
||||
<CSwitch class="mx-1" color="info" checked variant="outline" shape="pill" />
|
||||
<CSwitch class="mx-1" color="danger" checked variant="outline" shape="pill" />
|
||||
<CSwitch class="mx-1" color="light" checked variant="outline" shape="pill" />
|
||||
<CSwitch class="mx-1" color="dark" checked variant="outline" shape="pill" />
|
||||
<CSwitch class="mx-1" color="primary" variant="outline" shape="pill" disabled />
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs="12" md="6">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
Switch <small><code>variant="opposite"</code></small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CSwitch class="mx-1" color="primary" checked variant="opposite" />
|
||||
<CSwitch class="mx-1" color="secondary" checked variant="opposite" />
|
||||
<CSwitch class="mx-1" color="success" checked variant="opposite" />
|
||||
<CSwitch class="mx-1" color="warning" checked variant="opposite" />
|
||||
<CSwitch class="mx-1" color="info" checked variant="opposite" />
|
||||
<CSwitch class="mx-1" color="danger" checked variant="opposite" />
|
||||
<CSwitch class="mx-1" color="light" checked variant="opposite" />
|
||||
<CSwitch class="mx-1" color="dark" checked variant="opposite" />
|
||||
<CSwitch class="mx-1" color="primary" variant="opposite" disabled />
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs="12" md="6">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
Switch <small><code>variant="opposite" shape="pill"</code></small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CSwitch class="mx-1" color="primary" checked variant="opposite" shape="pill"/>
|
||||
<CSwitch class="mx-1" color="secondary" checked variant="opposite" shape="pill" />
|
||||
<CSwitch class="mx-1" color="success" checked variant="opposite" shape="pill" />
|
||||
<CSwitch class="mx-1" color="warning" checked variant="opposite" shape="pill" />
|
||||
<CSwitch class="mx-1" color="info" checked variant="opposite" shape="pill" />
|
||||
<CSwitch class="mx-1" color="danger" checked variant="opposite" shape="pill" />
|
||||
<CSwitch class="mx-1" color="light" checked variant="opposite" shape="pill" />
|
||||
<CSwitch class="mx-1" color="dark" checked variant="opposite" shape="pill" />
|
||||
<CSwitch class="mx-1" color="primary" variant="opposite" shape="pill" disabled />
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs="12" md="6">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
Switch <small><code>label</code></small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CSwitch class="mx-1" color="primary" checked v-bind="labelIcon"/>
|
||||
<CSwitch class="mx-1" color="secondary" checked v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" color="success" checked v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" color="warning" checked v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" color="info" checked v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" color="danger" checked v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" color="light" checked v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" color="dark" checked v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" color="primary" disabled v-bind="labelIcon" />
|
||||
</CCardBody>
|
||||
</CCard>shape
|
||||
</CCol>
|
||||
<CCol xs="12" md="6">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
Switch <small><code>label shape="pill"</code></small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CSwitch class="mx-1" color="primary" checked shape="pill" v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" color="secondary" checked shape="pill" v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" color="success" checked shape="pill" v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" color="warning" checked shape="pill" v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" color="info" checked shape="pill" v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" color="danger" checked shape="pill" v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" color="light" checked shape="pill" v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" color="dark" checked shape="pill" v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" color="primary" shape="pill" disabled v-bind="labelIcon" />
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs="12" md="6">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
Switch <small><code>label variant="outline"</code></small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CSwitch class="mx-1" color="primary" checked variant="outline" v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" color="secondary" checked variant="outline" v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" color="success" checked variant="outline" v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" color="warning" checked variant="outline" v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" color="info" checked variant="outline" v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" color="danger" checked variant="outline" v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" color="light" checked variant="outline" v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" color="dark" checked variant="outline" v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" color="primary" variant="outline" disabled v-bind="labelIcon" />
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs="12" md="6">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
Switch <small><code>label variant="outline"</code></small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CSwitch class="mx-1" color="primary" checked variant="outline" shape="pill" v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" color="secondary" checked variant="outline" shape="pill" v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" color="success" checked variant="outline" shape="pill" v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" color="warning" checked variant="outline" shape="pill" v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" color="info" checked variant="outline" shape="pill" v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" color="danger" checked variant="outline" shape="pill" v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" color="light" checked variant="outline" shape="pill" v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" color="dark" checked variant="outline" shape="pill" v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" color="primary" variant="outline" shape="pill" disabled v-bind="labelIcon" />
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs="12" md="6">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
Switch <small><code>label variant="opposite"</code></small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CSwitch class="mx-1" color="primary" checked variant="opposite" v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" color="secondary" checked variant="opposite" v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" color="success" checked variant="opposite" v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" color="warning" checked variant="opposite" v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" color="info" checked variant="opposite" v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" color="danger" checked variant="opposite" v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" color="light" checked variant="opposite" v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" color="dark" checked variant="opposite" v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" color="primary" variant="opposite" disabled v-bind="labelIcon" />
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs="12" md="6">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
Switch <small><code>label variant="opposite"</code></small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CSwitch class="mx-1" color="primary" checked variant="opposite" shape="pill" v-bind="labelTxt" />
|
||||
<CSwitch class="mx-1" color="secondary" checked variant="opposite" shape="pill" v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" color="success" checked variant="opposite" shape="pill" v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" color="warning" checked variant="opposite" shape="pill" v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" color="info" checked variant="opposite" shape="pill" v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" color="danger" checked variant="opposite" shape="pill" v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" color="light" checked variant="opposite" shape="pill" v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" color="dark" checked variant="opposite" shape="pill" v-bind="labelIcon" />
|
||||
<CSwitch class="mx-1" color="primary" variant="opposite" shape="pill" disabled v-bind="labelIcon" />
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
|
||||
<CCol md="12">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
Sizes
|
||||
</CCardHeader>
|
||||
<CCardBody class="p-0">
|
||||
<CDataTable
|
||||
hover
|
||||
striped
|
||||
class="table-align-middle mb-0"
|
||||
:items="items"
|
||||
:fields="fields"
|
||||
no-sorting
|
||||
>
|
||||
<template #example="{item}">
|
||||
<td>
|
||||
<CSwitch
|
||||
:variant="item.example.variant"
|
||||
:color="item.example.color"
|
||||
:size="item.example.size"
|
||||
:checked="item.example.checked"
|
||||
/>
|
||||
</td>
|
||||
</template>
|
||||
<template #size_prop="{item}">
|
||||
<td>
|
||||
<span v-html="item.size_prop"></span>
|
||||
</td>
|
||||
</template>
|
||||
</CDataTable>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'Switches',
|
||||
data () {
|
||||
return {
|
||||
colors: [
|
||||
'primary','secondary','warning','success','info','danger','light','dark'
|
||||
],
|
||||
fields: [
|
||||
{ key: 'size' },
|
||||
{ key: 'example' },
|
||||
{ key: 'size_prop', label: 'Size prop' }
|
||||
],
|
||||
items: [
|
||||
{
|
||||
size: 'Large',
|
||||
example: { variant: '3d', color: 'primary', size: 'lg', checked: true },
|
||||
size_prop: 'Add following prop <code>size="lg"</code>'
|
||||
},
|
||||
{
|
||||
size: 'Normal',
|
||||
example: { variant: '3d', color: 'primary', size: '', checked: true },
|
||||
size_prop: '-'
|
||||
},
|
||||
{
|
||||
size: 'Small',
|
||||
example: { variant: '3d', color: 'primary', size: 'sm', checked: true},
|
||||
size_prop: 'Add following prop <code>size="sm"</code>'
|
||||
}
|
||||
],
|
||||
checker: true,
|
||||
radio: 'warning',
|
||||
labelIcon: {
|
||||
labelOn: '\u2713',
|
||||
labelOff: '\u2715'
|
||||
},
|
||||
labelTxt: {
|
||||
labelOn: 'yes',
|
||||
labelOff: 'no'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
62
resources/js/src/views/base/Table.vue
Normal file
62
resources/js/src/views/base/Table.vue
Normal file
@@ -0,0 +1,62 @@
|
||||
<template>
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<slot name="header">
|
||||
<CIcon name="cil-grid"/> {{caption}}
|
||||
</slot>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CDataTable
|
||||
:hover="hover"
|
||||
:striped="striped"
|
||||
:bordered="bordered"
|
||||
:small="small"
|
||||
:fixed="fixed"
|
||||
:items="items"
|
||||
:fields="fields"
|
||||
:items-per-page="small ? 10 : 5"
|
||||
:dark="dark"
|
||||
pagination
|
||||
>
|
||||
<template #status="{item}">
|
||||
<td>
|
||||
<CBadge :color="getBadge(item.status)">{{item.status}}</CBadge>
|
||||
</td>
|
||||
</template>
|
||||
</CDataTable>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'Table',
|
||||
props: {
|
||||
items: Array,
|
||||
fields: {
|
||||
type: Array,
|
||||
default () {
|
||||
return ['username', 'registered', 'role', 'status']
|
||||
}
|
||||
},
|
||||
caption: {
|
||||
type: String,
|
||||
default: 'Table'
|
||||
},
|
||||
hover: Boolean,
|
||||
striped: Boolean,
|
||||
bordered: Boolean,
|
||||
small: Boolean,
|
||||
fixed: Boolean,
|
||||
dark: Boolean
|
||||
},
|
||||
methods: {
|
||||
getBadge (status) {
|
||||
return status === 'Active' ? 'success'
|
||||
: status === 'Inactive' ? 'secondary'
|
||||
: status === 'Pending' ? 'warning'
|
||||
: status === 'Banned' ? 'danger' : 'primary'
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
104
resources/js/src/views/base/Tables.vue
Normal file
104
resources/js/src/views/base/Tables.vue
Normal file
@@ -0,0 +1,104 @@
|
||||
<template>
|
||||
<div>
|
||||
<CRow>
|
||||
<CCol lg="6">
|
||||
<CTableWrapper :items="getShuffledUsersData()">
|
||||
<template #header>
|
||||
<CIcon name="cil-grid"/> Simple Table
|
||||
<div class="card-header-actions">
|
||||
<a
|
||||
href="https://coreui.io/vue/docs/components/nav"
|
||||
class="card-header-action"
|
||||
rel="noreferrer noopener"
|
||||
target="_blank"
|
||||
>
|
||||
<small class="text-muted">docs</small>
|
||||
</a>
|
||||
</div>
|
||||
</template>
|
||||
</CTableWrapper>
|
||||
</CCol>
|
||||
|
||||
<CCol lg="6">
|
||||
<CTableWrapper
|
||||
:items="getShuffledUsersData()"
|
||||
striped
|
||||
caption="Striped Table"
|
||||
/>
|
||||
</CCol>
|
||||
</CRow>
|
||||
|
||||
<CRow>
|
||||
<CCol lg="6">
|
||||
<CTableWrapper
|
||||
:items="getShuffledUsersData()"
|
||||
small
|
||||
caption="Condensed Table"
|
||||
/>
|
||||
</CCol>
|
||||
|
||||
<CCol lg="6">
|
||||
<CTableWrapper
|
||||
:items="getShuffledUsersData()"
|
||||
fixed
|
||||
bordered
|
||||
caption="Bordered Table"
|
||||
/>
|
||||
</CCol>
|
||||
</CRow>
|
||||
|
||||
<CRow>
|
||||
<CCol sm="12">
|
||||
<CTableWrapper
|
||||
:items="getShuffledUsersData()"
|
||||
hover
|
||||
striped
|
||||
bordered
|
||||
small
|
||||
fixed
|
||||
caption="Combined All Table"
|
||||
/>
|
||||
</CCol>
|
||||
</CRow>
|
||||
|
||||
<CRow>
|
||||
<CCol sm="12">
|
||||
<CTableWrapper
|
||||
:items="getShuffledUsersData()"
|
||||
hover
|
||||
striped
|
||||
bordered
|
||||
small
|
||||
fixed
|
||||
dark
|
||||
caption="Combined All dark Table"
|
||||
/>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import CTableWrapper from './Table.vue'
|
||||
import usersData from '../users/UsersData'
|
||||
|
||||
export default {
|
||||
name: 'Tables',
|
||||
components: { CTableWrapper },
|
||||
methods: {
|
||||
shuffleArray (array) {
|
||||
for (let i = array.length - 1; i > 0; i--) {
|
||||
let j = Math.floor(Math.random() * (i + 1))
|
||||
let temp = array[i]
|
||||
array[i] = array[j]
|
||||
array[j] = temp
|
||||
}
|
||||
return array
|
||||
},
|
||||
|
||||
getShuffledUsersData () {
|
||||
return this.shuffleArray(usersData.slice(0))
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
219
resources/js/src/views/base/Tabs.vue
Normal file
219
resources/js/src/views/base/Tabs.vue
Normal file
@@ -0,0 +1,219 @@
|
||||
<template>
|
||||
<div>
|
||||
<CRow>
|
||||
<CCol xs="12" lg="6">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
Tabs
|
||||
<div class="card-header-actions">
|
||||
<a
|
||||
href="https://coreui.io/vue/docs/components/tabs"
|
||||
class="card-header-action"
|
||||
rel="noreferrer noopener"
|
||||
target="_blank"
|
||||
>
|
||||
<small class="text-muted">docs</small>
|
||||
</a>
|
||||
</div>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CTabs>
|
||||
<CTab title="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 title="Profile" active>
|
||||
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 title="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
|
||||
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
|
||||
officia deserunt mollit anim id est laborum.
|
||||
</CTab>
|
||||
</CTabs>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs="12" lg="6">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
Tabs
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CTabs variant="pills">
|
||||
<CTab title="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 title="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 title="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
|
||||
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
|
||||
officia deserunt mollit anim id est laborum.
|
||||
</CTab>
|
||||
</CTabs>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs="12" lg="6">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
Tabs with icons
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CTabs :active-tab.sync="activeTab">
|
||||
<CTab active>
|
||||
<template slot="title">
|
||||
<CIcon name="cil-calculator"/>
|
||||
</template>
|
||||
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>
|
||||
<template slot="title">
|
||||
<CIcon name="cil-basket"/>
|
||||
</template>
|
||||
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>
|
||||
<template slot="title">
|
||||
<CIcon name="cil-chart-pie"/>
|
||||
</template>
|
||||
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
|
||||
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
|
||||
officia deserunt mollit anim id est laborum.
|
||||
</CTab>
|
||||
</CTabs>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs="12" lg="6">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
Tabs with icons
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CTabs add-tab-classes="mt-1">
|
||||
<CTab>
|
||||
<template slot="title">
|
||||
<CIcon name="cil-calculator"/> {{tabs[0]}}
|
||||
</template>
|
||||
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 active>
|
||||
<template slot="title">
|
||||
<CIcon name="cil-basket"/> {{tabs[1]}}
|
||||
</template>
|
||||
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>
|
||||
<template slot="title">
|
||||
<CIcon name="cil-chart-pie"/> {{tabs[2]}}
|
||||
</template>
|
||||
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
|
||||
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
|
||||
officia deserunt mollit anim id est laborum.
|
||||
</CTab>
|
||||
</CTabs>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs="12" lg="6">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
Tabs vertical
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CTabs variant="pills" vertical>
|
||||
<CTab active>
|
||||
<template slot="title">
|
||||
<CIcon name="cil-calculator"/> {{tabs[0]}}
|
||||
</template>
|
||||
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>
|
||||
<template slot="title">
|
||||
<CIcon name="cil-basket"/> {{tabs[1]}}
|
||||
</template>
|
||||
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>
|
||||
<template slot="title">
|
||||
<CIcon name="cil-chart-pie"/> {{tabs[2]}}
|
||||
</template>
|
||||
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
|
||||
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
|
||||
officia deserunt mollit anim id est laborum.
|
||||
</CTab>
|
||||
</CTabs>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'Tabs',
|
||||
data () {
|
||||
return {
|
||||
tabs: [
|
||||
'Calculator',
|
||||
'Shopping cart',
|
||||
'Charts'
|
||||
],
|
||||
activeTab: 1
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
90
resources/js/src/views/base/Tooltips.vue
Normal file
90
resources/js/src/views/base/Tooltips.vue
Normal file
@@ -0,0 +1,90 @@
|
||||
<template>
|
||||
<div>
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<CIcon name="cil-justify-center"/>
|
||||
<strong> Bootstrap Tooltips </strong>
|
||||
<small><code>v-c-tooltip</code> directive</small>
|
||||
<div class="card-header-actions">
|
||||
<a
|
||||
href="https://coreui.io/vue/docs/directives/tooltip"
|
||||
class="card-header-action"
|
||||
rel="noreferrer noopener"
|
||||
target="_blank"
|
||||
>
|
||||
<small class="text-muted">docs</small>
|
||||
</a>
|
||||
</div>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CRow>
|
||||
<CCol col="6">
|
||||
<div class="text-center my-3">
|
||||
<CButton
|
||||
color="secondary"
|
||||
v-c-tooltip.hover.click="'I am a tooltip!'"
|
||||
>
|
||||
Hover Me
|
||||
</CButton>
|
||||
</div>
|
||||
</CCol>
|
||||
<CCol col="6">
|
||||
<div class="text-center my-3">
|
||||
<CButton
|
||||
v-c-tooltip="{content: 'I start open!', active:true }"
|
||||
color="secondary"
|
||||
>
|
||||
Hover me
|
||||
</CButton>
|
||||
</div>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<CIcon name="cil-justify-center"/>
|
||||
<strong> Tooltips </strong>
|
||||
<small>placement</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<div class="my-3">
|
||||
<CRow>
|
||||
<CCol
|
||||
md="4"
|
||||
class="py-4 text-center"
|
||||
v-for="placement in placements"
|
||||
:key="placement"
|
||||
>
|
||||
<CButton
|
||||
color="primary"
|
||||
v-c-tooltip.hover="{
|
||||
content: `Placement ${placement}`,
|
||||
placement
|
||||
}"
|
||||
>
|
||||
{{ placement }}
|
||||
</CButton>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</div>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'Tooltips',
|
||||
data () {
|
||||
return {
|
||||
placements: [
|
||||
'top-start', 'top', 'top-end',
|
||||
'bottom-start', 'bottom', 'bottom-end',
|
||||
'right-start', 'right', 'right-end',
|
||||
'left-start', 'left', 'left-end'
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
224
resources/js/src/views/buttons/BrandButtons.vue
Normal file
224
resources/js/src/views/buttons/BrandButtons.vue
Normal file
@@ -0,0 +1,224 @@
|
||||
<template>
|
||||
<CRow>
|
||||
<CCol col="12">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<strong>Brand Button</strong>
|
||||
<div class="card-header-actions">
|
||||
<a
|
||||
href="https://coreui.io/vue/docs/components/button-components"
|
||||
class="card-header-action"
|
||||
rel="noreferrer noopener"
|
||||
target="_blank"
|
||||
>
|
||||
<small class="text-muted">docs</small>
|
||||
</a>
|
||||
</div>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<small>Usage </small>
|
||||
<code>{{ $options.usage }}</code>
|
||||
<hr/>
|
||||
<h6>
|
||||
Size Small
|
||||
<small>Add <code>size="sm"</code></small>
|
||||
</h6>
|
||||
<p>
|
||||
<template v-for="(brandName, key) in $options.brands">
|
||||
<CButton
|
||||
:name="brandName"
|
||||
size="sm"
|
||||
:key="key"
|
||||
:color="brandName"
|
||||
>
|
||||
<CIcon size="sm" :name="'cib-' + brandName"/>
|
||||
<span>{{brandName}}</span>
|
||||
</CButton>
|
||||
</template>
|
||||
</p>
|
||||
<h6>Size Normal</h6>
|
||||
<p>
|
||||
<template v-for="(brandName, key) in $options.brands">
|
||||
<CButton
|
||||
:name="brandName"
|
||||
:key="key"
|
||||
:color="brandName"
|
||||
>
|
||||
<CIcon :name="'cib-' + brandName"/>
|
||||
<span>{{brandName}}</span>
|
||||
</CButton>
|
||||
</template>
|
||||
</p>
|
||||
<h6>Size Large <small>Add <code>size="lg"</code></small></h6>
|
||||
<p>
|
||||
<template v-for="(brandName, key) in $options.brands">
|
||||
<CButton
|
||||
:name="brandName"
|
||||
size="lg"
|
||||
:key="key"
|
||||
:color="brandName"
|
||||
>
|
||||
<CIcon size="lg" :name="'cib-' + brandName"/>
|
||||
<span>{{brandName}}</span>
|
||||
</CButton>
|
||||
</template>
|
||||
</p>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol col="12">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<strong>Brand Button </strong> <small>Icons only</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<small>Usage </small>
|
||||
<code>{{ $options.iconsOnlyUsage }}</code>
|
||||
<hr/>
|
||||
<h6>Size Small <small>Add <code>size="sm"</code></small></h6>
|
||||
<p>
|
||||
<template v-for="(brandName, key) in $options.brands">
|
||||
<CButton
|
||||
:name="brandName"
|
||||
size="sm"
|
||||
:key="key"
|
||||
:color="brandName"
|
||||
>
|
||||
<CIcon size="sm" :name="'cib-' + brandName"/>
|
||||
</CButton>
|
||||
</template>
|
||||
</p>
|
||||
<h6>Size Normal</h6>
|
||||
<p>
|
||||
<template v-for="(brandName, key) in $options.brands">
|
||||
<CButton
|
||||
:name="brandName"
|
||||
:key="key"
|
||||
:color="brandName"
|
||||
>
|
||||
<CIcon :name="'cib-' + brandName"/>
|
||||
</CButton>
|
||||
</template>
|
||||
</p>
|
||||
<h6>Size Large <small>Add <code>size="lg"</code></small></h6>
|
||||
<p>
|
||||
<template v-for="(brandName, key) in $options.brands">
|
||||
<CButton
|
||||
:name="brandName"
|
||||
size="lg"
|
||||
:key="key"
|
||||
:color="brandName"
|
||||
>
|
||||
<CIcon size="lg" :name="'cib-' + brandName"/>
|
||||
</CButton>
|
||||
</template>
|
||||
</p>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
|
||||
<CCol col="12">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<strong>Brand Button </strong> <small>Text only</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<small>Usage </small>
|
||||
<code>
|
||||
{{ $options.textOnlyUsage }}
|
||||
</code>
|
||||
<hr/>
|
||||
<h6>Size Small <small>Add <code>size="sm"</code></small></h6>
|
||||
<p>
|
||||
<template v-for="(brandName, key) in $options.brands">
|
||||
<CButton
|
||||
size="sm"
|
||||
:key="key"
|
||||
:color="brandName"
|
||||
>
|
||||
<span>{{brandName}}</span>
|
||||
</CButton>
|
||||
</template>
|
||||
</p>
|
||||
<h6>Size Normal</h6>
|
||||
<p>
|
||||
<template v-for="(brandName, key) in $options.brands">
|
||||
<CButton
|
||||
:key="key"
|
||||
:color="brandName"
|
||||
>
|
||||
<span>{{brandName}}</span>
|
||||
</CButton>
|
||||
</template>
|
||||
</p>
|
||||
<h6>Size Large <small>Add <code>size="lg"</code></small></h6>
|
||||
<p>
|
||||
<template v-for="(brandName, key) in $options.brands">
|
||||
<CButton
|
||||
size="lg"
|
||||
:key="key"
|
||||
:color="brandName"
|
||||
>
|
||||
<span>{{brandName}}</span>
|
||||
</CButton>
|
||||
</template>
|
||||
</p>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'BrandButtons',
|
||||
usage: '<CButton color="facebook"><span>Facebook</span></CButton>',
|
||||
iconsOnlyUsage: '<CButton color="facebook"><CIcon name="cib-facebook"/></CButton>',
|
||||
textOnlyUsage: '<CButton color="facebook"><CIcon name="cib-facebook"/></CButton>',
|
||||
brands: [
|
||||
'facebook',
|
||||
'twitter',
|
||||
'linkedin',
|
||||
'flickr',
|
||||
'tumblr',
|
||||
'xing',
|
||||
'github',
|
||||
'stack-overflow',
|
||||
'youtube',
|
||||
'dribbble',
|
||||
'instagram',
|
||||
'pinterest',
|
||||
'vk',
|
||||
'yahoo',
|
||||
'behance',
|
||||
'reddit',
|
||||
'vimeo'
|
||||
]
|
||||
// labels: {
|
||||
// facebook: 'Facebook',
|
||||
// twitter: 'Twitter',
|
||||
// linkedin: 'LinkedIn',
|
||||
// flickr: 'Flickr',
|
||||
// tumblr: 'Tumblr',
|
||||
// xing: 'Xing',
|
||||
// github: 'Github',
|
||||
// 'stack-overflow': 'StackOverflow',
|
||||
// youtube: 'YouTube',
|
||||
// dribbble: 'Dribbble',
|
||||
// instagram: 'Instagram',
|
||||
// pinterest: 'Pinterest',
|
||||
// vk: 'VK',
|
||||
// yahoo: 'Yahoo',
|
||||
// behance: 'Behance',
|
||||
// reddit: 'Reddit',
|
||||
// vimeo: 'Vimeo'
|
||||
// }
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.btn {
|
||||
margin-bottom: 4px;
|
||||
margin-right: 6px;
|
||||
}
|
||||
</style>
|
||||
198
resources/js/src/views/buttons/ButtonGroups.vue
Normal file
198
resources/js/src/views/buttons/ButtonGroups.vue
Normal file
@@ -0,0 +1,198 @@
|
||||
<template>
|
||||
<CRow>
|
||||
<CCol col="12">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<CIcon name="cil-justify-center"/>
|
||||
<strong> Bootstrap button group</strong>
|
||||
<div class="card-header-actions">
|
||||
<a
|
||||
href="https://coreui.io/vue/docs/components/button-components"
|
||||
class="card-header-action"
|
||||
rel="noreferrer noopener"
|
||||
target="_blank"
|
||||
>
|
||||
<small class="text-muted">docs</small>
|
||||
</a>
|
||||
</div>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<div>
|
||||
<CButtonGroup>
|
||||
<CButton color="secondary">One</CButton>
|
||||
<CButton color="secondary">Two</CButton>
|
||||
<CButton color="secondary">Three</CButton>
|
||||
<CButton color="secondary">Four</CButton>
|
||||
<CButton color="secondary" class="d-sm-down-none">Five</CButton>
|
||||
</CButtonGroup>
|
||||
<br><br>
|
||||
<CButtonGroup>
|
||||
<CButton class="d-sm-down-none" color="success">Success</CButton>
|
||||
<CButton color="info">Info</CButton>
|
||||
<CButton color="warning">Warn</CButton>
|
||||
<CButton class="d-sm-down-none" color="primary">Primary</CButton>
|
||||
<CButton color="danger">Danger</CButton>
|
||||
<CButton color="link">Link</CButton>
|
||||
</CButtonGroup>
|
||||
</div>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol col="12">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<CIcon name="cil-justify-center"/>
|
||||
<strong> Button group </strong>sizing
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<div>
|
||||
<CButtonGroup>
|
||||
<CButton color="secondary">Left</CButton>
|
||||
<CButton color="secondary">Middle</CButton>
|
||||
<CButton color="secondary">Right</CButton>
|
||||
</CButtonGroup>
|
||||
<br><br>
|
||||
<CButtonGroup size="sm">
|
||||
<CButton color="secondary">Left</CButton>
|
||||
<CButton color="secondary">Middle</CButton>
|
||||
<CButton color="secondary">Right</CButton>
|
||||
</CButtonGroup>
|
||||
<br><br>
|
||||
<CButtonGroup size="lg">
|
||||
<CButton color="secondary">Left</CButton>
|
||||
<CButton color="secondary">Middle</CButton>
|
||||
<CButton color="secondary">Right</CButton>
|
||||
</CButtonGroup>
|
||||
</div>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol col="12">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<CIcon name="cil-justify-center"/><strong> Button group </strong>dropdown support
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<div>
|
||||
<CButtonGroup>
|
||||
<CButton color="secondary" class="d-sm-down-none">Button 1</CButton>
|
||||
<CButton color="secondary" class="d-sm-down-none">Button 2</CButton>
|
||||
<CDropdown right text="Menu" color="success">
|
||||
<CDropdownItem>Item 1</CDropdownItem>
|
||||
<CDropdownItem>Item 2</CDropdownItem>
|
||||
<CDropdownDivider/>
|
||||
<CDropdownItem>Item 3</CDropdownItem>
|
||||
</CDropdown>
|
||||
<CButton color="secondary" class="d-sm-down-none">Button 3</CButton>
|
||||
<CDropdown right split text="Split Menu" color="info">
|
||||
<CDropdownItem>Item 1</CDropdownItem>
|
||||
<CDropdownItem>Item 2</CDropdownItem>
|
||||
<CDropdownDivider/>
|
||||
<CDropdownItem>Item 3</CDropdownItem>
|
||||
</CDropdown>
|
||||
</CButtonGroup>
|
||||
</div>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol col="12">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<CIcon name="cil-justify-center"/>
|
||||
<strong> Button group </strong>vertical variation
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<div>
|
||||
<CButtonGroup vertical>
|
||||
<CButton color="secondary">Top</CButton>
|
||||
<CButton color="secondary">Middle</CButton>
|
||||
<CButton color="secondary">Bottom</CButton>
|
||||
</CButtonGroup>
|
||||
</div>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol col="12">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<CIcon name="cil-justify-center"/>
|
||||
<strong> Button toolbar </strong>
|
||||
<small>with button groups</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CButtonToolbar aria-label="Toolbar with button groups" >
|
||||
<CButtonGroup class="mx-1">
|
||||
<CButton color="secondary" class="d-sm-down-none">«</CButton>
|
||||
<CButton color="secondary">‹</CButton>
|
||||
</CButtonGroup>
|
||||
<CButtonGroup class="mx-1">
|
||||
<CButton color="secondary" class="d-sm-down-none">Edit</CButton>
|
||||
<CButton color="secondary">Undo</CButton>
|
||||
<CButton color="secondary">Redo</CButton>
|
||||
</CButtonGroup>
|
||||
<CButtonGroup class="mx-1">
|
||||
<CButton color="secondary">›</CButton>
|
||||
<CButton color="secondary" class="d-sm-down-none">»</CButton>
|
||||
</CButtonGroup>
|
||||
</CButtonToolbar>
|
||||
<hr class="d-sm-down-none"/>
|
||||
<CButtonToolbar
|
||||
aria-label="Toolbar with button groups and input groups"
|
||||
class="d-sm-down-none"
|
||||
>
|
||||
<CButtonGroup size="sm" class="mx-1">
|
||||
<CButton color="secondary">New</CButton>
|
||||
<CButton color="secondary">Edit</CButton>
|
||||
</CButtonGroup>
|
||||
<CInput
|
||||
class="mb-0 w-25 mx-1"
|
||||
size="sm"
|
||||
append=".00"
|
||||
value="100"
|
||||
prepend="$"
|
||||
/>
|
||||
<CSelect
|
||||
class="mb-0 w-25 mx-1"
|
||||
size="sm"
|
||||
value="Medium"
|
||||
:options="['Large','Medium','Small']"
|
||||
custom
|
||||
prepend="Size"
|
||||
/>
|
||||
<CButtonGroup size="sm" class="mx-1">
|
||||
<CButton color="secondary">Save</CButton>
|
||||
<CButton color="secondary">Cancel</CButton>
|
||||
</CButtonGroup>
|
||||
</CButtonToolbar>
|
||||
<hr/>
|
||||
<CButtonToolbar aria-label="Toolbar with button groups and dropdown menu">
|
||||
<CButtonGroup class="mx-1 d-sm-down-none">
|
||||
<CButton color="secondary">New</CButton>
|
||||
<CButton color="secondary">Edit</CButton>
|
||||
<CButton color="secondary">Undo</CButton>
|
||||
</CButtonGroup>
|
||||
<CDropdown
|
||||
color="secondary"
|
||||
class="mx-1"
|
||||
placement="bottom-end"
|
||||
button-content="Menu"
|
||||
>
|
||||
<CDropdownItem>Item 1</CDropdownItem>
|
||||
<CDropdownItem>Item 2</CDropdownItem>
|
||||
<CDropdownItem>Item 3</CDropdownItem>
|
||||
</CDropdown>
|
||||
<CButtonGroup class="mx-1">
|
||||
<CButton color="secondary">Save</CButton>
|
||||
<CButton color="secondary">Cancel</CButton>
|
||||
</CButtonGroup>
|
||||
</CButtonToolbar>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: 'ButtonGroups',
|
||||
}
|
||||
</script>
|
||||
363
resources/js/src/views/buttons/Dropdowns.vue
Normal file
363
resources/js/src/views/buttons/Dropdowns.vue
Normal file
@@ -0,0 +1,363 @@
|
||||
<template>
|
||||
<div>
|
||||
<CRow>
|
||||
<CCol col="12" md="6">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<CIcon name="cil-justify-center"/>
|
||||
<strong> Bootstrap Dropdown</strong>
|
||||
<div class="card-header-actions">
|
||||
<a
|
||||
href="https://coreui.io/vue/docs/components/dropdown"
|
||||
class="card-header-action"
|
||||
rel="noreferrer noopener"
|
||||
target="_blank"
|
||||
>
|
||||
<small class="text-muted">docs</small>
|
||||
</a>
|
||||
</div>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<div>
|
||||
<CDropdown
|
||||
toggler-text="Dropdown Button"
|
||||
class="m-2"
|
||||
color="secondary"
|
||||
>
|
||||
<CDropdownItem>First Action</CDropdownItem>
|
||||
<CDropdownItem>Second Action</CDropdownItem>
|
||||
<CDropdownItem>Third Action</CDropdownItem>
|
||||
<CDropdownDivider/>
|
||||
<CDropdownItem>Something else here...</CDropdownItem>
|
||||
<CDropdownItem disabled>Disabled action</CDropdownItem>
|
||||
</CDropdown>
|
||||
</div>
|
||||
<!-- <div>
|
||||
<CDropdown toggler-text="Dropdown using buttons as menu items" class="m-2">
|
||||
<CDropdownItem>I'm a button</CDropdownItem>
|
||||
<CDropdownItem>I'm also a button</CDropdownItem>
|
||||
<CDropdownItem disabled>I'm a button, but disabled!</CDropdownItem>
|
||||
<CDropdownItem>I don't look like a button, but I am!</CDropdownItem>
|
||||
</CDropdown>
|
||||
</div> -->
|
||||
<div>
|
||||
<CDropdown
|
||||
toggler-text="Dropdown with divider"
|
||||
class="m-2"
|
||||
color="secondary"
|
||||
>
|
||||
<CDropdownItem>First item</CDropdownItem>
|
||||
<CDropdownItem>Second item</CDropdownItem>
|
||||
<CDropdownDivider/>
|
||||
<CDropdownItem>Separated Item</CDropdownItem>
|
||||
</CDropdown>
|
||||
</div>
|
||||
<div>
|
||||
<CDropdown
|
||||
toggler-text="Dropdown with header"
|
||||
class="m-2"
|
||||
color="secondary"
|
||||
>
|
||||
<CDropdownHeader>Dropdown header</CDropdownHeader>
|
||||
<CDropdownItem>First item</CDropdownItem>
|
||||
<CDropdownItem>Second Item</CDropdownItem>
|
||||
</CDropdown>
|
||||
</div>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol col="12" md="6">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<CIcon name="cil-justify-center"/>
|
||||
<strong> Dropdown </strong>
|
||||
<small>positioning</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<div>
|
||||
<CDropdown
|
||||
toggler-text="Left align"
|
||||
color="primary"
|
||||
class="m-2 d-inline-block"
|
||||
>
|
||||
<CDropdownItem>Action</CDropdownItem>
|
||||
<CDropdownItem>Another action</CDropdownItem>
|
||||
<CDropdownItem>Something else here</CDropdownItem>
|
||||
</CDropdown>
|
||||
<CDropdown
|
||||
placement="bottom-end"
|
||||
toggler-text="Right align"
|
||||
color="primary"
|
||||
class="m-2 d-inline-block"
|
||||
>
|
||||
<CDropdownItem>Action</CDropdownItem>
|
||||
<CDropdownItem>Another action</CDropdownItem>
|
||||
<CDropdownItem>Something else here</CDropdownItem>
|
||||
</CDropdown>
|
||||
</div>
|
||||
<div>
|
||||
<CDropdown
|
||||
toggler-text="Drop-Up"
|
||||
color="info"
|
||||
class="m-2"
|
||||
placement="top-start"
|
||||
|
||||
>
|
||||
<CDropdownItem>Action</CDropdownItem>
|
||||
<CDropdownItem>Another action</CDropdownItem>
|
||||
<CDropdownItem>Something else here</CDropdownItem>
|
||||
</CDropdown>
|
||||
</div>
|
||||
<div>
|
||||
<CDropdown
|
||||
color="secondary"
|
||||
:offset="[10, 5]"
|
||||
toggler-text="Offset Dropdown"
|
||||
class="m-2"
|
||||
>
|
||||
<CDropdownItem>Action</CDropdownItem>
|
||||
<CDropdownItem>Another action</CDropdownItem>
|
||||
<CDropdownItem>Something else here</CDropdownItem>
|
||||
</CDropdown>
|
||||
</div>
|
||||
<div>
|
||||
<CDropdown
|
||||
color="secondary"
|
||||
split
|
||||
toggler-text="Split Dropdown"
|
||||
class="m-2"
|
||||
>
|
||||
<CDropdownItem>Action</CDropdownItem>
|
||||
<CDropdownItem>Another action</CDropdownItem>
|
||||
<CDropdownItem>Something else here...</CDropdownItem>
|
||||
</CDropdown>
|
||||
</div>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
<CRow>
|
||||
<CCol col="12" md="6">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<CIcon name="cil-justify-center"/>
|
||||
<strong> Dropdown </strong>
|
||||
<small>hidden caret</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<div>
|
||||
<CDropdown
|
||||
color="link"
|
||||
size="lg"
|
||||
:caret="false"
|
||||
>
|
||||
<template #toggler-content>
|
||||
🔍<span class="sr-only">Search</span>
|
||||
</template>
|
||||
<CDropdownItem>Action</CDropdownItem>
|
||||
<CDropdownItem>Another action</CDropdownItem>
|
||||
<CDropdownItem>Something else here...</CDropdownItem>
|
||||
</CDropdown>
|
||||
</div>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol col="12" md="6">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<CIcon name="cil-justify-center"/>
|
||||
<strong> Dropdown </strong>
|
||||
<small>sizing</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<div>
|
||||
<CDropdown
|
||||
color="secondary"
|
||||
size="lg"
|
||||
toggler-text="Large"
|
||||
class="m-2 d-inline-block"
|
||||
>
|
||||
<CDropdownItem>Action</CDropdownItem>
|
||||
<CDropdownItem>Another action</CDropdownItem>
|
||||
<CDropdownItem>Something else here</CDropdownItem>
|
||||
</CDropdown>
|
||||
<CDropdown
|
||||
color="secondary"
|
||||
size="lg"
|
||||
split
|
||||
toggler-text="Large Split"
|
||||
class="m-2"
|
||||
>
|
||||
<CDropdownItem>Action</CDropdownItem>
|
||||
<CDropdownItem>Another action</CDropdownItem>
|
||||
<CDropdownItem>Something else here...</CDropdownItem>
|
||||
</CDropdown>
|
||||
<br>
|
||||
<CDropdown
|
||||
color="secondary"
|
||||
size="sm"
|
||||
toggler-text="Small"
|
||||
class="m-2 d-inline-block"
|
||||
>
|
||||
<CDropdownItem>Action</CDropdownItem>
|
||||
<CDropdownItem>Another action</CDropdownItem>
|
||||
<CDropdownItem>Something else here...</CDropdownItem>
|
||||
</CDropdown>
|
||||
<CDropdown
|
||||
color="secondary"
|
||||
size="sm"
|
||||
split toggler-text="Small Split"
|
||||
class="m-2"
|
||||
>
|
||||
<CDropdownItem>Action</CDropdownItem>
|
||||
<CDropdownItem>Another action</CDropdownItem>
|
||||
<CDropdownItem>Something else here...</CDropdownItem>
|
||||
</CDropdown>
|
||||
</div>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
<CRow>
|
||||
<CCol col="12" md="6">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<CIcon name="cil-justify-center"/>
|
||||
<strong> Dropdown </strong>
|
||||
<small>headers and accessibility</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<div>
|
||||
<CDropdown
|
||||
toggler-text="Dropdown ARIA" color="primary"
|
||||
class="m-2"
|
||||
>
|
||||
<div role="group">
|
||||
<CDropdownHeader>Groups</CDropdownHeader>
|
||||
<CDropdownItem>Add</CDropdownItem>
|
||||
<CDropdownItem>Delete</CDropdownItem>
|
||||
</div>
|
||||
<div role="group">
|
||||
<CDropdownHeader>Users</CDropdownHeader>
|
||||
<CDropdownItem>Add</CDropdownItem>
|
||||
<CDropdownItem>Delete</CDropdownItem>
|
||||
</div>
|
||||
<CDropdownDivider/>
|
||||
<CDropdownItem>
|
||||
Something <strong>not</strong> associated with user
|
||||
</CDropdownItem>
|
||||
</CDropdown>
|
||||
</div>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol col="12" md="6">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<CIcon name="cil-justify-center"/>
|
||||
<strong> Dropdown </strong>
|
||||
<small><code>color</code></small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CDropdown
|
||||
size="sm"
|
||||
toggler-text="Primary"
|
||||
color="primary"
|
||||
class="m-0 d-inline-block"
|
||||
>
|
||||
<CDropdownItem>First Action</CDropdownItem>
|
||||
<CDropdownItem>Second Action</CDropdownItem>
|
||||
<CDropdownItem>Third Action</CDropdownItem>
|
||||
</CDropdown>
|
||||
<CDropdown
|
||||
size="sm"
|
||||
toggler-text="Secondary"
|
||||
color="secondary"
|
||||
class="m-0 d-inline-block"
|
||||
>
|
||||
<CDropdownItem>First Action</CDropdownItem>
|
||||
<CDropdownItem>Second Action</CDropdownItem>
|
||||
<CDropdownItem>Third Action</CDropdownItem>
|
||||
</CDropdown>
|
||||
<CDropdown
|
||||
size="sm"
|
||||
toggler-text="Success"
|
||||
color="success"
|
||||
class="m-0 d-inline-block"
|
||||
>
|
||||
<CDropdownItem>First Action</CDropdownItem>
|
||||
<CDropdownItem>Second Action</CDropdownItem>
|
||||
<CDropdownItem>Third Action</CDropdownItem>
|
||||
</CDropdown>
|
||||
<CDropdown
|
||||
size="sm"
|
||||
toggler-text="Warning"
|
||||
color="warning"
|
||||
class="m-0 d-inline-block"
|
||||
>
|
||||
<CDropdownItem>First Action</CDropdownItem>
|
||||
<CDropdownItem>Second Action</CDropdownItem>
|
||||
<CDropdownItem>Third Action</CDropdownItem>
|
||||
</CDropdown>
|
||||
<CDropdown
|
||||
size="sm"
|
||||
toggler-text="Danger"
|
||||
color="danger"
|
||||
class="m-0 d-inline-block"
|
||||
>
|
||||
<CDropdownItem>First Action</CDropdownItem>
|
||||
<CDropdownItem>Second Action</CDropdownItem>
|
||||
<CDropdownItem>Third Action</CDropdownItem>
|
||||
</CDropdown>
|
||||
<CDropdown
|
||||
size="sm"
|
||||
toggler-text="Info"
|
||||
color="info"
|
||||
class="m-0 d-inline-block"
|
||||
>
|
||||
<CDropdownItem>First Action</CDropdownItem>
|
||||
<CDropdownItem>Second Action</CDropdownItem>
|
||||
<CDropdownItem>Third Action</CDropdownItem>
|
||||
</CDropdown>
|
||||
<CDropdown
|
||||
size="sm"
|
||||
toggler-text="Light"
|
||||
color="light"
|
||||
class="m-0 d-inline-block"
|
||||
>
|
||||
<CDropdownItem>First Action</CDropdownItem>
|
||||
<CDropdownItem>Second Action</CDropdownItem>
|
||||
<CDropdownItem>Third Action</CDropdownItem>
|
||||
</CDropdown>
|
||||
<CDropdown
|
||||
size="sm"
|
||||
toggler-text="Dark"
|
||||
color="dark"
|
||||
class="m-0 d-inline-block"
|
||||
>
|
||||
<CDropdownItem>First Action</CDropdownItem>
|
||||
<CDropdownItem>Second Action</CDropdownItem>
|
||||
<CDropdownItem>Third Action</CDropdownItem>
|
||||
</CDropdown>
|
||||
<CDropdown
|
||||
size="sm"
|
||||
toggler-text="Link"
|
||||
color="link"
|
||||
class="m-0 d-inline-block"
|
||||
>
|
||||
<CDropdownItem>First Action</CDropdownItem>
|
||||
<CDropdownItem>Second Action</CDropdownItem>
|
||||
<CDropdownItem>Third Action</CDropdownItem>
|
||||
</CDropdown>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'Dropdowns'
|
||||
}
|
||||
</script>
|
||||
704
resources/js/src/views/buttons/StandardButtons.vue
Normal file
704
resources/js/src/views/buttons/StandardButtons.vue
Normal file
@@ -0,0 +1,704 @@
|
||||
<template>
|
||||
<div>
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<strong>Standard buttons</strong>
|
||||
<div class="card-header-actions">
|
||||
<a
|
||||
href="https://coreui.io/vue/docs/components/button-components"
|
||||
class="card-header-action"
|
||||
rel="noreferrer noopener"
|
||||
target="_blank"
|
||||
>
|
||||
<small class="text-muted">docs</small>
|
||||
</a>
|
||||
</div>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CRow class="align-items-center">
|
||||
<CCol col="12" xl class="mb-3 mb-xl-0">
|
||||
Normal
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block color="primary">Primary</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block color="secondary">Secondary</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block color="success">Success</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block color="warning">Warning</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block color="danger">Danger</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block color="info">Info</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block color="light">Light</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block color="dark">Dark</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block color="link">Link</CButton>
|
||||
</CCol>
|
||||
</CRow>
|
||||
<CRow class="align-items-center mt-3">
|
||||
<CCol col="12" xl class="mb-3 mb-xl-0">
|
||||
Active State
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton pressed block color="primary" aria-pressed="true">Primary</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton pressed block color="secondary" aria-pressed="true">Secondary</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton pressed block color="success" aria-pressed="true">Success</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton pressed block color="warning" aria-pressed="true">Warning</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton pressed block color="danger" aria-pressed="true">Danger</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton pressed block color="info" aria-pressed="true">Info</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton pressed block color="light" aria-pressed="true">Light</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton pressed block color="dark" aria-pressed="true">Dark</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton pressed block color="link" aria-pressed="true">Link</CButton>
|
||||
</CCol>
|
||||
</CRow>
|
||||
<CRow class="align-items-center mt-3">
|
||||
<CCol col="12" xl class="mb-3 mb-xl-0">
|
||||
Disabled
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block color="primary" disabled>Primary</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block color="secondary" disabled>Secondary</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block color="success" disabled>Success</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block color="warning" disabled>Warning</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block color="danger" disabled>Danger</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block color="info" disabled>Info</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block color="light" disabled>Light</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block color="dark" disabled>Dark</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block color="link" disabled>Link</CButton>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<strong>Outline Buttons</strong>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p>
|
||||
Use <code>variant="outline"</code> prop
|
||||
</p>
|
||||
<CRow class="align-items-center">
|
||||
<CCol col="12" xl class="mb-3 mb-xl-0">
|
||||
Normal
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block variant="outline" color="primary">Primary</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block variant="outline" color="secondary">Secondary</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block variant="outline" color="success">Success</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block variant="outline" color="warning">Warning</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block variant="outline" color="danger">Danger</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block variant="outline" color="info">Info</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block variant="outline" color="light">Light</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block variant="outline" color="dark">Dark</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0"></CCol>
|
||||
</CRow>
|
||||
<CRow class="align-items-center mt-3">
|
||||
<CCol col="12" xl class="mb-3 mb-xl-0">
|
||||
Active State
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block pressed variant="outline" color="primary" aria-pressed="true">Primary</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block pressed variant="outline" color="secondary" aria-pressed="true">Secondary</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block pressed variant="outline" color="success" aria-pressed="true">Success</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block pressed variant="outline" color="warning" aria-pressed="true">Warning</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block pressed variant="outline" color="danger" aria-pressed="true">Danger</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block pressed variant="outline" color="info" aria-pressed="true">Info</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block pressed variant="outline" color="light" aria-pressed="true">Light</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block pressed variant="outline" color="dark" aria-pressed="true">Dark</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0"></CCol>
|
||||
</CRow>
|
||||
<CRow class="align-items-center mt-3">
|
||||
<CCol col="12" xl class="mb-3 mb-xl-0">
|
||||
Disabled
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block variant="outline" color="primary" disabled>Primary</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block variant="outline" color="secondary" disabled>Secondary</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block variant="outline" color="success" disabled>Success</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block variant="outline" color="warning" disabled>Warning</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block variant="outline" color="danger" disabled>Danger</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block variant="outline" color="info" disabled>Info</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block variant="outline" color="light" disabled>Light</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block variant="outline" color="dark" disabled>Dark</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0"></CCol>
|
||||
</CRow>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<strong>Ghost Buttons</strong>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p>
|
||||
Use
|
||||
<code>variant="ghost"</code> prop for ghost buttons.
|
||||
</p>
|
||||
<CRow class="align-items-center">
|
||||
<CCol col="12" xl class="mb-3 mb-xl-0">
|
||||
Normal
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block variant="ghost" color="primary">Primary</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block variant="ghost" color="secondary">Secondary</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block variant="ghost" color="success">Success</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block variant="ghost" color="warning">Warning</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block variant="ghost" color="danger">Danger</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block variant="ghost" color="info">Info</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block variant="ghost" color="light">Light</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block variant="ghost" color="dark">Dark</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0"></CCol>
|
||||
</CRow>
|
||||
<CRow class="align-items-center mt-3">
|
||||
<CCol col="12" xl class="mb-3 mb-xl-0">
|
||||
Active State
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block pressed variant="ghost" color="primary" aria-pressed="true">Primary</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block pressed variant="ghost" color="secondary" aria-pressed="true">Secondary</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block pressed variant="ghost" color="success" aria-pressed="true">Success</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block pressed variant="ghost" color="warning" aria-pressed="true">Warning</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block pressed variant="ghost" color="danger" aria-pressed="true">Danger</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block pressed variant="ghost" color="info" aria-pressed="true">Info</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block pressed variant="ghost" color="light" aria-pressed="true">Light</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block pressed variant="ghost" color="dark" aria-pressed="true">Dark</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0"></CCol>
|
||||
</CRow>
|
||||
<CRow class="align-items-center mt-3">
|
||||
<CCol col="12" xl class="mb-3 mb-xl-0">
|
||||
Disabled
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block variant="ghost" color="primary" disabled>Primary</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block variant="ghost" color="secondary" disabled>Secondary</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block variant="ghost" color="success" disabled>Success</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block variant="ghost" color="warning" disabled>Warning</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block variant="ghost" color="danger" disabled>Danger</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block variant="ghost" color="info" disabled>Info</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block variant="ghost" color="light" disabled>Light</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block variant="ghost" color="dark" disabled>Dark</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0"></CCol>
|
||||
</CRow>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<strong>Square Buttons</strong>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p>
|
||||
Use
|
||||
<code>square</code> prop for square buttons.
|
||||
</p>
|
||||
<CRow class="align-items-center">
|
||||
<CCol col="12" xl class="mb-3 mb-xl-0">
|
||||
Normal
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block color="primary" square>Primary</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block color="secondary" square>Secondary</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block color="success" square>Success</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block color="warning" square>Warning</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block color="danger" square>Danger</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block color="info" square>Info</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block color="light" square>Light</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block color="dark" square>Dark</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block color="link" square>Link</CButton>
|
||||
</CCol>
|
||||
</CRow>
|
||||
<CRow class="align-items-center mt-3">
|
||||
<CCol col="12" xl class="mb-3 mb-xl-0">
|
||||
Active State
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton pressed block color="primary" square aria-pressed="true">Primary</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton pressed block color="secondary" square aria-pressed="true">Secondary</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton pressed block color="success" square aria-pressed="true">Success</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton pressed block color="warning" square aria-pressed="true">Warning</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton pressed block color="danger" square aria-pressed="true">Danger</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton pressed block color="info" square aria-pressed="true">Info</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton pressed block color="light" square aria-pressed="true">Light</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton pressed block color="dark" square aria-pressed="true">Dark</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton pressed block color="link" square aria-pressed="true">Link</CButton>
|
||||
</CCol>
|
||||
</CRow>
|
||||
<CRow class="align-items-center mt-3">
|
||||
<CCol col="12" xl class="mb-3 mb-xl-0">
|
||||
Disabled
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block color="primary" square disabled>Primary</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block color="secondary" square disabled>Secondary</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block color="success" square disabled>Success</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block color="warning" square disabled>Warning</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block color="danger" square disabled>Danger</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block color="info" square disabled>Info</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block color="light" square disabled>Light</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block color="dark" square disabled>Dark</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block color="link" square disabled>Link</CButton>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<strong>Pill Buttons</strong>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p>
|
||||
Use
|
||||
<code>pill</code> prop for pill buttons.
|
||||
</p>
|
||||
<CRow class="align-items-center">
|
||||
<CCol col="12" xl class="mb-3 mb-xl-0">
|
||||
Normal
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block color="primary" shape="pill">Primary</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block color="secondary" shape="pill">Secondary</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block color="success" shape="pill">Success</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block color="warning" shape="pill">Warning</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block color="danger" shape="pill">Danger</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block color="info" shape="pill">Info</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block color="light" shape="pill">Light</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block color="dark" shape="pill">Dark</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block color="link" shape="pill">Link</CButton>
|
||||
</CCol>
|
||||
</CRow>
|
||||
<CRow class="align-items-center mt-3">
|
||||
<CCol col="12" xl class="mb-3 mb-xl-0">
|
||||
Active State
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton pressed block color="primary" shape="pill" aria-pressed="true">Primary</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton pressed block color="secondary" shape="pill" aria-pressed="true">Secondary</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton pressed block color="success" shape="pill" aria-pressed="true">Success</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton pressed block color="warning" shape="pill" aria-pressed="true">Warning</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton pressed block color="danger" shape="pill" aria-pressed="true">Danger</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton pressed block color="info" shape="pill" aria-pressed="true">Info</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton pressed block color="light" shape="pill" aria-pressed="true">Light</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton pressed block color="dark" shape="pill" aria-pressed="true">Dark</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton pressed block color="link" shape="pill" aria-pressed="true">Link</CButton>
|
||||
</CCol>
|
||||
</CRow>
|
||||
<CRow class="align-items-center mt-3">
|
||||
<CCol col="12" xl class="mb-3 mb-xl-0">
|
||||
Disabled
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block color="primary" shape="pill" disabled>Primary</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block color="secondary" shape="pill" disabled>Secondary</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block color="success" shape="pill" disabled>Success</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block color="warning" shape="pill" disabled>Warning</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block color="danger" shape="pill" disabled>Danger</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block color="info" shape="pill" disabled>Info</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block color="light" shape="pill" disabled>Light</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block color="dark" shape="pill" disabled>Dark</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
|
||||
<CButton block color="link" shape="pill" disabled>Link</CButton>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<strong>Sizes</strong>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p>Fancy larger or smaller buttons? Add <code>size="lg"</code> or <code>size="sm"</code> for additional sizes.</p>
|
||||
<CRow class="align-items-center">
|
||||
<CCol col="2" xl class="mb-3 mb-xl-0">
|
||||
Small
|
||||
</CCol>
|
||||
<CCol col="2" class="mb-3 mb-xl-0 text-center">
|
||||
<CButton color="primary" size="sm">Standard Button</CButton>
|
||||
</CCol>
|
||||
<CCol col="2" class="mb-3 mb-xl-0 text-center">
|
||||
<CButton variant="outline" color="secondary" size="sm">Outline Button</CButton>
|
||||
</CCol>
|
||||
<CCol col="2" class="mb-3 mb-xl-0 text-center">
|
||||
<CButton size="sm" variant="ghost" color="success">Ghost Button</CButton>
|
||||
</CCol>
|
||||
<CCol col="2" class="mb-3 mb-xl-0 text-center">
|
||||
<CButton color="warning" size="sm" square>Square Button</CButton>
|
||||
</CCol>
|
||||
<CCol col="2" class="mb-3 mb-xl-0 text-center">
|
||||
<CButton color="danger" size="sm" shape="pill">Pill Button</CButton>
|
||||
</CCol>
|
||||
</CRow>
|
||||
<CRow class="align-items-center mt-3">
|
||||
<CCol col="2" xl class="mb-3 mb-xl-0">
|
||||
Normal
|
||||
</CCol>
|
||||
<CCol col="2" class="mb-3 mb-xl-0 text-center">
|
||||
<CButton color="primary">Standard Button</CButton>
|
||||
</CCol>
|
||||
<CCol col="2" class="mb-3 mb-xl-0 text-center">
|
||||
<CButton variant="outline" color="secondary">Outline Button</CButton>
|
||||
</CCol>
|
||||
<CCol col="2" class="mb-3 mb-xl-0 text-center">
|
||||
<CButton variant="ghost" color="success">Ghost Button</CButton>
|
||||
</CCol>
|
||||
<CCol col="2" class="mb-3 mb-xl-0 text-center">
|
||||
<CButton color="warning" square>Square Button</CButton>
|
||||
</CCol>
|
||||
<CCol col="2" class="mb-3 mb-xl-0 text-center">
|
||||
<CButton color="danger" shape="pill">Pill Button</CButton>
|
||||
</CCol>
|
||||
</CRow>
|
||||
<CRow class="align-items-center mt-3">
|
||||
<CCol col="2" xl class="mb-3 mb-xl-0">
|
||||
Large
|
||||
</CCol>
|
||||
<CCol col="2" class="mb-3 mb-xl-0 text-center">
|
||||
<CButton color="primary" size="lg">Standard Button</CButton>
|
||||
</CCol>
|
||||
<CCol col="2" class="mb-3 mb-xl-0 text-center">
|
||||
<CButton variant="outline" color="secondary" size="lg">Outline Button</CButton>
|
||||
</CCol>
|
||||
<CCol col="2" class="mb-3 mb-xl-0 text-center">
|
||||
<CButton variant="ghost" color="success" size="lg">Ghost Button</CButton>
|
||||
</CCol>
|
||||
<CCol col="2" class="mb-3 mb-xl-0 text-center">
|
||||
<CButton color="warning" size="lg" square>Square Button</CButton>
|
||||
</CCol>
|
||||
<CCol col="2" class="mb-3 mb-xl-0 text-center">
|
||||
<CButton color="danger" size="lg" shape="pill">Pill Button</CButton>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<strong>With Icons</strong>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CRow class="align-items-center">
|
||||
<CCol sm xs="12" class="text-center mt-3">
|
||||
<CButton color="primary">
|
||||
<CIcon name="cil-lightbulb"/> Standard Button
|
||||
</CButton>
|
||||
</CCol>
|
||||
<CCol sm xs="12" class="text-center mt-3">
|
||||
<CButton color="secondary" variant="outline">
|
||||
<CIcon name="cil-lightbulb"/> Outline Button
|
||||
</CButton>
|
||||
</CCol>
|
||||
<CCol sm xs="12" class="text-center mt-3">
|
||||
<CButton color="success">
|
||||
<CIcon name="cil-lightbulb"/> Ghost Button
|
||||
</CButton>
|
||||
</CCol>
|
||||
<CCol sm xs="12" class="text-center mt-3">
|
||||
<CButton color="warning" square>
|
||||
<CIcon name="cil-lightbulb"/> Square Button
|
||||
</CButton>
|
||||
</CCol>
|
||||
<CCol sm xs="12" class="text-center mt-3">
|
||||
<CButton color="danger" shape="pill">
|
||||
<CIcon name="cil-lightbulb"/> Pill Button
|
||||
</CButton>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<strong>Toggle pressed state</strong>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CRow>
|
||||
<CCol sm xs="12" class="text-center mt-3">
|
||||
<CButton variant="outline" color="primary" :pressed.sync="togglePress">Primary {{togglePress ? 'On ' : 'Off'}}</CButton>
|
||||
</CCol>
|
||||
<CCol sm xs="12" class="text-center mt-3">
|
||||
<CButton variant="outline" color="secondary" :pressed.sync="togglePress">Secondary {{togglePress ? 'On ' : 'Off'}}</CButton>
|
||||
</CCol>
|
||||
<CCol sm xs="12" class="text-center mt-3">
|
||||
<CButton variant="outline" color="success" :pressed.sync="togglePress">Success {{togglePress ? 'On ' : 'Off'}}</CButton>
|
||||
</CCol>
|
||||
<CCol sm xs="12" class="text-center mt-3">
|
||||
<CButton variant="outline" color="info" :pressed.sync="togglePress">Info {{togglePress ? 'On ' : 'Off'}}</CButton>
|
||||
</CCol>
|
||||
<CCol sm xs="12" class="text-center mt-3">
|
||||
<CButton variant="outline" color="warning" :pressed.sync="togglePress">Warning {{togglePress ? 'On ' : 'Off'}}</CButton>
|
||||
</CCol>
|
||||
<CCol sm xs="12" class="text-center mt-3">
|
||||
<CButton variant="outline" color="danger" :pressed.sync="togglePress">Danger {{togglePress ? 'On ' : 'Off'}}</CButton>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
<CRow>
|
||||
<CCol xs="12" md="6">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<strong>Block Level CButtons </strong><small>Add this <code>block</code></small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CButton size="lg" color="secondary" block>Block level button</CButton>
|
||||
<CButton size="lg" color="primary" block>Block level button</CButton>
|
||||
<CButton size="lg" color="success" block>Block level button</CButton>
|
||||
<CButton size="lg" color="info" block>Block level button</CButton>
|
||||
<CButton size="lg" color="warning" block>Block level button</CButton>
|
||||
<CButton size="lg" color="danger" block>Block level button</CButton>
|
||||
<CButton size="lg" color="link" block>Block level button</CButton>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs="12" md="6">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<strong>Block Level CButtons </strong><small>Add this <code>block</code></small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CButton size="lg" variant="outline" color="secondary" block>Block level button</CButton>
|
||||
<CButton size="lg" variant="outline" color="primary" block>Block level button</CButton>
|
||||
<CButton size="lg" variant="outline" color="success" block>Block level button</CButton>
|
||||
<CButton size="lg" variant="outline" color="info" block>Block level button</CButton>
|
||||
<CButton size="lg" variant="outline" color="warning" block>Block level button</CButton>
|
||||
<CButton size="lg" variant="outline" color="danger" block>Block level button</CButton>
|
||||
<CButton size="lg" variant="ghost" color="info" block>Block level button</CButton>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'StandardButtons',
|
||||
data () {
|
||||
return { togglePress: false }
|
||||
}
|
||||
}
|
||||
</script>
|
||||
26
resources/js/src/views/charts/CChartBarExample.vue
Normal file
26
resources/js/src/views/charts/CChartBarExample.vue
Normal file
@@ -0,0 +1,26 @@
|
||||
<template>
|
||||
<CChartBar
|
||||
:datasets="defaultDatasets"
|
||||
labels="months"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { CChartBar } from '@coreui/vue-chartjs'
|
||||
|
||||
export default {
|
||||
name: 'CChartBarExample',
|
||||
components: { CChartBar },
|
||||
computed: {
|
||||
defaultDatasets () {
|
||||
return [
|
||||
{
|
||||
label: 'GitHub Commits',
|
||||
backgroundColor: '#f87979',
|
||||
data: [40, 20, 12, 39, 10, 40, 39, 80, 40, 20, 12, 11]
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
70
resources/js/src/views/charts/CChartBarSimple.vue
Normal file
70
resources/js/src/views/charts/CChartBarSimple.vue
Normal file
@@ -0,0 +1,70 @@
|
||||
<template>
|
||||
<CChartBar
|
||||
:datasets="computedDatasets"
|
||||
:options="computedOptions"
|
||||
:labels="labels"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { CChartBar } from '@coreui/vue-chartjs'
|
||||
import { getColor, deepObjectsMerge } from '@coreui/utils/src'
|
||||
|
||||
export default {
|
||||
name: 'CChartBarSimple',
|
||||
components: { CChartBar },
|
||||
props: {
|
||||
...CChartBar.props,
|
||||
backgroundColor: {
|
||||
type: String,
|
||||
default: 'rgba(0,0,0,.2)'
|
||||
},
|
||||
pointHoverBackgroundColor: String,
|
||||
dataPoints: {
|
||||
type: Array,
|
||||
default: () => [10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]
|
||||
},
|
||||
label: {
|
||||
type: String,
|
||||
default: 'Sales'
|
||||
},
|
||||
pointed: Boolean
|
||||
},
|
||||
computed: {
|
||||
defaultDatasets () {
|
||||
return [
|
||||
{
|
||||
data: this.dataPoints,
|
||||
backgroundColor: getColor(this.backgroundColor),
|
||||
pointHoverBackgroundColor: getColor(this.pointHoverBackgroundColor),
|
||||
label: this.label,
|
||||
barPercentage: 0.5,
|
||||
categoryPercentage: 1
|
||||
}
|
||||
]
|
||||
},
|
||||
defaultOptions () {
|
||||
return {
|
||||
maintainAspectRatio: false,
|
||||
legend: {
|
||||
display: false
|
||||
},
|
||||
scales: {
|
||||
xAxes: [{
|
||||
display: false
|
||||
}],
|
||||
yAxes: [{
|
||||
display: false
|
||||
}]
|
||||
}
|
||||
}
|
||||
},
|
||||
computedDatasets () {
|
||||
return deepObjectsMerge(this.defaultDatasets, this.datasets || {})
|
||||
},
|
||||
computedOptions () {
|
||||
return deepObjectsMerge(this.defaultOptions, this.options || {})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
30
resources/js/src/views/charts/CChartDoughnutExample.vue
Normal file
30
resources/js/src/views/charts/CChartDoughnutExample.vue
Normal file
@@ -0,0 +1,30 @@
|
||||
<template>
|
||||
<CChartDoughnut
|
||||
:datasets="defaultDatasets"
|
||||
:labels="['VueJs', 'EmberJs', 'ReactJs', 'AngularJs']"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { CChartDoughnut } from '@coreui/vue-chartjs'
|
||||
|
||||
export default {
|
||||
name: 'CChartDoughnutExample',
|
||||
components: { CChartDoughnut },
|
||||
computed: {
|
||||
defaultDatasets () {
|
||||
return [
|
||||
{
|
||||
backgroundColor: [
|
||||
'#41B883',
|
||||
'#E46651',
|
||||
'#00D8FF',
|
||||
'#DD1B16'
|
||||
],
|
||||
data: [40, 20, 80, 10]
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
31
resources/js/src/views/charts/CChartLineExample.vue
Normal file
31
resources/js/src/views/charts/CChartLineExample.vue
Normal file
@@ -0,0 +1,31 @@
|
||||
<template>
|
||||
<CChartLine
|
||||
:datasets="defaultDatasets"
|
||||
labels="months"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { CChartLine } from '@coreui/vue-chartjs'
|
||||
|
||||
export default {
|
||||
name: 'CChartLineExample',
|
||||
components: { CChartLine },
|
||||
computed: {
|
||||
defaultDatasets () {
|
||||
return [
|
||||
{
|
||||
label: 'Data One',
|
||||
backgroundColor: 'rgb(228,102,81,0.9)',
|
||||
data: [30, 39, 10, 50, 30, 70, 35]
|
||||
},
|
||||
{
|
||||
label: 'Data Two',
|
||||
backgroundColor: 'rgb(0,216,255,0.9)',
|
||||
data: [39, 80, 40, 35, 40, 20, 45]
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
136
resources/js/src/views/charts/CChartLineSimple.vue
Normal file
136
resources/js/src/views/charts/CChartLineSimple.vue
Normal file
@@ -0,0 +1,136 @@
|
||||
<template>
|
||||
<CChartLine
|
||||
:datasets="computedDatasets"
|
||||
:options="computedOptions"
|
||||
:labels="labels"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { CChartLine } from '@coreui/vue-chartjs'
|
||||
import { getColor, deepObjectsMerge } from '@coreui/utils/src'
|
||||
|
||||
export default {
|
||||
name: 'CChartLineSimple',
|
||||
components: { CChartLine },
|
||||
props: {
|
||||
...CChartLine.props,
|
||||
borderColor: {
|
||||
type: String,
|
||||
default: 'rgba(255,255,255,.55)'
|
||||
},
|
||||
backgroundColor: {
|
||||
type: String,
|
||||
default: 'transparent'
|
||||
},
|
||||
dataPoints: {
|
||||
type: Array,
|
||||
default: () => [10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]
|
||||
},
|
||||
label: {
|
||||
type: String,
|
||||
default: 'Sales'
|
||||
},
|
||||
pointed: Boolean,
|
||||
pointHoverBackgroundColor: String
|
||||
},
|
||||
computed: {
|
||||
pointHoverColor () {
|
||||
if (this.pointHoverBackgroundColor) {
|
||||
return this.pointHoverBackgroundColor
|
||||
} else if (this.backgroundColor !== 'transparent') {
|
||||
return this.backgroundColor
|
||||
}
|
||||
return this.borderColor
|
||||
},
|
||||
defaultDatasets () {
|
||||
return [
|
||||
{
|
||||
data: this.dataPoints,
|
||||
borderColor: getColor(this.borderColor),
|
||||
backgroundColor: getColor(this.backgroundColor),
|
||||
pointBackgroundColor: getColor(this.pointHoverColor),
|
||||
pointHoverBackgroundColor: getColor(this.pointHoverColor),
|
||||
label: this.label
|
||||
}
|
||||
]
|
||||
},
|
||||
pointedOptions () {
|
||||
return {
|
||||
scales: {
|
||||
xAxes: [
|
||||
{
|
||||
offset: true,
|
||||
gridLines: {
|
||||
color: 'transparent',
|
||||
zeroLineColor: 'transparent'
|
||||
},
|
||||
ticks: {
|
||||
fontSize: 2,
|
||||
fontColor: 'transparent'
|
||||
}
|
||||
}
|
||||
],
|
||||
yAxes: [
|
||||
{
|
||||
display: false,
|
||||
ticks: {
|
||||
display: false,
|
||||
min: Math.min.apply(Math, this.dataPoints) - 5,
|
||||
max: Math.max.apply(Math, this.dataPoints) + 5
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
elements: {
|
||||
line: {
|
||||
borderWidth: 1
|
||||
},
|
||||
point: {
|
||||
radius: 4,
|
||||
hitRadius: 10,
|
||||
hoverRadius: 4
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
straightOptions () {
|
||||
return {
|
||||
scales: {
|
||||
xAxes: [{
|
||||
display: false
|
||||
}],
|
||||
yAxes: [{
|
||||
display: false
|
||||
}]
|
||||
},
|
||||
elements: {
|
||||
line: {
|
||||
borderWidth: 2
|
||||
},
|
||||
point: {
|
||||
radius: 0,
|
||||
hitRadius: 10,
|
||||
hoverRadius: 4
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
defaultOptions () {
|
||||
const options = this.pointed ? this.pointedOptions : this.straightOptions
|
||||
return Object.assign({}, options, {
|
||||
maintainAspectRatio: false,
|
||||
legend: {
|
||||
display: false
|
||||
}
|
||||
})
|
||||
},
|
||||
computedDatasets () {
|
||||
return deepObjectsMerge(this.defaultDatasets, this.datasets || {})
|
||||
},
|
||||
computedOptions () {
|
||||
return deepObjectsMerge(this.defaultOptions, this.options || {})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
30
resources/js/src/views/charts/CChartPieExample.vue
Normal file
30
resources/js/src/views/charts/CChartPieExample.vue
Normal file
@@ -0,0 +1,30 @@
|
||||
<template>
|
||||
<CChartPie
|
||||
:datasets="defaultDatasets"
|
||||
:labels="['VueJs', 'EmberJs', 'ReactJs', 'AngularJs']"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { CChartPie } from '@coreui/vue-chartjs'
|
||||
|
||||
export default {
|
||||
name: 'CChartPieExample',
|
||||
components: { CChartPie },
|
||||
computed: {
|
||||
defaultDatasets () {
|
||||
return [
|
||||
{
|
||||
backgroundColor: [
|
||||
'#41B883',
|
||||
'#E46651',
|
||||
'#00D8FF',
|
||||
'#DD1B16'
|
||||
],
|
||||
data: [40, 20, 80, 10]
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
48
resources/js/src/views/charts/CChartPolarAreaExample.vue
Normal file
48
resources/js/src/views/charts/CChartPolarAreaExample.vue
Normal file
@@ -0,0 +1,48 @@
|
||||
<template>
|
||||
<CChartPolarArea
|
||||
:datasets="defaultDatasets"
|
||||
:options="defaultOptions"
|
||||
:labels="[
|
||||
'Eating', 'Drinking', 'Sleeping', 'Designing',
|
||||
'Coding', 'Cycling', 'Running'
|
||||
]"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { CChartPolarArea } from '@coreui/vue-chartjs'
|
||||
|
||||
export default {
|
||||
name: 'CChartPolarAreaExample',
|
||||
components: { CChartPolarArea },
|
||||
computed: {
|
||||
defaultDatasets () {
|
||||
return [
|
||||
{
|
||||
label: 'My First dataset',
|
||||
backgroundColor: 'rgba(179,181,198,0.2)',
|
||||
pointBackgroundColor: 'rgba(179,181,198,1)',
|
||||
pointBorderColor: '#fff',
|
||||
pointHoverBackgroundColor: 'rgba(179,181,198,1)',
|
||||
pointHoverBorderColor: 'rgba(179,181,198,1)',
|
||||
data: [65, 59, 90, 81, 56, 55, 40]
|
||||
},
|
||||
{
|
||||
label: 'My Second dataset',
|
||||
backgroundColor: 'rgba(255,99,132,0.2)',
|
||||
pointBackgroundColor: 'rgba(255,99,132,1)',
|
||||
pointBorderColor: '#fff',
|
||||
pointHoverBackgroundColor: 'rgba(255,99,132,1)',
|
||||
pointHoverBorderColor: 'rgba(255,99,132,1)',
|
||||
data: [28, 48, 40, 19, 96, 27, 100]
|
||||
}
|
||||
]
|
||||
},
|
||||
defaultOptions () {
|
||||
return {
|
||||
aspectRatio: 1.5
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
52
resources/js/src/views/charts/CChartRadarExample.vue
Normal file
52
resources/js/src/views/charts/CChartRadarExample.vue
Normal file
@@ -0,0 +1,52 @@
|
||||
<template>
|
||||
<CChartRadar
|
||||
:datasets="defaultDatasets"
|
||||
:options="defaultOptions"
|
||||
:labels="[
|
||||
'Eating', 'Drinking', 'Sleeping', 'Designing',
|
||||
'Coding', 'Cycling', 'Running'
|
||||
]"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { CChartRadar } from '@coreui/vue-chartjs'
|
||||
|
||||
export default {
|
||||
name: 'CChartRadarExample',
|
||||
components: { CChartRadar },
|
||||
computed: {
|
||||
defaultDatasets () {
|
||||
return [
|
||||
{
|
||||
label: '2019',
|
||||
backgroundColor: 'rgba(179,181,198,0.2)',
|
||||
borderColor: 'rgba(179,181,198,1)',
|
||||
pointBackgroundColor: 'rgba(179,181,198,1)',
|
||||
pointBorderColor: '#fff',
|
||||
pointHoverBackgroundColor: '#fff',
|
||||
pointHoverBorderColor: 'rgba(179,181,198,1)',
|
||||
tooltipLabelColor: 'rgba(179,181,198,1)',
|
||||
data: [65, 59, 90, 81, 56, 55, 40]
|
||||
},
|
||||
{
|
||||
label: '2020',
|
||||
backgroundColor: 'rgba(255,99,132,0.2)',
|
||||
borderColor: 'rgba(255,99,132,1)',
|
||||
pointBackgroundColor: 'rgba(255,99,132,1)',
|
||||
pointBorderColor: '#fff',
|
||||
pointHoverBackgroundColor: '#fff',
|
||||
pointHoverBorderColor: 'rgba(255,99,132,1)',
|
||||
tooltipLabelColor: 'rgba(255,99,132,1)',
|
||||
data: [28, 48, 40, 19, 96, 27, 100]
|
||||
}
|
||||
]
|
||||
},
|
||||
defaultOptions () {
|
||||
return {
|
||||
aspectRatio: 1.5
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
68
resources/js/src/views/charts/Charts.vue
Normal file
68
resources/js/src/views/charts/Charts.vue
Normal file
@@ -0,0 +1,68 @@
|
||||
<template>
|
||||
<div>
|
||||
<CCardGroup columns class="card-columns cols-2">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
Line Chart
|
||||
<div class="card-header-actions">
|
||||
<a
|
||||
href="https://coreui.io/vue/docs/components/charts"
|
||||
class="card-header-action"
|
||||
rel="noreferrer noopener"
|
||||
target="_blank"
|
||||
>
|
||||
<small class="text-muted">docs</small>
|
||||
</a>
|
||||
</div>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CChartLineExample/>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
<CCard>
|
||||
<CCardHeader>Bar Chart</CCardHeader>
|
||||
<CCardBody><CChartBarExample/></CCardBody>
|
||||
</CCard>
|
||||
<CCard>
|
||||
<CCardHeader>Doughnut Chart</CCardHeader>
|
||||
<CCardBody><CChartDoughnutExample/></CCardBody>
|
||||
</CCard>
|
||||
<CCard>
|
||||
<CCardHeader>Radar Chart</CCardHeader>
|
||||
<CCardBody><CChartRadarExample/></CCardBody>
|
||||
</CCard>
|
||||
<CCard>
|
||||
<CCardHeader>Pie Chart</CCardHeader>
|
||||
<CCardBody><CChartPieExample/></CCardBody>
|
||||
</CCard>
|
||||
<CCard>
|
||||
<CCardHeader>Polar Area Chart</CCardHeader>
|
||||
<CCardBody><CChartPolarAreaExample/></CCardBody>
|
||||
</CCard>
|
||||
<CCard>
|
||||
<CCardHeader>Simple line chart</CCardHeader>
|
||||
<CCardBody>
|
||||
<CChartLineSimple border-color="success" labels="months"/>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
<CCard>
|
||||
<CCardHeader>Simple pointed chart</CCardHeader>
|
||||
<CCardBody><CChartLineSimple pointed border-color="warning"/></CCardBody>
|
||||
</CCard>
|
||||
<CCard>
|
||||
<CCardHeader>Simple bar chart</CCardHeader>
|
||||
<CCardBody><CChartBarSimple background-color="danger"/></CCardBody>
|
||||
</CCard>
|
||||
</CCardGroup>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as Charts from './index.js'
|
||||
export default {
|
||||
name: 'Charts',
|
||||
components: {
|
||||
...Charts
|
||||
}
|
||||
}
|
||||
</script>
|
||||
103
resources/js/src/views/charts/MainChartExample.vue
Normal file
103
resources/js/src/views/charts/MainChartExample.vue
Normal file
@@ -0,0 +1,103 @@
|
||||
<template>
|
||||
<CChartLine
|
||||
:datasets="defaultDatasets"
|
||||
:options="defaultOptions"
|
||||
:labels="['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su']"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { CChartLine } from '@coreui/vue-chartjs'
|
||||
import { getStyle, hexToRgba } from '@coreui/utils/src'
|
||||
|
||||
function random (min, max) {
|
||||
return Math.floor(Math.random() * (max - min + 1) + min)
|
||||
}
|
||||
|
||||
export default {
|
||||
name: 'MainChartExample',
|
||||
components: {
|
||||
CChartLine
|
||||
},
|
||||
computed: {
|
||||
defaultDatasets () {
|
||||
const brandSuccess = getStyle('success2') || '#4dbd74'
|
||||
const brandInfo = getStyle('info') || '#20a8d8'
|
||||
const brandDanger = getStyle('danger') || '#f86c6b'
|
||||
|
||||
let elements = 27
|
||||
const data1 = []
|
||||
const data2 = []
|
||||
const data3 = []
|
||||
|
||||
for (let i = 0; i <= elements; i++) {
|
||||
data1.push(random(50, 200))
|
||||
data2.push(random(80, 100))
|
||||
data3.push(65)
|
||||
}
|
||||
return [
|
||||
{
|
||||
label: 'My First dataset',
|
||||
backgroundColor: hexToRgba(brandInfo, 10),
|
||||
borderColor: brandInfo,
|
||||
pointHoverBackgroundColor: brandInfo,
|
||||
borderWidth: 2,
|
||||
data: data1
|
||||
},
|
||||
{
|
||||
label: 'My Second dataset',
|
||||
backgroundColor: 'transparent',
|
||||
borderColor: brandSuccess,
|
||||
pointHoverBackgroundColor: brandSuccess,
|
||||
borderWidth: 2,
|
||||
data: data2
|
||||
},
|
||||
{
|
||||
label: 'My Third dataset',
|
||||
backgroundColor: 'transparent',
|
||||
borderColor: brandDanger,
|
||||
pointHoverBackgroundColor: brandDanger,
|
||||
borderWidth: 1,
|
||||
borderDash: [8, 5],
|
||||
data: data3
|
||||
}
|
||||
]
|
||||
},
|
||||
defaultOptions () {
|
||||
return {
|
||||
|
||||
maintainAspectRatio: false,
|
||||
legend: {
|
||||
display: false
|
||||
},
|
||||
scales: {
|
||||
xAxes: [{
|
||||
gridLines: {
|
||||
drawOnChartArea: false
|
||||
}
|
||||
}],
|
||||
yAxes: [{
|
||||
ticks: {
|
||||
beginAtZero: true,
|
||||
maxTicksLimit: 5,
|
||||
stepSize: Math.ceil(250 / 5),
|
||||
max: 250
|
||||
},
|
||||
gridLines: {
|
||||
display: true
|
||||
}
|
||||
}]
|
||||
},
|
||||
elements: {
|
||||
point: {
|
||||
radius: 0,
|
||||
hitRadius: 10,
|
||||
hoverRadius: 4,
|
||||
hoverBorderWidth: 3
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
19
resources/js/src/views/charts/index.js
Normal file
19
resources/js/src/views/charts/index.js
Normal file
@@ -0,0 +1,19 @@
|
||||
import CChartLineSimple from './CChartLineSimple'
|
||||
import CChartBarSimple from './CChartBarSimple'
|
||||
import CChartLineExample from './CChartLineExample'
|
||||
import CChartBarExample from './CChartBarExample'
|
||||
import CChartDoughnutExample from './CChartDoughnutExample'
|
||||
import CChartRadarExample from './CChartRadarExample'
|
||||
import CChartPieExample from './CChartPieExample'
|
||||
import CChartPolarAreaExample from './CChartPolarAreaExample'
|
||||
|
||||
export {
|
||||
CChartLineSimple,
|
||||
CChartBarSimple,
|
||||
CChartLineExample,
|
||||
CChartBarExample,
|
||||
CChartDoughnutExample,
|
||||
CChartRadarExample,
|
||||
CChartPieExample,
|
||||
CChartPolarAreaExample
|
||||
}
|
||||
14
resources/js/src/views/documents/Create.vue
Normal file
14
resources/js/src/views/documents/Create.vue
Normal file
@@ -0,0 +1,14 @@
|
||||
<template>
|
||||
<CDetail />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import CDetail from "../../components/document/Detail";
|
||||
|
||||
export default {
|
||||
name: "Create",
|
||||
components: {
|
||||
CDetail,
|
||||
},
|
||||
};
|
||||
</script>
|
||||
78
resources/js/src/views/documents/Document.vue
Normal file
78
resources/js/src/views/documents/Document.vue
Normal file
@@ -0,0 +1,78 @@
|
||||
<template>
|
||||
<div>
|
||||
<CDetail :documentId.sync="documentId" @update="onUpdateDetail" />
|
||||
<CAttachments :documentId.sync="documentId" />
|
||||
<CReceivers v-if="!isDocumentOutcome" :documentId.sync="documentId" />
|
||||
<CRecipients v-if="isDocumentOutcome" :documentId.sync="documentId" />
|
||||
<CLinkDocument :isOutcome="isDocumentOutcome" :documentId.sync="documentId" @redirectTo="redirectTo" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import services from "../../services/factory";
|
||||
import CDetail from "../../components/document/Detail";
|
||||
import CAttachments from "../../components/document/Attachments";
|
||||
import CReceivers from "../../components/document/Receivers";
|
||||
import CRecipients from "../../components/document/Recipients";
|
||||
import CLinkDocument from "../../components/document/CLinkDocument";
|
||||
|
||||
export default {
|
||||
name: "Document",
|
||||
components: {
|
||||
CDetail,
|
||||
CAttachments,
|
||||
CReceivers,
|
||||
CRecipients,
|
||||
CLinkDocument,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
documentId: "",
|
||||
document: {}
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
$route: {
|
||||
immediate: true,
|
||||
handler(route) {
|
||||
if (route.params && route.params.document) {
|
||||
this.documentId = route.params.document;
|
||||
this.init();
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.init();
|
||||
},
|
||||
methods: {
|
||||
init(){
|
||||
this.fetch()
|
||||
},
|
||||
async fetch() {
|
||||
const documentResponse = await services.document.get(this.documentId).catch(error => {
|
||||
this.toastHttpError(error);
|
||||
this.goBack()
|
||||
});
|
||||
this.document = documentResponse.data;
|
||||
},
|
||||
rowClicked(item, index) {
|
||||
this.$router.push({ path: `/documents/${item.id}` });
|
||||
},
|
||||
onUpdateDetail(document) {
|
||||
this.document = document;
|
||||
},
|
||||
redirectTo(id){
|
||||
this.$router.push({ path: `/documents/${id}` });
|
||||
},
|
||||
goBack() {
|
||||
this.$router.go(-1)
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
isDocumentOutcome() {
|
||||
return this.document.book_id == 2;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
209
resources/js/src/views/documents/Documents.vue
Normal file
209
resources/js/src/views/documents/Documents.vue
Normal file
@@ -0,0 +1,209 @@
|
||||
<template>
|
||||
<CRow>
|
||||
<CCol col="12">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<CIcon name="cil-grid" />Danh sách văn bản
|
||||
<CButton
|
||||
size="sm"
|
||||
@click="goCreate"
|
||||
class="float-right"
|
||||
color="primary"
|
||||
variant="outline"
|
||||
v-c-tooltip="'Tạo mới'"
|
||||
>
|
||||
<CIcon name="cil-plus" />
|
||||
</CButton>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CSearchBox :fields="searchFields" @searching="searching" />
|
||||
<CDataTable
|
||||
hover
|
||||
striped
|
||||
:loading="loading"
|
||||
:items="items"
|
||||
:fields="fields"
|
||||
clickable-rows
|
||||
@row-clicked="rowClicked"
|
||||
>
|
||||
<template #publisher="{item}">
|
||||
<td>{{item.publisher.name}}</td>
|
||||
</template>
|
||||
<template #type="{item}">
|
||||
<td>{{item.type.name}}</td>
|
||||
</template>
|
||||
<template #abstract="{item}">
|
||||
<td>
|
||||
<label :class="!item.seen ? highlightStyle : ''">{{item.abstract}}</label>
|
||||
</td>
|
||||
</template>
|
||||
</CDataTable>
|
||||
<CPagination
|
||||
align="center"
|
||||
:pages="pages"
|
||||
:active-page.sync="currentPage"
|
||||
:activePage="currentPage"
|
||||
/>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import services from "../../services/factory";
|
||||
import CSearchBox from "../../components/SearchBox";
|
||||
|
||||
export default {
|
||||
name: "Documents",
|
||||
components: {
|
||||
CSearchBox,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
loading: true,
|
||||
items: null,
|
||||
currentPage: 1,
|
||||
pages: 0,
|
||||
size: 0,
|
||||
searchValue: "",
|
||||
searchField: "symbol",
|
||||
bookId: null,
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.fetch();
|
||||
},
|
||||
watch: {
|
||||
$route: {
|
||||
immediate: true,
|
||||
handler(route) {
|
||||
if (route.params && route.params.book) {
|
||||
this.bookId = route.params.book;
|
||||
}
|
||||
if (route.query && route.query.page) {
|
||||
this.currentPage = Number(route.query.page);
|
||||
}
|
||||
},
|
||||
},
|
||||
currentPage: {
|
||||
handler(page) {
|
||||
this.pageChange(page);
|
||||
this.currentPage = page;
|
||||
this.fetch();
|
||||
},
|
||||
},
|
||||
bookId: {
|
||||
handler(page) {
|
||||
this.fetch();
|
||||
},
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
query() {
|
||||
return {
|
||||
...this.withQuery,
|
||||
...this.pageQuery,
|
||||
...this.searchQuery,
|
||||
...this.orderQuery,
|
||||
};
|
||||
},
|
||||
orderQuery() {
|
||||
return {
|
||||
orderBy: "created_at",
|
||||
sortedBy: "desc",
|
||||
};
|
||||
},
|
||||
pageQuery() {
|
||||
return this.currentPage ? { page: this.currentPage } : {};
|
||||
},
|
||||
withQuery() {
|
||||
return {
|
||||
with: "publisher;type",
|
||||
};
|
||||
},
|
||||
searchQuery() {
|
||||
return {
|
||||
search:
|
||||
`book.id:${this.bookId}` +
|
||||
(this.searchField && this.searchValue != null
|
||||
? ";" + (this.searchField + ":" + this.searchValue)
|
||||
: ""),
|
||||
searchJoin: "and",
|
||||
};
|
||||
},
|
||||
isDocumentsIncome() {
|
||||
return this.bookId == 1;
|
||||
},
|
||||
fields() {
|
||||
return [
|
||||
{ key: "symbol", label: "Số ký hiệu" },
|
||||
{
|
||||
key: "abstract",
|
||||
label: "Trích yếu",
|
||||
_classes: "w-50 font-weight-bold",
|
||||
},
|
||||
{ key: "type", label: "Loại" },
|
||||
{ key: "publisher", label: "Nơi ban hành" },
|
||||
{
|
||||
key: "effective_at",
|
||||
label: this.isDocumentsIncome ? "Ngày nhận" : "Ngày ban hành",
|
||||
},
|
||||
];
|
||||
},
|
||||
searchFields() {
|
||||
return [
|
||||
{ value: "symbol", label: "Số ký hiệu" },
|
||||
{ value: "abstract", label: "Trích yếu" },
|
||||
{ value: "type.name", label: "Loại" },
|
||||
{ value: "creator.name", label: "Người soạn" },
|
||||
{ value: "signer.name", label: "Người ký" },
|
||||
{
|
||||
value: "effective_at",
|
||||
label: this.isDocumentsIncome ? "Ngày nhận" : "Ngày ban hành",
|
||||
},
|
||||
{ value: "sign_at", label: "Ngày ký" },
|
||||
{ value: "publisher.name", label: "Nơi ban hành" },
|
||||
{ value: "organizes.name", label: "Nơi nhận" },
|
||||
{ value: "linkTo.symbol", label: "Liên kết văn bản đến" },
|
||||
{ value: "receivers.seen", label: "Chưa xem", defaultValue: 0 },
|
||||
];
|
||||
},
|
||||
highlightStyle() {
|
||||
return "font-weight-bold";
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
async fetch() {
|
||||
this.loading = true;
|
||||
const response = await services.document.all(this.query);
|
||||
this.items = response.data.data;
|
||||
// this.items = response.data.data.map(item => {
|
||||
// item["_classes"] = 'bg-success';
|
||||
// return item;
|
||||
// });
|
||||
|
||||
this.currentPage = response.data.current_page;
|
||||
this.pages = response.data.last_page;
|
||||
this.loading = false;
|
||||
},
|
||||
rowClicked(item, index) {
|
||||
this.$router.push({ path: `/documents/${item.id}` });
|
||||
},
|
||||
goCreate() {
|
||||
this.$router.push({
|
||||
path: `/documents/create`,
|
||||
query: { book: this.bookId },
|
||||
});
|
||||
},
|
||||
pageChange(val) {
|
||||
this.$router.push({ query: { page: val } });
|
||||
},
|
||||
searching(payload) {
|
||||
this.searchField = payload.field;
|
||||
this.searchValue = payload.value;
|
||||
this.fetch();
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
37
resources/js/src/views/icons/Brands.vue
Normal file
37
resources/js/src/views/icons/Brands.vue
Normal file
@@ -0,0 +1,37 @@
|
||||
<template>
|
||||
<div>
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<CIcon name="cil-basket"/>Brand icons
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CRow class="text-center">
|
||||
<template v-for="(brand, brandName) in $options.brands">
|
||||
<CCol
|
||||
class="mb-5"
|
||||
col="3"
|
||||
sm="2"
|
||||
:key="brandName"
|
||||
>
|
||||
<CIcon :height="42" :content="brand"/>
|
||||
<div>{{toKebabCase(brandName)}}</div>
|
||||
</CCol>
|
||||
</template>
|
||||
</CRow>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { brandSet as brands } from '@coreui/icons'
|
||||
export default {
|
||||
name: 'Brands',
|
||||
brands,
|
||||
methods: {
|
||||
toKebabCase (str) {
|
||||
return str.replace(/([a-z])([A-Z0-9])/g, '$1-$2').toLowerCase()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
50
resources/js/src/views/icons/CoreUIIcons.vue
Normal file
50
resources/js/src/views/icons/CoreUIIcons.vue
Normal file
@@ -0,0 +1,50 @@
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<CIcon :content="$options.freeSet.cilHandPointDown"/>
|
||||
CoreUI Icons
|
||||
<CBadge color="info">New</CBadge>
|
||||
<div class="card-header-actions">
|
||||
<a
|
||||
href="https://github.com/coreui/coreui-icons"
|
||||
rel="noreferrer noopener"
|
||||
target="_blank"
|
||||
class="card-header-action"
|
||||
>
|
||||
<small class="text-muted">Github</small>
|
||||
</a>
|
||||
</div>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CRow class="text-center">
|
||||
<template v-for="(icon, iconName) in $options.freeSet">
|
||||
<CCol
|
||||
class="mb-5"
|
||||
col="3"
|
||||
sm="2"
|
||||
:key="iconName"
|
||||
>
|
||||
<CIcon :height="42" :content="icon"/>
|
||||
<div>{{toKebabCase(iconName)}}</div>
|
||||
</CCol>
|
||||
</template>
|
||||
</CRow>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { freeSet } from '@coreui/icons'
|
||||
export default {
|
||||
name: 'CoreUIIcons',
|
||||
freeSet,
|
||||
methods: {
|
||||
toKebabCase (str) {
|
||||
return str.replace(/([a-z])([A-Z0-9])/g, '$1-$2').toLowerCase()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
49
resources/js/src/views/icons/Flags.vue
Normal file
49
resources/js/src/views/icons/Flags.vue
Normal file
@@ -0,0 +1,49 @@
|
||||
<template>
|
||||
<div>
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<CIcon name="cil-globe-alt"/> Flags
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CRow class="text-center">
|
||||
<CCol class="mb-5" col="12">
|
||||
<!-- For using the flags inline with text add the classes
|
||||
<code>.flag-icon</code> and <code>.flag-icon-xx</code>
|
||||
(where xx is the ISO 3166-1-alpha-2 code of a country) to an empty
|
||||
span. If you want to have a squared version flag then add the class
|
||||
flag-icon-squared as well. -->
|
||||
</CCol>
|
||||
<template v-for="(flag, flagName) in displayedFlags">
|
||||
<CCol
|
||||
class="mb-5"
|
||||
col="3"
|
||||
sm="2"
|
||||
:key="flagName"
|
||||
>
|
||||
<CIcon :height="42" :content="flag"/>
|
||||
<div>{{toKebabCase(flagName)}}</div>
|
||||
</CCol>
|
||||
</template>
|
||||
</CRow>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { flagSet } from '@coreui/icons'
|
||||
export default {
|
||||
name: 'Flags',
|
||||
flagSet,
|
||||
computed: {
|
||||
displayedFlags () {
|
||||
return this.$options.flagSet
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
toKebabCase (str) {
|
||||
return str.replace(/([a-z])([A-Z0-9])/g, '$1-$2').toLowerCase()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
195
resources/js/src/views/notifications/Alerts.vue
Normal file
195
resources/js/src/views/notifications/Alerts.vue
Normal file
@@ -0,0 +1,195 @@
|
||||
<template>
|
||||
<CRow>
|
||||
<CCol col="12" md="6">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<CIcon name="cil-justify-center"/>
|
||||
<strong> Bootstrap Alert</strong>
|
||||
<div class="card-header-actions">
|
||||
<a
|
||||
href="https://coreui.io/vue/docs/components/alert"
|
||||
class="card-header-action"
|
||||
rel="noreferrer noopener"
|
||||
target="_blank"
|
||||
>
|
||||
<small class="text-muted">docs</small>
|
||||
</a>
|
||||
</div>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<div>
|
||||
<p></p>
|
||||
<CAlert show color="primary">Primary Alert</CAlert>
|
||||
<CAlert show color="secondary">Secondary Alert</CAlert>
|
||||
<CAlert show color="success">Success Alert</CAlert>
|
||||
<CAlert show color="danger">Danger Alert</CAlert>
|
||||
<CAlert show color="warning">Warning Alert</CAlert>
|
||||
<CAlert show color="info">Info Alert</CAlert>
|
||||
<CAlert show color="light">Light Alert</CAlert>
|
||||
<CAlert show color="dark">Dark Alert</CAlert>
|
||||
</div>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol col="12" md="6">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<CIcon name="cil-justify-center"/> Alert
|
||||
<small> use <code>.alert-link</code> to provide links</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<div>
|
||||
<CAlert show color="primary">
|
||||
Primary Alert with <a href="#" class="alert-link">an example link</a>.
|
||||
</CAlert>
|
||||
<CAlert show color="secondary">
|
||||
Secondary Alert with <a href="#" class="alert-link">an example link</a>.
|
||||
</CAlert>
|
||||
<CAlert show color="success">
|
||||
Success Alert with <a href="#" class="alert-link">an example link</a>.
|
||||
</CAlert>
|
||||
<CAlert show color="danger">
|
||||
Danger Alert with <a href="#" class="alert-link">an example link</a>.
|
||||
</CAlert>
|
||||
<CAlert show color="warning">
|
||||
Warning Alert with <a href="#" class="alert-link">an example link</a>.
|
||||
</CAlert>
|
||||
<CAlert show color="info">
|
||||
Info Alert with <a href="#" class="alert-link">an example link</a>.
|
||||
</CAlert>
|
||||
<CAlert show color="light">
|
||||
Light Alert with <a href="#" class="alert-link">an example link</a>.
|
||||
</CAlert>
|
||||
<CAlert show color="dark">
|
||||
Dark Alert with
|
||||
<CLink href="#" class="alert-link">an example link</CLink>
|
||||
.
|
||||
</CAlert>
|
||||
</div>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol col="12" md="6">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<CIcon name="cil-justify-center"/> Alerts <small>with additional content</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CAlert show color="success">
|
||||
<h4 class="alert-heading">Well done!</h4>
|
||||
<p>
|
||||
Aww yeah, you successfully read this important alert message.
|
||||
This example text is going to run a bit longer so that you can see
|
||||
how spacing within an alert works with this kind of content.
|
||||
</p>
|
||||
<hr>
|
||||
<p class="mb-0">
|
||||
Whenever you need to, be sure to use margin utilities to keep things nice and tidy.
|
||||
</p>
|
||||
</CAlert>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol col="12" md="6">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<CIcon name="cil-justify-center"/> Alerts
|
||||
<small>dismissible</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CAlert
|
||||
color="secondary"
|
||||
closeButton
|
||||
:show.sync="alert1"
|
||||
>
|
||||
Dismissible Alert!
|
||||
</CAlert>
|
||||
|
||||
<CAlert
|
||||
color="secondary"
|
||||
:show.sync="alert2"
|
||||
class="alert-dismissible"
|
||||
>
|
||||
Dismissible Alert with custom button!
|
||||
<CButton
|
||||
class="position-absolute"
|
||||
color="secondary"
|
||||
style="right:10px;top: 50%;transform: translateY(-50%);"
|
||||
@click="alert2 = false"
|
||||
>
|
||||
Close
|
||||
</CButton>
|
||||
</CAlert>
|
||||
<CButton
|
||||
@click="showDismissibleAlerts"
|
||||
color="info"
|
||||
class="m-1"
|
||||
>
|
||||
Show dismissible alerts
|
||||
</CButton>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<CIcon name="cil-justify-center"/> Alerts
|
||||
<small>auto dismissible</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<div>
|
||||
<CAlert
|
||||
:show.sync="dismissCountDown"
|
||||
closeButton
|
||||
color="warning"
|
||||
fade
|
||||
>
|
||||
Alert will dismiss after
|
||||
<strong>{{dismissCountDown}}</strong> seconds...
|
||||
</CAlert>
|
||||
|
||||
<CAlert
|
||||
:show.sync="dismissCountDown"
|
||||
closeButton
|
||||
color="info"
|
||||
>
|
||||
Alert will dismiss after {{dismissCountDown}} seconds...
|
||||
<CProgress
|
||||
color="info"
|
||||
:max="dismissSecs"
|
||||
:value="dismissCountDown"
|
||||
height="4px"
|
||||
/>
|
||||
</CAlert>
|
||||
<CButton @click="showAlert" color="info" class="m-1">
|
||||
Show alert with timer
|
||||
</CButton>
|
||||
</div>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'Alerts',
|
||||
data () {
|
||||
return {
|
||||
dismissSecs: 10,
|
||||
dismissCountDown: 10,
|
||||
alert1: true,
|
||||
alert2: true
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
countDownChanged (dismissCountDown) {
|
||||
this.dismissCountDown = dismissCountDown
|
||||
},
|
||||
showAlert () {
|
||||
this.dismissCountDown = this.dismissSecs
|
||||
},
|
||||
showDismissibleAlerts () {
|
||||
['alert1', 'alert2'].forEach(alert => this[alert] = true)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
91
resources/js/src/views/notifications/Badges.vue
Normal file
91
resources/js/src/views/notifications/Badges.vue
Normal file
@@ -0,0 +1,91 @@
|
||||
<template functional>
|
||||
<CRow>
|
||||
<CCol col="12" md="6">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<CIcon name="cil-justify-center"/>
|
||||
<strong> Bootstrap Badge</strong>
|
||||
<div class="card-header-actions">
|
||||
<a
|
||||
href="https://coreui.io/vue/docs/components/badge"
|
||||
class="card-header-action"
|
||||
rel="noreferrer noopener"
|
||||
target="_blank"
|
||||
>
|
||||
<small class="text-muted">docs</small>
|
||||
</a>
|
||||
</div>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<h2>Example heading <CBadge color="primary">New</CBadge></h2>
|
||||
<h3>Example heading <CBadge color="primary">New</CBadge></h3>
|
||||
<h4>Example heading <CBadge color="primary">New</CBadge></h4>
|
||||
<h5>Example heading <CBadge color="primary">New</CBadge></h5>
|
||||
<h6>Example heading <CBadge color="primary">New</CBadge></h6>
|
||||
</CCardBody>
|
||||
<CCardFooter>
|
||||
<CButton color="primary">
|
||||
Notifications
|
||||
<CBadge color="light" class="ml-2 position-static">4</CBadge>
|
||||
</CButton>
|
||||
</CCardFooter>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol col="12" md="6">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<CIcon name="cil-justify-center"/> Badge
|
||||
<small>contextual variations</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CBadge color="primary">Primary</CBadge>
|
||||
<CBadge color="secondary">Secondary</CBadge>
|
||||
<CBadge color="success">Success</CBadge>
|
||||
<CBadge color="danger">Danger</CBadge>
|
||||
<CBadge color="warning">Warning</CBadge>
|
||||
<CBadge color="info">Info</CBadge>
|
||||
<CBadge color="light">Light</CBadge>
|
||||
<CBadge color="dark">Dark</CBadge>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<CIcon name="cil-justify-center"/> Badge
|
||||
<small>shape="pill"</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CBadge shape="pill" color="primary">Primary</CBadge>
|
||||
<CBadge shape="pill" color="secondary">Secondary</CBadge>
|
||||
<CBadge shape="pill" color="success">Success</CBadge>
|
||||
<CBadge shape="pill" color="danger">Danger</CBadge>
|
||||
<CBadge shape="pill" color="warning">Warning</CBadge>
|
||||
<CBadge shape="pill" color="info">Info</CBadge>
|
||||
<CBadge shape="pill" color="light">Light</CBadge>
|
||||
<CBadge shape="pill" color="dark">Dark</CBadge>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<CIcon name="cil-justify-center"/> Badge
|
||||
<small>actionable</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CBadge href="#" color="primary">Primary</CBadge>
|
||||
<CBadge href="#" color="secondary">Secondary</CBadge>
|
||||
<CBadge href="#" color="success">Success</CBadge>
|
||||
<CBadge href="#" color="danger">Danger</CBadge>
|
||||
<CBadge href="#" color="warning">Warning</CBadge>
|
||||
<CBadge href="#" color="info">Info</CBadge>
|
||||
<CBadge href="#" color="light">Light</CBadge>
|
||||
<CBadge href="#" color="dark">Dark</CBadge>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'Badges'
|
||||
}
|
||||
</script>
|
||||
195
resources/js/src/views/notifications/Modals.vue
Normal file
195
resources/js/src/views/notifications/Modals.vue
Normal file
@@ -0,0 +1,195 @@
|
||||
<template>
|
||||
<div class="wrapper">
|
||||
<div>
|
||||
<CRow>
|
||||
<CCol col="12">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<CIcon name="cil-justify-center"/> Bootstrap Modals
|
||||
<div class="card-header-actions">
|
||||
<a
|
||||
href="https://coreui.io/vue/docs/components/modal"
|
||||
class="card-header-action"
|
||||
rel="noreferrer noopener"
|
||||
target="_blank"
|
||||
>
|
||||
<small class="text-muted">docs</small>
|
||||
</a>
|
||||
</div>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CButton color="secondary" @click="myModal = true" class="mr-1">
|
||||
Launch demo modal
|
||||
</CButton>
|
||||
<CButton color="secondary" @click="largeModal = true" class="mr-1">
|
||||
Launch large modal
|
||||
</CButton>
|
||||
<CButton color="secondary" @click="smallModal = true" class="mr-1">
|
||||
Launch small modal
|
||||
</CButton>
|
||||
<hr>
|
||||
<CButton color="primary" @click="primaryModal = true" class="mr-1">
|
||||
Launch primary modal
|
||||
</CButton>
|
||||
<CButton color="success" @click="successModal = true" class="mr-1">
|
||||
Launch success modal
|
||||
</CButton>
|
||||
<CButton color="warning" @click="warningModal = true" class="mr-1">
|
||||
Launch warning modal
|
||||
</CButton>
|
||||
<CButton color="danger" @click="dangerModal = true" class="mr-1">
|
||||
Launch danger modal
|
||||
</CButton>
|
||||
<CButton color="info" @click="infoModal = true" class="mr-1">
|
||||
Launch info modal
|
||||
</CButton>
|
||||
<CButton color="dark" @click="darkModal = true" class="mr-1">
|
||||
Launch dark modal
|
||||
</CButton>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</div>
|
||||
<!-- Modal Component -->
|
||||
<CModal
|
||||
title="Modal title"
|
||||
:show.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,
|
||||
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.
|
||||
</CModal>
|
||||
<CModal
|
||||
title="Modal title"
|
||||
size="lg"
|
||||
:show.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,
|
||||
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.
|
||||
</CModal>
|
||||
<CModal
|
||||
title="Modal title"
|
||||
size="sm"
|
||||
:show.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,
|
||||
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.
|
||||
</CModal>
|
||||
|
||||
<CModal
|
||||
title="Modal title"
|
||||
:show.sync="primaryModal"
|
||||
color="primary"
|
||||
>
|
||||
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.
|
||||
</CModal>
|
||||
<CModal
|
||||
title="Modal title"
|
||||
color="success"
|
||||
:show.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,
|
||||
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.
|
||||
</CModal>
|
||||
<CModal
|
||||
title="Modal title"
|
||||
color="warning"
|
||||
:show.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,
|
||||
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.
|
||||
</CModal>
|
||||
<CModal
|
||||
title="Modal title"
|
||||
color="danger"
|
||||
:show.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,
|
||||
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.
|
||||
</CModal>
|
||||
<CModal
|
||||
title="Modal title"
|
||||
color="info"
|
||||
:show.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,
|
||||
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.
|
||||
</CModal>
|
||||
<CModal
|
||||
:show.sync="darkModal"
|
||||
:no-close-on-backdrop="true"
|
||||
:centered="true"
|
||||
title="Modal title 2"
|
||||
size="lg"
|
||||
color="dark"
|
||||
>
|
||||
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.
|
||||
<template #header>
|
||||
<h6 class="modal-title">Custom smaller modal title</h6>
|
||||
<CButtonClose @click="darkModal = false" class="text-white"/>
|
||||
</template>
|
||||
<template #footer>
|
||||
<CButton @click="darkModal = false" color="danger">Discard</CButton>
|
||||
<CButton @click="darkModal = false" color="success">Accept</CButton>
|
||||
</template>
|
||||
</CModal>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'Modals',
|
||||
data () {
|
||||
return {
|
||||
myModal: false,
|
||||
largeModal: false,
|
||||
smallModal: false,
|
||||
primaryModal: false,
|
||||
successModal: false,
|
||||
warningModal: false,
|
||||
dangerModal: false,
|
||||
infoModal: false,
|
||||
darkModal: false
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
71
resources/js/src/views/pages/Login.vue
Normal file
71
resources/js/src/views/pages/Login.vue
Normal file
@@ -0,0 +1,71 @@
|
||||
<template>
|
||||
<CContainer class="d-flex content-center min-vh-100">
|
||||
<CRow class="col-md-6">
|
||||
<CCol>
|
||||
<CCardGroup>
|
||||
<CCard class="p-4 px-5">
|
||||
<CCardBody>
|
||||
<CForm>
|
||||
<h1 class="pb-4">Đăng nhập</h1>
|
||||
<CAlert :show="!!error" color="warning">{{error}}</CAlert>
|
||||
<CInput autocomplete="email" placeholder="Email or Username..." v-model="email" required>
|
||||
<template #prepend-content>
|
||||
<CIcon name="cil-user" />
|
||||
</template>
|
||||
</CInput>
|
||||
<CInput
|
||||
placeholder="Password"
|
||||
type="password"
|
||||
autocomplete="curent-password"
|
||||
v-model="password"
|
||||
>
|
||||
<template #prepend-content>
|
||||
<CIcon name="cil-lock-locked" />
|
||||
</template>
|
||||
</CInput>
|
||||
<CRow>
|
||||
<CCol col="6" class="text-left">
|
||||
<CButton color="primary" @click="login">Đăng nhập</CButton>
|
||||
</CCol>
|
||||
<CCol col="6" class="text-right">
|
||||
<CButton color="link">Quên mật khẩu?</CButton>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</CForm>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCardGroup>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</CContainer>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "Login",
|
||||
data() {
|
||||
return {
|
||||
email: "admin@domain.com",
|
||||
password: "password",
|
||||
error: null
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
login() {
|
||||
this.$store
|
||||
.dispatch("auth/login", { email: this.email, password: this.password })
|
||||
.then(response => {
|
||||
this.$router.push(
|
||||
this.$route.query.redirectFrom || { name: "Trang chủ" }
|
||||
);
|
||||
})
|
||||
.then(response => {
|
||||
this.$toast.success("Đăng nhập thành công");
|
||||
})
|
||||
.catch(error => {
|
||||
this.toastHttpError(error);
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
30
resources/js/src/views/pages/Page404.vue
Normal file
30
resources/js/src/views/pages/Page404.vue
Normal file
@@ -0,0 +1,30 @@
|
||||
<template>
|
||||
<CContainer class="d-flex align-items-center min-vh-100">
|
||||
<CRow class="w-100 justify-content-center">
|
||||
<CCol md="6">
|
||||
<div class="w-100">
|
||||
<div class="clearfix">
|
||||
<h1 class="float-left display-3 mr-4">404</h1>
|
||||
<h4 class="pt-3">Oops! You're lost.</h4>
|
||||
<p class="text-muted">The page you are looking for was not found.</p>
|
||||
</div>
|
||||
<CInput
|
||||
class="mb-3"
|
||||
placeholder="What are you looking for?"
|
||||
>
|
||||
<template #prepend-content><CIcon name="cil-magnifying-glass"/></template>
|
||||
<template #append>
|
||||
<CButton color="info">Search</CButton>
|
||||
</template>
|
||||
</CInput>
|
||||
</div>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</CContainer>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'Page404'
|
||||
}
|
||||
</script>
|
||||
28
resources/js/src/views/pages/Page500.vue
Normal file
28
resources/js/src/views/pages/Page500.vue
Normal file
@@ -0,0 +1,28 @@
|
||||
<template>
|
||||
<CContainer class="d-flex align-items-center min-vh-100">
|
||||
<CRow class="w-100 justify-content-center">
|
||||
<CCol md="6">
|
||||
<div class="clearfix">
|
||||
<h1 class="float-left display-3 mr-4">500</h1>
|
||||
<h4 class="pt-3">Houston, we have a problem!</h4>
|
||||
<p class="text-muted">The page you are looking for is temporarily unavailable.</p>
|
||||
</div>
|
||||
<CInput
|
||||
class="mb-3"
|
||||
placeholder="What are you looking for?"
|
||||
>
|
||||
<template #prepend-content><CIcon name="cil-magnifying-glass"/></template>
|
||||
<template #append>
|
||||
<CButton color="info">Search</CButton>
|
||||
</template>
|
||||
</CInput>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</CContainer>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'Page500'
|
||||
}
|
||||
</script>
|
||||
65
resources/js/src/views/pages/Register.vue
Normal file
65
resources/js/src/views/pages/Register.vue
Normal file
@@ -0,0 +1,65 @@
|
||||
<template>
|
||||
<div class="d-flex align-items-center min-vh-100">
|
||||
<CContainer fluid>
|
||||
<CRow class="justify-content-center">
|
||||
<CCol md="6">
|
||||
<CCard class="mx-4 mb-0">
|
||||
<CCardBody class="p-4">
|
||||
<CForm>
|
||||
<h1>Register</h1>
|
||||
<p class="text-muted">Create your account</p>
|
||||
<CInput
|
||||
placeholder="Username"
|
||||
autocomplete="username"
|
||||
>
|
||||
<template #prepend-content><CIcon name="cil-user"/></template>
|
||||
</CInput>
|
||||
<CInput
|
||||
placeholder="Email"
|
||||
autocomplete="email"
|
||||
prepend="@"
|
||||
/>
|
||||
<CInput
|
||||
placeholder="Password"
|
||||
type="password"
|
||||
autocomplete="new-password"
|
||||
>
|
||||
<template #prepend-content><CIcon name="cil-lock-locked"/></template>
|
||||
</CInput>
|
||||
<CInput
|
||||
placeholder="Repeat password"
|
||||
type="password"
|
||||
autocomplete="new-password"
|
||||
class="mb-4"
|
||||
>
|
||||
<template #prepend-content><CIcon name="cil-lock-locked"/></template>
|
||||
</CInput>
|
||||
<CButton color="success" block>Create Account</CButton>
|
||||
</CForm>
|
||||
</CCardBody>
|
||||
<CCardFooter class="p-4">
|
||||
<CRow>
|
||||
<CCol col="6">
|
||||
<CButton block color="facebook">
|
||||
Facebook
|
||||
</CButton>
|
||||
</CCol>
|
||||
<CCol col="6">
|
||||
<CButton block color="twitter">
|
||||
Twitter
|
||||
</CButton>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</CCardFooter>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</CContainer>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'Register'
|
||||
}
|
||||
</script>
|
||||
140
resources/js/src/views/statistic/Statistic.vue
Normal file
140
resources/js/src/views/statistic/Statistic.vue
Normal file
@@ -0,0 +1,140 @@
|
||||
<template>
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<strong>Thống kê</strong>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CForm>
|
||||
<CRow class="form-group">
|
||||
<CCol sm="6">
|
||||
<CFormGroup class="form-group mb-0">
|
||||
<template #label>
|
||||
<slot name="label">
|
||||
<label>Sổ văn bản</label>
|
||||
</slot>
|
||||
</template>
|
||||
<template #input>
|
||||
<treeselect
|
||||
v-model="statistic.book"
|
||||
:multiple="false"
|
||||
:options="books"
|
||||
:clearable="true"
|
||||
placeholder="Tất cả"
|
||||
></treeselect>
|
||||
</template>
|
||||
</CFormGroup>
|
||||
</CCol>
|
||||
<CCol sm="6">
|
||||
<CFormGroup class="form-group mb-0">
|
||||
<template #label>
|
||||
<slot name="label">
|
||||
<label>Loại văn bản</label>
|
||||
</slot>
|
||||
</template>
|
||||
<template #input>
|
||||
<treeselect
|
||||
v-model="statistic.type"
|
||||
:multiple="false"
|
||||
:options="types"
|
||||
:clearable="true"
|
||||
placeholder="Tất cả"
|
||||
></treeselect>
|
||||
</template>
|
||||
</CFormGroup>
|
||||
</CCol>
|
||||
</CRow>
|
||||
<CRow class="form-group">
|
||||
<CCol sm="6">
|
||||
<CInput label="Từ ngày" type="date" :value.sync="statistic.from" class="mb-0" />
|
||||
</CCol>
|
||||
<CCol sm="6">
|
||||
<CInput label="Đến ngày" type="date" :value.sync="statistic.to" class="mb-0" />
|
||||
</CCol>
|
||||
</CRow>
|
||||
<CRow class="form-group" v-if="false">
|
||||
<CCol sm="6">
|
||||
<CSelect
|
||||
class="mb-0"
|
||||
label="Kiểu xuất"
|
||||
:options="exportTypes"
|
||||
placeholder="Please select"
|
||||
:value.sync="statistic.export"
|
||||
/>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</CForm>
|
||||
</CCardBody>
|
||||
<CCardFooter>
|
||||
<CButton size="sm" @click="download" class="float-right" color="success">
|
||||
<CIcon name="cil-vertical-align-bottom" />Xuất
|
||||
</CButton>
|
||||
</CCardFooter>
|
||||
</CCard>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import services from "../../services/factory";
|
||||
// import the component
|
||||
import { Treeselect } from "@riophae/vue-treeselect";
|
||||
// import the styles
|
||||
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
|
||||
|
||||
export default {
|
||||
name: "Statistic",
|
||||
components: { Treeselect },
|
||||
data() {
|
||||
return {
|
||||
exportTypes: [
|
||||
{ value: "Xlsx", label: "Xlsx" },
|
||||
{ value: "Xls", label: "Xls" },
|
||||
{ value: "Html", label: "Html" }
|
||||
],
|
||||
books: [],
|
||||
types: [],
|
||||
statistic: {
|
||||
book: null,
|
||||
type: null,
|
||||
from: null,
|
||||
to: null,
|
||||
export: "Xlsx"
|
||||
}
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.init();
|
||||
},
|
||||
methods: {
|
||||
init() {
|
||||
!this.documentId || this.fetchDocument();
|
||||
this.fetchTypes();
|
||||
this.fetchBooks();
|
||||
},
|
||||
async fetchTypes() {
|
||||
const typeResponse = await services.documentType.all();
|
||||
this.types = this.formatKeys(typeResponse.data, {
|
||||
id: "id",
|
||||
name: "label"
|
||||
});
|
||||
return typeResponse;
|
||||
},
|
||||
async fetchBooks() {
|
||||
const bookResponse = await services.book.all();
|
||||
this.books = this.formatKeys(bookResponse.data, {
|
||||
id: "id",
|
||||
name: "label"
|
||||
});
|
||||
return bookResponse;
|
||||
},
|
||||
download() {
|
||||
services.statistic
|
||||
.download(this.statistic)
|
||||
.then(response => {
|
||||
this.$toast.success("Đã xuất báo cáo");
|
||||
})
|
||||
.catch(error => {
|
||||
this.toastHttpError(error);
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
29
resources/js/src/views/system/Books.vue
Normal file
29
resources/js/src/views/system/Books.vue
Normal file
@@ -0,0 +1,29 @@
|
||||
<template>
|
||||
<CRow>
|
||||
<CCol col="md-6">
|
||||
<CFormList :service="service" :fields="fields" :title="title" />
|
||||
</CCol>
|
||||
</CRow>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import services from "../../services/factory";
|
||||
import CFormList from "../../components/form/List";
|
||||
|
||||
export default {
|
||||
name: "Books",
|
||||
components: {
|
||||
CFormList
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
fields: [
|
||||
{ key: "id", label: "Mã" },
|
||||
{ key: "name", label: "Tên" }
|
||||
],
|
||||
service: services.book,
|
||||
title: "Sổ văn bản"
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
30
resources/js/src/views/system/Departments.vue
Normal file
30
resources/js/src/views/system/Departments.vue
Normal file
@@ -0,0 +1,30 @@
|
||||
<template>
|
||||
<CRow>
|
||||
<CCol col="md-8">
|
||||
<CFormList :service="service" :fields="fields" :title="title" />
|
||||
</CCol>
|
||||
</CRow>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import services from "../../services/factory";
|
||||
import CFormList from "../../components/form/List";
|
||||
|
||||
export default {
|
||||
name: "Departments",
|
||||
components: {
|
||||
CFormList
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
fields: [
|
||||
{ key: "id", label: "Mã" },
|
||||
{ key: "name", label: "Tên" },
|
||||
{ key: "tel", label: "Số điện thoại" }
|
||||
],
|
||||
service: services.department,
|
||||
title: "Phòng ban"
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
29
resources/js/src/views/system/DocumentTypes.vue
Normal file
29
resources/js/src/views/system/DocumentTypes.vue
Normal file
@@ -0,0 +1,29 @@
|
||||
<template>
|
||||
<CRow>
|
||||
<CCol col="md-6">
|
||||
<CFormList :service="service" :fields="fields" :title="title" />
|
||||
</CCol>
|
||||
</CRow>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import services from "../../services/factory";
|
||||
import CFormList from "../../components/form/List";
|
||||
|
||||
export default {
|
||||
name: "DocumentTypes",
|
||||
components: {
|
||||
CFormList
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
fields: [
|
||||
{ key: "id", label: "Mã" },
|
||||
{ key: "name", label: "Tên" },
|
||||
],
|
||||
service: services.documentType,
|
||||
title: "Loại văn bản"
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
84
resources/js/src/views/system/Groups.vue
Normal file
84
resources/js/src/views/system/Groups.vue
Normal file
@@ -0,0 +1,84 @@
|
||||
<template>
|
||||
<CRow>
|
||||
<CCol col="md-6">
|
||||
<CFormList
|
||||
:service="service"
|
||||
:fields="fields"
|
||||
:title="title"
|
||||
@show="fetchRolePermissions"
|
||||
>
|
||||
<template #append-body>
|
||||
<label>Quyền</label>
|
||||
<treeselect
|
||||
@select="addPermission"
|
||||
@deselect="removePermission"
|
||||
v-model="permissions"
|
||||
:multiple="true"
|
||||
:options="permissionOptions"
|
||||
:clearable="false"
|
||||
></treeselect>
|
||||
</template>
|
||||
</CFormList>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import services from "../../services/factory";
|
||||
import CFormList from "../../components/form/List";
|
||||
import Treeselect from "@riophae/vue-treeselect";
|
||||
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
|
||||
|
||||
export default {
|
||||
name: "Groups",
|
||||
components: {
|
||||
CFormList,
|
||||
Treeselect,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
fields: [
|
||||
{ key: "id", label: "Mã" },
|
||||
{ key: "name", label: "Tên" },
|
||||
],
|
||||
service: services.role,
|
||||
title: "Nhóm",
|
||||
permissionOptions: [],
|
||||
permissions: [],
|
||||
role: {}
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.fetchPermissions();
|
||||
},
|
||||
methods: {
|
||||
async fetchPermissions() {
|
||||
const permissionResponse = await services.permission.all();
|
||||
this.permissionOptions = this.formatKeys(permissionResponse.data, {
|
||||
id: "id",
|
||||
name: "label"
|
||||
});
|
||||
return permissionResponse;
|
||||
},
|
||||
async fetchRolePermissions(role) {
|
||||
this.role = role;
|
||||
const roleResponse = await services.role.get(role.id, {
|
||||
with: "permissions"
|
||||
});
|
||||
this.permissions = roleResponse.data.permissions.map(
|
||||
permission => permission.id
|
||||
);
|
||||
},
|
||||
addPermission(permission) {
|
||||
services.role.givePermission(permission.id, this.role.id).catch(error => {
|
||||
this.toastHttpError(error);
|
||||
});
|
||||
},
|
||||
removePermission(permission) {
|
||||
services.role.revokePermission(permission.id, this.role.id).catch(error => {
|
||||
this.toastHttpError(error);
|
||||
});
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
29
resources/js/src/views/system/Permissions.vue
Normal file
29
resources/js/src/views/system/Permissions.vue
Normal file
@@ -0,0 +1,29 @@
|
||||
<template>
|
||||
<CRow>
|
||||
<CCol col="md-6">
|
||||
<CFormList :service="service" :fields="fields" :title="title" />
|
||||
</CCol>
|
||||
</CRow>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import services from "../../services/factory";
|
||||
import CFormList from "../../components/form/List";
|
||||
|
||||
export default {
|
||||
name: "Permissions",
|
||||
components: {
|
||||
CFormList
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
fields: [
|
||||
{ key: "id", label: "Mã" },
|
||||
{ key: "name", label: "Tên" }
|
||||
],
|
||||
service: services.permission,
|
||||
title: "Quyền"
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
29
resources/js/src/views/system/Publishers.vue
Normal file
29
resources/js/src/views/system/Publishers.vue
Normal file
@@ -0,0 +1,29 @@
|
||||
<template>
|
||||
<CRow>
|
||||
<CCol col="md-6">
|
||||
<CFormList :service="service" :fields="fields" :title="title" />
|
||||
</CCol>
|
||||
</CRow>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import services from "../../services/factory";
|
||||
import CFormList from "../../components/form/List";
|
||||
|
||||
export default {
|
||||
name: "Publishers",
|
||||
components: {
|
||||
CFormList
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
fields: [
|
||||
{ key: "id", label: "Mã" },
|
||||
{ key: "name", label: "Tên" },
|
||||
],
|
||||
service: services.publisher,
|
||||
title: "Nơi ban hành"
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
30
resources/js/src/views/system/Signers.vue
Normal file
30
resources/js/src/views/system/Signers.vue
Normal file
@@ -0,0 +1,30 @@
|
||||
<template>
|
||||
<CRow>
|
||||
<CCol col="md-8">
|
||||
<CFormList :service="service" :fields="fields" :title="title" />
|
||||
</CCol>
|
||||
</CRow>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import services from "../../services/factory";
|
||||
import CFormList from "../../components/form/List";
|
||||
|
||||
export default {
|
||||
name: "Signers",
|
||||
components: {
|
||||
CFormList
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
fields: [
|
||||
{ key: "id", label: "Mã" },
|
||||
{ key: "name", label: "Tên" },
|
||||
{ key: "description", label: "Mô tả" }
|
||||
],
|
||||
service: services.signer,
|
||||
title: "Người ký"
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
29
resources/js/src/views/system/Titles.vue
Normal file
29
resources/js/src/views/system/Titles.vue
Normal file
@@ -0,0 +1,29 @@
|
||||
<template>
|
||||
<CRow>
|
||||
<CCol col="md-6">
|
||||
<CFormList :service="service" :fields="fields" :title="title" />
|
||||
</CCol>
|
||||
</CRow>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import services from "../../services/factory";
|
||||
import CFormList from "../../components/form/List";
|
||||
|
||||
export default {
|
||||
name: "Titles",
|
||||
components: {
|
||||
CFormList
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
fields: [
|
||||
{ key: "id", label: "Mã" },
|
||||
{ key: "name", label: "Tên" }
|
||||
],
|
||||
service: services.title,
|
||||
title: "Chức danh"
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
35
resources/js/src/views/theme/CKEditor.vue
Normal file
35
resources/js/src/views/theme/CKEditor.vue
Normal file
@@ -0,0 +1,35 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
CKEditor
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<ckeditor :editor="editor" @ready="onReady" v-model="editorData"></ckeditor>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import DecoupledEditor from '@ckeditor/ckeditor5-build-decoupled-document';
|
||||
|
||||
export default {
|
||||
name: 'CKEditor',
|
||||
data() {
|
||||
return {
|
||||
editor: DecoupledEditor,
|
||||
editorData: '',
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onReady(editor) {
|
||||
// Insert the toolbar before the editable area.
|
||||
editor.ui.getEditableElement().parentElement.insertBefore(
|
||||
editor.ui.view.toolbar.element,
|
||||
editor.ui.getEditableElement()
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
21
resources/js/src/views/theme/ColorTheme.vue
Normal file
21
resources/js/src/views/theme/ColorTheme.vue
Normal file
@@ -0,0 +1,21 @@
|
||||
<template>
|
||||
<CCol xl="2" md="4" sm="6" xs="12" class="mb-4">
|
||||
<div
|
||||
:class="['theme-color w-75 rounded mb-3', color]"
|
||||
:style="{ paddingTop: '75%' }"
|
||||
></div>
|
||||
<slot></slot>
|
||||
<ColorView/>
|
||||
</CCol>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ColorView from './ColorView'
|
||||
export default {
|
||||
name: 'ColorTheme',
|
||||
components: { ColorView },
|
||||
props: {
|
||||
color: String,
|
||||
}
|
||||
}
|
||||
</script>
|
||||
41
resources/js/src/views/theme/ColorView.vue
Normal file
41
resources/js/src/views/theme/ColorView.vue
Normal file
@@ -0,0 +1,41 @@
|
||||
<template>
|
||||
<table class="w-100">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="text-muted">HEX:</td>
|
||||
<td class="font-weight-bold">{{this.hexColor}}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="text-muted">RGB:</td>
|
||||
<td class="font-weight-bold">{{this.bgColor}}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { rgbToHex } from '@coreui/utils/src'
|
||||
export default {
|
||||
name: 'ColorView',
|
||||
data () {
|
||||
return {
|
||||
bgColor: 'rgb(255, 255, 255)'
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
hexColor () {
|
||||
return rgbToHex(this.bgColor)
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
setColor () {
|
||||
const elem = this.$parent.$el.children[0]
|
||||
const color = window.getComputedStyle(elem).getPropertyValue('background-color')
|
||||
this.bgColor = color || this.bgColor
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.setColor()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
49
resources/js/src/views/theme/Colors.vue
Normal file
49
resources/js/src/views/theme/Colors.vue
Normal file
@@ -0,0 +1,49 @@
|
||||
<template>
|
||||
<div>
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<CIcon name="cil-drop"/> Theme colors
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CRow>
|
||||
<ColorTheme color="bg-primary">
|
||||
<h6>Brand Primary Color</h6>
|
||||
</ColorTheme>
|
||||
<ColorTheme color="bg-secondary"><h6>Brand Secondary Color</h6></ColorTheme>
|
||||
<ColorTheme color="bg-success"><h6>Brand Success Color</h6></ColorTheme>
|
||||
<ColorTheme color="bg-danger"><h6>Brand Danger Color</h6></ColorTheme>
|
||||
<ColorTheme color="bg-warning"><h6>Brand Warning Color</h6></ColorTheme>
|
||||
<ColorTheme color="bg-info"><h6>Brand Info Color</h6></ColorTheme>
|
||||
<ColorTheme color="bg-light"><h6>Brand Light Color</h6></ColorTheme>
|
||||
<ColorTheme color="bg-dark"><h6>Brand Dark Color</h6></ColorTheme>
|
||||
</CRow>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<CIcon name="cil-drop"/> Grays
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CRow>
|
||||
<ColorTheme color="bg-gray-100"><h6>Brand 100 Color</h6></ColorTheme>
|
||||
<ColorTheme color="bg-gray-200"><h6>Brand 200 Color</h6></ColorTheme>
|
||||
<ColorTheme color="bg-gray-300"><h6>Brand 300 Color</h6></ColorTheme>
|
||||
<ColorTheme color="bg-gray-400"><h6>Brand 400 Color</h6></ColorTheme>
|
||||
<ColorTheme color="bg-gray-500"><h6>Brand 500 Color</h6></ColorTheme>
|
||||
<ColorTheme color="bg-gray-600"><h6>Brand 600 Color</h6></ColorTheme>
|
||||
<ColorTheme color="bg-gray-700"><h6>Brand 700 Color</h6></ColorTheme>
|
||||
<ColorTheme color="bg-gray-800"><h6>Brand 800 Color</h6></ColorTheme>
|
||||
<ColorTheme color="bg-gray-900"><h6>Brand 900 Color</h6></ColorTheme>
|
||||
</CRow>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ColorTheme from './ColorTheme'
|
||||
export default {
|
||||
name: 'Colors',
|
||||
components: { ColorTheme }
|
||||
}
|
||||
</script>
|
||||
220
resources/js/src/views/theme/Typography.vue
Normal file
220
resources/js/src/views/theme/Typography.vue
Normal file
@@ -0,0 +1,220 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
Headings
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<p>Documentation and examples for Bootstrap typography,
|
||||
including global settings, headings, body text, lists, and more.</p>
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Heading</th>
|
||||
<th>Example</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
<p>
|
||||
<code class="highlighter-rouge">
|
||||
<h1></h1>
|
||||
</code>
|
||||
</p>
|
||||
</td>
|
||||
<td><span class="h1">h1. Bootstrap heading</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<p>
|
||||
<code class="highlighter-rouge">
|
||||
<h2></h2>
|
||||
</code>
|
||||
</p>
|
||||
</td>
|
||||
<td><span class="h2">h2. Bootstrap heading</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<p>
|
||||
<code class="highlighter-rouge">
|
||||
<h3></h3>
|
||||
</code>
|
||||
</p>
|
||||
</td>
|
||||
<td><span class="h3">h3. Bootstrap heading</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<p>
|
||||
<code class="highlighter-rouge">
|
||||
<h4></h4>
|
||||
</code>
|
||||
</p>
|
||||
</td>
|
||||
<td><span class="h4">h4. Bootstrap heading</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<p>
|
||||
<code class="highlighter-rouge">
|
||||
<h5></h5>
|
||||
</code>
|
||||
</p>
|
||||
</td>
|
||||
<td><span class="h5">h5. Bootstrap heading</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<p>
|
||||
<code class="highlighter-rouge">
|
||||
<h6></h6>
|
||||
</code>
|
||||
</p>
|
||||
</td>
|
||||
<td><span class="h6">h6. Bootstrap heading</span></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
Headings
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<p>
|
||||
<code class="highlighter-rouge">.h1</code> through
|
||||
<code class="highlighter-rouge">.h6</code>
|
||||
classes are also available, for when you want to match the font
|
||||
styling of a heading but cannot use the associated HTML element.
|
||||
</p>
|
||||
<div class="bd-example">
|
||||
<p class="h1">h1. Bootstrap heading</p>
|
||||
<p class="h2">h2. Bootstrap heading</p>
|
||||
<p class="h3">h3. Bootstrap heading</p>
|
||||
<p class="h4">h4. Bootstrap heading</p>
|
||||
<p class="h5">h5. Bootstrap heading</p>
|
||||
<p class="h6">h6. Bootstrap heading</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
Display headings
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<p>
|
||||
Traditional heading elements are designed to work best in the meat
|
||||
of your page content. When you need a heading to stand out,
|
||||
consider using a <strong>display heading</strong>—a larger,
|
||||
slightly more opinionated heading style.
|
||||
</p>
|
||||
<div class="bd-example bd-example-type">
|
||||
<table class="table">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><span class="display-1">Display 1</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><span class="display-2">Display 2</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><span class="display-3">Display 3</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><span class="display-4">Display 4</span></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
Inline text elements
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<p>
|
||||
Traditional heading elements are designed to work best in the meat
|
||||
of your page content. When you need a heading to stand out,
|
||||
consider using a <strong>display heading</strong>—a larger,
|
||||
slightly more opinionated heading style.
|
||||
</p>
|
||||
<div class="bd-example">
|
||||
<p>You can use the mark tag to <mark>highlight</mark> text.</p>
|
||||
<p><del>
|
||||
This line of text is meant to be treated as deleted text.
|
||||
</del></p>
|
||||
<p><s>
|
||||
This line of text is meant to be treated as no longer accurate.
|
||||
</s></p>
|
||||
<p><ins>
|
||||
This line of text is meant to be treated as an addition to the document.
|
||||
</ins></p>
|
||||
<p><u>This line of text will render as underlined</u></p>
|
||||
<p><small>
|
||||
This line of text is meant to be treated as fine print.
|
||||
</small></p>
|
||||
<p><strong>This line rendered as bold text.</strong></p>
|
||||
<p><em>This line rendered as italicized text.</em></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
Description list alignment
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<p>
|
||||
Align terms and descriptions horizontally by using our grid system’s
|
||||
predefined classes (or semantic mixins). For longer terms, you can
|
||||
optionally add a <code class="highlighter-rouge">.text-truncate</code>
|
||||
class to truncate the text with an ellipsis.
|
||||
</p>
|
||||
<div class="bd-example">
|
||||
<dl class="row">
|
||||
<dt class="col-sm-3">Description lists</dt>
|
||||
<dd class="col-sm-9">
|
||||
A description list is perfect for defining terms.
|
||||
</dd>
|
||||
|
||||
<dt class="col-sm-3">Euismod</dt>
|
||||
<dd class="col-sm-9">
|
||||
<p>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</p>
|
||||
<p>Donec id elit non mi porta gravida at eget metus.</p>
|
||||
</dd>
|
||||
|
||||
<dt class="col-sm-3">Malesuada porta</dt>
|
||||
<dd class="col-sm-9">
|
||||
Etiam porta sem malesuada magna mollis euismod.
|
||||
</dd>
|
||||
|
||||
<dt class="col-sm-3 text-truncate">Truncated term is truncated</dt>
|
||||
<dd class="col-sm-9">
|
||||
Fusce dapibus, tellus ac cursus commodo, tortor mauris
|
||||
condimentum nibh, ut fermentum massa justo sit amet risus.
|
||||
</dd>
|
||||
|
||||
<dt class="col-sm-3">Nesting</dt>
|
||||
<dd class="col-sm-9">
|
||||
<dl class="row">
|
||||
<dt class="col-sm-4">Nested definition list</dt>
|
||||
<dd class="col-sm-8">
|
||||
Aenean posuere, tortor sed cursus feugiat, nunc augue nunc.
|
||||
</dd>
|
||||
</dl>
|
||||
</dd>
|
||||
</dl>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'Typography'
|
||||
}
|
||||
</script>
|
||||
128
resources/js/src/views/users/Create.vue
Normal file
128
resources/js/src/views/users/Create.vue
Normal file
@@ -0,0 +1,128 @@
|
||||
<template>
|
||||
<CRow>
|
||||
<CCol col="md-6">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<strong>Tạo mới người dùng</strong>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CForm>
|
||||
<CInput
|
||||
placeholder="Let us know your full name."
|
||||
label="Tên"
|
||||
:value.sync="user.name"
|
||||
horizontal
|
||||
/>
|
||||
<CInput
|
||||
label="Email"
|
||||
placeholder="Enter your email"
|
||||
type="email"
|
||||
:value.sync="user.email"
|
||||
horizontal
|
||||
autocomplete="email"
|
||||
/>
|
||||
<CInput
|
||||
label="Số điện thoại"
|
||||
placeholder="Enter your tel"
|
||||
:value.sync="user.tel"
|
||||
horizontal
|
||||
autocomplete="tel"
|
||||
/>
|
||||
<CInput label="Ngày sinh" type="date" :value.sync="user.birthday" horizontal />
|
||||
<CSelect
|
||||
label="Chức danh"
|
||||
horizontal
|
||||
:value.sync="user.title_id"
|
||||
:options="titles"
|
||||
placeholder="Please select"
|
||||
/>
|
||||
<CSelect
|
||||
label="Phòng ban"
|
||||
horizontal
|
||||
:value.sync="user.department_id"
|
||||
:options="departments"
|
||||
placeholder="Please select"
|
||||
/>
|
||||
<CFormGroup class="form-group form-row">
|
||||
<template #label>
|
||||
<slot name="label">
|
||||
<label class="col-form-label col-sm-3">Kích hoạt</label>
|
||||
</slot>
|
||||
</template>
|
||||
<template #input>
|
||||
<CSwitch class="mx-1" color="success" :checked.sync="user.active" />
|
||||
</template>
|
||||
</CFormGroup>
|
||||
<hr />
|
||||
<CInput
|
||||
placeholder="Nhập mật khẩu."
|
||||
label="Mật khẩu"
|
||||
type="password"
|
||||
:value.sync="user.password"
|
||||
horizontal
|
||||
/>
|
||||
<CInput
|
||||
placeholder="Nhập lại mật khẩu."
|
||||
label="Xác nhận"
|
||||
type="password"
|
||||
:value.sync="user.password_confirmation"
|
||||
horizontal
|
||||
/>
|
||||
</CForm>
|
||||
</CCardBody>
|
||||
<CCardFooter>
|
||||
<CButton size="sm" @click="createUser" class="float-right" color="success">
|
||||
<CIcon name="cil-medical-cross" /> Tạo
|
||||
</CButton>
|
||||
</CCardFooter>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import services from "../../services/factory";
|
||||
|
||||
export default {
|
||||
name: "Create",
|
||||
data() {
|
||||
return {
|
||||
user: {
|
||||
name: "",
|
||||
email: "",
|
||||
tel: "",
|
||||
birthday: "",
|
||||
title_id: "",
|
||||
department_id: "",
|
||||
active: true,
|
||||
password: "",
|
||||
password_confirmation: ""
|
||||
},
|
||||
titles: [],
|
||||
departments: []
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.fetch();
|
||||
},
|
||||
methods: {
|
||||
async fetch() {
|
||||
const titleResponse = await services.title.all();
|
||||
this.titles = this.formatKeys(titleResponse.data);
|
||||
const departmentResponse = await services.department.all();
|
||||
this.departments = this.formatKeys(departmentResponse.data);
|
||||
},
|
||||
async createUser() {
|
||||
await services.user
|
||||
.create(this.user)
|
||||
.then(response => {
|
||||
this.$router.push({ path: `/users/${response.data.id}` });
|
||||
this.$toast.success("Đã tạo tài khoản");
|
||||
})
|
||||
.catch(error => {
|
||||
this.toastHttpError(error);
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
49
resources/js/src/views/users/Me.vue
Normal file
49
resources/js/src/views/users/Me.vue
Normal file
@@ -0,0 +1,49 @@
|
||||
<template>
|
||||
<div>
|
||||
<CRow>
|
||||
<CCol col="md-6">
|
||||
<CInfo :userId="userId" :isMe="true" />
|
||||
</CCol>
|
||||
<CCol col="md-6">
|
||||
<CPassword :userId="userId" :isMe="true" />
|
||||
</CCol>
|
||||
</CRow>
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<strong>Phân quyền</strong>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CRow>
|
||||
<CCol col="6">
|
||||
<CRole :userId="userId" />
|
||||
</CCol>
|
||||
<CCol col="6">
|
||||
<CPermission :userId="userId" />
|
||||
</CCol>
|
||||
</CRow>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import CInfo from "../../components/user/Info";
|
||||
import CPassword from "../../components/user/Password";
|
||||
import CRole from "../../components/user/TreeRole";
|
||||
import CPermission from "../../components/user/TreePermission";
|
||||
|
||||
export default {
|
||||
name: "Me",
|
||||
components: {
|
||||
CInfo,
|
||||
CPassword,
|
||||
CRole,
|
||||
CPermission
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
userId: this.$store.getters["auth/userId"]
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
59
resources/js/src/views/users/User.vue
Normal file
59
resources/js/src/views/users/User.vue
Normal file
@@ -0,0 +1,59 @@
|
||||
<template>
|
||||
<div>
|
||||
<CRow>
|
||||
<CCol col="md-6">
|
||||
<CInfo :userId="userId" />
|
||||
</CCol>
|
||||
<CCol col="md-6">
|
||||
<CPassword :userId="userId" />
|
||||
</CCol>
|
||||
</CRow>
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<strong>Phân quyền</strong>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CRow>
|
||||
<CCol col="6">
|
||||
<CRole :userId="userId" />
|
||||
</CCol>
|
||||
<CCol col="6">
|
||||
<CPermission :userId="userId" />
|
||||
</CCol>
|
||||
</CRow>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import CInfo from "../../components/user/Info";
|
||||
import CPassword from "../../components/user/Password";
|
||||
import CRole from "../../components/user/TreeRole";
|
||||
import CPermission from "../../components/user/TreePermission";
|
||||
|
||||
export default {
|
||||
name: "User",
|
||||
components: {
|
||||
CInfo,
|
||||
CPassword,
|
||||
CRole,
|
||||
CPermission
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
userId: ""
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
$route: {
|
||||
immediate: true,
|
||||
handler(route) {
|
||||
if (route.params && route.params.id) {
|
||||
this.userId = route.params.id;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
225
resources/js/src/views/users/Users.vue
Normal file
225
resources/js/src/views/users/Users.vue
Normal file
@@ -0,0 +1,225 @@
|
||||
<template>
|
||||
<CRow>
|
||||
<CCol col="12">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
<CIcon name="cil-grid" />Danh sách người dùng
|
||||
<CButton
|
||||
size="sm"
|
||||
@click="createUser"
|
||||
class="float-right"
|
||||
color="primary"
|
||||
variant="outline"
|
||||
v-c-tooltip="'Tạo mới'"
|
||||
>
|
||||
<CIcon name="cil-user-follow" />
|
||||
</CButton>
|
||||
<CButton
|
||||
size="sm"
|
||||
@click="downloadExport"
|
||||
class="float-right mr-2"
|
||||
color="primary"
|
||||
variant="outline"
|
||||
v-c-tooltip="'Xuất'"
|
||||
>
|
||||
<CIcon name="cil-vertical-align-bottom" />
|
||||
</CButton>
|
||||
<CButton
|
||||
size="sm"
|
||||
@click="onClickImport"
|
||||
class="float-right mr-2"
|
||||
color="primary"
|
||||
variant="outline"
|
||||
v-c-tooltip="'Nhập'"
|
||||
>
|
||||
<CIcon name="cil-vertical-align-top" />
|
||||
</CButton>
|
||||
<CInputFile hidden id="fileimport" accept=".Xlsx" @change="upload" />
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CSearchBox
|
||||
:fields="searchFields"
|
||||
@fieldChanged="searchFieldChanged"
|
||||
@valueChanged="searchValueChanged"
|
||||
/>
|
||||
<CDataTable
|
||||
hover
|
||||
striped
|
||||
:loading="loading"
|
||||
:items="items"
|
||||
:fields="fields"
|
||||
clickable-rows
|
||||
@row-clicked="rowClicked"
|
||||
>
|
||||
<template #title="{item}">
|
||||
<td>{{item.title ? item.title.name : 'Chưa xác định'}}</td>
|
||||
</template>
|
||||
<template #department="{item}">
|
||||
<td>{{item.department ? item.department.name : 'Chưa xác định'}}</td>
|
||||
</template>
|
||||
</CDataTable>
|
||||
<CPagination
|
||||
align="center"
|
||||
:pages="pages"
|
||||
:active-page.sync="currentPage"
|
||||
:activePage="currentPage"
|
||||
/>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import services from "../../services/factory";
|
||||
import CSearchBox from "../../components/SearchBox";
|
||||
|
||||
export default {
|
||||
name: "Users",
|
||||
components: {
|
||||
CSearchBox
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
loading: true,
|
||||
items: null,
|
||||
fields: [
|
||||
{ key: "id", label: "Mã" },
|
||||
{ key: "name", label: "Tên", _classes: "font-weight-bold" },
|
||||
{ key: "email", label: "Email" },
|
||||
{ key: "tel", label: "Số điện thoại" },
|
||||
{ key: "title", label: "Chức danh" },
|
||||
{ key: "department", label: "Phòng ban" }
|
||||
],
|
||||
searchFields: [
|
||||
{ value: "", label: "Tất cả" },
|
||||
{ value: "id", label: "Mã" },
|
||||
{ value: "name", label: "Tên" },
|
||||
{ value: "email", label: "Email" },
|
||||
{ value: "tel", label: "Số điện thoại" },
|
||||
{ value: "birthday", label: "Ngày sinh" },
|
||||
{ value: "title.name", label: "Chức danh" },
|
||||
{ value: "department.name", label: "Phòng ban" },
|
||||
{ value: "created_at", label: "Ngày tạo" }
|
||||
],
|
||||
currentPage: 1,
|
||||
pages: 0,
|
||||
size: 0,
|
||||
searchValue: "",
|
||||
searchField: ""
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.fetch();
|
||||
},
|
||||
watch: {
|
||||
$route: {
|
||||
immediate: true,
|
||||
handler(route) {
|
||||
if (route.query && route.query.page) {
|
||||
this.currentPage = Number(route.query.page);
|
||||
}
|
||||
}
|
||||
},
|
||||
currentPage: {
|
||||
handler(page) {
|
||||
this.pageChange(page);
|
||||
this.currentPage = page;
|
||||
this.fetch();
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
query() {
|
||||
return {
|
||||
...this.withQuery,
|
||||
...this.pageQuery,
|
||||
...this.searchQuery,
|
||||
...this.orderQuery
|
||||
};
|
||||
},
|
||||
orderQuery() {
|
||||
return {
|
||||
orderBy: "created_at",
|
||||
sortedBy: "desc"
|
||||
};
|
||||
},
|
||||
pageQuery() {
|
||||
return this.currentPage ? { page: this.currentPage } : {};
|
||||
},
|
||||
withQuery() {
|
||||
return {
|
||||
with: "title;department"
|
||||
};
|
||||
},
|
||||
searchQuery() {
|
||||
return this.searchValue
|
||||
? {
|
||||
search: this.searchValue,
|
||||
searchFields: this.searchField || ''
|
||||
}
|
||||
: {};
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
async fetch() {
|
||||
this.loading = true;
|
||||
const response = await services.user.all(this.query);
|
||||
this.items = response.data.data;
|
||||
this.currentPage = response.data.current_page;
|
||||
this.pages = response.data.last_page;
|
||||
this.loading = false;
|
||||
},
|
||||
rowClicked(item, index) {
|
||||
this.$router.push({ path: `users/${item.id}` });
|
||||
},
|
||||
createUser() {
|
||||
this.$router.push({ path: `users/create` });
|
||||
},
|
||||
pageChange(val) {
|
||||
this.$router.push({ query: { page: val } });
|
||||
},
|
||||
searchFieldChanged(item) {
|
||||
this.searchField = item.value;
|
||||
this.fetch();
|
||||
},
|
||||
searchValueChanged(value) {
|
||||
this.searchValue = value;
|
||||
this.fetch();
|
||||
},
|
||||
onClickImport() {
|
||||
document.getElementById("fileimport").click();
|
||||
},
|
||||
upload(files) {
|
||||
this.loading = true;
|
||||
let file = files[0];
|
||||
let formData = new FormData();
|
||||
formData.append("data", file);
|
||||
services.user
|
||||
.import(formData)
|
||||
.then(response => {
|
||||
this.$toast.success("Đã nhập thành công");
|
||||
this.fetch();
|
||||
})
|
||||
.catch(error => {
|
||||
this.toastHttpError(error);
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
downloadExport() {
|
||||
services.user
|
||||
.export({
|
||||
export: "Xlsx",
|
||||
search: this.searchValue,
|
||||
searchFields: this.searchField
|
||||
})
|
||||
.then(response => {
|
||||
this.$toast.success("Đã xuất");
|
||||
})
|
||||
.catch(error => {
|
||||
this.toastHttpError(error);
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
31
resources/js/src/views/users/UsersData.js
Normal file
31
resources/js/src/views/users/UsersData.js
Normal file
@@ -0,0 +1,31 @@
|
||||
const usersData = [
|
||||
{ username: 'Samppa Nori', registered: '2012/01/01', role: 'Member', status: 'Active'},
|
||||
{ username: 'Estavan Lykos', registered: '2012/02/01', role: 'Staff', status: 'Banned'},
|
||||
{ username: 'Chetan Mohamed', registered: '2012/02/01', role: 'Admin', status: 'Inactive'},
|
||||
{ username: 'Derick Maximinus', registered: '2012/03/01', role: 'Member', status: 'Pending'},
|
||||
{ username: 'Friderik Dávid', registered: '2012/01/21', role: 'Staff', status: 'Active'},
|
||||
{ username: 'Yiorgos Avraamu', registered: '2012/01/01', role: 'Member', status: 'Active'},
|
||||
{ username: 'Avram Tarasios', registered: '2012/02/01', role: 'Staff', status: 'Banned', _classes: 'table-success'},
|
||||
{ username: 'Quintin Ed', registered: '2012/02/01', role: 'Admin', status: 'Inactive'},
|
||||
{ username: 'Enéas Kwadwo', registered: '2012/03/01', role: 'Member', status: 'Pending'},
|
||||
{ username: 'Agapetus Tadeáš', registered: '2012/01/21', role: 'Staff', status: 'Active'},
|
||||
{ username: 'Carwyn Fachtna', registered: '2012/01/01', role: 'Member', status: 'Active', _classes: 'table-success'},
|
||||
{ username: 'Nehemiah Tatius', registered: '2012/02/01', role: 'Staff', status: 'Banned'},
|
||||
{ username: 'Ebbe Gemariah', registered: '2012/02/01', role: 'Admin', status: 'Inactive'},
|
||||
{ username: 'Eustorgios Amulius', registered: '2012/03/01', role: 'Member', status: 'Pending'},
|
||||
{ username: 'Leopold Gáspár', registered: '2012/01/21', role: 'Staff', status: 'Active'},
|
||||
{ username: 'Pompeius René', registered: '2012/01/01', role: 'Member', status: 'Active'},
|
||||
{ username: 'Paĉjo Jadon', registered: '2012/02/01', role: 'Staff', status: 'Banned'},
|
||||
{ username: 'Micheal Mercurius', registered: '2012/02/01', role: 'Admin', status: 'Inactive'},
|
||||
{ username: 'Ganesha Dubhghall', registered: '2012/03/01', role: 'Member', status: 'Pending'},
|
||||
{ username: 'Hiroto Šimun', registered: '2012/01/21', role: 'Staff', status: 'Active'},
|
||||
{ username: 'Vishnu Serghei', registered: '2012/01/01', role: 'Member', status: 'Active'},
|
||||
{ username: 'Zbyněk Phoibos', registered: '2012/02/01', role: 'Staff', status: 'Banned'},
|
||||
{ username: 'Einar Randall', registered: '2012/02/01', role: 'Admin', status: 'Inactive', _classes: 'table-danger'},
|
||||
{ username: 'Félix Troels', registered: '2012/03/21', role: 'Staff', status: 'Active'},
|
||||
{ username: 'Aulus Agmundr', registered: '2012/01/01', role: 'Member', status: 'Pending'}
|
||||
]
|
||||
|
||||
export default usersData
|
||||
|
||||
|
||||
501
resources/js/src/views/widgets/Widgets.vue
Normal file
501
resources/js/src/views/widgets/Widgets.vue
Normal file
@@ -0,0 +1,501 @@
|
||||
<template>
|
||||
<div>
|
||||
<CRow>
|
||||
<CCol sm="6" lg="3">
|
||||
<CWidgetProgress footer="Lorem ipsum dolor sit amet enim.">
|
||||
<div class="h4 m-0">89.9%</div>
|
||||
<div class="card-header-actions">
|
||||
<a
|
||||
href="https://coreui.io/vue/docs/components/widgets"
|
||||
class="card-header-action position-absolute"
|
||||
style="right:5px; top:5px"
|
||||
rel="noreferrer noopener"
|
||||
target="_blank"
|
||||
>
|
||||
<small class="text-muted">docs</small>
|
||||
</a>
|
||||
</div>
|
||||
<div>Lorem ipsum...</div>
|
||||
<CProgress
|
||||
color="success"
|
||||
:value="25"
|
||||
class="progress-xs my-3 mb-0"
|
||||
/>
|
||||
</CWidgetProgress>
|
||||
</CCol>
|
||||
<CCol sm="6" lg="3">
|
||||
<CWidgetProgress
|
||||
header="12.124"
|
||||
text="Lorem ipsum..."
|
||||
footer="Lorem ipsum dolor sit amet enim."
|
||||
color="info"
|
||||
:value="25"
|
||||
/>
|
||||
</CCol>
|
||||
<CCol sm="6" lg="3">
|
||||
<CWidgetProgress
|
||||
header="$98.111,00"
|
||||
text="Lorem ipsum..."
|
||||
footer="Lorem ipsum dolor sit amet enim."
|
||||
color="warning"
|
||||
:value="25"
|
||||
/>
|
||||
</CCol>
|
||||
<CCol sm="6" lg="3">
|
||||
<CWidgetProgress
|
||||
header="2 TB"
|
||||
text="Lorem ipsum..."
|
||||
footer="Lorem ipsum dolor sit amet enim."
|
||||
color="danger"
|
||||
:value="25"
|
||||
/>
|
||||
</CCol>
|
||||
</CRow>
|
||||
<CRow>
|
||||
<CCol sm="6" lg="3">
|
||||
<CWidgetProgress
|
||||
header="89.9%"
|
||||
text="Lorem ipsum..."
|
||||
footer="Lorem ipsum dolor sit amet enim."
|
||||
color="success"
|
||||
inverse :value="25"
|
||||
/>
|
||||
</CCol>
|
||||
<CCol sm="6" lg="3">
|
||||
<CWidgetProgress
|
||||
header="12.124"
|
||||
text="Lorem ipsum..."
|
||||
footer="Lorem ipsum dolor sit amet enim."
|
||||
color="info"
|
||||
inverse
|
||||
:value="25"
|
||||
/>
|
||||
</CCol>
|
||||
<CCol sm="6" lg="3">
|
||||
<CWidgetProgress
|
||||
header="$98.111,00"
|
||||
text="Lorem ipsum..."
|
||||
footer="Lorem ipsum dolor sit amet enim."
|
||||
color="warning"
|
||||
inverse
|
||||
:value="25"
|
||||
/>
|
||||
</CCol>
|
||||
<CCol sm="6" lg="3">
|
||||
<CWidgetProgress
|
||||
header="2 TB"
|
||||
text="Lorem ipsum..."
|
||||
footer="Lorem ipsum dolor sit amet enim."
|
||||
color="danger"
|
||||
inverse
|
||||
:value="25"
|
||||
/>
|
||||
</CCol>
|
||||
</CRow>
|
||||
<CRow>
|
||||
<CCol col="12" sm="6" lg="3">
|
||||
<CWidgetIcon
|
||||
header="$1.999,50"
|
||||
text="Income"
|
||||
color="primary"
|
||||
>
|
||||
<CIcon name="cil-settings" width="24"/>
|
||||
</CWidgetIcon>
|
||||
</CCol>
|
||||
<CCol col="12" sm="6" lg="3">
|
||||
<CWidgetIcon
|
||||
header="$1.999,50"
|
||||
text="Income"
|
||||
color="info"
|
||||
>
|
||||
<CIcon name="cil-laptop" width="24"/>
|
||||
</CWidgetIcon>
|
||||
</CCol>
|
||||
<CCol col="12" sm="6" lg="3">
|
||||
<CWidgetIcon
|
||||
header="$1.999,50"
|
||||
text="Income"
|
||||
color="warning"
|
||||
>
|
||||
<CIcon name="cil-moon" width="24"/>
|
||||
</CWidgetIcon>
|
||||
</CCol>
|
||||
<CCol col="12" sm="6" lg="3">
|
||||
<CWidgetIcon
|
||||
header="$1.999,50"
|
||||
text="Income"
|
||||
color="danger"
|
||||
>
|
||||
<CIcon name="cil-bell" width="24"/>
|
||||
</CWidgetIcon>
|
||||
</CCol>
|
||||
</CRow>
|
||||
<CRow>
|
||||
<CCol col="12" sm="6" lg="3">
|
||||
<CWidgetIcon
|
||||
header="$1.999,50"
|
||||
text="Income"
|
||||
color="primary"
|
||||
:icon-padding="false"
|
||||
>
|
||||
<CIcon name="cil-settings" width="24"/>
|
||||
</CWidgetIcon>
|
||||
</CCol>
|
||||
<CCol col="12" sm="6" lg="3">
|
||||
<CWidgetIcon
|
||||
header="$1.999,50"
|
||||
text="Income"
|
||||
color="info"
|
||||
:icon-padding="false"
|
||||
>
|
||||
<CIcon name="cil-laptop" width="24"/>
|
||||
</CWidgetIcon>
|
||||
</CCol>
|
||||
<CCol col="12" sm="6" lg="3">
|
||||
<CWidgetIcon
|
||||
header="$1.999,50"
|
||||
text="Income"
|
||||
color="warning"
|
||||
:icon-padding="false"
|
||||
>
|
||||
<CIcon name="cil-moon" width="24"/>
|
||||
</CWidgetIcon>
|
||||
</CCol>
|
||||
<CCol col="12" sm="6" lg="3">
|
||||
<CWidgetIcon
|
||||
header="$1.999,50"
|
||||
text="Income"
|
||||
color="danger"
|
||||
:icon-padding="false"
|
||||
>
|
||||
<CIcon name="cil-bell" width="24"/>
|
||||
</CWidgetIcon>
|
||||
</CCol>
|
||||
</CRow>
|
||||
<CRow>
|
||||
<CCol col="12" sm="6" lg="4">
|
||||
<CWidgetIcon
|
||||
header="$1.999,50"
|
||||
text="Income"
|
||||
color="primary"
|
||||
:icon-padding="false"
|
||||
>
|
||||
<CIcon name="cil-settings" class="mx-5 " width="24"/>
|
||||
</CWidgetIcon>
|
||||
</CCol>
|
||||
<CCol col="12" sm="6" lg="4">
|
||||
<CWidgetIcon
|
||||
header="$1.999,50"
|
||||
text="Income"
|
||||
color="info"
|
||||
:icon-padding="false"
|
||||
>
|
||||
<CIcon name="cil-laptop" class="mx-5 " width="24"/>
|
||||
</CWidgetIcon>
|
||||
</CCol>
|
||||
<CCol col="12" sm="6" lg="4">
|
||||
<CWidgetIcon
|
||||
header="$1.999,50"
|
||||
text="Income"
|
||||
color="warning"
|
||||
:icon-padding="false"
|
||||
>
|
||||
<CIcon name="cil-moon" class="mx-5 " width="24"/>
|
||||
<template #footer>
|
||||
<CCardFooter class="card-footer px-3 py-2">
|
||||
<CLink
|
||||
class="font-weight-bold font-xs btn-block text-muted"
|
||||
href="https://coreui.io/"
|
||||
>
|
||||
View more
|
||||
<CIcon name="cil-arrowRight" class="float-right" width="16"/>
|
||||
</CLink>
|
||||
</CCardFooter>
|
||||
</template>
|
||||
</CWidgetIcon>
|
||||
</CCol>
|
||||
</CRow>
|
||||
<!-- <CRow>
|
||||
<CCol col="12" sm="6" lg="4">
|
||||
<CWidgetIcon
|
||||
header="$1.999,50"
|
||||
text="Income"
|
||||
color="primary"
|
||||
:icon-padding="false"
|
||||
link="#"
|
||||
>
|
||||
<CIcon name="cil-settings" class="mx-5 " width="24"/>
|
||||
</CWidgetIcon>
|
||||
</CCol>
|
||||
<CCol col="12" sm="6" lg="4">
|
||||
<CWidgetIcon
|
||||
header="$1.999,50"
|
||||
text="Income"
|
||||
color="info"
|
||||
:icon-padding="false"
|
||||
link="#"
|
||||
>
|
||||
<CIcon name="cil-laptop" class="mx-5 " width="24"/>
|
||||
</CWidgetIcon>
|
||||
</CCol>
|
||||
<CCol col="12" sm="6" lg="4">
|
||||
<CWidgetIcon
|
||||
header="$1.999,50"
|
||||
text="Income"
|
||||
color="warning"
|
||||
:icon-padding="false"
|
||||
link="#"
|
||||
>
|
||||
<CIcon name="cil-moon" class="mx-5" width="24"/>
|
||||
</CWidgetIcon>
|
||||
</CCol>
|
||||
</CRow> -->
|
||||
<WidgetsBrand noCharts/>
|
||||
<WidgetsBrand/>
|
||||
<CCardGroup class="mb-4">
|
||||
<CWidgetProgressIcon
|
||||
header="87.500"
|
||||
text="Visitors"
|
||||
color="info"
|
||||
>
|
||||
<CIcon name="cil-people" height="36"/>
|
||||
</CWidgetProgressIcon>
|
||||
<CWidgetProgressIcon
|
||||
header="385"
|
||||
text="New Clients"
|
||||
color="success"
|
||||
>
|
||||
<CIcon name="cil-userFollow" height="36"/>
|
||||
</CWidgetProgressIcon>
|
||||
<CWidgetProgressIcon
|
||||
header="1238"
|
||||
text="Products sold"
|
||||
color="warning"
|
||||
>
|
||||
<CIcon name="cil-basket" height="36"/>
|
||||
</CWidgetProgressIcon>
|
||||
<CWidgetProgressIcon
|
||||
header="28%"
|
||||
text="Returning Visitors"
|
||||
>
|
||||
<CIcon name="cil-chartPie" height="36"/>
|
||||
</CWidgetProgressIcon>
|
||||
<CWidgetProgressIcon
|
||||
header="5:34:11"
|
||||
text="Avg. Time"
|
||||
color="danger"
|
||||
>
|
||||
<CIcon name="cil-speedometer" height="36"/>
|
||||
</CWidgetProgressIcon>
|
||||
</CCardGroup>
|
||||
<CCardGroup class="mb-4">
|
||||
<CWidgetProgressIcon
|
||||
header="87.500"
|
||||
text="Visitors"
|
||||
color="info"
|
||||
inverse
|
||||
>
|
||||
<CIcon name="cil-people" height="36"/>
|
||||
</CWidgetProgressIcon>
|
||||
<CWidgetProgressIcon
|
||||
header="385"
|
||||
text="New Clients"
|
||||
color="success"
|
||||
inverse
|
||||
>
|
||||
<CIcon name="cil-userFollow" height="36"/>
|
||||
</CWidgetProgressIcon>
|
||||
<CWidgetProgressIcon
|
||||
header="1238"
|
||||
text="Products sold"
|
||||
color="warning"
|
||||
inverse
|
||||
>
|
||||
<CIcon name="cil-basket" height="36"/>
|
||||
</CWidgetProgressIcon>
|
||||
<CWidgetProgressIcon
|
||||
header="28%"
|
||||
text="Returning Visitors"
|
||||
color="primary"
|
||||
inverse
|
||||
>
|
||||
<CIcon name="cil-chartPie" height="36"/>
|
||||
</CWidgetProgressIcon>
|
||||
<CWidgetProgressIcon
|
||||
header="5:34:11"
|
||||
text="Avg. Time"
|
||||
color="danger"
|
||||
inverse
|
||||
>
|
||||
<CIcon name="cil-speedometer" height="36"/>
|
||||
</CWidgetProgressIcon>
|
||||
</CCardGroup>
|
||||
<CRow>
|
||||
<CCol sm="6" md="2">
|
||||
<CWidgetProgressIcon
|
||||
header="87.500"
|
||||
text="Visitors"
|
||||
color="info"
|
||||
>
|
||||
<CIcon name="cil-people" height="36"/>
|
||||
</CWidgetProgressIcon>
|
||||
</CCol>
|
||||
<CCol sm="6" md="2">
|
||||
<CWidgetProgressIcon
|
||||
header="385"
|
||||
text="New Clients"
|
||||
color="success"
|
||||
>
|
||||
<CIcon name="cil-userFollow" height="36"/>
|
||||
</CWidgetProgressIcon>
|
||||
</CCol>
|
||||
<CCol sm="6" md="2">
|
||||
<CWidgetProgressIcon
|
||||
header="1238"
|
||||
text="Products sold"
|
||||
color="warning"
|
||||
>
|
||||
<CIcon name="cil-basket" height="36"/>
|
||||
</CWidgetProgressIcon>
|
||||
</CCol>
|
||||
<CCol sm="6" md="2">
|
||||
<CWidgetProgressIcon
|
||||
header="28%"
|
||||
text="Returning Visitors"
|
||||
color="primary"
|
||||
>
|
||||
<CIcon name="cil-chartPie" height="36"/>
|
||||
</CWidgetProgressIcon>
|
||||
</CCol>
|
||||
<CCol sm="6" md="2">
|
||||
<CWidgetProgressIcon
|
||||
header="5:34:11"
|
||||
text="Avg. Time"
|
||||
color="danger"
|
||||
>
|
||||
<CIcon name="cil-speedometer" height="36"/>
|
||||
</CWidgetProgressIcon>
|
||||
</CCol>
|
||||
<CCol sm="6" md="2">
|
||||
<CWidgetProgressIcon
|
||||
header="972"
|
||||
text="comments"
|
||||
color="info"
|
||||
>
|
||||
<CIcon name="cil-speech" height="36"/>
|
||||
</CWidgetProgressIcon>
|
||||
</CCol>
|
||||
</CRow>
|
||||
<CRow>
|
||||
<CCol sm="6" md="2">
|
||||
<CWidgetProgressIcon
|
||||
header="87.500"
|
||||
text="Visitors"
|
||||
color="info"
|
||||
inverse
|
||||
>
|
||||
<CIcon name="cil-people" height="36"/>
|
||||
</CWidgetProgressIcon>
|
||||
</CCol>
|
||||
<CCol sm="6" md="2">
|
||||
<CWidgetProgressIcon
|
||||
header="385"
|
||||
text="New Clients"
|
||||
color="success"
|
||||
inverse
|
||||
>
|
||||
<CIcon name="cil-userFollow" height="36"/>
|
||||
</CWidgetProgressIcon>
|
||||
</CCol>
|
||||
<CCol sm="6" md="2">
|
||||
<CWidgetProgressIcon
|
||||
header="1238"
|
||||
text="Products sold"
|
||||
color="warning"
|
||||
inverse
|
||||
>
|
||||
<CIcon name="cil-basket" height="36"/>
|
||||
</CWidgetProgressIcon>
|
||||
</CCol>
|
||||
<CCol sm="6" md="2">
|
||||
<CWidgetProgressIcon
|
||||
header="28%"
|
||||
text="Returning Visitors"
|
||||
color="primary"
|
||||
inverse
|
||||
>
|
||||
<CIcon name="cil-chartPie" height="36"/>
|
||||
</CWidgetProgressIcon>
|
||||
</CCol>
|
||||
<CCol sm="6" md="2">
|
||||
<CWidgetProgressIcon
|
||||
header="5:34:11"
|
||||
text="Avg. Time"
|
||||
color="danger"
|
||||
inverse
|
||||
>
|
||||
<CIcon name="cil-speedometer" height="36"/>
|
||||
</CWidgetProgressIcon>
|
||||
</CCol>
|
||||
<CCol sm="6" md="2">
|
||||
<CWidgetProgressIcon
|
||||
header="972"
|
||||
text="comments"
|
||||
color="info"
|
||||
inverse
|
||||
>
|
||||
<CIcon name="cil-speech" height="36"/>
|
||||
</CWidgetProgressIcon>
|
||||
</CCol>
|
||||
</CRow>
|
||||
<WidgetsDropdown/>
|
||||
<CRow>
|
||||
<CCol sm="4" lg="2">
|
||||
<CWidgetSimple header="title" text="1,123">
|
||||
<CChartLineSimple style="height:40px" border-color="danger"/>
|
||||
</CWidgetSimple>
|
||||
</CCol>
|
||||
<CCol sm="4" lg="2">
|
||||
<CWidgetSimple header="title" text="1,123">
|
||||
<CChartLineSimple style="height:40px" border-color="primary"/>
|
||||
</CWidgetSimple>
|
||||
</CCol>
|
||||
<CCol sm="4" lg="2">
|
||||
<CWidgetSimple header="title" text="1,123">
|
||||
<CChartLineSimple style="height:40px" border-color="success"/>
|
||||
</CWidgetSimple>
|
||||
</CCol>
|
||||
<CCol sm="4" lg="2">
|
||||
<CWidgetSimple header="title" text="1,123">
|
||||
<CChartBarSimple style="height:40px" background-color="danger"/>
|
||||
</CWidgetSimple>
|
||||
</CCol>
|
||||
<CCol sm="4" lg="2">
|
||||
<CWidgetSimple header="title" text="1,123">
|
||||
<CChartBarSimple style="height:40px" background-color="primary"/>
|
||||
</CWidgetSimple>
|
||||
</CCol>
|
||||
<CCol sm="4" lg="2">
|
||||
<CWidgetSimple header="title" text="1,123">
|
||||
<CChartBarSimple style="height:40px" background-color="success"/>
|
||||
</CWidgetSimple>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import WidgetsBrand from './WidgetsBrand'
|
||||
import WidgetsDropdown from './WidgetsDropdown'
|
||||
import { CChartLineSimple, CChartBarSimple } from '../charts/index.js'
|
||||
|
||||
export default {
|
||||
name: 'Widgets',
|
||||
components: {
|
||||
CChartLineSimple,
|
||||
CChartBarSimple,
|
||||
WidgetsBrand,
|
||||
WidgetsDropdown
|
||||
}
|
||||
}
|
||||
</script>
|
||||
178
resources/js/src/views/widgets/WidgetsBrand.vue
Normal file
178
resources/js/src/views/widgets/WidgetsBrand.vue
Normal file
@@ -0,0 +1,178 @@
|
||||
<template>
|
||||
<CRow>
|
||||
<template v-if="!noCharts">
|
||||
<CCol md="3" sm="6">
|
||||
<CWidgetBrand
|
||||
color="facebook"
|
||||
right-header="89k"
|
||||
right-footer="friends"
|
||||
left-header="459"
|
||||
left-footer="feeds"
|
||||
>
|
||||
<CIcon
|
||||
name="cib-facebook"
|
||||
height="52"
|
||||
class="my-4"
|
||||
/>
|
||||
<CChartLineSimple
|
||||
class="c-chart-brand"
|
||||
background-color="rgba(255,255,255,.1)"
|
||||
:data-points="[65, 59, 84, 84, 51, 55, 40]"
|
||||
label="Friends"
|
||||
labels="months"
|
||||
/>
|
||||
</CWidgetBrand>
|
||||
</CCol>
|
||||
<CCol md="3" sm="6">
|
||||
<CWidgetBrand
|
||||
color="twitter"
|
||||
right-header="973k"
|
||||
right-footer="followers"
|
||||
left-header="1.792"
|
||||
left-footer="tweets"
|
||||
>
|
||||
<CIcon
|
||||
name="cib-twitter"
|
||||
height="52"
|
||||
class="my-4"
|
||||
/>
|
||||
<CChartLineSimple
|
||||
class="c-chart-brand"
|
||||
background-color="rgba(255,255,255,.1)"
|
||||
:data-points="[1, 13, 9, 17, 34, 41, 38]"
|
||||
label="Followers"
|
||||
labels="months"
|
||||
/>
|
||||
</CWidgetBrand>
|
||||
</CCol>
|
||||
<CCol md="3" sm="6">
|
||||
<CWidgetBrand
|
||||
color="linkedin"
|
||||
right-header="500+"
|
||||
right-footer="contracts"
|
||||
left-header="292"
|
||||
left-footer="feeds"
|
||||
>
|
||||
<CIcon
|
||||
name="cib-linkedin"
|
||||
height="52"
|
||||
class="my-4"
|
||||
/>
|
||||
<CChartLineSimple
|
||||
class="c-chart-brand"
|
||||
background-color="rgba(255,255,255,.1)"
|
||||
:data-points="[78, 81, 80, 45, 34, 12, 40]"
|
||||
label="Contracts"
|
||||
labels="months"
|
||||
/>
|
||||
</CWidgetBrand>
|
||||
</CCol>
|
||||
<CCol md="3" sm="6">
|
||||
<CWidgetBrand
|
||||
right-header="12"
|
||||
right-footer="events"
|
||||
left-header="4"
|
||||
left-footer="meetings"
|
||||
color="warning"
|
||||
>
|
||||
<CIcon
|
||||
name="cil-calendar"
|
||||
height="52"
|
||||
class="my-4"
|
||||
/>
|
||||
<CChartLineSimple
|
||||
class="c-chart-brand"
|
||||
background-color="rgba(255,255,255,.1)"
|
||||
:data-points="[35, 23, 56, 22, 97, 23, 64]"
|
||||
label="Followers"
|
||||
labels="months"
|
||||
/>
|
||||
</CWidgetBrand>
|
||||
</CCol>
|
||||
</template>
|
||||
<template v-else>
|
||||
<CCol md="3" sm="6">
|
||||
<CWidgetBrand
|
||||
color="facebook"
|
||||
right-header="89k"
|
||||
right-footer="friends"
|
||||
left-header="459"
|
||||
left-footer="feeds"
|
||||
>
|
||||
<CIcon
|
||||
name="cib-facebook"
|
||||
height="56"
|
||||
class="my-4"
|
||||
/>
|
||||
</CWidgetBrand>
|
||||
</CCol>
|
||||
<CCol md="3" sm="6">
|
||||
<CWidgetBrand
|
||||
color="twitter"
|
||||
right-header="973k"
|
||||
right-footer="followers"
|
||||
left-header="1.792"
|
||||
left-footer="tweets"
|
||||
>
|
||||
<CIcon
|
||||
name="cib-twitter"
|
||||
height="56"
|
||||
class="my-4"
|
||||
/>
|
||||
</CWidgetBrand>
|
||||
</CCol>
|
||||
<CCol md="3" sm="6">
|
||||
<CWidgetBrand
|
||||
color="linkedin"
|
||||
right-header="500+"
|
||||
right-footer="contracts"
|
||||
left-header="292"
|
||||
left-footer="feeds"
|
||||
>
|
||||
<CIcon
|
||||
name="cib-linkedin"
|
||||
height="56"
|
||||
class="my-4"
|
||||
/>
|
||||
</CWidgetBrand>
|
||||
</CCol>
|
||||
<CCol md="3" sm="6">
|
||||
<CWidgetBrand
|
||||
right-header="12"
|
||||
right-footer="events"
|
||||
left-header="4"
|
||||
left-footer="meetings"
|
||||
color="warning"
|
||||
>
|
||||
<CIcon
|
||||
name="cil-calendar"
|
||||
height="56"
|
||||
class="my-4"
|
||||
/>
|
||||
</CWidgetBrand>
|
||||
</CCol>
|
||||
</template>
|
||||
</CRow>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { CChartLineSimple } from '../charts/index.js'
|
||||
|
||||
export default {
|
||||
name: 'WidgetsBrand',
|
||||
components: {
|
||||
CChartLineSimple
|
||||
},
|
||||
props: {
|
||||
noCharts: Boolean
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.c-chart-brand {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100px;
|
||||
}
|
||||
</style>
|
||||
138
resources/js/src/views/widgets/WidgetsDropdown.vue
Normal file
138
resources/js/src/views/widgets/WidgetsDropdown.vue
Normal file
@@ -0,0 +1,138 @@
|
||||
<template>
|
||||
<CRow>
|
||||
<CCol sm="6" lg="3">
|
||||
<CWidgetDropdown color="primary" header="9.823" text="Members online">
|
||||
<template #default>
|
||||
<CDropdown
|
||||
color="transparent p-0"
|
||||
placement="bottom-end"
|
||||
>
|
||||
<template #toggler-content>
|
||||
<CIcon name="cil-settings"/>
|
||||
</template>
|
||||
<CDropdownItem>Action</CDropdownItem>
|
||||
<CDropdownItem>Another action</CDropdownItem>
|
||||
<CDropdownItem>Something else here...</CDropdownItem>
|
||||
<CDropdownItem disabled>Disabled action</CDropdownItem>
|
||||
</CDropdown>
|
||||
</template>
|
||||
<template #footer>
|
||||
<CChartLineSimple
|
||||
pointed
|
||||
class="mt-3 mx-3"
|
||||
style="height:70px"
|
||||
:data-points="[65, 59, 84, 84, 51, 55, 40]"
|
||||
point-hover-background-color="primary"
|
||||
label="Members"
|
||||
labels="months"
|
||||
/>
|
||||
</template>
|
||||
</CWidgetDropdown>
|
||||
</CCol>
|
||||
<CCol sm="6" lg="3">
|
||||
<CWidgetDropdown color="info" header="9.823" text="Members online">
|
||||
<template #default>
|
||||
<CDropdown
|
||||
color="transparent p-0"
|
||||
placement="bottom-end"
|
||||
:caret="false"
|
||||
>
|
||||
<template #toggler-content>
|
||||
<CIcon name="cil-location-pin"/>
|
||||
</template>
|
||||
<CDropdownItem>Action</CDropdownItem>
|
||||
<CDropdownItem>Another action</CDropdownItem>
|
||||
<CDropdownItem>Something else here...</CDropdownItem>
|
||||
<CDropdownItem disabled>Disabled action</CDropdownItem>
|
||||
</CDropdown>
|
||||
</template>
|
||||
<template #footer>
|
||||
<CChartLineSimple
|
||||
pointed
|
||||
class="mt-3 mx-3"
|
||||
style="height:70px"
|
||||
:data-points="[1, 18, 9, 17, 34, 22, 11]"
|
||||
point-hover-background-color="info"
|
||||
:options="{ elements: { line: { tension: 0.00001 }}}"
|
||||
label="Members"
|
||||
labels="months"
|
||||
/>
|
||||
</template>
|
||||
</CWidgetDropdown>
|
||||
</CCol>
|
||||
<CCol sm="6" lg="3">
|
||||
<CWidgetDropdown
|
||||
color="warning"
|
||||
header="9.823"
|
||||
text="Members online"
|
||||
>
|
||||
<template #default>
|
||||
<CDropdown
|
||||
color="transparent p-0"
|
||||
placement="bottom-end"
|
||||
>
|
||||
<template #toggler-content>
|
||||
<CIcon name="cil-settings"/>
|
||||
</template>
|
||||
<CDropdownItem>Action</CDropdownItem>
|
||||
<CDropdownItem>Another action</CDropdownItem>
|
||||
<CDropdownItem>Something else here...</CDropdownItem>
|
||||
<CDropdownItem disabled>Disabled action</CDropdownItem>
|
||||
</CDropdown>
|
||||
</template>
|
||||
<template #footer>
|
||||
<CChartLineSimple
|
||||
class="mt-3"
|
||||
style="height:70px"
|
||||
background-color="rgba(255,255,255,.2)"
|
||||
:data-points="[78, 81, 80, 45, 34, 12, 40]"
|
||||
:options="{ elements: { line: { borderWidth: 2.5 }}}"
|
||||
point-hover-background-color="warning"
|
||||
label="Members"
|
||||
labels="months"
|
||||
/>
|
||||
</template>
|
||||
</CWidgetDropdown>
|
||||
</CCol>
|
||||
<CCol sm="6" lg="3">
|
||||
<CWidgetDropdown
|
||||
color="danger"
|
||||
header="9.823"
|
||||
text="Members online"
|
||||
>
|
||||
<template #default>
|
||||
<CDropdown
|
||||
color="transparent p-0"
|
||||
placement="bottom-end"
|
||||
>
|
||||
<template #toggler-content>
|
||||
<CIcon name="cil-settings"/>
|
||||
</template>
|
||||
<CDropdownItem>Action</CDropdownItem>
|
||||
<CDropdownItem>Another action</CDropdownItem>
|
||||
<CDropdownItem>Something else here...</CDropdownItem>
|
||||
<CDropdownItem disabled>Disabled action</CDropdownItem>
|
||||
</CDropdown>
|
||||
</template>
|
||||
<template #footer>
|
||||
<CChartBarSimple
|
||||
class="mt-3 mx-3"
|
||||
style="height:70px"
|
||||
background-color="rgb(250, 152, 152)"
|
||||
label="Members"
|
||||
labels="months"
|
||||
/>
|
||||
</template>
|
||||
</CWidgetDropdown>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { CChartLineSimple, CChartBarSimple } from '../charts/index.js'
|
||||
|
||||
export default {
|
||||
name: 'WidgetsDropdown',
|
||||
components: { CChartLineSimple, CChartBarSimple }
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user