astra-frontend/src/components/BaseInput.vue

<template lang="pug">
  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="{'font-input': true, 'doc': doc}",
      :input-style="{resize: resize,}",
      :borderless="borderless",
      :placeholder="placeholder",
      outlined,
      :type="type",
      :readonly="readonly",
      :disable="disabled",
      :rules="rule",
      :lazy-rules="lazyRule",
      :item-aligned="itemAligned",
      no-error-icon,
      :standout="readonly",
      :mask="mask",
      :autogrow="autogrow",
      :accept="accept",
      :debounce="debounce",
      :shadow-text="shadowText",
      :autofocus="autofocus",
      hide-bottom-space,
    )
      template(v-slot:prepend, v-if="iconLeft")
        slot
      template(v-slot:append, v-if="iconRight")
        slot
      slot(v-if="!iconLeft && !iconRight")
</template>

<script>
import BaseInputContainer from "@/components/base/BaseInputContainer.vue";

export default {
  name: "BaseInput",
  components: { BaseInputContainer },
  props: {
    multiple: Boolean,
    doc: Boolean,
    autofocus: Boolean,
    borderless: {
      type: Boolean,
      default: false,
    },
    autogrow: {
      type: Boolean,
      default: false,
    },
    type: {
      default: "text",
    },
    accept: {
      type: String,
      default: "",
    },
    resize: {
      type: String,
      default: "none",
    },
    shadowText: String,
    mask: String,
    debounce: [String, Number],
    width: Number,
    rule: Array,
    lazyRule: [Boolean, String],
    itemAligned: Boolean,
    modelValue: [String, Date, Number],
    placeholder: String,
    disabled: Boolean,
    label: String,
    readonly: Boolean,
    iconLeft: Boolean,
    iconRight: Boolean,
    name: String,
    important: Boolean,
    size: 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);
      },
    },
    sizeVariable() {
      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",
          };
        default:
          return {
            "--input-height": "56px",
            "--text-size": "16px",
            "--line-height": "normal",
            "--px": "0 16px",
            "--py": "8px 0",
          };
      }
    },
  },
};
</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

.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
</style>