<import-sjs
  from="../index.sjs"
  name="componentUtils"
></import-sjs>
<list
  className="ant-checkbox-group {{className ? className : ''}} ant-checkbox-group-{{position}}"
  style="{{style}}"
>
  <checkbox-group
    name="{{name}}"
    value="{{mixin.value}}"
  >
    <view class="ant-checkbox-group-body">
      <block a:if="{{position === 'vertical'}}">
        <block
          a:for="{{options}}"
          a:for-index="index"
          a:for-item="item"
          key="{{item['value']}}"
        >
          <list-item>
            <ant-checkbox
              color="{{color}}"
              checked="{{componentUtils.getCheckboxChecked(item, mixin.value)}}"
              data-index="{{index}}"
              value="{{item.value}}"
              disabled="{{disabled || item.disabled}}"
              onChange="onChange"
            >
              <slot
                name="label"
                value="{{item}}"
                index="{{index}}"
              >
                <view class="ant-checkbox-group-item-label-default">
                  {{item.label}}
                </view>
              </slot>
            </ant-checkbox>
          </list-item>
        </block>
      </block>
      <block a:else>
        <block
          a:for="{{options}}"
          a:for-index="index"
          a:for-item="item"
          key="{{item['value']}}"
        >
          <ant-checkbox
            color="{{color}}"
            checked="{{componentUtils.getCheckboxChecked(item, mixin.value)}}"
            data-index="{{index}}"
            value="{{item.value}}"
            disabled="{{disabled || item.disabled}}"
            onChange="onChange"
          >
            <slot
              name="label"
              value="{{item}}"
              index="{{index}}"
            >
              <view class="ant-checkbox-group-item-label-default">
                {{item.label}}
              </view>
            </slot>
          </ant-checkbox>
        </block>
      </block>
    </view>
  </checkbox-group>
</list>