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

feat: more examples

Browse Source
This commit is contained in:
Alexandr
2022-06-30 14:29:38 +03:00
parent e74bf6951e
commit 169e3b2e9f
10 changed files with 590 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

385
README.md
View File

@@ -0,0 +1,385 @@
<div align="center">
<h1>:construction: flowbite-vue (unreleased) :construction:</h1>
<p>
<a href="https://flowbite.com">
<img alt="Flowbite - Tailwind CSS components" width="350" src="https://flowbite.s3.amazonaws.com/github/logo-github.png">
</a>
</p>
<p>
Build websites even faster with components on top of Vue and Tailwind CSS
</p>
<p>
<a href="https://codecov.io/gh/themesberg/flowbite-vue">
<img src="https://codecov.io/gh/themesberg/flowbite-vue/branch/main/graph/badge.svg?token=wnw40SeY4k"/>
</a>
<a href="https://discord.com/invite/4eeurUVvTy">
<img src="https://img.shields.io/discord/902911619032576090?color=%237289da&label=Discord" alt="Discord">
</a>
<a href="https://www.npmjs.com/package/flowbite-vue">
<img src="https://img.shields.io/npm/dt/flowbite-vue.svg" alt="Total Downloads">
</a>
<a href="https://badge.fury.io/js/flowbite-vue">
<img alt="Latest release" src="https://badge.fury.io/js/flowbite-vue.svg">
</a>
<a href="https://flowbite.com/getting-started/license/">
<img src="https://img.shields.io/badge/license-MIT-blue" alt="Licenese">
</a>
</p>
</div>
---
### `flowbite-vue` is an open source collection of UI components, built in Vue, with utility classes from Tailwind CSS that you can use as a starting point for user interfaces and websites.
## Table of Contents
- [Documentation](#documentation)
- [Getting started](#getting-started)
- [Require via `npm`](#require-via--npm-)
- [Include via CDN](#include-via-cdn)
- [Components](#components)
- [Community](#community)
- [Contributing](#contributing)
- [Figma](#figma)
- [Copyright and license](#copyright-and-license)
## Documentation
Documentation for `flowbite-vue` is not yet finished.
If you want to browse the components, visit [flowbite.com](https://flowbite.com/).
If you want to learn more about Flowbite, visit [Flowbite docs](https://flowbite.com/getting-started/introduction/).
## Getting started
To use `flowbite-vue`, you just need to setup `flowbite` normally and install `flowbite-vue` from `npm`.
`flowbite` can be included as a plugin into an existing Tailwind CSS project.
### Require via `npm`
Make sure that you have <a href="https://nodejs.org/en/" rel="nofollow" >Node.js</a> and <a href="https://tailwindcss.com/" rel="nofollow" >Tailwind CSS</a> installed.
1. Install `flowbite` as a dependency using `npm` by running the following command:
```bash
npm i flowbite flowbite-vue
```
2. Require `flowbite` as a plugin inside the `tailwind.config.js` file:
```javascript
module.exports = {
content: [
...,
'node_modules/flowbite-vue/**/*.{js,jsx,ts,tsx}'
],
plugins: [..., require('flowbite/plugin')],
};
```
## Components
<table>
<tr>
<td width="33.3333%">:construction: Alerts</td>
<td width="33.3333%">:construction: Badge</td>
<td width="33.3333%">:construction: Breadcrumbs</td>
</tr>
<tr>
<td width="33.3333%">
<a href="https://flowbite-react.com/alerts/">
<img alt="Tailwind CSS Alerts" src="https://flowbite.s3.amazonaws.com/github/alerts.jpg">
</a>
</td>
<td width="33.3333%">
<a href="https://flowbite-react.com/badges/">
<img alt="Tailwind CSS Badge" src="https://flowbite.s3.amazonaws.com/github/badge.jpg">
</a>
</td>
<td width="33.3333%">
<a href="https://flowbite-react.com/breadcrumb/">
<img alt="Tailwind CSS Breadcrumbs" src="https://flowbite.s3.amazonaws.com/github/breadcrumbs.jpg">
</a>
</td>
</tr>
<tr>
<td width="33.3333%">:construction: Buttons</td>
<td width="33.3333%">:construction: Button group</td>
<td width="33.3333%">:construction: Cards</td>
</tr>
<tr>
<td width="33.3333%">
<a href="https://flowbite-react.com/buttons/">
<img alt="Tailwind CSS Buttons" src="https://flowbite.s3.amazonaws.com/github/buttons.jpg">
</a>
</td>
<td width="33.3333%">
<a href="https://flowbite-react.com/button-group/">
<img alt="Tailwind CSS Button Group" src="https://flowbite.s3.amazonaws.com/github/button-group.jpg">
</a>
</td>
<td width="33.3333%">
<a href="https://flowbite-react.com/card/">
<img alt="Tailwind CSS Cards" src="https://flowbite.s3.amazonaws.com/github/cards.jpg">
</a>
</td>
</tr>
<tr>
<td width="33.3333%">:construction: Dropdown</td>
<td width="33.3333%">:construction: Forms</td>
<td width="33.3333%">:construction: List group</td>
</tr>
<tr>
<td width="33.3333%">
<a href="https://flowbite-react.com/dropdown/">
<img alt="Tailwind CSS Dropdown" src="https://flowbite.s3.amazonaws.com/github/dropdown.jpg">
</a>
</td>
<td width="33.3333%">
<a href="https://flowbite-react.com/forms/">
<img alt="Tailwind CSS Forms" src="https://flowbite.s3.amazonaws.com/github/forms.jpg">
</a>
</td>
<td width="33.3333%">
<a href="https://flowbite-react.com/list-group/">
<img alt="Tailwind CSS List group" src="https://flowbite.s3.amazonaws.com/github/list-group.jpg">
</a>
</td>
</tr>
<tr>
<td width="33.3333%">:construction: Typography</td>
<td width="33.3333%">:construction: Modal</td>
<td width="33.3333%">:construction: Tabs</td>
</tr>
<tr>
<td width="33.3333%">
<a href="https://flowbite.com/docs/components/typography/">
<img alt="Tailwind CSS Typography" src="https://flowbite.s3.amazonaws.com/github/typography.jpg">
</a>
</td>
<td width="33.3333%">
<a href="https://flowbite-react.com/modal/">
<img alt="Tailwind CSS Modal" src="https://flowbite.s3.amazonaws.com/github/modal.jpg">
</a>
</td>
<td width="33.3333%">
<a href="https://flowbite-react.com/tabs/">
<img alt="Tailwind CSS Tabs" src="https://flowbite.s3.amazonaws.com/github/tabs.jpg">
</a>
</td>
</tr>
<tr>
<td width="33.3333%">:construction: Navbar</td>
<td width="33.3333%">:construction: Pagination</td>
<td width="33.3333%">:construction: Timeline</td>
</tr>
<tr>
<td width="33.3333%">
<a href="https://flowbite-react.com/navbars/">
<img alt="Tailwind CSS Navbar" src="https://flowbite.s3.amazonaws.com/github/navbar.jpg">
</a>
</td>
<td width="33.3333%">
<a href="https://flowbite-react.com/pagination/">
<img alt="Tailwind CSS Pagination" src="https://flowbite.s3.amazonaws.com/github/pagination.jpg">
</a>
</td>
<td width="33.3333%">
<a href="https://flowbite-react.com/timeline/">
<img alt="Tailwind CSS Timeline" src="https://flowbite.s3.amazonaws.com/github/timeline.jpg">
</a>
</td>
</tr>
<tr>
<td width="33.3333%">:construction: Progress bar</td>
<td width="33.3333%">:construction: Tables</td>
<td width="33.3333%">:construction: Toast</td>
</tr>
<tr>
<td width="33.3333%">
<a href="https://flowbite-react.com/progress/">
<img alt="Tailwind CSS Progress Bar" src="https://flowbite.s3.amazonaws.com/github/progress.jpg">
</a>
</td>
<td width="33.3333%">
<a href="https://flowbite-react.com/tables/">
<img alt="Tailwind CSS Tables" src="https://flowbite.s3.amazonaws.com/github/tables.jpg">
</a>
</td>
<td width="33.3333%">
<a href="https://flowbite-react.com/toast/">
<img alt="Tailwind CSS Toast" src="https://flowbite.s3.amazonaws.com/github/toast.jpg">
</a>
</td>
</tr>
<tr>
<td width="33.3333%">:construction: Tooltips</td>
<td width="33.3333%">:construction: Datepicker</td>
<td width="33.3333%">:construction: Spinner</td>
</tr>
<tr>
<td width="33.3333%">
<a href="https://flowbite-react.com/tooltips/">
<img alt="Tailwind CSS Tooltips" src="https://flowbite.s3.amazonaws.com/github/tooltips.jpg">
</a>
</td>
<td width="33.3333%">
<a href="https://flowbite.com/docs/plugins/datepicker/">
<img alt="Tailwind CSS Datepicker" src="https://flowbite.s3.amazonaws.com/github/datepicker.jpg">
</a>
</td>
<td width="33.3333%">
<a href="https://flowbite-react.com/spinners/">
<img alt="Tailwind CSS Spinner" src="https://flowbite.s3.amazonaws.com/github/spinner.jpg">
</a>
</td>
</tr>
<tr>
<td width="33.3333%">:construction: Footer</td>
<td width="33.3333%">:construction: Accordion</td>
<td width="33.3333%">:construction: Sidebar</td>
</tr>
<tr>
<td width="33.3333%">
<a href="https://flowbite-react.com/footer/">
<img alt="Tailwind CSS Footer" src="https://flowbite.s3.amazonaws.com/github/footer.jpg">
</a>
</td>
<td width="33.3333%">
<a href="https://flowbite-react.com/accordion/">
<img alt="Tailwind CSS Accordion" src="https://flowbite.s3.amazonaws.com/github/accordion.jpg">
</a>
</td>
<td width="33.3333%">
<a href="https://flowbite-react.com/sidebar/">
<img alt="Tailwind CSS Sidebar" src="https://flowbite.s3.amazonaws.com/github/sidebar.jpg">
</a>
</td>
</tr>
<tr>
<td width="33.3333%">:construction: Carousel</td>
<td width="33.3333%">:construction: Avatar</td>
<td width="33.3333%">:construction: Rating</td>
</tr>
<tr>
<td width="33.3333%">
<a href="https://flowbite-react.com/carousel/">
<img alt="Tailwind CSS Carousel" src="https://flowbite.s3.amazonaws.com/github/carousel.jpg">
</a>
</td>
<td width="33.3333%">
<a href="https://flowbite-react.com/avatar/">
<img alt="Tailwind CSS Avatar" src="https://flowbite.s3.amazonaws.com/github/avatar.jpg">
</a>
</td>
<td width="33.3333%">
<a href="https://flowbite-react.com/rating/">
<img alt="Tailwind CSS Rating" src="https://flowbite.s3.amazonaws.com/github/rating.jpg">
</a>
</td>
</tr>
<tr>
<td width="33.3333%">:construction: Input Field</td>
<td width="33.3333%">:construction: File Input</td>
<td width="33.3333%">:construction: Search Input</td>
</tr>
<tr>
<td width="33.3333%">
<a href="https://flowbite-react.com/forms">
<img alt="Tailwind CSS Input Field" src="https://flowbite.s3.amazonaws.com/github/input-field.jpg">
</a>
</td>
<td width="33.3333%">
<a href="https://flowbite-react.com/forms#fileUpload">
<img alt="Tailwind CSS File Input" src="https://flowbite.s3.amazonaws.com/github/file-input.jpg">
</a>
</td>
<td width="33.3333%">
<a href="https://flowbite.com/docs/forms/search-input/">
<img alt="Tailwind CSS Search Input" src="https://flowbite.s3.amazonaws.com/github/search-input.jpg">
</a>
</td>
</tr>
<tr>
<td width="33.3333%">:construction: Select</td>
<td width="33.3333%">:construction: Textarea</td>
<td width="33.3333%">:construction: Checkbox</td>
</tr>
<tr>
<td width="33.3333%">
<a href="https://flowbite-react.com/forms#select">
<img alt="Tailwind CSS Select" src="https://flowbite.s3.amazonaws.com/github/select.jpg">
</a>
</td>
<td width="33.3333%">
<a href="https://flowbite-react.com/forms#textarea">
<img alt="Tailwind CSS Textarea" src="https://flowbite.s3.amazonaws.com/github/textarea.jpg">
</a>
</td>
<td width="33.3333%">
<a href="https://flowbite-react.com/forms#checkbox">
<img alt="Tailwind CSS Checkbox" src="https://flowbite.s3.amazonaws.com/github/checkbox.jpg">
</a>
</td>
</tr>
<tr>
<td width="33.3333%">:construction: Radio</td>
<td width="33.3333%">:construction: Toggle</td>
<td width="33.3333%">:construction: Range Slider</td>
</tr>
<tr>
<td width="33.3333%">
<a href="https://flowbite-react.com/forms#radio">
<img alt="Tailwind CSS Radio" src="https://flowbite.s3.amazonaws.com/github/radio.jpg">
</a>
</td>
<td width="33.3333%">
<a href="https://flowbite-react.com/forms#toggle">
<img alt="Tailwind CSS Toggle" src="https://flowbite.s3.amazonaws.com/github/toggle.jpg">
</a>
</td>
<td width="33.3333%">
<a href="https://flowbite.com/docs/forms/range/">
<img alt="Tailwind CSS Range Slider" src="https://flowbite.s3.amazonaws.com/github/range-slider.jpg">
</a>
</td>
</tr>
<tr>
<td width="33.3333%">:construction: Floating Label</td>
</tr>
<tr>
<td width="33.3333%">
<a href="https://flowbite.com/docs/forms/floating-label/">
<img alt="Tailwind CSS Floating Label" src="https://flowbite.s3.amazonaws.com/github/floating-label.jpg">
</a>
</td>
</tr>
</table>
## Community
If you need help or just want to discuss about the library join the community on Github:
⌨️ [Discuss about Flowbite on GitHub](https://github.com/themesberg/flowbite/discussions)
For casual chatting with others using the library:
💬 [Join the Flowbite Discord Server](https://discord.gg/4eeurUVvTy)
## Contributing
Thank you for your interest in helping! Visit our [guide on contributing](https://github.com/themesberg/flowbite-vue/blob/main/CONTRIBUTING.md) to get started.
## Figma
If you need the Figma files for the components you can check out our website for more information:
🎨 [Get access to the Figma design files](https://flowbite.com/figma/)
## Copyright and license
The Flowbite name and logos are trademarks of Crafty Dwarf Inc.
📝 [Read about the licensing terms](https://flowbite.com/getting-started/license/)

17
docs/guide/button/ButtonColorExample.vue Normal file
View File

@@ -0,0 +1,17 @@
<template>
<div class="inline-flex align-center gap-2 flex-wrap">
<Button color="default">Default</Button>
<Button color="alternative">Alternative</Button>
<Button color="dark">Dark</Button>
<Button color="light">Light</Button>
<Button color="green">Green</Button>
<Button color="red">Red</Button>
<Button color="yellow">Yellow</Button>
<Button color="purple">Purple</Button>
</div>
</template>
<script setup>
import { Button } from "../../../src/index";
</script>

8
docs/guide/button/ButtonExample.vue
View File

@@ -1,8 +0,0 @@
<template>
<Button variant="default">
button
</Button>
</template>
<script setup>
import { Button } from "../../../src/index";
</script>

17
docs/guide/button/ButtonPillExample.vue Normal file
View File

@@ -0,0 +1,17 @@
<template>
<div class="inline-flex align-center gap-2 flex-wrap">
<Button color="default" pill>Default</Button>
<Button color="alternative" pill>Alternative</Button>
<Button color="dark" pill>Dark</Button>
<Button color="light" pill>Light</Button>
<Button color="green" pill>Green</Button>
<Button color="red" pill>Red</Button>
<Button color="yellow" pill>Yellow</Button>
<Button color="purple" pill>Purple</Button>
</div>
</template>
<script setup>
import { Button } from "../../../src/index";
</script>

14
docs/guide/button/ButtonSizeExample.vue Normal file
View File

@@ -0,0 +1,14 @@
<template>
<div class="inline-flex items-center gap-2 flex-wrap">
<Button size="xs">Extra small - xs</Button>
<Button size="sm">Small - sm</Button>
<Button size="md">Medium - md</Button>
<Button size="lg">Large - lg</Button>
<Button size="xl">Extra Large - xl</Button>
</div>
</template>
<script setup>
import { Button } from "../../../src/index";
</script>

100
docs/guide/button/button.md
View File

@@ -1,7 +1,103 @@
<script setup>
import ButtonExample from './ButtonExample.vue'
import ButtonColorExample from './ButtonColorExample.vue';
import ButtonSizeExample from './ButtonSizeExample.vue';
import ButtonPillExample from './ButtonPillExample.vue';
</script>
# Button
<ButtonExample />
reference: [https://flowbite.com/docs/components/buttons/](https://flowbite.com/docs/components/buttons/)
## Props
### Color
```typescript
type ButtonVariant = 'default' | 'alternative' | 'dark' | 'light' | 'green' | 'red' | 'yellow' | 'purple'
defineProps({
color: {
type: String as PropType<ButtonVariant>,
default: 'default',
},
})
```
<ButtonColorExample />
```vue
<script setup>
import { Button } from 'flowbite-vue'
</script>
<template>
<Button color="default">Default</Button>
<Button color="alternative">Alternative</Button>
<Button color="dark">Dark</Button>
<Button color="light">Light</Button>
<Button color="green">Green</Button>
<Button color="red">Red</Button>
<Button color="yellow">Yellow</Button>
<Button color="purple">Purple</Button>
</template>
```
### Size
```typescript
type ButtonSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl'
defineProps({
size: {
type: String as PropType<ButtonSize>,
default: 'md',
},
})
```
<ButtonSizeExample />
```vue
<script setup>
import { Button } from 'flowbite-vue'
</script>
<template>
<Button size="xs">XS</Button>
<Button size="sm">SM</Button>
<Button size="md">MD</Button>
<Button size="lg">LG</Button>
<Button size="xl">XL</Button>
</template>
```
### Pill
```typescript
defineProps({
pill: {
type: Boolean,
default: false,
},
})
```
<ButtonPillExample />
```vue
<script setup>
import { Button } from 'flowbite-vue'
</script>
<template>
<Button color="default" pill>Default</Button>
<Button color="alternative" pill>Alternative</Button>
<Button color="dark" pill>Dark</Button>
<Button color="light" pill>Light</Button>
<Button color="green" pill>Green</Button>
<Button color="red" pill>Red</Button>
<Button color="yellow" pill>Yellow</Button>
<Button color="purple" pill>Purple</Button>
</template>
```

15
package-lock.json generated
View File

@@ -1,6 +1,6 @@
{
"name": "flowbite-vue",
"version": "0.4.1",
"version": "1.0.0",
"lockfileVersion": 1,
"requires": true,
"dependencies": {
@@ -689,6 +689,19 @@
"readdirp": "~3.6.0"
}
},
"class-names": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/class-names/-/class-names-1.0.0.tgz",
"integrity": "sha512-AQL0OLcu6D5hTwPcY78UgQ0JMS5cR1eYFV60C6V9WNMKVgyXi+CSGYuuWUAVo/6+Z2JRk6VBTn1XO5U94SqBww==",
"requires": {
"classnames": "^2.2.5"
}
},
"classnames": {
"version": "2.3.1",
"resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.1.tgz",
"integrity": "sha512-OlQdbZ7gLfGarSqxesMesDa5uz7KFbID8Kpq/SxIoNGDqY8lSYs0D+hhtBXhcdB3rcbXArFr7vlHheLk1voeNA=="
},
"color-convert": {
"version": "1.9.3",
"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",

3
package.json
View File

@@ -46,5 +46,8 @@
"plugins": {
"tailwindcss": {}
}
},
"dependencies": {
"class-names": "^1.0.0"
}
}

54
src/components/Button/Button.vue
View File

@@ -1,27 +1,55 @@
<template>
<button type="button" :class="buttonVariantClasses[variant]">
<button type="button" :class="bindClasses">
<slot />
</button>
</template>
<script lang="ts" setup>
export type ButtonVariant = 'default' | 'alternative' | 'dark' | 'light' | 'green' | 'red' | 'yellow' | 'purple'
import { computed } from 'vue'
import classNames from 'classnames'
defineProps({
variant: {
export type ButtonVariant = 'default' | 'alternative' | 'dark' | 'light' | 'green' | 'red' | 'yellow' | 'purple'
export type ButtonSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl'
const props = defineProps({
color: {
type: String as PropType<ButtonVariant>,
default: 'default',
},
size: {
type: String as PropType<ButtonSize>,
default: 'md',
},
pill: {
type: Boolean,
default: false,
}
})
const buttonVariantClasses: Record<ButtonVariant, string[]> = {
default: 'text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 mr-2 mb-2 dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none dark:focus:ring-blue-800'.split(' '),
alternative: 'py-2.5 px-5 text-sm font-medium text-gray-900 focus:outline-none bg-white rounded-lg border border-gray-200 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700'.split(' '),
dark: 'text-white bg-gray-800 hover:bg-gray-900 focus:outline-none focus:ring-4 focus:ring-gray-300 font-medium rounded-lg text-sm px-5 py-2.5 mr-2 mb-2 dark:bg-gray-800 dark:hover:bg-gray-700 dark:focus:ring-gray-700 dark:border-gray-700'.split(' '),
light: 'text-gray-900 bg-white border border-gray-300 focus:outline-none hover:bg-gray-100 focus:ring-4 focus:ring-gray-200 font-medium rounded-lg text-sm px-5 py-2.5 mr-2 mb-2 dark:bg-gray-800 dark:text-white dark:border-gray-600 dark:hover:bg-gray-700 dark:hover:border-gray-600 dark:focus:ring-gray-700'.split(' '),
green: 'focus:outline-none text-white bg-green-700 hover:bg-green-800 focus:ring-4 focus:ring-green-300 font-medium rounded-lg text-sm px-5 py-2.5 mr-2 mb-2 dark:bg-green-600 dark:hover:bg-green-700 dark:focus:ring-green-800'.split(' '),
red: 'focus:outline-none text-white bg-red-700 hover:bg-red-800 focus:ring-4 focus:ring-red-300 font-medium rounded-lg text-sm px-5 py-2.5 mr-2 mb-2 dark:bg-red-600 dark:hover:bg-red-700 dark:focus:ring-red-900'.split(' '),
yellow: 'focus:outline-none text-white bg-yellow-400 hover:bg-yellow-500 focus:ring-4 focus:ring-yellow-300 font-medium rounded-lg text-sm px-5 py-2.5 mr-2 mb-2 dark:focus:ring-yellow-900'.split(' '),
purple: 'focus:outline-none text-white bg-purple-700 hover:bg-purple-800 focus:ring-4 focus:ring-purple-300 font-medium rounded-lg text-sm px-5 py-2.5 mb-2 dark:bg-purple-600 dark:hover:bg-purple-700 dark:focus:ring-purple-900'.split(' ')
const bindClasses = computed(() => {
return classNames(
buttonColorClasses[props.color],
buttonSizeClasses[props.size],
props.pill ? 'rounded-full' : '',
)
})
const buttonColorClasses: Record<ButtonVariant, string[]> = {
default: 'text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none dark:focus:ring-blue-800'.split(' '),
alternative: 'font-medium text-gray-900 focus:outline-none bg-white rounded-lg border border-gray-200 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700'.split(' '),
dark: 'text-white bg-gray-800 hover:bg-gray-900 focus:outline-none focus:ring-4 focus:ring-gray-300 font-medium rounded-lg dark:bg-gray-800 dark:hover:bg-gray-700 dark:focus:ring-gray-700 dark:border-gray-700'.split(' '),
light: 'text-gray-900 bg-white border border-gray-300 focus:outline-none hover:bg-gray-100 focus:ring-4 focus:ring-gray-200 font-medium rounded-lg dark:bg-gray-800 dark:text-white dark:border-gray-600 dark:hover:bg-gray-700 dark:hover:border-gray-600 dark:focus:ring-gray-700'.split(' '),
green: 'focus:outline-none text-white bg-green-700 hover:bg-green-800 focus:ring-4 focus:ring-green-300 font-medium rounded-lg dark:bg-green-600 dark:hover:bg-green-700 dark:focus:ring-green-800'.split(' '),
red: 'focus:outline-none text-white bg-red-700 hover:bg-red-800 focus:ring-4 focus:ring-red-300 font-medium rounded-lg dark:bg-red-600 dark:hover:bg-red-700 dark:focus:ring-red-900'.split(' '),
yellow: 'focus:outline-none text-white bg-yellow-400 hover:bg-yellow-500 focus:ring-4 focus:ring-yellow-300 font-medium rounded-lg dark:focus:ring-yellow-900'.split(' '),
purple: 'focus:outline-none text-white bg-purple-700 hover:bg-purple-800 focus:ring-4 focus:ring-purple-300 font-medium rounded-lg dark:bg-purple-600 dark:hover:bg-purple-700 dark:focus:ring-purple-900'.split(' ')
}
const buttonSizeClasses: Record<ButtonVariant, string[]> = {
xs: 'text-xs px-2 py-1',
sm: 'text-sm px-3 py-1.5',
md: 'text-sm px-4 py-2',
lg: 'text-base px-5 py-2.5',
xl: 'text-base px-6 py-3'
}
</script>

2
tailwind.config.js
View File

@@ -1,7 +1,7 @@
module.exports = {
content: [
'./docs/.vitepress/**/*.{js,ts,vue}',
'./docs/**/*.md',
'./docs/**/*.{js,ts,vue,md}',
'./src/**/*.{js,ts,vue}',
],