@dennykuo/glass-toast 0.1.1 → 0.1.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +19 -1
- package/README.md +24 -6
- package/README.zh-TW.md +24 -6
- package/dist/auto.js +1 -1
- package/dist/glass-toast.css +1 -1
- package/dist/glass-toast.js +1 -1
- package/dist/glass-toast.umd.cjs +2 -2
- package/dist/glass-toast.umd.js +2 -0
- package/dist/toast-GM0D-R2d.js +312 -0
- package/dist/toast.d.cts +7 -3
- package/dist/toast.d.ts +7 -3
- package/package.json +4 -4
- package/dist/toast-CaMQl-_l.js +0 -259
package/CHANGELOG.md
CHANGED
|
@@ -1,6 +1,24 @@
|
|
|
1
1
|
# Changelog
|
|
2
2
|
|
|
3
|
-
## 0.1.
|
|
3
|
+
## 0.1.2 (2026-11-15)
|
|
4
|
+
|
|
5
|
+
### Added
|
|
6
|
+
|
|
7
|
+
- Pass an open native `dialog` to show and announce a toast inside it. Closing the dialog clears its toasts.
|
|
8
|
+
|
|
9
|
+
### Fixed
|
|
10
|
+
|
|
11
|
+
- Retry actions run once at a time. Async actions keep the toast open while pending and allow a retry after failure.
|
|
12
|
+
- Toast stacks scroll on short screens so older actions and close buttons remain reachable.
|
|
13
|
+
- Non-finite durations use the default, and large durations are capped at the browser timer limit.
|
|
14
|
+
- Calling `show()` without a DOM returns a no-op dismiss function.
|
|
15
|
+
- The default jsDelivr link serves a browser JavaScript file while CommonJS keeps its existing entry.
|
|
16
|
+
|
|
17
|
+
### Changed
|
|
18
|
+
|
|
19
|
+
- Pages deploys after a clean install from npm and verifies the live docs, CDN examples, and demo after deployment.
|
|
20
|
+
|
|
21
|
+
## 0.1.1 (2026-11-14)
|
|
4
22
|
|
|
5
23
|
### Added
|
|
6
24
|
|
package/README.md
CHANGED
|
@@ -19,7 +19,7 @@ Glassmorphism toast notifications — vanilla JS, zero runtime dependencies, no
|
|
|
19
19
|
## Install
|
|
20
20
|
|
|
21
21
|
```bash
|
|
22
|
-
npm install @dennykuo/glass-toast@0.1.
|
|
22
|
+
npm install @dennykuo/glass-toast@0.1.2
|
|
23
23
|
```
|
|
24
24
|
|
|
25
25
|
## Quick start
|
|
@@ -58,7 +58,10 @@ success('Saved');
|
|
|
58
58
|
### 3. `<script>` tag (UMD, global `GlassToast`)
|
|
59
59
|
|
|
60
60
|
```html
|
|
61
|
-
<script src="https://unpkg.com/@dennykuo/glass-toast@0.1.
|
|
61
|
+
<script src="https://unpkg.com/@dennykuo/glass-toast@0.1.2"></script>
|
|
62
|
+
<!-- Or use jsDelivr
|
|
63
|
+
<script src="https://cdn.jsdelivr.net/npm/@dennykuo/glass-toast@0.1.2"></script>
|
|
64
|
+
-->
|
|
62
65
|
<script>
|
|
63
66
|
GlassToast.register(); // sets window.toast and injects styles
|
|
64
67
|
toast.info('Hello');
|
|
@@ -76,8 +79,9 @@ Returns a function that closes the toast. The shortcuts `success` / `error` / `w
|
|
|
76
79
|
| `type` | `'success' \| 'error' \| 'warning' \| 'info'` | `'info'` | Variant |
|
|
77
80
|
| `position` | `'top-right' \| 'bottom-right' \| 'bottom-center'` | `'top-right'` | Where the toast appears |
|
|
78
81
|
| `persistent` | `boolean` | `false` | When `true`, the toast never auto-dismisses and shows no progress bar |
|
|
79
|
-
| `duration` | `number` | `10000` for `error`, `5500` otherwise |
|
|
80
|
-
| `action` | `{ label, onClick }` | — |
|
|
82
|
+
| `duration` | `number` | `10000` for `error`, `5500` otherwise | Non-finite values use the default. Finite values ≤ 0 mean `persistent`. Positive values are capped at 2,147,483,647 ms. |
|
|
83
|
+
| `action` | `{ label, onClick }` | — | Runs once at a time and closes the toast on success. Without an explicit finite `duration`, action toasts are persistent. |
|
|
84
|
+
| `dialog` | `HTMLDialogElement` | — | Shows and announces the toast inside an open native dialog. Closing the dialog clears its toasts. |
|
|
81
85
|
|
|
82
86
|
Messages are written with `textContent` and never parsed as HTML, so any string is safe (`action.label` too).
|
|
83
87
|
|
|
@@ -89,6 +93,10 @@ error('Upload failed. Retry?', {
|
|
|
89
93
|
});
|
|
90
94
|
```
|
|
91
95
|
|
|
96
|
+
Return the Promise from `onClick` to pause the countdown until the request settles. If the callback throws or rejects, the library logs the error and lets the user retry. Handle any user-facing error details in your application.
|
|
97
|
+
|
|
98
|
+
On short screens, scroll the stack to reach older toasts. Tabbing to a button brings it into view.
|
|
99
|
+
|
|
92
100
|
### `dismissAll(options?)`
|
|
93
101
|
|
|
94
102
|
Clears every toast. **By default it only clears; later `show()` calls work as usual.** Pass `{ suppress: true }` to also block later toasts — useful when a session expires and you hard-navigate to the login page, so nothing flashes between the redirect and unload. A full page reload unblocks automatically; in an SPA without a reload, call `resume()`:
|
|
@@ -156,7 +164,17 @@ Use `persistent: true` for important messages or actions available only in the t
|
|
|
156
164
|
|
|
157
165
|
- Strict CSP (no inline `<style>`): import `'@dennykuo/glass-toast/style.css'` explicitly and call `register({ injectStyles: false })`
|
|
158
166
|
- Already loading the stylesheet yourself and want to avoid a duplicate: add a `data-glass-toast` attribute to your `<link>` / `<style>` and auto-injection will detect it and skip
|
|
159
|
-
- SSR:
|
|
167
|
+
- SSR: `show()` returns a no-op dismiss function when no DOM is available. Call it on the client to display a toast.
|
|
168
|
+
|
|
169
|
+
Pass the open `dialog` element to keep the toast and its controls inside a native modal. An unopened or detached dialog produces no toast.
|
|
170
|
+
|
|
171
|
+
```js
|
|
172
|
+
import { error } from '@dennykuo/glass-toast';
|
|
173
|
+
|
|
174
|
+
const dialog = document.querySelector('#upload-dialog');
|
|
175
|
+
dialog.showModal();
|
|
176
|
+
error('Upload failed', { dialog, persistent: true });
|
|
177
|
+
```
|
|
160
178
|
|
|
161
179
|
## Development
|
|
162
180
|
|
|
@@ -192,7 +210,7 @@ docs/
|
|
|
192
210
|
|
|
193
211
|
Pages sit flat in the `docs/` root, so links inside partials always use `./`. The package name and version come from `package.json` via `%PKG_NAME%` and friends.
|
|
194
212
|
|
|
195
|
-
CI checks pushes to `main` and `develop`, plus pull requests.
|
|
213
|
+
CI checks pushes to `main` and `develop`, plus pull requests. On `main`, CI installs the exact public npm version into a fresh project before deploying the docs. If deployment is skipped because the version is unpublished, run **CI** on `main` after publishing. After deployment, CI opens the live docs and verifies the version, CDN scripts, and the demo retry action. CI also checks the version in both READMEs.
|
|
196
214
|
|
|
197
215
|
The development-only `minimatch` override selects v11 while ESLint still requests v10,
|
|
198
216
|
to address [GHSA-g3hv-75wg-m249](https://github.com/isaacs/minimatch/security/advisories/GHSA-g3hv-75wg-m249).
|
package/README.zh-TW.md
CHANGED
|
@@ -19,7 +19,7 @@
|
|
|
19
19
|
## 安裝
|
|
20
20
|
|
|
21
21
|
```bash
|
|
22
|
-
npm install @dennykuo/glass-toast@0.1.
|
|
22
|
+
npm install @dennykuo/glass-toast@0.1.2
|
|
23
23
|
```
|
|
24
24
|
|
|
25
25
|
## 快速開始
|
|
@@ -58,7 +58,10 @@ success('儲存成功');
|
|
|
58
58
|
### 3. `<script>` 直接引入（UMD，全域 `GlassToast`）
|
|
59
59
|
|
|
60
60
|
```html
|
|
61
|
-
<script src="https://unpkg.com/@dennykuo/glass-toast@0.1.
|
|
61
|
+
<script src="https://unpkg.com/@dennykuo/glass-toast@0.1.2"></script>
|
|
62
|
+
<!-- 也可以改用 jsDelivr
|
|
63
|
+
<script src="https://cdn.jsdelivr.net/npm/@dennykuo/glass-toast@0.1.2"></script>
|
|
64
|
+
-->
|
|
62
65
|
<script>
|
|
63
66
|
GlassToast.register(); // 掛 window.toast + 注入樣式
|
|
64
67
|
toast.info('哈囉');
|
|
@@ -76,8 +79,9 @@ success('儲存成功');
|
|
|
76
79
|
| `type` | `'success' \| 'error' \| 'warning' \| 'info'` | `'info'` | 變體 |
|
|
77
80
|
| `position` | `'top-right' \| 'bottom-right' \| 'bottom-center'` | `'top-right'` | 顯示位置 |
|
|
78
81
|
| `persistent` | `boolean` | `false` | `true` 時不自動消失、無進度條 |
|
|
79
|
-
| `duration` | `number` | `error` 為 `10000`、其餘 `5500` |
|
|
80
|
-
| `action` | `{ label, onClick }` | — |
|
|
82
|
+
| `duration` | `number` | `error` 為 `10000`、其餘 `5500` | 非有限值使用預設。有指定有限值時，≤ 0 視為 `persistent`，正值上限為 2,147,483,647 毫秒。 |
|
|
83
|
+
| `action` | `{ label, onClick }` | — | 一次執行一個操作，成功後關閉。未指定有限的 `duration` 時，通知會持續顯示。 |
|
|
84
|
+
| `dialog` | `HTMLDialogElement` | — | 在已開啟的原生對話框內顯示與宣告通知。關閉對話框會清除其中的通知。 |
|
|
81
85
|
|
|
82
86
|
訊息走 `textContent`，不解析 HTML，塞什麼字串都安全（`action.label` 亦然）。
|
|
83
87
|
|
|
@@ -89,6 +93,10 @@ error('上傳失敗，是否重試？', {
|
|
|
89
93
|
});
|
|
90
94
|
```
|
|
91
95
|
|
|
96
|
+
`onClick` 回傳 Promise 時，通知會暫停倒數，等操作成功才關閉。回呼拋錯或 Promise 被拒絕時，套件會把錯誤記到 console 並允許重試。應用程式可自行向使用者顯示失敗原因。
|
|
97
|
+
|
|
98
|
+
短螢幕上可捲動堆疊查看較早的通知。使用 Tab 聚焦按鈕時，瀏覽器會將它捲入可見範圍。
|
|
99
|
+
|
|
92
100
|
### `dismissAll(options?)`
|
|
93
101
|
|
|
94
102
|
清空所有 toast。**預設只清空、不影響後續 `show()`**。若要鎖住後續 toast（供「session 過期 → 硬導航登入頁」情境，避免 redirect 與 unload 之間閃現新 toast）傳 `{ suppress: true }`；整頁重載後自動解鎖，SPA 不重載時用 `resume()` 解鎖：
|
|
@@ -156,7 +164,17 @@ dark 覆寫全部走 `:where()` 壓成與 base 相同的 specificity，你的覆
|
|
|
156
164
|
|
|
157
165
|
- 嚴格 CSP（禁 inline `<style>`）：改顯式 `import '@dennykuo/glass-toast/style.css'` + `register({ injectStyles: false })`
|
|
158
166
|
- 已自行載入 style.css 且想避免重複注入：在你的 `<link>` / `<style>` 加 `data-glass-toast` 屬性即可被偵測跳過
|
|
159
|
-
- SSR
|
|
167
|
+
- SSR：沒有 DOM 時，`show()` 回傳空的關閉函式。要顯示通知請在瀏覽器呼叫。
|
|
168
|
+
|
|
169
|
+
使用原生 modal 時，可傳入已開啟的 `dialog`，讓通知和按鈕留在對話框內。傳入尚未開啟或已從頁面移除的對話框時，不會顯示通知。
|
|
170
|
+
|
|
171
|
+
```js
|
|
172
|
+
import { error } from '@dennykuo/glass-toast';
|
|
173
|
+
|
|
174
|
+
const dialog = document.querySelector('#upload-dialog');
|
|
175
|
+
dialog.showModal();
|
|
176
|
+
error('上傳失敗', { dialog, persistent: true });
|
|
177
|
+
```
|
|
160
178
|
|
|
161
179
|
## 開發
|
|
162
180
|
|
|
@@ -192,7 +210,7 @@ docs/
|
|
|
192
210
|
|
|
193
211
|
頁面一律平放在 `docs/` 根目錄，partial 裡的站內連結都寫 `./`；套件名稱與版本以 `%PKG_NAME%` 等從 `package.json` 帶入。
|
|
194
212
|
|
|
195
|
-
CI 檢查 `main`、`develop` 的推送和 PR。`main`
|
|
213
|
+
CI 檢查 `main`、`develop` 的推送和 PR。`main` 會先在乾淨專案從公開 npm 安裝指定版本，再部署文件站。若因版本未發布而略過部署，發布後可在 `main` 手動執行 **CI**。部署完成後，CI 會打開正式站驗證版號、CDN 腳本和 Demo 的重試操作，並在檢查階段核對兩份 README 的版號。
|
|
196
214
|
|
|
197
215
|
開發依賴暫以 `minimatch` override 選用 v11，處理 ESLint 仍要求 v10 時的
|
|
198
216
|
[GHSA-g3hv-75wg-m249](https://github.com/isaacs/minimatch/security/advisories/GHSA-g3hv-75wg-m249)。
|
package/dist/auto.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { a as e, c as t, i as n, l as r, n as i, o as a, r as o, s, t as c } from "./toast-
|
|
1
|
+
import { a as e, c as t, i as n, l as r, n as i, o as a, r as o, s, t as c } from "./toast-GM0D-R2d.js";
|
|
2
2
|
// src/auto.js
|
|
3
3
|
e();
|
|
4
4
|
export { c as dismissAll, i as ensureStyles, o as error, n as info, e as register, a as resume, s as show, t as success, r as warning };
|
package/dist/glass-toast.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.glass-toast-container,.glass-toast,.glass-toast *{box-sizing:border-box}.glass-toast-announcer{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.glass-toast-container{z-index:2147483647;pointer-events:none;flex-direction:column;gap:.75rem;display:flex;position:fixed}.glass-toast-container--top-right{align-items:flex-end;top:
|
|
1
|
+
.glass-toast-container,.glass-toast,.glass-toast *{box-sizing:border-box}.glass-toast-announcer{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.glass-toast-container{width:min(26rem,100%);max-height:100dvh;padding:1rem;padding-top:max(1rem, env(safe-area-inset-top));padding-right:max(1rem, env(safe-area-inset-right));padding-bottom:max(1rem, env(safe-area-inset-bottom));padding-left:max(1rem, env(safe-area-inset-left));scrollbar-width:none;z-index:2147483647;pointer-events:none;flex-direction:column;gap:.75rem;display:flex;position:fixed;overflow:auto}.glass-toast-container[data-scrollable]{pointer-events:auto}.glass-toast-container--top-right{align-items:flex-end;top:0;right:0}.glass-toast-container--bottom-right{align-items:flex-end;bottom:0;right:0}.glass-toast-container--bottom-center{align-items:center;bottom:0;left:50%;transform:translate(-50%)}.glass-toast{--gt-bg:#fffc;--gt-bg-opaque:#fffffff5;--gt-border:#e5e7eb66;--gt-text:#4a5565;--gt-blur:24px;--gt-radius:1rem;--gt-shadow:0 4px 24px -4px #00000014, 0 1px 2px #0000000a;--gt-close-bg:#f9fafb;--gt-close-border:#e5e7eb;--gt-close-text:#667085;--gt-close-bg-hover:#f3f4f6;--gt-close-border-hover:#d1d5dc;--gt-close-text-hover:#4a5565;--gt-focus-ring:#2563eb;pointer-events:auto;background-color:var(--gt-bg);width:24rem;max-width:calc(100vw - 2rem);backdrop-filter:blur(var(--gt-blur));border:1px solid var(--gt-border);border-radius:var(--gt-radius);box-shadow:var(--gt-shadow);grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:.75rem;padding:.875rem 1rem;display:grid;position:relative;overflow:hidden}.glass-toast-container>.glass-toast{flex:none;max-width:100%}@supports not (backdrop-filter:blur(1px)){.glass-toast{background-color:var(--gt-bg-opaque)}}.glass-toast--success{--gt-pill-bg:#d0fae5;--gt-icon:#047857;--gt-bar:#00bb7f;--gt-ring:16, 185, 129}.glass-toast--error{--gt-pill-bg:#ffe2e2;--gt-icon:#dc2626;--gt-action-text:#b91c1c;--gt-bar:#ff6568;--gt-ring:239, 68, 68}.glass-toast--warning{--gt-pill-bg:#fef3c6;--gt-icon:#b45309;--gt-bar:#fcbb00;--gt-ring:245, 158, 11}.glass-toast--info{--gt-pill-bg:#e2eaf1;--gt-icon:#3a5b7a;--gt-bar:#6f92ad;--gt-ring:76, 112, 144}.glass-toast--animated{transition:all .28s cubic-bezier(0,0,.2,1)}.glass-toast--leaving{transition-timing-function:cubic-bezier(.4,0,1,1)}.glass-toast--enter,.glass-toast--faded{opacity:0}.glass-toast--enter[data-position=top-right],.glass-toast--enter[data-position=bottom-right]{transform:translate(2rem)}.glass-toast--enter[data-position=bottom-center]{transform:translateY(2rem)}.glass-toast__icon{background-color:var(--gt-pill-bg);width:1.75rem;height:1.75rem;color:var(--gt-icon);border-radius:.5rem;flex-shrink:0;justify-content:center;align-items:center;display:flex}.glass-toast__icon svg{flex-shrink:0;width:18px;height:18px;display:block}.glass-toast__message{min-width:0;color:var(--gt-text);overflow-wrap:anywhere;-webkit-line-clamp:5;line-clamp:5;-webkit-box-orient:vertical;margin:0;font-size:.9375rem;line-height:1.625;display:-webkit-box;overflow:hidden}.glass-toast__action{border:1px solid var(--gt-action-border,var(--gt-border));background-color:var(--gt-action-bg,transparent);min-width:0;max-width:100%;min-height:2rem;color:var(--gt-action-text,var(--gt-icon));font:inherit;overflow-wrap:anywhere;cursor:pointer;appearance:none;border-radius:.5rem;grid-area:2/2;place-self:center start;padding:.3125rem .75rem;font-size:.8125rem;font-weight:600;line-height:1.25;transition:background-color .15s cubic-bezier(.4,0,.2,1),border-color .15s cubic-bezier(.4,0,.2,1)}.glass-toast__action:hover{background-color:var(--gt-action-bg-hover,var(--gt-pill-bg))}.glass-toast__action[aria-disabled=true]{cursor:progress}.glass-toast__action:focus-visible{outline:2px solid var(--gt-focus-ring);outline-offset:2px}.glass-toast__close{border:1px solid var(--gt-close-border);background-color:var(--gt-close-bg);width:2rem;height:2rem;color:var(--gt-close-text);font:inherit;cursor:pointer;appearance:none;border-radius:9999px;grid-area:1/-2;justify-content:center;align-self:center;align-items:center;padding:0;transition:all .15s cubic-bezier(.4,0,.2,1);display:flex}.glass-toast__close:hover{background-color:var(--gt-close-bg-hover);border-color:var(--gt-close-border-hover);color:var(--gt-close-text-hover)}.glass-toast__close:focus-visible{outline:2px solid var(--gt-focus-ring);outline-offset:2px}.glass-toast__close svg{width:.875rem;height:.875rem;display:block}.glass-toast__bar{background-color:var(--gt-bar);opacity:.4;border-radius:9999px;height:2px;position:absolute;bottom:0;left:0}@media (width>=768px){.glass-toast__message{font-size:14px}.glass-toast:has(.glass-toast__action){grid-template-columns:auto minmax(0,1fr) minmax(0,35%) auto}.glass-toast:has(.glass-toast__action) .glass-toast__action{grid-area:1/3}}@media (prefers-color-scheme:dark){:where(:root:not([data-theme=light]):not(.light)) .glass-toast{--gt-bg:#1c1c1eb8;--gt-bg-opaque:#1c1c1eeb;--gt-border:#ffffff1a;--gt-text:#e5e7eb;--gt-close-bg:#ffffff0f;--gt-close-border:#ffffff1f;--gt-close-text:#cbd5e1;--gt-close-bg-hover:#ffffff1f;--gt-close-border-hover:#ffffff38;--gt-close-text-hover:#f1f5f9;--gt-focus-ring:#93c5fd;--gt-action-text:var(--gt-text);--gt-action-bg-hover:var(--gt-close-bg-hover)}}:where([data-theme=dark],.dark) .glass-toast{--gt-bg:#1c1c1eb8;--gt-bg-opaque:#1c1c1eeb;--gt-border:#ffffff1a;--gt-text:#e5e7eb;--gt-close-bg:#ffffff0f;--gt-close-border:#ffffff1f;--gt-close-text:#cbd5e1;--gt-close-bg-hover:#ffffff1f;--gt-close-border-hover:#ffffff38;--gt-close-text-hover:#f1f5f9;--gt-focus-ring:#93c5fd;--gt-action-text:var(--gt-text);--gt-action-bg-hover:var(--gt-close-bg-hover)}
|
package/dist/glass-toast.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
export { t as dismissAll, n as ensureStyles, r as error, i as info, a as register, o as resume, s as show, c as success, l as warning } from "./toast-
|
|
1
|
+
export { t as dismissAll, n as ensureStyles, r as error, i as info, a as register, o as resume, s as show, c as success, l as warning } from "./toast-GM0D-R2d.js";
|
package/dist/glass-toast.umd.cjs
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
(function(e,t){typeof exports==`object`&&typeof module<`u`?t(exports):typeof define==`function`&&define.amd?define([`exports`],t):(e=typeof globalThis<`u`?globalThis:e||self,t(e.GlassToast={}))})(this,function(e){Object.defineProperty(e,Symbol.toStringTag,{value:`Module`});var t={success:`<svg viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z" clip-rule="evenodd"/></svg>`,error:`<svg viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.28 7.22a.75.75 0 00-1.06 1.06L8.94 10l-1.72 1.72a.75.75 0 101.06 1.06L10 11.06l1.72 1.72a.75.75 0 101.06-1.06L11.06 10l1.72-1.72a.75.75 0 00-1.06-1.06L10 8.94 8.28 7.22z" clip-rule="evenodd"/></svg>`,warning:`<svg viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path fill-rule="evenodd" d="M8.485 2.495c.673-1.167 2.357-1.167 3.03 0l6.28 10.875c.673 1.167-.168 2.625-1.516 2.625H3.72c-1.347 0-2.189-1.458-1.515-2.625L8.485 2.495zM10 6a.75.75 0 01.75.75v3.5a.75.75 0 01-1.5 0v-3.5A.75.75 0 0110 6zm0 9a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd"/></svg>`,info:`<svg viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a.75.75 0 000 1.5h.253a.25.25 0 01.244.304l-.459 2.066A1.75 1.75 0 0010.747 15H11a.75.75 0 000-1.5h-.253a.25.25 0 01-.244-.304l.459-2.066A1.75 1.75 0 009.253 9H9z" clip-rule="evenodd"/></svg>`,close:`<svg viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path d="M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z"/></svg>`},n=`.glass-toast-container,.glass-toast,.glass-toast *{box-sizing:border-box}.glass-toast-announcer{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.glass-toast-container{z-index:2147483647;pointer-events:none;flex-direction:column;gap:.75rem;display:flex;position:fixed}.glass-toast-container--top-right{align-items:flex-end;top:
|
|
2
|
-
`))})}))}var
|
|
1
|
+
(function(e,t){typeof exports==`object`&&typeof module<`u`?t(exports):typeof define==`function`&&define.amd?define([`exports`],t):(e=typeof globalThis<`u`?globalThis:e||self,t(e.GlassToast={}))})(this,function(e){Object.defineProperty(e,Symbol.toStringTag,{value:`Module`});var t={success:`<svg viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z" clip-rule="evenodd"/></svg>`,error:`<svg viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.28 7.22a.75.75 0 00-1.06 1.06L8.94 10l-1.72 1.72a.75.75 0 101.06 1.06L10 11.06l1.72 1.72a.75.75 0 101.06-1.06L11.06 10l1.72-1.72a.75.75 0 00-1.06-1.06L10 8.94 8.28 7.22z" clip-rule="evenodd"/></svg>`,warning:`<svg viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path fill-rule="evenodd" d="M8.485 2.495c.673-1.167 2.357-1.167 3.03 0l6.28 10.875c.673 1.167-.168 2.625-1.516 2.625H3.72c-1.347 0-2.189-1.458-1.515-2.625L8.485 2.495zM10 6a.75.75 0 01.75.75v3.5a.75.75 0 01-1.5 0v-3.5A.75.75 0 0110 6zm0 9a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd"/></svg>`,info:`<svg viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a.75.75 0 000 1.5h.253a.25.25 0 01.244.304l-.459 2.066A1.75 1.75 0 0010.747 15H11a.75.75 0 000-1.5h-.253a.25.25 0 01-.244-.304l.459-2.066A1.75 1.75 0 009.253 9H9z" clip-rule="evenodd"/></svg>`,close:`<svg viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path d="M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z"/></svg>`},n=`.glass-toast-container,.glass-toast,.glass-toast *{box-sizing:border-box}.glass-toast-announcer{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.glass-toast-container{width:min(26rem,100%);max-height:100dvh;padding:1rem;padding-top:max(1rem, env(safe-area-inset-top));padding-right:max(1rem, env(safe-area-inset-right));padding-bottom:max(1rem, env(safe-area-inset-bottom));padding-left:max(1rem, env(safe-area-inset-left));scrollbar-width:none;z-index:2147483647;pointer-events:none;flex-direction:column;gap:.75rem;display:flex;position:fixed;overflow:auto}.glass-toast-container[data-scrollable]{pointer-events:auto}.glass-toast-container--top-right{align-items:flex-end;top:0;right:0}.glass-toast-container--bottom-right{align-items:flex-end;bottom:0;right:0}.glass-toast-container--bottom-center{align-items:center;bottom:0;left:50%;transform:translate(-50%)}.glass-toast{--gt-bg:#fffc;--gt-bg-opaque:#fffffff5;--gt-border:#e5e7eb66;--gt-text:#4a5565;--gt-blur:24px;--gt-radius:1rem;--gt-shadow:0 4px 24px -4px #00000014, 0 1px 2px #0000000a;--gt-close-bg:#f9fafb;--gt-close-border:#e5e7eb;--gt-close-text:#667085;--gt-close-bg-hover:#f3f4f6;--gt-close-border-hover:#d1d5dc;--gt-close-text-hover:#4a5565;--gt-focus-ring:#2563eb;pointer-events:auto;background-color:var(--gt-bg);width:24rem;max-width:calc(100vw - 2rem);-webkit-backdrop-filter:blur(var(--gt-blur));backdrop-filter:blur(var(--gt-blur));border:1px solid var(--gt-border);border-radius:var(--gt-radius);box-shadow:var(--gt-shadow);grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:.75rem;padding:.875rem 1rem;display:grid;position:relative;overflow:hidden}.glass-toast-container>.glass-toast{flex:none;max-width:100%}@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){.glass-toast{background-color:var(--gt-bg-opaque)}}.glass-toast--success{--gt-pill-bg:#d0fae5;--gt-icon:#047857;--gt-bar:#00bb7f;--gt-ring:16, 185, 129}.glass-toast--error{--gt-pill-bg:#ffe2e2;--gt-icon:#dc2626;--gt-action-text:#b91c1c;--gt-bar:#ff6568;--gt-ring:239, 68, 68}.glass-toast--warning{--gt-pill-bg:#fef3c6;--gt-icon:#b45309;--gt-bar:#fcbb00;--gt-ring:245, 158, 11}.glass-toast--info{--gt-pill-bg:#e2eaf1;--gt-icon:#3a5b7a;--gt-bar:#6f92ad;--gt-ring:76, 112, 144}.glass-toast--animated{transition:all .28s cubic-bezier(0,0,.2,1)}.glass-toast--leaving{transition-timing-function:cubic-bezier(.4,0,1,1)}.glass-toast--enter,.glass-toast--faded{opacity:0}.glass-toast--enter[data-position=top-right],.glass-toast--enter[data-position=bottom-right]{transform:translate(2rem)}.glass-toast--enter[data-position=bottom-center]{transform:translateY(2rem)}.glass-toast__icon{background-color:var(--gt-pill-bg);width:1.75rem;height:1.75rem;color:var(--gt-icon);border-radius:.5rem;flex-shrink:0;justify-content:center;align-items:center;display:flex}.glass-toast__icon svg{flex-shrink:0;width:18px;height:18px;display:block}.glass-toast__message{min-width:0;color:var(--gt-text);overflow-wrap:anywhere;-webkit-line-clamp:5;line-clamp:5;-webkit-box-orient:vertical;margin:0;font-size:.9375rem;line-height:1.625;display:-webkit-box;overflow:hidden}.glass-toast__action{border:1px solid var(--gt-action-border,var(--gt-border));background-color:var(--gt-action-bg,transparent);min-width:0;max-width:100%;min-height:2rem;color:var(--gt-action-text,var(--gt-icon));font:inherit;overflow-wrap:anywhere;cursor:pointer;appearance:none;border-radius:.5rem;grid-area:2/2;place-self:center start;padding:.3125rem .75rem;font-size:.8125rem;font-weight:600;line-height:1.25;transition:background-color .15s cubic-bezier(.4,0,.2,1),border-color .15s cubic-bezier(.4,0,.2,1)}.glass-toast__action:hover{background-color:var(--gt-action-bg-hover,var(--gt-pill-bg))}.glass-toast__action[aria-disabled=true]{cursor:progress}.glass-toast__action:focus-visible{outline:2px solid var(--gt-focus-ring);outline-offset:2px}.glass-toast__close{border:1px solid var(--gt-close-border);background-color:var(--gt-close-bg);width:2rem;height:2rem;color:var(--gt-close-text);font:inherit;cursor:pointer;appearance:none;border-radius:9999px;grid-area:1/-2;justify-content:center;align-self:center;align-items:center;padding:0;transition:all .15s cubic-bezier(.4,0,.2,1);display:flex}.glass-toast__close:hover{background-color:var(--gt-close-bg-hover);border-color:var(--gt-close-border-hover);color:var(--gt-close-text-hover)}.glass-toast__close:focus-visible{outline:2px solid var(--gt-focus-ring);outline-offset:2px}.glass-toast__close svg{width:.875rem;height:.875rem;display:block}.glass-toast__bar{background-color:var(--gt-bar);opacity:.4;border-radius:9999px;height:2px;position:absolute;bottom:0;left:0}@media (width>=768px){.glass-toast__message{font-size:14px}.glass-toast:has(.glass-toast__action){grid-template-columns:auto minmax(0,1fr) minmax(0,35%) auto}.glass-toast:has(.glass-toast__action) .glass-toast__action{grid-area:1/3}}@media (prefers-color-scheme:dark){:where(:root:not([data-theme=light]):not(.light)) .glass-toast{--gt-bg:#1c1c1eb8;--gt-bg-opaque:#1c1c1eeb;--gt-border:#ffffff1a;--gt-text:#e5e7eb;--gt-close-bg:#ffffff0f;--gt-close-border:#ffffff1f;--gt-close-text:#cbd5e1;--gt-close-bg-hover:#ffffff1f;--gt-close-border-hover:#ffffff38;--gt-close-text-hover:#f1f5f9;--gt-focus-ring:#93c5fd;--gt-action-text:var(--gt-text);--gt-action-bg-hover:var(--gt-close-bg-hover)}}:where([data-theme=dark],.dark) .glass-toast{--gt-bg:#1c1c1eb8;--gt-bg-opaque:#1c1c1eeb;--gt-border:#ffffff1a;--gt-text:#e5e7eb;--gt-close-bg:#ffffff0f;--gt-close-border:#ffffff1f;--gt-close-text:#cbd5e1;--gt-close-bg-hover:#ffffff1f;--gt-close-border-hover:#ffffff38;--gt-close-text-hover:#f1f5f9;--gt-focus-ring:#93c5fd;--gt-action-text:var(--gt-text);--gt-action-bg-hover:var(--gt-close-bg-hover)}`,r=280,i=12,a=1400,o={error:1e4},s=5500,c=2147483647,l=4,u=`info`,d=`top-right`,f=`Close`,p={success:`16, 185, 129`,error:`239, 68, 68`,warning:`245, 158, 11`,info:`76, 112, 144`},m={"top-right":`glass-toast-container--top-right`,"bottom-right":`glass-toast-container--bottom-right`,"bottom-center":`glass-toast-container--bottom-center`},h=`0 4px 24px -4px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04)`,g=!0,_=f;function v(){if(typeof document>`u`||document.querySelector(`style[data-glass-toast], link[data-glass-toast]`))return;let e=document.createElement(`style`);e.setAttribute(`data-glass-toast`,``),e.textContent=n,document.head.prepend(e)}var y=()=>window.matchMedia?.(`(prefers-reduced-motion: reduce)`).matches,b=new Map,x=new WeakMap,S=new WeakMap;function C(e){for(let[e,t]of b)e.isConnected||z(t);let t=b.get(e);return t||(t={root:e,containers:new Map,announcers:void 0},e.localName===`dialog`&&(t.onClose=()=>{e.open||z(t)},e.addEventListener(`close`,t.onClose)),b.set(e,t)),t}function w(e){for(let t of Object.values(e??{}))cancelAnimationFrame(t.frame),t.frame=void 0,t.pending.length=0,t.el.textContent=``}function T(e){let{announcers:t,root:n}=e;if(!(t?.status.el.isConnected&&t.alert.el.isConnected)){w(t);for(let e of Object.values(t??{}))e.el.remove();e.announcers=Object.fromEntries([`status`,`alert`].map(e=>{let t=document.createElement(`div`);return t.className=`glass-toast-announcer`,t.setAttribute(`role`,e),t.setAttribute(`aria-atomic`,`true`),n.appendChild(t),[e,{el:t,pending:[],frame:void 0}]}))}}function E(e,t,n,r){T(e);let i=e.announcers[n===`error`?`alert`:`status`];i.pending.push({toast:t,message:r}),i.frame===void 0&&(i.el.textContent=``,i.frame=requestAnimationFrame(()=>{i.frame=requestAnimationFrame(()=>{i.frame=void 0;let e=i.pending.splice(0);i.el.isConnected&&(i.el.textContent=e.filter(({toast:e})=>e.isConnected&&!e.dataset.dismissing).map(({message:e})=>e).join(`
|
|
2
|
+
`))})}))}var D=!1;function O(e){e.toggleAttribute(`data-scrollable`,e.scrollHeight>e.clientHeight)}function k(e){S.get(e)?.disconnect(),e.remove()}function A({root:e,containers:t},n){let r=t.get(n);if(r&&r.isConnected)return r;r&&k(r);let i=document.createElement(`div`);if(i.className=`glass-toast-container ${m[n]}`,i.dataset.toastContainer=n,i.tabIndex=-1,e.appendChild(i),t.set(n,i),typeof ResizeObserver==`function`){let e=new ResizeObserver(()=>O(i));e.observe(i),S.set(i,e)}return i}function j(e){let t=[...e.children].filter(e=>!e.dataset.dismissing);for(;t.length>=l;){let e=t.shift();x.has(e)?x.get(e).dismiss():e.remove()}}function M(e,t){if(e&&e.isConnected&&typeof e.focus==`function`&&(e.focus(),document.activeElement===e))return;let n=t.querySelector(`[data-toast-container] > .glass-toast:not([data-dismissing]) .glass-toast__close`);n&&n.focus()}function N(e,{type:n,position:r,persistent:i,duration:a,action:o}){let s=y(),c=document.createElement(`div`);c.dataset.position=r,c.className=[`glass-toast`,`glass-toast--${n}`,s?`glass-toast--faded`:`glass-toast--animated glass-toast--enter`].join(` `);let l=document.createElement(`span`);l.className=`glass-toast__icon`,l.innerHTML=t[n];let u=document.createElement(`p`);u.className=`glass-toast__message`,u.textContent=e,c.append(l,u);let d=null;o&&o.label&&(d=document.createElement(`button`),d.type=`button`,d.className=`glass-toast__action`,d.textContent=o.label,c.appendChild(d));let f=document.createElement(`button`);if(f.type=`button`,f.className=`glass-toast__close`,f.setAttribute(`aria-label`,_),f.innerHTML=t.close,c.appendChild(f),!i){let e=document.createElement(`div`);e.className=`glass-toast__bar`,e.style.width=`100%`,e.style.transition=`width ${a}ms linear`,c.appendChild(e)}return{el:c,btn:f,actionBtn:d}}function P(e,t){if(y()||typeof e.animate!=`function`)return;let n=getComputedStyle(e),r=n.getPropertyValue(`--gt-ring`).trim().replace(/\s*,\s*/g,`, `)||p[t],i=n.getPropertyValue(`--gt-shadow`).trim()||h;return e.animate([{boxShadow:`0 0 18px 6px rgba(${r}, 0.75), ${i}`,offset:0},{boxShadow:`0 0 22px 8px rgba(${r}, 0.7), ${i}`,offset:.35},{boxShadow:`0 0 56px 26px rgba(${r}, 0), ${i}`,offset:1}],{duration:a,easing:`ease-out`,fill:`none`})}function F(e,t,n){let r=e.parentElement;e.remove(),r&&r.children.length===0?(k(r),t.get(n)===r&&t.delete(n)):r&&O(r)}function I(e){if(y()){e.classList.add(`glass-toast--faded`);return}e.classList.add(`glass-toast--leaving`);let t=e.offsetHeight;e.style.height=`${t}px`,e.offsetHeight,e.classList.add(`glass-toast--enter`),e.style.height=`0px`,e.style.paddingTop=`0`,e.style.paddingBottom=`0`,e.style.borderTopWidth=`0`,e.style.borderBottomWidth=`0`,e.style.marginTop=`-${i}px`}function L(e,t={}){if(D||typeof document>`u`||!document.body)return()=>{};let{dialog:n}=t;if(n&&(!n.isConnected||!n.open))return()=>{};let{type:i=u,position:a=d,persistent:l=!1,action:f}=t;Object.hasOwn(p,i)||(i=u),Object.hasOwn(m,a)||(a=d);let h=Number.isFinite(t.duration),_=h?Math.min(t.duration,c):o[i]??s;(f&&f.label&&!h||_<=0)&&(l=!0),g&&v();let b=C(n??document.body),S=A(b,a);j(S);let{el:w,btn:T,actionBtn:k}=N(e,{type:i,position:a,persistent:l,duration:_,action:f}),L=document.activeElement,R=!S.contains(L)&&S.scrollHeight-S.clientHeight-S.scrollTop<=1;S.appendChild(w),O(S),R&&(S.scrollTop=S.scrollHeight);let z=w.querySelector(`.glass-toast__bar`),B,V,H,U,W,G=!1,K=!1,q,J,Y=()=>{clearTimeout(B),cancelAnimationFrame(H),cancelAnimationFrame(U),W?.cancel()},X=()=>{G||(G=!0,Y(),clearTimeout(V),x.delete(w),F(w,b.containers,a))},Z=()=>{G||w.dataset.dismissing||(w.isConnected?(w.dataset.dismissing=`true`,Y(),I(w),V=setTimeout(()=>{let e=w.contains(document.activeElement);X(),e&&M(L,b.root)},r)):X())};x.set(w,{dismiss:Z,remove:X,invoker:L}),E(b,w,i,e);let Q=y()?`glass-toast--faded`:`glass-toast--enter`;if(H=requestAnimationFrame(()=>{H=requestAnimationFrame(()=>{w.isConnected?(w.classList.remove(Q),W=P(w,i)):X()})}),T.addEventListener(`click`,Z),w.addEventListener(`keydown`,e=>{e.key===`Escape`&&(e.stopPropagation(),Z())}),!l){let e=_,t=Date.now();B=setTimeout(Z,e);let n=!1,r=!1,i=!1,a=()=>{z.style.transition=`width ${e}ms linear`,z.style.width=`0%`};U=requestAnimationFrame(()=>{U=requestAnimationFrame(a)}),q=()=>{if(n||G||w.dataset.dismissing)return;n=!0,clearTimeout(B),cancelAnimationFrame(U),e-=Date.now()-t;let r=z.getBoundingClientRect().width;z.style.transition=`none`,z.style.width=`${r}px`};let o=()=>{!n||G||w.dataset.dismissing||(n=!1,e<=0?Z():(t=Date.now(),B=setTimeout(Z,e),U=requestAnimationFrame(a)))};J=()=>{r||i||K||o()},w.addEventListener(`mouseenter`,()=>{r=!0,q()}),w.addEventListener(`mouseleave`,()=>{r=!1,J()}),w.addEventListener(`focusin`,()=>{i=!0,q()}),w.addEventListener(`focusout`,e=>{w.contains(e.relatedTarget)||(i=!1,J())})}if(k){let e=e=>{console.error(`glass-toast: action failed`,e),K=!1,G||w.dataset.dismissing||(k.removeAttribute(`aria-disabled`),J?.())};k.addEventListener(`click`,()=>{if(!(G||w.dataset.dismissing||K)){K=!0,k.setAttribute(`aria-disabled`,`true`),q?.();try{let t=f.onClick?.();typeof t?.then==`function`?Promise.resolve(t).then(Z,e):Z()}catch(t){e(t)}}})}return Z}function R({announcers:e,containers:t}){w(e);let n;for(let e of t.values()){for(let t of[...e.children]){let e=x.get(t);t.contains(document.activeElement)&&(n=e),e?.remove()}k(e)}return t.clear(),n}function z(e){R(e);for(let t of Object.values(e.announcers??{}))t.el.remove();e.onClose&&e.root.removeEventListener(`close`,e.onClose),b.delete(e.root)}function B({suppress:e=!1}={}){e&&(D=!0);let t;for(let e of b.values()){let n=R(e);n&&(t=()=>M(n.invoker,e.root))}t?.()}function V(){D=!1}function H(e,t){return L(e,{...t,type:`success`})}function U(e,t){return L(e,{...t,type:`error`})}function W(e,t){return L(e,{...t,type:`warning`})}function G(e,t){return L(e,{...t,type:`info`})}var K={show:L,success:H,error:U,warning:W,info:G,dismissAll:B,resume:V};function q({global:e=!0,injectStyles:t=!0,target:n,closeLabel:r}={}){if(g=t,_=typeof r==`string`&&r.trim()?r:f,t&&v(),typeof document<`u`&&document.body&&T(C(document.body)),e){let e=n??(typeof window<`u`?window:void 0);e&&(e.toast=K)}return K}e.dismissAll=B,e.ensureStyles=v,e.error=U,e.info=G,e.register=q,e.resume=V,e.show=L,e.success=H,e.warning=W});
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
(function(e,t){typeof exports==`object`&&typeof module<`u`?t(exports):typeof define==`function`&&define.amd?define([`exports`],t):(e=typeof globalThis<`u`?globalThis:e||self,t(e.GlassToast={}))})(this,function(e){Object.defineProperty(e,Symbol.toStringTag,{value:`Module`});var t={success:`<svg viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z" clip-rule="evenodd"/></svg>`,error:`<svg viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.28 7.22a.75.75 0 00-1.06 1.06L8.94 10l-1.72 1.72a.75.75 0 101.06 1.06L10 11.06l1.72 1.72a.75.75 0 101.06-1.06L11.06 10l1.72-1.72a.75.75 0 00-1.06-1.06L10 8.94 8.28 7.22z" clip-rule="evenodd"/></svg>`,warning:`<svg viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path fill-rule="evenodd" d="M8.485 2.495c.673-1.167 2.357-1.167 3.03 0l6.28 10.875c.673 1.167-.168 2.625-1.516 2.625H3.72c-1.347 0-2.189-1.458-1.515-2.625L8.485 2.495zM10 6a.75.75 0 01.75.75v3.5a.75.75 0 01-1.5 0v-3.5A.75.75 0 0110 6zm0 9a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd"/></svg>`,info:`<svg viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a.75.75 0 000 1.5h.253a.25.25 0 01.244.304l-.459 2.066A1.75 1.75 0 0010.747 15H11a.75.75 0 000-1.5h-.253a.25.25 0 01-.244-.304l.459-2.066A1.75 1.75 0 009.253 9H9z" clip-rule="evenodd"/></svg>`,close:`<svg viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path d="M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z"/></svg>`},n=`.glass-toast-container,.glass-toast,.glass-toast *{box-sizing:border-box}.glass-toast-announcer{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.glass-toast-container{width:min(26rem,100%);max-height:100dvh;padding:1rem;padding-top:max(1rem, env(safe-area-inset-top));padding-right:max(1rem, env(safe-area-inset-right));padding-bottom:max(1rem, env(safe-area-inset-bottom));padding-left:max(1rem, env(safe-area-inset-left));scrollbar-width:none;z-index:2147483647;pointer-events:none;flex-direction:column;gap:.75rem;display:flex;position:fixed;overflow:auto}.glass-toast-container[data-scrollable]{pointer-events:auto}.glass-toast-container--top-right{align-items:flex-end;top:0;right:0}.glass-toast-container--bottom-right{align-items:flex-end;bottom:0;right:0}.glass-toast-container--bottom-center{align-items:center;bottom:0;left:50%;transform:translate(-50%)}.glass-toast{--gt-bg:#fffc;--gt-bg-opaque:#fffffff5;--gt-border:#e5e7eb66;--gt-text:#4a5565;--gt-blur:24px;--gt-radius:1rem;--gt-shadow:0 4px 24px -4px #00000014, 0 1px 2px #0000000a;--gt-close-bg:#f9fafb;--gt-close-border:#e5e7eb;--gt-close-text:#667085;--gt-close-bg-hover:#f3f4f6;--gt-close-border-hover:#d1d5dc;--gt-close-text-hover:#4a5565;--gt-focus-ring:#2563eb;pointer-events:auto;background-color:var(--gt-bg);width:24rem;max-width:calc(100vw - 2rem);-webkit-backdrop-filter:blur(var(--gt-blur));backdrop-filter:blur(var(--gt-blur));border:1px solid var(--gt-border);border-radius:var(--gt-radius);box-shadow:var(--gt-shadow);grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:.75rem;padding:.875rem 1rem;display:grid;position:relative;overflow:hidden}.glass-toast-container>.glass-toast{flex:none;max-width:100%}@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){.glass-toast{background-color:var(--gt-bg-opaque)}}.glass-toast--success{--gt-pill-bg:#d0fae5;--gt-icon:#047857;--gt-bar:#00bb7f;--gt-ring:16, 185, 129}.glass-toast--error{--gt-pill-bg:#ffe2e2;--gt-icon:#dc2626;--gt-action-text:#b91c1c;--gt-bar:#ff6568;--gt-ring:239, 68, 68}.glass-toast--warning{--gt-pill-bg:#fef3c6;--gt-icon:#b45309;--gt-bar:#fcbb00;--gt-ring:245, 158, 11}.glass-toast--info{--gt-pill-bg:#e2eaf1;--gt-icon:#3a5b7a;--gt-bar:#6f92ad;--gt-ring:76, 112, 144}.glass-toast--animated{transition:all .28s cubic-bezier(0,0,.2,1)}.glass-toast--leaving{transition-timing-function:cubic-bezier(.4,0,1,1)}.glass-toast--enter,.glass-toast--faded{opacity:0}.glass-toast--enter[data-position=top-right],.glass-toast--enter[data-position=bottom-right]{transform:translate(2rem)}.glass-toast--enter[data-position=bottom-center]{transform:translateY(2rem)}.glass-toast__icon{background-color:var(--gt-pill-bg);width:1.75rem;height:1.75rem;color:var(--gt-icon);border-radius:.5rem;flex-shrink:0;justify-content:center;align-items:center;display:flex}.glass-toast__icon svg{flex-shrink:0;width:18px;height:18px;display:block}.glass-toast__message{min-width:0;color:var(--gt-text);overflow-wrap:anywhere;-webkit-line-clamp:5;line-clamp:5;-webkit-box-orient:vertical;margin:0;font-size:.9375rem;line-height:1.625;display:-webkit-box;overflow:hidden}.glass-toast__action{border:1px solid var(--gt-action-border,var(--gt-border));background-color:var(--gt-action-bg,transparent);min-width:0;max-width:100%;min-height:2rem;color:var(--gt-action-text,var(--gt-icon));font:inherit;overflow-wrap:anywhere;cursor:pointer;appearance:none;border-radius:.5rem;grid-area:2/2;place-self:center start;padding:.3125rem .75rem;font-size:.8125rem;font-weight:600;line-height:1.25;transition:background-color .15s cubic-bezier(.4,0,.2,1),border-color .15s cubic-bezier(.4,0,.2,1)}.glass-toast__action:hover{background-color:var(--gt-action-bg-hover,var(--gt-pill-bg))}.glass-toast__action[aria-disabled=true]{cursor:progress}.glass-toast__action:focus-visible{outline:2px solid var(--gt-focus-ring);outline-offset:2px}.glass-toast__close{border:1px solid var(--gt-close-border);background-color:var(--gt-close-bg);width:2rem;height:2rem;color:var(--gt-close-text);font:inherit;cursor:pointer;appearance:none;border-radius:9999px;grid-area:1/-2;justify-content:center;align-self:center;align-items:center;padding:0;transition:all .15s cubic-bezier(.4,0,.2,1);display:flex}.glass-toast__close:hover{background-color:var(--gt-close-bg-hover);border-color:var(--gt-close-border-hover);color:var(--gt-close-text-hover)}.glass-toast__close:focus-visible{outline:2px solid var(--gt-focus-ring);outline-offset:2px}.glass-toast__close svg{width:.875rem;height:.875rem;display:block}.glass-toast__bar{background-color:var(--gt-bar);opacity:.4;border-radius:9999px;height:2px;position:absolute;bottom:0;left:0}@media (width>=768px){.glass-toast__message{font-size:14px}.glass-toast:has(.glass-toast__action){grid-template-columns:auto minmax(0,1fr) minmax(0,35%) auto}.glass-toast:has(.glass-toast__action) .glass-toast__action{grid-area:1/3}}@media (prefers-color-scheme:dark){:where(:root:not([data-theme=light]):not(.light)) .glass-toast{--gt-bg:#1c1c1eb8;--gt-bg-opaque:#1c1c1eeb;--gt-border:#ffffff1a;--gt-text:#e5e7eb;--gt-close-bg:#ffffff0f;--gt-close-border:#ffffff1f;--gt-close-text:#cbd5e1;--gt-close-bg-hover:#ffffff1f;--gt-close-border-hover:#ffffff38;--gt-close-text-hover:#f1f5f9;--gt-focus-ring:#93c5fd;--gt-action-text:var(--gt-text);--gt-action-bg-hover:var(--gt-close-bg-hover)}}:where([data-theme=dark],.dark) .glass-toast{--gt-bg:#1c1c1eb8;--gt-bg-opaque:#1c1c1eeb;--gt-border:#ffffff1a;--gt-text:#e5e7eb;--gt-close-bg:#ffffff0f;--gt-close-border:#ffffff1f;--gt-close-text:#cbd5e1;--gt-close-bg-hover:#ffffff1f;--gt-close-border-hover:#ffffff38;--gt-close-text-hover:#f1f5f9;--gt-focus-ring:#93c5fd;--gt-action-text:var(--gt-text);--gt-action-bg-hover:var(--gt-close-bg-hover)}`,r=280,i=12,a=1400,o={error:1e4},s=5500,c=2147483647,l=4,u=`info`,d=`top-right`,f=`Close`,p={success:`16, 185, 129`,error:`239, 68, 68`,warning:`245, 158, 11`,info:`76, 112, 144`},m={"top-right":`glass-toast-container--top-right`,"bottom-right":`glass-toast-container--bottom-right`,"bottom-center":`glass-toast-container--bottom-center`},h=`0 4px 24px -4px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04)`,g=!0,_=f;function v(){if(typeof document>`u`||document.querySelector(`style[data-glass-toast], link[data-glass-toast]`))return;let e=document.createElement(`style`);e.setAttribute(`data-glass-toast`,``),e.textContent=n,document.head.prepend(e)}var y=()=>window.matchMedia?.(`(prefers-reduced-motion: reduce)`).matches,b=new Map,x=new WeakMap,S=new WeakMap;function C(e){for(let[e,t]of b)e.isConnected||z(t);let t=b.get(e);return t||(t={root:e,containers:new Map,announcers:void 0},e.localName===`dialog`&&(t.onClose=()=>{e.open||z(t)},e.addEventListener(`close`,t.onClose)),b.set(e,t)),t}function w(e){for(let t of Object.values(e??{}))cancelAnimationFrame(t.frame),t.frame=void 0,t.pending.length=0,t.el.textContent=``}function T(e){let{announcers:t,root:n}=e;if(!(t?.status.el.isConnected&&t.alert.el.isConnected)){w(t);for(let e of Object.values(t??{}))e.el.remove();e.announcers=Object.fromEntries([`status`,`alert`].map(e=>{let t=document.createElement(`div`);return t.className=`glass-toast-announcer`,t.setAttribute(`role`,e),t.setAttribute(`aria-atomic`,`true`),n.appendChild(t),[e,{el:t,pending:[],frame:void 0}]}))}}function E(e,t,n,r){T(e);let i=e.announcers[n===`error`?`alert`:`status`];i.pending.push({toast:t,message:r}),i.frame===void 0&&(i.el.textContent=``,i.frame=requestAnimationFrame(()=>{i.frame=requestAnimationFrame(()=>{i.frame=void 0;let e=i.pending.splice(0);i.el.isConnected&&(i.el.textContent=e.filter(({toast:e})=>e.isConnected&&!e.dataset.dismissing).map(({message:e})=>e).join(`
|
|
2
|
+
`))})}))}var D=!1;function O(e){e.toggleAttribute(`data-scrollable`,e.scrollHeight>e.clientHeight)}function k(e){S.get(e)?.disconnect(),e.remove()}function A({root:e,containers:t},n){let r=t.get(n);if(r&&r.isConnected)return r;r&&k(r);let i=document.createElement(`div`);if(i.className=`glass-toast-container ${m[n]}`,i.dataset.toastContainer=n,i.tabIndex=-1,e.appendChild(i),t.set(n,i),typeof ResizeObserver==`function`){let e=new ResizeObserver(()=>O(i));e.observe(i),S.set(i,e)}return i}function j(e){let t=[...e.children].filter(e=>!e.dataset.dismissing);for(;t.length>=l;){let e=t.shift();x.has(e)?x.get(e).dismiss():e.remove()}}function M(e,t){if(e&&e.isConnected&&typeof e.focus==`function`&&(e.focus(),document.activeElement===e))return;let n=t.querySelector(`[data-toast-container] > .glass-toast:not([data-dismissing]) .glass-toast__close`);n&&n.focus()}function N(e,{type:n,position:r,persistent:i,duration:a,action:o}){let s=y(),c=document.createElement(`div`);c.dataset.position=r,c.className=[`glass-toast`,`glass-toast--${n}`,s?`glass-toast--faded`:`glass-toast--animated glass-toast--enter`].join(` `);let l=document.createElement(`span`);l.className=`glass-toast__icon`,l.innerHTML=t[n];let u=document.createElement(`p`);u.className=`glass-toast__message`,u.textContent=e,c.append(l,u);let d=null;o&&o.label&&(d=document.createElement(`button`),d.type=`button`,d.className=`glass-toast__action`,d.textContent=o.label,c.appendChild(d));let f=document.createElement(`button`);if(f.type=`button`,f.className=`glass-toast__close`,f.setAttribute(`aria-label`,_),f.innerHTML=t.close,c.appendChild(f),!i){let e=document.createElement(`div`);e.className=`glass-toast__bar`,e.style.width=`100%`,e.style.transition=`width ${a}ms linear`,c.appendChild(e)}return{el:c,btn:f,actionBtn:d}}function P(e,t){if(y()||typeof e.animate!=`function`)return;let n=getComputedStyle(e),r=n.getPropertyValue(`--gt-ring`).trim().replace(/\s*,\s*/g,`, `)||p[t],i=n.getPropertyValue(`--gt-shadow`).trim()||h;return e.animate([{boxShadow:`0 0 18px 6px rgba(${r}, 0.75), ${i}`,offset:0},{boxShadow:`0 0 22px 8px rgba(${r}, 0.7), ${i}`,offset:.35},{boxShadow:`0 0 56px 26px rgba(${r}, 0), ${i}`,offset:1}],{duration:a,easing:`ease-out`,fill:`none`})}function F(e,t,n){let r=e.parentElement;e.remove(),r&&r.children.length===0?(k(r),t.get(n)===r&&t.delete(n)):r&&O(r)}function I(e){if(y()){e.classList.add(`glass-toast--faded`);return}e.classList.add(`glass-toast--leaving`);let t=e.offsetHeight;e.style.height=`${t}px`,e.offsetHeight,e.classList.add(`glass-toast--enter`),e.style.height=`0px`,e.style.paddingTop=`0`,e.style.paddingBottom=`0`,e.style.borderTopWidth=`0`,e.style.borderBottomWidth=`0`,e.style.marginTop=`-${i}px`}function L(e,t={}){if(D||typeof document>`u`||!document.body)return()=>{};let{dialog:n}=t;if(n&&(!n.isConnected||!n.open))return()=>{};let{type:i=u,position:a=d,persistent:l=!1,action:f}=t;Object.hasOwn(p,i)||(i=u),Object.hasOwn(m,a)||(a=d);let h=Number.isFinite(t.duration),_=h?Math.min(t.duration,c):o[i]??s;(f&&f.label&&!h||_<=0)&&(l=!0),g&&v();let b=C(n??document.body),S=A(b,a);j(S);let{el:w,btn:T,actionBtn:k}=N(e,{type:i,position:a,persistent:l,duration:_,action:f}),L=document.activeElement,R=!S.contains(L)&&S.scrollHeight-S.clientHeight-S.scrollTop<=1;S.appendChild(w),O(S),R&&(S.scrollTop=S.scrollHeight);let z=w.querySelector(`.glass-toast__bar`),B,V,H,U,W,G=!1,K=!1,q,J,Y=()=>{clearTimeout(B),cancelAnimationFrame(H),cancelAnimationFrame(U),W?.cancel()},X=()=>{G||(G=!0,Y(),clearTimeout(V),x.delete(w),F(w,b.containers,a))},Z=()=>{G||w.dataset.dismissing||(w.isConnected?(w.dataset.dismissing=`true`,Y(),I(w),V=setTimeout(()=>{let e=w.contains(document.activeElement);X(),e&&M(L,b.root)},r)):X())};x.set(w,{dismiss:Z,remove:X,invoker:L}),E(b,w,i,e);let Q=y()?`glass-toast--faded`:`glass-toast--enter`;if(H=requestAnimationFrame(()=>{H=requestAnimationFrame(()=>{w.isConnected?(w.classList.remove(Q),W=P(w,i)):X()})}),T.addEventListener(`click`,Z),w.addEventListener(`keydown`,e=>{e.key===`Escape`&&(e.stopPropagation(),Z())}),!l){let e=_,t=Date.now();B=setTimeout(Z,e);let n=!1,r=!1,i=!1,a=()=>{z.style.transition=`width ${e}ms linear`,z.style.width=`0%`};U=requestAnimationFrame(()=>{U=requestAnimationFrame(a)}),q=()=>{if(n||G||w.dataset.dismissing)return;n=!0,clearTimeout(B),cancelAnimationFrame(U),e-=Date.now()-t;let r=z.getBoundingClientRect().width;z.style.transition=`none`,z.style.width=`${r}px`};let o=()=>{!n||G||w.dataset.dismissing||(n=!1,e<=0?Z():(t=Date.now(),B=setTimeout(Z,e),U=requestAnimationFrame(a)))};J=()=>{r||i||K||o()},w.addEventListener(`mouseenter`,()=>{r=!0,q()}),w.addEventListener(`mouseleave`,()=>{r=!1,J()}),w.addEventListener(`focusin`,()=>{i=!0,q()}),w.addEventListener(`focusout`,e=>{w.contains(e.relatedTarget)||(i=!1,J())})}if(k){let e=e=>{console.error(`glass-toast: action failed`,e),K=!1,G||w.dataset.dismissing||(k.removeAttribute(`aria-disabled`),J?.())};k.addEventListener(`click`,()=>{if(!(G||w.dataset.dismissing||K)){K=!0,k.setAttribute(`aria-disabled`,`true`),q?.();try{let t=f.onClick?.();typeof t?.then==`function`?Promise.resolve(t).then(Z,e):Z()}catch(t){e(t)}}})}return Z}function R({announcers:e,containers:t}){w(e);let n;for(let e of t.values()){for(let t of[...e.children]){let e=x.get(t);t.contains(document.activeElement)&&(n=e),e?.remove()}k(e)}return t.clear(),n}function z(e){R(e);for(let t of Object.values(e.announcers??{}))t.el.remove();e.onClose&&e.root.removeEventListener(`close`,e.onClose),b.delete(e.root)}function B({suppress:e=!1}={}){e&&(D=!0);let t;for(let e of b.values()){let n=R(e);n&&(t=()=>M(n.invoker,e.root))}t?.()}function V(){D=!1}function H(e,t){return L(e,{...t,type:`success`})}function U(e,t){return L(e,{...t,type:`error`})}function W(e,t){return L(e,{...t,type:`warning`})}function G(e,t){return L(e,{...t,type:`info`})}var K={show:L,success:H,error:U,warning:W,info:G,dismissAll:B,resume:V};function q({global:e=!0,injectStyles:t=!0,target:n,closeLabel:r}={}){if(g=t,_=typeof r==`string`&&r.trim()?r:f,t&&v(),typeof document<`u`&&document.body&&T(C(document.body)),e){let e=n??(typeof window<`u`?window:void 0);e&&(e.toast=K)}return K}e.dismissAll=B,e.ensureStyles=v,e.error=U,e.info=G,e.register=q,e.resume=V,e.show=L,e.success=H,e.warning=W});
|
|
@@ -0,0 +1,312 @@
|
|
|
1
|
+
// src/icons.js
|
|
2
|
+
var e = {
|
|
3
|
+
success: "<svg viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\"><path fill-rule=\"evenodd\" d=\"M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z\" clip-rule=\"evenodd\"/></svg>",
|
|
4
|
+
error: "<svg viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\"><path fill-rule=\"evenodd\" d=\"M10 18a8 8 0 100-16 8 8 0 000 16zM8.28 7.22a.75.75 0 00-1.06 1.06L8.94 10l-1.72 1.72a.75.75 0 101.06 1.06L10 11.06l1.72 1.72a.75.75 0 101.06-1.06L11.06 10l1.72-1.72a.75.75 0 00-1.06-1.06L10 8.94 8.28 7.22z\" clip-rule=\"evenodd\"/></svg>",
|
|
5
|
+
warning: "<svg viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\"><path fill-rule=\"evenodd\" d=\"M8.485 2.495c.673-1.167 2.357-1.167 3.03 0l6.28 10.875c.673 1.167-.168 2.625-1.516 2.625H3.72c-1.347 0-2.189-1.458-1.515-2.625L8.485 2.495zM10 6a.75.75 0 01.75.75v3.5a.75.75 0 01-1.5 0v-3.5A.75.75 0 0110 6zm0 9a1 1 0 100-2 1 1 0 000 2z\" clip-rule=\"evenodd\"/></svg>",
|
|
6
|
+
info: "<svg viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\"><path fill-rule=\"evenodd\" d=\"M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a.75.75 0 000 1.5h.253a.25.25 0 01.244.304l-.459 2.066A1.75 1.75 0 0010.747 15H11a.75.75 0 000-1.5h-.253a.25.25 0 01-.244-.304l.459-2.066A1.75 1.75 0 009.253 9H9z\" clip-rule=\"evenodd\"/></svg>",
|
|
7
|
+
close: "<svg viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\"><path d=\"M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z\"/></svg>"
|
|
8
|
+
}, t = ".glass-toast-container,.glass-toast,.glass-toast *{box-sizing:border-box}.glass-toast-announcer{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.glass-toast-container{width:min(26rem,100%);max-height:100dvh;padding:1rem;padding-top:max(1rem, env(safe-area-inset-top));padding-right:max(1rem, env(safe-area-inset-right));padding-bottom:max(1rem, env(safe-area-inset-bottom));padding-left:max(1rem, env(safe-area-inset-left));scrollbar-width:none;z-index:2147483647;pointer-events:none;flex-direction:column;gap:.75rem;display:flex;position:fixed;overflow:auto}.glass-toast-container[data-scrollable]{pointer-events:auto}.glass-toast-container--top-right{align-items:flex-end;top:0;right:0}.glass-toast-container--bottom-right{align-items:flex-end;bottom:0;right:0}.glass-toast-container--bottom-center{align-items:center;bottom:0;left:50%;transform:translate(-50%)}.glass-toast{--gt-bg:#fffc;--gt-bg-opaque:#fffffff5;--gt-border:#e5e7eb66;--gt-text:#4a5565;--gt-blur:24px;--gt-radius:1rem;--gt-shadow:0 4px 24px -4px #00000014, 0 1px 2px #0000000a;--gt-close-bg:#f9fafb;--gt-close-border:#e5e7eb;--gt-close-text:#667085;--gt-close-bg-hover:#f3f4f6;--gt-close-border-hover:#d1d5dc;--gt-close-text-hover:#4a5565;--gt-focus-ring:#2563eb;pointer-events:auto;background-color:var(--gt-bg);width:24rem;max-width:calc(100vw - 2rem);-webkit-backdrop-filter:blur(var(--gt-blur));backdrop-filter:blur(var(--gt-blur));border:1px solid var(--gt-border);border-radius:var(--gt-radius);box-shadow:var(--gt-shadow);grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:.75rem;padding:.875rem 1rem;display:grid;position:relative;overflow:hidden}.glass-toast-container>.glass-toast{flex:none;max-width:100%}@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){.glass-toast{background-color:var(--gt-bg-opaque)}}.glass-toast--success{--gt-pill-bg:#d0fae5;--gt-icon:#047857;--gt-bar:#00bb7f;--gt-ring:16, 185, 129}.glass-toast--error{--gt-pill-bg:#ffe2e2;--gt-icon:#dc2626;--gt-action-text:#b91c1c;--gt-bar:#ff6568;--gt-ring:239, 68, 68}.glass-toast--warning{--gt-pill-bg:#fef3c6;--gt-icon:#b45309;--gt-bar:#fcbb00;--gt-ring:245, 158, 11}.glass-toast--info{--gt-pill-bg:#e2eaf1;--gt-icon:#3a5b7a;--gt-bar:#6f92ad;--gt-ring:76, 112, 144}.glass-toast--animated{transition:all .28s cubic-bezier(0,0,.2,1)}.glass-toast--leaving{transition-timing-function:cubic-bezier(.4,0,1,1)}.glass-toast--enter,.glass-toast--faded{opacity:0}.glass-toast--enter[data-position=top-right],.glass-toast--enter[data-position=bottom-right]{transform:translate(2rem)}.glass-toast--enter[data-position=bottom-center]{transform:translateY(2rem)}.glass-toast__icon{background-color:var(--gt-pill-bg);width:1.75rem;height:1.75rem;color:var(--gt-icon);border-radius:.5rem;flex-shrink:0;justify-content:center;align-items:center;display:flex}.glass-toast__icon svg{flex-shrink:0;width:18px;height:18px;display:block}.glass-toast__message{min-width:0;color:var(--gt-text);overflow-wrap:anywhere;-webkit-line-clamp:5;line-clamp:5;-webkit-box-orient:vertical;margin:0;font-size:.9375rem;line-height:1.625;display:-webkit-box;overflow:hidden}.glass-toast__action{border:1px solid var(--gt-action-border,var(--gt-border));background-color:var(--gt-action-bg,transparent);min-width:0;max-width:100%;min-height:2rem;color:var(--gt-action-text,var(--gt-icon));font:inherit;overflow-wrap:anywhere;cursor:pointer;appearance:none;border-radius:.5rem;grid-area:2/2;place-self:center start;padding:.3125rem .75rem;font-size:.8125rem;font-weight:600;line-height:1.25;transition:background-color .15s cubic-bezier(.4,0,.2,1),border-color .15s cubic-bezier(.4,0,.2,1)}.glass-toast__action:hover{background-color:var(--gt-action-bg-hover,var(--gt-pill-bg))}.glass-toast__action[aria-disabled=true]{cursor:progress}.glass-toast__action:focus-visible{outline:2px solid var(--gt-focus-ring);outline-offset:2px}.glass-toast__close{border:1px solid var(--gt-close-border);background-color:var(--gt-close-bg);width:2rem;height:2rem;color:var(--gt-close-text);font:inherit;cursor:pointer;appearance:none;border-radius:9999px;grid-area:1/-2;justify-content:center;align-self:center;align-items:center;padding:0;transition:all .15s cubic-bezier(.4,0,.2,1);display:flex}.glass-toast__close:hover{background-color:var(--gt-close-bg-hover);border-color:var(--gt-close-border-hover);color:var(--gt-close-text-hover)}.glass-toast__close:focus-visible{outline:2px solid var(--gt-focus-ring);outline-offset:2px}.glass-toast__close svg{width:.875rem;height:.875rem;display:block}.glass-toast__bar{background-color:var(--gt-bar);opacity:.4;border-radius:9999px;height:2px;position:absolute;bottom:0;left:0}@media (width>=768px){.glass-toast__message{font-size:14px}.glass-toast:has(.glass-toast__action){grid-template-columns:auto minmax(0,1fr) minmax(0,35%) auto}.glass-toast:has(.glass-toast__action) .glass-toast__action{grid-area:1/3}}@media (prefers-color-scheme:dark){:where(:root:not([data-theme=light]):not(.light)) .glass-toast{--gt-bg:#1c1c1eb8;--gt-bg-opaque:#1c1c1eeb;--gt-border:#ffffff1a;--gt-text:#e5e7eb;--gt-close-bg:#ffffff0f;--gt-close-border:#ffffff1f;--gt-close-text:#cbd5e1;--gt-close-bg-hover:#ffffff1f;--gt-close-border-hover:#ffffff38;--gt-close-text-hover:#f1f5f9;--gt-focus-ring:#93c5fd;--gt-action-text:var(--gt-text);--gt-action-bg-hover:var(--gt-close-bg-hover)}}:where([data-theme=dark],.dark) .glass-toast{--gt-bg:#1c1c1eb8;--gt-bg-opaque:#1c1c1eeb;--gt-border:#ffffff1a;--gt-text:#e5e7eb;--gt-close-bg:#ffffff0f;--gt-close-border:#ffffff1f;--gt-close-text:#cbd5e1;--gt-close-bg-hover:#ffffff1f;--gt-close-border-hover:#ffffff38;--gt-close-text-hover:#f1f5f9;--gt-focus-ring:#93c5fd;--gt-action-text:var(--gt-text);--gt-action-bg-hover:var(--gt-close-bg-hover)}", n = 280, r = 12, i = 1400, a = { error: 1e4 }, o = 5500, s = 2147483647, c = 4, l = "info", u = "top-right", d = "Close", f = {
|
|
9
|
+
success: "16, 185, 129",
|
|
10
|
+
error: "239, 68, 68",
|
|
11
|
+
warning: "245, 158, 11",
|
|
12
|
+
info: "76, 112, 144"
|
|
13
|
+
}, p = {
|
|
14
|
+
"top-right": "glass-toast-container--top-right",
|
|
15
|
+
"bottom-right": "glass-toast-container--bottom-right",
|
|
16
|
+
"bottom-center": "glass-toast-container--bottom-center"
|
|
17
|
+
}, m = "0 4px 24px -4px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04)", h = !0, g = d;
|
|
18
|
+
function _() {
|
|
19
|
+
if (typeof document > "u" || document.querySelector("style[data-glass-toast], link[data-glass-toast]")) return;
|
|
20
|
+
let e = document.createElement("style");
|
|
21
|
+
e.setAttribute("data-glass-toast", ""), e.textContent = t, document.head.prepend(e);
|
|
22
|
+
}
|
|
23
|
+
var v = () => window.matchMedia?.("(prefers-reduced-motion: reduce)").matches, y = /* @__PURE__ */ new Map(), b = /* @__PURE__ */ new WeakMap(), x = /* @__PURE__ */ new WeakMap();
|
|
24
|
+
function S(e) {
|
|
25
|
+
for (let [e, t] of y) e.isConnected || R(t);
|
|
26
|
+
let t = y.get(e);
|
|
27
|
+
return t || (t = {
|
|
28
|
+
root: e,
|
|
29
|
+
containers: /* @__PURE__ */ new Map(),
|
|
30
|
+
announcers: void 0
|
|
31
|
+
}, e.localName === "dialog" && (t.onClose = () => {
|
|
32
|
+
e.open || R(t);
|
|
33
|
+
}, e.addEventListener("close", t.onClose)), y.set(e, t)), t;
|
|
34
|
+
}
|
|
35
|
+
function C(e) {
|
|
36
|
+
for (let t of Object.values(e ?? {})) cancelAnimationFrame(t.frame), t.frame = void 0, t.pending.length = 0, t.el.textContent = "";
|
|
37
|
+
}
|
|
38
|
+
function w(e) {
|
|
39
|
+
let { announcers: t, root: n } = e;
|
|
40
|
+
if (!(t?.status.el.isConnected && t.alert.el.isConnected)) {
|
|
41
|
+
C(t);
|
|
42
|
+
for (let e of Object.values(t ?? {})) e.el.remove();
|
|
43
|
+
e.announcers = Object.fromEntries(["status", "alert"].map((e) => {
|
|
44
|
+
let t = document.createElement("div");
|
|
45
|
+
return t.className = "glass-toast-announcer", t.setAttribute("role", e), t.setAttribute("aria-atomic", "true"), n.appendChild(t), [e, {
|
|
46
|
+
el: t,
|
|
47
|
+
pending: [],
|
|
48
|
+
frame: void 0
|
|
49
|
+
}];
|
|
50
|
+
}));
|
|
51
|
+
}
|
|
52
|
+
}
|
|
53
|
+
function T(e, t, n, r) {
|
|
54
|
+
w(e);
|
|
55
|
+
let i = e.announcers[n === "error" ? "alert" : "status"];
|
|
56
|
+
i.pending.push({
|
|
57
|
+
toast: t,
|
|
58
|
+
message: r
|
|
59
|
+
}), i.frame === void 0 && (i.el.textContent = "", i.frame = requestAnimationFrame(() => {
|
|
60
|
+
i.frame = requestAnimationFrame(() => {
|
|
61
|
+
i.frame = void 0;
|
|
62
|
+
let e = i.pending.splice(0);
|
|
63
|
+
i.el.isConnected && (i.el.textContent = e.filter(({ toast: e }) => e.isConnected && !e.dataset.dismissing).map(({ message: e }) => e).join("\n"));
|
|
64
|
+
});
|
|
65
|
+
}));
|
|
66
|
+
}
|
|
67
|
+
var E = !1;
|
|
68
|
+
function D(e) {
|
|
69
|
+
e.toggleAttribute("data-scrollable", e.scrollHeight > e.clientHeight);
|
|
70
|
+
}
|
|
71
|
+
function O(e) {
|
|
72
|
+
x.get(e)?.disconnect(), e.remove();
|
|
73
|
+
}
|
|
74
|
+
function k({ root: e, containers: t }, n) {
|
|
75
|
+
let r = t.get(n);
|
|
76
|
+
if (r && r.isConnected) return r;
|
|
77
|
+
r && O(r);
|
|
78
|
+
let i = document.createElement("div");
|
|
79
|
+
if (i.className = `glass-toast-container ${p[n]}`, i.dataset.toastContainer = n, i.tabIndex = -1, e.appendChild(i), t.set(n, i), typeof ResizeObserver == "function") {
|
|
80
|
+
let e = new ResizeObserver(() => D(i));
|
|
81
|
+
e.observe(i), x.set(i, e);
|
|
82
|
+
}
|
|
83
|
+
return i;
|
|
84
|
+
}
|
|
85
|
+
function A(e) {
|
|
86
|
+
let t = [...e.children].filter((e) => !e.dataset.dismissing);
|
|
87
|
+
for (; t.length >= c;) {
|
|
88
|
+
let e = t.shift();
|
|
89
|
+
b.has(e) ? b.get(e).dismiss() : e.remove();
|
|
90
|
+
}
|
|
91
|
+
}
|
|
92
|
+
function j(e, t) {
|
|
93
|
+
if (e && e.isConnected && typeof e.focus == "function" && (e.focus(), document.activeElement === e)) return;
|
|
94
|
+
let n = t.querySelector("[data-toast-container] > .glass-toast:not([data-dismissing]) .glass-toast__close");
|
|
95
|
+
n && n.focus();
|
|
96
|
+
}
|
|
97
|
+
function M(t, { type: n, position: r, persistent: i, duration: a, action: o }) {
|
|
98
|
+
let s = v(), c = document.createElement("div");
|
|
99
|
+
c.dataset.position = r, c.className = [
|
|
100
|
+
"glass-toast",
|
|
101
|
+
`glass-toast--${n}`,
|
|
102
|
+
s ? "glass-toast--faded" : "glass-toast--animated glass-toast--enter"
|
|
103
|
+
].join(" ");
|
|
104
|
+
let l = document.createElement("span");
|
|
105
|
+
l.className = "glass-toast__icon", l.innerHTML = e[n];
|
|
106
|
+
let u = document.createElement("p");
|
|
107
|
+
u.className = "glass-toast__message", u.textContent = t, c.append(l, u);
|
|
108
|
+
let d = null;
|
|
109
|
+
o && o.label && (d = document.createElement("button"), d.type = "button", d.className = "glass-toast__action", d.textContent = o.label, c.appendChild(d));
|
|
110
|
+
let f = document.createElement("button");
|
|
111
|
+
if (f.type = "button", f.className = "glass-toast__close", f.setAttribute("aria-label", g), f.innerHTML = e.close, c.appendChild(f), !i) {
|
|
112
|
+
let e = document.createElement("div");
|
|
113
|
+
e.className = "glass-toast__bar", e.style.width = "100%", e.style.transition = `width ${a}ms linear`, c.appendChild(e);
|
|
114
|
+
}
|
|
115
|
+
return {
|
|
116
|
+
el: c,
|
|
117
|
+
btn: f,
|
|
118
|
+
actionBtn: d
|
|
119
|
+
};
|
|
120
|
+
}
|
|
121
|
+
function N(e, t) {
|
|
122
|
+
if (v() || typeof e.animate != "function") return;
|
|
123
|
+
let n = getComputedStyle(e), r = n.getPropertyValue("--gt-ring").trim().replace(/\s*,\s*/g, ", ") || f[t], a = n.getPropertyValue("--gt-shadow").trim() || m;
|
|
124
|
+
return e.animate([
|
|
125
|
+
{
|
|
126
|
+
boxShadow: `0 0 18px 6px rgba(${r}, 0.75), ${a}`,
|
|
127
|
+
offset: 0
|
|
128
|
+
},
|
|
129
|
+
{
|
|
130
|
+
boxShadow: `0 0 22px 8px rgba(${r}, 0.7), ${a}`,
|
|
131
|
+
offset: .35
|
|
132
|
+
},
|
|
133
|
+
{
|
|
134
|
+
boxShadow: `0 0 56px 26px rgba(${r}, 0), ${a}`,
|
|
135
|
+
offset: 1
|
|
136
|
+
}
|
|
137
|
+
], {
|
|
138
|
+
duration: i,
|
|
139
|
+
easing: "ease-out",
|
|
140
|
+
fill: "none"
|
|
141
|
+
});
|
|
142
|
+
}
|
|
143
|
+
function P(e, t, n) {
|
|
144
|
+
let r = e.parentElement;
|
|
145
|
+
e.remove(), r && r.children.length === 0 ? (O(r), t.get(n) === r && t.delete(n)) : r && D(r);
|
|
146
|
+
}
|
|
147
|
+
function F(e) {
|
|
148
|
+
if (v()) {
|
|
149
|
+
e.classList.add("glass-toast--faded");
|
|
150
|
+
return;
|
|
151
|
+
}
|
|
152
|
+
e.classList.add("glass-toast--leaving");
|
|
153
|
+
let t = e.offsetHeight;
|
|
154
|
+
e.style.height = `${t}px`, e.offsetHeight, e.classList.add("glass-toast--enter"), e.style.height = "0px", e.style.paddingTop = "0", e.style.paddingBottom = "0", e.style.borderTopWidth = "0", e.style.borderBottomWidth = "0", e.style.marginTop = `-${r}px`;
|
|
155
|
+
}
|
|
156
|
+
function I(e, t = {}) {
|
|
157
|
+
if (E || typeof document > "u" || !document.body) return () => {};
|
|
158
|
+
let { dialog: r } = t;
|
|
159
|
+
if (r && (!r.isConnected || !r.open)) return () => {};
|
|
160
|
+
let { type: i = l, position: c = u, persistent: d = !1, action: m } = t;
|
|
161
|
+
Object.hasOwn(f, i) || (i = l), Object.hasOwn(p, c) || (c = u);
|
|
162
|
+
let g = Number.isFinite(t.duration), y = g ? Math.min(t.duration, s) : a[i] ?? o;
|
|
163
|
+
(m && m.label && !g || y <= 0) && (d = !0), h && _();
|
|
164
|
+
let x = S(r ?? document.body), C = k(x, c);
|
|
165
|
+
A(C);
|
|
166
|
+
let { el: w, btn: O, actionBtn: I } = M(e, {
|
|
167
|
+
type: i,
|
|
168
|
+
position: c,
|
|
169
|
+
persistent: d,
|
|
170
|
+
duration: y,
|
|
171
|
+
action: m
|
|
172
|
+
}), L = document.activeElement, R = !C.contains(L) && C.scrollHeight - C.clientHeight - C.scrollTop <= 1;
|
|
173
|
+
C.appendChild(w), D(C), R && (C.scrollTop = C.scrollHeight);
|
|
174
|
+
let z = w.querySelector(".glass-toast__bar"), B, V, H, U, W, G = !1, K = !1, q, J, Y = () => {
|
|
175
|
+
clearTimeout(B), cancelAnimationFrame(H), cancelAnimationFrame(U), W?.cancel();
|
|
176
|
+
}, X = () => {
|
|
177
|
+
G || (G = !0, Y(), clearTimeout(V), b.delete(w), P(w, x.containers, c));
|
|
178
|
+
}, Z = () => {
|
|
179
|
+
G || w.dataset.dismissing || (w.isConnected ? (w.dataset.dismissing = "true", Y(), F(w), V = setTimeout(() => {
|
|
180
|
+
let e = w.contains(document.activeElement);
|
|
181
|
+
X(), e && j(L, x.root);
|
|
182
|
+
}, n)) : X());
|
|
183
|
+
};
|
|
184
|
+
b.set(w, {
|
|
185
|
+
dismiss: Z,
|
|
186
|
+
remove: X,
|
|
187
|
+
invoker: L
|
|
188
|
+
}), T(x, w, i, e);
|
|
189
|
+
let Q = v() ? "glass-toast--faded" : "glass-toast--enter";
|
|
190
|
+
if (H = requestAnimationFrame(() => {
|
|
191
|
+
H = requestAnimationFrame(() => {
|
|
192
|
+
w.isConnected ? (w.classList.remove(Q), W = N(w, i)) : X();
|
|
193
|
+
});
|
|
194
|
+
}), O.addEventListener("click", Z), w.addEventListener("keydown", (e) => {
|
|
195
|
+
e.key === "Escape" && (e.stopPropagation(), Z());
|
|
196
|
+
}), !d) {
|
|
197
|
+
let e = y, t = Date.now();
|
|
198
|
+
B = setTimeout(Z, e);
|
|
199
|
+
let n = !1, r = !1, i = !1, a = () => {
|
|
200
|
+
z.style.transition = `width ${e}ms linear`, z.style.width = "0%";
|
|
201
|
+
};
|
|
202
|
+
U = requestAnimationFrame(() => {
|
|
203
|
+
U = requestAnimationFrame(a);
|
|
204
|
+
}), q = () => {
|
|
205
|
+
if (n || G || w.dataset.dismissing) return;
|
|
206
|
+
n = !0, clearTimeout(B), cancelAnimationFrame(U), e -= Date.now() - t;
|
|
207
|
+
let r = z.getBoundingClientRect().width;
|
|
208
|
+
z.style.transition = "none", z.style.width = `${r}px`;
|
|
209
|
+
};
|
|
210
|
+
let o = () => {
|
|
211
|
+
!n || G || w.dataset.dismissing || (n = !1, e <= 0 ? Z() : (t = Date.now(), B = setTimeout(Z, e), U = requestAnimationFrame(a)));
|
|
212
|
+
};
|
|
213
|
+
J = () => {
|
|
214
|
+
r || i || K || o();
|
|
215
|
+
}, w.addEventListener("mouseenter", () => {
|
|
216
|
+
r = !0, q();
|
|
217
|
+
}), w.addEventListener("mouseleave", () => {
|
|
218
|
+
r = !1, J();
|
|
219
|
+
}), w.addEventListener("focusin", () => {
|
|
220
|
+
i = !0, q();
|
|
221
|
+
}), w.addEventListener("focusout", (e) => {
|
|
222
|
+
w.contains(e.relatedTarget) || (i = !1, J());
|
|
223
|
+
});
|
|
224
|
+
}
|
|
225
|
+
if (I) {
|
|
226
|
+
let e = (e) => {
|
|
227
|
+
console.error("glass-toast: action failed", e), K = !1, G || w.dataset.dismissing || (I.removeAttribute("aria-disabled"), J?.());
|
|
228
|
+
};
|
|
229
|
+
I.addEventListener("click", () => {
|
|
230
|
+
if (!(G || w.dataset.dismissing || K)) {
|
|
231
|
+
K = !0, I.setAttribute("aria-disabled", "true"), q?.();
|
|
232
|
+
try {
|
|
233
|
+
let t = m.onClick?.();
|
|
234
|
+
typeof t?.then == "function" ? Promise.resolve(t).then(Z, e) : Z();
|
|
235
|
+
} catch (t) {
|
|
236
|
+
e(t);
|
|
237
|
+
}
|
|
238
|
+
}
|
|
239
|
+
});
|
|
240
|
+
}
|
|
241
|
+
return Z;
|
|
242
|
+
}
|
|
243
|
+
function L({ announcers: e, containers: t }) {
|
|
244
|
+
C(e);
|
|
245
|
+
let n;
|
|
246
|
+
for (let e of t.values()) {
|
|
247
|
+
for (let t of [...e.children]) {
|
|
248
|
+
let e = b.get(t);
|
|
249
|
+
t.contains(document.activeElement) && (n = e), e?.remove();
|
|
250
|
+
}
|
|
251
|
+
O(e);
|
|
252
|
+
}
|
|
253
|
+
return t.clear(), n;
|
|
254
|
+
}
|
|
255
|
+
function R(e) {
|
|
256
|
+
L(e);
|
|
257
|
+
for (let t of Object.values(e.announcers ?? {})) t.el.remove();
|
|
258
|
+
e.onClose && e.root.removeEventListener("close", e.onClose), y.delete(e.root);
|
|
259
|
+
}
|
|
260
|
+
function z({ suppress: e = !1 } = {}) {
|
|
261
|
+
e && (E = !0);
|
|
262
|
+
let t;
|
|
263
|
+
for (let e of y.values()) {
|
|
264
|
+
let n = L(e);
|
|
265
|
+
n && (t = () => j(n.invoker, e.root));
|
|
266
|
+
}
|
|
267
|
+
t?.();
|
|
268
|
+
}
|
|
269
|
+
function B() {
|
|
270
|
+
E = !1;
|
|
271
|
+
}
|
|
272
|
+
function V(e, t) {
|
|
273
|
+
return I(e, {
|
|
274
|
+
...t,
|
|
275
|
+
type: "success"
|
|
276
|
+
});
|
|
277
|
+
}
|
|
278
|
+
function H(e, t) {
|
|
279
|
+
return I(e, {
|
|
280
|
+
...t,
|
|
281
|
+
type: "error"
|
|
282
|
+
});
|
|
283
|
+
}
|
|
284
|
+
function U(e, t) {
|
|
285
|
+
return I(e, {
|
|
286
|
+
...t,
|
|
287
|
+
type: "warning"
|
|
288
|
+
});
|
|
289
|
+
}
|
|
290
|
+
function W(e, t) {
|
|
291
|
+
return I(e, {
|
|
292
|
+
...t,
|
|
293
|
+
type: "info"
|
|
294
|
+
});
|
|
295
|
+
}
|
|
296
|
+
var G = {
|
|
297
|
+
show: I,
|
|
298
|
+
success: V,
|
|
299
|
+
error: H,
|
|
300
|
+
warning: U,
|
|
301
|
+
info: W,
|
|
302
|
+
dismissAll: z,
|
|
303
|
+
resume: B
|
|
304
|
+
};
|
|
305
|
+
function K({ global: e = !0, injectStyles: t = !0, target: n, closeLabel: r } = {}) {
|
|
306
|
+
if (h = t, g = typeof r == "string" && r.trim() ? r : d, t && _(), typeof document < "u" && document.body && w(S(document.body)), e) {
|
|
307
|
+
let e = n ?? (typeof window < "u" ? window : void 0);
|
|
308
|
+
e && (e.toast = G);
|
|
309
|
+
}
|
|
310
|
+
return G;
|
|
311
|
+
}
|
|
312
|
+
export { K as a, V as c, W as i, U as l, _ as n, B as o, H as r, I as s, z as t };
|
package/dist/toast.d.cts
CHANGED
|
@@ -55,9 +55,9 @@ export type ToastAction = {
|
|
|
55
55
|
*/
|
|
56
56
|
label: string;
|
|
57
57
|
/**
|
|
58
|
-
*
|
|
58
|
+
* 成功後關閉；可回傳 Promise，失敗時保留通知及重試按鈕
|
|
59
59
|
*/
|
|
60
|
-
onClick: () =>
|
|
60
|
+
onClick: () => unknown;
|
|
61
61
|
};
|
|
62
62
|
export type ToastOptions = {
|
|
63
63
|
/**
|
|
@@ -74,13 +74,17 @@ export type ToastOptions = {
|
|
|
74
74
|
persistent?: boolean;
|
|
75
75
|
/**
|
|
76
76
|
* 自動消失毫秒數（未指定時 error 為 10000、其餘 5500）；
|
|
77
|
-
* ≤ 0 視為 persistent
|
|
77
|
+
* 非有限值視為未指定；有限值 ≤ 0 視為 persistent，正值上限為 2147483647
|
|
78
78
|
*/
|
|
79
79
|
duration?: number;
|
|
80
80
|
/**
|
|
81
81
|
* 內嵌操作按鈕（如「重試」）；未顯式給 duration 時預設 persistent
|
|
82
82
|
*/
|
|
83
83
|
action?: ToastAction;
|
|
84
|
+
/**
|
|
85
|
+
* 掛載至已開啟的原生對話框，關閉時清除該對話框的通知
|
|
86
|
+
*/
|
|
87
|
+
dialog?: HTMLDialogElement;
|
|
84
88
|
};
|
|
85
89
|
export type ToastApi = {
|
|
86
90
|
show: typeof show;
|
package/dist/toast.d.ts
CHANGED
|
@@ -55,9 +55,9 @@ export type ToastAction = {
|
|
|
55
55
|
*/
|
|
56
56
|
label: string;
|
|
57
57
|
/**
|
|
58
|
-
*
|
|
58
|
+
* 成功後關閉；可回傳 Promise，失敗時保留通知及重試按鈕
|
|
59
59
|
*/
|
|
60
|
-
onClick: () =>
|
|
60
|
+
onClick: () => unknown;
|
|
61
61
|
};
|
|
62
62
|
export type ToastOptions = {
|
|
63
63
|
/**
|
|
@@ -74,13 +74,17 @@ export type ToastOptions = {
|
|
|
74
74
|
persistent?: boolean;
|
|
75
75
|
/**
|
|
76
76
|
* 自動消失毫秒數（未指定時 error 為 10000、其餘 5500）；
|
|
77
|
-
* ≤ 0 視為 persistent
|
|
77
|
+
* 非有限值視為未指定；有限值 ≤ 0 視為 persistent，正值上限為 2147483647
|
|
78
78
|
*/
|
|
79
79
|
duration?: number;
|
|
80
80
|
/**
|
|
81
81
|
* 內嵌操作按鈕（如「重試」）；未顯式給 duration 時預設 persistent
|
|
82
82
|
*/
|
|
83
83
|
action?: ToastAction;
|
|
84
|
+
/**
|
|
85
|
+
* 掛載至已開啟的原生對話框，關閉時清除該對話框的通知
|
|
86
|
+
*/
|
|
87
|
+
dialog?: HTMLDialogElement;
|
|
84
88
|
};
|
|
85
89
|
export type ToastApi = {
|
|
86
90
|
show: typeof show;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@dennykuo/glass-toast",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.2",
|
|
4
4
|
"description": "Zero-dependency glassmorphism toast notifications — vanilla JS, framework-free, Tailwind-free. 毛玻璃質感 toast 通知，零相依開箱即用。",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"license": "MIT",
|
|
@@ -33,8 +33,8 @@
|
|
|
33
33
|
"main": "./dist/glass-toast.umd.cjs",
|
|
34
34
|
"module": "./dist/glass-toast.js",
|
|
35
35
|
"types": "./dist/index.d.ts",
|
|
36
|
-
"unpkg": "./dist/glass-toast.umd.
|
|
37
|
-
"jsdelivr": "./dist/glass-toast.umd.
|
|
36
|
+
"unpkg": "./dist/glass-toast.umd.js",
|
|
37
|
+
"jsdelivr": "./dist/glass-toast.umd.js",
|
|
38
38
|
"exports": {
|
|
39
39
|
".": {
|
|
40
40
|
"import": {
|
|
@@ -67,7 +67,7 @@
|
|
|
67
67
|
"scripts": {
|
|
68
68
|
"dev": "vite docs",
|
|
69
69
|
"build:docs": "vite build docs",
|
|
70
|
-
"build": "vite build && vite build --mode umd && node scripts/build-css.mjs && tsc -p tsconfig.json && node scripts/build-cts.mjs",
|
|
70
|
+
"build": "vite build && vite build --mode umd && node scripts/build-cdn.mjs && node scripts/build-css.mjs && tsc -p tsconfig.json && node scripts/build-cts.mjs",
|
|
71
71
|
"test": "vitest run",
|
|
72
72
|
"test:browser": "npm run build && playwright test",
|
|
73
73
|
"test:watch": "vitest",
|
package/dist/toast-CaMQl-_l.js
DELETED
|
@@ -1,259 +0,0 @@
|
|
|
1
|
-
// src/icons.js
|
|
2
|
-
var e = {
|
|
3
|
-
success: "<svg viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\"><path fill-rule=\"evenodd\" d=\"M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z\" clip-rule=\"evenodd\"/></svg>",
|
|
4
|
-
error: "<svg viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\"><path fill-rule=\"evenodd\" d=\"M10 18a8 8 0 100-16 8 8 0 000 16zM8.28 7.22a.75.75 0 00-1.06 1.06L8.94 10l-1.72 1.72a.75.75 0 101.06 1.06L10 11.06l1.72 1.72a.75.75 0 101.06-1.06L11.06 10l1.72-1.72a.75.75 0 00-1.06-1.06L10 8.94 8.28 7.22z\" clip-rule=\"evenodd\"/></svg>",
|
|
5
|
-
warning: "<svg viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\"><path fill-rule=\"evenodd\" d=\"M8.485 2.495c.673-1.167 2.357-1.167 3.03 0l6.28 10.875c.673 1.167-.168 2.625-1.516 2.625H3.72c-1.347 0-2.189-1.458-1.515-2.625L8.485 2.495zM10 6a.75.75 0 01.75.75v3.5a.75.75 0 01-1.5 0v-3.5A.75.75 0 0110 6zm0 9a1 1 0 100-2 1 1 0 000 2z\" clip-rule=\"evenodd\"/></svg>",
|
|
6
|
-
info: "<svg viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\"><path fill-rule=\"evenodd\" d=\"M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a.75.75 0 000 1.5h.253a.25.25 0 01.244.304l-.459 2.066A1.75 1.75 0 0010.747 15H11a.75.75 0 000-1.5h-.253a.25.25 0 01-.244-.304l.459-2.066A1.75 1.75 0 009.253 9H9z\" clip-rule=\"evenodd\"/></svg>",
|
|
7
|
-
close: "<svg viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\"><path d=\"M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z\"/></svg>"
|
|
8
|
-
}, t = ".glass-toast-container,.glass-toast,.glass-toast *{box-sizing:border-box}.glass-toast-announcer{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.glass-toast-container{z-index:2147483647;pointer-events:none;flex-direction:column;gap:.75rem;display:flex;position:fixed}.glass-toast-container--top-right{align-items:flex-end;top:1rem;right:1rem}.glass-toast-container--bottom-right{align-items:flex-end;bottom:1rem;right:1rem}.glass-toast-container--bottom-center{align-items:center;bottom:1rem;left:50%;transform:translate(-50%)}.glass-toast{--gt-bg:#fffc;--gt-bg-opaque:#fffffff5;--gt-border:#e5e7eb66;--gt-text:#4a5565;--gt-blur:24px;--gt-radius:1rem;--gt-shadow:0 4px 24px -4px #00000014, 0 1px 2px #0000000a;--gt-close-bg:#f9fafb;--gt-close-border:#e5e7eb;--gt-close-text:#667085;--gt-close-bg-hover:#f3f4f6;--gt-close-border-hover:#d1d5dc;--gt-close-text-hover:#4a5565;--gt-focus-ring:#2563eb;pointer-events:auto;background-color:var(--gt-bg);width:24rem;max-width:calc(100vw - 2rem);-webkit-backdrop-filter:blur(var(--gt-blur));backdrop-filter:blur(var(--gt-blur));border:1px solid var(--gt-border);border-radius:var(--gt-radius);box-shadow:var(--gt-shadow);grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:.75rem;padding:.875rem 1rem;display:grid;position:relative;overflow:hidden}@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){.glass-toast{background-color:var(--gt-bg-opaque)}}.glass-toast--success{--gt-pill-bg:#d0fae5;--gt-icon:#047857;--gt-bar:#00bb7f;--gt-ring:16, 185, 129}.glass-toast--error{--gt-pill-bg:#ffe2e2;--gt-icon:#dc2626;--gt-action-text:#b91c1c;--gt-bar:#ff6568;--gt-ring:239, 68, 68}.glass-toast--warning{--gt-pill-bg:#fef3c6;--gt-icon:#b45309;--gt-bar:#fcbb00;--gt-ring:245, 158, 11}.glass-toast--info{--gt-pill-bg:#e2eaf1;--gt-icon:#3a5b7a;--gt-bar:#6f92ad;--gt-ring:76, 112, 144}.glass-toast--animated{transition:all .28s cubic-bezier(0,0,.2,1)}.glass-toast--leaving{transition-timing-function:cubic-bezier(.4,0,1,1)}.glass-toast--enter,.glass-toast--faded{opacity:0}.glass-toast--enter[data-position=top-right],.glass-toast--enter[data-position=bottom-right]{transform:translate(2rem)}.glass-toast--enter[data-position=bottom-center]{transform:translateY(2rem)}.glass-toast__icon{background-color:var(--gt-pill-bg);width:1.75rem;height:1.75rem;color:var(--gt-icon);border-radius:.5rem;flex-shrink:0;justify-content:center;align-items:center;display:flex}.glass-toast__icon svg{flex-shrink:0;width:18px;height:18px;display:block}.glass-toast__message{min-width:0;color:var(--gt-text);overflow-wrap:anywhere;-webkit-line-clamp:5;line-clamp:5;-webkit-box-orient:vertical;margin:0;font-size:.9375rem;line-height:1.625;display:-webkit-box;overflow:hidden}.glass-toast__action{border:1px solid var(--gt-action-border,var(--gt-border));background-color:var(--gt-action-bg,transparent);min-width:0;max-width:100%;min-height:2rem;color:var(--gt-action-text,var(--gt-icon));font:inherit;overflow-wrap:anywhere;cursor:pointer;appearance:none;border-radius:.5rem;grid-area:2/2;place-self:center start;padding:.3125rem .75rem;font-size:.8125rem;font-weight:600;line-height:1.25;transition:background-color .15s cubic-bezier(.4,0,.2,1),border-color .15s cubic-bezier(.4,0,.2,1)}.glass-toast__action:hover{background-color:var(--gt-action-bg-hover,var(--gt-pill-bg))}.glass-toast__action:focus-visible{outline:2px solid var(--gt-focus-ring);outline-offset:2px}.glass-toast__close{border:1px solid var(--gt-close-border);background-color:var(--gt-close-bg);width:2rem;height:2rem;color:var(--gt-close-text);font:inherit;cursor:pointer;appearance:none;border-radius:9999px;grid-area:1/-2;justify-content:center;align-self:center;align-items:center;padding:0;transition:all .15s cubic-bezier(.4,0,.2,1);display:flex}.glass-toast__close:hover{background-color:var(--gt-close-bg-hover);border-color:var(--gt-close-border-hover);color:var(--gt-close-text-hover)}.glass-toast__close:focus-visible{outline:2px solid var(--gt-focus-ring);outline-offset:2px}.glass-toast__close svg{width:.875rem;height:.875rem;display:block}.glass-toast__bar{background-color:var(--gt-bar);opacity:.4;border-radius:9999px;height:2px;position:absolute;bottom:0;left:0}@media (width>=768px){.glass-toast__message{font-size:14px}.glass-toast:has(.glass-toast__action){grid-template-columns:auto minmax(0,1fr) minmax(0,35%) auto}.glass-toast:has(.glass-toast__action) .glass-toast__action{grid-area:1/3}}@media (prefers-color-scheme:dark){:where(:root:not([data-theme=light]):not(.light)) .glass-toast{--gt-bg:#1c1c1eb8;--gt-bg-opaque:#1c1c1eeb;--gt-border:#ffffff1a;--gt-text:#e5e7eb;--gt-close-bg:#ffffff0f;--gt-close-border:#ffffff1f;--gt-close-text:#cbd5e1;--gt-close-bg-hover:#ffffff1f;--gt-close-border-hover:#ffffff38;--gt-close-text-hover:#f1f5f9;--gt-focus-ring:#93c5fd;--gt-action-text:var(--gt-text);--gt-action-bg-hover:var(--gt-close-bg-hover)}}:where([data-theme=dark],.dark) .glass-toast{--gt-bg:#1c1c1eb8;--gt-bg-opaque:#1c1c1eeb;--gt-border:#ffffff1a;--gt-text:#e5e7eb;--gt-close-bg:#ffffff0f;--gt-close-border:#ffffff1f;--gt-close-text:#cbd5e1;--gt-close-bg-hover:#ffffff1f;--gt-close-border-hover:#ffffff38;--gt-close-text-hover:#f1f5f9;--gt-focus-ring:#93c5fd;--gt-action-text:var(--gt-text);--gt-action-bg-hover:var(--gt-close-bg-hover)}", n = 280, r = 12, i = 1400, a = { error: 1e4 }, o = 5500, s = 4, c = "info", l = "top-right", u = "Close", d = {
|
|
9
|
-
success: "16, 185, 129",
|
|
10
|
-
error: "239, 68, 68",
|
|
11
|
-
warning: "245, 158, 11",
|
|
12
|
-
info: "76, 112, 144"
|
|
13
|
-
}, f = {
|
|
14
|
-
"top-right": "glass-toast-container--top-right",
|
|
15
|
-
"bottom-right": "glass-toast-container--bottom-right",
|
|
16
|
-
"bottom-center": "glass-toast-container--bottom-center"
|
|
17
|
-
}, p = "0 4px 24px -4px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04)", m = !0, h = u;
|
|
18
|
-
function g() {
|
|
19
|
-
if (typeof document > "u" || document.querySelector("style[data-glass-toast], link[data-glass-toast]")) return;
|
|
20
|
-
let e = document.createElement("style");
|
|
21
|
-
e.setAttribute("data-glass-toast", ""), e.textContent = t, document.head.prepend(e);
|
|
22
|
-
}
|
|
23
|
-
var _ = () => window.matchMedia?.("(prefers-reduced-motion: reduce)").matches, v = /* @__PURE__ */ new Map(), y = /* @__PURE__ */ new WeakMap(), b;
|
|
24
|
-
function x() {
|
|
25
|
-
for (let e of Object.values(b ?? {})) cancelAnimationFrame(e.frame), e.frame = void 0, e.pending.length = 0, e.el.textContent = "";
|
|
26
|
-
}
|
|
27
|
-
function S() {
|
|
28
|
-
if (typeof document < "u" && document.body && !(b?.status.el.isConnected && b.alert.el.isConnected)) {
|
|
29
|
-
x();
|
|
30
|
-
for (let e of Object.values(b ?? {})) e.el.remove();
|
|
31
|
-
b = Object.fromEntries(["status", "alert"].map((e) => {
|
|
32
|
-
let t = document.createElement("div");
|
|
33
|
-
return t.className = "glass-toast-announcer", t.setAttribute("role", e), t.setAttribute("aria-atomic", "true"), document.body.appendChild(t), [e, {
|
|
34
|
-
el: t,
|
|
35
|
-
pending: [],
|
|
36
|
-
frame: void 0
|
|
37
|
-
}];
|
|
38
|
-
}));
|
|
39
|
-
}
|
|
40
|
-
}
|
|
41
|
-
function C(e, t, n) {
|
|
42
|
-
S();
|
|
43
|
-
let r = b[t === "error" ? "alert" : "status"];
|
|
44
|
-
r.pending.push({
|
|
45
|
-
toast: e,
|
|
46
|
-
message: n
|
|
47
|
-
}), r.frame === void 0 && (r.el.textContent = "", r.frame = requestAnimationFrame(() => {
|
|
48
|
-
r.frame = requestAnimationFrame(() => {
|
|
49
|
-
r.frame = void 0;
|
|
50
|
-
let e = r.pending.splice(0);
|
|
51
|
-
r.el.isConnected && (r.el.textContent = e.filter(({ toast: e }) => e.isConnected && !e.dataset.dismissing).map(({ message: e }) => e).join("\n"));
|
|
52
|
-
});
|
|
53
|
-
}));
|
|
54
|
-
}
|
|
55
|
-
var w = !1;
|
|
56
|
-
function T(e) {
|
|
57
|
-
let t = v.get(e);
|
|
58
|
-
if (t && t.isConnected) return t;
|
|
59
|
-
let n = document.createElement("div");
|
|
60
|
-
return n.className = `glass-toast-container ${f[e]}`, n.dataset.toastContainer = e, document.body.appendChild(n), v.set(e, n), n;
|
|
61
|
-
}
|
|
62
|
-
function E(e) {
|
|
63
|
-
let t = [...e.children].filter((e) => !e.dataset.dismissing);
|
|
64
|
-
for (; t.length >= s;) {
|
|
65
|
-
let e = t.shift();
|
|
66
|
-
y.has(e) ? y.get(e).dismiss() : e.remove();
|
|
67
|
-
}
|
|
68
|
-
}
|
|
69
|
-
function D(e) {
|
|
70
|
-
if (e && e.isConnected && typeof e.focus == "function" && (e.focus(), document.activeElement === e)) return;
|
|
71
|
-
let t = document.querySelector("[data-toast-container] > .glass-toast:not([data-dismissing]) .glass-toast__close");
|
|
72
|
-
t && t.focus();
|
|
73
|
-
}
|
|
74
|
-
function O(t, { type: n, position: r, persistent: i, duration: a, action: o }) {
|
|
75
|
-
let s = _(), c = document.createElement("div");
|
|
76
|
-
c.dataset.position = r, c.className = [
|
|
77
|
-
"glass-toast",
|
|
78
|
-
`glass-toast--${n}`,
|
|
79
|
-
s ? "glass-toast--faded" : "glass-toast--animated glass-toast--enter"
|
|
80
|
-
].join(" ");
|
|
81
|
-
let l = document.createElement("span");
|
|
82
|
-
l.className = "glass-toast__icon", l.innerHTML = e[n];
|
|
83
|
-
let u = document.createElement("p");
|
|
84
|
-
u.className = "glass-toast__message", u.textContent = t, c.append(l, u);
|
|
85
|
-
let d = null;
|
|
86
|
-
o && o.label && (d = document.createElement("button"), d.type = "button", d.className = "glass-toast__action", d.textContent = o.label, c.appendChild(d));
|
|
87
|
-
let f = document.createElement("button");
|
|
88
|
-
if (f.type = "button", f.className = "glass-toast__close", f.setAttribute("aria-label", h), f.innerHTML = e.close, c.appendChild(f), !i) {
|
|
89
|
-
let e = document.createElement("div");
|
|
90
|
-
e.className = "glass-toast__bar", e.style.width = "100%", e.style.transition = `width ${a}ms linear`, c.appendChild(e);
|
|
91
|
-
}
|
|
92
|
-
return {
|
|
93
|
-
el: c,
|
|
94
|
-
btn: f,
|
|
95
|
-
actionBtn: d
|
|
96
|
-
};
|
|
97
|
-
}
|
|
98
|
-
function k(e, t) {
|
|
99
|
-
if (_() || typeof e.animate != "function") return;
|
|
100
|
-
let n = getComputedStyle(e), r = n.getPropertyValue("--gt-ring").trim().replace(/\s*,\s*/g, ", ") || d[t], a = n.getPropertyValue("--gt-shadow").trim() || p;
|
|
101
|
-
return e.animate([
|
|
102
|
-
{
|
|
103
|
-
boxShadow: `0 0 18px 6px rgba(${r}, 0.75), ${a}`,
|
|
104
|
-
offset: 0
|
|
105
|
-
},
|
|
106
|
-
{
|
|
107
|
-
boxShadow: `0 0 22px 8px rgba(${r}, 0.7), ${a}`,
|
|
108
|
-
offset: .35
|
|
109
|
-
},
|
|
110
|
-
{
|
|
111
|
-
boxShadow: `0 0 56px 26px rgba(${r}, 0), ${a}`,
|
|
112
|
-
offset: 1
|
|
113
|
-
}
|
|
114
|
-
], {
|
|
115
|
-
duration: i,
|
|
116
|
-
easing: "ease-out",
|
|
117
|
-
fill: "none"
|
|
118
|
-
});
|
|
119
|
-
}
|
|
120
|
-
function A(e, t) {
|
|
121
|
-
let n = e.parentElement;
|
|
122
|
-
e.remove(), n && n.children.length === 0 && (n.remove(), v.get(t) === n && v.delete(t));
|
|
123
|
-
}
|
|
124
|
-
function j(e) {
|
|
125
|
-
if (_()) {
|
|
126
|
-
e.classList.add("glass-toast--faded");
|
|
127
|
-
return;
|
|
128
|
-
}
|
|
129
|
-
e.classList.add("glass-toast--leaving");
|
|
130
|
-
let t = e.offsetHeight;
|
|
131
|
-
e.style.height = `${t}px`, e.offsetHeight, e.classList.add("glass-toast--enter"), e.style.height = "0px", e.style.paddingTop = "0", e.style.paddingBottom = "0", e.style.borderTopWidth = "0", e.style.borderBottomWidth = "0", e.style.marginTop = `-${r}px`;
|
|
132
|
-
}
|
|
133
|
-
function M(e, t = {}) {
|
|
134
|
-
if (w) return () => {};
|
|
135
|
-
let { type: r = c, position: i = l, persistent: s = !1, action: u } = t;
|
|
136
|
-
Object.hasOwn(d, r) || (r = c), Object.hasOwn(f, i) || (i = l);
|
|
137
|
-
let p = t.duration !== void 0, h = p ? t.duration : a[r] ?? o;
|
|
138
|
-
(u && u.label && !p || h <= 0) && (s = !0), m && g();
|
|
139
|
-
let v = T(i);
|
|
140
|
-
E(v);
|
|
141
|
-
let { el: b, btn: x, actionBtn: S } = O(e, {
|
|
142
|
-
type: r,
|
|
143
|
-
position: i,
|
|
144
|
-
persistent: s,
|
|
145
|
-
duration: h,
|
|
146
|
-
action: u
|
|
147
|
-
}), M = typeof document < "u" ? document.activeElement : null;
|
|
148
|
-
v.appendChild(b);
|
|
149
|
-
let N = b.querySelector(".glass-toast__bar"), P, F, I, L, R, z = !1, B = () => {
|
|
150
|
-
clearTimeout(P), cancelAnimationFrame(I), cancelAnimationFrame(L), R?.cancel();
|
|
151
|
-
}, V = () => {
|
|
152
|
-
z || (z = !0, B(), clearTimeout(F), y.delete(b), A(b, i));
|
|
153
|
-
}, H = () => {
|
|
154
|
-
z || b.dataset.dismissing || (b.isConnected ? (b.dataset.dismissing = "true", B(), j(b), F = setTimeout(() => {
|
|
155
|
-
let e = b.contains(document.activeElement);
|
|
156
|
-
V(), e && D(M);
|
|
157
|
-
}, n)) : V());
|
|
158
|
-
};
|
|
159
|
-
y.set(b, {
|
|
160
|
-
dismiss: H,
|
|
161
|
-
remove: V,
|
|
162
|
-
invoker: M
|
|
163
|
-
}), C(b, r, e);
|
|
164
|
-
let U = _() ? "glass-toast--faded" : "glass-toast--enter";
|
|
165
|
-
if (I = requestAnimationFrame(() => {
|
|
166
|
-
I = requestAnimationFrame(() => {
|
|
167
|
-
b.isConnected ? (b.classList.remove(U), R = k(b, r)) : V();
|
|
168
|
-
});
|
|
169
|
-
}), x.addEventListener("click", H), S && S.addEventListener("click", () => {
|
|
170
|
-
u.onClick?.(), H();
|
|
171
|
-
}), b.addEventListener("keydown", (e) => {
|
|
172
|
-
e.key === "Escape" && (e.stopPropagation(), H());
|
|
173
|
-
}), !s) {
|
|
174
|
-
let e = h, t = Date.now();
|
|
175
|
-
P = setTimeout(H, e);
|
|
176
|
-
let n = !1, r = !1, i = !1, a = () => {
|
|
177
|
-
N.style.transition = `width ${e}ms linear`, N.style.width = "0%";
|
|
178
|
-
};
|
|
179
|
-
L = requestAnimationFrame(() => {
|
|
180
|
-
L = requestAnimationFrame(a);
|
|
181
|
-
});
|
|
182
|
-
let o = () => {
|
|
183
|
-
if (n || z || b.dataset.dismissing) return;
|
|
184
|
-
n = !0, clearTimeout(P), cancelAnimationFrame(L), e -= Date.now() - t;
|
|
185
|
-
let r = N.getBoundingClientRect().width;
|
|
186
|
-
N.style.transition = "none", N.style.width = `${r}px`;
|
|
187
|
-
}, s = () => {
|
|
188
|
-
!n || z || b.dataset.dismissing || (n = !1, e <= 0 ? H() : (t = Date.now(), P = setTimeout(H, e), L = requestAnimationFrame(a)));
|
|
189
|
-
}, c = () => {
|
|
190
|
-
!r && !i && s();
|
|
191
|
-
};
|
|
192
|
-
b.addEventListener("mouseenter", () => {
|
|
193
|
-
r = !0, o();
|
|
194
|
-
}), b.addEventListener("mouseleave", () => {
|
|
195
|
-
r = !1, c();
|
|
196
|
-
}), b.addEventListener("focusin", () => {
|
|
197
|
-
i = !0, o();
|
|
198
|
-
}), b.addEventListener("focusout", (e) => {
|
|
199
|
-
b.contains(e.relatedTarget) || (i = !1, c());
|
|
200
|
-
});
|
|
201
|
-
}
|
|
202
|
-
return H;
|
|
203
|
-
}
|
|
204
|
-
function N({ suppress: e = !1 } = {}) {
|
|
205
|
-
e && (w = !0), x();
|
|
206
|
-
let t;
|
|
207
|
-
for (let e of v.values()) {
|
|
208
|
-
for (let n of [...e.children]) {
|
|
209
|
-
let e = y.get(n);
|
|
210
|
-
n.contains(document.activeElement) && (t = e), e?.remove();
|
|
211
|
-
}
|
|
212
|
-
e.remove();
|
|
213
|
-
}
|
|
214
|
-
v.clear(), t && D(t.invoker);
|
|
215
|
-
}
|
|
216
|
-
function P() {
|
|
217
|
-
w = !1;
|
|
218
|
-
}
|
|
219
|
-
function F(e, t) {
|
|
220
|
-
return M(e, {
|
|
221
|
-
...t,
|
|
222
|
-
type: "success"
|
|
223
|
-
});
|
|
224
|
-
}
|
|
225
|
-
function I(e, t) {
|
|
226
|
-
return M(e, {
|
|
227
|
-
...t,
|
|
228
|
-
type: "error"
|
|
229
|
-
});
|
|
230
|
-
}
|
|
231
|
-
function L(e, t) {
|
|
232
|
-
return M(e, {
|
|
233
|
-
...t,
|
|
234
|
-
type: "warning"
|
|
235
|
-
});
|
|
236
|
-
}
|
|
237
|
-
function R(e, t) {
|
|
238
|
-
return M(e, {
|
|
239
|
-
...t,
|
|
240
|
-
type: "info"
|
|
241
|
-
});
|
|
242
|
-
}
|
|
243
|
-
var z = {
|
|
244
|
-
show: M,
|
|
245
|
-
success: F,
|
|
246
|
-
error: I,
|
|
247
|
-
warning: L,
|
|
248
|
-
info: R,
|
|
249
|
-
dismissAll: N,
|
|
250
|
-
resume: P
|
|
251
|
-
};
|
|
252
|
-
function B({ global: e = !0, injectStyles: t = !0, target: n, closeLabel: r } = {}) {
|
|
253
|
-
if (m = t, h = typeof r == "string" && r.trim() ? r : u, t && g(), S(), e) {
|
|
254
|
-
let e = n ?? (typeof window < "u" ? window : void 0);
|
|
255
|
-
e && (e.toast = z);
|
|
256
|
-
}
|
|
257
|
-
return z;
|
|
258
|
-
}
|
|
259
|
-
export { B as a, F as c, R as i, L as l, g as n, P as o, I as r, M as s, N as t };
|