feat: Pass porps to your custom compoonent

jerrywu001 · Dec 18, 2024 · 9189a1f · 9189a1f
1 parent 9ec9491
commit 9189a1f
Show file tree

Hide file tree

Showing 6 changed files with 166 additions and 64 deletions.
diff --git a/docs/docs/.vitepress/config.ts b/docs/docs/.vitepress/config.ts
@@ -148,6 +148,10 @@ function sidebarConfig() {
         //   text: 'Use a controlled progress bar',
         //   link: '/usage/use-a-controlled-progress-bar',
         // },
+        {
+          text: 'Pass props to custom component',
+          link: '/usage/pass-props-to-custom-component',
+        },
         {
           text: 'How to style',
           link: '/usage/how-to-style',

diff --git a/docs/docs/usage/pass-props-to-custom-component.md b/docs/docs/usage/pass-props-to-custom-component.md
@@ -0,0 +1,114 @@
+# Pass porps to your custom compoonent.
+
+> `expandCustomProps` default is false.
+
+- `expandCustomProps`: true
+
+::: sandbox
+```vue /src/App.vue
+<script setup lang="ts">
+import { toast } from 'vue3-toastify';
+import CustomComp from './CustomComp.vue';
+import 'vue3-toastify/dist/index.css';
+
+const notify = () => {
+  toast(CustomComp, {
+    type: 'warning',
+    expandCustomProps: true,
+    contentProps: {
+      title: 'hello world',
+      color: '#00a2ed',
+    },
+  });
+};
+</script>
+
+<template>
+  <div>
+    <button @click="notify">Notify !</button>
+  </div>
+</template>
+```
+
+```vue /src/CustomComp.vue
+<template>
+  <div :style="`color: ${color}`">
+    {{ title }}
+  </div>
+</template>
+
+<script setup lang="ts">
+defineProps({
+  title: {
+    type: String,
+    default: '',
+  },
+  color: {
+    type: String,
+    default: '',
+  },
+});
+</script>
+```
+:::
+
+- disable globally
+
+```ts
+app.use(
+  Vue3Toasity,
+  {
+    expandCustomProps: true, // default is false
+  } as ToastContainerOptions,
+);
+```
+
+- `expandCustomProps`: false
+
+::: sandbox
+```vue /src/App.vue
+<script setup lang="ts">
+import { toast } from 'vue3-toastify';
+import CustomComp from './CustomComp.vue';
+import 'vue3-toastify/dist/index.css';
+
+const notify = () => {
+  toast(CustomComp, {
+    type: 'warning',
+    contentProps: {
+      title: 'hello world',
+      color: '#00a2ed',
+    },
+  });
+};
+</script>
+
+<template>
+  <div>
+    <button @click="notify">Notify !</button>
+  </div>
+</template>
+```
+
+```vue /src/CustomComp.vue
+<template>
+  <div :style="`color: ${contentProps.color}`">
+    {{ contentProps.title }}
+  </div>
+</template>
+
+<script setup lang="ts">
+import { PropType } from 'vue';
+
+defineProps({
+  contentProps: {
+    type: Object as PropType<{ title: string; color: String }>,
+    default: () => ({}),
+  },
+});
+</script>
+```
+:::
+```
+
+
diff --git a/playground/src/components/constomCompo.vue b/playground/src/components/constomCompo.vue
@@ -1,10 +1,15 @@
 <template>
   <div>
-    {{ contentProps.title }}
+    <div>
+      {{ contentProps.title }}
+    </div>
+
+    <br>
+
+    <a-button type="primary" size="small" @click.prevent.stop="doALert">
+      Click me
+    </a-button>
   </div>
-  <a-button type="primary" size="small">
-    Click me
-  </a-button>
 </template>
 
 <script setup>
@@ -15,5 +20,9 @@ const props = defineProps({
   },
 });
 
+function doALert() {
+  alert(1);
+}
+
 console.log(props);
 </script>
diff --git a/playground/src/pages/index.vue b/playground/src/pages/index.vue
@@ -18,9 +18,12 @@ const onOptionsChange = (opts: ToastOptions) => {
 
 function showToast() {
   toast(constomCompo, {
-    contentProps: { title: 'narges1' },
     type: 'info',
     ...options.value,
+    contentProps: {
+      title: 'narges1',
+      color: '#ff0',
+    },
   });
 }
 

diff --git a/src/components/ToastItem.tsx b/src/components/ToastItem.tsx
@@ -51,13 +51,13 @@ const ToastItem = defineComponent({
       toastRef,
       loading,
       done: () => {
-        ToastActions.remove(item.toastId); 
+        ToastActions.remove(item.toastId);
       },
       ...getDefaultTransition(item.transition as ToastTransition, item.disabledEnterTransition),
       ...item,
     });
 
-    return () => 
+    return () =>
       <div
         id={item.toastId as string}
         class={className.value}
@@ -81,7 +81,7 @@ const ToastItem = defineComponent({
         >
           {/* icon */}
           {
-            toastIcon.value != null && 
+            toastIcon.value != null &&
             <div
               data-testid={`toast-icon-${item.type}`}
               class={
@@ -109,76 +109,43 @@ const ToastItem = defineComponent({
                     : toastIcon.value
               }
             </div>
-            
+
           }
 
           {/* content */}
           {
-            item.contentProps
-              ? 
-              <div data-testid="toast-content">
-                {h(
-                  toRaw(item.content) as any, { contentProps: item.contentProps },
-                )}
-              </div>
-              : 
-              <div data-testid="toast-content">
-                {
-                  isComponent(item.content as Content)
-                    ?
-                    h(
+            <div data-testid="toast-content">
+              {
+                isComponent(item.content as Content)
+                  ?
+                  h(
                   toRaw(item.content) as any,
                   {
                     toastProps: toRaw(item),
                     closeToast: hideToast,
                     data: item.data,
+                    ...item.expandCustomProps ? item.contentProps : { contentProps: item.contentProps || {} },
                   },
-                    )
-                    : isFn(item.content)
-                      ? (item.content as Function)({
-                        toastProps: toRaw(item),
-                        closeToast: hideToast,
-                        data: item.data,
-                      })
-                      : 
-                      item.dangerouslyHTMLString
-                        ? h('div', { innerHTML: item.content as string })
-                        : item.content
-
-                }
-              </div>
-          }
+                  )
+                  : isFn(item.content)
+                    ? (item.content as Function)({
+                      toastProps: toRaw(item),
+                      closeToast: hideToast,
+                      data: item.data,
+                    })
+                    :
+                    item.dangerouslyHTMLString
+                      ? h('div', { innerHTML: item.content as string })
+                      : item.content
 
-          {/* <div data-testid="toast-content">
-            {
-              isComponent(item.content as Content)
-                ?
-                h(
-                  toRaw(item.content) as any,
-                  {
-                    toastProps: toRaw(item),
-                    closeToast: hideToast,
-                    data: item.data,
-                  },
-                )
-                : isFn(item.content)
-                  ? (item.content as Function)({
-                    toastProps: toRaw(item),
-                    closeToast: hideToast,
-                    data: item.data,
-                  })
-                  : 
-                  item.dangerouslyHTMLString
-                    ? h('div', { innerHTML: item.content as string })
-                    : item.content
-                
-            }
-          </div> */}
+              }
+            </div>
+          }
         </div>
 
         {/* close button */}
         {
-          (item.closeButton === undefined || item.closeButton === true) && 
+          (item.closeButton === undefined || item.closeButton === true) &&
           <CloseButton
             theme={item.theme as ToastTheme}
             closeToast={(e) => {
@@ -187,7 +154,7 @@ const ToastItem = defineComponent({
               hideToast();
             }}
           />
-          
+
         }
 
         {

diff --git a/src/components/toastify-container/prop.ts b/src/components/toastify-container/prop.ts
@@ -184,6 +184,11 @@ const props = {
     required: false,
     default: null,
   },
+  expandCustomProps: {
+    type: Boolean,
+    required: false,
+    default: false,
+  },
 };
 
 export default props;