@gulibs/react-vtable 0.0.9 → 0.0.11
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.
- package/README.md +280 -12
- package/dist/components/empty-state.d.ts +8 -0
- package/dist/components/empty-state.d.ts.map +1 -0
- package/dist/components/expand-icon.d.ts +20 -0
- package/dist/components/expand-icon.d.ts.map +1 -0
- package/dist/components/loading-state.d.ts +13 -0
- package/dist/components/loading-state.d.ts.map +1 -0
- package/dist/components/search.d.ts.map +1 -1
- package/dist/components/ui/accordion.d.ts +8 -0
- package/dist/components/ui/accordion.d.ts.map +1 -0
- package/dist/components/ui/alert-dialog.d.ts +15 -0
- package/dist/components/ui/alert-dialog.d.ts.map +1 -0
- package/dist/components/ui/aspect-ratio.d.ts +4 -0
- package/dist/components/ui/aspect-ratio.d.ts.map +1 -0
- package/dist/components/ui/avatar.d.ts.map +1 -1
- package/dist/components/ui/badge.d.ts.map +1 -1
- package/dist/components/ui/breadcrumb.d.ts +12 -0
- package/dist/components/ui/breadcrumb.d.ts.map +1 -0
- package/dist/components/ui/button-group.d.ts +12 -0
- package/dist/components/ui/button-group.d.ts.map +1 -0
- package/dist/components/ui/button.d.ts.map +1 -1
- package/dist/components/ui/calendar.d.ts.map +1 -1
- package/dist/components/ui/card.d.ts.map +1 -1
- package/dist/components/ui/carousel.d.ts +20 -0
- package/dist/components/ui/carousel.d.ts.map +1 -0
- package/dist/components/ui/chart.d.ts +41 -0
- package/dist/components/ui/chart.d.ts.map +1 -0
- package/dist/components/ui/checkbox.d.ts.map +1 -1
- package/dist/components/ui/collapsible.d.ts +6 -0
- package/dist/components/ui/collapsible.d.ts.map +1 -0
- package/dist/components/ui/command.d.ts +19 -0
- package/dist/components/ui/command.d.ts.map +1 -0
- package/dist/components/ui/context-menu.d.ts +26 -0
- package/dist/components/ui/context-menu.d.ts.map +1 -0
- package/dist/components/ui/date-picker.d.ts +2 -1
- package/dist/components/ui/date-picker.d.ts.map +1 -1
- package/dist/components/ui/date-range-picker.d.ts +2 -1
- package/dist/components/ui/date-range-picker.d.ts.map +1 -1
- package/dist/components/ui/dialog.d.ts +16 -0
- package/dist/components/ui/dialog.d.ts.map +1 -0
- package/dist/components/ui/drawer.d.ts +14 -0
- package/dist/components/ui/drawer.d.ts.map +1 -0
- package/dist/components/ui/empty.d.ts +12 -0
- package/dist/components/ui/empty.d.ts.map +1 -0
- package/dist/components/ui/field.d.ts +25 -0
- package/dist/components/ui/field.d.ts.map +1 -0
- package/dist/components/ui/form.d.ts +25 -0
- package/dist/components/ui/form.d.ts.map +1 -0
- package/dist/components/ui/hover-card.d.ts +7 -0
- package/dist/components/ui/hover-card.d.ts.map +1 -0
- package/dist/components/ui/input-group.d.ts +17 -0
- package/dist/components/ui/input-group.d.ts.map +1 -0
- package/dist/components/ui/input-otp.d.ts +12 -0
- package/dist/components/ui/input-otp.d.ts.map +1 -0
- package/dist/components/ui/input.d.ts.map +1 -1
- package/dist/components/ui/item.d.ts +24 -0
- package/dist/components/ui/item.d.ts.map +1 -0
- package/dist/components/ui/kbd.d.ts +4 -0
- package/dist/components/ui/kbd.d.ts.map +1 -0
- package/dist/components/ui/label.d.ts.map +1 -1
- package/dist/components/ui/menubar.d.ts +27 -0
- package/dist/components/ui/menubar.d.ts.map +1 -0
- package/dist/components/ui/navigation-menu.d.ts +15 -0
- package/dist/components/ui/navigation-menu.d.ts.map +1 -0
- package/dist/components/ui/pagination.d.ts +14 -0
- package/dist/components/ui/pagination.d.ts.map +1 -0
- package/dist/components/ui/popover.d.ts.map +1 -1
- package/dist/components/ui/progress.d.ts.map +1 -1
- package/dist/components/ui/radio-group.d.ts +6 -0
- package/dist/components/ui/radio-group.d.ts.map +1 -0
- package/dist/components/ui/resizable.d.ts +9 -0
- package/dist/components/ui/resizable.d.ts.map +1 -0
- package/dist/components/ui/scroll-area.d.ts +6 -0
- package/dist/components/ui/scroll-area.d.ts.map +1 -0
- package/dist/components/ui/select.d.ts.map +1 -1
- package/dist/components/ui/separator.d.ts +5 -0
- package/dist/components/ui/separator.d.ts.map +1 -0
- package/dist/components/ui/sheet.d.ts +14 -0
- package/dist/components/ui/sheet.d.ts.map +1 -0
- package/dist/components/ui/sidebar.d.ts +70 -0
- package/dist/components/ui/sidebar.d.ts.map +1 -0
- package/dist/components/ui/skeleton.d.ts.map +1 -1
- package/dist/components/ui/slider.d.ts +5 -0
- package/dist/components/ui/slider.d.ts.map +1 -0
- package/dist/components/ui/sonner.d.ts +4 -0
- package/dist/components/ui/sonner.d.ts.map +1 -0
- package/dist/components/ui/spinner.d.ts +3 -0
- package/dist/components/ui/spinner.d.ts.map +1 -0
- package/dist/components/ui/switch.d.ts.map +1 -1
- package/dist/components/ui/table.d.ts.map +1 -1
- package/dist/components/ui/tabs.d.ts +8 -0
- package/dist/components/ui/tabs.d.ts.map +1 -0
- package/dist/components/ui/textarea.d.ts +1 -3
- package/dist/components/ui/textarea.d.ts.map +1 -1
- package/dist/components/ui/toggle-group.d.ts +10 -0
- package/dist/components/ui/toggle-group.d.ts.map +1 -0
- package/dist/components/ui/toggle.d.ts +10 -0
- package/dist/components/ui/toggle.d.ts.map +1 -0
- package/dist/components/ui/tooltip.d.ts.map +1 -1
- package/dist/hooks/use-columns.d.ts.map +1 -1
- package/dist/hooks/use-pro-table.d.ts +6 -6
- package/dist/hooks/use-pro-table.d.ts.map +1 -1
- package/dist/index.cjs +20 -1
- package/dist/index.js +4263 -540
- package/dist/pro-table.d.ts +0 -1
- package/dist/pro-table.d.ts.map +1 -1
- package/dist/types.d.ts +67 -5
- package/dist/types.d.ts.map +1 -1
- package/dist/utils/helpers.d.ts +13 -2
- package/dist/utils/helpers.d.ts.map +1 -1
- package/package.json +34 -5
- package/dist/index.css +0 -1
package/README.md
CHANGED
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
# @gulibs/react-vtable
|
|
2
2
|
|
|
3
|
+

|
|
4
|
+
|
|
3
5
|
[English](#english) | [中文](#chinese)
|
|
4
6
|
|
|
5
7
|
---
|
|
@@ -79,12 +81,13 @@ function App() {
|
|
|
79
81
|
- **Powerful Table**: Built on TanStack Table for maximum flexibility
|
|
80
82
|
- **shadcn/ui Components**: Beautiful, accessible UI components
|
|
81
83
|
- **Drag & Drop**: Row and column reordering with @dnd-kit
|
|
82
|
-
- **Search & Filter**: Advanced search and filtering capabilities
|
|
84
|
+
- **Search & Filter**: Advanced search and filtering capabilities with default behavior for local and remote data modes
|
|
83
85
|
- **Pagination**: Built-in pagination with customizable options
|
|
84
86
|
- **Column Settings**: Show/hide columns, drag to reorder
|
|
85
87
|
- **Row Selection**: Single and multiple row selection with batch actions
|
|
86
88
|
- **Editable Rows**: Inline editing capabilities with various value types
|
|
87
|
-
- **Fixed Columns**: Left and right fixed columns with shadow effects
|
|
89
|
+
- **Fixed Columns**: Left and right fixed columns with automatic position calculation and subtle shadow effects (powered by TanStack Table column pinning)
|
|
90
|
+
- **Tree Table**: Hierarchical data display with expandable/collapsible rows, custom expand icons, and accordion mode
|
|
88
91
|
- **Internationalization**: Built-in i18n support with English and Chinese locales
|
|
89
92
|
- **Horizontal Scrolling**: Configurable table width with scroll support
|
|
90
93
|
- **Copy to Clipboard**: One-click copy functionality for cells
|
|
@@ -107,6 +110,16 @@ function App() {
|
|
|
107
110
|
|
|
108
111
|
#### With Search
|
|
109
112
|
|
|
113
|
+
The table provides **default search behavior** that works automatically:
|
|
114
|
+
|
|
115
|
+
- **Local Data Mode** (no `request` prop): Search values are automatically converted to TanStack Table's `columnFilters`, and the table filters data in real-time using `getFilteredRowModel()`.
|
|
116
|
+
- **Remote Data Mode** (with `request` prop): Search triggers a new data fetch with search parameters passed to the backend.
|
|
117
|
+
|
|
118
|
+
The default filter function supports:
|
|
119
|
+
- Case-insensitive string matching (contains)
|
|
120
|
+
- Array-based multi-select filtering
|
|
121
|
+
- Automatic handling of empty/null values
|
|
122
|
+
|
|
110
123
|
```tsx
|
|
111
124
|
<ProTable
|
|
112
125
|
columns={columns}
|
|
@@ -120,6 +133,29 @@ function App() {
|
|
|
120
133
|
/>
|
|
121
134
|
```
|
|
122
135
|
|
|
136
|
+
**Custom Search Behavior:**
|
|
137
|
+
|
|
138
|
+
You can provide custom `onSearch` and `onReset` callbacks to override the default behavior:
|
|
139
|
+
|
|
140
|
+
```tsx
|
|
141
|
+
<ProTable
|
|
142
|
+
columns={columns}
|
|
143
|
+
dataSource={dataSource}
|
|
144
|
+
rowKey="id"
|
|
145
|
+
search={{
|
|
146
|
+
filterType: 'query',
|
|
147
|
+
onSearch: (values) => {
|
|
148
|
+
// Custom search logic
|
|
149
|
+
console.log('Search values:', values)
|
|
150
|
+
},
|
|
151
|
+
onReset: () => {
|
|
152
|
+
// Custom reset logic
|
|
153
|
+
console.log('Reset search')
|
|
154
|
+
}
|
|
155
|
+
}}
|
|
156
|
+
/>
|
|
157
|
+
```
|
|
158
|
+
|
|
123
159
|
#### With Pagination
|
|
124
160
|
|
|
125
161
|
```tsx
|
|
@@ -151,6 +187,8 @@ import { ProTable, zh_CN } from '@gulibs/react-vtable'
|
|
|
151
187
|
|
|
152
188
|
#### With Fixed Columns
|
|
153
189
|
|
|
190
|
+
Fixed columns are implemented using TanStack Table's column pinning feature. The library automatically calculates positions and applies subtle shadow effects to indicate fixed column boundaries.
|
|
191
|
+
|
|
154
192
|
```tsx
|
|
155
193
|
<ProTable
|
|
156
194
|
columns={[
|
|
@@ -159,7 +197,7 @@ import { ProTable, zh_CN } from '@gulibs/react-vtable'
|
|
|
159
197
|
dataIndex: 'id',
|
|
160
198
|
key: 'id',
|
|
161
199
|
width: 80,
|
|
162
|
-
fixed: 'left'
|
|
200
|
+
fixed: 'left' // Fixed to the left
|
|
163
201
|
},
|
|
164
202
|
{
|
|
165
203
|
title: 'Name',
|
|
@@ -172,16 +210,70 @@ import { ProTable, zh_CN } from '@gulibs/react-vtable'
|
|
|
172
210
|
dataIndex: 'actions',
|
|
173
211
|
key: 'actions',
|
|
174
212
|
width: 100,
|
|
175
|
-
fixed: 'right'
|
|
213
|
+
fixed: 'right' // Fixed to the right
|
|
176
214
|
}
|
|
177
215
|
]}
|
|
178
216
|
dataSource={dataSource}
|
|
179
217
|
rowKey="id"
|
|
180
|
-
scroll={{ x: 1000 }}
|
|
181
|
-
tableLayout="fixed"
|
|
218
|
+
scroll={{ x: 1000 }} // Enable horizontal scrolling
|
|
219
|
+
tableLayout="fixed" // Recommended for fixed columns
|
|
220
|
+
/>
|
|
221
|
+
```
|
|
222
|
+
|
|
223
|
+
**Important Notes:**
|
|
224
|
+
- Fixed columns require a `width` property to calculate positions correctly
|
|
225
|
+
- The library automatically handles position calculations using TanStack Table's `getStart()` and `getAfter()` methods
|
|
226
|
+
- Subtle shadow effects are automatically applied to the last left-pinned column and first right-pinned column
|
|
227
|
+
- No additional CSS is required - all styles are applied inline
|
|
228
|
+
|
|
229
|
+
#### With Tree Table (Expandable Rows)
|
|
230
|
+
|
|
231
|
+
Tree tables support hierarchical data structures with expandable/collapsible rows. The data structure should include a `children` property (or custom field name) containing nested rows.
|
|
232
|
+
|
|
233
|
+
```tsx
|
|
234
|
+
<ProTable
|
|
235
|
+
columns={columns}
|
|
236
|
+
dataSource={[
|
|
237
|
+
{
|
|
238
|
+
id: 1,
|
|
239
|
+
name: 'Parent Node',
|
|
240
|
+
children: [
|
|
241
|
+
{ id: 11, name: 'Child Node 1' },
|
|
242
|
+
{ id: 12, name: 'Child Node 2' }
|
|
243
|
+
]
|
|
244
|
+
}
|
|
245
|
+
]}
|
|
246
|
+
rowKey="id"
|
|
247
|
+
expandable={{
|
|
248
|
+
childrenColumnName: 'children', // Default: 'children'
|
|
249
|
+
defaultExpandAllRows: false, // Expand all rows by default
|
|
250
|
+
defaultExpandedRowKeys: [1], // Initially expanded rows
|
|
251
|
+
accordion: false, // Accordion mode (only one row expanded at a time)
|
|
252
|
+
showExpandColumn: true, // Show expand icon column
|
|
253
|
+
expandColumnWidth: 50, // Width of expand column
|
|
254
|
+
onExpand: (expanded, record) => {
|
|
255
|
+
console.log('Expand:', expanded, record)
|
|
256
|
+
},
|
|
257
|
+
onExpandedRowsChange: (expandedRowKeys) => {
|
|
258
|
+
console.log('Expanded keys:', expandedRowKeys)
|
|
259
|
+
},
|
|
260
|
+
expandIcon: ({ expanded, onExpand, record }) => (
|
|
261
|
+
<Button onClick={onExpand}>
|
|
262
|
+
{expanded ? '▼' : '▶'}
|
|
263
|
+
</Button>
|
|
264
|
+
)
|
|
265
|
+
}}
|
|
182
266
|
/>
|
|
183
267
|
```
|
|
184
268
|
|
|
269
|
+
**Tree Table Features:**
|
|
270
|
+
- **Controlled/Uncontrolled Mode**: Use `expandedRowKeys` for controlled mode, or `defaultExpandedRowKeys` for uncontrolled
|
|
271
|
+
- **Default Expand All**: Set `defaultExpandAllRows: true` to expand all rows by default
|
|
272
|
+
- **Accordion Mode**: Set `accordion: true` to allow only one row to be expanded at a time
|
|
273
|
+
- **Custom Children Field**: Use `childrenColumnName` to specify a custom field name for children (default: `'children'`)
|
|
274
|
+
- **Custom Expand Icon**: Provide a custom `expandIcon` function to customize the expand/collapse icon
|
|
275
|
+
- **Expand Callbacks**: Use `onExpand` and `onExpandedRowsChange` to handle expand state changes
|
|
276
|
+
|
|
185
277
|
#### With Editable Rows
|
|
186
278
|
|
|
187
279
|
```tsx
|
|
@@ -297,6 +389,7 @@ import { ProTable, zh_CN } from '@gulibs/react-vtable'
|
|
|
297
389
|
| `rowSelection` | `ProTableRowSelection` | `undefined` | Row selection configuration |
|
|
298
390
|
| `editable` | `ProTableEditable` | `undefined` | Editable rows configuration |
|
|
299
391
|
| `draggable` | `ProTableDraggable` | `undefined` | Drag and drop configuration |
|
|
392
|
+
| `expandable` | `ProTableExpandable \| false` | `undefined` | Tree table expandable configuration |
|
|
300
393
|
| `scroll` | `{ x?: number \| true; y?: number \| string }` | `undefined` | Scroll configuration |
|
|
301
394
|
| `tableLayout` | `'auto' \| 'fixed'` | `'auto'` | Table layout mode |
|
|
302
395
|
| `locale` | `ProTableLocale` | `en_US` | Internationalization locale |
|
|
@@ -365,6 +458,48 @@ tooltip: {
|
|
|
365
458
|
|
|
366
459
|
**Note**: When `ellipsis` is enabled and `tooltip` is `true`, the tooltip will automatically show the full original value (not the rendered value) when text is truncated.
|
|
367
460
|
|
|
461
|
+
#### Expandable (Tree Table) Configuration
|
|
462
|
+
|
|
463
|
+
The `expandable` property supports the following configurations:
|
|
464
|
+
|
|
465
|
+
```tsx
|
|
466
|
+
expandable: {
|
|
467
|
+
// Custom children field name (default: 'children')
|
|
468
|
+
childrenColumnName?: string
|
|
469
|
+
|
|
470
|
+
// Default expanded row keys (uncontrolled mode)
|
|
471
|
+
defaultExpandedRowKeys?: React.Key[]
|
|
472
|
+
|
|
473
|
+
// Currently expanded row keys (controlled mode)
|
|
474
|
+
expandedRowKeys?: React.Key[]
|
|
475
|
+
|
|
476
|
+
// Expand/collapse callback
|
|
477
|
+
onExpand?: (expanded: boolean, record: T) => void
|
|
478
|
+
|
|
479
|
+
// Expanded rows change callback
|
|
480
|
+
onExpandedRowsChange?: (expandedRowKeys: React.Key[]) => void
|
|
481
|
+
|
|
482
|
+
// Custom expand icon
|
|
483
|
+
expandIcon?: (props: {
|
|
484
|
+
expanded: boolean
|
|
485
|
+
onExpand: () => void
|
|
486
|
+
record: T
|
|
487
|
+
}) => ReactNode
|
|
488
|
+
|
|
489
|
+
// Show expand column (default: true)
|
|
490
|
+
showExpandColumn?: boolean
|
|
491
|
+
|
|
492
|
+
// Expand column width (default: 50)
|
|
493
|
+
expandColumnWidth?: number
|
|
494
|
+
|
|
495
|
+
// Expand all rows by default (default: false)
|
|
496
|
+
defaultExpandAllRows?: boolean
|
|
497
|
+
|
|
498
|
+
// Accordion mode - only one row expanded at a time (default: false)
|
|
499
|
+
accordion?: boolean
|
|
500
|
+
}
|
|
501
|
+
```
|
|
502
|
+
|
|
368
503
|
### Development
|
|
369
504
|
|
|
370
505
|
```bash
|
|
@@ -459,12 +594,13 @@ function App() {
|
|
|
459
594
|
- **强大表格**: 基于 TanStack Table 构建,提供最大灵活性
|
|
460
595
|
- **shadcn/ui 组件**: 美观、可访问的 UI 组件
|
|
461
596
|
- **拖拽排序**: 使用 @dnd-kit 实现行和列重排序
|
|
462
|
-
- **搜索筛选**:
|
|
597
|
+
- **搜索筛选**: 高级搜索和筛选功能,支持本地和远程数据模式的默认行为
|
|
463
598
|
- **分页**: 内置分页,支持自定义选项
|
|
464
599
|
- **列设置**: 显示 / 隐藏列,拖拽重排序
|
|
465
600
|
- **行选择**: 单选和多选行,支持批量操作
|
|
466
601
|
- **可编辑行**: 内联编辑功能,支持多种值类型
|
|
467
|
-
- **固定列**:
|
|
602
|
+
- **固定列**: 左右固定列,自动计算位置并应用柔和阴影效果(基于 TanStack Table column pinning)
|
|
603
|
+
- **树形表格**: 层次数据展示,支持展开 / 收起行、自定义展开图标和手风琴模式
|
|
468
604
|
- **国际化**: 内置 i18n 支持,提供中英文语言包
|
|
469
605
|
- **横向滚动**: 可配置表格宽度,支持滚动
|
|
470
606
|
- **复制功能**: 一键复制单元格内容
|
|
@@ -487,6 +623,16 @@ function App() {
|
|
|
487
623
|
|
|
488
624
|
#### 带搜索
|
|
489
625
|
|
|
626
|
+
表格提供了**默认搜索行为**,会自动工作:
|
|
627
|
+
|
|
628
|
+
- **本地数据模式**(无 `request` 属性):搜索值会自动转换为 TanStack Table 的 `columnFilters`,表格使用 `getFilteredRowModel()` 实时过滤数据。
|
|
629
|
+
- **远程数据模式**(有 `request` 属性):搜索会触发新的数据获取,搜索参数会传递给后端。
|
|
630
|
+
|
|
631
|
+
默认过滤函数支持:
|
|
632
|
+
- 不区分大小写的字符串匹配(包含)
|
|
633
|
+
- 基于数组的多选过滤
|
|
634
|
+
- 自动处理空值 /null 值
|
|
635
|
+
|
|
490
636
|
```tsx
|
|
491
637
|
<ProTable
|
|
492
638
|
columns={columns}
|
|
@@ -500,6 +646,29 @@ function App() {
|
|
|
500
646
|
/>
|
|
501
647
|
```
|
|
502
648
|
|
|
649
|
+
**自定义搜索行为:**
|
|
650
|
+
|
|
651
|
+
您可以提供自定义的 `onSearch` 和 `onReset` 回调来覆盖默认行为:
|
|
652
|
+
|
|
653
|
+
```tsx
|
|
654
|
+
<ProTable
|
|
655
|
+
columns={columns}
|
|
656
|
+
dataSource={dataSource}
|
|
657
|
+
rowKey="id"
|
|
658
|
+
search={{
|
|
659
|
+
filterType: 'query',
|
|
660
|
+
onSearch: (values) => {
|
|
661
|
+
// 自定义搜索逻辑
|
|
662
|
+
console.log('搜索值:', values)
|
|
663
|
+
},
|
|
664
|
+
onReset: () => {
|
|
665
|
+
// 自定义重置逻辑
|
|
666
|
+
console.log('重置搜索')
|
|
667
|
+
}
|
|
668
|
+
}}
|
|
669
|
+
/>
|
|
670
|
+
```
|
|
671
|
+
|
|
503
672
|
#### 带分页
|
|
504
673
|
|
|
505
674
|
```tsx
|
|
@@ -531,6 +700,8 @@ import { ProTable, zh_CN } from '@gulibs/react-vtable'
|
|
|
531
700
|
|
|
532
701
|
#### 带固定列
|
|
533
702
|
|
|
703
|
+
固定列功能基于 TanStack Table 的 column pinning 实现。库会自动计算位置并应用柔和的阴影效果来标识固定列边界。
|
|
704
|
+
|
|
534
705
|
```tsx
|
|
535
706
|
<ProTable
|
|
536
707
|
columns={[
|
|
@@ -539,7 +710,7 @@ import { ProTable, zh_CN } from '@gulibs/react-vtable'
|
|
|
539
710
|
dataIndex: 'id',
|
|
540
711
|
key: 'id',
|
|
541
712
|
width: 80,
|
|
542
|
-
fixed: 'left'
|
|
713
|
+
fixed: 'left' // 固定在左侧
|
|
543
714
|
},
|
|
544
715
|
{
|
|
545
716
|
title: '姓名',
|
|
@@ -552,16 +723,70 @@ import { ProTable, zh_CN } from '@gulibs/react-vtable'
|
|
|
552
723
|
dataIndex: 'actions',
|
|
553
724
|
key: 'actions',
|
|
554
725
|
width: 100,
|
|
555
|
-
fixed: 'right'
|
|
726
|
+
fixed: 'right' // 固定在右侧
|
|
556
727
|
}
|
|
557
728
|
]}
|
|
558
729
|
dataSource={dataSource}
|
|
559
730
|
rowKey="id"
|
|
560
|
-
scroll={{ x: 1000 }}
|
|
561
|
-
tableLayout="fixed"
|
|
731
|
+
scroll={{ x: 1000 }} // 启用横向滚动
|
|
732
|
+
tableLayout="fixed" // 固定列推荐使用 fixed 布局
|
|
562
733
|
/>
|
|
563
734
|
```
|
|
564
735
|
|
|
736
|
+
**重要提示:**
|
|
737
|
+
- 固定列需要设置 `width` 属性才能正确计算位置
|
|
738
|
+
- 库会自动使用 TanStack Table 的 `getStart()` 和 `getAfter()` 方法计算位置
|
|
739
|
+
- 最后一个左侧固定列和第一个右侧固定列会自动应用柔和的阴影效果
|
|
740
|
+
- 无需额外 CSS - 所有样式都通过内联样式应用
|
|
741
|
+
|
|
742
|
+
#### 带树形表格(可展开行)
|
|
743
|
+
|
|
744
|
+
树形表格支持层次数据结构,可展开 / 收起行。数据结构应包含 `children` 属性(或自定义字段名)来存储嵌套行。
|
|
745
|
+
|
|
746
|
+
```tsx
|
|
747
|
+
<ProTable
|
|
748
|
+
columns={columns}
|
|
749
|
+
dataSource={[
|
|
750
|
+
{
|
|
751
|
+
id: 1,
|
|
752
|
+
name: '父节点',
|
|
753
|
+
children: [
|
|
754
|
+
{ id: 11, name: '子节点 1' },
|
|
755
|
+
{ id: 12, name: '子节点 2' }
|
|
756
|
+
]
|
|
757
|
+
}
|
|
758
|
+
]}
|
|
759
|
+
rowKey="id"
|
|
760
|
+
expandable={{
|
|
761
|
+
childrenColumnName: 'children', // 默认: 'children'
|
|
762
|
+
defaultExpandAllRows: false, // 默认展开所有行
|
|
763
|
+
defaultExpandedRowKeys: [1], // 初始展开的行
|
|
764
|
+
accordion: false, // 手风琴模式(同时只能展开一行)
|
|
765
|
+
showExpandColumn: true, // 显示展开图标列
|
|
766
|
+
expandColumnWidth: 50, // 展开列宽度
|
|
767
|
+
onExpand: (expanded, record) => {
|
|
768
|
+
console.log('展开:', expanded, record)
|
|
769
|
+
},
|
|
770
|
+
onExpandedRowsChange: (expandedRowKeys) => {
|
|
771
|
+
console.log('展开的行:', expandedRowKeys)
|
|
772
|
+
},
|
|
773
|
+
expandIcon: ({ expanded, onExpand, record }) => (
|
|
774
|
+
<Button onClick={onExpand}>
|
|
775
|
+
{expanded ? '▼' : '▶'}
|
|
776
|
+
</Button>
|
|
777
|
+
)
|
|
778
|
+
}}
|
|
779
|
+
/>
|
|
780
|
+
```
|
|
781
|
+
|
|
782
|
+
**树形表格特性:**
|
|
783
|
+
- **受控 / 非受控模式**: 使用 `expandedRowKeys` 实现受控模式,或使用 `defaultExpandedRowKeys` 实现非受控模式
|
|
784
|
+
- **默认全部展开**: 设置 `defaultExpandAllRows: true` 来默认展开所有行
|
|
785
|
+
- **手风琴模式**: 设置 `accordion: true` 来同时只允许展开一行
|
|
786
|
+
- **自定义子字段**: 使用 `childrenColumnName` 指定自定义的子字段名(默认:`'children'`)
|
|
787
|
+
- **自定义展开图标**: 提供自定义 `expandIcon` 函数来定制展开 / 收起图标
|
|
788
|
+
- **展开回调**: 使用 `onExpand` 和 `onExpandedRowsChange` 来处理展开状态变化
|
|
789
|
+
|
|
565
790
|
#### 带可编辑行
|
|
566
791
|
|
|
567
792
|
```tsx
|
|
@@ -677,6 +902,7 @@ import { ProTable, zh_CN } from '@gulibs/react-vtable'
|
|
|
677
902
|
| `rowSelection` | `ProTableRowSelection` | `undefined` | 行选择配置 |
|
|
678
903
|
| `editable` | `ProTableEditable` | `undefined` | 可编辑行配置 |
|
|
679
904
|
| `draggable` | `ProTableDraggable` | `undefined` | 拖拽配置 |
|
|
905
|
+
| `expandable` | `ProTableExpandable \| false` | `undefined` | 树形表格展开配置 |
|
|
680
906
|
| `scroll` | `{ x?: number \| true; y?: number \| string }` | `undefined` | 滚动配置 |
|
|
681
907
|
| `tableLayout` | `'auto' \| 'fixed'` | `'auto'` | 表格布局模式 |
|
|
682
908
|
| `locale` | `ProTableLocale` | `en_US` | 国际化语言包 |
|
|
@@ -745,6 +971,48 @@ tooltip: {
|
|
|
745
971
|
|
|
746
972
|
**注意**: 当 `ellipsis` 启用且 `tooltip` 为 `true` 时,如果文本被截断,提示框会自动显示完整的原始值(而不是渲染后的值)。
|
|
747
973
|
|
|
974
|
+
#### 展开配置(树形表格)
|
|
975
|
+
|
|
976
|
+
`expandable` 属性支持以下配置:
|
|
977
|
+
|
|
978
|
+
```tsx
|
|
979
|
+
expandable: {
|
|
980
|
+
// 自定义子字段名(默认: 'children')
|
|
981
|
+
childrenColumnName?: string
|
|
982
|
+
|
|
983
|
+
// 默认展开的行 key 数组(非受控模式)
|
|
984
|
+
defaultExpandedRowKeys?: React.Key[]
|
|
985
|
+
|
|
986
|
+
// 当前展开的行 key 数组(受控模式)
|
|
987
|
+
expandedRowKeys?: React.Key[]
|
|
988
|
+
|
|
989
|
+
// 展开/收起回调
|
|
990
|
+
onExpand?: (expanded: boolean, record: T) => void
|
|
991
|
+
|
|
992
|
+
// 展开的行 key 变化回调
|
|
993
|
+
onExpandedRowsChange?: (expandedRowKeys: React.Key[]) => void
|
|
994
|
+
|
|
995
|
+
// 自定义展开图标
|
|
996
|
+
expandIcon?: (props: {
|
|
997
|
+
expanded: boolean
|
|
998
|
+
onExpand: () => void
|
|
999
|
+
record: T
|
|
1000
|
+
}) => ReactNode
|
|
1001
|
+
|
|
1002
|
+
// 显示展开列(默认: true)
|
|
1003
|
+
showExpandColumn?: boolean
|
|
1004
|
+
|
|
1005
|
+
// 展开列宽度(默认: 50)
|
|
1006
|
+
expandColumnWidth?: number
|
|
1007
|
+
|
|
1008
|
+
// 默认展开所有行(默认: false)
|
|
1009
|
+
defaultExpandAllRows?: boolean
|
|
1010
|
+
|
|
1011
|
+
// 手风琴模式 - 同时只能展开一行(默认: false)
|
|
1012
|
+
accordion?: boolean
|
|
1013
|
+
}
|
|
1014
|
+
```
|
|
1015
|
+
|
|
748
1016
|
### 开发
|
|
749
1017
|
|
|
750
1018
|
```bash
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import type { ReactNode } from "react";
|
|
2
|
+
interface EmptyStateProps {
|
|
3
|
+
colSpan: number;
|
|
4
|
+
emptyRender?: ReactNode;
|
|
5
|
+
}
|
|
6
|
+
export declare function EmptyState({ colSpan, emptyRender }: EmptyStateProps): import("react/jsx-runtime").JSX.Element;
|
|
7
|
+
export {};
|
|
8
|
+
//# sourceMappingURL=empty-state.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"empty-state.d.ts","sourceRoot":"","sources":["../../lib/components/empty-state.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,UAAU,eAAe;IACvB,OAAO,EAAE,MAAM,CAAC;IAChB,WAAW,CAAC,EAAE,SAAS,CAAC;CACzB;AAED,wBAAgB,UAAU,CAAC,EAAE,OAAO,EAAE,WAAW,EAAE,EAAE,eAAe,2CA0CnE"}
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import type { ProTableExpandable } from "../types";
|
|
2
|
+
interface ExpandIconProps<T = any> {
|
|
3
|
+
/** 当前记录 */
|
|
4
|
+
record: T;
|
|
5
|
+
/** 缩进层级 */
|
|
6
|
+
indent?: number;
|
|
7
|
+
/** 是否有子节点 */
|
|
8
|
+
hasChild: boolean;
|
|
9
|
+
/** 是否已展开 */
|
|
10
|
+
expanded: boolean;
|
|
11
|
+
/** 展开配置 */
|
|
12
|
+
expandable?: ProTableExpandable<T> | false;
|
|
13
|
+
/** 是否启用展开功能 */
|
|
14
|
+
isExpandable: boolean;
|
|
15
|
+
/** 展开/收起回调 */
|
|
16
|
+
onExpand: (record: T, expanded: boolean) => void;
|
|
17
|
+
}
|
|
18
|
+
export declare function ExpandIcon<T = any>({ record, indent, hasChild, expanded, expandable, isExpandable, onExpand, }: ExpandIconProps<T>): import("react/jsx-runtime").JSX.Element | null;
|
|
19
|
+
export {};
|
|
20
|
+
//# sourceMappingURL=expand-icon.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"expand-icon.d.ts","sourceRoot":"","sources":["../../lib/components/expand-icon.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAElD,UAAU,eAAe,CAAC,CAAC,GAAG,GAAG;IAC/B,WAAW;IACX,MAAM,EAAE,CAAC,CAAC;IACV,WAAW;IACX,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,aAAa;IACb,QAAQ,EAAE,OAAO,CAAC;IAClB,YAAY;IACZ,QAAQ,EAAE,OAAO,CAAC;IAClB,WAAW;IACX,UAAU,CAAC,EAAE,kBAAkB,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC;IAC3C,eAAe;IACf,YAAY,EAAE,OAAO,CAAC;IACtB,cAAc;IACd,QAAQ,EAAE,CAAC,MAAM,EAAE,CAAC,EAAE,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;CAClD;AAED,wBAAgB,UAAU,CAAC,CAAC,GAAG,GAAG,EAAE,EAClC,MAAM,EACN,MAAU,EACV,QAAQ,EACR,QAAQ,EACR,UAAU,EACV,YAAY,EACZ,QAAQ,GACT,EAAE,eAAe,CAAC,CAAC,CAAC,kDA8DpB"}
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
interface LoadingStateProps {
|
|
2
|
+
/** 列数 */
|
|
3
|
+
columnCount: number;
|
|
4
|
+
/** 是否显示拖拽列 */
|
|
5
|
+
draggable?: boolean;
|
|
6
|
+
/** 是否显示选择列 */
|
|
7
|
+
rowSelection?: boolean;
|
|
8
|
+
/** 加载行数,默认 5 */
|
|
9
|
+
rowCount?: number;
|
|
10
|
+
}
|
|
11
|
+
export declare function LoadingState({ columnCount, draggable, rowSelection, rowCount, }: LoadingStateProps): import("react/jsx-runtime").JSX.Element;
|
|
12
|
+
export {};
|
|
13
|
+
//# sourceMappingURL=loading-state.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"loading-state.d.ts","sourceRoot":"","sources":["../../lib/components/loading-state.tsx"],"names":[],"mappings":"AAGA,UAAU,iBAAiB;IACzB,SAAS;IACT,WAAW,EAAE,MAAM,CAAC;IACpB,cAAc;IACd,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,cAAc;IACd,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,gBAAgB;IAChB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,wBAAgB,YAAY,CAAC,EAC3B,WAAW,EACX,SAAiB,EACjB,YAAoB,EACpB,QAAY,GACb,EAAE,iBAAiB,2CAwBnB"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"search.d.ts","sourceRoot":"","sources":["../../lib/components/search.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"search.d.ts","sourceRoot":"","sources":["../../lib/components/search.tsx"],"names":[],"mappings":"AAkBA,OAAO,KAAK,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAazD,UAAU,WAAW,CAAC,CAAC,GAAG,GAAG,CAAE,SAAQ,cAAc;IACnD,OAAO,EAAE,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC;IACxB,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,KAAK,IAAI,CAAC;IACjD,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,wBAAgB,MAAM,CAAC,CAAC,GAAG,GAAG,EAAE,EAC9B,OAAO,EACP,QAAQ,EACR,OAAO,EACP,OAAO,EACP,UAAoB,EACpB,UAAU,EACV,SAAS,EACT,UAAU,EACV,gBAAuB,EACvB,SAAS,EAAE,mBAAmB,EAC9B,UAAU,EACV,YAAY,GACb,EAAE,WAAW,CAAC,CAAC,CAAC,kDA0YhB"}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import * as AccordionPrimitive from "@radix-ui/react-accordion";
|
|
3
|
+
declare function Accordion({ ...props }: React.ComponentProps<typeof AccordionPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
|
|
4
|
+
declare function AccordionItem({ className, ...props }: React.ComponentProps<typeof AccordionPrimitive.Item>): import("react/jsx-runtime").JSX.Element;
|
|
5
|
+
declare function AccordionTrigger({ className, children, ...props }: React.ComponentProps<typeof AccordionPrimitive.Trigger>): import("react/jsx-runtime").JSX.Element;
|
|
6
|
+
declare function AccordionContent({ className, children, ...props }: React.ComponentProps<typeof AccordionPrimitive.Content>): import("react/jsx-runtime").JSX.Element;
|
|
7
|
+
export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };
|
|
8
|
+
//# sourceMappingURL=accordion.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"accordion.d.ts","sourceRoot":"","sources":["../../../lib/components/ui/accordion.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,kBAAkB,MAAM,2BAA2B,CAAC;AAKhE,iBAAS,SAAS,CAAC,EACjB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,kBAAkB,CAAC,IAAI,CAAC,2CAEtD;AAED,iBAAS,aAAa,CAAC,EACrB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,kBAAkB,CAAC,IAAI,CAAC,2CAQtD;AAED,iBAAS,gBAAgB,CAAC,EACxB,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,kBAAkB,CAAC,OAAO,CAAC,2CAgBzD;AAED,iBAAS,gBAAgB,CAAC,EACxB,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,kBAAkB,CAAC,OAAO,CAAC,2CAUzD;AAED,OAAO,EAAE,SAAS,EAAE,aAAa,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,CAAC"}
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog";
|
|
3
|
+
declare function AlertDialog({ ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
|
|
4
|
+
declare function AlertDialogTrigger({ ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Trigger>): import("react/jsx-runtime").JSX.Element;
|
|
5
|
+
declare function AlertDialogPortal({ ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Portal>): import("react/jsx-runtime").JSX.Element;
|
|
6
|
+
declare function AlertDialogOverlay({ className, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Overlay>): import("react/jsx-runtime").JSX.Element;
|
|
7
|
+
declare function AlertDialogContent({ className, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Content>): import("react/jsx-runtime").JSX.Element;
|
|
8
|
+
declare function AlertDialogHeader({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
|
|
9
|
+
declare function AlertDialogFooter({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
|
|
10
|
+
declare function AlertDialogTitle({ className, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Title>): import("react/jsx-runtime").JSX.Element;
|
|
11
|
+
declare function AlertDialogDescription({ className, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Description>): import("react/jsx-runtime").JSX.Element;
|
|
12
|
+
declare function AlertDialogAction({ className, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Action>): import("react/jsx-runtime").JSX.Element;
|
|
13
|
+
declare function AlertDialogCancel({ className, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Cancel>): import("react/jsx-runtime").JSX.Element;
|
|
14
|
+
export { AlertDialog, AlertDialogPortal, AlertDialogOverlay, AlertDialogTrigger, AlertDialogContent, AlertDialogHeader, AlertDialogFooter, AlertDialogTitle, AlertDialogDescription, AlertDialogAction, AlertDialogCancel, };
|
|
15
|
+
//# sourceMappingURL=alert-dialog.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"alert-dialog.d.ts","sourceRoot":"","sources":["../../../lib/components/ui/alert-dialog.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,oBAAoB,MAAM,8BAA8B,CAAC;AAKrE,iBAAS,WAAW,CAAC,EACnB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,oBAAoB,CAAC,IAAI,CAAC,2CAExD;AAED,iBAAS,kBAAkB,CAAC,EAC1B,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,oBAAoB,CAAC,OAAO,CAAC,2CAI3D;AAED,iBAAS,iBAAiB,CAAC,EACzB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,oBAAoB,CAAC,MAAM,CAAC,2CAI1D;AAED,iBAAS,kBAAkB,CAAC,EAC1B,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,oBAAoB,CAAC,OAAO,CAAC,2CAW3D;AAED,iBAAS,kBAAkB,CAAC,EAC1B,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,oBAAoB,CAAC,OAAO,CAAC,2CAc3D;AAED,iBAAS,iBAAiB,CAAC,EACzB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CAQ7B;AAED,iBAAS,iBAAiB,CAAC,EACzB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CAW7B;AAED,iBAAS,gBAAgB,CAAC,EACxB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,oBAAoB,CAAC,KAAK,CAAC,2CAQzD;AAED,iBAAS,sBAAsB,CAAC,EAC9B,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,oBAAoB,CAAC,WAAW,CAAC,2CAQ/D;AAED,iBAAS,iBAAiB,CAAC,EACzB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,oBAAoB,CAAC,MAAM,CAAC,2CAO1D;AAED,iBAAS,iBAAiB,CAAC,EACzB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,oBAAoB,CAAC,MAAM,CAAC,2CAO1D;AAED,OAAO,EACL,WAAW,EACX,iBAAiB,EACjB,kBAAkB,EAClB,kBAAkB,EAClB,kBAAkB,EAClB,iBAAiB,EACjB,iBAAiB,EACjB,gBAAgB,EAChB,sBAAsB,EACtB,iBAAiB,EACjB,iBAAiB,GAClB,CAAC"}
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
import * as AspectRatioPrimitive from "@radix-ui/react-aspect-ratio";
|
|
2
|
+
declare function AspectRatio({ ...props }: React.ComponentProps<typeof AspectRatioPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
|
|
3
|
+
export { AspectRatio };
|
|
4
|
+
//# sourceMappingURL=aspect-ratio.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"aspect-ratio.d.ts","sourceRoot":"","sources":["../../../lib/components/ui/aspect-ratio.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,oBAAoB,MAAM,8BAA8B,CAAA;AAEpE,iBAAS,WAAW,CAAC,EACnB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,oBAAoB,CAAC,IAAI,CAAC,2CAExD;AAED,OAAO,EAAE,WAAW,EAAE,CAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"avatar.d.ts","sourceRoot":"","sources":["../../../lib/components/ui/avatar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,
|
|
1
|
+
{"version":3,"file":"avatar.d.ts","sourceRoot":"","sources":["../../../lib/components/ui/avatar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,eAAe,MAAM,wBAAwB,CAAC;AAI1D,iBAAS,MAAM,CAAC,EACd,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,IAAI,CAAC,2CAWnD;AAED,iBAAS,WAAW,CAAC,EACnB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,KAAK,CAAC,2CAQpD;AAED,iBAAS,cAAc,CAAC,EACtB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,QAAQ,CAAC,2CAWvD;AAED,OAAO,EAAE,MAAM,EAAE,WAAW,EAAE,cAAc,EAAE,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"badge.d.ts","sourceRoot":"","sources":["../../../lib/components/ui/badge.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,
|
|
1
|
+
{"version":3,"file":"badge.d.ts","sourceRoot":"","sources":["../../../lib/components/ui/badge.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAIlE,QAAA,MAAM,aAAa;;8EAmBlB,CAAC;AAEF,iBAAS,KAAK,CAAC,EACb,SAAS,EACT,OAAO,EACP,OAAe,EACf,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,GAC7B,YAAY,CAAC,OAAO,aAAa,CAAC,GAAG;IAAE,OAAO,CAAC,EAAE,OAAO,CAAA;CAAE,2CAU3D;AAED,OAAO,EAAE,KAAK,EAAE,aAAa,EAAE,CAAC"}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
declare function Breadcrumb({ ...props }: React.ComponentProps<"nav">): import("react/jsx-runtime").JSX.Element;
|
|
3
|
+
declare function BreadcrumbList({ className, ...props }: React.ComponentProps<"ol">): import("react/jsx-runtime").JSX.Element;
|
|
4
|
+
declare function BreadcrumbItem({ className, ...props }: React.ComponentProps<"li">): import("react/jsx-runtime").JSX.Element;
|
|
5
|
+
declare function BreadcrumbLink({ asChild, className, ...props }: React.ComponentProps<"a"> & {
|
|
6
|
+
asChild?: boolean;
|
|
7
|
+
}): import("react/jsx-runtime").JSX.Element;
|
|
8
|
+
declare function BreadcrumbPage({ className, ...props }: React.ComponentProps<"span">): import("react/jsx-runtime").JSX.Element;
|
|
9
|
+
declare function BreadcrumbSeparator({ children, className, ...props }: React.ComponentProps<"li">): import("react/jsx-runtime").JSX.Element;
|
|
10
|
+
declare function BreadcrumbEllipsis({ className, ...props }: React.ComponentProps<"span">): import("react/jsx-runtime").JSX.Element;
|
|
11
|
+
export { Breadcrumb, BreadcrumbList, BreadcrumbItem, BreadcrumbLink, BreadcrumbPage, BreadcrumbSeparator, BreadcrumbEllipsis, };
|
|
12
|
+
//# sourceMappingURL=breadcrumb.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"breadcrumb.d.ts","sourceRoot":"","sources":["../../../lib/components/ui/breadcrumb.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,iBAAS,UAAU,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CAE5D;AAED,iBAAS,cAAc,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC,2CAW1E;AAED,iBAAS,cAAc,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC,2CAQ1E;AAED,iBAAS,cAAc,CAAC,EACtB,OAAO,EACP,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,GAAG,CAAC,GAAG;IAC7B,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,2CAUA;AAED,iBAAS,cAAc,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,2CAW5E;AAED,iBAAS,mBAAmB,CAAC,EAC3B,QAAQ,EACR,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC,2CAY5B;AAED,iBAAS,kBAAkB,CAAC,EAC1B,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,2CAa9B;AAED,OAAO,EACL,UAAU,EACV,cAAc,EACd,cAAc,EACd,cAAc,EACd,cAAc,EACd,mBAAmB,EACnB,kBAAkB,GACnB,CAAC"}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { type VariantProps } from "class-variance-authority";
|
|
2
|
+
import { Separator } from "../../components/ui/separator";
|
|
3
|
+
declare const buttonGroupVariants: (props?: ({
|
|
4
|
+
orientation?: "horizontal" | "vertical" | null | undefined;
|
|
5
|
+
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
6
|
+
declare function ButtonGroup({ className, orientation, ...props }: React.ComponentProps<"div"> & VariantProps<typeof buttonGroupVariants>): import("react/jsx-runtime").JSX.Element;
|
|
7
|
+
declare function ButtonGroupText({ className, asChild, ...props }: React.ComponentProps<"div"> & {
|
|
8
|
+
asChild?: boolean;
|
|
9
|
+
}): import("react/jsx-runtime").JSX.Element;
|
|
10
|
+
declare function ButtonGroupSeparator({ className, orientation, ...props }: React.ComponentProps<typeof Separator>): import("react/jsx-runtime").JSX.Element;
|
|
11
|
+
export { ButtonGroup, ButtonGroupSeparator, ButtonGroupText, buttonGroupVariants, };
|
|
12
|
+
//# sourceMappingURL=button-group.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"button-group.d.ts","sourceRoot":"","sources":["../../../lib/components/ui/button-group.tsx"],"names":[],"mappings":"AACA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAGlE,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AAEtD,QAAA,MAAM,mBAAmB;;8EAexB,CAAC;AAEF,iBAAS,WAAW,CAAC,EACnB,SAAS,EACT,WAAW,EACX,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG,YAAY,CAAC,OAAO,mBAAmB,CAAC,2CAUxE;AAED,iBAAS,eAAe,CAAC,EACvB,SAAS,EACT,OAAe,EACf,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG;IAC/B,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,2CAYA;AAED,iBAAS,oBAAoB,CAAC,EAC5B,SAAS,EACT,WAAwB,EACxB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,SAAS,CAAC,2CAYxC;AAED,OAAO,EACL,WAAW,EACX,oBAAoB,EACpB,eAAe,EACf,mBAAmB,GACpB,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../lib/components/ui/button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,
|
|
1
|
+
{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../lib/components/ui/button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAIlE,QAAA,MAAM,cAAc;;;8EA8BnB,CAAC;AAEF,iBAAS,MAAM,CAAC,EACd,SAAS,EACT,OAAO,EACP,IAAI,EACJ,OAAe,EACf,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,QAAQ,CAAC,GAC/B,YAAY,CAAC,OAAO,cAAc,CAAC,GAAG;IACpC,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,2CAUF;AAED,OAAO,EAAE,MAAM,EAAE,cAAc,EAAE,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"calendar.d.ts","sourceRoot":"","sources":["../../../lib/components/ui/calendar.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,
|
|
1
|
+
{"version":3,"file":"calendar.d.ts","sourceRoot":"","sources":["../../../lib/components/ui/calendar.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,OAAO,EAAE,SAAS,EAAE,SAAS,EAAwB,MAAM,kBAAkB,CAAC;AAG9E,OAAO,EAAE,MAAM,EAAkB,MAAM,wBAAwB,CAAC;AAEhE,iBAAS,QAAQ,CAAC,EAChB,SAAS,EACT,UAAU,EACV,eAAsB,EACtB,aAAuB,EACvB,aAAuB,EACvB,UAAU,EACV,UAAU,EACV,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,SAAS,CAAC,GAAG;IAC1C,aAAa,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,MAAM,CAAC,CAAC,SAAS,CAAC,CAAC;CAChE,2CAuJA;AAED,iBAAS,iBAAiB,CAAC,EACzB,SAAS,EACT,GAAG,EACH,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,SAAS,CAAC,2CA+BxC;AAED,OAAO,EAAE,QAAQ,EAAE,iBAAiB,EAAE,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"card.d.ts","sourceRoot":"","sources":["../../../lib/components/ui/card.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,
|
|
1
|
+
{"version":3,"file":"card.d.ts","sourceRoot":"","sources":["../../../lib/components/ui/card.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,iBAAS,IAAI,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CAWjE;AAED,iBAAS,UAAU,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CAWvE;AAED,iBAAS,SAAS,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CAQtE;AAED,iBAAS,eAAe,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CAQ5E;AAED,iBAAS,UAAU,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CAWvE;AAED,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CAQxE;AAED,iBAAS,UAAU,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CAQvE;AAED,OAAO,EACL,IAAI,EACJ,UAAU,EACV,UAAU,EACV,SAAS,EACT,UAAU,EACV,eAAe,EACf,WAAW,GACZ,CAAC"}
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import useEmblaCarousel, { type UseEmblaCarouselType } from "embla-carousel-react";
|
|
3
|
+
import { Button } from "../../components/ui/button";
|
|
4
|
+
type CarouselApi = UseEmblaCarouselType[1];
|
|
5
|
+
type UseCarouselParameters = Parameters<typeof useEmblaCarousel>;
|
|
6
|
+
type CarouselOptions = UseCarouselParameters[0];
|
|
7
|
+
type CarouselPlugin = UseCarouselParameters[1];
|
|
8
|
+
type CarouselProps = {
|
|
9
|
+
opts?: CarouselOptions;
|
|
10
|
+
plugins?: CarouselPlugin;
|
|
11
|
+
orientation?: "horizontal" | "vertical";
|
|
12
|
+
setApi?: (api: CarouselApi) => void;
|
|
13
|
+
};
|
|
14
|
+
declare function Carousel({ orientation, opts, setApi, plugins, className, children, ...props }: React.ComponentProps<"div"> & CarouselProps): import("react/jsx-runtime").JSX.Element;
|
|
15
|
+
declare function CarouselContent({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
|
|
16
|
+
declare function CarouselItem({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
|
|
17
|
+
declare function CarouselPrevious({ className, variant, size, ...props }: React.ComponentProps<typeof Button>): import("react/jsx-runtime").JSX.Element;
|
|
18
|
+
declare function CarouselNext({ className, variant, size, ...props }: React.ComponentProps<typeof Button>): import("react/jsx-runtime").JSX.Element;
|
|
19
|
+
export { type CarouselApi, Carousel, CarouselContent, CarouselItem, CarouselPrevious, CarouselNext, };
|
|
20
|
+
//# sourceMappingURL=carousel.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"carousel.d.ts","sourceRoot":"","sources":["../../../lib/components/ui/carousel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,gBAAgB,EAAE,EACvB,KAAK,oBAAoB,EAC1B,MAAM,sBAAsB,CAAC;AAI9B,OAAO,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAC;AAEhD,KAAK,WAAW,GAAG,oBAAoB,CAAC,CAAC,CAAC,CAAC;AAC3C,KAAK,qBAAqB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC;AACjE,KAAK,eAAe,GAAG,qBAAqB,CAAC,CAAC,CAAC,CAAC;AAChD,KAAK,cAAc,GAAG,qBAAqB,CAAC,CAAC,CAAC,CAAC;AAE/C,KAAK,aAAa,GAAG;IACnB,IAAI,CAAC,EAAE,eAAe,CAAC;IACvB,OAAO,CAAC,EAAE,cAAc,CAAC;IACzB,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IACxC,MAAM,CAAC,EAAE,CAAC,GAAG,EAAE,WAAW,KAAK,IAAI,CAAC;CACrC,CAAC;AAuBF,iBAAS,QAAQ,CAAC,EAChB,WAA0B,EAC1B,IAAI,EACJ,MAAM,EACN,OAAO,EACP,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG,aAAa,2CAgF7C;AAED,iBAAS,eAAe,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CAmB5E;AAED,iBAAS,YAAY,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CAgBzE;AAED,iBAAS,gBAAgB,CAAC,EACxB,SAAS,EACT,OAAmB,EACnB,IAAa,EACb,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,MAAM,CAAC,2CAuBrC;AAED,iBAAS,YAAY,CAAC,EACpB,SAAS,EACT,OAAmB,EACnB,IAAa,EACb,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,MAAM,CAAC,2CAuBrC;AAED,OAAO,EACL,KAAK,WAAW,EAChB,QAAQ,EACR,eAAe,EACf,YAAY,EACZ,gBAAgB,EAChB,YAAY,GACb,CAAC"}
|