mirror of
https://git.meshkee.com/cssd/cssd-back.git
synced 2026-10-13 16:21:16 +03:30
new C'hnages
This commit is contained in:
saeid
@@ -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 WM-NoLetterSpacing-7">{{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