feat: Globally define custom icon by type

jerrywu001 · Dec 18, 2024 · 9ec9491 · 9ec9491
1 parent 5d8bf46
commit 9ec9491
Show file tree

Hide file tree

Showing 2 changed files with 57 additions and 4 deletions.
diff --git a/docs/docs/usage/icons.md b/docs/docs/usage/icons.md
@@ -154,10 +154,30 @@ import { VNodeIcon } from './icons.tsx';
 import Vue3Toasity from 'vue3-toastify';
 import 'vue3-toastify/dist/index.css';
 
+const ResolveCustomIcon = (props: IconProps) => {
+  switch (props.type) {
+    case 'default':
+      return '👌';
+    case 'loading':
+      return '...';
+    case 'info':
+      return '🎈';
+    case 'success':
+      return '✌️';
+    case 'error':
+      return '🤣';
+    case 'warning':
+      return '😢';
+    default:
+      return undefined;
+  }
+};
+
 createApp(App).use(
   Vue3Toasity,
   {
-    icon: VNodeIcon,
+    icon: ResolveCustomIcon, // use function
+    // icon: VNodeIcon, // use Unified icon
   },
 ).mount('#app');
 ```

diff --git a/src/types.ts b/src/types.ts
@@ -45,7 +45,7 @@ export type IconType =
   | string
   | number
   | VNode
-  | ((props: IconProps) => VNode)
+  | ((props: IconProps) => VNode | string | undefined | null)
   | DefineComponent<IconProps, {}, {}>;
 
 export type CloseBtnType =
@@ -165,6 +165,41 @@ export interface Options {
    * @default -
    */
   icon?: IconType;
+  /** props of custom component */
+  contentProps?: Record<string, any>;
+  /**
+   * use with `contentProps`, allow to pass custom props to the custom component
+   * @default false
+   *
+   * how to receive custom props in the custom component:
+   *
+   * - expandCustomProps: false
+   *
+   * ```ts
+   * defineProps({
+   *   contentProps: {
+   *     type: Object as PropType<{ title: string; color: String }>,
+   *     default: () => ({}),
+   *  },
+   * });
+   * ```
+   *
+   * - expandCustomProps: true
+   *
+   * ```ts
+   * defineProps({
+  *   title: {
+  *     type: String,
+  *     default: '',
+  *   },
+  *   color: {
+  *     type: String,
+  *     default: '',
+  *   },
+  * });
+   * ```
+   */
+  expandCustomProps?: boolean;
   /** app use hander */
   useHandler?: (app: App<Element>) => void;
 }
@@ -264,8 +299,6 @@ export interface ToastOptions<Data = {}> extends Options {
 
   /** Only available when using `toast.loading' */
   isLoading?: boolean;
-
-  contentProps?: Object;
 }
 
 /**