@antsoo-lib/components 0.1.2 → 0.1.4

package/src/tree/style/index.ts

@@ -0,0 +1,482 @@
+import type { CSSInterpolation, CSSObject } from '../../_util/cssinjs'
+import { Keyframes } from '../../_util/cssinjs'
+import { getStyle as getCheckboxStyle } from '../../checkbox/style'
+import { genFocusOutline, resetComponent } from '../../style'
+import { genCollapseMotion } from '../../style/motion'
+import type { DerivativeToken } from '../../theme/internal'
+import { genComponentStyleHook, mergeToken } from '../../theme/internal'
+
+// ============================ Keyframes =============================
+const treeNodeFX = new Keyframes('ant-tree-node-fx-do-not-use', {
+  '0%': {
+    opacity: 0,
+  },
+  '100%': {
+    opacity: 1,
+  },
+})
+
+// ============================== Switch ==============================
+const getSwitchStyle = (prefixCls: string, token: DerivativeToken): CSSObject => ({
+  [`.${prefixCls}-switcher-icon`]: {
+    display: 'inline-block',
+    fontSize: 10,
+    verticalAlign: 'baseline',
+
+    svg: {
+      transition: `transform ${token.motionDurationSlow}`,
+    },
+  },
+})
+
+// =============================== Drop ===============================
+const getDropIndicatorStyle = (prefixCls: string, token: DerivativeToken) => ({
+  [`.${prefixCls}-drop-indicator`]: {
+    position: 'absolute',
+    // it should displayed over the following node
+    zIndex: 1,
+    height: 2,
+    backgroundColor: token.colorPrimary,
+    borderRadius: 1,
+    pointerEvents: 'none',
+
+    '&:after': {
+      position: 'absolute',
+      top: -3,
+      insetInlineStart: -6,
+      width: 8,
+      height: 8,
+      backgroundColor: 'transparent',
+      border: `${token.lineWidthBold}px solid ${token.colorPrimary}`,
+      borderRadius: '50%',
+      content: '""',
+    },
+  },
+})
+
+// =============================== Base ===============================
+type TreeToken = DerivativeToken & {
+  treeCls: string
+  treeNodeCls: string
+  treeNodePadding: number
+  treeTitleHeight: number
+}
+
+export const genBaseStyle = (prefixCls: string, token: TreeToken): CSSObject => {
+  const { treeCls, treeNodeCls, treeNodePadding, treeTitleHeight } = token
+
+  const treeCheckBoxMarginVertical = (treeTitleHeight - token.fontSizeLG) / 2
+  const treeCheckBoxMarginHorizontal = token.paddingXS
+
+  return {
+    [treeCls]: {
+      ...resetComponent(token),
+      background: token.colorBgContainer,
+      borderRadius: token.borderRadius,
+      transition: `background-color ${token.motionDurationSlow}`,
+
+      [`&${treeCls}-rtl`]: {
+        // >>> Switcher
+        [`${treeCls}-switcher`]: {
+          '&_close': {
+            [`${treeCls}-switcher-icon`]: {
+              svg: {
+                transform: 'rotate(90deg)',
+              },
+            },
+          },
+        },
+      },
+
+      [`&-focused:not(:hover):not(${treeCls}-active-focused)`]: {
+        ...genFocusOutline(token),
+      },
+
+      // =================== Virtual List ===================
+      [`${treeCls}-list-holder-inner`]: {
+        alignItems: 'flex-start',
+      },
+
+      [`&${treeCls}-block-node`]: {
+        [`${treeCls}-list-holder-inner`]: {
+          alignItems: 'stretch',
+
+          // >>> Title
+          [`${treeCls}-node-content-wrapper`]: {
+            flex: 'auto',
+          },
+
+          // >>> Drag
+          [`${treeNodeCls}.dragging`]: {
+            position: 'relative',
+
+            '&:after': {
+              position: 'absolute',
+              top: 0,
+              insetInlineEnd: 0,
+              bottom: treeNodePadding,
+              insetInlineStart: 0,
+              border: `1px solid ${token.colorPrimary}`,
+              opacity: 0,
+              animationName: treeNodeFX,
+              animationDuration: token.motionDurationSlow,
+              animationPlayState: 'running',
+              animationFillMode: 'forwards',
+              content: '""',
+              pointerEvents: 'none',
+            },
+          },
+        },
+      },
+
+      // ===================== TreeNode =====================
+      [`${treeNodeCls}`]: {
+        display: 'flex',
+        alignItems: 'flex-start',
+        padding: `0 0 ${treeNodePadding}px 0`,
+        outline: 'none',
+
+        '&-rtl': {
+          direction: 'rtl',
+        },
+
+        // Disabled
+        '&-disabled': {
+          // >>> Title
+          [`${treeCls}-node-content-wrapper`]: {
+            color: token.colorTextDisabled,
+            cursor: 'not-allowed',
+            '&:hover': {
+              background: 'transparent',
+            },
+          },
+        },
+
+        [`&-active ${treeCls}-node-content-wrapper`]: {
+          ...genFocusOutline(token),
+        },
+
+        [`&:not(${treeNodeCls}-disabled).filter-node ${treeCls}-title`]: {
+          color: 'inherit',
+          fontWeight: 500,
+        },
+
+        '&-draggable': {
+          [`${treeCls}-draggable-icon`]: {
+            width: treeTitleHeight,
+            lineHeight: `${treeTitleHeight}px`,
+            textAlign: 'center',
+            visibility: 'visible',
+            opacity: 0.2,
+            transition: `opacity ${token.motionDurationSlow}`,
+
+            [`${treeNodeCls}:hover &`]: {
+              opacity: 0.45,
+            },
+          },
+
+          [`&${treeNodeCls}-disabled`]: {
+            [`${treeCls}-draggable-icon`]: {
+              visibility: 'hidden',
+            },
+          },
+        },
+      },
+
+      // >>> Indent
+      [`${treeCls}-indent`]: {
+        alignSelf: 'stretch',
+        whiteSpace: 'nowrap',
+        userSelect: 'none',
+        '&-unit': {
+          display: 'inline-block',
+          width: treeTitleHeight,
+        },
+      },
+
+      // >>> Drag Handler
+      [`${treeCls}-draggable-icon`]: {
+        visibility: 'hidden',
+      },
+
+      // >>> Switcher
+      [`${treeCls}-switcher`]: {
+        ...getSwitchStyle(prefixCls, token),
+        position: 'relative',
+        flex: 'none',
+        alignSelf: 'stretch',
+        width: treeTitleHeight,
+        margin: 0,
+        lineHeight: `${treeTitleHeight}px`,
+        textAlign: 'center',
+        cursor: 'pointer',
+        userSelect: 'none',
+
+        '&-noop': {
+          cursor: 'default',
+        },
+
+        '&_close': {
+          [`${treeCls}-switcher-icon`]: {
+            svg: {
+              transform: 'rotate(-90deg)',
+            },
+          },
+        },
+
+        '&-loading-icon': {
+          color: token.colorPrimary,
+        },
+
+        '&-leaf-line': {
+          position: 'relative',
+          zIndex: 1,
+          display: 'inline-block',
+          width: '100%',
+          height: '100%',
+
+          // https://github.com/ant-design/ant-design/issues/31884
+          '&:before': {
+            position: 'absolute',
+            top: 0,
+            insetInlineEnd: treeTitleHeight / 2,
+            bottom: -treeNodePadding,
+            marginInlineStart: -1,
+            borderInlineEnd: `1px solid ${token.colorBorder}`,
+            content: '""',
+          },
+
+          '&:after': {
+            position: 'absolute',
+            width: (treeTitleHeight / 2) * 0.8,
+            height: treeTitleHeight / 2,
+            borderBottom: `1px solid ${token.colorBorder}`,
+            content: '""',
+          },
+        },
+      },
+
+      // >>> Checkbox
+      [`${treeCls}-checkbox`]: {
+        top: 'initial',
+        marginInlineEnd: treeCheckBoxMarginHorizontal,
+        marginBlockStart: treeCheckBoxMarginVertical,
+      },
+
+      // >>> Title
+      // add `${treeCls}-checkbox + span` to cover checkbox `${checkboxCls} + span`
+      [`${treeCls}-node-content-wrapper, ${treeCls}-checkbox + span`]: {
+        position: 'relative',
+        zIndex: 'auto',
+        minHeight: treeTitleHeight,
+        margin: 0,
+        padding: `0 ${token.paddingXS / 2}px`,
+        color: 'inherit',
+        lineHeight: `${treeTitleHeight}px`,
+        background: 'transparent',
+        borderRadius: token.borderRadius,
+        cursor: 'pointer',
+        transition: `all ${token.motionDurationMid}, border 0s, line-height 0s, box-shadow 0s`,
+
+        '&:hover': {
+          backgroundColor: token.controlItemBgHover,
+        },
+
+        [`&${treeCls}-node-selected`]: {
+          backgroundColor: token.controlItemBgActive,
+        },
+
+        // Icon
+        [`${treeCls}-iconEle`]: {
+          display: 'inline-block',
+          width: treeTitleHeight,
+          height: treeTitleHeight,
+          lineHeight: `${treeTitleHeight}px`,
+          textAlign: 'center',
+          verticalAlign: 'top',
+
+          '&:empty': {
+            display: 'none',
+          },
+        },
+      },
+
+      // https://github.com/ant-design/ant-design/issues/28217
+      [`${treeCls}-unselectable ${treeCls}-node-content-wrapper:hover`]: {
+        backgroundColor: 'transparent',
+      },
+
+      // ==================== Draggable =====================
+      [`${treeCls}-node-content-wrapper`]: {
+        lineHeight: `${treeTitleHeight}px`,
+        userSelect: 'none',
+
+        ...getDropIndicatorStyle(prefixCls, token),
+      },
+
+      [`${treeNodeCls}.drop-container`]: {
+        '> [draggable]': {
+          boxShadow: `0 0 0 2px ${token.colorPrimary}`,
+        },
+      },
+
+      // ==================== Show Line =====================
+      '&-show-line': {
+        // ================ Indent lines ================
+        [`${treeCls}-indent`]: {
+          '&-unit': {
+            position: 'relative',
+            height: '100%',
+
+            '&:before': {
+              position: 'absolute',
+              top: 0,
+              insetInlineEnd: treeTitleHeight / 2,
+              bottom: -treeNodePadding,
+              borderInlineEnd: `1px solid ${token.colorBorder}`,
+              content: '""',
+            },
+
+            '&-end': {
+              '&:before': {
+                display: 'none',
+              },
+            },
+          },
+        },
+
+        // ============== Cover Background ==============
+        [`${treeCls}-switcher`]: {
+          background: 'transparent',
+
+          '&-line-icon': {
+            // https://github.com/ant-design/ant-design/issues/32813
+            verticalAlign: '-0.15em',
+          },
+        },
+      },
+
+      [`${treeNodeCls}-leaf-last`]: {
+        [`${treeCls}-switcher`]: {
+          '&-leaf-line': {
+            '&:before': {
+              top: 'auto !important',
+              bottom: 'auto !important',
+              height: `${treeTitleHeight / 2}px !important`,
+            },
+          },
+        },
+      },
+    },
+  }
+}
+
+// ============================ Directory =============================
+export const genDirectoryStyle = (token: TreeToken): CSSObject => {
+  const { treeCls, treeNodeCls, treeNodePadding } = token
+
+  return {
+    [`${treeCls}${treeCls}-directory`]: {
+      // ================== TreeNode ==================
+      [treeNodeCls]: {
+        position: 'relative',
+
+        // Hover color
+        '&:before': {
+          position: 'absolute',
+          top: 0,
+          insetInlineEnd: 0,
+          bottom: treeNodePadding,
+          insetInlineStart: 0,
+          transition: `background-color ${token.motionDurationMid}`,
+          content: '""',
+          pointerEvents: 'none',
+        },
+
+        '&:hover': {
+          '&:before': {
+            background: token.controlItemBgHover,
+          },
+        },
+
+        // Elements
+        '> *': {
+          zIndex: 1,
+        },
+
+        // >>> Switcher
+        [`${treeCls}-switcher`]: {
+          transition: `color ${token.motionDurationMid}`,
+        },
+
+        // >>> Title
+        [`${treeCls}-node-content-wrapper`]: {
+          borderRadius: 0,
+          userSelect: 'none',
+
+          '&:hover': {
+            background: 'transparent',
+          },
+
+          [`&${treeCls}-node-selected`]: {
+            color: token.colorTextLightSolid,
+            background: 'transparent',
+          },
+        },
+
+        // ============= Selected =============
+        '&-selected': {
+          [`
+            &:hover::before,
+            &::before
+          `]: {
+            background: token.colorPrimary,
+          },
+
+          // >>> Switcher
+          [`${treeCls}-switcher`]: {
+            color: token.colorTextLightSolid,
+          },
+
+          // >>> Title
+          [`${treeCls}-node-content-wrapper`]: {
+            color: token.colorTextLightSolid,
+            background: 'transparent',
+          },
+        },
+      },
+    },
+  }
+}
+
+// ============================== Merged ==============================
+export const genTreeStyle = (prefixCls: string, token: DerivativeToken): CSSInterpolation => {
+  const treeCls = `.${prefixCls}`
+  const treeNodeCls = `${treeCls}-treenode`
+
+  const treeNodePadding = token.paddingXS / 2
+  const treeTitleHeight = token.controlHeightSM
+
+  const treeToken = mergeToken<TreeToken>(token, {
+    treeCls,
+    treeNodeCls,
+    treeNodePadding,
+    treeTitleHeight,
+  })
+
+  return [
+    // Basic
+    genBaseStyle(prefixCls, treeToken),
+    // Directory
+    genDirectoryStyle(treeToken),
+  ]
+}
+
+// ============================== Export ==============================
+export default genComponentStyleHook('Tree', (token, { prefixCls }) => [
+  {
+    [token.componentCls]: getCheckboxStyle(`${prefixCls}-checkbox`, token),
+  },
+  genTreeStyle(prefixCls, token),
+  genCollapseMotion(token),
+])

package/src/tree/utils/dictUtil.ts

@@ -0,0 +1,100 @@
+import type { DataNode, FieldNames, Key } from '../../vc-tree/interface'
+
+enum Record {
+  None,
+  Start,
+  End,
+}
+
+function traverseNodesKey(
+  treeData: DataNode[],
+  fieldNames: FieldNames,
+  callback: (key: Key | number | null, node: DataNode) => boolean,
+) {
+  function processNode(dataNode: DataNode) {
+    const key = dataNode[fieldNames.key]
+    const children = dataNode[fieldNames.children]
+    if (callback(key, dataNode) !== false) {
+      traverseNodesKey(children || [], fieldNames, callback)
+    }
+  }
+
+  treeData.forEach(processNode)
+}
+
+/** 计算选中范围，只考虑expanded情况以优化性能 */
+export function calcRangeKeys({
+  treeData,
+  expandedKeys,
+  startKey,
+  endKey,
+  fieldNames = {
+    title: 'title',
+    key: 'key',
+    children: 'children',
+  },
+}: {
+  treeData: DataNode[]
+  expandedKeys: Key[]
+  startKey?: Key
+  endKey?: Key
+  fieldNames?: FieldNames
+}): Key[] {
+  const keys: Key[] = []
+  let record: Record = Record.None
+
+  if (startKey && startKey === endKey) {
+    return [startKey]
+  }
+  if (!startKey || !endKey) {
+    return []
+  }
+
+  function matchKey(key: Key) {
+    return key === startKey || key === endKey
+  }
+
+  traverseNodesKey(treeData, fieldNames, (key: Key) => {
+    if (record === Record.End) {
+      return false
+    }
+
+    if (matchKey(key)) {
+      // Match test
+      keys.push(key)
+
+      if (record === Record.None) {
+        record = Record.Start
+      } else if (record === Record.Start) {
+        record = Record.End
+        return false
+      }
+    } else if (record === Record.Start) {
+      // Append selection
+      keys.push(key)
+    }
+
+    return expandedKeys.includes(key)
+  })
+
+  return keys
+}
+
+export function convertDirectoryKeysToNodes(
+  treeData: DataNode[],
+  keys: Key[],
+  fieldNames: FieldNames,
+) {
+  const restKeys: Key[] = [...keys]
+  const nodes: DataNode[] = []
+  traverseNodesKey(treeData, fieldNames, (key: Key, node: DataNode) => {
+    const index = restKeys.indexOf(key)
+    if (index !== -1) {
+      nodes.push(node)
+      restKeys.splice(index, 1)
+    }
+
+    return !!restKeys.length
+  })
+  return nodes
+}

package/src/tree/utils/dropIndicator.tsx

@@ -0,0 +1,33 @@
+import type { CSSProperties } from 'vue'
+
+export const offset = 4
+
+export default function dropIndicatorRender(props: {
+  dropPosition: -1 | 0 | 1
+  dropLevelOffset: number
+  indent: number
+  prefixCls: string
+  direction: 'ltr' | 'rtl'
+}) {
+  const { dropPosition, dropLevelOffset, prefixCls, indent, direction = 'ltr' } = props
+  const startPosition = direction === 'ltr' ? 'left' : 'right'
+  const endPosition = direction === 'ltr' ? 'right' : 'left'
+  const style: CSSProperties = {
+    [startPosition]: `${-dropLevelOffset * indent + offset}px`,
+    [endPosition]: 0,
+  }
+  switch (dropPosition) {
+    case -1:
+      style.top = `${-3}px`
+      break
+    case 1:
+      style.bottom = `${-3}px`
+      break
+    default:
+      // dropPosition === 0
+      style.bottom = `${-3}px`
+      style[startPosition] = `${indent + offset}px`
+      break
+  }
+  return <div style={style} class={`${prefixCls}-drop-indicator`} />
+}

package/src/tree/utils/iconUtil.tsx

@@ -0,0 +1,67 @@
+import CaretDownFilled from '@ant-design/icons-vue/CaretDownFilled'
+import FileOutlined from '@ant-design/icons-vue/FileOutlined'
+import LoadingOutlined from '@ant-design/icons-vue/LoadingOutlined'
+import MinusSquareOutlined from '@ant-design/icons-vue/MinusSquareOutlined'
+import PlusSquareOutlined from '@ant-design/icons-vue/PlusSquareOutlined'
+
+import { cloneVNode } from 'vue'
+
+import { isValidElement } from '../../_util/props-util'
+import type { AntTreeNodeProps } from '../Tree'
+
+export interface SwitcherIconProps extends AntTreeNodeProps {
+  expanded: boolean
+  loading: boolean
+}
+export default function renderSwitcherIcon(
+  prefixCls: string,
+  switcherIcon: any,
+  props: SwitcherIconProps,
+  leafIcon?: (props: SwitcherIconProps) => any,
+  showLine?: boolean | { showLeafIcon: boolean } | undefined,
+) {
+  const { isLeaf, expanded, loading } = props
+  let icon = switcherIcon
+  if (loading) {
+    return <LoadingOutlined class={`${prefixCls}-switcher-loading-icon`} />
+  }
+  let showLeafIcon: boolean
+  if (showLine && typeof showLine === 'object') {
+    showLeafIcon = showLine.showLeafIcon
+  }
+  let defaultIcon = null
+  const switcherCls = `${prefixCls}-switcher-icon`
+  if (isLeaf) {
+    if (!showLine) {
+      return null
+    }
+    if (showLeafIcon && leafIcon) {
+      return leafIcon(props)
+    }
+    if (typeof showLine === 'object' && !showLeafIcon) {
+      defaultIcon = <span class={`${prefixCls}-switcher-leaf-line`} />
+    } else {
+      defaultIcon = <FileOutlined class={`${prefixCls}-switcher-line-icon`} />
+    }
+    return defaultIcon
+  } else {
+    defaultIcon = <CaretDownFilled class={switcherCls} />
+    if (showLine) {
+      defaultIcon = expanded ? (
+        <MinusSquareOutlined class={`${prefixCls}-switcher-line-icon`} />
+      ) : (
+        <PlusSquareOutlined class={`${prefixCls}-switcher-line-icon`} />
+      )
+    }
+  }
+
+  if (typeof switcherIcon === 'function') {
+    icon = switcherIcon({ ...props, defaultIcon, switcherCls })
+  } else if (isValidElement(icon)) {
+    icon = cloneVNode(icon, {
+      class: switcherCls,
+    })
+  }
+
+  return icon || defaultIcon
+}