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

Commit 9c4c04a

Browse files
codebender828codebender828
authored
Merge pull request #84 from chakra-ui/develop
chore: release candidate `@chakra-ui/vue-next1.0.0-alpha.6` 🎉
2 parents 62cf25f + 3d6a084 commit 9c4c04a

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

55 files changed

+4165
-2227
lines changed

‎.changeset/old-insects-exist.md

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
---
2+
'@chakra-ui/c-accordion': minor
3+
'@chakra-ui/c-alert': minor
4+
'@chakra-ui/c-breadcrumb': minor
5+
'@chakra-ui/c-button': minor
6+
'@chakra-ui/c-close-button': minor
7+
'@chakra-ui/c-code': minor
8+
'@chakra-ui/c-color-mode': minor
9+
'@chakra-ui/c-flex': minor
10+
'@chakra-ui/c-focus-lock': minor
11+
'@chakra-ui/c-icon': minor
12+
'@chakra-ui/c-modal': minor
13+
'@chakra-ui/c-motion': minor
14+
'@chakra-ui/c-popper': minor
15+
'@chakra-ui/c-portal': minor
16+
'@chakra-ui/c-reset': minor
17+
'@chakra-ui/c-scroll-lock': minor
18+
'@chakra-ui/c-spinner': minor
19+
'@chakra-ui/c-theme-provider': minor
20+
'@chakra-ui/c-visually-hidden': minor
21+
'@chakra-ui/vue-next': minor
22+
'@chakra-ui/vue-layout': minor
23+
'@chakra-ui/vue-system': minor
24+
'@chakra-ui/vue-test-utils': minor
25+
'@chakra-ui/vue-theme': minor
26+
'@chakra-ui/vue-theme-tools': minor
27+
'@chakra-ui/vue-utils': minor
28+
'@chakra-ui/vue-a11y': minor
29+
'@chakra-ui/vue-composables': minor
30+
'@chakra-ui/vue-auto-import': minor
31+
'@chakra-ui/vue-docs': minor
32+
---
33+
34+
Create breadcrumb and collapse components

‎components.d.ts

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
/**
2-
* Typescript support for @@chakra-ui/vue-next1.0.0-alpha.5 auto-imported
2+
* Typescript support for @@chakra-ui/vue-next1.0.0-alpha.6 auto-imported
33
* components using `vite-plugin-components`
44
*
55
* @see: https://github.com/antfu/vite-plugin-components#typescript
66
*
77
* This is a generated file. Do not edit it's contents.
88
*
9-
* This file was generated on 2021-07-06T09:19:34.498Z
9+
* This file was generated on 2021-07-29T05:01:14.847Z
1010
*/
1111

1212
import { ChakraProps } from '@chakra-ui/vue-system'
@@ -42,6 +42,10 @@ declare module 'vue' {
4242
CAlertTitle: typeof import('@chakra-ui/vue-next')['CAlertTitle']
4343
CAlertDescription: typeof import('@chakra-ui/vue-next')['CAlertDescription']
4444
CAlertIcon: typeof import('@chakra-ui/vue-next')['CAlertIcon']
45+
CBreadcrumb: typeof import('@chakra-ui/vue-next')['CBreadcrumb']
46+
CBreadcrumbSeparator: typeof import('@chakra-ui/vue-next')['CBreadcrumbSeparator']
47+
CBreadcrumbItem: typeof import('@chakra-ui/vue-next')['CBreadcrumbItem']
48+
CBreadcrumbLink: typeof import('@chakra-ui/vue-next')['CBreadcrumbLink']
4549
CButton: typeof import('@chakra-ui/vue-next')['CButton']
4650
CButtonGroup: typeof import('@chakra-ui/vue-next')['CButtonGroup']
4751
CIconButton: typeof import('@chakra-ui/vue-next')['CIconButton']

‎docs/.vitepress/config.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -54,6 +54,7 @@ function getSetupSidebar() {
5454
children: [
5555
{ text: 'Alert', link: '/components/alert' },
5656
{ text: 'Badge', link: '/components/badge' },
57+
{ text: 'Breadcrumb', link: '/components/breadcrumb' },
5758
{ text: 'Button', link: '/components/button' },
5859
{ text: 'Code', link: '/components/code' },
5960
{ text: 'Icon', link: '/components/icon' },

‎docs/components/breadcrumb.md

Lines changed: 120 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,120 @@
1+
# Breadcrumb
2+
3+
Breadcrumbs help users visualize their current location in relation to the rest of the website or application by showing the hierarchy of pages
4+
5+
## Installation
6+
7+
```sh
8+
yarn add @chakra-ui/c-breadcrumb
9+
# or
10+
npm i @chakra-ui/c-breadcrumb
11+
```
12+
13+
14+
## Import components
15+
16+
Chakra UI Vue exports 3 breadcrumb related components:
17+
18+
- `CBreadcrumb`: The parent container for breadcrumbs.
19+
- `CBreadcrumbItem`: Individual breadcrumb element containing a link and a
20+
divider.
21+
- `CBreadcrumbLink`: The breadcrumb link.
22+
23+
```js
24+
import { CBreadcrumb, CBreadcrumbItem, CBreadcrumbLink } from "@chakra-ui/vue-next"
25+
```
26+
27+
## Usage
28+
29+
Add `isCurrentPage` prop to the `CBreadcrumbItem` that matches the current path.
30+
When this prop is present, the `CBreadcrumbItem` doesn't have a separator, and
31+
the `CBreadcrumbLink` has `aria-current` set to `page`.
32+
33+
```html
34+
<c-breadcrumb>
35+
<c-breadcrumb-item>
36+
<c-breadcrumb-link href="#">Home</c-breadcrumb-link>
37+
</c-breadcrumb-item>
38+
39+
<c-breadcrumb-item>
40+
<c-breadcrumb-link as="router-link" to="/docs">Docs</c-breadcrumb-link>
41+
</c-breadcrumb-item>
42+
43+
<c-breadcrumb-item isCurrentPage>
44+
<c-breadcrumb-link>Help</c-breadcrumb-link>
45+
</c-breadcrumb-item>
46+
</c-breadcrumb>
47+
```
48+
49+
### Separators
50+
51+
Change the separator used in the breadcrumb by passing a string, like `-` element.
52+
53+
```html
54+
<c-breadcrumb separator="-">
55+
<c-breadcrumb-item>
56+
<c-breadcrumb-link href="#">Home</c-breadcrumb-link>
57+
</c-breadcrumb-item>
58+
59+
<c-breadcrumb-item>
60+
<c-breadcrumb-link as="router-link" to="/docs">Docs</c-breadcrumb-link>
61+
</c-breadcrumb-item>
62+
63+
<c-breadcrumb-item isCurrentPage>
64+
<c-breadcrumb-link>Help</c-breadcrumb-link>
65+
</c-breadcrumb-item>
66+
</c-breadcrumb>
67+
```
68+
### Using the separator slot
69+
70+
You can override the rendered spearator by using the `v-slot:separator` which will render any component you want as the separator for the `CBreadcrumb` component
71+
72+
```html
73+
<c-breadcrumb>
74+
<template v-slot:separator>
75+
<c-icon name="chevron-right" />
76+
</template>
77+
<c-breadcrumb-item>
78+
<c-breadcrumb-link as="router-link" to="/">Home</c-breadcrumb-link>
79+
</c-breadcrumb-item>
80+
<c-breadcrumb-item>
81+
<c-breadcrumb-link href="#">Docs</c-breadcrumb-link>
82+
</c-breadcrumb-item>
83+
<c-breadcrumb-item is-current-page>
84+
<c-breadcrumb-link href="#">About</c-breadcrumb-link>
85+
</c-breadcrumb-item>
86+
</c-breadcrumb>
87+
```
88+
### Using a functional icon component as the separator
89+
90+
You can also pass a functional component into the `:separator` prop
91+
92+
```html
93+
94+
<template>
95+
<c-breadcrumb :separator="SunIcon">
96+
<c-breadcrumb-item>
97+
<c-breadcrumb-link as="router-link" to="/">Home</c-breadcrumb-link>
98+
</c-breadcrumb-item>
99+
<c-breadcrumb-item>
100+
<c-breadcrumb-link href="#">Docs</c-breadcrumb-link>
101+
</c-breadcrumb-item>
102+
<c-breadcrumb-item is-current-page>
103+
<c-breadcrumb-link href="#">About</c-breadcrumb-link>
104+
</c-breadcrumb-item>
105+
</c-breadcrumb>
106+
</template>
107+
108+
<script setup>
109+
const SunIcon = () => {
110+
return h(CIcon, {
111+
name: 'sun',
112+
})
113+
}
114+
</script>
115+
116+
```
117+
118+
::: tip
119+
When cusomizing the breadcrumb separator with a component like a custom icon, It is recommended to use the `v-slot:separator` slot as compared to the `:separator` prop.
120+
:::

‎docs/components/collapse.md

Lines changed: 88 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,88 @@
1+
# Collapse
2+
3+
The Collapse component is used to create regions of content that can
4+
expand/collapse with a simple animation. It helps to hide content that's not
5+
immediately relevant to the user.
6+
7+
This component leverages [`@vueuse/motion`](https://motion.vueuse.org/)
8+
9+
## Import
10+
11+
```js
12+
import { CCollapse } from '@chakra-ui/vue-next';
13+
```
14+
15+
## Usage
16+
17+
### Basic Usage
18+
19+
```vue
20+
<template>
21+
<div>
22+
<c-button mb="4" variant-color="blue" @click="show = !show">
23+
Toggle
24+
</c-button>
25+
<c-collapse :is-open="show">
26+
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus
27+
terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer
28+
labore wes anderson cred nesciunt sapiente ea proident.
29+
</c-collapse>
30+
</div>
31+
</template>
32+
33+
<script>
34+
export default {
35+
data () {
36+
return {
37+
show: false
38+
}
39+
}
40+
}
41+
</script>
42+
```
43+
44+
### Changing the startingHeight
45+
46+
```vue
47+
<template>
48+
<div>
49+
<c-button mb="4" variant-color="blue" @click="show = !show">
50+
Show {{ show ? 'Less' : 'More' }}
51+
</c-button>
52+
<c-collapse :starting-height="20" :is-open="show">
53+
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus
54+
terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer
55+
labore wes anderson cred nesciunt sapiente ea proident.
56+
</c-collapse>
57+
</div>
58+
</template>
59+
60+
<script>
61+
export default {
62+
data () {
63+
return {
64+
show: false
65+
}
66+
}
67+
}
68+
</script>
69+
```
70+
71+
72+
## Props
73+
74+
This component doesn't have any custom props.
75+
76+
| Name | Type | Description |
77+
| ---------------- | --------- | ------------------------------------------------------------------------------------------------------------ |
78+
| isOpen | `boolean` | If `true`, the content will be visible |
79+
| animateOpacity | `boolean` | If `true`, the opacity of the content will be animated |
80+
| startingHeight | `number` | The height you want the content in it's collapsed state. Set to `0` by default |
81+
| endingHeight | `number` | The height you want the content in it's expanded state. Set to `auto` by default |
82+
83+
## Events
84+
85+
| Name | Payload | Description |
86+
| ---------- | --------- | ------------------------------------------------------------------------------------------------------------ |
87+
| `@entered` | `Event` | The event to be called when the collapse animation starts. |
88+
| `@left` | `Event` | The event to be called when the collapse animation ends. |

‎package.json

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -52,6 +52,7 @@
5252
"@cypress/snapshot": "^2.1.7",
5353
"@cypress/vite-dev-server": "^1.2.6",
5454
"@cypress/vue": "^3.0.1",
55+
"@docusaurus/utils": "^2.0.0-beta.3",
5556
"@emotion/css": "^11.1.3",
5657
"@emotion/server": "^11.0.0",
5758
"@manypkg/cli": "^0.17.0",
@@ -67,7 +68,9 @@
6768
"@types/lodash.kebabcase": "^4.1.6",
6869
"@types/lodash.mergewith": "^4.6.6",
6970
"@types/recursive-readdir": "^2.2.0",
71+
"@types/shelljs": "^0.8.9",
7072
"@types/tinycolor2": "^1.4.2",
73+
"@types/uuid": "^8.3.1",
7174
"@typescript-eslint/eslint-plugin": "^2.34.0",
7275
"@typescript-eslint/parser": "4.0.1",
7376
"@vitejs/plugin-vue": "^1.2.1",
@@ -130,14 +133,16 @@
130133
"pretty": "^2.0.0",
131134
"react": "^17.0.1",
132135
"recursive-readdir": "^2.2.2",
136+
"shelljs": "^0.8.4",
133137
"tinycolor2": "^1.4.2",
134138
"ts-jest": "^26.5.0",
135139
"ts-node": "^9.0.0",
136140
"typescript": "^4.1.3",
137141
"vite": "^2.4.0",
138142
"vite-plugin-components": "^0.8.3",
139-
"vite-plugin-mdx-vue": "^1.6.0",
143+
"vite-plugin-mdx-vue": "^1.1.3",
140144
"vite-plugin-pages": "^0.9.2",
145+
"vite-plugin-vue-layouts": "^0.3.1",
141146
"vite-ssg": "^0.11.4",
142147
"vitepress": "^0.12.0",
143148
"vue": "^3.1.4",

0 commit comments

Comments
 (0)