@meve/ui/es/checkbox/index.js

Argon design system components library

import _extends from "@babel/runtime/helpers/esm/extends";
import Ripple from '../ripple';
import FormItem from '../form-item';
import { createNamespace } from '../utils/create';
import { props } from './props';
import { createChildrenMixin } from '../utils/mixins/relation';






var _createNamespace = createNamespace('checkbox'),
    createComponent = _createNamespace.createComponent,
    namespace = _createNamespace.namespace;

var CheckboxPlugin = createComponent({
  props: props,
  mixins: [createChildrenMixin('checkboxGroup', {
    parentKey: 'checkboxGroup',
    childrenKey: 'checkboxes'
  }), createChildrenMixin('form', {
    parentKey: 'form',
    childrenKey: 'formComponents'
  })],
  directives: {
    Ripple: Ripple
  },
  data: function data() {
    return {
      localValue: false,
      errorMessage: ''
    };
  },
  computed: {
    checked: function checked() {
      return this.localValue === this.checkedValue;
    },
    maximum: function maximum() {
      return this.checkboxGroup ? this.checkboxGroup.checkedCount >= Number(this.checkboxGroup.max) : false;
    }
  },
  watch: {
    value: {
      handler: function handler(newValue) {
        this.localValue = newValue;
      },
      immediate: true
    }
  },
  methods: {
    // expose
    reset: function reset() {
      this.$emit('input', this.uncheckedValue);
      this.resetValidation();
    },
    // expose
    validate: function validate() {
      this.$refs.formItem.validate();
    },
    // expose
    resetValidation: function resetValidation() {
      this.$refs.formItem.resetValidation();
    },
    // expose
    toggle: function toggle(changedValue) {
      var uncheckedValue = this.uncheckedValue,
          checkedValue = this.checkedValue;
      var shouldReverse = ![uncheckedValue, checkedValue].includes(changedValue);

      if (shouldReverse) {
        changedValue = this.checked ? uncheckedValue : checkedValue;
      }

      this.change(changedValue);
    },
    nextTickValidateWithTrigger: function nextTickValidateWithTrigger(trigger) {
      var _this = this;

      this.$nextTick(function () {
        var _this$$refs$formItem;

        (_this$$refs$formItem = _this.$refs.formItem) == null ? void 0 : _this$$refs$formItem.validateWithTrigger(_this.validateTrigger, trigger, _this.rules, _this.value);
      });
    },
    change: function change(changedValue) {
      var _this$checkboxGroup, _this$checkboxGroup2;

      this.localValue = changedValue;
      this.$emit('input', changedValue);
      this.$emit('change', changedValue);
      this.nextTickValidateWithTrigger('onChange');
      changedValue === this.checkedValue ? (_this$checkboxGroup = this.checkboxGroup) == null ? void 0 : _this$checkboxGroup.onChecked(this.checkedValue) : (_this$checkboxGroup2 = this.checkboxGroup) == null ? void 0 : _this$checkboxGroup2.onUnchecked(this.checkedValue);
    },
    handleClick: function handleClick(event) {
      var _this$form, _this$form2;

      var disabled = this.disabled,
          readonly = this.readonly,
          uncheckedValue = this.uncheckedValue,
          checkedValue = this.checkedValue;

      if ((_this$form = this.form) != null && _this$form.disabled || disabled) {
        return;
      }

      this.$emit('click', event);
      this.nextTickValidateWithTrigger('onClick');

      if ((_this$form2 = this.form) != null && _this$form2.readonly || readonly) {
        return;
      }

      if (!this.checked && this.maximum) {
        return;
      }

      this.change(this.checked ? uncheckedValue : checkedValue);
    },
    sync: function sync(values) {
      this.localValue = values.includes(this.checkedValue) ? this.checkedValue : this.uncheckedValue;
    },
    handleErrorMessageChange: function handleErrorMessageChange(errorMessage) {
      this.errorMessage = errorMessage;
    }
  },
  render: function render() {
    var h = arguments[0];
    var label = this.label,
        value = this.value,
        rules = this.rules,
        checked = this.checked,
        ripple = this.ripple,
        size = this.size,
        handleClick = this.handleClick,
        disabled = this.disabled,
        readonly = this.readonly,
        form = this.form,
        errorMessage = this.errorMessage,
        checkboxGroup = this.checkboxGroup,
        handleErrorMessageChange = this.handleErrorMessageChange;
    return h(FormItem, {
      "attrs": {
        "checkbox-cover": true,
        "label": label,
        "value": value,
        "rules": rules
      },
      "ref": "formItem",
      "on": _extends({}, {
        'error-message-change': handleErrorMessageChange
      })
    }, [h("label", {
      "class": [namespace(), 'm--box', namespace("--" + size), form != null && form.disabled || disabled ? namespace('--text-disabled') : null, checkboxGroup != null && checkboxGroup.errorMessage || errorMessage ? namespace('--text-error') : null]
    }, [h("input", {
      "class": namespace('__input'),
      "attrs": {
        "type": "checkbox",
        "disabled": (form == null ? void 0 : form.disabled) || disabled,
        "readOnly": (form == null ? void 0 : form.readonly) || readonly
      },
      "on": _extends({}, {
        "click": function click($event) {
          for (var _len = arguments.length, attrs = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
            attrs[_key - 1] = arguments[_key];
          }

          handleClick.apply(void 0, [$event].concat(attrs));
        }
      })
    }), h("div", {
      "class": [namespace('__checkbox-container'), namespace("--" + size + "-checkbox-container")],
      "directives": [{
        name: "ripple",
        value: {
          disabled: !ripple || disabled || readonly || (form == null ? void 0 : form.disabled) || (form == null ? void 0 : form.readonly)
        }
      }]
    }, [h("div", {
      "class": [namespace('__checkbox'), namespace("--" + size + "-checkbox"), checked ? namespace("--" + size + "-svg") : null, checked ? null : namespace("--border-visible"), checked ? namespace('--checked') : null, checkboxGroup != null && checkboxGroup.errorMessage || errorMessage ? checked ? namespace('--background-error') : namespace('--border-error') : null, form != null && form.disabled || disabled ? namespace('--disabled') : null]
    })]), h("div", {
      "class": namespace('__label')
    }, [this.slots()])])]);
  }
});
export var _CheckboxComponent = CheckboxPlugin;
export default CheckboxPlugin;