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

feat: initial dropdown and flowbite themable examples

Browse Source
This commit is contained in:
Alexandr
2022-07-08 21:13:05 +03:00
parent a5ffeffb82
commit 749732dbe7
7 changed files with 114 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -22,7 +22,7 @@ reference: [https://flowbite.com/docs/components/buttons/](https://flowbite.com/
## Prop - color
```typescript
type ButtonVariant = 'default' | 'alternative' | 'dark' | 'light' | 'green' | 'red' | 'yellow' | 'purple'
type ButtonVariant = 'default' | 'alternative' | 'dark' | 'light' | 'green' | 'red' | 'yellow' | 'purple' | 'pink' | 'blue'
defineProps({
color: {
type: String as PropType<ButtonVariant>,

1
docs/guide/button/examples/ButtonColorExample.vue
View File

@@ -8,6 +8,7 @@
<Button color="red">Red</Button>
<Button color="yellow">Yellow</Button>
<Button color="purple">Purple</Button>
<Button color="pink">Pink</Button>
</div>
</template>
<script setup>

25
docs/guide/flowbiteThemable/examples/button/FlowbiteThemableButtonExample.vue Normal file
View File

@@ -0,0 +1,25 @@
<template>
<div>
<div class="vp-raw inline-flex align-center gap-2 flex-wrap">
<flowbite-themable :key="theme" v-for="theme in themes" :theme="theme">
<Button>
{{ theme }}
</Button>
</flowbite-themable>
</div>
</div>
</template>
<script lang="ts" setup>
import type { PropType } from 'vue'
import { FlowbiteThemable, Button } from '../../../../../src/index'
import type { FlowbiteTheme } from '../../../../../src/components/utils/FlowbiteThemable/types'
const themes: FlowbiteTheme[] = ['blue', 'green', 'red', 'pink', 'purple']
defineProps({
theme: {
type: String as PropType<FlowbiteTheme>,
default: 'blue',
},
})
</script>

29
docs/guide/flowbiteThemable/examples/dropdown/FlowbiteThemableDropdownExample.vue Normal file
View File

@@ -0,0 +1,29 @@
<template>
<div>
<div class="vp-raw inline-flex align-center gap-2 flex-wrap">
<flowbite-themable :theme="theme">
<dropdown text="Text 1">
Content 1
</dropdown>
<dropdown text="Text 2">
Content 2
</dropdown>
<dropdown text="Text 3">
Content 3
</dropdown>
</flowbite-themable>
</div>
</div>
</template>
<script lang="ts" setup>
import type { PropType } from 'vue'
import { FlowbiteThemable, Dropdown } from '../../../../../src/index'
import type { FlowbiteTheme } from '../../../../../src/components/utils/FlowbiteThemable/types'
defineProps({
theme: {
type: String as PropType<FlowbiteTheme>,
default: 'blue',
},
})
</script>

52
docs/guide/flowbiteThemable/flowbiteThemable.md
View File

@@ -2,6 +2,8 @@
import FlowbiteThemableTabsPillsExample from './examples/tabs/FlowbiteThemableTabsPillsExample.vue';
import FlowbiteThemableTabsUnderlineExample from './examples/tabs/FlowbiteThemableTabsUnderlineExample.vue';
import FlowbiteThemableTabsDefaultExample from './examples/tabs/FlowbiteThemableTabsDefaultExample.vue';
import FlowbiteThemableDropdownExample from './examples/dropdown/FlowbiteThemableDropdownExample.vue';
import FlowbiteThemableButtonExample from './examples/button/FlowbiteThemableButtonExample.vue';
</script>
# Flowbite Themable
@@ -12,12 +14,12 @@ You can use this wrapper for styling components with no color prop(like tabs, dr
```vue
<script setup>
import {Tabs, Tab, FlowbiteThemable} from 'flowbite-vue'
import { Tabs, Tab, FlowbiteThemable } from 'flowbite-vue'
const theme = 'blue' // 'blue', 'green', 'red', 'pink', 'purple'
const variant = 'default' // see tabs docs
</script>
<template>
<flowbite-themable :theme="theme" theme="blue">
<flowbite-themable :theme="theme">
<tabs :variant="variant" class="p-5">
...
</tabs>
@@ -59,4 +61,48 @@ const variant = 'default' // see tabs docs
<FlowbiteThemableTabsDefaultExample theme="purple" />
<FlowbiteThemableTabsDefaultExample theme="red" />
<FlowbiteThemableTabsDefaultExample theme="red" />
## Dropdown
```vue
<script setup>
import { Dropdown, FlowbiteThemable } from 'flowbite-vue'
const theme = 'blue' // 'blue', 'green', 'red', 'pink', 'purple'
</script>
<template>
<flowbite-themable :theme="theme">
<dropdown>
...
</dropdown>
</flowbite-themable>
</template>
```
<FlowbiteThemableDropdownExample theme="blue" class="mb-2" />
<FlowbiteThemableDropdownExample theme="green" class="mb-2" />
<FlowbiteThemableDropdownExample theme="pink" class="mb-2" />
<FlowbiteThemableDropdownExample theme="purple" class="mb-2" />
<FlowbiteThemableDropdownExample theme="red" />
## Button
```vue
<script setup>
import { Button, FlowbiteThemable } from 'flowbite-vue'
const theme = 'blue' // 'blue', 'green', 'red', 'pink', 'purple'
</script>
<template>
<flowbite-themable :theme="theme">
<Button>
...
</Button>
</flowbite-themable>
</template>
```
<FlowbiteThemableButtonExample />

9
src/components/Button/composables/useButtonClasses.ts
View File

@@ -9,6 +9,7 @@ export type ButtonClassMap<T extends string> = { hover: Record<T, string>, defa
const buttonColorClasses: ButtonClassMap<ButtonVariant> = {
default: {
default: 'text-white bg-blue-700 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg dark:bg-blue-600 focus:outline-none dark:focus:ring-blue-800',
blue: 'text-white bg-blue-700 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg dark:bg-blue-600 focus:outline-none dark:focus:ring-blue-800',
alternative: 'font-medium text-gray-900 focus:outline-none bg-white rounded-lg border border-gray-200 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: 'text-white bg-gray-800 focus:outline-none focus:ring-4 focus:ring-gray-300 font-medium rounded-lg dark:bg-gray-800 dark:focus:ring-gray-700 dark:border-gray-700',
light: 'text-gray-900 bg-white border border-gray-300 focus:outline-none focus:ring-4 focus:ring-gray-200 font-medium rounded-lg dark:bg-gray-800 dark:text-white dark:border-gray-600 dark:focus:ring-gray-700',
@@ -16,9 +17,11 @@ const buttonColorClasses: ButtonClassMap<ButtonVariant> = {
red: 'focus:outline-none text-white bg-red-700 focus:ring-4 focus:ring-red-300 font-medium rounded-lg dark:bg-red-600 dark:focus:ring-red-900',
yellow: 'focus:outline-none text-white bg-yellow-400 focus:ring-4 focus:ring-yellow-300 font-medium rounded-lg dark:focus:ring-yellow-900',
purple: 'focus:outline-none text-white bg-purple-700 focus:ring-4 focus:ring-purple-300 font-medium rounded-lg dark:bg-purple-600 dark:focus:ring-purple-900',
pink: 'focus:outline-none text-white bg-pink-700 focus:ring-4 focus:ring-pink-300 font-medium rounded-lg dark:bg-pink-600 dark:focus:ring-pink-900',
},
hover: {
default: 'hover:bg-blue-800 dark:hover:bg-blue-700',
blue: 'hover:bg-blue-800 dark:hover:bg-blue-700',
alternative: 'hover:bg-gray-100 hover:text-blue-700 dark:hover:text-white dark:hover:bg-gray-700',
dark: 'hover:bg-gray-900 dark:hover:bg-gray-700',
light: 'hover:bg-gray-100 dark:hover:border-gray-600',
@@ -26,7 +29,7 @@ const buttonColorClasses: ButtonClassMap<ButtonVariant> = {
red: 'hover:bg-red-800 dark:hover:bg-red-700',
yellow: 'hover:bg-yellow-500',
purple: 'hover:bg-purple-800 dark:hover:bg-purple-700',
pink: 'hover:bg-pink-800 dark:hover:bg-pink-700',
},
}
@@ -34,16 +37,20 @@ const buttonOutlineColorClasses: ButtonClassMap<Exclude<ButtonVariant, 'light' |
default: {
dark: 'text-gray-900 border border-gray-800 focus:ring-4 focus:outline-none focus:ring-gray-300 font-medium rounded-lg text-sm text-center dark:border-gray-600 dark:text-gray-400 dark:focus:ring-gray-800',
default: 'text-blue-700 border border-blue-700 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm text-center dark:border-blue-500 dark:text-blue-500 dark:focus:ring-blue-800',
blue: 'text-blue-700 border border-blue-700 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm text-center dark:border-blue-500 dark:text-blue-500 dark:focus:ring-blue-800',
green: 'text-green-700 border border-green-700 focus:ring-4 focus:outline-none focus:ring-green-300 font-medium rounded-lg text-sm text-center dark:border-green-500 dark:text-green-500 dark:focus:ring-green-800',
purple: 'text-purple-700 border border-purple-700 focus:ring-4 focus:outline-none focus:ring-purple-300 font-medium rounded-lg text-sm text-center dark:border-purple-400 dark:text-purple-400 dark:focus:ring-purple-900',
pink: 'text-pink-700 border border-pink-700 focus:ring-4 focus:outline-none focus:ring-pink-300 font-medium rounded-lg text-sm text-center dark:border-pink-400 dark:text-pink-400 dark:focus:ring-pink-900',
red: 'text-red-700 border border-red-700 focus:ring-4 focus:outline-none focus:ring-red-300 font-medium rounded-lg text-sm text-center dark:border-red-500 dark:text-red-500 dark:focus:ring-red-900',
yellow: 'text-yellow-400 border border-yellow-400 focus:ring-4 focus:outline-none focus:ring-yellow-300 font-medium rounded-lg text-sm text-center dark:border-yellow-300 dark:text-yellow-300 dark:focus:ring-yellow-900',
},
hover: {
dark: 'hover:text-white hover:bg-gray-900 dark:hover:text-white dark:hover:bg-gray-600',
default: 'hover:text-white hover:bg-blue-800 dark:hover:text-white dark:hover:bg-blue-600',
blue: 'hover:text-white hover:bg-blue-800 dark:hover:text-white dark:hover:bg-blue-600',
green: 'hover:text-white hover:bg-green-800 dark:hover:text-white dark:hover:bg-green-600',
purple: 'hover:text-white hover:bg-purple-800 dark:hover:text-white dark:hover:bg-purple-500',
pink: 'hover:text-white hover:bg-pink-800 dark:hover:text-white dark:hover:bg-pink-500',
red: 'hover:text-white hover:bg-red-800 dark:hover:text-white dark:hover:bg-red-600',
yellow: 'hover:text-white hover:bg-yellow-500 dark:hover:text-white dark:hover:bg-yellow-400',
},

2
src/components/Button/types.d.ts vendored
View File

@@ -1,5 +1,5 @@
export type ButtonMonochromeGradient = 'blue' | 'green' | 'cyan' | 'teal' | 'lime' | 'red' | 'pink' | 'purple'
export type ButtonDuotoneGradient = 'purple-blue' | 'cyan-blue' | 'green-blue' | 'purple-pink' | 'pink-orange' | 'teal-lime' | 'red-yellow'
export type ButtonGradient = ButtonDuotoneGradient | ButtonMonochromeGradient
export type ButtonVariant = 'default' | 'alternative' | 'dark' | 'light' | 'green' | 'red' | 'yellow' | 'purple'
export type ButtonVariant = 'default' | 'alternative' | 'dark' | 'light' | 'green' | 'red' | 'yellow' | 'purple' | 'pink' | 'blue'
export type ButtonSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl'