@cloudbase/weda-ui-mp 0.2.20

package/components/wd-form-arr/index.js

@@ -0,0 +1,348 @@
+/* eslint-disable @typescript-eslint/no-magic-numbers */
+import itemBehavior from '../form-field-behavior/item-behavior';
+import { noop } from '../../utils/constant';
+import { commonCompBehavior } from '../../utils/common-behavior';
+import formFieldBehavior from '../form-field-behavior/form-field-behavior';
+import { isNil, deepClone } from '../../utils/lodash';
+import debounce from '../../utils/debounce';
+import lodashGet from 'lodash.get';
+import lodashSet from 'lodash.set';
+
+import equal from '../../utils/deepEqual';
+
+/**
+ * 获取待操作的数据路径，嵌套表单中子组件的名称是按lodashSet形式拼接的，在更新嵌套表单值时，要去除掉当前嵌套表单的路径名称
+ * @param operateName 待操作的表单项名称
+ * @param currentName 当前表单项名称
+ * @returns
+ */
+const getValueName = (operateName, currentName) =>
+  operateName.replace(new RegExp(`^${currentName}(\\.)?`), '');
+
+Component({
+  options: { virtualHost: true },
+  behaviors: [itemBehavior, commonCompBehavior, formFieldBehavior],
+  properties: {
+    classRoot: {
+      type: String,
+      value: 'form-obj',
+    },
+    addDefaultValue: {
+      type: null,
+      value: {},
+    },
+  },
+  data: {
+    status: 'edit',
+    objValue: [],
+    formsItemMap: {},
+  },
+  lifetimes: {
+    created() {
+      this.updateChildValue = debounce(this.updateChildValueDebounce, 0);
+    },
+    attached: function () {
+      const that = this;
+      this.updateWidgetAPI({
+        getConfig() {
+          return {
+            componentType: 'formObj',
+          };
+        },
+        /**
+         * 外部直接set嵌入表单的值
+         * @param value
+         */
+        setValue(value) {
+          that.change({ name: '', value }, { isUpdateParentForm: true });
+        },
+        add() {
+          that.change({ type: 'add' }, { isUpdateParentForm: false });
+        },
+        remove({ index = -1 } = {}) {
+          that.change(
+            { type: 'remove', value: index },
+            { isUpdateParentForm: false }
+          );
+        },
+        change(params) {
+          that.change(params, { isUpdateParentForm: true });
+        },
+        /**
+         * 用于同步子组件的默认值
+         * @param params
+         */
+        __setValueImmediate__(params) {
+          that.changeByChildFormObj(params);
+        },
+        /**
+         * 嵌套表单内部子组件值改变时，触发嵌套表单组件的值更新
+         * @param params.name 子组件名称
+         * @param params.value 子组件值
+         */
+        valueChangeFromChild(params = {}) {
+          if (!params.name) return;
+
+          // 由于是子组件值变更触发，所以嵌套表单值更新后不再次触发子组件值变更
+          that.change(params, {
+            isUpdateParentForm: true,
+            isUpdateChildValue: false,
+          });
+        },
+        /**
+         * 收集嵌套表单内的子组件实例，以便嵌套表单值变化时，主动触发子组件值更新
+         * @param childName 子组件名称
+         * @param formItem 子组件$widget
+         * @returns
+         */
+        addFormItem(childName, formItem) {
+          if (
+            isNil(childName) ||
+            !formItem ||
+            (typeof childName === 'string' && childName.length === 0)
+          ) {
+            // childName 没设置或为空串的时候不受表单容器控制
+            console.warn(
+              `组件 #${formItem?.id} 表单key(表单输入类组件 childName 属性)没设置或为空串的时候不受表单容器控制`
+            );
+            return noop;
+          }
+          const { formsItemMap } = that.data;
+          if (Array.isArray(formsItemMap[childName])) {
+            formsItemMap[childName].push(formItem);
+          } else {
+            formsItemMap[childName] = [formItem];
+          }
+          that.setData({ formsItemMap });
+          return () => {
+            const removedArr = formsItemMap[childName].filter(
+              (item) => item !== formItem
+            );
+            if (removedArr.length <= 0) {
+              delete formsItemMap[childName];
+            } else {
+              formsItemMap[childName] = removedArr;
+            }
+            that.setData({ formsItemMap });
+          };
+        },
+      });
+    },
+  },
+  methods: {
+    sleep(cb, time = 100) {
+      return new Promise((resolve) => {
+        // eslint-disable-next-line rulesdir/no-timer
+        setTimeout(() => {
+          cb?.();
+          resolve(true);
+        }, time);
+      });
+    },
+    updateWidgetAPI(apis = {}) {
+      const { name, objValue, label, visible, readOnly, disabled, status } =
+        this.data;
+      this.setReadonlyAttributes?.({
+        ...apis,
+        label,
+        name,
+        value: objValue,
+        visible,
+        disabled,
+        readOnly,
+        status,
+        formObjName: name,
+        getValue() {
+          return objValue;
+        },
+      });
+    },
+    // 父级普通表单对象
+    getParentForm() {
+      const parent = this?.$widget?.closest(
+        (w) => w.getConfig?.().componentType === 'form'
+      );
+      return parent;
+    },
+    // 父级嵌套表单对象
+    getParentFormObj() {
+      const parent = this?.$widget?.closest(
+        (w) => w.getConfig?.().componentType === 'formObj'
+      );
+      return parent;
+    },
+    /**
+     * 对外触发嵌套表单的onDataChange事件
+     */
+    triggerOnDataChange(value) {
+      this.triggerEvent('onDataChange', { data: value });
+    },
+    /**
+     * 不在表单容器中使用时，更新子组件值
+     */
+    updateChildValue() {},
+    updateChildValueDebounce(value) {
+      Object.keys(this.data.formsItemMap).forEach((childName) => {
+        let items = this.data.formsItemMap[childName];
+
+        if (!Array.isArray(items)) {
+          items = [items];
+        }
+        const newValue = lodashGet(
+          value,
+          getValueName(childName, this.data.name)
+        );
+        items.forEach((item) => {
+          if (item?.setValue && !equal(item.value, newValue)) {
+            item.setValue(newValue);
+          }
+        });
+      });
+    },
+    /**
+     * 更新值
+     * @param params.name
+     * @param params.value
+     * @param params.type 'change' | 'add' | 'remove'
+     * @param param1.isUpdateParentForm 是否更新父级表单，因子组件值变化调用change时不去触发父表单的更新，因为子组件自己会触发；因为外部设置了值，则触发父表单更新
+     * @param param1.isUpdateChildValue 是否更新子组件值, 因子组件值变化调用change时不去触发updateChildValueWithoutForm；因为外部设置了值，则触发updateChildValueWithoutForm去更新子组件值
+     * @returns
+     */
+    change(
+      params,
+      { isUpdateParentForm = false, isUpdateChildValue = true } = {}
+    ) {
+      const { objValue, name, addDefaultValue } = this.data;
+      let value = deepClone(params.value);
+
+      // 顶层为数组类型
+      if (Array.isArray(objValue)) {
+        // 触发添加操作，则增加一个undefined值
+        if (params.type === 'add') {
+          value = deepClone(objValue);
+          value.push(addDefaultValue);
+        }
+
+        // 触发删除操作，则删除对应索引的值
+        if (params.type === 'remove') {
+          value = deepClone(objValue);
+          value = [
+            ...value.slice(0, params.value),
+            ...value.slice(params.value + 1),
+          ];
+        }
+      }
+
+      // 如果有更新标识，则按标识路径更新值
+      if (params.name) {
+        value = deepClone(objValue);
+        lodashSet(value, getValueName(params.name, name), params.value);
+      }
+
+      if (equal(value, objValue)) {
+        return;
+      }
+
+      this.setData({ objValue: value || [] });
+
+      if (isUpdateChildValue) {
+        // 外部设置数据，同时去更新子组件的值
+        // 延迟更新，避免子组件默认值覆盖当前值
+        this.sleep(() => this.updateChildValue(value));
+      }
+
+      const parentForm = this.getParentForm();
+      const parentFormObj = this.getParentFormObj();
+
+      // 不存在父级嵌套表单时，去更新父级普通表单，避免重复更新
+      if (!parentFormObj && isUpdateParentForm) {
+        // 触发父级普通表单值更新
+        parentForm?.setValue?.({ [name]: value }, false, true);
+        // 刷新父级普通表单的formData
+        parentForm?.updateFormContext();
+      }
+
+      if (params.name) {
+        // 触发父级嵌套表单值更新
+        parentFormObj?.__setValueImmediate__?.({
+          name: params.name,
+          value: params.value,
+        });
+      } else if (parentFormObj?.formObjName) {
+        // 外部直接调用formObj.setValue的情况下，触发父级嵌套表单值更新
+        parentFormObj?.__setValueImmediate__?.({ name, value });
+      }
+
+      this.triggerOnDataChange(value);
+    },
+    /**
+     * 子组件默认值变更，触发嵌套表单值更新
+     * @param params.name
+     * @param params.value
+     */
+    changeByChildFormObj(params) {
+      const { objValue, name } = this.data;
+      const value = deepClone(objValue);
+      lodashSet(value, getValueName(params.name, name), params.value);
+
+      if (equal(value, objValue)) {
+        return;
+      }
+
+      const parentFormObj = this.getParentFormObj();
+      const parentForm = this.getParentForm();
+
+      if (params.name) {
+        // 判断是否将当前的name前缀加上，以便父级嵌套表单更新值
+        const nameTemp = `${
+          !params.name.startsWith(name) && name ? `${name}.` : ''
+        }${params.name}`;
+        // 将值同步给父级嵌套表单
+        parentFormObj?.__setValueImmediate__?.({
+          name: nameTemp,
+          value: params.value,
+        });
+      } else if (parentFormObj?.formObjName) {
+        // 外部直接调用formObj.setValue的情况下，触发父级嵌套表单值更新
+        parentFormObj?.__setValueImmediate__?.({ name, value });
+      }
+
+      if (!parentFormObj && parentForm) {
+        // 触发父级普通表单值更新
+        parentForm?.setValue?.({ [name]: value }, false, true);
+        // 刷新父级普通表单的formData
+        parentForm?.updateFormContext();
+      }
+
+      this.setData({ objValue: value || [] });
+    },
+  },
+  observers: {
+    'disabled, readOnly': function (disabled, readOnly) {
+      if (readOnly) {
+        this.setData({ status: 'readOnly' });
+      } else if (disabled) {
+        this.setData({ status: 'disabled' });
+      } else {
+        this.setData({ status: 'edit' });
+      }
+      this.updateWidgetAPI();
+    },
+    value: function (value) {
+      this.setData({ objValue: value });
+      this.updateWidgetAPI();
+      // 避免初始化的时候，整个数组值被子组件初始值覆盖
+      this.sleep(() => {
+        this.change({ value }, { isUpdateParentForm: true });
+      });
+    },
+    objValue: function (objValue) {
+      this.updateWidgetAPI();
+      // 如果是最顶层的嵌套表单，则去更新子组件的值，否则自己的值更新不去触发子组件值更新，因为父级普通表单会去更新
+      const parentFormObj = this.getParentFormObj();
+      if (!parentFormObj) {
+        this.updateChildValue(objValue);
+      }
+    },
+  },
+});

package/components/wd-form-arr/index.json

@@ -0,0 +1,7 @@
+{
+  "component": true,
+  "styleIsolation": "shared",
+  "usingComponents": {
+    "wd-form-item-obj": "../wd-form-item-obj/index"
+  }
+}

package/components/wd-form-arr/index.wxml

@@ -0,0 +1,5 @@
+<block wx:if="{{visible}}">
+  <wd-form-item-obj id="{{id}}" className="{{className}}" style="{{style}}" label="{{label}}" labelVisible="{{labelVisible}}" labelTips="{{labelTips}}" labelWidth="{{labelWidth}}" labelAlign="{{labelAlign}}" labelWrap="{{labelWrap}}" extra="{{extra}}" classRoot="{{classRoot}}" layout="{{_layout}}">
+    <slot></slot>
+  </wd-form-item-obj>
+</block>

package/components/wd-form-arr/index.wxss

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

package/components/wd-form-arr/wd-form-obj.wxss

@@ -0,0 +1,104 @@
+@charset "UTF-8";
+._B00_Xa {
+  /* 如果生成的wxss 为空文件似乎会导致IDE编译报错， 所以这里给他弄个占位 */
+  word-break: inherit;
+}
+
+.wd-form-obj-root {
+  display: flex;
+}
+.wd-form-obj-root .wd-form-obj {
+  min-width: 200px;
+  width: fit-content;
+  width: 100%;
+}
+.wd-form-obj-root.size-width-sm {
+  width: 100%;
+}
+.wd-form-obj-root.size-width-md {
+  width: 100%;
+}
+.wd-form-obj-root.size-width-lg {
+  width: 100%;
+}
+.wd-form-obj-root .wd-form-item-wrap {
+  width: 100%;
+}
+.wd-form-obj-root .wd-form-item-wrap .wd-form-item-wrap__control {
+  overflow: hidden;
+}
+.wd-form-obj-root .wd-form-item-wrap .wd-card-root {
+  width: 100%;
+  overflow: hidden;
+}
+.wd-form-obj-root .wd-form-item-wrap .wd-card-root.wd-card-content__hidden .wd-card__body {
+  height: 0;
+  overflow: hidden;
+  padding: 0;
+}
+.wd-form-obj-root .wd-form-item-wrap__label.wd-form-obj__label {
+  height: unset;
+  line-height: unset;
+}
+.wd-form-obj-root .wd-form-item-wrap .is-nowrap.wd-form-item-wrap__label.wd-form-obj__label > label {
+  line-height: unset;
+}
+.wd-form-obj-root.wd-h5-form-obj-root {
+  margin-top: calc(var(--wd-space-base) * 4);
+}
+.wd-form-obj-root.wd-h5-form-obj-root .wd-form-item--weui.wd-form-item {
+  padding: 0;
+  margin: 0;
+}
+.wd-form-obj-root.wd-h5-form-obj-root .wd-h5-card-root {
+  margin-bottom: var(--wd-form-item-pd);
+}
+.wd-form-obj-root.wd-h5-form-obj-root .wd-h5-form-obj > div > .wd-form-obj-item > .wd-form-item-wrap {
+  border: none;
+}
+.wd-form-obj-root .wd-card__header .wd-icon {
+  cursor: pointer;
+}
+.wd-form-obj-root .wd-card__header .wd-icon:hover {
+  box-shadow: inset 0 -100vh var(--wd-color-bg-active);
+}
+.wd-form-obj-root .wd-card__header .wd-form-item-wrap__label.wd-form-obj__label {
+  padding: 0;
+}
+
+.wd-form.wd-form--weui .wd-h5-form-obj-root > .wd-form-item-wrap {
+  border: none;
+}
+
+.wd-form-item--weui.wd-form-obj-root > .wd-form-item-wrap {
+  border: none;
+}
+
+.wd-form.wd-pc-form .wd-form-obj-root .wd-form-obj > div > .wd-form-item {
+  padding-top: 0;
+  margin-top: calc(var(--wd-space-base) * 2.5);
+}
+.wd-form.wd-form--weui .wd-card__header .wd-form-item-wrap__label.wd-form-obj__label {
+  padding: 0;
+}
+
+.wd-form.wd-mp-form .wd-mp-form-obj-root > .wd-form-item-wrap {
+  border: none;
+}
+
+.wd-mp-form-obj-root {
+  margin-top: calc(var(--wd-space-base) * 4);
+}
+.wd-mp-form-obj-root .wd-form-item--weui.wd-form-item {
+  padding: 0;
+  margin: 0;
+}
+.wd-mp-form-obj-root .wd-form-obj .wd-h5-card-root {
+  margin-bottom: var(--wd-form-item-pd);
+}
+.wd-mp-form-obj-root .wd-mp-card-root {
+  margin-bottom: var(--wd-form-item-pd);
+}
+.wd-mp-form-obj-root .wd-mp-form-item-obj > .wd-form-item-wrap {
+  border: none;
+}

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

@@ -0,0 +1,106 @@
+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: '',
+  },
+  methods: {},
+  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`,
+          `${itemLayout}-layout-${layout}`,
+          `${item}--label-${labelAlign}`,
+          {
+            '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',
+          }
+        );
+        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/index.json

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

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

@@ -0,0 +1,47 @@
+<view class="{{cls}}" id="{{id}}" style="{{style}}">
+  <view class="{{itemWrap}}">
+    <!-- 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>
+
+    <!-- Item -->
+    <view class="{{itemWrap}}__control">
+      <view class="{{controlWrapCls}}">
+        <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>
+
+  <!-- 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/index.wxss

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