oxy-uni-ui 1.0.1 → 1.1.0

package/components/oxy-tree/components/tree-node-content.vue

@@ -0,0 +1,72 @@
+<template>
+  <view class="oxy-tree-node-content" :style="getNodeStyle()" :class="computedClass" @click="handleNodeClick">
+    <oxy-icon @click.stop="toggleExpand" name="fill-arrow-down" class="oxy-tree-node-icon" size="22px"></oxy-icon>
+    <oxy-checkbox
+      v-if="treeProps?.showCheckbox"
+      :modelValue="node.checked"
+      :disabled="node.disabled"
+      :indeterminate="node.immediate"
+      shape="square"
+    ></oxy-checkbox>
+    <view class="oxy-tree-node">
+      <slot :node="node" :data="node.data">
+        {{ node.label }}
+      </slot>
+    </view>
+  </view>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'oxy-tree-node-content'
+}
+</script>
+
+<script lang="ts" setup>
+import { computed, toRefs, type Ref } from 'vue'
+import type { TextProps, TreeNode } from '../types'
+import { inject } from 'vue'
+// 获取组件的 props 和 emit 函数
+const emit = defineEmits<{
+  (e: 'click', node: TreeNode): void
+  (e: 'toggle-expand', node: TreeNode, flag: boolean): void
+  (e: 'toggle-checked', node: TreeNode, flag: boolean, isClick: boolean): void
+}>()
+
+const props = defineProps<{
+  node: TreeNode
+}>()
+const treeProps = inject<TextProps>('treeProps')
+const currentNode = inject<Ref<TreeNode | undefined>>('currentNode')
+
+function getNodeStyle() {
+  return {
+    paddingLeft: `${(props.node.level - 1) * (treeProps?.indent || 16)}px`
+  }
+}
+
+function toggleExpand() {
+  emit('toggle-expand', props.node, !props.node.expanded)
+}
+
+const computedClass = computed(() => {
+  const currentValue = currentNode?.value
+  return {
+    expanded: props.node.expanded,
+    checked: props.node.checked,
+    'is-leaf': props.node.isLeaf,
+    immediate: props.node.immediate,
+    'is-current': currentValue === props.node,
+    'is-disabled': props.node.disabled
+  }
+})
+
+const handleNodeClick = () => {
+  emit('click', props.node)
+  emit('toggle-checked', props.node, !props.node.checked, true)
+}
+</script>
+
+<style lang="scss" scoped>
+@import '../index.scss';
+</style>

package/components/oxy-tree/index.scss

@@ -0,0 +1,61 @@
+@import '../common/abstracts/variable';
+@import '../common/abstracts/mixin';
+
+.oxy-tree-node-content {
+  line-height: 44px;
+  height: 44px;
+  display: flex;
+  width: fit-content;
+  width: 100%;
+  white-space: nowrap;
+  align-items: center;
+
+  &.expanded {
+    .oxy-tree-node-icon {
+      transform: rotate(0deg);
+    }
+  }
+
+  &.is-leaf {
+    .oxy-tree-node-icon {
+      opacity: 0;
+    }
+  }
+
+  &.is-current {
+    background-color: $-tree-node-current-bg;
+    color: $-tree-node-current-color;
+  }
+
+  &.is-disabled {
+    color: $-tree-node-disabled-color;
+  }
+
+  :deep(.oxy-checkbox) {
+    margin-right: 6px;
+
+    .oxy-checkbox__label {
+      display: none;
+    }
+
+    .oxy-checkbox__shape {
+      transition: none;
+    }
+
+    .oxy-checkbox__indeterminate {
+      transition: none;
+    }
+
+    .oxy-checkbox__check {
+      transition: none;
+    }
+  }
+
+  .oxy-tree-node-icon {
+    transform: rotate(-90deg);
+  }
+
+  .oxy-tree-node {
+    flex: 1;
+  }
+}

package/components/oxy-tree/index.ts

@@ -0,0 +1,51 @@
+import type { TextProps, RawTreeNode } from './types'
+
+export const useTreeMethods = (props: TextProps) => {
+  function getDisabled(node: RawTreeNode): boolean {
+    return node.disabled ?? false
+  }
+
+  function getChildren(node: RawTreeNode): RawTreeNode[] {
+    return node[props.childrenKey] ?? []
+  }
+
+  function getLabel(node: RawTreeNode): string {
+    return node[props.labelKey] ?? ''
+  }
+
+  function getKey(node: RawTreeNode | undefined): string {
+    if (!node) {
+      return ''
+    }
+    return (node[props.valueKey] ?? '') as string
+  }
+
+  return {
+    getDisabled,
+    getChildren,
+    getLabel,
+    getKey
+  }
+}
+/**
+ * 判断两个 Set 中的元素是否完全相同（不考虑顺序）
+ * @param {Set} setA - 第一个 Set
+ * @param {Set} setB - 第二个 Set
+ * @returns {boolean} 两个 Set 是否相同
+ */
+export function isSetsEqual(setA: Set<any>, setB: Set<any>) {
+  // 步骤1：如果大小不同，直接返回 false
+  if (setA.size !== setB.size) {
+    return false
+  }
+
+  // 步骤2：遍历 setA 的所有元素，检查 setB 是否都包含
+  for (const item of setA) {
+    if (!setB.has(item)) {
+      return false // 有元素不匹配，返回 false
+    }
+  }
+
+  // 所有元素匹配，返回 true
+  return true
+}

package/components/oxy-tree/oxy-tree.vue

@@ -0,0 +1,289 @@
+<template>
+  <view class="oxy-tree" :class="customClass" :style="customStyle">
+    <oxy-virtual-scroll v-if="data.length" :data="flattenTree" :height="maxHeight" item-height="44px" :scrollX="true">
+      <template #item="{ item }">
+        <treeNodeContent :node="item" @toggle-expand="toggleExpand" @toggle-checked="toggleChecked" @click="handleClick">
+          <template #default="{ node, data }">
+            <slot :node="node" :data="data"></slot>
+          </template>
+        </treeNodeContent>
+      </template>
+    </oxy-virtual-scroll>
+    <view v-else>
+      <oxy-status-tip image="content" :tip="emptyText" />
+    </view>
+  </view>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'oxy-tree',
+  options: {
+    virtualHost: true,
+    addGlobalClass: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
+<script lang="ts" setup>
+import { computed, nextTick, provide, ref, toRefs, watch } from 'vue'
+import type { RawTreeNode, TreeNode } from './types'
+import { textProps } from './types'
+import treeNodeContent from './components/tree-node-content.vue'
+import { isSetsEqual, useTreeMethods } from '.'
+
+// 树结构类型定义
+type Tree = {
+  treeNodeMap: Map<string, TreeNode>
+  levelTreeNodeMap: Map<number, TreeNode[]>
+  maxLevel: number
+  treeNodes: TreeNode[]
+}
+
+// 获取组件的 props 和 emit 函数
+const props = defineProps(textProps)
+const { modelValue, data, defaultExpandedKeys, expandAll, showCheckbox, checkStrictly, selectionLeafOnly } = toRefs(props)
+const emit = defineEmits<{
+  (e: 'node-click', node: TreeNode): void
+  (e: 'update:modelValue', value: string[] | string | undefined): void
+  (e: 'node-check', node: TreeNode): void
+  (e: 'node-expand', node: TreeNode): void
+  (e: 'node-collapse', node: TreeNode): void
+}>()
+
+const { getDisabled, getChildren, getLabel, getKey } = useTreeMethods(props)
+const expandedKeySet = ref<Set<string>>(new Set())
+const hiddenNodeKeySet = ref<Set<string>>(new Set())
+const checkedKeys = ref<Set<string>>(new Set())
+const immediateKeySet = ref<Set<string>>(new Set())
+const currentNode = ref<TreeNode>()
+provide('treeProps', props)
+provide('currentNode', currentNode)
+
+const tree = ref<Tree>()
+
+const flattenTree = computed<TreeNode[]>(() => {
+  const expandedKeys = expandedKeySet.value
+  const hiddenKeys = hiddenNodeKeySet.value
+  const flattenNodes: TreeNode[] = []
+  const nodes = (tree.value && tree.value.treeNodes) || []
+  function traverse() {
+    const stack: TreeNode[] = []
+    for (let i = nodes.length - 1; i >= 0; --i) {
+      stack.push(nodes[i])
+    }
+    while (stack.length) {
+      const node = stack.pop()
+      if (!node) continue
+      if (!hiddenKeys.has(node.key)) {
+        flattenNodes.push(node)
+      }
+      if (expandedKeys.has(node.key)) {
+        const children = node.children
+        if (children) {
+          const length = children.length
+          for (let i = length - 1; i >= 0; --i) {
+            stack.push(children[i])
+          }
+        }
+      }
+    }
+  }
+  traverse()
+  return flattenNodes
+})
+const createTree = (data: RawTreeNode[]) => {
+  const treeNodeMap = new Map<string, TreeNode>()
+  const levelTreeNodeMap = new Map<number, TreeNode[]>()
+
+  let maxLevel = 1
+
+  function traverse(nodes: RawTreeNode[], level = 1, parent?: TreeNode): TreeNode[] {
+    const siblings: TreeNode[] = []
+    nodes.forEach((rawNode, index) => {
+      const value = getKey(rawNode)
+      const node: TreeNode = {
+        level,
+        key: value,
+        data: rawNode,
+        index,
+        isLast: index === nodes.length - 1,
+        expanded: expandedKeySet.value.has(value),
+        label: getLabel(rawNode),
+        parent: parent,
+        isLeaf: false
+      }
+      if (showCheckbox.value) {
+        node.checked = checkedKeys.value.has(value)
+      }
+      if (expandAll.value) {
+        node.expanded = true
+        expandedKeySet.value.add(value)
+      }
+      const children = getChildren(rawNode)
+      node.disabled = getDisabled(rawNode)
+      node.isLeaf = !children || children.length === 0
+      if (children && children.length) {
+        node.children = traverse(children, level + 1, node)
+      }
+      siblings.push(node)
+      treeNodeMap.set(value, node)
+      if (!levelTreeNodeMap.has(level)) {
+        levelTreeNodeMap.set(level, [])
+      }
+      levelTreeNodeMap.get(level)!.push(node)
+    })
+
+    if (level > maxLevel) {
+      maxLevel = level
+    }
+    return siblings
+  }
+  const treeNodes = traverse(data)
+
+  return {
+    treeNodeMap,
+    levelTreeNodeMap,
+    maxLevel,
+    treeNodes
+  }
+}
+
+const toggleExpand = (node: TreeNode, flag: boolean) => {
+  node.expanded = flag
+  const key = node.key
+  if (node.expanded) {
+    expandedKeySet.value.add(key)
+    emit('node-expand', node)
+  } else {
+    expandedKeySet.value.delete(key)
+    emit('node-collapse', node)
+  }
+}
+const toggleChecked = (node: TreeNode, flag: boolean, isClick: boolean = false) => {
+  if (!showCheckbox.value || !node || node.disabled) {
+    return
+  }
+
+  function toggle(currentNode: TreeNode) {
+    const key = currentNode.key
+    currentNode.checked = flag
+    currentNode.immediate = false
+
+    if (currentNode.checked && (!selectionLeafOnly.value || currentNode.isLeaf)) {
+      checkedKeys.value.add(key)
+    } else {
+      checkedKeys.value.delete(key)
+    }
+    if (!checkStrictly.value && currentNode.children) {
+      currentNode.children.forEach((child) => {
+        toggle(child)
+      })
+    }
+  }
+  toggle(node)
+  !checkStrictly.value && updateParentNode(node)
+  updateValue()
+  isClick && emit('node-check', node)
+}
+const handleClick = (node: TreeNode) => {
+  emit('node-click', node)
+
+  if (node.disabled) return
+  currentNode.value = node
+
+  if (!showCheckbox.value) {
+    updateValue()
+  }
+}
+const updateParentNode = (node: TreeNode) => {
+  if (!node.parent) return
+  updateNode(node.parent)
+  updateParentNode(node.parent)
+}
+const updateNode = (node: TreeNode | undefined) => {
+  if (!node) return
+  if (node.children?.every((item) => item.checked)) {
+    node.checked = true
+    node.immediate = false
+    !node.disabled && (!selectionLeafOnly.value || node.isLeaf) && checkedKeys.value.add(node.key)
+  } else if (node.children?.every((item) => !item.checked && !item.immediate)) {
+    node.checked = false
+    node.immediate = false
+    checkedKeys.value.delete(node.key)
+  } else {
+    node.checked = false
+    node.immediate = true
+    checkedKeys.value.delete(node.key)
+    !node.disabled && immediateKeySet.value.add(node.key)
+  }
+}
+
+const expandNode = (node: TreeNode | undefined) => {
+  if (!node) return
+  !node.isLeaf && expandedKeySet.value.add(node.key)
+  node.expanded = true
+  if (node.parent) {
+    expandNode(node.parent)
+  }
+}
+const initValue = () => {
+  if (showCheckbox.value) {
+    if (isSetsEqual(checkedKeys.value, new Set(modelValue.value as string[]))) return
+    checkedKeys.value = new Set(modelValue.value as string[])
+
+    Array.isArray(modelValue.value) &&
+      modelValue.value.map((value) => {
+        const node = tree.value?.treeNodeMap.get(value as string)
+        if (node) {
+          toggleChecked(node, true)
+        }
+      })
+  } else {
+    currentNode.value = tree.value?.treeNodeMap.get(modelValue.value as string)
+    expandNode(currentNode.value?.parent)
+  }
+}
+const initDefaultExpandedKeys = () => {
+  defaultExpandedKeys.value.map((key) => {
+    expandNode(tree.value?.treeNodeMap.get(key as string))
+  })
+}
+const updateValue = () => {
+  if (showCheckbox.value) {
+    emit('update:modelValue', Array.from(checkedKeys.value))
+  } else {
+    emit('update:modelValue', currentNode.value?.key)
+  }
+}
+watch(
+  () => data.value,
+  () => {
+    tree.value = createTree(data.value)
+    nextTick(() => {
+      checkedKeys.value = new Set()
+      initValue()
+      initDefaultExpandedKeys()
+    })
+  },
+  {
+    immediate: true
+  }
+)
+watch(
+  () => modelValue.value,
+  () => {
+    initValue()
+  }
+)
+defineExpose({
+  toggleExpand,
+  toggleChecked,
+  tree
+})
+</script>
+
+<style lang="scss" scoped>
+@import './index.scss';
+</style>

package/components/oxy-tree/types.ts

@@ -0,0 +1,48 @@
+import type { ExtractPropTypes } from 'vue'
+import { baseProps, makeArrayProp, makeBooleanProp, makeNumberProp, makeNumericProp, makeStringProp } from '../common/props'
+
+// 原始树节点类型
+export type RawTreeNode = {
+  disabled?: boolean
+  [key: string]: any
+}
+
+// 处理后的树节点类型
+export type TreeNode = {
+  level: number
+  key: string
+  data: RawTreeNode
+  index: number
+  isLast: boolean
+  expanded: boolean
+  label: string
+  parent?: TreeNode
+  children?: TreeNode[]
+  disabled?: boolean
+  isLeaf: boolean
+  checked?: boolean
+  immediate?: boolean
+  isCurrent?: boolean
+}
+
+export const textProps = {
+  ...baseProps,
+  data: makeArrayProp<RawTreeNode>(),
+  showCheckbox: makeBooleanProp(false),
+  childrenKey: makeStringProp('children'),
+  labelKey: makeStringProp('name'),
+  valueKey: makeStringProp('id'),
+  defaultExpandedKeys: makeArrayProp<string>(),
+  expandAll: makeBooleanProp(false),
+  checkStrictly: makeBooleanProp(false),
+  modelValue: {
+    type: [Array<string>, String],
+    default: ''
+  },
+  emptyText: makeStringProp('暂无数据'),
+  maxHeight: makeStringProp('300px'),
+  indent: makeNumberProp(16),
+  selectionLeafOnly: makeBooleanProp(false)
+}
+
+export type TextProps = ExtractPropTypes<typeof textProps>

package/components/oxy-upload/index.scss

@@ -46,6 +46,10 @@
     }
   }
 
+  @include e(evoke-file) {
+    border-radius: 8px;
+  }
+
   @include e(evoke-num) {
     font-size: 14px;
     line-height: 14px;
@@ -172,4 +176,50 @@
     width: 100%;
     height: 100%;
   }
+
+  @include e(preview-file) {
+    margin-bottom: 32px;
+    .oxy-upload__status-content:not(.oxy-upload__mask) {
+      border: 1px solid $-color-border;
+      box-sizing: border-box;
+      border-radius: 8px;
+      .oxy-upload__picture {
+        border-radius: 8px;
+      }
+      .oxy-upload__picture-icon {
+        width: 32px;
+        height: 32px;
+      }
+    }
+    .oxy-upload__mask {
+      border-radius: 8px;
+    }
+    :deep(.oxy-tooltip) {
+      width: 100%;
+      .oxy-tooltip__inner {
+        width: fit-content;
+        white-space: pre-wrap;
+        word-break: break-all;
+      }
+    }
+    .oxy-upload____status-content-name {
+      display: block;
+      width: 100%;
+      font-size: $-upload-file-fs;
+      color: $-upload-file-color;
+      box-sizing: border-box;
+      padding: 0 4px;
+      text-align: center;
+      margin-top: 8px;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+  }
+
+  &.oxy-upload__position-right {
+    .oxy-upload__evoke {
+      margin-right: 12px;
+    }
+  }
 }