Confirm
@@ -205,15 +125,15 @@ import NIcon from '../../../Icon'
import clickoutside from '../../../../directives/clickoutside'
import NButton from '../../../Button'
+import NTimePicker from '../../../TimePicker'
+import NInput from '../../../Input'
+
+const DATETIME_FORMAT = 'YYYY-MM-DD HH:mm:ss'
+const DATE_FORMAT = 'YYYY-MM-DD'
+const DATE_VALIDATE_FORMAT = ['YYYY-MM-DD', 'YYYY-MM-D', 'YYYY-M-D', 'YYYY-M-DD']
+
+const PLACEHOLDER = 'Select date and time'
-const DATE_FORMAT = {
- date: 'YYYY-MM-DD',
- datetime: 'YYYY-MM-DD HH:mm:ss'
-}
-const PLACEHOLDER = {
- date: 'Select date',
- datetime: 'Select date and time'
-}
const TIME_CONST = {
weekdays: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
hours: ['00', '01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23'],
@@ -224,74 +144,65 @@ const TIME_CONST = {
export default {
components: {
NButton,
- NIcon
+ NIcon,
+ NTimePicker,
+ NInput
},
directives: {
clickoutside
},
- model: {
- prop: 'value',
- event: 'change'
- },
props: {
active: {
type: Boolean,
default: true
},
value: {
- type: [Number, String],
+ type: Number,
required: false,
default: null
},
debug: {
type: Boolean,
default: false
+ },
+ placeholder: {
+ type: String,
+ default: PLACEHOLDER
+ },
+ format: {
+ type: String,
+ default: DATETIME_FORMAT
}
},
data () {
return {
- displayDateTimeString: '',
displayDateString: '',
- displayTimeString: '',
- rightDisplayDateTimeString: '',
- rightDisplayDateString: '',
- rightDisplayTimeString: '',
calendarDateTime: moment(),
- rightCalendarDateTime: moment(),
currentDateTime: moment(),
- showTimeSelector: false,
- showRightTimeSelector: false,
calendar: [],
- rightCalendar: [],
...TIME_CONST
}
},
computed: {
- placeholder () {
- return PLACEHOLDER[this.type]
- },
- format () {
- return DATE_FORMAT[this.type]
- },
computedHour () {
- if (this.computedSelectedDateTime) return this.computedSelectedDateTime.format('HH')
+ if (this.valueAsMoment) return this.valueAsMoment.format('HH')
else return null
},
computedMinute () {
- if (this.computedSelectedDateTime) return this.computedSelectedDateTime.format('mm')
+ if (this.valueAsMoment) return this.valueAsMoment.format('mm')
else return null
},
computedSecond () {
- if (this.computedSelectedDateTime) return this.computedSelectedDateTime.format('ss')
+ if (this.valueAsMoment) return this.valueAsMoment.format('ss')
else return null
},
/**
* If value is valid return null.
* If value is not valid, return moment(value)
*/
- computedSelectedDateTime () {
+ valueAsMoment () {
if (this.value === null || this.value === undefined) return null
- const newSelectedDateTime = moment(Number(this.value))
+ const newSelectedDateTime = moment(this.value)
if (newSelectedDateTime.isValid()) {
return newSelectedDateTime
} else {
@@ -299,170 +210,113 @@ export default {
}
}
},
+ watch: {
+ valueAsMoment (newValue) {
+ if (newValue !== null) {
+ this.displayDateString = newValue.format(DATE_FORMAT)
+ } else {
+ this.displayDateString = ''
+ }
+ }
+ },
+ created () {
+ if (this.valueAsMoment !== null) {
+ this.displayDateString = this.valueAsMoment.format(DATE_FORMAT)
+ } else {
+ this.displayDateString = ''
+ }
+ },
methods: {
+ dateArray,
handleClickOutside () {
this.closeCalendar()
- console.log('clickoutside')
},
- dateArray,
- /**
- * If new datetime is null or undefined, emit null to value.
- * Else adjust new datetime by props.type and emit it to value.
- */
setValue (newSelectedDateTime) {
if (newSelectedDateTime === null || newSelectedDateTime === undefined) {
- this.$emit('change', null)
- return
- }
- if (newSelectedDateTime.isValid()) {
- const adjustedDateTime = this.adjustDateTime(newSelectedDateTime)
- if (this.computedSelectedDateTime === null || adjustedDateTime.valueOf() !== this.computedSelectedDateTime.valueOf()) {
- this.refreshSelectedDateTimeString(adjustedDateTime)
- this.$emit('change', adjustedDateTime.valueOf(), adjustedDateTime.format(this.format))
+ this.$emit('input', null)
+ } else if (newSelectedDateTime.isValid()) {
+ const adjustedDateTime = this.adjustValue(newSelectedDateTime)
+ if (this.valueAsMoment === null || adjustedDateTime.valueOf() !== this.valueAsMoment.valueOf()) {
+ this.refreshDisplayDateString(adjustedDateTime)
+ this.$emit('input', adjustedDateTime.valueOf())
}
}
- // this.$nextTick(this.refreshSelectedDateTimeString)
},
- adjustDateTime (datetime) {
+ adjustValue (datetime) {
return moment(datetime).startOf('second')
},
- justifySelectedDateTimeAfterChangeTimeString () {
- if (this.computedSelectedDateTime === null) {
- // case here is impossible for now, because you can't clear time for now
+ handleDateInput (value) {
+ const date = moment(value, DATE_FORMAT, true)
+ if (date.isValid()) {
+ if (!this.valueAsMoment) {
+ const newValue = moment()
+ newValue.year(date.year())
+ newValue.month(date.month())
+ newValue.date(date.date())
+ this.$emit('input', this.adjustValue(newValue).valueOf())
+ } else {
+ const newValue = this.valueAsMoment
+ newValue.year(date.year())
+ newValue.month(date.month())
+ newValue.date(date.date())
+ this.$emit('input', this.adjustValue(newValue).valueOf())
+ }
} else {
- const newDisplayDateTimeString = this.displayDateString + ' ' + this.displayTimeString
- const newSelectedDateTime = moment(newDisplayDateTimeString, this.format, true)
- this.setValue(newSelectedDateTime)
+ // do nothing
}
},
- handleTimeInput (e) {
- const newDisplayDateTimeString = this.displayDateString + ' ' + e.target.value
- const newSelectedDateTime = moment(newDisplayDateTimeString, this.format, true)
- this.setValue(newSelectedDateTime)
- },
- handleDateInput (e) {
- const newDisplayDateTimeString = e.target.value + ' ' + this.displayTimeString
- const newSelectedDateTime = moment(newDisplayDateTimeString, this.format, true)
- this.setValue(newSelectedDateTime)
- },
- handleTimeInputBlur () {
- this.refreshSelectedDateTimeString()
- },
handleDateInputBlur () {
- this.refreshSelectedDateTimeString()
- },
- handleTimeConfirmClick () {
- this.justifySelectedDateTimeAfterChangeTimeString()
- this.refreshSelectedDateTimeString()
- this.closeTimeSelector()
- },
- handleTimeCancelClick () {
- this.closeTimeSelector()
- },
- setHour (hour) {
- try {
- const timeArray = this.displayTimeString.split(':')
- timeArray[0] = hour
- this.displayTimeString = timeArray.join(':')
- } catch (err) {
-
- } finally {
- this.justifySelectedDateTimeAfterChangeTimeString()
+ const date = moment(this.displayDateString, DATE_VALIDATE_FORMAT, true)
+ if (date.isValid()) {
+ if (!this.valueAsMoment) {
+ const newValue = moment()
+ newValue.year(date.year())
+ newValue.month(date.month())
+ newValue.date(date.date())
+ this.$emit('input', this.adjustValue(newValue).valueOf())
+ } else {
+ const newValue = this.valueAsMoment
+ newValue.year(date.year())
+ newValue.month(date.month())
+ newValue.date(date.date())
+ this.$emit('input', this.adjustValue(newValue).valueOf())
+ }
+ } else {
+ this.refreshDisplayDateString()
}
},
- setMinute (minute) {
- try {
- const timeArray = this.displayTimeString.split(':')
- timeArray[1] = minute
- this.displayTimeString = timeArray.join(':')
- } catch (err) {
-
- } finally {
- this.justifySelectedDateTimeAfterChangeTimeString()
- }
- },
- setSecond (second) {
- try {
- const timeArray = this.displayTimeString.split(':')
- timeArray[2] = second
- this.displayTimeString = timeArray.join(':')
- } catch (err) {
-
- } finally {
- this.justifySelectedDateTimeAfterChangeTimeString()
- }
- },
- openTimeSelector () {
- if (this.computedSelectedDateTime === null) {
- this.setValue(moment())
- }
- this.showTimeSelector = true
- },
- closeTimeSelector () {
- this.showTimeSelector = false
- },
clearSelectedDateTime () {
- this.setValue(null)
- this.displayDateTimeString = ''
+ this.$emit('input', null)
this.displayDateString = ''
- this.displayTimeString = ''
},
setSelectedDateTimeToNow () {
- this.setValue(moment())
+ this.$emit('input', this.adjustValue(moment()).valueOf())
this.calendarDateTime = moment()
},
handleDateClick (dateItem) {
let newSelectedDateTime = moment()
- if (this.computedSelectedDateTime !== null) {
- newSelectedDateTime = moment(this.computedSelectedDateTime)
+ if (this.valueAsMoment !== null) {
+ newSelectedDateTime = moment(this.valueAsMoment)
}
newSelectedDateTime = setDate(newSelectedDateTime, dateItem)
- this.setValue(newSelectedDateTime)
+ this.$emit('input', this.adjustValue(newSelectedDateTime).valueOf())
},
/**
* If not selected, display nothing,
* else update datetime related string
*/
- refreshSelectedDateTimeString (time) {
- if (this.computedSelectedDateTime === null) {
- this.displayDateTimeString = ''
+ refreshDisplayDateString (time) {
+ if (this.valueAsMoment === null) {
+ this.displayDateString = ''
return
}
if (time === undefined) {
- time = this.computedSelectedDateTime
+ time = this.valueAsMoment
}
- this.displayDateTimeString = time.format(this.format)
- this.displayDateString = time.format('YYYY-MM-DD')
- this.displayTimeString = time.format('HH:mm:ss')
+ this.displayDateString = time.format(DATE_FORMAT)
},
- /**
- * If new time is invalid, do nothing.
- * If valid, update.
- */
- handleDateTimeInputEnter () {
- const newSelectedDateTime = moment(this.displayDateTimeString, this.format, true)
- this.setValue(newSelectedDateTime)
- },
- /**
- * If new SelectedDateTime is valid, update `selectedDateTime` and `calendarTime`
- * Whatever happened, refresh selectedDateTime
- */
- handleDateTimeInputBlur () {
- const newSelectedDateTime = moment(this.displayDateTimeString, this.format, true)
- this.setValue(newSelectedDateTime)
- /**
- * If newSelectedDateTime is invalid, display string need to be restored
- */
- this.refreshSelectedDateTimeString()
- },
- handleDateInputAndTimeInputConfirmClick () {
- const newDisplayDateTimeString = `${this.displayDateString.trim()} ${this.displayTimeString.trim()}`
- const newSelectedDateTime = moment(newDisplayDateTimeString, this.format, true)
- if (this.computedSelectedDateTime === null) {
- this.setValue(moment())
- } else {
- this.setValue(newSelectedDateTime)
- }
+ handleConfirmClick () {
+ this.$emit('confirm')
this.closeCalendar()
},
closeCalendar () {
@@ -485,6 +339,9 @@ export default {
prevMonth () {
this.calendarDateTime.subtract(1, 'month')
this.$forceUpdate()
+ },
+ handleTimePickerInput (value) {
+ this.$emit('input', value)
}
}
}
diff --git a/packages/common/Modal/src/ModalContent.vue b/packages/common/Modal/src/ModalContent.vue
index 41bf9fa11..a4289bfd7 100644
--- a/packages/common/Modal/src/ModalContent.vue
+++ b/packages/common/Modal/src/ModalContent.vue
@@ -23,6 +23,11 @@ export default {
diff --git a/demo/components/datePickerDemo/Wrapper.vue b/demo/components/datePickerDemo/Wrapper.vue
new file mode 100644
index 000000000..974991115
--- /dev/null
+++ b/demo/components/datePickerDemo/Wrapper.vue
@@ -0,0 +1,10 @@
+
+
diff --git a/demo/components/datePickerDemo/disabled.demo.vue b/demo/components/datePickerDemo/disabled.demo.vue
index a6f48f14e..a4db66362 100644
--- a/demo/components/datePickerDemo/disabled.demo.vue
+++ b/demo/components/datePickerDemo/disabled.demo.vue
@@ -21,6 +21,7 @@
:disabled="disabled"
@change="onDateChange"
/>
+
+
+
diff --git a/demo/demo.vue b/demo/demo.vue
index a96d05a77..ee7f63ca9 100644
--- a/demo/demo.vue
+++ b/demo/demo.vue
@@ -50,7 +50,6 @@ export default {
},
{
name: 'Common',
- path: '/',
childItems: [
{
name: 'AdvanceTable',
@@ -133,6 +132,15 @@ export default {
path: '/n-tooltip'
}
]
+ },
+ {
+ name: 'Debug',
+ childItems: [
+ {
+ name: 'Popover',
+ path: '/n-popover-debug'
+ }
+ ]
}
]
}
diff --git a/demo/index.js b/demo/index.js
index 11b5e846d..d92770e7c 100644
--- a/demo/index.js
+++ b/demo/index.js
@@ -34,6 +34,8 @@ import paginationDemo from './components/paginationDemo'
import startPage from './components/startPage'
import demo from './demo'
+import popoverDebug from './debugComponents/popoverDebug'
+
Vue.use(NaiveUI)
Vue.use(VueRouter)
@@ -44,6 +46,10 @@ const routes = [
path: '/home-demo',
component: homeDemo
},
+ {
+ path: '/n-popover-debug',
+ component: popoverDebug
+ },
{
path: '/start',
component: demo,
diff --git a/packages/mixins/placeable.js b/packages/mixins/placeable.js
index cbda12fe2..533c3ceab 100644
--- a/packages/mixins/placeable.js
+++ b/packages/mixins/placeable.js
@@ -87,19 +87,14 @@ export default {
resizeDelegate.registerHandler(this.updatePosition)
},
registerScrollListeners () {
- let currentElement = this.$el
+ let currentElement = getParentNode(this.$el)
while (true) {
- console.log('currentElement', currentElement)
currentElement = getScrollParent(currentElement)
- if (currentElement === document.body || currentElement.nodeName === 'HTML') {
- break
- }
+ if (currentElement === null) break
this.scrollListeners.push([currentElement, this.updatePosition])
currentElement = getParentNode(currentElement)
}
- this.scrollListeners.push([document, this.updatePosition])
- this.scrollListeners.push([document.body, this.updatePosition])
- console.log(this.scrollListeners)
+ // console.log(this.scrollListeners)
for (const [el, handler] of this.scrollListeners) {
scrollDelegate.registerHandler(el, handler)
}
diff --git a/packages/utils/dom/getParentNode.js b/packages/utils/dom/getParentNode.js
index d2872f7f2..6bd21c01c 100644
--- a/packages/utils/dom/getParentNode.js
+++ b/packages/utils/dom/getParentNode.js
@@ -1,11 +1,11 @@
/**
- * Returns the parentNode or the host of the element
+ * Returns the parentNode or the host of the element until document
* @method
* @param {Element} element
* @returns {Element} parent
*/
export default function getParentNode (element) {
- if (element.nodeName === 'HTML') {
+ if (element.nodeName === '#document') {
return element
}
return element.parentNode || element.host
diff --git a/packages/utils/dom/getScrollParent.js b/packages/utils/dom/getScrollParent.js
index ad0f4146f..feec6f500 100644
--- a/packages/utils/dom/getScrollParent.js
+++ b/packages/utils/dom/getScrollParent.js
@@ -5,20 +5,20 @@ import getParentNode from './getParentNode'
* Returns the scrolling parent of the given element
* @method
* @param {Element} element
- * @returns {Element} scroll parent
+ * @returns {Element|null} scroll parent
*/
export default function getScrollParent (element) {
// Return body, `getScroll` will take care to get the correct `scrollTop` from it
if (!element) {
- return document.body
+ return null
}
switch (element.nodeName) {
case 'HTML':
case 'BODY':
- return element.ownerDocument.body
+ return document
case '#document':
- return element.body
+ return null
}
// Firefox want us to check `-x` and `-y` variations as well
From 52596b5b67a623dabd04b8b32aaa23bdc8a208d9 Mon Sep 17 00:00:00 2001
From: 07akioni <07akioni2@gmail.com>
Date: Thu, 25 Jul 2019 10:10:56 +0800
Subject: [PATCH 14/16] release: 0.2.32
---
demo/components/datePickerDemo/Oops.vue | 15 ---------------
demo/components/datePickerDemo/Wrapper.vue | 10 ----------
demo/components/datePickerDemo/disabled.demo.vue | 7 -------
package.json | 2 +-
4 files changed, 1 insertion(+), 33 deletions(-)
delete mode 100644 demo/components/datePickerDemo/Oops.vue
delete mode 100644 demo/components/datePickerDemo/Wrapper.vue
diff --git a/demo/components/datePickerDemo/Oops.vue b/demo/components/datePickerDemo/Oops.vue
deleted file mode 100644
index c0eb2afd4..000000000
--- a/demo/components/datePickerDemo/Oops.vue
+++ /dev/null
@@ -1,15 +0,0 @@
-
- {{ content }}
-
-
-
-
-
diff --git a/demo/components/datePickerDemo/Wrapper.vue b/demo/components/datePickerDemo/Wrapper.vue
deleted file mode 100644
index 974991115..000000000
--- a/demo/components/datePickerDemo/Wrapper.vue
+++ /dev/null
@@ -1,10 +0,0 @@
-
-
diff --git a/demo/components/datePickerDemo/disabled.demo.vue b/demo/components/datePickerDemo/disabled.demo.vue
index a4db66362..a6f48f14e 100644
--- a/demo/components/datePickerDemo/disabled.demo.vue
+++ b/demo/components/datePickerDemo/disabled.demo.vue
@@ -21,7 +21,6 @@
:disabled="disabled"
@change="onDateChange"
/>
-
diff --git a/demo/demo.vue b/demo/demo.vue
index 8c6668b6b..18a121569 100644
--- a/demo/demo.vue
+++ b/demo/demo.vue
@@ -141,8 +141,12 @@ export default {
name: 'Debug',
childItems: [
{
- name: 'Popover',
+ name: 'PopoverDebug',
path: '/n-popover-debug'
+ },
+ {
+ name: 'RouterDebug',
+ path: '/n-router-debug'
}
]
}
diff --git a/demo/index.js b/demo/index.js
index 34be8e43d..042ca2e5f 100644
--- a/demo/index.js
+++ b/demo/index.js
@@ -36,6 +36,7 @@ import startPage from './components/startPage'
import demo from './demo'
import popoverDebug from './debugComponents/popoverDebug'
+import routerDebug from './debugComponents/routerDebug'
Vue.use(NaiveUI)
Vue.use(VueRouter)
@@ -81,7 +82,8 @@ const routes = [
{ path: '/n-nimbus-icon', component: nimbusIconDemo },
{ path: '/n-radio', component: radioDemo },
{ path: '/n-form', component: formDemo },
- { path: '/n-time-picker', component: timePickerDemo }
+ { path: '/n-time-picker', component: timePickerDemo },
+ { path: '/n-router-debug', component: routerDebug }
]
},
{
diff --git a/packages/nimbus/ServiceLayout/src/main.vue b/packages/nimbus/ServiceLayout/src/main.vue
index 5d75562b7..d21c407e8 100644
--- a/packages/nimbus/ServiceLayout/src/main.vue
+++ b/packages/nimbus/ServiceLayout/src/main.vue
@@ -104,10 +104,6 @@ export default {
paddingBody: {
type: Boolean,
default: true
- },
- value: {
- type: String,
- default: ''
}
},
data () {
@@ -121,31 +117,31 @@ export default {
}
},
watch: {
- value () {
- this.activeItemName = this.value
+ $route (to, from) {
+ this.syncActiveItemWithPath(to.path)
}
},
mounted () {
- this.activeItemName = this.value
const path = this.$route.path
- for (const item of this.items) {
- if (item.path === path) {
- this.activeItemName = item.name
- this.$emit('input', item.name)
- return
- }
- if (item.childItems) {
- for (const childItem of item.childItems) {
- if (childItem.path === path) {
- this.activeItemName = childItem.name
- this.$emit('input', item.name)
- return
+ this.syncActiveItemWithPath(path)
+ },
+ methods: {
+ syncActiveItemWithPath (path) {
+ for (const item of this.items) {
+ if (item.path === path) {
+ this.activeItemName = item.name
+ return
+ }
+ if (item.childItems) {
+ for (const childItem of item.childItems) {
+ if (childItem.path === path) {
+ this.activeItemName = childItem.name
+ return
+ }
}
}
}
- }
- },
- methods: {
+ },
toggle () {
this.isCollapsed = !this.isCollapsed
},
diff --git a/styles/NimbusServiceLayout.scss b/styles/NimbusServiceLayout.scss
index ee5e9eb73..807c93e66 100644
--- a/styles/NimbusServiceLayout.scss
+++ b/styles/NimbusServiceLayout.scss
@@ -123,8 +123,13 @@
transition: opacity 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
opacity: 1;
}
- &.n-nimbus-service-layout-drawer__item--active span{
- opacity: 1;
+ &.n-nimbus-service-layout-drawer__item--active {
+ &:not(.n-nimbus-service-layout-drawer__item--is-group-item) {
+ color: #63E2B7;
+ }
+ span {
+ opacity: 1;
+ }
}
&:hover span {
opacity: 1;
From f49997ef87586a7a88ef0ecbe100f42f067facf4 Mon Sep 17 00:00:00 2001
From: 07akioni <07akioni2@gmail.com>
Date: Thu, 25 Jul 2019 10:49:05 +0800
Subject: [PATCH 16/16] release: 0.2.33
---
package.json | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/package.json b/package.json
index 2a422e415..c860a52fc 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "naive-ui",
- "version": "0.2.32",
+ "version": "0.2.33",
"description": "",
"main": "index.js",
"scripts": {