admin/astra-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

WIP Переделала инпуты

Browse Source
This commit is contained in:
Daria Golova
2023-07-13 18:36:28 +03:00
parent f0640b6a3d
commit 25dbf78915
8 changed files with 260 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

217
src/components/BaseInput.vue Normal file
View File

@@ -0,0 +1,217 @@
<template lang="pug">
base-input-container.gap-y-2(:important="important", :label="label", :style="{width: width + 'px', ...sizeVariable}")
q-input.input(
v-model="value",
:name="name",
:multiple="multiple",
:class="{'font-input': true, 'doc': doc}",
:input-style="{resize: resize,}",
:borderless="borderless",
:placeholder="placeholder",
outlined,
:type="type",
:readonly="readonly",
:disable="disabled",
:rules="rule",
:lazy-rules="lazyRule",
:item-aligned="itemAligned",
no-error-icon,
:standout="readonly",
:mask="mask",
:autogrow="autogrow",
:accept="accept",
:debounce="debounce",
:shadow-text="shadowText",
:autofocus="autofocus",
hide-bottom-space,
)
template(v-slot:prepend, v-if="iconLeft")
slot
template(v-slot:append, v-if="iconRight")
slot
slot(v-if="!iconLeft && !iconRight")
</template>
<script>
import BaseInputContainer from "@/components/base/BaseInputContainer.vue";
export default {
name: "BaseInput",
components: { BaseInputContainer },
props: {
multiple: Boolean,
doc: Boolean,
autofocus: Boolean,
borderless: {
type: Boolean,
default: false,
},
autogrow: {
type: Boolean,
default: false,
},
type: {
default: "text",
},
accept: {
type: String,
default: "",
},
resize: {
type: String,
default: "none",
},
shadowText: String,
mask: String,
debounce: [String, Number],
width: Number,
rule: Array,
lazyRule: [Boolean, String],
itemAligned: Boolean,
modelValue: [String, Date, Number],
placeholder: String,
disabled: Boolean,
label: String,
readonly: Boolean,
iconLeft: Boolean,
iconRight: Boolean,
name: String,
important: Boolean,
size: String,
},
emits: ["update:modelValue"],
computed: {
value: {
get() {
if (this.type === "date") {
return this.modelValue
? this.modelValue?.toISOString().split("T")[0]
: null;
}
return this.modelValue;
},
set(value) {
this.type === "date"
? this.$emit("update:modelValue", value ? new Date(value) : null)
: this.$emit("update:modelValue", value);
},
},
sizeVariable() {
switch (this.size) {
case "XS":
return {
"--input-height": "28px",
"--text-size": "12px",
"--line-height": "135%",
"--px": "0 8px",
"--py": "10px 0",
};
case "S":
return {
"--input-height": "32px",
"--text-size": "12px",
"--line-height": "135%",
"--px": "0 8px",
"--py": "10px 0",
};
case "M":
return {
"--input-height": "40px",
"--text-size": "16px",
"--line-height": "normal",
"--px": "0 16px",
"--py": "8px 0",
};
case "L":
return {
"--input-height": "48px",
"--text-size": "16px",
"--line-height": "normal",
"--px": "0 16px",
"--py": "8px 0",
};
default:
return {
"--input-height": "56px",
"--text-size": "16px",
"--line-height": "normal",
"--px": "0 16px",
"--py": "8px 0",
};
}
},
},
};
</script>
<style lang="sass" scoped>
.font-input
font-feature-settings: 'pnum' on, 'lnum' on
.circle
width: 100%
height: 100%
border-radius: 50%
z-index: 5
opacity: 0
cursor: pointer
.doc
width: 100%
height: 100%
z-index: 5
opacity: 0
cursor: pointer
::file-selector-button
cursor: pointer
.input :deep(.q-field__native)
font-weight: 500
font-size: var(--text-size)
line-height: var(--line-height)
color: var(--font-dark-blue-color)
padding: var(--py)
&::placeholder
color: var(--font-grey-color)
opacity: 1
.input :deep(.q-field__control)
height: var(--input-height) !important
color: var(--font-dark-blue-color)
padding: var(--px)
&:before
border-color: var(--border-light-grey-color) !important
transition: none
&:hover:before
border-color: var(--font-grey-color) !important
&:after
border-width: 1px !important
transition: none
transform: none !important
.q-field--disabled :deep(.q-field__control > div)
opacity: 1 !important
.q-field--outlined.q-field--disabled :deep(.q-field__native)
color: var(--font-grey-color)
.q-field--outlined.q-field--disabled :deep(.q-field__control)
background: var(--bg-light-grey) !important
.q-field--outlined.q-field--readonly :deep(.q-field__control)
background: var(--bg-light-grey) !important
&:before
border-color: var(--bg-light-grey) !important
transition: none
&:hover:before
border-color: var(--bg-light-grey) !important
.q-field--outlined.q-field--readonly :deep(.q-field__native)
cursor: default
.q-field--error :deep(.q-field__bottom)
padding: 4px 0 0 0
font-weight: 500
font-size: 12px
line-height: 135% !important
</style>

7
src/components/base/BaseButton.vue
View File

@@ -51,13 +51,6 @@ export default {
"min-height": "40px",
};
},
btnWidth() {
return !this.width === "auto"
? {
"min-width": this.width,
}
: {};
},
miniSize() {
return this.type === "mini";
},

8
src/components/base/BaseClientFormCreate.vue
View File

@@ -63,7 +63,11 @@
padding="2px 0 0 0"
)
q-icon(name="app:ok", size="20px")
base-input.w-full(v-model="infoClient.basic.full_name", placeholder="ФИО*", outlined)
base-input.w-full(
v-model="infoClient.basic.full_name",
placeholder="ФИО*",
size="M"
)
.flex.flex-col.flex-auto.l.gap-y-8
.flex
button.title-info.px-6.py-2.cursor-pointer.w-full.text-sm(
@@ -94,7 +98,6 @@ import { fetchWrapper } from "@/shared/fetchWrapper";
import FormCreateBasicInfo from "@/pages/clients/components/FormCreateBasicInfo";
import FormCreateIdentityDocuments from "@/pages/clients/components/FormCreateIdentityDocuments";
import FormCreateAddresses from "@/pages/clients/components/FormCreateAddresses";
import BaseInput from "@/components/base/BaseInput";
import BasePopup from "@/components/base/BasePopup";
import BaseModal from "@/components/base/BaseModal";
import addImageIcon from "@/assets/icons/photo.svg";
@@ -103,6 +106,7 @@ import { addNotification } from "@/components/Notifications/notificationContext"
import * as moment from "moment";
import { v_model } from "@/shared/mixins/v-model";
import BaseButton from "@/components/base/BaseButton.vue";
import BaseInput from "@/components/BaseInput.vue";
export default {
name: "BaseClientFormClient",

10
src/components/base/BaseInputContainer.vue
View File

@@ -1,6 +1,6 @@
<template lang="pug">
.flex.flex-col.gap-y-2
.label.font-semibold.text-sm.opacity-40(v-if="label") {{ label }}
.flex.flex-col.gap-y-6px
.label.font-semibold.text-sm(v-if="label") {{ label }}
span.-mt-2(v-if="important", :style="{color: 'var(--font-obligatory-color)'}") *
slot
</template>
@@ -14,3 +14,9 @@ export default {
},
};
</script>
<style lang="sass" scoped>
.label
color: var(--font-grey-color)
line-height: 135%
</style>

4
src/components/base/Calendar/BaseCalendar.vue
View File

@@ -56,6 +56,10 @@ export default {
type: Function,
default: () => {},
},
width: {
type: String,
default: "286px",
},
},
data() {
return {

32
src/pages/login/TheLogin.vue
View File

@@ -11,29 +11,24 @@
) Войдите в аккаунт, чтобы начать пользоваться сервисом «Астра».
.flex.flex-col.gap-y-5
.flex.flex-col.gap-y-px
base-input.input(
:rule="[wrongData => !!wrongData]",
base-input.blue-color(
:rule="[wrongData => !!wrongData || 'Этого телефона нет в системе']",
v-model="user.username",
placeholder="+7 (915) 224–21–31",
label="Номер телефона",
outlined,
no-error-icon
size="L"
)
.red-color.text-smm.font-semibold(v-if="wrongData") Этого телефона нет в системе
.flex.flex-col.gap-y-px
base-input.input(
:rule="[wrongData => !!wrongData]",
base-input.blue-color(
:rule="[wrongData => !!wrongData || 'Неверный пароль']",
v-model="user.password",
:type="changeType",
placeholder="Введите ваш пароль",
label="Пароль",
outlined,
no-error-icon
size="L"
)
.flex.items-center.cursor-pointer(@click="changeView", v-if="!wrongData && user.password")
img(:src="eye_close", v-if="!isView")
img(:src="eye_open", v-else)
.red-color.text-smm.font-semibold(v-if="wrongData") Неверный пароль
img(:src="!isView ? eye_close : eye_open")
.flex.items-center.gap-x-8px.-ml-2
q-checkbox(@click="persist", v-model="person", type="checkbox")
.flex.non-italic.font-medium.base Запомнить меня
@@ -49,11 +44,11 @@
<script>
import { fetchWrapper } from "@/shared/fetchWrapper";
import BaseInput from "@/components/base/BaseInput";
import logoMark from "@/assets/images/logoMark.svg";
import BaseButton from "@/components/base/BaseButton.vue";
import eye_open from "@/assets/icons/eye_open.svg";
import eye_close from "@/assets/icons/eye_close.svg";
import BaseInput from "@/components/BaseInput.vue";
export default {
name: "TheLogin",
@@ -161,15 +156,6 @@ export default {
.q-btn
height: 48px
.input :deep(.label)
opacity: 1
.blue-color :deep(.label)
color: var(--font-dark-blue-color)
line-height: 135%
.input :deep(.q-field__control)
color: var(--font-dark-blue-color)
&:hover:before
border: 1px solid var(--font-dark-blue-color)
&:after
border-width: 1px !important
</style>

29
src/pages/newCalendar/components/CalendarHeader.vue
View File

@@ -1,14 +1,12 @@
<template lang="pug">
.calendar-header-wrapper.w-full.flex.items-center.p-4.justify-between
base-input(
base-input.search(
iconLeft,
outlined,
:width="280",
size="M",
placeholder="Найти ...",
fontSize="16px",
lineHeight="19px"
)
q-icon(name="app:icon-search", size="20px")
q-icon(name="app:search", size="20px")
.flex.gap-x-4.items-center.justify-center
q-btn(
color="secondary",
@@ -20,26 +18,23 @@
padding="2px 11px 2px 8px",
@click="previousWeek"
)
base-input(
outlined,
base-input.search(
size="M"
:width="300",
fontSize="16px",
lineHeight="19px",
iconRight,
v-model="currentWeek",
readonly
)
.h-5.w-5.flex.items-center.justify-center
q-icon.text.cursor-pointer(:name="calendarVisibility ? 'app:cancel' : 'app:calendar'",
:size="calendarVisibility ? '10px' : '16px'",
:size="calendarVisibility ? '12px' : '18px'",
)
q-menu(
:style="{'margin-top': '4px !important'}"
:style="{'margin-top': '8px !important'}"
v-model="calendarVisibility",
transition-show="scale",
transition-hide="scale"
self="top middle",
:offset="[122, 14]"
:offset="[118, 14]"
)
base-calendar(
v-model="dates",
@@ -74,11 +69,11 @@
</template>
<script>
import BaseInput from "@/components/base/BaseInput";
import BaseCalendar from "@/components/base/Calendar/BaseCalendar.vue";
import { mapState, mapActions } from "vuex";
import { v_model } from "@/shared/mixins/v-model";
import DateSwitcherSvg from "@/pages/newCalendar/components/CalendarDateSwitcherSvg.vue";
import BaseInput from "@/components/BaseInput.vue";
export default {
name: "CalendarHeader",
mixins: [v_model],
@@ -179,6 +174,12 @@ export default {
.q-btn-group :deep(.q-btn-item)
border-radius: 4px !important
.search :deep(.q-field__marginal)
height: auto !important
.search :deep(.q-field__prepend)
padding-right: 6px !important
</style>
<style lang="sass">
.q-field--outlined.q-field--readonly .q-field__control:before

2
src/pages/newMedicalCard/components/BasicDataForms/DocumentsForm.vue
View File

@@ -56,7 +56,7 @@
:rule="[(val) => !personDataField.includes(field.key) ? checkPassportFields(val, field.rules) : field.rules(val)]",
:autogrow="field.key === 'issued_by_org'"
)
.icon-copy.my-auto.text-lg.label-field(
.icon-copy.my-auto.text-lg.label-field.cursor-pointer(
v-if="checkCopiedFields(field.key) && !!docData[data.dataKey][field.key]",
@click="copyValue(docData[data.dataKey][field.key])"
)