+
+ 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/docs/vite.config.ts b/docs/vite.config.ts
new file mode 100644
index 0000000..aa4c280
--- /dev/null
+++ b/docs/vite.config.ts
@@ -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
+ },
+ },
+})
diff --git a/package.json b/package.json
index 3913ec0..8bb14b5 100644
--- a/package.json
+++ b/package.json
@@ -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",
diff --git a/src/components/Button/Button.vue b/src/components/Button/Button.vue
index c26045e..f466be0 100644
--- a/src/components/Button/Button.vue
+++ b/src/components/Button/Button.vue
@@ -1,5 +1,5 @@
-
+
@@ -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']
+})
+
diff --git a/src/components/Tabs/Tabs.vue b/src/components/Tabs/Tabs.vue
index 8bf2c7c..ce49979 100644
--- a/src/components/Tabs/Tabs.vue
+++ b/src/components/Tabs/Tabs.vue
@@ -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'
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 a1c2063..195f75c 100644
--- a/src/components/utils/FlowbiteThemable/composables/useFlowbiteThemable.ts
+++ b/src/components/utils/FlowbiteThemable/composables/useFlowbiteThemable.ts
@@ -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 = {
}
-export function useFlowbiteThemable(): UseFlowbiteThemableReturns {
+export function useFlowbiteThemable(_theme?: FlowbiteTheme): UseFlowbiteThemableReturns {
- const theme = inject>(FLOWBITE_THEMABLE_INJECTION_KEY)
+ const theme = inject>(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 {
