feat: native color picker instead of verte
Prepare for vue 3
This commit is contained in:
Dominik Pschenitschni
parent
0c678b6e44
commit
4ee7a8bac6
4 changed files with 82 additions and 58 deletions
|
|
@ -27,7 +27,6 @@
|
|||
"register-service-worker": "1.7.2",
|
||||
"snake-case": "3.0.4",
|
||||
"ufo": "0.7.9",
|
||||
"verte": "0.0.12",
|
||||
"vue": "2.6.14",
|
||||
"vue-advanced-cropper": "1.8.2",
|
||||
"vue-drag-resize": "1.5.4",
|
||||
|
|
|
|||
|
|
@ -1,31 +1,46 @@
|
|||
<template>
|
||||
<div class="color-picker-container">
|
||||
<verte
|
||||
:showHistory="true"
|
||||
:colorHistory="[
|
||||
'#1973ff',
|
||||
'#7F23FF',
|
||||
'#ff4136',
|
||||
'#ff851b',
|
||||
'#ffeb10',
|
||||
'#00db60',
|
||||
]"
|
||||
:enableAlpha="false"
|
||||
:menuPosition="menuPosition"
|
||||
:rgbSliders="true"
|
||||
model="hex"
|
||||
picker="square"
|
||||
v-model="color"
|
||||
:class="{'is-empty': empty}"
|
||||
/>
|
||||
<x-button @click="reset" class="is-small ml-2" :shadow="false" type="secondary">
|
||||
<datalist :id="colorListID">
|
||||
<option v-for="color in defaultColors" :key="color" :value="color" />
|
||||
</datalist>
|
||||
|
||||
<div class="picker">
|
||||
<input
|
||||
class="picker__input"
|
||||
type="color"
|
||||
v-model="color"
|
||||
:list="colorListID"
|
||||
:class="{'is-empty': isEmpty}"
|
||||
/>
|
||||
<svg class="picker__pattern" v-show="isEmpty" viewBox="0 0 22 22" fill="fff">
|
||||
<pattern id="checker" width="11" height="11" patternUnits="userSpaceOnUse" fill="FFF">
|
||||
<rect fill="#cccccc" x="0" width="5.5" height="5.5" y="0"></rect>
|
||||
<rect fill="#cccccc" x="5.5" width="5.5" height="5.5" y="5.5"></rect>
|
||||
</pattern>
|
||||
<rect width="22" height="22" fill="url(#checker)"></rect>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<x-button :disabled="isEmpty" @click="reset" class="is-small ml-2" :shadow="false" type="secondary">
|
||||
{{ $t('input.resetColor') }}
|
||||
</x-button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import verte from 'verte'
|
||||
const DEFAULT_COLORS = [
|
||||
'#1973ff',
|
||||
'#7F23FF',
|
||||
'#ff4136',
|
||||
'#ff851b',
|
||||
'#ffeb10',
|
||||
'#00db60',
|
||||
]
|
||||
|
||||
function createRandomID() {
|
||||
const ID_LENGTH = 9
|
||||
return Math.random().toString(36).substr(2, ID_LENGTH)
|
||||
}
|
||||
|
||||
export default {
|
||||
name: 'colorPicker',
|
||||
|
|
@ -33,11 +48,10 @@ export default {
|
|||
return {
|
||||
color: '',
|
||||
lastChangeTimeout: null,
|
||||
defaultColors: DEFAULT_COLORS,
|
||||
colorListID: createRandomID(),
|
||||
}
|
||||
},
|
||||
components: {
|
||||
verte,
|
||||
},
|
||||
props: {
|
||||
value: {
|
||||
required: true,
|
||||
|
|
@ -59,14 +73,14 @@ export default {
|
|||
},
|
||||
},
|
||||
computed: {
|
||||
empty() {
|
||||
isEmpty() {
|
||||
return this.color === '#000000' || this.color === ''
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
update(force = false) {
|
||||
|
||||
if(this.empty && !force) {
|
||||
if(this.isEmpty && !force) {
|
||||
return
|
||||
}
|
||||
|
||||
|
|
@ -87,18 +101,4 @@ export default {
|
|||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
@import 'verte/dist/verte.css';
|
||||
|
||||
.verte.is-empty {
|
||||
.verte__icon {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.verte__guide {
|
||||
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAGklEQVQYlWM4c+bMf3TMgA0MBYWDzDkUKQQAlHCpV9ycHeMAAAAASUVORK5CYII=);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</script>
|
||||
|
|
@ -3,9 +3,46 @@
|
|||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
.verte__guide {
|
||||
border-radius: 100%;
|
||||
border: 1px solid $grey-300;
|
||||
box-shadow: $card-shadow;
|
||||
}
|
||||
// reset / see https://stackoverflow.com/a/11471224/15522256
|
||||
input[type="color"] {
|
||||
-webkit-appearance: none;
|
||||
border: none;
|
||||
}
|
||||
input[type="color"]::-webkit-color-swatch-wrapper {
|
||||
padding: 0;
|
||||
}
|
||||
input[type="color"]::-webkit-color-swatch {
|
||||
border: none;
|
||||
}
|
||||
|
||||
$PICKER_SIZE: 24px;
|
||||
$BORDER_WIDTH: 1px;
|
||||
.picker {
|
||||
display: grid;
|
||||
width: $PICKER_SIZE;
|
||||
height: $PICKER_SIZE;
|
||||
overflow: hidden;
|
||||
border-radius: 100%;
|
||||
border: $BORDER_WIDTH solid $grey-300;
|
||||
box-shadow: $card-shadow;
|
||||
|
||||
& > * {
|
||||
grid-row: 1;
|
||||
grid-column: 1;
|
||||
}
|
||||
}
|
||||
|
||||
input.picker__input {
|
||||
padding: 0;
|
||||
width: $PICKER_SIZE - 2 * $BORDER_WIDTH;
|
||||
height: $PICKER_SIZE - 2 * $BORDER_WIDTH;
|
||||
}
|
||||
|
||||
.picker__input.is-empty {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.picker__pattern {
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
12
yarn.lock
12
yarn.lock
|
|
@ -3030,11 +3030,6 @@ color-convert@^2.0.1:
|
|||
dependencies:
|
||||
color-name "~1.1.4"
|
||||
|
||||
color-fns@^0.0.10:
|
||||
version "0.0.10"
|
||||
resolved "https://registry.yarnpkg.com/color-fns/-/color-fns-0.0.10.tgz#b03f34ab3bb3902ac24e7c86ff32d845fbbaf7bf"
|
||||
integrity sha512-QFKowTE9CXCLp09Gz5cQo8VPUP55hf73iHEI52JC3NyKfMpQG2VoLWmTxYeTKH6ngkEnoMrCdEX//M6J4PVQBA==
|
||||
|
||||
color-name@1.1.3:
|
||||
version "1.1.3"
|
||||
resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.3.tgz#a7d0558bd89c42f795dd42328f740831ca53bc25"
|
||||
|
|
@ -7447,13 +7442,6 @@ verror@1.10.0:
|
|||
core-util-is "1.0.2"
|
||||
extsprintf "^1.2.0"
|
||||
|
||||
verte@0.0.12:
|
||||
version "0.0.12"
|
||||
resolved "https://registry.yarnpkg.com/verte/-/verte-0.0.12.tgz#f91b3f82cf2d6ea81ac2ccad66bb9aefe7997503"
|
||||
integrity sha512-QEWpKkjAT8SLkNJzeiZxN7tJuUiTTFO51tg9dGIrkDlQhzbaM+bTT0wtDM2c/F+Ur9luE64qhsM4xI0Af3Ut1g==
|
||||
dependencies:
|
||||
color-fns "^0.0.10"
|
||||
|
||||
vite-plugin-pwa@0.11.2:
|
||||
version "0.11.2"
|
||||
resolved "https://registry.yarnpkg.com/vite-plugin-pwa/-/vite-plugin-pwa-0.11.2.tgz#21998b6b00b156c8f395700549a34fb9304db6cb"
|
||||
|
|
|
|||
Loading…
Reference in a new issue