WIP Перемещен инпут
This commit is contained in:
Daria Golova
@@ -1,29 +1,24 @@
|
||||
<template lang="pug">
|
||||
base-input-container.gap-y-2(:important="important", :label="label", :style="{width: width + 'px' }")
|
||||
q-input(
|
||||
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="{'circle': circle, 'font-input': true, 'doc': doc}",
|
||||
:input-style="{ color: textColor, borderColor: borderColor, resize: resize, fontSize: fontSize, fontWeight: fontWeight, lineHeight: lineHeight, minHeight: minHeight}",
|
||||
:input-style="{resize: resize, height: height}",
|
||||
:borderless="borderless",
|
||||
:placeholder="placeholder",
|
||||
:outlined="outlined",
|
||||
:dense="dense",
|
||||
outlined,
|
||||
:type="type",
|
||||
:readonly="readonly",
|
||||
:disable="disabled",
|
||||
:filled="filled",
|
||||
:bg-color="filled || standout ? '' : 'white'",
|
||||
:rules="rule",
|
||||
:lazy-rules="lazyRule",
|
||||
:item-aligned="itemAligned",
|
||||
:no-error-icon="noErrorIcon",
|
||||
no-error-icon,
|
||||
:standout="readonly",
|
||||
:mask="mask",
|
||||
:maxlength="maxLength",
|
||||
:autogrow="autogrow",
|
||||
:square="square",
|
||||
:standout="standout"
|
||||
:accept="accept",
|
||||
:debounce="debounce",
|
||||
:shadow-text="shadowText",
|
||||
@@ -31,10 +26,10 @@
|
||||
hide-bottom-space
|
||||
)
|
||||
template(v-slot:prepend, v-if="iconLeft")
|
||||
slot
|
||||
slot(name="iconLeft")
|
||||
template(v-slot:append, v-if="iconRight")
|
||||
slot
|
||||
slot.cursor-pointer(v-if="!iconLeft && !iconRight")
|
||||
slot(name="iconRight")
|
||||
slot(v-if="!iconLeft && !iconRight")
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@@ -45,41 +40,8 @@ export default {
|
||||
components: { BaseInputContainer },
|
||||
props: {
|
||||
multiple: Boolean,
|
||||
circle: Boolean,
|
||||
doc: Boolean,
|
||||
autofocus: Boolean,
|
||||
dense: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
fontSize: {
|
||||
type: String,
|
||||
default: "14px",
|
||||
},
|
||||
fontWeight: {
|
||||
type: Number,
|
||||
default: 500,
|
||||
},
|
||||
minHeight: {
|
||||
type: String,
|
||||
default: "0px",
|
||||
},
|
||||
lineHeight: {
|
||||
type: String,
|
||||
default: "19px",
|
||||
},
|
||||
outlined: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
square: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
filled: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
borderless: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
@@ -91,10 +53,6 @@ export default {
|
||||
type: {
|
||||
default: "text",
|
||||
},
|
||||
standout: {
|
||||
type: [Boolean, String],
|
||||
default: false,
|
||||
},
|
||||
accept: {
|
||||
type: String,
|
||||
default: "",
|
||||
@@ -107,12 +65,8 @@ export default {
|
||||
mask: String,
|
||||
debounce: [String, Number],
|
||||
width: Number,
|
||||
maxLength: Number,
|
||||
textColor: String,
|
||||
borderColor: String,
|
||||
rule: Array,
|
||||
lazyRule: [Boolean, String],
|
||||
noErrorIcon: Boolean,
|
||||
itemAligned: Boolean,
|
||||
modelValue: [String, Date, Number],
|
||||
placeholder: String,
|
||||
@@ -123,6 +77,9 @@ export default {
|
||||
iconRight: Boolean,
|
||||
name: String,
|
||||
important: Boolean,
|
||||
size: String,
|
||||
circle: Boolean,
|
||||
height: String,
|
||||
},
|
||||
emits: ["update:modelValue"],
|
||||
computed: {
|
||||
@@ -141,6 +98,104 @@ export default {
|
||||
: this.$emit("update:modelValue", value);
|
||||
},
|
||||
},
|
||||
sizeVariable() {
|
||||
if (this.size === "XS")
|
||||
return {
|
||||
"--input-height": "28px",
|
||||
"--text-size": "12px",
|
||||
"--line-height": "135%",
|
||||
"--px": "0 8px",
|
||||
"--py": "10px 0",
|
||||
};
|
||||
if (this.size === "S")
|
||||
return {
|
||||
"--input-height": "32px",
|
||||
"--text-size": "12px",
|
||||
"--line-height": "135%",
|
||||
"--px": "0 8px",
|
||||
"--py": "10px 0",
|
||||
};
|
||||
if (this.size === "M")
|
||||
return {
|
||||
"--input-height": "40px",
|
||||
"--text-size": "16px",
|
||||
"--line-height": "normal",
|
||||
"--px": "0 16px",
|
||||
"--py": "8px 0",
|
||||
};
|
||||
if (this.size === "L")
|
||||
return {
|
||||
"--input-height": "48px",
|
||||
"--text-size": "16px",
|
||||
"--line-height": "normal",
|
||||
"--px": "0 16px",
|
||||
"--py": "8px 0",
|
||||
};
|
||||
if (this.size)
|
||||
return {
|
||||
"--input-height": this.size,
|
||||
"--text-size": "16px",
|
||||
"--line-height": "normal",
|
||||
"--px": "0 16px",
|
||||
"--py": "8px 0",
|
||||
};
|
||||
return {
|
||||
"--input-height": "56px",
|
||||
"--text-size": "16px",
|
||||
"--line-height": "normal",
|
||||
"--px": "0 16px",
|
||||
"--py": "8px 0",
|
||||
};
|
||||
// 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",
|
||||
// };
|
||||
// case "auto":
|
||||
// return {
|
||||
// "--input-height": "auto",
|
||||
// "--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>
|
||||
@@ -162,13 +217,63 @@ export default {
|
||||
height: 100%
|
||||
z-index: 5
|
||||
opacity: 0
|
||||
cursor: pointer
|
||||
cursor: pointer !important
|
||||
::file-selector-button
|
||||
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(input[type="file" i])
|
||||
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
|
||||
|
||||
.input :deep(.q-field__marginal)
|
||||
height: auto !important
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user