diff --git a/packages/hub-ui/src/client/components/dock/DockEntries.vue b/packages/hub-ui/src/client/components/dock/DockEntries.vue index db25673a..d572c4c3 100644 --- a/packages/hub-ui/src/client/components/dock/DockEntries.vue +++ b/packages/hub-ui/src/client/components/dock/DockEntries.vue @@ -2,8 +2,9 @@ import type { DevframeDockEntry } from '@devframes/hub' import type { DocksContext } from '@devframes/hub/client' import { evaluateWhen } from 'devframe/utils/when' -import { toRefs } from 'vue' +import { computed, toRefs } from 'vue' import { getGroupMembers, resolveGroupDefaultChild } from '../../state/dock-settings' +import { getCurrentDockId } from '../../state/docks' import { useSettings } from '../../state/settings-defaults' import DockEntry from './DockEntry.vue' import DockGroupButton from './DockGroupButton.vue' @@ -23,6 +24,7 @@ const emit = defineEmits<{ }>() const { selected, isVertical, entries } = toRefs(props) +const currentId = computed(() => getCurrentDockId(props.context)) const settings = useSettings(props.context) @@ -79,6 +81,7 @@ function toggleDockEntry(dock: DevframeDockEntry) { :dock :is-action="dock.type === 'action'" :is-selected="isDockActive(dock)" + :current="currentId === dock.id ? 'page' : undefined" :is-dimmed="dimInactive && selected ? !isDockActive(dock) : false" :is-vertical="isVertical" :badge="dock.badge" diff --git a/packages/hub-ui/src/client/components/dock/DockEntry.vue b/packages/hub-ui/src/client/components/dock/DockEntry.vue index 9fc8e3d4..c70c59f2 100644 --- a/packages/hub-ui/src/client/components/dock/DockEntry.vue +++ b/packages/hub-ui/src/client/components/dock/DockEntry.vue @@ -13,6 +13,12 @@ const props = withDefaults( dock: DevframeDockEntryBase isAction?: boolean isSelected?: boolean + /** + * The `aria-current` of the button: `page` for the dock shown now, `true` + * for a group or overflow button that holds it while it is out of sight. + * Unlike `isSelected`, which is also on while a group popover is open. + */ + current?: 'page' | 'true' isDimmed?: boolean isVertical?: boolean badge?: string @@ -98,6 +104,7 @@ useEventListener('pointerdown', () => {