maxit-cli 0.1.0

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

@@ -0,0 +1,116 @@
+@import '../common/style/index.wxss';
+
+.o-dropdown-item {
+    position: fixed;
+    right: 0;
+    left: 0;
+    top: 0;
+    overflow: hidden;
+    bottom: 0;
+}
+
+.o-dropdown-item__content {
+    display: flex;
+    flex-direction: column;
+    z-index: 11600;
+    overflow: hidden;
+}
+
+.o-dropdown-item__popup-host {
+    display: block;
+    width: 100%;
+    overflow: hidden;
+    position: absolute;
+    left: 0;
+    top: 0;
+}
+
+.o-dropdown-item__body {
+    flex: 1;
+    background: var(--o-dropdown-menu-bg-color,var(--o-bg-color-container,var(--o-font-white-1,#fff)));
+    overflow: auto;
+    max-height: var(--o-dropdown-body-max-height,560rpx);
+}
+
+.o-dropdown-item__body--tree {
+    display: flex;
+    overflow: hidden;
+}
+
+.o-dropdown-item__body--multi {
+    padding-top: var(--o-spacer,16rpx);
+    padding-bottom: var(--o-spacer,16rpx);
+    overflow-y: auto;
+}
+
+.o-dropdown-item__scroll {
+    max-height: var(--o-dropdown-body-max-height,560rpx);
+}
+
+.o-dropdown-item__footer {
+    display: flex;
+    background: var(--o-dropdown-menu-bg-color,var(--o-bg-color-container,var(--o-font-white-1,#fff)));
+    padding: var(--o-spacer-2,32rpx);
+    position: relative;
+}
+
+.o-dropdown-item__footer::after {
+    content: '';
+    display: block;
+    position: absolute;
+    top: 0;
+    bottom: unset;
+    left: unset;
+    right: unset;
+    background-color: var(--o-component-border,var(--o-gray-color-4,#dddddd));
+}
+
+.o-dropdown-item__footer::after {
+    height: 1px;
+    left: 0;
+    right: 0;
+    transform: scaleY(.5);
+}
+
+.o-dropdown-item__footer-btn {
+    flex: 1;
+}
+
+.o-dropdown-item__footer-btn+.o-dropdown-item__footer-btn {
+    margin-left: var(--o-spacer-2,32rpx);
+}
+
+.o-dropdown-item__body:empty,
+.o-dropdown-item__footer:empty {
+    display: none;
+}
+
+.o-dropdown-item__checkbox,
+.o-dropdown-item__radio {
+    width: 100%;
+    overflow: scroll;
+    box-sizing: border-box;
+}
+
+.o-dropdown-item__checkbox-group,
+.o-dropdown-item__radio-group {
+    display: grid;
+    grid-gap: var(--o-spacer-1,24rpx);
+}
+
+.o-dropdown-item__radio-group {
+    display: grid;
+    grid-gap: 0;
+}
+
+.o-dropdown-item__checkbox-group {
+    padding: var(--o-spacer-2,32rpx);
+}
+
+.o-dropdown-item__mask {
+    position: fixed;
+    width: 100vh;
+    top: 0;
+    left: 0;
+}
+

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

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

package/registry/components/dropdown-item/index.wxs

@@ -0,0 +1,9 @@
+var getStyles = function (top, zIndex) {
+  var topStyle = top ? 'top:' + top + 'px;' : '';
+  var zIndexStyle = zIndex ? 'z-index:' + zIndex + ';' : '';
+  return topStyle + zIndexStyle;
+};
+
+module.exports = {
+  getStyles: getStyles,
+};

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

@@ -0,0 +1 @@
+const props={disabled:{type:Boolean,value:!1},keys:{type:Object},label:{type:String,value:""},multiple:{type:Boolean,value:!1},options:{type:Array,value:[]},optionsColumns:{type:null,value:1},placement:{type:String,value:"left"},value:{type:null,value:void 0},defaultValue:{type:null,value:void 0}};export default props;

package/registry/components/dropdown-menu/dropdown-menu.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,componentName="dropdown-menu";let DropdownMenu=class extends SuperComponent{constructor(){super(...arguments),this.externalClasses=[`${prefix}-class`,`${prefix}-class-item`,`${prefix}-class-label`,`${prefix}-class-icon`],this.properties=props,this.nodes=null,this.data={prefix:prefix,classPrefix:`${prefix}-${componentName}`,menus:null,activeIdx:-1,bottom:0,_arrowIcon:{name:props.arrowIcon.value}},this.relations={"../dropdown-item/dropdown-item":{type:"descendant"}},this.lifetimes={ready(){this.getAllItems()}},this.observers={arrowIcon(e){this.setData({_arrowIcon:calcIcon(e)})},activeIdx(e){this.triggerEvent(-1===e?"close":"open")}},this.methods={toggle(e){const{activeIdx:t,duration:o}=this.data,s=this.$children[t],n=this.$children[e];(null==n?void 0:n.data.disabled)||(-1!==t&&(s.triggerEvent("close"),s.setData({show:!1},()=>{setTimeout(()=>{s.triggerEvent("closed")},o)})),null==e||t===e?this.setData({activeIdx:-1}):(n.triggerEvent("open"),this.setData({activeIdx:e}),n.setData({show:!0},()=>{setTimeout(()=>{n.triggerEvent("opened")},o)})))},getAllItems(){const e=this.$children.map(({data:e})=>({label:e.computedLabel||e.label,disabled:e.disabled}));this.setData({menus:e})},handleToggle(e){const{index:t}=e.currentTarget.dataset;this.toggle(t)},noop(){}}}};DropdownMenu=__decorate([wxComponent()],DropdownMenu);export default DropdownMenu;

package/registry/components/dropdown-menu/dropdown-menu.json

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

package/registry/components/dropdown-menu/dropdown-menu.wxml

@@ -0,0 +1 @@
+<import src="../common/template/icon.wxml"/><wxs src="../common/utils.wxs" module="_"/><view style="{{_._style([style, customStyle])}}" class="{{ classPrefix }} class {{prefix}}-class" id="o-bar" catchtouchmove="{{activeIdx === -1?'':'noop'}}"><view wx:for="{{menus}}" wx:key="index" bindtap="handleToggle" data-index="{{index}}" class="{{_.cls(classPrefix + '__item', [['active', activeIdx == index], ['disabled', item.disabled], [index, true]])}} {{prefix}}-class-item" aria-disabled="{{item.disabled}}" aria-role="button" aria-expanded="{{activeIdx === index}}" aria-haspopup="menu"><view class="{{classPrefix}}__title {{prefix}}-class-label">{{item.label}}</view><template is="icon" data="{{..._arrowIcon, ariaHidden: true, oClass: classPrefix + '__icon ' + classPrefix + '__icon--' + (activeIdx == index ? 'active ' : ' ') + prefix + '-class-icon'}}"/></view><slot/></view>

package/registry/components/dropdown-menu/dropdown-menu.wxss

@@ -0,0 +1,72 @@
+@import '../common/style/index.wxss';
+
+.o-dropdown-menu {
+    display: flex;
+    height: var(--o-dropdown-menu-height,96rpx);
+    background: var(--o-dropdown-menu-bg-color,var(--o-bg-color-container,var(--o-font-white-1,#fff)));
+    position: relative;
+}
+
+.o-dropdown-menu::after {
+    content: '';
+    display: block;
+    position: absolute;
+    top: unset;
+    bottom: 0;
+    left: unset;
+    right: unset;
+    background-color: var(--o-component-border,var(--o-gray-color-4,#dddddd));
+}
+
+.o-dropdown-menu::after {
+    height: 1px;
+    left: 0;
+    right: 0;
+    transform: scaleY(.5);
+}
+
+.o-dropdown-menu:after {
+    height: var(--o-dropdown-menu-border-width,1px);
+}
+
+.o-dropdown-menu__item {
+    display: flex;
+    flex: 1;
+    align-items: center;
+    justify-content: center;
+    padding: 0 var(--o-spacer,16rpx);
+    position: relative;
+    overflow: hidden;
+    color: var(--o-dropdown-menu-color,var(--o-text-color-primary,var(--o-font-gray-1,#1c1b1f)));
+}
+
+.o-dropdown-menu__item--active {
+    color: var(--o-dropdown-menu-active-color,var(--o-brand-color,var(--o-primary-color-7,#f16e00)));
+}
+
+.o-dropdown-menu__item--disabled {
+    color: var(--o-dropdown-menu-disabled-color,var(--o-text-color-disabled,var(--o-font-gray-4,rgba(0,0,0,.26))));
+}
+
+.o-dropdown-menu__icon {
+    font-size: var(--o-dropdown-menu-icon-size,40rpx);
+    padding: calc(var(--o-spacer,16rpx)/ 4);
+    box-sizing: border-box;
+    transition: transform 240ms ease;
+}
+
+.o-dropdown-menu__icon--active {
+    transform: rotate(180deg);
+}
+
+.o-dropdown-menu__icon:not(:empty) {
+    margin-left: calc(var(--o-spacer,16rpx)/ 2);
+}
+
+.o-dropdown-menu__title {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    font-size: var(--o-dropdown-menu-font-size,var(--o-font-size-base,28rpx));
+}
+

package/registry/components/dropdown-menu/index.js

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

package/registry/components/dropdown-menu/props.js

@@ -0,0 +1 @@
+const props={arrowIcon:{type:null,value:"caret-down-small"},closeOnClickOverlay:{type:Boolean,value:!0},duration:{type:null,value:200},showOverlay:{type:Boolean,value:!0},zIndex:{type:Number,value:11600}};export default props;

package/registry/components/empty/empty.js

@@ -0,0 +1 @@
+import{__decorate}from"../common/tslib";import{SuperComponent,wxComponent}from"../common/src/index";import props from"./props";import config from"../common/config";import{calcIcon}from"../common/utils";const{prefix:prefix}=config,name=`${prefix}-empty`;let default_1=class extends SuperComponent{constructor(){super(...arguments),this.options={multipleSlots:!0},this.externalClasses=[`${prefix}-class`,`${prefix}-class-description`,`${prefix}-class-image`],this.properties=props,this.data={prefix:prefix,classPrefix:name},this.observers={icon(o){this.setData({_icon:calcIcon(o)})}}}};default_1=__decorate([wxComponent()],default_1);export default default_1;

package/registry/components/empty/empty.json

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

package/registry/components/empty/empty.wxml

@@ -0,0 +1 @@
+<import src="../common/template/icon.wxml"/><wxs src="../common/utils.wxs" module="_"/><view style="{{_._style([style, customStyle])}}" class="class {{prefix}}-class {{classPrefix}}"><view aria-hidden="true" class="{{classPrefix}}__thumb"><o-image wx:if="{{image}}" o-class="{{prefix}}-class-image" src="{{image}}" mode="aspectFit"/><template wx:elif="{{_.isNoEmptyObj(_icon)}}" is="icon" data="{{oClass: classPrefix + '__icon', ..._icon}}"/><slot wx:else name="image"/></view><view class="{{classPrefix}}__description {{prefix}}-class-description"><block wx:if="{{description}}">{{description}}</block><slot name="description"/></view><view class="{{classPrefix}}__actions {{prefix}}-class-actions"><slot name="action"/></view></view>

package/registry/components/empty/empty.wxss

@@ -0,0 +1,28 @@
+@import '../common/style/index.wxss';
+
+.o-empty {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+.o-empty__icon {
+    font-size: 192rpx;
+    color: var(--o-empty-icon-color,var(--o-text-color-placeholder,var(--o-font-gray-3,#8d8d8d)));
+}
+
+.o-empty__thumb+.o-empty__description:not(:empty) {
+    margin-top: var(--o-empty-description-margin-top,var(--o-spacer-2,32rpx));
+}
+
+.o-empty__description {
+    text-align: center;
+    color: var(--o-empty-description-color,var(--o-text-color-placeholder,var(--o-font-gray-3,#8d8d8d)));
+    font: var(--o-empty-description-font,var(--o-font-body-medium,28rpx / 44rpx var(--o-font-family,Roboto,PingFang SC,Microsoft YaHei,Arial)));
+    white-space: pre-wrap;
+}
+
+.o-empty__description+.o-empty__actions:not(:empty) {
+    margin-top: var(--o-empty-action-margin-top,var(--o-spacer-4,64rpx));
+}
+

package/registry/components/empty/index.js

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

package/registry/components/empty/props.js

@@ -0,0 +1 @@
+const props={description:{type:String},icon:{type:null},image:{type:String}};export default props;

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

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

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

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

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

@@ -0,0 +1,14 @@
+<view class="o-surface o-surface--outlined o-entry-card class {{prefix}}-class" style="{{style}} {{customStyle}}">
+  <view class="o-row o-entry-card__body">
+    <view wx:if="{{type === 'contact'}}" class="o-entry-card__avatar">
+      <o-icon wx:if="{{avatarIcon}}" name="{{avatarIcon}}" />
+      <text wx:else>{{avatar}}</text>
+    </view>
+    <view class="o-grow">
+      <view wx:if="{{overline}}" class="o-txt-small">{{overline}}</view>
+      <view class="o-txt-title o-txt-title--1 o-entry-card__title">{{title}}</view>
+    </view>
+    <view wx:if="{{type === 'add'}}" class="o-link" bind:tap="onAction">{{actionText}}<o-icon name="add" /></view>
+    <o-icon wx:else name="close-circle-filled" o-class="o-entry-card__remove" bind:click="onRemove" />
+  </view>
+</view>

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

@@ -0,0 +1,30 @@
+@import '../common/style/index.wxss';
+@import '../common/style/card.wxss';
+
+/* Card multiple (Figma "Card multiple"): add an entry, or a contact with a remove button. */
+.o-entry-card__body {
+    padding: 24rpx 32rpx;
+}
+
+.o-entry-card__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-entry-card__title {
+    font: var(--o-type-title-small, 500 28rpx / 40rpx var(--o-font-family, Roboto, Arial));
+}
+
+.o-entry-card__remove {
+    font-size: 48rpx;
+}

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

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

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

@@ -0,0 +1,11 @@
+// o-entry-card: Card multiple (Figma "Card multiple"): add an entry, or a contact with a remove button.
+const props = {
+  // add (overline + title + blue action) or contact (avatar + name + number + remove)
+  type: { type: String, value: 'add' },
+  overline: { type: String, value: '' },
+  title: { type: String, value: '' },
+  actionText: { type: String, value: 'Ajouter' },
+  avatar: { type: String, value: '' },
+  avatarIcon: { type: String, value: '' },
+};
+export default props;

package/registry/components/file-drop/file-drop.js

@@ -0,0 +1,23 @@
+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}-file-drop`;
+
+let FileDrop = class FileDrop extends SuperComponent {
+  constructor() {
+    super(...arguments);
+    this.externalClasses = [`${prefix}-class`];
+    this.options = { multipleSlots: true };
+    this.properties = props;
+    this.data = { prefix, classPrefix: name };
+    this.methods = {
+      onChoose() { this.triggerEvent('choose'); },
+      onEdit() { this.triggerEvent('edit'); },
+    };
+  }
+};
+FileDrop = __decorate([wxComponent()], FileDrop);
+export default FileDrop;

package/registry/components/file-drop/file-drop.json

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

package/registry/components/file-drop/file-drop.wxml

@@ -0,0 +1,13 @@
+<view class="o-file-drop class {{prefix}}-class" style="{{style}} {{customStyle}}">
+  <block wx:if="{{image}}">
+    <image class="o-file-drop__preview" src="{{image}}" mode="aspectFill" />
+    <view class="o-row o-file-drop__file">
+      <text class="o-grow o-txt-small">{{fileName}}</text>
+      <text class="o-link" bind:tap="onEdit">{{editText}}</text>
+    </view>
+  </block>
+  <view wx:else class="o-file-drop__area">
+    <view class="o-file-drop__title">{{title}}</view>
+    <o-button size="small" variant="outline" bind:tap="onChoose">{{buttonText}}</o-button>
+  </view>
+</view>

package/registry/components/file-drop/file-drop.wxss

@@ -0,0 +1,35 @@
+@import '../common/style/index.wxss';
+@import '../common/style/card.wxss';
+
+/* File input (Figma "List_file input"): dashed area with a button, or the chosen picture with an edit link. */
+.o-file-drop {
+    display: block;
+    color: var(--o-scheme-on-surface, #1c1b1f);
+}
+
+.o-file-drop__area {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 16rpx;
+    height: 208rpx;
+    border-radius: 24rpx;
+    border: 2rpx dashed var(--o-scheme-outline, #8d8d8d);
+    background-color: var(--o-scheme-surface-variant, #eee);
+}
+
+.o-file-drop__title {
+    font: var(--o-type-title-small, 500 28rpx / 40rpx var(--o-font-family, Roboto, Arial));
+}
+
+.o-file-drop__preview {
+    display: block;
+    width: 100%;
+    height: 208rpx;
+    border-radius: 24rpx;
+}
+
+.o-file-drop__file {
+    margin-top: 8rpx;
+}

package/registry/components/file-drop/index.js

@@ -0,0 +1,2 @@
+export * from './props';
+export * from './file-drop';

package/registry/components/file-drop/props.js

@@ -0,0 +1,9 @@
+// o-file-drop: File input (Figma "List_file input"): dashed area with a button, or the chosen picture with an edit link.
+const props = {
+  title: { type: String, value: '' },
+  buttonText: { type: String, value: 'Choisir' },
+  image: { type: String, value: '' },
+  fileName: { type: String, value: '' },
+  editText: { type: String, value: 'Modifier' },
+};
+export default props;

package/registry/components/grid/grid.js

@@ -0,0 +1 @@
+import{__decorate}from"../common/tslib";import{SuperComponent,wxComponent}from"../common/src/index";import config from"../common/config";import{isObject}from"../common/validator";import props from"./props";const{prefix:prefix}=config,name=`${prefix}-grid`;let Grid=class extends SuperComponent{constructor(){super(...arguments),this.externalClasses=["o-class"],this.relations={"../grid-item/grid-item":{type:"descendant"}},this.properties=props,this.data={prefix:prefix,classPrefix:name,contentStyle:""},this.observers={"column,hover,align,gutter,border"(){this.updateContentStyle(),this.doForChild(t=>t.updateStyle())}},this.lifetimes={attached(){this.updateContentStyle()}},this.methods={doForChild(t){this.$children.forEach(t)},updateContentStyle(){const t=[],e=this.getContentMargin();e&&t.push(e),this.setData({contentStyle:t.join(";")})},getContentMargin(){const{gutter:t}=this.properties;let{border:e}=this.properties;if(!e)return`margin-bottom:-${t}rpx; margin-right:-${t}rpx`;isObject(e)||(e={});const{width:r=2}=e;return`margin-bottom:-${r}rpx; margin-right:-${r}rpx`}}}};Grid=__decorate([wxComponent()],Grid);export default Grid;

package/registry/components/grid/grid.json

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

package/registry/components/grid/grid.wxml

@@ -0,0 +1 @@
+<wxs src="../common/utils.wxs" module="_"/><view style="{{_._style([style, customStyle])}}" class="{{_.cls(classPrefix, [theme])}} class {{prefix}}-class"><view wx:if="{{column > 0}}" class="{{classPrefix}}__content" style="{{ contentStyle }}"><slot/></view><scroll-view wx:else scroll-x scroll-with-animation class="{{classPrefix}}__content" style="{{ 'white-space: nowrap;' + contentStyle }}"><slot/></scroll-view></view>

package/registry/components/grid/grid.wxss

@@ -0,0 +1,18 @@
+@import '../common/style/index.wxss';
+
+.o-grid {
+    position: relative;
+    overflow: hidden;
+    background-color: var(--o-grid-bg-color,var(--o-bg-color-container,var(--o-font-white-1,#fff)));
+}
+
+.o-grid__content {
+    width: auto;
+}
+
+.o-grid--card {
+    margin: 0 var(--o-spacer-2,32rpx);
+    border-radius: var(--o-grid-card-radius,var(--o-radius-large,18rpx));
+    overflow: hidden;
+}
+

package/registry/components/grid/index.js

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

package/registry/components/grid/props.js

@@ -0,0 +1 @@
+const props={align:{type:String,value:"center"},border:{type:null,value:!1},column:{type:Number,value:4},gutter:{type:Number},hover:{type:Boolean,value:!1},theme:{type:String,value:"default"}};export default props;

package/registry/components/grid-item/grid-item.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{uniqueFactory,calcIcon}from"../common/utils";import{isObject}from"../common/validator";const{prefix:prefix}=config,name=`${prefix}-grid-item`,getUniqueID=uniqueFactory("grid_item");var LinkTypes;!function(t){t["redirect-to"]="redirectTo",t["switch-tab"]="switchTab",t.relaunch="reLaunch",t["navigate-to"]="navigateTo"}(LinkTypes||(LinkTypes={}));let GridItem=class extends SuperComponent{constructor(){super(...arguments),this.externalClasses=[`${prefix}-class`,`${prefix}-class-content`,`${prefix}-class-image`,`${prefix}-class-text`,`${prefix}-class-description`],this.options={multipleSlots:!0},this.relations={"../grid/grid":{type:"ancestor",linked(t){this.parent=t,this.updateStyle(),this.setData({column:t.data.column})}}},this.properties=props,this.data={prefix:prefix,classPrefix:name,gridItemStyle:"",gridItemWrapperStyle:"",gridItemContentStyle:"",align:"center",column:0,describedbyID:""},this.observers={icon(t){this.setData({_icon:calcIcon(t)})}},this.lifetimes={ready(){this.setData({describedbyID:getUniqueID()})}}}updateStyle(){const{hover:t,align:e}=this.parent.properties,r=[],i=[],o=[],s=this.getWidthStyle(),n=this.getPaddingStyle(),p=this.getBorderStyle();s&&r.push(s),n&&i.push(n),p&&o.push(p),this.setData({gridItemStyle:`${r.join(";")}`,gridItemWrapperStyle:i.join(";"),gridItemContentStyle:o.join(";"),hover:t,layout:this.properties.layout,align:e})}getWidthStyle(){const{column:t}=this.parent.properties;return t>0?`width:${1/t*100}%`:""}getPaddingStyle(){const{gutter:t}=this.parent.properties;return t?`padding-bottom:${t}rpx;padding-right:${t}rpx`:""}getBorderStyle(){const{gutter:t}=this.parent.properties;let{border:e}=this.parent.properties;if(!e)return"";isObject(e)||(e={});const{color:r="#266FE8",width:i=2,style:o="solid"}=e;return t?`border:${i}rpx ${o} ${r}`:`border-bottom:${i}rpx ${o} ${r};border-right:${i}rpx ${o} ${r}`}onClick(t){const{item:e}=t.currentTarget.dataset;this.triggerEvent("click",e),this.jumpLink()}jumpLink(){const{url:t,jumpType:e}=this.properties;t&&e&&LinkTypes[e]&&wx[LinkTypes[e]]({url:t})}};GridItem=__decorate([wxComponent()],GridItem);export default GridItem;

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

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

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

@@ -0,0 +1 @@
+<import src="../common/template/image.wxml"/><import src="../common/template/icon.wxml"/><wxs module="util">module.exports.getImageSize = function(column) { if (!column || column === 4) return 'middle'; return column > 4 ? 'small' : 'large'; }</wxs><wxs module="_" src="../common/utils.wxs"/><view class="{{_.cls(classPrefix, [['auto-size', column == 0]])}} class {{prefix}}-class" style="{{_._style([gridItemStyle, style, customStyle])}}" hover-class="{{hover ? classPrefix + '--hover':''}}" hover-stay-time="{{200}}" bindtap="onClick" aria-role="{{ariaRole || 'button'}}" aria-label="{{ariaLabel}}" aria-describedby="{{describedbyID}}"><view class="{{_.cls(classPrefix + '__wrapper', [layout])}}" style="{{gridItemWrapperStyle}}"><view class="{{_.cls(classPrefix + '__content', [align, layout])}} {{prefix}}-class-content" style="{{gridItemContentStyle}}"><slot/><o-badge wx:if="{{image || icon}}" color="{{badgeProps.color || ''}}" content="{{badgeProps.content || ''}}" count="{{badgeProps.count || 0}}" dot="{{badgeProps.dot || false}}" max-count="{{badgeProps.maxCount || 99}}" offset="{{badgeProps.offset || []}}" shape="{{badgeProps.shape || 'circle'}}" show-zero="{{badgeProps.showZero || false}}" size="{{badgeProps.size || 'medium'}}" o-class="{{badgeProps.oClass}}" o-class-content="{{badgeProps.oClassContent}}" o-class-count="{{badgeProps.oClassCount}}"><view class="{{_.cls(classPrefix + '__image', [util.getImageSize(column), ['icon', icon]])}} {{prefix}}-class-image"><block wx:if="{{image && image != 'slot'}}"><template is="image" data="{{ src: image, shape: 'round', mode: 'widthFix', oClass: _.cls(classPrefix + '__image', [util.getImageSize(column)]) + ' ' + prefix + '-class-image', ...imageProps }}"/></block><slot name="image"/><template wx:if="{{_.isNoEmptyObj(_icon)}}" is="icon" data="{{oClass: classPrefix + '__icon', ..._icon}}"/></view></o-badge><view class="{{_.cls(classPrefix + '__words', [layout])}}" id="{{describedbyID}}" aria-label="{{ ariaLabel || (badgeProps.dot || badgeProps.count ? text + ',' +  description + ',' + _.getBadgeAriaLabel({ ...badgeProps }) : '') }}"><view wx:if="{{text}}" class="{{_.cls(classPrefix + '__text', [util.getImageSize(column), layout])}} {{prefix}}-class-text">{{text}}</view><slot name="text"/><view wx:if="{{description}}" class="{{_.cls(classPrefix + '__description', [util.getImageSize(column), layout])}} {{prefix}}-class-description">{{description}}</view><slot name="description"/></view></view></view></view>

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

@@ -0,0 +1,130 @@
+@import '../common/style/index.wxss';
+
+.o-grid-item {
+    box-sizing: border-box;
+    height: 100%;
+    display: inline-block;
+    vertical-align: top;
+    background-color: var(--o-grid-item-bg-color,var(--o-bg-color-container,var(--o-font-white-1,#fff)));
+}
+
+.o-grid-item--hover {
+    background-color: var(--o-grid-item-hover-bg-color,var(--o-bg-color-secondarycontainer,var(--o-gray-color-1,#eeeeee)));
+}
+
+.o-grid-item--auto-size {
+    width: 168rpx;
+}
+
+.o-grid-item__content {
+    width: 100%;
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    overflow: hidden;
+    position: relative;
+    padding: var(--o-grid-item-padding,var(--o-spacer-2,32rpx)) 0 var(--o-spacer-1,24rpx);
+}
+
+.o-grid-item__content--horizontal {
+    flex-direction: row;
+    padding-left: var(--o-grid-item-padding,var(--o-spacer-2,32rpx));
+}
+
+.o-grid-item__content--left {
+    justify-self: flex-start;
+    align-items: flex-start;
+}
+
+.o-grid-item__content--left .o-grid-item__words {
+    text-align: left;
+}
+
+.o-grid-item__words {
+    width: 100%;
+    text-align: center;
+    position: relative;
+    flex-direction: column;
+    display: flex;
+    flex: 1;
+    justify-content: center;
+    align-items: center;
+}
+
+.o-grid-item__words--horizontal {
+    margin-left: var(--o-spacer-1,24rpx);
+}
+
+.o-grid-item__words:empty {
+    display: none;
+}
+
+.o-grid-item__image:not(:empty) {
+    width: var(--o-grid-item-image-width,96rpx);
+    height: var(--o-grid-item-image-width,96rpx);
+}
+
+.o-grid-item__image:not(:empty).o-grid-item__image--small {
+    width: var(--o-grid-item-image-small-width,64rpx);
+    height: var(--o-grid-item-image-small-width,64rpx);
+}
+
+.o-grid-item__image:not(:empty).o-grid-item__image--middle {
+    width: var(--o-grid-item-image-middle-width,80rpx);
+    height: var(--o-grid-item-image-middle-width,80rpx);
+}
+
+.o-grid-item__image:not(:empty) .o-grid__image {
+    width: 100%;
+    height: 100%;
+}
+
+.o-grid-item__image--icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: var(--o-bg-color-secondarycontainer,var(--o-gray-color-1,#eeeeee));
+    border-radius: var(--o-radius-default,12rpx);
+}
+
+.o-grid-item__text {
+    width: inherit;
+    color: var(--o-grid-item-text-color,var(--o-text-color-primary,var(--o-font-gray-1,#1c1b1f)));
+    padding-top: var(--o-grid-item-text-padding-top,var(--o-spacer,16rpx));
+}
+
+.o-grid-item__text--small {
+    font: var(--o-grid-item-text-small-font,var(--o-font-body-extraSmall,20rpx / 32rpx var(--o-font-family,Roboto,PingFang SC,Microsoft YaHei,Arial)));
+}
+
+.o-grid-item__text--middle {
+    font: var(--o-grid-item-text-middle-font,var(--o-font-body-small,24rpx / 40rpx var(--o-font-family,Roboto,PingFang SC,Microsoft YaHei,Arial)));
+}
+
+.o-grid-item__text--large {
+    font: var(--o-grid-item-text-font,var(--o-font-body-medium,28rpx / 44rpx var(--o-font-family,Roboto,PingFang SC,Microsoft YaHei,Arial)));
+}
+
+.o-grid-item__text--horizontal {
+    padding-top: 0;
+    text-align: left;
+}
+
+.o-grid-item__description {
+    padding-top: var(--o-grid-item-description-padding-top,0);
+    width: inherit;
+    color: var(--o-grid-item-description-color,var(--o-text-color-placeholder,var(--o-font-gray-3,#8d8d8d)));
+    font: var(--o-grid-item-description-font,var(--o-font-body-small,24rpx / 40rpx var(--o-font-family,Roboto,PingFang SC,Microsoft YaHei,Arial)));
+}
+
+.o-grid-item__description--horizontal {
+    margin-top: var(--o-grid-item-horizontal-text-description-top,0);
+    padding-left: var(--o-grid-item-horizontal-text-padding-left,0);
+    text-align-last: left;
+}
+
+.o-grid-item__icon {
+    font-size: 48rpx;
+}
+

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

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

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

@@ -0,0 +1 @@
+const props={badgeProps:{type:Object,value:null},description:{type:String},icon:{type:null},image:{type:String},imageProps:{type:Object},jumpType:{type:String,value:"navigate-to"},layout:{type:String,value:"vertical"},text:{type:String},url:{type:String,value:""}};export default props;