@pisell/materials 6.0.11 → 6.0.12

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 (216) hide show
  1. package/build/lowcode/assets-daily.json +11 -15
  2. package/build/lowcode/assets-dev.json +2 -6
  3. package/build/lowcode/assets-prod.json +11 -15
  4. package/build/lowcode/index.js +1 -1
  5. package/build/lowcode/meta.js +7 -7
  6. package/build/lowcode/preview.js +8 -8
  7. package/build/lowcode/render/default/view.css +1 -1
  8. package/build/lowcode/render/default/view.js +22 -22
  9. package/build/lowcode/view.css +1 -1
  10. package/build/lowcode/view.js +22 -22
  11. package/dist/umd/materials.min.css +1 -0
  12. package/dist/umd/materials.min.js +1 -0
  13. package/dist/umd/static/DotsSix.57d66266.svg +1 -0
  14. package/dist/umd/static/arrow-left.e542294f.svg +1 -0
  15. package/dist/umd/static/arrow-right.763f03e0.svg +1 -0
  16. package/dist/umd/static/filter-lines.04a54ae9.svg +1 -0
  17. package/dist/umd/static/help-circle.31c9be40.svg +1 -0
  18. package/dist/umd/static/switch-vertical-01.7ebe3ba8.svg +1 -0
  19. package/es/components/dataSourceComponents/dataSourceForm/BaseForm.js +94 -3
  20. package/es/components/dataSourceComponents/dataSourceForm/submitButton/index.js +7 -6
  21. package/es/components/dataSourceComponents/dataSourceForm/type.d.ts +8 -0
  22. package/es/components/dataSourceComponents/dataSourceForm/utils.d.ts +1 -0
  23. package/es/components/dataSourceComponents/dataSourceForm/utils.js +120 -38
  24. package/es/components/dataSourceComponents/dataSourceMenu/index.d.ts +2 -0
  25. package/es/components/dataSourceComponents/dataSourceMenu/index.js +19 -0
  26. package/es/components/dataSourceComponents/dataSourceTable/BaseTable.js +46 -8
  27. package/es/components/dataSourceComponents/dataSourceTable/hooks/useTableProps.d.ts +3 -3
  28. package/es/components/dataSourceComponents/fields/Input.Mobile/WithMode.d.ts +0 -1
  29. package/es/components/dataSourceComponents/fields/Input.Mobile/WithMode.js +90 -35
  30. package/es/components/dataSourceComponents/fields/Input.Mobile/index.js +11 -1
  31. package/es/components/dataSourceComponents/fields/Input.Phone/WithMode.d.ts +0 -1
  32. package/es/components/dataSourceComponents/fields/Input.Phone/WithMode.js +73 -19
  33. package/es/components/dataSourceComponents/fields/Input.Subdomain/WithMode.d.ts +4 -2
  34. package/es/components/dataSourceComponents/fields/Input.Subdomain/WithMode.js +161 -52
  35. package/es/components/dataSourceComponents/fields/Input.Subdomain/index.d.ts +4 -2
  36. package/es/components/dataSourceComponents/fields/Input.Subdomain/index.js +2 -2
  37. package/es/components/dataSourceComponents/fields/Input.Subdomain/serve.d.ts +3 -13
  38. package/es/components/dataSourceComponents/fields/Input.Subdomain/serve.js +15 -13
  39. package/es/components/dataSourceComponents/fields/Translation/BaseTranslation.js +15 -4
  40. package/es/components/dataSourceComponents/fields/Translation/type.d.ts +1 -0
  41. package/es/components/dataSourceComponents/fields/Upload/BaseUpload.js +17 -13
  42. package/es/components/dataSourceComponents/fields/Upload/ReadPretty.d.ts +1 -1
  43. package/es/components/dataSourceComponents/fields/Upload/ReadPretty.js +4 -2
  44. package/es/components/dataSourceComponents/fields/Upload/WithMode.js +5 -4
  45. package/es/components/dataSourceComponents/fields/Upload/index.less +1 -1
  46. package/es/components/dataSourceComponents/fields/Upload/serve.d.ts +1 -1
  47. package/es/components/dataSourceComponents/fields/Upload/serve.js +5 -5
  48. package/es/components/dataSourceComponents/fields/Upload/type.d.ts +8 -0
  49. package/es/components/dataSourceComponents/fields/index.d.ts +9 -5
  50. package/es/components/dataSourceComponents/fields/type.d.ts +1 -0
  51. package/es/components/dataSourceComponents/fields/utils.js +1 -0
  52. package/es/components/dataSourceComponents/provider/actions/ActionsContext.d.ts +6 -1
  53. package/es/components/dataSourceComponents/provider/actions/ActionsProvider.d.ts +4 -1
  54. package/es/components/dataSourceComponents/provider/actions/ActionsProvider.js +0 -1
  55. package/es/components/form/index.js +12 -0
  56. package/es/components/iconfont/index.js +1 -1
  57. package/es/components/pisellDraggable/components/Action/Action.d.ts +10 -0
  58. package/es/components/pisellDraggable/components/Action/Action.js +31 -0
  59. package/es/components/pisellDraggable/components/Action/Action.less +50 -0
  60. package/es/components/pisellDraggable/components/Action/index.d.ts +2 -0
  61. package/es/components/pisellDraggable/components/Action/index.js +1 -0
  62. package/es/components/pisellDraggable/components/Handle/Handle.d.ts +3 -0
  63. package/es/components/pisellDraggable/components/Handle/Handle.js +15 -0
  64. package/es/components/pisellDraggable/components/Handle/index.d.ts +1 -0
  65. package/es/components/pisellDraggable/components/Handle/index.js +1 -0
  66. package/es/components/pisellDraggable/components/Remove/Remove.d.ts +3 -0
  67. package/es/components/pisellDraggable/components/Remove/Remove.js +17 -0
  68. package/es/components/pisellDraggable/components/Remove/index.d.ts +1 -0
  69. package/es/components/pisellDraggable/components/Remove/index.js +1 -0
  70. package/es/components/pisellDraggable/components/TreeItem/SortableTreeItem.d.ts +8 -0
  71. package/es/components/pisellDraggable/components/TreeItem/SortableTreeItem.js +51 -0
  72. package/es/components/pisellDraggable/components/TreeItem/TreeItem.d.ts +21 -0
  73. package/es/components/pisellDraggable/components/TreeItem/TreeItem.js +57 -0
  74. package/es/components/pisellDraggable/components/TreeItem/TreeItem.less +128 -0
  75. package/es/components/pisellDraggable/components/TreeItem/index.d.ts +2 -0
  76. package/es/components/pisellDraggable/components/TreeItem/index.js +2 -0
  77. package/es/components/pisellDraggable/components/index.d.ts +4 -0
  78. package/es/components/pisellDraggable/components/index.js +4 -0
  79. package/es/components/pisellDraggable/index.d.ts +27 -0
  80. package/es/components/pisellDraggable/index.js +380 -0
  81. package/es/components/pisellDraggable/types.d.ts +17 -0
  82. package/es/components/pisellDraggable/types.js +1 -0
  83. package/es/components/pisellDraggable/utilities.d.ts +17 -0
  84. package/es/components/pisellDraggable/utilities.js +230 -0
  85. package/es/components/pisellLayout/content.d.ts +1 -0
  86. package/es/components/pisellLayout/content.js +19 -2
  87. package/es/components/pisellMenu/PisellMenu.d.ts +5 -0
  88. package/es/components/pisellMenu/PisellMenu.js +55 -0
  89. package/es/components/pisellMenu/PisellMenu.less +53 -0
  90. package/es/components/pisellMenu/index.d.ts +3 -0
  91. package/es/components/pisellMenu/index.js +2 -0
  92. package/es/components/pisellMenu/types.d.ts +30 -0
  93. package/es/components/pisellMenu/types.js +1 -0
  94. package/es/components/pisellModal/components/functions/index.less +3 -0
  95. package/es/components/table/Table/utils.d.ts +1 -1
  96. package/es/components/versionModal/index.d.ts +15 -0
  97. package/es/components/versionModal/index.js +192 -0
  98. package/es/components/versionModal/index.less +3 -0
  99. package/es/index.d.ts +5 -0
  100. package/es/index.js +5 -1
  101. package/es/locales/en-US.d.ts +22 -0
  102. package/es/locales/en-US.js +24 -1
  103. package/es/locales/zh-CN.d.ts +21 -0
  104. package/es/locales/zh-CN.js +24 -2
  105. package/es/locales/zh-TW.d.ts +20 -0
  106. package/es/locales/zh-TW.js +23 -2
  107. package/lib/components/dataSourceComponents/dataSourceForm/BaseForm.js +77 -4
  108. package/lib/components/dataSourceComponents/dataSourceForm/submitButton/index.js +1 -0
  109. package/lib/components/dataSourceComponents/dataSourceForm/type.d.ts +8 -0
  110. package/lib/components/dataSourceComponents/dataSourceForm/utils.d.ts +1 -0
  111. package/lib/components/dataSourceComponents/dataSourceForm/utils.js +138 -41
  112. package/lib/components/dataSourceComponents/dataSourceMenu/index.d.ts +2 -0
  113. package/lib/components/dataSourceComponents/dataSourceMenu/index.js +45 -0
  114. package/lib/components/dataSourceComponents/dataSourceTable/BaseTable.js +14 -2
  115. package/lib/components/dataSourceComponents/dataSourceTable/hooks/useTableProps.d.ts +3 -3
  116. package/lib/components/dataSourceComponents/fields/Input.Mobile/WithMode.d.ts +0 -1
  117. package/lib/components/dataSourceComponents/fields/Input.Mobile/WithMode.js +44 -29
  118. package/lib/components/dataSourceComponents/fields/Input.Mobile/index.js +11 -1
  119. package/lib/components/dataSourceComponents/fields/Input.Phone/WithMode.d.ts +0 -1
  120. package/lib/components/dataSourceComponents/fields/Input.Phone/WithMode.js +34 -17
  121. package/lib/components/dataSourceComponents/fields/Input.Subdomain/WithMode.d.ts +4 -2
  122. package/lib/components/dataSourceComponents/fields/Input.Subdomain/WithMode.js +96 -36
  123. package/lib/components/dataSourceComponents/fields/Input.Subdomain/index.d.ts +4 -2
  124. package/lib/components/dataSourceComponents/fields/Input.Subdomain/serve.d.ts +3 -13
  125. package/lib/components/dataSourceComponents/fields/Input.Subdomain/serve.js +19 -14
  126. package/lib/components/dataSourceComponents/fields/Translation/BaseTranslation.js +15 -4
  127. package/lib/components/dataSourceComponents/fields/Translation/type.d.ts +1 -0
  128. package/lib/components/dataSourceComponents/fields/Upload/BaseUpload.js +5 -3
  129. package/lib/components/dataSourceComponents/fields/Upload/ReadPretty.d.ts +1 -1
  130. package/lib/components/dataSourceComponents/fields/Upload/ReadPretty.js +2 -2
  131. package/lib/components/dataSourceComponents/fields/Upload/WithMode.js +4 -4
  132. package/lib/components/dataSourceComponents/fields/Upload/index.less +1 -1
  133. package/lib/components/dataSourceComponents/fields/Upload/serve.d.ts +1 -1
  134. package/lib/components/dataSourceComponents/fields/Upload/serve.js +5 -5
  135. package/lib/components/dataSourceComponents/fields/Upload/type.d.ts +8 -0
  136. package/lib/components/dataSourceComponents/fields/index.d.ts +9 -5
  137. package/lib/components/dataSourceComponents/fields/type.d.ts +1 -0
  138. package/lib/components/dataSourceComponents/fields/utils.js +1 -0
  139. package/lib/components/dataSourceComponents/provider/actions/ActionsContext.d.ts +6 -1
  140. package/lib/components/dataSourceComponents/provider/actions/ActionsProvider.d.ts +4 -1
  141. package/lib/components/form/index.js +10 -1
  142. package/lib/components/iconfont/index.js +1 -1
  143. package/lib/components/pisellDraggable/components/Action/Action.d.ts +10 -0
  144. package/lib/components/pisellDraggable/components/Action/Action.js +60 -0
  145. package/lib/components/pisellDraggable/components/Action/Action.less +50 -0
  146. package/lib/components/pisellDraggable/components/Action/index.d.ts +2 -0
  147. package/lib/components/pisellDraggable/components/Action/index.js +29 -0
  148. package/lib/components/pisellDraggable/components/Handle/Handle.d.ts +3 -0
  149. package/lib/components/pisellDraggable/components/Handle/Handle.js +54 -0
  150. package/lib/components/pisellDraggable/components/Handle/index.d.ts +1 -0
  151. package/lib/components/pisellDraggable/components/Handle/index.js +29 -0
  152. package/lib/components/pisellDraggable/components/Remove/Remove.d.ts +3 -0
  153. package/lib/components/pisellDraggable/components/Remove/Remove.js +53 -0
  154. package/lib/components/pisellDraggable/components/Remove/index.d.ts +1 -0
  155. package/lib/components/pisellDraggable/components/Remove/index.js +29 -0
  156. package/lib/components/pisellDraggable/components/TreeItem/SortableTreeItem.d.ts +8 -0
  157. package/lib/components/pisellDraggable/components/TreeItem/SortableTreeItem.js +83 -0
  158. package/lib/components/pisellDraggable/components/TreeItem/TreeItem.d.ts +21 -0
  159. package/lib/components/pisellDraggable/components/TreeItem/TreeItem.js +93 -0
  160. package/lib/components/pisellDraggable/components/TreeItem/TreeItem.less +128 -0
  161. package/lib/components/pisellDraggable/components/TreeItem/index.d.ts +2 -0
  162. package/lib/components/pisellDraggable/components/TreeItem/index.js +32 -0
  163. package/lib/components/pisellDraggable/components/index.d.ts +4 -0
  164. package/lib/components/pisellDraggable/components/index.js +40 -0
  165. package/lib/components/pisellDraggable/index.d.ts +27 -0
  166. package/lib/components/pisellDraggable/index.js +271 -0
  167. package/lib/components/pisellDraggable/types.d.ts +17 -0
  168. package/lib/components/pisellDraggable/types.js +17 -0
  169. package/lib/components/pisellDraggable/utilities.d.ts +17 -0
  170. package/lib/components/pisellDraggable/utilities.js +190 -0
  171. package/lib/components/pisellLayout/content.d.ts +1 -0
  172. package/lib/components/pisellLayout/content.js +9 -1
  173. package/lib/components/pisellMenu/PisellMenu.d.ts +5 -0
  174. package/lib/components/pisellMenu/PisellMenu.js +91 -0
  175. package/lib/components/pisellMenu/PisellMenu.less +53 -0
  176. package/lib/components/pisellMenu/index.d.ts +3 -0
  177. package/lib/components/pisellMenu/index.js +36 -0
  178. package/lib/components/pisellMenu/types.d.ts +30 -0
  179. package/lib/components/pisellMenu/types.js +17 -0
  180. package/lib/components/pisellModal/components/functions/index.less +3 -0
  181. package/lib/components/table/Table/utils.d.ts +1 -1
  182. package/lib/components/versionModal/index.d.ts +15 -0
  183. package/lib/components/versionModal/index.js +219 -0
  184. package/lib/components/versionModal/index.less +3 -0
  185. package/lib/index.d.ts +5 -0
  186. package/lib/index.js +12 -0
  187. package/lib/locales/en-US.d.ts +22 -0
  188. package/lib/locales/en-US.js +24 -1
  189. package/lib/locales/zh-CN.d.ts +21 -0
  190. package/lib/locales/zh-CN.js +24 -2
  191. package/lib/locales/zh-TW.d.ts +20 -0
  192. package/lib/locales/zh-TW.js +23 -2
  193. package/lowcode/_utils/defaultSchema.ts +23 -2
  194. package/lowcode/button/meta.ts +4 -20
  195. package/lowcode/data-source-form/meta.ts +138 -1
  196. package/lowcode/data-source-form/snippets.ts +54 -0
  197. package/lowcode/data-source-menu/meta.ts +122 -0
  198. package/lowcode/data-source-table/meta.ts +32 -27
  199. package/lowcode/data-source-table/utils.tsx +33 -1
  200. package/lowcode/data-source-wrapper/meta.ts +6 -2
  201. package/lowcode/form-group/meta.ts +5 -1
  202. package/lowcode/form-item-input.mobile/__screenshots__/mobile.png +0 -0
  203. package/lowcode/form-item-input.mobile/meta.ts +36 -46
  204. package/lowcode/form-item-input.mobile/snippets.ts +8 -2
  205. package/lowcode/form-item-input.phone/meta.ts +8 -42
  206. package/lowcode/form-item-input.phone/snippets.ts +6 -0
  207. package/lowcode/form-item-input.subdomain/__screenshots__/subdomain.png +0 -0
  208. package/lowcode/form-item-input.subdomain/meta.ts +20 -6
  209. package/lowcode/form-item-input.subdomain/snippets.ts +10 -11
  210. package/lowcode/form.item/meta.ts +48 -0
  211. package/lowcode/pisell-content/meta.ts +12 -9
  212. package/lowcode/pisell-draggable/meta.ts +190 -0
  213. package/lowcode/pisell-layout/meta.ts +9 -9
  214. package/lowcode/pisell-menu/meta.ts +112 -0
  215. package/package.json +1 -1
  216. package/lowcode/form-item-input.mobile/__screenshots__/phone.png +0 -0
@@ -0,0 +1,93 @@
1
+ var __create = Object.create;
2
+ var __defProp = Object.defineProperty;
3
+ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
4
+ var __getOwnPropNames = Object.getOwnPropertyNames;
5
+ var __getProtoOf = Object.getPrototypeOf;
6
+ var __hasOwnProp = Object.prototype.hasOwnProperty;
7
+ var __export = (target, all) => {
8
+ for (var name in all)
9
+ __defProp(target, name, { get: all[name], enumerable: true });
10
+ };
11
+ var __copyProps = (to, from, except, desc) => {
12
+ if (from && typeof from === "object" || typeof from === "function") {
13
+ for (let key of __getOwnPropNames(from))
14
+ if (!__hasOwnProp.call(to, key) && key !== except)
15
+ __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
16
+ }
17
+ return to;
18
+ };
19
+ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
20
+ // If the importer is in node compatibility mode or this is not an ESM
21
+ // file that has been converted to a CommonJS file using a Babel-
22
+ // compatible transform (i.e. "__esModule" has not been set), then set
23
+ // "default" to the CommonJS "module.exports" for node compatibility.
24
+ isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
25
+ mod
26
+ ));
27
+ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
28
+
29
+ // src/components/pisellDraggable/components/TreeItem/TreeItem.tsx
30
+ var TreeItem_exports = {};
31
+ __export(TreeItem_exports, {
32
+ TreeItem: () => TreeItem
33
+ });
34
+ module.exports = __toCommonJS(TreeItem_exports);
35
+ var import_classnames = __toESM(require("classnames"));
36
+ var import_react = __toESM(require("react"));
37
+ var import_components = require("../../components");
38
+ var import_TreeItem = require("./TreeItem.less");
39
+ var TreeItem = (0, import_react.forwardRef)((props, ref) => {
40
+ const {
41
+ childCount,
42
+ clone,
43
+ depth,
44
+ disableSelection,
45
+ disableInteraction,
46
+ ghost,
47
+ handleProps,
48
+ indentationWidth,
49
+ indicator,
50
+ collapsed,
51
+ onCollapse,
52
+ onRemove,
53
+ style,
54
+ wrapperRef,
55
+ item,
56
+ renderItem,
57
+ ...otherProps
58
+ } = props;
59
+ if (renderItem) {
60
+ return renderItem(props);
61
+ }
62
+ return /* @__PURE__ */ import_react.default.createElement(
63
+ "li",
64
+ {
65
+ className: (0, import_classnames.default)(
66
+ "Wrapper",
67
+ clone && "clone",
68
+ ghost && "ghost",
69
+ indicator && "indicator",
70
+ disableSelection && "disableSelection",
71
+ disableInteraction && "disableInteraction"
72
+ ),
73
+ ref: wrapperRef,
74
+ style: {
75
+ "--spacing": `${indentationWidth * depth}px`
76
+ },
77
+ ...otherProps
78
+ },
79
+ /* @__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(
80
+ import_components.Action,
81
+ {
82
+ onClick: onCollapse,
83
+ className: (0, import_classnames.default)("Collapse", collapsed && "collapsed")
84
+ },
85
+ collapseIcon
86
+ ), /* @__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)
87
+ );
88
+ });
89
+ 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" }));
90
+ // Annotate the CommonJS export names for ESM import in node:
91
+ 0 && (module.exports = {
92
+ TreeItem
93
+ });
@@ -0,0 +1,128 @@
1
+ .Wrapper {
2
+ list-style: none;
3
+ box-sizing: border-box;
4
+ padding-left: var(--spacing);
5
+ margin-bottom: -1px;
6
+
7
+ &.clone {
8
+ display: inline-block;
9
+ pointer-events: none;
10
+ padding: 0;
11
+ padding-left: 10px;
12
+ padding-top: 5px;
13
+
14
+ .TreeItem {
15
+ --vertical-padding: 5px;
16
+
17
+ padding-right: 24px;
18
+ border-radius: 4px;
19
+ box-shadow: 0px 15px 15px 0 rgba(34, 33, 81, 0.1);
20
+ }
21
+ }
22
+
23
+ &.ghost {
24
+ &.indicator {
25
+ opacity: 1;
26
+ position: relative;
27
+ z-index: 1;
28
+ margin-bottom: -1px;
29
+
30
+ .TreeItem {
31
+ position: relative;
32
+ padding: 0;
33
+ height: 8px;
34
+ border-color: #2389ff;
35
+ background-color: #56a1f8;
36
+
37
+ &:before {
38
+ position: absolute;
39
+ left: -8px;
40
+ top: -4px;
41
+ display: block;
42
+ content: '';
43
+ width: 12px;
44
+ height: 12px;
45
+ border-radius: 50%;
46
+ border: 1px solid #2389ff;
47
+ background-color: #ffffff;
48
+ }
49
+
50
+ >* {
51
+ /* Items are hidden using height and opacity to retain focus */
52
+ opacity: 0;
53
+ height: 0;
54
+ }
55
+ }
56
+ }
57
+
58
+ &:not(.indicator) {
59
+ opacity: 0.5;
60
+ }
61
+
62
+ .TreeItem>* {
63
+ box-shadow: none;
64
+ background-color: transparent;
65
+ }
66
+ }
67
+ }
68
+
69
+ .TreeItem {
70
+ --vertical-padding: 10px;
71
+
72
+ position: relative;
73
+ display: flex;
74
+ align-items: center;
75
+ padding: var(--vertical-padding) 10px;
76
+ background-color: #fff;
77
+ border: 1px solid #dedede;
78
+ color: #222;
79
+ box-sizing: border-box;
80
+ }
81
+
82
+ .Text {
83
+ flex-grow: 1;
84
+ padding-left: 0.5rem;
85
+ white-space: nowrap;
86
+ text-overflow: ellipsis;
87
+ overflow: hidden;
88
+ }
89
+
90
+ .Count {
91
+ position: absolute;
92
+ top: -10px;
93
+ right: -10px;
94
+ display: flex;
95
+ align-items: center;
96
+ justify-content: center;
97
+ width: 24px;
98
+ height: 24px;
99
+ border-radius: 50%;
100
+ background-color: #2389ff;
101
+ font-size: 0.8rem;
102
+ font-weight: 600;
103
+ color: #fff;
104
+ }
105
+
106
+ .disableInteraction {
107
+ pointer-events: none;
108
+ }
109
+
110
+ .disableSelection,
111
+ .clone {
112
+
113
+ .Text,
114
+ .Count {
115
+ user-select: none;
116
+ -webkit-user-select: none;
117
+ }
118
+ }
119
+
120
+ .Collapse {
121
+ svg {
122
+ transition: transform 250ms ease;
123
+ }
124
+
125
+ &.collapsed svg {
126
+ transform: rotate(-90deg);
127
+ }
128
+ }
@@ -0,0 +1,2 @@
1
+ export { TreeItem } from './TreeItem';
2
+ export { SortableTreeItem } from './SortableTreeItem';
@@ -0,0 +1,32 @@
1
+ var __defProp = Object.defineProperty;
2
+ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
3
+ var __getOwnPropNames = Object.getOwnPropertyNames;
4
+ var __hasOwnProp = Object.prototype.hasOwnProperty;
5
+ var __export = (target, all) => {
6
+ for (var name in all)
7
+ __defProp(target, name, { get: all[name], enumerable: true });
8
+ };
9
+ var __copyProps = (to, from, except, desc) => {
10
+ if (from && typeof from === "object" || typeof from === "function") {
11
+ for (let key of __getOwnPropNames(from))
12
+ if (!__hasOwnProp.call(to, key) && key !== except)
13
+ __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
14
+ }
15
+ return to;
16
+ };
17
+ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
18
+
19
+ // src/components/pisellDraggable/components/TreeItem/index.ts
20
+ var TreeItem_exports = {};
21
+ __export(TreeItem_exports, {
22
+ SortableTreeItem: () => import_SortableTreeItem.SortableTreeItem,
23
+ TreeItem: () => import_TreeItem.TreeItem
24
+ });
25
+ module.exports = __toCommonJS(TreeItem_exports);
26
+ var import_TreeItem = require("./TreeItem");
27
+ var import_SortableTreeItem = require("./SortableTreeItem");
28
+ // Annotate the CommonJS export names for ESM import in node:
29
+ 0 && (module.exports = {
30
+ SortableTreeItem,
31
+ TreeItem
32
+ });
@@ -0,0 +1,4 @@
1
+ export { Action } from './Action';
2
+ export { Handle } from './Handle';
3
+ export { Remove } from './Remove';
4
+ export { TreeItem, SortableTreeItem } from './TreeItem';
@@ -0,0 +1,40 @@
1
+ var __defProp = Object.defineProperty;
2
+ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
3
+ var __getOwnPropNames = Object.getOwnPropertyNames;
4
+ var __hasOwnProp = Object.prototype.hasOwnProperty;
5
+ var __export = (target, all) => {
6
+ for (var name in all)
7
+ __defProp(target, name, { get: all[name], enumerable: true });
8
+ };
9
+ var __copyProps = (to, from, except, desc) => {
10
+ if (from && typeof from === "object" || typeof from === "function") {
11
+ for (let key of __getOwnPropNames(from))
12
+ if (!__hasOwnProp.call(to, key) && key !== except)
13
+ __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
14
+ }
15
+ return to;
16
+ };
17
+ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
18
+
19
+ // src/components/pisellDraggable/components/index.ts
20
+ var components_exports = {};
21
+ __export(components_exports, {
22
+ Action: () => import_Action.Action,
23
+ Handle: () => import_Handle.Handle,
24
+ Remove: () => import_Remove.Remove,
25
+ SortableTreeItem: () => import_TreeItem.SortableTreeItem,
26
+ TreeItem: () => import_TreeItem.TreeItem
27
+ });
28
+ module.exports = __toCommonJS(components_exports);
29
+ var import_Action = require("./Action");
30
+ var import_Handle = require("./Handle");
31
+ var import_Remove = require("./Remove");
32
+ var import_TreeItem = require("./TreeItem");
33
+ // Annotate the CommonJS export names for ESM import in node:
34
+ 0 && (module.exports = {
35
+ Action,
36
+ Handle,
37
+ Remove,
38
+ SortableTreeItem,
39
+ TreeItem
40
+ });
@@ -0,0 +1,27 @@
1
+ /**
2
+ * 可拖拽树形组件
3
+ * 基于@dnd-kit库实现,支持拖拽排序、展开折叠、删除等功能
4
+ */
5
+ import React from 'react';
6
+ import type { TreeItem, TreeItems } from './types';
7
+ interface Props {
8
+ /** 是否支持折叠功能 */
9
+ collapsible?: boolean;
10
+ /** 初始树形数据,默认使用 initialItems */
11
+ value?: TreeItems;
12
+ /** 缩进宽度,控制子节点的缩进距离 */
13
+ indentationWidth?: number;
14
+ /** 是否显示拖拽指示器 */
15
+ indicator?: boolean;
16
+ /** 是否支持删除节点功能 */
17
+ removable?: boolean;
18
+ /** 自定义渲染树节点 */
19
+ renderItem?: (item: TreeItem) => React.ReactNode;
20
+ /** 树形数据变化回调 */
21
+ onChange?: (items: TreeItems) => void;
22
+ /** 删除节点前 */
23
+ onRemoveBefore?: (item: TreeItem) => Promise<boolean>;
24
+ }
25
+ export declare function SortableTree({ collapsible, value, indicator, indentationWidth, removable, renderItem, onChange, onRemoveBefore, }: Props): React.JSX.Element;
26
+ declare const Demo: () => React.JSX.Element;
27
+ export default Demo;
@@ -0,0 +1,271 @@
1
+ var __create = Object.create;
2
+ var __defProp = Object.defineProperty;
3
+ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
4
+ var __getOwnPropNames = Object.getOwnPropertyNames;
5
+ var __getProtoOf = Object.getPrototypeOf;
6
+ var __hasOwnProp = Object.prototype.hasOwnProperty;
7
+ var __export = (target, all) => {
8
+ for (var name in all)
9
+ __defProp(target, name, { get: all[name], enumerable: true });
10
+ };
11
+ var __copyProps = (to, from, except, desc) => {
12
+ if (from && typeof from === "object" || typeof from === "function") {
13
+ for (let key of __getOwnPropNames(from))
14
+ if (!__hasOwnProp.call(to, key) && key !== except)
15
+ __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
16
+ }
17
+ return to;
18
+ };
19
+ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
20
+ // If the importer is in node compatibility mode or this is not an ESM
21
+ // file that has been converted to a CommonJS file using a Babel-
22
+ // compatible transform (i.e. "__esModule" has not been set), then set
23
+ // "default" to the CommonJS "module.exports" for node compatibility.
24
+ isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
25
+ mod
26
+ ));
27
+ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
28
+
29
+ // src/components/pisellDraggable/index.tsx
30
+ var pisellDraggable_exports = {};
31
+ __export(pisellDraggable_exports, {
32
+ SortableTree: () => SortableTree,
33
+ default: () => pisellDraggable_default
34
+ });
35
+ module.exports = __toCommonJS(pisellDraggable_exports);
36
+ var import_core = require("@dnd-kit/core");
37
+ var import_sortable = require("@dnd-kit/sortable");
38
+ var import_react = __toESM(require("react"));
39
+ var import_react_dom = require("react-dom");
40
+ var import_utilities = require("@dnd-kit/utilities");
41
+ var import_components = require("./components");
42
+ var import_utilities2 = require("./utilities");
43
+ var initialItems = [
44
+ {
45
+ id: "Home",
46
+ children: []
47
+ },
48
+ {
49
+ id: "Collections",
50
+ children: [
51
+ { id: "Spring", children: [] },
52
+ { id: "Summer", children: [] },
53
+ { id: "Fall", children: [] },
54
+ { id: "Winter", children: [] }
55
+ ]
56
+ },
57
+ {
58
+ id: "About Us",
59
+ children: []
60
+ },
61
+ {
62
+ id: "My Account",
63
+ children: [
64
+ { id: "Addresses", children: [] },
65
+ { id: "Order History", children: [] }
66
+ ]
67
+ }
68
+ ];
69
+ var measuring = {
70
+ droppable: {
71
+ strategy: import_core.MeasuringStrategy.Always
72
+ }
73
+ };
74
+ var dropAnimationConfig = {
75
+ keyframes({ transform }) {
76
+ return [
77
+ { opacity: 1, transform: import_utilities.CSS.Transform.toString(transform.initial) },
78
+ {
79
+ opacity: 0,
80
+ transform: import_utilities.CSS.Transform.toString({
81
+ ...transform.final,
82
+ x: transform.final.x + 5,
83
+ y: transform.final.y + 5
84
+ })
85
+ }
86
+ ];
87
+ },
88
+ easing: "ease-out",
89
+ sideEffects({ active }) {
90
+ active.node.animate([{ opacity: 0 }, { opacity: 1 }], {
91
+ duration: import_core.defaultDropAnimation.duration,
92
+ easing: import_core.defaultDropAnimation.easing
93
+ });
94
+ }
95
+ };
96
+ function SortableTree({
97
+ collapsible = true,
98
+ value = initialItems,
99
+ indicator = false,
100
+ indentationWidth = 50,
101
+ removable = true,
102
+ renderItem,
103
+ onChange,
104
+ onRemoveBefore
105
+ }) {
106
+ const [items, setItems] = (0, import_react.useState)([]);
107
+ const [activeId, setActiveId] = (0, import_react.useState)(null);
108
+ const [overId, setOverId] = (0, import_react.useState)(null);
109
+ const [offsetLeft, setOffsetLeft] = (0, import_react.useState)(0);
110
+ (0, import_react.useEffect)(() => {
111
+ console.log("初始化", value);
112
+ setItems(value);
113
+ }, [value]);
114
+ const flattenedItems = (0, import_react.useMemo)(() => {
115
+ const flattenedTree = (0, import_utilities2.flattenTree)(items);
116
+ const collapsedItems = flattenedTree.reduce(
117
+ (acc, { children, collapsed, id }) => collapsed && children.length ? [...acc, id] : acc,
118
+ []
119
+ );
120
+ return (0, import_utilities2.removeChildrenOf)(
121
+ flattenedTree,
122
+ activeId != null ? [activeId, ...collapsedItems] : collapsedItems
123
+ );
124
+ }, [activeId, items]);
125
+ const projected = activeId && overId ? (0, import_utilities2.getProjection)(
126
+ flattenedItems,
127
+ activeId,
128
+ overId,
129
+ offsetLeft,
130
+ indentationWidth
131
+ ) : null;
132
+ const sensorContext = (0, import_react.useRef)({
133
+ items: flattenedItems,
134
+ offset: offsetLeft
135
+ });
136
+ const sensors = (0, import_core.useSensors)((0, import_core.useSensor)(import_core.PointerSensor));
137
+ const sortedIds = (0, import_react.useMemo)(
138
+ () => flattenedItems.map(({ id }) => id),
139
+ [flattenedItems]
140
+ );
141
+ const activeItem = activeId ? flattenedItems.find(({ id }) => id === activeId) : null;
142
+ (0, import_react.useEffect)(() => {
143
+ sensorContext.current = {
144
+ items: flattenedItems,
145
+ offset: offsetLeft
146
+ };
147
+ }, [flattenedItems, offsetLeft]);
148
+ (0, import_react.useEffect)(() => {
149
+ document.body.id = "body";
150
+ }, []);
151
+ return /* @__PURE__ */ import_react.default.createElement(
152
+ import_core.DndContext,
153
+ {
154
+ sensors,
155
+ collisionDetection: import_core.closestCenter,
156
+ measuring,
157
+ onDragStart: handleDragStart,
158
+ onDragMove: handleDragMove,
159
+ onDragOver: handleDragOver,
160
+ onDragEnd: handleDragEnd,
161
+ onDragCancel: handleDragCancel
162
+ },
163
+ /* @__PURE__ */ import_react.default.createElement(import_sortable.SortableContext, { items: sortedIds, strategy: import_sortable.verticalListSortingStrategy }, flattenedItems.map((item) => {
164
+ const { id, children, collapsed, depth } = item;
165
+ return /* @__PURE__ */ import_react.default.createElement(
166
+ import_components.SortableTreeItem,
167
+ {
168
+ key: id,
169
+ id,
170
+ item,
171
+ depth: id === activeId && projected ? projected.depth : depth,
172
+ indentationWidth,
173
+ indicator,
174
+ collapsed: Boolean(collapsed && children.length),
175
+ onCollapse: collapsible && children.length ? () => handleCollapse(id) : void 0,
176
+ onRemove: removable ? () => handleRemove(item) : void 0,
177
+ renderItem
178
+ }
179
+ );
180
+ }), (0, import_react_dom.createPortal)(
181
+ /* @__PURE__ */ import_react.default.createElement(
182
+ import_core.DragOverlay,
183
+ {
184
+ dropAnimation: dropAnimationConfig,
185
+ modifiers: indicator ? [adjustTranslate] : void 0
186
+ },
187
+ activeId && activeItem ? /* @__PURE__ */ import_react.default.createElement(
188
+ import_components.SortableTreeItem,
189
+ {
190
+ id: activeId,
191
+ depth: activeItem.depth,
192
+ clone: true,
193
+ childCount: (0, import_utilities2.getChildCount)(items, activeId) + 1,
194
+ item: activeItem,
195
+ indentationWidth,
196
+ renderItem
197
+ }
198
+ ) : null
199
+ ),
200
+ document.body
201
+ ))
202
+ );
203
+ function handleDragStart({ active: { id: activeId2 } }) {
204
+ setActiveId(activeId2);
205
+ setOverId(activeId2);
206
+ document.body.style.setProperty("cursor", "grabbing");
207
+ }
208
+ function handleDragMove({ delta }) {
209
+ setOffsetLeft(delta.x);
210
+ }
211
+ function handleDragOver({ over }) {
212
+ setOverId((over == null ? void 0 : over.id) ?? null);
213
+ }
214
+ function handleDragEnd({ active, over }) {
215
+ resetState();
216
+ if (projected && over) {
217
+ const { depth, parentId } = projected;
218
+ const clonedItems = JSON.parse(
219
+ JSON.stringify((0, import_utilities2.flattenTree)(items))
220
+ );
221
+ const overIndex = clonedItems.findIndex(({ id }) => id === over.id);
222
+ const activeIndex = clonedItems.findIndex(({ id }) => id === active.id);
223
+ const activeTreeItem = clonedItems[activeIndex];
224
+ clonedItems[activeIndex] = { ...activeTreeItem, depth, parentId };
225
+ const sortedItems = (0, import_sortable.arrayMove)(clonedItems, activeIndex, overIndex);
226
+ const newItems = (0, import_utilities2.buildTree)(sortedItems);
227
+ setItems(newItems);
228
+ onChange == null ? void 0 : onChange(newItems);
229
+ }
230
+ }
231
+ function handleDragCancel() {
232
+ resetState();
233
+ }
234
+ function resetState() {
235
+ setOverId(null);
236
+ setActiveId(null);
237
+ setOffsetLeft(0);
238
+ document.body.style.setProperty("cursor", "");
239
+ }
240
+ async function handleRemove(item) {
241
+ if (onRemoveBefore) {
242
+ let res = await (onRemoveBefore == null ? void 0 : onRemoveBefore(item));
243
+ if (!res) {
244
+ return;
245
+ }
246
+ }
247
+ setItems((items2) => (0, import_utilities2.removeItem)(items2, item.id));
248
+ onChange == null ? void 0 : onChange(items);
249
+ }
250
+ function handleCollapse(id) {
251
+ setItems(
252
+ (items2) => (0, import_utilities2.setProperty)(items2, id, "collapsed", (value2) => {
253
+ return !value2;
254
+ })
255
+ );
256
+ }
257
+ }
258
+ var adjustTranslate = ({ transform }) => {
259
+ return {
260
+ ...transform,
261
+ y: transform.y - 25
262
+ };
263
+ };
264
+ var Demo = () => {
265
+ return /* @__PURE__ */ import_react.default.createElement(SortableTree, null);
266
+ };
267
+ var pisellDraggable_default = Demo;
268
+ // Annotate the CommonJS export names for ESM import in node:
269
+ 0 && (module.exports = {
270
+ SortableTree
271
+ });
@@ -0,0 +1,17 @@
1
+ import type { MutableRefObject } from 'react';
2
+ import type { UniqueIdentifier } from '@dnd-kit/core';
3
+ export interface TreeItem {
4
+ id: UniqueIdentifier;
5
+ children: TreeItem[];
6
+ collapsed?: boolean;
7
+ }
8
+ export declare type TreeItems = TreeItem[];
9
+ export interface FlattenedItem extends TreeItem {
10
+ parentId: UniqueIdentifier | null;
11
+ depth: number;
12
+ index: number;
13
+ }
14
+ export declare type SensorContext = MutableRefObject<{
15
+ items: FlattenedItem[];
16
+ offset: number;
17
+ }>;
@@ -0,0 +1,17 @@
1
+ var __defProp = Object.defineProperty;
2
+ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
3
+ var __getOwnPropNames = Object.getOwnPropertyNames;
4
+ var __hasOwnProp = Object.prototype.hasOwnProperty;
5
+ var __copyProps = (to, from, except, desc) => {
6
+ if (from && typeof from === "object" || typeof from === "function") {
7
+ for (let key of __getOwnPropNames(from))
8
+ if (!__hasOwnProp.call(to, key) && key !== except)
9
+ __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
10
+ }
11
+ return to;
12
+ };
13
+ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
14
+
15
+ // src/components/pisellDraggable/types.ts
16
+ var types_exports = {};
17
+ module.exports = __toCommonJS(types_exports);
@@ -0,0 +1,17 @@
1
+ import type { UniqueIdentifier } from '@dnd-kit/core';
2
+ import type { FlattenedItem, TreeItem, TreeItems } from './types';
3
+ export declare const iOS: boolean;
4
+ export declare function getProjection(items: FlattenedItem[], activeId: UniqueIdentifier, overId: UniqueIdentifier, dragOffset: number, indentationWidth: number): {
5
+ depth: number;
6
+ maxDepth: number;
7
+ minDepth: number;
8
+ parentId: UniqueIdentifier | null;
9
+ };
10
+ export declare function flattenTree(items: TreeItems): FlattenedItem[];
11
+ export declare function buildTree(flattenedItems: FlattenedItem[]): TreeItems;
12
+ export declare function findItem(items: TreeItem[], itemId: UniqueIdentifier): TreeItem | undefined;
13
+ export declare function findItemDeep(items: TreeItems, itemId: UniqueIdentifier): TreeItem | undefined;
14
+ export declare function removeItem(items: TreeItems, id: UniqueIdentifier): TreeItem[];
15
+ export declare function setProperty<T extends keyof TreeItem>(items: TreeItems, id: UniqueIdentifier, property: T, setter: (value: TreeItem[T]) => TreeItem[T]): TreeItem[];
16
+ export declare function getChildCount(items: TreeItems, id: UniqueIdentifier): number;
17
+ export declare function removeChildrenOf(items: FlattenedItem[], ids: UniqueIdentifier[]): FlattenedItem[];