Alexandr P
GitHub
16
README.md
16
README.md
@@ -89,7 +89,7 @@ module.exports = {
|
||||
</tr>
|
||||
<tr>
|
||||
<td width="33.3333%">
|
||||
<a href="https://flowbite-vue.com/guide/alert/alert.html">
|
||||
<a href="https://flowbite-vue.com/components/alert/alert.html">
|
||||
<img alt="Tailwind CSS Alerts" src="https://flowbite.s3.amazonaws.com/github/alerts.jpg">
|
||||
</a>
|
||||
</td>
|
||||
@@ -111,12 +111,12 @@ module.exports = {
|
||||
</tr>
|
||||
<tr>
|
||||
<td width="33.3333%">
|
||||
<a href="https://flowbite-vue.com/guide/button/button.html">
|
||||
<a href="https://flowbite-vue.com/components/button/button.html">
|
||||
<img alt="Tailwind CSS Buttons" src="https://flowbite.s3.amazonaws.com/github/buttons.jpg">
|
||||
</a>
|
||||
</td>
|
||||
<td width="33.3333%">
|
||||
<a href="https://flowbite-vue.com/guide/buttonGroup/buttonGroup.html">
|
||||
<a href="https://flowbite-vue.com/components/buttonGroup/buttonGroup.html">
|
||||
<img alt="Tailwind CSS Button Group" src="https://flowbite.s3.amazonaws.com/github/button-group.jpg">
|
||||
</a>
|
||||
</td>
|
||||
@@ -133,7 +133,7 @@ module.exports = {
|
||||
</tr>
|
||||
<tr>
|
||||
<td width="33.3333%">
|
||||
<a href="https://flowbite-vue.com/guide/dropdown/dropdown.html">
|
||||
<a href="https://flowbite-vue.com/components/dropdown/dropdown.html">
|
||||
<img alt="Tailwind CSS Dropdown" src="https://flowbite.s3.amazonaws.com/github/dropdown.jpg">
|
||||
</a>
|
||||
</td>
|
||||
@@ -143,7 +143,7 @@ module.exports = {
|
||||
</a>
|
||||
</td>
|
||||
<td width="33.3333%">
|
||||
<a href="https://flowbite-vue.com/guide/listGroup/listGroup.html">
|
||||
<a href="https://flowbite-vue.com/components/listGroup/listGroup.html">
|
||||
<img alt="Tailwind CSS List group" src="https://flowbite.s3.amazonaws.com/github/list-group.jpg">
|
||||
</a>
|
||||
</td>
|
||||
@@ -165,7 +165,7 @@ module.exports = {
|
||||
</a>
|
||||
</td>
|
||||
<td width="33.3333%">
|
||||
<a href="https://flowbite-vue.com/guide/tabs/tabs.html">
|
||||
<a href="https://flowbite-vue.com/components/tabs/tabs.html">
|
||||
<img alt="Tailwind CSS Tabs" src="https://flowbite.s3.amazonaws.com/github/tabs.jpg">
|
||||
</a>
|
||||
</td>
|
||||
@@ -195,7 +195,7 @@ module.exports = {
|
||||
<tr>
|
||||
<td width="33.3333%">:construction: Progress bar</td>
|
||||
<td width="33.3333%">:construction: Tables</td>
|
||||
<td width="33.3333%">:construction: Toast</td>
|
||||
<td width="33.3333%">Toast</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td width="33.3333%">
|
||||
@@ -209,7 +209,7 @@ module.exports = {
|
||||
</a>
|
||||
</td>
|
||||
<td width="33.3333%">
|
||||
<a href="https://flowbite-react.com/toast/">
|
||||
<a href="https://flowbite-vue.com/components/alert/alert.html">
|
||||
<img alt="Tailwind CSS Toast" src="https://flowbite.s3.amazonaws.com/github/toast.jpg">
|
||||
</a>
|
||||
</td>
|
||||
|
||||
@@ -34,6 +34,7 @@ function getComponents() {
|
||||
{ text: 'Spinner', link: '/components/spinner/spinner.md' },
|
||||
{ text: 'Tabs', link: '/components/tabs/tabs.md' },
|
||||
{ text: 'ListGroup', link: 'components/listGroup/listGroup.md' },
|
||||
{ text: 'Toast', link: 'components/toast/toast.md' },
|
||||
|
||||
{ text: '- Accordion', link: 'components/accordion/accordion.md' },
|
||||
{ text: '- Avatar', link: 'components/avatar/avatar.md' },
|
||||
@@ -50,7 +51,6 @@ function getComponents() {
|
||||
{ text: '- Sidebar', link: 'components/sidebar/sidebar.md' },
|
||||
{ text: '- Table', link: 'components/table/table.md' },
|
||||
{ text: '- Timeline', link: 'components/timeline/timeline.md' },
|
||||
{ text: '- Toast', link: 'components/toast/toast.md' },
|
||||
{ text: '- Tooltip', link: 'components/tooltip/tooltip.md' },
|
||||
]
|
||||
}
|
||||
|
||||
19
docs/components/toast/examples/ToastClosableExample.vue
Normal file
19
docs/components/toast/examples/ToastClosableExample.vue
Normal file
@@ -0,0 +1,19 @@
|
||||
<template>
|
||||
<div class="vp-raw flex align-center gap-2 flex-wrap flex-col">
|
||||
<Toast type="empty" closable>
|
||||
You've unlocked achievement.
|
||||
</Toast>
|
||||
<Toast :type="'warning'" closable>
|
||||
Improve password difficulty.
|
||||
</Toast>
|
||||
<Toast :type="'success'" closable>
|
||||
Item moved successfully.
|
||||
</Toast>
|
||||
<Toast :type="'danger'" closable>
|
||||
Item has been deleted.
|
||||
</Toast>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import { Toast } from '../../../../src/index'
|
||||
</script>
|
||||
19
docs/components/toast/examples/ToastDivideExample.vue
Normal file
19
docs/components/toast/examples/ToastDivideExample.vue
Normal file
@@ -0,0 +1,19 @@
|
||||
<template>
|
||||
<div class="vp-raw flex align-center gap-2 flex-wrap flex-col">
|
||||
<Toast type="empty" closable divide>
|
||||
You've unlocked achievement.
|
||||
</Toast>
|
||||
<Toast :type="'warning'" closable divide>
|
||||
Improve password difficulty.
|
||||
</Toast>
|
||||
<Toast :type="'success'" closable divide>
|
||||
Item moved successfully.
|
||||
</Toast>
|
||||
<Toast :type="'danger'" closable divide>
|
||||
Item has been deleted.
|
||||
</Toast>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import { Toast } from '../../../../src/index'
|
||||
</script>
|
||||
36
docs/components/toast/examples/ToastIconExample.vue
Normal file
36
docs/components/toast/examples/ToastIconExample.vue
Normal file
@@ -0,0 +1,36 @@
|
||||
<template>
|
||||
<div class="vp-raw flex align-center gap-2 flex-wrap flex-col">
|
||||
<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>
|
||||
<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>
|
||||
</template>
|
||||
Your airpods connected.
|
||||
</Toast>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import { Toast, FlowbiteThemable } from '../../../../src/index'
|
||||
</script>
|
||||
20
docs/components/toast/examples/ToastInteractiveExample.vue
Normal file
20
docs/components/toast/examples/ToastInteractiveExample.vue
Normal file
@@ -0,0 +1,20 @@
|
||||
<template>
|
||||
<div class="vp-raw flex align-center gap-2 flex-wrap flex-col">
|
||||
<flowbite-themable :theme="'blue'">
|
||||
<Toast type="empty" closable alignment="start">
|
||||
<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 fill-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" clip-rule="evenodd"></path></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">
|
||||
<Button size="xs">Update</Button>
|
||||
<Button size="xs" :color="'alternative'">Not now</Button>
|
||||
</div>
|
||||
</Toast>
|
||||
</flowbite-themable>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import { Toast, FlowbiteThemable, Button } from '../../../../src/index'
|
||||
</script>
|
||||
15
docs/components/toast/examples/ToastMessageExample.vue
Normal file
15
docs/components/toast/examples/ToastMessageExample.vue
Normal file
@@ -0,0 +1,15 @@
|
||||
<template>
|
||||
<div class="vp-raw flex align-center gap-2 flex-wrap flex-col">
|
||||
<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>
|
||||
<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>
|
||||
</Toast>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import { Toast } from '../../../../src/index'
|
||||
</script>
|
||||
@@ -1,5 +1,8 @@
|
||||
<template>
|
||||
<div class="vp-raw flex align-center gap-2 flex-wrap">
|
||||
<div class="vp-raw flex align-center gap-2 flex-wrap flex-col">
|
||||
<Toast type="empty">
|
||||
You've unlocked achievement.
|
||||
</Toast>
|
||||
<Toast :type="'warning'">
|
||||
Improve password difficulty.
|
||||
</Toast>
|
||||
@@ -1,13 +1,33 @@
|
||||
<script setup>
|
||||
import ToastExample from './examples/ToastExample.vue'
|
||||
import ToastTypeExample from './examples/ToastTypeExample.vue';
|
||||
import ToastClosableExample from './examples/ToastClosableExample.vue';
|
||||
import ToastIconExample from './examples/ToastIconExample.vue';
|
||||
import ToastDivideExample from './examples/ToastDivideExample.vue';
|
||||
import ToastMessageExample from './examples/ToastMessageExample.vue';
|
||||
import ToastInteractiveExample from './examples/ToastInteractiveExample.vue'
|
||||
</script>
|
||||
# Toast
|
||||
|
||||
#### Push notifications to your users using the toast component and choose from multiple sizes, colors, styles, and positions
|
||||
|
||||
---
|
||||
|
||||
:::tip
|
||||
Original reference: [https://flowbite.com/docs/components/toast/](https://flowbite.com/docs/components/toast/)
|
||||
:::
|
||||
|
||||
The toast component can be used to enhance your website’s interactivity by pushing notifications to your visitors. You can choose from multiple styles, colors, sizes, and positions and even dismiss the component.
|
||||
|
||||
## Prop - type
|
||||
|
||||
```vue
|
||||
<script setup>
|
||||
import { Toast } from 'flowbite-vue'
|
||||
</script>
|
||||
<template>
|
||||
<Toast type="empty"> <!-- default -->
|
||||
You've unlocked achievement.
|
||||
</Toast>
|
||||
<Toast type="warning">
|
||||
Improve password difficulty.
|
||||
</Toast>
|
||||
@@ -20,4 +40,139 @@ import { Toast } from 'flowbite-vue'
|
||||
</template>
|
||||
```
|
||||
|
||||
<ToastExample />
|
||||
<ToastTypeExample />
|
||||
|
||||
## Prop - closable
|
||||
|
||||
```vue
|
||||
<script setup>
|
||||
import { Toast } from 'flowbite-vue'
|
||||
</script>
|
||||
<template>
|
||||
<Toast type="empty" closable>
|
||||
You've unlocked achievement.
|
||||
</Toast>
|
||||
<Toast :type="'warning'" closable>
|
||||
Improve password difficulty.
|
||||
</Toast>
|
||||
<Toast :type="'success'" closable>
|
||||
Item moved successfully.
|
||||
</Toast>
|
||||
<Toast :type="'danger'" closable>
|
||||
Item has been deleted.
|
||||
</Toast>
|
||||
</template>
|
||||
```
|
||||
|
||||
<ToastClosableExample />
|
||||
|
||||
## Prop - divide
|
||||
|
||||
```vue
|
||||
<script setup>
|
||||
import { Toast } from 'flowbite-vue'
|
||||
</script>
|
||||
<template>
|
||||
<Toast type="empty" closable divide>
|
||||
You've unlocked achievement.
|
||||
</Toast>
|
||||
<Toast :type="'warning'" closable divide>
|
||||
Improve password difficulty.
|
||||
</Toast>
|
||||
<Toast :type="'success'" closable divide>
|
||||
Item moved successfully.
|
||||
</Toast>
|
||||
<Toast :type="'danger'" closable divide>
|
||||
Item has been deleted.
|
||||
</Toast>
|
||||
</template>
|
||||
```
|
||||
|
||||
<ToastDivideExample />
|
||||
|
||||
## Message
|
||||
|
||||
```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>
|
||||
</template>
|
||||
```
|
||||
|
||||
<ToastMessageExample />
|
||||
|
||||
## 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>
|
||||
</template>
|
||||
```
|
||||
|
||||
<ToastInteractiveExample />
|
||||
|
||||
## 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)
|
||||
|
||||
```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>
|
||||
<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>
|
||||
</template>
|
||||
Your airpods connected.
|
||||
</Toast>
|
||||
</template>
|
||||
```
|
||||
|
||||
<ToastIconExample />
|
||||
|
||||
11
docs/vite.config.ts
Normal file
11
docs/vite.config.ts
Normal file
@@ -0,0 +1,11 @@
|
||||
import { defineConfig } from 'vite'
|
||||
import { resolve } from 'path'
|
||||
|
||||
// https://vitejs.dev/config/
|
||||
export default defineConfig({
|
||||
resolve: {
|
||||
alias: {
|
||||
'@': resolve(__dirname, '../src'), // to resolve @ inside docs
|
||||
},
|
||||
},
|
||||
})
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "flowbite-vue",
|
||||
"version": "0.0.2",
|
||||
"version": "0.0.3",
|
||||
"repository": "https://github.com/themesberg/flowbite-vue.git",
|
||||
"author": "themesberg",
|
||||
"license": "MIT",
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<flowbite-themable-child tag="button" :apply="['background', 'hover', 'focus']" :class="wrapperClasses" :disabled="disabled">
|
||||
<flowbite-themable-child tag="button" :apply="appliableTheme" :class="wrapperClasses" :disabled="disabled">
|
||||
<div v-if="!isOutlineGradient && ($slots.prefix || loadingPrefix)" class="mr-2"> <!--automatically add mr class if slot provided or loading -->
|
||||
<spinner :color="spinnerColor" :size="spinnerSize" v-if="loadingPrefix" />
|
||||
<slot name="prefix" v-else />
|
||||
@@ -31,7 +31,7 @@ import type { PropType } from 'vue'
|
||||
import Spinner from '../Spinner/Spinner.vue'
|
||||
import { useButtonClasses } from './composables/useButtonClasses'
|
||||
import { useButtonSpinner } from './composables/useButtonSpinner'
|
||||
import FlowbiteThemableChild from '../utils/FlowbiteThemable/components/FlowbiteThemableChild/FlowbiteThemableChild.vue'
|
||||
import FlowbiteThemableChild from '@/components/utils/FlowbiteThemable/components/FlowbiteThemableChild/FlowbiteThemableChild.vue'
|
||||
|
||||
import type { ButtonGradient, ButtonMonochromeGradient, ButtonSize, ButtonVariant } from './types'
|
||||
const props = defineProps({
|
||||
@@ -85,4 +85,9 @@ const loadingSuffix = computed(() => props.loading && props.loadingPosition ===
|
||||
const { wrapperClasses, spanClasses } = useButtonClasses(toRefs(props))
|
||||
const { color: spinnerColor, size: spinnerSize } = useButtonSpinner(toRefs(props))
|
||||
|
||||
const appliableTheme = computed(() => {
|
||||
if(['alternative', 'light'].includes(props.color)) return []
|
||||
return ['background', 'hover', 'focus']
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
@@ -27,7 +27,7 @@ import {
|
||||
import { useTabsClasses } from './composables/useTabsClasses'
|
||||
import type { PropType } from 'vue'
|
||||
import { computed, provide, toRef, useSlots } from 'vue'
|
||||
import { flatten } from '../../utils/flatten'
|
||||
import { flatten } from '@/utils/flatten'
|
||||
import TabPane from './components/TabPane/TabPane.vue'
|
||||
import type { TabsVariant } from './types'
|
||||
|
||||
|
||||
@@ -1,32 +1,63 @@
|
||||
<template>
|
||||
<div id="toast-default" class="flex items-center w-full max-w-xs p-4 text-gray-500 bg-white rounded-lg shadow dark:text-gray-400 dark:bg-gray-800" role="alert">
|
||||
<div v-if="type !== 'empty'" :class="['inline-flex flex-shrink-0 justify-center items-center w-8 h-8 rounded-lg', typeClasses]">
|
||||
<svg v-if="type === 'success'" aria-hidden="true" class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path></svg>
|
||||
<div v-if="visible" id="toast-default" :class="wrapperClasses" role="alert" >
|
||||
<flowbite-themable-child
|
||||
v-if="type !== 'empty' || $slots.icon"
|
||||
:class="[
|
||||
'inline-flex flex-shrink-0 justify-center items-center w-8 h-8 rounded-lg',
|
||||
typeClasses
|
||||
]"
|
||||
:apply="['background', 'text']"
|
||||
>
|
||||
<slot v-if="$slots.icon" :class="{ 'ml-3': type !== 'empty' }" name="icon" />
|
||||
<svg v-else-if="type === 'success'" aria-hidden="true" class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path></svg>
|
||||
<svg v-else-if="type === 'danger'" aria-hidden="true" class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
|
||||
<svg v-else-if="type === 'warning'" aria-hidden="true" class="text-orange-500 bg-orange-100 dark:bg-orange-700 dark:text-orange-200 w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd"></path></svg>
|
||||
</div>
|
||||
<div class="ml-3 text-sm font-normal">
|
||||
<svg v-else-if="type === 'warning'" aria-hidden="true" class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd"></path></svg>
|
||||
</flowbite-themable-child>
|
||||
<div :class="[contentClasses, { 'ml-3': $slots.icon || type !== 'empty' }]">
|
||||
<slot />
|
||||
</div>
|
||||
<button type="button" class="ml-auto -mx-1.5 -my-1.5 bg-white text-gray-400 hover:text-gray-900 rounded-lg focus:ring-2 focus:ring-gray-300 p-1.5 hover:bg-gray-100 inline-flex h-8 w-8 dark:text-gray-500 dark:hover:text-white dark:bg-gray-800 dark:hover:bg-gray-700" data-dismiss-target="#toast-default" aria-label="Close">
|
||||
<button @click="onClose" v-if="closable" type="button" class="border-none ml-auto -mx-1.5 -my-1.5 bg-white text-gray-400 hover:text-gray-900 rounded-lg focus:ring-2 focus:ring-gray-300 p-1.5 hover:bg-gray-100 inline-flex h-8 w-8 dark:text-gray-500 dark:hover:text-white dark:bg-gray-800 dark:hover:bg-gray-700" aria-label="Close">
|
||||
<span class="sr-only">Close</span>
|
||||
<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="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import type { ToastPreset } from '@/components/Toast/types'
|
||||
import type { ToastAlign, ToastPreset } from '@/components/Toast/types'
|
||||
import type { PropType } from 'vue'
|
||||
import { useToastClasses } from './composables/useToastClasses'
|
||||
import { toRefs } from 'vue'
|
||||
import { ref, toRefs } from 'vue'
|
||||
import FlowbiteThemableChild
|
||||
from '@/components/utils/FlowbiteThemable/components/FlowbiteThemableChild/FlowbiteThemableChild.vue'
|
||||
|
||||
const props = defineProps({
|
||||
type: {
|
||||
type: String as PropType<ToastPreset>,
|
||||
default: 'empty',
|
||||
},
|
||||
alignment: {
|
||||
type: String as PropType<ToastAlign>,
|
||||
default: 'center',
|
||||
},
|
||||
closable: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
divide: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
})
|
||||
|
||||
const { typeClasses } = useToastClasses(toRefs(props))
|
||||
const visible = ref(true)
|
||||
|
||||
const emit = defineEmits(['close'])
|
||||
|
||||
const { typeClasses, wrapperClasses, contentClasses } = useToastClasses(toRefs(props))
|
||||
|
||||
const onClose = () => {
|
||||
emit('close')
|
||||
visible.value = false
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
@@ -1,13 +1,19 @@
|
||||
import type { Ref } from 'vue'
|
||||
import { computed } from 'vue'
|
||||
import type { ToastPreset } from '@/components/Toast/types'
|
||||
import { simplifyTailwindClasses } from '@/utils/simplifyTailwindClasses'
|
||||
import type { ToastAlign } from '@/components/Toast/types'
|
||||
|
||||
type UseToastClassesReturns = {
|
||||
typeClasses: Ref<string>
|
||||
wrapperClasses: Ref<string>
|
||||
contentClasses: Ref<string>
|
||||
}
|
||||
|
||||
type UseToastClassesProps = {
|
||||
type: Ref<ToastPreset>
|
||||
divide: Ref<boolean>
|
||||
alignment: Ref<ToastAlign>
|
||||
}
|
||||
|
||||
const typeClassesMap: Record<ToastPreset, string> = {
|
||||
@@ -17,13 +23,36 @@ const typeClassesMap: Record<ToastPreset, string> = {
|
||||
warning: 'text-orange-500 bg-orange-100 dark:bg-orange-700 dark:text-orange-200',
|
||||
}
|
||||
|
||||
|
||||
const wrapperAlignmentClasses: Record<ToastAlign, string> = {
|
||||
center: 'items-center',
|
||||
end: 'items-end',
|
||||
start: 'items-start',
|
||||
}
|
||||
const defaultWrapperClasses = 'flex w-full max-w-xs p-4 text-gray-500 bg-white rounded-lg shadow dark:text-gray-400 dark:bg-gray-800'
|
||||
|
||||
const defaultContentClasses = 'text-sm font-normal'
|
||||
|
||||
export function useToastClasses(props: UseToastClassesProps): UseToastClassesReturns {
|
||||
|
||||
const typeClasses = computed(() => {
|
||||
return typeClassesMap[props.type.value]
|
||||
})
|
||||
|
||||
const wrapperClasses = computed(() => {
|
||||
const alignmentClass = wrapperAlignmentClasses[props.alignment.value]
|
||||
if(props.divide.value) return simplifyTailwindClasses(defaultWrapperClasses, 'dark:divide-gray-700 divide-x divide-gray-200', alignmentClass)
|
||||
return simplifyTailwindClasses(defaultWrapperClasses, alignmentClass)
|
||||
})
|
||||
|
||||
const contentClasses = computed(() => {
|
||||
if(props.type.value !== 'empty' && props.divide.value) return simplifyTailwindClasses(defaultContentClasses, 'pl-3')
|
||||
return defaultContentClasses
|
||||
})
|
||||
|
||||
return {
|
||||
typeClasses,
|
||||
wrapperClasses,
|
||||
contentClasses,
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1 +1,2 @@
|
||||
export type ToastPreset = 'success' | 'warning' | 'danger' | 'empty'
|
||||
export type ToastAlign = 'start' | 'center' | 'end'
|
||||
|
||||
@@ -12,7 +12,8 @@ import type {
|
||||
ThemableChildrenApply,
|
||||
} from '@/components/utils/FlowbiteThemable/components/FlowbiteThemableChild/types'
|
||||
import { toRefs } from 'vue'
|
||||
import { simplifyTailwindClasses } from '../../../../../utils/simplifyTailwindClasses'
|
||||
import { simplifyTailwindClasses } from '@/utils/simplifyTailwindClasses'
|
||||
import type { FlowbiteTheme } from '@/components/utils/FlowbiteThemable/types'
|
||||
|
||||
const props = defineProps({
|
||||
apply: {
|
||||
@@ -23,6 +24,10 @@ const props = defineProps({
|
||||
type: String,
|
||||
default: 'div',
|
||||
},
|
||||
theme: {
|
||||
type: String as PropType<FlowbiteTheme>,
|
||||
default: undefined,
|
||||
},
|
||||
})
|
||||
|
||||
const { classes } = useFlowbiteThemableChildClasses(toRefs(props))
|
||||
|
||||
@@ -4,6 +4,7 @@ import type {
|
||||
ThemableChildrenApply,
|
||||
} from '../types'
|
||||
import { useFlowbiteThemable } from '../../../composables/useFlowbiteThemable'
|
||||
import type { FlowbiteTheme } from '@/components/utils/FlowbiteThemable/types'
|
||||
|
||||
type UseFlowbiteThemableChildReturns = {
|
||||
classes: Ref<string>
|
||||
@@ -11,11 +12,12 @@ type UseFlowbiteThemableChildReturns = {
|
||||
|
||||
type UseFlowbiteThemableChildProps = {
|
||||
apply: Ref<ThemableChildrenApply[]>
|
||||
theme?: Ref<FlowbiteTheme | undefined>
|
||||
}
|
||||
|
||||
export function useFlowbiteThemableChildClasses(props: UseFlowbiteThemableChildProps): UseFlowbiteThemableChildReturns {
|
||||
|
||||
const { textClasses, borderClasses, backgroundClasses, hoverClasses, disabledClasses, focusClasses, isActive } = useFlowbiteThemable()
|
||||
const { textClasses, borderClasses, backgroundClasses, hoverClasses, disabledClasses, focusClasses, isActive } = useFlowbiteThemable(props.theme?.value)
|
||||
|
||||
const classes = computed(() => {
|
||||
if(!isActive.value) return ''
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import type { FlowbiteTheme } from '../types'
|
||||
import type { Ref } from 'vue'
|
||||
import { computed, inject } from 'vue'
|
||||
import { computed, inject, ref } from 'vue'
|
||||
import { FLOWBITE_THEMABLE_INJECTION_KEY } from '../injection/config'
|
||||
|
||||
type UseFlowbiteThemableReturns = {
|
||||
@@ -63,41 +63,45 @@ const flowbiteThemeClasses: FlowbiteThemes<FlowbiteTheme> = {
|
||||
|
||||
}
|
||||
|
||||
export function useFlowbiteThemable(): UseFlowbiteThemableReturns {
|
||||
export function useFlowbiteThemable(_theme?: FlowbiteTheme): UseFlowbiteThemableReturns {
|
||||
|
||||
const theme = inject<Ref<FlowbiteTheme>>(FLOWBITE_THEMABLE_INJECTION_KEY)
|
||||
const theme = inject<Ref<FlowbiteTheme | null>>(FLOWBITE_THEMABLE_INJECTION_KEY, ref(null))
|
||||
|
||||
const isActive = computed(() => !!theme?.value)
|
||||
const color = computed(() => theme?.value)
|
||||
const color = computed(() => theme?.value || undefined)
|
||||
|
||||
const themeName = computed(() => {
|
||||
return _theme || theme.value
|
||||
})
|
||||
|
||||
const backgroundClasses = computed(() => {
|
||||
if(!theme) return ''
|
||||
return flowbiteThemeClasses[theme.value].background
|
||||
if(!themeName.value) return ''
|
||||
return flowbiteThemeClasses[themeName.value].background
|
||||
})
|
||||
|
||||
const disabledClasses = computed(() => {
|
||||
if(!theme) return ''
|
||||
return flowbiteThemeClasses[theme.value].disabled
|
||||
if(!themeName.value) return ''
|
||||
return flowbiteThemeClasses[themeName.value].disabled
|
||||
})
|
||||
|
||||
const hoverClasses = computed(() => {
|
||||
if(!theme) return ''
|
||||
return flowbiteThemeClasses[theme.value].hover
|
||||
if(!themeName.value) return ''
|
||||
return flowbiteThemeClasses[themeName.value].hover
|
||||
})
|
||||
|
||||
const textClasses = computed(() => {
|
||||
if(!theme) return ''
|
||||
return flowbiteThemeClasses[theme.value].text
|
||||
if(!themeName.value) return ''
|
||||
return flowbiteThemeClasses[themeName.value].text
|
||||
})
|
||||
|
||||
const borderClasses = computed(() => {
|
||||
if(!theme) return ''
|
||||
return flowbiteThemeClasses[theme.value].border
|
||||
if(!themeName.value) return ''
|
||||
return flowbiteThemeClasses[themeName.value].border
|
||||
})
|
||||
|
||||
const focusClasses = computed(() => {
|
||||
if(!theme) return ''
|
||||
return flowbiteThemeClasses[theme.value].focus
|
||||
if(!themeName.value) return ''
|
||||
return flowbiteThemeClasses[themeName.value].focus
|
||||
})
|
||||
|
||||
return {
|
||||
|
||||
Reference in New Issue
Block a user