95 lines
1.9 KiB
Vue
95 lines
1.9 KiB
Vue
<template lang="pug">
|
|
base-input-container.gap-y-2(:label="label")
|
|
q-input(
|
|
v-model="value",
|
|
:class="{'circle': circle}",
|
|
:input-style="{ color: textColor, width: width + 'px' }",
|
|
:borderless="borderless",
|
|
:placeholder="placeholder",
|
|
:outlined="outlined",
|
|
:dense="dense",
|
|
:type="type",
|
|
:filled="filled",
|
|
:disable="disabled",
|
|
:rules="rule",
|
|
:mask="mask",
|
|
:maxlength="maxLength",
|
|
:autogrow="autogrow",
|
|
:square="square",
|
|
hide-bottom-space
|
|
)
|
|
slot.cursor-pointer
|
|
</template>
|
|
|
|
<script>
|
|
import BaseInputContainer from "@/components/base/BaseInputContainer.vue";
|
|
|
|
export default {
|
|
name: "BaseInput",
|
|
components: { BaseInputContainer },
|
|
props: {
|
|
circle: Boolean,
|
|
dense: {
|
|
type: Boolean,
|
|
default: true,
|
|
},
|
|
outlined: {
|
|
type: Boolean,
|
|
default: true,
|
|
},
|
|
square: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
filled: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
borderless: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
autogrow: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
type: {
|
|
default: "text",
|
|
},
|
|
mask: String,
|
|
width: Number,
|
|
maxLength: String,
|
|
textColor: String,
|
|
rule: Array,
|
|
modelValue: [String, Date],
|
|
placeholder: String,
|
|
disabled: Boolean,
|
|
label: String,
|
|
},
|
|
emits: ["update:modelValue"],
|
|
computed: {
|
|
value: {
|
|
get() {
|
|
return this.type === "date"
|
|
? this.modelValue?.toISOString().split("T")[0]
|
|
: 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>
|
|
.circle
|
|
width: 100%
|
|
height: 100%
|
|
border-radius: 50%
|
|
z-index: 5
|
|
opacity: 0
|
|
</style>
|