@cloudbase/weda-ui-mp 3.6.5 → 3.7.2

package/components/wd-cascader/wd-cascader.wxss

@@ -0,0 +1,284 @@
+@charset "UTF-8";
+._B00_Xa {
+  /* 如果生成的wxss 为空文件似乎会导致IDE编译报错， 所以这里给他弄个占位 */
+  word-break: inherit;
+}
+
+.wd-cascader,
+.wd-cascader-menu,
+.wd-cascader-h5-view-list__menu {
+  --wd-cascader-font-size: var(--wd-font-size-default);
+  --wd-cascader-border-radius: var(--wd-border-radius);
+  --wd-cascader-color-text: var(--wd-color-text-default);
+  --wd-cascader-color-bg: var(--wd-color-bg-form-default);
+  --wd-cascader-color-bg-hover: var(--wd-color-bg-form-default);
+  --wd-cascader-menu-li-color-bg-hover: var(--wd-color-bg-container-hover);
+  --wd-cascader-menu-li-color-bg-selected: var(--wd-color-brand-light);
+  --wd-cascader-menu-li-color-text-disabled: var(--wd-color-text-disabled);
+  --wd-cascader-menu-li-color-text-selected: var(--wd-color-brand);
+  --wd-cascader-color-border: var(--wd-color-border-form-default);
+}
+
+.wd-cascader,
+.wd-cascader-menu,
+.wd-cascader-h5-view-list__menu {
+  --wd-cascader-font-size: var(--wd-font-size-default);
+  --wd-cascader-border-radius: var(--wd-border-radius);
+  --wd-cascader-color-text: var(--wd-color-text-default);
+  --wd-cascader-color-bg: var(--wd-color-bg-form-default);
+  --wd-cascader-color-bg-hover: var(--wd-color-bg-form-default);
+  --wd-cascader-menu-li-color-bg-hover: var(--wd-color-bg-container-hover);
+  --wd-cascader-menu-li-color-bg-selected: var(--wd-color-brand-light);
+  --wd-cascader-menu-li-color-text-disabled: var(--wd-color-text-disabled);
+  --wd-cascader-menu-li-color-text-selected: var(--wd-color-brand);
+  --wd-cascader-color-border: var(--wd-color-border-form-default);
+}
+
+.wd-form-region-wrap {
+  color: var(--wd-color-text-default);
+  font-size: var(--wd-font-size-default);
+  line-height: var(--wd-font-line-height-default);
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  padding: 0 0.5rem 0 0;
+}
+.wd-form-region-wrap .wd-form-region__input {
+  font-size: 16px;
+}
+
+.wd-cascader {
+  display: inline-flex;
+  vertical-align: middle;
+  position: relative;
+  border: none;
+  width: 100%;
+  height: 100%;
+  cursor: pointer;
+  color: var(--wd-cascader-color-text);
+  transition: 0.2s ease-in-out;
+  transition-property: color, background-color, border;
+  padding-left: 0.5rem;
+}
+.wd-cascader__input {
+  height: 100%;
+  display: flex;
+  align-items: center;
+}
+.wd-cascader .wd-icon-arrowdown {
+  display: none;
+}
+.wd-cascader .wd-tag {
+  margin-top: calc((var(--wd-form-height-md) - 20) / 2);
+}
+.wd-cascader .wd-input--editor {
+  position: relative;
+  padding: 0;
+  height: 24px;
+  line-height: 24px;
+  width: 26px;
+  top: calc((var(--wd-form-height-md) - 26) / 2);
+}
+
+.wd-cascader__input .wd-input[readonly],
+.wd-cascader__input .wd-input {
+  background-color: transparent;
+  border: 0;
+  position: absolute;
+  height: calc(var(--wd-form-height-md) - 4);
+  line-height: calc(var(--wd-form-height-md) - 4);
+  top: 0px;
+  left: 0.5rem;
+  z-index: 1;
+  right: 0px;
+  cursor: pointer;
+  height: 100%;
+}
+
+.wd-cascader__input .wd-input {
+  z-index: 2;
+}
+
+.wd-cascader__input .wd-input--editor {
+  position: relative;
+  padding: 0;
+  height: 24px;
+  line-height: 24px;
+  width: 26px;
+  top: calc((var(--wd-form-height-md) - 26) / 2);
+}
+
+.wd-cascader__value {
+  line-height: calc(var(--wd-form-height-md) - 2);
+  font-size: var(--wd-cascader-font-size);
+  white-space: nowrap;
+  overflow: hidden;
+  position: relative;
+  z-index: 2;
+}
+.wd-cascader__value .wd-tag-group {
+  margin-top: 0px;
+  margin-bottom: 4px;
+  white-space: normal;
+}
+
+.wd-cascader > .wd-icon,
+.wd-cascader .wd-icon-arrowdown {
+  position: absolute;
+  z-index: 2;
+  right: 4px;
+  top: calc((var(--wd-form-height-md) - 16 - 2) / 2);
+}
+
+.wd-cascader.is-disabled {
+  background-color: var(--wd-color-bg-form-disabled);
+  cursor: not-allowed;
+}
+.wd-cascader.is-disabled .wd-cascader__value {
+  color: var(--wd-color-text-form-disabled);
+}
+.wd-cascader.is-disabled .wd-cascader__input .wd-input {
+  cursor: inherit;
+}
+
+.wd-cascader-menu {
+  min-width: 198px;
+  box-sizing: border-box;
+}
+
+.wd-cascader-menu .wd-tabs--bordered .wd-tabs__tab {
+  font-size: var(--wd-cascader-font-size);
+}
+
+.wd-cascader-menu__list {
+  padding: 0 5px 0 15px;
+  font-size: 0;
+  width: 500px;
+  margin-bottom: -10px;
+  max-height: 280px;
+  overflow-y: auto;
+}
+
+.wd-cascader-menu__list li {
+  font-size: var(--wd-cascader-font-size);
+  line-height: 1.5;
+  margin-bottom: 8px;
+  display: inline-block;
+  vertical-align: middle;
+}
+
+.wd-cascader-menu__col4 .wd-cascader-menu__list li {
+  width: 116px;
+}
+
+.wd-cascader-menu__col2 .wd-cascader-menu__list li {
+  width: 232px;
+}
+
+.wd-cascader-menu__col1 .wd-cascader-menu__list li {
+  width: 100%;
+}
+
+.wd-cascader-menu__col1 .wd-cascader-menu__list {
+  width: 350px;
+}
+
+.wd-cascader-menu__label {
+  padding: 1px 5px;
+  cursor: pointer;
+  margin-right: 10px;
+  word-break: keep-all;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.wd-cascader-menu__label:hover {
+  background-color: var(--wd-cascader-menu-li-color-bg-hover);
+}
+
+.wd-cascader-menu__label.is-selected {
+  background-color: --wd-cascader-menu-li-color-bg-selected;
+  color: var(--wd-color-text-inverse);
+}
+
+.wd-cascader-menu__label.is-disabled {
+  color: var(--wd-cascader-menu-li-color-text-disabled);
+}
+.wd-cascader-menu__label.is-disabled:hover {
+  background-color: transparent;
+  cursor: not-allowed;
+}
+
+.wd-cascader--search .wd-input {
+  border: none;
+}
+.wd-cascader-menu--thin {
+  display: flex;
+  min-width: 0;
+}
+.wd-cascader-menu--thin .wd-list {
+  min-width: 160px;
+  max-height: 194px;
+  border-left: 1px solid var(--wd-color-border-separator);
+}
+.wd-cascader-menu--thin .wd-list:first-child {
+  border-left: none;
+}
+.wd-cascader-menu--thin .wd-list > li {
+  position: relative;
+}
+.wd-cascader-menu--thin .wd-list__submenu {
+  padding-right: 24px;
+}
+.wd-cascader-menu--thin .wd-list__submenu::after {
+  top: 50%;
+  margin-top: -8px;
+}
+.wd-cascader-menu--thin .wd-list__submenu.is-selected::after {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-family: "t";
+  content: ">";
+  content: "\e0f7";
+}
+
+.wd-cascader-modal .wd-tabs-h5-root .wd-tabs__header-item-content {
+  width: auto;
+}
+
+.wd-cascader-h5-multiple-view {
+  height: 260px;
+  padding: 8px 16px;
+  overflow: auto;
+}
+
+.wd-cascader-h5-view-list {
+  padding: 8px;
+  overflow: auto;
+  height: 260px;
+}
+.wd-cascader-h5-view-list__menu {
+  display: flex;
+  padding: 0 8px;
+  justify-content: space-between;
+  align-items: center;
+  cursor: pointer;
+}
+.wd-cascader-h5-view-list__menu__text {
+  display: inline-block;
+  padding: 8px 0;
+}
+.wd-cascader-h5-view-list__menu.is-selected {
+  color: var(--wd-cascader-menu-li-color-text-selected);
+}
+.wd-cascader-h5-view-list__menu.is-disabled {
+  color: var(--wd-cascader-menu-li-color-text-disabled);
+  cursor: not-allowed;
+}
+
+.wd-h5-cascader-root .wd-form-input-wrap {
+  font-size: var(--wd-font-size-4);
+}

package/components/wd-date/modal/index.js

@@ -1,5 +1,4 @@
 import { WD_PREFIX } from '../../../utils/constant';
-
 /**
  * 弹窗选择器
  */
@@ -10,6 +9,10 @@ Component({
       type: Boolean,
       value: false,
     },
+    className: {
+      type: String,
+      value: false,
+    },
   },
   data: {
     classPrefix: WD_PREFIX,

package/components/wd-date/modal/index.wxml

@@ -1,4 +1,4 @@
-<view class="{{classPrefix}}-custom-picker" wx:if="{{visible}}">
+<view class="{{classPrefix}}-custom-picker {{className}}" wx:if="{{visible}}">
   <view class="{{classPrefix}}-custom-backdrop" bind:tap="handleClose"></view>
 
   <view class="{{classPrefix}}-custom-picker__inner">

package/components/wd-form/form-utils.js

@@ -27,6 +27,10 @@ export function getFormDataFromItemMap(formItemMap, formType) {
       if (w.getConfig?.()?.componentType === 'formdetail') {
         return acc;
       }
+      // 如果位于嵌套表单内，则跳过赋值，交给嵌套表单处理
+      if (w.closest((ww) => ww.getConfig?.().componentType === 'formObj')) {
+        return acc;
+      }
       lodashSet(acc, k, w?.getValue?.());
     });
 

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

@@ -1093,4 +1093,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-form-arr/index.js

@@ -0,0 +1,330 @@
+/* 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',
+    },
+  },
+  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: {
+    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 (Array.isArray(objValue)) {
+        // 触发添加操作，则增加一个undefined值
+        if (params.type === 'add') {
+          value = deepClone(objValue);
+          value.push({});
+        }
+
+        // 触发删除操作，则删除对应索引的值
+        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.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();
+    },
+    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';