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

Commit 77594d6

Browse files
codebender828codebender828
authored
Merge branch 'develop' into fix/nested-aspect-ratio
2 parents fce8a5f + 106a7ff commit 77594d6

File tree

7 files changed

+157
-1
lines changed

7 files changed

+157
-1
lines changed

‎.all-contributorsrc

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -195,6 +195,16 @@
195195
"example",
196196
"code"
197197
]
198+
},
199+
{
200+
"login": "odanado",
201+
"name": "odanado",
202+
"avatar_url": "https://avatars.githubusercontent.com/u/6040962?v=4",
203+
"profile": "https://github.com/odanado",
204+
"contributions": [
205+
"code",
206+
"tool"
207+
]
198208
}
199209
],
200210
"contributorsPerLine": 7,

‎README.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -215,6 +215,7 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d
215215
<td align="center"><a href="http://www.linkedin.com/in/schalch"><img src="https://avatars3.githubusercontent.com/u/13435327?v=4?s=50" width="50px;" alt=""/><br /><sub><b>Guilherme Schalch</b></sub></a><br /><a href="https://github.com/chakra-ui/chakra-ui-vue/commits?author=gbschalch" title="Code">💻</a></td>
216216
<td align="center"><a href="http://www.be-codified.com"><img src="https://avatars1.githubusercontent.com/u/10107183?v=4?s=50" width="50px;" alt=""/><br /><sub><b>Žiga Vukčevič</b></sub></a><br /><a href="https://github.com/chakra-ui/chakra-ui-vue/commits?author=be-codified" title="Documentation">📖</a></td>
217217
<td align="center"><a href="https://github.com/carwack"><img src="https://avatars3.githubusercontent.com/u/16015740?v=4?s=50" width="50px;" alt=""/><br /><sub><b>Sybren W</b></sub></a><br /><a href="https://github.com/chakra-ui/chakra-ui-vue/commits?author=carwack" title="Documentation">📖</a> <a href="#content-carwack" title="Content">🖋</a> <a href="#example-carwack" title="Examples">💡</a> <a href="https://github.com/chakra-ui/chakra-ui-vue/commits?author=carwack" title="Code">💻</a></td>
218+
<td align="center"><a href="https://github.com/odanado"><img src="https://avatars.githubusercontent.com/u/6040962?v=4?s=50" width="50px;" alt=""/><br /><sub><b>odanado</b></sub></a><br /><a href="https://github.com/chakra-ui/chakra-ui-vue/commits?author=odanado" title="Code">💻</a> <a href="#tool-odanado" title="Tools">🔧</a></td>
218219
</tr>
219220
</table>
220221

‎package.json

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,8 @@
4141
"docs:lint": "yarn workspace chakra-ui-docs lint",
4242
"theme:dev": "yarn workspace @chakra-ui/theme-vue build",
4343
"docs-dev": "yarn workspace chakra-ui-docs dev",
44+
"docs-build": "yarn workspace chakra-ui-docs build",
45+
"docs-serve": "yarn workspace chakra-ui-docs nuxt start",
4446
"evalbundle": "bundlesize"
4547
},
4648
"dependencies": {

‎packages/chakra-ui-core/src/CSwitch/CSwitch.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -125,6 +125,7 @@ const CSwitch = {
125125
as: 'label'
126126
},
127127
attrs: {
128+
position: 'relative',
128129
display: 'inline-block',
129130
verticalAlign: 'middle',
130131
...data.attrs,

‎packages/chakra-ui-core/src/CSwitch/tests/__snapshots__/CSwitch.test.js.snap

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
exports[`should render correctly 1`] = `
44
<DocumentFragment>
55
<label
6-
class="css-v7ibj3"
6+
class="css-lncjus"
77
data-chakra-component="CSwitch"
88
data-testid="switch"
99
>

‎website/components/Navbar.vue

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,8 @@
2828
d="flex"
2929
align-items="center"
3030
list-style-type="none"
31+
pt="8px"
32+
pl="16px"
3133
>
3234
<CBox :display="['none', 'none', 'block']" as="li" mr="2">
3335
<span id="github-star-button" />

‎website/pages/with-vuepress.mdx

Lines changed: 140 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,140 @@
1+
import SEO from '../components/SEO'
2+
import { CodeGroup, CodeTab } from '~/components/code'
3+
4+
<SEO
5+
title="Using UI with Vuepress"
6+
description="Getting started with Chakra UI and Vuepress"
7+
/>
8+
9+
# Usage with Vuepress
10+
11+
If you use Vuepress, you can extend your theme to install Chakra globally using Vuepress's [theme inheritance](https://vuepress.vuejs.org/theme/inheritance.html).
12+
13+
<carbon-ad />
14+
15+
## Installation
16+
17+
Install Chakra UI Vue and its peer dependency, `@emotion/css`
18+
19+
<br/>
20+
21+
<CodeGroup lang="bash">
22+
<CodeTab label="Yarn">
23+
yarn add @chakra-ui/vue @emotion/css
24+
</CodeTab>
25+
<CodeTab label="NPM">
26+
npm install @chakra-ui/vue @emotion/css
27+
</CodeTab>
28+
</CodeGroup>
29+
30+
## Usage
31+
32+
### Extend Your Theme
33+
34+
First create a `theme` folder in your .vuepress directory and extend you Vuepress theme in your `theme/index.js` file.
35+
36+
```js
37+
module.exports = {
38+
extend: '@vuepress/theme-default' // whichever vuepress theme you use
39+
}
40+
```
41+
42+
### Add Chakra's Global Mixins
43+
44+
Add the Chakra UI providers in your `theme/enhanceApp.js` file as shown.
45+
46+
```js
47+
import Chakra, { internalIcons, defaultTheme, parsePackIcons } from '@chakra-ui/vue'
48+
import { faHandHoldingHeart } from '@fortawesome/free-solid-svg-icons'
49+
50+
export default ({
51+
Vue, // the version of Vue being used in the VuePress app
52+
options, // the options for the root Vue instance
53+
router, // the router instance for the app
54+
siteData, // site metadata
55+
isServer // is this enhancement applied in server-rendering or client
56+
}) => {
57+
Vue.use(Chakra)
58+
Vue.mixin({
59+
provide () {
60+
return {
61+
$chakraTheme: () => defaultTheme,
62+
$chakraColorMode: () => this.colorMode,
63+
$toggleColorMode: this.toggleColorMode,
64+
// icons must be parsed and spread into the icons provider to be available globally
65+
$chakraIcons: {
66+
...internalIcons,
67+
...parsePackIcons({ faHandHoldingHeart })
68+
}
69+
}
70+
},
71+
methods: {
72+
toggleColorMode () {
73+
this.colorMode = this.colorMode === 'light' ? 'dark' : 'light'
74+
}
75+
}
76+
})
77+
})
78+
```
79+
80+
Now you can wrap your main application inside the Chakra `CThemeProvider` component by creating a layout wrapper in `theme/layouts/Layout.vue`.
81+
82+
```vue
83+
<template>
84+
<CThemeProvider>
85+
<CReset /> <!-- NOTE: Resetting styles may have adverse effects on some themes -->
86+
<Layout />
87+
</CThemeProvider>
88+
</template>
89+
90+
<script>
91+
import { CThemeProvider, CReset } from '@chakra-ui/vue'
92+
import Layout from '@parent-theme/layouts/Layout.vue'
93+
94+
export default {
95+
name: 'ChakraLayout',
96+
components: {
97+
CThemeProvider,
98+
CReset,
99+
Layout
100+
}
101+
}
102+
</script>
103+
```
104+
105+
106+
## Using Chakra components
107+
108+
_In your `App.vue` file._
109+
110+
```vue
111+
<template>
112+
<c-box>
113+
<c-button>
114+
Chakra Consumed! ⚡️
115+
</c-button>
116+
</c-box>
117+
</template>
118+
119+
<script lang="js">
120+
import { CBox, CButton } from '@chakra-ui/vue'
121+
122+
export default {
123+
name: 'App',
124+
components: {
125+
CBox,
126+
CButton
127+
}
128+
}
129+
</script>
130+
```
131+
132+
### Codesandbox starters
133+
134+
- [Vue Starter](https://codesandbox.io/s/chakra-ui-vue-starter-2sy0g)
135+
- [Nuxt Starter](https://codesandbox.io/s/chakra-ui-nuxt-demo-f8tq4)
136+
- [Gridsome Starter](https://codesandbox.io/s/chakra-ui-gridsome-demo-038c9)
137+
138+
### Storybook Components
139+
140+
You can also view all developed components in [Storybook](https://chakra-ui-vue.netlify.com)!

0 commit comments

Comments
 (0)