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

Commit d74ba60

Browse files
codebender828codebender828
authored
Merge pull request #326 from chakra-ui/feat/auto-import-nuxt
feat: add autoImport to @chakra-ui/nuxt module options
2 parents 69df215 + 4defa3f commit d74ba60

File tree

20 files changed

+694
-55
lines changed

20 files changed

+694
-55
lines changed

‎package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -93,6 +93,7 @@
9393
"babelrc-rollup": "^3.0.0",
9494
"breadstick": "^0.2.14",
9595
"can-use-dom": "^0.1.0",
96+
"chakra-loader": "latest",
9697
"color": "^3.1.2",
9798
"copy-to-clipboard": "^3.3.1",
9899
"core-js": "^3.6.4",

‎packages/chakra-ui-core/src/directives/chakra.directive.js

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -63,7 +63,6 @@ export function createServerDirective (theme) {
6363
export function createClientDirective (theme) {
6464
function applyClientStyles (el, binding, vnode) {
6565
const { styleAttrs } = extractChakraAttrs(vnode.data.attrs)
66-
// console.log({ styleAttrs, nativeAttrs })
6766
const className = css(Css(styleAttrs)(theme))
6867
el.classList.add(className)
6968
purifyAttrs(el, styleAttrs)

‎packages/chakra-ui-nuxt/example/autoimport/layouts/default.vue

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<template>
2+
<div class="container">
3+
<c-theme-provider>
4+
<c-color-mode-provider>
5+
<c-box font-family="body" as="main">
6+
<c-reset />
7+
<Nuxt />
8+
</c-box>
9+
</c-color-mode-provider>
10+
</c-theme-provider>
11+
</div>
12+
</template>

‎packages/chakra-ui-nuxt/example/nuxt.config.js renamed to ‎packages/chakra-ui-nuxt/example/autoimport/nuxt.config.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,11 @@ const { resolve } = require('path')
22
const theme = require('./utils/theme')
33

44
module.exports = {
5-
rootDir: resolve(__dirname, '..'),
5+
rootDir: resolve(__dirname, '../..'),
66
buildDir: resolve(__dirname, '.nuxt'),
77
srcDir: __dirname,
88
modules: [
9-
{ handler: require('../lib/module') },
9+
{ handler: require('../../lib/module') },
1010
{ handler: require('@nuxtjs/emotion') }
1111
],
1212
chakra: {

‎packages/chakra-ui-nuxt/example/pages/directive.vue renamed to ‎packages/chakra-ui-nuxt/example/autoimport/pages/directive.vue

File renamed without changes.

‎packages/chakra-ui-nuxt/example/autoimport/pages/index.vue

Lines changed: 129 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,129 @@
1+
<template>
2+
<div class="container">
3+
<c-box
4+
v-bind="mainStyles[colorMode]"
5+
d="flex"
6+
w="100vw"
7+
h="100vh"
8+
flex-dir="column"
9+
justify-content="center"
10+
>
11+
<c-heading text-align="center" mb="4">
12+
⚡️ Hello chakra-ui/vue
13+
</c-heading>
14+
<c-link as="nuxt-link" to="/directive">
15+
Go to directive ->
16+
</c-link>
17+
<c-flex justify="center" direction="column" align="center">
18+
<c-box mb="3">
19+
<c-icon-button
20+
mr="3"
21+
:icon="colorMode === 'light' ? 'moon' : 'sun'"
22+
:aria-label="`Switch to ${colorMode === 'light' ? 'dark' : 'light'} mode`"
23+
@click="toggleColorMode"
24+
/>
25+
<c-button left-icon="info" variant-color="blue" @click="showToast">
26+
Show Toast
27+
</c-button>
28+
</c-box>
29+
<c-avatar-group>
30+
<c-avatar
31+
name="Evan You"
32+
alt="Evan You"
33+
src="https://pbs.twimg.com/profile_images/1206997998900850688/cTXTQiHm_400x400.jpg"
34+
>
35+
<c-avatar-badge size="1.0em" bg="green.500" />
36+
</c-avatar>
37+
<c-avatar
38+
name="Jonathan Bakebwa"
39+
alt="Jonathan Bakebwa"
40+
src="https://res.cloudinary.com/xtellar/image/upload/v1572857445/me_zqos4e.jpg"
41+
>
42+
<c-avatar-badge size="1.0em" bg="green.500" />
43+
</c-avatar>
44+
<c-avatar
45+
name="Segun Adebayo"
46+
alt="Segun Adebayo"
47+
src="https://pbs.twimg.com/profile_images/1169353373012897802/skPUWd6e_400x400.jpg"
48+
>
49+
<c-avatar-badge size="1.0em" bg="green.500" />
50+
</c-avatar>
51+
<c-avatar src="pop">
52+
<c-avatar-badge size="1.0em" border-color="papayawhip" bg="tomato" />
53+
</c-avatar>
54+
</c-avatar-group>
55+
<c-button
56+
left-icon="close"
57+
variant-color="red"
58+
mt="3"
59+
@click="showModal = true"
60+
>
61+
Delete Account
62+
</c-button>
63+
<c-text p="3" mt="3" bg="brand.800" color="brand.200" :data-test-custom-theme-color="$chakra.theme.colors.brand['200']">
64+
Brand color from extended theme
65+
</c-text>
66+
<c-modal :is-open="showModal">
67+
<c-modal-overlay />
68+
<c-modal-content>
69+
<c-modal-header>Are you sure?</c-modal-header>
70+
<c-modal-body>Deleting user cannot be undone</c-modal-body>
71+
<c-modal-footer>
72+
<c-button @click="showModal = false">
73+
Cancel
74+
</c-button>
75+
<c-button margin-left="3" variant-color="red" @click="showModal = false">
76+
Delete User
77+
</c-button>
78+
</c-modal-footer>
79+
<c-modal-close-button @click="showModal = false" />
80+
</c-modal-content>
81+
</c-modal>
82+
</c-flex>
83+
</c-box>
84+
</div>
85+
</template>
86+
87+
<script lang="js">
88+
export default {
89+
name: 'App',
90+
inject: ['$chakraTheme', '$chakraColorMode', '$toggleColorMode'],
91+
data () {
92+
return {
93+
showModal: false,
94+
mainStyles: {
95+
dark: {
96+
bg: 'gray.700',
97+
color: 'whiteAlpha.900'
98+
},
99+
light: {
100+
bg: 'white',
101+
color: 'gray.900'
102+
}
103+
}
104+
}
105+
},
106+
computed: {
107+
colorMode () {
108+
return this.$chakraColorMode()
109+
},
110+
theme () {
111+
return this.$chakraTheme()
112+
},
113+
toggleColorMode () {
114+
return this.$toggleColorMode
115+
}
116+
},
117+
methods: {
118+
showToast () {
119+
this.$toast({
120+
title: 'Account created.',
121+
description: "We've created your account for you.",
122+
status: 'success',
123+
duration: 10000,
124+
isClosable: true
125+
})
126+
}
127+
}
128+
}
129+
</script>

‎packages/chakra-ui-nuxt/example/utils/theme.js renamed to ‎packages/chakra-ui-nuxt/example/autoimport/utils/theme.js

File renamed without changes.

‎packages/chakra-ui-nuxt/example/layouts/default.vue renamed to ‎packages/chakra-ui-nuxt/example/base/layouts/default.vue

File renamed without changes.

‎packages/chakra-ui-nuxt/example/base/nuxt.config.js

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
const { resolve } = require('path')
2+
const theme = require('./utils/theme')
3+
4+
module.exports = {
5+
rootDir: resolve(__dirname, '../..'),
6+
buildDir: resolve(__dirname, '.nuxt'),
7+
srcDir: __dirname,
8+
modules: [
9+
{ handler: require('../../lib/module') },
10+
{ handler: require('@nuxtjs/emotion') }
11+
],
12+
chakra: {
13+
config: {
14+
autoImport: false
15+
},
16+
extendTheme: theme
17+
}
18+
}

‎packages/chakra-ui-nuxt/example/base/pages/directive.vue

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
<template>
2+
<div>
3+
<div
4+
v-chakra
5+
p="3"
6+
bg="red.100"
7+
rounded="md"
8+
color="red.500"
9+
font-weight="bold"
10+
>
11+
Welcome to Chakra directive
12+
</div>
13+
<div>
14+
<div
15+
v-chakra="{
16+
p: 3,
17+
shadow: 'sm',
18+
h1: {
19+
bg: 'blue.100'
20+
},
21+
}"
22+
>
23+
<h1>Title</h1>
24+
<p>Text</p>
25+
</div>
26+
</div>
27+
<div
28+
v-chakra="theme => ({
29+
shadow: 'sm',
30+
bg: theme.colors.blue[800],
31+
color: theme.colors.yellow[300],
32+
p: {
33+
fontWeight: 'bold',
34+
p: 3
35+
}
36+
})"
37+
>
38+
<p>Computed styles</p>
39+
</div>
40+
<div>
41+
<button
42+
v-chakra="{
43+
':hover': { bg: 'green.400' },
44+
':focus': { shadow: 'outline' }
45+
}"
46+
font-weight="bold"
47+
px="4"
48+
py="3"
49+
color="white"
50+
rounded="md"
51+
bg="blue.400"
52+
outline="none"
53+
>
54+
Button
55+
</button>
56+
</div>
57+
</div>
58+
</template>
59+
60+
<script>
61+
export default {
62+
name: 'Directive'
63+
}
64+
</script>

0 commit comments

Comments
 (0)