imba-localization 0.0.1
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/README.md +187 -0
- package/index.imba +185 -0
- package/package.json +22 -0
package/README.md
ADDED
|
@@ -0,0 +1,187 @@
|
|
|
1
|
+
# 🔔 Imba Notifications
|
|
2
|
+
|
|
3
|
+
A lightweight, customizable notification system for Imba applications with smooth animations and a clean user interface.
|
|
4
|
+
|
|
5
|
+
## ✨ Features
|
|
6
|
+
|
|
7
|
+
- 🔔 Four notification types: success, info, caution, and error
|
|
8
|
+
- 🎭 Smooth animations for displaying and hiding notifications
|
|
9
|
+
- 👆 Click-to-expand functionality for detailed information
|
|
10
|
+
- 🎨 Configurable display durations and customizable styling
|
|
11
|
+
- 🖌️ Modern glass-morphism styling with light/dark mode support by default
|
|
12
|
+
- 🧩 Easy integration with any Imba application
|
|
13
|
+
|
|
14
|
+
## 📦 Installation
|
|
15
|
+
|
|
16
|
+
```bash
|
|
17
|
+
# Using npm
|
|
18
|
+
npm install imba-notifications
|
|
19
|
+
|
|
20
|
+
# Using Bun
|
|
21
|
+
bun add imba-notifications
|
|
22
|
+
```
|
|
23
|
+
|
|
24
|
+
## 🚀 Quick Start
|
|
25
|
+
|
|
26
|
+
```imba
|
|
27
|
+
import { Notifications, ShowNotifications } from 'imba-notifications'
|
|
28
|
+
|
|
29
|
+
# Create a notifications instance
|
|
30
|
+
const notify = new Notifications!
|
|
31
|
+
# Define the hint over the progress bar (could be empty)
|
|
32
|
+
notify.hint = 'Click the message to avoid timeout and view details'
|
|
33
|
+
|
|
34
|
+
# In your main app or component
|
|
35
|
+
tag App
|
|
36
|
+
<self>
|
|
37
|
+
<ShowNotifications state=notify>
|
|
38
|
+
<button @click=notify.success('Success!', 'Operation completed successfully')> "Show Success"
|
|
39
|
+
<button @click=notify.info('Info', 'This is an informational message')> "Show Info"
|
|
40
|
+
<button @click=notify.caution('Caution', 'Proceed with care')> "Show Caution"
|
|
41
|
+
<button @click=notify.error('Error', 'Something went wrong')> "Show Error"
|
|
42
|
+
```
|
|
43
|
+
|
|
44
|
+
## 📘 API Reference
|
|
45
|
+
|
|
46
|
+
### Notifications Class
|
|
47
|
+
|
|
48
|
+
#### Properties
|
|
49
|
+
|
|
50
|
+
- `duration` - Object containing animation durations (in milliseconds)
|
|
51
|
+
- `show` - Time to animate in (default: 500ms)
|
|
52
|
+
- `display` - Time to remain visible (default: 15000ms)
|
|
53
|
+
- `hide` - Time to animate out (default: 500ms)
|
|
54
|
+
- `wipe` - Time to remove from DOM (default: 500ms)
|
|
55
|
+
- `hint` - Text shown at the bottom of notifications (default is empty)
|
|
56
|
+
|
|
57
|
+
#### Methods
|
|
58
|
+
|
|
59
|
+
```imba
|
|
60
|
+
# Display a success notification
|
|
61
|
+
notify.success(header, text, details = '')
|
|
62
|
+
|
|
63
|
+
# Display an info notification
|
|
64
|
+
notify.info(header, text, details = '')
|
|
65
|
+
|
|
66
|
+
# Display a caution notification
|
|
67
|
+
notify.caution(header, text, details = '')
|
|
68
|
+
|
|
69
|
+
# Display an error notification
|
|
70
|
+
notify.error(header, text, details = '')
|
|
71
|
+
```
|
|
72
|
+
|
|
73
|
+
Parameters:
|
|
74
|
+
- `header` (string) - Bold title text for the notification
|
|
75
|
+
- `text` (string) - Body text for the notification (appears only when the notification is clicked)
|
|
76
|
+
- `details` (string, optional) - Additional details shown when the notification is clicked
|
|
77
|
+
|
|
78
|
+
### ShowNotifications Component
|
|
79
|
+
|
|
80
|
+
The `ShowNotifications` tag is responsible for rendering notifications from a given Notifications class instance.
|
|
81
|
+
|
|
82
|
+
```imba
|
|
83
|
+
<ShowNotifications state=notifications>
|
|
84
|
+
```
|
|
85
|
+
|
|
86
|
+
## ⚙️ Customization
|
|
87
|
+
|
|
88
|
+
You can customize the duration settings:
|
|
89
|
+
|
|
90
|
+
```imba
|
|
91
|
+
const notifications = new Notifications!
|
|
92
|
+
|
|
93
|
+
# Customize durations (in milliseconds)
|
|
94
|
+
notifications.duration = {
|
|
95
|
+
show: 300 # Animation in
|
|
96
|
+
display: 5000 # Time visible
|
|
97
|
+
hide: 300 # Animation out
|
|
98
|
+
wipe: 300 # DOM removal
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
# Customize hint text
|
|
102
|
+
notifications.hint = 'Click for more details'
|
|
103
|
+
```
|
|
104
|
+
|
|
105
|
+
## 🎨 Styling
|
|
106
|
+
|
|
107
|
+
The notifications use Imba's CSS syntax with light/dark mode support. You can customize the appearance through tag inheritance and by redefining CSS properties of existing classes.
|
|
108
|
+
|
|
109
|
+
### 🧬 Tag Inheritance
|
|
110
|
+
|
|
111
|
+
To customize the notification component, create a new tag that inherits from the base component:
|
|
112
|
+
|
|
113
|
+
```imba
|
|
114
|
+
import { ShowNotifications } from 'imba-notifications'
|
|
115
|
+
|
|
116
|
+
# Create a custom notifications component
|
|
117
|
+
tag CustomNotifications < ShowNotifications
|
|
118
|
+
# Override CSS definitions
|
|
119
|
+
css
|
|
120
|
+
.container
|
|
121
|
+
rd:10px # Custom border radius
|
|
122
|
+
bd:2px solid light-dark(teal, cyan) # Custom border
|
|
123
|
+
bgc:light-dark(teal/10, cyan/20) # Custom background
|
|
124
|
+
|
|
125
|
+
.header-text
|
|
126
|
+
fs:16px # Custom font size
|
|
127
|
+
fw:bold # Custom font weight
|
|
128
|
+
|
|
129
|
+
.header-icon-success
|
|
130
|
+
fill:light-dark(green, lime) # Custom success color
|
|
131
|
+
|
|
132
|
+
.body-text
|
|
133
|
+
fs:14px # Custom body text size
|
|
134
|
+
c:light-dark(black/90, white/90) # Custom text color
|
|
135
|
+
|
|
136
|
+
# Override animation if needed
|
|
137
|
+
.show
|
|
138
|
+
animation: custom-show var(--show) ease
|
|
139
|
+
@keyframes custom-show
|
|
140
|
+
from transform: translateY(-100%)
|
|
141
|
+
to transform: translateY(0)
|
|
142
|
+
|
|
143
|
+
# Use your custom component
|
|
144
|
+
tag App
|
|
145
|
+
const notifications = new Notifications()
|
|
146
|
+
<self>
|
|
147
|
+
<CustomNotifications state=notifications>
|
|
148
|
+
<button @click=notifications.success('Custom', 'This uses custom styling')> "Show Notification"
|
|
149
|
+
```
|
|
150
|
+
|
|
151
|
+
### 🎯 Modifying Specific Classes
|
|
152
|
+
|
|
153
|
+
To target specific notification types with different styles:
|
|
154
|
+
|
|
155
|
+
```imba
|
|
156
|
+
tag CustomNotifications < ShowNotifications
|
|
157
|
+
css
|
|
158
|
+
# Success notifications
|
|
159
|
+
.container:has(.header-icon-success)
|
|
160
|
+
bgc:light-dark(green/10, lime/10)
|
|
161
|
+
bd:1px solid light-dark(green/30, lime/30)
|
|
162
|
+
|
|
163
|
+
# Error notifications
|
|
164
|
+
.container:has(.header-icon-error)
|
|
165
|
+
bgc:light-dark(red/10, crimson/10)
|
|
166
|
+
bd:1px solid light-dark(red/30, crimson/30)
|
|
167
|
+
```
|
|
168
|
+
|
|
169
|
+
### 📋 Available CSS Classes
|
|
170
|
+
|
|
171
|
+
The notification component uses the following CSS classes that you can customize:
|
|
172
|
+
|
|
173
|
+
- `.container` - Main notification message container
|
|
174
|
+
- `.header-container` - Header section containing icon, title and close button (cross icon)
|
|
175
|
+
- `.header-text` - Notification title text
|
|
176
|
+
- `.header-icon` - Base class for all notification type icons
|
|
177
|
+
- `.header-icon-success`, `.header-icon-info`, `.header-icon-caution`, `.header-icon-error` - Type-specific icon classes
|
|
178
|
+
- `.header-close` - Close button
|
|
179
|
+
- `.body-container` - Container for notification body (shown when clicked)
|
|
180
|
+
- `.body-text` - Main notification message text
|
|
181
|
+
- `.body-details` - Detailed information container
|
|
182
|
+
- `.footer` - Footer containing the hint text and progress bar
|
|
183
|
+
- `.show`, `.hide`, `.wipe` - Animation state classes
|
|
184
|
+
|
|
185
|
+
## 👥 Contributing
|
|
186
|
+
|
|
187
|
+
Contributions are welcome! Please feel free to submit a Pull Request.
|
package/index.imba
ADDED
|
@@ -0,0 +1,185 @@
|
|
|
1
|
+
export const timeout = do(ms) return new Promise(do(resolve) setTimeout(resolve, ms))
|
|
2
|
+
|
|
3
|
+
export class Notifications
|
|
4
|
+
duration = {
|
|
5
|
+
show: 500
|
|
6
|
+
display: 15000
|
|
7
|
+
hide: 500
|
|
8
|
+
wipe: 500
|
|
9
|
+
}
|
|
10
|
+
counter = 0
|
|
11
|
+
queue = []
|
|
12
|
+
hint = ''
|
|
13
|
+
|
|
14
|
+
def fire id, type, header, text, details
|
|
15
|
+
const notification =
|
|
16
|
+
id: id
|
|
17
|
+
type: type
|
|
18
|
+
header: header
|
|
19
|
+
text: text
|
|
20
|
+
details: details
|
|
21
|
+
state: 'show'
|
|
22
|
+
clicked: false
|
|
23
|
+
hide: do
|
|
24
|
+
this.state = 'hide'
|
|
25
|
+
imba.commit!
|
|
26
|
+
await timeout(duration.hide)
|
|
27
|
+
this.state = 'wipe'
|
|
28
|
+
imba.commit!
|
|
29
|
+
await timeout(duration.wipe)
|
|
30
|
+
queue = [] if !queue.filter(do(n) n.state != 'wipe').length
|
|
31
|
+
imba.commit!
|
|
32
|
+
click: do
|
|
33
|
+
this.clicked = true if this.state == 'display'
|
|
34
|
+
|
|
35
|
+
queue.push notification
|
|
36
|
+
await timeout(duration.show)
|
|
37
|
+
notification.state = 'display'
|
|
38
|
+
imba.commit!
|
|
39
|
+
await timeout(duration.display)
|
|
40
|
+
notification.hide! if notification.state == 'display' and !notification.clicked
|
|
41
|
+
|
|
42
|
+
def success header\string, text\string, details = ''
|
|
43
|
+
fire ++counter, 0, header, text, details
|
|
44
|
+
|
|
45
|
+
def info header\string, text\string, details = ''
|
|
46
|
+
fire ++counter, 1, header, text, details
|
|
47
|
+
|
|
48
|
+
def caution header\string, text\string, details = ''
|
|
49
|
+
fire ++counter, 2, header, text, details
|
|
50
|
+
|
|
51
|
+
def error header\string, text\string, details = ''
|
|
52
|
+
fire ++counter, 3, header, text, details
|
|
53
|
+
|
|
54
|
+
|
|
55
|
+
# --------------------------------------------------
|
|
56
|
+
# Icons
|
|
57
|
+
# --------------------------------------------------
|
|
58
|
+
tag Icon
|
|
59
|
+
path
|
|
60
|
+
<self> <svg viewBox="0 0 256 256"> <path d=path>
|
|
61
|
+
|
|
62
|
+
export tag SuccessIcon < Icon
|
|
63
|
+
path = "M173.66,98.34a8,8,0,0,1,0,11.32l-56,56a8,8,0,0,1-11.32,0l-24-24a8,8,0,0,1,11.32-11.32L112,148.69l50.34-50.35A8,8,0,0,1,173.66,98.34ZM232,128A104,104,0,1,1,128,24,104.11,104.11,0,0,1,232,128Zm-16,0a88,88,0,1,0-88,88A88.1,88.1,0,0,0,216,128Z"
|
|
64
|
+
|
|
65
|
+
export tag InfoIcon < Icon
|
|
66
|
+
path = "M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm0,192a88,88,0,1,1,88-88A88.1,88.1,0,0,1,128,216Zm16-40a8,8,0,0,1-8,8,16,16,0,0,1-16-16V128a8,8,0,0,1,0-16,16,16,0,0,1,16,16v40A8,8,0,0,1,144,176ZM112,84a12,12,0,1,1,12,12A12,12,0,0,1,112,84Z"
|
|
67
|
+
|
|
68
|
+
export tag CautionIcon < Icon
|
|
69
|
+
path = "M236.8,188.09,149.35,36.22h0a24.76,24.76,0,0,0-42.7,0L19.2,188.09a23.51,23.51,0,0,0,0,23.72A24.35,24.35,0,0,0,40.55,224h174.9a24.35,24.35,0,0,0,21.33-12.19A23.51,23.51,0,0,0,236.8,188.09ZM222.93,203.8a8.5,8.5,0,0,1-7.48,4.2H40.55a8.5,8.5,0,0,1-7.48-4.2,7.59,7.59,0,0,1,0-7.72L120.52,44.21a8.75,8.75,0,0,1,15,0l87.45,151.87A7.59,7.59,0,0,1,222.93,203.8ZM120,144V104a8,8,0,0,1,16,0v40a8,8,0,0,1-16,0Zm20,36a12,12,0,1,1-12-12A12,12,0,0,1,140,180Z"
|
|
70
|
+
|
|
71
|
+
export tag ErrorIcon < Icon
|
|
72
|
+
path = "M165.66,101.66,139.31,128l26.35,26.34a8,8,0,0,1-11.32,11.32L128,139.31l-26.34,26.35a8,8,0,0,1-11.32-11.32L116.69,128,90.34,101.66a8,8,0,0,1,11.32-11.32L128,116.69l26.34-26.35a8,8,0,0,1,11.32,11.32ZM232,128A104,104,0,1,1,128,24,104.11,104.11,0,0,1,232,128Zm-16,0a88,88,0,1,0-88,88A88.1,88.1,0,0,0,216,128Z"
|
|
73
|
+
|
|
74
|
+
export tag CloseIcon
|
|
75
|
+
<self>
|
|
76
|
+
<svg viewBox="0 0 256 256">
|
|
77
|
+
<path d="M205.66,194.34a8,8,0,0,1-11.32,11.32L128,139.31,61.66,205.66a8,8,0,0,1-11.32-11.32L116.69,128,50.34,61.66A8,8,0,0,1,61.66,50.34L128,116.69l66.34-66.35a8,8,0,0,1,11.32,11.32L139.31,128Z">
|
|
78
|
+
|
|
79
|
+
|
|
80
|
+
# --------------------------------------------------
|
|
81
|
+
# Visual component to display notifications
|
|
82
|
+
# --------------------------------------------------
|
|
83
|
+
export tag ShowNotifications
|
|
84
|
+
state
|
|
85
|
+
icons = [SuccessIcon, InfoIcon, CautionIcon, ErrorIcon, CloseIcon]
|
|
86
|
+
type = ['success', 'info', 'caution', 'error']
|
|
87
|
+
|
|
88
|
+
def mount
|
|
89
|
+
console.log 'No state defined for <ShowNotifications>' if !state
|
|
90
|
+
|
|
91
|
+
style.setProperty("--show", "{state.duration.show || 500}ms")
|
|
92
|
+
style.setProperty("--display", "{state.duration.display || 15000}ms")
|
|
93
|
+
style.setProperty("--hide", "{state.duration.hide || 500}ms")
|
|
94
|
+
style.setProperty("--wipe", "{state.duration.wipe || 500}ms")
|
|
95
|
+
|
|
96
|
+
css
|
|
97
|
+
.container
|
|
98
|
+
pos:rel
|
|
99
|
+
d:grid tween:grid-template-rows var(--wipe) ease
|
|
100
|
+
pe:auto cursor:default
|
|
101
|
+
mt:10px mr:10px rd:5px
|
|
102
|
+
backdrop-filter: blur(20px)
|
|
103
|
+
bgc:light-dark(black/8, white/10)
|
|
104
|
+
bd:1px solid light-dark(black/16, white/20)
|
|
105
|
+
.header-container
|
|
106
|
+
d:hcc m:10px
|
|
107
|
+
.header-text
|
|
108
|
+
ml:10px
|
|
109
|
+
fs:15px fw:normal
|
|
110
|
+
c:light-dark(black, white)
|
|
111
|
+
.header-icon
|
|
112
|
+
w:24px
|
|
113
|
+
.header-icon-success
|
|
114
|
+
fill:light-dark(#1b9023,#61e16a)
|
|
115
|
+
.header-icon-info
|
|
116
|
+
fill:light-dark(#0b46b3,#49bfff)
|
|
117
|
+
.header-icon-caution
|
|
118
|
+
fill:light-dark(#cf9400,#faff5b)
|
|
119
|
+
.header-icon-error
|
|
120
|
+
fill:light-dark(#ac0000,#ff3b1d)
|
|
121
|
+
.header-close
|
|
122
|
+
ml:auto w:26px h:26px p:5px rd:4px
|
|
123
|
+
cursor:pointer
|
|
124
|
+
fill:light-dark(black, white)
|
|
125
|
+
bgc@hover:light-dark(black/20, white/20)
|
|
126
|
+
.body-container
|
|
127
|
+
ml:44px mr:36px mb:15px
|
|
128
|
+
.body-text
|
|
129
|
+
fs:12px fw:normal
|
|
130
|
+
c:light-dark(black/80, white/60)
|
|
131
|
+
.body-details
|
|
132
|
+
w:100% mt:15px p:10px rd:4px
|
|
133
|
+
bgc:light-dark(black/5, white/10)
|
|
134
|
+
fs:11px fw:normal
|
|
135
|
+
c:light-dark(black, white/90)
|
|
136
|
+
.footer
|
|
137
|
+
pos:rel
|
|
138
|
+
px:10px py:2px w:100% ta:center
|
|
139
|
+
fs:11px fw:normal
|
|
140
|
+
c:light-dark(black/70, white/70)
|
|
141
|
+
bgc:light-dark(black/5, white/10)
|
|
142
|
+
@before
|
|
143
|
+
content: ''
|
|
144
|
+
pos:abs h:100% t:0 l:0
|
|
145
|
+
bgc:light-dark(black/5, white/10)
|
|
146
|
+
animation: progress calc(var(--show) + var(--display)) linear forwards
|
|
147
|
+
@keyframes progress
|
|
148
|
+
from w:0%
|
|
149
|
+
to w:100%
|
|
150
|
+
|
|
151
|
+
.show
|
|
152
|
+
gtr: 1fr
|
|
153
|
+
animation: show var(--show) ease
|
|
154
|
+
@keyframes show
|
|
155
|
+
from transform: translateX(100%)
|
|
156
|
+
.hide
|
|
157
|
+
gtr: 1fr
|
|
158
|
+
animation: hide var(--hide) ease forwards
|
|
159
|
+
@keyframes hide
|
|
160
|
+
to transform: translateX(100%) mr:0px
|
|
161
|
+
|
|
162
|
+
.wipe
|
|
163
|
+
transform: translateX(100%) mr:0px
|
|
164
|
+
gtr: 0fr
|
|
165
|
+
animation: wipe var(--wipe) ease forwards
|
|
166
|
+
@keyframes wipe
|
|
167
|
+
to my:0 py:0 bd:0px
|
|
168
|
+
|
|
169
|
+
<self [bgc:transparent h:100vh pe:none d:vflex zi:10000 pos:fixed]>
|
|
170
|
+
css w:320px r:0
|
|
171
|
+
for notification in state.queue
|
|
172
|
+
<div.container .{notification.state} @click=notification.click>
|
|
173
|
+
<div [of:hidden d:vflex]>
|
|
174
|
+
<div.header-container>
|
|
175
|
+
<{icons[notification.type]}.header-icon .{"header-icon-{type[notification.type]}"}>
|
|
176
|
+
<div.header-text> notification.header
|
|
177
|
+
<{icons[4]}.header-close @click.trap=notification.hide>
|
|
178
|
+
if !notification.clicked
|
|
179
|
+
<div.footer> state.hint
|
|
180
|
+
else
|
|
181
|
+
<div.body-container>
|
|
182
|
+
css ead:10s
|
|
183
|
+
<div.body-text> notification.text
|
|
184
|
+
if notification.details
|
|
185
|
+
<div.body-details> notification.details
|
package/package.json
ADDED
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "imba-localization",
|
|
3
|
+
"version": "0.0.1",
|
|
4
|
+
"repository": {
|
|
5
|
+
"type": "git",
|
|
6
|
+
"url": "git+https://github.com/HeapVoid/imba-notifications.git"
|
|
7
|
+
},
|
|
8
|
+
"main": "index.imba",
|
|
9
|
+
"module": "index.imba",
|
|
10
|
+
"browser": "index.imba",
|
|
11
|
+
"devDependencies": {
|
|
12
|
+
"imba": "latest",
|
|
13
|
+
"bimba-cli": "latest"
|
|
14
|
+
},
|
|
15
|
+
"description": "A lightweight, customizable notification system for Imba applications with smooth animations and a clean user interface.",
|
|
16
|
+
"keywords": ["imba", "notifications", "toaster"],
|
|
17
|
+
"license": "MIT",
|
|
18
|
+
"type": "module",
|
|
19
|
+
"files": [
|
|
20
|
+
"index.imba"
|
|
21
|
+
]
|
|
22
|
+
}
|