初始化项目, 添加TDesign等包
This commit is contained in:
zhengw
24
miniprogram/miniprogram_npm/tdesign-miniprogram/progress/progress.d.ts
vendored
Normal file
24
miniprogram/miniprogram_npm/tdesign-miniprogram/progress/progress.d.ts
vendored
Normal file
@@ -0,0 +1,24 @@
|
||||
import { SuperComponent } from '../common/src/index';
|
||||
export default class Progress extends SuperComponent {
|
||||
externalClasses: string[];
|
||||
options: {
|
||||
multipleSlots: boolean;
|
||||
};
|
||||
properties: import("./type").TdProgressProps;
|
||||
data: {
|
||||
prefix: string;
|
||||
classPrefix: string;
|
||||
colorBar: string;
|
||||
heightBar: string;
|
||||
computedStatus: string;
|
||||
computedProgress: number;
|
||||
isIOS: boolean;
|
||||
};
|
||||
attached(): void;
|
||||
observers: {
|
||||
percentage(percentage: any): void;
|
||||
color(color: any): void;
|
||||
strokeWidth(strokeWidth: any): string;
|
||||
trackColor(trackColor: any): void;
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
import{__decorate}from"tslib";import{SuperComponent,wxComponent}from"../common/src/index";import config from"../common/config";import props from"./props";import{getBackgroundColor}from"./utils";import{unitConvert,isIOS as isIOSValidator}from"../common/utils";const{prefix:prefix}=config,name=`${prefix}-progress`;let Progress=class extends SuperComponent{constructor(){super(...arguments),this.externalClasses=[`${prefix}-class`,`${prefix}-class-bar`,`${prefix}-class-label`],this.options={multipleSlots:!0},this.properties=props,this.data={prefix:prefix,classPrefix:name,colorBar:"",heightBar:"",computedStatus:"",computedProgress:0,isIOS:!1},this.observers={percentage(o){o=Math.max(0,Math.min(o,100)),this.setData({computedStatus:100===o?"success":"",computedProgress:o})},color(o){this.setData({colorBar:getBackgroundColor(o),colorCircle:"object"==typeof o?"":o})},strokeWidth(o){if(!o)return"";this.setData({heightBar:unitConvert(o)})},trackColor(o){this.setData({bgColorBar:o})}}}attached(){const o=isIOSValidator();this.setData({isIOS:o})}};Progress=__decorate([wxComponent()],Progress);export default Progress;
|
||||
@@ -0,0 +1 @@
|
||||
{"component":true,"styleIsolation":"apply-shared","usingComponents":{"t-icon":"../icon/icon"}}
|
||||
@@ -0,0 +1 @@
|
||||
<import src="../common/template/icon.wxml"/><wxs src="../common/utils.wxs" module="_"/><wxs src="./progress.wxs" module="_this"/><view style="{{_._style([style, customStyle])}}" class="{{classPrefix}} class"><view wx:if="{{theme === _this.PRO_THEME.LINE}}" class="{{classPrefix }}--thin {{classPrefix}}--status--{{status || computedStatus}} {{prefix}}-class"><view aria-role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="{{computedProgress}}" aria-label="{{ ariaLabel || (isIOS ? _this.getIOSAriaLabel(status) : _this.getAndroidAriaLabel(status)) }}" aria-live="polite" class="{{classPrefix }}__bar" style="height: {{heightBar}}px;border-radius: {{heightBar}}px;background-color: {{bgColorBar}}"><view class="{{classPrefix }}__inner {{prefix}}-class-bar" style="background: {{colorBar}}; width: {{computedProgress + '%'}}"></view></view><view wx:if="{{label}}" class="{{classPrefix}}__info {{prefix}}-class-label" aria-hidden="{{ true }}"><template wx:if="{{_.includes(_this.STATUS, status)}}" is="icon" data="{{tClass: classPrefix + '__icon', size:'44rpx', name: _this.LINE_STATUS_ICON[status]}}"></template><text wx:else>{{ _.isString(label)? label: computedProgress + '%' }}</text></view><slot name="label"/></view><view aria-role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="{{computedProgress}}" aria-label="{{ ariaLabel || (isIOS ? _this.getIOSAriaLabel(status) : _this.getAndroidAriaLabel(status)) }}" aria-live="polite" wx:if="{{theme === _this.PRO_THEME.PLUMP}}" class="{{classPrefix}}__bar {{classPrefix}}--plump {{computedProgress > 10 ? classPrefix + '--over-ten': classPrefix + '--under-ten'}} {{classPrefix}}--status--{{status || computedStatus}} {{prefix}}-class" style="height: {{heightBar}}px;border-radius: {{heightBar}}px;background-color: {{bgColorBar}}"><view class="{{classPrefix}}__inner {{prefix}}-class-bar" style="background: {{colorBar}}; width: {{computedProgress}}%"><view wx:if="{{label && computedProgress > 10}}" class="{{classPrefix }}__info {{prefix}}-class-label"><text>{{ _.isString(label)? label: computedProgress + '%' }}</text></view><slot wx:if="{{computedProgress > 10}}" name="label"/></view><view wx:if="{{label && computedProgress <= 10}}" class="{{ classPrefix }}__info {{prefix}}-class-label" aria-hidden="{{ true }}"><text>{{ _.isString(label)? label: computedProgress + '%' }}</text></view><slot wx:if="{{computedProgress <= 10}}" name="label"/></view><view wx:if="{{theme === _this.PRO_THEME.CIRCLE}}" class="{{classPrefix}}--status--{{status || computedStatus}} {{prefix}}-class"><view aria-role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="{{computedProgress}}" aria-label="{{ ariaLabel || (isIOS ? _this.getIOSAriaLabel(status) : _this.getAndroidAriaLabel(status)) }}" aria-live="polite" class="{{_.cls(classPrefix + '__canvas--circle', [[size, true]])}}" style="{{_this.getCircleStyle(size, heightBar)}}; background-image: conic-gradient(from var(--td-progress-circle-from), {{colorCircle || _this.STATUS_COLOR[status] || 'var(--td-progress-inner-bg-color)'}} {{computedProgress}}%, {{bgColorBar || 'var(--td-progress-track-bg-color)'}} 0%);"><view class="{{classPrefix}}__canvas--inner {{prefix}}-class-bar"><view wx:if="{{label}}" class="{{classPrefix}}__info {{prefix}}-class-label" aria-hidden="{{ true }}"><template wx:if="{{_.includes(_this.STATUS, status)}}" is="icon" data="{{tClass: classPrefix + '__icon', size:'96rpx', name: _this.CIRCLE_STATUS_ICON[status]}}"></template><text wx:else>{{ _.isString(label)? label: computedProgress + '%' }}</text></view><slot name="label"/></view></view></view></view>
|
||||
@@ -0,0 +1,80 @@
|
||||
var utils = require('../common/utils.wxs');
|
||||
|
||||
var STATUS = ['success', 'error', 'warning'];
|
||||
var STATUS_TEXT = ['success', 'error', 'warning', 'active'];
|
||||
|
||||
var PRO_THEME = {
|
||||
LINE: 'line',
|
||||
PLUMP: 'plump',
|
||||
CIRCLE: 'circle',
|
||||
};
|
||||
|
||||
var STATUS_COLOR = {
|
||||
success: '#00a870',
|
||||
error: '#e34d59',
|
||||
warning: '#ed7b2f',
|
||||
};
|
||||
|
||||
var LINE_STATUS_ICON = {
|
||||
success: 'check-circle-filled',
|
||||
error: 'error-circle-filled',
|
||||
warning: 'error-circle-filled',
|
||||
};
|
||||
|
||||
var CIRCLE_STATUS_ICON = {
|
||||
success: 'check',
|
||||
error: 'close',
|
||||
warning: 'error',
|
||||
};
|
||||
|
||||
/**
|
||||
*
|
||||
* 1. getIOSAriaLabel， getAndroidAriaLabel 两个函数的初衷是处理progress异常情况的文案识别。
|
||||
* 2. iOS可以识别%，而安卓不会识别%，如 80， iOS可以识别成 80%， 而安卓只会80，因此android部分做了一个% 拼接，后续看是否有更好的方案去解决。
|
||||
* 3. 安卓 talkback 版本为 8.1.0.278818032 ，只会读一次 80， 最新版本talkback 会读 80.0, 80。（目前也是一个痛点，啰嗦了）
|
||||
*
|
||||
*/
|
||||
|
||||
function getIOSAriaLabel(status) {
|
||||
if (status === 'error') {
|
||||
return '进度失败';
|
||||
}
|
||||
if (status === 'warning') {
|
||||
return '进度异常';
|
||||
}
|
||||
return '';
|
||||
}
|
||||
|
||||
function getAndroidAriaLabel(status) {
|
||||
if (status === 'error') {
|
||||
return '%' + '，进度失败';
|
||||
}
|
||||
if (status === 'warning') {
|
||||
return '%' + '，进度异常';
|
||||
}
|
||||
return '%';
|
||||
}
|
||||
|
||||
function getCircleStyle(size, strokeWidth) {
|
||||
var styles = {
|
||||
'--td-progress-stroke-circle-width': utils.addUnit(strokeWidth),
|
||||
};
|
||||
|
||||
if (!utils.includes(['default', 'micro'], size)) {
|
||||
styles['--td-progress-circle-width'] = utils.addUnit(size);
|
||||
}
|
||||
|
||||
return utils._style(styles);
|
||||
}
|
||||
|
||||
module.exports = {
|
||||
STATUS: STATUS,
|
||||
STATUS_TEXT: STATUS_TEXT,
|
||||
PRO_THEME: PRO_THEME,
|
||||
STATUS_COLOR: STATUS_COLOR,
|
||||
LINE_STATUS_ICON: LINE_STATUS_ICON,
|
||||
CIRCLE_STATUS_ICON: CIRCLE_STATUS_ICON,
|
||||
getAndroidAriaLabel: getAndroidAriaLabel,
|
||||
getIOSAriaLabel: getIOSAriaLabel,
|
||||
getCircleStyle: getCircleStyle,
|
||||
};
|
||||
@@ -0,0 +1,26 @@
|
||||
@import '../common/style/index.wxss';.t-progress{--td-progress-inner-bg-color:var(--td-brand-color, var(--td-primary-color-7, #0052d9));--td-progress-track-bg-color:var(--td-bg-color-component, var(--td-gray-color-3, #e7e7e7));--td-progress-circle-from:0deg;}
|
||||
.t-progress__inner{position:relative;height:100%;background:var(--td-progress-inner-bg-color,var(--td-brand-color,var(--td-primary-color-7,#0052d9)));border-radius:var(--td-radius-round,999px);transition:all var(--td-anim-duration-base,.2s) var(--td-anim-time-fn-easing,cubic-bezier(.38,0,.24,1));}
|
||||
.t-progress__bar{width:100%;height:var(--td-progress-line-stroke-width,12rpx);overflow:hidden;background:var(--td-progress-track-bg-color,var(--td-bg-color-component,var(--td-gray-color-3,#e7e7e7)));border-radius:var(--td-radius-round,999px);}
|
||||
.t-progress__info{padding-left:var(--td-spacer,16rpx);box-sizing:border-box;color:var(--td-progress-info-dark-color,var(--td-text-color-primary,var(--td-font-gray-1,rgba(0,0,0,.9))));white-space:nowrap;display:inline-flex;}
|
||||
.t-progress--thin{display:flex;justify-content:space-between;align-items:center;}
|
||||
.t-progress--thin .t-progress__icon{font-size:calc(var(--td-font-size-base,28rpx) + 2px);}
|
||||
.t-progress--plump{height:var(--td-progress-stroke-plump-width,40rpx);border-radius:calc(var(--td-progress-stroke-plump-width,40rpx)/ 2);display:flex;align-items:center;}
|
||||
.t-progress--plump .t-progress__info{font-size:var(--td-font-size-s,24rpx);}
|
||||
.t-progress--over-ten .t-progress__info{position:absolute;top:50%;right:var(--td-spacer,16rpx);color:var(--td-progress-info-light-color,var(--td-text-color-anti,var(--td-font-white-1,#fff)));transform:translateY(-50%);}
|
||||
.t-progress--under-ten .t-progress__info,.t-progress--under-ten .t-progress__inner{display:inline-block;}
|
||||
.t-progress--under-ten .t-progress__info{vertical-align:top;}
|
||||
.t-progress__canvas--circle{position:relative;width:var(--td-progress-circle-width,224rpx);height:var(--td-progress-circle-width,224rpx);border-radius:var(--td-radius-circle,50%);}
|
||||
.t-progress__canvas--circle .t-progress__canvas--inner{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:calc(100% - var(--td-progress-stroke-circle-width,12rpx)*2);height:calc(100% - var(--td-progress-stroke-circle-width,12rpx)*2);border-radius:var(--td-radius-circle,50%);display:flex;flex-direction:row;justify-content:center;align-items:center;background-color:var(--td-progress-circle-inner-bg-color,var(--td-text-color-anti,var(--td-font-white-1,#fff)));}
|
||||
.t-progress__canvas--circle .t-progress__info{margin:0;font-size:var(--td-progress-circle-label-font-size,40rpx);font-weight:var(--td-progress-circle-label-font-weight,700);line-height:var(--td-progress-circle-label-line-height,56rpx);overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;}
|
||||
.t-progress__canvas--circle--micro{--td-progress-circle-width:48rpx;--td-progress-stroke-circle-width:4rpx;--td-progress-circle-icon-font-size:40rpx;}
|
||||
.t-progress--status--active .t-progress__inner::before{position:absolute;top:0;right:0;bottom:0;left:0;z-index:1;content:'';animation:progress-active-animation 2s cubic-bezier(.23,.99,.86,.2) infinite;background:var(--td-progress-inner-bg-color-active,var(--td-bg-color-container,var(--td-font-white-1,#fff)));opacity:.2;}
|
||||
.t-progress--status--success .t-progress__inner{background:var(--td-progress-inner-bg-color-success,var(--td-success-color,var(--td-success-color-5,#2ba471)));}
|
||||
.t-progress--status--success .t-progress__icon{color:var(--td-success-color,var(--td-success-color-5,#2ba471));}
|
||||
.t-progress--status--warning .t-progress__inner{background:var(--td-progress-inner-bg-color-warning,var(--td-warning-color,var(--td-warning-color-5,#e37318)));}
|
||||
.t-progress--status--warning .t-progress__icon{color:var(--td-warning-color,var(--td-warning-color-5,#e37318));}
|
||||
.t-progress--status--error .t-progress__inner{background:var(--td-progress-inner-bg-color-error,var(--td-error-color,var(--td-error-color-6,#d54941)));}
|
||||
.t-progress--status--error .t-progress__icon{color:var(--td-error-color,var(--td-error-color-6,#d54941));}
|
||||
@keyframes progress-active-animation{
|
||||
0%{width:0;opacity:.1;}
|
||||
35%{width:50%;opacity:.4;}
|
||||
100%{width:100%;opacity:0;}}
|
||||
3
miniprogram/miniprogram_npm/tdesign-miniprogram/progress/props.d.ts
vendored
Normal file
3
miniprogram/miniprogram_npm/tdesign-miniprogram/progress/props.d.ts
vendored
Normal file
@@ -0,0 +1,3 @@
|
||||
import { TdProgressProps } from './type';
|
||||
declare const props: TdProgressProps;
|
||||
export default props;
|
||||
@@ -0,0 +1 @@
|
||||
const props={color:{type:null,value:""},label:{type:null,value:!0},percentage:{type:Number,value:0},size:{type:null,value:"default"},status:{type:String},strokeWidth:{type:null},theme:{type:String,value:"line"},trackColor:{type:String,value:""}};export default props;
|
||||
36
miniprogram/miniprogram_npm/tdesign-miniprogram/progress/type.d.ts
vendored
Normal file
36
miniprogram/miniprogram_npm/tdesign-miniprogram/progress/type.d.ts
vendored
Normal file
@@ -0,0 +1,36 @@
|
||||
export interface TdProgressProps {
|
||||
color?: {
|
||||
type: null;
|
||||
value?: string | Array<string> | Record<string, string>;
|
||||
};
|
||||
label?: {
|
||||
type: null;
|
||||
value?: string | boolean;
|
||||
};
|
||||
percentage?: {
|
||||
type: NumberConstructor;
|
||||
value?: number;
|
||||
};
|
||||
size?: {
|
||||
type: null;
|
||||
value?: string | number;
|
||||
};
|
||||
status?: {
|
||||
type: StringConstructor;
|
||||
value?: ProgressStatus;
|
||||
};
|
||||
strokeWidth?: {
|
||||
type: null;
|
||||
value?: string | number;
|
||||
};
|
||||
theme?: {
|
||||
type: StringConstructor;
|
||||
value?: ProgressTheme;
|
||||
};
|
||||
trackColor?: {
|
||||
type: StringConstructor;
|
||||
value?: string;
|
||||
};
|
||||
}
|
||||
export declare type ProgressStatus = 'success' | 'error' | 'warning' | 'active';
|
||||
export declare type ProgressTheme = 'line' | 'plump' | 'circle';
|
||||
@@ -0,0 +1 @@
|
||||
export{};
|
||||
11
miniprogram/miniprogram_npm/tdesign-miniprogram/progress/utils.d.ts
vendored
Normal file
11
miniprogram/miniprogram_npm/tdesign-miniprogram/progress/utils.d.ts
vendored
Normal file
@@ -0,0 +1,11 @@
|
||||
export declare type Gradients = {
|
||||
[percent: string]: string;
|
||||
};
|
||||
export declare type FromTo = {
|
||||
from: string;
|
||||
to: string;
|
||||
};
|
||||
export declare type LinearGradient = {
|
||||
direction?: string;
|
||||
} & (Gradients | FromTo);
|
||||
export declare function getBackgroundColor(color: string | string[] | LinearGradient): string;
|
||||
@@ -0,0 +1 @@
|
||||
import{__rest}from"tslib";export function getBackgroundColor(r){if("string"==typeof r)return r;if(Array.isArray(r))return r[0]&&"#"===r[0][0]&&r.unshift("90deg"),`linear-gradient( ${r.join(",")} )`;const{from:t,to:e,direction:n="to right"}=r,i=__rest(r,["from","to","direction"]);let o=Object.keys(i);if(o.length){o=o.sort((r,t)=>parseFloat(r.substr(0,r.length-1))-parseFloat(t.substr(0,t.length-1)));return`linear-gradient(${n}, ${o.map(r=>`${i[r]} ${r}`).join(",")})`}return`linear-gradient(${n}, ${t}, ${e})`}
|
||||
Reference in New Issue
Block a user