@tdesign/uniapp 0.0.1-alpha.1 → 0.7.1

package/dist/action-sheet/show.js

@@ -0,0 +1,33 @@
+import { getInstance } from '../common/utils';
+
+
+export const ActionSheetTheme = {
+  List: 'list',
+  Grid: 'grid',
+};
+
+
+export const actionSheetTheme = {
+  List: ActionSheetTheme.List,
+  Grid: ActionSheetTheme.Grid,
+} ;
+
+export const show = function (options) {
+  const { context, selector = '#t-action-sheet', ...otherOptions } = { ...options };
+  const instance = getInstance(context, selector);
+  if (instance) {
+    instance.show({
+      ...otherOptions,
+    });
+    return instance;
+  }
+  console.error('未找到组件,请确认 selector && context 是否正确');
+};
+
+export const close = function (options) {
+  const { context, selector = '#t-action-sheet' } = { ...options };
+  const instance = getInstance(context, selector);
+  if (instance) {
+    instance.close();
+  }
+};

package/dist/action-sheet/type.ts

@@ -0,0 +1,93 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+import type { TdPopupProps as PopupProps } from '../popup/type';
+
+export interface TdActionSheetProps {
+  /**
+   * 水平对齐方式
+   * @default center
+   */
+  align?: 'center' | 'left';
+  /**
+   * 设置取消按钮的文本
+   * @default ''
+   */
+  cancelText?: string;
+  /**
+   * 设置每页展示菜单的数量，仅当 type=grid 时有效
+   * @default 8
+   */
+  count?: number;
+  /**
+   * 动作面板描述文字
+   * @default ''
+   */
+  description?: string;
+  /**
+   * 菜单项
+   * @default []
+   */
+  items?: Array<string | ActionSheetItem>;
+  /**
+   * 透传 Popup 组件全部属性
+   * @default {}
+   */
+  popupProps?: PopupProps;
+  /**
+   * 是否显示取消按钮
+   * @default true
+   */
+  showCancel?: boolean;
+  /**
+   * 是否显示遮罩层
+   * @default true
+   */
+  showOverlay?: boolean;
+  /**
+   * 展示类型，列表和表格形式展示
+   * @default list
+   */
+  theme?: 'list' | 'grid';
+  /**
+   * 是否使用了自定义导航栏
+   * @default false
+   */
+  usingCustomNavbar?: boolean;
+  /**
+   * 显示与隐藏
+   * @default false
+   */
+  visible?: boolean;
+  /**
+   * 显示与隐藏，非受控属性
+   * @default false
+   */
+  defaultVisible?: boolean;
+  /**
+   * 点击取消按钮时触发
+   */
+  onCancel?: () => void;
+  /**
+   * 关闭时触发
+   */
+  onClose?: (context: { trigger: ActionSheetTriggerSource }) => void;
+  /**
+   * 选择菜单项时触发
+   */
+  onSelected?: (context: { selected: ActionSheetItem | string; index: number }) => void;
+}
+
+export interface ActionSheetItem {
+  label: string;
+  description?: string;
+  color?: string;
+  disabled?: boolean;
+  icon?: string | object;
+  suffixIcon?: string | object;
+}
+
+export type ActionSheetTriggerSource = 'overlay' | 'command' | 'select';

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

@@ -0,0 +1,102 @@
+:: BASE_DOC ::
+
+## API
+
+### Avatar Props
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+custom-style | Object | - | CSS(Cascading Style Sheets) | N
+alt | String | - | show it when url is not valid | N
+badge-props | Object | {} | Typescript：`BadgeProps`，[Badge API Documents](./badge?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/packages/uniapp-components/avatar/type.ts) | N
+bordered | Boolean | false | \- | N
+hide-on-load-failed | Boolean | false | hide image when loading image failed | N
+icon | String / Object | - | \- | N
+image | String | - | images url | N
+image-props | Object | - | Typescript：`ImageProps`，[Image API Documents](./image?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/packages/uniapp-components/avatar/type.ts) | N
+shape | String | - | shape。options: circle/round。Typescript：`ShapeEnum`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/packages/uniapp-components/common/common.ts) | N
+size | String | - | size | N
+
+### Avatar Events
+
+name | params | description
+-- | -- | --
+error | `(e: Event)` | trigger on image load failed
+
+### Avatar Slots
+
+name | Description
+-- | --
+\- | \-
+
+### Avatar External Classes
+
+className | Description
+-- | --
+t-class | \-
+t-class-alt | \-
+t-class-content | \-
+t-class-icon | \-
+t-class-image | \-
+
+
+### AvatarGroup Props
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+custom-style | Object | - | CSS(Cascading Style Sheets) | N
+cascading | String | 'left-up' | multiple images cascading。options: left-up/right-up。Typescript：`CascadingValue` `type CascadingValue = 'left-up' \| 'right-up'`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/packages/uniapp-components/avatar-group/type.ts) | N
+collapse-avatar | String | - | \- | N
+max | Number | - | \- | N
+shape | String | - | shape。options: circle/round。Typescript：`ShapeEnum`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/packages/uniapp-components/common/common.ts) | N
+size | String | - | size | N
+
+### AvatarGroup Events
+
+name | params | description
+-- | -- | --
+collapsed-item-click | `(e: MouseEvent)` | \-
+
+### AvatarGroup Slots
+
+name | Description
+-- | --
+\- | \-
+collapse-avatar | \-
+
+### AvatarGroup External Classes
+
+className | Description
+-- | --
+t-class | \-
+t-class-content | \-
+t-class-image | \-
+
+### CSS Variables
+
+The component provides the following CSS variables, which can be used to customize styles.
+Name | Default Value | Description 
+-- | -- | --
+--td-avatar-group-init-z-index | @avatar-group-init-zIndex | -
+--td-avatar-group-line-spacing | 4rpx | -
+--td-avatar-group-margin-left-large | -16rpx | -
+--td-avatar-group-margin-left-medium | -16rpx | -
+--td-avatar-group-margin-left-small | -16rpx | -
+--td-avatar-bg-color | @brand-color-light-active | -
+--td-avatar-border-color | #fff | -
+--td-avatar-border-width-large | 6rpx | -
+--td-avatar-border-width-medium | 4rpx | -
+--td-avatar-border-width-small | 2rpx | -
+--td-avatar-circle-border-radius | @radius-circle | -
+--td-avatar-content-color | @brand-color | -
+--td-avatar-icon-large-font-size | 64rpx | -
+--td-avatar-icon-medium-font-size | 48rpx | -
+--td-avatar-icon-small-font-size | 40rpx | -
+--td-avatar-large-width | 128rpx | -
+--td-avatar-margin-left | 0 | -
+--td-avatar-medium-width | 96rpx | -
+--td-avatar-round-border-radius | @radius-default | -
+--td-avatar-small-width | 80rpx | -
+--td-avatar-text-large-font-size | @font-size-xl | -
+--td-avatar-text-medium-font-size | @font-size-m | -
+--td-avatar-text-small-font-size | @font-size-base | -

package/dist/avatar/README.md

@@ -0,0 +1,152 @@
+---
+title: Avatar 头像
+description: 用于展示用户头像信息，除了纯展示也可点击进入个人详情等操作。
+spline: data
+isComponent: true
+---
+
+
+## 引入
+
+可在 `main.ts` 或在需要使用的页面或组件中引入。
+
+```js
+import TAvatar from '@tdesign/uniapp/avatar/avatar.vue';
+import TAvatarGroup from '@tdesign/uniapp/avatar-group/avatar-group.vue';
+```
+
+### 头像类型
+
+图片头像
+
+{{ image-avatar }}
+
+字符头像
+
+{{ character-avatar }}
+
+图标头像
+
+{{ icon-avatar }}
+
+徽标头像
+
+{{ badge-avatar }}
+
+
+### 组合头像
+
+纯展示
+
+{{ exhibition }}
+
+带操作
+
+{{ action }}
+
+### 头像尺寸
+
+头像 large/medium/small 尺寸
+
+{{ size }}
+
+## API
+
+### Avatar Props
+
+名称 | 类型 | 默认值 | 描述 | 必传
+-- | -- | -- | -- | --
+custom-style | Object | - | 自定义样式 | N
+alt | String | - | 头像替换文本，仅当图片加载失败时有效 | N
+badge-props | Object | {} | 头像右上角提示信息，继承 Badge 组件的全部特性。如：小红点，或者数字。TS 类型：`BadgeProps`，[Badge API Documents](./badge?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/packages/uniapp-components/avatar/type.ts) | N
+bordered | Boolean | false | 已废弃。是否显示外边框 | N
+hide-on-load-failed | Boolean | false | 加载失败时隐藏图片 | N
+icon | String / Object | - | 图标。值为字符串表示图标名称，值为 `Object` 类型，表示透传至 `icon` | N
+image | String | - | 图片地址 | N
+image-props | Object | - | 透传至 Image 组件。TS 类型：`ImageProps`，[Image API Documents](./image?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/packages/uniapp-components/avatar/type.ts) | N
+shape | String | - | 形状。优先级高于 AvatarGroup.shape 。Avatar 单独存在时，默认值为 circle。如果父组件 AvatarGroup 存在，默认值便由 AvatarGroup.shape 决定。可选项：circle/round。TS 类型：`ShapeEnum`。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/packages/uniapp-components/common/common.ts) | N
+size | String | - | 尺寸，示例值：small/medium/large/24px/38px 等。优先级高于 AvatarGroup.size 。Avatar 单独存在时，默认值为 medium。如果父组件 AvatarGroup 存在，默认值便由 AvatarGroup.size 决定 | N
+
+### Avatar Events
+
+名称 | 参数 | 描述
+-- | -- | --
+error | `(e: Event)` | 图片加载失败时触发
+
+### Avatar Slots
+
+名称 | 描述
+-- | --
+\- | 默认插槽，自定义内容区域内容
+
+### Avatar External Classes
+
+类名 | 描述
+-- | --
+t-class | 根节点样式类
+t-class-alt | 替代文本样式类
+t-class-content | 内容样式类
+t-class-icon | 图标样式类
+t-class-image | 图片样式类
+
+
+### AvatarGroup Props
+
+名称 | 类型 | 默认值 | 描述 | 必传
+-- | -- | -- | -- | --
+custom-style | Object | - | 自定义样式 | N
+cascading | String | 'left-up' | 图片之间的层叠关系，可选值：左侧图片在上和右侧图片在上。可选项：left-up/right-up。TS 类型：`CascadingValue` `type CascadingValue = 'left-up' \| 'right-up'`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/packages/uniapp-components/avatar-group/type.ts) | N
+collapse-avatar | String | - | 头像数量超出时，会出现一个头像折叠元素。该元素内容可自定义。默认为 `+N`。示例：`+5`，`...`, `更多` | N
+max | Number | - | 能够同时显示的最多头像数量 | N
+shape | String | - | 形状。优先级低于 Avatar.shape。可选项：circle/round。TS 类型：`ShapeEnum`。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/packages/uniapp-components/common/common.ts) | N
+size | String | - | 尺寸，示例值：small/medium/large/24px/38px 等。优先级低于 Avatar.size | N
+
+### AvatarGroup Events
+
+名称 | 参数 | 描述
+-- | -- | --
+collapsed-item-click | `(e: MouseEvent)` | 点击头像折叠元素触发
+
+### AvatarGroup Slots
+
+名称 | 描述
+-- | --
+\- | 默认插槽，自定义内容区域内容
+collapse-avatar | 自定义 `collapse-avatar` 显示内容
+
+### AvatarGroup External Classes
+
+类名 | 描述
+-- | --
+t-class | 根节点样式类
+t-class-content | 内容样式类
+t-class-image | 图片样式类
+
+### CSS Variables
+
+组件提供了下列 CSS 变量，可用于自定义样式。
+名称 | 默认值 | 描述 
+-- | -- | --
+--td-avatar-group-init-z-index | @avatar-group-init-zIndex | -
+--td-avatar-group-line-spacing | 4rpx | -
+--td-avatar-group-margin-left-large | -16rpx | -
+--td-avatar-group-margin-left-medium | -16rpx | -
+--td-avatar-group-margin-left-small | -16rpx | -
+--td-avatar-bg-color | @brand-color-light-active | -
+--td-avatar-border-color | #fff | -
+--td-avatar-border-width-large | 6rpx | -
+--td-avatar-border-width-medium | 4rpx | -
+--td-avatar-border-width-small | 2rpx | -
+--td-avatar-circle-border-radius | @radius-circle | -
+--td-avatar-content-color | @brand-color | -
+--td-avatar-icon-large-font-size | 64rpx | -
+--td-avatar-icon-medium-font-size | 48rpx | -
+--td-avatar-icon-small-font-size | 40rpx | -
+--td-avatar-large-width | 128rpx | -
+--td-avatar-margin-left | 0 | -
+--td-avatar-medium-width | 96rpx | -
+--td-avatar-round-border-radius | @radius-default | -
+--td-avatar-small-width | 80rpx | -
+--td-avatar-text-large-font-size | @font-size-xl | -
+--td-avatar-text-medium-font-size | @font-size-m | -
+--td-avatar-text-small-font-size | @font-size-base | -

package/dist/avatar/avatar.css

@@ -0,0 +1,77 @@
+.t-avatar {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  background-color: var(--td-avatar-bg-color, var(--td-brand-color-light-active, var(--td-primary-color-2, #d9e1ff)));
+  color: var(--td-avatar-content-color, var(--td-brand-color, var(--td-primary-color-7, #0052d9)));
+}
+.t-avatar__wrapper {
+  display: inline-flex;
+  position: relative;
+  vertical-align: top;
+  margin-left: var(--td-avatar-margin-left, 0);
+}
+.t-avatar--large {
+  width: var(--td-avatar-large-width, 128rpx);
+  height: var(--td-avatar-large-width, 128rpx);
+  font-size: var(--td-avatar-text-large-font-size, var(--td-font-size-xl, 40rpx));
+}
+.t-avatar--large .t-avatar__icon {
+  font-size: var(--td-avatar-icon-large-font-size, 64rpx);
+}
+.t-avatar--medium {
+  width: var(--td-avatar-medium-width, 96rpx);
+  height: var(--td-avatar-medium-width, 96rpx);
+  font-size: var(--td-avatar-text-medium-font-size, var(--td-font-size-m, 32rpx));
+}
+.t-avatar--medium .t-avatar__icon {
+  font-size: var(--td-avatar-icon-medium-font-size, 48rpx);
+}
+.t-avatar--small {
+  width: var(--td-avatar-small-width, 80rpx);
+  height: var(--td-avatar-small-width, 80rpx);
+  font-size: var(--td-avatar-text-small-font-size, var(--td-font-size-base, 28rpx));
+}
+.t-avatar--small .t-avatar__icon {
+  font-size: var(--td-avatar-icon-small-font-size, 40rpx);
+}
+.t-avatar .t-image,
+.t-avatar__image {
+  width: 100%;
+  height: 100%;
+}
+.t-avatar--circle {
+  border-radius: var(--td-avatar-circle-border-radius, var(--td-radius-circle, 50%));
+  overflow: hidden;
+}
+.t-avatar--round {
+  border-radius: var(--td-avatar-round-border-radius, var(--td-radius-default, 12rpx));
+  overflow: hidden;
+}
+.t-avatar__text,
+.t-avatar__icon {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.t-avatar__text:empty,
+.t-avatar__icon:empty {
+  width: 0;
+  height: 0;
+}
+.t-avatar--border {
+  border-color: var(--td-avatar-border-color, #fff);
+  border-style: solid;
+}
+.t-avatar--border-small {
+  border-width: var(--td-avatar-border-width-small, 2rpx);
+}
+.t-avatar--border-medium {
+  border-width: var(--td-avatar-border-width-medium, 4rpx);
+}
+.t-avatar--border-large {
+  border-width: var(--td-avatar-border-width-large, 6rpx);
+}

package/dist/avatar/avatar.vue

@@ -0,0 +1,200 @@
+<template>
+  <view
+    :class="[
+      classPrefix + '__wrapper',
+      tClass
+    ]"
+    :style="tools._style([utils.getStyles(isShow), customStyle, innerStyle])"
+  >
+    <t-badge
+      v-if="badgeProps"
+      :color="badgeProps.color || ''"
+      :content="badgeProps.content || ''"
+      :count="badgeProps.count || 0"
+      :dot="badgeProps.dot || false"
+      :max-count="badgeProps.maxCount || 99"
+      :offset="badgeProps.offset || []"
+      :shape="badgeProps.shape || 'circle'"
+      :show-zero="badgeProps.showZero || false"
+      :size="badgeProps.size || 'medium'"
+      :t-class="badgeProps.tClass"
+      :t-class-content="badgeProps.tClassContent"
+      :t-class-count="badgeProps.tClassCount"
+    >
+      <view
+        :class="[
+          utils.getClass(classPrefix, dataSize || 'medium', dataShape, dataBordered),
+          tClassImage
+        ]"
+        :style="utils.getSize(dataSize, windowWidth)"
+        :aria-label="ariaLabel || alt || '头像'"
+        :aria-role="ariaRole || 'img'"
+        :aria-hidden="ariaHidden"
+      >
+        <t-image
+          v-if="image"
+          :t-class="prefix + '-image ' + classPrefix + '__image'"
+          :t-class-load="tClassAlt"
+          :custom-style="imageCustomStyle"
+          style="width: 100%;height: 100%;"
+          :src="image"
+          :mode="(imageProps && imageProps.mode) || 'aspectFill'"
+          :lazy="(imageProps && imageProps.lazy) || false"
+          :loading="(imageProps && imageProps.loading) || 'default'"
+          :shape="(imageProps && imageProps.shape) || 'round'"
+          :webp="(imageProps && imageProps.webp) || false"
+          :error="alt || 'default'"
+          @error="onLoadError"
+        />
+        <block
+          v-else-if="iconName || tools.isNoEmptyObj(iconData)"
+          name="icon"
+        >
+          <t-icon
+            :t-class="classPrefix + '__icon ' + classPrefix + '__icon--' + (iconData.activeIdx == iconData.index ? 'active ' : ' ') + tClassIcon"
+            :prefix="iconData.prefix"
+            :name="iconName || iconData.name"
+            :size="iconData.size"
+            :color="iconData.color"
+            :aria-hidden="!!iconData.ariaHidden"
+            :aria-label="iconData.ariaLabel"
+            :aria-role="iconData.ariaRole"
+            :custom-style="iconCustomStyle"
+            @click="iconData.click || ''"
+          />
+        </block>
+        <view
+          v-else
+          :class="[
+            classPrefix + '__text ',
+            tClassContent
+          ]"
+        >
+          <slot />
+        </view>
+      </view>
+    </t-badge>
+  </view>
+</template>
+<script>
+import TIcon from '../icon/icon';
+import TBadge from '../badge/badge';
+import TImage from '../image/image';
+import { uniComponent } from '../common/src/index';
+import { prefix } from '../common/config';
+import avatarProps from './props';
+import { setIcon, systemInfo } from '../common/utils';
+import tools from '../common/utils.wxs';
+import * as utils from './computed.js';
+import { ChildrenMixin, RELATION_MAP } from '../common/relation';
+
+
+const name = `${prefix}-avatar`;
+
+
+export default uniComponent({
+  name,
+  options: {
+    styleIsolation: 'shared',
+  },
+  externalClasses: [
+    `${prefix}-class`,
+    `${prefix}-class-image`,
+    `${prefix}-class-icon`,
+    `${prefix}-class-alt`,
+    `${prefix}-class-content`,
+  ],
+  mixins: [ChildrenMixin(RELATION_MAP.Avatar)],
+  components: {
+    TIcon,
+    TBadge,
+    TImage,
+  },
+  props: {
+    ...avatarProps,
+  },
+  data() {
+    return {
+      prefix,
+      classPrefix: name,
+      isShow: true,
+      zIndex: 0,
+      windowWidth: systemInfo.windowWidth,
+      utils,
+      tools,
+
+      iconName: '',
+      iconData: {},
+
+      dataShape: this.shape,
+      dataSize: this.size,
+      dataBordered: this.bordered,
+      innerStyle: '',
+    };
+  },
+  computed: {
+    iconCustomStyle() {
+      const fontSize = {
+        small: 'var(--td-avatar-icon-small-font-size, 20px)',
+        medium: 'var(--td-avatar-icon-medium-font-size, 24px)',
+        large: 'var(--td-avatar-icon-large-font-size, 32px)',
+      };
+      if (!fontSize[this.dataSize]) return '';
+      return tools._style([
+        {
+          fontSize: fontSize[this.dataSize],
+        },
+        this.iconData.style || '',
+      ]);
+    },
+    imageCustomStyle() {
+      return tools._style([
+        {
+          width: '100%',
+          height: '100%',
+        },
+        this.imageProps?.style || '',
+      ]);
+    },
+  },
+  watch: {
+    icon: {
+      handler(t) {
+        const obj = setIcon('icon', t, '');
+
+        Object.keys(obj).forEach((key) => {
+          this[key] = obj[key];
+        });
+      },
+      immediate: true,
+    },
+
+  },
+  mounted() {
+
+  },
+  methods: {
+    innerAfterLinked() {
+      this.dataShape = this.shape || this[RELATION_MAP.Avatar]?.shape || 'circle';
+      this.dataSize = this.size || this[RELATION_MAP.Avatar]?.size;
+      this.dataBordered = true;
+    },
+    hide() {
+      this.isShow = false;
+    },
+    onLoadError(e) {
+      if (this.hideOnLoadFailed) {
+        this.isShow = false;
+      }
+      this.$emit('error', e && e.e);
+    },
+    setStyle(val = '') {
+      this.innerStyle = val;
+    },
+  },
+});
+
+</script>
+<style scoped>
+@import './avatar.css';
+</style>

package/dist/avatar/computed.js

@@ -0,0 +1,30 @@
+import { getRegExp } from '../common/runtime/wxs-polyfill';
+
+export function getClass(classPrefix, size, shape, bordered) {
+  const hasPx = (size || '').indexOf('px') > -1;
+  const borderSize = hasPx ? 'medium' : size;
+  const classNames = [
+    classPrefix,
+    classPrefix + (shape === 'round' ? '--round' : '--circle'),
+    bordered ? `${classPrefix}--border ${classPrefix}--border-${borderSize}` : '',
+    hasPx ? '' : `${classPrefix}--${size}`,
+  ];
+  return classNames.join(' ');
+}
+
+export function getSize(size = 'medium', windowWidth) {
+  const res = getRegExp('^([0-9]+)(px|rpx)$').exec(size);
+
+  if (res && res.length >= 3) {
+    let px = res[1];
+    if (res[2] === 'rpx') {
+      px = Math.floor((windowWidth * res[1]) / 750);
+    }
+
+    return `width:${size};height:${size};font-size:${(px / 8) * 3 + 2}px`;
+  }
+}
+
+export function  getStyles(isShow) {
+  return isShow ? '' : 'display: none;';
+}