Colors.vue
2.56 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
<template>
<v-container id="page-colors" fluid grid-list-xl>
<v-layout row wrap>
<v-flex class="mb-3" xs12>
<v-text-field prepend-icon="filter_list" solo="solo" label="Search Materil Colors" single-line="single-line" v-model="search"></v-text-field>
</v-flex>
<v-flex xs12 sm6 md4 v-for="(color, key) in computedColors" :key="key">
<v-card :color="key" tile="tile">
<v-card-text>
<h3 class="white--text">{{ key }}</h3>
</v-card-text>
</v-card>
<v-card v-for="(subColor, key2) in color" :color="`${key} ${convertToClass(key2)}`" :class="getColorClass(key2)" :key="key2" tile="tile">
<v-card-text>
<v-layout>
<v-flex class="caption" xs8="xs8"><span v-if="key !== 'shades'">{{ key }} </span><span v-if="key2 !== 'base'">{{ key2.replace(/(.*)(\d)/, '$1-$2') }}</span></v-flex>
<v-flex class="text-xs-right" xs4="xs4"><span v-if="subColor !== 'transparent'">{{ subColor.toUpperCase() }}</span></v-flex>
</v-layout>
</v-card-text>
</v-card>
</v-flex>
</v-layout>
</v-container>
</template>
<script>
import colors from 'vuetify/es5/util/colors';
import Util from '@/util';
export default {
data: () => ({
colors,
search: ''
}),
computed: {
computedColors () {
const colors = {};
const search = this.search.toLowerCase();
Object.keys(this.colors).forEach(key => {
const kebabKey = Util.kebab(key).toLowerCase();
if (kebabKey.indexOf(search) > -1) {
colors[kebabKey] = this.colors[key];
}
});
return colors;
}
},
methods: {
endStr (str) {
return str[str.length - 1];
},
convertToClass (str) {
const end = this.endStr(str);
const sub = str.substr(0, str.length - 1);
if (isNaN(parseInt(end, 10))) return str;
return `${sub}-${end}`;
},
getColorClass (key) {
if (['white', 'transparent'].includes(key) ||
key.indexOf('light') > -1 ||
key.indexOf('accent') > -1
) return 'black--text';
return 'white--text';
}
}
};
</script>
<style lang="stylus">
#colors-page
.flex
margin: 1rem 0
.card
color: #fff
font-weight: 500
letter-spacing: .5px
padding: 1rem
border-radius: 0
.card__text
h3
color: #fff
align-self: flex-start
font-size: 1.5rem
margin: 0
.card__text
padding: 0
</style>