Compare commits
26 Commits
266f5212aa
...
main
| Author | SHA1 | Date | |
|---|---|---|---|
|
6c9d6fa9e6 | ||
|
|
a0c18ff4e7 | ||
|
|
5d7911e644 | ||
|
|
3dac143f1a | ||
|
|
62d000728c | ||
|
|
93d80019c2 | ||
|
|
aeb9456204 | ||
|
|
5d5c18635d | ||
|
|
cd3a888a65 | ||
|
|
b96eb762ae | ||
|
|
c7b6af0b43 | ||
|
|
1f25cf2dc6 | ||
|
|
2757629128 | ||
|
|
d34e955021 | ||
|
|
775e1d9959 | ||
|
|
c735ba9c65 | ||
|
|
f49dd4b00f | ||
|
|
c3fd05b424 | ||
|
|
1277e355eb | ||
|
|
37461e539b | ||
|
|
3e90ec7f67 | ||
|
|
90141a539a | ||
|
|
64cfc56ccd | ||
|
|
1976cfb617 | ||
|
|
c34f86f762 | ||
|
|
8325402bc6 |
199
package-lock.json
generated
199
package-lock.json
generated
@@ -16,7 +16,8 @@
|
||||
"@vitejs/plugin-react": "6.1.1",
|
||||
"react": "^19.3.0",
|
||||
"react-dom": "^19.3.0",
|
||||
"vite": "^8.3.0"
|
||||
"vite": "^8.3.2",
|
||||
"vite-plugin-qrcode": "^0.4.1"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@emotion/react": "^11.14.0",
|
||||
@@ -617,9 +618,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@oxc-project/types": {
|
||||
"version": "0.149.0",
|
||||
"resolved": "https://registry.npmjs.org/@oxc-project/types/-/types-0.149.0.tgz",
|
||||
"integrity": "sha512-Efcc+iF0j3Bf67YjEqIqWXbX5XddXoK/Mw4K1/JuXwRCZ8N16VR7iT23nlCc9XrveFVh/E5Rqs2StT0V8v9LdA==",
|
||||
"version": "0.154.0",
|
||||
"resolved": "https://registry.npmjs.org/@oxc-project/types/-/types-0.154.0.tgz",
|
||||
"integrity": "sha512-KYOUGQFlLWR+s4QMV2Q9ko38TZm7EdO87Qm7rvZLqk/webse/cDjtyxKhg/47l0byCbs/k46LT8qc4PKjAikzA==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"funding": {
|
||||
@@ -654,9 +655,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@rolldown/binding-android-arm-eabi": {
|
||||
"version": "1.2.8",
|
||||
"resolved": "https://registry.npmjs.org/@rolldown/binding-android-arm-eabi/-/binding-android-arm-eabi-1.2.8.tgz",
|
||||
"integrity": "sha512-tN5aztYkKCte4i5SIrrz5yK/HMjEuCqCSCJa418jOV8tZ1cBY3YF2otxB1ktPxzsLA1BeTqwapK0bfjxNvHJVw==",
|
||||
"version": "1.2.14",
|
||||
"resolved": "https://registry.npmjs.org/@rolldown/binding-android-arm-eabi/-/binding-android-arm-eabi-1.2.14.tgz",
|
||||
"integrity": "sha512-aWR+XKH9+rW7m5fWq/5360J3mHycrx/o6xZM2DQFdJnTMdyP7/WzxPjhtLbVWdKo2y612/4U1bWqb3HQhiF7vg==",
|
||||
"cpu": [
|
||||
"arm"
|
||||
],
|
||||
@@ -671,9 +672,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@rolldown/binding-android-arm64": {
|
||||
"version": "1.2.8",
|
||||
"resolved": "https://registry.npmjs.org/@rolldown/binding-android-arm64/-/binding-android-arm64-1.2.8.tgz",
|
||||
"integrity": "sha512-dIYTWl9XprMUiQFoc55KUyk/oS8SKYH3zFl0LTR7RT0Xj4hgSVyuJcroH8JUu8RcpF8fTB6E0aOwCkZoYPcDSQ==",
|
||||
"version": "1.2.14",
|
||||
"resolved": "https://registry.npmjs.org/@rolldown/binding-android-arm64/-/binding-android-arm64-1.2.14.tgz",
|
||||
"integrity": "sha512-QiVxHofl6A8lQU7WAtOUY4QMVZXohxwz7WJJoeh8NBEUyKfIkMRKhYyq8az/1RypNiIXzNTtiS6KwHz0erxYRQ==",
|
||||
"cpu": [
|
||||
"arm64"
|
||||
],
|
||||
@@ -688,9 +689,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@rolldown/binding-darwin-arm64": {
|
||||
"version": "1.2.8",
|
||||
"resolved": "https://registry.npmjs.org/@rolldown/binding-darwin-arm64/-/binding-darwin-arm64-1.2.8.tgz",
|
||||
"integrity": "sha512-PCSDQGXD2IyTEFrcgPyBM8jJuGmrbCMuoIOXdbEGVemruKACXoLQJrb+A45Z0L5t1RQkdfJprAYPkikbh7dzdA==",
|
||||
"version": "1.2.14",
|
||||
"resolved": "https://registry.npmjs.org/@rolldown/binding-darwin-arm64/-/binding-darwin-arm64-1.2.14.tgz",
|
||||
"integrity": "sha512-lTQOzHuBIooh3jIr5XINQkjPGEuGy+Dsy0meXDr6Sjty0b99kYgGh4uBC/8mJX1T0kC8d6S0aPP1Y+bHkh6aBw==",
|
||||
"cpu": [
|
||||
"arm64"
|
||||
],
|
||||
@@ -705,9 +706,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@rolldown/binding-darwin-x64": {
|
||||
"version": "1.2.8",
|
||||
"resolved": "https://registry.npmjs.org/@rolldown/binding-darwin-x64/-/binding-darwin-x64-1.2.8.tgz",
|
||||
"integrity": "sha512-Uk7lRsGhPFHVX/sAUC6D5H9Ol30dFHd6iquokll2th3LpdJ3F5CzQB+7DHn0Ri2mG+U7k2zXiPHDrwZenXhwSA==",
|
||||
"version": "1.2.14",
|
||||
"resolved": "https://registry.npmjs.org/@rolldown/binding-darwin-x64/-/binding-darwin-x64-1.2.14.tgz",
|
||||
"integrity": "sha512-hyMKEGatjmBYCs/Q4sbIcL/GqpFEqsX3wc+HYVQ/85A4rxc1o7rPm4DUI4GV4k/h0ITddwFSGpqQunI14GXjTA==",
|
||||
"cpu": [
|
||||
"x64"
|
||||
],
|
||||
@@ -722,9 +723,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@rolldown/binding-freebsd-x64": {
|
||||
"version": "1.2.8",
|
||||
"resolved": "https://registry.npmjs.org/@rolldown/binding-freebsd-x64/-/binding-freebsd-x64-1.2.8.tgz",
|
||||
"integrity": "sha512-DjszaTEVogPqA5bYzsEeqDCQxbcp2fexQwKcRspYji2yzR68fCf+e4fx6kBSRDwX5/brZaHw/hWS9+A/+/w9sQ==",
|
||||
"version": "1.2.14",
|
||||
"resolved": "https://registry.npmjs.org/@rolldown/binding-freebsd-x64/-/binding-freebsd-x64-1.2.14.tgz",
|
||||
"integrity": "sha512-u371GbXoVXrEgP20PwzoGNOdAOqAMhzo19JzzY+V4YmmnC+DTOoqdbMu+O+54emM59Mik/UdrtWgcuEDKWRPKA==",
|
||||
"cpu": [
|
||||
"x64"
|
||||
],
|
||||
@@ -739,9 +740,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@rolldown/binding-linux-arm-gnueabihf": {
|
||||
"version": "1.2.8",
|
||||
"resolved": "https://registry.npmjs.org/@rolldown/binding-linux-arm-gnueabihf/-/binding-linux-arm-gnueabihf-1.2.8.tgz",
|
||||
"integrity": "sha512-zmwa7FTmdzB6aaEEuuls18H6Ap5JmJPSoPTuXixeJZV6tG40SyLkApQtz1g8ptZtiEKqj9OM0oNLPh1AgvE31Q==",
|
||||
"version": "1.2.14",
|
||||
"resolved": "https://registry.npmjs.org/@rolldown/binding-linux-arm-gnueabihf/-/binding-linux-arm-gnueabihf-1.2.14.tgz",
|
||||
"integrity": "sha512-BqwKsdZQf6EqVWr8fv2MrDYzAvOZ7+NYFSJESRGs87fkseEhs0TU9TXgRJTkZoRRkxTizyEg1LKUXfU3/78uqg==",
|
||||
"cpu": [
|
||||
"arm"
|
||||
],
|
||||
@@ -756,9 +757,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@rolldown/binding-linux-arm64-gnu": {
|
||||
"version": "1.2.8",
|
||||
"resolved": "https://registry.npmjs.org/@rolldown/binding-linux-arm64-gnu/-/binding-linux-arm64-gnu-1.2.8.tgz",
|
||||
"integrity": "sha512-KdYQDPHwJVnbFwdTGMgxsI9SqblBlz6STGM+w1We/d5B8OWWidYH0MwkU/uA1wM5fIpO2MkOVxXrNzzuZhw9ew==",
|
||||
"version": "1.2.14",
|
||||
"resolved": "https://registry.npmjs.org/@rolldown/binding-linux-arm64-gnu/-/binding-linux-arm64-gnu-1.2.14.tgz",
|
||||
"integrity": "sha512-SD9kY8M009x/7s57Z1dgUVlP5+uYBgKQK0Tkr1WIWngrtUJmRCW1RJFMY7QDla2khXhmg2i5Io7MUjcmZNZ/KQ==",
|
||||
"cpu": [
|
||||
"arm64"
|
||||
],
|
||||
@@ -776,9 +777,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@rolldown/binding-linux-arm64-musl": {
|
||||
"version": "1.2.8",
|
||||
"resolved": "https://registry.npmjs.org/@rolldown/binding-linux-arm64-musl/-/binding-linux-arm64-musl-1.2.8.tgz",
|
||||
"integrity": "sha512-jFJTifHnNPY+yzOoNZQfSIysrVyXzEQPhPnOUjmD1bcQGHH6s7c8cViKWar8YplQImE5N9JRqMCLrM2CdxOrZA==",
|
||||
"version": "1.2.14",
|
||||
"resolved": "https://registry.npmjs.org/@rolldown/binding-linux-arm64-musl/-/binding-linux-arm64-musl-1.2.14.tgz",
|
||||
"integrity": "sha512-BJ2CL19M6uuWesMgnqJzgxoI+N+eV7b0A9O9vLV42y+gitC41fNa8KElau1tHVzuLWX5GzEuxMPhAO0tQXQMkg==",
|
||||
"cpu": [
|
||||
"arm64"
|
||||
],
|
||||
@@ -796,9 +797,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@rolldown/binding-linux-ppc64-gnu": {
|
||||
"version": "1.2.8",
|
||||
"resolved": "https://registry.npmjs.org/@rolldown/binding-linux-ppc64-gnu/-/binding-linux-ppc64-gnu-1.2.8.tgz",
|
||||
"integrity": "sha512-FhiOziBDWPBjbcmRzfLyIJnaP7AVMFXT7YCXPjXxj7wKU3vx24RjrCNN/zjvVa+N2vVoHJwCoUBvsrN/DG3zIA==",
|
||||
"version": "1.2.14",
|
||||
"resolved": "https://registry.npmjs.org/@rolldown/binding-linux-ppc64-gnu/-/binding-linux-ppc64-gnu-1.2.14.tgz",
|
||||
"integrity": "sha512-4+Kl8daPV8NDHaD7mfCcc1pRM+Qg7ab8DyMm5FG5WoZgv4h2i3KFN1CybYBNbQqmuYm7ftJLvmMI1eHYJ22S/Q==",
|
||||
"cpu": [
|
||||
"ppc64"
|
||||
],
|
||||
@@ -816,9 +817,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@rolldown/binding-linux-s390x-gnu": {
|
||||
"version": "1.2.8",
|
||||
"resolved": "https://registry.npmjs.org/@rolldown/binding-linux-s390x-gnu/-/binding-linux-s390x-gnu-1.2.8.tgz",
|
||||
"integrity": "sha512-WnHfADMzOV2Y55wlx1hzzQnar/wDt/VdvWSD99r18Mz9ylNieIGOkRx3UV21h7m/eJvjySYJkO26VvGNFkwsIQ==",
|
||||
"version": "1.2.14",
|
||||
"resolved": "https://registry.npmjs.org/@rolldown/binding-linux-s390x-gnu/-/binding-linux-s390x-gnu-1.2.14.tgz",
|
||||
"integrity": "sha512-V/h8ePq1fKDrmtFMz6xcCN3DKvuvMRrwwD1q0PkBeeo4DpK64biaKvqWGVxqCeYKqeRk7gE7/iKPxLCn08O97A==",
|
||||
"cpu": [
|
||||
"s390x"
|
||||
],
|
||||
@@ -836,9 +837,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@rolldown/binding-linux-x64-gnu": {
|
||||
"version": "1.2.8",
|
||||
"resolved": "https://registry.npmjs.org/@rolldown/binding-linux-x64-gnu/-/binding-linux-x64-gnu-1.2.8.tgz",
|
||||
"integrity": "sha512-H9tRr5ibfXFVLxbPOseVewewFpl28zcEdjRDt2FTUZU7odxP0gEv1ki4/kGmcGOh78oRwZuuQllGLZ9zTJp84g==",
|
||||
"version": "1.2.14",
|
||||
"resolved": "https://registry.npmjs.org/@rolldown/binding-linux-x64-gnu/-/binding-linux-x64-gnu-1.2.14.tgz",
|
||||
"integrity": "sha512-WxalXzgrLVpKC93xfpaJ3gCXUWzeCr+FRCbDVD2mUAy4L6Vo3lNVz0epUEUpxPWJkLNYUwM4OSIikv36OJ9mLg==",
|
||||
"cpu": [
|
||||
"x64"
|
||||
],
|
||||
@@ -856,9 +857,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@rolldown/binding-linux-x64-musl": {
|
||||
"version": "1.2.8",
|
||||
"resolved": "https://registry.npmjs.org/@rolldown/binding-linux-x64-musl/-/binding-linux-x64-musl-1.2.8.tgz",
|
||||
"integrity": "sha512-UefiqfM3D6IVNlZ8tSGs9+Ejjud2T+oxO0IHADU45Y+lyEjD2dVFyZHbkfX0LUb5Zugo/oIv1eCO/KVYhgYJYA==",
|
||||
"version": "1.2.14",
|
||||
"resolved": "https://registry.npmjs.org/@rolldown/binding-linux-x64-musl/-/binding-linux-x64-musl-1.2.14.tgz",
|
||||
"integrity": "sha512-3G3tnAmTpdk9jO3GQtyHXqeFD2SlecfTws/Y3M2mmj9nMBwwuLT4kur8sZKeu7ENUHSpVO3cIsm5A52LEWWwlg==",
|
||||
"cpu": [
|
||||
"x64"
|
||||
],
|
||||
@@ -876,9 +877,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@rolldown/binding-openharmony-arm64": {
|
||||
"version": "1.2.8",
|
||||
"resolved": "https://registry.npmjs.org/@rolldown/binding-openharmony-arm64/-/binding-openharmony-arm64-1.2.8.tgz",
|
||||
"integrity": "sha512-637Ke4kWSy6rp9cxQ9gMOXlxPgIw/c1beASV4M//3+9I4uwBVOOl74G+e3zyU3u19U7RkRl/HuewixZ/Z6+Rjg==",
|
||||
"version": "1.2.14",
|
||||
"resolved": "https://registry.npmjs.org/@rolldown/binding-openharmony-arm64/-/binding-openharmony-arm64-1.2.14.tgz",
|
||||
"integrity": "sha512-qyr5XiNGxm2ytx17vvtcJ9nXn6v1gENETi503bJx3OGwZ1tSonj7BosxbMa/xeAfSl5iS9X6KjEWYXLu6v1L7Q==",
|
||||
"cpu": [
|
||||
"arm64"
|
||||
],
|
||||
@@ -893,9 +894,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@rolldown/binding-win32-arm64-msvc": {
|
||||
"version": "1.2.8",
|
||||
"resolved": "https://registry.npmjs.org/@rolldown/binding-win32-arm64-msvc/-/binding-win32-arm64-msvc-1.2.8.tgz",
|
||||
"integrity": "sha512-xWBkPOF1Q9k/Gv1nQXnVdLxKu74jXppuOM4Z3mnypVUJJJwLsMl7hNJGRAUJoG8A5MgOI1ACKM+wBFxSJzKy4A==",
|
||||
"version": "1.2.14",
|
||||
"resolved": "https://registry.npmjs.org/@rolldown/binding-win32-arm64-msvc/-/binding-win32-arm64-msvc-1.2.14.tgz",
|
||||
"integrity": "sha512-oA4o5o0S2yB199YyYXDzKUv1Z56Rc+mgOjwm7Z/vJ9Z8igiDPYvoOuDyo6g7AK/ZaF09nPhDKVnGBcYHO11GXA==",
|
||||
"cpu": [
|
||||
"arm64"
|
||||
],
|
||||
@@ -910,9 +911,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@rolldown/binding-win32-x64-msvc": {
|
||||
"version": "1.2.8",
|
||||
"resolved": "https://registry.npmjs.org/@rolldown/binding-win32-x64-msvc/-/binding-win32-x64-msvc-1.2.8.tgz",
|
||||
"integrity": "sha512-uz2ZvfgXbxqNwijjjbxrnvALwpyODDcgc1T1N8N3rf/DXKQmaFwmB4LX4yyjggpwN2obdQLb2rgirX5ffCWYng==",
|
||||
"version": "1.2.14",
|
||||
"resolved": "https://registry.npmjs.org/@rolldown/binding-win32-x64-msvc/-/binding-win32-x64-msvc-1.2.14.tgz",
|
||||
"integrity": "sha512-9mE94bf2GZUaR/fUSXCMpBoWkctu421Mi0ORpm4zqfbkjKep7RxzPFa5etcGs5h+2KApoWBOA/hAJa/7saGgEQ==",
|
||||
"cpu": [
|
||||
"x64"
|
||||
],
|
||||
@@ -1595,9 +1596,9 @@
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/nanoid": {
|
||||
"version": "3.3.19",
|
||||
"resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.19.tgz",
|
||||
"integrity": "sha512-Y2tUNy4ouw6tq5oDSKeQYGOyhkUBhNOcGV/02KC+6kd9eDGqdZd++mjMiIDilrBYvjEnCYvVtsuHCuP+okSfug==",
|
||||
"version": "3.3.20",
|
||||
"resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.20.tgz",
|
||||
"integrity": "sha512-uKdg2G3GNCKQn9byYOpxbGqrT2fGO5KRt5J/8b3pok8rT6qxGWF6hxMyJiEYtAf+FVyYuD9hRaDqX5uPFYJ4ZQ==",
|
||||
"dev": true,
|
||||
"funding": [
|
||||
{
|
||||
@@ -1722,9 +1723,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/postcss": {
|
||||
"version": "8.5.28",
|
||||
"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.28.tgz",
|
||||
"integrity": "sha512-RRuzqDtt5Y9h3quz5hWhK+TPnsmVs6WwSU6LkJMeY4HstUEDuYTG8UJSdawMRzmzAtV+KEoG8N3Qg2qLy5vM/A==",
|
||||
"version": "8.5.30",
|
||||
"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.30.tgz",
|
||||
"integrity": "sha512-zkd+e9S1AQHhmaBKye9zlFHWjOwVgqXl1q3ECYy8561K7qxR2cREf/STLskulBFd78k6AOFeA+ff1TtEzk9bAA==",
|
||||
"dev": true,
|
||||
"funding": [
|
||||
{
|
||||
@@ -1742,9 +1743,9 @@
|
||||
],
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"nanoid": "^3.3.18",
|
||||
"nanoid": "^3.3.20",
|
||||
"picocolors": "^1.1.1",
|
||||
"source-map-js": "^1.2.1"
|
||||
"source-map-js": "^1.2.2"
|
||||
},
|
||||
"engines": {
|
||||
"node": "^10 || ^12 || >=14"
|
||||
@@ -1849,13 +1850,13 @@
|
||||
}
|
||||
},
|
||||
"node_modules/rolldown": {
|
||||
"version": "1.2.8",
|
||||
"resolved": "https://registry.npmjs.org/rolldown/-/rolldown-1.2.8.tgz",
|
||||
"integrity": "sha512-Z67nTmhZe7anqnM/EjI392w5i/ANUinjip7QYsOyN37oayduxt3ksdX0hf5OOamkAd53BiIHfbfSzfUmzKFQqQ==",
|
||||
"version": "1.2.14",
|
||||
"resolved": "https://registry.npmjs.org/rolldown/-/rolldown-1.2.14.tgz",
|
||||
"integrity": "sha512-eTBTTqMR6uHKLgcUqpJP8ntzDI6V4LYA8negAMBEI7gkgVvOdrx6VsvS2Ym+83KhOPdLCHWJu0w7UQFJZhHKNw==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@oxc-project/types": "=0.149.0",
|
||||
"@oxc-project/types": "=0.154.0",
|
||||
"@rolldown/pluginutils": "^1.0.0"
|
||||
},
|
||||
"bin": {
|
||||
@@ -1865,21 +1866,21 @@
|
||||
"node": "^20.19.0 || >=22.12.0"
|
||||
},
|
||||
"optionalDependencies": {
|
||||
"@rolldown/binding-android-arm-eabi": "1.2.8",
|
||||
"@rolldown/binding-android-arm64": "1.2.8",
|
||||
"@rolldown/binding-darwin-arm64": "1.2.8",
|
||||
"@rolldown/binding-darwin-x64": "1.2.8",
|
||||
"@rolldown/binding-freebsd-x64": "1.2.8",
|
||||
"@rolldown/binding-linux-arm-gnueabihf": "1.2.8",
|
||||
"@rolldown/binding-linux-arm64-gnu": "1.2.8",
|
||||
"@rolldown/binding-linux-arm64-musl": "1.2.8",
|
||||
"@rolldown/binding-linux-ppc64-gnu": "1.2.8",
|
||||
"@rolldown/binding-linux-s390x-gnu": "1.2.8",
|
||||
"@rolldown/binding-linux-x64-gnu": "1.2.8",
|
||||
"@rolldown/binding-linux-x64-musl": "1.2.8",
|
||||
"@rolldown/binding-openharmony-arm64": "1.2.8",
|
||||
"@rolldown/binding-win32-arm64-msvc": "1.2.8",
|
||||
"@rolldown/binding-win32-x64-msvc": "1.2.8"
|
||||
"@rolldown/binding-android-arm-eabi": "1.2.14",
|
||||
"@rolldown/binding-android-arm64": "1.2.14",
|
||||
"@rolldown/binding-darwin-arm64": "1.2.14",
|
||||
"@rolldown/binding-darwin-x64": "1.2.14",
|
||||
"@rolldown/binding-freebsd-x64": "1.2.14",
|
||||
"@rolldown/binding-linux-arm-gnueabihf": "1.2.14",
|
||||
"@rolldown/binding-linux-arm64-gnu": "1.2.14",
|
||||
"@rolldown/binding-linux-arm64-musl": "1.2.14",
|
||||
"@rolldown/binding-linux-ppc64-gnu": "1.2.14",
|
||||
"@rolldown/binding-linux-s390x-gnu": "1.2.14",
|
||||
"@rolldown/binding-linux-x64-gnu": "1.2.14",
|
||||
"@rolldown/binding-linux-x64-musl": "1.2.14",
|
||||
"@rolldown/binding-openharmony-arm64": "1.2.14",
|
||||
"@rolldown/binding-win32-arm64-msvc": "1.2.14",
|
||||
"@rolldown/binding-win32-x64-msvc": "1.2.14"
|
||||
}
|
||||
},
|
||||
"node_modules/scheduler": {
|
||||
@@ -1900,9 +1901,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/source-map-js": {
|
||||
"version": "1.2.1",
|
||||
"resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
|
||||
"integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==",
|
||||
"version": "1.2.2",
|
||||
"resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.2.tgz",
|
||||
"integrity": "sha512-KGj/8Y43x35aZVDtt+J4mK1hoLGHULMYfSkODJNQjNDC3oW1PqPoxMwo0pLUsWM/UEGzON/NxeHywEfNXNP3Vw==",
|
||||
"dev": true,
|
||||
"license": "BSD-3-Clause",
|
||||
"engines": {
|
||||
@@ -1946,17 +1947,24 @@
|
||||
"url": "https://github.com/sponsors/SuperchupuDev"
|
||||
}
|
||||
},
|
||||
"node_modules/uqr": {
|
||||
"version": "0.1.3",
|
||||
"resolved": "https://registry.npmjs.org/uqr/-/uqr-0.1.3.tgz",
|
||||
"integrity": "sha512-0rjE8iEJe4YmT9TOhwsZtqCMRLc5DXZUI2UEYUUg63ikBkqqE5EYWaI0etFe/5KUcmcYwLih2RND1kq+hrUJXA==",
|
||||
"dev": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/vite": {
|
||||
"version": "8.3.0",
|
||||
"resolved": "https://registry.npmjs.org/vite/-/vite-8.3.0.tgz",
|
||||
"integrity": "sha512-lhZBVvEHefgE+HQZC9O7EBJgCU/nVzFNl7vkS4RE0APtWLP02/8QVIkQtzBxPquh7lq5/78NHipTj7ODQ6XuyQ==",
|
||||
"version": "8.3.4",
|
||||
"resolved": "https://registry.npmjs.org/vite/-/vite-8.3.4.tgz",
|
||||
"integrity": "sha512-IftLE8phJhdNRIGNEV4JCCvfNScoZQVfcXaN8TQropWGJtOHcu+iAB9pHcuGvmEb/kddw0LBe/jS8ztdC6xdiQ==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"lightningcss": "^1.33.0",
|
||||
"picomatch": "^4.0.7",
|
||||
"postcss": "^8.5.28",
|
||||
"rolldown": "~1.2.6",
|
||||
"postcss": "^8.5.29",
|
||||
"rolldown": "~1.2.12",
|
||||
"tinyglobby": "^0.2.17"
|
||||
},
|
||||
"bin": {
|
||||
@@ -2024,20 +2032,17 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/yaml": {
|
||||
"version": "2.9.1",
|
||||
"resolved": "https://registry.npmjs.org/yaml/-/yaml-2.9.1.tgz",
|
||||
"integrity": "sha512-3NxN8+78OdzbT7C/WjGsyfPAtJaN3FNDsWxv7Y7mcDsT/oOmgW8BpyQQFFBnvZE3j9Y2Sdz1ULFLezL7Eb2yFw==",
|
||||
"extraneous": true,
|
||||
"license": "ISC",
|
||||
"bin": {
|
||||
"yaml": "bin.mjs"
|
||||
"node_modules/vite-plugin-qrcode": {
|
||||
"version": "0.4.1",
|
||||
"resolved": "https://registry.npmjs.org/vite-plugin-qrcode/-/vite-plugin-qrcode-0.4.1.tgz",
|
||||
"integrity": "sha512-t3gdCbn/a2HHLK3M8bUrQ+4c+I0YQGJ/STxAL9eI6TBnfdeM/CJr3HctvOb7UYhEtWxHs5xZWpz7kYnRd5w+rA==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"uqr": "^0.1.2"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 14.6"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/eemeli"
|
||||
"peerDependencies": {
|
||||
"vite": ">=3"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
15
package.json
15
package.json
@@ -38,12 +38,13 @@
|
||||
"devDependencies": {
|
||||
"@emotion/react": "^11.14.0",
|
||||
"@emotion/styled": "^11.14.1",
|
||||
"@mui/icons-material": "^9.4.0",
|
||||
"@mui/material": "^9.4.0",
|
||||
"@playwright/test": "^1.63.0",
|
||||
"@vitejs/plugin-react": "6.1.1",
|
||||
"react": "^19.3.0",
|
||||
"react-dom": "^19.3.0",
|
||||
"vite": "^8.3.2"
|
||||
"@mui/icons-material": "^9.5.0",
|
||||
"@mui/material": "^9.5.0",
|
||||
"@playwright/test": "^1.64.1",
|
||||
"@vitejs/plugin-react": "6.1.2",
|
||||
"react": "^19.3.1",
|
||||
"react-dom": "^19.3.1",
|
||||
"vite": "^8.3.4",
|
||||
"vite-plugin-qrcode": "^0.4.1"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -14,8 +14,17 @@ import { alpha } from '@mui/material/styles';
|
||||
*
|
||||
* @prop {Array} items - Wheel flips pages.
|
||||
* @prop {React.ComponentType|Function} renderItem - Row renderer (component or callback).
|
||||
* @prop {React.ReactNode} [header] - Rendered below pagination controls and above the list items.
|
||||
* @prop {any} [headerItem] - Optional dummy/sample item passed to probe element for layout measurement.
|
||||
* @prop {number} [minPageSize=10] - Rows per page.
|
||||
* @prop {number} [maxPageSize] - Maximum rows per page.
|
||||
* @prop {number} [totalCount] - Total items in current dataset (or filtered dataset when paginating).
|
||||
* @prop {number} [unfilteredTotal] - Total items in unfiltered dataset. When unfilteredTotal > pageSize, pagination space is reserved even if current filtered count <= pageSize, preventing layout shift.
|
||||
* @prop {number} [unfilteredCount] - Alias for unfilteredTotal.
|
||||
* @prop {(page: number) => void} [onPageChange] - Called on page change.
|
||||
* @prop {boolean} [disableWheel=false] - When true, disables mouse wheel page flipping and lets the outer page scroll.
|
||||
* @prop {boolean} [virtualScrollbar=false] - Shows a synchronized scrollbar alongside pagination controls.
|
||||
* @prop {boolean} [reserveScrollbar] - Reserves raceway space even when items do not overflow (defaults to true when virtualScrollbar is true).
|
||||
* @prop {boolean} [debug=false] - Dashed outline for layout debugging.
|
||||
* @prop {object} [sx] - Extra styles.
|
||||
*/
|
||||
@@ -38,34 +47,53 @@ function renderRowElement(renderItem, item, index) {
|
||||
}
|
||||
|
||||
/**
|
||||
* Data-free probe of the row height, rendered hidden. Class components
|
||||
* Probe of the row height, rendered hidden. Class components
|
||||
* (e.g. `renderItem={ArtikelMarke}`) tolerate empty props
|
||||
* (`brand`/`item` undefined) and keep a fixed height (40px thumb /
|
||||
* text field), so the probe measures the row without depending on the
|
||||
* first data element. Plain callbacks are NOT probed — calling arbitrary
|
||||
* user code with `undefined` could throw — they fall back to the first
|
||||
* rendered data row.
|
||||
* text field). When `headerItem` is supplied, it is passed to the row
|
||||
* for precise measurement of data-driven layouts.
|
||||
*/
|
||||
function renderProbeElement(renderItem) {
|
||||
function renderProbeElement(renderItem, headerItem) {
|
||||
if (!isRowComponent(renderItem)) return null;
|
||||
const Row = renderItem;
|
||||
return <Row brand={undefined} item={undefined} index={0} disabled />;
|
||||
return <Row brand={headerItem} item={headerItem} index={0} disabled />;
|
||||
}
|
||||
|
||||
const MIN_THUMB_HEIGHT = 48;
|
||||
const RACEWAY_WIDTH = 16;
|
||||
const RACEWAY_BOTTOM_MARGIN = 16;
|
||||
|
||||
class FillSpace extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
const minSize = Math.max(1, Number(props.minPageSize) || 10);
|
||||
const maxSize = Number(props.maxPageSize) > 0 ? Number(props.maxPageSize) : Infinity;
|
||||
this.state = {
|
||||
unitHeight: 0,
|
||||
viewportHeight: null,
|
||||
pageSize: Number(props.minPageSize) || 10,
|
||||
pageSize: Math.min(maxSize, minSize),
|
||||
currentPage: 1,
|
||||
isDragging: false,
|
||||
dragThumbTop: 0,
|
||||
};
|
||||
this.ref = null;
|
||||
this.trackRef = null;
|
||||
this.thumbRef = null;
|
||||
this.probeRef = null;
|
||||
this.wheelAcc = 0;
|
||||
this.observer = null;
|
||||
this.raf = null;
|
||||
this.dragStartY = 0;
|
||||
this.dragStartThumbTop = 0;
|
||||
const rawUnfiltered = props.unfilteredTotal ?? props.unfilteredCount;
|
||||
const unfilteredTotal = rawUnfiltered != null ? Number(rawUnfiltered) : null;
|
||||
const total =
|
||||
props.totalCount != null
|
||||
? Number(props.totalCount)
|
||||
: Array.isArray(props.items)
|
||||
? props.items.length
|
||||
: 0;
|
||||
this.maxSeenCount = unfilteredTotal != null ? unfilteredTotal : total;
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
@@ -76,39 +104,91 @@ class FillSpace extends Component {
|
||||
}
|
||||
|
||||
componentDidUpdate(prevProps) {
|
||||
if (prevProps.renderItem !== this.props.renderItem) {
|
||||
if (
|
||||
prevProps.renderItem !== this.props.renderItem ||
|
||||
prevProps.headerItem !== this.props.headerItem
|
||||
) {
|
||||
this._probeMeasure();
|
||||
}
|
||||
if (prevProps.minPageSize !== this.props.minPageSize) {
|
||||
this.setState({ pageSize: Number(this.props.minPageSize) || 10 });
|
||||
if (
|
||||
prevProps.minPageSize !== this.props.minPageSize ||
|
||||
prevProps.maxPageSize !== this.props.maxPageSize
|
||||
) {
|
||||
const minSize = Math.max(1, Number(this.props.minPageSize) || 10);
|
||||
const maxSize = Number(this.props.maxPageSize) > 0 ? Number(this.props.maxPageSize) : Infinity;
|
||||
this.setState({ pageSize: Math.min(maxSize, minSize) });
|
||||
}
|
||||
if (
|
||||
prevProps.aboveRef !== this.props.aboveRef ||
|
||||
prevProps.belowRef !== this.props.belowRef ||
|
||||
prevProps.containerRef !== this.props.containerRef ||
|
||||
prevProps.reserveBottom !== this.props.reserveBottom ||
|
||||
prevProps.items !== this.props.items
|
||||
prevProps.items !== this.props.items ||
|
||||
prevProps.header !== this.props.header
|
||||
) {
|
||||
this._observe();
|
||||
this._viewportMeasure();
|
||||
}
|
||||
// Clamp current page when the item list shrinks (e.g. brand deleted).
|
||||
const rawUnfiltered = this.props.unfilteredTotal ?? this.props.unfilteredCount;
|
||||
const unfilteredTotal = rawUnfiltered != null ? Number(rawUnfiltered) : null;
|
||||
const total =
|
||||
this.props.totalCount != null
|
||||
? Number(this.props.totalCount)
|
||||
: Array.isArray(this.props.items)
|
||||
? this.props.items.length
|
||||
: 0;
|
||||
if (unfilteredTotal != null) {
|
||||
this.maxSeenCount = unfilteredTotal;
|
||||
} else {
|
||||
this.maxSeenCount = Math.max(this.maxSeenCount || 0, total);
|
||||
}
|
||||
if (this.props.resetKey !== undefined && this.props.resetKey !== prevProps.resetKey) {
|
||||
if (this.state.currentPage !== 1) {
|
||||
this._goToPage(1);
|
||||
} else {
|
||||
this.props.onPageChange?.(1, {
|
||||
pageCount: Math.max(1, Math.ceil(total / Math.max(1, this.state.pageSize))),
|
||||
pageSize: this.state.pageSize,
|
||||
total,
|
||||
});
|
||||
}
|
||||
}
|
||||
// Clamp current page when the item list shrinks (e.g. brand deleted) or trigger load for current page if items are missing.
|
||||
if (
|
||||
Array.isArray(this.props.items) &&
|
||||
this.props.items !== prevProps.items
|
||||
) {
|
||||
const pageCount = Math.max(
|
||||
1,
|
||||
Math.ceil(this.props.items.length / Math.max(1, this.state.pageSize)),
|
||||
Math.ceil(total / Math.max(1, this.state.pageSize)),
|
||||
);
|
||||
if (this.state.currentPage > pageCount) {
|
||||
this.setState({ currentPage: pageCount });
|
||||
this.props.onPageChange?.(pageCount);
|
||||
this.props.onPageChange?.(pageCount, {
|
||||
pageCount,
|
||||
pageSize: this.state.pageSize,
|
||||
total,
|
||||
});
|
||||
} else if (this.state.currentPage > 1) {
|
||||
const offset = (this.state.currentPage - 1) * this.state.pageSize;
|
||||
if (this.props.items.length > offset && this.props.items[offset] == null) {
|
||||
this.props.onPageChange?.(this.state.currentPage, {
|
||||
pageCount,
|
||||
pageSize: this.state.pageSize,
|
||||
total,
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
if (this.state.isDragging) {
|
||||
document.body.style.userSelect = '';
|
||||
document.body.style.cursor = '';
|
||||
window.removeEventListener('mousemove', this._onThumbDragMove);
|
||||
window.removeEventListener('mouseup', this._onThumbDragEnd);
|
||||
}
|
||||
window.removeEventListener('resize', this._onViewportChange);
|
||||
if (this.raf) {
|
||||
cancelAnimationFrame(this.raf);
|
||||
@@ -120,6 +200,93 @@ class FillSpace extends Component {
|
||||
}
|
||||
}
|
||||
|
||||
_onThumbMouseDown = (e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
const { totalCount, items } = this.props;
|
||||
const { viewportHeight, pageSize, currentPage } = this.state;
|
||||
const total = totalCount != null ? Number(totalCount) : (items?.length || 0);
|
||||
const pageCount = Math.max(1, Math.ceil(total / Math.max(1, pageSize)));
|
||||
const racewayBottom = Math.max(0, Number(this.props.racewayMarginBottom ?? RACEWAY_BOTTOM_MARGIN) || 0);
|
||||
const trackHeight = Math.max(0, (viewportHeight || 0) - racewayBottom);
|
||||
const thumbHeight = Math.max(MIN_THUMB_HEIGHT, Math.min(trackHeight, total > 0 ? (pageSize / total) * trackHeight : trackHeight));
|
||||
const maxThumbTravel = Math.max(0, trackHeight - thumbHeight);
|
||||
const currentThumbTop = pageCount > 1 && maxThumbTravel > 0 ? ((currentPage - 1) / (pageCount - 1)) * maxThumbTravel : 0;
|
||||
|
||||
this.dragStartY = e.clientY;
|
||||
this.dragStartThumbTop = currentThumbTop;
|
||||
this.setState({ isDragging: true, dragThumbTop: currentThumbTop });
|
||||
document.body.style.userSelect = 'none';
|
||||
document.body.style.cursor = 'grabbing';
|
||||
window.addEventListener('mousemove', this._onThumbDragMove);
|
||||
window.addEventListener('mouseup', this._onThumbDragEnd);
|
||||
};
|
||||
|
||||
_onThumbDragMove = (e) => {
|
||||
if (!this.state.isDragging) return;
|
||||
const { totalCount, items } = this.props;
|
||||
const { viewportHeight, pageSize } = this.state;
|
||||
const total = totalCount != null ? Number(totalCount) : (items?.length || 0);
|
||||
const pageCount = Math.max(1, Math.ceil(total / Math.max(1, pageSize)));
|
||||
if (pageCount <= 1) return;
|
||||
|
||||
const racewayBottom = Math.max(0, Number(this.props.racewayMarginBottom ?? RACEWAY_BOTTOM_MARGIN) || 0);
|
||||
const trackHeight = Math.max(0, (viewportHeight || 0) - racewayBottom);
|
||||
const thumbHeight = Math.max(MIN_THUMB_HEIGHT, Math.min(trackHeight, total > 0 ? (pageSize / total) * trackHeight : trackHeight));
|
||||
const maxThumbTravel = Math.max(0, trackHeight - thumbHeight);
|
||||
if (maxThumbTravel <= 0) return;
|
||||
|
||||
const deltaY = e.clientY - this.dragStartY;
|
||||
const nextThumbTop = Math.max(0, Math.min(maxThumbTravel, this.dragStartThumbTop + deltaY));
|
||||
const targetPage = Math.min(pageCount, Math.max(1, Math.round(1 + (nextThumbTop / maxThumbTravel) * (pageCount - 1))));
|
||||
|
||||
this.setState({ dragThumbTop: nextThumbTop });
|
||||
if (targetPage !== this.state.currentPage) {
|
||||
this._goToPage(targetPage);
|
||||
}
|
||||
};
|
||||
|
||||
_onThumbDragEnd = () => {
|
||||
document.body.style.userSelect = '';
|
||||
document.body.style.cursor = '';
|
||||
window.removeEventListener('mousemove', this._onThumbDragMove);
|
||||
window.removeEventListener('mouseup', this._onThumbDragEnd);
|
||||
this.setState({ isDragging: false });
|
||||
};
|
||||
|
||||
_handleTrackMouseDown = (e) => {
|
||||
if (e.target === this.thumbRef || this.thumbRef?.contains(e.target)) return;
|
||||
if (!this.trackRef) return;
|
||||
const trackRect = this.trackRef.getBoundingClientRect();
|
||||
const clickY = e.clientY - trackRect.top;
|
||||
const { viewportHeight, pageSize } = this.state;
|
||||
const { items, totalCount } = this.props;
|
||||
const total = totalCount != null ? Number(totalCount) : (items?.length || 0);
|
||||
const pageCount = Math.max(1, Math.ceil(total / Math.max(1, pageSize)));
|
||||
if (pageCount <= 1) return;
|
||||
|
||||
const racewayBottom = Math.max(0, Number(this.props.racewayMarginBottom ?? RACEWAY_BOTTOM_MARGIN) || 0);
|
||||
const trackHeight = Math.max(0, (viewportHeight || 0) - racewayBottom);
|
||||
if (trackHeight <= 0) return;
|
||||
const thumbHeight = Math.max(MIN_THUMB_HEIGHT, Math.min(trackHeight, total > 0 ? (pageSize / total) * trackHeight : trackHeight));
|
||||
const maxThumbTravel = Math.max(0, trackHeight - thumbHeight);
|
||||
const targetThumbTop = Math.max(0, Math.min(maxThumbTravel, clickY - thumbHeight / 2));
|
||||
const targetPage = maxThumbTravel > 0 ? Math.min(pageCount, Math.max(1, Math.round(1 + (targetThumbTop / maxThumbTravel) * (pageCount - 1)))) : 1;
|
||||
this._goToPage(targetPage);
|
||||
};
|
||||
|
||||
scrollToTop = () => {
|
||||
this._goToPage(1);
|
||||
};
|
||||
|
||||
scrollToIndex = (index) => {
|
||||
const { pageSize } = this.state;
|
||||
if (pageSize > 0) {
|
||||
const targetPage = Math.floor(index / pageSize) + 1;
|
||||
this._goToPage(targetPage);
|
||||
}
|
||||
};
|
||||
|
||||
_onViewportChange = () => {
|
||||
if (this.raf) return;
|
||||
this.raf = requestAnimationFrame(() => {
|
||||
@@ -144,7 +311,7 @@ class FillSpace extends Component {
|
||||
containerTarget,
|
||||
];
|
||||
for (const el of targets) {
|
||||
if (el && el.offsetParent !== null) {
|
||||
if (el && typeof Element !== 'undefined' && el instanceof Element && el.offsetParent !== null) {
|
||||
this.observer.observe(el);
|
||||
}
|
||||
}
|
||||
@@ -165,7 +332,8 @@ class FillSpace extends Component {
|
||||
|
||||
/** Only measures the height of the `renderItem` probe. Nothing else. */
|
||||
_probeMeasure() {
|
||||
const h = this.probeRef?.offsetHeight;
|
||||
const firstRow = this.ref?.querySelector('[data-fill-row]');
|
||||
const h = this.probeRef?.offsetHeight || firstRow?.offsetHeight;
|
||||
if (h > 0 && h !== this.state.unitHeight) {
|
||||
this.setState({ unitHeight: h }, () => this._viewportMeasure());
|
||||
}
|
||||
@@ -197,23 +365,31 @@ class FillSpace extends Component {
|
||||
available = Math.max(0, window.innerHeight - rect.top - belowPx);
|
||||
}
|
||||
const minSize = Math.max(1, Number(minPageSize) || 10);
|
||||
const maxSize = Number(this.props.maxPageSize) > 0 ? Number(this.props.maxPageSize) : Infinity;
|
||||
const { unitHeight } = this.state;
|
||||
const nextPageSize =
|
||||
const calculated =
|
||||
unitHeight > 0 ? Math.max(minSize, Math.floor(available / unitHeight)) : minSize;
|
||||
const nextPageSize = Math.min(maxSize, calculated);
|
||||
const nextViewportHeight =
|
||||
Number.isFinite(maxSize) && unitHeight > 0
|
||||
? Math.min(available, nextPageSize * unitHeight)
|
||||
: available;
|
||||
if (
|
||||
available !== this.state.viewportHeight ||
|
||||
nextViewportHeight !== this.state.viewportHeight ||
|
||||
nextPageSize !== this.state.pageSize
|
||||
) {
|
||||
this.setState({ viewportHeight: available, pageSize: nextPageSize });
|
||||
this.setState({ viewportHeight: nextViewportHeight, pageSize: nextPageSize });
|
||||
}
|
||||
}
|
||||
|
||||
_handleWheel = (event) => {
|
||||
const { items } = this.props;
|
||||
if (this.props.disableWheel) return;
|
||||
const { items, totalCount } = this.props;
|
||||
if (!Array.isArray(items)) return;
|
||||
if (this.ref && event.target && !this.ref.contains(event.target)) return;
|
||||
const { pageSize, currentPage } = this.state;
|
||||
const pageCount = Math.max(1, Math.ceil(items.length / Math.max(1, pageSize)));
|
||||
const total = totalCount != null ? Number(totalCount) : items.length;
|
||||
const pageCount = Math.max(1, Math.ceil(total / Math.max(1, pageSize)));
|
||||
const delta = event.deltaY || 0;
|
||||
if (pageCount <= 1) return;
|
||||
if (delta === 0) return;
|
||||
@@ -231,13 +407,18 @@ class FillSpace extends Component {
|
||||
};
|
||||
|
||||
_goToPage = (page) => {
|
||||
const { items, onPageChange } = this.props;
|
||||
const total = Array.isArray(items) ? items.length : 0;
|
||||
const { items, onPageChange, totalCount } = this.props;
|
||||
const total =
|
||||
totalCount != null
|
||||
? Number(totalCount)
|
||||
: Array.isArray(items)
|
||||
? items.length
|
||||
: 0;
|
||||
const pageCount = Math.max(1, Math.ceil(total / Math.max(1, this.state.pageSize)));
|
||||
const next = Math.min(Math.max(1, Number(page) || 1), pageCount);
|
||||
if (next === this.state.currentPage) return;
|
||||
this.setState({ currentPage: next });
|
||||
onPageChange?.(next);
|
||||
onPageChange?.(next, { pageCount, pageSize: this.state.pageSize, total });
|
||||
};
|
||||
|
||||
render() {
|
||||
@@ -250,11 +431,24 @@ class FillSpace extends Component {
|
||||
minHeight,
|
||||
maxHeight,
|
||||
minPageSize,
|
||||
maxPageSize,
|
||||
totalCount,
|
||||
unfilteredCount,
|
||||
unfilteredTotal: propUnfilteredTotal,
|
||||
resetKey,
|
||||
listRef,
|
||||
onPageChange,
|
||||
onWheel,
|
||||
disableWheel = false,
|
||||
virtualScrollbar = false,
|
||||
reserveScrollbar,
|
||||
racewayMarginBottom,
|
||||
racewayRight,
|
||||
debug = false,
|
||||
items,
|
||||
renderItem,
|
||||
header,
|
||||
headerItem,
|
||||
sx,
|
||||
...rest
|
||||
} = this.props;
|
||||
@@ -264,77 +458,124 @@ class FillSpace extends Component {
|
||||
// type or callback). `items` may be undefined while data is loading.
|
||||
const { pageSize, currentPage, viewportHeight } = this.state;
|
||||
const list = Array.isArray(items) ? items : [];
|
||||
const total = list.length;
|
||||
const total = totalCount != null ? Number(totalCount) : list.length;
|
||||
const rawUnfiltered = propUnfilteredTotal ?? unfilteredCount;
|
||||
const unfilteredTotal = rawUnfiltered != null ? Number(rawUnfiltered) : null;
|
||||
const fullTotal = unfilteredTotal != null ? Math.max(unfilteredTotal, total) : Math.max(this.maxSeenCount || 0, total);
|
||||
const needsPaginationContainer = fullTotal > pageSize;
|
||||
const showPaginationControls = total > pageSize;
|
||||
const pageCount = Math.max(1, Math.ceil(total / Math.max(1, pageSize)));
|
||||
const safePage = Math.min(Math.max(1, currentPage), pageCount);
|
||||
const offset = (safePage - 1) * pageSize;
|
||||
const pageItems = list.slice(offset, offset + pageSize);
|
||||
const showPagination = total > pageSize;
|
||||
// Hidden data-free probe: measures `renderItem` itself (no data).
|
||||
const probe = renderProbeElement(renderItem);
|
||||
|
||||
const canScroll =
|
||||
virtualScrollbar &&
|
||||
total > pageSize &&
|
||||
(viewportHeight || 0) > 0;
|
||||
|
||||
const racewayBottom = Math.max(0, Number(racewayMarginBottom ?? RACEWAY_BOTTOM_MARGIN) || 0);
|
||||
const racewayRightOffset = racewayRight != null ? racewayRight : 0;
|
||||
const scrollbarReserved = reserveScrollbar ?? Boolean(virtualScrollbar);
|
||||
const scrollbarPadding = scrollbarReserved
|
||||
? `${Math.max(0, RACEWAY_WIDTH + racewayRightOffset + 8)}px`
|
||||
: 0;
|
||||
|
||||
let thumbHeight = 0;
|
||||
let thumbTop = 0;
|
||||
|
||||
if (canScroll) {
|
||||
const trackHeight = Math.max(0, (viewportHeight || 0) - racewayBottom);
|
||||
thumbHeight = Math.max(MIN_THUMB_HEIGHT, Math.min(trackHeight, total > 0 ? (pageSize / total) * trackHeight : trackHeight));
|
||||
const maxThumbTravel = Math.max(0, trackHeight - thumbHeight);
|
||||
thumbTop = this.state.isDragging
|
||||
? this.state.dragThumbTop
|
||||
: (pageCount > 1 && maxThumbTravel > 0 ? ((safePage - 1) / (pageCount - 1)) * maxThumbTravel : 0);
|
||||
}
|
||||
|
||||
// Hidden probe: measures `renderItem` (passes headerItem when provided).
|
||||
const probe = renderProbeElement(renderItem, this.props.headerItem);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Box
|
||||
// Fixed single-line bar: the header height must not depend on the
|
||||
// page count. Otherwise the first fit (e.g. "1-17") pushes the
|
||||
// spacer down, the available height shrinks, and a second pass
|
||||
// flips to "1-15". One pass: constant 44px, real values always
|
||||
// rendered (only visibility is gated), no placeholder numbers.
|
||||
sx={{ mb: 1, height: 44, overflow: 'hidden' }}
|
||||
>
|
||||
{needsPaginationContainer ? (
|
||||
<Box
|
||||
// Fixed single-line bar: the header height must not depend on the
|
||||
// filtered count so the content never shifts when filtering.
|
||||
sx={{ mb: 1, height: 44, overflow: 'hidden' }}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
flexWrap: 'nowrap',
|
||||
gap: 1,
|
||||
width: '100%',
|
||||
height: 44,
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
variant="body2"
|
||||
color="text.secondary"
|
||||
noWrap
|
||||
sx={{ flexShrink: 1, minWidth: 0, overflow: 'hidden', textOverflow: 'ellipsis' }}
|
||||
>
|
||||
{total === 0
|
||||
? (unfilteredTotal != null && unfilteredTotal > 0
|
||||
? `0 von ${total} (${unfilteredTotal} gesamt)`
|
||||
: '0')
|
||||
: `${offset + 1}–${Math.min(offset + pageSize, total)} von ${total}${
|
||||
unfilteredTotal != null && unfilteredTotal > total
|
||||
? ` (${unfilteredTotal} gesamt)`
|
||||
: ''
|
||||
}`}
|
||||
</Typography>
|
||||
<Pagination
|
||||
count={pageCount}
|
||||
page={safePage}
|
||||
onChange={(_e, page) => this._goToPage(page)}
|
||||
color="primary"
|
||||
size="large"
|
||||
onMouseDown={(e) => e.preventDefault()}
|
||||
sx={{
|
||||
flexShrink: 0,
|
||||
maxWidth: '100%',
|
||||
overflowX: 'auto',
|
||||
scrollbarWidth: 'none',
|
||||
'&::-webkit-scrollbar': { display: 'none' },
|
||||
'& .MuiPagination-ul': { flexWrap: 'nowrap' },
|
||||
'& .MuiPaginationItem-root': {
|
||||
minWidth: 44,
|
||||
height: 44,
|
||||
fontSize: '1rem',
|
||||
},
|
||||
visibility: showPaginationControls ? 'visible' : 'hidden',
|
||||
pointerEvents: showPaginationControls ? 'auto' : 'none',
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
</Box>
|
||||
) : null}
|
||||
{header != null ? (
|
||||
<Box
|
||||
aria-hidden={!showPagination || undefined}
|
||||
sx={{
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
flexWrap: 'nowrap',
|
||||
gap: 1,
|
||||
width: '100%',
|
||||
height: 44,
|
||||
visibility: showPagination ? 'visible' : 'hidden',
|
||||
pointerEvents: showPagination ? 'auto' : 'none',
|
||||
pr: scrollbarPadding,
|
||||
boxSizing: 'border-box',
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
variant="body2"
|
||||
color="text.secondary"
|
||||
noWrap
|
||||
sx={{ flexShrink: 1, minWidth: 0, overflow: 'hidden', textOverflow: 'ellipsis' }}
|
||||
>
|
||||
{total === 0 ? '0' : `${offset + 1}–${Math.min(offset + pageSize, total)}`} von{' '}
|
||||
{total}
|
||||
</Typography>
|
||||
<Pagination
|
||||
count={pageCount}
|
||||
page={safePage}
|
||||
onChange={(_e, page) => this._goToPage(page)}
|
||||
color="primary"
|
||||
size="large"
|
||||
onMouseDown={(e) => e.preventDefault()}
|
||||
sx={{
|
||||
flexShrink: 0,
|
||||
maxWidth: '100%',
|
||||
overflowX: 'auto',
|
||||
scrollbarWidth: 'none',
|
||||
'&::-webkit-scrollbar': { display: 'none' },
|
||||
'& .MuiPagination-ul': { flexWrap: 'nowrap' },
|
||||
'& .MuiPaginationItem-root': {
|
||||
minWidth: 44,
|
||||
height: 44,
|
||||
fontSize: '1rem',
|
||||
},
|
||||
}}
|
||||
/>
|
||||
{header}
|
||||
</Box>
|
||||
</Box>
|
||||
) : null}
|
||||
<Box
|
||||
ref={(el) => {
|
||||
this.ref = el;
|
||||
}}
|
||||
onWheel={(e) => {
|
||||
this._handleWheel(e);
|
||||
if (!disableWheel) {
|
||||
this._handleWheel(e);
|
||||
}
|
||||
onWheel?.(e);
|
||||
}}
|
||||
{...rest}
|
||||
@@ -344,9 +585,8 @@ class FillSpace extends Component {
|
||||
height: viewportHeight ?? 'auto',
|
||||
overflow: 'hidden',
|
||||
width: '100%',
|
||||
// Keep wheel ticks from scrolling the page behind the list.
|
||||
// (No preventDefault needed — React wheel is passive.)
|
||||
overscrollBehavior: 'contain',
|
||||
// Keep wheel ticks from scrolling the page behind the list unless disableWheel is true.
|
||||
overscrollBehavior: disableWheel ? 'auto' : 'contain',
|
||||
},
|
||||
debug
|
||||
? (theme) => ({
|
||||
@@ -356,10 +596,16 @@ class FillSpace extends Component {
|
||||
sx,
|
||||
]}
|
||||
>
|
||||
<Box sx={{ width: '100%' }}>
|
||||
<List dense disablePadding sx={{ width: '100%' }}>
|
||||
<Box
|
||||
sx={{
|
||||
width: '100%',
|
||||
pr: scrollbarPadding,
|
||||
boxSizing: 'border-box',
|
||||
}}
|
||||
>
|
||||
<List ref={listRef} dense disablePadding sx={{ width: '100%' }}>
|
||||
{pageItems.map((item, i) => (
|
||||
<Box key={item?.id ?? offset + i} data-fill-row sx={{ width: '100%' }}>
|
||||
<Box key={item?.id ?? item?.sku ?? offset + i} data-fill-row sx={{ width: '100%' }}>
|
||||
{renderRowElement(renderItem, item, offset + i)}
|
||||
</Box>
|
||||
))}
|
||||
@@ -387,6 +633,57 @@ class FillSpace extends Component {
|
||||
</List>
|
||||
</Box>
|
||||
) : null}
|
||||
|
||||
{canScroll ? (
|
||||
<Box
|
||||
ref={(el) => {
|
||||
this.trackRef = el;
|
||||
}}
|
||||
onMouseDown={this._handleTrackMouseDown}
|
||||
sx={{
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
right: racewayRightOffset,
|
||||
bottom: `${racewayBottom}px`,
|
||||
width: RACEWAY_WIDTH,
|
||||
zIndex: 5,
|
||||
cursor: 'pointer',
|
||||
borderRadius: 8,
|
||||
bgcolor: (theme) => alpha(theme.palette.text.primary, 0.04),
|
||||
transition: 'background-color 0.15s ease',
|
||||
'&:hover': {
|
||||
bgcolor: (theme) => alpha(theme.palette.text.primary, 0.09),
|
||||
},
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
ref={(el) => {
|
||||
this.thumbRef = el;
|
||||
}}
|
||||
onMouseDown={this._onThumbMouseDown}
|
||||
sx={{
|
||||
position: 'absolute',
|
||||
top: thumbTop,
|
||||
height: thumbHeight,
|
||||
left: 2,
|
||||
right: 2,
|
||||
borderRadius: 6,
|
||||
bgcolor: (theme) =>
|
||||
this.state.isDragging
|
||||
? alpha(theme.palette.primary.main, 0.7)
|
||||
: alpha(theme.palette.text.primary, 0.3),
|
||||
cursor: this.state.isDragging ? 'grabbing' : 'grab',
|
||||
transition: this.state.isDragging ? 'none' : 'background-color 0.15s ease',
|
||||
'&:hover': {
|
||||
bgcolor: (theme) =>
|
||||
this.state.isDragging
|
||||
? alpha(theme.palette.primary.main, 0.7)
|
||||
: alpha(theme.palette.text.primary, 0.55),
|
||||
},
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
) : null}
|
||||
</Box>
|
||||
{debug ? (
|
||||
<Box
|
||||
|
||||
@@ -34,6 +34,7 @@ class FillSpaceMockPage extends Component {
|
||||
this.ex1 = { header: createRef(), footer: createRef() };
|
||||
this.ex2 = { header: createRef(), footer: createRef() };
|
||||
this.ex3 = { header: createRef(), footer: createRef() };
|
||||
this.exVirtual = { header: createRef(), footer: createRef() };
|
||||
}
|
||||
|
||||
render() {
|
||||
@@ -138,6 +139,37 @@ class FillSpaceMockPage extends Component {
|
||||
</Box>
|
||||
</Paper>
|
||||
|
||||
{/* Example 4: Virtual Scrollbar */}
|
||||
<Paper variant="outlined" sx={{ p: 2 }}>
|
||||
<Typography variant="subtitle2" gutterBottom>
|
||||
Virtual Scrollbar (scrollbar synchronized with pagination)
|
||||
</Typography>
|
||||
<Box sx={{ display: 'flex', flexDirection: 'column' }}>
|
||||
<Box
|
||||
ref={this.exVirtual.header}
|
||||
sx={{ bgcolor: '#e2e8f0', p: 1, borderRadius: 1, mb: 1 }}
|
||||
>
|
||||
<Typography variant="caption">Header</Typography>
|
||||
</Box>
|
||||
|
||||
<FillSpace
|
||||
aboveRef={this.exVirtual.header}
|
||||
belowRef={this.exVirtual.footer}
|
||||
items={SAMPLE_ITEMS}
|
||||
renderItem={Row}
|
||||
minPageSize={5}
|
||||
virtualScrollbar
|
||||
/>
|
||||
|
||||
<Box
|
||||
ref={this.exVirtual.footer}
|
||||
sx={{ bgcolor: '#e2e8f0', p: 1, borderRadius: 1, mt: 1 }}
|
||||
>
|
||||
<Typography variant="caption">Footer</Typography>
|
||||
</Box>
|
||||
</Box>
|
||||
</Paper>
|
||||
|
||||
<ComponentDocs name="FillSpace" />
|
||||
</Box>
|
||||
);
|
||||
|
||||
@@ -158,15 +158,14 @@ class RecordList extends Component {
|
||||
sx={{ cursor: onEdit ? 'pointer' : undefined }}
|
||||
onClick={() => this.handleRowClick(row)}
|
||||
>
|
||||
{columns.map((col) => (
|
||||
<TableCell
|
||||
key={col.key}
|
||||
align={col.align}
|
||||
padding={col.padding}
|
||||
sx={col.mono || col.key === 'number' || col.key === 'sku' ? { fontFamily: 'monospace' } : undefined}
|
||||
>
|
||||
{col.render ? col.render(row) : row[col.key]}
|
||||
</TableCell>
|
||||
))}
|
||||
{hasActions ? (
|
||||
<TableCell
|
||||
padding="checkbox"
|
||||
|
||||
@@ -8,6 +8,10 @@ import SaveOutlinedIcon from '@mui/icons-material/SaveOutlined';
|
||||
import { injectMuiTheme } from './injectMuiTheme';
|
||||
import {
|
||||
GRID_COLUMNS,
|
||||
PANEL_TILE_GRADIENT_DARK,
|
||||
PANEL_TILE_GRADIENT_DARK_TINTED,
|
||||
PANEL_TILE_GRADIENT_LIGHT,
|
||||
PANEL_TILE_GRADIENT_TINTED,
|
||||
TILE_ACTION_PADDING,
|
||||
panelTilePaperSx,
|
||||
tileActionIconSx,
|
||||
@@ -16,7 +20,8 @@ import {
|
||||
|
||||
/**
|
||||
* Read-only content panel with a title and an optional corner action (icon
|
||||
* button with busy spinner). It is a styled MUI Paper; children fill the body.
|
||||
* button with busy spinner). It is a styled MUI Paper with a modern minimal
|
||||
* diagonal gradient surface; children fill the body.
|
||||
*
|
||||
* @component PanelTile
|
||||
* @import dashgui/panels
|
||||
@@ -134,7 +139,7 @@ export const PanelTile = injectMuiTheme(PanelTileBase);
|
||||
* @behaviour Uses a CSS grid with `gap: 2` (theme spacing).
|
||||
* @behaviour Children position themselves via the `wide` prop of each tile.
|
||||
*/
|
||||
export function PanelTileGrid({ children, sx }) {
|
||||
export function PanelTileGrid({ children, sx, icon, text, label, badge, ...rest }) {
|
||||
return (
|
||||
<Box
|
||||
sx={{
|
||||
@@ -147,10 +152,17 @@ export function PanelTileGrid({ children, sx }) {
|
||||
gap: 2,
|
||||
...sx,
|
||||
}}
|
||||
{...rest}
|
||||
>
|
||||
{children}
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
export { GRID_COLUMNS };
|
||||
export {
|
||||
GRID_COLUMNS,
|
||||
PANEL_TILE_GRADIENT_LIGHT,
|
||||
PANEL_TILE_GRADIENT_TINTED,
|
||||
PANEL_TILE_GRADIENT_DARK,
|
||||
PANEL_TILE_GRADIENT_DARK_TINTED,
|
||||
};
|
||||
|
||||
191
src/panels/TabbedPanelTileGrid.jsx
Normal file
191
src/panels/TabbedPanelTileGrid.jsx
Normal file
@@ -0,0 +1,191 @@
|
||||
import React, { Component } from 'react';
|
||||
import Box from '@mui/material/Box';
|
||||
import Chip from '@mui/material/Chip';
|
||||
import Tab from '@mui/material/Tab';
|
||||
import Tabs from '@mui/material/Tabs';
|
||||
|
||||
/**
|
||||
* Tabbed wrapper for multiple `PanelTileGrid` layouts.
|
||||
*
|
||||
* Each child `PanelTileGrid` defines its tab metadata via props:
|
||||
* - `text` (or `label`): Tab label string
|
||||
* - `icon`: Optional icon ReactNode
|
||||
* - `value`: Optional unique tab value (defaults to child index)
|
||||
* - `disabled`: Optional boolean
|
||||
* - `badge`: Optional string/number shown as a pill chip next to the label
|
||||
*
|
||||
* Example:
|
||||
* ```jsx
|
||||
* <TabbedPanelTileGrid>
|
||||
* <PanelTileGrid icon={<StyleIcon />} text="Auswahl-Merkmale">
|
||||
* <PanelTile wide={2}>...</PanelTile>
|
||||
* <PanelTile wide={2}>...</PanelTile>
|
||||
* </PanelTileGrid>
|
||||
* <PanelTileGrid icon={<TuneIcon />} text="Text-Merkmale">
|
||||
* <PanelTile wide={2}>...</PanelTile>
|
||||
* </PanelTileGrid>
|
||||
* </TabbedPanelTileGrid>
|
||||
* ```
|
||||
*
|
||||
* @component TabbedPanelTileGrid
|
||||
* @import dashgui/panels
|
||||
*
|
||||
* @prop {ReactNode} children - One or more PanelTileGrid elements.
|
||||
* @prop {any} [value] - Controlled active tab value/index.
|
||||
* @prop {any} [defaultValue] - Initial active tab value/index for uncontrolled mode.
|
||||
* @prop {any} [defaultTab] - Alias for defaultValue.
|
||||
* @prop {(nextValue: any, event: React.SyntheticEvent) => void} [onChange] - Called on tab switch.
|
||||
* @prop {object} [sx] - Extra styles merged into root container Box.
|
||||
* @prop {object} [tabsWrapperSx] - Extra styles for the container around Tabs.
|
||||
* @prop {object} [tabsSx] - Extra styles merged into MUI Tabs.
|
||||
* @prop {object} [tabSx] - Extra styles merged into MUI Tab.
|
||||
*/
|
||||
export class TabbedPanelTileGrid extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
internalTab: props.defaultValue ?? props.defaultTab ?? 0,
|
||||
};
|
||||
this.handleTabChange = this.handleTabChange.bind(this);
|
||||
}
|
||||
|
||||
getTabs() {
|
||||
const children = React.Children.toArray(this.props.children).filter(Boolean);
|
||||
return children.map((child, index) => {
|
||||
const value = child.props.value !== undefined ? child.props.value : index;
|
||||
const text = child.props.text ?? child.props.label ?? child.props.title ?? `Tab ${index + 1}`;
|
||||
const icon = child.props.icon ?? null;
|
||||
const disabled = Boolean(child.props.disabled);
|
||||
const badge = child.props.badge;
|
||||
const color = child.props.color;
|
||||
return {
|
||||
value,
|
||||
text,
|
||||
icon,
|
||||
disabled,
|
||||
badge,
|
||||
color,
|
||||
child,
|
||||
index,
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
getActiveValue(tabs) {
|
||||
if (this.props.value !== undefined) {
|
||||
return this.props.value;
|
||||
}
|
||||
const { internalTab } = this.state;
|
||||
if (tabs.some((t) => t.value === internalTab)) {
|
||||
return internalTab;
|
||||
}
|
||||
const firstEnabled = tabs.find((t) => !t.disabled) ?? tabs[0];
|
||||
return firstEnabled ? firstEnabled.value : 0;
|
||||
}
|
||||
|
||||
handleTabChange(event, nextValue) {
|
||||
if (this.props.value === undefined) {
|
||||
this.setState({ internalTab: nextValue }, () => {
|
||||
if (typeof window !== 'undefined') {
|
||||
window.dispatchEvent(new Event('resize'));
|
||||
}
|
||||
});
|
||||
} else if (typeof window !== 'undefined') {
|
||||
window.dispatchEvent(new Event('resize'));
|
||||
}
|
||||
this.props.onChange?.(nextValue, event);
|
||||
}
|
||||
|
||||
render() {
|
||||
const {
|
||||
sx,
|
||||
tabsWrapperSx,
|
||||
tabsSx,
|
||||
tabSx,
|
||||
} = this.props;
|
||||
|
||||
const tabs = this.getTabs();
|
||||
if (tabs.length === 0) return null;
|
||||
|
||||
const activeValue = this.getActiveValue(tabs);
|
||||
const activeTab = tabs.find((t) => t.value === activeValue) ?? tabs[0];
|
||||
|
||||
return (
|
||||
<Box sx={sx}>
|
||||
<Box
|
||||
sx={{
|
||||
mb: 2,
|
||||
borderBottom: 1,
|
||||
borderColor: 'divider',
|
||||
...tabsWrapperSx,
|
||||
}}
|
||||
>
|
||||
<Tabs
|
||||
value={activeValue}
|
||||
onChange={this.handleTabChange}
|
||||
textColor="primary"
|
||||
indicatorColor="primary"
|
||||
sx={{
|
||||
minHeight: 44,
|
||||
'& .MuiTabs-flexContainer': {
|
||||
gap: 1,
|
||||
},
|
||||
'& .MuiTab-root': {
|
||||
minHeight: 44,
|
||||
textTransform: 'none',
|
||||
fontSize: '0.9375rem',
|
||||
fontWeight: 600,
|
||||
gap: 1,
|
||||
px: 2,
|
||||
py: 1,
|
||||
borderRadius: '8px 8px 0 0',
|
||||
color: 'text.secondary',
|
||||
'&:hover': {
|
||||
bgcolor: 'action.hover',
|
||||
color: 'text.primary',
|
||||
},
|
||||
'&.Mui-selected': {
|
||||
color: 'text.primary',
|
||||
fontWeight: 700,
|
||||
},
|
||||
'& .MuiSvgIcon-root': {
|
||||
fontSize: 20,
|
||||
},
|
||||
...tabSx,
|
||||
},
|
||||
...tabsSx,
|
||||
}}
|
||||
>
|
||||
{tabs.map((tab) => (
|
||||
<Tab
|
||||
key={String(tab.value)}
|
||||
value={tab.value}
|
||||
disabled={tab.disabled}
|
||||
icon={tab.icon}
|
||||
iconPosition="start"
|
||||
label={
|
||||
tab.badge != null ? (
|
||||
<Box sx={{ display: 'inline-flex', alignItems: 'center', gap: 1 }}>
|
||||
<span>{tab.text}</span>
|
||||
<Chip
|
||||
size="small"
|
||||
label={tab.badge}
|
||||
sx={{ height: 20, fontSize: '0.75rem', fontWeight: 600 }}
|
||||
/>
|
||||
</Box>
|
||||
) : (
|
||||
tab.text
|
||||
)
|
||||
}
|
||||
/>
|
||||
))}
|
||||
</Tabs>
|
||||
</Box>
|
||||
|
||||
{activeTab ? React.cloneElement(activeTab.child, { key: String(activeTab.value) }) : null}
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default TabbedPanelTileGrid;
|
||||
@@ -1,4 +1,12 @@
|
||||
export { PanelTile, PanelTileGrid, GRID_COLUMNS } from './PanelTile';
|
||||
export { TabbedPanelTileGrid } from './TabbedPanelTileGrid';
|
||||
export { EditablePanelTile } from './EditablePanelTile';
|
||||
export { injectMuiTheme } from './injectMuiTheme';
|
||||
export { PENDING_EDIT_BORDER } from './panelTileLayout';
|
||||
export {
|
||||
PENDING_EDIT_BORDER,
|
||||
PANEL_TILE_BORDER_RADIUS,
|
||||
PANEL_TILE_GRADIENT_LIGHT,
|
||||
PANEL_TILE_GRADIENT_TINTED,
|
||||
PANEL_TILE_GRADIENT_DARK,
|
||||
PANEL_TILE_GRADIENT_DARK_TINTED,
|
||||
} from './panelTileLayout';
|
||||
|
||||
@@ -31,6 +31,15 @@ export const tileActionIconSx = {
|
||||
|
||||
export const PANEL_TILE_BORDER_RADIUS = 4;
|
||||
|
||||
export const PANEL_TILE_GRADIENT_LIGHT =
|
||||
'linear-gradient(135deg, #ffffff 0%, #f8fafc 50%, #f1f5f9 100%)';
|
||||
export const PANEL_TILE_GRADIENT_TINTED =
|
||||
'linear-gradient(135deg, rgba(255, 255, 255, 0.45) 0%, rgba(255, 255, 255, 0) 55%, rgba(0, 0, 0, 0.04) 100%)';
|
||||
export const PANEL_TILE_GRADIENT_DARK =
|
||||
'linear-gradient(135deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0) 50%, rgba(0, 0, 0, 0.2) 100%)';
|
||||
export const PANEL_TILE_GRADIENT_DARK_TINTED =
|
||||
'linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0) 50%, rgba(0, 0, 0, 0.2) 100%)';
|
||||
|
||||
function tileRingBoxShadow(ringColor, elevationShadow) {
|
||||
const inset = `inset 0 0 0 ${PENDING_EDIT_RING_PX}px ${ringColor}`;
|
||||
return elevationShadow ? `${inset}, ${elevationShadow}` : inset;
|
||||
@@ -52,6 +61,14 @@ export function panelTilePaperSx({
|
||||
? EDITING_TILE_BORDER
|
||||
: null;
|
||||
|
||||
const isDark = theme?.palette?.mode === 'dark';
|
||||
const defaultGradient = isDark
|
||||
? PANEL_TILE_GRADIENT_DARK
|
||||
: PANEL_TILE_GRADIENT_LIGHT;
|
||||
const coloredGradient = isDark
|
||||
? PANEL_TILE_GRADIENT_DARK_TINTED
|
||||
: PANEL_TILE_GRADIENT_TINTED;
|
||||
|
||||
return {
|
||||
gridColumn: responsiveColumnSpan(wide),
|
||||
position: 'relative',
|
||||
@@ -61,7 +78,14 @@ export function panelTilePaperSx({
|
||||
flexDirection: 'column',
|
||||
border: 'none',
|
||||
borderRadius: PANEL_TILE_BORDER_RADIUS,
|
||||
...(color ? { bgcolor: color } : {}),
|
||||
...(color
|
||||
? {
|
||||
bgcolor: color,
|
||||
backgroundImage: coloredGradient,
|
||||
}
|
||||
: {
|
||||
backgroundImage: defaultGradient,
|
||||
}),
|
||||
...(ringColor
|
||||
? {
|
||||
boxShadow: tileRingBoxShadow(ringColor, elevationShadow),
|
||||
|
||||
@@ -1,13 +1,15 @@
|
||||
import { defineConfig } from 'vite';
|
||||
import react from '@vitejs/plugin-react';
|
||||
import { qrcode } from 'vite-plugin-qrcode';
|
||||
import { componentDocsPlugin } from './vite-plugin-component-docs.js';
|
||||
|
||||
// Library dev server — renders the mock pages under /dev so components can be
|
||||
// inspected in isolation, and doubles as a Vite config for consumers that want
|
||||
// to preview this package standalone.
|
||||
export default defineConfig({
|
||||
plugins: [react(), componentDocsPlugin()],
|
||||
plugins: [react(), componentDocsPlugin(), qrcode()],
|
||||
server: {
|
||||
host: true,
|
||||
port: 5199,
|
||||
},
|
||||
build: {
|
||||
|
||||
Reference in New Issue
Block a user