@pisell/materials 1.0.606 → 1.0.608

package/lib/components/pisellDraggable/PisellDraggable.js

@@ -1,175 +0,0 @@
-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/components/pisellDraggable/PisellDraggable.tsx
-var PisellDraggable_exports = {};
-__export(PisellDraggable_exports, {
-  default: () => PisellDraggable_default
-});
-module.exports = __toCommonJS(PisellDraggable_exports);
-var import_core = require("@dnd-kit/core");
-var import_sortable = require("@dnd-kit/sortable");
-var import_react = __toESM(require("react"));
-var import_PisellDraggable = require("./PisellDraggable.less");
-var import_SortableItem = require("./SortableItem");
-var PisellDraggable = ({
-  items,
-  direction = "vertical",
-  columns = 3,
-  allowCrossContainer = false,
-  onDragStart,
-  onDragEnd,
-  onChange,
-  renderItem,
-  className,
-  style,
-  handleClassName,
-  containerStyle,
-  disabled = false,
-  animationDuration = 250,
-  dragMode = "handle",
-  indentDistance = 24,
-  maxDepth = 0,
-  levelStyles = {},
-  handleIcon = "⋮",
-  animationTiming = "ease",
-  dragScale = 1.02,
-  currentLevel = 0
-}) => {
-  const sensors = (0, import_core.useSensors)(
-    (0, import_core.useSensor)(import_core.PointerSensor),
-    (0, import_core.useSensor)(import_core.KeyboardSensor, {
-      coordinateGetter: import_sortable.sortableKeyboardCoordinates
-    })
-  );
-  const sortingStrategy = (0, import_react.useMemo)(() => {
-    switch (direction) {
-      case "horizontal":
-        return import_sortable.horizontalListSortingStrategy;
-      case "grid":
-        return import_sortable.rectSortingStrategy;
-      default:
-        return import_sortable.verticalListSortingStrategy;
-    }
-  }, [direction]);
-  const containerClassName = (0, import_react.useMemo)(() => {
-    const baseClass = "pisellDraggable-container";
-    return `${baseClass} ${direction} ${className || ""} ${disabled ? "disabled" : ""}`.trim();
-  }, [direction, className, disabled]);
-  const gridStyle = (0, import_react.useMemo)(() => {
-    return direction === "grid" ? {
-      ...containerStyle,
-      gridTemplateColumns: `repeat(${columns}, 1fr)`
-    } : containerStyle;
-  }, [direction, columns, containerStyle]);
-  const handleDragStart = (0, import_react.useCallback)(
-    (event) => {
-      onDragStart == null ? void 0 : onDragStart(event.active.id);
-    },
-    [onDragStart]
-  );
-  const handleNestedChange = (0, import_react.useCallback)(
-    (parentId, nestedItems) => {
-      const updateNestedItems = (items2) => {
-        return items2.map((item) => {
-          var _a;
-          if (item.id === parentId) {
-            return { ...item, children: nestedItems };
-          }
-          if ((_a = item.children) == null ? void 0 : _a.length) {
-            return { ...item, children: updateNestedItems(item.children) };
-          }
-          return item;
-        });
-      };
-      const newItems = updateNestedItems(items);
-      onChange == null ? void 0 : onChange(newItems);
-    },
-    [items, onChange]
-  );
-  const handleDragEnd = (0, import_react.useCallback)(
-    (event) => {
-      const { active, over } = event;
-      if (over && active.id !== over.id) {
-        const oldIndex = items.findIndex((item) => item.id === active.id);
-        const newIndex = items.findIndex((item) => item.id === over.id);
-        const newItems = (0, import_sortable.arrayMove)(items, oldIndex, newIndex);
-        onChange == null ? void 0 : onChange(newItems);
-        onDragEnd == null ? void 0 : onDragEnd({
-          active: items[oldIndex],
-          over: items[newIndex]
-        });
-      }
-    },
-    [items, onChange, onDragEnd]
-  );
-  (0, import_react.useEffect)(() => {
-    document.body.id = "body";
-  }, []);
-  if (disabled || !(items == null ? void 0 : items.length)) {
-    return null;
-  }
-  return /* @__PURE__ */ import_react.default.createElement("div", { className: containerClassName, style: { ...style, ...gridStyle } }, /* @__PURE__ */ import_react.default.createElement(
-    import_core.DndContext,
-    {
-      sensors,
-      collisionDetection: import_core.closestCenter,
-      onDragStart: handleDragStart,
-      onDragEnd: handleDragEnd
-    },
-    /* @__PURE__ */ import_react.default.createElement(
-      import_sortable.SortableContext,
-      {
-        items: items.map((item) => item.id),
-        strategy: sortingStrategy
-      },
-      items.map((item) => /* @__PURE__ */ import_react.default.createElement(
-        import_SortableItem.SortableItem,
-        {
-          key: item.id,
-          id: item.id,
-          item,
-          renderItem,
-          handleClassName,
-          animationDuration,
-          dragMode,
-          onNestedChange: handleNestedChange,
-          indentDistance,
-          maxDepth,
-          levelStyles,
-          handleIcon,
-          animationTiming,
-          dragScale,
-          currentLevel
-        }
-      ))
-    ),
-    /* @__PURE__ */ import_react.default.createElement(import_core.DragOverlay, null)
-  ));
-};
-var PisellDraggable_default = PisellDraggable;

package/lib/components/pisellDraggable/PisellDraggable.less

@@ -1,154 +0,0 @@
-/* PisellDraggable 组件样式 */
-.pisellDraggable {
-
-  /* 容器样式 */
-  &-container {
-    position: relative;
-
-    /* 水平布局 */
-    &.horizontal {
-      display: flex;
-      flex-direction: row;
-      gap: 8px;
-    }
-
-    /* 垂直布局 */
-    &.vertical {
-      display: flex;
-      flex-direction: column;
-      gap: 8px;
-    }
-
-    /* 网格布局 */
-    &.grid {
-      display: grid;
-      gap: 8px;
-    }
-  }
-
-  /* 拖拽项样式 */
-  &-item {
-    position: relative;
-    touch-action: none;
-    user-select: none;
-    background: #fff;
-    border: 1px solid #e8e8e8;
-    border-radius: 4px;
-    padding: 12px;
-    transition: all var(--animation-duration, 250ms) var(--animation-timing, ease);
-
-    /* 拖拽时的样式 */
-    &.dragging {
-      opacity: 0.5;
-      cursor: grabbing;
-      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
-      transform: scale(var(--drag-scale, 1.02)) !important;
-      z-index: 1;
-    }
-
-    /* 非拖拽状态的变换 */
-    &:not(.dragging) {
-      transform: translate3d(var(--translate-x, 0), var(--translate-y, 0), 0);
-    }
-
-    /* 不同层级的背景色 */
-    &[data-level="0"] {
-      background: #fff;
-    }
-
-    &[data-level="1"] {
-      background: #fafafa;
-    }
-
-    &[data-level="2"] {
-      background: #f5f5f5;
-    }
-
-    &[data-level="3"] {
-      background: #f0f0f0;
-    }
-  }
-
-  /* 拖拽手柄样式 */
-  &-handle {
-    cursor: grab;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    width: 24px;
-    height: 24px;
-    margin-right: 8px;
-    color: #999;
-    border-radius: 4px;
-    transition: all 0.2s;
-
-    /* 悬停效果 */
-    &:hover {
-      background: rgba(0, 0, 0, 0.04);
-      color: #666;
-    }
-
-    /* 激活状态 */
-    &:active {
-      cursor: grabbing;
-      background: rgba(0, 0, 0, 0.08);
-    }
-
-    /* 手柄图标 */
-    &-icon {
-      font-size: 16px;
-      line-height: 1;
-    }
-  }
-
-  /* 内容区域样式 */
-  &-content {
-    display: inline-flex;
-    align-items: center;
-    flex: 1;
-    min-height: 24px;
-  }
-
-  /* 嵌套容器样式 */
-  &-nested {
-    margin-top: 12px;
-    margin-left: var(--indent-distance, 24px);
-    border-left: 2px solid #f0f0f0;
-    padding-left: 12px;
-    transition: all 0.3s;
-
-    /* 嵌套容器的最小高度 */
-    .pisellDraggable-container {
-      min-height: 32px;
-    }
-
-    /* 悬停时的边线效果 */
-    &:hover {
-      border-left-color: #1890ff;
-    }
-  }
-
-  /* 拖拽覆盖层样式 */
-  &-overlay {
-    position: fixed;
-    pointer-events: none;
-    z-index: 1000;
-    transition: transform 0.15s ease;
-    opacity: 0.8;
-    transform: scale(1.05);
-
-    &.dragging {
-      cursor: grabbing;
-    }
-  }
-
-  /* 禁用状态样式 */
-  &.disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
-
-    .pisellDraggable-handle {
-      cursor: not-allowed;
-    }
-  }
-}

package/lib/components/pisellDraggable/SortableItem.d.ts

@@ -1,41 +0,0 @@
-import React from 'react';
-import { DraggableItem } from './types';
-/**
- * 可排序项组件的属性定义
- */
-interface SortableItemProps {
-    /** 项目的唯一标识符 */
-    id: string | number;
-    /** 项目数据 */
-    item: DraggableItem;
-    /** 自定义渲染函数 */
-    renderItem?: (item: DraggableItem) => React.ReactNode;
-    /** 拖拽手柄的自定义类名 */
-    handleClassName?: string;
-    /** 动画持续时间（毫秒） */
-    animationDuration?: number;
-    /** 拖动方式 */
-    dragMode?: 'handle' | 'item';
-    /** 嵌套数据变化的回调函数 */
-    onNestedChange?: (parentId: string | number, items: DraggableItem[]) => void;
-    /** 缩进距离（像素） */
-    indentDistance?: number;
-    /** 最大嵌套深度 */
-    maxDepth?: number;
-    /** 层级样式配置 */
-    levelStyles?: Record<number, React.CSSProperties>;
-    /** 拖拽手柄图标 */
-    handleIcon?: React.ReactNode;
-    /** 动画曲线 */
-    animationTiming?: 'ease' | 'linear' | 'ease-in' | 'ease-out' | 'ease-in-out';
-    /** 拖拽时的缩放比例 */
-    dragScale?: number;
-    /** 当前嵌套层级 */
-    currentLevel?: number;
-}
-/**
- * 可排序项组件
- * 用于渲染单个可拖拽项，支持嵌套结构和自定义渲染
- */
-export declare const SortableItem: React.FC<SortableItemProps>;
-export {};

package/lib/components/pisellDraggable/SortableItem.js

@@ -1,127 +0,0 @@
-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/components/pisellDraggable/SortableItem.tsx
-var SortableItem_exports = {};
-__export(SortableItem_exports, {
-  SortableItem: () => SortableItem
-});
-module.exports = __toCommonJS(SortableItem_exports);
-var import_sortable = require("@dnd-kit/sortable");
-var import_utilities = require("@dnd-kit/utilities");
-var import_react = __toESM(require("react"));
-var import_PisellDraggable = __toESM(require("./PisellDraggable"));
-var SortableItem = ({
-  id,
-  item,
-  renderItem,
-  handleClassName,
-  animationDuration = 250,
-  dragMode = "handle",
-  onNestedChange,
-  indentDistance = 24,
-  maxDepth = 0,
-  levelStyles = {},
-  handleIcon = "⋮",
-  animationTiming = "ease",
-  dragScale = 1.02,
-  currentLevel = 0
-}) => {
-  const {
-    attributes,
-    listeners,
-    setNodeRef,
-    transform,
-    transition,
-    isDragging
-  } = (0, import_sortable.useSortable)({ id });
-  const style = {
-    transform: import_utilities.CSS.Transform.toString(transform),
-    transition,
-    "--animation-duration": `${animationDuration}ms`,
-    "--animation-timing": animationTiming,
-    "--drag-scale": dragScale,
-    "--indent-distance": `${indentDistance}px`,
-    ...levelStyles[currentLevel]
-  };
-  const itemClassName = `pisellDraggable-item ${isDragging ? "dragging" : ""}`;
-  const handleNestedChange = (items) => {
-    if (maxDepth > 0 && currentLevel >= maxDepth - 1) {
-      return;
-    }
-    onNestedChange == null ? void 0 : onNestedChange(id, items);
-  };
-  const renderContent = () => {
-    if (renderItem) {
-      return renderItem(item);
-    }
-    return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, dragMode === "handle" && /* @__PURE__ */ import_react.default.createElement(
-      "div",
-      {
-        className: `pisellDraggable-handle ${handleClassName || ""}`,
-        ...listeners
-      },
-      /* @__PURE__ */ import_react.default.createElement("span", { className: "pisellDraggable-handle-icon" }, handleIcon)
-    ), /* @__PURE__ */ import_react.default.createElement("div", { className: "pisellDraggable-content" }, item.content));
-  };
-  const hasChildren = Array.isArray(item.children) && item.children.length > 0;
-  const canNest = maxDepth === 0 || currentLevel < maxDepth - 1;
-  return /* @__PURE__ */ import_react.default.createElement(
-    "div",
-    {
-      ref: setNodeRef,
-      style,
-      className: itemClassName,
-      "data-level": currentLevel,
-      ...attributes,
-      ...dragMode === "item" ? listeners : {}
-    },
-    renderContent(),
-    hasChildren && canNest && /* @__PURE__ */ import_react.default.createElement("div", { className: "pisellDraggable-nested" }, /* @__PURE__ */ import_react.default.createElement(
-      import_PisellDraggable.default,
-      {
-        items: item.children,
-        onChange: handleNestedChange,
-        dragMode,
-        handleClassName,
-        animationDuration,
-        indentDistance,
-        maxDepth,
-        levelStyles,
-        handleIcon,
-        animationTiming,
-        dragScale,
-        currentLevel: currentLevel + 1
-      }
-    ))
-  );
-};
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  SortableItem
-});