Add vuex & begin to add ColorMode component

components/ColorMode.vue

@@ -0,0 +1,29 @@
+<template>
+    <fieldset class="pa0 ma0 mb5 bn measure center">
+        <legend class="f6 ttu tracked black-30 mb2">Colour Mode</legend>
+
+        <div class="drop-shadow flex items-center pa3 pa4-ns bg-white br1 overflow-hidden">
+            <label
+                v-for="(m, index) in modes"
+                :key="index"
+                class="flex items-center mv2 mr3 lh-solid pointer"
+            >
+                <input v-model="mode" :value="m.toLowerCase()" class="mr2" type="radio" name="mode">
+                <span class="f7 f6-ns tracked">{{ m }}</span>
+            </label>
+        </div>
+    </fieldset>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            modes: ['RGB', 'Lab', 'HSL', 'Lch'],
+        }
+    },
+}
+</script>
+
+<style>
+</style>

package.json

@@ -11,15 +11,16 @@
     "dev": "nuxt",
     "generate": "nuxt generate",
     "lint": "prettier-eslint '**/*.{js,vue}' --write --list-different --ignore '{dist,.nuxt}/**'",
-    "lint:styles": "stylelint --fix",
+    "lint:styles": "stylelint '**/*.{css,vue}' --fix -ip '{.nuxt,dist}/**'",
     "start": "nuxt start"
   },
   "dependencies": {
     "@nuxtjs/google-analytics": "^2.0.0",
     "chroma-js": "^1.3.7",
     "nuxt": "^1.4.2",
     "vue-color": "^2.3.1",
-    "vue-slider-component": "^2.3.9"
+    "vue-slider-component": "^2.3.9",
+    "vuex": "^3.0.1"
   },
   "devDependencies": {
     "@zazen/eslint-config": "^0.3.0",

pages/index.vue

@@ -112,6 +112,7 @@
 </template>
 
 <script>
+import { mapState } from 'vuex'
 // import ColorPicker from 'vue-color/src/components/Chrome.vue'
 import Gradient from '~/components/Gradient.vue'
 
@@ -158,12 +159,15 @@ export default {
         }
     },
 
-    computed: {
-        version: () => process.env.VERSION,
-        rotation: function () {
-            return `rotate(${this.direction} 10 10)`
-        },
-    },
+    computed: mapState([
+        'colorMode',
+    ]),
+    // {
+    //     version: () => process.env.VERSION,
+    //     rotation: function () {
+    //         return `rotate(${this.direction} 10 10)`
+    //     },
+    // },
 }
 </script>
 

store/index.js

@@ -0,0 +1,13 @@
+import Vuex from 'vuex'
+
+const createStore = () => {
+    return new Vuex.Store({
+        state: {
+            version: () => process.env.VERSION,
+            colorMode: 'lab',
+        },
+        mutations: {},
+    })
+}
+
+export default createStore