Merge remote-tracking branch 'upstream/develop' into develop

CHANGELOG.en-US.md

@@ -1,4 +1,17 @@
 # CHANGELOG
+## 1.0.3 (2020-03-25)
+### Features
+- `$NMessage`, `$NNotification`, `$NConfirm`'s theme will be applied on their children components.
+### Fixes
+- View measuring element will confict when multiple naive-ui exist.
+- `validate` method of `n-form-item`  won't be resolved for some validator.
+- `$NConfirm`'s theme doesn't follow `n-config-provider`'s theme.
+
+## 1.0.2 (2020-03-23)
+### Fixes
+- `n-transfer`'s options are not reinitialized after value changes.
+- `n-nimbus-service-layout` (deprecated) doesn't deal with the compatibility of Vue Router(under 3.1)'s `push` method.
+
 ## 1.0.1 (2020-03-21)
 ### Features
 - Add `'bar'` & `'arrow-circle'` on `show-trigger` prop of `n-layout-sider`.

CHANGELOG.zh-CN.md

@@ -1,4 +1,18 @@
 # CHANGELOG
+## 1.0.3 (2020-03-25)
+### Features
+- `$NMessage`, `$NNotification`, `$NConfirm` 的获取到的主题会应用到他们的内部组件
+
+### Fixes
+- 多个 naive-ui 共存时定位元素会产生冲突
+- `n-form-item` 的 validate 方法在某些 validator 的返回值下不会 resolve
+- `$NConfirm` 主题未随 `n-config-provider` 切换
+
+## 1.0.2 (2020-03-23)
+### Fixes
+- `n-transfer` 的选项在值变化之后没有重置
+- `n-nimbus-service-layout` (deprecated) 没有兼容 Vue Router(3.1版本以下) `push` 方法的返回值
+
 ## 1.0.1 (2020-03-21)
 ### Features
 - `n-layout-sider` 的 `show-trigger` 增加了 `'bar'` & `'arrow-circle'` 选项

package.json

@@ -1,7 +1,7 @@
 {
   "name": "naive-ui",
-  "version": "1.0.1",
-  "description": "",
+  "version": "1.0.3",
+  "description": "A Vue UI Framework. Caring About Styles, Themed, Batteries Included.",
   "main": "lib/index.js",
   "module": "es/index.js",
   "scripts": {

playground/testAsyncValidator.js

@@ -0,0 +1,17 @@
+const Schema = require('async-validator')
+
+const descriptor = {
+  value: {
+    type: 'string',
+    required: true,
+    validator: () => true
+  }
+}
+
+const validator = new Schema(descriptor)
+
+validator.validate({
+  value: '123'
+}, (errors, fields) => {
+  console.log('wtf')
+})

src/Checkbox/src/Checkbox.vue

@@ -13,10 +13,10 @@
     @keyup.enter="handleKeyUpEnter"
     @keyup.space="handleKeyUpSpace"
     @keydown.space="handleKeyDownSpace"
+    @click="handleClick"
   >
     <div
       class="n-checkbox-box"
-      @click="handleClick"
     >
       <check-mark class="n-checkbox-box__check-mark" />
       <line-mark class="n-checkbox-box__line-mark" />
@@ -24,7 +24,6 @@
     <span
       v-if="$slots.default"
       class="n-checkbox__label"
-      @click="handleClick"
     >
       <slot />
     </span>

src/Confirm/src/Confirm.vue

@@ -79,6 +79,7 @@ import iosCloseCircle from '../../_icons/ios-close-circle'
 import withapp from '../../_mixins/withapp'
 import themeable from '../../_mixins/themeable'
 import render from '../../_utils/vue/render'
+import asthemecontext from '../../_mixins/asthemecontext'
 
 export default {
   name: 'NConfirm',
@@ -91,7 +92,7 @@ export default {
     iosCloseCircle,
     render
   },
-  mixins: [withapp, themeable],
+  mixins: [withapp, themeable, asthemecontext],
   props: {
     icon: {
       type: Function,
@@ -132,6 +133,10 @@ export default {
     bordered: {
       type: Boolean,
       default: false
+    },
+    themeContextActivated: {
+      type: Boolean,
+      default: false
     }
   },
   computed: {

src/Confirm/src/ConfirmEnvironment.vue

@@ -14,6 +14,7 @@
       :negative-text="negativeText"
       :title="title"
       :loading="loading"
+      theme-context-activated
       @close="handleCloseClick"
       @negative-click="handleNegativeClick"
       @positive-click="handlePositiveClick"

src/Confirm/src/ConfirmPlugin.js

@@ -1,7 +1,5 @@
 import ConfirmEnvironment from './ConfirmEnvironment.vue'
 
-const instances = new Set()
-
 function updateConfirm (data, instance) {
   for (const key of Object.keys(data)) {
     if (key in instance.$data) {
@@ -13,11 +11,20 @@ function updateConfirm (data, instance) {
 export default {
   name: 'NConfirm',
   theme: null,
+  inheritedTheme: null,
+  instances: new Set(),
+  handleThemeChange (theme) {
+    this.inheritedTheme = theme
+    const syntheticTheme = this.theme || this.inheritedTheme
+    for (const instance of this.instances) {
+      instance.inheritedTheme = syntheticTheme
+    }
+  },
   createInstance () {
     const instance = new this.Vue(ConfirmEnvironment)
     instance.$mount()
-    instances.add(instance)
-    instance.instances = instances
+    this.instances.add(instance)
+    instance.instances = this.instances
     return instance
   },
   confirm (options) {
@@ -28,12 +35,13 @@ export default {
   },
   warning (options) {
     const instance = this.createInstance()
+    const syntheticTheme = this.theme || this.inheritedTheme
     updateConfirm(
       {
         type: 'warning',
         active: true,
         ...options,
-        theme: options.theme || this.theme
+        inheritedTheme: syntheticTheme
       },
       instance
     )
@@ -41,12 +49,13 @@ export default {
   },
   error (options) {
     const instance = this.createInstance()
+    const syntheticTheme = this.theme || this.inheritedTheme
     updateConfirm(
       {
         type: 'error',
         active: true,
         ...options,
-        theme: options.theme || this.theme
+        inheritedTheme: syntheticTheme
       },
       instance
     )
@@ -54,19 +63,20 @@ export default {
   },
   success (options) {
     const instance = this.createInstance()
+    const syntheticTheme = this.theme || this.inheritedTheme
     updateConfirm(
       {
         type: 'success',
         active: true,
         ...options,
-        theme: options.theme || this.theme
+        inheritedTheme: syntheticTheme
       },
       instance
     )
     return instance
   },
   destroyAll () {
-    instances.forEach(instance => {
+    this.instances.forEach(instance => {
       instance.active = false
     })
   }

src/DataTable/src/HeaderButton/FilterMenu.vue

@@ -1,5 +1,10 @@
 <template>
   <div class="n-data-table-filter-menu">
+    <n-scrollbar
+      :content-style="{
+        transform: 'translateZ(0)'
+      }"
+    >
       <n-checkbox-group
         v-if="multiple"
         :theme="theme"
@@ -31,6 +36,7 @@
           {{ option.label }}
         </n-radio>
       </n-radio-group>
+    </n-scrollbar>
     <n-divider :theme="theme" />
     <div class="n-data-table-filter-menu__action">
       <n-button
@@ -61,6 +67,7 @@ import NRadioGroup from '../../../Radio/src/RadioGroup'
 import NRadio from '../../../Radio/src/Radio'
 import NDivider from '../../../Divider'
 import NButton from '../../../Button'
+import NScrollbar from '../../../Scrollbar'
 
 function isEqual (value, oldValue) {
   if (Array.isArray(value) && Array.isArray(oldValue)) {
@@ -84,7 +91,8 @@ export default {
     NDivider,
     NRadioGroup,
     NRadio,
-    NButton
+    NButton,
+    NScrollbar
   },
   props: {
     radioGroupName: {

src/Form/src/Form.vue

@@ -73,11 +73,14 @@ export default {
     validate (callback, shouldRuleBeApplied = () => true) {
       return new Promise((resolve, reject) => {
         const formItemValidationPromises = []
-        for (const key of Object.keys(this.items)) {
-          const formItemInstances = this.items[key]
+        const formItems = this.items
+        for (const key of Object.keys(formItems)) {
+          const formItemInstances = formItems[key]
           for (const formItemInstance of formItemInstances) {
             if (formItemInstance.path) {
-              formItemValidationPromises.push(formItemInstance._validate(null, shouldRuleBeApplied))
+              formItemValidationPromises.push(
+                formItemInstance._validate(null, shouldRuleBeApplied)
+              )
             }
           }
         }
@@ -85,7 +88,9 @@ export default {
           .all(formItemValidationPromises)
           .then(results => {
             if (results.some(result => !result.valid)) {
-              const errors = results.filter(result => result.errors).map(result => result.errors)
+              const errors = results
+                .filter(result => result.errors)
+                .map(result => result.errors)
               if (callback) {
                 callback(errors)
               } else {

src/Form/src/FormItem.vue

@@ -64,8 +64,29 @@ function wrapValidator (validator) {
   if (typeof validator === 'function') {
     return (...args) => {
       try {
-        return validator(...args)
+        const validateResult = validator(...args)
+        if (
+          typeof validateResult === 'boolean' ||
+          validateResult instanceof Error ||
+          (validateResult && validateResult.then)
+        ) {
+          return validateResult
+        } else if (validateResult === void 0) {
+          return true
+        } else {
+          console.warn(
+            `[naive-ui/form-item/validate]: You return a ${typeof validateResult} ` +
+            'typed value in the validator method, which is not recommended. Please ' +
+            'use `boolean`, `Error` or `Promise` typed value instead.'
+          )
+          return true
+        }
       } catch (err) {
+        console.error(
+          '[naive-ui/form-item/validate]: An error is catched in the validation, ' +
+          'so the validation won\'t be done. Your callback in `validate` method of ' +
+          '`n-form` or `n-form-item` won\'t be called in this validation.'
+        )
         console.error(err)
         return void 0
       }
@@ -320,11 +341,18 @@ export default {
         suppressWarning: true
       }
     ) {
-      if (!this.path) {
+      const path = this.path
+      /**
+       * If not path is specified, not data will be validated, so any value will
+       * be valid.
+       */
+      if (!path) {
         console.error(
           '[naive-ui/form-item]: `n-form-item` without `path` can\'t be validated.'
         )
-        return
+        return Promise.resolve({
+          valid: true
+        })
       }
       if (!options) {
         options = {}
@@ -332,8 +360,7 @@ export default {
         if (!options.first) options.first = this.first
       }
       const rules = this.syntheticRules
-      const path = this.path
-      const value = get(this.NForm.model, this.path, null)
+      const value = get(this.NForm.model, path, null)
       const activeRules = (!trigger
         ? rules
         : rules.filter(rule => {

src/Message/src/Message.vue

@@ -7,8 +7,11 @@ import mdCloseCircle from '../../_icons/md-close-circle'
 import NBaseLoading from '../../_base/Loading'
 import IconSwitchTransition from '../../_transition/IconSwitchTransition'
 import render from '../../_utils/vue/render'
+import themeable from '../../_mixins/themeable'
+import asthemecontext from '../../_mixins/asthemecontext'
 
 export default {
+  mixins: [ themeable, asthemecontext ],
   props: {
     icon: {
       type: [String, Function],

src/Notification/src/Notification.vue

@@ -64,6 +64,7 @@ import mdAlert from '../../_icons/md-alert'
 import mdInformationCircle from '../../_icons/md-information-circle'
 import mdCloseCircle from '../../_icons/md-close-circle'
 import render from '../../_utils/vue/render'
+import asthemecontext from '../../_mixins/asthemecontext'
 
 export default {
   components: {
@@ -75,7 +76,7 @@ export default {
     mdInformationCircle,
     mdCloseCircle
   },
-  mixins: [ themeable ],
+  mixins: [ themeable, asthemecontext ],
   props: {
     closable: {
       type: Boolean,

src/Transfer/src/Transfer.vue

@@ -669,4 +669,3 @@ export default {
   }
 }
 </script>
-

src/_base/Selection/src/main.vue

@@ -291,9 +291,15 @@ export default {
       }
     },
     handleBlur (e) {
-      if (!e.relatedTarget) {
-        console.log(e.relatedTarget)
-        console.warn('[naive-ui/base-selection]: blur events has no related target, this may be a bug of naive-ui.')
+      if (
+        !e.relatedTarget &&
+        document.activeElement !== document.body
+      ) {
+        console.warn(
+          '[naive-ui/base-selection]: blur event has no related target,',
+          e.relatedTarget,
+          ', this may be a bug of naive-ui.'
+        )
       }
       if (e.relatedTarget && this.$el.contains(e.relatedTarget)) return
       this.$emit('blur')

src/_deprecated/NimbusServiceLayout/src/main.vue

@@ -148,7 +148,9 @@ export default {
             on: {
               click: () => {
                 if (this.$router && item.path) {
-                  this.$router.push(item.path).catch(() => {})
+                  Promise.resolve(
+                    this.$router.push(item.path)
+                  ).catch(() => {})
                 }
               }
             }

src/_mixins/asthemecontext.js

@@ -1,4 +1,10 @@
 export default {
+  props: {
+    themeContextActivated: {
+      type: Boolean,
+      default: true
+    }
+  },
   provide () {
     return {
       NThemedComponent: this

src/_mixins/placeable.js

@@ -11,20 +11,23 @@ import {
 let viewMeasurerInitialized = false
 let viewMeasurer = null
 
-if (!viewMeasurerInitialized && !document.getElementById('n-view-measurer')) {
+if (!viewMeasurerInitialized) {
+  viewMeasurer = document.getElementById('n-view-measurer')
+  if (!viewMeasurer) {
     viewMeasurer = document.createElement('div')
     viewMeasurer.id = 'n-view-measurer'
     viewMeasurer.style = `
-    position: fixed;
-    left: 0;
-    right: 0;
-    top: 0;
-    bottom: 0;
-    pointer-events: none;
-    visibility: hidden;
+      position: fixed !important;
+      left: 0 !important;
+      right: 0 !important;
+      top: 0 !important;
+      bottom: 0 !important;
+      pointer-events: none !important;
+      visibility: hidden !important;
     `
-  viewMeasurerInitialized = true
     document.body.appendChild(viewMeasurer)
+  }
+  viewMeasurerInitialized = true
 }
 
 function getActivatorEl (refs) {

src/_mixins/themeable.js

@@ -19,12 +19,17 @@ export default {
       const theme = this.theme
       if (theme !== null) {
         return theme
-      } else if (this.NThemedComponent && this.NThemedComponent.theme) {
-        return this.NThemedComponent.theme
-      } else {
+      }
+      const NThemedComponent = this.NThemedComponent
+      if (
+        NThemedComponent &&
+        NThemedComponent.theme &&
+        NThemedComponent.themeContextActivated
+      ) {
+        return NThemedComponent.theme
+      }
       const NConfigProvider = this.NConfigProvider
       return (NConfigProvider && NConfigProvider.syntheticTheme) || null
-      }
     },
     syntheticStyle () {
       const themedStyle = this.themedStyle

styles/Checkbox.scss

@@ -2,8 +2,6 @@
 
 @mixin checkbox-size-mixin ($size) {
   @include m($size + '-size') {
-    height: map-get($--n-font-size, $size);
-    line-height: map-get($--n-font-size, $size);
     font-size: map-get($--n-font-size, $size);
     @include b(checkbox-box) {
       height: map-get($--n-checkbox-size, $size);
@@ -16,7 +14,7 @@
   @include once {
     @include b(checkbox-group) {
       font-size: 14px;
-      line-height: 14px;
+      line-height: 1.25;
       @include b(checkbox) {
         margin-right: 18px;
       }
@@ -25,14 +23,15 @@
       @include checkbox-size-mixin('small');
       @include checkbox-size-mixin('medium');
       @include checkbox-size-mixin('large');
+      line-height: 1.25;
       outline: none;
       cursor: pointer;
-      display: inline-block;
+      display: inline-flex;
+      align-items: center;
       white-space: nowrap;
       @include b(checkbox-box) {
         display: inline-block;
         box-sizing: border-box;
-        vertical-align: bottom;
         border-radius: 4px;
         position: relative;
         transition:

styles/DataTable.scss

@@ -467,15 +467,20 @@
 }
 
 @include b(data-table-filter-menu) {
+  @include b(scrollbar) {
+    max-height: 240px;
+  }
   @include e(group) {
     display: flex;
     flex-direction: column;
     padding: 12px 12px 0 12px;
     @include b(checkbox) {
       margin-bottom: 12px;
+      margin-right: 0;
     }
     @include b(radio) {
       margin-bottom: 12px;
+      margin-right: 0;
     }
   }
   @include b(divider) {

styles/Radio.scss

@@ -33,6 +33,7 @@
       @include radio-size-mixin('small');
       @include radio-size-mixin('medium');
       @include radio-size-mixin('large');
+      line-height: 1.25;
       outline: none;
       position: relative;
       user-select: none;

styles/Tree.scss

@@ -113,7 +113,7 @@
           background-color: transparent;
         }
         @include e(text) {
-          line-height: 1.25em;
+          line-height: 1.25;
           border-bottom: 1px solid transparent;
           transition: border-color .3s $--n-ease-in-out-cubic-bezier;
         }

think.md

@@ -134,6 +134,9 @@ zindex 的问题解决了，虽然很简单，在 static 元素上设定 zindex
 ## 2020.3.20
 一想到到了 1.0 就要写 changelog，就感觉🥚在隐隐作痛
 
+## 2020.3.25
+一个有趣的事情是，blur 到 document.body 之后，document.activeElement 是 body，但是 blurEvent.relatedTarget 会被设为 null
+
 ## TODO 排序不分先后
 1. <del>Focus Detector on Time Selector</del>
 2. <del>Menu Root Indent = 0 可能造成问题</del>