@emhome/meeui-mp 1.11.7

package/dist/field/index.js

@@ -0,0 +1,138 @@
+import { nextTick } from '../common/utils';
+import { MeeComponent } from '../common/component';
+import { commonProps, inputProps, textareaProps } from './props';
+MeeComponent({
+    field: true,
+    classes: ['input-class', 'right-icon-class', 'label-class'],
+    props: Object.assign(Object.assign(Object.assign(Object.assign({}, commonProps), inputProps), textareaProps), { size: String, icon: String, label: String, error: Boolean, center: Boolean, isLink: Boolean, leftIcon: String, rightIcon: String, autosize: null, required: Boolean, iconClass: String, clickable: Boolean, inputAlign: String, customStyle: String, errorMessage: String, arrowDirection: String, showWordLimit: Boolean, errorMessageAlign: String, readonly: {
+            type: Boolean,
+            observer: 'setShowClear',
+        }, clearable: {
+            type: Boolean,
+            observer: 'setShowClear',
+        }, clearTrigger: {
+            type: String,
+            value: 'focus',
+        }, border: {
+            type: Boolean,
+            value: true,
+        }, titleWidth: {
+            type: String,
+            value: '6.2em',
+        }, clearIcon: {
+            type: String,
+            value: 'clear',
+        }, extraEventParams: {
+            type: Boolean,
+            value: false,
+        } }),
+    data: {
+        focused: false,
+        innerValue: '',
+        showClear: false,
+    },
+    watch: {
+        value(value) {
+            if (value !== this.value) {
+                this.setData({ innerValue: value });
+                this.value = value;
+                this.setShowClear();
+            }
+        },
+        clearTrigger() {
+            this.setShowClear();
+        },
+    },
+    created() {
+        this.value = this.data.value;
+        this.setData({ innerValue: this.value });
+    },
+    methods: {
+        formatValue(value) {
+            const { maxlength } = this.data;
+            if (maxlength !== -1 && value.length > maxlength) {
+                return value.slice(0, maxlength);
+            }
+            return value;
+        },
+        onInput(event) {
+            const { value = '' } = event.detail || {};
+            const formatValue = this.formatValue(value);
+            this.value = formatValue;
+            this.setShowClear();
+            return this.emitChange(Object.assign(Object.assign({}, event.detail), { value: formatValue }));
+        },
+        onFocus(event) {
+            this.focused = true;
+            this.setShowClear();
+            this.$emit('focus', event.detail);
+        },
+        onBlur(event) {
+            this.focused = false;
+            this.setShowClear();
+            this.$emit('blur', event.detail);
+        },
+        onClickIcon() {
+            this.$emit('click-icon');
+        },
+        onClickInput(event) {
+            this.$emit('click-input', event.detail);
+        },
+        onClear() {
+            this.setData({ innerValue: '' });
+            this.value = '';
+            this.setShowClear();
+            nextTick(() => {
+                this.emitChange({ value: '' });
+                this.$emit('clear', '');
+            });
+        },
+        onConfirm(event) {
+            const { value = '' } = event.detail || {};
+            this.value = value;
+            this.setShowClear();
+            this.$emit('confirm', value);
+        },
+        setValue(value) {
+            this.value = value;
+            this.setShowClear();
+            if (value === '') {
+                this.setData({ innerValue: '' });
+            }
+            this.emitChange({ value });
+        },
+        onLineChange(event) {
+            this.$emit('linechange', event.detail);
+        },
+        onKeyboardHeightChange(event) {
+            this.$emit('keyboardheightchange', event.detail);
+        },
+        onBindNicknameReview(event) {
+            this.$emit('nicknamereview', event.detail);
+        },
+        emitChange(detail) {
+            const { extraEventParams } = this.data;
+            this.setData({ value: detail.value });
+            let result;
+            const data = extraEventParams
+                ? Object.assign(Object.assign({}, detail), { callback: (data) => {
+                        result = data;
+                    } }) : detail.value;
+            this.$emit('input', data);
+            this.$emit('change', data);
+            return result;
+        },
+        setShowClear() {
+            const { clearable, readonly, clearTrigger } = this.data;
+            const { focused, value } = this;
+            let showClear = false;
+            if (clearable && !readonly) {
+                const hasValue = !!value;
+                const trigger = clearTrigger === 'always' || (clearTrigger === 'focus' && focused);
+                showClear = hasValue && trigger;
+            }
+            this.setView({ showClear });
+        },
+        noop() { },
+    },
+});

package/dist/field/index.json

@@ -0,0 +1,7 @@
+{
+  "component": true,
+  "usingComponents": {
+    "mee-cell": "../cell/index",
+    "mee-icon": "../icon/index"
+  }
+}

package/dist/field/index.wxml

@@ -0,0 +1,56 @@
+<wxs src="../wxs/utils.wxs" module="utils" />
+<wxs src="./index.wxs" module="computed" />
+
+<mee-cell
+  size="{{ size }}"
+  icon="{{ leftIcon }}"
+  center="{{ center }}"
+  border="{{ border }}"
+  is-link="{{ isLink }}"
+  required="{{ required }}"
+  clickable="{{ clickable }}"
+  title-width="{{ titleWidth }}"
+  title-style="margin-right: 12px;"
+  custom-style="{{ customStyle }}"
+  arrow-direction="{{ arrowDirection }}"
+  custom-class="custom-class mee-field"
+>
+  <slot name="left-icon" slot="icon" />
+  <label for="{{ name }}" wx:if="{{ label }}" class="label-class {{ utils.bem('field__label', { disabled }) }}" slot="title">
+    {{ label }}
+  </label>
+  <slot wx:else name="label" slot="title" />
+  <view class="{{ utils.bem('field__body', [type]) }}">
+    <view class="{{ utils.bem('field__control', [inputAlign, 'custom']) }}" bindtap="onClickInput">
+      <slot name="input" />
+    </view>
+    <include wx:if="{{ type === 'textarea' }}" src="./textarea.wxml" />
+    <include wx:else src="./input.wxml" />
+
+    <mee-icon
+      wx:if="{{ showClear }}"
+      name="{{ clearIcon }}"
+      class="mee-field__clear-root mee-field__icon-root"
+      catch:touchstart="onClear"
+    />
+    <view class="mee-field__icon-container" bind:tap="onClickIcon">
+      <mee-icon
+        wx:if="{{ rightIcon || icon }}"
+        name="{{ rightIcon || icon }}"
+        class="mee-field__icon-root {{ iconClass }}"
+        custom-class="right-icon-class"
+      />
+      <slot name="right-icon" />
+      <slot name="icon" />
+    </view>
+    <view class="mee-field__button">
+      <slot name="button" />
+    </view>
+  </view>
+  <label for="{{ name }}" wx:if="{{ showWordLimit && maxlength }}" class="mee-field__word-limit">
+    <view class="{{ utils.bem('field__word-num', { full: value.length >= maxlength }) }}">{{ value.length >= maxlength ? maxlength : value.length }}</view>/{{ maxlength }}
+  </label>
+  <label for="{{ name }}"  wx:if="{{ errorMessage }}" class="{{ utils.bem('field__error-message', [errorMessageAlign, { disabled, error }]) }}">
+    {{ errorMessage }}
+  </label>
+</mee-cell>

package/dist/field/index.wxs

@@ -0,0 +1,18 @@
+/* eslint-disable */
+var style = require('../wxs/style.wxs');
+var addUnit = require('../wxs/add-unit.wxs');
+
+function inputStyle(autosize) {
+  if (autosize && autosize.constructor === 'Object') {
+    return style({
+      'min-height': addUnit(autosize.minHeight),
+      'max-height': addUnit(autosize.maxHeight),
+    });
+  }
+
+  return '';
+}
+
+module.exports = {
+  inputStyle: inputStyle,
+};

package/dist/field/index.wxss

@@ -0,0 +1 @@
+@import '../common/index.wxss';.mee-field{--cell-icon-size:var(--field-icon-size,16px)}.mee-field__label{color:var(--field-label-color,#646566)}.mee-field__label--disabled{color:var(--field-disabled-text-color,#c8c9cc)}.mee-field__body{align-items:center;display:flex}.mee-field__body--textarea{box-sizing:border-box;line-height:1.2em;min-height:var(--cell-line-height,24px);padding:3.6px 0}.mee-field__control:empty+.mee-field__control{display:block}.mee-field__control{background-color:initial;border:0;box-sizing:border-box;color:var(--field-input-text-color,#323233);display:none;height:var(--cell-line-height,24px);line-height:inherit;margin:0;min-height:var(--cell-line-height,24px);padding:0;position:relative;resize:none;text-align:left;width:100%}.mee-field__control:empty{display:none}.mee-field__control--textarea{height:var(--field-text-area-min-height,18px);min-height:var(--field-text-area-min-height,18px)}.mee-field__control--error{color:var(--field-input-error-text-color,#ee0a24)}.mee-field__control--disabled{background-color:initial;color:var(--field-input-disabled-text-color,#c8c9cc);opacity:1}.mee-field__control--center{text-align:center}.mee-field__control--right{text-align:right}.mee-field__control--custom{align-items:center;display:flex;min-height:var(--cell-line-height,24px)}.mee-field__placeholder{color:var(--field-placeholder-text-color,#c8c9cc);left:0;pointer-events:none;position:absolute;right:0;top:0}.mee-field__placeholder--error{color:var(--field-error-message-color,#ee0a24)}.mee-field__icon-root{align-items:center;display:flex;min-height:var(--cell-line-height,24px)}.mee-field__clear-root,.mee-field__icon-container{line-height:inherit;margin-right:calc(var(--padding-xs, 8px)*-1);padding:0 var(--padding-xs,8px);vertical-align:middle}.mee-field__button,.mee-field__clear-root,.mee-field__icon-container{flex-shrink:0}.mee-field__clear-root{color:var(--field-clear-icon-color,#c8c9cc);font-size:var(--field-clear-icon-size,16px)}.mee-field__icon-container{color:var(--field-icon-container-color,#969799);font-size:var(--field-icon-size,16px)}.mee-field__icon-container:empty{display:none}.mee-field__button{padding-left:var(--padding-xs,8px)}.mee-field__button:empty{display:none}.mee-field__error-message{color:var(--field-error-message-color,#ee0a24);display:block;font-size:var(--field-error-message-text-font-size,12px);text-align:left}.mee-field__error-message--center{text-align:center}.mee-field__error-message--right{text-align:right}.mee-field__word-limit{color:var(--field-word-limit-color,#646566);font-size:var(--field-word-limit-font-size,12px);line-height:var(--field-word-limit-line-height,16px);margin-top:var(--padding-base,4px);text-align:right}.mee-field__word-num{display:inline}.mee-field__word-num--full{color:var(--field-word-num-full-color,#ee0a24)}

package/dist/field/input.wxml

@@ -0,0 +1,31 @@
+<wxs src="../wxs/utils.wxs" module="utils" />
+<input
+  id="{{ name }}"
+  class="{{ utils.bem('field__control', [inputAlign, { disabled, error }]) }} input-class"
+  type="{{ type }}"
+  focus="{{ focus }}"
+  cursor="{{ cursor }}"
+  value="{{ innerValue }}"
+  auto-focus="{{ autoFocus }}"
+  disabled="{{ disabled || readonly }}"
+  maxlength="{{ maxlength }}"
+  placeholder="{{ placeholder }}"
+  placeholder-style="{{ placeholderStyle }}"
+  placeholder-class="{{ utils.bem('field__placeholder', { error }) }}"
+  confirm-type="{{ confirmType }}"
+  confirm-hold="{{ confirmHold }}"
+  hold-keyboard="{{ holdKeyboard }}"
+  cursor-spacing="{{ cursorSpacing }}"
+  adjust-position="{{ adjustPosition }}"
+  selection-end="{{ selectionEnd }}"
+  selection-start="{{ selectionStart }}"
+  always-embed="{{ alwaysEmbed }}"
+  password="{{ password || type === 'password' }}"
+  bindinput="onInput"
+  bindtap="onClickInput"
+  bindblur="onBlur"
+  bindfocus="onFocus"
+  bindconfirm="onConfirm"
+  bindkeyboardheightchange="onKeyboardHeightChange"
+  bindnicknamereview="onBindNicknameReview"
+/>

package/dist/field/props.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="miniprogram-api-typings" />
+export declare const commonProps: WechatMiniprogram.Component.PropertyOption;
+export declare const inputProps: WechatMiniprogram.Component.PropertyOption;
+export declare const textareaProps: WechatMiniprogram.Component.PropertyOption;

package/dist/field/props.js

@@ -0,0 +1,56 @@
+export const commonProps = {
+    value: String,
+    placeholder: String,
+    placeholderStyle: String,
+    placeholderClass: String,
+    disabled: Boolean,
+    maxlength: {
+        type: Number,
+        value: -1,
+    },
+    cursorSpacing: {
+        type: Number,
+        value: 50,
+    },
+    autoFocus: Boolean,
+    focus: Boolean,
+    cursor: {
+        type: Number,
+        value: -1,
+    },
+    selectionStart: {
+        type: Number,
+        value: -1,
+    },
+    selectionEnd: {
+        type: Number,
+        value: -1,
+    },
+    adjustPosition: {
+        type: Boolean,
+        value: true,
+    },
+    holdKeyboard: Boolean,
+};
+export const inputProps = {
+    type: {
+        type: String,
+        value: 'text',
+    },
+    password: Boolean,
+    confirmType: String,
+    confirmHold: Boolean,
+    alwaysEmbed: Boolean,
+};
+export const textareaProps = {
+    autoHeight: Boolean,
+    fixed: Boolean,
+    showConfirmBar: {
+        type: Boolean,
+        value: true,
+    },
+    disableDefaultPadding: {
+        type: Boolean,
+        value: true,
+    },
+};

package/dist/field/textarea.wxml

@@ -0,0 +1,32 @@
+<wxs src="../wxs/utils.wxs" module="utils" />
+<wxs src="./index.wxs" module="computed" />
+<textarea
+  id="{{ name }}"
+  class="{{ utils.bem('field__control', [inputAlign, type, { disabled, error }]) }} input-class"
+  fixed="{{ fixed }}"
+  focus="{{ focus }}"
+  cursor="{{ cursor }}"
+  value="{{ innerValue }}"
+  auto-focus="{{ autoFocus }}"
+  disabled="{{ disabled || readonly }}"
+  maxlength="{{ maxlength }}"
+  placeholder="{{ placeholder }}"
+  placeholder-style="{{ placeholderStyle }}"
+  placeholder-class="{{ utils.bem('field__placeholder', { error, disabled }) }}"
+  auto-height="{{ !!autosize }}"
+  style="{{ computed.inputStyle(autosize) }}"
+  cursor-spacing="{{ cursorSpacing }}"
+  adjust-position="{{ adjustPosition }}"
+  show-confirm-bar="{{ showConfirmBar }}"
+  hold-keyboard="{{ holdKeyboard }}"
+  selection-end="{{ selectionEnd }}"
+  selection-start="{{ selectionStart }}"
+  disable-default-padding="{{ disableDefaultPadding }}"
+  bindinput="onInput"
+  bindtap="onClickInput"
+  bindblur="onBlur"
+  bindfocus="onFocus"
+  bindconfirm="onConfirm"
+  bindlinechange="onLineChange"
+  bindkeyboardheightchange="onKeyboardHeightChange"
+/>

package/dist/field/types.d.ts

@@ -0,0 +1,8 @@
+export interface InputDetails {
+    /** 输入框内容 */
+    value: string;
+    /** 光标位置 */
+    cursor?: number;
+    /** keyCode 为键值 (目前工具还不支持返回keyCode参数) `2.1.0` 起支持 */
+    keyCode?: number;
+}

package/dist/field/types.js

@@ -0,0 +1 @@
+export {};

package/dist/goods-action/index.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/goods-action/index.js

@@ -0,0 +1,15 @@
+import { MeeComponent } from '../common/component';
+import { useChildren } from '../common/relation';
+MeeComponent({
+    relation: useChildren('goods-action-button', function () {
+        this.children.forEach((item) => {
+            item.updateStyle();
+        });
+    }),
+    props: {
+        safeAreaInsetBottom: {
+            type: Boolean,
+            value: true,
+        },
+    },
+});

package/dist/goods-action/index.json

@@ -0,0 +1,3 @@
+{
+  "component": true
+}

package/dist/goods-action/index.wxml

@@ -0,0 +1,5 @@
+<wxs src="../wxs/utils.wxs" module="utils" />
+
+<view class="custom-class {{ utils.bem('goods-action', { safe: safeAreaInsetBottom }) }}">
+  <slot />
+</view>

package/dist/goods-action/index.wxss

@@ -0,0 +1 @@
+@import '../common/index.wxss';.mee-goods-action{align-items:center;background-color:var(--goods-action-background-color,#fff);bottom:0;box-sizing:initial;display:flex;height:var(--goods-action-height,50px);left:0;position:fixed;right:0}.mee-goods-action--safe{padding-bottom:env(safe-area-inset-bottom)}

package/dist/goods-action-button/index.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/goods-action-button/index.js

@@ -0,0 +1,44 @@
+import { MeeComponent } from '../common/component';
+import { useParent } from '../common/relation';
+import { button } from '../mixins/button';
+import { link } from '../mixins/link';
+MeeComponent({
+    mixins: [link, button],
+    relation: useParent('goods-action'),
+    props: {
+        text: String,
+        color: String,
+        size: {
+            type: String,
+            value: 'normal',
+        },
+        loading: Boolean,
+        disabled: Boolean,
+        plain: Boolean,
+        type: {
+            type: String,
+            value: 'danger',
+        },
+        customStyle: {
+            type: String,
+            value: '',
+        },
+    },
+    methods: {
+        onClick(event) {
+            this.$emit('click', event.detail);
+            this.jumpLink();
+        },
+        updateStyle() {
+            if (this.parent == null) {
+                return;
+            }
+            const { index } = this;
+            const { children = [] } = this.parent;
+            this.setData({
+                isFirst: index === 0,
+                isLast: index === children.length - 1,
+            });
+        },
+    },
+});

package/dist/goods-action-button/index.json

@@ -0,0 +1,6 @@
+{
+  "component": true,
+  "usingComponents": {
+    "mee-button": "../button/index"
+  }
+}

package/dist/goods-action-button/index.wxml

@@ -0,0 +1,35 @@
+<wxs src="../wxs/utils.wxs" module="utils" />
+<mee-button
+  id="{{ id }}"
+  button-id="{{ buttonId }}"
+  lang="{{ lang }}"
+  type="{{ type }}"
+  size="{{ size }}"
+  color="{{ color }}"
+  plain="{{ plain }}"
+  loading="{{ loading }}"
+  disabled="{{ disabled }}"
+  open-type="{{ openType }}"
+  class="{{ utils.bem('goods-action-button', [type, { first: isFirst, last: isLast, plain: plain }])}}"
+  custom-class="mee-goods-action-button__inner custom-class"
+  custom-style="{{customStyle}}"
+  business-id="{{ businessId }}"
+  session-from="{{ sessionFrom }}"
+  app-parameter="{{ appParameter }}"
+  send-message-img="{{ sendMessageImg }}"
+  send-message-path="{{ sendMessagePath }}"
+  show-message-card="{{ showMessageCard }}"
+  send-message-title="{{ sendMessageTitle }}"
+  bind:click="onClick"
+  binderror="onError"
+  bindcontact="onContact"
+  bindopensetting="onOpenSetting"
+  bindgetuserinfo="onGetUserInfo"
+  bindagreeprivacyauthorization="onAgreePrivacyAuthorization"
+  bindgetRealTimePhoneNumber="onGetRealTimePhoneNumber"
+  bindgetphonenumber="onGetPhoneNumber"
+  bindlaunchapp="onLaunchApp"
+>
+  {{ text }}
+  <slot></slot>
+</mee-button>

package/dist/goods-action-button/index.wxss

@@ -0,0 +1 @@
+@import '../common/index.wxss';:host{flex:1}.mee-goods-action-button{--button-warning-background-color:var(--goods-action-button-warning-color,linear-gradient(to right,#ffd01e,#ff8917));--button-danger-background-color:var(--goods-action-button-danger-color,linear-gradient(to right,#ff6034,#ee0a24));--button-default-height:var(--goods-action-button-height,40px);--button-line-height:var(--goods-action-button-line-height,20px);--button-plain-background-color:var(--goods-action-button-plain-color,#fff);--button-border-width:0;display:block}.mee-goods-action-button--first{--button-border-radius:999px 0 0 var(--goods-action-button-border-radius,999px);margin-left:5px}.mee-goods-action-button--last{--button-border-radius:0 999px var(--goods-action-button-border-radius,999px) 0;margin-right:5px}.mee-goods-action-button--first.mee-goods-action-button--last{--button-border-radius:var(--goods-action-button-border-radius,999px)}.mee-goods-action-button--plain{--button-border-width:1px}.mee-goods-action-button__inner{font-weight:var(--font-weight-bold,500)!important;width:100%}@media (max-width:321px){.mee-goods-action-button{font-size:13px}}

package/dist/goods-action-icon/index.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/goods-action-icon/index.js

@@ -0,0 +1,27 @@
+import { MeeComponent } from '../common/component';
+import { button } from '../mixins/button';
+import { link } from '../mixins/link';
+MeeComponent({
+    classes: ['icon-class', 'text-class', 'info-class'],
+    mixins: [link, button],
+    props: {
+        text: String,
+        dot: Boolean,
+        info: String,
+        icon: String,
+        size: String,
+        color: String,
+        classPrefix: {
+            type: String,
+            value: 'mee-icon',
+        },
+        disabled: Boolean,
+        loading: Boolean,
+    },
+    methods: {
+        onClick(event) {
+            this.$emit('click', event.detail);
+            this.jumpLink();
+        },
+    },
+});

package/dist/goods-action-icon/index.json

@@ -0,0 +1,7 @@
+{
+  "component": true,
+  "usingComponents": {
+    "mee-icon": "../icon/index",
+    "mee-button": "../button/index"
+  }
+}

package/dist/goods-action-icon/index.wxml

@@ -0,0 +1,41 @@
+<mee-button
+  square
+  id="{{ id }}"
+  size="large"
+  lang="{{ lang }}"
+  loading="{{ loading }}"
+  disabled="{{ disabled }}"
+  open-type="{{ openType }}"
+  business-id="{{ businessId }}"
+  custom-class="mee-goods-action-icon"
+  session-from="{{ sessionFrom }}"
+  app-parameter="{{ appParameter }}"
+  send-message-img="{{ sendMessageImg }}"
+  send-message-path="{{ sendMessagePath }}"
+  show-message-card="{{ showMessageCard }}"
+  send-message-title="{{ sendMessageTitle }}"
+  bind:click="onClick"
+  binderror="onError"
+  bindcontact="onContact"
+  bindopensetting="onOpenSetting"
+  bindgetuserinfo="onGetUserInfo"
+  bindgetphonenumber="onGetPhoneNumber"
+  bindlaunchapp="onLaunchApp"
+>
+  <mee-icon
+    wx:if="{{ icon }}"
+    name="{{ icon }}"
+    dot="{{ dot }}"
+    info="{{ info }}"
+    size="{{ size }}"
+    color="{{ color }}"
+    class-prefix="{{ classPrefix }}"
+    class="mee-goods-action-icon__icon"
+    custom-class="icon-class"
+    info-class="info-class"
+  />
+  <view wx:else>
+    <slot name="icon" />
+  </view>
+  <text class="text-class">{{ text }}</text>
+</mee-button>

package/dist/goods-action-icon/index.wxss

@@ -0,0 +1 @@
+@import '../common/index.wxss';.mee-goods-action-icon{border:none!important;color:var(--goods-action-icon-text-color,#646566)!important;display:flex!important;flex-direction:column;font-size:var(--goods-action-icon-font-size,10px)!important;height:var(--goods-action-icon-height,50px)!important;justify-content:center!important;line-height:1!important;min-width:var(--goods-action-icon-width,48px)}.mee-goods-action-icon__icon{color:var(--goods-action-icon-color,#323233);display:flex;font-size:var(--goods-action-icon-size,18px);margin:0 auto 5px}

package/dist/grid/index.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/grid/index.js

@@ -0,0 +1,55 @@
+import { MeeComponent } from '../common/component';
+import { useChildren } from '../common/relation';
+MeeComponent({
+    relation: useChildren('grid-item'),
+    props: {
+        square: {
+            type: Boolean,
+            observer: 'updateChildren',
+        },
+        gutter: {
+            type: null,
+            value: 0,
+            observer: 'updateChildren',
+        },
+        clickable: {
+            type: Boolean,
+            observer: 'updateChildren',
+        },
+        columnNum: {
+            type: Number,
+            value: 4,
+            observer: 'updateChildren',
+        },
+        center: {
+            type: Boolean,
+            value: true,
+            observer: 'updateChildren',
+        },
+        border: {
+            type: Boolean,
+            value: true,
+            observer: 'updateChildren',
+        },
+        direction: {
+            type: String,
+            observer: 'updateChildren',
+        },
+        iconSize: {
+            type: String,
+            observer: 'updateChildren',
+        },
+        reverse: {
+            type: Boolean,
+            value: false,
+            observer: 'updateChildren',
+        },
+    },
+    methods: {
+        updateChildren() {
+            this.children.forEach((child) => {
+                child.updateStyle();
+            });
+        },
+    },
+});

package/dist/grid/index.json

@@ -0,0 +1,3 @@
+{
+  "component": true
+}

package/dist/grid/index.wxml

@@ -0,0 +1,8 @@
+<wxs src="./index.wxs" module="computed" />
+
+<view
+  class="mee-grid custom-class {{ border && !gutter ? 'mee-hairline--top' : '' }}"
+  style="{{ computed.rootStyle({ gutter }) }}"
+>
+  <slot />
+</view>