mirror of
https://git.meshkee.com/cssd/cssd-back.git
synced 2026-10-13 19:41:06 +03:30
init project
This commit is contained in:
saeid
@@ -0,0 +1,188 @@
|
||||
<template>
|
||||
<v-navigation-drawer
|
||||
id="app-drawer"
|
||||
v-model="inputValue"
|
||||
app
|
||||
dark
|
||||
floating
|
||||
persistent
|
||||
mobile-break-point="991"
|
||||
width="260"
|
||||
>
|
||||
<v-img
|
||||
:src="image"
|
||||
height="100%"
|
||||
>
|
||||
<v-layout
|
||||
class="fill-height"
|
||||
tag="v-list"
|
||||
column
|
||||
>
|
||||
<v-list-tile avatar>
|
||||
<v-list-tile-avatar
|
||||
color="white"
|
||||
>
|
||||
<!-- <v-img
|
||||
:src="logo"
|
||||
height="34"
|
||||
contain
|
||||
/> -->
|
||||
</v-list-tile-avatar>
|
||||
<v-list-tile-title class="title">
|
||||
CSSD-DOC
|
||||
</v-list-tile-title>
|
||||
</v-list-tile>
|
||||
<v-divider/>
|
||||
<v-list-tile
|
||||
v-if="responsive"
|
||||
>
|
||||
<v-text-field
|
||||
class="purple-input search-input"
|
||||
label="Search..."
|
||||
color="purple"
|
||||
/>
|
||||
</v-list-tile>
|
||||
<v-list-tile
|
||||
v-for="(link, i) in links"
|
||||
:key="i"
|
||||
:to="link.to"
|
||||
:active-class="color"
|
||||
avatar
|
||||
class="v-list-item"
|
||||
>
|
||||
<v-list-tile-action>
|
||||
<v-icon>{{ link.icon }}</v-icon>
|
||||
</v-list-tile-action>
|
||||
<v-list-tile-title
|
||||
v-text="link.text"
|
||||
/>
|
||||
</v-list-tile>
|
||||
<!-- <v-list-tile
|
||||
disabled
|
||||
active-class="primary"
|
||||
class="v-list-item v-list__tile--buy"
|
||||
to="/upgrade"
|
||||
>
|
||||
<v-list-tile-action>
|
||||
<v-icon>mdi-package-up</v-icon>
|
||||
</v-list-tile-action>
|
||||
<v-list-tile-title class="font-weight-light">
|
||||
Upgrade To PRO
|
||||
</v-list-tile-title>
|
||||
</v-list-tile> -->
|
||||
</v-layout>
|
||||
</v-img>
|
||||
</v-navigation-drawer>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// Utilities
|
||||
import {
|
||||
mapMutations,
|
||||
mapState
|
||||
} from 'vuex'
|
||||
|
||||
export default {
|
||||
data: () => ({
|
||||
logo: './img/vuetifylogo.png',
|
||||
links: [
|
||||
{
|
||||
to: '/dashboard',
|
||||
icon: 'mdi-view-dashboard',
|
||||
text: 'Dashboard'
|
||||
},
|
||||
{
|
||||
to: '/my-info',
|
||||
icon: 'mdi-account',
|
||||
text: 'My Info'
|
||||
},
|
||||
{
|
||||
to: '/all-resualttest',
|
||||
icon: 'description',
|
||||
text: 'All Test Result'
|
||||
},
|
||||
{
|
||||
to: '/manage-users',
|
||||
icon: 'far fa-address-book',
|
||||
text: 'Manage Users'
|
||||
},
|
||||
{
|
||||
to: '/test-creator',
|
||||
icon: 'fas fa-vial',
|
||||
text: 'Add a Test Type'
|
||||
},
|
||||
{
|
||||
to: '/submit-test-result',
|
||||
icon: 'done',
|
||||
text: 'Submit Test Result'
|
||||
},
|
||||
{
|
||||
to: '/login',
|
||||
icon: 'input',
|
||||
text: 'Login'
|
||||
},
|
||||
{
|
||||
to: '/register',
|
||||
icon: 'fas fa-plus',
|
||||
text: 'Register'
|
||||
},
|
||||
],
|
||||
responsive: false
|
||||
}),
|
||||
computed: {
|
||||
...mapState('app', ['image', 'color']),
|
||||
inputValue: {
|
||||
get () {
|
||||
return this.$store.state.app.drawer
|
||||
},
|
||||
set (val) {
|
||||
this.setDrawer(val)
|
||||
}
|
||||
},
|
||||
items () {
|
||||
return this.$t('Layout.View.items')
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.onResponsiveInverted()
|
||||
window.addEventListener('resize', this.onResponsiveInverted)
|
||||
},
|
||||
beforeDestroy () {
|
||||
window.removeEventListener('resize', this.onResponsiveInverted)
|
||||
},
|
||||
methods: {
|
||||
...mapMutations('app', ['setDrawer', 'toggleDrawer']),
|
||||
onResponsiveInverted () {
|
||||
if (window.innerWidth < 991) {
|
||||
this.responsive = true
|
||||
} else {
|
||||
this.responsive = false
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
#app-drawer {
|
||||
.v-list__tile {
|
||||
border-radius: 4px;
|
||||
|
||||
&--buy {
|
||||
margin-top: auto;
|
||||
margin-bottom: 17px;
|
||||
}
|
||||
}
|
||||
|
||||
.v-image__image--contain {
|
||||
top: 9px;
|
||||
height: 60%;
|
||||
}
|
||||
|
||||
.search-input {
|
||||
margin-bottom: 30px !important;
|
||||
padding-left: 15px;
|
||||
padding-right: 15px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,161 @@
|
||||
<template>
|
||||
<v-menu
|
||||
:close-on-content-click="false"
|
||||
bottom
|
||||
left
|
||||
min-width="300"
|
||||
max-width="300"
|
||||
nudge-left="12"
|
||||
offset-x
|
||||
transition="slide-y-transition"
|
||||
>
|
||||
<v-btn
|
||||
slot="activator"
|
||||
class="elevation-0"
|
||||
color="grey"
|
||||
dark
|
||||
fab
|
||||
fixed
|
||||
style="top: 96px;"
|
||||
top
|
||||
>
|
||||
<v-icon>mdi-settings</v-icon>
|
||||
</v-btn>
|
||||
<v-card>
|
||||
<v-container grid-list-xl>
|
||||
<v-layout wrap>
|
||||
<v-flex xs12>
|
||||
<div class="text-xs-center body-2 text-uppercase sidebar-filter">Sidebar Filters</div>
|
||||
|
||||
<v-layout justify-center>
|
||||
<v-avatar
|
||||
v-for="c in colors"
|
||||
:key="c"
|
||||
:class="[c === color ? 'color-active color-' + c: 'color-' + c]"
|
||||
size="23"
|
||||
|
||||
@click="setColor(c)"
|
||||
/>
|
||||
</v-layout>
|
||||
<v-divider class="mt-3"/>
|
||||
</v-flex>
|
||||
<v-flex
|
||||
xs12
|
||||
>
|
||||
<div class="text-xs-center body-2 text-uppercase sidebar-filter">Images</div>
|
||||
</v-flex>
|
||||
<v-flex
|
||||
v-for="img in images"
|
||||
:key="img"
|
||||
xs3
|
||||
>
|
||||
<v-img
|
||||
:class="[image === img ? 'image-active' : '']"
|
||||
:src="img"
|
||||
height="120"
|
||||
@click.native="setImage(img)"
|
||||
/>
|
||||
</v-flex>
|
||||
<v-flex xs12>
|
||||
<v-btn
|
||||
href="https://www.creative-tim.com/product/vuetify-material-dashboard"
|
||||
target="_blank"
|
||||
color="success"
|
||||
block
|
||||
>
|
||||
Free Download
|
||||
</v-btn>
|
||||
</v-flex>
|
||||
<v-flex xs12>
|
||||
<v-btn
|
||||
href="https://demos.creative-tim.com/vuetify-material-dashboard/documentation"
|
||||
target="_blank"
|
||||
class="white--text"
|
||||
color="primary"
|
||||
block
|
||||
>
|
||||
Documentation
|
||||
</v-btn>
|
||||
</v-flex>
|
||||
<v-flex xs12>
|
||||
<div class="text-xs-center body-2 text-uppercase">
|
||||
<div class=" sidebar-filter">
|
||||
Thank You for Sharing!
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<v-btn
|
||||
color="indigo"
|
||||
class="mr-2 v-btn-facebook"
|
||||
fab
|
||||
icon
|
||||
small
|
||||
round
|
||||
>
|
||||
<v-icon>mdi-facebook</v-icon>
|
||||
</v-btn>
|
||||
<v-btn
|
||||
color="cyan"
|
||||
class="v-btn-twitter"
|
||||
fab
|
||||
icon
|
||||
small
|
||||
round
|
||||
>
|
||||
<v-icon>mdi-twitter</v-icon>
|
||||
</v-btn>
|
||||
</div>
|
||||
</div>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
</v-container>
|
||||
</v-card>
|
||||
</v-menu>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// Utilities
|
||||
import {
|
||||
mapMutations,
|
||||
mapState
|
||||
} from 'vuex'
|
||||
|
||||
export default {
|
||||
data: () => ({
|
||||
colors: [
|
||||
'primary',
|
||||
'info',
|
||||
'success',
|
||||
'warning',
|
||||
'danger'
|
||||
],
|
||||
images: [
|
||||
'https://demos.creative-tim.com/vue-material-dashboard/img/sidebar-1.23832d31.jpg',
|
||||
'https://demos.creative-tim.com/vue-material-dashboard/img/sidebar-2.32103624.jpg',
|
||||
'https://demos.creative-tim.com/vue-material-dashboard/img/sidebar-3.3a54f533.jpg',
|
||||
'https://demos.creative-tim.com/vue-material-dashboard/img/sidebar-4.3b7e38ed.jpg'
|
||||
]
|
||||
}),
|
||||
|
||||
computed: {
|
||||
...mapState('app', ['image', 'color']),
|
||||
color () {
|
||||
return this.$store.state.app.color
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
...mapMutations('app', ['setImage']),
|
||||
setColor (color) {
|
||||
this.$store.state.app.color = color
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.v-avatar,
|
||||
.v-responsive {
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,49 @@
|
||||
<template>
|
||||
<v-footer
|
||||
id="core-footer"
|
||||
absolute
|
||||
height="82"
|
||||
>
|
||||
<div class="footer-items">
|
||||
<span
|
||||
v-for="link in links"
|
||||
:key="link.name"
|
||||
>
|
||||
<a
|
||||
:href="link.Link"
|
||||
class="tertiary--text footer-links">{{ link.name }}</a>
|
||||
</span>
|
||||
</div>
|
||||
<v-spacer/>
|
||||
<!-- <span class="font-weight-light copyright">
|
||||
©
|
||||
{{ (new Date()).getFullYear() }}
|
||||
<a
|
||||
href="https://www.creative-tim.com/"
|
||||
target="_blank">Creative Tim</a>, made with
|
||||
<v-icon
|
||||
color="tertiary"
|
||||
size="17">mdi-heart</v-icon>
|
||||
for a better web
|
||||
</span> -->
|
||||
</v-footer>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data: () => ({
|
||||
links: [
|
||||
{ name: 'Home', Link: '/dashboard' },
|
||||
// { name: 'Creative Tim', Link: 'https://www.creative-tim.com' },
|
||||
{ name: 'About Us', Link: 'https://creative-tim.com/presentation' },
|
||||
// { name: 'Blog', Link: 'https://blog.creative-tim.com' }
|
||||
]
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
#core-footer {
|
||||
z-index: 0;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,154 @@
|
||||
<template>
|
||||
<v-toolbar
|
||||
id="core-toolbar"
|
||||
|
||||
flat
|
||||
prominent
|
||||
style="background: #eee;"
|
||||
>
|
||||
<div class="v-toolbar-title">
|
||||
<v-toolbar-title
|
||||
class="tertiary--text font-weight-light"
|
||||
>
|
||||
<v-btn
|
||||
v-if="responsive"
|
||||
class="default v-btn--simple"
|
||||
dark
|
||||
icon
|
||||
@click.stop="onClickBtn"
|
||||
>
|
||||
<v-icon>mdi-view-list</v-icon>
|
||||
</v-btn>
|
||||
{{ title }}
|
||||
</v-toolbar-title>
|
||||
</div>
|
||||
|
||||
<v-spacer />
|
||||
<v-toolbar-items>
|
||||
<v-flex
|
||||
align-center
|
||||
layout
|
||||
py-2
|
||||
>
|
||||
<v-text-field
|
||||
v-if="responsiveInput"
|
||||
class="mr-4 mt-2 purple-input"
|
||||
label="Search..."
|
||||
hide-details
|
||||
color="purple"
|
||||
/>
|
||||
<router-link
|
||||
v-ripple
|
||||
class="toolbar-items"
|
||||
to="/"
|
||||
>
|
||||
<v-icon color="tertiary">mdi-view-dashboard</v-icon>
|
||||
</router-link>
|
||||
<v-menu
|
||||
bottom
|
||||
left
|
||||
content-class="dropdown-menu"
|
||||
offset-y
|
||||
transition="slide-y-transition">
|
||||
<router-link
|
||||
v-ripple
|
||||
slot="activator"
|
||||
class="toolbar-items"
|
||||
to="/notifications"
|
||||
>
|
||||
<v-badge
|
||||
color="error"
|
||||
overlap
|
||||
>
|
||||
<template slot="badge">
|
||||
{{ notifications.length }}
|
||||
</template>
|
||||
<v-icon color="tertiary">mdi-bell</v-icon>
|
||||
</v-badge>
|
||||
</router-link>
|
||||
<v-card>
|
||||
<v-list dense>
|
||||
<v-list-tile
|
||||
v-for="notification in notifications"
|
||||
:key="notification"
|
||||
@click="onClick"
|
||||
>
|
||||
<v-list-tile-title
|
||||
v-text="notification"
|
||||
/>
|
||||
</v-list-tile>
|
||||
</v-list>
|
||||
</v-card>
|
||||
</v-menu>
|
||||
<router-link
|
||||
v-ripple
|
||||
class="toolbar-items"
|
||||
to="/user-profile"
|
||||
>
|
||||
<v-icon color="tertiary">mdi-account</v-icon>
|
||||
</router-link>
|
||||
</v-flex>
|
||||
</v-toolbar-items>
|
||||
</v-toolbar>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
import {
|
||||
mapMutations
|
||||
} from 'vuex'
|
||||
|
||||
export default {
|
||||
data: () => ({
|
||||
notifications: [
|
||||
'Mike, John responded to your email',
|
||||
'You have 5 new tasks',
|
||||
'You\'re now a friend with Andrew',
|
||||
'Another Notification',
|
||||
'Another One'
|
||||
],
|
||||
title: null,
|
||||
responsive: false,
|
||||
responsiveInput: false
|
||||
}),
|
||||
|
||||
watch: {
|
||||
'$route' (val) {
|
||||
this.title = val.name
|
||||
}
|
||||
},
|
||||
|
||||
mounted () {
|
||||
this.onResponsiveInverted()
|
||||
window.addEventListener('resize', this.onResponsiveInverted)
|
||||
},
|
||||
beforeDestroy () {
|
||||
window.removeEventListener('resize', this.onResponsiveInverted)
|
||||
},
|
||||
|
||||
methods: {
|
||||
...mapMutations('app', ['setDrawer', 'toggleDrawer']),
|
||||
onClickBtn () {
|
||||
this.setDrawer(!this.$store.state.app.drawer)
|
||||
},
|
||||
onClick () {
|
||||
//
|
||||
},
|
||||
onResponsiveInverted () {
|
||||
if (window.innerWidth < 991) {
|
||||
this.responsive = true
|
||||
this.responsiveInput = false
|
||||
} else {
|
||||
this.responsive = false
|
||||
this.responsiveInput = true
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
#core-toolbar a {
|
||||
text-decoration: none;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,26 @@
|
||||
<template>
|
||||
<v-content>
|
||||
<div id="core-view">
|
||||
<v-fade-transition mode="out-in">
|
||||
<router-view />
|
||||
</v-fade-transition>
|
||||
</div>
|
||||
<core-footer v-if="$route.name !== 'Maps'" />
|
||||
</v-content>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
metaInfo () {
|
||||
return {
|
||||
title: 'Vuetify Material Dashboard by CreativeTim'
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
#core-view {
|
||||
padding-bottom: 100px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,49 @@
|
||||
<template>
|
||||
<div
|
||||
:style="styles"
|
||||
:class="classes"
|
||||
class="v-offset"
|
||||
>
|
||||
<slot />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
fullWidth: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
offset: {
|
||||
type: [Number, String],
|
||||
default: 0
|
||||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
classes () {
|
||||
return {
|
||||
'v-offset--full-width': this.fullWidth
|
||||
}
|
||||
},
|
||||
styles () {
|
||||
return {
|
||||
top: `-${this.offset}px`,
|
||||
marginBottom: `-${this.offset}px`
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.v-offset {
|
||||
margin: 0 auto;
|
||||
max-width: calc(100% - 32px);
|
||||
position: relative;
|
||||
}
|
||||
.v-offset--full-width {
|
||||
max-width: 100%;
|
||||
}
|
||||
</style>
|
||||
Vendored
+16
@@ -0,0 +1,16 @@
|
||||
import Vue from 'vue'
|
||||
import upperFirst from 'lodash/upperFirst'
|
||||
import camelCase from 'lodash/camelCase'
|
||||
|
||||
const requireComponent = require.context(
|
||||
'@/components', true, /\.vue$/
|
||||
)
|
||||
|
||||
requireComponent.keys().forEach(fileName => {
|
||||
const componentConfig = requireComponent(fileName)
|
||||
|
||||
const componentName = upperFirst(
|
||||
camelCase(fileName.replace(/^\.\//, '').replace(/\.\w+$/, ''))
|
||||
)
|
||||
Vue.component(componentName, componentConfig.default || componentConfig)
|
||||
})
|
||||
@@ -0,0 +1,118 @@
|
||||
<template>
|
||||
<v-card
|
||||
v-bind="$attrs"
|
||||
:style="styles"
|
||||
v-on="$listeners"
|
||||
>
|
||||
<helper-offset
|
||||
v-if="hasOffset"
|
||||
:inline="inline"
|
||||
:full-width="fullWidth"
|
||||
:offset="offset"
|
||||
>
|
||||
<v-card
|
||||
v-if="!$slots.offset"
|
||||
:color="color"
|
||||
:class="`elevation-${elevation}`"
|
||||
class="v-card--material__header"
|
||||
dark
|
||||
>
|
||||
<slot
|
||||
v-if="!title && !text"
|
||||
name="header"
|
||||
/>
|
||||
<span v-else>
|
||||
<h4
|
||||
class="title font-weight-light mb-2"
|
||||
v-text="title"
|
||||
/>
|
||||
<p
|
||||
class="category font-weight-thin"
|
||||
v-text="text"
|
||||
/>
|
||||
</span>
|
||||
</v-card>
|
||||
<slot
|
||||
v-else
|
||||
name="offset"
|
||||
/>
|
||||
</helper-offset>
|
||||
|
||||
<v-card-text>
|
||||
<slot />
|
||||
</v-card-text>
|
||||
|
||||
<v-divider
|
||||
v-if="$slots.actions"
|
||||
class="mx-3"
|
||||
/>
|
||||
|
||||
<v-card-actions v-if="$slots.actions">
|
||||
<slot name="actions" />
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
inheritAttrs: false,
|
||||
|
||||
props: {
|
||||
color: {
|
||||
type: String,
|
||||
default: 'secondary'
|
||||
},
|
||||
elevation: {
|
||||
type: [Number, String],
|
||||
default: 10
|
||||
},
|
||||
inline: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
fullWidth: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
offset: {
|
||||
type: [Number, String],
|
||||
default: 24
|
||||
},
|
||||
title: {
|
||||
type: String,
|
||||
default: undefined
|
||||
},
|
||||
text: {
|
||||
type: String,
|
||||
default: undefined
|
||||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
hasOffset () {
|
||||
return this.$slots.header ||
|
||||
this.$slots.offset ||
|
||||
this.title ||
|
||||
this.text
|
||||
},
|
||||
styles () {
|
||||
if (!this.hasOffset) return null
|
||||
|
||||
return {
|
||||
marginBottom: `${this.offset}px`,
|
||||
marginTop: `${this.offset * 2}px`
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.v-card--material {
|
||||
&__header {
|
||||
&.v-card {
|
||||
border-radius: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,67 @@
|
||||
<template>
|
||||
<v-card :class="color">
|
||||
<v-container>
|
||||
<v-layout row wrap>
|
||||
<v-flex xs7>
|
||||
<v-card-text primary-text :class="aligntext">
|
||||
<div>
|
||||
<div class="headline ">{{title}}</div>
|
||||
<div class="subheading WM-LightGray-color">{{text}}</div>
|
||||
<div></div>
|
||||
</div>
|
||||
</v-card-text>
|
||||
</v-flex>
|
||||
<v-flex xs5 :class="alignimg" :style="{'background':'url('+ icon +') no-repeat center center', 'background-size':'contain','height':'150px'}">
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
</v-container>
|
||||
</v-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
bordercolor: {
|
||||
type: String,
|
||||
default: () => ''
|
||||
},
|
||||
title: {
|
||||
type: String,
|
||||
default: () => ''
|
||||
},
|
||||
text: {
|
||||
type: String,
|
||||
default: () => ''
|
||||
},
|
||||
icon: {
|
||||
type: String,
|
||||
default: () => ''
|
||||
},
|
||||
color : {
|
||||
type: String,
|
||||
default: () => ''
|
||||
},
|
||||
column : {
|
||||
type: String,
|
||||
default: () => ''
|
||||
},
|
||||
aligntext : {
|
||||
type: String,
|
||||
default: () => ''
|
||||
},
|
||||
alignimg : {
|
||||
type: String,
|
||||
default: () => ''
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,85 @@
|
||||
<template>
|
||||
<material-card
|
||||
v-bind="$attrs"
|
||||
class="v-card--material-chart"
|
||||
v-on="$listeners"
|
||||
>
|
||||
<chartist
|
||||
slot="header"
|
||||
:data="data"
|
||||
:event-handlers="eventHandlers"
|
||||
:options="options"
|
||||
:ratio="ratio"
|
||||
:responsive-options="responsiveOptions"
|
||||
:type="type"
|
||||
/>
|
||||
|
||||
<slot />
|
||||
|
||||
<slot
|
||||
slot="actions"
|
||||
name="actions"
|
||||
/>
|
||||
</material-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
inheritAttrs: false,
|
||||
|
||||
props: {
|
||||
data: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
},
|
||||
eventHandlers: {
|
||||
type: Array,
|
||||
default: () => ([])
|
||||
},
|
||||
options: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
},
|
||||
ratio: {
|
||||
type: String,
|
||||
default: undefined
|
||||
},
|
||||
responsiveOptions: {
|
||||
type: Array,
|
||||
default: () => ([])
|
||||
},
|
||||
type: {
|
||||
type: String,
|
||||
required: true,
|
||||
validator: v => ['Bar', 'Line', 'Pie'].includes(v)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.v-card--material-chart {
|
||||
.v-card--material__header {
|
||||
.ct-label {
|
||||
color: inherit;
|
||||
opacity: .7;
|
||||
font-size: 0.975rem;
|
||||
font-weight: 100;
|
||||
}
|
||||
|
||||
.ct-grid{
|
||||
stroke: rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
.ct-series-a .ct-point,
|
||||
.ct-series-a .ct-line,
|
||||
.ct-series-a .ct-bar,
|
||||
.ct-series-a .ct-slice-donut {
|
||||
stroke: rgba(255,255,255,.8);
|
||||
}
|
||||
.ct-series-a .ct-slice-pie,
|
||||
.ct-series-a .ct-area {
|
||||
fill: rgba(255,255,255,.4);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,35 @@
|
||||
<template>
|
||||
<v-alert
|
||||
v-bind="$attrs"
|
||||
:class="[`elevation-${elevation}`]"
|
||||
:value="value"
|
||||
class="v-alert--notification"
|
||||
v-on="$listeners"
|
||||
>
|
||||
<slot />
|
||||
</v-alert>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
inheritAttrs: false,
|
||||
|
||||
props: {
|
||||
elevation: {
|
||||
type: [Number, String],
|
||||
default: 6
|
||||
},
|
||||
value: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.v-alert--notification {
|
||||
border-radius: 4px !important;
|
||||
border-top: none !important;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,126 @@
|
||||
<template>
|
||||
<material-card
|
||||
v-bind="$attrs"
|
||||
class="v-card--material-stats"
|
||||
v-on="$listeners"
|
||||
>
|
||||
<v-card
|
||||
slot="offset"
|
||||
:class="`elevation-${elevation}`"
|
||||
:color="color"
|
||||
class="pa-4"
|
||||
dark
|
||||
>
|
||||
<v-icon
|
||||
size="40"
|
||||
>
|
||||
{{ icon }}
|
||||
</v-icon>
|
||||
</v-card>
|
||||
<div class="text-xs-right">
|
||||
<p
|
||||
class="category grey--text font-weight-light"
|
||||
v-text="title"
|
||||
/>
|
||||
<h3
|
||||
class="title display-1 font-weight-light">
|
||||
{{ value }} <small>{{ smallValue }}</small>
|
||||
</h3>
|
||||
</div>
|
||||
|
||||
<template slot="actions">
|
||||
<v-icon
|
||||
:color="subIconColor"
|
||||
size="20"
|
||||
class="mr-2"
|
||||
>
|
||||
{{ subIcon }}
|
||||
</v-icon>
|
||||
<span
|
||||
:class="subTextColor"
|
||||
class="caption font-weight-light"
|
||||
v-text="subText"
|
||||
/>
|
||||
</template>
|
||||
</material-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Card from './Card'
|
||||
|
||||
export default {
|
||||
inheritAttrs: false,
|
||||
|
||||
props: {
|
||||
...Card.props,
|
||||
icon: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
subIcon: {
|
||||
type: String,
|
||||
default: undefined
|
||||
},
|
||||
subIconColor: {
|
||||
type: String,
|
||||
default: undefined
|
||||
},
|
||||
subTextColor: {
|
||||
type: String,
|
||||
default: undefined
|
||||
},
|
||||
subText: {
|
||||
type: String,
|
||||
default: undefined
|
||||
},
|
||||
title: {
|
||||
type: String,
|
||||
default: undefined
|
||||
},
|
||||
value: {
|
||||
type: String,
|
||||
default: undefined
|
||||
},
|
||||
smallValue: {
|
||||
type: String,
|
||||
default: undefined
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.v-card--material-stats {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
position: relative;
|
||||
|
||||
.v-offset {
|
||||
display: inline-block;
|
||||
flex: 0 1;
|
||||
margin-top: 0;
|
||||
margin-left: 0;
|
||||
margin-right: auto;
|
||||
margin-bottom: 0 !important;
|
||||
max-width: auto;
|
||||
padding: 0 16px 0;
|
||||
}
|
||||
|
||||
.v-card {
|
||||
border-radius: 4px;
|
||||
flex: 0 1 auto;
|
||||
}
|
||||
|
||||
.v-card__text {
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.v-card__actions {
|
||||
flex: 1 0 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user