@appscode/ui-builder/src/mixins/form-element-mixins.js

## Motivation

export default {
  components: { InfoButton: () => import("@/components/InfoButton.vue") },
  props: {
    label: {
      type: Object,
      default: () => ({}),
    },
    schema: {
      type: Object,
      default: () => ({}),
    },
    value: {
      type: null,
      default: "",
    },
    required: {
      type: Boolean,
      default: false,
    },
    disabled: {
      type: Boolean,
      default: false,
    },
    errors: {
      type: Array,
      default: () => [],
    },
    hideValue: {
      type: Boolean,
      default: false,
    },
  },

  data() {
    return {
      modelValue: "",
      originalModelValue: "",
      isOriginalUpdated: false,
      isLabelHoisted: false,
      isValueEmitting: false,
    };
  },

  computed: {
    type() {
      const inputType = this.schema.type;
      const format = this.schema.format;
      if (inputType === "integer" || inputType === "number") {
        return "number";
      } else if (format && format === "date") return "date";
      else if ((format && format === "password") || this.hideValue)
        return "password";
      else if (format && format === "email") return "email";
      return this.schema.format || "text";
    },

    typeConvertedValue() {
      if (this.type === "number" && this.modelValue)
        return parseInt(this.modelValue);

      return this.modelValue;
    },

    labelText() {
      return this.label.text || "label";
    },
  },

  methods: {
    onFocusInput() {
      this.isLabelHoisted = true;
      // required for showing active button
      this.$emit("focus");
    },
    onFocusOutInput() {
      // to handle label hoisting issue for number 0 and number with prefix 'e'
      if (typeof this.modelValue === "number" && this.modelValue === "") {
        // set label hoisting false when number is empty
        this.isLabelHoisted = false;
      } else {
        // set label hoisting status when number with "e" character
        if (this.type === "number") this.isLabelHoisted = true;
        else if (!this.modelValue) this.isLabelHoisted = false;
      }
      this.$emit("focusout");
    },
  },

  watch: {
    typeConvertedValue: {
      deep: true,
      handler(n) {
        this.isValueEmitting = true;
        setImmediate(() => {
          this.$emit("input", n);
          this.isValueEmitting = false;
        });
      },
    },
    value: {
      deep: true,
      immediate: true,
      handler(n) {
        if (this.modelValue !== n) {
          this.modelValue = n;

          // update original model value if not updated
          if (!this.isOriginalUpdated) {
            this.originalModelValue = this.modelValue;
            this.isOriginalUpdated = true;
          }
        }
      },
    },
  },
};