@cloudbase/weda-ui-mp 3.6.5 → 3.7.2

package/components/form/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/form/uploader/index.js

@@ -227,14 +227,14 @@ Component({
           urls: newUrls,
         });
       }
-      this.handleChange(newUrls);
+      this.handleChange(newUrls, true);
     },
-    handleChange: function (values) {
+    handleChange: function (values, isDelete = false) {
       let value = values;
       if (this.properties.single) {
         value = values[0] ?? '';
       }
-      this.triggerEvent('change', { value });
+      this.triggerEvent('change', { value, isDelete });
     },
   },
   observers: {

package/components/form/uploader/weui-uploader.wxml

@@ -40,7 +40,7 @@
     <view wx:if="{{currentFiles.length < maxCount && !readOnly}}" class="weui-uploader__input-box {{shapeClass}}" hover-class="weui-active">
       <view wx:if="{{!disabled&&!isChooseAvatar}}" class="weui-uploader__input" bindtap="chooseImage"></view>
 
-      <button class="weui-uploader__input" wx:if="{{!disabled&&isChooseAvatar}}" open-type="chooseAvatar" bind:chooseavatar="onChooseAvatar"></button>
+      <button class="weui-uploader__input weui-uploader__input-button" wx:if="{{!disabled&&isChooseAvatar}}" open-type="chooseAvatar" bind:chooseavatar="onChooseAvatar"></button>
 
       <view wx:if="{{disabled}}" class="weui-uploader__uploader_disabled"></view>
     </view>

package/components/form/uploader/weui-uploader.wxss

@@ -17,3 +17,7 @@
 .weui-uploader__files .img-shape-rounded-tectangle::before {
   border-radius: 6px;
 }
+
+.weui-uploader__files .weui-uploader__input-box .weui-uploader__input-button {
+  width: 100%;
+}

package/components/form-field-behavior/form-field-behavior.js

@@ -210,7 +210,7 @@ export default Behavior({
       Promise.resolve().then(() => {
         this._reaction = autorun(() => {
           const form = untracked(() => {
-            return this.$widget.closest(
+            return this.$widget?.closest(
               (w) => w.getConfig?.()?.componentType === 'form'
             );
           });
@@ -253,6 +253,8 @@ export default Behavior({
     },
     detached() {
       this._removeFormItem && this._removeFormItem();
+      // 清空嵌套表单
+      this._removeFormObjItem?.();
       if (this.$widget) {
         const form = this.$widget.closest(
           (w) => w.getConfig?.()?.componentType === 'form'
@@ -320,6 +322,9 @@ export default Behavior({
       if (newName === this.data._oldName) return;
       Promise.resolve().then(() => {
         this._removeFormItem?.();
+        // 清空嵌套表单
+        this._removeFormObjItem?.();
+
         // this.$instanceRef.current = this.$instanceRef.current ?? {};
         this.setReadonlyAttributes?.({ name: newName });
         // this.$instanceRef.current.name = newName;
@@ -336,6 +341,18 @@ export default Behavior({
             form?.updateFormContext(this.data.name, this.data.value);
           }
         }
+
+        const formObj = this.$widget?.closest?.(
+          (w) => w.getConfig?.()?.componentType === 'formObj'
+        );
+
+        if (formObj) {
+          // 添加子组件到嵌套表单里面
+          this._removeFormObjItem = formObj.addFormItem(
+            this.data.name,
+            this.$widget
+          );
+        }
       });
     },
     value: function (value) {
@@ -353,8 +370,17 @@ export default Behavior({
           const form = this.$widget.closest(
             (w) => w.getConfig?.()?.componentType === 'form'
           );
-
-          form?.updateFormContext(this.data.name, value);
+          const formObj = this.$widget.closest(
+            (w) => w.getConfig?.()?.componentType === 'formObj'
+          );
+          // 有父级嵌套表单的不更新form值，父级嵌套表单会去更新
+          !formObj && form?.updateFormContext(this.data.name, value);
+          formObj?.valueChangeFromChild?.({
+            name: `${formObj?.formObjName ? `${formObj.formObjName}.` : ''}${
+              this.data.name
+            }`,
+            value,
+          });
         }
 
         // console.log(this.data.name, this.data.valueHistory, 'VALUE history');

package/components/wd-cascader/index.js

@@ -0,0 +1,198 @@
+/* eslint-disable @typescript-eslint/no-magic-numbers */
+
+import { commonCompBehavior } from '../../utils/common-behavior';
+import formFieldBehavior from '../form-field-behavior/form-field-behavior';
+import itemBehavior from '../form-field-behavior/item-behavior';
+import { convertFixedIcon, SELECT_ICON_H5 } from '../../utils/getFormLegacy';
+import debounce from '../../utils/debounce';
+import {
+  getSelectedOptions,
+  transformTabData,
+  setSelectedValue,
+  initTabData,
+  initListOptions,
+  placeholderItem,
+} from './utils';
+Component({
+  options: {
+    virtualHost: true,
+  },
+  behaviors: [itemBehavior, commonCompBehavior, formFieldBehavior],
+  properties: {
+    classRoot: {
+      type: String,
+      value: 'cascader',
+    },
+    data: {
+      type: Array,
+      value: [],
+    },
+    className: {
+      type: String,
+      value: '',
+    },
+    style: {
+      type: String,
+      value: '',
+    },
+    id: {
+      type: String,
+      value: '',
+    },
+  },
+  data: {
+    initData: [],
+    tabData: [],
+    listOptions: [],
+    _suffixType: '',
+    _suffixIcon: '',
+    modalVisible: false,
+    searchable: false,
+    selectedOptions: [],
+    displayValue: '',
+  },
+  methods: {
+    finalUpdateWidgetAPI: function () {
+      const { selectedOptions } = this.data;
+      this.setReadonlyAttributes &&
+        this.setReadonlyAttributes({
+          selectedOptions,
+        });
+      this.updateWidgetAPI();
+    },
+    search: function (e) {
+      this.debouncedTriggerSearchEvent(e.detail.value);
+    },
+    debouncedTriggerSearchEvent: debounce(function (value) {
+      this.triggerEvent('search', {
+        value,
+      });
+    }),
+
+    // tab 展示值
+    updateTabData: function (newTabData, activeItem) {
+      let _activeItem = activeItem;
+      // 当前选中值是否存在子选项
+      const hasChildItem = newTabData[newTabData.length - 1]?.children?.length;
+
+      let tabData = [...newTabData];
+      if (hasChildItem) {
+        _activeItem = placeholderItem;
+        tabData = [...tabData, placeholderItem];
+      }
+      const _tabData = setSelectedValue(tabData, _activeItem.value);
+      this.setData({
+        tabData: _tabData,
+      });
+    },
+
+    // 点击列表选项
+    handleListOptionsClick: function (itemInfo) {
+      const item = itemInfo?.currentTarget?.dataset?.item;
+      if (item.disabled) return;
+      const { listOptions, tabData } = this.data;
+      if (item.children) {
+        this.setData({
+          listOptions: [...item.children],
+        });
+      } else {
+        const _listOptions = setSelectedValue(listOptions, item.value);
+        this.setData({
+          listOptions: _listOptions,
+        });
+      }
+      // 更新tab数据
+      const newTabData = [...tabData.filter((i) => i.level < item.level), item];
+      this.updateTabData(newTabData, item);
+    },
+
+    // 点击tab项，更新列表选项
+    handleTabClick: function (e) {
+      const selectedIndex = e?.detail;
+      const { tabData, initData } = this.data;
+      const selectedItem = tabData[selectedIndex];
+      this.updateTabData(tabData, selectedItem);
+      let listOptions =
+        selectedItem.level === 0
+          ? initData
+          : tabData.find((i) => i.level === selectedIndex - 1)?.children;
+
+      listOptions = setSelectedValue(listOptions, selectedItem?.value);
+      this.setData({
+        listOptions: listOptions,
+      });
+    },
+    init: function () {
+      const { data, value } = this.data;
+      const _value = Array.isArray(value) ? value : [];
+      const initData = transformTabData(data);
+      const tabData = initTabData(initData, _value || [], placeholderItem);
+      const listOptions = initListOptions(initData, _value || []);
+      const selectedOptions = _value?.map((i) => getSelectedOptions(data, i));
+      const displayValue =
+        selectedOptions?.map((i) => i.label)?.join(' / ') || _value.join(' / ');
+      this.setData({
+        tabData,
+        listOptions,
+        initData,
+        selectedOptions,
+        displayValue,
+      });
+    },
+    handleClick: function () {
+      if (this.data.disabled) return;
+      this.setData({
+        modalVisible: true,
+      });
+    },
+    handleClose: function () {
+      this.setData({
+        modalVisible: false,
+      });
+      this.init();
+    },
+    handleOk: function () {
+      const { tabData, data } = this.data;
+      const value = tabData
+        .map((item) => item.value)
+        .filter((i) => i !== '__placeholderItem');
+      const selectedOptions = value.map((i) => getSelectedOptions(data, i));
+      this.setData({
+        modalVisible: false,
+        value,
+        selectedOptions,
+        displayValue: selectedOptions?.map((i) => i.label)?.join(' / '),
+      });
+      this.triggerEvent('change', {
+        value,
+      });
+    },
+  },
+  observers: {
+    'name, value, label, required, visible, disabled, readOnly, before, after, selectedOptions':
+      function () {
+        this.finalUpdateWidgetAPI();
+      },
+    'suffixType,suffixIcon': function (suffixType, suffixIcon) {
+      const [_suffixType, _suffixIcon] = convertFixedIcon(
+        suffixType,
+        suffixIcon,
+        SELECT_ICON_H5
+      );
+      this.setData({
+        _suffixType,
+        _suffixIcon,
+      });
+    },
+    'data, value': function () {
+      this.init();
+    },
+  },
+  lifetimes: {
+    attached: function () {
+      this.finalUpdateWidgetAPI();
+      this.init();
+      this.setData({ id: this.id });
+    },
+  },
+});

package/components/wd-cascader/index.json

@@ -0,0 +1,12 @@
+{
+  "component": true,
+  "styleIsolation": "shared",
+  "usingComponents": {
+    "wd-form-item": "../wd-form-item/index",
+    "wd-input-group": "../wd-input-group/index",
+    "wd-input-wrap": "../wd-input-wrap/index",
+    "wd-modal": "../wd-date/modal",
+    "wd-tabs": "../wd-tabs",
+    "wd-icon": "../wd-icon"
+  }
+}

package/components/wd-cascader/index.wxml

@@ -0,0 +1,59 @@
+<block wx:if="{{visible}}">
+  <wd-form-item
+    id="{{id}}"
+    className="{{className}}"
+    style="{{style}}"
+    label="{{label}}"
+    labelVisible="{{labelVisible}}"
+    labelTips="{{labelTips}}"
+    labelWidth="{{labelWidth}}"
+    labelAlign="{{labelAlign}}"
+    labelWrap="{{labelWrap}}"
+    layout="{{actualLayout}}"
+    extra="{{extra}}"
+    required="{{required}}"
+    requiredFlag="{{requiredFlag}}"
+    validateState="{{validateState}}"
+    validateErrorMsg="{{validateErrorMsg}}"
+    classRoot="{{classRoot}}"
+    size="{{size}}"
+    borderedH5="{{borderedH5}}"
+  >
+    <wd-input-group before="{{before}}" after="{{after}}" block="{{true}}" size="{{_size}}" classRoot="{{classRoot}}" readOnly="{{readOnly}}">
+      <wd-input-wrap block="{{block}}" classRoot="{{classRoot}}" before="{{before}}" after="{{after}}" disabled="{{disabled}}" prefixType="{{prefixType}}" prefixIcon="{{prefixIcon}}" prefixSrc="{{prefixSrc}}" suffixType="{{_suffixType}}" suffixIcon="{{_suffixIcon}}" suffixSrc="{{suffixSrc}}" hasClearIcon="{{hasClearIcon}}" bind:onClear="handleClear" readOnly="{{readOnly}}">
+        <view class="weui-cell__bd">
+          <view bindtap="handleClick" class="weui-picker__group weui-input">
+            <label class="wd-form-select_input {{displayValue ? '' : 'weui-input__placeholder'}}">{{displayValue || placeholder}}</label>
+          </view>
+        </view>
+      </wd-input-wrap>
+    </wd-input-group>
+  </wd-form-item>
+  <wd-modal visible="{{modalVisible}}" bind:onClose="handleClose" bind:onOk="handleOk" header="{{focus}}" className="{{classPrefix + '-cascader-modal'}}">
+    <block wx:if="{{searchable}}">
+      <view class="wd-custom-search {{focus?'is-focused':''}}" style="{{focus? 'margin: 34rpx 32rpx 16rpx 32rpx':'margin: 20rpx 32rpx'}}">
+        <view class="wd-custom-search-box" bindtap="onFocus">
+          <input class="wd-input" focus="{{focus}}" bindfocus="onFocus" bindblur="onBlur" bindinput="bindinput" value="{{searchValue}}" hold-keyboard="true" bindconfirm="bindconfirm" />
+          <view class="wd-custom-search-box__label">
+            <span class="wd-custom-search-box__search-icon"></span>
+            <span class="wd-custom-search-box__search-placeholder"> 搜索 </span>
+          </view>
+          <span wx:if="{{focus && searchValue !== ''}}" class="wd-custom-search-box__dismiss-icon" bindtap="clear"></span>
+        </view>
+        <text class="wd-custom-search__btn-cancle" bindtap="shrink">取消</text>
+      </view>
+    </block>
+    <view class="wd-custom-view-content">
+      <wd-tabs list="{{tabData}}" bind:onCurrent="handleTabClick" direction="horizontal">
+        <scroll-view scroll-y="true" class="{{classPrefix + '-cascader-h5-view-list'}}" enable-flex="true">
+          <view wx:for="{{listOptions}}" class="{{classPrefix + '-cascader-h5-view-list__menu'}} {{item.selected?'is-selected':''}} {{item.isDisabled?'is-disabled':''}}" wx:for-index="index" wx:for-item="item" wx:key="{{item.value}}" id="{{'cell-'+index}}" bindtap="handleListOptionsClick" data-value="{{item.value}}" data-item="{{item}}">
+            <view class="{{classPrefix + '-cascader-h5-view-list__menu__text'}}"> {{item.label}} </view>
+            <view wx-if="{{item.selected}}">
+              <wd-icon name="td:check" size="md" />
+            </view>
+          </view>
+        </scroll-view>
+      </wd-tabs>
+    </view>
+  </wd-modal>
+</block>

package/components/wd-cascader/index.wxss

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

package/components/wd-cascader/utils.js

@@ -0,0 +1,70 @@
+/* eslint-disable @typescript-eslint/no-magic-numbers */
+
+import { deepClone } from '../../utils/lodash';
+
+// 获取选中项
+export const getSelectedOptions = (data, value) => {
+  for (const i of data) {
+    if (i.value === value) return i;
+    if (i.children) {
+      const res = getSelectedOptions(i.children, value);
+      if (res) return res;
+    }
+  }
+};
+
+// 组装tab数据
+export const transformTabData = (data, pid = 'root', level = 0) => {
+  if (!Array.isArray(data)) return [];
+  return data.map((_item) => {
+    const item = deepClone(_item);
+    if (item.children) {
+      item.children = transformTabData(item.children, item.value, level + 1);
+    }
+    return { ...item, level, selected: false, pid };
+  });
+};
+// 设置选中值
+export const setSelectedValue = (data, value) => {
+  if (!Array.isArray(data)) return [];
+  const _value = [].concat(value);
+  return data.map((item) => {
+    item.selected = !!_value.find((i) => i === item?.value);
+    if (item.children) {
+      item.children = setSelectedValue(item.children, value);
+    }
+    return item;
+  });
+};
+
+export const initTabData = (data, value, placeholderItem) => {
+  if (!Array.isArray(data)) return [];
+  let tabDataRes = [placeholderItem];
+  if (value.length) {
+    const selectedOptions =
+      value?.map((i) => getSelectedOptions(data, i)) || [];
+    const selectedItem = selectedOptions[selectedOptions.length - 1];
+
+    tabDataRes = setSelectedValue(selectedOptions, selectedItem?.value);
+  }
+  return tabDataRes;
+};
+
+export const initListOptions = (data, value) => {
+  if (!Array.isArray(data)) return [];
+  let listOptionsRes = deepClone(data);
+  if (value.length) {
+    const selectedOptions =
+      value?.map((i) => getSelectedOptions(data, i)) || [];
+    const selectedItem = selectedOptions[selectedOptions.length - 1];
+    listOptionsRes =
+      getSelectedOptions(data, selectedItem.pid)?.children || data;
+  }
+  return listOptionsRes;
+};
+
+export const placeholderItem = {
+  label: '请选择',
+  value: '__placeholderItem',
+  selected: true,
+};