adata-ui 2.1.41-beta.0 → 2.1.41-beta.2

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

@@ -1,157 +1,157 @@
-<script lang="ts" setup>
-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[]
-  modelValue: (string | number)[]
-  type?: 'checkbox' | 'select'
-  isSearch?: boolean
-  disabled?: boolean
-  onlyOne?: boolean
-  searchText?: string
-  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 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 {
-  nodes,
-  build,
-  setState,
-  applyModel,
-  collectSelectedIds,
-  reset,
-  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,
-})
-
-function emitSelection() {
-  emits('update:modelValue', collectSelectedIds())
-}
-
-function toggleCheckbox(id: string | number, checked: boolean) {
-  if (props.onlyOne && !checked) {
-    reset()
-  }
-  else {
-    setState(id, checked ? 'checked' : 'unchecked')
-  }
-  emitSelection()
-}
-
-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: TreeData[], search: string): TreeData[] {
-  const needle = search.toLowerCase()
-  return options
-    .map((option) => {
-      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) as TreeData[]
-}
-
-const debouncedSearch = useDebounceFn(async () => {
-  if (props.searchText !== '') {
-    const data = props.asyncSearch
-      ? await props.asyncSearch(props.searchText)
-      : filterOptions(props.options, props.searchText)
-    applySearch(data, props.searchText)
-  }
-  else {
-    clearSearch()
-  }
-}, 300)
-
-watch(() => props.searchText, () => debouncedSearch())
-
-function initFromOptions() {
-  build(props.options)
-  applyModel(props.modelValue)
-  emitSelection()
-}
-
-build(props.options)
-onMounted(() => {
-  applyModel(props.modelValue)
-  emitSelection()
-})
-watch(() => props.options, initFromOptions)
-
-function resetSelection() {
-  reset()
-  emitSelection()
-}
-
-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>
+<script lang="ts" setup>
+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[]
+  modelValue: (string | number)[]
+  type?: 'checkbox' | 'select'
+  isSearch?: boolean
+  disabled?: boolean
+  onlyOne?: boolean
+  searchText?: string
+  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 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 {
+  nodes,
+  build,
+  setState,
+  applyModel,
+  collectSelectedIds,
+  reset,
+  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,
+})
+
+function emitSelection() {
+  emits('update:modelValue', collectSelectedIds())
+}
+
+function toggleCheckbox(id: string | number, checked: boolean) {
+  if (props.onlyOne && !checked) {
+    reset()
+  }
+  else {
+    setState(id, checked ? 'checked' : 'unchecked')
+  }
+  emitSelection()
+}
+
+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: TreeData[], search: string): TreeData[] {
+  const needle = search.toLowerCase()
+  return options
+    .map((option) => {
+      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) as TreeData[]
+}
+
+const debouncedSearch = useDebounceFn(async () => {
+  if (props.searchText !== '') {
+    const data = props.asyncSearch
+      ? await props.asyncSearch(props.searchText)
+      : filterOptions(props.options, props.searchText)
+    applySearch(data, props.searchText)
+  }
+  else {
+    clearSearch()
+  }
+}, 300)
+
+watch(() => props.searchText, () => debouncedSearch())
+
+function initFromOptions() {
+  build(props.options)
+  applyModel(props.modelValue)
+  emitSelection()
+}
+
+build(props.options)
+onMounted(() => {
+  applyModel(props.modelValue)
+  emitSelection()
+})
+watch(() => props.options, initFromOptions)
+
+function resetSelection() {
+  reset()
+  emitSelection()
+}
+
+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,184 +1,184 @@
-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,
+  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,
+  }
+}