153 lines
3.3 KiB
Vue
153 lines
3.3 KiB
Vue
<template lang="pug">
|
|
base-input-container.gap-y-2(:label="label", :style="{width: width + 'px' }")
|
|
q-input(
|
|
v-model="value",
|
|
:name="name",
|
|
:multiple="multiple"
|
|
:class="{'circle': circle, 'font-input': true, 'doc': doc}",
|
|
:input-style="{ color: textColor, borderColor: borderColor, resize: resize}",
|
|
:borderless="borderless",
|
|
:placeholder="placeholder",
|
|
:outlined="outlined",
|
|
:dense="dense",
|
|
: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",
|
|
:mask="mask",
|
|
:maxlength="maxLength",
|
|
:autogrow="autogrow",
|
|
:square="square",
|
|
:standout="standout"
|
|
:accept="accept",
|
|
:debounce="debounce",
|
|
:shadow-text="shadowText"
|
|
hide-bottom-space
|
|
)
|
|
template(v-slot:prepend, v-if="iconLeft")
|
|
slot
|
|
slot.cursor-pointer(v-if="!iconLeft")
|
|
</template>
|
|
|
|
<script>
|
|
import BaseInputContainer from "@/components/base/BaseInputContainer.vue";
|
|
|
|
export default {
|
|
name: "BaseInput",
|
|
components: { BaseInputContainer },
|
|
props: {
|
|
multiple: Boolean,
|
|
circle: Boolean,
|
|
doc: 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,
|
|
},
|
|
type: {
|
|
default: "text",
|
|
},
|
|
standout: {
|
|
type: [Boolean, String],
|
|
default: false,
|
|
},
|
|
accept: {
|
|
type: String,
|
|
default: "",
|
|
},
|
|
resize: {
|
|
type: String,
|
|
default: "none",
|
|
},
|
|
shadowText: String,
|
|
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,
|
|
disabled: Boolean,
|
|
label: String,
|
|
readonly: Boolean,
|
|
iconLeft: Boolean,
|
|
name: 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);
|
|
},
|
|
},
|
|
},
|
|
};
|
|
</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
|
|
</style>
|
|
<style lang="sass">
|
|
.q-field--standout.q-field--readonly .q-field__control:before
|
|
border: none !important
|
|
.q-field--standout .q-field__control
|
|
background: var(--bg-light-grey) !important
|
|
</style>
|