Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(input): [input,date-picker] adapt input date-picker to the old theme style #2524

Merged
merged 2 commits into from
Nov 18, 2024
Merged

feat(input): [input,date-picker] adapt input date-picker to the old theme style #2524

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
500302f
feat: adapt input date-picker to the old theme style
zzcr Nov 14, 2024
8e5b120
feat: adapt input date-picker to the old theme style
zzcr Nov 15, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions examples/sites/demos/apis/input.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
},
Expand Down Expand Up @@ -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'],
Expand Down
10 changes: 7 additions & 3 deletions packages/theme-saas/src/picker/index.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@
@apply fill-color-icon-primary;
}
}

.@{input-prefix-cls}__icon-container {
align-items: center;
display: flex;
Expand Down Expand Up @@ -58,6 +59,11 @@
.@{input-prefix-cls}__icon {
@apply cursor-pointer;

.baseClearicon {
@apply mr-2;
@apply !transform-none;
}

Comment on lines +62 to +66
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Codebase verification

The !transform-none override appears unnecessary

The codebase search shows that there's no default transform being applied to .baseClearicon that would need to be overridden. The only transform found in the picker components is for positioning text elements (transform: translateY(-50%)), which is unrelated to the clear icon. The !transform-none declaration can be safely removed as it's overriding a non-existent transform.

🔗 Analysis chain

Verify the necessity of transform override.

While the margin adjustment improves spacing, the use of !transform-none suggests overriding a previous transform. Please verify if this override is necessary or if the original transform can be removed from the source.

🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Search for any transform properties applied to .baseClearicon
rg -l "transform" --type less
rg "\.baseClearicon.*transform" --type less

Length of output: 6152

Script:

#!/bin/bash
# Let's check the picker/index.less files in both theme packages for any transform styles
cat packages/theme-saas/src/picker/index.less packages/theme/src/picker/index.less | rg -A 2 -B 2 "transform|\.baseClearicon"

Length of output: 535

&:not(.@{range-prefix-cls}__icon) {
@apply flex;
}
Expand Down Expand Up @@ -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;
}
Comment on lines +115 to 122
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

Consider removing float when using flexbox.

The current implementation mixes flexbox (display: flex, justify-center, items-center) with float positioning (float: right). This combination can lead to unpredictable layout behavior. Consider:

  1. Removing the float property since flexbox provides better control
  2. Using relative units (em/rem) instead of fixed pixel width for better responsiveness
.@{range-prefix-cls}__close-icon {
  @apply absolute;
  @apply ~'right-1.5';
  @apply text-base;
-  width: 25px;
-  float: right;
+  width: 1.5625rem; /* 25px converted to rem */
  @apply leading-8;
  @apply mr-5;
  @apply flex;
  @apply justify-center;
  @apply items-center;
}
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
width: 25px;
float: right;
@apply leading-8;
@apply mr-5;
@apply flex;
@apply justify-center;
@apply items-center;
@apply h-5;
@apply mr-6;
}
width: 1.5625rem; /* 25px converted to rem */
@apply leading-8;
@apply mr-5;
@apply flex;
@apply justify-center;
@apply items-center;
}

}

Expand Down
1 change: 1 addition & 0 deletions packages/theme/src/base/index.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,4 +12,5 @@

@import './reset.less';
@import './vars.less';
// @import './old-theme.less';
@import './transition.less';
6 changes: 3 additions & 3 deletions packages/theme/src/base/old-theme.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
35 changes: 15 additions & 20 deletions packages/theme/src/input/index.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,6 @@
.placeholder(@color: var(--tv-Input-placeholder-text-color));

&.@{input-prefix-cls}__mask {
font-family: serif;
color: #999;
}
}
Expand Down Expand Up @@ -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);
Expand Down Expand Up @@ -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 {
Expand All @@ -236,6 +237,7 @@
padding-right: var(--tv-Input-prefix-padding-right);
}

// 输入字数统计
&-word-limit &__inner {
padding-right: 56px;
padding-left: 8px;
Expand All @@ -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;
Expand Down Expand Up @@ -323,6 +317,7 @@
}
}

// 下边框模式
&.tiny-input-underline {
.tiny-input__inner {
border-radius: 0;
Expand Down
12 changes: 2 additions & 10 deletions packages/theme/src/input/vars.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
// 输入框占位符文本颜色
Expand All @@ -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);
// 输入框垂直方向内边距
Expand Down
33 changes: 18 additions & 15 deletions packages/theme/src/picker/index.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down Expand Up @@ -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;
}
}
}

Expand Down Expand Up @@ -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;
Expand Down
6 changes: 3 additions & 3 deletions packages/theme/src/transition/icon.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}
}

Expand Down
18 changes: 5 additions & 13 deletions packages/vue/src/picker/src/pc.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
Loading