fix(form): 修改form组件示例与问题 (#4283)

* fix(form): 修改form组件示例与问题

* fix(form): snap-update

* fix(dropdown-menu): snap-update

* chore: add form route

* fix(form): form组件修改

* fix: fix cr

* docs: update css vars

* docs: regenerate api docs

* fix: fix console warnings

* fix(Form): fixed incorrect validation results

---------

Co-authored-by: anlyyao <anly_yaw@163.com>

Author: Boomkaa

packages/components/date-time-picker/_example/year-month-date/index.js

@@ -63,7 +63,7 @@ Page({
 
       return {
         value: item.value,
-        label: item.label.slice(0, -1),
+        label: item.label?.slice(0, -1),
       };
     },
   },

packages/components/date-time-picker/date-time-picker.wxml

@@ -5,7 +5,7 @@
   visible="{{visible}}"
   value="{{columnsValue}}"
   header="{{header}}"
-  title="{{title || globalConfig.title}}"
+  title="{{title || globalConfig.title || ''}}"
   auto-close="{{autoClose}}"
   confirm-btn="{{confirmBtn || globalConfig.confirm}}"
   cancel-btn="{{cancelBtn || globalConfig.cancel}}"

packages/components/dropdown-menu/__test__/__snapshots__/index.test.js.snap

@@ -9,14 +9,14 @@ exports[`dropdown-menu :base 1`] = `
       class="t-dropdown-menu class t-class"
       id="t-bar"
       style="font-size: 9px;"
-      catch:touchmove="noop"
+      catch:touchmove=""
     >
       <wx-view
         ariaDisabled="{{false}}"
-        ariaExpanded="{{true}}"
+        ariaExpanded="{{false}}"
         ariaHaspopup="menu"
         ariaRole="button"
-        class="t-dropdown-menu__item t-dropdown-menu__item--active t-dropdown-menu__item--0 t-class-item"
+        class="t-dropdown-menu__item t-dropdown-menu__item--0 t-class-item"
         data-index="{{0}}"
         bind:tap="handleToggle"
       >
@@ -26,7 +26,7 @@ exports[`dropdown-menu :base 1`] = `
           菜单
         </wx-view>
         <t-icon
-          tClass="t-dropdown-menu__icon t-dropdown-menu__icon--active t-class-icon"
+          tClass="t-dropdown-menu__icon t-dropdown-menu__icon-- t-class-icon"
           bind:click=""
         >
           <wx-view
@@ -85,7 +85,7 @@ exports[`dropdown-menu :base 1`] = `
         >
           <wx-view
             class="t-dropdown-item__mask"
-            hidden="{{false}}"
+            hidden="{{true}}"
             style="height:0px;"
             bind:tap="handleMaskClick"
             catch:touchmove="closeDropdown"
@@ -97,7 +97,7 @@ exports[`dropdown-menu :base 1`] = `
             bind:visible-change="handleMaskClick"
           >
             <wx-view
-              class="t-popup t-popup--top t-fade-enter-active t-fade-enter-to class t-class"
+              class="t-popup t-popup--top t-fade-leave-active t-fade-leave-to class t-class"
               style="z-index:11601;--td-popup-transition:all 200ms ease; position: absolute;"
               bind:transitionend="onTransitionEnd"
             >
@@ -608,7 +608,7 @@ exports[`dropdown-menu :base 1`] = `
               <wx-view
                 ariaLabel="关闭"
                 ariaRole="button"
-                class="t-overlay t-fade-enter-active t-fade-enter-to class"
+                class="t-overlay t-fade-leave-active t-fade-leave-to class"
                 style="--td-overlay-transition-duration:200ms; z-index:11000; top:0px; position: absolute;"
                 bind:tap="handleClick"
                 catch:touchmove="noop"

packages/components/dropdown-menu/__test__/index.test.js

@@ -36,6 +36,7 @@ describe('dropdown-menu', () => {
     expect($first.instance.data.wrapperVisible).toBeTruthy();
 
     $item.dispatchEvent('tap');
+    await simulate.sleep(50);
     expect(comp.toJSON()).toMatchSnapshot();
   });
 

packages/components/form-item/README.en-US.md

@@ -1,158 +1,134 @@
 @import '../common/style/base.less';
 
 /* Less 支持测试 - 监听功能验证 */
-@form-item-prefix: ~'@{prefix}-form-item';
+@form: ~'@{prefix}-form';
+@form-item: ~'@{prefix}-form__item';
 @form-item-horizontal-padding: var(--td-form-item-horizontal-padding, 32rpx);
 @form-item-vertical-padding: var(--td-form-item-vertical-padding, 32rpx);
-@form-item-label-width: var(--td-form-item-label-width, 160rpx);
-@form-item-justify-content: var(--td-form-item-justify-content, space-between);
-.@{form-item-prefix} {
-  position: relative;
+@form-item-border-color: var(--td-form-item-border-color, @component-stroke);
+@form-item-border-left-space: var(--td-form-item-border-left-space, @form-item-vertical-padding);
+@form-item-border-right-space: var(--td-form-item-border-right-space, 0);
+
+.@{form-item} {
   display: flex;
-  align-items: flex-start;
-  justify-content: @form-item-justify-content;
-  width: 100%;
-  padding: @form-item-horizontal-padding @form-item-vertical-padding;
-  background-color: #ffffff;
-  --td-input-vertical-padding: 0rpx;
-  --td-textarea-vertical-padding: 0rpx;
-  --td-textarea-horizontal-padding: 0rpx;
   box-sizing: border-box;
-  &--top {
+  padding: @form-item-vertical-padding @form-item-horizontal-padding;
+  position: relative;
+
+  // 覆盖 slot 内子组件的 padding
+  --td-cell-vertical-padding: 0;
+  --td-cell-horizontal-padding: 0;
+  --td-input-vertical-padding: 0;
+  --td-textarea-padding: 0;
+
+  &:not(:last-child)::after {
+    .hairline-bottom(@form-item-border-color);
+
+    left: @form-item-border-left-space;
+    right: @form-item-border-right-space;
+  }
+
+  &-help,
+  &-extra {
     display: flex;
-    flex-direction: column;
+    font-size: @font-size-s;
+    margin: 0;
+    width: 100%;
+    height: auto;
+    min-height: 40rpx;
+    margin-top: 8rpx;
   }
 
-  &--bordered {
-    border-bottom: 1rpx solid @border-color;
+  &-help {
+    color: @text-color-disabled;
   }
 
   &--error {
-    .@{form-item-prefix}__error {
-      color: @error-color;
-    }
+    color: @error-color-6;
   }
 
-  &--success {
-    .@{form-item-prefix}__success {
-      color: @success-color;
-    }
+  &--warning {
+    color: @warning-color-5;
   }
 
-  &__label {
-    position: relative;
+  &-wrap {
+    width: 100%;
+    display: flex;
+  }
+
+  &--top {
     display: flex;
+    flex-direction: column;
+  }
+}
+
+.@{form} {
+  &--top {
     align-items: center;
-    width: @form-item-label-width;
-    margin-right: 16rpx;
-    font-size: @font-size-m;
+  }
 
+  &__label {
+    padding-right: 32rpx;
+    vertical-align: middle;
+    line-height: 48rpx;
     color: @text-color-primary;
-    line-height: 1.5;
+    box-sizing: border-box;
+    word-break: break-all;
 
-    &--required {
-      color: @error-color;
-      margin-right: 4rpx;
-    }
-
-    &--colon {
-      margin-left: 4rpx;
+    &--top {
+      padding-bottom: 16rpx;
     }
 
     &--left {
-      display: flex;
-      align-items: center;
-      justify-content: flex-start;
+      text-align: left;
     }
 
     &--right {
-      display: flex;
-      align-items: center;
-      justify-content: flex-end;
+      text-align: right;
     }
 
-    &--top {
-      position: relative;
-      // margin-bottom: 8rpx;
-      margin-right: 0;
-      width: 100%;
+    &--required:not(.@{form}__label--required-right) {
+      label::before {
+        display: inline;
+        margin-right: calc(@spacer / 2);
+        color: @error-color-6;
+        content: '*';
+      }
+    }
+
+    &--required-right {
+      label::after {
+        display: inline;
+        margin-left: calc(@spacer / 2);
+        color: @error-color-6;
+        content: '*';
+      }
+    }
+    &--colon {
+      label::after {
+        content: ':';
+        position: relative;
+        margin: 0 4rpx;
+      }
     }
   }
 
   &__controls {
     flex: 1;
-    width: 100%;
-    margin-top: 8rpx;
-
-    &--left {
-      text-align: left;
-    }
-
-    &--right {
-      text-align: right;
-    }
+    position: relative;
 
     &-content {
-      width: 100%;
       display: flex;
       align-items: center;
-      justify-content: space-between;
+      min-height: 48rpx;
     }
-  }
 
-  &__help {
-    // margin: 4rpx 0 8rpx;
-    font-size: @font-size-m;
-
-    color: @font-gray-1;
-    line-height: 1.4;
-  }
-
-  &__desc-link {
-    margin-top: 8rpx;
-    color: @primary-color-7;
-    font-size: @font-size-s;
-    line-height: 1.4;
-  }
-
-  &__error {
-    margin-top: 4rpx;
-    font-size: @font-size-s;
-    line-height: 1.4;
-
-    &--error {
-      color: @error-color;
+    &--left {
+      justify-content: flex-start;
     }
 
-    &--warning {
-      color: @warning-color;
+    &--right {
+      justify-content: flex-end;
     }
   }
-
-  &__success {
-    margin-top: 4rpx;
-    font-size: @font-size-s;
-    color: @success-color;
-    line-height: 1.4;
-  }
-
-  &__arrow {
-    display: flex;
-    align-items: center;
-    margin-left: 8rpx;
-    color: @text-color-placeholder;
-  }
-
-  &__extra {
-    margin-left: 16rpx;
-  }
-}
-
-.desc-wrapper {
-  display: flex;
-  align-items: center;
-  gap: 12rpx;
-  height: 50rpx;
-  --td-button-font-weight: 400;
-  // --td-button-extra-small-height: 38rpx;
 }