@silexlabs/grapesjs-notifications 0.0.2 → 0.0.4

package/README.md

@@ -19,7 +19,7 @@ Features
 * [x] Notification events
 * [x] Notification commands
 * [x] editor.NotificationManager API
-* [ ] Group notifications
+* [x] Group notifications
 
 ### HTML
 ```html
@@ -78,13 +78,38 @@ API:
 
 | Option | Description | Type | Default |
 |-|-|-|-
-| `style` | Custom style for the notification | `object` | `{}` |
 | `timeout` | Default timeout for the notification in ms | `number` | No timeout |
 | `container` | Container for the notifications | `HTMLElement` | `document.body` |
 | `storeKey` | Store notifications in local storage under this key | `string` | No storage |
 | `icons` | Icons for the notification types | `object` | `{error: '\u2716', warning: '\u26A0', success: '\u2714', info: '\u2139'}` |
 | `i18n` | Internationalization | `object` | Check the values in locale/en.js |
 | `maxNotifications` | Maximum number of notifications to display | `number` | `5` |
+| `reverse` | Reverse the order of the notifications | `boolean` | `false` |
+
+## Styling
+
+Note that you are free to style the container since you provide it in the options. You also can change the icons from the options.
+
+The notifications are styled using the following CSS classes:
+
+* `.gjs-notification` - The notification container
+* `.gjs-notification__group` - The notification group container
+* `.gjs-notification__item` - The notification item
+* `.gjs-notification__error` - The error notification
+* `.gjs-notification__warning` - The warning notification
+* `.gjs-notification__success` - The success notification
+* `.gjs-notification__info` - The info notification
+* `.gjs-notification__message` - The notification message
+* `.gjs-notification__close` - The close button for the notification
+
+```css
+.gjs-notification {
+  padding: 10px;
+  margin: 10px;
+  border-radius: 5px;
+  box-shadow: 0 0 5px rgba(0,0,0,.3);
+}
+```
 
 ## Download
 

package/dist/index.d.ts

@@ -4,6 +4,7 @@ import { StyleInfo } from 'lit/directives/style-map';
 
 export interface NotificationOptions {
 	message: string;
+	group?: string;
 	timeout?: number;
 	component?: string | Component;
 	type: "info" | "warning" | "error" | "success";
@@ -20,6 +21,7 @@ declare class Notification {
 	protected editor: NotificationEditor;
 	protected model: NotificationModel;
 	component: Component | null;
+	group: string | null;
 	timeoutRef: NodeJS.Timeout | undefined;
 	message: string;
 	type: "info" | "warning" | "error" | "success";
@@ -36,6 +38,7 @@ export interface NotificationManagerOptions {
 	style: Readonly<StyleInfo>;
 	container: HTMLElement;
 	maxNotifications?: number;
+	reverse?: boolean;
 	timeout?: number;
 	storeKey?: string;
 	icons?: {

package/locale/en.js

@@ -6,7 +6,9 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _default = exports.default = {
   '@silexlabs/grapesjs-notifications': {
-    'Close': 'Dismiss',
-    'Select': 'Select component {componentName}'
+    'Close': '\u2716 Dismiss',
+    'CloseAll': '\u2716 Dismiss all',
+    'Select': '\u2713 Select component {componentName}',
+    'Show': '\u2193 Show'
   }
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@silexlabs/grapesjs-notifications",
-  "version": "0.0.2",
+  "version": "0.0.4",
   "description": "This GrapesJs plugin is designed to enhance the user experience within the editor by providing a robust notification system. This plugin captures and displays various types of notifications including errors, warnings, and activities, thereby facilitating a more interactive and responsive interface.",
   "main": "dist/index.js",
   "repository": {