maxit-cli 0.1.0

package/registry/components/toast/toast.wxml

@@ -0,0 +1 @@
+<import src="../common/template/icon.wxml"/><wxs src="../common/utils.wxs" module="_"/><view wx:if="{{realVisible}}" class="{{_.cls(classPrefix, [direction, theme, ['with-text', message]])}} class {{prefix}}-class {{transitionClass}}" style="{{_._style([ 'top:' + (placement === 'top' ? '25%' : placement === 'bottom' ? '75%': '45%'), style, customStyle])}}" bind:transitionend="onTransitionEnd" catch:touchstart="loop"><view class="{{classPrefix}}__content {{classPrefix}}__content--{{direction}}"><o-loading wx:if="{{isLoading}}" theme="circular" size="{{direction === 'row' ? '48rpx' : '64rpx'}}" loading inherit-color layout="vertical"/><template wx:elif="{{_icon}}" is="icon" data="{{ ariaHidden: true, oClass: classPrefix + '__icon ' + classPrefix + '__icon--' + direction, ..._icon }}"/><slot name="icon"/><view aria-role="alert" class="{{classPrefix}}__text {{classPrefix}}__text--{{direction}}">{{message}}</view><slot name="message"/></view></view><o-overlay style="{{ overlayProps && overlayProps.style || ''}}" visible="{{visible && (showOverlay || preventScrollThrough)}}" z-index="{{overlayProps && overlayProps.zIndex || 11000}}" duration="{{overlayProps && overlayProps.duration || 300}}" usingCustomNavbar="{{overlayProps && overlayProps.usingCustomNavbar || usingCustomNavbar}}" backgroundColor="{{!showOverlay && preventScrollThrough ? 'transparent' : overlayProps && overlayProps.backgroundColor || ''}}" preventScrollThrough="{{preventScrollThrough || overlayProps && overlayProps.preventScrollThrough}}"/>

package/registry/components/toast/toast.wxss

@@ -0,0 +1,87 @@
+@import '../common/style/index.wxss';
+
+.o-toast {
+    position: fixed;
+    left: 50%;
+    transform: translate(-50%,-50%);
+    z-index: 12001;
+    opacity: 1;
+    transition: opacity .3s ease;
+    background-color: var(--o-toast-bg-color,var(--o-mask-active,rgba(0,0,0,.6)));
+    border-radius: var(--o-toast-radius,var(--o-radius-default,12rpx));
+    color: var(--o-toast-color,var(--o-text-color-anti,var(--o-font-white-1,#fff)));
+    max-width: var(--o-toast-max-width,370rpx);
+    min-height: 0;
+    width: auto;
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    box-sizing: border-box;
+}
+
+.o-toast--column {
+    padding: var(--o-spacer-3,48rpx);
+    min-width: 160rpx;
+    min-height: 160rpx;
+    border-radius: 16rpx;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.o-toast--loading.o-toast--with-text {
+    min-width: 204rpx;
+    min-height: 204rpx;
+    padding-top: 0;
+    padding-bottom: 0;
+}
+
+.o-toast__content {
+    align-items: center;
+    font: var(--o-font-body-medium,28rpx / 44rpx var(--o-font-family,Roboto,PingFang SC,Microsoft YaHei,Arial));
+}
+
+.o-toast__content--row {
+    display: flex;
+    text-align: left;
+    padding: 28rpx 44rpx;
+}
+
+.o-toast__content--column {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+}
+
+.o-toast__icon--row {
+    display: flex;
+    font-size: var(--o-toast-row-icon-size,48rpx);
+}
+
+.o-toast__icon--column {
+    font-size: var(--o-toast-column-icon-size,64rpx);
+}
+
+.o-toast__text {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    -webkit-line-clamp: 3;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    white-space: pre-line;
+}
+
+.o-toast__text--column:not(:empty):not(:only-child) {
+    margin-top: var(--o-spacer,16rpx);
+}
+
+.o-toast__text--row:not(:empty):not(:only-child) {
+    margin-left: var(--o-spacer,16rpx);
+}
+
+.o-toast.o-fade-enter,
+.o-toast.o-fade-leave-to {
+    opacity: 0;
+}
+

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

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

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

@@ -0,0 +1,7 @@
+// o-toggle-card: Toggle card (Figma "Favorite teams notification"): title, description, switch; extra content shown when on.
+const props = {
+  title: { type: String, value: '' },
+  description: { type: String, value: '' },
+  value: { type: Boolean, value: false },
+};
+export default props;

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

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

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

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

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

@@ -0,0 +1,12 @@
+<view class="o-surface o-surface--outlined o-toggle-card class {{prefix}}-class" style="{{style}} {{customStyle}}">
+  <view class="o-pad">
+    <view class="o-row o-row--top">
+      <view class="o-grow">
+        <view class="o-toggle-card__title">{{title}}</view>
+        <view wx:if="{{description}}" class="o-txt-body">{{description}}</view>
+      </view>
+      <o-switch value="{{_value}}" bind:change="onChange" />
+    </view>
+    <view wx:if="{{_value}}" class="o-toggle-card__content"><slot /></view>
+  </view>
+</view>

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

@@ -0,0 +1,11 @@
+@import '../common/style/index.wxss';
+@import '../common/style/card.wxss';
+
+/* Toggle card (Figma "Favorite teams notification"): title, description, switch; extra content shown when on. */
+.o-toggle-card__title {
+    font: var(--o-type-title-small, 500 28rpx / 40rpx var(--o-font-family, Roboto, Arial));
+}
+
+.o-toggle-card__content {
+    margin-top: 24rpx;
+}

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

@@ -0,0 +1,2 @@
+export * from './props';
+export * from './top-item';

package/registry/components/top-item/props.js

@@ -0,0 +1,10 @@
+// o-top-item: Top item (Figma "Top 3 cards"): square or circle picture with an orange ring, title and subtitle.
+const props = {
+  image: { type: String, value: '' },
+  icon: { type: String, value: 'image' },
+  title: { type: String, value: '' },
+  subtitle: { type: String, value: '' },
+  // square | circle
+  shape: { type: String, value: 'square' },
+};
+export default props;

package/registry/components/top-item/top-item.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}-top-item`;
+
+let TopItem = class TopItem 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'); },
+    };
+  }
+};
+TopItem = __decorate([wxComponent()], TopItem);
+export default TopItem;

package/registry/components/top-item/top-item.json

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

package/registry/components/top-item/top-item.wxml

@@ -0,0 +1,8 @@
+<view class="o-top-item class {{prefix}}-class" style="{{style}} {{customStyle}}" bind:tap="onTap">
+  <view class="o-top-item__media o-top-item__media--{{shape}}">
+    <image wx:if="{{image}}" class="o-thumb__image" src="{{image}}" mode="aspectFill" />
+    <o-icon wx:else name="{{icon}}" />
+  </view>
+  <view class="o-top-item__title">{{title}}</view>
+  <view wx:if="{{subtitle}}" class="o-txt-small">{{subtitle}}</view>
+</view>

package/registry/components/top-item/top-item.wxss

@@ -0,0 +1,37 @@
+@import '../common/style/index.wxss';
+@import '../common/style/card.wxss';
+
+/* Top item (Figma "Top 3 cards"): square or circle picture with an orange ring, title and subtitle. */
+.o-top-item {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+    color: var(--o-scheme-on-surface, #1c1b1f);
+}
+
+.o-top-item__media {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-sizing: border-box;
+    width: 144rpx;
+    height: 144rpx;
+    overflow: hidden;
+    border: 4rpx solid var(--o-scheme-primary, #f16e00);
+    background-color: var(--o-scheme-surface-variant, #eee);
+    font-size: 64rpx;
+}
+
+.o-top-item__media--square {
+    border-radius: 24rpx;
+}
+
+.o-top-item__media--circle {
+    border-radius: 50%;
+}
+
+.o-top-item__title {
+    margin-top: 12rpx;
+    font: var(--o-type-title-small, 500 28rpx / 40rpx var(--o-font-family, Roboto, Arial));
+}

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

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

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

@@ -0,0 +1,25 @@
+// o-transaction-card: Transaction card (Figma "Card_Details_L_Transaction" / "_S_Transaction"): header, price line, expandable details.
+const props = {
+  // l (full width) or s (tile)
+  size: { type: String, value: 'l' },
+  icon: { type: String, value: 'image' },
+  thumbnail: { type: String, value: '' },
+  overline: { type: String, value: '' },
+  title: { type: String, value: '' },
+  subtitle: { type: String, value: '' },
+  tag: { type: String, value: '' },
+  date: { type: String, value: '' },
+  amount: { type: String, value: '' },
+  currency: { type: String, value: 'FCFA' },
+  amountTag: { type: String, value: '' },
+  text: { type: String, value: '' },
+  link: { type: String, value: '' },
+  // Chevron to show the details and actions
+  collapsible: { type: Boolean, value: false },
+  expanded: { type: Boolean, value: false },
+  // [{ label, value }]
+  details: { type: Array, value: [] },
+  // [{ icon, label }]
+  actions: { type: Array, value: [] },
+};
+export default props;

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

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

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

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

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

@@ -0,0 +1,44 @@
+<view class="o-surface o-surface--outlined o-transaction-card o-transaction-card--{{size}} class {{prefix}}-class" style="{{style}} {{customStyle}}">
+  <view class="o-pad">
+    <view class="o-row o-row--top">
+      <view class="o-transaction-card__icon">
+        <image wx:if="{{thumbnail}}" class="o-thumb__image" src="{{thumbnail}}" mode="aspectFill" />
+        <o-icon wx:else name="{{icon}}" />
+      </view>
+      <view class="o-grow">
+        <view wx:if="{{overline}}" class="o-txt-overline">{{overline}}</view>
+        <view class="o-txt-title">{{title}}</view>
+        <view wx:if="{{subtitle}}" class="o-txt-small">{{subtitle}}</view>
+      </view>
+      <view wx:if="{{tag}}" class="o-pill o-pill--black">{{tag}}</view>
+      <view wx:elif="{{collapsible}}" class="o-transaction-card__chevron" bind:tap="onToggle">
+        <o-icon name="{{_expanded ? 'chevron-up' : 'chevron-down'}}" />
+      </view>
+    </view>
+    <block wx:if="{{amount || text || link || date}}">
+      <view class="o-hr" />
+      <view class="o-row o-transaction-card__bottom">
+        <view class="o-grow">
+          <view wx:if="{{date}}" class="o-txt-small">{{date}}</view>
+          <view wx:if="{{amount}}" class="o-row">
+            <text class="o-amount">{{amount}}</text><text class="o-amount__currency">{{currency}}</text>
+            <view wx:if="{{amountTag}}" class="o-pill o-pill--yellow o-transaction-card__tag">{{amountTag}}</view>
+          </view>
+        </view>
+        <view wx:if="{{link}}" class="o-link" bind:tap="onLink">{{link}}<o-icon name="add" /></view>
+        <view wx:elif="{{text}}" class="o-txt-body">{{text}}</view>
+      </view>
+    </block>
+    <view wx:if="{{_expanded}}" class="o-transaction-card__details">
+      <view wx:for="{{details}}" wx:key="index" class="o-kv">
+        <text class="o-kv__label">{{item.label}}</text><text class="o-kv__value">{{item.value}}</text>
+      </view>
+      <view wx:if="{{actions.length}}" class="o-transaction-card__actions">
+        <view wx:for="{{actions}}" wx:key="index" class="o-transaction-card__action" data-index="{{index}}" bind:tap="onAction">
+          <view class="o-thumb"><o-icon name="{{item.icon}}" /></view>
+          <text class="o-txt-small">{{item.label}}</text>
+        </view>
+      </view>
+    </view>
+  </view>
+</view>

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

@@ -0,0 +1,45 @@
+@import '../common/style/index.wxss';
+@import '../common/style/card.wxss';
+
+/* Transaction card (Figma "Card_Details_L_Transaction" / "_S_Transaction"): header, price line, expandable details. */
+.o-transaction-card__icon {
+    flex: none;
+    width: 64rpx;
+    height: 64rpx;
+    margin-right: 24rpx;
+    font-size: 64rpx;
+}
+
+.o-transaction-card__chevron {
+    font-size: 40rpx;
+}
+
+.o-transaction-card__tag {
+    margin-left: 16rpx;
+}
+
+.o-transaction-card--s {
+    width: var(--o-transaction-card-s-width, 312rpx);
+}
+
+.o-transaction-card--s .o-transaction-card__bottom {
+    flex-direction: column;
+    align-items: flex-start;
+}
+
+.o-transaction-card__details {
+    margin-top: 24rpx;
+}
+
+.o-transaction-card__actions {
+    display: flex;
+    justify-content: space-around;
+    margin-top: 24rpx;
+}
+
+.o-transaction-card__action {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 8rpx;
+}

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

@@ -0,0 +1,2 @@
+export * from './props';
+export * from './transfer-item';

package/registry/components/transfer-item/props.js

@@ -0,0 +1,18 @@
+// o-transfer-item: Transfer (Figma "Progress Transfer List" and "Receipt Accordion"): progress ring, status, expandable receipt.
+const props = {
+  avatar: { type: String, value: '' },
+  title: { type: String, value: '' },
+  subtitle: { type: String, value: '' },
+  amount: { type: String, value: '' },
+  currency: { type: String, value: 'FCFA' },
+  // progress (ring) | done | failed
+  status: { type: String, value: 'progress' },
+  progress: { type: Number, value: 0 },
+  tag: { type: String, value: '' },
+  link: { type: String, value: '' },
+  download: { type: Boolean, value: false },
+  // Receipt details: [{ title, rows: [{ label, value }] }]
+  sections: { type: Array, value: [] },
+  expanded: { type: Boolean, value: false },
+};
+export default props;

package/registry/components/transfer-item/transfer-item.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}-transfer-item`;
+
+// Derived data, recomputed when a property changes and once when attached
+// (the runtime may skip observers for initial property values).
+const observers = {
+  expanded(value) { this.setData({ _expanded: value }); },
+};
+
+let TransferItem = class TransferItem extends SuperComponent {
+  constructor() {
+    super(...arguments);
+    this.externalClasses = [`${prefix}-class`];
+    this.options = { multipleSlots: true };
+    this.properties = props;
+    this.data = { prefix, classPrefix: name, _expanded: false };
+    this.observers = observers;
+    this.lifetimes = {
+      attached() {
+        Object.keys(observers).forEach((key) => observers[key].call(this, this.properties[key]));
+      },
+    };
+    this.methods = {
+      onToggle() {
+        const expanded = !this.data._expanded;
+        this.setData({ _expanded: expanded });
+        this.triggerEvent('toggle', { expanded });
+      },
+      onLink() { this.triggerEvent('link'); },
+      onDownload() { this.triggerEvent('download'); },
+    };
+  }
+};
+TransferItem = __decorate([wxComponent()], TransferItem);
+export default TransferItem;

package/registry/components/transfer-item/transfer-item.json

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

package/registry/components/transfer-item/transfer-item.wxml

@@ -0,0 +1,34 @@
+<view class="o-surface o-surface--outlined o-transfer-item class {{prefix}}-class" style="{{style}} {{customStyle}}">
+  <view class="o-pad">
+    <view class="o-row o-row--top">
+      <view class="o-transfer-item__avatar {{status === 'done' ? 'o-transfer-item__avatar--done' : ''}}">{{avatar}}</view>
+      <view class="o-grow">
+        <view class="o-txt-title">{{title}}</view>
+        <view wx:if="{{subtitle}}" class="o-txt-small">{{subtitle}}</view>
+        <view wx:if="{{amount}}"><text class="o-transfer-item__amount">{{amount}}</text><text class="o-amount__currency">{{currency}}</text></view>
+      </view>
+      <view wx:if="{{status === 'progress'}}" class="o-transfer-item__ring" style="background:conic-gradient(var(--o-scheme-primary, #f16e00) {{progress * 3.6}}deg, var(--o-scheme-surface-variant, #eee) 0)" />
+      <view wx:elif="{{status === 'failed'}}" class="o-pill o-pill--red">{{tag || 'Échec'}}</view>
+      <view wx:elif="{{sections.length}}" class="o-transfer-item__chevron" bind:tap="onToggle">
+        <o-icon name="{{_expanded ? 'chevron-up' : 'chevron-down'}}" />
+      </view>
+    </view>
+    <view wx:if="{{_expanded}}" class="o-transfer-item__details">
+      <view wx:for="{{sections}}" wx:key="index" class="o-transfer-item__section">
+        <view wx:if="{{item.title}}" class="o-txt-small">{{item.title}}</view>
+        <view wx:for="{{item.rows}}" wx:for-item="row" wx:for-index="rowIndex" wx:key="rowIndex" class="o-kv">
+          <text class="o-kv__label">{{row.label}}</text><text class="o-kv__value">{{row.value}}</text>
+        </view>
+      </view>
+    </view>
+    <block wx:if="{{status === 'done' && (link || download || tag)}}">
+      <view class="o-hr" />
+      <view class="o-row">
+        <view wx:if="{{link}}" class="o-link" bind:tap="onLink">{{link}}</view>
+        <o-icon wx:if="{{download}}" name="download" o-class="o-transfer-item__download" bind:click="onDownload" />
+        <view class="o-grow" />
+        <view wx:if="{{tag}}" class="o-pill o-pill--green">{{tag}}</view>
+      </view>
+    </block>
+  </view>
+</view>

package/registry/components/transfer-item/transfer-item.wxss

@@ -0,0 +1,66 @@
+@import '../common/style/index.wxss';
+@import '../common/style/card.wxss';
+
+/* Transfer (Figma "Progress Transfer List" and "Receipt Accordion"): progress ring, status, expandable receipt. */
+.o-transfer-item__avatar {
+    display: flex;
+    flex: none;
+    align-items: center;
+    justify-content: center;
+    width: 80rpx;
+    height: 80rpx;
+    margin-right: 24rpx;
+    border-radius: 50%;
+    border: 2rpx solid var(--o-scheme-primary, #f16e00);
+    background-color: var(--o-scheme-secondary-container, #ffe2c9);
+    color: var(--o-scheme-primary, #f16e00);
+    font: var(--o-type-title-small, 500 28rpx / 40rpx var(--o-font-family, Roboto, Arial));
+}
+
+.o-transfer-item__avatar--done {
+    background-color: var(--o-scheme-primary, #f16e00);
+    color: var(--o-scheme-on-primary, #000);
+}
+
+.o-transfer-item__amount {
+    font: var(--o-type-title-medium, 500 32rpx / 48rpx var(--o-font-family, Roboto, Arial));
+}
+
+/* Progress ring: conic gradient with a hole */
+.o-transfer-item__ring {
+    position: relative;
+    flex: none;
+    width: 64rpx;
+    height: 64rpx;
+    margin-left: 16rpx;
+    border-radius: 50%;
+}
+
+.o-transfer-item__ring::after {
+    content: '';
+    position: absolute;
+    top: 8rpx;
+    left: 8rpx;
+    right: 8rpx;
+    bottom: 8rpx;
+    border-radius: 50%;
+    background-color: var(--o-scheme-surface, #fff);
+}
+
+.o-transfer-item__chevron {
+    margin-left: 16rpx;
+    font-size: 40rpx;
+}
+
+.o-transfer-item__details {
+    margin-top: 24rpx;
+}
+
+.o-transfer-item__section + .o-transfer-item__section {
+    margin-top: 24rpx;
+}
+
+.o-transfer-item__download {
+    margin-left: 24rpx;
+    font-size: 44rpx;
+}