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

Commit 362b362

Browse files
codebender828codebender828
authored
Merge pull request #278 from chakra-ui/feat/table-component
feat/table component
2 parents 4b61f12 + 42640e5 commit 362b362

25 files changed

+690
-17
lines changed

‎@types/components.d.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
*
77
* This is a generated file. Do not edit it's contents.
88
*
9-
* This file was generated on 2023-02-26T13:58:05.623Z
9+
* This file was generated on 2023-02-26T18:55:26.214Z
1010
*/
1111

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

‎_templates/generator/component/package.json.ejs.t

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -6,18 +6,19 @@ to: packages/<%=h.changeCase.paramCase(name)%>/package.json
66
"name": "<%= '@chakra-ui/' + h.changeCase.paramCase(name)%>",
77
"description": "<%= 'Chakra UI Vue | ' + h.changeCase.sentence(description) + ' component'%>",
88
"version": "0.0.0-next.0",
9-
"main": "<%= 'dist/chakra-ui-' + h.changeCase.paramCase(name) + '.cjs.js' %>",
10-
"module": "<%= 'dist/chakra-ui-' + h.changeCase.paramCase(name) + '.esm.js' %>",
119
"author": "Jonathan Bakebwa <codebender828@gmail.com>",
1210
"homepage": "https://github.com/chakra-ui/chakra-ui-vue-next#readme",
1311
"license": "MIT",
12+
"main": "dist/index.js",
13+
"module": "dist/index.mjs",
14+
"typings": "dist/index.d.ts",
1415
"files": [
1516
"dist"
1617
],
1718
"exports": {
1819
".": {
19-
"require": "<%= './dist/chakra-ui-' + h.changeCase.paramCase(name) + '.cjs.js' %>",
20-
"default": "<%= './dist/chakra-ui-' + h.changeCase.paramCase(name) + '.esm.js' %>"
20+
"require": "./dist/index.js",
21+
"default": "./dist/index.mjs"
2122
}
2223
},
2324
"repository": {

‎_templates/generator/component/tsup.config.ts.ejs.t

Lines changed: 4 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -8,20 +8,14 @@ import EsbuildPluginJSX from "unplugin-vue-jsx/esbuild"
88
export default defineConfig({
99
clean: true,
1010
target: "es2019",
11-
outExtension({ format }) {
12-
return {
13-
js: `.${format}.js`,
14-
}
15-
},
1611
esbuildPlugins: [
17-
// @ts-expect-error `EsbuildPluginJSX` does not extend `tsup.Plugin` type.
1812
EsbuildPluginJSX({
1913
include: [/.[jt]sx?$/],
20-
}),
14+
}) as any,
2115
],
16+
metafile: true,
17+
external: ["lodash.mergewith"],
2218
format: ["esm", "cjs"],
23-
entry: {
24-
"<%=h.changeCase.paramCase(name)%>": "src/index.tsx",
25-
},
19+
entry: ["src/**/*.(ts|tsx)"],
2620
keepNames: true,
2721
})

‎components.d.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
*
77
* This is a generated file. Do not edit it's contents.
88
*
9-
* This file was generated on 2023-02-26T13:58:05.623Z
9+
* This file was generated on 2023-02-26T18:55:26.214Z
1010
*/
1111

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

‎packages/c-table/README.md

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
# `@chakra-ui/c-table`
2+
3+
Table component is used to organize and display data efficiently it renders a table element by default
4+
5+
## Installation
6+
7+
```sh
8+
# with pnpm
9+
pnpm add @chakra-ui/c-table
10+
# or with Yarn
11+
yarn i @chakra-ui/c-table
12+
# or with npm
13+
npm i @chakra-ui/c-table
14+
```

‎packages/c-table/examples/double-header-table.vue

Lines changed: 101 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,101 @@
1+
<template>
2+
<c-table-container :maxW="{ base: '300px', lg: 'unset' }">
3+
<c-table variant="striped" colorScheme="teal">
4+
<c-table-caption>Imperial to metric conversion factors</c-table-caption>
5+
<c-thead>
6+
<c-tr>
7+
<c-th aria-hidden />
8+
<c-th>To Convert</c-th>
9+
<c-th>into</c-th>
10+
<c-th>multiply by</c-th>
11+
</c-tr>
12+
</c-thead>
13+
<c-tbody>
14+
<c-tr>
15+
<c-th rowSpan="4">Length</c-th>
16+
<c-td>inches</c-td>
17+
<c-td>millimeters (mm)</c-td>
18+
<c-td isNumeric>25.4</c-td>
19+
</c-tr>
20+
<c-tr>
21+
<c-td>feet</c-td>
22+
<c-td>centimeters (cm)</c-td>
23+
<c-td isNumeric>30.48</c-td>
24+
</c-tr>
25+
<c-tr>
26+
<c-td>yards</c-td>
27+
<c-td>metres (m)</c-td>
28+
<c-td isNumeric>0.91444</c-td>
29+
</c-tr>
30+
<c-tr>
31+
<c-td>miles</c-td>
32+
<c-td>kilometres (km)</c-td>
33+
<c-td isNumeric>1.61</c-td>
34+
</c-tr>
35+
<c-tr>
36+
<c-th rowSpan="4">Area</c-th>
37+
<c-td>square inches</c-td>
38+
<c-td>sq. millimeters (mm²)</c-td>
39+
<c-td isNumeric>645</c-td>
40+
</c-tr>
41+
<c-tr>
42+
<c-td>square feet</c-td>
43+
<c-td>sq. metres (m²)</c-td>
44+
<c-td isNumeric>0.0929</c-td>
45+
</c-tr>
46+
<c-tr>
47+
<c-td>square yards</c-td>
48+
<c-td>sq. metres (m²)</c-td>
49+
<c-td isNumeric>.0836</c-td>
50+
</c-tr>
51+
<c-tr>
52+
<c-td>acres</c-td>
53+
<c-td>hectares</c-td>
54+
<c-td isNumeric>2.47</c-td>
55+
</c-tr>
56+
<c-tr>
57+
<c-th rowSpan="4">Volume</c-th>
58+
<c-td>cubic inches</c-td>
59+
<c-td>millilitres (ml)</c-td>
60+
<c-td isNumeric>25.4</c-td>
61+
</c-tr>
62+
<c-tr>
63+
<c-td>cubic feet</c-td>
64+
<c-td>litres</c-td>
65+
<c-td isNumeric>28.3</c-td>
66+
</c-tr>
67+
<c-tr>
68+
<c-td>imperial gallons</c-td>
69+
<c-td>litres</c-td>
70+
<c-td isNumeric>4.55</c-td>
71+
</c-tr>
72+
<c-tr>
73+
<c-td> <abbr>US</abbr> barrels </c-td>
74+
<c-td>cubic metres (m³)</c-td>
75+
<c-td isNumeric>0.159</c-td>
76+
</c-tr>
77+
</c-tbody>
78+
<c-tfoot>
79+
<c-tr>
80+
<c-th aria-hidden />
81+
<c-th>To convert</c-th>
82+
<c-th>into</c-th>
83+
<c-th>multiply by</c-th>
84+
</c-tr>
85+
</c-tfoot>
86+
</c-table>
87+
</c-table-container>
88+
</template>
89+
<script setup lang="ts">
90+
import {
91+
CTable,
92+
CTableContainer,
93+
CTableCaption,
94+
CThead,
95+
CTr,
96+
CTh,
97+
CTbody,
98+
CTd,
99+
CTfoot,
100+
} from "../index"
101+
</script>

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

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
<template>
2+
<c-table-container :maxW="{ base: '300px', lg: 'unset' }">
3+
<c-table variant="striped" colorScheme="teal">
4+
<c-table-caption>Imperial to metric conversion factors</c-table-caption>
5+
<c-thead>
6+
<c-tr>
7+
<c-th>To Convert</c-th>
8+
<c-th>into</c-th>
9+
<c-th>multiply by</c-th>
10+
</c-tr>
11+
</c-thead>
12+
<c-tbody>
13+
<c-tr>
14+
<c-td>inches</c-td>
15+
<c-td>millimeters (mm)</c-td>
16+
<c-td isNumeric>25.4</c-td>
17+
</c-tr>
18+
<c-tr>
19+
<c-td>feet</c-td>
20+
<c-td>centimeters (cm)</c-td>
21+
<c-td isNumeric>30.48</c-td>
22+
</c-tr>
23+
<c-tr>
24+
<c-td>yards</c-td>
25+
<c-td>metres (m)</c-td>
26+
<c-td isNumeric>0.91444</c-td>
27+
</c-tr>
28+
</c-tbody>
29+
<c-tfoot>
30+
<c-tr>
31+
<c-th>To convert</c-th>
32+
<c-th>into</c-th>
33+
<c-th>multiply by</c-th>
34+
</c-tr>
35+
</c-tfoot>
36+
</c-table>
37+
</c-table-container>
38+
</template>
39+
<script setup lang="ts">
40+
import {
41+
CTable,
42+
CTableContainer,
43+
CTableCaption,
44+
CThead,
45+
CTr,
46+
CTh,
47+
CTbody,
48+
CTd,
49+
CTfoot,
50+
} from "../index"
51+
</script>

‎packages/c-table/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-table/package.json

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
{
2+
"name": "@chakra-ui/c-table",
3+
"description": "Chakra UI Vue | Table component is used to organize and display data efficiently it renders a table element by default component",
4+
"version": "0.0.0-next.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-system": "workspace:*",
38+
"@chakra-ui/vue-utils": "workspace:*"
39+
},
40+
"devDependencies": {
41+
"vue": "^3.2.37"
42+
},
43+
"peerDependencies": {
44+
"vue": "^3.1.4"
45+
},
46+
"publishConfig": {
47+
"access": "public"
48+
}
49+
}

‎packages/c-table/src/c-table-caption.tsx

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
import { h, defineComponent, PropType } from "vue"
2+
import {
3+
chakra,
4+
ComponentWithProps,
5+
DeepPartial,
6+
HTMLChakraProps,
7+
} from "@chakra-ui/vue-system"
8+
import { useTableStyles } from "./c-table"
9+
10+
export interface CTableCaptionProps extends HTMLChakraProps<"caption"> {
11+
/**
12+
* The placement of the table caption. This sets the `caption-side` CSS attribute.
13+
* @default "bottom"
14+
*/
15+
placement?: "top" | "bottom"
16+
}
17+
18+
export const CTableCaption = defineComponent({
19+
name: "CTableCaption",
20+
props: {
21+
placement: String as PropType<CTableCaptionProps["placement"]>,
22+
},
23+
setup(props, { slots, attrs }) {
24+
const styles = useTableStyles()
25+
26+
return () => (
27+
<chakra.caption
28+
__label="table__caption"
29+
__css={{
30+
...styles.value.caption,
31+
captionSide: props.placement ?? "bottom",
32+
}}
33+
{...attrs}
34+
>
35+
{slots}
36+
</chakra.caption>
37+
)
38+
},
39+
})

0 commit comments

Comments
 (0)