@cloudbase/weda-ui-mp 0.2.20

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

@@ -0,0 +1,59 @@
+import { WD_PREFIX } from '../../utils/constant';
+import { textToString } from '../../utils/platform';
+
+Component({
+  options: {
+    virtualHost: true,
+  },
+  properties: {
+    version: {
+      type: String,
+      value: '',
+    },
+    readOnly: {
+      type: Boolean,
+      value: false,
+    },
+    readValue: {
+      type: null,
+    },
+    before: {
+      type: null,
+    },
+    after: {
+      type: null,
+    },
+    readBeforeAfter: {
+      type: Boolean,
+      value: false,
+    },
+  },
+  data: {
+    complexReadOnly: false,
+    complexReadValue: '',
+    complexBefore: '',
+    complexAfter: '',
+    item: `${WD_PREFIX}-form-item`,
+  },
+  observers: {
+    'version,readOnly,readValue,readBeforeAfter,before,after': function (
+      version,
+      readOnly,
+      readValue,
+      readBeforeAfter,
+      before,
+      after
+    ) {
+      const complexReadOnly = readOnly && version === 'wd';
+      const complexReadValue = textToString(readValue);
+      const complexBefore = readBeforeAfter && textToString(before);
+      const complexAfter = readBeforeAfter && textToString(after);
+      this.setData({
+        complexReadOnly,
+        complexReadValue,
+        complexBefore,
+        complexAfter,
+      });
+    },
+  },
+});

package/components/wd-form-item-read-only/index.json

@@ -0,0 +1,5 @@
+{
+  "component": true,
+  "styleIsolation": "shared",
+  "usingComponents": {}
+}

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

@@ -0,0 +1,10 @@
+<block wx:if="{{complexReadOnly}}">
+  <view class="{{item}}__readonly">
+    <text class="{{item}}__readonly-before" wx:if="{{complexBefore}}">{{complexBefore}}</text>
+    <text class="{{item}}__readonly-value">{{complexReadValue}}</text>
+    <text class="{{item}}__readonly-after" wx:if="{{complexAfter}}">{{complexAfter}}</text>
+  </view>
+</block>
+<block wx:else>
+  <slot></slot>
+</block>

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,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-icon/index.js

@@ -0,0 +1,148 @@
+import classNames from '../../utils/classnames';
+import handleEvents from '../../utils/handleEvents';
+import { convertLegacyEnum } from '../../utils/platform';
+import { WD_ICON_TYPE, WD_ICON_SIZE } from '../../utils/enum';
+import { commonCompBehavior } from '../../utils/common-behavior';
+import { WD_PREFIX } from '../../utils/constant';
+
+Component({
+  options: {
+    virtualHost: true,
+  },
+  behaviors: [commonCompBehavior],
+  properties: {
+    id: {
+      type: String,
+      value: '',
+    },
+    type: {
+      type: String,
+      value: 'inner',
+    },
+    name: {
+      type: String,
+      value: 'success',
+    },
+    src: {
+      type: String,
+      value: '',
+    },
+    size: {
+      type: String,
+      value: 'md',
+    },
+    sizeSelfAdaptive: {
+      type: Boolean,
+      value: false,
+    },
+    className: {
+      type: String,
+      value: '',
+    },
+    style: {
+      type: String,
+      value: '',
+    },
+    color: {
+      type: String,
+      value: '',
+    },
+  },
+  data: {
+    cls: '',
+    inlineStyle: '',
+    fontSize: '',
+    iconColor: '',
+    width: '',
+    height: '',
+    iconType: '',
+  },
+  lifetimes: {
+    attached() {
+      this.init();
+      this.updateWidgetAPI();
+      this.setData({ id: this.id });
+    },
+  },
+  methods: {
+    updateWidgetAPI() {
+      const { type, name, src, size } = this.data;
+
+      this.setReadonlyAttributes &&
+        this.setReadonlyAttributes({
+          type,
+          name,
+          src,
+          size,
+        });
+    },
+    init() {
+      const { className, size, name, type, color, sizeSelfAdaptive } =
+        this.data;
+      // 兼容旧版组件的属性值 size/color
+      const remdiff = 2;
+      const iconNumSize = !isNaN(Number(size))
+        ? `${Number(size) / remdiff}px`
+        : '';
+      const fontSize =
+        iconNumSize && type === 'inner' ? `font-size: ${iconNumSize}` : '';
+      const width =
+        iconNumSize && type === 'custom' ? `width: ${iconNumSize}` : '';
+      const height =
+        iconNumSize && type === 'custom' ? `height: ${iconNumSize}` : '';
+      const iconColor = color ? `color: ${color} ` : '';
+
+      // 枚举转换
+      const _type = convertLegacyEnum(type, WD_ICON_TYPE);
+      const _size = ['xxs'].includes(size)
+        ? size
+        : convertLegacyEnum(size, WD_ICON_SIZE); // 不对外暴露的size属性值
+
+      const classPrefix = WD_PREFIX;
+      const compClassName = `${classPrefix}-icon`;
+      // 样式
+      const isTdIcon = /td/.test(name) && _type === 'inner';
+      const isLegacyIcon = !isTdIcon && _type === 'inner';
+      const iconName = name?.split(':')[1];
+      // 响应式css api
+      const platformCss = `${classPrefix}-mp-icon`;
+      const classes = {
+        [`${classPrefix}-icon`]: true,
+        // 旧版图标
+        'wd-lcap-icon': isLegacyIcon,
+        [`wd-lcap-icon-${name}`]: isLegacyIcon && name,
+        // TDesign 图标
+        't-icon': isTdIcon,
+        [`t-icon-${iconName}`]: isTdIcon && iconName,
+        // 尺寸
+        [`${compClassName}--${_size}`]: !!_size,
+        [platformCss]: true,
+        'size-self-adaptive': sizeSelfAdaptive,
+        [`wd-icon--${_type}`]: true,
+        [`wd-icon--${_type}--${_size}`]: true,
+      };
+
+      const cls = classNames({
+        ...classes,
+        [className]: className,
+      });
+      this.setData({
+        cls,
+        fontSize,
+        iconColor,
+        width,
+        height,
+        iconType: _type,
+      });
+    },
+    ...handleEvents([{ title: '点击', name: 'tap' }]),
+  },
+  observers: {
+    'className,size,name,type,color,sizeSelfAdaptive': function () {
+      this.init();
+    },
+    'type,name,src,size': function () {
+      this.updateWidgetAPI();
+    },
+  },
+});

package/components/wd-icon/index.json

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

package/components/wd-icon/index.wxml

@@ -0,0 +1,4 @@
+<block bind:tap="tap" id="{{id}}">
+  <view wx:if="{{iconType ==='inner'}}" style="{{fontSize}}; {{iconColor}} ;{{style}}" class="{{cls}}" bind:tap="tap" bindload="load"> </view>
+  <wd-image wx:if="{{iconType ==='custom'}}" style="{{width}}; {{height}}; {{style}}" className="{{cls}}" src="{{src ? src : 'https://qcloudimg.tencent-cloud.cn/raw/4a29d51b504f12b4933ce4490110b4dc.svg'}}" events="{{tap}}" maskClosable="{{false}}" lazyLoad="{{false}}"></wd-image>
+</block>

package/components/wd-icon/index.wxss

@@ -0,0 +1,4 @@
+@import '../../style/wd-design.wxss';
+@import '../../style/weda-ui.wxss';
+@import './wd-icon.wxss';
+@import '../../style/wd-font-icon.wxss';