fds-vue-core 2.0.88 → 2.1.0

package/src/components/FdsTreeView/useTreeState.ts

@@ -0,0 +1,607 @@
+import { computed, reactive, ref, watch } from 'vue'
+import type { FdsTreeNode, FdsTreeNodeArray, FdsTreeNodeItem } from './types'
+import type { FdsIconName } from '@/components/FdsIcon/types'
+import { getTitleFromProperties } from './utils'
+
+interface TreeStateOptions {
+  expandChildrenOnParentCheck?: boolean
+  expandAllChildrenOnParentCheck?: boolean
+  showIndeterminateOnlyOnChildrenSelection?: boolean
+  searchExpandNodes?: boolean
+  titleTemplate?: string
+  searchInputTriggerLength?: number
+  nodes?: FdsTreeNodeArray
+}
+
+const useTreeState = (options: TreeStateOptions = {}) => {
+  /** Default the trigger length to 1 when not provided */
+  const triggerLength = options?.searchInputTriggerLength ?? 1
+  /**
+   * The set of selected nodes
+   */
+  const selectedNodes = reactive<Set<FdsTreeNode['nodeId']>>(new Set())
+  /**
+   * The array of selected node objects
+   */
+  const selectedNodeObjects = reactive<FdsTreeNode[]>([])
+  /**
+   * The set of expanded nodes
+   */
+  const expandedNodes = reactive<Set<FdsTreeNode['nodeId']>>(new Set())
+  /**
+   * The search term for filtering nodes
+   */
+  const searchTerm = ref<string>('')
+
+  /**
+   * If no results are found for the search term
+   */
+  const isEmptySearchResult = ref<boolean>(false)
+
+  // Watch for search term changes to update empty result flag
+  watch(searchTerm, (newTerm) => {
+    if (!newTerm.trim() || newTerm.length < triggerLength) {
+      isEmptySearchResult.value = false
+    } else if (options.nodes && options.nodes.length > 0) {
+      // Check if there are any results for the new search term
+      // The tree structure has a root node with children, so we need to check the root's children
+      const rootNode = options.nodes[0]
+      const nodesToCheck = rootNode?.children || []
+      const filtered = filterNodesRecursive(nodesToCheck, newTerm, ['title', 'nodeId'])
+      isEmptySearchResult.value = filtered.length === 0
+    }
+  })
+
+  /**
+   * Clears all selected nodes. Can be used to reset the selections to the initial state.
+   */
+  const clearAllSelectedNodes = () => {
+    selectedNodes.clear()
+    selectedNodeObjects.length = 0
+  }
+
+  /**
+   * Collapses all expanded nodes. Can be used to reset the tree to the initial state.
+   */
+  const collapseAllExpandedNodes = () => expandedNodes.clear()
+
+  /**
+   * Returns true if the node is selected
+   */
+  const isNodeSelected = (nodeId: FdsTreeNode['nodeId']) => selectedNodes.has(nodeId)
+
+  /**
+   * Returns true if the node is expanded
+   */
+  const isNodeExpanded = (nodeId: FdsTreeNode['nodeId']) => expandedNodes.has(nodeId)
+
+  /**
+   * Expands the specific node
+   */
+  const expandNode = (nodeId: FdsTreeNode['nodeId']) => expandedNodes.add(nodeId)
+
+  /**
+   * Collapses the specific node
+   */
+  const collapseNode = (nodeId: FdsTreeNode['nodeId']) => expandedNodes.delete(nodeId)
+  /**
+   * Selects the specific node and adds it to the selectedNodeObjects array.
+   * Used to access the node object and it's underlying data
+   */
+  const injectNode = (nodeObject: FdsTreeNode) => {
+    // Prevent duplicates
+    if (selectedNodes.has(nodeObject.nodeId)) return
+
+    selectedNodes.add(nodeObject.nodeId)
+    if (!selectedNodeObjects.some((n) => n.nodeId === nodeObject.nodeId)) {
+      selectedNodeObjects.push(nodeObject)
+    }
+  }
+
+  /**
+   * Expands all children of the specific node
+   */
+  const expandAllChildren = (node: FdsTreeNode) => {
+    expandNode(node.nodeId)
+    if (node.children && node.children.length > 0) {
+      node.children.forEach(expandAllChildren)
+    }
+  }
+
+  /**
+   * Selects this node and recursively selects all children nodes
+   */
+  const selectAllChildren = (node: FdsTreeNode) => {
+    // Deselect all children to avoid duplicates
+    if (node.children && node.children.length > 0) {
+      node.children.forEach(deselectNodeAndAllChildren)
+    }
+
+    // Inject the current node
+    injectNode(node)
+
+    if (node.children && node.children.length > 0) {
+      node.children.forEach(selectAllChildren)
+    }
+
+    // Only expand children if the option is enabled
+    if (options.expandChildrenOnParentCheck) {
+      expandAllChildren(node)
+    }
+  }
+
+  /**
+   * Selects this node and recursively selects all children nodes
+   */
+  const selectNodeAndAllChildren = (nodeId: FdsTreeNode['nodeId']) => {
+    const node = findNodeObjectById(nodeId)
+
+    if (!node) return
+
+    // Select the current node
+    injectNode(node)
+
+    // Deselect all children to avoid duplicates
+    if (node.children && node.children.length > 0) {
+      node.children.forEach(selectAllChildren)
+    }
+  }
+
+  /**
+   * Deselects the specific node
+   */
+  const deselectNode = (nodeId: FdsTreeNode['nodeId']) => {
+    selectedNodes.delete(nodeId)
+    const index = selectedNodeObjects.findIndex((node) => node.nodeId === nodeId)
+
+    if (index > -1) {
+      selectedNodeObjects.splice(index, 1)
+    }
+  }
+
+  /**
+   * Deselects this node and recursively deselects all children nodes
+   */
+  const deselectNodeAndAllChildren = (node: FdsTreeNode) => {
+    // Remove the current node
+    deselectNode(node.nodeId)
+
+    // Recursively remove all children
+    if (node.children && node.children.length > 0) {
+      node.children.forEach(deselectNodeAndAllChildren)
+    }
+  }
+
+  /**
+   * Deselects only the children of the specific node
+   */
+  const deselectChildrenOnly = (nodeId: FdsTreeNode['nodeId']) => {
+    const node = findNodeObjectById(nodeId)
+
+    if (!node) return
+
+    // Ensure parent remains selected
+    selectedNodes.add(node.nodeId)
+    if (!selectedNodeObjects.some((n) => n.nodeId === node.nodeId)) {
+      selectedNodeObjects.push(node)
+    }
+
+    // Recursively remove all children
+    if (node.children && node.children.length > 0) {
+      node.children.forEach(deselectNodeAndAllChildren)
+    }
+  }
+
+  /**
+   * Finds a node by ID
+   */
+  const findNodeById = (nodes: FdsTreeNodeArray, nodeId: string): FdsTreeNodeItem | null => {
+    for (const node of nodes) {
+      if (node.nodeId === nodeId) {
+        return node
+      }
+      if (node.children) {
+        const found = findNodeById(node.children, nodeId)
+        if (found) return found
+      }
+    }
+    return null
+  }
+
+  /**
+   * Finds a node by ID
+   */
+  const findNodeObjectById = (nodeId: string): FdsTreeNodeItem | null => {
+    const nodes = Array.isArray(options.nodes) ? options.nodes : []
+    for (const node of nodes) {
+      if (node.nodeId === nodeId) {
+        return node
+      }
+      if (node.children) {
+        const found = findNodeById(node.children, nodeId)
+        if (found) return found
+      }
+    }
+    return null
+  }
+
+  /**
+   * Checks if a node has children
+   */
+  const hasChildrenNodes = (nodes: FdsTreeNodeArray) => nodes.length > 0
+
+  /**
+   * Checks if a parent or it's children are selected
+   */
+  const isParentOrChildrenSelected = (nodeId: FdsTreeNode['nodeId']): boolean => {
+    const node = findNodeObjectById(nodeId)
+
+    if (!node || !hasChildrenNodes(node.children || [])) return false
+
+    return selectedNodes.has(node.nodeId) || isAnyChildSelected(node.children || [])
+  }
+
+  /**
+   * Checks if a parent or it's children are selected
+   */
+  const isParentAndAllChildrenSelected = (nodeId: FdsTreeNode['nodeId']): boolean => {
+    const node = findNodeObjectById(nodeId)
+
+    if (!node) return false
+    // Parent must be selected and all children
+    return selectedNodes.has(node.nodeId) && isEveryChildSelected(node)
+  }
+
+  /**
+   * Checks if a parent or it's children are selected
+   */
+  const isParentOnlySelected = (nodeId: FdsTreeNode['nodeId']): boolean => {
+    const node = findNodeObjectById(nodeId)
+
+    if (!node || !hasChildrenNodes(node.children || [])) return false
+
+    return !isAnyChildSelected(node.children || []) && selectedNodes.has(node.nodeId)
+  }
+
+  /**
+   * Returns true if ALL children of a node are selected
+   */
+  const isEveryChildSelected = (node: FdsTreeNode): boolean => {
+    if (!node.children || node.children.length === 0) return true
+
+    return node.children.every((child) => selectedNodes.has(child.nodeId) && isEveryChildSelected(child))
+  }
+
+  /**
+   * Checks if any child of a node is selected
+   */
+  const isAnyChildSelected = (nodes: FdsTreeNodeArray): boolean => {
+    if (!nodes || nodes.length === 0) return false
+    return nodes.some(
+      (child) => selectedNodes.has(child.nodeId) || (child.children && isAnyChildSelected(child.children)),
+    )
+  }
+
+  /**
+   * Checks if a node is indeterminate (partially selected)
+   */
+  const isNodeIndeterminate = (nodes: FdsTreeNodeArray, parentNodeId?: string): boolean => {
+    if (!hasChildrenNodes(nodes)) return false
+
+    // Check each child's state
+    const childStates = nodes.map((node) => ({
+      isSelected: selectedNodes.has(node.nodeId),
+      isIndeterminate:
+        node.children && node.children.length > 0 ? isNodeIndeterminate(node.children, node.nodeId) : false,
+    }))
+
+    const hasSelected = childStates.some((child: { isSelected: boolean; isIndeterminate: boolean }) => child.isSelected)
+    const hasUnselected = childStates.some(
+      (child: { isSelected: boolean; isIndeterminate: boolean }) => !child.isSelected && !child.isIndeterminate,
+    )
+    const hasIndeterminate = childStates.some(
+      (child: { isSelected: boolean; isIndeterminate: boolean }) => child.isIndeterminate,
+    )
+
+    // If parent is selected, never show indeterminate
+    if (parentNodeId && selectedNodes.has(parentNodeId)) return false
+
+    // Standard behavior: some selected + some unselected, OR any child is indeterminate
+    if (!options.showIndeterminateOnlyOnChildrenSelection) {
+      return (hasSelected && hasUnselected) || hasIndeterminate
+    }
+
+    // Special behavior: any child selected OR any child indeterminate
+    return hasSelected || hasIndeterminate
+  }
+
+  const isNodeIndeterminateById = (nodeId: FdsTreeNode['nodeId']): boolean => {
+    const node = findNodeObjectById(nodeId)
+    if (!node) return false
+    return isNodeIndeterminate(node.children || [], nodeId)
+  }
+
+  /**
+   * Toggles the selection state of the specific node
+   */
+  const toggleSelectNode = (nodeId: string, title?: string, data?: Record<string, unknown>) => {
+    let node = findNodeObjectById(nodeId)
+
+    if (!node && nodeId) {
+      node = {
+        nodeId,
+        title,
+        children: [],
+        data,
+      }
+    }
+
+    if (!node) return
+
+    if (selectedNodes.has(nodeId)) {
+      deselectNodeAndAllChildren(node)
+    } else {
+      selectAllChildren(node)
+
+      if (selectedNodes.has(nodeId) && !expandedNodes.has(nodeId) && options.expandChildrenOnParentCheck) {
+        expandNode(nodeId)
+      }
+    }
+  }
+
+  /**
+   * Toggles the expansion state of the specific node
+   */
+  const toggleExpandNode = (nodeId: FdsTreeNode['nodeId']) => {
+    if (isNodeExpanded(nodeId)) {
+      collapseNode(nodeId)
+    } else {
+      expandNode(nodeId)
+    }
+  }
+
+  /**
+   * Gets the icons for expanded and collapsed nodes
+   */
+  const getNodeIcon = (nodeId: FdsTreeNode['nodeId'], expandIcon: FdsIconName, collapseIcon: FdsIconName) =>
+    isNodeExpanded(nodeId) ? collapseIcon : expandIcon
+
+  /**
+   * Checks if a node matches the search term by searching through specified properties
+   */
+  const nodeMatchesSearch = (node: FdsTreeNode, term: string, searchParams?: string[]): boolean => {
+    if (!term.trim()) return true
+    if (!searchParams || !Array.isArray(searchParams)) return false
+
+    const normalizeForSearch = (value: unknown): string => {
+      const s = String(value ?? '')
+      return s
+        .toLowerCase()
+        .normalize('NFD')
+        .replace(/[\u0300-\u036f]/g, '')
+        .replace(/\s+/g, ' ')
+        .trim()
+    }
+
+    const searchLower = normalizeForSearch(term)
+
+    const getValueByPath = (obj: unknown, path: string): unknown => {
+      if (!obj) return undefined
+      // If data is an array, check each element
+      if (Array.isArray(obj)) {
+        for (const item of obj) {
+          const v = getValueByPath(item as Record<string, unknown>, path)
+          if (v !== undefined && v !== null) return v
+        }
+        return undefined
+      }
+      if (typeof obj !== 'object') return undefined
+      const segments = path.split('.')
+      let current: unknown = obj as Record<string, unknown>
+      for (const seg of segments) {
+        if (current && typeof current === 'object' && seg in (current as Record<string, unknown>)) {
+          current = (current as Record<string, unknown>)[seg]
+        } else {
+          return undefined
+        }
+      }
+      return current
+    }
+
+    for (const rawParam of searchParams) {
+      const param = rawParam.startsWith('data.') ? rawParam.slice(5) : rawParam
+      if (param === 'title') {
+        const renderedTitle = getTitleFromProperties(node, options?.titleTemplate)
+        const titleToMatch = normalizeForSearch(renderedTitle || node.title)
+        if (titleToMatch.includes(searchLower)) return true
+      }
+      if (param === 'nodeId' && normalizeForSearch(node.nodeId).includes(searchLower)) return true
+
+      const dataSource = node.data as unknown
+      if (Array.isArray(dataSource)) {
+        for (const item of dataSource) {
+          const v = getValueByPath(item, param)
+          if (v !== undefined && v !== null) {
+            try {
+              if (normalizeForSearch(v).includes(searchLower)) return true
+            } catch {}
+          }
+        }
+      } else {
+        const value = getValueByPath(dataSource, param)
+        if (value !== undefined && value !== null) {
+          try {
+            if (normalizeForSearch(value).includes(searchLower)) return true
+          } catch {}
+        }
+      }
+    }
+
+    return false
+  }
+
+  /**
+   * Internal recursive filtering function
+   */
+  const filterNodesRecursive = (nodes: FdsTreeNodeArray, term: string, searchParams?: string[]): FdsTreeNodeArray => {
+    if (!term.trim()) return nodes
+
+    const filtered: FdsTreeNodeArray = []
+
+    for (const node of nodes) {
+      const nodeMatches = nodeMatchesSearch(node, term, searchParams)
+      const filteredChildren = node.children ? filterNodesRecursive(node.children, term, searchParams) : []
+
+      // Include node if it matches OR has matching children
+      if (nodeMatches || filteredChildren.length > 0) {
+        filtered.push({
+          ...node,
+          children: filteredChildren.length > 0 ? filteredChildren : node.children,
+        })
+      }
+    }
+
+    return filtered
+  }
+
+  /**
+   * Counts how many nodes match the search term across the provided subtree.
+   */
+  const countMatchingNodesRecursive = (nodes: FdsTreeNodeArray, term: string, searchParams?: string[]): number => {
+    if (!Array.isArray(nodes) || nodes.length === 0) return 0
+    if (!term.trim()) return nodes.length
+
+    let count = 0
+    for (const node of nodes) {
+      if (nodeMatchesSearch(node, term, searchParams)) count += 1
+      if (node.children && node.children.length > 0) {
+        count += countMatchingNodesRecursive(node.children, term, searchParams)
+      }
+    }
+    return count
+  }
+
+  /**
+   * Counts all nodes in the provided subtree.
+   */
+  const countAllNodesRecursive = (nodes: FdsTreeNodeArray): number => {
+    if (!Array.isArray(nodes) || nodes.length === 0) return 0
+    let count = 0
+    for (const node of nodes) {
+      count += 1
+      if (node.children && node.children.length > 0) {
+        count += countAllNodesRecursive(node.children)
+      }
+    }
+    return count
+  }
+
+  /**
+   * Filters nodes based on search term, including children that match
+   */
+  const filterNodes = (nodes: FdsTreeNodeArray, term: string, searchParams?: string[]): FdsTreeNodeArray => {
+    if (!term.trim() || term.length < triggerLength) {
+      return nodes
+    }
+
+    const filtered = filterNodesRecursive(nodes, term, searchParams)
+
+    return filtered
+  }
+
+  /**
+   * Sets the search term
+   */
+  const setSearchTerm = (term: string) => {
+    searchTerm.value = term
+    if (!term.trim() || term.length < triggerLength) {
+      isEmptySearchResult.value = false
+    }
+  }
+
+  /**
+   * Clears the search term
+   */
+  const clearSearch = () => {
+    searchTerm.value = ''
+    isEmptySearchResult.value = false
+  }
+
+  /**
+   * Reactive total count of nodes matching the current search term.
+   * If there is no term, returns total nodes under the root's children.
+   */
+  const filteredMatchCount = computed<number>(() => {
+    const t = String(searchTerm.value || '').trim()
+    const rootNode = Array.isArray(options.nodes) && options.nodes.length > 0 ? options.nodes[0] : null
+    const nodesToCheck = rootNode?.children || []
+    if (!rootNode) return 0
+    if (!t || t.length < triggerLength) {
+      return countAllNodesRecursive(nodesToCheck)
+    }
+    return countMatchingNodesRecursive(nodesToCheck, t, ['title', 'nodeId'])
+  })
+
+  /**
+   * Reactive total node count under the root's children.
+   */
+  const totalNodeCount = computed<number>(() => {
+    const rootNode = Array.isArray(options.nodes) && options.nodes.length > 0 ? options.nodes[0] : null
+    const nodesToCheck = rootNode?.children || []
+    if (!rootNode) return 0
+    return countAllNodesRecursive(nodesToCheck)
+  })
+
+  /**
+   * Returns HTML string with hits from search term wrapped in <strong>.
+   */
+  const highlightText = (text: string | undefined, term: string | undefined): string => {
+    const source = String(text ?? '')
+    const t = String(term ?? '').trim()
+    if (!t) return source
+    try {
+      const re = new RegExp(t.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'), 'ig')
+      return source.replace(re, '<strong>$&</strong>')
+    } catch {
+      return source
+    }
+  }
+
+  return {
+    triggerLength,
+    clearSearch,
+    collapseAllExpandedNodes,
+    collapseNode,
+    deselectNodeAndAllChildren,
+    deselectChildrenOnly,
+    deselectNode,
+    expandAllChildren,
+    expandedNodes,
+    expandNode,
+    filterNodes,
+    getNodeIcon,
+    injectNode,
+    isNodeExpanded,
+    isNodeIndeterminate,
+    isNodeIndeterminateById,
+    isNodeSelected,
+    isParentOrChildrenSelected,
+    isParentAndAllChildrenSelected,
+    highlightText,
+    searchTerm,
+    filteredMatchCount,
+    totalNodeCount,
+    selectAllChildren,
+    selectedNodeObjects,
+    selectedNodes,
+    setSearchTerm,
+    toggleExpandNode,
+    toggleSelectNode,
+    isParentOnlySelected,
+    selectNodeAndAllChildren,
+    clearAllSelectedNodes,
+    isEmptySearchResult,
+  }
+}
+
+export default useTreeState

package/src/components/FdsTreeView/utils.ts

@@ -0,0 +1,65 @@
+import type { FdsTreeNode } from './types'
+
+const getTitleFromProperties = (node: FdsTreeNode, titleTemplate?: string) => {
+  if (!titleTemplate) {
+    return node.title
+  }
+
+  // Extract all occurrences of content inside [[]] in the template string
+  const templateVariables = extractTemplateVariables(titleTemplate)
+
+  // Replace template variables with actual values
+  let result = titleTemplate
+  templateVariables.forEach((variable) => {
+    const value = getNodePropertyValue(node, variable)
+    const regex = new RegExp(`\\[\\[${variable.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')}\\]\\]`, 'g')
+    result = result.replace(regex, value)
+  })
+
+  return result
+}
+
+/**
+ * Extract all occurrences of content inside [[]] in a string
+ * @param template - The template string containing [[]] placeholders
+ * @returns Array of variable names found in the template
+ */
+const extractTemplateVariables = (template: string): string[] => {
+  const regex = /\[\[([^\]]+)\]\]/g
+  const matches: string[] = []
+  let match
+
+  while ((match = regex.exec(template)) !== null) {
+    matches.push(match[1])
+  }
+
+  return matches
+}
+
+/**
+ * Get property value from node object
+ * @param node - The tree node
+ * @param property - The property name to extract
+ * @returns The property value as string
+ */
+const getNodePropertyValue = (node: FdsTreeNode, property: string): string => {
+  // Handle direct properties
+  if (property in node) {
+    const value = node[property as keyof FdsTreeNode]
+    return value ? String(value) : ''
+  }
+
+  // Handle nested data properties
+  if (node.data && typeof node.data === 'object') {
+    const dataRecord = node.data as Record<string, unknown>
+    const dataValue = dataRecord[property]
+    if (dataValue !== undefined && dataValue !== null) {
+      return String(dataValue)
+    }
+  }
+
+  // Return empty string if property not found
+  return ''
+}
+
+export { getTitleFromProperties }