Merge branch 'main' into n-badge

tusen-ai · Dec 16, 2021 · be67657 · be67657
2 parents 9da979b + 8c4e807
commit be67657
Show file tree

Hide file tree

Showing 27 changed files with 258 additions and 217 deletions.
diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md
@@ -2,8 +2,19 @@
 
 ## Pending
 
+### Breaking Changes
+
+- `n-switch` can no longer be clicked under `loading` status, closes [#1853](https://github.com/TuSimple/naive-ui/issues/1853).
+
+### Fixes
+
+- Fix `n-data-table` 's horizontal scrollbar disappears when max-height is not set, closes [#1857](https://github.com/TuSimple/naive-ui/issues/1857).
+- Fix `n-input-number` cannot input negative decimals value, closes [#1858](https://github.com/TuSimple/naive-ui/issues/1858).
+
 ### Feats
 
+- `n-divider` uses `n` as CSS vars prefix.
+- `typography` uses `n` as CSS vars prefix.
 - `n-badge` uses `n` as CSS vars prefix.
 
 ## 2.22.0 (2021-12-15)

diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md
@@ -2,8 +2,19 @@
 
 ## Pending
 
+### Breaking Changes
+
+- `n-switch` 在 `loading` 状态不可再被点击，关闭 [#1853](https://github.com/TuSimple/naive-ui/issues/1853)
+
+### Fixes
+
+- 修复 `n-data-table` 在未设置 max-height 的情况下横向滚动条消失, 关闭 [#1857](https://github.com/TuSimple/naive-ui/issues/1857)
+- 修复 `n-input-number` 不能输入为负数的小数，关闭 [#1858](https://github.com/TuSimple/naive-ui/issues/1858)
+
 ### Feats
 
+- `n-divider` 的 CSS 变量使用 `n` 作为前缀
+- `typography` 的 CSS 变量使用 `n` 作为前缀
 - `n-badge` 的 CSS 变量使用 `n` 作为前缀
 
 ## 2.22.0 (2021-12-15)

diff --git a/package.json b/package.json
@@ -62,7 +62,7 @@
     ]
   },
   "devDependencies": {
-    "esbuild": "0.14.3",
+    "esbuild": "0.14.5",
     "@babel/eslint-parser": "^7.15.8",
     "@babel/generator": "^7.12.11",
     "@babel/parser": "^7.12.11",

diff --git a/src/_internal/scrollbar/src/ScrollBar.tsx b/src/_internal/scrollbar/src/ScrollBar.tsx
@@ -79,10 +79,6 @@ const scrollbarProps = {
     type: Boolean,
     default: false
   },
-  showScrollbar: {
-    type: Boolean,
-    default: true
-  },
   // If container is set, resize observer won't not attached
   container: Function as PropType<() => HTMLElement | null | undefined>,
   content: Function as PropType<() => HTMLElement | null | undefined>,
@@ -602,7 +598,7 @@ const Scrollbar = defineComponent({
     }
   },
   render () {
-    const { $slots, mergedClsPrefix, showScrollbar } = this
+    const { $slots, mergedClsPrefix } = this
     if (!this.scrollable) return renderSlot($slots, 'default')
     const createChildren = (): VNode =>
       h(
@@ -653,52 +649,48 @@ const Scrollbar = defineComponent({
               </VResizeObserver>
             </div>
           ),
-          showScrollbar && (
-            <div
-              ref="yRailRef"
-              class={`${mergedClsPrefix}-scrollbar-rail ${mergedClsPrefix}-scrollbar-rail--vertical`}
-              style={[this.horizontalRailStyle] as any}
-            >
-              <Transition name="fade-in-transition">
-                {{
-                  default: () =>
-                    this.needYBar && this.isShowYBar && !this.isIos ? (
-                      <div
-                        class={`${mergedClsPrefix}-scrollbar-rail__scrollbar`}
-                        style={{
-                          height: this.yBarSizePx,
-                          top: this.yBarTopPx
-                        }}
-                        onMousedown={this.handleYScrollMouseDown}
-                      />
-                    ) : null
-                }}
-              </Transition>
-            </div>
-          ),
-          showScrollbar && (
-            <div
-              ref="xRailRef"
-              class={`${mergedClsPrefix}-scrollbar-rail ${mergedClsPrefix}-scrollbar-rail--horizontal`}
-              style={[this.verticalRailStyle] as any}
-            >
-              <Transition name="fade-in-transition">
-                {{
-                  default: () =>
-                    this.needXBar && this.isShowXBar && !this.isIos ? (
-                      <div
-                        class={`${mergedClsPrefix}-scrollbar-rail__scrollbar`}
-                        style={{
-                          width: this.xBarSizePx,
-                          left: this.xBarLeftPx
-                        }}
-                        onMousedown={this.handleXScrollMouseDown}
-                      />
-                    ) : null
-                }}
-              </Transition>
-            </div>
-          )
+          <div
+            ref="yRailRef"
+            class={`${mergedClsPrefix}-scrollbar-rail ${mergedClsPrefix}-scrollbar-rail--vertical`}
+            style={[this.horizontalRailStyle] as any}
+          >
+            <Transition name="fade-in-transition">
+              {{
+                default: () =>
+                  this.needYBar && this.isShowYBar && !this.isIos ? (
+                    <div
+                      class={`${mergedClsPrefix}-scrollbar-rail__scrollbar`}
+                      style={{
+                        height: this.yBarSizePx,
+                        top: this.yBarTopPx
+                      }}
+                      onMousedown={this.handleYScrollMouseDown}
+                    />
+                  ) : null
+              }}
+            </Transition>
+          </div>,
+          <div
+            ref="xRailRef"
+            class={`${mergedClsPrefix}-scrollbar-rail ${mergedClsPrefix}-scrollbar-rail--horizontal`}
+            style={[this.verticalRailStyle] as any}
+          >
+            <Transition name="fade-in-transition">
+              {{
+                default: () =>
+                  this.needXBar && this.isShowXBar && !this.isIos ? (
+                    <div
+                      class={`${mergedClsPrefix}-scrollbar-rail__scrollbar`}
+                      style={{
+                        width: this.xBarSizePx,
+                        left: this.xBarLeftPx
+                      }}
+                      onMousedown={this.handleXScrollMouseDown}
+                    />
+                  ) : null
+              }}
+            </Transition>
+          </div>
         ]
       )
     return this.container ? (

diff --git a/src/data-table/src/TableParts/Body.tsx b/src/data-table/src/TableParts/Body.tsx
@@ -460,7 +460,6 @@ export default defineComponent({
       <NScrollbar
         ref="scrollbarInstRef"
         scrollable={scrollable || isBasicAutoLayout}
-        showScrollbar={!this.bodyShowHeaderOnly}
         class={`${mergedClsPrefix}-data-table-base-table-body`}
         style={this.bodyStyle}
         theme={mergedTheme.peers.Scrollbar}

diff --git a/src/divider/src/Divider.tsx b/src/divider/src/Divider.tsx
@@ -46,10 +46,10 @@ export default defineComponent({
           self: { color, textColor, fontWeight }
         } = themeRef.value
         return {
-          '--bezier': cubicBezierEaseInOut,
-          '--color': color,
-          '--text-color': textColor,
-          '--font-weight': fontWeight
+          '--n-bezier': cubicBezierEaseInOut,
+          '--n-color': color,
+          '--n-text-color': textColor,
+          '--n-font-weight': fontWeight
         }
       })
     }

diff --git a/src/divider/src/styles/index.cssr.ts b/src/divider/src/styles/index.cssr.ts
@@ -1,20 +1,20 @@
 import { cB, cNotM, cE, cM } from '../../../_utils/cssr'
 
 // vars:
-// --bezier
-// --color
-// --text-color
-// --font-weight
+// --n-bezier
+// --n-color
+// --n-text-color
+// --n-font-weight
 export default cB('divider', `
   position: relative;
   display: flex;
   width: 100%;
   box-sizing: border-box;
   font-size: 16px;
-  color: var(--text-color);
+  color: var(--n-text-color);
   transition:
-    color .3s var(--bezier),
-    background-color .3s var(--bezier);
+    color .3s var(--n-bezier),
+    background-color .3s var(--n-bezier);
 `, [
   cNotM('vertical', `
     margin-top: 24px;
@@ -31,7 +31,7 @@ export default cB('divider', `
     margin-left: 12px;
     margin-right: 12px;
     white-space: nowrap;
-    font-weight: var(--font-weight);
+    font-weight: var(--n-font-weight);
   `),
   cM('title-position-left', [
     cE('line', [
@@ -65,22 +65,22 @@ export default cB('divider', `
   `),
   cE('line', `
     border: none;
-    transition: background-color .3s var(--bezier), border-color .3s var(--bezier);
+    transition: background-color .3s var(--n-bezier), border-color .3s var(--n-bezier);
     height: 1px;
     width: 100%;
     margin: 0;
   `),
   cNotM('dashed', [
     cE('line', {
-      backgroundColor: 'var(--color)'
+      backgroundColor: 'var(--n-color)'
     })
   ]),
   cM('dashed', [
     cE('line', {
-      borderColor: 'var(--color)'
+      borderColor: 'var(--n-color)'
     })
   ]),
   cM('vertical', {
-    backgroundColor: 'var(--color)'
+    backgroundColor: 'var(--n-color)'
   })
 ])
diff --git a/src/input-number/src/utils.ts b/src/input-number/src/utils.ts
@@ -13,7 +13,7 @@ export function parse (value: string): number | null {
 
 // can be parsed to number but shouldn't be applied when inputing
 export function isWipValue (value: string): boolean {
-  return /^\d+\.$/.test(value) || /^\.\d+$/.test(value)
+  return /^(-)?\d+\.$/.test(value) || /^\.\d+$/.test(value)
 }
 
 // string => boolean (expected, not implemented)

diff --git a/src/input-number/tests/InputNumber.spec.tsx b/src/input-number/tests/InputNumber.spec.tsx
@@ -167,4 +167,28 @@ describe('n-input-number', () => {
     expect(onUpdateValue).toHaveBeenCalledWith(24)
     wrapper.unmount()
   })
+
+  it('should work with negative decimal value', async () => {
+    const onUpdateValue = jest.fn()
+    const wrapper = mount(NInputNumber, {
+      attachTo: document.body,
+      props: {
+        defaultValue: 2,
+        onUpdateValue
+      }
+    })
+    wrapper.find('input').element.value = '-2.'
+    await wrapper.find('input').trigger('input')
+    expect(onUpdateValue).toHaveBeenCalledTimes(0)
+    wrapper.find('input').element.value = '-2.2'
+    await wrapper.find('input').trigger('input')
+    expect(onUpdateValue).toHaveBeenCalledWith(-2.2)
+    wrapper.find('input').element.value = '-.'
+    await wrapper.find('input').trigger('input')
+    expect(onUpdateValue).toHaveBeenCalledTimes(1)
+    wrapper.find('input').element.value = '-.2'
+    await wrapper.find('input').trigger('input')
+    expect(onUpdateValue).toHaveBeenCalledWith(-0.2)
+    wrapper.unmount()
+  })
 })
diff --git a/src/switch/src/Switch.tsx b/src/switch/src/Switch.tsx
@@ -129,7 +129,7 @@ export default defineComponent({
       nTriggerFormBlur()
     }
     function handleClick (): void {
-      if (!mergedDisabledRef.value) {
+      if (!mergedDisabledRef.value && !props.loading) {
         if (mergedValueRef.value !== props.checkedValue) {
           doUpdateValue(props.checkedValue)
         } else {
@@ -240,6 +240,7 @@ export default defineComponent({
           checked && `${mergedClsPrefix}-switch--active`,
           mergedDisabled && `${mergedClsPrefix}-switch--disabled`,
           this.round && `${mergedClsPrefix}-switch--round`,
+          this.loading && `${mergedClsPrefix}-switch--loading`,
           this.pressed && `${mergedClsPrefix}-switch--pressed`
         ]}
         tabindex={!this.mergedDisabled ? 0 : undefined}

diff --git a/src/switch/src/styles/index.cssr.ts b/src/switch/src/styles/index.cssr.ts
@@ -175,5 +175,8 @@ export default cB('switch', `
       cursor: not-allowed;
       opacity: .5;
     `)
-  ])
+  ]),
+  cM('loading', {
+    'pointer-events': 'none'
+  })
 ])
diff --git a/src/typography/src/a.tsx b/src/typography/src/a.tsx
@@ -33,8 +33,8 @@ export default defineComponent({
           self: { aTextColor }
         } = themeRef.value
         return {
-          '--text-color': aTextColor,
-          '--bezier': cubicBezierEaseInOut
+          '--n-text-color': aTextColor,
+          '--n-bezier': cubicBezierEaseInOut
         }
       })
     }

diff --git a/src/typography/src/blockquote.tsx b/src/typography/src/blockquote.tsx
@@ -39,11 +39,11 @@ export default defineComponent({
           }
         } = themeRef.value
         return {
-          '--bezier': cubicBezierEaseInOut,
-          '--font-size': blockquoteFontSize,
-          '--line-height': blockquoteLineHeight,
-          '--prefix-color': blockquotePrefixColor,
-          '--text-color': blockquoteTextColor
+          '--n-bezier': cubicBezierEaseInOut,
+          '--n-font-size': blockquoteFontSize,
+          '--n-line-height': blockquoteLineHeight,
+          '--n-prefix-color': blockquotePrefixColor,
+          '--n-text-color': blockquoteTextColor
         }
       })
     }

diff --git a/src/typography/src/create-header.ts b/src/typography/src/create-header.ts
@@ -52,14 +52,14 @@ export default (level: '1' | '2' | '3' | '4' | '5' | '6') =>
             }
           } = themeRef.value
           return {
-            '--bezier': cubicBezierEaseInOut,
-            '--font-size': fontSize,
-            '--margin': margin,
-            '--bar-color': barColor,
-            '--bar-width': barWidth,
-            '--font-weight': headerFontWeight,
-            '--text-color': headerTextColor,
-            '--prefix-width': prefixWidth
+            '--n-bezier': cubicBezierEaseInOut,
+            '--n-font-size': fontSize,
+            '--n-margin': margin,
+            '--n-bar-color': barColor,
+            '--n-bar-width': barWidth,
+            '--n-font-weight': headerFontWeight,
+            '--n-text-color': headerTextColor,
+            '--n-prefix-width': prefixWidth
           }
         })
       }

diff --git a/src/typography/src/hr.tsx b/src/typography/src/hr.tsx
@@ -24,7 +24,7 @@ export default defineComponent({
       mergedClsPrefix: mergedClsPrefixRef,
       cssVars: computed(() => {
         return {
-          '--color': themeRef.value.self.hrColor
+          '--n-color': themeRef.value.self.hrColor
         }
       })
     }

diff --git a/src/typography/src/ol.tsx b/src/typography/src/ol.tsx
@@ -41,13 +41,13 @@ export default defineComponent({
           }
         } = themeRef.value
         return {
-          '--bezier': cubicBezierEaseInOut,
-          '--font-size': liFontSize,
-          '--line-height': liLineHeight,
-          '--text-color': liTextColor,
-          '--li-margin': liMargin,
-          '--ol-padding': olPadding,
-          '--ul-padding': ulPadding
+          '--n-bezier': cubicBezierEaseInOut,
+          '--n-font-size': liFontSize,
+          '--n-line-height': liLineHeight,
+          '--n-text-color': liTextColor,
+          '--n-li-margin': liMargin,
+          '--n-ol-padding': olPadding,
+          '--n-ul-padding': ulPadding
         }
       })
     }