hiinformer 1.0.1 → 2.0.0

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.
Files changed (11) hide show
  1. package/README.md +175 -8
  2. package/dist/index.d.mts +41 -2
  3. package/dist/index.d.ts +41 -2
  4. package/dist/index.global.js +129 -5
  5. package/dist/index.js +132 -5
  6. package/dist/index.mjs +129 -5
  7. package/dist/styles/confirm/input.css +130 -0
  8. package/dist/styles/toast/input.css +32 -5
  9. package/package.json +2 -2
  10. package/dist/styles/toast/animation.css +0 -69
  11. package/dist/styles/toast/theme.css +0 -21
package/README.md CHANGED
@@ -1,13 +1,180 @@
1
- CSS link `hiinformer/dist/styles/main.css`
1
+ # Toast Notifications
2
2
 
3
- Useage
3
+ A lightweight, non-intrusive toast notification system for displaying user feedback messages.
4
4
 
5
+ ## Overview
6
+
7
+ The toast module provides an easy way to display temporary notification messages to users with different status types and positions. Messages can be customized with titles, content, display duration, and positioning options.
8
+
9
+ ## Usage
10
+
11
+ ### Via npm Package
12
+
13
+ ```typescript
5
14
  import { useToast } from "hiinformer";
6
15
 
7
- const toast = useToast();
16
+ const { add } = useToast();
17
+
18
+ add({
19
+ title: "Success",
20
+ message: "Your changes have been saved.",
21
+ });
22
+ ```
23
+
24
+ ### Via Browser (Global Script)
25
+
26
+ Include the library in your HTML:
27
+
28
+ ```html
29
+ <!DOCTYPE html>
30
+ <html>
31
+ <head>
32
+ <link rel="stylesheet" href="path/to/dist/styles/main.css" />
33
+ </head>
34
+ <body>
35
+ <script src="path/to/dist/index.global.js"></script>
36
+ <script>
37
+ const { useToast } = window.notify;
38
+ const { add } = useToast();
39
+
40
+ add({
41
+ title: "Success",
42
+ message: "Your changes have been saved.",
43
+ });
44
+ </script>
45
+ </body>
46
+ </html>
47
+ ```
48
+
49
+ ### CommonJS
50
+
51
+ ```javascript
52
+ const { useToast } = require("hiinformer");
53
+
54
+ const { add } = useToast();
55
+
56
+ add({
57
+ title: "Success",
58
+ message: "Your changes have been saved.",
59
+ });
60
+ ```
61
+
62
+ ### ES Modules
63
+
64
+ ```javascript
65
+ import { useToast } from "hiinformer";
66
+
67
+ const { add } = useToast();
68
+
69
+ add({
70
+ title: "Success",
71
+ message: "Your changes have been saved.",
72
+ });
73
+ ```
74
+
75
+ # Confirm Dialogs
76
+
77
+ A flexible confirmation dialog component for user confirmations before important actions with smooth fade-in and fade-out animations.
78
+
79
+ ## Overview
80
+
81
+ The confirm module provides an easy way to display confirmation dialogs to users with customizable titles, messages, buttons, and actions. Dialogs support multiple button color themes, background scroll control, and smooth animations.
82
+
83
+ ## Usage
84
+
85
+ ### Via npm Package
86
+
87
+ ```typescript
88
+ import { useConfirm } from "hiinformer";
89
+
90
+ const { use } = useConfirm();
91
+
92
+ use({
93
+ option: {
94
+ header: "Delete Item",
95
+ message: "Are you sure you want to delete this item?",
96
+ acceptBtn: { label: "Delete" },
97
+ closeBtn: { label: "Cancel" },
98
+ },
99
+ accept: () => console.log("Deleted"),
100
+ reject: () => console.log("Cancelled"),
101
+ });
102
+ ```
103
+
104
+ ### Via Browser (Global Script)
105
+
106
+ Include the library in your HTML:
107
+
108
+ ```html
109
+ <!DOCTYPE html>
110
+ <html>
111
+ <head>
112
+ <link rel="stylesheet" href="path/to/dist/styles/main.css" />
113
+ </head>
114
+ <body>
115
+ <script src="path/to/dist/index.global.js"></script>
116
+ <script>
117
+ const { useConfirm } = window.notify;
118
+ const { use } = useConfirm();
119
+
120
+ use({
121
+ option: {
122
+ header: "Delete Item",
123
+ message: "Are you sure you want to delete this item?",
124
+ },
125
+ accept: () => console.log("Accepted"),
126
+ reject: () => console.log("Rejected"),
127
+ });
128
+ </script>
129
+ </body>
130
+ </html>
131
+ ```
132
+
133
+ ### CommonJS
134
+
135
+ ```javascript
136
+ const { useConfirm } = require("hiinformer");
137
+
138
+ const { use } = useConfirm();
139
+
140
+ use({
141
+ option: {
142
+ header: "Confirm",
143
+ message: "Do you want to proceed?",
144
+ },
145
+ accept: () => console.log("Accepted"),
146
+ reject: () => console.log("Rejected"),
147
+ });
148
+ ```
149
+
150
+ ### ES Modules
151
+
152
+ ```javascript
153
+ import { useConfirm } from "hiinformer";
154
+
155
+ const { use } = useConfirm();
156
+
157
+ use({
158
+ option: {
159
+ header: "Confirm",
160
+ message: "Do you want to proceed?",
161
+ },
162
+ accept: () => console.log("Accepted"),
163
+ reject: () => console.log("Rejected"),
164
+ });
165
+ ```
166
+
167
+
168
+ ## API Reference
169
+
170
+ ### Toast Notifications
171
+
172
+ For detailed API reference and examples for toast notifications, visit:
173
+
174
+ 📖 **[Toast Documentation](https://github.com/heinhtet8X/hiinformer/tree/main/src/core/toast)**
175
+
176
+ ### Confirm Dialogs
177
+
178
+ For detailed API reference and examples for confirm dialogs, visit:
8
179
 
9
- toast.add({
10
- title: "hello",
11
- message: "World",
12
- status: "warning"
13
- });
180
+ 📖 **[Confirm Documentation](https://github.com/heinhtet8X/hiinformer/tree/main/src/core/confirm)**
package/dist/index.d.mts CHANGED
@@ -5,16 +5,55 @@ declare enum Status {
5
5
  Info = "info",
6
6
  Danger = "danger"
7
7
  }
8
+ declare enum Position {
9
+ TopStart = "top-start",
10
+ TopEnd = "top-end",
11
+ TopCenter = "top-center",
12
+ BottomStart = "bottom-start",
13
+ BottomEnd = "bottom-end",
14
+ BottomCenter = "bottom-center"
15
+ }
8
16
  type ToastStatus = Status | "default" | "success" | "warning" | "info" | "danger";
17
+ type ToastPosition = Position | "top-start" | "top-end" | "top-center" | "bottom-start" | "bottom-end" | "bottom-center";
9
18
  type Toast = {
10
19
  status?: ToastStatus;
11
20
  title: string;
12
21
  message: string;
13
22
  timeout?: number | 3;
14
- multiple?: boolean | true;
23
+ multiple?: boolean;
24
+ position?: ToastPosition;
15
25
  };
16
26
  declare const useToast: () => {
17
27
  add: (toast: Toast) => void;
18
28
  };
19
29
 
20
- export { Status, type Toast, type ToastStatus, useToast };
30
+ declare enum BtnColor {
31
+ PRIMARY = "primary",
32
+ SUCCESS = "success",
33
+ DANGER = "danger",
34
+ WARNING = "warning"
35
+ }
36
+ type Btn = {
37
+ show?: boolean;
38
+ label?: string;
39
+ className?: string;
40
+ readonly color?: BtnColor;
41
+ };
42
+ type Confirm = {
43
+ option: {
44
+ message: string;
45
+ header: string;
46
+ closeBtn?: Btn;
47
+ acceptBtn?: Btn;
48
+ bodyHTML?: string;
49
+ closeMaskHide?: boolean;
50
+ closeBgScroll?: boolean;
51
+ };
52
+ accept: () => void;
53
+ reject: () => void;
54
+ };
55
+ declare const useConfirm: () => {
56
+ use: (confirm: Confirm) => void;
57
+ };
58
+
59
+ export { type Btn, BtnColor, type Confirm, Position, Status, type Toast, type ToastPosition, type ToastStatus, useConfirm, useToast };
package/dist/index.d.ts CHANGED
@@ -5,16 +5,55 @@ declare enum Status {
5
5
  Info = "info",
6
6
  Danger = "danger"
7
7
  }
8
+ declare enum Position {
9
+ TopStart = "top-start",
10
+ TopEnd = "top-end",
11
+ TopCenter = "top-center",
12
+ BottomStart = "bottom-start",
13
+ BottomEnd = "bottom-end",
14
+ BottomCenter = "bottom-center"
15
+ }
8
16
  type ToastStatus = Status | "default" | "success" | "warning" | "info" | "danger";
17
+ type ToastPosition = Position | "top-start" | "top-end" | "top-center" | "bottom-start" | "bottom-end" | "bottom-center";
9
18
  type Toast = {
10
19
  status?: ToastStatus;
11
20
  title: string;
12
21
  message: string;
13
22
  timeout?: number | 3;
14
- multiple?: boolean | true;
23
+ multiple?: boolean;
24
+ position?: ToastPosition;
15
25
  };
16
26
  declare const useToast: () => {
17
27
  add: (toast: Toast) => void;
18
28
  };
19
29
 
20
- export { Status, type Toast, type ToastStatus, useToast };
30
+ declare enum BtnColor {
31
+ PRIMARY = "primary",
32
+ SUCCESS = "success",
33
+ DANGER = "danger",
34
+ WARNING = "warning"
35
+ }
36
+ type Btn = {
37
+ show?: boolean;
38
+ label?: string;
39
+ className?: string;
40
+ readonly color?: BtnColor;
41
+ };
42
+ type Confirm = {
43
+ option: {
44
+ message: string;
45
+ header: string;
46
+ closeBtn?: Btn;
47
+ acceptBtn?: Btn;
48
+ bodyHTML?: string;
49
+ closeMaskHide?: boolean;
50
+ closeBgScroll?: boolean;
51
+ };
52
+ accept: () => void;
53
+ reject: () => void;
54
+ };
55
+ declare const useConfirm: () => {
56
+ use: (confirm: Confirm) => void;
57
+ };
58
+
59
+ export { type Btn, BtnColor, type Confirm, Position, Status, type Toast, type ToastPosition, type ToastStatus, useConfirm, useToast };
package/dist/index.global.js CHANGED
@@ -41,7 +41,10 @@ var notify = (() => {
41
41
  // src/index.ts
42
42
  var index_exports = {};
43
43
  __export(index_exports, {
44
+ BtnColor: () => BtnColor,
45
+ Position: () => Position,
44
46
  Status: () => Status,
47
+ useConfirm: () => useConfirm,
45
48
  useToast: () => useToast
46
49
  });
47
50
 
@@ -54,16 +57,27 @@ var notify = (() => {
54
57
  Status2["Danger"] = "danger";
55
58
  return Status2;
56
59
  })(Status || {});
60
+ var Position = /* @__PURE__ */ ((Position2) => {
61
+ Position2["TopStart"] = "top-start";
62
+ Position2["TopEnd"] = "top-end";
63
+ Position2["TopCenter"] = "top-center";
64
+ Position2["BottomStart"] = "bottom-start";
65
+ Position2["BottomEnd"] = "bottom-end";
66
+ Position2["BottomCenter"] = "bottom-center";
67
+ return Position2;
68
+ })(Position || {});
69
+ var count = 0;
57
70
  var useToast = () => {
58
- let count = 0;
59
71
  const add = (toast) => {
60
- var _a, _b;
72
+ var _a, _b, _c, _d;
61
73
  ++count;
62
74
  const toastMain = document.querySelector(".toast-main");
63
75
  const documentBody = document.querySelector("body");
64
76
  const timeout = (_a = toast.timeout) != null ? _a : 5;
65
77
  const toastId = `targetToast${count}`;
66
- let toastAlertClass = (_b = toast.status) != null ? _b : "default";
78
+ const multiple = (_b = toast.multiple) != null ? _b : true;
79
+ const position = (_c = toast.position) != null ? _c : "top-end";
80
+ let toastAlertClass = (_d = toast.status) != null ? _d : "default";
67
81
  const icon = swithIcon(toast.status);
68
82
  const alertHtmlTags = `<div id="${toastId}" class="toast toast-${toastAlertClass} toast-container">
69
83
  <div class="toast-body">
@@ -96,11 +110,14 @@ var notify = (() => {
96
110
  if (documentBody) {
97
111
  documentBody.insertAdjacentHTML(
98
112
  "beforeend",
99
- `<div class="toast-main theme-default">${alertHtmlTags}</div>`
113
+ `<div class="toast-main toast-${position} theme-default">${alertHtmlTags}</div>`
100
114
  );
101
115
  }
102
116
  } else {
103
- if (!toast.multiple) {
117
+ if (!multiple) {
118
+ if (!toastMain.classList.contains(`toast-${position}`)) {
119
+ toastMain.classList.add(`toast-${position}`);
120
+ }
104
121
  toastMain.innerHTML = alertHtmlTags;
105
122
  } else {
106
123
  toastMain.insertAdjacentHTML("beforeend", alertHtmlTags);
@@ -171,5 +188,112 @@ var notify = (() => {
171
188
  add
172
189
  };
173
190
  };
191
+
192
+ // src/core/confirm/confirm.ts
193
+ var BtnColor = /* @__PURE__ */ ((BtnColor2) => {
194
+ BtnColor2["PRIMARY"] = "primary";
195
+ BtnColor2["SUCCESS"] = "success";
196
+ BtnColor2["DANGER"] = "danger";
197
+ BtnColor2["WARNING"] = "warning";
198
+ return BtnColor2;
199
+ })(BtnColor || {});
200
+ var useConfirm = () => {
201
+ const use = (confirm) => {
202
+ var _a, _b, _c, _d, _e, _f;
203
+ const { option, accept, reject } = confirm;
204
+ const {
205
+ header,
206
+ message,
207
+ closeBtn,
208
+ acceptBtn,
209
+ bodyHTML,
210
+ closeMaskHide = true,
211
+ closeBgScroll = true
212
+ } = option;
213
+ const isShowCloseBtn = (_a = closeBtn == null ? void 0 : closeBtn.show) != null ? _a : true;
214
+ const isShowAcceptBtn = (_b = acceptBtn == null ? void 0 : acceptBtn.show) != null ? _b : true;
215
+ const confirmMain = document.querySelector(".confirm-main");
216
+ const documentBody = document.querySelector("body");
217
+ const alertHtmlTags = `<div class="dialog dialog-container">
218
+ <div class="dialog-box">
219
+ <div class="dialog-header">
220
+ ${header != null ? header : ""}
221
+ </div>
222
+
223
+ <div class="dialog-body">
224
+ ${bodyHTML ? bodyHTML : message}
225
+ </div>
226
+ <div class="dialog-footer">
227
+ ${isShowCloseBtn ? `<button type="button" class="dialog-btn dialog-btn-close ${(_c = closeBtn == null ? void 0 : closeBtn.color) != null ? _c : ""}">
228
+ ${(_d = closeBtn == null ? void 0 : closeBtn.label) != null ? _d : "Cancel"}
229
+ </button>` : ""}
230
+
231
+ ${isShowAcceptBtn ? `<button type="button" class="dialog-btn dialog-btn-confirm ${(_e = acceptBtn == null ? void 0 : acceptBtn.color) != null ? _e : ""}">
232
+ ${(_f = acceptBtn == null ? void 0 : acceptBtn.label) != null ? _f : "Okay"}
233
+ </button>` : ""}
234
+ </div>
235
+ </div>
236
+ </div> `;
237
+ if (!confirmMain) {
238
+ if (documentBody) {
239
+ documentBody.insertAdjacentHTML(
240
+ "beforeend",
241
+ `<div class="confirm-main">${alertHtmlTags}</div>`
242
+ );
243
+ }
244
+ } else {
245
+ confirmMain.innerHTML = alertHtmlTags;
246
+ }
247
+ if (closeBgScroll) {
248
+ if (documentBody) {
249
+ documentBody.classList.add("hide-scrollable");
250
+ }
251
+ }
252
+ const cancelBtn = document.querySelector(".dialog-btn-close");
253
+ const confirmBtn = document.querySelector(".dialog-btn-confirm");
254
+ const onAccept = () => __async(null, null, function* () {
255
+ accept();
256
+ closeConfirmBox();
257
+ });
258
+ const onReject = () => __async(null, null, function* () {
259
+ reject();
260
+ closeConfirmBox();
261
+ });
262
+ const closeConfirmBox = () => __async(null, null, function* () {
263
+ const confirmMainElement = document.querySelector(".confirm-main");
264
+ if (confirmMainElement) {
265
+ const dialogElement = confirmMainElement.querySelector(".dialog-box");
266
+ if (dialogElement) {
267
+ dialogElement.classList.add("fade-out");
268
+ }
269
+ setTimeout(() => {
270
+ confirmMainElement.innerHTML = "";
271
+ }, 200);
272
+ }
273
+ if (documentBody) {
274
+ documentBody.classList.remove("hide-scrollable");
275
+ }
276
+ });
277
+ if (confirmBtn) {
278
+ confirmBtn.addEventListener("click", onAccept);
279
+ }
280
+ if (cancelBtn) {
281
+ cancelBtn.addEventListener("click", onReject);
282
+ }
283
+ if (closeMaskHide) {
284
+ const dialogContainer = document.querySelector(".dialog-container");
285
+ if (dialogContainer) {
286
+ dialogContainer.addEventListener("click", (event) => {
287
+ if (event.target === dialogContainer) {
288
+ onReject();
289
+ }
290
+ });
291
+ }
292
+ }
293
+ };
294
+ return {
295
+ use
296
+ };
297
+ };
174
298
  return __toCommonJS(index_exports);
175
299
  })();
package/dist/index.js CHANGED
@@ -40,7 +40,10 @@ var __async = (__this, __arguments, generator) => {
40
40
  // src/index.ts
41
41
  var index_exports = {};
42
42
  __export(index_exports, {
43
+ BtnColor: () => BtnColor,
44
+ Position: () => Position,
43
45
  Status: () => Status,
46
+ useConfirm: () => useConfirm,
44
47
  useToast: () => useToast
45
48
  });
46
49
  module.exports = __toCommonJS(index_exports);
@@ -54,16 +57,27 @@ var Status = /* @__PURE__ */ ((Status2) => {
54
57
  Status2["Danger"] = "danger";
55
58
  return Status2;
56
59
  })(Status || {});
60
+ var Position = /* @__PURE__ */ ((Position2) => {
61
+ Position2["TopStart"] = "top-start";
62
+ Position2["TopEnd"] = "top-end";
63
+ Position2["TopCenter"] = "top-center";
64
+ Position2["BottomStart"] = "bottom-start";
65
+ Position2["BottomEnd"] = "bottom-end";
66
+ Position2["BottomCenter"] = "bottom-center";
67
+ return Position2;
68
+ })(Position || {});
69
+ var count = 0;
57
70
  var useToast = () => {
58
- let count = 0;
59
71
  const add = (toast) => {
60
- var _a, _b;
72
+ var _a, _b, _c, _d;
61
73
  ++count;
62
74
  const toastMain = document.querySelector(".toast-main");
63
75
  const documentBody = document.querySelector("body");
64
76
  const timeout = (_a = toast.timeout) != null ? _a : 5;
65
77
  const toastId = `targetToast${count}`;
66
- let toastAlertClass = (_b = toast.status) != null ? _b : "default";
78
+ const multiple = (_b = toast.multiple) != null ? _b : true;
79
+ const position = (_c = toast.position) != null ? _c : "top-end";
80
+ let toastAlertClass = (_d = toast.status) != null ? _d : "default";
67
81
  const icon = swithIcon(toast.status);
68
82
  const alertHtmlTags = `<div id="${toastId}" class="toast toast-${toastAlertClass} toast-container">
69
83
  <div class="toast-body">
@@ -96,11 +110,14 @@ var useToast = () => {
96
110
  if (documentBody) {
97
111
  documentBody.insertAdjacentHTML(
98
112
  "beforeend",
99
- `<div class="toast-main theme-default">${alertHtmlTags}</div>`
113
+ `<div class="toast-main toast-${position} theme-default">${alertHtmlTags}</div>`
100
114
  );
101
115
  }
102
116
  } else {
103
- if (!toast.multiple) {
117
+ if (!multiple) {
118
+ if (!toastMain.classList.contains(`toast-${position}`)) {
119
+ toastMain.classList.add(`toast-${position}`);
120
+ }
104
121
  toastMain.innerHTML = alertHtmlTags;
105
122
  } else {
106
123
  toastMain.insertAdjacentHTML("beforeend", alertHtmlTags);
@@ -171,8 +188,118 @@ var useToast = () => {
171
188
  add
172
189
  };
173
190
  };
191
+
192
+ // src/core/confirm/confirm.ts
193
+ var BtnColor = /* @__PURE__ */ ((BtnColor2) => {
194
+ BtnColor2["PRIMARY"] = "primary";
195
+ BtnColor2["SUCCESS"] = "success";
196
+ BtnColor2["DANGER"] = "danger";
197
+ BtnColor2["WARNING"] = "warning";
198
+ return BtnColor2;
199
+ })(BtnColor || {});
200
+ var useConfirm = () => {
201
+ const use = (confirm) => {
202
+ var _a, _b, _c, _d, _e, _f;
203
+ const { option, accept, reject } = confirm;
204
+ const {
205
+ header,
206
+ message,
207
+ closeBtn,
208
+ acceptBtn,
209
+ bodyHTML,
210
+ closeMaskHide = true,
211
+ closeBgScroll = true
212
+ } = option;
213
+ const isShowCloseBtn = (_a = closeBtn == null ? void 0 : closeBtn.show) != null ? _a : true;
214
+ const isShowAcceptBtn = (_b = acceptBtn == null ? void 0 : acceptBtn.show) != null ? _b : true;
215
+ const confirmMain = document.querySelector(".confirm-main");
216
+ const documentBody = document.querySelector("body");
217
+ const alertHtmlTags = `<div class="dialog dialog-container">
218
+ <div class="dialog-box">
219
+ <div class="dialog-header">
220
+ ${header != null ? header : ""}
221
+ </div>
222
+
223
+ <div class="dialog-body">
224
+ ${bodyHTML ? bodyHTML : message}
225
+ </div>
226
+ <div class="dialog-footer">
227
+ ${isShowCloseBtn ? `<button type="button" class="dialog-btn dialog-btn-close ${(_c = closeBtn == null ? void 0 : closeBtn.color) != null ? _c : ""}">
228
+ ${(_d = closeBtn == null ? void 0 : closeBtn.label) != null ? _d : "Cancel"}
229
+ </button>` : ""}
230
+
231
+ ${isShowAcceptBtn ? `<button type="button" class="dialog-btn dialog-btn-confirm ${(_e = acceptBtn == null ? void 0 : acceptBtn.color) != null ? _e : ""}">
232
+ ${(_f = acceptBtn == null ? void 0 : acceptBtn.label) != null ? _f : "Okay"}
233
+ </button>` : ""}
234
+ </div>
235
+ </div>
236
+ </div> `;
237
+ if (!confirmMain) {
238
+ if (documentBody) {
239
+ documentBody.insertAdjacentHTML(
240
+ "beforeend",
241
+ `<div class="confirm-main">${alertHtmlTags}</div>`
242
+ );
243
+ }
244
+ } else {
245
+ confirmMain.innerHTML = alertHtmlTags;
246
+ }
247
+ if (closeBgScroll) {
248
+ if (documentBody) {
249
+ documentBody.classList.add("hide-scrollable");
250
+ }
251
+ }
252
+ const cancelBtn = document.querySelector(".dialog-btn-close");
253
+ const confirmBtn = document.querySelector(".dialog-btn-confirm");
254
+ const onAccept = () => __async(null, null, function* () {
255
+ accept();
256
+ closeConfirmBox();
257
+ });
258
+ const onReject = () => __async(null, null, function* () {
259
+ reject();
260
+ closeConfirmBox();
261
+ });
262
+ const closeConfirmBox = () => __async(null, null, function* () {
263
+ const confirmMainElement = document.querySelector(".confirm-main");
264
+ if (confirmMainElement) {
265
+ const dialogElement = confirmMainElement.querySelector(".dialog-box");
266
+ if (dialogElement) {
267
+ dialogElement.classList.add("fade-out");
268
+ }
269
+ setTimeout(() => {
270
+ confirmMainElement.innerHTML = "";
271
+ }, 200);
272
+ }
273
+ if (documentBody) {
274
+ documentBody.classList.remove("hide-scrollable");
275
+ }
276
+ });
277
+ if (confirmBtn) {
278
+ confirmBtn.addEventListener("click", onAccept);
279
+ }
280
+ if (cancelBtn) {
281
+ cancelBtn.addEventListener("click", onReject);
282
+ }
283
+ if (closeMaskHide) {
284
+ const dialogContainer = document.querySelector(".dialog-container");
285
+ if (dialogContainer) {
286
+ dialogContainer.addEventListener("click", (event) => {
287
+ if (event.target === dialogContainer) {
288
+ onReject();
289
+ }
290
+ });
291
+ }
292
+ }
293
+ };
294
+ return {
295
+ use
296
+ };
297
+ };
174
298
  // Annotate the CommonJS export names for ESM import in node:
175
299
  0 && (module.exports = {
300
+ BtnColor,
301
+ Position,
176
302
  Status,
303
+ useConfirm,
177
304
  useToast
178
305
  });
package/dist/index.mjs CHANGED
@@ -28,16 +28,27 @@ var Status = /* @__PURE__ */ ((Status2) => {
28
28
  Status2["Danger"] = "danger";
29
29
  return Status2;
30
30
  })(Status || {});
31
+ var Position = /* @__PURE__ */ ((Position2) => {
32
+ Position2["TopStart"] = "top-start";
33
+ Position2["TopEnd"] = "top-end";
34
+ Position2["TopCenter"] = "top-center";
35
+ Position2["BottomStart"] = "bottom-start";
36
+ Position2["BottomEnd"] = "bottom-end";
37
+ Position2["BottomCenter"] = "bottom-center";
38
+ return Position2;
39
+ })(Position || {});
40
+ var count = 0;
31
41
  var useToast = () => {
32
- let count = 0;
33
42
  const add = (toast) => {
34
- var _a, _b;
43
+ var _a, _b, _c, _d;
35
44
  ++count;
36
45
  const toastMain = document.querySelector(".toast-main");
37
46
  const documentBody = document.querySelector("body");
38
47
  const timeout = (_a = toast.timeout) != null ? _a : 5;
39
48
  const toastId = `targetToast${count}`;
40
- let toastAlertClass = (_b = toast.status) != null ? _b : "default";
49
+ const multiple = (_b = toast.multiple) != null ? _b : true;
50
+ const position = (_c = toast.position) != null ? _c : "top-end";
51
+ let toastAlertClass = (_d = toast.status) != null ? _d : "default";
41
52
  const icon = swithIcon(toast.status);
42
53
  const alertHtmlTags = `<div id="${toastId}" class="toast toast-${toastAlertClass} toast-container">
43
54
  <div class="toast-body">
@@ -70,11 +81,14 @@ var useToast = () => {
70
81
  if (documentBody) {
71
82
  documentBody.insertAdjacentHTML(
72
83
  "beforeend",
73
- `<div class="toast-main theme-default">${alertHtmlTags}</div>`
84
+ `<div class="toast-main toast-${position} theme-default">${alertHtmlTags}</div>`
74
85
  );
75
86
  }
76
87
  } else {
77
- if (!toast.multiple) {
88
+ if (!multiple) {
89
+ if (!toastMain.classList.contains(`toast-${position}`)) {
90
+ toastMain.classList.add(`toast-${position}`);
91
+ }
78
92
  toastMain.innerHTML = alertHtmlTags;
79
93
  } else {
80
94
  toastMain.insertAdjacentHTML("beforeend", alertHtmlTags);
@@ -145,7 +159,117 @@ var useToast = () => {
145
159
  add
146
160
  };
147
161
  };
162
+
163
+ // src/core/confirm/confirm.ts
164
+ var BtnColor = /* @__PURE__ */ ((BtnColor2) => {
165
+ BtnColor2["PRIMARY"] = "primary";
166
+ BtnColor2["SUCCESS"] = "success";
167
+ BtnColor2["DANGER"] = "danger";
168
+ BtnColor2["WARNING"] = "warning";
169
+ return BtnColor2;
170
+ })(BtnColor || {});
171
+ var useConfirm = () => {
172
+ const use = (confirm) => {
173
+ var _a, _b, _c, _d, _e, _f;
174
+ const { option, accept, reject } = confirm;
175
+ const {
176
+ header,
177
+ message,
178
+ closeBtn,
179
+ acceptBtn,
180
+ bodyHTML,
181
+ closeMaskHide = true,
182
+ closeBgScroll = true
183
+ } = option;
184
+ const isShowCloseBtn = (_a = closeBtn == null ? void 0 : closeBtn.show) != null ? _a : true;
185
+ const isShowAcceptBtn = (_b = acceptBtn == null ? void 0 : acceptBtn.show) != null ? _b : true;
186
+ const confirmMain = document.querySelector(".confirm-main");
187
+ const documentBody = document.querySelector("body");
188
+ const alertHtmlTags = `<div class="dialog dialog-container">
189
+ <div class="dialog-box">
190
+ <div class="dialog-header">
191
+ ${header != null ? header : ""}
192
+ </div>
193
+
194
+ <div class="dialog-body">
195
+ ${bodyHTML ? bodyHTML : message}
196
+ </div>
197
+ <div class="dialog-footer">
198
+ ${isShowCloseBtn ? `<button type="button" class="dialog-btn dialog-btn-close ${(_c = closeBtn == null ? void 0 : closeBtn.color) != null ? _c : ""}">
199
+ ${(_d = closeBtn == null ? void 0 : closeBtn.label) != null ? _d : "Cancel"}
200
+ </button>` : ""}
201
+
202
+ ${isShowAcceptBtn ? `<button type="button" class="dialog-btn dialog-btn-confirm ${(_e = acceptBtn == null ? void 0 : acceptBtn.color) != null ? _e : ""}">
203
+ ${(_f = acceptBtn == null ? void 0 : acceptBtn.label) != null ? _f : "Okay"}
204
+ </button>` : ""}
205
+ </div>
206
+ </div>
207
+ </div> `;
208
+ if (!confirmMain) {
209
+ if (documentBody) {
210
+ documentBody.insertAdjacentHTML(
211
+ "beforeend",
212
+ `<div class="confirm-main">${alertHtmlTags}</div>`
213
+ );
214
+ }
215
+ } else {
216
+ confirmMain.innerHTML = alertHtmlTags;
217
+ }
218
+ if (closeBgScroll) {
219
+ if (documentBody) {
220
+ documentBody.classList.add("hide-scrollable");
221
+ }
222
+ }
223
+ const cancelBtn = document.querySelector(".dialog-btn-close");
224
+ const confirmBtn = document.querySelector(".dialog-btn-confirm");
225
+ const onAccept = () => __async(null, null, function* () {
226
+ accept();
227
+ closeConfirmBox();
228
+ });
229
+ const onReject = () => __async(null, null, function* () {
230
+ reject();
231
+ closeConfirmBox();
232
+ });
233
+ const closeConfirmBox = () => __async(null, null, function* () {
234
+ const confirmMainElement = document.querySelector(".confirm-main");
235
+ if (confirmMainElement) {
236
+ const dialogElement = confirmMainElement.querySelector(".dialog-box");
237
+ if (dialogElement) {
238
+ dialogElement.classList.add("fade-out");
239
+ }
240
+ setTimeout(() => {
241
+ confirmMainElement.innerHTML = "";
242
+ }, 200);
243
+ }
244
+ if (documentBody) {
245
+ documentBody.classList.remove("hide-scrollable");
246
+ }
247
+ });
248
+ if (confirmBtn) {
249
+ confirmBtn.addEventListener("click", onAccept);
250
+ }
251
+ if (cancelBtn) {
252
+ cancelBtn.addEventListener("click", onReject);
253
+ }
254
+ if (closeMaskHide) {
255
+ const dialogContainer = document.querySelector(".dialog-container");
256
+ if (dialogContainer) {
257
+ dialogContainer.addEventListener("click", (event) => {
258
+ if (event.target === dialogContainer) {
259
+ onReject();
260
+ }
261
+ });
262
+ }
263
+ }
264
+ };
265
+ return {
266
+ use
267
+ };
268
+ };
148
269
  export {
270
+ BtnColor,
271
+ Position,
149
272
  Status,
273
+ useConfirm,
150
274
  useToast
151
275
  };
package/dist/styles/confirm/input.css CHANGED
@@ -0,0 +1,130 @@
1
+ @import "../theme.css";
2
+ @import "../animation.css";
3
+
4
+ body.hide-scrollable {
5
+ overflow-y: hidden;
6
+ }
7
+
8
+ .dialog {
9
+ background-color: var(--h-backdrop-color);
10
+ position: fixed;
11
+ width: 100%;
12
+ height: 100%;
13
+ inset: 0;
14
+ font-family: Arial, Helvetica, sans-serif;
15
+ line-height: 1.5em;
16
+ z-index: 99999;
17
+ }
18
+
19
+ .dialog.show {
20
+ opacity: 1;
21
+ pointer-events: auto;
22
+ }
23
+
24
+ .dialog.dialog-container {
25
+ display: flex;
26
+ justify-content: center;
27
+ align-items: center;
28
+ flex-flow: column;
29
+ }
30
+
31
+ .dialog > .dialog-box {
32
+ background-color: white;
33
+ min-width: var(--h-dialog-box-width);
34
+ margin: auto;
35
+ border-radius: 15px;
36
+ box-shadow: 0px 0px 3px var(--h-backdrop-color);
37
+ overflow: hidden;
38
+ }
39
+
40
+ .dialog > .dialog-box > .dialog-header {
41
+ font-size: 20px;
42
+ font-weight: 600;
43
+ padding: 20px;
44
+ display: flex;
45
+ align-items: center;
46
+ gap: 5px;
47
+ }
48
+
49
+ .dialog > .dialog-box > .dialog-footer {
50
+ padding: 0px 20px 20px 20px;
51
+ display: flex;
52
+ align-items: center;
53
+ justify-content: end;
54
+ gap: 5px;
55
+ }
56
+
57
+ .dialog > .dialog-box > .dialog-footer > .dialog-btn {
58
+ height: 35px;
59
+ padding: 0px 20px;
60
+ font-size: 14px;
61
+ cursor: pointer;
62
+ outline: none;
63
+ border: none;
64
+ box-shadow: none;
65
+ border-radius: var(--btn-confirm-radius);
66
+ transition: all 0.2s ease-in;
67
+ }
68
+
69
+ .dialog > .dialog-box > .dialog-footer > .dialog-btn-close {
70
+ background-color: var(--h-gray-color);
71
+ color: black;
72
+ }
73
+
74
+ .dialog > .dialog-box > .dialog-footer > .dialog-btn-close.primary,
75
+ .dialog > .dialog-box > .dialog-footer > .dialog-btn-confirm.primary {
76
+ background-color: var(--h-primary-color);
77
+ color: white;
78
+ }
79
+
80
+ .dialog > .dialog-box > .dialog-footer > .dialog-btn-close.success,
81
+ .dialog > .dialog-box > .dialog-footer > .dialog-btn-confirm.success {
82
+ background-color: var(--h-success-color);
83
+ color: white;
84
+ }
85
+
86
+ .dialog > .dialog-box > .dialog-footer > .dialog-btn-close.warning,
87
+ .dialog > .dialog-box > .dialog-footer > .dialog-btn-confirm.warning {
88
+ background-color: var(--h-warning-color);
89
+ color: white;
90
+ }
91
+
92
+ .dialog > .dialog-box > .dialog-footer > .dialog-btn-close.danger,
93
+ .dialog > .dialog-box > .dialog-footer > .dialog-btn-confirm.danger {
94
+ background-color: var(--h-danger-color);
95
+ color: white;
96
+ }
97
+
98
+ .dialog > .dialog-box > .dialog-footer > .dialog-btn-close:hover {
99
+ filter: brightness(0.95);
100
+ color: black;
101
+ }
102
+
103
+ .dialog > .dialog-box > .dialog-footer > .dialog-btn-confirm {
104
+ background-color: var(--h-success-color);
105
+ color: white;
106
+ }
107
+
108
+ .dialog > .dialog-box > .dialog-footer > .dialog-btn-confirm:hover {
109
+ filter: brightness(0.95);
110
+ }
111
+
112
+ .dialog > .dialog-box > .dialog-body {
113
+ max-height: 400px;
114
+ overflow-y: scroll;
115
+ padding: 0px 20px 20px 20px;
116
+ font-size: 16px;
117
+ font-weight: 500;
118
+ line-height: 1.5em;
119
+ color: gray;
120
+ }
121
+
122
+ .dialog > .dialog-box > .dialog-body > .dialog-status-icon {
123
+ text-align: center;
124
+ }
125
+
126
+ .dialog > .dialog-box > .dialog-body > .dialog-status-icon > svg {
127
+ width: 80px;
128
+ height: 80px;
129
+ color: var(--h-success-color);
130
+ }
package/dist/styles/toast/input.css CHANGED
@@ -1,5 +1,5 @@
1
- @import "./theme.css";
2
- @import "./animation.css";
1
+ @import "../theme.css";
2
+ @import "../animation.css";
3
3
 
4
4
  .toast-main {
5
5
  position: fixed;
@@ -7,17 +7,44 @@
7
7
  flex-flow: column wrap;
8
8
  gap: 20px;
9
9
  min-width: 400px;
10
- right: 0px;
11
- top: 0px;
12
10
  z-index: var(--main-z-index);
13
11
  padding: 10px;
14
12
  }
15
13
 
14
+ .toast-main.toast-top-start {
15
+ left: 0px;
16
+ top: 0px;
17
+ }
18
+
19
+ .toast-main.toast-top-end {
20
+ right: 0px;
21
+ top: 0px;
22
+ }
23
+
24
+ .toast-main.toast-top-center {
25
+ top: 0;
26
+ right: 33%;
27
+ }
28
+
29
+ .toast-main.toast-bottom-start {
30
+ left: 0px;
31
+ bottom: 0px;
32
+ }
33
+
34
+ .toast-main.toast-bottom-end {
35
+ right: 0px;
36
+ bottom: 0px;
37
+ }
38
+
39
+ .toast-main.toast-bottom-center {
40
+ bottom: 0;
41
+ right: 33%;
42
+ }
43
+
16
44
  .toast {
17
45
  min-width: 400px;
18
46
  font-family: var(--h-font-family);
19
47
  overflow: hidden;
20
- /* animation: fadeOutUp 0.3s ease-in-out forwards; */
21
48
  }
22
49
 
23
50
  .toast.toast-container {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "hiinformer",
3
- "version": "1.0.1",
3
+ "version": "2.0.0",
4
4
  "description": "Easy-to-use, non-intrusive toast notifications for your application.",
5
5
  "main": "dist/index.cjs",
6
6
  "module": "dist/index.mjs",
@@ -13,7 +13,7 @@
13
13
  "scripts": {
14
14
  "build": "tsup src/index.ts --format esm,cjs,iife --globalName notify --dts && cpy 'src/**/*.css' dist",
15
15
  "publish-package": "npm publish --access public",
16
- "test": "echo \"Error: no test specified\" && exit 1"
16
+ "test": "echo \"No tests\""
17
17
  },
18
18
  "files": [
19
19
  "dist"
package/dist/styles/toast/animation.css DELETED
@@ -1,69 +0,0 @@
1
- .toast {
2
- animation: fadeInDown 0.3s ease-in-out;
3
- }
4
-
5
- .fade-out {
6
- animation: fadeOutDown 0.3s ease-in-out forwards;
7
- }
8
-
9
- .fade-out-up {
10
- animation: fadeOutUp 0.4s ease-in-out forwards;
11
- }
12
-
13
- .bump-up {
14
- transform: translateY(0px);
15
- animation: bumpUp 0.3s ease;
16
- }
17
-
18
- @keyframes fadeTopUp {
19
- from {
20
- opacity: 0;
21
- transform: translateY(-40px);
22
- }
23
- to {
24
- opacity: 1;
25
- transform: translateY(0);
26
- }
27
- }
28
-
29
- @keyframes fadeInDown {
30
- from {
31
- opacity: 0;
32
- transform: translateY(-15px);
33
- }
34
- to {
35
- opacity: 1;
36
- transform: translateY(0);
37
- }
38
- }
39
-
40
- @keyframes fadeOutDown {
41
- from {
42
- opacity: 1;
43
- transform: translateY(0);
44
- }
45
- to {
46
- opacity: 0;
47
- transform: translateY(10px);
48
- }
49
- }
50
-
51
- @keyframes fadeOutUp {
52
- from {
53
- opacity: 1;
54
- transform: translateY(0);
55
- }
56
- to {
57
- opacity: 0;
58
- transform: translateY(-30px);
59
- }
60
- }
61
-
62
- @keyframes bumpUp {
63
- from {
64
- top: 5px;
65
- }
66
- to {
67
- top: 0px;
68
- }
69
- }
package/dist/styles/toast/theme.css DELETED
@@ -1,21 +0,0 @@
1
- :root {
2
- --h-primary-color: #000000;
3
- --h-success-color: #00dc63;
4
- --h-warning-color: #f5a442;
5
- --h-danger-color: #ed3232;
6
- --h-info-color: #329fed;
7
- --h-toast-container-color: #ffffff;
8
-
9
- /* Border Radius */
10
- --h-border-radius: 10px;
11
- --h-border-width: 1.5px;
12
-
13
- /* Padding */
14
- --h-toast-padding: 15px;
15
-
16
- /* Font */
17
- --h-font-family: Arial, Helvetica, sans-serif;
18
-
19
- /* Index */
20
- --main-z-index: 9999;
21
- }