@ticatec/uniface-element 5.0.3 → 5.0.5

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 (44) hide show
  1. package/README.md +10 -10
  2. package/README_CN.md +13 -12
  3. package/dist/base-calendar/DateContext.d.ts +1 -0
  4. package/dist/base-calendar/DateContext.js +5 -8
  5. package/dist/composite/pagination_panel/PaginationPanel.svelte +5 -2
  6. package/dist/composite/transfer/Transfer.svelte +0 -1
  7. package/dist/data_display/card/Card.svelte +12 -3
  8. package/dist/data_display/card/Card.svelte.d.ts +6 -0
  9. package/dist/data_display/card/CardAction.d.ts +8 -0
  10. package/dist/data_display/card/CardHeader.svelte +12 -1
  11. package/dist/data_display/card/CommonCardActionBar.svelte +31 -3
  12. package/dist/data_display/card/CommonCardActionBar.svelte.d.ts +5 -0
  13. package/dist/data_display/card/README.md +18 -1
  14. package/dist/data_display/card/README_CN.md +18 -1
  15. package/dist/data_table/DataTable.svelte +31 -1
  16. package/dist/data_table/DataTable.svelte.d.ts +7 -0
  17. package/dist/data_table/lib/virtualWindow.d.ts +37 -0
  18. package/dist/data_table/lib/virtualWindow.js +41 -0
  19. package/dist/data_table/parts/ActionsPanel.svelte +17 -2
  20. package/dist/data_table/parts/ActionsPanel.svelte.d.ts +3 -0
  21. package/dist/data_table/parts/ContentPanel.svelte +26 -1
  22. package/dist/data_table/parts/ContentPanel.svelte.d.ts +6 -1
  23. package/dist/data_table/parts/FixedColumnsPanel.svelte +17 -1
  24. package/dist/data_table/parts/FixedColumnsPanel.svelte.d.ts +4 -1
  25. package/dist/data_table/parts/FixedHeaderPanel.svelte +1 -2
  26. package/dist/form/attachment_files/FileUploadBar.svelte +3 -3
  27. package/dist/form/attachment_files/FileUploadPanel.svelte +1 -1
  28. package/dist/form/color_picker/ColorPickerPanel.svelte +1 -1
  29. package/dist/form/date_picker/DateTimePicker.svelte +1 -1
  30. package/dist/form/options_select/OptionsSelect.svelte +2 -2
  31. package/dist/i18nRes/i18nRes.d.ts +41 -2
  32. package/dist/i18nRes/i18nRes.js +2 -1
  33. package/dist/overlay/dialog/CommonDialog.svelte +1 -1
  34. package/dist/overlay/dialog/Dialog.svelte +1 -1
  35. package/dist/overlay/message-box/MessageBox.svelte.js +3 -3
  36. package/package.json +1 -1
  37. package/dist/layout/flex/FlexBlock.svelte +0 -17
  38. package/dist/layout/flex/FlexBlock.svelte.d.ts +0 -38
  39. package/dist/layout/flex/README.md +0 -148
  40. package/dist/layout/flex/README_CN.md +0 -148
  41. package/dist/layout/flex/index.d.ts +0 -2
  42. package/dist/layout/flex/index.js +0 -2
  43. package/dist/layout/index.d.ts +0 -0
  44. package/dist/layout/index.js +0 -1
package/dist/layout/flex/README_CN.md DELETED
@@ -1,148 +0,0 @@
1
- # FlexBlock 弹性布局组件
2
-
3
- 一个灵活的 flexbox 布局组件，支持水平/垂直方向、调整大小和增长/收缩选项。
4
-
5
- ## 安装
6
-
7
- ```bash
8
- npm install @ticatec/uniface-element
9
- ```
10
-
11
- ## 导入
12
-
13
- ```typescript
14
- import FlexBlock from '@ticatec/uniface-element/FlexBlock';
15
- ```
16
-
17
- ## 基本用法
18
-
19
- ```svelte
20
- <script>
21
- import FlexBlock from '@ticatec/uniface-element/FlexBlock';
22
- </script>
23
-
24
- <FlexBlock>
25
- <div>项目 1</div>
26
- <div>项目 2</div>
27
- <div>项目 3</div>
28
- </FlexBlock>
29
- ```
30
-
31
- ## 属性
32
-
33
- | 属性 | 类型 | 默认值 | 说明 |
34
- |------|------|---------|------|
35
- | `direction` | `'horizontal' \| 'vertical'` | `'horizontal'` | Flex 方向 |
36
- | `flex` | `boolean` | `false` | 根据方向应用 flex 样式 |
37
- | `fixed` | `boolean` | `false` | 启用固定定位 |
38
- | `grow` | `boolean` | `false` | 启用 flex-grow |
39
- | `shrink` | `boolean` | `false` | 启用 flex-shrink |
40
- | `autoFit` | `boolean` | `false` | 启用自动适应内容 |
41
- | `style` | `string` | `''` | 容器的自定义 CSS 样式 |
42
- | `class` | `string` | `''` | 自定义 CSS 类名 |
43
-
44
- ## 插槽
45
-
46
- | 插槽 | 说明 |
47
- |------|------|
48
- | `default` | 主要内容区域 |
49
-
50
- ## 事件
51
-
52
- 无自定义事件。
53
-
54
- ## 示例
55
-
56
- ### 水平布局
57
-
58
- ```svelte
59
- <script>
60
- import FlexBlock from '@ticatec/uniface-element/FlexBlock';
61
- </script>
62
-
63
- <FlexBlock direction="horizontal" style="gap: 16px;">
64
- <div>项目 1</div>
65
- <div>项目 2</div>
66
- <div>项目 3</div>
67
- </FlexBlock>
68
- ```
69
-
70
- ### 垂直布局
71
-
72
- ```svelte
73
- <script>
74
- import FlexBlock from '@ticatec/uniface-element/FlexBlock';
75
- </script>
76
-
77
- <FlexBlock direction="vertical" style="gap: 16px;">
78
- <div>头部</div>
79
- <div>主要内容</div>
80
- <div>页脚</div>
81
- </FlexBlock>
82
- ```
83
-
84
- ### 弹性增长和收缩
85
-
86
- ```svelte
87
- <script>
88
- import FlexBlock from '@ticatec/uniface-element/FlexBlock';
89
- </script>
90
-
91
- <FlexBlock direction="horizontal" flex grow shrink>
92
- <div style="flex: 1;">弹性项目</div>
93
- <div style="width: 200px;">固定项目</div>
94
- </FlexBlock>
95
- ```
96
-
97
- ### 自动适应布局
98
-
99
- ```svelte
100
- <script>
101
- import FlexBlock from '@ticatec/uniface-element/FlexBlock';
102
- </script>
103
-
104
- <FlexBlock autoFit>
105
- {#each items as item}
106
- <div>{item}</div>
107
- {/each}
108
- </FlexBlock>
109
- ```
110
-
111
- ### 卡片网格
112
-
113
- ```svelte
114
- <script>
115
- import FlexBlock from '@ticatec/uniface-element/FlexBlock';
116
- </script>
117
-
118
- <FlexBlock direction="horizontal" autoFit style="gap: 16px;">
119
- {#each cards as card}
120
- <div style="border: 1px solid #ddd; padding: 16px; border-radius: 8px;">
121
- <h3>{card.title}</h3>
122
- <p>{card.description}</p>
123
- </div>
124
- {/each}
125
- </FlexBlock>
126
- ```
127
-
128
- ### 固定定位
129
-
130
- ```svelte
131
- <script>
132
- import FlexBlock from '@ticatec/uniface-element/FlexBlock';
133
- </script>
134
-
135
- <FlexBlock fixed direction="vertical" style="position: fixed; top: 0; left: 0; right: 0; height: 100vh;">
136
- <div style="height: 60px;">头部</div>
137
- <div style="flex: 1; overflow: auto;">主要内容</div>
138
- <div style="height: 40px;">页脚</div>
139
- </FlexBlock>
140
- ```
141
-
142
- ## 最佳实践
143
-
144
- 1. **使用 direction 属性** - 根据布局需求选择水平或垂直方向
145
- 2. **结合 flex 使用** - 使用 `flex` 属性实现响应式布局，适应容器大小
146
- 3. **使用 autoFit** - 动态内容启用自动适应换行
147
- 4. **使用 grow/shrink** - 控制项目在 flex 容器中的扩展或收缩
148
- 5. **固定定位** - 使用 `fixed` 实现不随内容滚动的粘性布局
package/dist/layout/flex/index.d.ts DELETED
@@ -1,2 +0,0 @@
1
- import FlexBlock from "./FlexBlock.svelte";
2
- export default FlexBlock;
package/dist/layout/flex/index.js DELETED
@@ -1,2 +0,0 @@
1
- import FlexBlock from "./FlexBlock.svelte";
2
- export default FlexBlock;
package/dist/layout/index.d.ts DELETED
File without changes
package/dist/layout/index.js DELETED
@@ -1 +0,0 @@
1
- "use strict";