mns/mns-mini-zabor
mns
/
mns-mini-zabor
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

close jn click outside

This commit is contained in:
Kseninia Mikhaylova 2024-06-07 16:21:05 +03:00
parent f5e1818047
commit 22986da2ab
3 changed files with 18 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
assets/main.scss
View File

@ -149,7 +149,7 @@ button {
.color_picker { .color_picker {
@apply leading-none; @apply leading-none;
&-selected { &-selected {
@apply size-10 rounded border-gray-300 inline-block leading-none; @apply size-10 rounded border-gray-300 shadow inline-block leading-none;
} }
&-changer { &-changer {
@apply absolute w-80 z-10 bg-white flex gap-0; @apply absolute w-80 z-10 bg-white flex gap-0;

2
components/calcValues.vue
View File

@ -81,7 +81,7 @@ watch(form_state, changeParametres, { deep: true })
<div class="form-row"> <div class="form-row">
<div class="form-item"> <div class="form-item">
<label for="lamelle_color">Цвет ламелей</label> <label for="lamelle_color">Цвет ламелей</label>
<input id="lamelle_color" type="text" v-model="lamelle_color" disabled /> <input id="lamelle_color" type="text" v-model="lamelle_color" disabled :style="[{backgroundColor: lamelle_color}]" />
<ColorPicker :color="lamelle_color" :cb="setLamelleColor" /> <ColorPicker :color="lamelle_color" :cb="setLamelleColor" />
</div> </div>
<div class="form-item"> <div class="form-item">

19
components/colorPicker.vue
View File

@ -13,12 +13,25 @@ const isOpenPicker = ref<boolean>(false)
const toggleOpen = (value: boolean = !isOpenPicker) => { const toggleOpen = (value: boolean = !isOpenPicker) => {
isOpenPicker.value = value !== undefined ? value : !isOpenPicker.value isOpenPicker.value = value !== undefined ? value : !isOpenPicker.value
} }
const picker = ref()
const clickOutside = (e: Event) => {
if (!picker.value.contains(e.target)) {
toggleOpen(false)
}
}
onMounted(() => {
document.addEventListener('click', clickOutside)
})
onUnmounted(() => {
document.removeEventListener('click', clickOutside)
})
</script> </script>
<template> <template>
<div> <div>
<div class="color_picker"> <div class="color_picker" ref="picker">
<div class="color_picker-selected" :style="[{ backgroundColor: props.color }]" @click="toggleOpen"></div> <div class="color_picker-selected" :style="[{ backgroundColor: props.color }]"
<div class="color_picker-changer flex flex-wrap" v-if="isOpenPicker" @focusout="toggleOpen(false)"> @click="toggleOpen(!isOpenPicker)" @focusout="toggleOpen(false)"></div>
<div class="color_picker-changer flex flex-wrap" v-if="isOpenPicker">
<template v-for="col in converter.hex"> <template v-for="col in converter.hex">
<div class="color size-5" :class="[{ 'outline outline-primary': props.color == col }]" <div class="color size-5" :class="[{ 'outline outline-primary': props.color == col }]"
:style="[{ backgroundColor: col }]" @click="onClick(col)"> :style="[{ backgroundColor: col }]" @click="onClick(col)">