project init & fix ui

miniprogram_npm/tdesign-miniprogram/rate/README.en-US.md

@@ -0,0 +1,27 @@
+:: BASE_DOC ::
+
+## API
+### Rate Props
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+allow-half | Boolean | false | \- | N
+color | String / Array | '#ED7B2F' | `0.30.0`。Typescript：`string \| Array<string>` | N
+count | Number | 5 | \- | N
+custom-style | String | - | `0.25.0` | N
+disabled | Boolean | - | \- | N
+external-classes | Array | - | `['t-class', 't-class-icon', 't-class-text']` | N
+gap | String / Number | 8 | \- | N
+icon | String / Array | - | Typescript：`string \| string[]` | N
+show-text | Boolean | false | \- | N
+size | String | 24px | \- | N
+texts | Array | [] | Typescript：`Array<string>` | N
+value | Number | 0 | \- | N
+default-value | Number | undefined | uncontrolled property | N
+variant | String | outline | options：outline/filled | N
+
+### Rate Events
+
+name | params | description
+-- | -- | --
+change | `(value: number)` | \-

miniprogram_npm/tdesign-miniprogram/rate/README.md

@@ -0,0 +1,92 @@
+---
+title: Rate 评分
+description: 用于对某行为/事物进行打分。
+spline: form
+isComponent: true
+---
+
+<span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20lines-94%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-94%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20branches-50%25-red" /></span>
+## 引入
+
+全局引入，在 miniprogram 根目录下的`app.json`中配置，局部引入，在需要引入的页面或组件的`index.json`中配置。
+
+```json
+{
+  "usingComponents": {
+    "t-rate": "tdesign-miniprogram/rate/rate"
+  }
+}
+```
+
+## 代码演示
+
+### 组件类型
+
+实心评分
+
+{{ base }}
+
+自定义评分
+
+{{ custom }}
+
+自定义评分数量
+
+{{ count }}
+
+带描述评分
+
+{{ show-text }}
+
+### 组件状态
+
+交互方式：点击
+
+{{ action }}
+
+### 组件样式
+
+评分大小
+
+{{ size }}
+
+禁用评分
+
+{{ disabled }}
+
+设置评分颜色
+
+{{ color }}
+
+### 特殊样式
+
+竖向带描述评分
+
+{{ special }}
+
+
+## API
+### Rate Props
+
+名称 | 类型 | 默认值 | 说明 | 必传
+-- | -- | -- | -- | --
+allow-half | Boolean | false | 是否允许半选 | N
+color | String / Array | '#ED7B2F' | `0.30.0`。评分图标的颜色，样式中默认为 #ED7B2F。一个值表示设置选中高亮的五角星颜色，示例：[选中颜色]。数组则表示分别设置 选中高亮的五角星颜色 和 未选中暗灰的五角星颜色，[选中颜色，未选中颜色]。示例：['#ED7B2F', '#E3E6EB']。TS 类型：`string \| Array<string>` | N
+count | Number | 5 | 评分的数量 | N
+custom-style | String | - | `0.25.0`。自定义组件样式 | N
+disabled | Boolean | - | 是否禁用评分 | N
+external-classes | Array | - | 组件类名，分别用于设置 组件外层类名、评分图标类名、辅助文字类名。。`['t-class', 't-class-icon', 't-class-text']` | N
+gap | Number | 8 | 评分图标的间距 | N
+icon | String / Array | - | `0.30.0`。自定义评分图标，[选中图标，未选中图标]；此时不受 variant 影响。TS 类型：`string \| string[]` | N
+show-text | Boolean | false | 是否显示对应的辅助文字 | N
+size | String | 24px | 评分图标的大小 | N
+texts | Array | [] | 评分等级对应的辅助文字。组件内置默认值为：['极差', '失望', '一般', '满意', '惊喜']。自定义值示例：['1分', '2分', '3分', '4分', '5分']。TS 类型：`Array<string>` | N
+value | Number | 0 | 选择评分的值 | N
+default-value | Number | undefined | 选择评分的值。非受控属性 | N
+variant | String | outline | 形状类型，有描边类型和填充类型两种。可选项：outline/filled | N
+
+### Rate Events
+
+名称 | 参数 | 描述
+-- | -- | --
+change | `(value: number)` | 评分数改变时触发

miniprogram_npm/tdesign-miniprogram/rate/props.d.ts

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

miniprogram_npm/tdesign-miniprogram/rate/props.js

@@ -0,0 +1,56 @@
+const props = {
+    allowHalf: {
+        type: Boolean,
+        value: false,
+    },
+    color: {
+        type: null,
+        value: '#ED7B2F',
+    },
+    count: {
+        type: Number,
+        value: 5,
+    },
+    customStyle: {
+        type: String,
+        value: '',
+    },
+    disabled: {
+        type: Boolean,
+    },
+    externalClasses: {
+        type: Array,
+    },
+    gap: {
+        type: null,
+        value: 8,
+    },
+    icon: {
+        type: null,
+    },
+    showText: {
+        type: Boolean,
+        value: false,
+    },
+    size: {
+        type: String,
+        value: '24px',
+    },
+    texts: {
+        type: Array,
+        value: [],
+    },
+    value: {
+        type: Number,
+        value: null,
+    },
+    defaultValue: {
+        type: Number,
+        value: 0,
+    },
+    variant: {
+        type: String,
+        value: 'outline',
+    },
+};
+export default props;

miniprogram_npm/tdesign-miniprogram/rate/rate.d.ts

@@ -0,0 +1,25 @@
+import { SuperComponent } from '../common/src/index';
+export default class Rate extends SuperComponent {
+    externalClasses: string[];
+    properties: import("./type").TdRateProps;
+    controlledProps: {
+        key: string;
+        event: string;
+    }[];
+    data: {
+        prefix: string;
+        classPrefix: string;
+        defaultTexts: string[];
+        tipsVisible: boolean;
+        tipsLeft: number;
+        actionType: string;
+        scaleIndex: number;
+    };
+    methods: {
+        onTouch(e: WechatMiniprogram.TouchEvent, eventType: 'tap' | 'move'): void;
+        onTap(e: WechatMiniprogram.TouchEvent): void;
+        onTouchMove(e: WechatMiniprogram.TouchEvent): void;
+        onTouchEnd(): void;
+        onSelect(e: WechatMiniprogram.TouchEvent): void;
+    };
+}

miniprogram_npm/tdesign-miniprogram/rate/rate.js

@@ -0,0 +1,97 @@
+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 { unitConvert } from '../common/utils';
+const { prefix } = config;
+const name = `${prefix}-rate`;
+let Rate = class Rate extends SuperComponent {
+    constructor() {
+        super(...arguments);
+        this.externalClasses = [`${prefix}-class`, `${prefix}-class-icon`, `${prefix}-class-text`];
+        this.properties = props;
+        this.controlledProps = [
+            {
+                key: 'value',
+                event: 'change',
+            },
+        ];
+        this.data = {
+            prefix,
+            classPrefix: name,
+            defaultTexts: ['极差', '失望', '一般', '满意', '惊喜'],
+            tipsVisible: false,
+            tipsLeft: 0,
+            actionType: '',
+            scaleIndex: -1,
+        };
+        this.methods = {
+            onTouch(e, eventType) {
+                const { count, allowHalf, gap, value: currentValue, size } = this.properties;
+                const [touch] = e.touches;
+                const margin = unitConvert(gap);
+                const selQuery = this.createSelectorQuery();
+                selQuery
+                    .select(`.${name}__wrapper`)
+                    .boundingClientRect((rect) => {
+                    const { width, left } = rect;
+                    const starWidth = (width - (count - 1) * margin) / count;
+                    const offsetX = touch.pageX - left;
+                    const num = (offsetX + margin) / (starWidth + margin);
+                    const remainder = num % 1;
+                    const integral = num - remainder;
+                    let value = remainder <= 0.5 && allowHalf ? integral + 0.5 : integral + 1;
+                    if (value > count) {
+                        value = count;
+                    }
+                    else if (value < 0) {
+                        value = 0;
+                    }
+                    if (eventType === 'move' || (eventType === 'tap' && allowHalf)) {
+                        const left = Math.ceil(value - 1) * (unitConvert(gap) + unitConvert(size)) + unitConvert(size) * 0.5;
+                        this.setData({
+                            tipsVisible: true,
+                            actionType: eventType,
+                            scaleIndex: eventType === 'move' ? Math.ceil(value) : -1,
+                            tipsLeft: Math.max(left, 0),
+                        });
+                    }
+                    if (value !== currentValue) {
+                        this._trigger('change', { value });
+                    }
+                })
+                    .exec();
+            },
+            onTap(e) {
+                this.onTouch(e, 'tap');
+            },
+            onTouchMove(e) {
+                this.onTouch(e, 'move');
+            },
+            onTouchEnd() {
+                if (this.data.actionType === 'move') {
+                    this.setData({}, () => {
+                        this.setData({ tipsVisible: false, scaleIndex: -1 });
+                    });
+                }
+            },
+            onSelect(e) {
+                const { value } = e.currentTarget.dataset;
+                const { actionType } = this.data;
+                if (actionType === 'move')
+                    return;
+                this._trigger('change', { value });
+                setTimeout(() => this.setData({ tipsVisible: false }), 300);
+            },
+        };
+    }
+};
+Rate = __decorate([
+    wxComponent()
+], Rate);
+export default Rate;

miniprogram_npm/tdesign-miniprogram/rate/rate.json

@@ -0,0 +1,6 @@
+{
+  "component": true,
+  "usingComponents": {
+    "t-icon": "../icon/icon"
+  }
+}

miniprogram_npm/tdesign-miniprogram/rate/rate.wxml

@@ -0,0 +1,55 @@
+<wxs src="../common/utils.wxs" module="_" />
+<wxs src="./rate.wxs" module="utils" />
+
+<view class="{{classPrefix}}">
+  <view
+    class="{{classPrefix}}__wrapper {{prefix}}-class"
+    style="font-size:{{ utils.regSize(size) }}"
+    catch:touchmove="{{ !disabled ? 'onTouchMove' : '' }}"
+    catch:tap="{{ !disabled ? 'onTap' : '' }}"
+    catch:touchend="{{ !disabled ? 'onTouchEnd' : ''}}"
+    catch:touchcancel="{{ !disabled ? 'onTouchEnd' : ''}}"
+  >
+    <t-icon
+      wx:for="{{ count }}"
+      wx:key="*this"
+      class="{{classPrefix }}__icon {{utils.getIconClass(classPrefix + '__icon', defaultValue, value, index, allowHalf, disabled, scaleIndex)}} "
+      t-class="{{prefix}}-class-icon"
+      name="{{utils.getIconName(defaultValue, value, index, variant, icon)}}"
+      size="{{ size }}"
+      style="margin-right:{{ count - index > 1 ? gap : 0 }}px; {{utils.getColor(color)}}"
+    />
+  </view>
+  <text wx:if="{{showText}}" class="{{_.cls(classPrefix + '__text', [['active', value > 0]])}} {{prefix}}-class-text"
+    >{{utils.getText(texts,value,defaultTexts)}}</text
+  >
+  <view wx:if="{{tipsVisible}}" class="{{classPrefix}}__tips" style="left: {{tipsLeft}}px">
+    <view
+      wx:if="{{allowHalf && actionType == 'tap'}}"
+      class="{{_.cls(classPrefix + '__tips-item', [['active', utils.ceil(value) - 0.5 == value]])}}"
+      bind:tap="onSelect"
+      data-value="{{utils.ceil(value) - 0.5}}"
+    >
+      <t-icon
+        class="{{classPrefix }}__icon {{classPrefix }}__icon--selected"
+        name="{{utils.getIconName(defaultValue, value, index, variant, icon)}}"
+        size="{{ size }}"
+        style="{{utils.getColor(color)}}"
+      />
+      <view class="{{classPrefix}}__tips-text">{{utils.ceil(value) - 0.5}}</view>
+    </view>
+    <view
+      class="{{_.cls(classPrefix + '__tips-item', [['active', utils.ceil(value) == value && actionType == 'tap']])}}"
+      bind:tap="onSelect"
+      data-value="{{utils.ceil(value)}}"
+    >
+      <t-icon
+        class="{{classPrefix }}__icon {{classPrefix }}__icon--selected"
+        name="{{utils.getIconName(defaultValue, value, index, 'filled', icon)}}"
+        size="{{ size }}"
+        style="{{utils.getColor(color)}}"
+      />
+      <view class="{{classPrefix}}__tips-text">{{actionType == 'tap' ? utils.ceil(value) : value}}</view>
+    </view>
+  </view>
+</view>

miniprogram_npm/tdesign-miniprogram/rate/rate.wxs

@@ -0,0 +1,64 @@
+module.exports = {
+  getText: function (texts, val, defaultTexts) {
+    if (!texts.length) {
+      texts = defaultTexts;
+    }
+    var curVal = Math.floor(val - 1);
+    return texts[curVal] || '未评分';
+  },
+
+  getIconName: function (defaultValue, value, index, variant, icon) {
+    var curVal = value ? value : defaultValue;
+    var name = ['star-filled', 'star-filled'];
+
+    if (icon) {
+      name = icon.constructor == 'Array' ? icon : [icon, icon];
+    } else if (variant === 'outline') {
+      name[1] = 'star';
+    }
+
+    return name[curVal >= index + 1 ? 0 : 1];
+  },
+
+  getIconClass: function (classPrefix, defaultValue, value, index, allowHalf, disabled, scaleIndex) {
+    var curVal = value ? value : defaultValue;
+    var className = [];
+    if (curVal >= index + 1) {
+      className.push(classPrefix + '--selected');
+      if (disabled) {
+        className.push(classPrefix + '--disabled');
+      }
+      if (scaleIndex === index + 1) {
+        className.push(classPrefix + '--current');
+      }
+    } else if (allowHalf && curVal - index > 0) {
+      className.push(classPrefix + '--selected-half');
+      if (disabled) {
+        className.push(classPrefix + '--disabled-half');
+      }
+    } else {
+      className.push(classPrefix + '--unselected');
+    }
+    return className.join(' ');
+  },
+
+  ceil: function (value) {
+    return Math.ceil(value);
+  },
+
+  getColor: function (color) {
+    if (color.constructor === 'Array' && color.length === 2) {
+      return ';--td-rate-selected-color: ' + color[0] + '; --td-rate-unselected-color: ' + color[1];
+    }
+
+    if (typeof color === 'string') {
+      return ';--td-rate-selected-color: ' + color;
+    }
+
+    return '';
+  },
+
+  regSize: function (val) {
+    return val.indexOf('px') ? val : val + 'px';
+  },
+};

miniprogram_npm/tdesign-miniprogram/rate/rate.wxss

@@ -0,0 +1,89 @@
+.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-rate {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+}
+.t-rate__wrapper {
+  line-height: 1em;
+  display: inline-flex;
+}
+.t-rate__icon {
+  line-height: 1em;
+  transition: transform 0.3s ease;
+}
+.t-rate__icon--current {
+  transform: scale(var(--td-rate-icon-scale, 1.33));
+}
+.t-rate__icon--selected {
+  color: var(--td-rate-selected-color, var(--td-warning-color, var(--td-warning-color-5, #ed7b2f)));
+}
+.t-rate__icon--selected-half {
+  color: transparent;
+  background: linear-gradient(to right, var(--td-rate-selected-color, var(--td-warning-color, var(--td-warning-color-5, #ed7b2f))) 0%, var(--td-rate-selected-color, var(--td-warning-color, var(--td-warning-color-5, #ed7b2f))) 50%, var(--td-rate-unselected-color, var(--td-gray-color-4, #dcdcdc)) 51%, var(--td-rate-unselected-color, var(--td-gray-color-4, #dcdcdc)) 100%);
+  -webkit-background-clip: text;
+  background-clip: text;
+}
+.t-rate__icon--unselected {
+  color: var(--td-rate-unselected-color, var(--td-gray-color-4, #dcdcdc));
+}
+.t-rate__text {
+  font-size: var(--td-rate-text-font-size, var(--td-font-size-m, 32rpx));
+  color: var(--td-rate-text-color, var(--td-font-gray-4, rgba(0, 0, 0, 0.26)));
+  margin-left: 32rpx;
+  vertical-align: middle;
+}
+.t-rate__text--active {
+  color: var(--td-rate-text-active-color, var(--td-font-gray-1, rgba(0, 0, 0, 0.9)));
+  font-weight: var(--td-rate-text-active-font-weight, 600);
+}
+.t-rate__tips {
+  position: absolute;
+  display: flex;
+  align-items: center;
+  bottom: calc(100% + 16rpx);
+  padding: 8rpx;
+  border-radius: 12rpx;
+  box-shadow: var(--td-shadow-1, 0 1px 10px rgba(0, 0, 0, 0.05), 0 4px 5px rgba(0, 0, 0, 0.08), 0 2px 4px -1px rgba(0, 0, 0, 0.12));
+  background-color: var(--td-bg-color-block, #fff);
+  transform: translateX(-50%);
+}
+.t-rate__tips-item {
+  width: 64rpx;
+  border-radius: 6rpx;
+}
+.t-rate__tips-item--active {
+  background-color: var(--td-gray-color-1, #f3f3f3);
+}
+.t-rate__tips-text {
+  text-align: center;
+  font-size: 24rpx;
+  line-height: 40rpx;
+}

miniprogram_npm/tdesign-miniprogram/rate/type.d.ts

@@ -0,0 +1,58 @@
+export interface TdRateProps {
+    allowHalf?: {
+        type: BooleanConstructor;
+        value?: boolean;
+    };
+    color?: {
+        type: null;
+        value?: string | Array<string>;
+    };
+    count?: {
+        type: NumberConstructor;
+        value?: number;
+    };
+    customStyle?: {
+        type: StringConstructor;
+        value?: string;
+    };
+    disabled?: {
+        type: BooleanConstructor;
+        value?: boolean;
+    };
+    externalClasses?: {
+        type: ArrayConstructor;
+        value?: ['t-class', 't-class-icon', 't-class-text'];
+    };
+    gap?: {
+        type: null;
+        value?: string | number;
+    };
+    icon?: {
+        type: null;
+        value?: string | string[];
+    };
+    showText?: {
+        type: BooleanConstructor;
+        value?: boolean;
+    };
+    size?: {
+        type: StringConstructor;
+        value?: string;
+    };
+    texts?: {
+        type: ArrayConstructor;
+        value?: Array<string>;
+    };
+    value?: {
+        type: NumberConstructor;
+        value?: number;
+    };
+    defaultValue?: {
+        type: NumberConstructor;
+        value?: number;
+    };
+    variant?: {
+        type: StringConstructor;
+        value?: 'outline' | 'filled';
+    };
+}

miniprogram_npm/tdesign-miniprogram/rate/type.js

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