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

Commit 5bb76a0

Browse files
codebender828codebender828
authored
Merge pull request #146 from Shyrro/feature/tagComponent
feat(ctag): add ctag component
2 parents 16bc134 + 4de0122 commit 5bb76a0

19 files changed

+936
-4
lines changed

‎packages/c-tag/README.md

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
# @chakra-ui/c-tag
2+
3+
Tag component is used for items that need to be labeled, categorized, or organized using keywords that describe them.
4+
5+
## Installation
6+
7+
```sh
8+
yarn add @chakra-ui/c-tag
9+
# or
10+
npm i @chakra-ui/c-tag
11+
12+
```
13+
14+
## Import
15+
16+
This package exports the following components :
17+
18+
- **CTag** : The wrapper for all the tag elements.
19+
- **CTagLabel** : The label for tag's text content.
20+
- **CTagRightIcon** : The icon placed on the left side of the tag.
21+
- **CTagLeftIcon** : The icon placed on the right side of the tag.
22+
- **CTagCloseButton** : The close button for the tag.
23+
24+
## Usage
25+
26+
### Sample Tag :
27+
28+
```html
29+
<c-tag>Sample Tag</c-tag>
30+
```
31+
32+
### With custom attributes :
33+
34+
```html
35+
<c-tag size="md" variant="solid" color-scheme="teal">Sample Tag</c-tag>
36+
```
37+
38+
### With left icon
39+
40+
```html
41+
<c-tag
42+
><c-tag-left-icon name="add" /><c-tag-label>Sample Tag</c-tag-label></c-tag
43+
>
44+
```
45+
46+
### With right icon
47+
48+
```html
49+
<c-tag
50+
><c-tag-label>Sample Tag</c-tag-label><c-tag-right-icon name="check"
51+
/></c-tag>
52+
```
53+
54+
### With close button
55+
56+
```html
57+
<c-tag><c-tag-label>Sample Tag</c-tag-label><c-tag-close-button /></c-tag>
58+
```
59+
60+
### With custom element
61+
62+
```html
63+
<c-tag><my-custom-element /><c-tag-label>Sample Tag</c-tag-label></c-tag>
64+
```
65+
66+
### Props
67+
68+
`variant` : "subtle" | "solid" | "outline"
69+
`colorScheme`: "whiteAlpha" | "blackAlpha" | "gray" | "red" | "orange" | "yellow" | "green" | "teal" | "blue" | "cyan" | "purple" | "pink" | "linkedin" | "facebook" | "messenger" | "whatsapp" | "twitter" | "telegram" | any color scheme added to the theme
70+
`size`: "sm" | "md" | "lg"

‎packages/c-tag/examples/base-tag.vue

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
<template>
2+
<c-stack>
3+
<chakra.div mb="3">
4+
<c-tag mr="3" size="sm"> Sample Tag </c-tag>
5+
<c-tag mr="3" size="md"> Sample Tag </c-tag>
6+
<c-tag mr="3" size="lg"> Sample Tag </c-tag>
7+
</chakra.div>
8+
9+
<chakra.div>
10+
<c-tag mr="3" size="sm" colorScheme="teal"> Sample Tag </c-tag>
11+
<c-tag mr="3" size="md" colorScheme="teal"> Sample Tag </c-tag>
12+
<c-tag mr="3" size="lg" colorScheme="teal"> Sample Tag </c-tag>
13+
</chakra.div>
14+
</c-stack>
15+
</template>
16+
<script setup>
17+
import { CTag } from "../src"
18+
</script>

‎packages/c-tag/examples/index.ts

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
export * as BaseTag from "./base-tag.vue"
2+
export * as TagVariants from "./tag-variants.vue"
3+
export * as WithCloseButton from "./with-close-button.vue"
4+
export * as WithDisabledCloseButton from "./with-disabled-close-button.vue"
5+
export * as WithIcons from "./with-icons.vue"
6+
export * as WithLabel from "./with-label.vue"

‎packages/c-tag/examples/tag-variants.vue

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
<template>
2+
<c-stack>
3+
<chakra.div mb="3">
4+
<c-tag mr="3" size="sm" variant="solid"> Sample Tag </c-tag>
5+
<c-tag mr="3" size="md" variant="solid"> Sample Tag </c-tag>
6+
<c-tag mr="3" size="lg" variant="solid"> Sample Tag </c-tag>
7+
</chakra.div>
8+
9+
<chakra.div>
10+
<c-tag mr="3" size="sm" colorScheme="teal" variant="subtle">
11+
Sample Tag
12+
</c-tag>
13+
<c-tag mr="3" size="md" colorScheme="teal" variant="subtle">
14+
Sample Tag
15+
</c-tag>
16+
<c-tag mr="3" size="lg" colorScheme="teal" variant="subtle">
17+
Sample Tag
18+
</c-tag>
19+
</chakra.div>
20+
21+
<chakra.div>
22+
<c-tag mr="3" size="sm" colorScheme="purple" variant="outline">
23+
Sample Tag
24+
</c-tag>
25+
<c-tag mr="3" size="md" colorScheme="purple" variant="outline">
26+
Sample Tag
27+
</c-tag>
28+
<c-tag mr="3" size="lg" colorScheme="purple" variant="outline">
29+
Sample Tag
30+
</c-tag>
31+
</chakra.div>
32+
</c-stack>
33+
</template>
34+
<script setup>
35+
import { CTag } from "../src"
36+
</script>

‎packages/c-tag/examples/with-close-button.vue

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<template>
2+
<c-tag mr="3" size="sm" color-scheme="blue">
3+
<c-tag-label>Sample Tag</c-tag-label>
4+
<c-tag-close-button />
5+
</c-tag>
6+
<c-tag mr="3" size="md" color-scheme="blue">
7+
<c-tag-label>Sample Tag</c-tag-label>
8+
<c-tag-close-button />
9+
</c-tag>
10+
<c-tag mr="3" size="lg" color-scheme="blue">
11+
<c-tag-label>Sample Tag</c-tag-label>
12+
<c-tag-close-button />
13+
</c-tag>
14+
</template>
15+
<script setup>
16+
import { CTag, CTagLabel, CTagCloseButton } from "../src"
17+
</script>

‎packages/c-tag/examples/with-disabled-close-button.vue

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<template>
2+
<c-tag mr="3" size="sm" color-scheme="blue">
3+
<c-tag-label>Sample Tag</c-tag-label>
4+
<c-tag-close-button is-disabled />
5+
</c-tag>
6+
<c-tag mr="3" size="md" color-scheme="blue">
7+
<c-tag-label>Sample Tag</c-tag-label>
8+
<c-tag-close-button is-disabled />
9+
</c-tag>
10+
<c-tag mr="3" size="lg" color-scheme="blue">
11+
<c-tag-label>Sample Tag</c-tag-label>
12+
<c-tag-close-button is-disabled />
13+
</c-tag>
14+
</template>
15+
<script setup>
16+
import { CTag, CTagLabel, CTagCloseButton } from "../src"
17+
</script>

‎packages/c-tag/examples/with-icons.vue

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
<template>
2+
<c-stack>
3+
<chakra.div>
4+
<c-tag mr="3" size="sm" color-scheme="purple">
5+
<c-tag-label>Sample Tag</c-tag-label>
6+
<c-tag-right-icon name="add" />
7+
</c-tag>
8+
<c-tag mr="3" size="md" color-scheme="purple">
9+
<c-tag-label>Sample Tag</c-tag-label>
10+
<c-tag-right-icon name="add" />
11+
</c-tag>
12+
<c-tag mr="3" size="lg" color-scheme="purple">
13+
<c-tag-label>Sample Tag</c-tag-label>
14+
<c-tag-right-icon name="add" />
15+
</c-tag>
16+
</chakra.div>
17+
18+
<chakra.div>
19+
<c-tag mr="3" size="sm" color-scheme="red">
20+
<c-tag-left-icon name="check" />
21+
<c-tag-label>Sample Tag</c-tag-label>
22+
</c-tag>
23+
<c-tag mr="3" size="md" color-scheme="red">
24+
<c-tag-left-icon name="check" />
25+
<c-tag-label>Sample Tag</c-tag-label>
26+
</c-tag>
27+
<c-tag mr="3" size="lg" color-scheme="red">
28+
<c-tag-left-icon name="check" />
29+
<c-tag-label>Sample Tag</c-tag-label>
30+
</c-tag>
31+
</chakra.div>
32+
</c-stack>
33+
</template>
34+
<script setup>
35+
import { CTag, CTagLabel, CTagLeftIcon, CTagRightIcon } from "../src"
36+
</script>

‎packages/c-tag/examples/with-label.vue

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<template>
2+
<c-tag mr="3" size="sm" color-scheme="blue">
3+
<c-tag-label>Sample Tag</c-tag-label>
4+
</c-tag>
5+
<c-tag mr="3" size="md" color-scheme="blue">
6+
<c-tag-label>Sample Tag</c-tag-label>
7+
</c-tag>
8+
<c-tag mr="3" size="lg" color-scheme="blue">
9+
<c-tag-label>Sample Tag</c-tag-label>
10+
</c-tag>
11+
</template>
12+
<script setup>
13+
import { CTag, CTagLabel, CTagLeftIcon, CTagRightIcon } from "../src"
14+
</script>

‎packages/c-tag/index.ts

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

‎packages/c-tag/package.json

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
{
2+
"name": "@chakra-ui/c-tag",
3+
"description": "Chakra UI Vue | Tag component component",
4+
"version": "0.0.0-alpha.0",
5+
"main": "dist/chakra-ui-c-tag.cjs.js",
6+
"module": "dist/chakra-ui-c-tag.esm.js",
7+
"author": "Shyrro <[email protected]>",
8+
"homepage": "https://github.com/chakra-ui/chakra-ui-vue-next#readme",
9+
"license": "MIT",
10+
"files": [
11+
"dist"
12+
],
13+
"exports": {
14+
".": {
15+
"require": "./dist/chakra-ui-c-tag.cjs.js",
16+
"default": "./dist/chakra-ui-c-tag.esm.js"
17+
}
18+
},
19+
"repository": "https://github.com/chakra-ui/chakra-ui-vue-next/tree/master/packages/c-tag",
20+
"bugs": {
21+
"url": "https://github.com/chakra-ui/chakra-ui-vue-next/issues"
22+
},
23+
"sideEffects": false,
24+
"scripts": {
25+
"clean": "rimraf dist"
26+
},
27+
"dependencies": {
28+
"@chakra-ui/c-icon": "1.0.0-alpha.10",
29+
"@chakra-ui/vue-system": "0.1.0-alpha.10",
30+
"@chakra-ui/utils": "^2.0.3",
31+
"@chakra-ui/vue-utils": "0.1.0-alpha.10"
32+
},
33+
"devDependencies": {
34+
"vue": "^3.2.29"
35+
},
36+
"peerDependencies": {
37+
"vue": "^3.1.4"
38+
},
39+
"publishConfig": {
40+
"access": "public"
41+
}
42+
}

0 commit comments

Comments
 (0)