@base-framework/ui 1.0.201 → 1.0.203
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/dist/atoms.es.js +25 -24
- package/dist/{image-scaler-BIZ0dtU2.js → image-scaler-BQ7WdtlV.js} +112 -111
- package/dist/index.es.js +157 -156
- package/dist/{tooltip-CYtKjefM.js → tooltip-Dn8TxE9o.js} +86 -64
- package/dist/types/components/atoms/atoms.d.ts +1 -0
- package/dist/types/components/atoms/form/form-group.d.ts +12 -0
- package/dist/utils.es.js +1 -1
- package/package.json +1 -1
package/dist/atoms.es.js
CHANGED
|
@@ -1,36 +1,37 @@
|
|
|
1
|
-
import { B as e, C as t,
|
|
2
|
-
import { B as
|
|
3
|
-
import { C, d as
|
|
1
|
+
import { B as e, C as t, b as o, F as n, a as r, L as p, P as u, R as I, S as i, c as l, T as d } from "./tooltip-Dn8TxE9o.js";
|
|
2
|
+
import { B as T, I as c, L as x } from "./buttons-Cm9etaEG.js";
|
|
3
|
+
import { C, d as g, D as F, c as b, E as f, F as L, H as P, I as R, M as S, N as h, P as k, R as D, T as V, a as E, b as G, U as H, W as M } from "./inputs-CMjx5-IX.js";
|
|
4
4
|
import { V as U, a as W } from "./veil-D4dRxILB.js";
|
|
5
5
|
export {
|
|
6
6
|
e as Badge,
|
|
7
|
-
|
|
7
|
+
T as Button,
|
|
8
8
|
t as Card,
|
|
9
9
|
C as Checkbox,
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
10
|
+
o as CircleGraph,
|
|
11
|
+
g as ColorInput,
|
|
12
|
+
F as DateInput,
|
|
13
13
|
b as DateTimeInput,
|
|
14
14
|
f as EmailInput,
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
15
|
+
n as Fieldset,
|
|
16
|
+
L as FileInput,
|
|
17
|
+
r as FormGroup,
|
|
18
|
+
P as HiddenInput,
|
|
19
|
+
c as Icon,
|
|
20
|
+
R as Input,
|
|
20
21
|
p as Legend,
|
|
21
22
|
x as LoadingButton,
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
23
|
+
S as MonthInput,
|
|
24
|
+
h as NumberInput,
|
|
25
|
+
k as PasswordInput,
|
|
26
|
+
u as ProgressBar,
|
|
27
|
+
D as Radio,
|
|
28
|
+
I as RangeSlider,
|
|
29
|
+
i as Select,
|
|
30
|
+
l as Skeleton,
|
|
31
|
+
V as TelInput,
|
|
32
|
+
E as Textarea,
|
|
33
|
+
G as TimeInput,
|
|
34
|
+
d as Tooltip,
|
|
34
35
|
H as UrlInput,
|
|
35
36
|
U as Veil,
|
|
36
37
|
W as VeilJot,
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
var y = Object.defineProperty;
|
|
2
|
-
var S = (i, t,
|
|
3
|
-
var
|
|
4
|
-
import { DateTime as
|
|
2
|
+
var S = (i, t, n) => t in i ? y(i, t, { enumerable: !0, configurable: !0, writable: !0, value: n }) : i[t] = n;
|
|
3
|
+
var g = (i, t, n) => S(i, typeof t != "symbol" ? t + "" : t, n);
|
|
4
|
+
import { DateTime as f, base as l } from "@base-framework/base";
|
|
5
5
|
const h = (i, t) => (typeof i == "string" && (i = [i]), Array.isArray(i) ? (i.push(t), i) : {
|
|
6
6
|
...i,
|
|
7
7
|
callBack: t
|
|
8
|
-
}),
|
|
8
|
+
}), x = (i, t = "") => i ?? t, z = {
|
|
9
9
|
/**
|
|
10
10
|
* Formats a number with commas.
|
|
11
11
|
*
|
|
@@ -14,10 +14,12 @@ const h = (i, t) => (typeof i == "string" && (i = [i]), Array.isArray(i) ? (i.pu
|
|
|
14
14
|
* @returns {object|array}
|
|
15
15
|
*/
|
|
16
16
|
number(i, t = null) {
|
|
17
|
-
return h(i, (
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
17
|
+
return h(i, (e) => {
|
|
18
|
+
if (!isNaN(e)) {
|
|
19
|
+
const s = /\B(?=(\d{3})+(?!\d))/g;
|
|
20
|
+
return e.toString().replace(s, ",");
|
|
21
|
+
}
|
|
22
|
+
return t || "";
|
|
21
23
|
});
|
|
22
24
|
},
|
|
23
25
|
/**
|
|
@@ -28,8 +30,8 @@ const h = (i, t) => (typeof i == "string" && (i = [i]), Array.isArray(i) ? (i.pu
|
|
|
28
30
|
* @param {string} no - Text for false values.
|
|
29
31
|
* @returns {object|array}
|
|
30
32
|
*/
|
|
31
|
-
yesno(i, t = "Yes",
|
|
32
|
-
return h(i, (s) => s ? t :
|
|
33
|
+
yesno(i, t = "Yes", n = "No") {
|
|
34
|
+
return h(i, (s) => s ? t : n);
|
|
33
35
|
},
|
|
34
36
|
/**
|
|
35
37
|
* Formats a value as money with two decimals.
|
|
@@ -39,12 +41,11 @@ const h = (i, t) => (typeof i == "string" && (i = [i]), Array.isArray(i) ? (i.pu
|
|
|
39
41
|
* @param {*} defaultValue - Value if original is invalid.
|
|
40
42
|
* @returns {object|array}
|
|
41
43
|
*/
|
|
42
|
-
money(i, t = "$",
|
|
44
|
+
money(i, t = "$", n = null) {
|
|
43
45
|
return h(i, (s) => {
|
|
44
|
-
s = p(s, e);
|
|
45
46
|
const o = parseFloat(s);
|
|
46
47
|
if (isNaN(o))
|
|
47
|
-
return
|
|
48
|
+
return n || "";
|
|
48
49
|
const r = /\B(?=(\d{3})+(?!\d))/g;
|
|
49
50
|
return t + o.toFixed(2).toString().replace(r, ",");
|
|
50
51
|
});
|
|
@@ -57,10 +58,10 @@ const h = (i, t) => (typeof i == "string" && (i = [i]), Array.isArray(i) ? (i.pu
|
|
|
57
58
|
* @returns {object|array}
|
|
58
59
|
*/
|
|
59
60
|
phone(i, t = null) {
|
|
60
|
-
return h(i, (
|
|
61
|
-
|
|
62
|
-
const s =
|
|
63
|
-
return s.length === 10 ? "(" + s.slice(0, 3) + ") " + s.slice(3, 6) + "-" + s.slice(6) :
|
|
61
|
+
return h(i, (e) => {
|
|
62
|
+
e = e || "";
|
|
63
|
+
const s = String(e.toString()).replace(/\D/g, "");
|
|
64
|
+
return s.length === 10 ? "(" + s.slice(0, 3) + ") " + s.slice(3, 6) + "-" + s.slice(6) : e || t;
|
|
64
65
|
});
|
|
65
66
|
},
|
|
66
67
|
/**
|
|
@@ -71,9 +72,9 @@ const h = (i, t) => (typeof i == "string" && (i = [i]), Array.isArray(i) ? (i.pu
|
|
|
71
72
|
* @returns {object|array}
|
|
72
73
|
*/
|
|
73
74
|
integer(i, t = null) {
|
|
74
|
-
return h(i, (
|
|
75
|
-
|
|
76
|
-
const s = parseInt(
|
|
75
|
+
return h(i, (e) => {
|
|
76
|
+
e = x(e, t);
|
|
77
|
+
const s = parseInt(e, 10);
|
|
77
78
|
return isNaN(s) ? t : s.toString();
|
|
78
79
|
});
|
|
79
80
|
},
|
|
@@ -85,7 +86,7 @@ const h = (i, t) => (typeof i == "string" && (i = [i]), Array.isArray(i) ? (i.pu
|
|
|
85
86
|
* @returns {object|array}
|
|
86
87
|
*/
|
|
87
88
|
date(i, t = null) {
|
|
88
|
-
return h(i, (
|
|
89
|
+
return h(i, (e) => e ? f.format("standard", e) : t || "");
|
|
89
90
|
},
|
|
90
91
|
/**
|
|
91
92
|
* Formats a date and time value to a standard date and time format.
|
|
@@ -95,7 +96,7 @@ const h = (i, t) => (typeof i == "string" && (i = [i]), Array.isArray(i) ? (i.pu
|
|
|
95
96
|
* @returns {object|array}
|
|
96
97
|
*/
|
|
97
98
|
dateTime(i, t = null) {
|
|
98
|
-
return h(i, (
|
|
99
|
+
return h(i, (e) => e ? f.format("standard", e) + " " + f.formatTime(e, 12) : t || "");
|
|
99
100
|
},
|
|
100
101
|
/**
|
|
101
102
|
* Formats a time value to a standard time format.
|
|
@@ -105,7 +106,7 @@ const h = (i, t) => (typeof i == "string" && (i = [i]), Array.isArray(i) ? (i.pu
|
|
|
105
106
|
* @returns {object|array}
|
|
106
107
|
*/
|
|
107
108
|
time(i, t = null) {
|
|
108
|
-
return h(i, (
|
|
109
|
+
return h(i, (e) => e ? f.formatTime(e, 12) : t || "");
|
|
109
110
|
},
|
|
110
111
|
/**
|
|
111
112
|
* Formats a value with a default value if null or undefined.
|
|
@@ -115,10 +116,10 @@ const h = (i, t) => (typeof i == "string" && (i = [i]), Array.isArray(i) ? (i.pu
|
|
|
115
116
|
* @returns {object|array}
|
|
116
117
|
*/
|
|
117
118
|
default(i, t = null) {
|
|
118
|
-
return h(i, (
|
|
119
|
+
return h(i, (e) => x(e, t));
|
|
119
120
|
}
|
|
120
121
|
};
|
|
121
|
-
class
|
|
122
|
+
class v {
|
|
122
123
|
/**
|
|
123
124
|
* Creates an instance of ElementScaler.
|
|
124
125
|
*
|
|
@@ -174,10 +175,10 @@ class D {
|
|
|
174
175
|
* @param {number} scale - Scale factor (e.g., 1.0 = 100%, 0.5 = 50%).
|
|
175
176
|
* @returns {{width: number, height: number}} The new width and height after scaling.
|
|
176
177
|
*/
|
|
177
|
-
transform(t,
|
|
178
|
+
transform(t, n, e) {
|
|
178
179
|
const s = this.element, o = s.style;
|
|
179
|
-
o.top =
|
|
180
|
-
const r = s.naturalWidth *
|
|
180
|
+
o.top = n + "px", o.left = t + "px";
|
|
181
|
+
const r = s.naturalWidth * e, c = s.naturalHeight * e;
|
|
181
182
|
return o.width = r + "px", o.height = c + "px", { width: r, height: c };
|
|
182
183
|
}
|
|
183
184
|
/**
|
|
@@ -189,7 +190,7 @@ class D {
|
|
|
189
190
|
this.setBoundingBox(), this.containerSize = this.container.getBoundingClientRect();
|
|
190
191
|
}
|
|
191
192
|
}
|
|
192
|
-
class
|
|
193
|
+
class D {
|
|
193
194
|
/**
|
|
194
195
|
* Creates an EventController instance.
|
|
195
196
|
*
|
|
@@ -197,11 +198,11 @@ class v {
|
|
|
197
198
|
* @param {object} parent - The parent object (ImageScaler) that handles actions.
|
|
198
199
|
* @param {HTMLElement} container - The DOM element to attach events to.
|
|
199
200
|
*/
|
|
200
|
-
constructor(t,
|
|
201
|
+
constructor(t, n) {
|
|
201
202
|
/**
|
|
202
203
|
* Tracks and measures distances between touches for pinch gestures.
|
|
203
204
|
*/
|
|
204
|
-
|
|
205
|
+
g(this, "pinchTracker", {
|
|
205
206
|
/** @type {number|null} */
|
|
206
207
|
previousDistance: null,
|
|
207
208
|
/** @type {number|null} */
|
|
@@ -215,9 +216,9 @@ class v {
|
|
|
215
216
|
* @param {number} y2
|
|
216
217
|
* @returns {number}
|
|
217
218
|
*/
|
|
218
|
-
distance(t,
|
|
219
|
+
distance(t, n, e, s) {
|
|
219
220
|
return Math.sqrt(
|
|
220
|
-
(t -
|
|
221
|
+
(t - e) * (t - e) + (n - s) * (n - s)
|
|
221
222
|
);
|
|
222
223
|
},
|
|
223
224
|
/**
|
|
@@ -235,8 +236,8 @@ class v {
|
|
|
235
236
|
* @param {object} touch2
|
|
236
237
|
* @returns {void}
|
|
237
238
|
*/
|
|
238
|
-
setCurrentDistance(t,
|
|
239
|
-
this.currentDistance = this.distance(t.x, t.y,
|
|
239
|
+
setCurrentDistance(t, n) {
|
|
240
|
+
this.currentDistance = this.distance(t.x, t.y, n.x, n.y);
|
|
240
241
|
},
|
|
241
242
|
/**
|
|
242
243
|
* Updates currentDistance and keeps track of the previous distance.
|
|
@@ -245,8 +246,8 @@ class v {
|
|
|
245
246
|
* @param {object} touch2
|
|
246
247
|
* @returns {number} The updated current distance.
|
|
247
248
|
*/
|
|
248
|
-
updateCurrentDistance(t,
|
|
249
|
-
return this.setPreviousDistance(), this.setCurrentDistance(t,
|
|
249
|
+
updateCurrentDistance(t, n) {
|
|
250
|
+
return this.setPreviousDistance(), this.setCurrentDistance(t, n), this.currentDistance;
|
|
250
251
|
},
|
|
251
252
|
/**
|
|
252
253
|
* Determines the scale direction (zoom in/out) based on distance changes.
|
|
@@ -255,10 +256,10 @@ class v {
|
|
|
255
256
|
* @param {object} touch2
|
|
256
257
|
* @returns {number} 1 for zoom in, -1 for zoom out, 0 if below threshold.
|
|
257
258
|
*/
|
|
258
|
-
getScale(t,
|
|
259
|
-
let
|
|
260
|
-
const s = this.updateCurrentDistance(t,
|
|
261
|
-
return o === null || Math.abs(s - o) < 2 || (s > o ?
|
|
259
|
+
getScale(t, n) {
|
|
260
|
+
let e = 0;
|
|
261
|
+
const s = this.updateCurrentDistance(t, n), o = this.previousDistance;
|
|
262
|
+
return o === null || Math.abs(s - o) < 2 || (s > o ? e = 1 : s < o && (e = -1)), e;
|
|
262
263
|
},
|
|
263
264
|
/**
|
|
264
265
|
* Resets the distance measurements.
|
|
@@ -269,7 +270,7 @@ class v {
|
|
|
269
270
|
this.previousDistance = null, this.currentDistance = null;
|
|
270
271
|
}
|
|
271
272
|
});
|
|
272
|
-
this.parent = t, this.container =
|
|
273
|
+
this.parent = t, this.container = n, this.pointer = { x: 0, y: 0, status: "up" }, this.setup();
|
|
273
274
|
}
|
|
274
275
|
/**
|
|
275
276
|
* Initializes event setup.
|
|
@@ -293,11 +294,11 @@ class v {
|
|
|
293
294
|
* @returns {void}
|
|
294
295
|
*/
|
|
295
296
|
setupEvents() {
|
|
296
|
-
const t = this.container,
|
|
297
|
+
const t = this.container, n = l.bind(this, this.pointerMove), e = l.bind(this, this.pointerUp), s = l.bind(this, this.pointerDown), o = l.bind(this, this.wheel), r = l.bind(this, this.resize);
|
|
297
298
|
this.addEvents = function() {
|
|
298
|
-
l.on(["mousemove", "touchmove"], t,
|
|
299
|
+
l.on(["mousemove", "touchmove"], t, n), l.on(["mouseup", "mouseout", "touchend", "touchcancel"], t, e), l.on(["mousedown", "touchstart"], t, s), l.onMouseWheel(o, t, !0), l.on("resize", globalThis, r);
|
|
299
300
|
}, this.addEvents(), this.removeEvents = function() {
|
|
300
|
-
l.off(["mousemove", "touchmove"], t,
|
|
301
|
+
l.off(["mousemove", "touchmove"], t, n), l.off(["mouseup", "mouseout", "touchend", "touchcancel"], t, e), l.off(["mousedown", "touchstart"], t, s), l.offMouseWheel(o, t), l.off("resize", globalThis, r);
|
|
301
302
|
};
|
|
302
303
|
}
|
|
303
304
|
/**
|
|
@@ -307,8 +308,8 @@ class v {
|
|
|
307
308
|
* @param {Event} e - The associated event.
|
|
308
309
|
* @returns {void}
|
|
309
310
|
*/
|
|
310
|
-
wheel(t,
|
|
311
|
-
this.parent.callAction("pinch",
|
|
311
|
+
wheel(t, n) {
|
|
312
|
+
this.parent.callAction("pinch", n, t);
|
|
312
313
|
}
|
|
313
314
|
/**
|
|
314
315
|
* Extracts the position from mouse or touch events and updates `this.pointer`.
|
|
@@ -317,14 +318,14 @@ class v {
|
|
|
317
318
|
* @returns {void}
|
|
318
319
|
*/
|
|
319
320
|
getEventPosition(t) {
|
|
320
|
-
let
|
|
321
|
+
let n, e;
|
|
321
322
|
const s = t.touches;
|
|
322
323
|
if (s && s.length) {
|
|
323
324
|
const o = s[0];
|
|
324
|
-
|
|
325
|
+
n = o.clientX, e = o.clientY;
|
|
325
326
|
} else
|
|
326
|
-
|
|
327
|
-
this.pointer.x =
|
|
327
|
+
n = t.clientX, e = t.clientY;
|
|
328
|
+
this.pointer.x = n, this.pointer.y = e;
|
|
328
329
|
}
|
|
329
330
|
/**
|
|
330
331
|
* Called when the pointer goes down (mouse/touch).
|
|
@@ -359,11 +360,11 @@ class v {
|
|
|
359
360
|
* @returns {Array<object>} Array of touch points.
|
|
360
361
|
*/
|
|
361
362
|
getTouches(t) {
|
|
362
|
-
const
|
|
363
|
-
if (
|
|
364
|
-
for (let s = 0; s <
|
|
365
|
-
|
|
366
|
-
return
|
|
363
|
+
const n = [], e = t.touches;
|
|
364
|
+
if (e && e.length)
|
|
365
|
+
for (let s = 0; s < e.length; s++)
|
|
366
|
+
n.push(e[s]);
|
|
367
|
+
return n;
|
|
367
368
|
}
|
|
368
369
|
/**
|
|
369
370
|
* Calculates the midpoint (center) between two sets of coordinates.
|
|
@@ -374,10 +375,10 @@ class v {
|
|
|
374
375
|
* @param {number} y2
|
|
375
376
|
* @returns {{x: number, y: number}} The center coordinates.
|
|
376
377
|
*/
|
|
377
|
-
getCenter(t,
|
|
378
|
+
getCenter(t, n, e, s) {
|
|
378
379
|
return {
|
|
379
|
-
x: (t +
|
|
380
|
-
y: (
|
|
380
|
+
x: (t + e) / 2,
|
|
381
|
+
y: (n + s) / 2
|
|
381
382
|
};
|
|
382
383
|
}
|
|
383
384
|
/**
|
|
@@ -387,11 +388,11 @@ class v {
|
|
|
387
388
|
* @returns {void}
|
|
388
389
|
*/
|
|
389
390
|
pinch(t) {
|
|
390
|
-
const
|
|
391
|
-
if (
|
|
391
|
+
const n = this.getTouches(t);
|
|
392
|
+
if (n.length === 2) {
|
|
392
393
|
this.pointer.status = "down";
|
|
393
|
-
const
|
|
394
|
-
this.centerMousePinch(
|
|
394
|
+
const e = n[0], s = n[1], o = this.getPosition(e.clientX, e.clientY), r = this.getPosition(s.clientX, s.clientY);
|
|
395
|
+
this.centerMousePinch(e, s);
|
|
395
396
|
const c = this.pinchTracker.getScale(o, r);
|
|
396
397
|
this.parent.callAction("pinch", t, c);
|
|
397
398
|
}
|
|
@@ -403,10 +404,10 @@ class v {
|
|
|
403
404
|
* @param {number} eY
|
|
404
405
|
* @returns {{x: number, y: number}}
|
|
405
406
|
*/
|
|
406
|
-
getPosition(t,
|
|
407
|
+
getPosition(t, n) {
|
|
407
408
|
return {
|
|
408
409
|
x: parseInt(String(t)),
|
|
409
|
-
y: parseInt(String(
|
|
410
|
+
y: parseInt(String(n))
|
|
410
411
|
};
|
|
411
412
|
}
|
|
412
413
|
/**
|
|
@@ -416,14 +417,14 @@ class v {
|
|
|
416
417
|
* @param {Touch} touch2
|
|
417
418
|
* @returns {void}
|
|
418
419
|
*/
|
|
419
|
-
centerMousePinch(t,
|
|
420
|
-
const
|
|
420
|
+
centerMousePinch(t, n) {
|
|
421
|
+
const e = this.getCenter(
|
|
421
422
|
t.clientX,
|
|
422
423
|
t.clientY,
|
|
423
|
-
|
|
424
|
-
|
|
424
|
+
n.clientX,
|
|
425
|
+
n.clientY
|
|
425
426
|
), s = this.pointer;
|
|
426
|
-
s.x =
|
|
427
|
+
s.x = e.x, s.y = e.y;
|
|
427
428
|
}
|
|
428
429
|
/**
|
|
429
430
|
* Called on a rotate gesture (currently not used).
|
|
@@ -441,9 +442,9 @@ class v {
|
|
|
441
442
|
* @returns {boolean} True if it was a gesture (pinch); false otherwise.
|
|
442
443
|
*/
|
|
443
444
|
isGesture(t) {
|
|
444
|
-
let
|
|
445
|
-
const
|
|
446
|
-
return
|
|
445
|
+
let n = !1;
|
|
446
|
+
const e = t.touches;
|
|
447
|
+
return e && e.length > 1 && (t.preventDefault(), this.pinch(t), n = !0), n;
|
|
447
448
|
}
|
|
448
449
|
/**
|
|
449
450
|
* Called when the pointer moves (mouse/touch) but might also detect pinch.
|
|
@@ -464,8 +465,8 @@ class E {
|
|
|
464
465
|
*/
|
|
465
466
|
constructor(t) {
|
|
466
467
|
/** @type {number} Minimum allowed scale factor. */
|
|
467
|
-
|
|
468
|
-
this.elementScaler = new
|
|
468
|
+
g(this, "minScale", 0.2);
|
|
469
|
+
this.elementScaler = new v(t), this.scale = this.getImageScale(t), this.panning = !1, this.events = null, this.start = { x: 0, y: 0 }, this.delta = { x: 0, y: 0 }, this.setup();
|
|
469
470
|
}
|
|
470
471
|
/**
|
|
471
472
|
* Initializes event handling and centers the image.
|
|
@@ -491,8 +492,8 @@ class E {
|
|
|
491
492
|
* @param {*} [data] - Additional data passed to the method.
|
|
492
493
|
* @returns {void}
|
|
493
494
|
*/
|
|
494
|
-
callAction(t,
|
|
495
|
-
this[t](
|
|
495
|
+
callAction(t, n, e) {
|
|
496
|
+
this[t](n, e);
|
|
496
497
|
}
|
|
497
498
|
/**
|
|
498
499
|
* Sets up the event controller for the image.
|
|
@@ -500,7 +501,7 @@ class E {
|
|
|
500
501
|
* @returns {void}
|
|
501
502
|
*/
|
|
502
503
|
setupEvents() {
|
|
503
|
-
this.events = new
|
|
504
|
+
this.events = new D(this, this.elementScaler.element);
|
|
504
505
|
}
|
|
505
506
|
/**
|
|
506
507
|
* Calculates an initial scale based on the element's offsetWidth vs. naturalWidth.
|
|
@@ -518,10 +519,10 @@ class E {
|
|
|
518
519
|
* @returns {{x: number, y: number}} The pointer offset without scale.
|
|
519
520
|
*/
|
|
520
521
|
getOffset(t) {
|
|
521
|
-
const
|
|
522
|
+
const n = this.scale, e = this.delta, s = this.getPointerPosition();
|
|
522
523
|
return {
|
|
523
|
-
x: (s.x -
|
|
524
|
-
y: (s.y -
|
|
524
|
+
x: (s.x - e.x) / n,
|
|
525
|
+
y: (s.y - e.y) / n
|
|
525
526
|
};
|
|
526
527
|
}
|
|
527
528
|
/**
|
|
@@ -532,8 +533,8 @@ class E {
|
|
|
532
533
|
* @param {number} scale - The scale factor.
|
|
533
534
|
* @returns {void}
|
|
534
535
|
*/
|
|
535
|
-
scaleElement(t,
|
|
536
|
-
const s = this.elementScaler.transform(t,
|
|
536
|
+
scaleElement(t, n, e) {
|
|
537
|
+
const s = this.elementScaler.transform(t, n, e);
|
|
537
538
|
this.center(s.width, s.height);
|
|
538
539
|
}
|
|
539
540
|
/**
|
|
@@ -543,28 +544,28 @@ class E {
|
|
|
543
544
|
* @param {number} [height] - Height of the scaled element.
|
|
544
545
|
* @returns {void}
|
|
545
546
|
*/
|
|
546
|
-
center(t,
|
|
547
|
-
const
|
|
548
|
-
t = t || o.width,
|
|
547
|
+
center(t, n) {
|
|
548
|
+
const e = this.elementScaler, s = e.containerSize, o = e.elementBoundingBox, r = this.delta;
|
|
549
|
+
t = t || o.width, n = n || o.height;
|
|
549
550
|
let c, a;
|
|
550
|
-
const
|
|
551
|
-
if (t <
|
|
552
|
-
c =
|
|
551
|
+
const p = s.width;
|
|
552
|
+
if (t < p)
|
|
553
|
+
c = p / 2 - t / 2, c = c > 0 ? c : 0;
|
|
553
554
|
else {
|
|
554
555
|
c = r.x;
|
|
555
556
|
const u = t + r.x;
|
|
556
|
-
u <
|
|
557
|
+
u < p && (c = u + (p - u) - t), r.x > 0 && (c = 0);
|
|
557
558
|
}
|
|
558
|
-
const
|
|
559
|
-
if (
|
|
560
|
-
a =
|
|
559
|
+
const d = s.height;
|
|
560
|
+
if (n < d)
|
|
561
|
+
a = d / 2 - n / 2, a = a > 0 ? a : 0;
|
|
561
562
|
else {
|
|
562
563
|
a = r.y;
|
|
563
|
-
const u =
|
|
564
|
-
u <
|
|
564
|
+
const u = n + r.y;
|
|
565
|
+
u < d && (a = u + (d - u) - n), r.y > 0 && (a = 0);
|
|
565
566
|
}
|
|
566
|
-
const
|
|
567
|
-
|
|
567
|
+
const m = e.element.style;
|
|
568
|
+
m.left = c + "px", m.top = a + "px", this.delta = { x: c, y: a };
|
|
568
569
|
}
|
|
569
570
|
/**
|
|
570
571
|
* Updates the current scale (zoom) value based on scroll delta.
|
|
@@ -573,8 +574,8 @@ class E {
|
|
|
573
574
|
* @returns {number} The updated scale factor.
|
|
574
575
|
*/
|
|
575
576
|
updateScale(t) {
|
|
576
|
-
let
|
|
577
|
-
return t !== 0 && (
|
|
577
|
+
let n = this.scale;
|
|
578
|
+
return t !== 0 && (n = t > 0 ? this.scale *= 1.05 : this.scale /= 1.05), n <= this.minScale && (this.scale = this.minScale), this.scale;
|
|
578
579
|
}
|
|
579
580
|
/**
|
|
580
581
|
* Returns the pointer position relative to the container.
|
|
@@ -582,10 +583,10 @@ class E {
|
|
|
582
583
|
* @returns {{x: number, y: number}} The pointer coordinates.
|
|
583
584
|
*/
|
|
584
585
|
getPointerPosition() {
|
|
585
|
-
const t = this.elementScaler.containerSize,
|
|
586
|
+
const t = this.elementScaler.containerSize, n = this.events.pointer;
|
|
586
587
|
return {
|
|
587
|
-
x:
|
|
588
|
-
y:
|
|
588
|
+
x: n.x - t.left,
|
|
589
|
+
y: n.y - t.top
|
|
589
590
|
};
|
|
590
591
|
}
|
|
591
592
|
/**
|
|
@@ -595,10 +596,10 @@ class E {
|
|
|
595
596
|
* @returns {void}
|
|
596
597
|
*/
|
|
597
598
|
pointerDown(t) {
|
|
598
|
-
const
|
|
599
|
+
const n = this.delta, e = this.getPointerPosition();
|
|
599
600
|
this.start = {
|
|
600
|
-
x:
|
|
601
|
-
y:
|
|
601
|
+
x: e.x - n.x,
|
|
602
|
+
y: e.y - n.y
|
|
602
603
|
}, this.panning = !0;
|
|
603
604
|
}
|
|
604
605
|
/**
|
|
@@ -610,8 +611,8 @@ class E {
|
|
|
610
611
|
pointerMove(t) {
|
|
611
612
|
if (t.preventDefault(), !this.panning)
|
|
612
613
|
return;
|
|
613
|
-
const
|
|
614
|
-
|
|
614
|
+
const n = this.getPointerPosition(), e = this.delta, s = this.start;
|
|
615
|
+
e.x = n.x - s.x, e.y = n.y - s.y, this.scaleElement(e.x, e.y, this.scale);
|
|
615
616
|
}
|
|
616
617
|
/**
|
|
617
618
|
* Called when the user releases the pointer (mouse/touch).
|
|
@@ -637,11 +638,11 @@ class E {
|
|
|
637
638
|
* @param {number} delta - Positive = zoom in, negative = zoom out.
|
|
638
639
|
* @returns {void}
|
|
639
640
|
*/
|
|
640
|
-
pinch(t,
|
|
641
|
-
const
|
|
641
|
+
pinch(t, n) {
|
|
642
|
+
const e = this.getOffset(t);
|
|
642
643
|
t.preventDefault();
|
|
643
|
-
const s = this.updateScale(
|
|
644
|
-
r.x = o.x -
|
|
644
|
+
const s = this.updateScale(n), o = this.getPointerPosition(), r = this.delta;
|
|
645
|
+
r.x = o.x - e.x * s, r.y = o.y - e.y * s, this.scaleElement(r.x, r.y, s);
|
|
645
646
|
}
|
|
646
647
|
}
|
|
647
648
|
export {
|
package/dist/index.es.js
CHANGED
|
@@ -1,163 +1,164 @@
|
|
|
1
|
-
import { B as
|
|
2
|
-
import { B as
|
|
3
|
-
import { C as
|
|
4
|
-
import { V as
|
|
5
|
-
import { Icons as
|
|
6
|
-
import { A as O, B as
|
|
7
|
-
import { A as
|
|
8
|
-
import { B as
|
|
9
|
-
import { B as
|
|
10
|
-
import { B as
|
|
11
|
-
import { A as
|
|
12
|
-
import { B as
|
|
13
|
-
import { F as
|
|
1
|
+
import { B as e, C as o, b as t, F as r, a as n, L as l, P as i, R as p, S as u, c as m, T as d } from "./tooltip-Dn8TxE9o.js";
|
|
2
|
+
import { B as g, I as C, L as T } from "./buttons-Cm9etaEG.js";
|
|
3
|
+
import { C as D, d as I, D as S, c as B, E as P, F, H as M, I as k, M as N, N as f, P as v, R as x, T as y, a as h, b as W, U as H, W as L } from "./inputs-CMjx5-IX.js";
|
|
4
|
+
import { V as w, a as U } from "./veil-D4dRxILB.js";
|
|
5
|
+
import { Icons as E } from "./icons.es.js";
|
|
6
|
+
import { A as O, B as V, C as j, t as q, E as z, v as J, w as _, x as K, D as Q, j as X, k as Y, H as Z, G as $, s as aa, c as sa, a as ea, b as oa, I as ta, i as ra, g as na, e as la, h as ia, F as pa, d as ua, f as ma, u as da, M as ca, l as ga, N as Ca, P as Ta, p as ba, q as Da, S as Ia, n as Sa, o as Ba, T as Pa, y as Fa, z as Ma, m as ka, r as Na } from "./empty-state-CWXZVNA5.js";
|
|
7
|
+
import { A as va, b as xa, C as ya, D as ha, a as Wa, F as Ha, M as La, P as Aa, c as wa, g as Ua, p as Ra } from "./calendar-DQXME-2u.js";
|
|
8
|
+
import { B as Ga, p as Oa, C as Va, j as ja, D as qa, m as za, k as Ja, H as _a, I as Ka, N as Qa, O as Xa, P as Ya, S as Za, n as $a, o as as, t as ss, s as es, q as os, r as ts, T as rs, l as ns, U as ls, W as is, f as ps, h as us, i as ms, c as ds, d as cs, b as gs, e as Cs, a as Ts, g as bs } from "./signature-panel-CJVWNEzI.js";
|
|
9
|
+
import { B as Is, I as Ss, M as Bs, d as Ps, e as Fs, g as Ms, N as ks, b as Ns, a as fs, f as vs, P as xs, c as ys, S as hs, T as Ws } from "./mobile-nav-wrapper-Dj67Pb8l.js";
|
|
10
|
+
import { B as Ls, a as As, C as ws, F as Us, b as Rs, c as Es, M as Gs, P as Os, S as Vs } from "./sidebar-menu-page-BVryQj2Z.js";
|
|
11
|
+
import { A as qs, F as zs, M as Js, a as _s, T as Ks } from "./aside-template-McEj_Gxc.js";
|
|
12
|
+
import { B as Xs } from "./bside-template-Du2m3rsE.js";
|
|
13
|
+
import { F as Zs, I as $s, c as ae } from "./image-scaler-BQ7WdtlV.js";
|
|
14
14
|
export {
|
|
15
15
|
O as Alert,
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
16
|
+
qs as AsideTemplate,
|
|
17
|
+
va as Avatar,
|
|
18
|
+
Ga as BackButton,
|
|
19
|
+
Is as Backdrop,
|
|
20
|
+
e as Badge,
|
|
21
|
+
Ls as BasicPage,
|
|
22
|
+
As as BlankPage,
|
|
23
|
+
V as Breadcrumb,
|
|
24
|
+
Xs as BsideTemplate,
|
|
25
|
+
g as Button,
|
|
26
26
|
Oa as ButtonTab,
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
27
|
+
xa as Calendar,
|
|
28
|
+
ya as CalendarCells,
|
|
29
|
+
o as Card,
|
|
30
|
+
ws as CenterPage,
|
|
31
|
+
D as Checkbox,
|
|
32
|
+
Va as CheckboxCol,
|
|
33
|
+
t as CircleGraph,
|
|
34
|
+
I as ColorInput,
|
|
35
|
+
j as ColumnRow,
|
|
36
|
+
q as Combobox,
|
|
37
|
+
z as Confirmation,
|
|
38
|
+
J as CountDisplay,
|
|
39
|
+
_ as Counter,
|
|
40
|
+
ja as DataTable,
|
|
41
|
+
qa as DataTableBody,
|
|
42
|
+
S as DateInput,
|
|
43
|
+
K as DatePicker,
|
|
44
|
+
B as DateTimeInput,
|
|
45
|
+
ha as DayCell,
|
|
46
|
+
Wa as DayHeader,
|
|
47
|
+
Q as DelayComponent,
|
|
48
|
+
X as DetailBody,
|
|
49
|
+
Y as DetailSection,
|
|
50
|
+
Z as Dialog,
|
|
51
|
+
$ as DialogContainer,
|
|
52
|
+
za as DockableOverlay,
|
|
53
|
+
aa as DotsIndicator,
|
|
54
|
+
sa as Dropdown,
|
|
55
55
|
ea as DropdownItem,
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
56
|
+
oa as DropdownMenu,
|
|
57
|
+
Ja as DynamicDataTable,
|
|
58
|
+
P as EmailInput,
|
|
59
59
|
ta as EmptyState,
|
|
60
60
|
r as Fieldset,
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
pa as
|
|
68
|
-
ua as
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
ga as
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
ba as
|
|
115
|
-
|
|
116
|
-
Za as
|
|
117
|
-
$a as
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
Ia as
|
|
125
|
-
Sa as
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
Pa as
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
w as
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
61
|
+
F as FileInput,
|
|
62
|
+
ra as Form,
|
|
63
|
+
na as FormControl,
|
|
64
|
+
la as FormDescription,
|
|
65
|
+
ia as FormField,
|
|
66
|
+
n as FormGroup,
|
|
67
|
+
pa as FormItem,
|
|
68
|
+
ua as FormLabel,
|
|
69
|
+
ma as FormMessage,
|
|
70
|
+
Zs as Format,
|
|
71
|
+
Ha as FormatDate,
|
|
72
|
+
Us as FullContainPage,
|
|
73
|
+
Rs as FullPage,
|
|
74
|
+
zs as FullTemplate,
|
|
75
|
+
Es as FullscreenPage,
|
|
76
|
+
_a as HeaderCol,
|
|
77
|
+
M as HiddenInput,
|
|
78
|
+
C as Icon,
|
|
79
|
+
E as Icons,
|
|
80
|
+
$s as ImageScaler,
|
|
81
|
+
Ss as InlineNavigation,
|
|
82
|
+
Ka as InlineOverlay,
|
|
83
|
+
k as Input,
|
|
84
|
+
l as Legend,
|
|
85
|
+
T as LoadingButton,
|
|
86
|
+
Js as MainColumn,
|
|
87
|
+
Bs as MainLink,
|
|
88
|
+
Gs as MainSection,
|
|
89
|
+
da as MinusButton,
|
|
90
|
+
Ps as MobileNavButton,
|
|
91
|
+
Fs as MobileNavWrapper,
|
|
92
|
+
ca as Modal,
|
|
93
|
+
La as MonthCalendar,
|
|
94
|
+
N as MonthInput,
|
|
95
|
+
Ms as NavButton,
|
|
96
|
+
ks as NavButtonLink,
|
|
97
|
+
Ns as Navigation,
|
|
98
|
+
fs as NavigationGroup,
|
|
99
|
+
Qa as NavigationMenu,
|
|
100
|
+
vs as NavigationPopover,
|
|
101
|
+
ga as Notification,
|
|
102
|
+
Ca as NotificationContainer,
|
|
103
|
+
f as NumberInput,
|
|
104
|
+
Xa as Overlay,
|
|
105
|
+
Os as Page,
|
|
106
|
+
Ya as Panel,
|
|
107
|
+
v as PasswordInput,
|
|
108
|
+
Ta as PlusButton,
|
|
109
|
+
Aa as PopOver,
|
|
110
|
+
xs as PopupHeader,
|
|
111
|
+
i as ProgressBar,
|
|
112
|
+
x as Radio,
|
|
113
|
+
p as RangeSlider,
|
|
114
|
+
ba as STATUSES,
|
|
115
|
+
Da as STATUS_CLASS,
|
|
116
|
+
Za as ScrollableDataTable,
|
|
117
|
+
$a as SearchDropdown,
|
|
118
|
+
as as SearchInput,
|
|
119
|
+
u as Select,
|
|
120
|
+
ys as SidebarMenu,
|
|
121
|
+
Vs as SidebarMenuPage,
|
|
122
|
+
ss as SignaturePanel,
|
|
123
|
+
m as Skeleton,
|
|
124
|
+
Ia as SplitRow,
|
|
125
|
+
Sa as StaticStatusIndicator,
|
|
126
|
+
Ba as StatusIndicator,
|
|
127
|
+
hs as SubNavigation,
|
|
128
|
+
es as Tab,
|
|
129
|
+
os as TabGroup,
|
|
130
|
+
ts as TabNavigation,
|
|
131
|
+
rs as TableHeader,
|
|
132
|
+
y as TelInput,
|
|
133
|
+
_s as Template,
|
|
134
|
+
h as Textarea,
|
|
135
|
+
Pa as ThemeToggle,
|
|
136
|
+
Fa as TimeFrame,
|
|
137
|
+
W as TimeInput,
|
|
138
|
+
Ma as TimePicker,
|
|
139
|
+
Ws as TitleHeader,
|
|
140
|
+
ka as Toggle,
|
|
141
|
+
d as Tooltip,
|
|
142
|
+
Ks as TopBar,
|
|
143
|
+
H as UrlInput,
|
|
144
|
+
ns as UserList,
|
|
145
|
+
ls as UserListItem,
|
|
146
|
+
w as Veil,
|
|
147
|
+
U as VeilJot,
|
|
148
|
+
is as WeekCalendar,
|
|
149
|
+
ps as WeekCell,
|
|
150
|
+
us as WeekCells,
|
|
151
|
+
ms as WeekHeader,
|
|
152
|
+
L as WeekInput,
|
|
153
|
+
wa as addTime,
|
|
154
|
+
ds as calculateWeekNumber,
|
|
155
|
+
ae as createWatcherCallback,
|
|
156
|
+
cs as generateWeeks,
|
|
157
|
+
gs as getDateFromWeek,
|
|
158
|
+
Cs as getMonthDays,
|
|
159
|
+
Ts as getNextMonthDays,
|
|
160
|
+
Ua as getPosition,
|
|
161
|
+
bs as getPreviousMonthDays,
|
|
162
|
+
Na as getStatusClass,
|
|
163
|
+
Ra as pad
|
|
163
164
|
};
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import { Span as
|
|
1
|
+
import { Span as g, Div as o, Legend as b, Fieldset as x, UseParent as u, Input as C } from "@base-framework/atoms";
|
|
2
2
|
import { Atom as s, Html as h } from "@base-framework/base";
|
|
3
3
|
import { a as d } from "./veil-D4dRxILB.js";
|
|
4
|
-
import { f as
|
|
4
|
+
import { f as y, e as p, g as k } from "./inputs-CMjx5-IX.js";
|
|
5
5
|
const a = {
|
|
6
6
|
gray: {
|
|
7
7
|
backgroundColor: "bg-gray-50",
|
|
@@ -79,30 +79,51 @@ const a = {
|
|
|
79
79
|
ringColor: "ring-background"
|
|
80
80
|
}
|
|
81
81
|
}, w = (t) => a[t] || a.gray, $ = (t) => {
|
|
82
|
-
const { backgroundColor:
|
|
83
|
-
return `inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors ${
|
|
84
|
-
}, T = s((t,
|
|
85
|
-
const
|
|
86
|
-
return
|
|
87
|
-
}), L = s((t,
|
|
88
|
-
const
|
|
89
|
-
return t.hover && (t.class += " hover:shadow-lg hover:bg-muted/50"),
|
|
82
|
+
const { backgroundColor: r, textColor: e, ringColor: l } = w(t);
|
|
83
|
+
return `inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors ${r} ${e} ${l}`;
|
|
84
|
+
}, T = s((t, r) => {
|
|
85
|
+
const e = $(t == null ? void 0 : t.type);
|
|
86
|
+
return g({ ...t, class: e }, r);
|
|
87
|
+
}), L = s((t, r) => {
|
|
88
|
+
const e = t.margin ?? "my-5 mx-5", l = t.padding ?? "p-4";
|
|
89
|
+
return t.hover && (t.class += " hover:shadow-lg hover:bg-muted/50"), o({
|
|
90
90
|
...t,
|
|
91
|
-
class: `rounded-lg border bg-card text-card-foreground shadow-md min-w-[120px] min-h-[80px] ${
|
|
92
|
-
},
|
|
93
|
-
}), v = s((t,
|
|
91
|
+
class: `rounded-lg border bg-card text-card-foreground shadow-md min-w-[120px] min-h-[80px] ${e} ${l} ${t.class || ""}`
|
|
92
|
+
}, r);
|
|
93
|
+
}), v = s((t, r) => b({
|
|
94
94
|
...t,
|
|
95
95
|
class: ` font-medium bg-background -mt-4 -mx-1 px-2 py-2 ${t.class || ""}`
|
|
96
|
-
},
|
|
97
|
-
const
|
|
96
|
+
}, r)), G = s((t, r) => {
|
|
97
|
+
const e = t.border === "full" ? "border rounded-md" : "border-t";
|
|
98
98
|
return x({
|
|
99
99
|
...t,
|
|
100
|
-
class: `p-6 ${
|
|
100
|
+
class: `p-6 ${e} ${t.class || ""}`
|
|
101
101
|
}, [
|
|
102
102
|
t.legend && v(t.legend),
|
|
103
|
-
|
|
103
|
+
o({ class: "flex flex-auto flex-col space-y-6" }, r)
|
|
104
104
|
]);
|
|
105
|
-
}),
|
|
105
|
+
}), I = s((t, r) => {
|
|
106
|
+
var e;
|
|
107
|
+
return o({
|
|
108
|
+
...t,
|
|
109
|
+
class: `flex flex-col
|
|
110
|
+
sm:flex-row sm:items-center
|
|
111
|
+
${t.class || ""}`
|
|
112
|
+
}, [
|
|
113
|
+
// Label container: 1/4 width on sm+, full-width on mobile
|
|
114
|
+
t.label && o({
|
|
115
|
+
...t.labelProps,
|
|
116
|
+
class: `w-full
|
|
117
|
+
sm:w-1/4
|
|
118
|
+
text-sm font-medium
|
|
119
|
+
${((e = t.labelProps) == null ? void 0 : e.class) || ""}`
|
|
120
|
+
}, [t.label]),
|
|
121
|
+
// Controls container: grows to fill remaining space, spacing between items
|
|
122
|
+
o({
|
|
123
|
+
class: "w-full sm:flex-1 flex flex-col space-y-4"
|
|
124
|
+
}, r)
|
|
125
|
+
]);
|
|
126
|
+
}), R = d(
|
|
106
127
|
{
|
|
107
128
|
/**
|
|
108
129
|
* This will create the initial state of the RangeSlider.
|
|
@@ -132,17 +153,17 @@ const a = {
|
|
|
132
153
|
* @returns {object}
|
|
133
154
|
*/
|
|
134
155
|
render() {
|
|
135
|
-
return
|
|
156
|
+
return o({ class: "relative w-full h-4 flex items-center" }, [
|
|
136
157
|
// Track
|
|
137
|
-
|
|
158
|
+
o({ class: "absolute h-2 w-full rounded-full bg-muted" }),
|
|
138
159
|
u(({ state: t }) => [
|
|
139
160
|
// Filled Track
|
|
140
|
-
|
|
161
|
+
o({
|
|
141
162
|
class: "absolute h-2 bg-primary rounded-full",
|
|
142
163
|
style: ["width: [[filledPercentage]]%", t]
|
|
143
164
|
}),
|
|
144
165
|
// Thumb
|
|
145
|
-
|
|
166
|
+
o({
|
|
146
167
|
class: `
|
|
147
168
|
absolute block h-5 w-5 rounded-full border-2 border-primary bg-background
|
|
148
169
|
ring-offset-background transition-colors focus-visible:outline-none
|
|
@@ -160,35 +181,35 @@ const a = {
|
|
|
160
181
|
// Incorporate your new classes here
|
|
161
182
|
class: `
|
|
162
183
|
absolute w-full h-full opacity-0 cursor-pointer
|
|
163
|
-
${p}
|
|
164
184
|
${y}
|
|
185
|
+
${p}
|
|
165
186
|
${this.class || ""}
|
|
166
187
|
`.trim(),
|
|
167
188
|
bind: this.bind,
|
|
168
|
-
input: (
|
|
169
|
-
const
|
|
170
|
-
this.state.value =
|
|
189
|
+
input: (r) => {
|
|
190
|
+
const e = Number(r.target.value);
|
|
191
|
+
this.state.value = e, this.state.filledPercentage = this.getFillPercentage(e), typeof this.change == "function" && this.change(e);
|
|
171
192
|
}
|
|
172
193
|
})
|
|
173
194
|
])
|
|
174
195
|
]);
|
|
175
196
|
}
|
|
176
197
|
}
|
|
177
|
-
),
|
|
198
|
+
), O = s((t) => ({
|
|
178
199
|
tag: "select",
|
|
179
|
-
onCreated(
|
|
180
|
-
t.options && h.setupSelectOptions(
|
|
200
|
+
onCreated(r) {
|
|
201
|
+
t.options && h.setupSelectOptions(r, t.options);
|
|
181
202
|
},
|
|
182
203
|
...t,
|
|
183
204
|
class: `${k} ${t.class || ""}`.trim()
|
|
184
|
-
})), P = (t) => !t || isNaN(t) ? null : t, i = (t,
|
|
185
|
-
const
|
|
205
|
+
})), P = (t) => !t || isNaN(t) ? null : t, i = (t, r) => {
|
|
206
|
+
const e = t, l = 16, n = 2 * Math.PI * l, m = e / 100 * n, f = `
|
|
186
207
|
<svg class="w-40 h-40 mx-auto" viewBox="0 0 36 36" xmlns="http://www.w3.org/2000/svg">
|
|
187
208
|
<!-- Background Circle -->
|
|
188
209
|
<circle
|
|
189
210
|
cx="18"
|
|
190
211
|
cy="18"
|
|
191
|
-
r="${
|
|
212
|
+
r="${l}"
|
|
192
213
|
fill="none"
|
|
193
214
|
stroke="currentColor"
|
|
194
215
|
stroke-width="4"
|
|
@@ -199,7 +220,7 @@ const a = {
|
|
|
199
220
|
<circle
|
|
200
221
|
cx="18"
|
|
201
222
|
cy="18"
|
|
202
|
-
r="${
|
|
223
|
+
r="${l}"
|
|
203
224
|
fill="none"
|
|
204
225
|
stroke="currentColor"
|
|
205
226
|
stroke-width="4"
|
|
@@ -207,7 +228,7 @@ const a = {
|
|
|
207
228
|
stroke-dasharray="${n}"
|
|
208
229
|
stroke-dashoffset="${n - m}"
|
|
209
230
|
stroke-linecap="round"
|
|
210
|
-
class="${
|
|
231
|
+
class="${r}"
|
|
211
232
|
/>
|
|
212
233
|
<!-- Percentage Text -->
|
|
213
234
|
<text
|
|
@@ -216,27 +237,27 @@ const a = {
|
|
|
216
237
|
class="text-[0.25em] font-medium fill-primary"
|
|
217
238
|
text-anchor="middle"
|
|
218
239
|
dominant-baseline="middle">
|
|
219
|
-
${
|
|
240
|
+
${e}%
|
|
220
241
|
</text>
|
|
221
242
|
</svg>
|
|
222
243
|
`;
|
|
223
|
-
return
|
|
244
|
+
return o({
|
|
224
245
|
class: "circle-graph text-inherit",
|
|
225
|
-
html:
|
|
246
|
+
html: f
|
|
226
247
|
});
|
|
227
|
-
},
|
|
228
|
-
const
|
|
229
|
-
return
|
|
248
|
+
}, V = s((t) => {
|
|
249
|
+
const r = t.progress || 0, e = t.class || "", l = i(r, e);
|
|
250
|
+
return o({
|
|
230
251
|
class: "circle-graph-wrap",
|
|
231
252
|
onSet: [
|
|
232
253
|
t.prop,
|
|
233
|
-
(n) => (n = P(n), n ? i(n,
|
|
254
|
+
(n) => (n = P(n), n ? i(n, e) : l)
|
|
234
255
|
]
|
|
235
|
-
}, [
|
|
236
|
-
}), S = () => u(({ state: t }) =>
|
|
256
|
+
}, [l]);
|
|
257
|
+
}), S = () => u(({ state: t }) => o({
|
|
237
258
|
class: "absolute h-full rounded-full bg-primary transition-all duration-300",
|
|
238
259
|
style: ["width: [[progress]]%;", t]
|
|
239
|
-
})),
|
|
260
|
+
})), D = d(
|
|
240
261
|
{
|
|
241
262
|
/**
|
|
242
263
|
* This will render the progress bar component.
|
|
@@ -244,7 +265,7 @@ const a = {
|
|
|
244
265
|
* @returns {object}
|
|
245
266
|
*/
|
|
246
267
|
render() {
|
|
247
|
-
return
|
|
268
|
+
return o({ class: "relative w-full h-4 rounded-full bg-muted" }, [
|
|
248
269
|
S()
|
|
249
270
|
]);
|
|
250
271
|
},
|
|
@@ -274,8 +295,8 @@ const a = {
|
|
|
274
295
|
*/
|
|
275
296
|
uploadProgress(t) {
|
|
276
297
|
if (t.lengthComputable) {
|
|
277
|
-
const
|
|
278
|
-
this.set(
|
|
298
|
+
const e = Math.round(t.loaded * 100 / t.total);
|
|
299
|
+
this.set(e);
|
|
279
300
|
}
|
|
280
301
|
},
|
|
281
302
|
/**
|
|
@@ -288,9 +309,9 @@ const a = {
|
|
|
288
309
|
t < 0 && (t = 0), t > 100 && (t = 100), this.state.progress = t;
|
|
289
310
|
}
|
|
290
311
|
}
|
|
291
|
-
),
|
|
292
|
-
class: `bg-muted animate-pulse ${
|
|
293
|
-
}),
|
|
312
|
+
), M = ({ class: t, shape: r = "rectangle", width: e = "w-full", height: l = "h-4" }) => o({
|
|
313
|
+
class: `bg-muted animate-pulse ${e} ${l} ${r === "circle" ? "rounded-full" : "rounded-md"} ${t || ""}`
|
|
314
|
+
}), c = {
|
|
294
315
|
top: "bottom-full left-1/2 transform -translate-x-1/2 mb-2",
|
|
295
316
|
"top-right": "bottom-full left-full transform -translate-x-1 mb-2",
|
|
296
317
|
"top-left": "bottom-full right-full transform translate-x-1 mb-2",
|
|
@@ -299,28 +320,29 @@ const a = {
|
|
|
299
320
|
"bottom-left": "top-full right-full transform translate-x-1 mt-2",
|
|
300
321
|
left: "top-1/2 right-full transform -translate-y-1/2 mr-2",
|
|
301
322
|
right: "top-1/2 left-full transform -translate-y-1/2 ml-2"
|
|
302
|
-
}, E = (t) =>
|
|
303
|
-
const
|
|
304
|
-
return Array.isArray(
|
|
305
|
-
...
|
|
323
|
+
}, E = (t) => c[t] || c.top, _ = s(({ position: t = "top", content: r }, e) => {
|
|
324
|
+
const l = E(t);
|
|
325
|
+
return Array.isArray(e) === !1 && (e = [e]), o({ class: "relative group inline-block" }, [
|
|
326
|
+
...e,
|
|
306
327
|
// Tooltip box
|
|
307
|
-
|
|
328
|
+
g({
|
|
308
329
|
class: `
|
|
309
330
|
absolute z-20 px-2 py-1 border text-sm bg-background rounded shadow-md opacity-0 whitespace-nowrap
|
|
310
|
-
group-hover:opacity-100 transition-opacity duration-200 ${
|
|
331
|
+
group-hover:opacity-100 transition-opacity duration-200 ${l} pointer-events-none
|
|
311
332
|
`
|
|
312
|
-
},
|
|
333
|
+
}, r)
|
|
313
334
|
]);
|
|
314
335
|
});
|
|
315
336
|
export {
|
|
316
337
|
T as B,
|
|
317
338
|
L as C,
|
|
318
|
-
|
|
339
|
+
G as F,
|
|
319
340
|
v as L,
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
|
|
341
|
+
D as P,
|
|
342
|
+
R,
|
|
343
|
+
O as S,
|
|
344
|
+
_ as T,
|
|
345
|
+
I as a,
|
|
346
|
+
V as b,
|
|
347
|
+
M as c
|
|
326
348
|
};
|
|
@@ -2,6 +2,7 @@ export * from "./badges/badge.js";
|
|
|
2
2
|
export * from "./buttons/buttons.js";
|
|
3
3
|
export * from "./cards/card.js";
|
|
4
4
|
export * from "./form/fieldset.js";
|
|
5
|
+
export * from "./form/form-group.js";
|
|
5
6
|
export * from "./form/inputs/checkbox.js";
|
|
6
7
|
export * from "./form/inputs/inputs.js";
|
|
7
8
|
export * from "./form/inputs/range-slider.js";
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Creates a responsive form-group: label on the left, controls on the right.
|
|
3
|
+
*
|
|
4
|
+
* @param {object} props
|
|
5
|
+
* @param {string|object} props.label
|
|
6
|
+
* @param {object} [props.labelProps] any extra props for the label container
|
|
7
|
+
* @param {string} [props.class] extra classes for the outer container
|
|
8
|
+
* @param {array} children form controls (inputs, selects, etc)
|
|
9
|
+
* @returns {object}
|
|
10
|
+
*/
|
|
11
|
+
export const FormGroup: Function;
|
|
12
|
+
export default FormGroup;
|
package/dist/utils.es.js
CHANGED
package/package.json
CHANGED