vectis-ui 0.13.0 → 0.15.0

package/dist/components/VResizable/VResizable.js.map

@@ -1 +1 @@
-{"version":3,"file":"VResizable.js","names":[],"sources":["../../../src/components/VResizable/VResizable.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * No native element resizes siblings, so each handle follows the APG window splitter: a focusable\n * `separator` carrying the size of its primary panel, moved with the arrow keys or dragged under\n * pointer capture. Sizes are percentages rendered as `flex-grow` weights, which needs no\n * measurement on the server.\n */\n\nimport {\n  cloneVNode,\n  computed,\n  onMounted,\n  provide,\n  ref,\n  shallowReactive,\n  shallowRef,\n  useId,\n  watchEffect,\n  type FunctionalComponent,\n  type VNode,\n} from 'vue'\n\nimport { useSlotNodes } from '../../composables/useSlotNodes'\nimport { useMessages } from '../../i18n/state'\nimport { isRtl } from '../../utils/direction'\nimport { isDev } from '../../utils/env'\nimport { clamp } from '../../utils/number'\nimport { resizableKey, type ResizablePanelEntry } from './context'\nimport { defaultSizes, isCollapsedAt, resizeAt, type PanelLimits } from './layout'\nimport VResizablePanel from './VResizablePanel.vue'\n\n/** Which way the panels are laid out: side by side, or stacked. */\nexport type ResizableOrientation = 'horizontal' | 'vertical'\n\n/** A panel limit: a number in percent of the group, or a CSS length such as `240px`. */\nexport type ResizableLength = number | string\n\ninterface ResizableProps {\n  /**\n   * `horizontal` puts the panels side by side, following the direction of the text; `vertical`\n   * stacks them, and the group then needs a height.\n   */\n  orientation?: ResizableOrientation\n  /** Fixes the sizes: the handles can neither be dragged nor focused. */\n  disabled?: boolean\n  /** Draws a grip in the middle of every handle, which makes it easier to find. */\n  grip?: boolean\n  /** How far an arrow key moves a handle, in percent of the group. */\n  step?: number\n}\n\nconst props = withDefaults(defineProps<ResizableProps>(), {\n  orientation: 'horizontal',\n  disabled: false,\n  grip: false,\n  step: 5,\n})\n\n/**\n * The size of each panel, in percent of the space they share, adding up to 100. Left unbound,\n * the panels start from their `defaultSize`.\n */\nconst model = defineModel<number[]>()\n\nconst emit = defineEmits<{\n  /**\n   * The sizes have settled: a handle was released, moved with a key, or a panel collapsed or\n   * reopened. Save them here rather than on every `update:modelValue` of a drag.\n   */\n  change: [sizes: number[]]\n}>()\n\ndefineSlots<{\n  /** The `<VResizablePanel>`s, two or more. A handle is placed between each pair. */\n  default(): unknown\n}>()\n\nconst m = useMessages()\nconst baseId = useId()\nconst rootEl = ref<HTMLElement | null>(null)\nconst horizontal = computed(() => props.orientation === 'horizontal')\n\n// @ssr\n/*\n * The panels are read from the slot's VNodes, never from a registry fed at mount, which would\n * render no handle on the server. Cloning gives each panel its position and the id its handle\n * points at (the VCarousel idiom).\n */\nconst nodes = useSlotNodes()\nconst panels = computed(() => nodes.value.filter((node) => node.type === VResizablePanel))\n\nconst nodeProp = (node: VNode, camel: string, kebab: string): unknown =>\n  node.props?.[camel] ?? node.props?.[kebab]\n\nconst panelId = (node: VNode, index: number) =>\n  (node.props?.id as string | undefined) ?? `${baseId}-panel-${index}`\n\nconst defaults = computed(() =>\n  defaultSizes(\n    panels.value.map((node) => {\n      const size = nodeProp(node, 'defaultSize', 'default-size')\n      return size === undefined || size === null ? undefined : Number(size)\n    }),\n  ),\n)\n\nconst sizes = computed(() =>\n  model.value?.length === panels.value.length ? model.value : defaults.value,\n)\n\nconst entries = shallowReactive(new Map<string, ResizablePanelEntry>())\nconst entryAt = (index: number) => {\n  for (const entry of entries.values()) if (entry.index === index) return entry\n  return undefined\n}\n\n/** Restored when a collapsed panel reopens: its size when it collapsed, by panel. */\nconst restoreSizes = new WeakMap<ResizablePanelEntry, number>()\n\n// @core\n/*\n * CSS lengths are converted at each interaction, against the space the panels share at that\n * moment. The pixels are cached so that the ARIA values can be derived reactively.\n */\nconst space = ref(0)\nconst pixels = shallowReactive(new Map<string, number>())\n\nconst lengthKey = (length: string) => `${props.orientation}:${length}`\n\nfunction percentOf(length: ResizableLength | undefined): number | undefined {\n  if (length === undefined) return undefined\n  if (typeof length === 'number') return length\n  if (length.trim().endsWith('%')) return Number.parseFloat(length)\n  const px = pixels.get(lengthKey(length))\n  return px === undefined || !space.value ? undefined : (px / space.value) * 100\n}\n\nconst limits = computed<PanelLimits[]>(() =>\n  panels.value.map((_, index) => {\n    const entry = entryAt(index)\n    const min = clamp(percentOf(entry?.minSize) ?? 0, 0, 100)\n    return {\n      min,\n      max: clamp(percentOf(entry?.maxSize) ?? 100, min, 100),\n      collapsible: !!entry?.collapsible,\n      collapsedSize: clamp(percentOf(entry?.collapsedSize) ?? 0, 0, min),\n    }\n  }),\n)\n\n/**\n * The sizes as laid out: a collapsed panel keeps its collapsed size, and the others share the\n * rest in proportion to their weights, as `flex-grow` distributes it. `before` gives one panel\n * back the collapsed state it had before its model changed.\n */\nfunction layoutOf(before?: { index: number; collapsed: boolean }) {\n  const fixed = sizes.value.map((_, i) =>\n    (i === before?.index ? before.collapsed : entryAt(i)?.collapsed)\n      ? limits.value[i]!.collapsedSize\n      : undefined,\n  )\n  const fixedTotal = fixed.reduce<number>((sum, size) => sum + (size ?? 0), 0)\n  const weights = sizes.value.reduce((sum, size, i) => sum + (fixed[i] === undefined ? size : 0), 0)\n  return sizes.value.map(\n    (size, i) => fixed[i] ?? (weights ? (size / weights) * (100 - fixedTotal) : 0),\n  )\n}\n\nconst layout = computed(() => layoutOf())\n\nfunction lengthInPixels(root: HTMLElement, length: string): number {\n  const probe = document.createElement('div')\n  probe.style.position = 'absolute'\n  probe.style.visibility = 'hidden'\n  probe.style.setProperty(horizontal.value ? 'width' : 'height', length)\n  root.append(probe)\n  const rect = probe.getBoundingClientRect()\n  probe.remove()\n  return horizontal.value ? rect.width : rect.height\n}\n\n/**\n * Measures the panels as they are drawn, which accounts for CSS limits that the weights alone do\n * not show, and refreshes the converted lengths. It falls back to the computed layout when\n * nothing can be measured.\n */\nfunction measure(before?: { index: number; collapsed: boolean }): number[] {\n  const root = rootEl.value\n  const rects = panels.value.map((_, i) => entryAt(i)?.el?.getBoundingClientRect())\n  const extents = rects.map((rect) => (rect ? (horizontal.value ? rect.width : rect.height) : 0))\n  const total = extents.reduce((sum, extent) => sum + extent, 0)\n  if (!root || !total || rects.some((rect) => !rect)) return layoutOf(before)\n  for (const entry of entries.values())\n    for (const length of [entry.minSize, entry.maxSize, entry.collapsedSize])\n      if (typeof length === 'string' && !length.trim().endsWith('%'))\n        pixels.set(lengthKey(length), lengthInPixels(root, length))\n  space.value = total\n  const laidOut = layoutOf(before)\n  // Within two pixels, the difference is the 1px lines shrunk off the panels: the computed sizes\n  // are kept, so the model does not fill with measurement noise. Beyond, CSS limits are at work.\n  const drawn = extents.every((extent, i) => Math.abs(extent - (laidOut[i]! * total) / 100) < 2)\n  return drawn ? laidOut : extents.map((extent) => (extent / total) * 100)\n}\n\nonMounted(measure)\n\nconst sameSizes = (a: readonly number[], b: readonly number[]) =>\n  a.length === b.length && a.every((size, i) => Math.abs(size - b[i]!) < 0.01)\n\n/** Writes new sizes and the collapsed state they imply, remembering what collapsing panels had. */\nfunction apply(next: number[], base: readonly number[]) {\n  if (!sameSizes(next, sizes.value)) model.value = next\n  next.forEach((size, i) => {\n    const entry = entryAt(i)\n    const lim = limits.value[i]!\n    if (!entry || !lim.collapsible) return\n    const now = isCollapsedAt(size, lim)\n    if (now && !isCollapsedAt(base[i]!, lim)) restoreSizes.set(entry, base[i]!)\n    entry.setCollapsed(now)\n  })\n}\n\nfunction commit(next: number[], base: readonly number[]) {\n  apply(next, base)\n  if (!sameSizes(next, base)) emit('change', next)\n}\n\n/**\n * The size a reopened panel returns to: the one it had when it collapsed, or its starting size,\n * within its limits.\n */\nfunction reopenSize(index: number) {\n  const entry = entryAt(index)\n  const lim = limits.value[index]!\n  const remembered = entry && restoreSizes.get(entry)\n  return clamp(remembered ?? defaults.value[index]!, lim.min, lim.max)\n}\n\n/** Collapses or reopens a panel through the handle after it, or before it for the last one. */\nfunction sizesWithCollapsed(index: number, collapse: boolean, base: readonly number[]) {\n  const lim = limits.value[index]!\n  const growth = (collapse ? lim.collapsedSize : reopenSize(index)) - base[index]!\n  return index < base.length - 1\n    ? resizeAt(base, index, growth, limits.value, 1)\n    : resizeAt(base, index - 1, -growth, limits.value, 1)\n}\n\n/**\n * The panel a handle reports on and collapses: the one before it, unless only the one after it\n * can collapse, as for a sidebar on the end side.\n */\nfunction primaryOf(handle: number) {\n  const before = limits.value[handle]\n  const after = limits.value[handle + 1]\n  return !before?.collapsible && after?.collapsible ? handle + 1 : handle\n}\n\nprovide(resizableKey, {\n  get orientation() {\n    return props.orientation\n  },\n  sizeAt: (index) => sizes.value[index] ?? 1,\n  register: (id, entry) => entries.set(id, entry),\n  unregister: (id) => entries.delete(id),\n  // Called from the panel's pre-flush watcher: the DOM still shows the panel as it was.\n  toggle(index, collapse) {\n    const base = measure({ index, collapsed: !collapse })\n    const lim = limits.value[index]\n    if (!lim || isCollapsedAt(base[index]!, lim) === collapse) return\n    commit(sizesWithCollapsed(index, collapse, base), base)\n  },\n})\n\n// @keyboard\n/*\n * The arrows that run along the group move its handles, following the direction of the text.\n * Home and End give the primary panel its smallest and largest size, and Enter collapses or\n * reopens it, as the APG window splitter describes.\n */\nfunction onKeydown(handle: number, event: KeyboardEvent) {\n  if (props.disabled) return\n  const base = measure()\n  const primary = primaryOf(handle)\n  const lim = limits.value[primary]!\n  // Positive when the primary panel grows, negative when it shrinks.\n  const primarySign = primary === handle ? 1 : -1\n  const rtl = horizontal.value && isRtl(rootEl.value)\n  const back = horizontal.value ? (rtl ? 'ArrowRight' : 'ArrowLeft') : 'ArrowUp'\n  const forth = horizontal.value ? (rtl ? 'ArrowLeft' : 'ArrowRight') : 'ArrowDown'\n  let next: number[]\n  if (event.key === back) next = resizeAt(base, handle, -props.step, limits.value, 1)\n  else if (event.key === forth) next = resizeAt(base, handle, props.step, limits.value, 1)\n  else if (event.key === 'Home') {\n    const lowest = lim.collapsible ? lim.collapsedSize : lim.min\n    next = resizeAt(base, handle, (lowest - base[primary]!) * primarySign, limits.value, 1)\n  } else if (event.key === 'End')\n    next = resizeAt(base, handle, (lim.max - base[primary]!) * primarySign, limits.value, 1)\n  else if (event.key === 'Enter' && lim.collapsible)\n    next = sizesWithCollapsed(primary, !isCollapsedAt(base[primary]!, lim), base)\n  else return\n  event.preventDefault()\n  commit(next, base)\n}\n\ninterface Drag {\n  handle: number\n  pointerId: number\n  origin: number\n  base: number[]\n  sign: number\n  last: number[]\n}\n\nconst drag = shallowRef<Drag | null>(null)\n\nconst coordinate = (event: PointerEvent) => (horizontal.value ? event.clientX : event.clientY)\n\nfunction onPointerdown(handle: number, event: PointerEvent) {\n  // A second pointer pressed during a drag is ignored, which leaves one finger in charge.\n  if (props.disabled || event.button !== 0 || drag.value) return\n  const el = event.currentTarget as HTMLElement\n  const base = measure()\n  if (!space.value) return\n  // Prevented so that no text gets selected; the focus a press would give is given back.\n  event.preventDefault()\n  el.focus({ preventScroll: true })\n  // @fallback\n  // Synthetic pointer events have no pointer to capture; the drag then follows the handle only.\n  try {\n    el.setPointerCapture(event.pointerId)\n  } catch {\n    /* Synthetic pointers cannot be captured. */\n  }\n  drag.value = {\n    handle,\n    pointerId: event.pointerId,\n    origin: coordinate(event),\n    base,\n    sign: horizontal.value && isRtl(rootEl.value) ? -1 : 1,\n    last: base,\n  }\n}\n\nfunction onPointermove(event: PointerEvent) {\n  const state = drag.value\n  if (!state || state.pointerId !== event.pointerId) return\n  const delta = ((coordinate(event) - state.origin) / space.value) * 100 * state.sign\n  state.last = resizeAt(state.base, state.handle, delta, limits.value)\n  apply(state.last, state.base)\n}\n\nfunction onPointerEnd(event: PointerEvent) {\n  const state = drag.value\n  if (!state || state.pointerId !== event.pointerId) return\n  drag.value = null\n  if (!sameSizes(state.last, state.base)) emit('change', state.last)\n}\n\nconst handles = computed(() =>\n  panels.value.slice(1).map((_, handle) => {\n    const primary = primaryOf(handle)\n    const node = panels.value[primary]!\n    const lim = limits.value[primary]!\n    return {\n      controls: panelId(node, primary),\n      label:\n        (nodeProp(node, 'label', 'label') as string | undefined) ??\n        m.value.resizable.panel(primary + 1),\n      now: Math.round(layout.value[primary] ?? 0),\n      min: Math.round(lim.collapsible ? lim.collapsedSize : lim.min),\n      max: Math.round(lim.max),\n    }\n  }),\n)\n\n/** Renders a captured panel VNode, which `<component :is>` cannot do. */\nconst PanelNode: FunctionalComponent<{ node: VNode; index: number }> = ({ node, index }) =>\n  cloneVNode(node, { index, id: panelId(node, index) })\n\n// @devwarn\nif (isDev) {\n  watchEffect(() => {\n    if (nodes.value.length !== panels.value.length)\n      console.warn('[VResizable] Only VResizablePanel children are rendered.')\n    if (model.value && model.value.length !== panels.value.length)\n      console.warn(\n        `[VResizable] The v-model holds ${model.value.length} sizes for ${panels.value.length} panels; the default sizes are used.`,\n      )\n  })\n}\n</script>\n\n<template>\n  <div\n    ref=\"rootEl\"\n    class=\"v-resizable\"\n    :data-orientation=\"orientation\"\n    :data-disabled=\"disabled ? '' : undefined\"\n    :data-dragging=\"drag ? '' : undefined\"\n  >\n    <template v-for=\"(node, index) in panels\" :key=\"node.key ?? index\">\n      <!--\n        A horizontal group is divided by vertical lines. `aria-orientation` is only written when\n        it differs from the separator's implicit horizontal, as on VSeparator.\n      -->\n      <div\n        v-if=\"index > 0\"\n        class=\"v-resizable-handle\"\n        role=\"separator\"\n        :tabindex=\"disabled ? undefined : 0\"\n        :aria-orientation=\"horizontal ? 'vertical' : undefined\"\n        :aria-label=\"handles[index - 1]!.label\"\n        :aria-controls=\"handles[index - 1]!.controls\"\n        :aria-valuenow=\"handles[index - 1]!.now\"\n        :aria-valuemin=\"handles[index - 1]!.min\"\n        :aria-valuemax=\"handles[index - 1]!.max\"\n        :aria-disabled=\"disabled || undefined\"\n        :data-active=\"drag?.handle === index - 1 ? '' : undefined\"\n        @keydown=\"onKeydown(index - 1, $event)\"\n        @pointerdown=\"onPointerdown(index - 1, $event)\"\n        @pointermove=\"onPointermove\"\n        @pointerup=\"onPointerEnd\"\n        @pointercancel=\"onPointerEnd\"\n        @lostpointercapture=\"onPointerEnd\"\n      >\n        <span v-if=\"grip\" class=\"v-resizable-grip\" aria-hidden=\"true\" />\n      </div>\n      <PanelNode :node=\"node\" :index=\"index\" />\n    </template>\n  </div>\n</template>\n\n<style>\n@layer vectis.components {\n  .v-resizable {\n    --resizable-hit: var(--vectis-control-size-resizable-hit);\n    display: flex;\n  }\n\n  .v-resizable[data-orientation='vertical'] {\n    flex-direction: column;\n  }\n\n  .v-resizable[data-dragging] {\n    user-select: none;\n  }\n\n  .v-resizable-handle {\n    position: relative;\n    z-index: 1;\n    flex: none;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    border: 0 solid var(--vectis-color-border);\n    touch-action: none;\n    transition:\n      border-color var(--vectis-duration-fast) var(--vectis-ease-default),\n      box-shadow var(--vectis-duration-fast) var(--vectis-ease-default);\n  }\n\n  /* The strip that catches the pointer, wider than the 1px line it is centred on. */\n  .v-resizable-handle::before {\n    content: '';\n    position: absolute;\n  }\n\n  /* The content box stays empty so the line is exactly 1px: the grip overflows it, centred. */\n  .v-resizable[data-orientation='horizontal'] > .v-resizable-handle {\n    inline-size: 0;\n    border-inline-start-width: 1px;\n    cursor: col-resize;\n  }\n\n  .v-resizable[data-orientation='horizontal'] > .v-resizable-handle::before {\n    inset-block: 0;\n    inset-inline: calc(var(--resizable-hit) / -2);\n  }\n\n  .v-resizable[data-orientation='vertical'] > .v-resizable-handle {\n    block-size: 0;\n    border-block-start-width: 1px;\n    cursor: row-resize;\n  }\n\n  .v-resizable[data-orientation='vertical'] > .v-resizable-handle::before {\n    inset-inline: 0;\n    inset-block: calc(var(--resizable-hit) / -2);\n  }\n\n  .v-resizable[data-dragging][data-orientation='horizontal'] {\n    cursor: col-resize;\n  }\n\n  .v-resizable[data-dragging][data-orientation='vertical'] {\n    cursor: row-resize;\n  }\n\n  .v-resizable-handle:is(:hover, [data-active]):not([aria-disabled]) {\n    border-color: var(--vectis-color-accent);\n    box-shadow: 0 0 0 1px var(--vectis-color-accent);\n  }\n\n  .v-resizable-handle:focus-visible {\n    outline: var(--vectis-focus-ring-width) solid var(--vectis-focus-ring-color);\n    outline-offset: var(--vectis-focus-ring-offset);\n  }\n\n  .v-resizable-grip {\n    flex: none;\n    border: 1px solid transparent;\n    border-radius: var(--vectis-radius-pill);\n    background: var(--vectis-color-border-strong);\n    transition: background-color var(--vectis-duration-fast) var(--vectis-ease-default);\n  }\n\n  .v-resizable[data-orientation='horizontal'] > .v-resizable-handle > .v-resizable-grip {\n    inline-size: var(--vectis-control-size-resizable-grip-thickness);\n    block-size: var(--vectis-control-size-resizable-grip-length);\n  }\n\n  .v-resizable[data-orientation='vertical'] > .v-resizable-handle > .v-resizable-grip {\n    inline-size: var(--vectis-control-size-resizable-grip-length);\n    block-size: var(--vectis-control-size-resizable-grip-thickness);\n  }\n\n  .v-resizable-handle:is(:hover, [data-active]):not([aria-disabled]) .v-resizable-grip {\n    background: var(--vectis-color-accent);\n  }\n\n  .v-resizable-handle[aria-disabled] {\n    cursor: default;\n  }\n\n  .v-resizable-handle[aria-disabled] .v-resizable-grip {\n    background: var(--vectis-color-border);\n  }\n\n  @media (forced-colors: active) {\n    .v-resizable-handle:is(:hover, [data-active]):not([aria-disabled]) {\n      border-color: Highlight;\n    }\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .v-resizable-handle,\n    .v-resizable-grip {\n      transition: none;\n    }\n  }\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"VResizable.js","names":["_sfc_main","VResizable_vue_vue_type_script_setup_true_lang_default","VResizable_default"],"sources":["../../../src/components/VResizable/VResizable.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * No native element resizes siblings, so each handle follows the APG window splitter: a focusable\n * `separator` carrying the size of its primary panel, moved with the arrow keys or dragged under\n * pointer capture. Sizes are percentages rendered as `flex-grow` weights, which needs no\n * measurement on the server.\n */\n\nimport {\n  cloneVNode,\n  computed,\n  onMounted,\n  provide,\n  ref,\n  shallowReactive,\n  shallowRef,\n  useId,\n  watchEffect,\n  type FunctionalComponent,\n  type VNode,\n} from 'vue'\n\nimport { useSlotNodes } from '../../composables/useSlotNodes'\nimport { useMessages } from '../../i18n/state'\nimport { isRtl } from '../../utils/direction'\nimport { isDev } from '../../utils/env'\nimport { clamp } from '../../utils/number'\nimport { resizableKey, type ResizablePanelEntry } from './context'\nimport { defaultSizes, isCollapsedAt, resizeAt, type PanelLimits } from './layout'\nimport VResizablePanel from './VResizablePanel.vue'\n\n/** Which way the panels are laid out: side by side, or stacked. */\nexport type ResizableOrientation = 'horizontal' | 'vertical'\n\n/** A panel limit: a number in percent of the group, or a CSS length such as `240px`. */\nexport type ResizableLength = number | string\n\ninterface ResizableProps {\n  /**\n   * `horizontal` puts the panels side by side, following the direction of the text; `vertical`\n   * stacks them, and the group then needs a height.\n   */\n  orientation?: ResizableOrientation\n  /** Fixes the sizes: the handles can neither be dragged nor focused. */\n  disabled?: boolean\n  /** Draws a grip in the middle of every handle, which makes it easier to find. */\n  grip?: boolean\n  /** How far an arrow key moves a handle, in percent of the group. */\n  step?: number\n}\n\nconst props = withDefaults(defineProps<ResizableProps>(), {\n  orientation: 'horizontal',\n  disabled: false,\n  grip: false,\n  step: 5,\n})\n\n/**\n * The size of each panel, in percent of the space they share, adding up to 100. Left unbound,\n * the panels start from their `defaultSize`.\n */\nconst model = defineModel<number[]>()\n\nconst emit = defineEmits<{\n  /**\n   * The sizes have settled: a handle was released, moved with a key, or a panel collapsed or\n   * reopened. Save them here rather than on every `update:modelValue` of a drag.\n   */\n  change: [sizes: number[]]\n}>()\n\ndefineSlots<{\n  /** The `<VResizablePanel>`s, two or more. A handle is placed between each pair. */\n  default(): unknown\n}>()\n\nconst m = useMessages()\nconst baseId = useId()\nconst rootEl = ref<HTMLElement | null>(null)\nconst horizontal = computed(() => props.orientation === 'horizontal')\n\n// @ssr\n/*\n * The panels are read from the slot's VNodes, never from a registry fed at mount, which would\n * render no handle on the server. Cloning gives each panel its position and the id its handle\n * points at (the VCarousel idiom).\n */\nconst nodes = useSlotNodes()\nconst panels = computed(() => nodes.value.filter((node) => node.type === VResizablePanel))\n\nconst nodeProp = (node: VNode, camel: string, kebab: string): unknown =>\n  node.props?.[camel] ?? node.props?.[kebab]\n\nconst panelId = (node: VNode, index: number) =>\n  (node.props?.id as string | undefined) ?? `${baseId}-panel-${index}`\n\nconst defaults = computed(() =>\n  defaultSizes(\n    panels.value.map((node) => {\n      const size = nodeProp(node, 'defaultSize', 'default-size')\n      return size === undefined || size === null ? undefined : Number(size)\n    }),\n  ),\n)\n\nconst sizes = computed(() =>\n  model.value?.length === panels.value.length ? model.value : defaults.value,\n)\n\nconst entries = shallowReactive(new Map<string, ResizablePanelEntry>())\nconst entryAt = (index: number) => {\n  for (const entry of entries.values()) if (entry.index === index) return entry\n  return undefined\n}\n\n/** Restored when a collapsed panel reopens: its size when it collapsed, by panel. */\nconst restoreSizes = new WeakMap<ResizablePanelEntry, number>()\n\n// @core\n/*\n * CSS lengths are converted at each interaction, against the space the panels share at that\n * moment. The pixels are cached so that the ARIA values can be derived reactively.\n */\nconst space = ref(0)\nconst pixels = shallowReactive(new Map<string, number>())\n\nconst lengthKey = (length: string) => `${props.orientation}:${length}`\n\nfunction percentOf(length: ResizableLength | undefined): number | undefined {\n  if (length === undefined) return undefined\n  if (typeof length === 'number') return length\n  if (length.trim().endsWith('%')) return Number.parseFloat(length)\n  const px = pixels.get(lengthKey(length))\n  return px === undefined || !space.value ? undefined : (px / space.value) * 100\n}\n\nconst limits = computed<PanelLimits[]>(() =>\n  panels.value.map((_, index) => {\n    const entry = entryAt(index)\n    const min = clamp(percentOf(entry?.minSize) ?? 0, 0, 100)\n    return {\n      min,\n      max: clamp(percentOf(entry?.maxSize) ?? 100, min, 100),\n      collapsible: !!entry?.collapsible,\n      collapsedSize: clamp(percentOf(entry?.collapsedSize) ?? 0, 0, min),\n    }\n  }),\n)\n\n/**\n * The sizes as laid out: a collapsed panel keeps its collapsed size, and the others share the\n * rest in proportion to their weights, as `flex-grow` distributes it. `before` gives one panel\n * back the collapsed state it had before its model changed.\n */\nfunction layoutOf(before?: { index: number; collapsed: boolean }) {\n  const fixed = sizes.value.map((_, i) =>\n    (i === before?.index ? before.collapsed : entryAt(i)?.collapsed)\n      ? limits.value[i]!.collapsedSize\n      : undefined,\n  )\n  const fixedTotal = fixed.reduce<number>((sum, size) => sum + (size ?? 0), 0)\n  const weights = sizes.value.reduce((sum, size, i) => sum + (fixed[i] === undefined ? size : 0), 0)\n  return sizes.value.map(\n    (size, i) => fixed[i] ?? (weights ? (size / weights) * (100 - fixedTotal) : 0),\n  )\n}\n\nconst layout = computed(() => layoutOf())\n\nfunction lengthInPixels(root: HTMLElement, length: string): number {\n  const probe = document.createElement('div')\n  probe.style.position = 'absolute'\n  probe.style.visibility = 'hidden'\n  probe.style.setProperty(horizontal.value ? 'width' : 'height', length)\n  root.append(probe)\n  const rect = probe.getBoundingClientRect()\n  probe.remove()\n  return horizontal.value ? rect.width : rect.height\n}\n\n/**\n * Measures the panels as they are drawn, which accounts for CSS limits that the weights alone do\n * not show, and refreshes the converted lengths. It falls back to the computed layout when\n * nothing can be measured.\n */\nfunction measure(before?: { index: number; collapsed: boolean }): number[] {\n  const root = rootEl.value\n  const rects = panels.value.map((_, i) => entryAt(i)?.el?.getBoundingClientRect())\n  const extents = rects.map((rect) => (rect ? (horizontal.value ? rect.width : rect.height) : 0))\n  const total = extents.reduce((sum, extent) => sum + extent, 0)\n  if (!root || !total || rects.some((rect) => !rect)) return layoutOf(before)\n  for (const entry of entries.values())\n    for (const length of [entry.minSize, entry.maxSize, entry.collapsedSize])\n      if (typeof length === 'string' && !length.trim().endsWith('%'))\n        pixels.set(lengthKey(length), lengthInPixels(root, length))\n  space.value = total\n  const laidOut = layoutOf(before)\n  // Within two pixels, the difference is the 1px lines shrunk off the panels: the computed sizes\n  // are kept, so the model does not fill with measurement noise. Beyond, CSS limits are at work.\n  const drawn = extents.every((extent, i) => Math.abs(extent - (laidOut[i]! * total) / 100) < 2)\n  return drawn ? laidOut : extents.map((extent) => (extent / total) * 100)\n}\n\nonMounted(measure)\n\nconst sameSizes = (a: readonly number[], b: readonly number[]) =>\n  a.length === b.length && a.every((size, i) => Math.abs(size - b[i]!) < 0.01)\n\n/** Writes new sizes and the collapsed state they imply, remembering what collapsing panels had. */\nfunction apply(next: number[], base: readonly number[]) {\n  if (!sameSizes(next, sizes.value)) model.value = next\n  next.forEach((size, i) => {\n    const entry = entryAt(i)\n    const lim = limits.value[i]!\n    if (!entry || !lim.collapsible) return\n    const now = isCollapsedAt(size, lim)\n    if (now && !isCollapsedAt(base[i]!, lim)) restoreSizes.set(entry, base[i]!)\n    entry.setCollapsed(now)\n  })\n}\n\nfunction commit(next: number[], base: readonly number[]) {\n  apply(next, base)\n  if (!sameSizes(next, base)) emit('change', next)\n}\n\n/**\n * The size a reopened panel returns to: the one it had when it collapsed, or its starting size,\n * within its limits.\n */\nfunction reopenSize(index: number) {\n  const entry = entryAt(index)\n  const lim = limits.value[index]!\n  const remembered = entry && restoreSizes.get(entry)\n  return clamp(remembered ?? defaults.value[index]!, lim.min, lim.max)\n}\n\n/** Collapses or reopens a panel through the handle after it, or before it for the last one. */\nfunction sizesWithCollapsed(index: number, collapse: boolean, base: readonly number[]) {\n  const lim = limits.value[index]!\n  const growth = (collapse ? lim.collapsedSize : reopenSize(index)) - base[index]!\n  return index < base.length - 1\n    ? resizeAt(base, index, growth, limits.value, 1)\n    : resizeAt(base, index - 1, -growth, limits.value, 1)\n}\n\n/**\n * The panel a handle reports on and collapses: the one before it, unless only the one after it\n * can collapse, as for a sidebar on the end side.\n */\nfunction primaryOf(handle: number) {\n  const before = limits.value[handle]\n  const after = limits.value[handle + 1]\n  return !before?.collapsible && after?.collapsible ? handle + 1 : handle\n}\n\nprovide(resizableKey, {\n  get orientation() {\n    return props.orientation\n  },\n  sizeAt: (index) => sizes.value[index] ?? 1,\n  register: (id, entry) => entries.set(id, entry),\n  unregister: (id) => entries.delete(id),\n  // Called from the panel's pre-flush watcher: the DOM still shows the panel as it was.\n  toggle(index, collapse) {\n    const base = measure({ index, collapsed: !collapse })\n    const lim = limits.value[index]\n    if (!lim || isCollapsedAt(base[index]!, lim) === collapse) return\n    commit(sizesWithCollapsed(index, collapse, base), base)\n  },\n})\n\n// @keyboard\n/*\n * The arrows that run along the group move its handles, following the direction of the text.\n * Home and End give the primary panel its smallest and largest size, and Enter collapses or\n * reopens it, as the APG window splitter describes.\n */\nfunction onKeydown(handle: number, event: KeyboardEvent) {\n  if (props.disabled) return\n  const base = measure()\n  const primary = primaryOf(handle)\n  const lim = limits.value[primary]!\n  // Positive when the primary panel grows, negative when it shrinks.\n  const primarySign = primary === handle ? 1 : -1\n  const rtl = horizontal.value && isRtl(rootEl.value)\n  const back = horizontal.value ? (rtl ? 'ArrowRight' : 'ArrowLeft') : 'ArrowUp'\n  const forth = horizontal.value ? (rtl ? 'ArrowLeft' : 'ArrowRight') : 'ArrowDown'\n  let next: number[]\n  if (event.key === back) next = resizeAt(base, handle, -props.step, limits.value, 1)\n  else if (event.key === forth) next = resizeAt(base, handle, props.step, limits.value, 1)\n  else if (event.key === 'Home') {\n    const lowest = lim.collapsible ? lim.collapsedSize : lim.min\n    next = resizeAt(base, handle, (lowest - base[primary]!) * primarySign, limits.value, 1)\n  } else if (event.key === 'End')\n    next = resizeAt(base, handle, (lim.max - base[primary]!) * primarySign, limits.value, 1)\n  else if (event.key === 'Enter' && lim.collapsible)\n    next = sizesWithCollapsed(primary, !isCollapsedAt(base[primary]!, lim), base)\n  else return\n  event.preventDefault()\n  commit(next, base)\n}\n\ninterface Drag {\n  handle: number\n  pointerId: number\n  origin: number\n  base: number[]\n  sign: number\n  last: number[]\n}\n\nconst drag = shallowRef<Drag | null>(null)\n\nconst coordinate = (event: PointerEvent) => (horizontal.value ? event.clientX : event.clientY)\n\nfunction onPointerdown(handle: number, event: PointerEvent) {\n  // A second pointer pressed during a drag is ignored, which leaves one finger in charge.\n  if (props.disabled || event.button !== 0 || drag.value) return\n  const el = event.currentTarget as HTMLElement\n  const base = measure()\n  if (!space.value) return\n  // Prevented so that no text gets selected; the focus a press would give is given back.\n  event.preventDefault()\n  el.focus({ preventScroll: true })\n  // @fallback\n  // Synthetic pointer events have no pointer to capture; the drag then follows the handle only.\n  try {\n    el.setPointerCapture(event.pointerId)\n  } catch {\n    /* Synthetic pointers cannot be captured. */\n  }\n  drag.value = {\n    handle,\n    pointerId: event.pointerId,\n    origin: coordinate(event),\n    base,\n    sign: horizontal.value && isRtl(rootEl.value) ? -1 : 1,\n    last: base,\n  }\n}\n\nfunction onPointermove(event: PointerEvent) {\n  const state = drag.value\n  if (!state || state.pointerId !== event.pointerId) return\n  const delta = ((coordinate(event) - state.origin) / space.value) * 100 * state.sign\n  state.last = resizeAt(state.base, state.handle, delta, limits.value)\n  apply(state.last, state.base)\n}\n\nfunction onPointerEnd(event: PointerEvent) {\n  const state = drag.value\n  if (!state || state.pointerId !== event.pointerId) return\n  drag.value = null\n  if (!sameSizes(state.last, state.base)) emit('change', state.last)\n}\n\nconst handles = computed(() =>\n  panels.value.slice(1).map((_, handle) => {\n    const primary = primaryOf(handle)\n    const node = panels.value[primary]!\n    const lim = limits.value[primary]!\n    return {\n      controls: panelId(node, primary),\n      label:\n        (nodeProp(node, 'label', 'label') as string | undefined) ??\n        m.value.resizable.panel(primary + 1),\n      now: Math.round(layout.value[primary] ?? 0),\n      min: Math.round(lim.collapsible ? lim.collapsedSize : lim.min),\n      max: Math.round(lim.max),\n    }\n  }),\n)\n\n/** Renders a captured panel VNode, which `<component :is>` cannot do. */\nconst PanelNode: FunctionalComponent<{ node: VNode; index: number }> = ({ node, index }) =>\n  cloneVNode(node, { index, id: panelId(node, index) })\n\n// @devwarn\nif (isDev) {\n  watchEffect(() => {\n    if (nodes.value.length !== panels.value.length)\n      console.warn('[VResizable] Only VResizablePanel children are rendered.')\n    if (model.value && model.value.length !== panels.value.length)\n      console.warn(\n        `[VResizable] The v-model holds ${model.value.length} sizes for ${panels.value.length} panels; the default sizes are used.`,\n      )\n  })\n}\n</script>\n\n<template>\n  <div\n    ref=\"rootEl\"\n    class=\"v-resizable\"\n    :data-orientation=\"orientation\"\n    :data-disabled=\"disabled ? '' : undefined\"\n    :data-dragging=\"drag ? '' : undefined\"\n  >\n    <template v-for=\"(node, index) in panels\" :key=\"node.key ?? index\">\n      <!--\n        A horizontal group is divided by vertical lines. `aria-orientation` is only written when\n        it differs from the separator's implicit horizontal, as on VSeparator.\n      -->\n      <div\n        v-if=\"index > 0\"\n        class=\"v-resizable-handle\"\n        role=\"separator\"\n        :tabindex=\"disabled ? undefined : 0\"\n        :aria-orientation=\"horizontal ? 'vertical' : undefined\"\n        :aria-label=\"handles[index - 1]!.label\"\n        :aria-controls=\"handles[index - 1]!.controls\"\n        :aria-valuenow=\"handles[index - 1]!.now\"\n        :aria-valuemin=\"handles[index - 1]!.min\"\n        :aria-valuemax=\"handles[index - 1]!.max\"\n        :aria-disabled=\"disabled || undefined\"\n        :data-active=\"drag?.handle === index - 1 ? '' : undefined\"\n        @keydown=\"onKeydown(index - 1, $event)\"\n        @pointerdown=\"onPointerdown(index - 1, $event)\"\n        @pointermove=\"onPointermove\"\n        @pointerup=\"onPointerEnd\"\n        @pointercancel=\"onPointerEnd\"\n        @lostpointercapture=\"onPointerEnd\"\n      >\n        <span v-if=\"grip\" class=\"v-resizable-grip\" aria-hidden=\"true\" />\n      </div>\n      <PanelNode :node=\"node\" :index=\"index\" />\n    </template>\n  </div>\n</template>\n\n<style>\n@layer vectis.components {\n  .v-resizable {\n    --resizable-hit: var(--vectis-control-size-resizable-hit);\n    display: flex;\n  }\n\n  .v-resizable[data-orientation='vertical'] {\n    flex-direction: column;\n  }\n\n  .v-resizable[data-dragging] {\n    user-select: none;\n  }\n\n  .v-resizable-handle {\n    position: relative;\n    z-index: 1;\n    flex: none;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    border: 0 solid var(--vectis-color-border);\n    touch-action: none;\n    transition:\n      border-color var(--vectis-duration-fast) var(--vectis-ease-default),\n      box-shadow var(--vectis-duration-fast) var(--vectis-ease-default);\n  }\n\n  /* The strip that catches the pointer, wider than the 1px line it is centred on. */\n  .v-resizable-handle::before {\n    content: '';\n    position: absolute;\n  }\n\n  /* The content box stays empty so the line is exactly 1px: the grip overflows it, centred. */\n  .v-resizable[data-orientation='horizontal'] > .v-resizable-handle {\n    inline-size: 0;\n    border-inline-start-width: 1px;\n    cursor: col-resize;\n  }\n\n  .v-resizable[data-orientation='horizontal'] > .v-resizable-handle::before {\n    inset-block: 0;\n    inset-inline: calc(var(--resizable-hit) / -2);\n  }\n\n  .v-resizable[data-orientation='vertical'] > .v-resizable-handle {\n    block-size: 0;\n    border-block-start-width: 1px;\n    cursor: row-resize;\n  }\n\n  .v-resizable[data-orientation='vertical'] > .v-resizable-handle::before {\n    inset-inline: 0;\n    inset-block: calc(var(--resizable-hit) / -2);\n  }\n\n  .v-resizable[data-dragging][data-orientation='horizontal'] {\n    cursor: col-resize;\n  }\n\n  .v-resizable[data-dragging][data-orientation='vertical'] {\n    cursor: row-resize;\n  }\n\n  .v-resizable-handle:is(:hover, [data-active]):not([aria-disabled]) {\n    border-color: var(--vectis-color-accent);\n    box-shadow: 0 0 0 1px var(--vectis-color-accent);\n  }\n\n  .v-resizable-handle:focus-visible {\n    outline: var(--vectis-focus-ring-width) solid var(--vectis-focus-ring-color);\n    outline-offset: var(--vectis-focus-ring-offset);\n  }\n\n  .v-resizable-grip {\n    flex: none;\n    border: 1px solid transparent;\n    border-radius: var(--vectis-radius-pill);\n    background: var(--vectis-color-border-strong);\n    transition: background-color var(--vectis-duration-fast) var(--vectis-ease-default);\n  }\n\n  .v-resizable[data-orientation='horizontal'] > .v-resizable-handle > .v-resizable-grip {\n    inline-size: var(--vectis-control-size-resizable-grip-thickness);\n    block-size: var(--vectis-control-size-resizable-grip-length);\n  }\n\n  .v-resizable[data-orientation='vertical'] > .v-resizable-handle > .v-resizable-grip {\n    inline-size: var(--vectis-control-size-resizable-grip-length);\n    block-size: var(--vectis-control-size-resizable-grip-thickness);\n  }\n\n  .v-resizable-handle:is(:hover, [data-active]):not([aria-disabled]) .v-resizable-grip {\n    background: var(--vectis-color-accent);\n  }\n\n  .v-resizable-handle[aria-disabled] {\n    cursor: default;\n  }\n\n  .v-resizable-handle[aria-disabled] .v-resizable-grip {\n    background: var(--vectis-color-border);\n  }\n\n  @media (forced-colors: active) {\n    .v-resizable-handle:is(:hover, [data-active]):not([aria-disabled]) {\n      border-color: Highlight;\n    }\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .v-resizable-handle,\n    .v-resizable-grip {\n      transition: none;\n    }\n  }\n}\n</style>\n"],"mappings":""}

package/dist/components/VResizable/VResizable.vue_vue_type_script_setup_true_lang.js

@@ -106,8 +106,8 @@ var x = [
 			K(e, t), G(e, t) || w("change", e);
 		}
 		function de(e) {
-			let t = F(e), n = V.value[e];
-			return i((t && I.get(t)) ?? M.value[e], n.min, n.max);
+			let t = F(e), n = V.value[e], r = t && I.get(t);
+			return i(r ?? M.value[e], n.min, n.max);
 		}
 		function J(e, t, n) {
 			let r = V.value[e], i = (t ? r.collapsedSize : de(e)) - n[e];
@@ -129,7 +129,7 @@ var x = [
 					index: e,
 					collapsed: !t
 				}), r = V.value[e];
-				!r || s(n[e], r) === t || q(J(e, t, n), n);
+				r && s(n[e], r) !== t && q(J(e, t, n), n);
 			}
 		});
 		function fe(e, t) {
@@ -137,8 +137,10 @@ var x = [
 			let n = W(), i = Y(e), a = V.value[i], o = i === e ? 1 : -1, l = D.value && r(E.value), u = D.value ? l ? "ArrowRight" : "ArrowLeft" : "ArrowUp", d = D.value ? l ? "ArrowLeft" : "ArrowRight" : "ArrowDown", f;
 			if (t.key === u) f = c(n, e, -S.step, V.value, 1);
 			else if (t.key === d) f = c(n, e, S.step, V.value, 1);
-			else if (t.key === "Home") f = c(n, e, ((a.collapsible ? a.collapsedSize : a.min) - n[i]) * o, V.value, 1);
-			else if (t.key === "End") f = c(n, e, (a.max - n[i]) * o, V.value, 1);
+			else if (t.key === "Home") {
+				let t = a.collapsible ? a.collapsedSize : a.min;
+				f = c(n, e, (t - n[i]) * o, V.value, 1);
+			} else if (t.key === "End") f = c(n, e, (a.max - n[i]) * o, V.value, 1);
 			else if (t.key === "Enter" && a.collapsible) f = J(i, !s(n[i], a), n);
 			else return;
 			t.preventDefault(), q(f, n);
@@ -170,7 +172,7 @@ var x = [
 		}
 		function Q(e) {
 			let t = X.value;
-			!t || t.pointerId !== e.pointerId || (X.value = null, G(t.last, t.base) || w("change", t.last));
+			t && t.pointerId === e.pointerId && (X.value = null, G(t.last, t.base) || w("change", t.last));
 		}
 		let $ = f(() => k.value.slice(1).map((e, t) => {
 			let n = Y(t), r = k.value[n], i = V.value[n];

package/dist/components/VResizable/VResizable.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"VResizable.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/VResizable/VResizable.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * No native element resizes siblings, so each handle follows the APG window splitter: a focusable\n * `separator` carrying the size of its primary panel, moved with the arrow keys or dragged under\n * pointer capture. Sizes are percentages rendered as `flex-grow` weights, which needs no\n * measurement on the server.\n */\n\nimport {\n  cloneVNode,\n  computed,\n  onMounted,\n  provide,\n  ref,\n  shallowReactive,\n  shallowRef,\n  useId,\n  watchEffect,\n  type FunctionalComponent,\n  type VNode,\n} from 'vue'\n\nimport { useSlotNodes } from '../../composables/useSlotNodes'\nimport { useMessages } from '../../i18n/state'\nimport { isRtl } from '../../utils/direction'\nimport { isDev } from '../../utils/env'\nimport { clamp } from '../../utils/number'\nimport { resizableKey, type ResizablePanelEntry } from './context'\nimport { defaultSizes, isCollapsedAt, resizeAt, type PanelLimits } from './layout'\nimport VResizablePanel from './VResizablePanel.vue'\n\n/** Which way the panels are laid out: side by side, or stacked. */\nexport type ResizableOrientation = 'horizontal' | 'vertical'\n\n/** A panel limit: a number in percent of the group, or a CSS length such as `240px`. */\nexport type ResizableLength = number | string\n\ninterface ResizableProps {\n  /**\n   * `horizontal` puts the panels side by side, following the direction of the text; `vertical`\n   * stacks them, and the group then needs a height.\n   */\n  orientation?: ResizableOrientation\n  /** Fixes the sizes: the handles can neither be dragged nor focused. */\n  disabled?: boolean\n  /** Draws a grip in the middle of every handle, which makes it easier to find. */\n  grip?: boolean\n  /** How far an arrow key moves a handle, in percent of the group. */\n  step?: number\n}\n\nconst props = withDefaults(defineProps<ResizableProps>(), {\n  orientation: 'horizontal',\n  disabled: false,\n  grip: false,\n  step: 5,\n})\n\n/**\n * The size of each panel, in percent of the space they share, adding up to 100. Left unbound,\n * the panels start from their `defaultSize`.\n */\nconst model = defineModel<number[]>()\n\nconst emit = defineEmits<{\n  /**\n   * The sizes have settled: a handle was released, moved with a key, or a panel collapsed or\n   * reopened. Save them here rather than on every `update:modelValue` of a drag.\n   */\n  change: [sizes: number[]]\n}>()\n\ndefineSlots<{\n  /** The `<VResizablePanel>`s, two or more. A handle is placed between each pair. */\n  default(): unknown\n}>()\n\nconst m = useMessages()\nconst baseId = useId()\nconst rootEl = ref<HTMLElement | null>(null)\nconst horizontal = computed(() => props.orientation === 'horizontal')\n\n// @ssr\n/*\n * The panels are read from the slot's VNodes, never from a registry fed at mount, which would\n * render no handle on the server. Cloning gives each panel its position and the id its handle\n * points at (the VCarousel idiom).\n */\nconst nodes = useSlotNodes()\nconst panels = computed(() => nodes.value.filter((node) => node.type === VResizablePanel))\n\nconst nodeProp = (node: VNode, camel: string, kebab: string): unknown =>\n  node.props?.[camel] ?? node.props?.[kebab]\n\nconst panelId = (node: VNode, index: number) =>\n  (node.props?.id as string | undefined) ?? `${baseId}-panel-${index}`\n\nconst defaults = computed(() =>\n  defaultSizes(\n    panels.value.map((node) => {\n      const size = nodeProp(node, 'defaultSize', 'default-size')\n      return size === undefined || size === null ? undefined : Number(size)\n    }),\n  ),\n)\n\nconst sizes = computed(() =>\n  model.value?.length === panels.value.length ? model.value : defaults.value,\n)\n\nconst entries = shallowReactive(new Map<string, ResizablePanelEntry>())\nconst entryAt = (index: number) => {\n  for (const entry of entries.values()) if (entry.index === index) return entry\n  return undefined\n}\n\n/** Restored when a collapsed panel reopens: its size when it collapsed, by panel. */\nconst restoreSizes = new WeakMap<ResizablePanelEntry, number>()\n\n// @core\n/*\n * CSS lengths are converted at each interaction, against the space the panels share at that\n * moment. The pixels are cached so that the ARIA values can be derived reactively.\n */\nconst space = ref(0)\nconst pixels = shallowReactive(new Map<string, number>())\n\nconst lengthKey = (length: string) => `${props.orientation}:${length}`\n\nfunction percentOf(length: ResizableLength | undefined): number | undefined {\n  if (length === undefined) return undefined\n  if (typeof length === 'number') return length\n  if (length.trim().endsWith('%')) return Number.parseFloat(length)\n  const px = pixels.get(lengthKey(length))\n  return px === undefined || !space.value ? undefined : (px / space.value) * 100\n}\n\nconst limits = computed<PanelLimits[]>(() =>\n  panels.value.map((_, index) => {\n    const entry = entryAt(index)\n    const min = clamp(percentOf(entry?.minSize) ?? 0, 0, 100)\n    return {\n      min,\n      max: clamp(percentOf(entry?.maxSize) ?? 100, min, 100),\n      collapsible: !!entry?.collapsible,\n      collapsedSize: clamp(percentOf(entry?.collapsedSize) ?? 0, 0, min),\n    }\n  }),\n)\n\n/**\n * The sizes as laid out: a collapsed panel keeps its collapsed size, and the others share the\n * rest in proportion to their weights, as `flex-grow` distributes it. `before` gives one panel\n * back the collapsed state it had before its model changed.\n */\nfunction layoutOf(before?: { index: number; collapsed: boolean }) {\n  const fixed = sizes.value.map((_, i) =>\n    (i === before?.index ? before.collapsed : entryAt(i)?.collapsed)\n      ? limits.value[i]!.collapsedSize\n      : undefined,\n  )\n  const fixedTotal = fixed.reduce<number>((sum, size) => sum + (size ?? 0), 0)\n  const weights = sizes.value.reduce((sum, size, i) => sum + (fixed[i] === undefined ? size : 0), 0)\n  return sizes.value.map(\n    (size, i) => fixed[i] ?? (weights ? (size / weights) * (100 - fixedTotal) : 0),\n  )\n}\n\nconst layout = computed(() => layoutOf())\n\nfunction lengthInPixels(root: HTMLElement, length: string): number {\n  const probe = document.createElement('div')\n  probe.style.position = 'absolute'\n  probe.style.visibility = 'hidden'\n  probe.style.setProperty(horizontal.value ? 'width' : 'height', length)\n  root.append(probe)\n  const rect = probe.getBoundingClientRect()\n  probe.remove()\n  return horizontal.value ? rect.width : rect.height\n}\n\n/**\n * Measures the panels as they are drawn, which accounts for CSS limits that the weights alone do\n * not show, and refreshes the converted lengths. It falls back to the computed layout when\n * nothing can be measured.\n */\nfunction measure(before?: { index: number; collapsed: boolean }): number[] {\n  const root = rootEl.value\n  const rects = panels.value.map((_, i) => entryAt(i)?.el?.getBoundingClientRect())\n  const extents = rects.map((rect) => (rect ? (horizontal.value ? rect.width : rect.height) : 0))\n  const total = extents.reduce((sum, extent) => sum + extent, 0)\n  if (!root || !total || rects.some((rect) => !rect)) return layoutOf(before)\n  for (const entry of entries.values())\n    for (const length of [entry.minSize, entry.maxSize, entry.collapsedSize])\n      if (typeof length === 'string' && !length.trim().endsWith('%'))\n        pixels.set(lengthKey(length), lengthInPixels(root, length))\n  space.value = total\n  const laidOut = layoutOf(before)\n  // Within two pixels, the difference is the 1px lines shrunk off the panels: the computed sizes\n  // are kept, so the model does not fill with measurement noise. Beyond, CSS limits are at work.\n  const drawn = extents.every((extent, i) => Math.abs(extent - (laidOut[i]! * total) / 100) < 2)\n  return drawn ? laidOut : extents.map((extent) => (extent / total) * 100)\n}\n\nonMounted(measure)\n\nconst sameSizes = (a: readonly number[], b: readonly number[]) =>\n  a.length === b.length && a.every((size, i) => Math.abs(size - b[i]!) < 0.01)\n\n/** Writes new sizes and the collapsed state they imply, remembering what collapsing panels had. */\nfunction apply(next: number[], base: readonly number[]) {\n  if (!sameSizes(next, sizes.value)) model.value = next\n  next.forEach((size, i) => {\n    const entry = entryAt(i)\n    const lim = limits.value[i]!\n    if (!entry || !lim.collapsible) return\n    const now = isCollapsedAt(size, lim)\n    if (now && !isCollapsedAt(base[i]!, lim)) restoreSizes.set(entry, base[i]!)\n    entry.setCollapsed(now)\n  })\n}\n\nfunction commit(next: number[], base: readonly number[]) {\n  apply(next, base)\n  if (!sameSizes(next, base)) emit('change', next)\n}\n\n/**\n * The size a reopened panel returns to: the one it had when it collapsed, or its starting size,\n * within its limits.\n */\nfunction reopenSize(index: number) {\n  const entry = entryAt(index)\n  const lim = limits.value[index]!\n  const remembered = entry && restoreSizes.get(entry)\n  return clamp(remembered ?? defaults.value[index]!, lim.min, lim.max)\n}\n\n/** Collapses or reopens a panel through the handle after it, or before it for the last one. */\nfunction sizesWithCollapsed(index: number, collapse: boolean, base: readonly number[]) {\n  const lim = limits.value[index]!\n  const growth = (collapse ? lim.collapsedSize : reopenSize(index)) - base[index]!\n  return index < base.length - 1\n    ? resizeAt(base, index, growth, limits.value, 1)\n    : resizeAt(base, index - 1, -growth, limits.value, 1)\n}\n\n/**\n * The panel a handle reports on and collapses: the one before it, unless only the one after it\n * can collapse, as for a sidebar on the end side.\n */\nfunction primaryOf(handle: number) {\n  const before = limits.value[handle]\n  const after = limits.value[handle + 1]\n  return !before?.collapsible && after?.collapsible ? handle + 1 : handle\n}\n\nprovide(resizableKey, {\n  get orientation() {\n    return props.orientation\n  },\n  sizeAt: (index) => sizes.value[index] ?? 1,\n  register: (id, entry) => entries.set(id, entry),\n  unregister: (id) => entries.delete(id),\n  // Called from the panel's pre-flush watcher: the DOM still shows the panel as it was.\n  toggle(index, collapse) {\n    const base = measure({ index, collapsed: !collapse })\n    const lim = limits.value[index]\n    if (!lim || isCollapsedAt(base[index]!, lim) === collapse) return\n    commit(sizesWithCollapsed(index, collapse, base), base)\n  },\n})\n\n// @keyboard\n/*\n * The arrows that run along the group move its handles, following the direction of the text.\n * Home and End give the primary panel its smallest and largest size, and Enter collapses or\n * reopens it, as the APG window splitter describes.\n */\nfunction onKeydown(handle: number, event: KeyboardEvent) {\n  if (props.disabled) return\n  const base = measure()\n  const primary = primaryOf(handle)\n  const lim = limits.value[primary]!\n  // Positive when the primary panel grows, negative when it shrinks.\n  const primarySign = primary === handle ? 1 : -1\n  const rtl = horizontal.value && isRtl(rootEl.value)\n  const back = horizontal.value ? (rtl ? 'ArrowRight' : 'ArrowLeft') : 'ArrowUp'\n  const forth = horizontal.value ? (rtl ? 'ArrowLeft' : 'ArrowRight') : 'ArrowDown'\n  let next: number[]\n  if (event.key === back) next = resizeAt(base, handle, -props.step, limits.value, 1)\n  else if (event.key === forth) next = resizeAt(base, handle, props.step, limits.value, 1)\n  else if (event.key === 'Home') {\n    const lowest = lim.collapsible ? lim.collapsedSize : lim.min\n    next = resizeAt(base, handle, (lowest - base[primary]!) * primarySign, limits.value, 1)\n  } else if (event.key === 'End')\n    next = resizeAt(base, handle, (lim.max - base[primary]!) * primarySign, limits.value, 1)\n  else if (event.key === 'Enter' && lim.collapsible)\n    next = sizesWithCollapsed(primary, !isCollapsedAt(base[primary]!, lim), base)\n  else return\n  event.preventDefault()\n  commit(next, base)\n}\n\ninterface Drag {\n  handle: number\n  pointerId: number\n  origin: number\n  base: number[]\n  sign: number\n  last: number[]\n}\n\nconst drag = shallowRef<Drag | null>(null)\n\nconst coordinate = (event: PointerEvent) => (horizontal.value ? event.clientX : event.clientY)\n\nfunction onPointerdown(handle: number, event: PointerEvent) {\n  // A second pointer pressed during a drag is ignored, which leaves one finger in charge.\n  if (props.disabled || event.button !== 0 || drag.value) return\n  const el = event.currentTarget as HTMLElement\n  const base = measure()\n  if (!space.value) return\n  // Prevented so that no text gets selected; the focus a press would give is given back.\n  event.preventDefault()\n  el.focus({ preventScroll: true })\n  // @fallback\n  // Synthetic pointer events have no pointer to capture; the drag then follows the handle only.\n  try {\n    el.setPointerCapture(event.pointerId)\n  } catch {\n    /* Synthetic pointers cannot be captured. */\n  }\n  drag.value = {\n    handle,\n    pointerId: event.pointerId,\n    origin: coordinate(event),\n    base,\n    sign: horizontal.value && isRtl(rootEl.value) ? -1 : 1,\n    last: base,\n  }\n}\n\nfunction onPointermove(event: PointerEvent) {\n  const state = drag.value\n  if (!state || state.pointerId !== event.pointerId) return\n  const delta = ((coordinate(event) - state.origin) / space.value) * 100 * state.sign\n  state.last = resizeAt(state.base, state.handle, delta, limits.value)\n  apply(state.last, state.base)\n}\n\nfunction onPointerEnd(event: PointerEvent) {\n  const state = drag.value\n  if (!state || state.pointerId !== event.pointerId) return\n  drag.value = null\n  if (!sameSizes(state.last, state.base)) emit('change', state.last)\n}\n\nconst handles = computed(() =>\n  panels.value.slice(1).map((_, handle) => {\n    const primary = primaryOf(handle)\n    const node = panels.value[primary]!\n    const lim = limits.value[primary]!\n    return {\n      controls: panelId(node, primary),\n      label:\n        (nodeProp(node, 'label', 'label') as string | undefined) ??\n        m.value.resizable.panel(primary + 1),\n      now: Math.round(layout.value[primary] ?? 0),\n      min: Math.round(lim.collapsible ? lim.collapsedSize : lim.min),\n      max: Math.round(lim.max),\n    }\n  }),\n)\n\n/** Renders a captured panel VNode, which `<component :is>` cannot do. */\nconst PanelNode: FunctionalComponent<{ node: VNode; index: number }> = ({ node, index }) =>\n  cloneVNode(node, { index, id: panelId(node, index) })\n\n// @devwarn\nif (isDev) {\n  watchEffect(() => {\n    if (nodes.value.length !== panels.value.length)\n      console.warn('[VResizable] Only VResizablePanel children are rendered.')\n    if (model.value && model.value.length !== panels.value.length)\n      console.warn(\n        `[VResizable] The v-model holds ${model.value.length} sizes for ${panels.value.length} panels; the default sizes are used.`,\n      )\n  })\n}\n</script>\n\n<template>\n  <div\n    ref=\"rootEl\"\n    class=\"v-resizable\"\n    :data-orientation=\"orientation\"\n    :data-disabled=\"disabled ? '' : undefined\"\n    :data-dragging=\"drag ? '' : undefined\"\n  >\n    <template v-for=\"(node, index) in panels\" :key=\"node.key ?? index\">\n      <!--\n        A horizontal group is divided by vertical lines. `aria-orientation` is only written when\n        it differs from the separator's implicit horizontal, as on VSeparator.\n      -->\n      <div\n        v-if=\"index > 0\"\n        class=\"v-resizable-handle\"\n        role=\"separator\"\n        :tabindex=\"disabled ? undefined : 0\"\n        :aria-orientation=\"horizontal ? 'vertical' : undefined\"\n        :aria-label=\"handles[index - 1]!.label\"\n        :aria-controls=\"handles[index - 1]!.controls\"\n        :aria-valuenow=\"handles[index - 1]!.now\"\n        :aria-valuemin=\"handles[index - 1]!.min\"\n        :aria-valuemax=\"handles[index - 1]!.max\"\n        :aria-disabled=\"disabled || undefined\"\n        :data-active=\"drag?.handle === index - 1 ? '' : undefined\"\n        @keydown=\"onKeydown(index - 1, $event)\"\n        @pointerdown=\"onPointerdown(index - 1, $event)\"\n        @pointermove=\"onPointermove\"\n        @pointerup=\"onPointerEnd\"\n        @pointercancel=\"onPointerEnd\"\n        @lostpointercapture=\"onPointerEnd\"\n      >\n        <span v-if=\"grip\" class=\"v-resizable-grip\" aria-hidden=\"true\" />\n      </div>\n      <PanelNode :node=\"node\" :index=\"index\" />\n    </template>\n  </div>\n</template>\n\n<style>\n@layer vectis.components {\n  .v-resizable {\n    --resizable-hit: var(--vectis-control-size-resizable-hit);\n    display: flex;\n  }\n\n  .v-resizable[data-orientation='vertical'] {\n    flex-direction: column;\n  }\n\n  .v-resizable[data-dragging] {\n    user-select: none;\n  }\n\n  .v-resizable-handle {\n    position: relative;\n    z-index: 1;\n    flex: none;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    border: 0 solid var(--vectis-color-border);\n    touch-action: none;\n    transition:\n      border-color var(--vectis-duration-fast) var(--vectis-ease-default),\n      box-shadow var(--vectis-duration-fast) var(--vectis-ease-default);\n  }\n\n  /* The strip that catches the pointer, wider than the 1px line it is centred on. */\n  .v-resizable-handle::before {\n    content: '';\n    position: absolute;\n  }\n\n  /* The content box stays empty so the line is exactly 1px: the grip overflows it, centred. */\n  .v-resizable[data-orientation='horizontal'] > .v-resizable-handle {\n    inline-size: 0;\n    border-inline-start-width: 1px;\n    cursor: col-resize;\n  }\n\n  .v-resizable[data-orientation='horizontal'] > .v-resizable-handle::before {\n    inset-block: 0;\n    inset-inline: calc(var(--resizable-hit) / -2);\n  }\n\n  .v-resizable[data-orientation='vertical'] > .v-resizable-handle {\n    block-size: 0;\n    border-block-start-width: 1px;\n    cursor: row-resize;\n  }\n\n  .v-resizable[data-orientation='vertical'] > .v-resizable-handle::before {\n    inset-inline: 0;\n    inset-block: calc(var(--resizable-hit) / -2);\n  }\n\n  .v-resizable[data-dragging][data-orientation='horizontal'] {\n    cursor: col-resize;\n  }\n\n  .v-resizable[data-dragging][data-orientation='vertical'] {\n    cursor: row-resize;\n  }\n\n  .v-resizable-handle:is(:hover, [data-active]):not([aria-disabled]) {\n    border-color: var(--vectis-color-accent);\n    box-shadow: 0 0 0 1px var(--vectis-color-accent);\n  }\n\n  .v-resizable-handle:focus-visible {\n    outline: var(--vectis-focus-ring-width) solid var(--vectis-focus-ring-color);\n    outline-offset: var(--vectis-focus-ring-offset);\n  }\n\n  .v-resizable-grip {\n    flex: none;\n    border: 1px solid transparent;\n    border-radius: var(--vectis-radius-pill);\n    background: var(--vectis-color-border-strong);\n    transition: background-color var(--vectis-duration-fast) var(--vectis-ease-default);\n  }\n\n  .v-resizable[data-orientation='horizontal'] > .v-resizable-handle > .v-resizable-grip {\n    inline-size: var(--vectis-control-size-resizable-grip-thickness);\n    block-size: var(--vectis-control-size-resizable-grip-length);\n  }\n\n  .v-resizable[data-orientation='vertical'] > .v-resizable-handle > .v-resizable-grip {\n    inline-size: var(--vectis-control-size-resizable-grip-length);\n    block-size: var(--vectis-control-size-resizable-grip-thickness);\n  }\n\n  .v-resizable-handle:is(:hover, [data-active]):not([aria-disabled]) .v-resizable-grip {\n    background: var(--vectis-color-accent);\n  }\n\n  .v-resizable-handle[aria-disabled] {\n    cursor: default;\n  }\n\n  .v-resizable-handle[aria-disabled] .v-resizable-grip {\n    background: var(--vectis-color-border);\n  }\n\n  @media (forced-colors: active) {\n    .v-resizable-handle:is(:hover, [data-active]):not([aria-disabled]) {\n      border-color: Highlight;\n    }\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .v-resizable-handle,\n    .v-resizable-grip {\n      transition: none;\n    }\n  }\n}\n</style>\n"],"mappings":"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"}
+{"version":3,"file":"VResizable.vue_vue_type_script_setup_true_lang.js","names":["_useModel","VResizablePanel","_openBlock","_createElementBlock","_Fragment","_renderList","_createCommentVNode","_createVNode","VResizablePanel_default","_hoisted_1","_hoisted_2","_hoisted_3","VResizable_vue_vue_type_script_setup_true_lang_default","\"modelValue\"","\"modelModifiers\"","__emit","props","__props","model","useModel","emit","m","useMessages","baseId","useId","rootEl","ref","horizontal","computed","nodes","useSlotNodes","panels","node","nodeProp","camel","kebab","panelId","index","defaults","defaultSizes","size","sizes","entries","shallowReactive","entryAt","entry","restoreSizes","space","pixels","lengthKey","length","percentOf","px","limits","min","clamp","layoutOf","fixed","i","before","fixedTotal","sum","weights","layout","lengthInPixels","probe","root","rect","measure","rects","extents","total","extent","laidOut","sameSizes","a","b","apply","next","lim","now","isCollapsedAt","base","commit","reopenSize","remembered","sizesWithCollapsed","growth","collapse","resizeAt","primaryOf","handle","after","resizableKey","id","onKeydown","primary","primarySign","rtl","isRtl","back","forth","event","lowest","drag","shallowRef","coordinate","onPointerdown","el","onPointermove","state","delta","onPointerEnd","handles","PanelNode","cloneVNode","isDev","watchEffect","openBlock","createElementBlock","Fragment","renderList","$event","createCommentVNode","createVNode"],"sources":["../../../src/components/VResizable/VResizable.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * No native element resizes siblings, so each handle follows the APG window splitter: a focusable\n * `separator` carrying the size of its primary panel, moved with the arrow keys or dragged under\n * pointer capture. Sizes are percentages rendered as `flex-grow` weights, which needs no\n * measurement on the server.\n */\n\nimport {\n  cloneVNode,\n  computed,\n  onMounted,\n  provide,\n  ref,\n  shallowReactive,\n  shallowRef,\n  useId,\n  watchEffect,\n  type FunctionalComponent,\n  type VNode,\n} from 'vue'\n\nimport { useSlotNodes } from '../../composables/useSlotNodes'\nimport { useMessages } from '../../i18n/state'\nimport { isRtl } from '../../utils/direction'\nimport { isDev } from '../../utils/env'\nimport { clamp } from '../../utils/number'\nimport { resizableKey, type ResizablePanelEntry } from './context'\nimport { defaultSizes, isCollapsedAt, resizeAt, type PanelLimits } from './layout'\nimport VResizablePanel from './VResizablePanel.vue'\n\n/** Which way the panels are laid out: side by side, or stacked. */\nexport type ResizableOrientation = 'horizontal' | 'vertical'\n\n/** A panel limit: a number in percent of the group, or a CSS length such as `240px`. */\nexport type ResizableLength = number | string\n\ninterface ResizableProps {\n  /**\n   * `horizontal` puts the panels side by side, following the direction of the text; `vertical`\n   * stacks them, and the group then needs a height.\n   */\n  orientation?: ResizableOrientation\n  /** Fixes the sizes: the handles can neither be dragged nor focused. */\n  disabled?: boolean\n  /** Draws a grip in the middle of every handle, which makes it easier to find. */\n  grip?: boolean\n  /** How far an arrow key moves a handle, in percent of the group. */\n  step?: number\n}\n\nconst props = withDefaults(defineProps<ResizableProps>(), {\n  orientation: 'horizontal',\n  disabled: false,\n  grip: false,\n  step: 5,\n})\n\n/**\n * The size of each panel, in percent of the space they share, adding up to 100. Left unbound,\n * the panels start from their `defaultSize`.\n */\nconst model = defineModel<number[]>()\n\nconst emit = defineEmits<{\n  /**\n   * The sizes have settled: a handle was released, moved with a key, or a panel collapsed or\n   * reopened. Save them here rather than on every `update:modelValue` of a drag.\n   */\n  change: [sizes: number[]]\n}>()\n\ndefineSlots<{\n  /** The `<VResizablePanel>`s, two or more. A handle is placed between each pair. */\n  default(): unknown\n}>()\n\nconst m = useMessages()\nconst baseId = useId()\nconst rootEl = ref<HTMLElement | null>(null)\nconst horizontal = computed(() => props.orientation === 'horizontal')\n\n// @ssr\n/*\n * The panels are read from the slot's VNodes, never from a registry fed at mount, which would\n * render no handle on the server. Cloning gives each panel its position and the id its handle\n * points at (the VCarousel idiom).\n */\nconst nodes = useSlotNodes()\nconst panels = computed(() => nodes.value.filter((node) => node.type === VResizablePanel))\n\nconst nodeProp = (node: VNode, camel: string, kebab: string): unknown =>\n  node.props?.[camel] ?? node.props?.[kebab]\n\nconst panelId = (node: VNode, index: number) =>\n  (node.props?.id as string | undefined) ?? `${baseId}-panel-${index}`\n\nconst defaults = computed(() =>\n  defaultSizes(\n    panels.value.map((node) => {\n      const size = nodeProp(node, 'defaultSize', 'default-size')\n      return size === undefined || size === null ? undefined : Number(size)\n    }),\n  ),\n)\n\nconst sizes = computed(() =>\n  model.value?.length === panels.value.length ? model.value : defaults.value,\n)\n\nconst entries = shallowReactive(new Map<string, ResizablePanelEntry>())\nconst entryAt = (index: number) => {\n  for (const entry of entries.values()) if (entry.index === index) return entry\n  return undefined\n}\n\n/** Restored when a collapsed panel reopens: its size when it collapsed, by panel. */\nconst restoreSizes = new WeakMap<ResizablePanelEntry, number>()\n\n// @core\n/*\n * CSS lengths are converted at each interaction, against the space the panels share at that\n * moment. The pixels are cached so that the ARIA values can be derived reactively.\n */\nconst space = ref(0)\nconst pixels = shallowReactive(new Map<string, number>())\n\nconst lengthKey = (length: string) => `${props.orientation}:${length}`\n\nfunction percentOf(length: ResizableLength | undefined): number | undefined {\n  if (length === undefined) return undefined\n  if (typeof length === 'number') return length\n  if (length.trim().endsWith('%')) return Number.parseFloat(length)\n  const px = pixels.get(lengthKey(length))\n  return px === undefined || !space.value ? undefined : (px / space.value) * 100\n}\n\nconst limits = computed<PanelLimits[]>(() =>\n  panels.value.map((_, index) => {\n    const entry = entryAt(index)\n    const min = clamp(percentOf(entry?.minSize) ?? 0, 0, 100)\n    return {\n      min,\n      max: clamp(percentOf(entry?.maxSize) ?? 100, min, 100),\n      collapsible: !!entry?.collapsible,\n      collapsedSize: clamp(percentOf(entry?.collapsedSize) ?? 0, 0, min),\n    }\n  }),\n)\n\n/**\n * The sizes as laid out: a collapsed panel keeps its collapsed size, and the others share the\n * rest in proportion to their weights, as `flex-grow` distributes it. `before` gives one panel\n * back the collapsed state it had before its model changed.\n */\nfunction layoutOf(before?: { index: number; collapsed: boolean }) {\n  const fixed = sizes.value.map((_, i) =>\n    (i === before?.index ? before.collapsed : entryAt(i)?.collapsed)\n      ? limits.value[i]!.collapsedSize\n      : undefined,\n  )\n  const fixedTotal = fixed.reduce<number>((sum, size) => sum + (size ?? 0), 0)\n  const weights = sizes.value.reduce((sum, size, i) => sum + (fixed[i] === undefined ? size : 0), 0)\n  return sizes.value.map(\n    (size, i) => fixed[i] ?? (weights ? (size / weights) * (100 - fixedTotal) : 0),\n  )\n}\n\nconst layout = computed(() => layoutOf())\n\nfunction lengthInPixels(root: HTMLElement, length: string): number {\n  const probe = document.createElement('div')\n  probe.style.position = 'absolute'\n  probe.style.visibility = 'hidden'\n  probe.style.setProperty(horizontal.value ? 'width' : 'height', length)\n  root.append(probe)\n  const rect = probe.getBoundingClientRect()\n  probe.remove()\n  return horizontal.value ? rect.width : rect.height\n}\n\n/**\n * Measures the panels as they are drawn, which accounts for CSS limits that the weights alone do\n * not show, and refreshes the converted lengths. It falls back to the computed layout when\n * nothing can be measured.\n */\nfunction measure(before?: { index: number; collapsed: boolean }): number[] {\n  const root = rootEl.value\n  const rects = panels.value.map((_, i) => entryAt(i)?.el?.getBoundingClientRect())\n  const extents = rects.map((rect) => (rect ? (horizontal.value ? rect.width : rect.height) : 0))\n  const total = extents.reduce((sum, extent) => sum + extent, 0)\n  if (!root || !total || rects.some((rect) => !rect)) return layoutOf(before)\n  for (const entry of entries.values())\n    for (const length of [entry.minSize, entry.maxSize, entry.collapsedSize])\n      if (typeof length === 'string' && !length.trim().endsWith('%'))\n        pixels.set(lengthKey(length), lengthInPixels(root, length))\n  space.value = total\n  const laidOut = layoutOf(before)\n  // Within two pixels, the difference is the 1px lines shrunk off the panels: the computed sizes\n  // are kept, so the model does not fill with measurement noise. Beyond, CSS limits are at work.\n  const drawn = extents.every((extent, i) => Math.abs(extent - (laidOut[i]! * total) / 100) < 2)\n  return drawn ? laidOut : extents.map((extent) => (extent / total) * 100)\n}\n\nonMounted(measure)\n\nconst sameSizes = (a: readonly number[], b: readonly number[]) =>\n  a.length === b.length && a.every((size, i) => Math.abs(size - b[i]!) < 0.01)\n\n/** Writes new sizes and the collapsed state they imply, remembering what collapsing panels had. */\nfunction apply(next: number[], base: readonly number[]) {\n  if (!sameSizes(next, sizes.value)) model.value = next\n  next.forEach((size, i) => {\n    const entry = entryAt(i)\n    const lim = limits.value[i]!\n    if (!entry || !lim.collapsible) return\n    const now = isCollapsedAt(size, lim)\n    if (now && !isCollapsedAt(base[i]!, lim)) restoreSizes.set(entry, base[i]!)\n    entry.setCollapsed(now)\n  })\n}\n\nfunction commit(next: number[], base: readonly number[]) {\n  apply(next, base)\n  if (!sameSizes(next, base)) emit('change', next)\n}\n\n/**\n * The size a reopened panel returns to: the one it had when it collapsed, or its starting size,\n * within its limits.\n */\nfunction reopenSize(index: number) {\n  const entry = entryAt(index)\n  const lim = limits.value[index]!\n  const remembered = entry && restoreSizes.get(entry)\n  return clamp(remembered ?? defaults.value[index]!, lim.min, lim.max)\n}\n\n/** Collapses or reopens a panel through the handle after it, or before it for the last one. */\nfunction sizesWithCollapsed(index: number, collapse: boolean, base: readonly number[]) {\n  const lim = limits.value[index]!\n  const growth = (collapse ? lim.collapsedSize : reopenSize(index)) - base[index]!\n  return index < base.length - 1\n    ? resizeAt(base, index, growth, limits.value, 1)\n    : resizeAt(base, index - 1, -growth, limits.value, 1)\n}\n\n/**\n * The panel a handle reports on and collapses: the one before it, unless only the one after it\n * can collapse, as for a sidebar on the end side.\n */\nfunction primaryOf(handle: number) {\n  const before = limits.value[handle]\n  const after = limits.value[handle + 1]\n  return !before?.collapsible && after?.collapsible ? handle + 1 : handle\n}\n\nprovide(resizableKey, {\n  get orientation() {\n    return props.orientation\n  },\n  sizeAt: (index) => sizes.value[index] ?? 1,\n  register: (id, entry) => entries.set(id, entry),\n  unregister: (id) => entries.delete(id),\n  // Called from the panel's pre-flush watcher: the DOM still shows the panel as it was.\n  toggle(index, collapse) {\n    const base = measure({ index, collapsed: !collapse })\n    const lim = limits.value[index]\n    if (!lim || isCollapsedAt(base[index]!, lim) === collapse) return\n    commit(sizesWithCollapsed(index, collapse, base), base)\n  },\n})\n\n// @keyboard\n/*\n * The arrows that run along the group move its handles, following the direction of the text.\n * Home and End give the primary panel its smallest and largest size, and Enter collapses or\n * reopens it, as the APG window splitter describes.\n */\nfunction onKeydown(handle: number, event: KeyboardEvent) {\n  if (props.disabled) return\n  const base = measure()\n  const primary = primaryOf(handle)\n  const lim = limits.value[primary]!\n  // Positive when the primary panel grows, negative when it shrinks.\n  const primarySign = primary === handle ? 1 : -1\n  const rtl = horizontal.value && isRtl(rootEl.value)\n  const back = horizontal.value ? (rtl ? 'ArrowRight' : 'ArrowLeft') : 'ArrowUp'\n  const forth = horizontal.value ? (rtl ? 'ArrowLeft' : 'ArrowRight') : 'ArrowDown'\n  let next: number[]\n  if (event.key === back) next = resizeAt(base, handle, -props.step, limits.value, 1)\n  else if (event.key === forth) next = resizeAt(base, handle, props.step, limits.value, 1)\n  else if (event.key === 'Home') {\n    const lowest = lim.collapsible ? lim.collapsedSize : lim.min\n    next = resizeAt(base, handle, (lowest - base[primary]!) * primarySign, limits.value, 1)\n  } else if (event.key === 'End')\n    next = resizeAt(base, handle, (lim.max - base[primary]!) * primarySign, limits.value, 1)\n  else if (event.key === 'Enter' && lim.collapsible)\n    next = sizesWithCollapsed(primary, !isCollapsedAt(base[primary]!, lim), base)\n  else return\n  event.preventDefault()\n  commit(next, base)\n}\n\ninterface Drag {\n  handle: number\n  pointerId: number\n  origin: number\n  base: number[]\n  sign: number\n  last: number[]\n}\n\nconst drag = shallowRef<Drag | null>(null)\n\nconst coordinate = (event: PointerEvent) => (horizontal.value ? event.clientX : event.clientY)\n\nfunction onPointerdown(handle: number, event: PointerEvent) {\n  // A second pointer pressed during a drag is ignored, which leaves one finger in charge.\n  if (props.disabled || event.button !== 0 || drag.value) return\n  const el = event.currentTarget as HTMLElement\n  const base = measure()\n  if (!space.value) return\n  // Prevented so that no text gets selected; the focus a press would give is given back.\n  event.preventDefault()\n  el.focus({ preventScroll: true })\n  // @fallback\n  // Synthetic pointer events have no pointer to capture; the drag then follows the handle only.\n  try {\n    el.setPointerCapture(event.pointerId)\n  } catch {\n    /* Synthetic pointers cannot be captured. */\n  }\n  drag.value = {\n    handle,\n    pointerId: event.pointerId,\n    origin: coordinate(event),\n    base,\n    sign: horizontal.value && isRtl(rootEl.value) ? -1 : 1,\n    last: base,\n  }\n}\n\nfunction onPointermove(event: PointerEvent) {\n  const state = drag.value\n  if (!state || state.pointerId !== event.pointerId) return\n  const delta = ((coordinate(event) - state.origin) / space.value) * 100 * state.sign\n  state.last = resizeAt(state.base, state.handle, delta, limits.value)\n  apply(state.last, state.base)\n}\n\nfunction onPointerEnd(event: PointerEvent) {\n  const state = drag.value\n  if (!state || state.pointerId !== event.pointerId) return\n  drag.value = null\n  if (!sameSizes(state.last, state.base)) emit('change', state.last)\n}\n\nconst handles = computed(() =>\n  panels.value.slice(1).map((_, handle) => {\n    const primary = primaryOf(handle)\n    const node = panels.value[primary]!\n    const lim = limits.value[primary]!\n    return {\n      controls: panelId(node, primary),\n      label:\n        (nodeProp(node, 'label', 'label') as string | undefined) ??\n        m.value.resizable.panel(primary + 1),\n      now: Math.round(layout.value[primary] ?? 0),\n      min: Math.round(lim.collapsible ? lim.collapsedSize : lim.min),\n      max: Math.round(lim.max),\n    }\n  }),\n)\n\n/** Renders a captured panel VNode, which `<component :is>` cannot do. */\nconst PanelNode: FunctionalComponent<{ node: VNode; index: number }> = ({ node, index }) =>\n  cloneVNode(node, { index, id: panelId(node, index) })\n\n// @devwarn\nif (isDev) {\n  watchEffect(() => {\n    if (nodes.value.length !== panels.value.length)\n      console.warn('[VResizable] Only VResizablePanel children are rendered.')\n    if (model.value && model.value.length !== panels.value.length)\n      console.warn(\n        `[VResizable] The v-model holds ${model.value.length} sizes for ${panels.value.length} panels; the default sizes are used.`,\n      )\n  })\n}\n</script>\n\n<template>\n  <div\n    ref=\"rootEl\"\n    class=\"v-resizable\"\n    :data-orientation=\"orientation\"\n    :data-disabled=\"disabled ? '' : undefined\"\n    :data-dragging=\"drag ? '' : undefined\"\n  >\n    <template v-for=\"(node, index) in panels\" :key=\"node.key ?? index\">\n      <!--\n        A horizontal group is divided by vertical lines. `aria-orientation` is only written when\n        it differs from the separator's implicit horizontal, as on VSeparator.\n      -->\n      <div\n        v-if=\"index > 0\"\n        class=\"v-resizable-handle\"\n        role=\"separator\"\n        :tabindex=\"disabled ? undefined : 0\"\n        :aria-orientation=\"horizontal ? 'vertical' : undefined\"\n        :aria-label=\"handles[index - 1]!.label\"\n        :aria-controls=\"handles[index - 1]!.controls\"\n        :aria-valuenow=\"handles[index - 1]!.now\"\n        :aria-valuemin=\"handles[index - 1]!.min\"\n        :aria-valuemax=\"handles[index - 1]!.max\"\n        :aria-disabled=\"disabled || undefined\"\n        :data-active=\"drag?.handle === index - 1 ? '' : undefined\"\n        @keydown=\"onKeydown(index - 1, $event)\"\n        @pointerdown=\"onPointerdown(index - 1, $event)\"\n        @pointermove=\"onPointermove\"\n        @pointerup=\"onPointerEnd\"\n        @pointercancel=\"onPointerEnd\"\n        @lostpointercapture=\"onPointerEnd\"\n      >\n        <span v-if=\"grip\" class=\"v-resizable-grip\" aria-hidden=\"true\" />\n      </div>\n      <PanelNode :node=\"node\" :index=\"index\" />\n    </template>\n  </div>\n</template>\n\n<style>\n@layer vectis.components {\n  .v-resizable {\n    --resizable-hit: var(--vectis-control-size-resizable-hit);\n    display: flex;\n  }\n\n  .v-resizable[data-orientation='vertical'] {\n    flex-direction: column;\n  }\n\n  .v-resizable[data-dragging] {\n    user-select: none;\n  }\n\n  .v-resizable-handle {\n    position: relative;\n    z-index: 1;\n    flex: none;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    border: 0 solid var(--vectis-color-border);\n    touch-action: none;\n    transition:\n      border-color var(--vectis-duration-fast) var(--vectis-ease-default),\n      box-shadow var(--vectis-duration-fast) var(--vectis-ease-default);\n  }\n\n  /* The strip that catches the pointer, wider than the 1px line it is centred on. */\n  .v-resizable-handle::before {\n    content: '';\n    position: absolute;\n  }\n\n  /* The content box stays empty so the line is exactly 1px: the grip overflows it, centred. */\n  .v-resizable[data-orientation='horizontal'] > .v-resizable-handle {\n    inline-size: 0;\n    border-inline-start-width: 1px;\n    cursor: col-resize;\n  }\n\n  .v-resizable[data-orientation='horizontal'] > .v-resizable-handle::before {\n    inset-block: 0;\n    inset-inline: calc(var(--resizable-hit) / -2);\n  }\n\n  .v-resizable[data-orientation='vertical'] > .v-resizable-handle {\n    block-size: 0;\n    border-block-start-width: 1px;\n    cursor: row-resize;\n  }\n\n  .v-resizable[data-orientation='vertical'] > .v-resizable-handle::before {\n    inset-inline: 0;\n    inset-block: calc(var(--resizable-hit) / -2);\n  }\n\n  .v-resizable[data-dragging][data-orientation='horizontal'] {\n    cursor: col-resize;\n  }\n\n  .v-resizable[data-dragging][data-orientation='vertical'] {\n    cursor: row-resize;\n  }\n\n  .v-resizable-handle:is(:hover, [data-active]):not([aria-disabled]) {\n    border-color: var(--vectis-color-accent);\n    box-shadow: 0 0 0 1px var(--vectis-color-accent);\n  }\n\n  .v-resizable-handle:focus-visible {\n    outline: var(--vectis-focus-ring-width) solid var(--vectis-focus-ring-color);\n    outline-offset: var(--vectis-focus-ring-offset);\n  }\n\n  .v-resizable-grip {\n    flex: none;\n    border: 1px solid transparent;\n    border-radius: var(--vectis-radius-pill);\n    background: var(--vectis-color-border-strong);\n    transition: background-color var(--vectis-duration-fast) var(--vectis-ease-default);\n  }\n\n  .v-resizable[data-orientation='horizontal'] > .v-resizable-handle > .v-resizable-grip {\n    inline-size: var(--vectis-control-size-resizable-grip-thickness);\n    block-size: var(--vectis-control-size-resizable-grip-length);\n  }\n\n  .v-resizable[data-orientation='vertical'] > .v-resizable-handle > .v-resizable-grip {\n    inline-size: var(--vectis-control-size-resizable-grip-length);\n    block-size: var(--vectis-control-size-resizable-grip-thickness);\n  }\n\n  .v-resizable-handle:is(:hover, [data-active]):not([aria-disabled]) .v-resizable-grip {\n    background: var(--vectis-color-accent);\n  }\n\n  .v-resizable-handle[aria-disabled] {\n    cursor: default;\n  }\n\n  .v-resizable-handle[aria-disabled] .v-resizable-grip {\n    background: var(--vectis-color-border);\n  }\n\n  @media (forced-colors: active) {\n    .v-resizable-handle:is(:hover, [data-active]):not([aria-disabled]) {\n      border-color: Highlight;\n    }\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .v-resizable-handle,\n    .v-resizable-grip {\n      transition: none;\n    }\n  }\n}\n</style>\n"],"mappings":"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"}

package/dist/components/VResizable/VResizablePanel.js.map

@@ -1 +1 @@
-{"version":3,"file":"VResizablePanel.js","names":[],"sources":["../../../src/components/VResizable/VResizablePanel.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * The group hands each panel its share of the space as a `flex-grow` weight. The panel writes its\n * own limits in CSS as well, so a length limit holds before any script runs and while the window\n * is resized.\n */\n\nimport { computed, inject, onBeforeUnmount, ref, useAttrs, useId, watch } from 'vue'\n\nimport { isDev } from '../../utils/env'\nimport { resizableKey } from './context'\nimport type { ResizableLength } from './VResizable.vue'\n\ninterface ResizablePanelProps {\n  /** Which panel this is among its siblings, set by VResizable. Do not set it yourself. */\n  index?: number\n  /**\n   * The starting size in percent, used when the group's v-model gives none. Panels without one\n   * share what is left equally.\n   */\n  defaultSize?: number\n  /** The smallest size: a number in percent, or a CSS length such as `200px` or `12rem`. */\n  minSize?: ResizableLength\n  /** The largest size: a number in percent, or a CSS length. */\n  maxSize?: ResizableLength\n  /**\n   * Lets the panel collapse: dragged past the middle of its minimum, or with Enter on its\n   * handle.\n   */\n  collapsible?: boolean\n  /**\n   * The size of the collapsed panel, in percent or as a CSS length such as the width of an icon\n   * rail. At 0, the default, its content is hidden.\n   */\n  collapsedSize?: ResizableLength\n  /**\n   * What the panel is called. It names the handle that resizes it; the dictionary's \"Panel 2\"\n   * otherwise.\n   */\n  label?: string\n}\n\nconst props = withDefaults(defineProps<ResizablePanelProps>(), {\n  index: 0,\n  defaultSize: undefined,\n  minSize: 0,\n  maxSize: undefined,\n  collapsible: false,\n  collapsedSize: 0,\n  label: undefined,\n})\n\n/** Whether the panel is collapsed. It only takes effect on a `collapsible` panel. */\nconst collapsed = defineModel<boolean>('collapsed', { default: false })\n\ndefineSlots<{\n  /** The panel's content. */\n  default(): unknown\n}>()\n\nconst group = inject(resizableKey, null)\nconst attrs = useAttrs()\nconst id = useId()\nconst el = ref<HTMLElement | null>(null)\n\nconst isCollapsed = computed(() => props.collapsible && collapsed.value)\n\nconst cssLength = (length: ResizableLength) => (typeof length === 'number' ? `${length}%` : length)\n\n/** A collapsed size of zero leaves nothing to read, so the content is hidden, focus included. */\nconst hidesContent = computed(\n  () => isCollapsed.value && Number.parseFloat(String(props.collapsedSize)) === 0,\n)\n\n// @core\n/*\n * The value the group last wrote, so the watcher below tells the group's own writes from the\n * consumer's. Only the consumer's ask the group to make room.\n */\nlet fromGroup: boolean | undefined\n\ngroup?.register(id, {\n  get index() {\n    return props.index\n  },\n  get el() {\n    return el.value\n  },\n  get minSize() {\n    return props.minSize\n  },\n  get maxSize() {\n    return props.maxSize\n  },\n  get collapsible() {\n    return props.collapsible\n  },\n  get collapsedSize() {\n    return props.collapsedSize\n  },\n  get collapsed() {\n    return isCollapsed.value\n  },\n  setCollapsed(value) {\n    if (collapsed.value === value) return\n    fromGroup = value\n    collapsed.value = value\n  },\n})\nonBeforeUnmount(() => group?.unregister(id))\n\nwatch(collapsed, (value) => {\n  const own = value === fromGroup\n  fromGroup = undefined\n  if (!own && props.collapsible) group?.toggle(props.index, value)\n})\n\n// @devwarn\nif (isDev) {\n  if (!group) console.warn('[VResizablePanel] Place it directly inside a VResizable.')\n  watch(\n    () => collapsed.value && !props.collapsible,\n    (wrong) => {\n      if (wrong) console.warn('[VResizablePanel] `collapsed` has no effect without `collapsible`.')\n    },\n    { immediate: true },\n  )\n}\n\n// Every variable is set, even to its default, so that a nested group's panel never inherits\n// the limits of the panel it sits in.\nconst style = computed(() => ({\n  '--resizable-panel-size': String(group?.sizeAt(props.index) ?? 1),\n  '--resizable-panel-min': cssLength(props.minSize),\n  '--resizable-panel-max': props.maxSize === undefined ? 'none' : cssLength(props.maxSize),\n  '--resizable-panel-collapsed': cssLength(props.collapsedSize),\n}))\n</script>\n\n<template>\n  <div\n    :id=\"(attrs.id as string | undefined) ?? id\"\n    ref=\"el\"\n    class=\"v-resizable-panel\"\n    :data-collapsed=\"isCollapsed ? '' : undefined\"\n    :data-hidden=\"hidesContent ? '' : undefined\"\n    :style=\"style\"\n  >\n    <slot />\n  </div>\n</template>\n\n<style>\n@layer vectis.components {\n  /*\n   * The basis is the size itself, padding and border included, so a padded panel still takes its\n   * exact share. Growing by the same weight spreads any space left over, such as that of a\n   * collapsed sibling, in proportion; the 1px handles are shrunk off the same way.\n   */\n  .v-resizable-panel {\n    box-sizing: border-box;\n    flex: var(--resizable-panel-size) var(--resizable-panel-size)\n      calc(var(--resizable-panel-size) * 1%);\n    overflow: auto;\n  }\n\n  .v-resizable[data-orientation='horizontal'] > .v-resizable-panel {\n    min-inline-size: var(--resizable-panel-min);\n    max-inline-size: var(--resizable-panel-max);\n  }\n\n  .v-resizable[data-orientation='vertical'] > .v-resizable-panel {\n    min-block-size: var(--resizable-panel-min);\n    max-block-size: var(--resizable-panel-max);\n  }\n\n  .v-resizable[data-orientation] > .v-resizable-panel[data-collapsed] {\n    flex: 0 0 var(--resizable-panel-collapsed);\n    min-inline-size: 0;\n    max-inline-size: none;\n    min-block-size: 0;\n    max-block-size: none;\n  }\n\n  /* Removed from the layout as well, or its padding would keep the panel open. */\n  .v-resizable-panel[data-hidden] {\n    display: none;\n  }\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"VResizablePanel.js","names":["_sfc_main","VResizablePanel_vue_vue_type_script_setup_true_lang_default","VResizablePanel_default"],"sources":["../../../src/components/VResizable/VResizablePanel.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * The group hands each panel its share of the space as a `flex-grow` weight. The panel writes its\n * own limits in CSS as well, so a length limit holds before any script runs and while the window\n * is resized.\n */\n\nimport { computed, inject, onBeforeUnmount, ref, useAttrs, useId, watch } from 'vue'\n\nimport { isDev } from '../../utils/env'\nimport { resizableKey } from './context'\nimport type { ResizableLength } from './VResizable.vue'\n\ninterface ResizablePanelProps {\n  /** Which panel this is among its siblings, set by VResizable. Do not set it yourself. */\n  index?: number\n  /**\n   * The starting size in percent, used when the group's v-model gives none. Panels without one\n   * share what is left equally.\n   */\n  defaultSize?: number\n  /** The smallest size: a number in percent, or a CSS length such as `200px` or `12rem`. */\n  minSize?: ResizableLength\n  /** The largest size: a number in percent, or a CSS length. */\n  maxSize?: ResizableLength\n  /**\n   * Lets the panel collapse: dragged past the middle of its minimum, or with Enter on its\n   * handle.\n   */\n  collapsible?: boolean\n  /**\n   * The size of the collapsed panel, in percent or as a CSS length such as the width of an icon\n   * rail. At 0, the default, its content is hidden.\n   */\n  collapsedSize?: ResizableLength\n  /**\n   * What the panel is called. It names the handle that resizes it; the dictionary's \"Panel 2\"\n   * otherwise.\n   */\n  label?: string\n}\n\nconst props = withDefaults(defineProps<ResizablePanelProps>(), {\n  index: 0,\n  defaultSize: undefined,\n  minSize: 0,\n  maxSize: undefined,\n  collapsible: false,\n  collapsedSize: 0,\n  label: undefined,\n})\n\n/** Whether the panel is collapsed. It only takes effect on a `collapsible` panel. */\nconst collapsed = defineModel<boolean>('collapsed', { default: false })\n\ndefineSlots<{\n  /** The panel's content. */\n  default(): unknown\n}>()\n\nconst group = inject(resizableKey, null)\nconst attrs = useAttrs()\nconst id = useId()\nconst el = ref<HTMLElement | null>(null)\n\nconst isCollapsed = computed(() => props.collapsible && collapsed.value)\n\nconst cssLength = (length: ResizableLength) => (typeof length === 'number' ? `${length}%` : length)\n\n/** A collapsed size of zero leaves nothing to read, so the content is hidden, focus included. */\nconst hidesContent = computed(\n  () => isCollapsed.value && Number.parseFloat(String(props.collapsedSize)) === 0,\n)\n\n// @core\n/*\n * The value the group last wrote, so the watcher below tells the group's own writes from the\n * consumer's. Only the consumer's ask the group to make room.\n */\nlet fromGroup: boolean | undefined\n\ngroup?.register(id, {\n  get index() {\n    return props.index\n  },\n  get el() {\n    return el.value\n  },\n  get minSize() {\n    return props.minSize\n  },\n  get maxSize() {\n    return props.maxSize\n  },\n  get collapsible() {\n    return props.collapsible\n  },\n  get collapsedSize() {\n    return props.collapsedSize\n  },\n  get collapsed() {\n    return isCollapsed.value\n  },\n  setCollapsed(value) {\n    if (collapsed.value === value) return\n    fromGroup = value\n    collapsed.value = value\n  },\n})\nonBeforeUnmount(() => group?.unregister(id))\n\nwatch(collapsed, (value) => {\n  const own = value === fromGroup\n  fromGroup = undefined\n  if (!own && props.collapsible) group?.toggle(props.index, value)\n})\n\n// @devwarn\nif (isDev) {\n  if (!group) console.warn('[VResizablePanel] Place it directly inside a VResizable.')\n  watch(\n    () => collapsed.value && !props.collapsible,\n    (wrong) => {\n      if (wrong) console.warn('[VResizablePanel] `collapsed` has no effect without `collapsible`.')\n    },\n    { immediate: true },\n  )\n}\n\n// Every variable is set, even to its default, so that a nested group's panel never inherits\n// the limits of the panel it sits in.\nconst style = computed(() => ({\n  '--resizable-panel-size': String(group?.sizeAt(props.index) ?? 1),\n  '--resizable-panel-min': cssLength(props.minSize),\n  '--resizable-panel-max': props.maxSize === undefined ? 'none' : cssLength(props.maxSize),\n  '--resizable-panel-collapsed': cssLength(props.collapsedSize),\n}))\n</script>\n\n<template>\n  <div\n    :id=\"(attrs.id as string | undefined) ?? id\"\n    ref=\"el\"\n    class=\"v-resizable-panel\"\n    :data-collapsed=\"isCollapsed ? '' : undefined\"\n    :data-hidden=\"hidesContent ? '' : undefined\"\n    :style=\"style\"\n  >\n    <slot />\n  </div>\n</template>\n\n<style>\n@layer vectis.components {\n  /*\n   * The basis is the size itself, padding and border included, so a padded panel still takes its\n   * exact share. Growing by the same weight spreads any space left over, such as that of a\n   * collapsed sibling, in proportion; the 1px handles are shrunk off the same way.\n   */\n  .v-resizable-panel {\n    box-sizing: border-box;\n    flex: var(--resizable-panel-size) var(--resizable-panel-size)\n      calc(var(--resizable-panel-size) * 1%);\n    overflow: auto;\n  }\n\n  .v-resizable[data-orientation='horizontal'] > .v-resizable-panel {\n    min-inline-size: var(--resizable-panel-min);\n    max-inline-size: var(--resizable-panel-max);\n  }\n\n  .v-resizable[data-orientation='vertical'] > .v-resizable-panel {\n    min-block-size: var(--resizable-panel-min);\n    max-block-size: var(--resizable-panel-max);\n  }\n\n  .v-resizable[data-orientation] > .v-resizable-panel[data-collapsed] {\n    flex: 0 0 var(--resizable-panel-collapsed);\n    min-inline-size: 0;\n    max-inline-size: none;\n    min-block-size: 0;\n    max-block-size: none;\n  }\n\n  /* Removed from the layout as well, or its padding would keep the panel open. */\n  .v-resizable-panel[data-hidden] {\n    display: none;\n  }\n}\n</style>\n"],"mappings":""}

package/dist/components/VResizable/VResizablePanel.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"VResizablePanel.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/VResizable/VResizablePanel.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * The group hands each panel its share of the space as a `flex-grow` weight. The panel writes its\n * own limits in CSS as well, so a length limit holds before any script runs and while the window\n * is resized.\n */\n\nimport { computed, inject, onBeforeUnmount, ref, useAttrs, useId, watch } from 'vue'\n\nimport { isDev } from '../../utils/env'\nimport { resizableKey } from './context'\nimport type { ResizableLength } from './VResizable.vue'\n\ninterface ResizablePanelProps {\n  /** Which panel this is among its siblings, set by VResizable. Do not set it yourself. */\n  index?: number\n  /**\n   * The starting size in percent, used when the group's v-model gives none. Panels without one\n   * share what is left equally.\n   */\n  defaultSize?: number\n  /** The smallest size: a number in percent, or a CSS length such as `200px` or `12rem`. */\n  minSize?: ResizableLength\n  /** The largest size: a number in percent, or a CSS length. */\n  maxSize?: ResizableLength\n  /**\n   * Lets the panel collapse: dragged past the middle of its minimum, or with Enter on its\n   * handle.\n   */\n  collapsible?: boolean\n  /**\n   * The size of the collapsed panel, in percent or as a CSS length such as the width of an icon\n   * rail. At 0, the default, its content is hidden.\n   */\n  collapsedSize?: ResizableLength\n  /**\n   * What the panel is called. It names the handle that resizes it; the dictionary's \"Panel 2\"\n   * otherwise.\n   */\n  label?: string\n}\n\nconst props = withDefaults(defineProps<ResizablePanelProps>(), {\n  index: 0,\n  defaultSize: undefined,\n  minSize: 0,\n  maxSize: undefined,\n  collapsible: false,\n  collapsedSize: 0,\n  label: undefined,\n})\n\n/** Whether the panel is collapsed. It only takes effect on a `collapsible` panel. */\nconst collapsed = defineModel<boolean>('collapsed', { default: false })\n\ndefineSlots<{\n  /** The panel's content. */\n  default(): unknown\n}>()\n\nconst group = inject(resizableKey, null)\nconst attrs = useAttrs()\nconst id = useId()\nconst el = ref<HTMLElement | null>(null)\n\nconst isCollapsed = computed(() => props.collapsible && collapsed.value)\n\nconst cssLength = (length: ResizableLength) => (typeof length === 'number' ? `${length}%` : length)\n\n/** A collapsed size of zero leaves nothing to read, so the content is hidden, focus included. */\nconst hidesContent = computed(\n  () => isCollapsed.value && Number.parseFloat(String(props.collapsedSize)) === 0,\n)\n\n// @core\n/*\n * The value the group last wrote, so the watcher below tells the group's own writes from the\n * consumer's. Only the consumer's ask the group to make room.\n */\nlet fromGroup: boolean | undefined\n\ngroup?.register(id, {\n  get index() {\n    return props.index\n  },\n  get el() {\n    return el.value\n  },\n  get minSize() {\n    return props.minSize\n  },\n  get maxSize() {\n    return props.maxSize\n  },\n  get collapsible() {\n    return props.collapsible\n  },\n  get collapsedSize() {\n    return props.collapsedSize\n  },\n  get collapsed() {\n    return isCollapsed.value\n  },\n  setCollapsed(value) {\n    if (collapsed.value === value) return\n    fromGroup = value\n    collapsed.value = value\n  },\n})\nonBeforeUnmount(() => group?.unregister(id))\n\nwatch(collapsed, (value) => {\n  const own = value === fromGroup\n  fromGroup = undefined\n  if (!own && props.collapsible) group?.toggle(props.index, value)\n})\n\n// @devwarn\nif (isDev) {\n  if (!group) console.warn('[VResizablePanel] Place it directly inside a VResizable.')\n  watch(\n    () => collapsed.value && !props.collapsible,\n    (wrong) => {\n      if (wrong) console.warn('[VResizablePanel] `collapsed` has no effect without `collapsible`.')\n    },\n    { immediate: true },\n  )\n}\n\n// Every variable is set, even to its default, so that a nested group's panel never inherits\n// the limits of the panel it sits in.\nconst style = computed(() => ({\n  '--resizable-panel-size': String(group?.sizeAt(props.index) ?? 1),\n  '--resizable-panel-min': cssLength(props.minSize),\n  '--resizable-panel-max': props.maxSize === undefined ? 'none' : cssLength(props.maxSize),\n  '--resizable-panel-collapsed': cssLength(props.collapsedSize),\n}))\n</script>\n\n<template>\n  <div\n    :id=\"(attrs.id as string | undefined) ?? id\"\n    ref=\"el\"\n    class=\"v-resizable-panel\"\n    :data-collapsed=\"isCollapsed ? '' : undefined\"\n    :data-hidden=\"hidesContent ? '' : undefined\"\n    :style=\"style\"\n  >\n    <slot />\n  </div>\n</template>\n\n<style>\n@layer vectis.components {\n  /*\n   * The basis is the size itself, padding and border included, so a padded panel still takes its\n   * exact share. Growing by the same weight spreads any space left over, such as that of a\n   * collapsed sibling, in proportion; the 1px handles are shrunk off the same way.\n   */\n  .v-resizable-panel {\n    box-sizing: border-box;\n    flex: var(--resizable-panel-size) var(--resizable-panel-size)\n      calc(var(--resizable-panel-size) * 1%);\n    overflow: auto;\n  }\n\n  .v-resizable[data-orientation='horizontal'] > .v-resizable-panel {\n    min-inline-size: var(--resizable-panel-min);\n    max-inline-size: var(--resizable-panel-max);\n  }\n\n  .v-resizable[data-orientation='vertical'] > .v-resizable-panel {\n    min-block-size: var(--resizable-panel-min);\n    max-block-size: var(--resizable-panel-max);\n  }\n\n  .v-resizable[data-orientation] > .v-resizable-panel[data-collapsed] {\n    flex: 0 0 var(--resizable-panel-collapsed);\n    min-inline-size: 0;\n    max-inline-size: none;\n    min-block-size: 0;\n    max-block-size: none;\n  }\n\n  /* Removed from the layout as well, or its padding would keep the panel open. */\n  .v-resizable-panel[data-hidden] {\n    display: none;\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA0CA,IAAM,IAAQ,GAWR,IAAY,EAAoB,GAAC,WAA+B,GAOhE,IAAQ,EAAO,GAAc,IAAI,GACjC,IAAQ,EAAS,GACjB,IAAK,EAAM,GACX,IAAK,EAAwB,IAAI,GAEjC,IAAc,QAAe,EAAM,eAAe,EAAU,KAAK,GAEjE,KAAa,MAA6B,OAAO,KAAW,WAAW,GAAG,EAAO,KAAK,GAGtF,IAAe,QACb,EAAY,SAAS,OAAO,WAAW,OAAO,EAAM,aAAa,CAAC,MAAM,CAChF,GAOI;EAuCJ,AArCA,GAAO,SAAS,GAAI;GAClB,IAAI,QAAQ;IACV,OAAO,EAAM;GACf;GACA,IAAI,KAAK;IACP,OAAO,EAAG;GACZ;GACA,IAAI,UAAU;IACZ,OAAO,EAAM;GACf;GACA,IAAI,UAAU;IACZ,OAAO,EAAM;GACf;GACA,IAAI,cAAc;IAChB,OAAO,EAAM;GACf;GACA,IAAI,gBAAgB;IAClB,OAAO,EAAM;GACf;GACA,IAAI,YAAY;IACd,OAAO,EAAY;GACrB;GACA,aAAa,GAAO;IACd,EAAU,UAAU,MACxB,IAAY,GACZ,EAAU,QAAQ;GACpB;EACF,CAAC,GACD,QAAsB,GAAO,WAAW,CAAE,CAAC,GAE3C,EAAM,IAAY,MAAU;GAC1B,IAAM,IAAM,MAAU;GAEtB,AADA,IAAY,KAAA,GACR,CAAC,KAAO,EAAM,eAAa,GAAO,OAAO,EAAM,OAAO,CAAK;EACjE,CAAC,GAGG,MACG,KAAO,QAAQ,KAAK,0DAA0D,GACnF,QACQ,EAAU,SAAS,CAAC,EAAM,cAC/B,MAAU;GACT,AAAI,KAAO,QAAQ,KAAK,oEAAoE;EAC9F,GACA,EAAE,WAAW,GAAK,CACpB;EAKF,IAAM,IAAQ,SAAgB;GAC5B,0BAA0B,OAAO,GAAO,OAAO,EAAM,KAAK,KAAK,CAAC;GAChE,yBAAyB,EAAU,EAAM,OAAO;GAChD,yBAAyB,EAAM,YAAY,KAAA,IAAY,SAAS,EAAU,EAAM,OAAO;GACvF,+BAA+B,EAAU,EAAM,aAAa;EAC9D,EAAE;yBAIA,EASM,OAAA;GARH,IAAK,EAAA,CAAA,CAAK,CAAC,MAA6B,EAAA,CAAA;YACrC;GAAJ,KAAI;GACJ,OAAM;GACL,kBAAgB,EAAA,QAAW,KAAQ,KAAA;GACnC,eAAa,EAAA,QAAY,KAAQ,KAAA;GACjC,OAAK,EAAE,EAAA,KAAK;MAEb,EAAQ,EAAA,QAAA,SAAA,CAAA,GAAA,IAAA,CAAA"}
+{"version":3,"file":"VResizablePanel.vue_vue_type_script_setup_true_lang.js","names":["_useModel","_openBlock","_createElementBlock","_unref","_normalizeStyle","_renderSlot","_hoisted_1","VResizablePanel_vue_vue_type_script_setup_true_lang_default","\"collapsed\"","\"collapsedModifiers\"","props","__props","collapsed","useModel","group","inject","resizableKey","attrs","useAttrs","id","useId","el","ref","isCollapsed","computed","cssLength","length","hidesContent","fromGroup","value","onBeforeUnmount","watch","own","isDev","wrong","style","openBlock","createElementBlock","unref","normalizeStyle","renderSlot","_ctx"],"sources":["../../../src/components/VResizable/VResizablePanel.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * The group hands each panel its share of the space as a `flex-grow` weight. The panel writes its\n * own limits in CSS as well, so a length limit holds before any script runs and while the window\n * is resized.\n */\n\nimport { computed, inject, onBeforeUnmount, ref, useAttrs, useId, watch } from 'vue'\n\nimport { isDev } from '../../utils/env'\nimport { resizableKey } from './context'\nimport type { ResizableLength } from './VResizable.vue'\n\ninterface ResizablePanelProps {\n  /** Which panel this is among its siblings, set by VResizable. Do not set it yourself. */\n  index?: number\n  /**\n   * The starting size in percent, used when the group's v-model gives none. Panels without one\n   * share what is left equally.\n   */\n  defaultSize?: number\n  /** The smallest size: a number in percent, or a CSS length such as `200px` or `12rem`. */\n  minSize?: ResizableLength\n  /** The largest size: a number in percent, or a CSS length. */\n  maxSize?: ResizableLength\n  /**\n   * Lets the panel collapse: dragged past the middle of its minimum, or with Enter on its\n   * handle.\n   */\n  collapsible?: boolean\n  /**\n   * The size of the collapsed panel, in percent or as a CSS length such as the width of an icon\n   * rail. At 0, the default, its content is hidden.\n   */\n  collapsedSize?: ResizableLength\n  /**\n   * What the panel is called. It names the handle that resizes it; the dictionary's \"Panel 2\"\n   * otherwise.\n   */\n  label?: string\n}\n\nconst props = withDefaults(defineProps<ResizablePanelProps>(), {\n  index: 0,\n  defaultSize: undefined,\n  minSize: 0,\n  maxSize: undefined,\n  collapsible: false,\n  collapsedSize: 0,\n  label: undefined,\n})\n\n/** Whether the panel is collapsed. It only takes effect on a `collapsible` panel. */\nconst collapsed = defineModel<boolean>('collapsed', { default: false })\n\ndefineSlots<{\n  /** The panel's content. */\n  default(): unknown\n}>()\n\nconst group = inject(resizableKey, null)\nconst attrs = useAttrs()\nconst id = useId()\nconst el = ref<HTMLElement | null>(null)\n\nconst isCollapsed = computed(() => props.collapsible && collapsed.value)\n\nconst cssLength = (length: ResizableLength) => (typeof length === 'number' ? `${length}%` : length)\n\n/** A collapsed size of zero leaves nothing to read, so the content is hidden, focus included. */\nconst hidesContent = computed(\n  () => isCollapsed.value && Number.parseFloat(String(props.collapsedSize)) === 0,\n)\n\n// @core\n/*\n * The value the group last wrote, so the watcher below tells the group's own writes from the\n * consumer's. Only the consumer's ask the group to make room.\n */\nlet fromGroup: boolean | undefined\n\ngroup?.register(id, {\n  get index() {\n    return props.index\n  },\n  get el() {\n    return el.value\n  },\n  get minSize() {\n    return props.minSize\n  },\n  get maxSize() {\n    return props.maxSize\n  },\n  get collapsible() {\n    return props.collapsible\n  },\n  get collapsedSize() {\n    return props.collapsedSize\n  },\n  get collapsed() {\n    return isCollapsed.value\n  },\n  setCollapsed(value) {\n    if (collapsed.value === value) return\n    fromGroup = value\n    collapsed.value = value\n  },\n})\nonBeforeUnmount(() => group?.unregister(id))\n\nwatch(collapsed, (value) => {\n  const own = value === fromGroup\n  fromGroup = undefined\n  if (!own && props.collapsible) group?.toggle(props.index, value)\n})\n\n// @devwarn\nif (isDev) {\n  if (!group) console.warn('[VResizablePanel] Place it directly inside a VResizable.')\n  watch(\n    () => collapsed.value && !props.collapsible,\n    (wrong) => {\n      if (wrong) console.warn('[VResizablePanel] `collapsed` has no effect without `collapsible`.')\n    },\n    { immediate: true },\n  )\n}\n\n// Every variable is set, even to its default, so that a nested group's panel never inherits\n// the limits of the panel it sits in.\nconst style = computed(() => ({\n  '--resizable-panel-size': String(group?.sizeAt(props.index) ?? 1),\n  '--resizable-panel-min': cssLength(props.minSize),\n  '--resizable-panel-max': props.maxSize === undefined ? 'none' : cssLength(props.maxSize),\n  '--resizable-panel-collapsed': cssLength(props.collapsedSize),\n}))\n</script>\n\n<template>\n  <div\n    :id=\"(attrs.id as string | undefined) ?? id\"\n    ref=\"el\"\n    class=\"v-resizable-panel\"\n    :data-collapsed=\"isCollapsed ? '' : undefined\"\n    :data-hidden=\"hidesContent ? '' : undefined\"\n    :style=\"style\"\n  >\n    <slot />\n  </div>\n</template>\n\n<style>\n@layer vectis.components {\n  /*\n   * The basis is the size itself, padding and border included, so a padded panel still takes its\n   * exact share. Growing by the same weight spreads any space left over, such as that of a\n   * collapsed sibling, in proportion; the 1px handles are shrunk off the same way.\n   */\n  .v-resizable-panel {\n    box-sizing: border-box;\n    flex: var(--resizable-panel-size) var(--resizable-panel-size)\n      calc(var(--resizable-panel-size) * 1%);\n    overflow: auto;\n  }\n\n  .v-resizable[data-orientation='horizontal'] > .v-resizable-panel {\n    min-inline-size: var(--resizable-panel-min);\n    max-inline-size: var(--resizable-panel-max);\n  }\n\n  .v-resizable[data-orientation='vertical'] > .v-resizable-panel {\n    min-block-size: var(--resizable-panel-min);\n    max-block-size: var(--resizable-panel-max);\n  }\n\n  .v-resizable[data-orientation] > .v-resizable-panel[data-collapsed] {\n    flex: 0 0 var(--resizable-panel-collapsed);\n    min-inline-size: 0;\n    max-inline-size: none;\n    min-block-size: 0;\n    max-block-size: none;\n  }\n\n  /* Removed from the layout as well, or its padding would keep the panel open. */\n  .v-resizable-panel[data-hidden] {\n    display: none;\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA0CA,IAAMU,IAAQC,GAWRC,IAAYZ,EAAoBW,GAAC,WAA+B,GAOhEG,IAAQC,EAAOC,GAAc,IAAI,GACjCC,IAAQC,EAAS,GACjBC,IAAKC,EAAM,GACXC,IAAKC,EAAwB,IAAI,GAEjCC,IAAcC,QAAed,EAAM,eAAeE,EAAU,KAAK,GAEjEa,KAAa,MAA6B,OAAOC,KAAW,WAAW,GAAGA,EAAO,KAAKA,GAGtFC,IAAeH,QACbD,EAAY,SAAS,OAAO,WAAW,OAAOb,EAAM,aAAa,CAAC,MAAM,CAChF,GAOIkB;EAuCJ,AArCAd,GAAO,SAASK,GAAI;GAClB,IAAI,QAAQ;IACV,OAAOT,EAAM;GACf;GACA,IAAI,KAAK;IACP,OAAOW,EAAG;GACZ;GACA,IAAI,UAAU;IACZ,OAAOX,EAAM;GACf;GACA,IAAI,UAAU;IACZ,OAAOA,EAAM;GACf;GACA,IAAI,cAAc;IAChB,OAAOA,EAAM;GACf;GACA,IAAI,gBAAgB;IAClB,OAAOA,EAAM;GACf;GACA,IAAI,YAAY;IACd,OAAOa,EAAY;GACrB;GACA,aAAa,GAAO;IAClB,AAAIX,EAAU,UAAUiB,MACxB,IAAYA,GACZ,EAAU,QAAQA;GACpB;EACF,CAAC,GACDC,QAAsBhB,GAAO,WAAWK,CAAE,CAAC,GAE3CY,EAAMnB,IAAY,MAAU;GAC1B,IAAMoB,IAAMH,MAAUD;GAEtB,AADA,IAAY,KAAA,GACR,CAACI,KAAOtB,EAAM,eAAaI,GAAO,OAAOJ,EAAM,OAAOmB,CAAK;EACjE,CAAC,GAGGI,MACGnB,KAAO,QAAQ,KAAK,0DAA0D,GACnFiB,QACQnB,EAAU,SAAS,CAACF,EAAM,cAC/B,MAAU;GACT,AAAIwB,KAAO,QAAQ,KAAK,oEAAoE;EAC9F,GACA,EAAE,WAAW,GAAK,CACpB;EAKF,IAAMC,IAAQX,SAAgB;GAC5B,0BAA0B,OAAOV,GAAO,OAAOJ,EAAM,KAAK,KAAK,CAAC;GAChE,yBAAyBe,EAAUf,EAAM,OAAO;GAChD,yBAAyBA,EAAM,YAAY,KAAA,IAAY,SAASe,EAAUf,EAAM,OAAO;GACvF,+BAA+Be,EAAUf,EAAM,aAAa;EAC9D,EAAE;oBAIAT,EAAA,GAAAC,EASM,OAAA;GARH,IAAKC,EAAAc,CAAA,CAAK,CAAC,MAA6Bd,EAAAgB,CAAA;GACrC,SAAA;GAAJ,KAAIE;GACJ,OAAM;GACL,kBAAgBE,EAAA,QAAW,KAAQ,KAAA;GACnC,eAAaI,EAAA,QAAY,KAAQ,KAAA;GACjC,OAAKvB,EAAE+B,EAAA,KAAK;EAEb9B,GAAAA,CAAAA,EAAQoC,EAAA,QAAA,SAAA,CAAA,GAAA,IAAAnC,CAAA"}

package/dist/components/VResizable/context.js.map

@@ -1 +1 @@
-{"version":3,"file":"context.js","names":[],"sources":["../../../src/components/VResizable/context.ts"],"sourcesContent":["/**\n * Panels register what the group needs when it measures and moves them: their element, their\n * limits and their collapsed model. Positions come from the group, which clones each panel's\n * VNode with its `index` while rendering.\n */\n\nimport type { InjectionKey } from 'vue'\n\nimport type { ResizableOrientation, ResizableLength } from './VResizable.vue'\n\nexport interface ResizablePanelEntry {\n  /** Which panel this is among its siblings. */\n  readonly index: number\n  readonly el: HTMLElement | null\n  readonly minSize: ResizableLength\n  readonly maxSize: ResizableLength | undefined\n  readonly collapsible: boolean\n  readonly collapsedSize: ResizableLength\n  readonly collapsed: boolean\n  /** Writes the panel's collapsed model on behalf of the group. */\n  setCollapsed: (value: boolean) => void\n}\n\nexport interface ResizableContext {\n  readonly orientation: ResizableOrientation\n  /** The size of a panel in percent, used as its `flex-grow` weight. */\n  sizeAt: (index: number) => number\n  register: (id: string, entry: ResizablePanelEntry) => void\n  unregister: (id: string) => void\n  /** Collapses or reopens a panel whose collapsed model was changed from outside the group. */\n  toggle: (index: number, collapsed: boolean) => void\n}\n\nexport const resizableKey: InjectionKey<ResizableContext> = Symbol('v-resizable')\n"],"mappings":";AAiCA,IAAa,IAA+C,OAAO,aAAa"}
+{"version":3,"file":"context.js","names":["resizableKey"],"sources":["../../../src/components/VResizable/context.ts"],"sourcesContent":["/**\n * Panels register what the group needs when it measures and moves them: their element, their\n * limits and their collapsed model. Positions come from the group, which clones each panel's\n * VNode with its `index` while rendering.\n */\n\nimport type { InjectionKey } from 'vue'\n\nimport type { ResizableOrientation, ResizableLength } from './VResizable.vue'\n\nexport interface ResizablePanelEntry {\n  /** Which panel this is among its siblings. */\n  readonly index: number\n  readonly el: HTMLElement | null\n  readonly minSize: ResizableLength\n  readonly maxSize: ResizableLength | undefined\n  readonly collapsible: boolean\n  readonly collapsedSize: ResizableLength\n  readonly collapsed: boolean\n  /** Writes the panel's collapsed model on behalf of the group. */\n  setCollapsed: (value: boolean) => void\n}\n\nexport interface ResizableContext {\n  readonly orientation: ResizableOrientation\n  /** The size of a panel in percent, used as its `flex-grow` weight. */\n  sizeAt: (index: number) => number\n  register: (id: string, entry: ResizablePanelEntry) => void\n  unregister: (id: string) => void\n  /** Collapses or reopens a panel whose collapsed model was changed from outside the group. */\n  toggle: (index: number, collapsed: boolean) => void\n}\n\nexport const resizableKey: InjectionKey<ResizableContext> = Symbol('v-resizable')\n"],"mappings":";AAiCA,IAAaA,IAA+C,OAAO,aAAa"}

package/dist/components/VResizable/layout.js.map

@@ -1 +1 @@
-{"version":3,"file":"layout.js","names":[],"sources":["../../../src/components/VResizable/layout.ts"],"sourcesContent":["// @core\n/**\n * Panel sizes are percentages of the space the panels share, summing to 100. These functions are\n * pure: the component measures the DOM and converts CSS lengths before calling them.\n */\n\n/** The limits of one panel, already converted to percentages. */\nexport interface PanelLimits {\n  min: number\n  max: number\n  collapsible: boolean\n  collapsedSize: number\n}\n\n/** Below this difference two sizes are equal, which absorbs the rounding of written sizes. */\nconst EPSILON = 0.01\n\nexport const isCollapsedAt = (size: number, limits: PanelLimits) =>\n  limits.collapsible && size <= limits.collapsedSize + EPSILON\n\n/** Rounds a written size so the model does not carry floating-point noise. */\nconst roundSize = (size: number) => Math.round(size * 1000) / 1000\n\n/**\n * The starting sizes: each panel's `defaultSize` where given, the rest shared equally. Sizes that\n * do not add up to 100 are scaled to.\n */\nexport function defaultSizes(defaults: (number | undefined)[]): number[] {\n  const given = defaults.reduce<number>((sum, size) => sum + (size ?? 0), 0)\n  const free = defaults.filter((size) => size === undefined).length\n  const share = free ? Math.max(0, 100 - given) / free : 0\n  const sizes = defaults.map((size) => size ?? share)\n  const total = sizes.reduce((sum, size) => sum + size, 0)\n  if (!total) return defaults.map(() => roundSize(100 / (defaults.length || 1)))\n  return sizes.map((size) => roundSize((size / total) * 100))\n}\n\n/**\n * Moves handle `handle`, which sits between panels `handle` and `handle + 1`, so that the panel\n * before it grows by `delta` (or shrinks, when negative). The space is taken from the panels on\n * the other side, nearest first, each down to its minimum; and given to the panels on this side,\n * nearest first, each up to its maximum.\n *\n * `snap` places the collapse point of the two neighbours between their collapsed size and their\n * minimum: 0.5 for a pointer, which must travel half that distance, 1 for the keyboard, which\n * collapses or reopens on the first press.\n */\nexport function resizeAt(\n  base: readonly number[],\n  handle: number,\n  delta: number,\n  limits: readonly PanelLimits[],\n  snap = 0.5,\n): number[] {\n  if (Math.abs(delta) < EPSILON) return [...base]\n  const growing = delta > 0\n  const growFirst = growing ? handle : handle + 1\n  const growStep = growing ? -1 : 1\n  const shrinkFirst = growing ? handle + 1 : handle\n  const shrinkStep = growing ? 1 : -1\n  const inRange = (i: number) => i >= 0 && i < base.length\n\n  let want = Math.abs(delta)\n\n  // A collapsed neighbour stays shut until the pull passes its collapse point, then opens at\n  // its minimum at once: a panel narrower than its minimum is a state no rule allows.\n  const opener = limits[growFirst]!\n  const opening = isCollapsedAt(base[growFirst]!, opener)\n  const openGap = Math.max(0, opener.min - opener.collapsedSize)\n  if (opening) {\n    if (want < openGap * (1 - snap) - EPSILON) return [...base]\n    want = Math.max(want, openGap)\n  }\n\n  // A collapsed panel further away is not reopened by a drag that only passes by.\n  let room = 0\n  for (let i = growFirst; inRange(i); i += growStep) {\n    if (i !== growFirst && isCollapsedAt(base[i]!, limits[i]!)) continue\n    room += Math.max(0, limits[i]!.max - base[i]!)\n  }\n  want = Math.min(want, room)\n\n  const next = [...base]\n  let taken = 0\n  for (let i = shrinkFirst; inRange(i) && want - taken > EPSILON; i += shrinkStep) {\n    const lim = limits[i]!\n    const size = base[i]!\n    if (isCollapsedAt(size, lim)) continue\n    let target = size - (want - taken)\n    if (target < lim.min) {\n      const collapsePoint = lim.collapsedSize + (lim.min - lim.collapsedSize) * snap\n      const canCollapse =\n        lim.collapsible &&\n        i === shrinkFirst &&\n        target < collapsePoint - EPSILON &&\n        taken + size - lim.collapsedSize <= room + EPSILON\n      target = canCollapse ? lim.collapsedSize : lim.min\n    }\n    target = Math.min(target, size)\n    taken += size - target\n    next[i] = target\n  }\n\n  if (opening && taken < openGap - EPSILON) return [...base]\n\n  let left = taken\n  for (let i = growFirst; inRange(i) && left > EPSILON; i += growStep) {\n    const lim = limits[i]!\n    if (i !== growFirst && isCollapsedAt(base[i]!, lim)) continue\n    const size = next[i]!\n    const target = Math.min(lim.max, size + left)\n    left -= target - size\n    next[i] = target\n  }\n  if (left > EPSILON) return [...base]\n\n  return next.map(roundSize)\n}\n"],"mappings":";AAeA,IAAM,IAAU,KAEH,KAAiB,GAAc,MAC1C,EAAO,eAAe,KAAQ,EAAO,gBAAgB,GAGjD,KAAa,MAAiB,KAAK,MAAM,IAAO,GAAI,IAAI;AAM9D,SAAgB,EAAa,GAA4C;CACvE,IAAM,IAAQ,EAAS,QAAgB,GAAK,MAAS,KAAO,KAAQ,IAAI,CAAC,GACnE,IAAO,EAAS,QAAQ,MAAS,MAAS,KAAA,CAAS,CAAC,CAAC,QACrD,IAAQ,IAAO,KAAK,IAAI,GAAG,MAAM,CAAK,IAAI,IAAO,GACjD,IAAQ,EAAS,KAAK,MAAS,KAAQ,CAAK,GAC5C,IAAQ,EAAM,QAAQ,GAAK,MAAS,IAAM,GAAM,CAAC;CAEvD,OADK,IACE,EAAM,KAAK,MAAS,EAAW,IAAO,IAAS,GAAG,CAAC,IADvC,EAAS,UAAU,EAAU,OAAO,EAAS,UAAU,EAAE,CAAC;AAE/E;AAYA,SAAgB,EACd,GACA,GACA,GACA,GACA,IAAO,IACG;CACV,IAAI,KAAK,IAAI,CAAK,IAAI,GAAS,OAAO,CAAC,GAAG,CAAI;CAC9C,IAAM,IAAU,IAAQ,GAClB,IAAY,IAAU,IAAS,IAAS,GACxC,IAAW,IAAU,KAAK,GAC1B,IAAc,IAAU,IAAS,IAAI,GACrC,IAAa,IAAU,IAAI,IAC3B,KAAW,MAAc,KAAK,KAAK,IAAI,EAAK,QAE9C,IAAO,KAAK,IAAI,CAAK,GAInB,IAAS,EAAO,IAChB,IAAU,EAAc,EAAK,IAAa,CAAM,GAChD,IAAU,KAAK,IAAI,GAAG,EAAO,MAAM,EAAO,aAAa;CAC7D,IAAI,GAAS;EACX,IAAI,IAAO,KAAW,IAAI,KAAQ,GAAS,OAAO,CAAC,GAAG,CAAI;EAC1D,IAAO,KAAK,IAAI,GAAM,CAAO;CAC/B;CAGA,IAAI,IAAO;CACX,KAAK,IAAI,IAAI,GAAW,EAAQ,CAAC,GAAG,KAAK,GACnC,MAAM,KAAa,EAAc,EAAK,IAAK,EAAO,EAAG,MACzD,KAAQ,KAAK,IAAI,GAAG,EAAO,EAAE,CAAE,MAAM,EAAK,EAAG;CAE/C,IAAO,KAAK,IAAI,GAAM,CAAI;CAE1B,IAAM,IAAO,CAAC,GAAG,CAAI,GACjB,IAAQ;CACZ,KAAK,IAAI,IAAI,GAAa,EAAQ,CAAC,KAAK,IAAO,IAAQ,GAAS,KAAK,GAAY;EAC/E,IAAM,IAAM,EAAO,IACb,IAAO,EAAK;EAClB,IAAI,EAAc,GAAM,CAAG,GAAG;EAC9B,IAAI,IAAS,KAAQ,IAAO;EAC5B,IAAI,IAAS,EAAI,KAAK;GACpB,IAAM,IAAgB,EAAI,iBAAiB,EAAI,MAAM,EAAI,iBAAiB;GAM1E,IAJE,EAAI,eACJ,MAAM,KACN,IAAS,IAAgB,KACzB,IAAQ,IAAO,EAAI,iBAAiB,IAAO,IACtB,EAAI,gBAAgB,EAAI;EACjD;EAGA,AAFA,IAAS,KAAK,IAAI,GAAQ,CAAI,GAC9B,KAAS,IAAO,GAChB,EAAK,KAAK;CACZ;CAEA,IAAI,KAAW,IAAQ,IAAU,GAAS,OAAO,CAAC,GAAG,CAAI;CAEzD,IAAI,IAAO;CACX,KAAK,IAAI,IAAI,GAAW,EAAQ,CAAC,KAAK,IAAO,GAAS,KAAK,GAAU;EACnE,IAAM,IAAM,EAAO;EACnB,IAAI,MAAM,KAAa,EAAc,EAAK,IAAK,CAAG,GAAG;EACrD,IAAM,IAAO,EAAK,IACZ,IAAS,KAAK,IAAI,EAAI,KAAK,IAAO,CAAI;EAE5C,AADA,KAAQ,IAAS,GACjB,EAAK,KAAK;CACZ;CAGA,OAFI,IAAO,IAAgB,CAAC,GAAG,CAAI,IAE5B,EAAK,IAAI,CAAS;AAC3B"}
+{"version":3,"file":"layout.js","names":["EPSILON","isCollapsedAt","limits","size","roundSize","defaultSizes","given","defaults","sum","free","share","sizes","total","resizeAt","delta","base","growing","growFirst","handle","growStep","shrinkFirst","shrinkStep","inRange","i","want","opener","opening","openGap","snap","room","next","taken","lim","target","collapsePoint","left"],"sources":["../../../src/components/VResizable/layout.ts"],"sourcesContent":["// @core\n/**\n * Panel sizes are percentages of the space the panels share, summing to 100. These functions are\n * pure: the component measures the DOM and converts CSS lengths before calling them.\n */\n\n/** The limits of one panel, already converted to percentages. */\nexport interface PanelLimits {\n  min: number\n  max: number\n  collapsible: boolean\n  collapsedSize: number\n}\n\n/** Below this difference two sizes are equal, which absorbs the rounding of written sizes. */\nconst EPSILON = 0.01\n\nexport const isCollapsedAt = (size: number, limits: PanelLimits) =>\n  limits.collapsible && size <= limits.collapsedSize + EPSILON\n\n/** Rounds a written size so the model does not carry floating-point noise. */\nconst roundSize = (size: number) => Math.round(size * 1000) / 1000\n\n/**\n * The starting sizes: each panel's `defaultSize` where given, the rest shared equally. Sizes that\n * do not add up to 100 are scaled to.\n */\nexport function defaultSizes(defaults: (number | undefined)[]): number[] {\n  const given = defaults.reduce<number>((sum, size) => sum + (size ?? 0), 0)\n  const free = defaults.filter((size) => size === undefined).length\n  const share = free ? Math.max(0, 100 - given) / free : 0\n  const sizes = defaults.map((size) => size ?? share)\n  const total = sizes.reduce((sum, size) => sum + size, 0)\n  if (!total) return defaults.map(() => roundSize(100 / (defaults.length || 1)))\n  return sizes.map((size) => roundSize((size / total) * 100))\n}\n\n/**\n * Moves handle `handle`, which sits between panels `handle` and `handle + 1`, so that the panel\n * before it grows by `delta` (or shrinks, when negative). The space is taken from the panels on\n * the other side, nearest first, each down to its minimum; and given to the panels on this side,\n * nearest first, each up to its maximum.\n *\n * `snap` places the collapse point of the two neighbours between their collapsed size and their\n * minimum: 0.5 for a pointer, which must travel half that distance, 1 for the keyboard, which\n * collapses or reopens on the first press.\n */\nexport function resizeAt(\n  base: readonly number[],\n  handle: number,\n  delta: number,\n  limits: readonly PanelLimits[],\n  snap = 0.5,\n): number[] {\n  if (Math.abs(delta) < EPSILON) return [...base]\n  const growing = delta > 0\n  const growFirst = growing ? handle : handle + 1\n  const growStep = growing ? -1 : 1\n  const shrinkFirst = growing ? handle + 1 : handle\n  const shrinkStep = growing ? 1 : -1\n  const inRange = (i: number) => i >= 0 && i < base.length\n\n  let want = Math.abs(delta)\n\n  // A collapsed neighbour stays shut until the pull passes its collapse point, then opens at\n  // its minimum at once: a panel narrower than its minimum is a state no rule allows.\n  const opener = limits[growFirst]!\n  const opening = isCollapsedAt(base[growFirst]!, opener)\n  const openGap = Math.max(0, opener.min - opener.collapsedSize)\n  if (opening) {\n    if (want < openGap * (1 - snap) - EPSILON) return [...base]\n    want = Math.max(want, openGap)\n  }\n\n  // A collapsed panel further away is not reopened by a drag that only passes by.\n  let room = 0\n  for (let i = growFirst; inRange(i); i += growStep) {\n    if (i !== growFirst && isCollapsedAt(base[i]!, limits[i]!)) continue\n    room += Math.max(0, limits[i]!.max - base[i]!)\n  }\n  want = Math.min(want, room)\n\n  const next = [...base]\n  let taken = 0\n  for (let i = shrinkFirst; inRange(i) && want - taken > EPSILON; i += shrinkStep) {\n    const lim = limits[i]!\n    const size = base[i]!\n    if (isCollapsedAt(size, lim)) continue\n    let target = size - (want - taken)\n    if (target < lim.min) {\n      const collapsePoint = lim.collapsedSize + (lim.min - lim.collapsedSize) * snap\n      const canCollapse =\n        lim.collapsible &&\n        i === shrinkFirst &&\n        target < collapsePoint - EPSILON &&\n        taken + size - lim.collapsedSize <= room + EPSILON\n      target = canCollapse ? lim.collapsedSize : lim.min\n    }\n    target = Math.min(target, size)\n    taken += size - target\n    next[i] = target\n  }\n\n  if (opening && taken < openGap - EPSILON) return [...base]\n\n  let left = taken\n  for (let i = growFirst; inRange(i) && left > EPSILON; i += growStep) {\n    const lim = limits[i]!\n    if (i !== growFirst && isCollapsedAt(base[i]!, lim)) continue\n    const size = next[i]!\n    const target = Math.min(lim.max, size + left)\n    left -= target - size\n    next[i] = target\n  }\n  if (left > EPSILON) return [...base]\n\n  return next.map(roundSize)\n}\n"],"mappings":"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"}

package/dist/components/VSelect/VSelect.js.map

@@ -1 +1 @@
-{"version":3,"file":"VSelect.js","names":[],"sources":["../../../src/components/VSelect/VSelect.vue"],"sourcesContent":["<script setup lang=\"ts\">\n// @keyboard @a11y @core\n/**\n * A select-only combobox: a native button keeps DOM focus and moves aria-activedescendant through\n * the options, since a native `<select>` cannot draw its list with the design system on every\n * engine. A hidden native `<select>` carries the value into forms, with its constraint\n * validation, autofill and reset.\n */\n\nimport { computed, inject, onBeforeUnmount, onMounted, ref, useId, watch } from 'vue'\n\nimport { expand_more as expandMoreIcon } from '../VIcon/icons/expand_more'\nimport type { IconSource } from '../VIcon/types'\nimport type { FieldLabelPosition } from '../VField/VField.vue'\nimport VInput from '../VInput/VInput.vue'\nimport { inputGroupKey } from '../VInput/context'\nimport VListboxChevron from '../VListbox/VListboxChevron.vue'\nimport VListboxPanel from '../VListbox/VListboxPanel.vue'\nimport VListboxValues from '../VListbox/VListboxValues.vue'\nimport VSpinner from '../VSpinner/VSpinner.vue'\n\nimport type {\n  ItemValue,\n  ListboxGroup,\n  ListboxItem,\n  ListboxChipSlotProps,\n  ListboxOption,\n  ListboxOptionSlotProps,\n  ListboxOverflowSlotProps,\n  ListboxSeparator,\n} from '../../types'\nimport { toggleValue } from '../../utils/array'\nimport { partitionAttrs } from '../../utils/attrs'\nimport { chipScaleFor } from '../../utils/chip'\nimport { createNormalizedCache, normalizeText } from '../../utils/text'\n\nimport { canClear } from '../../composables/useClearable'\nimport { useControlShape } from '../../composables/useControlShape'\nimport { useFocusoutDismiss } from '../../composables/useFocusoutDismiss'\nimport { iconStartListener } from '../../composables/useIconClickHandlers'\nimport { selectionOf, useListbox } from '../../composables/useListbox'\nimport { useRootAttrs } from '../../composables/useRootAttrs'\nimport { useTimer } from '../../composables/useTimer'\nimport { useMessages } from '../../i18n/state'\n\n/** One thing that can be chosen. */\nexport type SelectOption = ListboxOption\n\n/** A named block of options, the equivalent of a native `<optgroup>`. */\nexport type SelectGroup = ListboxGroup\n\n/** A rule drawn between two blocks of options, purely decorative. */\nexport type SelectSeparator = ListboxSeparator\n\n/** Anything the list may hold: an option, a named block, or a separator. */\nexport type SelectItem = ListboxItem\n\n/** Where the list opens relative to the field. */\nexport type SelectPlacement =\n  'bottom' | 'bottom-start' | 'bottom-end' | 'top' | 'top-start' | 'top-end'\n\n/** The height of the field: 32, 40 or 48 pixels. */\nexport type SelectSize = 'sm' | 'md' | 'lg'\n\n/**\n * How the chosen values are shown in a multiple field: one chip each, or their labels\n * joined by commas.\n */\nexport type SelectDisplay = 'chip' | 'text'\n\n/** What the `#option` slot receives. */\nexport type SelectOptionSlotProps = ListboxOptionSlotProps\n\n/** What the `#chip` slot receives. */\nexport type SelectChipSlotProps = ListboxChipSlotProps\n\n/** What the `#overflow` slot receives. */\nexport type SelectOverflowSlotProps = ListboxOverflowSlotProps\n\ninterface SelectProps {\n  /**\n   * What the list offers. An entry may be an option, a named block of options, or a\n   * separator; a plain list of options remains perfectly valid.\n   */\n  options: SelectItem[]\n  /**\n   * Allows several values to be chosen, which makes the value a list and shows what has been\n   * chosen inside the field, as chips or as text depending on `display`. The list then stays\n   * open while options are toggled.\n   */\n  multiple?: boolean\n  /**\n   * How the chosen values are shown when several can be chosen: one dismissible chip each, or\n   * their labels joined by commas on a single line, cut short with an ellipsis when they run\n   * out of room.\n   */\n  display?: SelectDisplay\n  /**\n   * How many chosen values to show while the field is not focused, before the rest are summed\n   * up as \"+X\". Left out, or set to 0, every value is shown.\n   */\n  max?: number\n  /**\n   * Rephrases the \"+X\" standing for the values beyond `max`, \"+5 products\" for instance.\n   * It receives the number of values being hidden.\n   */\n  overflowText?: (count: number) => string\n  /** The label above the field, tied to it so that clicking it focuses the field. */\n  label?: string\n  /**\n   * A line of help under the field. It is tied to the field for assistive technology,\n   * so it is read out along with the label.\n   */\n  hint?: string\n  /**\n   * A message saying what is wrong with the value, shown in place of the hint so that the field\n   * does not grow. It marks the field invalid, is read along with it, and is announced when it\n   * appears or changes.\n   */\n  error?: string\n  /**\n   * Marks the field as required: an asterisk follows the label, the combobox is announced as\n   * required, and the hidden `<select>` a form reads is `required`.\n   */\n  required?: boolean\n  /** Hides the label visually. It still names the field for assistive technology. */\n  hideLabel?: boolean\n  /**\n   * Where the label sits: above the field (`top`, the default), or at its start, in a column of\n   * its own, moving back above when there is not room for both.\n   */\n  labelPosition?: FieldLabelPosition\n  /** The height of the field: 32, 40 or 48 pixels. */\n  size?: SelectSize\n  /** Takes 4px off the height, as everywhere else in the design system. */\n  compact?: boolean\n  /** What the field says while nothing is chosen. */\n  placeholder?: string\n  /** Makes the field unusable, greyed out through the colour tokens. Its value is not submitted. */\n  disabled?: boolean\n  /**\n   * Shows what has been chosen without letting it be changed: the field stays focusable and its\n   * value is submitted, but the list never opens, the chips lose their crosses and no clear\n   * cross is offered.\n   */\n  readonly?: boolean\n  /** Marks the field as invalid, for a rule of your own. */\n  invalid?: boolean\n  /**\n   * An icon inside the field, at the start, before the chips when several values can\n   * be chosen. It is decorative by default and becomes a real button as soon as a\n   * `@click:icon-start` listener is attached, in which case it needs `iconStartLabel`.\n   */\n  iconStart?: IconSource\n  /** What the start icon does, in words, once it is clickable. */\n  iconStartLabel?: string\n  /**\n   * The chevron at the end of the field, which turns as the list opens: an icon name, or an\n   * explicit render.\n   */\n  expandIcon?: IconSource\n  /**\n   * Says that the options are being loaded: a spinner takes the chevron's place. The list still\n   * opens.\n   */\n  loading?: boolean\n  /** What the spinner is announced as. It falls back to the design system dictionary. */\n  loadingText?: string\n  /** Offers a cross that empties the selection. */\n  clearable?: boolean\n  /** What that cross does, in words. It falls back to the design system dictionary. */\n  clearLabel?: string\n  /** Where the list opens relative to the field. */\n  placement?: SelectPlacement\n}\n\nconst props = withDefaults(defineProps<SelectProps>(), {\n  multiple: false,\n  display: 'chip',\n  max: undefined,\n  overflowText: undefined,\n  label: undefined,\n  hint: undefined,\n  error: undefined,\n  required: false,\n  hideLabel: false,\n  labelPosition: 'top',\n  size: 'md',\n  compact: false,\n  placeholder: undefined,\n  disabled: false,\n  readonly: false,\n  invalid: false,\n  iconStart: undefined,\n  iconStartLabel: undefined,\n  expandIcon: () => expandMoreIcon,\n  loading: false,\n  loadingText: undefined,\n  clearable: false,\n  clearLabel: undefined,\n  placement: 'bottom-start',\n})\n\nconst m = useMessages()\nconst resolvedClearLabel = computed(() => props.clearLabel ?? m.value.select.clear)\n\nconst emit = defineEmits<{\n  /** The clear cross emptied the selection. */\n  clear: []\n  /** The start icon was clicked. Attaching this listener is what makes it a button. */\n  'click:icon-start': [event: MouseEvent]\n}>()\n\ndefineSlots<{\n  /**\n   * Content at the start of the field, rendered after the chips standing for the chosen\n   * values rather than in their place.\n   */\n  start?(): unknown\n  /**\n   * Controls of your own inside the field, placed before the ones the field owns: the clear\n   * cross and the chevron.\n   */\n  'value-end'?(): unknown\n  /** What a row of the list shows, in place of the plain label: a subtitle, an avatar, a badge. */\n  option?(props: SelectOptionSlotProps): unknown\n  /** Replaces the chip standing for one chosen value. */\n  chip?(props: SelectChipSlotProps): unknown\n  /** Replaces the \"+X\" standing for the values beyond `max`. */\n  overflow?(props: SelectOverflowSlotProps): unknown\n}>()\n\nconst group = inject(inputGroupKey, null)\nconst {\n  size: resolvedSize,\n  compact: resolvedCompact,\n  disabled: resolvedDisabled,\n} = useControlShape(props, group)\n\nconst chipScale = computed(() => chipScaleFor(resolvedSize.value, resolvedCompact.value))\n\n/** The chosen option's `value`, `''` while nothing is chosen, or the list of them when `multiple` is set. */\nconst model = defineModel<ItemValue | ItemValue[]>({ default: '' })\n\n// `class` and `style` stay on the wrapper; the form attributes go to the hidden `<select>`, which\n// is what a form reads; everything else goes down to the button, the element assistive\n// technology treats as the combobox.\ndefineOptions({ inheritAttrs: false })\nconst { rootClass, rootStyle, forwardedAttrs } = useRootAttrs()\n\nconst NATIVE_ONLY = ['name', 'form', 'autocomplete']\nconst split = computed(() => partitionAttrs(forwardedAttrs.value, NATIVE_ONLY))\nconst nativeAttrs = computed(() => split.value.picked)\n\n// Declared as this component's own event, `click:icon-start` is out of `$attrs`, so the\n// listener is relayed to the field by hand; and only when the consumer wrote one.\nconst iconStartClick = iconStartListener((event) => emit('click:icon-start', event))\nconst fieldAttrs = computed(() => ({ ...split.value.rest, ...iconStartClick }))\n\nconst rootEl = ref<HTMLElement | null>(null)\nconst triggerEl = ref<HTMLButtonElement | null>(null)\nconst nativeEl = ref<HTMLSelectElement | null>(null)\nconst panelRef = ref<InstanceType<typeof VListboxPanel> | null>(null)\nconst optionsId = useId()\n\nconst open = ref(false)\nconst focused = ref(false)\n\nconst selectedValues = computed(() => selectionOf(model.value, props.multiple))\n\nconst {\n  allOptions,\n  visible,\n  optionOf,\n  labelOf,\n  remember,\n  activeIndex,\n  optionId,\n  highlightFirst,\n  highlightLast,\n  highlightSelected,\n  move,\n  page,\n  hover,\n  blocks,\n  measureRow,\n} = useListbox({\n  items: () => props.options,\n  selected: () => selectedValues.value,\n  open: () => open.value,\n  id: optionsId,\n  panelEl: () => panelRef.value?.el ?? null,\n  virtual: () => false,\n  size: () => resolvedSize.value,\n  compact: () => resolvedCompact.value,\n})\n\n// @a11y\n// What the button says, which assistive technology reads as the combobox's value: the chosen\n// label, or every chosen label when the chips beside it show them.\nconst valueText = computed(() => selectedValues.value.map(labelOf).join(', '))\n\nconst textDisplay = computed(() => props.multiple && props.display === 'text')\n\n// Folded, the values beyond `max` are summed up; under the focus, every value is there to be\n// seen and taken back.\nconst collapsed = computed(() => props.multiple && !focused.value && !open.value)\n\nconst clearVisible = computed(() =>\n  canClear(props, resolvedDisabled.value, selectedValues.value.length > 0),\n)\n\n/** Whether the hidden `<select>` failed validation since the value last changed. */\nconst nativeInvalid = ref(false)\n\nfunction openPanel() {\n  if (resolvedDisabled.value || props.readonly || open.value) return\n  open.value = true\n  highlightSelected()\n}\n\nfunction closePanel() {\n  if (!open.value) return\n  open.value = false\n  activeIndex.value = -1\n}\n\nfunction togglePanel() {\n  if (open.value) closePanel()\n  else openPanel()\n}\n\nconst onFocusout = useFocusoutDismiss(rootEl, () => {\n  focused.value = false\n  closePanel()\n})\n\nfunction choose(option: SelectOption) {\n  if (option.disabled || props.readonly || resolvedDisabled.value) return\n  remember(option)\n  if (props.multiple) {\n    model.value = toggleValue(selectedValues.value, option.value)\n  } else {\n    // Choosing the option already chosen (Tab without moving, for one) changes nothing.\n    if (model.value !== option.value) model.value = option.value\n    closePanel()\n  }\n}\n\nfunction chooseActive() {\n  const option = visible.value[activeIndex.value]\n  if (option) choose(option)\n}\n\nfunction removeValue(value: ItemValue) {\n  if (!props.multiple || props.readonly || resolvedDisabled.value) return\n  model.value = selectedValues.value.filter((v) => v !== value)\n  // The cross disappears along with its chip, so the focus would fall back to the page.\n  triggerEl.value?.focus()\n}\n\n/** The cross was pressed. It disappears with the selection, so the focus goes back to the button. */\nfunction onClear() {\n  model.value = props.multiple ? [] : ''\n  triggerEl.value?.focus()\n  emit('clear')\n}\n\nconst normalizedOf = createNormalizedCache<SelectOption>()\nlet typed = ''\nconst typeTimer = useTimer()\n\n// @keyboard\n/*\n * Typing a label's first letters highlights it, as a native list does: the letters typed within\n * half a second add up to a prefix, and the same letter repeated cycles through the options it\n * starts.\n */\nfunction typeahead(key: string) {\n  typed += normalizeText(key)\n  typeTimer.start(() => (typed = ''), 500)\n  const list = visible.value\n  if (list.length === 0) return\n  const cycling = [...typed].every((char) => char === typed[0])\n  const needle = cycling ? typed[0]! : typed\n  // A new prefix may match the highlighted option itself; a cycle moves on from it.\n  const from = activeIndex.value + (typed.length === 1 || cycling ? 1 : 0)\n  for (let step = 0; step < list.length; step++) {\n    const index = (Math.max(from, 0) + step) % list.length\n    const option = list[index]!\n    if (!option.disabled && normalizedOf(option, option.label).startsWith(needle)) {\n      activeIndex.value = index\n      return\n    }\n  }\n}\n\nconst printable = (event: KeyboardEvent) =>\n  event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey\n\n// @keyboard\n// The keys of the select-only combobox pattern. Enter and Space are consumed on the closed button\n// too, so the click they would synthesise does not toggle the list a second time.\nfunction onKeydown(event: KeyboardEvent) {\n  if (!open.value) {\n    switch (event.key) {\n      case 'ArrowDown':\n      case 'ArrowUp':\n      case 'Enter':\n      case ' ':\n        event.preventDefault()\n        openPanel()\n        return\n      case 'Home':\n        event.preventDefault()\n        openPanel()\n        if (open.value) highlightFirst()\n        return\n      case 'End':\n        event.preventDefault()\n        openPanel()\n        if (open.value) highlightLast()\n        return\n    }\n    if (printable(event)) {\n      openPanel()\n      if (open.value) typeahead(event.key)\n    }\n    return\n  }\n\n  switch (event.key) {\n    case 'ArrowDown':\n      event.preventDefault()\n      move(1)\n      break\n    case 'ArrowUp':\n      event.preventDefault()\n      if (event.altKey) {\n        chooseActive()\n        closePanel()\n      } else move(-1)\n      break\n    case 'Home':\n      event.preventDefault()\n      highlightFirst()\n      break\n    case 'End':\n      event.preventDefault()\n      highlightLast()\n      break\n    case 'PageDown':\n      event.preventDefault()\n      page(10)\n      break\n    case 'PageUp':\n      event.preventDefault()\n      page(-10)\n      break\n    case ' ':\n      event.preventDefault()\n      // While letters are being typed, a space belongs to the prefix: \"New York\".\n      if (typed) typeahead(' ')\n      else chooseActive()\n      break\n    case 'Enter':\n      event.preventDefault()\n      chooseActive()\n      break\n    case 'Escape':\n      // Consumed only when it closes the list, so a surrounding VDialog stays open.\n      event.preventDefault()\n      closePanel()\n      break\n    case 'Tab':\n      // Leaving a single list takes the highlighted option, as the pattern prescribes.\n      if (!props.multiple) chooseActive()\n      closePanel()\n      break\n    default:\n      if (printable(event)) typeahead(event.key)\n  }\n}\n\nconst interactive = 'a, button, input, select, textarea, [tabindex]'\n\n// @core\n/*\n * The rest of the field is not focusable, so pressing it would hand the focus to the page: the\n * root's `focusout` then closes the list, and the click that follows reopens it.\n */\nfunction onControlMousedown(event: MouseEvent) {\n  const target = event.target as Element\n  if (target.closest('.v-input-field') && !target.closest(interactive)) event.preventDefault()\n}\n\n/**\n * A click anywhere in the box of the field toggles the list, as one on the button does. The\n * field's own controls keep their clicks, and the label's reaches the button by itself.\n */\nfunction onControlClick(event: MouseEvent) {\n  const target = event.target as Element\n  if (resolvedDisabled.value || !target.closest('.v-input-field') || target.closest(interactive))\n    return\n  triggerEl.value?.focus()\n  togglePanel()\n}\n\n/*\n * The hidden `<select>` is written by hand rather than through `selected` bindings: a form reset\n * changes it behind the virtual DOM's back, which would then consider unchanged options already\n * in the right state.\n */\nfunction syncNative() {\n  const el = nativeEl.value\n  if (!el) return\n  for (const option of el.options) {\n    option.selected = option.value !== '' && wantedValues.value.has(option.value)\n  }\n  if (!props.multiple && selectedValues.value.length === 0) el.value = ''\n}\n\nconst wantedValues = computed(() => new Set(selectedValues.value.map(String)))\n\nwatch([selectedValues, allOptions], syncNative, { flush: 'post' })\n\n// A choice that satisfies the constraint clears the error the last submission raised; one that\n// does not raises it again, `checkValidity` firing `invalid`.\nwatch(\n  selectedValues,\n  () => {\n    if (nativeInvalid.value) nativeInvalid.value = !nativeEl.value?.checkValidity()\n  },\n  { flush: 'post' },\n)\n\n/** Autofill writes the hidden `<select>`; the strings it holds are read back as option values. */\nfunction onNativeChange() {\n  const el = nativeEl.value\n  if (!el) return\n  const values = [...el.selectedOptions]\n    .map((native) => allOptions.value.find((option) => String(option.value) === native.value))\n    .filter((option): option is SelectOption => option !== undefined)\n    .map((option) => option.value)\n  model.value = props.multiple ? values : (values[0] ?? '')\n}\n\n// @core\n// A form reset restores the value the field was created with. The browser resets the hidden\n// `<select>` after the event, so it is rewritten on the next task.\nlet initial: ItemValue | ItemValue[] = ''\nlet formEl: HTMLFormElement | null = null\n\nfunction onFormReset() {\n  model.value = Array.isArray(initial) ? [...initial] : initial\n  nativeInvalid.value = false\n  setTimeout(syncNative)\n}\n\nonMounted(() => {\n  initial = Array.isArray(model.value) ? [...model.value] : model.value\n  syncNative()\n  formEl = nativeEl.value?.form ?? null\n  formEl?.addEventListener('reset', onFormReset)\n})\n\nonBeforeUnmount(() => formEl?.removeEventListener('reset', onFormReset))\n\ndefineExpose({\n  /** Moves the focus to the field. */\n  focus: (options?: FocusOptions) => triggerEl.value?.focus(options),\n  /** The button that acts as the combobox. */\n  el: triggerEl,\n})\n</script>\n\n<template>\n  <div\n    ref=\"rootEl\"\n    class=\"v-select\"\n    :class=\"rootClass\"\n    :style=\"[{ '--chip-height': chipScale.height }, rootStyle]\"\n    :data-size=\"resolvedSize\"\n    :data-multiple=\"multiple ? '' : undefined\"\n    :data-open=\"open ? '' : undefined\"\n    @focusin=\"focused = true\"\n    @focusout=\"onFocusout\"\n  >\n    <div class=\"v-select-control\" @mousedown=\"onControlMousedown\" @click=\"onControlClick\">\n      <VInput\n        class=\"v-input-end-pinned\"\n        :class=\"{ 'v-input-chips': multiple && !textDisplay }\"\n        v-bind=\"fieldAttrs\"\n        :label=\"label\"\n        :hint=\"hint\"\n        :error=\"error\"\n        :required=\"required\"\n        :hide-label=\"hideLabel\"\n        :label-position=\"labelPosition\"\n        :size=\"resolvedSize\"\n        :compact=\"resolvedCompact\"\n        :invalid=\"invalid || nativeInvalid\"\n        :disabled=\"resolvedDisabled\"\n        :readonly=\"readonly\"\n        :icon-start=\"iconStart\"\n        :icon-start-label=\"iconStartLabel\"\n        :clearable=\"clearable\"\n        :clear-visible=\"clearVisible\"\n        :clear-label=\"resolvedClearLabel\"\n        @clear=\"onClear\"\n      >\n        <template v-if=\"multiple || $slots.start\" #start>\n          <VListboxValues\n            v-if=\"multiple\"\n            :values=\"selectedValues\"\n            :display=\"display\"\n            :max=\"max\"\n            :collapsed=\"collapsed\"\n            :overflow-text=\"overflowText\"\n            :scale=\"chipScale\"\n            :removable=\"!readonly\"\n            :disabled=\"resolvedDisabled\"\n            hide-text\n            :label-of=\"labelOf\"\n            :option-of=\"optionOf\"\n            @remove=\"removeValue\"\n          >\n            <template v-if=\"$slots.chip\" #chip=\"chipProps\">\n              <slot name=\"chip\" v-bind=\"chipProps\" />\n            </template>\n            <template v-if=\"$slots.overflow\" #overflow=\"overflowProps\">\n              <slot name=\"overflow\" v-bind=\"overflowProps\" />\n            </template>\n          </VListboxValues>\n          <slot name=\"start\" />\n        </template>\n\n        <template #control=\"{ controlProps }\">\n          <button\n            ref=\"triggerEl\"\n            type=\"button\"\n            role=\"combobox\"\n            :aria-expanded=\"open\"\n            :aria-controls=\"optionsId\"\n            :aria-activedescendant=\"open && activeIndex >= 0 ? optionId(activeIndex) : undefined\"\n            :aria-required=\"required || undefined\"\n            :aria-readonly=\"readonly || undefined\"\n            v-bind=\"controlProps\"\n            class=\"v-select-trigger\"\n            @click=\"togglePanel\"\n            @keydown=\"onKeydown\"\n          >\n            <span\n              v-if=\"valueText\"\n              class=\"v-select-value\"\n              :class=\"{ 'v-visually-hidden': multiple }\"\n              >{{ valueText }}</span\n            >\n            <span v-else-if=\"placeholder\" class=\"v-select-placeholder\">{{ placeholder }}</span>\n          </button>\n          <!--\n            Out of the tab order and hidden from screen readers, it leaves the button as the\n            single stop and the single announcement. Its options mirror the flat list: a form\n            needs no groups.\n          -->\n          <select\n            ref=\"nativeEl\"\n            v-bind=\"nativeAttrs\"\n            class=\"v-select-native v-hidden-input\"\n            tabindex=\"-1\"\n            aria-hidden=\"true\"\n            :multiple=\"multiple || undefined\"\n            :required=\"required || undefined\"\n            :disabled=\"resolvedDisabled || undefined\"\n            @change=\"onNativeChange\"\n            @focus=\"triggerEl?.focus()\"\n            @invalid=\"nativeInvalid = true\"\n          >\n            <option v-if=\"!multiple\" value=\"\" />\n            <option\n              v-for=\"(option, index) in allOptions\"\n              :key=\"index\"\n              :value=\"String(option.value)\"\n              :disabled=\"option.disabled\"\n            >\n              {{ option.label }}\n            </option>\n          </select>\n        </template>\n\n        <template v-if=\"$slots['value-end']\" #value-end><slot name=\"value-end\" /></template>\n\n        <!-- The spinner takes the chevron's place: the field sizes either as an icon. -->\n        <template #end>\n          <VSpinner v-if=\"loading\" class=\"v-select-spinner v-input-icon-end\" :label=\"loadingText\" />\n          <VListboxChevron v-else :icon=\"expandIcon\" :open=\"open\" />\n        </template>\n      </VInput>\n    </div>\n\n    <VListboxPanel\n      :id=\"optionsId\"\n      ref=\"panelRef\"\n      v-model:open=\"open\"\n      anchor=\"--select-anchor\"\n      :placement=\"placement\"\n      class=\"v-select-panel\"\n      :size=\"resolvedSize\"\n      :compact=\"resolvedCompact\"\n      :multiple=\"multiple\"\n      :blocks=\"blocks\"\n      :measure=\"measureRow\"\n      @select=\"choose\"\n      @highlight=\"hover\"\n    >\n      <template v-if=\"$slots.option\" #option=\"slotProps\">\n        <slot name=\"option\" v-bind=\"slotProps\" />\n      </template>\n    </VListboxPanel>\n  </div>\n</template>\n\n<style>\n@layer vectis.components {\n  .v-select {\n    /*\n     * Declared on the root, the common ancestor of the field and the panel; a panel drawn above\n     * the page remains a descendant of it in the document.\n     */\n    anchor-scope: --select-anchor;\n    width: 100%;\n    font-family: var(--vectis-text-family);\n  }\n\n  .v-select-control {\n    display: block;\n  }\n\n  /* The panel opens against the box of the field, not against its label and hint. */\n  .v-select-control .v-input-field {\n    anchor-name: --select-anchor;\n  }\n\n  .v-select-panel {\n    max-block-size: var(--vectis-control-size-select-list-max-block);\n  }\n\n  /*\n   * VInput's `.v-input-control` gives the button the input's box: it fills the field and draws\n   * no border of its own, the field drawing the focus around it.\n   */\n  .v-select-trigger {\n    display: flex;\n    align-items: center;\n    text-align: start;\n    cursor: pointer;\n  }\n\n  /*\n   * Beside chips the button takes what is left of the last row, down to nothing, rather than\n   * wrapping onto a row of its own.\n   */\n  .v-select[data-multiple] .v-select-trigger {\n    flex: 1 1 0;\n  }\n\n  .v-select-value,\n  .v-select-placeholder {\n    min-width: 0;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  .v-select-placeholder {\n    color: var(--vectis-color-text-subtle);\n  }\n\n  .v-select-spinner {\n    color: var(--vectis-color-text-muted);\n  }\n\n  /*\n   * An unbroken line has the whole of its text as its min-content width; without this, a grid\n   * track or a flex row sized `auto` widens to fit every label and the ellipsis never shows.\n   */\n  .v-select:has(.v-listbox-text) {\n    min-inline-size: 0;\n  }\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"VSelect.js","names":["_sfc_main","VSelect_vue_vue_type_script_setup_true_lang_default","VSelect_default"],"sources":["../../../src/components/VSelect/VSelect.vue"],"sourcesContent":["<script setup lang=\"ts\">\n// @keyboard @a11y @core\n/**\n * A select-only combobox: a native button keeps DOM focus and moves aria-activedescendant through\n * the options, since a native `<select>` cannot draw its list with the design system on every\n * engine. A hidden native `<select>` carries the value into forms, with its constraint\n * validation, autofill and reset.\n */\n\nimport { computed, inject, onBeforeUnmount, onMounted, ref, useId, watch } from 'vue'\n\nimport { expand_more as expandMoreIcon } from '../VIcon/icons/expand_more'\nimport type { IconSource } from '../VIcon/types'\nimport type { FieldLabelPosition } from '../VField/VField.vue'\nimport VInput from '../VInput/VInput.vue'\nimport { inputGroupKey } from '../VInput/context'\nimport VListboxChevron from '../VListbox/VListboxChevron.vue'\nimport VListboxPanel from '../VListbox/VListboxPanel.vue'\nimport VListboxValues from '../VListbox/VListboxValues.vue'\nimport VSpinner from '../VSpinner/VSpinner.vue'\n\nimport type {\n  ItemValue,\n  ListboxGroup,\n  ListboxItem,\n  ListboxChipSlotProps,\n  ListboxOption,\n  ListboxOptionSlotProps,\n  ListboxOverflowSlotProps,\n  ListboxSeparator,\n} from '../../types'\nimport { toggleValue } from '../../utils/array'\nimport { partitionAttrs } from '../../utils/attrs'\nimport { chipScaleFor } from '../../utils/chip'\nimport { createNormalizedCache } from '../../utils/text'\n\nimport { canClear } from '../../composables/useClearable'\nimport { useControlShape } from '../../composables/useControlShape'\nimport { useFocusoutDismiss } from '../../composables/useFocusoutDismiss'\nimport { iconStartListener } from '../../composables/useIconClickHandlers'\nimport { selectionOf, useListbox } from '../../composables/useListbox'\nimport { useRootAttrs } from '../../composables/useRootAttrs'\nimport { useTypeahead } from '../../composables/useTypeahead'\nimport { useMessages } from '../../i18n/state'\n\n/** One thing that can be chosen. */\nexport type SelectOption = ListboxOption\n\n/** A named block of options, the equivalent of a native `<optgroup>`. */\nexport type SelectGroup = ListboxGroup\n\n/** A rule drawn between two blocks of options, purely decorative. */\nexport type SelectSeparator = ListboxSeparator\n\n/** Anything the list may hold: an option, a named block, or a separator. */\nexport type SelectItem = ListboxItem\n\n/** Where the list opens relative to the field. */\nexport type SelectPlacement =\n  | 'bottom'\n  | 'bottom-start'\n  | 'bottom-end'\n  | 'top'\n  | 'top-start'\n  | 'top-end'\n\n/** The height of the field: 32, 40 or 48 pixels. */\nexport type SelectSize = 'sm' | 'md' | 'lg'\n\n/**\n * How the chosen values are shown in a multiple field: one chip each, or their labels\n * joined by commas.\n */\nexport type SelectDisplay = 'chip' | 'text'\n\n/** What the `#option` slot receives. */\nexport type SelectOptionSlotProps = ListboxOptionSlotProps\n\n/** What the `#chip` slot receives. */\nexport type SelectChipSlotProps = ListboxChipSlotProps\n\n/** What the `#overflow` slot receives. */\nexport type SelectOverflowSlotProps = ListboxOverflowSlotProps\n\ninterface SelectProps {\n  /**\n   * What the list offers. An entry may be an option, a named block of options, or a\n   * separator; a plain list of options remains perfectly valid.\n   */\n  options: SelectItem[]\n  /**\n   * Allows several values to be chosen, which makes the value a list and shows what has been\n   * chosen inside the field, as chips or as text depending on `display`. The list then stays\n   * open while options are toggled.\n   */\n  multiple?: boolean\n  /**\n   * How the chosen values are shown when several can be chosen: one dismissible chip each, or\n   * their labels joined by commas on a single line, cut short with an ellipsis when they run\n   * out of room.\n   */\n  display?: SelectDisplay\n  /**\n   * How many chosen values to show while the field is not focused, before the rest are summed\n   * up as \"+X\". Left out, or set to 0, every value is shown.\n   */\n  max?: number\n  /**\n   * Rephrases the \"+X\" standing for the values beyond `max`, \"+5 products\" for instance.\n   * It receives the number of values being hidden.\n   */\n  overflowText?: (count: number) => string\n  /** The label above the field, tied to it so that clicking it focuses the field. */\n  label?: string\n  /**\n   * A line of help under the field. It is tied to the field for assistive technology,\n   * so it is read out along with the label.\n   */\n  hint?: string\n  /**\n   * A message saying what is wrong with the value, shown in place of the hint so that the field\n   * does not grow. It marks the field invalid, is read along with it, and is announced when it\n   * appears or changes.\n   */\n  error?: string\n  /**\n   * Marks the field as required: an asterisk follows the label, the combobox is announced as\n   * required, and the hidden `<select>` a form reads is `required`.\n   */\n  required?: boolean\n  /** Hides the label visually. It still names the field for assistive technology. */\n  hideLabel?: boolean\n  /**\n   * Where the label sits: above the field (`top`, the default), or at its start, in a column of\n   * its own, moving back above when there is not room for both.\n   */\n  labelPosition?: FieldLabelPosition\n  /** The height of the field: 32, 40 or 48 pixels. */\n  size?: SelectSize\n  /** Takes 4px off the height, as everywhere else in the design system. */\n  compact?: boolean\n  /** What the field says while nothing is chosen. */\n  placeholder?: string\n  /** Makes the field unusable, greyed out through the colour tokens. Its value is not submitted. */\n  disabled?: boolean\n  /**\n   * Shows what has been chosen without letting it be changed: the field stays focusable and its\n   * value is submitted, but the list never opens, the chips lose their crosses and no clear\n   * cross is offered.\n   */\n  readonly?: boolean\n  /** Marks the field as invalid, for a rule of your own. */\n  invalid?: boolean\n  /**\n   * An icon inside the field, at the start, before the chips when several values can\n   * be chosen. It is decorative by default and becomes a real button as soon as a\n   * `@click:icon-start` listener is attached, in which case it needs `iconStartLabel`.\n   */\n  iconStart?: IconSource\n  /** What the start icon does, in words, once it is clickable. */\n  iconStartLabel?: string\n  /**\n   * The chevron at the end of the field, which turns as the list opens: an icon name, or an\n   * explicit render.\n   */\n  expandIcon?: IconSource\n  /**\n   * Says that the options are being loaded: a spinner takes the chevron's place. The list still\n   * opens.\n   */\n  loading?: boolean\n  /** What the spinner is announced as. It falls back to the design system dictionary. */\n  loadingText?: string\n  /** Offers a cross that empties the selection. */\n  clearable?: boolean\n  /** What that cross does, in words. It falls back to the design system dictionary. */\n  clearLabel?: string\n  /** Where the list opens relative to the field. */\n  placement?: SelectPlacement\n}\n\nconst props = withDefaults(defineProps<SelectProps>(), {\n  multiple: false,\n  display: 'chip',\n  max: undefined,\n  overflowText: undefined,\n  label: undefined,\n  hint: undefined,\n  error: undefined,\n  required: false,\n  hideLabel: false,\n  labelPosition: 'top',\n  size: 'md',\n  compact: false,\n  placeholder: undefined,\n  disabled: false,\n  readonly: false,\n  invalid: false,\n  iconStart: undefined,\n  iconStartLabel: undefined,\n  expandIcon: () => expandMoreIcon,\n  loading: false,\n  loadingText: undefined,\n  clearable: false,\n  clearLabel: undefined,\n  placement: 'bottom-start',\n})\n\nconst m = useMessages()\nconst resolvedClearLabel = computed(() => props.clearLabel ?? m.value.select.clear)\n\nconst emit = defineEmits<{\n  /** The clear cross emptied the selection. */\n  clear: []\n  /** The start icon was clicked. Attaching this listener is what makes it a button. */\n  'click:icon-start': [event: MouseEvent]\n}>()\n\ndefineSlots<{\n  /**\n   * Content at the start of the field, rendered after the chips standing for the chosen\n   * values rather than in their place.\n   */\n  start?(): unknown\n  /**\n   * Controls of your own inside the field, placed before the ones the field owns: the clear\n   * cross and the chevron.\n   */\n  'value-end'?(): unknown\n  /** What a row of the list shows, in place of the plain label: a subtitle, an avatar, a badge. */\n  option?(props: SelectOptionSlotProps): unknown\n  /** Replaces the chip standing for one chosen value. */\n  chip?(props: SelectChipSlotProps): unknown\n  /** Replaces the \"+X\" standing for the values beyond `max`. */\n  overflow?(props: SelectOverflowSlotProps): unknown\n}>()\n\nconst group = inject(inputGroupKey, null)\nconst {\n  size: resolvedSize,\n  compact: resolvedCompact,\n  disabled: resolvedDisabled,\n} = useControlShape(props, group)\n\nconst chipScale = computed(() => chipScaleFor(resolvedSize.value, resolvedCompact.value))\n\n/** The chosen option's `value`, `''` while nothing is chosen, or the list of them when `multiple` is set. */\nconst model = defineModel<ItemValue | ItemValue[]>({ default: '' })\n\n// `class` and `style` stay on the wrapper; the form attributes go to the hidden `<select>`, which\n// is what a form reads; everything else goes down to the button, the element assistive\n// technology treats as the combobox.\ndefineOptions({ inheritAttrs: false })\nconst { rootClass, rootStyle, forwardedAttrs } = useRootAttrs()\n\nconst NATIVE_ONLY = ['name', 'form', 'autocomplete']\nconst split = computed(() => partitionAttrs(forwardedAttrs.value, NATIVE_ONLY))\nconst nativeAttrs = computed(() => split.value.picked)\n\n// Declared as this component's own event, `click:icon-start` is out of `$attrs`, so the\n// listener is relayed to the field by hand; and only when the consumer wrote one.\nconst iconStartClick = iconStartListener((event) => emit('click:icon-start', event))\nconst fieldAttrs = computed(() => ({ ...split.value.rest, ...iconStartClick }))\n\nconst rootEl = ref<HTMLElement | null>(null)\nconst triggerEl = ref<HTMLButtonElement | null>(null)\nconst nativeEl = ref<HTMLSelectElement | null>(null)\nconst panelRef = ref<InstanceType<typeof VListboxPanel> | null>(null)\nconst optionsId = useId()\n\nconst open = ref(false)\nconst focused = ref(false)\n\nconst selectedValues = computed(() => selectionOf(model.value, props.multiple))\n\nconst {\n  allOptions,\n  visible,\n  optionOf,\n  labelOf,\n  remember,\n  activeIndex,\n  optionId,\n  highlightFirst,\n  highlightLast,\n  highlightSelected,\n  move,\n  page,\n  hover,\n  blocks,\n  measureRow,\n} = useListbox({\n  items: () => props.options,\n  selected: () => selectedValues.value,\n  open: () => open.value,\n  id: optionsId,\n  panelEl: () => panelRef.value?.el ?? null,\n  virtual: () => false,\n  size: () => resolvedSize.value,\n  compact: () => resolvedCompact.value,\n})\n\n// @a11y\n// What the button says, which assistive technology reads as the combobox's value: the chosen\n// label, or every chosen label when the chips beside it show them.\nconst valueText = computed(() => selectedValues.value.map(labelOf).join(', '))\n\nconst textDisplay = computed(() => props.multiple && props.display === 'text')\n\n// Folded, the values beyond `max` are summed up; under the focus, every value is there to be\n// seen and taken back.\nconst collapsed = computed(() => props.multiple && !focused.value && !open.value)\n\nconst clearVisible = computed(() =>\n  canClear(props, resolvedDisabled.value, selectedValues.value.length > 0),\n)\n\n/** Whether the hidden `<select>` failed validation since the value last changed. */\nconst nativeInvalid = ref(false)\n\nfunction openPanel() {\n  if (resolvedDisabled.value || props.readonly || open.value) return\n  open.value = true\n  highlightSelected()\n}\n\nfunction closePanel() {\n  if (!open.value) return\n  open.value = false\n  activeIndex.value = -1\n}\n\nfunction togglePanel() {\n  if (open.value) closePanel()\n  else openPanel()\n}\n\nconst onFocusout = useFocusoutDismiss(rootEl, () => {\n  focused.value = false\n  closePanel()\n})\n\nfunction choose(option: SelectOption) {\n  if (option.disabled || props.readonly || resolvedDisabled.value) return\n  remember(option)\n  if (props.multiple) {\n    model.value = toggleValue(selectedValues.value, option.value)\n  } else {\n    // Choosing the option already chosen (Tab without moving, for one) changes nothing.\n    if (model.value !== option.value) model.value = option.value\n    closePanel()\n  }\n}\n\nfunction chooseActive() {\n  const option = visible.value[activeIndex.value]\n  if (option) choose(option)\n}\n\nfunction removeValue(value: ItemValue) {\n  if (!props.multiple || props.readonly || resolvedDisabled.value) return\n  model.value = selectedValues.value.filter((v) => v !== value)\n  // The cross disappears along with its chip, so the focus would fall back to the page.\n  triggerEl.value?.focus()\n}\n\n/** The cross was pressed. It disappears with the selection, so the focus goes back to the button. */\nfunction onClear() {\n  model.value = props.multiple ? [] : ''\n  triggerEl.value?.focus()\n  emit('clear')\n}\n\nconst normalizedOf = createNormalizedCache<SelectOption>()\nconst { find: findTyped, typing } = useTypeahead()\n\n// @keyboard\n// Typing a label's first letters highlights it.\nfunction typeahead(key: string) {\n  const list = visible.value\n  const index = findTyped(key, list.length, activeIndex.value, (i) => {\n    const option = list[i]!\n    return option.disabled ? undefined : normalizedOf(option, option.label)\n  })\n  if (index >= 0) activeIndex.value = index\n}\n\nconst printable = (event: KeyboardEvent) =>\n  event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey\n\n// @keyboard\n// The keys of the select-only combobox pattern. Enter and Space are consumed on the closed button\n// too, so the click they would synthesise does not toggle the list a second time.\nfunction onKeydown(event: KeyboardEvent) {\n  if (!open.value) {\n    switch (event.key) {\n      case 'ArrowDown':\n      case 'ArrowUp':\n      case 'Enter':\n      case ' ':\n        event.preventDefault()\n        openPanel()\n        return\n      case 'Home':\n        event.preventDefault()\n        openPanel()\n        if (open.value) highlightFirst()\n        return\n      case 'End':\n        event.preventDefault()\n        openPanel()\n        if (open.value) highlightLast()\n        return\n    }\n    if (printable(event)) {\n      openPanel()\n      if (open.value) typeahead(event.key)\n    }\n    return\n  }\n\n  switch (event.key) {\n    case 'ArrowDown':\n      event.preventDefault()\n      move(1)\n      break\n    case 'ArrowUp':\n      event.preventDefault()\n      if (event.altKey) {\n        chooseActive()\n        closePanel()\n      } else move(-1)\n      break\n    case 'Home':\n      event.preventDefault()\n      highlightFirst()\n      break\n    case 'End':\n      event.preventDefault()\n      highlightLast()\n      break\n    case 'PageDown':\n      event.preventDefault()\n      page(10)\n      break\n    case 'PageUp':\n      event.preventDefault()\n      page(-10)\n      break\n    case ' ':\n      event.preventDefault()\n      // While letters are being typed, a space belongs to the prefix: \"New York\".\n      if (typing()) typeahead(' ')\n      else chooseActive()\n      break\n    case 'Enter':\n      event.preventDefault()\n      chooseActive()\n      break\n    case 'Escape':\n      // Consumed only when it closes the list, so a surrounding VDialog stays open.\n      event.preventDefault()\n      closePanel()\n      break\n    case 'Tab':\n      // Leaving a single list takes the highlighted option, as the pattern prescribes.\n      if (!props.multiple) chooseActive()\n      closePanel()\n      break\n    default:\n      if (printable(event)) typeahead(event.key)\n  }\n}\n\nconst interactive = 'a, button, input, select, textarea, [tabindex]'\n\n// @core\n/*\n * The rest of the field is not focusable, so pressing it would hand the focus to the page: the\n * root's `focusout` then closes the list, and the click that follows reopens it.\n */\nfunction onControlMousedown(event: MouseEvent) {\n  const target = event.target as Element\n  if (target.closest('.v-input-field') && !target.closest(interactive)) event.preventDefault()\n}\n\n/**\n * A click anywhere in the box of the field toggles the list, as one on the button does. The\n * field's own controls keep their clicks, and the label's reaches the button by itself.\n */\nfunction onControlClick(event: MouseEvent) {\n  const target = event.target as Element\n  if (resolvedDisabled.value || !target.closest('.v-input-field') || target.closest(interactive))\n    return\n  triggerEl.value?.focus()\n  togglePanel()\n}\n\n/*\n * The hidden `<select>` is written by hand rather than through `selected` bindings: a form reset\n * changes it behind the virtual DOM's back, which would then consider unchanged options already\n * in the right state.\n */\nfunction syncNative() {\n  const el = nativeEl.value\n  if (!el) return\n  for (const option of el.options) {\n    option.selected = option.value !== '' && wantedValues.value.has(option.value)\n  }\n  if (!props.multiple && selectedValues.value.length === 0) el.value = ''\n}\n\nconst wantedValues = computed(() => new Set(selectedValues.value.map(String)))\n\nwatch([selectedValues, allOptions], syncNative, { flush: 'post' })\n\n// A choice that satisfies the constraint clears the error the last submission raised; one that\n// does not raises it again, `checkValidity` firing `invalid`.\nwatch(\n  selectedValues,\n  () => {\n    if (nativeInvalid.value) nativeInvalid.value = !nativeEl.value?.checkValidity()\n  },\n  { flush: 'post' },\n)\n\n/** Autofill writes the hidden `<select>`; the strings it holds are read back as option values. */\nfunction onNativeChange() {\n  const el = nativeEl.value\n  if (!el) return\n  const values = [...el.selectedOptions]\n    .map((native) => allOptions.value.find((option) => String(option.value) === native.value))\n    .filter((option): option is SelectOption => option !== undefined)\n    .map((option) => option.value)\n  model.value = props.multiple ? values : (values[0] ?? '')\n}\n\n// @core\n// A form reset restores the value the field was created with. The browser resets the hidden\n// `<select>` after the event, so it is rewritten on the next task.\nlet initial: ItemValue | ItemValue[] = ''\nlet formEl: HTMLFormElement | null = null\n\nfunction onFormReset() {\n  model.value = Array.isArray(initial) ? [...initial] : initial\n  nativeInvalid.value = false\n  setTimeout(syncNative)\n}\n\nonMounted(() => {\n  initial = Array.isArray(model.value) ? [...model.value] : model.value\n  syncNative()\n  formEl = nativeEl.value?.form ?? null\n  formEl?.addEventListener('reset', onFormReset)\n})\n\nonBeforeUnmount(() => formEl?.removeEventListener('reset', onFormReset))\n\ndefineExpose({\n  /** Moves the focus to the field. */\n  focus: (options?: FocusOptions) => triggerEl.value?.focus(options),\n  /** The button that acts as the combobox. */\n  el: triggerEl,\n})\n</script>\n\n<template>\n  <div\n    ref=\"rootEl\"\n    class=\"v-select\"\n    :class=\"rootClass\"\n    :style=\"[{ '--chip-height': chipScale.height }, rootStyle]\"\n    :data-size=\"resolvedSize\"\n    :data-multiple=\"multiple ? '' : undefined\"\n    :data-open=\"open ? '' : undefined\"\n    @focusin=\"focused = true\"\n    @focusout=\"onFocusout\"\n  >\n    <div class=\"v-select-control\" @mousedown=\"onControlMousedown\" @click=\"onControlClick\">\n      <VInput\n        class=\"v-input-end-pinned\"\n        :class=\"{ 'v-input-chips': multiple && !textDisplay }\"\n        v-bind=\"fieldAttrs\"\n        :label=\"label\"\n        :hint=\"hint\"\n        :error=\"error\"\n        :required=\"required\"\n        :hide-label=\"hideLabel\"\n        :label-position=\"labelPosition\"\n        :size=\"resolvedSize\"\n        :compact=\"resolvedCompact\"\n        :invalid=\"invalid || nativeInvalid\"\n        :disabled=\"resolvedDisabled\"\n        :readonly=\"readonly\"\n        :icon-start=\"iconStart\"\n        :icon-start-label=\"iconStartLabel\"\n        :clearable=\"clearable\"\n        :clear-visible=\"clearVisible\"\n        :clear-label=\"resolvedClearLabel\"\n        @clear=\"onClear\"\n      >\n        <template v-if=\"multiple || $slots.start\" #start>\n          <VListboxValues\n            v-if=\"multiple\"\n            :values=\"selectedValues\"\n            :display=\"display\"\n            :max=\"max\"\n            :collapsed=\"collapsed\"\n            :overflow-text=\"overflowText\"\n            :scale=\"chipScale\"\n            :removable=\"!readonly\"\n            :disabled=\"resolvedDisabled\"\n            hide-text\n            :label-of=\"labelOf\"\n            :option-of=\"optionOf\"\n            @remove=\"removeValue\"\n          >\n            <template v-if=\"$slots.chip\" #chip=\"chipProps\">\n              <slot name=\"chip\" v-bind=\"chipProps\" />\n            </template>\n            <template v-if=\"$slots.overflow\" #overflow=\"overflowProps\">\n              <slot name=\"overflow\" v-bind=\"overflowProps\" />\n            </template>\n          </VListboxValues>\n          <slot name=\"start\" />\n        </template>\n\n        <template #control=\"{ controlProps }\">\n          <button\n            ref=\"triggerEl\"\n            type=\"button\"\n            role=\"combobox\"\n            :aria-expanded=\"open\"\n            :aria-controls=\"optionsId\"\n            :aria-activedescendant=\"open && activeIndex >= 0 ? optionId(activeIndex) : undefined\"\n            :aria-required=\"required || undefined\"\n            :aria-readonly=\"readonly || undefined\"\n            v-bind=\"controlProps\"\n            class=\"v-select-trigger\"\n            @click=\"togglePanel\"\n            @keydown=\"onKeydown\"\n          >\n            <span\n              v-if=\"valueText\"\n              class=\"v-select-value\"\n              :class=\"{ 'v-visually-hidden': multiple }\"\n              >{{ valueText }}</span\n            >\n            <span v-else-if=\"placeholder\" class=\"v-select-placeholder\">{{ placeholder }}</span>\n          </button>\n          <!--\n            Out of the tab order and hidden from screen readers, it leaves the button as the\n            single stop and the single announcement. Its options mirror the flat list: a form\n            needs no groups.\n          -->\n          <select\n            ref=\"nativeEl\"\n            v-bind=\"nativeAttrs\"\n            class=\"v-select-native v-hidden-input\"\n            tabindex=\"-1\"\n            aria-hidden=\"true\"\n            :multiple=\"multiple || undefined\"\n            :required=\"required || undefined\"\n            :disabled=\"resolvedDisabled || undefined\"\n            @change=\"onNativeChange\"\n            @focus=\"triggerEl?.focus()\"\n            @invalid=\"nativeInvalid = true\"\n          >\n            <option v-if=\"!multiple\" value=\"\" />\n            <option\n              v-for=\"(option, index) in allOptions\"\n              :key=\"index\"\n              :value=\"String(option.value)\"\n              :disabled=\"option.disabled\"\n            >\n              {{ option.label }}\n            </option>\n          </select>\n        </template>\n\n        <template v-if=\"$slots['value-end']\" #value-end><slot name=\"value-end\" /></template>\n\n        <!-- The spinner takes the chevron's place: the field sizes either as an icon. -->\n        <template #end>\n          <VSpinner v-if=\"loading\" class=\"v-select-spinner v-input-icon-end\" :label=\"loadingText\" />\n          <VListboxChevron v-else :icon=\"expandIcon\" :open=\"open\" />\n        </template>\n      </VInput>\n    </div>\n\n    <VListboxPanel\n      :id=\"optionsId\"\n      ref=\"panelRef\"\n      v-model:open=\"open\"\n      anchor=\"--select-anchor\"\n      :placement=\"placement\"\n      class=\"v-select-panel\"\n      :size=\"resolvedSize\"\n      :compact=\"resolvedCompact\"\n      :multiple=\"multiple\"\n      :blocks=\"blocks\"\n      :measure=\"measureRow\"\n      @select=\"choose\"\n      @highlight=\"hover\"\n    >\n      <template v-if=\"$slots.option\" #option=\"slotProps\">\n        <slot name=\"option\" v-bind=\"slotProps\" />\n      </template>\n    </VListboxPanel>\n  </div>\n</template>\n\n<style>\n@layer vectis.components {\n  .v-select {\n    /*\n     * Declared on the root, the common ancestor of the field and the panel; a panel drawn above\n     * the page remains a descendant of it in the document.\n     */\n    anchor-scope: --select-anchor;\n    width: 100%;\n    font-family: var(--vectis-text-family);\n  }\n\n  .v-select-control {\n    display: block;\n  }\n\n  /* The panel opens against the box of the field, not against its label and hint. */\n  .v-select-control .v-input-field {\n    anchor-name: --select-anchor;\n  }\n\n  .v-select-panel {\n    max-block-size: var(--vectis-control-size-select-list-max-block);\n  }\n\n  /*\n   * VInput's `.v-input-control` gives the button the input's box: it fills the field and draws\n   * no border of its own, the field drawing the focus around it.\n   */\n  .v-select-trigger {\n    display: flex;\n    align-items: center;\n    text-align: start;\n    cursor: pointer;\n  }\n\n  /*\n   * Beside chips the button takes what is left of the last row, down to nothing, rather than\n   * wrapping onto a row of its own.\n   */\n  .v-select[data-multiple] .v-select-trigger {\n    flex: 1 1 0;\n  }\n\n  .v-select-value,\n  .v-select-placeholder {\n    min-width: 0;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  .v-select-placeholder {\n    color: var(--vectis-color-text-subtle);\n  }\n\n  .v-select-spinner {\n    color: var(--vectis-color-text-muted);\n  }\n\n  /*\n   * An unbroken line has the whole of its text as its min-content width; without this, a grid\n   * track or a flex row sized `auto` widens to fit every label and the ellipsis never shows.\n   */\n  .v-select:has(.v-listbox-text) {\n    min-inline-size: 0;\n  }\n}\n</style>\n"],"mappings":""}