mirror of
https://github.com/sub-store-org/Sub-Store.git
synced 2025-08-10 00:52:40 +00:00
Sub-Store 1.0版本
1. 移除了所有基于关键词的节点操作，统一使用基于正则表达式的节点操作。 2. UI的大量改进。
This commit is contained in:
Peng-YM
9
web/src/components/base/Card.vue
Normal file
9
web/src/components/base/Card.vue
Normal file
@@ -0,0 +1,9 @@
|
||||
<script>
|
||||
import { VCard } from 'vuetify/lib'
|
||||
|
||||
export default {
|
||||
name: 'Card',
|
||||
|
||||
extends: VCard
|
||||
}
|
||||
</script>
|
||||
69
web/src/components/base/Item.vue
Normal file
69
web/src/components/base/Item.vue
Normal file
@@ -0,0 +1,69 @@
|
||||
<template>
|
||||
<v-list-item
|
||||
:href="href"
|
||||
:rel="href && href !== '#' ? 'noopener' : undefined"
|
||||
:target="href && href !== '#' ? '_blank' : undefined"
|
||||
:to="item.to"
|
||||
:active-class="`primary ${!isDark ? 'black' : 'white'}--text`"
|
||||
>
|
||||
<v-list-item-icon
|
||||
v-if="text"
|
||||
class="v-list-item__icon--text"
|
||||
v-text="computedText"
|
||||
/>
|
||||
|
||||
<v-list-item-icon v-else-if="item.icon">
|
||||
<v-icon v-text="item.icon" />
|
||||
</v-list-item-icon>
|
||||
|
||||
<v-list-item-content v-if="item.title || item.subtitle">
|
||||
<v-list-item-title v-text="item.title" />
|
||||
|
||||
<v-list-item-subtitle v-text="item.subtitle" />
|
||||
</v-list-item-content>
|
||||
</v-list-item>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Themeable from 'vuetify/lib/mixins/themeable'
|
||||
|
||||
export default {
|
||||
name: 'Item',
|
||||
|
||||
mixins: [Themeable],
|
||||
|
||||
props: {
|
||||
item: {
|
||||
type: Object,
|
||||
default: () => ({
|
||||
href: undefined,
|
||||
icon: undefined,
|
||||
subtitle: undefined,
|
||||
title: undefined,
|
||||
to: undefined
|
||||
})
|
||||
},
|
||||
text: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
computedText() {
|
||||
if (!this.item || !this.item.title) return ''
|
||||
|
||||
let text = ''
|
||||
|
||||
this.item.title.split(' ').forEach(val => {
|
||||
text += val.substring(0, 1)
|
||||
})
|
||||
|
||||
return text
|
||||
},
|
||||
href() {
|
||||
return this.item.href || (!this.item.to ? '#' : undefined)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
123
web/src/components/base/ItemGroup.vue
Normal file
123
web/src/components/base/ItemGroup.vue
Normal file
@@ -0,0 +1,123 @@
|
||||
<template>
|
||||
<v-list-group
|
||||
:group="group"
|
||||
:prepend-icon="item.icon"
|
||||
:sub-group="subGroup"
|
||||
append-icon="mdi-menu-down"
|
||||
:color="barColor !== 'rgba(255, 255, 255, 1), rgba(255, 255, 255, 0.7)' ? 'white' : 'grey darken-1'"
|
||||
>
|
||||
<template v-slot:activator>
|
||||
<v-list-item-icon
|
||||
v-if="text"
|
||||
class="v-list-item__icon--text"
|
||||
v-text="computedText"
|
||||
/>
|
||||
|
||||
<v-list-item-avatar
|
||||
v-else-if="item.avatar"
|
||||
class="align-self-center"
|
||||
color="grey"
|
||||
>
|
||||
<v-img src="https://demos.creative-tim.com/material-dashboard-pro/assets/img/faces/avatar.jpg" />
|
||||
</v-list-item-avatar>
|
||||
|
||||
<v-list-item-content>
|
||||
<v-list-item-title v-text="item.title" />
|
||||
</v-list-item-content>
|
||||
</template>
|
||||
|
||||
<template v-for="(child, i) in children">
|
||||
<base-item-sub-group
|
||||
v-if="child.children"
|
||||
:key="`sub-group-${i}`"
|
||||
:item="child"
|
||||
/>
|
||||
|
||||
<base-item
|
||||
v-else
|
||||
:key="`item-${i}`"
|
||||
:item="child"
|
||||
text
|
||||
/>
|
||||
</template>
|
||||
</v-list-group>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// Utilities
|
||||
import kebabCase from 'lodash/kebabCase'
|
||||
import { mapState } from 'vuex'
|
||||
|
||||
export default {
|
||||
name: 'ItemGroup',
|
||||
|
||||
inheritAttrs: false,
|
||||
|
||||
props: {
|
||||
item: {
|
||||
type: Object,
|
||||
default: () => ({
|
||||
avatar: undefined,
|
||||
group: undefined,
|
||||
title: undefined,
|
||||
children: []
|
||||
})
|
||||
},
|
||||
subGroup: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
text: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
...mapState(['barColor']),
|
||||
children() {
|
||||
return this.item.children.map(item => ({
|
||||
...item,
|
||||
to: !item.to ? undefined : `${this.item.group}/${item.to}`
|
||||
}))
|
||||
},
|
||||
computedText() {
|
||||
if (!this.item || !this.item.title) return ''
|
||||
|
||||
let text = ''
|
||||
|
||||
this.item.title.split(' ').forEach(val => {
|
||||
text += val.substring(0, 1)
|
||||
})
|
||||
|
||||
return text
|
||||
},
|
||||
group() {
|
||||
return this.genGroup(this.item.children)
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
genGroup(children) {
|
||||
return children
|
||||
.filter(item => item.to)
|
||||
.map(item => {
|
||||
const parent = item.group || this.item.group
|
||||
let group = `${parent}/${kebabCase(item.to)}`
|
||||
|
||||
if (item.children) {
|
||||
group = `${group}|${this.genGroup(item.children)}`
|
||||
}
|
||||
|
||||
return group
|
||||
}).join('|')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.v-list-group__activator p {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
</style>
|
||||
25
web/src/components/base/ItemSubGroup.vue
Normal file
25
web/src/components/base/ItemSubGroup.vue
Normal file
@@ -0,0 +1,25 @@
|
||||
<template>
|
||||
<base-item-group
|
||||
:item="item"
|
||||
text
|
||||
sub-group
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'ItemSubGroup',
|
||||
|
||||
props: {
|
||||
item: {
|
||||
type: Object,
|
||||
default: () => ({
|
||||
avatar: undefined,
|
||||
group: undefined,
|
||||
title: undefined,
|
||||
children: []
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
64
web/src/components/base/MaterialAlert.vue
Normal file
64
web/src/components/base/MaterialAlert.vue
Normal file
@@ -0,0 +1,64 @@
|
||||
<script>
|
||||
// Components
|
||||
import { VAlert, VBtn, VIcon } from 'vuetify/lib'
|
||||
|
||||
export default {
|
||||
name: 'MaterialAlert',
|
||||
|
||||
extends: VAlert,
|
||||
|
||||
computed: {
|
||||
__cachedDismissible() {
|
||||
if (!this.dismissible) return null
|
||||
|
||||
const color = 'white'
|
||||
|
||||
return this.$createElement(VBtn, {
|
||||
staticClass: 'v-alert__dismissible',
|
||||
props: {
|
||||
color,
|
||||
icon: true,
|
||||
small: true
|
||||
},
|
||||
attrs: {
|
||||
'aria-label': this.$vuetify.lang.t(this.closeLabel)
|
||||
},
|
||||
on: {
|
||||
// eslint-disable-next-line
|
||||
click: () => (this.isActive = false)
|
||||
}
|
||||
}, [
|
||||
this.$createElement(VIcon, {
|
||||
props: { color }
|
||||
}, '$vuetify.icons.cancel')
|
||||
])
|
||||
},
|
||||
classes() {
|
||||
return {
|
||||
...VAlert.options.computed.classes.call(this),
|
||||
'v-alert--material': true
|
||||
}
|
||||
},
|
||||
hasColoredIcon() {
|
||||
return true
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="sass">
|
||||
|
||||
.v-alert--material
|
||||
margin-top: 32px
|
||||
|
||||
.v-alert__icon
|
||||
background-color: #FFFFFF
|
||||
height: 44px
|
||||
min-width: 44px
|
||||
top: -36px
|
||||
|
||||
.v-alert__dismissible
|
||||
align-self: flex-start
|
||||
margin: 0 !important
|
||||
padding: 0 !important
|
||||
</style>
|
||||
168
web/src/components/base/MaterialCard.vue
Normal file
168
web/src/components/base/MaterialCard.vue
Normal file
@@ -0,0 +1,168 @@
|
||||
<template>
|
||||
<v-card
|
||||
v-bind="$attrs"
|
||||
:class="classes"
|
||||
class="v-card--material pa-3"
|
||||
>
|
||||
<div class="d-flex grow flex-wrap">
|
||||
<v-avatar
|
||||
v-if="avatar"
|
||||
size="128"
|
||||
class="mx-auto v-card--material__avatar elevation-12"
|
||||
color="grey"
|
||||
>
|
||||
<v-img :src="avatar" />
|
||||
</v-avatar>
|
||||
|
||||
<v-sheet
|
||||
v-else
|
||||
:class="{
|
||||
'pa-7': !$slots.image
|
||||
}"
|
||||
:color="color"
|
||||
:max-height="icon ? 90 : undefined"
|
||||
:width="inline || icon ? 'auto' : '100%'"
|
||||
class="text-start v-card--material__heading mb-n6"
|
||||
dark
|
||||
>
|
||||
<slot
|
||||
v-if="$slots.heading"
|
||||
name="heading"
|
||||
/>
|
||||
|
||||
<slot
|
||||
v-else-if="$slots.image"
|
||||
name="image"
|
||||
/>
|
||||
|
||||
<div
|
||||
v-else-if="title && !icon"
|
||||
class="display-1 font-weight-light"
|
||||
v-text="title"
|
||||
/>
|
||||
|
||||
<v-icon
|
||||
v-else-if="icon"
|
||||
size="32"
|
||||
v-text="icon"
|
||||
/>
|
||||
|
||||
<div
|
||||
v-if="text"
|
||||
class="headline font-weight-thin"
|
||||
v-text="text"
|
||||
/>
|
||||
</v-sheet>
|
||||
|
||||
<div
|
||||
v-if="$slots['after-heading']"
|
||||
class="ml-6"
|
||||
>
|
||||
<slot name="after-heading" />
|
||||
</div>
|
||||
|
||||
<v-col
|
||||
v-if="hoverReveal"
|
||||
cols="12"
|
||||
class="text-center py-0 mt-n12"
|
||||
>
|
||||
<slot name="reveal-actions" />
|
||||
</v-col>
|
||||
|
||||
<div
|
||||
v-else-if="icon && title"
|
||||
class="ml-4"
|
||||
>
|
||||
<div
|
||||
|
||||
class="card-title font-weight-light"
|
||||
v-text="title"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<slot />
|
||||
|
||||
<template v-if="$slots.actions">
|
||||
<v-divider class="mt-2" />
|
||||
|
||||
<v-card-actions class="pb-0">
|
||||
<slot name="actions" />
|
||||
</v-card-actions>
|
||||
</template>
|
||||
</v-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'MaterialCard',
|
||||
|
||||
props: {
|
||||
avatar: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
color: {
|
||||
type: String,
|
||||
default: 'success'
|
||||
},
|
||||
hoverReveal: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
icon: {
|
||||
type: String,
|
||||
default: undefined
|
||||
},
|
||||
image: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
inline: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
text: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
title: {
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
classes() {
|
||||
return {
|
||||
'v-card--material--has-heading': this.hasHeading,
|
||||
'v-card--material--hover-reveal': this.hoverReveal
|
||||
}
|
||||
},
|
||||
hasHeading() {
|
||||
return Boolean(this.$slots.heading || this.title || this.icon)
|
||||
},
|
||||
hasAltHeading() {
|
||||
return Boolean(this.$slots.heading || (this.title && this.icon))
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="sass">
|
||||
.v-card--material
|
||||
&__avatar
|
||||
position: relative
|
||||
top: -64px
|
||||
margin-bottom: -32px
|
||||
|
||||
&__heading
|
||||
position: relative
|
||||
top: -40px
|
||||
transition: .3s ease
|
||||
z-index: 1
|
||||
|
||||
&.v-card--material--hover-reveal:hover
|
||||
.v-card--material__heading
|
||||
transform: translateY(-40px)
|
||||
</style>
|
||||
95
web/src/components/base/MaterialChartCard.vue
Normal file
95
web/src/components/base/MaterialChartCard.vue
Normal file
@@ -0,0 +1,95 @@
|
||||
<template>
|
||||
<base-material-card
|
||||
class="v-card--material-chart"
|
||||
v-bind="$attrs"
|
||||
v-on="$listeners"
|
||||
>
|
||||
<template v-slot:heading>
|
||||
<chartist
|
||||
:data="data"
|
||||
:event-handlers="eventHandlers"
|
||||
:options="options"
|
||||
:ratio="ratio"
|
||||
:responsive-options="responsiveOptions"
|
||||
:type="type"
|
||||
style="max-height: 150px;"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<slot
|
||||
slot="reveal-actions"
|
||||
name="reveal-actions"
|
||||
/>
|
||||
|
||||
<slot />
|
||||
|
||||
<slot
|
||||
slot="actions"
|
||||
name="actions"
|
||||
/>
|
||||
</base-material-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'MaterialChartCard',
|
||||
|
||||
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="sass">
|
||||
.v-card--material-chart
|
||||
p
|
||||
color: #999
|
||||
|
||||
.v-card--material__heading
|
||||
max-height: 185px
|
||||
|
||||
.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>
|
||||
70
web/src/components/base/MaterialDropdown.vue
Normal file
70
web/src/components/base/MaterialDropdown.vue
Normal file
@@ -0,0 +1,70 @@
|
||||
<template>
|
||||
<v-menu
|
||||
v-model="value"
|
||||
:transition="transition"
|
||||
offset-y
|
||||
v-bind="$attrs"
|
||||
>
|
||||
<template v-slot:activator="{ attrs, on }">
|
||||
<v-btn
|
||||
:color="color"
|
||||
default
|
||||
min-width="200"
|
||||
rounded
|
||||
v-bind="attrs"
|
||||
v-on="on"
|
||||
>
|
||||
<slot />
|
||||
|
||||
<v-icon>
|
||||
mdi-{{ value ? 'menu-up' : 'menu-down' }}
|
||||
</v-icon>
|
||||
</v-btn>
|
||||
</template>
|
||||
|
||||
<v-sheet>
|
||||
<v-list dense>
|
||||
<v-list-item
|
||||
v-for="(item, i) in items"
|
||||
:key="i"
|
||||
@click="$(`click:action-${item.id}`)"
|
||||
>
|
||||
<v-list-item-content>
|
||||
<v-list-item-title v-text="item.text" />
|
||||
</v-list-item-content>
|
||||
</v-list-item>
|
||||
</v-list>
|
||||
</v-sheet>
|
||||
</v-menu>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// Mixins
|
||||
import Proxyable from 'vuetify/lib/mixins/proxyable'
|
||||
|
||||
export default {
|
||||
name: 'MaterialDropdown',
|
||||
|
||||
mixins: [Proxyable],
|
||||
|
||||
props: {
|
||||
color: {
|
||||
type: String,
|
||||
default: 'primary'
|
||||
},
|
||||
items: {
|
||||
type: Array,
|
||||
default: () => ([
|
||||
{
|
||||
id: undefined,
|
||||
text: undefined
|
||||
}
|
||||
])
|
||||
},
|
||||
transition: {
|
||||
type: String,
|
||||
default: 'scale-transition'
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
66
web/src/components/base/MaterialSnackbar.vue
Normal file
66
web/src/components/base/MaterialSnackbar.vue
Normal file
@@ -0,0 +1,66 @@
|
||||
<template>
|
||||
<v-snackbar
|
||||
:class="classes"
|
||||
:value="value"
|
||||
v-bind="{
|
||||
...$attrs,
|
||||
...$props,
|
||||
'color': 'transparent'
|
||||
}"
|
||||
@change="$emit('change', $event)"
|
||||
>
|
||||
<base-material-alert
|
||||
:color="color"
|
||||
:dismissible="dismissible"
|
||||
:type="type"
|
||||
class="ma-0"
|
||||
dark
|
||||
>
|
||||
<slot />
|
||||
</base-material-alert>
|
||||
</v-snackbar>
|
||||
</template>
|
||||
<script>
|
||||
// Components
|
||||
import { VSnackbar } from 'vuetify/lib'
|
||||
|
||||
export default {
|
||||
name: 'BaseMaterialSnackbar',
|
||||
|
||||
extends: VSnackbar,
|
||||
|
||||
props: {
|
||||
dismissible: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
type: {
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
classes() {
|
||||
return {
|
||||
...VSnackbar.options.computed.classes.call(this),
|
||||
'v-snackbar--material': true
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="sass">
|
||||
.v-snackbar--material
|
||||
margin-top: 32px
|
||||
margin-bottom: 32px
|
||||
|
||||
.v-alert--material,
|
||||
.v-snack__wrapper
|
||||
border-radius: 4px
|
||||
|
||||
.v-snack__content
|
||||
overflow: visible
|
||||
padding: 0
|
||||
</style>
|
||||
113
web/src/components/base/MaterialStatsCard.vue
Normal file
113
web/src/components/base/MaterialStatsCard.vue
Normal file
@@ -0,0 +1,113 @@
|
||||
<template>
|
||||
<base-material-card
|
||||
:icon="icon"
|
||||
class="v-card--material-stats"
|
||||
v-bind="$attrs"
|
||||
v-on="$listeners"
|
||||
>
|
||||
<template v-slot:after-heading>
|
||||
<div class="ml-auto text-right">
|
||||
<div
|
||||
class="body-3 grey--text font-weight-light"
|
||||
v-text="title"
|
||||
/>
|
||||
|
||||
<h3 class="display-2 font-weight-light text--primary">
|
||||
{{ value }} <small>{{ smallValue }}</small>
|
||||
</h3>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<v-col
|
||||
cols="12"
|
||||
class="px-0"
|
||||
>
|
||||
<v-divider />
|
||||
</v-col>
|
||||
|
||||
<v-icon
|
||||
:color="subIconColor"
|
||||
size="16"
|
||||
class="ml-2 mr-1"
|
||||
>
|
||||
{{ subIcon }}
|
||||
</v-icon>
|
||||
|
||||
<span
|
||||
:class="subTextColor"
|
||||
class="caption grey--text font-weight-light"
|
||||
v-text="subText"
|
||||
/>
|
||||
</base-material-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Card from './Card'
|
||||
|
||||
export default {
|
||||
name: 'MaterialStatsCard',
|
||||
|
||||
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="sass">
|
||||
.v-card--material-stats
|
||||
display: flex
|
||||
flex-wrap: wrap
|
||||
position: relative
|
||||
|
||||
> div:first-child
|
||||
justify-content: space-between
|
||||
|
||||
.v-card
|
||||
border-radius: 4px
|
||||
flex: 0 1 auto
|
||||
|
||||
.v-card__text
|
||||
display: inline-block
|
||||
flex: 1 0 calc(100% - 120px)
|
||||
position: absolute
|
||||
top: 0
|
||||
right: 0
|
||||
width: 100%
|
||||
|
||||
.v-card__actions
|
||||
flex: 1 0 100%
|
||||
</style>
|
||||
43
web/src/components/base/MaterialTabs.vue
Normal file
43
web/src/components/base/MaterialTabs.vue
Normal file
@@ -0,0 +1,43 @@
|
||||
<template>
|
||||
<v-tabs
|
||||
v-model="internalValue"
|
||||
:active-class="`${color} ${$vuetify.theme.dark ? 'black' : 'white'}--text`"
|
||||
class="v-tabs--pill"
|
||||
hide-slider
|
||||
v-bind="$attrs"
|
||||
>
|
||||
<slot />
|
||||
|
||||
<slot name="items" />
|
||||
</v-tabs>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// Mixins
|
||||
import Proxyable from 'vuetify/lib/mixins/proxyable'
|
||||
|
||||
export default {
|
||||
name: 'MaterialTabs',
|
||||
|
||||
mixins: [Proxyable],
|
||||
|
||||
props: {
|
||||
color: {
|
||||
type: String,
|
||||
default: 'primary'
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="sass">
|
||||
.v-tabs--pill
|
||||
.v-tab,
|
||||
.v-tab:before
|
||||
border-radius: 24px
|
||||
|
||||
&.v-tabs--icons-and-text
|
||||
.v-tab,
|
||||
.v-tab:before
|
||||
border-radius: 4px
|
||||
</style>
|
||||
75
web/src/components/base/MaterialTestimony.vue
Normal file
75
web/src/components/base/MaterialTestimony.vue
Normal file
@@ -0,0 +1,75 @@
|
||||
<template>
|
||||
<v-card class="text-center v-card--testimony">
|
||||
<div class="pt-6">
|
||||
<v-icon
|
||||
color="black"
|
||||
x-large
|
||||
>
|
||||
mdi-format-quote-close
|
||||
</v-icon>
|
||||
</div>
|
||||
|
||||
<v-card-text
|
||||
class="display-1 font-weight-light font-italic mb-3"
|
||||
v-text="blurb"
|
||||
/>
|
||||
|
||||
<div
|
||||
class="display-2 font-weight-light mb-2"
|
||||
v-text="author"
|
||||
/>
|
||||
|
||||
<div
|
||||
class="body-2 text-uppercase grey--text"
|
||||
v-text="handle"
|
||||
/>
|
||||
|
||||
<v-avatar
|
||||
color="grey"
|
||||
size="100"
|
||||
>
|
||||
<v-img
|
||||
:alt="`${author} Testimonial`"
|
||||
:src="avatar"
|
||||
/>
|
||||
</v-avatar>
|
||||
|
||||
<div />
|
||||
</v-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'BaseMaterialTestimony',
|
||||
|
||||
props: {
|
||||
author: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
avatar: {
|
||||
type: String,
|
||||
default: 'https://demos.creative-tim.com/material-dashboard-pro/assets/img/faces/card-profile1-square.jpg'
|
||||
},
|
||||
blurb: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
handle: {
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="sass">
|
||||
.v-card--testimony
|
||||
padding-bottom: 72px
|
||||
margin-bottom: 64px
|
||||
|
||||
.v-avatar
|
||||
position: absolute
|
||||
left: calc(50% - 64px)
|
||||
top: calc(100% - 64px)
|
||||
</style>
|
||||
109
web/src/components/base/MaterialWizard.vue
Normal file
109
web/src/components/base/MaterialWizard.vue
Normal file
@@ -0,0 +1,109 @@
|
||||
<template>
|
||||
<v-card
|
||||
class="v-card--wizard"
|
||||
elevation="12"
|
||||
max-width="700"
|
||||
>
|
||||
<v-card-title class="justify-center display-2 font-weight-light pt-5">
|
||||
Build your profile
|
||||
</v-card-title>
|
||||
|
||||
<div class="text-center display-1 grey--text font-weight-light mb-6">
|
||||
This information will let us know more about you.
|
||||
</div>
|
||||
|
||||
<v-tabs
|
||||
ref="tabs"
|
||||
v-model="internalValue"
|
||||
background-color="green lighten-5"
|
||||
color="white"
|
||||
grow
|
||||
slider-size="50"
|
||||
>
|
||||
<v-tabs-slider
|
||||
class="mt-1"
|
||||
color="success"
|
||||
/>
|
||||
|
||||
<v-tab
|
||||
v-for="(item, i) in items"
|
||||
:key="i"
|
||||
:ripple="false"
|
||||
:disabled="!availableSteps.includes(i)"
|
||||
>
|
||||
{{ item }}
|
||||
</v-tab>
|
||||
</v-tabs>
|
||||
|
||||
<div class="my-6" />
|
||||
|
||||
<v-card-text>
|
||||
<v-tabs-items v-model="internalValue">
|
||||
<slot />
|
||||
</v-tabs-items>
|
||||
</v-card-text>
|
||||
|
||||
<v-card-actions class="pb-4 pa-4">
|
||||
<v-btn
|
||||
:disabled="internalValue === 0"
|
||||
class="white--text"
|
||||
color="grey darken-2"
|
||||
min-width="125"
|
||||
@click="$emit('click:prev')"
|
||||
>
|
||||
Previous
|
||||
</v-btn>
|
||||
|
||||
<v-spacer />
|
||||
|
||||
<v-btn
|
||||
:disabled="!availableSteps.includes(internalValue + 1)"
|
||||
color="success"
|
||||
min-width="100"
|
||||
@click="$emit('click:next')"
|
||||
>
|
||||
{{ internalValue === items.length - 1 ? 'Finish' : 'Next' }}
|
||||
</v-btn>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// Mixins
|
||||
import Proxyable from 'vuetify/lib/mixins/proxyable'
|
||||
|
||||
export default {
|
||||
name: 'BaseMaterialWizard',
|
||||
|
||||
mixins: [Proxyable],
|
||||
|
||||
props: {
|
||||
availableSteps: {
|
||||
type: Array,
|
||||
default: () => ([])
|
||||
},
|
||||
items: {
|
||||
type: Array,
|
||||
default: () => ([])
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="sass">
|
||||
.v-card--wizard
|
||||
overflow: visible
|
||||
|
||||
.v-tabs-bar
|
||||
height: 56px
|
||||
padding: 0 8px
|
||||
|
||||
.v-slide-group__wrapper
|
||||
overflow: visible
|
||||
|
||||
.v-tabs-slider
|
||||
border-radius: 4px
|
||||
|
||||
.v-slide-group__wrapper
|
||||
contain: initial
|
||||
</style>
|
||||
34
web/src/components/base/Subheading.vue
Normal file
34
web/src/components/base/Subheading.vue
Normal file
@@ -0,0 +1,34 @@
|
||||
<template>
|
||||
<div class="display-2 font-weight-light col col-12 text-left text--primary pa-0 mb-8">
|
||||
<h5 class="font-weight-light">
|
||||
{{ subheading }}
|
||||
<template v-if="text">
|
||||
<span
|
||||
class="subtitle-1"
|
||||
v-text="text"
|
||||
/>
|
||||
</template>
|
||||
</h5>
|
||||
|
||||
<div class="pt-2">
|
||||
<slot />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'Subheading',
|
||||
|
||||
props: {
|
||||
subheading: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
text: {
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
42
web/src/components/base/VComponent.vue
Normal file
42
web/src/components/base/VComponent.vue
Normal file
@@ -0,0 +1,42 @@
|
||||
<template>
|
||||
<section class="mb-12 text-center">
|
||||
<h1
|
||||
class="font-weight-light mb-2"
|
||||
style="color:#3c4858; font-size:24px"
|
||||
v-text="`Vuetify ${heading}`"
|
||||
/>
|
||||
|
||||
<span
|
||||
class="font-weight-light"
|
||||
style="font-size: 16px; color: #3c4858"
|
||||
>
|
||||
Please checkout the
|
||||
<a
|
||||
:href="`https://vuetifyjs.com/${link}`"
|
||||
rel="noopener"
|
||||
target="_blank"
|
||||
class="secondary--text"
|
||||
style="text-decoration:none;"
|
||||
>
|
||||
full documentation
|
||||
</a>
|
||||
</span>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'VComponent',
|
||||
|
||||
props: {
|
||||
heading: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
link: {
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user