@cloudbase/weda-ui-mp 3.6.5 → 3.7.2

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

@@ -0,0 +1,305 @@
+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',
+    },
+  },
+  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 });
+        },
+        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: {
+    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 } = this.data;
+      let value = deepClone(params.value);
+
+      // 如果有更新标识，则按标识路径更新值
+      if (params.name) {
+        value = deepClone(objValue);
+        lodashSet(value, getValueName(params.name, name), params.value);
+      } else if (Object.keys(objValue || {})?.length) {
+        value = deepClone({ ...objValue, ...value });
+      }
+
+      if (equal(value, objValue)) {
+        return;
+      }
+
+      this.setData({ objValue: value || {} });
+      this.updateWidgetAPI();
+
+      if (isUpdateChildValue) {
+        // 外部设置数据，同时去更新子组件的值
+        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 || {} });
+      this.updateWidgetAPI();
+    },
+  },
+  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();
+    },
+    objValue: function (objValue) {
+      // 如果是最顶层的嵌套表单，则去更新子组件的值，否则自己的值更新不去触发子组件值更新，因为父级普通表单会去更新
+      const parentFormObj = this.getParentFormObj();
+      if (!parentFormObj) {
+        this.updateChildValue(objValue);
+      }
+    },
+  },
+});

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

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

package/components/wd-form-obj/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-obj/index.wxss

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

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

@@ -0,0 +1,51 @@
+@charset "UTF-8";
+._B00_Xa {
+  /* 如果生成的wxss 为空文件似乎会导致IDE编译报错， 所以这里给他弄个占位 */
+  word-break: inherit;
+}
+
+.wd-form-obj-root {
+  display: flex;
+}
+.wd-form-obj-root .wd-form-obj-root {
+  margin-top: 10px;
+}
+.wd-form-obj-root.wd-form-item--weui.wd-form-item {
+  padding: 0;
+}
+.wd-form-obj-root .wd-form-obj {
+  min-width: 200px;
+  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%;
+}
+.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;
+  padding: unset;
+  margin-left: var(--wd-form-item-label-mr);
+}
+.wd-form-obj-root .wd-form-item-wrap .is-nowrap.wd-form-item-wrap__label.wd-form-obj__label > label {
+  line-height: unset;
+}

package/components/wd-icon/index.json

@@ -2,6 +2,6 @@
   "component": true,
   "styleIsolation": "shared",
   "usingComponents": {
-    "wd-image": "../wd-image"
+    "wd-image": "../wd-image/index"
   }
 }

package/components/wd-input/inner-input/wd-input.wxss

@@ -1257,6 +1257,16 @@ textarea {
   width: 100%;
 }
 
+.wd-mp-form-item-obj .wd-form-obj-card-header {
+  display: flex;
+}
+.wd-mp-form-item-obj .wd-form-obj-item-wrap__control-wrap {
+  flex-direction: column;
+}
+.wd-mp-form-item-obj .wd-form-item--weui.wd-form-item {
+  width: 100%;
+}
+
 .wd-form-input-wrap {
   --wd-form-input-wrap-border-radius: var(--wd-border-radius);
   --wd-form-input-wrap-text-default: var(--wd-color-text-form-default);

package/components/wd-progress/wd-progress.wxss

@@ -1125,4 +1125,14 @@ textarea {
 }
 .wd-form.size-width-hundred {
   width: 100%;
+}
+
+.wd-mp-form-item-obj .wd-form-obj-card-header {
+  display: flex;
+}
+.wd-mp-form-item-obj .wd-form-obj-item-wrap__control-wrap {
+  flex-direction: column;
+}
+.wd-mp-form-item-obj .wd-form-item--weui.wd-form-item {
+  width: 100%;
 }

package/components/wd-rating/wd-rating.wxss

@@ -1118,4 +1118,14 @@ textarea {
 }
 .wd-form.size-width-hundred {
   width: 100%;
+}
+
+.wd-mp-form-item-obj .wd-form-obj-card-header {
+  display: flex;
+}
+.wd-mp-form-item-obj .wd-form-obj-item-wrap__control-wrap {
+  flex-direction: column;
+}
+.wd-mp-form-item-obj .wd-form-item--weui.wd-form-item {
+  width: 100%;
 }

package/components/wd-select/select.wxss

@@ -227,6 +227,11 @@
 .wd-custom-search-box__search-icon {
   color: rgba(0, 0, 0, 0.9);
   margin-right: 4px;
+  background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjUiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNSAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTE0Ljc2NTUgMTUuMzI3OUMxMy41Mzc4IDE2LjMyMjEgMTEuOTc0MSAxNi45MTc2IDEwLjI3MTQgMTYuOTE3NkM2LjMyNDUzIDE2LjkxNzYgMy4xMjUgMTMuNzE4MSAzLjEyNSA5Ljc3MTMyQzMuMTI1IDUuODI0NTEgNi4zMjQ1MyAyLjYyNSAxMC4yNzE0IDIuNjI1QzE0LjIxODIgMi42MjUgMTcuNDE3NyA1LjgyNDUxIDE3LjQxNzcgOS43NzEzMkMxNy40MTc3IDExLjQ3NDEgMTYuODIyMSAxMy4wMzc4IDE1LjgyOCAxNC4yNjU1TDIxLjEyNSAxOS41NjI1TDIwLjA2MjYgMjAuNjI1TDE0Ljc2NTUgMTUuMzI3OVpNMTUuOTE1MiA5Ljc3MTMyQzE1LjkxNTIgNi42NTQzNCAxMy4zODg0IDQuMTI3NTIgMTAuMjcxNCA0LjEyNzUyQzcuMTU0MzUgNC4xMjc1MiA0LjYyNzUyIDYuNjU0MzQgNC42Mjc1MiA5Ljc3MTMyQzQuNjI3NTIgMTIuODg4MyA3LjE1NDM1IDE1LjQxNTEgMTAuMjcxNCAxNS40MTUxQzEzLjM4ODQgMTUuNDE1MSAxNS45MTUyIDEyLjg4ODMgMTUuOTE1MiA5Ljc3MTMyWiIgZmlsbD0iYmxhY2siIGZpbGwtb3BhY2l0eT0iMC40Ii8+Cjwvc3ZnPgo=);
+  background-repeat: no-repeat;
+  width: 24px;
+  height: 24px;
+  display: inline-block;
 }
 .wd-custom-search-box__dismiss-icon {
   position: absolute;
@@ -309,16 +314,17 @@
   border-radius: 0;
 }
 .wd-custom-picker__header {
-  height: 58px;
+  height: 48px;
   flex: 0 0 48px;
   display: flex;
   align-items: center;
   justify-content: space-between;
+  border-bottom: 1px solid #e3e6eb;
 }
 .wd-custom-picker__header-confirm, .wd-custom-picker__header-cancle {
   flex: 0 0 auto;
-  padding: 0 16px;
-  font-size: 16px;
+  padding: 0 20px;
+  font: var(--wd-typography-body-md);
   color: rgba(0, 0, 0, 0.6);
   cursor: pointer;
 }

package/components/wd-switch/wd-switch.wxss

@@ -1214,4 +1214,14 @@ textarea {
 }
 .wd-form.size-width-hundred {
   width: 100%;
+}
+
+.wd-mp-form-item-obj .wd-form-obj-card-header {
+  display: flex;
+}
+.wd-mp-form-item-obj .wd-form-obj-item-wrap__control-wrap {
+  flex-direction: column;
+}
+.wd-mp-form-item-obj .wd-form-item--weui.wd-form-item {
+  width: 100%;
 }

package/components/wd-tag-select/wd-tag-select.wxss

@@ -1255,4 +1255,14 @@ textarea {
 }
 .wd-form.size-width-hundred {
   width: 100%;
+}
+
+.wd-mp-form-item-obj .wd-form-obj-card-header {
+  display: flex;
+}
+.wd-mp-form-item-obj .wd-form-obj-item-wrap__control-wrap {
+  flex-direction: column;
+}
+.wd-mp-form-item-obj .wd-form-item--weui.wd-form-item {
+  width: 100%;
 }

package/components/web-view/index.js

@@ -39,6 +39,9 @@ Component({
       this.setReadonlyAttributes &&
         this.setReadonlyAttributes({
           link,
+          postMessage: (message) => {
+            wx?.miniProgram?.postMessage(message);
+          },
         });
     },
 

package/index.json

@@ -37,6 +37,8 @@
     "FormTextArea": "components/form-text-area/index",
     "FormInput": "components/form-input/index",
     "WdForm": "components/wd-form/index",
+    "WdFormObj": "components/wd-form-obj/index",
+    "WdFormArr": "components/wd-form-arr/index",
     "WdInput": "components/wd-input/index",
     "WdInputUrl": "components/wd-input-url/index",
     "WdInputPhone": "components/wd-input-phone/index",

package/package.json

@@ -3,7 +3,7 @@
   "miniprogram": "./",
   "packageManager": "yarn@3.0.2",
   "dependencies": {},
-  "version": "3.6.5",
+  "version": "3.7.2",
   "main": "./",
   "publishConfig": {
     "access": "public"

package/utils/enum.js

@@ -1245,3 +1245,16 @@ export const WD_TABLE_CUSTOM_FORMAT = [
   { label: '数组', value: 'array' },
   { label: 'JSON', value: 'json' },
 ];
+
+export const WD_CODE_EDITOR_LANGUAGE = [
+  { label: 'JS', value: 'javascript' },
+  { label: 'TypeScript', value: 'typescript' },
+  { label: 'MongoDB', value: 'mongodb' },
+  { label: 'SQL', value: 'sql' },
+  { label: 'MySQL', value: 'mysql' },
+];
+
+export const WD_CODE_EDITOR_THEME = [
+  { label: '暗黑', value: 'githubDark' },
+  { label: '明亮', value: 'githubLight' },
+];