project init & fix ui

2023-01-06 14:24:11 +08:00
parent abc4f65a8e
commit ac9b479805
866 changed files with 39916 additions and 53 deletions
--- a/miniprogram_npm/tdesign-miniprogram/badge/README.en-US.md
+++ b/miniprogram_npm/tdesign-miniprogram/badge/README.en-US.md
@@ -0,0 +1,18 @@
+:: BASE_DOC ::
+
+## API
+### Badge Props
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+color | String | - | \- | N
+content | String | - | \- | N
+count | String / Number / Slot | 0 | \- | N
+custom-style `v0.25.0` | String | - | \- | N
+dot | Boolean | false | \- | N
+external-classes | Array | - | `['t-class', 't-class-content', 't-class-count']` | N
+max-count | Number | 99 | \- | N
+offset | Array | - | Typescript：`Array<string \| number>` | N
+shape | String | circle | options：circle/round/ribbon/bubble | N
+show-zero | Boolean | false | \- | N
+size | String | medium | options：small/medium | N
--- a/miniprogram_npm/tdesign-miniprogram/badge/README.md
+++ b/miniprogram_npm/tdesign-miniprogram/badge/README.md
@@ -0,0 +1,48 @@
+---
+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"
+}
+```
+
+## 代码演示
+
+### 组件类型
+
+{{ base }}
+
+### 组件样式
+
+{{ theme }}
+
+### 组件尺寸
+
+{{ size }}
+
+## API
+### Badge Props
+
+名称 | 类型 | 默认值 | 说明 | 必传
+-- | -- | -- | -- | --
+color | String | - | 颜色 | N
+content | String | - | 徽标内容，示例：`content='自定义内容'`。也可以使用默认插槽定义 | N
+count | String / Number / Slot | 0 | 徽标右上角内容。可以是数字，也可以是文字。如：'new'/3/99+。特殊：值为空表示使用插槽渲染 | N
+custom-style `v0.25.0` | String | - | 自定义组件样式 | 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/round/ribbon/bubble | N
+show-zero | Boolean | false | 当数值为 0 时，是否展示徽标 | N
+size | String | medium | 尺寸。可选项：small/medium | N
--- a/miniprogram_npm/tdesign-miniprogram/badge/badge.d.ts
+++ b/miniprogram_npm/tdesign-miniprogram/badge/badge.d.ts
@@ -0,0 +1,21 @@
+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: {
+        prefix: string;
+        classPrefix: string;
+        value: string;
+        labelID: string;
+        descriptionID: string;
+    };
+    lifetimes: {
+        ready(): void;
+    };
+}
--- a/miniprogram_npm/tdesign-miniprogram/badge/badge.js
+++ b/miniprogram_npm/tdesign-miniprogram/badge/badge.js
@@ -0,0 +1,43 @@
+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';
+import { uniqueFactory } from '../common/utils';
+const { prefix } = config;
+const name = `${prefix}-badge`;
+const getUniqueID = uniqueFactory('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 = {
+            prefix,
+            classPrefix: name,
+            value: '',
+            labelID: '',
+            descriptionID: '',
+        };
+        this.lifetimes = {
+            ready() {
+                const uniqueID = getUniqueID();
+                this.setData({
+                    labelID: `${uniqueID}_label`,
+                    descriptionID: `${uniqueID}_description`,
+                });
+            },
+        };
+    }
+};
+Badge = __decorate([
+    wxComponent()
+], Badge);
+export default Badge;
--- a/miniprogram_npm/tdesign-miniprogram/badge/badge.json
+++ b/miniprogram_npm/tdesign-miniprogram/badge/badge.json
@@ -0,0 +1,5 @@
+{
+  "component": true,
+  "usingComponents": {}
+}
+
--- a/miniprogram_npm/tdesign-miniprogram/badge/badge.wxml
+++ b/miniprogram_npm/tdesign-miniprogram/badge/badge.wxml
@@ -0,0 +1,24 @@
+<wxs src="./badge.wxs" module="this" />
+
+<view
+  style="{{ customStyle }}"
+  class="{{this.getBadgeOuterClass({shape})}} {{prefix}}-class"
+  aria-labelledby="{{labelID}}"
+  aria-describedby="{{descriptionID}}"
+  aria-role="{{ ariaRole || 'option'}}"
+>
+  <view id="{{labelID}}" class="{{classPrefix}}__content {{prefix}}-class-content" aria-hidden="true">
+    <slot wx:if="{{!content}}" class="{{classPrefix}}__content-slot" />
+    <text wx:else class="{{classPrefix}}__content-text">{{content}}</text>
+  </view>
+  <view
+    aria-hidden="true"
+    aria-label="{{ ariaLabel || this.getBadgeAriaLabel({dot, count, maxCount}) }}"
+    id="{{descriptionID}}"
+    wx:if="{{count !== 'slot' && this.isShowBadge({dot,count,showZero})}}"
+    class="{{this.getBadgeInnerClass({dot, size, shape, count})}} {{prefix}}-has-count {{prefix}}-class-count"
+    style="{{this.getBadgeStyles({color, offset})}}"
+    >{{ this.getBadgeValue({dot, count, maxCount}) }}
+  </view>
+  <slot name="count" wx:if="{{count === 'slot' || !count}}" />
+</view>
--- a/miniprogram_npm/tdesign-miniprogram/badge/badge.wxs
+++ b/miniprogram_npm/tdesign-miniprogram/badge/badge.wxs
@@ -0,0 +1,84 @@
+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 += 'right:' + (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;
+};
+
+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' : '',
+    baseClass + '--' + props.size,
+    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;
+  }
+  if (props.count == null) return false;
+  return true;
+};
+
+var getBadgeAriaLabel = function (props) {
+  if (props.dot) {
+    return '有新的消息';
+  }
+  if (isNaN(props.count) || isNaN(props.maxCount)) {
+    var str = '有' + props.count + '通知';
+    return str;
+  }
+  var str1 = '有' + props.maxCount + '+条消息';
+  var str2 = '有' + props.count + '条消息';
+  return parseInt(props.count) > props.maxCount ? str1 : str2;
+};
+
+module.exports.getBadgeValue = getBadgeValue;
+module.exports.getBadgeStyles = getBadgeStyles;
+module.exports.getBadgeOuterClass = getBadgeOuterClass;
+module.exports.getBadgeInnerClass = getBadgeInnerClass;
+module.exports.getBadgeAriaLabel = getBadgeAriaLabel;
+module.exports.isShowBadge = isShowBadge;
--- a/miniprogram_npm/tdesign-miniprogram/badge/badge.wxss
+++ b/miniprogram_npm/tdesign-miniprogram/badge/badge.wxss
@@ -0,0 +1,106 @@
+.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;
+  vertical-align: top;
+}
+.t-badge--basic {
+  display: inline-block;
+  z-index: 100;
+  padding: 0 var(--td-badge-basic-padding, 8rpx);
+  font-size: var(--td-badge-font-size, var(--td-font-size-xs, var(--td-font-size, 20rpx)));
+  color: var(--td-badge-text-color, var(--td-font-white-1, #ffffff));
+  background-color: var(--td-badge-bg-color, var(--td-error-color, var(--td-error-color-6, #e34d59)));
+  text-align: center;
+  height: var(--td-badge-basic-height, 32rpx);
+  line-height: var(--td-badge-basic-height, 32rpx);
+  font-weight: var(--td-badge-font-weight, 600);
+  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 {
+  position: absolute;
+  top: 0;
+  right: 0;
+}
+.t-badge--ribbon {
+  transform: rotate(45deg);
+  border-radius: 0;
+}
+.t-badge--ribbon::before {
+  content: '';
+  position: absolute;
+  width: 0;
+  height: 0;
+  bottom: 0;
+  left: calc(-1 * var(--td-badge-basic-height, 32rpx));
+  border-bottom: var(--td-badge-basic-height, 32rpx) solid var(--td-badge-bg-color, var(--td-error-color, var(--td-error-color-6, #e34d59)));
+  border-left: var(--td-badge-basic-height, 32rpx) solid transparent;
+}
+.t-badge--ribbon::after {
+  content: '';
+  position: absolute;
+  width: 0;
+  height: 0;
+  bottom: 0;
+  right: calc(-1 * var(--td-badge-basic-height, 32rpx));
+  border-bottom: var(--td-badge-basic-height, 32rpx) solid var(--td-badge-bg-color, var(--td-error-color, var(--td-error-color-6, #e34d59)));
+  border-right: var(--td-badge-basic-height, 32rpx) solid transparent;
+}
+.t-badge--bubble {
+  border-radius: var(--td-badge-bubble-border-radius, 20rpx 20rpx 20rpx 1px);
+}
+.t-badge--large {
+  font-size: var(--td-badge-large-font-size, var(--td-font-size-s, 24rpx));
+  height: var(--td-badge-large-height, 36rpx);
+  line-height: var(--td-badge-large-height, 36rpx);
+  padding: 0 var(--td-badge-large-padding, 10rpx);
+}
+.t-badge--large.t-badge--circle {
+  border-radius: calc(var(--td-badge-large-height, 36rpx) / 2);
+}
+.t-badge__content:not(:empty) + .t-has-count {
+  transform: translate(50%, -50%);
+  position: absolute;
+  right: 0;
+  top: 0;
+}
--- a/miniprogram_npm/tdesign-miniprogram/badge/index.d.ts
+++ b/miniprogram_npm/tdesign-miniprogram/badge/index.d.ts
@@ -0,0 +1,3 @@
+export * from './type';
+export * from './props';
+export * from './badge';
--- a/miniprogram_npm/tdesign-miniprogram/badge/index.js
+++ b/miniprogram_npm/tdesign-miniprogram/badge/index.js
@@ -0,0 +1,3 @@
+export * from './type';
+export * from './props';
+export * from './badge';
--- a/miniprogram_npm/tdesign-miniprogram/badge/props.d.ts
+++ b/miniprogram_npm/tdesign-miniprogram/badge/props.d.ts
@@ -0,0 +1,3 @@
+import { TdBadgeProps } from './type';
+declare const props: TdBadgeProps;
+export default props;
--- a/miniprogram_npm/tdesign-miniprogram/badge/props.js
+++ b/miniprogram_npm/tdesign-miniprogram/badge/props.js
@@ -0,0 +1,45 @@
+const props = {
+    color: {
+        type: String,
+        value: '',
+    },
+    content: {
+        type: String,
+        value: '',
+    },
+    count: {
+        type: null,
+        value: 0,
+    },
+    customStyle: {
+        type: String,
+        value: '',
+    },
+    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;
--- a/miniprogram_npm/tdesign-miniprogram/badge/type.d.ts
+++ b/miniprogram_npm/tdesign-miniprogram/badge/type.d.ts
@@ -0,0 +1,46 @@
+export interface TdBadgeProps {
+    color?: {
+        type: StringConstructor;
+        value?: string;
+    };
+    content?: {
+        type: StringConstructor;
+        value?: string;
+    };
+    count?: {
+        type: null;
+        value?: string | number;
+    };
+    customStyle?: {
+        type: StringConstructor;
+        value?: string;
+    };
+    dot?: {
+        type: BooleanConstructor;
+        value?: boolean;
+    };
+    externalClasses?: {
+        type: ArrayConstructor;
+        value?: ['t-class', 't-class-content', 't-class-count'];
+    };
+    maxCount?: {
+        type: NumberConstructor;
+        value?: number;
+    };
+    offset?: {
+        type: ArrayConstructor;
+        value?: Array<string | number>;
+    };
+    shape?: {
+        type: StringConstructor;
+        value?: 'circle' | 'round' | 'ribbon' | 'bubble';
+    };
+    showZero?: {
+        type: BooleanConstructor;
+        value?: boolean;
+    };
+    size?: {
+        type: StringConstructor;
+        value?: 'small' | 'medium';
+    };
+}
--- a/miniprogram_npm/tdesign-miniprogram/badge/type.js
+++ b/miniprogram_npm/tdesign-miniprogram/badge/type.js
@@ -0,0 +1 @@
+export {};