Merge pull request #114 from assasin0076/feat_table
feat: added table component
This commit is contained in:
Ilya Artamonov
GitHub
@@ -47,6 +47,7 @@ function getComponents() {
|
|||||||
{ text: 'Progress', link: 'components/progress' },
|
{ text: 'Progress', link: 'components/progress' },
|
||||||
{ text: 'Rating', link: 'components/rating' },
|
{ text: 'Rating', link: 'components/rating' },
|
||||||
{ text: 'Spinner', link: '/components/spinner' },
|
{ text: 'Spinner', link: '/components/spinner' },
|
||||||
|
{ text: 'Table', link: 'components/table' },
|
||||||
{ text: 'Tabs', link: '/components/tabs' },
|
{ text: 'Tabs', link: '/components/tabs' },
|
||||||
{ text: 'ListGroup', link: 'components/list-group' },
|
{ text: 'ListGroup', link: 'components/list-group' },
|
||||||
{ text: 'Toast', link: 'components/toast' },
|
{ text: 'Toast', link: 'components/toast' },
|
||||||
@@ -57,7 +58,6 @@ function getComponents() {
|
|||||||
{ text: '- Footer', link: 'components/footer' },
|
{ text: '- Footer', link: 'components/footer' },
|
||||||
{ text: '- Pagination', link: 'components/pagination' },
|
{ text: '- Pagination', link: 'components/pagination' },
|
||||||
{ text: '- Sidebar', link: 'components/sidebar' },
|
{ text: '- Sidebar', link: 'components/sidebar' },
|
||||||
{ text: '- Table', link: 'components/table' },
|
|
||||||
{ text: '- Timeline', link: 'components/timeline' },
|
{ text: '- Timeline', link: 'components/timeline' },
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,15 +1,219 @@
|
|||||||
<script setup>
|
<script setup>
|
||||||
import TableExample from './table/examples/TableExample.vue'
|
import TableExample from './table/examples/TableExample.vue';
|
||||||
|
import TableStripedExample from './table/examples/TableStripedExample.vue';
|
||||||
|
import TableStripedColumnsExample from './table/examples/TableStripedColumnsExample.vue';
|
||||||
|
import TableHoverableExample from './table/examples/TableHoverableExample.vue';
|
||||||
</script>
|
</script>
|
||||||
# Vue Table Component - Flowbite
|
# Vue Table Component - Flowbite
|
||||||
|
|
||||||
```vue
|
#### Button groups are a Tailwind CSS powered set of buttons sticked together in a horizontal line
|
||||||
<script setup>
|
|
||||||
import { Table } from 'flowbite-vue'
|
---
|
||||||
</script>
|
|
||||||
<template>
|
:::tip
|
||||||
<Table></Table>
|
Original reference: [https://flowbite.com/docs/components/tables/](https://flowbite.com/docs/components/tables/)
|
||||||
</template>
|
:::
|
||||||
```
|
|
||||||
|
## Basic example
|
||||||
|
|
||||||
<TableExample />
|
<TableExample />
|
||||||
|
|
||||||
|
```vue
|
||||||
|
<template>
|
||||||
|
<Table>
|
||||||
|
<table-head>
|
||||||
|
<table-head-cell>Product name</table-head-cell>
|
||||||
|
<table-head-cell>Color</table-head-cell>
|
||||||
|
<table-head-cell>Category</table-head-cell>
|
||||||
|
<table-head-cell>Price</table-head-cell>
|
||||||
|
<table-head-cell><span class="sr-only">Edit</span></table-head-cell>
|
||||||
|
</table-head>
|
||||||
|
<table-body>
|
||||||
|
<table-row>
|
||||||
|
<table-cell>Apple MacBook Pro 17"</table-cell>
|
||||||
|
<table-cell>Sliver</table-cell>
|
||||||
|
<table-cell>Laptop</table-cell>
|
||||||
|
<table-cell>$2999</table-cell>
|
||||||
|
<table-cell>
|
||||||
|
<a href="#" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">Edit</a>
|
||||||
|
</table-cell>
|
||||||
|
</table-row>
|
||||||
|
<table-row>
|
||||||
|
<table-cell>Microsoft Surface Pro</table-cell>
|
||||||
|
<table-cell>White</table-cell>
|
||||||
|
<table-cell>Laptop PC</table-cell>
|
||||||
|
<table-cell>$1999</table-cell>
|
||||||
|
<table-cell>
|
||||||
|
<a href="#" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">Edit</a>
|
||||||
|
</table-cell>
|
||||||
|
</table-row>
|
||||||
|
<table-row>
|
||||||
|
<table-cell>Magic Mouse 2</table-cell>
|
||||||
|
<table-cell>Black</table-cell>
|
||||||
|
<table-cell>Accessories</table-cell>
|
||||||
|
<table-cell>$99</table-cell>
|
||||||
|
<table-cell>
|
||||||
|
<a href="#" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">Edit</a>
|
||||||
|
</table-cell>
|
||||||
|
</table-row>
|
||||||
|
</table-body>
|
||||||
|
</Table>
|
||||||
|
</template>
|
||||||
|
<script setup>
|
||||||
|
import { Table, TableHead, TableBody, TableHeadCell, TableRow, TableCell } from 'flowbite-vue'
|
||||||
|
</script>
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
## Striped example
|
||||||
|
|
||||||
|
<TableStripedExample />
|
||||||
|
|
||||||
|
```vue
|
||||||
|
<template>
|
||||||
|
<Table striped>
|
||||||
|
<table-head>
|
||||||
|
<table-head-cell>Product name</table-head-cell>
|
||||||
|
<table-head-cell>Color</table-head-cell>
|
||||||
|
<table-head-cell>Category</table-head-cell>
|
||||||
|
<table-head-cell>Price</table-head-cell>
|
||||||
|
<table-head-cell><span class="sr-only">Edit</span></table-head-cell>
|
||||||
|
</table-head>
|
||||||
|
<table-body>
|
||||||
|
<table-row>
|
||||||
|
<table-cell>Apple MacBook Pro 17"</table-cell>
|
||||||
|
<table-cell>Sliver</table-cell>
|
||||||
|
<table-cell>Laptop</table-cell>
|
||||||
|
<table-cell>$2999</table-cell>
|
||||||
|
<table-cell>
|
||||||
|
<a href="#" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">Edit</a>
|
||||||
|
</table-cell>
|
||||||
|
</table-row>
|
||||||
|
<table-row>
|
||||||
|
<table-cell>Microsoft Surface Pro</table-cell>
|
||||||
|
<table-cell>White</table-cell>
|
||||||
|
<table-cell>Laptop PC</table-cell>
|
||||||
|
<table-cell>$1999</table-cell>
|
||||||
|
<table-cell>
|
||||||
|
<a href="#" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">Edit</a>
|
||||||
|
</table-cell>
|
||||||
|
</table-row>
|
||||||
|
<table-row>
|
||||||
|
<table-cell>Magic Mouse 2</table-cell>
|
||||||
|
<table-cell>Black</table-cell>
|
||||||
|
<table-cell>Accessories</table-cell>
|
||||||
|
<table-cell>$99</table-cell>
|
||||||
|
<table-cell>
|
||||||
|
<a href="#" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">Edit</a>
|
||||||
|
</table-cell>
|
||||||
|
</table-row>
|
||||||
|
</table-body>
|
||||||
|
</Table>
|
||||||
|
</template>
|
||||||
|
<script setup>
|
||||||
|
import { Table, TableHead, TableBody, TableHeadCell, TableRow, TableCell } from 'flowbite-vue'
|
||||||
|
</script>
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
## Striped columns example
|
||||||
|
|
||||||
|
<TableStripedColumnsExample />
|
||||||
|
|
||||||
|
```vue
|
||||||
|
<template>
|
||||||
|
<Table striped-columns>
|
||||||
|
<table-head>
|
||||||
|
<table-head-cell>Product name</table-head-cell>
|
||||||
|
<table-head-cell>Color</table-head-cell>
|
||||||
|
<table-head-cell>Category</table-head-cell>
|
||||||
|
<table-head-cell>Price</table-head-cell>
|
||||||
|
<table-head-cell><span class="sr-only">Edit</span></table-head-cell>
|
||||||
|
</table-head>
|
||||||
|
<table-body>
|
||||||
|
<table-row>
|
||||||
|
<table-cell>Apple MacBook Pro 17"</table-cell>
|
||||||
|
<table-cell>Sliver</table-cell>
|
||||||
|
<table-cell>Laptop</table-cell>
|
||||||
|
<table-cell>$2999</table-cell>
|
||||||
|
<table-cell>
|
||||||
|
<a href="#" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">Edit</a>
|
||||||
|
</table-cell>
|
||||||
|
</table-row>
|
||||||
|
<table-row>
|
||||||
|
<table-cell>Microsoft Surface Pro</table-cell>
|
||||||
|
<table-cell>White</table-cell>
|
||||||
|
<table-cell>Laptop PC</table-cell>
|
||||||
|
<table-cell>$1999</table-cell>
|
||||||
|
<table-cell>
|
||||||
|
<a href="#" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">Edit</a>
|
||||||
|
</table-cell>
|
||||||
|
</table-row>
|
||||||
|
<table-row>
|
||||||
|
<table-cell>Magic Mouse 2</table-cell>
|
||||||
|
<table-cell>Black</table-cell>
|
||||||
|
<table-cell>Accessories</table-cell>
|
||||||
|
<table-cell>$99</table-cell>
|
||||||
|
<table-cell>
|
||||||
|
<a href="#" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">Edit</a>
|
||||||
|
</table-cell>
|
||||||
|
</table-row>
|
||||||
|
</table-body>
|
||||||
|
</Table>
|
||||||
|
</template>
|
||||||
|
<script setup>
|
||||||
|
import { Table, TableHead, TableBody, TableHeadCell, TableRow, TableCell } from 'flowbite-vue'
|
||||||
|
</script>
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
## Hoverable example
|
||||||
|
|
||||||
|
<TableHoverableExample />
|
||||||
|
|
||||||
|
```vue
|
||||||
|
<template>
|
||||||
|
<Table hoverable>
|
||||||
|
<table-head>
|
||||||
|
<table-head-cell>Product name</table-head-cell>
|
||||||
|
<table-head-cell>Color</table-head-cell>
|
||||||
|
<table-head-cell>Category</table-head-cell>
|
||||||
|
<table-head-cell>Price</table-head-cell>
|
||||||
|
<table-head-cell><span class="sr-only">Edit</span></table-head-cell>
|
||||||
|
</table-head>
|
||||||
|
<table-body>
|
||||||
|
<table-row>
|
||||||
|
<table-cell>Apple MacBook Pro 17"</table-cell>
|
||||||
|
<table-cell>Sliver</table-cell>
|
||||||
|
<table-cell>Laptop</table-cell>
|
||||||
|
<table-cell>$2999</table-cell>
|
||||||
|
<table-cell>
|
||||||
|
<a href="#" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">Edit</a>
|
||||||
|
</table-cell>
|
||||||
|
</table-row>
|
||||||
|
<table-row>
|
||||||
|
<table-cell>Microsoft Surface Pro</table-cell>
|
||||||
|
<table-cell>White</table-cell>
|
||||||
|
<table-cell>Laptop PC</table-cell>
|
||||||
|
<table-cell>$1999</table-cell>
|
||||||
|
<table-cell>
|
||||||
|
<a href="#" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">Edit</a>
|
||||||
|
</table-cell>
|
||||||
|
</table-row>
|
||||||
|
<table-row>
|
||||||
|
<table-cell>Magic Mouse 2</table-cell>
|
||||||
|
<table-cell>Black</table-cell>
|
||||||
|
<table-cell>Accessories</table-cell>
|
||||||
|
<table-cell>$99</table-cell>
|
||||||
|
<table-cell>
|
||||||
|
<a href="#" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">Edit</a>
|
||||||
|
</table-cell>
|
||||||
|
</table-row>
|
||||||
|
</table-body>
|
||||||
|
</Table>
|
||||||
|
</template>
|
||||||
|
<script setup>
|
||||||
|
import { Table, TableHead, TableBody, TableHeadCell, TableRow, TableCell } from 'flowbite-vue'
|
||||||
|
</script>
|
||||||
|
|
||||||
|
```
|
||||||
|
|||||||
@@ -1,8 +1,43 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="vp-raw flex flex-col">
|
<Table>
|
||||||
<Table></Table>
|
<table-head>
|
||||||
</div>
|
<table-head-cell>Product name</table-head-cell>
|
||||||
|
<table-head-cell>Color</table-head-cell>
|
||||||
|
<table-head-cell>Category</table-head-cell>
|
||||||
|
<table-head-cell>Price</table-head-cell>
|
||||||
|
<table-head-cell><span class="sr-only">Edit</span></table-head-cell>
|
||||||
|
</table-head>
|
||||||
|
<table-body>
|
||||||
|
<table-row>
|
||||||
|
<table-cell>Apple MacBook Pro 17"</table-cell>
|
||||||
|
<table-cell>Sliver</table-cell>
|
||||||
|
<table-cell>Laptop</table-cell>
|
||||||
|
<table-cell>$2999</table-cell>
|
||||||
|
<table-cell>
|
||||||
|
<a href="#" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">Edit</a>
|
||||||
|
</table-cell>
|
||||||
|
</table-row>
|
||||||
|
<table-row>
|
||||||
|
<table-cell>Microsoft Surface Pro</table-cell>
|
||||||
|
<table-cell>White</table-cell>
|
||||||
|
<table-cell>Laptop PC</table-cell>
|
||||||
|
<table-cell>$1999</table-cell>
|
||||||
|
<table-cell>
|
||||||
|
<a href="#" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">Edit</a>
|
||||||
|
</table-cell>
|
||||||
|
</table-row>
|
||||||
|
<table-row>
|
||||||
|
<table-cell>Magic Mouse 2</table-cell>
|
||||||
|
<table-cell>Black</table-cell>
|
||||||
|
<table-cell>Accessories</table-cell>
|
||||||
|
<table-cell>$99</table-cell>
|
||||||
|
<table-cell>
|
||||||
|
<a href="#" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">Edit</a>
|
||||||
|
</table-cell>
|
||||||
|
</table-row>
|
||||||
|
</table-body>
|
||||||
|
</Table>
|
||||||
</template>
|
</template>
|
||||||
<script setup>
|
<script setup>
|
||||||
import { Table } from '../../../../src/index'
|
import { Table, TableHead, TableBody, TableHeadCell, TableRow, TableCell } from '../../../../src/index'
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
43
docs/components/table/examples/TableHoverableExample.vue
Normal file
43
docs/components/table/examples/TableHoverableExample.vue
Normal file
@@ -0,0 +1,43 @@
|
|||||||
|
<template>
|
||||||
|
<Table hoverable>
|
||||||
|
<table-head>
|
||||||
|
<table-head-cell>Product name</table-head-cell>
|
||||||
|
<table-head-cell>Color</table-head-cell>
|
||||||
|
<table-head-cell>Category</table-head-cell>
|
||||||
|
<table-head-cell>Price</table-head-cell>
|
||||||
|
<table-head-cell><span class="sr-only">Edit</span></table-head-cell>
|
||||||
|
</table-head>
|
||||||
|
<table-body>
|
||||||
|
<table-row>
|
||||||
|
<table-cell>Apple MacBook Pro 17"</table-cell>
|
||||||
|
<table-cell>Sliver</table-cell>
|
||||||
|
<table-cell>Laptop</table-cell>
|
||||||
|
<table-cell>$2999</table-cell>
|
||||||
|
<table-cell>
|
||||||
|
<a href="#" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">Edit</a>
|
||||||
|
</table-cell>
|
||||||
|
</table-row>
|
||||||
|
<table-row>
|
||||||
|
<table-cell>Microsoft Surface Pro</table-cell>
|
||||||
|
<table-cell>White</table-cell>
|
||||||
|
<table-cell>Laptop PC</table-cell>
|
||||||
|
<table-cell>$1999</table-cell>
|
||||||
|
<table-cell>
|
||||||
|
<a href="#" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">Edit</a>
|
||||||
|
</table-cell>
|
||||||
|
</table-row>
|
||||||
|
<table-row>
|
||||||
|
<table-cell>Magic Mouse 2</table-cell>
|
||||||
|
<table-cell>Black</table-cell>
|
||||||
|
<table-cell>Accessories</table-cell>
|
||||||
|
<table-cell>$99</table-cell>
|
||||||
|
<table-cell>
|
||||||
|
<a href="#" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">Edit</a>
|
||||||
|
</table-cell>
|
||||||
|
</table-row>
|
||||||
|
</table-body>
|
||||||
|
</Table>
|
||||||
|
</template>
|
||||||
|
<script setup>
|
||||||
|
import { Table, TableHead, TableBody, TableHeadCell, TableRow, TableCell } from '../../../../src/index'
|
||||||
|
</script>
|
||||||
@@ -0,0 +1,43 @@
|
|||||||
|
<template>
|
||||||
|
<Table striped-columns>
|
||||||
|
<table-head>
|
||||||
|
<table-head-cell>Product name</table-head-cell>
|
||||||
|
<table-head-cell>Color</table-head-cell>
|
||||||
|
<table-head-cell>Category</table-head-cell>
|
||||||
|
<table-head-cell>Price</table-head-cell>
|
||||||
|
<table-head-cell><span class="sr-only">Edit</span></table-head-cell>
|
||||||
|
</table-head>
|
||||||
|
<table-body>
|
||||||
|
<table-row>
|
||||||
|
<table-cell>Apple MacBook Pro 17"</table-cell>
|
||||||
|
<table-cell>Sliver</table-cell>
|
||||||
|
<table-cell>Laptop</table-cell>
|
||||||
|
<table-cell>$2999</table-cell>
|
||||||
|
<table-cell>
|
||||||
|
<a href="#" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">Edit</a>
|
||||||
|
</table-cell>
|
||||||
|
</table-row>
|
||||||
|
<table-row>
|
||||||
|
<table-cell>Microsoft Surface Pro</table-cell>
|
||||||
|
<table-cell>White</table-cell>
|
||||||
|
<table-cell>Laptop PC</table-cell>
|
||||||
|
<table-cell>$1999</table-cell>
|
||||||
|
<table-cell>
|
||||||
|
<a href="#" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">Edit</a>
|
||||||
|
</table-cell>
|
||||||
|
</table-row>
|
||||||
|
<table-row>
|
||||||
|
<table-cell>Magic Mouse 2</table-cell>
|
||||||
|
<table-cell>Black</table-cell>
|
||||||
|
<table-cell>Accessories</table-cell>
|
||||||
|
<table-cell>$99</table-cell>
|
||||||
|
<table-cell>
|
||||||
|
<a href="#" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">Edit</a>
|
||||||
|
</table-cell>
|
||||||
|
</table-row>
|
||||||
|
</table-body>
|
||||||
|
</Table>
|
||||||
|
</template>
|
||||||
|
<script setup>
|
||||||
|
import { Table, TableHead, TableBody, TableHeadCell, TableRow, TableCell } from '../../../../src/index'
|
||||||
|
</script>
|
||||||
43
docs/components/table/examples/TableStripedExample.vue
Normal file
43
docs/components/table/examples/TableStripedExample.vue
Normal file
@@ -0,0 +1,43 @@
|
|||||||
|
<template>
|
||||||
|
<Table striped>
|
||||||
|
<table-head>
|
||||||
|
<table-head-cell>Product name</table-head-cell>
|
||||||
|
<table-head-cell>Color</table-head-cell>
|
||||||
|
<table-head-cell>Category</table-head-cell>
|
||||||
|
<table-head-cell>Price</table-head-cell>
|
||||||
|
<table-head-cell><span class="sr-only">Edit</span></table-head-cell>
|
||||||
|
</table-head>
|
||||||
|
<table-body>
|
||||||
|
<table-row>
|
||||||
|
<table-cell>Apple MacBook Pro 17"</table-cell>
|
||||||
|
<table-cell>Sliver</table-cell>
|
||||||
|
<table-cell>Laptop</table-cell>
|
||||||
|
<table-cell>$2999</table-cell>
|
||||||
|
<table-cell>
|
||||||
|
<a href="#" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">Edit</a>
|
||||||
|
</table-cell>
|
||||||
|
</table-row>
|
||||||
|
<table-row>
|
||||||
|
<table-cell>Microsoft Surface Pro</table-cell>
|
||||||
|
<table-cell>White</table-cell>
|
||||||
|
<table-cell>Laptop PC</table-cell>
|
||||||
|
<table-cell>$1999</table-cell>
|
||||||
|
<table-cell>
|
||||||
|
<a href="#" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">Edit</a>
|
||||||
|
</table-cell>
|
||||||
|
</table-row>
|
||||||
|
<table-row>
|
||||||
|
<table-cell>Magic Mouse 2</table-cell>
|
||||||
|
<table-cell>Black</table-cell>
|
||||||
|
<table-cell>Accessories</table-cell>
|
||||||
|
<table-cell>$99</table-cell>
|
||||||
|
<table-cell>
|
||||||
|
<a href="#" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">Edit</a>
|
||||||
|
</table-cell>
|
||||||
|
</table-row>
|
||||||
|
</table-body>
|
||||||
|
</Table>
|
||||||
|
</template>
|
||||||
|
<script setup>
|
||||||
|
import { Table, TableHead, TableBody, TableHeadCell, TableRow, TableCell } from '../../../../src/index'
|
||||||
|
</script>
|
||||||
@@ -1,104 +1,29 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="relative overflow-x-auto shadow-md sm:rounded-lg">
|
<div class="relative overflow-x-auto shadow-md sm:rounded-lg">
|
||||||
<table class="w-full text-sm text-left text-gray-500 dark:text-gray-400">
|
<table class="w-full text-sm text-left text-gray-500 dark:text-gray-400">
|
||||||
<thead class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
|
<slot></slot>
|
||||||
<tr>
|
|
||||||
<th scope="col" class="px-6 py-3">
|
|
||||||
Product name
|
|
||||||
</th>
|
|
||||||
<th scope="col" class="px-6 py-3">
|
|
||||||
Color
|
|
||||||
</th>
|
|
||||||
<th scope="col" class="px-6 py-3">
|
|
||||||
Category
|
|
||||||
</th>
|
|
||||||
<th scope="col" class="px-6 py-3">
|
|
||||||
Price
|
|
||||||
</th>
|
|
||||||
<th scope="col" class="px-6 py-3">
|
|
||||||
<span class="sr-only">Edit</span>
|
|
||||||
</th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tbody>
|
|
||||||
<tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700">
|
|
||||||
<th scope="row" class="px-6 py-4 font-medium text-gray-900 dark:text-white whitespace-nowrap">
|
|
||||||
Apple MacBook Pro 17"
|
|
||||||
</th>
|
|
||||||
<td class="px-6 py-4">
|
|
||||||
Sliver
|
|
||||||
</td>
|
|
||||||
<td class="px-6 py-4">
|
|
||||||
Laptop
|
|
||||||
</td>
|
|
||||||
<td class="px-6 py-4">
|
|
||||||
$2999
|
|
||||||
</td>
|
|
||||||
<td class="px-6 py-4 text-right">
|
|
||||||
<a href="#" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">Edit</a>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
<tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700">
|
|
||||||
<th scope="row" class="px-6 py-4 font-medium text-gray-900 dark:text-white whitespace-nowrap">
|
|
||||||
Microsoft Surface Pro
|
|
||||||
</th>
|
|
||||||
<td class="px-6 py-4">
|
|
||||||
White
|
|
||||||
</td>
|
|
||||||
<td class="px-6 py-4">
|
|
||||||
Laptop PC
|
|
||||||
</td>
|
|
||||||
<td class="px-6 py-4">
|
|
||||||
$1999
|
|
||||||
</td>
|
|
||||||
<td class="px-6 py-4 text-right">
|
|
||||||
<a href="#" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">Edit</a>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
<tr class="bg-white dark:bg-gray-800">
|
|
||||||
<th scope="row" class="px-6 py-4 font-medium text-gray-900 dark:text-white whitespace-nowrap">
|
|
||||||
Magic Mouse 2
|
|
||||||
</th>
|
|
||||||
<td class="px-6 py-4">
|
|
||||||
Black
|
|
||||||
</td>
|
|
||||||
<td class="px-6 py-4">
|
|
||||||
Accessories
|
|
||||||
</td>
|
|
||||||
<td class="px-6 py-4">
|
|
||||||
$99
|
|
||||||
</td>
|
|
||||||
<td class="px-6 py-4 text-right">
|
|
||||||
<a href="#" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">Edit</a>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
</tbody>
|
|
||||||
</table>
|
</table>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import { computed, toRefs } from 'vue'
|
import { provide } from 'vue'
|
||||||
import type { PropType } from 'vue'
|
|
||||||
|
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
children: {
|
|
||||||
type: Array,
|
|
||||||
default() {
|
|
||||||
return []
|
|
||||||
},
|
|
||||||
},
|
|
||||||
striped: {
|
striped: {
|
||||||
type: Boolean,
|
type: Boolean,
|
||||||
default: false,
|
default: false,
|
||||||
},
|
},
|
||||||
|
stripedColumns: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false,
|
||||||
|
},
|
||||||
hoverable: {
|
hoverable: {
|
||||||
type: Boolean,
|
type: Boolean,
|
||||||
default: false,
|
default: false,
|
||||||
},
|
},
|
||||||
className: {
|
|
||||||
type: String,
|
|
||||||
default: '',
|
|
||||||
},
|
|
||||||
})
|
})
|
||||||
|
|
||||||
|
provide('striped', props.striped)
|
||||||
|
provide('hoverable', props.hoverable)
|
||||||
|
provide('stripedColumns', props.stripedColumns)
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
7
src/components/Table/TableBody.vue
Normal file
7
src/components/Table/TableBody.vue
Normal file
@@ -0,0 +1,7 @@
|
|||||||
|
<template>
|
||||||
|
<tbody>
|
||||||
|
<slot></slot>
|
||||||
|
</tbody>
|
||||||
|
</template>
|
||||||
|
<script lang="ts" setup>
|
||||||
|
</script>
|
||||||
11
src/components/Table/TableCell.vue
Normal file
11
src/components/Table/TableCell.vue
Normal file
@@ -0,0 +1,11 @@
|
|||||||
|
<template>
|
||||||
|
<td :class="tableCellClasses">
|
||||||
|
<slot></slot>
|
||||||
|
</td>
|
||||||
|
</template>
|
||||||
|
<script lang="ts" setup>
|
||||||
|
|
||||||
|
import { useTableCellClasses } from '@/components/Table/composables/useTableCellClasses'
|
||||||
|
|
||||||
|
const { tableCellClasses } = useTableCellClasses()
|
||||||
|
</script>
|
||||||
9
src/components/Table/TableHead.vue
Normal file
9
src/components/Table/TableHead.vue
Normal file
@@ -0,0 +1,9 @@
|
|||||||
|
<template>
|
||||||
|
<thead class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
|
||||||
|
<tr>
|
||||||
|
<slot></slot>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
</template>
|
||||||
|
<script lang="ts" setup>
|
||||||
|
</script>
|
||||||
10
src/components/Table/TableHeadCell.vue
Normal file
10
src/components/Table/TableHeadCell.vue
Normal file
@@ -0,0 +1,10 @@
|
|||||||
|
<template>
|
||||||
|
<th scope="col" :class="tableHeadCellClasses">
|
||||||
|
<slot></slot>
|
||||||
|
</th>
|
||||||
|
</template>
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import { useTableHeadCellClasses } from '@/components/Table/composables/useTableHeadCellClasses'
|
||||||
|
|
||||||
|
const { tableHeadCellClasses } = useTableHeadCellClasses()
|
||||||
|
</script>
|
||||||
10
src/components/Table/TableRow.vue
Normal file
10
src/components/Table/TableRow.vue
Normal file
@@ -0,0 +1,10 @@
|
|||||||
|
<template>
|
||||||
|
<tr :class="tableRowClasses">
|
||||||
|
<slot></slot>
|
||||||
|
</tr>
|
||||||
|
</template>
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import { useTableRowClasses } from '@/components/Table/composables/useTableRowClasses'
|
||||||
|
|
||||||
|
const { tableRowClasses } = useTableRowClasses()
|
||||||
|
</script>
|
||||||
20
src/components/Table/composables/useTableCellClasses.ts
Normal file
20
src/components/Table/composables/useTableCellClasses.ts
Normal file
@@ -0,0 +1,20 @@
|
|||||||
|
import { computed, inject } from 'vue'
|
||||||
|
import type { Ref } from 'vue'
|
||||||
|
import classNames from 'classnames'
|
||||||
|
|
||||||
|
const baseClasses = 'px-6 py-4 first:font-medium first:text-gray-900 first:dark:text-white first:whitespace-nowrap last:text-right'
|
||||||
|
const stripedCellClasses = 'even:bg-gray-white even:dark:bg-gray-900 odd:dark:bg-gray-800 odd:bg-gray-50'
|
||||||
|
|
||||||
|
export function useTableCellClasses(): { tableCellClasses: Ref<string> } {
|
||||||
|
const isColumnsStriped = inject('stripedColumns')
|
||||||
|
|
||||||
|
const tableCellClasses = computed(() => {
|
||||||
|
return classNames(baseClasses, {
|
||||||
|
[stripedCellClasses]: isColumnsStriped,
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
return {
|
||||||
|
tableCellClasses,
|
||||||
|
}
|
||||||
|
}
|
||||||
20
src/components/Table/composables/useTableHeadCellClasses.ts
Normal file
20
src/components/Table/composables/useTableHeadCellClasses.ts
Normal file
@@ -0,0 +1,20 @@
|
|||||||
|
import { computed, inject } from 'vue'
|
||||||
|
import type { Ref } from 'vue'
|
||||||
|
import classNames from 'classnames'
|
||||||
|
|
||||||
|
const baseClasses = 'px-6 py-3 text-xs uppercase'
|
||||||
|
const stripedHeadCellClasses = 'even:bg-white even:dark:bg-gray-900 odd:dark:bg-gray-800 odd:bg-gray-50'
|
||||||
|
|
||||||
|
export function useTableHeadCellClasses(): { tableHeadCellClasses: Ref<string> } {
|
||||||
|
const isColumnsStriped = inject('stripedColumns')
|
||||||
|
|
||||||
|
const tableHeadCellClasses = computed(() => {
|
||||||
|
return classNames(baseClasses, {
|
||||||
|
[stripedHeadCellClasses]: isColumnsStriped,
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
return {
|
||||||
|
tableHeadCellClasses,
|
||||||
|
}
|
||||||
|
}
|
||||||
23
src/components/Table/composables/useTableRowClasses.ts
Normal file
23
src/components/Table/composables/useTableRowClasses.ts
Normal file
@@ -0,0 +1,23 @@
|
|||||||
|
import { computed, inject } from 'vue'
|
||||||
|
import type { Ref } from 'vue'
|
||||||
|
import classNames from 'classnames'
|
||||||
|
|
||||||
|
const baseClasses = 'bg-white dark:bg-gray-800 [&:not(:last-child)]:border-b [&:not(:last-child)]:dark:border-gray-700'
|
||||||
|
const stripedClasses = 'odd:bg-white even:bg-gray-50 odd:dark:bg-gray-800 even:dark:bg-gray-700'
|
||||||
|
const hoverableClasses = 'hover:bg-gray-50 dark:hover:bg-gray-600'
|
||||||
|
|
||||||
|
export function useTableRowClasses(): { tableRowClasses: Ref<string> } {
|
||||||
|
const isStriped = inject('striped')
|
||||||
|
const isHoverable = inject('hoverable')
|
||||||
|
|
||||||
|
const tableRowClasses = computed(() => {
|
||||||
|
return classNames(baseClasses, {
|
||||||
|
[stripedClasses]: isStriped,
|
||||||
|
[hoverableClasses]: isHoverable,
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
return {
|
||||||
|
tableRowClasses,
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -32,6 +32,11 @@ export { default as Progress } from './components/Progress/Progress.vue'
|
|||||||
export { default as Rating } from './components/Rating/Rating.vue'
|
export { default as Rating } from './components/Rating/Rating.vue'
|
||||||
export { default as Sidebar } from './components/Sidebar/Sidebar.vue'
|
export { default as Sidebar } from './components/Sidebar/Sidebar.vue'
|
||||||
export { default as Table } from './components/Table/Table.vue'
|
export { default as Table } from './components/Table/Table.vue'
|
||||||
|
export { default as TableHead } from './components/Table/TableHead.vue'
|
||||||
|
export { default as TableBody } from './components/Table/TableBody.vue'
|
||||||
|
export { default as TableHeadCell } from './components/Table/TableHeadCell.vue'
|
||||||
|
export { default as TableRow } from './components/Table/TableRow.vue'
|
||||||
|
export { default as TableCell } from './components/Table/TableCell.vue'
|
||||||
export { default as Timeline } from './components/Timeline/Timeline.vue'
|
export { default as Timeline } from './components/Timeline/Timeline.vue'
|
||||||
export { default as Toast } from './components/Toast/Toast.vue'
|
export { default as Toast } from './components/Toast/Toast.vue'
|
||||||
export { default as ToastProvider } from './components/Toast/components/ToastProvider/ToastProvider.vue'
|
export { default as ToastProvider } from './components/Toast/components/ToastProvider/ToastProvider.vue'
|
||||||
|
|||||||
Reference in New Issue
Block a user