Skip to content

Commit

Permalink
refactor(tree-select): header slot style
Browse files Browse the repository at this point in the history
  • Loading branch information
07akioni committed Aug 11, 2024
1 parent 600aa7f commit 7ede9be
Show file tree
Hide file tree
Showing 3 changed files with 20 additions and 8 deletions.
14 changes: 10 additions & 4 deletions src/tree-select/src/TreeSelect.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -693,7 +693,7 @@ export default defineComponent({
function handleMenuMousedown(e: MouseEvent): void {
// If there's an action slot later, we need to check if mousedown happens
// in action panel
if (!happensIn(e, 'action'))
if (!happensIn(e, 'action') && !happensIn(e, 'header'))
e.preventDefault()
}
const selectionRenderTagRef = computed(() => {
Expand Down Expand Up @@ -795,7 +795,10 @@ export default defineComponent({
menuHeight,
actionPadding,
actionDividerColor,
actionTextColor
actionTextColor,
headerDividerColor,
headerPadding,
headerTextColor
}
} = themeRef.value
return {
Expand All @@ -806,7 +809,10 @@ export default defineComponent({
'--n-bezier': cubicBezierEaseInOut,
'--n-action-padding': actionPadding,
'--n-action-text-color': actionTextColor,
'--n-action-divider-color': actionDividerColor
'--n-action-divider-color': actionDividerColor,
'--n-header-padding': headerPadding,
'--n-header-text-color': headerTextColor,
'--n-header-divider-color': headerDividerColor
}
})
const themeClassHandle = inlineThemeDisabled
Expand Down Expand Up @@ -973,7 +979,7 @@ export default defineComponent({
return children ? (
<div
class={`${mergedClsPrefix}-tree-select-menu__header`}
data-action
data-header
>
{children}
</div>
Expand Down
9 changes: 6 additions & 3 deletions src/tree-select/src/styles/index.cssr.ts
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,9 @@ import { c, cB, cE } from '../../../_utils/cssr'
// --n-menu-border-radius
// --n-menu-box-shadow
// --n-menu-color
// --n-header-padding
// --n-header-text-color
// --n-header-divider-color
// --n-action-padding
// --n-action-text-color
// --n-action-divider-color
Expand Down Expand Up @@ -35,12 +38,12 @@ export default c([
justify-content: center;
`),
cE('header', `
padding: var(--n-action-padding);
padding: var(--n-header-padding);
transition:
color .3s var(--n-bezier);
border-color .3s var(--n-bezier);
border-bottom: 1px solid var(--n-action-divider-color);
color: var(--n-action-text-color);
border-bottom: 1px solid var(--n-header-divider-color);
color: var(--n-header-text-color);
`),
cE('action', `
padding: var(--n-action-padding);
Expand Down
5 changes: 4 additions & 1 deletion src/tree-select/styles/light.ts
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,10 @@ export function self(vars: ThemeCommonVars) {
menuHeight: `calc(${heightMedium} * 7.6)`,
actionDividerColor: dividerColor,
actionTextColor: textColor2,
actionPadding: '8px 12px'
actionPadding: '8px 12px',
headerDividerColor: dividerColor,
headerTextColor: textColor2,
headerPadding: '8px 12px'
}
}

Expand Down

0 comments on commit 7ede9be

Please sign in to comment.