diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md index 52f0faf07..334beb87d 100644 --- a/CHANGELOG.en-US.md +++ b/CHANGELOG.en-US.md @@ -10,6 +10,7 @@ ### Feats - `n-menu` add `dropdown-props` prop, closes [#1345](https://github.com/TuSimple/naive-ui/issues/1345). +- `n-input` add `count` slot, closes [#1314](https://github.com/TuSimple/naive-ui/issues/1314). ## 2.19.8 (2021-10-14) diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md index 1ece1c5c5..8f7eac52c 100644 --- a/CHANGELOG.zh-CN.md +++ b/CHANGELOG.zh-CN.md @@ -10,6 +10,7 @@ ### Feats - `n-menu` 新增 `dropdown-props` 属性，关闭 [#1345](https://github.com/TuSimple/naive-ui/issues/1345) +- `n-input` 新增 `count` slot，关闭 [#1314](https://github.com/TuSimple/naive-ui/issues/1314) ## 2.19.8 (2021-10-14) diff --git a/src/auto-complete/demos/enUS/index.demo-entry.md b/src/auto-complete/demos/enUS/index.demo-entry.md index 2ab0e8f0c..e0a575478 100644 --- a/src/auto-complete/demos/enUS/index.demo-entry.md +++ b/src/auto-complete/demos/enUS/index.demo-entry.md @@ -24,7 +24,7 @@ show-options-by-value | clearable | `boolean` | `false` | Whether auto complete is clearable. | | default-value | `string` | `null` | Default value of auto complete. | | disabled | `boolean` | `false` | Whether the auto complete is disabled. | -| get-show | `(value: string \| null) => boolean` | `undefined` | Based on value to determine whether to show menu when focusing. | +| get-show | `(value: string) => boolean` | `undefined` | Based on value to determine whether to show menu when focusing. | | loading | `boolean` | `false` | Whether to show a loading status. | | options | `Array` | `[]` | Auto complete options. | | placeholder | `string` | `'Please Input'` | Auto complete's placeholder. | diff --git a/src/auto-complete/demos/zhCN/index.demo-entry.md b/src/auto-complete/demos/zhCN/index.demo-entry.md index f0f61e35d..19bf29cae 100644 --- a/src/auto-complete/demos/zhCN/index.demo-entry.md +++ b/src/auto-complete/demos/zhCN/index.demo-entry.md @@ -24,7 +24,7 @@ show-options-by-value | clearable | `boolean` | `false` | 自动填充是否支持可清除 | | default-value | `string` | `null` | 自动填充的默认值 | | disabled | `boolean` | `false` | 自动填充是否禁用 | -| get-show | `(value: string \| null) => boolean` | `undefined` | 根据输入值在聚焦的状态中决定是否显示菜单 | +| get-show | `(value: string) => boolean` | `undefined` | 根据输入值在聚焦的状态中决定是否显示菜单 | | loading | `boolean` | `false` | 是否展示加载状态 | | options | `Array` | `[]` | 自动填充的自定义选项 | | placeholder | `string` | `'请输入'` | 自动填充的提示信息 | diff --git a/src/auto-complete/src/AutoComplete.tsx b/src/auto-complete/src/AutoComplete.tsx index 8f29b42c4..dc8f0241d 100644 --- a/src/auto-complete/src/AutoComplete.tsx +++ b/src/auto-complete/src/AutoComplete.tsx @@ -70,7 +70,7 @@ const autoCompleteProps = { value: String, blurAfterSelect: Boolean, clearAfterSelect: Boolean, - getShow: Function as PropType<(inputValue: string | null) => boolean>, + getShow: Function as PropType<(inputValue: string) => boolean>, size: String as PropType<'small' | 'medium' | 'large'>, options: { type: Array as PropType, @@ -134,7 +134,7 @@ export default defineComponent({ const mergedShowOptionsRef = computed(() => { const { getShow } = props if (getShow) { - return getShow(mergedValueRef.value) + return getShow(mergedValueRef.value || '') } return !!mergedValueRef.value }) diff --git a/src/input/demos/enUS/count.demo.md b/src/input/demos/enUS/count.demo.md index b17b525f1..68c36d204 100644 --- a/src/input/demos/enUS/count.demo.md +++ b/src/input/demos/enUS/count.demo.md @@ -6,5 +6,10 @@ Don't waste words. + + + {{ value.includes('What') ? '99+' : value.length }} + + ``` diff --git a/src/input/demos/enUS/index.demo-entry.md b/src/input/demos/enUS/index.demo-entry.md index 6924ba93d..f1abcb601 100644 --- a/src/input/demos/enUS/index.demo-entry.md +++ b/src/input/demos/enUS/index.demo-entry.md @@ -59,9 +59,10 @@ event | Name | Parameters | Description | | --- | --- | --- | +| count | `(value: string)` | Word count. | | prefix | `()` | Prefix content slot. | -| suffix | `()` | Suffix content slot. | | separator | `()` | The separator content of the input, only works when `pair` is true. This will take priority over the separator property. | +| suffix | `()` | Suffix content slot. | ### InputGroup Slots diff --git a/src/input/demos/zhCN/count.demo.md b/src/input/demos/zhCN/count.demo.md index ec0923696..5f3d02963 100644 --- a/src/input/demos/zhCN/count.demo.md +++ b/src/input/demos/zhCN/count.demo.md @@ -6,5 +6,8 @@ + + {{ value.includes('啥') ? '99+' : value.length }} + ``` diff --git a/src/input/demos/zhCN/index.demo-entry.md b/src/input/demos/zhCN/index.demo-entry.md index 3c9f13e40..d97f639da 100644 --- a/src/input/demos/zhCN/index.demo-entry.md +++ b/src/input/demos/zhCN/index.demo-entry.md @@ -56,21 +56,22 @@ focus ### Input Slots -| 属性 | 类型 | 说明 | +| 属性 | 参数 | 说明 | | --- | --- | --- | +| count | `(value: string)` | 字数统计 | | prefix | `()` | 输入框头部内容 | -| suffix | `()` | 输入框尾部内容 | | separator | `()` | 成对输入框之间分隔符，仅 `pair` = true 生效且优先级高于 separator 属性 | +| suffix | `()` | 输入框尾部内容 | ### InputGroup Slots -| 属性 | 类型 | 说明 | +| 属性 | 参数 | 说明 | | ------- | ---- | ------------ | | default | `()` | 输入组的内容 | ### InputGroupLabel Slots -| 属性 | 类型 | 说明 | +| 属性 | 参数 | 说明 | | ------- | ---- | ---------------- | | default | `()` | 输入组标签的内容 | diff --git a/src/input/src/Input.tsx b/src/input/src/Input.tsx index 1956c806f..729eff36d 100644 --- a/src/input/src/Input.tsx +++ b/src/input/src/Input.tsx @@ -35,7 +35,7 @@ import { InputWrappedRef, inputInjectionKey } from './interface' -import { len, isEmptyValue } from './utils' +import { isEmptyValue } from './utils' import WordCount from './WordCount' import style from './styles/input.cssr' import { off, on } from 'evtd' @@ -658,11 +658,7 @@ export default defineComponent({ }) provide(inputInjectionKey, { - wordCountRef: computed(() => { - const { value: mergedValue } = mergedValueRef - if (mergedValue === null || Array.isArray(mergedValue)) return 0 - return len(mergedValue) - }), + mergedValueRef, maxlengthRef, mergedClsPrefixRef }) @@ -1082,7 +1078,9 @@ export default defineComponent({ {this.mergedBordered ? (
) : null} - {this.showCount && this.type === 'textarea' ? : null} + {this.showCount && this.type === 'textarea' ? ( + {{ default: this.$slots.count }} + ) : null}
) } diff --git a/src/input/src/WordCount.tsx b/src/input/src/WordCount.tsx index cff296960..b099b3f25 100644 --- a/src/input/src/WordCount.tsx +++ b/src/input/src/WordCount.tsx @@ -1,19 +1,33 @@ -/* eslint-disable @typescript-eslint/no-non-null-assertion */ -import { defineComponent, inject, h } from 'vue' +import { defineComponent, inject, h, computed } from 'vue' import { inputInjectionKey } from './interface' +import { len } from './utils' export default defineComponent({ name: 'InputWordCount', - setup () { - const { wordCountRef, maxlengthRef, mergedClsPrefixRef } = + setup (_, { slots }) { + const { mergedValueRef, maxlengthRef, mergedClsPrefixRef } = + // eslint-disable-next-line @typescript-eslint/no-non-null-assertion inject(inputInjectionKey)! + const wordCountRef = computed(() => { + const { value: mergedValue } = mergedValueRef + if (mergedValue === null || Array.isArray(mergedValue)) return 0 + return len(mergedValue) + }) return () => { const { value: maxlength } = maxlengthRef + const { value: mergedValue } = mergedValueRef return ( - {maxlength === undefined - ? wordCountRef.value - : `${wordCountRef.value} / ${maxlength}`} + {slots.default + ? slots.default({ + value: + mergedValue === null || Array.isArray(mergedValue) + ? '' + : mergedValue + }) + : maxlength === undefined + ? wordCountRef.value + : `${wordCountRef.value} / ${maxlength}`} ) } diff --git a/src/input/src/interface.ts b/src/input/src/interface.ts index 8b86a370f..21f81fec7 100644 --- a/src/input/src/interface.ts +++ b/src/input/src/interface.ts @@ -22,7 +22,7 @@ export interface InputWrappedRef { export type InputInst = UnwrapRef export const inputInjectionKey: InjectionKey<{ - wordCountRef: Ref + mergedValueRef: Ref maxlengthRef: Ref mergedClsPrefixRef: Ref }> = Symbol('input')