+
+ You've unlocked achievement.
+
Improve password difficulty.
diff --git a/docs/components/toast/toast.md b/docs/components/toast/toast.md
index 76ac26f..b806a4f 100644
--- a/docs/components/toast/toast.md
+++ b/docs/components/toast/toast.md
@@ -1,13 +1,33 @@
# 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
+
+ You've unlocked achievement.
+
Improve password difficulty.
@@ -20,4 +40,139 @@ import { Toast } from 'flowbite-vue'
```
-
+
+
+## Prop - closable
+
+```vue
+
+
+
+ You've unlocked achievement.
+
+
+ Improve password difficulty.
+
+
+ Item moved successfully.
+
+
+ Item has been deleted.
+
+
+```
+
+
+
+## Prop - divide
+
+```vue
+
+
+
+ You've unlocked achievement.
+
+
+ Improve password difficulty.
+
+
+ Item moved successfully.
+
+
+ Item has been deleted.
+
+
+```
+
+
+
+## Message
+
+```vue
+
+
+
+
+
+
+
Jese Leos
+
Hi Neil, thanks for sharing your thoughts regarding Flowbite.
+
Reply
+
+
+```
+
+
+
+## Interactive
+
+```vue
+
+
+
+
+
+
+
Jese Leos
+
Hi Neil, thanks for sharing your thoughts regarding Flowbite.
+
Reply
+
+
+```
+
+
+
+## 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
+
+
+
+
+
+
+
+
+ Scroll down to see more examples.
+
+
+
+
+
+
+
+
+ You have new friend request.
+
+
+
+
+
+
+
+ Your airpods connected.
+
+
+```
+
+
diff --git a/src/components/Button/Button.vue b/src/components/Button/Button.vue
index c8c3608..f466be0 100644
--- a/src/components/Button/Button.vue
+++ b/src/components/Button/Button.vue
@@ -1,5 +1,5 @@
-
+
@@ -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']
+})
+
diff --git a/src/components/Toast/Toast.vue b/src/components/Toast/Toast.vue
index 7000cc9..2653108 100644
--- a/src/components/Toast/Toast.vue
+++ b/src/components/Toast/Toast.vue
@@ -1,32 +1,63 @@
-
-
-
+
-
diff --git a/src/components/Toast/composables/useToastClasses.ts b/src/components/Toast/composables/useToastClasses.ts
index 42c47db..9e03740 100644
--- a/src/components/Toast/composables/useToastClasses.ts
+++ b/src/components/Toast/composables/useToastClasses.ts
@@ -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
+ wrapperClasses: Ref
+ contentClasses: Ref
}
type UseToastClassesProps = {
type: Ref
+ divide: Ref
+ alignment: Ref
}
const typeClassesMap: Record = {
@@ -17,13 +23,36 @@ const typeClassesMap: Record = {
warning: 'text-orange-500 bg-orange-100 dark:bg-orange-700 dark:text-orange-200',
}
+
+const wrapperAlignmentClasses: Record = {
+ 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,
}
}
diff --git a/src/components/Toast/types.ts b/src/components/Toast/types.ts
index 68ef43c..48e20c5 100644
--- a/src/components/Toast/types.ts
+++ b/src/components/Toast/types.ts
@@ -1 +1,2 @@
export type ToastPreset = 'success' | 'warning' | 'danger' | 'empty'
+export type ToastAlign = 'start' | 'center' | 'end'
diff --git a/src/components/utils/FlowbiteThemable/components/FlowbiteThemableChild/FlowbiteThemableChild.vue b/src/components/utils/FlowbiteThemable/components/FlowbiteThemableChild/FlowbiteThemableChild.vue
index 5fc5b62..e940a80 100644
--- a/src/components/utils/FlowbiteThemable/components/FlowbiteThemableChild/FlowbiteThemableChild.vue
+++ b/src/components/utils/FlowbiteThemable/components/FlowbiteThemableChild/FlowbiteThemableChild.vue
@@ -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,
+ default: undefined,
+ },
})
const { classes } = useFlowbiteThemableChildClasses(toRefs(props))
diff --git a/src/components/utils/FlowbiteThemable/components/FlowbiteThemableChild/composables/useFlowbiteThemableChildClasses.ts b/src/components/utils/FlowbiteThemable/components/FlowbiteThemableChild/composables/useFlowbiteThemableChildClasses.ts
index b0fe1de..00a41d3 100644
--- a/src/components/utils/FlowbiteThemable/components/FlowbiteThemableChild/composables/useFlowbiteThemableChildClasses.ts
+++ b/src/components/utils/FlowbiteThemable/components/FlowbiteThemableChild/composables/useFlowbiteThemableChildClasses.ts
@@ -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
@@ -11,11 +12,12 @@ type UseFlowbiteThemableChildReturns = {
type UseFlowbiteThemableChildProps = {
apply: Ref
+ theme?: Ref
}
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 ''
diff --git a/src/components/utils/FlowbiteThemable/composables/useFlowbiteThemable.ts b/src/components/utils/FlowbiteThemable/composables/useFlowbiteThemable.ts
index f000aca..195f75c 100644
--- a/src/components/utils/FlowbiteThemable/composables/useFlowbiteThemable.ts
+++ b/src/components/utils/FlowbiteThemable/composables/useFlowbiteThemable.ts
@@ -63,41 +63,45 @@ const flowbiteThemeClasses: FlowbiteThemes = {
}
-export function useFlowbiteThemable(): UseFlowbiteThemableReturns {
+export function useFlowbiteThemable(_theme?: FlowbiteTheme): UseFlowbiteThemableReturns {
const theme = inject>(FLOWBITE_THEMABLE_INJECTION_KEY, ref(null))
const isActive = computed(() => !!theme?.value)
const color = computed(() => theme?.value || undefined)
+ const themeName = computed(() => {
+ return _theme || theme.value
+ })
+
const backgroundClasses = computed(() => {
- if(!theme.value) return ''
- return flowbiteThemeClasses[theme.value].background
+ if(!themeName.value) return ''
+ return flowbiteThemeClasses[themeName.value].background
})
const disabledClasses = computed(() => {
- if(!theme.value) return ''
- return flowbiteThemeClasses[theme.value].disabled
+ if(!themeName.value) return ''
+ return flowbiteThemeClasses[themeName.value].disabled
})
const hoverClasses = computed(() => {
- if(!theme.value) return ''
- return flowbiteThemeClasses[theme.value].hover
+ if(!themeName.value) return ''
+ return flowbiteThemeClasses[themeName.value].hover
})
const textClasses = computed(() => {
- if(!theme.value) return ''
- return flowbiteThemeClasses[theme.value].text
+ if(!themeName.value) return ''
+ return flowbiteThemeClasses[themeName.value].text
})
const borderClasses = computed(() => {
- if(!theme.value) return ''
- return flowbiteThemeClasses[theme.value].border
+ if(!themeName.value) return ''
+ return flowbiteThemeClasses[themeName.value].border
})
const focusClasses = computed(() => {
- if(!theme.value) return ''
- return flowbiteThemeClasses[theme.value].focus
+ if(!themeName.value) return ''
+ return flowbiteThemeClasses[themeName.value].focus
})
return {
+
+ Jese Leos
+