Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Sign up
Appearance settings

feat: add InputSelect composition#647

Draft
isaquebock wants to merge 1 commit into
main from
feat/inputs-select
Draft

feat: add InputSelect composition #647
isaquebock wants to merge 1 commit into
main from
feat/inputs-select

Conversation

@isaquebock

@isaquebock isaquebock commented Jun 17, 2026

Copy link
Copy Markdown
Contributor

Summary

Introduce @aziontech/webkit/inputs/input-select and its sub-components, composed via a shared injection key:

  • input-select — root, owns selection state + emits update:modelValue.
  • input-select-trigger — the clickable trigger that opens the listbox.
  • input-select-content — the floating listbox surface.
  • input-select-group — optional grouping with header.
  • input-select-option — individual option, picks selected value via the shared context.

The composition follows the shadcn-vue convention: the consumer controls the structure, the root owns state.

Independent from the other inputs PRs in the series (no shared imports with Label / HelperText / InputText).

Test plan

  • pnpm --filter @aziontech/webkit lint — clean.
  • Storybook → Webkit/Inputs/InputSelect → open the trigger, pick an option, value reflects in the controls panel.
  • Keyboard: Tab to trigger → Enter/Space to open → arrows navigate → Enter selects → Esc closes.

Known type-check noise

pnpm --filter @aziontech/webkit type-check reports the following errors in this PR's scope — they reflect known Vue 3 Booleanish | undefined narrowing limitations around data-* attrs and an emit overload conflict. Tracking separately; do not block this PR:

  • input-select-content.vue(121,10)Booleanish | undefined on data-* attrs
  • input-select-option.vue(62,6) — same
  • input-select-trigger.vue(39, 46-48) — same + HTMLElement | null ref typing
  • input-select.vue(85, 106)emit('update:modelValue', value) overload mismatch

Introduce `@aziontech/webkit/inputs/input-select` and its sub-components
(`input-select-trigger`, `input-select-content`, `input-select-group`,
`input-select-option`), composed via a shared injection key for context
sharing without prop drilling.
The composition pattern follows the shadcn-vue convention: the consumer
controls the structure (`<InputSelect><InputSelectTrigger /><InputSelectContent>
<InputSelectGroup><InputSelectOption /></InputSelectGroup></InputSelectContent></InputSelect>`),
while the parent `InputSelect` owns selection state and exposes `modelValue`
+ `update:modelValue` for v-model binding.
@isaquebock isaquebock requested a review from a team as a code owner June 17, 2026 17:48
@isaquebock isaquebock marked this pull request as draft June 17, 2026 17:55
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Labels

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

1 participant

AltStyle によって変換されたページ (->オリジナル) /