fix: tweak color theme related things and do docs for color plugin

vyshnavsdeepak · Apr 13, 2019 · f78b462 · f78b462
1 parent 70e666f
commit f78b462
Show file tree

Hide file tree

Showing 17 changed files with 151 additions and 123 deletions.
diff --git a/src/app/main.js b/src/app/main.js
@@ -6,7 +6,7 @@ import 'babel-polyfill'
 import Vue from 'vue'
 import VeeValidate from 'vee-validate'
 import App from './App'
-import { ColorPlugin } from './../services/colors'
+import { ColorThemePlugin } from '../services/ColorThemePlugin'
 import store from '../store/index'
 import router from '../router/index'
 import VuesticPlugin from '../vuestic-theme/vuestic-plugin'
@@ -17,7 +17,15 @@ import VueClipboard from 'vue-clipboard2'
 Vue.use(VuesticPlugin)
 Vue.use(YmapPlugin)
 Vue.use(VueClipboard)
-Vue.use(ColorPlugin)
+
+Vue.use(ColorThemePlugin,
+  {
+    // Add or change theme colors here
+    themes: {
+      // primary: '#f06595',
+      // blurple: '#7289DA',
+    },
+  })
 
 // NOTE: workaround for VeeValidate + vuetable-2
 Vue.use(VeeValidate, { fieldsBagName: 'formFields' })

diff --git a/src/components/statistics/progress-bars/Widgets/ColorfulBars.vue b/src/components/statistics/progress-bars/Widgets/ColorfulBars.vue
@@ -1,7 +1,7 @@
 <template>
   <va-card
     class="colorful-bars progress-bar-widget"
-    :title="$t('progressBars.colors')"
+    :title="$t('progressBars.ColorThemePlugin.js')"
   >
     <div class="va-row">
       <div v-for="n in 3" :key="n" class="flex md3 xs12">

diff --git a/src/components/ui/buttons/Buttons.vue b/src/components/ui/buttons/Buttons.vue
@@ -78,7 +78,7 @@
       <div class="flex md12">
         <va-card
           class="larger-padding"
-          :title="$t('buttons.colors')"
+          :title="$t('buttons.ColorThemePlugin.js')"
         >
           <div class="va-row">
             <div class="flex">

diff --git a/src/components/ui/color-pickers/ColorPickers.vue b/src/components/ui/color-pickers/ColorPickers.vue
@@ -58,7 +58,7 @@
               <va-color-square :value="simpleColor"/>
             </div>
             <div class="flex md2">
-              <va-pallet-custom :palette="palette" v-model="simpleColor"/>
+              <va-palette-custom :palette="palette" v-model="simpleColor"/>
             </div>
           </div>
         </va-card>
@@ -111,8 +111,8 @@ import VaColorInput
 import VaColorPickerInput
   from '../../../vuestic-theme/vuestic-components/va-color-picker/VaColorPickerInput'
 import { colorArray } from '../../../vuestic-theme/vuestic-components/va-color-picker/VuesticTheme'
-import VaPalletCustom
-  from '../../../vuestic-theme/vuestic-components/va-color-picker/VaPalletCustom'
+import VaPaletteCustom
+  from '../../../vuestic-theme/vuestic-components/va-color-picker/VaPaletteCustom'
 
 export default {
   name: 'color-pickers',
@@ -123,7 +123,7 @@ export default {
     VaColorSquare,
     VaSimplePalettePicker,
     VaColorPickerInput,
-    VaPalletCustom,
+    VaPaletteCustom,
   },
   data () {
     return {

diff --git a/src/components/ui/spinners/Spinners.vue b/src/components/ui/spinners/Spinners.vue
@@ -40,7 +40,7 @@
               </div>
             </div>
             <div class="flex md6 lg4 xs4 spinners__color">
-              <va-pallet-custom
+              <va-palette-custom
                 :palette="paletteArray"
                 v-model="color"
                 class="spinners__color-picker"
@@ -83,8 +83,8 @@
 <script>
 import * as spinners from 'epic-spinners'
 import { mapGetters } from 'vuex'
-import VaPalletCustom
-  from '../../../vuestic-theme/vuestic-components/va-color-picker/VaPalletCustom'
+import VaPaletteCustom
+  from '../../../vuestic-theme/vuestic-components/va-color-picker/VaPaletteCustom'
 import { colorArray } from '../../../vuestic-theme/vuestic-components/va-color-picker/VuesticTheme'
 import VaSlider
   from '../../../vuestic-theme/vuestic-components/va-slider/VaSlider'
@@ -96,7 +96,7 @@ import VaIconSlower
 export default {
   components: {
     ...spinners,
-    VaPalletCustom,
+    VaPaletteCustom,
     VaSlider,
     VaIconFaster,
     VaIconSlower,

diff --git a/src/services/ColorThemePlugin-docs.md b/src/services/ColorThemePlugin-docs.md
@@ -0,0 +1,21 @@
+# ColorThemePlugin
+
+This plugin provides app-wide colors.
+
+You can define your own colors or change existing ones by providing them via plugin options:
+
+```js
+Vue.use(ColorThemePlugin, {themes: {primary: '#f06595', blurple: '#7289DA'}})
+```
+
+And you can use them in component code or template like this:
+
+**Component**
+```js
+this.$themes.primary
+```
+
+**Template**
+```html
+<div :style="{backgroundColor: $themes.blurple}"/>
+```
diff --git a/src/services/ColorThemePlugin.js b/src/services/ColorThemePlugin.js
@@ -0,0 +1,27 @@
+const getDefaultOptions = () => ({
+  themes: {
+    primary: '#40e583',
+    success: '#40e583',
+    info: '#2c82e0',
+    danger: '#e34b4a',
+    warning: '#ffc202',
+    gray: '#babfc2',
+    dark: '#34495e',
+  },
+})
+
+export const ColorThemePlugin = {
+  install (Vue, options) {
+    const defaultOptions = getDefaultOptions()
+
+    if (options && options.themes) {
+      Object.assign(defaultOptions.themes, options.themes)
+    }
+
+    Vue.prototype.$themes = defaultOptions.themes
+
+    /* eslint-disable no-new */
+    // This line is just to make themes reactive
+    new Vue({ data: { themes: Vue.prototype.$themes } })
+  },
+}
diff --git a/src/services/colors.js b/src/services/colors.js
diff --git a/src/vue-book/book-main.js b/src/vue-book/book-main.js
@@ -4,11 +4,11 @@ import BookApp from './BookApp'
 import VueClipboard from 'vue-clipboard2'
 import Router from 'vue-router'
 import { VueBookComponents, createRoute } from 'vue-book'
-import { ColorPlugin } from '../services/colors'
+import { ColorThemePlugin } from '../services/ColorThemePlugin'
 
 Vue.use(Router)
 Vue.use(VueBookComponents)
-Vue.use(ColorPlugin)
+Vue.use(ColorThemePlugin)
 
 const router = new Router({
   routes: [

diff --git a/src/vuestic-theme/vuestic-components/va-button/VaButton.spec.js b/src/vuestic-theme/vuestic-components/va-button/VaButton.spec.js
@@ -2,8 +2,8 @@ import Vue from 'vue'
 import { shallowMount, RouterLinkStub } from '@vue/test-utils'
 import VaButton from './VaButton'
 
-import { ColorPlugin } from './../../../services/colors'
-Vue.use(ColorPlugin)
+import { ColorThemePlugin } from '../../../services/ColorThemePlugin'
+Vue.use(ColorThemePlugin)
 
 describe('VaButton', () => {
   /* 1. Default button */

diff --git a/src/vuestic-theme/vuestic-components/va-checkbox/VaCheckbox.spec.js b/src/vuestic-theme/vuestic-components/va-checkbox/VaCheckbox.spec.js
@@ -2,8 +2,8 @@ import Vue from 'vue'
 import { shallowMount } from '@vue/test-utils'
 import VaCheckbox from './VaCheckbox'
 
-import { ColorPlugin } from './../../../services/colors'
-Vue.use(ColorPlugin)
+import { ColorThemePlugin } from '../../../services/ColorThemePlugin'
+Vue.use(ColorThemePlugin)
 
 describe('VaCheckbox', () => {
   it('default', () => {

diff --git a/src/vuestic-theme/vuestic-components/va-color-picker/VaColorPickerInput.demo.vue b/src/vuestic-theme/vuestic-components/va-color-picker/VaColorPickerInput.demo.vue
@@ -1,31 +1,43 @@
 <template>
-  <div class="demo-container">
-    <div class="demo-container__item">
-      <va-color-picker-input v-model="value" mode="palette"
-                             :palette="palette">
-        <color-dot :color="value"/>
-      </va-color-picker-input>
-      {{ value }}
-    </div>
-    <div class="demo-container__item">
-      <va-color-picker-input v-model="value" mode="slider">
+  <VbDemo>
+    <VbCard title="slider mode">
+      <va-color-picker-input
+        v-model="value"
+        mode="slider"
+      >
         <va-color-square :value="value"/>
       </va-color-picker-input>
       {{ value }}
-    </div>
-    <div class="demo-container__item">
-      <va-color-picker-input v-model="value" mode="advanced">
+    </VbCard>
+
+    <VbCard title="advanced mode">
+      <va-color-picker-input
+        v-model="value"
+        mode="advanced"
+      >
         <va-color-input v-model="value"/>
       </va-color-picker-input>
-    </div>
-    <div class="demo-container__item">
+    </VbCard>
+
+    <VbCard title="palette mode">
       <va-color-picker-input
         v-model="value"
         mode="palette"
         :palette="palette"
       />
-    </div>
-  </div>
+    </VbCard>
+
+    <VbCard title="palette mode with slot">
+      <va-color-picker-input
+        v-model="value"
+        mode="palette"
+        :palette="palette"
+      >
+        <color-dot :color="value"/>
+      </va-color-picker-input>
+      {{ value }}
+    </VbCard>
+  </VbDemo>
 </template>
 
 <script>

diff --git a/src/vuestic-theme/vuestic-components/va-color-picker/VaColorPickerInput.vue b/src/vuestic-theme/vuestic-components/va-color-picker/VaColorPickerInput.vue
@@ -4,17 +4,23 @@
       <va-color-dropdown>
         <div slot="toggle" class="va-color-picker-input__slot">
           <slot>
-            <va-color-input v-model="valueProxy" mode="palette"
-                                 :disabled="disableInput" :selected="selected"/>
+            <va-color-input
+              v-model="valueProxy"
+              mode="palette"
+              :disabled="isInputDisabled"
+              :selected="selected"
+            />
           </slot>
         </div>
         <div class="va-color-picker-input__dropdown">
           <div v-if="this.mode==='advanced'">
             <va-advanced-color-picker v-model="valueProxy"/>
           </div>
           <div v-if="this.mode==='palette'">
-            <va-simple-palette-picker v-model="valueProxy"
-                                           :palette="palette"/>
+            <va-simple-palette-picker
+              v-model="valueProxy"
+              :palette="palette"
+            />
           </div>
           <div v-if="this.mode==='slider'">
             <va-slider-color-picker v-model="valueProxy"/>
@@ -24,8 +30,11 @@
     </div>
     <div v-else>
       <slot>
-        <va-color-input v-model="valueProxy" mode="palette"
-                             :disabled="disableInput"/>
+        <va-color-input
+          v-model="valueProxy"
+          mode="palette"
+          :disabled="isInputDisabled"
+        />
       </slot>
     </div>
   </div>
@@ -74,22 +83,13 @@ export default {
         this.$emit('input', value)
       },
     },
-    disableInput () {
-      if (this.mode === 'palette') {
-        if (this.palette) {
-          return true
-        }
-      }
-      return false
+    isInputDisabled () {
+      return !!(this.mode === 'palette' && this.palette)
     },
   },
   methods: {
     validator (value) {
-      if (typeof (value) !== 'undefined') {
-        return ['palette', 'slider', 'advanced'].includes(value)
-      } else {
-        return false
-      }
+      return ['palette', 'slider', 'advanced'].includes(value)
     },
   },
 }

diff --git a/...s/va-color-picker/VaPalletCustom.demo.vue → .../va-color-picker/VaPaletteCustom.demo.vue b/...s/va-color-picker/VaPalletCustom.demo.vue → .../va-color-picker/VaPaletteCustom.demo.vue
@@ -1,22 +1,22 @@
 <template>
   <div class="demo-container">
     <div class="demo-container__item">
-      <va-pallet-custom :palette="palette" v-model="color"/>
+      <va-palette-custom :palette="palette" v-model="color"/>
     </div>
     <div class="demo-container__item">
-      <va-pallet-custom :palette="palette" v-model="color"/>
+      <va-palette-custom :palette="palette" v-model="color"/>
     </div>
   </div>
 </template>
 
 <script>
-import { colorArray } from './/VuesticTheme'
+import { colorArray } from './VuesticTheme'
 
-import VaPalletCustom from './VaPalletCustom'
+import VaPaletteCustom from './VaPaletteCustom'
 
 export default {
   components: {
-    VaPalletCustom,
+    VaPaletteCustom,
   },
   data () {
     return {