@cloudbase/weda-ui-mp 0.2.20

package/components/wd-form-item-obj/index.js

@@ -0,0 +1,113 @@
+import { WD_PREFIX } from '../../utils/constant';
+import { textToString } from '../../utils/platform';
+import classNames from '../../utils/classnames';
+import itemBehavior from '../form-field-behavior/item-behavior';
+import {
+  convertSize,
+  convertLayout,
+  convertLabelAlign,
+  convertPx,
+} from '../../utils/getFormLegacy';
+
+Component({
+  options: { virtualHost: true, styleIsolation: 'shared' },
+  behaviors: [itemBehavior],
+  data: {
+    item: `${WD_PREFIX}-form-item`,
+    itemWrap: `${WD_PREFIX}-form-item-wrap`,
+    classPrefix: WD_PREFIX,
+    labelStyle: '',
+    cls: '',
+    labelCls: '',
+    controlWrapCls: '',
+    labelRoot: '',
+    root: '',
+    _before: '',
+    _after: '',
+    _readValue: '',
+    iconName: 'chevronup',
+  },
+  methods: {
+    setIconName() {
+      this.setData({
+        iconName:
+          this.data.iconName === 'chevrondown' ? 'chevronup' : 'chevrondown',
+      });
+    },
+  },
+  observers: {
+    'className,labelWidth,labelAlign,labelWrap,layout,required,requiredFlag,size,classRoot,borderedH5,disabled,controlAlign':
+      function (
+        className,
+        _labelWidth,
+        _labelAlign,
+        labelWrap,
+        _layout,
+        required,
+        requiredFlag,
+        _size,
+        classRoot,
+        borderedH5,
+        disabled,
+        controlAlign
+      ) {
+        const { item, itemWrap, classPrefix } = this.data;
+        const sizeTemp = convertSize(_size);
+        const size = sizeTemp === 'xs' ? 'xs' : 'lg';
+        const labelAlign = convertLabelAlign(_labelAlign);
+        const layout = convertLayout(_layout);
+        const root = `${classPrefix}-${classRoot}`;
+        const labelRoot = `${root}__label`;
+        const labelWidth = convertPx(_labelWidth);
+        const labelStyle = labelWidth ? `width:${labelWidth}` : '';
+        const itemLayout = this.properties.isWdFormDetail
+          ? `${classPrefix}-form-item--detail`
+          : `${item}-`;
+        const cls = classNames(
+          item,
+          className,
+          `${classPrefix}-mp-form-item ${item}--weui item-size-height-${size} ${root}-root ${classPrefix}-mp-${classRoot}-root ${classPrefix}-mp-form-item-obj`,
+          {
+            'is-required': requiredFlag && required,
+            'is-borderless': !borderedH5,
+            [`${itemLayout}-horizontal-left`]:
+              layout === 'horizontal' && labelAlign === 'left',
+            [`${itemLayout}-horizontal-right`]:
+              layout === 'horizontal' && labelAlign === 'right',
+            [`${itemLayout}-vertical-left`]:
+              layout === 'vertical' && labelAlign === 'left',
+            [`${itemLayout}-vertical-right`]:
+              layout === 'vertical' && labelAlign === 'right',
+            [`${item}--label-${labelAlign}`]: !!labelAlign,
+          }
+        );
+        const labelCls = classNames(`${itemWrap}__label`, labelRoot, {
+          'is-nowrap': !labelWrap,
+          'is-disabled': disabled,
+        });
+        const controlWrapCls = classNames(`${itemWrap}__control-wrap`, {
+          [`${itemWrap}__control-wrap--right`]: controlAlign === 'right',
+        });
+
+        this.setData({
+          labelStyle,
+          cls,
+          labelCls,
+          labelRoot,
+          root,
+          controlWrapCls,
+        });
+      },
+    'readBeforeAfter,before,after,readValue': function (
+      readBeforeAfter,
+      before,
+      after,
+      readValue
+    ) {
+      const _readValue = textToString(readValue);
+      const _before = readBeforeAfter && textToString(before);
+      const _after = readBeforeAfter && textToString(after);
+      this.setData({ _readValue, _before, _after });
+    },
+  },
+});

package/components/wd-form-item-obj/index.json

@@ -0,0 +1,8 @@
+{
+  "component": true,
+  "styleIsolation": "shared",
+  "usingComponents": {
+    "wd-icon": "../wd-icon/index",
+    "wd-card": "../wd-card/index"
+  }
+}

package/components/wd-form-item-obj/index.wxml

@@ -0,0 +1,51 @@
+<view class="{{cls}}" id="{{id}}" style="{{style}}">
+  <view class="{{itemWrap}}">
+    <wd-card className="{{iconName === 'chevrondown' ? 'wd-card-content__hidden' : ''}}" showContent="{{true}}">
+      <view slot="headerSlot" class="wd-form-obj-card-header">
+        <wd-icon name="{{iconName}}" bind:tap="setIconName"></wd-icon>
+        <!-- Label -->
+        <block wx:if="{{labelVisible}}">
+          <view class="{{labelCls}}" style="{{labelStyle}}">
+            <label>
+              <text class="{{itemWrap}}__label-text {{labelRoot}}-text">{{label}}</text>
+              <block wx:if="{{labelTips}}">
+                <text class="{{itemWrap}}__label-explain">
+                  <wd-icon name="td:help-circle"></wd-icon>
+                </text>
+              </block>
+            </label>
+          </view>
+        </block>
+      </view>
+      <view slot="contentSlot">
+        <!-- Item -->
+        <view class="{{itemWrap}}__control">
+          <view class="{{controlWrapCls}} wd-form-obj-item-wrap__control-wrap">
+            <block wx:if="{{readOnly}}">
+              <view class="{{item}}__readonly">
+                <text class="{{item}}__readonly-before" wx:if="{{_before}}">{{_before}}</text>
+                <text class="{{item}}__readonly-value">{{_readValue}}</text>
+                <text class="{{item}}__readonly-after" wx:if="{{_after}}">{{_after}}</text>
+              </view>
+            </block>
+            <block wx:else>
+              <slot></slot>
+            </block>
+          </view>
+        </view>
+      </view>
+    </wd-card>
+  </view>
+  <!-- Message -->
+  <block wx:if="{{validateErrorMsg}}">
+    <view class="{{item}}__help">
+      <text class="{{classPrefix}}-g-text-error {{root}}__error">{{validateErrorMsg}}</text>
+    </view>
+  </block>
+  <!-- Help -->
+  <block wx:if="{{extra}}">
+    <view class="{{item}}__help">
+      <text class="{{item}}__help-text {{root}}__help">{{extra}}</text>
+    </view>
+  </block>
+</view>

package/components/wd-form-item-obj/index.wxss

@@ -0,0 +1,2 @@
+@import '../../style/wd-design.wxss';
+@import './wd-form-item.wxss';