mini-notifier - npm Package Compare versions

Comparing version 0.4.6 to 0.5.0

dist/draw.d.ts

@@ -24,3 +24,3 @@ export declare type NotifyOptions = {
 declare const prompt: (message: string, options?: PromptOptions) => HTMLElement;
-declare const getWrapper: (theme?: string | undefined) => HTMLElement;
+declare const getWrapper: (injectCssVars?: boolean | undefined) => HTMLElement;
 export { alert, confirm, prompt, getWrapper };

dist/index.d.ts

 import "./css/index.css";
 import * as draw from "./draw";
-export declare function prepareContainer(container?: HTMLElement, theme?: string): HTMLElement;
+export declare function prepareContainer(container?: HTMLElement, injectCssVars?: boolean): HTMLElement;
 export declare function notify(message?: string, options?: draw.NotifyOptions): void;
 export declare function confirm(message?: string, options?: draw.ConfirmOptions): void;
 export declare function prompt(message?: string, options?: draw.PromptOptions): void;

dist/index.es.js

 const CSS_ = {
-    wrapper: "mini-notifier_notifications",
-    notification: "mini-notifier_notification",
-    crossBtn: "mini-notifier_notification__cross",
-    btnsWrapper: "mini-notifier_notification__btns",
+    wrapper: "mini-notifier-container",
+    notification: "mini-notifier-notification",
+    crossBtn: "mini-notifier-notification--cross",
+    btnsWrapper: "mini-notifier-notification--btns",
     theme: "mini-notifier-theme",
@@ -87,11 +87,13 @@ };
 };
-const getWrapper = function getWrapper(theme) {
+const getWrapper = function getWrapper(injectCssVars) {
     const wrapper = document.createElement("DIV");
     wrapper.classList.add(CSS_.wrapper);
-    wrapper.classList.add(theme ? theme : CSS_.theme);
+    if (injectCssVars !== false) {
+        wrapper.classList.add("with-css-vars");
+    }
     return wrapper;
 };
 
-const bounceInClass = "mini-notifier_notification--bounce-in";
-function prepareContainer(container = document.body, theme) {
+const bounceInClass = "mini-notifier-notification--bounce-in";
+function prepareContainer(container = document.body, injectCssVars) {
     if (container.dataset.miniNotifier) {
@@ -103,3 +105,3 @@ const elt = document.querySelector(`#${container.dataset.miniNotifier}`);
     }
-    const wrapper = getWrapper(theme);
+    const wrapper = getWrapper(injectCssVars);
     wrapper.id = `mini-notifier-container-${Math.floor(Math.random() * 100000)}`;
@@ -106,0 +108,0 @@ if (container === document.body) {

dist/index.umd.js

@@ -6,6 +6,6 @@ 'use strict';
 const CSS_ = {
-    wrapper: "mini-notifier_notifications",
-    notification: "mini-notifier_notification",
-    crossBtn: "mini-notifier_notification__cross",
-    btnsWrapper: "mini-notifier_notification__btns",
+    wrapper: "mini-notifier-container",
+    notification: "mini-notifier-notification",
+    crossBtn: "mini-notifier-notification--cross",
+    btnsWrapper: "mini-notifier-notification--btns",
     theme: "mini-notifier-theme",
@@ -92,11 +92,13 @@ };
 };
-const getWrapper = function getWrapper(theme) {
+const getWrapper = function getWrapper(injectCssVars) {
     const wrapper = document.createElement("DIV");
     wrapper.classList.add(CSS_.wrapper);
-    wrapper.classList.add(theme ? theme : CSS_.theme);
+    if (injectCssVars !== false) {
+        wrapper.classList.add("with-css-vars");
+    }
     return wrapper;
 };
 
-const bounceInClass = "mini-notifier_notification--bounce-in";
-function prepareContainer(container = document.body, theme) {
+const bounceInClass = "mini-notifier-notification--bounce-in";
+function prepareContainer(container = document.body, injectCssVars) {
     if (container.dataset.miniNotifier) {
@@ -108,3 +110,3 @@ const elt = document.querySelector(`#${container.dataset.miniNotifier}`);
     }
-    const wrapper = getWrapper(theme);
+    const wrapper = getWrapper(injectCssVars);
     wrapper.id = `mini-notifier-container-${Math.floor(Math.random() * 100000)}`;
@@ -111,0 +113,0 @@ if (container === document.body) {

package.json

@@ -7,3 +7,3 @@ {
   ],
-  "version": "0.4.6",
+  "version": "0.5.0",
   "scripts": {
@@ -31,22 +31,25 @@ "dev": "npm run clean && rollup -cw",
   "devDependencies": {
-    "@rollup/plugin-commonjs": "^20.0.0",
+    "@rollup/plugin-commonjs": "^22.0.1",
     "@rollup/plugin-json": "^4.1.0",
-    "@rollup/plugin-node-resolve": "^13.0.4",
-    "@rollup/plugin-typescript": "^8.2.5",
-    "@typescript-eslint/eslint-plugin": "^4.29.2",
-    "@typescript-eslint/parser": "^4.29.2",
-    "autoprefixer": "^10.3.3",
-    "eslint": "^7.24.0",
-    "eslint-config-prettier": "^8.2.0",
-    "eslint-plugin-prettier": "^3.4.0",
-    "fs-extra": "^10.0.0",
-    "http-server": "^13.0.1",
-    "postcss-import": "^14.0.2",
+    "@rollup/plugin-node-resolve": "^13.3.0",
+    "@rollup/plugin-typescript": "^8.3.3",
+    "@typescript-eslint/eslint-plugin": "^5.30.6",
+    "@typescript-eslint/parser": "^5.30.6",
+    "autoprefixer": "^10.4.7",
+    "eslint": "^8.20.0",
+    "eslint-config-prettier": "^8.5.0",
+    "eslint-plugin-prettier": "^4.2.1",
+    "fs-extra": "^10.1.0",
+    "http-server": "^14.1.1",
+    "postcss-import": "^14.1.0",
     "postcss-nested": "^5.0.6",
-    "prettier": "^2.2.1",
+    "prettier": "^2.7.1",
     "rimraf": "^3.0.2",
-    "rollup": "^2.56.3",
-    "rollup-plugin-postcss": "^4.0.1",
-    "typescript": "^4.3.5"
+    "rollup": "^2.77.0",
+    "rollup-plugin-postcss": "^4.0.2",
+    "typescript": "^4.7.4"
+  },
+  "volta": {
+    "node": "16.16.0"
   }
 }

README.md

@@ -19,3 +19,3 @@ # miniNotifier
 ```js
-import { notify, prompt, confirm } from 'mini-notifier';
+import { notify, prompt, confirm, prepareContainer } from 'mini-notifier';
 import 'mini-notifier/dist/style.css';
@@ -54,3 +54,3 @@ ```
 
-If you want to custom the MiniNotifier theme.
+If you want to custom the MiniNotifier theme. You can ask mini-notifier not to load css vars with `prepareContainer`.
 
@@ -61,4 +61,4 @@ ```js
 
-// Add custom class `my-theme` to the mini-notifier container.
-prepareContainer(document.body, "my-theme");
+// Do not inject css vars.
+prepareContainer(document.body, false);
 
@@ -69,13 +69,14 @@ notify('hello world');
 ```css
-.my-theme {
+/* add here your custom css vars */
+.mini-notifier-container {
   --primary-color: #ffea66;
   --primary-color-dark: #eac800;
   
-  --red: #dc3545;
-  --red-light: #f8d7da;
-  --green: #2b5229;
-  --green-light: #e1fae1;
+  --red500: #dc3545;
+  --red200: #f8d7da;
+  --green500: #2b5229;
+  --green200: #e1fae1;
   
   --border-radius: .25rem;
 }
-```
+```

No alert changes

Improved metrics

Total package byte prevSize

31124

0.89%

Lines of code

428

0.71%

Number of lines in readme file

79

2.6%

No dependency changes