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

Commit 9676048

Browse files
codebender828codebender828
authored
Merge pull request #162 from chakra-ui/refactor/upgrade-zag
refactor/upgrade zag
2 parents 2b54859 + a16f172 commit 9676048

Some content is hidden

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

69 files changed

+2668
-191
lines changed

‎build/components.json

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,18 @@
88
],
99
"default": "div"
1010
},
11+
"index": [
12+
null,
13+
null,
14+
null,
15+
null
16+
],
17+
"defaultIndex": [
18+
null,
19+
null,
20+
null,
21+
null
22+
],
1123
"reduceMotion": {
1224
"default": false
1325
}
@@ -1377,6 +1389,17 @@
13771389
}
13781390
}
13791391
},
1392+
"CTag": {
1393+
"props": {}
1394+
},
1395+
"CTagCloseButton": {
1396+
"props": {}
1397+
},
1398+
"CTagLabel": {
1399+
"props": {}
1400+
},
1401+
"CTagLeftIcon": {},
1402+
"CTagRightIcon": {},
13801403
"CVisuallyHidden": {
13811404
"name": "chakra-factory-span",
13821405
"inheritAttrs": false,

‎docs/.vitepress/__theme/index.js

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
2+
import Default from '../../layouts/default.vue'
3+
import { domElements, chakra } from '@chakra-ui/vue-system'
4+
import ChakraUIVue from '@chakra-ui/vue-next'
5+
// import kebabCase from 'lodash.kebabcase'
6+
function kebabCase(key) {
7+
const result = key.replace(/([A-Z])/g, " $1").trim();
8+
return result.split(" ").join("-").toLowerCase();
9+
}
10+
11+
export default {
12+
Layout: Default,
13+
NotFound: () => 'custom 404', // <- this is a Vue 3 functional component
14+
enhanceApp({ app }) {
15+
// app is the Vue 3 app instance from `createApp()`. router is VitePress'
16+
// custom router. `siteData`` is a `ref`` of current site-level metadata.
17+
app.use(ChakraUIVue, {
18+
icons: {
19+
library: {
20+
feActivity
21+
}
22+
}
23+
})
24+
25+
domElements.forEach((tag) => {
26+
app.component(`chakra.${tag}`, chakra(tag))
27+
})
28+
29+
Object.keys(ChakraUIVue).forEach((component) => {
30+
if (kebabCase(component).startsWith('c-')) {
31+
app.component(component, ChakraUIVue[component])
32+
}
33+
})
34+
}
35+
}

‎docs/.vitepress/config.js

Lines changed: 89 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,89 @@
1+
module.exports = {
2+
lang: 'en-US',
3+
title: '@chakra-ui/vue@next',
4+
description: 'Build accessible Vue apps with speed',
5+
6+
themeConfig: {
7+
repo: 'chakra-ui/chakra-ui-vue-next',
8+
docsDir: 'docs',
9+
10+
editLinks: true,
11+
editLinkText: 'Edit this page on GitHub',
12+
lastUpdated: 'Last Updated',
13+
14+
nav: [
15+
{ text: 'Guide', link: '/', activeMatch: '^/$|^/guide/' },
16+
{
17+
text: 'Config Reference',
18+
link: '/config/basics',
19+
activeMatch: '^/config/'
20+
},
21+
{
22+
text: 'Release Notes',
23+
link: 'https://github.com/chakra-ui/chakra-ui-vue-next/releases'
24+
}
25+
],
26+
27+
sidebar: {
28+
'/setup/': getSetupSidebar(),
29+
'/components/': getSetupSidebar(),
30+
'/composables/': getSetupSidebar(),
31+
'/guides/': getSetupSidebar(),
32+
'/': getSetupSidebar()
33+
}
34+
}
35+
}
36+
37+
function getSetupSidebar() {
38+
return [
39+
{
40+
text: 'Introduction',
41+
children: [
42+
{ text: 'Chakra UI Vue', link: '/' },
43+
{ text: 'Getting Started', link: '/pages/getting-started/getting-started' },
44+
{ text: 'Plugin Options', link: '/pages/getting-started/plugin-options' },
45+
{ text: 'Principles', link: '/pages/getting-started/principles' },
46+
{ text: 'Changelog', link: '/pages/getting-started/changelog' }
47+
]
48+
},
49+
{
50+
text: 'Features',
51+
children: [
52+
{ text: 'Style Props', link: '/pages/features/style-props' },
53+
{ text: 'Gradient', link: '/pages/features/gradient' },
54+
{ text: 'Color Mode', link: '/pages/features/color-mode' },
55+
{ text: 'CSS Variables', link: '/pages/features/css-variables' },
56+
{ text: 'Responsive Styles', link: '/pages/features/responsive-styles' },
57+
{ text: 'Chakra Factory', link: '/pages/features/chakra-factory' },
58+
{ text: 'Text & Layer Styles', link: '/pages/features/text-and-layer-styles' }
59+
]
60+
},
61+
{
62+
text: 'Guides',
63+
children: [
64+
{ text: 'Components guide', link: '/guides/component-guide' }
65+
]
66+
},
67+
{
68+
text: 'Components',
69+
children: [
70+
{ text: 'Alert', link: '/components/alert' },
71+
{ text: 'Badge', link: '/components/badge' },
72+
{ text: 'Breadcrumb', link: '/components/breadcrumb' },
73+
{ text: 'Button', link: '/components/button' },
74+
{ text: 'Code', link: '/components/code' },
75+
{ text: 'Icon', link: '/components/icon' },
76+
{ text: 'Spinner', link: '/components/spinner' },
77+
{ text: 'CSS reset', link: '/components/css-reset' },
78+
{ text: 'Visually hidden', link: '/components/visually-hidden' },
79+
]
80+
},
81+
{
82+
text: 'Composables',
83+
children: [
84+
{ text: 'usePopper', link: '/composables/use-popper' },
85+
{ text: 'useFocusLock', link: '/composables/use-focus-lock' }
86+
]
87+
}
88+
]
89+
}

‎docs/components/alert.md

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
# Alert
2+
3+
> TODO

‎docs/components/badge.md

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
# Badge
2+
3+
Badges are used to highlight an item's status for quick recognition.
4+
5+
## Import
6+
7+
```bash
8+
import { CBadge } from "@chakra-ui/vue-next"
9+
```
10+
11+
## Usage
12+
```vue
13+
<c-badge color-scheme="blue">Badge</c-badge>
14+
```
15+
16+
### Badge Color
17+
18+
Pass the `colorScheme` prop to customize the color of the Badge. `colorScheme`
19+
can be any **color key** that exists in `theme.colors`.
20+
21+
TODO: Link to theming page
22+
23+
```vue
24+
<c-badge>Default</c-badge>
25+
<c-badge color-scheme="green">Success</c-badge>
26+
<c-badge color-scheme="red">Removed</c-badge>
27+
<c-badge color-scheme="purple">New</c-badge>
28+
```
29+
30+
### Badge Variants
31+
32+
Pass the `variant` prop and set it to either `subtle`, `solid`, or `outline` to
33+
get a different style.
34+
35+
```vue
36+
<c-badge variant="outline" color-scheme="green">Default</c-badge>
37+
<c-badge variant="solid" color-scheme="green">Success</c-badge>
38+
<c-badge variant="subtle" color-scheme="green">Removed</c-badge>
39+
```
40+
41+
TODO: Add composition examples
42+
43+
## Props
44+
45+
The `CBadge` component composes `CBox` component so you can pass props for `CBox`.
46+
| Name | Type | Description | Default |
47+
| :---: | :---: | :---: | :---: |
48+
|`colorScheme`|`"blue" | "cyan" | "gray" | "green" | "orange" | "pink" | "purple" | "red" | "teal" | "yellow" | "whiteAlpha" | "blackAlpha" | "linkedin" | "facebook" | "messenger" | "whatsapp" | "twitter" | "telegram"`| Theme color scheme |`"gray"`|
49+
|`size` | `"sm" | "md" | "lg" | "xs"` | Sizes for Badge are not implemented in the default theme. You can extend the theme to implement them. | - |
50+
|`variant` | `"outline" | "solid" | "subtle"` | | `"subtle"` |

‎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+
:::

0 commit comments

Comments
 (0)