mirror of
https://github.com/grey-cat-1908/formaptix-web.git
synced 2024-09-22 19:21:59 +03:00
крутые штуки
This commit is contained in:
parent
a4f0066f3e
commit
1a9e38730f
5 changed files with 116 additions and 51 deletions
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<div class="rating-component">
|
||||
<div class="labels">
|
||||
<div class="rating">
|
||||
<div class="rating-labels">
|
||||
<span>{{ minLabel }}</span>
|
||||
<span>{{ maxLabel }}</span>
|
||||
</div>
|
||||
|
@ -16,7 +16,13 @@
|
|||
<span>{{ n }}</span>
|
||||
</label>
|
||||
</div>
|
||||
<button v-if="selectedValue !== null" @click="cancelSelection">Отменить выбор</button>
|
||||
<button
|
||||
class="rating-delete default-button"
|
||||
v-if="selectedValue !== null"
|
||||
@click="cancelSelection"
|
||||
>
|
||||
Отменить выбор
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
@ -67,33 +73,57 @@ function cancelSelection() {
|
|||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.rating-component {
|
||||
<style scoped lang="scss">
|
||||
.rating {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.labels {
|
||||
&-labels {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.rating-options {
|
||||
&-options {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
justify-content: space-evenly;
|
||||
gap: 0 50px;
|
||||
width: 100%;
|
||||
|
||||
@media (max-width: 730px) {
|
||||
flex-direction: column;
|
||||
gap: 15px 0;
|
||||
}
|
||||
}
|
||||
|
||||
.rating-option {
|
||||
&-option {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 10px 0;
|
||||
|
||||
@media (max-width: 730px) {
|
||||
flex-direction: initial;
|
||||
gap: 0 15px;
|
||||
}
|
||||
}
|
||||
|
||||
button {
|
||||
margin-top: 10px;
|
||||
&-delete {
|
||||
width: 100%;
|
||||
border-radius: 1rem;
|
||||
padding: 10px 30px;
|
||||
margin-top: 25px;
|
||||
border: 1px solid var(--color-third-border);
|
||||
|
||||
&:hover {
|
||||
border: 1px solid var(--color-main);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//button {
|
||||
// margin-top: 10px;
|
||||
//}
|
||||
</style>
|
||||
|
|
|
@ -1,22 +1,25 @@
|
|||
<template>
|
||||
<div class="selector-component">
|
||||
<div class="options">
|
||||
<div class="selector">
|
||||
<div class="selector-options">
|
||||
<div
|
||||
v-for="(option, index) in options"
|
||||
:key="index"
|
||||
class="option"
|
||||
class="selector-option default-button"
|
||||
@click="toggleSelection(index)"
|
||||
:class="{ selected: isSelected(index) }"
|
||||
>
|
||||
<span>{{ option.label }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="error" class="error">{{ error }}</div>
|
||||
<p v-if="error" class="selector-error">
|
||||
<PhXCircle class="selector-error--sign" :size="23" />{{ error }}
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, watch } from 'vue'
|
||||
import { PhXCircle } from '@phosphor-icons/vue'
|
||||
|
||||
const props = defineProps({
|
||||
minValues: {
|
||||
|
@ -83,25 +86,51 @@ function validateSelection() {
|
|||
watch(selectedIndexes, validateSelection)
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.selector-component {
|
||||
<style scoped lang="scss">
|
||||
.selector {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.options {
|
||||
&-options {
|
||||
display: flex;
|
||||
gap: 15px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.option {
|
||||
margin: 5px;
|
||||
&-option {
|
||||
border-radius: 0.5rem;
|
||||
background: var(--color-input-background);
|
||||
border: 1px solid var(--color-main-border);
|
||||
padding: 10px;
|
||||
border: 1px solid #ccc;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
&:hover {
|
||||
border: 1px solid var(--color-secondary-border);
|
||||
background: var(--color-main-background);
|
||||
}
|
||||
|
||||
&.selected {
|
||||
border: 1px solid var(--color-main);
|
||||
background: var(--color-main-toned);
|
||||
//color: var(--color-alternative-text);
|
||||
}
|
||||
}
|
||||
|
||||
&-error {
|
||||
margin-top: 20px;
|
||||
color: var(--color-red);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0 13px;
|
||||
font-size: 0.9em;
|
||||
|
||||
&--sign {
|
||||
min-width: 23px;
|
||||
min-height: 23px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.option.selected {
|
||||
|
|
|
@ -10,7 +10,9 @@
|
|||
@blur="validateInput"
|
||||
placeholder="Ваш ответ"
|
||||
/>
|
||||
<p v-if="error" class="text-question-error"><PhXCircle :size="23" />{{ error }}</p>
|
||||
<p v-if="error" class="text-question-error">
|
||||
<PhXCircle class="text-question-error--sign" :size="23" />{{ error }}
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
@ -149,6 +151,11 @@ function validateInput() {
|
|||
align-items: center;
|
||||
gap: 0 13px;
|
||||
font-size: 0.9em;
|
||||
|
||||
&--sign {
|
||||
min-width: 23px;
|
||||
min-height: 23px;
|
||||
}
|
||||
}
|
||||
|
||||
&-input {
|
||||
|
|
|
@ -14,4 +14,6 @@
|
|||
|
||||
--color-red: #ff3b3b;
|
||||
--color-green: rgb(0, 204, 0);
|
||||
|
||||
--color-main-toned: rgba(92, 139, 253, 0.3);
|
||||
}
|
||||
|
|
|
@ -81,11 +81,8 @@ onMounted(async () => {
|
|||
<div v-else class="view-form">
|
||||
<div class="view-form-title view-form-container default-card">
|
||||
<div class="view-form-info">
|
||||
|
||||
<PhCardsThree :size="23" class="view-form-info--sign" />
|
||||
<div class="view-form-info--text">
|
||||
Страница 1 из 1
|
||||
</div>
|
||||
<div class="view-form-info--text">Страница 1 из 1</div>
|
||||
</div>
|
||||
<h2 class="form-title">{{ data.name }}</h2>
|
||||
<p class="form-description">{{ currentPage.text }}</p>
|
||||
|
|
Loading…
Reference in a new issue