feat(pool): add table-driven account batch actions

frontend/src/components/ui/__tests__/checkbox.spec.ts

@@ -0,0 +1,37 @@
+import { afterEach, describe, expect, it } from 'vitest'
+import { createApp, h, nextTick, ref, type App } from 'vue'
+
+import Checkbox from '../checkbox.vue'
+
+const mountedApps: Array<{ app: App, root: HTMLElement }> = []
+
+afterEach(() => {
+  for (const { app, root } of mountedApps.splice(0)) {
+    app.unmount()
+    root.remove()
+  }
+})
+
+describe('Checkbox', () => {
+  it('applies and clears the native indeterminate state', async () => {
+    const indeterminate = ref(true)
+    const root = document.createElement('div')
+    document.body.appendChild(root)
+    const app = createApp({
+      render: () => h(Checkbox, { indeterminate: indeterminate.value }),
+    })
+
+    app.mount(root)
+    mountedApps.push({ app, root })
+
+    const input = root.querySelector<HTMLInputElement>('input[type="checkbox"]')
+    expect(input?.indeterminate).toBe(true)
+    expect(input?.getAttribute('aria-checked')).toBe('mixed')
+
+    indeterminate.value = false
+    await nextTick()
+
+    expect(input?.indeterminate).toBe(false)
+    expect(input?.getAttribute('aria-checked')).toBe('false')
+  })
+})

frontend/src/components/ui/checkbox.vue

@@ -1,20 +1,23 @@
 <template>
   <input
+    ref="inputRef"
     type="checkbox"
     :class="checkboxClass"
     v-bind="$attrs"
     :checked="isChecked"
+    :aria-checked="indeterminate ? 'mixed' : isChecked"
     @change="handleChange"
   >
 </template>
 
 <script setup lang="ts">
-import { computed } from 'vue'
+import { computed, ref, watchEffect } from 'vue'
 import { cn } from '@/lib/utils'
 
 interface Props {
   modelValue?: boolean
   checked?: boolean
+  indeterminate?: boolean
   class?: string
 }
 
@@ -38,6 +41,14 @@ const isChecked = computed<boolean>(() => {
   return props.modelValue ?? false
 })
 
+const inputRef = ref<HTMLInputElement | null>(null)
+
+watchEffect(() => {
+  if (inputRef.value) {
+    inputRef.value.indeterminate = props.indeterminate ?? false
+  }
+}, { flush: 'post' })
+
 function handleChange(event: Event) {
   const target = event.target as HTMLInputElement
   const value = target.checked