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-14 18:17:57 +03:00
parent ee3c828a22
commit 27f25a8826
12 changed files with 347 additions and 225 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/BaseInput.vue
View File

@@ -4,7 +4,7 @@
v-model="value",
:name="name",
:multiple="multiple",
:class="{'font-input': true, 'doc': doc}",
:class="{'circle': circle, 'font-input': true, 'doc': doc}",
:input-style="{resize: resize,}",
:borderless="borderless",
:placeholder="placeholder",
@@ -78,6 +78,7 @@ export default {
name: String,
important: Boolean,
size: String,
circle: Boolean,
},
emits: ["update:modelValue"],
computed: {
@@ -214,4 +215,7 @@ export default {
font-weight: 500
font-size: 12px
line-height: 135% !important
.input :deep(.q-field__marginal)
height: auto !important
</style>

4
src/components/base/BaseAddingNetwork.vue
View File

@@ -1,11 +1,11 @@
<template lang="pug">
.flex.w-full(class="gap-x-1.5")
base-select(:items="items", v-model="network.kind")
base-input.w-full(v-model="network.username", placeholder="Ссылкa", outlined, :rule="ruleInput", no-error-icon)
base-input.w-full(v-model="network.username", placeholder="Ссылкa", :rule="ruleInput", size="M")
</template>
<script>
import BaseInput from "@/components/base/BaseInput";
import BaseInput from "@/components/BaseInput.vue";
import BaseSelect from "@/components/base/BaseSelect.vue";
export default {
name: "TableAddingNetwork",

217
src/components/base/BaseInputDate.vue
View File

@@ -1,27 +1,18 @@
<template lang="pug">
base-input-container.gap-y-2(:label="label", :style="{width: width + 'px' }")
q-input(
base-input-container.gap-y-2(:label="label", :style="{width: width + 'px', ...sizeVariable }")
q-input.input(
v-model="value",
:name="name",
:class="{'circle': circle, 'font-input': true}",
:input-style="{ color: textColor, borderColor: borderColor, resize: resize}",
:borderless="borderless",
:input-style="{resize: resize}",
:placeholder="placeholder",
:outlined="outlined",
:dense="dense",
outlined,
:readonly="readonly",
:disable="disabled",
:filled="filled",
mask="##.##.####"
:bg-color="filled || standout ? '' : 'white'",
mask="##.##.####",
:rules="[checkInput]",
:lazy-rules="lazyRule",
:item-aligned="itemAligned",
:no-error-icon="noErrorIcon",
:maxlength="maxLength",
:autogrow="autogrow",
:square="square",
:standout="standout"
no-error-icon,
:accept="accept",
:debounce="debounce",
hide-bottom-space,
@@ -31,60 +22,32 @@
q-icon(
name="app:calendar",
class="cursor-pointer",
size="16px"
size="18px"
)
q-popup-proxy(cover, transition-show="scale", transition-hide="scale")
q-date(
v-model="value",
mask="DD.MM.YYYY",
minimal
q-menu(
:style="{'margin-top': '8px !important'}",
v-model="calendarVisibility",
transition-show="scale",
transition-hide="scale",
self="top middle",
:offset="[118, 14]"
)
base-calendar(
v-model="internalDate",
:start-year="2000",
:save="closeCalendar",
@update:model-value="transmitInternalDate"
)
.flex.items-center.justify-end
q-btn(
v-close-popup,
label="Закрыть",
color="primary",
flat,
no-caps
)
</template>
<script>
import BaseInputContainer from "@/components/base/BaseInputContainer.vue";
import * as moment from "moment/moment";
import BaseCalendar from "@/components/base/Calendar/BaseCalendar.vue";
export default {
name: "BaseInputDate",
components: { BaseInputContainer },
components: { BaseInputContainer, BaseCalendar },
props: {
circle: Boolean,
dense: {
type: Boolean,
default: true,
},
outlined: {
type: Boolean,
default: false,
},
square: {
type: Boolean,
default: false,
},
filled: {
type: Boolean,
default: false,
},
borderless: {
type: Boolean,
default: false,
},
autogrow: {
type: Boolean,
default: false,
},
standout: {
type: [Boolean, String],
default: false,
},
accept: {
type: String,
default: "",
@@ -95,11 +58,7 @@ export default {
},
debounce: [String, Number],
width: Number,
maxLength: Number,
textColor: String,
borderColor: String,
lazyRule: [Boolean, String],
noErrorIcon: Boolean,
itemAligned: Boolean,
modelValue: Date,
placeholder: String,
@@ -108,18 +67,30 @@ export default {
readonly: Boolean,
iconLeft: Boolean,
name: String,
size: String,
},
emits: ["update:modelValue"],
data() {
return {
calendarVisibility: false,
internalDate: null,
};
},
computed: {
value: {
get() {
if (
moment(this.modelValue).isValid() &&
typeof this.modelValue === "object"
)
) {
this.changeInternalDate(moment(this.modelValue));
return moment(this.modelValue).format("DD.MM.YYYY");
if (moment(this.convertFormat(this.modelValue)).isValid())
}
if (moment(this.convertFormat(this.modelValue)).isValid()) {
this.changeInternalDate(moment(this.modelValue));
return this.modelValue;
}
this.changeInternalDate(null);
return null;
},
set(value) {
@@ -131,6 +102,50 @@ export default {
);
},
},
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",
};
}
},
},
methods: {
convertFormat(date) {
@@ -141,6 +156,15 @@ export default {
checkInput(val) {
return moment(this.convertFormat(val)).isValid();
},
closeCalendar() {
this.calendarVisibility = false;
},
changeInternalDate(value) {
this.internalDate = value;
},
transmitInternalDate(value) {
this.value = value?.format("DD.MM.YYYY");
},
},
};
</script>
@@ -149,17 +173,56 @@ export default {
.font-input
font-feature-settings: 'pnum' on, 'lnum' on
.circle
width: 100%
height: 100%
border-radius: 50%
z-index: 5
opacity: 0
cursor: pointer
</style>
<style lang="sass">
.q-field--standout.q-field--readonly .q-field__control:before
border: none !important
.q-field--standout .q-field__control
.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
.input :deep(.q-field__marginal)
height: auto !important
</style>

6
src/components/base/BaseInputFullName.vue
View File

@@ -29,7 +29,7 @@
type="file",
id="image-upload",
accept="image/*",
@change="(e) => previewImage(e)"
@change="(e) => previewImage(e)",
)
.avatar.flex.absolute.items-center.gap-x-6
img.avatar.object-cover(for="image-upload", :src="image", v-if="image")
@@ -41,14 +41,14 @@
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")
</template>
<script>
import BaseModal from "./BaseModal.vue";
import BaseInput from "./BaseInput.vue";
import addImageIcon from "@/assets/icons/photo.svg";
import BaseButton from "@/components/base/BaseButton.vue";
import BaseInput from "@/components/BaseInput.vue";
export default {
name: "BaseInputFullName",

165
src/components/base/BaseInputTime.vue
View File

@@ -1,36 +1,28 @@
<template lang="pug">
base-input-container.gap-y-2(:label="label", :style="{width: width + 'px' }")
q-input(
base-input-container.gap-y-2(:label="label", :style="{width: width + 'px', ...sizeVariable }")
q-input.input(
v-model="value",
:name="name",
:class="{'circle': circle, 'font-input': true}",
:input-style="{ color: textColor, borderColor: borderColor, resize: resize}",
:borderless="borderless",
:class="{'font-input': true}",
:input-style="{ resize: resize}",
:placeholder="placeholder",
:outlined="outlined",
:dense="dense",
outlined,
:readonly="readonly",
:disable="disabled",
:filled="filled",
:bg-color="filled || standout ? '' : 'white'",
:rules="[checkTime]",
:lazy-rules="lazyRule",
:item-aligned="itemAligned",
:no-error-icon="noErrorIcon",
mask="time",
:maxlength="maxLength",
:autogrow="autogrow",
:square="square",
:standout="standout"
:accept="accept",
:debounce="debounce",
hide-bottom-space
hide-bottom-space,
no-error-icon
)
template(v-slot:append)
q-icon(
name="app:time",
class="cursor-pointer",
size="16px"
size="19px"
)
q-popup-proxy(cover, transition-show="scale", transition-hide="scale")
q-time(v-model="value", mask="HH:mm")
@@ -51,35 +43,6 @@ export default {
name: "BaseInputTime",
components: { BaseInputContainer },
props: {
circle: Boolean,
dense: {
type: Boolean,
default: true,
},
outlined: {
type: Boolean,
default: false,
},
square: {
type: Boolean,
default: false,
},
filled: {
type: Boolean,
default: false,
},
borderless: {
type: Boolean,
default: false,
},
autogrow: {
type: Boolean,
default: false,
},
standout: {
type: [Boolean, String],
default: false,
},
accept: {
type: String,
default: "",
@@ -90,12 +53,8 @@ export default {
},
debounce: [String, Number],
width: Number,
maxLength: Number,
textColor: String,
borderColor: String,
rule: Array,
lazyRule: [Boolean, String],
noErrorIcon: Boolean,
itemAligned: Boolean,
modelValue: String,
placeholder: String,
@@ -104,6 +63,7 @@ export default {
readonly: Boolean,
iconLeft: Boolean,
name: String,
size: String,
},
emits: ["update:modelValue"],
computed: {
@@ -115,6 +75,50 @@ export default {
this.$emit("update:modelValue", this.checkTime(value) ? value : null);
},
},
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",
};
}
},
},
methods: {
checkTime(val) {
@@ -133,17 +137,56 @@ export default {
.font-input
font-feature-settings: 'pnum' on, 'lnum' on
.circle
width: 100%
height: 100%
border-radius: 50%
z-index: 5
opacity: 0
cursor: pointer
</style>
<style lang="sass">
.q-field--standout.q-field--readonly .q-field__control:before
border: none !important
.q-field--standout .q-field__control
.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
.input :deep(.q-field__marginal)
height: auto !important
</style>

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

@@ -56,11 +56,16 @@ export default {
type: Function,
default: () => {},
},
cancel: {
type: Function,
default: () => {},
},
width: {
type: String,
default: "286px",
},
},
emits: ["update:modelValue"],
data() {
return {
internalDate: moment(),
@@ -95,10 +100,10 @@ export default {
},
},
internalMonth() {
let formattedMonth = this.internalDate.format("MMMM");
let formattedMonth = this.internalDate?.format("MMMM");
return `${
formattedMonth[0].toUpperCase() + formattedMonth.slice(1)
} ${this.internalDate.format("YYYY")}`;
} ${this.internalDate?.format("YYYY")}`;
},
},
methods: {
@@ -106,20 +111,34 @@ export default {
this.currentForm = this.forms.find((elem) => elem.component === form);
},
changeDate() {
if (this.range) {
this.internalDate = this.value?.from?.clone();
this.externalValue = {
from: this.value?.from?.clone(),
to: this.value?.to?.clone(),
};
if (this.value) {
if (this.range) {
this.internalDate = this.value?.from?.clone();
this.externalValue = {
from: this.value?.from?.clone(),
to: this.value?.to?.clone(),
};
} else {
this.internalDate = this.value?.clone();
this.externalValue = this.value?.clone();
}
} else {
this.internalDate = this.value?.clone();
this.externalValue = this.value?.clone();
if (this.range) {
this.internalDate = moment();
this.externalValue = {
from: null,
to: null,
};
} else {
this.internalDate = moment();
this.externalValue = null;
}
}
},
cancelChanges() {
this.changeDate();
this.changeForm("CalendarDates");
this.cancel();
},
saveExternalChanges() {
if (this.range)

2
src/components/base/Calendar/CalendarDates.vue
View File

@@ -163,7 +163,7 @@ export default {
},
selectDate(date) {
if (!this.range) {
this.externalValue = date;
this.externalValue = date.clone();
return;
}
if (this.rangeCount) {