Skip to content

Commit 72fee9b

Browse files
farenagVguy
farena
authored and
gVguy
committed
added appendTo optional parameter and changed styles to show picker correctly
1 parent 3810e7c commit 72fee9b

File tree

3 files changed

+118
-78
lines changed

3 files changed

+118
-78
lines changed

‎dev/serve.vue‎

Lines changed: 42 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,8 @@
11
<template>
22
<div id="app">
3+
<div class="box-parent" v-if="appendToActive">
4+
HERE WILL BE THE BOX (ALWAYS <i>POSITION:RELATIVE</i>)
5+
</div>
36
<h1>vue-color-input demo</h1>
47
<h3>
58
<a class="docsLink" href="https://github.com/gVguy/vue-color-input#vue-color-input"
@@ -41,28 +44,35 @@
4144
<h3>disable-text-inputs</h3>
4245
<input type="checkbox" class="chx" v-model="disableTextInputs" @pointerdown.stop>
4346
</div>
47+
<div class="setup-block">
48+
<h3>appendTo external div</h3>
49+
<input type="checkbox" class="chx" v-model="appendToActive" @pointerdown.stop>
50+
</div>
4451
</div>
45-
<color-input v-model="color"
46-
:format="format + (type ? ' ' + type : '')"
47-
:position="position"
48-
:disable-alpha="disableAlpha"
49-
:disabled="disabled"
50-
:disable-text-inputs="disableTextInputs"
51-
@mounted="logEvent('mounted');"
52-
@beforeUnmount="logEvent('beforeUnmount');"
53-
@pickStart="logEvent('pickStart')"
54-
@pickEnd="logEvent('pickEnd')"
55-
@hueInputStart="logEvent('hueInputStart', $event)"
56-
@hueInputEnd="logEvent('hueInputEnd', $event)"
57-
@hueInput="logEvent('hueInput', $event)"
58-
@alphaInputStart="logEvent('alphaInputStart', $event)"
59-
@alphaInputEnd="logEvent('alphaInputEnd', $event)"
60-
@alphaInput="logEvent('alphaInput', $event)"
61-
@saturationInputStart="logEvent('saturationInputStart', $event)"
62-
@saturationInputEnd="logEvent('saturationInputEnd', $event)"
63-
@saturationInput="logEvent('saturationInput', $event)"
64-
@change="logEvent('change', $event)"
65-
ref="colorInput" />
52+
<color-input
53+
:appendTo="appendToActive ? appendTo : null"
54+
v-model="color"
55+
:format="format + (type ? ' ' + type : '')"
56+
:position="position"
57+
:disable-alpha="disableAlpha"
58+
:disabled="disabled"
59+
:disable-text-inputs="disableTextInputs"
60+
@mounted="logEvent('mounted');"
61+
@beforeUnmount="logEvent('beforeUnmount');"
62+
@pickStart="logEvent('pickStart')"
63+
@pickEnd="logEvent('pickEnd')"
64+
@hueInputStart="logEvent('hueInputStart', $event)"
65+
@hueInputEnd="logEvent('hueInputEnd', $event)"
66+
@hueInput="logEvent('hueInput', $event)"
67+
@alphaInputStart="logEvent('alphaInputStart', $event)"
68+
@alphaInputEnd="logEvent('alphaInputEnd', $event)"
69+
@alphaInput="logEvent('alphaInput', $event)"
70+
@saturationInputStart="logEvent('saturationInputStart', $event)"
71+
@saturationInputEnd="logEvent('saturationInputEnd', $event)"
72+
@saturationInput="logEvent('saturationInput', $event)"
73+
@change="logEvent('change', $event)"
74+
ref="colorInput"
75+
/>
6676
<div class="detailsSection">
6777
<div class="detailsBlock">
6878
<h2>Style it</h2>
@@ -120,6 +130,8 @@
120130
format: '',
121131
type: '',
122132
formatOptions: ['rgb', 'hex', 'hex8', 'name', 'hsl', 'hsv'],
133+
appendToActive: null,
134+
appendTo: '.box-parent',
123135
}
124136
},
125137
computed: {
@@ -264,6 +276,12 @@
264276
});
265277
},
266278
watch: {
279+
appendToActive() {
280+
this.$refs.colorInput.pickEnd()
281+
setTimeout(() => {
282+
this.$refs.colorInput.getParent()
283+
}, 100)
284+
},
267285
color() {
268286
let hsl = this.$refs.colorInput.color.clone().setAlpha(1).toHslString();
269287
let [h,s,l] = hsl.match(/\d+/g);
@@ -425,4 +443,7 @@
425443
button {
426444
margin-right: 5px;
427445
}
446+
.box-parent {
447+
position: relative;
448+
}
428449
</style>

‎src/color-input.vue‎

Lines changed: 75 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -9,30 +9,33 @@
99
<div class="color" :style="boxColorStyles"></div>
1010
</div>
1111
</div>
12-
<transition :name="transition">
13-
<color-picker
14-
class="picker-popup"
15-
:color="this.color"
16-
:position="processedPosition"
17-
:disable-alpha="processedDisableAlpha"
18-
:boxRect="boxRect"
19-
:disable-text-inputs="disableTextInputs"
20-
v-show="active"
21-
:style="{ visibility: hidePicker ? 'hidden' : '' }"
22-
@ready="hidePicker = false"
23-
@updateColor="emitUpdate"
24-
@hueInputStart="$emit('hueInputStart', $event)"
25-
@hueInputEnd="$emit('hueInputEnd', $event)"
26-
@hueInput="$emit('hueInput', $event)"
27-
@alphaInputStart="$emit('alphaInputStart', $event)"
28-
@alphaInputEnd="$emit('alphaInputEnd', $event)"
29-
@alphaInput="$emit('alphaInput', $event)"
30-
@saturationInputStart="$emit('saturationInputStart', $event)"
31-
@saturationInputEnd="$emit('saturationInputEnd', $event)"
32-
@saturationInput="$emit('saturationInput', $event)"
33-
@change="$emit('change', $event)"
34-
ref="picker" />
35-
</transition>
12+
13+
<Teleport :to="parent" v-if="parent">
14+
<transition :name="transition">
15+
<color-picker
16+
class="picker-popup user"
17+
:color="this.color"
18+
:position="processedPosition"
19+
:disable-alpha="processedDisableAlpha"
20+
:boxRect="boxRect"
21+
:disable-text-inputs="disableTextInputs"
22+
v-show="active"
23+
:style="{ visibility: hidePicker ? 'hidden' : '' }"
24+
@ready="hidePicker = false"
25+
@updateColor="emitUpdate"
26+
@hueInputStart="$emit('hueInputStart', $event)"
27+
@hueInputEnd="$emit('hueInputEnd', $event)"
28+
@hueInput="$emit('hueInput', $event)"
29+
@alphaInputStart="$emit('alphaInputStart', $event)"
30+
@alphaInputEnd="$emit('alphaInputEnd', $event)"
31+
@alphaInput="$emit('alphaInput', $event)"
32+
@saturationInputStart="$emit('saturationInputStart', $event)"
33+
@saturationInputEnd="$emit('saturationInputEnd', $event)"
34+
@saturationInput="$emit('saturationInput', $event)"
35+
@change="$emit('change', $event)"
36+
ref="picker" />
37+
</transition>
38+
</Teleport>
3639
</div>
3740
</template>
3841

@@ -77,23 +80,24 @@
7780
default: false
7881
},
7982
format: String,
83+
appendTo: [String, HTMLElement]
8084
},
8185
emits: [
8286
'mounted',
8387
'beforeUnmount',
8488
'update:modelValue',
8589
'pickStart',
8690
'pickEnd',
87-
'hueInputStart',
88-
'hueInputEnd',
89-
'hueInput',
90-
'alphaInputStart',
91-
'alphaInputEnd',
92-
'alphaInput',
93-
'saturationInputStart',
94-
'saturationInputEnd',
95-
'saturationInput',
96-
'change'
91+
'hueInputStart',
92+
'hueInputEnd',
93+
'hueInput',
94+
'alphaInputStart',
95+
'alphaInputEnd',
96+
'alphaInput',
97+
'saturationInputStart',
98+
'saturationInputEnd',
99+
'saturationInput',
100+
'change'
97101
],
98102
components: { ColorPicker },
99103
provide: { tinycolor },
@@ -103,6 +107,7 @@
103107
active: false,
104108
ready: false,
105109
hidePicker: false,
110+
parent: null,
106111
boxRect: {},
107112
innerBoxRect: {},
108113
textInputsFormat: 'rgb',
@@ -250,8 +255,22 @@
250255
}
251256
this.$emit('update:modelValue', this.output);
252257
},
258+
getParent() {
259+
let parent;
260+
if (this.appendTo) {
261+
if (typeof this.appendTo === 'string') {
262+
parent = document.querySelector(this.appendTo)
263+
} else {
264+
parent = this.appendTo
265+
}
266+
}
267+
268+
269+
this.parent = parent || this.$refs.root
270+
console.log(this.parent);
271+
},
253272
getBoxRect() {
254-
this.boxRect = this.$refs.root.getBoundingClientRect();
273+
this.boxRect = this.parent.getBoundingClientRect();
255274
}
256275
},
257276
created() {
@@ -261,6 +280,7 @@
261280
};
262281
},
263282
mounted() {
283+
this.getParent();
264284
this.$emit('mounted');
265285
},
266286
beforeUnmount() {
@@ -345,27 +365,26 @@
345365
cursor: not-allowed;
346366
}
347367
}
368+
}
369+
.picker-popup {
370+
position: absolute;
371+
z-index: 9999;
372+
width: auto;
373+
min-width: 280px;
374+
background-color: #fbfbfb;
375+
box-shadow: 0px 5px 10px rgba(15,15,15,.4);
376+
margin: 10px;
377+
user-select: none;
378+
color: #0f0f0f;
379+
}
348380
349-
.picker-popup {
350-
position: absolute;
351-
z-index: 9999;
352-
width: auto;
353-
min-width: 280px;
354-
background-color: #fbfbfb;
355-
box-shadow: 0px 5px 10px rgba(15,15,15,.4);
356-
margin: 10px;
357-
user-select: none;
358-
color: #0f0f0f;
359-
}
360-
361-
.picker-popup-enter-from,
362-
.picker-popup-leave-to {
363-
transform: translateY(-10px);
364-
opacity: 0;
365-
}
366-
.picker-popup-enter-active,
367-
.picker-popup-leave-active {
368-
transition: transform .3s, opacity .3s;
369-
}
381+
.picker-popup-enter-from,
382+
.picker-popup-leave-to {
383+
transform: translateY(-10px);
384+
opacity: 0;
385+
}
386+
.picker-popup-enter-active,
387+
.picker-popup-leave-active {
388+
transition: transform .3s, opacity .3s;
370389
}
371390
</style>

‎src/components/color-picker.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -546,7 +546,7 @@ export default {
546546
justify-content: center;
547547
align-items: center;
548548
}
549-
.color-input {
549+
.picker-popup {
550550
.slider {
551551
width: 85%;
552552
height: 6px;

0 commit comments

Comments
 (0)