diff --git a/examples/sites/demos/pc/app/action-menu/icon-composition-api.vue b/examples/sites/demos/pc/app/action-menu/icon-composition-api.vue index c1b1c23cb..ad229b314 100644 --- a/examples/sites/demos/pc/app/action-menu/icon-composition-api.vue +++ b/examples/sites/demos/pc/app/action-menu/icon-composition-api.vue @@ -6,10 +6,14 @@ :options="options" :suffix-icon="tinyIconEllipsis" more-text="" - spacing="12px" + spacing="8px" :max-show-num="3" > +
+ + +

场景2:只显示文本

@@ -18,12 +22,12 @@ diff --git a/examples/sites/demos/pc/app/dropdown/visible-arrow.vue b/examples/sites/demos/pc/app/dropdown/visible-arrow.vue index e72093947..2c72ae1a8 100644 --- a/examples/sites/demos/pc/app/dropdown/visible-arrow.vue +++ b/examples/sites/demos/pc/app/dropdown/visible-arrow.vue @@ -1,26 +1,35 @@ diff --git a/packages/design/smb/src/action-menu/index.ts b/packages/design/smb/src/action-menu/index.ts index c7f87dc12..6f8bad07c 100644 --- a/packages/design/smb/src/action-menu/index.ts +++ b/packages/design/smb/src/action-menu/index.ts @@ -1,3 +1,5 @@ export default { - icons: {} + props: { + spacing: '8px' + } } diff --git a/packages/renderless/src/action-menu/index.ts b/packages/renderless/src/action-menu/index.ts index e0a975b4e..75482a5ad 100644 --- a/packages/renderless/src/action-menu/index.ts +++ b/packages/renderless/src/action-menu/index.ts @@ -26,7 +26,7 @@ export const computedMaxShowNum = } export const computedSpacing = - ({ props, state }: Pick) => + ({ props, state, designConfig }: Pick) => (): string => { if (props.spacing !== undefined) { return String(props.spacing).includes('px') ? props.spacing : props.spacing + 'px' @@ -34,7 +34,7 @@ export const computedSpacing = if (state.isCardMode) { return '10px' } else { - return '5px' + return designConfig?.props.spacing || '5px' } } diff --git a/packages/renderless/src/action-menu/vue.ts b/packages/renderless/src/action-menu/vue.ts index 2b8f041e2..c960e8386 100644 --- a/packages/renderless/src/action-menu/vue.ts +++ b/packages/renderless/src/action-menu/vue.ts @@ -32,7 +32,7 @@ export const api = ['state', 'handleMoreClick', 'handleItemClick', 'visibleChang export const renderless = ( props: IActionMenuProps, { computed, reactive }: ISharedRenderlessParamHooks, - { emit, t }: IActionMenuRenderlessParamUtils + { emit, t, designConfig }: IActionMenuRenderlessParamUtils ): IActionMenuApi => { const api = {} as IActionMenuApi @@ -52,7 +52,7 @@ export const renderless = ( handleItemClick: handleItemClick(emit), visibleChange: visibleChange(emit), computedMaxShowNum: computedMaxShowNum({ props, state }), - computedSpacing: computedSpacing({ props, state }), + computedSpacing: computedSpacing({ props, state, designConfig }), computedMoreText: computedMoreText({ props, state, t }), computedSuffixIcon: computedSuffixIcon({ props, state }) }) diff --git a/packages/theme/src/action-menu/index.less b/packages/theme/src/action-menu/index.less index 390b281b9..5dca7326f 100644 --- a/packages/theme/src/action-menu/index.less +++ b/packages/theme/src/action-menu/index.less @@ -75,11 +75,15 @@ &.@{action-menu-prefix-cls}__item-visable { .@{dropdown-item-prefix-cls} { background-color: var(--ti-action-menu-item-hover-bg-color); - } - } - .tiny-svg { - fill: var(--ti-action-menu-item-hover-text-color); // TINY-TODO :没有使用--ti-base-color-brand-8的图标色 + > .tiny-dropdown-item__wrap { + > .tiny-dropdown-item__content { + .tiny-svg { + fill: var(--ti-action-menu-item-hover-icon-color); + } + } + } + } } } diff --git a/packages/theme/src/action-menu/smb-theme.js b/packages/theme/src/action-menu/smb-theme.js index eef6e1884..d95fc1998 100644 --- a/packages/theme/src/action-menu/smb-theme.js +++ b/packages/theme/src/action-menu/smb-theme.js @@ -3,13 +3,13 @@ export const tinyActionMenuSmbTheme = { 'ti-dropdown-item-font-size': 'var(--ti-common-font-size-1)', 'ti-dropdown-item-line-height': 'var(--ti-common-line-height-2)', 'ti-action-menu-item-svg-margin-top': '0', - 'ti-action-menu-font-weight': 'var(--ti-common-font-weight-bold)', + 'ti-action-menu-font-weight': 'var(--ti-common-font-weight-normal)', 'ti-action-menu-item-hover-text-color': 'var(--ti-common-color-text-link)', 'ti-action-menu-item-line-width': 'var(--ti-common-space-0)', 'ti-action-menu-hover-text-decoratio': 'underline', 'ti-dropdown-line-height': 'calc(var(--ti-common-line-height-4) + 2px)', - 'ti-action-menu-more-icon-width': 'var(--ti-common-size-5x)', - 'ti-action-menu-more-icon-height': 'var(--ti-common-size-5x)', + 'ti-action-menu-more-icon-width': 'var(--ti-common-size-4x)', + 'ti-action-menu-more-icon-height': 'var(--ti-common-size-4x)', 'ti-action-menu-item-card-text-color': 'var(--ti-common-color-text-primary)', 'ti-action-menu-item-card-hover-text-color': 'var(--ti-common-color-text-primary)' } diff --git a/packages/theme/src/action-menu/vars.less b/packages/theme/src/action-menu/vars.less index a0a1981bb..cab6225d9 100644 --- a/packages/theme/src/action-menu/vars.less +++ b/packages/theme/src/action-menu/vars.less @@ -35,6 +35,8 @@ --ti-action-menu-item-hover-bg-color: var(--ti-common-color-transparent, transparent); // 下拉菜单项文本悬浮色 --ti-action-menu-item-hover-text-color: var(--ti-common-color-text-link-hover, #344899); + // 下拉菜单项图标悬浮色 + --ti-action-menu-item-hover-icon-color: var(--ti-common-color-text-link-hover, #344899); // 没有这个颜色的图标色 // 下拉菜单项顶部内边距 --ti-action-menu-item-padding-top: var(--ti-common-space-0, 0px); // 下拉菜单项右侧内边距 @@ -44,7 +46,7 @@ // 下拉菜单项右侧内边距 --ti-action-menu-item-padding-left: var(--ti-common-space-0, 0px); // 下拉菜单项图标顶部内边距 - --ti-action-menu-item-svg-margin-top: -2px; + --ti-action-menu-item-svg-margin-top: var(--ti-common-space-0, 0px); // 下拉菜单项图标右侧内边距 --ti-action-menu-item-svg-margin-right: var(--ti-common-space-base, 4px); // 下拉菜单项图标底部部内边距 diff --git a/packages/theme/src/dropdown-item/aurora-theme.js b/packages/theme/src/dropdown-item/aurora-theme.js index 8bb83c6ea..4951b2ccc 100644 --- a/packages/theme/src/dropdown-item/aurora-theme.js +++ b/packages/theme/src/dropdown-item/aurora-theme.js @@ -1,6 +1,6 @@ export const tinyDropdownItemAuroraTheme = { 'ti-dropdown-item-height': '32px', - 'ti-dropdown-item-font-size': '14px', + 'ti-dropdown-item-font-size': 'var(--ti-common-font-size-base)', 'ti-dropdown-item-padding-horizontal': 'var(--ti-common-space-2x)', 'ti-dropdown-item-padding-vertical': 'var(--ti-common-space-6)', 'ti-dropdown-item-margin-bottom': 'var(--ti-common-space-base)', diff --git a/packages/theme/src/dropdown-item/smb-theme.js b/packages/theme/src/dropdown-item/smb-theme.js index 6893fe3af..238e50b22 100644 --- a/packages/theme/src/dropdown-item/smb-theme.js +++ b/packages/theme/src/dropdown-item/smb-theme.js @@ -3,14 +3,14 @@ export const tinyDropdownItemSmbTheme = { 'ti-dropdown-item-padding-vertical': 'var(--ti-common-space-0)', 'ti-dropdown-item-padding-horizontal': 'var(--ti-common-space-4x)', 'ti-dropdown-item-hover-text-color': 'var(--ti-common-color-text-primary)', - 'ti-dropdown-item-icon-color-hover': 'var(--ti-common-color-text-link-hover)', 'ti-dropdown-item-expand-svg-margin-left': 'var(--ti-common-space-0)', 'ti-dropdown-item-expand-svg-margin-right': 'var(--ti-common-space-2x)', 'ti-dropdown-item-content-margin-left': 'calc(var(--ti-dropdown-item-expand-icon-size) + var(--ti-common-space-2x))', 'ti-dropdown-item-max-width': 'var(--ti-common-size-auto)', 'ti-dropdown-item-height': 'var(--ti-common-size-height-normal)', - 'ti-dropdown-item-icon-color': 'var(--ti-common-color-icon)', - 'ti-dropdown-item-content-font-weight-hover': 'var(--ti-common-font-weight-6)', + 'ti-dropdown-item-icon-color': 'var(--ti-common-color-icon-normal)', + 'ti-dropdown-item-icon-color-hover': 'var(--ti-common-color-icon-hover)', + 'ti-dropdown-item-content-font-weight-hover': 'var(--ti-common-font-weight-4)', 'ti-dropdown-item-active-bg-color': 'var(--ti-common-color-bg-white-normal)', 'ti-dropdown-item-active-text-color': '#1476FF', 'ti-dropdown-item-content-text-hover': '#1476FF', @@ -20,5 +20,6 @@ export const tinyDropdownItemSmbTheme = { 'ti-dropdown-item-before-height': '0', 'ti-dropdown-item-bg-color-selected': 'var(--ti-common-color-bg-white-normal)', 'ti-dropdown-item-text-color-selected': '#1476FF', - 'ti-dropdown-item-font-weight-selected': 'var(--ti-common-font-weight-6)' + 'ti-dropdown-item-font-weight-selected': 'var(--ti-common-font-weight-6)', + 'ti-dropdown-item-hover-bg-color': 'var(--ti-common-color-bg-normal)' } diff --git a/packages/theme/src/dropdown-menu/aurora-theme.js b/packages/theme/src/dropdown-menu/aurora-theme.js index 40e17eb93..23cfff5d8 100644 --- a/packages/theme/src/dropdown-menu/aurora-theme.js +++ b/packages/theme/src/dropdown-menu/aurora-theme.js @@ -5,5 +5,7 @@ export const tinyDropdownMenuAuroraTheme = { 'ti-dropdown-menu-padding-vertical': 'var(--ti-common-space-base)', 'ti-dropdown-menu-margin-vertical': 'var(--ti-common-space-3x)', 'ti-dropdown-item-hover-bg-color': 'var(--ti-common-color-hover-background)', - 'ti-dropdown-menu-min-width': 'auto' + 'ti-dropdown-menu-min-width': 'auto', + 'ti-dropdown-menu-arrow-margin-top': 'var(--ti-common-space-3x)', + 'ti-dropdown-menu-arrow-margin-bottom': 'var(--ti-common-space-3x)' } diff --git a/packages/theme/src/dropdown-menu/index.less b/packages/theme/src/dropdown-menu/index.less index db068ac0d..346e824a4 100644 --- a/packages/theme/src/dropdown-menu/index.less +++ b/packages/theme/src/dropdown-menu/index.less @@ -60,7 +60,9 @@ } &.@{css-prefix}popper[x-placement^='top'] { - margin-bottom: var(--ti-dropdown-menu-arrow-margin-bottom); + &:has(.popper__arrow) { + margin-bottom: var(--ti-dropdown-menu-arrow-margin-bottom); + } } &.@{css-prefix}popper[x-placement^='top'] .popper__arrow { @@ -79,7 +81,9 @@ } &.@{css-prefix}popper[x-placement^='bottom'] { - margin-top: var(--ti-dropdown-menu-arrow-margin-top); + &:has(.popper__arrow) { + margin-top: var(--ti-dropdown-menu-arrow-margin-top); + } } &.@{css-prefix}popper[x-placement^='bottom'] .popper__arrow { @@ -191,4 +195,4 @@ margin: var(--ti-dropdown-item-before-margin-vertical) var(--ti-dropdown-item-mini-before-margin-horizontal); } } -} \ No newline at end of file +} diff --git a/packages/theme/src/dropdown-menu/vars.less b/packages/theme/src/dropdown-menu/vars.less index 7b8c1ceb8..fb3b601b8 100644 --- a/packages/theme/src/dropdown-menu/vars.less +++ b/packages/theme/src/dropdown-menu/vars.less @@ -39,14 +39,14 @@ --ti-dropdown-menu-small-padding-horizontal: var(--ti-common-space-0, 0px); // 下拉菜单弹框箭头的尺寸 --ti-dropdown-menu-arrow-border-width: 6px; - // 下拉菜单弹框箭头的底部外边距 - --ti-dropdown-menu-arrow-margin-bottom: 12px; - // 下拉菜单弹框箭头的顶部外边距 - --ti-dropdown-menu-arrow-margin-top: 12px; + // 下拉菜单带箭头弹框的底部外边距 + --ti-dropdown-menu-arrow-margin-bottom: var(--ti-common-space-3x); + // 下拉菜单带箭头弹框的顶部外边距 + --ti-dropdown-menu-arrow-margin-top: var(--ti-common-space-3x); // 下拉菜单弹框箭头的边框色 --ti-dropdown-menu-arrow-border-color: var(--ti-common-color-line-normal, #adb0b8); // 下拉菜单弹框箭头的颜色 --ti-dropdown-menu-arrow-after-border-color: var(--ti-common-color-light, #fff); // 下拉菜单弹框周边的填充色 --ti-dropdown-menu-arrow-after-default-border-color: var(--ti-common-color-transparent, transparent); -} \ No newline at end of file +} diff --git a/packages/theme/src/dropdown/aurora-theme.js b/packages/theme/src/dropdown/aurora-theme.js index f482bef68..800f52e17 100644 --- a/packages/theme/src/dropdown/aurora-theme.js +++ b/packages/theme/src/dropdown/aurora-theme.js @@ -9,5 +9,6 @@ export const tinyDropdownAuroraTheme = { 'ti-dropdown-caret-button-padding-left': 'var(--ti-common-space-2x)', 'ti-dropdown-caret-button-padding-right': 'var(--ti-common-space-2x)', 'ti-dropdown-caret-svg-margin-horizontal': 'var(--ti-common-space-0)', - 'ti-dropdown-caret-svg-padding-left': 'var(--ti-common-space-0)' + 'ti-dropdown-caret-svg-padding-left': 'var(--ti-common-space-0)', + 'ti-dropdown-suffix-icon-margin-vertical': 'var(--ti-common-space-2x)' } diff --git a/packages/theme/src/dropdown/index.less b/packages/theme/src/dropdown/index.less index de590b1cb..8fb1f9bf1 100644 --- a/packages/theme/src/dropdown/index.less +++ b/packages/theme/src/dropdown/index.less @@ -176,6 +176,13 @@ cursor: pointer; } + .tiny-dropdown__suffix-inner { + .tiny-svg { + margin: var(--ti-dropdown-suffix-icon-margin-vertical) 0; + vertical-align: top; + } + } + &--visible { // rotate(180deg) 会受svg的margin影响,位置会变动! transform: scaleY(-1); diff --git a/packages/theme/src/dropdown/smb-theme.js b/packages/theme/src/dropdown/smb-theme.js index f3891bc83..72e0a8d6b 100644 --- a/packages/theme/src/dropdown/smb-theme.js +++ b/packages/theme/src/dropdown/smb-theme.js @@ -14,5 +14,7 @@ export const tinyDropdownSmbTheme = { 'ti-dropdown-trigger-only-svg-width': 'var(--ti-common-size-5x)', 'ti-dropdown-trigger-only-svg-height': 'var(--ti-common-size-5x)', 'ti-dropdown-trigger-only-svg-hover-bg-color': 'rgba(0,0,0,0.05)', - 'ti-dropdown-trigger-only-svg-hover-radius': 'var(--ti-common-border-radius-2)' + 'ti-dropdown-trigger-only-svg-hover-radius': 'var(--ti-common-border-radius-2)', + 'ti-dropdown-line-height': 'var(--ti-common-line-height-1)', + 'ti-dropdown-suffix-icon-margin-vertical': 'var(--ti-common-space-2x)' } diff --git a/packages/theme/src/dropdown/vars.less b/packages/theme/src/dropdown/vars.less index fb3d9a815..922615531 100644 --- a/packages/theme/src/dropdown/vars.less +++ b/packages/theme/src/dropdown/vars.less @@ -67,4 +67,6 @@ --ti-dropdown-title-button-padding-right: var(--ti-common-space-5x, 20px); // 下拉菜单文字按钮的右侧内边距 --ti-dropdown-title-button-padding-left: var(--ti-common-space-5x, 20px); + // 下拉图标垂直内边距 + --ti-dropdown-suffix-icon-margin-vertical: calc(var(--ti-common-space-2x, 8px) - 1px); } diff --git a/packages/vue/src/action-menu/src/pc.vue b/packages/vue/src/action-menu/src/pc.vue index 7a383be14..7d9a42985 100644 --- a/packages/vue/src/action-menu/src/pc.vue +++ b/packages/vue/src/action-menu/src/pc.vue @@ -22,7 +22,11 @@ - +
  • diff --git a/packages/vue/src/dropdown-item/src/index.ts b/packages/vue/src/dropdown-item/src/index.ts index 5fc593a64..b3673dc97 100644 --- a/packages/vue/src/dropdown-item/src/index.ts +++ b/packages/vue/src/dropdown-item/src/index.ts @@ -84,6 +84,10 @@ export const dropdownItemProps = { tipPosition: { type: String, default: 'right' + }, + effect: { + type: String, + default: 'light' } } diff --git a/packages/vue/src/dropdown-item/src/pc.vue b/packages/vue/src/dropdown-item/src/pc.vue index 377462159..7e8863983 100644 --- a/packages/vue/src/dropdown-item/src/pc.vue +++ b/packages/vue/src/dropdown-item/src/pc.vue @@ -13,7 +13,7 @@