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

Argon design system components library

import _extends from "@babel/runtime/helpers/esm/extends";
import FormItem from '../form-item';
import Space from '../space';
import { createNamespace } from '../utils/create';
import { props } from './props';
import { createChildrenMixin, createParentMixin } from '../utils/mixins/relation';
import { uniq } from '../utils/shared';





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

var directionTransformer = {
  horizontal: 'row',
  vertical: 'column'
};
var CheckboxGroupPlugin = createComponent({
  props: props,
  mixins: [createParentMixin('checkboxGroup', {
    childrenKey: 'checkboxes'
  }), createChildrenMixin('form', {
    parentKey: 'form',
    childrenKey: 'formComponents'
  })],
  data: function data() {
    return {
      errorMessage: ''
    };
  },
  computed: {
    checkedCount: function checkedCount() {
      return this.value.length;
    }
  },
  watch: {
    value: function value() {
      this.syncCheckboxes();
    },
    checkboxes: function checkboxes() {
      this.syncCheckboxes();
    }
  },
  methods: {
    // expose
    reset: function reset() {
      this.$emit('input', []);
      this.resetValidation();
    },
    // expose
    validate: function validate() {
      this.$refs.formItem.validate();
    },
    // expose
    resetValidation: function resetValidation() {
      this.$refs.formItem.resetValidation();
    },
    // expose
    checkAll: function checkAll() {
      var checkedValues = this.checkboxes.map(function (_ref) {
        var checkedValue = _ref.checkedValue;
        return checkedValue;
      });
      var value = uniq(checkedValues);
      this.$emit('input', value);
      return value;
    },
    // expose
    inverseAll: function inverseAll() {
      var checkedValues = this.checkboxes.filter(function (_ref2) {
        var checked = _ref2.checked;
        return !checked;
      }).map(function (_ref3) {
        var checkedValue = _ref3.checkedValue;
        return checkedValue;
      });
      var value = uniq(checkedValues);
      this.$emit('input', value);
      return value;
    },
    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);
      });
    },
    syncCheckboxes: function syncCheckboxes() {
      var _this2 = this;

      this.checkboxes.forEach(function (_ref4) {
        var sync = _ref4.sync;
        return sync(_this2.value);
      });
    },
    change: function change(changedValue) {
      this.$emit('input', changedValue);
      this.$emit('change', changedValue);
      this.nextTickValidateWithTrigger('onChange');
    },
    onChecked: function onChecked(changedValue) {
      if (!this.value.includes(changedValue)) {
        this.change([].concat(this.value, [changedValue]));
      }
    },
    onUnchecked: function onUnchecked(changedValue) {
      if (!this.value.includes(changedValue)) {
        return;
      }

      this.change(this.value.filter(function (value) {
        return value !== changedValue;
      }));
    },
    handleErrorMessageChange: function handleErrorMessageChange(errorMessage) {
      this.errorMessage = errorMessage;
    }
  },
  render: function render() {
    var h = arguments[0];
    var label = this.label,
        value = this.value,
        rules = this.rules,
        direction = this.direction,
        handleErrorMessageChange = this.handleErrorMessageChange;
    return h(FormItem, {
      "attrs": {
        "checkbox-group-cover": true,
        "label": label,
        "value": value,
        "rules": rules
      },
      "ref": "formItem",
      "on": _extends({}, {
        'error-message-change': handleErrorMessageChange
      })
    }, [h(Space, {
      "class": namespace(),
      "attrs": {
        "checkbox-group-cover": true,
        "direction": directionTransformer[direction]
      }
    }, [this.slots()])]);
  }
});
export var _CheckboxGroupComponent = CheckboxGroupPlugin;
export default CheckboxGroupPlugin;