Skip to content
This repository was archived by the owner on Sep 20, 2024. It is now read-only.

Commit ce8c7b8

Browse files
codebender828codebender828
authored
Merge pull request #163 from chakra-ui/feat/checkbox-component-v1
feat: checkbox and checkbox group component
2 parents 85c71e2 + af8f329 commit ce8c7b8

30 files changed

+1155
-7
lines changed

‎.changeset/fuzzy-walls-shop.md

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
---
2+
"@chakra-ui/vue-anatomy": major
3+
"@chakra-ui/c-accordion": major
4+
"@chakra-ui/c-alert": major
5+
"@chakra-ui/c-breadcrumb": major
6+
"@chakra-ui/c-button": major
7+
"@chakra-ui/c-checkbox": major
8+
"@chakra-ui/c-close-button": major
9+
"@chakra-ui/c-code": major
10+
"@chakra-ui/c-color-mode": major
11+
"@chakra-ui/c-flex": major
12+
"@chakra-ui/c-focus-lock": major
13+
"@chakra-ui/c-form-control": major
14+
"@chakra-ui/c-icon": major
15+
"@chakra-ui/c-input": major
16+
"@chakra-ui/c-modal": major
17+
"@chakra-ui/c-motion": major
18+
"@chakra-ui/c-popper": major
19+
"@chakra-ui/c-portal": major
20+
"@chakra-ui/c-reset": major
21+
"@chakra-ui/c-scroll-lock": major
22+
"@chakra-ui/c-spinner": major
23+
"@chakra-ui/c-tag": major
24+
"@chakra-ui/c-theme-provider": major
25+
"@chakra-ui/c-visually-hidden": major
26+
"@chakra-ui/vue-next": major
27+
"@chakra-ui/vue-layout": major
28+
"@chakra-ui/nuxt-next": major
29+
"@chakra-ui/vue-styled": major
30+
"@chakra-ui/vue-system": major
31+
"@chakra-ui/vue-test-utils": major
32+
"@chakra-ui/vue-theme": major
33+
"@chakra-ui/vue-theme-tools": major
34+
"@chakra-ui/vue-utils": major
35+
"@chakra-ui/vue-a11y": major
36+
"@chakra-ui/vue-composables": major
37+
"@chakra-ui/vue-auto-import": major
38+
"@chakra-ui/vue-docs": major
39+
---
40+
41+
Add component for checkbox and checnbox group

‎.github/workflows/pr.yml

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,7 @@ jobs:
4949
run: yarn build
5050

5151
- name: Run tests
52-
run: yarn test
52+
run: yarn test:ci
5353
env:
5454
CI: true
5555

‎.github/workflows/release.yml

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,7 @@ jobs:
5050
run: yarn build && yarn bootstrap
5151

5252
- name: Testing components
53-
run: yarn test
53+
run: yarn test:ci
5454
env:
5555
CI: true
5656

‎components.d.ts

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
*
77
* This is a generated file. Do not edit it's contents.
88
*
9-
* This file was generated on 2022-08-31T15:33:17.883Z
9+
* This file was generated on 2022-09-12T04:00:56.880Z
1010
*/
1111

1212
import { ChakraProps, chakra } from "@chakra-ui/vue-system"
@@ -78,6 +78,7 @@ declare module "@vue/runtime-core" {
7878
CButton: typeof import("@chakra-ui/vue-next")["CButton"]
7979
CButtonGroup: typeof import("@chakra-ui/vue-next")["CButtonGroup"]
8080
CIconButton: typeof import("@chakra-ui/vue-next")["CIconButton"]
81+
CCheckbox: typeof import("@chakra-ui/vue-next")["CCheckbox"]
8182
CFocusLock: typeof import("@chakra-ui/vue-next")["CFocusLock"]
8283
CFormErrorIcon: typeof import("@chakra-ui/vue-next")["CFormErrorIcon"]
8384
CFormErrorMessage: typeof import("@chakra-ui/vue-next")["CFormErrorMessage"]

‎package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,7 @@
3131
"cy:run": "cypress run-ct --quiet",
3232
"test:component": "yarn cy:run",
3333
"test": "jest",
34+
"test:ci": "cross-env NODE_ENV=test jest --verbose --silent --config jest.config.js",
3435
"test:unit": "cross-env NODE_ENV=test jest --config jest.config.js",
3536
"lint": "eslint '*/**/*.{js,ts,tsx}' --quiet --fix",
3637
"docs:dev:legacy": "vitepress dev docs",

‎packages/c-checkbox/README.md

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
# @chakra-ui/c-checkbox
2+
3+
C checkbox component is used in forms when a user needs to select multiple values from several options
4+
5+
## Installation
6+
7+
```sh
8+
yarn add @chakra-ui/c-checkbox
9+
# or
10+
npm i @chakra-ui/c-checkbox
11+
```

‎packages/c-checkbox/examples/simple-checkbox.vue

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
<template>
2+
<c-checkbox default-checked> Simple checkbox </c-checkbox>
3+
</template>
4+
5+
<script lang="ts" setup>
6+
import { CCheckbox } from "@chakra-ui/vue-next"
7+
</script>

‎packages/c-checkbox/examples/with-checkbox-group.vue

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
<template>
2+
<c-checkbox-group v-model="items" color-scheme="blue" size="lg">
3+
<c-stack>
4+
<c-checkbox value="naruto"> Naruto </c-checkbox>
5+
<c-checkbox value="sasuke"> Sasuke </c-checkbox>
6+
<c-checkbox value="kakashi"> Kakashi </c-checkbox>
7+
</c-stack>
8+
</c-checkbox-group>
9+
</template>
10+
11+
<script lang="ts" setup>
12+
import { ref, watchEffect } from "vue"
13+
import { CCheckbox, CCheckboxGroup } from "@chakra-ui/vue-next"
14+
const items = ref(["naruto", "sasuke"])
15+
16+
watchEffect(() => {
17+
console.log("items list updated", items.value)
18+
})
19+
</script>

‎packages/c-checkbox/examples/with-color-scheme.vue

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<template>
2+
<c-stack>
3+
<c-checkbox default-checked color-scheme="red"> Red checkbox </c-checkbox>
4+
<c-checkbox default-checked color-scheme="green">
5+
Green checkbox
6+
</c-checkbox>
7+
<c-checkbox default-checked color-scheme="pink"> Pink checkbox </c-checkbox>
8+
</c-stack>
9+
</template>
10+
11+
<script lang="ts" setup>
12+
import { CCheckbox } from "@chakra-ui/vue-next"
13+
</script>

‎packages/c-checkbox/examples/with-indeterminate.vue

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
<template>
2+
<c-stack>
3+
<c-checkbox
4+
v-model="allChecked"
5+
:is-indeterminate="isIndeterminate"
6+
@change="
7+
(value) => {
8+
setCheckedItems([value, value])
9+
}
10+
"
11+
>
12+
Parent checkbox
13+
</c-checkbox>
14+
<c-stack pl="6" mt="1" spacing="1">
15+
<c-checkbox
16+
:model-value="checkedItems[0]"
17+
@change="
18+
(value) => {
19+
setCheckedItems([value, checkedItems[1]])
20+
}
21+
"
22+
>
23+
Child Checkbox 1
24+
</c-checkbox>
25+
<c-checkbox
26+
:model-value="checkedItems[1]"
27+
@change="
28+
(value) => {
29+
setCheckedItems([checkedItems[0], value])
30+
}
31+
"
32+
>
33+
Child Checkbox 2
34+
</c-checkbox>
35+
</c-stack>
36+
</c-stack>
37+
</template>
38+
39+
<script lang="ts" setup>
40+
import { computed, ref } from "vue"
41+
import { CCheckbox } from "@chakra-ui/vue-next"
42+
43+
const checkedItems = ref([false, false])
44+
function setCheckedItems(value: boolean[]) {
45+
checkedItems.value = [value[0], value[1]]
46+
}
47+
48+
const allChecked = computed(() => checkedItems.value.every(Boolean))
49+
const isIndeterminate = computed(
50+
() => checkedItems.value.some(Boolean) && !allChecked.value
51+
)
52+
</script>

0 commit comments

Comments
 (0)