From cb3ca72e9b8e05bb1e30d4774edd814f8bcb3c92 Mon Sep 17 00:00:00 2001 From: Stuart Romanek Date: Mon, 4 Nov 2024 15:35:34 -0500 Subject: [PATCH 01/13] wip --- defaults.js | 1 + modules/@apostrophecms/color-field/index.js | 46 +++ .../ui/apos/components/AposColor.vue | 313 ++++++++++++++++++ .../ui/apos/components/AposInputColor.vue | 89 +++++ .../ui/apos/components/lib/AposColorAlpha.vue | 135 ++++++++ .../components/lib/AposColorCheckerboard.vue | 91 +++++ .../components/lib/AposColorEditableInput.vue | 112 +++++++ .../ui/apos/components/lib/AposColorHue.vue | 199 +++++++++++ .../components/lib/AposColorSaturation.vue | 127 +++++++ .../color-field/ui/apos/logic/AposColor.js | 120 +++++++ .../ui/apos/logic/AposInputColor.js | 0 .../schema/lib/addFieldTypes.js | 20 -- package.json | 3 +- 13 files changed, 1235 insertions(+), 21 deletions(-) create mode 100644 modules/@apostrophecms/color-field/index.js create mode 100644 modules/@apostrophecms/color-field/ui/apos/components/AposColor.vue create mode 100644 modules/@apostrophecms/color-field/ui/apos/components/AposInputColor.vue create mode 100644 modules/@apostrophecms/color-field/ui/apos/components/lib/AposColorAlpha.vue create mode 100644 modules/@apostrophecms/color-field/ui/apos/components/lib/AposColorCheckerboard.vue create mode 100644 modules/@apostrophecms/color-field/ui/apos/components/lib/AposColorEditableInput.vue create mode 100644 modules/@apostrophecms/color-field/ui/apos/components/lib/AposColorHue.vue create mode 100644 modules/@apostrophecms/color-field/ui/apos/components/lib/AposColorSaturation.vue create mode 100644 modules/@apostrophecms/color-field/ui/apos/logic/AposColor.js rename modules/@apostrophecms/{schema => color-field}/ui/apos/logic/AposInputColor.js (100%) diff --git a/defaults.js b/defaults.js index 0312284ca5..4cbefd2f9f 100644 --- a/defaults.js +++ b/defaults.js @@ -44,6 +44,7 @@ module.exports = { '@apostrophecms/rich-text-widget': {}, '@apostrophecms/html-widget': {}, '@apostrophecms/image-widget': {}, + '@apostrophecms/color-field': {}, '@apostrophecms/oembed-field': {}, '@apostrophecms/video-widget': {}, '@apostrophecms/ui': {}, diff --git a/modules/@apostrophecms/color-field/index.js b/modules/@apostrophecms/color-field/index.js new file mode 100644 index 0000000000..25f37c89cc --- /dev/null +++ b/modules/@apostrophecms/color-field/index.js @@ -0,0 +1,46 @@ +const { TinyColor } = require('@ctrl/tinycolor'); +const _ = require('lodash'); + +console.log(TinyColor); + +module.exports = { + options: { + name: 'color', + alias: 'colorFields' + }, + init(self) { + self.name = self.options.name; + self.addFieldType(); + self.enableBrowserData(); + }, + methods(self) { + return { + addFieldType() { + self.apos.schema.addFieldType({ + name: 'color', + async convert(req, field, data, destination) { + destination[field.name] = self.apos.launder.string(data[field.name]); + + if (field.required && (_.isUndefined(destination[field.name]) || !destination[field.name].toString().length)) { + throw self.apos.error('required'); + } + + const test = new TinyColor(destination[field.name]); + if (!test.isValid) { + destination[field.name] = null; + } + }, + isEmpty: function (field, value) { + return !value.length; + } + }); + }, + getBrowserData(req) { + return { + name: self.name, + action: self.action + }; + } + }; + } +}; diff --git a/modules/@apostrophecms/color-field/ui/apos/components/AposColor.vue b/modules/@apostrophecms/color-field/ui/apos/components/AposColor.vue new file mode 100644 index 0000000000..3ebe1d3d75 --- /dev/null +++ b/modules/@apostrophecms/color-field/ui/apos/components/AposColor.vue @@ -0,0 +1,313 @@ + + + + + diff --git a/modules/@apostrophecms/color-field/ui/apos/components/AposInputColor.vue b/modules/@apostrophecms/color-field/ui/apos/components/AposInputColor.vue new file mode 100644 index 0000000000..5e8b3a466e --- /dev/null +++ b/modules/@apostrophecms/color-field/ui/apos/components/AposInputColor.vue @@ -0,0 +1,89 @@ + + + + + + + + diff --git a/modules/@apostrophecms/color-field/ui/apos/components/lib/AposColorAlpha.vue b/modules/@apostrophecms/color-field/ui/apos/components/lib/AposColorAlpha.vue new file mode 100644 index 0000000000..7ceaf5f329 --- /dev/null +++ b/modules/@apostrophecms/color-field/ui/apos/components/lib/AposColorAlpha.vue @@ -0,0 +1,135 @@ + + + + + diff --git a/modules/@apostrophecms/color-field/ui/apos/components/lib/AposColorCheckerboard.vue b/modules/@apostrophecms/color-field/ui/apos/components/lib/AposColorCheckerboard.vue new file mode 100644 index 0000000000..4be30b8b2d --- /dev/null +++ b/modules/@apostrophecms/color-field/ui/apos/components/lib/AposColorCheckerboard.vue @@ -0,0 +1,91 @@ + + + + + diff --git a/modules/@apostrophecms/color-field/ui/apos/components/lib/AposColorEditableInput.vue b/modules/@apostrophecms/color-field/ui/apos/components/lib/AposColorEditableInput.vue new file mode 100644 index 0000000000..2d72341578 --- /dev/null +++ b/modules/@apostrophecms/color-field/ui/apos/components/lib/AposColorEditableInput.vue @@ -0,0 +1,112 @@ + + + + + diff --git a/modules/@apostrophecms/color-field/ui/apos/components/lib/AposColorHue.vue b/modules/@apostrophecms/color-field/ui/apos/components/lib/AposColorHue.vue new file mode 100644 index 0000000000..a4f63248d1 --- /dev/null +++ b/modules/@apostrophecms/color-field/ui/apos/components/lib/AposColorHue.vue @@ -0,0 +1,199 @@ + + + + + diff --git a/modules/@apostrophecms/color-field/ui/apos/components/lib/AposColorSaturation.vue b/modules/@apostrophecms/color-field/ui/apos/components/lib/AposColorSaturation.vue new file mode 100644 index 0000000000..deaa1ab707 --- /dev/null +++ b/modules/@apostrophecms/color-field/ui/apos/components/lib/AposColorSaturation.vue @@ -0,0 +1,127 @@ + + + + + diff --git a/modules/@apostrophecms/color-field/ui/apos/logic/AposColor.js b/modules/@apostrophecms/color-field/ui/apos/logic/AposColor.js new file mode 100644 index 0000000000..5d736f3762 --- /dev/null +++ b/modules/@apostrophecms/color-field/ui/apos/logic/AposColor.js @@ -0,0 +1,120 @@ +import { TinyColor } from '@ctrl/tinycolor'; + +function tinycolor(...args) { + return new TinyColor(...args); +} + +function _colorChange(data, oldHue) { + const alpha = data && data.a; + let color; + + // hsl is better than hex between conversions + if (data && data.hsl) + color = tinycolor(data.hsl); + else if (data && data.hex && data.hex.length > 0) + color = tinycolor(data.hex); + else if (data && data.hsv) + color = tinycolor(data.hsv); + else if (data && data.rgba) + color = tinycolor(data.rgba); + else if (data && data.rgb) + color = tinycolor(data.rgb); + else + color = tinycolor(data); + + if (color && (color._a === undefined || color._a === null)) + color.setAlpha(alpha || color.getAlpha()); + + const hsl = color.toHsl(); + const hsv = color.toHsv(); + + if (hsl.s === 0) + hsv.h = hsl.h = data.h || (data.hsl && data.hsl.h) || oldHue || 0; + + /* --- comment this block to fix #109, may cause #25 again --- */ + // when the hsv.v is less than 0.0164 (base on test) + // because of possible loss of precision + // the result of hue and saturation would be miscalculated + if (hsv.v < 0.0164) { + hsv.h = data.h || (data.hsv && data.hsv.h) || 0; + hsv.s = data.s || (data.hsv && data.hsv.s) || 0; + } + + if (hsl.l < 0.01) { + hsl.h = data.h || (data.hsl && data.hsl.h) || 0; + hsl.s = data.s || (data.hsl && data.hsl.s) || 0; + } + /* ------ */ + + return { + hsl, + hex: color.toHexString().toUpperCase(), + hex8: color.toHex8String().toUpperCase(), + rgba: color.toRgb(), + hsv, + oldHue: data.h || oldHue || hsl.h, + source: data.source, + a: color.getAlpha(), + }; +} + +export default { + model: { + prop: 'modelValue', + event: 'update:modelValue', + }, + props: ['modelValue'], + data() { + return { + val: _colorChange(this.modelValue), + }; + }, + computed: { + colors: { + get() { + return this.val; + }, + set(newVal) { + this.val = newVal; + this.$emit('update:modelValue', newVal); + }, + }, + }, + watch: { + modelValue(newVal) { + this.val = _colorChange(newVal); + }, + }, + methods: { + colorChange(data, oldHue) { + this.oldHue = this.colors.hsl.h; + this.colors = _colorChange(data, oldHue || this.oldHue); + }, + isValidHex(hex) { + return tinycolor(hex).isValid; + }, + simpleCheckForValidColor(data) { + const keysToCheck = ['r', 'g', 'b', 'a', 'h', 's', 'l', 'v']; + let checked = 0; + let passed = 0; + + for (let i = 0; i < keysToCheck.length; i++) { + const letter = keysToCheck[i]; + if (data[letter]) { + checked++; + if (!isNaN(data[letter])) + passed++; + } + } + + if (checked === passed) + return data; + }, + paletteUpperCase(palette) { + return palette.map(c => c.toUpperCase()); + }, + isTransparent(color) { + return tinycolor(color).getAlpha() === 0; + }, + }, +}; diff --git a/modules/@apostrophecms/schema/ui/apos/logic/AposInputColor.js b/modules/@apostrophecms/color-field/ui/apos/logic/AposInputColor.js similarity index 100% rename from modules/@apostrophecms/schema/ui/apos/logic/AposInputColor.js rename to modules/@apostrophecms/color-field/ui/apos/logic/AposInputColor.js diff --git a/modules/@apostrophecms/schema/lib/addFieldTypes.js b/modules/@apostrophecms/schema/lib/addFieldTypes.js index c8530f70a5..65f005d376 100644 --- a/modules/@apostrophecms/schema/lib/addFieldTypes.js +++ b/modules/@apostrophecms/schema/lib/addFieldTypes.js @@ -1,6 +1,5 @@ const _ = require('lodash'); const dayjs = require('dayjs'); -const tinycolor = require('tinycolor2'); const { klona } = require('klona'); const { stripIndents } = require('common-tags'); const joinr = require('./joinr'); @@ -259,25 +258,6 @@ module.exports = (self) => { } }); - self.addFieldType({ - name: 'color', - async convert(req, field, data, destination) { - destination[field.name] = self.apos.launder.string(data[field.name]); - - if (field.required && (_.isUndefined(destination[field.name]) || !destination[field.name].toString().length)) { - throw self.apos.error('required'); - } - - const test = tinycolor(destination[field.name]); - if (!tinycolor(test).isValid()) { - destination[field.name] = null; - } - }, - isEmpty: function (field, value) { - return !value.length; - } - }); - self.addFieldType({ name: 'checkboxes', dynamicChoices: true, diff --git a/package.json b/package.json index 1234a829a4..746a58c440 100644 --- a/package.json +++ b/package.json @@ -35,6 +35,7 @@ "@apostrophecms/emulate-mongo-3-driver": "^1.0.6", "@apostrophecms/vue-material-design-icons": "^1.0.0", "@ckpack/vue-color": "^1.4.1", + "@ctrl/tinycolor": "^4.1.0", "@floating-ui/dom": "^1.5.3", "@opentelemetry/api": "^1.0.4", "@opentelemetry/semantic-conventions": "^1.0.1", @@ -149,4 +150,4 @@ "browserslist": [ "ie >= 10" ] -} \ No newline at end of file +} From 0c700a4d7afc5edfc1c1c74b363e45a2fb92bab0 Mon Sep 17 00:00:00 2001 From: Stuart Romanek Date: Mon, 4 Nov 2024 17:01:59 -0500 Subject: [PATCH 02/13] implementation --- .../ui/apos/components/AposColor.vue | 32 +++-- .../ui/apos/components/AposInputColor.vue | 20 --- .../ui/apos/components/lib/AposColorAlpha.vue | 84 ++++++------ .../components/lib/AposColorCheckerboard.vue | 36 +++--- .../components/lib/AposColorEditableInput.vue | 111 +++++++++------- .../ui/apos/components/lib/AposColorHue.vue | 122 ++++++++++-------- .../components/lib/AposColorSaturation.vue | 35 ++--- .../ui/apos/logic/AposInputColor.js | 12 +- .../AposColor.js => mixins/AposColorMixin.js} | 0 .../ui/apos/components/AposTiptapColor.vue | 10 +- package.json | 1 - 11 files changed, 247 insertions(+), 216 deletions(-) rename modules/@apostrophecms/color-field/ui/apos/{logic/AposColor.js => mixins/AposColorMixin.js} (100%) diff --git a/modules/@apostrophecms/color-field/ui/apos/components/AposColor.vue b/modules/@apostrophecms/color-field/ui/apos/components/AposColor.vue index 3ebe1d3d75..6854d34366 100644 --- a/modules/@apostrophecms/color-field/ui/apos/components/AposColor.vue +++ b/modules/@apostrophecms/color-field/ui/apos/components/AposColor.vue @@ -95,7 +95,7 @@ @@ -203,7 +204,7 @@ export default { display: flex; } -.apos-color__-sliders { +.apos-color__sliders { padding: 4px 0; flex: 1; } @@ -310,4 +311,9 @@ export default { .apos-color--disable-alpha .apos-color__color-wrap { height: 10px; } + +.apos-popover .apos-color { + padding: 0; + box-shadow: none; +} diff --git a/modules/@apostrophecms/color-field/ui/apos/components/AposInputColor.vue b/modules/@apostrophecms/color-field/ui/apos/components/AposInputColor.vue index 5e8b3a466e..7cb849f4d6 100644 --- a/modules/@apostrophecms/color-field/ui/apos/components/AposInputColor.vue +++ b/modules/@apostrophecms/color-field/ui/apos/components/AposInputColor.vue @@ -42,12 +42,8 @@ @@ -70,20 +66,4 @@ export default { color: var(--a-text-primary); } } - - :deep(.apos-popover .apos-color) { - padding: 0; - box-shadow: none; - } - - - diff --git a/modules/@apostrophecms/color-field/ui/apos/components/lib/AposColorAlpha.vue b/modules/@apostrophecms/color-field/ui/apos/components/lib/AposColorAlpha.vue index 7ceaf5f329..cd8ed32989 100644 --- a/modules/@apostrophecms/color-field/ui/apos/components/lib/AposColorAlpha.vue +++ b/modules/@apostrophecms/color-field/ui/apos/components/lib/AposColorAlpha.vue @@ -1,24 +1,53 @@ + + - - diff --git a/modules/@apostrophecms/color-field/ui/apos/components/lib/AposColorHue.vue b/modules/@apostrophecms/color-field/ui/apos/components/lib/AposColorHue.vue index a4f63248d1..e3c8b2b5a5 100644 --- a/modules/@apostrophecms/color-field/ui/apos/components/lib/AposColorHue.vue +++ b/modules/@apostrophecms/color-field/ui/apos/components/lib/AposColorHue.vue @@ -1,18 +1,50 @@ + + - - - - - diff --git a/modules/@apostrophecms/ui/ui/apos/scss/global/_inputs.scss b/modules/@apostrophecms/ui/ui/apos/scss/global/_inputs.scss index 3122f2a80c..3521271473 100644 --- a/modules/@apostrophecms/ui/ui/apos/scss/global/_inputs.scss +++ b/modules/@apostrophecms/ui/ui/apos/scss/global/_inputs.scss @@ -126,7 +126,7 @@ padding: 0; } - .apos-color__info { + .apos-input-color__info { margin-left: 5px; font-size: var(--a-type-small); white-space: nowrap; From d69ae297604350b4a4f02fd893921a59d7991017 Mon Sep 17 00:00:00 2001 From: Stuart Romanek Date: Tue, 12 Nov 2024 11:33:27 -0500 Subject: [PATCH 11/13] changelog --- CHANGELOG.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 5fb3c746f2..6813b2df3a 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -21,6 +21,8 @@ did not actually use any noncompliant cookie names or values, so there was no vu ### Changes * Removes postcss plugin and webpack loader used for breakpoint preview mode. Uses instead the new `postcss-viewport-to-container-toggle` plugin in the webpack config. +* Implement `vue-color` directly in Apostrophe rather than as a dependency +* Switch color handling libraries from `tinycolor2` to `@ctrl/tinycolor` ## 4.9.0 (2024-10-31) From 14d0e1301ceb408180ba467b38823f59b6d66982 Mon Sep 17 00:00:00 2001 From: Stuart Romanek Date: Tue, 12 Nov 2024 11:33:50 -0500 Subject: [PATCH 12/13] changelog --- CHANGELOG.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 6813b2df3a..e3011c68ac 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -22,7 +22,7 @@ did not actually use any noncompliant cookie names or values, so there was no vu * Removes postcss plugin and webpack loader used for breakpoint preview mode. Uses instead the new `postcss-viewport-to-container-toggle` plugin in the webpack config. * Implement `vue-color` directly in Apostrophe rather than as a dependency -* Switch color handling libraries from `tinycolor2` to `@ctrl/tinycolor` +* Switch color handling library from `tinycolor2` to `@ctrl/tinycolor` ## 4.9.0 (2024-10-31) From 666c260ae415cc8bf61c20b82a1cd0d78f95c4c9 Mon Sep 17 00:00:00 2001 From: Stuart Romanek Date: Tue, 12 Nov 2024 15:10:09 -0500 Subject: [PATCH 13/13] lint --- .../ui/apos/components/AposColor.vue | 63 +++++++++---------- .../ui/apos/lib/AposColorAlpha.vue | 36 +++++------ .../ui/apos/lib/AposColorCheckerboard.vue | 5 +- .../ui/apos/lib/AposColorEditableInput.vue | 2 + .../color-field/ui/apos/lib/AposColorHue.vue | 26 ++++---- .../ui/apos/lib/AposColorSaturation.vue | 16 ++--- .../ui/apos/mixins/AposColorMixin.js | 45 +++++++------ 7 files changed, 96 insertions(+), 97 deletions(-) diff --git a/modules/@apostrophecms/color-field/ui/apos/components/AposColor.vue b/modules/@apostrophecms/color-field/ui/apos/components/AposColor.vue index 0f480a554a..b9614a7f42 100644 --- a/modules/@apostrophecms/color-field/ui/apos/components/AposColor.vue +++ b/modules/@apostrophecms/color-field/ui/apos/components/AposColor.vue @@ -182,22 +182,22 @@ export default { }; - diff --git a/modules/@apostrophecms/color-field/ui/apos/lib/AposColorCheckerboard.vue b/modules/@apostrophecms/color-field/ui/apos/lib/AposColorCheckerboard.vue index 0c534196fc..4db27e8c37 100644 --- a/modules/@apostrophecms/color-field/ui/apos/lib/AposColorCheckerboard.vue +++ b/modules/@apostrophecms/color-field/ui/apos/lib/AposColorCheckerboard.vue @@ -84,10 +84,7 @@ function getCheckboard(c1, c2, size) { diff --git a/modules/@apostrophecms/color-field/ui/apos/lib/AposColorEditableInput.vue b/modules/@apostrophecms/color-field/ui/apos/lib/AposColorEditableInput.vue index d9d882b66e..7ac0dfe94b 100644 --- a/modules/@apostrophecms/color-field/ui/apos/lib/AposColorEditableInput.vue +++ b/modules/@apostrophecms/color-field/ui/apos/lib/AposColorEditableInput.vue @@ -122,11 +122,13 @@ export default { .apos-color__editable-input { position: relative; } + .apos-color__input { padding: 0; border: 0; outline: none; } + .apos-color__label { text-transform: capitalize; } diff --git a/modules/@apostrophecms/color-field/ui/apos/lib/AposColorHue.vue b/modules/@apostrophecms/color-field/ui/apos/lib/AposColorHue.vue index e3c8b2b5a5..eb3245aac6 100644 --- a/modules/@apostrophecms/color-field/ui/apos/lib/AposColorHue.vue +++ b/modules/@apostrophecms/color-field/ui/apos/lib/AposColorHue.vue @@ -173,39 +173,41 @@ export default { }; - diff --git a/modules/@apostrophecms/color-field/ui/apos/lib/AposColorSaturation.vue b/modules/@apostrophecms/color-field/ui/apos/lib/AposColorSaturation.vue index d23e965399..9383f41baf 100644 --- a/modules/@apostrophecms/color-field/ui/apos/lib/AposColorSaturation.vue +++ b/modules/@apostrophecms/color-field/ui/apos/lib/AposColorSaturation.vue @@ -99,29 +99,29 @@ export default { .apos-color__saturation, .apos-color__saturation-white, .apos-color__saturation-black { - cursor: pointer; position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; + inset: 0; + cursor: pointer; } .apos-color__saturation-white { - background: linear-gradient(to right, #fff, rgba(255,255,255,0)); + background: linear-gradient(to right, #fff, rgb(255 255 255 / 0%)); } + .apos-color__saturation-black { - background: linear-gradient(to top, #000, rgba(0,0,0,0)); + background: linear-gradient(to top, #000, rgb(0 0 0 / 0%)); } + .apos-color__saturation-pointer { cursor: pointer; position: absolute; } + .apos-color__saturation-circle { cursor: head; width: 4px; height: 4px; - box-shadow: 0 0 0 1.5px #fff, inset 0 0 1px 1px rgba(0,0,0,.3), 0 0 1px 2px rgba(0,0,0,.4); + box-shadow: 0 0 0 1.5px #fff, inset 0 0 1px 1px rgb(0 0 0 / 30%), 0 0 1px 2px rgb(0 0 0 / 40%); border-radius: 50%; transform: translate(-2px, -2px); } diff --git a/modules/@apostrophecms/color-field/ui/apos/mixins/AposColorMixin.js b/modules/@apostrophecms/color-field/ui/apos/mixins/AposColorMixin.js index 5d736f3762..06c977f11b 100644 --- a/modules/@apostrophecms/color-field/ui/apos/mixins/AposColorMixin.js +++ b/modules/@apostrophecms/color-field/ui/apos/mixins/AposColorMixin.js @@ -9,27 +9,30 @@ function _colorChange(data, oldHue) { let color; // hsl is better than hex between conversions - if (data && data.hsl) + if (data && data.hsl) { color = tinycolor(data.hsl); - else if (data && data.hex && data.hex.length > 0) + } else if (data && data.hex && data.hex.length > 0) { color = tinycolor(data.hex); - else if (data && data.hsv) + } else if (data && data.hsv) { color = tinycolor(data.hsv); - else if (data && data.rgba) + } else if (data && data.rgba) { color = tinycolor(data.rgba); - else if (data && data.rgb) + } else if (data && data.rgb) { color = tinycolor(data.rgb); - else + } else { color = tinycolor(data); + } - if (color && (color._a === undefined || color._a === null)) + if (color && (color._a === undefined || color._a === null)) { color.setAlpha(alpha || color.getAlpha()); + } const hsl = color.toHsl(); const hsv = color.toHsv(); - if (hsl.s === 0) + if (hsl.s === 0) { hsv.h = hsl.h = data.h || (data.hsl && data.hsl.h) || oldHue || 0; + } /* --- comment this block to fix #109, may cause #25 again --- */ // when the hsv.v is less than 0.0164 (base on test) @@ -54,19 +57,19 @@ function _colorChange(data, oldHue) { hsv, oldHue: data.h || oldHue || hsl.h, source: data.source, - a: color.getAlpha(), + a: color.getAlpha() }; } export default { model: { prop: 'modelValue', - event: 'update:modelValue', + event: 'update:modelValue' }, - props: ['modelValue'], + props: [ 'modelValue' ], data() { return { - val: _colorChange(this.modelValue), + val: _colorChange(this.modelValue) }; }, computed: { @@ -77,13 +80,13 @@ export default { set(newVal) { this.val = newVal; this.$emit('update:modelValue', newVal); - }, - }, + } + } }, watch: { modelValue(newVal) { this.val = _colorChange(newVal); - }, + } }, methods: { colorChange(data, oldHue) { @@ -94,7 +97,7 @@ export default { return tinycolor(hex).isValid; }, simpleCheckForValidColor(data) { - const keysToCheck = ['r', 'g', 'b', 'a', 'h', 's', 'l', 'v']; + const keysToCheck = [ 'r', 'g', 'b', 'a', 'h', 's', 'l', 'v' ]; let checked = 0; let passed = 0; @@ -102,19 +105,21 @@ export default { const letter = keysToCheck[i]; if (data[letter]) { checked++; - if (!isNaN(data[letter])) + if (!isNaN(data[letter])) { passed++; + } } } - if (checked === passed) + if (checked === passed) { return data; + } }, paletteUpperCase(palette) { return palette.map(c => c.toUpperCase()); }, isTransparent(color) { return tinycolor(color).getAlpha() === 0; - }, - }, + } + } };