[WIP] Фикс инпута
This commit is contained in:
@@ -2,7 +2,8 @@
|
|||||||
.flex.flex-col.gap-y-2
|
.flex.flex-col.gap-y-2
|
||||||
.label.font-semibold.text-sm.opacity-40(
|
.label.font-semibold.text-sm.opacity-40(
|
||||||
v-if="label",
|
v-if="label",
|
||||||
:class="labelClass"
|
:class="labelClass",
|
||||||
|
:style="{color: 'var(--font-black-color)'}"
|
||||||
) {{ label }}
|
) {{ label }}
|
||||||
q-input(
|
q-input(
|
||||||
v-model="value",
|
v-model="value",
|
||||||
@@ -19,22 +20,7 @@
|
|||||||
hide-bottom-space,
|
hide-bottom-space,
|
||||||
autogrow
|
autogrow
|
||||||
)
|
)
|
||||||
.flex.items-center(:v-if="withIcon")
|
|
||||||
slot.cursor-pointer
|
slot.cursor-pointer
|
||||||
|
|
||||||
//- slot(name='icon')
|
|
||||||
//- .input-wrapper.flex.gap-x-2.px-4.box-border.py-10px(
|
|
||||||
//- :class="{'border-none': borderNone, 'border-error': borderError }"
|
|
||||||
//- :style="disabledBackgroundStyle"
|
|
||||||
//- )
|
|
||||||
//- input.input.w-full.outline-0.not-italic(
|
|
||||||
//- v-model="value",
|
|
||||||
//- :class="textClass",
|
|
||||||
//- :placeholder="placeholder",
|
|
||||||
//- :disabled="disabled",
|
|
||||||
//- :type="type"
|
|
||||||
//- )
|
|
||||||
//- slot(name='icon')
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
@@ -56,16 +42,11 @@ export default {
|
|||||||
type: {
|
type: {
|
||||||
default: "text",
|
default: "text",
|
||||||
},
|
},
|
||||||
withIcon: {
|
|
||||||
type: Boolean,
|
|
||||||
default: false,
|
|
||||||
},
|
|
||||||
mask: String,
|
mask: String,
|
||||||
maxLength: String,
|
maxLength: String,
|
||||||
rule: Array,
|
rule: Array,
|
||||||
modelValue: String,
|
modelValue: String,
|
||||||
placeholder: String,
|
placeholder: String,
|
||||||
borderNone: Boolean,
|
|
||||||
disabled: Boolean,
|
disabled: Boolean,
|
||||||
label: String,
|
label: String,
|
||||||
textStyle: String,
|
textStyle: String,
|
||||||
@@ -99,32 +80,6 @@ export default {
|
|||||||
"text-sm": true,
|
"text-sm": true,
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
disabledBackgroundStyle() {
|
|
||||||
return this.disabled
|
|
||||||
? {
|
|
||||||
"background-color": "var(--bg-disable-grey-color)",
|
|
||||||
}
|
|
||||||
: false;
|
|
||||||
},
|
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="sass" scoped>
|
|
||||||
//TODO: Вынести grey borders в taiwindConfig
|
|
||||||
.input-wrapper
|
|
||||||
border: 1.5px solid var(--border-light-grey-color)
|
|
||||||
border-radius: 4px
|
|
||||||
background-color: var(--default-white)
|
|
||||||
color: var(--font-black-color)
|
|
||||||
height: 40px
|
|
||||||
|
|
||||||
.input
|
|
||||||
background-color: inherit
|
|
||||||
&:disabled, &[disabled]
|
|
||||||
background-color: var(--bg-disable-grey-color)
|
|
||||||
color: var(--font-grey-color-0)
|
|
||||||
|
|
||||||
.label
|
|
||||||
color: var(--font-black-color)
|
|
||||||
</style>
|
|
||||||
|
|||||||
@@ -9,6 +9,7 @@
|
|||||||
placeholder="Введите фамилию",
|
placeholder="Введите фамилию",
|
||||||
@keyup.enter="searchLastName"
|
@keyup.enter="searchLastName"
|
||||||
)
|
)
|
||||||
|
.flex.items-center.cursor-pointer
|
||||||
.icon-search
|
.icon-search
|
||||||
base-button.font-semibold(
|
base-button.font-semibold(
|
||||||
v-if="createdClientName === ''",
|
v-if="createdClientName === ''",
|
||||||
|
|||||||
@@ -24,6 +24,7 @@
|
|||||||
label="Пароль",
|
label="Пароль",
|
||||||
withIcon
|
withIcon
|
||||||
)
|
)
|
||||||
|
.flex.items-center.cursor-pointer
|
||||||
q-icon(
|
q-icon(
|
||||||
v-if="!wrongData && user.password"
|
v-if="!wrongData && user.password"
|
||||||
:name="isView ? 'visibility_off' : 'visibility'",
|
:name="isView ? 'visibility_off' : 'visibility'",
|
||||||
|
|||||||
Reference in New Issue
Block a user