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

Commit 7597bf7

Browse files
codebender828codebender828
authored
Merge pull request #300 from chakra-ui/develop
release `@chakra-ui/c-tabs` component
2 parents 57c6471 + ba044ed commit 7597bf7

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

43 files changed

+1781
-333
lines changed

‎.changeset/sweet-wolves-lick.md

+49
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
---
2+
"@chakra-ui/vue-composables": minor
3+
"@chakra-ui/c-popover": minor
4+
"@chakra-ui/c-alert": minor
5+
"@chakra-ui/c-tabs": minor
6+
"@chakra-ui/vue-utils": minor
7+
"@chakra-ui/nuxt-next": minor
8+
"@chakra-ui/vue-next": minor
9+
"@chakra-ui/c-accordion": minor
10+
"@chakra-ui/c-avatar": minor
11+
"@chakra-ui/c-breadcrumb": minor
12+
"@chakra-ui/c-button": minor
13+
"@chakra-ui/c-checkbox": minor
14+
"@chakra-ui/c-close-button": minor
15+
"@chakra-ui/c-code": minor
16+
"@chakra-ui/c-color-mode": minor
17+
"@chakra-ui/c-focus-lock": minor
18+
"@chakra-ui/c-form-control": minor
19+
"@chakra-ui/c-icon": minor
20+
"@chakra-ui/c-image": minor
21+
"@chakra-ui/c-input": minor
22+
"@chakra-ui/c-live-region": minor
23+
"@chakra-ui/c-media-query": minor
24+
"@chakra-ui/c-menu": minor
25+
"@chakra-ui/c-modal": minor
26+
"@chakra-ui/c-motion": minor
27+
"@chakra-ui/c-pin-input": minor
28+
"@chakra-ui/c-popper": minor
29+
"@chakra-ui/c-portal": minor
30+
"@chakra-ui/c-reset": minor
31+
"@chakra-ui/c-scroll-lock": minor
32+
"@chakra-ui/c-skip-nav": minor
33+
"@chakra-ui/c-spinner": minor
34+
"@chakra-ui/c-table": minor
35+
"@chakra-ui/c-tag": minor
36+
"@chakra-ui/c-textarea": minor
37+
"@chakra-ui/c-theme-provider": minor
38+
"@chakra-ui/c-toast": minor
39+
"@chakra-ui/c-tooltip": minor
40+
"@chakra-ui/c-visually-hidden": minor
41+
"@chakra-ui/vue-layout": minor
42+
"@chakra-ui/vue-styled": minor
43+
"@chakra-ui/vue-system": minor
44+
"@chakra-ui/vue-test-utils": minor
45+
"@chakra-ui/vue-accessibilty": minor
46+
"@chakra-ui/vue-auto-import": minor
47+
---
48+
49+
Adds CTabs component, Descendant Authority Hook

‎@types/components.d.ts

+9-2
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
/**
2-
* Typescript support for @chakra-ui/vue-next2.1.0-beta.9 auto-imported
2+
* Typescript support for @chakra-ui/vue-next2.1.0-beta.10 auto-imported
33
* components using `unplugin-vue-components,`
44
*
55
* @see: https://github.com/antfu/unplugin-vue-components/#typescript
66
*
77
* This is a generated file. Do not edit it's contents.
88
*
9-
* This file was generated on 2023-03-28T13:35:59.574Z
9+
* This file was generated on 2023-03-28T18:38:28.043Z
1010
*/
1111

1212
import { ChakraProps, chakra } from "@chakra-ui/vue-system"
@@ -169,9 +169,16 @@ declare module "@vue/runtime-core" {
169169
CStack: typeof import("@chakra-ui/vue-next")["CStack"]
170170
CStackDivider: typeof import("@chakra-ui/vue-next")["CStackDivider"]
171171
CStackItem: typeof import("@chakra-ui/vue-next")["CStackItem"]
172+
CTab: typeof import("@chakra-ui/vue-next")["CTab"]
173+
CTabIndicator: typeof import("@chakra-ui/vue-next")["CTabIndicator"]
174+
CTabList: typeof import("@chakra-ui/vue-next")["CTabList"]
175+
CTabPanel: typeof import("@chakra-ui/vue-next")["CTabPanel"]
176+
CTabPanels: typeof import("@chakra-ui/vue-next")["CTabPanels"]
177+
CTabTrigger: typeof import("@chakra-ui/vue-next")["CTabTrigger"]
172178
CTable: typeof import("@chakra-ui/vue-next")["CTable"]
173179
CTableCaption: typeof import("@chakra-ui/vue-next")["CTableCaption"]
174180
CTableContainer: typeof import("@chakra-ui/vue-next")["CTableContainer"]
181+
CTabs: typeof import("@chakra-ui/vue-next")["CTabs"]
175182
CTbody: typeof import("@chakra-ui/vue-next")["CTbody"]
176183
CTd: typeof import("@chakra-ui/vue-next")["CTd"]
177184
CText: typeof import("@chakra-ui/vue-next")["CText"]

‎LICENSE

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
MIT License
2+
3+
Copyright (c) Chakra UI Vue
4+
5+
Permission is hereby granted, free of charge, to any person obtaining a copy of
6+
this software and associated documentation files (the "Software"), to deal in
7+
the Software without restriction, including without limitation the rights to
8+
use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
9+
the Software, and to permit persons to whom the Software is furnished to do so,
10+
subject to the following conditions:
11+
12+
The above copyright notice and this permission notice shall be included in all
13+
copies or substantial portions of the Software.
14+
15+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
17+
FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
18+
COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
19+
IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
20+
CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

‎components.d.ts

+9-2
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
/**
2-
* Typescript support for @chakra-ui/vue-next2.1.0-beta.9 auto-imported
2+
* Typescript support for @chakra-ui/vue-next2.1.0-beta.10 auto-imported
33
* components using `unplugin-vue-components,`
44
*
55
* @see: https://github.com/antfu/unplugin-vue-components/#typescript
66
*
77
* This is a generated file. Do not edit it's contents.
88
*
9-
* This file was generated on 2023-03-28T13:35:59.574Z
9+
* This file was generated on 2023-03-28T18:38:28.043Z
1010
*/
1111

1212
import { ChakraProps, chakra } from "@chakra-ui/vue-system"
@@ -169,9 +169,16 @@ declare module "@vue/runtime-core" {
169169
CStack: typeof import("@chakra-ui/vue-next")["CStack"]
170170
CStackDivider: typeof import("@chakra-ui/vue-next")["CStackDivider"]
171171
CStackItem: typeof import("@chakra-ui/vue-next")["CStackItem"]
172+
CTab: typeof import("@chakra-ui/vue-next")["CTab"]
173+
CTabIndicator: typeof import("@chakra-ui/vue-next")["CTabIndicator"]
174+
CTabList: typeof import("@chakra-ui/vue-next")["CTabList"]
175+
CTabPanel: typeof import("@chakra-ui/vue-next")["CTabPanel"]
176+
CTabPanels: typeof import("@chakra-ui/vue-next")["CTabPanels"]
177+
CTabTrigger: typeof import("@chakra-ui/vue-next")["CTabTrigger"]
172178
CTable: typeof import("@chakra-ui/vue-next")["CTable"]
173179
CTableCaption: typeof import("@chakra-ui/vue-next")["CTableCaption"]
174180
CTableContainer: typeof import("@chakra-ui/vue-next")["CTableContainer"]
181+
CTabs: typeof import("@chakra-ui/vue-next")["CTabs"]
175182
CTbody: typeof import("@chakra-ui/vue-next")["CTbody"]
176183
CTd: typeof import("@chakra-ui/vue-next")["CTd"]
177184
CText: typeof import("@chakra-ui/vue-next")["CText"]

‎modules/nuxt/playground/app.vue

+3-220
Original file line numberDiff line numberDiff line change
@@ -1,222 +1,5 @@
11
<template>
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-
&nbsp;
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-
<c-heading as="h3" size="md"> Avatars </c-heading>
125-
<c-avatar-group :max="3" size="md">
126-
<c-avatar
127-
name="Sarah Drasner"
128-
src="https://avatars.githubusercontent.com/u/2281088?v=4"
129-
alt="Sarah Drasner"
130-
:border-color="
131-
useColorModeValue(
132-
`${selectedColor.color}.50`,
133-
`${selectedColor.color}.900`
134-
).value
135-
"
136-
>
137-
<c-avatar-badge
138-
bg="green.400"
139-
border-width="2px"
140-
box-size="0.8em"
141-
/>
142-
</c-avatar>
143-
<c-avatar
144-
name="Evan You"
145-
alt="Evan You"
146-
src="https://www.github.com/yyx990803.png"
147-
:border-color="
148-
useColorModeValue(
149-
`${selectedColor.color}.50`,
150-
`${selectedColor.color}.900`
151-
).value
152-
"
153-
>
154-
<c-avatar-badge
155-
bg="green.400"
156-
border-width="2px"
157-
box-size="0.8em"
158-
/>
159-
</c-avatar>
160-
<c-avatar
161-
name="Anthony Fu"
162-
src="https://avatars.githubusercontent.com/u/11247099?v=4"
163-
alt="Anthony Fu"
164-
:border-color="
165-
useColorModeValue(
166-
`${selectedColor.color}.50`,
167-
`${selectedColor.color}.900`
168-
).value
169-
"
170-
>
171-
<c-avatar-badge
172-
bg="green.400"
173-
border-width="2px"
174-
box-size="0.8em"
175-
/>
176-
</c-avatar>
177-
<c-avatar
178-
name="Maya Shavin"
179-
src="https://avatars.githubusercontent.com/u/6650139?v=4"
180-
alt="Maya Shavin"
181-
></c-avatar>
182-
</c-avatar-group>
183-
</c-stack>
184-
</c-stack>
185-
</chakra.div>
2+
<NuxtLayout>
3+
<NuxtPage />
4+
</NuxtLayout>
1865
</template>
187-
188-
<script setup lang="ts">
189-
import {
190-
chakra,
191-
useColorMode,
192-
useColorModeValue,
193-
useTheme,
194-
} from "@chakra-ui/vue-next"
195-
import { useStorage } from "@vueuse/core"
196-
import DocumentationIcon from "./components/icons/documentation-icon"
197-
import ExternalLinkIcon from "./components/icons/external-link"
198-
import DiscordIcon from "./components/icons/discord-icon"
199-
import NuxtLogo from "./components/icons/nuxt-logo"
200-
201-
const { toggleColorMode } = useColorMode()
202-
203-
const themeConfig = {
204-
color: "whatsapp",
205-
}
206-
const selectedColor = useStorage("theme.color", themeConfig)
207-
208-
const theme = useTheme()
209-
210-
const colors = computed(
211-
() =>
212-
new Set(
213-
Object.keys(theme.colors)
214-
.filter((color) => typeof theme.colors[color] === "object")
215-
.filter((color) => !["blackAlpha", "whiteAlpha"].includes(color))
216-
)
217-
)
218-
219-
function changeColorMode() {
220-
toggleColorMode()
221-
}
222-
</script>

0 commit comments

Comments
 (0)