@citolab/tspci 2.9.9 → 2.9.10
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/CHANGELOG.md +8 -0
- package/package.json +4 -3
- package/preset/preact/src/interaction.tsx +14 -10
- package/preset/tailwind/src/styles.css +25 -5
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,14 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
## [2.9.10](/compare/v2.9.9...v2.9.10) (2026-03-11)
|
|
7
|
+
|
|
8
|
+
**Note:** Version bump only for package @citolab/tspci
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
|
|
12
|
+
|
|
13
|
+
|
|
6
14
|
## [2.9.9](/compare/v2.9.8...v2.9.9) (2026-03-11)
|
|
7
15
|
|
|
8
16
|
**Note:** Version bump only for package @citolab/tspci
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@citolab/tspci",
|
|
3
|
-
"version": "2.9.
|
|
3
|
+
"version": "2.9.10",
|
|
4
4
|
"description": "an opiniated typescript ims-pci builder with tao integration",
|
|
5
5
|
"author": "patrick <patrick.deklein@cito.nl>",
|
|
6
6
|
"repository": "@citolab/tspci",
|
|
@@ -42,7 +42,8 @@
|
|
|
42
42
|
"postcss-load-config": "^6.0.1",
|
|
43
43
|
"rollup": "^4.59.0",
|
|
44
44
|
"rollup-plugin-livereload": "^2.0.5",
|
|
45
|
-
"tailwindcss": "^4.1.18"
|
|
45
|
+
"tailwindcss": "^4.1.18",
|
|
46
|
+
"tslib": "^2.8.1"
|
|
46
47
|
},
|
|
47
48
|
"devDependencies": {
|
|
48
49
|
"@types/node": "^25.1.0",
|
|
@@ -53,5 +54,5 @@
|
|
|
53
54
|
"access": "public",
|
|
54
55
|
"registry": "https://registry.npmjs.org/"
|
|
55
56
|
},
|
|
56
|
-
"gitHead": "
|
|
57
|
+
"gitHead": "5d514e4e118dd152f455964a08bc9bed43cb774b"
|
|
57
58
|
}
|
|
@@ -20,22 +20,26 @@ const Interaction = ({ config, dom, store }: { config: PropTypes; dom: Document
|
|
|
20
20
|
};
|
|
21
21
|
|
|
22
22
|
return <div className="pci-container">
|
|
23
|
-
<h1>{config.title}</h1>
|
|
23
|
+
<h1 className="title">{config.title}</h1>
|
|
24
24
|
<div className="body">
|
|
25
|
-
<img width={config.width} height={+config.height} src={procenten} />
|
|
25
|
+
<img className="body-image" width={config.width} height={+config.height} src={procenten} alt="Percentages visual" />
|
|
26
26
|
</div>
|
|
27
27
|
<div className="interaction">
|
|
28
|
-
<label htmlFor="
|
|
29
|
-
<
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
28
|
+
<label className="prompt" htmlFor="percentage-input">{config.prompt}</label>
|
|
29
|
+
<div className="answer-row">
|
|
30
|
+
<input className="answer-input"
|
|
31
|
+
id="percentage-input"
|
|
32
|
+
type="number"
|
|
33
|
+
value={state.input}
|
|
34
|
+
onInput={handleInput}
|
|
35
|
+
onPaste={() => setEventHandled(false)}
|
|
36
|
+
onKeyDown={() => setEventHandled(false)}
|
|
37
|
+
min="0" max="100" />
|
|
38
|
+
<span className="answer-suffix">%</span>
|
|
39
|
+
</div>
|
|
35
40
|
</div>
|
|
36
41
|
</div>;
|
|
37
42
|
};
|
|
38
43
|
|
|
39
44
|
|
|
40
45
|
export default Interaction;
|
|
41
|
-
|
|
@@ -1,10 +1,30 @@
|
|
|
1
1
|
@import "tailwindcss";
|
|
2
|
+
@source "./**/*.{html,js,ts,jsx,tsx}";
|
|
3
|
+
@source "../*.xml";
|
|
2
4
|
.pci-container {
|
|
3
|
-
@apply
|
|
5
|
+
@apply mx-auto flex w-full max-w-xl flex-col items-center gap-5 rounded-2xl border border-slate-200 bg-white p-6 shadow-lg;
|
|
4
6
|
}
|
|
5
|
-
|
|
6
|
-
@apply text-
|
|
7
|
+
.title {
|
|
8
|
+
@apply text-center text-2xl font-semibold tracking-tight text-slate-800;
|
|
7
9
|
}
|
|
8
|
-
|
|
9
|
-
@apply
|
|
10
|
+
.body {
|
|
11
|
+
@apply flex w-full justify-center;
|
|
12
|
+
}
|
|
13
|
+
.body-image {
|
|
14
|
+
@apply rounded-xl border border-slate-200 bg-slate-50 p-2;
|
|
15
|
+
}
|
|
16
|
+
.interaction {
|
|
17
|
+
@apply w-full rounded-xl border border-slate-200 bg-slate-50 p-4;
|
|
18
|
+
}
|
|
19
|
+
.prompt {
|
|
20
|
+
@apply mb-2 block text-sm font-medium text-slate-700;
|
|
21
|
+
}
|
|
22
|
+
.answer-row {
|
|
23
|
+
@apply flex items-center gap-2;
|
|
24
|
+
}
|
|
25
|
+
.answer-input {
|
|
26
|
+
@apply w-28 rounded-lg border border-slate-300 bg-white px-3 py-2 text-lg font-medium text-slate-900 shadow-sm outline-none transition focus:border-amber-500 focus:ring-2 focus:ring-amber-200;
|
|
27
|
+
}
|
|
28
|
+
.answer-suffix {
|
|
29
|
+
@apply text-sm font-semibold uppercase tracking-wide text-slate-500;
|
|
10
30
|
}
|