adata-ui 2.1.40-beta.11 → 2.1.40-beta.12

package/components/elements/tree-select/ATreeSelect.vue

@@ -1,30 +1,7 @@
-<template>
-  <div>
-    <ul>
-      <template
-        v-for="node in nestedTree"
-        :key="node.id"
-      >
-        <TreeSelectNodes
-          v-if="!node?.hidden"
-          :node="node"
-          :toggle-expand="toggleExpand"
-          :toggle-checkbox="toggleCheckbox"
-          :type="type"
-          :disabled="isDisabled(node.id)"
-        />
-      </template>
-    </ul>
-  </div>
-</template>
-
 <script lang="ts" setup>
-import { useTreeService } from '#adata-ui/components/elements/tree-select/TreeService.ts'
-import TreeSelectNodes from './components/tree-select-nodes.vue'
-import type { TreeData } from '#adata-ui/components/elements/tree-select/types'
-import type { TreeNestedNode } from '#adata-ui/components/elements/tree-select/types'
-import highlight from '#adata-ui/composables/highlight'
 import { useDebounceFn } from '@vueuse/core'
+import { useTreeService } from '#adata-ui/components/elements/tree-select/TreeService'
+import type { TreeData, TreeViewNode } from '#adata-ui/components/elements/tree-select/types'
 
 interface Props {
   options: TreeData[]
@@ -34,140 +11,147 @@ interface Props {
   disabled?: boolean
   onlyOne?: boolean
   searchText?: string
-  // eslint-disable-next-line vue/require-default-prop
-  asyncSearch?: (keyword: string) => TreeData[]
+  asyncSearch?: (keyword: string) => TreeData[] | Promise<TreeData[]>
   withoutId?: boolean
+  idKey?: string
+  nameKey?: string
+  childrenKey?: string
+  hasChildrenKey?: string
+  lazy?: boolean
+  loadChildren?: (node: TreeViewNode) => TreeData[] | Promise<TreeData[]>
 }
 
 interface Emits {
   (e: 'update:modelValue', item: (string | number)[]): void
 }
 
-const emits = defineEmits<Emits>()
 const props = withDefaults(defineProps<Props>(), {
   type: 'checkbox',
   searchText: '',
   withoutId: false,
   disabled: false,
   onlyOne: false,
+  idKey: 'id',
+  nameKey: 'name',
+  childrenKey: 'children',
+  lazy: false,
 })
+
+const emits = defineEmits<Emits>()
+
 const {
-  nestedTree,
-  tree,
+  nodes,
+  build,
   setState,
-  setExpandableClosed,
-  initTree,
+  applyModel,
   collectSelectedIds,
-  updateNestedTree,
-  searchedData,
-  toggleHiddenNodes,
   reset,
-  toggleExpandableNodes,
-} = useTreeService( props.withoutId )
-const selected = computed({
-  get() {
-    return props.modelValue
-  },
-  set(val) {
-    emits('update:modelValue', val)
-  }
+  toggleExpand,
+  applySearch,
+  clearSearch,
+} = useTreeService({
+  withoutId: props.withoutId,
+  idKey: props.idKey,
+  nameKey: props.nameKey,
+  childrenKey: props.childrenKey,
+  hasChildrenKey: props.hasChildrenKey,
+  lazy: props.lazy,
+  loadChildren: props.loadChildren,
 })
 
-initTree(props.options)
-const toggleExpand = (node) => {
-  if (node.expandable) {
-    setExpandableClosed(node.id, !node.expandableClosed)
-  }
+function emitSelection() {
+  emits('update:modelValue', collectSelectedIds())
 }
 
-const toggleCheckbox = (id, checked) => {
+function toggleCheckbox(id: string | number, checked: boolean) {
   if (props.onlyOne && !checked) {
     reset()
-  } else {
+  }
+  else {
     setState(id, checked ? 'checked' : 'unchecked')
   }
+  emitSelection()
 }
 
-function openFounded(nodes: TreeNestedNode[]) {
-  nodes.forEach((node) => {
-    node.expandableClosed = false
-    node.text = highlight(node.text, props.searchText)
-    if (node.child.length) {
-      openFounded(node.child)
-    }
-  })
+const selected = computed(() => props.modelValue ?? [])
+function isDisabled(id: string | number) {
+  return props.onlyOne ? selected.value.length > 0 && !selected.value.includes(id) : false
 }
 
-function filterOptions(options: any[], search: string) {
+function filterOptions(options: TreeData[], search: string): TreeData[] {
+  const needle = search.toLowerCase()
   return options
     .map((option) => {
-      const matches = option.name.toLowerCase().includes(search.toLowerCase())
-      const matchesWithId = option.id?.toString().toLowerCase().includes(search.toLowerCase())
-      let filteredChildren = []
-
-      if (option.children) {
-        filteredChildren = filterOptions(option.children, search)
-      }
-
-      if (matches || matchesWithId || filteredChildren.length > 0) {
-        return {
-          ...option,
-          children: filteredChildren
-        }
+      const name = String(option[props.nameKey] ?? '').toLowerCase()
+      const id = option[props.idKey] as string | number | undefined
+      const matches = name.includes(needle)
+      const matchesId = id?.toString().toLowerCase().includes(needle)
+      const children = (option[props.childrenKey] as TreeData[] | undefined) ?? []
+      const filteredChildren = children.length ? filterOptions(children, search) : []
+
+      if (matches || matchesId || filteredChildren.length > 0) {
+        return { ...option, [props.childrenKey]: filteredChildren }
       }
-
       return null
     })
-    .filter(Boolean)
+    .filter(Boolean) as TreeData[]
 }
 
 const debouncedSearch = useDebounceFn(async () => {
   if (props.searchText !== '') {
-    if (props?.asyncSearch) {
-      const searchData = await props.asyncSearch(props.searchText)
-      searchedData(searchData, props.searchText)
-    } else {
-      const searchData = filterOptions(props.options, props.searchText)
-      searchedData(searchData, props.searchText)
-    }
-  } else {
-    toggleHiddenNodes(false)
-    toggleExpandableNodes(true)
-    updateNestedTree()
+    const data = props.asyncSearch
+      ? await props.asyncSearch(props.searchText)
+      : filterOptions(props.options, props.searchText)
+    applySearch(data, props.searchText)
+  }
+  else {
+    clearSearch()
   }
 }, 300)
 
-watch(
-  () => props.searchText,
-  (newVal) => debouncedSearch()
-)
+watch(() => props.searchText, () => debouncedSearch())
 
+function initFromOptions() {
+  build(props.options)
+  applyModel(props.modelValue)
+  emitSelection()
+}
 
+build(props.options)
 onMounted(() => {
-  if (props.modelValue && props.modelValue.length) {
-    props.modelValue.forEach((id) => {
-      setState(id, 'checked')
-    })
-  }
-
-  if (props.isSearch) {
-    // openFounded(nestedTree.value)
-  }
+  applyModel(props.modelValue)
+  emitSelection()
 })
+watch(() => props.options, initFromOptions)
 
-const isDisabled = (id: string | number) => {
-  return props.onlyOne ? selected.value.length > 0 && !selected.value.includes(id) : false
+function resetSelection() {
+  reset()
+  emitSelection()
 }
-watch(
-  tree,
-  () => {
-    if (tree.value) {
-      selected.value = collectSelectedIds(tree.value)
-    }
-  },
-  { deep: true }
-)
-defineExpose({
-  reset
-})
+
+defineExpose({ reset: resetSelection })
 </script>
+
+<template>
+  <div>
+    <ul>
+      <template
+        v-for="node in nodes"
+        :key="node.id"
+      >
+        <a-tree-select-node
+          v-if="!node.hidden"
+          :node="node"
+          :toggle-expand="toggleExpand"
+          :toggle-checkbox="toggleCheckbox"
+          :type="type"
+          :disabled="isDisabled(node.id)"
+        >
+          <template v-if="$slots.label" #label="slotProps">
+            <slot name="label" v-bind="slotProps" />
+          </template>
+        </a-tree-select-node>
+      </template>
+    </ul>
+  </div>
+</template>

package/components/elements/tree-select/TreeService.ts

@@ -1,249 +1,184 @@
 import type {
   TreeData,
-  TreeNestedNode,
-  TreeNode,
-  TreeNodeStateEditable
+  TreeNodeState,
+  TreeServiceOptions,
+  TreeViewNode,
 } from '#adata-ui/components/elements/tree-select/types'
 import highlight from '#adata-ui/composables/highlight'
 
-export const useTreeService = ( withoutId?: boolean ) => {
-  const tree = ref<Map<string | number, TreeNode> | null>(null)
-  const nestedTree = ref<TreeNestedNode[]>([])
-  const createdTreeBool = ref(false)
-
-  const initTree = (data: TreeData[]): void => {
-    if (!createdTreeBool.value) {
-      tree.value = generateTree(data, 0)
-      createdTreeBool.value = true
-      updateNestedTree()
-    }
-  }
-
-  const generateTree = (
-    data: TreeData[],
+export const useTreeService = (options: TreeServiceOptions = {}) => {
+  const {
+    withoutId = false,
+    idKey = 'id',
+    nameKey = 'name',
+    childrenKey = 'children',
+    hasChildrenKey,
+    lazy = false,
+    loadChildren,
+  } = options
+
+  const nodes = ref<TreeViewNode[]>([])
+  const nodeMap = new Map<string | number, TreeViewNode>()
+
+  const readId = (item: TreeData) => item[idKey] as string | number
+  const readName = (item: TreeData) => String(item[nameKey] ?? '')
+  const readChildren = (item: TreeData) => (item[childrenKey] as TreeData[] | undefined) ?? []
+
+  const createNode = (
+    item: TreeData,
     level: number,
-    parent: string | number | null = null
-  ): Map<string | number, TreeNode> => {
-    const treeMap = new Map<string | number, TreeNode>()
-    data.forEach((item) => {
-      const id = item.id
-      const child: (string | number)[] = item.children ? item.children.map((child) => child.id) : []
-      treeMap.set(id, {
-        id,
-        name: item.name,
-        level,
-        expandable: child.length > 0,
-        expandableClosed: true,
-        child,
-        parent,
-        state: 'unchecked',
-        hidden: false
-      })
-      if (item.children && item.children.length > 0) {
-        const childTreeMap = generateTree(item.children, level + 1, id)
-        childTreeMap.forEach((value, key) => treeMap.set(key, value))
-      }
+    parent: TreeViewNode | null,
+  ): TreeViewNode => {
+    const id = readId(item)
+    const name = readName(item)
+    const rawChildren = readChildren(item)
+    const baseText = withoutId ? name : `${id} - ${name}`
+    const hasLazyChildren = lazy && !!hasChildrenKey && !!item[hasChildrenKey]
+
+    const node: TreeViewNode = reactive({
+      id,
+      name,
+      baseText,
+      text: baseText,
+      level,
+      state: 'unchecked' as TreeNodeState,
+      expandable: rawChildren.length > 0 || hasLazyChildren,
+      expanded: false,
+      hidden: false,
+      loaded: !(hasLazyChildren && rawChildren.length === 0),
+      loading: false,
+      parent,
+      children: [],
+      raw: markRaw(item),
+    }) as TreeViewNode
+
+    nodeMap.set(id, node)
+    node.children = rawChildren.map(child => createNode(child, level + 1, node))
+    return node
+  }
+
+  const build = (data: TreeData[]): void => {
+    nodeMap.clear()
+    nodes.value = (data ?? []).map(item => createNode(item, 0, null))
+  }
+
+  const getNode = (id: string | number): TreeViewNode | undefined => nodeMap.get(id)
+
+  const setSubtreeState = (node: TreeViewNode, state: TreeNodeState): void => {
+    node.children.forEach((child) => {
+      child.state = state
+      setSubtreeState(child, state)
     })
-    return treeMap
   }
 
-  const updateNestedTree =  (searchText: string = '') => {
-    if (!tree.value) return
-    const nodesFromLevel0: TreeNode[] = getNodesByLevel(0)
-    nestedTree.value = nodesFromLevel0.map((flatNode) => createNestedNode(flatNode))
-    highlightTree(nestedTree.value, searchText)
+  const recomputeAncestors = (node: TreeViewNode): void => {
+    let parent = node.parent
+    while (parent) {
+      const kids = parent.children
+      const checked = kids.filter(k => k.state === 'checked').length
+      const indeterminate = kids.filter(k => k.state === 'indeterminate').length
 
-  }
-  function highlightTree(nodes, searchText) {
-    nodes.forEach((node) => {
-      node.text = highlight(node.text, searchText);
-      if (node.child.length) {
-        highlightTree(node.child, searchText);
-      }
-    });
-  }
-  const createNestedNode = (node: TreeNode): TreeNestedNode => {
-    return {
-      id: node.id,
-      name: node.name,
-      text: withoutId ? `${node.name}` : `${node.id} - ${node.name}`,
-      state: node.state,
-      level: node.level,
-      expandable: node.expandable,
-      expandableClosed: node.expandableClosed,
-      hidden: node?.hidden ?? false,
-      child: node.child
-        .map((id) => {
-          const childNode = getNodeById(id)
-          return childNode ? createNestedNode(childNode) : null
-        })
-        .filter((n) => n) as TreeNestedNode[]
-    }
-  }
-
-  const getNodeById = (idNode: string | number): TreeNode | null => {
-    if (!tree.value) return null
-    return tree.value.get(idNode) || null
-  }
+      if (kids.length > 0 && checked === kids.length) parent.state = 'checked'
+      else if (checked > 0 || indeterminate > 0) parent.state = 'indeterminate'
+      else parent.state = 'unchecked'
 
-  const getChildNodesFromNode = (idNode: string | number): TreeNode[] => {
-    if (!tree.value) return []
-    const node = getNodeById(idNode)
-    if (!node) return []
-    return node.child.map((id) => getNodeById(id)).filter((n) => n) as TreeNode[]
-  }
-
-  const getParentNode = (idNode: string | number): TreeNode | null => {
-    if (!tree.value) return null
-    const node = getNodeById(idNode)
-    if (!node || !node.parent) return null
-    return getNodeById(node.parent)
-  }
-
-  const getNodesByLevel = (level: number): TreeNode[] => {
-    if (!tree.value) return []
-    const nodes: TreeNode[] = []
-    tree.value.forEach((node) => {
-      if (node.level === level) {
-        nodes.push(node)
-      }
-    })
-    return nodes
+      parent = parent.parent
+    }
   }
 
-  const setState = (idNode: string | number, state: TreeNodeStateEditable): void => {
-    if (!tree.value) return
-    const node = getNodeById(idNode)
+  const setState = (id: string | number, state: TreeNodeState): void => {
+    const node = getNode(id)
     if (!node) return
     node.state = state
-    tree.value.set(idNode, node)
-    setStateChildNodes(node, state)
-    setStateParentNodes(node)
-    updateNestedTree()
-  }
-
-  const setStateChildNodes = (node: TreeNode, state: TreeNodeStateEditable): void => {
-    if (!tree.value) return
-    node.child.forEach((id) => {
-      const childNode = getNodeById(id)
-      if (childNode) {
-        childNode.state = state
-        tree.value.set(id, childNode)
-        setStateChildNodes(childNode, state)
-      }
-    })
+    setSubtreeState(node, state)
+    recomputeAncestors(node)
   }
 
-  const setStateParentNodes = (node: TreeNode): void => {
-    if (!tree.value) return
-    const parentNode = getParentNode(node.id)
-    if (!parentNode) return
-    const childNodes = getChildNodesFromNode(parentNode.id)
-    const checkedCount = childNodes.filter((n) => n.state === 'checked').length
-    const indeterminateCount = childNodes.filter((n) => n.state === 'indeterminate').length
-
-    if (checkedCount === childNodes.length) {
-      parentNode.state = 'checked'
-    } else if (checkedCount > 0 || indeterminateCount > 0) {
-      parentNode.state = 'indeterminate'
-    } else {
-      parentNode.state = 'unchecked'
-    }
-    tree.value.set(parentNode.id, parentNode)
-    setStateParentNodes(parentNode)
+  const applyModel = (ids: (string | number)[] = []): void => {
+    ids.forEach(id => setState(id, 'checked'))
   }
 
-  const setExpandableClosed = (idNode: string | number, expandableClosed: boolean): void => {
-    if (!tree.value) return
-    const node = getNodeById(idNode)
-    if (!node) return
-
-    if (!expandableClosed && node.expandable && node.child.length === 0) {
-      // Здесь можно добавить логику для ленивой загрузки дочерних узлов, если они не были загружены ранее.
-    }
-
-    node.expandableClosed = expandableClosed
-    tree.value.set(node.id, node)
-    updateNestedTree()
+  const collectSelectedIds = (): (string | number)[] => {
+    const ids: (string | number)[] = []
+    nodeMap.forEach((node) => {
+      if (node.state === 'checked' && node.parent?.state !== 'checked') {
+        ids.push(node.id)
+      }
+    })
+    return ids
   }
 
   const reset = (): void => {
-    if (!tree.value) return
-    tree.value.forEach((node) => {
+    nodeMap.forEach((node) => {
       node.state = 'unchecked'
     })
-    updateNestedTree()
   }
 
-  const collectSelectedIds = (tree: Map<string | number, TreeNode>): (string | number)[] => {
-    const selectedIds: Set<string | number> = new Set()
-
-    // Функция для проверки, выбраны ли все дочерние узлы
-    const areAllChildrenChecked = (node: TreeNode): boolean => {
-      const childNodes = getChildNodesFromNode(node.id)
-      return childNodes.length > 0 && childNodes.every((child) => child.state === 'checked')
-    }
-
-    tree.forEach((node) => {
-      if (node.state === 'checked') {
-        if (node.parent && getNodeById(node.parent)?.state === 'checked') {
-          // Пропустить дочерний узел, если родительский узел уже выбран
-          return
-        } else if (areAllChildrenChecked(node)) {
-          // Если все дочерние узлы выбраны, то включить только родительский узел
-          selectedIds.add(node.id)
-        } else {
-          selectedIds.add(node.id)
+  const toggleExpand = async (node: TreeViewNode): Promise<void> => {
+    if (!node.expandable) return
+    const willExpand = !node.expanded
+    node.expanded = willExpand
+
+    if (willExpand && lazy && !node.loaded && !node.loading && loadChildren) {
+      node.loading = true
+      try {
+        const data = await loadChildren(node)
+        const kids = (data ?? []).map(child => createNode(child, node.level + 1, node))
+        node.children = kids
+        node.loaded = true
+        if (node.state === 'checked') {
+          kids.forEach((k) => {
+            k.state = 'checked'
+            setSubtreeState(k, 'checked')
+          })
         }
       }
-    })
-
-    return Array.from(selectedIds)
+      finally {
+        node.loading = false
+      }
+    }
   }
 
-  function hideSearchedData(data: TreeData[], searchText: string) {
-    data.forEach((node) => {
-      const existingNode = tree.value.get(node.id)
-      if (existingNode) {
-        tree.value.set(node.id, { ...existingNode, hidden: false, expandableClosed: false })
-      }
-      if (node.children?.length) {
-        hideSearchedData(node.children)
-      }
+  const applySearch = (matched: TreeData[], searchText: string): void => {
+    nodeMap.forEach((node) => {
+      node.hidden = true
+      node.text = node.baseText
     })
-  }
 
-  function searchedData(data: TreeData[], searchText: string) {
-    if (!tree.value) return
-    toggleHiddenNodes(true)
-    hideSearchedData(data, searchText)
-    updateNestedTree(searchText)
-  }
+    const reveal = (items: TreeData[]): void => {
+      items.forEach((item) => {
+        const node = getNode(readId(item))
+        if (node) {
+          node.hidden = false
+          node.expanded = true
+          node.text = highlight(node.baseText, searchText)
+        }
+        const kids = readChildren(item)
+        if (kids.length) reveal(kids)
+      })
+    }
 
-  const toggleHiddenNodes = (hidden: boolean) => {
-    if (!tree.value) return
-    tree.value.forEach((node, key) => {
-      tree.value.set(key, { ...node, hidden })
-    })
+    reveal(matched ?? [])
   }
-  const toggleExpandableNodes = (expandableClosed: boolean) => {
-    if (!tree.value) return
-    tree.value.forEach((node, key) => {
-      tree.value.set(key, { ...node, expandableClosed })
+
+  const clearSearch = (): void => {
+    nodeMap.forEach((node) => {
+      node.hidden = false
+      node.expanded = false
+      node.text = node.baseText
     })
   }
 
   return {
-    tree,
-    nestedTree,
-    initTree,
+    nodes,
+    build,
+    getNode,
     setState,
-    reset,
-    setExpandableClosed,
+    applyModel,
     collectSelectedIds,
-    updateNestedTree,
-    searchedData,
-    toggleHiddenNodes,
-    toggleExpandableNodes,
+    reset,
+    toggleExpand,
+    applySearch,
+    clearSearch,
   }
 }