<template lang="pug">
  .flex.flex-col.gap-y-2
    .label.font-semibold.text-sm.opacity-40(
      v-if="label",
      :class="labelClass",
      :style="{color: 'var(--font-black-color)'}"
    ) {{ label }}
    q-input(
      v-model="value",
      :input-class="textClass",
      :placeholder="placeholder",
      :outlined="outlined",
      :dense="dense",
      :type="type",
      :filled="filled",
      :disable="disabled",
      :rules="rule",
      :mask="mask",
      :maxlength="maxLength"
      hide-bottom-space,
      autogrow
    )
      slot.cursor-pointer
</template>

<script>
export default {
  name: "BaseInput",
  props: {
    dense: {
      type: Boolean,
      default: true,
    },
    outlined: {
      type: Boolean,
      default: true,
    },
    filled: {
      type: Boolean,
      default: false,
    },
    type: {
      default: "text",
    },
    mask: String,
    maxLength: String,
    rule: Array,
    modelValue: String,
    placeholder: String,
    disabled: Boolean,
    label: String,
    textStyle: String,
    labelStyle: String,
  },
  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,
          };
    },
  },
};
</script>
