mirror of
https://github.com/tusen-ai/naive-ui.git
synced 2025-02-17 13:20:52 +08:00
fix: many components' inlineThemeDisabled
This commit is contained in:
07akioni
parent
c26591f511
commit
608f54bc68
@ -12,7 +12,7 @@ import {
|
||||
import { VLazyTeleport } from 'vueuc'
|
||||
import { zindexable } from 'vdirs'
|
||||
import { useIsMounted } from 'vooks'
|
||||
import { useTheme, useConfig } from '../../_mixins'
|
||||
import { useTheme, useConfig, useThemeClass } from '../../_mixins'
|
||||
import type { ThemeProps } from '../../_mixins'
|
||||
import { formatLength, call, warnOnce } from '../../_utils'
|
||||
import type { ExtractPublicPropTypes, MaybeArray } from '../../_utils'
|
||||
@ -120,7 +120,8 @@ export default defineComponent({
|
||||
}
|
||||
})
|
||||
}
|
||||
const { mergedClsPrefixRef, namespaceRef } = useConfig(props)
|
||||
const { mergedClsPrefixRef, namespaceRef, inlineThemeDisabled } =
|
||||
useConfig(props)
|
||||
const isMountedRef = useIsMounted()
|
||||
const themeRef = useTheme(
|
||||
'Drawer',
|
||||
@ -177,6 +178,53 @@ export default defineComponent({
|
||||
mergedClsPrefixRef,
|
||||
doUpdateShow
|
||||
})
|
||||
const cssVarsRef = computed(() => {
|
||||
const {
|
||||
common: { cubicBezierEaseInOut, cubicBezierEaseIn, cubicBezierEaseOut },
|
||||
self: {
|
||||
color,
|
||||
textColor,
|
||||
boxShadow,
|
||||
lineHeight,
|
||||
headerPadding,
|
||||
footerPadding,
|
||||
bodyPadding,
|
||||
titleFontSize,
|
||||
titleTextColor,
|
||||
titleFontWeight,
|
||||
headerBorderBottom,
|
||||
footerBorderTop,
|
||||
closeColor,
|
||||
closeColorHover,
|
||||
closeColorPressed,
|
||||
closeSize
|
||||
}
|
||||
} = themeRef.value
|
||||
return {
|
||||
'--n-line-height': lineHeight,
|
||||
'--n-color': color,
|
||||
'--n-text-color': textColor,
|
||||
'--n-box-shadow': boxShadow,
|
||||
'--n-bezier': cubicBezierEaseInOut,
|
||||
'--n-bezier-out': cubicBezierEaseOut,
|
||||
'--n-bezier-in': cubicBezierEaseIn,
|
||||
'--n-header-padding': headerPadding,
|
||||
'--n-body-padding': bodyPadding,
|
||||
'--n-footer-padding': footerPadding,
|
||||
'--n-title-text-color': titleTextColor,
|
||||
'--n-title-font-size': titleFontSize,
|
||||
'--n-title-font-weight': titleFontWeight,
|
||||
'--n-header-border-bottom': headerBorderBottom,
|
||||
'--n-footer-border-top': footerBorderTop,
|
||||
'--n-close-color': closeColor,
|
||||
'--n-close-color-hover': closeColorHover,
|
||||
'--n-close-color-pressed': closeColorPressed,
|
||||
'--n-close-size': closeSize
|
||||
}
|
||||
})
|
||||
const themeClassHandle = inlineThemeDisabled
|
||||
? useThemeClass('drawer', undefined, cssVarsRef, props)
|
||||
: undefined
|
||||
return {
|
||||
mergedClsPrefix: mergedClsPrefixRef,
|
||||
namespace: namespaceRef,
|
||||
@ -184,54 +232,9 @@ export default defineComponent({
|
||||
handleMaskClick,
|
||||
handleEsc,
|
||||
mergedTheme: themeRef,
|
||||
cssVars: computed(() => {
|
||||
const {
|
||||
common: {
|
||||
cubicBezierEaseInOut,
|
||||
cubicBezierEaseIn,
|
||||
cubicBezierEaseOut
|
||||
},
|
||||
self: {
|
||||
color,
|
||||
textColor,
|
||||
boxShadow,
|
||||
lineHeight,
|
||||
headerPadding,
|
||||
footerPadding,
|
||||
bodyPadding,
|
||||
titleFontSize,
|
||||
titleTextColor,
|
||||
titleFontWeight,
|
||||
headerBorderBottom,
|
||||
footerBorderTop,
|
||||
closeColor,
|
||||
closeColorHover,
|
||||
closeColorPressed,
|
||||
closeSize
|
||||
}
|
||||
} = themeRef.value
|
||||
return {
|
||||
'--n-line-height': lineHeight,
|
||||
'--n-color': color,
|
||||
'--n-text-color': textColor,
|
||||
'--n-box-shadow': boxShadow,
|
||||
'--n-bezier': cubicBezierEaseInOut,
|
||||
'--n-bezier-out': cubicBezierEaseOut,
|
||||
'--n-bezier-in': cubicBezierEaseIn,
|
||||
'--n-header-padding': headerPadding,
|
||||
'--n-body-padding': bodyPadding,
|
||||
'--n-footer-padding': footerPadding,
|
||||
'--n-title-text-color': titleTextColor,
|
||||
'--n-title-font-size': titleFontSize,
|
||||
'--n-title-font-weight': titleFontWeight,
|
||||
'--n-header-border-bottom': headerBorderBottom,
|
||||
'--n-footer-border-top': footerBorderTop,
|
||||
'--n-close-color': closeColor,
|
||||
'--n-close-color-hover': closeColorHover,
|
||||
'--n-close-color-pressed': closeColorPressed,
|
||||
'--n-close-size': closeSize
|
||||
}
|
||||
}),
|
||||
cssVars: inlineThemeDisabled ? undefined : cssVarsRef,
|
||||
themeClass: themeClassHandle?.themeClass,
|
||||
onRender: themeClassHandle?.onRender,
|
||||
isMounted: isMountedRef
|
||||
}
|
||||
},
|
||||
@ -241,9 +244,14 @@ export default defineComponent({
|
||||
<VLazyTeleport to={this.to} show={this.show}>
|
||||
{{
|
||||
default: () => {
|
||||
this.onRender?.()
|
||||
return withDirectives(
|
||||
<div
|
||||
class={[`${mergedClsPrefix}-drawer-container`, this.namespace]}
|
||||
class={[
|
||||
`${mergedClsPrefix}-drawer-container`,
|
||||
this.namespace,
|
||||
this.themeClass
|
||||
]}
|
||||
style={this.cssVars as CSSProperties}
|
||||
role="none"
|
||||
>
|
||||
|
||||
@ -22,7 +22,7 @@ import Schema, {
|
||||
import { get } from 'lodash-es'
|
||||
import { createId } from 'seemly'
|
||||
import { formItemInjectionKey } from '../../_mixins/use-form-item'
|
||||
import { ThemeProps, useConfig, useTheme } from '../../_mixins'
|
||||
import { ThemeProps, useConfig, useTheme, useThemeClass } from '../../_mixins'
|
||||
import {
|
||||
warn,
|
||||
createKey,
|
||||
@ -145,7 +145,7 @@ export default defineComponent({
|
||||
'formItems',
|
||||
toRef(props, 'path')
|
||||
)
|
||||
const { mergedClsPrefixRef } = useConfig(props)
|
||||
const { mergedClsPrefixRef, inlineThemeDisabled } = useConfig(props)
|
||||
const NForm = inject(formInjectionKey, null)
|
||||
const formItemSizeRefs = formItemSize(props)
|
||||
const formItemMiscRefs = formItemMisc(props)
|
||||
@ -345,6 +345,67 @@ export default defineComponent({
|
||||
)
|
||||
}
|
||||
})
|
||||
const cssVarsRef = computed(() => {
|
||||
const { value: size } = mergedSizeRef
|
||||
const { value: labelPlacement } = labelPlacementRef
|
||||
const direction: 'vertical' | 'horizontal' =
|
||||
labelPlacement === 'top' ? 'vertical' : 'horizontal'
|
||||
const {
|
||||
common: { cubicBezierEaseInOut },
|
||||
self: {
|
||||
labelTextColor,
|
||||
asteriskColor,
|
||||
lineHeight,
|
||||
feedbackTextColor,
|
||||
feedbackTextColorWarning,
|
||||
feedbackTextColorError,
|
||||
feedbackPadding,
|
||||
[createKey('labelHeight', size)]: labelHeight,
|
||||
[createKey('blankHeight', size)]: blankHeight,
|
||||
[createKey('feedbackFontSize', size)]: feedbackFontSize,
|
||||
[createKey('feedbackHeight', size)]: feedbackHeight,
|
||||
[createKey('labelPadding', direction)]: labelPadding,
|
||||
[createKey('labelTextAlign', direction)]: labelTextAlign,
|
||||
[createKey(createKey('labelFontSize', labelPlacement), size)]:
|
||||
labelFontSize
|
||||
}
|
||||
} = themeRef.value
|
||||
|
||||
let mergedLabelTextAlign = labelTextAlignRef.value ?? labelTextAlign
|
||||
if (labelPlacement === 'top') {
|
||||
mergedLabelTextAlign =
|
||||
mergedLabelTextAlign === 'right' ? 'flex-end' : 'flex-start'
|
||||
}
|
||||
|
||||
const cssVars = {
|
||||
'--n-bezier': cubicBezierEaseInOut,
|
||||
'--n-line-height': lineHeight,
|
||||
'--n-blank-height': blankHeight,
|
||||
'--n-label-font-size': labelFontSize,
|
||||
'--n-label-text-align': mergedLabelTextAlign,
|
||||
'--n-label-height': labelHeight,
|
||||
'--n-label-padding': labelPadding,
|
||||
'--n-asterisk-color': asteriskColor,
|
||||
'--n-label-text-color': labelTextColor,
|
||||
'--n-feedback-padding': feedbackPadding,
|
||||
'--n-feedback-font-size': feedbackFontSize,
|
||||
'--n-feedback-height': feedbackHeight,
|
||||
'--n-feedback-text-color': feedbackTextColor,
|
||||
'--n-feedback-text-color-warning': feedbackTextColorWarning,
|
||||
'--n-feedback-text-color-error': feedbackTextColorError
|
||||
}
|
||||
return cssVars
|
||||
})
|
||||
const themeClassHandle = useThemeClass(
|
||||
'form-item',
|
||||
computed(() => {
|
||||
return `${mergedSizeRef.value[0]}${labelPlacementRef.value[0]}${
|
||||
labelTextAlignRef.value?.[0] || ''
|
||||
}`
|
||||
}),
|
||||
cssVarsRef,
|
||||
props
|
||||
)
|
||||
return {
|
||||
labelElementRef,
|
||||
mergedClsPrefix: mergedClsPrefixRef,
|
||||
@ -355,57 +416,9 @@ export default defineComponent({
|
||||
...formItemMiscRefs,
|
||||
...formItemSizeRefs,
|
||||
...exposedRef,
|
||||
cssVars: computed(() => {
|
||||
const { value: size } = mergedSizeRef
|
||||
const { value: labelPlacement } = labelPlacementRef
|
||||
const direction: 'vertical' | 'horizontal' =
|
||||
labelPlacement === 'top' ? 'vertical' : 'horizontal'
|
||||
const {
|
||||
common: { cubicBezierEaseInOut },
|
||||
self: {
|
||||
labelTextColor,
|
||||
asteriskColor,
|
||||
lineHeight,
|
||||
feedbackTextColor,
|
||||
feedbackTextColorWarning,
|
||||
feedbackTextColorError,
|
||||
feedbackPadding,
|
||||
[createKey('labelHeight', size)]: labelHeight,
|
||||
[createKey('blankHeight', size)]: blankHeight,
|
||||
[createKey('feedbackFontSize', size)]: feedbackFontSize,
|
||||
[createKey('feedbackHeight', size)]: feedbackHeight,
|
||||
[createKey('labelPadding', direction)]: labelPadding,
|
||||
[createKey('labelTextAlign', direction)]: labelTextAlign,
|
||||
[createKey(createKey('labelFontSize', labelPlacement), size)]:
|
||||
labelFontSize
|
||||
}
|
||||
} = themeRef.value
|
||||
|
||||
let mergedLabelTextAlign = labelTextAlignRef.value ?? labelTextAlign
|
||||
if (labelPlacement === 'top') {
|
||||
mergedLabelTextAlign =
|
||||
mergedLabelTextAlign === 'right' ? 'flex-end' : 'flex-start'
|
||||
}
|
||||
|
||||
const cssVars = {
|
||||
'--n-bezier': cubicBezierEaseInOut,
|
||||
'--n-line-height': lineHeight,
|
||||
'--n-blank-height': blankHeight,
|
||||
'--n-label-font-size': labelFontSize,
|
||||
'--n-label-text-align': mergedLabelTextAlign,
|
||||
'--n-label-height': labelHeight,
|
||||
'--n-label-padding': labelPadding,
|
||||
'--n-asterisk-color': asteriskColor,
|
||||
'--n-label-text-color': labelTextColor,
|
||||
'--n-feedback-padding': feedbackPadding,
|
||||
'--n-feedback-font-size': feedbackFontSize,
|
||||
'--n-feedback-height': feedbackHeight,
|
||||
'--n-feedback-text-color': feedbackTextColor,
|
||||
'--n-feedback-text-color-warning': feedbackTextColorWarning,
|
||||
'--n-feedback-text-color-error': feedbackTextColorError
|
||||
}
|
||||
return cssVars
|
||||
})
|
||||
cssVars: inlineThemeDisabled ? undefined : cssVarsRef,
|
||||
themeClass: themeClassHandle?.themeClass,
|
||||
onRender: themeClassHandle?.onRender
|
||||
}
|
||||
},
|
||||
render () {
|
||||
@ -414,16 +427,19 @@ export default defineComponent({
|
||||
mergedClsPrefix,
|
||||
mergedShowLabel,
|
||||
mergedShowRequireMark,
|
||||
mergedRequireMarkPlacement
|
||||
mergedRequireMarkPlacement,
|
||||
onRender
|
||||
} = this
|
||||
const renderedShowRequireMark =
|
||||
mergedShowRequireMark !== undefined
|
||||
? mergedShowRequireMark
|
||||
: this.mergedRequired
|
||||
onRender?.()
|
||||
return (
|
||||
<div
|
||||
class={[
|
||||
`${mergedClsPrefix}-form-item`,
|
||||
this.themeClass,
|
||||
`${mergedClsPrefix}-form-item--${this.mergedSize}-size`,
|
||||
`${mergedClsPrefix}-form-item--${this.mergedLabelPlacement}-labelled`,
|
||||
!mergedShowLabel && `${mergedClsPrefix}-form-item--no-label`
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import { defineComponent, computed, h, PropType, CSSProperties } from 'vue'
|
||||
import { useConfig, useTheme } from '../../_mixins'
|
||||
import { defineComponent, computed, h, PropType } from 'vue'
|
||||
import { useConfig, useTheme, useThemeClass } from '../../_mixins'
|
||||
import type { ThemeProps } from '../../_mixins'
|
||||
import { createKey, formatLength, useHoudini } from '../../_utils'
|
||||
import type { ExtractPublicPropTypes } from '../../_utils'
|
||||
@ -36,7 +36,7 @@ export default defineComponent({
|
||||
props: gradientTextProps,
|
||||
setup (props) {
|
||||
useHoudini()
|
||||
const { mergedClsPrefixRef } = useConfig(props)
|
||||
const { mergedClsPrefixRef, inlineThemeDisabled } = useConfig(props)
|
||||
const compatibleTypeRef = computed<
|
||||
'info' | 'success' | 'warning' | 'error' | 'primary'
|
||||
>(() => {
|
||||
@ -69,46 +69,59 @@ export default defineComponent({
|
||||
props,
|
||||
mergedClsPrefixRef
|
||||
)
|
||||
const cssVarsRef = computed(() => {
|
||||
const { value: type } = compatibleTypeRef
|
||||
const {
|
||||
common: { cubicBezierEaseInOut },
|
||||
self: {
|
||||
rotate,
|
||||
[createKey('colorStart', type)]: colorStart,
|
||||
[createKey('colorEnd', type)]: colorEnd,
|
||||
fontWeight
|
||||
}
|
||||
} = themeRef.value
|
||||
return {
|
||||
'--n-bezier': cubicBezierEaseInOut,
|
||||
'--n-rotate': rotate,
|
||||
'--n-color-start': colorStart,
|
||||
'--n-color-end': colorEnd,
|
||||
'--n-font-weight': fontWeight
|
||||
}
|
||||
})
|
||||
const themeClassHandle = inlineThemeDisabled
|
||||
? useThemeClass(
|
||||
'gradient-text',
|
||||
computed(() => compatibleTypeRef.value[0]),
|
||||
cssVarsRef,
|
||||
props
|
||||
)
|
||||
: undefined
|
||||
return {
|
||||
mergedClsPrefix: mergedClsPrefixRef,
|
||||
compatibleType: compatibleTypeRef,
|
||||
styleFontSize: styleFontSizeRef,
|
||||
styleBgImage: styleBgImageRef,
|
||||
cssVars: computed(() => {
|
||||
const { value: type } = compatibleTypeRef
|
||||
const {
|
||||
common: { cubicBezierEaseInOut },
|
||||
self: {
|
||||
rotate,
|
||||
[createKey('colorStart', type)]: colorStart,
|
||||
[createKey('colorEnd', type)]: colorEnd,
|
||||
fontWeight
|
||||
}
|
||||
} = themeRef.value
|
||||
return {
|
||||
'--n-bezier': cubicBezierEaseInOut,
|
||||
'--n-rotate': rotate,
|
||||
'--n-color-start': colorStart,
|
||||
'--n-color-end': colorEnd,
|
||||
'--n-font-weight': fontWeight
|
||||
}
|
||||
})
|
||||
cssVars: inlineThemeDisabled ? undefined : cssVarsRef,
|
||||
themeClass: themeClassHandle?.themeClass,
|
||||
onRender: themeClassHandle?.onRender
|
||||
}
|
||||
},
|
||||
render () {
|
||||
const { mergedClsPrefix } = this
|
||||
const { mergedClsPrefix, onRender } = this
|
||||
onRender?.()
|
||||
return (
|
||||
<span
|
||||
class={[
|
||||
`${mergedClsPrefix}-gradient-text`,
|
||||
`${mergedClsPrefix}-gradient-text--${this.compatibleType}-type`
|
||||
`${mergedClsPrefix}-gradient-text--${this.compatibleType}-type`,
|
||||
this.themeClass
|
||||
]}
|
||||
style={[
|
||||
{
|
||||
fontSize: this.styleFontSize,
|
||||
backgroundImage: this.styleBgImage
|
||||
},
|
||||
this.cssVars as CSSProperties
|
||||
this.cssVars as any
|
||||
]}
|
||||
>
|
||||
{this.$slots}
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import { computed, defineComponent, h, PropType } from 'vue'
|
||||
import { useConfig, useTheme } from '../../_mixins'
|
||||
import { useConfig, useTheme, useThemeClass } from '../../_mixins'
|
||||
import type { ThemeProps } from '../../_mixins'
|
||||
import { createKey } from '../../_utils'
|
||||
import type { ExtractPublicPropTypes } from '../../_utils'
|
||||
@ -28,7 +28,8 @@ export default defineComponent({
|
||||
name: 'InputGroupLabel',
|
||||
props: inputGroupLabelProps,
|
||||
setup (props) {
|
||||
const { mergedBorderedRef, mergedClsPrefixRef } = useConfig(props)
|
||||
const { mergedBorderedRef, mergedClsPrefixRef, inlineThemeDisabled } =
|
||||
useConfig(props)
|
||||
const themeRef = useTheme(
|
||||
'Input',
|
||||
'-input-group-label',
|
||||
@ -37,41 +38,53 @@ export default defineComponent({
|
||||
props,
|
||||
mergedClsPrefixRef
|
||||
)
|
||||
const cssVarsRef = computed(() => {
|
||||
const { size } = props
|
||||
const {
|
||||
common: { cubicBezierEaseInOut },
|
||||
self: {
|
||||
groupLabelColor,
|
||||
borderRadius,
|
||||
groupLabelTextColor,
|
||||
lineHeight,
|
||||
groupLabelBorder,
|
||||
[createKey('fontSize', size)]: fontSize,
|
||||
[createKey('height', size)]: height
|
||||
}
|
||||
} = themeRef.value
|
||||
return {
|
||||
'--n-bezier': cubicBezierEaseInOut,
|
||||
'--n-group-label-color': groupLabelColor,
|
||||
'--n-group-label-border': groupLabelBorder,
|
||||
'--n-border-radius': borderRadius,
|
||||
'--n-group-label-text-color': groupLabelTextColor,
|
||||
'--n-font-size': fontSize,
|
||||
'--n-line-height': lineHeight,
|
||||
'--n-height': height
|
||||
}
|
||||
})
|
||||
const themeClassHandle = inlineThemeDisabled
|
||||
? useThemeClass(
|
||||
'input-group-label',
|
||||
computed(() => props.size[0]),
|
||||
cssVarsRef,
|
||||
props
|
||||
)
|
||||
: undefined
|
||||
return {
|
||||
mergedClsPrefix: mergedClsPrefixRef,
|
||||
mergedBordered: mergedBorderedRef,
|
||||
cssVars: computed(() => {
|
||||
const { size } = props
|
||||
const {
|
||||
common: { cubicBezierEaseInOut },
|
||||
self: {
|
||||
groupLabelColor,
|
||||
borderRadius,
|
||||
groupLabelTextColor,
|
||||
lineHeight,
|
||||
groupLabelBorder,
|
||||
[createKey('fontSize', size)]: fontSize,
|
||||
[createKey('height', size)]: height
|
||||
}
|
||||
} = themeRef.value
|
||||
return {
|
||||
'--n-bezier': cubicBezierEaseInOut,
|
||||
'--n-group-label-color': groupLabelColor,
|
||||
'--n-group-label-border': groupLabelBorder,
|
||||
'--n-border-radius': borderRadius,
|
||||
'--n-group-label-text-color': groupLabelTextColor,
|
||||
'--n-font-size': fontSize,
|
||||
'--n-line-height': lineHeight,
|
||||
'--n-height': height
|
||||
}
|
||||
})
|
||||
cssVars: inlineThemeDisabled ? undefined : cssVarsRef,
|
||||
themeClass: themeClassHandle?.themeClass,
|
||||
onRender: themeClassHandle?.onRender
|
||||
}
|
||||
},
|
||||
render () {
|
||||
const { mergedClsPrefix } = this
|
||||
this.onRender?.()
|
||||
return (
|
||||
<div
|
||||
class={`${mergedClsPrefix}-input-group-label`}
|
||||
class={[`${mergedClsPrefix}-input-group-label`, this.themeClass]}
|
||||
style={this.cssVars as any}
|
||||
>
|
||||
{this.$slots.default?.()}
|
||||
|
||||
@ -79,7 +79,7 @@ export default c([
|
||||
]),
|
||||
insideModal(
|
||||
cB('list', `
|
||||
--merged-color: var(--n-color-modal);
|
||||
--merged-color: var(--n-color-modal);
|
||||
--merged-border-color: var(--n-border-color-modal);
|
||||
`)
|
||||
),
|
||||
|
||||
@ -20,7 +20,7 @@ import {
|
||||
NBaseClose
|
||||
} from '../../_internal'
|
||||
import { render, createKey } from '../../_utils'
|
||||
import { useTheme } from '../../_mixins'
|
||||
import { useConfig, useTheme, useThemeClass } from '../../_mixins'
|
||||
import { messageLight } from '../styles'
|
||||
import { messageProps } from './message-props'
|
||||
import type { MessageType, MessageRenderMessage } from './types'
|
||||
@ -41,6 +41,7 @@ export default defineComponent({
|
||||
render: Function as PropType<MessageRenderMessage>
|
||||
},
|
||||
setup (props) {
|
||||
const { inlineThemeDisabled } = useConfig()
|
||||
const {
|
||||
props: messageProviderProps,
|
||||
mergedClsPrefixRef
|
||||
@ -54,65 +55,76 @@ export default defineComponent({
|
||||
messageProviderProps,
|
||||
mergedClsPrefixRef
|
||||
)
|
||||
const cssVarsRef = computed(() => {
|
||||
const { type } = props
|
||||
const {
|
||||
common: { cubicBezierEaseInOut },
|
||||
self: {
|
||||
padding,
|
||||
margin,
|
||||
maxWidth,
|
||||
iconMargin,
|
||||
closeMargin,
|
||||
closeSize,
|
||||
iconSize,
|
||||
fontSize,
|
||||
lineHeight,
|
||||
borderRadius,
|
||||
iconColorInfo,
|
||||
iconColorSuccess,
|
||||
iconColorWarning,
|
||||
iconColorError,
|
||||
iconColorLoading,
|
||||
[createKey('textColor', type)]: textColor,
|
||||
[createKey('boxShadow', type)]: boxShadow,
|
||||
[createKey('color', type)]: color,
|
||||
[createKey('closeColor', type)]: closeColor,
|
||||
[createKey('closeColorPressed', type)]: closeColorPressed,
|
||||
[createKey('closeColorHover', type)]: closeColorHover
|
||||
}
|
||||
} = themeRef.value
|
||||
return {
|
||||
'--n-bezier': cubicBezierEaseInOut,
|
||||
'--n-margin': margin,
|
||||
'--n-padding': padding,
|
||||
'--n-max-width': maxWidth,
|
||||
'--n-font-size': fontSize,
|
||||
'--n-icon-margin': iconMargin,
|
||||
'--n-icon-size': iconSize,
|
||||
'--n-close-size': closeSize,
|
||||
'--n-close-margin': closeMargin,
|
||||
'--n-text-color': textColor,
|
||||
'--n-color': color,
|
||||
'--n-box-shadow': boxShadow,
|
||||
'--n-icon-color-info': iconColorInfo,
|
||||
'--n-icon-color-success': iconColorSuccess,
|
||||
'--n-icon-color-warning': iconColorWarning,
|
||||
'--n-icon-color-error': iconColorError,
|
||||
'--n-icon-color-loading': iconColorLoading,
|
||||
'--n-close-color': closeColor,
|
||||
'--n-close-color-pressed': closeColorPressed,
|
||||
'--n-close-color-hover': closeColorHover,
|
||||
'--n-line-height': lineHeight,
|
||||
'--n-border-radius': borderRadius
|
||||
}
|
||||
})
|
||||
const themeClassHandle = inlineThemeDisabled
|
||||
? useThemeClass(
|
||||
'message',
|
||||
computed(() => props.type[0]),
|
||||
cssVarsRef,
|
||||
{}
|
||||
)
|
||||
: undefined
|
||||
return {
|
||||
mergedClsPrefix: mergedClsPrefixRef,
|
||||
messageProviderProps,
|
||||
handleClose () {
|
||||
props.onClose?.()
|
||||
},
|
||||
cssVars: computed(() => {
|
||||
const { type } = props
|
||||
const {
|
||||
common: { cubicBezierEaseInOut },
|
||||
self: {
|
||||
padding,
|
||||
margin,
|
||||
maxWidth,
|
||||
iconMargin,
|
||||
closeMargin,
|
||||
closeSize,
|
||||
iconSize,
|
||||
fontSize,
|
||||
lineHeight,
|
||||
borderRadius,
|
||||
iconColorInfo,
|
||||
iconColorSuccess,
|
||||
iconColorWarning,
|
||||
iconColorError,
|
||||
iconColorLoading,
|
||||
[createKey('textColor', type)]: textColor,
|
||||
[createKey('boxShadow', type)]: boxShadow,
|
||||
[createKey('color', type)]: color,
|
||||
[createKey('closeColor', type)]: closeColor,
|
||||
[createKey('closeColorPressed', type)]: closeColorPressed,
|
||||
[createKey('closeColorHover', type)]: closeColorHover
|
||||
}
|
||||
} = themeRef.value
|
||||
return {
|
||||
'--n-bezier': cubicBezierEaseInOut,
|
||||
'--n-margin': margin,
|
||||
'--n-padding': padding,
|
||||
'--n-max-width': maxWidth,
|
||||
'--n-font-size': fontSize,
|
||||
'--n-icon-margin': iconMargin,
|
||||
'--n-icon-size': iconSize,
|
||||
'--n-close-size': closeSize,
|
||||
'--n-close-margin': closeMargin,
|
||||
'--n-text-color': textColor,
|
||||
'--n-color': color,
|
||||
'--n-box-shadow': boxShadow,
|
||||
'--n-icon-color-info': iconColorInfo,
|
||||
'--n-icon-color-success': iconColorSuccess,
|
||||
'--n-icon-color-warning': iconColorWarning,
|
||||
'--n-icon-color-error': iconColorError,
|
||||
'--n-icon-color-loading': iconColorLoading,
|
||||
'--n-close-color': closeColor,
|
||||
'--n-close-color-pressed': closeColorPressed,
|
||||
'--n-close-color-hover': closeColorHover,
|
||||
'--n-line-height': lineHeight,
|
||||
'--n-border-radius': borderRadius
|
||||
}
|
||||
}),
|
||||
cssVars: inlineThemeDisabled ? undefined : inlineThemeDisabled,
|
||||
themeClass: themeClassHandle?.themeClass,
|
||||
onRender: themeClassHandle?.onRender,
|
||||
placement: messageProviderProps.placement
|
||||
}
|
||||
},
|
||||
@ -124,22 +136,25 @@ export default defineComponent({
|
||||
content,
|
||||
mergedClsPrefix,
|
||||
cssVars,
|
||||
themeClass,
|
||||
onRender,
|
||||
icon,
|
||||
handleClose
|
||||
} = this
|
||||
onRender?.()
|
||||
return (
|
||||
<div
|
||||
class={`${mergedClsPrefix}-message-wrapper`}
|
||||
class={[`${mergedClsPrefix}-message-wrapper`, themeClass]}
|
||||
onMouseenter={this.onMouseenter}
|
||||
onMouseleave={this.onMouseleave}
|
||||
style={Object.assign(
|
||||
style={[
|
||||
{
|
||||
alignItems: this.placement.startsWith('top')
|
||||
? 'flex-start'
|
||||
: 'flex-end'
|
||||
},
|
||||
cssVars as CSSProperties
|
||||
)}
|
||||
]}
|
||||
>
|
||||
{renderMessage ? (
|
||||
renderMessage(this.$props)
|
||||
|
||||
@ -17,6 +17,7 @@ import {
|
||||
import { createKey, keysOf, render } from '../../_utils'
|
||||
import { NBaseIcon, NBaseClose } from '../../_internal'
|
||||
import { notificationProviderInjectionKey } from './context'
|
||||
import { useConfig, useThemeClass } from '../../_mixins'
|
||||
|
||||
const iconMap = {
|
||||
info: <InfoIcon />,
|
||||
@ -55,10 +56,74 @@ export const Notification = defineComponent({
|
||||
name: 'Notification',
|
||||
props: notificationProps,
|
||||
setup (props) {
|
||||
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
|
||||
const { mergedClsPrefixRef, mergedThemeRef } = inject(
|
||||
notificationProviderInjectionKey
|
||||
)!
|
||||
const {
|
||||
mergedClsPrefixRef,
|
||||
mergedThemeRef,
|
||||
props: providerProps
|
||||
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
|
||||
} = inject(notificationProviderInjectionKey)!
|
||||
const { inlineThemeDisabled } = useConfig()
|
||||
const cssVarsRef = computed(() => {
|
||||
const { type } = props
|
||||
const {
|
||||
self: {
|
||||
color,
|
||||
textColor,
|
||||
closeColor,
|
||||
closeColorHover,
|
||||
closeColorPressed,
|
||||
headerTextColor,
|
||||
descriptionTextColor,
|
||||
actionTextColor,
|
||||
borderRadius,
|
||||
headerFontWeight,
|
||||
boxShadow,
|
||||
lineHeight,
|
||||
fontSize,
|
||||
closeMargin,
|
||||
closeSize,
|
||||
width,
|
||||
padding,
|
||||
[createKey('iconColor', type)]: iconColor
|
||||
},
|
||||
common: { cubicBezierEaseOut, cubicBezierEaseIn, cubicBezierEaseInOut }
|
||||
} = mergedThemeRef.value
|
||||
const { left, right, top, bottom } = getPadding(padding)
|
||||
return {
|
||||
'--n-color': color,
|
||||
'--n-font-size': fontSize,
|
||||
'--n-text-color': textColor,
|
||||
'--n-description-text-color': descriptionTextColor,
|
||||
'--n-action-text-color': actionTextColor,
|
||||
'--n-title-text-color': headerTextColor,
|
||||
'--n-title-font-weight': headerFontWeight,
|
||||
'--n-bezier': cubicBezierEaseInOut,
|
||||
'--n-bezier-ease-out': cubicBezierEaseOut,
|
||||
'--n-bezier-ease-in': cubicBezierEaseIn,
|
||||
'--n-border-radius': borderRadius,
|
||||
'--n-box-shadow': boxShadow,
|
||||
'--n-close-color': closeColor,
|
||||
'--n-close-color-hover': closeColorHover,
|
||||
'--n-close-color-pressed': closeColorPressed,
|
||||
'--n-line-height': lineHeight,
|
||||
'--n-icon-color': iconColor,
|
||||
'--n-close-margin': closeMargin,
|
||||
'--n-close-size': closeSize,
|
||||
'--n-width': width,
|
||||
'--n-padding-left': left,
|
||||
'--n-padding-right': right,
|
||||
'--n-padding-top': top,
|
||||
'--n-padding-bottom': bottom
|
||||
}
|
||||
})
|
||||
const themeClassHandle = inlineThemeDisabled
|
||||
? useThemeClass(
|
||||
'notification',
|
||||
computed(() => props.type[0]),
|
||||
cssVarsRef,
|
||||
providerProps
|
||||
)
|
||||
: undefined
|
||||
return {
|
||||
mergedClsPrefix: mergedClsPrefixRef,
|
||||
showAvatar: computed(() => {
|
||||
@ -67,71 +132,19 @@ export const Notification = defineComponent({
|
||||
handleCloseClick () {
|
||||
props.onClose()
|
||||
},
|
||||
cssVars: computed(() => {
|
||||
const { type } = props
|
||||
const {
|
||||
self: {
|
||||
color,
|
||||
textColor,
|
||||
closeColor,
|
||||
closeColorHover,
|
||||
closeColorPressed,
|
||||
headerTextColor,
|
||||
descriptionTextColor,
|
||||
actionTextColor,
|
||||
borderRadius,
|
||||
headerFontWeight,
|
||||
boxShadow,
|
||||
lineHeight,
|
||||
fontSize,
|
||||
closeMargin,
|
||||
closeSize,
|
||||
width,
|
||||
padding,
|
||||
[createKey('iconColor', type)]: iconColor
|
||||
},
|
||||
common: {
|
||||
cubicBezierEaseOut,
|
||||
cubicBezierEaseIn,
|
||||
cubicBezierEaseInOut
|
||||
}
|
||||
} = mergedThemeRef.value
|
||||
const { left, right, top, bottom } = getPadding(padding)
|
||||
return {
|
||||
'--n-color': color,
|
||||
'--n-font-size': fontSize,
|
||||
'--n-text-color': textColor,
|
||||
'--n-description-text-color': descriptionTextColor,
|
||||
'--n-action-text-color': actionTextColor,
|
||||
'--n-title-text-color': headerTextColor,
|
||||
'--n-title-font-weight': headerFontWeight,
|
||||
'--n-bezier': cubicBezierEaseInOut,
|
||||
'--n-bezier-ease-out': cubicBezierEaseOut,
|
||||
'--n-bezier-ease-in': cubicBezierEaseIn,
|
||||
'--n-border-radius': borderRadius,
|
||||
'--n-box-shadow': boxShadow,
|
||||
'--n-close-color': closeColor,
|
||||
'--n-close-color-hover': closeColorHover,
|
||||
'--n-close-color-pressed': closeColorPressed,
|
||||
'--n-line-height': lineHeight,
|
||||
'--n-icon-color': iconColor,
|
||||
'--n-close-margin': closeMargin,
|
||||
'--n-close-size': closeSize,
|
||||
'--n-width': width,
|
||||
'--n-padding-left': left,
|
||||
'--n-padding-right': right,
|
||||
'--n-padding-top': top,
|
||||
'--n-padding-bottom': bottom
|
||||
}
|
||||
})
|
||||
cssVars: inlineThemeDisabled ? undefined : cssVarsRef,
|
||||
themeClass: themeClassHandle?.themeClass,
|
||||
onRender: themeClassHandle?.onRender
|
||||
}
|
||||
},
|
||||
render () {
|
||||
const { mergedClsPrefix } = this
|
||||
this.onRender?.()
|
||||
return (
|
||||
<div
|
||||
class={[
|
||||
`${mergedClsPrefix}-notification`,
|
||||
this.themeClass,
|
||||
{
|
||||
[`${mergedClsPrefix}-notification--closable`]: this.closable,
|
||||
[`${mergedClsPrefix}-notification--show-avatar`]: this.showAvatar
|
||||
|
||||
@ -41,6 +41,7 @@ ExtractPropTypes<typeof notificationEnvOptions>
|
||||
>
|
||||
|
||||
export interface NotificationProviderInjection {
|
||||
props: ExtractPropTypes<typeof notificationProviderProps>
|
||||
mergedClsPrefixRef: Ref<string>
|
||||
mergedThemeRef: Ref<MergedTheme<NotificationTheme>>
|
||||
}
|
||||
@ -179,6 +180,7 @@ export default defineComponent({
|
||||
}
|
||||
provide(notificationApiInjectionKey, api)
|
||||
provide(notificationProviderInjectionKey, {
|
||||
props,
|
||||
mergedClsPrefixRef,
|
||||
mergedThemeRef: themeRef
|
||||
})
|
||||
|
||||
@ -20,7 +20,13 @@ import {
|
||||
} from 'vueuc'
|
||||
import { useIsMounted, useMergedState } from 'vooks'
|
||||
import { on, off } from 'evtd'
|
||||
import { useTheme, useFormItem, useConfig, ThemeProps } from '../../_mixins'
|
||||
import {
|
||||
useTheme,
|
||||
useFormItem,
|
||||
useConfig,
|
||||
ThemeProps,
|
||||
useThemeClass
|
||||
} from '../../_mixins'
|
||||
import {
|
||||
call,
|
||||
useAdjustedTo,
|
||||
@ -95,7 +101,8 @@ export default defineComponent({
|
||||
name: 'Slider',
|
||||
props: sliderProps,
|
||||
setup (props) {
|
||||
const { mergedClsPrefixRef, namespaceRef } = useConfig(props)
|
||||
const { mergedClsPrefixRef, namespaceRef, inlineThemeDisabled } =
|
||||
useConfig(props)
|
||||
const themeRef = useTheme(
|
||||
'Slider',
|
||||
'-slider',
|
||||
@ -520,6 +527,86 @@ export default defineComponent({
|
||||
}
|
||||
void nextTick(syncPosition)
|
||||
})
|
||||
const cssVarsRef = computed(() => {
|
||||
const {
|
||||
self: {
|
||||
railColor,
|
||||
railColorHover,
|
||||
fillColor,
|
||||
fillColorHover,
|
||||
handleColor,
|
||||
opacityDisabled,
|
||||
dotColor,
|
||||
dotColorModal,
|
||||
handleBoxShadow,
|
||||
handleBoxShadowHover,
|
||||
handleBoxShadowActive,
|
||||
handleBoxShadowFocus,
|
||||
dotBorder,
|
||||
dotBoxShadow,
|
||||
railHeight,
|
||||
railWidthVertical,
|
||||
handleSize,
|
||||
dotHeight,
|
||||
dotWidth,
|
||||
dotBorderRadius,
|
||||
fontSize,
|
||||
dotBorderActive,
|
||||
dotColorPopover
|
||||
},
|
||||
common: { cubicBezierEaseInOut }
|
||||
} = themeRef.value
|
||||
return {
|
||||
'--n-bezier': cubicBezierEaseInOut,
|
||||
'--n-dot-border': dotBorder,
|
||||
'--n-dot-border-active': dotBorderActive,
|
||||
'--n-dot-border-radius': dotBorderRadius,
|
||||
'--n-dot-box-shadow': dotBoxShadow,
|
||||
'--n-dot-color': dotColor,
|
||||
'--n-dot-color-modal': dotColorModal,
|
||||
'--n-dot-color-popover': dotColorPopover,
|
||||
'--n-dot-height': dotHeight,
|
||||
'--n-dot-width': dotWidth,
|
||||
'--n-fill-color': fillColor,
|
||||
'--n-fill-color-hover': fillColorHover,
|
||||
'--n-font-size': fontSize,
|
||||
'--n-handle-box-shadow': handleBoxShadow,
|
||||
'--n-handle-box-shadow-active': handleBoxShadowActive,
|
||||
'--n-handle-box-shadow-focus': handleBoxShadowFocus,
|
||||
'--n-handle-box-shadow-hover': handleBoxShadowHover,
|
||||
'--n-handle-color': handleColor,
|
||||
'--n-handle-size': handleSize,
|
||||
'--n-opacity-disabled': opacityDisabled,
|
||||
'--n-rail-color': railColor,
|
||||
'--n-rail-color-hover': railColorHover,
|
||||
'--n-rail-height': railHeight,
|
||||
'--n-rail-width-vertical': railWidthVertical
|
||||
}
|
||||
})
|
||||
const themeClassHandle = inlineThemeDisabled
|
||||
? useThemeClass('slider', undefined, cssVarsRef, props)
|
||||
: undefined
|
||||
const indicatorCssVarsRef = computed(() => {
|
||||
const {
|
||||
self: {
|
||||
fontSize,
|
||||
indicatorColor,
|
||||
indicatorBoxShadow,
|
||||
indicatorTextColor,
|
||||
indicatorBorderRadius
|
||||
}
|
||||
} = themeRef.value
|
||||
return {
|
||||
'--n-font-size': fontSize,
|
||||
'--n-indicator-border-radius': indicatorBorderRadius,
|
||||
'--n-indicator-box-shadow': indicatorBoxShadow,
|
||||
'--n-indicator-color': indicatorColor,
|
||||
'--n-indicator-text-color': indicatorTextColor
|
||||
}
|
||||
})
|
||||
const indicatorThemeClassHandle = inlineThemeDisabled
|
||||
? useThemeClass('slider-indicator', undefined, indicatorCssVarsRef, props)
|
||||
: undefined
|
||||
|
||||
return {
|
||||
mergedClsPrefix: mergedClsPrefixRef,
|
||||
@ -548,88 +635,22 @@ export default defineComponent({
|
||||
handleHandleMouseEnter,
|
||||
handleHandleMouseLeave,
|
||||
handleRailKeyDown,
|
||||
indicatorCssVars: computed(() => {
|
||||
const {
|
||||
self: {
|
||||
fontSize,
|
||||
indicatorColor,
|
||||
indicatorBoxShadow,
|
||||
indicatorTextColor,
|
||||
indicatorBorderRadius
|
||||
}
|
||||
} = themeRef.value
|
||||
return {
|
||||
'--n-font-size': fontSize,
|
||||
'--n-indicator-border-radius': indicatorBorderRadius,
|
||||
'--n-indicator-box-shadow': indicatorBoxShadow,
|
||||
'--n-indicator-color': indicatorColor,
|
||||
'--n-indicator-text-color': indicatorTextColor
|
||||
}
|
||||
}),
|
||||
cssVars: computed(() => {
|
||||
const {
|
||||
self: {
|
||||
railColor,
|
||||
railColorHover,
|
||||
fillColor,
|
||||
fillColorHover,
|
||||
handleColor,
|
||||
opacityDisabled,
|
||||
dotColor,
|
||||
dotColorModal,
|
||||
handleBoxShadow,
|
||||
handleBoxShadowHover,
|
||||
handleBoxShadowActive,
|
||||
handleBoxShadowFocus,
|
||||
dotBorder,
|
||||
dotBoxShadow,
|
||||
railHeight,
|
||||
railWidthVertical,
|
||||
handleSize,
|
||||
dotHeight,
|
||||
dotWidth,
|
||||
dotBorderRadius,
|
||||
fontSize,
|
||||
dotBorderActive,
|
||||
dotColorPopover
|
||||
},
|
||||
common: { cubicBezierEaseInOut }
|
||||
} = themeRef.value
|
||||
return {
|
||||
'--n-bezier': cubicBezierEaseInOut,
|
||||
'--n-dot-border': dotBorder,
|
||||
'--n-dot-border-active': dotBorderActive,
|
||||
'--n-dot-border-radius': dotBorderRadius,
|
||||
'--n-dot-box-shadow': dotBoxShadow,
|
||||
'--n-dot-color': dotColor,
|
||||
'--n-dot-color-modal': dotColorModal,
|
||||
'--n-dot-color-popover': dotColorPopover,
|
||||
'--n-dot-height': dotHeight,
|
||||
'--n-dot-width': dotWidth,
|
||||
'--n-fill-color': fillColor,
|
||||
'--n-fill-color-hover': fillColorHover,
|
||||
'--n-font-size': fontSize,
|
||||
'--n-handle-box-shadow': handleBoxShadow,
|
||||
'--n-handle-box-shadow-active': handleBoxShadowActive,
|
||||
'--n-handle-box-shadow-focus': handleBoxShadowFocus,
|
||||
'--n-handle-box-shadow-hover': handleBoxShadowHover,
|
||||
'--n-handle-color': handleColor,
|
||||
'--n-handle-size': handleSize,
|
||||
'--n-opacity-disabled': opacityDisabled,
|
||||
'--n-rail-color': railColor,
|
||||
'--n-rail-color-hover': railColorHover,
|
||||
'--n-rail-height': railHeight,
|
||||
'--n-rail-width-vertical': railWidthVertical
|
||||
}
|
||||
})
|
||||
indicatorCssVars: inlineThemeDisabled ? undefined : indicatorCssVarsRef,
|
||||
indicatorThemeClass: indicatorThemeClassHandle?.themeClass,
|
||||
indicatorOnRender: indicatorThemeClassHandle?.onRender,
|
||||
cssVars: inlineThemeDisabled ? undefined : cssVarsRef,
|
||||
themeClass: themeClassHandle?.themeClass,
|
||||
onRender: themeClassHandle?.onRender
|
||||
}
|
||||
},
|
||||
render () {
|
||||
const { mergedClsPrefix, formatTooltip } = this
|
||||
const { mergedClsPrefix, themeClass, formatTooltip } = this
|
||||
this.onRender?.()
|
||||
return (
|
||||
<div
|
||||
class={[
|
||||
`${mergedClsPrefix}-slider`,
|
||||
themeClass,
|
||||
{
|
||||
[`${mergedClsPrefix}-slider--disabled`]: this.mergedDisabled,
|
||||
[`${mergedClsPrefix}-slider--active`]: this.activeIndex !== -1,
|
||||
@ -652,10 +673,8 @@ export default defineComponent({
|
||||
<div
|
||||
class={[
|
||||
`${mergedClsPrefix}-slider-dots`,
|
||||
{
|
||||
[`${mergedClsPrefix}-slider-dots--transition-disabled`]:
|
||||
this.dotTransitionDisabled
|
||||
}
|
||||
this.dotTransitionDisabled &&
|
||||
`${mergedClsPrefix}-slider-dots--transition-disabled`
|
||||
]}
|
||||
>
|
||||
{this.markInfos.map((mark) => (
|
||||
@ -728,22 +747,29 @@ export default defineComponent({
|
||||
}
|
||||
>
|
||||
{{
|
||||
default: () =>
|
||||
showTooltip ? (
|
||||
<div
|
||||
class={[
|
||||
`${mergedClsPrefix}-slider-handle-indicator`,
|
||||
`${mergedClsPrefix}-slider-handle-indicator--${this.mergedPlacement}`
|
||||
]}
|
||||
style={
|
||||
this.indicatorCssVars as CSSProperties
|
||||
}
|
||||
>
|
||||
{typeof formatTooltip === 'function'
|
||||
? formatTooltip(value)
|
||||
: value}
|
||||
</div>
|
||||
) : null
|
||||
default: () => {
|
||||
if (showTooltip) {
|
||||
this.indicatorOnRender?.()
|
||||
return (
|
||||
<div
|
||||
class={[
|
||||
`${mergedClsPrefix}-slider-handle-indicator`,
|
||||
this.indicatorThemeClass,
|
||||
`${mergedClsPrefix}-slider-handle-indicator--${this.mergedPlacement}`
|
||||
]}
|
||||
style={
|
||||
this
|
||||
.indicatorCssVars as CSSProperties
|
||||
}
|
||||
>
|
||||
{typeof formatTooltip === 'function'
|
||||
? formatTooltip(value)
|
||||
: value}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
return null
|
||||
}
|
||||
}}
|
||||
</Transition>
|
||||
)
|
||||
|
||||
@ -14,6 +14,7 @@ import { NIconSwitchTransition, NBaseIcon } from '../../_internal'
|
||||
import { createKey, throwError } from '../../_utils'
|
||||
import type { ExtractPublicPropTypes } from '../../_utils'
|
||||
import { stepsInjectionKey } from './Steps'
|
||||
import { useConfig, useThemeClass } from '../../_mixins'
|
||||
|
||||
const stepProps = {
|
||||
status: String as PropType<'process' | 'finish' | 'error' | 'wait'>,
|
||||
@ -36,6 +37,8 @@ export default defineComponent({
|
||||
|
||||
if (!NSteps) throwError('step', '`n-step` must be placed inside `n-steps`.')
|
||||
|
||||
const { inlineThemeDisabled } = useConfig()
|
||||
|
||||
const {
|
||||
props: stepsProps,
|
||||
mergedThemeRef,
|
||||
@ -66,55 +69,70 @@ export default defineComponent({
|
||||
return 'process'
|
||||
}
|
||||
)
|
||||
const cssVarsRef = computed(() => {
|
||||
const { value: status } = mergedStatusRef
|
||||
const { size } = stepsProps
|
||||
const {
|
||||
common: { cubicBezierEaseInOut },
|
||||
self: {
|
||||
stepHeaderFontWeight,
|
||||
[createKey('stepHeaderFontSize', size)]: stepHeaderFontSize,
|
||||
[createKey('indicatorIndexFontSize', size)]: indicatorIndexFontSize,
|
||||
[createKey('indicatorSize', size)]: indicatorSize,
|
||||
[createKey('indicatorIconSize', size)]: indicatorIconSize,
|
||||
[createKey('indicatorTextColor', status)]: indicatorTextColor,
|
||||
[createKey('indicatorBorderColor', status)]: indicatorBorderColor,
|
||||
[createKey('headerTextColor', status)]: headerTextColor,
|
||||
[createKey('splitorColor', status)]: splitorColor,
|
||||
[createKey('indicatorColor', status)]: indicatorColor,
|
||||
[createKey('descriptionTextColor', status)]: descriptionTextColor
|
||||
}
|
||||
} = mergedThemeRef.value
|
||||
return {
|
||||
'--n-bezier': cubicBezierEaseInOut,
|
||||
'--n-description-text-color': descriptionTextColor,
|
||||
'--n-header-text-color': headerTextColor,
|
||||
'--n-indicator-border-color': indicatorBorderColor,
|
||||
'--n-indicator-color': indicatorColor,
|
||||
'--n-indicator-icon-size': indicatorIconSize,
|
||||
'--n-indicator-index-font-size': indicatorIndexFontSize,
|
||||
'--n-indicator-size': indicatorSize,
|
||||
'--n-indicator-text-color': indicatorTextColor,
|
||||
'--n-splitor-color': splitorColor,
|
||||
'--n-step-header-font-size': stepHeaderFontSize,
|
||||
'--n-step-header-font-weight': stepHeaderFontWeight
|
||||
}
|
||||
})
|
||||
const themeClassHandle = useThemeClass(
|
||||
'step',
|
||||
computed(() => {
|
||||
const { value: status } = mergedStatusRef
|
||||
const { size } = stepsProps
|
||||
return `${status[0]}${size[0]}`
|
||||
}),
|
||||
cssVarsRef,
|
||||
stepsProps
|
||||
)
|
||||
return {
|
||||
stepsSlots,
|
||||
mergedClsPrefix: mergedClsPrefixRef,
|
||||
vertical: verticalRef,
|
||||
mergedStatus: mergedStatusRef,
|
||||
cssVars: computed(() => {
|
||||
const { value: status } = mergedStatusRef
|
||||
const { size } = stepsProps
|
||||
const {
|
||||
common: { cubicBezierEaseInOut },
|
||||
self: {
|
||||
stepHeaderFontWeight,
|
||||
[createKey('stepHeaderFontSize', size)]: stepHeaderFontSize,
|
||||
[createKey('indicatorIndexFontSize', size)]: indicatorIndexFontSize,
|
||||
[createKey('indicatorSize', size)]: indicatorSize,
|
||||
[createKey('indicatorIconSize', size)]: indicatorIconSize,
|
||||
[createKey('indicatorTextColor', status)]: indicatorTextColor,
|
||||
[createKey('indicatorBorderColor', status)]: indicatorBorderColor,
|
||||
[createKey('headerTextColor', status)]: headerTextColor,
|
||||
[createKey('splitorColor', status)]: splitorColor,
|
||||
[createKey('indicatorColor', status)]: indicatorColor,
|
||||
[createKey('descriptionTextColor', status)]: descriptionTextColor
|
||||
}
|
||||
} = mergedThemeRef.value
|
||||
return {
|
||||
'--n-bezier': cubicBezierEaseInOut,
|
||||
'--n-description-text-color': descriptionTextColor,
|
||||
'--n-header-text-color': headerTextColor,
|
||||
'--n-indicator-border-color': indicatorBorderColor,
|
||||
'--n-indicator-color': indicatorColor,
|
||||
'--n-indicator-icon-size': indicatorIconSize,
|
||||
'--n-indicator-index-font-size': indicatorIndexFontSize,
|
||||
'--n-indicator-size': indicatorSize,
|
||||
'--n-indicator-text-color': indicatorTextColor,
|
||||
'--n-splitor-color': splitorColor,
|
||||
'--n-step-header-font-size': stepHeaderFontSize,
|
||||
'--n-step-header-font-weight': stepHeaderFontWeight
|
||||
}
|
||||
})
|
||||
cssVars: inlineThemeDisabled ? undefined : cssVarsRef,
|
||||
themeClass: themeClassHandle?.themeClass,
|
||||
onRender: themeClassHandle?.onRender
|
||||
}
|
||||
},
|
||||
render () {
|
||||
const showDescription =
|
||||
this.description !== undefined || this.$slots.default
|
||||
const { mergedClsPrefix } = this
|
||||
const { mergedClsPrefix, onRender } = this
|
||||
onRender?.()
|
||||
return (
|
||||
<div
|
||||
class={[
|
||||
`${mergedClsPrefix}-step`,
|
||||
this.themeClass,
|
||||
showDescription && `${mergedClsPrefix}-step--show-description`
|
||||
]}
|
||||
style={this.cssVars as CSSProperties}
|
||||
|
||||
@ -36,7 +36,13 @@ import { strictParse } from '../../date-picker/src/utils'
|
||||
import { TimeIcon } from '../../_internal/icons'
|
||||
import { InputInst, NInput } from '../../input'
|
||||
import { NBaseIcon } from '../../_internal'
|
||||
import { useConfig, useTheme, useLocale, useFormItem } from '../../_mixins'
|
||||
import {
|
||||
useConfig,
|
||||
useTheme,
|
||||
useLocale,
|
||||
useFormItem,
|
||||
useThemeClass
|
||||
} from '../../_mixins'
|
||||
import type { ThemeProps } from '../../_mixins'
|
||||
import { call, useAdjustedTo, warnOnce } from '../../_utils'
|
||||
import type { MaybeArray, ExtractPublicPropTypes } from '../../_utils'
|
||||
@ -164,8 +170,12 @@ export default defineComponent({
|
||||
})
|
||||
}
|
||||
|
||||
const { mergedBorderedRef, mergedClsPrefixRef, namespaceRef } =
|
||||
useConfig(props)
|
||||
const {
|
||||
mergedBorderedRef,
|
||||
mergedClsPrefixRef,
|
||||
namespaceRef,
|
||||
inlineThemeDisabled
|
||||
} = useConfig(props)
|
||||
const { localeRef, dateLocaleRef } = useLocale('TimePicker')
|
||||
const formItem = useFormItem(props)
|
||||
const { mergedSizeRef, mergedDisabledRef, mergedStatusRef } = formItem
|
||||
@ -634,8 +644,48 @@ export default defineComponent({
|
||||
inputInstRef.value?.blur()
|
||||
}
|
||||
}
|
||||
const cssVarsRef = computed(() => {
|
||||
const {
|
||||
self: {
|
||||
panelColor,
|
||||
itemTextColor,
|
||||
itemTextColorActive,
|
||||
itemColorHover,
|
||||
panelDividerColor,
|
||||
panelBoxShadow,
|
||||
itemOpacityDisabled,
|
||||
borderRadius,
|
||||
itemFontSize,
|
||||
itemWidth,
|
||||
itemHeight,
|
||||
panelActionPadding,
|
||||
itemBorderRadius
|
||||
},
|
||||
common: { cubicBezierEaseInOut }
|
||||
} = themeRef.value
|
||||
return {
|
||||
'--n-bezier': cubicBezierEaseInOut,
|
||||
'--n-border-radius': borderRadius,
|
||||
'--n-item-color-hover': itemColorHover,
|
||||
'--n-item-font-size': itemFontSize,
|
||||
'--n-item-height': itemHeight,
|
||||
'--n-item-opacity-disabled': itemOpacityDisabled,
|
||||
'--n-item-text-color': itemTextColor,
|
||||
'--n-item-text-color-active': itemTextColorActive,
|
||||
'--n-item-width': itemWidth,
|
||||
'--n-panel-action-padding': panelActionPadding,
|
||||
'--n-panel-box-shadow': panelBoxShadow,
|
||||
'--n-panel-color': panelColor,
|
||||
'--n-panel-divider-color': panelDividerColor,
|
||||
'--n-item-border-radius': itemBorderRadius
|
||||
}
|
||||
})
|
||||
const themeClassHandle = inlineThemeDisabled
|
||||
? useThemeClass('time-picker', undefined, cssVarsRef, props)
|
||||
: undefined
|
||||
return {
|
||||
...exposedMethods,
|
||||
focus: exposedMethods.focus,
|
||||
blur: exposedMethods.blur,
|
||||
mergedStatus: mergedStatusRef,
|
||||
mergedBordered: mergedBorderedRef,
|
||||
mergedClsPrefix: mergedClsPrefixRef,
|
||||
@ -697,42 +747,9 @@ export default defineComponent({
|
||||
'--n-bezier': cubicBezierEaseInOut
|
||||
}
|
||||
}),
|
||||
cssVars: computed(() => {
|
||||
const {
|
||||
self: {
|
||||
panelColor,
|
||||
itemTextColor,
|
||||
itemTextColorActive,
|
||||
itemColorHover,
|
||||
panelDividerColor,
|
||||
panelBoxShadow,
|
||||
itemOpacityDisabled,
|
||||
borderRadius,
|
||||
itemFontSize,
|
||||
itemWidth,
|
||||
itemHeight,
|
||||
panelActionPadding,
|
||||
itemBorderRadius
|
||||
},
|
||||
common: { cubicBezierEaseInOut }
|
||||
} = themeRef.value
|
||||
return {
|
||||
'--n-bezier': cubicBezierEaseInOut,
|
||||
'--n-border-radius': borderRadius,
|
||||
'--n-item-color-hover': itemColorHover,
|
||||
'--n-item-font-size': itemFontSize,
|
||||
'--n-item-height': itemHeight,
|
||||
'--n-item-opacity-disabled': itemOpacityDisabled,
|
||||
'--n-item-text-color': itemTextColor,
|
||||
'--n-item-text-color-active': itemTextColorActive,
|
||||
'--n-item-width': itemWidth,
|
||||
'--n-panel-action-padding': panelActionPadding,
|
||||
'--n-panel-box-shadow': panelBoxShadow,
|
||||
'--n-panel-color': panelColor,
|
||||
'--n-panel-divider-color': panelDividerColor,
|
||||
'--n-item-border-radius': itemBorderRadius
|
||||
}
|
||||
})
|
||||
cssVars: inlineThemeDisabled ? undefined : cssVarsRef,
|
||||
themeClass: themeClassHandle?.themeClass,
|
||||
onRender: themeClassHandle?.onRender
|
||||
}
|
||||
},
|
||||
render () {
|
||||
@ -809,49 +826,53 @@ export default defineComponent({
|
||||
appear={this.isMounted}
|
||||
>
|
||||
{{
|
||||
default: () =>
|
||||
this.mergedShow
|
||||
? withDirectives(
|
||||
<Panel
|
||||
ref="panelInstRef"
|
||||
actions={this.actions}
|
||||
style={this.cssVars as CSSProperties}
|
||||
seconds={this.seconds}
|
||||
minutes={this.minutes}
|
||||
hours={this.hours}
|
||||
transitionDisabled={this.transitionDisabled}
|
||||
hourValue={this.hourValue}
|
||||
showHour={this.hourInFormat}
|
||||
isHourInvalid={this.isHourInvalid}
|
||||
isHourDisabled={this.isHourDisabled}
|
||||
minuteValue={this.minuteValue}
|
||||
showMinute={this.minuteInFormat}
|
||||
isMinuteInvalid={this.isMinuteInvalid}
|
||||
isMinuteDisabled={this.isMinuteDisabled}
|
||||
secondValue={this.secondValue}
|
||||
amPmValue={this.amPmValue}
|
||||
showSecond={this.secondInFormat}
|
||||
isSecondInvalid={this.isSecondInvalid}
|
||||
isSecondDisabled={this.isSecondDisabled}
|
||||
isValueInvalid={this.isValueInvalid}
|
||||
nowText={this.localizedNow}
|
||||
confirmText={this.localizedPositiveText}
|
||||
use12Hours={this.use12Hours}
|
||||
onFocusout={this.handleMenuFocusOut}
|
||||
onKeydown={this.handleMenuKeyDown}
|
||||
onHourClick={this.handleHourClick}
|
||||
onMinuteClick={this.handleMinuteClick}
|
||||
onSecondClick={this.handleSecondClick}
|
||||
onAmPmClick={this.handleAmPmClick}
|
||||
onNowClick={this.handleNowClick}
|
||||
onConfirmClick={this.handleConfirmClick}
|
||||
onFocusDetectorFocus={
|
||||
this.handleFocusDetectorFocus
|
||||
}
|
||||
/>,
|
||||
[[clickoutside, this.handleClickOutside]]
|
||||
default: () => {
|
||||
if (this.mergedShow) {
|
||||
this.onRender?.()
|
||||
return withDirectives(
|
||||
<Panel
|
||||
ref="panelInstRef"
|
||||
actions={this.actions}
|
||||
class={this.themeClass}
|
||||
style={this.cssVars as CSSProperties}
|
||||
seconds={this.seconds}
|
||||
minutes={this.minutes}
|
||||
hours={this.hours}
|
||||
transitionDisabled={this.transitionDisabled}
|
||||
hourValue={this.hourValue}
|
||||
showHour={this.hourInFormat}
|
||||
isHourInvalid={this.isHourInvalid}
|
||||
isHourDisabled={this.isHourDisabled}
|
||||
minuteValue={this.minuteValue}
|
||||
showMinute={this.minuteInFormat}
|
||||
isMinuteInvalid={this.isMinuteInvalid}
|
||||
isMinuteDisabled={this.isMinuteDisabled}
|
||||
secondValue={this.secondValue}
|
||||
amPmValue={this.amPmValue}
|
||||
showSecond={this.secondInFormat}
|
||||
isSecondInvalid={this.isSecondInvalid}
|
||||
isSecondDisabled={this.isSecondDisabled}
|
||||
isValueInvalid={this.isValueInvalid}
|
||||
nowText={this.localizedNow}
|
||||
confirmText={this.localizedPositiveText}
|
||||
use12Hours={this.use12Hours}
|
||||
onFocusout={this.handleMenuFocusOut}
|
||||
onKeydown={this.handleMenuKeyDown}
|
||||
onHourClick={this.handleHourClick}
|
||||
onMinuteClick={this.handleMinuteClick}
|
||||
onSecondClick={this.handleSecondClick}
|
||||
onAmPmClick={this.handleAmPmClick}
|
||||
onNowClick={this.handleNowClick}
|
||||
onConfirmClick={this.handleConfirmClick}
|
||||
onFocusDetectorFocus={
|
||||
this.handleFocusDetectorFocus
|
||||
}
|
||||
/>,
|
||||
[[clickoutside, this.handleClickOutside]]
|
||||
)
|
||||
: null
|
||||
}
|
||||
return null
|
||||
}
|
||||
}}
|
||||
</Transition>
|
||||
)
|
||||
|
||||
@ -9,6 +9,7 @@ import {
|
||||
import { createKey, formatLength, throwError } from '../../_utils'
|
||||
import type { ExtractPublicPropTypes } from '../../_utils'
|
||||
import { timelineInjectionKey } from './Timeline'
|
||||
import { useConfig, useThemeClass } from '../../_mixins'
|
||||
|
||||
const timelineItemProps = {
|
||||
time: [String, Number] as PropType<string | number>,
|
||||
@ -36,53 +37,73 @@ export default defineComponent({
|
||||
'`n-timeline-item` must be placed inside `n-timeline`.'
|
||||
)
|
||||
}
|
||||
const { inlineThemeDisabled } = useConfig()
|
||||
const cssVarsRef = computed(() => {
|
||||
const {
|
||||
props: { size, iconSize: iconSizeProp },
|
||||
mergedThemeRef
|
||||
} = NTimeline
|
||||
const { type } = props
|
||||
const {
|
||||
self: {
|
||||
titleTextColor,
|
||||
contentTextColor,
|
||||
metaTextColor,
|
||||
lineColor,
|
||||
titleFontWeight,
|
||||
contentFontSize,
|
||||
[createKey('iconSize', size)]: iconSize,
|
||||
[createKey('titleMargin', size)]: titleMargin,
|
||||
[createKey('titleFontSize', size)]: titleFontSize,
|
||||
[createKey('circleBorder', type)]: circleBorder,
|
||||
[createKey('iconColor', type)]: iconColor
|
||||
},
|
||||
common: { cubicBezierEaseInOut }
|
||||
} = mergedThemeRef.value
|
||||
return {
|
||||
'--n-bezier': cubicBezierEaseInOut,
|
||||
'--n-circle-border': circleBorder,
|
||||
'--n-icon-color': iconColor,
|
||||
'--n-content-font-size': contentFontSize,
|
||||
'--n-content-text-color': contentTextColor,
|
||||
'--n-line-color': lineColor,
|
||||
'--n-meta-text-color': metaTextColor,
|
||||
'--n-title-font-size': titleFontSize,
|
||||
'--n-title-font-weight': titleFontWeight,
|
||||
'--n-title-margin': titleMargin,
|
||||
'--n-title-text-color': titleTextColor,
|
||||
'--n-icon-size': formatLength(iconSizeProp) || iconSize
|
||||
}
|
||||
})
|
||||
const themeClassHandle = inlineThemeDisabled
|
||||
? useThemeClass(
|
||||
'timeline-item',
|
||||
computed(() => {
|
||||
const {
|
||||
props: { size, iconSize: iconSizeProp }
|
||||
} = NTimeline
|
||||
const { type } = props
|
||||
return `${size[0]}${iconSizeProp || 'a'}${type[0]}`
|
||||
}),
|
||||
cssVarsRef,
|
||||
NTimeline.props
|
||||
)
|
||||
: undefined
|
||||
return {
|
||||
mergedClsPrefix: NTimeline.mergedClsPrefixRef,
|
||||
cssVars: computed(() => {
|
||||
const {
|
||||
props: { size, iconSize: iconSizeProp },
|
||||
mergedThemeRef
|
||||
} = NTimeline
|
||||
const { type } = props
|
||||
const {
|
||||
self: {
|
||||
titleTextColor,
|
||||
contentTextColor,
|
||||
metaTextColor,
|
||||
lineColor,
|
||||
titleFontWeight,
|
||||
contentFontSize,
|
||||
[createKey('iconSize', size)]: iconSize,
|
||||
[createKey('titleMargin', size)]: titleMargin,
|
||||
[createKey('titleFontSize', size)]: titleFontSize,
|
||||
[createKey('circleBorder', type)]: circleBorder,
|
||||
[createKey('iconColor', type)]: iconColor
|
||||
},
|
||||
common: { cubicBezierEaseInOut }
|
||||
} = mergedThemeRef.value
|
||||
return {
|
||||
'--n-bezier': cubicBezierEaseInOut,
|
||||
'--n-circle-border': circleBorder,
|
||||
'--n-icon-color': iconColor,
|
||||
'--n-content-font-size': contentFontSize,
|
||||
'--n-content-text-color': contentTextColor,
|
||||
'--n-line-color': lineColor,
|
||||
'--n-meta-text-color': metaTextColor,
|
||||
'--n-title-font-size': titleFontSize,
|
||||
'--n-title-font-weight': titleFontWeight,
|
||||
'--n-title-margin': titleMargin,
|
||||
'--n-title-text-color': titleTextColor,
|
||||
'--n-icon-size': formatLength(iconSizeProp) || iconSize
|
||||
}
|
||||
})
|
||||
cssVars: inlineThemeDisabled ? undefined : cssVarsRef,
|
||||
themeClass: themeClassHandle?.themeClass,
|
||||
onRender: themeClassHandle?.onRender
|
||||
}
|
||||
},
|
||||
render () {
|
||||
const { mergedClsPrefix, color, $slots } = this
|
||||
const { mergedClsPrefix, color, onRender, $slots } = this
|
||||
onRender?.()
|
||||
return (
|
||||
<div
|
||||
class={[
|
||||
`${mergedClsPrefix}-timeline-item`,
|
||||
this.themeClass,
|
||||
`${mergedClsPrefix}-timeline-item--${this.type}-type`
|
||||
]}
|
||||
style={this.cssVars as CSSProperties}
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
export default {
|
||||
titleMarginMedium: 0,
|
||||
titleMarginMedium: '0',
|
||||
titleMarginLarge: '-2px 0 0 0',
|
||||
titleFontSizeMedium: '14px',
|
||||
titleFontSizeLarge: '16px',
|
||||
|
||||
@ -24,7 +24,7 @@ import {
|
||||
import { useMergedState } from 'vooks'
|
||||
import { VirtualListInst, VVirtualList } from 'vueuc'
|
||||
import { getPadding } from 'seemly'
|
||||
import { useConfig, useTheme } from '../../_mixins'
|
||||
import { useConfig, useTheme, useThemeClass } from '../../_mixins'
|
||||
import type { ThemeProps } from '../../_mixins'
|
||||
import { call, createDataKey, warn } from '../../_utils'
|
||||
import type { ExtractPublicPropTypes, MaybeArray } from '../../_utils'
|
||||
@ -244,7 +244,7 @@ export default defineComponent({
|
||||
name: 'Tree',
|
||||
props: treeProps,
|
||||
setup (props) {
|
||||
const { mergedClsPrefixRef } = useConfig(props)
|
||||
const { mergedClsPrefixRef, inlineThemeDisabled } = useConfig(props)
|
||||
const themeRef = useTheme(
|
||||
'Tree',
|
||||
'-tree',
|
||||
@ -1198,7 +1198,39 @@ export default defineComponent({
|
||||
handleKeydown,
|
||||
handleKeyup
|
||||
}
|
||||
|
||||
const cssVarsRef = computed(() => {
|
||||
const {
|
||||
common: { cubicBezierEaseInOut },
|
||||
self: {
|
||||
fontSize,
|
||||
nodeBorderRadius,
|
||||
nodeColorHover,
|
||||
nodeColorPressed,
|
||||
nodeColorActive,
|
||||
arrowColor,
|
||||
loadingColor,
|
||||
nodeTextColor,
|
||||
nodeTextColorDisabled,
|
||||
dropMarkColor
|
||||
}
|
||||
} = themeRef.value
|
||||
return {
|
||||
'--n-arrow-color': arrowColor,
|
||||
'--n-loading-color': loadingColor,
|
||||
'--n-bezier': cubicBezierEaseInOut,
|
||||
'--n-font-size': fontSize,
|
||||
'--n-node-border-radius': nodeBorderRadius,
|
||||
'--n-node-color-active': nodeColorActive,
|
||||
'--n-node-color-hover': nodeColorHover,
|
||||
'--n-node-color-pressed': nodeColorPressed,
|
||||
'--n-node-text-color': nodeTextColor,
|
||||
'--n-node-text-color-disabled': nodeTextColorDisabled,
|
||||
'--n-drop-mark-color': dropMarkColor
|
||||
}
|
||||
})
|
||||
const themeClassHandle = inlineThemeDisabled
|
||||
? useThemeClass('tree', undefined, cssVarsRef, props)
|
||||
: undefined
|
||||
return {
|
||||
mergedClsPrefix: mergedClsPrefixRef,
|
||||
mergedTheme: themeRef,
|
||||
@ -1214,37 +1246,11 @@ export default defineComponent({
|
||||
getScrollContent,
|
||||
handleAfterEnter,
|
||||
handleResize,
|
||||
cssVars: computed(() => {
|
||||
const {
|
||||
common: { cubicBezierEaseInOut },
|
||||
self: {
|
||||
fontSize,
|
||||
nodeBorderRadius,
|
||||
nodeColorHover,
|
||||
nodeColorPressed,
|
||||
nodeColorActive,
|
||||
arrowColor,
|
||||
loadingColor,
|
||||
nodeTextColor,
|
||||
nodeTextColorDisabled,
|
||||
dropMarkColor
|
||||
}
|
||||
} = themeRef.value
|
||||
return {
|
||||
'--n-arrow-color': arrowColor,
|
||||
'--n-loading-color': loadingColor,
|
||||
'--n-bezier': cubicBezierEaseInOut,
|
||||
'--n-font-size': fontSize,
|
||||
'--n-node-border-radius': nodeBorderRadius,
|
||||
'--n-node-color-active': nodeColorActive,
|
||||
'--n-node-color-hover': nodeColorHover,
|
||||
'--n-node-color-pressed': nodeColorPressed,
|
||||
'--n-node-text-color': nodeTextColor,
|
||||
'--n-node-text-color-disabled': nodeTextColorDisabled,
|
||||
'--n-drop-mark-color': dropMarkColor
|
||||
}
|
||||
}),
|
||||
...exposedMethods
|
||||
handleKeydown: exposedMethods.handleKeydown,
|
||||
handleKeyup: exposedMethods.handleKeyup,
|
||||
cssVars: inlineThemeDisabled ? undefined : cssVarsRef,
|
||||
themeClass: themeClassHandle?.themeClass,
|
||||
onRender: themeClassHandle?.onRender
|
||||
}
|
||||
},
|
||||
render () {
|
||||
@ -1262,7 +1268,7 @@ export default defineComponent({
|
||||
} = this
|
||||
const mergedFocusable = internalFocusable && !disabled
|
||||
const tabindex = mergedFocusable ? '0' : undefined
|
||||
const treeClass = [
|
||||
const treeClass: Array<string | boolean | undefined> = [
|
||||
`${mergedClsPrefix}-tree`,
|
||||
checkable && `${mergedClsPrefix}-tree--checkable`,
|
||||
(blockLine || blockNode) && `${mergedClsPrefix}-tree--block-node`,
|
||||
@ -1285,7 +1291,6 @@ export default defineComponent({
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
if (this.virtualScroll) {
|
||||
const { mergedTheme, internalScrollablePadding } = this
|
||||
const padding = getPadding(internalScrollablePadding || '0')
|
||||
@ -1304,37 +1309,43 @@ export default defineComponent({
|
||||
onFocusout={mergedFocusable ? handleFocusout : undefined}
|
||||
>
|
||||
{{
|
||||
default: () => (
|
||||
<VVirtualList
|
||||
ref="virtualListInstRef"
|
||||
items={this.fNodes}
|
||||
itemSize={ITEM_SIZE}
|
||||
ignoreItemResize={this.aip}
|
||||
paddingTop={padding.top}
|
||||
paddingBottom={padding.bottom}
|
||||
style={[
|
||||
this.cssVars as CSSProperties,
|
||||
{
|
||||
paddingLeft: padding.left,
|
||||
paddingRight: padding.right
|
||||
}
|
||||
]}
|
||||
onScroll={this.handleScroll}
|
||||
onResize={this.handleResize}
|
||||
showScrollbar={false}
|
||||
itemResizable
|
||||
>
|
||||
{{
|
||||
default: ({ item }: { item: TmNode | MotionData }) =>
|
||||
createNode(item)
|
||||
}}
|
||||
</VVirtualList>
|
||||
)
|
||||
default: () => {
|
||||
this.onRender?.()
|
||||
return (
|
||||
<VVirtualList
|
||||
ref="virtualListInstRef"
|
||||
items={this.fNodes}
|
||||
itemSize={ITEM_SIZE}
|
||||
ignoreItemResize={this.aip}
|
||||
paddingTop={padding.top}
|
||||
paddingBottom={padding.bottom}
|
||||
class={this.themeClass}
|
||||
style={[
|
||||
this.cssVars as CSSProperties,
|
||||
{
|
||||
paddingLeft: padding.left,
|
||||
paddingRight: padding.right
|
||||
}
|
||||
]}
|
||||
onScroll={this.handleScroll}
|
||||
onResize={this.handleResize}
|
||||
showScrollbar={false}
|
||||
itemResizable
|
||||
>
|
||||
{{
|
||||
default: ({ item }: { item: TmNode | MotionData }) =>
|
||||
createNode(item)
|
||||
}}
|
||||
</VVirtualList>
|
||||
)
|
||||
}
|
||||
}}
|
||||
</NxScrollbar>
|
||||
)
|
||||
}
|
||||
const { internalScrollable } = this
|
||||
treeClass.push(this.themeClass)
|
||||
this.onRender?.()
|
||||
if (internalScrollable) {
|
||||
return (
|
||||
<NxScrollbar
|
||||
|
||||
Loading…
Reference in New Issue
Block a user