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

Commit 40ccf31

Browse files
codebender828codebender828
committed
feat: create accordion componenet
1 parent b5a3972 commit 40ccf31

File tree

14 files changed

+303
-187
lines changed

14 files changed

+303
-187
lines changed

‎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-07-11T16:46:54.692Z
9+
* This file was generated on 2022-07-12T10:47:00.309Z
1010
*/
1111

1212
import { ChakraProps, chakra } from "@chakra-ui/vue-system"
@@ -49,6 +49,7 @@ declare module "@vue/runtime-core" {
4949

5050
CAccordion: typeof import("@chakra-ui/vue-next")["CAccordion"]
5151
CAccordionButton: typeof import("@chakra-ui/vue-next")["CAccordionButton"]
52+
CAccordionIcon: typeof import("@chakra-ui/vue-next")["CAccordionIcon"]
5253
CAccordionItem: typeof import("@chakra-ui/vue-next")["CAccordionItem"]
5354
CAccordionPanel: typeof import("@chakra-ui/vue-next")["CAccordionPanel"]
5455
CBreadcrumb: typeof import("@chakra-ui/vue-next")["CBreadcrumb"]

‎packages/anatomy/examples/base-vue-anatomy.vue

Lines changed: 0 additions & 3 deletions
This file was deleted.

‎packages/c-accordion/examples/allow-multiple.vue

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
<template>
2+
<chakra.div w="400px">
3+
<c-accordion allow-multiple>
4+
<c-accordion-item id="poop">
5+
<c-accordion-button>
6+
<c-v-stack align="flex-start" w="full">
7+
<chakra.p font-weight="bold"> Watercraft </chakra.p>
8+
<chakra.p font-size="0.8em">Yatches, Boats and Dinghies</chakra.p>
9+
</c-v-stack>
10+
<c-accordion-icon />
11+
</c-accordion-button>
12+
<c-accordion-panel> Sample accordion content </c-accordion-panel>
13+
</c-accordion-item>
14+
<c-accordion-item>
15+
<c-accordion-button>
16+
<c-v-stack align="flex-start" w="full">
17+
<chakra.p font-weight="bold"> Automobiles </chakra.p>
18+
<chakra.p font-size="0.8em">Yatches, Boats and Dinghies</chakra.p>
19+
</c-v-stack>
20+
<c-accordion-icon />
21+
</c-accordion-button>
22+
<c-accordion-panel> Sample accordion content </c-accordion-panel>
23+
</c-accordion-item>
24+
<c-accordion-item>
25+
<c-accordion-button>
26+
<c-v-stack align="flex-start" w="full">
27+
<chakra.p font-weight="bold"> Aircrafts </chakra.p>
28+
<chakra.p font-size="0.8em">Yatches, Boats and Dinghies</chakra.p>
29+
</c-v-stack>
30+
<c-accordion-icon />
31+
</c-accordion-button>
32+
<c-accordion-panel> Sample accordion content </c-accordion-panel>
33+
</c-accordion-item>
34+
</c-accordion>
35+
</chakra.div>
36+
</template>
37+
38+
<script lang="ts" setup>
39+
import {
40+
CAccordion,
41+
CAccordionItem,
42+
CAccordionButton,
43+
CAccordionPanel,
44+
CAccordionIcon,
45+
} from "@chakra-ui/c-accordion"
46+
</script>

‎packages/c-accordion/examples/allow-toggle.vue

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
<template>
2+
<chakra.div w="400px">
3+
<chakra.label>
4+
<input type="checkbox" v-model="isToggle" />
5+
Allow toggle
6+
</chakra.label>
7+
<c-accordion :allow-toggle="isToggle">
8+
<c-accordion-item>
9+
<c-accordion-button>
10+
<c-v-stack align="flex-start">
11+
<chakra.p font-weight="bold"> Watercraft </chakra.p>
12+
<chakra.p font-size="0.8em">Yatches, Boats and Dinghies</chakra.p>
13+
</c-v-stack>
14+
</c-accordion-button>
15+
<c-accordion-panel> Sample accordion content </c-accordion-panel>
16+
</c-accordion-item>
17+
<c-accordion-item>
18+
<c-accordion-button>
19+
<c-v-stack align="flex-start">
20+
<chakra.p font-weight="bold"> Automobiles </chakra.p>
21+
<chakra.p font-size="0.8em">Yatches, Boats and Dinghies</chakra.p>
22+
</c-v-stack>
23+
</c-accordion-button>
24+
<c-accordion-panel> Sample accordion content </c-accordion-panel>
25+
</c-accordion-item>
26+
<c-accordion-item>
27+
<c-accordion-button>
28+
<c-v-stack align="flex-start">
29+
<chakra.p font-weight="bold"> Aircrafts </chakra.p>
30+
<chakra.p font-size="0.8em">Yatches, Boats and Dinghies</chakra.p>
31+
</c-v-stack>
32+
</c-accordion-button>
33+
<c-accordion-panel> Sample accordion content </c-accordion-panel>
34+
</c-accordion-item>
35+
</c-accordion>
36+
</chakra.div>
37+
</template>
38+
39+
<script lang="ts" setup>
40+
import {
41+
CAccordion,
42+
CAccordionItem,
43+
CAccordionButton,
44+
CAccordionPanel,
45+
} from "@chakra-ui/c-accordion"
46+
import { useToggle } from "@vueuse/core"
47+
const [isToggle] = useToggle(true)
48+
</script>

‎packages/c-accordion/package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@
2020
"clean": "rimraf dist"
2121
},
2222
"dependencies": {
23+
"@chakra-ui/c-icon": "1.0.0-alpha.10",
2324
"@chakra-ui/utils": "^2.0.3",
2425
"@chakra-ui/vue-composables": "0.1.0-alpha.9",
2526
"@chakra-ui/vue-system": "0.1.0-alpha.10",

0 commit comments

Comments
 (0)