1
0

feat(ui): token-select primitive for large multi-selects

Adds tokenSelectForm() in core/Support/helpers/ui.php: an inline
typeahead combobox + flat alphabetical removable list, designed for
selections that outgrow the chip-header of the vendor MultiSelect
(roles, permissions, and similar admin pickers).

Contract:
- Hidden <select multiple name="<name>[]"> is the form submission source —
  consumers read via $request->body() verbatim, no parsing
- Items are ['id' => int, <labelKey> => string, 'key' => string?]
  where labelKeys default to ['description', 'label', 'name']; 'key' is
  an invisible fuzzy-match hint
- $labelOverrides lets callers swap emptyState / removeTooltip /
  noMatches / clearAll / countSuffix / errorMessage with domain copy
- $disabled renders pure-presentation list (no combobox, no remove)

Runtime:
- initTokenSelect in web/js/components/app-token-select.js is registered
  as 'token-select' in app-init.js; destroy()/cleanupFns contract
- Syncs the hidden <select> on every mutation and dispatches 'change'
  so dependent UI can react

Wired up: pages/admin/permissions/_form.phtml (assigned roles),
pages/admin/roles/_form.phtml (permissions + assignable roles).
Helper contract lives in tests/Support/Helpers/TokenSelectFormHelperTest.php;
runtime contract + entrypoint registration + host usage are enforced by
FrontendRuntime*ContractTest.php.

Coexists with multiSelectForm() — pick tokenSelectForm() when the
selected set can grow beyond ~10 items or typeahead is expected.
Docs in CLAUDE.md.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
2026-04-23 23:52:32 +02:00
parent cfba3f40ed
commit b2982bdac7
12 changed files with 1336 additions and 5 deletions

View File

@@ -60,7 +60,21 @@ $keyReadonlyAttr = ($isReadOnly || !empty($values['is_system'])) ? 'readonly' :
<?php if ($roles): ?>
<div data-tab-panel="roles">
<?php multiSelectForm('permission-roles', 'role_ids', 'Assigned roles', 'Select roles', $roles, $selectedRoleIds, $isReadOnly, 'description'); ?>
<?php tokenSelectForm(
'permission-roles',
'role_ids',
'Assigned roles',
'Search roles…',
$roles,
$selectedRoleIds,
$isReadOnly,
'description',
null,
[
'emptyState' => t('No roles selected'),
'removeTooltip' => t('Remove role'),
]
); ?>
</div>
<?php endif; ?>

View File

@@ -59,7 +59,21 @@ $selectedAssignableRoleIds = is_array($selectedAssignableRoleIds ?? null) ? $sel
<div data-tab-panel="permissions">
<?php if ($permissions): ?>
<?php multiSelectForm('role-permissions', 'permission_ids', 'Assigned permissions', 'Select permissions', $permissions, $selectedPermissionIds, $isReadOnly, ['description', 'key']); ?>
<?php tokenSelectForm(
'role-permissions',
'permission_ids',
'Assigned permissions',
'Search permissions…',
$permissions,
$selectedPermissionIds,
$isReadOnly,
['description', 'key'],
null,
[
'emptyState' => t('No permissions selected'),
'removeTooltip' => t('Remove permission'),
]
); ?>
<?php else: ?>
<?php
$emptyState = [
@@ -74,7 +88,21 @@ $selectedAssignableRoleIds = is_array($selectedAssignableRoleIds ?? null) ? $sel
<div data-tab-panel="assignable-roles">
<?php if ($allRolesForAssignable): ?>
<?php multiSelectForm('role-assignable-roles', 'assignable_role_ids', 'Assignable roles', 'Select roles', $allRolesForAssignable, $selectedAssignableRoleIds, $isReadOnly, 'description'); ?>
<?php tokenSelectForm(
'role-assignable-roles',
'assignable_role_ids',
'Assignable roles',
'Search roles…',
$allRolesForAssignable,
$selectedAssignableRoleIds,
$isReadOnly,
'description',
null,
[
'emptyState' => t('No roles selected'),
'removeTooltip' => t('Remove role'),
]
); ?>
<?php else: ?>
<?php
$emptyState = [