@ticatec/uniface-element 5.0.0 → 5.0.2

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 (282) hide show
  1. package/README.md +29 -54
  2. package/README_CN.md +37 -57
  3. package/dist/app_layout/ClassicLayout.svelte +8 -40
  4. package/dist/app_layout/ColumnsLayout.svelte +3 -3
  5. package/dist/app_layout/HeaderLayout.svelte +4 -20
  6. package/dist/app_layout/RowsLayout.svelte +3 -3
  7. package/dist/app_layout/SidebarLayout.svelte +4 -20
  8. package/dist/base-calendar/CalendarBase.svelte +29 -6
  9. package/dist/base-calendar/CalendarBase.svelte.d.ts +4 -0
  10. package/dist/base-calendar/MonthPickupPanel.svelte +19 -6
  11. package/dist/base-calendar/MonthPickupPanel.svelte.d.ts +1 -1
  12. package/dist/base-calendar/MonthlyCalendar.svelte +18 -2
  13. package/dist/base-calendar/YearPickupPanel.svelte +24 -6
  14. package/dist/base-calendar/YearPickupPanel.svelte.d.ts +1 -1
  15. package/dist/composite/pagination_panel/PaginationPanel.svelte +2 -0
  16. package/dist/composite/transfer/Transfer.svelte +12 -6
  17. package/dist/data_display/accordion/Accordion.svelte +1 -4
  18. package/dist/data_display/card/CommonCardActionBar.svelte +31 -37
  19. package/dist/data_display/concise_data_table/Column.d.ts +6 -0
  20. package/dist/data_display/concise_data_table/ConciseListTable.svelte +4 -3
  21. package/dist/data_display/concise_data_table/DataCell.svelte +3 -3
  22. package/dist/data_display/list_box/ListBox.svelte +96 -23
  23. package/dist/data_display/list_box/ListBox.svelte.d.ts +4 -0
  24. package/dist/data_display/tree_view/TreeNodeView.svelte +25 -4
  25. package/dist/data_table/DataTable.svelte +5 -5
  26. package/dist/data_table/DataTable.svelte.d.ts +36 -16
  27. package/dist/data_table/lib/ActionsColumn.d.ts +2 -2
  28. package/dist/data_table/lib/DataColumn.d.ts +7 -1
  29. package/dist/data_table/lib/RowAction.d.ts +5 -5
  30. package/dist/data_table/lib/clickOutSide.js +6 -5
  31. package/dist/data_table/parts/FixedHeaderPanel.svelte +18 -3
  32. package/dist/data_table/parts/FixedRow.svelte +10 -1
  33. package/dist/data_table/parts/HrefCell.svelte +1 -1
  34. package/dist/data_table/parts/TableHeaderPanel.svelte +18 -2
  35. package/dist/data_table/parts/TextCell.svelte +2 -2
  36. package/dist/form/attachment_files/AttachmentEditor.svelte +20 -15
  37. package/dist/form/attachment_files/FileRender.svelte +1 -1
  38. package/dist/form/attachment_files/FileUploadBar.svelte +5 -2
  39. package/dist/form/attachment_files/FileUploadPanel.svelte +11 -73
  40. package/dist/form/cascade_options_select/CascadeOptionSelect.svelte +10 -2
  41. package/dist/form/cascade_options_select/OptionsBox.svelte +48 -2
  42. package/dist/form/checkbox/CheckBox.svelte +2 -7
  43. package/dist/form/color_picker/ColorPicker.svelte +150 -35
  44. package/dist/form/color_picker/ColorPicker.svelte.d.ts +7 -25
  45. package/dist/form/color_picker/ColorPickerPanel.svelte +23 -20
  46. package/dist/form/color_picker/ColorPickerPanel.svelte.d.ts +5 -18
  47. package/dist/form/color_picker/README.md +14 -7
  48. package/dist/form/color_picker/README_CN.md +14 -7
  49. package/dist/form/common_editor/CommonEditor.svelte +18 -4
  50. package/dist/form/common_editor/CommonPicker.svelte +14 -10
  51. package/dist/form/common_editor/CommonPopupEditor.svelte +8 -1
  52. package/dist/form/common_range_editor/CommonRangeEditor.svelte +11 -2
  53. package/dist/form/date_picker/DatePicker.svelte +1 -1
  54. package/dist/form/date_picker/DateTimePicker.svelte +1 -1
  55. package/dist/form/date_picker/ScrollBar.svelte +20 -12
  56. package/dist/form/date_picker/ScrollBar.svelte.d.ts +4 -18
  57. package/dist/form/date_range/DateRangeEditor.svelte +11 -3
  58. package/dist/form/group_box/group-check-box/GroupCheckBox.svelte +6 -1
  59. package/dist/form/group_box/group-radio-box/GroupRadioBox.svelte +6 -1
  60. package/dist/form/image-files/ImageFilesField.svelte +51 -7
  61. package/dist/form/image-files/ImagePreview.svelte +23 -9
  62. package/dist/form/image-files/ImageRender.svelte +69 -11
  63. package/dist/form/input_options_select/InputOptionsSelect.svelte +10 -2
  64. package/dist/form/lookup_editor/LookupEditor.svelte +9 -2
  65. package/dist/form/memo_editor/MemoEditor.svelte +2 -2
  66. package/dist/form/number_editor/NumberEditor.svelte +2 -2
  67. package/dist/form/options_multi_select/OptionsMultiSelect.svelte +20 -12
  68. package/dist/form/options_select/OptionsSelect.svelte +15 -6
  69. package/dist/form/options_select/OptionsSelect.svelte.d.ts +39 -17
  70. package/dist/form/prompts_text_editor/PromptsTextEditor.svelte +10 -2
  71. package/dist/form/radio_button/RadioButton.svelte +2 -8
  72. package/dist/form/switch/Switch.svelte +4 -4
  73. package/dist/form/text_editor/TextEditor.svelte +2 -2
  74. package/dist/form/unit-number-editor/UnitNumberEditor.svelte +10 -2
  75. package/dist/general/button/Button.svelte +5 -0
  76. package/dist/general/button/Button.svelte.d.ts +1 -0
  77. package/dist/general/button/IconButton.svelte +3 -1
  78. package/dist/general/button/IconButton.svelte.d.ts +1 -0
  79. package/dist/general/button/TextButton.svelte +3 -0
  80. package/dist/general/button/TextButton.svelte.d.ts +1 -0
  81. package/dist/general/icon/Icon.svelte +18 -1
  82. package/dist/general/split/Split.svelte +24 -4
  83. package/dist/general/tag/Tag.svelte +9 -1
  84. package/dist/navigation/nav_menu/MenuItem.d.ts +4 -2
  85. package/dist/navigation/nav_menu/NavigatorMenu.svelte +157 -34
  86. package/dist/navigation/nav_menu/NavigatorMenu.svelte.d.ts +2 -3
  87. package/dist/navigation/nav_menu/NavigatorMenuItem.svelte +25 -13
  88. package/dist/navigation/nav_menu/NavigatorMenuItem.svelte.d.ts +3 -3
  89. package/dist/navigation/navigator/Navigator.svelte +17 -17
  90. package/dist/navigation/page-stack/PageStack.svelte +160 -0
  91. package/dist/navigation/page-stack/PageStack.svelte.d.ts +24 -0
  92. package/dist/navigation/page-stack/PageStackContext.d.ts +25 -0
  93. package/dist/navigation/page-stack/PageStackContext.js +12 -0
  94. package/dist/navigation/page-stack/PageStackFrame.svelte +24 -0
  95. package/dist/navigation/page-stack/PageStackFrame.svelte.d.ts +11 -0
  96. package/dist/navigation/page-stack/README.md +154 -0
  97. package/dist/navigation/page-stack/README_CN.md +154 -0
  98. package/dist/navigation/page-stack/index.d.ts +6 -0
  99. package/dist/navigation/page-stack/index.js +4 -0
  100. package/dist/navigation/pagination/Pagination.svelte +114 -14
  101. package/dist/navigation/progress_step_bar/ProgressStepBlock.svelte +1 -5
  102. package/dist/navigation/tabs/Tabs.svelte +42 -10
  103. package/dist/navigation/tabs/Tabs.svelte.d.ts +2 -2
  104. package/dist/overlay/common/FloatingPanel.svelte +3 -17
  105. package/dist/overlay/common/FullscreenOverlay.svelte +27 -3
  106. package/dist/overlay/common/FullscreenOverlay.svelte.d.ts +6 -27
  107. package/dist/overlay/common/ModalPopover.svelte +18 -2
  108. package/dist/overlay/common/Popover.svelte +61 -57
  109. package/dist/overlay/common/Popover.svelte.d.ts +1 -5
  110. package/dist/overlay/common/escapeClose.d.ts +28 -0
  111. package/dist/overlay/common/escapeClose.js +47 -0
  112. package/dist/overlay/common/focusTrap.d.ts +8 -0
  113. package/dist/overlay/common/focusTrap.js +83 -0
  114. package/dist/overlay/common/mountSingleton.d.ts +27 -0
  115. package/dist/overlay/common/mountSingleton.js +45 -0
  116. package/dist/overlay/common/outsideClick.d.ts +28 -0
  117. package/dist/overlay/common/outsideClick.js +20 -0
  118. package/dist/overlay/common/scrollLock.d.ts +8 -0
  119. package/dist/overlay/common/scrollLock.js +49 -0
  120. package/dist/overlay/common/uniface-utils.js +0 -1
  121. package/dist/overlay/context-menu/ContextMenu.svelte.js +2 -15
  122. package/dist/overlay/context-menu/ContextMenuPanel.svelte +27 -3
  123. package/dist/overlay/dialog/Dialog.svelte +48 -32
  124. package/dist/overlay/dialog/DialogManager.svelte.js +7 -9
  125. package/dist/overlay/dialog/DialogWrapper.svelte +5 -2
  126. package/dist/overlay/drawer/Drawer.svelte +30 -3
  127. package/dist/overlay/indicator/Indicator.svelte.js +2 -15
  128. package/dist/overlay/indicator/IndicatorPanel.svelte +4 -1
  129. package/dist/overlay/message-box/MessageBox.svelte.js +2 -15
  130. package/dist/overlay/message-box/MessageBoxPanel.svelte +19 -3
  131. package/dist/overlay/toast/Toast.svelte.js +2 -15
  132. package/dist/overlay/toast/ToastPanel.svelte +1 -1
  133. package/dist/overlay/tooltip/Tooltip.svelte +1 -1
  134. package/dist/ticatec-uniface-web.css +128 -13
  135. package/dist/types.d.ts +4 -3
  136. package/dist/utils/prefixFilter.d.ts +3 -3
  137. package/dist/utils/prefixFilter.js +3 -5
  138. package/docs/components/README.md +133 -0
  139. package/docs/components/accordion/README.md +60 -0
  140. package/docs/components/accordion/example.svelte +7 -0
  141. package/docs/components/action-bar/README.md +114 -0
  142. package/docs/components/action-bar/example.svelte +7 -0
  143. package/docs/components/app-top-bar/README.md +60 -0
  144. package/docs/components/app-top-bar/example.svelte +9 -0
  145. package/docs/components/attachment-files/README.md +332 -0
  146. package/docs/components/attachment-files/example.svelte +16 -0
  147. package/docs/components/box/README.md +63 -0
  148. package/docs/components/box/example.svelte +10 -0
  149. package/docs/components/breadcrumbs/README.md +86 -0
  150. package/docs/components/breadcrumbs/example.svelte +11 -0
  151. package/docs/components/button/README.md +103 -0
  152. package/docs/components/button/example.svelte +10 -0
  153. package/docs/components/card/README.md +113 -0
  154. package/docs/components/card/example.svelte +10 -0
  155. package/docs/components/cascade-options-select/README.md +162 -0
  156. package/docs/components/cascade-options-select/example.svelte +18 -0
  157. package/docs/components/checkbox/README.md +103 -0
  158. package/docs/components/checkbox/example.svelte +15 -0
  159. package/docs/components/classic-layout/README.md +76 -0
  160. package/docs/components/classic-layout/example.svelte +16 -0
  161. package/docs/components/color-picker/README.md +132 -0
  162. package/docs/components/color-picker/example.svelte +16 -0
  163. package/docs/components/columns-layout/README.md +70 -0
  164. package/docs/components/columns-layout/example.svelte +12 -0
  165. package/docs/components/common-dialog/README.md +109 -0
  166. package/docs/components/common-dialog/example.svelte +12 -0
  167. package/docs/components/concise-data-table/README.md +307 -0
  168. package/docs/components/concise-data-table/example.svelte +16 -0
  169. package/docs/components/context-menu/README.md +99 -0
  170. package/docs/components/context-menu/example.svelte +10 -0
  171. package/docs/components/criteria-field/README.md +69 -0
  172. package/docs/components/criteria-field/example.svelte +9 -0
  173. package/docs/components/data-table/README.md +365 -0
  174. package/docs/components/data-table/example.svelte +23 -0
  175. package/docs/components/date-picker/README.md +136 -0
  176. package/docs/components/date-picker/example.svelte +16 -0
  177. package/docs/components/date-range/README.md +122 -0
  178. package/docs/components/date-range/example.svelte +15 -0
  179. package/docs/components/date-time-picker/README.md +142 -0
  180. package/docs/components/date-time-picker/example.svelte +16 -0
  181. package/docs/components/dialog/README.md +174 -0
  182. package/docs/components/dialog/example.svelte +13 -0
  183. package/docs/components/dialog-board/README.md +41 -0
  184. package/docs/components/dialog-board/example.svelte +5 -0
  185. package/docs/components/drawer/README.md +70 -0
  186. package/docs/components/drawer/example.svelte +12 -0
  187. package/docs/components/flex-form/README.md +55 -0
  188. package/docs/components/flex-form/example.svelte +7 -0
  189. package/docs/components/flex-row-form/README.md +56 -0
  190. package/docs/components/flex-row-form/example.svelte +7 -0
  191. package/docs/components/form-field/README.md +84 -0
  192. package/docs/components/form-field/example.svelte +10 -0
  193. package/docs/components/full-screen-overlay/README.md +66 -0
  194. package/docs/components/full-screen-overlay/example.svelte +11 -0
  195. package/docs/components/grid-form/README.md +75 -0
  196. package/docs/components/grid-form/example.svelte +9 -0
  197. package/docs/components/group-check-box/README.md +147 -0
  198. package/docs/components/group-check-box/example.svelte +21 -0
  199. package/docs/components/group-radio-box/README.md +144 -0
  200. package/docs/components/group-radio-box/example.svelte +21 -0
  201. package/docs/components/header-layout/README.md +65 -0
  202. package/docs/components/header-layout/example.svelte +12 -0
  203. package/docs/components/icon/README.md +87 -0
  204. package/docs/components/icon/example.svelte +9 -0
  205. package/docs/components/icon-button/README.md +91 -0
  206. package/docs/components/icon-button/example.svelte +10 -0
  207. package/docs/components/image-files/README.md +174 -0
  208. package/docs/components/image-files/example.svelte +19 -0
  209. package/docs/components/indicator/README.md +53 -0
  210. package/docs/components/indicator/example.svelte +14 -0
  211. package/docs/components/input-options-select/README.md +163 -0
  212. package/docs/components/input-options-select/example.svelte +16 -0
  213. package/docs/components/list-box/ListItem.svelte +14 -0
  214. package/docs/components/list-box/README.md +221 -0
  215. package/docs/components/list-box/example.svelte +61 -0
  216. package/docs/components/lookup-editor/README.md +137 -0
  217. package/docs/components/lookup-editor/example.svelte +16 -0
  218. package/docs/components/memo-editor/README.md +143 -0
  219. package/docs/components/memo-editor/example.svelte +16 -0
  220. package/docs/components/message-box/README.md +68 -0
  221. package/docs/components/message-box/example.svelte +10 -0
  222. package/docs/components/navigator/README.md +75 -0
  223. package/docs/components/navigator/example.svelte +13 -0
  224. package/docs/components/navigator-menu/README.md +113 -0
  225. package/docs/components/navigator-menu/example.svelte +10 -0
  226. package/docs/components/number-editor/README.md +144 -0
  227. package/docs/components/number-editor/example.svelte +16 -0
  228. package/docs/components/number-range/README.md +116 -0
  229. package/docs/components/number-range/example.svelte +15 -0
  230. package/docs/components/options-multi-select/README.md +161 -0
  231. package/docs/components/options-multi-select/example.svelte +20 -0
  232. package/docs/components/options-select/README.md +160 -0
  233. package/docs/components/options-select/example.svelte +21 -0
  234. package/docs/components/page/README.md +77 -0
  235. package/docs/components/page/example.svelte +10 -0
  236. package/docs/components/pagination/README.md +88 -0
  237. package/docs/components/pagination/example.svelte +10 -0
  238. package/docs/components/pagination-panel/README.md +120 -0
  239. package/docs/components/pagination-panel/example.svelte +16 -0
  240. package/docs/components/popup-hint/README.md +44 -0
  241. package/docs/components/popup-hint/example.svelte +5 -0
  242. package/docs/components/progress-bar/README.md +64 -0
  243. package/docs/components/progress-bar/example.svelte +8 -0
  244. package/docs/components/progress-step-bar/README.md +93 -0
  245. package/docs/components/progress-step-bar/example.svelte +7 -0
  246. package/docs/components/prompts-text-editor/README.md +146 -0
  247. package/docs/components/prompts-text-editor/example.svelte +17 -0
  248. package/docs/components/radio-button/README.md +121 -0
  249. package/docs/components/radio-button/example.svelte +18 -0
  250. package/docs/components/rows-layout/README.md +70 -0
  251. package/docs/components/rows-layout/example.svelte +12 -0
  252. package/docs/components/search-box/README.md +136 -0
  253. package/docs/components/search-box/example.svelte +16 -0
  254. package/docs/components/separator/README.md +44 -0
  255. package/docs/components/separator/example.svelte +7 -0
  256. package/docs/components/sidebar-layout/README.md +65 -0
  257. package/docs/components/sidebar-layout/example.svelte +12 -0
  258. package/docs/components/split/README.md +48 -0
  259. package/docs/components/split/example.svelte +8 -0
  260. package/docs/components/switch/README.md +77 -0
  261. package/docs/components/switch/example.svelte +11 -0
  262. package/docs/components/tabs/README.md +127 -0
  263. package/docs/components/tabs/example.svelte +22 -0
  264. package/docs/components/tag/README.md +63 -0
  265. package/docs/components/tag/example.svelte +8 -0
  266. package/docs/components/text-button/README.md +90 -0
  267. package/docs/components/text-button/example.svelte +9 -0
  268. package/docs/components/text-editor/README.md +147 -0
  269. package/docs/components/text-editor/example.svelte +16 -0
  270. package/docs/components/time-editor/README.md +130 -0
  271. package/docs/components/time-editor/example.svelte +16 -0
  272. package/docs/components/toast/README.md +52 -0
  273. package/docs/components/toast/example.svelte +9 -0
  274. package/docs/components/tooltip/README.md +44 -0
  275. package/docs/components/tooltip/example.svelte +5 -0
  276. package/docs/components/transfer/README.md +109 -0
  277. package/docs/components/transfer/example.svelte +13 -0
  278. package/docs/components/tree-view/README.md +163 -0
  279. package/docs/components/tree-view/example.svelte +26 -0
  280. package/docs/components/unit-number-editor/README.md +192 -0
  281. package/docs/components/unit-number-editor/example.svelte +18 -0
  282. package/package.json +15 -7
@@ -0,0 +1,122 @@
1
+ # DateRange
2
+
3
+ 表单组件。本文档由源码自动生成,类型以当前版本为准。
4
+
5
+ ## 简介
6
+
7
+ 同时编辑开始日期与结束日期的范围控件。
8
+
9
+ ## 适用场景
10
+
11
+ - 报表周期、订单时间和日志筛选
12
+ - 需要校验起止日期关系的查询条件
13
+
14
+ ## 导入
15
+
16
+ ```ts
17
+ import DateRange from '@ticatec/uniface-element/DateRange';
18
+ ```
19
+
20
+ ## 属性
21
+
22
+ | 属性 | 重要 | 类型 | 必填 | 默认值 | 可绑定/响应式 | 说明 |
23
+ | --- | --- | --- | --- | --- | --- | --- |
24
+ | `variant` | 是 | `EditorVariant` | 否 | `undefined` | 否 | 视觉样式变体,可选值:`""`(默认)、`plain`、`outlined`、`filled`;具体含义见组件说明。 |
25
+ | `compact` | 否 | `boolean` | 否 | `false` | 否 | 启用紧凑尺寸,减少组件高度和内边距。 |
26
+ | `disabled` | 是 | `boolean` | 否 | `false` | 否 | 禁用交互。禁用后通常不可聚焦、不可修改,也不会触发变更操作。 |
27
+ | `readonly` | 是 | `boolean` | 否 | `false` | 否 | 只读状态。保留内容展示,但阻止用户修改。 |
28
+ | `error` | 否 | `string` | 否 | `undefined` | 否 | 可选配置,具体取值范围和数据结构见类型列。 |
29
+ | `tooltip` | 否 | `string` | 否 | `undefined` | 否 | 可选配置,具体取值范围和数据结构见类型列。 |
30
+ | `theme` | 否 | `string` | 否 | `undefined` | 否 | 组件主题标识,通常通过 `data-theme` 选择对应 CSS 变量。 |
31
+ | `class` | 否 | `string` | 否 | `''` | 否 | 附加到组件根元素的 CSS class。 |
32
+ | `style` | 否 | `string` | 否 | `''` | 否 | 附加到组件根元素的内联样式。 |
33
+ | `fromValue` | 是 | `UniDate` | 否 | `$bindable<UniDate>()` | 是 | 范围起始值,推荐使用 `bind:fromValue`;变化时会与 `toValue` 一起校验先后关系。 |
34
+ | `toValue` | 是 | `UniDate` | 否 | `$bindable<UniDate>()` | 是 | 范围结束值,推荐使用 `bind:toValue`;变化时会与 `fromValue` 一起校验先后关系。 |
35
+ | `format` | 否 | `string` | 否 | `"YYYY-MM-DD"` | 否 | 可选配置,具体取值范围和数据结构见类型列。 |
36
+ | `min` | 否 | `string \| Date \| undefined` | 否 | `undefined` | 否 | 可选配置,具体取值范围和数据结构见类型列。 |
37
+ | `max` | 否 | `string \| Date \| undefined` | 否 | `undefined` | 否 | 可选配置,具体取值范围和数据结构见类型列。 |
38
+
39
+ > 组件的“可绑定”表示源码使用了 Svelte 5 的 `$bindable`;服务的“响应式”表示成员使用了 `$state`。复杂类型请同时参考 TypeScript 自动补全。
40
+
41
+ ## 重要属性说明
42
+
43
+ ### `variant`
44
+
45
+ 视觉样式变体,可选值:`""`(默认)、`plain`、`outlined`、`filled`;具体含义见组件说明。
46
+
47
+ - 类型:`EditorVariant`
48
+ - 默认值:`undefined`
49
+ - 示例写法:`variant="plain"`
50
+
51
+ ### `disabled`
52
+
53
+ 禁用交互。禁用后通常不可聚焦、不可修改,也不会触发变更操作。
54
+
55
+ - 类型:`boolean`
56
+ - 默认值:`false`
57
+ - 示例写法:`disabled={false}`
58
+
59
+ ### `readonly`
60
+
61
+ 只读状态。保留内容展示,但阻止用户修改。
62
+
63
+ - 类型:`boolean`
64
+ - 默认值:`false`
65
+ - 示例写法:`readonly={false}`
66
+
67
+ ### `fromValue`
68
+
69
+ 范围起始值,推荐使用 `bind:fromValue`;变化时会与 `toValue` 一起校验先后关系。
70
+
71
+ - 类型:`UniDate`
72
+ - 默认值:`$bindable<UniDate>()`
73
+ - 推荐写法:`bind:fromValue`
74
+
75
+ ### `toValue`
76
+
77
+ 范围结束值,推荐使用 `bind:toValue`;变化时会与 `fromValue` 一起校验先后关系。
78
+
79
+ - 类型:`UniDate`
80
+ - 默认值:`$bindable<UniDate>()`
81
+ - 推荐写法:`bind:toValue`
82
+
83
+ ## 相关类型定义
84
+
85
+ 以下定义帮助理解复杂属性的数据结构;其中部分辅助类型属于内部实现,不一定是独立导出入口。
86
+
87
+ ### `EditorVariant`
88
+
89
+ ```ts
90
+ export type EditorVariant = '' | 'plain' | 'outlined' | 'filled';
91
+ ```
92
+
93
+ ### `UniDate`
94
+
95
+ ```ts
96
+ export type UniDate = dayjs.Dayjs | Date | string | undefined;
97
+ ```
98
+
99
+ ## 示例
100
+
101
+ 完整示例见 [example.svelte](./example.svelte)。
102
+ ```svelte
103
+ <script lang="ts">
104
+ import DateRange from '@ticatec/uniface-element/DateRange';
105
+ let fromValue = $state<any>();
106
+ let toValue = $state<any>();
107
+ </script>
108
+
109
+ <DateRange
110
+ bind:fromValue
111
+ bind:toValue
112
+ variant="plain"
113
+ compact={true}
114
+ disabled={false}
115
+ readonly={false}
116
+ />
117
+ <p>当前状态:{JSON.stringify({fromValue, toValue})}</p>
118
+ ```
119
+
120
+ ## 源码
121
+
122
+ - `src/lib/form/date_range/DateRangeEditor.svelte`
@@ -0,0 +1,15 @@
1
+ <script lang="ts">
2
+ import DateRange from '@ticatec/uniface-element/DateRange';
3
+ let fromValue = $state<any>();
4
+ let toValue = $state<any>();
5
+ </script>
6
+
7
+ <DateRange
8
+ bind:fromValue
9
+ bind:toValue
10
+ variant="plain"
11
+ compact={true}
12
+ disabled={false}
13
+ readonly={false}
14
+ />
15
+ <p>当前状态:{JSON.stringify({fromValue, toValue})}</p>
@@ -0,0 +1,142 @@
1
+ # DateTimePicker
2
+
3
+ 表单组件。本文档由源码自动生成,类型以当前版本为准。
4
+
5
+ ## 简介
6
+
7
+ 同时选择日期和具体时间的控件。
8
+
9
+ ## 适用场景
10
+
11
+ - 预约、定时发布和任务执行时间
12
+ - 精确到时分秒的时间点输入
13
+
14
+ ## 导入
15
+
16
+ ```ts
17
+ import DateTimePicker from '@ticatec/uniface-element/DateTimePicker';
18
+ ```
19
+
20
+ ## 属性
21
+
22
+ | 属性 | 重要 | 类型 | 必填 | 默认值 | 可绑定/响应式 | 说明 |
23
+ | --- | --- | --- | --- | --- | --- | --- |
24
+ | `theme` | 否 | `string` | 否 | `undefined` | 否 | 主题样式名称,用于切换组件外观主题 |
25
+ | `tooltip` | 否 | `string` | 否 | `undefined` | 否 | 悬停提示信息,鼠标悬浮在字段上时显示 |
26
+ | `error` | 否 | `string` | 否 | `undefined` | 否 | 错误信息,用于在字段下方展示校验错误提示 |
27
+ | `disabled` | 是 | `boolean` | 否 | `false` | 否 | 是否禁用该字段,禁用后字段不可编辑且不响应交互 |
28
+ | `readonly` | 是 | `boolean` | 否 | `false` | 否 | 是否只读,只读状态下字段不可编辑但可聚焦和复制 |
29
+ | `compact` | 否 | `boolean` | 否 | `false` | 否 | 是否启用紧凑模式,紧凑模式下字段内部间距更小 |
30
+ | `variant` | 是 | `EditorVariant` | 否 | `undefined` | 否 | 编辑器外观样式变体 |
31
+ | `placeholder` | 是 | `string` | 否 | `undefined` | 否 | 占位提示文本,字段值为空时在输入区域内展示 |
32
+ | `style` | 否 | `string` | 否 | `undefined` | 否 | 自定义内联样式,会应用到字段根容器上 |
33
+ | `onfocus` | 否 | `(event: FocusEvent) => void` | 否 | `undefined` | 否 | 字段获得焦点时触发的回调 |
34
+ | `onblur` | 否 | `(event: FocusEvent) => void` | 否 | `undefined` | 否 | 字段失去焦点时触发的回调 |
35
+ | `onchange` | 是 | `(value?: any) => void` | 否 | `undefined` | 否 | 字段值发生变化时触发的回调 |
36
+ | `mandatory` | 否 | `boolean` | 否 | `false` | 否 | 是否为必填字段,必填时字段值不能为空 |
37
+ | `value` | 是 | `UniDate` | 否 | `$bindable<UniDate>()` | 是 | 组件的核心值。支持绑定时建议使用 `bind:value`,外部修改会同步到组件。 |
38
+ | `min` | 否 | `UniDate` | 否 | `undefined` | 否 | 可选配置,具体取值范围和数据结构见类型列。 |
39
+ | `max` | 否 | `UniDate` | 否 | `undefined` | 否 | 可选配置,具体取值范围和数据结构见类型列。 |
40
+ | `precision` | 否 | `Precision` | 否 | `"M"` | 否 | 可选配置,具体取值范围和数据结构见类型列。 |
41
+
42
+ > 组件的“可绑定”表示源码使用了 Svelte 5 的 `$bindable`;服务的“响应式”表示成员使用了 `$state`。复杂类型请同时参考 TypeScript 自动补全。
43
+
44
+ ## 重要属性说明
45
+
46
+ ### `disabled`
47
+
48
+ 是否禁用该字段,禁用后字段不可编辑且不响应交互
49
+
50
+ - 类型:`boolean`
51
+ - 默认值:`false`
52
+ - 示例写法:`disabled={false}`
53
+
54
+ ### `readonly`
55
+
56
+ 是否只读,只读状态下字段不可编辑但可聚焦和复制
57
+
58
+ - 类型:`boolean`
59
+ - 默认值:`false`
60
+ - 示例写法:`readonly={false}`
61
+
62
+ ### `variant`
63
+
64
+ 编辑器外观样式变体
65
+
66
+ - 类型:`EditorVariant`
67
+ - 默认值:`undefined`
68
+ - 示例写法:`variant="plain"`
69
+
70
+ ### `placeholder`
71
+
72
+ 占位提示文本,字段值为空时在输入区域内展示
73
+
74
+ - 类型:`string`
75
+ - 默认值:`undefined`
76
+ - 示例写法:`placeholder="请输入或选择"`
77
+
78
+ ### `onchange`
79
+
80
+ 字段值发生变化时触发的回调
81
+
82
+ - 类型:`(value?: any) => void`
83
+ - 默认值:`undefined`
84
+ - 示例写法:`onchange={async (...args: any[]) => { console.log('onchange', ...args); return true; }}`
85
+
86
+ ### `value`
87
+
88
+ 组件的核心值。支持绑定时建议使用 `bind:value`,外部修改会同步到组件。
89
+
90
+ - 类型:`UniDate`
91
+ - 默认值:`$bindable<UniDate>()`
92
+ - 推荐写法:`bind:value`
93
+
94
+ ## 组件实例方法
95
+
96
+ 通过 `bind:this` 获取组件实例后调用。
97
+
98
+ | 方法 | 类型 | 说明 |
99
+ | --- | --- | --- |
100
+ | `focus()` | `() => void` | 组件实例方法。 |
101
+
102
+ ## 相关类型定义
103
+
104
+ 以下定义帮助理解复杂属性的数据结构;其中部分辅助类型属于内部实现,不一定是独立导出入口。
105
+
106
+ ### `EditorVariant`
107
+
108
+ ```ts
109
+ export type EditorVariant = '' | 'plain' | 'outlined' | 'filled';
110
+ ```
111
+
112
+ ### `UniDate`
113
+
114
+ ```ts
115
+ export type UniDate = dayjs.Dayjs | Date | string | undefined;
116
+ ```
117
+
118
+ ## 示例
119
+
120
+ 完整示例见 [example.svelte](./example.svelte)。
121
+ ```svelte
122
+ <script lang="ts">
123
+ import DateTimePicker from '@ticatec/uniface-element/DateTimePicker';
124
+ let value = $state<any>('2026-08-22 09:30:00');
125
+ </script>
126
+
127
+ <DateTimePicker
128
+ bind:value
129
+ onchange={async (...args: any[]) => { console.log('onchange', ...args); return true; }}
130
+ onfocus={async (...args: any[]) => { console.log('onfocus', ...args); return true; }}
131
+ variant="plain"
132
+ placeholder="请输入或选择"
133
+ disabled={false}
134
+ readonly={false}
135
+ compact={true}
136
+ />
137
+ <p>当前状态:{JSON.stringify({value})}</p>
138
+ ```
139
+
140
+ ## 源码
141
+
142
+ - `src/lib/form/date_picker/DateTimePicker.svelte`
@@ -0,0 +1,16 @@
1
+ <script lang="ts">
2
+ import DateTimePicker from '@ticatec/uniface-element/DateTimePicker';
3
+ let value = $state<any>('2026-08-22 09:30:00');
4
+ </script>
5
+
6
+ <DateTimePicker
7
+ bind:value
8
+ onchange={async (...args: any[]) => { console.log('onchange', ...args); return true; }}
9
+ onfocus={async (...args: any[]) => { console.log('onfocus', ...args); return true; }}
10
+ variant="plain"
11
+ placeholder="请输入或选择"
12
+ disabled={false}
13
+ readonly={false}
14
+ compact={true}
15
+ />
16
+ <p>当前状态:{JSON.stringify({value})}</p>
@@ -0,0 +1,174 @@
1
+ # Dialog
2
+
3
+ 浮层与弹窗组件。本文档由源码自动生成,类型以当前版本为准。
4
+
5
+ ## 简介
6
+
7
+ 可堆叠、可等待返回结果的业务对话框。
8
+
9
+ ## 适用场景
10
+
11
+ - 编辑对象、选择数据和复杂确认流程
12
+ - 需要 Promise 返回值或多个弹窗叠加
13
+
14
+ ## 导入
15
+
16
+ ```ts
17
+ import Dialog from '@ticatec/uniface-element/Dialog';
18
+ ```
19
+
20
+ ## 属性
21
+
22
+ | 属性 | 重要 | 类型 | 必填 | 默认值 | 可绑定/响应式 | 说明 |
23
+ | --- | --- | --- | --- | --- | --- | --- |
24
+ | `title` | 是 | `string` | 是 | `—` | 否 | 可选配置,具体取值范围和数据结构见类型列。 |
25
+ | `width` | 否 | `string` | 否 | `'unset'` | 否 | 宽度配置;字符串可以使用 px、rem、% 等 CSS 单位。 |
26
+ | `height` | 否 | `string` | 否 | `'unset'` | 否 | 高度配置;字符串可以使用 px、rem、% 等 CSS 单位。 |
27
+ | `actions` | 否 | `ButtonActions \| null` | 否 | `null` | 否 | 可选配置,具体取值范围和数据结构见类型列。 |
28
+ | `closeConfirm` | 否 | `DialogCloseConfirm \| null` | 否 | `null` | 否 | 可选配置,具体取值范围和数据结构见类型列。 |
29
+ | `content$style` | 否 | `string` | 否 | `''` | 否 | 可选配置,具体取值范围和数据结构见类型列。 |
30
+ | `hideClose` | 否 | `boolean` | 否 | `false` | 否 | 可选配置,具体取值范围和数据结构见类型列。 |
31
+ | `closeButton` | 否 | `string` | 否 | `i18nRes.common.btnClose` | 否 | 可选配置,具体取值范围和数据结构见类型列。 |
32
+ | `onClose` | 是 | `OnClose \| null` | 否 | `null` | 否 | 事件或行为回调;参数与返回值以类型签名为准。 |
33
+ | `closable` | 否 | `boolean` | 否 | `true` | 否 | 可选配置,具体取值范围和数据结构见类型列。 |
34
+ | `dialog$style` | 否 | `string` | 否 | `""` | 否 | 可选配置,具体取值范围和数据结构见类型列。 |
35
+ | `children` | 是 | `Snippet` | 否 | `undefined` | 否 | Svelte Snippet 子内容,用于自定义组件主体。 |
36
+
37
+ > 组件的“可绑定”表示源码使用了 Svelte 5 的 `$bindable`;服务的“响应式”表示成员使用了 `$state`。复杂类型请同时参考 TypeScript 自动补全。
38
+
39
+ ## 重要属性说明
40
+
41
+ ### `title`
42
+
43
+ 可选配置,具体取值范围和数据结构见类型列。
44
+
45
+ - 类型:`string`
46
+ - 默认值:`—`
47
+ - 示例写法:`title="示例标题"`
48
+
49
+ ### `onClose`
50
+
51
+ 事件或行为回调;参数与返回值以类型签名为准。
52
+
53
+ - 类型:`OnClose | null`
54
+ - 默认值:`null`
55
+ - 示例写法:`onClose={async (...args: any[]) => { console.log('onClose', ...args); return true; }}`
56
+
57
+ ### `children`
58
+
59
+ Svelte Snippet 子内容,用于自定义组件主体。
60
+
61
+ - 类型:`Snippet`
62
+ - 默认值:`undefined`
63
+ - 示例写法:`children={children}`
64
+
65
+ ## 组件实例方法
66
+
67
+ 通过 `bind:this` 获取组件实例后调用。
68
+
69
+ | 方法 | 类型 | 说明 |
70
+ | --- | --- | --- |
71
+ | `close()` | `(result: ModalResult) => void` | 组件实例方法。 |
72
+
73
+ ## 相关类型定义
74
+
75
+ 以下定义帮助理解复杂属性的数据结构;其中部分辅助类型属于内部实现,不一定是独立导出入口。
76
+
77
+ ### `ButtonActions`
78
+
79
+ ```ts
80
+ export type ButtonActions = Array<ButtonAction | null>;
81
+ ```
82
+
83
+ ### `DialogCloseConfirm`
84
+
85
+ ```ts
86
+ export type DialogCloseConfirm = () => Promise<boolean>;
87
+ ```
88
+
89
+ ### `OnClose`
90
+
91
+ ```ts
92
+ export type OnClose = (result: ModalResult) => void;
93
+ ```
94
+
95
+ ### `ButtonAction`
96
+
97
+ ```ts
98
+ export interface ButtonAction {
99
+ /**
100
+ * 按钮的文字
101
+ */
102
+ label: string;
103
+
104
+ /**
105
+ * 是否禁用
106
+ */
107
+ disabled?: boolean;
108
+
109
+ /**
110
+ * 帮助信息
111
+ */
112
+ tooltip?: string;
113
+
114
+ /**
115
+ * 前缀图标
116
+ */
117
+ icon?: string;
118
+
119
+ /**
120
+ * 按钮的类型
121
+ */
122
+ type?: ButtonType;
123
+
124
+ /**
125
+ * click处理函数
126
+ */
127
+ handler?: MouseClickHandler;
128
+ }
129
+ ```
130
+
131
+ ### `ModalResult`
132
+
133
+ ```ts
134
+ export enum ModalResult {
135
+ MR_OK = 1,
136
+ MR_CANCEL = 2,
137
+ MR_CLOSE = 3
138
+ }
139
+ ```
140
+
141
+ ### `ButtonType`
142
+
143
+ ```ts
144
+ export type ButtonType = 'default' | 'primary' | 'secondary' | 'third' | 'forth';
145
+ ```
146
+
147
+ ### `MouseClickHandler`
148
+
149
+ ```ts
150
+ export type MouseClickHandler = (event: MouseEvent) => void;
151
+ ```
152
+
153
+ ## 示例
154
+
155
+ 完整示例见 [example.svelte](./example.svelte)。
156
+ ```svelte
157
+ <script lang="ts">
158
+ import Dialog from '@ticatec/uniface-element/Dialog';
159
+ </script>
160
+
161
+ <Dialog
162
+ title="示例标题"
163
+ onClose={async (...args: any[]) => { console.log('onClose', ...args); return true; }}
164
+ closable={true}
165
+ width="240px"
166
+ height="48px"
167
+ >
168
+ <div>在这里放置子内容</div>
169
+ </Dialog>
170
+ ```
171
+
172
+ ## 源码
173
+
174
+ - `src/lib/overlay/dialog/Dialog.svelte`
@@ -0,0 +1,13 @@
1
+ <script lang="ts">
2
+ import Dialog from '@ticatec/uniface-element/Dialog';
3
+ </script>
4
+
5
+ <Dialog
6
+ title="示例标题"
7
+ onClose={async (...args: any[]) => { console.log('onClose', ...args); return true; }}
8
+ closable={true}
9
+ width="240px"
10
+ height="48px"
11
+ >
12
+ <div>在这里放置子内容</div>
13
+ </Dialog>
@@ -0,0 +1,41 @@
1
+ # DialogBoard
2
+
3
+ 浮层与弹窗组件。本文档由源码自动生成,类型以当前版本为准。
4
+
5
+ ## 简介
6
+
7
+ 承载全局 Dialog 堆栈的基础渲染节点。
8
+
9
+ ## 适用场景
10
+
11
+ - 需要手动控制全局对话框挂载位置
12
+ - 应用根部集中渲染对话框;多数项目无需直接使用
13
+
14
+ ## 导入
15
+
16
+ ```ts
17
+ import DialogBoard from '@ticatec/uniface-element/DialogBoard';
18
+ ```
19
+
20
+ ## 属性
21
+
22
+ | 属性 | 重要 | 类型 | 必填 | 默认值 | 可绑定/响应式 | 说明 |
23
+ | --- | --- | --- | --- | --- | --- | --- |
24
+ | — | — | — | — | — | — | 该入口不接受组件属性。 |
25
+
26
+ > 组件的“可绑定”表示源码使用了 Svelte 5 的 `$bindable`;服务的“响应式”表示成员使用了 `$state`。复杂类型请同时参考 TypeScript 自动补全。
27
+
28
+ ## 示例
29
+
30
+ 完整示例见 [example.svelte](./example.svelte)。
31
+ ```svelte
32
+ <script lang="ts">
33
+ import DialogBoard from '@ticatec/uniface-element/DialogBoard';
34
+ </script>
35
+
36
+ <DialogBoard/>
37
+ ```
38
+
39
+ ## 源码
40
+
41
+ - `src/lib/overlay/dialog/DialogBoard.svelte`
@@ -0,0 +1,5 @@
1
+ <script lang="ts">
2
+ import DialogBoard from '@ticatec/uniface-element/DialogBoard';
3
+ </script>
4
+
5
+ <DialogBoard/>
@@ -0,0 +1,70 @@
1
+ # Drawer
2
+
3
+ 浮层与弹窗组件。本文档由源码自动生成,类型以当前版本为准。
4
+
5
+ ## 简介
6
+
7
+ 从页面边缘滑出的抽屉式内容层。
8
+
9
+ ## 适用场景
10
+
11
+ - 筛选面板、详情侧栏和移动端菜单
12
+ - 希望保留当前页面上下文的辅助操作
13
+
14
+ ## 导入
15
+
16
+ ```ts
17
+ import Drawer from '@ticatec/uniface-element/Drawer';
18
+ ```
19
+
20
+ ## 属性
21
+
22
+ | 属性 | 重要 | 类型 | 必填 | 默认值 | 可绑定/响应式 | 说明 |
23
+ | --- | --- | --- | --- | --- | --- | --- |
24
+ | `theme` | 否 | `string` | 否 | `undefined` | 否 | 组件主题标识,通常通过 `data-theme` 选择对应 CSS 变量。 |
25
+ | `visible` | 是 | `boolean` | 否 | `$bindable(false)` | 是 | 控制组件是否显示,通常使用 `bind:visible` 管理打开和关闭。 |
26
+ | `width` | 否 | `number` | 否 | `300` | 否 | 宽度配置,数值单位为像素。 |
27
+ | `position` | 否 | `'left' \| 'right'` | 否 | `'left'` | 否 | 可选配置,具体取值范围和数据结构见类型列。 |
28
+ | `children` | 是 | `Snippet` | 否 | `undefined` | 否 | Svelte Snippet 子内容,用于自定义组件主体。 |
29
+
30
+ > 组件的“可绑定”表示源码使用了 Svelte 5 的 `$bindable`;服务的“响应式”表示成员使用了 `$state`。复杂类型请同时参考 TypeScript 自动补全。
31
+
32
+ ## 重要属性说明
33
+
34
+ ### `visible`
35
+
36
+ 控制组件是否显示,通常使用 `bind:visible` 管理打开和关闭。
37
+
38
+ - 类型:`boolean`
39
+ - 默认值:`$bindable(false)`
40
+ - 推荐写法:`bind:visible`
41
+
42
+ ### `children`
43
+
44
+ Svelte Snippet 子内容,用于自定义组件主体。
45
+
46
+ - 类型:`Snippet`
47
+ - 默认值:`undefined`
48
+ - 示例写法:`children={children}`
49
+
50
+ ## 示例
51
+
52
+ 完整示例见 [example.svelte](./example.svelte)。
53
+ ```svelte
54
+ <script lang="ts">
55
+ import Drawer from '@ticatec/uniface-element/Drawer';
56
+ let visible = $state<any>(false);
57
+ </script>
58
+
59
+ <Drawer
60
+ bind:visible
61
+ width={240}
62
+ >
63
+ <div>在这里放置子内容</div>
64
+ </Drawer>
65
+ <p>当前状态:{JSON.stringify({visible})}</p>
66
+ ```
67
+
68
+ ## 源码
69
+
70
+ - `src/lib/overlay/drawer/Drawer.svelte`
@@ -0,0 +1,12 @@
1
+ <script lang="ts">
2
+ import Drawer from '@ticatec/uniface-element/Drawer';
3
+ let visible = $state<any>(false);
4
+ </script>
5
+
6
+ <Drawer
7
+ bind:visible
8
+ width={240}
9
+ >
10
+ <div>在这里放置子内容</div>
11
+ </Drawer>
12
+ <p>当前状态:{JSON.stringify({visible})}</p>
@@ -0,0 +1,55 @@
1
+ # FlexForm
2
+
3
+ 布局组件。本文档由源码自动生成,类型以当前版本为准。
4
+
5
+ ## 简介
6
+
7
+ 使用 Flex 布局排列字段的表单容器。
8
+
9
+ ## 适用场景
10
+
11
+ - 字段宽度灵活的响应式表单
12
+ - 简单横向或自动换行的字段布局
13
+
14
+ ## 导入
15
+
16
+ ```ts
17
+ import FlexForm from '@ticatec/uniface-element/FlexForm';
18
+ ```
19
+
20
+ ## 属性
21
+
22
+ | 属性 | 重要 | 类型 | 必填 | 默认值 | 可绑定/响应式 | 说明 |
23
+ | --- | --- | --- | --- | --- | --- | --- |
24
+ | `style` | 否 | `string` | 否 | `''` | 否 | 附加到组件根元素的内联样式。 |
25
+ | `theme` | 否 | `string` | 否 | `undefined` | 否 | 组件主题标识,通常通过 `data-theme` 选择对应 CSS 变量。 |
26
+ | `children` | 是 | `Snippet` | 否 | `undefined` | 否 | Svelte Snippet 子内容,用于自定义组件主体。 |
27
+
28
+ > 组件的“可绑定”表示源码使用了 Svelte 5 的 `$bindable`;服务的“响应式”表示成员使用了 `$state`。复杂类型请同时参考 TypeScript 自动补全。
29
+
30
+ ## 重要属性说明
31
+
32
+ ### `children`
33
+
34
+ Svelte Snippet 子内容,用于自定义组件主体。
35
+
36
+ - 类型:`Snippet`
37
+ - 默认值:`undefined`
38
+ - 示例写法:`children={children}`
39
+
40
+ ## 示例
41
+
42
+ 完整示例见 [example.svelte](./example.svelte)。
43
+ ```svelte
44
+ <script lang="ts">
45
+ import FlexForm from '@ticatec/uniface-element/FlexForm';
46
+ </script>
47
+
48
+ <FlexForm>
49
+ <div>在这里放置子内容</div>
50
+ </FlexForm>
51
+ ```
52
+
53
+ ## 源码
54
+
55
+ - `src/lib/layouts/form_panel/flex_form/FlexForm.svelte`
@@ -0,0 +1,7 @@
1
+ <script lang="ts">
2
+ import FlexForm from '@ticatec/uniface-element/FlexForm';
3
+ </script>
4
+
5
+ <FlexForm>
6
+ <div>在这里放置子内容</div>
7
+ </FlexForm>