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

Components renaming (#225)

Browse Source 
* refactor: eslint config adjusted for better diff's

* refactor: stricter linting
 + dependencies updated

* refactoring: paragraph component
 - component
 - docs

* refactoring: heading component
 - component
 - docs

* Update docs/components/heading.md

Co-authored-by: Ilya Artamonov <ilya.sosidka@gmail.com>

* refactoring: link component
 - component
 - docs

* refactoring: image component
 - component
 - docs

* refactoring: alert component
 - component
 - docs

* refactoring: avatar component
 - component
 - docs

* refactoring: removed unnecessary code
    - component names come from the file name

* refactoring: breadcrumb component
 - component
 - docs

* refactoring: accordion component
 - component
 - docs

* refactoring: buttom component
 - component
 - docs

* refactoring: badge component
 - component
 - docs

* refactoring: card component
 - component
 - docs

* refactoring: order of components in docs updated

* refactoring: unnecessary semicolons removed

* refactoring: button group component
 - component
 - docs

* refactoring: carousel component
 - component
 - docs

* refactoring: dropdown component
 - component
 - docs

* refactoring: footer component
 - component
 - docs

* refactoring:list-group component
 - component
 - docs

* refactoring: modal component
 - component
 - docs

* refactoring: navbar component
 - component
 - docs

* refactoring: pagination component
 - component
 - docs

* refactoring: progress component
 - component
 - docs

* refactoring: rating component
 - component
 - docs

* refactoring: spinner component
 - component
 - docs

* refactoring: table component
 - component
 - docs

* refactoring: tabs component
 - component
 - docs

* feat: Updated pagination examples

* lint: Lister fixes

* feat: Sidebar component and some fixes

* feat: Input component

* feat: Some fixes

* feat: Some fixes

* chore: update deps

* refactor: removed old Modal component

* refactor: radio component and some fixes

* fix: fixed path error

* refactor: Range component

* refactoring: timeline component
 - component
 - docs

* refactor: Select component

* refactoring: toast component
 - component
 - docs

* refactoring: tooltip component
 - component
 - docs

* refactoring: sidebar component
 - component
 - docs

* refactoring: input component
 - component
 - docs

* refactoring: fileInput component
 - component
 - docs

* refactoring: select component
 - component
 - docs

* refactoring: textarea component
 - component
 - docs

* refactoring: checkbox component
 - component
 - docs

* refactoring: radio component
 - component
 - docs

* refactoring: toggle component
 - component
 - docs

* refactoring: range component
 - component
 - docs

* local configs linted

* documentation quick start updated

* flowbite-themable refactored to fit new linters and style guide

* random linter fixes

* refactoring: toast-provider component
 - component
 - docs

* final linter fixes

* lint: Linter fixes

* fix: Fixed types

* fix: Fixed card component

* docs: Updated card examples

* fix: Fixed tabs

* refactor: Heading component refactoring

* Fwb rename - few fixes after component review (#237)

* fix: button documentation

* fix: model type in range examples

* chore: Toast marked as WIP

---------

Co-authored-by: Sqrcz <naorniakowski@slashlab.pl>
Co-authored-by: Sqrcz <naorniakowski@gmail.com>
This commit is contained in:
Ilya Artamonov
2023-10-23 18:23:14 +03:00
committed by GitHub
parent ea6fcf1a4c
commit d316cf3a12
600 changed files with 16349 additions and 10239 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
docs/components/button/examples/ButtonColorExample.vue
View File

@@ -1,16 +0,0 @@
<template>
<div class="vp-raw 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>
<Button color="pink">Pink</Button>
</div>
</template>
<script setup>
import { Button } from '../../../../src/index'
</script>

12
docs/components/button/examples/ButtonDisabledExample.vue
View File

@@ -1,12 +0,0 @@
<template>
<div class="vp-raw inline-flex align-center gap-2 flex-wrap">
<Button color="default" disabled>Default</Button>
<Button color="default" outline disabled>Default outline</Button>
<Button gradient="red" disabled>Red gradient</Button>
<Button gradient="red-yellow" disabled>Red to yellow gradient</Button>
<Button gradient="red-yellow" outline disabled>Red to yellow outline</Button>
</div>
</template>
<script setup>
import { Button } from '../../../../src/index'
</script>

14
docs/components/button/examples/ButtonGradientDuotoneExample.vue
View File

@@ -1,14 +0,0 @@
<template>
<div class="vp-raw inline-flex align-center gap-2 flex-wrap">
<Button gradient="purple-blue">Purple to blue</Button>
<Button gradient="cyan-blue">Cyan to blue</Button>
<Button gradient="green-blue">Green to blue</Button>
<Button gradient="purple-pink">Purple to pink</Button>
<Button gradient="pink-orange">Pink to orange</Button>
<Button gradient="teal-lime">Teal to lime</Button>
<Button gradient="red-yellow">Red to yellow</Button>
</div>
</template>
<script setup>
import { Button } from '../../../../src/index'
</script>

15
docs/components/button/examples/ButtonGradientMonochromeExample.vue
View File

@@ -1,15 +0,0 @@
<template>
<div class="vp-raw inline-flex align-center gap-2 flex-wrap">
<Button gradient="blue">Blue</Button>
<Button gradient="cyan">Cyan</Button>
<Button gradient="green">Green</Button>
<Button gradient="lime">Lime</Button>
<Button gradient="pink">Pink</Button>
<Button gradient="purple">Purple</Button>
<Button gradient="red">Red</Button>
<Button gradient="teal">Teal</Button>
</div>
</template>
<script setup>
import { Button } from '../../../../src/index'
</script>

18
docs/components/button/examples/ButtonGradientShadowExample.vue
View File

@@ -1,18 +0,0 @@
<template>
<div class="vp-raw inline-flex align-center gap-2 flex-wrap">
<Button gradient="blue" shadow>Blue with blue</Button>
<Button gradient="cyan" shadow>Cyan with cyan</Button>
<Button gradient="green" shadow>Green with green</Button>
<Button gradient="lime" shadow>Lime with lime</Button>
<Button gradient="pink" shadow>Pink with pink</Button>
<Button gradient="purple" shadow>Purple with purple</Button>
<Button gradient="red" shadow>Red with red</Button>
<Button gradient="teal" shadow>Teal with teal</Button>
<Button gradient="blue" shadow="red">Blue with red</Button>
<Button gradient="cyan" shadow="teal">Cyan with teal</Button>
<Button gradient="teal" shadow="purple">Teal with purple</Button>
</div>
</template>
<script setup>
import { Button } from '../../../../src/index'
</script>

22
docs/components/button/examples/ButtonIconExample.vue
View File

@@ -1,22 +0,0 @@
<template>
<div class="vp-raw 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>

17
docs/components/button/examples/ButtonLinkExample.vue
View File

@@ -1,9 +1,20 @@
<template>
<div class="vp-raw inline-flex align-center gap-2 flex-wrap">
<Button color="default" href="https://google.com" target="_blank">Default</Button>
<Button href="/about" tag="router-link">Router link</Button>
<fwb-button
color="default"
href="https://google.com"
target="_blank"
>
Default
</fwb-button>
<fwb-button
href="/about"
tag="router-link"
>
Router link
</fwb-button>
</div>
</template>
<script setup>
import { Button } from '../../../../src/index'
import { FwbButton } from '../../../../src/index'
</script>

32
docs/components/button/examples/ButtonLoadingExample.vue
View File

@@ -1,32 +0,0 @@
<template>
<div class="vp-raw inline-flex items-center gap-2 flex-wrap">
<Button gradient="purple-blue" outline :disabled="loading" :loading="loading" @click="loading = !loading" size="xs">
Click me
</Button>
<Button gradient="red-yellow" :loading="loading" @click="loading = !loading" size="sm">
Click me
</Button>
<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>
<Button gradient="green-blue" :loading="loading" @click="loading = !loading" size="lg">
Click me
</Button>
<Button gradient="pink" :loading="loading" @click="loading = !loading" size="xl">
Click me
</Button>
</div>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import { Button } from '../../../../src/index'
const loading = ref(false)
</script>

13
docs/components/button/examples/ButtonOutlineColorExample.vue
View File

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

14
docs/components/button/examples/ButtonOutlineGradientExample.vue
View File

@@ -1,14 +0,0 @@
<template>
<div class="vp-raw inline-flex align-center gap-2 flex-wrap">
<Button gradient="purple-blue" outline>Purple to blue</Button>
<Button gradient="cyan-blue" outline>Cyan to blue</Button>
<Button gradient="green-blue" outline>Green to blue</Button>
<Button gradient="purple-pink" outline>Purple to pink</Button>
<Button gradient="pink-orange" outline>Pink to orange</Button>
<Button gradient="teal-lime" outline>Teal to lime</Button>
<Button gradient="red-yellow" outline>Red to yellow</Button>
</div>
</template>
<script setup>
import { Button } from '../../../../src/index'
</script>

15
docs/components/button/examples/ButtonPillExample.vue
View File

@@ -1,15 +0,0 @@
<template>
<div class="vp-raw 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>

13
docs/components/button/examples/ButtonPrefixExample.vue
View File

@@ -1,13 +0,0 @@
<template>
<div class="vp-raw inline-flex align-center gap-2 flex-wrap">
<Button color="default">
<template #prefix>
<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>
</div>
</template>
<script setup>
import { Button } from '../../../../src/index'
</script>

12
docs/components/button/examples/ButtonSizeExample.vue
View File

@@ -1,12 +0,0 @@
<template>
<div class="vp-raw 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>

19
docs/components/button/examples/ButtonSquareExample.vue
View File

@@ -1,19 +0,0 @@
<template>
<div class="vp-raw 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>

13
docs/components/button/examples/ButtonSuffixExample.vue
View File

@@ -1,13 +0,0 @@
<template>
<div class="vp-raw inline-flex align-center gap-2 flex-wrap">
<Button color="default">
Choose plan
<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>

35
docs/components/button/examples/FwbButtonExampleColor.vue Normal file
View File

@@ -0,0 +1,35 @@
<template>
<div class="vp-raw flex flex-wrap gap-2">
<fwb-button color="default">
Default
</fwb-button>
<fwb-button color="alternative">
Alternative
</fwb-button>
<fwb-button color="dark">
Dark
</fwb-button>
<fwb-button color="light">
Light
</fwb-button>
<fwb-button color="green">
Green
</fwb-button>
<fwb-button color="red">
Red
</fwb-button>
<fwb-button color="yellow">
Yellow
</fwb-button>
<fwb-button color="purple">
Purple
</fwb-button>
<fwb-button color="pink">
Pink
</fwb-button>
</div>
</template>
<script setup>
import { FwbButton } from '../../../../src/index'
</script>

40
docs/components/button/examples/FwbButtonExampleDisabled.vue Normal file
View File

@@ -0,0 +1,40 @@
<template>
<div class="vp-raw flex flex-wrap gap-2">
<fwb-button
color="default"
disabled
>
Default
</fwb-button>
<fwb-button
color="default"
outline
disabled
>
Default outline
</fwb-button>
<fwb-button
gradient="red"
disabled
>
Red gradient
</fwb-button>
<fwb-button
gradient="red-yellow"
disabled
>
Red to yellow gradient
</fwb-button>
<fwb-button
gradient="red-yellow"
outline
disabled
>
Red to yellow outline
</fwb-button>
</div>
</template>
<script setup>
import { FwbButton } from '../../../../src/index'
</script>

29
docs/components/button/examples/FwbButtonExampleGradientDuotone.vue Normal file
View File

@@ -0,0 +1,29 @@
<template>
<div class="vp-raw flex flex-wrap gap-2">
<fwb-button gradient="purple-blue">
Purple to blue
</fwb-button>
<fwb-button gradient="cyan-blue">
Cyan to blue
</fwb-button>
<fwb-button gradient="green-blue">
Green to blue
</fwb-button>
<fwb-button gradient="purple-pink">
Purple to pink
</fwb-button>
<fwb-button gradient="pink-orange">
Pink to orange
</fwb-button>
<fwb-button gradient="teal-lime">
Teal to lime
</fwb-button>
<fwb-button gradient="red-yellow">
Red to yellow
</fwb-button>
</div>
</template>
<script setup>
import { FwbButton } from '../../../../src/index'
</script>

32
docs/components/button/examples/FwbButtonExampleGradientMonochrome.vue Normal file
View File

@@ -0,0 +1,32 @@
<template>
<div class="vp-raw flex flex-wrap gap-2">
<fwb-button gradient="blue">
Blue
</fwb-button>
<fwb-button gradient="cyan">
Cyan
</fwb-button>
<fwb-button gradient="green">
Green
</fwb-button>
<fwb-button gradient="lime">
Lime
</fwb-button>
<fwb-button gradient="pink">
Pink
</fwb-button>
<fwb-button gradient="purple">
Purple
</fwb-button>
<fwb-button gradient="red">
Red
</fwb-button>
<fwb-button gradient="teal">
Teal
</fwb-button>
</div>
</template>
<script setup>
import { FwbButton } from '../../../../src/index'
</script>

21
docs/components/button/examples/FwbButtonExampleLink.vue Normal file
View File

@@ -0,0 +1,21 @@
<template>
<div class="vp-raw flex flex-wrap gap-2">
<fwb-button
href="https://google.com"
target="_blank"
>
Google.com
</fwb-button>
<!-- we're missing `vue-router` dependency for this to work-->
<!-- <fwb-button
href="/pages/getting-started"
tag="router-link"
>
Quickstart
</fwb-button> -->
</div>
</template>
<script setup>
import { FwbButton } from '../../../../src/index'
</script>

68
docs/components/button/examples/FwbButtonExampleLoading.vue Normal file
View File

@@ -0,0 +1,68 @@
<template>
<div class="vp-raw flex flex-wrap items-center gap-2">
<fwb-button
:disabled="loading"
:loading="loading"
gradient="purple-blue"
outline
size="xs"
@click="loading = !loading"
>
Click me
</fwb-button>
<fwb-button
:loading="loading"
gradient="red-yellow"
size="sm"
@click="loading = !loading"
>
Click me
</fwb-button>
<fwb-button
:loading="loading"
color="default"
loading-position="suffix"
outline
@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
clip-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"
fill-rule="evenodd"
/>
</svg>
</template>
</fwb-button>
<fwb-button
:loading="loading"
gradient="green-blue"
size="lg"
@click="loading = !loading"
>
Click me
</fwb-button>
<fwb-button
:loading="loading"
gradient="pink"
size="xl"
@click="loading = !loading"
>
Click me
</fwb-button>
</div>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import { FwbButton } from '../../../../src/index'
const loading = ref(false)
</script>

44
docs/components/button/examples/FwbButtonExampleOutline.vue Normal file
View File

@@ -0,0 +1,44 @@
<template>
<div class="vp-raw flex flex-wrap gap-2">
<fwb-button
color="default"
outline
>
Default
</fwb-button>
<fwb-button
color="dark"
outline
>
Dark
</fwb-button>
<fwb-button
color="green"
outline
>
Green
</fwb-button>
<fwb-button
color="red"
outline
>
Red
</fwb-button>
<fwb-button
color="yellow"
outline
>
Yellow
</fwb-button>
<fwb-button
color="purple"
outline
>
Purple
</fwb-button>
</div>
</template>
<script setup>
import { FwbButton } from '../../../../src/index'
</script>

50
docs/components/button/examples/FwbButtonExampleOutlineGradient.vue Normal file
View File

@@ -0,0 +1,50 @@
<template>
<div class="vp-raw flex flex-wrap gap-2">
<fwb-button
gradient="purple-blue"
outline
>
Purple to blue
</fwb-button>
<fwb-button
gradient="cyan-blue"
outline
>
Cyan to blue
</fwb-button>
<fwb-button
gradient="green-blue"
outline
>
Green to blue
</fwb-button>
<fwb-button
gradient="purple-pink"
outline
>
Purple to pink
</fwb-button>
<fwb-button
gradient="pink-orange"
outline
>
Pink to orange
</fwb-button>
<fwb-button
gradient="teal-lime"
outline
>
Teal to lime
</fwb-button>
<fwb-button
gradient="red-yellow"
outline
>
Red to yellow
</fwb-button>
</div>
</template>
<script setup>
import { FwbButton } from '../../../../src/index'
</script>

56
docs/components/button/examples/FwbButtonExamplePill.vue Normal file
View File

@@ -0,0 +1,56 @@
<template>
<div class="vp-raw flex flex-wrap gap-2">
<fwb-button
color="default"
pill
>
Default
</fwb-button>
<fwb-button
color="alternative"
pill
>
Alternative
</fwb-button>
<fwb-button
color="dark"
pill
>
Dark
</fwb-button>
<fwb-button
color="light"
pill
>
Light
</fwb-button>
<fwb-button
color="green"
pill
>
Green
</fwb-button>
<fwb-button
color="red"
pill
>
Red
</fwb-button>
<fwb-button
color="yellow"
pill
>
Yellow
</fwb-button>
<fwb-button
color="purple"
pill
>
Purple
</fwb-button>
</div>
</template>
<script setup>
import { FwbButton } from '../../../../src/index'
</script>

74
docs/components/button/examples/FwbButtonExampleShadow.vue Normal file
View File

@@ -0,0 +1,74 @@
<template>
<div class="vp-raw flex flex-wrap gap-2">
<fwb-button
gradient="blue"
shadow
>
Blue with blue
</fwb-button>
<fwb-button
gradient="cyan"
shadow
>
Cyan with cyan
</fwb-button>
<fwb-button
gradient="green"
shadow
>
Green with green
</fwb-button>
<fwb-button
gradient="lime"
shadow
>
Lime with lime
</fwb-button>
<fwb-button
gradient="pink"
shadow
>
Pink with pink
</fwb-button>
<fwb-button
gradient="purple"
shadow
>
Purple with purple
</fwb-button>
<fwb-button
gradient="red"
shadow
>
Red with red
</fwb-button>
<fwb-button
gradient="teal"
shadow
>
Teal with teal
</fwb-button>
<fwb-button
gradient="blue"
shadow="red"
>
Blue with red
</fwb-button>
<fwb-button
gradient="cyan"
shadow="teal"
>
Cyan with teal
</fwb-button>
<fwb-button
gradient="teal"
shadow="purple"
>
Teal with purple
</fwb-button>
</div>
</template>
<script setup>
import { FwbButton } from '../../../../src/index'
</script>

23
docs/components/button/examples/FwbButtonExampleSize.vue Normal file
View File

@@ -0,0 +1,23 @@
<template>
<div class="vp-raw flex flex-wrap gap-2 items-center">
<fwb-button size="xs">
Extra Small - xs
</fwb-button>
<fwb-button size="sm">
Small - sm
</fwb-button>
<fwb-button size="md">
Medium - md
</fwb-button>
<fwb-button size="lg">
Large - lg
</fwb-button>
<fwb-button size="xl">
Extra Large - xl
</fwb-button>
</div>
</template>
<script setup>
import { FwbButton } from '../../../../src/index'
</script>

65
docs/components/button/examples/FwbButtonExampleSlot.vue Normal file
View File

@@ -0,0 +1,65 @@
<template>
<div class="vp-raw flex flex-wrap gap-2">
<fwb-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
clip-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"
fill-rule="evenodd"
/></svg>
</fwb-button>
<fwb-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
clip-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"
fill-rule="evenodd"
/></svg>
</fwb-button>
<fwb-button
gradient="green-blue"
square
>
Close something
</fwb-button>
<fwb-button
color="default"
outline
pill
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
clip-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"
fill-rule="evenodd"
/></svg>
</template>
</fwb-button>
</div>
</template>
<script setup>
import { FwbButton } from '../../../../src/index'
</script>

21
docs/components/button/examples/FwbButtonExampleSlotPrefix.vue Normal file
View File

@@ -0,0 +1,21 @@
<template>
<div class="vp-raw">
<fwb-button>
<template #prefix>
<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" />
</svg>
</template>
Buy
</fwb-button>
</div>
</template>
<script setup>
import { FwbButton } from '../../../../src/index'
</script>

25
docs/components/button/examples/FwbButtonExampleSlotSuffix.vue Normal file
View File

@@ -0,0 +1,25 @@
<template>
<div class="vp-raw">
<fwb-button>
Choose plan
<template #suffix>
<svg
class="w-5 h-5"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
clip-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"
fill-rule="evenodd"
/>
</svg>
</template>
</fwb-button>
</div>
</template>
<script setup>
import { FwbButton } from '../../../../src/index'
</script>

72
docs/components/button/examples/FwbButtonExampleSquare.vue Normal file
View File

@@ -0,0 +1,72 @@
<template>
<div class="vp-raw flex flex-wrap gap-2">
<fwb-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
clip-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"
fill-rule="evenodd"
/></svg>
</fwb-button>
<fwb-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
clip-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"
fill-rule="evenodd"
/></svg>
</fwb-button>
<fwb-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
clip-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"
fill-rule="evenodd"
/></svg>
</fwb-button>
<fwb-button
color="yellow"
outline
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"
/></svg>
</fwb-button>
</div>
</template>
<script setup>
import { FwbButton } from '../../../../src/index'
</script>