Skip to content

fix(grid,dropdown,select, pager,tooltip):fix the saas theme #3347

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

Merged
merged 1 commit into from
Apr 25, 2025
Merged

fix(grid,dropdown,select, pager,tooltip):fix the saas theme #3347

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
1 change: 1 addition & 0 deletions packages/theme-saas/src/grid/header.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -77,6 +77,7 @@

.@{grid-prefix-cls}-cell-text {
@apply w-full;
line-height: 1.375rem;
}

.@{grid-prefix-cls}-edit-icon {
Expand Down
2 changes: 1 addition & 1 deletion packages/theme-saas/src/grid/mixins/table.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@
&:not(.col__actived) {
.@{grid-cell-prefix-cls} {
.TextEllipsis();
@apply leading-normal;
line-height: 1.375rem;
// 表头布局从block改为了flex，此处兼容插槽文本溢出不显示省略号问题
&:not(:has(.tiny-grid-cell-text)) > span:only-of-type:not(.@{grid-cell-prefix}__expanded) {
@apply text-ellipsis;
Expand Down
1 change: 0 additions & 1 deletion packages/theme/src/checkbox/index.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -111,7 +111,6 @@
padding-left: 8px;
font-size: var(--tv-Checkbox-font-size);
font-weight: var(--tv-Checkbox-font-weight);
padding-top: 3px;
}

&.is-display-only {
Expand Down
9 changes: 4 additions & 5 deletions packages/theme/src/date-panel/index.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -158,7 +158,6 @@

// 时区选择
&__timezone {
margin-bottom: 8px;
padding: 8px 0;

.@{picker-panel-prefix-cls}__tzlist {
Expand All @@ -169,11 +168,11 @@
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
padding: var(--tv-DatePanel-timezone-li-padding);
padding: var(--tv-DatePanel-timezone-li-padding, 5.5px 16px);
cursor: pointer;

&:hover {
background-color: var(--tv-DatePanel-bg-color-hover);
background-color: var(--tv-DatePanel-bg-color-hover, #f5f5f5);
}
}

Expand All @@ -182,8 +181,8 @@
width: 238px;
bottom: 77px;
max-height: 260px;
box-shadow: var(--tv-DatePanel-box-shadow);
background-color: var(--tv-DatePanel-bg-color);
box-shadow: var(--tv-DatePanel-box-shadow, 0 4px 16px 0 rgba(0, 0, 0, 0.08));
background-color: var(--tv-DatePanel-bg-color, #fff);
}
}

Expand Down
7 changes: 4 additions & 3 deletions packages/theme/src/dropdown-item/index.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,9 +35,10 @@

&[class*='tiny-'] {
padding: var(--tv-DropdownItem-padding);
margin-bottom: var(--tv-DropdownItem-margin-y);

&:last-of-type {
margin-bottom: 0px;
margin-bottom: 0;
}
}

Expand All @@ -49,9 +50,9 @@
&:before {
content: '';
content: '';
height: 0px;
height: 0;
display: block;
margin: 0px;
margin: 0;
}

&__wrap {
Expand Down
4 changes: 3 additions & 1 deletion packages/theme/src/dropdown-item/vars.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,9 @@
--tv-DropdownItem-icon-color-disabled: var(--tv-color-icon-disabled, #c2c2c2);

// 菜单项内边距
--tv-DropdownItem-padding: 0px var(--tv-space-xl, 16px);
--tv-DropdownItem-padding: 0 var(--tv-space-xl, 16px);
// 菜单项下边距
--tv-DropdownItem-margin-y: var(--tv-space-sm, 4px);
// 展开图标的水平外边距
--tv-DropdownItem-expand-margin-x: var(--tv-space-md, 8px);
// 自定义图标的水平外边距
Expand Down
2 changes: 1 addition & 1 deletion packages/theme/src/svgs/checked-sur.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 1 addition & 1 deletion packages/theme/src/svgs/halfselect.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 1 addition & 1 deletion packages/vue/src/base-select/src/token.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
export const classes = {
'caret': 'text-base rotate-0 transition-transform duration-300 fill-color-text-placeholder cursor-pointer ',
'select-tags':
'absolute leading-normal whitespace-normal sm:pl-3 pr-2 z-[1] top-1/2 -translate-y-2/4 flex items-center flex-wrap [&_[data-tag=tiny-tag]]:my-0.5 [&_[data-tag=tiny-tag]]:h-7 [&_[data-tag=tiny-tag]]:text-sm [&_[data-tag=tiny-tag]]:sm:h-5 [&_[data-tag=tiny-tag]]:sm:text-sm [&_[data-tag=tiny-tag]_svg]:shrink-0',
'absolute leading-normal whitespace-normal sm:pl-3 pr-2 z-[1] top-1/2 -translate-y-2/4 flex items-center flex-wrap [&_[data-tag=tiny-tag]]:my-0.5 [&_[data-tag=tiny-tag]]:h-7 [&_[data-tag=tiny-tag]]:sm:h-5 [&_[data-tag=tiny-tag]_svg]:shrink-0',
'tags-text': 'inline-block w-full whitespace-nowrap text-ellipsis overflow-hidden align-bottom',
'tag-info':
'whitespace-nowrap text-ellipsis overflow-hidden inline-flex justify-start items-center border-transparent text-color-text-primary'
Expand Down
4 changes: 3 additions & 1 deletion packages/vue/src/date-panel/src/mobile-first.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -165,6 +165,7 @@

<div
data-tag="tiny-picker-panel__timezone"
class="tiny-picker-panel__timezone"
v-if="state.isShowTz || state.timezone.isServiceTimezone"
v-clickoutside="handleTzPickClose"
>
Expand All @@ -178,7 +179,7 @@
<component fill="#ccc" :is="state.showpopup ? 'IconChevronDown' : 'IconChevronUp'" @click="toggleTz" />
</template>
</tiny-input>
<div data-tag="tiny-picker-panel__tzlist">
<div data-tag="tiny-picker-panel__tzlist" class="tiny-picker-panel__tzlist">
<tiny-popup
v-model="state.showpopup"
:overlay="false"
Expand All @@ -191,6 +192,7 @@
<ul>
<li
data-tag="tiny-picker-panel__tzlist-li"
class="tiny-picker-panel__tzlist-li"
:title="tz.name"
v-show="!tz.visible"
v-for="(tz, index) in state.renderTzdata"
Expand Down
8 changes: 4 additions & 4 deletions packages/vue/src/option/src/mobile-first.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
:class="
m(
'h-fit flex items-center justify-between rounded text-color-text-primary text-sm sm:text-xs',
'min-h-[40px] sm:min-h-[32px] cursor-pointer group sm:hover:bg-color-bg-4 sm:active:bg-color-bg-3 pl-0 pr-3 sm:px-3 my-1 sm:m-1',
'min-h-[40px] sm:min-h-[32px] cursor-pointer group sm:hover:bg-color-bg-4 sm:active:bg-color-bg-3 pl-0 pr-3 sm:px-2 my-1 sm:m-1',
{
'text-color-brand bg-color-bg-1 sm:bg-color-fill-6': state.itemSelected && !disabled,
'text-color-text-disabled cursor-not-allowed [&_svg]:fill-color-icon-disabled [&_svg_path:first-of-type]:fill-color-bg-3':
Expand All @@ -26,9 +26,9 @@
<component
:is="`icon-${state.selectCls}`"
:class="
m('fill-color-icon-secondary relative', {
m('fill-color-icon-secondary relative w-3.5 h-3.5', {
'group-hover:fill-color-brand-hover': state.hover,
'fill-color-brand': state.itemSelected,
'fill-color-brand text-color-brand': state.itemSelected,
'fill-color-brand-disabled': state.itemSelected && required
})
"
Expand All @@ -45,7 +45,7 @@
v-if="!state.selectMultiple && state.itemSelected && !disabled && !state.groupDisabled"
class="inline-block sm:hidden w-4 ml-4 shrink-0"
>
<icon-finish custom-class="w-4 h-4 fill-color-brand"> </icon-finish
<icon-finish custom-class="w-3.5 h-3.5 fill-color-brand"> </icon-finish
Copy link

Choose a reason for hiding this comment

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

Ensure that the icon-finish component is correctly rendered with the updated class w-3.5 h-3.5. This change might affect the visual appearance of the icon, so verify it in the UI.

></span>
</div>
</template>
Expand Down
24 changes: 12 additions & 12 deletions packages/vue/src/pager/src/mobile-first.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -96,15 +96,15 @@ export default defineComponent({
<ul class="inline-flex m-0 p-0 list-none w-fit">
<li
class={[
'py-0 px-0 cursor-pointer box-border h-8 text-color-brand bg-color-bg-1 select-none flex items-center justify-center relative rounded',
prevText ? 'w-fit' : 'w-8'
'py-0 px-0 cursor-pointer box-border h-7 text-color-brand bg-color-bg-1 select-none flex items-center justify-center relative rounded',
prevText ? 'w-fit' : 'w-7'
]}>
<button
type="button"
class={[
'h-8 p-0 border border-solid rounded flex items-center justify-center group',
'h-7 p-0 border border-solid rounded flex items-center justify-center group',
'cursor-pointer border-color-border bg-color-bg-1 sm:bg-transparent sm:border-0',
prevText ? 'w-fit' : 'w-8',
prevText ? 'w-fit' : 'w-7',
{
'disabled:cursor-not-allowed disabled:border-color-border disabled:bg-color-bg-3 disabled:sm:bg-transparent':
prevDisabled,
Expand All @@ -117,7 +117,7 @@ export default defineComponent({
{prevText ? (
<span
class={[
'inline-block w-fit mx-1 text-color-text-placeholder sm:text-color-primary',
'inline-block w-fit mx-1 text-color-text-placeholder sm:text-color-primary text-xs',
{
'disabled:text-color-text-primary sm:text-color-border': prevDisabled,
'group-hover:text-color-link sm:group-hover:text-color-icon-hover sm:group-active:text-color-active':
Expand All @@ -140,22 +140,22 @@ export default defineComponent({
)}
</button>
</li>
<li class="h-8 text-color-text-primary flex items-center justify-center rounded !mx-4">
<span class="inline-block my-0 mx-0">
<li class="h-7 text-color-text-primary flex items-center justify-center rounded !mx-4">
<span class="inline-block my-0 mx-0 leading-5 text-xs">
{this.internalCurrentPage}/{this.internalPageCount}
</span>
</li>
<li
class={[
'py-0 px-0 cursor-pointer box-border h-8 text-color-brand bg-color-bg-1 select-none flex items-center justify-center relative rounded',
nextText ? 'w-fit' : 'w-8'
'py-0 px-0 cursor-pointer box-border h-7 text-color-brand bg-color-bg-1 select-none flex items-center justify-center relative rounded',
nextText ? 'w-fit' : 'w-7'
]}>
<button
type="button"
class={[
'h-8 p-0 border border-solid rounded flex items-center justify-center group',
'h-7 p-0 border border-solid rounded flex items-center justify-center group',
'cursor-pointer border-color-border bg-color-bg-1 sm:bg-transparent sm:border-0',
nextText ? 'w-fit' : 'w-8',
nextText ? 'w-fit' : 'w-7',
{
'disabled:cursor-not-allowed disabled:border-color-border disabled:bg-color-bg-3 disabled:sm:bg-transparent':
nextDisabled,
Expand All @@ -169,7 +169,7 @@ export default defineComponent({
{nextText ? (
<span
class={[
'inline-block w-fit mx-1 text-color-text-placeholder sm:text-color-primary',
'inline-block w-fit mx-1 text-color-text-placeholder sm:text-color-primary text-xs',
{
'disabled:text-color-text-primary disabled:sm:text-color-border': nextDisabled,
'group-hover:fill-color-brand sm:group-hover:fill-color-icon-hover sm:group-active:fill-color-icon-active':
Expand Down
6 changes: 3 additions & 3 deletions packages/vue/src/select/src/mobile-first.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -436,7 +436,7 @@
<slot name="dropdown"></slot>
<div
v-if="multiple && showCheck && showAlloption && !state.multipleLimit && !state.query && !remote"
class="whitespace-nowrap box-border py-0 h-10 leading-10 sm:h-8 sm:leading-8 text-sm sm:text-xs pl-0 pr-3 sm:px-3 my-1 sm:m-1 rounded cursor-pointer"
class="whitespace-nowrap box-border py-0 h-10 leading-10 sm:h-8 sm:leading-8 text-sm sm:text-xs pl-0 pr-3 sm:px-2 my-1 sm:m-1 rounded cursor-pointer"
:class="[
{
hover: state.hoverIndex === -9 && state.selectCls !== 'checked-sur'
Expand All @@ -451,7 +451,7 @@
<component
:is="`icon-${state.selectCls}`"
:class="
m(['-mt-0.5 mr-2 fill-color-icon-secondary', state.selectCls !== 'check' && 'fill-color-brand'])
m(['-mt-0.5 mr-2 fill-color-icon-secondary w-3.5 h-3.5 ', state.selectCls !== 'check' && 'fill-color-brand text-color-brand'])
"
/>
<span :class="[state.selectCls === 'checked-sur' ? 'text-color-brand' : 'text-color-text-primary']">
Expand All @@ -469,7 +469,7 @@
!state.emptyText &&
!remote
"
class="whitespace-nowrap box-border py-0 h-10 leading-10 sm:h-8 sm:leading-8 text-sm sm:text-xs pl-0 pr-3 sm:px-3 my-1 sm:m-1 rounded cursor-pointer"
class="whitespace-nowrap box-border py-0 h-10 leading-10 sm:h-8 sm:leading-8 text-sm sm:text-xs pl-0 pr-3 sm:px-2 my-1 sm:m-1 rounded cursor-pointer"
:class="[
{
hover: state.hoverIndex === -9 && state.filteredSelectCls !== 'checked-sur'
Expand Down
2 changes: 1 addition & 1 deletion packages/vue/src/select/src/token.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
export const classes = {
'caret': 'text-base rotate-0 transition-transform duration-300 fill-color-text-placeholder cursor-pointer ',
'select-tags':
'absolute leading-normal whitespace-normal sm:pl-3 pr-2 z-[1] top-1/2 -translate-y-2/4 flex items-center flex-wrap [&_[data-tag=tiny-tag]]:my-0.5 [&_[data-tag=tiny-tag]]:h-7 [&_[data-tag=tiny-tag]]:text-sm [&_[data-tag=tiny-tag]]:sm:h-5 [&_[data-tag=tiny-tag]]:sm:text-sm [&_[data-tag=tiny-tag]_svg]:shrink-0',
'absolute leading-normal whitespace-normal sm:pl-3 pr-2 z-[1] top-1/2 -translate-y-2/4 flex items-center flex-wrap [&_[data-tag=tiny-tag]]:my-0.5 [&_[data-tag=tiny-tag]]:h-7 [&_[data-tag=tiny-tag]]:sm:h-5 [&_[data-tag=tiny-tag]_svg]:shrink-0',
'tags-text': 'inline-block w-full whitespace-nowrap text-ellipsis overflow-hidden align-bottom',
'tag-info':
'whitespace-nowrap text-ellipsis overflow-hidden inline-flex justify-start items-center border-transparent text-color-text-primary'
Expand Down
2 changes: 1 addition & 1 deletion packages/vue/src/tag/src/mobile-first.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,7 @@ export default defineComponent({
const operable = selectable ? false : this.operable

const classes = m(
'text-xs inline-flex items-center rounded box-border border-0.5 sm:border mr-2',
'text-xs inline-flex items-center rounded box-border border-0.5 sm:border mr-1',
effect === 'plain' || hit ? gcls(`${type}-border`) : 'border-transparent',
gcls(`${effect}-${type}`),
gcls(size),
Expand Down
4 changes: 2 additions & 2 deletions packages/vue/src/tag/src/token.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ export const classes = {
'light-warning': 'text-color-warning bg-color-warning-subtler',
'light-error': 'text-color-error bg-color-error-subtler',
'light-default': 'text-color-info-primary bg-color-info-primary-subtler',
'light-info': 'text-color-text-primary bg-color-bg-2',
'light-info': 'text-color-text-primary bg-color-bg-3',
'light-pink': 'text-color-chart-17 bg-color-chart-17-subtler',
'light-purple': 'text-color-chart-11 bg-color-chart-11-subtler',
'light-cyan': 'text-color-chart-2 bg-color-chart-2-subtler',
Expand Down Expand Up @@ -48,7 +48,7 @@ export const classes = {
'fill-light-warning': 'fill-color-warning-subtle hover:fill-color-warning',
'fill-light-error': 'fill-color-error-subtle hover:fill-color-error',
'fill-light-default': 'fill-color-info-primary-subtle hover:fill-color-info-primary',
'fill-light-info': 'fill-color-none hover:fill-color-none',
'fill-light-info': 'fill-color-icon-secondary hover:fill-color-icon-secondary',
'fill-light-pink': 'fill-color-chart-17-subtle hover:fill-color-chart-17',
'fill-light-purple': 'fill-color-chart-11-subtle hover:fill-color-chart-11',
'fill-light-cyan': 'fill-color-chart-2-subtle hover:fill-color-chart-2',
Expand Down
2 changes: 1 addition & 1 deletion packages/vue/src/tooltip/src/mobile-first.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -166,7 +166,7 @@ export default defineComponent({
onMouseenter={() => mouseenter()}
onMouseleave={() => mouseleave()}>
{addWrapper ? (
<div style={`overflow:auto;max-height:${this.contentMaxHeight}`}>{content}</div>
<div class={`leading-5`} style={`overflow:auto;max-height:${this.contentMaxHeight}`}>{content}</div>
) : (
content
)}
Expand Down
Loading