Added checkbox-group component

Author: romanslonov

docs/.vuepress/config.js

@@ -25,6 +25,7 @@ module.exports = {
           'components/badge',
           'components/button',
           'components/checkbox',
+          'components/checkbox-group',
           'components/radio',
           'components/radio-group',
           'components/tabs',

docs/components/checkbox-group.md

@@ -0,0 +1,63 @@
+# Checkbox Group
+Set of checkbox's components
+
+## Example
+<div class="p-3 border rounded-2 my-3">
+  <v-checkbox-group
+    class="mb-3"
+    label="Favorites color"
+    name="colors"
+    :options="['White', 'Blue', 'Red']"
+    v-model="group1"
+  />
+  <v-checkbox-group
+    label="Favorites color"
+    name="colors-objects"
+    :options="[
+      { id: 1, label: 'White', value: 'white' },
+      { id: 2, label: 'Blue', value: 'blue', disabled: true },
+      { id: 3, label: 'Red', value: 'red' },
+    ]"
+    v-model="group2"
+  />
+</div>
+
+
+```html
+<!-- Array of string -->
+<v-checkbox-group
+  label="Favorites color"
+  name="colors-strings"
+  :options="['White', 'Blue', 'Red']"
+  v-model="group1"
+/>
+
+<!-- Array of objects -->
+<v-checkbox-group
+  label="Favorites color"
+  name="colors-objects"
+  :options="[
+    { id: 1, label: 'White', value: 'white' },
+    { id: 2, label: 'Blue', value: 'blue', disabled: true },
+    { id: 3, label: 'Red', value: 'red' },
+  ]"
+  v-model="group1"
+/>
+```
+
+## Props
+Name       | Type     | Description | Default | Required
+---------- | -------- | ----------- | ------- | --------
+name       | String   | The `name` attribute of each checkbox's input element. | false   | false
+label      | String   | The checkbox group label. | None   | false
+value, v-model | Array | The model that holds the checked option values. Can be set initially for default values. | None | true
+options    | Array | An array of options to show to the user as checkboxes. The array can either be of strings or objects (but not both). | None | true
+keys       | Object | Allows for redefining the option keys. The id, name, class and disabled keys are optional. Pass an object with custom keys if your data does not match the default keys. Note that if you redefine one key, you have to define all the others as well. | `{id: 'id',label: 'label',value: 'value',checked: 'checked',disabled: 'disabled' }` | false
+
+<script>
+export default {
+  data() {
+    return { group1: [], group2: [] };
+  },
+};
+</script>

docs/components/radio-group.md

@@ -68,6 +68,7 @@ Name       | Description
 Name       | Description
 ---------- | ----------
 reset()    | Call this method to reset the radio group's `value` to its initial `value`.
+
 <script>
 export default {
   data() {

src/components/CheckboxGroup/index.js

@@ -0,0 +1,8 @@
+import CheckboxGroup from './main.vue';
+
+// eslint-disable-next-line func-names
+CheckboxGroup.install = function (Vue) {
+  Vue.component('VCheckboxGroup', CheckboxGroup);
+};
+
+export default CheckboxGroup;

src/components/CheckboxGroup/main.vue

@@ -0,0 +1,115 @@
+<template>
+  <div class="checkbox-group">
+    <div class="checkbox-group__label">{{ label }}</div>
+    <div class="checkbox-group__list">
+      <div
+        class="checkbox-group__item"
+        :key="option[keys.id] || `${name}-${i}`"
+        v-for="(option, i) in options"
+      >
+        <v-checkbox
+          :id="option[keys.id] || `${name || option[keys.name]}-${i}`"
+          :checked="isOptionCheckedByDefault(option)"
+          :disabled="disabled || option[keys.disabled]"
+          :key="option[keys.id]"
+          :name="name || option[keys.name]"
+          :label="option[keys.label] || option"
+
+          @blur="onBlur"
+          @change="onChange(arguments, option)"
+          @focus="onFocus"
+
+          v-model="checkboxValues[i]"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import VCheckbox from '../Checkbox';
+import { looseIndexOf } from '../../helpers/util';
+
+export default {
+  name: 'VCheckboxGroup',
+  props: {
+    name: {
+      type: String,
+    },
+    options: {
+      type: Array,
+      required: true,
+    },
+    value: {
+      type: Array,
+      required: true,
+    },
+    keys: {
+      type: Object,
+      default() {
+        return {
+          id: 'id',
+          name: 'name',
+          label: 'label',
+          value: 'value',
+          disabled: 'disabled',
+        };
+      },
+    },
+    label: {
+      type: String,
+    },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      ignoreChange: false,
+      checkboxValues: [],
+      initialValue: JSON.parse(JSON.stringify(this.value)),
+    };
+  },
+  methods: {
+    reset() {
+      this.ignoreChange = true;
+      this.options.forEach((option, index) => {
+        this.checkboxValues[index] = this.isOptionCheckedByDefault(option);
+      });
+      this.ignoreChange = false;
+      this.$emit('input', (this.initialValue.length > 0) ? [].concat(this.initialValue) : []);
+    },
+    isOptionCheckedByDefault(option) {
+      return looseIndexOf(this.initialValue, option[this.keys.value] || option) > -1;
+    },
+    onFocus(e) {
+      this.isActive = true;
+      this.$emit('focus', e);
+    },
+    onBlur(e) {
+      this.isActive = false;
+      this.$emit('blur', e);
+    },
+    onChange(args, option) {
+      if (this.ignoreChange) {
+        return;
+      }
+      const checked = args[0];
+      const e = args[1];
+      let value = [];
+      const optionValue = option[this.keys.value] || option;
+      const i = looseIndexOf(this.value, optionValue);
+      if (checked && i < 0) {
+        value = this.value.concat(optionValue);
+      }
+      if (!checked && i > -1) {
+        value = this.value.slice(0, i).concat(this.value.slice(i + 1));
+      }
+      this.$emit('input', value);
+      this.$emit('change', value, e);
+    },
+  },
+  components: { VCheckbox },
+};
+</script>

src/components/index.js

@@ -3,6 +3,7 @@ export { default as VAvatar } from './Avatar';
 export { default as VBadge } from './Badge';
 export { default as VButton } from './Button';
 export { default as VCheckbox } from './Checkbox';
+export { default as VCheckboxGroup } from './CheckboxGroup';
 export { default as VRadio } from './Radio';
 export { default as VRadioGroup } from './RadioGroup';
 export { default as VTab } from './Tab';

src/helpers/util.js

@@ -14,3 +14,17 @@ export function looseEqual(a, b) {
     isObject(a) && isObject(b) ? JSON.stringify(a) === JSON.stringify(b) : false
   );
 }
+
+/**
+ * Check if a val exists in arr using looseEqual comparison
+ */
+export function looseIndexOf(arr, val) {
+  // eslint-disable-next-line no-plusplus
+  for (let i = 0; i < arr.length; i++) {
+    if (looseEqual(arr[i], val)) {
+      return i;
+    }
+  }
+
+  return -1;
+}