@veltra/desktop 1.0.0

package/src/components/tip/use-nest.ts

@@ -0,0 +1,49 @@
+import type { InjectionKey, Ref, ShallowRef } from 'vue'
+import { shallowReactive, computed, provide, inject, onBeforeUnmount } from 'vue'
+
+const TipNestDIKey: InjectionKey<{
+  addChild(visible: ShallowRef<boolean>): void
+  removeChild(visible: ShallowRef<boolean>): void
+}> = Symbol('TipNestDIKey')
+
+/**
+ * tip嵌套
+ * @param visible 当前tip显示变量
+ * @returns
+ */
+export function useNest(
+  visible: Ref<boolean | undefined> | { __v_isRef: boolean; value: boolean }
+): Ref<boolean> {
+  /**
+   * 子级提示框
+   */
+  const childrenTips = shallowReactive(new Set<ShallowRef<boolean>>())
+  /**
+   * 是否有子级提示框正在显示中
+   */
+  const anyChildrenVisible = computed(() => {
+    return Array.from(childrenTips).some((tip) => tip.value)
+  })
+
+  const tipVisible = computed(() => {
+    return visible.value || anyChildrenVisible.value
+  })
+
+  provide(TipNestDIKey, {
+    addChild(v) {
+      childrenTips.add(v)
+    },
+    removeChild(v) {
+      childrenTips.delete(v)
+    }
+  })
+
+  const { addChild, removeChild } = inject(TipNestDIKey, undefined) || {}
+  addChild?.(tipVisible)
+
+  onBeforeUnmount(() => {
+    removeChild?.(tipVisible)
+  })
+
+  return tipVisible
+}

package/src/components/tree/di.ts

@@ -0,0 +1,33 @@
+import type { BEM } from '@veltra/utils'
+import type { InjectionKey, VNode } from 'vue'
+
+import type { TreeEmit, TreeProps, TreeNode } from '../../types'
+
+export interface TreeSlotsScope {
+  node: TreeNode
+  data: Record<string, any>
+}
+
+export interface TreeConText {
+  /** 树组件属性 */
+  treeProps: TreeProps
+  /** BEM */
+  cls: BEM<'tree'>
+  /** 单选选中的节点 */
+  selectedData: Record<string, any> | undefined
+  /** 多选的节点 */
+  checkedData: Set<any>
+  /** 选择事件 */
+  handleSelect: (data: TreeNode) => void
+  /** 多选切换 */
+  toggleCheck: (node: TreeNode, check: boolean, ctrlKey?: boolean) => void
+  /** 获取树的作用域插槽节点 */
+  getTreeSlotsNode: (ctx: TreeSlotsScope) => VNode[] | string | undefined
+  /** 树事件 */
+  treeEmit: TreeEmit
+  /** 获取碾平后的节点 */
+  getFlattedNodes: (filter?: (node: TreeNode) => boolean) => void
+}
+
+/** 树依赖注入key */
+export const TreeDIKey: InjectionKey<TreeConText> = Symbol('TreeDIKey')

package/src/components/tree/index.ts

@@ -0,0 +1 @@
+export { default as UTree } from './tree.vue'

package/src/components/tree/style.scss

@@ -0,0 +1,127 @@
+@use 'pkg:@veltra/styles/mixins' as m;
+@use 'pkg:@veltra/styles/functions' as fn;
+
+$root-name: tree;
+
+@include m.b($root-name) {
+  @include m.size using ($size) {
+    @include m.bem($root-name, node-content) {
+      border-radius: fn.use-var(radius, $size);
+      padding: fn.use-var(gap, $size);
+      line-height: 1;
+    }
+
+    @include m.bem($root-name, checkbox) {
+      margin-right: fn.use-var(gap, $size);
+    }
+  }
+
+  @include m.e(checkbox) {
+    height: fit-content;
+    flex-shrink: 0;
+  }
+
+  @include m.e(wrap) {
+    @include m.is(virtual) {
+      position: relative;
+
+      @include m.bem($root-name, node) {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+      }
+    }
+  }
+
+  @include m.is(selectable, checkable) {
+    @include m.bem($root-name, node) {
+      &:not(.is-disabled) {
+        @include m.bem($root-name, node-content) {
+          &:hover {
+            background-color: fn.use-var(bg-color, hover);
+          }
+        }
+      }
+    }
+  }
+
+  @include m.e(node) {
+    cursor: pointer;
+    margin-bottom: 0.2rem;
+    @include m.flex($align: center);
+
+    @include m.is(selected) {
+      @include m.bem($root-name, node-content) {
+        background-color: fn.use-var(color, primary, light-9) !important;
+        color: fn.use-var(color, primary);
+        font-weight: bold;
+      }
+    }
+
+    @include m.is(expanded) {
+      @include m.bem($root-name, expand-icon) {
+        transform: rotate(90deg);
+      }
+    }
+
+    @include m.is(disabled) {
+      cursor: not-allowed;
+      @include m.bem($root-name, node-content) {
+        color: fn.use-var(text-color, disabled);
+      }
+    }
+  }
+
+  @include m.e(expand-icon, icon-placeholder) {
+    flex-shrink: 0;
+    width: 20px;
+    height: 20px;
+  }
+
+  @include m.e(expand-icon) {
+    cursor: pointer;
+    transition:
+      transform 0.2s,
+      background-color 0.2s;
+    flex-shrink: 0;
+    font-size: 20px;
+    border-radius: 50%;
+
+    &:hover {
+      background-color: fn.use-var(color, primary, light-9);
+    }
+  }
+
+  @include m.e(icon-placeholder) {
+    padding: 5px;
+
+    &::before {
+      content: '';
+      box-sizing: border-box;
+      width: 100%;
+      height: 100%;
+      display: block;
+      border-radius: 50%;
+      border: 2px solid fn.use-var(text-color, main);
+    }
+  }
+
+  @include m.e(node-content) {
+    flex-grow: 1;
+    overflow: hidden;
+    user-select: none;
+    word-break: break-all;
+    transition: background-color 0.25s;
+    @include m.flex($align: center);
+  }
+
+  @include m.e(ripple) {
+    background-color: fn.use-var(color, primary, light-7);
+    opacity: 0.5;
+  }
+
+  @include m.e(empty) {
+    text-align: center;
+  }
+}

package/src/components/tree/style.ts

@@ -0,0 +1,5 @@
+import '../icon/style'
+import '../checkbox/style'
+import '../empty/style'
+import '../scroll/style'
+import './style.scss'

package/src/components/tree/tree-node.ts

@@ -0,0 +1,65 @@
+import { TreeNode as CoreTreeNode, o } from '@cat-kit/core'
+import { shallowReactive } from 'vue'
+
+export class TreeNode<Val extends Record<string, any> = Record<string, any>> extends CoreTreeNode<
+  Val,
+  TreeNode<Val>
+> {
+  declare parent?: TreeNode<Val>
+
+  declare children?: TreeNode<Val>[]
+
+  expanded = false
+  loading = false
+  loaded = false
+  /** 多选是否选中 */
+  checked = false
+  disabled = false
+  visible = true
+  /** 子节点选中数量 */
+  childrenCheckCount = 0
+
+  get indeterminate(): boolean {
+    if (!this.children) return false
+    return (
+      this.childrenCheckCount > 0
+      // && this.childrenCheckCount < this.children.length
+    )
+  }
+
+  labelKey: string
+  valueKey: string
+
+  constructor(params: {
+    data: Val
+    index: number
+    depth: number
+    parent?: TreeNode<Val>
+    labelKey: string
+    valueKey: string
+  }) {
+    const { data, index, depth, parent, labelKey, valueKey } = params
+    super(data, index, depth, parent)
+    this.labelKey = labelKey
+    this.valueKey = valueKey
+
+    return shallowReactive(this)
+  }
+
+  get label(): string {
+    return String(o(this.data).get(this.labelKey))
+  }
+
+  get key(): string | number {
+    return o(this.data).get(this.valueKey) as string | number
+  }
+
+  /**
+   * 向上冒泡设置
+   * @param setter 设置函数, 返回 false 则停止冒泡
+   */
+  bubbleSet(setter: (node: TreeNode<Val>) => boolean | void): void {
+    const ret = setter(this)
+    ret !== false && this.parent?.bubbleSet(setter)
+  }
+}

package/src/components/tree/tree-node.vue

@@ -0,0 +1,79 @@
+<template>
+  <div
+    :class="[cls.e('node'), bem.is('expanded', node.expanded), bem.is('disabled', node.disabled)]"
+    :style="{ paddingLeft: withUnit(node.depth * 20 - 20, 'px') }"
+    :ref="measureElement"
+  >
+    <u-icon v-if="!node.isLeaf" :class="cls.e('expand-icon')" @click.stop="toggleExpand">
+      <ArrowRight />
+    </u-icon>
+    <i v-else :class="cls.e('icon-placeholder')"> </i>
+
+    <div
+      :class="cls.e('node-content')"
+      @click="handleClick"
+      @contextmenu="treeEmit('node-contextmenu', $event, node)"
+      v-ripple="
+        (treeProps.checkable || treeProps.selectable) && !node.disabled ? cls.e('ripple') : false
+      "
+    >
+      <u-checkbox
+        v-if="treeProps.checkable"
+        :class="cls.e('checkbox')"
+        :model-value="node.checked"
+        :indeterminate="node.indeterminate"
+        :disabled="node.disabled"
+        @change="handleChange"
+        @click.stop
+      />
+
+      <u-node-render :content="getTreeSlotsNode({ node, data: node.data })" />
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { vRipple } from '@veltra/directives'
+import { ArrowRight } from '@veltra/icons/normal'
+import { bem, withUnit } from '@veltra/utils'
+import { inject } from 'vue'
+
+import type { TreeNodeProps } from '../../types'
+import UCheckbox from '../checkbox/checkbox.vue'
+import { UIcon } from '../icon'
+import { UNodeRender } from '../node-render'
+import { TreeDIKey } from './di'
+
+defineOptions({
+  name: 'TreeNode'
+})
+
+const props = defineProps<TreeNodeProps>()
+
+const { treeProps, treeEmit, cls, getTreeSlotsNode, getFlattedNodes, toggleCheck, handleSelect } =
+  inject(TreeDIKey)!
+
+function toggleExpand() {
+  const { node } = props
+  node.expanded = !node.expanded
+  getFlattedNodes()
+
+  treeEmit('expand', node)
+}
+
+function handleChange(checked: boolean, e: MouseEvent) {
+  toggleCheck(props.node, checked, e.ctrlKey)
+}
+
+function handleClick(e: MouseEvent) {
+  const { node } = props
+  treeEmit('node-click', node)
+
+  treeProps.selectable && handleSelect(node)
+  treeProps.expandOnClickNode && toggleExpand()
+  treeProps.checkable &&
+    !node.disabled &&
+    !treeProps.expandOnClickNode &&
+    toggleCheck(node, !node.checked, e.ctrlKey)
+}
+</script>

package/src/components/tree/tree.vue

@@ -0,0 +1,219 @@
+<template>
+  <u-scroll
+    :class="className"
+    ref="scrollRef"
+    :content-style="{ height: virtualEnabled ? withUnit(totalHeight, 'px') : undefined }"
+    :content-class="[cls.e('wrap'), bem.is('virtual', virtualEnabled)]"
+  >
+    <template v-if="virtualEnabled">
+      <UTreeNode
+        v-for="{ node, key, offset, index } of virtualNodes"
+        :node="node"
+        :key="key"
+        :class="bem.is('selected', node.data === selectedData)"
+        :data-index="index"
+        :measure-element="measureElement"
+        :style="{ transform: `translateY(${offset}px)` }"
+      />
+    </template>
+    <template v-else>
+      <UTreeNode
+        v-for="node of nodes"
+        :node="node"
+        :key="node.key"
+        :class="bem.is('selected', node.data === selectedData)"
+      />
+    </template>
+
+    <div :class="cls.e('empty')" v-if="!nodes.length">
+      <UEmpty />
+    </div>
+  </u-scroll>
+</template>
+
+<script lang="ts" setup>
+import { useFormComponent, useFormFallbackProps } from '@veltra/compositions'
+import { useVirtual } from '@veltra/compositions'
+import { bem, nextFrame, withUnit, scrollIntoContainerView } from '@veltra/utils'
+import { computed, provide, shallowRef, useSlots, watch, watchEffect, type VNode } from 'vue'
+
+import type { TreeProps, TreeEmit, _TreeExposed } from '../../types'
+import type { ScrollExposed } from '../../types'
+import { UEmpty } from '../empty'
+import { UScroll } from '../scroll'
+import { TreeDIKey, type TreeConText, type TreeSlotsScope } from './di'
+import UTreeNode from './tree-node.vue'
+import { useCheck } from './use-check'
+import { useFilter } from './use-filter'
+import { useSelect } from './use-select'
+import { useTreeNodes } from './use-tree-nodes'
+
+defineOptions({
+  name: 'Tree'
+})
+
+const props = withDefaults(defineProps<TreeProps>(), {
+  labelKey: 'label',
+  valueKey: 'value',
+  childrenKey: 'children',
+  expandOnClickNode: false,
+  checkStrictly: false,
+  data: () => []
+})
+
+const emit = defineEmits<TreeEmit>()
+
+const cls = bem('tree')
+
+const { formProps } = useFormComponent()
+
+const { size } = useFormFallbackProps([formProps ?? {}, props], {
+  size: 'default'
+})
+
+const scrollRef = shallowRef<ScrollExposed>()
+
+const className = computed(() => {
+  return [
+    cls.b,
+    cls.m(size.value),
+    bem.is('selectable', props.selectable),
+    bem.is('checkable', props.checkable)
+  ]
+})
+
+defineSlots<{
+  default: (props: TreeSlotsScope) => any
+}>()
+
+const slots = useSlots()
+
+function getTreeSlotsNode(ctx: TreeSlotsScope): VNode[] | string | undefined {
+  return (props.slots?.default ?? slots.default)?.(ctx) ?? ctx.node.label
+}
+
+const { nodes, forest, getFlattedNodes, nodeDict } = useTreeNodes({
+  props
+})
+
+watch(
+  [() => props.selectable, () => props.checkable, forest],
+  ([s, c]) => {
+    // 如果选择或勾选，则不更新节点
+    if (s || c) return
+    getFlattedNodes()
+  },
+  { immediate: true }
+)
+
+const { filter } = useFilter({ forest, getFlattedNodes })
+
+const { handleSelect, selectedData } = useSelect({
+  props,
+  emit,
+  nodeDict,
+  getFlattedNodes
+})
+
+const { checkedData, toggleCheck } = useCheck({
+  props,
+  emit,
+  nodeDict,
+  getFlattedNodes
+})
+
+const { totalHeight, virtualList, scrollTo, virtualEnabled, measureElement } = useVirtual({
+  count: computed(() => nodes.value.length),
+  estimateSize: () => 40,
+  gap: 2,
+  virtualThreshold: 80,
+  scrollEl: computed(() => scrollRef.value?.containerRef ?? null)
+})
+
+const virtualNodes = computed(() => {
+  const _nodes = nodes.value
+
+  return virtualList.value.map((item) => {
+    const node = _nodes[item.index]!
+    return {
+      node,
+      key: node.key || item.key,
+      offset: item.start,
+      index: item.index
+    }
+  })
+})
+
+function scrollIntoView() {
+  const { selectable, checkable, scrollToView } = props
+  if (!scrollToView || (!selectable && !checkable) || !nodes.value) return
+  let index = -1
+
+  if (selectable) {
+    if (!selectedData.value) return
+    index = nodes.value.findIndex((node) => node.data === selectedData.value)
+  } else if (checkable) {
+    if (!checkedData.size) return
+    index = nodes.value.findIndex((node) => checkedData.has(node.data))
+  }
+
+  if (virtualEnabled.value) {
+    scrollTo(index)
+  } else {
+    const { contentRef, containerRef } = scrollRef.value ?? {}
+    const el = contentRef?.children[index]
+    el && scrollIntoContainerView(el as HTMLElement, containerRef ?? null)
+  }
+}
+
+watchEffect(() => {
+  nextFrame(() => {
+    scrollIntoView()
+  })
+})
+
+provide(TreeDIKey, {
+  cls,
+  selectedData,
+  checkedData,
+  getFlattedNodes,
+  getTreeSlotsNode,
+  treeEmit: emit as TreeEmit,
+  treeProps: props as TreeProps,
+  toggleCheck: toggleCheck as TreeConText['toggleCheck'],
+  handleSelect: handleSelect as TreeConText['handleSelect']
+})
+
+defineExpose<_TreeExposed>({
+  filter,
+  forest,
+  nodes,
+  checkNode: toggleCheck,
+  selectNode: handleSelect,
+  checkAll(check: boolean) {
+    forest.value.roots.forEach((node) => {
+      toggleCheck(node, check)
+    })
+  },
+  getSelected() {
+    return selectedData
+  },
+  getChecked() {
+    return Array.from(checkedData)
+  },
+  scrollTo,
+
+  expandAll() {
+    forest.value.dfs((node) => {
+      node.expanded = true
+    })
+    getFlattedNodes()
+  },
+  collapseAll() {
+    forest.value.dfs((node) => {
+      node.expanded = false
+    })
+    getFlattedNodes()
+  }
+})
+</script>