@pisell/materials 6.0.10 → 6.0.12

package/lib/components/pisellDraggable/components/Remove/Remove.js

@@ -0,0 +1,53 @@
+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/components/Remove/Remove.tsx
+var Remove_exports = {};
+__export(Remove_exports, {
+  Remove: () => Remove
+});
+module.exports = __toCommonJS(Remove_exports);
+var import_react = __toESM(require("react"));
+var import_Action = require("../Action");
+function Remove(props) {
+  return /* @__PURE__ */ import_react.default.createElement(
+    import_Action.Action,
+    {
+      ...props,
+      active: {
+        fill: "rgba(255, 70, 70, 0.95)",
+        background: "rgba(255, 70, 70, 0.1)"
+      }
+    },
+    /* @__PURE__ */ import_react.default.createElement("svg", { width: "8", viewBox: "0 0 22 22", xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ import_react.default.createElement("path", { d: "M2.99998 -0.000206962C2.7441 -0.000206962 2.48794 0.0972617 2.29294 0.292762L0.292945 2.29276C-0.0980552 2.68376 -0.0980552 3.31682 0.292945 3.70682L7.58591 10.9998L0.292945 18.2928C-0.0980552 18.6838 -0.0980552 19.3168 0.292945 19.7068L2.29294 21.7068C2.68394 22.0978 3.31701 22.0978 3.70701 21.7068L11 14.4139L18.2929 21.7068C18.6829 22.0978 19.317 22.0978 19.707 21.7068L21.707 19.7068C22.098 19.3158 22.098 18.6828 21.707 18.2928L14.414 10.9998L21.707 3.70682C22.098 3.31682 22.098 2.68276 21.707 2.29276L19.707 0.292762C19.316 -0.0982383 18.6829 -0.0982383 18.2929 0.292762L11 7.58573L3.70701 0.292762C3.51151 0.0972617 3.25585 -0.000206962 2.99998 -0.000206962Z" }))
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Remove
+});

package/lib/components/pisellDraggable/components/Remove/index.d.ts

@@ -0,0 +1 @@
+export { Remove } from './Remove';

package/lib/components/pisellDraggable/components/Remove/index.js

@@ -0,0 +1,29 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+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 __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/pisellDraggable/components/Remove/index.ts
+var Remove_exports = {};
+__export(Remove_exports, {
+  Remove: () => import_Remove.Remove
+});
+module.exports = __toCommonJS(Remove_exports);
+var import_Remove = require("./Remove");
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Remove
+});

package/lib/components/pisellDraggable/components/TreeItem/SortableTreeItem.d.ts

@@ -0,0 +1,8 @@
+import type { UniqueIdentifier } from '@dnd-kit/core';
+import React from 'react';
+import { Props as TreeItemProps } from './TreeItem';
+interface Props extends TreeItemProps {
+    id: UniqueIdentifier;
+}
+export declare function SortableTreeItem({ id, depth, ...props }: Props): React.JSX.Element;
+export {};

package/lib/components/pisellDraggable/components/TreeItem/SortableTreeItem.js

@@ -0,0 +1,83 @@
+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/components/TreeItem/SortableTreeItem.tsx
+var SortableTreeItem_exports = {};
+__export(SortableTreeItem_exports, {
+  SortableTreeItem: () => SortableTreeItem
+});
+module.exports = __toCommonJS(SortableTreeItem_exports);
+var import_sortable = require("@dnd-kit/sortable");
+var import_utilities = require("@dnd-kit/utilities");
+var import_react = __toESM(require("react"));
+var import_utilities2 = require("../../utilities");
+var import_TreeItem = require("./TreeItem");
+var animateLayoutChanges = ({
+  isSorting,
+  wasDragging
+}) => isSorting || wasDragging ? false : true;
+function SortableTreeItem({ id, depth, ...props }) {
+  const {
+    attributes,
+    isDragging,
+    isSorting,
+    listeners,
+    setDraggableNodeRef,
+    setDroppableNodeRef,
+    transform,
+    transition
+  } = (0, import_sortable.useSortable)({
+    id,
+    animateLayoutChanges
+  });
+  const style = {
+    transform: import_utilities.CSS.Translate.toString(transform),
+    transition
+  };
+  return /* @__PURE__ */ import_react.default.createElement(
+    import_TreeItem.TreeItem,
+    {
+      ref: setDraggableNodeRef,
+      wrapperRef: setDroppableNodeRef,
+      style,
+      depth,
+      ghost: isDragging,
+      disableSelection: import_utilities2.iOS,
+      disableInteraction: isSorting,
+      handleProps: {
+        ...attributes,
+        ...listeners
+      },
+      ...props
+    }
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  SortableTreeItem
+});

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

@@ -0,0 +1,21 @@
+import React, { HTMLAttributes } from 'react';
+import type { TreeItem as TreeItemType } from '../../types';
+import './TreeItem.less';
+export interface Props extends Omit<HTMLAttributes<HTMLLIElement>, 'id'> {
+    childCount?: number;
+    clone?: boolean;
+    collapsed?: boolean;
+    depth: number;
+    disableInteraction?: boolean;
+    disableSelection?: boolean;
+    ghost?: boolean;
+    handleProps?: any;
+    indicator?: boolean;
+    indentationWidth: number;
+    onCollapse?(): void;
+    onRemove?(): void;
+    wrapperRef?(node: HTMLLIElement): void;
+    item: TreeItemType;
+    renderItem?(item: TreeItemType): React.ReactNode;
+}
+export declare const TreeItem: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLDivElement>>;

package/lib/components/pisellDraggable/components/TreeItem/TreeItem.js

@@ -0,0 +1,93 @@
+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/components/TreeItem/TreeItem.tsx
+var TreeItem_exports = {};
+__export(TreeItem_exports, {
+  TreeItem: () => TreeItem
+});
+module.exports = __toCommonJS(TreeItem_exports);
+var import_classnames = __toESM(require("classnames"));
+var import_react = __toESM(require("react"));
+var import_components = require("../../components");
+var import_TreeItem = require("./TreeItem.less");
+var TreeItem = (0, import_react.forwardRef)((props, ref) => {
+  const {
+    childCount,
+    clone,
+    depth,
+    disableSelection,
+    disableInteraction,
+    ghost,
+    handleProps,
+    indentationWidth,
+    indicator,
+    collapsed,
+    onCollapse,
+    onRemove,
+    style,
+    wrapperRef,
+    item,
+    renderItem,
+    ...otherProps
+  } = props;
+  if (renderItem) {
+    return renderItem(props);
+  }
+  return /* @__PURE__ */ import_react.default.createElement(
+    "li",
+    {
+      className: (0, import_classnames.default)(
+        "Wrapper",
+        clone && "clone",
+        ghost && "ghost",
+        indicator && "indicator",
+        disableSelection && "disableSelection",
+        disableInteraction && "disableInteraction"
+      ),
+      ref: wrapperRef,
+      style: {
+        "--spacing": `${indentationWidth * depth}px`
+      },
+      ...otherProps
+    },
+    /* @__PURE__ */ import_react.default.createElement("div", { className: "TreeItem", ref, style }, /* @__PURE__ */ import_react.default.createElement(import_components.Handle, { ...handleProps }), onCollapse && /* @__PURE__ */ import_react.default.createElement(
+      import_components.Action,
+      {
+        onClick: onCollapse,
+        className: (0, import_classnames.default)("Collapse", collapsed && "collapsed")
+      },
+      collapseIcon
+    ), /* @__PURE__ */ import_react.default.createElement("span", { className: "Text" }, item.id), !clone && onRemove && /* @__PURE__ */ import_react.default.createElement(import_components.Remove, { onClick: onRemove }), clone && childCount && childCount > 1 ? /* @__PURE__ */ import_react.default.createElement("span", { className: "Count" }, childCount) : null)
+  );
+});
+var collapseIcon = /* @__PURE__ */ import_react.default.createElement("svg", { width: "10", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 70 41" }, /* @__PURE__ */ import_react.default.createElement("path", { d: "M30.76 39.2402C31.885 40.3638 33.41 40.995 35 40.995C36.59 40.995 38.115 40.3638 39.24 39.2402L68.24 10.2402C69.2998 9.10284 69.8768 7.59846 69.8494 6.04406C69.822 4.48965 69.1923 3.00657 68.093 1.90726C66.9937 0.807959 65.5106 0.178263 63.9562 0.150837C62.4018 0.123411 60.8974 0.700397 59.76 1.76024L35 26.5102L10.24 1.76024C9.10259 0.700397 7.59822 0.123411 6.04381 0.150837C4.4894 0.178263 3.00632 0.807959 1.90702 1.90726C0.807714 3.00657 0.178019 4.48965 0.150593 6.04406C0.123167 7.59846 0.700153 9.10284 1.75999 10.2402L30.76 39.2402Z" }));
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  TreeItem
+});

package/lib/components/pisellDraggable/components/TreeItem/TreeItem.less

@@ -0,0 +1,128 @@
+.Wrapper {
+  list-style: none;
+  box-sizing: border-box;
+  padding-left: var(--spacing);
+  margin-bottom: -1px;
+
+  &.clone {
+    display: inline-block;
+    pointer-events: none;
+    padding: 0;
+    padding-left: 10px;
+    padding-top: 5px;
+
+    .TreeItem {
+      --vertical-padding: 5px;
+
+      padding-right: 24px;
+      border-radius: 4px;
+      box-shadow: 0px 15px 15px 0 rgba(34, 33, 81, 0.1);
+    }
+  }
+
+  &.ghost {
+    &.indicator {
+      opacity: 1;
+      position: relative;
+      z-index: 1;
+      margin-bottom: -1px;
+
+      .TreeItem {
+        position: relative;
+        padding: 0;
+        height: 8px;
+        border-color: #2389ff;
+        background-color: #56a1f8;
+
+        &:before {
+          position: absolute;
+          left: -8px;
+          top: -4px;
+          display: block;
+          content: '';
+          width: 12px;
+          height: 12px;
+          border-radius: 50%;
+          border: 1px solid #2389ff;
+          background-color: #ffffff;
+        }
+
+        >* {
+          /* Items are hidden using height and opacity to retain focus */
+          opacity: 0;
+          height: 0;
+        }
+      }
+    }
+
+    &:not(.indicator) {
+      opacity: 0.5;
+    }
+
+    .TreeItem>* {
+      box-shadow: none;
+      background-color: transparent;
+    }
+  }
+}
+
+.TreeItem {
+  --vertical-padding: 10px;
+
+  position: relative;
+  display: flex;
+  align-items: center;
+  padding: var(--vertical-padding) 10px;
+  background-color: #fff;
+  border: 1px solid #dedede;
+  color: #222;
+  box-sizing: border-box;
+}
+
+.Text {
+  flex-grow: 1;
+  padding-left: 0.5rem;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+
+.Count {
+  position: absolute;
+  top: -10px;
+  right: -10px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  background-color: #2389ff;
+  font-size: 0.8rem;
+  font-weight: 600;
+  color: #fff;
+}
+
+.disableInteraction {
+  pointer-events: none;
+}
+
+.disableSelection,
+.clone {
+
+  .Text,
+  .Count {
+    user-select: none;
+    -webkit-user-select: none;
+  }
+}
+
+.Collapse {
+  svg {
+    transition: transform 250ms ease;
+  }
+
+  &.collapsed svg {
+    transform: rotate(-90deg);
+  }
+}

package/lib/components/pisellDraggable/components/TreeItem/index.d.ts

@@ -0,0 +1,2 @@
+export { TreeItem } from './TreeItem';
+export { SortableTreeItem } from './SortableTreeItem';

package/lib/components/pisellDraggable/components/TreeItem/index.js

@@ -0,0 +1,32 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+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 __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/pisellDraggable/components/TreeItem/index.ts
+var TreeItem_exports = {};
+__export(TreeItem_exports, {
+  SortableTreeItem: () => import_SortableTreeItem.SortableTreeItem,
+  TreeItem: () => import_TreeItem.TreeItem
+});
+module.exports = __toCommonJS(TreeItem_exports);
+var import_TreeItem = require("./TreeItem");
+var import_SortableTreeItem = require("./SortableTreeItem");
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  SortableTreeItem,
+  TreeItem
+});

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

@@ -0,0 +1,4 @@
+export { Action } from './Action';
+export { Handle } from './Handle';
+export { Remove } from './Remove';
+export { TreeItem, SortableTreeItem } from './TreeItem';

package/lib/components/pisellDraggable/components/index.js

@@ -0,0 +1,40 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+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 __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/pisellDraggable/components/index.ts
+var components_exports = {};
+__export(components_exports, {
+  Action: () => import_Action.Action,
+  Handle: () => import_Handle.Handle,
+  Remove: () => import_Remove.Remove,
+  SortableTreeItem: () => import_TreeItem.SortableTreeItem,
+  TreeItem: () => import_TreeItem.TreeItem
+});
+module.exports = __toCommonJS(components_exports);
+var import_Action = require("./Action");
+var import_Handle = require("./Handle");
+var import_Remove = require("./Remove");
+var import_TreeItem = require("./TreeItem");
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Action,
+  Handle,
+  Remove,
+  SortableTreeItem,
+  TreeItem
+});

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

@@ -0,0 +1,27 @@
+/**
+ * 可拖拽树形组件
+ * 基于@dnd-kit库实现，支持拖拽排序、展开折叠、删除等功能
+ */
+import React from 'react';
+import type { TreeItem, TreeItems } from './types';
+interface Props {
+    /** 是否支持折叠功能 */
+    collapsible?: boolean;
+    /** 初始树形数据，默认使用 initialItems */
+    value?: TreeItems;
+    /** 缩进宽度，控制子节点的缩进距离 */
+    indentationWidth?: number;
+    /** 是否显示拖拽指示器 */
+    indicator?: boolean;
+    /** 是否支持删除节点功能 */
+    removable?: boolean;
+    /** 自定义渲染树节点 */
+    renderItem?: (item: TreeItem) => React.ReactNode;
+    /** 树形数据变化回调 */
+    onChange?: (items: TreeItems) => void;
+    /** 删除节点前 */
+    onRemoveBefore?: (item: TreeItem) => Promise<boolean>;
+}
+export declare function SortableTree({ collapsible, value, indicator, indentationWidth, removable, renderItem, onChange, onRemoveBefore, }: Props): React.JSX.Element;
+declare const Demo: () => React.JSX.Element;
+export default Demo;