mirror/naive-ui
2
0
Fork 0
mirror of https://github.com/tusen-ai/naive-ui.git synced 2024-12-03 04:21:34 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix: update to vue 3.0.10 to fix teleport is unmounted twice & remove redundant vnode type casting

Browse Source
This commit is contained in:
07akioni 2021-04-01 15:24:12 +08:00
parent 8b29b7a4a3
commit 6620d1836c
25 changed files with 440 additions and 532 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
package.json
View File

@ -76,8 +76,8 @@
"@vicons/fluent": "^0.7.0", "@vicons/fluent": "^0.7.0",
"@vicons/ionicons4": "^0.7.0", "@vicons/ionicons4": "^0.7.0",
"@vicons/ionicons5": "^0.7.0", "@vicons/ionicons5": "^0.7.0",
"@vitejs/plugin-vue": "^1.2.0", "@vitejs/plugin-vue": "^1.2.1",
"@vue/compiler-sfc": "^3.0.9", "@vue/compiler-sfc": "^3.0.10",
"@vue/eslint-config-standard": "^6.0.0", "@vue/eslint-config-standard": "^6.0.0",
"@vue/eslint-config-typescript": "^7.0.0", "@vue/eslint-config-typescript": "^7.0.0",
"@vue/test-utils": "^2.0.0-rc.4", "@vue/test-utils": "^2.0.0-rc.4",
@ -118,7 +118,7 @@
"vdirs": "^0.1.0", "vdirs": "^0.1.0",
"vfonts": "^0.1.0", "vfonts": "^0.1.0",
"vooks": "^0.1.5", "vooks": "^0.1.5",
"vue": "^3.0.9", "vue": "^3.0.10",
"vue-router": "^4.0.5", "vue-router": "^4.0.5",
"vueuc": "^0.3.0" "vueuc": "^0.3.0"
}, },

5
src/_internal/select-menu/src/SelectMenu.tsx
View File

@ -8,7 +8,6 @@ import {
watch, watch,
toRef, toRef,
renderSlot, renderSlot,
VNode,
provide, provide,
reactive reactive
} from 'vue' } from 'vue'
@ -415,9 +414,7 @@ export default defineComponent({
</NScrollbar> </NScrollbar>
) : ( ) : (
<div class="n-base-select-menu__empty"> <div class="n-base-select-menu__empty">
{renderSlot($slots, 'empty', undefined, () => [ {renderSlot($slots, 'empty', undefined, () => [<NEmpty />])}
(<NEmpty />) as VNode
])}
</div> </div>
)} )}
{$slots.action && ( {$slots.action && (

69
src/auto-complete/src/AutoComplete.tsx
View File

@ -8,7 +8,6 @@ import {
PropType, PropType,
mergeProps, mergeProps,
renderSlot, renderSlot,
VNode,
withDirectives, withDirectives,
CSSProperties CSSProperties
} from 'vue' } from 'vue'
@ -292,24 +291,20 @@ export default defineComponent({
value: this.mergedValue value: this.mergedValue
}, },
() => [ () => [
( <NInput
<NInput theme={this.mergedTheme.peers.Input}
theme={this.mergedTheme.peers.Input} themeOverrides={this.mergedTheme.peerOverrides.Input}
themeOverrides={ bordered={this.mergedBordered}
this.mergedTheme.peerOverrides.Input value={this.mergedValue}
} placeholder={this.placeholder}
bordered={this.mergedBordered} size={this.mergedSize}
value={this.mergedValue} disabled={this.disabled}
placeholder={this.placeholder} clearable={this.clearable}
size={this.mergedSize} onClear={this.handleClear}
disabled={this.disabled} onFocus={this.handleFocus}
clearable={this.clearable} onUpdateValue={this.handleInput}
onClear={this.handleClear} onBlur={this.handleBlur}
onFocus={this.handleFocus} />
onUpdateValue={this.handleInput}
onBlur={this.handleBlur}
/>
) as VNode
] ]
) )
) )
@ -333,25 +328,23 @@ export default defineComponent({
default: () => default: () =>
this.active this.active
? withDirectives( ? withDirectives(
( <NInternalSelectMenu
<NInternalSelectMenu ref="menuInstRef"
ref="menuInstRef" theme={
theme={ this.mergedTheme.peers.InternalSelectMenu
this.mergedTheme.peers.InternalSelectMenu }
} themeOverrides={
themeOverrides={ this.mergedTheme.peerOverrides
this.mergedTheme.peerOverrides .InternalSelectMenu
.InternalSelectMenu }
} auto-pending
auto-pending class="n-auto-complete-menu"
class="n-auto-complete-menu" style={this.cssVars as CSSProperties}
style={this.cssVars as CSSProperties} treeMate={this.treeMate}
treeMate={this.treeMate} multiple={false}
multiple={false} size="medium"
size="medium" onMenuToggleOption={this.handleToggleOption}
onMenuToggleOption={this.handleToggleOption} />,
/>
) as VNode,
[[clickoutside, this.handleClickOutsideMenu]] [[clickoutside, this.handleClickOutsideMenu]]
) )
: null : null

9
src/back-top/src/BackTop.tsx
View File

@ -9,7 +9,6 @@ import {
renderSlot, renderSlot,
mergeProps, mergeProps,
Transition, Transition,
VNode,
PropType, PropType,
onMounted, onMounted,
onBeforeUnmount onBeforeUnmount
@ -286,11 +285,9 @@ export default defineComponent({
'default', 'default',
undefined, undefined,
() => [ () => [
( <NBaseIcon>
<NBaseIcon> {{ default: () => BackTopIcon }}
{{ default: () => BackTopIcon }} </NBaseIcon>
</NBaseIcon>
) as VNode
] ]
) )
] ]

45
src/cascader/src/CascaderMenu.tsx
View File

@ -8,8 +8,7 @@ import {
inject, inject,
nextTick, nextTick,
Transition, Transition,
withDirectives, withDirectives
VNode
} from 'vue' } from 'vue'
import { FollowerPlacement } from 'vueuc' import { FollowerPlacement } from 'vueuc'
import { clickoutside } from 'vdirs' import { clickoutside } from 'vdirs'
@ -103,28 +102,26 @@ export default defineComponent({
default: () => default: () =>
this.show this.show
? withDirectives( ? withDirectives(
( <div
<div class="n-cascader-menu"
class="n-cascader-menu" onMousedown={this.handleMenuMouseDown}
onMousedown={this.handleMenuMouseDown} >
> {this.menuModel.map((submenuOptions, index) => {
{this.menuModel.map((submenuOptions, index) => { return (
return ( <NCascaderSubmenu
<NCascaderSubmenu ref={
ref={ ((instance: CascaderSubmenuInstance) => {
((instance: CascaderSubmenuInstance) => { if (instance) submenuInstRefs[index] = instance
if (instance) submenuInstRefs[index] = instance }) as any
}) as any }
} key={index}
key={index} tmNodes={submenuOptions}
tmNodes={submenuOptions} depth={index + 1}
depth={index + 1} />
/> )
) })}
})} <NBaseMenuMask ref="maskInstRef" />
<NBaseMenuMask ref="maskInstRef" /> </div>,
</div>
) as VNode,
[[clickoutside, this.handleClickOutside]] [[clickoutside, this.handleClickOutside]]
) )
: null : null

29
src/cascader/src/CascaderSelectMenu.tsx
View File

@ -5,7 +5,6 @@ import {
inject, inject,
toRef, toRef,
defineComponent, defineComponent,
VNode,
PropType, PropType,
computed, computed,
watch, watch,
@ -165,21 +164,19 @@ export default defineComponent({
default: () => default: () =>
this.show this.show
? withDirectives( ? withDirectives(
( <NInternalSelectMenu
<NInternalSelectMenu ref="menuInstRef"
ref="menuInstRef" class="n-cascader-menu"
class="n-cascader-menu" autoPending
autoPending themeOverrides={
themeOverrides={ NCascader.mergedTheme.peerOverrides.InternalSelectMenu
NCascader.mergedTheme.peerOverrides.InternalSelectMenu }
} theme={NCascader.mergedTheme.peers.InternalSelectMenu}
theme={NCascader.mergedTheme.peers.InternalSelectMenu} treeMate={this.selectTreeMate}
treeMate={this.selectTreeMate} multiple={this.multiple}
multiple={this.multiple} value={this.value}
value={this.value} onMenuToggleOption={this.handleToggleOption}
onMenuToggleOption={this.handleToggleOption} />,
/>
) as VNode,
[[clickoutside, this.handleClickOutside]] [[clickoutside, this.handleClickOutside]]
) )
: null : null

14
src/collapse/src/CollapseItem.tsx
View File

@ -1,12 +1,4 @@
import { import { h, defineComponent, PropType, inject, computed, renderSlot } from 'vue'
h,
defineComponent,
PropType,
inject,
computed,
renderSlot,
VNode
} from 'vue'
import { createId } from 'seemly' import { createId } from 'seemly'
import { ChevronRightIcon as ArrowIcon } from '../../_internal/icons' import { ChevronRightIcon as ArrowIcon } from '../../_internal/icons'
import { NBaseIcon } from '../../_internal' import { NBaseIcon } from '../../_internal'
@ -89,9 +81,7 @@ export default defineComponent({
{arrowPlacement === 'right' && headerNode} {arrowPlacement === 'right' && headerNode}
<div class="n-collapse-item-arrow"> <div class="n-collapse-item-arrow">
{renderSlot($slots, 'arrow', { collapsed: collapsed }, () => [ {renderSlot($slots, 'arrow', { collapsed: collapsed }, () => [
( <NBaseIcon>{{ default: () => <ArrowIcon /> }}</NBaseIcon>
<NBaseIcon>{{ default: () => <ArrowIcon /> }}</NBaseIcon>
) as VNode
])} ])}
</div> </div>
{arrowPlacement === 'left' && headerNode} {arrowPlacement === 'left' && headerNode}

4
src/collapse/src/CollapseItemContent.tsx
View File

@ -1,4 +1,4 @@
import { h, withDirectives, vShow, defineComponent, VNode, toRef } from 'vue' import { h, withDirectives, vShow, defineComponent, toRef } from 'vue'
import { useFalseUntilTruthy } from 'vooks' import { useFalseUntilTruthy } from 'vooks'
import { NFadeInExpandTransition } from '../../_internal' import { NFadeInExpandTransition } from '../../_internal'
@ -22,7 +22,7 @@ export default defineComponent({
<div class="n-collapse-item__content-wrapper"> <div class="n-collapse-item__content-wrapper">
<div class="n-collapse-item__content-inner">{this.$slots}</div> <div class="n-collapse-item__content-inner">{this.$slots}</div>
</div> </div>
) as VNode )
return useVShow return useVShow
? withDirectives(contentNode, [[vShow, show]]) ? withDirectives(contentNode, [[vShow, show]])
: show : show

176
src/date-picker/src/DatePicker.tsx
View File

@ -8,7 +8,6 @@ import {
PropType, PropType,
watch, watch,
withDirectives, withDirectives,
VNode,
ExtractPropTypes, ExtractPropTypes,
CSSProperties, CSSProperties,
reactive, reactive,
@ -595,98 +594,97 @@ export default defineComponent({
> >
<VBinder> <VBinder>
{{ {{
default: () => default: () => [
[ <VTarget>
<VTarget> {{
{{ default: () =>
default: () => this.isRange ? (
this.isRange ? ( <NInput
<NInput ref="inputInstRef"
ref="inputInstRef" value={[this.displayStartTime, this.displayEndTime]}
value={[this.displayStartTime, this.displayEndTime]} placeholder={[
placeholder={[ this.localizedStartPlaceholder,
this.localizedStartPlaceholder, this.localizedEndPlaceholder
this.localizedEndPlaceholder ]}
]} textDecoration={[
textDecoration={[ this.isStartValueInvalid ? 'line-through' : '',
this.isStartValueInvalid ? 'line-through' : '', this.isEndValueInvalid ? 'line-through' : ''
this.isEndValueInvalid ? 'line-through' : '' ]}
]} pair
pair onUpdateValue={this.handleRangeUpdateValue}
onUpdateValue={this.handleRangeUpdateValue} {...commonInputProps}
{...commonInputProps}
>
{{
separator: () => (
<NBaseIcon class="n-date-picker-icon">
{{ default: () => <ToIcon /> }}
</NBaseIcon>
),
clear: () => (
<NBaseIcon class="n-date-picker-icon">
{{ default: () => <DateIcon /> }}
</NBaseIcon>
)
}}
</NInput>
) : (
<NInput
ref="inputInstRef"
value={this.displayTime}
placeholder={this.localizedPlacehoder}
textDecoration={
this.isValueInvalid && !this.isRange
? 'line-through'
: ''
}
onUpdateValue={this.handleSingleUpdateValue}
{...commonInputProps}
>
{{
clear: () => (
<NBaseIcon class="n-date-picker-icon">
{{ default: () => <DateIcon /> }}
</NBaseIcon>
)
}}
</NInput>
)
}}
</VTarget>,
<VFollower
show={this.active}
containerClass={this.namespace}
to={this.adjustedTo}
placement="bottom-start"
>
{{
default: () => (
<Transition
name="n-fade-in-scale-up-transition"
appear={this.isMounted}
> >
{{ {{
default: () => separator: () => (
this.active <NBaseIcon class="n-date-picker-icon">
? withDirectives( {{ default: () => <ToIcon /> }}
(this.type === 'datetime' ? ( </NBaseIcon>
<DatetimePanel {...commonPanelProps} /> ),
) : this.type === 'daterange' ? ( clear: () => (
<DaterangePanel {...commonPanelProps} /> <NBaseIcon class="n-date-picker-icon">
) : this.type === 'datetimerange' ? ( {{ default: () => <DateIcon /> }}
<DatetimerangePanel {...commonPanelProps} /> </NBaseIcon>
) : ( )
<DatePanel {...commonPanelProps} />
)) as VNode,
[[clickoutside, this.handleClickOutside]]
)
: null
}} }}
</Transition> </NInput>
) : (
<NInput
ref="inputInstRef"
value={this.displayTime}
placeholder={this.localizedPlacehoder}
textDecoration={
this.isValueInvalid && !this.isRange
? 'line-through'
: ''
}
onUpdateValue={this.handleSingleUpdateValue}
{...commonInputProps}
>
{{
clear: () => (
<NBaseIcon class="n-date-picker-icon">
{{ default: () => <DateIcon /> }}
</NBaseIcon>
)
}}
</NInput>
) )
}} }}
</VFollower> </VTarget>,
] as VNode[] <VFollower
show={this.active}
containerClass={this.namespace}
to={this.adjustedTo}
placement="bottom-start"
>
{{
default: () => (
<Transition
name="n-fade-in-scale-up-transition"
appear={this.isMounted}
>
{{
default: () =>
this.active
? withDirectives(
this.type === 'datetime' ? (
<DatetimePanel {...commonPanelProps} />
) : this.type === 'daterange' ? (
<DaterangePanel {...commonPanelProps} />
) : this.type === 'datetimerange' ? (
<DatetimerangePanel {...commonPanelProps} />
) : (
<DatePanel {...commonPanelProps} />
),
[[clickoutside, this.handleClickOutside]]
)
: null
}}
</Transition>
)
}}
</VFollower>
]
}} }}
</VBinder> </VBinder>
</div> </div>

97
src/dialog/src/Dialog.tsx
View File

@ -5,7 +5,6 @@ import {
VNodeChild, VNodeChild,
PropType, PropType,
renderSlot, renderSlot,
VNode,
CSSProperties CSSProperties
} from 'vue' } from 'vue'
import { useConfig, useTheme } from '../../_mixins' import { useConfig, useTheme } from '../../_mixins'
@ -204,17 +203,11 @@ export default defineComponent({
<NBaseIcon class="n-dialog__icon"> <NBaseIcon class="n-dialog__icon">
{{ {{
default: () => default: () =>
renderSlot( renderSlot($slots, 'icon', undefined, () => [
$slots, this.icon
'icon', ? h(render, { render: this.icon })
undefined, : iconMap[this.type]
() => ])
[
this.icon
? h(render, { render: this.icon })
: iconMap[this.type]
] as VNode[]
)
}} }}
</NBaseIcon> </NBaseIcon>
</div> </div>
@ -224,17 +217,11 @@ export default defineComponent({
<NBaseIcon class="n-dialog__icon"> <NBaseIcon class="n-dialog__icon">
{{ {{
default: () => default: () =>
renderSlot( renderSlot($slots, 'icon', undefined, () => [
$slots, this.icon
'icon', ? h(render, { render: this.icon })
undefined, : iconMap[this.type]
() => ])
[
this.icon
? h(render, { render: this.icon })
: iconMap[this.type]
] as VNode[]
)
}} }}
</NBaseIcon> </NBaseIcon>
) : null} ) : null}
@ -252,42 +239,34 @@ export default defineComponent({
])} ])}
</div> </div>
<div class="n-dialog__action"> <div class="n-dialog__action">
{renderSlot( {renderSlot($slots, 'action', undefined, () => [
$slots, negativeText ? (
'action', <NButton
undefined, theme={mergedTheme.peers.Button}
() => themeOverrides={mergedTheme.peerOverrides.Button}
[ ghost
negativeText ? ( size="small"
<NButton onClick={handleNegativeClick}
theme={mergedTheme.peers.Button} >
themeOverrides={mergedTheme.peerOverrides.Button} {{
ghost default: () => h(render, { render: () => this.negativeText })
size="small" }}
onClick={handleNegativeClick} </NButton>
> ) : null,
{{ <NButton
default: () => theme={mergedTheme.peers.Button}
h(render, { render: () => this.negativeText }) themeOverrides={mergedTheme.peerOverrides.Button}
}} disabled={loading}
</NButton> loading={loading}
) : null, size="small"
<NButton type={type === 'default' ? 'primary' : type}
theme={mergedTheme.peers.Button} onClick={handlePositiveClick}
themeOverrides={mergedTheme.peerOverrides.Button} >
disabled={loading} {{
loading={loading} default: () => h(render, { render: () => this.positiveText })
size="small" }}
type={type === 'default' ? 'primary' : type} </NButton>
onClick={handlePositiveClick} ])}
>
{{
default: () =>
h(render, { render: () => this.positiveText })
}}
</NButton>
] as VNode[]
)}
</div> </div>
</div> </div>
) )

60
src/drawer/src/Drawer.tsx
View File

@ -7,7 +7,6 @@ import {
CSSProperties, CSSProperties,
reactive, reactive,
withDirectives, withDirectives,
VNode,
Transition Transition
} from 'vue' } from 'vue'
import { VLazyTeleport } from 'vueuc' import { VLazyTeleport } from 'vueuc'
@ -198,39 +197,34 @@ export default defineComponent({
{{ {{
default: () => { default: () => {
return withDirectives( return withDirectives(
( <div
<div class={['n-drawer-container', this.namespace]}
class={['n-drawer-container', this.namespace]} style={this.cssVars as CSSProperties}
style={this.cssVars as CSSProperties} >
<Transition name="n-fade-in-transition" appear={this.isMounted}>
{{
default: () =>
this.show ? (
<div
class="n-drawer-mask"
onClick={this.handleMaskClick}
/>
) : null
}}
</Transition>
<NDrawerBodyWrapper
{...this.$attrs}
class={[this.drawerClass, this.$attrs.class]}
style={this.mergedBodyStyle as any}
placement={this.placement}
scrollbarProps={this.scrollbarProps}
show={this.show}
displayDirective={this.displayDirective}
nativeScrollbar={this.nativeScrollbar}
> >
<Transition {this.$slots}
name="n-fade-in-transition" </NDrawerBodyWrapper>
appear={this.isMounted} </div>,
>
{{
default: () =>
this.show ? (
<div
class="n-drawer-mask"
onClick={this.handleMaskClick}
/>
) : null
}}
</Transition>
<NDrawerBodyWrapper
{...this.$attrs}
class={[this.drawerClass, this.$attrs.class]}
style={this.mergedBodyStyle as any}
placement={this.placement}
scrollbarProps={this.scrollbarProps}
show={this.show}
displayDirective={this.displayDirective}
nativeScrollbar={this.nativeScrollbar}
>
{this.$slots}
</NDrawerBodyWrapper>
</div>
) as VNode,
[[zindexable, { enabled: this.show }]] [[zindexable, { enabled: this.show }]]
) )
} }

91
src/drawer/src/DrawerBodyWrapper.tsx
View File

@ -11,7 +11,6 @@ import {
PropType, PropType,
withDirectives, withDirectives,
vShow, vShow,
VNode,
renderSlot, renderSlot,
mergeProps mergeProps
} from 'vue' } from 'vue'
@ -88,53 +87,51 @@ export default defineComponent({
const { NDrawer, $slots } = this const { NDrawer, $slots } = this
return this.displayDirective === 'show' || this.displayed || this.show return this.displayDirective === 'show' || this.displayed || this.show
? withDirectives( ? withDirectives(
( <div>
<div> {/* Keep the wrapper dom. Make sure the drawer has a host.
{/* Keep the wrapper dom. Make sure the drawer has a host.
Nor the detached content will disappear without transition */} Nor the detached content will disappear without transition */}
<Transition <Transition
name={this.transitionName} name={this.transitionName}
appear={this.NDrawer.isMounted} appear={this.NDrawer.isMounted}
onAfterLeave={this.handleAfterLeave} onAfterLeave={this.handleAfterLeave}
> >
{{ {{
default: () => default: () =>
withDirectives( withDirectives(
h( h(
'div', 'div',
mergeProps(this.$attrs, { mergeProps(this.$attrs, {
ref: 'bodyRef', ref: 'bodyRef',
class: [ class: [
'n-drawer', 'n-drawer',
`n-drawer--${this.placement}-placement`, `n-drawer--${this.placement}-placement`,
{ {
'n-drawer--native-scrollbar': this.nativeScrollbar 'n-drawer--native-scrollbar': this.nativeScrollbar
} }
] ]
}), }),
[ [
this.nativeScrollbar ? ( this.nativeScrollbar ? (
renderSlot($slots, 'default') renderSlot($slots, 'default')
) : ( ) : (
<NScrollbar <NScrollbar
{...this.scrollbarProps} {...this.scrollbarProps}
contentClass="n-drawer-scroll-content" contentClass="n-drawer-scroll-content"
theme={NDrawer.mergedTheme.peers.Scrollbar} theme={NDrawer.mergedTheme.peers.Scrollbar}
themeOverrides={ themeOverrides={
NDrawer.mergedTheme.peerOverrides.Scrollbar NDrawer.mergedTheme.peerOverrides.Scrollbar
} }
> >
{$slots} {$slots}
</NScrollbar> </NScrollbar>
) )
] as VNode[] ]
), ),
[[vShow, this.show]] [[vShow, this.show]]
) )
}} }}
</Transition> </Transition>
</div> </div>,
) as VNode,
[ [
[ [
vShow, vShow,

48
src/dynamic-input/src/DynamicInput.tsx
View File

@ -11,8 +11,7 @@ import {
inject, inject,
CSSProperties, CSSProperties,
provide, provide,
reactive, reactive
VNode
} from 'vue' } from 'vue'
import { useMergedState } from 'vooks' import { useMergedState } from 'vooks'
import { createId } from 'seemly' import { createId } from 'seemly'
@ -314,40 +313,39 @@ export default defineComponent({
<div class="n-dynamic-input-item__action"> <div class="n-dynamic-input-item__action">
<NButtonGroup size={buttonSize}> <NButtonGroup size={buttonSize}>
{{ {{
default: () => default: () => [
[ !this.removeDisabled ? (
!this.removeDisabled ? (
<NButton
theme={mergedTheme.peers.Button}
themeOverrides={mergedTheme.peerOverrides.Button}
circle
onClick={() => remove(index)}
>
{{
icon: () => (
<NBaseIcon>
{{ default: () => <RemoveIcon /> }}
</NBaseIcon>
)
}}
</NButton>
) : null,
<NButton <NButton
disabled={this.insertionDisabled}
circle
theme={mergedTheme.peers.Button} theme={mergedTheme.peers.Button}
themeOverrides={mergedTheme.peerOverrides.Button} themeOverrides={mergedTheme.peerOverrides.Button}
onClick={() => createItem(index)} circle
onClick={() => remove(index)}
> >
{{ {{
icon: () => ( icon: () => (
<NBaseIcon> <NBaseIcon>
{{ default: () => <AddIcon /> }} {{ default: () => <RemoveIcon /> }}
</NBaseIcon> </NBaseIcon>
) )
}} }}
</NButton> </NButton>
] as VNode[] ) : null,
<NButton
disabled={this.insertionDisabled}
circle
theme={mergedTheme.peers.Button}
themeOverrides={mergedTheme.peerOverrides.Button}
onClick={() => createItem(index)}
>
{{
icon: () => (
<NBaseIcon>
{{ default: () => <AddIcon /> }}
</NBaseIcon>
)
}}
</NButton>
]
}} }}
</NButtonGroup> </NButtonGroup>
</div> </div>

5
src/empty/src/Empty.tsx
View File

@ -4,8 +4,7 @@ import {
computed, computed,
PropType, PropType,
CSSProperties, CSSProperties,
renderSlot, renderSlot
VNode
} from 'vue' } from 'vue'
import { EmptyIcon } from '../../_internal/icons' import { EmptyIcon } from '../../_internal/icons'
import { useLocale, useTheme } from '../../_mixins' import { useLocale, useTheme } from '../../_mixins'
@ -69,7 +68,7 @@ export default defineComponent({
<div class="n-empty" style={this.cssVars as CSSProperties}> <div class="n-empty" style={this.cssVars as CSSProperties}>
<div class="n-empty__icon"> <div class="n-empty__icon">
{renderSlot($slots, 'icon', undefined, () => [ {renderSlot($slots, 'icon', undefined, () => [
(<NBaseIcon>{{ default: () => <EmptyIcon /> }}</NBaseIcon>) as VNode <NBaseIcon>{{ default: () => <EmptyIcon /> }}</NBaseIcon>
])} ])}
</div> </div>
{this.showDescription ? ( {this.showDescription ? (

23
src/loading-bar/src/LoadingBar.tsx
View File

@ -6,7 +6,6 @@ import {
inject, inject,
withDirectives, withDirectives,
vShow, vShow,
VNode,
CSSProperties, CSSProperties,
ref, ref,
nextTick nextTick
@ -153,21 +152,13 @@ export default defineComponent({
{{ {{
default: () => default: () =>
withDirectives( withDirectives(
h( <div class="n-loading-bar-container">
'div', <div
{ ref="loadingBarRef"
class: 'n-loading-bar-container' class="n-loading-bar"
}, style={this.cssVars as CSSProperties}
[ />
( </div>,
<div
ref="loadingBarRef"
class="n-loading-bar"
style={this.cssVars as CSSProperties}
/>
) as VNode
]
),
[[vShow, this.loading || (!this.loading && this.entering)]] [[vShow, this.loading || (!this.loading && this.entering)]]
) )
}} }}

3
src/log/src/Log.tsx
View File

@ -3,7 +3,6 @@ import {
Transition, Transition,
defineComponent, defineComponent,
computed, computed,
VNode,
provide, provide,
PropType, PropType,
nextTick, nextTick,
@ -272,7 +271,7 @@ export default defineComponent({
<Transition name="n-fade-in-scale-up-transition"> <Transition name="n-fade-in-scale-up-transition">
{{ default: () => (this.loading ? <NLogLoader /> : null) }} {{ default: () => (this.loading ? <NLogLoader /> : null) }}
</Transition> </Transition>
] as VNode[] ]
) )
} }
}) })

122
src/modal/src/BodyWrapper.tsx
View File

@ -184,68 +184,66 @@ export default defineComponent({
} }
return this.displayDirective === 'show' || this.displayed || this.show return this.displayDirective === 'show' || this.displayed || this.show
? withDirectives( ? withDirectives(
( <div class="n-modal-body-wrapper">
<div class="n-modal-body-wrapper"> <NScrollbar
<NScrollbar ref="scrollbarRef"
ref="scrollbarRef" theme={NModal.mergedTheme.peers.Scrollbar}
theme={NModal.mergedTheme.peers.Scrollbar} themeOverrides={NModal.mergedTheme.peerOverrides.Scrollbar}
themeOverrides={NModal.mergedTheme.peerOverrides.Scrollbar} contentClass="n-modal-scroll-content"
contentClass="n-modal-scroll-content" >
> {{
{{ default: () => (
default: () => ( <Transition
<Transition name="n-fade-in-scale-up-transition"
name="n-fade-in-scale-up-transition" appear={NModal.appear ?? NModal.isMounted}
appear={NModal.appear ?? NModal.isMounted} onEnter={handleEnter as any}
onEnter={handleEnter as any} onAfterLeave={handleAfterLeave}
onAfterLeave={handleAfterLeave} onBeforeLeave={handleBeforeLeave as any}
onBeforeLeave={handleBeforeLeave as any} >
> {{
{{ default: () =>
default: () => withDirectives(
withDirectives( (this.preset === 'confirm' ||
(this.preset === 'confirm' || this.preset === 'dialog' ? (
this.preset === 'dialog' ? ( <NDialog
<NDialog {...this.$attrs}
{...this.$attrs} class="n-modal"
class="n-modal" ref="bodyRef"
ref="bodyRef" theme={NModal.mergedTheme.peers.Dialog}
theme={NModal.mergedTheme.peers.Dialog} themeOverrides={
themeOverrides={ NModal.mergedTheme.peerOverrides.Dialog
NModal.mergedTheme.peerOverrides.Dialog }
} {...keep(this.$props, dialogPropKeys)}
{...keep(this.$props, dialogPropKeys)} >
> {$slots}
{$slots} </NDialog>
</NDialog> ) : this.preset === 'card' ? (
) : this.preset === 'card' ? ( <NCard
<NCard {...this.$attrs}
{...this.$attrs} ref="bodyRef"
ref="bodyRef" class="n-modal"
class="n-modal" theme={NModal.mergedTheme.peers.Card}
theme={NModal.mergedTheme.peers.Card} themeOverrides={
themeOverrides={ NModal.mergedTheme.peerOverrides.Card
NModal.mergedTheme.peerOverrides.Card }
} {...keep(this.$props, cardPropKeys)}
{...keep(this.$props, cardPropKeys)} >
> {$slots}
{$slots} </NCard>
</NCard> ) : (
) : ( childNode
childNode )) as any,
)) as any, [
[ [vShow, this.show],
[vShow, this.show], [clickoutside, handleClickOutside]
[clickoutside, handleClickOutside] ]
] )
) }}
}} </Transition>
</Transition> )
) }}
}} </NScrollbar>
</NScrollbar> </div>,
</div>
) as VNode,
[ [
[ [
vShow, vShow,

31
src/popconfirm/src/PopconfirmPanel.tsx
View File

@ -5,7 +5,6 @@ import {
inject, inject,
PropType, PropType,
renderSlot, renderSlot,
VNode,
CSSProperties CSSProperties
} from 'vue' } from 'vue'
import { NButton } from '../../button' import { NButton } from '../../button'
@ -84,24 +83,18 @@ export default defineComponent({
{renderSlot(this.$slots, 'default')} {renderSlot(this.$slots, 'default')}
</div> </div>
<div class="n-popconfirm__action"> <div class="n-popconfirm__action">
{renderSlot( {renderSlot(this.$slots, 'action', undefined, () => [
this.$slots, <NButton size="small" onClick={this.handleNegativeClick}>
'action', {this.localizedNegativeText}
undefined, </NButton>,
() => <NButton
[ size="small"
<NButton size="small" onClick={this.handleNegativeClick}> type="primary"
{this.localizedNegativeText} onClick={this.handlePositiveClick}
</NButton>, >
<NButton {this.localizedPositiveText}
size="small" </NButton>
type="primary" ])}
onClick={this.handlePositiveClick}
>
{this.localizedPositiveText}
</NButton>
] as VNode[]
)}
</div> </div>
</div> </div>
) )

4
src/popover/src/Popover.ts
View File

@ -217,9 +217,9 @@ export default defineComponent({
return compatibleShowArrowRef.value return compatibleShowArrowRef.value
}) })
// trigger // trigger
let triggerVNode = null as VNode | null let triggerVNode: VNode | null = null
// bodyInstance // bodyInstance
let bodyInstance = null as BodyInstance | null let bodyInstance: BodyInstance | null = null
const showTimerIdRef = ref<number | null>(null) const showTimerIdRef = ref<number | null>(null)
const hideTimerIdRef = ref<number | null>(null) const hideTimerIdRef = ref<number | null>(null)
const positionManuallyRef = useMemo(() => { const positionManuallyRef = useMemo(() => {

41
src/rate/src/Rate.tsx
View File

@ -5,7 +5,6 @@ import {
computed, computed,
defineComponent, defineComponent,
renderList, renderList,
VNode,
PropType, PropType,
CSSProperties CSSProperties
} from 'vue' } from 'vue'
@ -104,28 +103,24 @@ export default defineComponent({
style={this.cssVars as CSSProperties} style={this.cssVars as CSSProperties}
onMouseleave={this.handleMouseLeave} onMouseleave={this.handleMouseLeave}
> >
{renderList( {renderList(this.count, (_, index) => (
this.count, <div
(_, index) => key={index}
( class={[
<div 'n-rate__item',
key={index} {
class={[ 'n-rate__item--active':
'n-rate__item', hoverIndex !== null
{ ? index <= hoverIndex
'n-rate__item--active': : index < mergedValue
hoverIndex !== null }
? index <= hoverIndex ]}
: index < mergedValue onClick={() => this.handleClick(index)}
} onMouseenter={() => this.handleMouseEnter(index)}
]} >
onClick={() => this.handleClick(index)} <NBaseIcon>{{ default: () => StarIcon }}</NBaseIcon>
onMouseenter={() => this.handleMouseEnter(index)} </div>
> ))}
<NBaseIcon>{{ default: () => StarIcon }}</NBaseIcon>
</div>
) as VNode
)}
</div> </div>
) )
} }

3
src/scrollbar/src/ScrollBar.tsx
View File

@ -9,7 +9,6 @@ import {
mergeProps, mergeProps,
renderSlot, renderSlot,
Transition, Transition,
VNode,
ExtractPropTypes, ExtractPropTypes,
CSSProperties CSSProperties
} from 'vue' } from 'vue'
@ -650,7 +649,7 @@ export default defineComponent({
}} }}
</Transition> </Transition>
</div> </div>
] as VNode[] ]
) )
}} }}
</VResizeObserver> </VResizeObserver>

4
src/time-picker/src/Panel.tsx
View File

@ -1,4 +1,4 @@
import { h, ref, defineComponent, inject, PropType, computed, VNode } from 'vue' import { h, ref, defineComponent, inject, PropType, computed } from 'vue'
import { NScrollbar } from '../../scrollbar' import { NScrollbar } from '../../scrollbar'
import { NButton } from '../../button' import { NButton } from '../../button'
import { NBaseFocusDetector } from '../../_internal' import { NBaseFocusDetector } from '../../_internal'
@ -263,7 +263,7 @@ export default defineComponent({
</NButton> </NButton>
</div>, </div>,
<NBaseFocusDetector onFocus={this.onFocusDetectorFocus} /> <NBaseFocusDetector onFocus={this.onFocusDetectorFocus} />
] as VNode[] ]
) )
} }
}) })

63
src/time-picker/src/TimePicker.tsx
View File

@ -10,7 +10,6 @@ import {
provide, provide,
nextTick, nextTick,
watch, watch,
VNode,
CSSProperties, CSSProperties,
reactive reactive
} from 'vue' } from 'vue'
@ -645,38 +644,36 @@ export default defineComponent({
default: () => default: () =>
this.active this.active
? withDirectives( ? withDirectives(
( <Panel
<Panel ref="panelInstRef"
ref="panelInstRef" style={this.cssVars as CSSProperties}
style={this.cssVars as CSSProperties} transitionDisabled={this.transitionDisabled}
transitionDisabled={this.transitionDisabled} hourValue={this.hourValue}
hourValue={this.hourValue} showHour={this.hourInFormat}
showHour={this.hourInFormat} isHourInvalid={this.isHourInvalid}
isHourInvalid={this.isHourInvalid} isHourDisabled={this.isHourDisabled}
isHourDisabled={this.isHourDisabled} minuteValue={this.minuteValue}
minuteValue={this.minuteValue} showMinute={this.minuteInFormat}
showMinute={this.minuteInFormat} isMinuteInvalid={this.isMinuteInvalid}
isMinuteInvalid={this.isMinuteInvalid} isMinuteDisabled={this.isMinuteDisabled}
isMinuteDisabled={this.isMinuteDisabled} secondValue={this.secondValue}
secondValue={this.secondValue} showSecond={this.secondInFormat}
showSecond={this.secondInFormat} isSecondInvalid={this.isSecondInvalid}
isSecondInvalid={this.isSecondInvalid} isSecondDisabled={this.isSecondDisabled}
isSecondDisabled={this.isSecondDisabled} isValueInvalid={this.isValueInvalid}
isValueInvalid={this.isValueInvalid} nowText={this.localizedNow}
nowText={this.localizedNow} confirmText={this.localizedPositiveText}
confirmText={this.localizedPositiveText} onFocusout={this.handleMenuFocusOut}
onFocusout={this.handleMenuFocusOut} onKeydown={this.handleMenuKeyDown}
onKeydown={this.handleMenuKeyDown} onHourClick={this.handleHourClick}
onHourClick={this.handleHourClick} onMinuteClick={this.handleMinuteClick}
onMinuteClick={this.handleMinuteClick} onSecondClick={this.handleSecondClick}
onSecondClick={this.handleSecondClick} onNowClick={this.handleNowClick}
onNowClick={this.handleNowClick} onConfirmClick={this.handleConfirmClick}
onConfirmClick={this.handleConfirmClick} onFocusDetectorFocus={
onFocusDetectorFocus={ this.handleFocusDetectorFocus
this.handleFocusDetectorFocus }
} />,
/>
) as VNode,
[[clickoutside, this.handleClickOutside]] [[clickoutside, this.handleClickOutside]]
) )
: null : null

4
themes/tusimple/src/data-table.tsx
View File

@ -1,4 +1,4 @@
import { h, VNode } from 'vue' import { h } from 'vue'
import { CaretUpOutline, CaretDownOutline } from '@vicons/ionicons5' import { CaretUpOutline, CaretDownOutline } from '@vicons/ionicons5'
import { colors } from './theme-overrides-light' import { colors } from './theme-overrides-light'
import { GRAY_COLOR_4 } from './vars' import { GRAY_COLOR_4 } from './vars'
@ -80,5 +80,5 @@ export const renderFilter: DataTableRenderFilter = ({ active, show }) => {
</g> </g>
</svg> </svg>
</div> </div>
) as VNode )
} }

16
themes/tusimple/src/icons.tsx
View File

@ -176,35 +176,35 @@ const toIcon = (
) )
function clear (): VNode { function clear (): VNode {
return clearIcon as VNode return clearIcon
} }
function success (): VNode { function success (): VNode {
return successIcon as VNode return successIcon
} }
function warning (): VNode { function warning (): VNode {
return warningIcon as VNode return warningIcon
} }
function error (): VNode { function error (): VNode {
return errorIcon as VNode return errorIcon
} }
function attach (): VNode { function attach (): VNode {
return attachIcon as VNode return attachIcon
} }
function trash (): VNode { function trash (): VNode {
return trashIcon as VNode return trashIcon
} }
function cancel (): VNode { function cancel (): VNode {
return cancelIcon as VNode return cancelIcon
} }
function to (): VNode { function to (): VNode {
return toIcon as VNode return toIcon
} }
export const icons = { export const icons = {