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

feat: button loading, disabled(WIP), refactor to useButtonClasses, Spinner and vitest

Browse Source
This commit is contained in:
Alexandr
2022-07-01 15:10:23 +03:00
parent a36c3b6b65
commit bfb8cdfe67
20 changed files with 1166 additions and 135 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
docs/.vitepress/config.ts
View File

@@ -17,6 +17,7 @@ function buildSidebar() {
function getComponents() {
return [
{ text: 'Button', link: '/guide/button/button.md' },
{ text: 'Spinner', link: '/guide/spinner/spinner.md' },
]
}

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

@@ -9,6 +9,10 @@ import ButtonPrefixExample from './examples/ButtonPrefixExample.vue';
import ButtonSuffixExample from './examples/ButtonSuffixExample.vue';
import ButtonOutlineGradientExample from './examples/ButtonOutlineGradientExample.vue';
import ButtonGradientShadowExample from './examples/ButtonGradientShadowExample.vue';
import ButtonIconExample from './examples/ButtonIconExample.vue';
import ButtonSquareExample from './examples/ButtonSquareExample.vue';
import ButtonDisabledExample from './examples/ButtonDisabledExample.vue';
import ButtonLoadingExample from './examples/ButtonLoadingExample.vue';
</script>
# Button
@@ -210,6 +214,17 @@ import { Button } from 'flowbite-vue'
## Prop - shadow
```typescript
type ButtonMonochromeGradient = 'blue' | 'green' | 'cyan' | 'teal' | 'lime' | 'red' | 'pink' | 'purple'
defineProps({
shadow: {
type: [String, null] as PropType<ButtonMonochromeGradient | '' | null>,
default: null,
},
})
```
<ButtonGradientShadowExample />
```vue
@@ -229,6 +244,137 @@ import { Button } from 'flowbite-vue'
```
## Prop - square
```typescript
defineProps({
square: {
type: Boolean,
default: false,
},
})
```
<ButtonSquareExample />
```vue
<script setup>
import { Button } from 'flowbite-vue'
</script>
<template>
<Button gradient="red-yellow" square>
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
</Button>
<Button color="default" pill square>
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
</Button>
<Button color="dark" outline square>
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
</Button>
<Button color="yellow" pill outline square>
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
</Button>
</template>
```
## Prop - loading
```typescript
defineProps({
loading: {
type: Boolean,
default: false,
},
loadingPosition: {
type: String as PropType<'suffix' | 'prefix'>,
default: 'prefix',
},
})
```
<ButtonLoadingExample />
```vue
<script setup>
import { Button } from 'flowbite-vue'
const loading = ref(false)
</script>
<template>
<Button outline color="default" loading-position="suffix" :loading="loading" @click="loading = !loading">
Click me
<template #suffix>
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
</template>
</Button>
</template>
```
## Prop - disabled
```typescript
defineProps({
disabled: {
type: Boolean,
default: false,
},
})
```
<ButtonDisabledExample />
```vue
<script setup>
import { Button } from 'flowbite-vue'
</script>
<template>
<Button gradient="red-yellow" square>
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
</Button>
<Button color="default" pill square>
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
</Button>
<Button color="dark" outline square>
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
</Button>
<Button color="yellow" pill outline square>
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
</Button>
</template>
```
## Slot - default
<ButtonIconExample />
```vue
<script setup>
import { Button } from 'flowbite-vue'
</script>
<template>
<Button gradient="purple-blue" square>
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
</Button>
<Button color="default" pill square>
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
</Button>
<Button gradient="green-blue" square>
Close something
</Button>
<Button color="default" pill outline square>
Open something
<template #suffix>
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
</template>
</Button>
</template>
```
## Slot - prefix
<ButtonPrefixExample />
@@ -263,6 +409,4 @@ import { Button } from 'flowbite-vue'
</template>
</Button>
</template>
```
```

15
docs/guide/button/examples/ButtonDisabledExample.vue Normal file
View File

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

22
docs/guide/button/examples/ButtonIconExample.vue Normal file
View File

@@ -0,0 +1,22 @@
<template>
<div class="inline-flex align-center gap-2 flex-wrap">
<Button gradient="purple-blue" square>
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
</Button>
<Button color="default" pill square>
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
</Button>
<Button gradient="green-blue" square>
Close something
</Button>
<Button color="default" pill outline square>
Open something
<template #suffix>
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
</template>
</Button>
</div>
</template>
<script setup>
import { Button } from '../../../../src/index'
</script>

15
docs/guide/button/examples/ButtonLoadingExample.vue Normal file
View File

@@ -0,0 +1,15 @@
<template>
<div class="inline-flex align-center gap-2 flex-wrap">
<Button outline color="default" loading-position="suffix" :loading="loading" @click="loading = !loading">
Click me
<template #suffix>
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
</template>
</Button>
</div>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import { Button } from '../../../../src/index'
const loading = ref(false)
</script>

2
docs/guide/button/examples/ButtonPrefixExample.vue
View File

@@ -2,7 +2,7 @@
<div class="inline-flex align-center gap-2 flex-wrap">
<Button color="default">
<template #prefix>
<svg class="w-5 h-5 mr-2 -ml-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M3 1a1 1 0 000 2h1.22l.305 1.222a.997.997 0 00.01.042l1.358 5.43-.893.892C3.74 11.846 4.632 14 6.414 14H15a1 1 0 000-2H6.414l1-1H14a1 1 0 00.894-.553l3-6A1 1 0 0017 3H6.28l-.31-1.243A1 1 0 005 1H3zM16 16.5a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zM6.5 18a1.5 1.5 0 100-3 1.5 1.5 0 000 3z"></path></svg>
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M3 1a1 1 0 000 2h1.22l.305 1.222a.997.997 0 00.01.042l1.358 5.43-.893.892C3.74 11.846 4.632 14 6.414 14H15a1 1 0 000-2H6.414l1-1H14a1 1 0 00.894-.553l3-6A1 1 0 0017 3H6.28l-.31-1.243A1 1 0 005 1H3zM16 16.5a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zM6.5 18a1.5 1.5 0 100-3 1.5 1.5 0 000 3z"></path></svg>
</template>
Buy
</Button>

19
docs/guide/button/examples/ButtonSquareExample.vue Normal file
View File

@@ -0,0 +1,19 @@
<template>
<div class="inline-flex align-center gap-2 flex-wrap">
<Button gradient="red-yellow" square>
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
</Button>
<Button color="default" pill square>
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
</Button>
<Button color="dark" outline square>
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
</Button>
<Button color="yellow" pill outline square>
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
</Button>
</div>
</template>
<script setup>
import { Button } from '../../../../src/index'
</script>

2
docs/guide/button/examples/ButtonSuffixExample.vue
View File

@@ -3,7 +3,7 @@
<Button color="default">
Choose plan
<template #suffix>
<svg class="w-5 h-5 ml-2 -mr-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
</template>
</Button>
</div>

8
docs/guide/spinner/examples/SpinnerBasicExample.vue Normal file
View File

@@ -0,0 +1,8 @@
<template>
<div class="inline-flex align-center gap-2 flex-wrap">
<spinner />
</div>
</template>
<script setup>
import { Spinner } from '../../../../src/index'
</script>

12
docs/guide/spinner/examples/SpinnerSizeExample.vue Normal file
View File

@@ -0,0 +1,12 @@
<template>
<div class="inline-flex align-center gap-2 flex-wrap">
<spinner />
<spinner size="6" />
<spinner size="8" />
<spinner size="10" />
<spinner size="12" />
</div>
</template>
<script setup>
import { Spinner } from '../../../../src/index'
</script>

54
docs/guide/spinner/spinner.md Normal file
View File

@@ -0,0 +1,54 @@
<script setup>
import SpinnerBasicExample from './examples/SpinnerBasicExample.vue';
import SpinnerSizeExample from './examples/SpinnerSizeExample.vue';
</script>
# Spinner
reference: [https://flowbite.com/docs/components/spinner/](https://flowbite.com/docs/components/spinner/)
## Basic example
<SpinnerBasicExample />
```vue
<script setup>
import { Spinner } from 'flowbite-vue'
</script>
<template>
<div class="inline-flex align-center gap-2 flex-wrap">
<spinner />
</div>
</template>
```
## Prop - size
```typescript
defineProps({
size: {
type: String, // any string for w-${size} and h-${size} tailwind classes
default: '4',
},
})
```
<SpinnerSizeExample />
```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>
```