maxit-cli 0.1.0

package/registry/components/swiper-nav/swiper-nav.wxss

@@ -0,0 +1,155 @@
+@import '../common/style/index.wxss';
+
+.o-swiper-nav__dots,
+.o-swiper-nav__dots-bar {
+    display: flex;
+    flex-direction: row;
+}
+
+.o-swiper-nav__dots-bar-item,
+.o-swiper-nav__dots-item {
+    width: var(--o-swiper-nav-dot-size,12rpx);
+    height: var(--o-swiper-nav-dot-size,12rpx);
+    background: var(--o-swiper-nav-dot-color,var(--o-font-white-2,rgba(255,255,255,.55)));
+    border-radius: var(--o-radius-circle,50%);
+    margin: 0 10rpx;
+    transition: all .4s ease-in;
+}
+
+.o-swiper-nav__dots-bar-item--vertical,
+.o-swiper-nav__dots-item--vertical {
+    margin: 10rpx 0;
+}
+
+.o-swiper-nav__dots-bar-item--active,
+.o-swiper-nav__dots-item--active {
+    background-color: var(--o-swiper-nav-dot-active-color,var(--o-text-color-anti,var(--o-font-white-1,#fff)));
+}
+
+.o-swiper-nav__dots-bar-item--vertical.o-swiper-nav__dots-bar-item--active {
+    width: var(--o-swiper-nav-dot-size,12rpx);
+    height: var(--o-swiper-nav-dots-bar-active-width,40rpx);
+}
+
+.o-swiper-nav__dots-bar-item--active {
+    width: var(--o-swiper-nav-dots-bar-active-width,40rpx);
+    border-radius: calc(var(--o-swiper-nav-dot-size,12rpx)/ 2);
+    background-color: var(--o-swiper-nav-dot-active-color,var(--o-text-color-anti,var(--o-font-white-1,#fff)));
+}
+
+.o-swiper-nav--left {
+    position: absolute;
+    left: 24rpx;
+    top: 50%;
+    transform: translateY(-50%);
+}
+
+.o-swiper-nav--right {
+    position: absolute;
+    right: 24rpx;
+    top: 50%;
+    transform: translateY(-50%);
+}
+
+.o-swiper-nav--top-left {
+    position: absolute;
+    top: 24rpx;
+    left: 24rpx;
+}
+
+.o-swiper-nav--top {
+    position: absolute;
+    left: 50%;
+    top: 24rpx;
+    transform: translateX(-50%);
+}
+
+.o-swiper-nav--top-right {
+    position: absolute;
+    top: 24rpx;
+    right: 24rpx;
+}
+
+.o-swiper-nav--bottom-left {
+    position: absolute;
+    left: 24rpx;
+    bottom: 24rpx;
+}
+
+.o-swiper-nav--bottom {
+    position: absolute;
+    left: 50%;
+    bottom: 24rpx;
+    transform: translateX(-50%);
+}
+
+.o-swiper-nav--bottom-right {
+    position: absolute;
+    right: 24rpx;
+    bottom: 24rpx;
+}
+
+.o-swiper-nav--vertical {
+    flex-direction: column;
+}
+
+.o-swiper-nav__fraction {
+    padding: 0 var(--o-spacer,16rpx);
+    height: var(--o-swiper-nav-fraction-height,48rpx);
+    border-radius: calc(var(--o-swiper-nav-fraction-height,48rpx)/ 2);
+    background: var(--o-swiper-nav-fraction-bg-color,var(--o-font-gray-3,#8d8d8d));
+    color: var(--o-swiper-nav-fraction-color,var(--o-text-color-anti,var(--o-font-white-1,#fff)));
+    font: var(--o-swiper-nav-fraction-font,var(--o-font-body-small,24rpx / 40rpx var(--o-font-family,Roboto,PingFang SC,Microsoft YaHei,Arial)));
+}
+
+.o-swiper-nav__btn {
+    width: 100%;
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+}
+
+.o-swiper-nav__btn--next,
+.o-swiper-nav__btn--prev {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    width: var(--o-swiper-nav-btn-size,48rpx);
+    height: var(--o-swiper-nav-btn-size,48rpx);
+    border-radius: var(--o-radius-circle,50%);
+    background: var(--o-swiper-nav-btn-bg-color,var(--o-font-gray-3,#8d8d8d));
+}
+
+.o-swiper-nav__btn--next::after,
+.o-swiper-nav__btn--prev::after {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    display: block;
+    content: '';
+    width: 12rpx;
+    height: 12rpx;
+    border-color: var(--o-swiper-nav-btn-color,var(--o-text-color-anti,var(--o-font-white-1,#fff)));
+    border-style: solid;
+}
+
+.o-swiper-nav__btn--prev {
+    left: 30rpx;
+}
+
+.o-swiper-nav__btn--prev::after {
+    margin-left: calc(var(--o-spacer,16rpx)/ 4);
+    border-width: 2rpx 0 0 2rpx;
+    transform: translate(-50%,-50%) rotateZ(-45deg);
+}
+
+.o-swiper-nav__btn--next {
+    right: 30rpx;
+}
+
+.o-swiper-nav__btn--next::after {
+    margin-left: calc(-1 * var(--o-spacer,16rpx)/ 4);
+    border-width: 2rpx 2rpx 0 0;
+    transform: translate(-50%,-50%) rotateZ(45deg);
+}
+

package/registry/components/switch/index.js

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

package/registry/components/switch/props.js

@@ -0,0 +1 @@
+const props={customValue:{type:Array,value:[!0,!1]},disabled:{type:null,value:void 0},icon:{type:Array,value:[]},label:{type:Array,value:[]},loading:{type:Boolean,value:!1},size:{type:String,value:"medium"},value:{type:null,value:null},defaultValue:{type:null,value:null}};export default props;

package/registry/components/switch/switch.js

@@ -0,0 +1 @@
+import{__decorate}from"../common/tslib";import{wxComponent,SuperComponent}from"../common/src/index";import config from"../common/config";import props from"./props";const{prefix:prefix}=config,name=`${prefix}-switch`;let Switch=class extends SuperComponent{constructor(){super(...arguments),this.externalClasses=[`${prefix}-class`,`${prefix}-class-label`,`${prefix}-class-body`,`${prefix}-class-dot`],this.behaviors=["wx://form-field"],this.properties=props,this.data={prefix:prefix,classPrefix:name,checked:!1},this.controlledProps=[{key:"value",event:"change"}],this.observers={value(e){const[t]=this.data.customValue;this.setData({checked:e===t})}},this.methods={handleSwitch(){const{loading:e,disabled:t,value:s,customValue:o}=this.data,[i,r]=o;e||t||this._trigger("change",{value:s===i?r:i})}}}};Switch=__decorate([wxComponent()],Switch);export default Switch;

package/registry/components/switch/switch.json

@@ -0,0 +1 @@
+{"component":true,"styleIsolation":"apply-shared","usingComponents":{"o-icon":"../icon/icon","o-loading":"../loading/loading"}}

package/registry/components/switch/switch.wxml

@@ -0,0 +1 @@
+<wxs src="../common/utils.wxs" module="_"/><view style="{{_._style([style, customStyle])}}" class="class {{ prefix }}-class {{classPrefix}}" bind:tap="handleSwitch" aria-checked="{{checked}}" aria-disabled="{{disabled}}" aria-role="switch"><view class="{{_.cls(classPrefix + '__body', [['checked', checked], ['disabled', disabled || loading], size])}} {{prefix}}-class-body"><view class="{{_.cls(classPrefix + '__dot', [['checked', checked], ['disabled', disabled || loading], ['plain', label.length != 2 && icon.length != 2 && !loading], size])}} {{prefix}}-class-dot" aria-hidden="{{true}}"><view wx:if="{{label}}" class="{{_.cls(classPrefix + '__label', [['checked', checked], ['disabled', disabled], size])}} {{prefix}}-class-label"><o-loading wx:if="{{loading}}" class="{{classPrefix}}__loading" size="32rpx"/><text wx:elif="{{label.length == 2}}">{{checked ? label[0] : label[1]}}</text><o-icon wx:elif="{{icon.length == 2}}" name="{{checked ? icon[0] : icon[1]}}" o-class="{{_.cls(classPrefix + '__icon', [['checked', checked], size])}}"/></view></view></view></view>

package/registry/components/switch/switch.wxss

@@ -0,0 +1,169 @@
+@import '../common/style/index.wxss';
+
+.o-switch {
+    display: flex;
+    align-items: center;
+    overflow: hidden;
+}
+
+.o-switch__label {
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-wrap: nowrap;
+    font-size: var(--o-switch-label-font-size,var(--o-font-size-base,28rpx));
+    color: var(--o-switch-label-color,var(--o-bg-color-secondarycontainer-active,var(--o-gray-color-4,#dddddd)));
+    overflow: hidden;
+}
+
+.o-switch__label--checked {
+    color: var(--o-switch-label-checked-color,var(--o-switch-checked-color,var(--o-brand-color,var(--o-primary-color-7,#f16e00))));
+}
+
+.o-switch__label--disabled {
+    color: var(--o-switch-unchecked-disabled-color,var(--o-bg-color-component-disabled,var(--o-gray-color-2,#eee)));
+}
+
+.o-switch__label--checked.o-switch__label--disabled {
+    color: var(--o-switch-checked-disabled-color,var(--o-brand-color-disabled,var(--o-primary-color-3,#f9c599)));
+}
+
+.o-switch__label--large {
+    font-size: var(--o-switch-label-large-font-size,var(--o-font-size-m,32rpx));
+}
+
+.o-switch__label--small {
+    font-size: var(--o-switch-label-small-font-size,var(--o-font-size-s,24rpx));
+}
+
+.o-switch__label:empty {
+    display: none;
+}
+
+.o-switch__icon {
+    font-size: var(--o-switch-icon-size,40rpx);
+}
+
+.o-switch__icon--large {
+    font-size: var(--o-switch-icon-large-size,48rpx);
+}
+
+.o-switch__icon--small {
+    font-size: var(--o-switch-icon-small-size,32rpx);
+}
+
+.o-switch__loading {
+    --o-loading-color: var(--o-switch-loading-color, var(--o-brand-color, var(--o-primary-color-7, #f16e00)));
+}
+
+.o-switch__body {
+    vertical-align: middle;
+    width: var(--o-switch-width,90rpx);
+    height: var(--o-switch-height,56rpx);
+    border-radius: var(--o-switch-radius,calc(var(--o-switch-height,56rpx)/ 2));
+    background-color: var(--o-switch-unchecked-color,var(--o-bg-color-secondarycontainer-active,var(--o-gray-color-4,#dddddd)));
+    position: relative;
+    transition: all .3s ease;
+    overflow: hidden;
+}
+
+.o-switch__body--checked {
+    background-color: var(--o-switch-checked-color,var(--o-brand-color,var(--o-primary-color-7,#f16e00)));
+}
+
+.o-switch__body--disabled {
+    background-color: var(--o-switch-unchecked-disabled-color,var(--o-bg-color-component-disabled,var(--o-gray-color-2,#eee)));
+}
+
+.o-switch__body--checked.o-switch__body--disabled {
+    background-color: var(--o-switch-checked-disabled-color,var(--o-brand-color-disabled,var(--o-primary-color-3,#f9c599)));
+}
+
+.o-switch__body--large {
+    width: var(--o-switch-large-width,104rpx);
+    height: var(--o-switch-large-height,64rpx);
+    border-radius: var(--o-switch-large-radius,calc(var(--o-switch-large-height,64rpx)/ 2));
+}
+
+.o-switch__body--small {
+    width: var(--o-switch-small-width,78rpx);
+    height: var(--o-switch-small-height,48rpx);
+    border-radius: var(--o-switch-small-radius,calc(var(--o-switch-small-height,48rpx)/ 2));
+}
+
+.o-switch__dot {
+    position: absolute;
+    left: var(--o-switch-dot-horizontal-margin,6rpx);
+    top: 50%;
+    width: var(--o-switch-dot-size,44rpx);
+    height: var(--o-switch-dot-size,44rpx);
+    border-radius: var(--o-radius-circle,50%);
+    background-color: var(--o-text-color-anti,var(--o-font-white-1,#fff));
+    transition: all .3s;
+    transform: translateY(-50%);
+    box-shadow: var(--o-switch-dot-shadow,var(--o-shadow-1,0 1px 10px rgba(0,0,0,.05),0 4px 5px rgba(0,0,0,.08),0 2px 4px -1px rgba(0,0,0,.12)));
+}
+
+.o-switch__dot--disabled {
+    background-color: var(--o-switch-dot-disabled-color,var(--o-font-white-1,#fff));
+}
+
+.o-switch__dot--large {
+    width: var(--o-switch-dot-large-size,52rpx);
+    height: var(--o-switch-dot-large-size,52rpx);
+}
+
+.o-switch__dot--small {
+    width: var(--o-switch-dot-small-size,36rpx);
+    height: var(--o-switch-dot-small-size,36rpx);
+}
+
+.o-switch__dot--checked {
+    left: calc(var(--o-switch-width,90rpx) - var(--o-switch-dot-size,44rpx) - var(--o-switch-dot-horizontal-margin,6rpx));
+}
+
+.o-switch__dot--large.o-switch__dot--checked {
+    left: calc(var(--o-switch-large-width,104rpx) - var(--o-switch-dot-large-size,52rpx) - var(--o-switch-dot-horizontal-margin,6rpx));
+}
+
+.o-switch__dot--small.o-switch__dot--checked {
+    left: calc(var(--o-switch-small-width,78rpx) - var(--o-switch-dot-small-size,36rpx) - var(--o-switch-dot-horizontal-margin,6rpx));
+}
+
+.o-switch__dot--plain:not(.o-switch__dot--checked) {
+    width: var(--o-switch-dot-plain-size,36rpx);
+    height: var(--o-switch-dot-plain-size,36rpx);
+    left: var(--o-switch-dot-plain-horizontal-margin,10rpx);
+}
+
+.o-switch__dot--large.o-switch__dot--plain:not(.o-switch__dot--checked) {
+    width: var(--o-switch-dot-plain-large-size,44rpx);
+    height: var(--o-switch-dot-plain-large-size,44rpx);
+}
+
+.o-switch__dot--small.o-switch__dot--plain:not(.o-switch__dot--checked) {
+    width: var(--o-switch-dot-plain-small-size,28rpx);
+    height: var(--o-switch-dot-plain-small-size,28rpx);
+}
+
+.o-switch__body:not(.o-switch__body--checked) {
+    box-shadow: inset 0 0 0 var(--o-switch-unchecked-border-width,4rpx) var(--o-switch-unchecked-border-color,#8d8d8d);
+}
+
+.o-switch__dot {
+    box-shadow: none;
+}
+
+.o-switch__dot--checked {
+    background-color: var(--o-switch-checked-dot-color,#fff);
+}
+
+.o-switch__dot--plain:not(.o-switch__dot--checked) {
+    background-color: var(--o-switch-unchecked-dot-color,#8d8d8d);
+}
+

package/registry/components/tab-bar/index.js

@@ -0,0 +1 @@
+export*from"./props";export*from"./tab-bar";

package/registry/components/tab-bar/props.js

@@ -0,0 +1 @@
+const props={bordered:{type:Boolean,value:!0},fixed:{type:Boolean,value:!0},placeholder:{type:Boolean,value:!1},safeAreaInsetBottom:{type:Boolean,value:!0},shape:{type:String,value:"normal"},split:{type:Boolean,value:!0},theme:{type:String,value:"normal"},value:{type:null,value:null},defaultValue:{type:null},zIndex:{type:Number,value:1}};export default props;

package/registry/components/tab-bar/tab-bar.js

@@ -0,0 +1 @@
+import{__decorate}from"../common/tslib";import{wxComponent,SuperComponent}from"../common/src/index";import config from"../common/config";import props from"./props";import{getRect}from"../common/utils";import{getWindowInfo}from"../common/wechat";const{prefix:prefix}=config,classPrefix=`${prefix}-tab-bar`;function getSafeAreaBottom(){try{const e=getWindowInfo();if(e&&e.safeArea&&"number"==typeof e.screenHeight)return Math.max(0,e.screenHeight-e.safeArea.bottom)}catch(e){}return 0}let Tabbar=class extends SuperComponent{constructor(){super(...arguments),this.relations={"../tab-bar-item/tab-bar-item":{type:"descendant"}},this.externalClasses=[`${prefix}-class`],this.backupValue=-1,this.data={prefix:prefix,classPrefix:classPrefix,placeholderHeight:56,safeAreaBottomHeight:0,safeAreaBottomReady:!1},this.properties=props,this.controlledProps=[{key:"value",event:"change"}],this.observers={value(){this.updateChildren()},"fixed, placeholder, shape, safeAreaInsetBottom"(){this.setPlaceholderHeight()},safeAreaInsetBottom(){this.setSafeAreaBottomHeight()}},this.lifetimes={ready(){this.showChildren(),this.setSafeAreaBottomHeight()}},this.methods={setSafeAreaBottomHeight(){this.properties.safeAreaInsetBottom?wx.nextTick(()=>{const e=getSafeAreaBottom();this.setData({safeAreaBottomHeight:e,safeAreaBottomReady:!0},()=>{this.setPlaceholderHeight()})}):(this.data.safeAreaBottomReady||0!==this.data.safeAreaBottomHeight)&&this.setData({safeAreaBottomHeight:0,safeAreaBottomReady:!1})},setPlaceholderHeight(){this.properties.fixed&&this.properties.placeholder&&wx.nextTick(()=>{getRect(this,`.${classPrefix}`).then(e=>{let{height:t}=e;"round"===this.properties.shape&&this.properties.safeAreaInsetBottom&&(t+=getSafeAreaBottom()),this.setData({placeholderHeight:t})})})},showChildren(){const{value:e}=this.data;this.$children.forEach(t=>{t.setData({crowded:this.$children.length>3}),t.properties.value===e&&t.showSpread()})},updateChildren(){const{value:e}=this.data;this.$children.forEach(t=>{t.checkActive(e)})},updateValue(e){this._trigger("change",{value:e})},changeOtherSpread(e){this.$children.forEach(t=>{t.properties.value!==e&&t.closeSpread()})},initName(){return this.backupValue+=1}}}};Tabbar=__decorate([wxComponent()],Tabbar);export default Tabbar;

package/registry/components/tab-bar/tab-bar.json

@@ -0,0 +1 @@
+{"component":true,"styleIsolation":"apply-shared","usingComponents":{}}

package/registry/components/tab-bar/tab-bar.wxml

@@ -0,0 +1 @@
+<wxs src="../common/utils.wxs" module="_"/><view wx:if="{{fixed && placeholder}}" class="{{classPrefix}}__placeholder" style="height: {{ placeholderHeight }}px;"/><view style="{{_._style(['z-index: ' + zIndex, safeAreaBottomReady ? '--safe-area-inset-bottom: ' + safeAreaBottomHeight + 'px' : '', style, customStyle])}}" class="{{_.cls(classPrefix, [['border', bordered], ['fixed', fixed], ['safe', safeAreaInsetBottom], shape])}} class {{prefix}}-class" aria-role="tablist"><slot/></view>

package/registry/components/tab-bar/tab-bar.wxss

@@ -0,0 +1,50 @@
+@import '../common/style/index.wxss';
+
+.o-tab-bar {
+    display: flex;
+    flex-wrap: nowrap;
+    align-items: center;
+    position: relative;
+    background-color: var(--o-tab-bar-bg-color,var(--o-bg-color-container,var(--o-font-white-1,#fff)));
+    box-sizing: border-box;
+    pointer-events: auto;
+}
+
+.o-tab-bar--normal.o-tab-bar--border::before {
+    z-index: 1;
+    position: absolute;
+    box-sizing: border-box;
+    content: ' ';
+    pointer-events: none;
+    right: 0;
+    left: 0;
+    top: 0;
+    border-top: 1px solid var(--o-tab-bar-border-color,var(--o-border-level-1-color,var(--o-gray-color-3,#dddddd)));
+    transform: scaleY(.5);
+    transform-origin: 0 0;
+}
+
+.o-tab-bar--fixed {
+    position: fixed;
+    left: 0;
+    bottom: 0;
+    right: 0;
+}
+
+.o-tab-bar--normal.o-tab-bar--safe {
+    padding-bottom: constant(safe-area-inset-bottom);
+    padding-bottom: var(--safe-area-inset-bottom,env(safe-area-inset-bottom));
+}
+
+.o-tab-bar--round {
+    margin-left: var(--o-spacer-2,32rpx);
+    margin-right: var(--o-spacer-2,32rpx);
+    border-radius: var(--o-radius-round,999px);
+    box-shadow: var(--o-tab-bar-round-shadow,var(--o-shadow-3,0 6px 30px 5px rgba(0,0,0,.05),0 16px 24px 2px rgba(0,0,0,.04),0 8px 10px -5px rgba(0,0,0,.08)));
+}
+
+.o-tab-bar--fixed.o-tab-bar--round.o-tab-bar--safe {
+    bottom: constant(safe-area-inset-bottom);
+    bottom: var(--safe-area-inset-bottom,env(safe-area-inset-bottom));
+}
+

package/registry/components/tab-bar-item/index.js

@@ -0,0 +1 @@
+export*from"./props";export*from"./tab-bar-item";

package/registry/components/tab-bar-item/props.js

@@ -0,0 +1 @@
+const props={badgeProps:{type:Object},icon:{type:null},linkType:{type:String,value:"redirectTo"},subTabBar:{type:Array},url:{type:String,value:""},value:{type:null}};export default props;

package/registry/components/tab-bar-item/tab-bar-item.js

@@ -0,0 +1 @@
+import{__awaiter,__decorate}from"../common/tslib";import{wxComponent,SuperComponent}from"../common/src/index";import config from"../common/config";import props from"./props";import{getRect,calcIcon}from"../common/utils";const{prefix:prefix}=config,classPrefix=`${prefix}-tab-bar-item`;let TabBarItem=class extends SuperComponent{constructor(){super(...arguments),this.externalClasses=[`${prefix}-class`],this.parent=null,this.relations={"../tab-bar/tab-bar":{type:"ancestor",linked(t){const{theme:e,split:a,shape:s}=t.data;this.setData({theme:e,split:a,shape:s,currentName:this.properties.value?this.properties.value:t.initName()}),t.updateChildren()}}},this.options={multipleSlots:!0},this.data={prefix:prefix,classPrefix:classPrefix,isSpread:!1,isChecked:!1,hasChildren:!1,currentName:"",split:!0,iconOnly:!1,theme:"",crowded:!1,shape:"normal"},this.properties=props,this.observers={subTabBar(t){this.setData({hasChildren:t.length>0})},icon(t){this.setData({_icon:calcIcon(t)})}},this.lifetimes={attached(){return __awaiter(this,void 0,void 0,function*(){const t=yield getRect(this,`.${classPrefix}__text`);this.setData({iconOnly:0===t.height})})}},this.methods={showSpread(){this.setData({isSpread:!0})},toggle(){const{currentName:t,hasChildren:e,isSpread:a,url:s,linkType:i}=this.data;e&&this.setData({isSpread:!a}),this.$parent.updateValue(t),this.$parent.changeOtherSpread(t),s&&wx[i]&&wx[i]({url:s})},selectChild(t){const{value:e}=t.target.dataset;this.$parent.updateValue(e),this.setData({isSpread:!1})},checkActive(t){const{currentName:e,subTabBar:a}=this.data,s=(null==a?void 0:a.some(e=>e.value===t))||e===t;this.setData({isChecked:s})},closeSpread(){this.setData({isSpread:!1})}}}};TabBarItem=__decorate([wxComponent()],TabBarItem);export default TabBarItem;

package/registry/components/tab-bar-item/tab-bar-item.json

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

package/registry/components/tab-bar-item/tab-bar-item.wxml

@@ -0,0 +1 @@
+<import src="../common/template/icon.wxml"/><wxs src="../common/utils.wxs" module="_"/><view style="{{_._style([style, customStyle])}}" class="{{_.cls(classPrefix, [['split', split], ['crowded', crowded], shape])}} class {{prefix}}-class"><view class="{{_.cls(classPrefix + '__content', [['checked', isChecked], theme])}}" hover-class="{{classPrefix}}__content--active" hover-stay-time="{{200}}" bindtap="toggle" aria-selected="{{(!hasChildren || !isSpread) && isChecked ? true : false}}" aria-expanded="{{hasChildren && isSpread ? true : ''}}" aria-role="{{hasChildren ? 'button' : 'tab'}}" aria-label="{{ ariaLabel || (badgeProps.dot || badgeProps.count ? _.getBadgeAriaLabel({ ...badgeProps }) : '') }}"><view class="{{classPrefix}}__icon" style="height: {{iconOnly ? 24 : 20}}px" aria-hidden="{{ badgeProps.dot || badgeProps.count }}"><o-badge wx:if="{{badgeProps.dot || badgeProps.count}}" color="{{badgeProps.color || ''}}" content="{{badgeProps.content || ''}}" count="{{badgeProps.count || 0}}" dot="{{badgeProps.dot || false}}" max-count="{{badgeProps.maxCount || 99}}" offset="{{badgeProps.offset || [0,0]}}" shape="{{badgeProps.shape || 'circle'}}" size="{{badgeProps.size || 'medium'}}" visible="{{badgeProps.visible}}" o-class-count="{{prefix + '-badge-class'}}"><template is="icon" data="{{ size: iconOnly ? 24 : 20, ..._icon }}"/></o-badge><template wx:elif="{{!!icon}}" is="icon" data="{{ ariaHidden: !iconOnly, size: iconOnly ? 24 : 20, ..._icon }}"/><slot name="icon"/></view><view class="{{_.cls(classPrefix + '__text', [['small', !!icon]])}}"><o-icon wx:if="{{hasChildren}}" name="view-list" size="32rpx" o-class="{{classPrefix}}__icon-menu"/><slot/></view></view><view class="{{classPrefix}}__spread" wx:if="{{hasChildren && isSpread}}"><view class="{{classPrefix}}__spread-item" hover-class="{{classPrefix}}__spread-item--active" hover-stay-time="{{200}}" wx:for="{{subTabBar}}" wx:for-item="child" wx:for-index="index" wx:key="value" bind:tap="selectChild" data-value="{{child.value || index}}" aria-role="tab"><view class="{{classPrefix}}__spread-item-split" wx:if="{{index !== 0}}"/><view class="{{classPrefix}}__spread-item-text" data-value="{{child.value || index}}">{{ child.label }}</view></view></view></view>

package/registry/components/tab-bar-item/tab-bar-item.wxss

@@ -0,0 +1,177 @@
+@import '../common/style/index.wxss';
+
+:host {
+    flex: 1;
+}
+
+.o-tab-bar-item {
+    flex: 1;
+    height: var(--o-tab-bar-height,80rpx);
+    box-sizing: border-box;
+    user-select: none;
+    position: relative;
+    margin: var(--o-spacer,16rpx) 0;
+    padding: 0 var(--o-spacer-1,24rpx);
+}
+
+.o-tab-bar-item--split+.o-tab-bar-item--split::before {
+    position: absolute;
+    box-sizing: border-box;
+    content: ' ';
+    pointer-events: none;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    border-left: 1px solid var(--o-tab-bar-border-color,var(--o-border-color,var(--o-gray-color-3,#dddddd)));
+    transform: scaleX(.5);
+    top: 16rpx;
+    bottom: 16rpx;
+}
+
+.o-tab-bar-item--crowded {
+    padding: 0 var(--o-spacer,16rpx);
+}
+
+.o-tab-bar-item--round {
+    border-radius: var(--o-radius-round,999px);
+}
+
+.o-tab-bar-item__content {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    border-radius: 16rpx;
+    color: var(--o-tab-bar-color,var(--o-text-color-primary,var(--o-font-gray-1,#1c1b1f)));
+}
+
+.o-tab-bar-item__content--checked .o-tab-bar-item__icon,
+.o-tab-bar-item__content--checked .o-tab-bar-item__text {
+    color: var(--o-tab-bar-active-color,var(--o-brand-color,var(--o-primary-color-7,#f16e00)));
+    font-weight: 600;
+}
+
+.o-tab-bar-item__content--tag {
+    border-radius: var(--o-radius-round,999px);
+}
+
+.o-tab-bar-item__content--tag.o-tab-bar-item__content--checked {
+    background-color: var(--o-tab-bar-active-bg,var(--o-brand-color-light,var(--o-primary-color-1,#fef3eb)));
+}
+
+.o-tab-bar-item__icon {
+    display: contents;
+}
+
+.o-tab-bar-item__icon:empty {
+    display: none;
+}
+
+.o-tab-bar-item__text {
+    display: flex;
+    align-items: center;
+    font: var(--o-font-body-large,32rpx / 48rpx var(--o-font-family,Roboto,PingFang SC,Microsoft YaHei,Arial));
+}
+
+.o-tab-bar-item__text--small {
+    font: var(--o-font-body-extraSmall,20rpx / 32rpx var(--o-font-family,Roboto,PingFang SC,Microsoft YaHei,Arial));
+}
+
+.o-tab-bar-item__icon-menu {
+    margin-right: calc(var(--o-spacer,16rpx)/ 2);
+}
+
+.o-tab-bar-item__spread {
+    position: absolute;
+    top: 0;
+    left: 7%;
+    width: 86%;
+    background-color: var(--o-tab-bar-bg-color,var(--o-bg-color-container,var(--o-font-white-1,#fff)));
+    transform: translate3d(0,calc(-100% - 32rpx),0);
+    z-index: 1;
+    border-radius: var(--o-radius-default,12rpx);
+    color: var(--o-tab-bar-color,var(--o-text-color-primary,var(--o-font-gray-1,#1c1b1f)));
+    box-shadow: var(--o-tab-bar-spread-shadow,var(--o-shadow-3,0 6px 30px 5px rgba(0,0,0,.05),0 16px 24px 2px rgba(0,0,0,.04),0 8px 10px -5px rgba(0,0,0,.08)));
+}
+
+.o-tab-bar-item__spread::before {
+    display: block;
+    content: '';
+    position: absolute;
+    bottom: 0;
+    left: 50%;
+    width: 0;
+    height: 0;
+    border: 16rpx solid transparent;
+    border-top: 16rpx solid var(--o-tab-bar-bg-color,var(--o-bg-color-container,var(--o-font-white-1,#fff)));
+    transform: translate3d(-50%,32rpx,0);
+}
+
+.o-tab-bar-item__spread-item {
+    width: 100%;
+    height: 96rpx;
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    position: relative;
+    flex-direction: column;
+}
+
+.o-tab-bar-item__spread-item--active {
+    background-color: var(--o-tab-bar-hover-bg-color,rgba(0,0,0,.05));
+}
+
+.o-tab-bar-item__spread-item-split {
+    box-sizing: border-box;
+    content: ' ';
+    pointer-events: none;
+    background-color: var(--o-tab-bar-spread-border-color,var(--o-border-color,var(--o-gray-color-3,#dddddd)));
+    width: 80%;
+    height: 1px;
+    transform: translateY(.5);
+}
+
+.o-tab-bar-item__spread-item-text {
+    padding-top: var(--o-spacer-1,24rpx);
+}
+
+.o-tab-bar-item {
+    height: var(--o-tab-bar-height,160rpx);
+    margin: 0;
+    padding: 0 8rpx;
+}
+
+.o-tab-bar-item__content {
+    color: var(--o-tab-bar-color,var(--o-scheme-on-surface-variant,#444748));
+}
+
+.o-tab-bar-item__icon:not(:empty) {
+    display: flex;
+    flex: none;
+    align-items: center;
+    justify-content: center;
+    width: var(--o-tab-bar-indicator-width,128rpx);
+    height: var(--o-tab-bar-indicator-height,64rpx) !important;
+    border-radius: 999px;
+}
+
+.o-tab-bar-item__icon:not(:empty)+.o-tab-bar-item__text {
+    margin-top: 8rpx;
+}
+
+.o-tab-bar-item__content--checked .o-tab-bar-item__icon:not(:empty) {
+    background-color: var(--o-tab-bar-indicator-bg,var(--o-scheme-surface-variant,#eeeeee));
+}
+
+.o-tab-bar-item__text,
+.o-tab-bar-item__text--small {
+    font: var(--o-tab-bar-label-font,500 24rpx / 32rpx var(--o-font-family,Roboto,PingFang SC,Microsoft YaHei,Arial));
+}
+
+.o-tab-bar-item__content--checked .o-tab-bar-item__text {
+    color: var(--o-tab-bar-active-text-color,var(--o-scheme-on-surface-variant,#444748));
+    font-weight: 500;
+}
+

package/registry/components/tab-panel/index.js

@@ -0,0 +1 @@
+export*from"./props";export*from"./tab-panel";

package/registry/components/tab-panel/props.js

@@ -0,0 +1 @@
+const props={badgeProps:{type:Object},disabled:{type:Boolean,value:!1},icon:{type:null},label:{type:String,value:""},lazy:{type:Boolean,value:!1},panel:{type:String},value:{type:null}};export default props;

package/registry/components/tab-panel/tab-panel.js

@@ -0,0 +1 @@
+import{__decorate}from"../common/tslib";import{SuperComponent,wxComponent}from"../common/src/index";import props from"./props";import config from"../common/config";const{prefix:prefix}=config,name=`${prefix}-tab-panel`;let TabPanel=class extends SuperComponent{constructor(){super(...arguments),this.externalClasses=[`${prefix}-class`],this.relations={"../tabs/tabs":{type:"ancestor"}},this.options={multipleSlots:!0},this.properties=props,this.data={prefix:prefix,classPrefix:name,active:!1,hide:!0,id:"",hasActivated:!1},this.observers={"label, badgeProps, disabled, icon, panel, value, lazy"(){this.update()}}}setId(e){this.setData({id:e})}getComputedName(){return null!=this.properties.value?`${this.properties.value}`:`${this.index}`}update(){var e;null===(e=this.$parent)||void 0===e||e.updateTabs()}render(e,t){this.initialized=this.initialized||e,e&&!this.data.hasActivated&&this.setData({hasActivated:!0}),this.setData({active:e,hide:!t.data.animation&&!e})}};TabPanel=__decorate([wxComponent()],TabPanel);export default TabPanel;

package/registry/components/tab-panel/tab-panel.json

@@ -0,0 +1 @@
+{"component":true,"styleIsolation":"apply-shared","usingComponents":{}}

package/registry/components/tab-panel/tab-panel.wxml

@@ -0,0 +1 @@
+<wxs src="../common/utils.wxs" module="_"/><view wx:if="{{!lazy || hasActivated}}" class="class {{prefix}}-class {{classPrefix}} {{active ? classPrefix + '--active': classPrefix + '--inactive'}}" style="{{_._style([style, customStyle, (hide ? 'display: none;' : '')])}}" id="{{id}}" aria-role="tabpanel"><view wx:if="{{panel}}">{{panel}}</view><slot/><slot name="panel"/></view>

package/registry/components/tab-panel/tab-panel.wxss

@@ -0,0 +1,20 @@
+@import '../common/style/index.wxss';
+
+.o-tab-panel {
+    flex-shrink: 0;
+    width: 100%;
+    height: 100%;
+    box-sizing: border-box;
+    overflow-y: auto;
+    -webkit-overflow-scrolling: touch;
+}
+
+.o-tab-panel--active {
+    height: auto;
+}
+
+.o-tab-panel--inactive {
+    height: 0;
+    overflow: visible;
+}
+

package/registry/components/tabs/index.js

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

package/registry/components/tabs/props.js

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