hypercross/ttrpg-tools
2
1
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix(md-deck): Make active card state reactive

Browse Source 
Wrap active in a getter so it updates when activeTab changes.
This commit is contained in:
hyper
2026-08-07 12:07:54 +08:00
parent a69a41875d
commit e3daac3080
1 changed files with 2 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/md-deck/CardList.tsx
+2 -2
View File
@@ -38,12 +38,12 @@ export function CardList(props: CardListProps) {
<For each={pageCards()}> <For each={pageCards()}>
{(card, index) => { {(card, index) => {
const globalIndex = () => page() * PAGE_SIZE + index(); const globalIndex = () => page() * PAGE_SIZE + index();
const active = store.state.activeTab === globalIndex(); const active = () => store.state.activeTab === globalIndex();
return ( return (
<button <button
onClick={() => store.actions.setActiveTab(globalIndex())} onClick={() => store.actions.setActiveTab(globalIndex())}
class={`flex items-center gap-2 w-full text-left px-3 py-2 rounded text-sm font-medium transition-colors cursor-pointer ${ class={`flex items-center gap-2 w-full text-left px-3 py-2 rounded text-sm font-medium transition-colors cursor-pointer ${
active active()
? "bg-blue-100 text-blue-600" ? "bg-blue-100 text-blue-600"
: "text-gray-600 hover:bg-gray-100" : "text-gray-600 hover:bg-gray-100"
}`} }`}