@uva-glass/component-library 3.42.5 → 3.43.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.
|
@@ -1,22 +1,22 @@
|
|
|
1
|
-
import { jsxs as
|
|
1
|
+
import { jsxs as u, jsx as s } from "react/jsx-runtime";
|
|
2
2
|
import { c as k } from "../../clsx-OuTLNxxd.js";
|
|
3
|
-
import { useRef as v, useState as M, useEffect as
|
|
3
|
+
import { useRef as v, useState as M, useEffect as N } from "react";
|
|
4
4
|
import "../Accordion/Accordion.js";
|
|
5
5
|
import "../Buttons/Button.js";
|
|
6
6
|
import "../Buttons/LinkButton.js";
|
|
7
7
|
import "@react-aria/button";
|
|
8
8
|
import "../Checkbox/Checkbox.js";
|
|
9
|
-
import { CheckboxButtonBar as
|
|
9
|
+
import { CheckboxButtonBar as B } from "../CheckboxButtonBar/CheckboxButtonBar.js";
|
|
10
10
|
import "@react-aria/dialog";
|
|
11
11
|
import "@react-aria/focus";
|
|
12
12
|
import "@react-aria/overlays";
|
|
13
13
|
import "../OverlayCloseButton/OverlayCloseButton.js";
|
|
14
|
-
import { FeedbackBox as
|
|
14
|
+
import { FeedbackBox as D } from "../FeedbackBox/FeedbackBox.js";
|
|
15
15
|
import "../GridRow/GridRow.js";
|
|
16
16
|
import "../IconButton/IconButton.js";
|
|
17
17
|
import "../Input/Input.js";
|
|
18
18
|
import "../InputField/InputField.js";
|
|
19
|
-
import { Label as
|
|
19
|
+
import { Label as I } from "../Label/Label.js";
|
|
20
20
|
import "react-router";
|
|
21
21
|
import "../../TablePlugin-CAoOq8iA.js";
|
|
22
22
|
import "../RteEditor/Providers/LanguageProvider.js";
|
|
@@ -28,67 +28,67 @@ import "../SelectListbox/SelectListbox.js";
|
|
|
28
28
|
import "../SelectListbox/SelectProvider.js";
|
|
29
29
|
import "../Sortable/components/SortableItem.js";
|
|
30
30
|
import "../../SortableProvider-l8-7ClBJ.js";
|
|
31
|
-
import '../../assets/PeriodSelector.css';const
|
|
31
|
+
import '../../assets/PeriodSelector.css';const l = {
|
|
32
32
|
"period-selector__container": "_period-selector__container_1txwd_1",
|
|
33
33
|
"period-selector__container--label-left": "_period-selector__container--label-left_1txwd_6",
|
|
34
34
|
"period-selector__container--label-top": "_period-selector__container--label-top_1txwd_12",
|
|
35
35
|
"period-selector__selector-container": "_period-selector__selector-container_1txwd_18",
|
|
36
36
|
"period-selector__selector-row": "_period-selector__selector-row_1txwd_24"
|
|
37
|
-
},
|
|
37
|
+
}, f = 0, h = 1, S = 2, E = 3, j = 7, A = (c) => {
|
|
38
38
|
const n = [];
|
|
39
|
-
for (let o = 0; o <
|
|
40
|
-
n.push(
|
|
39
|
+
for (let o = 0; o < c.length; o += E)
|
|
40
|
+
n.push(c.slice(o, o + E));
|
|
41
41
|
return n;
|
|
42
|
-
},
|
|
43
|
-
maxPeriods:
|
|
42
|
+
}, _r = ({
|
|
43
|
+
maxPeriods: c = j,
|
|
44
44
|
defaultValues: n,
|
|
45
45
|
label: o,
|
|
46
46
|
labelPosition: b = "top",
|
|
47
|
-
required:
|
|
47
|
+
required: _ = !1,
|
|
48
48
|
notValidatedText: p = "",
|
|
49
49
|
onChange: x
|
|
50
50
|
}) => {
|
|
51
|
-
const g = Array.from({ length:
|
|
52
|
-
label:
|
|
51
|
+
const g = Array.from({ length: c }, (r, e) => e + 1), m = A(g), w = m.map((r, e) => r.map((t) => ({
|
|
52
|
+
label: t.toString(),
|
|
53
53
|
value: t.toString()
|
|
54
|
-
}))),
|
|
55
|
-
|
|
56
|
-
(
|
|
54
|
+
}))), i = v(
|
|
55
|
+
m.map(
|
|
56
|
+
(r) => r.reduce((e, t) => (n?.includes(t) && e.push(t), e), [])
|
|
57
57
|
)
|
|
58
|
-
), [R,
|
|
59
|
-
|
|
58
|
+
), [R, a] = M([]), d = (r) => r[f].length !== 0 || r[h].length !== 0 ? [S] : r[S].length !== 0 ? [f, h] : [], P = (r, e) => {
|
|
59
|
+
i.current[e] = r.map((t) => Number(t)), a(d(i.current)), x([...i.current.flat()].sort());
|
|
60
60
|
};
|
|
61
|
-
return
|
|
62
|
-
d(
|
|
63
|
-
}, []), /* @__PURE__ */
|
|
61
|
+
return N(() => {
|
|
62
|
+
a(d(i.current));
|
|
63
|
+
}, []), /* @__PURE__ */ u(
|
|
64
64
|
"div",
|
|
65
65
|
{
|
|
66
66
|
className: k(
|
|
67
|
-
|
|
68
|
-
|
|
67
|
+
l["period-selector__container"],
|
|
68
|
+
l[`period-selector__container--label-${b}`]
|
|
69
69
|
),
|
|
70
70
|
children: [
|
|
71
|
-
o && /* @__PURE__ */
|
|
72
|
-
/* @__PURE__ */
|
|
73
|
-
/* @__PURE__ */
|
|
74
|
-
|
|
71
|
+
o && /* @__PURE__ */ s(I, { htmlFor: "", required: _, children: o }),
|
|
72
|
+
/* @__PURE__ */ u("div", { className: l["period-selector__selector-container"], children: [
|
|
73
|
+
/* @__PURE__ */ s("div", { className: l["period-selector__selector-row"], children: w.map((r, e) => /* @__PURE__ */ s(
|
|
74
|
+
B,
|
|
75
75
|
{
|
|
76
|
-
checkboxes:
|
|
77
|
-
defaultValues:
|
|
78
|
-
disableGroup: R.includes(
|
|
79
|
-
required:
|
|
80
|
-
onSetValues: (t) => P(t,
|
|
76
|
+
checkboxes: r,
|
|
77
|
+
defaultValues: i.current[e].map((t) => t.toString()),
|
|
78
|
+
disableGroup: R.includes(e),
|
|
79
|
+
required: _,
|
|
80
|
+
onSetValues: (t) => P(t, e),
|
|
81
81
|
notValidated: p !== ""
|
|
82
82
|
},
|
|
83
|
-
`group_${
|
|
83
|
+
`group_${e}`
|
|
84
84
|
)) }),
|
|
85
|
-
p !== "" && /* @__PURE__ */
|
|
85
|
+
p !== "" && /* @__PURE__ */ s(D, { level: "error", feedback: p })
|
|
86
86
|
] })
|
|
87
87
|
]
|
|
88
88
|
}
|
|
89
89
|
);
|
|
90
90
|
};
|
|
91
91
|
export {
|
|
92
|
-
|
|
92
|
+
_r as PeriodSelector
|
|
93
93
|
};
|
|
94
94
|
//# sourceMappingURL=PeriodSelector.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PeriodSelector.js","sources":["../../../src/components/PeriodSelector/PeriodSelector.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useEffect, useRef, useState } from 'react';\n\nimport styles from './PeriodSelector.module.css';\n\nimport { Label, CheckboxButtonBar, FeedbackBox } from 'components';\n\nexport interface PeriodSelectorProps {\n /** Indicates how many periods are shown. */\n // eslint-disable-next-line @typescript-eslint/no-magic-numbers\n maxPeriods: 6 | 7;\n /** array of period values [3, 5 ...] */\n defaultValues?: number[];\n label?: string;\n labelPosition?: 'top' | 'left';\n /** Shows red * */\n required?: boolean;\n /** error text to display if set */\n notValidatedText?: string;\n /** Returns array of selected values as number */\n onChange: (values: number[]) => void;\n}\n\nconst SEMESTER_1 = 0;\nconst SEMESTER_2 = 1;\nconst SEMESTER_3 = 2;\n\nconst PERIODS_PER_SEMESTER = 3;\nconst MAX_PERIODS = 7;\n\nconst chunkPeriods = (array: number[]): number[][] => {\n const result: number[][] = [];\n for (let count = 0; count < array.length; count += PERIODS_PER_SEMESTER) {\n result.push(array.slice(count, count + PERIODS_PER_SEMESTER));\n }\n return result;\n};\n\n/** Checkbox group for selecting periods */\nexport const PeriodSelector = ({\n maxPeriods = MAX_PERIODS,\n defaultValues,\n label,\n labelPosition = 'top',\n required = false,\n notValidatedText = '',\n onChange,\n}: PeriodSelectorProps) => {\n const maxPeriodsList = Array.from({ length: maxPeriods }, (_, index) => index + 1);\n const chunkedPeriods = chunkPeriods(maxPeriodsList);\n\n const checkboxItems = chunkedPeriods.map((periods,
|
|
1
|
+
{"version":3,"file":"PeriodSelector.js","sources":["../../../src/components/PeriodSelector/PeriodSelector.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useEffect, useRef, useState } from 'react';\n\nimport styles from './PeriodSelector.module.css';\n\nimport { Label, CheckboxButtonBar, FeedbackBox } from 'components';\n\nexport interface PeriodSelectorProps {\n /** Indicates how many periods are shown. */\n // eslint-disable-next-line @typescript-eslint/no-magic-numbers\n maxPeriods: 6 | 7;\n /** array of period values [3, 5 ...] */\n defaultValues?: number[];\n label?: string;\n labelPosition?: 'top' | 'left';\n /** Shows red * */\n required?: boolean;\n /** error text to display if set */\n notValidatedText?: string;\n /** Returns array of selected values as number */\n onChange: (values: number[]) => void;\n}\n\nconst SEMESTER_1 = 0;\nconst SEMESTER_2 = 1;\nconst SEMESTER_3 = 2;\n\nconst PERIODS_PER_SEMESTER = 3;\nconst MAX_PERIODS = 7;\n\nconst chunkPeriods = (array: number[]): number[][] => {\n const result: number[][] = [];\n for (let count = 0; count < array.length; count += PERIODS_PER_SEMESTER) {\n result.push(array.slice(count, count + PERIODS_PER_SEMESTER));\n }\n return result;\n};\n\n/** Checkbox group for selecting periods */\nexport const PeriodSelector = ({\n maxPeriods = MAX_PERIODS,\n defaultValues,\n label,\n labelPosition = 'top',\n required = false,\n notValidatedText = '',\n onChange,\n}: PeriodSelectorProps) => {\n const maxPeriodsList = Array.from({ length: maxPeriods }, (_, index) => index + 1);\n const chunkedPeriods = chunkPeriods(maxPeriodsList);\n\n const checkboxItems = chunkedPeriods.map((periods, _) => {\n return periods.map((period) => ({\n label: period.toString(),\n value: period.toString(),\n }));\n });\n\n const returnValues = useRef<number[][]>(\n chunkedPeriods.map((semester) =>\n semester.reduce((periods, period) => {\n if (defaultValues?.includes(period)) periods.push(period);\n return periods;\n }, [] as number[])\n )\n );\n const [disableSemesters, setDisableSemesters] = useState<number[]>([]);\n\n const disableGroups = (selects: number[][]) => {\n if (selects[SEMESTER_1].length !== 0 || selects[SEMESTER_2].length !== 0) return [SEMESTER_3];\n if (selects[SEMESTER_3].length !== 0) return [SEMESTER_1, SEMESTER_2];\n return [];\n };\n\n const handleChange = (values: string[], index: number) => {\n returnValues.current[index] = values.map((num) => Number(num));\n setDisableSemesters(disableGroups(returnValues.current));\n onChange([...returnValues.current.flat()].sort());\n };\n\n useEffect(() => {\n setDisableSemesters(disableGroups(returnValues.current));\n }, []);\n\n return (\n <div\n className={clsx(\n styles['period-selector__container'],\n styles[`period-selector__container--label-${labelPosition}`]\n )}\n >\n {label && (\n <Label htmlFor=\"\" required={required}>\n {label}\n </Label>\n )}\n <div className={styles['period-selector__selector-container']}>\n <div className={styles['period-selector__selector-row']}>\n {checkboxItems.map((checkboxes, semester) => (\n <CheckboxButtonBar\n key={`group_${semester}`}\n checkboxes={checkboxes}\n defaultValues={returnValues.current[semester].map((num) => num.toString())}\n disableGroup={disableSemesters.includes(semester)}\n required={required}\n onSetValues={(event) => handleChange(event, semester)}\n notValidated={notValidatedText !== ''}\n />\n ))}\n </div>\n {notValidatedText !== '' && <FeedbackBox level=\"error\" feedback={notValidatedText} />}\n </div>\n </div>\n );\n};\n"],"names":["SEMESTER_1","SEMESTER_2","SEMESTER_3","PERIODS_PER_SEMESTER","MAX_PERIODS","chunkPeriods","array","result","count","PeriodSelector","maxPeriods","defaultValues","label","labelPosition","required","notValidatedText","onChange","maxPeriodsList","_","index","chunkedPeriods","checkboxItems","periods","period","returnValues","useRef","semester","disableSemesters","setDisableSemesters","useState","disableGroups","selects","handleChange","values","num","useEffect","jsxs","clsx","styles","jsx","Label","checkboxes","CheckboxButtonBar","event","FeedbackBox"],"mappings":"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"}
|
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.
|
|
5
|
+
"version": "3.43.0",
|
|
6
6
|
"type": "module",
|
|
7
7
|
"main": "dist/index.js",
|
|
8
8
|
"types": "dist/index.d.ts",
|
|
@@ -52,11 +52,11 @@
|
|
|
52
52
|
"@semantic-release/git": "^10.0.1",
|
|
53
53
|
"@semantic-release/gitlab": "^13.2.8",
|
|
54
54
|
"@semantic-release/npm": "^12.0.2",
|
|
55
|
-
"@storybook/addon-a11y": "^9.1.
|
|
56
|
-
"@storybook/addon-docs": "^9.1.
|
|
57
|
-
"@storybook/addon-links": "^9.1.
|
|
58
|
-
"@storybook/react": "^9.1.
|
|
59
|
-
"@storybook/react-vite": "^9.1.
|
|
55
|
+
"@storybook/addon-a11y": "^9.1.5",
|
|
56
|
+
"@storybook/addon-docs": "^9.1.5",
|
|
57
|
+
"@storybook/addon-links": "^9.1.5",
|
|
58
|
+
"@storybook/react": "^9.1.5",
|
|
59
|
+
"@storybook/react-vite": "^9.1.5",
|
|
60
60
|
"@testing-library/jest-dom": "^6.8.0",
|
|
61
61
|
"@testing-library/react": "^16.3.0",
|
|
62
62
|
"@types/jest": "^30.0.0",
|
|
@@ -81,16 +81,16 @@
|
|
|
81
81
|
"react": "^19.1.1",
|
|
82
82
|
"react-dom": "^19.1.1",
|
|
83
83
|
"react-router": "^7.8.2",
|
|
84
|
-
"semantic-release": "^24.2.
|
|
85
|
-
"storybook": "^9.1.
|
|
84
|
+
"semantic-release": "^24.2.8",
|
|
85
|
+
"storybook": "^9.1.5",
|
|
86
86
|
"style-dictionary": "^5.0.4",
|
|
87
|
-
"stylelint": "^16.
|
|
87
|
+
"stylelint": "^16.24.0",
|
|
88
88
|
"stylelint-config-recommended": "^17.0.0",
|
|
89
89
|
"stylelint-config-standard": "^39.0.0",
|
|
90
90
|
"stylelint-order": "^7.0.0",
|
|
91
91
|
"ts-node": "^10.9.2",
|
|
92
92
|
"typescript": "^5.9.2",
|
|
93
|
-
"vite": "^7.1.
|
|
93
|
+
"vite": "^7.1.5",
|
|
94
94
|
"vite-plugin-dts": "^4.5.4",
|
|
95
95
|
"vite-plugin-lib-inject-css": "^2.2.2",
|
|
96
96
|
"vite-plugin-static-copy": "^3.1.2",
|
|
@@ -108,9 +108,9 @@
|
|
|
108
108
|
"lexical": "^0.35.0"
|
|
109
109
|
},
|
|
110
110
|
"optionalDependencies": {
|
|
111
|
-
"@ast-grep/napi-linux-x64-gnu": "0.39.
|
|
112
|
-
"@rollup/rollup-linux-x64-gnu": "^4.50.
|
|
113
|
-
"@rspack/binding-darwin-arm64": "1.5.
|
|
114
|
-
"@rspack/binding-linux-x64-gnu": "1.5.
|
|
111
|
+
"@ast-grep/napi-linux-x64-gnu": "0.39.5",
|
|
112
|
+
"@rollup/rollup-linux-x64-gnu": "^4.50.1",
|
|
113
|
+
"@rspack/binding-darwin-arm64": "1.5.3",
|
|
114
|
+
"@rspack/binding-linux-x64-gnu": "1.5.3"
|
|
115
115
|
}
|
|
116
116
|
}
|