maxit-cli 0.1.0

package/registry/components/section-title/section-title.wxml

@@ -0,0 +1,6 @@
+<view class="o-row o-section-title class {{prefix}}-class" style="{{style}} {{customStyle}}">
+  <view class="o-grow o-section-title__title">{{title}}</view>
+  <view wx:if="{{action}}" class="o-section-title__action" bind:tap="onAction">
+    <text>{{action}}</text><o-icon name="chevron-right" />
+  </view>
+</view>

package/registry/components/section-title/section-title.wxss

@@ -0,0 +1,19 @@
+@import '../common/style/index.wxss';
+@import '../common/style/card.wxss';
+
+/* Section title with an optional "Voir tout >" action (Figma "mol_section_title"). */
+.o-section-title {
+    padding: 16rpx 0;
+    color: var(--o-scheme-on-surface, #1c1b1f);
+}
+
+.o-section-title__title {
+    font: var(--o-type-title-custom1, 700 36rpx / 48rpx var(--o-font-family, Roboto, Arial));
+}
+
+.o-section-title__action {
+    display: flex;
+    align-items: center;
+    gap: 8rpx;
+    font: var(--o-type-label-large, 500 28rpx / 40rpx var(--o-font-family, Roboto, Arial));
+}

package/registry/components/segmented/index.js

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

package/registry/components/segmented/props.js

@@ -0,0 +1 @@
+const props={block:{type:Boolean,value:!1},disabled:{type:Boolean},options:{type:Object,value:[]},value:{type:null,value:null},defaultValue:{type:null}};export default props;

package/registry/components/segmented/segmented.js

@@ -0,0 +1 @@
+import{__decorate}from"../common/tslib";import{SuperComponent,wxComponent}from"../common/src/index";import config from"../common/config";import props from"./props";import{calcIcon,getRect}from"../common/utils";const{prefix:prefix}=config,name=`${prefix}-segmented`;let Segmented=class extends SuperComponent{constructor(){super(...arguments),this.options={multipleSlots:!0},this.externalClasses=[`${prefix}-class`,`${prefix}-class-thumb`,`${prefix}-class-item`],this.properties=props,this.controlledProps=[{key:"value",event:"change"}],this.data={prefix:prefix,classPrefix:name,segmentItems:[],activeIndex:-1,thumbStyle:""},this.lifetimes={ready(){this.updateThumb()}},this.observers={options(e){this.updateOptions(e)},"value, segmentItems"(){this.updateActiveIndex()}},this.methods={updateOptions(e){if(!(null==e?void 0:e.length))return;const t=e.map(e=>{var t;return"string"==typeof e||"number"==typeof e?{value:e,label:String(e)}:Object.assign(Object.assign({},e),{label:null!==(t=e.label)&&void 0!==t?t:String(e.value),icon:e.icon?calcIcon(e.icon):null})});this.setData({segmentItems:t})},updateActiveIndex(){const{value:e,segmentItems:t}=this.data;let s=-1;null!=e&&(s=t.findIndex(t=>t.value===e)),s!==this.data.activeIndex&&this.setData({activeIndex:s},()=>{this.updateThumb()})},updateThumb(){const{activeIndex:e,classPrefix:t}=this.data;if(e<0)return;const s=`.${t}__group`,i=`.${t}-item-${e}`;Promise.all([getRect(this,i),getRect(this,s)]).then(([e,t])=>{if(e&&t){const s=e.left-t.left;this.setData({thumbStyle:`width: ${e.width}px; transform: translateX(${s}px);`})}})},handleSelect(e){const{index:t}=e.currentTarget.dataset,{segmentItems:s,activeIndex:i}=this.data,{disabled:n,options:a}=this.properties,o=s[t];n||!o||o.disabled||t!==i&&this._trigger("change",{value:o.value,selectedOption:a[t]})}}}};Segmented=__decorate([wxComponent()],Segmented);export default Segmented;

package/registry/components/segmented/segmented.json

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

package/registry/components/segmented/segmented.wxml

@@ -0,0 +1 @@
+<import src="../common/template/icon"/><wxs src="../common/utils.wxs" module="_"/><view class="{{_.cls(classPrefix, [['block', block]])}} class {{prefix}}-class" style="{{_._style([style, customStyle])}}"><view class="{{classPrefix}}__group"><view class="{{classPrefix}}__thumb {{prefix}}-class-thumb" style="{{thumbStyle}}"/><view wx:for="{{segmentItems}}" wx:for-index="index" wx:for-item="item" wx:key="value" class="{{_.cls(classPrefix + '__item', [['active', index === activeIndex], ['disabled', disabled || item.disabled]])}} {{classPrefix}}-item-{{index}} {{prefix}}-class-item" data-index="{{index}}" bind:tap="handleSelect"><view class="{{classPrefix}}__item-inner"><template wx:if="{{item.icon}}" is="icon" data="{{ oClass: classPrefix + '__item-icon', ...item.icon }}"/><text wx:if="{{item.label}}" class="{{classPrefix}}__item-label">{{item.label}}</text></view></view></view></view>

package/registry/components/segmented/segmented.wxss

@@ -0,0 +1,113 @@
+@import '../common/style/index.wxss';
+
+.o-segmented {
+    display: inline-block;
+    padding: calc(var(--o-spacer,16rpx)/ 4);
+    background-color: var(--o-segmented-bg-color,var(--o-bg-color-component-disabled,var(--o-gray-color-2,#eee)));
+    border-radius: calc(var(--o-spacer,16rpx)/ 2);
+}
+
+.o-segmented--block {
+    display: flex;
+    width: 100%;
+}
+
+.o-segmented--block .o-segmented__item {
+    flex: 1;
+    min-width: 0;
+}
+
+.o-segmented--block .o-segmented__item-inner {
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.o-segmented__group {
+    position: relative;
+    display: flex;
+    align-items: stretch;
+    width: 100%;
+}
+
+.o-segmented__thumb {
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 100%;
+    background-color: var(--o-segmented-item-active-bg,var(--o-bg-color-container,var(--o-font-white-1,#fff)));
+    border-radius: calc(var(--o-spacer,16rpx)/ 2);
+    transition: var(--o-segmented-transition,all var(--o-anim-duration-base,.2s) var(--o-anim-time-fn-easing,cubic-bezier(.38,0,.24,1)));
+    will-change: transform,width;
+}
+
+.o-segmented__item {
+    position: relative;
+    z-index: 1;
+    flex: none;
+    padding: calc(var(--o-spacer-1,24rpx)/ 4) var(--o-spacer-1,24rpx);
+    text-align: center;
+    cursor: pointer;
+    font: var(--o-segmented-item-label-font,var(--o-font-body-medium,28rpx / 44rpx var(--o-font-family,Roboto,PingFang SC,Microsoft YaHei,Arial)));
+    color: var(--o-segmented-item-color,var(--o-text-color-primary,var(--o-font-gray-1,#1c1b1f)));
+}
+
+.o-segmented__item-inner {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    white-space: nowrap;
+}
+
+.o-segmented__item-icon:not(:empty) {
+    margin-right: calc(var(--o-spacer,16rpx)/ 2);
+}
+
+.o-segmented__item-icon {
+    font-size: var(--o-font-size-m,32rpx);
+}
+
+.o-segmented__item--active {
+    font-weight: 600;
+    color: var(--o-segmented-item-active-color,var(--o-brand-color,var(--o-primary-color-7,#f16e00)));
+}
+
+.o-segmented__item--disabled {
+    cursor: not-allowed;
+    pointer-events: none;
+    color: var(--o-segmented-item-disabled-color,var(--o-text-color-disabled,var(--o-font-gray-4,rgba(0,0,0,.26))));
+}
+
+.o-segmented {
+    padding: 0;
+    overflow: hidden;
+    background-color: var(--o-segmented-bg-color,transparent);
+    border: 2rpx solid var(--o-segmented-border-color,var(--o-scheme-outline,#8d8d8d));
+    border-radius: var(--o-segmented-border-radius,999px);
+    box-sizing: border-box;
+}
+
+.o-segmented__thumb {
+    border-radius: 0;
+    background-color: var(--o-segmented-item-active-bg,var(--o-scheme-secondary-container,#ffe2c9));
+}
+
+.o-segmented__item {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-sizing: border-box;
+    height: var(--o-segmented-height,76rpx);
+    padding: 0 var(--o-segmented-item-padding-horizontal,24rpx);
+    font: var(--o-segmented-item-label-font,500 28rpx / 40rpx var(--o-font-family,Roboto,PingFang SC,Microsoft YaHei,Arial));
+    color: var(--o-segmented-item-color,var(--o-scheme-on-surface,#1c1b1f));
+}
+
+.o-segmented__item+.o-segmented__item {
+    border-left: 2rpx solid var(--o-segmented-border-color,var(--o-scheme-outline,#8d8d8d));
+}
+
+.o-segmented__item--active {
+    font-weight: 500;
+    color: var(--o-segmented-item-active-color,var(--o-scheme-on-secondary-container,#000));
+}
+

package/registry/components/selection-card/index.js

@@ -0,0 +1,2 @@
+export * from './props';
+export * from './selection-card';

package/registry/components/selection-card/props.js

@@ -0,0 +1,11 @@
+// o-selection-card: Content selection tile (Figma "Card_Content_Selection"): icon, overline, title; selected / disabled / filled.
+const props = {
+  icon: { type: String, value: 'image' },
+  overline: { type: String, value: '' },
+  title: { type: String, value: '' },
+  selected: { type: Boolean, value: false },
+  disabled: { type: Boolean, value: false },
+  // outlined or filled (gray)
+  variant: { type: String, value: 'outlined' },
+};
+export default props;

package/registry/components/selection-card/selection-card.js

@@ -0,0 +1,25 @@
+import { __decorate } from '../common/tslib';
+import { SuperComponent, wxComponent } from '../common/src/index';
+import config from '../common/config';
+import props from './props';
+
+const { prefix } = config;
+const name = `${prefix}-selection-card`;
+
+let SelectionCard = class SelectionCard extends SuperComponent {
+  constructor() {
+    super(...arguments);
+    this.externalClasses = [`${prefix}-class`];
+    this.options = { multipleSlots: true };
+    this.properties = props;
+    this.data = { prefix, classPrefix: name };
+    this.methods = {
+      onTap() {
+        if (this.properties.disabled) return;
+        this.triggerEvent('click', { selected: !this.properties.selected });
+      },
+    };
+  }
+};
+SelectionCard = __decorate([wxComponent()], SelectionCard);
+export default SelectionCard;

package/registry/components/selection-card/selection-card.json

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

package/registry/components/selection-card/selection-card.wxml

@@ -0,0 +1,7 @@
+<view class="o-surface o-surface--{{variant}} {{selected ? 'o-surface--selected' : ''}} o-selection-card {{disabled ? 'o-selection-card--disabled' : ''}} class {{prefix}}-class" style="{{style}} {{customStyle}}" bind:tap="onTap">
+  <view class="o-selection-card__body">
+    <o-icon name="{{icon}}" o-class="o-selection-card__icon" />
+    <view wx:if="{{overline}}" class="o-txt-small">{{overline}}</view>
+    <view class="o-txt-title o-txt-title--1 o-selection-card__title">{{title}}</view>
+  </view>
+</view>

package/registry/components/selection-card/selection-card.wxss

@@ -0,0 +1,27 @@
+@import '../common/style/index.wxss';
+@import '../common/style/card.wxss';
+
+/* Content selection tile (Figma "Card_Content_Selection"): icon, overline, title; selected / disabled / filled. */
+.o-selection-card {
+    width: var(--o-selection-card-width, 240rpx);
+}
+
+.o-surface--filled.o-selection-card {
+    border: 2rpx solid transparent;
+}
+
+.o-selection-card__body {
+    padding: 24rpx;
+}
+
+.o-selection-card__icon {
+    font-size: 48rpx;
+}
+
+.o-selection-card__title {
+    font: var(--o-type-title-small, 500 28rpx / 40rpx var(--o-font-family, Roboto, Arial));
+}
+
+.o-selection-card--disabled {
+    opacity: .38;
+}

package/registry/components/shortcut-chip/index.js

@@ -0,0 +1,2 @@
+export * from './props';
+export * from './shortcut-chip';

package/registry/components/shortcut-chip/props.js

@@ -0,0 +1,7 @@
+// o-shortcut-chip: Shortcut chip (Figma "Special chip list"): gray rounded chip with an icon and a label.
+const props = {
+  icon: { type: String, value: 'image' },
+  label: { type: String, value: '' },
+  disabled: { type: Boolean, value: false },
+};
+export default props;

package/registry/components/shortcut-chip/shortcut-chip.js

@@ -0,0 +1,24 @@
+import { __decorate } from '../common/tslib';
+import { SuperComponent, wxComponent } from '../common/src/index';
+import config from '../common/config';
+import props from './props';
+
+const { prefix } = config;
+const name = `${prefix}-shortcut-chip`;
+
+let ShortcutChip = class ShortcutChip extends SuperComponent {
+  constructor() {
+    super(...arguments);
+    this.externalClasses = [`${prefix}-class`];
+    this.options = { multipleSlots: true };
+    this.properties = props;
+    this.data = { prefix, classPrefix: name };
+    this.methods = {
+      onTap() {
+        if (!this.properties.disabled) this.triggerEvent('click');
+      },
+    };
+  }
+};
+ShortcutChip = __decorate([wxComponent()], ShortcutChip);
+export default ShortcutChip;

package/registry/components/shortcut-chip/shortcut-chip.json

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

package/registry/components/shortcut-chip/shortcut-chip.wxml

@@ -0,0 +1,4 @@
+<view class="o-shortcut-chip {{disabled ? 'o-shortcut-chip--disabled' : ''}} class {{prefix}}-class" style="{{style}} {{customStyle}}" bind:tap="onTap">
+  <o-icon name="{{icon}}" o-class="o-shortcut-chip__icon" />
+  <text class="o-shortcut-chip__label">{{label}}</text>
+</view>

package/registry/components/shortcut-chip/shortcut-chip.wxss

@@ -0,0 +1,29 @@
+@import '../common/style/index.wxss';
+@import '../common/style/card.wxss';
+
+/* Shortcut chip (Figma "Special chip list"): gray rounded chip with an icon and a label. */
+.o-shortcut-chip {
+    display: flex;
+    align-items: center;
+    box-sizing: border-box;
+    padding: 20rpx 24rpx;
+    border-radius: 16rpx;
+    background-color: var(--o-scheme-surface-variant, #eee);
+    color: var(--o-scheme-on-surface, #1c1b1f);
+}
+
+.o-shortcut-chip--disabled {
+    opacity: .38;
+}
+
+.o-shortcut-chip__icon {
+    margin-right: 16rpx;
+    font-size: 40rpx;
+}
+
+.o-shortcut-chip__label {
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    font: var(--o-type-label-large, 500 28rpx / 40rpx var(--o-font-family, Roboto, Arial));
+}

package/registry/components/skeleton/index.js

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

package/registry/components/skeleton/props.js

@@ -0,0 +1 @@
+const props={animation:{type:String,value:"none"},delay:{type:Number,value:0},loading:{type:Boolean,value:!0},rowCol:{type:Array},theme:{type:String,value:"text"}};export default props;

package/registry/components/skeleton/skeleton.js

@@ -0,0 +1 @@
+import{__decorate}from"../common/tslib";import{SuperComponent,wxComponent}from"../common/src/index";import config from"../common/config";import props from"./props";import{classNames}from"../common/utils";import{isInteger,isNumeric}from"../common/validator";const{prefix:prefix}=config,name=`${prefix}-skeleton`,ThemeMap={avatar:[{type:"circle",size:"96rpx"}],image:[{type:"rect",size:"144rpx"}],text:[[{width:"24%",height:"32rpx",marginRight:"32rpx"},{width:"76%",height:"32rpx"}],1],paragraph:[1,1,1,{width:"55%"}]};let Skeleton=class extends SuperComponent{constructor(){super(...arguments),this.externalClasses=[`${prefix}-class`,`${prefix}-class-col`,`${prefix}-class-row`],this.properties=props,this.timer=void 0,this.data={prefix:prefix,classPrefix:name,parsedRowCols:[]},this.observers={rowCol(){this.init()},"loading, delay"(){this.isShowSkeleton()}},this.lifetimes={attached(){this.init(),this.isShowSkeleton()},detached(){this.clearTimer()}},this.methods={init(){const{theme:e,rowCol:t}=this.properties,i=[];t.length?i.push(...t):i.push(...(ThemeMap[e]||ThemeMap.text));const s=i.map(e=>{if(isInteger(e)&&e>=0)return new Array(e).fill({class:this.getColItemClass({type:"text"}),style:{}});if(Array.isArray(e))return e.map(e=>Object.assign(Object.assign({},e),{class:this.getColItemClass(e),style:this.getColItemStyle(e)}));const t=e;return[Object.assign(Object.assign({},t),{class:this.getColItemClass(t),style:this.getColItemStyle(t)})]});this.setData({parsedRowCols:s})},getColItemClass(e){return classNames([`${name}__col`,`${name}--type-${e.type||"text"}`,`${name}--animation-${this.properties.animation}`])},getColItemStyle(e){const t={};return["width","height","marginRight","marginLeft","margin","size","background","backgroundColor","borderRadius"].forEach(i=>{if(i in e){const s=isNumeric(e[i])?`${e[i]}px`:e[i];"size"===i?[t.width,t.height]=[s,s]:t[i]=s}}),t},clearTimer(){this.timer&&(clearTimeout(this.timer),this.timer=null)},isShowSkeleton(){this.clearTimer();const{loading:e,delay:t}=this.properties;e&&0!==t?this.timer=setTimeout(()=>{this.setData({isShow:this.properties.loading})},t):this.setData({isShow:e})}}}};Skeleton=__decorate([wxComponent()],Skeleton);export default Skeleton;

package/registry/components/skeleton/skeleton.json

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

package/registry/components/skeleton/skeleton.wxml

@@ -0,0 +1 @@
+<wxs src="../common/utils.wxs" module="_"/><view wx:if="{{ isShow }}" style="{{_._style([style, customStyle])}}" class="{{classPrefix}} class {{prefix}}-class"><view wx:if="{{ parsedRowCols.length }}" class="{{classPrefix}}__content"><view wx:for="{{parsedRowCols}}" wx:for-index="index" wx:for-item="row" wx:key="index" class="{{classPrefix}}__row {{prefix}}-class-row"><view wx:for="{{ row }}" wx:for-index="index" wx:for-item="col" wx:key="index" class="{{col.class}} {{prefix}}-class-col" style="{{_._style(col.style)}}"></view></view></view></view><view wx:else class="class {{classPrefix}}__content"><slot/></view>

package/registry/components/skeleton/skeleton.wxss

@@ -0,0 +1,92 @@
+@import '../common/style/index.wxss';
+
+.o-skeleton {
+    box-sizing: border-box;
+}
+
+.o-skeleton__row {
+    display: flex;
+    margin-bottom: var(--o-skeleton-row-spacing,var(--o-spacer-2,32rpx));
+    align-items: center;
+    justify-content: space-between;
+}
+
+.o-skeleton__row:last-child,
+.o-skeleton__row:only-child {
+    margin-bottom: 0;
+}
+
+.o-skeleton__col {
+    background-color: var(--o-skeleton-bg-color,var(--o-bg-color-secondarycontainer,var(--o-gray-color-1,#eeeeee)));
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-right: var(--o-spacer-2,32rpx);
+}
+
+.o-skeleton__col:first-child:last-child,
+.o-skeleton__col:last-child {
+    margin-right: 0;
+}
+
+.o-skeleton--type-text {
+    width: 100%;
+    height: var(--o-skeleton-text-height,32rpx);
+    border-radius: var(--o-skeleton-text-border-radius,var(--o-radius-small,6rpx));
+}
+
+.o-skeleton--type-rect {
+    width: 100%;
+    height: var(--o-skeleton-rect-height,32rpx);
+    border-radius: var(--o-skeleton-rect-border-radius,var(--o-radius-default,12rpx));
+}
+
+.o-skeleton--type-circle {
+    width: var(--o-skeleton-circle-height,96rpx);
+    height: var(--o-skeleton-circle-height,96rpx);
+    border-radius: var(--o-skeleton-circle-border-radius,var(--o-skeleton-circle-border-radius,var(--o-radius-circle,50%)));
+    flex-shrink: 0;
+}
+
+.o-skeleton--animation-gradient {
+    position: relative;
+    overflow-x: hidden;
+}
+
+.o-skeleton--animation-gradient::after {
+    content: ' ';
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    top: 0;
+    background: linear-gradient(90deg,rgba(255,255,255,0),var(--o-skeleton-animation-gradient,rgba(0,0,0,.04)),rgba(255,255,255,0));
+    animation: o-skeleton--gradient 1.5s linear 0s infinite;
+}
+
+.o-skeleton--animation-flashed {
+    animation: o-skeleton--flashed 2s linear 0s infinite;
+}
+
+@keyframes o-skeleton--gradient {
+    0% {
+        transform: translateX(-100%) skewX(-15deg);
+    }
+    100% {
+        transform: translateX(100%) skewX(-15deg);
+    }
+}
+
+@keyframes o-skeleton--flashed {
+    0% {
+        opacity: 1;
+    }
+    50% {
+        background-color: var(--o-skeleton-animation-flashed,rgba(230,230,230,.3));
+        opacity: .3;
+    }
+    100% {
+        opacity: 1;
+    }
+}
+

package/registry/components/slider/index.js

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

package/registry/components/slider/props.js

@@ -0,0 +1 @@
+const props={disabled:{type:null,value:void 0},label:{type:null,value:!1},marks:{type:null,value:{}},max:{type:Number,value:100},min:{type:Number,value:0},range:{type:Boolean,value:!1},showExtremeValue:{type:Boolean,value:!1},step:{type:Number,value:1},theme:{type:String,value:"default"},value:{type:null,value:null},defaultValue:{type:null,value:0},vertical:{type:Boolean,value:!1}};export default props;

package/registry/components/slider/slider.js

@@ -0,0 +1 @@
+import{__awaiter,__decorate}from"../common/tslib";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";import{isString,isFunction}from"../common/validator";import Bus from"../common/bus";const{prefix:prefix}=config,name=`${prefix}-slider`;let Slider=class extends SuperComponent{constructor(){super(...arguments),this.externalClasses=[`${prefix}-class`,`${prefix}-class-bar`,`${prefix}-class-bar-active`,`${prefix}-class-bar-disabled`,`${prefix}-class-cursor`],this.options={pureDataPattern:/^__/},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:!1,scaleArray:[],scaleTextArray:[],prefix:prefix,realLabel:"",extremeLabel:[],isVisibleToScreenReader:!1,identifier:[-1,-1],__inited:!1},this.observers={"value, range"(e){this.handlePropsChange(e)},_value(e){this.bus.on("initial",()=>this.renderLine(e)),this.toggleA11yTips()},marks(e){this.bus.on("initial",()=>this.handleMark(e))},label(e){this.setData({isShowLabel:Boolean(e)})},"showExtremeValue, min, max"(){this.getwExtremeLabel()}},this.lifetimes={created(){this.bus=new Bus},attached(){const{value:e}=this.properties;this.handlePropsChange(null==e?0:e),this.init().catch(()=>{}),this.injectPageScroll()},ready(){this.init().catch(()=>{})}}}getwExtremeLabel(){const{showExtremeValue:e,min:t,max:i}=this.properties;e&&this.setData({extremeLabel:[this.getLabelByValue(Number(t),"min"),this.getLabelByValue(Number(i),"max")]})}injectPageScroll(){const{range:e,vertical:t}=this.properties;if(!e||!t)return;const i=getCurrentPages()||[];let a=null;if(i&&i.length-1>=0&&(a=i[i.length-1]),!a)return;const r=null==a?void 0:a.onPageScroll;a.onPageScroll=e=>{null==r||r.call(this,e),this.observerScrollTop(e)}}observerScrollTop(e){const{scrollTop:t}=e||{};this.pageScrollTop=t}toggleA11yTips(){this.setData({isVisibleToScreenReader:!0}),setTimeout(()=>{this.setData({isVisibleToScreenReader:!1})},2e3)}renderLine(e){const{min:t,max:i,range:a}=this.properties,{maxRange:r}=this.data;if(a){const a=r*(e[0]-Number(t))/(Number(i)-Number(t)),s=r*(Number(i)-e[1])/(Number(i)-Number(t));this.setLineStyle(a,s)}else this.setSingleBarWidth(e)}triggerValue(e){const t=trimValue(e,this.properties);JSON.stringify(this.preval)!==JSON.stringify(t)&&(this.preval=t,this._trigger("change",{value:t}))}getLabelByValue(e,t){const{label:i}=this.properties;if(isString(i)){let t=String(e);try{const a=/\${value}%/g;if(!a.test(i))throw t=i,new Error;t=i.replace(a,String(e))}catch(e){console.warn("fail to parse label prop, please pass string such as '${value}%'")}return t}return isFunction(i)?i(e,t):String(e)}handlePropsChange(e){const t=trimValue(e,this.properties),i=this.getLabelByValue(t);void 0!==this.preval&&(this.preval=t);const a=()=>{this.setData({_value:t,realLabel:i})};a(),0===this.data.maxRange&&this.init().catch(()=>{})}valueToPosition(e){const{min:t,max:i,theme:a}=this.properties,{blockSize:r,maxRange:s}=this.data,n="capsule"===a?Number(r)/2:0;return Math.round((Number(e)-Number(t))/(Number(i)-Number(t))*s)+n}handleMark(e){const t=e=>e.map(e=>({val:e,left:this.valueToPosition(e)}));if((null==e?void 0:e.length)&&Array.isArray(e)&&this.setData({isScale:!0,scaleArray:t(e),scaleTextArray:[]}),"[object Object]"===Object.prototype.toString.call(e)){const i=Object.keys(e).map(e=>Number(e)),a=i.map(t=>e[t]);this.setData({isScale:i.length>0,scaleArray:t(i),scaleTextArray:a})}}setSingleBarWidth(e){const t=this.valueToPosition(e);this.setData({lineBarWidth:`${t}px`})}init(){return __awaiter(this,void 0,void 0,function*(){if(this.data.__inited)return;const e=yield getRect(this,"#sliderLine"),{blockSize:t}=this.data,{theme:i,vertical:a}=this.properties,r=Number(t)/2,{top:s,bottom:n,right:l,left:o}=e;let h=a?n-s:l-o,u=a?s:o,c=a?n:l;0===u&&0===c||("capsule"===i&&(h=h-Number(t)-6,u-=r,c-=r),this.setData({maxRange:h,initialLeft:u,initialRight:c,__inited:!0}),this.bus.emit("initial"))})}stepValue(e){const{step:t,min:i,max:a}=this.properties,r=String(t).indexOf(".")>-1?String(t).length-String(t).indexOf(".")-1:0;return trimSingleValue(Number((Math.round(e/Number(t))*Number(t)).toFixed(r)),Number(i),Number(a))}onSingleLineTap(e){const{disabled:t}=this.properties;if(t)return;const i=-1===this.data.identifier[0];if(i){const[t]=e.changedTouches;this.data.identifier[0]=t.identifier}const a=this.getSingleChangeValue(e);i&&(this.data.identifier[0]=-1),this.triggerValue(a)}getSingleChangeValue(e){const{min:t,max:i,theme:a,vertical:r}=this.properties,{initialLeft:s,maxRange:n,blockSize:l}=this.data,o=e.changedTouches.find(e=>e.identifier===this.data.identifier[0]),h=this.getPagePosition(o);let u=0;"capsule"===a?(u=Number(l),r&&(u*=2),u+=6):r&&(u=Number(l));const c=h-s-u;let g=0;return g=c<=0?Number(t):c>=n?Number(i):c/n*(Number(i)-Number(t))+Number(t),this.stepValue(g)}convertPosToValue(e,t){const{maxRange:i}=this.data,{max:a,min:r}=this.properties;return 0===t?e/i*(Number(a)-Number(r))+Number(r):Number(a)-e/i*(Number(a)-Number(r))}onLineTap(e){const{disabled:t,theme:i,vertical:a}=this.properties,{initialLeft:r,initialRight:s,maxRange:n,blockSize:l}=this.data;if(t)return;const[o]=e.changedTouches,h=this.getPagePosition(o),u="capsule"===i?Number(l)/2:0;h-r<0||-(h-s)>n+Number(l)||Promise.all([getRect(this,"#leftDot"),getRect(this,"#rightDot")]).then(([e,t])=>{const n=this.pageScrollTop||0,o=a?e.top+n:e.left,c=Math.abs(h-o-u),g=a?t.top+n:t.left,m=c<Math.abs(g-h+u);let p=0;if("capsule"===i?(p=Number(l),a&&(p*=2),p+=6):a&&(p=Number(l)),m){const e=h-r-p,t=this.convertPosToValue(e,0);this.triggerValue([this.stepValue(t),this.data._value[1]])}else{let e=-(h-s);a&&(e+=p/2);const t=this.convertPosToValue(e,1);this.triggerValue([this.data._value[0],this.stepValue(t)])}})}onTouchStart(e){this.triggerEvent("dragstart",{e:e});const[t]=e.changedTouches;"rightDot"===e.currentTarget.id?this.data.identifier[1]=t.identifier:this.data.identifier[0]=t.identifier}onTouchMoveLeft(e){const{disabled:t,theme:i,vertical:a}=this.properties,{initialLeft:r,_value:s,blockSize:n}=this.data;if(t)return;const l=e.changedTouches.find(e=>e.identifier===this.data.identifier[0]),o=this.getPagePosition(l);let h=0;"capsule"===i&&(h+=Number(n)),a&&(h+=Number(n)+6);const u=o-r-h,c=[...s],g=this.convertPosToValue(u,0);c[0]=this.stepValue(g),this.triggerValue(c)}onTouchMoveRight(e){const{disabled:t,vertical:i}=this.properties,{initialRight:a,_value:r,blockSize:s}=this.data;if(t)return;const n=e.changedTouches.find(e=>e.identifier===this.data.identifier[1]),l=this.getPagePosition(n);let o=0;i&&(o+=Number(s)/2+6);const h=-(l-a-o),u=[...r],c=this.convertPosToValue(h,1);u[1]=this.stepValue(c),this.triggerValue(u)}setLineStyle(e,t){const{theme:i}=this.properties,{blockSize:a,maxRange:r}=this.data,s="capsule"===i?Number(a)/2:0,[n,l]=this.data._value,o=e=>parseInt(e,10);this.setData({dotTopValue:[n,l],realLabel:[this.getLabelByValue(n,"start"),this.getLabelByValue(l,"end")]}),e+t<=r?this.setData({lineLeft:o(e+s),lineRight:o(t+s)}):this.setData({lineLeft:o(r+s-t),lineRight:o(r-e+1.5*s)})}onTouchEnd(e){this.triggerEvent("dragend",{e:e,value:this.data._value}),"rightDot"===e.currentTarget.id?this.data.identifier[1]=-1:this.data.identifier[0]=-1}getPagePosition(e){const{pageX:t,pageY:i}=e,{vertical:a}=this.properties;return a?i:t}};Slider=__decorate([wxComponent()],Slider);export default Slider;

package/registry/components/slider/slider.json

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

package/registry/components/slider/slider.wxml

@@ -0,0 +1 @@
+<wxs src="../common/utils.wxs" module="_"/><view style="{{_._style([style, customStyle])}}" class="{{_.cls(classPrefix, [['top', isShowLabel || scaleTextArray.length], ['disabled', disabled], ['range', range]])}} class {{prefix}}-class {{vertical ? classPrefix + '--vertical' : ''}}"><block wx:if="{{!range}}"><text wx:if="{{showExtremeValue}}" class="{{classPrefix}}__value {{classPrefix}}__value--min">{{extremeLabel[0]}}</text><view id="sliderLine" class="{{_.cls(classPrefix + '__bar', [['disabled', disabled], theme, ['marks', isScale && theme == 'capsule']])}} {{prefix}}-class-bar" bind:tap="onSingleLineTap"><block wx:if="{{isScale}}"><view class="{{_.cls(classPrefix + '__scale-item', [['active', _value >= item.val], ['disabled', disabled], theme, ['hidden', (index == 0 || index == scaleArray.length - 1) && theme == 'capsule' || value == item.val]])}}" wx:for="{{scaleArray}}" wx:key="index" style="{{vertical ? 'top' :  'left'}}:{{item.left}}px; {{vertical ? 'transform: translate(-50%, -50%);' : 'transform: translateX(-50%);'}}" aria-hidden="{{true}}"><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="{{vertical ? 'height' : 'width'}}: {{lineBarWidth}}"><view id="singleDot" class="{{classPrefix}}__dot {{prefix}}-class-cursor" catch:touchstart="onTouchStart" catch:touchmove="onSingleLineTap" catch:touchend="onTouchEnd" catch:touchcancel="onTouchEnd"><view wx:if="{{isShowLabel || isVisibleToScreenReader}}" class="{{_.cls(classPrefix+'__dot-value', [['sr-only', !isShowLabel]])}}" aria-role="alert" aria-live="assertive" aria-hidden="{{!isVisibleToScreenReader}}">{{realLabel}}</view><view class="{{classPrefix}}__dot-slider" aria-role="slider" aria-disabled="{{disabled}}" aria-valuemax="{{max}}" aria-valuemin="{{min}}" aria-valuenow="{{_value}}" aria-valuetext="{{realLabel}}"></view></view></view></view><text wx:if="{{showExtremeValue}}" class="{{classPrefix}}__value {{classPrefix}}__value--max">{{extremeLabel[1]}}</text></block><block wx:if="{{range}}"><view wx:if="{{showExtremeValue}}" class="{{classPrefix}}__range-extreme {{classPrefix}}__range-extreme--min">{{extremeLabel[0]}}</view><view id="sliderLine" bind:tap="onLineTap" class="{{_.cls(classPrefix + '__bar', [['disabled', disabled], theme, ['marks', isScale && theme == 'capsule']])}} {{prefix}}-class-bar"><block wx:if="{{isScale}}"><view class="{{_.cls(classPrefix + '__scale-item', [['active', dotTopValue[1] >= item.val && item.val >= dotTopValue[0]], ['disabled', disabled], theme, ['hidden', (index == 0 || index == scaleArray.length - 1) && theme == 'capsule' || value == item.val]])}}" wx:for="{{scaleArray}}" wx:for-index="index" wx:key="index" style="{{vertical ? 'top' :  'left'}}:{{item.left}}px; {{vertical ? 'transform: translate(-50%, -50%);' : 'transform: translateX(-50%);'}}" aria-hidden="{{true}}"><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="{{vertical ? 'top' : 'left'}}: {{lineLeft}}px; {{vertical ? 'bottom' : 'right'}}: {{lineRight}}px"><view id="leftDot" catch:touchstart="onTouchStart" catch:touchmove="onTouchMoveLeft" catch:touchend="onTouchEnd" catch:touchcancel="onTouchEnd" class="{{classPrefix}}__dot {{classPrefix}}__dot--left {{prefix}}-class-cursor"><view wx:if="{{isShowLabel || isVisibleToScreenReader}}" class="{{_.cls(classPrefix+'__dot-value', [['sr-only', !isShowLabel]])}}" aria-role="alert" aria-live="assertive" aria-hidden="{{!isVisibleToScreenReader}}">{{realLabel[0] || dotTopValue[0]}}</view><view class="{{classPrefix}}__dot-slider" aria-role="slider" aria-disabled="{{disabled}}" aria-valuemax="{{max}}" aria-valuemin="{{min}}" aria-valuenow="{{dotTopValue[0]}}" aria-valuetext="{{realLabel[0] || dotTopValue[0]}}"></view></view><view id="rightDot" catch:touchstart="onTouchStart" catch:touchmove="onTouchMoveRight" catch:touchend="onTouchEnd" catch:touchcancel="onTouchEnd" class="{{classPrefix}}__dot {{classPrefix}}__dot--right {{prefix}}-class-cursor"><view wx:if="{{isShowLabel || isVisibleToScreenReader}}" class="{{_.cls(classPrefix+'__dot-value', [['sr-only', !isShowLabel]])}}" aria-role="alert" aria-live="assertive" aria-hidden="{{!isVisibleToScreenReader}}">{{realLabel[1] || dotTopValue[1]}}</view><view class="{{classPrefix}}__dot-slider" aria-role="slider" aria-disabled="{{disabled}}" aria-valuemax="{{max}}" aria-valuemin="{{min}}" aria-valuenow="{{dotTopValue[1]}}" aria-valuetext="{{realLabel[1] || dotTopValue[1]}}"></view></view></view></view><view wx:if="{{showExtremeValue}}" class="{{classPrefix}}__range-extreme {{classPrefix}}__range-extreme--max">{{extremeLabel[1]}}</view></block></view>

package/registry/components/slider/slider.wxs

@@ -0,0 +1,10 @@
+var REGEXP = getRegExp('[$][{value}]{7}');
+
+function getValue(label, value) {
+  if (label && label === 'true') return value;
+  if (REGEXP.test(label)) return label.replace(REGEXP, value);
+}
+
+module.exports = {
+  getValue: getValue,
+};