Merge branch 'main' into fix-NButton-color-overwritten

tusen-ai · Dec 12, 2021 · da957f0 · da957f0
2 parents 7396a6c + 0989eee
commit da957f0
Show file tree

Hide file tree

Showing 37 changed files with 303 additions and 98 deletions.
diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md
@@ -7,10 +7,17 @@
 - Fix `n-alert`'s `header` slot unable to display normally.
 - Fix `n-data-table`'s pagination `onUpdatePageSize` prop does't trigger, closes [#1774](https://github.com/TuSimple/naive-ui/issues/1774).
 - Fix `n-button`'s style is overwritten when using other style library, closes [#1808](https://github.com/TuSimple/naive-ui/issues/1808).
+- Fix `n-tag` line-height is too low that clamps the content.
+- Fix `n-select` displays with mistake in input if `filterable` is `true`, closes [#1823](https://github.com/TuSimple/naive-ui/issues/1823).
+- Fix `n-data-table` uncheck all if indeterminate header checkbox is clicked, closes [#1827](https://github.com/TuSimple/naive-ui/issues/1827).
+- Fix `n-page-header`'s content has margin-top when header is not displayed, closes [#1795](https://github.com/TuSimple/naive-ui/issues/1795).
 
 ### Feats
 
 - `n-tree-select` add `menu-props` prop.
+- `n-cascader` add `empty` slot.
+- `n-popselect` add `action` slot.
+- `n-popselect` add `empty` slot.
 
 ### i18n
 

diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md
@@ -7,10 +7,17 @@
 - 修复 `n-alert` 的 `header` slot 无法正常显示
 - 修复 `n-data-table` 的分页器 `onUpdatePageSize` 属性未被触发, 关闭 [#1774](https://github.com/TuSimple/naive-ui/issues/1774)
 - 修复 `n-button` 的样式在使用其他样式框架时被覆盖, 关闭 [#1808](https://github.com/TuSimple/naive-ui/issues/1808)
+- 修复 `n-tag` 行高过低导致内容截断
+- 修复 `n-select` 设定 `filterable` 后选项过长显示出错，关闭 [#1823](https://github.com/TuSimple/naive-ui/issues/1823)
+- 修复 `n-data-table` 点击表头半选的勾选框之后没有全选，关闭 [#1827](https://github.com/TuSimple/naive-ui/issues/1827)
+- 修复 `n-page-header` 在不显示头部时内容有 margin-top，关闭 [#1795](https://github.com/TuSimple/naive-ui/issues/1795)
 
 ### Feats
 
 - `n-tree-select` 新增 `menu-props` 属性
+- `n-cascader` 新增 `empty` slot
+- `n-popselect` 新增 `action` slot
+- `n-popselect` 新增 `empty` slot
 
 ### i18n
 

diff --git a/src/_internal/selection/src/Selection.tsx b/src/_internal/selection/src/Selection.tsx
@@ -767,22 +767,26 @@ export default defineComponent({
                 class={`${clsPrefix}-base-selection-label__render-label ${clsPrefix}-base-selection-overlay`}
                 key="input"
               >
-                {renderTag
-                  ? renderTag({
-                    option: this.selectedOption!,
-                    handleClose: () => {}
-                  })
-                  : renderLabel
-                    ? renderLabel(this.selectedOption!, true)
-                    : render(this.label, this.selectedOption, true)}
+                <div class={`${clsPrefix}-base-selection-overlay__wrapper`}>
+                  {renderTag
+                    ? renderTag({
+                      option: this.selectedOption!,
+                      handleClose: () => {}
+                    })
+                    : renderLabel
+                      ? renderLabel(this.selectedOption!, true)
+                      : render(this.label, this.selectedOption, true)}
+                </div>
               </div>
               )}
             {showPlaceholder ? (
               <div
                 class={`${clsPrefix}-base-selection-placeholder ${clsPrefix}-base-selection-overlay`}
                 key="placeholder"
               >
-                {this.filterablePlaceholder}
+                <div class={`${clsPrefix}-base-selection-overlay__wrapper`}>
+                  {this.filterablePlaceholder}
+                </div>
               </div>
             ) : null}
             {suffix}

diff --git a/src/_internal/selection/src/styles/index.cssr.ts b/src/_internal/selection/src/styles/index.cssr.ts
@@ -87,7 +87,6 @@ export default c([
       display: flex;
       align-items: center;
       white-space: nowrap;
-      overflow: hidden;
       pointer-events: none;
       position: absolute;
       top: 0;
@@ -96,7 +95,14 @@ export default c([
       left: 0;
       padding: var(--padding-single);
       transition: color .3s var(--bezier);
-    `),
+    `, [
+      cE('wrapper', `
+        flex-basis: 0;
+        flex-grow: 1;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      `)
+    ]),
     cB('base-selection-placeholder', `
       color: var(--placeholder-color);
     `),

diff --git a/src/cascader/demos/enUS/index.demo-entry.md b/src/cascader/demos/enUS/index.demo-entry.md
@@ -60,6 +60,7 @@ custom-field
 
 ### Cascader Slots
 
-| Name   | Parameters | Description                                     |
-| ------ | ---------- | ----------------------------------------------- |
-| action | `()`       | Action content displayed in the cascading menu. |
+| Name   | Parameters | Description                                      |
+| ------ | ---------- | ------------------------------------------------ |
+| action | `()`       | Action content displayed in the cascading menu.  |
+| empty  | `()`       | Empty state slot for the options cascading menu. |
diff --git a/src/cascader/demos/zhCN/index.demo-entry.md b/src/cascader/demos/zhCN/index.demo-entry.md
@@ -63,3 +63,4 @@ custom-field
 | 名称   | 参数 | 描述                             |
 | ------ | ---- | -------------------------------- |
 | action | `()` | 级联菜单中显示的 action 填充内容 |
+| empty  | `()` | 级联菜单无数据时的 slot          |
diff --git a/src/cascader/src/Cascader.tsx b/src/cascader/src/Cascader.tsx
@@ -833,7 +833,7 @@ export default defineComponent({
     }
   },
   render () {
-    const { mergedClsPrefix } = this
+    const { mergedClsPrefix, $slots } = this
     return (
       <div class={`${mergedClsPrefix}-cascader`}>
         <VBinder>
@@ -898,9 +898,7 @@ export default defineComponent({
                       onMousedown={this.handleMenuMousedown}
                       onTabout={this.handleMenuTabout}
                     >
-                      {this.$slots.action && {
-                        action: this.$slots.action
-                      }}
+                      {$slots}
                     </CascaderMenu>
                   )
                 }}

diff --git a/src/cascader/src/CascaderMenu.tsx b/src/cascader/src/CascaderMenu.tsx
@@ -67,7 +67,8 @@ export default defineComponent({
       isMountedRef,
       mergedClsPrefixRef,
       syncCascaderMenuPosition,
-      handleCascaderMenuClickOutside
+      handleCascaderMenuClickOutside,
+      mergedThemeRef
       // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
     } = inject(cascaderInjectionKey)!
     const submenuInstRefs: CascaderSubmenuInstance[] = []
@@ -121,14 +122,15 @@ export default defineComponent({
       selfElRef,
       submenuInstRefs,
       maskInstRef,
+      mergedTheme: mergedThemeRef,
       handleFocusin,
       handleFocusout,
       handleClickOutside,
       ...exposedRef
     }
   },
   render () {
-    const { submenuInstRefs, mergedClsPrefix, $slots } = this
+    const { submenuInstRefs, mergedClsPrefix, $slots, mergedTheme } = this
     return (
       <Transition name="fade-in-scale-up-transition" appear={this.isMounted}>
         {{
@@ -172,7 +174,12 @@ export default defineComponent({
                   </div>
                 ) : (
                   <div class={`${mergedClsPrefix}-cascader-menu__empty`}>
-                    {renderSlot($slots, 'empty', undefined, () => [<NEmpty />])}
+                    {renderSlot($slots, 'empty', undefined, () => [
+                      <NEmpty
+                        theme={mergedTheme.peers.Empty}
+                        themeOverrides={mergedTheme.peerOverrides.Empty}
+                      />
+                    ])}
                   </div>
                 )}
                 {$slots.action && (

diff --git a/src/cascader/styles/dark.ts b/src/cascader/styles/dark.ts
@@ -5,6 +5,7 @@ import { checkboxDark } from '../../checkbox/styles'
 import { commonDark } from '../../_styles/common'
 import type { CascaderTheme } from './light'
 import { self } from './light'
+import { emptyLight } from '../../empty/styles'
 
 const cascaderDark: CascaderTheme = {
   name: 'Cascader',
@@ -13,7 +14,8 @@ const cascaderDark: CascaderTheme = {
     InternalSelectMenu: internalSelectMenuDark,
     InternalSelection: internalSelectionDark,
     Scrollbar: scrollbarDark,
-    Checkbox: checkboxDark
+    Checkbox: checkboxDark,
+    Empty: emptyLight
   },
   self
 }

diff --git a/src/cascader/styles/light.ts b/src/cascader/styles/light.ts
@@ -5,6 +5,7 @@ import { checkboxLight } from '../../checkbox/styles'
 import { commonLight } from '../../_styles/common'
 import type { ThemeCommonVars } from '../../_styles/common'
 import { createTheme } from '../../_mixins'
+import { emptyLight } from '../../empty/styles'
 
 export const self = (vars: ThemeCommonVars) => {
   const {
@@ -48,7 +49,8 @@ const cascaderLight = createTheme({
     InternalSelectMenu: internalSelectMenuLight,
     InternalSelection: internalSelectionLight,
     Scrollbar: scrollbarLight,
-    Checkbox: checkboxLight
+    Checkbox: checkboxLight,
+    Empty: emptyLight
   },
   self
 })

diff --git a/src/data-table/src/TableParts/Header.tsx b/src/data-table/src/TableParts/Header.tsx
@@ -61,7 +61,7 @@ export default defineComponent({
       // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
     } = inject(dataTableInjectionKey)!
     function handleCheckboxUpdateChecked (): void {
-      if (someRowsCheckedRef.value || allRowsCheckedRef.value) {
+      if (allRowsCheckedRef.value) {
         doUncheckAll()
       } else {
         doCheckAll()

diff --git a/src/page-header/src/PageHeader.tsx b/src/page-header/src/PageHeader.tsx
@@ -97,49 +97,54 @@ export default defineComponent({
         ]}
       >
         {headerSlot ? (
-          <div class={`${mergedClsPrefix}-page-header-header`} key="breadcrumn">
+          <div class={`${mergedClsPrefix}-page-header-header`} key="breadcrumb">
             {headerSlot()}
           </div>
         ) : null}
-        <div class={`${mergedClsPrefix}-page-header`} key="header">
-          <div class={`${mergedClsPrefix}-page-header__main`} key="back">
-            {showBack ? (
-              <div
-                class={`${mergedClsPrefix}-page-header__back`}
-                onClick={onBack}
-              >
-                <NBaseIcon clsPrefix={mergedClsPrefix}>
-                  {{
-                    default: () => <ArrowBackIcon />
-                  }}
-                </NBaseIcon>
-              </div>
-            ) : null}
-            {avatarSlot ? (
-              <div class={`${mergedClsPrefix}-page-header__avatar`}>
-                {avatarSlot()}
-              </div>
-            ) : null}
-            {showTitle ? (
-              <div class={`${mergedClsPrefix}-page-header__title`} key="title">
-                {title || titleSlot!()}
-              </div>
-            ) : null}
-            {showSubtitle ? (
-              <div
-                class={`${mergedClsPrefix}-page-header__subtitle`}
-                key="subtitle"
-              >
-                {subtitle || subtitleSlot!()}
+        {(showBack || avatarSlot || showTitle || showSubtitle || showExtra) && (
+          <div class={`${mergedClsPrefix}-page-header`} key="header">
+            <div class={`${mergedClsPrefix}-page-header__main`} key="back">
+              {showBack ? (
+                <div
+                  class={`${mergedClsPrefix}-page-header__back`}
+                  onClick={onBack}
+                >
+                  <NBaseIcon clsPrefix={mergedClsPrefix}>
+                    {{
+                      default: () => <ArrowBackIcon />
+                    }}
+                  </NBaseIcon>
+                </div>
+              ) : null}
+              {avatarSlot ? (
+                <div class={`${mergedClsPrefix}-page-header__avatar`}>
+                  {avatarSlot()}
+                </div>
+              ) : null}
+              {showTitle ? (
+                <div
+                  class={`${mergedClsPrefix}-page-header__title`}
+                  key="title"
+                >
+                  {title || titleSlot!()}
+                </div>
+              ) : null}
+              {showSubtitle ? (
+                <div
+                  class={`${mergedClsPrefix}-page-header__subtitle`}
+                  key="subtitle"
+                >
+                  {subtitle || subtitleSlot!()}
+                </div>
+              ) : null}
+            </div>
+            {showExtra ? (
+              <div class={`${mergedClsPrefix}-page-header__extra`}>
+                {extra || extraSlot!()}
               </div>
             ) : null}
           </div>
-          {showExtra ? (
-            <div class={`${mergedClsPrefix}-page-header__extra`}>
-              {extra || extraSlot!()}
-            </div>
-          ) : null}
-        </div>
+        )}
         {defaultSlot ? (
           <div class={`${mergedClsPrefix}-page-header-content`} key="content">
             {defaultSlot()}

diff --git a/src/page-header/src/styles/index.cssr.ts b/src/page-header/src/styles/index.cssr.ts
@@ -56,11 +56,13 @@ export default c([
     `)
   ]),
   cB('page-header-content', `
-    margin-top: 20px;
     font-size: var(--font-size);
-  `),
+  `, [
+    c('&:not(:first-child)', 'margin-top: 20px;')
+  ]),
   cB('page-header-footer', `
-    margin-top: 20px;
     font-size: var(--font-size);
-  `)
+  `, [
+    c('&:not(:first-child)', 'margin-top: 20px;')
+  ])
 ])
diff --git a/src/popselect/demos/enUS/index.demo-entry.md b/src/popselect/demos/enUS/index.demo-entry.md
@@ -9,6 +9,7 @@ basic
 size
 scrollable
 multiple
+slot
 ```
 
 ## API
@@ -28,3 +29,10 @@ multiple
 For SelectOption & SelectGroupOption, see [Select](select#SelectOption-Properties)
 
 For other props, see [Popover](popover#Popover-Props)
+
+### Popselect Slots
+
+| Name   | Parameters | Description                            |
+| ------ | ---------- | -------------------------------------- |
+| action | `()`       | Options menu slot.                     |
+| empty  | `()`       | Empty state slot for the options menu. |
diff --git a/src/popselect/demos/enUS/slot.demo.md b/src/popselect/demos/enUS/slot.demo.md
@@ -0,0 +1,23 @@
+# Slot
+
+Is there anybody who needs slots in a select menu?
+
+```html
+<n-popselect v-model:value="value" :options="[]" trigger="click">
+  <n-button>{{ value || 'Popselect' }}</n-button>
+  <template #empty>Nothing to see, here is empty.</template>
+  <template #action>If you click this demo, you may need it.</template>
+</n-popselect>
+```
+
+```js
+import { defineComponent, ref } from 'vue'
+
+export default defineComponent({
+  setup () {
+    return {
+      value: ref('Empty')
+    }
+  }
+})
+```
diff --git a/src/popselect/demos/zhCN/index.demo-entry.md b/src/popselect/demos/zhCN/index.demo-entry.md
@@ -9,6 +9,7 @@ basic
 size
 scrollable
 multiple
+slot
 ```
 
 ## API
@@ -28,3 +29,10 @@ multiple
 对于 SelectOption & SelectGroupOption，参考 [Select](select#SelectOption-Properties)
 
 对于其他 props，参考 [Popover](popover#Popover-Props)
+
+### Popselect Slots
+
+| 名称   | 参数 | 说明                |
+| ------ | ---- | ------------------- |
+| action | `()` | 菜单操作区域的 slot |
+| empty  | `()` | 菜单无数据时的 slot |