diff --git a/.gitignore b/.gitignore
index 0eae589..2d5f6f5 100644
--- a/.gitignore
+++ b/.gitignore
@@ -17,6 +17,7 @@ dist-ssr
.vscode/*
!.vscode/extensions.json
.idea
+temp
.DS_Store
*.suo
*.ntvs*
diff --git a/README.md b/README.md
index 8393ee7..03abd9a 100644
--- a/README.md
+++ b/README.md
@@ -50,6 +50,8 @@ https://user-images.githubusercontent.com/6118824/228208185-be5aefd4-7fa8-4f95-a
- [Expanded](#expanded)
- [Styling for all toasts](#styling-for-all-toasts)
- [Styling for individual toast](#styling-for-individual-toast)
+ - [Tailwind CSS](#tailwind-css)
+ - [Changing Icon](#changing-icon)
- [Close button](#close-button)
- [Rich colors](#rich-colors)
- [Custom offset](#custom-offset)
@@ -304,6 +306,82 @@ toast('Event has been created', {
})
```
+### Tailwind CSS
+
+The preferred way to style the toasts with tailwind is by using the `unstyled` prop. That will give you an unstyled toast which you can then style with tailwind.
+
+```vue
+
+```
+
+You can do the same when calling `toast()`.
+
+```ts
+toast('Hello World', {
+ unstyled: true,
+ classes: {
+ toast: 'bg-blue-400',
+ title: 'text-red-400 text-2xl',
+ description: 'text-red-400',
+ actionButton: 'bg-zinc-400',
+ cancelButton: 'bg-orange-400',
+ closeButton: 'bg-lime-400'
+ }
+})
+```
+
+Styling per toast type is also possible.
+
+```vue
+
+```
+
+### Changing Icon
+
+You can change the default icons using slots:
+
+```vue
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
### Close button
Add a close button to all toasts that shows on hover by adding the `closeButton` prop.
diff --git a/api-extractor.json b/api-extractor.json
new file mode 100644
index 0000000..3014f5b
--- /dev/null
+++ b/api-extractor.json
@@ -0,0 +1,31 @@
+{
+ "$schema": "https://developer.microsoft.com/json-schemas/api-extractor/v7/api-extractor.schema.json",
+ "mainEntryPointFilePath": "/temp/index.d.ts",
+ "bundledPackages": [],
+ "compiler": {
+ "tsconfigFilePath": "/tsconfig.build.json"
+ },
+ "apiReport": {
+ "enabled": false
+ },
+ "docModel": {
+ "enabled": false
+ },
+ "dtsRollup": {
+ "enabled": true,
+ "untrimmedFilePath": "/lib/.d.ts"
+ },
+ "tsdocMetadata": {
+ "enabled": false
+ },
+ "messages": {
+ "extractorMessageReporting": {
+ "ae-forgotten-export": {
+ "logLevel": "none"
+ },
+ "ae-missing-release-tag": {
+ "logLevel": "none"
+ }
+ }
+ }
+}
diff --git a/components.d.ts b/components.d.ts
index 5e09ca8..685dc5f 100644
--- a/components.d.ts
+++ b/components.d.ts
@@ -7,8 +7,6 @@ export {}
declare module 'vue' {
export interface GlobalComponents {
- 'Carbon:cafe': typeof import('~icons/carbon/cafe')['default']
- 'Carbon:logoTwitter': typeof import('~icons/carbon/logo-twitter')['default']
CheckIcon: typeof import('./src/components/icons/CheckIcon.vue')['default']
CopyIcon: typeof import('./src/components/icons/CopyIcon.vue')['default']
Expand: typeof import('./src/components/Expand.vue')['default']
@@ -17,7 +15,6 @@ declare module 'vue' {
HeadlessToastWithProps: typeof import('./src/components/HeadlessToastWithProps.vue')['default']
Hero: typeof import('./src/components/Hero.vue')['default']
Installation: typeof import('./src/components/Installation.vue')['default']
- 'Mdi:heart': typeof import('~icons/mdi/heart')['default']
Others: typeof import('./src/components/Others.vue')['default']
Position: typeof import('./src/components/Position.vue')['default']
Styling: typeof import('./src/components/Styling.vue')['default']
diff --git a/package.json b/package.json
index ebdd165..f93123a 100644
--- a/package.json
+++ b/package.json
@@ -6,7 +6,8 @@
"scripts": {
"dev": "vite",
"build:docs": "vite build --mode docs",
- "build:lib": "vite build --mode lib && vue-tsc -p tsconfig.build.json",
+ "build:lib": "vite build --mode lib && pnpm run build:types",
+ "build:types": "vue-tsc -p tsconfig.build.json && api-extractor run",
"preview": "vite preview",
"changelog": "conventional-changelog -p angular -i CHANGELOG.md -s -r 0"
},
@@ -23,7 +24,7 @@
"module": "./lib/vue-sonner.js",
"exports": {
".": {
- "types": "./lib/index.d.ts",
+ "types": "./lib/vue-sonner.d.ts",
"import": "./lib/vue-sonner.js",
"require": "./lib/vue-sonner.cjs"
}
@@ -31,10 +32,11 @@
"sideEffects": [
"**/*.css"
],
- "types": "./lib/index.d.ts",
+ "types": "./lib/vue-sonner.d.ts",
"license": "MIT",
"devDependencies": {
"@iconify/json": "^2.2.172",
+ "@microsoft/api-extractor": "^7.42.1",
"@types/node": "^18.19.8",
"@unocss/reset": "^0.58.5",
"@vitejs/plugin-vue": "^5.0.4",
@@ -49,6 +51,6 @@
"unplugin-vue-components": "^0.26.0",
"vite": "^5.1.4",
"vue": "^3.4.21",
- "vue-tsc": "^1.8.27"
+ "vue-tsc": "^2.0.1"
}
}
diff --git a/packages/Toaster.vue b/packages/Toaster.vue
index 5a844ca..6518771 100644
--- a/packages/Toaster.vue
+++ b/packages/Toaster.vue
@@ -5,6 +5,7 @@