feat: initial toast

2022-07-25 15:57:18 +03:00
parent 8df67faaaa
commit 8cae1213b3
10 changed files with 69 additions and 51 deletions
--- a/docs/components/toast/examples/ToastExample.vue
+++ b/docs/components/toast/examples/ToastExample.vue
@@ -1,6 +1,14 @@
 <template>
-  <div class="vp-raw flex flex-col">
-    <Toast></Toast>
+  <div class="vp-raw flex align-center gap-2 flex-wrap">
+    <Toast :type="'warning'">
+      Improve password difficulty.
+    </Toast>
+    <Toast :type="'success'">
+      Item moved successfully.
+    </Toast>
+    <Toast :type="'danger'">
+      Item has been deleted.
+    </Toast>
  </div>
 </template>
 <script setup>
--- a/docs/components/toast/toast.md
+++ b/docs/components/toast/toast.md
@@ -8,7 +8,15 @@ import ToastExample from './examples/ToastExample.vue'
 import { Toast } from 'flowbite-vue'
 </script>
 <template>
-  <Toast></Toast>
+  <Toast type="warning">
+    Improve password difficulty.
+  </Toast>
+  <Toast type="success">
+    Item moved successfully.
+  </Toast>
+  <Toast type="danger">
+    Item has been deleted.
+  </Toast>
 </template>
 ```

--- a/src/components/Button/Button.vue
+++ b/src/components/Button/Button.vue
@@ -1,5 +1,5 @@
 <template>
-  <flowbite-themable-children tag="button" :apply="['background', 'hover', 'focus']" :class="wrapperClasses" :disabled="disabled">
+  <flowbite-themable-child tag="button" :apply="['background', 'hover', 'focus']" :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 />
@@ -23,7 +23,7 @@
      <spinner :color="spinnerColor" :size="spinnerSize" v-if="loadingSuffix" />
      <slot name="suffix" v-else />
    </div>
-  </flowbite-themable-children>
+  </flowbite-themable-child>
 </template>
 <script lang="ts" setup>
 import { computed, toRefs } from 'vue'
@@ -31,7 +31,8 @@ import type { PropType } from 'vue'
 import Spinner from '../Spinner/Spinner.vue'
 import { useButtonClasses } from './composables/useButtonClasses'
 import { useButtonSpinner } from './composables/useButtonSpinner'
-import FlowbiteThemableChildren from '../../components/utils/FlowbiteThemable/components/FlowbiteThemableChildren/FlowbiteThemableChildren.vue'
+import FlowbiteThemableChild from '../utils/FlowbiteThemable/components/FlowbiteThemableChild/FlowbiteThemableChild.vue'
+
 import type { ButtonGradient, ButtonMonochromeGradient, ButtonSize, ButtonVariant } from './types'
 const props = defineProps({
  color: {
--- a/src/components/Toast/Toast.vue
+++ b/src/components/Toast/Toast.vue
@@ -1,28 +1,32 @@
 <template>
-  <flowbite-themable :theme="'blue'">
-    <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">
-      <flowbite-themable-children v-if="icon" class="inline-flex flex-shrink-0 justify-center items-center w-8 h-8 rounded-lg text-white dark:text-white" :apply="['background', 'text']">
-        <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="M12.395 2.553a1 1 0 00-1.45-.385c-.345.23-.614.558-.822.88-.214.33-.403.713-.57 1.116-.334.804-.614 1.768-.84 2.734a31.365 31.365 0 00-.613 3.58 2.64 2.64 0 01-.945-1.067c-.328-.68-.398-1.534-.398-2.654A1 1 0 005.05 6.05 6.981 6.981 0 003 11a7 7 0 1011.95-4.95c-.592-.591-.98-.985-1.348-1.467-.363-.476-.724-1.063-1.207-2.03zM12.12 15.12A3 3 0 017 13s.879.5 2.5.5c0-1 .5-4 1.25-4.5.5 1 .786 1.293 1.371 1.879A2.99 2.99 0 0113 13a2.99 2.99 0 01-.879 2.121z" clip-rule="evenodd"></path></svg>
-      </flowbite-themable-children>
-      <div class="ml-3 text-sm font-normal">Set yourself free.</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">
-        <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 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>
+      <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>
-  </flowbite-themable>
+    <div class="ml-3 text-sm font-normal">
+      <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">
+      <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 FlowbiteThemableChildren from '../../components/utils/FlowbiteThemable/components/FlowbiteThemableChildren/FlowbiteThemableChildren.vue'
-import type { ToastPresetIcon } from '@/components/Toast/types'
+import type { ToastPreset } from '@/components/Toast/types'
 import type { PropType } from 'vue'
-import { FlowbiteThemable } from '../../index'
+import { useToastClasses } from './composables/useToastClasses'
+import { toRefs } from 'vue'

 const props = defineProps({
-  icon: {
-    type: String as PropType<ToastPresetIcon | ''>,
-    default: '',
+  type: {
+    type: String as PropType<ToastPreset>,
+    default: 'empty',
  },
 })

+const { typeClasses } = useToastClasses(toRefs(props))
+
 </script>
--- a/src/components/Toast/composables/useToastClasses.ts
+++ b/src/components/Toast/composables/useToastClasses.ts
@@ -1,34 +1,29 @@
 import type { Ref } from 'vue'
 import { computed } from 'vue'
-import type {
-    ThemableChildrenApply,
-} from '@/components/utils/FlowbiteThemable/components/FlowbiteThemableChildren/types'
-import { useFlowbiteThemable } from '@/components/utils/FlowbiteThemable/composables/useFlowbiteThemable'
+import type { ToastPreset } from '@/components/Toast/types'

-type UseThemableChildrenReturns = {
-    classes: Ref<string>
+type UseToastClassesReturns = {
+    typeClasses: Ref<string>
 }

-type UseThemableChildrenProps = {
-    apply: Ref<ThemableChildrenApply[]>
+type UseToastClassesProps = {
+    type: Ref<ToastPreset>
 }

-export function useFlowbiteThemableChildrenClasses(props: UseThemableChildrenProps): UseThemableChildrenReturns {
+const typeClassesMap: Record<ToastPreset, string> = {
+    danger: 'text-red-500 bg-red-100 dark:bg-red-800 dark:text-red-200',
+    empty: '',
+    success: 'text-green-500 bg-green-100 dark:bg-green-800 dark:text-green-200',
+    warning: 'text-orange-500 bg-orange-100 dark:bg-orange-700 dark:text-orange-200',
+}

-    const { textClasses, borderClasses, backgroundClasses, hoverClasses, disabledClasses, isActive } = useFlowbiteThemable()
+export function useToastClasses(props: UseToastClassesProps): UseToastClassesReturns {

-    const classes = computed(() => {
-        if(!isActive.value) return ''
-        const _classes = []
-        if(props.apply.value.includes('text')) _classes.push(textClasses)
-        if(props.apply.value.includes('border')) _classes.push(borderClasses)
-        if(props.apply.value.includes('background')) _classes.push(backgroundClasses)
-        if(props.apply.value.includes('hover')) _classes.push(hoverClasses)
-        if(props.apply.value.includes('disabled')) _classes.push(disabledClasses)
-        return _classes.join(' ')
+    const typeClasses = computed(() => {
+        return typeClassesMap[props.type.value]
    })

    return {
-        classes,
+        typeClasses,
    }
 }
--- a/src/components/Toast/types.ts
+++ b/src/components/Toast/types.ts
@@ -1 +1 @@
-export type ToastPresetIcon = 'success' | 'warning' | 'danger'
+export type ToastPreset = 'success' | 'warning' | 'danger' | 'empty'
--- a/src/components/utils/FlowbiteThemable/components/FlowbiteThemableChildren/FlowbiteThemableChildren.vue
+++ b/src/components/utils/FlowbiteThemable/components/FlowbiteThemableChildren/FlowbiteThemableChildren.vue
@@ -6,11 +6,11 @@
 <script lang="ts" setup>
 import type { PropType } from 'vue'
 import {
-  useFlowbiteThemableChildrenClasses,
-} from './composables/useFlowbiteThemableChildrenClasses'
+  useFlowbiteThemableChildClasses,
+} from './composables/useFlowbiteThemableChildClasses'
 import type {
  ThemableChildrenApply,
-} from '@/components/utils/FlowbiteThemable/components/FlowbiteThemableChildren/types'
+} from '@/components/utils/FlowbiteThemable/components/FlowbiteThemableChild/types'
 import { toRefs } from 'vue'
 import { simplifyTailwindClasses } from '../../../../../utils/simplifyTailwindClasses'

@@ -25,5 +25,5 @@ const props = defineProps({
  },
 })

-const { classes } = useFlowbiteThemableChildrenClasses(toRefs(props))
+const { classes } = useFlowbiteThemableChildClasses(toRefs(props))
 </script>
--- a/src/components/utils/FlowbiteThemable/components/FlowbiteThemableChildren/composables/useFlowbiteThemableChildrenClasses.ts
+++ b/src/components/utils/FlowbiteThemable/components/FlowbiteThemableChildren/composables/useFlowbiteThemableChildrenClasses.ts
@@ -5,15 +5,15 @@ import type {
 } from '../types'
 import { useFlowbiteThemable } from '../../../composables/useFlowbiteThemable'

-type UseThemableChildrenReturns = {
+type UseFlowbiteThemableChildReturns = {
    classes: Ref<string>
 }

-type UseThemableChildrenProps = {
+type UseFlowbiteThemableChildProps = {
    apply: Ref<ThemableChildrenApply[]>
 }

-export function useFlowbiteThemableChildrenClasses(props: UseThemableChildrenProps): UseThemableChildrenReturns {
+export function useFlowbiteThemableChildClasses(props: UseFlowbiteThemableChildProps): UseFlowbiteThemableChildReturns {

    const { textClasses, borderClasses, backgroundClasses, hoverClasses, disabledClasses, focusClasses, isActive } = useFlowbiteThemable()

--- a/src/components/utils/FlowbiteThemable/components/FlowbiteThemableChildren/types.ts
+++ b/src/components/utils/FlowbiteThemable/components/FlowbiteThemableChildren/types.ts
--- a/src/index.ts
+++ b/src/index.ts
@@ -6,6 +6,8 @@ export { default as Tabs } from './components/Tabs/Tabs.vue'
 export { default as Tab } from './components/Tabs/components/Tab/Tab.vue'
 export { default as Dropdown } from './components/Dropdown/Dropdown.vue'
 export { default as FlowbiteThemable } from './components/utils/FlowbiteThemable/FlowbiteThemable.vue'
+export { default as FlowbiteThemableChild } from './components/utils/FlowbiteThemable/components/FlowbiteThemableChild/FlowbiteThemableChild.vue'
+
 export { default as Accordion } from './components/Accordion/Accordion.vue'
 export { default as Avatar } from './components/Avatar/Avatar.vue'
 export { default as Badge } from './components/Badge/Badge.vue'