@canlooks/can-ui 0.0.70 → 0.0.72

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 (392) hide show
  1. package/LICENSE +1 -1
  2. package/dist/cjs/components/actionSheet/actionSheet.js +9 -4
  3. package/dist/cjs/components/alert/alert.style.d.ts +2 -2
  4. package/dist/cjs/components/app/appDialog.js +28 -24
  5. package/dist/cjs/components/autocomplete/autocomplete.js +21 -27
  6. package/dist/cjs/components/avatar/avatar.d.ts +2 -2
  7. package/dist/cjs/components/avatar/avatar.js +6 -5
  8. package/dist/cjs/components/avatar/avatarGroup.js +1 -1
  9. package/dist/cjs/components/bubbleConfirm/bubbleConfirm.js +9 -2
  10. package/dist/cjs/components/bubbleConfirm/bubbleConfirm.style.d.ts +1 -1
  11. package/dist/cjs/components/calendar/calendar.style.js +124 -124
  12. package/dist/cjs/components/cascade/cascade.d.ts +2 -2
  13. package/dist/cjs/components/cascade/cascade.js +33 -21
  14. package/dist/cjs/components/cascade/cascadePanel.js +23 -13
  15. package/dist/cjs/components/checkboxBase/checkboxBase.d.ts +2 -2
  16. package/dist/cjs/components/checkboxBase/checkboxBase.js +9 -2
  17. package/dist/cjs/components/checkboxBase/checkboxBase.style.d.ts +1 -1
  18. package/dist/cjs/components/checkboxBaseGroup/checkboxBaseGroup.js +2 -2
  19. package/dist/cjs/components/clickAway/clickAway.d.ts +28 -28
  20. package/dist/cjs/components/colorPicker/colorPicker.d.ts +2 -2
  21. package/dist/cjs/components/colorPicker/colorPicker.js +2 -2
  22. package/dist/cjs/components/counter/counter.js +9 -10
  23. package/dist/cjs/components/curd/curd.d.ts +10 -12
  24. package/dist/cjs/components/curd/curd.js +38 -33
  25. package/dist/cjs/components/curd/curd.style.d.ts +2 -1
  26. package/dist/cjs/components/curd/curd.style.js +14 -4
  27. package/dist/cjs/components/curd/curdDialog.js +2 -1
  28. package/dist/cjs/components/curd/curdFilterable.d.ts +21 -0
  29. package/dist/cjs/components/curd/{curdFilter.js → curdFilterable.js} +19 -24
  30. package/dist/cjs/components/curd/index.d.ts +1 -1
  31. package/dist/cjs/components/curd/index.js +1 -1
  32. package/dist/cjs/components/dataGrid/columnResize.js +2 -2
  33. package/dist/cjs/components/dataGrid/dataGrid.d.ts +29 -12
  34. package/dist/cjs/components/dataGrid/dataGrid.js +46 -20
  35. package/dist/cjs/components/dataGrid/dataGrid.style.d.ts +5 -3
  36. package/dist/cjs/components/dataGrid/dataGrid.style.js +38 -33
  37. package/dist/cjs/components/dataGrid/dataGridHead.d.ts +4 -1
  38. package/dist/cjs/components/dataGrid/dataGridHead.js +28 -19
  39. package/dist/cjs/components/dataGrid/dataGridRows.js +1 -1
  40. package/dist/cjs/components/dataGrid/filterBubbleContent.d.ts +19 -0
  41. package/dist/cjs/components/dataGrid/filterBubbleContent.js +42 -0
  42. package/dist/cjs/components/dateTimePicker/dateTimePicker.d.ts +2 -2
  43. package/dist/cjs/components/dateTimePicker/dateTimePicker.js +27 -9
  44. package/dist/cjs/components/dateTimePicker/dateTimePicker.style.d.ts +1 -1
  45. package/dist/cjs/components/dateTimeRangePicker/dateTimeRangePicker.d.ts +4 -3
  46. package/dist/cjs/components/dateTimeRangePicker/dateTimeRangePicker.js +45 -23
  47. package/dist/cjs/components/descriptions/descriptions.js +2 -0
  48. package/dist/cjs/components/descriptions/descriptions.style.d.ts +1 -1
  49. package/dist/cjs/components/dialog/dialog.d.ts +1 -1
  50. package/dist/cjs/components/dialog/dialog.js +2 -2
  51. package/dist/cjs/components/dialog/dialog.style.d.ts +2 -2
  52. package/dist/cjs/components/draggable/draggable.d.ts +12 -2
  53. package/dist/cjs/components/draggable/draggable.js +34 -4
  54. package/dist/cjs/components/flex/flex.d.ts +7 -4
  55. package/dist/cjs/components/flex/flex.js +3 -3
  56. package/dist/cjs/components/form/form.d.ts +10 -5
  57. package/dist/cjs/components/form/form.js +45 -9
  58. package/dist/cjs/components/form/formItem.d.ts +12 -7
  59. package/dist/cjs/components/form/formItem.js +47 -33
  60. package/dist/cjs/components/form/formRelatable.js +2 -1
  61. package/dist/cjs/components/gallery/gallery.style.d.ts +1 -1
  62. package/dist/cjs/components/gallery/imageItem.js +1 -1
  63. package/dist/cjs/components/grid/grid.d.ts +5 -5
  64. package/dist/cjs/components/grid/gridItem.d.ts +8 -7
  65. package/dist/cjs/components/grid/gridItem.js +2 -3
  66. package/dist/cjs/components/image/image.d.ts +4 -4
  67. package/dist/cjs/components/input/input.d.ts +2 -2
  68. package/dist/cjs/components/input/input.js +9 -2
  69. package/dist/cjs/components/inputBase/inputBase.d.ts +16 -11
  70. package/dist/cjs/components/inputBase/inputBase.js +23 -12
  71. package/dist/cjs/components/loading/loading.d.ts +3 -1
  72. package/dist/cjs/components/loading/loading.js +2 -2
  73. package/dist/cjs/components/loading/loading.style.js +4 -3
  74. package/dist/cjs/components/loadingIndicator/loadingIndicator.d.ts +4 -2
  75. package/dist/cjs/components/loadingIndicator/loadingIndicator.js +2 -2
  76. package/dist/cjs/components/loadingIndicator/loadingIndicator.style.d.ts +1 -1
  77. package/dist/cjs/components/loadingIndicator/loadingIndicator.style.js +1 -2
  78. package/dist/cjs/components/loadingMask/loadingMask.js +1 -1
  79. package/dist/cjs/components/menu/menu.js +1 -1
  80. package/dist/cjs/components/menuItem/menuItem.d.ts +2 -2
  81. package/dist/cjs/components/optionsBase/optionsBase.js +1 -0
  82. package/dist/cjs/components/overlayBase/overlayBase.js +9 -6
  83. package/dist/cjs/components/overlayBase/overlayBase.style.js +0 -3
  84. package/dist/cjs/components/palette/palette.style.d.ts +1 -1
  85. package/dist/cjs/components/pickerDialog/pickerDialog.js +20 -7
  86. package/dist/cjs/components/pickerDialog/pickerDialog.style.d.ts +1 -1
  87. package/dist/cjs/components/popper/popper.d.ts +5 -2
  88. package/dist/cjs/components/popper/popper.js +31 -12
  89. package/dist/cjs/components/popper/popper.style.js +1 -2
  90. package/dist/cjs/components/progress/progress.js +1 -1
  91. package/dist/cjs/components/resizable/resizable.style.d.ts +1 -1
  92. package/dist/cjs/components/segmented/segmented.style.d.ts +1 -1
  93. package/dist/cjs/components/select/select.d.ts +2 -2
  94. package/dist/cjs/components/select/select.js +44 -20
  95. package/dist/cjs/components/selectedList/selectedItem.d.ts +1 -1
  96. package/dist/cjs/components/selectedList/selectedItem.js +2 -2
  97. package/dist/cjs/components/selectionContext/selectionContext.d.ts +0 -1
  98. package/dist/cjs/components/selectionContext/selectionHook.d.ts +1 -1
  99. package/dist/cjs/components/selectionContext/selectionHook.js +2 -2
  100. package/dist/cjs/components/serialInput/index.d.ts +1 -0
  101. package/dist/cjs/components/serialInput/index.js +4 -0
  102. package/dist/cjs/components/serialInput/serialInput.d.ts +21 -0
  103. package/dist/cjs/components/serialInput/serialInput.js +58 -0
  104. package/dist/cjs/components/serialInput/serialInput.style.d.ts +6 -0
  105. package/dist/cjs/components/serialInput/serialInput.style.js +13 -0
  106. package/dist/cjs/components/skeleton/skeleton.d.ts +2 -2
  107. package/dist/cjs/components/slidableActions/slidableActionsAction.js +15 -6
  108. package/dist/cjs/components/slider/slider.d.ts +2 -2
  109. package/dist/cjs/components/slider/slider.js +15 -21
  110. package/dist/cjs/components/snackbarBase/snackbarBase.style.d.ts +1 -1
  111. package/dist/cjs/components/snackbarBase/snackbarBase.style.js +1 -3
  112. package/dist/cjs/components/sortableItem/sortableItem.js +9 -10
  113. package/dist/cjs/components/status/status.d.ts +6 -6
  114. package/dist/cjs/components/switch/switch.d.ts +2 -2
  115. package/dist/cjs/components/table/table.d.ts +3 -3
  116. package/dist/cjs/components/table/table.style.d.ts +1 -1
  117. package/dist/cjs/components/table/tableSticky.d.ts +5 -5
  118. package/dist/cjs/components/table/tableSticky.js +4 -4
  119. package/dist/cjs/components/tabs/tabs.style.d.ts +3 -3
  120. package/dist/cjs/components/tag/tag.d.ts +1 -1
  121. package/dist/cjs/components/tag/tag.js +2 -1
  122. package/dist/cjs/components/tag/tag.style.d.ts +1 -1
  123. package/dist/cjs/components/textarea/textarea.d.ts +2 -2
  124. package/dist/cjs/components/textarea/textarea.js +5 -1
  125. package/dist/cjs/components/toggleButton/toggleButton.js +1 -1
  126. package/dist/cjs/components/transfer/transfer.style.d.ts +2 -2
  127. package/dist/cjs/components/transitionBase/collapse.js +36 -14
  128. package/dist/cjs/components/transitionBase/transitionBase.js +1 -1
  129. package/dist/cjs/components/transitionBase/transitionBase.style.js +1 -1
  130. package/dist/cjs/components/transportStyle/transportStyle.d.ts +1 -1
  131. package/dist/cjs/components/transportStyle/transportStyle.js +2 -3
  132. package/dist/cjs/components/tree/tree.d.ts +17 -4
  133. package/dist/cjs/components/tree/tree.js +15 -14
  134. package/dist/cjs/components/tree/tree.style.d.ts +9 -3
  135. package/dist/cjs/components/tree/tree.style.js +135 -4
  136. package/dist/cjs/components/tree/treeDnd.d.ts +25 -0
  137. package/dist/cjs/components/tree/treeDnd.js +23 -0
  138. package/dist/cjs/components/tree/treeNode.d.ts +2 -2
  139. package/dist/cjs/components/tree/treeNode.js +94 -16
  140. package/dist/cjs/components/treeSelect/treeSelect.d.ts +2 -2
  141. package/dist/cjs/components/treeSelect/treeSelect.js +3 -3
  142. package/dist/cjs/components/upload/upload.d.ts +2 -2
  143. package/dist/cjs/components/upload/upload.js +5 -2
  144. package/dist/cjs/components/upload/upload.style.d.ts +2 -2
  145. package/dist/cjs/extensions/curd/curd.d.ts +20 -0
  146. package/dist/cjs/extensions/curd/curd.js +20 -0
  147. package/dist/cjs/extensions/documentViewer/pdfViewer.d.ts +2 -2
  148. package/dist/cjs/extensions/reactiveForm/index.d.ts +2 -0
  149. package/dist/cjs/extensions/reactiveForm/index.js +5 -0
  150. package/dist/cjs/extensions/reactiveForm/reactiveForm.d.ts +40 -0
  151. package/dist/cjs/extensions/reactiveForm/reactiveForm.js +50 -0
  152. package/dist/cjs/extensions/reactiveForm/reactiveFormItem.d.ts +7 -0
  153. package/dist/cjs/extensions/reactiveForm/reactiveFormItem.js +39 -0
  154. package/dist/cjs/index.d.ts +1 -0
  155. package/dist/cjs/index.js +1 -0
  156. package/dist/cjs/types.d.ts +2 -2
  157. package/dist/cjs/utils/curd.js +5 -2
  158. package/dist/cjs/utils/dataGrid.d.ts +3 -2
  159. package/dist/cjs/utils/hooks.js +3 -3
  160. package/dist/cjs/utils/index.d.ts +2 -2
  161. package/dist/cjs/utils/index.js +2 -2
  162. package/dist/cjs/utils/utils.d.ts +17 -9
  163. package/dist/cjs/utils/utils.js +59 -16
  164. package/dist/esm/components/actionSheet/actionSheet.js +10 -5
  165. package/dist/esm/components/alert/alert.style.d.ts +2 -2
  166. package/dist/esm/components/app/appDialog.js +28 -24
  167. package/dist/esm/components/autocomplete/autocomplete.js +22 -28
  168. package/dist/esm/components/avatar/avatar.d.ts +2 -2
  169. package/dist/esm/components/avatar/avatar.js +7 -6
  170. package/dist/esm/components/avatar/avatarGroup.js +1 -1
  171. package/dist/esm/components/bubbleConfirm/bubbleConfirm.js +10 -3
  172. package/dist/esm/components/bubbleConfirm/bubbleConfirm.style.d.ts +1 -1
  173. package/dist/esm/components/calendar/calendar.style.js +124 -124
  174. package/dist/esm/components/cascade/cascade.d.ts +2 -2
  175. package/dist/esm/components/cascade/cascade.js +34 -22
  176. package/dist/esm/components/cascade/cascadePanel.js +24 -14
  177. package/dist/esm/components/checkboxBase/checkboxBase.d.ts +2 -2
  178. package/dist/esm/components/checkboxBase/checkboxBase.js +10 -3
  179. package/dist/esm/components/checkboxBase/checkboxBase.style.d.ts +1 -1
  180. package/dist/esm/components/checkboxBaseGroup/checkboxBaseGroup.js +3 -3
  181. package/dist/esm/components/clickAway/clickAway.d.ts +28 -28
  182. package/dist/esm/components/colorPicker/colorPicker.d.ts +2 -2
  183. package/dist/esm/components/colorPicker/colorPicker.js +3 -3
  184. package/dist/esm/components/counter/counter.js +10 -11
  185. package/dist/esm/components/curd/curd.d.ts +10 -12
  186. package/dist/esm/components/curd/curd.js +39 -34
  187. package/dist/esm/components/curd/curd.style.d.ts +2 -1
  188. package/dist/esm/components/curd/curd.style.js +14 -4
  189. package/dist/esm/components/curd/curdDialog.js +2 -1
  190. package/dist/esm/components/curd/curdFilterable.d.ts +21 -0
  191. package/dist/esm/components/curd/{curdFilter.js → curdFilterable.js} +20 -25
  192. package/dist/esm/components/curd/index.d.ts +1 -1
  193. package/dist/esm/components/curd/index.js +1 -1
  194. package/dist/esm/components/dataGrid/columnResize.js +3 -3
  195. package/dist/esm/components/dataGrid/dataGrid.d.ts +29 -12
  196. package/dist/esm/components/dataGrid/dataGrid.js +48 -22
  197. package/dist/esm/components/dataGrid/dataGrid.style.d.ts +5 -3
  198. package/dist/esm/components/dataGrid/dataGrid.style.js +38 -33
  199. package/dist/esm/components/dataGrid/dataGridHead.d.ts +4 -1
  200. package/dist/esm/components/dataGrid/dataGridHead.js +29 -20
  201. package/dist/esm/components/dataGrid/dataGridRows.js +1 -1
  202. package/dist/esm/components/dataGrid/filterBubbleContent.d.ts +19 -0
  203. package/dist/esm/components/dataGrid/filterBubbleContent.js +39 -0
  204. package/dist/esm/components/dateTimePicker/dateTimePicker.d.ts +2 -2
  205. package/dist/esm/components/dateTimePicker/dateTimePicker.js +28 -10
  206. package/dist/esm/components/dateTimePicker/dateTimePicker.style.d.ts +1 -1
  207. package/dist/esm/components/dateTimeRangePicker/dateTimeRangePicker.d.ts +4 -3
  208. package/dist/esm/components/dateTimeRangePicker/dateTimeRangePicker.js +46 -24
  209. package/dist/esm/components/descriptions/descriptions.js +2 -0
  210. package/dist/esm/components/descriptions/descriptions.style.d.ts +1 -1
  211. package/dist/esm/components/dialog/dialog.d.ts +1 -1
  212. package/dist/esm/components/dialog/dialog.js +2 -2
  213. package/dist/esm/components/dialog/dialog.style.d.ts +2 -2
  214. package/dist/esm/components/draggable/draggable.d.ts +12 -2
  215. package/dist/esm/components/draggable/draggable.js +35 -5
  216. package/dist/esm/components/flex/flex.d.ts +7 -4
  217. package/dist/esm/components/flex/flex.js +2 -2
  218. package/dist/esm/components/form/form.d.ts +10 -5
  219. package/dist/esm/components/form/form.js +43 -9
  220. package/dist/esm/components/form/formItem.d.ts +12 -7
  221. package/dist/esm/components/form/formItem.js +49 -35
  222. package/dist/esm/components/form/formRelatable.js +3 -2
  223. package/dist/esm/components/gallery/gallery.style.d.ts +1 -1
  224. package/dist/esm/components/gallery/imageItem.js +1 -1
  225. package/dist/esm/components/grid/grid.d.ts +5 -5
  226. package/dist/esm/components/grid/gridItem.d.ts +8 -7
  227. package/dist/esm/components/grid/gridItem.js +2 -2
  228. package/dist/esm/components/image/image.d.ts +4 -4
  229. package/dist/esm/components/input/input.d.ts +2 -2
  230. package/dist/esm/components/input/input.js +10 -3
  231. package/dist/esm/components/inputBase/inputBase.d.ts +16 -11
  232. package/dist/esm/components/inputBase/inputBase.js +25 -14
  233. package/dist/esm/components/loading/loading.d.ts +3 -1
  234. package/dist/esm/components/loading/loading.js +2 -2
  235. package/dist/esm/components/loading/loading.style.js +4 -3
  236. package/dist/esm/components/loadingIndicator/loadingIndicator.d.ts +4 -2
  237. package/dist/esm/components/loadingIndicator/loadingIndicator.js +2 -2
  238. package/dist/esm/components/loadingIndicator/loadingIndicator.style.d.ts +1 -1
  239. package/dist/esm/components/loadingIndicator/loadingIndicator.style.js +1 -2
  240. package/dist/esm/components/loadingMask/loadingMask.js +1 -1
  241. package/dist/esm/components/menu/menu.js +2 -2
  242. package/dist/esm/components/menuItem/menuItem.d.ts +2 -2
  243. package/dist/esm/components/optionsBase/optionsBase.js +1 -0
  244. package/dist/esm/components/overlayBase/overlayBase.js +10 -7
  245. package/dist/esm/components/overlayBase/overlayBase.style.js +0 -3
  246. package/dist/esm/components/palette/palette.style.d.ts +1 -1
  247. package/dist/esm/components/pickerDialog/pickerDialog.js +21 -8
  248. package/dist/esm/components/pickerDialog/pickerDialog.style.d.ts +1 -1
  249. package/dist/esm/components/popper/popper.d.ts +5 -2
  250. package/dist/esm/components/popper/popper.js +31 -12
  251. package/dist/esm/components/popper/popper.style.js +1 -2
  252. package/dist/esm/components/progress/progress.js +1 -1
  253. package/dist/esm/components/resizable/resizable.style.d.ts +1 -1
  254. package/dist/esm/components/segmented/segmented.style.d.ts +1 -1
  255. package/dist/esm/components/select/select.d.ts +2 -2
  256. package/dist/esm/components/select/select.js +46 -22
  257. package/dist/esm/components/selectedList/selectedItem.d.ts +1 -1
  258. package/dist/esm/components/selectedList/selectedItem.js +2 -2
  259. package/dist/esm/components/selectionContext/selectionContext.d.ts +0 -1
  260. package/dist/esm/components/selectionContext/selectionHook.d.ts +1 -1
  261. package/dist/esm/components/selectionContext/selectionHook.js +1 -1
  262. package/dist/esm/components/serialInput/index.d.ts +1 -0
  263. package/dist/esm/components/serialInput/index.js +1 -0
  264. package/dist/esm/components/serialInput/serialInput.d.ts +21 -0
  265. package/dist/esm/components/serialInput/serialInput.js +55 -0
  266. package/dist/esm/components/serialInput/serialInput.style.d.ts +6 -0
  267. package/dist/esm/components/serialInput/serialInput.style.js +10 -0
  268. package/dist/esm/components/skeleton/skeleton.d.ts +2 -2
  269. package/dist/esm/components/slidableActions/slidableActionsAction.js +16 -7
  270. package/dist/esm/components/slider/slider.d.ts +2 -2
  271. package/dist/esm/components/slider/slider.js +16 -22
  272. package/dist/esm/components/snackbarBase/snackbarBase.style.d.ts +1 -1
  273. package/dist/esm/components/snackbarBase/snackbarBase.style.js +1 -3
  274. package/dist/esm/components/sortableItem/sortableItem.js +10 -11
  275. package/dist/esm/components/status/status.d.ts +6 -6
  276. package/dist/esm/components/switch/switch.d.ts +2 -2
  277. package/dist/esm/components/table/table.d.ts +3 -3
  278. package/dist/esm/components/table/table.style.d.ts +1 -1
  279. package/dist/esm/components/table/tableSticky.d.ts +5 -5
  280. package/dist/esm/components/table/tableSticky.js +3 -3
  281. package/dist/esm/components/tabs/tabs.style.d.ts +3 -3
  282. package/dist/esm/components/tag/tag.d.ts +1 -1
  283. package/dist/esm/components/tag/tag.js +2 -1
  284. package/dist/esm/components/tag/tag.style.d.ts +1 -1
  285. package/dist/esm/components/textarea/textarea.d.ts +2 -2
  286. package/dist/esm/components/textarea/textarea.js +6 -2
  287. package/dist/esm/components/toggleButton/toggleButton.js +2 -2
  288. package/dist/esm/components/transfer/transfer.style.d.ts +2 -2
  289. package/dist/esm/components/transitionBase/collapse.js +38 -16
  290. package/dist/esm/components/transitionBase/transitionBase.js +1 -1
  291. package/dist/esm/components/transitionBase/transitionBase.style.js +1 -1
  292. package/dist/esm/components/transportStyle/transportStyle.d.ts +1 -1
  293. package/dist/esm/components/transportStyle/transportStyle.js +2 -2
  294. package/dist/esm/components/tree/tree.d.ts +17 -4
  295. package/dist/esm/components/tree/tree.js +17 -16
  296. package/dist/esm/components/tree/tree.style.d.ts +9 -3
  297. package/dist/esm/components/tree/tree.style.js +135 -4
  298. package/dist/esm/components/tree/treeDnd.d.ts +25 -0
  299. package/dist/esm/components/tree/treeDnd.js +19 -0
  300. package/dist/esm/components/tree/treeNode.d.ts +2 -2
  301. package/dist/esm/components/tree/treeNode.js +96 -18
  302. package/dist/esm/components/treeSelect/treeSelect.d.ts +2 -2
  303. package/dist/esm/components/treeSelect/treeSelect.js +4 -4
  304. package/dist/esm/components/upload/upload.d.ts +2 -2
  305. package/dist/esm/components/upload/upload.js +6 -3
  306. package/dist/esm/components/upload/upload.style.d.ts +2 -2
  307. package/dist/esm/extensions/curd/curd.d.ts +20 -0
  308. package/dist/esm/extensions/curd/curd.js +20 -0
  309. package/dist/esm/extensions/documentViewer/pdfViewer.d.ts +2 -2
  310. package/dist/esm/extensions/reactiveForm/index.d.ts +2 -0
  311. package/dist/esm/extensions/reactiveForm/index.js +2 -0
  312. package/dist/esm/extensions/reactiveForm/reactiveForm.d.ts +40 -0
  313. package/dist/esm/extensions/reactiveForm/reactiveForm.js +46 -0
  314. package/dist/esm/extensions/reactiveForm/reactiveFormItem.d.ts +7 -0
  315. package/dist/esm/extensions/reactiveForm/reactiveFormItem.js +36 -0
  316. package/dist/esm/index.d.ts +1 -0
  317. package/dist/esm/index.js +1 -0
  318. package/dist/esm/types.d.ts +2 -2
  319. package/dist/esm/utils/curd.js +5 -2
  320. package/dist/esm/utils/dataGrid.d.ts +3 -2
  321. package/dist/esm/utils/hooks.js +3 -3
  322. package/dist/esm/utils/index.d.ts +2 -2
  323. package/dist/esm/utils/index.js +2 -2
  324. package/dist/esm/utils/utils.d.ts +17 -9
  325. package/dist/esm/utils/utils.js +58 -16
  326. package/extensions/curd.cjs +5 -5
  327. package/extensions/documentViewer.cjs +5 -5
  328. package/extensions/reactiveForm.cjs +5 -0
  329. package/extensions/reactiveForm.d.ts +1 -0
  330. package/extensions/reactiveForm.js +1 -0
  331. package/extensions/textFormatter.cjs +5 -5
  332. package/package.json +6 -6
  333. package/dist/cjs/components/curd/curdFilter.d.ts +0 -16
  334. package/dist/esm/components/curd/curdFilter.d.ts +0 -16
  335. package/documentation/bootstrap.mjs +0 -8
  336. package/documentation/dist/assets/index-DvrKS6Tv.js +0 -7747
  337. package/documentation/dist/atom-one-dark.min.css +0 -1
  338. package/documentation/dist/components/accordion.md +0 -38
  339. package/documentation/dist/components/actionSheet.md +0 -49
  340. package/documentation/dist/components/alert.md +0 -38
  341. package/documentation/dist/components/anchorList.md +0 -36
  342. package/documentation/dist/components/autocomplete.md +0 -68
  343. package/documentation/dist/components/avatar.md +0 -79
  344. package/documentation/dist/components/badge.md +0 -33
  345. package/documentation/dist/components/bottomNavigation.md +0 -39
  346. package/documentation/dist/components/breadcrumb.md +0 -28
  347. package/documentation/dist/components/bubbleConfirm.md +0 -34
  348. package/documentation/dist/components/button.md +0 -62
  349. package/documentation/dist/components/card.md +0 -30
  350. package/documentation/dist/components/cascade.md +0 -48
  351. package/documentation/dist/components/checkbox.md +0 -36
  352. package/documentation/dist/components/colorPicker.md +0 -27
  353. package/documentation/dist/components/contextMenu.md +0 -27
  354. package/documentation/dist/components/counter.md +0 -29
  355. package/documentation/dist/components/dataGrid.md +0 -112
  356. package/documentation/dist/components/dateTimePicker.md +0 -35
  357. package/documentation/dist/components/dateTimeRangePicker.md +0 -36
  358. package/documentation/dist/components/descriptions.md +0 -35
  359. package/documentation/dist/components/dialog.md +0 -56
  360. package/documentation/dist/components/divider.md +0 -26
  361. package/documentation/dist/components/drawer.md +0 -40
  362. package/documentation/dist/components/flex.md +0 -20
  363. package/documentation/dist/components/form.md +0 -131
  364. package/documentation/dist/components/formDialog.md +0 -36
  365. package/documentation/dist/components/grid.md +0 -34
  366. package/documentation/dist/components/highlight.md +0 -26
  367. package/documentation/dist/components/image.md +0 -90
  368. package/documentation/dist/components/input.md +0 -39
  369. package/documentation/dist/components/loading.md +0 -46
  370. package/documentation/dist/components/menu.md +0 -85
  371. package/documentation/dist/components/pagination.md +0 -38
  372. package/documentation/dist/components/pickerDialog.md +0 -56
  373. package/documentation/dist/components/placeholder.md +0 -30
  374. package/documentation/dist/components/progress.md +0 -43
  375. package/documentation/dist/components/radio.md +0 -37
  376. package/documentation/dist/components/rating.md +0 -35
  377. package/documentation/dist/components/resizable.md +0 -41
  378. package/documentation/dist/components/scrollbar.md +0 -31
  379. package/documentation/dist/components/segmented.md +0 -57
  380. package/documentation/dist/components/select.md +0 -30
  381. package/documentation/dist/components/skeleton.md +0 -26
  382. package/documentation/dist/components/slidableActions.md +0 -53
  383. package/documentation/dist/guide/appComponent.md +0 -30
  384. package/documentation/dist/guide/globalMethods.md +0 -238
  385. package/documentation/dist/guide/icon.md +0 -57
  386. package/documentation/dist/guide/introduction.md +0 -2
  387. package/documentation/dist/guide/overrideProps.md +0 -0
  388. package/documentation/dist/guide/startup.md +0 -23
  389. package/documentation/dist/guide/theme.md +0 -249
  390. package/documentation/dist/index.html +0 -13
  391. package/documentation/dist/logo.png +0 -0
  392. package/documentation/vite.config.mjs +0 -18
@@ -1,27 +0,0 @@
1
- # ContextMenu 右键菜单
2
-
3
- ## 示例
4
-
5
- ```tsx
6
- import {ContextMenu} from '@canlooks/can-ui'
7
-
8
- export default function Index() {
9
- return (
10
- <ContextMenu items={[
11
- {label: '菜单1', onClick: () => console.log('菜单1')},
12
- {label: '菜单2', onClick: () => console.log('菜单2')},
13
- {label: '菜单3', onClick: () => console.log('菜单3'), color: 'error', emphasized: true}
14
- ]}>
15
- <Card elevation={2}>请点击右键</Card>
16
- </ContextMenu>
17
- )
18
- }
19
- ```
20
-
21
- ## Props
22
-
23
- `<ContextMenu/>`继承了`<Popper/>`组件的所有属性,除此之外还有:
24
-
25
- | 属性 | 类型 | 默认值 | 说明 |
26
- |-------|--------------------------------------------------------|-----|----|
27
- | items | ([MenuItemProps](/components/menuItem#MenuItemProps) \| ReactNode)[] | - | |
@@ -1,29 +0,0 @@
1
- # Counter 数量输入框
2
-
3
- ## 示例
4
-
5
- ```tsx
6
- import {Counter} from '@canlooks/can-ui'
7
-
8
- export default function Index() {
9
- return (
10
- <Counter/>
11
- )
12
- }
13
- ```
14
-
15
- ## Props
16
-
17
- | 属性 | 类型 | 默认值 | 说明 |
18
- |---------------|-----------------------------------------|----------|-----------------|
19
- | size | 'small' \| 'medium' \| 'large' | 'medium' | |
20
- | min | number | - | |
21
- | max | number | - | |
22
- | step | number | 1 | 每次减少或增加的步长 |
23
- | precision | number | 0 | 数值精度 |
24
- | defaultValue | number | - | |
25
- | value | number | - | |
26
- | onChange | (value) => void | - | |
27
- | decreaseProps | [ButtonProps](/components/button#Props) | - | 减少按钮的属性 |
28
- | increaseProps | [ButtonProps](/components/button#Props) | - | 增加按钮的属性 |
29
- | inputProps | [InputProps](/components/input#Props) | - | `<Input/>`组件的属性 |
@@ -1,112 +0,0 @@
1
- # DataGrid 数据表格
2
-
3
- ## 示例
4
-
5
- ```tsx
6
- import {DataGrid} from '@canlooks/can-ui'
7
-
8
- export default function Index() {
9
- const columns = [
10
- {
11
- title: '姓名',
12
- field: 'name'
13
- },
14
- {
15
- title: '年龄',
16
- field: 'age',
17
- sorter: (a: any, b: any) => a.age - b.age
18
- },
19
- {
20
- title: '住址',
21
- children: [
22
- {
23
- title: '城市',
24
- field: 'city'
25
- },
26
- {
27
- title: '街道',
28
- field: 'address'
29
- }
30
- ]
31
- },
32
- ]
33
-
34
- const rows = [
35
- {
36
- id: 1,
37
- name: '胡彦斌',
38
- age: 32,
39
- city: '杭州',
40
- address: '西湖区湖底公园1号',
41
- },
42
- {
43
- id: 2,
44
- name: '胡彦祖',
45
- age: 42,
46
- city: '杭州',
47
- address: '西湖区湖底公园2号',
48
- },
49
- ]
50
-
51
- return (
52
- <DataGrid
53
- columns={columns}
54
- rows={rows}
55
- selectable
56
- bordered
57
- />
58
- )
59
- }
60
- ```
61
-
62
- ## DataGrid Props
63
-
64
- `<DataGrid/>` 组件继承了[<Table\/>](/components/table)组件的所有属性,除此之外还有以下属性:
65
-
66
- | 属性 | 类型 | 默认值 | 说明 |
67
- |--------------------|-----------------------------------------------------------------------------|-----------------------------------------|----------------------------------|
68
- | columns | [ColumnType](#ColumnType)[] | - | 列的定义 |
69
- | rows | Array | - | 行数据 |
70
- | primaryKey | Id | 'id' | 数据的主键 |
71
- | childrenKey | Id | 'children' | 当数据中存在该字段,则会渲染可展开的子行 |
72
- | indent | number | 24 | 子行的缩进 |
73
- | renderExpandIcon | (key: Id, isExpand: boolean, expanded: Id[]) => void | - | 自定义渲染展开按钮 |
74
- | defaultExpanded | Id[] | [] | 默认展开的行 |
75
- | expanded | Id[] | - | 受控的展开行 |
76
- | onExpandedChange | (expanded: Id[], key: Id, isExpand: boolean) => void | - | 展开行变化的回调 |
77
- | rowProps | (row: R, index: number, rows: R[]) => RowProps | - | 传递给`<tr/>`标签的属性 |
78
- | selectable | boolean | false | 行是否可选择 |
79
- | clickRowToSelect | boolean | true | 点击行时是否触发选中 |
80
- | selectorProps | (row: R, index: number, rows: R[]) => CheckboxProps \| RadioProps | - | 传递给`<Checkbox/>`或`<Radiu/>`组件的属性 |
81
- | relation | 'dependent' \| 'standalone' | 'dependent' | 选中行之间的关系 |
82
- | integration | 'shallowest' \| 'deepest' \| 'all' | 'shallowest' | 所选值的归集方式 |
83
- | allowSelectAll | boolean | true | |
84
- | defaultOrderColumn | Id | - | 默认排序的列 |
85
- | orderColumn | Id | - | 受控的排序的列 |
86
- | defaultOrderType | 'ascend' \| 'descend' | 'descend' | 默认排序方法 |
87
- | orderType | 'ascend' \| 'descend' | - | 受控的排序方法排序方法 |
88
- | onOrderChange | (orderColumn, orderType) => void | - | 排序变化回调 |
89
- | loading | boolean | false | |
90
- | emptyPlaceholder | ReactNode | [Placeholder/](/components/placeholder) | 空行占位符 |
91
- | paginatable | boolean | true | 是否使用内置分页 |
92
- | paginationProps | [PaginationProps](/components/pagination) | - | 传递给`<Pagination/>`组件的属性 |
93
- | renderPagination | (paginationProps) => ReactNode | - | 自定义渲染分页器 |
94
- | multiple | boolean | false | `selectable`指定为`true`时有效 |
95
- | defaultValue | Id \| Id[] | - | `selectable`指定为`true`时有效 |
96
- | value | Id \| Id[] | - | `selectable`指定为`true`时有效 |
97
- | onChange | (Id \| Id[]) => void | - | `selectable`指定为`true`时有效 |
98
- | columnResizable | boolean | false | 是否可以拖拽调整列宽,开启该功能后,表头分组将失效 |
99
-
100
- ## ColumnType
101
-
102
- `ColumnType`继承了`<td/>`的所有属性,除此之外还有以下属性:
103
-
104
- | 属性 | 类型 | 默认值 | 说明 |
105
- |----------|---------------------------------------------------|-----|-----------------------------------------------------------------------|
106
- | title | ReactNode | - | 列标题 |
107
- | key | Id | - | 若不指定,则使用`field`作为key |
108
- | field | Id \| Id[] | - | 该列在数据中对应的字段名 |
109
- | sorter | boolean \| ((a, b) => number) | - | 指定为`true`时表示使用服务端排序,组件只做样式处理,不做数据排序处理;<br/>本地排序需指定 “正序” 的排序方法,倒序会自动处理 |
110
- | sticky | 'left' \| 'right' | - | 是否将列固定在左侧或右侧 |
111
- | children | ColumnType[] | - | 使用组合的表头 |
112
- | render | (row: R, index?: number, rows?: R[]) => ReactNode | - | 单元格内容的渲染方法 |
@@ -1,35 +0,0 @@
1
- # DateTimePicker 日期时间选择器
2
-
3
- ## 示例
4
-
5
- ```tsx
6
- import {DateTimePicker} from '@canlooks/can-ui'
7
-
8
- export default function Index() {
9
- return (
10
- <DateTimePicker format="YYYY-MM-DD hh:mm:ss"/>
11
- )
12
- }
13
- ```
14
-
15
- ## Props
16
-
17
- | 属性 | 类型 | 默认值 | 说明 |
18
- |-----------------|-------------------------------------------|-------|-----------------------|
19
- | inputProps | InputHTMLAttributes | - | 传递给`<input/>`的属性 |
20
- | inputRef | Ref<HTMLInputElement> | - | |
21
- | popperProps | [PopperProps](/components/popper) | - | 传递给`<Popper/>`组件的属性 |
22
- | defaultOpen | boolean | false | 默认打开状态 |
23
- | open | boolean | - | 受控的打开状态 |
24
- | onOpenChange | (open) => void | - | 打开状态变化的回调 |
25
- | autoClose | boolean | true | 是否自动关闭 |
26
- | format | string | - | 选择器的样式会根据`format`自动改变 |
27
- | defaultValue | [DayJs](https://day.js.org/) \| null | null | 默认值 |
28
- | value | [DayJs](https://day.js.org/) \| null | - | 受控的值 |
29
- | onChange | (dayJs) => void | - | 变化回调 |
30
- | min | Dayjs | - | |
31
- | max | Dayjs | - | |
32
- | disabledDates | (date: Dayjs) => boolean | - | 禁用日期选择 |
33
- | disabledHours | (date: Dayjs, hours: number) => boolean | - | 禁用小时选择 |
34
- | disabledMinutes | (date: Dayjs, minutes: number) => boolean | - | 禁用分钟选择 |
35
- | disabledSeconds | (date: Dayjs, seconds: number) => boolean | - | 禁用秒选择 |
@@ -1,36 +0,0 @@
1
- # DateTimeRangePicker 日期时间范围选择器
2
-
3
- ## 示例
4
-
5
- ```tsx
6
- import {DateTimeRangePicker} from '@canlooks/can-ui'
7
-
8
- export default function Index() {
9
- return (
10
- <DateTimeRangePicker/>
11
- )
12
- }
13
- ```
14
-
15
- ## Props
16
-
17
- | 属性 | 类型 | 默认值 | 说明 |
18
- |------------------|-------------------------------------------------------------------------|------------|-----------------------------|
19
- | startPickerProps | [DateTimePickerProps](/components/dateTimePicker) | - | 传递给`<DateTimePicker/>`组件的属性 |
20
- | endPickerProps | [DateTimePickerProps](/components/dateTimePicker) | - | 传递给`<DateTimePicker/>`组件的属性 |
21
- | format | string | - | 选择器的样式会根据`format`自动改变 |
22
- | defaultValue | [DayJs](https://day.js.org/) \| null | null | 默认值 |
23
- | value | [DayJs](https://day.js.org/) \| null | - | 受控的值 |
24
- | onChange | (dayJs) => void | - | 变化回调 |
25
- | min | Dayjs | - | |
26
- | max | Dayjs | - | |
27
- | disabledDates | (date: Dayjs) => boolean | - | 禁用日期选择 |
28
- | disabledHours | (date: Dayjs, hours: number) => boolean | - | 禁用小时选择 |
29
- | disabledMinutes | (date: Dayjs, minutes: number) => boolean | - | 禁用分钟选择 |
30
- | disabledSeconds | (date: Dayjs, seconds: number) => boolean | - | 禁用秒选择 |
31
- | variant | 'outlined' \| 'underlined' \| 'plain' | 'outlined' | |
32
- | size | 'small' \| 'medium' \| 'large' | 'medium' | |
33
- | color | string | - | |
34
- | disabled | boolean | - | |
35
- | readOnly | boolean | - | |
36
- | autoFocus | boolean | - | |
@@ -1,35 +0,0 @@
1
- # Descriptions 描述列表
2
-
3
- ## 示例
4
-
5
- ```tsx
6
- import {Descriptions} from '@canlooks/can-ui'
7
-
8
- export default function Index() {
9
- return (
10
- <Descriptions
11
- items={[
12
- {label: '用户名', content: '张三'},
13
- {label: '手机号', content: '13800138000'},
14
- {label: '邮箱', content: 'zhangsan@example.com'},
15
- {label: '地址', content: '浙江省杭州市西湖区文三路 138 号'}
16
- ]}
17
- />
18
- )
19
- }
20
- ```
21
-
22
- ## Props
23
-
24
- | 属性 | 类型 | 默认值 | 说明 |
25
- |----------------|----------------------------------------------------------------|-----------------|-----------------------------------|
26
- | size | 'small' \| 'medium' \| 'large' | | |
27
- | labelWidth | number | - | label的宽度,`grid`模式有效 |
28
- | colon | ReactNode | ':' | 自定义渲染冒号 |
29
- | labelPlacement | 'top' \| 'bottom' \| 'left' \| 'right' | 'left' | label的位置,`table`模式仅支持`left`与`top` |
30
- | disableMargin | boolean | false | `grid`模式有效 |
31
- | disablePadding | boolean | false | `table`模式有效 |
32
- | items | {label: ReactNode, content: ReactNode}[] | - | |
33
- | itemComponent | any | DescriptionItem | 自定义渲染Item组件 |
34
- | variant | 'grid' \| 'table' | | |
35
- | columnCount | number | 3 | |
@@ -1,56 +0,0 @@
1
- _# Dialog 对话框
2
-
3
- ## 示例
4
-
5
- ```tsx
6
- import {Button, Dialog} from '@canlooks/can-ui'
7
-
8
- export default function Index() {
9
- const [open, setOpen] = React.useState(false)
10
-
11
- return (
12
- <>
13
- <Button onClick={() => setOpen(true)}>打开对话框</Button>
14
-
15
- <Dialog
16
- open={open}
17
- onClose={() => setOpen(false)}
18
- icon={<Icon icon={faUser}/>}
19
- title="这是标题"
20
- >
21
- 这里是对话框的内容
22
- </Dialog>
23
- </>
24
- )
25
- }
26
- ```
27
-
28
- ## Props
29
-
30
- | 属性 | 类型 | 默认值 | 说明 |
31
- |----------------|-----------------------------------|-------|-----------------|
32
- | icon | ReactNode | - | |
33
- | title | ReactNode | - | |
34
- | footer | ReactNode | - | |
35
- | suffix | ReactNode | - | |
36
- | prefix | ReactNode | - | |
37
- | width | number | - | |
38
- | minWidth | number | - | |
39
- | maxWidth | number | - | |
40
- | showClose | boolean | true | |_
41
- | closeProps | [ButtonProps](/components/button#Props) | - | |_
42
- | showConfirm | boolean | true | |
43
- | confirmText | ReactNode | '确定' | |
44
- | confirmProps | [ButtonProps](/components/button#Props) | - | |
45
- | onConfirm | (e) => void | - | |
46
- | confirmLoading | boolean | false | 确定按钮的loading状态 |
47
- | showCancel | boolean | true | |
48
- | cancelText | ReactNode | '确定' | |
49
- | cancelProps | [ButtonProps](/components/button#Props) | - | |
50
- | onCancel | (e) => void | - | |
51
- | draggable | boolean | true | 对话框是否可拖拽 |
52
- | maskClosable | boolean | true | 点击遮罩层是否可关闭对话框 |
53
- | escapeClosable | boolean | true | 点击`ESC`是否可关闭对话框 |
54
- | defaultOpen | boolean | false | |
55
- | open | boolean | false | |
56
- | onClose | (reason: string) => void | - | |
@@ -1,26 +0,0 @@
1
- # Divider 分隔线
2
-
3
- ## 示例
4
-
5
- ```tsx
6
- import {Divider, Flex} from '@canlooks/can-ui'
7
-
8
- export default function Index() {
9
- return (
10
- <Flex width="100%" gap={12}>
11
- <Divider style={{flex: 1}}>分割线</Divider>
12
- <Divider orientation="vertical"/>
13
- <Divider style={{flex: 1}}>分割线</Divider>
14
- </Flex>
15
- )
16
- }
17
- ```
18
-
19
- ## Props
20
-
21
- | 属性 | 类型 | 默认值 | 说明 |
22
- |-------------|------------------------------|--------------|-----------------------------------------|
23
- | textAlign | 'start' \| 'center' \| 'end' | 'center' | 文字所在位置 |
24
- | alignMargin | number \| string | 36 | `textAlign`为`start`或`end`时有效,表示文字至边缘的距离 |
25
- | orientation | 'horizontal' \| 'vertical' | 'horizontal' | 分隔线方向 |
26
- | margin | number \| string | 0 | |
@@ -1,40 +0,0 @@
1
- # Drawer 抽屉
2
-
3
- ## 示例
4
-
5
- ```tsx
6
- import {Button, Drawer} from '@canlooks/can-ui'
7
-
8
- export default function Index() {
9
- const [open, setOpen] = React.useState(false)
10
-
11
- return (
12
- <>
13
- <Button onClick={() => setOpen(true)}>打开抽屉</Button>
14
- <Drawer
15
- title="抽屉标题"
16
- open={open}
17
- onClose={() => setOpen(false)}
18
- >
19
- 这里是抽屉的内容
20
- </Drawer>
21
- </>
22
- )
23
- }
24
- ```
25
-
26
- ## Props
27
-
28
- | 属性 | 类型 | 默认值 | 说明 |
29
- |----------------|----------------------------------------|---------|--------------------|
30
- | title | ReactNode | - | |
31
- | footer | ReactNode | - | |
32
- | showClose | boolean | true | |
33
- | size | string \| number | - | |
34
- | placement | 'left' \| 'right' \| 'top' \| 'bottom' | 'right' | |
35
- | maskClosable | boolean | true | 点击遮罩层是否可关闭对话框 |
36
- | escapeClosable | boolean | true | 点击`ESC`是否可关闭对话框 |
37
- | defaultOpen | boolean | false | |
38
- | open | boolean | false | |
39
- | onClose | (reason: string) => void | - | |
40
- | slideProps | [SlideProps](/components/transition) | - | 传递至`<Slide/>`组件的属性 |
@@ -1,20 +0,0 @@
1
- # Flex 弹性布局
2
-
3
- ## 示例
4
-
5
- ```tsx
6
- import {Flex} from '@canlooks/can-ui'
7
-
8
- export default function Index() {
9
- return (
10
- <Flex width="100%">
11
- <Flex flex={1}>1</Flex>
12
- <Flex flex={1}>2</Flex>
13
- </Flex>
14
- )
15
- }
16
- ```
17
-
18
- ## Props
19
-
20
- `<Flex/>`組件的属性继承于`CSSProperties`
@@ -1,131 +0,0 @@
1
- # Form 表单
2
-
3
- ## 基础示例
4
-
5
- ```tsx
6
- import {Form, Input, RadioGroup} from '@canlooks/can-ui'
7
-
8
- export default function Index() {
9
- return (
10
- <Form labelWidth="20%" style={{width: '300px'}}>
11
- <Form.Item field="name" label="姓名">
12
- <Input placeholder="请输入姓名"/>
13
- </Form.Item>
14
- <Form.Item field="gender" label="性别">
15
- <RadioGroup
16
- items={[
17
- {label: '男', value: 'male'},
18
- {label: '女', value: 'female'}
19
- ]}
20
- />
21
- </Form.Item>
22
- <Form.Item
23
- field="phone"
24
- label="电话"
25
- rules={{
26
- required: true,
27
- pattern: /^1\d{10}$/,
28
- message: '电话输入不正确'
29
- }}
30
- >
31
- <Input placeholder="请输入电话"/>
32
- </Form.Item>
33
- </Form>
34
- )
35
- }
36
- ```
37
-
38
- ## 关联字段
39
-
40
- ```tsx
41
- import {Form, Input, RadioGroup} from '@canlooks/can-ui'
42
-
43
- export default function Index() {
44
- return (
45
- <Form labelWidth="30%" style={{width: '300px'}}>
46
- <Form.Item
47
- field="needPassword"
48
- label="需要密码"
49
- initialValue={0}
50
- >
51
- <RadioGroup
52
- items={[
53
- {label: '是', value: 1},
54
- {label: '否', value: 0}
55
- ]}
56
- />
57
- </Form.Item>
58
- <Form.Relatable shouldUpdate={(prev, next) => prev.needPassword !== next.needPassword}>
59
- {({needPassword}) => !!needPassword && (
60
- <>
61
- <Form.Item field="password" label="密码">
62
- <Input type="password" placeholder="请输入密码"/>
63
- </Form.Item>
64
- <Form.Item
65
- field="confirmPassword"
66
- label="确认密码"
67
- dependencies={['password']}
68
- rules={{
69
- validator: (confirmPassword: string, {password}: any) => {
70
- if (confirmPassword !== password) {
71
- throw '两次密码输入不一致'
72
- }
73
- }
74
- }}
75
- >
76
- <Input type="password" placeholder="请再次输入密码"/>
77
- </Form.Item>
78
- </>
79
- )}
80
- </Form.Relatable>
81
- </Form>
82
- )
83
- }
84
- ```
85
-
86
- ## FormProps
87
-
88
- `FormProps`继承了[DescriptionsProps](/components/descriptions)的所有属性,此外还有如下属性:
89
-
90
- | 属性 | 类型 | 默认值 | 说明 |
91
- |--------------|----------------------------------------------|--------|---------------------------------------------------------------------------------|
92
- | wrapperRef | Ref<HTMLDivElement> | - | 最外层元素的ref,默认ref属性已经被[FormRef](#FormRef)取代 |
93
- | requiredMark | ReactNode | '*' | 必填字段的标记 |
94
- | component | ElementType | 'form' | 自定义渲染组件 |
95
- | initialValue | Object | - | 初始值 |
96
- | onChange | (field, value, formValue) => void | - | 值变化回调 |
97
- | onFinish | (formValue) => void | - | 提交完成后回调 |
98
- | items | [FormItemProps](#FormItemProps)[] | - | |
99
- | variant | 'plain' \| 'grid' \| 'table' | 'grid' | 指定为`grid`或`table`时会渲染`<Descriptions/>`组件;<br/>指定为`plain`时不渲染外层组件,直接渲染`children` |
100
- | columnCount | ResponsiveProps | 3 | |
101
-
102
- ## FormItemProps
103
-
104
- | 属性 | 类型 | 默认值 | 说明 |
105
- |--------------|--------------------------------------------------------------------------------------------------------------------------------------|-------|------------------------------------------------|
106
- | field | Id \| Id[] | - | 字段键名 |
107
- | initialValue | any | - | |
108
- | rules | {<br/>message?: ReactNode,<br/>required?: boolean,<br/>pattern?: RegExp,<br/>validator?(fieldValue, formValue, formRef): any<br/>}[] | - | |
109
- | required | boolean | false | 是否显示必填标记 |
110
- | error | boolean | false | 该字段是否存在错误 |
111
- | helperText | ReactNode | - | 提示文字 |
112
- | dependencies | Id[] \| Id[][] | - | 依赖其他字段,若依赖的字段发生变化,该字段也会重新执行`validate`操作 |
113
- | children | ReactNode \| (fieldProps, styleProps) => ReactNode | - | |
114
- | noStyle | boolean | - | 是否禁用默认样式,若指定为`true`则不会渲染`<DescriptionItem/>`组件 |
115
-
116
- ## FormRef
117
-
118
- | 方法 | 类型 | 说明 |
119
- |----------------|---------------------------------|------------------------------------------|
120
- | submit | (): Promise<FormValue \| null> | |
121
- | getFieldValue | (field: Id \| Id[]): FieldValue | |
122
- | getFormValue | (): FormValue | |
123
- | getFieldError | (field): FieldError | 获取单个字段的错误 |
124
- | getFormErrors | (): { \[field]: FieldError } | 获取所有字段的错误 |
125
- | setFormValue | (formValue: FormValue): void | 全量覆盖表单值 |
126
- | mergeFormValue | (formValue: FormValue): void | 合并表单值 |
127
- | setFieldValue | (field, value): void | |
128
- | resetForm | (): void | 重置整个表单<br/>注意:执行改方法前请确保指定了`initialValue` |
129
- | resetField | (field): void | 重置某个字段<br/>注意:执行改方法前请确保指定了`initialValue` |
130
- | isFormTouched | (): boolean | 判断该表单是否被改动过 |
131
- | isFieldTouched | (field): boolean | 判断某个字段是否被改动过 |
@@ -1,36 +0,0 @@
1
- # FormDialog 表单对话框
2
-
3
- ## 示例
4
-
5
- ```tsx
6
- import {Button, FormDialog, Input} from '@canlooks/can-ui'
7
-
8
- export default function Index() {
9
- const [open, setOpen] = React.useState(false)
10
-
11
- return (
12
- <>
13
- <Button onClick={() => setOpen(true)}>打开表单对话框</Button>
14
- <FormDialog
15
- open={open}
16
- onClose={() => setOpen(false)}
17
- title="对话框标题"
18
- items={[
19
- {field: 'name', label: '姓名', children: <Input autoFocus/>},
20
- ]}
21
- />
22
- </>
23
- )
24
- }
25
- ```
26
-
27
- ## Props
28
-
29
- `<FormDialog/>`组件继承了`<Dialog/>`组件的所有属性,此外还有如下属性:
30
-
31
- | 属性 | 类型 | 默认值 | 说明 |
32
- |-----------|---------------------------------------------------|-----|-------------------|
33
- | formProps | [FormProps](/components/form#FormProps) | - | 传递给`<Form/>`组件的属性 |
34
- | formRef | [FormRef](/components/form#FormRef) | - | |
35
- | items | [FormItemProps](/components/form#FormItemProps)[] | - | |
36
- | onFinish | (formValue) => void | - | |
@@ -1,34 +0,0 @@
1
- # Grid 网格布局
2
-
3
- ## 示例
4
-
5
- ```tsx
6
- import {Grid} from '@canlooks/can-ui'
7
-
8
- export default function Index() {
9
- return (
10
- <Grid style={{width: '100%'}}>
11
- <Grid.Item span={3}>3</Grid.Item>
12
- <Grid.Item span={7}>7</Grid.Item>
13
- <Grid.Item span={2}>2</Grid.Item>
14
- </Grid>
15
- )
16
- }
17
- ```
18
-
19
- ## GridProps
20
-
21
- | 属性 | 类型 | 默认值 | 说明 |
22
- |-------------|---------|-------|--------------------------------------|
23
- | inline | boolean | false | 若指定为`true`,相当于`display: inline-flex` |
24
- | columnCount | number | 12 | |
25
- | gap | number | - | |
26
- | columnGap | number | - | |
27
- | rowGap | number | - | |
28
-
29
- ## GridItemProps
30
-
31
- | 属性 | 类型 | 默认值 | 说明 |
32
- |--------|--------|-----|-------|
33
- | span | number | - | 横跨的列数 |
34
- | offset | number | - | 偏移的列数 |