@inglorious/ui 4.0.2 → 4.0.3
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/package.json +6 -6
- package/src/examples/dashboard/dashboard.js +6 -2
- package/src/examples/dashboard/social-card.js +0 -2
- package/src/examples/dashboard/stat-card.js +15 -12
- package/src/examples/dashboard/style.css +10 -5
- package/src/examples/dashboard/traffic-sales-card.js +23 -10
- package/src/styles/themes/inglorious.css +55 -1
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@inglorious/ui",
|
|
3
|
-
"version": "4.0.
|
|
3
|
+
"version": "4.0.3",
|
|
4
4
|
"description": "A design system for Inglorious Web with render-function components and customizable themes",
|
|
5
5
|
"author": "IceOnFire <antony.mistretta@gmail.com> (https://ingloriouscoderz.it)",
|
|
6
6
|
"license": "MIT",
|
|
@@ -280,10 +280,10 @@
|
|
|
280
280
|
"**/*.css"
|
|
281
281
|
],
|
|
282
282
|
"peerDependencies": {
|
|
283
|
-
"@inglorious/charts": "7.0.
|
|
283
|
+
"@inglorious/charts": "7.0.3",
|
|
284
284
|
"@inglorious/store": "11.0.0",
|
|
285
|
-
"@inglorious/
|
|
286
|
-
"@inglorious/
|
|
285
|
+
"@inglorious/utils": "3.8.0",
|
|
286
|
+
"@inglorious/web": "6.1.2"
|
|
287
287
|
},
|
|
288
288
|
"devDependencies": {
|
|
289
289
|
"@fontsource/material-symbols-outlined": "^5.2.36",
|
|
@@ -297,10 +297,10 @@
|
|
|
297
297
|
"storybook": "^10.3.3",
|
|
298
298
|
"vite": "^7.3.1",
|
|
299
299
|
"vitest": "^4.0.15",
|
|
300
|
-
"@inglorious/eslint-config": "1.1.2",
|
|
301
|
-
"@inglorious/store": "11.0.0",
|
|
302
300
|
"@inglorious/vite-plugin-jsx": "2.0.0",
|
|
301
|
+
"@inglorious/eslint-config": "1.1.2",
|
|
303
302
|
"@inglorious/vite-plugin-vue": "1.0.1",
|
|
303
|
+
"@inglorious/store": "11.0.0",
|
|
304
304
|
"@inglorious/web": "6.1.2"
|
|
305
305
|
},
|
|
306
306
|
"engines": {
|
|
@@ -75,8 +75,12 @@ export const Dashboard = {
|
|
|
75
75
|
padding: "md",
|
|
76
76
|
className: "iw-dashboard-footer",
|
|
77
77
|
children: [
|
|
78
|
-
html`<div>
|
|
79
|
-
|
|
78
|
+
html`<div class="iw-typography">
|
|
79
|
+
Admin dashboard example © 2026
|
|
80
|
+
</div>`,
|
|
81
|
+
html`<div class="iw-typography">
|
|
82
|
+
Built with Inglorious UI primitives and charts
|
|
83
|
+
</div>`,
|
|
80
84
|
],
|
|
81
85
|
}),
|
|
82
86
|
],
|
|
@@ -50,12 +50,10 @@ export const SocialCard = {
|
|
|
50
50
|
renderAreaSpark(entity, api) {
|
|
51
51
|
return Chart.render(
|
|
52
52
|
{
|
|
53
|
-
type: "area",
|
|
54
53
|
data: entity.data.map((value, index) => ({ name: `${index}`, value })),
|
|
55
54
|
width: 640,
|
|
56
55
|
height: 200,
|
|
57
56
|
padding: 0,
|
|
58
|
-
dataKeys: ["value"],
|
|
59
57
|
children: [
|
|
60
58
|
Chart.Area({
|
|
61
59
|
dataKey: "value",
|
|
@@ -55,30 +55,33 @@ export const StatCard = {
|
|
|
55
55
|
}))
|
|
56
56
|
|
|
57
57
|
const base = {
|
|
58
|
-
id: entity.id,
|
|
59
|
-
type: entity.chartType,
|
|
60
58
|
data,
|
|
61
59
|
width: 400,
|
|
62
60
|
height: 80,
|
|
63
|
-
padding: { top: 0, right: 16, bottom: -
|
|
61
|
+
padding: { top: 0, right: 16, bottom: -8, left: 16 },
|
|
62
|
+
dataKeys: ["value"],
|
|
64
63
|
}
|
|
65
64
|
|
|
66
65
|
const children = []
|
|
66
|
+
|
|
67
|
+
if (entity.chartType === "area") {
|
|
68
|
+
children.push(
|
|
69
|
+
Chart.Area({ dataKey: "value", fill: "rgba(255,255,255,0.3)" }),
|
|
70
|
+
)
|
|
71
|
+
} else if (entity.chartType === "bar") {
|
|
72
|
+
children.push(
|
|
73
|
+
Chart.Bar({ dataKey: "value", fill: "rgba(255,255,255,0.3)" }),
|
|
74
|
+
)
|
|
75
|
+
} else if (entity.chartType === "line") {
|
|
76
|
+
children.push(Chart.Line({ dataKey: "value", stroke: "white" }))
|
|
77
|
+
}
|
|
78
|
+
|
|
67
79
|
if (entity.hasDots) {
|
|
68
80
|
children.push(
|
|
69
81
|
Chart.Dots({ dataKey: "value", stroke: "white", fill: "#39a2f1" }),
|
|
70
82
|
)
|
|
71
83
|
}
|
|
72
84
|
|
|
73
|
-
if (entity.chartType === "area") {
|
|
74
|
-
children.push(Chart.Area({ fill: "rgba(255,255,255,0.3)" }))
|
|
75
|
-
return Chart.render({ ...base, children }, api)
|
|
76
|
-
}
|
|
77
|
-
if (entity.chartType === "bar") {
|
|
78
|
-
children.push(Chart.Bar({ fill: "rgba(255,255,255,0.3)" }))
|
|
79
|
-
return Chart.render({ ...base, children }, api)
|
|
80
|
-
}
|
|
81
|
-
children.push(Chart.Line({ stroke: "white" }))
|
|
82
85
|
return Chart.render({ ...base, children }, api)
|
|
83
86
|
},
|
|
84
87
|
}
|
|
@@ -78,7 +78,6 @@
|
|
|
78
78
|
|
|
79
79
|
.iw-dashboard-stat {
|
|
80
80
|
overflow: hidden;
|
|
81
|
-
color: white;
|
|
82
81
|
|
|
83
82
|
.iw-typography,
|
|
84
83
|
.iw-material-icon,
|
|
@@ -88,16 +87,16 @@
|
|
|
88
87
|
}
|
|
89
88
|
}
|
|
90
89
|
|
|
91
|
-
.iw-dashboard-stat-primary {
|
|
90
|
+
.iw-card.iw-dashboard-stat-primary > .iw-card-body {
|
|
92
91
|
background: #5856d6;
|
|
93
92
|
}
|
|
94
|
-
.iw-dashboard-stat-info {
|
|
93
|
+
.iw-card.iw-dashboard-stat-info > .iw-card-body {
|
|
95
94
|
background: #39a2f1;
|
|
96
95
|
}
|
|
97
|
-
.iw-dashboard-stat-warning {
|
|
96
|
+
.iw-card.iw-dashboard-stat-warning > .iw-card-body {
|
|
98
97
|
background: #f5a524;
|
|
99
98
|
}
|
|
100
|
-
.iw-dashboard-stat-danger {
|
|
99
|
+
.iw-card.iw-dashboard-stat-danger > .iw-card-body {
|
|
101
100
|
background: #e55353;
|
|
102
101
|
}
|
|
103
102
|
|
|
@@ -149,6 +148,8 @@
|
|
|
149
148
|
}
|
|
150
149
|
|
|
151
150
|
.iw-dashboard-social-card {
|
|
151
|
+
background-color: var(--iw-card-border);
|
|
152
|
+
|
|
152
153
|
.iw-dashboard-social-cap {
|
|
153
154
|
position: relative;
|
|
154
155
|
display: flex;
|
|
@@ -181,6 +182,10 @@
|
|
|
181
182
|
height: 100%;
|
|
182
183
|
}
|
|
183
184
|
}
|
|
185
|
+
|
|
186
|
+
.iw-card-body {
|
|
187
|
+
background-color: var(--iw-card-bg);
|
|
188
|
+
}
|
|
184
189
|
}
|
|
185
190
|
|
|
186
191
|
.iw-dashboard-social-stats {
|
|
@@ -62,7 +62,7 @@ export const TrafficSalesCard = {
|
|
|
62
62
|
align: "center",
|
|
63
63
|
className: "iw-dashboard-progress-row",
|
|
64
64
|
children: [
|
|
65
|
-
html`<span>${day}</span>`,
|
|
65
|
+
html`<span class="iw-typography">${day}</span>`,
|
|
66
66
|
Flex.render({
|
|
67
67
|
direction: "column",
|
|
68
68
|
gap: "sm",
|
|
@@ -127,7 +127,9 @@ export const TrafficSalesCard = {
|
|
|
127
127
|
name: iconName,
|
|
128
128
|
size: "lg",
|
|
129
129
|
}),
|
|
130
|
-
html`<span
|
|
130
|
+
html`<span class="iw-typography"
|
|
131
|
+
>${label}</span
|
|
132
|
+
>`,
|
|
131
133
|
],
|
|
132
134
|
}),
|
|
133
135
|
Flex.render({
|
|
@@ -136,10 +138,18 @@ export const TrafficSalesCard = {
|
|
|
136
138
|
className: "iw-dashboard-progress-meta",
|
|
137
139
|
children: metric
|
|
138
140
|
? [
|
|
139
|
-
html`<span
|
|
140
|
-
|
|
141
|
+
html`<span class="iw-typography"
|
|
142
|
+
>${metric}</span
|
|
143
|
+
>`,
|
|
144
|
+
html`<span class="iw-typography"
|
|
145
|
+
>${suffix}</span
|
|
146
|
+
>`,
|
|
141
147
|
]
|
|
142
|
-
: [
|
|
148
|
+
: [
|
|
149
|
+
html`<span class="iw-typography"
|
|
150
|
+
>${value}%</span
|
|
151
|
+
>`,
|
|
152
|
+
],
|
|
143
153
|
}),
|
|
144
154
|
],
|
|
145
155
|
})}
|
|
@@ -187,7 +197,7 @@ export const TrafficSalesCard = {
|
|
|
187
197
|
children: "",
|
|
188
198
|
})}
|
|
189
199
|
</span>`,
|
|
190
|
-
html`<div>
|
|
200
|
+
html`<div class="iw-typography">
|
|
191
201
|
<div>${row.name}</div>
|
|
192
202
|
<div class="iw-dashboard-user-subtitle">
|
|
193
203
|
${row.subtitle}
|
|
@@ -208,8 +218,9 @@ export const TrafficSalesCard = {
|
|
|
208
218
|
justify: "between",
|
|
209
219
|
gap: "sm",
|
|
210
220
|
children: [
|
|
211
|
-
html`<span>${row.usage}%</span>`,
|
|
212
|
-
html`<span
|
|
221
|
+
html`<span class="iw-typography">${row.usage}%</span>`,
|
|
222
|
+
html`<span
|
|
223
|
+
class="iw-typography iw-dashboard-user-subtitle"
|
|
213
224
|
>${row.range}</span
|
|
214
225
|
>`,
|
|
215
226
|
],
|
|
@@ -232,8 +243,10 @@ export const TrafficSalesCard = {
|
|
|
232
243
|
</div>`,
|
|
233
244
|
activity: html`
|
|
234
245
|
<div>
|
|
235
|
-
<div class="iw-dashboard-user-subtitle">
|
|
236
|
-
|
|
246
|
+
<div class="iw-typography iw-dashboard-user-subtitle">
|
|
247
|
+
Last login
|
|
248
|
+
</div>
|
|
249
|
+
<div class="iw-typography">${row.activity}</div>
|
|
237
250
|
</div>
|
|
238
251
|
`,
|
|
239
252
|
menu: html`
|
|
@@ -1,5 +1,11 @@
|
|
|
1
|
+
@import url("https://fonts.googleapis.com/css2?family=Orbitron:wght@400..900&family=Oxanium:wght@200..800&display=swap");
|
|
2
|
+
|
|
3
|
+
:root {
|
|
4
|
+
--iw-font-family: "Oxanium", var(--iw-font-family-sans);
|
|
5
|
+
}
|
|
6
|
+
|
|
1
7
|
.iw-theme-inglorious {
|
|
2
|
-
font-family: var(--iw-font-family
|
|
8
|
+
--iw-font-family-sans: var(--iw-font-family);
|
|
3
9
|
|
|
4
10
|
/* ========================================
|
|
5
11
|
INGLORIOUS THEME - Neon Videogame Aesthetic
|
|
@@ -128,3 +134,51 @@
|
|
|
128
134
|
var(--iw-color-white)
|
|
129
135
|
);
|
|
130
136
|
}
|
|
137
|
+
|
|
138
|
+
.iw-theme-inglorious {
|
|
139
|
+
.iw-typography {
|
|
140
|
+
font-family: var(--iw-font-family-sans);
|
|
141
|
+
}
|
|
142
|
+
|
|
143
|
+
h1,
|
|
144
|
+
h2,
|
|
145
|
+
h3,
|
|
146
|
+
h4,
|
|
147
|
+
h5,
|
|
148
|
+
h6,
|
|
149
|
+
th {
|
|
150
|
+
font-family: "Orbitron", sans-serif;
|
|
151
|
+
}
|
|
152
|
+
|
|
153
|
+
.iw-card {
|
|
154
|
+
--cut: 20px;
|
|
155
|
+
|
|
156
|
+
clip-path: polygon(
|
|
157
|
+
0 0,
|
|
158
|
+
100% 0,
|
|
159
|
+
100% calc(100% - var(--cut)),
|
|
160
|
+
calc(100% - var(--cut)) 100%,
|
|
161
|
+
0 100%
|
|
162
|
+
);
|
|
163
|
+
|
|
164
|
+
background-color: var(--iw-card-border);
|
|
165
|
+
|
|
166
|
+
.iw-card-header,
|
|
167
|
+
.iw-card-body,
|
|
168
|
+
.iw-card-footer {
|
|
169
|
+
background-color: var(--iw-card-bg);
|
|
170
|
+
}
|
|
171
|
+
|
|
172
|
+
> :last-child {
|
|
173
|
+
--cut: 20px;
|
|
174
|
+
|
|
175
|
+
clip-path: polygon(
|
|
176
|
+
0 0,
|
|
177
|
+
100% 0,
|
|
178
|
+
100% calc(100% - var(--cut)),
|
|
179
|
+
calc(100% - var(--cut)) 100%,
|
|
180
|
+
0 100%
|
|
181
|
+
);
|
|
182
|
+
}
|
|
183
|
+
}
|
|
184
|
+
}
|