From f78b462f8debeb00edb804f0d5f562be04e98bb7 Mon Sep 17 00:00:00 2001
From: Asva <ontrew@gmail.com>
Date: Sun, 14 Apr 2019 01:11:49 +0300
Subject: [PATCH] fix: tweak color theme related things and do docs for color
 plugin

---
 src/app/main.js                               | 12 ++++-
 .../progress-bars/Widgets/ColorfulBars.vue    |  2 +-
 src/components/ui/buttons/Buttons.vue         |  2 +-
 .../ui/color-pickers/ColorPickers.vue         |  8 ++--
 src/components/ui/spinners/Spinners.vue       |  8 ++--
 src/services/ColorThemePlugin-docs.md         | 21 +++++++++
 src/services/ColorThemePlugin.js              | 27 +++++++++++
 src/services/colors.js                        | 23 ----------
 src/vue-book/book-main.js                     |  4 +-
 .../va-button/VaButton.spec.js                |  4 +-
 .../va-checkbox/VaCheckbox.spec.js            |  4 +-
 .../VaColorPickerInput.demo.vue               | 46 ++++++++++++-------
 .../va-color-picker/VaColorPickerInput.vue    | 36 +++++++--------
 ...stom.demo.vue => VaPaletteCustom.demo.vue} | 10 ++--
 ...VaPalletCustom.vue => VaPaletteCustom.vue} | 18 +++-----
 .../VaSimplePalettePicker.demo.vue            |  4 +-
 .../vuestic-sass/global/color-themes.demo.vue | 45 +++++++-----------
 17 files changed, 151 insertions(+), 123 deletions(-)
 create mode 100644 src/services/ColorThemePlugin-docs.md
 create mode 100644 src/services/ColorThemePlugin.js
 delete mode 100644 src/services/colors.js
 rename src/vuestic-theme/vuestic-components/va-color-picker/{VaPalletCustom.demo.vue => VaPaletteCustom.demo.vue} (59%)
 rename src/vuestic-theme/vuestic-components/va-color-picker/{VaPalletCustom.vue => VaPaletteCustom.vue} (75%)

diff --git a/src/app/main.js b/src/app/main.js
index 217d271ce..ad376c11d 100644
--- 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
index 4cb159e8b..8c5903d06 100644
--- 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
index aaa4345e5..65cade08b 100644
--- 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
index 683d61843..a80d63a52 100644
--- 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
index 60da7a626..1640699ce 100644
--- 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
new file mode 100644
index 000000000..65f386cfd
--- /dev/null
+++ 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
new file mode 100644
index 000000000..1b154085f
--- /dev/null
+++ 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
deleted file mode 100644
index e01d295d4..000000000
--- a/src/services/colors.js
+++ /dev/null
@@ -1,23 +0,0 @@
-const themes = {
-  primary: '#40e583',
-  success: '#40e583',
-  info: '#2c82e0',
-  danger: '#e34b4a',
-  warning: '#ffc202',
-  gray: '#babfc2',
-  dark: '#34495e',
-}
-
-export const ColorPlugin = {
-  install (Vue, options) {
-    if (options && options.theme) {
-      Object.assign(Vue.prototype.$themes, options.theme)
-    } else {
-      Vue.prototype.$themes = themes
-    }
-
-    /* eslint-disable no-new */
-
-    new Vue({ data: { themes: Vue.prototype.$themes } })
-  },
-}
diff --git a/src/vue-book/book-main.js b/src/vue-book/book-main.js
index 11ddffc1c..1b8208fa7 100644
--- 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
index a85786e42..e445cfbe0 100644
--- 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
index 76c796b64..4a31263c7 100644
--- 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
index 9bf193ea0..b7d0eb792 100644
--- 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
index 0fa7b7d14..8bb15e668 100644
--- a/src/vuestic-theme/vuestic-components/va-color-picker/VaColorPickerInput.vue
+++ b/src/vuestic-theme/vuestic-components/va-color-picker/VaColorPickerInput.vue
@@ -4,8 +4,12 @@
       <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">
@@ -13,8 +17,10 @@
             <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/src/vuestic-theme/vuestic-components/va-color-picker/VaPalletCustom.demo.vue b/src/vuestic-theme/vuestic-components/va-color-picker/VaPaletteCustom.demo.vue
similarity index 59%
rename from src/vuestic-theme/vuestic-components/va-color-picker/VaPalletCustom.demo.vue
rename to src/vuestic-theme/vuestic-components/va-color-picker/VaPaletteCustom.demo.vue
index 627001b52..04edbbb30 100644
--- a/src/vuestic-theme/vuestic-components/va-color-picker/VaPalletCustom.demo.vue
+++ b/src/vuestic-theme/vuestic-components/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 {
diff --git a/src/vuestic-theme/vuestic-components/va-color-picker/VaPalletCustom.vue b/src/vuestic-theme/vuestic-components/va-color-picker/VaPaletteCustom.vue
similarity index 75%
rename from src/vuestic-theme/vuestic-components/va-color-picker/VaPalletCustom.vue
rename to src/vuestic-theme/vuestic-components/va-color-picker/VaPaletteCustom.vue
index a4fd4f494..17e57ff6d 100644
--- a/src/vuestic-theme/vuestic-components/va-color-picker/VaPalletCustom.vue
+++ b/src/vuestic-theme/vuestic-components/va-color-picker/VaPaletteCustom.vue
@@ -1,12 +1,12 @@
 <template>
-  <div class="va-pallet-custom">
+  <div class="va-palette-custom">
     <va-simple-palette-picker
-      class="va-pallet-custom__palette mr-2"
+      class="va-palette-custom__palette mr-2"
       :palette="palette"
       v-model="valueProxy"
     />
     <va-color-picker-input
-      class="va-pallet-custom__input"
+      class="va-palette-custom__input"
       mode="advanced"
       v-model="valueProxy"
     >
@@ -25,7 +25,7 @@ import VaSimplePalettePicker from './VaSimplePalettePicker'
 import VaColorInput from './VaColorInput'
 
 export default {
-  name: 'va-pallet-custom',
+  name: 'va-palette-custom',
   components: {
     VaColorInput,
     VaColorPickerInput,
@@ -50,20 +50,14 @@ export default {
       },
     },
     dotIsSelected () {
-      if (this.value !== '') {
-        if (this.palette.includes(this.value)) {
-          return false
-        } else {
-          return true
-        }
-      }
+      return this.palette.includes(this.value)
     },
   },
 }
 </script>
 
 <style lang="scss">
-.va-pallet-custom {
+.va-palette-custom {
   display: flex;
 
   &__input {
diff --git a/src/vuestic-theme/vuestic-components/va-color-picker/VaSimplePalettePicker.demo.vue b/src/vuestic-theme/vuestic-components/va-color-picker/VaSimplePalettePicker.demo.vue
index 70705f99d..64e65d02f 100644
--- a/src/vuestic-theme/vuestic-components/va-color-picker/VaSimplePalettePicker.demo.vue
+++ b/src/vuestic-theme/vuestic-components/va-color-picker/VaSimplePalettePicker.demo.vue
@@ -17,12 +17,12 @@
 <script>
 import VaSimplePalettePicker from './VaSimplePalettePicker'
 import { colorArray } from './VuesticTheme'
-import VaPalletCustom from './VaPalletCustom'
+import VaPaletteCustom from './VaPaletteCustom'
 
 export default {
   components: {
     VaSimplePalettePicker,
-    VaPalletCustom,
+    VaPaletteCustom,
   },
   data () {
     return {
diff --git a/src/vuestic-theme/vuestic-sass/global/color-themes.demo.vue b/src/vuestic-theme/vuestic-sass/global/color-themes.demo.vue
index 5e64174cf..1dd12dd31 100644
--- a/src/vuestic-theme/vuestic-sass/global/color-themes.demo.vue
+++ b/src/vuestic-theme/vuestic-sass/global/color-themes.demo.vue
@@ -1,6 +1,6 @@
 <template>
   <VbDemo>
-    <VbCard>
+    <VbCard title="All of these share `info` theme">
       <va-button class="mb-5" color="info">
         Default Button
       </va-button>
@@ -10,52 +10,41 @@
       </va-notification>
       <va-progress-bar class="mb-5" indeterminate color="info"/>
       <va-slider
-        v-model="value"
+        :value="60"
         value-visible
         label="Label"
         color="info"
         icon-right="fa fa-volume-up"
       />
+      {{$themes.blurple}}
+      <va-button class="mb-5" color="blurple">
+        Default Button
+      </va-button>
     </VbCard>
-    <VbCard>
-      <va-pallet-custom
-        :palette="paletteArray"
-        v-model="color"
-        @input="changeTheme()"
-        class="spinners__color-picker"
-      />
+    <VbCard title="Change `info` color">
+      <va-color-picker-input v-model="$themes.info" mode="advanced"/>
     </VbCard>
   </VbDemo>
 </template>
 
 <script>
-import VaIcon from './../../vuestic-components/va-icon/VaIcon'
 import VaButton from './../../vuestic-components/va-button/VaButton'
 import VaNotification
   from './../../vuestic-components/va-notification/VaNotification'
 import VaProgressBar
   from './../../vuestic-components/va-progress-bar/progress-types/VaProgressBar'
-import VaPalletCustom
-  from '../../vuestic-components/va-color-picker/VaPalletCustom'
-import { colorArray } from '../../vuestic-components/va-color-picker/VuesticTheme'
+import VaPaletteCustom
+  from '../../vuestic-components/va-color-picker/VaPaletteCustom'
+import VaColorPickerInput
+  from '../../vuestic-components/va-color-picker/VaColorPickerInput'
 
 export default {
   components: {
-    VaIcon, VaButton, VaNotification, VaProgressBar, VaPalletCustom,
-  },
-  data () {
-    return {
-      value: 60,
-      icon: 'iconicstroke iconicstroke-info',
-      color: '#4AE387',
-      theme: 'info',
-      paletteArray: colorArray,
-    }
-  },
-  methods: {
-    changeTheme () {
-      this.$themes.info = this.color
-    },
+    VaColorPickerInput,
+    VaButton,
+    VaNotification,
+    VaProgressBar,
+    VaPaletteCustom,
   },
 }
 </script>