This commit is contained in:
lik
2026-05-28 17:06:18 +08:00
parent a93a75b3c6
commit db0f47d994
582 changed files with 8060 additions and 1781 deletions

View File

@@ -1 +1 @@
const props={animation:{type:Object},bottomLineMode:{type:String,value:"fixed"},externalClasses:{type:Array},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;
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;

View File

@@ -1 +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;
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;

View File

@@ -1 +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}
@import '../common/style/index.wxss';.t-tabs{position:relative;font:var(--td-tab-font,var(--td-font-body-medium,28rpx / 44rpx var(--td-font-family,PingFang SC,Microsoft YaHei,Arial Regular)));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;}

View File

@@ -8,10 +8,6 @@ export interface TdTabsProps {
type: StringConstructor;
value?: 'fixed' | 'auto' | 'full';
};
externalClasses?: {
type: ArrayConstructor;
value?: ['t-class', 't-class-item', 't-class-active', 't-class-track'];
};
showBottomLine?: {
type: BooleanConstructor;
value?: boolean;