goodteditor-ui 1.0.72 → 1.0.74
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json
CHANGED
|
@@ -111,12 +111,17 @@ const normalizeRgbaChannels = (rgba) => {
|
|
|
111
111
|
return rgba;
|
|
112
112
|
};
|
|
113
113
|
|
|
114
|
+
export const resolveColorMode = (color) => {
|
|
115
|
+
if (color.startsWith('#')) {
|
|
116
|
+
return MODEL_MODE.HEX;
|
|
117
|
+
}
|
|
118
|
+
return MODEL_MODE.RGBA;
|
|
119
|
+
}
|
|
120
|
+
|
|
114
121
|
export const setColorValue = (color) => {
|
|
115
122
|
let rgba;
|
|
116
|
-
let modelMode = MODEL_MODE.RGBA;
|
|
117
123
|
if (/#/.test(color)) {
|
|
118
124
|
rgba = hex2rgb(color);
|
|
119
|
-
modelMode = MODEL_MODE.HEX;
|
|
120
125
|
} else if (/rgb/.test(color)) {
|
|
121
126
|
rgba = rgb2rgba(color);
|
|
122
127
|
} else if (typeof color === 'string') {
|
|
@@ -137,8 +142,7 @@ export const setColorValue = (color) => {
|
|
|
137
142
|
a: a === undefined ? 1 : a,
|
|
138
143
|
h,
|
|
139
144
|
s,
|
|
140
|
-
v
|
|
141
|
-
modelMode
|
|
145
|
+
v
|
|
142
146
|
};
|
|
143
147
|
};
|
|
144
148
|
|
|
@@ -9,16 +9,14 @@
|
|
|
9
9
|
:hsv="hsv"
|
|
10
10
|
:size="hueHeight"
|
|
11
11
|
@changeSaturation="changeSaturation"
|
|
12
|
-
@selectSaturation="selectSaturation"
|
|
13
|
-
/>
|
|
12
|
+
@selectSaturation="selectSaturation" />
|
|
14
13
|
<cp-hue
|
|
15
14
|
class="mar-left-2"
|
|
16
15
|
ref="hue"
|
|
17
16
|
:hsv="hsv"
|
|
18
17
|
:width="hueWidth"
|
|
19
18
|
:height="hueHeight"
|
|
20
|
-
@selectHue="selectHue"
|
|
21
|
-
/>
|
|
19
|
+
@selectHue="selectHue" />
|
|
22
20
|
<cp-alpha
|
|
23
21
|
class="mar-left-2"
|
|
24
22
|
ref="alpha"
|
|
@@ -26,38 +24,30 @@
|
|
|
26
24
|
:rgba="rgba"
|
|
27
25
|
:width="hueWidth"
|
|
28
26
|
:height="hueHeight"
|
|
29
|
-
@selectAlpha="selectAlpha"
|
|
30
|
-
/>
|
|
27
|
+
@selectAlpha="selectAlpha" />
|
|
31
28
|
</div>
|
|
32
29
|
<cp-preview
|
|
33
30
|
class="mar-top-2"
|
|
34
31
|
:color="previewRgbaString"
|
|
35
32
|
:width="previewWidth"
|
|
36
|
-
:height="previewHeight"
|
|
37
|
-
/>
|
|
33
|
+
:height="previewHeight" />
|
|
38
34
|
<div class="d-flex mar-top-2">
|
|
39
35
|
<input
|
|
40
36
|
class="input input-small text-xsmall flex-grow"
|
|
41
37
|
type="text"
|
|
42
38
|
:value="modelRgba"
|
|
43
39
|
@input="({ target }) => inputRgba(target.value)"
|
|
44
|
-
v-if="modelMode === modelModes.RGBA"
|
|
45
|
-
/>
|
|
40
|
+
v-if="modelMode === modelModes.RGBA" />
|
|
46
41
|
<input
|
|
47
42
|
class="input input-small text-xsmall flex-grow"
|
|
48
43
|
type="text"
|
|
49
44
|
:value="modelHex"
|
|
50
45
|
@input="({ target }) => inputHex(target.value)"
|
|
51
|
-
v-else
|
|
52
|
-
/>
|
|
46
|
+
v-else />
|
|
53
47
|
<div class="btn btn-outline btn-small mar-left-2" @click="toggleModelMode">
|
|
54
48
|
<span class="text-xsmall text-upper">{{ nextModelMode }}</span>
|
|
55
49
|
</div>
|
|
56
|
-
<div
|
|
57
|
-
class="btn btn-outline btn-small mar-left-2"
|
|
58
|
-
@click="submit"
|
|
59
|
-
v-if="showSubmit"
|
|
60
|
-
>
|
|
50
|
+
<div class="btn btn-outline btn-small mar-left-2" @click="submit" v-if="showSubmit">
|
|
61
51
|
<i class="mdi mdi-check"></i>
|
|
62
52
|
</div>
|
|
63
53
|
</div>
|
|
@@ -67,8 +57,7 @@
|
|
|
67
57
|
:colors-default="colorsDefault"
|
|
68
58
|
:colors-history-key="colorsHistoryKey"
|
|
69
59
|
@selectColor="selectColor"
|
|
70
|
-
v-if="colorsDefault.length || colorsHistoryKey"
|
|
71
|
-
/>
|
|
60
|
+
v-if="colorsDefault.length || colorsHistoryKey" />
|
|
72
61
|
</div>
|
|
73
62
|
</div>
|
|
74
63
|
</div>
|
|
@@ -95,7 +84,7 @@
|
|
|
95
84
|
}
|
|
96
85
|
</style>
|
|
97
86
|
<script>
|
|
98
|
-
import { MODEL_MODE, setColorValue, rgb2hex, isValidColorString } from './ColorPicker/utils';
|
|
87
|
+
import { MODEL_MODE, setColorValue, rgb2hex, isValidColorString, resolveColorMode } from './ColorPicker/utils';
|
|
99
88
|
import { Key } from './utils/Helpers';
|
|
100
89
|
import CpSaturation from './ColorPicker/Saturation.vue';
|
|
101
90
|
import CpHue from './ColorPicker/Hue.vue';
|
|
@@ -208,22 +197,10 @@ export default {
|
|
|
208
197
|
watch: {
|
|
209
198
|
value: {
|
|
210
199
|
handler(input, prevInput) {
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
try {
|
|
214
|
-
if (isValidColorString(input) === false) {
|
|
215
|
-
throw new Error('Invalid color value');
|
|
216
|
-
};
|
|
217
|
-
const { modelMode, ...channelsOnly } = setColorValue(input);
|
|
218
|
-
if (prevInput == null) {
|
|
219
|
-
this.modelMode = modelMode;
|
|
220
|
-
}
|
|
221
|
-
channels = channelsOnly;
|
|
222
|
-
} catch(e) {
|
|
223
|
-
console.error(e);
|
|
224
|
-
channels = { ...DefaultChannelValues }
|
|
200
|
+
if (prevInput == null) {
|
|
201
|
+
this.modelMode = resolveColorMode(input);
|
|
225
202
|
}
|
|
226
|
-
|
|
203
|
+
const channels = isValidColorString(input) ? setColorValue(input) : { ...DefaultChannelValues };
|
|
227
204
|
Object.assign(this, channels);
|
|
228
205
|
this.setText();
|
|
229
206
|
},
|
|
@@ -33,7 +33,8 @@
|
|
|
33
33
|
-->
|
|
34
34
|
<slot name="icon" v-bind="{ value, toggle: togglePopover }">
|
|
35
35
|
<div
|
|
36
|
-
class="ui-input-color-picker-icon-preview mar-left-2
|
|
36
|
+
class="ui-input-color-picker-icon-preview mar-left-2"
|
|
37
|
+
:class="[ readonly ? 'events-none': 'cursor-pointer' ]"
|
|
37
38
|
:style="{ ...(isValid && { background: value }) }"
|
|
38
39
|
@click="togglePopover"
|
|
39
40
|
></div>
|
|
@@ -204,8 +205,8 @@ export default {
|
|
|
204
205
|
if (mode === MODEL_MODE.HEX) {
|
|
205
206
|
colorString = value;
|
|
206
207
|
}
|
|
207
|
-
this.changeColor(colorString);
|
|
208
208
|
this.inputColor(colorString);
|
|
209
|
+
this.changeColor(colorString);
|
|
209
210
|
this.onColorPickerClose();
|
|
210
211
|
},
|
|
211
212
|
onInputKeydownLocal(e) {
|