|
1 | 1 | <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="['xl', '2xl', '3xl']" |
| 29 | + display="flex" |
| 30 | + :flex-direction="['column', 'column', 'row']" |
| 31 | + :align-items="['flex-start', 'flex-start', 'center']" |
| 32 | + > |
| 33 | + <chakra.span |
| 34 | + >Build Beautiful Accessible Components - Powered by</chakra.span |
| 35 | + > |
| 36 | + |
| 37 | + <chakra.a |
| 38 | + text-decoration="underline" |
| 39 | + text-decoration-style="dashed" |
| 40 | + cursor="pointer" |
| 41 | + href="https://nuxt.com" |
| 42 | + target="_blank" |
| 43 | + display="inline-flex" |
| 44 | + justify-content="flex-start" |
| 45 | + align-items="center" |
| 46 | + > |
| 47 | + <NuxtLogo h="1em" d="inline-flex" /> |
| 48 | + <ExternalLinkIcon /> |
| 49 | + </chakra.a> |
| 50 | + </chakra.h4> |
| 51 | + </c-stack> |
| 52 | + <c-wrap |
| 53 | + :bg="useColorModeValue('blackAlpha.50', 'whiteAlpha.50').value" |
| 54 | + :px="[5, 3]" |
| 55 | + :py="[4, 3]" |
| 56 | + :rounded="{ base: '2xl', md: '2xl', lg: 'full' }" |
| 57 | + spacing="3" |
| 58 | + > |
| 59 | + <c-wrap-item v-for="(color, i) in colors" :key="color"> |
| 60 | + <c-circle |
| 61 | + box-size="8" |
| 62 | + :bg="`${color}.400`" |
| 63 | + cursor="pointer" |
| 64 | + :_hover="{ |
| 65 | + bg: `${color}.500`, |
| 66 | + transform: 'scale(1.1)', |
| 67 | + transition: 'all 0.2s', |
| 68 | + }" |
| 69 | + @mouseenter="selectedColor.color = color" |
| 70 | + /> |
| 71 | + </c-wrap-item> |
| 72 | + </c-wrap> |
| 73 | + <c-badge |
| 74 | + :color-scheme="selectedColor.color" |
| 75 | + text-transform="unset" |
| 76 | + :px="[5, 2]" |
| 77 | + :py="[4, 1]" |
| 78 | + font-size="md" |
| 79 | + :rounded="{ base: '2xl', md: '2xl', lg: 'full' }" |
| 80 | + white-space="break-spaces" |
| 81 | + > |
| 82 | + Chakra UI Vue is currently still in early beta. Explore the |
| 83 | + documentation and join our Discord! |
| 84 | + </c-badge> |
| 85 | + <c-wrap spacing="5" :color-scheme="selectedColor.color"> |
| 86 | + <c-wrap-item> |
| 87 | + <c-button |
| 88 | + size="lg" |
| 89 | + :color-scheme="selectedColor.color" |
| 90 | + :right-icon="ExternalLinkIcon" |
| 91 | + > |
| 92 | + Get Started |
| 93 | + </c-button> |
| 94 | + </c-wrap-item> |
| 95 | + <c-wrap-item> |
| 96 | + <c-button |
| 97 | + size="lg" |
| 98 | + :color-scheme="selectedColor.color" |
| 99 | + :right-icon="DocumentationIcon" |
| 100 | + variant="outline" |
| 101 | + > |
| 102 | + Documentation |
| 103 | + </c-button> |
| 104 | + </c-wrap-item> |
| 105 | + </c-wrap> |
| 106 | + <c-button-group :color-scheme="selectedColor.color" variant="outline"> |
| 107 | + <c-icon-button |
| 108 | + aria-label="Toggle color mode" |
| 109 | + :icon="useColorModeValue('moon', 'sun').value" |
| 110 | + @click="changeColorMode" |
| 111 | + rounded="none" |
| 112 | + /> |
| 113 | + <c-icon-button |
| 114 | + as="a" |
| 115 | + href="https://nuxt.com" |
| 116 | + target="_blank" |
| 117 | + aria-label="Join Discord" |
| 118 | + rounded="none" |
| 119 | + > |
| 120 | + <DiscordIcon /> |
| 121 | + </c-icon-button> |
| 122 | + </c-button-group> |
| 123 | + </c-stack> |
| 124 | + </chakra.div> |
37 | 125 | </template> |
38 | 126 |
|
39 | 127 | <script setup lang="ts"> |
40 | | -import { chakra, useToast, useColorMode } from "@chakra-ui/vue-next" |
41 | | -const toast = useToast() |
| 128 | +import { |
| 129 | + chakra, |
| 130 | + useColorMode, |
| 131 | + useColorModeValue, |
| 132 | + useTheme, |
| 133 | +} from "@chakra-ui/vue-next" |
| 134 | +import { useStorage } from "@vueuse/core" |
| 135 | +import DocumentationIcon from "./components/icons/documentation-icon" |
| 136 | +import ExternalLinkIcon from "./components/icons/external-link" |
| 137 | +import DiscordIcon from "./components/icons/discord-icon" |
| 138 | +import NuxtLogo from "./components/icons/nuxt-logo" |
42 | 139 |
|
43 | | -const { colorMode, toggleColorMode } = useColorMode() |
| 140 | +const { toggleColorMode } = useColorMode() |
44 | 141 |
|
45 | | -function handleClick() { |
46 | | - toast.value.create({ |
47 | | - title: "Hello world!", |
48 | | - }) |
| 142 | +const themeConfig = { |
| 143 | + color: "whatsapp", |
| 144 | +} |
| 145 | +const selectedColor = useStorage("theme.color", themeConfig) |
| 146 | +
|
| 147 | +const theme = useTheme() |
| 148 | +
|
| 149 | +const colors = computed( |
| 150 | + () => |
| 151 | + new Set( |
| 152 | + Object.keys(theme.colors) |
| 153 | + .filter((color) => typeof theme.colors[color] === "object") |
| 154 | + .filter((color) => !["blackAlpha", "whiteAlpha"].includes(color)) |
| 155 | + ) |
| 156 | +) |
| 157 | +
|
| 158 | +function changeColorMode() { |
| 159 | + toggleColorMode() |
49 | 160 | } |
50 | 161 | </script> |
0 commit comments