@tdesign/uniapp 0.0.1-alpha.1 → 0.7.1

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

@@ -0,0 +1,116 @@
+:: BASE_DOC ::
+
+## API
+
+### Cell Props
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+custom-style | Object | - | CSS(Cascading Style Sheets) | N
+align | String | middle | options: top/middle/bottom | N
+arrow | Boolean / Object | false | \- | N
+bordered | Boolean | true | \- | N
+description | String | - | \- | N
+hover | Boolean | - | \- | N
+image | String | - | \- | N
+jump-type | String | navigateTo | options: switchTab/reLaunch/redirectTo/navigateTo | N
+left-icon | String / Object | - | \- | N
+note | String | - | \- | N
+note-style | String / Object | - | \- | N
+required | Boolean | false | \- | N
+right-icon | String / Object | - | \- | N
+right-icon-style | String / Object | - | \- | N
+title | String | - | \- | N
+title-style | String / Object | - | \- | N
+url | String | - | \- | N
+
+### Cell Events
+
+name | params | description
+-- | -- | --
+click | `(e: MouseEvent)` | \-
+
+### Cell Slots
+
+name | Description
+-- | --
+description | \-
+image | \-
+left-icon | \-
+note | \-
+right-icon | \-
+title | \-
+
+### Cell External Classes
+
+className | Description
+-- | --
+t-class | \-
+t-class-center | \-
+t-class-description | \-
+t-class-hover | \-
+t-class-image | \-
+t-class-left | \-
+t-class-left-icon | \-
+t-class-note | \-
+t-class-right | \-
+t-class-right-icon | \-
+t-class-title | \-
+
+
+### CellGroup Props
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+custom-style | Object | - | CSS(Cascading Style Sheets) | N
+bordered | Boolean | false | \- | N
+theme | String | default | options: default/card | N
+title | String | - | \- | N
+
+### CellGroup Slots
+
+name | Description
+-- | --
+\- | \-
+
+### CellGroup External Classes
+
+className | Description
+-- | --
+t-class | \-
+t-class-title | \-
+
+### CSS Variables
+
+The component provides the following CSS variables, which can be used to customize styles.
+Name | Default Value | Description 
+-- | -- | --
+--td-cell-group-border-color | @component-stroke | -
+--td-cell-group-title-bg-color | @bg-color-secondarycontainer | -
+--td-cell-group-title-color | @text-color-placeholder | -
+--td-cell-group-title-font-size | 28rpx | -
+--td-cell-group-title-line-height | 90rpx | -
+--td-cell-group-title-padding-left | 32rpx | -
+--td-cell-bg-color | @bg-color-container | -
+--td-cell-border-color | @component-stroke | -
+--td-cell-border-left-space | @cell-horizontal-padding | -
+--td-cell-border-right-space | 0 | -
+--td-cell-border-width | 1px | -
+--td-cell-description-color | @text-color-secondary | -
+--td-cell-description-font | @font-body-medium | -
+--td-cell-height | auto | -
+--td-cell-horizontal-padding | 32rpx | -
+--td-cell-hover-color | @bg-color-secondarycontainer | -
+--td-cell-image-height | 96rpx | -
+--td-cell-image-width | 96rpx | -
+--td-cell-left-icon-color | @brand-color | -
+--td-cell-left-icon-size | 48rpx | -
+--td-cell-note-color | @text-color-placeholder | -
+--td-cell-note-font-size | @font-size-m | -
+--td-cell-required-color | @error-color | -
+--td-cell-required-font-size | @font-size-m | -
+--td-cell-right-icon-color | @text-color-placeholder | -
+--td-cell-right-icon-size | 48rpx | -
+--td-cell-title-color | @text-color-primary | -
+--td-cell-title-font | @font-body-large | -
+--td-cell-vertical-padding | 32rpx | -

package/dist/cell/README.md

@@ -0,0 +1,147 @@
+---
+title: Cell 单元格
+description: 用于各个类别行的信息展示。
+spline: data
+isComponent: true
+---
+
+
+## 引入
+
+可在 `main.ts` 或在需要使用的页面或组件中引入。
+
+```js
+import TCell from '@tdesign/uniapp/cell/cell.vue';
+import TCellGroup from '@tdesign/uniapp/cell-group/cell-group.vue';
+```
+
+### 类型
+
+单行单元格
+
+{{ base }}
+
+多行单元格
+
+{{ multiple }}
+
+### 样式
+
+卡片单元格
+
+{{ theme }}
+
+## API
+
+### Cell Props
+
+名称 | 类型 | 默认值 | 描述 | 必传
+-- | -- | -- | -- | --
+custom-style | Object | - | 自定义样式 | N
+align | String | middle | 右侧内容的对齐方式，默认居中对齐。可选项：top/middle/bottom | N
+arrow | Boolean / Object | false | 是否显示右侧箭头 | N
+bordered | Boolean | true | 是否显示下边框 | N
+description | String | - | 下方内容描述 | N
+hover | Boolean | - | 是否开启点击反馈 | N
+image | String | - | 主图 | N
+jump-type | String | navigateTo | 链接跳转类型。可选项：switchTab/reLaunch/redirectTo/navigateTo | N
+left-icon | String / Object | - | 左侧图标，出现在单元格标题的左侧 | N
+note | String | - | 和标题同行的说明文字 | N
+note-style | String / Object | - | 说明文字自定义样式 | N
+required | Boolean | false | 是否显示表单必填星号 | N
+right-icon | String / Object | - | 最右侧图标 | N
+right-icon-style | String / Object | - | 右侧图标自定义样式 | N
+title | String | - | 标题 | N
+title-style | String / Object | - | 标题自定义样式 | N
+url | String | - | 点击后跳转链接地址。如果值为空，则表示不需要跳转 | N
+
+### Cell Events
+
+名称 | 参数 | 描述
+-- | -- | --
+click | `(e: MouseEvent)` | 右侧内容
+
+### Cell Slots
+
+名称 | 描述
+-- | --
+description | 自定义 `description` 显示内容
+image | 自定义 `image` 显示内容
+left-icon | 自定义 `left-icon` 显示内容
+note | 自定义 `note` 显示内容
+right-icon | 自定义 `right-icon` 显示内容
+title | 自定义 `title` 显示内容
+
+### Cell External Classes
+
+类名 | 描述
+-- | --
+t-class | 根节点样式类
+t-class-center | 中间（`title`, `description`）内容样式类
+t-class-description | 下方描述内容样式类
+t-class-hover | 悬停样式类
+t-class-image | 图片样式类
+t-class-left | 左侧内容样式类
+t-class-left-icon | 左侧图标样式类
+t-class-note | 右侧说明文字样式类
+t-class-right | 右侧内容样式类
+t-class-right-icon | 右侧图标样式类
+t-class-title | 标题样式类
+
+
+### CellGroup Props
+
+名称 | 类型 | 默认值 | 描述 | 必传
+-- | -- | -- | -- | --
+custom-style | Object | - | 自定义样式 | N
+bordered | Boolean | false | 是否显示组边框 | N
+theme | String | default | 单元格组风格。可选项：default/card | N
+title | String | - | 单元格组标题 | N
+
+### CellGroup Slots
+
+名称 | 描述
+-- | --
+\- | 默认插槽，自定义内容区域内容
+
+### CellGroup External Classes
+
+类名 | 描述
+-- | --
+t-class | 根节点样式类
+t-class-title | 标题样式类
+
+### CSS Variables
+
+组件提供了下列 CSS 变量，可用于自定义样式。
+名称 | 默认值 | 描述 
+-- | -- | --
+--td-cell-group-border-color | @component-stroke | -
+--td-cell-group-title-bg-color | @bg-color-secondarycontainer | -
+--td-cell-group-title-color | @text-color-placeholder | -
+--td-cell-group-title-font-size | 28rpx | -
+--td-cell-group-title-line-height | 90rpx | -
+--td-cell-group-title-padding-left | 32rpx | -
+--td-cell-bg-color | @bg-color-container | -
+--td-cell-border-color | @component-stroke | -
+--td-cell-border-left-space | @cell-horizontal-padding | -
+--td-cell-border-right-space | 0 | -
+--td-cell-border-width | 1px | -
+--td-cell-description-color | @text-color-secondary | -
+--td-cell-description-font | @font-body-medium | -
+--td-cell-height | auto | -
+--td-cell-horizontal-padding | 32rpx | -
+--td-cell-hover-color | @bg-color-secondarycontainer | -
+--td-cell-image-height | 96rpx | -
+--td-cell-image-width | 96rpx | -
+--td-cell-left-icon-color | @brand-color | -
+--td-cell-left-icon-size | 48rpx | -
+--td-cell-note-color | @text-color-placeholder | -
+--td-cell-note-font-size | @font-size-m | -
+--td-cell-required-color | @error-color | -
+--td-cell-required-font-size | @font-size-m | -
+--td-cell-right-icon-color | @text-color-placeholder | -
+--td-cell-right-icon-size | 48rpx | -
+--td-cell-title-color | @text-color-primary | -
+--td-cell-title-font | @font-body-large | -
+--td-cell-vertical-padding | 32rpx | -

package/dist/cell/cell.css

@@ -0,0 +1,94 @@
+.t-cell {
+  position: relative;
+  display: flex;
+  box-sizing: border-box;
+  width: 100%;
+  padding: var(--td-cell-vertical-padding, 32rpx) var(--td-cell-horizontal-padding, 32rpx);
+  height: var(--td-cell-height, auto);
+  background-color: var(--td-cell-bg-color, var(--td-bg-color-container, var(--td-font-white-1, #ffffff)));
+}
+.t-cell--bordered::after {
+  position: absolute;
+  box-sizing: border-box;
+  content: ' ';
+  pointer-events: none;
+  right: 0;
+  left: 0;
+  bottom: 0;
+  border-bottom: var(--td-cell-border-width, 1px) solid var(--td-cell-border-color, var(--td-component-stroke, var(--td-gray-color-3, #e7e7e7)));
+  transform: scaleY(0.5);
+  transform-origin: bottom;
+  left: var(--td-cell-border-left-space, var(--td-cell-horizontal-padding, 32rpx));
+  right: var(--td-cell-border-right-space, 0);
+}
+.t-cell__description {
+  font: var(--td-cell-description-font, var(--td-font-body-medium, 28rpx / 44rpx var(--td-font-family, PingFang SC, Microsoft YaHei, Arial Regular)));
+  color: var(--td-cell-description-color, var(--td-text-color-secondary, var(--td-font-gray-2, rgba(0, 0, 0, 0.6))));
+}
+.t-cell__description-text {
+  margin-top: calc(var(--td-spacer, 16rpx) / 2);
+}
+.t-cell__note {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  color: var(--td-cell-note-color, var(--td-text-color-placeholder, var(--td-font-gray-3, rgba(0, 0, 0, 0.4))));
+  font-size: var(--td-cell-note-font-size, var(--td-font-size-m, 32rpx));
+}
+.t-cell__title {
+  margin-right: var(--td-spacer-2, 32rpx);
+}
+.t-cell__title,
+.t-cell__note {
+  flex: 1 1 auto;
+}
+.t-cell__title:empty,
+.t-cell__note:empty {
+  display: none;
+}
+.t-cell__title-text {
+  display: flex;
+  font: var(--td-cell-title-font, var(--td-font-body-large, 32rpx / 48rpx var(--td-font-family, PingFang SC, Microsoft YaHei, Arial Regular)));
+  color: var(--td-cell-title-color, var(--td-text-color-primary, var(--td-font-gray-1, rgba(0, 0, 0, 0.9))));
+}
+.t-cell__left,
+.t-cell__right {
+  align-self: stretch;
+}
+.t-cell__left:not(:empty) {
+  margin-right: var(--td-spacer-1, 24rpx);
+}
+.t-cell__left-icon {
+  color: var(--td-cell-left-icon-color, var(--td-brand-color, var(--td-primary-color-7, #0052d9)));
+  font-size: var(--td-cell-left-icon-size, 48rpx);
+}
+.t-cell__left-image {
+  height: var(--td-cell-image-height, 96rpx);
+  width: var(--td-cell-image-width, 96rpx);
+}
+.t-cell__note:not(:empty) + .t-cell__right {
+  margin-left: calc(var(--td-spacer, 16rpx) / 2);
+}
+.t-cell__right {
+  display: flex;
+}
+.t-cell__right-icon {
+  color: var(--td-cell-right-icon-color, var(--td-text-color-placeholder, var(--td-font-gray-3, rgba(0, 0, 0, 0.4))));
+  font-size: var(--td-cell-right-icon-size, 48rpx);
+}
+.t-cell__right--middle {
+  align-items: center;
+}
+.t-cell__right--top {
+  align-items: flex-start;
+}
+.t-cell__right--bottom {
+  align-items: flex-end;
+}
+.t-cell--hover {
+  background-color: var(--td-cell-hover-color, var(--td-bg-color-secondarycontainer, var(--td-gray-color-1, #f3f3f3)));
+}
+.t-cell--required {
+  font-size: var(--td-cell-required-font-size, var(--td-font-size-m, 32rpx));
+  color: var(--td-cell-required-color, var(--td-error-color, var(--td-error-color-6, #d54941)));
+}

package/dist/cell/cell.vue

@@ -0,0 +1,260 @@
+<template>
+  <view
+    :style="tools._style([customStyle])"
+    :class="[
+      tClass,
+      tools.cls(classPrefix, [['bordered', bordered || isLastChild]])
+    ]"
+    :hover-class="hover ? classPrefix + '--hover' : ''"
+    hover-stay-time="70"
+    :aria-role="ariaRole || (arrow ? 'button' : '')"
+    :aria-label="ariaLabel"
+    @click="onClick"
+  >
+    <view :class="classPrefix + '__left ' + tClassLeft">
+      <block
+        v-if="_leftIcon"
+        name="icon"
+      >
+        <t-icon
+          :custom-style="leftIconCustomStyle"
+          :t-class="classPrefix + '__left-icon ' + tClassLeftIcon"
+          :name="_leftIcon.name"
+          :size="_leftIcon.size"
+          :color="_leftIcon.color"
+          :aria-hidden="true"
+          :aria-label="_leftIcon.ariaLabel"
+          :aria-role="_leftIcon.ariaRole"
+          @click="'handleClose' || ''"
+        />
+      </block>
+      <slot name="left-icon" />
+      <t-image
+        v-if="image"
+        shape="round"
+        :t-class="classPrefix + '__left-image ' + tClassImage"
+        :src="image"
+        :custom-style="leftImageCustomStyle"
+      />
+      <slot name="image" />
+    </view>
+    <view :class="classPrefix + '__title ' + tClassCenter">
+      <view
+        :class="[
+          classPrefix + '__title-text ',
+          tClassTitle
+        ]"
+        :style="tools._style(titleStyle)"
+      >
+        <block v-if="title">
+          {{ title }}
+        </block>
+        <slot name="title" />
+        <block v-if="required">
+          <text
+            decode
+            :class="classPrefix + '--required'"
+          >
+            &nbsp;*
+          </text>
+        </block>
+      </view>
+      <view
+        :class="[
+          classPrefix + '__description ',
+          tClassDescription
+        ]"
+      >
+        <view
+          v-if="description"
+          :class="classPrefix + '__description-text'"
+        >
+          {{ description }}
+        </view>
+        <slot name="description" />
+      </view>
+    </view>
+    <view
+      :class="[
+        classPrefix + '__note ',
+        tClassNote
+      ]"
+      :style="tools._style(noteStyle)"
+    >
+      <text v-if="note">
+        {{ note }}
+      </text>
+      <slot name="note" />
+    </view>
+    <view
+      :class="[
+        tools.cls(classPrefix + '__right', [align]),
+        tClassRight
+      ]"
+    >
+      <t-icon
+        v-if="_arrow"
+        :custom-style="rightArrowCustomStyle"
+        :t-class=" classPrefix + '__right-icon ' + tClassRightIcon"
+        :name="_arrow.name || ''"
+        :size="_arrow.size"
+        :color="_arrow.color"
+        :aria-hidden="true"
+        :aria-label="_arrow.ariaLabel"
+        :aria-role="_arrow.ariaRole"
+        @click="'handleClose' || ''"
+      />
+      <block v-else>
+        <block
+          v-if="_rightIcon"
+          name="icon"
+        >
+          <t-icon
+            :custom-style="rightIconCustomStyle"
+            :t-class=" classPrefix + '__right-icon ' + tClassRightIcon"
+            :name="_rightIcon.name"
+            :size="_rightIcon.size"
+            :color="_rightIcon.color || ''"
+            :aria-hidden="true"
+            :aria-label="_rightIcon.ariaLabel"
+            :aria-role="_rightIcon.ariaRole"
+            @click="'handleClose' || ''"
+          />
+        </block>
+        <slot name="right-icon" />
+      </block>
+    </view>
+  </view>
+</template>
+<script>
+import TIcon from '../icon/icon';
+import TImage from '../image/image';
+import { uniComponent } from '../common/src/index';
+import { prefix } from '../common/config';
+import props from './props';
+import { calcIcon } from '../common/utils';
+import tools from '../common/utils.wxs';
+
+import { ChildrenMixin, RELATION_MAP } from '../common/relation';
+
+
+const name = `${prefix}-cell`;
+const COMMON_RIGHT_ICON_STYLE = {
+  color: 'var(--td-cell-right-icon-color, var(--td-text-color-placeholder, var(--td-font-gray-3, rgba(0, 0, 0, .4))))',
+  fontSize: 'var(--td-cell-right-icon-font-size, 24px)',
+};
+
+export default uniComponent({
+  name,
+  options: {
+    styleIsolation: 'shared',
+  },
+  externalClasses: [
+    `${prefix}-class`,
+    `${prefix}-class-title`,
+    `${prefix}-class-description`,
+    `${prefix}-class-note`,
+    `${prefix}-class-hover`,
+    `${prefix}-class-image`,
+    `${prefix}-class-left`,
+    `${prefix}-class-left-icon`,
+    `${prefix}-class-center`,
+    `${prefix}-class-right`,
+    `${prefix}-class-right-icon`,
+  ],
+  mixins: [ChildrenMixin(RELATION_MAP.Cell)],
+  components: {
+    TIcon,
+    TImage,
+  },
+  props: {
+    ...props,
+  },
+  emits: [
+    'click',
+  ],
+  data() {
+    return {
+      prefix,
+      classPrefix: name,
+      _arrow: null,
+      _rightIcon: null,
+      _leftIcon: null,
+      isLastChild: false,
+      tools,
+    };
+  },
+  computed: {
+    rightArrowCustomStyle() {
+      return tools._style([
+        COMMON_RIGHT_ICON_STYLE,
+        this.rightIconStyle || '',
+        this._arrow.style || '',
+      ]);
+    },
+    rightIconCustomStyle() {
+      return tools._style([
+        COMMON_RIGHT_ICON_STYLE,
+        this.rightIconStyle || '',
+        this._rightIcon.style || '',
+      ]);
+    },
+    leftIconCustomStyle() {
+      return tools._style([
+        {
+          color: 'var(--td-cell-left-icon-color, var(--td-brand-color, var(--td-primary-color-7, #0052d9)))',
+          fontSize: 'var(--td-cell-left-icon-font-size, 24px)',
+        },
+        this._leftIcon.style || '',
+      ]);
+    },
+    leftImageCustomStyle() {
+      return tools._style({
+        height: 'var(--td-cell-image-height, 48px)',
+        width: 'var(--td-cell-image-width, 48px)',
+      });
+    },
+  },
+  watch: {
+    leftIcon: {
+      handler(e) {
+        this.setIcon('_leftIcon', e, '');
+      },
+      immediate: true,
+    },
+    rightIcon: {
+      handler(e) {
+        this.setIcon('_rightIcon', e, '');
+      },
+      immediate: true,
+    },
+    arrow: {
+      handler(e) {
+        this.setIcon('_arrow', e, 'chevron-right');
+      },
+      immediate: true,
+    },
+  },
+  methods: {
+    setIcon(e, t, s) {
+      this[e] = calcIcon(t, s);
+    },
+    onClick(e) {
+      this.$emit('click', e);
+      this.jumpLink();
+    },
+    jumpLink(e = 'url', t = 'jumpType') {
+      const s = this[e];
+      const i = this[t];
+      if (s) {
+        uni[i]({
+          url: s,
+        });
+      }
+    },
+  },
+});
+</script>
+<style scoped>
+@import './cell.css';
+</style>

package/dist/cell/props.ts

@@ -0,0 +1,87 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+import type { TdCellProps } from './type';
+export default {
+  /** 右侧内容的对齐方式，默认居中对齐 */
+  align: {
+    type: String,
+    default: 'middle' as TdCellProps['align'],
+    validator(val: TdCellProps['align']): boolean {
+      if (!val) return true;
+      return ['top', 'middle', 'bottom'].includes(val);
+    },
+  },
+  /** 是否显示右侧箭头 */
+  arrow: {
+    type: [Boolean, Object],
+    default: false as TdCellProps['arrow'],
+  },
+  /** 是否显示下边框 */
+  bordered: {
+    type: Boolean,
+    default: true,
+  },
+  /** 下方内容描述 */
+  description: {
+    type: String,
+  },
+  /** 是否开启点击反馈 */
+  hover: Boolean,
+  /** 主图 */
+  image: {
+    type: String,
+  },
+  /** 链接跳转类型 */
+  jumpType: {
+    type: String,
+    default: 'navigateTo' as TdCellProps['jumpType'],
+    validator(val: TdCellProps['jumpType']): boolean {
+      if (!val) return true;
+      return ['switchTab', 'reLaunch', 'redirectTo', 'navigateTo'].includes(val);
+    },
+  },
+  /** 左侧图标，出现在单元格标题的左侧 */
+  leftIcon: {
+    type: [String, Object],
+  },
+  /** 和标题同行的说明文字 */
+  note: {
+    type: String,
+  },
+  /** 说明文字自定义样式 */
+  noteStyle: {
+    type: [String, Object],
+  },
+  /** 是否显示表单必填星号 */
+  required: Boolean,
+  /** 最右侧图标 */
+  rightIcon: {
+    type: [String, Object],
+  },
+  /** 右侧图标自定义样式 */
+  rightIconStyle: {
+    type: [String, Object],
+  },
+  /** 标题 */
+  title: {
+    type: String,
+  },
+  /** 标题自定义样式 */
+  titleStyle: {
+    type: [String, Object],
+  },
+  /** 点击后跳转链接地址。如果值为空，则表示不需要跳转 */
+  url: {
+    type: String,
+    default: '',
+  },
+  /** 右侧内容 */
+  onClick: {
+    type: Function,
+    default: () => ({}),
+  },
+};