mirror of
https://github.com/tusen-ai/naive-ui.git
synced 2025-01-06 12:17:13 +08:00
Merge branch 'main' of github.com:TuSimple/naive-ui into main
This commit is contained in:
caoyugang
commit
a04e7b65ba
@ -2,8 +2,12 @@
|
||||
|
||||
## Pending
|
||||
|
||||
|
||||
- Fix `n-select` bug in using custom label, closes [#352](https://github.com/TuSimple/naive-ui/issues/352).
|
||||
- Fix `n-carousel` when `autoplay` dot active status isn't displayed correctly, closes [#434](https://github.com/TuSimple/naive-ui/issues/434).
|
||||
- Fix `n-input` fixed clearable position, closes [#428](https://github.com/TuSimple/naive-ui/issues/428).
|
||||
- Fix `n-image` doesn't accept attributes.
|
||||
- Fix `n-image` set border-radius not working, closes [#427](https://github.com/TuSimple/naive-ui/issues/427).
|
||||
- Fix `n-tab-pane` throws error when there's no children.
|
||||
|
||||
### Feats
|
||||
|
||||
@ -13,6 +17,7 @@
|
||||
|
||||
- Fix `n-data-table` fixed column box-shadow doesn't update when there is only on side fixed.
|
||||
- Fix `n-data-table` fixed column box-shadow doesn't update when `props.scrollX` is not set but each column's width is set.
|
||||
- Fix `n-result` image doesn't show on Safari and mobile phone.
|
||||
|
||||
## 2.15.3 (2021-07-05)
|
||||
|
||||
|
||||
@ -3,6 +3,11 @@
|
||||
## Pending
|
||||
|
||||
- 修复 `n-select` 自定义 label 的显示问题，关闭 [#352](https://github.com/TuSimple/naive-ui/issues/352)
|
||||
- 修复 `n-carousel` 设定 `autoplay` 点击后 dot active 状态不正常，关闭 [#434](https://github.com/TuSimple/naive-ui/issues/434)
|
||||
- 修复 `n-input` 清空按钮位置引起的样式问题，关闭 [#428](https://github.com/TuSimple/naive-ui/issues/428)
|
||||
- 修复 `n-image` 不接受 attributes
|
||||
- 修复 `n-image` 设定 border-radius 无效，关闭 [#427](https://github.com/TuSimple/naive-ui/issues/427)
|
||||
- 修复 `n-tab-pane` 再没有子节点时报错
|
||||
|
||||
### Feats
|
||||
|
||||
@ -12,6 +17,7 @@
|
||||
|
||||
- 修复 `n-data-table` 在只有一侧固定列时固定列阴影不更新
|
||||
- 修复 `n-data-table` 在未设定 `props.scrollX` 但为每个列设定宽度后固定列阴影不更新
|
||||
- 修复 `n-result` 图片在 Safari 和手机端不显示
|
||||
|
||||
## 2.15.3 (2021-07-05)
|
||||
|
||||
|
||||
@ -26,7 +26,10 @@ import { internalSelectionLight } from '../styles'
|
||||
import type { InternalSelectionTheme } from '../styles'
|
||||
import { RenderTag } from './interface'
|
||||
import style from './styles/index.cssr'
|
||||
import type { RenderLabel, RenderLabelImpl } from '../../select-menu/src/interface'
|
||||
import type {
|
||||
RenderLabel,
|
||||
RenderLabelImpl
|
||||
} from '../../select-menu/src/interface'
|
||||
|
||||
export interface InternalSelectionInst {
|
||||
focus: () => void
|
||||
@ -117,7 +120,9 @@ export default defineComponent({
|
||||
})
|
||||
const filterablePlaceholderRef = computed(() => {
|
||||
return props.selectedOption
|
||||
? render(props.selectedOption.label, props.selectedOption, true)
|
||||
? props.renderLabel
|
||||
? props.renderLabel(props.selectedOption as never, true)
|
||||
: render(props.selectedOption.label, props.selectedOption, true)
|
||||
: props.placeholder
|
||||
})
|
||||
const labelRef = computed(() => {
|
||||
|
||||
@ -275,6 +275,7 @@ export default defineComponent({
|
||||
mergedClsPrefix,
|
||||
current,
|
||||
lengthRef,
|
||||
autoplay,
|
||||
$slots: { default: defaultSlot }
|
||||
} = this
|
||||
const children = flatten(defaultSlot?.() || [])
|
||||
@ -337,6 +338,13 @@ export default defineComponent({
|
||||
]}
|
||||
onClick={() => this.setCurrent(i + 1)}
|
||||
onMouseenter={() => this.handleMouseenter(i + 1)}
|
||||
onMousedown={
|
||||
autoplay
|
||||
? (e) => {
|
||||
e.preventDefault()
|
||||
}
|
||||
: undefined
|
||||
}
|
||||
onKeydown={(e) => this.handleKeydown(e, i + 1)}
|
||||
/>
|
||||
)
|
||||
|
||||
@ -1,4 +1,12 @@
|
||||
import { defineComponent, h, inject, ref, PropType, toRef } from 'vue'
|
||||
import {
|
||||
defineComponent,
|
||||
h,
|
||||
inject,
|
||||
ref,
|
||||
PropType,
|
||||
toRef,
|
||||
mergeProps
|
||||
} from 'vue'
|
||||
import NImagePreview from './ImagePreview'
|
||||
import type { ImagePreviewInst } from './ImagePreview'
|
||||
import { imageGroupInjectionKey } from './ImageGroup'
|
||||
@ -31,6 +39,7 @@ export type ImageProps = ExtractPublicPropTypes<typeof imageProps>
|
||||
export default defineComponent({
|
||||
name: 'Image',
|
||||
props: imageProps,
|
||||
inheritAttrs: false,
|
||||
setup (props) {
|
||||
const imageRef = ref<HTMLImageElement | null>(null)
|
||||
const imgPropsRef = toRef(props, 'imgProps')
|
||||
@ -61,7 +70,12 @@ export default defineComponent({
|
||||
render () {
|
||||
const { mergedClsPrefix, imgProps = {} } = this
|
||||
|
||||
const imgNode = (
|
||||
const imgWrapperNode = h(
|
||||
'div',
|
||||
mergeProps(this.$attrs, {
|
||||
role: 'none',
|
||||
class: `${mergedClsPrefix}-image`
|
||||
}),
|
||||
<img
|
||||
{...imgProps}
|
||||
class={this.groupId}
|
||||
@ -76,9 +90,7 @@ export default defineComponent({
|
||||
)
|
||||
|
||||
return this.groupId ? (
|
||||
<div class={`${mergedClsPrefix}-image`} role="none">
|
||||
{imgNode}
|
||||
</div>
|
||||
imgWrapperNode
|
||||
) : (
|
||||
<NImagePreview
|
||||
clsPrefix={mergedClsPrefix}
|
||||
@ -86,13 +98,7 @@ export default defineComponent({
|
||||
showToolbar={this.showToolbar}
|
||||
>
|
||||
{{
|
||||
default: () => {
|
||||
return (
|
||||
<div class={`${mergedClsPrefix}-image`} role="none">
|
||||
{imgNode}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
default: () => imgWrapperNode
|
||||
}}
|
||||
</NImagePreview>
|
||||
)
|
||||
|
||||
@ -37,7 +37,7 @@ export interface ImagePreviewInst {
|
||||
}
|
||||
|
||||
export default defineComponent({
|
||||
name: 'Image',
|
||||
name: 'ImagePreview',
|
||||
props: {
|
||||
showToolbar: Boolean,
|
||||
onNext: Function as PropType<() => void>,
|
||||
@ -253,25 +253,10 @@ export default defineComponent({
|
||||
default: () =>
|
||||
this.show || this.displayed
|
||||
? withDirectives(
|
||||
<div
|
||||
class={`${clsPrefix}-image-preview-container`}
|
||||
style={this.cssVars as CSSProperties}
|
||||
>
|
||||
<Transition
|
||||
name="fade-in-transition"
|
||||
appear={this.appear}
|
||||
<div
|
||||
class={`${clsPrefix}-image-preview-container`}
|
||||
style={this.cssVars as CSSProperties}
|
||||
>
|
||||
{{
|
||||
default: () =>
|
||||
this.show ? (
|
||||
<div
|
||||
class={`${clsPrefix}-image-preview-overlay`}
|
||||
onClick={this.toggleShow}
|
||||
/>
|
||||
) : null
|
||||
}}
|
||||
</Transition>
|
||||
{this.showToolbar ? (
|
||||
<Transition
|
||||
name="fade-in-transition"
|
||||
appear={this.appear}
|
||||
@ -280,89 +265,104 @@ export default defineComponent({
|
||||
default: () =>
|
||||
this.show ? (
|
||||
<div
|
||||
class={`${clsPrefix}-image-preview-toolbar`}
|
||||
>
|
||||
{this.onPrev ? (
|
||||
<>
|
||||
<NBaseIcon
|
||||
clsPrefix={clsPrefix}
|
||||
onClick={this.onPrev}
|
||||
>
|
||||
{{ default: () => prevIcon }}
|
||||
</NBaseIcon>
|
||||
<NBaseIcon
|
||||
clsPrefix={clsPrefix}
|
||||
onClick={this.onNext}
|
||||
>
|
||||
{{ default: () => nextIcon }}
|
||||
</NBaseIcon>
|
||||
</>
|
||||
) : null}
|
||||
<NBaseIcon
|
||||
clsPrefix={clsPrefix}
|
||||
onClick={this.rotateCounterclockwise}
|
||||
>
|
||||
{{
|
||||
default: () => (
|
||||
<RotateCounterclockwiseIcon />
|
||||
)
|
||||
}}
|
||||
</NBaseIcon>
|
||||
<NBaseIcon
|
||||
clsPrefix={clsPrefix}
|
||||
onClick={this.rotateClockwise}
|
||||
>
|
||||
{{ default: () => <RotateClockwiseIcon /> }}
|
||||
</NBaseIcon>
|
||||
<NBaseIcon
|
||||
clsPrefix={clsPrefix}
|
||||
onClick={this.zoomOut}
|
||||
>
|
||||
{{ default: () => <ZoomOutIcon /> }}
|
||||
</NBaseIcon>
|
||||
<NBaseIcon
|
||||
clsPrefix={clsPrefix}
|
||||
onClick={this.zoomIn}
|
||||
>
|
||||
{{ default: () => <ZoomInIcon /> }}
|
||||
</NBaseIcon>
|
||||
</div>
|
||||
class={`${clsPrefix}-image-preview-overlay`}
|
||||
onClick={this.toggleShow}
|
||||
/>
|
||||
) : null
|
||||
}}
|
||||
</Transition>
|
||||
) : null}
|
||||
<Transition
|
||||
name="fade-in-scale-up-transition"
|
||||
onAfterLeave={this.handleAfterLeave}
|
||||
appear={this.appear}
|
||||
// BUG:
|
||||
// onEnter will be called twice, I don't know why
|
||||
// Maybe it is a bug of vue
|
||||
onEnter={this.syncTransformOrigin}
|
||||
onBeforeLeave={this.syncTransformOrigin}
|
||||
>
|
||||
{{
|
||||
default: () =>
|
||||
withDirectives(
|
||||
<div
|
||||
class={`${clsPrefix}-image-preview-wrapper`}
|
||||
ref="previewWrapperRef"
|
||||
>
|
||||
<img
|
||||
draggable={false}
|
||||
onMousedown={this.handlePreviewMousedown}
|
||||
class={`${clsPrefix}-image-preview`}
|
||||
key={this.previewSrc}
|
||||
src={this.previewSrc}
|
||||
ref="previewRef"
|
||||
/>
|
||||
</div>,
|
||||
[[vShow, this.show]]
|
||||
)
|
||||
}}
|
||||
</Transition>
|
||||
</div>,
|
||||
[[zindexable, { enabled: this.show }]]
|
||||
{this.showToolbar ? (
|
||||
<Transition
|
||||
name="fade-in-transition"
|
||||
appear={this.appear}
|
||||
>
|
||||
{{
|
||||
default: () =>
|
||||
this.show ? (
|
||||
<div
|
||||
class={`${clsPrefix}-image-preview-toolbar`}
|
||||
>
|
||||
{this.onPrev ? (
|
||||
<>
|
||||
<NBaseIcon
|
||||
clsPrefix={clsPrefix}
|
||||
onClick={this.onPrev}
|
||||
>
|
||||
{{ default: () => prevIcon }}
|
||||
</NBaseIcon>
|
||||
<NBaseIcon
|
||||
clsPrefix={clsPrefix}
|
||||
onClick={this.onNext}
|
||||
>
|
||||
{{ default: () => nextIcon }}
|
||||
</NBaseIcon>
|
||||
</>
|
||||
) : null}
|
||||
<NBaseIcon
|
||||
clsPrefix={clsPrefix}
|
||||
onClick={this.rotateCounterclockwise}
|
||||
>
|
||||
{{
|
||||
default: () => (
|
||||
<RotateCounterclockwiseIcon />
|
||||
)
|
||||
}}
|
||||
</NBaseIcon>
|
||||
<NBaseIcon
|
||||
clsPrefix={clsPrefix}
|
||||
onClick={this.rotateClockwise}
|
||||
>
|
||||
{{ default: () => <RotateClockwiseIcon /> }}
|
||||
</NBaseIcon>
|
||||
<NBaseIcon
|
||||
clsPrefix={clsPrefix}
|
||||
onClick={this.zoomOut}
|
||||
>
|
||||
{{ default: () => <ZoomOutIcon /> }}
|
||||
</NBaseIcon>
|
||||
<NBaseIcon
|
||||
clsPrefix={clsPrefix}
|
||||
onClick={this.zoomIn}
|
||||
>
|
||||
{{ default: () => <ZoomInIcon /> }}
|
||||
</NBaseIcon>
|
||||
</div>
|
||||
) : null
|
||||
}}
|
||||
</Transition>
|
||||
) : null}
|
||||
<Transition
|
||||
name="fade-in-scale-up-transition"
|
||||
onAfterLeave={this.handleAfterLeave}
|
||||
appear={this.appear}
|
||||
// BUG:
|
||||
// onEnter will be called twice, I don't know why
|
||||
// Maybe it is a bug of vue
|
||||
onEnter={this.syncTransformOrigin}
|
||||
onBeforeLeave={this.syncTransformOrigin}
|
||||
>
|
||||
{{
|
||||
default: () =>
|
||||
withDirectives(
|
||||
<div
|
||||
class={`${clsPrefix}-image-preview-wrapper`}
|
||||
ref="previewWrapperRef"
|
||||
>
|
||||
<img
|
||||
draggable={false}
|
||||
onMousedown={this.handlePreviewMousedown}
|
||||
class={`${clsPrefix}-image-preview`}
|
||||
key={this.previewSrc}
|
||||
src={this.previewSrc}
|
||||
ref="previewRef"
|
||||
/>
|
||||
</div>,
|
||||
[[vShow, this.show]]
|
||||
)
|
||||
}}
|
||||
</Transition>
|
||||
</div>,
|
||||
[[zindexable, { enabled: this.show }]]
|
||||
)
|
||||
: null
|
||||
}}
|
||||
|
||||
@ -72,5 +72,7 @@ export default c([
|
||||
cB('image', `
|
||||
display: inline-flex;
|
||||
cursor: pointer;
|
||||
`)
|
||||
`, [
|
||||
c('img', 'border-radius: inherit;')
|
||||
])
|
||||
])
|
||||
|
||||
@ -64,4 +64,13 @@ describe('n-image', () => {
|
||||
|
||||
expect(document.querySelector('.n-image-preview-toolbar')).not.toEqual(null)
|
||||
})
|
||||
|
||||
it('should inherit attrs', () => {
|
||||
const wrapper = mount(NImage, {
|
||||
attrs: {
|
||||
'data-cool': true
|
||||
}
|
||||
})
|
||||
expect(wrapper.find('[data-cool]').exists()).toEqual(true)
|
||||
})
|
||||
})
|
||||
|
||||
@ -943,7 +943,6 @@ export default defineComponent({
|
||||
this.loading !== undefined) ? (
|
||||
<div class={`${mergedClsPrefix}-input__suffix`}>
|
||||
{[
|
||||
renderSlot(this.$slots, 'suffix'),
|
||||
this.clearable || this.$slots.clear ? (
|
||||
<NBaseClear
|
||||
clsPrefix={mergedClsPrefix}
|
||||
@ -953,6 +952,7 @@ export default defineComponent({
|
||||
{{ default: () => renderSlot(this.$slots, 'clear') }}
|
||||
</NBaseClear>
|
||||
) : null,
|
||||
renderSlot(this.$slots, 'suffix'),
|
||||
this.loading !== undefined ? (
|
||||
<NBaseSuffix
|
||||
clsPrefix={mergedClsPrefix}
|
||||
@ -1025,7 +1025,6 @@ export default defineComponent({
|
||||
</div>
|
||||
<div class={`${mergedClsPrefix}-input__suffix`}>
|
||||
{[
|
||||
renderSlot(this.$slots, 'suffix'),
|
||||
this.clearable || this.$slots.clear ? (
|
||||
<NBaseClear
|
||||
clsPrefix={mergedClsPrefix}
|
||||
@ -1034,7 +1033,8 @@ export default defineComponent({
|
||||
>
|
||||
{{ default: () => renderSlot(this.$slots, 'clear') }}
|
||||
</NBaseClear>
|
||||
) : null
|
||||
) : null,
|
||||
renderSlot(this.$slots, 'suffix')
|
||||
]}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { cB, cE } from '../../../_utils/cssr'
|
||||
import { c, cB, cE } from '../../../_utils/cssr'
|
||||
|
||||
// --bezier
|
||||
// --font-size
|
||||
@ -25,6 +25,9 @@ export default cB('result', `
|
||||
`, [
|
||||
cE('status-image', {
|
||||
width: '1em'
|
||||
}),
|
||||
c('svg', {
|
||||
height: '1em'
|
||||
})
|
||||
]),
|
||||
cB('result-content', {
|
||||
|
||||
@ -431,9 +431,11 @@ export default defineComponent({
|
||||
index !== 0 && !mergedJustifyContent
|
||||
}
|
||||
>
|
||||
{{
|
||||
default: tabPaneVNode.children.tab
|
||||
}}
|
||||
{tabPaneVNode.children
|
||||
? {
|
||||
default: tabPaneVNode.children.tab
|
||||
}
|
||||
: undefined}
|
||||
</Tab>
|
||||
)
|
||||
}
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
import { mount } from '@vue/test-utils'
|
||||
import { NTabs } from '../index'
|
||||
import { h } from 'vue'
|
||||
import { NTabPane, NTabs } from '../index'
|
||||
|
||||
describe('n-tabs', () => {
|
||||
it('should work with import on demand', () => {
|
||||
@ -25,4 +26,18 @@ describe('n-tabs', () => {
|
||||
}
|
||||
})
|
||||
})
|
||||
it('should work with empty tab-pane', () => {
|
||||
mount(NTabs, {
|
||||
props: {
|
||||
defaultValue: 'a'
|
||||
},
|
||||
slots: {
|
||||
default: () =>
|
||||
h(NTabPane, {
|
||||
tab: 'a',
|
||||
name: 'a'
|
||||
})
|
||||
}
|
||||
})
|
||||
})
|
||||
})
|
||||
|
||||
Loading…
Reference in New Issue
Block a user