feat(input): [input,date-picker] adapt input date-picker to the old t…

…heme style (#2524) * feat: adapt input date-picker to the old theme style * feat: adapt input date-picker to the old theme style
opentiny · Nov 18, 2024 · 10c65c8 · 10c65c8
1 parent 60ad8c2
commit 10c65c8
Show file tree

Hide file tree

Showing 9 changed files with 56 additions and 69 deletions.
diff --git a/examples/sites/demos/apis/input.js b/examples/sites/demos/apis/input.js
@@ -129,7 +129,7 @@ export default {
           type: 'string',
           defaultValue: '',
           desc: {
-            'zh-CN': '设置只读态时的文本内容区，如果没有则会使用 modelVale 的值作为只读文本',
+            'zh-CN': '设置只读态时的文本内容区，如果没有则会使用 modelValue 的值作为只读文本',
             'en-US':
               "Sets the text content area in the read-only state, if not, modelVale's value is used as the read-only text"
           },
@@ -416,7 +416,7 @@ export default {
           type: "'medium' | 'small' | 'mini'",
           defaultValue: '',
           desc: {
-            'zh-CN': '输入框尺寸，只在 type!="textarea" 时有效',
+            'zh-CN': '输入框尺寸，只在 type 为 "textarea" 时有效',
             'en-US': 'Size of the text box. This parameter is valid only when type!="textarea". '
           },
           mode: ['pc', 'mobile-first'],

diff --git a/packages/theme-saas/src/picker/index.less b/packages/theme-saas/src/picker/index.less
@@ -22,6 +22,7 @@
       @apply fill-color-icon-primary;
     }
   }
+
   .@{input-prefix-cls}__icon-container {
     align-items: center;
     display: flex;
@@ -58,6 +59,11 @@
   .@{input-prefix-cls}__icon {
     @apply cursor-pointer;
 
+    .baseClearicon {
+      @apply mr-2;
+      @apply !transform-none;
+    }
+
     &:not(.@{range-prefix-cls}__icon) {
       @apply flex;
     }
@@ -106,15 +112,13 @@
     @apply absolute;
     @apply ~'right-1.5';
     @apply text-base;
-    @apply w-4;
+    width: 25px;
     float: right;
     @apply leading-8;
     @apply mr-5;
     @apply flex;
     @apply justify-center;
     @apply items-center;
-    @apply h-5;
-    @apply mr-6;
   }
 }
 

diff --git a/packages/theme/src/base/index.less b/packages/theme/src/base/index.less
@@ -12,4 +12,5 @@
 
 @import './reset.less';
 @import './vars.less';
+// @import './old-theme.less';
 @import './transition.less';
diff --git a/packages/theme/src/base/old-theme.less b/packages/theme/src/base/old-theme.less
@@ -411,9 +411,9 @@
   --tv-size-height-xs: 24px; // mini 尺寸
   --tv-size-height-sm: 28px; // small 尺寸
   --tv-size-height-md: 32px; // medium 尺寸 - 默认
-  --tv-size-height-lg: 40px; // large 尺寸
-  --tv-size-height-xl: 48px; //  xLarge 尺寸
-  --tv-size-height-default:var(--tv-size-height-sm);
+  --tv-size-height-lg: 36px; // large 尺寸
+  --tv-size-height-xl: 42px; //  xLarge 尺寸
+  --tv-size-height-default: var(--tv-size-height-sm);
 
   /** 7.2 图标大小 width, height **/
   --tv-icon-size: 14px;

diff --git a/packages/theme/src/input/index.less b/packages/theme/src/input/index.less
@@ -43,7 +43,6 @@
     .placeholder(@color: var(--tv-Input-placeholder-text-color));
 
     &.@{input-prefix-cls}__mask {
-      font-family: serif;
       color: #999;
     }
   }
@@ -149,8 +148,8 @@
   &__prefix,
   &__suffix {
     position: absolute;
-    top: var(--tv-Input-suffix-top);
-    transform: translateY(-50%);
+    top: 0;
+    height: 100%;
     transition: all 0.3s;
     text-align: center;
     color: var(--tv-Input-border-color);
@@ -204,13 +203,15 @@
     line-height: var(--tv-Input-height);
     text-align: center;
     transition: all 0.3s;
-    font-size: var(--tv-Input-icon-font-size);
-    fill: var(--tv-Input-icon-color);
-    width: var(--tv-Input-suffix-icon-width);
-    height: var(--tv-Input-suffix-icon-height);
 
-    &:hover {
-      fill: var(--tv-Input-icon-active-border-color);
+    svg {
+      fill: var(--tv-Input-icon-color);
+      width: var(--tv-Input-suffix-icon-width);
+      height: var(--tv-Input-suffix-icon-height);
+
+      &:hover {
+        fill: var(--tv-Input-icon-active-border-color);
+      }
     }
 
     &:after {
@@ -236,6 +237,7 @@
     padding-right: var(--tv-Input-prefix-padding-right);
   }
 
+  // 输入字数统计
   &-word-limit &__inner {
     padding-right: 56px;
     padding-left: 8px;
@@ -248,33 +250,25 @@
 
   &-medium {
     .input-size(var(--tv-Input-medium-height));
-    .@{input-prefix-cls}__suffix {
-      top: var(--tv-Input-suffix-top-medium);
-    }
   }
 
   &-small {
     .input-size(var(--tv-Input-small-height));
-    font-size: var(--tv-Input-small-font-size);
+
     .@{input-prefix-cls}__inner {
       font-size: var(--tv-Input-small-font-size);
     }
-    .@{input-prefix-cls}__suffix {
-      top: var(--tv-Input-suffix-top-small);
-    }
   }
 
   &-mini {
     .input-size(var(--tv-Input-mini-height));
-    font-size: var(--tv-Input-small-font-size);
+
     .@{input-prefix-cls}__inner {
       font-size: var(--tv-Input-small-font-size);
     }
-    .@{input-prefix-cls}__suffix {
-      top: var(--tv-Input-suffix-top-mini);
-    }
   }
 
+  // 只读模式
   &.is-display-only {
     .@{input-prefix-cls}-display-only {
       position: relative;
@@ -323,6 +317,7 @@
     }
   }
 
+  // 下边框模式
   &.tiny-input-underline {
     .tiny-input__inner {
       border-radius: 0;

diff --git a/packages/theme/src/input/vars.less b/packages/theme/src/input/vars.less
@@ -36,14 +36,6 @@
   --tv-Input-icon-color-hover: var(--tv-color-icon-hover);
   // 输入框聚焦时icon颜色
   --tv-Input-focus-icon-color: var(--tv-color-icon-active);
-  // suffix元素的顶部高度
-  --tv-Input-suffix-top: 16px;
-  // 中尺寸 suffix元素的顶部高度
-  --tv-Input-suffix-top-medium: 20px;
-  // 小尺寸 suffix元素的顶部高度
-  --tv-Input-suffix-top-small: 16px;
-  // 迷你 suffix元素的顶部高度
-  --tv-Input-suffix-top-mini: 12px;
   // suffix图标颜色
   --tv-Input-suffix-icon-color: var(--tv-color-icon);
   // 输入框占位符文本颜色
@@ -62,8 +54,8 @@
   --tv-Input-disabled-border-color: var(--tv-color-border-disabled);
   // 输入框exceed时的文本颜色
   --tv-Input-exceed-text-color: var(--tv-color-error-text);
-  // 输入框的icon图标的字体大小
-  --tv-Input-icon-font-size: var(--tv-font-size-l);
+  // 输入框的icon图标的大小
+  --tv-Input-icon-font-size: var(--tv-icon-size);
   // 输入框计数器的颜色
   --tv-Input-count-font-color: var(--tv-color-text-weaken);
   // 输入框垂直方向内边距

diff --git a/packages/theme/src/picker/index.less b/packages/theme/src/picker/index.less
@@ -83,10 +83,6 @@
       }
     }
 
-    .@{range-prefix-cls}__icon {
-      margin-top: -1px;
-    }
-
     .@{range-prefix-cls}-input,
     .@{range-prefix-cls}-separator {
       font-size: var(--tv-Picker-font-size);
@@ -115,20 +111,27 @@
     }
 
     .@{range-prefix-cls}__close-icon {
-      width: 16px;
-      height: 16px;
       position: absolute;
-      top: 16px;
       right: 12px;
-      transform: translateY(-50%);
-      background-color: #ffffff;
-      fill: var(--tv-Picker-icon-color);
-      z-index: 5;
-
-      &:hover {
-        fill: var(--tv-Picker-icon-color-hover);
+      display: flex;
+      align-items: center;
+      height: 100%;
+
+      svg {
+        width: var(--tv-Picker-icon-size);
+        height: var(--tv-Picker-icon-size);
+        cursor: pointer;
+        fill: var(--tv-Picker-icon-color);
+
+        &:hover {
+          fill: var(--tv-Picker-icon-color-hover);
+        }
       }
     }
+
+    .@{range-prefix-cls}__close-icon:has(> svg) + .@{range-prefix-cls}__icon {
+      display: none;
+    }
   }
 }
 
@@ -229,7 +232,7 @@
 
 .@{range-editor-prefix-cls}.is-display-only {
   position: relative;
-  border-width: 0px;
+  border-width: 0;
 
   & > *:not(.@{range-editor-prefix-cls}-display-only) {
     visibility: hidden;

diff --git a/packages/theme/src/transition/icon.less b/packages/theme/src/transition/icon.less
@@ -31,15 +31,15 @@
 
 @keyframes bounce-in {
   0% {
-    transform: translateY(-50%) scale(0);
+    transform: scale(0);
   }
 
   50% {
-    transform: translateY(-50%) scale(1.2);
+    transform: scale(1.2);
   }
 
   100% {
-    transform: translateY(-50%) scale(1);
+    transform: scale(1);
   }
 }
 

diff --git a/packages/vue/src/picker/src/pc.vue b/packages/vue/src/picker/src/pc.vue
@@ -118,21 +118,13 @@
         @focus="handleFocus"
         class="tiny-range-input"
       />
-      <i class="tiny-input__icon tiny-input__icon">
+      <i @click="handleClickIcon" v-if="state.haveTrigger" class="tiny-input__icon tiny-range__close-icon">
         <transition name="tiny-transition-icon-scale-in">
-          <div v-if="state.haveTrigger">
-            <component
-              :is="state.showClose ? clearIcon : null"
-              @click="handleClickIcon"
-              class="tiny-range__close-icon"
-            />
-          </div>
+          <component :is="state.showClose ? clearIcon : null" />
         </transition>
-        <component
-          v-if="!state.isDisplayOnly"
-          :is="state.triggerClass"
-          class="tiny-input__icon tiny-range__icon tiny-input__suffix"
-        />
+      </i>
+      <i v-if="!state.isDisplayOnly" class="tiny-input__icon tiny-range__icon tiny-input__suffix">
+        <component :is="state.triggerClass" />
       </i>
       <tiny-tooltip
         class="tiny-range-editor-display-only"