maxit-cli 0.1.0

package/registry/components/input/input.wxss

@@ -0,0 +1,313 @@
+@import '../common/style/index.wxss';
+
+.o-input {
+    background-color: var(--o-input-bg-color,var(--o-bg-color-container,var(--o-font-white-1,#fff)));
+    display: flex;
+    align-items: var(--o-input-align-items,center);
+    flex: 1;
+    padding: var(--o-input-vertical-padding,var(--o-spacer-2,32rpx));
+    overflow: hidden;
+}
+
+.o-input--border {
+    position: relative;
+}
+
+.o-input--border::after {
+    content: '';
+    display: block;
+    position: absolute;
+    top: unset;
+    bottom: 0;
+    left: unset;
+    right: unset;
+    background-color: var(--o-input-border-color,var(--o-component-stroke,var(--o-gray-color-3,#dddddd)));
+}
+
+.o-input--border::after {
+    height: 1px;
+    left: 0;
+    right: 0;
+    transform: scaleY(.5);
+}
+
+.o-input--border:after {
+    left: var(--o-input-border-left-space,var(--o-spacer-2,32rpx));
+    right: var(--o-input-border-right-space,0);
+}
+
+.o-input--layout-vertical {
+    flex-direction: column;
+    align-items: start;
+}
+
+.o-input__wrap--prefix {
+    display: flex;
+}
+
+.o-input__icon--prefix {
+    font-size: 48rpx;
+    color: var(--o-input-prefix-icon-color,var(--o-text-color-primary,var(--o-font-gray-1,#1c1b1f)));
+}
+
+.o-input__label:not(:empty) {
+    min-width: var(--o-input-label-min-width,2em);
+    max-width: var(--o-input-label-max-width,5em);
+    font: var(--o-input-label-text-font,var(--o-font-body-large,32rpx / 48rpx var(--o-font-family,Roboto,PingFang SC,Microsoft YaHei,Arial)));
+    color: var(--o-input-label-text-color,var(--o-text-color-primary,var(--o-font-gray-1,#1c1b1f)));
+    margin-right: var(--o-spacer-2,32rpx);
+    word-wrap: break-word;
+}
+
+.o-input--layout-vertical .o-input__label:not(:empty) {
+    font-size: var(--o-font-size-base,28rpx);
+    padding-bottom: calc(var(--o-spacer,16rpx)/ 2);
+}
+
+.o-input__icon--prefix:not(:empty)+.o-input__label:not(:empty) {
+    padding-left: calc(var(--o-spacer,16rpx)/ 2);
+}
+
+.o-input__label:not(:empty)+.o-input__wrap {
+    margin-left: var(--o-spacer-2,32rpx);
+}
+
+.o-input__icon--prefix:not(:empty)+.o-input__label:empty {
+    margin-right: var(--o-spacer-2,32rpx);
+}
+
+.o-input__wrap {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    flex-wrap: wrap;
+    justify-content: center;
+    flex-shrink: 1;
+    flex: 1;
+}
+
+.o-input__wrap .o-input__content {
+    display: flex;
+    width: 100%;
+    align-items: center;
+    font: var(--o-font-body-large,32rpx / 48rpx var(--o-font-family,Roboto,PingFang SC,Microsoft YaHei,Arial));
+}
+
+.o-input__wrap--clearable-icon,
+.o-input__wrap--suffix,
+.o-input__wrap--suffix-icon {
+    flex: 0 0 auto;
+    padding-left: var(--o-spacer-1,24rpx);
+}
+
+.o-input__wrap--clearable-icon:empty,
+.o-input__wrap--suffix-icon:empty,
+.o-input__wrap--suffix:empty {
+    display: none;
+}
+
+.o-input__wrap--clearable-icon,
+.o-input__wrap--suffix-icon {
+    font-size: 48rpx;
+    color: var(--o-input-suffix-icon-color,var(--o-text-color-placeholder,var(--o-font-gray-3,#8d8d8d)));
+}
+
+.o-input__wrap--suffix {
+    font-size: var(--o-font-size-m,32rpx);
+    color: var(--o-input-suffix-text-color,var(--o-text-color-primary,var(--o-font-gray-1,#1c1b1f)));
+}
+
+.o-input__icon--prefix:empty,
+.o-input__tips:empty,
+.o-input__wrap--clearable-icon:empty,
+.o-input__wrap--suffix-icon:empty,
+.o-input__wrap--suffix:empty {
+    display: none;
+}
+
+.o-input__control {
+    display: block;
+    box-sizing: border-box;
+    width: 100%;
+    min-width: 0;
+    min-height: 48rpx;
+    margin: 0;
+    padding: 0;
+    color: var(--o-input-default-text-color,var(--o-text-color-primary,var(--o-font-gray-1,#1c1b1f)));
+    line-height: inherit;
+    background-color: transparent;
+    border: 0;
+    resize: none;
+    font-size: inherit;
+}
+
+.o-input__control--disabled {
+    color: var(--o-input-disabled-text-color,var(--o-text-color-disabled,var(--o-font-gray-4,rgba(0,0,0,.26))));
+    cursor: not-allowed;
+    opacity: 1;
+    -webkit-text-fill-color: currentColor;
+}
+
+.o-input__control--read-only {
+    cursor: default;
+}
+
+.o-input--left {
+    text-align: left;
+}
+
+.o-input--right {
+    text-align: right;
+}
+
+.o-input--center {
+    text-align: center;
+}
+
+.o-input__placeholder {
+    color: var(--o-input-placeholder-text-color,var(--o-text-color-placeholder,var(--o-font-gray-3,#8d8d8d)));
+    font: var(--o-input-placeholder-text-font,var(--o-font-body-large,32rpx / 48rpx var(--o-font-family,Roboto,PingFang SC,Microsoft YaHei,Arial)));
+}
+
+.o-input__placeholder--disabled {
+    color: var(--o-input-disabled-text-color,var(--o-text-color-disabled,var(--o-font-gray-4,rgba(0,0,0,.26))));
+}
+
+.o-input__tips {
+    font: var(--o-font-body-small,24rpx / 40rpx var(--o-font-family,Roboto,PingFang SC,Microsoft YaHei,Arial));
+    padding-top: calc(var(--o-spacer,16rpx)/ 2);
+}
+
+.o-input--default+.o-input__tips {
+    color: var(--o-input-default-tips-color,var(--o-text-color-placeholder,var(--o-font-gray-3,#8d8d8d)));
+}
+
+.o-input--success+.o-input__tips {
+    color: var(--o-input-success-tips-color,var(--o-success-color,var(--o-success-color-5,#028702)));
+}
+
+.o-input--warning+.o-input__tips {
+    color: var(--o-input-warning-tips-color,var(--o-warning-color,var(--o-warning-color-5,#e37318)));
+}
+
+.o-input--error+.o-input__tips {
+    color: var(--o-input-error-tips-color,var(--o-error-color,var(--o-error-color-6,#cd3c14)));
+}
+
+.o-input--outlined {
+    position: relative;
+    box-sizing: border-box;
+    width: 100%;
+    margin: var(--o-input-outlined-label-offset,20rpx) 0 0;
+    overflow: visible;
+    border: var(--o-input-outlined-border-width,2rpx) solid var(--o-input-outlined-border-color,#dddddd);
+    border-radius: var(--o-input-outlined-radius,16rpx);
+}
+
+.o-input--outlined::after {
+    display: none;
+}
+
+.o-input--outlined .o-input__label:not(:empty) {
+    position: absolute;
+    top: 0;
+    left: var(--o-input-outlined-label-left,24rpx);
+    transform: translateY(-50%);
+    min-width: 0;
+    max-width: calc(100% - 48rpx);
+    margin: 0;
+    padding: 0 12rpx;
+    background-color: var(--o-input-bg-color,var(--o-bg-color-container,var(--o-font-white-1,#fff)));
+    color: var(--o-input-outlined-label-color,var(--o-text-color-primary,#000));
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.o-input--outlined .o-input__label:not(:empty)+.o-input__wrap {
+    margin-left: 0;
+}
+
+.o-input--outlined .o-input__wrap--suffix-icon {
+    color: var(--o-input-outlined-suffix-icon-color,var(--o-text-color-primary,#000));
+}
+
+.o-input--outlined.o-input--size-small {
+    padding: var(--o-input-small-padding,20rpx 24rpx);
+}
+
+.o-input--outlined.o-input--size-small .o-input__label:not(:empty) {
+    font: var(--o-input-small-label-font,24rpx / 36rpx var(--o-font-family,Roboto,PingFang SC,Microsoft YaHei,Arial));
+}
+
+.o-input--outlined.o-input--size-small .o-input__content,
+.o-input--outlined.o-input--size-small .o-input__placeholder {
+    font: var(--o-input-small-font,28rpx / 44rpx var(--o-font-family,Roboto,PingFang SC,Microsoft YaHei,Arial));
+}
+
+.o-input--outlined.o-input--size-small .o-input__wrap--suffix-icon,
+.o-input--outlined.o-input--size-small .o-input__wrap--clearable-icon {
+    font-size: 40rpx;
+}
+
+.o-input--outlined.o-input--size-medium {
+    padding: var(--o-input-medium-padding,32rpx 32rpx);
+}
+
+.o-input--outlined.o-input--size-medium .o-input__label:not(:empty) {
+    font: var(--o-input-medium-label-font,28rpx / 40rpx var(--o-font-family,Roboto,PingFang SC,Microsoft YaHei,Arial));
+}
+
+.o-input--outlined.o-input--size-medium .o-input__content,
+.o-input--outlined.o-input--size-medium .o-input__placeholder {
+    font: var(--o-input-medium-font,32rpx / 48rpx var(--o-font-family,Roboto,PingFang SC,Microsoft YaHei,Arial));
+}
+
+.o-input--outlined.o-input--size-medium .o-input__wrap--suffix-icon,
+.o-input--outlined.o-input--size-medium .o-input__wrap--clearable-icon {
+    font-size: 48rpx;
+}
+
+.o-input--outlined.o-input--size-large {
+    padding: var(--o-input-large-padding,40rpx 32rpx);
+}
+
+.o-input--outlined.o-input--size-large .o-input__label:not(:empty) {
+    font: var(--o-input-large-label-font,32rpx / 44rpx var(--o-font-family,Roboto,PingFang SC,Microsoft YaHei,Arial));
+}
+
+.o-input--outlined.o-input--size-large .o-input__content,
+.o-input--outlined.o-input--size-large .o-input__placeholder {
+    font: var(--o-input-large-font,36rpx / 52rpx var(--o-font-family,Roboto,PingFang SC,Microsoft YaHei,Arial));
+}
+
+.o-input--outlined.o-input--size-large .o-input__wrap--suffix-icon,
+.o-input--outlined.o-input--size-large .o-input__wrap--clearable-icon {
+    font-size: 52rpx;
+}
+
+.o-input--outlined-error {
+    border-color: var(--o-error-color,#cd3c14);
+}
+
+.o-input--outlined-error .o-input__label:not(:empty) {
+    color: var(--o-error-color,#cd3c14);
+}
+
+.o-input--outlined-success {
+    border-color: var(--o-success-color,#028702);
+}
+
+.o-input--outlined-warning {
+    border-color: var(--o-warning-color,#e37318);
+}
+
+.o-input--outlined-default.o-input--focused {
+    border-color: var(--o-brand-color,#f16e00);
+    box-shadow: inset 0 0 0 calc(var(--o-input-outlined-focus-width,4rpx) - 2rpx) var(--o-brand-color,#f16e00);
+}
+
+.o-input--outlined-default.o-input--focused .o-input__label:not(:empty) {
+    color: var(--o-brand-color,#f16e00);
+}
+

package/registry/components/input/props.js

@@ -0,0 +1 @@
+const props={variant:{type:String,value:"outlined"},size:{type:String,value:"medium"},adjustPosition:{type:Boolean,value:!0},align:{type:String,value:"left"},allowInputOverMax:{type:Boolean,value:!1},alwaysEmbed:{type:Boolean,value:!1},autoFocus:{type:Boolean,value:!1},borderless:{type:Boolean,value:!1},clearTrigger:{type:String,value:"always"},clearable:{type:null,value:!1},confirmHold:{type:Boolean,value:!1},confirmType:{type:String,value:"done"},cursor:{type:Number,value:-1,required:!0},cursorColor:{type:String,value:"#f16e00"},cursorSpacing:{type:Number,value:0},disabled:{type:null,value:void 0},focus:{type:Boolean,value:!1},format:{type:null},holdKeyboard:{type:Boolean,value:!1},label:{type:String},layout:{type:String,value:"horizontal"},maxcharacter:{type:Number},maxlength:{type:Number,value:-1},placeholder:{type:String,value:void 0},placeholderClass:{type:String,value:"input-placeholder"},placeholderStyle:{type:String,value:"",required:!0},prefixIcon:{type:null},readonly:{type:null,value:void 0},safePasswordCertPath:{type:String,value:""},safePasswordCustomHash:{type:String,value:""},safePasswordLength:{type:Number},safePasswordNonce:{type:String,value:""},safePasswordSalt:{type:String,value:""},safePasswordTimeStamp:{type:Number},selectionEnd:{type:Number,value:-1},selectionStart:{type:Number,value:-1},status:{type:String,value:"default"},suffix:{type:String},suffixIcon:{type:null},tips:{type:String},type:{type:String,value:"text"},value:{type:null}};export default props;

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

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

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

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

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

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

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

@@ -0,0 +1,17 @@
+<view class="o-surface o-surface--outlined o-insight-card class {{prefix}}-class" style="{{style}} {{customStyle}}">
+  <view class="o-pad">
+    <view class="o-insight-card__head">
+      <view><text class="o-insight-card__value">{{value}}</text><text class="o-amount__currency o-insight-card__unit">{{unit}}</text></view>
+      <view class="o-insight-card__title">{{title}}</view>
+      <view wx:if="{{trend}}" class="o-insight-card__trend {{trendUp ? 'o-insight-card__trend--up' : 'o-insight-card__trend--down'}}">
+        <o-icon name="{{trendUp ? 'arrow-up' : 'arrow-down'}}" /><text>{{trend}}</text><text class="o-txt-small"> {{trendText}}</text>
+      </view>
+    </view>
+    <block wx:if="{{rows.length}}">
+      <view class="o-hr" />
+      <view wx:for="{{rows}}" wx:key="index" class="o-kv">
+        <text class="o-kv__label">{{item.label}}</text><text class="o-kv__value">{{item.value}}</text>
+      </view>
+    </block>
+  </view>
+</view>

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

@@ -0,0 +1,35 @@
+@import '../common/style/index.wxss';
+@import '../common/style/card.wxss';
+
+/* Insight (Figma "Insights"): big orange value, title, trend versus last period, key/value lines. */
+.o-insight-card__head {
+    text-align: center;
+}
+
+.o-insight-card__value,
+.o-insight-card__unit {
+    color: var(--o-scheme-primary, #f16e00);
+}
+
+.o-insight-card__value {
+    font: var(--o-type-headline-small-custom1, 700 48rpx / 64rpx var(--o-font-family, Roboto, Arial));
+}
+
+.o-insight-card__title {
+    font: var(--o-type-title-medium, 500 32rpx / 48rpx var(--o-font-family, Roboto, Arial));
+}
+
+.o-insight-card__trend {
+    display: inline-flex;
+    align-items: center;
+    gap: 4rpx;
+    font: var(--o-type-label-medium, 500 24rpx / 32rpx var(--o-font-family, Roboto, Arial));
+}
+
+.o-insight-card__trend--up {
+    color: var(--o-scheme-success, #028702);
+}
+
+.o-insight-card__trend--down {
+    color: var(--o-scheme-error, #cd3c14);
+}

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

@@ -0,0 +1,12 @@
+// o-insight-card: Insight (Figma "Insights"): big orange value, title, trend versus last period, key/value lines.
+const props = {
+  value: { type: String, value: '' },
+  unit: { type: String, value: '' },
+  title: { type: String, value: '' },
+  trend: { type: String, value: '' },
+  trendUp: { type: Boolean, value: true },
+  trendText: { type: String, value: '' },
+  // [{ label, value }]
+  rows: { type: Array, value: [] },
+};
+export default props;

package/registry/components/link/index.js

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

package/registry/components/link/link.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}from"../common/utils";const{prefix:prefix}=config,name=`${prefix}-link`;let Link=class extends SuperComponent{constructor(){super(...arguments),this.externalClasses=[`${prefix}-class`,`${prefix}-class-hover`,`${prefix}-class-prefix-icon`,`${prefix}-class-content`,`${prefix}-class-suffix-icon`],this.properties=props,this.options={multipleSlots:!0},this.data={prefix:prefix,classPrefix:name},this.observers={"theme, disabled, size, underline, navigatorProps"(){this.setClass()},prefixIcon(e){this.setData({_prefixIcon:calcIcon(e)})},suffixIcon(e){this.setData({_suffixIcon:calcIcon(e)})}},this.lifetimes={attached(){this.setClass()}},this.methods={setClass(){const{theme:e,size:s,underline:i,navigatorProps:t,disabled:o}=this.properties,n=[name,`${name}--${e}`,`${name}--${s}`],{url:r,appId:a,shortLink:p,target:c,openType:l}=null!=t?t:{},m=!(r||"miniProgram"===c&&(a||p));i&&n.push(`${name}--underline`),(t&&m&&!["navigateBack","exit"].includes(l)||o)&&n.push(`${name}--disabled`),this.setData({className:n.join(" ")})},onSuccess(e){this.triggerEvent("success",e)},onFail(e){this.triggerEvent("fail",e)},onComplete(e){this.triggerEvent("complete",e)}}}};Link=__decorate([wxComponent()],Link);export default Link;

package/registry/components/link/link.json

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

package/registry/components/link/link.wxml

@@ -0,0 +1 @@
+<import src="../common/template/icon.wxml"/><wxs src="../common/utils.wxs" module="_"/><navigator class="{{className}} class {{prefix}}-class" style="{{_._style([style, customStyle])}}" target="{{navigatorProps.target}}" url="{{ !disabled && navigatorProps.url}}" open-type="{{navigatorProps.openType || 'navigate'}}" delta="{{navigatorProps.delta}}" app-id="{{navigatorProps.appId}}" path="{{navigatorProps.path}}" extra-data="{{navigatorProps.extraData}}" version="{{navigatorProps.version}}" short-link="{{navigatorProps.shortLink}}" hover-class="{{ hover && !disabled && classPrefix + '--hover' }} {{prefix}}-class-hover {{navigatorProps.hoverClass}}" hover-stop-propagation="navigatorProps.hoverStopPropagation" hover-start-time="{{navigatorProps.hoverStartTime}}" hover-stay-time="{{navigatorProps.hoverStayTime}}" bindsuccess="onSuccess" bindfail="onFail" bindcomplete="onComplete" aria-disabled="{{disabled}}"><view class="{{classPrefix}}__prefix-icon {{prefix}}-class-prefix-icon"><slot name="prefix-icon"/><template wx:if="{{_prefixIcon}}" is="icon" data="{{oClass: prefix + '-class-prefix-icon', ariaHidden: true, ..._prefixIcon }}"/></view><view class="{{classPrefix}}__content {{prefix}}-class-content"><block wx:if="{{content}}">{{content}}</block><slot name="content"/><slot/></view><view class="{{classPrefix}}__suffix-icon {{prefix}}-class-suffix-icon"><slot name="suffix-icon"/><template wx:if="{{_suffixIcon}}" is="icon" data="{{oClass: prefix + '-class-suffix-icon', ariaHidden: true, ..._suffixIcon }}"/></view></navigator>

package/registry/components/link/link.wxss

@@ -0,0 +1,155 @@
+@import '../common/style/index.wxss';
+
+.o-link--small .o-link__content {
+    font: var(--o-font-body-small,24rpx / 40rpx var(--o-font-family,Roboto,PingFang SC,Microsoft YaHei,Arial));
+}
+
+.o-link--small .o-link__prefix-icon,
+.o-link--small .o-link__suffix-icon {
+    font-size: var(--o-font-size-base,28rpx);
+}
+
+.o-link--medium .o-link__content {
+    font: var(--o-font-body-medium,28rpx / 44rpx var(--o-font-family,Roboto,PingFang SC,Microsoft YaHei,Arial));
+}
+
+.o-link--medium .o-link__prefix-icon,
+.o-link--medium .o-link__suffix-icon {
+    font-size: var(--o-font-size-m,32rpx);
+}
+
+.o-link--large .o-link__content {
+    font: var(--o-font-body-large,32rpx / 48rpx var(--o-font-family,Roboto,PingFang SC,Microsoft YaHei,Arial));
+}
+
+.o-link--large .o-link__prefix-icon,
+.o-link--large .o-link__suffix-icon {
+    font-size: var(--o-font-size-l,36rpx);
+}
+
+.o-link--primary {
+    color: var(--o-link-primary-color,var(--o-brand-color,var(--o-primary-color-7,#f16e00)));
+}
+
+.o-link--primary.o-link--underline::after {
+    border-color: var(--o-link-primary-color,var(--o-brand-color,var(--o-primary-color-7,#f16e00)));
+}
+
+.o-link--primary.o-link--disabled {
+    color: var(--o-link-primary-disabled-color,var(--o-brand-color-disabled,var(--o-primary-color-3,#f9c599)));
+}
+
+.o-link--primary.o-link--hover {
+    color: var(--o-link-primary-active-color,var(--o-brand-color-active,var(--o-primary-color-8,#cd5e00)));
+}
+
+.o-link--primary.o-link--hover.o-link--underline::after {
+    border-color: var(--o-link-primary-active-color,var(--o-brand-color-active,var(--o-primary-color-8,#cd5e00)));
+}
+
+.o-link--success {
+    color: var(--o-link-success-color,var(--o-success-color,var(--o-success-color-5,#028702)));
+}
+
+.o-link--success.o-link--underline::after {
+    border-color: var(--o-link-success-color,var(--o-success-color,var(--o-success-color-5,#028702)));
+}
+
+.o-link--success.o-link--disabled {
+    color: var(--o-link-success-disabled-color,var(--o-success-color-disabled,var(--o-success-color-3,#92dab2)));
+}
+
+.o-link--success.o-link--hover {
+    color: var(--o-link-success-active-color,var(--o-success-color-active,var(--o-success-color-6,#008858)));
+}
+
+.o-link--success.o-link--hover.o-link--underline::after {
+    border-color: var(--o-link-success-active-color,var(--o-success-color-active,var(--o-success-color-6,#008858)));
+}
+
+.o-link--warning {
+    color: var(--o-link-warning-color,var(--o-warning-color,var(--o-warning-color-5,#e37318)));
+}
+
+.o-link--warning.o-link--underline::after {
+    border-color: var(--o-link-warning-color,var(--o-warning-color,var(--o-warning-color-5,#e37318)));
+}
+
+.o-link--warning.o-link--disabled {
+    color: var(--o-link-warning-disabled-color,var(--o-warning-color-disabled,var(--o-warning-color-3,#ffb98c)));
+}
+
+.o-link--warning.o-link--hover {
+    color: var(--o-link-warning-active-color,var(--o-warning-color-active,var(--o-warning-color-6,#be5a00)));
+}
+
+.o-link--warning.o-link--hover.o-link--underline::after {
+    border-color: var(--o-link-warning-active-color,var(--o-warning-color-active,var(--o-warning-color-6,#be5a00)));
+}
+
+.o-link--default {
+    color: var(--o-link-default-color,var(--o-text-color-primary,var(--o-font-gray-1,#1c1b1f)));
+}
+
+.o-link--default.o-link--underline::after {
+    border-color: var(--o-link-default-color,var(--o-text-color-primary,var(--o-font-gray-1,#1c1b1f)));
+}
+
+.o-link--default.o-link--disabled {
+    color: var(--o-link-default-disabled-color,var(--o-text-color-disabled,var(--o-font-gray-4,rgba(0,0,0,.26))));
+}
+
+.o-link--default.o-link--hover {
+    color: var(--o-link-default-active-color,var(--o-brand-color-active,var(--o-primary-color-8,#cd5e00)));
+}
+
+.o-link--default.o-link--hover.o-link--underline::after {
+    border-color: var(--o-link-default-active-color,var(--o-brand-color-active,var(--o-primary-color-8,#cd5e00)));
+}
+
+.o-link--danger {
+    color: var(--o-link-danger-color,var(--o-error-color,var(--o-error-color-6,#cd3c14)));
+}
+
+.o-link--danger.o-link--underline::after {
+    border-color: var(--o-link-danger-color,var(--o-error-color,var(--o-error-color-6,#cd3c14)));
+}
+
+.o-link--danger.o-link--disabled {
+    color: var(--o-link-danger-disabled-color,var(--o-error-color-disabled,var(--o-error-color-3,#ffb9b0)));
+}
+
+.o-link--danger.o-link--hover {
+    color: var(--o-link-danger-active-color,var(--o-error-color-active,var(--o-error-color-7,#ad352f)));
+}
+
+.o-link--danger.o-link--hover.o-link--underline::after {
+    border-color: var(--o-link-danger-active-color,var(--o-error-color-active,var(--o-error-color-7,#ad352f)));
+}
+
+.o-link {
+    position: relative;
+    display: flex;
+    align-items: center;
+    box-sizing: content-box;
+}
+
+.o-link--underline::after {
+    content: '';
+    position: absolute;
+    left: 0;
+    right: 0;
+    height: 0;
+    bottom: 0;
+    opacity: 1;
+    border-bottom: 2rpx solid #cd0be7;
+}
+
+.o-link__prefix-icon:not(:empty)+.o-link__content:not(:empty) {
+    padding-left: calc(var(--o-spacer,16rpx)/ 2);
+}
+
+.o-link__content:not(:empty)+.o-link__suffix-icon:not(:empty) {
+    padding-left: calc(var(--o-spacer,16rpx)/ 2);
+}
+

package/registry/components/link/props.js

@@ -0,0 +1 @@
+const props={content:{type:String},disabled:{type:Boolean,value:!1},hover:{type:Boolean},navigatorProps:{type:Object},prefixIcon:{type:null},size:{type:String,value:"medium"},suffixIcon:{type:null},theme:{type:String,value:"default"},underline:{type:Boolean}};export default props;

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

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

package/registry/components/list-item/list-item.js

@@ -0,0 +1,39 @@
+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}-list-item`;
+
+// Recomputed when a property changes and once when attached
+// (the runtime may skip observers for initial property values).
+const observers = {
+  avatar(avatar) {
+    this.setData({ avatarIsImage: /^(https?:|data:|\/|wxfile:)/.test(avatar || '') });
+  },
+};
+
+let ListItem = class ListItem extends SuperComponent {
+  constructor() {
+    super(...arguments);
+    this.externalClasses = [`${prefix}-class`];
+    this.options = { multipleSlots: true };
+    this.properties = props;
+    this.data = { prefix, classPrefix: name, avatarIsImage: false };
+    this.observers = observers;
+    this.lifetimes = {
+      attached() {
+        Object.keys(observers).forEach((key) => observers[key].call(this, this.properties[key]));
+      },
+    };
+    this.methods = {
+      onTap() {
+        if (this.properties.disabled) return;
+        this.triggerEvent('click');
+      },
+    };
+  }
+};
+ListItem = __decorate([wxComponent()], ListItem);
+export default ListItem;

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

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

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

@@ -0,0 +1,22 @@
+<view class="{{classPrefix}} {{description ? classPrefix + '--multi' : ''}} {{divider ? classPrefix + '--divider' : ''}} {{disabled ? classPrefix + '--disabled' : ''}} class {{prefix}}-class" style="{{style}} {{customStyle}}" hover-class="{{disabled ? '' : classPrefix + '--hover'}}" hover-stay-time="{{100}}" bind:tap="onTap">
+  <view wx:if="{{leadingIcon || avatar || image || leading}}" class="{{classPrefix}}__leading">
+    <o-icon wx:if="{{leadingIcon}}" name="{{leadingIcon}}" o-class="{{classPrefix}}__icon" />
+    <view wx:elif="{{avatar}}" class="{{classPrefix}}__avatar">
+      <o-image wx:if="{{avatarIsImage}}" src="{{avatar}}" mode="aspectFill" width="40" height="40" shape="circle" />
+      <text wx:else>{{avatar}}</text>
+    </view>
+    <o-image wx:elif="{{image}}" src="{{image}}" mode="aspectFill" o-class="{{classPrefix}}__image" />
+    <slot name="leading" />
+  </view>
+  <view class="{{classPrefix}}__content">
+    <view wx:if="{{overline}}" class="{{classPrefix}}__overline">{{overline}}</view>
+    <view class="{{classPrefix}}__title">{{title}}<slot /></view>
+    <view wx:if="{{description}}" class="{{classPrefix}}__description">{{description}}</view>
+    <slot name="description" />
+  </view>
+  <view class="{{classPrefix}}__trailing">
+    <text wx:if="{{meta}}" class="{{classPrefix}}__meta">{{meta}}</text>
+    <slot name="trailing" />
+    <o-icon wx:if="{{trailingIcon || arrow}}" name="{{trailingIcon || 'chevron-right'}}" o-class="{{classPrefix}}__icon" />
+  </view>
+</view>