maxit-cli 0.1.0

package/registry/components/radio/radio.js

@@ -0,0 +1 @@
+import{__decorate}from"../common/tslib";import config from"../common/config";import{SuperComponent,wxComponent}from"../common/src/index";import Props from"./props";const{prefix:prefix}=config,name=`${prefix}-radio`;let Radio=class extends SuperComponent{constructor(){super(...arguments),this.externalClasses=[`${prefix}-class`,`${prefix}-class-label`,`${prefix}-class-icon`,`${prefix}-class-content`,`${prefix}-class-border`],this.behaviors=["wx://form-field"],this.relations={"../radio-group/radio-group":{type:"ancestor",linked(e){e.data.borderless&&this.setData({borderless:!0})}}},this.options={multipleSlots:!0},this.lifetimes={attached(){this.init()}},this.properties=Object.assign(Object.assign({},Props),{borderless:{type:Boolean,value:!1},oId:{type:String}}),this.controlledProps=[{key:"checked",event:"change"}],this.data={prefix:prefix,classPrefix:name,customIcon:!1,slotIcon:!1,direction:"vertical",optionLinked:!1,iconVal:[],_placement:"",_disabled:!1,_readonly:!1},this.observers={disabled(e){this.setData({_disabled:e})},readonly(e){this.setData({_readonly:e})}},this.methods={handleTap(e){const{_disabled:t,_readonly:a,contentDisabled:o}=this.data,{target:i}=e.currentTarget.dataset;t||a||"text"===i&&o||this.doChange()},doChange(){var e;const{value:t,checked:a,allowUncheck:o}=this.data,i=Boolean(o||(null===(e=this.$parent)||void 0===e?void 0:e.data.allowUncheck));this.$parent?this.$parent.updateValue(a&&i?null:t):this._trigger("change",{checked:!i||!a})},init(){var e,t,a,o;const{icon:i}=this.data,s=Array.isArray((null===(e=this.$parent)||void 0===e?void 0:e.icon)||i);this.setData({customIcon:s,slotIcon:"slot"===i,iconVal:s?(null===(t=this.$parent)||void 0===t?void 0:t.icon)||i:[],_placement:this.data.placement||(null===(o=null===(a=this.$parent)||void 0===a?void 0:a.data)||void 0===o?void 0:o.placement)||"left"})},setDisabled(e){this.setData({_disabled:this.data.disabled||e})},setReadonly(e){this.setData({_readonly:this.data.readonly||e})}}}};Radio=__decorate([wxComponent()],Radio);export default Radio;

package/registry/components/radio/radio.json

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

package/registry/components/radio/radio.wxml

@@ -0,0 +1 @@
+<wxs src="../common/utils.wxs" module="_"/><view id="{{oId}}" style="{{_._style([style, customStyle])}}" class="{{_.cls(classPrefix, [_placement, direction, ['block', block], ['disabled', _disabled]])}} class {{prefix}}-class" disabled="{{_disabled}}" aria-role="radio" aria-checked="{{checked}}" aria-label="{{label + content}}" aria-disabled="{{_disabled}}" tabindex="{{tabindex}}" mut-bind:tap="handleTap"><view class="{{_.cls(classPrefix + '__icon', [_placement, ['checked', checked], ['disabled', _disabled]])}} {{prefix}}-class-icon"><slot name="icon" wx:if="{{slotIcon}}"/><view wx:elif="{{customIcon}}" class="{{classPrefix}}__image"><image src="{{checked ? iconVal[0] : iconVal[1]}}" class="{{classPrefix}}-icon__image" webp/></view><block wx:else><o-icon wx:if="{{checked && (icon == 'circle' || icon == 'line')}}" name="{{icon == 'circle' ? 'check-circle-filled' : 'check'}}" class="{{classPrefix}}__icon-wrap"/><view wx:if="{{checked && icon == 'dot'}}" class="{{_.cls(classPrefix + '__icon-' + icon, [['disabled', _disabled]])}}"/><view wx:if="{{!checked && (icon == 'circle' || icon == 'dot')}}" class="{{_.cls(classPrefix + '__icon-circle', [['disabled', _disabled]])}}"/><view wx:if="{{!checked && icon == 'line'}}" class="placeholder"></view></block></view><view class="{{classPrefix}}__content" data-target="text" mut-bind:tap="handleTap"><view class="{{_.cls(classPrefix + '__title', [['disabled', _disabled], ['checked', checked]])}} {{prefix}}-class-label" style="-webkit-line-clamp:{{maxLabelRow}}"><block wx:if="{{label}}">{{label}}</block><slot/><slot name="label"/></view><view class="{{_.cls(classPrefix + '__description', [['disabled', _disabled], ['checked', checked]])}} {{prefix}}-class-content" style="-webkit-line-clamp:{{maxContentRow}}"><block wx:if="{{content}}">{{content}}</block><slot name="content"/></view></view><view wx:if="{{!borderless}}" class="{{_.cls(classPrefix + '__border', [_placement])}} {{prefix}}-class-border"/></view>

package/registry/components/radio/radio.wxss

@@ -0,0 +1,219 @@
+@import '../common/style/index.wxss';
+
+.limit-title-row {
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+}
+
+.o-radio {
+    position: relative;
+    display: inline-flex;
+    vertical-align: middle;
+    background: var(--o-radio-bg-color,var(--o-bg-color-container,var(--o-font-white-1,#fff)));
+}
+
+.o-radio:focus {
+    outline: 0;
+}
+
+.o-radio--block {
+    display: flex;
+    padding: var(--o-radio-vertical-padding,var(--o-spacer-2,32rpx));
+}
+
+.o-radio--horizontal {
+    padding: 0;
+    margin-right: var(--o-spacer-2,32rpx);
+}
+
+.o-radio--right {
+    flex-direction: row-reverse;
+}
+
+.o-radio__icon {
+    position: relative;
+    margin-top: calc((var(--o-radio-label-line-height,var(--o-line-height-title-medium,48rpx)) - var(--o-radio-icon-size,48rpx))/ 2);
+    width: var(--o-radio-icon-size,48rpx);
+    height: var(--o-radio-icon-size,48rpx);
+    font-size: var(--o-radio-icon-size,48rpx);
+    color: var(--o-radio-icon-color,var(--o-component-border,var(--o-gray-color-4,#dddddd)));
+    overflow: hidden;
+}
+
+.o-radio__icon:empty {
+    display: none;
+}
+
+.o-radio__icon--left {
+    margin-right: var(--o-spacer,16rpx);
+}
+
+.o-radio__icon--checked {
+    color: var(--o-radio-icon-checked-color,var(--o-brand-color,var(--o-primary-color-7,#f16e00)));
+}
+
+.o-radio__icon--disabled {
+    cursor: not-allowed;
+    color: var(--o-radio-icon-disabled-color,var(--o-brand-color-disabled,var(--o-primary-color-3,#f9c599)));
+}
+
+.o-radio__icon-circle {
+    width: var(--o-radio-icon-size,48rpx);
+    height: var(--o-radio-icon-size,48rpx);
+    box-sizing: border-box;
+}
+
+.o-radio__icon-circle::after {
+    content: '';
+    width: calc(200% - 6rpx);
+    height: calc(200% - 6rpx);
+    border-radius: var(--o-radius-circle,50%);
+    border: 3px solid var(--o-radio-icon-color,var(--o-component-border,var(--o-gray-color-4,#dddddd)));
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%,-50%) scale(.5);
+    box-sizing: border-box;
+}
+
+.o-radio__icon-circle--disabled::after {
+    background: var(--o-radio-icon-disabled-bg-color,var(--o-bg-color-component-disabled,var(--o-gray-color-2,#eee)));
+}
+
+.o-radio__icon-line::after,
+.o-radio__icon-line::before {
+    content: '';
+    display: block;
+    position: absolute;
+    width: 5rpx;
+    border-radius: 2rpx;
+    background: var(--o-radio-icon-checked-color,var(--o-brand-color,var(--o-primary-color-7,#f16e00)));
+    transform-origin: top center;
+}
+
+.o-radio__icon-line::before {
+    height: 16rpx;
+    left: 8rpx;
+    top: 22rpx;
+    transform: rotate(-45deg);
+}
+
+.o-radio__icon-line::after {
+    height: 26rpx;
+    right: 8rpx;
+    top: 14rpx;
+    transform: rotate(45deg);
+}
+
+.o-radio__icon-line--disabled::after,
+.o-radio__icon-line--disabled::before {
+    background: var(--o-radio-icon-disabled-color,var(--o-brand-color-disabled,var(--o-primary-color-3,#f9c599)));
+}
+
+.o-radio__icon-dot {
+    width: calc((var(--o-radio-icon-size,48rpx) - 6rpx) * 2);
+    height: calc((var(--o-radio-icon-size,48rpx) - 6rpx) * 2);
+    border: 6rpx solid var(--o-radio-icon-checked-color,var(--o-brand-color,var(--o-primary-color-7,#f16e00)));
+    border-radius: var(--o-radius-circle,50%);
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%,-50%) scale(.5);
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.o-radio__icon-dot::after {
+    content: '';
+    display: block;
+    width: var(--o-radio-icon-size,48rpx);
+    height: var(--o-radio-icon-size,48rpx);
+    background: var(--o-radio-icon-checked-color,var(--o-brand-color,var(--o-primary-color-7,#f16e00)));
+    border-radius: var(--o-radius-circle,50%);
+}
+
+.o-radio__icon-dot--disabled {
+    border-color: var(--o-radio-icon-disabled-color,var(--o-brand-color-disabled,var(--o-primary-color-3,#f9c599)));
+}
+
+.o-radio__icon-dot--disabled::after {
+    background: var(--o-radio-icon-disabled-color,var(--o-brand-color-disabled,var(--o-primary-color-3,#f9c599)));
+}
+
+.o-radio__image {
+    line-height: var(--o-radio-icon-size,48rpx);
+}
+
+.o-radio-icon__image {
+    height: var(--o-radio-icon-size,48rpx);
+    width: var(--o-radio-icon-size,48rpx);
+    vertical-align: sub;
+}
+
+.o-radio__content {
+    flex: 1;
+}
+
+.o-radio__content:empty {
+    display: none;
+}
+
+.o-radio__title {
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+    color: var(--o-radio-label-color,var(--o-text-color-primary,var(--o-font-gray-1,#1c1b1f)));
+    font: var(--o-radio-font,var(--o-font-body-large,32rpx / 48rpx var(--o-font-family,Roboto,PingFang SC,Microsoft YaHei,Arial)));
+}
+
+.o-radio__title--checked {
+    color: var(--o-radio-label-checked-color,var(--o-text-color-primary,var(--o-font-gray-1,#1c1b1f)));
+}
+
+.o-radio__title--disabled {
+    cursor: not-allowed;
+    color: var(--o-radio-label-disabled-color,var(--o-text-color-disabled,var(--o-font-gray-4,rgba(0,0,0,.26))));
+}
+
+.o-radio__description {
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+    color: var(--o-radio-content-color,var(--o-text-color-secondary,var(--o-font-gray-2,#444748)));
+    font: var(--o-radio-content-font,var(--o-font-body-medium,28rpx / 44rpx var(--o-font-family,Roboto,PingFang SC,Microsoft YaHei,Arial)));
+}
+
+.o-radio__description--checked {
+    color: var(--o-radio-content-checked-color,var(--o-text-color-secondary,var(--o-font-gray-2,#444748)));
+}
+
+.o-radio__description--disabled {
+    cursor: not-allowed;
+    color: var(--o-radio-content-disabled-color,var(--o-text-color-disabled,var(--o-font-gray-4,rgba(0,0,0,.26))));
+}
+
+.o-radio__description:empty {
+    display: none;
+}
+
+.o-radio__title+.o-radio__description {
+    margin-top: calc(var(--o-spacer,16rpx)/ 2);
+}
+
+.o-radio__border {
+    position: absolute;
+    bottom: 0;
+    height: 1px;
+    background: var(--o-radio-border-color,var(--o-component-stroke,var(--o-gray-color-3,#dddddd)));
+    left: 96rpx;
+    right: 0;
+    transform: scaleY(.5);
+}
+
+.o-radio__border--right {
+    left: 32rpx;
+}
+

package/registry/components/radio-group/index.js

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

package/registry/components/radio-group/props.js

@@ -0,0 +1 @@
+const props={allowUncheck:{type:Boolean,value:!1},borderless:{type:Boolean,value:!1},direction:{type:String,value:"vertical"},disabled:{type:null,value:void 0},icon:{type:null,value:"circle"},keys:{type:Object},name:{type:String,value:""},options:{type:Array},placement:{type:String,value:"left"},readonly:{type:null,value:void 0},value:{type:null,value:null},defaultValue:{type:null}};export default props;

package/registry/components/radio-group/radio-group.js

@@ -0,0 +1 @@
+import{__decorate}from"../common/tslib";import config from"../common/config";import{SuperComponent,wxComponent}from"../common/src/index";import props from"./props";const{prefix:prefix}=config,name=`${prefix}-radio-group`;let RadioGroup=class extends SuperComponent{constructor(){super(...arguments),this.behaviors=["wx://form-field"],this.externalClasses=[`${prefix}-class`],this.data={prefix:prefix,classPrefix:name,radioOptions:[]},this.relations={"../radio/radio":{type:"descendant",linked(e){const{value:t,disabled:i,readonly:o,direction:a}=this.data;e.setData({checked:t===e.data.value,direction:a}),e.setDisabled(i),e.setReadonly(o)}}},this.properties=props,this.controlledProps=[{key:"value",event:"change"}],this.observers={value(e){this.getChildren().forEach(t=>{t.setData({checked:e===t.data.value})})},options(){this.initWithOptions()},disabled(e){var t;(null===(t=this.data.options)||void 0===t?void 0:t.length)?this.initWithOptions():this.getChildren().forEach(t=>{t.setDisabled(e)})},direction(e){this.getChildren().forEach(t=>{t.setData({direction:e})})}},this.methods={getChildren(){let e=this.$children;return(null==e?void 0:e.length)||(e=this.selectAllComponents(`.${prefix}-radio-option`)),e},updateValue(e){this._trigger("change",{value:e})},handleRadioChange(e){const{checked:t}=e.detail,{value:i,index:o,allowUncheck:a}=e.target.dataset;this._trigger("change",!1===t&&a?{value:null,index:o}:{value:i,index:o})},initWithOptions(){const{options:e,value:t,keys:i,disabled:o,readonly:a}=this.data;if(!(null==e?void 0:e.length)||!Array.isArray(e))return void this.setData({radioOptions:[]});const r=[];try{e.forEach(e=>{var s,n,l;const d=typeof e;"number"===d||"string"===d?r.push({label:`${e}`,value:e,checked:t===e,disabled:o,readonly:a}):"object"===d&&r.push(Object.assign(Object.assign({},e),{label:e[null!==(s=null==i?void 0:i.label)&&void 0!==s?s:"label"],value:e[null!==(n=null==i?void 0:i.value)&&void 0!==n?n:"value"],checked:t===e[null!==(l=null==i?void 0:i.value)&&void 0!==l?l:"value"],disabled:e.disabled||o,readonly:e.readonly||a}))}),this.setData({radioOptions:r})}catch(e){console.error("error",e)}}}}};RadioGroup=__decorate([wxComponent()],RadioGroup);export default RadioGroup;

package/registry/components/radio-group/radio-group.json

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

package/registry/components/radio-group/radio-group.wxml

@@ -0,0 +1 @@
+<wxs src="../common/utils.wxs" module="_"/><view style="{{_._style([style, customStyle])}}" class="{{_.cls(classPrefix, [direction])}} class {{prefix}}-class" aria-role="radiogroup"><slot/><block wx:for="{{radioOptions}}" wx:key="value"><o-radio class="{{prefix}}-radio-option" data-index="{{index}}" data-value="{{item.value}}" data-allow-uncheck="{{item.allowUncheck || allowUncheck}}" block="{{item.block || true}}" label="{{item.label || ''}}" value="{{item.value}}" checked="{{item.checked || false}}" content="{{item.content || ''}}" allow-uncheck="{{item.allowUncheck || allowUncheck}}" content-disabled="{{item.contentDisabled || false}}" readonly="{{item.readonly || false}}" disabled="{{item.disabled || false}}" icon="{{item.icon || icon}}" placement="{{item.placement || placement}}" max-content-row="{{item.maxContentRow || 5}}" max-label-row="{{item.maxLabelRow || 3}}" name="{{item.name || ''}}" borderless="{{borderless}}" bind:change="handleRadioChange"/></block></view>

package/registry/components/radio-group/radio-group.wxss

@@ -0,0 +1,7 @@
+@import '../common/style/index.wxss';
+
+.o-radio-group--horizontal {
+    display: flex;
+    flex-wrap: wrap;
+}
+

package/registry/components/rate/index.js

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

package/registry/components/rate/props.js

@@ -0,0 +1 @@
+const props={allowHalf:{type:Boolean,value:!1},color:{type:null,value:"#f16e00"},count:{type:Number,value:5},disabled:{type:null,value:void 0},gap:{type:null,value:8},icon:{type:null},iconPrefix:{type:String,value:void 0},placement:{type:String,value:"top"},showText:{type:Boolean,value:!1},size:{type:String,value:"24px"},texts:{type:Array,value:[]},value:{type:Number,value:null},defaultValue:{type:Number,value:0},variant:{type:String,value:"outline"}};export default props;

package/registry/components/rate/rate.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{unitConvert,getRect}from"../common/utils";import usingConfig from"../common/mixins/using-config";const{prefix:prefix}=config,componentName="rate";let Rate=class extends SuperComponent{constructor(){super(...arguments),this.behaviors=[usingConfig({componentName:"rate"})],this.externalClasses=[`${prefix}-class`,`${prefix}-class-icon`,`${prefix}-class-text`],this.properties=props,this.controlledProps=[{key:"value",event:"change"}],this.data={prefix:prefix,classPrefix:`${prefix}-rate`,tipsVisible:!1,tipsLeft:0,actionType:"",scaleIndex:-1,isVisibleToScreenReader:!1},this.methods={onTouch(e,t){const{classPrefix:i}=this.data,{count:s,allowHalf:o,gap:n,value:a,size:r}=this.properties,[c]=e.changedTouches,p=unitConvert(n);getRect(this,`.${i}__wrapper`).then(e=>{const{width:i,left:h}=e,l=(i-(s-1)*p)/s,m=(c.pageX-h+p)/(l+p),u=m%1,d=m-u;let f=u<=.5&&o?d+.5:d+1;f>s?f=s:f<0&&(f=0);const x=Math.ceil(f-1)*(unitConvert(n)+unitConvert(r))+.5*unitConvert(r);this.setData({tipsVisible:!0,actionType:t,scaleIndex:Math.ceil(f),tipsLeft:Math.max(x,0)}),f!==a&&this._trigger("change",{value:f}),this.touchEnd&&this.hideTips()})},onTap(e){const{disabled:t}=this.properties;t||this.onTouch(e,"tap")},onTouchStart(){this.touchEnd=!1},onTouchMove(e){this.onTouch(e,"move"),this.showAlertText()},onTouchEnd(){this.touchEnd=!0,this.hideTips()},hideTips(){"move"===this.data.actionType&&this.setData({tipsVisible:!1,scaleIndex:-1})},onSelect(e){const{value:t}=e.currentTarget.dataset,{actionType:i}=this.data;"move"!==i&&(this._trigger("change",{value:t}),setTimeout(()=>this.setData({tipsVisible:!1,scaleIndex:-1}),300))},showAlertText(){!0!==this.data.isVisibleToScreenReader&&(this.setData({isVisibleToScreenReader:!0}),setTimeout(()=>{this.setData({isVisibleToScreenReader:!1})},2e3))}}}};Rate=__decorate([wxComponent()],Rate);export default Rate;

package/registry/components/rate/rate.json

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

package/registry/components/rate/rate.wxml

@@ -0,0 +1 @@
+<wxs src="../common/utils.wxs" module="_"/><wxs src="./rate.wxs" module="utils"/><view class="{{classPrefix}} class" style="{{_._style([style, customStyle])}}"><view class="{{classPrefix}}__wrapper {{prefix}}-class" style="font-size:{{ utils.regSize(size) }}" bind:touchstart="{{ !disabled ? 'onTouchStart' : '' }}" bind:touchmove="{{ !disabled ? 'onTouchMove' : '' }}" bind:tap="onTap" bind:touchend="{{ !disabled ? 'onTouchEnd' : ''}}" bind:touchcancel="{{ !disabled ? 'onTouchEnd' : ''}}" aria-role="slider" aria-valuemax="{{count}}" aria-valuemin="{{0}}" aria-valuenow="{{value}}" aria-valuetext="{{utils.getText(texts,value,globalConfig)}}"><o-icon wx:for="{{ count }}" wx:key="*this" class="{{classPrefix }}__icon {{utils.getIconClass(classPrefix + '__icon', defaultValue, value, index, allowHalf, disabled, scaleIndex)}}" style="margin-right: {{ count - index > 1 ? _.addUnit(gap) : 0 }}; {{utils.getColor(color)}}" o-class="{{prefix}}-class-icon" name="{{utils.getIconName(defaultValue, value, index, icon)}}" size="{{ size }}" prefix="{{iconPrefix}}"/></view><text wx:if="{{showText}}" class="{{_.cls(classPrefix + '__text', [['active', value > 0]])}} {{prefix}}-class-text" aria-hidden="{{true}}">{{utils.getText(texts,value,globalConfig)}}</text><text wx:if="{{isVisibleToScreenReader}}" class="{{_.cls(classPrefix + '__text', [['active', value > 0], ['sr-only', isVisibleToScreenReader]])}} {{prefix}}-class-text" aria-role="alert" aria-live="assertive">{{value + (value > 1 ? ' étoiles' : ' étoile')}} {{utils.getText(texts,value,globalConfig)}}</text><view wx:if="{{tipsVisible && placement}}" class="{{_.cls(classPrefix + '__tips', [placement])}}" style="left: {{tipsLeft}}px" aria-hidden="{{true}}"><block wx:if="{{actionType == 'tap'}}"><view wx:if="{{allowHalf}}" class="{{_.cls(classPrefix + '__tips-item', [['active', utils.ceil(value) - 0.5 == value]])}}" bind:tap="onSelect" data-value="{{utils.ceil(value) - 0.5}}"><o-icon class="{{classPrefix }}__icon {{classPrefix }}__icon--selected-half" name="{{utils.getIconName(defaultValue, value, index, icon)}}" size="{{ size }}" style="{{utils.getColor(color)}}"/><view class="{{classPrefix}}__tips-text">{{utils.ceil(value) - 0.5}}</view></view><view class="{{_.cls(classPrefix + '__tips-item', [['active', utils.ceil(value) == value]])}}" bind:tap="onSelect" data-value="{{utils.ceil(value)}}"><o-icon class="{{_.cls(classPrefix + '__icon', ['selected'])}}" name="{{utils.getIconName(defaultValue, 0, 0, icon)}}" size="{{ size }}" style="{{utils.getColor(color)}}"/><view class="{{classPrefix}}__tips-text">{{utils.ceil(value)}}</view></view></block><view wx:else class="{{_.cls(classPrefix + '__tips-item', [['active', utils.ceil(value) == value && actionType == 'tap']])}}" bind:tap="onSelect" data-value="{{utils.ceil(value)}}"><o-icon class="{{_.cls(classPrefix + '__icon', [['selected', utils.ceil(value) == value], ['selected-half', utils.ceil(value) != value]]) }}" name="{{utils.getIconName(defaultValue, 0, 0, icon)}}" size="{{ size }}" style="{{utils.getColor(color)}}"/><view class="{{classPrefix}}__tips-text">{{value}}</view></view></view></view>

package/registry/components/rate/rate.wxs

@@ -0,0 +1,65 @@
+module.exports = {
+  getText: function (texts, val, globalConfig) {
+    if (!texts.length) {
+      texts = globalConfig.texts || [];
+    }
+    var curVal = Math.floor(val - 1);
+    return texts[curVal] || globalConfig.noValueText;
+  },
+
+  getIconName: function (defaultValue, value, index, icon) {
+    var curVal = value >= 0 ? value : defaultValue;
+    var name = ['star-filled', 'star-filled'];
+
+    if (icon) {
+      name = icon.constructor == 'Array' ? icon : [icon, icon];
+    }
+
+    return name[curVal >= index + 1 ? 0 : 1];
+  },
+
+  getIconClass: function (classPrefix, defaultValue, value, index, allowHalf, disabled, scaleIndex) {
+    var curVal = value >= 0 ? value : defaultValue;
+    var className = [];
+    if (curVal >= index + 1) {
+      className.push(classPrefix + '--selected');
+      if (disabled) {
+        className.push(classPrefix + '--disabled');
+      }
+      if (scaleIndex === index + 1) {
+        className.push(classPrefix + '--current');
+      }
+    } else if (allowHalf && curVal - index > 0) {
+      className.push(classPrefix + '--selected-half');
+      if (scaleIndex === index + 1) {
+        className.push(classPrefix + '--current');
+      }
+      if (disabled) {
+        className.push(classPrefix + '--disabled-half');
+      }
+    } else {
+      className.push(classPrefix + '--unselected');
+    }
+    return className.join(' ');
+  },
+
+  ceil: function (value) {
+    return Math.ceil(value);
+  },
+
+  getColor: function (color) {
+    if (color.constructor === 'Array' && color.length === 2) {
+      return ';--o-rate-selected-color: ' + color[0] + '; --o-rate-unselected-color: ' + color[1];
+    }
+
+    if (typeof color === 'string') {
+      return ';--o-rate-selected-color: ' + color;
+    }
+
+    return '';
+  },
+
+  regSize: function (val) {
+    return val.indexOf('px') ? val : val + 'px';
+  },
+};

package/registry/components/rate/rate.wxss

@@ -0,0 +1,99 @@
+@import '../common/style/index.wxss';
+
+.o-rate {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+}
+
+.o-rate__wrapper {
+    line-height: 1em;
+    display: inline-flex;
+}
+
+.o-rate__icon {
+    display: block;
+    line-height: 1em;
+    width: 1em;
+    transition: transform .3s ease;
+}
+
+.o-rate__icon--current {
+    transform: scale(var(--o-rate-icon-scale,1.33));
+}
+
+.o-rate__icon--selected {
+    color: var(--o-rate-selected-color,var(--o-brand-color,var(--o-primary-color-7,#f16e00)));
+}
+
+.o-rate__icon--selected-half {
+    color: transparent;
+    background: linear-gradient(to right,var(--o-rate-selected-color,var(--o-brand-color,var(--o-primary-color-7,#f16e00))) 0,var(--o-rate-selected-color,var(--o-brand-color,var(--o-primary-color-7,#f16e00))) 50%,var(--o-rate-unselected-color,var(--o-component-border,var(--o-gray-color-4,#dddddd))) 51%,var(--o-rate-unselected-color,var(--o-component-border,var(--o-gray-color-4,#dddddd))) 100%);
+    -webkit-background-clip: text;
+    background-clip: text;
+}
+
+.o-rate__icon--unselected {
+    color: var(--o-rate-unselected-color,var(--o-component-border,var(--o-gray-color-4,#dddddd)));
+}
+
+.o-rate__text {
+    font-size: var(--o-rate-text-font-size,var(--o-font-size-m,32rpx));
+    color: var(--o-rate-text-color,var(--o-text-color-disabled,var(--o-font-gray-4,rgba(0,0,0,.26))));
+    margin-left: var(--o-spacer-2,32rpx);
+    vertical-align: middle;
+}
+
+.o-rate__text--active {
+    color: var(--o-rate-text-active-color,var(--o-text-color-primary,var(--o-font-gray-1,#1c1b1f)));
+    font-weight: var(--o-rate-text-active-font-weight,600);
+}
+
+.o-rate__text--sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    overflow: hidden;
+    clip: rect(0,0,0,0);
+    white-space: nowrap;
+    clip-path: inset(50%);
+    border: 0;
+}
+
+.o-rate__tips {
+    position: absolute;
+    display: flex;
+    align-items: center;
+    bottom: calc(100% + 16rpx);
+    padding: calc(var(--o-spacer,16rpx)/ 2);
+    border-radius: var(--o-radius-default,12rpx);
+    box-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));
+    background-color: var(--o-bg-color-container,var(--o-font-white-1,#fff));
+    transform: translateX(-50%);
+    z-index: 2;
+}
+
+.o-rate__tips--bottom {
+    top: calc(100% + 16rpx);
+    bottom: auto;
+}
+
+.o-rate__tips-item {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    width: 64rpx;
+    border-radius: var(--o-radius-small,6rpx);
+}
+
+.o-rate__tips-item--active {
+    background-color: var(--o-bg-color-component,var(--o-gray-color-3,#dddddd));
+}
+
+.o-rate__tips-text {
+    text-align: center;
+    font: var(--o-font-body-medium,28rpx / 44rpx var(--o-font-family,Roboto,PingFang SC,Microsoft YaHei,Arial));
+}
+

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

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

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

@@ -0,0 +1,12 @@
+// o-rating-card: Review & rating summary (Figma "Review & Rating Card"): score, stars, optional distribution bars, button.
+const props = {
+  title: { type: String, value: '' },
+  action: { type: String, value: '' },
+  score: { type: Number, value: 0 },
+  count: { type: String, value: '' },
+  // Full version: distribution bars, 5 values in % from 5 stars to 1 star
+  full: { type: Boolean, value: false },
+  distribution: { type: Array, value: [] },
+  buttonText: { type: String, value: 'Donner un avis' },
+};
+export default props;

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

@@ -0,0 +1,42 @@
+import { __decorate } from '../common/tslib';
+import { SuperComponent, wxComponent } from '../common/src/index';
+import config from '../common/config';
+import props from './props';
+
+function stars(rating) {
+  const full = Math.round(Number(rating) || 0);
+  return [1, 2, 3, 4, 5].map((i) => (i <= full ? 'star-filled' : 'star'));
+}
+const { prefix } = config;
+const name = `${prefix}-rating-card`;
+
+// Derived data, recomputed when a property changes and once when attached
+// (the runtime may skip observers for initial property values).
+const observers = {
+  score(value) { this.setData({ _stars: stars(value), _score: (Number(value) || 0).toFixed(1) }); },
+  distribution(list) {
+    this.setData({ _bars: (list || []).map((percent, i) => ({ label: `${5 - i} étoile${5 - i > 1 ? 's' : ''}`, percent })) });
+  },
+};
+
+let RatingCard = class RatingCard extends SuperComponent {
+  constructor() {
+    super(...arguments);
+    this.externalClasses = [`${prefix}-class`];
+    this.options = { multipleSlots: true };
+    this.properties = props;
+    this.data = { prefix, classPrefix: name, _stars: stars(0), _score: '0.0', _bars: [] };
+    this.observers = observers;
+    this.lifetimes = {
+      attached() {
+        Object.keys(observers).forEach((key) => observers[key].call(this, this.properties[key]));
+      },
+    };
+    this.methods = {
+      onAction() { this.triggerEvent('action'); },
+      onButton() { this.triggerEvent('review'); },
+    };
+  }
+};
+RatingCard = __decorate([wxComponent()], RatingCard);
+export default RatingCard;

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

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

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

@@ -0,0 +1,24 @@
+<view class="o-rating-card class {{prefix}}-class" style="{{style}} {{customStyle}}">
+  <o-section-title wx:if="{{title}}" title="{{title}}" action="{{action}}" bind:action="onAction" />
+  <view class="o-row">
+    <view class="o-rating-card__summary">
+      <view class="o-row">
+        <text class="o-rating-card__score">{{_score}}</text>
+        <view wx:if="{{full}}" class="o-rating-card__stars"><o-icon name="star-filled" /></view>
+        <view wx:else class="o-rating-card__stars">
+          <o-icon wx:for="{{_stars}}" wx:key="index" name="{{item}}" />
+        </view>
+      </view>
+      <view class="o-txt-body">{{count}}</view>
+    </view>
+    <view wx:if="{{full}}" class="o-grow o-rating-card__bars">
+      <view wx:for="{{_bars}}" wx:key="index" class="o-row o-rating-card__bar">
+        <text class="o-rating-card__bar-label">{{item.label}}</text>
+        <view class="o-grow o-rating-card__track"><view class="o-rating-card__fill" style="width:{{item.percent}}%" /></view>
+      </view>
+    </view>
+  </view>
+  <view wx:if="{{buttonText}}" class="o-rating-card__button">
+    <o-button theme="secondary" block bind:tap="onButton">{{buttonText}}</o-button>
+  </view>
+</view>

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

@@ -0,0 +1,49 @@
+@import '../common/style/index.wxss';
+@import '../common/style/card.wxss';
+
+/* Review & rating summary (Figma "Review & Rating Card"): score, stars, optional distribution bars, button. */
+.o-rating-card {
+    display: block;
+    color: var(--o-scheme-on-surface, #1c1b1f);
+}
+
+.o-rating-card__summary {
+    margin-right: 48rpx;
+}
+
+.o-rating-card__score {
+    font: var(--o-type-display-small, 400 72rpx / 88rpx var(--o-font-family, Roboto, Arial));
+}
+
+.o-rating-card__stars {
+    display: flex;
+    margin-left: 16rpx;
+    font-size: 40rpx;
+    color: var(--o-static-canary, #fc0);
+}
+
+.o-rating-card__bar + .o-rating-card__bar {
+    margin-top: 4rpx;
+}
+
+.o-rating-card__bar-label {
+    width: 120rpx;
+    font: var(--o-type-body-medium, 400 28rpx / 40rpx var(--o-font-family, Roboto, Arial));
+}
+
+.o-rating-card__track {
+    height: 16rpx;
+    border-radius: 8rpx;
+    overflow: hidden;
+    background-color: var(--o-scheme-outline-variant, #ddd);
+}
+
+.o-rating-card__fill {
+    height: 100%;
+    border-radius: 8rpx;
+    background-color: var(--o-static-canary, #fc0);
+}
+
+.o-rating-card__button {
+    margin-top: 32rpx;
+}

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

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

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

@@ -0,0 +1,21 @@
+// o-recap-card: Recap / detail card (Figma "Recap detail Card", "Recap Card"): header, description, key/value sections, toggle, total.
+const props = {
+  label: { type: String, value: '' },
+  thumbnail: { type: String, value: '' },
+  thumbnailIcon: { type: String, value: 'image' },
+  title: { type: String, value: '' },
+  subtitle: { type: String, value: '' },
+  // Text + chevron on the right of the header ("Modifier")
+  action: { type: String, value: '' },
+  descriptionLabel: { type: String, value: '' },
+  description: { type: String, value: '' },
+  // [{ title, rows: [{ label, value }] }]
+  sections: { type: Array, value: [] },
+  toggleLabel: { type: String, value: '' },
+  toggleStatus: { type: String, value: '' },
+  toggle: { type: Boolean, value: false },
+  totalLabel: { type: String, value: '' },
+  total: { type: String, value: '' },
+  currency: { type: String, value: 'FCFA' },
+};
+export default props;

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

@@ -0,0 +1,38 @@
+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}-recap-card`;
+
+// Derived data, recomputed when a property changes and once when attached
+// (the runtime may skip observers for initial property values).
+const observers = {
+  toggle(value) { this.setData({ _toggle: value }); },
+};
+
+let RecapCard = class RecapCard extends SuperComponent {
+  constructor() {
+    super(...arguments);
+    this.externalClasses = [`${prefix}-class`];
+    this.options = { multipleSlots: true };
+    this.properties = props;
+    this.data = { prefix, classPrefix: name, _toggle: false };
+    this.observers = observers;
+    this.lifetimes = {
+      attached() {
+        Object.keys(observers).forEach((key) => observers[key].call(this, this.properties[key]));
+      },
+    };
+    this.methods = {
+      onAction() { this.triggerEvent('action'); },
+      onToggle(e) {
+        this.setData({ _toggle: e.detail.value });
+        this.triggerEvent('toggle-change', { value: e.detail.value });
+      },
+    };
+  }
+};
+RecapCard = __decorate([wxComponent()], RecapCard);
+export default RecapCard;