maxit-cli 0.1.0

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

@@ -0,0 +1,22 @@
+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}-offer-card`;
+
+let OfferCard = class OfferCard extends SuperComponent {
+  constructor() {
+    super(...arguments);
+    this.externalClasses = [`${prefix}-class`];
+    this.options = { multipleSlots: true };
+    this.properties = props;
+    this.data = { prefix, classPrefix: name };
+    this.methods = {
+      onTap() { this.triggerEvent('click'); },
+    };
+  }
+};
+OfferCard = __decorate([wxComponent()], OfferCard);
+export default OfferCard;

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

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

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

@@ -0,0 +1,33 @@
+<view class="o-surface o-surface--outlined {{isNew ? 'o-surface--new' : ''}} o-offer-card o-offer-card--{{layout}} class {{prefix}}-class" style="{{style}} {{customStyle}}" bind:tap="onTap">
+  <view class="o-pad">
+    <view class="o-row o-row--top">
+      <view wx:if="{{layout === 'wide'}}" class="o-grow">
+        <view wx:if="{{overline}}" class="o-txt-body">{{overline}}</view>
+        <view class="o-txt-title o-txt-title--1">{{title}}</view>
+      </view>
+      <block wx:else>
+        <o-icon name="{{icon}}" o-class="o-offer-card__icon" />
+        <view class="o-grow" />
+      </block>
+      <view wx:if="{{isNew}}" class="o-pill o-pill--lilac">{{newLabel}}</view>
+    </view>
+    <view wx:if="{{layout !== 'wide'}}" class="o-txt-title o-txt-title--1 o-offer-card__title">{{title}}</view>
+    <view wx:if="{{values.length}}" class="o-offer-card__values">
+      <view wx:for="{{values}}" wx:key="index" class="o-offer-card__value">
+        <text class="o-offer-card__number">{{item.value}}</text><text class="o-amount__currency">{{item.unit}}</text>
+      </view>
+    </view>
+    <view wx:if="{{supporting}}" class="o-txt-body">{{supporting}}</view>
+    <view wx:if="{{layout !== 'wide'}}" class="o-hr" />
+    <view class="o-row o-offer-card__price">
+      <view class="o-grow">
+        <text class="o-amount">{{amount}}</text><text class="o-amount__currency">{{currency}}</text>
+        <text wx:if="{{oldAmount && layout === 'wide'}}" class="o-amount--old">{{oldAmount}} {{currency}}</text>
+        <view wx:if="{{oldAmount && layout !== 'wide'}}" class="o-amount--old o-offer-card__old">{{oldAmount}} {{currency}}</view>
+      </view>
+      <view wx:if="{{tag}}" class="o-pill o-pill--yellow">{{tag}}</view>
+      <view wx:elif="{{text}}" class="o-txt-body">{{text}}</view>
+    </view>
+    <view wx:if="{{note}}" class="o-txt-body">{{note}}</view>
+  </view>
+</view>

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

@@ -0,0 +1,37 @@
+@import '../common/style/index.wxss';
+@import '../common/style/card.wxss';
+
+/* Offer card (Figma "Card_Consumption / Vote" = Card_S_Information, "Card_L_Information", "Card information with top thumbnail"). */
+.o-offer-card--tile {
+    width: var(--o-offer-card-tile-width, 312rpx);
+}
+
+.o-offer-card__icon {
+    font-size: 64rpx;
+}
+
+.o-offer-card__title {
+    margin-top: 24rpx;
+}
+
+.o-offer-card__values {
+    display: flex;
+    gap: 48rpx;
+    margin-top: 8rpx;
+}
+
+.o-offer-card__number {
+    font: var(--o-type-headline-small-custom1, 700 48rpx / 64rpx var(--o-font-family, Roboto, Arial));
+}
+
+.o-offer-card--tile .o-offer-card__price {
+    align-items: flex-start;
+}
+
+.o-offer-card__price {
+    margin-top: 8rpx;
+}
+
+.o-offer-card__old {
+    margin-left: 0;
+}

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

@@ -0,0 +1,21 @@
+// o-offer-card: Offer card (Figma "Card_Consumption / Vote" = Card_S_Information, "Card_L_Information", "Card information with top thumbnail").
+const props = {
+  // tile (S information), wide (L information), thumbnail (information with top thumbnail)
+  layout: { type: String, value: 'tile' },
+  isNew: { type: Boolean, value: false },
+  newLabel: { type: String, value: 'Nouveau !' },
+  icon: { type: String, value: 'image' },
+  overline: { type: String, value: '' },
+  title: { type: String, value: '' },
+  // [{ value, unit }] e.g. 1 Go, 30 min, 100 SMS
+  values: { type: Array, value: [] },
+  supporting: { type: String, value: '' },
+  amount: { type: String, value: '' },
+  oldAmount: { type: String, value: '' },
+  currency: { type: String, value: 'FCFA' },
+  tag: { type: String, value: '' },
+  // Text on the right of the price
+  text: { type: String, value: '' },
+  note: { type: String, value: '' },
+};
+export default props;

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

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

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

@@ -0,0 +1,40 @@
+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}-om-card`;
+
+// Derived data, recomputed when a property changes and once when attached
+// (the runtime may skip observers for initial property values).
+const observers = {
+  hidden(value) { this.setData({ _hidden: value }); },
+};
+
+let OmCard = class OmCard extends SuperComponent {
+  constructor() {
+    super(...arguments);
+    this.externalClasses = [`${prefix}-class`];
+    this.options = { multipleSlots: true };
+    this.properties = props;
+    this.data = { prefix, classPrefix: name, _hidden: true };
+    this.observers = observers;
+    this.lifetimes = {
+      attached() {
+        Object.keys(observers).forEach((key) => observers[key].call(this, this.properties[key]));
+      },
+    };
+    this.methods = {
+      onEye() {
+        const hidden = !this.data._hidden;
+        this.setData({ _hidden: hidden });
+        this.triggerEvent('visible-change', { hidden });
+      },
+      onExpand() { this.triggerEvent('expand'); },
+      onTransaction() { this.triggerEvent('transaction'); },
+    };
+  }
+};
+OmCard = __decorate([wxComponent()], OmCard);
+export default OmCard;

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

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

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

@@ -0,0 +1,35 @@
+<view class="o-surface o-surface--dark o-om-card o-om-card--{{size}} class {{prefix}}-class" style="{{style}} {{customStyle}}">
+  <block wx:if="{{size === 's'}}">
+    <view class="o-om-card__tile">
+      <view class="o-row">
+        <view class="o-grow o-txt-small">{{title}}</view>
+        <image wx:if="{{logo}}" class="o-om-card__logo" src="{{logo}}" mode="aspectFit" />
+      </view>
+      <view class="o-row o-om-card__balance">
+        <text class="o-om-card__amount">{{_hidden ? '******' : amount}}</text>
+        <text class="o-amount__currency">{{currency}}</text>
+        <view class="o-grow" />
+        <o-icon name="{{_hidden ? 'browse-off' : 'browse'}}" o-class="o-om-card__eye o-om-card__eye--orange" bind:click="onEye" />
+      </view>
+    </view>
+  </block>
+  <block wx:else>
+    <view class="o-om-card__arcs"><view class="o-om-card__arc o-om-card__arc--1" /><view class="o-om-card__arc o-om-card__arc--2" /><view class="o-om-card__arc o-om-card__arc--3" /><view class="o-om-card__arc o-om-card__arc--4" /></view>
+    <view class="o-om-card__body">
+      <view class="o-row">
+        <view class="o-grow o-om-card__title">{{title}}</view>
+        <view wx:if="{{expandable}}" class="o-om-card__expand" bind:tap="onExpand"><o-icon name="chevron-down" /></view>
+      </view>
+      <view class="o-row o-om-card__balance">
+        <o-icon name="{{_hidden ? 'browse-off' : 'browse'}}" o-class="o-om-card__eye" bind:click="onEye" />
+        <text class="o-om-card__amount">{{_hidden ? '******' : amount}}</text>
+        <text class="o-amount__currency">{{currency}}</text>
+      </view>
+    </view>
+    <view wx:if="{{transaction}}" class="o-footer-bar o-om-card__footer" bind:tap="onTransaction">
+      <o-icon name="swap" o-class="o-om-card__swap" />
+      <text class="o-grow">{{transaction}}</text>
+      <o-icon name="chevron-right" />
+    </view>
+  </block>
+</view>

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

@@ -0,0 +1,90 @@
+@import '../common/style/index.wxss';
+@import '../common/style/card.wxss';
+
+/* Orange Money balance (Figma "Card_OM_Balance" M and "Card_S_Balance"): masked amount, colored arcs, transaction row. */
+.o-om-card {
+    position: relative;
+}
+
+.o-om-card__body {
+    position: relative;
+    padding: 24rpx 32rpx;
+}
+
+.o-om-card__title {
+    font: var(--o-type-title-small, 500 28rpx / 40rpx var(--o-font-family, Roboto, Arial));
+}
+
+.o-om-card__expand {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 40rpx;
+    height: 40rpx;
+    border-radius: 50%;
+    background-color: #fff;
+    color: #000;
+    font-size: 32rpx;
+}
+
+.o-om-card__balance {
+    margin-top: 12rpx;
+}
+
+.o-om-card__amount {
+    font: var(--o-type-title-medium, 500 32rpx / 48rpx var(--o-font-family, Roboto, Arial));
+}
+
+.o-om-card__eye {
+    margin-right: 12rpx;
+    font-size: 36rpx;
+}
+
+.o-om-card__eye--orange {
+    margin: 0;
+    color: var(--o-scheme-inverse-primary, #ff7900);
+}
+
+/* Orange Money arcs: 4 concentric rings in the bottom right corner */
+.o-om-card__arcs {
+    position: absolute;
+    right: -60rpx;
+    top: 56rpx;
+    width: 200rpx;
+    height: 200rpx;
+}
+
+.o-om-card__arc {
+    position: absolute;
+    border-radius: 50%;
+    border: 8rpx solid;
+}
+
+.o-om-card__arc--1 { top: 0; left: 0; right: 0; bottom: 0; border-color: var(--o-static-azure, #4bb4e6); }
+.o-om-card__arc--2 { top: 16rpx; left: 16rpx; right: 16rpx; bottom: 16rpx; border-color: var(--o-static-lilac, #a885d8); }
+.o-om-card__arc--3 { top: 32rpx; left: 32rpx; right: 32rpx; bottom: 32rpx; border-color: var(--o-static-jade, #50be87); }
+.o-om-card__arc--4 { top: 48rpx; left: 48rpx; right: 48rpx; bottom: 48rpx; border-color: var(--o-scheme-primary, #f16e00); }
+
+.o-om-card__footer {
+    position: relative;
+    padding: 16rpx 32rpx;
+}
+
+.o-om-card__swap {
+    margin-right: 16rpx;
+    font-size: 40rpx;
+    color: var(--o-scheme-primary, #f16e00);
+}
+
+.o-om-card--s {
+    width: 312rpx;
+}
+
+.o-om-card__tile {
+    padding: 24rpx;
+}
+
+.o-om-card__logo {
+    width: 40rpx;
+    height: 40rpx;
+}

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

@@ -0,0 +1,14 @@
+// o-om-card: Orange Money balance (Figma "Card_OM_Balance" M and "Card_S_Balance"): masked amount, colored arcs, transaction row.
+const props = {
+  // m: wide card with arcs and transaction row, s: small tile
+  size: { type: String, value: 'm' },
+  title: { type: String, value: '' },
+  amount: { type: String, value: '' },
+  currency: { type: String, value: 'FCFA' },
+  hidden: { type: Boolean, value: true },
+  transaction: { type: String, value: '' },
+  // Chevron button next to the title (m)
+  expandable: { type: Boolean, value: true },
+  logo: { type: String, value: '' },
+};
+export default props;

package/registry/components/overlay/index.js

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

package/registry/components/overlay/overlay.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 transition from"../common/mixins/transition";import useCustomNavbar from"../common/mixins/using-custom-navbar";const{prefix:prefix}=config,name=`${prefix}-overlay`;let Overlay=class extends SuperComponent{constructor(){super(...arguments),this.properties=props,this.behaviors=[transition(),useCustomNavbar],this.data={prefix:prefix,classPrefix:name,computedStyle:"",_zIndex:11e3},this.observers={backgroundColor(o){this.setData({computedStyle:o?`background-color: ${o};`:""})},zIndex(o){0!==o&&this.setData({_zIndex:o})}},this.methods={handleClick(){this.triggerEvent("click",{visible:!this.properties.visible})},noop(){}}}};Overlay=__decorate([wxComponent()],Overlay);export default Overlay;

package/registry/components/overlay/overlay.json

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

package/registry/components/overlay/overlay.wxml

@@ -0,0 +1 @@
+<wxs src="../common/utils.wxs" module="_"/><view wx:if="{{realVisible && preventScrollThrough}}" class="{{prefix}}-overlay {{transitionClass}} class" style="{{_._style(['--o-overlay-transition-duration:' + duration + 'ms', 'z-index:' + _zIndex, 'top:' + distanceTop + 'px', computedStyle, style, customStyle])}}" bind:tap="handleClick" catchtouchmove="noop" bind:transitionend="onTransitionEnd" aria-role="{{ ariaRole || 'button' }}" aria-label="{{ ariaLabel || 'Fermer' }}"><slot/></view><view wx:elif="{{realVisible}}" class="{{prefix}}-overlay {{transitionClass}} class" style="{{_._style(['z-index:' + _zIndex, 'top:' + distanceTop + 'px', computedStyle, style, customStyle])}}" bind:tap="handleClick" bind:transitionend="onTransitionEnd" aria-role="{{ ariaRole || 'button' }}" aria-label="{{ ariaLabel || 'Fermer' }}"><slot/></view>

package/registry/components/overlay/overlay.wxss

@@ -0,0 +1,22 @@
+@import '../common/style/index.wxss';
+
+.o-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    bottom: 0;
+    background-color: var(--o-overlay-bg-color,var(--o-mask-active,rgba(0,0,0,.6)));
+    transition-property: opacity;
+    transition-duration: var(--o-overlay-transition-duration,300ms);
+    transition-timing-function: ease;
+}
+
+.o-fade-enter {
+    opacity: 0;
+}
+
+.o-fade-leave-to {
+    opacity: 0;
+}
+

package/registry/components/overlay/props.js

@@ -0,0 +1 @@
+const props={backgroundColor:{type:String,value:""},duration:{type:Number,value:300},preventScrollThrough:{type:Boolean,value:!0},zIndex:{type:Number,value:11e3}};export default props;

package/registry/components/paragraph/index.js

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

package/registry/components/paragraph/paragraph.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 usingConfig from"../common/mixins/using-config";const{prefix:prefix}=config,componentName="typography";let Paragraph=class extends SuperComponent{constructor(){super(...arguments),this.behaviors=[usingConfig({componentName:"typography"})],this.externalClasses=[`${prefix}-class`],this.options={multipleSlots:!0},this.properties=props,this.data={prefix:prefix,classPrefix:`${prefix}-typography`,isExpanded:!1},this.methods={onExpand(){this.setData({isExpanded:!0});const{ellipsis:e}=this.properties;"object"==typeof e&&this.triggerEvent("expand",{expanded:!0})},onCollapse(){this.setData({isExpanded:!1});const{ellipsis:e}=this.properties;"object"==typeof e&&this.triggerEvent("expand",{expanded:!1})}}}};Paragraph=__decorate([wxComponent()],Paragraph);export default Paragraph;

package/registry/components/paragraph/paragraph.json

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

package/registry/components/paragraph/paragraph.wxml

@@ -0,0 +1 @@
+<wxs src="../common/utils.wxs" module="_"/><wxs src="../common/typography/typography.wxs" module="_this"/><import src="../common/typography/ellipsis.wxml"/><view class="{{classPrefix}} {{prefix}}-class {{_this.wrapperClass(classPrefix, ellipsis)}}" style="{{_._style([style, customStyle])}}"><view wx:if="{{ellipsis}}" class="{{classPrefix}}__ellipsis-content" style="{{_this.ellipsisStyle(ellipsis, isExpanded)}}"><text wx:if="{{content}}">{{content}}</text><slot wx:else/></view><block wx:else><text wx:if="{{content}}">{{content}}</text><slot wx:else/></block><block wx:if="{{ellipsis && !isExpanded && ellipsis.expandable && ellipsis.suffix}}"><view class="{{classPrefix}}-ellipsis-symbol" style="text-decoration: none; white-space: nowrap; flex: 1" bind:tap="onExpand"><slot name="suffix"/></view></block><block wx:else><template is="ellipsis-toggle" data="{{ellipsis, isExpanded, classPrefix, globalConfig}}"/></block></view>

package/registry/components/paragraph/paragraph.wxss

@@ -0,0 +1,151 @@
+@import '../common/style/index.wxss';
+
+.o-typography {
+    color: var(--o-text-color-primary,var(--o-font-gray-1,#1c1b1f));
+    font: var(--o-font-body-medium,28rpx / 44rpx var(--o-font-family,Roboto,PingFang SC,Microsoft YaHei,Arial));
+    margin: var(--o-spacer-2,32rpx) 0;
+}
+
+.o-typography--h1 {
+    font: var(--o-font-headline-large,600 72rpx / 88rpx var(--o-font-family,Roboto,PingFang SC,Microsoft YaHei,Arial));
+    margin-top: var(--o-spacer-4,64rpx);
+    margin-bottom: var(--o-spacer-3,48rpx);
+}
+
+.o-typography--h2 {
+    font: var(--o-font-headline-medium,600 56rpx / 72rpx var(--o-font-family,Roboto,PingFang SC,Microsoft YaHei,Arial));
+    margin-top: var(--o-spacer-4,64rpx);
+    margin-bottom: var(--o-spacer-3,48rpx);
+}
+
+.o-typography--h3 {
+    font: var(--o-font-headline-small,600 48rpx / 64rpx var(--o-font-family,Roboto,PingFang SC,Microsoft YaHei,Arial));
+    margin-top: var(--o-spacer-4,64rpx);
+    margin-bottom: var(--o-spacer-2,32rpx);
+}
+
+.o-typography--h4 {
+    font: var(--o-font-title-large,600 36rpx / 52rpx var(--o-font-family,Roboto,PingFang SC,Microsoft YaHei,Arial));
+    margin-top: var(--o-spacer-3,48rpx);
+    margin-bottom: var(--o-spacer-2,32rpx);
+}
+
+.o-typography--h5 {
+    font: var(--o-font-title-medium,600 32rpx / 48rpx var(--o-font-family,Roboto,PingFang SC,Microsoft YaHei,Arial));
+    margin-top: var(--o-spacer-3,48rpx);
+    margin-bottom: var(--o-spacer-2,32rpx);
+}
+
+.o-typography--h6 {
+    font: var(--o-font-title-small,600 28rpx / 44rpx var(--o-font-family,Roboto,PingFang SC,Microsoft YaHei,Arial));
+}
+
+.o-typography strong,
+.o-typography--strong {
+    font-weight: 600;
+}
+
+.o-typography mark,
+.o-typography--mark {
+    background-color: #fcdf47;
+}
+
+.o-typography code,
+.o-typography--code {
+    border-radius: var(--o-radius-default,12rpx);
+    border: 1px solid var(--o-component-border,var(--o-gray-color-4,#dddddd));
+    margin: 0 var(--o-spacer,16rpx);
+    background-color: var(--o-bg-color-secondarycontainer,var(--o-gray-color-1,#eeeeee));
+    padding: 0 var(--o-spacer,16rpx);
+    transition: background-color .2s;
+    white-space: nowrap;
+    font: var(--o-font-body-small,24rpx / 40rpx var(--o-font-family,Roboto,PingFang SC,Microsoft YaHei,Arial));
+    font-family: Source Code Pro,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Hiragino Sans GB,Microsoft YaHei UI,Microsoft YaHei;
+    display: inline-block;
+}
+
+.o-typography kbd,
+.o-typography--keyboard {
+    border-radius: var(--o-radius-default,12rpx);
+    border: 1px solid var(--o-component-border,var(--o-gray-color-4,#dddddd));
+    margin: 0 calc(var(--o-spacer,16rpx)/ 2);
+    background-color: var(--o-bg-color-secondarycontainer,var(--o-gray-color-1,#eeeeee));
+    padding: 0 var(--o-spacer,16rpx);
+    box-shadow: 0 1px 0 0 var(--o-component-border,var(--o-gray-color-4,#dddddd));
+    font: var(--o-font-body-small,24rpx / 40rpx var(--o-font-family,Roboto,PingFang SC,Microsoft YaHei,Arial));
+    font-family: Source Code Pro,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Hiragino Sans GB,Microsoft YaHei UI,Microsoft YaHei;
+    display: inline-block;
+}
+
+.o-typography--disabled {
+    color: var(--o-text-color-disabled,var(--o-font-gray-4,rgba(0,0,0,.26)));
+    cursor: not-allowed;
+}
+
+.o-typography--success {
+    color: var(--o-success-color,var(--o-success-color-5,#028702));
+}
+
+.o-typography--warning {
+    color: var(--o-warning-color,var(--o-warning-color-5,#e37318));
+}
+
+.o-typography--error {
+    color: var(--o-error-color,var(--o-error-color-6,#cd3c14));
+}
+
+.o-typography--secondary {
+    color: var(--o-text-color-secondary,var(--o-font-gray-2,#444748));
+}
+
+.o-typography .o-icon-copy,
+.o-typography-ellipsis-symbol {
+    color: var(--o-brand-color,var(--o-primary-color-7,#f16e00));
+    cursor: pointer;
+}
+
+.o-typography .o-icon-checked {
+    color: var(--o-success-color,var(--o-success-color-5,#028702));
+}
+
+.o-typography i,
+.o-typography--italic {
+    font-style: italic;
+}
+
+.o-typography u,
+.o-typography--underline {
+    text-decoration: underline;
+}
+
+.o-typography del,
+.o-typography--delete {
+    text-decoration: line-through;
+}
+
+.o-typography__ellipsis-wrapper {
+    display: flex;
+    align-items: flex-end;
+}
+
+.o-typography__ellipsis-content {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: normal;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+}
+
+.o-typography-ellipsis-symbol {
+    text-decoration: none;
+    white-space: nowrap;
+    flex: 1;
+}
+
+.o-typography__copy {
+    display: inline-flex;
+    align-items: center;
+    margin-left: var(--o-spacer,16rpx);
+    flex-shrink: 0;
+}
+

package/registry/components/paragraph/props.js

@@ -0,0 +1 @@
+const props={content:{type:String},ellipsis:{type:null,value:!1}};export default props;

package/registry/components/picker/index.js

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

package/registry/components/picker/picker.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 useCustomNavbar from"../common/mixins/using-custom-navbar";import usingConfig from"../common/mixins/using-config";const{prefix:prefix}=config,componentName="picker",DEFAULT_KEYS={value:"value",label:"label",icon:"icon"};let Picker=class extends SuperComponent{constructor(){super(...arguments),this.behaviors=[useCustomNavbar,usingConfig({componentName:"picker"})],this.properties=props,this.externalClasses=[`${prefix}-class`,`${prefix}-class-confirm`,`${prefix}-class-cancel`,`${prefix}-class-title`],this.options={multipleSlots:!0},this.relations={"../picker-item/picker-item":{type:"descendant",linked(){this.updateChildren()}}},this.observers={"value, visible"(e,i){const{usePopup:t}=this.properties;t&&!i||(this.updateChildren(),this.updateIndicatorPosition())},"itemHeight, visibleItemCount"(){this.updateIndicatorPosition()}},this.data={prefix:prefix,classPrefix:`${prefix}-picker`,defaultPopUpProps:{},defaultPopUpzIndex:11500,indicatorTop:72},this.methods={updateChildren(){const{value:e,defaultValue:i,itemHeight:t,visibleItemCount:s,keys:n}=this.properties;this.$children.forEach((o,r)=>{var l,a;o.setData({value:null!==(a=null!==(l=null==e?void 0:e[r])&&void 0!==l?l:null==i?void 0:i[r])&&void 0!==a?a:"",columnIndex:r,itemHeight:t,visibleItemCount:s,keys:Object.assign(Object.assign({},DEFAULT_KEYS),n||{})}),o.update()})},getSelectedValue(){return[this.$children.map(e=>e._selectedValue),this.$children.map(e=>e._selectedLabel)]},getColumnIndexes(){return this.$children.map((e,i)=>({column:i,index:e._selectedIndex}))},onConfirm(){const e=[],i=[],t=[];this.$children.forEach((s,n)=>{const o=s.getCurrentSelected();e.push(o.value),i.push(o.label),t.push({column:n,index:o.index})}),this.close("confirm-btn"),this.triggerEvent("confirm",{value:e,label:i,columns:t}),JSON.stringify(this.data.value)!==JSON.stringify(e)&&this.triggerEvent("change",{value:e,label:i,columns:t})},triggerColumnChange({column:e,index:i}){const[t,s]=this.getSelectedValue();this.triggerEvent("pick",{value:t,label:s,column:e,index:i})},onCancel(){this.close("cancel-btn"),this.triggerEvent("cancel")},onPopupChange(e){const{visible:i}=e.detail;this.close("overlay"),this.triggerEvent("visible-change",{visible:i})},close(e){this.data.autoClose&&this.setData({visible:!1}),this.triggerEvent("close",{trigger:e})},updateIndicatorPosition(){const{itemHeight:e,visibleItemCount:i}=this.properties,t=(i-1)/2*e;this.setData({indicatorTop:t})}}}ready(){this.$children.map((e,i)=>e.columnIndex=i),this.updateIndicatorPosition()}};Picker=__decorate([wxComponent()],Picker);export default Picker;

package/registry/components/picker/picker.json

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

package/registry/components/picker/picker.wxml

@@ -0,0 +1 @@
+<wxs src="../common/utils.wxs" module="_"/><wxs src="./picker.wxs" module="_this"/><o-popup wx:if="{{usePopup}}" class="class" close-on-overlay-click="{{autoClose}}" visible="{{visible}}" placement="bottom" show-overlay="{{_this.isShowOverlay(popupProps.showOverlay, true)}}" using-custom-navbar="{{usingCustomNavbar || popupProps.usingCustomNavbar}}" z-index="{{ popupProps.zIndex || defaultPopUpzIndex }}" overlay-props="{{ popupProps.overlayProps || defaultPopUpProps }}" bind:visible-change="onPopupChange"><include src="./template.wxml"/></o-popup><block wx:else><include src="./template.wxml"/></block>

package/registry/components/picker/picker.wxs

@@ -0,0 +1,9 @@
+var utils = require('../common/utils.wxs');
+
+function isShowOverlay(value, defaultValue) {
+  return utils.isBoolean(value) ? value : defaultValue;
+}
+
+module.exports = {
+  isShowOverlay: isShowOverlay,
+};

package/registry/components/picker/picker.wxss

@@ -0,0 +1,84 @@
+@import '../common/style/index.wxss';
+
+.o-picker {
+    position: relative;
+    background-color: var(--o-picker-bg-color,var(--o-bg-color-container,var(--o-font-white-1,#fff)));
+    border-top-left-radius: var(--o-picker-border-radius,var(--o-radius-extraLarge,24rpx));
+    border-top-right-radius: var(--o-picker-border-radius,var(--o-radius-extraLarge,24rpx));
+}
+
+.o-picker__toolbar {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    overflow: hidden;
+    height: var(--o-picker-toolbar-height,116rpx);
+}
+
+.o-picker__title {
+    flex: 1;
+    text-align: center;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    color: var(--o-picker-title-color,var(--o-text-color-primary,var(--o-font-gray-1,#1c1b1f)));
+    font: var(--o-picker-title-font,var(--o-font-title-large,600 36rpx / 52rpx var(--o-font-family,Roboto,PingFang SC,Microsoft YaHei,Arial)));
+}
+
+.o-picker__cancel,
+.o-picker__confirm {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    user-select: none;
+    font: var(--o-picker-button-font,var(--o-font-body-large,32rpx / 48rpx var(--o-font-family,Roboto,PingFang SC,Microsoft YaHei,Arial)));
+    height: 100%;
+    padding: 0 var(--o-spacer-2,32rpx);
+}
+
+.o-picker__cancel {
+    color: var(--o-picker-cancel-color,var(--o-text-color-secondary,var(--o-font-gray-2,#444748)));
+}
+
+.o-picker__confirm {
+    color: var(--o-picker-confirm-color,var(--o-brand-color,var(--o-primary-color-7,#f16e00)));
+}
+
+.o-picker__main {
+    position: relative;
+    display: flex;
+    justify-content: center;
+    padding-left: var(--o-spacer-4,64rpx);
+    padding-right: var(--o-spacer-4,64rpx);
+}
+
+.o-picker__mask {
+    position: absolute;
+    left: 0;
+    right: 0;
+    z-index: 3;
+    backface-visibility: hidden;
+    pointer-events: none;
+    height: 96rpx;
+}
+
+.o-picker__mask--top {
+    top: 0;
+    background: linear-gradient(180deg,var(--o-picker-bg-color,var(--o-bg-color-container,var(--o-font-white-1,#fff))) 0,var(--o-picker-transparent-color) 100%);
+}
+
+.o-picker__mask--bottom {
+    bottom: 0;
+    background: linear-gradient(180deg,var(--o-picker-bg-color,var(--o-bg-color-container,var(--o-font-white-1,#fff))) 0,var(--o-picker-transparent-color) 100%);
+    transform: matrix(1,0,0,-1,0,0);
+}
+
+.o-picker__indicator {
+    position: absolute;
+    left: 32rpx;
+    right: 32rpx;
+    pointer-events: none;
+    background-color: var(--o-picker-indicator-bg-color,var(--o-bg-color-secondarycontainer,var(--o-gray-color-1,#eeeeee)));
+    border-radius: var(--o-picker-indicator-border-radius,var(--o-radius-default,12rpx));
+}
+

package/registry/components/picker/props.js

@@ -0,0 +1 @@
+const props={autoClose:{type:Boolean,value:!0},cancelBtn:{type:null,value:!0},confirmBtn:{type:null,value:!0},header:{type:Boolean,value:!0},itemHeight:{type:Number,value:40},keys:{type:Object},popupProps:{type:Object,value:{}},title:{type:String,value:""},usePopup:{type:Boolean,value:!0},usingCustomNavbar:{type:Boolean,value:!1},value:{type:Array,value:null},defaultValue:{type:Array},visible:{type:Boolean,value:!1},visibleItemCount:{type:Number,value:5}};export default props;

package/registry/components/picker/template.wxml

@@ -0,0 +1 @@
+<wxs src="../common/utils.wxs" module="_"/><view slot="content" style="{{_._style([style, customStyle])}}" class="{{classPrefix}} {{prefix}}-class"><view class="{{classPrefix}}__toolbar" wx:if="{{header}}"><view class="{{classPrefix}}__cancel {{prefix}}-class-cancel" wx:if="{{cancelBtn}}" bindtap="onCancel">{{cancelBtn === true ? globalConfig.cancel : cancelBtn}}</view><view class="{{classPrefix}}__title {{prefix}}-class-title">{{title}}</view><view class="{{classPrefix}}__confirm {{prefix}}-class-confirm" wx:if="{{confirmBtn}}" bindtap="onConfirm">{{confirmBtn === true ? globalConfig.confirm : confirmBtn}}</view></view><slot name="header"/><slot name="content"/><view class="{{_.cls(classPrefix + '__main', [])}}"><slot/><view class="{{classPrefix}}__mask {{classPrefix}}__mask--top"/><view class="{{classPrefix}}__mask {{classPrefix}}__mask--bottom"/><view class="{{classPrefix}}__indicator" style="height: {{itemHeight}}px; top: {{indicatorTop}}px"></view></view><slot name="footer"/></view>

package/registry/components/picker-item/index.js

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