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

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

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

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

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

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

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

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

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

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

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

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

@ -1,12 +1,4 @@
import {
h,
defineComponent,
PropType,
inject,
computed,
renderSlot,
VNode
} from 'vue'
import { h, defineComponent, PropType, inject, computed, renderSlot } from 'vue'
import { createId } from 'seemly'
import { ChevronRightIcon as ArrowIcon } from '../../_internal/icons'
import { NBaseIcon } from '../../_internal'
@ -89,9 +81,7 @@ export default defineComponent({
{arrowPlacement === 'right' && headerNode}
<div class="n-collapse-item-arrow">
{renderSlot($slots, 'arrow', { collapsed: collapsed }, () => [
(
<NBaseIcon>{{ default: () => <ArrowIcon /> }}</NBaseIcon>
) as VNode
<NBaseIcon>{{ default: () => <ArrowIcon /> }}</NBaseIcon>
])}
</div>
{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 { NFadeInExpandTransition } from '../../_internal'
@ -22,7 +22,7 @@ export default defineComponent({
<div class="n-collapse-item__content-wrapper">
<div class="n-collapse-item__content-inner">{this.$slots}</div>
</div>
) as VNode
)
return useVShow
? withDirectives(contentNode, [[vShow, show]])
: show

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

@ -8,7 +8,6 @@ import {
PropType,
watch,
withDirectives,
VNode,
ExtractPropTypes,
CSSProperties,
reactive,
@ -595,98 +594,97 @@ export default defineComponent({
>
<VBinder>
{{
default: () =>
[
<VTarget>
{{
default: () =>
this.isRange ? (
<NInput
ref="inputInstRef"
value={[this.displayStartTime, this.displayEndTime]}
placeholder={[
this.localizedStartPlaceholder,
this.localizedEndPlaceholder
]}
textDecoration={[
this.isStartValueInvalid ? 'line-through' : '',
this.isEndValueInvalid ? 'line-through' : ''
]}
pair
onUpdateValue={this.handleRangeUpdateValue}
{...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: () => [
<VTarget>
{{
default: () =>
this.isRange ? (
<NInput
ref="inputInstRef"
value={[this.displayStartTime, this.displayEndTime]}
placeholder={[
this.localizedStartPlaceholder,
this.localizedEndPlaceholder
]}
textDecoration={[
this.isStartValueInvalid ? 'line-through' : '',
this.isEndValueInvalid ? 'line-through' : ''
]}
pair
onUpdateValue={this.handleRangeUpdateValue}
{...commonInputProps}
>
{{
default: () =>
this.active
? withDirectives(
(this.type === 'datetime' ? (
<DatetimePanel {...commonPanelProps} />
) : this.type === 'daterange' ? (
<DaterangePanel {...commonPanelProps} />
) : this.type === 'datetimerange' ? (
<DatetimerangePanel {...commonPanelProps} />
) : (
<DatePanel {...commonPanelProps} />
)) as VNode,
[[clickoutside, this.handleClickOutside]]
)
: null
separator: () => (
<NBaseIcon class="n-date-picker-icon">
{{ default: () => <ToIcon /> }}
</NBaseIcon>
),
clear: () => (
<NBaseIcon class="n-date-picker-icon">
{{ default: () => <DateIcon /> }}
</NBaseIcon>
)
}}
</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>
] as VNode[]
}}
</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: () =>
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>
</div>

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

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

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

@ -7,7 +7,6 @@ import {
CSSProperties,
reactive,
withDirectives,
VNode,
Transition
} from 'vue'
import { VLazyTeleport } from 'vueuc'
@ -198,39 +197,34 @@ export default defineComponent({
{{
default: () => {
return withDirectives(
(
<div
class={['n-drawer-container', this.namespace]}
style={this.cssVars as CSSProperties}
<div
class={['n-drawer-container', this.namespace]}
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
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}
>
{this.$slots}
</NDrawerBodyWrapper>
</div>
) as VNode,
{this.$slots}
</NDrawerBodyWrapper>
</div>,
[[zindexable, { enabled: this.show }]]
)
}

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

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

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

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

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

@ -4,8 +4,7 @@ import {
computed,
PropType,
CSSProperties,
renderSlot,
VNode
renderSlot
} from 'vue'
import { EmptyIcon } from '../../_internal/icons'
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__icon">
{renderSlot($slots, 'icon', undefined, () => [
(<NBaseIcon>{{ default: () => <EmptyIcon /> }}</NBaseIcon>) as VNode
<NBaseIcon>{{ default: () => <EmptyIcon /> }}</NBaseIcon>
])}
</div>
{this.showDescription ? (

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

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

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

@ -3,7 +3,6 @@ import {
Transition,
defineComponent,
computed,
VNode,
provide,
PropType,
nextTick,
@ -272,7 +271,7 @@ export default defineComponent({
<Transition name="n-fade-in-scale-up-transition">
{{ default: () => (this.loading ? <NLogLoader /> : null) }}
</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
? withDirectives(
(
<div class="n-modal-body-wrapper">
<NScrollbar
ref="scrollbarRef"
theme={NModal.mergedTheme.peers.Scrollbar}
themeOverrides={NModal.mergedTheme.peerOverrides.Scrollbar}
contentClass="n-modal-scroll-content"
>
{{
default: () => (
<Transition
name="n-fade-in-scale-up-transition"
appear={NModal.appear ?? NModal.isMounted}
onEnter={handleEnter as any}
onAfterLeave={handleAfterLeave}
onBeforeLeave={handleBeforeLeave as any}
>
{{
default: () =>
withDirectives(
(this.preset === 'confirm' ||
this.preset === 'dialog' ? (
<NDialog
{...this.$attrs}
class="n-modal"
ref="bodyRef"
theme={NModal.mergedTheme.peers.Dialog}
themeOverrides={
NModal.mergedTheme.peerOverrides.Dialog
}
{...keep(this.$props, dialogPropKeys)}
>
{$slots}
</NDialog>
) : this.preset === 'card' ? (
<NCard
{...this.$attrs}
ref="bodyRef"
class="n-modal"
theme={NModal.mergedTheme.peers.Card}
themeOverrides={
NModal.mergedTheme.peerOverrides.Card
}
{...keep(this.$props, cardPropKeys)}
>
{$slots}
</NCard>
) : (
childNode
)) as any,
[
[vShow, this.show],
[clickoutside, handleClickOutside]
]
)
}}
</Transition>
)
}}
</NScrollbar>
</div>
) as VNode,
<div class="n-modal-body-wrapper">
<NScrollbar
ref="scrollbarRef"
theme={NModal.mergedTheme.peers.Scrollbar}
themeOverrides={NModal.mergedTheme.peerOverrides.Scrollbar}
contentClass="n-modal-scroll-content"
>
{{
default: () => (
<Transition
name="n-fade-in-scale-up-transition"
appear={NModal.appear ?? NModal.isMounted}
onEnter={handleEnter as any}
onAfterLeave={handleAfterLeave}
onBeforeLeave={handleBeforeLeave as any}
>
{{
default: () =>
withDirectives(
(this.preset === 'confirm' ||
this.preset === 'dialog' ? (
<NDialog
{...this.$attrs}
class="n-modal"
ref="bodyRef"
theme={NModal.mergedTheme.peers.Dialog}
themeOverrides={
NModal.mergedTheme.peerOverrides.Dialog
}
{...keep(this.$props, dialogPropKeys)}
>
{$slots}
</NDialog>
) : this.preset === 'card' ? (
<NCard
{...this.$attrs}
ref="bodyRef"
class="n-modal"
theme={NModal.mergedTheme.peers.Card}
themeOverrides={
NModal.mergedTheme.peerOverrides.Card
}
{...keep(this.$props, cardPropKeys)}
>
{$slots}
</NCard>
) : (
childNode
)) as any,
[
[vShow, this.show],
[clickoutside, handleClickOutside]
]
)
}}
</Transition>
)
}}
</NScrollbar>
</div>,
[
[
vShow,

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

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

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

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

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

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

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

@ -9,7 +9,6 @@ import {
mergeProps,
renderSlot,
Transition,
VNode,
ExtractPropTypes,
CSSProperties
} from 'vue'
@ -650,7 +649,7 @@ export default defineComponent({
}}
</Transition>
</div>
] as VNode[]
]
)
}}
</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 { NButton } from '../../button'
import { NBaseFocusDetector } from '../../_internal'
@ -263,7 +263,7 @@ export default defineComponent({
</NButton>
</div>,
<NBaseFocusDetector onFocus={this.onFocusDetectorFocus} />
] as VNode[]
]
)
}
})

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

@ -10,7 +10,6 @@ import {
provide,
nextTick,
watch,
VNode,
CSSProperties,
reactive
} from 'vue'
@ -645,38 +644,36 @@ export default defineComponent({
default: () =>
this.active
? withDirectives(
(
<Panel
ref="panelInstRef"
style={this.cssVars as CSSProperties}
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}
showSecond={this.secondInFormat}
isSecondInvalid={this.isSecondInvalid}
isSecondDisabled={this.isSecondDisabled}
isValueInvalid={this.isValueInvalid}
nowText={this.localizedNow}
confirmText={this.localizedPositiveText}
onFocusout={this.handleMenuFocusOut}
onKeydown={this.handleMenuKeyDown}
onHourClick={this.handleHourClick}
onMinuteClick={this.handleMinuteClick}
onSecondClick={this.handleSecondClick}
onNowClick={this.handleNowClick}
onConfirmClick={this.handleConfirmClick}
onFocusDetectorFocus={
this.handleFocusDetectorFocus
}
/>
) as VNode,
<Panel
ref="panelInstRef"
style={this.cssVars as CSSProperties}
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}
showSecond={this.secondInFormat}
isSecondInvalid={this.isSecondInvalid}
isSecondDisabled={this.isSecondDisabled}
isValueInvalid={this.isValueInvalid}
nowText={this.localizedNow}
confirmText={this.localizedPositiveText}
onFocusout={this.handleMenuFocusOut}
onKeydown={this.handleMenuKeyDown}
onHourClick={this.handleHourClick}
onMinuteClick={this.handleMinuteClick}
onSecondClick={this.handleSecondClick}
onNowClick={this.handleNowClick}
onConfirmClick={this.handleConfirmClick}
onFocusDetectorFocus={
this.handleFocusDetectorFocus
}
/>,
[[clickoutside, this.handleClickOutside]]
)
: 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 { colors } from './theme-overrides-light'
import { GRAY_COLOR_4 } from './vars'
@ -80,5 +80,5 @@ export const renderFilter: DataTableRenderFilter = ({ active, show }) => {
</g>
</svg>
</div>
) as VNode
)
}

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

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