Alsaze/Merkuriy
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

update

Browse Source
This commit is contained in:
Nadar 2024-02-27 20:13:44 +03:00
parent 5c87a247a7
commit 902ec501b0
8 changed files with 298 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/assets/index.css
View File

@ -77,7 +77,7 @@ button:hover {
}
.container {
max-width: 1200px;
max-width: 800px;
width: 100%;
margin-inline: auto;
}
@ -225,7 +225,8 @@ button,
input,
optgroup,
select,
textarea {
textarea,
option {
font-family: inherit; /* 1 */
font-size: 100%; /* 1 */
line-height: 1.15; /* 1 */

2
src/assets/index.css.map
View File

@ -1 +1 @@
{"version":3,"sourceRoot":"","sources":["fonts.scss","style.scss","normalize.scss"],"names":[],"mappings":"AAAQ;AAER;EACE;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;;;AC3CF;AAAA;EAEE;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;;AAEA;EACE;EACA;;;AAIJ;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;EAEA;;;ACtCF;AAEA;AAAA;AAGA;AAAA;AAAA;AAAA;AAKA;EACE;EACA;;;AAGF;AAAA;AAGA;AAAA;AAAA;AAIA;EACE;;;AAGF;AAAA;AAAA;AAIA;EACE;;;AAGF;AAAA;AAAA;AAAA;AAUA;AAAA;AAGA;AAAA;AAAA;AAAA;AAKA;EACE;EACA;EACA;;;AAGF;AAAA;AAAA;AAAA;AAKA;EACE;EACA;;;AAGF;AAAA;AAGA;AAAA;AAAA;AAIA;EACE;;;AAGF;AAAA;AAAA;AAAA;AAKA;EACE;EACA;EACA;;;AAGF;AAAA;AAAA;AAIA;AAAA;EAEE;;;AAGF;AAAA;AAAA;AAAA;AAKA;AAAA;AAAA;EAGE;EACA;;;AAGF;AAAA;AAAA;AAIA;EACE;;;AAGF;AAAA;AAAA;AAAA;AAKA;AAAA;EAEE;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;AAAA;AAGA;AAAA;AAAA;AAIA;EACE;EACA;EACA;;;AAGF;EACE;;;AAGF;AAAA;AAGA;AAAA;AAAA;AAAA;AAKA;AAAA;AAAA;AAAA;AAAA;EAKE;EACA;EACA;EACA;EACA;EACA;;;AAGF;AAAA;AAAA;AAAA;AAKA;AAAA,QACQ;EACN;;;AAGF;AAAA;AAAA;AAAA;AAKA;AAAA,SACS;EACP;;;AAGF;AAAA;AAAA;AAIA;AAAA;AAAA;AAAA;EAIE;;;AAGF;AAAA;AAAA;AAIA;AAAA;AAAA;AAAA;EAIE;EACA;;;AAGF;AAAA;AAAA;AAIA;AAAA;AAAA;AAAA;EAIE;;;AAGF;AAAA;AAAA;AAIA;EACE;;;AAGF;AAAA;AAAA;AAAA;AAAA;AAAA;AAOA;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;AAAA;AAAA;AAIA;EACE;;;AAGF;AAAA;AAAA;AAIA;EACE;;;AAGF;AAAA;AAAA;AAAA;AAKA;AAAA;EAEE;EACA;;;AAGF;AAAA;AAAA;AAIA;AAAA;EAEE;;;AAGF;AAAA;AAAA;AAAA;AAKA;EACE;EACA;;;AAGF;AAAA;AAAA;AAIA;EACE;;;AAGF;AAAA;AAAA;AAAA;AAKA;EACE;EACA;;;AAGF;AAAA;AAGA;AAAA;AAAA;AAIA;EACE;;;AAGF;AAAA;AAAA;AAIA;EACE;;;AAGF;AAAA;AAGA;AAAA;AAAA;AAIA;EACE;;;AAGF;AAAA;AAAA;AAIA;EACE","file":"index.css"}
{"version":3,"sourceRoot":"","sources":["fonts.scss","style.scss","normalize.scss"],"names":[],"mappings":"AAAQ;AAER;EACE;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;;;AC3CF;AAAA;EAEE;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;;AAEA;EACE;EACA;;;AAIJ;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;EAEA;;;ACtCF;AAEA;AAAA;AAGA;AAAA;AAAA;AAAA;AAKA;EACE;EACA;;;AAGF;AAAA;AAGA;AAAA;AAAA;AAIA;EACE;;;AAGF;AAAA;AAAA;AAIA;EACE;;;AAGF;AAAA;AAAA;AAAA;AAUA;AAAA;AAGA;AAAA;AAAA;AAAA;AAKA;EACE;EACA;EACA;;;AAGF;AAAA;AAAA;AAAA;AAKA;EACE;EACA;;;AAGF;AAAA;AAGA;AAAA;AAAA;AAIA;EACE;;;AAGF;AAAA;AAAA;AAAA;AAKA;EACE;EACA;EACA;;;AAGF;AAAA;AAAA;AAIA;AAAA;EAEE;;;AAGF;AAAA;AAAA;AAAA;AAKA;AAAA;AAAA;EAGE;EACA;;;AAGF;AAAA;AAAA;AAIA;EACE;;;AAGF;AAAA;AAAA;AAAA;AAKA;AAAA;EAEE;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;AAAA;AAGA;AAAA;AAAA;AAIA;EACE;EACA;EACA;;;AAGF;EACE;;;AAGF;AAAA;AAGA;AAAA;AAAA;AAAA;AAKA;AAAA;AAAA;AAAA;AAAA;AAAA;EAME;EACA;EACA;EACA;EACA;EACA;;;AAGF;AAAA;AAAA;AAAA;AAKA;AAAA,QACQ;EACN;;;AAGF;AAAA;AAAA;AAAA;AAKA;AAAA,SACS;EACP;;;AAGF;AAAA;AAAA;AAIA;AAAA;AAAA;AAAA;EAIE;;;AAGF;AAAA;AAAA;AAIA;AAAA;AAAA;AAAA;EAIE;EACA;;;AAGF;AAAA;AAAA;AAIA;AAAA;AAAA;AAAA;EAIE;;;AAGF;AAAA;AAAA;AAIA;EACE;;;AAGF;AAAA;AAAA;AAAA;AAAA;AAAA;AAOA;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;AAAA;AAAA;AAIA;EACE;;;AAGF;AAAA;AAAA;AAIA;EACE;;;AAGF;AAAA;AAAA;AAAA;AAKA;AAAA;EAEE;EACA;;;AAGF;AAAA;AAAA;AAIA;AAAA;EAEE;;;AAGF;AAAA;AAAA;AAAA;AAKA;EACE;EACA;;;AAGF;AAAA;AAAA;AAIA;EACE;;;AAGF;AAAA;AAAA;AAAA;AAKA;EACE;EACA;;;AAGF;AAAA;AAGA;AAAA;AAAA;AAIA;EACE;;;AAGF;AAAA;AAAA;AAIA;EACE;;;AAGF;AAAA;AAGA;AAAA;AAAA;AAIA;EACE;;;AAGF;AAAA;AAAA;AAIA;EACE","file":"index.css"}

3
src/assets/normalize.scss vendored
View File

@ -167,7 +167,8 @@ button,
input,
optgroup,
select,
textarea {
textarea,
option{
font-family: inherit; /* 1 */
font-size: 100%; /* 1 */
line-height: 1.15; /* 1 */

2
src/assets/style.scss
View File

@ -33,7 +33,7 @@ button {
}
.container{
max-width: 1200px;
max-width: 800px;
width: 100%;
margin-inline: auto;

87
src/components/app-checkbox.vue Normal file
View File

@ -0,0 +1,87 @@
<template>
<div>
<input
class='checkbox'
type="checkbox"
:id="id"
:checked="checked"
@input="handleClick($event)">
<label :for="id">{{ text }}</label>
</div>
</template>
<script setup>
const emits = defineEmits(['update:checked'])
const props = defineProps({
checked: {
type: Boolean,
default: false
},
id: {
type: String,
default: ''
},
text: {
type: String,
default: ''
},
})
const handleClick = (event) => {
emits('update:checked', event.target.checked)
}
</script>
<style lang="scss" scoped>
.checkbox {
position: absolute;
z-index: -1;
opacity: 0;
& + label {
display: inline-flex;
align-items: center;
user-select: none;
}
& + label::before {
content: '';
display: inline-block;
width: 24px;
height: 24px;
flex-shrink: 0;
flex-grow: 0;
border: 1px solid #adb5bd;
border-radius: 6px;
margin-right: 10px;
background-repeat: no-repeat;
background-position: center center;
background-size: 50% 50%;
}
&:checked + label::before {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23fff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3e%3c/svg%3e");
}
&:not(:disabled):not(:checked) + label:hover::before {
border-color: var(--primary-hover);
}
&:not(:disabled):active + label::before {
background-color: var(--primary);
border: 1px solid #ECEBED;
}
&:focus + label::before {
box-shadow: 0 7px 20px rgba(0, 0, 0, 0.07);
}
&:focus:not(:checked) + label::before {
border-color: var(--primary);
}
&:disabled + label::before {
background-color: #e9ecef;
border: 1px solid #ECEBED;
}
}
</style>

8
src/components/app-input.vue
View File

@ -7,7 +7,8 @@
<input
:placeholder=placeholder
:value="value"
@input="updateValue">
@input="updateValue"
>
<div
class="app-input__warning"
v-for="element of error"
@ -55,10 +56,15 @@ const updateValue = (e) => {
border-radius: 10px;
cursor: pointer;
&:hover {
opacity: 0.7;
}
input {
width: 100%;
border-radius: 5px;
padding: 10px;
height: 25px;
}
&__title {

41
src/components/app-select.vue Normal file
View File

@ -0,0 +1,41 @@
<template>
<label class="app-select">
<div>{{ title }}</div>
<select class="select">
<option v-for="item in items" :key="item.id">
{{ item }}
</option>
</select>
</label>
</template>
<script setup>
defineProps({
items: {
type: Array,
required: true
},
title: {
type: String,
default: ''
}
})
</script>
<style lang="scss">
.app-select {
width: 300px;
cursor: pointer;
&:hover {
opacity: 0.7;
}
}
.select {
padding: 10px;
width: 100%;
height: 45px;
border-radius: 5px;
}
</style>

163
src/pages/createUser.vue
View File

@ -4,6 +4,7 @@
<h1 class="createUser__title">Создание пользователя</h1>
<form @submit.prevent="submitForm" class="createUser__form">
<h3>Персональные данные</h3>
<div class="createUser__row">
<AppInput
placeholder='Введите фамилию'
@ -12,14 +13,138 @@
:error="v$.nameField.$errors"
/>
<AppInput
placeholder='Введите почту'
title="Почта"
v-model:value="v$.emailField.$model"
:error="v$.emailField.$errors"
placeholder='Введите имя'
title="Имя"
v-model:value="v$.nameField.$model"
:error="v$.nameField.$errors"
/>
</div>
<div class="createUser__row">
<AppInput
placeholder='Введите отчество'
title="Отчество"
v-model:value="v$.nameField.$model"
:error="v$.nameField.$errors"
/>
<AppInput
placeholder='Введите дату рождения'
title="Дата рождения"
v-model:value="v$.nameField.$model"
:error="v$.nameField.$errors"
/>
</div>
<div class="createUser__row">
<AppSelect
title="Укажите ваш пол"
:items="['Мужской','Женский']"
/>
<AppSelect
title="Группа клиентов"
:items="['Vip','Проблемные','ОМС']"
/>
</div>
<div class="createUser__row">
<AppInput
placeholder='Введите номер телефона'
title="Номер телефона"
v-model:value="v$.nameField.$model"
:error="v$.nameField.$errors"
/>
<AppSelect
title="Лечющий врач"
:items="['Иванов', 'Захаров', 'Чернышева']"
/>
</div>
<div class="createUser__row">
<AppCheckbox
class="createUser__checkbox"
text="Не отправлять СМС"
id="checkboxIsActive"
v-model:checked="checkboxIsActive"/>
</div>
<h3>Адресс</h3>
<div class="createUser__row">
<AppInput
placeholder='Введите индекс'
title="Индекс"
v-model:value="v$.nameField.$model"
:error="v$.nameField.$errors"
/>
<AppInput
placeholder='Введите вашу страну'
title="Страна"
v-model:value="v$.nameField.$model"
:error="v$.nameField.$errors"
/>
</div>
<div class="createUser__row">
<AppInput
placeholder='Введите вагу область'
title="Область"
v-model:value="v$.nameField.$model"
:error="v$.nameField.$errors"
/>
<AppInput
placeholder='Введите ваш город'
title="Город"
v-model:value="v$.nameField.$model"
:error="v$.nameField.$errors"
/>
</div>
<div class="createUser__row">
<AppInput
placeholder='Введите вашу улицу'
title="Улица"
v-model:value="v$.nameField.$model"
:error="v$.nameField.$errors"
/>
<AppInput
placeholder='Введите ваш номер дома'
title="Дом"
v-model:value="v$.nameField.$model"
:error="v$.nameField.$errors"
/>
</div>
<AppButton medium>Confirm</AppButton>
<h3>Паспортные данные</h3>
<div class="createUser__row">
<AppSelect
title='Выберите документ'
:items="['Паспорт','Свидетельство о рождении','Водительское удостоверение']"
/>
<AppInput
placeholder='Введите серию'
title="Серия"
v-model:value="v$.nameField.$model"
:error="v$.nameField.$errors"
/>
</div>
<div class="createUser__row">
<AppInput
placeholder='Введите номер'
title="Номер"
v-model:value="v$.nameField.$model"
:error="v$.nameField.$errors"
/>
<AppInput
placeholder='Дата'
title="Дата выдвчи"
v-model:value="v$.nameField.$model"
:error="v$.nameField.$errors"
/>
</div>
<div class="createUser__row">
<AppInput
width="100%"
placeholder='Введите название оргонизации'
title="Кем выдан"
v-model:value="v$.nameField.$model"
:error="v$.nameField.$errors"
/>
</div>
<AppButton medium type="Submit">Confirm</AppButton>
</form>
</div>
</div>
@ -32,6 +157,10 @@ import AppInput from "../components/app-input.vue";
import {computed, ref} from "vue";
import {email, helpers, minLength} from "@vuelidate/validators";
import useVuelidate from "@vuelidate/core";
import AppCheckbox from "../components/app-checkbox.vue";
import AppSelect from "../components/app-select.vue";
const checkboxIsActive = ref(false)
const nameField = ref('')
const emailField = ref('')
@ -48,26 +177,46 @@ const rules = computed(() => ({
}))
const v$ = useVuelidate(rules, {nameField, emailField})
console.log(v$)
function submitForm() {
alert('pizda')
}
</script>
<style lang="scss">
.createUser {
height: 100%;
&__title {
margin-top: 30px;
margin-bottom: 50px;
}
&__form {
display: flex;
//display: flex;
flex-direction: column;
gap: 30px;
height: 100%;
@media (max-width: 700px) {
align-items: center;
}
}
&__row {
display: flex;
flex-direction: row;
justify-content: space-between;
@media (max-width: 700px) {
display: flex;
flex-direction: column;
gap: 30px;
}
}
&__checkbox {
margin-top: auto;
}
}