Reformat codes

This commit is contained in:
Peng-YM 2021-04-15 17:00:07 +08:00
parent e764f33956
commit 69e4ddca60
33 changed files with 796 additions and 791 deletions

View File

@ -1,10 +1,10 @@
<template> <template>
<v-bottom-navigation <v-bottom-navigation
v-model="activeItem"
app app
color="primary"
fixed fixed
grow grow
color="primary"
v-model="activeItem"
> >
<v-btn :to="{path: '/'}" value="subscription"> <v-btn :to="{path: '/'}" value="subscription">
<span>订阅</span> <span>订阅</span>

View File

@ -1,7 +1,7 @@
<template> <template>
<v-card class="ml-1 mr-1 mb-1 mt-1"> <v-card class="ml-1 mr-1 mb-1 mt-1">
<v-card-title> <v-card-title>
<v-icon left color="primary">flag</v-icon> <v-icon color="primary" left>flag</v-icon>
国旗 国旗
<v-spacer></v-spacer> <v-spacer></v-spacer>
<v-btn icon @click="$emit('up', idx)"> <v-btn icon @click="$emit('up', idx)">
@ -15,7 +15,7 @@
</v-btn> </v-btn>
<v-dialog> <v-dialog>
<template #activator="{on}"> <template #activator="{on}">
<v-btn icon v-on="on"> <v-btn v-on="on" icon>
<v-icon>help</v-icon> <v-icon>help</v-icon>
</v-btn> </v-btn>
</template> </template>

View File

@ -2,21 +2,21 @@
<v-list> <v-list>
<v-list-item v-for="(proxy, idx) in proxies" :key="idx"> <v-list-item v-for="(proxy, idx) in proxies" :key="idx">
<v-list-item-content> <v-list-item-content>
<v-list-item-title v-text="proxy.name" class="wrap-text"></v-list-item-title> <v-list-item-title class="wrap-text" v-text="proxy.name"></v-list-item-title>
<v-chip-group> <v-chip-group>
<v-chip x-small color="primary" outlined> <v-chip color="primary" outlined x-small>
<v-icon left x-small>mdi-server</v-icon> <v-icon left x-small>mdi-server</v-icon>
{{ proxy.type.toUpperCase() }} {{ proxy.type.toUpperCase() }}
</v-chip> </v-chip>
<v-chip x-small v-if="proxy.udp" color="blue" outlined> <v-chip v-if="proxy.udp" color="blue" outlined x-small>
<v-icon left x-small>mdi-fire</v-icon> <v-icon left x-small>mdi-fire</v-icon>
UDP UDP
</v-chip> </v-chip>
<v-chip x-small v-if="proxy.tfo" color="success" outlined> <v-chip v-if="proxy.tfo" color="success" outlined x-small>
<v-icon left x-small>mdi-flash</v-icon> <v-icon left x-small>mdi-flash</v-icon>
TFO TFO
</v-chip> </v-chip>
<v-chip x-small v-if="proxy['skip-cert-verify']" color="error" outlined> <v-chip v-if="proxy['skip-cert-verify']" color="error" outlined x-small>
<v-icon left x-small>error</v-icon> <v-icon left x-small>error</v-icon>
SCERT SCERT
</v-chip> </v-chip>
@ -26,16 +26,16 @@
<v-row> <v-row>
<v-col> <v-col>
<v-btn <v-btn
v-if="proxy.type !== 'http'"
icon icon
@click="showQRCode(idx)" @click="showQRCode(idx)"
v-if="proxy.type !== 'http'"
> >
<v-icon small color="grey lighten-1">mdi-qrcode</v-icon> <v-icon color="grey lighten-1" small>mdi-qrcode</v-icon>
</v-btn> </v-btn>
</v-col> </v-col>
<v-col> <v-col>
<v-btn icon @click="showInfo(idx)"> <v-btn icon @click="showInfo(idx)">
<v-icon small color="grey lighten-1">mdi-information</v-icon> <v-icon color="grey lighten-1" small>mdi-information</v-icon>
</v-btn> </v-btn>
</v-col> </v-col>
</v-row> </v-row>

View File

@ -1,7 +1,7 @@
<template> <template>
<v-card class="ml-1 mr-1 mb-1 mt-1"> <v-card class="ml-1 mr-1 mb-1 mt-1">
<v-card-title> <v-card-title>
<v-icon left color="primary">code</v-icon> <v-icon color="primary" left>code</v-icon>
正则删除 正则删除
<v-spacer></v-spacer> <v-spacer></v-spacer>
<v-btn icon @click="$emit('up', idx)"> <v-btn icon @click="$emit('up', idx)">
@ -15,7 +15,7 @@
</v-btn> </v-btn>
<v-dialog> <v-dialog>
<template #activator="{on}"> <template #activator="{on}">
<v-btn icon v-on="on"> <v-btn v-on="on" icon>
<v-icon>help</v-icon> <v-icon>help</v-icon>
</v-btn> </v-btn>
</template> </template>
@ -35,26 +35,26 @@
<v-card-text> <v-card-text>
正则表达式 正则表达式
<v-chip-group <v-chip-group
column column
> >
<v-chip <v-chip
close
close-icon="mdi-delete"
v-for="(regex, idx) in regexps" v-for="(regex, idx) in regexps"
:key="idx" :key="idx"
@click:close="remove(idx)" close
close-icon="mdi-delete"
@click="edit(idx)" @click="edit(idx)"
@click:close="remove(idx)"
> >
{{ regex }} {{ regex }}
</v-chip> </v-chip>
</v-chip-group> </v-chip-group>
<v-text-field <v-text-field
placeholder="添加新正则表达式"
clearable
clear-icon="clear"
solo
v-model="form.regex" v-model="form.regex"
append-icon="mdi-send" append-icon="mdi-send"
clear-icon="clear"
clearable
placeholder="添加新正则表达式"
solo
@click:append="add(form.regex)" @click:append="add(form.regex)"
@keyup.enter="add(form.regex)" @keyup.enter="add(form.regex)"
/> />

View File

@ -1,7 +1,7 @@
<template> <template>
<v-card class="ml-1 mr-1 mb-1 mt-1"> <v-card class="ml-1 mr-1 mb-1 mt-1">
<v-card-title> <v-card-title>
<v-icon left color="primary">filter_list</v-icon> <v-icon color="primary" left>filter_list</v-icon>
正则过滤 正则过滤
<v-spacer></v-spacer> <v-spacer></v-spacer>
<v-btn icon @click="$emit('up', idx)"> <v-btn icon @click="$emit('up', idx)">
@ -15,7 +15,7 @@
</v-btn> </v-btn>
<v-dialog> <v-dialog>
<template #activator="{on}"> <template #activator="{on}">
<v-btn icon v-on="on"> <v-btn v-on="on" icon>
<v-icon>help</v-icon> <v-icon>help</v-icon>
</v-btn> </v-btn>
</template> </template>
@ -50,23 +50,23 @@
column column
> >
<v-chip <v-chip
close
close-icon="mdi-delete"
v-for="(regex, idx) in regexps" v-for="(regex, idx) in regexps"
:key="idx" :key="idx"
@click:close="remove(idx)" close
close-icon="mdi-delete"
@click="edit(idx)" @click="edit(idx)"
@click:close="remove(idx)"
> >
{{ regex }} {{ regex }}
</v-chip> </v-chip>
</v-chip-group> </v-chip-group>
<v-text-field <v-text-field
placeholder="添加新正则表达式"
clearable
clear-icon="clear"
solo
v-model="form.regex" v-model="form.regex"
append-icon="mdi-send" append-icon="mdi-send"
clear-icon="clear"
clearable
placeholder="添加新正则表达式"
solo
@click:append="add(form.regex)" @click:append="add(form.regex)"
@keyup.enter="add(form.regex)" @keyup.enter="add(form.regex)"
/> />

View File

@ -1,7 +1,7 @@
<template> <template>
<v-card class="ml-1 mr-1 mb-1 mt-1"> <v-card class="ml-1 mr-1 mb-1 mt-1">
<v-card-title> <v-card-title>
<v-icon left color="primary">filter_list</v-icon> <v-icon color="primary" left>filter_list</v-icon>
正则重命名 正则重命名
<v-spacer></v-spacer> <v-spacer></v-spacer>
<v-btn icon @click="$emit('up', idx)"> <v-btn icon @click="$emit('up', idx)">
@ -15,7 +15,7 @@
</v-btn> </v-btn>
<v-dialog> <v-dialog>
<template #activator="{on}"> <template #activator="{on}">
<v-btn icon v-on="on"> <v-btn v-on="on" icon>
<v-icon>help</v-icon> <v-icon>help</v-icon>
</v-btn> </v-btn>
</template> </template>
@ -32,15 +32,15 @@
<v-card-text> <v-card-text>
正则表达式 正则表达式
<v-chip-group <v-chip-group
column column
> >
<v-chip <v-chip
close
close-icon="mdi-delete"
v-for="(chip, idx) in chips" v-for="(chip, idx) in chips"
:key="idx" :key="idx"
@click:close="remove(idx)" close
close-icon="mdi-delete"
@click="edit(idx)" @click="edit(idx)"
@click:close="remove(idx)"
> >
{{ chip }} {{ chip }}
</v-chip> </v-chip>
@ -48,21 +48,21 @@
<v-row> <v-row>
<v-col> <v-col>
<v-text-field <v-text-field
placeholder="正则表达式"
clearable
clear-icon="clear"
solo
v-model="form.regex" v-model="form.regex"
clear-icon="clear"
clearable
placeholder="正则表达式"
solo
/> />
</v-col> </v-col>
<v-col> <v-col>
<v-text-field <v-text-field
placeholder="替换为"
solo
clearable
clear-icon="clear"
v-model="form.replace" v-model="form.replace"
append-icon="mdi-send" append-icon="mdi-send"
clear-icon="clear"
clearable
placeholder="替换为"
solo
@click:append="add" @click:append="add"
@keyup.enter="add" @keyup.enter="add"
/> />

View File

@ -1,7 +1,7 @@
<template> <template>
<v-card class="ml-1 mr-1 mb-1 mt-1"> <v-card class="ml-1 mr-1 mb-1 mt-1">
<v-card-title> <v-card-title>
<v-icon left color="primary">sort</v-icon> <v-icon color="primary" left>sort</v-icon>
正则排序 正则排序
<v-spacer></v-spacer> <v-spacer></v-spacer>
<v-btn icon @click="$emit('up', idx)"> <v-btn icon @click="$emit('up', idx)">
@ -15,7 +15,7 @@
</v-btn> </v-btn>
<v-dialog> <v-dialog>
<template #activator="{on}"> <template #activator="{on}">
<v-btn icon v-on="on"> <v-btn v-on="on" icon>
<v-icon>help</v-icon> <v-icon>help</v-icon>
</v-btn> </v-btn>
</template> </template>
@ -35,10 +35,10 @@
column column
> >
<v-chip <v-chip
close
close-icon="mdi-delete"
v-for="(item, idx) in items" v-for="(item, idx) in items"
:key="idx" :key="idx"
close
close-icon="mdi-delete"
@click="edit(idx)" @click="edit(idx)"
@click:close="remove(idx)" @click:close="remove(idx)"
> >
@ -46,12 +46,12 @@
</v-chip> </v-chip>
</v-chip-group> </v-chip-group>
<v-text-field <v-text-field
placeholder="添加新正则表达式"
clearable
clear-icon="clear"
solo
v-model="form.item" v-model="form.item"
append-icon="mdi-send" append-icon="mdi-send"
clear-icon="clear"
clearable
placeholder="添加新正则表达式"
solo
@click:append="add(form.item)" @click:append="add(form.item)"
@keyup.enter="add(form.item)" @keyup.enter="add(form.item)"
/> />

View File

@ -1,7 +1,7 @@
<template> <template>
<v-card class="ml-1 mr-1 mb-1 mt-1"> <v-card class="ml-1 mr-1 mb-1 mt-1">
<v-card-title> <v-card-title>
<v-icon left color="primary">flag</v-icon> <v-icon color="primary" left>flag</v-icon>
区域过滤 区域过滤
<v-spacer></v-spacer> <v-spacer></v-spacer>
<v-btn icon @click="$emit('up', idx)"> <v-btn icon @click="$emit('up', idx)">
@ -15,7 +15,7 @@
</v-btn> </v-btn>
<v-dialog> <v-dialog>
<template #activator="{on}"> <template #activator="{on}">
<v-btn icon v-on="on"> <v-btn v-on="on" icon>
<v-icon>help</v-icon> <v-icon>help</v-icon>
</v-btn> </v-btn>
</template> </template>
@ -30,13 +30,13 @@
</v-dialog> </v-dialog>
</v-card-title> </v-card-title>
<v-card-text> <v-card-text>
<v-chip-group multiple active-class="primary accent-4" v-model="selection" column> <v-chip-group v-model="selection" active-class="primary accent-4" column multiple>
<v-chip <v-chip
class="ma-2"
v-for="region in regions" v-for="region in regions"
label
:key="region.name" :key="region.name"
:value="region.value" :value="region.value"
class="ma-2"
label
> >
{{ region.name }} {{ region.name }}
</v-chip> </v-chip>

View File

@ -1,7 +1,7 @@
<template> <template>
<v-card class="ml-1 mr-1 mb-1 mt-1"> <v-card class="ml-1 mr-1 mb-1 mt-1">
<v-card-title> <v-card-title>
<v-icon left color="primary">code</v-icon> <v-icon color="primary" left>code</v-icon>
脚本过滤器 脚本过滤器
<v-spacer></v-spacer> <v-spacer></v-spacer>
<v-btn icon @click="$emit('up', idx)"> <v-btn icon @click="$emit('up', idx)">
@ -15,7 +15,7 @@
</v-btn> </v-btn>
<v-dialog> <v-dialog>
<template #activator="{on}"> <template #activator="{on}">
<v-btn icon v-on="on"> <v-btn v-on="on" icon>
<v-icon>help</v-icon> <v-icon>help</v-icon>
</v-btn> </v-btn>
</template> </template>
@ -42,12 +42,12 @@
</v-row> </v-row>
</v-radio-group> </v-radio-group>
<v-textarea <v-textarea
solo v-model="content"
clearable :label="hint"
auto-grow auto-grow
clear-icon="clear" clear-icon="clear"
:label="hint" clearable
v-model="content" solo
/> />
</v-card-text> </v-card-text>
</v-card> </v-card>

View File

@ -1,7 +1,7 @@
<template> <template>
<v-card class="ml-1 mr-1 mb-1 mt-1"> <v-card class="ml-1 mr-1 mb-1 mt-1">
<v-card-title> <v-card-title>
<v-icon left color="primary">code</v-icon> <v-icon color="primary" left>code</v-icon>
脚本操作 脚本操作
<v-spacer></v-spacer> <v-spacer></v-spacer>
<v-btn icon @click="$emit('up', idx)"> <v-btn icon @click="$emit('up', idx)">
@ -15,7 +15,7 @@
</v-btn> </v-btn>
<v-dialog> <v-dialog>
<template #activator="{on}"> <template #activator="{on}">
<v-btn icon v-on="on"> <v-btn v-on="on" icon>
<v-icon>help</v-icon> <v-icon>help</v-icon>
</v-btn> </v-btn>
</template> </template>
@ -42,12 +42,12 @@
</v-row> </v-row>
</v-radio-group> </v-radio-group>
<v-textarea <v-textarea
clearable
clear-icon="clear"
solo
auto-grow
:label="hint"
v-model="content" v-model="content"
:label="hint"
auto-grow
clear-icon="clear"
clearable
solo
/> />
</v-card-text> </v-card-text>
</v-card> </v-card>

View File

@ -1,7 +1,7 @@
<template> <template>
<v-card class="ml-1 mr-1 mb-1 mt-1"> <v-card class="ml-1 mr-1 mb-1 mt-1">
<v-card-title> <v-card-title>
<v-icon left color="primary">sort_by_alpha</v-icon> <v-icon color="primary" left>sort_by_alpha</v-icon>
节点排序 节点排序
<v-spacer></v-spacer> <v-spacer></v-spacer>
<v-btn icon @click="$emit('up', idx)"> <v-btn icon @click="$emit('up', idx)">
@ -15,7 +15,7 @@
</v-btn> </v-btn>
<v-dialog> <v-dialog>
<template #activator="{on}"> <template #activator="{on}">
<v-btn icon v-on="on"> <v-btn v-on="on" icon>
<v-icon>help</v-icon> <v-icon>help</v-icon>
</v-btn> </v-btn>
</template> </template>

View File

@ -2,11 +2,11 @@
<v-fab-transition> <v-fab-transition>
<v-speed-dial <v-speed-dial
v-model="opened" v-model="opened"
direction="top"
left
fab
absolute absolute
bottom bottom
direction="top"
fab
left
small small
transition="slide-y-reverse-transition" transition="slide-y-reverse-transition"
> >
@ -19,14 +19,14 @@
</v-btn> </v-btn>
</template> </template>
<v-btn <v-btn
fab
color="primary" color="primary"
fab
> >
<v-icon>mdi-plus</v-icon> <v-icon>mdi-plus</v-icon>
</v-btn> </v-btn>
<v-btn <v-btn
fab
color="primary" color="primary"
fab
> >
<v-icon>create_new_folder</v-icon> <v-icon>create_new_folder</v-icon>
</v-btn> </v-btn>
@ -41,8 +41,6 @@ export default {
opened: false, opened: false,
} }
}, },
computed: { computed: {}
}
} }
</script> </script>

View File

@ -1,11 +1,11 @@
<template> <template>
<div> <div>
<v-app-bar <v-app-bar
app :clipped="true"
fixed :mini-variant="false"
:mini-variant="false" :clipped="true" app fixed
> >
<v-toolbar-title><h3>{{title}}</h3></v-toolbar-title> <v-toolbar-title><h3>{{ title }}</h3></v-toolbar-title>
</v-app-bar> </v-app-bar>
</div> </div>
@ -19,8 +19,7 @@ export default {
} }
}, },
methods: { methods: {},
},
computed: { computed: {
title: function () { title: function () {

View File

@ -1,7 +1,7 @@
<template> <template>
<v-card class="ml-1 mr-1 mb-1 mt-1"> <v-card class="ml-1 mr-1 mb-1 mt-1">
<v-card-title> <v-card-title>
<v-icon left color="primary">cloud_circle</v-icon> <v-icon color="primary" left>cloud_circle</v-icon>
节点类型过滤 节点类型过滤
<v-spacer></v-spacer> <v-spacer></v-spacer>
<v-btn icon @click="$emit('up', idx)"> <v-btn icon @click="$emit('up', idx)">
@ -15,7 +15,7 @@
</v-btn> </v-btn>
<v-dialog> <v-dialog>
<template #activator="{on}"> <template #activator="{on}">
<v-btn icon v-on="on"> <v-btn v-on="on" icon>
<v-icon>help</v-icon> <v-icon>help</v-icon>
</v-btn> </v-btn>
</template> </template>
@ -30,13 +30,13 @@
</v-dialog> </v-dialog>
</v-card-title> </v-card-title>
<v-card-text> <v-card-text>
<v-chip-group multiple active-class="primary accent-4" v-model="selection" column> <v-chip-group v-model="selection" active-class="primary accent-4" column multiple>
<v-chip <v-chip
class="ma-2"
v-for="type in types" v-for="type in types"
label
:key="type.name" :key="type.name"
:value="type.value" :value="type.value"
class="ma-2"
label
> >
{{ type.name }} {{ type.name }}
</v-chip> </v-chip>

View File

@ -1,9 +1,9 @@
<script> <script>
import { VCard } from 'vuetify/lib' import {VCard} from 'vuetify/lib'
export default { export default {
name: 'Card', name: 'Card',
extends: VCard extends: VCard
} }
</script> </script>

View File

@ -1,69 +1,69 @@
<template> <template>
<v-list-item <v-list-item
:href="href" :active-class="`primary ${!isDark ? 'black' : 'white'}--text`"
:rel="href && href !== '#' ? 'noopener' : undefined" :href="href"
:target="href && href !== '#' ? '_blank' : undefined" :rel="href && href !== '#' ? 'noopener' : undefined"
:to="item.to" :target="href && href !== '#' ? '_blank' : undefined"
:active-class="`primary ${!isDark ? 'black' : 'white'}--text`" :to="item.to"
> >
<v-list-item-icon <v-list-item-icon
v-if="text" v-if="text"
class="v-list-item__icon--text" class="v-list-item__icon--text"
v-text="computedText" v-text="computedText"
/> />
<v-list-item-icon v-else-if="item.icon"> <v-list-item-icon v-else-if="item.icon">
<v-icon v-text="item.icon" /> <v-icon v-text="item.icon"/>
</v-list-item-icon> </v-list-item-icon>
<v-list-item-content v-if="item.title || item.subtitle"> <v-list-item-content v-if="item.title || item.subtitle">
<v-list-item-title v-text="item.title" /> <v-list-item-title v-text="item.title"/>
<v-list-item-subtitle v-text="item.subtitle" /> <v-list-item-subtitle v-text="item.subtitle"/>
</v-list-item-content> </v-list-item-content>
</v-list-item> </v-list-item>
</template> </template>
<script> <script>
import Themeable from 'vuetify/lib/mixins/themeable' import Themeable from 'vuetify/lib/mixins/themeable'
export default { export default {
name: 'Item', name: 'Item',
mixins: [Themeable], mixins: [Themeable],
props: { props: {
item: { item: {
type: Object, type: Object,
default: () => ({ default: () => ({
href: undefined, href: undefined,
icon: undefined, icon: undefined,
subtitle: undefined, subtitle: undefined,
title: undefined, title: undefined,
to: undefined to: undefined
}) })
},
text: {
type: Boolean,
default: false
}
}, },
text: {
type: Boolean,
default: false
}
},
computed: { computed: {
computedText() { computedText() {
if (!this.item || !this.item.title) return '' if (!this.item || !this.item.title) return ''
let text = '' let text = ''
this.item.title.split(' ').forEach(val => { this.item.title.split(' ').forEach(val => {
text += val.substring(0, 1) text += val.substring(0, 1)
}) })
return text return text
}, },
href() { href() {
return this.item.href || (!this.item.to ? '#' : undefined) return this.item.href || (!this.item.to ? '#' : undefined)
}
} }
} }
}
</script> </script>

View File

@ -1,105 +1,105 @@
<template> <template>
<v-list-group <v-list-group
:group="group" :color="barColor !== 'rgba(255, 255, 255, 1), rgba(255, 255, 255, 0.7)' ? 'white' : 'grey darken-1'"
:prepend-icon="item.icon" :group="group"
:sub-group="subGroup" :prepend-icon="item.icon"
append-icon="mdi-menu-down" :sub-group="subGroup"
:color="barColor !== 'rgba(255, 255, 255, 1), rgba(255, 255, 255, 0.7)' ? 'white' : 'grey darken-1'" append-icon="mdi-menu-down"
> >
<template v-slot:activator> <template v-slot:activator>
<v-list-item-icon <v-list-item-icon
v-if="text" v-if="text"
class="v-list-item__icon--text" class="v-list-item__icon--text"
v-text="computedText" v-text="computedText"
/> />
<v-list-item-avatar <v-list-item-avatar
v-else-if="item.avatar" v-else-if="item.avatar"
class="align-self-center" class="align-self-center"
color="grey" color="grey"
> >
<v-img src="https://demos.creative-tim.com/material-dashboard-pro/assets/img/faces/avatar.jpg" /> <v-img src="https://demos.creative-tim.com/material-dashboard-pro/assets/img/faces/avatar.jpg"/>
</v-list-item-avatar> </v-list-item-avatar>
<v-list-item-content> <v-list-item-content>
<v-list-item-title v-text="item.title" /> <v-list-item-title v-text="item.title"/>
</v-list-item-content> </v-list-item-content>
</template> </template>
<template v-for="(child, i) in children"> <template v-for="(child, i) in children">
<base-item-sub-group <base-item-sub-group
v-if="child.children" v-if="child.children"
:key="`sub-group-${i}`" :key="`sub-group-${i}`"
:item="child" :item="child"
/> />
<base-item <base-item
v-else v-else
:key="`item-${i}`" :key="`item-${i}`"
:item="child" :item="child"
text text
/> />
</template> </template>
</v-list-group> </v-list-group>
</template> </template>
<script> <script>
// Utilities // Utilities
import kebabCase from 'lodash/kebabCase' import kebabCase from 'lodash/kebabCase'
import { mapState } from 'vuex' import {mapState} from 'vuex'
export default { export default {
name: 'ItemGroup', name: 'ItemGroup',
inheritAttrs: false, inheritAttrs: false,
props: { props: {
item: { item: {
type: Object, type: Object,
default: () => ({ default: () => ({
avatar: undefined, avatar: undefined,
group: undefined, group: undefined,
title: undefined, title: undefined,
children: [] children: []
}) })
},
subGroup: {
type: Boolean,
default: false
},
text: {
type: Boolean,
default: false
}
}, },
subGroup: {
computed: { type: Boolean,
...mapState(['barColor']), default: false
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)
}
}, },
text: {
type: Boolean,
default: false
}
},
methods: { computed: {
genGroup(children) { ...mapState(['barColor']),
return children 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) .filter(item => item.to)
.map(item => { .map(item => {
const parent = item.group || this.item.group const parent = item.group || this.item.group
@ -111,9 +111,9 @@
return group return group
}).join('|') }).join('|')
}
} }
} }
}
</script> </script>
<style> <style>

View File

@ -1,25 +1,25 @@
<template> <template>
<base-item-group <base-item-group
:item="item" :item="item"
text sub-group
sub-group text
/> />
</template> </template>
<script> <script>
export default { export default {
name: 'ItemSubGroup', name: 'ItemSubGroup',
props: { props: {
item: { item: {
type: Object, type: Object,
default: () => ({ default: () => ({
avatar: undefined, avatar: undefined,
group: undefined, group: undefined,
title: undefined, title: undefined,
children: [] children: []
}) })
}
} }
} }
}
</script> </script>

View File

@ -1,64 +1,64 @@
<script> <script>
// Components // Components
import { VAlert, VBtn, VIcon } from 'vuetify/lib' import {VAlert, VBtn, VIcon} from 'vuetify/lib'
export default { export default {
name: 'MaterialAlert', name: 'MaterialAlert',
extends: VAlert, extends: VAlert,
computed: { computed: {
__cachedDismissible() { __cachedDismissible() {
if (!this.dismissible) return null if (!this.dismissible) return null
const color = 'white' const color = 'white'
return this.$createElement(VBtn, { return this.$createElement(VBtn, {
staticClass: 'v-alert__dismissible', staticClass: 'v-alert__dismissible',
props: { props: {
color, color,
icon: true, icon: true,
small: true small: true
}, },
attrs: { attrs: {
'aria-label': this.$vuetify.lang.t(this.closeLabel) 'aria-label': this.$vuetify.lang.t(this.closeLabel)
}, },
on: { on: {
// eslint-disable-next-line // eslint-disable-next-line
click: () => (this.isActive = false) 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() { this.$createElement(VIcon, {
return true props: {color}
}, '$vuetify.icons.cancel')
])
},
classes() {
return {
...VAlert.options.computed.classes.call(this),
'v-alert--material': true
} }
},
hasColoredIcon() {
return true
} }
} }
}
</script> </script>
<style lang="sass"> <style lang="sass">
.v-alert--material .v-alert--material
margin-top: 32px margin-top: 32px
.v-alert__icon .v-alert__icon
background-color: #FFFFFF background-color: #FFFFFF
height: 44px height: 44px
min-width: 44px min-width: 44px
top: -36px top: -36px
.v-alert__dismissible .v-alert__dismissible
align-self: flex-start align-self: flex-start
margin: 0 !important margin: 0 !important
padding: 0 !important padding: 0 !important
</style> </style>

View File

@ -1,168 +1,168 @@
<template> <template>
<v-card <v-card
v-bind="$attrs" v-bind="$attrs"
:class="classes" :class="classes"
class="v-card--material pa-3" class="v-card--material pa-3"
> >
<div class="d-flex grow flex-wrap"> <div class="d-flex grow flex-wrap">
<v-avatar <v-avatar
v-if="avatar" v-if="avatar"
size="128" class="mx-auto v-card--material__avatar elevation-12"
class="mx-auto v-card--material__avatar elevation-12" color="grey"
color="grey" size="128"
> >
<v-img :src="avatar" /> <v-img :src="avatar"/>
</v-avatar> </v-avatar>
<v-sheet <v-sheet
v-else v-else
:class="{ :class="{
'pa-7': !$slots.image 'pa-7': !$slots.image
}" }"
:color="color" :color="color"
:max-height="icon ? 90 : undefined" :max-height="icon ? 90 : undefined"
:width="inline || icon ? 'auto' : '100%'" :width="inline || icon ? 'auto' : '100%'"
class="text-start v-card--material__heading mb-n6" class="text-start v-card--material__heading mb-n6"
dark dark
> >
<slot <slot
v-if="$slots.heading" v-if="$slots.heading"
name="heading" name="heading"
/> />
<slot <slot
v-else-if="$slots.image" v-else-if="$slots.image"
name="image" name="image"
/> />
<div <div
v-else-if="title && !icon" v-else-if="title && !icon"
class="display-1 font-weight-light" class="display-1 font-weight-light"
v-text="title" v-text="title"
/> />
<v-icon <v-icon
v-else-if="icon" v-else-if="icon"
size="32" size="32"
v-text="icon" v-text="icon"
/> />
<div <div
v-if="text" v-if="text"
class="headline font-weight-thin" class="headline font-weight-thin"
v-text="text" v-text="text"
/> />
</v-sheet> </v-sheet>
<div <div
v-if="$slots['after-heading']" v-if="$slots['after-heading']"
class="ml-6" class="ml-6"
> >
<slot name="after-heading" /> <slot name="after-heading"/>
</div> </div>
<v-col <v-col
v-if="hoverReveal" v-if="hoverReveal"
cols="12" class="text-center py-0 mt-n12"
class="text-center py-0 mt-n12" cols="12"
> >
<slot name="reveal-actions" /> <slot name="reveal-actions"/>
</v-col> </v-col>
<div <div
v-else-if="icon && title" v-else-if="icon && title"
class="ml-4" class="ml-4"
> >
<div <div
class="card-title font-weight-light" class="card-title font-weight-light"
v-text="title" v-text="title"
/> />
</div> </div>
</div> </div>
<slot /> <slot/>
<template v-if="$slots.actions"> <template v-if="$slots.actions">
<v-divider class="mt-2" /> <v-divider class="mt-2"/>
<v-card-actions class="pb-0"> <v-card-actions class="pb-0">
<slot name="actions" /> <slot name="actions"/>
</v-card-actions> </v-card-actions>
</template> </template>
</v-card> </v-card>
</template> </template>
<script> <script>
export default { export default {
name: 'MaterialCard', name: 'MaterialCard',
props: { props: {
avatar: { avatar: {
type: String, type: String,
default: '' default: ''
}, },
color: { color: {
type: String, type: String,
default: 'success' default: 'success'
}, },
hoverReveal: { hoverReveal: {
type: Boolean, type: Boolean,
default: false default: false
}, },
icon: { icon: {
type: String, type: String,
default: undefined default: undefined
}, },
image: { image: {
type: Boolean, type: Boolean,
default: false default: false
}, },
inline: { inline: {
type: Boolean, type: Boolean,
default: false default: false
}, },
text: { text: {
type: String, type: String,
default: '' default: ''
}, },
title: { title: {
type: String, type: String,
default: '' default: ''
}
},
computed: {
classes() {
return {
'v-card--material--has-heading': this.hasHeading,
'v-card--material--hover-reveal': this.hoverReveal
} }
}, },
hasHeading() {
computed: { return Boolean(this.$slots.heading || this.title || this.icon)
classes() { },
return { hasAltHeading() {
'v-card--material--has-heading': this.hasHeading, return Boolean(this.$slots.heading || (this.title && this.icon))
'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> </script>
<style lang="sass"> <style lang="sass">
.v-card--material .v-card--material
&__avatar &__avatar
position: relative position: relative
top: -64px top: -64px
margin-bottom: -32px margin-bottom: -32px
&__heading &__heading
position: relative position: relative
top: -40px top: -40px
transition: .3s ease transition: .3s ease
z-index: 1 z-index: 1
&.v-card--material--hover-reveal:hover &.v-card--material--hover-reveal:hover
.v-card--material__heading .v-card--material__heading
transform: translateY(-40px) transform: translateY(-40px)
</style> </style>

View File

@ -1,95 +1,95 @@
<template> <template>
<base-material-card <base-material-card
class="v-card--material-chart" v-bind="$attrs"
v-bind="$attrs" v-on="$listeners"
v-on="$listeners" class="v-card--material-chart"
> >
<template v-slot:heading> <template v-slot:heading>
<chartist <chartist
:data="data" :data="data"
:event-handlers="eventHandlers" :event-handlers="eventHandlers"
:options="options" :options="options"
:ratio="ratio" :ratio="ratio"
:responsive-options="responsiveOptions" :responsive-options="responsiveOptions"
:type="type" :type="type"
style="max-height: 150px;" style="max-height: 150px;"
/> />
</template> </template>
<slot <slot
slot="reveal-actions" slot="reveal-actions"
name="reveal-actions" name="reveal-actions"
/> />
<slot /> <slot/>
<slot <slot
slot="actions" slot="actions"
name="actions" name="actions"
/> />
</base-material-card> </base-material-card>
</template> </template>
<script> <script>
export default { export default {
name: 'MaterialChartCard', name: 'MaterialChartCard',
inheritAttrs: false, inheritAttrs: false,
props: { props: {
data: { data: {
type: Object, type: Object,
default: () => ({}) default: () => ({})
}, },
eventHandlers: { eventHandlers: {
type: Array, type: Array,
default: () => ([]) default: () => ([])
}, },
options: { options: {
type: Object, type: Object,
default: () => ({}) default: () => ({})
}, },
ratio: { ratio: {
type: String, type: String,
default: undefined default: undefined
}, },
responsiveOptions: { responsiveOptions: {
type: Array, type: Array,
default: () => ([]) default: () => ([])
}, },
type: { type: {
type: String, type: String,
required: true, required: true,
validator: v => ['Bar', 'Line', 'Pie'].includes(v) validator: v => ['Bar', 'Line', 'Pie'].includes(v)
}
} }
} }
}
</script> </script>
<style lang="sass"> <style lang="sass">
.v-card--material-chart .v-card--material-chart
p p
color: #999 color: #999
.v-card--material__heading .v-card--material__heading
max-height: 185px max-height: 185px
.ct-label .ct-label
color: inherit color: inherit
opacity: .7 opacity: .7
font-size: 0.975rem font-size: 0.975rem
font-weight: 100 font-weight: 100
.ct-grid .ct-grid
stroke: rgba(255, 255, 255, 0.2) stroke: rgba(255, 255, 255, 0.2)
.ct-series-a .ct-point, .ct-series-a .ct-point,
.ct-series-a .ct-line, .ct-series-a .ct-line,
.ct-series-a .ct-bar, .ct-series-a .ct-bar,
.ct-series-a .ct-slice-donut .ct-series-a .ct-slice-donut
stroke: rgba(255,255,255,.8) stroke: rgba(255, 255, 255, .8)
.ct-series-a .ct-slice-pie, .ct-series-a .ct-slice-pie,
.ct-series-a .ct-area .ct-series-a .ct-area
fill: rgba(255,255,255,.4) fill: rgba(255, 255, 255, .4)
</style> </style>

View File

@ -1,20 +1,20 @@
<template> <template>
<v-menu <v-menu
v-model="value" v-model="value"
:transition="transition" v-bind="$attrs"
offset-y :transition="transition"
v-bind="$attrs" offset-y
> >
<template v-slot:activator="{ attrs, on }"> <template v-slot:activator="{ attrs, on }">
<v-btn <v-btn
:color="color" v-bind="attrs"
default v-on="on"
min-width="200" :color="color"
rounded default
v-bind="attrs" min-width="200"
v-on="on" rounded
> >
<slot /> <slot/>
<v-icon> <v-icon>
mdi-{{ value ? 'menu-up' : 'menu-down' }} mdi-{{ value ? 'menu-up' : 'menu-down' }}
@ -25,12 +25,12 @@
<v-sheet> <v-sheet>
<v-list dense> <v-list dense>
<v-list-item <v-list-item
v-for="(item, i) in items" v-for="(item, i) in items"
:key="i" :key="i"
@click="$(`click:action-${item.id}`)" @click="$(`click:action-${item.id}`)"
> >
<v-list-item-content> <v-list-item-content>
<v-list-item-title v-text="item.text" /> <v-list-item-title v-text="item.text"/>
</v-list-item-content> </v-list-item-content>
</v-list-item> </v-list-item>
</v-list> </v-list>
@ -39,32 +39,32 @@
</template> </template>
<script> <script>
// Mixins // Mixins
import Proxyable from 'vuetify/lib/mixins/proxyable' import Proxyable from 'vuetify/lib/mixins/proxyable'
export default { export default {
name: 'MaterialDropdown', name: 'MaterialDropdown',
mixins: [Proxyable], mixins: [Proxyable],
props: { props: {
color: { color: {
type: String, type: String,
default: 'primary' default: 'primary'
}, },
items: { items: {
type: Array, type: Array,
default: () => ([ default: () => ([
{ {
id: undefined, id: undefined,
text: undefined text: undefined
} }
]) ])
}, },
transition: { transition: {
type: String, type: String,
default: 'scale-transition' default: 'scale-transition'
}
} }
} }
}
</script> </script>

View File

@ -1,66 +1,66 @@
<template> <template>
<v-snackbar <v-snackbar
:class="classes" v-bind="{
:value="value"
v-bind="{
...$attrs, ...$attrs,
...$props, ...$props,
'color': 'transparent' 'color': 'transparent'
}" }"
@change="$emit('change', $event)" :class="classes"
:value="value"
@change="$emit('change', $event)"
> >
<base-material-alert <base-material-alert
:color="color" :color="color"
:dismissible="dismissible" :dismissible="dismissible"
:type="type" :type="type"
class="ma-0" class="ma-0"
dark dark
> >
<slot /> <slot/>
</base-material-alert> </base-material-alert>
</v-snackbar> </v-snackbar>
</template> </template>
<script> <script>
// Components // Components
import { VSnackbar } from 'vuetify/lib' import {VSnackbar} from 'vuetify/lib'
export default { export default {
name: 'BaseMaterialSnackbar', name: 'BaseMaterialSnackbar',
extends: VSnackbar, extends: VSnackbar,
props: { props: {
dismissible: { dismissible: {
type: Boolean, type: Boolean,
default: true default: true
},
type: {
type: String,
default: ''
}
}, },
type: {
type: String,
default: ''
}
},
computed: { computed: {
classes() { classes() {
return { return {
...VSnackbar.options.computed.classes.call(this), ...VSnackbar.options.computed.classes.call(this),
'v-snackbar--material': true 'v-snackbar--material': true
}
} }
} }
} }
}
</script> </script>
<style lang="sass"> <style lang="sass">
.v-snackbar--material .v-snackbar--material
margin-top: 32px margin-top: 32px
margin-bottom: 32px margin-bottom: 32px
.v-alert--material, .v-alert--material,
.v-snack__wrapper .v-snack__wrapper
border-radius: 4px border-radius: 4px
.v-snack__content .v-snack__content
overflow: visible overflow: visible
padding: 0 padding: 0
</style> </style>

View File

@ -1,15 +1,15 @@
<template> <template>
<base-material-card <base-material-card
:icon="icon" v-bind="$attrs"
class="v-card--material-stats" v-on="$listeners"
v-bind="$attrs" :icon="icon"
v-on="$listeners" class="v-card--material-stats"
> >
<template v-slot:after-heading> <template v-slot:after-heading>
<div class="ml-auto text-right"> <div class="ml-auto text-right">
<div <div
class="body-3 grey--text font-weight-light" class="body-3 grey--text font-weight-light"
v-text="title" v-text="title"
/> />
<h3 class="display-2 font-weight-light text--primary"> <h3 class="display-2 font-weight-light text--primary">
@ -19,72 +19,72 @@
</template> </template>
<v-col <v-col
cols="12" class="px-0"
class="px-0" cols="12"
> >
<v-divider /> <v-divider/>
</v-col> </v-col>
<v-icon <v-icon
:color="subIconColor" :color="subIconColor"
size="16" class="ml-2 mr-1"
class="ml-2 mr-1" size="16"
> >
{{ subIcon }} {{ subIcon }}
</v-icon> </v-icon>
<span <span
:class="subTextColor" :class="subTextColor"
class="caption grey--text font-weight-light" class="caption grey--text font-weight-light"
v-text="subText" v-text="subText"
/> />
</base-material-card> </base-material-card>
</template> </template>
<script> <script>
import Card from './Card' import Card from './Card'
export default { export default {
name: 'MaterialStatsCard', name: 'MaterialStatsCard',
inheritAttrs: false, inheritAttrs: false,
props: { props: {
...Card.props, ...Card.props,
icon: { icon: {
type: String, type: String,
required: true required: true
}, },
subIcon: { subIcon: {
type: String, type: String,
default: undefined default: undefined
}, },
subIconColor: { subIconColor: {
type: String, type: String,
default: undefined default: undefined
}, },
subTextColor: { subTextColor: {
type: String, type: String,
default: undefined default: undefined
}, },
subText: { subText: {
type: String, type: String,
default: undefined default: undefined
}, },
title: { title: {
type: String, type: String,
default: undefined default: undefined
}, },
value: { value: {
type: String, type: String,
default: undefined default: undefined
}, },
smallValue: { smallValue: {
type: String, type: String,
default: undefined default: undefined
}
} }
} }
}
</script> </script>
<style lang="sass"> <style lang="sass">

View File

@ -1,43 +1,43 @@
<template> <template>
<v-tabs <v-tabs
v-model="internalValue" v-model="internalValue"
:active-class="`${color} ${$vuetify.theme.dark ? 'black' : 'white'}--text`" v-bind="$attrs"
class="v-tabs--pill" :active-class="`${color} ${$vuetify.theme.dark ? 'black' : 'white'}--text`"
hide-slider class="v-tabs--pill"
v-bind="$attrs" hide-slider
> >
<slot /> <slot/>
<slot name="items" /> <slot name="items"/>
</v-tabs> </v-tabs>
</template> </template>
<script> <script>
// Mixins // Mixins
import Proxyable from 'vuetify/lib/mixins/proxyable' import Proxyable from 'vuetify/lib/mixins/proxyable'
export default { export default {
name: 'MaterialTabs', name: 'MaterialTabs',
mixins: [Proxyable], mixins: [Proxyable],
props: { props: {
color: { color: {
type: String, type: String,
default: 'primary' default: 'primary'
}
} }
} }
}
</script> </script>
<style lang="sass"> <style lang="sass">
.v-tabs--pill .v-tabs--pill
.v-tab,
.v-tab:before
border-radius: 24px
&.v-tabs--icons-and-text
.v-tab, .v-tab,
.v-tab:before .v-tab:before
border-radius: 24px border-radius: 4px
&.v-tabs--icons-and-text
.v-tab,
.v-tab:before
border-radius: 4px
</style> </style>

View File

@ -2,74 +2,74 @@
<v-card class="text-center v-card--testimony"> <v-card class="text-center v-card--testimony">
<div class="pt-6"> <div class="pt-6">
<v-icon <v-icon
color="black" color="black"
x-large x-large
> >
mdi-format-quote-close mdi-format-quote-close
</v-icon> </v-icon>
</div> </div>
<v-card-text <v-card-text
class="display-1 font-weight-light font-italic mb-3" class="display-1 font-weight-light font-italic mb-3"
v-text="blurb" v-text="blurb"
/> />
<div <div
class="display-2 font-weight-light mb-2" class="display-2 font-weight-light mb-2"
v-text="author" v-text="author"
/> />
<div <div
class="body-2 text-uppercase grey--text" class="body-2 text-uppercase grey--text"
v-text="handle" v-text="handle"
/> />
<v-avatar <v-avatar
color="grey" color="grey"
size="100" size="100"
> >
<v-img <v-img
:alt="`${author} Testimonial`" :alt="`${author} Testimonial`"
:src="avatar" :src="avatar"
/> />
</v-avatar> </v-avatar>
<div /> <div/>
</v-card> </v-card>
</template> </template>
<script> <script>
export default { export default {
name: 'BaseMaterialTestimony', name: 'BaseMaterialTestimony',
props: { props: {
author: { author: {
type: String, type: String,
default: '' default: ''
}, },
avatar: { avatar: {
type: String, type: String,
default: 'https://demos.creative-tim.com/material-dashboard-pro/assets/img/faces/card-profile1-square.jpg' default: 'https://demos.creative-tim.com/material-dashboard-pro/assets/img/faces/card-profile1-square.jpg'
}, },
blurb: { blurb: {
type: String, type: String,
default: '' default: ''
}, },
handle: { handle: {
type: String, type: String,
default: '' default: ''
}
} }
} }
}
</script> </script>
<style lang="sass"> <style lang="sass">
.v-card--testimony .v-card--testimony
padding-bottom: 72px padding-bottom: 72px
margin-bottom: 64px margin-bottom: 64px
.v-avatar .v-avatar
position: absolute position: absolute
left: calc(50% - 64px) left: calc(50% - 64px)
top: calc(100% - 64px) top: calc(100% - 64px)
</style> </style>

View File

@ -1,8 +1,8 @@
<template> <template>
<v-card <v-card
class="v-card--wizard" class="v-card--wizard"
elevation="12" elevation="12"
max-width="700" max-width="700"
> >
<v-card-title class="justify-center display-2 font-weight-light pt-5"> <v-card-title class="justify-center display-2 font-weight-light pt-5">
Build your profile Build your profile
@ -13,54 +13,54 @@
</div> </div>
<v-tabs <v-tabs
ref="tabs" ref="tabs"
v-model="internalValue" v-model="internalValue"
background-color="green lighten-5" background-color="green lighten-5"
color="white" color="white"
grow grow
slider-size="50" slider-size="50"
> >
<v-tabs-slider <v-tabs-slider
class="mt-1" class="mt-1"
color="success" color="success"
/> />
<v-tab <v-tab
v-for="(item, i) in items" v-for="(item, i) in items"
:key="i" :key="i"
:ripple="false" :disabled="!availableSteps.includes(i)"
:disabled="!availableSteps.includes(i)" :ripple="false"
> >
{{ item }} {{ item }}
</v-tab> </v-tab>
</v-tabs> </v-tabs>
<div class="my-6" /> <div class="my-6"/>
<v-card-text> <v-card-text>
<v-tabs-items v-model="internalValue"> <v-tabs-items v-model="internalValue">
<slot /> <slot/>
</v-tabs-items> </v-tabs-items>
</v-card-text> </v-card-text>
<v-card-actions class="pb-4 pa-4"> <v-card-actions class="pb-4 pa-4">
<v-btn <v-btn
:disabled="internalValue === 0" :disabled="internalValue === 0"
class="white--text" class="white--text"
color="grey darken-2" color="grey darken-2"
min-width="125" min-width="125"
@click="$emit('click:prev')" @click="$emit('click:prev')"
> >
Previous Previous
</v-btn> </v-btn>
<v-spacer /> <v-spacer/>
<v-btn <v-btn
:disabled="!availableSteps.includes(internalValue + 1)" :disabled="!availableSteps.includes(internalValue + 1)"
color="success" color="success"
min-width="100" min-width="100"
@click="$emit('click:next')" @click="$emit('click:next')"
> >
{{ internalValue === items.length - 1 ? 'Finish' : 'Next' }} {{ internalValue === items.length - 1 ? 'Finish' : 'Next' }}
</v-btn> </v-btn>
@ -69,41 +69,41 @@
</template> </template>
<script> <script>
// Mixins // Mixins
import Proxyable from 'vuetify/lib/mixins/proxyable' import Proxyable from 'vuetify/lib/mixins/proxyable'
export default { export default {
name: 'BaseMaterialWizard', name: 'BaseMaterialWizard',
mixins: [Proxyable], mixins: [Proxyable],
props: { props: {
availableSteps: { availableSteps: {
type: Array, type: Array,
default: () => ([]) default: () => ([])
}, },
items: { items: {
type: Array, type: Array,
default: () => ([]) default: () => ([])
}
} }
} }
}
</script> </script>
<style lang="sass"> <style lang="sass">
.v-card--wizard .v-card--wizard
overflow: visible
.v-tabs-bar
height: 56px
padding: 0 8px
.v-slide-group__wrapper
overflow: visible overflow: visible
.v-tabs-bar .v-tabs-slider
height: 56px border-radius: 4px
padding: 0 8px
.v-slide-group__wrapper .v-slide-group__wrapper
overflow: visible contain: initial
.v-tabs-slider
border-radius: 4px
.v-slide-group__wrapper
contain: initial
</style> </style>

View File

@ -4,31 +4,31 @@
{{ subheading }} {{ subheading }}
<template v-if="text"> <template v-if="text">
<span <span
class="subtitle-1" class="subtitle-1"
v-text="text" v-text="text"
/> />
</template> </template>
</h5> </h5>
<div class="pt-2"> <div class="pt-2">
<slot /> <slot/>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
export default { export default {
name: 'Subheading', name: 'Subheading',
props: { props: {
subheading: { subheading: {
type: String, type: String,
default: '' default: ''
}, },
text: { text: {
type: String, type: String,
default: '' default: ''
}
} }
} }
}
</script> </script>

View File

@ -1,22 +1,22 @@
<template> <template>
<section class="mb-12 text-center"> <section class="mb-12 text-center">
<h1 <h1
class="font-weight-light mb-2" class="font-weight-light mb-2"
style="color:#3c4858; font-size:24px" style="color:#3c4858; font-size:24px"
v-text="`Vuetify ${heading}`" v-text="`Vuetify ${heading}`"
/> />
<span <span
class="font-weight-light" class="font-weight-light"
style="font-size: 16px; color: #3c4858" style="font-size: 16px; color: #3c4858"
> >
Please checkout the Please checkout the
<a <a
:href="`https://vuetifyjs.com/${link}`" :href="`https://vuetifyjs.com/${link}`"
rel="noopener" class="secondary--text"
target="_blank" rel="noopener"
class="secondary--text" style="text-decoration:none;"
style="text-decoration:none;" target="_blank"
> >
full documentation full documentation
</a> </a>
@ -25,18 +25,18 @@
</template> </template>
<script> <script>
export default { export default {
name: 'VComponent', name: 'VComponent',
props: { props: {
heading: { heading: {
type: String, type: String,
default: '' default: ''
}, },
link: { link: {
type: String, type: String,
default: '' default: ''
}
} }
} }
}
</script> </script>

View File

@ -5,8 +5,7 @@
<script> <script>
export default { export default {
name: "Dashboard", name: "Dashboard",
components: { components: {},
},
computed: { computed: {
pie() { pie() {
const total = 400; const total = 400;

View File

@ -2,30 +2,30 @@
<v-container> <v-container>
<v-card class="mb-4"> <v-card class="mb-4">
<v-subheader>订阅配置</v-subheader> <v-subheader>订阅配置</v-subheader>
<v-form class="pl-4 pr-4 pb-0" v-model="formState.basicValid"> <v-form v-model="formState.basicValid" class="pl-4 pr-4 pb-0">
<v-text-field <v-text-field
v-model="options.name" v-model="options.name"
class="mt-2"
:rules="validations.nameRules" :rules="validations.nameRules"
required class="mt-2"
clear-icon="clear"
clearable
label="订阅名称" label="订阅名称"
placeholder="填入订阅名称,名称需唯一" placeholder="填入订阅名称,名称需唯一"
clearable required
clear-icon="clear"
/> />
<!--For Subscription--> <!--For Subscription-->
<v-textarea <v-textarea
v-if="!isCollection" v-if="!isCollection"
v-model="options.url" v-model="options.url"
class="mt-2"
rows="2"
:rules="validations.urlRules" :rules="validations.urlRules"
required auto-grow
class="mt-2"
clear-icon="clear"
clearable
label="订阅链接" label="订阅链接"
placeholder="填入机场原始订阅链接" placeholder="填入机场原始订阅链接"
clearable required
auto-grow rows="2"
clear-icon="clear"
/> />
<!--For Collection--> <!--For Collection-->
<v-list <v-list
@ -36,28 +36,28 @@
<v-list-item v-for="sub in availableSubs" :key="sub.name"> <v-list-item v-for="sub in availableSubs" :key="sub.name">
<v-list-item-avatar> <v-list-item-avatar>
<v-icon v-if="!sub.icon" color="teal darken-1">mdi-cloud</v-icon> <v-icon v-if="!sub.icon" color="teal darken-1">mdi-cloud</v-icon>
<v-img :src="sub.icon" v-else :class="getIconClass(sub.icon)"/> <v-img v-else :class="getIconClass(sub.icon)" :src="sub.icon"/>
</v-list-item-avatar> </v-list-item-avatar>
<v-list-item-content> <v-list-item-content>
{{ sub.name }} {{ sub.name }}
</v-list-item-content> </v-list-item-content>
<v-spacer></v-spacer> <v-spacer></v-spacer>
<v-checkbox <v-checkbox
:value="sub.name"
v-model="selected" v-model="selected"
:value="sub.name"
class="pr-1" class="pr-1"
/> />
</v-list-item> </v-list-item>
</v-list> </v-list>
<v-textarea <v-textarea
v-model="options.icon" v-model="options.icon"
auto-grow
class="mt-2" class="mt-2"
rows="2" clear-icon="clear"
clearable
label="图标链接" label="图标链接"
placeholder="填入想要展示的图标链接,可选。" placeholder="填入想要展示的图标链接,可选。"
clearable rows="2"
auto-grow
clear-icon="clear"
/> />
</v-form> </v-form>
<v-card-actions> <v-card-actions>
@ -65,9 +65,9 @@
<v-btn icon @click="save"> <v-btn icon @click="save">
<v-icon>save_alt</v-icon> <v-icon>save_alt</v-icon>
</v-btn> </v-btn>
<v-dialog max-width="400px" v-model="showShareDialog"> <v-dialog v-model="showShareDialog" max-width="400px">
<template #activator="{on}"> <template #activator="{on}">
<v-btn icon v-on="on"> <v-btn v-on="on" icon>
<v-icon>cloud_circle</v-icon> <v-icon>cloud_circle</v-icon>
</v-btn> </v-btn>
</template> </template>
@ -82,16 +82,16 @@
</v-card-title> </v-card-title>
<v-textarea <v-textarea
v-model="imported" v-model="imported"
solo :rules="validations.importRules"
clear-icon="clear"
clearable
label="粘贴配置以导入" label="粘贴配置以导入"
rows="5" rows="5"
clearable solo
clear-icon="clear"
:rules="validations.importRules"
/> />
<v-card-actions> <v-card-actions>
<v-spacer></v-spacer> <v-spacer></v-spacer>
<v-btn text color="primary" @click="importConf">确认</v-btn> <v-btn color="primary" text @click="importConf">确认</v-btn>
<v-btn text @click="showShareDialog = false">取消</v-btn> <v-btn text @click="showShareDialog = false">取消</v-btn>
</v-card-actions> </v-card-actions>
</v-card> </v-card>
@ -105,8 +105,8 @@
<v-item-group> <v-item-group>
<v-radio-group <v-radio-group
v-model="options.useless" v-model="options.useless"
dense
class="mt-0 mb-0" class="mt-0 mb-0"
dense
> >
过滤非法节点 过滤非法节点
<v-row> <v-row>
@ -122,8 +122,8 @@
<v-radio-group <v-radio-group
v-model="options.udp" v-model="options.udp"
dense
class="mt-0 mb-0" class="mt-0 mb-0"
dense
> >
UDP转发 UDP转发
<v-row> <v-row>
@ -141,8 +141,8 @@
<v-radio-group <v-radio-group
v-model="options['skip-cert-verify']" v-model="options['skip-cert-verify']"
dense
class="mt-0 mb-0" class="mt-0 mb-0"
dense
> >
跳过证书验证 跳过证书验证
<v-row> <v-row>
@ -159,8 +159,8 @@
</v-radio-group> </v-radio-group>
<v-radio-group <v-radio-group
v-model="options.tfo" v-model="options.tfo"
dense
class="mt-0 mb-0" class="mt-0 mb-0"
dense
> >
TCP Fast Open TCP Fast Open
<v-row> <v-row>
@ -178,13 +178,13 @@
</v-item-group> </v-item-group>
</v-form> </v-form>
</v-card> </v-card>
<v-card class="mb-4" id="processors"> <v-card id="processors" class="mb-4">
<v-subheader> <v-subheader>
节点操作 节点操作
<v-spacer></v-spacer> <v-spacer></v-spacer>
<v-dialog scrollable v-model="dialog"> <v-dialog v-model="dialog" scrollable>
<template #activator="{on}"> <template #activator="{on}">
<v-btn icon v-on="on"> <v-btn v-on="on" icon>
<v-icon color="primary">add_circle</v-icon> <v-icon color="primary">add_circle</v-icon>
</v-btn> </v-btn>
</template> </template>
@ -192,9 +192,9 @@
<v-card-title>选择节点操作</v-card-title> <v-card-title>选择节点操作</v-card-title>
<v-divider></v-divider> <v-divider></v-divider>
<v-card-text> <v-card-text>
<v-radio-group dense v-model="selectedProcess"> <v-radio-group v-model="selectedProcess" dense>
<v-radio v-for="(k, idx) in Object.keys(availableProcessors)" :label="availableProcessors[k].name" <v-radio v-for="(k, idx) in Object.keys(availableProcessors)" :key="idx"
:key="idx" :value="k"></v-radio> :label="availableProcessors[k].name" :value="k"></v-radio>
</v-radio-group> </v-radio-group>
</v-card-text> </v-card-text>
<v-card-actions> <v-card-actions>
@ -207,14 +207,14 @@
</v-subheader> </v-subheader>
<v-divider></v-divider> <v-divider></v-divider>
<component v-for="p in processors" <component :is="p.component"
:is="p.component" v-for="p in processors"
:key="p.id" :key="p.id"
:args="p.args" :args="p.args"
@dataChanged="dataChanged" @dataChanged="dataChanged"
@deleteProcess="deleteProcess" @deleteProcess="deleteProcess"
@up="moveUp"
@down="moveDown" @down="moveDown"
@up="moveUp"
> >
</component> </component>
</v-card> </v-card>
@ -233,6 +233,7 @@ import FlagOperator from "@/components/FlagOperator";
import ScriptFilter from "@/components/ScriptFilter"; import ScriptFilter from "@/components/ScriptFilter";
import ScriptOperator from "@/components/ScriptOperator"; import ScriptOperator from "@/components/ScriptOperator";
import RegexSortOperator from "@/components/RegexSortOperator"; import RegexSortOperator from "@/components/RegexSortOperator";
import HandleDuplicateOperator from "@/components/HandleDuplicateOperator";
const AVAILABLE_PROCESSORS = { const AVAILABLE_PROCESSORS = {
"Flag Operator": { "Flag Operator": {
@ -267,6 +268,10 @@ const AVAILABLE_PROCESSORS = {
component: "RegexDeleteOperator", component: "RegexDeleteOperator",
name: "删除正则" name: "删除正则"
}, },
"Handle Duplicate Operator": {
component: "HandleDuplicateOperator",
name: "重复节点处理"
},
"Script Filter": { "Script Filter": {
component: "ScriptFilter", component: "ScriptFilter",
name: "脚本过滤器" name: "脚本过滤器"
@ -297,6 +302,7 @@ export default {
RegexDeleteOperator, RegexDeleteOperator,
ScriptFilter, ScriptFilter,
ScriptOperator, ScriptOperator,
HandleDuplicateOperator
}, },
data: function () { data: function () {
return { return {

View File

@ -18,20 +18,20 @@
> >
<v-list-item-avatar> <v-list-item-avatar>
<v-icon v-if="!sub.icon" color="teal darken-1">mdi-cloud</v-icon> <v-icon v-if="!sub.icon" color="teal darken-1">mdi-cloud</v-icon>
<v-img :src="sub.icon" v-else :class="getIconClass(sub.icon)"/> <v-img v-else :class="getIconClass(sub.icon)" :src="sub.icon"/>
</v-list-item-avatar> </v-list-item-avatar>
<v-list-item-content> <v-list-item-content>
<v-list-item-title v-text="sub.name" class="font-weight-medium"></v-list-item-title> <v-list-item-title class="font-weight-medium" v-text="sub.name"></v-list-item-title>
<v-list-item-title v-text="sub.url"></v-list-item-title> <v-list-item-title v-text="sub.url"></v-list-item-title>
</v-list-item-content> </v-list-item-content>
<v-list-item-action> <v-list-item-action>
<v-menu bottom left> <v-menu bottom left>
<template v-slot:activator="{ on, attrs }"> <template v-slot:activator="{ on, attrs }">
<v-btn <v-btn
icon
v-bind="attrs" v-bind="attrs"
v-on="on" v-on="on"
icon
> >
<v-icon>mdi-dots-vertical</v-icon> <v-icon>mdi-dots-vertical</v-icon>
</v-btn> </v-btn>
@ -67,24 +67,24 @@
<v-list-item <v-list-item
v-for="collection in collections" v-for="collection in collections"
:key="collection.name" :key="collection.name"
@click="preview(collection, type='collection')"
dense dense
@click="preview(collection, type='collection')"
> >
<v-list-item-avatar> <v-list-item-avatar>
<v-icon v-if="!collection.icon" color="teal darken-1">mdi-cloud</v-icon> <v-icon v-if="!collection.icon" color="teal darken-1">mdi-cloud</v-icon>
<v-img :src="collection.icon" v-else :class="getIconClass(collection.icon)"/> <v-img v-else :class="getIconClass(collection.icon)" :src="collection.icon"/>
</v-list-item-avatar> </v-list-item-avatar>
<v-list-item-content> <v-list-item-content>
<v-list-item-title v-text="collection.name" class="font-weight-medium"></v-list-item-title> <v-list-item-title class="font-weight-medium" v-text="collection.name"></v-list-item-title>
<v-chip-group <v-chip-group
column column
> >
<v-chip <v-chip
v-for="subs in collection.subscriptions" v-for="subs in collection.subscriptions"
:key="subs" :key="subs"
small
class="ma-2 ml-0 mr-1 pa-2" class="ma-2 ml-0 mr-1 pa-2"
label label
small
> >
{{ subs }} {{ subs }}
</v-chip> </v-chip>
@ -94,9 +94,9 @@
<v-menu bottom left> <v-menu bottom left>
<template v-slot:activator="{ on, attrs }"> <template v-slot:activator="{ on, attrs }">
<v-btn <v-btn
icon
v-bind="attrs" v-bind="attrs"
v-on="on" v-on="on"
icon
> >
<v-icon>mdi-dots-vertical</v-icon> <v-icon>mdi-dots-vertical</v-icon>
</v-btn> </v-btn>
@ -117,7 +117,7 @@
</v-list> </v-list>
</v-card-text> </v-card-text>
</v-card> </v-card>
<v-dialog fullscreen hide-overlay transition="dialog-bottom-transition" v-model="showProxyList" scrollable> <v-dialog v-model="showProxyList" fullscreen hide-overlay scrollable transition="dialog-bottom-transition">
<v-card fluid> <v-card fluid>
<v-toolbar <v-toolbar
class="flex-grow-0" class="flex-grow-0"
@ -135,9 +135,9 @@
</v-toolbar-items> </v-toolbar-items>
<template v-slot:extension> <template v-slot:extension>
<v-tabs <v-tabs
grow
centered
v-model="tab" v-model="tab"
centered
grow
> >
<v-tabs-slider color="primary"/> <v-tabs-slider color="primary"/>
<v-tab <v-tab
@ -158,10 +158,10 @@
v-model="tab" v-model="tab"
> >
<v-tab-item key="raw"> <v-tab-item key="raw">
<proxy-list :url="url" :sub="sub" :raw="true" ref="proxyList" :key="url + 'raw'"></proxy-list> <proxy-list :key="url + 'raw'" ref="proxyList" :raw="true" :sub="sub" :url="url"></proxy-list>
</v-tab-item> </v-tab-item>
<v-tab-item key="processed"> <v-tab-item key="processed">
<proxy-list :url="url" :sub="sub" ref="proxyList" :key="url"></proxy-list> <proxy-list :key="url" ref="proxyList" :sub="sub" :url="url"></proxy-list>
</v-tab-item> </v-tab-item>
</v-tabs-items> </v-tabs-items>
</v-card-text> </v-card-text>
@ -185,7 +185,7 @@ export default {
tab: 1, tab: 1,
editMenu: [ editMenu: [
{ {
title: "复制", title: "链接",
action: "COPY" action: "COPY"
}, },
{ {
@ -197,6 +197,10 @@ export default {
action: "DELETE" action: "DELETE"
}, },
// { // {
// title: "",
// action: "DUPLICATE"
// }
// {
// title: "", // title: "",
// action: "MOVE_UP" // action: "MOVE_UP"
// }, // },
@ -245,7 +249,6 @@ export default {
this.moveUpSubscription(sub.name); this.moveUpSubscription(sub.name);
break break
case 'MOVE_DOWN': case 'MOVE_DOWN':
break break
} }
}, },

View File

@ -6,7 +6,7 @@
数据同步 数据同步
<v-spacer></v-spacer> <v-spacer></v-spacer>
<v-btn icon @click="openGist()"> <v-btn icon @click="openGist()">
<v-icon small color="primary">visibility</v-icon> <v-icon color="primary" small>visibility</v-icon>
</v-btn> </v-btn>
</v-card-title> </v-card-title>
<v-card-text> <v-card-text>
@ -15,20 +15,20 @@
<v-divider></v-divider> <v-divider></v-divider>
<v-card-actions> <v-card-actions>
<v-spacer></v-spacer> <v-spacer></v-spacer>
<v-btn small <v-btn :loading="status.uploading"
:loading="status.uploading"
color="blue-grey"
class="ma-2 white--text" class="ma-2 white--text"
color="blue-grey"
small
@click="sync('upload')"> @click="sync('upload')">
上传 上传
<v-icon right> <v-icon right>
mdi-cloud-upload mdi-cloud-upload
</v-icon> </v-icon>
</v-btn> </v-btn>
<v-btn small <v-btn :loading="status.downloading"
:loading="status.downloading"
color="blue-grey"
class="ma-2 white--text" class="ma-2 white--text"
color="blue-grey"
small
@click="sync('download')"> @click="sync('download')">
恢复 恢复
<v-icon right> <v-icon right>
@ -51,18 +51,18 @@
<v-col> <v-col>
<v-row> <v-row>
<v-text-field <v-text-field
label="GitHub 用户名"
hint="填入GitHub用户名"
v-model="settings.githubUser" v-model="settings.githubUser"
clearable clear-icon="clear" clear-icon="clear"
clearable
hint="填入GitHub用户名" label="GitHub 用户名"
/> />
</v-row> </v-row>
<v-row> <v-row>
<v-text-field <v-text-field
label="GitHub Token"
hint="填入GitHub Token"
v-model="settings.gistToken" v-model="settings.gistToken"
clearable clear-icon="clear" clear-icon="clear"
clearable
hint="填入GitHub Token" label="GitHub Token"
/> />
</v-row> </v-row>
</v-col> </v-col>
@ -75,9 +75,9 @@
</v-list-item-content> </v-list-item-content>
<v-list-item-action> <v-list-item-action>
<v-switch <v-switch
label=""
hide-details
v-model="settings.theme.darkMode" v-model="settings.theme.darkMode"
hide-details
label=""
/> />
</v-list-item-action> </v-list-item-action>
</v-list-item> </v-list-item>
@ -86,7 +86,7 @@
<v-divider></v-divider> <v-divider></v-divider>
<v-card-actions> <v-card-actions>
<v-spacer></v-spacer> <v-spacer></v-spacer>
<v-btn small text @click="save()" color="primary">保存</v-btn> <v-btn color="primary" small text @click="save()">保存</v-btn>
</v-card-actions> </v-card-actions>
</v-card> </v-card>
@ -150,7 +150,7 @@ export default {
const setLoading = (status) => { const setLoading = (status) => {
if (action === 'upload') { if (action === 'upload') {
this.status.uploading = status; this.status.uploading = status;
} else if (action === 'download'){ } else if (action === 'download') {
this.status.downloading = status; this.status.downloading = status;
} }
} }