feat(dedicated): dropdowns for radio groups, card-grid OS picker
Replaces stacked radio cards with VSelect dropdowns across CPU, RAM,
Bandwidth, IPv4, Private Networking, PCIe NVMe Add-in, and the Drive
Selection control inside each drive bay group. Major space savings —
the LFF Drive Selection alone goes from 15 stacked cards to one row
on screen, with the active price still visible at a glance via the
selection slot's right-aligned chip.
OS group becomes a tile-grid picker (`OsGroupSelector.vue`): 6 cards
with brand logos, distro name, and price chip. Logos shipped as
hand-authored SVGs at public/img/os/{ubuntu,debian,almalinux,rocky,
windows,no-os}.svg — no new npm dependency.
- Synchronous Pinia store init: moved store.init() out of onMounted
into setup so children's `selected` props are populated on first
render. Without this VSelect's selection slot fires with a stub
item before init completes and the whole tree throws on a
defensive `.toFixed` access.
- Defensive priceLabel guards in both OptionGroupSelector and
DriveBayGroupSelector for any future re-render where the slot's
raw item is incomplete.
- isOperatingSystemGroup() helper alongside isDriveBayGroup() in the
store; configurator switches OS → OsGroupSelector, drive bays →
DriveBayGroupSelector, everything else → OptionGroupSelector.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
5
website/public/img/os/almalinux.svg
Normal file
5
website/public/img/os/almalinux.svg
Normal file
@@ -0,0 +1,5 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" role="img" aria-label="AlmaLinux">
|
||||
<circle cx="32" cy="32" r="32" fill="#0E1F3D"/>
|
||||
<path d="M32 12 C 36 22, 44 26, 50 30 C 44 32, 36 38, 32 50 C 28 38, 20 32, 14 30 C 20 26, 28 22, 32 12 Z" fill="#FA9001"/>
|
||||
<circle cx="32" cy="30" r="3.5" fill="#FFD200"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 329 B |
5
website/public/img/os/debian.svg
Normal file
5
website/public/img/os/debian.svg
Normal file
@@ -0,0 +1,5 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" role="img" aria-label="Debian">
|
||||
<circle cx="32" cy="32" r="32" fill="#fff"/>
|
||||
<path d="M40 9 C 22 9, 9 22, 9 39 C 9 50, 16 58, 25 58 C 17 55, 13 47, 13 38 C 13 23, 25 11, 41 11 C 47 11, 52 13, 56 17 C 52 12, 47 9, 40 9 Z" fill="#D70751"/>
|
||||
<path d="M30 23 C 38 23, 42 28, 42 33 C 42 39, 38 43, 31 43 C 28 42, 26 40, 26 38 C 28 39, 30 40, 32 40 C 36 40, 39 38, 39 33 C 39 28, 35 25, 30 25 Z" fill="#D70751"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 479 B |
10
website/public/img/os/no-os.svg
Normal file
10
website/public/img/os/no-os.svg
Normal file
@@ -0,0 +1,10 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" role="img" aria-label="No OS">
|
||||
<circle cx="32" cy="32" r="32" fill="#374151"/>
|
||||
<rect x="14" y="20" width="36" height="24" rx="3" fill="none" stroke="#fff" stroke-width="2.5"/>
|
||||
<line x1="14" y1="26" x2="50" y2="26" stroke="#fff" stroke-width="2.5"/>
|
||||
<circle cx="18.5" cy="23" r="1" fill="#fff"/>
|
||||
<circle cx="22" cy="23" r="1" fill="#fff"/>
|
||||
<circle cx="25.5" cy="23" r="1" fill="#fff"/>
|
||||
<path d="M21 33 L 26 36 L 21 39" fill="none" stroke="#fff" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<line x1="30" y1="39" x2="42" y2="39" stroke="#fff" stroke-width="2.2" stroke-linecap="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 691 B |
7
website/public/img/os/rocky.svg
Normal file
7
website/public/img/os/rocky.svg
Normal file
@@ -0,0 +1,7 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" role="img" aria-label="Rocky Linux">
|
||||
<circle cx="32" cy="32" r="32" fill="#10B981"/>
|
||||
<path d="M8 50 L 22 26 L 32 38 L 42 22 L 56 50 Z" fill="#fff"/>
|
||||
<path d="M22 26 L 32 38 L 27 38 Z" fill="#0F766E" opacity="0.45"/>
|
||||
<path d="M42 22 L 32 38 L 37 38 Z" fill="#0F766E" opacity="0.45"/>
|
||||
<circle cx="46" cy="20" r="3" fill="#FDE68A"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 407 B |
7
website/public/img/os/ubuntu.svg
Normal file
7
website/public/img/os/ubuntu.svg
Normal file
@@ -0,0 +1,7 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" role="img" aria-label="Ubuntu">
|
||||
<circle cx="32" cy="32" r="32" fill="#E95420"/>
|
||||
<circle cx="32" cy="9.5" r="4.5" fill="#fff"/>
|
||||
<circle cx="51.5" cy="42" r="4.5" fill="#fff"/>
|
||||
<circle cx="12.5" cy="42" r="4.5" fill="#fff"/>
|
||||
<circle cx="32" cy="32" r="9.5" fill="none" stroke="#fff" stroke-width="3"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 377 B |
7
website/public/img/os/windows.svg
Normal file
7
website/public/img/os/windows.svg
Normal file
@@ -0,0 +1,7 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" role="img" aria-label="Windows Server">
|
||||
<circle cx="32" cy="32" r="32" fill="#0078D4"/>
|
||||
<rect x="15.5" y="15.5" width="13.5" height="13.5" fill="#fff"/>
|
||||
<rect x="35" y="15.5" width="13.5" height="13.5" fill="#fff"/>
|
||||
<rect x="15.5" y="35" width="13.5" height="13.5" fill="#fff"/>
|
||||
<rect x="35" y="35" width="13.5" height="13.5" fill="#fff"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 417 B |
Reference in New Issue
Block a user