Merge pull request #45 from wanli-song/develop

add(datePicker): format

demo/documentation/components/datePicker/enUS/format.md

@@ -0,0 +1,32 @@
+# Format
+```html
+<n-date-picker
+  v-model="timestamp"
+  type="datetime"
+  :disabledTime= "disabledTime"
+  clearable
+  :format="format"
+/>
+<n-date-picker v-model="timestamp2" type="datetime" :format="format" clearable />
+```
+```js
+export default {
+  data () {
+    return {
+      timestamp: null,
+      timestamp2: 1000000,
+      format: 'yyyy/MM/dd - HH:mm:ss'
+    }
+  },
+  methods: {
+    disabledTime (current) {
+      return current > 1573552182000 && current < 1573811382000
+    }
+  }
+}
+```
+```css
+.n-date-picker {
+  margin: 0 12px 8px 0;
+}
+```

demo/documentation/components/datePicker/enUS/index.md

@@ -11,6 +11,7 @@ disabled
 disabledTime
 actions
 events
+format
 ```
 ## V-model
 |Prop|Event|
@@ -33,6 +34,7 @@ events
 |-|-|-|-|
 |placeholder|`string`|`'Select Date'`||
 |is-date-disabled|`(current: number) => boolean`|`() => false`||
+|format|`string`|`'yyyy-MM-dd'`||
 
 ### DateTime Type Props
 |Name|Type|Default|Description|
@@ -40,6 +42,7 @@ events
 |placeholder|`string`|`'Select Date and Time'`||
 |is-date-disabled|`(current: number) => boolean`|`() => false`||
 |is-time-disabled|`(current: number) => { isHourDisabled: boolean, isMinuteDisabled: boolean, isSecondDisabled: boolean }`|`() => ({ isHourDisabled: () => false, isMinuteDisabled: () => false, isSecondDisabled: () => false }})`||
+|format|`string`|`'yyyy-MM-dd HH:mm:ss'`||
 
 ### DateRange Type Props
 |Name|Type|Default|Description|
@@ -49,6 +52,7 @@ events
 |end-placeholder|`string`|`'End Date'`||
 |is-date-disabled|`(current: number) => boolean`|`() => false`||
 |is-time-disabled|`(current: number) => { isHourDisabled: boolean, isMinuteDisabled: boolean, isSecondDisabled: boolean }`|`() => ({ isHourDisabled: () => false, isMinuteDisabled: () => false, isSecondDisabled: () => false }})`||
+|format|`string`|`'yyyy-MM-dd'`||
 
 
 ### DateTimeRange Type Props
@@ -59,6 +63,7 @@ events
 |end-placeholder|`string`|`'End Date and Time'`||
 |is-date-disabled|`(current: number) => boolean`|`() => false`||
 |is-time-disabled|`(current: number) => { isHourDisabled: boolean, isMinuteDisabled: boolean, isSecondDisabled: boolean }`|`() => ({ isHourDisabled: () => false, isMinuteDisabled: () => false, isSecondDisabled: () => false }})`||
+|format|`string`|`'yyyy-MM-dd HH:mm:ss'`||
 
 ## Events
 ### Date, DateTime Type Events

demo/documentation/components/datePicker/zhCN/format.md

@@ -0,0 +1,32 @@
+# 格式化
+```html
+<n-date-picker
+  v-model="timestamp"
+  type="datetime"
+  :disabledTime= "disabledTime"
+  clearable
+  :format="format"
+/>
+<n-date-picker v-model="timestamp2" type="datetime" :format="format" clearable />
+```
+```js
+export default {
+  data () {
+    return {
+      timestamp: null,
+      timestamp2: 1000000,
+      format: 'yyyy/MM/dd - HH:mm:ss'
+    }
+  },
+  methods: {
+    disabledTime (current) {
+      return current > 1573552182000 && current < 1573811382000
+    }
+  }
+}
+```
+```css
+.n-date-picker {
+  margin: 0 12px 8px 0;
+}
+```

demo/documentation/components/datePicker/zhCN/index.md

@@ -11,6 +11,7 @@ disabled
 disabledTime
 actions
 events
+format
 ```
 ## V-model
 |Prop|Event|
@@ -33,6 +34,7 @@ events
 |-|-|-|-|
 |placeholder|`string`|`'Select Date'`||
 |is-date-disabled|`(current: number) => boolean`|`() => false`||
+|format|`string`|`'yyyy-MM-dd'`||
 
 ### DateTime 类型的 Props
 |名称|类型|默认值|说明|
@@ -40,6 +42,7 @@ events
 |placeholder|`string`|`'Select Date and Time'`||
 |is-date-disabled|`(current: number) => boolean`|`() => false`||
 |is-time-disabled|`(current: number) => { isHourDisabled: boolean, isMinuteDisabled: boolean, isSecondDisabled: boolean }`|`() => ({ isHourDisabled: () => false, isMinuteDisabled: () => false, isSecondDisabled: () => false }})`||
+|format|`string`|`'yyyy-MM-dd HH:mm:ss'`||
 
 ### DateRange 类型的 Props
 |名称|类型|默认值|说明|
@@ -49,6 +52,7 @@ events
 |end-placeholder|`string`|`End Date'`||
 |is-date-disabled|`(current: number) => boolean`|`() => false`||
 |is-time-disabled|`(current: number) => { isHourDisabled: boolean, isMinuteDisabled: boolean, isSecondDisabled: boolean }`|`() => ({ isHourDisabled: () => false, isMinuteDisabled: () => false, isSecondDisabled: () => false }})`||
+|format|`string`|`'yyyy-MM-dd'`||
 
 
 ### DateTimeRange 类型的 Props
@@ -59,6 +63,7 @@ events
 |end-placeholder|`string`|`'End Date and Time'`||
 |is-date-disabled|`(current: number) => boolean`|`() => false`||
 |is-time-disabled|`(current: number) => { isHourDisabled: boolean, isMinuteDisabled: boolean, isSecondDisabled: boolean }`|`() => ({ isHourDisabled: () => false, isMinuteDisabled: () => false, isSecondDisabled: () => false }})`||
+|format|`string`|`'yyyy-MM-dd HH:mm:ss'`||
 
 ## Events
 ### Date, DateTime 类型的 Events

src/DatePicker/src/DatePicker.vue

@@ -158,12 +158,6 @@ const DATE_FORMAT = {
   daterange: 'yyyy-MM-dd',
   datetimerange: 'yyyy-MM-dd HH:mm:ss'
 }
-const DATE_VALIDATE_FORMAT = {
-  date: ['yyyy-MM-dd', 'yyyy-MM-D', 'yyyy-M-D', 'yyyy-M-dd'],
-  datetime: ['yyyy-MM-dd HH:mm:ss', 'yyyy-MM-D HH:mm:ss', 'yyyy-M-D HH:mm:ss', 'yyyy-M-dd HH:mm:ss'],
-  daterange: ['yyyy-MM-dd', 'yyyy-MM-D', 'yyyy-M-D', 'yyyy-M-dd'],
-  datetimerange: ['yyyy-MM-dd HH:mm:ss', 'yyyy-MM-D HH:mm:ss', 'yyyy-M-D HH:mm:ss', 'yyyy-M-dd HH:mm:ss']
-}
 
 export default {
   name: 'NDatePicker',
@@ -311,11 +305,8 @@ export default {
         return this.endPlaceholder
       }
     },
-    computedValidateFormat () {
-      return DATE_VALIDATE_FORMAT[this.type]
-    },
     computedFormat () {
-      return DATE_FORMAT[this.type]
+      return this.format || DATE_FORMAT[this.type]
     }
   },
   watch: {

src/Tabs/src/Tabs.vue

@@ -95,6 +95,8 @@ import themeable from '../../_mixins/themeable'
 import iosArrowBack from '../../_icons/ios-arrow-back'
 import iosArrowForward from '../../_icons/ios-arrow-forward'
 import mdClose from '../../_icons/md-close'
+import resizeObserverDelegate from '../../_utils/delegate/resizeObserverDelegate'
+import throttle from 'lodash-es/throttle'
 
 export default {
   name: 'NTabs',
@@ -166,19 +168,16 @@ export default {
   watch: {
     showScrollButton (value) {
       this.$emit('scrollable-change', value)
+    },
+    justifyContent (value) {
+      if (this.justifyContent === 'space-around' || this.justifyContent === 'space-evenly') {
+        this.registerResizeObserver()
+      } else {
+        resizeObserverDelegate.unregisterHandler(this.$refs.tab)
+      }
     }
   },
   mounted () {
-    function updateBarPosition () {
-      let index = 0
-      for (const panel of this.panels) {
-        if (panel.name === this.value) {
-          this.updateBarPosition(this.$refs[`label(${index})`][0])
-          break
-        }
-        index++
-      }
-    }
     this.updateScrollStatus()
     this
       .$nextTick()
@@ -188,16 +187,11 @@ export default {
       })
       .then(() => {
         this.updateScrollStatus()
-        updateBarPosition.bind(this)()
+        this.updateCurrentBarPosition()
       })
-    this.resizeObserver = new ResizeObserver(() => {
-      this.transitionDisabled = true
-      updateBarPosition.bind(this)()
-      this.$nextTick().then(() => {
-        this.transitionDisabled = false
-      })
-    })
-    this.resizeObserver.observe(this.$refs.tab)
+    if (this.justifyContent === 'space-around' || this.justifyContent === 'space-evenly') {
+      this.registerResizeObserver()
+    }
   },
   updated () {
     this
@@ -207,7 +201,7 @@ export default {
       })
   },
   beforeDestroy () {
-    this.resizeObserver.disconnect()
+    resizeObserverDelegate.unregisterHandler(this.$refs.tab)
   },
   methods: {
     scroll (direction) {
@@ -265,6 +259,16 @@ export default {
         }
       }
     },
+    updateCurrentBarPosition () {
+      let index = 0
+      for (const panel of this.panels) {
+        if (panel.name === this.value) {
+          this.updateBarPosition(this.$refs[`label(${index})`][0])
+          break
+        }
+        index++
+      }
+    },
     handleTabClick (e, panelName, disabled) {
       if (!disabled) {
         this.setPanelActive(panelName)
@@ -279,6 +283,15 @@ export default {
     },
     handleCloseMarkClick (panel) {
       this.$emit('close', panel.name)
+    },
+    registerResizeObserver () {
+      resizeObserverDelegate.registerHandler(this.$refs.tab, throttle(() => {
+        this.transitionDisabled = true
+        this.updateCurrentBarPosition()
+        this.$nextTick().then(() => {
+          this.transitionDisabled = false
+        })
+      }, 40))
     }
   }
 }

src/_utils/delegate/resizeObserverDelegate.js

@@ -21,6 +21,9 @@ class ResizeObserverDelegate {
     this.observer.observe(el)
   }
   unregisterHandler (el) {
+    if (!this.elHandlersMap.has(el)) {
+      return
+    }
     this.elHandlersMap.delete(el)
     this.observer.unobserve(el)
   }