Blame view
src/pages/ui/Colors.vue
2.56 KB
8ab31dc8b
changes
|
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>
|