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

Commit 821d9de

Browse files
codebender828codebender828
committed
feat: export types
1 parent c5310b9 commit 821d9de

File tree

18 files changed

+371
-44
lines changed

18 files changed

+371
-44
lines changed

‎@types/components.d.ts

Lines changed: 1 addition & 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 2023-02-25T15:12:13.221Z
9+
* This file was generated on 2023-02-25T15:51:56.045Z
1010
*/
1111

1212
import { ChakraProps, chakra } from "@chakra-ui/vue-system"

‎components.d.ts

Lines changed: 1 addition & 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 2023-02-25T15:12:13.221Z
9+
* This file was generated on 2023-02-25T15:51:56.045Z
1010
*/
1111

1212
import { ChakraProps, chakra } from "@chakra-ui/vue-system"

‎modules/nuxt/playground/app.vue

Lines changed: 134 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -1,50 +1,142 @@
11
<template>
2-
<c-container>
3-
<c-heading>Chakra UI Vue Next</c-heading>
4-
<c-grid template-columns="1fr 1fr" gap="5">
5-
<c-grid-item>
6-
<c-stack>
7-
<c-h-stack>
8-
<chakra.p>Toggle Color Mode</chakra.p>
9-
<c-icon-button
10-
:aria-label="
11-
colorMode === 'light'
12-
? 'Switch to dark mode'
13-
: 'Switch to light mode'
14-
"
15-
:icon="colorMode === 'light' ? 'moon' : 'sun'"
16-
@click="toggleColorMode"
17-
color-scheme="red"
18-
/>
19-
</c-h-stack>
20-
<chakra.h3>Buttons</chakra.h3>
21-
<c-stack align="flex-start">
22-
<c-button color-scheme="purple" size="lg">Large Button</c-button>
23-
<c-button color-scheme="purple" size="md">Medium Button</c-button>
24-
<c-button color-scheme="purple" size="sm">Small Button</c-button>
25-
<c-button color-scheme="purple" size="xs"
26-
>Extra Small Button</c-button
27-
>
28-
</c-stack>
29-
</c-stack>
30-
</c-grid-item>
31-
<c-grid-item>
32-
<c-heading>Toast</c-heading>
33-
<c-button @click="handleClick">Hello Chakra UI</c-button>
34-
</c-grid-item>
35-
</c-grid>
36-
</c-container>
2+
<chakra.div
3+
:bg="
4+
useColorModeValue(
5+
`${selectedColor.color}.50`,
6+
`${selectedColor.color}.900`
7+
).value
8+
"
9+
min-h="100vh"
10+
transition="background-color 0.2s ease-in-out"
11+
layer-style="home.container"
12+
>
13+
<c-stack spacing="8" align-items="flex-start">
14+
<c-stack
15+
:color="
16+
useColorModeValue(
17+
`${selectedColor.color}.900`,
18+
`${selectedColor.color}.50`
19+
).value
20+
"
21+
>
22+
<c-heading text-style="home.subheading"> Welcome to </c-heading>
23+
<c-heading as="h1" text-style="home.heading">
24+
Chakra UI Nuxt
25+
</c-heading>
26+
<chakra.h4
27+
font-weight="bold"
28+
font-size="3xl"
29+
display="flex"
30+
align-items="center"
31+
>
32+
<chakra.span
33+
>Build Beautiful Accessible Components - Powered by</chakra.span
34+
>
35+
&nbsp;
36+
<chakra.a
37+
text-decoration="underline"
38+
text-decoration-style="dashed"
39+
cursor="pointer"
40+
href="https://nuxt.com"
41+
target="_blank"
42+
display="inline-flex"
43+
justify-content="flex-start"
44+
align-items="center"
45+
>
46+
<NuxtLogo h="1em" d="inline-flex" />
47+
<ExternalLinkIcon />
48+
</chakra.a>
49+
</chakra.h4>
50+
</c-stack>
51+
<c-h-stack
52+
:bg="useColorModeValue('blackAlpha.50', 'whiteAlpha.50').value"
53+
padding="3"
54+
rounded="full"
55+
>
56+
<c-circle
57+
box-size="8"
58+
v-for="(color, i) in colors"
59+
:key="color"
60+
:bg="`${color}.400`"
61+
cursor="pointer"
62+
:_hover="{
63+
bg: `${color}.500`,
64+
transform: 'scale(1.1)',
65+
transition: 'all 0.2s',
66+
}"
67+
@mouseenter="selectedColor.color = color"
68+
/>
69+
</c-h-stack>
70+
<c-badge
71+
rounded="full"
72+
:color-scheme="selectedColor.color"
73+
text-transform="unset"
74+
px="2"
75+
py="1"
76+
font-size="md"
77+
>
78+
Chakra UI Vue is currently still in early beta. Explore the
79+
documentation and join our Discord!
80+
</c-badge>
81+
<c-button-group size="lg" spacing="5" :color-scheme="selectedColor.color">
82+
<c-button :right-icon="ExternalLinkIcon"> Get Started </c-button>
83+
<c-button :right-icon="DocumentationIcon" variant="outline">
84+
Documentation
85+
</c-button>
86+
</c-button-group>
87+
<c-button-group :color-scheme="selectedColor.color" variant="outline">
88+
<c-icon-button
89+
aria-label="Toggle color mode"
90+
:icon="useColorModeValue('moon', 'sun').value"
91+
@click="changeColorMode"
92+
rounded="none"
93+
/>
94+
<c-icon-button
95+
as="a"
96+
href="https://nuxt.com"
97+
target="_blank"
98+
aria-label="Join Discord"
99+
rounded="none"
100+
>
101+
<DiscordIcon />
102+
</c-icon-button>
103+
</c-button-group>
104+
</c-stack>
105+
</chakra.div>
37106
</template>
38107

39108
<script setup lang="ts">
40-
import { chakra, useToast, useColorMode } from "@chakra-ui/vue-next"
41-
const toast = useToast()
109+
import {
110+
chakra,
111+
useColorMode,
112+
useColorModeValue,
113+
useTheme,
114+
} from "@chakra-ui/vue-next"
115+
import { useStorage } from "@vueuse/core"
116+
import DocumentationIcon from "./components/icons/documentation-icon"
117+
import ExternalLinkIcon from "./components/icons/external-link"
118+
import DiscordIcon from "./components/icons/discord-icon"
119+
import NuxtLogo from "./components/icons/nuxt-logo"
42120
43-
const { colorMode, toggleColorMode } = useColorMode()
121+
const { toggleColorMode } = useColorMode()
44122
45-
function handleClick() {
46-
toast.value.create({
47-
title: "Hello world!",
48-
})
123+
const themeConfig = {
124+
color: "whatsapp",
125+
}
126+
const selectedColor = useStorage("theme.color", themeConfig)
127+
128+
const theme = useTheme()
129+
130+
const colors = computed(
131+
() =>
132+
new Set(
133+
Object.keys(theme.colors)
134+
.filter((color) => typeof theme.colors[color] === "object")
135+
.filter((color) => !["blackAlpha", "whiteAlpha"].includes(color))
136+
)
137+
)
138+
139+
function changeColorMode() {
140+
toggleColorMode()
49141
}
50142
</script>

‎modules/nuxt/playground/components/icons/discord-icon.tsx

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import { createIcon } from "@chakra-ui/vue-next"
2+
3+
export default createIcon({
4+
name: "DiscordIcon",
5+
viewBox: "0 0 24 24",
6+
path: `<path fill="currentColor" d="M19.27 5.33C17.94 4.71 16.5 4.26 15 4a.09.09 0 0 0-.07.03c-.18.33-.39.76-.53 1.09a16.09 16.09 0 0 0-4.8 0c-.14-.34-.35-.76-.54-1.09c-.01-.02-.04-.03-.07-.03c-1.5.26-2.93.71-4.27 1.33c-.01 0-.02.01-.03.02c-2.72 4.07-3.47 8.03-3.1 11.95c0 .02.01.04.03.05c1.8 1.32 3.53 2.12 5.24 2.65c.03.01.06 0 .07-.02c.4-.55.76-1.13 1.07-1.74c.02-.04 0-.08-.04-.09c-.57-.22-1.11-.48-1.64-.78c-.04-.02-.04-.08-.01-.11c.11-.08.22-.17.33-.25c.02-.02.05-.02.07-.01c3.44 1.57 7.15 1.57 10.55 0c.02-.01.05-.01.07.01c.11.09.22.17.33.26c.04.03.04.09-.01.11c-.52.31-1.07.56-1.64.78c-.04.01-.05.06-.04.09c.32.61.68 1.19 1.07 1.74c.03.01.06.02.09.01c1.72-.53 3.45-1.33 5.25-2.65c.02-.01.03-.03.03-.05c.44-4.53-.73-8.46-3.1-11.95c-.01-.01-.02-.02-.04-.02zM8.52 14.91c-1.03 0-1.89-.95-1.89-2.12s.84-2.12 1.89-2.12c1.06 0 1.9.96 1.89 2.12c0 1.17-.84 2.12-1.89 2.12zm6.97 0c-1.03 0-1.89-.95-1.89-2.12s.84-2.12 1.89-2.12c1.06 0 1.9.96 1.89 2.12c0 1.17-.83 2.12-1.89 2.12z"/>`,
7+
})

‎modules/nuxt/playground/components/icons/documentation-icon.tsx

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import { createIcon } from "@chakra-ui/vue-next"
2+
3+
export default createIcon({
4+
name: "Documentation",
5+
viewBox: "0 2.4 24 24",
6+
path: `<path fill="currentColor" d="M6 24.4q-.825 0-1.413-.587T4 22.4v-16q0-.825.588-1.412T6 4.4h12q.825 0 1.413.588T20 6.4v16q0 .825-.588 1.413T18 24.4H6Zm0-2h12v-16h-2v6.125q0 .3-.25.438t-.5-.013L13.5 11.9l-1.75 1.05q-.25.15-.5.013t-.25-.438V6.4H6v16Zm5-16h5h-5Zm-5 0h12H6Z"/>`,
7+
})

‎modules/nuxt/playground/components/icons/external-link.tsx

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import { chakra } from '@chakra-ui/vue-next';
2+
3+
export default defineComponent({
4+
name: "ExternalLink",
5+
setup(_, { attrs }) {
6+
return () => (
7+
<chakra.svg
8+
width="1em"
9+
height="1em"
10+
lineHeight="1em"
11+
display="inline-block"
12+
fill="currentColor"
13+
viewBox="0 0 24 24" {...attrs}
14+
>
15+
<path d="M6.4 18L5 16.6L14.6 7H6V5h12v12h-2V8.4Z"/>
16+
</chakra.svg>
17+
)
18+
}
19+
})

‎modules/nuxt/playground/components/icons/nuxt-logo.tsx

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
import { chakra } from '@chakra-ui/vue-next';
2+
3+
export default defineComponent({
4+
name: "NuxtLogo",
5+
setup(_, { attrs }) {
6+
return () => (
7+
<chakra.svg
8+
viewBox="0 0 132 32"
9+
fill="none"
10+
xmlns="http://www.w3.org/2000/svg"
11+
{...attrs}
12+
>
13+
<g clip-path="url(#clip0_1264_7350)">
14+
<path d="M26.8295 31.4227H44.4182C44.9769 31.4228 45.5257 31.2802 46.0095 31.0092C46.4933 30.7382 46.895 30.3485 47.1742 29.8791C47.4534 29.4098 47.6003 28.8774 47.6001 28.3355C47.5998 27.7936 47.4525 27.2614 47.1728 26.7922L35.3608 6.94689C35.0816 6.47766 34.6799 6.08799 34.1962 5.81706C33.7125 5.54614 33.1638 5.4035 32.6053 5.4035C32.0467 5.4035 31.498 5.54614 31.0143 5.81706C30.5306 6.08799 30.129 6.47766 29.8498 6.94689L26.8295 12.0246L20.9243 2.09529C20.6449 1.62609 20.2431 1.23648 19.7593 0.965601C19.2754 0.694725 18.7266 0.552124 18.168 0.552124C17.6094 0.552124 17.0606 0.694725 16.5767 0.965601C16.0929 1.23648 15.6911 1.62609 15.4117 2.09529L0.712988 26.7922C0.433357 27.2614 0.28601 27.7936 0.285767 28.3355C0.285524 28.8774 0.432393 29.4098 0.711603 29.8791C0.990813 30.3485 1.39252 30.7382 1.87631 31.0092C2.36011 31.2802 2.90894 31.4228 3.4676 31.4227H14.5083C18.8828 31.4227 22.1088 29.5589 24.3286 25.9227L29.7178 16.8696L32.6044 12.0246L41.2677 26.5778H29.7178L26.8295 31.4227ZM14.3283 26.5728L6.62332 26.5711L18.1731 7.16803L23.9361 16.8696L20.0775 23.3539C18.6034 25.7132 16.9287 26.5728 14.3283 26.5728Z" fill="#00DC82" />
15+
<path d="M60.65 31.1321V19.5774C60.65 16.2709 60.3057 12.9644 60.3057 12.9644C60.3057 12.9644 61.614 15.9802 63.2665 18.8144L70.3243 31.1321H75.8673V5.69727H70.6686V17.2519C70.6686 20.5585 71.0129 23.9013 71.0129 23.9013C71.0129 23.9013 69.7046 20.8491 68.0865 18.015L60.9942 5.69727H55.4857V31.1321H60.65Z" fill="currentColor" />
16+
<path d="M92.2457 12.819V22.8476C92.2457 25.1731 90.7653 26.9172 88.6652 26.9172C86.7028 26.9172 85.3256 25.3184 85.3256 23.1019V12.819H80.5401V24.2283C80.5401 28.4069 83.0878 31.4228 86.9782 31.4228C89.3538 31.4228 91.2817 30.3327 92.2457 28.5886V31.1321H97.0657V12.819H92.2457Z" fill="currentColor" />
17+
<path d="M111.082 21.6122L116.901 12.819H111.633L108.466 17.6516L105.298 12.819H100.065L105.884 21.5759L99.6177 31.1321H104.748L108.5 25.5001L112.218 31.1321H117.314L111.082 21.6122Z" fill="currentColor" />
18+
<path d="M122.281 12.819H118.941V17.0339H122.281V24.4827C122.281 28.7339 124.863 31.1321 128.857 31.1321H131.714V26.8808H129.511C127.962 26.8808 127.066 26.0451 127.066 24.2647V17.0339H131.714V12.819H127.066V7.40503H122.281V12.819Z" fill="currentColor" />
19+
</g>
20+
<defs>
21+
<clipPath id="clip0_1264_7350">
22+
<rect width="131.429" height="32" fill="currentColor" transform="translate(0.285767)" />
23+
</clipPath>
24+
</defs>
25+
</chakra.svg>
26+
)
27+
}
28+
})

‎modules/nuxt/playground/nuxt.config.ts

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,9 @@
11
import ChakraUI from "../src/module"
2+
import extendTheme from "./theme"
23

34
export default defineNuxtConfig({
45
modules: [ChakraUI],
6+
chakra: {
7+
extendTheme,
8+
},
59
})

‎modules/nuxt/playground/theme/components/button.ts

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import { defineStyleConfig } from "@chakra-ui/vue-next"
2+
3+
export const Button = defineStyleConfig({
4+
baseStyle: {
5+
rounded: "none",
6+
fontFamily: "body",
7+
},
8+
variants: {},
9+
})

‎modules/nuxt/playground/theme/components/iconbutton.ts

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import { defineStyleConfig } from "@chakra-ui/vue-next"
2+
3+
export const IconButton = defineStyleConfig({
4+
baseStyle: {
5+
rounded: "none",
6+
},
7+
})

0 commit comments

Comments
 (0)