@uva-glass/component-library 3.50.7 → 3.50.8
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/assets/Slider.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.
|
|
1
|
+
._slider_wrapper_8wxrb_1{align-items:center;display:flex;gap:1rem;width:100%}._slider_button_8wxrb_8{align-items:center;appearance:none;aspect-ratio:1 / 1;background:none;border:1px solid transparent;border-radius:.25rem;color:var(--color-uva-black);cursor:pointer;display:flex;height:2rem;justify-content:center;width:2rem}._slider_button_8wxrb_8:focus-visible{outline:.125rem dotted var(--color-navy-600);outline-offset:.125rem}._slider_button_8wxrb_8:hover{border-color:var(--color-grey-700)}._slider_button_8wxrb_8:disabled,._slider_button_8wxrb_8:disabled:hover{border:none;cursor:not-allowed}._slider_trackwrapper_8wxrb_38{display:flex;position:relative;width:100%}._slider_balloon_8wxrb_44{color:var(--color-uva-black);font-weight:var(--semibold);position:absolute;text-align:center;top:-1.8125rem;white-space:nowrap}._slider_input_8wxrb_53{appearance:none;background:var(--color-grey-400);flex-grow:1;height:.25rem}._slider_input_8wxrb_53:focus-visible{outline:.125rem dotted var(--color-navy-600);outline-offset:.125rem}._slider_input_8wxrb_53:disabled{cursor:not-allowed}._slider_input_8wxrb_53::-webkit-slider-runnable-track{appearance:none;color:var(--color-navy-600);cursor:pointer;height:2rem;margin-top:-.125rem}._slider_input_8wxrb_53:disabled::-webkit-slider-runnable-track{cursor:not-allowed}._slider_input_8wxrb_53::-webkit-slider-thumb{appearance:none;background:var(--color-uva-white);border:2px solid var(--color-navy-600);border-radius:.125rem;cursor:pointer;height:var(--thumb-size);margin-top:calc(.5rem + 1px);position:relative;width:var(--thumb-size)}._slider_input_8wxrb_53:disabled::-webkit-slider-thumb,._slider_input_8wxrb_53:disabled:hover::-webkit-slider-thumb{background:var(--color-grey-700);border:2px solid var(--color-grey-700);cursor:not-allowed}._slider_input_8wxrb_53::-moz-range-thumb{appearance:none;background:var(--color-uva-white);border:2px solid var(--color-navy-600);border-radius:.125rem;cursor:pointer;height:var(--thumb-size);margin-top:calc(-.25rem - 1px);position:relative;width:var(--thumb-size)}._slider_input_8wxrb_53:disabled::-moz-range-thumb,._slider_input_8wxrb_53:hover:disabled::-moz-range-thumb{background:var(--color-grey-700);border:2px solid var(--color-grey-700);cursor:not-allowed}._slider_input_8wxrb_53::-ms-thumb{appearance:none;background:var(--color-uva-white);border:2px solid var(--color-navy-600);border-radius:.125rem;cursor:pointer;height:var(--thumb-size);margin-top:calc(-.25rem - 1px);position:relative;width:var(--thumb-size)}._slider_input_8wxrb_53:disabled::-ms-thumb,._slider_input_8wxrb_53:hover:disabled::-ms-thumb{background:var(--color-grey-700);border:2px solid var(--color-grey-700);cursor:not-allowed}._slider_input_8wxrb_53::-webkit-slider-thumb:hover{background:var(--color-navy-200);border:2px solid var(--color-navy-800)}._slider_input_8wxrb_53::-moz-range-thumb:hover{background:var(--color-navy-200);border:2px solid var(--color-navy-800)}._slider_input_8wxrb_53::-ms-thumb:hover{background:var(--color-navy-200);border:2px solid var(--color-navy-800)}._slider_input_8wxrb_53::-moz-range-progress{background-color:var(--color-navy-600)}._slider_input_8wxrb_53::-moz-range-track{background-color:var(--color-grey-400)}._slider_input_8wxrb_53::-ms-fill-lower{background-color:var(--color-navy-600)}._slider_input_8wxrb_53::-ms-fill-upper{background-color:var(--color-grey-400)}
|
|
@@ -1,72 +1,72 @@
|
|
|
1
|
-
import { jsxs as
|
|
2
|
-
import { useState as
|
|
1
|
+
import { jsxs as g, jsx as a } from "react/jsx-runtime";
|
|
2
|
+
import { useState as x, useRef as m, useEffectEvent as z, useEffect as B } from "react";
|
|
3
3
|
import { c as H } from "../../clsx-OuTLNxxd.js";
|
|
4
|
-
import { Icon as
|
|
5
|
-
import '../../assets/Slider.css';const T = "
|
|
4
|
+
import { Icon as S } from "../Icon/Icon.js";
|
|
5
|
+
import '../../assets/Slider.css';const T = "_slider_wrapper_8wxrb_1", j = "_slider_button_8wxrb_8", C = "_slider_trackwrapper_8wxrb_38", D = "_slider_balloon_8wxrb_44", F = "_slider_input_8wxrb_53", l = {
|
|
6
6
|
slider_wrapper: T,
|
|
7
7
|
slider_button: j,
|
|
8
8
|
slider_trackwrapper: C,
|
|
9
9
|
slider_balloon: D,
|
|
10
10
|
slider_input: F
|
|
11
|
-
},
|
|
11
|
+
}, v = 0.5, I = 100, p = 16, U = 16, G = ({
|
|
12
12
|
min: t,
|
|
13
13
|
max: o,
|
|
14
14
|
value: i,
|
|
15
15
|
step: k = 1,
|
|
16
16
|
units: c,
|
|
17
|
-
navigationLabels:
|
|
17
|
+
navigationLabels: d,
|
|
18
18
|
disabled: s = !1,
|
|
19
|
-
onChange:
|
|
19
|
+
onChange: u
|
|
20
20
|
}) => {
|
|
21
|
-
const [n, f] =
|
|
22
|
-
const
|
|
23
|
-
|
|
24
|
-
},
|
|
25
|
-
const
|
|
26
|
-
f(
|
|
27
|
-
}, h = (
|
|
21
|
+
const [n, f] = x(i !== void 0 ? i : (t + o) * v), [E, V] = x(""), _ = m(null), b = m(null), w = m(null), N = (e) => {
|
|
22
|
+
const r = n + e * k;
|
|
23
|
+
r >= t && r <= o && (f(r), h(r), y(r), u && u(r));
|
|
24
|
+
}, P = (e) => {
|
|
25
|
+
const r = Number(e.target.value);
|
|
26
|
+
f(r), h(r), y(r), u && u(r);
|
|
27
|
+
}, h = (e) => {
|
|
28
28
|
if (!_.current) return;
|
|
29
|
-
const
|
|
29
|
+
const r = (e - t) / (o - t) * I;
|
|
30
30
|
s ? _.current.style.background = `linear-gradient(
|
|
31
31
|
to right,
|
|
32
32
|
var(--color-grey-700) 0%,
|
|
33
|
-
var(--color-grey-700) ${
|
|
34
|
-
var(--color-grey-400) ${
|
|
33
|
+
var(--color-grey-700) ${r}%,
|
|
34
|
+
var(--color-grey-400) ${r}%,
|
|
35
35
|
var(--color-grey-400) 100%)` : _.current.style.background = `linear-gradient(
|
|
36
36
|
to right,
|
|
37
37
|
var(--color-navy-600) 0%,
|
|
38
|
-
var(--color-navy-600) ${
|
|
39
|
-
var(--color-grey-400) ${
|
|
38
|
+
var(--color-navy-600) ${r}%,
|
|
39
|
+
var(--color-grey-400) ${r}%,
|
|
40
40
|
var(--color-grey-400) 100%)`;
|
|
41
|
-
}, y = (
|
|
42
|
-
if (
|
|
43
|
-
const
|
|
44
|
-
|
|
41
|
+
}, y = (e) => {
|
|
42
|
+
if (b.current && w.current) {
|
|
43
|
+
const r = w.current.clientWidth, $ = b.current.clientWidth - p, M = (e - t) / (o - t) * $ - (r - p) * v, W = Math.max(0, Math.min(M, $ - r + p * v));
|
|
44
|
+
V(`${W}px`);
|
|
45
45
|
}
|
|
46
|
-
},
|
|
47
|
-
f(
|
|
46
|
+
}, R = z((e) => {
|
|
47
|
+
f(e), h(e), y(e);
|
|
48
48
|
});
|
|
49
49
|
return B(() => {
|
|
50
|
-
i !== void 0 &&
|
|
51
|
-
}, [i, s]), /* @__PURE__ */
|
|
50
|
+
i !== void 0 && R(i);
|
|
51
|
+
}, [i, s]), /* @__PURE__ */ g("div", { className: l.slider_wrapper, children: [
|
|
52
52
|
/* @__PURE__ */ a(
|
|
53
53
|
"button",
|
|
54
54
|
{
|
|
55
55
|
type: "button",
|
|
56
56
|
className: l.slider_button,
|
|
57
57
|
onClick: () => N(-1),
|
|
58
|
-
"aria-label":
|
|
58
|
+
"aria-label": d?.decrease ? d.decrease : "Verlaag waarde",
|
|
59
59
|
disabled: s,
|
|
60
|
-
children: /* @__PURE__ */ a(
|
|
60
|
+
children: /* @__PURE__ */ a(S, { name: "Minus", size: 20 })
|
|
61
61
|
}
|
|
62
62
|
),
|
|
63
|
-
/* @__PURE__ */
|
|
64
|
-
/* @__PURE__ */
|
|
63
|
+
/* @__PURE__ */ g("div", { className: l.slider_trackwrapper, ref: b, children: [
|
|
64
|
+
/* @__PURE__ */ g(
|
|
65
65
|
"div",
|
|
66
66
|
{
|
|
67
67
|
className: H(l.slider_balloon, { [l["slider_balloon--disabled"]]: s }),
|
|
68
|
-
style: { left:
|
|
69
|
-
ref:
|
|
68
|
+
style: { left: E },
|
|
69
|
+
ref: w,
|
|
70
70
|
children: [
|
|
71
71
|
n,
|
|
72
72
|
c && /* @__PURE__ */ a("span", { className: l.slider_units, children: c })
|
|
@@ -82,7 +82,7 @@ import '../../assets/Slider.css';const T = "_slider_wrapper_euug7_1", j = "_slid
|
|
|
82
82
|
max: o,
|
|
83
83
|
step: k,
|
|
84
84
|
value: n,
|
|
85
|
-
onChange:
|
|
85
|
+
onChange: P,
|
|
86
86
|
ref: _,
|
|
87
87
|
style: { "--thumb-size": `${p / U}rem` },
|
|
88
88
|
"aria-valuemin": t,
|
|
@@ -100,9 +100,9 @@ import '../../assets/Slider.css';const T = "_slider_wrapper_euug7_1", j = "_slid
|
|
|
100
100
|
type: "button",
|
|
101
101
|
className: l.slider_button,
|
|
102
102
|
onClick: () => N(1),
|
|
103
|
-
"aria-label":
|
|
103
|
+
"aria-label": d?.increase ? d.increase : "Verhoog waarde",
|
|
104
104
|
disabled: s,
|
|
105
|
-
children: /* @__PURE__ */ a(
|
|
105
|
+
children: /* @__PURE__ */ a(S, { name: "Plus", size: 20 })
|
|
106
106
|
}
|
|
107
107
|
)
|
|
108
108
|
] });
|
package/package.json
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
"name": "@uva-glass/component-library",
|
|
3
3
|
"author": "Team Glass - Frontend vrienden",
|
|
4
4
|
"private": false,
|
|
5
|
-
"version": "3.50.
|
|
5
|
+
"version": "3.50.8",
|
|
6
6
|
"type": "module",
|
|
7
7
|
"main": "dist/index.js",
|
|
8
8
|
"types": "dist/index.d.ts",
|
|
@@ -52,7 +52,7 @@
|
|
|
52
52
|
"@react-types/dialog": "^3.5.22",
|
|
53
53
|
"@semantic-release/git": "^10.0.1",
|
|
54
54
|
"@semantic-release/gitlab": "^13.2.9",
|
|
55
|
-
"@semantic-release/npm": "^
|
|
55
|
+
"@semantic-release/npm": "^13.0.0",
|
|
56
56
|
"@storybook/addon-a11y": "^9.1.10",
|
|
57
57
|
"@storybook/addon-docs": "^9.1.10",
|
|
58
58
|
"@storybook/addon-links": "^9.1.10",
|
|
@@ -63,7 +63,7 @@
|
|
|
63
63
|
"@types/jest": "^30.0.0",
|
|
64
64
|
"@types/node": "^24.7.2",
|
|
65
65
|
"@types/react": "^19.2.2",
|
|
66
|
-
"@types/react-dom": "^19.2.
|
|
66
|
+
"@types/react-dom": "^19.2.2",
|
|
67
67
|
"@uva-glass/eslint-config": "^1.3.11",
|
|
68
68
|
"@uva-glass/stylelint-config": "^1.2.3",
|
|
69
69
|
"@vitejs/plugin-react": "^5.0.4",
|