From 169e3b2e9f9ae684096feab8eda684b42d592ce9 Mon Sep 17 00:00:00 2001 From: Alexandr Date: Thu, 30 Jun 2022 14:29:38 +0300 Subject: [PATCH] feat: more examples --- README.md | 385 +++++++++++++++++++++++ docs/guide/button/ButtonColorExample.vue | 17 + docs/guide/button/ButtonExample.vue | 8 - docs/guide/button/ButtonPillExample.vue | 17 + docs/guide/button/ButtonSizeExample.vue | 14 + docs/guide/button/button.md | 100 +++++- package-lock.json | 15 +- package.json | 3 + src/components/Button/Button.vue | 54 +++- tailwind.config.js | 2 +- 10 files changed, 590 insertions(+), 25 deletions(-) create mode 100644 docs/guide/button/ButtonColorExample.vue delete mode 100644 docs/guide/button/ButtonExample.vue create mode 100644 docs/guide/button/ButtonPillExample.vue create mode 100644 docs/guide/button/ButtonSizeExample.vue diff --git a/README.md b/README.md index e69de29..8916f96 100644 --- a/README.md +++ b/README.md @@ -0,0 +1,385 @@ +
+

:construction: flowbite-vue (unreleased) :construction:

+

+ + Flowbite - Tailwind CSS components + +

+

+ Build websites even faster with components on top of Vue and Tailwind CSS +

+

+ + + + + Discord + + + Total Downloads + + + Latest release + + + Licenese + +

+
+ +--- + +### `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 Node.js and Tailwind CSS 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 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
:construction: Alerts:construction: Badge:construction: Breadcrumbs
+ + Tailwind CSS Alerts + + + + Tailwind CSS Badge + + + + Tailwind CSS Breadcrumbs + +
:construction: Buttons:construction: Button group:construction: Cards
+ + Tailwind CSS Buttons + + + + Tailwind CSS Button Group + + + + Tailwind CSS Cards + +
:construction: Dropdown:construction: Forms:construction: List group
+ + Tailwind CSS Dropdown + + + + Tailwind CSS Forms + + + + Tailwind CSS List group + +
:construction: Typography:construction: Modal:construction: Tabs
+ + Tailwind CSS Typography + + + + Tailwind CSS Modal + + + + Tailwind CSS Tabs + +
:construction: Navbar:construction: Pagination:construction: Timeline
+ + Tailwind CSS Navbar + + + + Tailwind CSS Pagination + + + + Tailwind CSS Timeline + +
:construction: Progress bar:construction: Tables:construction: Toast
+ + Tailwind CSS Progress Bar + + + + Tailwind CSS Tables + + + + Tailwind CSS Toast + +
:construction: Tooltips:construction: Datepicker:construction: Spinner
+ + Tailwind CSS Tooltips + + + + Tailwind CSS Datepicker + + + + Tailwind CSS Spinner + +
:construction: Footer:construction: Accordion:construction: Sidebar
+ + Tailwind CSS Footer + + + + Tailwind CSS Accordion + + + + Tailwind CSS Sidebar + +
:construction: Carousel:construction: Avatar:construction: Rating
+ + Tailwind CSS Carousel + + + + Tailwind CSS Avatar + + + + Tailwind CSS Rating + +
:construction: Input Field:construction: File Input:construction: Search Input
+ + Tailwind CSS Input Field + + + + Tailwind CSS File Input + + + + Tailwind CSS Search Input + +
:construction: Select:construction: Textarea:construction: Checkbox
+ + Tailwind CSS Select + + + + Tailwind CSS Textarea + + + + Tailwind CSS Checkbox + +
:construction: Radio:construction: Toggle:construction: Range Slider
+ + Tailwind CSS Radio + + + + Tailwind CSS Toggle + + + + Tailwind CSS Range Slider + +
:construction: Floating Label
+ + Tailwind CSS Floating Label + +
+ +## 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/) diff --git a/docs/guide/button/ButtonColorExample.vue b/docs/guide/button/ButtonColorExample.vue new file mode 100644 index 0000000..649ab0b --- /dev/null +++ b/docs/guide/button/ButtonColorExample.vue @@ -0,0 +1,17 @@ + + diff --git a/docs/guide/button/ButtonExample.vue b/docs/guide/button/ButtonExample.vue deleted file mode 100644 index 63747ce..0000000 --- a/docs/guide/button/ButtonExample.vue +++ /dev/null @@ -1,8 +0,0 @@ - - diff --git a/docs/guide/button/ButtonPillExample.vue b/docs/guide/button/ButtonPillExample.vue new file mode 100644 index 0000000..268f4ed --- /dev/null +++ b/docs/guide/button/ButtonPillExample.vue @@ -0,0 +1,17 @@ + + diff --git a/docs/guide/button/ButtonSizeExample.vue b/docs/guide/button/ButtonSizeExample.vue new file mode 100644 index 0000000..f8c0aea --- /dev/null +++ b/docs/guide/button/ButtonSizeExample.vue @@ -0,0 +1,14 @@ + + diff --git a/docs/guide/button/button.md b/docs/guide/button/button.md index 825001a..98acc27 100644 --- a/docs/guide/button/button.md +++ b/docs/guide/button/button.md @@ -1,7 +1,103 @@ # Button - +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, + default: 'default', + }, +}) +``` + + + + +```vue + + +``` + + +### Size + +```typescript +type ButtonSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' +defineProps({ + size: { + type: String as PropType, + default: 'md', + }, +}) +``` + + + + +```vue + + +``` + +### Pill + +```typescript +defineProps({ + pill: { + type: Boolean, + default: false, + }, +}) +``` + + + + +```vue + + +``` + + diff --git a/package-lock.json b/package-lock.json index 58abd1b..af9b12c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -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", diff --git a/package.json b/package.json index fb4e9bd..0528540 100644 --- a/package.json +++ b/package.json @@ -46,5 +46,8 @@ "plugins": { "tailwindcss": {} } + }, + "dependencies": { + "class-names": "^1.0.0" } } diff --git a/src/components/Button/Button.vue b/src/components/Button/Button.vue index 74a26ef..0c10355 100644 --- a/src/components/Button/Button.vue +++ b/src/components/Button/Button.vue @@ -1,27 +1,55 @@ diff --git a/tailwind.config.js b/tailwind.config.js index 22eda09..3a06ba4 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -1,7 +1,7 @@ module.exports = { content: [ './docs/.vitepress/**/*.{js,ts,vue}', - './docs/**/*.md', + './docs/**/*.{js,ts,vue,md}', './src/**/*.{js,ts,vue}', ],