@pisell/materials 1.0.607 → 1.0.609

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (68) hide show
  1. package/build/lowcode/assets-daily.json +11 -11
  2. package/build/lowcode/assets-dev.json +2 -2
  3. package/build/lowcode/assets-prod.json +11 -11
  4. package/build/lowcode/index.js +1 -1
  5. package/build/lowcode/meta.js +3 -3
  6. package/build/lowcode/preview.js +7 -7
  7. package/build/lowcode/render/default/view.css +1 -1
  8. package/build/lowcode/render/default/view.js +24 -24
  9. package/build/lowcode/view.css +1 -1
  10. package/build/lowcode/view.js +27 -27
  11. package/es/components/dataSourceComponents/dataSourceTable/hooks/useFormat.d.ts +6 -2
  12. package/es/components/dataSourceComponents/dataSourceTable/hooks/useFormat.js +15 -1
  13. package/es/components/dataSourceComponents/fields/Select/index.js +2 -1
  14. package/es/components/image/avatar.png +0 -0
  15. package/es/components/image/image.png +0 -0
  16. package/es/components/image/product.png +0 -0
  17. package/es/components/pisellDraggable/components/TreeItem/TreeItem.d.ts +1 -1
  18. package/es/components/pisellDraggable/components/TreeItem/TreeItem.js +1 -1
  19. package/es/components/pisellDraggable/index.d.ts +2 -1
  20. package/es/components/pisellDropSort/PisellDropSort.d.ts +5 -0
  21. package/es/components/pisellDropSort/PisellDropSort.js +102 -0
  22. package/es/components/pisellDropSort/PisellDropSort.less +92 -0
  23. package/es/components/pisellDropSort/components/SortableItem/index.d.ts +19 -0
  24. package/es/components/pisellDropSort/components/SortableItem/index.js +93 -0
  25. package/es/components/pisellDropSort/components/SortableItem/index.less +155 -0
  26. package/es/components/pisellDropSort/index.d.ts +3 -0
  27. package/es/components/pisellDropSort/index.js +2 -0
  28. package/es/components/pisellDropSort/types.d.ts +42 -0
  29. package/es/components/pisellDropSort/types.js +1 -0
  30. package/es/components/table/Table/utils.d.ts +1 -1
  31. package/es/index.d.ts +1 -0
  32. package/es/index.js +2 -1
  33. package/es/locales/en-US.d.ts +1 -0
  34. package/es/locales/en-US.js +1 -1
  35. package/es/locales/zh-CN.d.ts +1 -0
  36. package/es/locales/zh-CN.js +1 -1
  37. package/es/locales/zh-TW.d.ts +1 -0
  38. package/es/locales/zh-TW.js +1 -1
  39. package/lib/components/dataSourceComponents/dataSourceTable/hooks/useFormat.d.ts +6 -2
  40. package/lib/components/dataSourceComponents/dataSourceTable/hooks/useFormat.js +16 -1
  41. package/lib/components/dataSourceComponents/fields/Select/index.js +2 -1
  42. package/lib/components/image/avatar.png +0 -0
  43. package/lib/components/image/image.png +0 -0
  44. package/lib/components/image/product.png +0 -0
  45. package/lib/components/pisellDraggable/components/TreeItem/TreeItem.d.ts +1 -1
  46. package/lib/components/pisellDraggable/components/TreeItem/TreeItem.js +1 -1
  47. package/lib/components/pisellDraggable/index.d.ts +2 -1
  48. package/lib/components/pisellDropSort/PisellDropSort.d.ts +5 -0
  49. package/lib/components/pisellDropSort/PisellDropSort.js +147 -0
  50. package/lib/components/pisellDropSort/PisellDropSort.less +92 -0
  51. package/lib/components/pisellDropSort/components/SortableItem/index.d.ts +19 -0
  52. package/lib/components/pisellDropSort/components/SortableItem/index.js +164 -0
  53. package/lib/components/pisellDropSort/components/SortableItem/index.less +155 -0
  54. package/lib/components/pisellDropSort/index.d.ts +3 -0
  55. package/lib/components/pisellDropSort/index.js +36 -0
  56. package/lib/components/pisellDropSort/types.d.ts +42 -0
  57. package/lib/components/pisellDropSort/types.js +17 -0
  58. package/lib/components/table/Table/utils.d.ts +1 -1
  59. package/lib/index.d.ts +1 -0
  60. package/lib/index.js +3 -0
  61. package/lib/locales/en-US.d.ts +1 -0
  62. package/lib/locales/en-US.js +3 -1
  63. package/lib/locales/zh-CN.d.ts +1 -0
  64. package/lib/locales/zh-CN.js +3 -1
  65. package/lib/locales/zh-TW.d.ts +1 -0
  66. package/lib/locales/zh-TW.js +3 -1
  67. package/lowcode/pisell-drop-sort/meta.ts +344 -0
  68. package/package.json +1 -1
@@ -9,12 +9,16 @@ export declare type UseFormatParams = {
9
9
  dataSourceKey: string;
10
10
  fields: Field[];
11
11
  };
12
- export declare type FormatListResultParams = {
12
+ export declare type ApiListResult = {
13
13
  list: any[];
14
14
  count: number;
15
- page: number;
16
15
  size: number;
16
+ } & ({
17
+ page: number;
17
18
  } | {
19
+ skip: number;
20
+ });
21
+ export declare type FormatListResultParams = ApiListResult | {
18
22
  data: any[];
19
23
  meta: {
20
24
  count: number;
@@ -122,7 +122,7 @@ var useFormat = function useFormat(_ref4) {
122
122
  fields = _ref4.fields;
123
123
  // list接口请求 结果格式化
124
124
  var formatListResult = useMemoizedFn(function (res) {
125
- if (dataSourceKey === 'pisell2-api' && 'list' in res) {
125
+ if (dataSourceKey === 'pisell2-api' && 'list' in res && 'page' in res) {
126
126
  return {
127
127
  data: res.list,
128
128
  count: res.count,
@@ -130,6 +130,14 @@ var useFormat = function useFormat(_ref4) {
130
130
  pageSize: res.size
131
131
  };
132
132
  }
133
+ if (dataSourceKey === 'mypisell-api' && 'list' in res && 'skip' in res) {
134
+ return {
135
+ data: res.list,
136
+ count: res.count,
137
+ page: res.skip,
138
+ pageSize: res.size
139
+ };
140
+ }
133
141
  if ('meta' in res) {
134
142
  return {
135
143
  data: res.data,
@@ -156,6 +164,12 @@ var useFormat = function useFormat(_ref4) {
156
164
  size: (params === null || params === void 0 ? void 0 : params.pageSize) || 10
157
165
  }, customApiFormatFilter(params.filter || {}));
158
166
  }
167
+ if (dataSourceKey === 'mypisell-api') {
168
+ return _objectSpread({
169
+ skip: (params === null || params === void 0 ? void 0 : params.page) || 1,
170
+ num: (params === null || params === void 0 ? void 0 : params.pageSize) || 10
171
+ }, customApiFormatFilter(params.filter || {}));
172
+ }
159
173
  return params;
160
174
  });
161
175
  var formatCreateUpdateParams = useMemoizedFn(function (params) {
@@ -6,7 +6,8 @@ var SelectWithFormItem = withFormItem(SelectWithMode, {
6
6
  innerProps: {
7
7
  getPopupContainer: function getPopupContainer(triggerNode) {
8
8
  return triggerNode.parentElement;
9
- }
9
+ },
10
+ virtual: false
10
11
  }
11
12
  });
12
13
 
Binary file
Binary file
Binary file
@@ -16,6 +16,6 @@ export interface Props extends Omit<HTMLAttributes<HTMLLIElement>, 'id'> {
16
16
  onRemove?(): void;
17
17
  wrapperRef?(node: HTMLLIElement): void;
18
18
  item: TreeItemType;
19
- renderItem?(item: TreeItemType): React.ReactNode;
19
+ renderItem?(item: Props, ref: React.ForwardedRef<HTMLDivElement>): React.ReactNode;
20
20
  }
21
21
  export declare const TreeItem: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLDivElement>>;
@@ -25,7 +25,7 @@ export var TreeItem = /*#__PURE__*/forwardRef(function (props, ref) {
25
25
  renderItem = props.renderItem,
26
26
  otherProps = _objectWithoutProperties(props, _excluded);
27
27
  if (renderItem) {
28
- return renderItem(props);
28
+ return renderItem(props, ref);
29
29
  }
30
30
  return /*#__PURE__*/React.createElement("li", _extends({
31
31
  className: classNames('Wrapper', clone && 'clone', ghost && 'ghost', indicator && 'indicator', disableSelection && 'disableSelection', disableInteraction && 'disableInteraction'),
@@ -4,6 +4,7 @@
4
4
  */
5
5
  import React from 'react';
6
6
  import type { TreeItem, TreeItems } from './types';
7
+ import type { Props as TreeItemProps } from './components/TreeItem/TreeItem';
7
8
  interface Props {
8
9
  /** 是否支持折叠功能 */
9
10
  collapsible?: boolean;
@@ -16,7 +17,7 @@ interface Props {
16
17
  /** 是否支持删除节点功能 */
17
18
  removable?: boolean;
18
19
  /** 自定义渲染树节点 */
19
- renderItem?: (item: TreeItem) => React.ReactNode;
20
+ renderItem?: (item: TreeItemProps, ref: React.RefObject<HTMLDivElement>) => React.ReactNode;
20
21
  /** 树形数据变化回调 */
21
22
  onChange?: (items: TreeItems) => void;
22
23
  /** 删除节点前 */
@@ -0,0 +1,5 @@
1
+ import React from 'react';
2
+ import { PisellDropSortProps } from './types';
3
+ import './PisellDropSort.less';
4
+ declare const PisellDropSort: React.FC<PisellDropSortProps>;
5
+ export default PisellDropSort;
@@ -0,0 +1,102 @@
1
+ import React, { useCallback, useMemo } from 'react';
2
+ import { PlusOutlined } from '@ant-design/icons';
3
+ import classNames from 'classnames';
4
+ import Button from "../button";
5
+ import SortableItem from "./components/SortableItem";
6
+ import { SortableTree } from "../pisellDraggable";
7
+ import "./PisellDropSort.less";
8
+ import { getText } from "../../locales";
9
+ var PisellDropSort = function PisellDropSort(_ref) {
10
+ var _ref$value = _ref.value,
11
+ value = _ref$value === void 0 ? [] : _ref$value,
12
+ _ref$allowDrag = _ref.allowDrag,
13
+ allowDrag = _ref$allowDrag === void 0 ? true : _ref$allowDrag,
14
+ _ref$allowDelete = _ref.allowDelete,
15
+ allowDelete = _ref$allowDelete === void 0 ? true : _ref$allowDelete,
16
+ _ref$allowAddChild = _ref.allowAddChild,
17
+ allowAddChild = _ref$allowAddChild === void 0 ? true : _ref$allowAddChild,
18
+ _ref$allowAddRoot = _ref.allowAddRoot,
19
+ allowAddRoot = _ref$allowAddRoot === void 0 ? true : _ref$allowAddRoot,
20
+ _ref$disabled = _ref.disabled,
21
+ disabled = _ref$disabled === void 0 ? false : _ref$disabled,
22
+ _ref$spacing = _ref.spacing,
23
+ spacing = _ref$spacing === void 0 ? 8 : _ref$spacing,
24
+ _ref$maxLevel = _ref.maxLevel,
25
+ maxLevel = _ref$maxLevel === void 0 ? 3 : _ref$maxLevel,
26
+ _ref$showBorder = _ref.showBorder,
27
+ showBorder = _ref$showBorder === void 0 ? true : _ref$showBorder,
28
+ style = _ref.style,
29
+ className = _ref.className,
30
+ onChange = _ref.onChange,
31
+ onDelete = _ref.onDelete,
32
+ onAdd = _ref.onAdd,
33
+ propsRenderItem = _ref.renderItem,
34
+ leftContent = _ref.leftContent,
35
+ onAddRoot = _ref.onAddRoot;
36
+ // 转换数据格式
37
+ var treeItems = useMemo(function () {
38
+ return value.map(function (item) {
39
+ var _item$children;
40
+ return {
41
+ id: item.id,
42
+ children: ((_item$children = item.children) === null || _item$children === void 0 ? void 0 : _item$children.map(function (child) {
43
+ return {
44
+ id: child.id,
45
+ children: []
46
+ };
47
+ })) || []
48
+ };
49
+ });
50
+ }, [value]);
51
+
52
+ // 自定义渲染节点
53
+ var renderItem = useCallback(function (itemProps, ref) {
54
+ return /*#__PURE__*/React.createElement(SortableItem, {
55
+ itemProps: itemProps,
56
+ domRef: ref,
57
+ render: propsRenderItem,
58
+ allowAddChild: allowAddChild,
59
+ allowDelete: allowDelete,
60
+ allowDrag: allowDrag,
61
+ disabled: disabled,
62
+ onAdd: onAdd,
63
+ onDelete: onDelete,
64
+ showBorder: showBorder,
65
+ spacing: spacing,
66
+ maxLevel: maxLevel
67
+ });
68
+ }, [allowAddChild, allowDelete, allowDrag, value, disabled, maxLevel, onAdd, onDelete, showBorder, spacing, treeItems]);
69
+
70
+ // 处理拖拽完成
71
+ var handleChange = useCallback(function (items) {
72
+ onChange === null || onChange === void 0 ? void 0 : onChange(items);
73
+ }, [onChange]);
74
+ var containerClassName = classNames('pisell-lowcode-drop-sort-container', className);
75
+ return /*#__PURE__*/React.createElement("div", {
76
+ className: containerClassName,
77
+ style: style
78
+ }, /*#__PURE__*/React.createElement("div", {
79
+ className: "pisell-lowcode-drop-sort-container-header"
80
+ }, /*#__PURE__*/React.createElement("span", null, leftContent), allowAddRoot && !disabled && /*#__PURE__*/React.createElement(Button, {
81
+ icon: /*#__PURE__*/React.createElement(PlusOutlined, null),
82
+ type: "primary",
83
+ onClick: function onClick() {
84
+ return onAddRoot === null || onAddRoot === void 0 ? void 0 : onAddRoot();
85
+ },
86
+ size: "large"
87
+ }, getText('pisell-lowcode-drop-sort-add'))), /*#__PURE__*/React.createElement("div", {
88
+ className: "pisell-lowcode-drop-sort-container-content",
89
+ style: {
90
+ gap: spacing !== null && spacing !== void 0 ? spacing : 8
91
+ }
92
+ }, /*#__PURE__*/React.createElement(SortableTree, {
93
+ value: treeItems,
94
+ collapsible: true,
95
+ indicator: false,
96
+ indentationWidth: 24,
97
+ removable: allowDelete,
98
+ renderItem: renderItem,
99
+ onChange: handleChange
100
+ })));
101
+ };
102
+ export default PisellDropSort;
@@ -0,0 +1,92 @@
1
+ .pisell-lowcode-drop-sort-container {
2
+ display: flex;
3
+ flex-direction: column;
4
+ gap: 12px;
5
+
6
+ &-header {
7
+ display: flex;
8
+ justify-content: space-between;
9
+ align-items: center;
10
+ }
11
+
12
+ &-content {
13
+ display: flex;
14
+ flex-direction: column;
15
+ gap: 8px;
16
+ flex: 1;
17
+ }
18
+
19
+ &-item {
20
+ display: flex;
21
+ padding: 12px;
22
+ align-items: center;
23
+ gap: 8px;
24
+ align-self: stretch;
25
+
26
+ border-radius: 12px;
27
+ border: 1px solid var(--Gray-200, #eaecf0);
28
+ background: var(--Base-White, #fff);
29
+ /* Shadow/xs */
30
+ box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
31
+
32
+ transition: all 0.3s;
33
+
34
+ &.with-border {
35
+ border: 1px solid #f0f0f0;
36
+ }
37
+
38
+ &.dragging {
39
+ opacity: 0.5;
40
+ }
41
+
42
+ &-content {
43
+ padding: 12px;
44
+ display: flex;
45
+ align-items: center;
46
+ justify-content: space-between;
47
+ }
48
+
49
+ &-title {
50
+ flex: 1;
51
+ margin: 0 12px;
52
+ }
53
+
54
+ &-actions {
55
+ display: flex;
56
+ gap: 8px;
57
+ }
58
+ }
59
+
60
+ &-children {
61
+ padding-left: 24px;
62
+ }
63
+
64
+ &-disabled {
65
+ cursor: not-allowed;
66
+ opacity: 0.5;
67
+ }
68
+
69
+ .drag-handle {
70
+ cursor: move;
71
+ color: #999;
72
+
73
+ &:hover {
74
+ color: #666;
75
+ }
76
+ }
77
+
78
+ .action-button {
79
+ cursor: pointer;
80
+ color: #999;
81
+
82
+ &:hover {
83
+ color: #666;
84
+ }
85
+
86
+ &.delete {
87
+ &:hover {
88
+ color: #ff4d4f;
89
+ }
90
+ }
91
+ }
92
+ }
@@ -0,0 +1,19 @@
1
+ import React from 'react';
2
+ import type { Props as TreeItem } from '../../../pisellDraggable/components/TreeItem/TreeItem';
3
+ import './index.less';
4
+ interface SortableItemProps {
5
+ itemProps: TreeItem;
6
+ render?: (itemProps: TreeItem) => React.ReactNode;
7
+ domRef: React.RefObject<HTMLDivElement>;
8
+ allowAddChild?: boolean;
9
+ allowDelete?: boolean;
10
+ allowDrag?: boolean;
11
+ disabled?: boolean;
12
+ onAdd?: (itemProps: TreeItem) => void;
13
+ onDelete?: (itemProps: TreeItem) => void;
14
+ showBorder?: boolean;
15
+ spacing?: number;
16
+ maxLevel?: number;
17
+ }
18
+ declare const SortableItem: (props: SortableItemProps) => React.JSX.Element;
19
+ export default SortableItem;
@@ -0,0 +1,93 @@
1
+ var _excluded = ["item", "depth", "clone", "ghost", "indicator", "disableSelection", "disableInteraction", "wrapperRef", "style", "onCollapse", "onRemove", "childCount", "indentationWidth", "handleProps", "collapsed"];
2
+ function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
3
+ function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
4
+ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
5
+ import React from 'react';
6
+ import classNames from 'classnames';
7
+ import DotsSix from '@pisell/icon/es/DotsSix';
8
+ import Button from "../../../button";
9
+ import Icon from "../../../icon";
10
+ import "./index.less";
11
+ var SortableItem = function SortableItem(props) {
12
+ var itemProps = props.itemProps,
13
+ render = props.render,
14
+ domRef = props.domRef,
15
+ allowAddChild = props.allowAddChild,
16
+ allowDelete = props.allowDelete,
17
+ allowDrag = props.allowDrag,
18
+ disabled = props.disabled,
19
+ onAdd = props.onAdd,
20
+ onDelete = props.onDelete,
21
+ showBorder = props.showBorder,
22
+ spacing = props.spacing,
23
+ maxLevel = props.maxLevel;
24
+ var item = itemProps.item,
25
+ depth = itemProps.depth,
26
+ clone = itemProps.clone,
27
+ ghost = itemProps.ghost,
28
+ indicator = itemProps.indicator,
29
+ disableSelection = itemProps.disableSelection,
30
+ disableInteraction = itemProps.disableInteraction,
31
+ wrapperRef = itemProps.wrapperRef,
32
+ style = itemProps.style,
33
+ onCollapse = itemProps.onCollapse,
34
+ onRemove = itemProps.onRemove,
35
+ childCount = itemProps.childCount,
36
+ indentationWidth = itemProps.indentationWidth,
37
+ handleProps = itemProps.handleProps,
38
+ collapsed = itemProps.collapsed,
39
+ otherProps = _objectWithoutProperties(itemProps, _excluded);
40
+ return /*#__PURE__*/React.createElement("div", _extends({
41
+ className: classNames('pisell-lowcode-drop-sort-item', clone && 'clone', ghost && 'ghost', indicator && 'indicator', disableSelection && 'disableSelection', disableInteraction && 'disableInteraction'),
42
+ ref: wrapperRef,
43
+ style: {
44
+ '--spacing': "".concat(indentationWidth * depth, "px")
45
+ }
46
+ }, otherProps), /*#__PURE__*/React.createElement("div", {
47
+ className: classNames('pisell-lowcode-drop-sort-item-tree-item', {
48
+ 'pisell-lowcode-drop-sort-item-tree-item-border': showBorder,
49
+ disabled: disabled
50
+ }),
51
+ ref: domRef,
52
+ style: style
53
+ }, allowDrag && !disabled && /*#__PURE__*/React.createElement(Button, _extends({
54
+ icon: /*#__PURE__*/React.createElement(DotsSix, {
55
+ className: "pisell-lowcode-drop-sort-item-drag-handle-icon"
56
+ }),
57
+ type: "text",
58
+ className: "pisell-lowcode-drop-sort-item-button"
59
+ }, handleProps)), onCollapse && /*#__PURE__*/React.createElement(Button, {
60
+ icon: /*#__PURE__*/React.createElement(Icon, {
61
+ type: "pisell2-chevron-down",
62
+ className: "pisell-lowcode-drop-sort-item-icon"
63
+ }),
64
+ onClick: onCollapse,
65
+ type: "text",
66
+ className: classNames('Collapse', collapsed && 'collapsed', 'pisell-lowcode-drop-sort-item-button')
67
+ }), /*#__PURE__*/React.createElement("div", {
68
+ className: "pisell-lowcode-drop-sort-item-content"
69
+ }, render && render(itemProps)), !clone && allowAddChild && !disabled && /*#__PURE__*/React.createElement(Button, {
70
+ icon: /*#__PURE__*/React.createElement(Icon, {
71
+ type: "pisell2-plus",
72
+ className: "pisell-lowcode-drop-sort-item-icon"
73
+ }),
74
+ onClick: function onClick() {
75
+ return onAdd === null || onAdd === void 0 ? void 0 : onAdd(itemProps);
76
+ },
77
+ type: "text",
78
+ className: "pisell-lowcode-drop-sort-item-button"
79
+ }), !clone && allowDelete && !disabled && /*#__PURE__*/React.createElement(Button, {
80
+ icon: /*#__PURE__*/React.createElement(Icon, {
81
+ type: "pisell2-trash-01",
82
+ className: "pisell-lowcode-drop-sort-item-icon"
83
+ }),
84
+ onClick: function onClick() {
85
+ return onDelete === null || onDelete === void 0 ? void 0 : onDelete(itemProps);
86
+ },
87
+ type: "text",
88
+ className: "pisell-lowcode-drop-sort-item-button"
89
+ }), clone && childCount && childCount > 1 ? /*#__PURE__*/React.createElement("span", {
90
+ className: 'pisell-lowcode-drop-sort-item-count'
91
+ }, childCount) : null));
92
+ };
93
+ export default SortableItem;
@@ -0,0 +1,155 @@
1
+ .pisell-lowcode-drop-sort-item {
2
+ box-sizing: border-box;
3
+ padding-left: var(--spacing);
4
+
5
+ &.clone {
6
+ display: inline-block;
7
+ pointer-events: none;
8
+ padding: 0;
9
+ padding-left: 10px;
10
+ padding-top: 5px;
11
+
12
+ .pisell-lowcode-drop-sort-item-tree-item {
13
+ --vertical-padding: 5px;
14
+
15
+ padding-right: 24px;
16
+ box-shadow: 0px 15px 15px 0 rgba(34, 33, 81, 0.1);
17
+ }
18
+ }
19
+
20
+ &.ghost {
21
+ &.indicator {
22
+ opacity: 1;
23
+ position: relative;
24
+ z-index: 1;
25
+ margin-bottom: -1px;
26
+
27
+ .pisell-lowcode-drop-sort-item-tree-item {
28
+ position: relative;
29
+ padding: 0;
30
+ height: 8px;
31
+ border-color: #2389ff;
32
+ background-color: #56a1f8;
33
+
34
+ &:before {
35
+ position: absolute;
36
+ left: -8px;
37
+ top: -4px;
38
+ display: block;
39
+ content: '';
40
+ width: 12px;
41
+ height: 12px;
42
+ border-radius: 50%;
43
+ border: 1px solid #2389ff;
44
+ background-color: #ffffff;
45
+ }
46
+
47
+ > * {
48
+ /* Items are hidden using height and opacity to retain focus */
49
+ opacity: 0;
50
+ height: 0;
51
+ }
52
+ }
53
+ }
54
+
55
+ &:not(.indicator) {
56
+ opacity: 0.5;
57
+ }
58
+
59
+ .pisell-lowcode-drop-sort-item-tree-item > * {
60
+ box-shadow: none;
61
+ background-color: transparent;
62
+ }
63
+ }
64
+
65
+ }
66
+
67
+ .pisell-lowcode-drop-sort-item-tree-item {
68
+ position: relative;
69
+ display: flex;
70
+ padding: 12px;
71
+ align-items: center;
72
+ gap: 16px;
73
+ align-self: stretch;
74
+ border-radius: 12px;
75
+ background: var(--Base-White, #fff);
76
+
77
+ --vertical-padding: 10px;
78
+ box-sizing: border-box;
79
+ // transition: all 0.25s;
80
+
81
+ .pisell-lowcode-drop-sort-item-content {
82
+ flex: 1;
83
+ height: 48px;
84
+ }
85
+
86
+ .pisell-lowcode-drop-sort-item-button {
87
+ &:hover {
88
+ background: var(--Gray-100, #F2F4F7);
89
+ }
90
+ }
91
+
92
+ &:hover {
93
+ background: var(--Gray-25, #FCFCFD);
94
+ }
95
+
96
+ &.disabled {
97
+ border: 1px solid var(--Gray-200, #EAECF0);
98
+ background: var(--Gray-100, #F2F4F7);
99
+ cursor: not-allowed;
100
+ }
101
+ }
102
+
103
+ .pisell-lowcode-drop-sort-item-tree-item-border {
104
+ border: 1px solid var(--Gray-200, #eaecf0);
105
+ /* Shadow/xs */
106
+ box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
107
+ }
108
+
109
+ .pisell-lowcode-drop-sort-item-icon {
110
+ font-size: 20px;
111
+ color: #101828;
112
+ }
113
+
114
+ .pisell-lowcode-drop-sort-item-drag-handle-icon {
115
+ font-size: 20px;
116
+ color: #98a2b3;
117
+ }
118
+
119
+ .pisell-lowcode-drop-sort-item-count {
120
+ position: absolute;
121
+ top: -10px;
122
+ right: -10px;
123
+ display: flex;
124
+ align-items: center;
125
+ justify-content: center;
126
+ width: 24px;
127
+ height: 24px;
128
+ border-radius: 50%;
129
+ background-color: #2389ff;
130
+ font-size: 0.8rem;
131
+ font-weight: 600;
132
+ color: #fff;
133
+ }
134
+
135
+ .disableInteraction {
136
+ pointer-events: none;
137
+ }
138
+
139
+ .disableSelection,
140
+ .clone {
141
+ .pisell-lowcode-drop-sort-item-count {
142
+ user-select: none;
143
+ -webkit-user-select: none;
144
+ }
145
+ }
146
+
147
+ .Collapse {
148
+ svg {
149
+ transition: transform 250ms ease;
150
+ }
151
+
152
+ &.collapsed svg {
153
+ transform: rotate(-90deg);
154
+ }
155
+ }
@@ -0,0 +1,3 @@
1
+ import PisellDropSort from './PisellDropSort';
2
+ export default PisellDropSort;
3
+ export type { PisellDropSortProps, DropSortItem } from './types';
@@ -0,0 +1,2 @@
1
+ import PisellDropSort from "./PisellDropSort";
2
+ export default PisellDropSort;
@@ -0,0 +1,42 @@
1
+ import { CSSProperties } from 'react';
2
+ import type { Props as TreeItem } from '../pisellDraggable/components/TreeItem/TreeItem';
3
+ import type { TreeItem as TreeItemType } from '../pisellDraggable/types';
4
+ export interface DropSortItem extends TreeItemType {
5
+ [key: string]: any;
6
+ }
7
+ export interface PisellDropSortProps {
8
+ /** value */
9
+ value: DropSortItem[];
10
+ /** 允许拖拽 */
11
+ allowDrag?: boolean;
12
+ /** 允许删除 */
13
+ allowDelete?: boolean;
14
+ /** 允许添加子节点 */
15
+ allowAddChild?: boolean;
16
+ /** 允许添加根节点 */
17
+ allowAddRoot?: boolean;
18
+ /** 是否禁用 */
19
+ disabled?: boolean;
20
+ /** 节点间距 */
21
+ spacing?: number;
22
+ /** 最大层级数 */
23
+ maxLevel?: number;
24
+ /** 是否显示边框 */
25
+ showBorder?: boolean;
26
+ /** 样式 */
27
+ style?: CSSProperties;
28
+ /** 类名 */
29
+ className?: string;
30
+ /** 数据源变化回调 */
31
+ onChange?: (items: DropSortItem[]) => void;
32
+ /** 删除节点回调 */
33
+ onDelete?: (itemProps: TreeItem) => void;
34
+ /** 添加节点回调 */
35
+ onAdd?: (itemProps: TreeItem) => void;
36
+ /** 自定义渲染节点 */
37
+ renderItem?: (itemProps: TreeItem) => React.ReactNode;
38
+ /** 添加根节点回调 */
39
+ onAddRoot?: () => void;
40
+ /** 左侧自定义内容 */
41
+ leftContent?: React.ReactNode;
42
+ }
@@ -0,0 +1 @@
1
+ export {};
@@ -167,7 +167,7 @@ export declare const getSettingKeyArrByMode: ({ filter, columnSetting, dataSourc
167
167
  sort?: SortType | undefined;
168
168
  mode: "" | "localStorage" | "remote";
169
169
  currentViewMode: ModeType;
170
- }) => ("filter_setting" | "column_setting" | "gallery_setting" | "view_mode" | "group_by" | "order_by")[];
170
+ }) => ("view_mode" | "column_setting" | "order_by" | "group_by" | "gallery_setting" | "filter_setting")[];
171
171
  export declare const omit: (obj: Record<string, any>, keys: string[]) => Record<string, any>;
172
172
  export declare const stringify: (obj: Record<string, any>) => string;
173
173
  export {};
package/es/index.d.ts CHANGED
@@ -132,3 +132,4 @@ export { default as PisellPriceKeyboard } from './components/virtual-keyboard/Am
132
132
  export { default as PisellNumberKeyboard } from './components/virtual-keyboard/Number';
133
133
  export { default as VirtualKeyboardTime } from './components/virtual-keyboard/Time';
134
134
  export { default as WalletCard } from './components/walletCard';
135
+ export { default as PisellDropSort } from './components/pisellDropSort';
package/es/index.js CHANGED
@@ -131,4 +131,5 @@ export { default as VirtualKeyboard } from "./components/virtual-keyboard";
131
131
  export { default as PisellPriceKeyboard } from "./components/virtual-keyboard/Amount";
132
132
  export { default as PisellNumberKeyboard } from "./components/virtual-keyboard/Number";
133
133
  export { default as VirtualKeyboardTime } from "./components/virtual-keyboard/Time";
134
- export { default as WalletCard } from "./components/walletCard";
134
+ export { default as WalletCard } from "./components/walletCard";
135
+ export { default as PisellDropSort } from "./components/pisellDropSort";
@@ -213,5 +213,6 @@ declare const _default: {
213
213
  'pisell-lowcode-app-version-control-promote-version-ok': string;
214
214
  'pisell-lowcode-app-version-control-promote-version-cancel': string;
215
215
  'pisell-lowcode-app-version-control-version-exists': string;
216
+ 'pisell-lowcode-drop-sort-add': string;
216
217
  };
217
218
  export default _default;