fds-vue-core 2.0.88 → 2.1.0

package/src/components/FdsTreeView/TreeNode.vue

@@ -0,0 +1,383 @@
+<script setup lang="ts">
+import { computed, inject, nextTick, reactive, ref, watch } from 'vue'
+import FdsButtonIcon from '@/components/Buttons/FdsButtonIcon/FdsButtonIcon.vue'
+import FdsCheckbox from '@/components/Form/FdsCheckbox/FdsCheckbox.vue'
+import FdsRadio from '@/components/Form/FdsRadio/FdsRadio.vue'
+import type { FdsTreeViewProps } from './types'
+import useTreeState from './useTreeState'
+import { getTitleFromProperties } from './utils'
+
+type Props<T = Record<string, unknown>> = FdsTreeViewProps<T>
+
+const props = withDefaults(defineProps<Props>(), {
+  nodes: () => [],
+  depth: 0,
+  showNodeDescription: false,
+  showChildrenCount: false,
+  expandChildrenOnSelect: false,
+  showIndeterminate: false,
+  expandChildrenOnParentCheck: false,
+  expandAllChildrenOnParentCheck: true,
+  showIndeterminateOnlyOnChildrenSelection: false,
+  searchEnabled: false,
+  searchExpandNodes: false,
+  horizontalScroll: false,
+  searchMatchParams: () => ['title', 'nodeId'],
+  searchHighlighting: false,
+})
+
+defineOptions({
+  name: 'TreeNode',
+})
+
+const injectedTreeState = inject<ReturnType<typeof useTreeState> | null>('treeState', null)
+const treeState = injectedTreeState!
+const expandedNodes = treeState?.expandedNodes ?? reactive(new Set())
+
+const childrenToggleAriaLabel = (title: string) => {
+  const hasChildren = hasChildrenNodes.value
+  const isExpanded = expandedNodes.has(props.nodeId)
+  if (hasChildren && isExpanded) {
+    return `Fäll ihop ${title}`
+  }
+  return `Fäll ut ${title}`
+}
+
+const hasChildrenNodes = computed(() => {
+  const nodesToCheck = props.searchEnabled && treeState?.searchTerm?.value ? filteredNodes.value : props.nodes
+  return Array.isArray(nodesToCheck) && nodesToCheck.length > 0
+})
+
+const indentValue = props.depth * props.indentation
+
+const indent = computed(() => ({
+  flexDirection: 'row' as const,
+  alignItems: 'center' as const,
+  paddingLeft: `${indentValue + (hasChildrenNodes.value ? 0 : 4)}px`,
+}))
+
+const filteredNodes = computed(() => {
+  const t = String(treeState?.searchTerm?.value || '').trim()
+  if (!props.searchEnabled || !t || t.length < (treeState?.triggerLength ?? 1)) {
+    return props.nodes
+  }
+  return treeState.filterNodes(props.nodes, t, props.searchMatchParams)
+})
+
+const trimmedSearchTerm = computed(() => String(treeState?.searchTerm?.value || '').trim())
+const meetsSearchTrigger = computed(() => trimmedSearchTerm.value.length >= (treeState?.triggerLength ?? 1))
+const isSearchActive = computed(() => props.searchEnabled && meetsSearchTrigger.value)
+const shouldHighlightSearch = computed(() => props.searchHighlighting && isSearchActive.value)
+const childCount = computed(() => {
+  if (!props.showChildrenCount || !hasChildrenNodes.value) return null
+  return isSearchActive.value ? (filteredNodes.value?.length ?? 0) : props.nodes.length
+})
+
+// Auto-expand current node if search is active and it has matching children
+watch(
+  () => ({
+    enabled: props.searchEnabled,
+    expandOnSearch: props.searchExpandNodes,
+    term: treeState?.searchTerm?.value,
+    count: (filteredNodes.value || []).length,
+  }),
+  ({ enabled, expandOnSearch, term, count }) => {
+    if (!enabled || !expandOnSearch) return
+    const t = String(term || '').trim()
+    if (!t || t.length < (treeState?.triggerLength ?? 1)) return
+    if (typeof count === 'number' && count > 0) {
+      expandedNodes.add(props.nodeId)
+    }
+  },
+)
+
+const isOpen = ref(false)
+const triggerRef = ref<HTMLElement | null>(null)
+const popoverPanelRef = ref<HTMLElement | null>(null)
+const popoverCoords = reactive({ bottom: 0, right: 0, left: 0, top: 0 })
+
+const popoverWidth = 327
+const popoverHeight = 80
+
+const computePopoverCoords = () => {
+  const componentInstance = triggerRef.value
+  if (!componentInstance) return
+  // Get the actual DOM element from the Vue component instance
+  const triggerEl = '$el' in componentInstance ? (componentInstance as { $el: HTMLElement }).$el : componentInstance
+  if (!(triggerEl instanceof HTMLElement)) return
+  const rect = triggerEl.getBoundingClientRect()
+  popoverCoords.bottom = Math.round(rect.bottom)
+  popoverCoords.right = Math.round(rect.right)
+  popoverCoords.left = Math.round(rect.left)
+  popoverCoords.top = Math.round(rect.top)
+}
+
+const openPopover = async () => {
+  computePopoverCoords()
+  isOpen.value = true
+  window.addEventListener('scroll', computePopoverCoords, true)
+  window.addEventListener('resize', computePopoverCoords)
+  document.addEventListener('pointerdown', handleGlobalPointerDown, { passive: true })
+  document.addEventListener('keydown', handleGlobalKeydown)
+
+  // Focus first radio inside the popover for immediate keyboard use
+  await nextTick()
+  const firstRadio = popoverPanelRef.value?.querySelector('input[type="radio"]') as HTMLInputElement | null
+  firstRadio?.focus()
+}
+
+const closePopover = () => {
+  isOpen.value = false
+}
+
+const onAfterPopoverLeave = () => {
+  window.removeEventListener('scroll', computePopoverCoords, true)
+  window.removeEventListener('resize', computePopoverCoords)
+  document.removeEventListener('pointerdown', handleGlobalPointerDown)
+  document.removeEventListener('keydown', handleGlobalKeydown)
+}
+
+const togglePopover = () => {
+  if (isOpen.value) closePopover()
+  else openPopover()
+}
+
+const handleGlobalPointerDown = (event: PointerEvent) => {
+  if (!isOpen.value) return
+
+  const hasComposedPath = (ev: Event): ev is Event & { composedPath: () => EventTarget[] } =>
+    typeof (ev as { composedPath?: () => EventTarget[] }).composedPath === 'function'
+
+  const clickedPath = hasComposedPath(event) ? event.composedPath() : ([] as EventTarget[])
+  const contains = (el: HTMLElement | null) => (el ? clickedPath.includes(el) : false)
+
+  // Extract DOM element from component instance if needed
+  const getTriggerElement = (): HTMLElement | null => {
+    const instance = triggerRef.value
+    if (!instance) return null
+    return '$el' in instance
+      ? (instance as { $el: HTMLElement }).$el
+      : instance instanceof HTMLElement
+        ? instance
+        : null
+  }
+
+  if (!contains(getTriggerElement()) && !contains(popoverPanelRef.value)) {
+    closePopover()
+  }
+}
+
+const handleGlobalKeydown = (event: KeyboardEvent) => {
+  if (event.key === 'Escape' && isOpen.value) {
+    closePopover()
+  }
+}
+
+const onPanelFocusOut = (event: FocusEvent) => {
+  const next = event.relatedTarget as HTMLElement | null
+  const panelEl = popoverPanelRef.value
+  if (!panelEl) return
+
+  const triggerVal = triggerRef.value as unknown
+  const triggerEl =
+    triggerVal && typeof triggerVal === 'object' && '$el' in (triggerVal as Record<string, unknown>)
+      ? (triggerVal as { $el: HTMLElement }).$el
+      : (triggerVal as HTMLElement | null)
+
+  const isButton = next?.tagName === 'BUTTON' && next?.id !== 'tree-popover-close-button'
+  const isInsidePanel = !!next && panelEl.contains(next)
+  const isTrigger = !!next && !!triggerEl && triggerEl.contains(next)
+
+  const leavingPanel = !next || (!isInsidePanel && !isTrigger) || isButton
+  if (leavingPanel) closePopover()
+}
+
+const options = [
+  { label: props.popoverLabels?.parentAndChildren, value: 'parent_and_children' },
+  { label: props.popoverLabels?.parent, value: 'parent' },
+]
+
+const currentOption = computed(() => {
+  if (treeState?.isParentAndAllChildrenSelected(props.nodeId)) return 'parent_and_children'
+  if (treeState?.isParentOnlySelected(props.nodeId)) return 'parent'
+  return ''
+})
+
+// Ref for v-model on radio group - matches FdsRadio v-model type (string | number)
+const selectedOption = ref<string | number>(currentOption.value)
+
+// Sync selectedOption when currentOption changes externally
+watch(
+  currentOption,
+  (newValue) => {
+    selectedOption.value = newValue
+  },
+  { immediate: true },
+)
+
+// Watch selectedOption to handle changes
+watch(selectedOption, (newValue) => {
+  if (newValue) {
+    handleOptionClick(newValue as (typeof options)[number]['value'])
+  }
+})
+
+const handleOptionClick = (option: (typeof options)[number]['value']) => {
+  if (option === 'parent_and_children') {
+    treeState?.selectNodeAndAllChildren(props.nodeId)
+  } else if (option === 'parent') {
+    treeState?.deselectChildrenOnly(props.nodeId)
+  }
+  closePopover()
+}
+</script>
+
+<template>
+  <div :class="props?.style?.container">
+    <div
+      :style="indent"
+      :class="'pt-2 pb-2'"
+    >
+      <div class="flex items-start">
+        <FdsButtonIcon
+          v-if="hasChildrenNodes"
+          @click="treeState?.toggleExpandNode(props.nodeId)"
+          :ariaLabel="props.title ? childrenToggleAriaLabel(props.title) : undefined"
+          :icon="
+            treeState?.getNodeIcon(props.nodeId, props.nodeExpandIcon, props.nodeCollapseIcon) ?? props.nodeExpandIcon
+          "
+          :size="24"
+          class="fill-blue-500 mr-3 items-center"
+        />
+        <div
+          v-if="!hasChildrenNodes"
+          :style="{ minWidth: `${indentation}px` }"
+        />
+        <div class="flex-1 flex">
+          <FdsCheckbox
+            :id="`checkbox-${props.nodeId}`"
+            :checked="treeState?.isNodeSelected(props.nodeId)"
+            :indeterminate="showIndeterminate && (treeState?.isNodeIndeterminateById(props.nodeId) ?? false)"
+            @change="treeState?.toggleSelectNode(props.nodeId, props.title, props.data)"
+          >
+            <span>
+              <span
+                v-if="shouldHighlightSearch && title"
+                v-html="treeState?.highlightText(title, treeState?.searchTerm?.value)"
+              />
+              <span v-else>{{ title }}</span>
+            </span>
+            <span v-if="childCount !== null"> (+{{ childCount }})</span>
+          </FdsCheckbox>
+        </div>
+        <div
+          class="items-center max-h-[28px]"
+          v-if="
+            treeState?.isParentOrChildrenSelected(props.nodeId) &&
+            !(treeState?.isNodeIndeterminateById(props.nodeId) ?? false)
+          "
+        >
+          <FdsButtonIcon
+            ref="triggerRef"
+            icon="more"
+            :size="24"
+            @click="togglePopover"
+            :ariaLabel="`Fler val för ${title}`"
+            class="items-center"
+          />
+          <!-- <teleport to="body"> -->
+          <Transition
+            enter-active-class="transition-opacity duration-200 ease-in-out"
+            enter-from-class="opacity-0"
+            enter-to-class="opacity-100"
+            leave-active-class="transition-opacity duration-500 ease-in-out"
+            leave-from-class="opacity-100"
+            leave-to-class="opacity-0"
+            @after-leave="onAfterPopoverLeave"
+          >
+            <div
+              v-if="isOpen"
+              class="fixed z-9999"
+              :style="{
+                top: popoverCoords.top + 'px',
+                left: popoverCoords.right - popoverWidth - (popoverCoords.right - popoverCoords.left) + 'px',
+              }"
+            >
+              <div
+                ref="popoverPanelRef"
+                class="bg-white border border-blue-500 rounded-md p-4 shadow-lg flex flex-row justify-between items-start gap-3"
+                :style="{
+                  width: popoverWidth + 'px',
+                  minHeight: popoverHeight + 'px',
+                }"
+                @click.stop
+                @focusout="onPanelFocusOut"
+              >
+                <div class="flex flex-col gap-2">
+                  <div
+                    v-for="option in options"
+                    :key="option.value"
+                    @click="
+                      (e) => {
+                        if ((e.target as HTMLElement).tagName !== 'INPUT') {
+                          handleOptionClick(option.value)
+                        }
+                      }
+                    "
+                    class="cursor-pointer"
+                  >
+                    <FdsRadio
+                      v-model="selectedOption"
+                      :id="`tree-popover-${props.nodeId}-${option.value}`"
+                      :name="`tree-popover-${props.nodeId}`"
+                      :value="option.value"
+                      @blur="closePopover"
+                      :label="option.label"
+                    />
+                  </div>
+                </div>
+                <FdsButtonIcon
+                  icon="cross"
+                  id="tree-popover-close-button"
+                  :size="24"
+                  @click="closePopover()"
+                  class="fill-blue-500"
+                  ariaLabel="Stäng"
+                />
+              </div>
+            </div>
+          </Transition>
+          <!-- </teleport> -->
+        </div>
+      </div>
+    </div>
+
+    <div v-if="expandedNodes.has(props.nodeId)">
+      <TreeNode
+        v-for="child in filteredNodes"
+        :key="child.nodeId"
+        :nodes="child.children || []"
+        :title="getTitleFromProperties(child, props.titleTemplate)"
+        :nodeId="child.nodeId"
+        :data="child.data"
+        :depth="props.depth + 1"
+        :indentation="props.indentation"
+        :nodeExpandIcon="props.nodeExpandIcon"
+        :nodeCollapseIcon="props.nodeCollapseIcon"
+        :showNodeDescription="showNodeDescription"
+        :showChildrenCount="showChildrenCount"
+        :expandChildrenOnSelect="expandChildrenOnSelect"
+        :showIndeterminate="showIndeterminate"
+        :showIndeterminateOnlyOnChildrenSelection="showIndeterminateOnlyOnChildrenSelection"
+        :expandChildrenOnParentCheck="expandChildrenOnParentCheck"
+        :expandAllChildrenOnParentCheck="expandAllChildrenOnParentCheck"
+        :searchEnabled="searchEnabled"
+        :searchExpandNodes="searchExpandNodes"
+        :searchMatchParams="searchMatchParams"
+        :searchHighlighting="searchHighlighting"
+        :titleTemplate="props.titleTemplate"
+        :popoverLabels="props.popoverLabels"
+      />
+    </div>
+  </div>
+</template>

package/src/components/FdsTreeView/types.ts

@@ -0,0 +1,141 @@
+import type { FdsIconName } from '@/components/FdsIcon/types'
+
+/**
+ * Represents a single node in the tree structure
+ * @template T - The type of data associated with the node
+ */
+export interface FdsTreeNode<T = Record<string, unknown>> {
+  /** Unique identifier for the node */
+  nodeId: string
+  /** Display title for the node */
+  title?: string
+  /** Child nodes of this node */
+  children?: FdsTreeNode<T>[]
+  /** Optional data object associated with the node */
+  data?: T
+}
+
+/**
+ * Array of tree nodes
+ */
+export type FdsTreeNodeArray = FdsTreeNode<Record<string, unknown>>[]
+
+/**
+ * Single tree node item
+ */
+export type FdsTreeNodeItem = FdsTreeNode<Record<string, unknown>>
+
+/**
+ * Minimal node shape used for selected nodes array
+ */
+export type FdsNodeShape<T = Record<string, unknown>> = Pick<FdsTreeNode<T>, 'nodeId' | 'title' | 'data' | 'children'>
+
+/**
+ * Styles for the tree view
+ */
+export interface FdsTreeViewStyles {
+  /** Styles for the outer container */
+  container?: string
+}
+
+/**
+ * Props for the FdsTreeView component
+ * @template T - The type of data associated with tree nodes
+ */
+export interface FdsTreeViewProps<T = Record<string, unknown>> {
+  /** The tree data structure containing nodes and their children */
+  nodes: FdsTreeNode<T>[]
+  /** The current depth level in the tree (used internally for indentation) */
+  depth?: number
+  /** Icon name to display when a node is collapsed */
+  nodeExpandIcon: FdsIconName
+  /** Icon name to display when a node is expanded */
+  nodeCollapseIcon: FdsIconName
+  /** Number of pixels to indent each level of the tree */
+  indentation: number
+  /** Unique identifier for the current node */
+  nodeId: string
+  /** Optional data object associated with the node */
+  data?: T
+  /** Display title for the node */
+  title?: string
+  /** Show the node description (nodeId) below the title */
+  showNodeDescription?: boolean
+  /** Show the count of children next to the node title */
+  showChildrenCount?: boolean
+  /** Expand children when a node is selected */
+  expandChildrenOnSelect?: boolean
+  /** Show indeterminate state for partially selected nodes */
+  showIndeterminate?: boolean
+  /** Only show indeterminate when parent is not selected but children are */
+  showIndeterminateOnlyOnChildrenSelection?: boolean
+  /** Expand children when parent is checked */
+  expandChildrenOnParentCheck?: boolean
+  /** Expand all children recursively when parent is checked */
+  expandAllChildrenOnParentCheck?: boolean
+  /** Enable horizontal scroll for the tree view */
+  horizontalScroll?: boolean
+  /** Show the count of nodes matching the search term */
+  popoverLabels?: {
+    parentAndChildren: string
+    parent: string
+  }
+  /** Styles for the tree view */
+  style?: FdsTreeViewStyles
+  /** Enable search functionality */
+  searchEnabled?: boolean
+  /** Label for the search input */
+  searchLabel?: string
+  /** Parameters to match when searching -
+   * Defaults to ['title', 'nodeId']
+   * */
+  searchMatchParams?: string[]
+  /** The length of the search before it starts filtering nodes */
+  searchInputTriggerLength?: number
+  /** Expand nodes automatically when searching */
+  searchExpandNodes?: boolean
+  /** Highlight (bold text) the search term in the node title and nodeId */
+  searchHighlighting?: boolean
+
+  /** Title for the search result no matches */
+  searchResultNoMatchesTitle?: string
+  /** Body for the search result no matches */
+  searchResultNoMatchesBody?: string
+  /** Send a string with ${count} to display the count of nodes matching the search term
+   * Example: 'Found ${filteredNodes} of ${totalNodes} organizations'
+   */
+  searchCountTemplate?: string
+  /** Send a string with ${count} to display the count of nodes matching the search term
+   * Example: '${totalNodes} organizations'
+   */
+  searchCountTemplateUnfiltered?: string
+  /** Template for the node title - You can pass in a template string with '${title} (${nodeId})'
+   * for example to display the title and nodeId in the node title
+   */
+  titleTemplate?: string
+
+  /** Get the height of the search container */
+  getSearchContainerHeight?: () => number | undefined
+}
+
+/**
+ * Options for tree state configuration
+ * Picks relevant properties from FdsTreeViewProps
+ */
+export type TreeStateOptions = Pick<
+  FdsTreeViewProps,
+  | 'expandChildrenOnParentCheck'
+  | 'expandAllChildrenOnParentCheck'
+  | 'showIndeterminateOnlyOnChildrenSelection'
+  | 'searchExpandNodes'
+  | 'titleTemplate'
+>
+
+/** Wrapper props used by FdsTreeView.vue */
+export type WrapperProps<T = Record<string, unknown>> = Omit<
+  FdsTreeViewProps<T>,
+  'nodes' | 'depth' | 'data' | 'nodeId' | 'title'
+> & {
+  data: FdsTreeNode<T>
+  selectedNodes?: FdsNodeShape<T>[]
+}