project init & fix ui

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

@@ -0,0 +1,30 @@
+:: BASE_DOC ::
+
+## API
+### Slider Props
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+colors | Array | [] | Typescript：`Array<string>` | N
+custom-style | String | - | `0.25.0` | N
+disabled | Boolean | false | \- | N
+disabled-color | Array | [] | Typescript：`Array<string>` | N
+external-classes | Array | - | `['t-class', 't-class-bar', 't-class-bar-active', 't-class-bar-disabled', 't-class-cursor']` | N
+label | String / Boolean | false | Typescript：`string \| boolean` | N
+marks | Object / Array | {} | Typescript：`Record<number, string> \| Array<number>` | N
+max | Number | 100 | \- | N
+min | Number | 0 | \- | N
+range | Boolean | false | \- | N
+show-extreme-value | Boolean | false | \- | N
+step | Number | 1 | \- | N
+theme | String | default | `0.30.0`。options：default/capsule | N
+value | Number / Array | 0 | Typescript：`SliderValue` `type SliderValue = number \| Array<number>`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/slider/type.ts) | N
+default-value | Number / Array | undefined | uncontrolled property。Typescript：`SliderValue` `type SliderValue = number \| Array<number>`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/slider/type.ts) | N
+
+### Slider Events
+
+name | params | description
+-- | -- | --
+change | `(value: SliderValue)` | \-
+dragend | \- | \-
+dragstart | \- | \-

miniprogram_npm/tdesign-miniprogram/slider/README.md

@@ -0,0 +1,80 @@
+---
+title: Slider 滑动选择器
+description: 用于选择横轴上的数值、区间、档位。
+spline: data
+isComponent: true
+---
+
+<span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20lines-95%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-82%25-blue" /></span>
+## 引入
+
+全局引入，在 miniprogram 根目录下的`app.json`中配置，局部引入，在需要引入的页面或组件的`index.json`中配置。
+
+```json
+"usingComponents": {
+  "t-slider": "tdesign-miniprogram/slider/slider"
+}
+```
+
+## 代码演示
+
+<img src="https://tdesign.gtimg.com/miniprogram/readme/slider.png" width="375px" height="50%">
+
+### 组件类型
+
+单游标滑块
+
+{{ base }}
+
+双游标滑块
+
+{{ range }}
+
+带数值滑动选择器
+
+{{ label }}
+
+带刻度滑动选择器
+
+{{ step }}
+
+### 组件状态
+
+滑块禁用状态
+
+{{ disabled }}
+
+#### 特殊样式
+
+胶囊型滑块
+
+{{ capsule }}
+
+## API
+### Slider Props
+
+名称 | 类型 | 默认值 | 说明 | 必传
+-- | -- | -- | -- | --
+colors | Array | [] | 颜色，[已选择, 未选择]。TS 类型：`Array<string>` | N
+custom-style | String | - | `0.25.0`。自定义组件样式 | N
+disabled | Boolean | false | 是否禁用组件 | N
+disabled-color | Array | [] | 禁用状态滑动条的颜色，[已选, 未选]。TS 类型：`Array<string>` | N
+external-classes | Array | - | 组件类名，分别用于设置 组件外层元素、滑道底部、滑道激活态、滑道禁用态、游标 等元素类名。`['t-class', 't-class-bar', 't-class-bar-active', 't-class-bar-disabled', 't-class-cursor']` | N
+label | String / Boolean | false | 滑块当前值文本。<br />值为 true 显示默认文案；值为 false 不显示滑块当前值文本；<br />值为 `${value}%` 则表示组件会根据占位符渲染文案；<br />值类型为函数时，参数 `value` 标识滑块值，参数 `position=start` 表示范围滑块的起始值，参数 `position=end` 表示范围滑块的终点值。TS 类型：`string \| boolean` | N
+marks | Object / Array | {} | 刻度标记，示例：`[0, 10, 40, 200]` 或者 `{ 5:  '5¥', 10: '10%' }`。TS 类型：`Record<number, string> \| Array<number>` | N
+max | Number | 100 | 滑块范围最大值 | N
+min | Number | 0 | 滑块范围最小值 | N
+range | Boolean | false | 双游标滑块 | N
+show-extreme-value | Boolean | false | 是否边界值 | N
+step | Number | 1 | 步长 | N
+theme | String | default | `0.30.0`。滑块风格。可选项：default/capsule | N
+value | Number / Array | 0 | 滑块值。TS 类型：`SliderValue` `type SliderValue = number \| Array<number>`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/slider/type.ts) | N
+default-value | Number / Array | undefined | 滑块值。非受控属性。TS 类型：`SliderValue` `type SliderValue = number \| Array<number>`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/slider/type.ts) | N
+
+### Slider Events
+
+名称 | 参数 | 描述
+-- | -- | --
+change | `(value: SliderValue)` | 滑块值变化时触发
+dragend | \- | 结束拖动时触发
+dragstart | \- | 开始拖动时触发

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

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

miniprogram_npm/tdesign-miniprogram/slider/props.js

@@ -0,0 +1,62 @@
+const props = {
+    colors: {
+        type: Array,
+        value: [],
+    },
+    customStyle: {
+        type: String,
+        value: '',
+    },
+    disabled: {
+        type: Boolean,
+        value: false,
+    },
+    disabledColor: {
+        type: Array,
+        value: [],
+    },
+    externalClasses: {
+        type: Array,
+    },
+    label: {
+        type: null,
+        value: false,
+    },
+    marks: {
+        type: null,
+        value: {},
+    },
+    max: {
+        type: Number,
+        value: 100,
+    },
+    min: {
+        type: Number,
+        value: 0,
+    },
+    range: {
+        type: Boolean,
+        value: false,
+    },
+    showExtremeValue: {
+        type: Boolean,
+        value: false,
+    },
+    step: {
+        type: Number,
+        value: 1,
+    },
+    theme: {
+        type: String,
+        value: 'default',
+    },
+    value: {
+        type: null,
+        value: null,
+    },
+    defaultValue: {
+        type: null,
+        value: 0,
+    },
+};
+export default props;

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

@@ -0,0 +1,52 @@
+/// <reference types="miniprogram-api-typings" />
+import { SuperComponent } from '../common/src/index';
+import type { SliderValue } from './type';
+declare type dataType = {
+    sliderStyles: string;
+    classPrefix: string;
+    initialLeft: number | null;
+    initialRight: number | null;
+    activeLeft: number;
+    activeRight: number;
+    maxRange: number;
+    lineLeft: number;
+    lineRight: number;
+    dotTopValue: number[];
+    blockSize: number;
+    isScale: boolean;
+    scaleArray: any[];
+    scaleTextArray: any[];
+    _value: SliderValue;
+    prefix: string;
+};
+export default class Slider extends SuperComponent {
+    externalClasses: string[];
+    properties: import("./type").TdSliderProps;
+    controlledProps: {
+        key: string;
+        event: string;
+    }[];
+    data: dataType;
+    observers: {
+        value(newValue: SliderValue): void;
+        _value(newValue: SliderValue): void;
+        marks(val: any): void;
+    };
+    lifetimes: {
+        attached(): void;
+    };
+    triggerValue(value?: SliderValue): void;
+    handlePropsChange(newValue: SliderValue): void;
+    handleMask(marks: any): void;
+    setSingleBarWidth(value: number): void;
+    getInitialStyle(): Promise<void>;
+    stepValue(value: number): number;
+    onSingleLineTap(e: WechatMiniprogram.TouchEvent): void;
+    getSingleChangeValue(e: WechatMiniprogram.TouchEvent): number;
+    convertPosToValue(posValue: number, dir: 0 | 1): number;
+    onLineTap(e: WechatMiniprogram.TouchEvent): void;
+    onTouchMoveLeft(e: WechatMiniprogram.TouchEvent): void;
+    onTouchMoveRight(e: WechatMiniprogram.TouchEvent): void;
+    setLineStyle(left: number, right: number): void;
+}
+export {};

miniprogram_npm/tdesign-miniprogram/slider/slider.js

@@ -0,0 +1,263 @@
+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;
+};
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { SuperComponent, wxComponent } from '../common/src/index';
+import config from '../common/config';
+import { trimSingleValue, trimValue } from './tool';
+import props from './props';
+import { getRect } from '../common/utils';
+const { prefix } = config;
+const name = `${prefix}-slider`;
+let Slider = class Slider extends SuperComponent {
+    constructor() {
+        super(...arguments);
+        this.externalClasses = [
+            `${prefix}-class`,
+            `${prefix}-class-bar`,
+            `${prefix}-class-bar-active`,
+            `${prefix}-class-bar-disabled`,
+            `${prefix}-class-cursor`,
+        ];
+        this.properties = props;
+        this.controlledProps = [
+            {
+                key: 'value',
+                event: 'change',
+            },
+        ];
+        this.data = {
+            sliderStyles: '',
+            classPrefix: name,
+            initialLeft: null,
+            initialRight: null,
+            activeLeft: 0,
+            activeRight: 0,
+            maxRange: 0,
+            lineLeft: 0,
+            lineRight: 0,
+            dotTopValue: [0, 0],
+            _value: 0,
+            blockSize: 20,
+            isScale: false,
+            scaleArray: [],
+            scaleTextArray: [],
+            prefix,
+        };
+        this.observers = {
+            value(newValue) {
+                this.handlePropsChange(newValue);
+            },
+            _value(newValue) {
+                const { min, max, range } = this.properties;
+                const { maxRange } = this.data;
+                if (range) {
+                    const left = (maxRange * (newValue[0] - Number(min))) / (Number(max) - Number(min));
+                    const right = (maxRange * (Number(max) - newValue[1])) / (Number(max) - Number(min));
+                    this.setLineStyle(left, right);
+                }
+                else {
+                    this.setSingleBarWidth(newValue);
+                }
+            },
+            marks(val) {
+                this.handleMask(val);
+            },
+        };
+        this.lifetimes = {
+            attached() {
+                const { value } = this.properties;
+                if (!value)
+                    this.handlePropsChange(0);
+                this.getInitialStyle();
+            },
+        };
+    }
+    triggerValue(value) {
+        this._trigger('change', {
+            value: trimValue(value, this.properties),
+        });
+    }
+    handlePropsChange(newValue) {
+        const value = trimValue(newValue, this.properties);
+        const setValueAndTrigger = () => {
+            this.setData({
+                _value: value,
+            });
+        };
+        if (this.data.maxRange === 0) {
+            this.getInitialStyle().then(setValueAndTrigger);
+            return;
+        }
+        setValueAndTrigger();
+    }
+    handleMask(marks) {
+        if ((marks === null || marks === void 0 ? void 0 : marks.length) && Array.isArray(marks)) {
+            this.setData({
+                isScale: true,
+                scaleArray: marks,
+                scaleTextArray: [],
+            });
+        }
+        if (Object.prototype.toString.call(marks) === '[object Object]') {
+            const scaleArray = Object.keys(marks).map((item) => Number(item));
+            const scaleTextArray = scaleArray.map((item) => marks[item]);
+            this.setData({
+                isScale: scaleArray.length > 0,
+                scaleArray,
+                scaleTextArray,
+            });
+        }
+    }
+    setSingleBarWidth(value) {
+        const { max, min } = this.properties;
+        const { maxRange, blockSize } = this.data;
+        const percentage = (Number(value) - Number(min)) / (Number(max) - Number(min));
+        const width = percentage * maxRange + blockSize / 2;
+        this.setData({
+            lineBarWidth: `${width}px`,
+        });
+    }
+    getInitialStyle() {
+        return __awaiter(this, void 0, void 0, function* () {
+            const line = yield getRect(this, '#sliderLine');
+            const { blockSize } = this.data;
+            const { theme } = this.properties;
+            const halfBlock = Number(blockSize) / 2;
+            const margin = theme === 'capsule' ? 6 : 0;
+            this.setData({
+                maxRange: line.right - line.left - Number(blockSize) - margin,
+                initialLeft: line.left + halfBlock,
+                initialRight: line.right - halfBlock,
+            });
+        });
+    }
+    stepValue(value) {
+        const { step, min, max } = this.properties;
+        if (Number(step) < 1 || Number(step) > Number(max) - Number(min))
+            return value;
+        const closestStep = trimSingleValue(Math.round(value / Number(step)) * Number(step), Number(min), Number(max));
+        return closestStep;
+    }
+    onSingleLineTap(e) {
+        const { disabled } = this.properties;
+        if (disabled)
+            return;
+        const value = this.getSingleChangeValue(e);
+        this.triggerValue(value);
+    }
+    getSingleChangeValue(e) {
+        const { min, max } = this.properties;
+        const { initialLeft, maxRange } = this.data;
+        const [touch] = e.changedTouches;
+        const { pageX } = touch;
+        const currentLeft = pageX - initialLeft;
+        let value = 0;
+        if (currentLeft <= 0) {
+            value = Number(min);
+        }
+        else if (currentLeft >= maxRange) {
+            value = Number(max);
+        }
+        else {
+            value = Math.round((currentLeft / maxRange) * (Number(max) - Number(min)) + Number(min));
+        }
+        return this.stepValue(value);
+    }
+    convertPosToValue(posValue, dir) {
+        const { maxRange } = this.data;
+        const { max, min } = this.properties;
+        return dir === 0
+            ? (posValue / maxRange) * (Number(max) - Number(min)) + Number(min)
+            : Number(max) - (posValue / maxRange) * (Number(max) - Number(min));
+    }
+    onLineTap(e) {
+        const { disabled } = this.properties;
+        const { initialLeft, initialRight, maxRange, blockSize } = this.data;
+        if (disabled)
+            return;
+        const [touch] = e.changedTouches;
+        const { pageX } = touch;
+        const halfBlock = Number(blockSize) / 2;
+        const currentLeft = pageX - initialLeft;
+        if (currentLeft < 0 || currentLeft > maxRange + Number(blockSize))
+            return;
+        Promise.all([getRect(this, '#leftDot'), getRect(this, '#rightDot')]).then(([leftDot, rightDot]) => {
+            const distanceLeft = Math.abs(pageX - leftDot.left - halfBlock);
+            const distanceRight = Math.abs(rightDot.left - pageX + halfBlock);
+            const isMoveLeft = distanceLeft < distanceRight;
+            if (isMoveLeft) {
+                const left = pageX - initialLeft;
+                const leftValue = this.convertPosToValue(left, 0);
+                this.triggerValue([this.stepValue(leftValue), this.data._value[1]]);
+            }
+            else {
+                const right = -(pageX - initialRight);
+                const rightValue = this.convertPosToValue(right, 1);
+                this.triggerValue([this.data._value[0], this.stepValue(rightValue)]);
+            }
+        });
+    }
+    onTouchMoveLeft(e) {
+        const { disabled } = this.properties;
+        const { initialLeft, _value } = this.data;
+        if (disabled)
+            return;
+        const [touch] = e.changedTouches;
+        const { pageX } = touch;
+        const currentLeft = pageX - initialLeft;
+        const newData = [..._value];
+        const leftValue = this.convertPosToValue(currentLeft, 0);
+        newData[0] = this.stepValue(leftValue);
+        this.triggerValue(newData);
+    }
+    onTouchMoveRight(e) {
+        const { disabled } = this.properties;
+        const { initialRight, _value } = this.data;
+        if (disabled)
+            return;
+        const [touch] = e.changedTouches;
+        const { pageX } = touch;
+        const currentRight = -(pageX - initialRight);
+        const newData = [..._value];
+        const rightValue = this.convertPosToValue(currentRight, 1);
+        newData[1] = this.stepValue(rightValue);
+        this.triggerValue(newData);
+    }
+    setLineStyle(left, right) {
+        const { blockSize, maxRange } = this.data;
+        const halfBlock = Number(blockSize) / 2;
+        const [a, b] = this.data._value;
+        const cut = (v) => parseInt(v, 10);
+        this.setData({
+            dotTopValue: [a, b],
+        });
+        if (left + right <= maxRange) {
+            this.setData({
+                lineLeft: cut(left + halfBlock),
+                lineRight: cut(right + halfBlock),
+            });
+        }
+        else {
+            this.setData({
+                lineLeft: cut(maxRange + halfBlock - right),
+                lineRight: cut(maxRange - left + halfBlock * 1.5),
+            });
+        }
+    }
+};
+Slider = __decorate([
+    wxComponent()
+], Slider);
+export default Slider;

miniprogram_npm/tdesign-miniprogram/slider/slider.json

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

miniprogram_npm/tdesign-miniprogram/slider/slider.wxml

@@ -0,0 +1,147 @@
+<wxs src="./slider.wxs" module="t" />
+<wxs src="../common/utils.wxs" module="_" />
+
+<view
+  style="{{ customStyle }}"
+  class="{{_.cls(classPrefix, [['top', label || scaleTextArray.length], ['disabled', disabled], ['range', range]])}} {{prefix}}-class"
+>
+  <block wx:if="{{!range}}">
+    <text wx:if="{{showExtremeValue}}" class="{{classPrefix}}__value {{classPrefix}}__value--min">
+      {{ label ? t.getValue(label, min) : min}}
+    </text>
+    <view
+      id="sliderLine"
+      class="{{_.cls(classPrefix + '__bar', [['disabled', disabled], theme, ['marks', isScale && theme == 'capsule']])}} {{prefix}}-class-bar"
+      style="{{t.getColor(disabled, false, disabledColor, colors)}}"
+      bind:tap="onSingleLineTap"
+    >
+      <block wx:if="{{isScale}}">
+        <view
+          class="{{_.cls(classPrefix + '__scale-item', [['active', _value >= item], ['disabled', disabled], theme, ['hidden', index == 0 || index == scaleArray.length - 1 || value == item]])}}"
+          wx:for="{{scaleArray}}"
+          wx:key="index"
+          style="left:{{item}}%; transform: translateX({{- item}}%); {{t.getColor(disabled, _value >= item, disabledColor, colors)}}"
+        >
+          <view wx:if="{{scaleTextArray.length}}" class="{{_.cls(classPrefix + '__scale-desc', [theme])}}}}">
+            {{scaleTextArray[index]}}
+          </view>
+        </view>
+      </block>
+      <view
+        class="{{_.cls(classPrefix + '__line', [['disabled', disabled], theme, 'single'])}} {{prefix}}-class-bar-active"
+        style="width: {{lineBarWidth}}; {{t.getColor(disabled, true, disabledColor, colors)}}"
+      >
+        <view
+          id="singleDot"
+          class="{{classPrefix}}__dot {{prefix}}-class-cursor"
+          bind:touchmove="onSingleLineTap"
+          bind:touchend="onTouchEnd"
+          bind:touchcancel="onTouchEnd"
+        >
+          <view
+            class="{{_.cls(classPrefix+'__dot-value', [['sr-only', !label]])}}"
+            aria-role="region"
+            aria-live="assertive"
+          >
+            {{t.getValue(label, _value) || _value}}
+          </view>
+          <view
+            class="{{classPrefix}}__dot-slider"
+            aria-role="slider"
+            aria-disabled="{{disabled}}"
+            aria-valuemax="{{max}}"
+            aria-valuemin="{{min}}"
+            aria-valuenow="{{_value}}"
+          ></view>
+        </view>
+      </view>
+    </view>
+    <!-- <view wx:if="{{label}}" class="{{classPrefix}}__value {{classPrefix}}__value--right">
+      <text class="{{classPrefix}}__value--text"> {{t.getValue(label, _value)}}</text>
+    </view> -->
+    <text wx:if="{{showExtremeValue}}" class="{{classPrefix}}__value {{classPrefix}}__value--max">
+      {{ label ? t.getValue(label, max) : max}}
+    </text>
+  </block>
+  <!-- range选择器自定义 -->
+  <block wx:if="{{range}}">
+    <view wx:if="{{showExtremeValue}}" class="{{classPrefix}}__range-extreme {{classPrefix}}__range-extreme--min">
+      {{min}}
+    </view>
+    <view
+      id="sliderLine"
+      bind:tap="onLineTap"
+      class="{{_.cls(classPrefix + '__bar', [['disabled', disabled], theme, ['marks', isScale && theme == 'capsule']])}} {{prefix}}-class-bar"
+      style="{{t.getColor(disabled, false, disabledColor, colors)}}"
+    >
+      <block wx:if="{{isScale}}">
+        <view
+          class="{{_.cls(classPrefix + '__scale-item', [['active', dotTopValue[1] >= item && item >= dotTopValue[0]], ['disabled', disabled], theme, ['hidden', index == 0 || index == scaleArray.length - 1 || value == item]])}}"
+          wx:for="{{scaleArray}}"
+          wx:for-index="index"
+          wx:key="index"
+          style="left: {{item}}%;transform: translateX({{- item}}%); {{t.getColor(disabled, (dotTopValue[1] >= item && item >= dotTopValue[0]), disabledColor, colors)}}"
+        >
+          <view wx:if="{{scaleTextArray.length}}" class="{{_.cls(classPrefix + '__scale-desc', [theme])}}"
+            >{{scaleTextArray[index]}}</view
+          >
+        </view>
+      </block>
+      <view
+        class="{{_.cls(classPrefix + '__line', [['disabled', disabled], theme])}} {{prefix}}-class-bar-active"
+        style="left: {{lineLeft}}px; right: {{lineRight}}px; {{t.getColor(disabled, true, disabledColor, colors)}}"
+      >
+        <view
+          id="leftDot"
+          bind:touchmove="onTouchMoveLeft"
+          bind:touchend="onTouchEnd"
+          bind:touchcancel="onTouchEnd"
+          class="{{classPrefix}}__dot {{classPrefix}}__dot--left {{prefix}}-class-cursor"
+        >
+          <view
+            class="{{_.cls(classPrefix+'__dot-value', [['sr-only', !label]])}}"
+            aria-role="region"
+            aria-live="assertive"
+          >
+            {{t.getValue(label, dotTopValue[0]) || dotTopValue[0]}}
+          </view>
+          <view
+            class="{{classPrefix}}__dot-slider"
+            aria-role="slider"
+            aria-disabled="{{disabled}}"
+            aria-valuemax="{{t.getValue(label, dotTopValue[1]) || dotTopValue[1]}}"
+            aria-valuemin="{{min}}"
+            aria-valuenow="{{t.getValue(label, dotTopValue[0]) || dotTopValue[0]}}"
+          ></view>
+        </view>
+        <view
+          id="rightDot"
+          bind:touchmove="onTouchMoveRight"
+          bind:touchend="onTouchEnd"
+          bind:touchcancel="onTouchEnd"
+          class="{{classPrefix}}__dot {{classPrefix}}__dot--right {{prefix}}-class-cursor"
+        >
+          <view
+            class="{{_.cls(classPrefix+'__dot-value', [['sr-only', !label]])}}"
+            aria-role="region"
+            aria-live="assertive"
+          >
+            {{t.getValue(label, dotTopValue[1]) || dotTopValue[1]}}
+          </view>
+          <view
+            class="{{classPrefix}}__dot-slider"
+            aria-role="slider"
+            aria-disabled="{{disabled}}"
+            aria-valuemax="{{max}}"
+            aria-valuemin="{{t.getValue(label, dotTopValue[0]) || dotTopValue[0]}}"
+            aria-valuenow="{{t.getValue(label, dotTopValue[1]) || dotTopValue[1]}}"
+          >
+          </view>
+        </view>
+      </view>
+    </view>
+    <view wx:if="{{showExtremeValue}}" class="{{classPrefix}}__range-extreme {{classPrefix}}__range-extreme--max">
+      {{max}}
+    </view>
+  </block>
+</view>

miniprogram_npm/tdesign-miniprogram/slider/slider.wxs

@@ -0,0 +1,25 @@
+var REGEXP = getRegExp('[$][{value}]{7}');
+
+function getValue(label, value) {
+  if (label && label === 'true') return value;
+  if (REGEXP.test(label)) return label.replace(REGEXP, value);
+}
+
+function getColor(disable, active, disabledColor, colors) {
+  var index = active ? 0 : 1;
+
+  if (disable && disabledColor.constructor === 'Array' && disabledColor.length == 2) {
+    return 'background-color: ' + disabledColor[index];
+  }
+
+  if (!disable && colors.constructor === 'Array' && colors.length == 2) {
+    return 'background-color: ' + colors[index];
+  }
+
+  return '';
+}
+
+module.exports = {
+  getValue: getValue,
+  getColor: getColor,
+};

miniprogram_npm/tdesign-miniprogram/slider/slider.wxss

@@ -0,0 +1,195 @@
+.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-slider {
+  font-size: 14px;
+  display: flex;
+  align-items: center;
+}
+.t-slider--disabled .t-slider__value,
+.t-slider--disabled .t-slider__range-extreme,
+.t-slider--disabled .t-slider__dot-value,
+.t-slider--disabled .t-slider__scale-desc {
+  color: var(--td-slider-disabled-text-color, var(--td-font-gray-4, rgba(0, 0, 0, 0.26)));
+}
+.t-slider--top {
+  padding-top: 40rpx;
+}
+.t-slider__line {
+  position: absolute;
+  top: 0;
+  height: var(--td-slider-bar-height, 8rpx);
+  border-radius: calc(var(--td-slider-bar-height, 8rpx) / 2);
+  background-color: var(--td-slider-active-color, var(--td-brand-color, var(--td-primary-color-8, #0052d9)));
+}
+.t-slider__line--disabled {
+  background-color: var(--td-slider-disabled-color, var(--td-primary-color-3, #bbd3fb));
+}
+.t-slider__line--capsule {
+  height: var(--td-slider-capsule-line-heihgt, 36rpx);
+}
+.t-slider__line--capsule.t-slider__line--single {
+  border-top-left-radius: calc(var(--td-slider-capsule-line-heihgt, 36rpx) / 2);
+  border-bottom-left-radius: calc(var(--td-slider-capsule-line-heihgt, 36rpx) / 2);
+}
+.t-slider__dot {
+  border-radius: 50%;
+  border: 2rpx solid var(--td-slider-dot-color, var(--td-gray-color-1, #f3f3f3));
+  position: absolute;
+  top: 50%;
+  right: 0;
+  transform: translate3d(50%, -50%, 0);
+  z-index: 2;
+  background-color: var(--td-slider-dot-bg-color, var(--td-bg-color-block, #fff));
+  width: var(--td-slider-dot-size, 40rpx);
+  height: var(--td-slider-dot-size, 40rpx);
+  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));
+  box-sizing: border-box;
+}
+.t-slider__dot--left {
+  left: 0;
+  transform: translate3d(-50%, -50%, 0);
+}
+.t-slider__dot-value {
+  position: relative;
+  left: 50%;
+  transform: translateX(-50%);
+  top: -52rpx;
+  text-align: center;
+  width: 48rpx;
+  height: 44rpx;
+  line-height: 44rpx;
+}
+.t-slider__value,
+.t-slider__range-extreme,
+.t-slider__dot-value {
+  color: rgba(0, 0, 0, 0.9);
+}
+.t-slider__value--sr-only,
+.t-slider__range-extreme--sr-only,
+.t-slider__dot-value--sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  clip-path: inset(50%);
+  border: 0;
+}
+.t-slider__dot-slider {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  left: 0;
+  top: 0;
+}
+.t-slider__value--min {
+  margin-left: 32rpx;
+}
+.t-slider__value--max {
+  margin-right: 32rpx;
+}
+.t-slider__value--right {
+  flex-basis: 80rpx;
+}
+.t-slider__value--right__value--text {
+  margin-right: 32rpx;
+  text-align: right;
+  display: block;
+}
+.t-slider__bar {
+  margin: 16rpx 32rpx;
+  flex: 10;
+  background-clip: content-box;
+  height: var(--td-slider-bar-height, 8rpx);
+  border-radius: calc(var(--td-slider-bar-height, 8rpx) / 2);
+  position: relative;
+  background-color: var(--td-slider-default-color, var(--td-gray-color-4, #dcdcdc));
+}
+.t-slider__bar--capsule {
+  height: var(--td-slider-capsule-bar-heihgt, 48rpx);
+  border-radius: calc(var(--td-slider-capsule-bar-heihgt, 48rpx) / 2);
+  background-color: var(--td-slider-capsule-bar-color, var(--td-gray-color-3, #e7e7e7));
+  border: 6rpx solid var(--td-slider-capsule-bar-color, var(--td-gray-color-3, #e7e7e7));
+  box-sizing: border-box;
+}
+.t-slider__bar--marks {
+  background-color: var(--td-slider-default-color, var(--td-gray-color-4, #dcdcdc));
+}
+.t-slider__bar--disabled {
+  background-color: var(--td-slider-default-color, var(--td-gray-color-2, #eeeeee));
+}
+.t-slider__range-extreme--min {
+  margin-left: 32rpx;
+  text-align: left;
+}
+.t-slider__range-extreme--max {
+  margin-right: 32rpx;
+  text-align: right;
+}
+.t-slider__scale-item {
+  background-color: var(--td-slider-default-color, var(--td-gray-color-4, #dcdcdc));
+  width: var(--td-slider-bar-height, 8rpx);
+  height: 16rpx;
+  width: 16rpx;
+  border-radius: 50%;
+  position: absolute;
+  top: 50%;
+  margin-top: -8rpx;
+  z-index: 1;
+}
+.t-slider__scale-item--active {
+  background-color: var(--td-slider-active-color, var(--td-brand-color, var(--td-primary-color-8, #0052d9)));
+}
+.t-slider__scale-item--disabled {
+  background-color: var(--td-slider-default-color, var(--td-gray-color-2, #eeeeee));
+}
+.t-slider__scale-item--active.t-slider__scale-item--disabled {
+  background-color: var(--td-slider-disabled-color, var(--td-primary-color-3, #bbd3fb));
+}
+.t-slider__scale-item--capsule {
+  height: var(--td-slider-capsule-line-heihgt, 36rpx);
+  width: 4rpx;
+  border-radius: 0;
+  background-color: var(--td-slider-capsule-bar-color, var(--td-gray-color-3, #e7e7e7));
+  margin-top: calc(-0.5 * var(--td-slider-capsule-line-heihgt, 36rpx));
+}
+.t-slider__scale-item--hidden {
+  background-color: transparent;
+}
+.t-slider__scale-desc {
+  position: absolute;
+  left: 50%;
+  color: rgba(0, 0, 0, 0.9);
+  transform: translateX(-50%);
+  bottom: 32rpx;
+}
+.t-slider__scale-desc--capsule {
+  bottom: 46rpx;
+}

miniprogram_npm/tdesign-miniprogram/slider/tool.d.ts

@@ -0,0 +1,2 @@
+export declare const trimSingleValue: (value: any, min: number, max: number) => number;
+export declare const trimValue: (value: number | number[], props: any) => number | number[];

miniprogram_npm/tdesign-miniprogram/slider/tool.js

@@ -0,0 +1,26 @@
+export const trimSingleValue = (value, min, max) => {
+    if (typeof value !== 'number') {
+        return min;
+    }
+    if (value < min) {
+        return min;
+    }
+    if (value > max) {
+        return max;
+    }
+    return value;
+};
+export const trimValue = (value, props) => {
+    const { min, max, range } = props;
+    if (range && Array.isArray(value)) {
+        value[0] = trimSingleValue(value[0], min, max);
+        value[1] = trimSingleValue(value[1], min, max);
+        return value[0] <= value[1] ? value : [value[1], value[0]];
+    }
+    if (range) {
+        return [min, max];
+    }
+    if (!range) {
+        return trimSingleValue(value, min, max);
+    }
+};

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

@@ -0,0 +1,63 @@
+export interface TdSliderProps {
+    colors?: {
+        type: ArrayConstructor;
+        value?: Array<string>;
+    };
+    customStyle?: {
+        type: StringConstructor;
+        value?: string;
+    };
+    disabled?: {
+        type: BooleanConstructor;
+        value?: boolean;
+    };
+    disabledColor?: {
+        type: ArrayConstructor;
+        value?: Array<string>;
+    };
+    externalClasses?: {
+        type: ArrayConstructor;
+        value?: ['t-class', 't-class-bar', 't-class-bar-active', 't-class-bar-disabled', 't-class-cursor'];
+    };
+    label?: {
+        type: null;
+        value?: string | boolean;
+    };
+    marks?: {
+        type: null;
+        value?: Record<number, string> | Array<number>;
+    };
+    max?: {
+        type: NumberConstructor;
+        value?: number;
+    };
+    min?: {
+        type: NumberConstructor;
+        value?: number;
+    };
+    range?: {
+        type: BooleanConstructor;
+        value?: boolean;
+    };
+    showExtremeValue?: {
+        type: BooleanConstructor;
+        value?: boolean;
+    };
+    step?: {
+        type: NumberConstructor;
+        value?: number;
+    };
+    theme?: {
+        type: StringConstructor;
+        value?: 'default' | 'capsule';
+    };
+    value?: {
+        type: null;
+        value?: SliderValue;
+    };
+    defaultValue?: {
+        type: null;
+        value?: SliderValue;
+    };
+}
+export declare type SliderValue = number | Array<number>;

miniprogram_npm/tdesign-miniprogram/slider/type.js

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