feat(comp: checkbox): add checkbox component

fix IDuxFE#120

packages/components/checkbox/__tests__/__snapshots__/checkbox.spec.ts.snap

@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Checkbox.vue render work 1`] = `"<label class=\\"ix-checkbox\\" role=\\"checkbox\\" ariachecked=\\"false\\" ariadisabled=\\"false\\"><span class=\\"ix-checkbox-input-wrapper\\"><span class=\\"ix-checkbox-inner\\"></span><input type=\\"checkbox\\" class=\\"ix-checkbox-input\\" name=\\"\\" truevalue=\\"true\\" falsevalue=\\"false\\"></span><span class=\\"ix-checkbox-label\\">option</span></label>"`;

packages/components/checkbox/__tests__/__snapshots__/checkboxGroup.spec.ts.snap

@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CheckboxGroup.vue and Checkbox.vue render work 1`] = `"<div class=\\"ix-checkbox-group\\" role=\\"group\\" aria-label=\\"checkbox-group\\"><label class=\\"ix-checkbox\\" role=\\"checkbox\\" ariachecked=\\"false\\" ariadisabled=\\"false\\"><span class=\\"ix-checkbox-input-wrapper\\"><span class=\\"ix-checkbox-inner\\"></span><input type=\\"checkbox\\" class=\\"ix-checkbox-input\\" name=\\"\\" truevalue=\\"true\\" falsevalue=\\"false\\" value=\\"option1\\"></span><span class=\\"ix-checkbox-label\\"> option1 </span></label><label class=\\"ix-checkbox\\" role=\\"checkbox\\" ariachecked=\\"false\\" ariadisabled=\\"false\\"><span class=\\"ix-checkbox-input-wrapper\\"><span class=\\"ix-checkbox-inner\\"></span><input type=\\"checkbox\\" class=\\"ix-checkbox-input\\" name=\\"\\" truevalue=\\"true\\" falsevalue=\\"false\\" value=\\"option2\\"></span><span class=\\"ix-checkbox-label\\"> option2 </span></label><label class=\\"ix-checkbox\\" role=\\"checkbox\\" ariachecked=\\"false\\" ariadisabled=\\"false\\"><span class=\\"ix-checkbox-input-wrapper\\"><span class=\\"ix-checkbox-inner\\"></span><input type=\\"checkbox\\" class=\\"ix-checkbox-input\\" name=\\"\\" truevalue=\\"true\\" falsevalue=\\"false\\" value=\\"option3\\"></span><span class=\\"ix-checkbox-label\\"> option3 </span></label></div>"`;

packages/components/checkbox/__tests__/checkbox.spec.ts

@@ -0,0 +1,164 @@
+import { mount } from '@vue/test-utils'
+import { ref, nextTick } from 'vue'
+import IxCheckbox from '../src/Checkbox.vue'
+
+describe('Checkbox.vue', () => {
+  test('render work', () => {
+    const checked = ref(false)
+    const wrapper = mount({
+      components: { IxCheckbox },
+      template: `<ix-checkbox v-model:checked="checked">option</ix-checkbox>`,
+      setup() {
+        return { checked }
+      },
+    })
+    expect(wrapper.html()).toMatchSnapshot()
+  })
+
+  test('checked(v-model) work', async () => {
+    const checked = ref(false)
+    const wrapper = mount({
+      components: { IxCheckbox },
+      template: `<ix-checkbox v-model:checked="checked">option</ix-checkbox>`,
+      setup() {
+        return { checked }
+      },
+    })
+
+    expect(wrapper.find('.ix-checkbox-checked').exists()).toBe(false)
+
+    checked.value = true
+
+    await nextTick()
+    expect(wrapper.find('.ix-checkbox-checked').exists()).toBe(true)
+
+    await wrapper.trigger('click')
+
+    expect(checked.value).toBe(false)
+    expect(wrapper.find('.ix-checkbox-checked').exists()).toBe(false)
+  })
+
+  test('no checked(v-model) work', async () => {
+    const wrapper = mount({
+      components: { IxCheckbox },
+      template: `<ix-checkbox>option</ix-checkbox>`,
+    })
+
+    expect(wrapper.find('.ix-checkbox-checked').exists()).toBe(false)
+
+    await wrapper.trigger('click')
+
+    expect(wrapper.find('.ix-checkbox-checked').exists()).toBe(true)
+  })
+
+  test('trueValue and falseValue work', async () => {
+    const checked = ref('yes')
+    const wrapper = mount({
+      components: { IxCheckbox },
+      template: `<ix-checkbox v-model:checked="checked" trueValue="yes" falseValue="no">option</ix-checkbox>`,
+      setup() {
+        return { checked }
+      },
+    })
+
+    await wrapper.trigger('click')
+
+    expect(checked.value).toBe('no')
+  })
+
+  test('disabled work', async () => {
+    const checked = ref(true)
+    const disabled = ref(true)
+    const mockFn = jest.fn()
+    const wrapper = mount({
+      components: { IxCheckbox },
+      template: `<ix-checkbox v-model:checked="checked" :disabled="disabled" @change="mockFn">option</ix-checkbox>`,
+      setup() {
+        return { checked, disabled, mockFn }
+      },
+    })
+
+    expect(wrapper.classes()).toContain('ix-checkbox-disabled')
+
+    await wrapper.trigger('click')
+
+    expect(wrapper.classes()).toContain('ix-checkbox-disabled')
+    expect(checked.value).toBe(true)
+    expect(mockFn).toBeCalledTimes(0)
+
+    disabled.value = false
+
+    await nextTick()
+
+    expect(wrapper.classes()).not.toContain('ix-checkbox-disabled')
+
+    await wrapper.trigger('click')
+
+    expect(checked.value).toBe(false)
+    expect(mockFn).toBeCalledTimes(1)
+  })
+
+  test('indeterminate work', async () => {
+    const checked = ref(true)
+    const indeterminate = ref(true)
+    const wrapper = mount({
+      components: { IxCheckbox },
+      template: `<ix-checkbox v-model:checked="checked" :indeterminate="indeterminate">option</ix-checkbox>`,
+      setup() {
+        return { checked, indeterminate }
+      },
+    })
+
+    expect(wrapper.classes()).toContain('ix-checkbox-indeterminate')
+    expect(wrapper.classes()).not.toContain('ix-checkbox-checked')
+
+    indeterminate.value = false
+
+    await nextTick()
+
+    expect(wrapper.classes()).not.toContain('ix-checkbox-indeterminate')
+    expect(wrapper.classes()).toContain('ix-checkbox-checked')
+  })
+
+  test('change event work', async () => {
+    const checked = ref(true)
+    const mockFn = jest.fn()
+    const wrapper = mount({
+      components: { IxCheckbox },
+      template: `<ix-checkbox v-model:checked="checked" @change="mockFn">option</ix-checkbox>`,
+      setup() {
+        return { checked, mockFn }
+      },
+    })
+
+    expect(mockFn).toBeCalledTimes(0)
+
+    await wrapper.trigger('click')
+
+    expect(mockFn).toBeCalledTimes(1)
+  })
+
+  test('original checkbox attributes work', async () => {
+    const wrapper = mount({
+      components: { IxCheckbox },
+      template: `<ix-checkbox name="checkboxName" value="checkboxValue" tabindex="1" class="checkox" style="color: red;">option</ix-checkbox>`,
+    })
+
+    const checkboxWrapper = wrapper.find('.ix-checkbox')
+    const originalInput = wrapper.find("input[type='checkbox']")
+    const input = wrapper.find('.ix-checkbox-inner')
+
+    expect(checkboxWrapper.classes()).toContain('checkox')
+    expect(checkboxWrapper.attributes()['style']).toEqual('color: red;')
+    expect(checkboxWrapper.attributes()['name']).not.toBeDefined()
+    expect(checkboxWrapper.attributes()['value']).not.toBeDefined()
+    expect(checkboxWrapper.attributes()['tabindex']).not.toBeDefined()
+
+    expect(originalInput.attributes()['name']).toEqual('checkboxName')
+    expect(originalInput.attributes()['value']).toEqual('checkboxValue')
+    expect(originalInput.classes()).not.toContain('checkox')
+    expect(originalInput.attributes()['style']).not.toEqual('color: red;')
+
+    expect(input.attributes()['tabindex']).toEqual('1')
+  })
+})

packages/components/checkbox/__tests__/checkboxGroup.spec.ts

@@ -0,0 +1,148 @@
+import { mount } from '@vue/test-utils'
+import CheckboxGroup from '../src/CheckboxGroup.vue'
+import Checkbox from '../src/Checkbox.vue'
+import { nextTick, Ref, ref } from 'vue'
+
+describe('CheckboxGroup.vue and Checkbox.vue', () => {
+  test('render work', () => {
+    const wrapper = mount({
+      components: { CheckboxGroup, Checkbox },
+      template: `
+      <checkbox-group>
+        <checkbox value="option1"> option1 </checkbox>
+        <checkbox value="option2"> option2 </checkbox>
+        <checkbox value="option3"> option3 </checkbox>
+      </checkbox-group>
+      `,
+    })
+    expect(wrapper.findAll('.ix-checkbox').length).toBe(3)
+    expect(wrapper.html()).toMatchSnapshot()
+  })
+
+  test('value(v-model) work', async () => {
+    const value = ref([]) as Ref<string[]>
+    const wrapper = mount({
+      components: { CheckboxGroup, Checkbox },
+      template: `
+      <checkbox-group v-model:value="value">
+        <checkbox value="option1"> option1 </checkbox>
+        <checkbox value="option2"> option2 </checkbox>
+        <checkbox value="option3"> option3 </checkbox>
+      </checkbox-group>
+      `,
+      setup() {
+        return { value }
+      },
+    })
+
+    expect(wrapper.findAll('.ix-checkbox-checked').length).toBe(0)
+
+    value.value = ['option1']
+
+    await nextTick()
+
+    expect(wrapper.findAllComponents({ name: 'IxCheckbox' })[0].classes()).toContain('ix-checkbox-checked')
+
+    await wrapper.findAllComponents({ name: 'IxCheckbox' })[0].trigger('click')
+
+    expect(value.value).toEqual([])
+  })
+
+  test('no value(v-model) work', async () => {
+    const wrapper = mount({
+      components: { CheckboxGroup, Checkbox },
+      template: `
+      <checkbox-group>
+        <checkbox value="option1"> option1 </checkbox>
+        <checkbox value="option2"> option2 </checkbox>
+        <checkbox value="option3"> option3 </checkbox>
+      </checkbox-group>
+      `,
+      setup() {
+        return {}
+      },
+    })
+
+    expect(wrapper.findAll('.ix-checkbox-checked').length).toBe(0)
+
+    await wrapper.findAllComponents({ name: 'IxCheckbox' })[0].trigger('click')
+
+    expect(wrapper.findAllComponents({ name: 'IxCheckbox' })[0].classes()).toContain('ix-checkbox-checked')
+  })
+
+  test('change event work', async () => {
+    const mockFn = jest.fn()
+    const wrapper = mount({
+      components: { CheckboxGroup, Checkbox },
+      template: `
+      <checkbox-group @change="mockFn">
+        <checkbox value="option1"> option1 </checkbox>
+        <checkbox value="option2"> option2 </checkbox>
+        <checkbox value="option3"> option3 </checkbox>
+      </checkbox-group>
+      `,
+      setup() {
+        return { mockFn }
+      },
+    })
+
+    expect(mockFn).toBeCalledTimes(0)
+
+    await wrapper.findAllComponents({ name: 'IxCheckbox' })[0].trigger('click')
+
+    expect(mockFn).toBeCalledTimes(1)
+  })
+
+  test('disabled work', async () => {
+    const value = ref([]) as Ref<string[]>
+    const disabled = ref(true)
+    const mockFn = jest.fn()
+    const wrapper = mount({
+      components: { CheckboxGroup, Checkbox },
+      template: `
+      <checkbox-group v-model:value="value" :disabled="disabled" @change="mockFn">
+        <checkbox value="option1"> option1 </checkbox>
+        <checkbox value="option2"> option2 </checkbox>
+        <checkbox value="option3"> option3 </checkbox>
+      </checkbox-group>
+      `,
+      setup() {
+        return { value, disabled, mockFn }
+      },
+    })
+
+    expect(wrapper.findAll('.ix-checkbox-disabled').length).toBe(3)
+    await wrapper.findAllComponents({ name: 'IxCheckbox' })[0].trigger('click')
+    expect(value.value).toEqual([])
+    expect(mockFn).toBeCalledTimes(0)
+
+    disabled.value = false
+
+    await nextTick()
+
+    expect(wrapper.findAll('.ix-checkbox-disabled').length).toBe(0)
+
+    await wrapper.findAllComponents({ name: 'IxCheckbox' })[0].trigger('click')
+    expect(value.value).toEqual(['option1'])
+    expect(mockFn).toBeCalledTimes(1)
+  })
+
+  test('name work', async () => {
+    const wrapper = mount({
+      components: { CheckboxGroup, Checkbox },
+      template: `
+      <checkbox-group name="group">
+        <checkbox value="option1" name="child"> option1 </checkbox>
+        <checkbox value="option2"> option2 </checkbox>
+        <checkbox value="option3"> option3 </checkbox>
+      </checkbox-group>
+      `,
+      setup() {
+        return {}
+      },
+    })
+
+    expect(wrapper.findAll('input[name=group]').length).toBe(2)
+    expect(wrapper.findAll('input[name=child]').length).toBe(1)
+  })
+})

packages/components/checkbox/demo/Basic.vue

@@ -0,0 +1,20 @@
+<template>
+  <div>
+    <ix-checkbox v-model:checked="checked"> option </ix-checkbox>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref } from 'vue'
+
+export default defineComponent({
+  setup() {
+    const checked = ref(true)
+
+    return {
+      checked,
+    }
+  },
+})
+</script>
+<style lang="less" scoped></style>

packages/components/checkbox/demo/Disabled.vue

@@ -0,0 +1,48 @@
+<template>
+  <div>
+    <ix-checkbox v-model:checked="checked" :disabled="disabled" @change="onChange"> option </ix-checkbox>
+    <div class="operation-area">
+      <ix-button mode="primary" @click="changeChecked()">checked: {{ checked }}</ix-button>
+      <ix-button mode="primary" @click="changeDisabled()">disabled: {{ disabled }}</ix-button>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref } from 'vue'
+
+export default defineComponent({
+  setup() {
+    const checked = ref(true)
+    const disabled = ref(true)
+
+    const changeChecked = () => {
+      checked.value = !checked.value
+    }
+
+    const changeDisabled = () => {
+      disabled.value = !disabled.value
+    }
+
+    const onChange = () => {
+      console.log('onChange')
+    }
+
+    return {
+      checked,
+      disabled,
+      changeChecked,
+      changeDisabled,
+      onChange,
+    }
+  },
+})
+</script>
+<style lang="less" scoped>
+.operation-area {
+  margin-top: 30px;
+  .ix-button {
+    margin-right: 10px;
+  }
+}
+</style>