Checkbox Group Element

          
<script>
  export default {
    mixins: [Laraform],
    data: () => ({
      schema: {
        checkboxgroup: {
          type: 'checkboxgroup',
          items: {
            apple: 'Apple',
            cherry: 'Cherry',
            orange: 'Orange'
          },
          default: ['cherry'],
          disable: ['orange']
        }
      }
    })
  }
</script>
          
        

          
<script>
  export default {
    mixins: [Laraform],
    data: () => ({
      schema: {
        checkboxgroup2: {
          type: 'checkboxgroup',
          items: {
            apple: 'Apple',
            cherry: 'Cherry',
            orange: 'Orange'
          },
          disabled: true
        },
      }
    })
  }
</script>
          
        

          
<script>
  export default {
    mixins: [Laraform],
    data: () => ({
      schema: {
        checkboxgroup3: {
          type: 'checkboxgroup',
          items: {
            apple: 'Apple',
            cherry: 'Cherry',
            orange: 'Orange'
          },
        },
      },
      buttons: [
        {
          label: 'Check Apple',
          prevent: true,
          class: 'btn-primary btn-xs',
          onClick() {
            this.form$.el$('checkboxgroup3').check('apple')
          }
        },
        {
          label: 'Uncheck Apple',
          prevent: true,
          class: 'btn-primary btn-xs',
          onClick() {
            this.form$.el$('checkboxgroup3').uncheck('apple')
          }
        },
        {
          label: 'Disable Apple',
          prevent: true,
          class: 'btn-primary btn-xs',
          onClick() {
            this.form$.el$('checkboxgroup3').disable('apple')
          }
        },
        {
          label: 'Enable Apple',
          prevent: true,
          class: 'btn-primary btn-xs',
          onClick() {
            this.form$.el$('checkboxgroup3').enable('apple')
          }
        },
      ]
    })
  }
</script>
          
        

          
<script>
  export default {
    mixins: [Laraform],
    data: () => ({
      schema: {
        checkboxgroup4: {
          type: 'checkboxgroup',
          items: {
            apple: 'Apple',
            cherry: 'Cherry',
            orange: 'Orange'
          },
        },
      },
      buttons: [
        {
          label: 'Check all',
          prevent: true,
          class: 'btn-primary btn-xs',
          onClick() {
            this.form$.el$('checkboxgroup4').checkAll()
          }
        },
        {
          label: 'Uncheck all',
          prevent: true,
          class: 'btn-primary btn-xs',
          onClick() {
            this.form$.el$('checkboxgroup4').uncheckAll()
          }
        },
        {
          label: 'Disable all',
          prevent: true,
          class: 'btn-primary btn-xs',
          onClick() {
            this.form$.el$('checkboxgroup4').disableAll()
          }
        },
        {
          label: 'Enable all',
          prevent: true,
          class: 'btn-primary btn-xs',
          onClick() {
            this.form$.el$('checkboxgroup4').enableAll()
          }
        },
      ]
    })
  }
</script>
          
        

          
<script>
  export default {
    mixins: [Laraform],
    data: () => ({
      schema: {
        checkboxgroup5: {
          type: 'checkboxgroup',
          items: {
            terms: { name: 'I accept <a href="#">Terms & Conditions</a>.' },
            newsletter: { name: 'I would like to receive newsletters', description: 'By checking this option you hereby guarantee our company permission to sent you direct marketing emails.' },
          },
          slots: {
            checkbox: Vue.extend({
              props: ['el$', 'item', 'value'],
              template: `
                <div class="mt-3">
                  <label 
                    :for="value"
                  >
                    <input
                      type="checkbox"
                      v-model="el$.model"
                      :value="value"
                      :name="value"
                      :id="value"
                    />

                    <span v-html="item.name"></span>
                    <small v-if="item.description" v-html="item.description" class="text-muted" ></small>
                  </label>
                </div>
              `
            })
          }
        }
      }
    })
  }
</script>