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

Commit 1289531

Browse files
codebender828codebender828
committed
feat: create tab registry
1 parent 0a1d90a commit 1289531

29 files changed

+897
-34
lines changed

‎@types/components.d.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
/**
2-
* Typescript support for @chakra-ui/vue-next2.1.0-beta.7 auto-imported
2+
* Typescript support for @chakra-ui/vue-next2.1.0-beta.8 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-19T12:50:09.916Z
9+
* This file was generated on 2023-03-22T17:58:36.992Z
1010
*/
1111

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

‎LICENSE

Lines changed: 20 additions & 0 deletions
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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
/**
2-
* Typescript support for @chakra-ui/vue-next2.1.0-beta.7 auto-imported
2+
* Typescript support for @chakra-ui/vue-next2.1.0-beta.8 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-19T12:50:09.916Z
9+
* This file was generated on 2023-03-22T17:58:36.992Z
1010
*/
1111

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

‎package.json

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -228,5 +228,16 @@
228228
"csstype": "3.1.1",
229229
"@chakra-ui/theme-tools": "2.0.17"
230230
},
231-
"packageManager": "[email protected]"
231+
"packageManager": "[email protected]",
232+
"pnpm": {
233+
"peerDependencyRules": {
234+
"allowedVersions": {
235+
"vue": "^3.2.45"
236+
},
237+
"ignoreMissing": [
238+
"webpack",
239+
"vue"
240+
]
241+
}
242+
}
232243
}

‎packages/c-tabs/README.md

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
# `@chakra-ui/c-tabs`
2+
3+
An accessible tabs component that provides keyboard interactions and aria
4+
attributes described in the wai aria tabs design pattern tabs consist of a tab
5+
list with one or more visually separated tabs each tab has associated content
6+
and only the selected tab s content is shown
7+
8+
## Installation
9+
10+
```sh
11+
# with pnpm
12+
pnpm add @chakra-ui/c-tabs
13+
# or with Yarn
14+
yarn i @chakra-ui/c-tabs
15+
# or with npm
16+
npm i @chakra-ui/c-tabs
17+
```

‎packages/c-tabs/examples/simple-c-tabs.vue

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
<script setup lang="ts">
2+
import { chakra } from "../../vue/src"
3+
import {
4+
CTabs,
5+
CTabList,
6+
CTab,
7+
CTabTrigger,
8+
CTabPanel,
9+
CTabPanels,
10+
CTabIndicator,
11+
} from "../src"
12+
</script>
13+
14+
<template>
15+
<chakra.div data-testid="simple-tabs-example">
16+
<c-tabs>
17+
<c-tab-list>
18+
<c-tab value="one"> Item One </c-tab>
19+
<c-tab value="two"> Item Two </c-tab>
20+
<c-tab value="three"> Item Three </c-tab>
21+
<c-tab-indicator />
22+
</c-tab-list>
23+
24+
<c-tab-panels>
25+
<c-tab-panel value="one"> Value Item 1 </c-tab-panel>
26+
<c-tab-panel value="two"> Value Item 2 </c-tab-panel>
27+
<c-tab-panel value="three"> Value Item 3 </c-tab-panel>
28+
</c-tab-panels>
29+
</c-tabs>
30+
</chakra.div>
31+
</template>

‎packages/c-tabs/index.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export * from "./src"

‎packages/c-tabs/package.json

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
{
2+
"name": "@chakra-ui/c-tabs",
3+
"description": "Chakra UI Vue | An accessible tabs component that provides keyboard interactions and aria attributes described in the wai aria tabs design pattern tabs consist of a tab list with one or more visually separated tabs each tab has associated content and only the selected tab s content is shown component",
4+
"version": "2.1.0-beta.0",
5+
"author": "Jonathan Bakebwa <[email protected]>",
6+
"homepage": "https://github.com/chakra-ui/chakra-ui-vue-next#readme",
7+
"license": "MIT",
8+
"main": "dist/index.js",
9+
"module": "dist/index.mjs",
10+
"typings": "dist/index.d.ts",
11+
"files": [
12+
"dist"
13+
],
14+
"exports": {
15+
".": {
16+
"require": "./dist/index.js",
17+
"default": "./dist/index.mjs"
18+
}
19+
},
20+
"repository": {
21+
"type": "git",
22+
"url": "git+https://github.com/chakra-ui/chakra-ui-vue-next.git"
23+
},
24+
"bugs": {
25+
"url": "https://github.com/chakra-ui/chakra-ui-vue-next/issues"
26+
},
27+
"sideEffects": false,
28+
"scripts": {
29+
"clean": "rimraf dist .turbo",
30+
"build": "tsup && pnpm build:types",
31+
"build:fast": "tsup",
32+
"build:types": "tsup src --dts-only",
33+
"types:check": "tsc --noEmit",
34+
"dev": "tsup --watch"
35+
},
36+
"dependencies": {
37+
"@chakra-ui/vue-composables": "workspace:*",
38+
"@chakra-ui/vue-system": "workspace:*",
39+
"@chakra-ui/vue-utils": "workspace:*",
40+
"@zag-js/tabs": "^0.2.13",
41+
"@zag-js/types": "^0.3.4",
42+
"@zag-js/vue": "^0.2.10"
43+
},
44+
"devDependencies": {
45+
"vue": "^3.2.47"
46+
},
47+
"peerDependencies": {
48+
"vue": "^3.2.47"
49+
},
50+
"publishConfig": {
51+
"access": "public"
52+
}
53+
}

‎packages/c-tabs/src/c-tab-indicator.tsx

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import { HTMLChakraProps, chakra } from "@chakra-ui/vue-system"
2+
import { defineComponent } from "vue"
3+
import { useTabsContext } from "./tabs.context"
4+
5+
export type CTabIndicatorProps = HTMLChakraProps<"div">
6+
export const CTabIndicator = defineComponent({
7+
name: "CTabIndicator",
8+
setup(_, { attrs, slots }) {
9+
const api = useTabsContext()
10+
return () => (
11+
<chakra.div {...api.value.indicatorProps} {...attrs}>
12+
{slots.default?.()}
13+
</chakra.div>
14+
)
15+
},
16+
})

‎packages/c-tabs/src/c-tab-list.tsx

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import { HTMLChakraProps, chakra } from "@chakra-ui/vue-system"
2+
import { defineComponent, watchEffect } from "vue"
3+
import { useTabsContext } from "./tabs.context"
4+
5+
export type CTabListProps = HTMLChakraProps<"div">
6+
7+
/**
8+
* `<CTabList />` is used to wrap all the tab components
9+
*/
10+
export const CTabList = defineComponent({
11+
name: "CTabList",
12+
setup(_, { attrs, slots }) {
13+
const api = useTabsContext()
14+
15+
return () => (
16+
<chakra.div {...api.value.tablistProps} {...attrs}>
17+
{slots.default?.()}
18+
</chakra.div>
19+
)
20+
},
21+
})

0 commit comments

Comments
 (0)