Skip to content
Permalink

Comparing changes

Choose two branches to see what’s changed or to start a new pull request. If you need to, you can also or learn more about diff comparisons.

Open a pull request

Create a new pull request by comparing changes across two branches. If you need to, you can also . Learn more about diff comparisons here.
base repository: xiaoluoboding/vue-sonner
Failed to load repositories. Confirm that selected base ref is valid, then try again.
Loading
base: main
Choose a base ref
...
head repository: hoppscotch/vue-sonner
Failed to load repositories. Confirm that selected head ref is valid, then try again.
Loading
compare: main
Choose a head ref
Can’t automatically merge. Don’t worry, you can still create the pull request.
  • 8 commits
  • 13 files changed
  • 2 contributors

Commits on May 30, 2024

  1. chore: update .github

    @AndrewBastin
    AndrewBastin committed May 30, 2024
    Copy the full SHA
    9d6503c View commit details

  2. chore: update package.json

    @AndrewBastin
    AndrewBastin committed May 30, 2024
    Copy the full SHA
    e792977 View commit details

  3. feat: multiple actions support and api improvements (#2)

    @anwarulislam
    anwarulislam authored May 30, 2024

    Verified

    This commit was created on GitHub.com and signed with GitHub’s verified signature.
    GPG key ID: B5690EEEBB952194
    Verified
    Learn about vigilant mode
    Copy the full SHA
    79bb083 View commit details

  4. chore: update version to 1.2.0

    @AndrewBastin
    AndrewBastin committed May 30, 2024
    Copy the full SHA
    848d798 View commit details

Commits on Jun 5, 2024

  1. chore: update version to 1.2.1

    @anwarulislam
    anwarulislam committed Jun 5, 2024
    Copy the full SHA
    3791137 View commit details

  2. chore: update version to 1.2.2

    @anwarulislam
    anwarulislam committed Jun 5, 2024
    Copy the full SHA
    3fb3614 View commit details

Commits on Jun 25, 2024

  1. chore: pnpm build lib

    @anwarulislam
    anwarulislam committed Jun 25, 2024
    Copy the full SHA
    c40ea12 View commit details

  2. chore: v1.2.3

    @anwarulislam
    anwarulislam committed Jun 25, 2024
    Copy the full SHA
    6ea1cdc View commit details
Showing with 2,569 additions and 1,606 deletions.
  1. +0 −3 .github/FUNDING.yml
  2. +34 −0 .github/workflows/publish-npm.yml
  3. +81 −66 CHANGELOG.md
  4. +4 −0 components.d.ts
  5. +6 −5 package.json
  6. +63 −42 packages/Toast.vue
  7. +7 −0 packages/styles.css
  8. +12 −4 packages/types.ts
  9. +2,209 −1,485 pnpm-lock.yaml
  10. BIN public/vue-sonner.mp4
  11. +63 −1 src/components/Others.vue
  12. +34 −0 src/components/Types.vue
  13. +56 −0 src/components/examples/New.vue
3 changes: 0 additions & 3 deletions .github/FUNDING.yml
View file

This file was deleted.

34 changes: 34 additions & 0 deletions .github/workflows/publish-npm.yml
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
name: Publish Package to NPM

on:
release:
types: [published]

jobs:
publish:
name: Publish
runs-on: ubuntu-latest
steps:
- name: Checkout
uses: actions/checkout@v3

- name: Setup pnpm
uses: pnpm/action-setup@v2.2.4
with:
version: 8
run_install: true

- name: Setup node
uses: actions/setup-node@v3
with:
node-version: ${{ matrix.node }}
registry-url: https://registry.npmjs.org/
cache: pnpm

- name: Build library and types
run: pnpm build:lib

- name: Publish package
run: pnpm publish --access public --no-git-checks
env:
NODE_AUTH_TOKEN: ${{ secrets.NPM_PUBLISH_ACCESS_TOKEN }}
147 changes: 81 additions & 66 deletions CHANGELOG.md
View file
Original file line number Diff line number Diff line change
@@ -1,225 +1,240 @@
## [1.1.2](https://github.com/xiaoluoboding/vue-sonner/compare/v1.1.1...v1.1.2) (2024-03-07)
# [1.2.0](https://github.com/hoppscotch/vue-sonner/compare/v1.1.2...v1.2.0) (2024-05-30)


### Bug Fixes

* changing index operator, adding '?' operator ([c03d9dc](https://github.com/xiaoluoboding/vue-sonner/commit/c03d9dc4f57402e8666001fd2c076353387a37aa))
* resolve [#56](https://github.com/xiaoluoboding/vue-sonner/issues/56) via checking for array type ([9e6d7e5](https://github.com/xiaoluoboding/vue-sonner/commit/9e6d7e52d028c0fa64a9ba05a89f9558526e4e71))
* **README:** Fix typo in markRaw import ([6a0b916](https://github.com/hoppscotch/vue-sonner/commit/6a0b916ad702162cb4c081df04f9ceac5edfe96f))


### Features

* multiple actions support and api improvements ([#2](https://github.com/hoppscotch/vue-sonner/issues/2)) ([79bb083](https://github.com/hoppscotch/vue-sonner/commit/79bb083a35c07a41fb045f2e8e2c92c7739f0a56))
* support dynamic position ([55102c4](https://github.com/hoppscotch/vue-sonner/commit/55102c46942ae86f9b6f7ec46f6ade9484cdb8e2))



## [1.1.2](https://github.com/hoppscotch/vue-sonner/compare/v1.1.1...v1.1.2) (2024-03-07)


### Bug Fixes

* changing index operator, adding '?' operator ([c03d9dc](https://github.com/hoppscotch/vue-sonner/commit/c03d9dc4f57402e8666001fd2c076353387a37aa))
* resolve [#56](https://github.com/hoppscotch/vue-sonner/issues/56) via checking for array type ([9e6d7e5](https://github.com/hoppscotch/vue-sonner/commit/9e6d7e52d028c0fa64a9ba05a89f9558526e4e71))



## [1.1.1](https://github.com/xiaoluoboding/vue-sonner/compare/v1.1.0...v1.1.1) (2024-03-02)
## [1.1.1](https://github.com/hoppscotch/vue-sonner/compare/v1.1.0...v1.1.1) (2024-03-02)


### Features

* add `@microsoft/api-extractor` to merge all types files in one d.ts file ([83f27fa](https://github.com/xiaoluoboding/vue-sonner/commit/83f27fa5150d681d330671df038c31b55517ce80))
* add `@microsoft/api-extractor` to merge all types files in one d.ts file ([83f27fa](https://github.com/hoppscotch/vue-sonner/commit/83f27fa5150d681d330671df038c31b55517ce80))



# [1.1.0](https://github.com/xiaoluoboding/vue-sonner/compare/v1.0.4...v1.1.0) (2024-03-01)
# [1.1.0](https://github.com/hoppscotch/vue-sonner/compare/v1.0.4...v1.1.0) (2024-03-01)


### Bug Fixes

* fixed the close button do not have fade animation bug ([6288840](https://github.com/xiaoluoboding/vue-sonner/commit/6288840e2b0c33fa744f2cba3d42b342c00c250e))
* fixed the default toast render the icon element bug ([0f57a19](https://github.com/xiaoluoboding/vue-sonner/commit/0f57a19a44a9d090173d1039acd7cfebd423f8ef))
* fixed the close button do not have fade animation bug ([6288840](https://github.com/hoppscotch/vue-sonner/commit/6288840e2b0c33fa744f2cba3d42b342c00c250e))
* fixed the default toast render the icon element bug ([0f57a19](https://github.com/hoppscotch/vue-sonner/commit/0f57a19a44a9d090173d1039acd7cfebd423f8ef))



## [1.0.4](https://github.com/xiaoluoboding/vue-sonner/compare/v1.0.3...v1.0.4) (2024-02-29)
## [1.0.4](https://github.com/hoppscotch/vue-sonner/compare/v1.0.3...v1.0.4) (2024-02-29)


### Bug Fixes

* blurry text in chromium ([c9aa8ba](https://github.com/xiaoluoboding/vue-sonner/commit/c9aa8ba50c425412ff159eda2788dff49c1ea683))
* blurry text in chromium ([c9aa8ba](https://github.com/hoppscotch/vue-sonner/commit/c9aa8ba50c425412ff159eda2788dff49c1ea683))


### Features

* allow setting position when creating a toast ([0326cea](https://github.com/xiaoluoboding/vue-sonner/commit/0326ceaefac7e26643bff2d2825f79bbfbde1269))
* change the style ([4b73c89](https://github.com/xiaoluoboding/vue-sonner/commit/4b73c896840b27999fd0eb33cbe32a7ef0349f85))
* allow setting position when creating a toast ([0326cea](https://github.com/hoppscotch/vue-sonner/commit/0326ceaefac7e26643bff2d2825f79bbfbde1269))
* change the style ([4b73c89](https://github.com/hoppscotch/vue-sonner/commit/4b73c896840b27999fd0eb33cbe32a7ef0349f85))



## [1.0.3](https://github.com/xiaoluoboding/vue-sonner/compare/v1.0.2...v1.0.3) (2024-01-24)
## [1.0.3](https://github.com/hoppscotch/vue-sonner/compare/v1.0.2...v1.0.3) (2024-01-24)


### Bug Fixes

* fixed the [#39](https://github.com/xiaoluoboding/vue-sonner/issues/39) problem ([77ff63f](https://github.com/xiaoluoboding/vue-sonner/commit/77ff63f221652b48290acf1516bc093f17faf719))
* **type:** fixed the type ([6ee1ca4](https://github.com/xiaoluoboding/vue-sonner/commit/6ee1ca42f7104f40d0c2524fd27659c4bea5a607))
* fixed the [#39](https://github.com/hoppscotch/vue-sonner/issues/39) problem ([77ff63f](https://github.com/hoppscotch/vue-sonner/commit/77ff63f221652b48290acf1516bc093f17faf719))
* **type:** fixed the type ([6ee1ca4](https://github.com/hoppscotch/vue-sonner/commit/6ee1ca42f7104f40d0c2524fd27659c4bea5a607))


### Features

* `inject-css` with simple vite plugin API inspired by bunchee inline-css ([f0ca814](https://github.com/xiaoluoboding/vue-sonner/commit/f0ca814f061a5592384309ef6339f1a319370e5a))
* add base `@vue/tsconfig`, `cjs` instead of `umd.cjs` ([c0a4d5c](https://github.com/xiaoluoboding/vue-sonner/commit/c0a4d5ceffaf726a0414b2100a7a472b8b871eea))
* generate `declaration` files with `vue-tsc` ([76311fb](https://github.com/xiaoluoboding/vue-sonner/commit/76311fb76d8c7d883ae5f99aa7b017a1865b8358))
* `inject-css` with simple vite plugin API inspired by bunchee inline-css ([f0ca814](https://github.com/hoppscotch/vue-sonner/commit/f0ca814f061a5592384309ef6339f1a319370e5a))
* add base `@vue/tsconfig`, `cjs` instead of `umd.cjs` ([c0a4d5c](https://github.com/hoppscotch/vue-sonner/commit/c0a4d5ceffaf726a0414b2100a7a472b8b871eea))
* generate `declaration` files with `vue-tsc` ([76311fb](https://github.com/hoppscotch/vue-sonner/commit/76311fb76d8c7d883ae5f99aa7b017a1865b8358))



## [1.0.2](https://github.com/xiaoluoboding/vue-sonner/compare/v1.0.1...v1.0.2) (2023-11-07)
## [1.0.2](https://github.com/hoppscotch/vue-sonner/compare/v1.0.1...v1.0.2) (2023-11-07)


### Bug Fixes

* fixed the promise bug ([c297881](https://github.com/xiaoluoboding/vue-sonner/commit/c297881bcbe28e20f5714038c9a75419609a7ab6))
* fixed the promise bug ([c297881](https://github.com/hoppscotch/vue-sonner/commit/c297881bcbe28e20f5714038c9a75419609a7ab6))



## [1.0.1](https://github.com/xiaoluoboding/vue-sonner/compare/v1.0.0...v1.0.1) (2023-11-03)
## [1.0.1](https://github.com/hoppscotch/vue-sonner/compare/v1.0.0...v1.0.1) (2023-11-03)


### Features

* make promise return promise ([9608865](https://github.com/xiaoluoboding/vue-sonner/commit/9608865c852e8d50709f9842d29b08994081cb64))
* make promise return promise ([9608865](https://github.com/hoppscotch/vue-sonner/commit/9608865c852e8d50709f9842d29b08994081cb64))



# [1.0.0](https://github.com/xiaoluoboding/vue-sonner/compare/v0.4.4...v1.0.0) (2023-10-31)
# [1.0.0](https://github.com/hoppscotch/vue-sonner/compare/v0.4.4...v1.0.0) (2023-10-31)


### Features

* add info & warning type for toast ([daaedce](https://github.com/xiaoluoboding/vue-sonner/commit/daaedcec33921f79ba24952b3b7b644b02ab6591))
* add info & warning type for toast ([daaedce](https://github.com/hoppscotch/vue-sonner/commit/daaedcec33921f79ba24952b3b7b644b02ab6591))



## [0.4.4](https://github.com/xiaoluoboding/vue-sonner/compare/v0.4.3...v0.4.4) (2023-08-30)
## [0.4.4](https://github.com/hoppscotch/vue-sonner/compare/v0.4.3...v0.4.4) (2023-08-30)


### Features

* export toaster props ([a183aab](https://github.com/xiaoluoboding/vue-sonner/commit/a183aaba9120e5e84845aff696231f0820dde985))
* export toaster props ([a183aab](https://github.com/hoppscotch/vue-sonner/commit/a183aaba9120e5e84845aff696231f0820dde985))



## [0.4.3](https://github.com/xiaoluoboding/vue-sonner/compare/v0.4.2...v0.4.3) (2023-08-06)
## [0.4.3](https://github.com/hoppscotch/vue-sonner/compare/v0.4.2...v0.4.3) (2023-08-06)


### Bug Fixes

* remove default offset ([c327753](https://github.com/xiaoluoboding/vue-sonner/commit/c327753a0f6da0700dbe17076ecc25cb8974412c))
* remove default offset ([c327753](https://github.com/hoppscotch/vue-sonner/commit/c327753a0f6da0700dbe17076ecc25cb8974412c))



## [0.4.2](https://github.com/xiaoluoboding/vue-sonner/compare/v0.4.1...v0.4.2) (2023-07-24)
## [0.4.2](https://github.com/hoppscotch/vue-sonner/compare/v0.4.1...v0.4.2) (2023-07-24)


### Bug Fixes

* exports types should be first ([18b6044](https://github.com/xiaoluoboding/vue-sonner/commit/18b6044d10715169d52cb12e2f1e6b7082314d1d))
* exports types should be first ([18b6044](https://github.com/hoppscotch/vue-sonner/commit/18b6044d10715169d52cb12e2f1e6b7082314d1d))



## [0.4.1](https://github.com/xiaoluoboding/vue-sonner/compare/v0.4.0...v0.4.1) (2023-07-24)
## [0.4.1](https://github.com/hoppscotch/vue-sonner/compare/v0.4.0...v0.4.1) (2023-07-24)


### Bug Fixes

* ignore type definitions ([9fe93d9](https://github.com/xiaoluoboding/vue-sonner/commit/9fe93d9f2a46e6908662b8da7245cd183771a799))
* ignore type definitions ([9fe93d9](https://github.com/hoppscotch/vue-sonner/commit/9fe93d9f2a46e6908662b8da7245cd183771a799))



# [0.4.0](https://github.com/xiaoluoboding/vue-sonner/compare/v0.3.3...v0.4.0) (2023-07-24)
# [0.4.0](https://github.com/hoppscotch/vue-sonner/compare/v0.3.3...v0.4.0) (2023-07-24)


### Features

* generate types ([1d17305](https://github.com/xiaoluoboding/vue-sonner/commit/1d17305a7e0eadf1682442dd2378b5ef3a940918))
* improve the types ([48215a4](https://github.com/xiaoluoboding/vue-sonner/commit/48215a4aaaeb77e10cef1c7da28da4262951bf1e))
* generate types ([1d17305](https://github.com/hoppscotch/vue-sonner/commit/1d17305a7e0eadf1682442dd2378b5ef3a940918))
* improve the types ([48215a4](https://github.com/hoppscotch/vue-sonner/commit/48215a4aaaeb77e10cef1c7da28da4262951bf1e))



## [0.3.3](https://github.com/xiaoluoboding/vue-sonner/compare/v0.3.2...v0.3.3) (2023-07-04)
## [0.3.3](https://github.com/hoppscotch/vue-sonner/compare/v0.3.2...v0.3.3) (2023-07-04)


### Bug Fixes

* custom component memory leaks ([2064312](https://github.com/xiaoluoboding/vue-sonner/commit/2064312e26f9bad0d8a42ff2abe3bcb6caa3bf66))
* custom styling with toastOptions ([65bf4ee](https://github.com/xiaoluoboding/vue-sonner/commit/65bf4ee94be5e8e474e9013d96c9f1ca2e1a8e47))
* custom component memory leaks ([2064312](https://github.com/hoppscotch/vue-sonner/commit/2064312e26f9bad0d8a42ff2abe3bcb6caa3bf66))
* custom styling with toastOptions ([65bf4ee](https://github.com/hoppscotch/vue-sonner/commit/65bf4ee94be5e8e474e9013d96c9f1ca2e1a8e47))



## [0.3.2](https://github.com/xiaoluoboding/vue-sonner/compare/v0.3.1...v0.3.2) (2023-05-15)
## [0.3.2](https://github.com/hoppscotch/vue-sonner/compare/v0.3.1...v0.3.2) (2023-05-15)


### Bug Fixes

* fixed typo ([05ad600](https://github.com/xiaoluoboding/vue-sonner/commit/05ad60021d88647d0ebdcf13b2afcad5a654713a))
* fixed typo ([4914ffb](https://github.com/xiaoluoboding/vue-sonner/commit/4914ffbd67fef8e52a73e2e3e86bfcee015749f6))
* fixed typo ([63b4c2a](https://github.com/xiaoluoboding/vue-sonner/commit/63b4c2af1fc203d71bb8249ad320e7fc8d8f9346))
* fixed typo ([05ad600](https://github.com/hoppscotch/vue-sonner/commit/05ad60021d88647d0ebdcf13b2afcad5a654713a))
* fixed typo ([4914ffb](https://github.com/hoppscotch/vue-sonner/commit/4914ffbd67fef8e52a73e2e3e86bfcee015749f6))
* fixed typo ([63b4c2a](https://github.com/hoppscotch/vue-sonner/commit/63b4c2af1fc203d71bb8249ad320e7fc8d8f9346))


### Features

* ability to add a cutom color icon ([eaaf175](https://github.com/xiaoluoboding/vue-sonner/commit/eaaf1759db6b5b3f2addfda4b80db47fc51b1b19))
* ability to add a cutom color icon ([eaaf175](https://github.com/hoppscotch/vue-sonner/commit/eaaf1759db6b5b3f2addfda4b80db47fc51b1b19))



## [0.3.1](https://github.com/xiaoluoboding/vue-sonner/compare/v0.3.0...v0.3.1) (2023-03-29)
## [0.3.1](https://github.com/hoppscotch/vue-sonner/compare/v0.3.0...v0.3.1) (2023-03-29)


### Bug Fixes

* fixed issue [#2](https://github.com/xiaoluoboding/vue-sonner/issues/2) ([c8adec1](https://github.com/xiaoluoboding/vue-sonner/commit/c8adec18ba44629b367056385b071d6eb0a7fc37))
* fixed issue [#2](https://github.com/hoppscotch/vue-sonner/issues/2) ([c8adec1](https://github.com/hoppscotch/vue-sonner/commit/c8adec18ba44629b367056385b071d6eb0a7fc37))


### Features

* add copy icon ([1cb61e8](https://github.com/xiaoluoboding/vue-sonner/commit/1cb61e848baa4718c3989578720efc5e6fead1c6))
* add header for SEO ([9571b9d](https://github.com/xiaoluoboding/vue-sonner/commit/9571b9d1fddfe201b716b1b968fe88fc5d8235b3))
* add seo meta ([9317f63](https://github.com/xiaoluoboding/vue-sonner/commit/9317f63dd905959e83e1ead320b043ec1047471a))
* change brand color ([ef97ea9](https://github.com/xiaoluoboding/vue-sonner/commit/ef97ea9af2759600016ac49214aa640c49658514))
* refactor to hooks ([eb3a578](https://github.com/xiaoluoboding/vue-sonner/commit/eb3a578d9c3de8a3f4b452598e95ac3228d72242))
* style for mobile ([1ace50b](https://github.com/xiaoluoboding/vue-sonner/commit/1ace50b5d6e6f975f0283927eb84bb67b88deab1))
* update video ([2f10ac1](https://github.com/xiaoluoboding/vue-sonner/commit/2f10ac18c52c68d50a81934a628a8dc1aa97f5eb))
* upload the video ([52761c8](https://github.com/xiaoluoboding/vue-sonner/commit/52761c8bec7808191a3a29b59ef111710e042905))
* add copy icon ([1cb61e8](https://github.com/hoppscotch/vue-sonner/commit/1cb61e848baa4718c3989578720efc5e6fead1c6))
* add header for SEO ([9571b9d](https://github.com/hoppscotch/vue-sonner/commit/9571b9d1fddfe201b716b1b968fe88fc5d8235b3))
* add seo meta ([9317f63](https://github.com/hoppscotch/vue-sonner/commit/9317f63dd905959e83e1ead320b043ec1047471a))
* change brand color ([ef97ea9](https://github.com/hoppscotch/vue-sonner/commit/ef97ea9af2759600016ac49214aa640c49658514))
* refactor to hooks ([eb3a578](https://github.com/hoppscotch/vue-sonner/commit/eb3a578d9c3de8a3f4b452598e95ac3228d72242))
* style for mobile ([1ace50b](https://github.com/hoppscotch/vue-sonner/commit/1ace50b5d6e6f975f0283927eb84bb67b88deab1))
* update video ([2f10ac1](https://github.com/hoppscotch/vue-sonner/commit/2f10ac18c52c68d50a81934a628a8dc1aa97f5eb))
* upload the video ([52761c8](https://github.com/hoppscotch/vue-sonner/commit/52761c8bec7808191a3a29b59ef111710e042905))



# [0.3.0](https://github.com/xiaoluoboding/vue-sonner/compare/v0.2.3...v0.3.0) (2023-03-28)
# [0.3.0](https://github.com/hoppscotch/vue-sonner/compare/v0.2.3...v0.3.0) (2023-03-28)


### Features

* add the inject css ([848bea7](https://github.com/xiaoluoboding/vue-sonner/commit/848bea7f668cd290217353937fca955ce403546a))
* add the inject css ([848bea7](https://github.com/hoppscotch/vue-sonner/commit/848bea7f668cd290217353937fca955ce403546a))



## [0.2.3](https://github.com/xiaoluoboding/vue-sonner/compare/v0.2.2...v0.2.3) (2023-03-28)
## [0.2.3](https://github.com/hoppscotch/vue-sonner/compare/v0.2.2...v0.2.3) (2023-03-28)


### Features

* add side effects ([6a879c4](https://github.com/xiaoluoboding/vue-sonner/commit/6a879c447b42a2314c27757c02602ee30cc5a8bf))
* add side effects ([6a879c4](https://github.com/hoppscotch/vue-sonner/commit/6a879c447b42a2314c27757c02602ee30cc5a8bf))



## [0.2.2](https://github.com/xiaoluoboding/vue-sonner/compare/v0.2.1...v0.2.2) (2023-03-28)
## [0.2.2](https://github.com/hoppscotch/vue-sonner/compare/v0.2.1...v0.2.2) (2023-03-28)



## [0.2.1](https://github.com/xiaoluoboding/vue-sonner/compare/v0.2.0...v0.2.1) (2023-03-28)
## [0.2.1](https://github.com/hoppscotch/vue-sonner/compare/v0.2.0...v0.2.1) (2023-03-28)


### Features

* change the highlight style ([56c9a4b](https://github.com/xiaoluoboding/vue-sonner/commit/56c9a4b6ffae59e6dcc7f79ad4c4238cd1702fb5))
* change the style import ([b0fe712](https://github.com/xiaoluoboding/vue-sonner/commit/b0fe71258bb831b6cca6e930cb7266a43c2e6188))
* change the highlight style ([56c9a4b](https://github.com/hoppscotch/vue-sonner/commit/56c9a4b6ffae59e6dcc7f79ad4c4238cd1702fb5))
* change the style import ([b0fe712](https://github.com/hoppscotch/vue-sonner/commit/b0fe71258bb831b6cca6e930cb7266a43c2e6188))



# [0.2.0](https://github.com/xiaoluoboding/vue-sonner/compare/v0.1.0...v0.2.0) (2023-03-28)
# [0.2.0](https://github.com/hoppscotch/vue-sonner/compare/v0.1.0...v0.2.0) (2023-03-28)


### Features

* add render custom component ([cf903c8](https://github.com/xiaoluoboding/vue-sonner/commit/cf903c82804dd97d6763f32781b30b932a74976c))
* add the custom vnode ([fdad68f](https://github.com/xiaoluoboding/vue-sonner/commit/fdad68f4a0e53adb212023c8ad2ac1265126713f))
* add the promise success/error callback ([6c7f784](https://github.com/xiaoluoboding/vue-sonner/commit/6c7f784fd2dcb896224816ad4fca78394f8f6631))
* handle close button ([1390fa7](https://github.com/xiaoluoboding/vue-sonner/commit/1390fa789d0d29e3f3cb2e3cd2787a0d46eda19a))
* add render custom component ([cf903c8](https://github.com/hoppscotch/vue-sonner/commit/cf903c82804dd97d6763f32781b30b932a74976c))
* add the custom vnode ([fdad68f](https://github.com/hoppscotch/vue-sonner/commit/fdad68f4a0e53adb212023c8ad2ac1265126713f))
* add the promise success/error callback ([6c7f784](https://github.com/hoppscotch/vue-sonner/commit/6c7f784fd2dcb896224816ad4fca78394f8f6631))
* handle close button ([1390fa7](https://github.com/hoppscotch/vue-sonner/commit/1390fa789d0d29e3f3cb2e3cd2787a0d46eda19a))



4 changes: 4 additions & 0 deletions components.d.ts
View file
Original file line number Diff line number Diff line change
@@ -7,6 +7,8 @@ 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']
@@ -15,6 +17,8 @@ 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']
New: typeof import('./src/components/examples/New.vue')['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']
11 changes: 6 additions & 5 deletions package.json
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
{
"name": "vue-sonner",
"version": "1.1.2",
"name": "@hoppscotch/vue-sonner",
"version": "1.2.3",
"type": "module",
"author": "xiaoluoboding <xiaoluoboding@gmail.com>",
"author": "Hoppscotch Team <support@hoppscotch.io>",
"scripts": {
"dev": "vite",
"build:docs": "vite build --mode docs",
@@ -13,9 +13,9 @@
},
"repository": {
"type": "git",
"url": "git+https://github.com/xiaoluoboding/vue-sonner.git"
"url": "git+https://github.com/hoppscotch/vue-sonner.git"
},
"homepage": "https://github.com/xiaoluoboding/vue-sonner",
"homepage": "https://github.com/hoppscotch/vue-sonner",
"files": [
"lib",
"volar.d.ts"
@@ -44,6 +44,7 @@
"@vueuse/core": "^10.9.0",
"@vueuse/head": "^2.0.0",
"clean-css": "^5.3.3",
"conventional-changelog-cli": "^5.0.0",
"highlight.js": "^11.9.0",
"typescript": "^5.3.3",
"unocss": "^0.58.5",
105 changes: 63 additions & 42 deletions packages/Toast.vue
View file
Original file line number Diff line number Diff line change
@@ -109,37 +109,51 @@
</div>
</template>
</div>
<template v-if="toast.cancel">
<button
:class="cn(classes?.cancelButton, toast.classes?.cancelButton)"
data-button
data-cancel
@click="
() => {
deleteToast()
if (toast.cancel?.onClick) {
toast.cancel.onClick()
}
}
"
>
{{ toast.cancel.label }}
</button>
</template>
<template v-if="toast.action">
<button
:class="cn(classes?.actionButton, toast.classes?.actionButton)"
data-button
@click="
(event) => {
toast.action?.onClick(event)
if (event.defaultPrevented) return
deleteToast()
}
"
>
{{ toast.action.label }}
</button>

<template v-if="toast.cancel || toast.action">
<div data-buttons="">
<template v-if="toast.cancel">
<button
:class="cn(classes?.cancelButton, toast.classes?.cancelButton)"
data-button
data-cancel
@click="
() => {
deleteToast()
if (toast.cancel?.onClick) {
toast.cancel.onClick()
}
}
"
>
{{ toast.cancel.label }}
</button>
</template>

<template v-if="toast.action">
<template
v-for="(action, index) in Array.isArray(toast.action)
? toast.action
: [toast.action]"
:key="index"
>
<button
:class="cn(classes?.actionButton, action?.classes)"
data-button
@click="
(event) => {
action.onClick(event, {
dismiss: deleteToast
})
if (event.defaultPrevented) return
}
"
>
{{ action.label }}
</button>
</template>
</template>
</div>
</template>
</template>
</li>
@@ -265,18 +279,24 @@ onMounted(() => {
emit('update:heights', newHeightArr as HeightT[])
})
const deleteToast = () => {
// Save the offset for the exit swipe animation
removed.value = true
offsetBeforeRemove.value = offset.value
const newHeights = props.heights.filter(
(height) => height.toastId !== props.toast.id
)
emit('update:heights', newHeights)
let timeoutId: ReturnType<typeof setTimeout>
const deleteToast = (delay = 0) => {
timeoutId = setTimeout(() => {
// Save the offset for the exit swipe animation
removed.value = true
offsetBeforeRemove.value = offset.value
const newHeights = props.heights.filter(
(height) => height.toastId !== props.toast.id
)
emit('update:heights', newHeights)
setTimeout(() => {
emit('removeToast', props.toast)
}, TIME_BEFORE_UNMOUNT)
}, delay)
setTimeout(() => {
emit('removeToast', props.toast)
}, TIME_BEFORE_UNMOUNT)
return timeoutId
}
const handleCloseToast = () => {
@@ -422,5 +442,6 @@ onUnmounted(() => {
)
emit('update:heights', newHeights)
}
clearTimeout(timeoutId)
})
</script>
7 changes: 7 additions & 0 deletions packages/styles.css
View file
Original file line number Diff line number Diff line change
@@ -106,6 +106,13 @@ html[dir='rtl'],
box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1), 0 0 0 2px rgba(0, 0, 0, 0.2);
}

[data-sonner-toast] [data-buttons] {
display: flex;
gap: 8px;
margin-left: var(--toast-button-margin-start);
margin-right: var(--toast-button-margin-end);
}

[data-sonner-toast][data-y-position='top'] {
top: 0;
--y: translateY(-100%);
16 changes: 12 additions & 4 deletions packages/types.ts
View file
Original file line number Diff line number Diff line change
@@ -48,6 +48,17 @@ export interface ToastIcons {
loading?: Component
}

export type ToastAction = {
label: string | Component
onClick: (
event: MouseEvent,
toast: {
dismiss: (delay?: number) => void
}
) => void
classes?: string
}

export type ToastT<T extends Component = Component> = {
id: number | string
title?: string | Component
@@ -62,10 +73,7 @@ export type ToastT<T extends Component = Component> = {
duration?: number
delete?: boolean
important?: boolean
action?: {
label: string | Component
onClick: (event: MouseEvent) => void
}
action?: ToastAction | ToastAction[]
cancel?: {
label: string | Component
onClick?: () => void
3,694 changes: 2,209 additions & 1,485 deletions pnpm-lock.yaml
View file

Large diffs are not rendered by default.

Binary file removed public/vue-sonner.mp4
View file
Binary file not shown.
64 changes: 63 additions & 1 deletion src/components/Others.vue
View file
Original file line number Diff line number Diff line change
@@ -49,6 +49,7 @@ import HeadlessToastWithProps from './HeadlessToastWithProps.vue'
import { useCopyCode } from '~/composables/useCopyCode'
import CopyIcon from '~/components/icons/CopyIcon.vue'
import CheckIcon from '~/components/icons/CheckIcon.vue'
import New from '~/components/examples/New.vue'
const emit = defineEmits(['setRichColors', 'setCloseButton'])
@@ -62,7 +63,15 @@ const allTypes = [
<Toaster richColors />
`,
action: () => {
toast.success('Event has been created')
toast.success('Event has been created', {
duration: Infinity,
action: {
label: 'Undo',
onClick: (e, toast) => {
toast.dismiss()
}
}
})
emit('setRichColors', true)
}
},
@@ -154,6 +163,59 @@ toast.warning(markRaw(HeadlessToastWithProps), {
}
})
}
},
{
name: 'Custom',
snippet: `import { markRaw } from 'vue'
import CustomComponent from './CustomComponent.vue'
toast.warning(markRaw(CustomComponent), {
componentProps: {
message: 'Prop message'
}
});`,
action: () => {
toast.custom(markRaw(New), {
duration: Infinity,
position: 'bottom-left'
})
}
},
{
name: 'Cancel and Action',
snippet: ` toast('Cancel and Action', {
duration: Infinity,
cancel: {
label: 'Cancel',
onClick: () => {
toast.dismiss()
}
},
action: {
label: 'Confirm',
onClick: () => {
toast.dismiss()
}
}
})`,
action: () => {
toast('Cancel and Action', {
duration: Infinity,
cancel: {
label: 'Cancel',
onClick: () => {
toast.dismiss()
}
},
action: {
label: 'Confirm',
onClick: () => {
toast.dismiss()
}
}
})
}
}
]
34 changes: 34 additions & 0 deletions src/components/Types.vue
View file
Original file line number Diff line number Diff line change
@@ -115,6 +115,40 @@ const allTypes = [
duration: 10000000
})
},
{
name: 'Multi Action',
snippet: `toast('Event has been created', {
action: [
{
label: 'Action 1',
onClick: () => alert('Do action 1')
},
{
label: 'Action 2',
onClick: () => alert('Do action 2')
}
],
})`,
action: () =>
toast.message('Event has been created', {
action: [
{
label: 'Action 1',
onClick: (e, toast) => {
alert('Do action 1')
toast.dismiss(200)
}
},
{
label: 'Action 2',
onClick: () => {
alert('Do action 2')
}
}
],
duration: 10000000
})
},
{
name: 'Promise',
snippet: `const promise = () => new Promise((resolve) => setTimeout(resolve, 2000));
56 changes: 56 additions & 0 deletions src/components/examples/New.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,56 @@
<template>
<div class="whats-new">
<p>v2024.4.3 is now available 🎉</p>
<p>
<a href="#">See what’s new -></a>
</p>
<button class="headlessClose" @click="$emit('closeToast')">
<svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor">
<path
d="M2.96967 2.96967C3.26256 2.67678 3.73744 2.67678 4.03033 2.96967L8 6.939L11.9697 2.96967C12.2626 2.67678 12.7374 2.67678 13.0303 2.96967C13.3232 3.26256 13.3232 3.73744 13.0303 4.03033L9.061 8L13.0303 11.9697C13.2966 12.2359 13.3208 12.6526 13.1029 12.9462L13.0303 13.0303C12.7374 13.3232 12.2626 13.3232 11.9697 13.0303L8 9.061L4.03033 13.0303C3.73744 13.3232 3.26256 13.3232 2.96967 13.0303C2.67678 12.7374 2.67678 12.2626 2.96967 11.9697L6.939 8L2.96967 4.03033C2.7034 3.76406 2.6792 3.3474 2.89705 3.05379L2.96967 2.96967Z"
></path>
</svg>
</button>
</div>
</template>

<script setup lang="ts"></script>

<style scoped>
.whats-new {
border: 1px solid #bcb78b;
background-color: #feffd2;
padding: 1rem;
position: relative;
border-radius: 0.5rem;
width: 225px;
}
.whats-new p {
font-size: 0.8rem;
color: #7e7103;
}
.whats-new a {
font-size: 0.7rem;
color: #868821;
}
.headlessClose {
position: absolute;
cursor: pointer;
top: 6px;
height: 24px;
width: 24px;
display: flex;
justify-content: center;
align-items: center;
right: 6px;
color: var(--gray10);
padding: 0;
background: transparent;
border: none;
transition: color 200ms;
}
.headlessClose:hover {
color: var(--gray12);
}
</style>