mixtape/zero.Web.UI/App/components/forms/check-list.vue

 <template>
  <div class="ui-check-list" :class="{'is-disabled': disabled, 'is-inline': inline }">
    <label v-for="item in list" class="ui-native-check ui-check-list-item">
      <input type="checkbox" :checked="isChecked(item)" @input="onChange(item)" :disabled="disabled" />
      <span class="ui-native-check-toggle"></span>
      <span v-localize="item[labelKey]"></span>
    </label>
  </div>
</template>


<script>
  import { map as _map, filter as _filter } from 'underscore';

  export default {
    name: 'uiCheckList',

    props: {
      value: {
        type: Array,
        default: () => []
      },
      items: {
        type: [Array, Function, Promise],
        required: true
      },
      disabled: {
        type: Boolean,
        default: false
      },
      inline: {
        type: Boolean,
        default: false
      },
      limit: {
        type: Number,
        default: 100
      },
      reverse: Boolean,
      labelKey: {
        type: String,
        default: 'value'
      },
      idKey: {
        type: String,
        default: 'key'
      }
    },


    data: () => ({
      list: []
    }),


    watch: {
      items()
      {
        this.init();
      }
    },


    mounted()
    {
      this.init();
    },


    methods: {

      init()
      {
        if (typeof this.items === 'function')
        {
          this.items().then(res =>
          {
            this.list = res;
          });
        }
        else
        {
          this.list = JSON.parse(JSON.stringify(this.items));
        }
      },

      isChecked(item)
      {
        let index = this.value.indexOf(item[this.idKey]);
        return (!this.reverse && index > -1) || (this.reverse && index < 0);
      },

      onChange(item)
      {
        let index = this.value.indexOf(item[this.idKey]);
        let value = JSON.parse(JSON.stringify(this.value));

        if (index < 0)
        {
          value.push(item[this.idKey]);
        }
        else
        {
          value.splice(index, 1);
        }

        this.$emit('input', value);
      },
    }
  }
</script>

<style lang="scss">
  .ui-check-list-item
  {
    display: block;
  }
  .ui-check-list .ui-check-list-item + .ui-check-list-item
  {
    margin-top: 8px;
  }
  .ui-alias + .ui-check-list-item
  {
    margin-top: 14px;
  }
  .ui-check-list.is-inline .ui-check-list-item
  {
    display: inline-block;
  }
  .ui-check-list.is-inline .ui-check-list-item + .ui-check-list-item
  {
    margin-top: 0;
    margin-left: 30px;
  }
  .ui-check-list.is-inline .ui-check-list-item .ui-native-check-toggle
  {
    margin-right: 6px;
  }
</style>