@tdesign/uniapp 0.8.1 → 0.9.0

package/dist/tab-bar-item/tab-bar-item.vue

@@ -1,10 +1,7 @@
 <template>
   <view
     :style="'' + tools._style([customStyle])"
-    :class="'' + tools.cls(classPrefix, [
-      ['split', split],
-      ['crowded', crowded], shape]
-    ) + ' ' + tClass"
+    :class="'' + tools.cls(classPrefix, [['split', split], ['crowded', crowded], shape]) + ' ' + tClass"
   >
     <view
       :class="'' + tools.cls(classPrefix + '__content', [['checked', isChecked], theme])"
@@ -23,10 +20,12 @@
       >
         <t-badge
           v-if="badgeProps.dot || badgeProps.count"
+          :color="badgeProps.color || ''"
           :count="badgeProps.count || 0"
           :max-count="badgeProps.maxCount || 99"
           :dot="badgeProps.dot || false"
           :content="badgeProps.content || ''"
+          :shape="badgeProps.shape || 'circle'"
           :size="badgeProps.size || 'medium'"
           :visible="badgeProps.visible"
           :offset="badgeProps.offset || [0, 0]"
@@ -86,7 +85,7 @@
       :class="classPrefix + '__spread'"
     >
       <view
-        v-for="(child, index) in (subTabBar || [])"
+        v-for="(child, index) in subTabBar || []"
         :key="index"
         :class="classPrefix + '__spread-item'"
         :hover-class="classPrefix + '__spread-item--active'"
@@ -122,7 +121,6 @@ import { ChildrenMixin, RELATION_MAP } from '../common/relation';
 
 const classPrefix = `${prefix}-tab-bar-item`;
 
-
 export default {
   components: {
     TIcon,

package/dist/table/README.en-US.md

@@ -0,0 +1,72 @@
+:: BASE_DOC ::
+
+## API
+
+### BaseTable Props
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+custom-style | Object | - | CSS(Cascading Style Sheets) | N
+bordered | Boolean | false | show table bordered | N
+cell-empty-content | String | - | \- | N
+columns | Array | [] | table column configs。Typescript: `Array<BaseTableCol<T>>` | N
+data | Array | [] | table data。Typescript: `Array<T>` | N
+empty | String | '' | empty text or empty element | N
+fixed-rows | Array | - | Typescript: `Array<number>` | N
+footer-summary | String | - | footer summary content | N
+height | String / Number | - | table height | N
+loading | Boolean | undefined | loading state table | N
+loading-props | Object | - | Typescript: `Partial<LoadingProps>`，[Loading API Documents](./loading?tab=api)。[see more ts definition](https://github.com/tencent/tdesign-miniprogram/blob/develop/packages/uniapp-components/table/type.ts) | N
+max-height | String / Number | - | table max height | N
+row-key | String | 'id' | required。unique key for each row data | Y
+rowspan-and-colspan | Function | - | rowspan and colspan。Typescript: `TableRowspanAndColspanFunc<T>` `type TableRowspanAndColspanFunc<T extends TableRowData = TableRowData> = (params: BaseTableCellParams<T>) => RowspanColspan` `interface RowspanColspan { colspan?: number; rowspan?: number }`。[see more ts definition](https://github.com/tencent/tdesign-miniprogram/blob/develop/packages/uniapp-components/table/type.ts) | N
+show-header | Boolean | true | show table header | N
+stripe | Boolean | false | show stripe style | N
+table-content-width | String | - | \- | N
+table-layout | String | fixed | table-layout css properties, [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout). set value to be `fixed` on `resizable=true` please。options: auto/fixed | N
+vertical-align | String | middle | vertical align。options: top/middle/bottom | N
+
+### BaseTable Events
+
+name | params | description
+-- | -- | --
+cell-click | `(context: BaseTableCellEventContext<T>)` | trigger on cell clicked。[see more ts definition](https://github.com/tencent/tdesign-miniprogram/blob/develop/packages/uniapp-components/table/type.ts)。<br/>`interface BaseTableCellEventContext<T extends TableRowData = TableRowData> { row: T; col: BaseTableCol<T>; rowIndex: number; colIndex: number; e: MouseEvent }`<br/>
+row-click | `(context: RowEventContext<T>)` | trigger on row click。[see more ts definition](https://github.com/tencent/tdesign-miniprogram/blob/develop/packages/uniapp-components/table/type.ts)。<br/>`interface RowEventContext<T extends TableRowData = TableRowData> { row: T; index: number; e: MouseEvent }`<br/>
+
+### BaseTable Slots
+
+name | Description
+-- | --
+cell-empty-content | \-
+empty | empty text or empty element
+footer-summary | footer summary content
+loading | loading state table
+
+### BaseTableCol
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+align | String | left | align type。options: left/right/center | N
+cell | String / Function | - | use cell to render table cell。Typescript: `string \| ((params: BaseTableCellParams<T>) => string)` `interface BaseTableCellParams<T extends TableRowData = TableRowData> { row: T; rowIndex: number; col: BaseTableCol<T>; colIndex: number }`。[see more ts definition](https://github.com/tencent/tdesign-miniprogram/blob/develop/packages/uniapp-components/table/type.ts) | N
+class-name | String / Object / Array / Function | - | cell classnames。Typescript: `TableColumnClassName<T> \| TableColumnClassName<T>[]` `type TableColumnClassName<T extends TableRowData = TableRowData> = ClassName \| ((context: CellData<T>) => ClassName)` `interface CellData<T extends TableRowData = TableRowData> extends BaseTableCellParams<T> { type: 'th' \| 'td' }`。[see more ts definition](https://github.com/tencent/tdesign-miniprogram/blob/develop/packages/uniapp-components/common/common.ts)。[see more ts definition](https://github.com/tencent/tdesign-miniprogram/blob/develop/packages/uniapp-components/table/type.ts) | N
+col-key | String | - | unique key for column | N
+fixed | String | left | fixed current column to left or right。options: left/right | N
+min-width | String / Number | - | add CSS property `min-width` to HTML Element `<col>`，Browsers with [TablesNG](https://docs.google.com/document/d/16PFD1GtMI9Zgwu0jtPaKZJ75Q2wyZ9EZnVbBacOfiNA/preview)  support `minWidth` | N
+width | String / Number | - | column width | N
+
+### CSS Variables
+
+The component provides the following CSS variables, which can be used to customize styles.
+Name | Default Value | Description 
+-- | -- | --
+--td-table-body-text-color | @text-color-primary | -
+--td-table-border-color | @component-border | -
+--td-table-fixed-cell-border-color | @component-border | -
+--td-table-font-size | @font-body-medium | -
+--td-table-header-bg-color | @bg-color-container | -
+--td-table-header-text-color | @text-color-placeholder | -
+--td-table-loading-bg-color | rgba(255, 255, 255, 0.55) | -
+--td-table-row-height | 41px | -
+--td-table-stripe-bg-color | @bg-color-secondarycontainer | -
+--td-table-td-padding | 8px 12px | -
+--td-table-th-padding | 8px 12px | -

package/dist/table/README.md

@@ -0,0 +1,117 @@
+---
+title: Table 表格
+description: 表格常用于展示同类结构下的多种数据，易于组织、对比和分析等，并可对数据进行搜索、筛选、排序等操作。一般包括表头、数据行和表尾三部分。
+spline: data
+isComponent: true
+toc: false
+---
+
+<div style="background: #ecf2fe; display: flex; align-items: center; line-height: 20px; padding: 14px 24px; border-radius: 3px; color: #555a65">
+  <svg fill="none" viewBox="0 0 16 16" width="16px" height="16px" style="margin-right: 5px">
+    <path fill="#0052d9" d="M8 15A7 7 0 108 1a7 7 0 000 14zM7.4 4h1.2v1.2H7.4V4zm.1 2.5h1V12h-1V6.5z" fillOpacity="0.9"></path>
+  </svg>
+  该组件于 0.9.0 版本上线，请留意版本。
+</div>
+
+## 引入
+
+可在 `main.ts` 或在需要使用的页面或组件中引入。
+
+```js
+import TTable from '@tdesign/uniapp/table/table.vue';
+```
+
+## 代码演示
+
+### 组件类型
+
+#### 基础表格
+
+{{ base }}
+
+#### 横向平铺可滚动表格
+
+{{ scroll }}
+
+#### 带斑马纹表格样式
+
+{{ stripe }}
+
+#### 带边框表格样式
+
+{{ bordered }}
+
+#### 带合并单元格的表格
+
+{{ rowspan-colspan }}
+
+## API
+
+### BaseTable Props
+
+名称 | 类型 | 默认值 | 描述 | 必传
+-- | -- | -- | -- | --
+custom-style | Object | - | 自定义样式 | N
+bordered | Boolean | false | 是否显示表格边框 | N
+cell-empty-content | String | - | 单元格数据为空时呈现的内容 | N
+columns | Array | [] | 列配置，泛型 T 指表格数据类型。TS 类型：`Array<BaseTableCol<T>>` | N
+data | Array | [] | 数据源，泛型 T 指表格数据类型。TS 类型：`Array<T>` | N
+empty | String | '' | 空表格呈现样式，支持全局配置 `GlobalConfigProvider` | N
+fixed-rows | Array | - | 固定行（冻结行），示例：[M, N]，表示冻结表头 M 行和表尾 N 行。M 和 N 值为 0 时，表示不冻结行。TS 类型：`Array<number>` | N
+footer-summary | String | - | 表尾总结行 | N
+height | String / Number | - | 表格高度，超出后会出现滚动条。示例：100,  '30%',  '300'。值为数字类型，会自动加上单位 px。如果不是绝对固定表格高度，建议使用 `maxHeight` | N
+loading | Boolean | undefined | 加载中状态。值为 `true` 会显示默认加载中样式，可以通过 Function 和 插槽 自定义加载状态呈现内容和样式。值为 `false` 则会取消加载状态 | N
+loading-props | Object | - | 透传加载组件全部属性。TS 类型：`Partial<LoadingProps>`，[Loading API Documents](./loading?tab=api)。[详细类型定义](https://github.com/tencent/tdesign-miniprogram/blob/develop/packages/uniapp-components/table/type.ts) | N
+max-height | String / Number | - | 表格最大高度，超出后会出现滚动条。示例：100, '30%', '300'。值为数字类型，会自动加上单位 px | N
+row-key | String | 'id' | 必需。唯一标识一行数据的字段名，来源于 `data` 中的字段。如果是字段嵌套多层，可以设置形如 `item.a.id` 的方法 | Y
+rowspan-and-colspan | Function | - | 用于自定义合并单元格，泛型 T 指表格数据类型。示例：`({ row, col, rowIndex, colIndex }) => { rowspan: 2, colspan: 3 }`。TS 类型：`TableRowspanAndColspanFunc<T>` `type TableRowspanAndColspanFunc<T extends TableRowData = TableRowData> = (params: BaseTableCellParams<T>) => RowspanColspan` `interface RowspanColspan { colspan?: number; rowspan?: number }`。[详细类型定义](https://github.com/tencent/tdesign-miniprogram/blob/develop/packages/uniapp-components/table/type.ts) | N
+show-header | Boolean | true | 是否显示表头 | N
+stripe | Boolean | false | 是否显示斑马纹 | N
+table-content-width | String | - | 表格内容的总宽度，注意不是表格可见宽度。主要应用于 `table-layout: auto` 模式下的固定列显示。`tableContentWidth` 内容宽度的值必须大于表格可见宽度 | N
+table-layout | String | fixed | 表格布局方式。可选项：auto/fixed | N
+vertical-align | String | middle | 行内容上下方向对齐。可选项：top/middle/bottom | N
+
+### BaseTable Events
+
+名称 | 参数 | 描述
+-- | -- | --
+cell-click | `(context: BaseTableCellEventContext<T>)` | 单元格点击时触发。[详细类型定义](https://github.com/tencent/tdesign-miniprogram/blob/develop/packages/uniapp-components/table/type.ts)。<br/>`interface BaseTableCellEventContext<T extends TableRowData = TableRowData> { row: T; col: BaseTableCol<T>; rowIndex: number; colIndex: number; e: MouseEvent }`<br/>
+row-click | `(context: RowEventContext<T>)` | 行点击时触发，泛型 T 指表格数据类型。[详细类型定义](https://github.com/tencent/tdesign-miniprogram/blob/develop/packages/uniapp-components/table/type.ts)。<br/>`interface RowEventContext<T extends TableRowData = TableRowData> { row: T; index: number; e: MouseEvent }`<br/>
+
+### BaseTable Slots
+
+名称 | 描述
+-- | --
+cell-empty-content | 自定义 `cell-empty-content` 显示内容
+empty | 自定义 `empty` 显示内容
+footer-summary | 自定义 `footer-summary` 显示内容
+loading | 自定义 `loading` 显示内容
+
+### BaseTableCol
+
+名称 | 类型 | 默认值 | 描述 | 必传
+-- | -- | -- | -- | --
+align | String | left | 列横向对齐方式。可选项：left/right/center | N
+cell | String / Function | - | 自定义单元格渲染。默认使用 `colKey` 的值作为自定义当前列的插槽名称。<br/>如果 `cell` 值类型为 Function 表示以函数形式渲染单元格。值类型为 string 表示使用插槽渲染，插槽名称为 cell 的值。优先级高于 `render`。泛型 T 指表格数据类型。TS 类型：`string \| ((params: BaseTableCellParams<T>) => string)` `interface BaseTableCellParams<T extends TableRowData = TableRowData> { row: T; rowIndex: number; col: BaseTableCol<T>; colIndex: number }`。[详细类型定义](https://github.com/tencent/tdesign-miniprogram/blob/develop/packages/uniapp-components/table/type.ts) | N
+class-name | String / Object / Array / Function | - | 列类名，值类型是 Function 使用返回值作为列类名；值类型不为 Function 时，值用于整列类名（含表头）。泛型 T 指表格数据类型。TS 类型：`TableColumnClassName<T> \| TableColumnClassName<T>[]` `type TableColumnClassName<T extends TableRowData = TableRowData> = ClassName \| ((context: CellData<T>) => ClassName)` `interface CellData<T extends TableRowData = TableRowData> extends BaseTableCellParams<T> { type: 'th' \| 'td' }`。[通用类型定义](https://github.com/tencent/tdesign-miniprogram/blob/develop/packages/uniapp-components/common/common.ts)。[详细类型定义](https://github.com/tencent/tdesign-miniprogram/blob/develop/packages/uniapp-components/table/type.ts) | N
+col-key | String | - | 渲染列所需字段，值为 `serial-number` 表示当前列为「序号」列 | N
+fixed | String | left | 固定列显示位置。可选项：left/right | N
+min-width | String / Number | - | 透传 CSS 属性 `min-width` 到 `<col>` 元素。⚠️ 仅少部分浏览器支持，如：使用 [TablesNG](https://docs.google.com/document/d/16PFD1GtMI9Zgwu0jtPaKZJ75Q2wyZ9EZnVbBacOfiNA/preview) 渲染的 Chrome 浏览器支持 `minWidth` | N
+width | String / Number | - | 列宽，可以作为最小宽度使用。当列宽总和小于 `table` 元素时，浏览器根据宽度设置情况自动分配宽度；当列宽总和大于 `table` 元素，表现为定宽。可以同时调整 `table` 元素的宽度来达到自己想要的效果 | N
+
+### CSS Variables
+
+组件提供了下列 CSS 变量，可用于自定义样式。
+名称 | 默认值 | 描述 
+-- | -- | --
+--td-table-body-text-color | @text-color-primary | -
+--td-table-border-color | @component-border | -
+--td-table-fixed-cell-border-color | @component-border | -
+--td-table-font-size | @font-body-medium | -
+--td-table-header-bg-color | @bg-color-container | -
+--td-table-header-text-color | @text-color-placeholder | -
+--td-table-loading-bg-color | rgba(255, 255, 255, 0.55) | -
+--td-table-row-height | 41px | -
+--td-table-stripe-bg-color | @bg-color-secondarycontainer | -
+--td-table-td-padding | 8px 12px | -
+--td-table-th-padding | 8px 12px | -

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);
+    },
+  },
+};