@sia.soul/sia-react-ui 0.1.28 → 0.1.30

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/dist/index.css CHANGED
@@ -3467,12 +3467,14 @@ fieldset:disabled .sia-input-number__floating-placeholder {
3467
3467
  .sia-table__header-cell,
3468
3468
  .sia-table__cell {
3469
3469
  position: relative;
3470
- height: 38px;
3471
- padding: 8px 12px;
3470
+ height: 36px;
3471
+ padding: 5px 12px;
3472
3472
  border-right: var(--sia-table-column-border-width) solid var(--sia-table-border-color, #EFF2F6);
3473
3473
  border-bottom: var(--sia-table-row-border-width) solid var(--sia-table-border-color, #EFF2F6);
3474
3474
  background: var(--sia-color-surface);
3475
3475
  vertical-align: middle;
3476
+ font-size: 13px;
3477
+ line-height: 1.5;
3476
3478
  }
3477
3479
  .sia-table__cell:last-child {
3478
3480
  border-right: 0;
@@ -3517,8 +3519,21 @@ fieldset:disabled .sia-input-number__floating-placeholder {
3517
3519
  gap: 5px;
3518
3520
  }
3519
3521
  .sia-table__header-label-content {
3522
+ display: block;
3520
3523
  min-width: 0;
3521
3524
  flex: 1;
3525
+ overflow: hidden;
3526
+ white-space: nowrap;
3527
+ text-overflow: ellipsis;
3528
+ }
3529
+ .sia-table__sortable-header > span:first-child,
3530
+ .sia-table__filter-header > span:first-child,
3531
+ .sia-table__resizable-header > span:first-child {
3532
+ flex: 1;
3533
+ min-width: 0;
3534
+ overflow: hidden;
3535
+ white-space: nowrap;
3536
+ text-overflow: ellipsis;
3522
3537
  }
3523
3538
  .sia-table__header-description {
3524
3539
  display: inline-grid;
@@ -3584,7 +3599,13 @@ fieldset:disabled .sia-input-number__floating-placeholder {
3584
3599
  }
3585
3600
  .sia-table__row {
3586
3601
  content-visibility: auto;
3587
- contain-intrinsic-size: auto 38px;
3602
+ contain-intrinsic-size: auto 36px;
3603
+ }
3604
+ .sia-table--small .sia-table__row {
3605
+ contain-intrinsic-size: auto 28px;
3606
+ }
3607
+ .sia-table--large .sia-table__row {
3608
+ contain-intrinsic-size: auto 46px;
3588
3609
  }
3589
3610
  .sia-table__row--striped .sia-table__cell {
3590
3611
  background: color-mix(in srgb, var(--sia-color-background) 55%, var(--sia-color-surface));
@@ -3651,7 +3672,7 @@ fieldset:disabled .sia-input-number__floating-placeholder {
3651
3672
  .sia-table__cell--merge-sticky > .sia-table__cell-content {
3652
3673
  position: sticky;
3653
3674
  z-index: var(--sia-table-merge-sticky-z-index, 3);
3654
- top: calc(var(--sia-table-header-height, 38px) + var(--sia-table-merge-sticky-inset, 0px));
3675
+ top: calc(var(--sia-table-header-height, 36px) + var(--sia-table-merge-sticky-inset, 0px));
3655
3676
  }
3656
3677
  .sia-table__cell--fixed {
3657
3678
  position: sticky;
@@ -3774,7 +3795,7 @@ fieldset:disabled .sia-input-number__floating-placeholder {
3774
3795
  .sia-table__empty {
3775
3796
  position: absolute;
3776
3797
  z-index: 7;
3777
- inset: var(--sia-table-header-height, 38px) 0 0;
3798
+ inset: var(--sia-table-header-height, 36px) 0 0;
3778
3799
  display: grid;
3779
3800
  place-items: center;
3780
3801
  min-width: 0;
@@ -3800,8 +3821,8 @@ fieldset:disabled .sia-input-number__floating-placeholder {
3800
3821
  }
3801
3822
  .sia-table--small .sia-table__header-cell,
3802
3823
  .sia-table--small .sia-table__cell {
3803
- height: 32px;
3804
- padding: 5px 9px;
3824
+ height: 28px;
3825
+ padding: 3px 9px;
3805
3826
  font-size: 12px;
3806
3827
  }
3807
3828
  .sia-table--large .sia-table__header-cell,
@@ -3828,24 +3849,53 @@ fieldset:disabled .sia-input-number__floating-placeholder {
3828
3849
  display: flex;
3829
3850
  align-items: center;
3830
3851
  justify-content: space-between;
3852
+ min-width: 0;
3831
3853
  gap: 6px;
3832
3854
  }
3833
3855
  .sia-table__sort-button {
3834
3856
  display: grid;
3835
3857
  align-content: center;
3836
- width: 20px;
3858
+ justify-items: center;
3859
+ flex: 0 0 26px;
3860
+ width: 26px;
3837
3861
  height: 28px;
3838
3862
  padding: 0;
3839
3863
  color: var(--sia-color-text-secondary);
3840
3864
  cursor: pointer;
3841
3865
  background: transparent;
3842
3866
  border: 0;
3867
+ border-radius: var(--sia-radius);
3843
3868
  }
3844
- .sia-table__sort-button .sia-icon {
3869
+ .sia-table__sort-button[data-sort-order=none] .sia-icon {
3845
3870
  margin-block: -2px;
3846
3871
  }
3847
- .sia-table__sort-button .is-active {
3872
+ .sia-table__sort-button:not([data-sort-order=none]) {
3873
+ color: var(--sia-color-primary-text);
3874
+ background: color-mix(in srgb, var(--sia-color-primary) 14%, var(--sia-color-surface));
3875
+ }
3876
+ .sia-table__sort-button:not([data-sort-order=none]) .sia-icon {
3877
+ stroke-width: 2.5;
3878
+ }
3879
+ .sia-table__sort-button:hover {
3848
3880
  color: var(--sia-color-primary-text);
3881
+ background: color-mix(in srgb, var(--sia-color-primary) 20%, var(--sia-color-surface));
3882
+ }
3883
+ .sia-table__sort-button:focus-visible {
3884
+ outline: 2px solid var(--sia-color-primary);
3885
+ outline-offset: 1px;
3886
+ }
3887
+ .sia-table--medium .sia-table__sort-button {
3888
+ height: 24px;
3889
+ }
3890
+ .sia-table--small .sia-table__sort-button,
3891
+ .sia-table--small .sia-table__filter-button {
3892
+ height: 20px;
3893
+ }
3894
+ .sia-table--medium .sia-table__cell .sia-button--link {
3895
+ height: 24px;
3896
+ }
3897
+ .sia-table--small .sia-table__cell .sia-button--link {
3898
+ height: 20px;
3849
3899
  }
3850
3900
  .sia-table__filter-header {
3851
3901
  display: flex;
@@ -4392,8 +4442,8 @@ fieldset:disabled .sia-input-number__floating-placeholder {
4392
4442
  }
4393
4443
  }
4394
4444
  .sia-table__settings-dropdown .sia-menu__item {
4395
- min-height: 34px;
4396
- padding: 4px 12px;
4445
+ min-height: 36px;
4446
+ padding: 5px 12px;
4397
4447
  gap: 10px;
4398
4448
  font-size: 14px;
4399
4449
  line-height: 24px;
@@ -6979,6 +7029,205 @@ fieldset:disabled .sia-input-number__floating-placeholder {
6979
7029
  .sia-upload-dragger__content strong {
6980
7030
  color: var(--sia-color-text);
6981
7031
  }
7032
+ .sia-upload {
7033
+ min-width: 0;
7034
+ outline-offset: 4px;
7035
+ }
7036
+ .sia-upload__list:empty {
7037
+ display: none;
7038
+ }
7039
+ .sia-upload__item {
7040
+ position: relative;
7041
+ min-width: 0;
7042
+ }
7043
+ .sia-upload__choose {
7044
+ gap: 8px;
7045
+ }
7046
+ .sia-upload__choose > span {
7047
+ display: inline-flex;
7048
+ align-items: center;
7049
+ gap: 8px;
7050
+ }
7051
+ .sia-upload__name a {
7052
+ color: var(--sia-color-primary-text);
7053
+ text-decoration: none;
7054
+ }
7055
+ .sia-upload__item--error .sia-upload__name a {
7056
+ color: inherit;
7057
+ }
7058
+ .sia-upload__uploading {
7059
+ display: grid;
7060
+ grid-column: 2 / -1;
7061
+ gap: 5px;
7062
+ font-size: 12px;
7063
+ color: var(--sia-color-text-secondary);
7064
+ }
7065
+ .sia-upload__progress {
7066
+ display: block;
7067
+ grid-column: auto;
7068
+ width: 100%;
7069
+ }
7070
+ .sia-upload__error {
7071
+ grid-column: 2 / -1;
7072
+ font-size: 12px;
7073
+ }
7074
+ .sia-upload__item > .sia-upload__remove {
7075
+ grid-column: 3;
7076
+ grid-row: 1;
7077
+ width: 28px;
7078
+ height: 28px;
7079
+ }
7080
+ .sia-upload__item--error {
7081
+ border-color: var(--sia-color-error);
7082
+ }
7083
+ .sia-upload__item--error > .sia-upload__remove {
7084
+ color: var(--sia-color-error);
7085
+ }
7086
+ .sia-upload__thumbnail.sia-button {
7087
+ display: grid;
7088
+ place-items: center;
7089
+ width: 60px;
7090
+ height: 60px;
7091
+ padding: 0;
7092
+ color: inherit;
7093
+ background: var(--sia-color-control-hover);
7094
+ border-radius: 5px;
7095
+ }
7096
+ .sia-upload__thumbnail img {
7097
+ display: block;
7098
+ width: 100%;
7099
+ height: 100%;
7100
+ object-fit: cover;
7101
+ }
7102
+ .sia-upload__thumbnail > span {
7103
+ display: grid;
7104
+ place-items: center;
7105
+ width: 100%;
7106
+ height: 100%;
7107
+ }
7108
+ .sia-upload--picture .sia-upload__item {
7109
+ min-height: 84px;
7110
+ padding: 10px;
7111
+ border: 1px solid var(--sia-color-border);
7112
+ border-radius: 8px;
7113
+ }
7114
+ .sia-upload--picture .sia-upload__item--error {
7115
+ border-color: var(--sia-color-error);
7116
+ }
7117
+ .sia-upload--picture .sia-upload__thumbnail {
7118
+ grid-row: 1 / 3;
7119
+ }
7120
+ .sia-upload--picture .sia-upload__uploading,
7121
+ .sia-upload--picture .sia-upload__error {
7122
+ grid-row: 2;
7123
+ }
7124
+ .sia-upload--picture-card .sia-upload__list {
7125
+ display: flex;
7126
+ flex-wrap: wrap;
7127
+ gap: 10px;
7128
+ }
7129
+ .sia-upload--picture-card .sia-upload__item,
7130
+ .sia-upload--picture-card .sia-upload__choose {
7131
+ box-sizing: border-box;
7132
+ width: 112px;
7133
+ height: 112px;
7134
+ border: 1px solid var(--sia-color-border);
7135
+ border-radius: 9px;
7136
+ }
7137
+ .sia-upload--picture-card .sia-upload__item {
7138
+ display: flex;
7139
+ flex-direction: column;
7140
+ justify-content: center;
7141
+ padding: 8px;
7142
+ gap: 4px;
7143
+ overflow: hidden;
7144
+ }
7145
+ .sia-upload--picture-card .sia-upload__choose {
7146
+ display: flex;
7147
+ flex-direction: column;
7148
+ gap: 10px;
7149
+ padding: 8px;
7150
+ border-style: dashed;
7151
+ color: var(--sia-color-text);
7152
+ background: var(--sia-color-control-hover);
7153
+ }
7154
+ .sia-upload--picture-card .sia-upload__choose > span {
7155
+ flex-direction: column;
7156
+ gap: 10px;
7157
+ }
7158
+ .sia-upload--picture-card .sia-upload__thumbnail {
7159
+ width: 100%;
7160
+ height: 70px;
7161
+ min-height: 0;
7162
+ flex: 1 1 auto;
7163
+ }
7164
+ .sia-upload--picture-card .sia-upload__name {
7165
+ display: block;
7166
+ width: 100%;
7167
+ text-align: center;
7168
+ font-size: 12px;
7169
+ flex: 0 0 auto;
7170
+ }
7171
+ .sia-upload--picture-card .sia-upload__remove {
7172
+ position: absolute;
7173
+ right: 3px;
7174
+ top: 3px;
7175
+ background: var(--sia-color-surface);
7176
+ border-radius: 50%;
7177
+ opacity: 0;
7178
+ z-index: 1;
7179
+ }
7180
+ .sia-upload--picture-card .sia-upload__item:hover .sia-upload__remove,
7181
+ .sia-upload--picture-card .sia-upload__item:focus-within .sia-upload__remove {
7182
+ opacity: 1;
7183
+ }
7184
+ .sia-upload--picture-card .sia-upload__item--error {
7185
+ border-color: var(--sia-color-error);
7186
+ }
7187
+ .sia-upload--picture-card .sia-upload__uploading {
7188
+ position: absolute;
7189
+ inset: 0;
7190
+ display: flex;
7191
+ flex-direction: column;
7192
+ justify-content: center;
7193
+ gap: 12px;
7194
+ padding: 12px;
7195
+ text-align: center;
7196
+ background: var(--sia-color-surface);
7197
+ pointer-events: none;
7198
+ }
7199
+ .sia-upload--picture-card .sia-upload__error {
7200
+ font-size: 11px;
7201
+ }
7202
+ .sia-upload-dragger .sia-upload__choose {
7203
+ width: 100%;
7204
+ height: auto;
7205
+ padding: 0;
7206
+ white-space: normal;
7207
+ border: 0;
7208
+ }
7209
+ .sia-upload-dragger .sia-upload__choose > span {
7210
+ display: block;
7211
+ width: 100%;
7212
+ }
7213
+ .sia-upload-dragger__content {
7214
+ box-sizing: border-box;
7215
+ }
7216
+ .sia-upload-dragger__content > .sia-icon {
7217
+ color: var(--sia-color-primary);
7218
+ }
7219
+ .sia-upload.is-dragging .sia-upload__choose {
7220
+ outline: 2px solid var(--sia-color-primary);
7221
+ outline-offset: 2px;
7222
+ }
7223
+ .sia-upload.is-disabled .sia-upload-dragger__content {
7224
+ cursor: not-allowed;
7225
+ }
7226
+ @media (hover: none) {
7227
+ .sia-upload--picture-card .sia-upload__remove {
7228
+ opacity: 1;
7229
+ }
7230
+ }
6982
7231
  .sia-form > fieldset {
6983
7232
  display: contents;
6984
7233
  min-width: 0;
package/dist/index.d.cts CHANGED
@@ -1,5 +1,5 @@
1
- import { T as TagStatus, B as BadgeProps } from './core-CTe-Sfl1.cjs';
2
- export { a as Badge, b as BadgeRibbonProps, c as BadgeStatus, d as Breadcrumb, e as BreadcrumbItem, f as BreadcrumbProps, C as Calendar, g as CalendarProps, h as Card, i as CardAccent, j as CardProps, k as Carousel, l as CarouselProps, m as CarouselRef, n as Collapse, o as CollapseItem, p as CollapseKey, q as CollapseProps, D as Dropdown, r as DropdownButtonProps, s as DropdownMenuProps, t as DropdownOpenSource, u as DropdownPlacement, v as DropdownProps, w as DropdownTrigger, F as FILLED_ICON_NAMES, x as FilledIconName, y as FloatButton, z as FloatButtonBackTopProps, A as FloatButtonGroupProps, E as FloatButtonProps, G as FloatButtonShape, H as FloatingPlacement, I as FloatingTrigger, J as ICON_NAMES, K as Icon, L as IconName, M as IconProps, N as IconVariant, O as Image, P as ImagePreview, Q as ImagePreviewConfig, R as ImagePreviewProps, S as ImageProps, U as Input, V as InputProps, W as Menu, X as MenuClickInfo, Y as MenuItem, Z as MenuMode, _ as MenuProps, $ as MenuTheme, a0 as MessageConfig, a1 as MessageHandle, a2 as MessageKey, a3 as MessageType, a4 as NotificationConfig, a5 as NotificationPlacement, a6 as NotificationType, a7 as Popconfirm, a8 as PopconfirmProps, a9 as Popover, aa as PopoverProps, ab as Progress, ac as ProgressProps, ad as ProgressStatus, ae as Rate, af as RateProps, ag as Segmented, ah as SegmentedOption, ai as SegmentedProps, aj as SegmentedValue, ak as Spin, al as SpinProps, am as StepItem, an as StepStatus, ao as Steps, ap as StepsProps, aq as TabItem, ar as Tabs, as as TabsContextMenuClickInfo, at as TabsOrientation, au as TabsPosition, av as TabsProps, aw as TabsType, ax as Tag, ay as TagProps, az as TagVariant, aA as Timeline, aB as TimelineItem, aC as TimelineProps, aD as Toolbar, aE as ToolbarItem, aF as ToolbarProps, aG as Tooltip, aH as TooltipProps, aI as Tour, aJ as TourProps, aK as TourStep, aL as Tree, aM as TreeDropPosition, aN as TreeKey, aO as TreeNode, aP as TreeProps, aQ as Typography, aR as TypographyLinkProps, aS as TypographyProps, aT as TypographyTitleProps, aU as TypographyType, aV as Upload, aW as UploadChangeInfo, aX as UploadDraggerProps, aY as UploadFile, aZ as UploadFileStatus, a_ as UploadProps, a$ as UploadRequestOptions, b0 as Watermark, b1 as WatermarkFont, b2 as WatermarkProps, b3 as message, b4 as notification } from './core-CTe-Sfl1.cjs';
1
+ import { T as TagStatus, B as BadgeProps } from './core-B687rqFa.cjs';
2
+ export { a as Badge, b as BadgeRibbonProps, c as BadgeStatus, d as Breadcrumb, e as BreadcrumbItem, f as BreadcrumbProps, C as Calendar, g as CalendarProps, h as Card, i as CardAccent, j as CardProps, k as Carousel, l as CarouselProps, m as CarouselRef, n as Collapse, o as CollapseItem, p as CollapseKey, q as CollapseProps, D as Dropdown, r as DropdownButtonProps, s as DropdownMenuProps, t as DropdownOpenSource, u as DropdownPlacement, v as DropdownProps, w as DropdownTrigger, F as FILLED_ICON_NAMES, x as FilledIconName, y as FloatButton, z as FloatButtonBackTopProps, A as FloatButtonGroupProps, E as FloatButtonProps, G as FloatButtonShape, H as FloatingPlacement, I as FloatingTrigger, J as ICON_NAMES, K as Icon, L as IconName, M as IconProps, N as IconVariant, O as Image, P as ImagePreview, Q as ImagePreviewConfig, R as ImagePreviewProps, S as ImageProps, U as Input, V as InputProps, W as Menu, X as MenuClickInfo, Y as MenuItem, Z as MenuMode, _ as MenuProps, $ as MenuTheme, a0 as MessageConfig, a1 as MessageHandle, a2 as MessageKey, a3 as MessageType, a4 as NotificationConfig, a5 as NotificationPlacement, a6 as NotificationType, a7 as Popconfirm, a8 as PopconfirmProps, a9 as Popover, aa as PopoverProps, ab as Progress, ac as ProgressProps, ad as ProgressStatus, ae as Rate, af as RateProps, ag as Segmented, ah as SegmentedOption, ai as SegmentedProps, aj as SegmentedValue, ak as Spin, al as SpinProps, am as StepItem, an as StepStatus, ao as Steps, ap as StepsProps, aq as TabItem, ar as Tabs, as as TabsContextMenuClickInfo, at as TabsOrientation, au as TabsPosition, av as TabsProps, aw as TabsType, ax as Tag, ay as TagProps, az as TagVariant, aA as Timeline, aB as TimelineItem, aC as TimelineProps, aD as Toolbar, aE as ToolbarItem, aF as ToolbarProps, aG as Tooltip, aH as TooltipProps, aI as Tour, aJ as TourProps, aK as TourStep, aL as Tree, aM as TreeDropPosition, aN as TreeKey, aO as TreeNode, aP as TreeProps, aQ as Typography, aR as TypographyLinkProps, aS as TypographyProps, aT as TypographyTitleProps, aU as TypographyType, aV as Upload, aW as UploadChangeInfo, aX as UploadDraggerProps, aY as UploadFile, aZ as UploadFileStatus, a_ as UploadHttpRequest, a$ as UploadItemActions, b0 as UploadProps, b1 as UploadRef, b2 as UploadRejectInfo, b3 as UploadRequestHandle, b4 as UploadRequestOptions, b5 as Watermark, b6 as WatermarkFont, b7 as WatermarkProps, b8 as message, b9 as notification } from './core-B687rqFa.cjs';
3
3
  import * as react from 'react';
4
4
  import { HTMLAttributes, ReactNode, CSSProperties, ElementType, FormHTMLAttributes, InputHTMLAttributes, ChangeEvent, TextareaHTMLAttributes, MouseEvent, Key, PointerEvent, Ref, ReactElement, ButtonHTMLAttributes, RefObject } from 'react';
5
5
  import { C as ControlSize, I as InputPlaceholderMode, a as ControlStatus } from './shared-Bx4B28Wh.cjs';
@@ -1875,7 +1875,7 @@ interface TableColumn<T = Record<string, unknown>> {
1875
1875
  code?: string;
1876
1876
  /** 名称或字段标识。 */
1877
1877
  name?: string;
1878
- /** 标题内容,可传入文本或 React 节点。 */
1878
+ /** 列头内容,可传入文本或 React 节点;默认单行显示,超宽省略,并通过框架 title 提示展示完整文本。节点无法提取文本时使用 name 或 key。 */
1879
1879
  title?: ReactNode;
1880
1880
  /** 补充说明内容。 */
1881
1881
  description?: ReactNode;
@@ -1897,11 +1897,11 @@ interface TableColumn<T = Record<string, unknown>> {
1897
1897
  fixed?: TableFixed | boolean;
1898
1898
  /** 是否隐藏此项。 */
1899
1899
  hidden?: boolean;
1900
- /** 默认单行显示并省略溢出内容(含 Space 标签组);设为 false 允许多行。 */
1900
+ /** 数据单元格默认单行显示并省略溢出内容(含 Space 标签组);设为 false 允许多行,不影响列头始终单行省略。 */
1901
1901
  ellipsis?: boolean;
1902
- /** 是否使用 Sia Tooltip 显示完整文本;默认 false,不生成浏览器原生 title */
1902
+ /** 数据单元格是否使用 Sia Tooltip 显示完整文本;默认 false,不生成浏览器原生 title。列头始终提供完整标题提示,不受此属性影响。 */
1903
1903
  showTitle?: boolean;
1904
- /** 是否允许该列排序。 */
1904
+ /** 是否允许该列排序;配合排序插件显示按钮,依次切换升序、降序、未排序,当前排序方向以高亮单箭头显示。 */
1905
1905
  sortable?: boolean;
1906
1906
  /** 是否允许该列筛选。 */
1907
1907
  filterable?: boolean;
@@ -1921,7 +1921,7 @@ interface TableColumn<T = Record<string, unknown>> {
1921
1921
  children?: readonly TableColumn<T>[];
1922
1922
  /** 自定义数据单元格内容,接收该列的值、行数据和单元格上下文。 */
1923
1923
  render?: (value: unknown, record: T, index: number, info: TableCellRenderInfo<T>) => ReactNode;
1924
- /** 自定义列头内容。 */
1924
+ /** 自定义列头内容,接收当前列及插件上下文;外层保持单行省略,悬停提示从 title 提取文本,无法提取时回退到 name 或 key。 */
1925
1925
  renderHeader?: (column: TableColumn<T>, context: TablePluginContext<T, any>) => ReactNode;
1926
1926
  /** 数据单元格的 CSS 类名,也可按单元格计算。 */
1927
1927
  cellClassName?: string | ((record: T, index: number) => string);
@@ -2094,7 +2094,12 @@ interface TableProps<T extends Record<string, unknown> = Record<string, unknown>
2094
2094
  height?: number | string;
2095
2095
  /** 表格滚动区域的高度。 */
2096
2096
  tableHeight?: number | string;
2097
- /** 表格密度 */
2097
+ /**
2098
+ * 表格密度;省略时与显式传 medium 相同。small、medium、large 默认行高分别为 28、36、46px。
2099
+ * 单元格使用各尺寸字号和 1.5 倍文字行高,不继承宿主页面的文字行高。
2100
+ * small / medium 数据单元格内的链接按钮高度分别为 20 / 24px,以适配行高;工具栏不受影响,其他自定义内容仍可能撑高单元格。
2101
+ * @defaultValue "medium"
2102
+ */
2098
2103
  size?: TableSize;
2099
2104
  /** 是否显示边框。 */
2100
2105
  bordered?: boolean;
@@ -2110,7 +2115,7 @@ interface TableProps<T extends Record<string, unknown> = Record<string, unknown>
2110
2115
  virtual?: boolean;
2111
2116
  /** 启用虚拟滚动的选项数量 */
2112
2117
  virtualThreshold?: number;
2113
- /** 行高度,虚拟滚动用其计算行位置。 */
2118
+ /** 行高度,单位为 px,虚拟滚动用其计算行位置;默认随 size 取 small 28、medium 36、large 46。自定义内容应适配行高,避免撑高后导致虚拟滚动位置偏差。 */
2114
2119
  rowHeight?: number;
2115
2120
  /** 虚拟列表在可视区域前后额外渲染的数量。 */
2116
2121
  overscan?: number;
@@ -2446,7 +2451,7 @@ interface TableSortApi {
2446
2451
  /** 清空当前值或内容。 */
2447
2452
  clear: () => void;
2448
2453
  }
2449
- /** 创建表格列排序插件。将返回值加入 Table 的 plugins 后生效。 */
2454
+ /** 创建表格列排序插件。将返回值加入 Table 的 plugins 后生效;点击列头按钮依次切换升序、降序和未排序,当前方向以高亮单箭头显示,悬停提示当前状态及下一步操作。 */
2450
2455
  declare function createSortPlugin<T extends Record<string, unknown>>(options?: TableSortPluginOptions): TablePlugin<T, SortState, TableSortApi>;
2451
2456
  /** 列标识到筛选条件的映射。 */
2452
2457
  type TableFilterValues = Readonly<Record<string, string>>;
package/dist/index.d.ts CHANGED
@@ -1,5 +1,5 @@
1
- import { T as TagStatus, B as BadgeProps } from './core-DlvCqFU7.js';
2
- export { a as Badge, b as BadgeRibbonProps, c as BadgeStatus, d as Breadcrumb, e as BreadcrumbItem, f as BreadcrumbProps, C as Calendar, g as CalendarProps, h as Card, i as CardAccent, j as CardProps, k as Carousel, l as CarouselProps, m as CarouselRef, n as Collapse, o as CollapseItem, p as CollapseKey, q as CollapseProps, D as Dropdown, r as DropdownButtonProps, s as DropdownMenuProps, t as DropdownOpenSource, u as DropdownPlacement, v as DropdownProps, w as DropdownTrigger, F as FILLED_ICON_NAMES, x as FilledIconName, y as FloatButton, z as FloatButtonBackTopProps, A as FloatButtonGroupProps, E as FloatButtonProps, G as FloatButtonShape, H as FloatingPlacement, I as FloatingTrigger, J as ICON_NAMES, K as Icon, L as IconName, M as IconProps, N as IconVariant, O as Image, P as ImagePreview, Q as ImagePreviewConfig, R as ImagePreviewProps, S as ImageProps, U as Input, V as InputProps, W as Menu, X as MenuClickInfo, Y as MenuItem, Z as MenuMode, _ as MenuProps, $ as MenuTheme, a0 as MessageConfig, a1 as MessageHandle, a2 as MessageKey, a3 as MessageType, a4 as NotificationConfig, a5 as NotificationPlacement, a6 as NotificationType, a7 as Popconfirm, a8 as PopconfirmProps, a9 as Popover, aa as PopoverProps, ab as Progress, ac as ProgressProps, ad as ProgressStatus, ae as Rate, af as RateProps, ag as Segmented, ah as SegmentedOption, ai as SegmentedProps, aj as SegmentedValue, ak as Spin, al as SpinProps, am as StepItem, an as StepStatus, ao as Steps, ap as StepsProps, aq as TabItem, ar as Tabs, as as TabsContextMenuClickInfo, at as TabsOrientation, au as TabsPosition, av as TabsProps, aw as TabsType, ax as Tag, ay as TagProps, az as TagVariant, aA as Timeline, aB as TimelineItem, aC as TimelineProps, aD as Toolbar, aE as ToolbarItem, aF as ToolbarProps, aG as Tooltip, aH as TooltipProps, aI as Tour, aJ as TourProps, aK as TourStep, aL as Tree, aM as TreeDropPosition, aN as TreeKey, aO as TreeNode, aP as TreeProps, aQ as Typography, aR as TypographyLinkProps, aS as TypographyProps, aT as TypographyTitleProps, aU as TypographyType, aV as Upload, aW as UploadChangeInfo, aX as UploadDraggerProps, aY as UploadFile, aZ as UploadFileStatus, a_ as UploadProps, a$ as UploadRequestOptions, b0 as Watermark, b1 as WatermarkFont, b2 as WatermarkProps, b3 as message, b4 as notification } from './core-DlvCqFU7.js';
1
+ import { T as TagStatus, B as BadgeProps } from './core-BwuvPHYM.js';
2
+ export { a as Badge, b as BadgeRibbonProps, c as BadgeStatus, d as Breadcrumb, e as BreadcrumbItem, f as BreadcrumbProps, C as Calendar, g as CalendarProps, h as Card, i as CardAccent, j as CardProps, k as Carousel, l as CarouselProps, m as CarouselRef, n as Collapse, o as CollapseItem, p as CollapseKey, q as CollapseProps, D as Dropdown, r as DropdownButtonProps, s as DropdownMenuProps, t as DropdownOpenSource, u as DropdownPlacement, v as DropdownProps, w as DropdownTrigger, F as FILLED_ICON_NAMES, x as FilledIconName, y as FloatButton, z as FloatButtonBackTopProps, A as FloatButtonGroupProps, E as FloatButtonProps, G as FloatButtonShape, H as FloatingPlacement, I as FloatingTrigger, J as ICON_NAMES, K as Icon, L as IconName, M as IconProps, N as IconVariant, O as Image, P as ImagePreview, Q as ImagePreviewConfig, R as ImagePreviewProps, S as ImageProps, U as Input, V as InputProps, W as Menu, X as MenuClickInfo, Y as MenuItem, Z as MenuMode, _ as MenuProps, $ as MenuTheme, a0 as MessageConfig, a1 as MessageHandle, a2 as MessageKey, a3 as MessageType, a4 as NotificationConfig, a5 as NotificationPlacement, a6 as NotificationType, a7 as Popconfirm, a8 as PopconfirmProps, a9 as Popover, aa as PopoverProps, ab as Progress, ac as ProgressProps, ad as ProgressStatus, ae as Rate, af as RateProps, ag as Segmented, ah as SegmentedOption, ai as SegmentedProps, aj as SegmentedValue, ak as Spin, al as SpinProps, am as StepItem, an as StepStatus, ao as Steps, ap as StepsProps, aq as TabItem, ar as Tabs, as as TabsContextMenuClickInfo, at as TabsOrientation, au as TabsPosition, av as TabsProps, aw as TabsType, ax as Tag, ay as TagProps, az as TagVariant, aA as Timeline, aB as TimelineItem, aC as TimelineProps, aD as Toolbar, aE as ToolbarItem, aF as ToolbarProps, aG as Tooltip, aH as TooltipProps, aI as Tour, aJ as TourProps, aK as TourStep, aL as Tree, aM as TreeDropPosition, aN as TreeKey, aO as TreeNode, aP as TreeProps, aQ as Typography, aR as TypographyLinkProps, aS as TypographyProps, aT as TypographyTitleProps, aU as TypographyType, aV as Upload, aW as UploadChangeInfo, aX as UploadDraggerProps, aY as UploadFile, aZ as UploadFileStatus, a_ as UploadHttpRequest, a$ as UploadItemActions, b0 as UploadProps, b1 as UploadRef, b2 as UploadRejectInfo, b3 as UploadRequestHandle, b4 as UploadRequestOptions, b5 as Watermark, b6 as WatermarkFont, b7 as WatermarkProps, b8 as message, b9 as notification } from './core-BwuvPHYM.js';
3
3
  import * as react from 'react';
4
4
  import { HTMLAttributes, ReactNode, CSSProperties, ElementType, FormHTMLAttributes, InputHTMLAttributes, ChangeEvent, TextareaHTMLAttributes, MouseEvent, Key, PointerEvent, Ref, ReactElement, ButtonHTMLAttributes, RefObject } from 'react';
5
5
  import { C as ControlSize, I as InputPlaceholderMode, a as ControlStatus } from './shared-Bx4B28Wh.js';
@@ -1875,7 +1875,7 @@ interface TableColumn<T = Record<string, unknown>> {
1875
1875
  code?: string;
1876
1876
  /** 名称或字段标识。 */
1877
1877
  name?: string;
1878
- /** 标题内容,可传入文本或 React 节点。 */
1878
+ /** 列头内容,可传入文本或 React 节点;默认单行显示,超宽省略,并通过框架 title 提示展示完整文本。节点无法提取文本时使用 name 或 key。 */
1879
1879
  title?: ReactNode;
1880
1880
  /** 补充说明内容。 */
1881
1881
  description?: ReactNode;
@@ -1897,11 +1897,11 @@ interface TableColumn<T = Record<string, unknown>> {
1897
1897
  fixed?: TableFixed | boolean;
1898
1898
  /** 是否隐藏此项。 */
1899
1899
  hidden?: boolean;
1900
- /** 默认单行显示并省略溢出内容(含 Space 标签组);设为 false 允许多行。 */
1900
+ /** 数据单元格默认单行显示并省略溢出内容(含 Space 标签组);设为 false 允许多行,不影响列头始终单行省略。 */
1901
1901
  ellipsis?: boolean;
1902
- /** 是否使用 Sia Tooltip 显示完整文本;默认 false,不生成浏览器原生 title */
1902
+ /** 数据单元格是否使用 Sia Tooltip 显示完整文本;默认 false,不生成浏览器原生 title。列头始终提供完整标题提示,不受此属性影响。 */
1903
1903
  showTitle?: boolean;
1904
- /** 是否允许该列排序。 */
1904
+ /** 是否允许该列排序;配合排序插件显示按钮,依次切换升序、降序、未排序,当前排序方向以高亮单箭头显示。 */
1905
1905
  sortable?: boolean;
1906
1906
  /** 是否允许该列筛选。 */
1907
1907
  filterable?: boolean;
@@ -1921,7 +1921,7 @@ interface TableColumn<T = Record<string, unknown>> {
1921
1921
  children?: readonly TableColumn<T>[];
1922
1922
  /** 自定义数据单元格内容,接收该列的值、行数据和单元格上下文。 */
1923
1923
  render?: (value: unknown, record: T, index: number, info: TableCellRenderInfo<T>) => ReactNode;
1924
- /** 自定义列头内容。 */
1924
+ /** 自定义列头内容,接收当前列及插件上下文;外层保持单行省略,悬停提示从 title 提取文本,无法提取时回退到 name 或 key。 */
1925
1925
  renderHeader?: (column: TableColumn<T>, context: TablePluginContext<T, any>) => ReactNode;
1926
1926
  /** 数据单元格的 CSS 类名,也可按单元格计算。 */
1927
1927
  cellClassName?: string | ((record: T, index: number) => string);
@@ -2094,7 +2094,12 @@ interface TableProps<T extends Record<string, unknown> = Record<string, unknown>
2094
2094
  height?: number | string;
2095
2095
  /** 表格滚动区域的高度。 */
2096
2096
  tableHeight?: number | string;
2097
- /** 表格密度 */
2097
+ /**
2098
+ * 表格密度;省略时与显式传 medium 相同。small、medium、large 默认行高分别为 28、36、46px。
2099
+ * 单元格使用各尺寸字号和 1.5 倍文字行高,不继承宿主页面的文字行高。
2100
+ * small / medium 数据单元格内的链接按钮高度分别为 20 / 24px,以适配行高;工具栏不受影响,其他自定义内容仍可能撑高单元格。
2101
+ * @defaultValue "medium"
2102
+ */
2098
2103
  size?: TableSize;
2099
2104
  /** 是否显示边框。 */
2100
2105
  bordered?: boolean;
@@ -2110,7 +2115,7 @@ interface TableProps<T extends Record<string, unknown> = Record<string, unknown>
2110
2115
  virtual?: boolean;
2111
2116
  /** 启用虚拟滚动的选项数量 */
2112
2117
  virtualThreshold?: number;
2113
- /** 行高度,虚拟滚动用其计算行位置。 */
2118
+ /** 行高度,单位为 px,虚拟滚动用其计算行位置;默认随 size 取 small 28、medium 36、large 46。自定义内容应适配行高,避免撑高后导致虚拟滚动位置偏差。 */
2114
2119
  rowHeight?: number;
2115
2120
  /** 虚拟列表在可视区域前后额外渲染的数量。 */
2116
2121
  overscan?: number;
@@ -2446,7 +2451,7 @@ interface TableSortApi {
2446
2451
  /** 清空当前值或内容。 */
2447
2452
  clear: () => void;
2448
2453
  }
2449
- /** 创建表格列排序插件。将返回值加入 Table 的 plugins 后生效。 */
2454
+ /** 创建表格列排序插件。将返回值加入 Table 的 plugins 后生效;点击列头按钮依次切换升序、降序和未排序,当前方向以高亮单箭头显示,悬停提示当前状态及下一步操作。 */
2450
2455
  declare function createSortPlugin<T extends Record<string, unknown>>(options?: TableSortPluginOptions): TablePlugin<T, SortState, TableSortApi>;
2451
2456
  /** 列标识到筛选条件的映射。 */
2452
2457
  type TableFilterValues = Readonly<Record<string, string>>;
package/dist/index.js CHANGED
@@ -80,7 +80,7 @@ import {
80
80
  Watermark,
81
81
  message,
82
82
  notification
83
- } from "./chunk-NEYUBLLB.js";
83
+ } from "./chunk-KT7DIBXX.js";
84
84
  import {
85
85
  TextArea
86
86
  } from "./chunk-YQDHCORW.js";
@@ -4686,7 +4686,7 @@ function TableCellContent({ children, ellipsis, title }) {
4686
4686
  }
4687
4687
 
4688
4688
  // src/components/Table/Table.tsx
4689
- import { Fragment as Fragment8, forwardRef as forwardRef5, memo, useCallback as useCallback2, useEffect as useEffect12, useImperativeHandle, useMemo as useMemo9, useRef as useRef15, useState as useState18 } from "react";
4689
+ import { Fragment as Fragment8, forwardRef as forwardRef5, isValidElement as isValidElement4, memo, useCallback as useCallback2, useEffect as useEffect12, useImperativeHandle, useMemo as useMemo9, useRef as useRef15, useState as useState18 } from "react";
4690
4690
 
4691
4691
  // src/components/Table/plugins.tsx
4692
4692
  import { isValidElement as isValidElement3, useEffect as useEffect11, useRef as useRef14, useState as useState17 } from "react";
@@ -5713,36 +5713,26 @@ function createSortPlugin(options = {}) {
5713
5713
  ...column,
5714
5714
  renderHeader: (currentColumn, coreContext) => {
5715
5715
  const info = current(context);
5716
+ const order = info?.field === field ? info.order : null;
5717
+ const sortHint = `${getColumnLabel(currentColumn)}\uFF1A${order === "ascend" ? "\u5F53\u524D\u5347\u5E8F\uFF0C\u70B9\u51FB\u5207\u6362\u4E3A\u964D\u5E8F" : order === "descend" ? "\u5F53\u524D\u964D\u5E8F\uFF0C\u70B9\u51FB\u53D6\u6D88\u6392\u5E8F" : "\u672A\u6392\u5E8F\uFF0C\u70B9\u51FB\u6309\u5347\u5E8F\u6392\u5E8F"}`;
5716
5718
  return /* @__PURE__ */ jsxs20("span", { className: "sia-table__sortable-header", children: [
5717
5719
  /* @__PURE__ */ jsx21("span", { children: previousHeader ? previousHeader(currentColumn, coreContext) : currentColumn.title ?? currentColumn.name ?? currentColumn.key }),
5718
- /* @__PURE__ */ jsxs20(
5720
+ /* @__PURE__ */ jsx21(
5719
5721
  "button",
5720
5722
  {
5721
5723
  type: "button",
5722
5724
  className: "sia-table__sort-button",
5723
- "aria-label": `\u5207\u6362${getColumnLabel(currentColumn)}\u6392\u5E8F`,
5725
+ "data-sort-order": order ?? "none",
5726
+ "aria-label": sortHint,
5727
+ ...withTitleTooltip({ title: sortHint }),
5724
5728
  onClick: (event) => {
5725
5729
  event.stopPropagation();
5726
5730
  cycle(field, context);
5727
5731
  },
5728
- children: [
5729
- /* @__PURE__ */ jsx21(
5730
- Icon,
5731
- {
5732
- name: "chevron-up",
5733
- size: 11,
5734
- className: info?.field === field && info.order === "ascend" ? "is-active" : ""
5735
- }
5736
- ),
5737
- /* @__PURE__ */ jsx21(
5738
- Icon,
5739
- {
5740
- name: "chevron-down",
5741
- size: 11,
5742
- className: info?.field === field && info.order === "descend" ? "is-active" : ""
5743
- }
5744
- )
5745
- ]
5732
+ children: order ? /* @__PURE__ */ jsx21(Icon, { name: order === "ascend" ? "arrow-up" : "arrow-down", size: 18 }) : /* @__PURE__ */ jsxs20(Fragment7, { children: [
5733
+ /* @__PURE__ */ jsx21(Icon, { name: "chevron-up", size: 11 }),
5734
+ /* @__PURE__ */ jsx21(Icon, { name: "chevron-down", size: 11 })
5735
+ ] })
5746
5736
  }
5747
5737
  )
5748
5738
  ] });
@@ -7167,7 +7157,13 @@ var EMPTY_DATA = [];
7167
7157
  var EMPTY_COLUMNS = [];
7168
7158
  var EMPTY_PLUGINS = [];
7169
7159
  var DEFAULT_WIDTH = 160;
7170
- var SIZE_ROW_HEIGHT = { small: 32, medium: 38, large: 46 };
7160
+ var SIZE_ROW_HEIGHT = { small: 28, medium: 36, large: 46 };
7161
+ function getHeaderTitleText(content) {
7162
+ if (typeof content === "string" || typeof content === "number") return String(content);
7163
+ if (Array.isArray(content)) return content.map(getHeaderTitleText).join("");
7164
+ if (isValidElement4(content)) return getHeaderTitleText(content.props.children);
7165
+ return "";
7166
+ }
7171
7167
  function getColumnDepth(columns) {
7172
7168
  let depth = 1;
7173
7169
  for (const column of columns) {
@@ -7689,10 +7685,10 @@ function TableInner(props, ref) {
7689
7685
  return fixed === "left" ? { left: leftOffsets.get(column.key) } : fixed === "right" ? { right: rightOffsets.get(column.key) } : void 0;
7690
7686
  }
7691
7687
  function renderHeaderContent(column, content) {
7692
- if (column.description === void 0 || column.description === null) return content;
7688
+ const title = getHeaderTitleText(column.title ?? column.name) || column.name || column.key;
7693
7689
  return /* @__PURE__ */ jsxs21("span", { className: "sia-table__header-label", children: [
7694
- /* @__PURE__ */ jsx22("span", { className: "sia-table__header-label-content", children: content }),
7695
- /* @__PURE__ */ jsx22(Tooltip, { title: column.description, placement: "top", trigger: ["hover", "focus"], children: /* @__PURE__ */ jsx22("button", { type: "button", className: "sia-table__header-description", "aria-label": `${column.name ?? column.key}\u5217\u8BF4\u660E`, onClick: (event) => event.stopPropagation(), children: /* @__PURE__ */ jsx22(Icon, { name: "info", size: 14 }) }) })
7690
+ /* @__PURE__ */ jsx22("span", { className: "sia-table__header-label-content", ...withTitleTooltip({ title }), children: content }),
7691
+ column.description != null && /* @__PURE__ */ jsx22(Tooltip, { title: column.description, placement: "top", trigger: ["hover", "focus"], children: /* @__PURE__ */ jsx22("button", { type: "button", className: "sia-table__header-description", "aria-label": `${column.name ?? column.key}\u5217\u8BF4\u660E`, onClick: (event) => event.stopPropagation(), children: /* @__PURE__ */ jsx22(Icon, { name: "info", size: 14 }) }) })
7696
7692
  ] });
7697
7693
  }
7698
7694
  function getPluginCellProps(row, column) {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sia.soul/sia-react-ui",
3
- "version": "0.1.28",
3
+ "version": "0.1.30",
4
4
  "description": "Sia Design components and tokens for React",
5
5
  "publishConfig": {
6
6
  "access": "public",