初始化项目, 添加TDesign等包

miniprogram/miniprogram_npm/tdesign-miniprogram/tabs/index.d.ts

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

miniprogram/miniprogram_npm/tdesign-miniprogram/tabs/index.js

@@ -0,0 +1 @@
+export*from"./tabs";export*from"./type";export*from"./props";

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

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

miniprogram/miniprogram_npm/tdesign-miniprogram/tabs/props.js

@@ -0,0 +1 @@
+const props={animation:{type:Object},bottomLineMode:{type:String,value:"fixed"},showBottomLine:{type:Boolean,value:!0},spaceEvenly:{type:Boolean,value:!0},split:{type:Boolean,value:!0},sticky:{type:Boolean,value:!1},stickyProps:{type:Object},swipeable:{type:Boolean,value:!0},theme:{type:String,value:"line"},value:{type:null,value:null},defaultValue:{type:null}};export default props;

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

@@ -0,0 +1,59 @@
+import { RelationsOptions, SuperComponent } from '../common/src/index';
+import { TdTabsProps } from './type';
+export interface TabsProps extends TdTabsProps {
+}
+export default class Tabs extends SuperComponent {
+    options: {
+        pureDataPattern: RegExp;
+    };
+    behaviors: string[];
+    externalClasses: string[];
+    relations: RelationsOptions;
+    properties: TdTabsProps;
+    controlledProps: {
+        key: string;
+        event: string;
+    }[];
+    observers: {
+        value(name: any): void;
+    };
+    data: {
+        prefix: string;
+        classPrefix: string;
+        tabs: any[];
+        currentLabels: any[];
+        currentIndex: number;
+        trackOption: {
+            lineWidth: number;
+            distance: number;
+            isInit: boolean;
+        };
+        offset: number;
+        scrollLeft: number;
+        tabID: string;
+        placement: string;
+    };
+    lifetimes: {
+        created(): void;
+        attached(): void;
+    };
+    initChildId(): void;
+    methods: {
+        onScroll(e: any): void;
+        updateTabs(cb: any): void;
+        setCurrentIndexByName(name: any): void;
+        setCurrentIndex(index: number): void;
+        getCurrentName(): any;
+        calcScrollOffset(containerWidth: number, targetLeft: number, targetWidth: number, offset: number): number;
+        getTabHeight(): Promise<any>;
+        getTrackSize(): Promise<number>;
+        setTrack(): Promise<void>;
+        onTabTap(event: any): void;
+        onTouchStart(event: any): void;
+        onTouchMove(event: any): void;
+        onTouchEnd(): void;
+        onTouchScroll(event: WechatMiniprogram.CustomEvent): void;
+        changeIndex(index: any): void;
+        getAvailableTabIndex(deltaX: number): any;
+    };
+}

miniprogram/miniprogram_npm/tdesign-miniprogram/tabs/tabs.js

@@ -0,0 +1 @@
+import{__awaiter,__decorate}from"tslib";import{SuperComponent,wxComponent}from"../common/src/index";import props from"./props";import config from"../common/config";import touch from"../mixins/touch";import{getRect,uniqueFactory}from"../common/utils";import{getObserver}from"../common/wechat";const{prefix:prefix}=config,name=`${prefix}-tabs`,getUniqueID=uniqueFactory("tabs");let Tabs=class extends SuperComponent{constructor(){super(...arguments),this.options={pureDataPattern:/^currentLabels$/},this.behaviors=[touch],this.externalClasses=[`${prefix}-class`,`${prefix}-class-item`,`${prefix}-class-active`,`${prefix}-class-track`,`${prefix}-class-content`],this.relations={"../tab-panel/tab-panel":{type:"descendant",linked(t){this.children.push(t),this.initChildId(),t.index=this.children.length-1,this.updateTabs()},unlinked(t){this.children=this.children.filter(e=>e.index!==t.index),this.updateTabs(()=>this.setTrack()),this.initChildId()}}},this.properties=props,this.controlledProps=[{key:"value",event:"change"}],this.observers={value(t){t!==this.getCurrentName()&&this.setCurrentIndexByName(t)}},this.data={prefix:prefix,classPrefix:name,tabs:[],currentLabels:[],currentIndex:-1,trackOption:{lineWidth:0,distance:0,isInit:!0},offset:0,scrollLeft:0,tabID:"",placement:"top"},this.lifetimes={created(){this.children=this.children||[]},attached(){wx.nextTick(()=>{this.setTrack()}),getRect(this,`.${name}`).then(t=>{this.containerWidth=t.width}),this.setData({tabID:getUniqueID()})}},this.methods={onScroll(t){const{scrollLeft:e}=t.detail;this.setData({scrollLeft:e})},updateTabs(t){const{children:e}=this,i=e.map(t=>t.data);i.forEach(t=>{"string"==typeof t.icon&&(t.icon={name:t.icon})}),this.setData({tabs:i},t),this.setCurrentIndexByName(this.properties.value)},setCurrentIndexByName(t){const{children:e}=this,i=e.findIndex(e=>e.getComputedName()===`${t}`);i>-1&&this.setCurrentIndex(i)},setCurrentIndex(t){if(t<=-1||t>=this.children.length)return;const e=[];this.children.forEach((i,s)=>{const r=t===s;r===i.data.active&&i.initialized||i.render(r,this),e.push(i.data.label)});const{currentIndex:i,currentLabels:s}=this.data;i===t&&s.join("")===e.join("")||this.setData({currentIndex:t,currentLabels:e},()=>{this.setTrack()})},getCurrentName(){if(this.children){const t=this.children[this.data.currentIndex];if(t)return t.getComputedName()}},calcScrollOffset:(t,e,i,s)=>s+e-.5*t+i/2,getTabHeight(){return getRect(this,`.${name}`)},getTrackSize(){const{bottomLineMode:t}=this.properties,e={fixed:`.${prefix}-tabs__track`,auto:`.${prefix}-tabs__item--active .${prefix}-tabs__item-inner`,full:`.${prefix}-tabs__item--active`};return new Promise((i,s)=>{this.trackWidth?i(this.trackWidth):getRect(this,e[t]||e.fixed).then(t=>{t&&i(t.width)}).catch(s)})},setTrack(){return __awaiter(this,void 0,void 0,function*(){const{children:t}=this;if(!t)return;const{currentIndex:e}=this.data;if(!(e<=-1))try{const t=yield getRect(this,`.${prefix}-tabs__item`,!0),i=t[e];if(!i)return;let s=0,r=0,n=0;if(t.forEach(t=>{s<e&&(r+=t.width,s+=1),n+=t.width}),this.containerWidth){const t=this.calcScrollOffset(this.containerWidth,i.left,i.width,this.data.scrollLeft),e=n-this.containerWidth;this.setData({offset:Math.min(Math.max(t,0),e)})}else this._hasObserved||(this._hasObserved=!0,getObserver(this,`.${name}`).then(()=>this.setTrack()));const a=yield this.getTrackSize();"line"===this.data.theme&&(r+=(i.width-a)/2);const h=void 0===this.previousIndex;(h||this.previousIndex!==e)&&(this.previousIndex=e,this.setData({trackOption:{lineWidth:a,distance:r,isInit:h}}))}catch(t){this.triggerEvent("error",t)}})},onTabTap(t){const{index:e}=t.currentTarget.dataset;this.changeIndex(e)},onTouchStart(t){this.properties.swipeable&&this.touchStart(t)},onTouchMove(t){this.properties.swipeable&&this.touchMove(t)},onTouchEnd(){if(!this.properties.swipeable)return;const{direction:t,deltaX:e,offsetX:i}=this;if("horizontal"===t&&i>=50){const t=this.getAvailableTabIndex(e);-1!==t&&this.changeIndex(t)}},onTouchScroll(t){this._trigger("scroll",t.detail)},changeIndex(t){const e=this.data.tabs[t],{value:i,label:s}=e;(null==e?void 0:e.disabled)||t===this.data.currentIndex||this._trigger("change",{value:i,label:s}),this._trigger("click",{value:i,label:s})},getAvailableTabIndex(t){const e=t>0?-1:1,{currentIndex:i,tabs:s}=this.data,r=s.length;for(let t=e;i+e>=0&&i+e<r;t+=e){const e=i+t;if(!(e>=0&&e<r&&s[e]))return i;if(!s[e].disabled)return e}return-1}}}initChildId(){this.children.forEach((t,e)=>{t.setId(`${this.data.tabID}_panel_${e}`)})}};Tabs=__decorate([wxComponent()],Tabs);export default Tabs;

miniprogram/miniprogram_npm/tdesign-miniprogram/tabs/tabs.json

@@ -0,0 +1 @@
+{"component":true,"styleIsolation":"apply-shared","usingComponents":{"t-sticky":"../sticky/sticky","t-badge":"../badge/badge","t-icon":"../icon/icon"}}

miniprogram/miniprogram_npm/tdesign-miniprogram/tabs/tabs.wxml

@@ -0,0 +1 @@
+<import src="../common/template/badge.wxml"/><import src="../common/template/icon.wxml"/><wxs src="./tabs.wxs" module="_tabs"/><wxs src="../common/utils.wxs" module="_"/><view style="{{_._style([style, customStyle])}}" class="{{_.cls(classPrefix, [placement])}} class {{prefix}}-class"><t-sticky t-class="{{_.cls(classPrefix + '__sticky', [placement])}}" disabled="{{ !sticky }}" z-index="{{ stickyProps.zIndex || '1' }}" offset-top="{{ stickyProps.offsetTop || 0 }}" container="{{ stickyProps.container }}" bind:scroll="onTouchScroll"><view class="{{_.cls(classPrefix + '__wrapper', [theme])}}"><scroll-view class="{{_.cls(classPrefix + '__scroll', [placement, ['split', split]])}}" enhanced enable-flex scroll-left="{{offset}}" scroll-x="{{true}}" scroll-anchoring scroll-with-animation enable-passive show-scrollbar="{{false}}" type="list" bind:scroll="onScroll"><view class="{{_.cls(classPrefix + '__nav', [placement, ['evenly', spaceEvenly]])}}" aria-role="tablist"><view wx:for="{{tabs}}" wx:key="index" data-index="{{index}}" class="{{_.cls(classPrefix + '__item', [theme, ['evenly', spaceEvenly], placement, ['disabled', item.disabled], ['active', currentIndex === index]])}} {{currentIndex === index ? prefix + '-class-active' : ''}} {{prefix}}-class-item" bind:tap="onTabTap" aria-role="tab" aria-controls="{{tabID + '_panel_' + index}}" aria-selected="{{currentIndex === index}}" aria-disabled="{{item.disabled}}" aria-label="{{ ariaLabel || (item.badgeProps.dot || item.badgeProps.count ? item.label + _.getBadgeAriaLabel({ ...item.badgeProps }) : '') }}"><view class="{{_.cls(classPrefix + '__item-inner', [theme, ['active', currentIndex === index]])}}" aria-hidden="{{ item.badgeProps.dot || item.badgeProps.count }}"><template wx:if="{{item.icon}}" is="icon" data="{{ tClass: classPrefix + '__icon', ...item.icon }}"/><block wx:if="{{item.badgeProps}}"><template is="badge" data="{{ ...item.badgeProps, content: item.label, tClass: _.cls(classPrefix + '__badge', [ ['disabled', item.disabled], ['active', currentIndex === index]])}}"/></block><block wx:else>{{item.label}}</block></view><view wx:if="{{theme == 'card' && currentIndex - 1 == index}}" class="{{classPrefix}}__item-prefix"/><view wx:if="{{theme == 'card' && currentIndex + 1 == index}}" class="{{classPrefix}}__item-suffix"/></view><view wx:if="{{theme == 'line' && showBottomLine}}" class="{{_.cls(classPrefix + '__track', [placement])}} {{prefix}}-class-track" style="{{_tabs.trackStyle(trackOption)}}"/></view></scroll-view></view></t-sticky><slot name="middle"/><view class="{{_.cls(classPrefix + '__content', [['animated', animation]])}}" bind:touchstart="onTouchStart" bind:touchmove="onTouchMove" bind:touchend="onTouchEnd" bind:touchcancel="onTouchEnd"><view class="{{classPrefix}}__content-inner {{prefix}}-class-content" style="{{ _tabs.animate({duration: animation.duration, currentIndex:currentIndex}) }}"><slot/></view></view></view>

miniprogram/miniprogram_npm/tdesign-miniprogram/tabs/tabs.wxs

@@ -0,0 +1,30 @@
+var utils = require('../common/utils.wxs');
+
+function animate(options) {
+  if (options.duration) {
+    return utils._style({
+      'transition-duration': options.duration + 's',
+      transform: 'translate3d( ' + -100 * options.currentIndex + '%,0, 0)',
+    });
+  }
+  return '';
+}
+
+function trackStyle(options) {
+  if (options.distance || options.lineWidth) {
+    return utils._style({
+      '-webkit-transform': 'translateX(' + options.distance + 'px)',
+      transform: 'translateX(' + options.distance + 'px)',
+      'transition-duration': options.isInit ? '0' : '0.3s',
+      width: options.lineWidth + 'px',
+      opacity: 1,
+    });
+  }
+
+  return '';
+}
+
+module.exports = {
+  animate: animate,
+  trackStyle: trackStyle,
+};

miniprogram/miniprogram_npm/tdesign-miniprogram/tabs/tabs.wxss

@@ -0,0 +1,39 @@
+@import '../common/style/index.wxss';.t-tabs{position:relative;font-size:var(--td-tab-font-size,28rpx);background:var(--td-tab-nav-bg-color,var(--td-bg-color-container,var(--td-font-white-1,#fff)));flex-wrap:wrap;}
+.t-tabs__wrapper{display:flex;overflow:hidden;background:var(--td-tab-nav-bg-color,var(--td-bg-color-container,var(--td-font-white-1,#fff)));}
+.t-tabs__wrapper--card{background:var(--td-tab-item-tag-bg,var(--td-bg-color-secondarycontainer,var(--td-gray-color-1,#f3f3f3)));--td-tab-border-color:transparent;}
+.t-tabs__item{position:relative;display:flex;flex:none;align-items:center;justify-content:center;font-weight:400;color:var(--td-tab-item-color,var(--td-text-color-primary,var(--td-font-gray-1,rgba(0,0,0,.9))));padding:0 var(--td-spacer-2,32rpx);box-sizing:border-box;white-space:nowrap;overflow:hidden;height:var(--td-tab-item-height,96rpx);}
+.t-tabs__item--active{font-weight:600;color:var(--td-tab-item-active-color,var(--td-brand-color,var(--td-primary-color-7,#0052d9)));}
+.t-tabs__item--disabled{color:var(--td-tab-item-disabled-color,var(--td-text-color-disabled,var(--td-font-gray-4,rgba(0,0,0,.26))));}
+.t-tabs__item--evenly{flex:1 0 auto;}
+.t-tabs__item-inner{display:flex;align-items:center;justify-content:center;}
+.t-tabs__item-inner--tag{width:100%;text-align:center;padding:0 var(--td-spacer-2,32rpx);line-height:var(--td-tab-item-tag-height,64rpx);border-radius:calc(var(--td-tab-item-tag-height,64rpx)/ 2);background-color:var(--td-tab-item-tag-bg,var(--td-bg-color-secondarycontainer,var(--td-gray-color-1,#f3f3f3)));}
+.t-tabs__item-inner--active.t-tabs__item-inner--tag{background-color:var(--td-tab-item-tag-active-bg,var(--td-brand-color-light,var(--td-primary-color-1,#f2f3ff)));}
+.t-tabs__item--tag:not(.t-tabs__item--evenly){padding:0 calc(var(--td-spacer,16rpx)/ 2);}
+.t-tabs__item--tag:not(.t-tabs__item--evenly):first-child{margin-left:var(--td-spacer,16rpx);}
+.t-tabs__item--tag:not(.t-tabs__item--evenly):last-child{padding-right:var(--td-spacer-1,24rpx);}
+.t-tabs__item--tag{padding:0 var(--td-spacer,16rpx);}
+.t-tabs__item--card.t-tabs__item--active{background-color:var(--td-tab-nav-bg-color,var(--td-bg-color-container,var(--td-font-white-1,#fff)));border-radius:var(--td-radius-large,18rpx) var(--td-radius-large,18rpx) 0 0;}
+.t-tabs__item--card.t-tabs__item--active:first-child{border-top-left-radius:0;}
+.t-tabs__item--card.t-tabs__item--active:last-child{border-top-right-radius:0;}
+.t-tabs__item--card.t-tabs__item--pre{border-bottom-right-radius:var(--td-radius-large,18rpx);}
+.t-tabs__item-prefix,.t-tabs__item-suffix{position:absolute;bottom:0;width:18rpx;height:18rpx;background-color:var(--td-tab-nav-bg-color,var(--td-bg-color-container,var(--td-font-white-1,#fff)));}
+.t-tabs__item-prefix::after,.t-tabs__item-suffix::after{content:'';display:block;width:100%;height:100%;background-color:var(--td-tab-item-tag-bg,var(--td-bg-color-secondarycontainer,var(--td-gray-color-1,#f3f3f3)));}
+.t-tabs__item-prefix{right:0;}
+.t-tabs__item-prefix::after{border-bottom-right-radius:var(--td-radius-large,18rpx);}
+.t-tabs__item-suffix{left:0;}
+.t-tabs__item-suffix::after{border-bottom-left-radius:var(--td-radius-large,18rpx);}
+.t-tabs__badge--active{--td-badge-content-text-color:var(--td-tab-item-active-color, var(--td-brand-color, var(--td-primary-color-7, #0052d9)));}
+.t-tabs__badge--disabled{--td-badge-content-text-color:var(--td-tab-item-disabled-color, var(--td-text-color-disabled, var(--td-font-gray-4, rgba(0, 0, 0, 0.26))));}
+.t-tabs__icon{font-size:var(--td-tab-icon-size,36rpx);margin-right:calc(var(--td-spacer,16rpx)/ 4);}
+.t-tabs__content{overflow:hidden;}
+.t-tabs__nav{position:relative;user-select:none;display:flex;flex-wrap:nowrap;align-items:center;}
+.t-tabs__nav.t-tabs__nav--evenly{width:100%;}
+.t-tabs__track{position:absolute;font-weight:600;z-index:1;opacity:0;background-color:var(--td-tab-track-color,var(--td-brand-color,var(--td-primary-color-7,#0052d9)));left:0;bottom:1rpx;width:var(--td-tab-track-width,32rpx);height:var(--td-tab-track-thickness,6rpx);border-radius:var(--td-tab-track-radius,8rpx);}
+.t-tabs__scroll{position:relative;height:var(--td-tab-item-height,96rpx);}
+.t-tabs__scroll--split{position:relative;}
+.t-tabs__scroll--split::after{content:'';display:block;position:absolute;top:unset;bottom:0;left:unset;right:unset;background-color:var(--td-tab-border-color,var(--td-component-stroke,var(--td-gray-color-3,#e7e7e7)));}
+.t-tabs__scroll--split::after{height:1px;left:0;right:0;transform:scaleY(.5);}
+.t-tabs__scroll::-webkit-scrollbar{display:none;}
+.t-tabs__content{width:100%;}
+.t-tabs__content-inner{display:block;}
+.t-tabs__content--animated .t-tabs__content-inner{position:relative;width:100%;height:100%;display:flex;will-change:left;transition-property:transform;}

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

@@ -0,0 +1,51 @@
+import { StickyProps } from '../sticky/index';
+export interface TdTabsProps {
+    animation?: {
+        type: ObjectConstructor;
+        value?: TabAnimation;
+    };
+    bottomLineMode?: {
+        type: StringConstructor;
+        value?: 'fixed' | 'auto' | 'full';
+    };
+    showBottomLine?: {
+        type: BooleanConstructor;
+        value?: boolean;
+    };
+    spaceEvenly?: {
+        type: BooleanConstructor;
+        value?: boolean;
+    };
+    split?: {
+        type: BooleanConstructor;
+        value?: boolean;
+    };
+    sticky?: {
+        type: BooleanConstructor;
+        value?: boolean;
+    };
+    stickyProps?: {
+        type: ObjectConstructor;
+        value?: StickyProps;
+    };
+    swipeable?: {
+        type: BooleanConstructor;
+        value?: boolean;
+    };
+    theme?: {
+        type: StringConstructor;
+        value?: 'line' | 'tag' | 'card';
+    };
+    value?: {
+        type: null;
+        value?: TabValue;
+    };
+    defaultValue?: {
+        type: null;
+        value?: TabValue;
+    };
+}
+export declare type TabAnimation = {
+    duration: number;
+} & Record<string, any>;
+export declare type TabValue = string | number;

miniprogram/miniprogram_npm/tdesign-miniprogram/tabs/type.js

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