@nexxtmove/ui 1.25.0 → 1.27.0

package/src/components/molecules/Tree/Tree.vue

@@ -0,0 +1,342 @@
+<script lang="ts" setup>
+import { computed, nextTick, onMounted, ref, useTemplateRef, watch } from 'vue'
+import { useResizeObserver } from '@vueuse/core'
+import NexxtIcon, { type NexxtIconName } from '../../atoms/Icon/Icon.vue'
+
+export interface NexxtTreeNode {
+  /** Unique within the tree; this is what `selected` and `collapsed` hold. */
+  id: string
+  label: string
+  icon?: NexxtIconName
+  /** A node with children gets a chevron and can be folded. */
+  children?: NexxtTreeNode[]
+}
+
+export interface NexxtTreeProps {
+  /** The top-level nodes; nest `children` for deeper levels. */
+  nodes: NexxtTreeNode[]
+  /** Accessible name for the tree, e.g. the heading above it. */
+  label: string
+}
+
+interface Row {
+  node: NexxtTreeNode
+  depth: number
+  parentId: string | null
+  expandable: boolean
+  expanded: boolean
+  position: number
+  setSize: number
+}
+
+defineOptions({ name: 'NexxtTree' })
+
+const props = defineProps<NexxtTreeProps>()
+
+const selected = defineModel<string | null>('selected', { default: null })
+/** Ids of the nodes whose children are hidden. Tracking the collapsed ones makes "everything open" the default. */
+const collapsed = defineModel<string[]>('collapsed', { default: () => [] })
+
+const INDENT = 22
+
+const root = useTemplateRef<HTMLElement>('root')
+const focusedId = ref<string | null>(null)
+
+// The visible rows in document order; children of a collapsed node are left out
+const rows = computed(() => {
+  const result: Row[] = []
+
+  const walk = (nodes: NexxtTreeNode[], depth: number, parentId: string | null) => {
+    nodes.forEach((node, index) => {
+      const expandable = !!node.children?.length
+      const expanded = expandable && !collapsed.value.includes(node.id)
+
+      result.push({
+        node,
+        depth,
+        parentId,
+        expandable,
+        expanded,
+        position: index + 1,
+        setSize: nodes.length,
+      })
+
+      if (expanded) walk(node.children!, depth + 1, node.id)
+    })
+  }
+
+  walk(props.nodes, 0, null)
+
+  return result
+})
+
+// A row is only highlighted while it is actually on screen; collapsing its parent fades the
+// highlight out rather than dropping it, so reopening slides it back from the same spot
+const selectionVisible = computed(
+  () => !!selected.value && rows.value.some((row) => row.node.id === selected.value),
+)
+
+/** Geometry of the moving highlight, relative to the tree container. */
+const highlight = ref({ top: 0, height: 0 })
+const highlightElement = useTemplateRef<HTMLElement>('highlightElement')
+
+/**
+ * How the highlight travels to its next spot. A selection arrives on the row it was clicked on,
+ * so it decelerates; a row change drags the highlight along with a row that is sliding under
+ * the `move` transition, so it has to use that transition's duration and curve or the two come
+ * apart on screen. The first render and layout corrections do not travel at all.
+ */
+const MOTION = {
+  none: '',
+  select: 'transition-[transform,opacity] duration-200 ease-out-strong',
+  move: 'transition-[transform,opacity] duration-200 ease-in-out-strong',
+}
+
+const motion = ref<keyof typeof MOTION>('none')
+
+/**
+ * Matched on the dataset rather than in a selector, so an id never needs escaping. A row that is
+ * leaving keeps its id for another beat, but it is out of the flow — `absolute` marks it — and
+ * folding the same node straight back open would otherwise find that stale one.
+ */
+const rowElement = (id: string | null | undefined) =>
+  Array.from(root.value?.querySelectorAll<HTMLElement>('[data-tree-id]') ?? []).find(
+    (element) => element.dataset.treeId === id && !element.classList.contains('absolute'),
+  )
+
+const updateHighlight = async () => {
+  await nextTick()
+  if (!root.value || !selectionVisible.value) return
+
+  const element = rowElement(selected.value)
+
+  if (element) highlight.value = { top: element.offsetTop, height: element.offsetHeight }
+}
+
+/**
+ * Reposition without animating, for the first render and for layout corrections. Reading the
+ * geometry makes the browser commit the new position while the transition is still off; the
+ * class coming back after that has nothing left to animate. Deliberately not `requestAnimationFrame`:
+ * that never fires while the tree sits in a hidden tab, which would leave it unable to animate.
+ */
+const jumpTo = async (reposition: () => Promise<void>) => {
+  const previous = motion.value
+  motion.value = 'none'
+
+  await reposition()
+  await nextTick()
+  root.value?.getBoundingClientRect()
+
+  motion.value = previous
+}
+
+// Rows above the selection can appear or disappear, so every row change is a reposition too
+watch([selected, rows], ([id], [previousId]) => {
+  motion.value = id === previousId ? 'move' : 'select'
+  updateHighlight()
+})
+
+// A resize corrects the geometry — late webfonts, a narrower panel — so it never animates.
+// Expanding and collapsing resizes the tree too, and there the highlight is mid-flight: forcing
+// the geometry then cancels its transition and teleports it to the row's end position.
+useResizeObserver(root, () => {
+  if (highlightElement.value?.getAnimations().length) return
+
+  jumpTo(updateHighlight)
+})
+
+onMounted(() =>
+  jumpTo(async () => {
+    await updateHighlight()
+    // Fallback metrics put the rows at another height, which would animate once the real font lands
+    await document.fonts?.ready
+    await updateHighlight()
+  }),
+)
+
+/**
+ * Children unfold from under their parent. They are inserted at their final spot, where the rows
+ * below them are still sliding down to make room, so each one starts stacked on the parent's
+ * bottom edge and travels to its slot on the same duration and curve as the `move` transition.
+ * Fading in is what keeps the stack readable: on the way out from under the parent the children
+ * cover each other and the rows below, so the label only comes up over the last stretch, once
+ * everything has all but landed. Inline rather than in `enter-active-class`, because the two
+ * properties need their own timing.
+ */
+const ENTER_TRANSITION = 'transform 200ms var(--ease-in-out-strong), opacity 80ms linear 120ms'
+
+const onEnter = (element: Element) => {
+  const row = element as HTMLElement
+  if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return
+
+  const parent = rowElement(
+    rows.value.find((item) => item.node.id === row.dataset.treeId)?.parentId,
+  )
+  const travel = parent ? row.offsetTop - (parent.offsetTop + parent.offsetHeight) : 0
+
+  row.style.transition = 'none'
+  row.style.transform = `translateY(${-travel}px)`
+  row.style.opacity = '0'
+  // Nothing to click on a row that is still on its way and cannot be read yet
+  row.style.pointerEvents = 'none'
+
+  // Commits the start of the travel while the transition is off, so only the way back animates
+  row.getBoundingClientRect()
+
+  row.style.transition = ENTER_TRANSITION
+  row.style.transform = ''
+  row.style.opacity = ''
+}
+
+const onEnterDone = (element: Element) => {
+  const row = element as HTMLElement
+
+  row.style.transition = ''
+  row.style.pointerEvents = ''
+}
+
+// One tab stop for the whole tree: the focused row, else the selected one, else the first
+const tabStopId = computed(() => {
+  const ids = rows.value.map((row) => row.node.id)
+
+  if (focusedId.value && ids.includes(focusedId.value)) return focusedId.value
+  if (selected.value && ids.includes(selected.value)) return selected.value
+
+  return ids[0] ?? null
+})
+
+const toggle = (id: string) => {
+  collapsed.value = collapsed.value.includes(id)
+    ? collapsed.value.filter((item) => item !== id)
+    : [...collapsed.value, id]
+}
+
+const focusRow = async (id: string) => {
+  focusedId.value = id
+  await nextTick()
+
+  // Matched on the dataset rather than in a selector, so an id never needs escaping
+  Array.from(root.value?.querySelectorAll<HTMLElement>('[data-tree-id]') ?? [])
+    .find((element) => element.dataset.treeId === id)
+    ?.focus()
+}
+
+const onKeydown = (event: KeyboardEvent) => {
+  const index = rows.value.findIndex((row) => row.node.id === tabStopId.value)
+  const row = rows.value[index]
+  if (!row) return
+
+  const move = (target: Row | undefined) => {
+    if (target) focusRow(target.node.id)
+  }
+
+  switch (event.key) {
+    case 'ArrowDown':
+      move(rows.value[index + 1])
+      break
+    case 'ArrowUp':
+      move(rows.value[index - 1])
+      break
+    case 'Home':
+      move(rows.value[0])
+      break
+    case 'End':
+      move(rows.value[rows.value.length - 1])
+      break
+    case 'ArrowRight':
+      if (row.expandable && !row.expanded) toggle(row.node.id)
+      else if (row.expanded) move(rows.value[index + 1])
+      break
+    case 'ArrowLeft':
+      if (row.expanded) toggle(row.node.id)
+      else if (row.parentId) focusRow(row.parentId)
+      break
+    case 'Enter':
+    case ' ':
+      selected.value = row.node.id
+      break
+    default:
+      return
+  }
+
+  event.preventDefault()
+}
+</script>
+
+<template>
+  <div ref="root" role="tree" :aria-label="label" class="relative isolate" @keydown="onKeydown">
+    <!-- One highlight for the whole tree: selecting another row slides it instead of
+         repainting two backgrounds. Behind the rows, so their hover still reads. -->
+    <div
+      ref="highlightElement"
+      aria-hidden="true"
+      class="pointer-events-none absolute top-0 left-0 -z-10 w-full rounded-md bg-cornflower-blue-50 motion-reduce:transition-none"
+      :class="[MOTION[motion], selectionVisible ? 'opacity-100' : 'opacity-0']"
+      :style="{ transform: `translateY(${highlight.top}px)`, height: `${highlight.height}px` }"
+      data-tree-highlight
+    />
+
+    <!-- A `group` keeps the tree/treeitem relation intact now that the rows sit one level
+         deeper. Leaving rows go absolute so the remaining ones slide up right away, and go
+         invisible with them: out of the flow they stack on the first one's spot while the rows
+         below slide over them, which read as a flash of doubled labels. Folding away is not a
+         departure worth animating — the rows sliding up under the parent tell the story. -->
+    <TransitionGroup
+      tag="div"
+      role="group"
+      leave-active-class="invisible absolute w-full transition-none!"
+      move-class="transition-transform duration-200 ease-in-out-strong motion-reduce:transition-none"
+      @enter="onEnter"
+      @after-enter="onEnterDone"
+      @enter-cancelled="onEnterDone"
+    >
+      <!-- Every row keeps `small-normal`: switching the selected one to semibold widened its
+           label, which made the text jump. Colour carries the selection instead. -->
+      <div
+        v-for="row in rows"
+        :key="row.node.id"
+        role="treeitem"
+        :aria-level="row.depth + 1"
+        :aria-posinset="row.position"
+        :aria-setsize="row.setSize"
+        :aria-selected="selected === row.node.id"
+        :aria-expanded="row.expandable ? row.expanded : undefined"
+        :tabindex="row.node.id === tabStopId ? 0 : -1"
+        :data-tree-id="row.node.id"
+        class="group mb-0.5 flex cursor-pointer items-center gap-1.5 rounded-md py-1 pr-2 small-normal transition-colors duration-150 select-none focus-visible:outline-2 focus-visible:outline-cornflower-blue-500 motion-reduce:transition-none"
+        :class="
+          selected === row.node.id ? 'text-cornflower-blue-600' : 'text-gray-800 hover:bg-gray-100'
+        "
+        :style="{ paddingLeft: `${row.depth * INDENT + 4}px` }"
+        @click="selected = row.node.id"
+        @focus="focusedId = row.node.id"
+      >
+        <!-- Out of the tab order: the arrow keys expand and collapse for keyboard users.
+             Stays grey on the selected row: the chevron is a control, not part of the label. -->
+        <button
+          v-if="row.expandable"
+          type="button"
+          tabindex="-1"
+          aria-hidden="true"
+          class="flex size-5 shrink-0 cursor-pointer items-center justify-center text-gray-400 transition-colors duration-150 group-hover:text-gray-600 hover:text-gray-600 motion-reduce:transition-none"
+          @click.stop="toggle(row.node.id)"
+        >
+          <NexxtIcon
+            name="chevron-down"
+            class="extra-small-normal transition-transform duration-150 ease-out motion-reduce:transition-none"
+            :class="!row.expanded && '-rotate-90'"
+          />
+        </button>
+        <span v-else class="size-5 shrink-0" />
+
+        <NexxtIcon
+          v-if="row.node.icon"
+          :name="row.node.icon"
+          class="shrink-0 transition-colors duration-150 motion-reduce:transition-none"
+          :class="selected === row.node.id ? 'text-cornflower-blue-600' : 'text-gray-600'"
+        />
+        <span class="truncate">{{ row.node.label }}</span>
+      </div>
+    </TransitionGroup>
+  </div>
+</template>

package/src/components.json

@@ -25,7 +25,10 @@
   "NexxtInputField": "components/molecules/InputField/InputField.vue",
   "NexxtInputSelect": "components/molecules/InputSelect/InputSelect.vue",
   "NexxtModalFooter": "components/molecules/ModalFooter/ModalFooter.vue",
+  "NexxtPageCard": "components/molecules/PageCard/PageCard.vue",
   "NexxtPageContainer": "components/molecules/PageContainer/PageContainer.vue",
+  "NexxtPageMockup": "components/molecules/PageMockup/PageMockup.vue",
+  "NexxtPageTypeTile": "components/molecules/PageTypeTile/PageTypeTile.vue",
   "NexxtPagination": "components/molecules/Pagination/Pagination.vue",
   "NexxtPropertyCard": "components/molecules/PropertyCard/PropertyCard.vue",
   "NexxtSelect": "components/molecules/Select/Select.vue",
@@ -43,6 +46,7 @@
   "NexxtTimelineLanes": "components/molecules/TimelineLanes/TimelineLanes.vue",
   "NexxtToast": "components/molecules/Toast/Toast.vue",
   "NexxtToggleGroup": "components/molecules/ToggleGroup/ToggleGroup.vue",
+  "NexxtTree": "components/molecules/Tree/Tree.vue",
   "NexxtCalendar": "components/organisms/Calendar/Calendar.vue",
   "NexxtColorPicker": "components/organisms/ColorPicker/ColorPicker.vue",
   "NexxtCombobox": "components/organisms/Combobox/Combobox.vue",

package/src/index.ts

@@ -13,6 +13,12 @@ export type { EnergyLabelLetter } from './components/atoms/EnergyLabel/EnergyLab
 export type { IconType, NexxtIconName } from './components/atoms/Icon/Icon.vue'
 export type { CustomIconName } from './components/atoms/Icon/customIcons'
 export type { NexxtTabItem } from './components/molecules/Tabs/Tabs.vue'
+export type {
+  NexxtPageCardProps,
+  NexxtPageCardSlots,
+} from './components/molecules/PageCard/PageCard.vue'
+export type { NexxtPageMockupType } from './components/molecules/PageMockup/PageMockup.vue'
+export type { NexxtTreeNode, NexxtTreeProps } from './components/molecules/Tree/Tree.vue'
 export type {
   EditorAlignItemsMessages,
   EditorAlignItemsValue,
@@ -95,7 +101,10 @@ export { default as NexxtInputSelect } from './components/molecules/InputSelect/
 export { default as NexxtLoader } from './components/atoms/Loader/Loader.vue'
 export { default as NexxtModal } from './components/organisms/Modal/Modal.vue'
 export { default as NexxtModalFooter } from './components/molecules/ModalFooter/ModalFooter.vue'
+export { default as NexxtPageCard } from './components/molecules/PageCard/PageCard.vue'
 export { default as NexxtPageContainer } from './components/molecules/PageContainer/PageContainer.vue'
+export { default as NexxtPageMockup } from './components/molecules/PageMockup/PageMockup.vue'
+export { default as NexxtPageTypeTile } from './components/molecules/PageTypeTile/PageTypeTile.vue'
 export { default as NexxtPagination } from './components/molecules/Pagination/Pagination.vue'
 export { default as NexxtPresenceIndicator } from './components/atoms/PresenceIndicator/PresenceIndicator.vue'
 export { default as NexxtProgressBar } from './components/organisms/ProgressBar/ProgressBar.vue'
@@ -129,4 +138,5 @@ export { default as NexxtToast } from './components/molecules/Toast/Toast.vue'
 export { default as NexxtToaster } from './components/organisms/Toaster/Toaster.vue'
 export { default as NexxtToggleGroup } from './components/molecules/ToggleGroup/ToggleGroup.vue'
 export { default as NexxtTooltip } from './components/atoms/Tooltip/Tooltip.vue'
+export { default as NexxtTree } from './components/molecules/Tree/Tree.vue'
 export { default as NexxtVideoPlayer } from './components/organisms/VideoPlayer/VideoPlayer.vue'

package/tailwind/nexxtmove.tailwind.custom.css

@@ -49,4 +49,10 @@
 
   --spacing-8xl: 100rem;
   --spacing-full-width: 116rem; /* 1920px (full hd) minus the sidebar: max app width */
+
+  /* Motion easings. `ease-out-strong` decelerates hard: things that arrive or
+     settle into place. `ease-in-out-strong` for elements that move from one
+     spot to another. */
+  --ease-out-strong: cubic-bezier(0.23, 1, 0.32, 1);
+  --ease-in-out-strong: cubic-bezier(0.77, 0, 0.175, 1);
 }