vectis-ui 0.13.0 → 0.15.0

package/dist/components/VTreeView/VTreeView.js.map

@@ -1 +1 @@
-{"version":3,"file":"VTreeView.js","names":[],"sources":["../../../src/components/VTreeView/VTreeView.vue"],"sourcesContent":["<script setup lang=\"ts\">\n// @keyboard @a11y @core\n/**\n * A hierarchy following the ARIA tree pattern. The rows are rendered flat, in display order, their\n * depth carried by `aria-level`, `aria-setsize` and `aria-posinset`: no native element folds a tree\n * with a single tab stop, and a row that does not wrap its subtree keeps its accessible name free of\n * its descendants' text. JavaScript owns the focus, the keyboard, selection and lazy loading.\n */\nimport { computed, onMounted, ref, shallowReactive, watch } from 'vue'\nimport type { ComponentPublicInstance } from 'vue'\n\nimport VCheckMark from '../VCheckbox/VCheckMark.vue'\nimport VIcon from '../VIcon/VIcon.vue'\nimport VSpinner from '../VSpinner/VSpinner.vue'\nimport { iconProps } from '../VIcon/iconProps'\nimport { chevron_right as chevronRightIcon } from '../VIcon/icons/chevron_right'\nimport { error as errorIcon } from '../VIcon/icons/error'\nimport type { IconSource } from '../VIcon/types'\nimport type { ItemValue } from '../../types'\nimport { useAriaLabel } from '../../composables/useAriaLabel'\nimport { useLiveAnnouncer } from '../../composables/useLiveAnnouncer'\nimport { useRootAttrs } from '../../composables/useRootAttrs'\nimport { useTimer } from '../../composables/useTimer'\nimport { useMessages } from '../../i18n/state'\nimport { isRtl } from '../../utils/direction'\nimport { normalizeText } from '../../utils/text'\n\n/** Whether nodes can be selected: not at all, one at a time, or several with checkboxes. */\nexport type TreeSelectionMode = 'none' | 'single' | 'multiple'\n\n/** The height of the rows: 32 or 40 pixels. */\nexport type TreeViewSize = 'sm' | 'md'\n\n/**\n * What is selected, and its shape follows `selectionMode`: a single value (or `null`) in `single`\n * mode, an array in `multiple` mode.\n */\nexport type TreeViewModelValue = ItemValue | ItemValue[] | null\n\n/** One node of the tree. */\nexport interface TreeItem {\n  /** What identifies the node, in the selection and expansion models. Unique across the tree. */\n  value: ItemValue\n  /** What the row says. It is also what typeahead matches. */\n  label: string\n  /** An icon before the label: an icon name, or an explicit render. */\n  icon?: IconSource\n  /** The child nodes, which make this node a branch. */\n  children?: TreeItem[]\n  /**\n   * Marks a branch whose children `loadChildren` fetches on its first expansion. Ignored when\n   * `children` is set or when the tree has no `loadChildren`.\n   */\n  lazy?: boolean\n  /** Where the node leads, which makes the row a link. */\n  href?: string\n  /** Marks the node as the page being viewed (`aria-current`). */\n  current?: boolean\n  /**\n   * Keeps the node focusable, so it is still found, but it cannot be selected, activated, expanded\n   * or collapsed.\n   */\n  disabled?: boolean\n}\n\n/** What the `#icon`, `#label` and `#end` slots receive. */\nexport interface TreeItemSlotProps {\n  item: TreeItem\n  /** The depth of the node, from 1. */\n  level: number\n  /** Whether the node's children are shown. */\n  expanded: boolean\n}\n\ntype CheckState = 'true' | 'false' | 'mixed'\n\ninterface TreeNode {\n  item: TreeItem\n  level: number\n  parent: TreeNode | null\n  posinset: number\n  setsize: number\n}\n\ninterface TreeViewProps {\n  /** The first level of the tree. */\n  items: TreeItem[]\n  /**\n   * Whether nodes can be selected. In `multiple` mode each row has a checkbox, and checking a\n   * branch checks everything under it.\n   */\n  selectionMode?: TreeSelectionMode\n  /**\n   * Fetches the children of a `lazy` node, on its first expansion. The tree keeps them; a failure\n   * collapses the node again, and the next expansion retries.\n   */\n  loadChildren?: (item: TreeItem) => Promise<TreeItem[]>\n  /** The height of the rows, 32 or 40 pixels. */\n  size?: TreeViewSize\n  /** What screen readers announce for the tree. It falls back to the design system dictionary. */\n  label?: string\n}\n\ndefineOptions({ inheritAttrs: false })\n\nconst props = withDefaults(defineProps<TreeViewProps>(), {\n  selectionMode: 'none',\n  loadChildren: undefined,\n  size: 'md',\n  label: undefined,\n})\n\n/**\n * What is selected. In `single` mode, a value or `null`; in `multiple` mode, the checked nodes in\n * tree order, a branch included when everything under it is checked. A value given for a branch\n * checks its whole subtree. A shape that does not match the mode reads as an empty selection.\n */\nconst model = defineModel<TreeViewModelValue>({ default: null })\n\n/** The values of the expanded nodes. Left unbound, the tree keeps that state itself. */\nconst expanded = defineModel<ItemValue[]>('expanded', { default: () => [] })\n\nconst emit = defineEmits<{\n  /**\n   * A node was clicked or Enter was pressed on it, after the tree applied its own effect: selecting\n   * it, checking it, or folding a branch in `none` mode. For a link, calling `preventDefault()` on\n   * the event stops the navigation, which hands it to a router.\n   */\n  activate: [item: TreeItem, event: MouseEvent | KeyboardEvent]\n}>()\n\ndefineSlots<{\n  /** Replaces the icon of a node, for instance to show an open folder when it is expanded. */\n  icon?(props: TreeItemSlotProps): unknown\n  /** Replaces the label of a node. */\n  label?(props: TreeItemSlotProps): unknown\n  /**\n   * Content at the end of a row: a count, a badge. It must not be focusable: a row is a single\n   * control.\n   */\n  end?(props: TreeItemSlotProps): unknown\n}>()\n\nconst { rootClass, rootStyle, forwardedAttrs } = useRootAttrs()\nconst m = useMessages()\nconst ariaLabel = useAriaLabel(() => props.label ?? m.value.treeView.label)\nconst { polite: announcement, announce } = useLiveAnnouncer()\n\nconst loaded = shallowReactive(new Map<ItemValue, TreeItem[]>())\nconst loading = shallowReactive(new Set<ItemValue>())\nconst failed = shallowReactive(new Set<ItemValue>())\n\nfunction childrenOf(item: TreeItem): TreeItem[] | undefined {\n  return item.children ?? loaded.get(item.value)\n}\n\nfunction isPending(item: TreeItem): boolean {\n  return !!props.loadChildren && !!item.lazy && !item.children && !loaded.has(item.value)\n}\n\nfunction isBranch(item: TreeItem): boolean {\n  return !!childrenOf(item)?.length || isPending(item)\n}\n\nconst expandedSet = computed(() => new Set(expanded.value))\n\n/** The rows on screen, in display order: every node whose ancestors are all expanded. */\nconst visible = computed(() => {\n  const rows: TreeNode[] = []\n  const walk = (items: TreeItem[], level: number, parent: TreeNode | null) => {\n    items.forEach((item, index) => {\n      const node = { item, level, parent, posinset: index + 1, setsize: items.length }\n      rows.push(node)\n      const children = childrenOf(item)\n      if (children && expandedSet.value.has(item.value)) walk(children, level + 1, node)\n    })\n  }\n  walk(props.items, 1, null)\n  return rows\n})\n\nfunction setExpanded(item: TreeItem, open: boolean) {\n  if (open === expandedSet.value.has(item.value)) return\n  expanded.value = open\n    ? [...expanded.value, item.value]\n    : expanded.value.filter((value) => value !== item.value)\n}\n\n// @core\n/**\n * Derives what each checkbox shows. A value in the selection checks its node and the whole subtree\n * under it; a branch then shows checked when all its children are, unchecked when none are, and\n * mixed otherwise, so its own presence in the selection only matters through its children. The map\n * is filled in tree order, which is the order the model is written in.\n */\nfunction deriveCheckStates(chosen: Set<ItemValue>): Map<ItemValue, CheckState> {\n  const states = new Map<ItemValue, CheckState>()\n  const visit = (item: TreeItem, inherited: boolean): CheckState => {\n    states.set(item.value, 'false')\n    const own = inherited || chosen.has(item.value)\n    const children = childrenOf(item)\n    let state: CheckState = own ? 'true' : 'false'\n    if (children?.length) {\n      const childStates = children.map((child) => visit(child, own))\n      state = childStates.every((s) => s === 'true')\n        ? 'true'\n        : childStates.every((s) => s === 'false')\n          ? 'false'\n          : 'mixed'\n    }\n    states.set(item.value, state)\n    return state\n  }\n  props.items.forEach((item) => visit(item, false))\n  return states\n}\n\nconst chosenValues = computed<ItemValue[]>(() => {\n  const value = model.value\n  if (props.selectionMode === 'multiple') return Array.isArray(value) ? value : []\n  return value === null || Array.isArray(value) ? [] : [value]\n})\n\nconst checkStates = computed(() =>\n  props.selectionMode === 'multiple'\n    ? deriveCheckStates(new Set(chosenValues.value))\n    : new Map<ItemValue, CheckState>(),\n)\n\n/** Calls `fn` on a node and on every node under it that is not disabled. */\nfunction eachEnabled(item: TreeItem, fn: (item: TreeItem) => void) {\n  fn(item)\n  childrenOf(item)?.forEach((child) => {\n    if (!child.disabled) eachEnabled(child, fn)\n  })\n}\n\n// @core\n/**\n * Checks a node and its subtree when any leaf of it is unchecked, and unchecks them otherwise.\n * Disabled nodes keep their state. Unchecking also drops the ancestors, which would otherwise check\n * the node again through their subtree. Values the tree does not know, such as the children of a\n * node not loaded yet, are kept at the end.\n */\nfunction toggleCheck(node: TreeNode) {\n  const states = checkStates.value\n  const chosen = new Set<ItemValue>()\n  states.forEach((state, value) => {\n    if (state === 'true') chosen.add(value)\n  })\n  const unknown = chosenValues.value.filter((value) => !states.has(value))\n\n  let check = false\n  eachEnabled(node.item, (item) => {\n    if (!childrenOf(item)?.length && states.get(item.value) !== 'true') check = true\n  })\n  // Only the leaves are added: a branch in the selection would check its disabled children too.\n  eachEnabled(node.item, (item) => {\n    if (!check) chosen.delete(item.value)\n    else if (!childrenOf(item)?.length) chosen.add(item.value)\n  })\n  if (!check) for (let p = node.parent; p; p = p.parent) chosen.delete(p.item.value)\n\n  const next: ItemValue[] = []\n  deriveCheckStates(chosen).forEach((state, value) => {\n    if (state === 'true') next.push(value)\n  })\n  model.value = [...next, ...unknown]\n}\n\nfunction isSelected(item: TreeItem): boolean {\n  return props.selectionMode === 'single' && chosenValues.value[0] === item.value\n}\n\n// @core\n/** What a click or Enter does besides the `activate` event, which follows it. */\nfunction applyDefault(node: TreeNode) {\n  const { item } = node\n  if (props.selectionMode === 'single') model.value = item.value\n  else if (props.selectionMode === 'multiple') toggleCheck(node)\n  else if (item.href === undefined && isBranch(item))\n    setExpanded(item, !expandedSet.value.has(item.value))\n}\n\nfunction activate(node: TreeNode, event: MouseEvent | KeyboardEvent) {\n  applyDefault(node)\n  emit('activate', node.item, event)\n}\n\nasync function load(item: TreeItem) {\n  const loader = props.loadChildren\n  if (!loader) return\n  loading.add(item.value)\n  failed.delete(item.value)\n  try {\n    loaded.set(item.value, await loader(item))\n  } catch {\n    failed.add(item.value)\n    setExpanded(item, false)\n    announce(m.value.treeView.loadError(item.label), false)\n  } finally {\n    loading.delete(item.value)\n  }\n}\n\n// @ssr\n// Loading waits for the client: an expanded lazy node renders busy on the server, then fetches.\nonMounted(() => {\n  // The expanded set is watched too: a pending node shows no children, so its expansion alone\n  // does not change the rows.\n  watch(\n    [visible, expandedSet],\n    ([rows, open]) => {\n      for (const { item } of rows)\n        if (open.has(item.value) && isPending(item) && !loading.has(item.value)) void load(item)\n    },\n    { immediate: true },\n  )\n})\n\nconst treeEl = ref<HTMLElement | null>(null)\nconst rowEls = new Map<ItemValue, HTMLElement>()\nconst rowValues = new WeakMap<Element, ItemValue>()\n\nfunction bindRow(value: ItemValue, el: Element | ComponentPublicInstance | null) {\n  if (el instanceof HTMLElement) {\n    rowEls.set(value, el)\n    rowValues.set(el, value)\n  } else rowEls.delete(value)\n}\n\n// @keyboard @a11y\n/**\n * The single tab stop: the node last focused, or its closest ancestor still on screen once a\n * branch above it folds; before any focus, the first selected node on screen, then the current\n * one, then the first row.\n */\nconst active = ref<TreeNode | null>(null)\nconst tabStop = computed<ItemValue | undefined>(() => {\n  const rows = visible.value\n  const shown = new Set(rows.map((node) => node.item.value))\n  for (let node = active.value; node; node = node.parent)\n    if (shown.has(node.item.value)) return node.item.value\n  const selected =\n    props.selectionMode === 'multiple'\n      ? rows.find((node) => checkStates.value.get(node.item.value) === 'true')\n      : rows.find((node) => isSelected(node.item))\n  return (selected ?? rows.find((node) => node.item.current) ?? rows[0])?.item.value\n})\n\nfunction onFocusin(event: FocusEvent) {\n  const value = rowValues.get(event.target as Element)\n  if (value === undefined) return\n  active.value = visible.value.find((node) => node.item.value === value) ?? null\n}\n\nfunction focusRow(node: TreeNode | undefined) {\n  if (node) rowEls.get(node.item.value)?.focus()\n}\n\nconst typeahead = useTimer()\nlet typed = ''\n\n// @keyboard\n/**\n * Moves to the next row whose label starts with what was typed in the last half-second. Repeating\n * one letter cycles through the rows starting with it.\n */\nfunction typeTo(char: string, index: number) {\n  typed += normalizeText(char)\n  typeahead.start(() => (typed = ''), 500)\n  const rows = visible.value\n  const needle = [...typed].every((c) => c === typed[0]) ? typed[0]! : typed\n  const start = needle.length === 1 ? index + 1 : index\n  for (let i = 0; i < rows.length; i++) {\n    const node = rows[(start + i) % rows.length]!\n    if (normalizeText(node.item.label).startsWith(needle)) return focusRow(node)\n  }\n}\n\n// @keyboard @a11y\nfunction onKeydown(event: KeyboardEvent) {\n  const tree = treeEl.value\n  const value = rowValues.get(event.target as Element)\n  if (!tree || value === undefined || event.altKey || event.ctrlKey || event.metaKey) return\n  const rows = visible.value\n  const index = rows.findIndex((node) => node.item.value === value)\n  const node = rows[index]\n  if (!node) return\n  const { item } = node\n  const isOpen = expandedSet.value.has(item.value)\n  const forward = isRtl(tree) ? 'ArrowLeft' : 'ArrowRight'\n  const back = isRtl(tree) ? 'ArrowRight' : 'ArrowLeft'\n\n  switch (event.key) {\n    case 'ArrowDown':\n      focusRow(rows[index + 1])\n      break\n    case 'ArrowUp':\n      focusRow(rows[index - 1])\n      break\n    case 'Home':\n      focusRow(rows[0])\n      break\n    case 'End':\n      focusRow(rows.at(-1))\n      break\n    case forward:\n      if (!isBranch(item)) break\n      if (!isOpen) {\n        if (!item.disabled) setExpanded(item, true)\n      } else if (rows[index + 1]?.parent?.item === item) focusRow(rows[index + 1])\n      break\n    case back:\n      if (isBranch(item) && isOpen && !item.disabled) setExpanded(item, false)\n      else focusRow(node.parent ?? undefined)\n      break\n    case 'Enter':\n      // A link follows itself: the browser turns Enter into a click, which lands in onRowClick.\n      if (item.href !== undefined) return\n      if (!item.disabled) activate(node, event)\n      break\n    case ' ':\n      // Space selects without following a link, as it does nothing on a link natively.\n      if (item.disabled) break\n      if (item.href !== undefined) applyDefault(node)\n      else activate(node, event)\n      break\n    case '*': {\n      const siblings = node.parent ? childrenOf(node.parent.item)! : props.items\n      const closed = siblings\n        .filter((sibling) => !sibling.disabled && isBranch(sibling))\n        .map((sibling) => sibling.value)\n        .filter((sibling) => !expandedSet.value.has(sibling))\n      if (closed.length) expanded.value = [...expanded.value, ...closed]\n      break\n    }\n    default:\n      if (event.key.length !== 1 || event.key === ' ') return\n      typeTo(event.key, index)\n  }\n  event.preventDefault()\n}\n\nfunction onRowClick(node: TreeNode, event: MouseEvent) {\n  // An inert link has no address left to follow; this also covers a click on its children.\n  if (node.item.disabled) {\n    event.preventDefault()\n    return\n  }\n  activate(node, event)\n}\n\n// The chevron folds without selecting, and without following the link it sits in.\nfunction onChevronClick(node: TreeNode, event: MouseEvent) {\n  event.preventDefault()\n  event.stopPropagation()\n  if (!node.item.disabled && isBranch(node.item))\n    setExpanded(node.item, !expandedSet.value.has(node.item.value))\n}\n\nfunction slotProps(node: TreeNode): TreeItemSlotProps {\n  return {\n    item: node.item,\n    level: node.level,\n    expanded: expandedSet.value.has(node.item.value) && !isPending(node.item),\n  }\n}\n\nfunction ariaExpanded(item: TreeItem) {\n  return isBranch(item) ? String(expandedSet.value.has(item.value)) : undefined\n}\n\nfunction ariaCurrent(item: TreeItem) {\n  if (!item.current) return undefined\n  return item.href !== undefined ? 'page' : 'true'\n}\n\n// The root is a wrapper holding the live region, which a tree may not contain: these two reach\n// the tree itself.\ndefineExpose({\n  /** Moves the focus to the tree's tab stop: the last focused node, else the selected or current one. */\n  focus: (options?: FocusOptions) =>\n    tabStop.value !== undefined && rowEls.get(tabStop.value)?.focus(options),\n  /** The `role=\"tree\"` element, which also receives the consumer's attributes. */\n  el: treeEl,\n})\n</script>\n\n<template>\n  <div class=\"v-tree-view\" :class=\"rootClass\" :style=\"rootStyle\">\n    <ul\n      ref=\"treeEl\"\n      class=\"v-tree v-control\"\n      role=\"tree\"\n      :data-size=\"size\"\n      :aria-multiselectable=\"selectionMode === 'multiple' || undefined\"\n      v-bind=\"forwardedAttrs\"\n      :aria-label=\"ariaLabel\"\n      @keydown=\"onKeydown\"\n      @focusin=\"onFocusin\"\n    >\n      <li v-for=\"node in visible\" :key=\"node.item.value\" class=\"v-tree-node\" role=\"none\">\n        <component\n          :is=\"node.item.href !== undefined ? 'a' : 'div'\"\n          :ref=\"(el: Element | ComponentPublicInstance | null) => bindRow(node.item.value, el)\"\n          class=\"v-tree-row\"\n          role=\"treeitem\"\n          :style=\"{ '--tree-level': node.level - 1 }\"\n          :href=\"node.item.disabled ? undefined : node.item.href\"\n          :tabindex=\"tabStop === node.item.value ? 0 : -1\"\n          :aria-level=\"node.level\"\n          :aria-setsize=\"node.setsize\"\n          :aria-posinset=\"node.posinset\"\n          :aria-expanded=\"ariaExpanded(node.item)\"\n          :aria-selected=\"selectionMode === 'single' ? String(isSelected(node.item)) : undefined\"\n          :aria-checked=\"\n            selectionMode === 'multiple' ? checkStates.get(node.item.value) : undefined\n          \"\n          :aria-current=\"ariaCurrent(node.item)\"\n          :aria-disabled=\"node.item.disabled || undefined\"\n          :aria-busy=\"loading.has(node.item.value) || undefined\"\n          :data-current=\"node.item.current ? '' : undefined\"\n          @click=\"onRowClick(node, $event)\"\n        >\n          <!-- Decorative: the row is the control, and the arrows fold it. -->\n          <span class=\"v-tree-toggle\" aria-hidden=\"true\" @click=\"onChevronClick(node, $event)\">\n            <VSpinner v-if=\"loading.has(node.item.value)\" />\n            <VIcon\n              v-else-if=\"isBranch(node.item)\"\n              class=\"v-tree-chevron\"\n              :name=\"chevronRightIcon\"\n              mirrored\n            />\n          </span>\n          <VCheckMark v-if=\"selectionMode === 'multiple'\" />\n          <slot name=\"icon\" v-bind=\"slotProps(node)\">\n            <VIcon v-if=\"node.item.icon\" class=\"v-tree-icon\" v-bind=\"iconProps(node.item.icon)\" />\n          </slot>\n          <span class=\"v-tree-label\"\n            ><slot name=\"label\" v-bind=\"slotProps(node)\">{{ node.item.label }}</slot></span\n          >\n          <template v-if=\"failed.has(node.item.value)\">\n            <VIcon class=\"v-tree-error\" :name=\"errorIcon\" />\n            <span class=\"v-visually-hidden\">{{ m.treeView.loadFailed }}</span>\n          </template>\n          <span v-if=\"$slots.end\" class=\"v-tree-end\"\n            ><slot name=\"end\" v-bind=\"slotProps(node)\"\n          /></span>\n        </component>\n      </li>\n    </ul>\n    <div class=\"v-visually-hidden\" role=\"status\" aria-live=\"polite\">{{ announcement }}</div>\n  </div>\n</template>\n\n<style>\n@layer vectis.components {\n  .v-tree {\n    /* One level of indentation puts a child's chevron under its parent's icon. */\n    --tree-indent: calc(var(--vectis-icon-size) + var(--control-gap));\n\n    display: flex;\n    flex-direction: column;\n    margin: 0;\n    padding: 0;\n    list-style: none;\n    font-family: var(--vectis-text-family);\n  }\n\n  .v-tree-row {\n    /* See VSideNavigation: the radius cannot exceed half the height of a single row. */\n    --tree-row-radius: min(var(--vectis-radius-interactive), calc(var(--control-height) / 2));\n\n    display: flex;\n    align-items: center;\n    gap: var(--control-gap);\n    min-block-size: var(--control-height);\n    padding-block: var(--vectis-space-1);\n    padding-inline: calc(var(--vectis-space-2) + var(--tree-level, 0) * var(--tree-indent))\n      var(--vectis-space-2);\n    border-radius: var(--tree-row-radius);\n    color: var(--vectis-color-text);\n    font-size: var(--control-font-size);\n    font-weight: var(--vectis-text-body-md-weight);\n    line-height: var(--vectis-text-body-md-leading);\n    text-decoration: none;\n    cursor: pointer;\n    user-select: none;\n  }\n\n  .v-tree-row:hover:not([aria-disabled='true']) {\n    background: var(--vectis-color-surface-muted);\n  }\n\n  /* Drawn inwards, so that neighbouring rows cannot cover it. */\n  .v-tree-row:focus-visible {\n    outline: var(--vectis-focus-ring-width) solid var(--vectis-focus-ring-color);\n    outline-offset: calc(-1 * var(--vectis-focus-ring-width));\n  }\n\n  .v-tree-row:is([aria-selected='true'], [data-current]) {\n    background: var(--vectis-color-accent-surface);\n    color: var(--vectis-color-accent-text);\n  }\n\n  /* The selected row is already tinted, so its hover deepens that tint; the VMenuItem idiom. */\n  .v-tree-row:is([aria-selected='true'], [data-current]):hover:not([aria-disabled='true']) {\n    background: color-mix(\n      in oklab,\n      var(--vectis-color-accent-surface),\n      var(--vectis-color-accent-text) 8%\n    );\n  }\n\n  .v-tree-row:is([aria-selected='true'], [data-current]) :is(.v-tree-icon, .v-tree-toggle) {\n    color: inherit;\n  }\n\n  .v-tree-row[data-current] .v-tree-label {\n    font-weight: var(--vectis-text-label-weight);\n  }\n\n  .v-tree-toggle {\n    display: inline-grid;\n    flex: none;\n    place-items: center;\n    inline-size: var(--vectis-icon-size);\n    block-size: var(--vectis-icon-size);\n    color: var(--vectis-color-text-muted);\n  }\n\n  .v-tree-chevron {\n    transition: rotate var(--vectis-duration-base) var(--vectis-ease-default);\n  }\n\n  .v-tree-row[aria-expanded='true'] .v-tree-chevron {\n    rotate: 90deg;\n  }\n\n  /* The mirrored chevron points left, and turns the other way to point down. */\n  .v-tree-row[aria-expanded='true'] .v-tree-chevron:dir(rtl) {\n    rotate: -90deg;\n  }\n\n  .v-tree-icon {\n    flex: none;\n    color: var(--vectis-color-text-muted);\n  }\n\n  .v-tree-label {\n    flex: 1;\n    min-inline-size: 0;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  .v-tree-end {\n    flex: none;\n    display: flex;\n    align-items: center;\n    gap: var(--vectis-space-1);\n    color: var(--vectis-color-text-muted);\n  }\n\n  .v-tree-error {\n    flex: none;\n    color: var(--vectis-color-danger-text);\n  }\n\n  .v-tree-row:is([aria-checked='true'], [aria-checked='mixed']) .v-check-mark {\n    background: var(--vectis-color-accent);\n    border-color: var(--vectis-color-accent);\n  }\n\n  .v-tree-row[aria-checked='true'] .v-check-mark-tick,\n  .v-tree-row[aria-checked='mixed'] .v-check-mark-dash {\n    opacity: 1;\n  }\n\n  /* Last of the colour rules, so that a disabled node reads as such whatever its state. */\n  .v-tree-row[aria-disabled='true'] {\n    color: var(--vectis-color-text-subtle);\n    cursor: not-allowed;\n  }\n\n  .v-tree-row[aria-disabled='true'] :is(.v-tree-icon, .v-tree-toggle, .v-tree-end) {\n    color: inherit;\n  }\n\n  .v-tree-row[aria-disabled='true'] .v-check-mark {\n    background: var(--vectis-color-surface-muted);\n    border-color: var(--vectis-color-border);\n    color: var(--vectis-color-text-subtle);\n  }\n\n  /*\n   * Forced colours flatten the tint of the selected row: it takes the system selection pair,\n   * repeated to (0,4,0) above its own hover.\n   */\n  @media (forced-colors: active) {\n    .v-tree-row.v-tree-row:is([aria-selected='true'], [data-current]):not([aria-disabled='true']) {\n      forced-color-adjust: none;\n      background: Highlight;\n      color: HighlightText;\n    }\n\n    .v-tree-row:is([aria-checked='true'], [aria-checked='mixed']):not([aria-disabled='true'])\n      .v-check-mark {\n      forced-color-adjust: none;\n      background: Highlight;\n      border-color: Highlight;\n      color: HighlightText;\n    }\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .v-tree-chevron {\n      transition: none;\n    }\n  }\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"VTreeView.js","names":["_sfc_main","VTreeView_vue_vue_type_script_setup_true_lang_default","VTreeView_default"],"sources":["../../../src/components/VTreeView/VTreeView.vue"],"sourcesContent":["<script setup lang=\"ts\">\n// @keyboard @a11y @core\n/**\n * A hierarchy following the ARIA tree pattern. The rows are rendered flat, in display order, their\n * depth carried by `aria-level`, `aria-setsize` and `aria-posinset`: no native element folds a tree\n * with a single tab stop, and a row that does not wrap its subtree keeps its accessible name free of\n * its descendants' text. JavaScript owns the focus, the keyboard, selection and lazy loading.\n */\nimport { computed, onMounted, ref, shallowReactive, watch } from 'vue'\nimport type { ComponentPublicInstance } from 'vue'\n\nimport VCheckMark from '../VCheckbox/VCheckMark.vue'\nimport VIcon from '../VIcon/VIcon.vue'\nimport VSpinner from '../VSpinner/VSpinner.vue'\nimport { iconProps } from '../VIcon/iconProps'\nimport { chevron_right as chevronRightIcon } from '../VIcon/icons/chevron_right'\nimport { error as errorIcon } from '../VIcon/icons/error'\nimport type { IconSource } from '../VIcon/types'\nimport type { ItemValue } from '../../types'\nimport { useAriaLabel } from '../../composables/useAriaLabel'\nimport { useLiveAnnouncer } from '../../composables/useLiveAnnouncer'\nimport { useRootAttrs } from '../../composables/useRootAttrs'\nimport { useTypeahead } from '../../composables/useTypeahead'\nimport { useMessages } from '../../i18n/state'\nimport { isRtl } from '../../utils/direction'\nimport { normalizeText } from '../../utils/text'\n\n/** Whether nodes can be selected: not at all, one at a time, or several with checkboxes. */\nexport type TreeSelectionMode = 'none' | 'single' | 'multiple'\n\n/** The height of the rows: 32 or 40 pixels. */\nexport type TreeViewSize = 'sm' | 'md'\n\n/**\n * What is selected, and its shape follows `selectionMode`: a single value (or `null`) in `single`\n * mode, an array in `multiple` mode.\n */\nexport type TreeViewModelValue = ItemValue | ItemValue[] | null\n\n/** One node of the tree. */\nexport interface TreeItem {\n  /** What identifies the node, in the selection and expansion models. Unique across the tree. */\n  value: ItemValue\n  /** What the row says. It is also what typeahead matches. */\n  label: string\n  /** An icon before the label: an icon name, or an explicit render. */\n  icon?: IconSource\n  /** The child nodes, which make this node a branch. */\n  children?: TreeItem[]\n  /**\n   * Marks a branch whose children `loadChildren` fetches on its first expansion. Ignored when\n   * `children` is set or when the tree has no `loadChildren`.\n   */\n  lazy?: boolean\n  /** Where the node leads, which makes the row a link. */\n  href?: string\n  /** Marks the node as the page being viewed (`aria-current`). */\n  current?: boolean\n  /**\n   * Keeps the node focusable, so it is still found, but it cannot be selected, activated, expanded\n   * or collapsed.\n   */\n  disabled?: boolean\n}\n\n/** What the `#icon`, `#label` and `#end` slots receive. */\nexport interface TreeItemSlotProps {\n  item: TreeItem\n  /** The depth of the node, from 1. */\n  level: number\n  /** Whether the node's children are shown. */\n  expanded: boolean\n}\n\ntype CheckState = 'true' | 'false' | 'mixed'\n\ninterface TreeNode {\n  item: TreeItem\n  level: number\n  parent: TreeNode | null\n  posinset: number\n  setsize: number\n}\n\ninterface TreeViewProps {\n  /** The first level of the tree. */\n  items: TreeItem[]\n  /**\n   * Whether nodes can be selected. In `multiple` mode each row has a checkbox, and checking a\n   * branch checks everything under it.\n   */\n  selectionMode?: TreeSelectionMode\n  /**\n   * Fetches the children of a `lazy` node, on its first expansion. The tree keeps them; a failure\n   * collapses the node again, and the next expansion retries.\n   */\n  loadChildren?: (item: TreeItem) => Promise<TreeItem[]>\n  /** The height of the rows, 32 or 40 pixels. */\n  size?: TreeViewSize\n  /** What screen readers announce for the tree. It falls back to the design system dictionary. */\n  label?: string\n}\n\ndefineOptions({ inheritAttrs: false })\n\nconst props = withDefaults(defineProps<TreeViewProps>(), {\n  selectionMode: 'none',\n  loadChildren: undefined,\n  size: 'md',\n  label: undefined,\n})\n\n/**\n * What is selected. In `single` mode, a value or `null`; in `multiple` mode, the checked nodes in\n * tree order, a branch included when everything under it is checked. A value given for a branch\n * checks its whole subtree. A shape that does not match the mode reads as an empty selection.\n */\nconst model = defineModel<TreeViewModelValue>({ default: null })\n\n/** The values of the expanded nodes. Left unbound, the tree keeps that state itself. */\nconst expanded = defineModel<ItemValue[]>('expanded', { default: () => [] })\n\nconst emit = defineEmits<{\n  /**\n   * A node was clicked or Enter was pressed on it, after the tree applied its own effect: selecting\n   * it, checking it, or folding a branch in `none` mode. For a link, calling `preventDefault()` on\n   * the event stops the navigation, which hands it to a router.\n   */\n  activate: [item: TreeItem, event: MouseEvent | KeyboardEvent]\n}>()\n\ndefineSlots<{\n  /** Replaces the icon of a node, for instance to show an open folder when it is expanded. */\n  icon?(props: TreeItemSlotProps): unknown\n  /** Replaces the label of a node. */\n  label?(props: TreeItemSlotProps): unknown\n  /**\n   * Content at the end of a row: a count, a badge. It must not be focusable: a row is a single\n   * control.\n   */\n  end?(props: TreeItemSlotProps): unknown\n}>()\n\nconst { rootClass, rootStyle, forwardedAttrs } = useRootAttrs()\nconst m = useMessages()\nconst ariaLabel = useAriaLabel(() => props.label ?? m.value.treeView.label)\nconst { polite: announcement, announce } = useLiveAnnouncer()\n\nconst loaded = shallowReactive(new Map<ItemValue, TreeItem[]>())\nconst loading = shallowReactive(new Set<ItemValue>())\nconst failed = shallowReactive(new Set<ItemValue>())\n\nfunction childrenOf(item: TreeItem): TreeItem[] | undefined {\n  return item.children ?? loaded.get(item.value)\n}\n\nfunction isPending(item: TreeItem): boolean {\n  return !!props.loadChildren && !!item.lazy && !item.children && !loaded.has(item.value)\n}\n\nfunction isBranch(item: TreeItem): boolean {\n  return !!childrenOf(item)?.length || isPending(item)\n}\n\nconst expandedSet = computed(() => new Set(expanded.value))\n\n/** The rows on screen, in display order: every node whose ancestors are all expanded. */\nconst visible = computed(() => {\n  const rows: TreeNode[] = []\n  const walk = (items: TreeItem[], level: number, parent: TreeNode | null) => {\n    items.forEach((item, index) => {\n      const node = { item, level, parent, posinset: index + 1, setsize: items.length }\n      rows.push(node)\n      const children = childrenOf(item)\n      if (children && expandedSet.value.has(item.value)) walk(children, level + 1, node)\n    })\n  }\n  walk(props.items, 1, null)\n  return rows\n})\n\nfunction setExpanded(item: TreeItem, open: boolean) {\n  if (open === expandedSet.value.has(item.value)) return\n  expanded.value = open\n    ? [...expanded.value, item.value]\n    : expanded.value.filter((value) => value !== item.value)\n}\n\n// @core\n/**\n * Derives what each checkbox shows. A value in the selection checks its node and the whole subtree\n * under it; a branch then shows checked when all its children are, unchecked when none are, and\n * mixed otherwise, so its own presence in the selection only matters through its children. The map\n * is filled in tree order, which is the order the model is written in.\n */\nfunction deriveCheckStates(chosen: Set<ItemValue>): Map<ItemValue, CheckState> {\n  const states = new Map<ItemValue, CheckState>()\n  const visit = (item: TreeItem, inherited: boolean): CheckState => {\n    states.set(item.value, 'false')\n    const own = inherited || chosen.has(item.value)\n    const children = childrenOf(item)\n    let state: CheckState = own ? 'true' : 'false'\n    if (children?.length) {\n      const childStates = children.map((child) => visit(child, own))\n      state = childStates.every((s) => s === 'true')\n        ? 'true'\n        : childStates.every((s) => s === 'false')\n          ? 'false'\n          : 'mixed'\n    }\n    states.set(item.value, state)\n    return state\n  }\n  props.items.forEach((item) => visit(item, false))\n  return states\n}\n\nconst chosenValues = computed<ItemValue[]>(() => {\n  const value = model.value\n  if (props.selectionMode === 'multiple') return Array.isArray(value) ? value : []\n  return value === null || Array.isArray(value) ? [] : [value]\n})\n\nconst checkStates = computed(() =>\n  props.selectionMode === 'multiple'\n    ? deriveCheckStates(new Set(chosenValues.value))\n    : new Map<ItemValue, CheckState>(),\n)\n\n/** Calls `fn` on a node and on every node under it that is not disabled. */\nfunction eachEnabled(item: TreeItem, fn: (item: TreeItem) => void) {\n  fn(item)\n  childrenOf(item)?.forEach((child) => {\n    if (!child.disabled) eachEnabled(child, fn)\n  })\n}\n\n// @core\n/**\n * Checks a node and its subtree when any leaf of it is unchecked, and unchecks them otherwise.\n * Disabled nodes keep their state. Unchecking also drops the ancestors, which would otherwise check\n * the node again through their subtree. Values the tree does not know, such as the children of a\n * node not loaded yet, are kept at the end.\n */\nfunction toggleCheck(node: TreeNode) {\n  const states = checkStates.value\n  const chosen = new Set<ItemValue>()\n  states.forEach((state, value) => {\n    if (state === 'true') chosen.add(value)\n  })\n  const unknown = chosenValues.value.filter((value) => !states.has(value))\n\n  let check = false\n  eachEnabled(node.item, (item) => {\n    if (!childrenOf(item)?.length && states.get(item.value) !== 'true') check = true\n  })\n  // Only the leaves are added: a branch in the selection would check its disabled children too.\n  eachEnabled(node.item, (item) => {\n    if (!check) chosen.delete(item.value)\n    else if (!childrenOf(item)?.length) chosen.add(item.value)\n  })\n  if (!check) for (let p = node.parent; p; p = p.parent) chosen.delete(p.item.value)\n\n  const next: ItemValue[] = []\n  deriveCheckStates(chosen).forEach((state, value) => {\n    if (state === 'true') next.push(value)\n  })\n  model.value = [...next, ...unknown]\n}\n\nfunction isSelected(item: TreeItem): boolean {\n  return props.selectionMode === 'single' && chosenValues.value[0] === item.value\n}\n\n// @core\n/** What a click or Enter does besides the `activate` event, which follows it. */\nfunction applyDefault(node: TreeNode) {\n  const { item } = node\n  if (props.selectionMode === 'single') model.value = item.value\n  else if (props.selectionMode === 'multiple') toggleCheck(node)\n  else if (item.href === undefined && isBranch(item))\n    setExpanded(item, !expandedSet.value.has(item.value))\n}\n\nfunction activate(node: TreeNode, event: MouseEvent | KeyboardEvent) {\n  applyDefault(node)\n  emit('activate', node.item, event)\n}\n\nasync function load(item: TreeItem) {\n  const loader = props.loadChildren\n  if (!loader) return\n  loading.add(item.value)\n  failed.delete(item.value)\n  try {\n    loaded.set(item.value, await loader(item))\n  } catch {\n    failed.add(item.value)\n    setExpanded(item, false)\n    announce(m.value.treeView.loadError(item.label), false)\n  } finally {\n    loading.delete(item.value)\n  }\n}\n\n// @ssr\n// Loading waits for the client: an expanded lazy node renders busy on the server, then fetches.\nonMounted(() => {\n  // The expanded set is watched too: a pending node shows no children, so its expansion alone\n  // does not change the rows.\n  watch(\n    [visible, expandedSet],\n    ([rows, open]) => {\n      for (const { item } of rows)\n        if (open.has(item.value) && isPending(item) && !loading.has(item.value)) void load(item)\n    },\n    { immediate: true },\n  )\n})\n\nconst treeEl = ref<HTMLElement | null>(null)\nconst rowEls = new Map<ItemValue, HTMLElement>()\nconst rowValues = new WeakMap<Element, ItemValue>()\n\nfunction bindRow(value: ItemValue, el: Element | ComponentPublicInstance | null) {\n  if (el instanceof HTMLElement) {\n    rowEls.set(value, el)\n    rowValues.set(el, value)\n  } else rowEls.delete(value)\n}\n\n// @keyboard @a11y\n/**\n * The single tab stop: the node last focused, or its closest ancestor still on screen once a\n * branch above it folds; before any focus, the first selected node on screen, then the current\n * one, then the first row.\n */\nconst active = ref<TreeNode | null>(null)\nconst tabStop = computed<ItemValue | undefined>(() => {\n  const rows = visible.value\n  const shown = new Set(rows.map((node) => node.item.value))\n  for (let node = active.value; node; node = node.parent)\n    if (shown.has(node.item.value)) return node.item.value\n  const selected =\n    props.selectionMode === 'multiple'\n      ? rows.find((node) => checkStates.value.get(node.item.value) === 'true')\n      : rows.find((node) => isSelected(node.item))\n  return (selected ?? rows.find((node) => node.item.current) ?? rows[0])?.item.value\n})\n\nfunction onFocusin(event: FocusEvent) {\n  const value = rowValues.get(event.target as Element)\n  if (value === undefined) return\n  active.value = visible.value.find((node) => node.item.value === value) ?? null\n}\n\nfunction focusRow(node: TreeNode | undefined) {\n  if (node) rowEls.get(node.item.value)?.focus()\n}\n\nconst { find: findTyped } = useTypeahead()\n\n// @keyboard\n// Moves to the row whose label starts with what was typed. Disabled rows stay focusable in a\n// tree, so they are matched too.\nfunction typeTo(char: string, index: number) {\n  const rows = visible.value\n  focusRow(rows[findTyped(char, rows.length, index, (i) => normalizeText(rows[i]!.item.label))])\n}\n\n// @keyboard @a11y\nfunction onKeydown(event: KeyboardEvent) {\n  const tree = treeEl.value\n  const value = rowValues.get(event.target as Element)\n  if (!tree || value === undefined || event.altKey || event.ctrlKey || event.metaKey) return\n  const rows = visible.value\n  const index = rows.findIndex((node) => node.item.value === value)\n  const node = rows[index]\n  if (!node) return\n  const { item } = node\n  const isOpen = expandedSet.value.has(item.value)\n  const forward = isRtl(tree) ? 'ArrowLeft' : 'ArrowRight'\n  const back = isRtl(tree) ? 'ArrowRight' : 'ArrowLeft'\n\n  switch (event.key) {\n    case 'ArrowDown':\n      focusRow(rows[index + 1])\n      break\n    case 'ArrowUp':\n      focusRow(rows[index - 1])\n      break\n    case 'Home':\n      focusRow(rows[0])\n      break\n    case 'End':\n      focusRow(rows.at(-1))\n      break\n    case forward:\n      if (!isBranch(item)) break\n      if (!isOpen) {\n        if (!item.disabled) setExpanded(item, true)\n      } else if (rows[index + 1]?.parent?.item === item) focusRow(rows[index + 1])\n      break\n    case back:\n      if (isBranch(item) && isOpen && !item.disabled) setExpanded(item, false)\n      else focusRow(node.parent ?? undefined)\n      break\n    case 'Enter':\n      // A link follows itself: the browser turns Enter into a click, which lands in onRowClick.\n      if (item.href !== undefined) return\n      if (!item.disabled) activate(node, event)\n      break\n    case ' ':\n      // Space selects without following a link, as it does nothing on a link natively.\n      if (item.disabled) break\n      if (item.href !== undefined) applyDefault(node)\n      else activate(node, event)\n      break\n    case '*': {\n      const siblings = node.parent ? childrenOf(node.parent.item)! : props.items\n      const closed = siblings\n        .filter((sibling) => !sibling.disabled && isBranch(sibling))\n        .map((sibling) => sibling.value)\n        .filter((sibling) => !expandedSet.value.has(sibling))\n      if (closed.length) expanded.value = [...expanded.value, ...closed]\n      break\n    }\n    default:\n      if (event.key.length !== 1 || event.key === ' ') return\n      typeTo(event.key, index)\n  }\n  event.preventDefault()\n}\n\nfunction onRowClick(node: TreeNode, event: MouseEvent) {\n  // An inert link has no address left to follow; this also covers a click on its children.\n  if (node.item.disabled) {\n    event.preventDefault()\n    return\n  }\n  activate(node, event)\n}\n\n// The chevron folds without selecting, and without following the link it sits in.\nfunction onChevronClick(node: TreeNode, event: MouseEvent) {\n  event.preventDefault()\n  event.stopPropagation()\n  if (!node.item.disabled && isBranch(node.item))\n    setExpanded(node.item, !expandedSet.value.has(node.item.value))\n}\n\nfunction slotProps(node: TreeNode): TreeItemSlotProps {\n  return {\n    item: node.item,\n    level: node.level,\n    expanded: expandedSet.value.has(node.item.value) && !isPending(node.item),\n  }\n}\n\nfunction ariaExpanded(item: TreeItem) {\n  return isBranch(item) ? String(expandedSet.value.has(item.value)) : undefined\n}\n\nfunction ariaCurrent(item: TreeItem) {\n  if (!item.current) return undefined\n  return item.href !== undefined ? 'page' : 'true'\n}\n\n// The root is a wrapper holding the live region, which a tree may not contain: these two reach\n// the tree itself.\ndefineExpose({\n  /** Moves the focus to the tree's tab stop: the last focused node, else the selected or current one. */\n  focus: (options?: FocusOptions) =>\n    tabStop.value !== undefined && rowEls.get(tabStop.value)?.focus(options),\n  /** The `role=\"tree\"` element, which also receives the consumer's attributes. */\n  el: treeEl,\n})\n</script>\n\n<template>\n  <div class=\"v-tree-view\" :class=\"rootClass\" :style=\"rootStyle\">\n    <ul\n      ref=\"treeEl\"\n      class=\"v-tree v-control\"\n      role=\"tree\"\n      :data-size=\"size\"\n      :aria-multiselectable=\"selectionMode === 'multiple' || undefined\"\n      v-bind=\"forwardedAttrs\"\n      :aria-label=\"ariaLabel\"\n      @keydown=\"onKeydown\"\n      @focusin=\"onFocusin\"\n    >\n      <li v-for=\"node in visible\" :key=\"node.item.value\" class=\"v-tree-node\" role=\"none\">\n        <component\n          :is=\"node.item.href !== undefined ? 'a' : 'div'\"\n          :ref=\"(el: Element | ComponentPublicInstance | null) => bindRow(node.item.value, el)\"\n          class=\"v-tree-row\"\n          role=\"treeitem\"\n          :style=\"{ '--tree-level': node.level - 1 }\"\n          :href=\"node.item.disabled ? undefined : node.item.href\"\n          :tabindex=\"tabStop === node.item.value ? 0 : -1\"\n          :aria-level=\"node.level\"\n          :aria-setsize=\"node.setsize\"\n          :aria-posinset=\"node.posinset\"\n          :aria-expanded=\"ariaExpanded(node.item)\"\n          :aria-selected=\"selectionMode === 'single' ? String(isSelected(node.item)) : undefined\"\n          :aria-checked=\"\n            selectionMode === 'multiple' ? checkStates.get(node.item.value) : undefined\n          \"\n          :aria-current=\"ariaCurrent(node.item)\"\n          :aria-disabled=\"node.item.disabled || undefined\"\n          :aria-busy=\"loading.has(node.item.value) || undefined\"\n          :data-current=\"node.item.current ? '' : undefined\"\n          @click=\"onRowClick(node, $event)\"\n        >\n          <!-- Decorative: the row is the control, and the arrows fold it. -->\n          <span class=\"v-tree-toggle\" aria-hidden=\"true\" @click=\"onChevronClick(node, $event)\">\n            <VSpinner v-if=\"loading.has(node.item.value)\" />\n            <VIcon\n              v-else-if=\"isBranch(node.item)\"\n              class=\"v-tree-chevron\"\n              :name=\"chevronRightIcon\"\n              mirrored\n            />\n          </span>\n          <VCheckMark v-if=\"selectionMode === 'multiple'\" />\n          <slot name=\"icon\" v-bind=\"slotProps(node)\">\n            <VIcon v-if=\"node.item.icon\" class=\"v-tree-icon\" v-bind=\"iconProps(node.item.icon)\" />\n          </slot>\n          <span class=\"v-tree-label\"\n            ><slot name=\"label\" v-bind=\"slotProps(node)\">{{ node.item.label }}</slot></span\n          >\n          <template v-if=\"failed.has(node.item.value)\">\n            <VIcon class=\"v-tree-error\" :name=\"errorIcon\" />\n            <span class=\"v-visually-hidden\">{{ m.treeView.loadFailed }}</span>\n          </template>\n          <span v-if=\"$slots.end\" class=\"v-tree-end\"\n            ><slot name=\"end\" v-bind=\"slotProps(node)\"\n          /></span>\n        </component>\n      </li>\n    </ul>\n    <div class=\"v-visually-hidden\" role=\"status\" aria-live=\"polite\">{{ announcement }}</div>\n  </div>\n</template>\n\n<style>\n@layer vectis.components {\n  .v-tree {\n    /* One level of indentation puts a child's chevron under its parent's icon. */\n    --tree-indent: calc(var(--vectis-icon-size) + var(--control-gap));\n\n    display: flex;\n    flex-direction: column;\n    margin: 0;\n    padding: 0;\n    list-style: none;\n    font-family: var(--vectis-text-family);\n  }\n\n  .v-tree-row {\n    /* See VSideNavigation: the radius cannot exceed half the height of a single row. */\n    --tree-row-radius: min(var(--vectis-radius-interactive), calc(var(--control-height) / 2));\n\n    display: flex;\n    align-items: center;\n    gap: var(--control-gap);\n    min-block-size: var(--control-height);\n    padding-block: var(--vectis-space-1);\n    padding-inline: calc(var(--vectis-space-2) + var(--tree-level, 0) * var(--tree-indent))\n      var(--vectis-space-2);\n    border-radius: var(--tree-row-radius);\n    color: var(--vectis-color-text);\n    font-size: var(--control-font-size);\n    font-weight: var(--vectis-text-body-md-weight);\n    line-height: var(--vectis-text-body-md-leading);\n    text-decoration: none;\n    cursor: pointer;\n    user-select: none;\n  }\n\n  .v-tree-row:hover:not([aria-disabled='true']) {\n    background: var(--vectis-color-surface-muted);\n  }\n\n  /* Drawn inwards, so that neighbouring rows cannot cover it. */\n  .v-tree-row:focus-visible {\n    outline: var(--vectis-focus-ring-width) solid var(--vectis-focus-ring-color);\n    outline-offset: calc(-1 * var(--vectis-focus-ring-width));\n  }\n\n  .v-tree-row:is([aria-selected='true'], [data-current]) {\n    background: var(--vectis-color-accent-surface);\n    color: var(--vectis-color-accent-text);\n  }\n\n  /* The selected row is already tinted, so its hover deepens that tint; the VMenuItem idiom. */\n  .v-tree-row:is([aria-selected='true'], [data-current]):hover:not([aria-disabled='true']) {\n    background: color-mix(\n      in oklab,\n      var(--vectis-color-accent-surface),\n      var(--vectis-color-accent-text) 8%\n    );\n  }\n\n  .v-tree-row:is([aria-selected='true'], [data-current]) :is(.v-tree-icon, .v-tree-toggle) {\n    color: inherit;\n  }\n\n  .v-tree-row[data-current] .v-tree-label {\n    font-weight: var(--vectis-text-label-weight);\n  }\n\n  .v-tree-toggle {\n    display: inline-grid;\n    flex: none;\n    place-items: center;\n    inline-size: var(--vectis-icon-size);\n    block-size: var(--vectis-icon-size);\n    color: var(--vectis-color-text-muted);\n  }\n\n  .v-tree-chevron {\n    transition: rotate var(--vectis-duration-base) var(--vectis-ease-default);\n  }\n\n  .v-tree-row[aria-expanded='true'] .v-tree-chevron {\n    rotate: 90deg;\n  }\n\n  /* The mirrored chevron points left, and turns the other way to point down. */\n  .v-tree-row[aria-expanded='true'] .v-tree-chevron:dir(rtl) {\n    rotate: -90deg;\n  }\n\n  .v-tree-icon {\n    flex: none;\n    color: var(--vectis-color-text-muted);\n  }\n\n  .v-tree-label {\n    flex: 1;\n    min-inline-size: 0;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  .v-tree-end {\n    flex: none;\n    display: flex;\n    align-items: center;\n    gap: var(--vectis-space-1);\n    color: var(--vectis-color-text-muted);\n  }\n\n  .v-tree-error {\n    flex: none;\n    color: var(--vectis-color-danger-text);\n  }\n\n  .v-tree-row:is([aria-checked='true'], [aria-checked='mixed']) .v-check-mark {\n    background: var(--vectis-color-accent);\n    border-color: var(--vectis-color-accent);\n  }\n\n  .v-tree-row[aria-checked='true'] .v-check-mark-tick,\n  .v-tree-row[aria-checked='mixed'] .v-check-mark-dash {\n    opacity: 1;\n  }\n\n  /* Last of the colour rules, so that a disabled node reads as such whatever its state. */\n  .v-tree-row[aria-disabled='true'] {\n    color: var(--vectis-color-text-subtle);\n    cursor: not-allowed;\n  }\n\n  .v-tree-row[aria-disabled='true'] :is(.v-tree-icon, .v-tree-toggle, .v-tree-end) {\n    color: inherit;\n  }\n\n  .v-tree-row[aria-disabled='true'] .v-check-mark {\n    background: var(--vectis-color-surface-muted);\n    border-color: var(--vectis-color-border);\n    color: var(--vectis-color-text-subtle);\n  }\n\n  /*\n   * Forced colours flatten the tint of the selected row: it takes the system selection pair,\n   * repeated to (0,4,0) above its own hover.\n   */\n  @media (forced-colors: active) {\n    .v-tree-row.v-tree-row:is([aria-selected='true'], [data-current]):not([aria-disabled='true']) {\n      forced-color-adjust: none;\n      background: Highlight;\n      color: HighlightText;\n    }\n\n    .v-tree-row:is([aria-checked='true'], [aria-checked='mixed']):not([aria-disabled='true'])\n      .v-check-mark {\n      forced-color-adjust: none;\n      background: Highlight;\n      border-color: Highlight;\n      color: HighlightText;\n    }\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .v-tree-chevron {\n      transition: none;\n    }\n  }\n}\n</style>\n"],"mappings":""}

package/dist/components/VTreeView/VTreeView.vue_vue_type_script_setup_true_lang.js

@@ -8,10 +8,10 @@ import { useRootAttrs as o } from "../../composables/useRootAttrs.js";
 import { chevron_right as s } from "../VIcon/icons/chevron_right.js";
 import c from "../VCheckbox/VCheckMark.js";
 import { error as l } from "../VIcon/icons/error.js";
-import { useLiveAnnouncer as ee } from "../../composables/useLiveAnnouncer.js";
-import { useTimer as te } from "../../composables/useTimer.js";
-import { normalizeText as u } from "../../utils/text.js";
-import { Fragment as d, computed as f, createBlock as p, createCommentVNode as m, createElementBlock as h, createElementVNode as g, createTextVNode as ne, createVNode as re, defineComponent as _, mergeModels as v, mergeProps as y, normalizeClass as ie, normalizeStyle as b, onMounted as ae, openBlock as x, ref as S, renderList as oe, renderSlot as C, resolveDynamicComponent as se, shallowReactive as w, toDisplayString as T, unref as E, useModel as ce, watch as le, withCtx as ue } from "vue";
+import { useLiveAnnouncer as u } from "../../composables/useLiveAnnouncer.js";
+import { normalizeText as ee } from "../../utils/text.js";
+import { useTypeahead as te } from "../../composables/useTypeahead.js";
+import { Fragment as d, computed as f, createBlock as p, createCommentVNode as m, createElementBlock as h, createElementVNode as g, createTextVNode as ne, createVNode as re, defineComponent as _, mergeModels as v, mergeProps as y, normalizeClass as ie, normalizeStyle as ae, onMounted as oe, openBlock as b, ref as x, renderList as se, renderSlot as S, resolveDynamicComponent as ce, shallowReactive as C, toDisplayString as w, unref as T, useModel as E, watch as le, withCtx as ue } from "vue";
 //#region src/components/VTreeView/VTreeView.vue?vue&type=script&setup=true&lang.ts
 var de = [
 	"data-size",
@@ -24,7 +24,7 @@ var de = [
 	class: "v-visually-hidden",
 	role: "status",
 	"aria-live": "polite"
-}, _e = /*@__PURE__*/ _({
+}, D = /*@__PURE__*/ _({
 	inheritAttrs: !1,
 	__name: "VTreeView",
 	props: /*@__PURE__*/ v({
@@ -43,18 +43,18 @@ var de = [
 		expandedModifiers: {}
 	}),
 	emits: /*@__PURE__*/ v(["activate"], ["update:modelValue", "update:expanded"]),
-	setup(_, { expose: v, emit: _e }) {
-		let D = _, O = ce(_, "modelValue"), k = ce(_, "expanded"), ve = _e, { rootClass: ye, rootStyle: be, forwardedAttrs: xe } = o(), A = e(), Se = a(() => D.label ?? A.value.treeView.label), { polite: Ce, announce: we } = ee(), j = w(/* @__PURE__ */ new Map()), M = w(/* @__PURE__ */ new Set()), N = w(/* @__PURE__ */ new Set());
-		function P(e) {
-			return e.children ?? j.get(e.value);
-		}
+	setup(_, { expose: v, emit: D }) {
+		let O = _, k = E(_, "modelValue"), A = E(_, "expanded"), _e = D, { rootClass: ve, rootStyle: ye, forwardedAttrs: be } = o(), j = e(), xe = a(() => O.label ?? j.value.treeView.label), { polite: Se, announce: Ce } = u(), M = C(/* @__PURE__ */ new Map()), N = C(/* @__PURE__ */ new Set()), P = C(/* @__PURE__ */ new Set());
 		function F(e) {
-			return !!D.loadChildren && !!e.lazy && !e.children && !j.has(e.value);
+			return e.children ?? M.get(e.value);
 		}
 		function I(e) {
-			return !!P(e)?.length || F(e);
+			return !!O.loadChildren && !!e.lazy && !e.children && !M.has(e.value);
+		}
+		function L(e) {
+			return !!F(e)?.length || I(e);
 		}
-		let L = f(() => new Set(k.value)), R = f(() => {
+		let R = f(() => new Set(A.value)), z = f(() => {
 			let e = [], t = (n, r, i) => {
 				n.forEach((a, o) => {
 					let s = {
@@ -65,236 +65,228 @@ var de = [
 						setsize: n.length
 					};
 					e.push(s);
-					let c = P(a);
-					c && L.value.has(a.value) && t(c, r + 1, s);
+					let c = F(a);
+					c && R.value.has(a.value) && t(c, r + 1, s);
 				});
 			};
-			return t(D.items, 1, null), e;
+			return t(O.items, 1, null), e;
 		});
-		function z(e, t) {
-			t !== L.value.has(e.value) && (k.value = t ? [...k.value, e.value] : k.value.filter((t) => t !== e.value));
+		function B(e, t) {
+			t !== R.value.has(e.value) && (A.value = t ? [...A.value, e.value] : A.value.filter((t) => t !== e.value));
 		}
-		function B(e) {
+		function V(e) {
 			let t = /* @__PURE__ */ new Map(), n = (r, i) => {
 				t.set(r.value, "false");
-				let a = i || e.has(r.value), o = P(r), s = a ? "true" : "false";
+				let a = i || e.has(r.value), o = F(r), s = a ? "true" : "false";
 				if (o?.length) {
 					let e = o.map((e) => n(e, a));
 					s = e.every((e) => e === "true") ? "true" : e.every((e) => e === "false") ? "false" : "mixed";
 				}
 				return t.set(r.value, s), s;
 			};
-			return D.items.forEach((e) => n(e, !1)), t;
+			return O.items.forEach((e) => n(e, !1)), t;
 		}
-		let V = f(() => {
-			let e = O.value;
-			return D.selectionMode === "multiple" ? Array.isArray(e) ? e : [] : e === null || Array.isArray(e) ? [] : [e];
-		}), H = f(() => D.selectionMode === "multiple" ? B(new Set(V.value)) : /* @__PURE__ */ new Map());
-		function U(e, t) {
-			t(e), P(e)?.forEach((e) => {
-				e.disabled || U(e, t);
+		let H = f(() => {
+			let e = k.value;
+			return O.selectionMode === "multiple" ? Array.isArray(e) ? e : [] : e === null || Array.isArray(e) ? [] : [e];
+		}), U = f(() => O.selectionMode === "multiple" ? V(new Set(H.value)) : /* @__PURE__ */ new Map());
+		function W(e, t) {
+			t(e), F(e)?.forEach((e) => {
+				e.disabled || W(e, t);
 			});
 		}
-		function Te(e) {
-			let t = H.value, n = /* @__PURE__ */ new Set();
+		function we(e) {
+			let t = U.value, n = /* @__PURE__ */ new Set();
 			t.forEach((e, t) => {
 				e === "true" && n.add(t);
 			});
-			let r = V.value.filter((e) => !t.has(e)), i = !1;
-			if (U(e.item, (e) => {
-				!P(e)?.length && t.get(e.value) !== "true" && (i = !0);
-			}), U(e.item, (e) => {
-				i ? P(e)?.length || n.add(e.value) : n.delete(e.value);
+			let r = H.value.filter((e) => !t.has(e)), i = !1;
+			if (W(e.item, (e) => {
+				!F(e)?.length && t.get(e.value) !== "true" && (i = !0);
+			}), W(e.item, (e) => {
+				i ? F(e)?.length || n.add(e.value) : n.delete(e.value);
 			}), !i) for (let t = e.parent; t; t = t.parent) n.delete(t.item.value);
 			let a = [];
-			B(n).forEach((e, t) => {
+			V(n).forEach((e, t) => {
 				e === "true" && a.push(t);
-			}), O.value = [...a, ...r];
-		}
-		function W(e) {
-			return D.selectionMode === "single" && V.value[0] === e.value;
+			}), k.value = [...a, ...r];
 		}
 		function G(e) {
+			return O.selectionMode === "single" && H.value[0] === e.value;
+		}
+		function K(e) {
 			let { item: t } = e;
-			D.selectionMode === "single" ? O.value = t.value : D.selectionMode === "multiple" ? Te(e) : t.href === void 0 && I(t) && z(t, !L.value.has(t.value));
+			O.selectionMode === "single" ? k.value = t.value : O.selectionMode === "multiple" ? we(e) : t.href === void 0 && L(t) && B(t, !R.value.has(t.value));
 		}
-		function K(e, t) {
-			G(e), ve("activate", e.item, t);
+		function q(e, t) {
+			K(e), _e("activate", e.item, t);
 		}
-		async function Ee(e) {
-			let t = D.loadChildren;
+		async function Te(e) {
+			let t = O.loadChildren;
 			if (t) {
-				M.add(e.value), N.delete(e.value);
+				N.add(e.value), P.delete(e.value);
 				try {
-					j.set(e.value, await t(e));
+					M.set(e.value, await t(e));
 				} catch {
-					N.add(e.value), z(e, !1), we(A.value.treeView.loadError(e.label), !1);
+					P.add(e.value), B(e, !1), Ce(j.value.treeView.loadError(e.label), !1);
 				} finally {
-					M.delete(e.value);
+					N.delete(e.value);
 				}
 			}
 		}
-		ae(() => {
-			le([R, L], ([e, t]) => {
-				for (let { item: n } of e) t.has(n.value) && F(n) && !M.has(n.value) && Ee(n);
+		oe(() => {
+			le([z, R], ([e, t]) => {
+				for (let { item: n } of e) t.has(n.value) && I(n) && !N.has(n.value) && Te(n);
 			}, { immediate: !0 });
 		});
-		let q = S(null), J = /* @__PURE__ */ new Map(), Y = /* @__PURE__ */ new WeakMap();
-		function De(e, t) {
-			t instanceof HTMLElement ? (J.set(e, t), Y.set(t, e)) : J.delete(e);
+		let J = x(null), Y = /* @__PURE__ */ new Map(), X = /* @__PURE__ */ new WeakMap();
+		function Ee(e, t) {
+			t instanceof HTMLElement ? (Y.set(e, t), X.set(t, e)) : Y.delete(e);
 		}
-		let Oe = S(null), X = f(() => {
-			let e = R.value, t = new Set(e.map((e) => e.item.value));
-			for (let e = Oe.value; e; e = e.parent) if (t.has(e.item.value)) return e.item.value;
-			return ((D.selectionMode === "multiple" ? e.find((e) => H.value.get(e.item.value) === "true") : e.find((e) => W(e.item))) ?? e.find((e) => e.item.current) ?? e[0])?.item.value;
+		let De = x(null), Z = f(() => {
+			let e = z.value, t = new Set(e.map((e) => e.item.value));
+			for (let e = De.value; e; e = e.parent) if (t.has(e.item.value)) return e.item.value;
+			return ((O.selectionMode === "multiple" ? e.find((e) => U.value.get(e.item.value) === "true") : e.find((e) => G(e.item))) ?? e.find((e) => e.item.current) ?? e[0])?.item.value;
 		});
-		function ke(e) {
-			let t = Y.get(e.target);
-			t !== void 0 && (Oe.value = R.value.find((e) => e.item.value === t) ?? null);
+		function Oe(e) {
+			let t = X.get(e.target);
+			t !== void 0 && (De.value = z.value.find((e) => e.item.value === t) ?? null);
 		}
-		function Z(e) {
-			e && J.get(e.item.value)?.focus();
+		function Q(e) {
+			e && Y.get(e.item.value)?.focus();
 		}
-		let Ae = te(), Q = "";
-		function je(e, t) {
-			Q += u(e), Ae.start(() => Q = "", 500);
-			let n = R.value, r = [...Q].every((e) => e === Q[0]) ? Q[0] : Q, i = r.length === 1 ? t + 1 : t;
-			for (let e = 0; e < n.length; e++) {
-				let t = n[(i + e) % n.length];
-				if (u(t.item.label).startsWith(r)) return Z(t);
-			}
+		let { find: ke } = te();
+		function Ae(e, t) {
+			let n = z.value;
+			Q(n[ke(e, n.length, t, (e) => ee(n[e].item.label))]);
 		}
-		function Me(e) {
-			let t = q.value, n = Y.get(e.target);
+		function je(e) {
+			let t = J.value, n = X.get(e.target);
 			if (!t || n === void 0 || e.altKey || e.ctrlKey || e.metaKey) return;
-			let i = R.value, a = i.findIndex((e) => e.item.value === n), o = i[a];
+			let i = z.value, a = i.findIndex((e) => e.item.value === n), o = i[a];
 			if (!o) return;
-			let { item: s } = o, c = L.value.has(s.value), l = r(t) ? "ArrowLeft" : "ArrowRight", ee = r(t) ? "ArrowRight" : "ArrowLeft";
+			let { item: s } = o, c = R.value.has(s.value), l = r(t) ? "ArrowLeft" : "ArrowRight", u = r(t) ? "ArrowRight" : "ArrowLeft";
 			switch (e.key) {
 				case "ArrowDown":
-					Z(i[a + 1]);
+					Q(i[a + 1]);
 					break;
 				case "ArrowUp":
-					Z(i[a - 1]);
+					Q(i[a - 1]);
 					break;
 				case "Home":
-					Z(i[0]);
+					Q(i[0]);
 					break;
 				case "End":
-					Z(i.at(-1));
+					Q(i.at(-1));
 					break;
 				case l:
-					if (!I(s)) break;
-					c ? i[a + 1]?.parent?.item === s && Z(i[a + 1]) : s.disabled || z(s, !0);
+					if (!L(s)) break;
+					c ? i[a + 1]?.parent?.item === s && Q(i[a + 1]) : s.disabled || B(s, !0);
 					break;
-				case ee:
-					I(s) && c && !s.disabled ? z(s, !1) : Z(o.parent ?? void 0);
+				case u:
+					L(s) && c && !s.disabled ? B(s, !1) : Q(o.parent ?? void 0);
 					break;
 				case "Enter":
 					if (s.href !== void 0) return;
-					s.disabled || K(o, e);
+					s.disabled || q(o, e);
 					break;
 				case " ":
 					if (s.disabled) break;
-					s.href === void 0 ? K(o, e) : G(o);
+					s.href === void 0 ? q(o, e) : K(o);
 					break;
 				case "*": {
-					let e = (o.parent ? P(o.parent.item) : D.items).filter((e) => !e.disabled && I(e)).map((e) => e.value).filter((e) => !L.value.has(e));
-					e.length && (k.value = [...k.value, ...e]);
+					let e = (o.parent ? F(o.parent.item) : O.items).filter((e) => !e.disabled && L(e)).map((e) => e.value).filter((e) => !R.value.has(e));
+					e.length && (A.value = [...A.value, ...e]);
 					break;
 				}
 				default:
 					if (e.key.length !== 1 || e.key === " ") return;
-					je(e.key, a);
+					Ae(e.key, a);
 			}
 			e.preventDefault();
 		}
-		function Ne(e, t) {
-			if (e.item.disabled) {
-				t.preventDefault();
-				return;
-			}
-			K(e, t);
+		function Me(e, t) {
+			e.item.disabled ? t.preventDefault() : q(e, t);
 		}
-		function Pe(e, t) {
-			t.preventDefault(), t.stopPropagation(), !e.item.disabled && I(e.item) && z(e.item, !L.value.has(e.item.value));
+		function Ne(e, t) {
+			t.preventDefault(), t.stopPropagation(), !e.item.disabled && L(e.item) && B(e.item, !R.value.has(e.item.value));
 		}
 		function $(e) {
 			return {
 				item: e.item,
 				level: e.level,
-				expanded: L.value.has(e.item.value) && !F(e.item)
+				expanded: R.value.has(e.item.value) && !I(e.item)
 			};
 		}
-		function Fe(e) {
-			return I(e) ? String(L.value.has(e.value)) : void 0;
+		function Pe(e) {
+			return L(e) ? String(R.value.has(e.value)) : void 0;
 		}
-		function Ie(e) {
+		function Fe(e) {
 			if (e.current) return e.href === void 0 ? "true" : "page";
 		}
 		return v({
-			focus: (e) => X.value !== void 0 && J.get(X.value)?.focus(e),
-			el: q
-		}), (e, r) => (x(), h("div", {
-			class: ie(["v-tree-view", E(ye)]),
-			style: b(E(be))
+			focus: (e) => Z.value !== void 0 && Y.get(Z.value)?.focus(e),
+			el: J
+		}), (e, r) => (b(), h("div", {
+			class: ie(["v-tree-view", T(ve)]),
+			style: ae(T(ye))
 		}, [g("ul", y({
 			ref_key: "treeEl",
-			ref: q,
+			ref: J,
 			class: "v-tree v-control",
 			role: "tree",
 			"data-size": _.size,
 			"aria-multiselectable": _.selectionMode === "multiple" || void 0
-		}, E(xe), {
-			"aria-label": E(Se),
-			onKeydown: Me,
-			onFocusin: ke
-		}), [(x(!0), h(d, null, oe(R.value, (r) => (x(), h("li", {
+		}, T(be), {
+			"aria-label": T(xe),
+			onKeydown: je,
+			onFocusin: Oe
+		}), [(b(!0), h(d, null, se(z.value, (r) => (b(), h("li", {
 			key: r.item.value,
 			class: "v-tree-node",
 			role: "none"
-		}, [(x(), p(se(r.item.href === void 0 ? "div" : "a"), {
+		}, [(b(), p(ce(r.item.href === void 0 ? "div" : "a"), {
 			ref_for: !0,
-			ref: (e) => De(r.item.value, e),
+			ref: (e) => Ee(r.item.value, e),
 			class: "v-tree-row",
 			role: "treeitem",
-			style: b({ "--tree-level": r.level - 1 }),
+			style: ae({ "--tree-level": r.level - 1 }),
 			href: r.item.disabled ? void 0 : r.item.href,
-			tabindex: X.value === r.item.value ? 0 : -1,
+			tabindex: Z.value === r.item.value ? 0 : -1,
 			"aria-level": r.level,
 			"aria-setsize": r.setsize,
 			"aria-posinset": r.posinset,
-			"aria-expanded": Fe(r.item),
-			"aria-selected": _.selectionMode === "single" ? String(W(r.item)) : void 0,
-			"aria-checked": _.selectionMode === "multiple" ? H.value.get(r.item.value) : void 0,
-			"aria-current": Ie(r.item),
+			"aria-expanded": Pe(r.item),
+			"aria-selected": _.selectionMode === "single" ? String(G(r.item)) : void 0,
+			"aria-checked": _.selectionMode === "multiple" ? U.value.get(r.item.value) : void 0,
+			"aria-current": Fe(r.item),
 			"aria-disabled": r.item.disabled || void 0,
-			"aria-busy": E(M).has(r.item.value) || void 0,
+			"aria-busy": T(N).has(r.item.value) || void 0,
 			"data-current": r.item.current ? "" : void 0,
-			onClick: (e) => Ne(r, e)
+			onClick: (e) => Me(r, e)
 		}, {
 			default: ue(() => [
 				g("span", {
 					class: "v-tree-toggle",
 					"aria-hidden": "true",
-					onClick: (e) => Pe(r, e)
-				}, [E(M).has(r.item.value) ? (x(), p(i, { key: 0 })) : I(r.item) ? (x(), p(n, {
+					onClick: (e) => Ne(r, e)
+				}, [T(N).has(r.item.value) ? (b(), p(i, { key: 0 })) : L(r.item) ? (b(), p(n, {
 					key: 1,
 					class: "v-tree-chevron",
-					name: E(s),
+					name: T(s),
 					mirrored: ""
 				}, null, 8, ["name"])) : m("", !0)], 8, fe),
-				_.selectionMode === "multiple" ? (x(), p(c, { key: 0 })) : m("", !0),
-				C(e.$slots, "icon", y({ ref_for: !0 }, $(r)), () => [r.item.icon ? (x(), p(n, y({
+				_.selectionMode === "multiple" ? (b(), p(c, { key: 0 })) : m("", !0),
+				S(e.$slots, "icon", y({ ref_for: !0 }, $(r)), () => [r.item.icon ? (b(), p(n, y({
 					key: 0,
 					class: "v-tree-icon"
-				}, { ref_for: !0 }, E(t)(r.item.icon)), null, 16)) : m("", !0)]),
-				g("span", pe, [C(e.$slots, "label", y({ ref_for: !0 }, $(r)), () => [ne(T(r.item.label), 1)])]),
-				E(N).has(r.item.value) ? (x(), h(d, { key: 1 }, [re(n, {
+				}, { ref_for: !0 }, T(t)(r.item.icon)), null, 16)) : m("", !0)]),
+				g("span", pe, [S(e.$slots, "label", y({ ref_for: !0 }, $(r)), () => [ne(w(r.item.label), 1)])]),
+				T(P).has(r.item.value) ? (b(), h(d, { key: 1 }, [re(n, {
 					class: "v-tree-error",
-					name: E(l)
-				}, null, 8, ["name"]), g("span", me, T(E(A).treeView.loadFailed), 1)], 64)) : m("", !0),
-				e.$slots.end ? (x(), h("span", he, [C(e.$slots, "end", y({ ref_for: !0 }, $(r)))])) : m("", !0)
+					name: T(l)
+				}, null, 8, ["name"]), g("span", me, w(T(j).treeView.loadFailed), 1)], 64)) : m("", !0),
+				e.$slots.end ? (b(), h("span", he, [S(e.$slots, "end", y({ ref_for: !0 }, $(r)))])) : m("", !0)
 			]),
 			_: 2
 		}, 1032, [
@@ -312,10 +304,10 @@ var de = [
 			"aria-busy",
 			"data-current",
 			"onClick"
-		]))]))), 128))], 16, de), g("div", ge, T(E(Ce)), 1)], 6));
+		]))]))), 128))], 16, de), g("div", ge, w(T(Se)), 1)], 6));
 	}
 });
 //#endregion
-export { _e as default };
+export { D as default };
 
 //# sourceMappingURL=VTreeView.vue_vue_type_script_setup_true_lang.js.map