@tdesign/uniapp 0.8.0 → 0.9.0

package/dist/table/base-table-props.ts

@@ -0,0 +1,105 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+import type { TdBaseTableProps } from '../table/type';
+export default {
+  /** 是否显示表格边框 */
+  bordered: Boolean,
+  /** 单元格数据为空时呈现的内容 */
+  cellEmptyContent: {
+    type: String,
+  },
+  /** 列配置，泛型 T 指表格数据类型 */
+  columns: {
+    type: Array,
+    default: (): TdBaseTableProps['columns'] => [],
+  },
+  /** 数据源，泛型 T 指表格数据类型 */
+  data: {
+    type: Array,
+    default: (): TdBaseTableProps['data'] => [],
+  },
+  /** 空表格呈现样式，支持全局配置 `GlobalConfigProvider` */
+  empty: {
+    type: String,
+    default: '' as TdBaseTableProps['empty'],
+  },
+  /** 固定行（冻结行），示例：[M, N]，表示冻结表头 M 行和表尾 N 行。M 和 N 值为 0 时，表示不冻结行 */
+  fixedRows: {
+    type: Array,
+  },
+  /** 表尾总结行 */
+  footerSummary: {
+    type: String,
+  },
+  /** 表格高度，超出后会出现滚动条。示例：100,  '30%',  '300'。值为数字类型，会自动加上单位 px。如果不是绝对固定表格高度，建议使用 `maxHeight` */
+  height: {
+    type: [String, Number],
+  },
+  /** 加载中状态。值为 `true` 会显示默认加载中样式，可以通过 Function 和 插槽 自定义加载状态呈现内容和样式。值为 `false` 则会取消加载状态 */
+  loading: {
+    type: [Boolean, null],
+    default: null as TdBaseTableProps['loading'],
+  },
+  /** 透传加载组件全部属性 */
+  loadingProps: {
+    type: Object,
+  },
+  /** 表格最大高度，超出后会出现滚动条。示例：100, '30%', '300'。值为数字类型，会自动加上单位 px */
+  maxHeight: {
+    type: [String, Number],
+  },
+  /** 唯一标识一行数据的字段名，来源于 `data` 中的字段。如果是字段嵌套多层，可以设置形如 `item.a.id` 的方法 */
+  rowKey: {
+    type: String,
+    default: 'id',
+    required: true,
+  },
+  /** 用于自定义合并单元格，泛型 T 指表格数据类型。示例：`({ row, col, rowIndex, colIndex }) => { rowspan: 2, colspan: 3 }` */
+  rowspanAndColspan: {
+    type: Function,
+  },
+  /** 是否显示表头 */
+  showHeader: {
+    type: Boolean,
+    default: true,
+  },
+  /** 是否显示斑马纹 */
+  stripe: Boolean,
+  /** 表格内容的总宽度，注意不是表格可见宽度。主要应用于 `table-layout: auto` 模式下的固定列显示。`tableContentWidth` 内容宽度的值必须大于表格可见宽度 */
+  tableContentWidth: {
+    type: String,
+    default: '',
+  },
+  /** 表格布局方式 */
+  tableLayout: {
+    type: String,
+    default: 'fixed' as TdBaseTableProps['tableLayout'],
+    validator(val: TdBaseTableProps['tableLayout']): boolean {
+      if (!val) return true;
+      return ['auto', 'fixed'].includes(val);
+    },
+  },
+  /** 行内容上下方向对齐 */
+  verticalAlign: {
+    type: String,
+    default: 'middle' as TdBaseTableProps['verticalAlign'],
+    validator(val: TdBaseTableProps['verticalAlign']): boolean {
+      if (!val) return true;
+      return ['top', 'middle', 'bottom'].includes(val);
+    },
+  },
+  /** 单元格点击时触发 */
+  onCellClick: {
+    type: Function,
+    default: () => ({}),
+  },
+  /** 行点击时触发，泛型 T 指表格数据类型 */
+  onRowClick: {
+    type: Function,
+    default: () => ({}),
+  },
+};

package/dist/table/props.ts

@@ -0,0 +1,94 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+import type { TdBaseTableProps } from '../table/type';
+export default {
+  /** 是否显示表格边框 */
+  bordered: Boolean,
+  /** 单元格数据为空时呈现的内容 */
+  cellEmptyContent: {
+    type: String,
+  },
+  /** 列配置，泛型 T 指表格数据类型 */
+  columns: {
+    type: Array,
+    default: (): TdBaseTableProps['columns'] => [],
+  },
+  /** 数据源，泛型 T 指表格数据类型 */
+  data: {
+    type: Array,
+    default: (): TdBaseTableProps['data'] => [],
+  },
+  /** 空表格呈现样式，支持全局配置 `GlobalConfigProvider` */
+  empty: {
+    type: String,
+    default: '' as TdBaseTableProps['empty'],
+  },
+  /** 固定行（冻结行），示例：[M, N]，表示冻结表头 M 行和表尾 N 行。M 和 N 值为 0 时，表示不冻结行 */
+  fixedRows: {
+    type: Array,
+  },
+  /** 表尾总结行 */
+  footerSummary: {
+    type: String,
+  },
+  /** 表格高度，超出后会出现滚动条。示例：100,  '30%',  '300'。值为数字类型，会自动加上单位 px。如果不是绝对固定表格高度，建议使用 `maxHeight` */
+  height: {
+    type: [String, Number],
+  },
+  /** 加载中状态。值为 `true` 会显示默认加载中样式，可以通过 Function 和 插槽 自定义加载状态呈现内容和样式。值为 `false` 则会取消加载状态 */
+  loading: {
+    type: [Boolean, null],
+    default: null as TdBaseTableProps['loading'],
+  },
+  /** 透传加载组件全部属性 */
+  loadingProps: {
+    type: Object,
+  },
+  /** 表格最大高度，超出后会出现滚动条。示例：100, '30%', '300'。值为数字类型，会自动加上单位 px */
+  maxHeight: {
+    type: [String, Number],
+  },
+  /** 唯一标识一行数据的字段名，来源于 `data` 中的字段。如果是字段嵌套多层，可以设置形如 `item.a.id` 的方法 */
+  rowKey: {
+    type: String,
+    default: 'id',
+  },
+  /** 用于自定义合并单元格，泛型 T 指表格数据类型。示例：`({ row, col, rowIndex, colIndex }) => { rowspan: 2, colspan: 3 }` */
+  rowspanAndColspan: {
+    type: Function,
+  },
+  /** 是否显示表头 */
+  showHeader: {
+    type: Boolean,
+    default: true,
+  },
+  /** 是否显示斑马纹 */
+  stripe: Boolean,
+  /** 表格内容的总宽度，注意不是表格可见宽度。主要应用于 `table-layout: auto` 模式下的固定列显示。`tableContentWidth` 内容宽度的值必须大于表格可见宽度 */
+  tableContentWidth: {
+    type: String,
+    default: '',
+  },
+  /** 表格布局方式 */
+  tableLayout: {
+    type: String,
+    default: 'fixed' as TdBaseTableProps['tableLayout'],
+    validator(val: TdBaseTableProps['tableLayout']): boolean {
+      if (!val) return true;
+      return ['auto', 'fixed'].includes(val);
+    },
+  },
+  /** 行内容上下方向对齐 */
+  verticalAlign: {
+    type: String,
+    default: 'middle' as TdBaseTableProps['verticalAlign'],
+    validator(val: TdBaseTableProps['verticalAlign']): boolean {
+      if (!val) return true;
+      return ['top', 'middle', 'bottom'].includes(val);
+    },
+  },
+};

package/dist/table/table.css

@@ -0,0 +1,251 @@
+.t-table {
+  position: relative;
+  width: 100%;
+  font: var(--td-table-font-size, var(--td-font-body-medium, 28rpx / 44rpx var(--td-font-family, PingFang SC, Microsoft YaHei, Arial Regular)));
+  color: var(--td-table-body-text-color, var(--td-text-color-primary, var(--td-font-gray-1, rgba(0, 0, 0, 0.9))));
+  background-color: var(--td-bg-color-container, var(--td-font-white-1, #ffffff));
+  box-sizing: border-box;
+}
+.t-table__content {
+  position: relative;
+  overflow: auto;
+}
+.t-table__content::-webkit-scrollbar,
+.t-table__content ::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+.t-table__content::-webkit-scrollbar-thumb,
+.t-table__content ::-webkit-scrollbar-thumb {
+  background-clip: content-box;
+  background-color: rgba(0, 0, 0, 0.1);
+  border-radius: 11px;
+}
+.t-table__content::-webkit-scrollbar-thumb:vertical:hover,
+.t-table__content::-webkit-scrollbar-thumb:horizontal:hover,
+.t-table__content ::-webkit-scrollbar-thumb:vertical:hover,
+.t-table__content ::-webkit-scrollbar-thumb:horizontal:hover {
+  background-color: rgba(0, 0, 0, 0.3);
+}
+.t-table__table-elm {
+  display: flex;
+  flex-direction: column;
+  min-width: 100%;
+}
+.t-table__header {
+  position: relative;
+  z-index: 1;
+}
+.t-table__header-tr,
+.t-table__tr {
+  display: flex;
+  min-width: 100%;
+}
+.t-table__th,
+.t-table__td {
+  flex: 1 1 0;
+  box-sizing: border-box;
+  overflow: hidden;
+  min-width: 0;
+  border-bottom: 1px solid var(--td-table-border-color, var(--td-component-border, var(--td-gray-color-4, #dcdcdc)));
+}
+.t-table__th {
+  padding: var(--td-table-th-padding, 8px 12px);
+  background-color: var(--td-table-header-bg-color, var(--td-bg-color-container, var(--td-font-white-1, #ffffff)));
+  color: var(--td-table-header-text-color, var(--td-text-color-placeholder, var(--td-font-gray-3, rgba(0, 0, 0, 0.4))));
+  font-weight: normal;
+  text-align: left;
+}
+.t-table__td {
+  padding: var(--td-table-td-padding, 8px 12px);
+  text-align: left;
+}
+.t-table__th-content,
+.t-table__td-content {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.t-table__empty-row {
+  display: flex;
+  width: 100%;
+}
+.t-table__empty {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  padding: 24px 0;
+  background-color: var(--td-bg-color-container, var(--td-font-white-1, #ffffff));
+  color: var(--td-text-color-placeholder, var(--td-font-gray-3, rgba(0, 0, 0, 0.4)));
+}
+.t-table__body {
+  position: relative;
+  background-color: var(--td-bg-color-container, var(--td-font-white-1, #ffffff));
+}
+.t-table__bottom-content {
+  padding: 8px 12px;
+  background-color: var(--td-bg-color-container, var(--td-font-white-1, #ffffff));
+  border-top: 1px solid var(--td-table-border-color, var(--td-component-border, var(--td-gray-color-4, #dcdcdc)));
+}
+.t-table__loading--full {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: var(--td-table-loading-bg-color, rgba(255, 255, 255, 0.55));
+  z-index: 10;
+}
+.t-table .t-align-left {
+  text-align: left;
+}
+.t-table .t-align-center {
+  text-align: center;
+}
+.t-table .t-align-right {
+  text-align: right;
+}
+.t-table.t-vertical-align-top .t-table__td {
+  vertical-align: top;
+}
+.t-table.t-vertical-align-middle .t-table__td {
+  vertical-align: middle;
+}
+.t-table.t-vertical-align-bottom .t-table__td {
+  vertical-align: bottom;
+}
+.t-table--bordered {
+  border: 1px solid var(--td-table-border-color, var(--td-component-border, var(--td-gray-color-4, #dcdcdc)));
+}
+.t-table--bordered .t-table__th,
+.t-table--bordered .t-table__td {
+  border-right: 1px solid var(--td-table-border-color, var(--td-component-border, var(--td-gray-color-4, #dcdcdc)));
+}
+.t-table--bordered .t-table__th:last-child,
+.t-table--bordered .t-table__td:last-child {
+  border-right: none;
+}
+.t-table--bordered .t-table__th {
+  border-bottom: 1px solid var(--td-table-border-color, var(--td-component-border, var(--td-gray-color-4, #dcdcdc)));
+}
+.t-table--striped:not(.t-table--bordered) .t-table__th,
+.t-table--striped:not(.t-table--bordered) .t-table__td {
+  border-bottom: none;
+}
+.t-table--striped .t-table__tr:nth-child(odd) {
+  background-color: var(--td-table-stripe-bg-color, var(--td-bg-color-secondarycontainer, var(--td-gray-color-1, #f3f3f3)));
+}
+.t-table--striped .t-table__tr:nth-child(odd) .t-table__cell--fixed-left,
+.t-table--striped .t-table__tr:nth-child(odd) .t-table__cell--fixed-right {
+  background-color: var(--td-table-stripe-bg-color, var(--td-bg-color-secondarycontainer, var(--td-gray-color-1, #f3f3f3)));
+}
+.t-table--layout-fixed .t-table__table-elm {
+  table-layout: fixed;
+}
+.t-table--layout-auto .t-table__table-elm {
+  table-layout: auto;
+}
+.t-table--rowspan-colspan .t-table__td-last-row {
+  border-bottom: none;
+}
+.t-table--rowspan-colspan .t-table__td-first-col {
+  border-left: none;
+}
+.t-table__header--fixed {
+  position: sticky;
+  top: 0;
+  z-index: 33;
+}
+.t-table__header--fixed .t-table__th {
+  background-color: var(--td-bg-color-secondarycontainer, var(--td-gray-color-1, #f3f3f3));
+}
+.t-table__row--fixed-top,
+.t-table__row--fixed-bottom {
+  background-color: var(--td-bg-color-container, var(--td-font-white-1, #ffffff));
+}
+.t-table__row--fixed-top > .t-table__td,
+.t-table__row--fixed-bottom > .t-table__td {
+  background-color: var(--td-bg-color-container, var(--td-font-white-1, #ffffff));
+}
+.t-table__row--fixed-top > .t-table__cell--fixed-left,
+.t-table__row--fixed-bottom > .t-table__cell--fixed-left,
+.t-table__row--fixed-top > .t-table__cell--fixed-right,
+.t-table__row--fixed-bottom > .t-table__cell--fixed-right {
+  background-color: var(--td-bg-color-container, var(--td-font-white-1, #ffffff));
+}
+.t-table--striped .t-table__row--fixed-top:nth-child(odd) > .t-table__td,
+.t-table--striped .t-table__row--fixed-bottom:nth-child(odd) > .t-table__td {
+  background-color: var(--td-table-stripe-bg-color, var(--td-bg-color-secondarycontainer, var(--td-gray-color-1, #f3f3f3)));
+}
+.t-table--striped .t-table__row--fixed-top:nth-child(even) > .t-table__td,
+.t-table--striped .t-table__row--fixed-bottom:nth-child(even) > .t-table__td {
+  background-color: var(--td-bg-color-container, var(--td-font-white-1, #ffffff));
+}
+.t-table--striped .t-table__row--fixed-top:nth-child(odd) > .t-table__cell--fixed-left,
+.t-table--striped .t-table__row--fixed-bottom:nth-child(odd) > .t-table__cell--fixed-left,
+.t-table--striped .t-table__row--fixed-top:nth-child(odd) > .t-table__cell--fixed-right,
+.t-table--striped .t-table__row--fixed-bottom:nth-child(odd) > .t-table__cell--fixed-right {
+  background-color: var(--td-table-stripe-bg-color, var(--td-bg-color-secondarycontainer, var(--td-gray-color-1, #f3f3f3)));
+}
+.t-table--striped .t-table__row--fixed-top:nth-child(even) > .t-table__cell--fixed-left,
+.t-table--striped .t-table__row--fixed-bottom:nth-child(even) > .t-table__cell--fixed-left,
+.t-table--striped .t-table__row--fixed-top:nth-child(even) > .t-table__cell--fixed-right,
+.t-table--striped .t-table__row--fixed-bottom:nth-child(even) > .t-table__cell--fixed-right {
+  background-color: var(--td-bg-color-container, var(--td-font-white-1, #ffffff));
+}
+.t-table__row--fixed-bottom-first > .t-table__td {
+  border-top: 1px solid var(--td-table-border-color, var(--td-component-border, var(--td-gray-color-4, #dcdcdc)));
+}
+.t-table__row--without-border-bottom > .t-table__td {
+  border-bottom: none;
+}
+.t-table--column-fixed .t-table__cell--fixed-left,
+.t-table--column-fixed .t-table__cell--fixed-right {
+  position: sticky;
+  z-index: 30;
+  background-color: var(--td-bg-color-container, var(--td-font-white-1, #ffffff));
+}
+.t-table--column-fixed .t-table__cell--fixed-right {
+  z-index: 31;
+}
+.t-table--column-fixed .t-table__header--fixed .t-table__cell--fixed-left,
+.t-table--column-fixed .t-table__header--fixed .t-table__cell--fixed-right {
+  background-color: var(--td-bg-color-secondarycontainer, var(--td-gray-color-1, #f3f3f3));
+}
+.t-table--column-fixed .t-table__cell--fixed-right-first {
+  border-left: 2px solid var(--td-table-fixed-cell-border-color, var(--td-component-border, var(--td-gray-color-4, #dcdcdc)));
+}
+.t-table--column-fixed .t-table__cell--fixed-left-last::after,
+.t-table--column-fixed .t-table__cell--fixed-right-first::after {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  content: '';
+  transition: box-shadow 0.3s;
+  pointer-events: none;
+  z-index: -1;
+}
+.t-table--column-fixed .t-table__cell--fixed-left-last::after {
+  right: 0;
+  transform: translateX(100%);
+}
+.t-table--column-fixed .t-table__cell--fixed-right-first::after {
+  left: 0;
+  transform: translateX(-100%);
+}
+.t-table__content--scrollable-to-left .t-table__cell--fixed-left-last::after {
+  border-right: 2px solid var(--td-table-fixed-cell-border-color, var(--td-component-border, var(--td-gray-color-4, #dcdcdc)));
+}
+.t-table__content--scrollable-to-right .t-table__cell--fixed-right-first::after {
+  border-left: 2px solid var(--td-table-fixed-cell-border-color, var(--td-component-border, var(--td-gray-color-4, #dcdcdc)));
+}
+.t-table--bordered .t-table__content--scrollable-to-left .t-table__cell--fixed-left-last::after {
+  border-right: 4px solid var(--td-table-fixed-cell-border-color, var(--td-component-border, var(--td-gray-color-4, #dcdcdc)));
+}
+.t-table--bordered .t-table__content--scrollable-to-right .t-table__cell--fixed-right-first::after {
+  border-left: 4px solid var(--td-table-fixed-cell-border-color, var(--td-component-border, var(--td-gray-color-4, #dcdcdc)));
+}