@rainbow-oh/yee-c 0.1.0 → 0.2.0

package/dist/cjs/Splitter/splitter.js

@@ -165,58 +165,61 @@ var Wrapper = (_a) => {
   const refs = (0, import_react.useRef)({});
   const arr = import_react.default.Children.toArray(children);
   import_react.default.Children.forEach(children, (child, index) => {
-    const n = index + 1;
-    const { style } = child.props || {};
-    let currentSize;
-    let min = void 0;
-    let max = void 0;
-    if (itemsSize && itemsSize[index]) {
-      ({ currentSize, min, max } = itemsSize[index]);
-    }
-    wrappered.push(
-      import_react.default.cloneElement(child, {
-        style: __spreadProps(__spreadValues({}, style), {
-          // If there is a border or other size-related design, it may cause calculation issues
-          flexBasis: currentSize
-        }),
-        min,
-        max,
-        index: n,
-        key: n,
-        ref: (el) => {
-          refs.current[`item${n}`] = {
-            el,
-            props: child.props,
-            size: { min, max }
-          };
-        }
-      })
-    );
-    const next = arr[index + 1];
-    if (!next || !import_react.default.isValidElement(next)) {
-      return;
-    }
-    const { flexable, expandable } = child.props || {};
-    const { expandable: nextExpandable } = next.props || {};
-    const _expandable = { start: false, end: false };
-    if (expandable) {
-      _expandable.start = true;
-    }
-    if (nextExpandable) {
-      _expandable.end = true;
-    }
-    wrappered.push(
-      /* @__PURE__ */ import_react.default.createElement(
-        import_splitter_handler.default,
-        __spreadProps(__spreadValues({}, props), {
+    if (import_react.default.isValidElement(child)) {
+      const n = index + 1;
+      const { style } = child.props || {};
+      let currentSize;
+      let min = void 0;
+      let max = void 0;
+      if (itemsSize && itemsSize[index]) {
+        ({ currentSize, min, max } = itemsSize[index]);
+      }
+      wrappered.push(
+        import_react.default.cloneElement(child, {
+          // @ts-ignore
+          style: __spreadProps(__spreadValues({}, style), {
+            // If there is a border or other size-related design, it may cause calculation issues
+            flexBasis: currentSize
+          }),
+          min,
+          max,
           index: n,
-          flexable,
-          expandable: _expandable,
-          onClick,
-          key: `handler-${n}`
+          key: n,
+          ref: (el) => {
+            refs.current[`item${n}`] = {
+              el,
+              props: child.props,
+              size: { min, max }
+            };
+          }
         })
-      )
-    );
+      );
+      const next = arr[index + 1];
+      if (!next || !import_react.default.isValidElement(next)) {
+        return;
+      }
+      const { flexable, expandable } = child.props || {};
+      const { expandable: nextExpandable } = next.props || {};
+      const _expandable = { start: false, end: false };
+      if (expandable) {
+        _expandable.start = true;
+      }
+      if (nextExpandable) {
+        _expandable.end = true;
+      }
+      wrappered.push(
+        /* @__PURE__ */ import_react.default.createElement(
+          import_splitter_handler.default,
+          __spreadProps(__spreadValues({}, props), {
+            index: n,
+            flexable,
+            expandable: _expandable,
+            onClick,
+            key: `handler-${n}`
+          })
+        )
+      );
+    }
   });
   return /* @__PURE__ */ import_react.default.createElement(SplitterWrapperCtx.Provider, { value: { refs } }, wrappered);
 };

package/dist/cjs/Splitter/style/index.less

@@ -10,8 +10,18 @@
       var(--yee-splitter-border-color);
   }
 
+  &-horizontal {
+    @{pls}-handler {
+      cursor: e-resize;
+    }
+  }
+
   &-vertical {
     flex-direction: column;
+
+    @{pls}-handler {
+      cursor: n-resize;
+    }
   }
 }
 
@@ -77,8 +87,19 @@
       transition:
         background 0.2s ease-in-out,
         opacity 0.2s ease-in-out;
+      border-radius: 2px;
       content: '';
     }
+
+    &:hover {
+      &::after {
+        background-color: color-mix(
+          in srgb,
+          var(--yee-splitter-handler-color),
+          black 20%
+        );
+      }
+    }
   }
 
   &-flexable {

package/dist/cjs/Table/demo/size.js

@@ -72,5 +72,5 @@ var size_default = () => {
       address: "Sidney No. 1 Lake Park"
     }
   ];
-  return /* @__PURE__ */ import_react.default.createElement(import_yee_c.Space, { direction: "vertical", style: { width: "100%" } }, /* @__PURE__ */ import_react.default.createElement(import_yee_c.Table, { columns, dataSource, size: "small" }), /* @__PURE__ */ import_react.default.createElement(import_yee_c.Table, { columns, dataSource, size: "default" }), /* @__PURE__ */ import_react.default.createElement(import_yee_c.Table, { columns, dataSource, size: "large" }));
+  return /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement(import_yee_c.Table, { columns, dataSource, size: "small" }), /* @__PURE__ */ import_react.default.createElement(import_yee_c.Table, { columns, dataSource, size: "default" }), /* @__PURE__ */ import_react.default.createElement(import_yee_c.Table, { columns, dataSource, size: "large" }));
 };

package/dist/cjs/Tabs/hooks/useTabScroll.d.ts

@@ -7,6 +7,6 @@ interface UseTabScrollOptions {
 }
 export declare function useTabScroll({ direction, navContainer, navList, enabled, }: UseTabScrollOptions): {
     refreshKey: number;
-    updateShadow: () => void;
+    updateShadow: import("../../utils/debounce").Debounced<() => void>;
 };
 export {};

package/dist/cjs/Tabs/interface.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import type { DataAttributeProps } from '../utils/types';
-type SemanticDOM = 'header' | 'content';
+type SemanticDOM = 'header' | 'content' | 'track' | 'list' | 'activeBar';
 export type TabItemType = {
     /**
      * Unique key corresponding to activeKey

package/dist/cjs/Tabs/style/index.less

@@ -522,6 +522,10 @@
   // background-color: var(--yee-color-bg-container);
 }
 
+@{pls}-tab-content {
+  height: 100%;
+}
+
 @{pls}-active {
   z-index: 2;
 

package/dist/cjs/Tabs/tab-header/index.js

@@ -63,7 +63,15 @@ var TabHeaderCtx = (0, import_react.createContext)(
 );
 var TabHeader = (props) => {
   const { items, activeKey } = (0, import_react.useContext)(import_tabs.TabsCtx);
-  const { prefixCls, type, position = "top", headerExtra, onEdit } = props;
+  const {
+    prefixCls,
+    type,
+    position = "top",
+    headerExtra,
+    classNames,
+    styles,
+    onEdit
+  } = props;
   const direction = position === "top" || position === "bottom" ? "horizontal" : "vertical";
   const activebar = (0, import_react.useRef)(null);
   const activetab = (0, import_react.useRef)(null);
@@ -125,7 +133,8 @@ var TabHeader = (props) => {
   );
   const cls = (0, import_clsx.default)(
     `${prefixCls}-nav-wrapper`,
-    `${prefixCls}-nav-wrapper-${position}`
+    `${prefixCls}-nav-wrapper-${position}`,
+    classNames == null ? void 0 : classNames.header
   );
   const contextValue = {
     activetab,
@@ -135,32 +144,54 @@ var TabHeader = (props) => {
     refreshDropdownTabs: refreshKey,
     setRange
   };
-  return /* @__PURE__ */ import_react.default.createElement("div", { className: cls }, renderPrefixExtra(), /* @__PURE__ */ import_react.default.createElement(TabHeaderCtx.Provider, { value: contextValue }, /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefixCls}-nav-wrap`, ref: navContainer }, /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefixCls}-nav-list`, ref: navList }, items == null ? void 0 : items.map((item, index) => /* @__PURE__ */ import_react.default.createElement(
-    import_tab_header_title.default,
-    __spreadProps(__spreadValues({}, item), {
-      $key: item.key,
-      key: item.key,
-      index
-    })
-  )), !type && /* @__PURE__ */ import_react.default.createElement(
+  return /* @__PURE__ */ import_react.default.createElement("div", { className: cls, style: styles == null ? void 0 : styles.header }, renderPrefixExtra(), /* @__PURE__ */ import_react.default.createElement(TabHeaderCtx.Provider, { value: contextValue }, /* @__PURE__ */ import_react.default.createElement(
     "div",
     {
-      className: `${prefixCls}-active-bar`,
-      ref: activebar,
-      "aria-hidden": "true"
-    }
-  ), type === "editable-card" && /* @__PURE__ */ import_react.default.createElement(
-    "span",
-    {
-      className: `${prefixCls}-nav-add`,
-      onClick: handleAddTab,
-      role: "button",
-      tabIndex: 0,
-      "aria-label": "Add tab",
-      onKeyDown: handleAddKeyDown
+      className: (0, import_clsx.default)(`${prefixCls}-nav-wrap`, classNames == null ? void 0 : classNames.track),
+      style: styles == null ? void 0 : styles.track,
+      ref: navContainer
     },
-    /* @__PURE__ */ import_react.default.createElement(import_lucide_react.Plus, { size: 14, strokeWidth: 1.5 })
-  ))), moreOpen && /* @__PURE__ */ import_react.default.createElement(import_dropdown_tabs.default, { visible: moreOpen, items: items || [], range }, /* @__PURE__ */ import_react.default.createElement(
+    /* @__PURE__ */ import_react.default.createElement(
+      "div",
+      {
+        className: (0, import_clsx.default)(`${prefixCls}-nav-list`, classNames == null ? void 0 : classNames.list),
+        style: styles == null ? void 0 : styles.list,
+        ref: navList
+      },
+      items == null ? void 0 : items.map((item, index) => /* @__PURE__ */ import_react.default.createElement(
+        import_tab_header_title.default,
+        __spreadProps(__spreadValues({}, item), {
+          $key: item.key,
+          key: item.key,
+          index
+        })
+      )),
+      !type && /* @__PURE__ */ import_react.default.createElement(
+        "div",
+        {
+          className: (0, import_clsx.default)(
+            `${prefixCls}-active-bar`,
+            classNames == null ? void 0 : classNames.activeBar
+          ),
+          style: styles == null ? void 0 : styles.activeBar,
+          ref: activebar,
+          "aria-hidden": "true"
+        }
+      ),
+      type === "editable-card" && /* @__PURE__ */ import_react.default.createElement(
+        "span",
+        {
+          className: `${prefixCls}-nav-add`,
+          onClick: handleAddTab,
+          role: "button",
+          tabIndex: 0,
+          "aria-label": "Add tab",
+          onKeyDown: handleAddKeyDown
+        },
+        /* @__PURE__ */ import_react.default.createElement(import_lucide_react.Plus, { size: 14, strokeWidth: 1.5 })
+      )
+    )
+  ), moreOpen && /* @__PURE__ */ import_react.default.createElement(import_dropdown_tabs.default, { visible: moreOpen, items: items || [], range }, /* @__PURE__ */ import_react.default.createElement(
     import_Button.default,
     {
       className: `${prefixCls}-nav-more`,

package/dist/cjs/Tooltip/interface.d.ts

@@ -10,4 +10,8 @@ export interface TooltipProps extends Omit<TriggerProps, 'popup'> {
      * @default 0.1
      */
     mouseEnterDelay?: number;
+    /***
+     * Tooltip custom background color
+     * */
+    color?: string;
 }

package/dist/cjs/Tooltip/style/index.less

@@ -8,19 +8,19 @@
 
   &-arrow {
     &::after {
-      position: absolute;
-      bottom: 0;
-      z-index: 0;
-      width: var(--yee-tooltip-arrow-width);
-      height: var(--yee-tooltip-arrow-height);
-      margin: auto;
+      // position: absolute;
+      // bottom: 0;
+      // z-index: 0;
+      // width: var(--yee-tooltip-arrow-width);
+      // height: var(--yee-tooltip-arrow-height);
+      // margin: auto;
       background-color: var(--yee-tooltip-bg-color);
       border-radius: var(--yee-tooltip-arrow-border-radius);
       box-shadow: var(--yee-box-shadow-popover-arrow);
       transform: translateY(var(--yee-tooltip-arrow-translate-y))
         rotate(var(--yee-tooltip-arrow-rotate));
-      content: '';
-      inset-inline: 0;
+      // content: '';
+      // inset-inline: 0;
     }
   }
 }

package/dist/cjs/Tooltip/tooltip.js

@@ -76,7 +76,10 @@ var Tooltip = (baseprops) => {
     children,
     placement = "top",
     trigger = ["hover", "focus"],
-    mouseEnterDelay = 0.1
+    mouseEnterDelay = 0.1,
+    color,
+    popupStyle,
+    hideOnClick = false
   } = _a, rest = __objRest(_a, [
     "prefixCls",
     "title",
@@ -84,8 +87,12 @@ var Tooltip = (baseprops) => {
     "children",
     "placement",
     "trigger",
-    "mouseEnterDelay"
+    "mouseEnterDelay",
+    "color",
+    "popupStyle",
+    "hideOnClick"
   ]);
+  const mergedPopupStyle = __spreadValues(__spreadValues({}, color ? { ["--yee-tooltip-bg-color"]: color } : null), popupStyle);
   const popup = /* @__PURE__ */ import_react.default.createElement("span", { className: `${prefixCls}-content`, role: "tooltip" }, typeof title === "function" ? title() : title);
   return /* @__PURE__ */ import_react.default.createElement(
     import_Trigger.default,
@@ -95,7 +102,8 @@ var Tooltip = (baseprops) => {
       popup,
       arrow,
       placement,
-      hideOnClick: false,
+      hideOnClick,
+      popupStyle: mergedPopupStyle,
       mouseEnterDelay
     }),
     children

package/dist/cjs/Tree/demo/draggable.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const _default: () => React.JSX.Element;
+export default _default;

package/dist/cjs/Tree/demo/draggable.js

@@ -0,0 +1,88 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/Tree/demo/draggable.tsx
+var draggable_exports = {};
+__export(draggable_exports, {
+  default: () => draggable_default
+});
+module.exports = __toCommonJS(draggable_exports);
+var import_yee_c = require("../..");
+var import_react = __toESM(require("react"));
+var FIELD_NAMES = {
+  key: "key",
+  label: "label",
+  children: "children"
+};
+var draggable_default = () => {
+  const [data, setData] = (0, import_react.useState)([
+    {
+      label: "parent 1",
+      key: "0-0",
+      children: [
+        {
+          label: "parent 1-0",
+          key: "0-0-0",
+          children: [
+            { label: "leaf-1", key: "0-0-0-0" },
+            { label: "leaf-2", key: "0-0-0-1" }
+          ]
+        },
+        {
+          label: "parent 1-1",
+          key: "0-0-1",
+          children: [{ label: "leaf-3", key: "0-0-1-0" }]
+        }
+      ]
+    },
+    {
+      label: "parent 2",
+      key: "0-1",
+      children: [{ label: "leaf-4", key: "0-1-0" }]
+    }
+  ]);
+  return /* @__PURE__ */ import_react.default.createElement(
+    import_yee_c.Tree,
+    {
+      draggable: true,
+      defaultExpandAll: true,
+      dataSource: data,
+      onDrop: (info) => setData(
+        (prev) => (0, import_yee_c.moveTreeNode)(
+          prev,
+          {
+            dragKey: info.dragKey,
+            dropKey: info.dropKey,
+            position: info.position
+          },
+          FIELD_NAMES
+        )
+      )
+    }
+  );
+};

package/dist/cjs/Tree/demo/expanded.js

@@ -38,29 +38,29 @@ var expanded_default = () => {
   const [expandedKeys, setExpandedKeys] = (0, import_react.useState)(["0-0", "0-0-0"]);
   const treeData = [
     {
-      title: "parent 1",
+      label: "parent 1",
       key: "0-0",
       children: [
         {
-          title: "parent 1-0",
+          label: "parent 1-0",
           key: "0-0-0",
           children: [
             {
-              title: "leaf",
+              label: "leaf",
               key: "0-0-0-0"
             },
             {
-              title: "leaf",
+              label: "leaf",
               key: "0-0-0-1"
             }
           ]
         },
         {
-          title: "parent 1-1",
+          label: "parent 1-1",
           key: "0-0-1",
           children: [
             {
-              title: "leaf",
+              label: "leaf",
               key: "0-0-1-0"
             }
           ]

package/dist/cjs/Tree/index.d.ts

@@ -1,3 +1,4 @@
 import Tree from './tree';
 export type { TreeProps } from './interface';
+export { moveTreeNode } from './utils/tree-tools';
 export default Tree;

package/dist/cjs/Tree/index.js

@@ -29,8 +29,10 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/Tree/index.ts
 var Tree_exports = {};
 __export(Tree_exports, {
-  default: () => Tree_default
+  default: () => Tree_default,
+  moveTreeNode: () => import_tree_tools.moveTreeNode
 });
 module.exports = __toCommonJS(Tree_exports);
 var import_tree = __toESM(require("./tree"));
+var import_tree_tools = require("./utils/tree-tools");
 var Tree_default = import_tree.default;

package/dist/cjs/Tree/interface.d.ts

@@ -1,5 +1,7 @@
 /// <reference types="react" />
 export type SemanticType = '';
+export type DragPosition = 'before' | 'after' | 'inside';
+export type { MoveInfo } from './utils/tree-tools';
 export type TreeNode<T> = {
     /**
      * uid
@@ -102,6 +104,30 @@ export interface TreeProps<T> {
      * Whether to allow dragging
      */
     draggable?: boolean;
+    /**
+     * Whether to allow dropping a dragged node at the given position.
+     * Return false to forbid the drop (cursor shows "no-drop").
+     */
+    allowDrop?: (info: {
+        dragNode: T;
+        dropNode: T;
+        position: DragPosition;
+    }) => boolean;
+    /**
+     * Callback after a node is dropped. Pure controlled: the Tree does not
+     * mutate dataSource — reorder it yourself (e.g. with `moveTreeNode`).
+     */
+    onDrop?: (info: {
+        /** Original data of the dragged node */
+        dragNode: T;
+        /** Original data of the target node */
+        dropNode: T;
+        dragKey: string | number;
+        dropKey: string | number;
+        position: DragPosition;
+        /** Convenience flag: true when position is 'before' or 'after' */
+        dropToGap: boolean;
+    }) => void;
     /**
      * Whether to show connecting lines
      */

package/dist/cjs/Tree/style/index.less

@@ -2,11 +2,36 @@
 
 @{pls} {
   &-node {
+    position: relative;
     display: flex;
     align-items: center;
     justify-content: flex-start;
     height: var(--yee-tree-node-height);
 
+    &[draggable='true'] {
+      cursor: grab;
+    }
+
+    &-dragging {
+      opacity: 0.4;
+    }
+
+    &-drag-over-before {
+      box-shadow: inset 0 2px 0 0 var(--yee-primary-color);
+    }
+
+    &-drag-over-after {
+      box-shadow: inset 0 -2px 0 0 var(--yee-primary-color);
+    }
+
+    &-drag-over-inside {
+      background: color-mix(
+        in srgb,
+        var(--yee-primary-color) 12%,
+        transparent
+      );
+    }
+
     &-switcher {
       display: inline-flex;
       align-items: center;

package/dist/cjs/Tree/tree-node.js

@@ -2,8 +2,22 @@ var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
 var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
@@ -64,9 +78,16 @@ var Node = (props) => {
     checkedKeys,
     expandedKeys,
     switcherIcon,
+    draggable,
+    draggingKey,
+    dropState,
     onCheck,
     onSelect,
-    onExpand
+    onExpand,
+    onNodeDragStart,
+    onNodeDragOver,
+    onNodeDragLeave,
+    onNodeDrop
   } = (0, import_react.useContext)(import_tree.TreeContext);
   const expanded = expandedKeys.includes(key);
   const checked = checkedKeys.includes(key);
@@ -143,15 +164,28 @@ var Node = (props) => {
       }
     ));
   };
+  const isDropTarget = (dropState == null ? void 0 : dropState.key) === key;
+  const dropPosition = isDropTarget ? dropState.position : null;
+  const dragProps = draggable && !disabled ? {
+    draggable: true,
+    onDragStart: (e) => onNodeDragStart(key, e),
+    onDragOver: (e) => onNodeDragOver(key, e),
+    onDragLeave: (e) => onNodeDragLeave(key, e),
+    onDrop: (e) => onNodeDrop(key, e)
+  } : {};
   return /* @__PURE__ */ import_react.default.createElement(
     "div",
-    {
+    __spreadValues({
       className: (0, import_clsx.default)(`${prefixCls}-node`, {
         [`${prefixCls}-node-with-line`]: showLine,
         [`${prefixCls}-leaf-node`]: isLeaf,
-        [`${prefixCls}-last-node`]: isLast
+        [`${prefixCls}-last-node`]: isLast,
+        [`${prefixCls}-node-dragging`]: draggingKey === key,
+        [`${prefixCls}-node-drag-over-before`]: dropPosition === "before",
+        [`${prefixCls}-node-drag-over-after`]: dropPosition === "after",
+        [`${prefixCls}-node-drag-over-inside`]: dropPosition === "inside"
       })
-    },
+    }, dragProps),
     renderEmptyNodes(depth),
     renderExpandedIcon(),
     renderCheckbox(),