Repository navigation
feat(Kanban): add Kanban compound component over createKanban - #1012
Open
johnleider wants to merge 9 commits into
Open
johnleider wants to merge 9 commits into
johnleider wants to merge 9 commits into
Conversation
Adds Kanban.Root, Column, List, Item, Instructions, and LiveRegion. Each Column bridges its item array through v-model; Root owns a createKanban board, a pointer-only useDragDrop context, and a discrete keyboard move model (pick up, arrow/Home/End steps, drop, Escape cancel) with focus following the item across re-renders and live-region announcements for moves and rejections. closes #518
useTheme already measures 8.56 kB on dev, so the size job fails on any packages change; same bump as #788.
Arrow keys now move a virtual drop target instead of transferring the item on every step. The target skips columns that are disabled or whose accept refuses the item, is exposed as data-target on the column and list and data-drop on the neighbouring item, and is announced per step. Space or Enter commits a single transfer, so move fires once per drop; Escape and blur discard the target without touching the board. The pick-up is released when its item leaves the board and re-anchored after external reorders. aria-roledescription is now localized.
Drops the debounce advice now that keyboard moves commit once per drop, documents data-target / data-drop, shows the preview in the basic and WIP-limit examples, and registers /components/data/kanban in the typed router.
Unlabelled item names, a throwing accept, index-dependent accept, a drop refused after the target was set, and target re-anchoring when the board changes mid-pickup.
… arrows Passes the destination column into the per-step announcement instead of re-resolving it.
This branch has not been deployed
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
closes #518
Adds the Kanban compound component over
createKanban(part of #509).Anatomy
Kanban.RootcreateKanbanboard and a pointer-onlyuseDragDropcontext; owns the keyboard move model; emitsmoveKanban.Columnv-modelis the column's item array;disabledandaccept(value, from, index)gate movesKanban.Listrole="list") — direct parent of the column's items, exposesdata-overKanban.Itemvalue(role="listitem",data-state="grabbed" | "dragging" | "idle")Kanban.Instructionsaria-describedbyKanban.LiveRegionThe anatomy follows the composable's two tiers (board → column → item).
Listis split fromColumnbecauseuseDragDropresolves the drop index against the zone element's direct children, so column headers and counters must live outside the zone.Design notes
===), so values must be unique across the board. Column reconciles throughregister/unregister/reorder, falling back to offboard + onboard whenreorderis gated bydisabled.KeyboardAdapternudges a pixel point, which can't express "one slot" or "next column" reliably, so the component installs onlyPointerAdapter(4px threshold so clicks on inner controls don't start drags) and implements a discrete model. Space/Enter picks up; arrows and Home/End move a virtual drop target without touching the board (RTL-aware; axes swap fororientation="vertical"). Cross-column steps skip columns that are disabled or whoseaccept(value, from, index)refuses the item, so keyboard users reach every column a pointer drag can. The target is previewed throughdata-targeton the column and list anddata-drop="before" | "after"on the neighbouring item, and each step is announced. Space/Enter commits a single transfer; Escape and blur discard the target with no board mutation. The pick-up is released when its item leaves the board and re-anchored after external changes. Focus follows the item when a drop remounts it in another column.movefires once per drop with{ value, from, to, fromIndex, toIndex }, for pointer and keyboard alike, same-column and cross-column.Kanban.*strings inlocale/messages/en, includingaria-roledescription.createKanbancovered everything needed (transfer, per-columndisabled/accept,browsefor value lookup).useThemealready measures 8.56 kB ondev(the size job failed on feat(Otp): add Otp compound component over createOtp #787), so this carries the same 8.5 → 8.6 kB bump as feat(Virtualizer): add Virtualizer compound component over createVirtual #788 to keep the job green.Checklist
packages/0/src/components/Kanban/+ barrel +components/index.tsmaturity.json:draft→preview,since: null, descriptioncomponents/data/kanban.md+ typed-router entry, examples (basic,wip-limit,move-log), components index entry, READMEsurface.test.ts, fixture +a11y.browser.test.tsentry (0 axe violations)index.test.ts, 40 tests) and browser (index.browser.test.ts, 10 tests — real pointer drags, focus retention, keyboard skipping a rejecting column, RTL)@vuetify/v0: minor)