feat: adapt input date-picker to the old theme style

opentiny · Nov 15, 2024 · 8e5b120 · 8e5b120
1 parent 500302f
commit 8e5b120
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 20 deletions.
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/picker/index.less b/packages/theme/src/picker/index.less
@@ -111,19 +111,27 @@
     }
 
     .@{range-prefix-cls}__close-icon {
-      width: 16px;
-      height: 16px;
-      cursor: pointer;
-      fill: var(--tv-Picker-icon-color);
+      position: absolute;
+      right: 12px;
+      display: flex;
+      align-items: center;
+      height: 100%;
 
-      & + .@{range-prefix-cls}__icon {
-        display: none;
-      }
+      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);
+        &:hover {
+          fill: var(--tv-Picker-icon-color-hover);
+        }
       }
     }
+
+    .@{range-prefix-cls}__close-icon:has(> svg) + .@{range-prefix-cls}__icon {
+      display: none;
+    }
   }
 }
 

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