-
feat(homecore-ui iter 2): Edit Entity modal + shadow-DOM focus delegation
frostbyte_neo 发布于
2026-05-26 18:48:49 +00:00 CRUD increment 2/6 — clicking any state card on the Dashboard opens
the Add Entity modal in EDIT mode: pre-populated, entity_id locked,
"Save" primary button, idempotent POST to /api/states/ (backend
returns 200 if existed, 201 if created — same handler).frontend/src/components/StateCard.ts:
- card div is now role="button" tabindex=0, dispatches
hc-state-card-clickon click + Enter/Space keydown - aria-label="Edit <entity_id>" for screen readers
- shadowRootOptions delegatesFocus=true so the outer Tab sequence
can reach the inner focusable div (caught by browser agent —
without this Tab couldn't pierce the shadow root)
frontend/src/pages/Dashboard.ts:
- new state: editingState (null = create, StateView = edit)
- _openEdit() catches
hc-state-card-clickfrom the grid container - modal heading switches: "Add entity" ↔ "Edit <entity_id>"
- primary button text switches: "Create" ↔ "Save"
- EntityForm receives .editing=true so entity_id input is disabled
- submit toast reads "Updated" or "Created" depending on mode
Browser-verified end-to-end (real homecore-server :8123, 12 entities):
- Click
light.kitchen_ceiling→ modal opens with all 4 attributes
(brightness=230, color_temp_kelvin=4000, friendly_name,
supported_color_modes) pre-populated - Change state to "off", click Save → toast "Updated
light.kitchen_ceiling = off", grid card reflects new state - Backend curl confirms /api/states/light.kitchen_ceiling.state = "off"
- Enter key on focused card opens the modal too
- 0 console errors
Co-Authored-By: claude-flow ruv@ruv.net
下载附件
- card div is now role="button" tabindex=0, dispatches