jaro/flowbite-vue
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: added core for table component

Browse Source
This commit is contained in:
victor
2022-12-12 19:41:03 +04:00
parent ca0811803c
commit ab973f7367
8 changed files with 82 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
docs/components/table/examples/TableExample.vue
View File

@@ -1,8 +1,45 @@
<template>
<div class="vp-raw flex flex-col">
<Table></Table>
<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>
</div>
</template>
<script setup>
import { Table } from '../../../../src/index'
import { Table, TableHead, TableBody, TableHeadCell, TableRow, TableCell } from '../../../../src/index'
</script>

76
src/components/Table/Table.vue
View File

@@ -1,85 +1,11 @@
<template>
<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">
<thead class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
<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>
<slot></slot>
</table>
</div>
</template>
<script lang="ts" setup>
import { computed, toRefs } from 'vue'
import type { PropType } from 'vue'
const props = defineProps({
children: {
type: Array,

7
src/components/Table/TableBody.vue Normal file
View File

@@ -0,0 +1,7 @@
<template>
<tbody>
<slot></slot>
</tbody>
</template>
<script lang="ts" setup>
</script>

7
src/components/Table/TableCell.vue Normal file
View File

@@ -0,0 +1,7 @@
<template>
<td class="px-6 py-4 first:font-medium first:text-gray-900 first:dark:text-white first:whitespace-nowrap last:text-right">
<slot></slot>
</td>
</template>
<script lang="ts" setup>
</script>

9
src/components/Table/TableHead.vue Normal file
View 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>

7
src/components/Table/TableHeadCell.vue Normal file
View File

@@ -0,0 +1,7 @@
<template>
<th scope="col" class="px-6 py-3">
<slot></slot>
</th>
</template>
<script lang="ts" setup>
</script>

7
src/components/Table/TableRow.vue Normal file
View File

@@ -0,0 +1,7 @@
<template>
<tr class="bg-white dark:bg-gray-800 [&:not(:last-child)]:border-b [&:not(:last-child)]:dark:border-gray-700">
<slot></slot>
</tr>
</template>
<script lang="ts" setup>
</script>

5
src/index.ts
View File

@@ -29,6 +29,11 @@ export { default as Progress } from './components/Progress/Progress.vue'
export { default as Rating } from './components/Rating/Rating.vue'
export { default as Sidebar } from './components/Sidebar/Sidebar.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 Toast } from './components/Toast/Toast.vue'
export { default as ToastProvider } from './components/Toast/components/ToastProvider/ToastProvider.vue'