project init

components/badge/README.md

@@ -0,0 +1,56 @@
+---
+title: Badge 徽标
+description: 用于告知用户，该区域的状态变化或者待处理任务的数量。
+spline: data
+isComponent: true
+---
+
+<span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20lines-100%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20functions-100%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20statements-100%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20branches-100%25-blue" /></span>
+## 引入
+
+全局引入，在 miniprogram 根目录下的`app.json`中配置，局部引入，在需要引入的页面或组件的`index.json`中配置。
+
+```json
+"usingComponents": {
+  "t-badge": "tdesign-miniprogram/badge/badge"
+}
+```
+
+## 代码演示
+
+### 普通徽标
+
+<img src="https://tdesign.gtimg.com/miniprogram/readme/badge-1.png" width="375px" height="50%">
+
+{{ base }}
+
+### 按钮徽标
+
+{{ button }}
+
+### 单行徽标
+
+{{ cell }}
+
+### 标签栏徽标
+
+<img src="https://tdesign.gtimg.com/miniprogram/readme/badge-3.png" width="375px" height="50%">
+
+{{ tab-item }}
+
+## API
+
+### Badge Props
+
+| 名称             | 类型                   | 默认值 | 说明                                                                                                              | 必传     |
+| ---------------- | ---------------------- | ------ | ----------------------------------------------------------------------------------------------------------------- | -------- |
+| color            | String                 | -      | 颜色                                                                                                              | N        |
+| content          | String                 | -      | 徽标内容，示例：`content='自定义内容'`。也可以使用默认插槽定义                                                    | N        |
+| count            | String / Number / Slot | 0      | 徽标右上角内容。可以是数字，也可以是文字。如：'new'/3/99+。特殊：值为空表示使用插槽渲染                           | N        |
+| dot              | Boolean                | false  | 是否为红点                                                                                                        | N        |
+| external-classes | Array                  | -      | 组件类名，分别用于设置外层元素、默认内容、右上角内容等元素类名。`['t-class', 't-class-content', 't-class-count']` | N        |
+| max-count        | Number                 | 99     | 封顶的数字值                                                                                                      | N        |
+| offset           | Array                  | -      | 设置状态点的位置偏移，示例：[-10, 20] 或 ['10em', '8rem']。TS 类型：`Array<string                                 | number>` | N   |
+| shape            | String                 | circle | 形状。可选项：circle/square/round/ribbon                                                                          | N        |
+| show-zero        | Boolean                | false  | 当数值为 0 时，是否展示徽标                                                                                       | N        |
+| size             | String                 | medium | 尺寸。可选项：small/medium                                                                                        | N        |

components/badge/badge.d.ts

@@ -0,0 +1,15 @@
+import { SuperComponent } from '../common/src/index';
+import type { TdBadgeProps } from './type';
+export interface BadgeProps extends TdBadgeProps {
+}
+export default class Badge extends SuperComponent {
+    options: {
+        multipleSlots: boolean;
+    };
+    externalClasses: string[];
+    properties: TdBadgeProps;
+    data: {
+        classPrefix: string;
+        value: string;
+    };
+}

components/badge/badge.js

@@ -0,0 +1,29 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { SuperComponent, wxComponent } from '../common/src/index';
+import config from '../common/config';
+import props from './props';
+const { prefix } = config;
+const name = `${prefix}-badge`;
+let Badge = class Badge extends SuperComponent {
+    constructor() {
+        super(...arguments);
+        this.options = {
+            multipleSlots: true,
+        };
+        this.externalClasses = [`${prefix}-class`, `${prefix}-class-count`, `${prefix}-class-content`];
+        this.properties = props;
+        this.data = {
+            classPrefix: name,
+            value: '',
+        };
+    }
+};
+Badge = __decorate([
+    wxComponent()
+], Badge);
+export default Badge;

components/badge/badge.json

@@ -0,0 +1,5 @@
+{
+  "component": true,
+  "usingComponents": {}
+}
+

components/badge/badge.wxml

@@ -0,0 +1,15 @@
+<wxs src="./badge.wxs" module="this" />
+
+<view class="{{this.getBadgeOuterClass({shape})}} t-class">
+  <view class="{{classPrefix}}__content t-class-content">
+    <slot wx:if="{{!content}}" class="{{classPrefix}}__content-slot" />
+    <text wx:else class="{{classPrefix}}__content-text">{{content}}</text>
+  </view>
+  <view
+    wx:if="{{count !== 'slot' && this.isShowBadge({dot,count,showZero})}}"
+    class="{{this.getBadgeInnerClass({dot, size, shape, count})}} t-has-count t-class-count"
+    style="{{this.getBadgeStyles({color, offset})}}"
+    >{{ this.getBadgeValue({dot, count, maxCount}) }}
+  </view>
+  <slot name="count" wx:if="{{count === 'slot' || !count}}" />
+</view>

components/badge/badge.wxs

@@ -0,0 +1,69 @@
+var getBadgeValue = function (props) {
+  if (props.dot) {
+    return '';
+  }
+  if (isNaN(props.count) || isNaN(props.maxCount)) {
+    return props.count;
+  }
+  return parseInt(props.count) > props.maxCount ? props.maxCount + '+' : props.count;
+};
+
+var 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
+  );
+};
+
+var getBadgeStyles = function (props) {
+  var styleStr = '';
+  if (props.color) {
+    styleStr += 'background:' + props.color + ';';
+  }
+  if (props.offset[0]) {
+    styleStr += 'top:' + (hasUnit(props.offset[0].toString()) ? props.offset[0] : props.offset[0] + 'px') + ';';
+  }
+  if (props.offset[1]) {
+    styleStr += 'right:' + (hasUnit(props.offset[1].toString()) ? props.offset[1] : props.offset[1] + 'px') + ';';
+  }
+  return styleStr;
+};
+
+var getBadgeOuterClass = function (props) {
+  var baseClass = 't-badge';
+  var classNames = [baseClass, props.shape === 'ribbon' ? baseClass + '__ribbon--outer' : ''];
+  return classNames.join(' ');
+};
+
+var getBadgeInnerClass = function (props) {
+  var baseClass = 't-badge';
+  var classNames = [
+    baseClass + '--basic',
+    props.dot ? baseClass + '--dot' : '',
+    props.size === 'small' ? baseClass + '--small' : '',
+    baseClass + '--' + props.shape,
+    !props.dot && props.count ? baseClass + '--count' : '',
+  ];
+  return classNames.join(' ');
+};
+
+var isShowBadge = function (props) {
+  if (props.dot) {
+    return true;
+  }
+  if (!props.showZero && !isNaN(props.count) && parseInt(props.count) === 0) {
+    return false;
+  }
+  return true;
+};
+
+module.exports.getBadgeValue = getBadgeValue;
+module.exports.getBadgeStyles = getBadgeStyles;
+module.exports.getBadgeOuterClass = getBadgeOuterClass;
+module.exports.getBadgeInnerClass = getBadgeInnerClass;
+module.exports.isShowBadge = isShowBadge;

components/badge/badge.wxss

@@ -0,0 +1,97 @@
+.t-float-left {
+  float: left;
+}
+.t-float-right {
+  float: right;
+}
+@keyframes tdesign-fade-out {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+.hotspot-expanded.relative {
+  position: relative;
+}
+.hotspot-expanded::after {
+  content: '';
+  display: block;
+  position: absolute;
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  transform: scale(1.5);
+}
+.t-badge {
+  position: relative;
+  display: inline-block;
+}
+.t-badge--basic {
+  display: inline-block;
+  z-index: 100;
+  font-size: 20rpx;
+  color: #fff;
+  background-color: #e34d59;
+  height: 32rpx;
+  padding: 0 8rpx;
+  text-align: center;
+  line-height: 32rpx;
+  font-weight: normal;
+}
+.t-badge--dot {
+  height: 20rpx;
+  border-radius: 8rpx;
+  min-width: 20rpx;
+  padding: 0;
+}
+.t-badge--count {
+  min-width: 32rpx;
+  white-space: nowrap;
+  box-sizing: border-box;
+}
+.t-badge--small {
+  transform: translate(50%, -50%) scale(0.75);
+}
+.t-badge--circle {
+  border-radius: 32rpx;
+}
+.t-badge--round {
+  border-radius: 8rpx;
+}
+.t-badge__ribbon--outer {
+  position: absolute;
+  top: 0;
+  right: 0;
+}
+.t-badge--ribbon {
+  transform: rotate(45deg);
+}
+.t-badge--ribbon::before {
+  content: '';
+  position: absolute;
+  width: 0;
+  height: 0;
+  bottom: 0;
+  left: -32rpx;
+  border-bottom: 32rpx solid #e34d59;
+  border-left: 32rpx solid transparent;
+}
+.t-badge--ribbon::after {
+  content: '';
+  position: absolute;
+  width: 0;
+  height: 0;
+  bottom: 0;
+  right: -32rpx;
+  border-bottom: 32rpx solid #e34d59;
+  border-right: 32rpx solid transparent;
+}
+.t-badge__content:not(:empty) + .t-has-count {
+  transform: translate(50%, -50%);
+  position: absolute;
+  right: 0;
+  top: 0;
+}

components/badge/index.d.ts

@@ -0,0 +1,3 @@
+export * from './type';
+export * from './props';
+export * from './badge';

components/badge/index.js

@@ -0,0 +1,3 @@
+export * from './type';
+export * from './props';
+export * from './badge';

components/badge/props.d.ts

@@ -0,0 +1,3 @@
+import { TdBadgeProps } from './type';
+declare const props: TdBadgeProps;
+export default props;

components/badge/props.js

@@ -0,0 +1,42 @@
+const props = {
+    color: {
+        type: String,
+        value: '',
+    },
+    content: {
+        type: String,
+        value: '',
+    },
+    count: {
+        type: String,
+        optionalTypes: [Number],
+        value: 0,
+    },
+    dot: {
+        type: Boolean,
+        value: false,
+    },
+    externalClasses: {
+        type: Array,
+    },
+    maxCount: {
+        type: Number,
+        value: 99,
+    },
+    offset: {
+        type: Array,
+    },
+    shape: {
+        type: String,
+        value: 'circle',
+    },
+    showZero: {
+        type: Boolean,
+        value: false,
+    },
+    size: {
+        type: String,
+        value: 'medium',
+    },
+};
+export default props;

components/badge/type.d.ts

@@ -0,0 +1,53 @@
+export interface TdBadgeProps {
+    color?: {
+        type: StringConstructor;
+        value?: string;
+        required?: boolean;
+    };
+    content?: {
+        type: StringConstructor;
+        value?: string;
+        required?: boolean;
+    };
+    count?: {
+        type: StringConstructor;
+        optionalTypes: Array<NumberConstructor>;
+        value?: string | number;
+        required?: boolean;
+    };
+    dot?: {
+        type: BooleanConstructor;
+        value?: boolean;
+        required?: boolean;
+    };
+    externalClasses?: {
+        type: ArrayConstructor;
+        value?: ['t-class', 't-class-content', 't-class-count'];
+        required?: boolean;
+    };
+    maxCount?: {
+        type: NumberConstructor;
+        value?: number;
+        required?: boolean;
+    };
+    offset?: {
+        type: ArrayConstructor;
+        value?: Array<string | number>;
+        required?: boolean;
+    };
+    shape?: {
+        type: StringConstructor;
+        value?: 'circle' | 'square' | 'round' | 'ribbon';
+        required?: boolean;
+    };
+    showZero?: {
+        type: BooleanConstructor;
+        value?: boolean;
+        required?: boolean;
+    };
+    size?: {
+        type: StringConstructor;
+        value?: 'small' | 'medium';
+        required?: boolean;
+    };
+}

components/badge/type.js

@@ -0,0 +1,2 @@
+;
+export {};