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

Merge branch 'main' into feat_timeline

Browse Source 
# Conflicts:
#	docs/.vitepress/config.ts
This commit is contained in:
victor
2022-12-18 15:02:46 +04:00
parent 97ef4f9a13 f8e84fa3f9
commit 0de57634e7
23 changed files with 614 additions and 174 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
.github/workflows/node.js.yml vendored
View File

@@ -53,3 +53,18 @@ jobs:
cache: 'npm'
- run: npm i
- run: npm run build:package
build-types:
runs-on: ubuntu-latest
strategy:
matrix:
node-version: [ 16.x, 18.x ]
# See supported Node.js release schedule at https://nodejs.org/en/about/releases/
steps:
- uses: actions/checkout@v3
- name: Use Node.js ${{ matrix.node-version }}
uses: actions/setup-node@v3
with:
node-version: ${{ matrix.node-version }}
cache: 'npm'
- run: npm i
- run: npm run build:types

29
docs/.vitepress/config.ts
View File

@@ -11,17 +11,23 @@ function buildSidebar() {
{
text: 'Components',
collapsible: true,
items: [...getComponents()],
items: [
...getComponents(),
],
},
{
text: 'Form',
collapsible: true,
items: [...getFormComponents()],
items: [
...getFormComponents(),
],
},
{
text: 'Utils',
collapsible: true,
items: [...getUtils()],
items: [
...getUtils(),
],
},
]
}
@@ -41,6 +47,7 @@ function getComponents() {
{ text: 'Progress', link: 'components/progress' },
{ text: 'Rating', link: 'components/rating' },
{ text: 'Spinner', link: '/components/spinner' },
{ text: 'Table', link: 'components/table' },
{ text: 'Tabs', link: '/components/tabs' },
{ text: 'ListGroup', link: 'components/list-group' },
{ text: 'Timeline', link: 'components/timeline' },
@@ -52,18 +59,19 @@ function getComponents() {
{ text: '- Footer', link: 'components/footer' },
{ text: '- Pagination', link: 'components/pagination' },
{ text: '- Sidebar', link: 'components/sidebar' },
{ text: '- Table', link: 'components/table' },
]
}
function getFormComponents() {
return [{ text: 'Input', link: 'components/input' }]
return [
{ text: 'Input', link: 'components/input' },
]
}
function getUtils() {
return [
{ text: 'Flowbite Themable', link: '/components/flowbiteThemable/flowbiteThemable.md' },
{ text: 'Toast Provider', link: '/components/toastProvider/toastProvider.md' },
{ text: 'Toast Provider', link: '/components/toastProvider/toastProvider.md' }
]
}
@@ -74,18 +82,21 @@ function getUtils() {
export default defineConfig({
title: 'Flowbite Vue 3',
cleanUrls: 'without-subfolders',
head: [['link', { rel: 'icon', type: 'image/svg', href: '/assets/logo.svg' }]],
head: [
['link', { rel: "icon", type: "image/svg", href: "/assets/logo.svg"}],
],
themeConfig: {
sidebar: buildSidebar(),
logo: '/assets/logo.svg',
socialLinks: [
{ icon: 'github', link: 'https://github.com/themesberg/flowbite-vue' },
{ icon: 'discord', link: 'https://discord.gg/4eeurUVvTy' },
{ icon: 'discord', link: 'https://discord.gg/4eeurUVvTy' }
],
footer: {
message: 'Released under the MIT License.',
copyright: 'Copyright © 2022 Flowbite™',
copyright: 'Copyright © 2022 Flowbite™'
},
},
})

222
docs/components/table.md
View File

@@ -1,15 +1,219 @@
<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>
# Vue Table Component - Flowbite
```vue
<script setup>
import { Table } from 'flowbite-vue'
</script>
<template>
<Table></Table>
</template>
```
#### Button groups are a Tailwind CSS powered set of buttons sticked together in a horizontal line
---
:::tip
Original reference: [https://flowbite.com/docs/components/tables/](https://flowbite.com/docs/components/tables/)
:::
## Basic example
<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>
```

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

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

43
docs/components/table/examples/TableHoverableExample.vue Normal file
View 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>

43
docs/components/table/examples/TableStripedColumnsExample.vue Normal file
View File

@@ -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
View 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>

116
package-lock.json generated
View File

@@ -1,12 +1,12 @@
{
"name": "flowbite-vue",
"version": "0.0.9",
"version": "0.0.10",
"lockfileVersion": 2,
"requires": true,
"packages": {
"": {
"name": "flowbite-vue",
"version": "0.0.9",
"version": "0.0.10",
"license": "MIT",
"dependencies": {
"@vueuse/core": "9.3.0",
@@ -42,8 +42,8 @@
"vue-tsc": "0.30.0"
},
"engines": {
"node": "14.x",
"npm": "8.x"
"node": ">=14.x",
"npm": ">=6.x"
},
"peerDependencies": {
"tailwindcss": "^3",
@@ -357,15 +357,15 @@
}
},
"node_modules/@eslint/eslintrc": {
"version": "1.3.3",
"resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-1.3.3.tgz",
"integrity": "sha512-uj3pT6Mg+3t39fvLrj8iuCIJ38zKO9FpGtJ4BBJebJhEwjoT+KLVNCcHT5QC9NGRIEi7fZ0ZR8YRb884auB4Lg==",
"version": "1.4.0",
"resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-1.4.0.tgz",
"integrity": "sha512-7yfvXy6MWLgWSFsLhz5yH3iQ52St8cdUY6FoGieKkRDVxuxmrNuUetIuu6cmjNWwniUHiWXjxCr5tTXDrbYS5A==",
"dev": true,
"dependencies": {
"ajv": "^6.12.4",
"debug": "^4.3.2",
"espree": "^9.4.0",
"globals": "^13.15.0",
"globals": "^13.19.0",
"ignore": "^5.2.0",
"import-fresh": "^3.2.1",
"js-yaml": "^4.1.0",
@@ -393,9 +393,9 @@
}
},
"node_modules/@humanwhocodes/config-array": {
"version": "0.11.7",
"resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.7.tgz",
"integrity": "sha512-kBbPWzN8oVMLb0hOUYXhmxggL/1cJE6ydvjDIGi9EnAGUyA7cLVKQg+d/Dsm+KZwx2czGHrCmMVLiyg8s5JPKw==",
"version": "0.11.8",
"resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.8.tgz",
"integrity": "sha512-UybHIJzJnR5Qc/MsD9Kr+RpO2h+/P1GhOwdiLPXK5TWk5sgTdu88bTD9UP+CKbPPh5Rni1u0GjAdYQLemG8g+g==",
"dev": true,
"dependencies": {
"@humanwhocodes/object-schema": "^1.2.1",
@@ -2811,9 +2811,9 @@
}
},
"node_modules/globals": {
"version": "13.18.0",
"resolved": "https://registry.npmjs.org/globals/-/globals-13.18.0.tgz",
"integrity": "sha512-/mR4KI8Ps2spmoc0Ulu9L7agOF0du1CZNQ3dke8yItYlyKNmGrkONemBbd6V8UTc1Wgcqn21t3WYB7dbRmh6/A==",
"version": "13.19.0",
"resolved": "https://registry.npmjs.org/globals/-/globals-13.19.0.tgz",
"integrity": "sha512-dkQ957uSRWHw7CFXLUtUHQI3g3aWApYhfNR2O6jn/907riyTYKVBmxYVROkBcY614FSSeSJh7Xm7SrUWCxvJMQ==",
"dev": true,
"dependencies": {
"type-fest": "^0.20.2"
@@ -4768,14 +4768,14 @@
"dev": true
},
"node_modules/vitepress/node_modules/@vueuse/core": {
"version": "9.6.0",
"resolved": "https://registry.npmjs.org/@vueuse/core/-/core-9.6.0.tgz",
"integrity": "sha512-qGUcjKQXHgN+jqXEgpeZGoxdCbIDCdVPz3QiF1uyecVGbMuM63o96I1GjYx5zskKgRI0FKSNsVWM7rwrRMTf6A==",
"version": "9.7.0",
"resolved": "https://registry.npmjs.org/@vueuse/core/-/core-9.7.0.tgz",
"integrity": "sha512-/AGY/t7jJPxCyRoVTygNKoroTiCvRaaZIW+yeSlBCnI7QRpQ9cvXNTdNaSl3GvSyFbn83+XwZwEZvI1OpQfeGw==",
"dev": true,
"dependencies": {
"@types/web-bluetooth": "^0.0.16",
"@vueuse/metadata": "9.6.0",
"@vueuse/shared": "9.6.0",
"@vueuse/metadata": "9.7.0",
"@vueuse/shared": "9.7.0",
"vue-demi": "*"
},
"funding": {
@@ -4809,18 +4809,18 @@
}
},
"node_modules/vitepress/node_modules/@vueuse/metadata": {
"version": "9.6.0",
"resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-9.6.0.tgz",
"integrity": "sha512-sIC8R+kWkIdpi5X2z2Gk8TRYzmczDwHRhEFfCu2P+XW2JdPoXrziqsGpDDsN7ykBx4ilwieS7JUIweVGhvZ93w==",
"version": "9.7.0",
"resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-9.7.0.tgz",
"integrity": "sha512-M7WsAgw28FNtTH0bzsGuHEtJOPJqPpyeHS6PHq+8UesLgNjZ9waMAntiUrgUQlxt09M4i2lH7y9sRi0jkfeXGA==",
"dev": true,
"funding": {
"url": "https://github.com/sponsors/antfu"
}
},
"node_modules/vitepress/node_modules/@vueuse/shared": {
"version": "9.6.0",
"resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-9.6.0.tgz",
"integrity": "sha512-/eDchxYYhkHnFyrb00t90UfjCx94kRHxc7J1GtBCqCG4HyPMX+krV9XJgVtWIsAMaxKVU4fC8NSUviG1JkwhUQ==",
"version": "9.7.0",
"resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-9.7.0.tgz",
"integrity": "sha512-pwmt1y3TJ2s5KqWmkv9ZKEV59GwuZQZk8XLiU+hGswz0jej318ozbea9E4A/A50ksyM26swSFr7sZ9llNPsZHg==",
"dev": true,
"dependencies": {
"vue-demi": "*"
@@ -4988,9 +4988,9 @@
}
},
"node_modules/vscode-languageserver-textdocument": {
"version": "1.0.7",
"resolved": "https://registry.npmjs.org/vscode-languageserver-textdocument/-/vscode-languageserver-textdocument-1.0.7.tgz",
"integrity": "sha512-bFJH7UQxlXT8kKeyiyu41r22jCZXG8kuuVVA33OEJn1diWOZK5n8zBSPZFHVBOu8kXZ6h0LIRhf5UnCo61J4Hg==",
"version": "1.0.8",
"resolved": "https://registry.npmjs.org/vscode-languageserver-textdocument/-/vscode-languageserver-textdocument-1.0.8.tgz",
"integrity": "sha512-1bonkGqQs5/fxGT5UchTgjGVnfysL0O8v1AYMBjqTbWQTFn721zaPGDYFkOKtfDgFiSgXM3KwaG3FMGfW4Ed9Q==",
"dev": true
},
"node_modules/vscode-languageserver-types": {
@@ -5048,9 +5048,9 @@
}
},
"node_modules/vscode-uri": {
"version": "3.0.6",
"resolved": "https://registry.npmjs.org/vscode-uri/-/vscode-uri-3.0.6.tgz",
"integrity": "sha512-fmL7V1eiDBFRRnu+gfRWTzyPpNIHJTc4mWnFkwBUmO9U3KPgJAmTx7oxi2bl/Rh6HLdU7+4C9wlj0k2E4AdKFQ==",
"version": "3.0.7",
"resolved": "https://registry.npmjs.org/vscode-uri/-/vscode-uri-3.0.7.tgz",
"integrity": "sha512-eOpPHogvorZRobNqJGhapa0JdwaxpjVvyBp0QIUMRMSf8ZAlqOdEquKuRmw9Qwu0qXtJIWqFtMkmvJjUZmMjVA==",
"dev": true
},
"node_modules/vscode-vue-languageservice": {
@@ -5641,15 +5641,15 @@
"optional": true
},
"@eslint/eslintrc": {
"version": "1.3.3",
"resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-1.3.3.tgz",
"integrity": "sha512-uj3pT6Mg+3t39fvLrj8iuCIJ38zKO9FpGtJ4BBJebJhEwjoT+KLVNCcHT5QC9NGRIEi7fZ0ZR8YRb884auB4Lg==",
"version": "1.4.0",
"resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-1.4.0.tgz",
"integrity": "sha512-7yfvXy6MWLgWSFsLhz5yH3iQ52St8cdUY6FoGieKkRDVxuxmrNuUetIuu6cmjNWwniUHiWXjxCr5tTXDrbYS5A==",
"dev": true,
"requires": {
"ajv": "^6.12.4",
"debug": "^4.3.2",
"espree": "^9.4.0",
"globals": "^13.15.0",
"globals": "^13.19.0",
"ignore": "^5.2.0",
"import-fresh": "^3.2.1",
"js-yaml": "^4.1.0",
@@ -5671,9 +5671,9 @@
}
},
"@humanwhocodes/config-array": {
"version": "0.11.7",
"resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.7.tgz",
"integrity": "sha512-kBbPWzN8oVMLb0hOUYXhmxggL/1cJE6ydvjDIGi9EnAGUyA7cLVKQg+d/Dsm+KZwx2czGHrCmMVLiyg8s5JPKw==",
"version": "0.11.8",
"resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.8.tgz",
"integrity": "sha512-UybHIJzJnR5Qc/MsD9Kr+RpO2h+/P1GhOwdiLPXK5TWk5sgTdu88bTD9UP+CKbPPh5Rni1u0GjAdYQLemG8g+g==",
"dev": true,
"requires": {
"@humanwhocodes/object-schema": "^1.2.1",
@@ -7400,9 +7400,9 @@
}
},
"globals": {
"version": "13.18.0",
"resolved": "https://registry.npmjs.org/globals/-/globals-13.18.0.tgz",
"integrity": "sha512-/mR4KI8Ps2spmoc0Ulu9L7agOF0du1CZNQ3dke8yItYlyKNmGrkONemBbd6V8UTc1Wgcqn21t3WYB7dbRmh6/A==",
"version": "13.19.0",
"resolved": "https://registry.npmjs.org/globals/-/globals-13.19.0.tgz",
"integrity": "sha512-dkQ957uSRWHw7CFXLUtUHQI3g3aWApYhfNR2O6jn/907riyTYKVBmxYVROkBcY614FSSeSJh7Xm7SrUWCxvJMQ==",
"dev": true,
"requires": {
"type-fest": "^0.20.2"
@@ -8801,14 +8801,14 @@
"dev": true
},
"@vueuse/core": {
"version": "9.6.0",
"resolved": "https://registry.npmjs.org/@vueuse/core/-/core-9.6.0.tgz",
"integrity": "sha512-qGUcjKQXHgN+jqXEgpeZGoxdCbIDCdVPz3QiF1uyecVGbMuM63o96I1GjYx5zskKgRI0FKSNsVWM7rwrRMTf6A==",
"version": "9.7.0",
"resolved": "https://registry.npmjs.org/@vueuse/core/-/core-9.7.0.tgz",
"integrity": "sha512-/AGY/t7jJPxCyRoVTygNKoroTiCvRaaZIW+yeSlBCnI7QRpQ9cvXNTdNaSl3GvSyFbn83+XwZwEZvI1OpQfeGw==",
"dev": true,
"requires": {
"@types/web-bluetooth": "^0.0.16",
"@vueuse/metadata": "9.6.0",
"@vueuse/shared": "9.6.0",
"@vueuse/metadata": "9.7.0",
"@vueuse/shared": "9.7.0",
"vue-demi": "*"
},
"dependencies": {
@@ -8822,15 +8822,15 @@
}
},
"@vueuse/metadata": {
"version": "9.6.0",
"resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-9.6.0.tgz",
"integrity": "sha512-sIC8R+kWkIdpi5X2z2Gk8TRYzmczDwHRhEFfCu2P+XW2JdPoXrziqsGpDDsN7ykBx4ilwieS7JUIweVGhvZ93w==",
"version": "9.7.0",
"resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-9.7.0.tgz",
"integrity": "sha512-M7WsAgw28FNtTH0bzsGuHEtJOPJqPpyeHS6PHq+8UesLgNjZ9waMAntiUrgUQlxt09M4i2lH7y9sRi0jkfeXGA==",
"dev": true
},
"@vueuse/shared": {
"version": "9.6.0",
"resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-9.6.0.tgz",
"integrity": "sha512-/eDchxYYhkHnFyrb00t90UfjCx94kRHxc7J1GtBCqCG4HyPMX+krV9XJgVtWIsAMaxKVU4fC8NSUviG1JkwhUQ==",
"version": "9.7.0",
"resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-9.7.0.tgz",
"integrity": "sha512-pwmt1y3TJ2s5KqWmkv9ZKEV59GwuZQZk8XLiU+hGswz0jej318ozbea9E4A/A50ksyM26swSFr7sZ9llNPsZHg==",
"dev": true,
"requires": {
"vue-demi": "*"
@@ -8938,9 +8938,9 @@
}
},
"vscode-languageserver-textdocument": {
"version": "1.0.7",
"resolved": "https://registry.npmjs.org/vscode-languageserver-textdocument/-/vscode-languageserver-textdocument-1.0.7.tgz",
"integrity": "sha512-bFJH7UQxlXT8kKeyiyu41r22jCZXG8kuuVVA33OEJn1diWOZK5n8zBSPZFHVBOu8kXZ6h0LIRhf5UnCo61J4Hg==",
"version": "1.0.8",
"resolved": "https://registry.npmjs.org/vscode-languageserver-textdocument/-/vscode-languageserver-textdocument-1.0.8.tgz",
"integrity": "sha512-1bonkGqQs5/fxGT5UchTgjGVnfysL0O8v1AYMBjqTbWQTFn721zaPGDYFkOKtfDgFiSgXM3KwaG3FMGfW4Ed9Q==",
"dev": true
},
"vscode-languageserver-types": {
@@ -8996,9 +8996,9 @@
}
},
"vscode-uri": {
"version": "3.0.6",
"resolved": "https://registry.npmjs.org/vscode-uri/-/vscode-uri-3.0.6.tgz",
"integrity": "sha512-fmL7V1eiDBFRRnu+gfRWTzyPpNIHJTc4mWnFkwBUmO9U3KPgJAmTx7oxi2bl/Rh6HLdU7+4C9wlj0k2E4AdKFQ==",
"version": "3.0.7",
"resolved": "https://registry.npmjs.org/vscode-uri/-/vscode-uri-3.0.7.tgz",
"integrity": "sha512-eOpPHogvorZRobNqJGhapa0JdwaxpjVvyBp0QIUMRMSf8ZAlqOdEquKuRmw9Qwu0qXtJIWqFtMkmvJjUZmMjVA==",
"dev": true
},
"vscode-vue-languageservice": {

6
package.json
View File

@@ -1,6 +1,6 @@
{
"name": "flowbite-vue",
"version": "0.0.9",
"version": "0.0.10",
"repository": "https://github.com/themesberg/flowbite-vue.git",
"author": "themesberg",
"license": "MIT",
@@ -74,7 +74,7 @@
"tailwindcss": "^3"
},
"engines": {
"node": "14.x",
"npm": "8.x"
"node": ">=14.x",
"npm": ">=6.x"
}
}

5
src/components/Accordion/AccordionContent.vue
View File

@@ -12,11 +12,10 @@
<script lang="ts" setup>
import { useAccordionContentClasses } from '@/components/Accordion/composables/useAccordionContentClasses'
import { onMounted, ref } from 'vue'
import type { ComputedRef } from 'vue'
const isLoaded = ref(false)
const content = ref()
let contentClasses
let contentClasses: ComputedRef
onMounted(() => {
const accordionHeaderClasses = useAccordionContentClasses(content)

3
src/components/Accordion/AccordionHeader.vue
View File

@@ -23,6 +23,7 @@
<script lang="ts" setup>
import { useAccordionState } from '@/components/Accordion/composables/useAccordionState'
import { computed, onMounted, ref } from 'vue'
import type { ComputedRef } from 'vue'
import { useAccordionHeaderClasses } from '@/components/Accordion/composables/useAccordionHeaderClasses'
const isLoaded = ref(false)
@@ -34,7 +35,7 @@ const { accordionsStates } = useAccordionState()
const accordionState = computed(() => accordionsStates[accordionId.value])
const panelState = computed(() => accordionState.value.panels[panelId.value])
let headerClasses, arrowClasses
let headerClasses: ComputedRef, arrowClasses: ComputedRef
function commonToggleItem() {
const isSelectedVisible = panelState.value.isVisible
for (const panelIndex in accordionState.value.panels) {

8
src/components/Carousel/Carousel.vue
View File

@@ -5,13 +5,13 @@
<!-- Item 1 -->
<!-- duration-700 ease-in-out-->
<div :class="index === currentPicture ? 'z-30' : 'z-0'"
v-for="(picture, index) in pictures" :key="picture" class="absolute inset-0 -translate-y-0">
v-for="(picture, index) in pictures" :key="index" class="absolute inset-0 -translate-y-0">
<img :src="picture.src" class="block absolute top-1/2 left-1/2 w-full -translate-x-1/2 -translate-y-1/2" :alt="picture.alt">
</div>
</div>
<!-- Slider indicators -->
<div v-if="indicators" class="flex absolute bottom-5 left-1/2 z-30 space-x-3 -translate-x-1/2">
<button v-for="(picture, index) in pictures" :key="picture" type="button" :class="index === currentPicture ? 'bg-white' : 'bg-white/50'" class="w-3 h-3 rounded-full bg-white" aria-current="false" :aria-label="'Slide ' + index" @click.prevent="slideTo(index)"></button>
<button v-for="(picture, index) in pictures" :key="index" type="button" :class="index === currentPicture ? 'bg-white' : 'bg-white/50'" class="w-3 h-3 rounded-full bg-white" aria-current="false" :aria-label="'Slide ' + index" @click.prevent="slideTo(index)"></button>
</div>
<!-- Slider controls -->
<button v-if="controls" @click.prevent="previousPicture" type="button" class="flex absolute top-0 left-0 z-30 justify-center items-center px-4 h-full cursor-pointer group focus:outline-none" data-carousel-prev>
@@ -30,10 +30,12 @@
</template>
<script lang="ts" setup>
import { onMounted, ref } from 'vue'
import type { PropType } from 'vue'
import type { PictureItem } from '@/components/Carousel/types'
const props = defineProps({
pictures: {
type: Array,
type: Array as PropType<PictureItem[]>,
default() {
return [
{

4
src/components/Carousel/types.ts Normal file
View File

@@ -0,0 +1,4 @@
export type PictureItem = {
src: string,
alt?: string
}

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

@@ -1,104 +1,29 @@
<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'
import { provide } from 'vue'
const props = defineProps({
children: {
type: Array,
default() {
return []
},
},
striped: {
type: Boolean,
default: false,
},
stripedColumns: {
type: Boolean,
default: false,
},
hoverable: {
type: Boolean,
default: false,
},
className: {
type: String,
default: '',
},
})
provide('striped', props.striped)
provide('hoverable', props.hoverable)
provide('stripedColumns', props.stripedColumns)
</script>

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>

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

10
src/components/Table/TableHeadCell.vue Normal file
View 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
View 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
View 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
View 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
View 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,
}
}

5
src/index.ts
View File

@@ -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 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 TimelineItem } from './components/Timeline/TimelineItem.vue'
export { default as TimelinePoint } from './components/Timeline/TimelinePoint.vue'