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

color picker

This commit is contained in:
Kseninia Mikhaylova 2024-06-07 13:05:12 +03:00
parent e45c19124a
commit 0b422a9cbd
4 changed files with 49 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
assets/main.scss
View File

@ -117,7 +117,7 @@ a[href^="#"] {
}
label {
@apply inline-block mb-2 text-sm font-medium text-gray-900 dark:text-white;
@apply inline-block text-sm font-medium text-gray-900 dark:text-white;
}
input {
@ -137,4 +137,17 @@ button {
&-row {
@apply flex flex-row gap-4;
}
&-item {
@apply flex flex-row gap-4 items-center justify-center;
}
}
.color_picker {
@apply leading-none;
&-selected {
@apply size-10 rounded border-gray-300 inline-block leading-none;
}
&-changer {
@apply absolute w-80 z-10 bg-white flex gap-0;
}
}

20
components/calcValues.vue
View File

@ -2,8 +2,8 @@
import converter from 'ral-hex-converter'
const lamelles_count = useState('lamelles_count', () => 8)
const fence_section = useState<number>('fence_section', () => 2000 * 0.001)
const pillar_color = useState('pillar_color', () => 'gray')
const lamelle_color = useState('lamelle_color', () => 'violet')
const pillar_color = useState('pillar_color', () => '#828282')
const lamelle_color = useState('lamelle_color', () => '#C2B078')
const parametric = {
length: {
@ -66,26 +66,14 @@ watch(form_state, changeParametres, { deep: true })
<div class="form-item">
<label for="lamelle_color">Цвет ламелей</label>
<input id="lamelle_color" type="text" v-model="lamelle_color" disabled />
</div>
<div class="colors flex flex-wrap">
<template v-for="color in converter.hex">
<div class="color size-5" :class="[{ 'outline outline-primary': color == lamelle_color }]"
:style="[{ backgroundColor: color }]" @click="setLamelleColor(color)">
</div>
</template>
<ColorPicker :color="lamelle_color" :cb="setLamelleColor" />
</div>
</div>
<div class="form-row">
<div class="form-item">
<label for="pillar_color">Цвет столба</label>
<input id="pillar_color" type="text" v-model="pillar_color" disabled />
</div>
<div class="colors flex flex-wrap">
<template v-for="color in converter.hex">
<div class="color size-5" :class="[{ 'outline outline-primary': color == pillar_color }]"
:style="[{ backgroundColor: color }]" @click="setPillarColor(color)">
</div>
</template>
<ColorPicker :color="pillar_color" :cb="setPillarColor" />
</div>
</div>
</form>

30
components/colorPicker.vue Normal file
View File

@ -0,0 +1,30 @@
<script setup lang="ts">
import converter from 'ral-hex-converter'
const props = defineProps(['color', 'cb'])
const onClick = (color: string) => {
if (props.cb) {
props.cb(color)
}
toggleOpen()
}
const isOpenPicker = ref<boolean>(false)
const toggleOpen = (value: boolean = !isOpenPicker) => {
isOpenPicker.value = value !== undefined ? value : !isOpenPicker.value
}
</script>
<template>
<div>
<div class="color_picker">
<div class="color_picker-selected" :style="[{ backgroundColor: props.color }]" @click="toggleOpen"></div>
<div class="color_picker-changer flex flex-wrap" v-if="isOpenPicker" @focusout="toggleOpen(false)">
<template v-for="col in converter.hex">
<div class="color size-5" :class="[{ 'outline outline-primary': props.color == col }]"
:style="[{ backgroundColor: col }]" @click="onClick(col)">
</div>
</template>
</div>
</div>
</div>
</template>