[WIP] Исправил стили инпутов

This commit is contained in:
megavrilinvv
2023-01-19 15:31:23 +03:00
parent e0831f521f
commit 61085dc51a
33 changed files with 140 additions and 281 deletions

View File

@@ -2,7 +2,7 @@
.flex.w-full(class="gap-x-1.5")
.flex(:id="value.id" @click="(e) => saveNetworkId(e)")
base-select-networks(:style-border="true" :list-data="listAddingNetworks" :option-data="selectedOption" :choose-option="chooseNetwork" :width-select="42")
base-input.w-full(v-model="value.username", placeholder="Ссылкa")
base-input.w-full(v-model="value.username", placeholder="Ссылкa" outlined)
</template>
<script>

View File

@@ -53,7 +53,7 @@
@click="closeAddImage",
icon="app:icon-ok"
)
base-input.w-full(v-model="infoClient.basic.full_name", placeholder="ФИО*")
base-input.w-full(v-model="infoClient.basic.full_name", placeholder="ФИО*", outlined)
.flex.flex-col.flex-auto.l.gap-y-8
.flex
button.title-info.px-6.py-2.cursor-pointer.w-full.text-sm(
@@ -93,7 +93,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 FormCreateAdditional from "@/pages/clients/components/FormCreateAdditional";
import BaseInput from "@/components/base/BaseInput";
import BasePopup from "@/components/base/BasePopup";
import BaseModal from "@/components/base/BaseModal";
@@ -101,6 +100,7 @@ import addImageIcon from "@/assets/icons/photo.svg";
import TheNotificationProvider from "@/components/Notifications/TheNotificationProvider";
import { addNotification } from "@/components/Notifications/notificationContext";
import * as moment from "moment";
export default {
name: "BaseClientFormClient",
components: {
@@ -108,7 +108,6 @@ export default {
FormCreateBasicInfo,
FormCreateIdentityDocuments,
FormCreateAddresses,
FormCreateAdditional,
BasePopup,
BaseModal,
addImageIcon,

View File

@@ -3,7 +3,7 @@
span.title-section.font-semibold.text-xs(v-if="field.title" ) {{field.title}}
.flex.items-center(v-if="field.type === 'text' || field.type === 'textarea'" class="gap-x-2.5")
span.w-4.icon(v-if="field.icon" :class="field.icon")
base-input(v-model="data[field.label]" :with-icon="field.copy")
base-input(v-model="data[field.label]" :with-icon="field.copy", outlined)
.flex.items-center(v-if="field.copy && data[field.label]")
.copy.icon-copy.cursor-pointer(@click="() => copyValue(data[field.label])")
base-input(v-if="field.type === 'date'" v-model="data[field.label]")

View File

@@ -35,7 +35,7 @@ export default {
},
outlined: {
type: Boolean,
default: true,
default: false,
},
square: {
type: Boolean,

View File

@@ -1,146 +0,0 @@
<template lang="pug">
.flex.flex-col.gap-y-2
.font-semibold.text-sm.opacity-40(
v-if="label",
:class="labelClass"
) {{ label }}
.base-select.flex.justify-between.items-center.py-9px.px-4.gap-4.relative(
ref="select",
@click="open = !open",
:class="{'open': open, 'border-none': borderNone}",
)
input.w-full.outline-0.not-italic(
:placeholder="placeholder",
v-model="value.label",
)
.flex.items-center
span.icon-down-arrow.open-icon.flex.text-xsm(:class="{'open': open }")
base-options(v-if="open")
.items-container.mt-1(
@click="closeOptions",
v-click-outside="leaveSelect",
:class="textClass"
)
.empty-window.py-2.px-4(v-if="items.length === 0") Ничего не найдено
.item.py-2.px-4.cursor-pointer(
v-else
v-for="item in items",
:key="item?.id",
:class="{'center': center}",
@click="clickItem(item?.id, item?.label)"
) {{ item?.label }}
</template>
<script>
import BaseOptions from "@/components/base/BaseOptions.vue";
import BaseInput from "@/components/base/BaseInput.vue";
export default {
name: "BaseSearchSelect",
components: { BaseOptions, BaseInput },
props: {
placeholder: String,
items: {
type: Array,
default: () => [],
},
label: String,
modelValue: Object,
center: Boolean,
borderNone: Boolean,
textStyle: String,
labelStyle: String,
},
data() {
return {
open: false,
filteredItems: [],
};
},
emits: ["update:modelValue"],
computed: {
value: {
get() {
return this.modelValue;
},
set(value) {
this.$emit("update:modelValue", value);
},
},
textClass() {
return this.textStyle
? {
[this.textStyle]: true,
}
: {
"text-base": true,
};
},
labelClass() {
return this.labelStyle
? {
[this.labelStyle]: true,
}
: {
"text-sm": true,
};
},
},
methods: {
clickItem(id, label) {
this.value = {
id: id,
label: label,
};
},
leaveSelect() {
this.open = false;
},
closeOptions(e) {
e.stopPropagation();
this.open = false;
},
},
};
</script>
<style scoped lang="sass">
.base-select
width: 100%
border: 1.5px solid var(--border-light-grey-color)
border-radius: 4px
background-color: white
user-select: none
height: 40px
&.open
border: 1.5px solid var(--btn-blue-color)
.items-container
box-shadow: 1px 1px 8px rgba(37, 40, 80, 0.15)
border-radius: 4px
background-color: white
max-height: 142px
overflow-y: auto
.placeholder
color: var(--font-black-color)
opacity: 0.4
text-overflow: ellipsis
overflow: hidden
.item
border-bottom: 0.5px solid var(--border-light-grey-color)
color: var(--font-black-color)
&:hover
background-color: rgba(215, 217, 255, 0.25)
&:last-child
border-bottom: none
.open-icon
&.open
transform: rotate(180deg)
.border-none
border: none
.center
display: flex
justify-content: center
.empty-window
color: var(--font-black-color)
pointer-events: none
</style>