Create ColorPicker Vue component
MODIFY
package.json
package.json
"production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
},
"devDependencies": {
+ "axios": "^0.17.0",
"cross-env": "^5.0.1",
"laravel-mix": "^1.0",
"lodash": "^4.17.4",
- "vue": "^2.5.3",
- "axios": "^0.17.0"
+ "vue": "^2.5.3"
+ },
+ "dependencies": {
+ "vue-color": "^2.7.0"
}
}

MODIFY
resources/assets/js/app.js
resources/assets/js/app.js
@@ -2,12 +2,15 @@ window.axios = require('axios')
window.Vue = require('vue')
+Vue.component('sketch-picker', require('vue-color').Sketch)
+
Vue.component('datepicker', require('./components/DatePicker.vue'))
Vue.component('barchart', require('./components/BarChart.vue'))
Vue.component('dropdown', require('./components/Dropdown.vue'))
Vue.component('transaction-wizard', require('./components/TransactionWizard.vue'))
Vue.component('validation-error', require('./components/ValidationError.vue'))
Vue.component('searchable', require('./components/Searchable.vue'))
+Vue.component('color-picker', require('./components/ColorPicker.vue'))
Vue.directive('click-outside', {
bind: function (e, binding, vnode) {

ADD
resources/assets/js/components/ColorPicker.vue
+<template>
+ <div>
+ <input type="hidden" name="color" :value="colorWithoutHashtag" />
+ <sketch-picker v-model="color" disable-alpha="true"></sketch-picker>
+ </div>
+</template>
+
+<script>
+ export default {
+ props: ['initialColor'],
+
+ data() {
+ return {
+ color: {
+ hex: this.initialColor
+ }
+ }
+ },
+
+ computed: {
+ colorWithoutHashtag() {
+ let color = this.color.hex
+
+ if (color.charAt(0) == '#') {
+ color = color.substring(1)
+ }
+
+ return color
+ }
+ }
+ }
+</script>

MODIFY
resources/views/tags/edit.blade.php
resources/views/tags/edit.blade.php
</div>
<div class="input input--small mb-0">
<label>{{ __('fields.color') }}</label>
- <input type="text" name="color" value="{{ $tag->color }}" />
+ <color-picker initial-color="{{ $tag->color }}"></color-picker>
@include('partials.validation_error', ['payload' => 'color'])
</div>
</div>

MODIFY
yarn.lock
yarn.lock
@@ -1487,6 +1487,11 @@ cipher-base@^1.0.0, cipher-base@^1.0.1, cipher-base@^1.0.3:
inherits "^2.0.1"
safe-buffer "^5.0.1"
+clamp@^1.0.1:
+ version "1.0.1"
+ resolved "https://registry.yarnpkg.com/clamp/-/clamp-1.0.1.tgz#66a0e64011816e37196828fdc8c8c147312c8634"
+ integrity sha1-ZqDmQBGBbjcZaCj9yMjBRzEshjQ=
+
clap@^1.0.9:
version "1.2.3"
resolved "https://registry.yarnpkg.com/clap/-/clap-1.2.3.tgz#4f36745b32008492557f46412d66d50cb99bce51"
@@ -4933,6 +4938,11 @@ lodash.templatesettings@^3.0.0:
lodash._reinterpolate "^3.0.0"
lodash.escape "^3.0.0"
+lodash.throttle@^4.0.0:
+ version "4.1.1"
+ resolved "https://registry.yarnpkg.com/lodash.throttle/-/lodash.throttle-4.1.1.tgz#c23e91b710242ac70c37f1e1cda9274cc39bf2f4"
+ integrity sha1-wj6RtxAkKscMN/HhzaknTMOb8vQ=
+
lodash.uniq@^4.5.0:
version "4.5.0"
resolved "https://registry.yarnpkg.com/lodash.uniq/-/lodash.uniq-4.5.0.tgz#d0225373aeb652adc1bc82e4945339a842754773"
@@ -5028,6 +5038,11 @@ map-visit@^1.0.0:
dependencies:
object-visit "^1.0.0"
+material-colors@^1.0.0:
+ version "1.2.6"
+ resolved "https://registry.yarnpkg.com/material-colors/-/material-colors-1.2.6.tgz#6d1958871126992ceecc72f4bcc4d8f010865f46"
+ integrity sha512-6qE4B9deFBIa9YSpOc9O0Sgc43zTeVYbgDT5veRKSlB2+ZuHNoVVxA1L/ckMUayV9Ay9y7Z/SZCLcGteW9i7bg==
+
math-expression-evaluator@^1.2.14:
version "1.2.17"
resolved "https://registry.yarnpkg.com/math-expression-evaluator/-/math-expression-evaluator-1.2.17.tgz#de819fdbcd84dccd8fae59c6aeb79615b9d266ac"
@@ -7755,6 +7770,11 @@ timers-browserify@^2.0.4:
dependencies:
setimmediate "^1.0.4"
+tinycolor2@^1.1.2:
+ version "1.4.1"
+ resolved "https://registry.yarnpkg.com/tinycolor2/-/tinycolor2-1.4.1.tgz#f4fad333447bc0b07d4dc8e9209d8f39a8ac77e8"
+ integrity sha1-9PrTM0R7wLB9TcjpIJ2POaisd+g=
+
to-absolute-glob@^0.1.1:
version "0.1.1"
resolved "https://registry.yarnpkg.com/to-absolute-glob/-/to-absolute-glob-0.1.1.tgz#1cdfa472a9ef50c239ee66999b662ca0eb39937f"
@@ -8201,6 +8221,16 @@ vm-browserify@0.0.4:
dependencies:
indexof "0.0.1"
+vue-color@^2.7.0:
+ version "2.7.0"
+ resolved "https://registry.yarnpkg.com/vue-color/-/vue-color-2.7.0.tgz#31e898370a5786fd6c3007388cb7242db6ba6988"
+ integrity sha512-fak9oPRL3BsYtakTGmWIS2yNRppRYNlMgGGq78CMH34ipU8fLgi/bT9JiSPcscpdTNLGracuOFuZ8OFeml+SQQ==
+ dependencies:
+ clamp "^1.0.1"
+ lodash.throttle "^4.0.0"
+ material-colors "^1.0.0"
+ tinycolor2 "^1.1.2"
+
vue-hot-reload-api@^2.2.0:
version "2.3.1"
resolved "https://registry.yarnpkg.com/vue-hot-reload-api/-/vue-hot-reload-api-2.3.1.tgz#b2d3d95402a811602380783ea4f566eb875569a2"

Create ColorPicker Vue component