@tdesign/uniapp 0.0.1-alpha.1 → 0.7.0

package/dist/back-top/back-top.vue

@@ -0,0 +1,122 @@
+<template>
+  <view
+    v-if="!hidden"
+    :style="tools._style([customStyle])"
+    :class="tClass + ' ' + tools.cls(classPrefix, [['fixed', fixed], theme])"
+    aria-role="button"
+    @click="toTop"
+  >
+    <view
+      :class="classPrefix + '__icon'"
+      aria-hidden
+    >
+      <slot name="icon" />
+      <block
+        v-if="_icon"
+        name="icon"
+      >
+        <t-icon
+          :custom-style="_icon.style || ''"
+          :t-class="tClassIcon"
+          :prefix="_icon.prefix"
+          :name="_icon.name"
+          :size="_icon.size"
+          :color="_icon.color"
+          :aria-hidden="!!_icon.ariaHidden"
+          :aria-label="_icon.ariaLabel"
+          :aria-role="_icon.ariaRole"
+          @click="_icon.click || ''"
+        />
+      </block>
+    </view>
+    <view
+      v-if="!!text"
+      :class="classPrefix + '__text--' + theme + ' ' + tClassText"
+    >
+      {{ text }}
+    </view>
+    <slot />
+  </view>
+</template>
+<script>
+import TIcon from '../icon/icon';
+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}-back-top`;
+
+export default uniComponent({
+  name,
+  options: {
+    styleIsolation: 'shared',
+  },
+  externalClasses: [
+    `${prefix}-class`,
+    `${prefix}-class-icon`,
+    `${prefix}-class-text`,
+  ],
+  mixins: [
+    ChildrenMixin(RELATION_MAP.BackTop),
+  ],
+  components: {
+    TIcon,
+  },
+  props: {
+    ...props,
+  },
+  emits: [
+    'to-top',
+  ],
+  watch: {
+    icon() {
+      this.setIcon();
+    },
+    scrollTop: {
+      handler(value) {
+        const { visibilityHeight } = this;
+        this.hidden = value < visibilityHeight;
+      },
+      immediate: true,
+    },
+  },
+  mounted() {
+    const { icon } = this;
+    this.setIcon(icon);
+  },
+  methods: {
+    setIcon(v) {
+      this._icon = calcIcon(v, 'backtop');
+    },
+
+    toTop() {
+      this.$emit('to-top');
+      if (this[RELATION_MAP.BackTop]) {
+        this[RELATION_MAP.BackTop]?.scrollToTop();
+        this.hidden = true;
+      } else {
+        uni.pageScrollTo({
+          scrollTop: 0,
+          duration: 300,
+        });
+      }
+    },
+  },
+  data() {
+    return {
+      prefix,
+      classPrefix: name,
+      _icon: null,
+      hidden: true,
+      tools,
+    };
+  },
+});
+</script>
+<style scoped>
+@import './back-top.css';
+</style>

package/dist/back-top/props.ts

@@ -0,0 +1,48 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+import type { TdBackTopProps } from './type';
+export default {
+  /** 是否绝对定位固定到屏幕右下方 */
+  fixed: {
+    type: Boolean,
+    default: true,
+  },
+  /** 图标。值为 `false` 表示不显示图标。不传表示使用默认图标 `'backtop'` */
+  icon: {
+    type: [String, Boolean, Object],
+    default: true as TdBackTopProps['icon'],
+  },
+  /** 页面滚动距离 */
+  scrollTop: {
+    type: Number,
+    default: 0,
+  },
+  /** 文案 */
+  text: {
+    type: String,
+    default: '',
+  },
+  /** 预设的样式类型 */
+  theme: {
+    type: String,
+    default: 'round' as TdBackTopProps['theme'],
+    validator(val: TdBackTopProps['theme']): boolean {
+      if (!val) return true;
+      return ['round', 'half-round', 'round-dark', 'half-round-dark'].includes(val);
+    },
+  },
+  /** 滚动高度达到此参数值才出现 */
+  visibilityHeight: {
+    type: Number,
+    default: 200,
+  },
+  /** 点击触发 */
+  onToTop: {
+    type: Function,
+    default: () => ({}),
+  },
+};

package/dist/back-top/type.ts

@@ -0,0 +1,42 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+export interface TdBackTopProps {
+  /**
+   * 是否绝对定位固定到屏幕右下方
+   * @default true
+   */
+  fixed?: boolean;
+  /**
+   * 图标。值为 `false` 表示不显示图标。不传表示使用默认图标 `'backtop'`
+   * @default true
+   */
+  icon?: string | boolean | object;
+  /**
+   * 页面滚动距离
+   * @default 0
+   */
+  scrollTop?: number;
+  /**
+   * 文案
+   * @default ''
+   */
+  text?: string;
+  /**
+   * 预设的样式类型
+   * @default round
+   */
+  theme?: 'round' | 'half-round' | 'round-dark' | 'half-round-dark';
+  /**
+   * 滚动高度达到此参数值才出现
+   * @default 200
+   */
+  visibilityHeight?: number;
+  /**
+   * 点击触发
+   */
+  onToTop?: () => void;
+}

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

@@ -0,0 +1,54 @@
+:: BASE_DOC ::
+
+## API
+
+### Badge Props
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+custom-style | Object | - | CSS(Cascading Style Sheets) | N
+color | String | - | \- | N
+content | String | - | \- | N
+count | String / Number | 0 | \- | N
+dot | Boolean | false | \- | N
+max-count | Number | 99 | \- | N
+offset | Array | - | Typescript: `Array<string \| number>` | N
+shape | String | circle | options: circle/square/bubble/ribbon/ribbon-right/ribbon-left/triangle-right/triangle-left | N
+show-zero | Boolean | false | \- | N
+size | String | medium | options: medium/large | N
+
+### Badge Slots
+
+name | Description
+-- | --
+\- | \-
+count | \-
+
+### Badge External Classes
+
+className | Description
+-- | --
+t-class | \-
+t-class-content | \-
+t-class-count | \-
+
+### CSS Variables
+
+The component provides the following CSS variables, which can be used to customize styles.
+Name | Default Value | Description 
+-- | -- | --
+--td-badge-basic-height | 32rpx | -
+--td-badge-basic-padding | 8rpx | -
+--td-badge-basic-width | 32rpx | -
+--td-badge-bg-color | @error-color | -
+--td-badge-border-radius | 4rpx | -
+--td-badge-bubble-border-radius | 20rpx 20rpx 20rpx 1px | -
+--td-badge-content-text-color | @text-color-primary | -
+--td-badge-dot-size | 16rpx | -
+--td-badge-font | @font-mark-extraSmall | -
+--td-badge-large-font | @font-mark-small | -
+--td-badge-large-height | 40rpx | -
+--td-badge-large-padding | 10rpx | -
+--td-badge-text-color | @text-color-anti | -
+--td-line-height-mark-extraSmall | 32rpx | -
+--td-line-height-mark-small | 40rpx | -

package/dist/badge/README.md

@@ -0,0 +1,85 @@
+---
+title: Badge 徽标
+description: 用于告知用户，该区域的状态变化或者待处理任务的数量。
+spline: data
+isComponent: true
+---
+
+
+## 引入
+
+可在 `main.ts` 或在需要使用的页面或组件中引入。
+
+```js
+import TBadge from '@tdesign/uniapp/badge/badge.vue';
+```
+
+### 组件类型
+
+{{ base }}
+
+### 组件样式
+
+{{ theme }}
+
+### 组件尺寸
+
+{{ size }}
+
+## FAQ
+
+### 如何处理由 ribbon 徽标溢出导致页面出现横向滚动？
+角标溢出问题建议从父容器组件处理。如 <a href="https://github.com/Tencent/tdesign-miniprogram/issues/3063" title="如 #3063 " target="_blank" rel="noopener noreferrer"> #3063 </a>，可以给父容器 `cell` 组件添加 `overflow: hidden`，处理溢出造成页面出现横向滚动的问题。
+
+## API
+
+### Badge Props
+
+名称 | 类型 | 默认值 | 描述 | 必传
+-- | -- | -- | -- | --
+custom-style | Object | - | 自定义样式 | N
+color | String | - | 颜色 | N
+content | String | - | 徽标内容，示例：`content='自定义内容'`。也可以使用默认插槽定义 | N
+count | String / Number | 0 | 徽标右上角内容。可以是数字，也可以是文字。如：'new'/3/99+。特殊：值为空表示使用插槽渲染 | N
+dot | Boolean | false | 是否为红点 | N
+max-count | Number | 99 | 封顶的数字值 | N
+offset | Array | - | 设置状态点的位置偏移，示例：[-10, 20] 或 ['10em', '8rem']。TS 类型：`Array<string \| number>` | N
+shape | String | circle | 徽标形状，其中 ribbon 和 ribbon-right 等效。可选项：circle/square/bubble/ribbon/ribbon-right/ribbon-left/triangle-right/triangle-left | N
+show-zero | Boolean | false | 当数值为 0 时，是否展示徽标 | N
+size | String | medium | 尺寸。可选项：medium/large | N
+
+### Badge Slots
+
+名称 | 描述
+-- | --
+\- | 默认插槽，自定义内容区域内容
+count | 徽标右上角内容
+
+### Badge External Classes
+
+类名 | 描述
+-- | --
+t-class | 根节点样式类
+t-class-content | 内容样式类
+t-class-count | 计数样式类
+
+### CSS Variables
+
+组件提供了下列 CSS 变量，可用于自定义样式。
+名称 | 默认值 | 描述 
+-- | -- | --
+--td-badge-basic-height | 32rpx | -
+--td-badge-basic-padding | 8rpx | -
+--td-badge-basic-width | 32rpx | -
+--td-badge-bg-color | @error-color | -
+--td-badge-border-radius | 4rpx | -
+--td-badge-bubble-border-radius | 20rpx 20rpx 20rpx 1px | -
+--td-badge-content-text-color | @text-color-primary | -
+--td-badge-dot-size | 16rpx | -
+--td-badge-font | @font-mark-extraSmall | -
+--td-badge-large-font | @font-mark-small | -
+--td-badge-large-height | 40rpx | -
+--td-badge-large-padding | 10rpx | -
+--td-badge-text-color | @text-color-anti | -
+--td-line-height-mark-extraSmall | 32rpx | -
+--td-line-height-mark-small | 40rpx | -

package/dist/badge/badge.css

@@ -0,0 +1,140 @@
+.t-badge {
+  position: relative;
+  display: inline-flex;
+  align-items: start;
+}
+.t-badge--basic {
+  z-index: 100;
+  padding: 0 var(--td-badge-basic-padding, 8rpx);
+  font: var(--td-badge-font, var(--td-font-mark-extraSmall, 600 20rpx / 32rpx var(--td-font-family, PingFang SC, Microsoft YaHei, Arial Regular)));
+  color: var(--td-badge-text-color, var(--td-text-color-anti, var(--td-font-white-1, #ffffff)));
+  background-color: var(--td-badge-bg-color, var(--td-error-color, var(--td-error-color-6, #d54941)));
+  text-align: center;
+  height: var(--td-badge-basic-height, 32rpx);
+  border-radius: var(--td-badge-border-radius, 4rpx);
+}
+.t-badge--dot {
+  height: var(--td-badge-dot-size, 16rpx);
+  border-radius: 50%;
+  min-width: var(--td-badge-dot-size, 16rpx);
+  padding: 0;
+}
+.t-badge--count {
+  min-width: var(--td-badge-basic-width, 32rpx);
+  white-space: nowrap;
+  box-sizing: border-box;
+}
+.t-badge--circle {
+  border-radius: calc(var(--td-badge-basic-height, 32rpx) / 2);
+}
+.t-badge__ribbon-outer,
+.t-badge__ribbon-right-outer,
+.t-badge__triangle-right-outer,
+.t-badge__ribbon-left-outer,
+.t-badge__triangle-left-outer {
+  position: absolute;
+  top: 0;
+}
+.t-badge__ribbon-outer,
+.t-badge__ribbon-right-outer,
+.t-badge__triangle-right-outer {
+  right: 0;
+}
+.t-badge__ribbon-left-outer,
+.t-badge__triangle-left-outer {
+  left: 0;
+}
+.t-badge--bubble {
+  border-radius: var(--td-badge-bubble-border-radius, 20rpx 20rpx 20rpx 1px);
+}
+.t-badge--ribbon,
+.t-badge--ribbon-right,
+.t-badge--ribbon-left,
+.t-badge--triangle-left,
+.t-badge--triangle-right {
+  width: calc(var(--td-badge-basic-height, 32rpx) * 2);
+  height: calc(var(--td-badge-basic-height, 32rpx) * 2);
+  border-radius: 0;
+  padding: 0;
+  position: absolute;
+  top: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+}
+.t-badge--ribbon,
+.t-badge--ribbon-right {
+  background: linear-gradient(45deg, transparent 50%, var(--td-badge-bg-color, var(--td-error-color, var(--td-error-color-6, #d54941))) 50%, var(--td-badge-bg-color, var(--td-error-color, var(--td-error-color-6, #d54941))) 85%, transparent 85%);
+}
+.t-badge--triangle-right {
+  background: linear-gradient(45deg, transparent 50%, var(--td-badge-bg-color, var(--td-error-color, var(--td-error-color-6, #d54941))) 50%);
+}
+.t-badge--ribbon,
+.t-badge--ribbon-right,
+.t-badge--triangle-right {
+  right: 0;
+}
+.t-badge--ribbon .t-badge__count,
+.t-badge--ribbon-right .t-badge__count,
+.t-badge--triangle-right .t-badge__count {
+  transform: rotate(45deg) translateY(calc(-1 * var(--td-line-height-mark-extraSmall, 32rpx) / 2 + 1rpx));
+}
+.t-badge--ribbon-left {
+  background: linear-gradient(-45deg, transparent 50%, var(--td-badge-bg-color, var(--td-error-color, var(--td-error-color-6, #d54941))) 50%, var(--td-badge-bg-color, var(--td-error-color, var(--td-error-color-6, #d54941))) 85%, transparent 85%);
+}
+.t-badge--triangle-left {
+  background: linear-gradient(-45deg, transparent 50%, var(--td-badge-bg-color, var(--td-error-color, var(--td-error-color-6, #d54941))) 50%);
+}
+.t-badge--ribbon-left,
+.t-badge--triangle-left {
+  left: 0;
+}
+.t-badge--ribbon-left .t-badge__count,
+.t-badge--triangle-left .t-badge__count {
+  transform: rotate(-45deg) translateY(calc(-1 * var(--td-line-height-mark-extraSmall, 32rpx) / 2 + 1rpx));
+}
+.t-badge--large {
+  font: var(--td-badge-large-font, var(--td-font-mark-small, 600 24rpx / 40rpx var(--td-font-family, PingFang SC, Microsoft YaHei, Arial Regular)));
+  height: var(--td-badge-large-height, 40rpx);
+  min-width: var(--td-badge-large-height, 40rpx);
+  padding: 0 var(--td-badge-large-padding, 10rpx);
+}
+.t-badge--large.t-badge--circle {
+  border-radius: calc(var(--td-badge-large-height, 40rpx) / 2);
+}
+.t-badge--large.t-badge--ribbon,
+.t-badge--large.t-badge--ribbon-right,
+.t-badge--large.t-badge--ribbon-left,
+.t-badge--large.t-badge--triangle-right,
+.t-badge--large.t-badge--triangle-left {
+  width: calc(var(--td-badge-large-height, 40rpx) * 2);
+  height: calc(var(--td-badge-large-height, 40rpx) * 2);
+  padding: 0;
+}
+.t-badge--large.t-badge--ribbon .t-badge__count,
+.t-badge--large.t-badge--ribbon-right .t-badge__count,
+.t-badge--large.t-badge--triangle-right .t-badge__count {
+  transform: rotate(45deg) translateY(calc(-1 * var(--td-line-height-mark-small, 40rpx) / 2 + 3rpx));
+}
+.t-badge--large.t-badge--ribbon-left .t-badge__count,
+.t-badge--large.t-badge--triangle-left .t-badge__count {
+  transform: rotate(-45deg) translateY(calc(-1 * var(--td-line-height-mark-small, 40rpx) / 2 + 3rpx));
+}
+.t-badge__content:not(:empty) + .t-badge--bubble.t-has-count,
+.t-badge__content:not(:empty) + .t-badge--circle.t-has-count,
+.t-badge__content:not(:empty) + .t-badge--square.t-has-count {
+  transform-origin: center center;
+  transform: translate(-50%, -50%);
+  position: absolute;
+  top: 0;
+  left: 100%;
+}
+.t-badge__content-text {
+  display: block;
+  font: var(--td-font-body-large, 32rpx / 48rpx var(--td-font-family, PingFang SC, Microsoft YaHei, Arial Regular));
+  color: var(--td-badge-content-text-color, var(--td-text-color-primary, var(--td-font-gray-1, rgba(0, 0, 0, 0.9))));
+}
+.t-badge__count:empty {
+  display: none;
+}

package/dist/badge/badge.vue

@@ -0,0 +1,134 @@
+<template>
+  <view
+    :style="tools._style([customStyle])"
+    :class="classPrefix + ' ' + (useOuterClass ? classPrefix + '__' + shape + '-outer' : '') + tClass"
+    :aria-labelledby="labelID"
+    :aria-describedby="descriptionID"
+    :aria-role="ariaRole || 'option'"
+  >
+    <view
+      :id="labelID"
+      :class="tools.cls(classPrefix + '__content', [['empty', !content && !hasChild]]) + ' ' + tClassContent"
+      :aria-hidden="true"
+    >
+      <!-- #ifdef H5 -->
+
+      <slot
+        v-if="!content"
+        :class="classPrefix + '__content-slot'"
+      />
+      <!-- #endif -->
+
+      <!-- 小程序下在 slot 下加 :class 属性，会导致渲染失败 -->
+      <!-- #ifndef H5 -->
+      <slot
+        v-if="!content"
+      />
+      <!-- #endif -->
+
+      <text
+        v-else
+        :class="classPrefix + '__content-text'"
+      >
+        {{ content }}
+      </text>
+    </view>
+    <view
+      v-if="isShowBadge({ dot, count, showZero }) || count === null"
+      :id="descriptionID"
+      :aria-hidden="true"
+      :aria-label="ariaLabel || tools.getBadgeAriaLabel({ dot, count, maxCount })"
+      :class="[
+        getBadgeInnerClass({ classPrefix, dot, size, shape, count }) + ' ' + prefix + '-has-count ',
+        tClassCount
+      ]"
+      :style="tools._style([getBadgeStyles({ color, offset })])"
+    >
+      <view :class="classPrefix + '__count'">
+        <template v-if="isShowBadge({ dot, count, showZero })">
+          {{ getBadgeValue({ dot, count, maxCount }) }}
+        </template>
+        <slot
+          else
+          name="count"
+        />
+      </view>
+    </view>
+  </view>
+</template>
+<script>
+import { uniComponent } from '../common/src/index';
+import { prefix } from '../common/config';
+import props from './props';
+import { uniqueFactory, getRect } from '../common/utils';
+import tools from '../common/utils.wxs';
+
+import {
+  getBadgeValue,
+  getBadgeStyles,
+  getBadgeInnerClass,
+  isShowBadge,
+} from './computed.js';
+
+
+const name = `${prefix}-badge`;
+const getUniqueID = uniqueFactory('badge');
+
+
+export default uniComponent({
+  name,
+  options: {
+    styleIsolation: 'shared',
+  },
+  externalClasses: [
+    `${prefix}-class`,
+    `${prefix}-class-count`,
+    `${prefix}-class-content`,
+  ],
+  props: {
+    ...props,
+  },
+  data() {
+    return {
+      prefix,
+      classPrefix: name,
+      value: '',
+      labelID: '',
+      descriptionID: '',
+      tools,
+      useOuterClass: false,
+    };
+  },
+  computed: {
+    hasChild() {
+      return !!this.$slots?.default;
+    },
+  },
+  mounted() {
+    const e = getUniqueID();
+    this.labelID = `${e}_label`;
+    this.descriptionID = `${e}_description`;
+    this.checkForActualContent();
+  },
+  methods: {
+    getBadgeValue,
+    getBadgeStyles,
+    getBadgeInnerClass,
+    isShowBadge,
+    checkForActualContent() {
+      const target = ['ribbon', 'ribbon-right', 'ribbon-left', 'triangle-right', 'triangle-left'];
+      if (this.content || !target.includes(this.shape)) {
+        this.useOuterClass = false;
+        return;
+      }
+      return getRect(this, `.${name}__content`).then((rect) => {
+        const hasSlotContent = rect.width > 0 || rect.height > 0;
+        this.useOuterClass = !hasSlotContent;
+      });
+    },
+  },
+});
+</script>
+<style scoped>
+@import './badge.css';
+</style>

package/dist/badge/computed.js

@@ -0,0 +1,63 @@
+export const getBadgeValue = function (props) {
+  if (props.dot) {
+    return '';
+  }
+  // eslint-disable-next-line no-restricted-globals
+  if (isNaN(props.count) || isNaN(props.maxCount)) {
+    return props.count;
+  }
+  return parseInt(props.count, 10) > props.maxCount ? `${props.maxCount}+` : props.count;
+};
+
+export const hasUnit = function (unit) {
+  return (
+    unit.indexOf('px') > 0
+    || unit.indexOf('rpx') > 0
+    || unit.indexOf('em') > 0
+    || unit.indexOf('rem') > 0
+    || unit.indexOf('%') > 0
+    || unit.indexOf('vh') > 0
+    || unit.indexOf('vm') > 0
+  );
+};
+
+export const getBadgeStyles = function (props) {
+  let styleStr = '';
+  if (props.color) {
+    styleStr += `background:${props.color};`;
+  }
+  if (props.offset?.[0]) {
+    styleStr
+      += `left: calc(100% + ${hasUnit(props.offset[0].toString()) ? props.offset[0] : `${props.offset[0]}px`});`;
+  }
+  if (props.offset?.[1]) {
+    styleStr += `top:${hasUnit(props.offset[1].toString()) ? props.offset[1] : `${props.offset[1]}px`};`;
+  }
+  return styleStr;
+};
+
+
+export const getBadgeInnerClass = function (props) {
+  const baseClass = props.classPrefix;
+  const classNames = [
+    `${baseClass}--basic`,
+    props.dot ? `${baseClass}--dot` : '',
+    `${baseClass}--${props.size}`,
+    `${baseClass}--${props.shape}`,
+    !props.dot ? `${baseClass}--count` : '',
+  ];
+  return classNames.join(' ');
+};
+
+export const isShowBadge = function (props) {
+  if (props.dot) {
+    return true;
+  }
+  // eslint-disable-next-line no-restricted-globals
+  if (!props.showZero && !isNaN(props.count) && parseInt(props.count, 10) === 0) {
+    return false;
+  }
+  if (props.count == null) return false;
+  return true;
+};
+