Merge pull request #1356 from TuSimple/main

sync main

CHANGELOG.en-US.md

@@ -1,6 +1,6 @@
 # CHANGELOG
 
-## Pending
+## 2.19.8 (2021-10-14)
 
 ### Fixes
 
@@ -11,7 +11,7 @@
 
 ### Feats
 
-- `n-auto-complete` add `get-derived-show-from-value` prop, closes [#1292](https://github.com/TuSimple/naive-ui/issues/1292).
+- `n-auto-complete` add `get-show` prop, closes [#1292](https://github.com/TuSimple/naive-ui/issues/1292).
 - `n-select` add `input-props` prop, closes [#1351](https://github.com/TuSimple/naive-ui/issues/1351).
 - `n-color-picker` add `swatches` prop, ref [#1281](https://github.com/TuSimple/naive-ui/issues/1281).
 

CHANGELOG.zh-CN.md

@@ -1,6 +1,6 @@
 # CHANGELOG
 
-## Pending
+## 2.19.8 (2021-10-14)
 
 ### Fixes
 
@@ -11,7 +11,7 @@
 
 ### Feats
 
-- `n-auto-complete` 新增 `get-derived-show-from-value` 属性，关闭 [#1292](https://github.com/TuSimple/naive-ui/issues/1292)
+- `n-auto-complete` 新增 `get-show` 属性，关闭 [#1292](https://github.com/TuSimple/naive-ui/issues/1292)
 - `n-select` 新增 `input-props` 属性，关闭 [#1351](https://github.com/TuSimple/naive-ui/issues/1351)
 - `n-color-picker` 新增 `swatches` 属性，有关 [#1281](https://github.com/TuSimple/naive-ui/issues/1281)
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "naive-ui",
-  "version": "2.19.7",
+  "version": "2.19.8",
   "description": "A Vue 3 Component Library. Fairly Complete, Customizable Themes, Uses TypeScript, Not Too Slow",
   "main": "lib/index.js",
   "module": "es/index.js",

src/auto-complete/demos/enUS/after-select.demo.md

@@ -1,4 +1,4 @@
-# Actions After Select
+# Actions after select
 
 Choose whether the element blurs after a selection is made with `blur-after-select`.
 

src/auto-complete/demos/enUS/custom-input.demo.md

@@ -1,4 +1,4 @@
-# Custom Input Element
+# Custom input element
 
 You can also replace the input element of the auto-complete component.
 

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. |
-| getDerivedShowFromValue | `(inputValue: string \| null) => boolean` | `undefined` | Based on value to determine is Whether to show all options when focusing. |
+| get-show | `(value: string \| null) => boolean` | `undefined` | Based on value to determine whether to show menu when focusing. |
 | loading | `boolean` | `false` | Whether to show a loading status. |
 | options | `Array<string \| AutoCompleteOption \| AutoCompleteGroupOption>` | `[]` | Auto complete options. |
 | placeholder | `string` | `'Please Input'` | Auto complete's placeholder. |

src/auto-complete/demos/enUS/show-options-by-value.demo.md

@@ -1,13 +1,13 @@
-# Whether to show all options
+# Whether to show menu
 
-Your can determine is whether to show all options based on value when it is focused.
+Your can determine is whether to show menu based on value when it is focused.
 
 ```html
 <n-auto-complete
   :options="options"
   v-model:value="value"
-  placeholder="input empty or not `a` value to show all options"
-  :get-derived-show-from-value="getDerivedShowFromValue"
+  placeholder="Input 'a' to show menu"
+  :get-show="getShow"
 />
 ```
 
@@ -30,8 +30,8 @@ export default defineComponent({
         })
       }),
       showOnFocus: showOnFocusRef,
-      getDerivedShowFromValue: (value) => {
-        if (!value || value !== 'a') {
+      getShow: (value) => {
+        if (value === 'a') {
           return true
         }
         return false

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` | 自动填充是否禁用 |
-| getDerivedShowFromValue | `(inputValue: string \| null) => boolean` | `undefined` | 根据输入值决定是否显示所有选项 |
+| get-show | `(value: string \| null) => boolean` | `undefined` | 根据输入值在聚焦的状态中决定是否显示菜单 |
 | loading | `boolean` | `false` | 是否展示加载状态 |
 | options | `Array<string \| AutoCompleteOption \| AutoCompleteGroupOption>` | `[]` | 自动填充的自定义选项 |
 | placeholder | `string` | `'请输入'` | 自动填充的提示信息 |

src/auto-complete/demos/zhCN/show-options-by-value.demo.md

@@ -1,13 +1,13 @@
-# 是否显示所有选项
+# 是否显示菜单
 
-你可以根据输入的值来决定是否显示所有选项
+你可以根据输入的值来决定是否显示菜单
 
 ```html
 <n-auto-complete
   :options="options"
   v-model:value="value"
-  placeholder="输入空或者非`a`显示所有选项"
-  :get-derived-show-from-value="getDerivedShowFromValue"
+  placeholder="输入 a 显示菜单"
+  :get-show="getShow"
 />
 ```
 
@@ -30,8 +30,8 @@ export default defineComponent({
         })
       }),
       showOnFocus: showOnFocusRef,
-      getDerivedShowFromValue: (value) => {
-        if (!value || value !== 'a') {
+      getShow: (value) => {
+        if (value === 'a') {
           return true
         }
         return false

src/auto-complete/src/AutoComplete.tsx

@@ -70,9 +70,7 @@ const autoCompleteProps = {
   value: String,
   blurAfterSelect: Boolean,
   clearAfterSelect: Boolean,
-  getDerivedShowFromValue: Function as PropType<
-  (inputValue: string | null) => boolean
-  >,
+  getShow: Function as PropType<(inputValue: string | null) => boolean>,
   size: String as PropType<'small' | 'medium' | 'large'>,
   options: {
     type: Array as PropType<AutoCompleteOptions>,
@@ -134,8 +132,10 @@ export default defineComponent({
       return mapAutoCompleteOptionsToSelectOptions(props.options)
     })
     const mergedShowOptionsRef = computed(() => {
-      const { getDerivedShowFromValue } = props
-      if (getDerivedShowFromValue) { return getDerivedShowFromValue(mergedValueRef.value) }
+      const { getShow } = props
+      if (getShow) {
+        return getShow(mergedValueRef.value)
+      }
       return !!mergedValueRef.value
     })
     const activeRef = computed(() => {

src/locales/__snapshots__/index.spec.tsx.snap

@@ -79,3 +79,23 @@ exports[`locale works 4`] = `
   </div>
 </div>"
 `;
+
+exports[`locale works 5`] = `
+"<div class=\\"n-config-provider\\">
+  <div class=\\"n-input n-input--resizable n-input--stateful\\" style=\\"--bezier: cubic-bezier(.4, 0, .2, 1); --count-text-color: rgb(158, 164, 170); --color: rgba(255, 255, 255, 1); --font-size: 14px; --border-radius: 3px; --height: 34px; --padding-left: 12px; --padding-right: 12px; --text-color: rgb(51, 54, 57); --caret-color: #18a058; --text-decoration-color: rgb(51, 54, 57); --border: 1px solid rgb(224, 224, 230); --border-disabled: 1px solid rgb(224, 224, 230); --border-hover: 1px solid #36ad6a; --border-focus: 1px solid #36ad6a; --placeholder-color: rgba(194, 194, 194, 1); --placeholder-color-disabled: rgba(209, 209, 209, 1); --icon-size: 16px; --line-height-textarea: 1.6; --color-disabled: rgb(250, 250, 252); --color-focus: rgba(255, 255, 255, 1); --text-color-disabled: rgba(194, 194, 194, 1); --box-shadow-focus: 0 0 0 2px rgba(24, 160, 88, 0.2); --loading-color: #18a058; --caret-color-warning: #f0a020; --color-focus-warning: rgba(255, 255, 255, 1); --box-shadow-focus-warning: 0 0 0 2px rgba(240, 160, 32, 0.2); --border-warning: 1px solid #f0a020; --border-focus-warning: 1px solid #fcb040; --border-hover-warning: 1px solid #fcb040; --loading-color-warning: #f0a020; --caret-color-error: #d03050; --color-focus-error: rgba(255, 255, 255, 1); --box-shadow-focus-error: 0 0 0 2px rgba(208, 48, 80, 0.2); --border-error: 1px solid #d03050; --border-focus-error: 1px solid #de576d; --border-hover-error: 1px solid #de576d; --loading-color-error: #d03050; --clear-color: rgba(194, 194, 194, 1); --clear-size: 16px; --clear-color-hover: rgba(146, 146, 146, 1); --clear-color-pressed: rgba(175, 175, 175, 1); --icon-color: rgba(194, 194, 194, 1); --icon-color-hover: rgba(146, 146, 146, 1); --icon-color-pressed: rgba(175, 175, 175, 1); --icon-color-disabled: rgba(209, 209, 209, 1); --suffix-text-color: rgb(51, 54, 57);\\">
+    <div class=\\"n-input-wrapper\\">
+      <!---->
+      <div class=\\"n-input__input\\"><input type=\\"text\\" class=\\"n-input__input-el\\" placeholder=\\"入力してください\\" size=\\"20\\">
+        <div class=\\"n-input__placeholder\\"><span>入力してください</span></div>
+        <!---->
+      </div>
+      <!---->
+    </div>
+    <!---->
+    <!---->
+    <div class=\\"n-input__border\\"></div>
+    <div class=\\"n-input__state-border\\"></div>
+    <!---->
+  </div>
+</div>"
+`;

src/select/demos/enUS/index.demo-entry.md

@@ -40,7 +40,7 @@ render-person
 | fallback-option | `false \| (value: string \| number) => SelectOption` | `value => ({ label: '' + value, value })` | The option to be created using the value which has no corresponding option value. If set to `false`, the fallback option won't be created and displayed. |
 | filterable | `boolean` | `false` | Whether options can be filtered. |
 | filter | `(pattern: string, option: Object) => boolean` | String search method. | Filter function. |
-| input-props | `HTMLInputAttributes` | `undefined` | The attributes of input element in the trigger. It only works when the select is filter. |
+| input-props | `HTMLInputAttributes` | `undefined` | The attributes of input element in the trigger. It only works when the select is filterable. |
 | loading | `boolean` | `false` | Whether to show a loading state. |
 | max-tag-count | `number \| 'responsive'` | `undefined` | Maximum selected values to display while in `multiple` mode. `responsive` will keep all the tags in single line. |
 | multiple | `boolean` | `false` | Whether to allow selecting multiple values. |
@@ -78,7 +78,7 @@ render-person
 ### SelectGroupOption Properties
 
 | Name | Type | Description |
-| -------- | ------------------------------------------------------- | --------------------------------- |
+| --- | --- | --- |
 | children | `Array<SelectOption>` | Child select options. |
 | label | `string \| ((option: SelectGroupOption) => VNodeChild)` | Label of the group. |
 | key | `string \| number` | Should be unique for each option. |

src/version.ts

@@ -1 +1 @@
-export default '2.19.7'
+export default '2.19.8'