|
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="3xl" |
| 29 | + display="flex" |
| 30 | + align-items="center" |
| 31 | + > |
| 32 | + <chakra.span |
| 33 | + >Build Beautiful Accessible Components - Powered by</chakra.span |
| 34 | + > |
| 35 | + |
| 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> |
37 | 106 | </template> |
38 | 107 |
|
39 | 108 | <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" |
42 | 120 |
|
43 | | -const { colorMode, toggleColorMode } = useColorMode() |
| 121 | +const { toggleColorMode } = useColorMode() |
44 | 122 |
|
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() |
49 | 141 | } |
50 | 142 | </script> |
0 commit comments