@nuralyui/toast 0.0.3 → 0.0.11
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/bundle.js +1330 -0
- package/index.d.ts +7 -0
- package/index.js +7 -0
- package/index.js.map +1 -1
- package/package.json +40 -5
- package/react.d.ts +5 -3
- package/react.js +12 -5
- package/react.js.map +1 -1
- package/toast.component.d.ts +152 -7
- package/toast.component.js +350 -62
- package/toast.component.js.map +1 -1
- package/toast.style.d.ts +13 -2
- package/toast.style.js +336 -69
- package/toast.style.js.map +1 -1
- package/toast.types.d.ts +124 -0
- package/toast.types.js +9 -0
- package/toast.types.js.map +1 -0
- package/demo/toast-demo.d.ts +0 -34
- package/demo/toast-demo.d.ts.map +0 -1
- package/demo/toast-demo.js +0 -353
- package/demo/toast-demo.js.map +0 -1
- package/index.d.ts.map +0 -1
- package/react.d.ts.map +0 -1
- package/toast.component.d.ts.map +0 -1
- package/toast.style.d.ts.map +0 -1
package/index.d.ts
CHANGED
package/index.js
CHANGED
package/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/toast/index.ts"],"names":[],"mappings":"AAAA,cAAc,sBAAsB,CAAC","sourcesContent":["
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/toast/index.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,cAAc,sBAAsB,CAAC;AACrC,cAAc,kBAAkB,CAAC;AACjC,cAAc,wBAAwB,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2023 Nuraly, Laabidi Aymen\n * SPDX-License-Identifier: MIT\n */\n\nexport * from './toast.component.js';\nexport * from './toast.types.js';\nexport * from './controllers/index.js';\n\n"]}
|
package/package.json
CHANGED
|
@@ -1,15 +1,50 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@nuralyui/toast",
|
|
3
|
-
"version": "0.0.
|
|
4
|
-
"description": "",
|
|
3
|
+
"version": "0.0.11",
|
|
4
|
+
"description": "Toast notification component for NuralyUI library",
|
|
5
5
|
"main": "index.js",
|
|
6
6
|
"type": "module",
|
|
7
|
-
"
|
|
8
|
-
"
|
|
7
|
+
"exports": {
|
|
8
|
+
".": {
|
|
9
|
+
"import": "./index.js"
|
|
10
|
+
},
|
|
11
|
+
"./bundle": {
|
|
12
|
+
"import": "./bundle.js"
|
|
13
|
+
}
|
|
9
14
|
},
|
|
15
|
+
"files": [
|
|
16
|
+
"*.js",
|
|
17
|
+
"*.d.ts",
|
|
18
|
+
"*.js.map",
|
|
19
|
+
"toast.bundled.js",
|
|
20
|
+
"bundle.js"
|
|
21
|
+
],
|
|
10
22
|
"scripts": {
|
|
11
23
|
"test": "echo \"Error: no test specified\" && exit 1"
|
|
12
24
|
},
|
|
25
|
+
"repository": {
|
|
26
|
+
"type": "git",
|
|
27
|
+
"url": "https://github.com/Nuralyio/NuralyUI.git",
|
|
28
|
+
"directory": "src/components/toast"
|
|
29
|
+
},
|
|
30
|
+
"keywords": [
|
|
31
|
+
"web-components",
|
|
32
|
+
"lit-element",
|
|
33
|
+
"toast",
|
|
34
|
+
"notification",
|
|
35
|
+
"ui-components",
|
|
36
|
+
"typescript"
|
|
37
|
+
],
|
|
13
38
|
"author": "Labidi Aymen",
|
|
14
|
-
"license": "ISC"
|
|
39
|
+
"license": "ISC",
|
|
40
|
+
"nuralyui": {
|
|
41
|
+
"requiredComponents": [
|
|
42
|
+
"nr-icon",
|
|
43
|
+
"nr-button"
|
|
44
|
+
]
|
|
45
|
+
},
|
|
46
|
+
"peerDependencies": {
|
|
47
|
+
"@nuralyui/icon": "^0.0.1",
|
|
48
|
+
"@nuralyui/button": "^0.0.1"
|
|
49
|
+
}
|
|
15
50
|
}
|
package/react.d.ts
CHANGED
|
@@ -1,5 +1,7 @@
|
|
|
1
|
-
import {
|
|
2
|
-
export declare const
|
|
3
|
-
|
|
1
|
+
import { NrToastElement } from './toast.component.js';
|
|
2
|
+
export declare const NrToast: import("@lit-labs/react").ReactWebComponent<NrToastElement, {
|
|
3
|
+
'nr-toast-show': string;
|
|
4
|
+
'nr-toast-close': string;
|
|
5
|
+
'nr-toast-click': string;
|
|
4
6
|
}>;
|
|
5
7
|
//# sourceMappingURL=react.d.ts.map
|
package/react.js
CHANGED
|
@@ -1,12 +1,19 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @license
|
|
3
|
+
* Copyright 2023 Nuraly, Laabidi Aymen
|
|
4
|
+
* SPDX-License-Identifier: MIT
|
|
5
|
+
*/
|
|
1
6
|
import { createComponent } from '@lit-labs/react';
|
|
2
7
|
import * as React from 'react';
|
|
3
|
-
import {
|
|
4
|
-
export const
|
|
5
|
-
tagName: '
|
|
6
|
-
elementClass:
|
|
8
|
+
import { NrToastElement } from './toast.component.js';
|
|
9
|
+
export const NrToast = createComponent({
|
|
10
|
+
tagName: 'nr-toast',
|
|
11
|
+
elementClass: NrToastElement,
|
|
7
12
|
react: React,
|
|
8
13
|
events: {
|
|
9
|
-
|
|
14
|
+
'nr-toast-show': 'nr-toast-show',
|
|
15
|
+
'nr-toast-close': 'nr-toast-close',
|
|
16
|
+
'nr-toast-click': 'nr-toast-click',
|
|
10
17
|
},
|
|
11
18
|
});
|
|
12
19
|
//# sourceMappingURL=react.js.map
|
package/react.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"react.js","sourceRoot":"","sources":["../../../src/components/toast/react.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAClD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"react.js","sourceRoot":"","sources":["../../../src/components/toast/react.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAClD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AACtD,MAAM,CAAC,MAAM,OAAO,GAAG,eAAe,CAAC;IACrC,OAAO,EAAE,UAAU;IACnB,YAAY,EAAE,cAAc;IAC5B,KAAK,EAAE,KAAK;IACZ,MAAM,EAAE;QACN,eAAe,EAAE,eAAe;QAChC,gBAAgB,EAAE,gBAAgB;QAClC,gBAAgB,EAAE,gBAAgB;KACnC;CACF,CAAC,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2023 Nuraly, Laabidi Aymen\n * SPDX-License-Identifier: MIT\n */\nimport { createComponent } from '@lit-labs/react';\nimport * as React from 'react';\nimport { NrToastElement } from './toast.component.js';\nexport const NrToast = createComponent({\n tagName: 'nr-toast',\n elementClass: NrToastElement,\n react: React,\n events: {\n 'nr-toast-show': 'nr-toast-show',\n 'nr-toast-close': 'nr-toast-close',\n 'nr-toast-click': 'nr-toast-click',\n },\n});\n\n"]}
|
package/toast.component.d.ts
CHANGED
|
@@ -1,9 +1,154 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
1
|
+
/**
|
|
2
|
+
* @license
|
|
3
|
+
* Copyright 2023 Nuraly, Laabidi Aymen
|
|
4
|
+
* SPDX-License-Identifier: MIT
|
|
5
|
+
*/
|
|
6
|
+
import { LitElement } from 'lit';
|
|
7
|
+
import { ToastPosition, ToastAnimation, ToastConfig } from './toast.types.js';
|
|
8
|
+
import '../icon/icon.component.js';
|
|
9
|
+
import '../button/index.js';
|
|
10
|
+
declare const NrToastElement_base: (new (...args: any[]) => import("@nuralyui/common/mixins").DependencyAware) & (new (...args: any[]) => import("@nuralyui/common/mixins").ThemeAware) & (new (...args: any[]) => import("@nuralyui/common/mixins").EventHandlerCapable) & typeof LitElement;
|
|
11
|
+
/**
|
|
12
|
+
* Toast notification component for displaying temporary messages.
|
|
13
|
+
*
|
|
14
|
+
* Provides a flexible notification system with multiple types, positions, and animations.
|
|
15
|
+
* Supports stacking multiple toasts, auto-dismiss (enabled by default), action buttons,
|
|
16
|
+
* custom HTML content, and manual closing.
|
|
17
|
+
*
|
|
18
|
+
* @example
|
|
19
|
+
* ```html
|
|
20
|
+
* <!-- Basic usage with auto-dismiss -->
|
|
21
|
+
* <nr-toast position="top-right"></nr-toast>
|
|
22
|
+
*
|
|
23
|
+
* <!-- Disable auto-dismiss to require manual closing -->
|
|
24
|
+
* <nr-toast position="top-right" auto-dismiss="false"></nr-toast>
|
|
25
|
+
*
|
|
26
|
+
* <!-- Programmatic usage -->
|
|
27
|
+
* <script>
|
|
28
|
+
* const toast = document.querySelector('nr-toast');
|
|
29
|
+
* toast.show({ text: 'Success!', type: 'success' });
|
|
30
|
+
* toast.show({ text: 'Error occurred', type: 'error', duration: 7000 });
|
|
31
|
+
*
|
|
32
|
+
* // Disable auto-dismiss for specific toast
|
|
33
|
+
* toast.show({ text: 'Persistent message', autoDismiss: false });
|
|
34
|
+
*
|
|
35
|
+
* // Toast with action button
|
|
36
|
+
* toast.show({
|
|
37
|
+
* text: 'Item deleted',
|
|
38
|
+
* type: 'success',
|
|
39
|
+
* button: {
|
|
40
|
+
* label: 'Undo',
|
|
41
|
+
* onClick: () => console.log('Undo clicked'),
|
|
42
|
+
* type: 'primary'
|
|
43
|
+
* }
|
|
44
|
+
* });
|
|
45
|
+
*
|
|
46
|
+
* // Custom HTML content (GDPR consent example)
|
|
47
|
+
* toast.show({
|
|
48
|
+
* content: html`
|
|
49
|
+
* <div>
|
|
50
|
+
* <h4>Cookie Consent</h4>
|
|
51
|
+
* <p>We use cookies to improve your experience.</p>
|
|
52
|
+
* <div style="display: flex; gap: 0.5rem; margin-top: 0.5rem;">
|
|
53
|
+
* <nr-button size="small" type="primary">Accept</nr-button>
|
|
54
|
+
* <nr-button size="small" type="secondary">Decline</nr-button>
|
|
55
|
+
* </div>
|
|
56
|
+
* </div>
|
|
57
|
+
* `,
|
|
58
|
+
* autoDismiss: false,
|
|
59
|
+
* closable: true
|
|
60
|
+
* });
|
|
61
|
+
* </script>
|
|
62
|
+
* ```
|
|
63
|
+
*
|
|
64
|
+
* @fires nr-toast-show - Toast shown
|
|
65
|
+
* @fires nr-toast-close - Toast closed
|
|
66
|
+
* @fires nr-toast-click - Toast clicked
|
|
67
|
+
*
|
|
68
|
+
* @cssproperty --nuraly-z-index-toast - Toast z-index
|
|
69
|
+
* @cssproperty --nuraly-toast-default-background - Default toast background
|
|
70
|
+
* @cssproperty --nuraly-toast-success-background - Success toast background
|
|
71
|
+
* @cssproperty --nuraly-toast-error-background - Error toast background
|
|
72
|
+
* @cssproperty --nuraly-toast-warning-background - Warning toast background
|
|
73
|
+
* @cssproperty --nuraly-toast-info-background - Info toast background
|
|
74
|
+
*/
|
|
75
|
+
export declare class NrToastElement extends NrToastElement_base {
|
|
76
|
+
static styles: import("lit").CSSResult;
|
|
77
|
+
requiredComponents: string[];
|
|
78
|
+
/** Position of toast container on screen */
|
|
79
|
+
position: ToastPosition;
|
|
80
|
+
/** Maximum number of toasts to display */
|
|
81
|
+
maxToasts: number;
|
|
82
|
+
/** Default duration for toasts in milliseconds */
|
|
83
|
+
defaultDuration: import("./toast.types.js").ToastDuration;
|
|
84
|
+
/** Animation type for toasts */
|
|
85
|
+
animation: ToastAnimation;
|
|
86
|
+
/** Whether to stack toasts or replace */
|
|
87
|
+
stack: boolean;
|
|
88
|
+
/** Auto dismiss toasts after duration (default: true) */
|
|
89
|
+
autoDismiss: boolean;
|
|
90
|
+
/** Internal state: active toasts */
|
|
91
|
+
private toasts;
|
|
92
|
+
/** Timeout map for auto-dismiss */
|
|
93
|
+
private timeouts;
|
|
94
|
+
/**
|
|
95
|
+
* Show a new toast notification
|
|
96
|
+
* @param config - Toast configuration
|
|
97
|
+
* @returns Toast ID for manual control
|
|
98
|
+
*/
|
|
99
|
+
show(config: string | ToastConfig): string;
|
|
100
|
+
/**
|
|
101
|
+
* Show success toast
|
|
102
|
+
*/
|
|
103
|
+
success(text: string, duration?: number): string;
|
|
104
|
+
/**
|
|
105
|
+
* Show error toast
|
|
106
|
+
*/
|
|
107
|
+
error(text: string, duration?: number): string;
|
|
108
|
+
/**
|
|
109
|
+
* Show warning toast
|
|
110
|
+
*/
|
|
111
|
+
warning(text: string, duration?: number): string;
|
|
112
|
+
/**
|
|
113
|
+
* Show info toast
|
|
114
|
+
*/
|
|
115
|
+
info(text: string, duration?: number): string;
|
|
116
|
+
/**
|
|
117
|
+
* Remove a specific toast
|
|
118
|
+
*/
|
|
119
|
+
removeToast(id: string): void;
|
|
120
|
+
/**
|
|
121
|
+
* Clear all toasts
|
|
122
|
+
*/
|
|
123
|
+
clearAll(): void;
|
|
124
|
+
/**
|
|
125
|
+
* Handle toast click
|
|
126
|
+
*/
|
|
127
|
+
private handleToastClick;
|
|
128
|
+
/**
|
|
129
|
+
* Handle close button click
|
|
130
|
+
*/
|
|
131
|
+
private handleCloseClick;
|
|
132
|
+
/**
|
|
133
|
+
* Get default icon for toast type
|
|
134
|
+
*/
|
|
135
|
+
private getDefaultIcon;
|
|
136
|
+
/**
|
|
137
|
+
* Generate unique ID
|
|
138
|
+
*/
|
|
139
|
+
private generateId;
|
|
140
|
+
/**
|
|
141
|
+
* Get animation class
|
|
142
|
+
*/
|
|
143
|
+
private getAnimationClass;
|
|
144
|
+
/**
|
|
145
|
+
* Emit toast event
|
|
146
|
+
*/
|
|
147
|
+
private emitToastEvent;
|
|
148
|
+
disconnectedCallback(): void;
|
|
149
|
+
render(): import("lit").TemplateResult<1>;
|
|
150
|
+
private renderToast;
|
|
151
|
+
private renderButton;
|
|
8
152
|
}
|
|
153
|
+
export {};
|
|
9
154
|
//# sourceMappingURL=toast.component.d.ts.map
|