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

219
docs/components/toast.md
View File

@@ -1,10 +1,10 @@
<script setup>
import ToastTypeExample from './toast/examples/ToastTypeExample.vue';
import ToastClosableExample from './toast/examples/ToastClosableExample.vue';
import ToastIconExample from './toast/examples/ToastIconExample.vue';
import ToastDivideExample from './toast/examples/ToastDivideExample.vue';
import ToastMessageExample from './toast/examples/ToastMessageExample.vue';
import ToastInteractiveExample from './toast/examples/ToastInteractiveExample.vue'
import FwbToastExample from './toast/examples/FwbToastExample.vue'
import FwbToastExampleClosable from './toast/examples/FwbToastExampleClosable.vue'
import FwbToastExampleIcon from './toast/examples/FwbToastExampleIcon.vue'
import FwbToastExampleDivide from './toast/examples/FwbToastExampleDivide.vue'
import FwbToastExampleMessage from './toast/examples/FwbToastExampleMessage.vue'
import FwbToastExampleInteractive from './toast/examples/FwbToastExampleInteractive.vue'
</script>
# Vue Toast - Flowbite
@@ -20,161 +20,170 @@ The toast component can be used to enhance your website’s interactivity by pus
## Prop - type
<fwb-toast-example />
```vue
<script setup>
import { Toast } from 'flowbite-vue'
</script>
<template>
<Toast type="empty"> <!-- default -->
<fwb-toast>
You've unlocked achievement.
</Toast>
<Toast type="warning">
</fwb-toast>
<fwb-toast type="warning">
Improve password difficulty.
</Toast>
<Toast type="success">
</fwb-toast>
<fwb-toast type="success">
Item moved successfully.
</Toast>
<Toast type="danger">
</fwb-toast>
<fwb-toast type="danger">
Item has been deleted.
</Toast>
</fwb-toast>
</template>
```
<ToastTypeExample />
<script setup>
import { FwbToast } from 'flowbite-vue'
</script>
```
## Prop - closable
<fwb-toast-example-closable />
```vue
<script setup>
import { Toast } from 'flowbite-vue'
</script>
<template>
<Toast type="empty" closable>
<fwb-toast closable>
You've unlocked achievement.
</Toast>
<Toast :type="'warning'" closable>
</fwb-toast>
<fwb-toast closable type="warning">
Improve password difficulty.
</Toast>
<Toast :type="'success'" closable>
</fwb-toast>
<fwb-toast closable type="success">
Item moved successfully.
</Toast>
<Toast :type="'danger'" closable>
</fwb-toast>
<fwb-toast closable type="danger">
Item has been deleted.
</Toast>
</fwb-toast>
</template>
```
<ToastClosableExample />
<script setup>
import { FwbToast } from 'flowbite-vue'
</script>
```
## Prop - divide
<fwb-toast-example-divide />
```vue
<script setup>
import { Toast } from 'flowbite-vue'
</script>
<template>
<Toast type="empty" closable divide>
<fwb-toast divide>
You've unlocked achievement.
</Toast>
<Toast :type="'warning'" closable divide>
</fwb-toast>
<fwb-toast divide type="warning">
Improve password difficulty.
</Toast>
<Toast :type="'success'" closable divide>
</fwb-toast>
<fwb-toast divide type="success">
Item moved successfully.
</Toast>
<Toast :type="'danger'" closable divide>
</fwb-toast>
<fwb-toast divide type="danger">
Item has been deleted.
</Toast>
</fwb-toast>
</template>
```
<ToastDivideExample />
<script setup>
import { FwbToast } from 'flowbite-vue'
</script>
```
## Message
<fwb-toast-example-message />
```vue
<script setup>
import { Toast } from 'flowbite-vue'
</script>
<template>
<Toast type="empty" closable alignment="start">
<fwb-toast alignment="start" closable>
<template #icon>
<img class="w-8 h-8 rounded-full shadow-lg" src="https://flowbite.com/docs/images/people/profile-picture-1.jpg" alt="Jese Leos image"/>
<img
alt="Jese Leos image" class="w-8 h-8 rounded-full shadow-lg" src="avatar.jpg">
</template>
<div class="text-sm font-normal">
<span class="mb-1 text-sm font-semibold text-gray-900 dark:text-white">Jese Leos</span>
<div class="mb-2 text-sm font-normal">Hi Neil, thanks for sharing your thoughts regarding Flowbite.</div>
<a href="#" class="inline-flex px-2.5 py-1.5 text-xs font-medium text-center text-white bg-blue-600 rounded-lg hover:bg-blue-700 focus:ring-4 focus:outline-none focus:ring-blue-300 dark:bg-blue-500 dark:hover:bg-blue-600 dark:focus:ring-blue-800">Reply</a>
<span class="mb-1 text-sm font-semibold text-gray-900 dark:text-white">Jese Leos</span>
<div class="mb-2 text-sm font-normal">
Hi Neil, thanks for sharing your thoughts regarding Flowbite.
</div>
</Toast>
<fwb-button size="xs" href="#">
Reply
</fwb-button>
</fwb-toast>
</template>
```
<ToastMessageExample />
<script setup>
import { FwbButton, FwbToast } from 'flowbite-vue'
</script>
```
## Interactive
<fwb-toast-example-interactive />
```vue
<script setup>
import { Toast } from 'flowbite-vue'
</script>
<template>
<Toast type="empty" closable alignment="start">
<template #icon>
<img class="w-8 h-8 rounded-full shadow-lg" src="https://flowbite.com/docs/images/people/profile-picture-1.jpg" alt="Jese Leos image"/>
</template>
<div class="text-sm font-normal">
<span class="mb-1 text-sm font-semibold text-gray-900 dark:text-white">Jese Leos</span>
<div class="mb-2 text-sm font-normal">Hi Neil, thanks for sharing your thoughts regarding Flowbite.</div>
<a href="#" class="inline-flex px-2.5 py-1.5 text-xs font-medium text-center text-white bg-blue-600 rounded-lg hover:bg-blue-700 focus:ring-4 focus:outline-none focus:ring-blue-300 dark:bg-blue-500 dark:hover:bg-blue-600 dark:focus:ring-blue-800">Reply</a>
</div>
</Toast>
<flowbite-themable theme="blue">
<fwb-toast alignment="start" closable>
<template #icon>
<svg aria-hidden="true" class="w-5 h-5" fill="#ffff" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path clip-rule="evenodd" d="M4 2a1 1 0 011 1v2.101a7.002 7.002 0 0111.601 2.566 1 1 0 11-1.885.666A5.002 5.002 0 005.999 7H9a1 1 0 010 2H4a1 1 0 01-1-1V3a1 1 0 011-1zm.008 9.057a1 1 0 011.276.61A5.002 5.002 0 0014.001 13H11a1 1 0 110-2h5a1 1 0 011 1v5a1 1 0 11-2 0v-2.101a7.002 7.002 0 01-11.601-2.566 1 1 0 01.61-1.276z" fill-rule="evenodd" />
</svg>
</template>
<span class="mb-1 text-sm font-semibold text-gray-900 dark:text-white">Update available</span>
<div class="mb-2 text-sm font-normal">
A new software version is available for download.
</div>
<div class="grid grid-cols-2 gap-2">
<fwb-button size="xs">
Update
</fwb-button>
<fwb-button size="xs" color="alternative">
Not now
</fwb-button>
</div>
</fwb-toast>
</flowbite-themable>
</template>
```
<ToastInteractiveExample />
<script setup>
import { FlowbiteThemable, FwbButton, FwbToast } from 'flowbite-vue'
</script>
```
## Slot - icon
You can use icon slot for rendering your own icons. Also you can change icon background color by using [FlowbiteThemable](/components/flowbiteThemable/flowbiteThemable.md)
<fwb-toast-example-icon />
```vue
<script setup>
import { Toast } from 'flowbite-vue'
</script>
<template>
<flowbite-themable theme="blue">
<Toast type="empty" closable>
<template #icon>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#fff" class="bi bi-mouse" viewBox="0 0 16 16">
<path d="M8 3a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 3zm4 8a4 4 0 0 1-8 0V5a4 4 0 1 1 8 0v6zM8 0a5 5 0 0 0-5 5v6a5 5 0 0 0 10 0V5a5 5 0 0 0-5-5z"/>
</svg>
</template>
Scroll down to see more examples.
</Toast>
</flowbite-themable>
<flowbite-themable theme="red">
<Toast closable>
<template #icon>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#fff" class="bi bi-person-plus" viewBox="0 0 16 16">
<path d="M6 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm2-3a2 2 0 1 1-4 0 2 2 0 0 1 4 0zm4 8c0 1-1 1-1 1H1s-1 0-1-1 1-4 6-4 6 3 6 4zm-1-.004c-.001-.246-.154-.986-.832-1.664C9.516 10.68 8.289 10 6 10c-2.29 0-3.516.68-4.168 1.332-.678.678-.83 1.418-.832 1.664h10z"/>
<path fill-rule="evenodd" d="M13.5 5a.5.5 0 0 1 .5.5V7h1.5a.5.5 0 0 1 0 1H14v1.5a.5.5 0 0 1-1 0V8h-1.5a.5.5 0 0 1 0-1H13V5.5a.5.5 0 0 1 .5-.5z"/>
</svg>
</template>
You have new friend request.
</Toast>
</flowbite-themable>
<Toast :type="'success'" closable>
<fwb-toast closable>
<template #icon>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-earbuds" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M6.825 4.138c.596 2.141-.36 3.593-2.389 4.117a4.432 4.432 0 0 1-2.018.054c-.048-.01.9 2.778 1.522 4.61l.41 1.205a.52.52 0 0 1-.346.659l-.593.19a.548.548 0 0 1-.69-.34L.184 6.99c-.696-2.137.662-4.309 2.564-4.8 2.029-.523 3.402 0 4.076 1.948zm-.868 2.221c.43-.112.561-.993.292-1.969-.269-.975-.836-1.675-1.266-1.563-.43.112-.561.994-.292 1.969.269.975.836 1.675 1.266 1.563zm3.218-2.221c-.596 2.141.36 3.593 2.389 4.117a4.434 4.434 0 0 0 2.018.054c.048-.01-.9 2.778-1.522 4.61l-.41 1.205a.52.52 0 0 0 .346.659l.593.19c.289.092.6-.06.69-.34l2.536-7.643c.696-2.137-.662-4.309-2.564-4.8-2.029-.523-3.402 0-4.076 1.948zm.868 2.221c-.43-.112-.561-.993-.292-1.969.269-.975.836-1.675 1.266-1.563.43.112.561.994.292 1.969-.269.975-.836 1.675-1.266 1.563z"/>
<svg class="bi bi-mouse" fill="#fff" height="16" viewBox="0 0 16 16" width="16" xmlns="http://www.w3.org/2000/svg">
<path d="M8 3a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 3zm4 8a4 4 0 0 1-8 0V5a4 4 0 1 1 8 0v6zM8 0a5 5 0 0 0-5 5v6a5 5 0 0 0 10 0V5a5 5 0 0 0-5-5z" />
</svg>
</template>
Your airpods connected.
</Toast>
Scroll down to see more examples.
</fwb-toast>
<fwb-toast closable>
<template #icon>
<svg class="bi bi-person-plus" fill="#fff" height="16" viewBox="0 0 16 16" width="16" xmlns="http://www.w3.org/2000/svg">
<path d="M6 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm2-3a2 2 0 1 1-4 0 2 2 0 0 1 4 0zm4 8c0 1-1 1-1 1H1s-1 0-1-1 1-4 6-4 6 3 6 4zm-1-.004c-.001-.246-.154-.986-.832-1.664C9.516 10.68 8.289 10 6 10c-2.29 0-3.516.68-4.168 1.332-.678.678-.83 1.418-.832 1.664h10z" />
<path d="M13.5 5a.5.5 0 0 1 .5.5V7h1.5a.5.5 0 0 1 0 1H14v1.5a.5.5 0 0 1-1 0V8h-1.5a.5.5 0 0 1 0-1H13V5.5a.5.5 0 0 1 .5-.5z" fill-rule="evenodd" />
</svg>
</template>
You have new friend request.
</fwb-toast>
<fwb-toast closabletype="success">
<template #icon>
<svg class="bi bi-earbuds" fill="currentColor" height="16" viewBox="0 0 16 16" width="16" xmlns="http://www.w3.org/2000/svg">
<path d="M6.825 4.138c.596 2.141-.36 3.593-2.389 4.117a4.432 4.432 0 0 1-2.018.054c-.048-.01.9 2.778 1.522 4.61l.41 1.205a.52.52 0 0 1-.346.659l-.593.19a.548.548 0 0 1-.69-.34L.184 6.99c-.696-2.137.662-4.309 2.564-4.8 2.029-.523 3.402 0 4.076 1.948zm-.868 2.221c.43-.112.561-.993.292-1.969-.269-.975-.836-1.675-1.266-1.563-.43.112-.561.994-.292 1.969.269.975.836 1.675 1.266 1.563zm3.218-2.221c-.596 2.141.36 3.593 2.389 4.117a4.434 4.434 0 0 0 2.018.054c.048-.01-.9 2.778-1.522 4.61l-.41 1.205a.52.52 0 0 0 .346.659l.593.19c.289.092.6-.06.69-.34l2.536-7.643c.696-2.137-.662-4.309-2.564-4.8-2.029-.523-3.402 0-4.076 1.948zm.868 2.221c-.43-.112-.561-.993-.292-1.969.269-.975.836-1.675 1.266-1.563.43.112.561.994.292 1.969-.269.975-.836 1.675-1.266 1.563z" fill-rule="evenodd" />
</svg>
</template>
Your airpods are connected.
</fwb-toast>
</template>
<script setup>
import { FwbToast } from 'flowbite-vue'
</script>
```
<ToastIconExample />
---