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

+ -

This commit is contained in:
Kseninia Mikhaylova 2024-06-07 15:44:29 +03:00
parent ed9f5335a9
commit cbbbfac6b3
2 changed files with 23 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
assets/main.scss
View File

@ -121,7 +121,7 @@ label {
} }
input { input {
@apply bg-gray-50 border border-gray-300 text-gray-900 rounded focus:ring-blue-500 focus:border-blue-500 text-lg w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500 disabled:bg-neutral disabled:cursor-not-allowed; @apply bg-gray-50 border border-gray-300 text-gray-900 rounded focus:ring-blue-500 focus:border-blue-500 text-lg p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500 disabled:bg-neutral disabled:cursor-not-allowed;
} }
button { button {
@ -139,6 +139,10 @@ button {
} }
&-item { &-item {
@apply flex flex-row gap-4 items-center justify-center; @apply flex flex-row gap-4 items-center justify-center;
.icon {
@apply hover:text-primary cursor-pointer transition-colors text-2xl;
}
} }
} }

23
components/calcValues.vue
View File

@ -45,7 +45,20 @@ const setLamelleColor = (color: string) => {
const setPillarColor = (color: string) => { const setPillarColor = (color: string) => {
pillar_color.value = color pillar_color.value = color
} }
const increment = (field: keyof typeof form_state, value: number) => {
if (form_state.hasOwnProperty(field)) {
let v = form_state[field] + value * parametric[field].step ?? 1
if (parametric.hasOwnProperty(field)) {
if (v > parametric[field].max) {
v = parametric[field].max
}
if (v < parametric[field].min) {
v = parametric[field].min
}
}
form_state[field] = v
}
}
watch(form_state, changeParametres, { deep: true }) watch(form_state, changeParametres, { deep: true })
</script> </script>
<template> <template>
@ -54,15 +67,15 @@ watch(form_state, changeParametres, { deep: true })
<div class="form-row"> <div class="form-row">
<div class="form-item"> <div class="form-item">
<label for="length">Длина секции, мм</label> <label for="length">Длина секции, мм</label>
<Icon type="button" @click="increment('length')">-</Icon> <Icon type="button" @click="increment('length', -1)" name="mdi:minus-circle-outline" />
<input id="length" type="number" v-bind="parametric.length" v-model="form_state.length" /> <input id="length" type="number" v-bind="parametric.length" v-model="form_state.length" />
<Icon type="button" @click="increment('length')">+</Icon> <Icon type="button" @click="increment('length', 1)" name="mdi:plus-circle-outline" />
</div> </div>
<div class="form-item"> <div class="form-item">
<label for="height">Высота забора, мм</label> <label for="height">Высота забора, мм</label>
<Icon type="button" @click="increment('length')">-</Icon> <Icon type="button" @click="increment('height', -1)" name="mdi:minus-circle-outline" />
<input id="height" type="number" v-bind="parametric.height" v-model="form_state.height" /> <input id="height" type="number" v-bind="parametric.height" v-model="form_state.height" />
<Icon type="button" @click="increment('length')">+</Icon> <Icon type="button" @click="increment('height', 1)" name="mdi:plus-circle-outline" />
</div> </div>
</div> </div>
<div class="form-row"> <div class="form-row">