Skip to content

Commit

Permalink
Merge pull request #10 from SteveYuOWO/feat/custom-images
Browse files Browse the repository at this point in the history
feat: support custom images
  • Loading branch information
SteveYuOWO authored Mar 26, 2024
2 parents c3e29ca + 1918885 commit 571dfa9
Showing 8 changed files with 45 additions and 5 deletions.
5 changes: 4 additions & 1 deletion .lintstagedrc.mjs
Original file line number Diff line number Diff line change
@@ -1,5 +1,8 @@
export default {
"src/**/*.{ts,vue}": [
"src/**/*.{ts,vue,css,scss}": [
"prettier --write",
],
"example/src/**/*.{ts,vue,css,scss}": [
"prettier --write",
],
};
13 changes: 12 additions & 1 deletion example/src/App.vue
Original file line number Diff line number Diff line change
@@ -2,6 +2,8 @@
import { onMounted } from "vue";
import { Toaster, toast } from "@steveyuowo/vue-hot-toast";
import "@steveyuowo/vue-hot-toast/vue-hot-toast.css";
import CustomIcon from './assets/icon.png';
import './custom.css';
onMounted(() => {
const id = toast.loading("Loading...")
@@ -11,8 +13,17 @@ onMounted(() => {
message: "Execution Success!"
})
}, 1000)
})
});
function toastCustomImages() {
toast.success("LFG!", {
icon: CustomIcon
})
}
</script>
<template>
<button @click="toastCustomImages">
Click Me
</button>
<Toaster />
</template>
Binary file added example/src/assets/icon.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 3 additions & 0 deletions example/src/custom.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
.VueHotToast__custom-icon {
border-radius: 9999px;
}
9 changes: 9 additions & 0 deletions pnpm-lock.yaml

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions src/components/Toaster.vue
Original file line number Diff line number Diff line change
@@ -18,6 +18,7 @@ import { globalState, removeToast } from "../core/store";
:message="item.message"
:auto-close="item.autoClose"
:duration="item.duration"
:icon="item.icon"
@close="
() => {
removeToast(item.id);
15 changes: 12 additions & 3 deletions src/components/ToasterItem.vue
Original file line number Diff line number Diff line change
@@ -28,9 +28,18 @@ watchEffect(() => {
@click.prevent="close"
>
<div class="VueHotToast__icon">
<div class="VueHotToast__checkmark" v-if="type === 'success'" />
<div class="VueHotToast__error" v-if="type === 'error'" />
<div class="VueHotToast__loading" v-if="type === 'loading'" />
<div v-if="icon">
<img
class="VueHotToast__custom-icon"
:src="icon"
:width="24"
:height="24"
alt="Toast Icon"
/>
</div>
<div class="VueHotToast__checkmark" v-else-if="type === 'success'" />
<div class="VueHotToast__error" v-else-if="type === 'error'" />
<div class="VueHotToast__loading" v-else-if="type === 'loading'" />
</div>
<div class="content">
<div class="content-message">{{ message }}</div>
4 changes: 4 additions & 0 deletions src/core/type.ts
Original file line number Diff line number Diff line change
@@ -20,6 +20,10 @@ export interface ToastProps {
* duration unit: millisecond
*/
duration: number;
/**
* Icon to be displayed alongside the toast message.
*/
icon?: string;
}

export type Id = string;

0 comments on commit 571dfa9

Please sign in to comment.