@hina-ui/vue 1.4.0 → 1.6.0

package/src/components/tree/types.ts

@@ -0,0 +1,20 @@
+export type TreeValue = string | number
+
+export interface TreeNode {
+  value: TreeValue
+  label: string
+  description?: string
+  disabled?: boolean
+  children?: TreeNode[]
+}
+
+export interface TreeNodeState {
+  selected: boolean
+  indeterminate: boolean
+  disabled: boolean
+}
+
+export interface TreeNodeSlot extends TreeNodeState {
+  node: TreeNode
+  expanded: boolean
+}

package/src/components/tree/utils/selection.ts

@@ -0,0 +1,78 @@
+import type { TreeNode, TreeNodeState, TreeValue } from '../types'
+
+interface Entry {
+  node: TreeNode
+  parent?: TreeValue
+  children: TreeValue[]
+  disabled: boolean
+}
+
+export interface TreeIndex {
+  roots: TreeValue[]
+  entries: Map<TreeValue, Entry>
+}
+
+export function indexTree(nodes: TreeNode[]): TreeIndex {
+  const entries = new Map<TreeValue, Entry>()
+  function visit(node: TreeNode, parent?: TreeValue, disabled = false) {
+    const entry = {
+      node,
+      parent,
+      disabled: disabled || !!node.disabled,
+      children: node.children?.map(child => child.value) ?? [],
+    }
+    entries.set(node.value, entry)
+    node.children?.forEach(child => visit(child, node.value, entry.disabled))
+  }
+  nodes.forEach(node => visit(node))
+  return { roots: nodes.map(node => node.value), entries }
+}
+
+export function checkedState(tree: TreeIndex, values: TreeValue[]) {
+  const checked = new Set(values)
+  const states = new Map<TreeValue, TreeNodeState>()
+  function visit(value: TreeValue, inherited = false): TreeNodeState {
+    const entry = tree.entries.get(value)!
+    const own = checked.has(value) || (!entry.disabled && inherited)
+    const children = entry.children.map(child => visit(child, !entry.disabled && own))
+    const enabled = children.filter(child => !child.disabled)
+    const selected =
+      entry.disabled || enabled.length === 0 ? own : enabled.every(child => child.selected)
+    const indeterminate =
+      !entry.disabled && !selected && enabled.some(child => child.selected || child.indeterminate)
+    const state = { selected, indeterminate, disabled: entry.disabled }
+    states.set(value, state)
+    return state
+  }
+  tree.roots.forEach(value => visit(value))
+  return states
+}
+
+export function toggleChecked(tree: TreeIndex, values: TreeValue[], value: TreeValue): TreeValue[] {
+  const entry = tree.entries.get(value)
+  if (!entry || entry.disabled) return values
+  const states = checkedState(tree, values)
+  const checked = new Set(values.filter(value => !tree.entries.has(value)))
+  states.forEach((state, value) => {
+    if (state.selected) checked.add(value)
+  })
+  const selected = !states.get(value)!.selected
+  function visit(value: TreeValue) {
+    const entry = tree.entries.get(value)!
+    if (entry.disabled) return
+    if (selected) checked.add(value)
+    else checked.delete(value)
+    entry.children.forEach(visit)
+  }
+  visit(value)
+  let parent = entry.parent
+  while (parent !== undefined) {
+    checked.delete(parent)
+    parent = tree.entries.get(parent)!.parent
+  }
+  const next = checkedState(tree, [...checked])
+  return [
+    ...[...checked].filter(value => !tree.entries.has(value)),
+    ...[...tree.entries.keys()].filter(value => next.get(value)!.selected),
+  ]
+}

package/src/index.ts

@@ -62,6 +62,8 @@ export { default as CommandPalette } from './components/command-palette/CommandP
 export type { CommandItem, CommandGroup, CommandItems } from './components/command-palette/types'
 export { default as Listbox } from './components/listbox/Listbox.vue'
 export type { ListboxVariants } from './components/listbox/listbox.variants'
+export { default as Tree } from './components/tree/Tree.vue'
+export type { TreeNode, TreeNodeSlot, TreeValue } from './components/tree/types'
 export { default as TreeSelect } from './components/tree-select/TreeSelect.vue'
 export type { TreeSelectNode } from './components/tree-select/types'
 export { default as Checkbox } from './components/checkbox/Checkbox.vue'
@@ -197,6 +199,7 @@ export { default as AccordionTrigger } from './components/accordion/AccordionTri
 export { default as AccordionContent } from './components/accordion/AccordionContent.vue'
 export { default as NavLink } from './components/nav-link/NavLink.vue'
 export { default as Sidebar } from './components/sidebar/Sidebar.vue'
+export { default as SidebarLabel } from './components/sidebar/SidebarLabel.vue'
 export { default as SidebarGroup } from './components/sidebar/SidebarGroup.vue'
 export { default as AppShell } from './components/app-shell/AppShell.vue'
 export { default as Page } from './components/page/Page.vue'
@@ -214,6 +217,7 @@ export { default as TooltipProvider } from './components/tooltip/TooltipProvider
 export { default as Tooltip } from './components/tooltip/Tooltip.vue'
 export { vTooltip } from './components/tooltip/directive'
 export type { TooltipDirectiveOptions, TooltipDirectiveValue } from './components/tooltip/types'
+export type { OverlayAnchor, OverlayPositionStrategy } from './lib/overlay-anchor'
 export { default as Popover } from './components/popover/Popover.vue'
 export { default as DropdownMenu } from './components/dropdown-menu/DropdownMenu.vue'
 export { default as DropdownMenuItem } from './components/dropdown-menu/DropdownMenuItem.vue'

package/src/lib/anchored-overlay.ts

@@ -1,8 +1,21 @@
-import { computed, nextTick, shallowRef, watch, type Ref } from 'vue'
+import { computed, nextTick, watch, type Ref } from 'vue'
+import { defaultDocument } from '@vueuse/core'
+import { useOverlayPortal } from './overlay-portal'
+import {
+  overlayAnchorContext,
+  overlayAnchorElement,
+  useOverlayAnchor,
+  type OverlayAnchor,
+  type OverlayPositionStrategy,
+} from './overlay-anchor'
 import { useForwardExpose, type DropdownMenuContentEmits } from 'reka-ui'
 
 export function useAnchoredOverlay(
-  props: { anchor?: HTMLElement | null; modal: boolean },
+  props: {
+    anchor?: OverlayAnchor | null
+    modal: boolean
+    updatePositionStrategy: OverlayPositionStrategy
+  },
   open: Ref<boolean | undefined>,
   emit: <K extends keyof DropdownMenuContentEmits>(
     event: K,
@@ -11,14 +24,6 @@ export function useAnchoredOverlay(
   openAutoFocus?: (event: Event) => void,
 ) {
   const { forwardRef: trigger, currentElement: triggerElement } = useForwardExpose()
-  const retainedAnchor = shallowRef<HTMLElement>()
-  const reference = computed(
-    () =>
-      props.anchor ??
-      (open.value
-        ? (triggerElement.value ?? retainedAnchor.value)
-        : (retainedAnchor.value ?? triggerElement.value)),
-  )
   const visible = computed({
     get: () => !!open.value && !!(props.anchor || triggerElement.value),
     set: value => {
@@ -26,12 +31,12 @@ export function useAnchoredOverlay(
     },
   })
 
-  watch(
-    () => props.anchor,
-    anchor => {
-      if (anchor) retainedAnchor.value = anchor
-    },
-    { immediate: true, flush: 'sync' },
+  const { content, present } = useOverlayPortal(visible)
+  const reference = useOverlayAnchor(
+    () => props.anchor ?? triggerElement.value,
+    visible,
+    present,
+    () => props.updatePositionStrategy,
   )
 
   let previousFocus: HTMLElement | null = null
@@ -50,7 +55,10 @@ export function useAnchoredOverlay(
     visible,
     active => {
       if (!active) return
-      const document = props.anchor?.ownerDocument ?? triggerElement.value?.ownerDocument
+      const document =
+        overlayAnchorContext(props.anchor)?.ownerDocument ??
+        triggerElement.value?.ownerDocument ??
+        defaultDocument
       previousFocus = document?.activeElement as HTMLElement | null
       interactedOutside = false
     },
@@ -73,12 +81,11 @@ export function useAnchoredOverlay(
         (active === panel.ownerDocument.body || panel.contains(active))
       )
         target.focus({ preventScroll: true })
-      if (!visible.value) retainedAnchor.value = undefined
     })
   })
 
   const onInteractOutside = once((event: DropdownMenuContentEmits['interactOutside'][0]) => {
-    if (!triggerElement.value && props.anchor?.contains(event.target as Node))
+    if (!triggerElement.value && overlayAnchorElement(props.anchor)?.contains(event.target as Node))
       event.preventDefault()
     emit('interactOutside', event)
     const original = event.detail.originalEvent
@@ -89,6 +96,8 @@ export function useAnchoredOverlay(
 
   return {
     trigger,
+    content,
+    present,
     reference,
     visible,
     events: {

package/src/lib/overlay-anchor.ts

@@ -0,0 +1,65 @@
+import { shallowRef, watch, type Ref } from 'vue'
+
+export type OverlayAnchor =
+  | HTMLElement
+  | {
+      getBoundingClientRect: () => Pick<
+        DOMRect,
+        'x' | 'y' | 'width' | 'height' | 'top' | 'right' | 'bottom' | 'left'
+      >
+      contextElement?: Element
+    }
+export type OverlayPositionStrategy = 'optimized' | 'always'
+
+export function overlayAnchorElement(anchor?: OverlayAnchor | null): HTMLElement | undefined {
+  return anchor && 'nodeType' in anchor ? anchor : undefined
+}
+
+export function overlayAnchorContext(anchor?: OverlayAnchor | null): Element | undefined {
+  return (
+    overlayAnchorElement(anchor) ??
+    (anchor && 'contextElement' in anchor ? anchor.contextElement : undefined)
+  )
+}
+
+export function useOverlayAnchor(
+  source: () => OverlayAnchor | null | undefined,
+  open: Ref<boolean | undefined>,
+  present: Ref<boolean>,
+  strategy: () => OverlayPositionStrategy,
+) {
+  const reference = shallowRef<Exclude<OverlayAnchor, HTMLElement>>()
+
+  let current: OverlayAnchor | undefined
+
+  watch(
+    [source, open, present, strategy],
+    ([anchor, active, mounted]) => {
+      if (!mounted) {
+        current = undefined
+        reference.value = undefined
+        return
+      }
+      if (!anchor || (!active && reference.value && anchor !== current)) return
+      const contextElement = overlayAnchorContext(anchor)
+      if (contextElement && !contextElement.isConnected) return
+      current = anchor
+      const measure = () => {
+        const { x, y, width, height, top, right, bottom, left } = anchor.getBoundingClientRect()
+        return { x, y, width, height, top, right, bottom, left }
+      }
+      let rect = measure()
+      reference.value = {
+        contextElement,
+        getBoundingClientRect: () => {
+          if (source() === anchor && (!contextElement || contextElement.isConnected))
+            rect = measure()
+          return rect
+        },
+      }
+    },
+    { immediate: true, flush: 'post' },
+  )
+
+  return reference
+}

package/src/lib/scroll-viewport.ts

@@ -0,0 +1,8 @@
+import { computed, shallowRef } from 'vue'
+
+export function useScrollViewport() {
+  const scrollArea = shallowRef<{ viewport?: HTMLElement } | null>(null)
+  const viewport = computed(() => scrollArea.value?.viewport)
+
+  return { scrollArea, viewport }
+}

package/src/locale/en-US.ts

@@ -105,6 +105,7 @@ export const enUS: UiMessages = {
     show: 'Show password',
     hide: 'Hide password',
   },
+  tree: { empty: 'No nodes' },
   treeSelect: {
     search: 'Search nodes',
   },

package/src/locale/index.ts

@@ -36,6 +36,7 @@ function merge(base: UiMessages, patch: PartialUiMessages): UiMessages {
     chip: { ...base.chip, ...patch.chip },
     numberInput: { ...base.numberInput, ...patch.numberInput },
     passwordInput: { ...base.passwordInput, ...patch.passwordInput },
+    tree: { ...base.tree, ...patch.tree },
     treeSelect: { ...base.treeSelect, ...patch.treeSelect },
     combobox: { ...base.combobox, ...patch.combobox },
     slider: { ...base.slider, ...patch.slider },

package/src/locale/types.ts

@@ -102,6 +102,9 @@ export interface UiMessages {
     show: string
     hide: string
   }
+  tree: {
+    empty: string
+  }
   treeSelect: {
     search: string
   }

package/src/locale/zh-CN.ts

@@ -105,6 +105,7 @@ export const zhCN: UiMessages = {
     show: '显示密码',
     hide: '隐藏密码',
   },
+  tree: { empty: '暂无节点' },
   treeSelect: {
     search: '搜索节点',
   },

package/src/styles/motion.css

@@ -616,3 +616,43 @@
     }
   }
 }
+
+@utility hn-sidebar {
+  transition:
+    width var(--hn-duration-base) var(--hn-ease-move),
+    border-color var(--hn-duration-base) var(--hn-ease-move),
+    visibility 0s;
+
+  &[data-state='hidden'] {
+    visibility: hidden;
+    transition:
+      width var(--hn-duration-base) var(--hn-ease-move),
+      border-color var(--hn-duration-base) var(--hn-ease-move),
+      visibility 0s var(--hn-duration-base);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    transition: none;
+  }
+}
+
+@utility hn-sidebar-label {
+  opacity: 1;
+  visibility: visible;
+  transition:
+    opacity var(--hn-duration-fast) var(--hn-ease-enter) var(--hn-duration-fast),
+    visibility 0s var(--hn-duration-fast);
+
+  &[data-collapsed] {
+    opacity: 0;
+    visibility: hidden;
+    pointer-events: none;
+    transition:
+      opacity calc(var(--hn-duration-fast) / 2) var(--hn-ease-exit),
+      visibility 0s calc(var(--hn-duration-fast) / 2);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    transition: none;
+  }
+}