mirror/naive-ui
2
0
Fork 0
mirror of https://github.com/tusen-ai/naive-ui.git synced 2025-04-24 15:01:22 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(popselect): style may conflict with popover

Browse Source
This commit is contained in:
07akioni 2022-05-15 16:30:58 +08:00
parent 2253635893
commit 2e9bb563f4
8 changed files with 96 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/popover/src/PopoverBody.tsx
View File

@ -306,19 +306,19 @@ export default defineComponent({
{
class: [
`${mergedClsPrefix}-popover`,
`${mergedClsPrefix}-popover-shared`,
themeClassHandle?.themeClass.value,
extraClass.map((v) => `${mergedClsPrefix}-${v}`),
{
[`${mergedClsPrefix}-popover--scrollable`]: props.scrollable,
[`${mergedClsPrefix}-popover--overlap`]: props.overlap,
[`${mergedClsPrefix}-popover--show-arrow`]: props.showArrow,
[`${mergedClsPrefix}-popover--show-header`]: !isSlotEmpty(
slots.header
),
[`${mergedClsPrefix}-popover--raw`]: props.raw,
[`${mergedClsPrefix}-popover--manual-trigger`]:
props.trigger === 'manual',
[`${mergedClsPrefix}-popover--center-arrow`]:
[`${mergedClsPrefix}-popover-shared--overlap`]: props.overlap,
[`${mergedClsPrefix}-popover-shared--show-arrow`]:
props.showArrow,
[`${mergedClsPrefix}-popover-shared--center-arrow`]:
props.arrowPointToCenter
}
],
@ -344,9 +344,9 @@ export default defineComponent({
// to place the body & transition animation.
// Shadow class exists for reuse box-shadow.
[
`${mergedClsPrefix}-popover`,
`${mergedClsPrefix}-popover-shared`,
themeClassHandle?.themeClass.value,
props.overlap && `${mergedClsPrefix}-popover--overlap`
props.overlap && `${mergedClsPrefix}-popover-shared--overlap`
],
bodyRef,
styleRef.value as any,

52
src/popover/src/styles/index.cssr.ts
View File

@ -33,7 +33,6 @@ export default c([
box-shadow .3s var(--n-bezier),
background-color .3s var(--n-bezier),
color .3s var(--n-bezier);
transform-origin: inherit;
position: relative;
font-size: var(--n-font-size);
color: var(--n-text-color);
@ -45,25 +44,6 @@ export default c([
max-height: inherit;
`)
]),
// body transition
c('&.popover-transition-enter-from, &.popover-transition-leave-to', `
opacity: 0;
transform: scale(.85);
`),
c('&.popover-transition-enter-to, &.popover-transition-leave-from', `
transform: scale(1);
opacity: 1;
`),
c('&.popover-transition-enter-active', `
transition:
opacity .15s var(--n-bezier-ease-out),
transform .15s var(--n-bezier-ease-out);
`),
c('&.popover-transition-leave-active', `
transition:
opacity .15s var(--n-bezier-ease-in),
transform .15s var(--n-bezier-ease-in);
`),
cNotM('raw', `
background-color: var(--n-color);
border-radius: var(--n-border-radius);
@ -100,6 +80,29 @@ export default c([
`)
])
]),
cB('popover-shared', `
transform-origin: inherit;
`, [
// body transition
c('&.popover-transition-enter-from, &.popover-transition-leave-to', `
opacity: 0;
transform: scale(.85);
`),
c('&.popover-transition-enter-to, &.popover-transition-leave-from', `
transform: scale(1);
opacity: 1;
`),
c('&.popover-transition-enter-active', `
transition:
opacity .15s var(--n-bezier-ease-out),
transform .15s var(--n-bezier-ease-out);
`),
c('&.popover-transition-leave-active', `
transition:
opacity .15s var(--n-bezier-ease-in),
transform .15s var(--n-bezier-ease-in);
`)
]),
placementStyle('top-start', `
top: calc(${arrowSize} / -2 + 1px);
left: calc(${getArrowOffset('top-start')} - var(--v-offset-left));
@ -168,7 +171,7 @@ export default c([
const centerOffset = `calc((${targetSize} - ${arrowSize}) / 2)`
const offset = getArrowOffset(placement as FollowerPlacement)
return c(`[v-placement="${placement}"] >`, [
cB('popover', [
cB('popover-shared', [
cM('center-arrow', [
cB(
'popover-arrow',
@ -203,10 +206,9 @@ function placementStyle (
? 'height: var(--n-space-arrow);'
: 'width: var(--n-space-arrow);'
return c(`[v-placement="${placement}"] >`, [
cB('popover', [
cNotM('manual-trigger', `
margin-${oppositePlacement[position]}: var(--n-space);
`),
cB('popover-shared', `
margin-${oppositePlacement[position]}: var(--n-space);
`, [
cM('show-arrow', `
margin-${oppositePlacement[position]}: var(--n-space-arrow);
`),

12
src/popselect/src/Popselect.tsx
View File

@ -1,4 +1,12 @@
import { h, ref, provide, defineComponent, PropType, mergeProps } from 'vue'
import {
h,
ref,
provide,
defineComponent,
PropType,
mergeProps,
ExtractPropTypes
} from 'vue'
import { popoverBaseProps } from '../../popover/src/Popover'
import type { PopoverInternalProps } from '../../popover/src/Popover'
import { NPopover } from '../../popover'
@ -26,6 +34,7 @@ const popselectProps = {
...panelProps
}
export type PopselectSetupProps = ExtractPropTypes<typeof popselectProps>
export type PopselectProps = ExtractPublicPropTypes<typeof popselectProps>
export default defineComponent({
@ -48,6 +57,7 @@ export default defineComponent({
popoverInstRef.value?.setShow(value)
}
provide(popselectInjectionKey, {
props,
mergedThemeRef: themeRef,
syncPosition,
setShow

34
src/popselect/src/PopselectPanel.tsx
View File

@ -24,12 +24,14 @@ import {
SelectIgnoredOption,
ValueAtom
} from '../../select/src/interface'
import { useConfig } from '../../_mixins'
import { useConfig, useTheme, useThemeClass } from '../../_mixins'
import { NInternalSelectMenu } from '../../_internal'
import { call, keysOf, warn } from '../../_utils'
import type { MaybeArray } from '../../_utils'
import { popselectLight } from '../styles'
import type { PopselectSize } from './interface'
import { popselectInjectionKey } from './interface'
import style from './styles/index.cssr'
export const panelProps = {
multiple: Boolean,
@ -76,7 +78,16 @@ export default defineComponent({
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
const NPopselect = inject(popselectInjectionKey)!
const { mergedClsPrefixRef } = useConfig(props)
const { mergedClsPrefixRef, inlineThemeDisabled } = useConfig(props)
const themeRef = useTheme(
'Popselect',
'-pop-select',
style,
popselectLight,
NPopselect.props,
mergedClsPrefixRef
)
const treeMateRef = computed(() => {
return createTreeMate<
@ -158,19 +169,36 @@ export default defineComponent({
NPopselect.syncPosition()
})
})
const cssVarsRef = computed(() => {
const {
self: { menuBoxShadow }
} = themeRef.value
return {
'--n-menu-box-shadow': menuBoxShadow
}
})
const themeClassHandle = inlineThemeDisabled
? useThemeClass('select', undefined, cssVarsRef, NPopselect.props)
: undefined
return {
mergedTheme: NPopselect.mergedThemeRef,
mergedClsPrefix: mergedClsPrefixRef,
treeMate: treeMateRef,
handleToggle,
handleMenuMousedown
handleMenuMousedown,
cssVars: inlineThemeDisabled ? undefined : cssVarsRef,
themeClass: themeClassHandle?.themeClass,
onRender: themeClassHandle?.onRender
}
},
render () {
this.onRender?.()
return (
<NInternalSelectMenu
clsPrefix={this.mergedClsPrefix}
focusable
class={[`${this.mergedClsPrefix}-popselect-menu`, this.themeClass]}
style={this.cssVars}
theme={this.mergedTheme.peers.InternalSelectMenu}
themeOverrides={this.mergedTheme.peerOverrides.InternalSelectMenu}
multiple={this.multiple}

4
src/popselect/src/interface.ts
View File

@ -1,12 +1,14 @@
import { Ref } from 'vue'
import type { PopoverInst } from '../../popover/src/interface'
import type { MergedTheme } from '../../_mixins'
import { createInjectionKey } from '../../_utils'
import type { PopselectTheme } from '../styles'
import type { PopoverInst } from '../../popover/src/interface'
import type { PopselectSetupProps } from './Popselect'
export type PopselectSize = 'small' | 'medium' | 'large' | 'huge'
export interface PopselectInjection {
props: PopselectSetupProps
mergedThemeRef: Ref<MergedTheme<PopselectTheme>>
setShow: (value: boolean) => void
syncPosition: () => void

6
src/popselect/src/styles/index.cssr.ts Normal file
View File

@ -0,0 +1,6 @@
import { cB } from '../../../_utils/cssr'
// --n-menu-box-shadow
export default cB('popselect-menu', `
box-shadow: var(--n-menu-box-shadow);
`)

11
src/popselect/styles/light.ts
View File

@ -1,15 +1,24 @@
import { internalSelectMenuLight } from '../../_internal/select-menu/styles'
import { ThemeCommonVars } from '../../config-provider'
import { commonLight } from '../../_styles/common'
import { popoverLight } from '../../popover/styles'
import { createTheme } from '../../_mixins'
export function self (vars: ThemeCommonVars) {
const { boxShadow2 } = vars
return {
menuBoxShadow: boxShadow2
}
}
const popselectLight = createTheme({
name: 'Popselect',
common: commonLight,
peers: {
Popover: popoverLight,
InternalSelectMenu: internalSelectMenuLight
}
},
self
})
// eslint-disable-next-line @typescript-eslint/no-empty-interface

2
src/select/src/Select.tsx
View File

@ -858,7 +858,7 @@ export default defineComponent({
}
treeMate={this.treeMate}
multiple={this.multiple}
size={'medium'}
size="medium"
renderOption={this.renderOption}
renderLabel={this.renderLabel}
value={this.mergedValue}