packages/tree-dnd/src/styles.ts - develop - kaws/ui-kit-ce

packages/tree-dnd/src/styles.ts

89 строк3 KB

Урядышев Павел Александрович

fix(tree-dnd): исправлена работоспособность компонента и устранены визуальные дефекты

08 сен 2025, 21:01

08 сен 2025, 21:01d19179a

import { createUseStyles } from '@v-uik/theme'

export const useStyles = createUseStyles((theme) => {
  const triangleStyles = {
    display: 'block',
    width: 0,
    height: 0,
    content: '""',
    marginTop: -5,
    borderTop: '6px solid transparent',
    borderBottom: '6px solid transparent',
  }

  return {
    itemWrapper: {
      position: 'relative',
      padding: 0,
    },
    itemContainer: {
      listStyle: 'none',
      position: 'relative',
    },
    itemDraggable: {
      pointerEvents: 'none',
    },
    nodeDraggable: {
      pointerEvents: 'none',
      backgroundColor: theme.comp.tree.colorBackgroundSelected,
    },
    itemDraggableDisabled: {},
    nodeDraggableDisabled: {},
    itemDropTargetDisabled: {},
    nodeDropTargetDisabled: {},
    nodeDropTarget: {
      '&::before': {
        content: "''",
        position: 'absolute',
        height: `calc(100% - ${theme.comp.tree.dropTargetWidthBorder * 2}px)`,
        width: `calc(100% - ${theme.comp.tree.dropTargetWidthBorder * 2}px)`,
        borderRadius: 'inherit',
        boxShadow: `0 0 0 ${theme.comp.tree.dropTargetWidthBorder}px ${theme.comp.tree.dropTargetColorBorder}`,
        left: theme.comp.tree.dropTargetWidthBorder,
        top: theme.comp.tree.dropTargetWidthBorder,
      },
    },
    itemDropTarget: {},
    dropBetweenIndicatorLine: {
      height: 0,
      borderBottom: `2px solid ${theme.comp.tree.dropBetweenIndicatorColorBorder}`,
      width: '100%',
      display: 'flex',
      justifyContent: 'space-between',
      zIndex: 1,
      '&::before': {
        borderLeft: `12px solid ${theme.comp.tree.colorShadowFocus}`,
        ...triangleStyles,
      },
      '&::after': {
        borderRight: `12px solid ${theme.comp.tree.colorShadowFocus}`,
        ...triangleStyles,
      },
    },
    itemDragOver: {},
    nodeDragOver: {},
    dragButton: {
      display: 'flex',
      position: 'relative',
      minWidth: 24,
      boxSizing: 'content-box',
      minHeight: 24,
      alignItems: 'center',
      justifyContent: 'center',
      cursor: 'grab',
    },
    itemDropTargetParent: {},
    nodeDropTargetParent: {
      '&::before': {
        content: "''",
        position: 'absolute',
        height: `calc(100% - ${theme.comp.tree.dropTargetParentWidthBorder}px)`,
        width: `calc(100% - ${theme.comp.tree.dropTargetParentWidthBorder}px)`,
        borderRadius: 'inherit',
        boxShadow: `0 0 0 ${theme.comp.tree.dropTargetParentWidthBorder}px ${theme.comp.tree.dropTargetParentColorBorder}`,
        left: theme.comp.tree.dropTargetParentWidthBorder / 2,
        top: theme.comp.tree.dropTargetParentWidthBorder,
      },
    },
  }
})