@gitlab/ui/dist/vendor/bootstrap-vue/src/mixins/form-radio-check.js

GitLab UI Components

import { extend } from '../vue';
import { PROP_TYPE_STRING, PROP_TYPE_BOOLEAN, PROP_TYPE_ANY } from '../constants/props';
import { EVENT_NAME_CHANGE } from '../constants/events';
import { attemptFocus, attemptBlur } from '../utils/dom';
import { isBoolean } from '../utils/inspect';
import { looseEqual } from '../utils/loose-equal';
import { makeModelMixin } from '../utils/model';
import { sortKeys } from '../utils/object';
import { makePropsConfigurable, makeProp } from '../utils/props';
import { attrsMixin } from './attrs';
import { props as props$2, formControlMixin } from './form-control';
import { props as props$5, formCustomMixin } from './form-custom';
import { props as props$3, formSizeMixin } from './form-size';
import { props as props$4, formStateMixin } from './form-state';
import { props as props$1, idMixin } from './id';
import { normalizeSlotMixin } from './normalize-slot';

// --- Constants ---

const {
  mixin: modelMixin,
  props: modelProps,
  prop: MODEL_PROP_NAME,
  event: MODEL_EVENT_NAME
} = makeModelMixin('checked', {
  defaultValue: null
});

// --- Props ---

const props = makePropsConfigurable(sortKeys({
  ...props$1,
  ...modelProps,
  ...props$2,
  ...props$3,
  ...props$4,
  ...props$5,
  ariaLabel: makeProp(PROP_TYPE_STRING),
  ariaLabelledby: makeProp(PROP_TYPE_STRING),
  inline: makeProp(PROP_TYPE_BOOLEAN, false),
  value: makeProp(PROP_TYPE_ANY)
}), 'formRadioCheckControls');

// --- Mixin ---

// @vue/component
const formRadioCheckMixin = extend({
  mixins: [attrsMixin, idMixin, modelMixin, normalizeSlotMixin, formControlMixin, formSizeMixin, formStateMixin, formCustomMixin],
  inheritAttrs: false,
  props,
  data() {
    return {
      localChecked: this.isGroup ? this.bvGroup[MODEL_PROP_NAME] : this[MODEL_PROP_NAME]
    };
  },
  computed: {
    computedLocalChecked: {
      get() {
        return this.isGroup ? this.bvGroup.localChecked : this.localChecked;
      },
      set(value) {
        if (this.isGroup) {
          this.bvGroup.localChecked = value;
        } else {
          this.localChecked = value;
        }
      }
    },
    isChecked() {
      return looseEqual(this.value, this.computedLocalChecked);
    },
    isRadio() {
      return true;
    },
    isGroup() {
      // Is this check/radio a child of check-group or radio-group?
      return !!this.bvGroup;
    },
    isSwitch() {
      // Custom switch styling (checkboxes only)
      return this.isRadio ? false : this.isGroup ? this.bvGroup.switches : this.switch;
    },
    isInline() {
      return this.isGroup ? this.bvGroup.inline : this.inline;
    },
    isDisabled() {
      // Child can be disabled while parent isn't, but is always disabled if group is
      return this.isGroup ? this.bvGroup.disabled || this.disabled : this.disabled;
    },
    isRequired() {
      // Required only works when a name is provided for the input(s)
      // Child can only be required when parent is
      // Groups will always have a name (either user supplied or auto generated)
      return this.computedName && (this.isGroup ? this.bvGroup.required : this.required);
    },
    computedName() {
      // Group name preferred over local name
      return (this.isGroup ? this.bvGroup.groupName : this.name) || null;
    },
    computedForm() {
      return (this.isGroup ? this.bvGroup.form : this.form) || null;
    },
    computedSize() {
      return (this.isGroup ? this.bvGroup.size : this.size) || '';
    },
    computedState() {
      return this.isGroup ? this.bvGroup.computedState : isBoolean(this.state) ? this.state : null;
    },
    computedAttrs() {
      const {
        isDisabled: disabled,
        isRequired: required
      } = this;
      return {
        ...this.bvAttrs,
        id: this.safeId(),
        type: this.isRadio ? 'radio' : 'checkbox',
        name: this.computedName,
        form: this.computedForm,
        disabled,
        required,
        'aria-required': required || null,
        'aria-label': this.ariaLabel || null,
        'aria-labelledby': this.ariaLabelledby || null
      };
    }
  },
  watch: {
    [MODEL_PROP_NAME]() {
      this[`${MODEL_PROP_NAME}Watcher`](...arguments);
    },
    computedLocalChecked() {
      this.computedLocalCheckedWatcher(...arguments);
    }
  },
  methods: {
    [`${MODEL_PROP_NAME}Watcher`](newValue) {
      if (!looseEqual(newValue, this.computedLocalChecked)) {
        this.computedLocalChecked = newValue;
      }
    },
    computedLocalCheckedWatcher(newValue, oldValue) {
      if (!looseEqual(newValue, oldValue)) {
        this.$emit(MODEL_EVENT_NAME, newValue);
      }
    },
    handleChange(_ref) {
      let {
        target: {
          checked
        }
      } = _ref;
      const {
        value
      } = this;
      const localChecked = checked ? value : null;
      this.computedLocalChecked = value;

      // Fire events in a `$nextTick()` to ensure the `v-model` is updated
      this.$nextTick(() => {
        // Change is only emitted on user interaction
        this.$emit(EVENT_NAME_CHANGE, localChecked);

        // If this is a child of a group, we emit a change event on it as well
        if (this.isGroup) {
          this.bvGroup.$emit(EVENT_NAME_CHANGE, localChecked);
        }
      });
    },
    // Convenience methods for focusing the input
    focus() {
      if (!this.isDisabled) {
        attemptFocus(this.$refs.input);
      }
    },
    blur() {
      if (!this.isDisabled) {
        attemptBlur(this.$refs.input);
      }
    }
  },
  render(h) {
    const {
      isRadio,
      isInline,
      isSwitch,
      computedSize,
      bvAttrs
    } = this;
    const $content = this.normalizeSlot();
    const $input = h('input', {
      class: ['custom-control-input', this.stateClass],
      attrs: this.computedAttrs,
      domProps: {
        value: this.value,
        checked: this.isChecked
      },
      on: {
        change: this.handleChange
      },
      key: 'input',
      ref: 'input'
    });
    const $label = h('label', {
      class: 'custom-control-label',
      attrs: {
        for: this.safeId()
      }
    }, $content);
    return h('div', {
      class: [{
        'custom-control-inline': isInline,
        'custom-checkbox': !isRadio && !isSwitch,
        'custom-switch': isSwitch,
        'custom-radio': isRadio,
        // Temporary until Bootstrap v4 supports sizing (most likely in V5)
        [`b-custom-control-${computedSize}`]: computedSize
      }, 'custom-control', bvAttrs.class],
      style: bvAttrs.style
    }, [$input, $label]);
  }
});

export { MODEL_EVENT_NAME, MODEL_PROP_NAME, formRadioCheckMixin, props };