All files / src/BaseInput BaseInput.vue.js

94.73% Statements 18/19
92.3% Branches 12/13
100% Functions 8/8
94.73% Lines 18/19

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89                  1x                         11x           11x           10x                 11x 8x             7x 5x 5x   5x           7x           23x       11x 7x   11x             1x 1x 1x          
// @ts-check
import { has, invoke, isEmpty, isNil, toString } from "lodash";
import Vue from "vue";
 
import InputError from "./InputError.vue";
import InputErrorMixin from "./InputErrorMixin";
import BaseKeepFocusMixin from "../mixins/BaseKeepFocusMixin";
import BaseFocusInOutMixin from "../mixins/BaseFocusInOutMixin";
 
const component = /** @type {V.Constructor<any, any>} */(Vue).extend({
  name: "BaseInput",
  components: { InputError },
  mixins: [ BaseKeepFocusMixin, BaseFocusInOutMixin, InputErrorMixin ],
  model: { prop: "value", event: "edit" },
  props: {
    value: { type: [ String, Number ], default: undefined },
    inEdit: { type: Boolean, default: false },
    noEditIcon: { type: Boolean, default: false }
  },
  /**
   * @return {{ editValue: string | null, hasEditRequest: boolean }}
   */
  data() { return { editValue: null, hasEditRequest: false }; },
  computed: {
    /**
     * @return {boolean}
     */
    hasValueSlot() {
      return has(this.$scopedSlots, "value");
    },
    /**
     * @return {boolean}
     */
    showEditIcon() {
      return this.hasFocus && !this.hasValueSlot && this.hasEditRequest;
    }
  },
  watch: {
    /**
     * @param {string|number|null} v
     * @param {string|number|null} old
     */
    value(v /*: ?(string|number) */, old /*: ?(string|number) */) {
      if (isEmpty(this.editValue) || (this.editValue === toString(old))) {
        this.editValue = toString(v);
      }
    },
    /**
     * @param {boolean} v
     */
    inEdit(v /*: boolean */) {
      if (v) {
        const editValue = toString(this.value);
        if (editValue === this.editValue) {
          // Force emit the event when we enter edit mode
          this.$emit("edit", this.editValue);
        }
        else E{
          this.editValue = editValue; /* clear old editValue when entering edit */
        }
      }
      this.keepFocusOnNextTick("input");
    },
    /**
     * @return {void}
    */
    editValue: function() {
      this.$emit("edit", this.editValue);
    }
  },
  mounted() {
    if (!isNil(this.value)) {
      this.editValue = toString(this.value);
    }
    this.hasEditRequest = has(this.$listeners, "edit-request");
  },
  methods: {
    /**
     * @param  {boolean} value
     */
    emitEditRequest(value) {
      invoke(this.$refs, [ "input", "focus" ]);
      this.keepFocusOnNextTick("input");
      this.$emit("edit-request", value);
    }
  }
});
export default component;