adata-ui 2.1.40-beta.16 → 2.1.40-beta.18

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

@@ -1,184 +1,249 @@
-import type {
-  TreeData,
-  TreeNodeState,
-  TreeServiceOptions,
-  TreeViewNode,
-} from '#adata-ui/components/elements/tree-select/types'
-import highlight from '#adata-ui/composables/highlight'
-
-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: 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)
-    })
-  }
-
-  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
-
-      if (kids.length > 0 && checked === kids.length) parent.state = 'checked'
-      else if (checked > 0 || indeterminate > 0) parent.state = 'indeterminate'
-      else parent.state = 'unchecked'
-
-      parent = parent.parent
-    }
-  }
-
-  const setState = (id: string | number, state: TreeNodeState): void => {
-    const node = getNode(id)
-    if (!node) return
-    node.state = state
-    setSubtreeState(node, state)
-    recomputeAncestors(node)
-  }
-
-  const applyModel = (ids: (string | number)[] = []): void => {
-    ids.forEach(id => setState(id, 'checked'))
-  }
-
-  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 => {
-    nodeMap.forEach((node) => {
-      node.state = 'unchecked'
-    })
-  }
-
-  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')
-          })
-        }
-      }
-      finally {
-        node.loading = false
-      }
-    }
-  }
-
-  const applySearch = (matched: TreeData[], searchText: string): void => {
-    nodeMap.forEach((node) => {
-      node.hidden = true
-      node.text = node.baseText
-    })
-
-    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)
-      })
-    }
-
-    reveal(matched ?? [])
-  }
-
-  const clearSearch = (): void => {
-    nodeMap.forEach((node) => {
-      node.hidden = false
-      node.expanded = false
-      node.text = node.baseText
-    })
-  }
-
-  return {
-    nodes,
-    build,
-    getNode,
-    setState,
-    applyModel,
-    collectSelectedIds,
-    reset,
-    toggleExpand,
-    applySearch,
-    clearSearch,
-  }
-}
+import type {
+  TreeData,
+  TreeNestedNode,
+  TreeNode,
+  TreeNodeStateEditable
+} 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[],
+    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))
+      }
+    })
+    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)
+
+  }
+  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
+  }
+
+  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
+  }
+
+  const setState = (idNode: string | number, state: TreeNodeStateEditable): void => {
+    if (!tree.value) return
+    const node = getNodeById(idNode)
+    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)
+      }
+    })
+  }
+
+  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 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 reset = (): void => {
+    if (!tree.value) return
+    tree.value.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)
+        }
+      }
+    })
+
+    return Array.from(selectedIds)
+  }
+
+  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)
+      }
+    })
+  }
+
+  function searchedData(data: TreeData[], searchText: string) {
+    if (!tree.value) return
+    toggleHiddenNodes(true)
+    hideSearchedData(data, searchText)
+    updateNestedTree(searchText)
+  }
+
+  const toggleHiddenNodes = (hidden: boolean) => {
+    if (!tree.value) return
+    tree.value.forEach((node, key) => {
+      tree.value.set(key, { ...node, hidden })
+    })
+  }
+  const toggleExpandableNodes = (expandableClosed: boolean) => {
+    if (!tree.value) return
+    tree.value.forEach((node, key) => {
+      tree.value.set(key, { ...node, expandableClosed })
+    })
+  }
+
+  return {
+    tree,
+    nestedTree,
+    initTree,
+    setState,
+    reset,
+    setExpandableClosed,
+    collectSelectedIds,
+    updateNestedTree,
+    searchedData,
+    toggleHiddenNodes,
+    toggleExpandableNodes,
+  }
+}

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

@@ -0,0 +1,91 @@
+<template>
+  <li
+    :style="{ 'padding-left': `${node.level * 20}px` }"
+    :class="[
+      { 'bg-[#2C3E500D] dark:bg-[#E3E5E80D]': node.state === 'checked' && type === 'select' }
+    ]"
+  >
+    <div class="flex items-center gap-1 p-2" v-if="!node?.hidden"
+         :class="{ 'bg-deepblue-50 dark:bg-gray-200/5': disabled && node.state === 'unchecked' }"
+    >
+      <div class="min-w-4">
+        <a-icon-chevron-down
+          v-if="node.expandable"
+          width="16"
+          height="16"
+          :class="['cursor-pointer transition-all', { '-rotate-90': node.expandableClosed }]"
+          @click="toggleExpand(node)"
+        />
+      </div>
+      <div v-if="type === 'select'" class="w-full">
+        <input
+          :id="node.id.toString()"
+          type="checkbox"
+          :disabled="disabled && node.state === 'unchecked'"
+          class="hidden"
+          :checked="node.state === 'checked'"
+          @change="handleCheckboxChange"
+        />
+        <label
+          :for="node.id.toString()"
+          class="flex grow cursor-pointer items-center justify-between gap-4"
+        >
+          <span :class="{ 'font-semibold': node.level === 0 }" v-html="node.text" />
+          <a-icon-check v-if="node.state === 'checked'" class="min-w-4 text-blue-700" />
+        </label>
+      </div>
+      <a-checkbox
+        v-if="type === 'checkbox'"
+        size="lg"
+        :model-value="node.state === 'checked'"
+        :name="`${node.id}`"
+        :intermediate="node.state === 'indeterminate'"
+        side="right"
+        :disabled="disabled && node.state === 'unchecked'"
+        always-intermediate
+        @change="handleCheckboxChange"
+      >
+        <span class="heading-05" v-html="node.text" />
+      </a-checkbox>
+    </div>
+
+    <a-transition-height>
+      <ul v-if="node.expandable && !node.expandableClosed">
+        <template v-for="childNode in node.child" :key="childNode.id">
+          <tree-select-nodes
+            :node="childNode"
+            :toggle-expand="toggleExpand"
+            :toggle-checkbox="toggleCheckbox"
+            :type="type"
+            :disabled="disabled"
+          />
+        </template>
+      </ul>
+    </a-transition-height>
+  </li>
+</template>
+
+<script lang="ts" setup>
+import type { TreeNestedNode } from '#adata-ui/components/elements/tree-select/types'
+
+interface Props {
+  node: TreeNestedNode
+  toggleExpand: Function
+  toggleCheckbox: Function
+  disabled: boolean
+  type: 'checkbox' | 'select'
+}
+
+const props = defineProps<Props>()
+
+const handleCheckboxChange = (event) => {
+  props.toggleCheckbox(props.node.id, event.target.checked)
+}
+const toggleExpand = (node) => {
+  props.toggleExpand(node)
+}
+</script>
+
+<style scoped>
+/* Стили для узлов дерева и флажков выбора можно настроить по вашему усмотрению */
+</style>

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

@@ -1,63 +1,34 @@
-export type TreeNodeState = 'checked' | 'unchecked' | 'indeterminate'
-export type TreeNodeStateEditable = 'checked' | 'unchecked'
-
-export type TreeData = {
-  id?: number | string
-  name?: string
-  children?: TreeData[]
-  [key: string]: unknown
-}
-
-export interface TreeViewNode {
-  id: string | number
-  name: string
-  text: string
-  baseText: string
-  level: number
-  state: TreeNodeState
-  expandable: boolean
-  expanded: boolean
-  hidden: boolean
-  loaded: boolean
-  loading: boolean
-  parent: TreeViewNode | null
-  children: TreeViewNode[]
-  raw: TreeData
-}
-
-export interface TreeKeyConfig {
-  idKey?: string
-  nameKey?: string
-  childrenKey?: string
-  hasChildrenKey?: string
-}
-
-export interface TreeServiceOptions extends TreeKeyConfig {
-  withoutId?: boolean
-  lazy?: boolean
-  loadChildren?: (node: TreeViewNode) => Promise<TreeData[]> | TreeData[]
-}
-
-export interface TreeNode {
-  id: string | number
-  name: string
-  state: TreeNodeState
-  level: number
-  expandable: boolean
-  expandableClosed: boolean
-  parent: string | number | null
-  hidden?: boolean
-  child: (string | number)[]
-}
-
-export interface TreeNestedNode {
-  id: string | number
-  name: string
-  state: TreeNodeState
-  level: number
-  expandable: boolean
-  expandableClosed: boolean
-  text: string
-  hidden: boolean
-  child: TreeNestedNode[]
-}
+export interface TreeNode {
+  id: string | number
+  name: string
+  state: TreeNodeState
+  level: number
+  expandable: boolean
+  expandableClosed: boolean
+  parent: string | number | null
+  hidden?: boolean
+  child: (string | number)[]
+}
+
+export interface TreeNestedNode {
+  id: string | number
+  name: string
+  state: TreeNodeState
+  level: number
+  expandable: boolean
+  expandableClosed: boolean
+  text: string
+  hidden: boolean
+  // parent: TreeNestedNode | null;
+  child: TreeNestedNode[]
+}
+
+export type TreeData = {
+  // [key: string]: null | string[] | TreeData;
+  id: number | string
+  name: string
+  children?: TreeData[]
+}
+
+export type TreeNodeState = 'checked' | 'unchecked' | 'indeterminate'
+export type TreeNodeStateEditable = 'checked' | 'unchecked'