mirror of
https://github.com/tusen-ai/naive-ui.git
synced 2025-03-01 13:36:55 +08:00
Merge branch 'develop' of ***REMOVED*** into feature/advancedTable
This commit is contained in:
JiwenBai
commit
30e1d1fc16
3
.gitignore
vendored
3
.gitignore
vendored
@ -3,4 +3,5 @@ dist
|
||||
docDist
|
||||
doc/dist
|
||||
test/unit/coverage
|
||||
package-lock.json
|
||||
package-lock.json
|
||||
*.swp
|
||||
@ -14,10 +14,66 @@
|
||||
Basic Usage
|
||||
</div>
|
||||
<div class="n-doc-section__view">
|
||||
<n-date-picker v-model="timestamp" />timestamp: {{ timestamp }}
|
||||
<n-input
|
||||
v-model="dateTimeTimestamp"
|
||||
placeholder="dateTimeTimestamp"
|
||||
type="text"
|
||||
/>
|
||||
<div style="width: 100%;">
|
||||
dateTimeTimestamp: {{ dateTimeTimestamp }}
|
||||
</div>
|
||||
<n-with-padding :padding-top="12" />
|
||||
<n-input
|
||||
v-model="dateTimestamp"
|
||||
placeholder="dateTimestamp"
|
||||
type="text"
|
||||
/>
|
||||
<div style="width: 100%;">
|
||||
dateTimeStamp: {{ dateTimestamp }}
|
||||
</div>
|
||||
<n-with-padding :padding-top="12" />
|
||||
<n-date-picker
|
||||
v-model="dateTimeTimestamp"
|
||||
type="datetime"
|
||||
@change="onDateTimeChange"
|
||||
/>
|
||||
<n-with-padding :padding-top="12" />
|
||||
<n-date-picker
|
||||
v-model="dateTimestamp"
|
||||
type="date"
|
||||
@change="onDateChange"
|
||||
/>
|
||||
</div>
|
||||
<div class="n-doc-section__source">
|
||||
<textarea>scaffold</textarea>
|
||||
<textarea><n-date-picker
|
||||
v-model="dateTimeTimestamp"
|
||||
type="datetime"
|
||||
@change="onDateTimeChange"
|
||||
/>
|
||||
<n-date-picker
|
||||
v-model="dateTimestamp"
|
||||
type="date"
|
||||
@change="onDateChange"
|
||||
/>
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
dateTimeTimestamp: 666666666,
|
||||
dateTimestamp: null
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onDateTimeChange (timestamp, dateTimeString) {
|
||||
this.$NMessage.success(`${timestamp}, ${dateTimeString}`)
|
||||
},
|
||||
onDateChange (timestamp, dateString) {
|
||||
this.$NMessage.success(`${timestamp}, ${dateString}`)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</textarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -30,10 +86,17 @@ export default {
|
||||
mixins: [docCodeEditorMixin],
|
||||
data () {
|
||||
return {
|
||||
timestamp: 0
|
||||
dateTimeTimestamp: 666666666,
|
||||
dateTimestamp: null
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onDateTimeChange (timestamp, dateTimeString) {
|
||||
this.$NMessage.success(`${timestamp}, ${dateTimeString}`)
|
||||
},
|
||||
onDateChange (timestamp, dateString) {
|
||||
this.$NMessage.success(`${timestamp}, ${dateString}`)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -100,6 +100,7 @@ export default {
|
||||
@focus="handleFocus"
|
||||
@change="handleChange"
|
||||
@keyup="handleKeyUp"
|
||||
@input="handleInput"
|
||||
/>
|
||||
<br>
|
||||
value: {{ value }}
|
||||
@ -121,6 +122,23 @@ export default {
|
||||
return {
|
||||
value: null
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleFocus () {
|
||||
this.$NMessage.success('focus')
|
||||
},
|
||||
handleBlur () {
|
||||
this.$NMessage.success('blur')
|
||||
},
|
||||
handleInput (value) {
|
||||
this.$NMessage.success('input: ' + value)
|
||||
},
|
||||
handleChange (value) {
|
||||
this.$NMessage.success('change: ' + value)
|
||||
},
|
||||
handleKeyUp (e) {
|
||||
this.$NMessage.success('keyup')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script></textarea>
|
||||
@ -353,6 +371,9 @@ export default {
|
||||
handleBlur () {
|
||||
this.$NMessage.success('blur')
|
||||
},
|
||||
handleInput (value) {
|
||||
this.$NMessage.success('input: ' + value)
|
||||
},
|
||||
handleChange (value) {
|
||||
this.$NMessage.success('change: ' + value)
|
||||
},
|
||||
|
||||
@ -15,6 +15,7 @@
|
||||
</div>
|
||||
<div class="n-doc-section__view">
|
||||
<n-nimbus-service-layout
|
||||
v-model="currentFileld"
|
||||
icon="md-musical-notes"
|
||||
name="Oasis"
|
||||
:items="[
|
||||
@ -64,6 +65,7 @@
|
||||
<textarea><n-nimbus-service-layout
|
||||
icon="md-musical-notes"
|
||||
name="Oasis"
|
||||
v-model="'Hello'"
|
||||
:items="[
|
||||
{
|
||||
name: 'Definitely Maybe',
|
||||
@ -118,7 +120,7 @@ export default {
|
||||
mixins: [docCodeEditorMixin],
|
||||
data () {
|
||||
return {
|
||||
|
||||
currentFileld: 'Hello'
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
||||
165
demo/components/percentCircle.vue
Normal file
165
demo/components/percentCircle.vue
Normal file
@ -0,0 +1,165 @@
|
||||
<template>
|
||||
<div class="percent-circle">
|
||||
<svg
|
||||
:width="width"
|
||||
:height="height"
|
||||
>
|
||||
<circle
|
||||
:cx="width/2"
|
||||
:cy="width/2"
|
||||
:r="r+percentWidth"
|
||||
fill="#273C4C"
|
||||
/>
|
||||
<circle
|
||||
v-if="!usage"
|
||||
:cx="width/2"
|
||||
:cy="width/2"
|
||||
:r="r"
|
||||
fill="#1F263E"
|
||||
/>
|
||||
<circle
|
||||
v-if="usage"
|
||||
:cx="width/2"
|
||||
:cy="width/2"
|
||||
:r="r"
|
||||
fill="#29575B"
|
||||
/>
|
||||
<circle
|
||||
v-if="usage"
|
||||
:cx="width/2"
|
||||
:cy="width/2"
|
||||
:r="r-percentWidth"
|
||||
fill="#1F263E"
|
||||
/>
|
||||
<path
|
||||
:id="id+'request'"
|
||||
fill="none"
|
||||
stroke="#426783"
|
||||
/>
|
||||
<path
|
||||
:id="id+'usage'"
|
||||
fill="none"
|
||||
stroke="#51BF9A"
|
||||
/>
|
||||
<foreignObject
|
||||
:width="textWidth"
|
||||
:height="textWidth"
|
||||
:x="width/2-textWidth/2"
|
||||
:y="width/2-textWidth/2"
|
||||
>
|
||||
<slot name="text" />
|
||||
</foreignObject>
|
||||
</svg>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: 'PercentCircle',
|
||||
props: {
|
||||
request: {
|
||||
type: Number
|
||||
// default: 0
|
||||
},
|
||||
usage: {
|
||||
type: Number
|
||||
// default: 0
|
||||
},
|
||||
cx: {
|
||||
type: Number,
|
||||
default: 110
|
||||
},
|
||||
cy: {
|
||||
type: Number,
|
||||
default: 110
|
||||
},
|
||||
r: {
|
||||
type: Number,
|
||||
default: 76
|
||||
},
|
||||
percentWidth: {
|
||||
type: Number,
|
||||
default: 22
|
||||
},
|
||||
text: {
|
||||
type: String
|
||||
},
|
||||
id: {
|
||||
type: String
|
||||
}
|
||||
// width: {
|
||||
// type: Number,
|
||||
// default: 220
|
||||
// },
|
||||
// height: {
|
||||
// type: Number,
|
||||
// default: 220
|
||||
// }
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
width: (this.r + this.percentWidth) * 2,
|
||||
height: (this.r + this.percentWidth) * 2
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
textWidth () {
|
||||
return Math.floor(Math.sqrt((this.r - 22) * 2 * (this.r - 22) * 2 / 2))
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
request () {
|
||||
this.setPercent(this.request, this.usage, this.r, this.percentWidth, this.width, this.height)
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.setPercent(this.request, this.usage, this.r, this.percentWidth, this.width, this.height)
|
||||
},
|
||||
methods: {
|
||||
setPercent (request, usage, r, percentWidth, width, height) {
|
||||
var requestPath = document.getElementById(this.id + 'request')
|
||||
var usagePath = document.getElementById(this.id + 'usage')
|
||||
let cx = width / 2
|
||||
let cy = height / 2
|
||||
var requestr = r + percentWidth / 2
|
||||
var usager = r - percentWidth / 2
|
||||
// 将requestPath平移到我们需要的坐标位置
|
||||
requestPath.setAttribute('transform', 'translate(' + cx + ',' + cy + ')')
|
||||
requestPath.setAttribute('stroke-width', percentWidth + 'px')
|
||||
usagePath.setAttribute('transform', 'translate(' + cx + ',' + cy + ')')
|
||||
usagePath.setAttribute('stroke-width', percentWidth + 'px')
|
||||
|
||||
// 计算当前的进度对应的角度值
|
||||
var requestDegrees = request * 360
|
||||
var usageDegrees = usage * 360
|
||||
|
||||
// 计算当前角度对应的弧度值
|
||||
var requestRad = requestDegrees * (Math.PI / 180)
|
||||
var usageRad = usageDegrees * (Math.PI / 180)
|
||||
|
||||
console.log()
|
||||
|
||||
// 极坐标转换成直角坐标
|
||||
var requestx = (Math.sin(requestRad) * requestr).toFixed(2)
|
||||
var requesty = -(Math.cos(requestRad) * requestr).toFixed(2)
|
||||
var usagex = (Math.sin(usageRad) * usager).toFixed(2)
|
||||
var usagey = -(Math.cos(usageRad) * usager).toFixed(2)
|
||||
|
||||
// 大于180度时候画大角度弧，小于180度的画小角度弧，(deg > 180) ? 1 : 0
|
||||
var requestLenghty = window.Number(requestDegrees > 180)
|
||||
var usageLenghty = window.Number(usageDegrees > 180)
|
||||
|
||||
var requestdescriptions = ['M', 0, -requestr, 'A', requestr, requestr, 0, requestLenghty, 1, requestx, requesty]
|
||||
var usagedescriptions = ['M', 0, -usager, 'A', usager, usager, 0, usageLenghty, 1, usagex, usagey]
|
||||
|
||||
requestPath.setAttribute('d', requestdescriptions.join(' '))
|
||||
usagePath.setAttribute('d', usagedescriptions.join(' '))
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.percent-circle {
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
@ -2,7 +2,7 @@
|
||||
<div class="demo">
|
||||
<n-nimbus-service-layout
|
||||
icon="md-contacts"
|
||||
name="NAIVE UI (0.1.92)"
|
||||
name="NAIVE UI (0.1.96)"
|
||||
:padding-body="false"
|
||||
:items="items"
|
||||
>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "naive-ui",
|
||||
"version": "0.1.93",
|
||||
"version": "0.1.99",
|
||||
"description": "",
|
||||
"main": "index.js",
|
||||
"scripts": {
|
||||
|
||||
@ -1,101 +1,278 @@
|
||||
<template>
|
||||
<div>
|
||||
DatePicker<br>
|
||||
<div
|
||||
ref="datePicker"
|
||||
class="n-date-picker"
|
||||
:class="{
|
||||
[`n-date-picker--${size}-size`]: true
|
||||
}"
|
||||
@click="handleCalendarClick"
|
||||
>
|
||||
<input
|
||||
v-model="displayDateTimeString"
|
||||
placeholder="Please select date time"
|
||||
class="n-date-picker__input"
|
||||
:placeholder="placeholder"
|
||||
@click="openCalendar"
|
||||
@focus="openCalendar"
|
||||
@blur="handleDateTimeInputBlur"
|
||||
@keyup.enter="handleDateTimeInputEnter"
|
||||
>
|
||||
<input
|
||||
v-model="displayDateString"
|
||||
placeholder="Please select date"
|
||||
>
|
||||
<input
|
||||
v-model="displayTimeString"
|
||||
placeholder="Please select time"
|
||||
>
|
||||
<button @click="prevYear">
|
||||
prevYear
|
||||
</button>
|
||||
<button @click="prevMonth">
|
||||
prevMonth
|
||||
</button>
|
||||
<button @click="nextMonth">
|
||||
nextMonth
|
||||
</button>
|
||||
<button @click="nextYear">
|
||||
nextYear
|
||||
</button>
|
||||
<button @click="clear">
|
||||
clear
|
||||
</button>
|
||||
<button @click="handleDateInputAndTimeInputConfirmClick">
|
||||
confirm
|
||||
</button>
|
||||
<button @click="setSelectedDateTimeToNow">
|
||||
now
|
||||
</button>
|
||||
<br>
|
||||
<div>year {{ calendarTime.year() }}, month {{ calendarTime.month() + 1 }}</div>
|
||||
<div
|
||||
v-if="true"
|
||||
style="display: flex; width: 280px; flex-wrap: wrap;"
|
||||
>
|
||||
<div class="date n-date-picker-calendar__date--day">
|
||||
Sun
|
||||
</div>
|
||||
<div class="date n-date-picker-calendar__date--day">
|
||||
Mon
|
||||
</div>
|
||||
<div class="date n-date-picker-calendar__date--day">
|
||||
Tue
|
||||
</div>
|
||||
<div class="date n-date-picker-calendar__date--day">
|
||||
Wed
|
||||
</div>
|
||||
<div class="date n-date-picker-calendar__date--day">
|
||||
Thu
|
||||
</div>
|
||||
<div class="date n-date-picker-calendar__date--day">
|
||||
Fri
|
||||
</div>
|
||||
<div class="date n-date-picker-calendar__date--day">
|
||||
Sat
|
||||
</div>
|
||||
<div
|
||||
v-for="dateItem in dateArray(calendarTime, selectedDateTime, currentTime)"
|
||||
:key="dateItem.timestamp"
|
||||
class="date"
|
||||
:class="{
|
||||
'n-date-picker-calendar__date--current': dateItem.isCurrentDate,
|
||||
'n-date-picker-calendar__date--selected': dateItem.isSelectedDate,
|
||||
'n-date-picker-calendar__date--in-display-month': dateItem.isDateOfDisplayMonth
|
||||
}"
|
||||
@click="handleDateClick(dateItem)"
|
||||
>
|
||||
{{ dateItem.date }}
|
||||
</div>
|
||||
<div class="n-date-picker__icon">
|
||||
<n-icon
|
||||
size="20"
|
||||
type="ios-calendar"
|
||||
/>
|
||||
</div>
|
||||
<transition name="n-date-picker-calendar--transition">
|
||||
<div
|
||||
v-if="showCalendar || debug"
|
||||
class="n-date-picker-calendar"
|
||||
>
|
||||
<div
|
||||
v-if="type==='datetime'"
|
||||
class="n-date-picker-calendar__date-time-input-wrapper"
|
||||
>
|
||||
<input
|
||||
v-model="displayDateString"
|
||||
class="n-date-picker-calendar__date-input"
|
||||
placeholder="Select date"
|
||||
@blur="handleDateInputBlur"
|
||||
@input="handleDateInput"
|
||||
>
|
||||
<div
|
||||
ref="timeSelector"
|
||||
class="n-date-picker-calendar__time-input-wrapper"
|
||||
>
|
||||
<input
|
||||
v-model="displayTimeString"
|
||||
class="n-date-picker-calendar__time-input"
|
||||
placeholder="Select time"
|
||||
@click="openTimeSelector"
|
||||
@input="handleTimeInput"
|
||||
@blur="handleTimeInputBlur"
|
||||
>
|
||||
<transition name="n-date-picker-time-selector--transition">
|
||||
<div
|
||||
v-if="showTimeSelector"
|
||||
class="n-date-picker-time-selector"
|
||||
>
|
||||
<div class="n-date-picker-time-selector__selection-wrapper">
|
||||
<div class="n-date-picker-time-selector__hour">
|
||||
<div
|
||||
v-for="hour in hours"
|
||||
:key="hour"
|
||||
class="n-date-picker-time-selector__item"
|
||||
:class="{
|
||||
'n-date-picker-time-selector__item--active':
|
||||
hour === computedHour
|
||||
}"
|
||||
@click="setHour(hour)"
|
||||
>
|
||||
{{ hour }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="n-date-picker-time-selector__minute">
|
||||
<div
|
||||
v-for="minute in minutes"
|
||||
:key="minute"
|
||||
class="n-date-picker-time-selector__item"
|
||||
:class="{
|
||||
'n-date-picker-time-selector__item--active':
|
||||
minute === computedMinute
|
||||
}"
|
||||
@click="setMinute(minute)"
|
||||
>
|
||||
{{ minute }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="n-date-picker-time-selector__hour">
|
||||
<div
|
||||
v-for="second in seconds"
|
||||
:key="second"
|
||||
class="n-date-picker-time-selector__item"
|
||||
:class="{
|
||||
'n-date-picker-time-selector__item--active':
|
||||
second === computedSecond
|
||||
}"
|
||||
@click="setSecond(second)"
|
||||
>
|
||||
{{ second }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="n-date-picker-time-selector__actions">
|
||||
<n-button
|
||||
size="tiny"
|
||||
round
|
||||
@click="handleTimeCancelClick"
|
||||
>
|
||||
Cancel
|
||||
</n-button>
|
||||
<n-button
|
||||
size="tiny"
|
||||
round
|
||||
auto-text-color
|
||||
type="primary"
|
||||
@click="handleTimeConfirmClick"
|
||||
>
|
||||
Confirm
|
||||
</n-button>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
v-else
|
||||
style="width: 100%; height: 12px;"
|
||||
/>
|
||||
<div class="n-date-picker-calendar__month-modifier">
|
||||
<div
|
||||
class="n-date-picker-calendar__fast-prev"
|
||||
@click="prevYear"
|
||||
>
|
||||
<n-icon
|
||||
type="ios-arrow-back"
|
||||
size="14"
|
||||
/>
|
||||
<n-icon
|
||||
type="ios-arrow-back"
|
||||
size="14"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="n-date-picker-calendar__prev"
|
||||
@click="prevMonth"
|
||||
>
|
||||
<n-icon
|
||||
type="ios-arrow-back"
|
||||
size="14"
|
||||
/>
|
||||
</div>
|
||||
<div class="n-date-picker-calendar__month-year">
|
||||
{{ calendarDateTime.format('MMMM') }} {{ calendarDateTime.year() }}
|
||||
</div>
|
||||
<div
|
||||
class="n-date-picker-calendar__next"
|
||||
@click="nextMonth"
|
||||
>
|
||||
<n-icon
|
||||
type="ios-arrow-forward"
|
||||
size="14"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="n-date-picker-calendar__fast-next"
|
||||
@click="nextYear"
|
||||
>
|
||||
<n-icon
|
||||
type="ios-arrow-forward"
|
||||
size="14"
|
||||
/>
|
||||
<n-icon
|
||||
type="ios-arrow-forward"
|
||||
size="14"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="n-date-picker-calendar__weekdays">
|
||||
<div
|
||||
v-for="weekday in weekdays"
|
||||
:key="weekday"
|
||||
class="n-date-picker-calendar__weekday"
|
||||
>
|
||||
{{ weekday }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="n-date-picker-calendar__divider" />
|
||||
<div class="n-date-picker-calendar__dates">
|
||||
<div
|
||||
v-for="dateItem in dateArray(calendarDateTime, computedSelectedDateTime, currentDateTime)"
|
||||
:key="dateItem.timestamp"
|
||||
class="n-date-picker-calendar__date"
|
||||
:class="{
|
||||
'n-date-picker-calendar__date--current': dateItem.isCurrentDate,
|
||||
'n-date-picker-calendar__date--selected': dateItem.isSelectedDate,
|
||||
'n-date-picker-calendar__date--in-display-month': dateItem.isDateOfDisplayMonth
|
||||
}"
|
||||
@click="handleDateClick(dateItem)"
|
||||
>
|
||||
{{ dateItem.date }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="n-date-picker-calendar__actions">
|
||||
<n-button
|
||||
size="tiny"
|
||||
round
|
||||
@click="setSelectedDateTimeToNow"
|
||||
>
|
||||
Now
|
||||
</n-button>
|
||||
<n-button
|
||||
size="tiny"
|
||||
round
|
||||
auto-text-color
|
||||
type="primary"
|
||||
@click="handleDateInputAndTimeInputConfirmClick"
|
||||
>
|
||||
Confirm
|
||||
</n-button>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import moment from 'moment'
|
||||
import { dateArray, setDate } from './utils'
|
||||
import NIcon from '../../Icon'
|
||||
import NButton from '../../Button'
|
||||
|
||||
const dateFormat = 'YYYY-MM-DD HH:mm:ss'
|
||||
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'],
|
||||
minutes: ['00', '01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24', '25', '26', '27', '28', '29', '30', '31', '32', '33', '34', '35', '36', '37', '38', '39', '40', '41', '42', '43', '44', '45', '46', '47', '48', '49', '50', '51', '52', '53', '54', '55', '56', '57', '58', '59'],
|
||||
seconds: ['00', '01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24', '25', '26', '27', '28', '29', '30', '31', '32', '33', '34', '35', '36', '37', '38', '39', '40', '41', '42', '43', '44', '45', '46', '47', '48', '49', '50', '51', '52', '53', '54', '55', '56', '57', '58', '59']
|
||||
}
|
||||
|
||||
export default {
|
||||
name: 'NDatePicker',
|
||||
components: {
|
||||
NIcon,
|
||||
NButton
|
||||
},
|
||||
model: {
|
||||
prop: 'value',
|
||||
event: 'change'
|
||||
},
|
||||
props: {
|
||||
value: {
|
||||
type: Number,
|
||||
required: true
|
||||
type: [Number, String],
|
||||
required: false,
|
||||
default: null
|
||||
},
|
||||
size: {
|
||||
type: String,
|
||||
default: 'default'
|
||||
},
|
||||
/**
|
||||
* type can be 'date', 'datetime'
|
||||
*/
|
||||
type: {
|
||||
type: String,
|
||||
default: 'date'
|
||||
},
|
||||
debug: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
data () {
|
||||
@ -103,117 +280,273 @@ export default {
|
||||
displayDateTimeString: '',
|
||||
displayDateString: '',
|
||||
displayTimeString: '',
|
||||
calendarTime: moment(),
|
||||
selectedDateTime: null,
|
||||
calendarDateTime: moment(),
|
||||
currentDateTime: moment(),
|
||||
showCalendar: false,
|
||||
showTimeSelector: false,
|
||||
calendar: [],
|
||||
currentTime: moment()
|
||||
...TIME_CONST
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
placeholder () {
|
||||
return PLACEHOLDER[this.type]
|
||||
},
|
||||
format () {
|
||||
return DATE_FORMAT[this.type]
|
||||
},
|
||||
computedHour () {
|
||||
if (this.computedSelectedDateTime) return this.computedSelectedDateTime.format('HH')
|
||||
else return null
|
||||
},
|
||||
computedMinute () {
|
||||
if (this.computedSelectedDateTime) return this.computedSelectedDateTime.format('mm')
|
||||
else return null
|
||||
},
|
||||
computedSecond () {
|
||||
if (this.computedSelectedDateTime) return this.computedSelectedDateTime.format('ss')
|
||||
else return null
|
||||
},
|
||||
/**
|
||||
* If value is valid return null.
|
||||
* If value is not valid, return moment(value)
|
||||
*/
|
||||
computedSelectedDateTime () {
|
||||
if (this.value === null || this.value === undefined) return null
|
||||
const newSelectedDateTime = moment(Number(this.value))
|
||||
if (newSelectedDateTime.isValid()) {
|
||||
return newSelectedDateTime
|
||||
} else {
|
||||
return null
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
/**
|
||||
* If new value is valid, set calendarTime and refresh display strings.
|
||||
* If new value is invalid, do nothing.
|
||||
*/
|
||||
value (newValue) {
|
||||
const newSelectedDateTime = moment(Number(newValue))
|
||||
if (newSelectedDateTime.isValid()) {
|
||||
this.calendarDateTime = moment(newSelectedDateTime)
|
||||
this.refreshSelectedDateTimeString()
|
||||
}
|
||||
}
|
||||
},
|
||||
created () {
|
||||
this.refreshSelectedDateTimeString()
|
||||
if (this.computedSelectedDateTime !== null && this.computedSelectedDateTime.isValid()) {
|
||||
this.calendarDateTime = moment(this.computedSelectedDateTime)
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
dateArray,
|
||||
clear () {
|
||||
this.selectedDateTime = null
|
||||
/**
|
||||
* 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.adjustDateTimeAccrodingToType(newSelectedDateTime)
|
||||
if (this.computedSelectedDateTime === null || adjustedDateTime.valueOf() !== this.computedSelectedDateTime.valueOf()) {
|
||||
this.$emit('change', adjustedDateTime.valueOf(), adjustedDateTime.format(this.format))
|
||||
}
|
||||
}
|
||||
},
|
||||
adjustDateTimeAccrodingToType (datetime) {
|
||||
if (this.type === 'datetime') {
|
||||
return moment(datetime).startOf('second')
|
||||
} else {
|
||||
return moment(datetime).startOf('date').hour(0)
|
||||
}
|
||||
},
|
||||
justifySelectedDateTimeAfterChangeTimeString () {
|
||||
if (this.computedSelectedDateTime === null) {
|
||||
// case here is impossible for now, because you can't clear time for now
|
||||
} else {
|
||||
const newDisplayDateTimeString = this.displayDateString + ' ' + this.displayTimeString
|
||||
const newSelectedDateTime = moment(newDisplayDateTimeString, this.format, true)
|
||||
this.setValue(newSelectedDateTime)
|
||||
}
|
||||
},
|
||||
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()
|
||||
}
|
||||
},
|
||||
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
|
||||
},
|
||||
/**
|
||||
* To close timeSelector
|
||||
*/
|
||||
handleCalendarClick (e) {
|
||||
if (!this.$refs.timeSelector) return
|
||||
if (!this.$refs.timeSelector.contains(e.target) && this.$refs.timeSelector !== e.target) {
|
||||
this.closeTimeSelector()
|
||||
}
|
||||
},
|
||||
nativeCloseCalendar (e) {
|
||||
if (!this.$refs.datePicker.contains(e.target)) {
|
||||
this.closeCalendar()
|
||||
}
|
||||
},
|
||||
clearSelectedDateTime () {
|
||||
this.setValue(null)
|
||||
this.displayDateTimeString = ''
|
||||
this.displayDateString = ''
|
||||
this.displayTimeString = ''
|
||||
},
|
||||
setSelectedDateTimeToNow () {
|
||||
this.selectedDateTime = moment()
|
||||
this.calendarTime = moment()
|
||||
this.refreshSelectedDateTime()
|
||||
this.setValue(moment())
|
||||
this.calendarDateTime = moment()
|
||||
},
|
||||
handleDateClick (dateItem) {
|
||||
if (!this.selectedDateTime) {
|
||||
this.selectedDateTime = moment()
|
||||
this.selectedDateTime = setDate(this.selectedDateTime, dateItem)
|
||||
} else {
|
||||
this.selectedDateTime = setDate(this.selectedDateTime, dateItem)
|
||||
let newSelectedDateTime = moment()
|
||||
if (this.computedSelectedDateTime !== null) {
|
||||
newSelectedDateTime = moment(this.computedSelectedDateTime)
|
||||
}
|
||||
this.calendarTime = moment(this.selectedDateTime)
|
||||
this.$emit('change', this.selectedDateTime.valueOf())
|
||||
this.refreshSelectedDateTime()
|
||||
newSelectedDateTime = setDate(newSelectedDateTime, dateItem)
|
||||
this.setValue(newSelectedDateTime)
|
||||
},
|
||||
refreshSelectedDateTime () {
|
||||
if (this.selectedDateTime === null) {
|
||||
/**
|
||||
* If not selected, display nothing,
|
||||
* else update datetime related string
|
||||
*/
|
||||
refreshSelectedDateTimeString () {
|
||||
if (this.computedSelectedDateTime === null) {
|
||||
this.displayDateTimeString = ''
|
||||
return
|
||||
}
|
||||
this.displayDateTimeString = this.selectedDateTime.format('YYYY-MM-DD HH:mm:ss')
|
||||
this.displayDateString = this.selectedDateTime.format('YYYY-MM-DD')
|
||||
this.displayTimeString = this.selectedDateTime.format('HH:mm:ss')
|
||||
this.displayDateTimeString = this.computedSelectedDateTime.format(this.format)
|
||||
this.displayDateString = this.computedSelectedDateTime.format('YYYY-MM-DD')
|
||||
this.displayTimeString = this.computedSelectedDateTime.format('HH:mm:ss')
|
||||
},
|
||||
/**
|
||||
* If new time is invalid, do nothing.
|
||||
* If valid, update.
|
||||
*/
|
||||
handleDateTimeInputEnter () {
|
||||
const newSelectedDateTime = moment(this.displayDateTimeString, 'YYYY-MM-DD HH:mm:ss', true)
|
||||
if (newSelectedDateTime.isValid()) {
|
||||
this.selectedDateTime = newSelectedDateTime
|
||||
this.calendarTime = moment(newSelectedDateTime)
|
||||
this.refreshSelectedDateTime()
|
||||
this.$emit('change', this.selectedDateTime.valueOf())
|
||||
}
|
||||
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, dateFormat, true)
|
||||
if (newSelectedDateTime.isValid()) {
|
||||
this.selectedDateTime = newSelectedDateTime
|
||||
this.calendarTime = moment(newSelectedDateTime)
|
||||
this.$emit('change', this.selectedDateTime.valueOf())
|
||||
}
|
||||
this.refreshSelectedDateTime()
|
||||
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, dateFormat, true)
|
||||
if (newSelectedDateTime.isValid()) {
|
||||
this.selectedDateTime = newSelectedDateTime
|
||||
} else if (this.selectedDateTime === null) {
|
||||
this.selectedDateTime = moment()
|
||||
const newSelectedDateTime = moment(newDisplayDateTimeString, this.format, true)
|
||||
if (this.computedSelectedDateTime === null) {
|
||||
this.setValue(moment())
|
||||
} else {
|
||||
this.setValue(newSelectedDateTime)
|
||||
this.refreshSelectedDateTimeString()
|
||||
}
|
||||
this.refreshSelectedDateTime()
|
||||
this.closeCalendar()
|
||||
},
|
||||
/**
|
||||
* Calendar view related methods
|
||||
*/
|
||||
openCalendar () {
|
||||
this.showCalendar = true
|
||||
document.body.addEventListener('click', this.nativeCloseCalendar)
|
||||
},
|
||||
closeCalendar () {
|
||||
this.showCalendar = false
|
||||
this.showTimeSelector = false
|
||||
document.body.removeEventListener('click', this.nativeCloseCalendar)
|
||||
},
|
||||
toggleCalendar () {
|
||||
|
||||
},
|
||||
nextYear () {
|
||||
this.calendarTime.add(1, 'year')
|
||||
this.calendarDateTime.add(1, 'year')
|
||||
this.$forceUpdate()
|
||||
},
|
||||
prevYear () {
|
||||
this.calendarTime.subtract(1, 'year')
|
||||
this.calendarDateTime.subtract(1, 'year')
|
||||
this.$forceUpdate()
|
||||
},
|
||||
nextMonth () {
|
||||
this.calendarTime.add(1, 'month')
|
||||
this.calendarDateTime.add(1, 'month')
|
||||
this.$forceUpdate()
|
||||
},
|
||||
prevMonth () {
|
||||
this.calendarTime.subtract(1, 'month')
|
||||
this.calendarDateTime.subtract(1, 'month')
|
||||
this.$forceUpdate()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.date {
|
||||
text-align: center;
|
||||
width: 36px;
|
||||
opacity: .6;
|
||||
&.n-date-picker-calendar__date--current {
|
||||
color: blue;
|
||||
}
|
||||
&.n-date-picker-calendar__date--selected {
|
||||
background-color: red;
|
||||
}
|
||||
cursor: pointer;
|
||||
&.n-date-picker-calendar__date--in-display-month, &.n-date-picker-calendar__date--day {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,7 +1,13 @@
|
||||
import moment from 'moment'
|
||||
|
||||
/**
|
||||
* change date of `time` accroding to `dateItem`
|
||||
* keep time of `time`
|
||||
* return a new Moment Object according to time
|
||||
* @param {Moment} time
|
||||
* @param {Object} dateItem
|
||||
*/
|
||||
function setDate (time, dateItem) {
|
||||
console.log(time, dateItem)
|
||||
time.year(dateItem.year)
|
||||
time.month(dateItem.month)
|
||||
time.date(dateItem.date)
|
||||
|
||||
@ -7,6 +7,7 @@
|
||||
}"
|
||||
>
|
||||
<textarea
|
||||
ref="textarea"
|
||||
class="n-input__textarea"
|
||||
:class="{
|
||||
[`n-input__textarea--${size}-size`]: true
|
||||
@ -15,11 +16,13 @@
|
||||
:placeholder="placeholder"
|
||||
:value="value"
|
||||
:disabled="disabled === true"
|
||||
v-on="$listeners"
|
||||
@blur="handleBlur"
|
||||
@focus="handleFocus"
|
||||
@input="handleInput"
|
||||
@change="handleChange"
|
||||
@keyup="handleKeyUp"
|
||||
@compositionstart="handleCompositionStart"
|
||||
@compositionend="handleCompositionEnd"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
@ -30,6 +33,7 @@
|
||||
}"
|
||||
>
|
||||
<input
|
||||
ref="input"
|
||||
:type="type"
|
||||
class="n-input__input"
|
||||
:class="{
|
||||
@ -38,13 +42,16 @@
|
||||
[`n-input__input--icon`]: icon
|
||||
}"
|
||||
:placeholder="placeholder"
|
||||
:value="value"
|
||||
:disabled="disabled === true"
|
||||
:maxlength="maxlength"
|
||||
:value="value"
|
||||
@blur="handleBlur"
|
||||
@focus="handleFocus"
|
||||
@input="handleInput"
|
||||
@change="handleChange"
|
||||
@keyup="handleKeyUp"
|
||||
@compositionstart="handleCompositionStart"
|
||||
@compositionend="handleCompositionEnd"
|
||||
>
|
||||
<div
|
||||
v-if="icon"
|
||||
@ -65,7 +72,7 @@ export default {
|
||||
},
|
||||
model: {
|
||||
prop: 'value',
|
||||
event: 'change'
|
||||
event: 'input'
|
||||
},
|
||||
props: {
|
||||
type: {
|
||||
@ -77,7 +84,7 @@ export default {
|
||||
default: ''
|
||||
},
|
||||
value: {
|
||||
type: String,
|
||||
type: [String, Number],
|
||||
default: ''
|
||||
},
|
||||
disabled: {
|
||||
@ -105,9 +112,22 @@ export default {
|
||||
default: 'false'
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
isComposing: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleCompositionStart () {
|
||||
this.isComposing = true
|
||||
},
|
||||
handleCompositionEnd (event) {
|
||||
this.isComposing = false
|
||||
this.handleInput(event)
|
||||
},
|
||||
handleInput (e) {
|
||||
this.$emit('change', e.target.value)
|
||||
if (this.isComposing) return
|
||||
this.$emit('input', e.target.value)
|
||||
},
|
||||
handleBlur (e) {
|
||||
this.$emit('blur', e)
|
||||
@ -116,7 +136,11 @@ export default {
|
||||
this.$emit('focus', e)
|
||||
},
|
||||
handleKeyUp (e) {
|
||||
if (this.isComposing) return
|
||||
this.$emit('keyup', e)
|
||||
},
|
||||
handleChange (e) {
|
||||
this.$emit('change', e.target.value)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -104,29 +104,41 @@ export default {
|
||||
paddingBody: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
value: {
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
isCollapsed: false,
|
||||
activeItemName: 'Service Management',
|
||||
activeItemName: '',
|
||||
itemsWithCollapseStatus: this.items.map(item => ({
|
||||
...item,
|
||||
isCollapsed: false
|
||||
}))
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
value () {
|
||||
this.activeItemName = this.value
|
||||
}
|
||||
},
|
||||
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
|
||||
}
|
||||
}
|
||||
@ -139,6 +151,7 @@ export default {
|
||||
},
|
||||
makeActive (item) {
|
||||
this.activeItemName = item.name
|
||||
this.$emit('input', item.name)
|
||||
if (this.$router) {
|
||||
this.$router.push(item.path)
|
||||
}
|
||||
|
||||
@ -23,6 +23,25 @@
|
||||
cursor: not-allowed;
|
||||
opacity: .43;
|
||||
}
|
||||
&.n-button--tiny-size {
|
||||
font-size: $button-tiny-font-size;
|
||||
height: $tiny-height;
|
||||
padding: 0 14px;
|
||||
&.is-round {
|
||||
border-radius: $tiny-height / 2;
|
||||
}
|
||||
.n-button__content {
|
||||
line-height: $tiny-height;
|
||||
}
|
||||
.n-button__icon {
|
||||
height: 18px;
|
||||
width: 18px;
|
||||
.n-icon {
|
||||
font-size: 18px;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.n-button--small-size {
|
||||
font-size: $button-small-font-size;
|
||||
height: $small-height;
|
||||
|
||||
241
styles/DatePicker.scss
Normal file
241
styles/DatePicker.scss
Normal file
@ -0,0 +1,241 @@
|
||||
@import './mixins/mixins.scss';
|
||||
@import './theme/default.scss';
|
||||
|
||||
@include b(date-picker) {
|
||||
position: relative;
|
||||
width: 240px;
|
||||
@include fade-up-transition(date-picker-calendar);
|
||||
@include fade-up-transition(date-picker-time-selector);
|
||||
.n-date-picker__icon {
|
||||
position: absolute;
|
||||
right: 13px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
color: rgba(221, 238, 247, 0.3);
|
||||
height: 20px;
|
||||
}
|
||||
.n-date-picker__input, .n-date-picker-calendar__date-input, .n-date-picker-calendar__time-input {
|
||||
-webkit-appearance: none;
|
||||
box-sizing: border-box;
|
||||
border: none;
|
||||
border-radius: $input-border-radius;
|
||||
outline: none;
|
||||
color: #fff;
|
||||
font-family: $default-font-family;
|
||||
background-color: $input-background-color;
|
||||
height: 34px;
|
||||
width: 100%;
|
||||
caret-color: $input-caret-color;
|
||||
box-shadow: none;
|
||||
transition: box-shadow .3s $default-cubic-bezier, background-color .3s $default-cubic-bezier;
|
||||
padding: 0 14px;
|
||||
font-size: 14px;
|
||||
&:focus:hover {
|
||||
box-shadow: inset 0 0 0px 1px $main-color, 0px 0px 10px 1px #366555;
|
||||
}
|
||||
&:hover {
|
||||
box-shadow: inset 0 0 0px 1px $main-color;
|
||||
}
|
||||
&:focus {
|
||||
box-shadow: inset 0 0 0px 1px $main-color;
|
||||
background-color: $focus-input-background-color;
|
||||
}
|
||||
&::placeholder {
|
||||
color: $input-placeholder-color;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
&.n-date-picker--small-size {
|
||||
.n-date-picker__input {
|
||||
height: $small-height;
|
||||
line-height: $small-height;
|
||||
font-size: $small-input-font-size;
|
||||
}
|
||||
}
|
||||
&.n-date-picker--default-size, &.n-date-picker--medium-size {
|
||||
.n-date-picker__input {
|
||||
height: $default-height;
|
||||
line-height: $default-height;
|
||||
font-size: $default-input-font-size;
|
||||
}
|
||||
}
|
||||
&.n-date-picker--large-size {
|
||||
.n-date-picker__input {
|
||||
height: $large-height;
|
||||
line-height: $large-height;
|
||||
font-size: $large-input-font-size;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include b(date-picker-calendar) {
|
||||
z-index: 1;
|
||||
position: absolute;
|
||||
top: calc(100% + 4px);
|
||||
left: 0;
|
||||
width: 351px;
|
||||
background:rgba(75,81,106,1);
|
||||
box-shadow:0px 2px 20px 0px rgba(0,0,0,0.16);
|
||||
border-radius: 6px;
|
||||
color:rgba(233,233,236,1);
|
||||
.n-date-picker-calendar__date-time-input-wrapper {
|
||||
padding: 14px 24px;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, .07);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
.n-date-picker-calendar__time-input-wrapper {
|
||||
position: relative;
|
||||
}
|
||||
.n-date-picker-calendar__date-input, .n-date-picker-calendar__time-input {
|
||||
width: 145px;
|
||||
}
|
||||
}
|
||||
.n-date-picker-calendar__month-modifier {
|
||||
display: flex;
|
||||
height: 41px;
|
||||
align-items: center;
|
||||
padding-left: 24px;
|
||||
padding-right: 24px;
|
||||
.n-date-picker-calendar__prev, .n-date-picker-calendar__next, .n-date-picker-calendar__fast-prev, .n-date-picker-calendar__fast-next {
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
.n-icon {
|
||||
width: 5px;
|
||||
&::before {
|
||||
width: 5px;
|
||||
color: rgba(255, 255, 255, .3);
|
||||
}
|
||||
}
|
||||
}
|
||||
.n-date-picker-calendar__fast-prev, .n-date-picker-calendar__next {
|
||||
margin-right: 10px;
|
||||
}
|
||||
.n-date-picker-calendar__month-year {
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
line-height: 17px;
|
||||
flex-grow: 1;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
.n-date-picker-calendar__weekdays {
|
||||
padding: 8px 24px 14px 24px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
.n-date-picker-calendar__weekday {
|
||||
line-height: 15px;
|
||||
width: 30px;
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
.n-date-picker-calendar__dates {
|
||||
padding: 8px 3px 8px 24px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
.n-date-picker-calendar__date {
|
||||
position: relative;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
line-height: 24px;
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
margin-right: 21px;
|
||||
margin-top: 8px;
|
||||
margin-bottom: 8px;
|
||||
border-radius: 3px;
|
||||
cursor: pointer;
|
||||
transition: background-color .2s $default-cubic-bezier, color .2s $default-cubic-bezier;
|
||||
&:not(.n-date-picker-calendar__date--in-display-month) {
|
||||
color: rgba(233, 233, 236, 0.4);
|
||||
}
|
||||
&.n-date-picker-calendar__date--current {
|
||||
color: $main-color;
|
||||
&::after {
|
||||
position: absolute;
|
||||
top: 3px;
|
||||
right: 3px;
|
||||
content: "";
|
||||
height: 4px;
|
||||
width: 4px;
|
||||
border-radius: 2px;
|
||||
background-color: $main-color;
|
||||
transition: background-color .2s $default-cubic-bezier;
|
||||
}
|
||||
}
|
||||
&.n-date-picker-calendar__date--selected {
|
||||
color: rgba(75, 81, 106, 1)!important;
|
||||
background-color: $main-color!important;
|
||||
&::after {
|
||||
background-color: rgba(75, 81, 106, 1);
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
background-color: rgba(99, 226, 183, 0.2);
|
||||
}
|
||||
}
|
||||
border-bottom: 1px solid rgba(255, 255, 255, .07);
|
||||
}
|
||||
.n-date-picker-calendar__divider {
|
||||
margin: 0 24px;
|
||||
height: 1px;
|
||||
background-color: rgba(255, 255, 255, .07);
|
||||
}
|
||||
.n-date-picker-calendar__actions {
|
||||
height: 47px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
.n-button {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include b(date-picker-time-selector) {
|
||||
z-index: 1;
|
||||
position: absolute;
|
||||
top: calc(100% + 4px);
|
||||
background-color: rgba(97, 104, 132, 1);
|
||||
box-shadow:0px 2px 20px 0px rgba(0,0,0,0.16);
|
||||
font-size: 12px;
|
||||
border-radius: 6px;
|
||||
width: 180px;
|
||||
.n-date-picker-time-selector__selection-wrapper {
|
||||
height: 244px;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, .07);
|
||||
display: flex;
|
||||
}
|
||||
.n-date-picker-time-selector__hour, .n-date-picker-time-selector__minute, .n-date-picker-time-selector__second {
|
||||
@include scrollbar;
|
||||
width: 60px;
|
||||
height: 244px;
|
||||
flex-direction: column;
|
||||
overflow-y: scroll;
|
||||
.n-date-picker-time-selector__item {
|
||||
cursor: pointer;
|
||||
height: 35px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: background-color .2s $default-cubic-bezier, color .2s $default-cubic-bezier;
|
||||
background: transparent;
|
||||
&:hover {
|
||||
background-color: rgba(99,226,183,0.12);
|
||||
}
|
||||
&.n-date-picker-time-selector__item--active {
|
||||
background-color: rgba(99,226,183,0.12);
|
||||
color: rgba(99, 226, 183, 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
.n-date-picker-time-selector__actions {
|
||||
margin: 10px 15px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
.n-button {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -82,7 +82,6 @@
|
||||
padding: 0 14px;
|
||||
font-size: $large-input-font-size;
|
||||
}
|
||||
|
||||
}
|
||||
.n-input__input.n-input__input--round {
|
||||
&.n-input__input--small-size {
|
||||
|
||||
@ -18,6 +18,7 @@
|
||||
@import "./Notification.scss";
|
||||
@import "./Pagination.scss";
|
||||
@import './Alert.scss';
|
||||
@import './DatePicker.scss';
|
||||
|
||||
@import "./NimbusServiceLayout.scss";
|
||||
@import "./Popup.scss";
|
||||
|
||||
@ -1,8 +1,11 @@
|
||||
@import './mixins/config.scss';
|
||||
|
||||
$body-background-color: #1a2033;
|
||||
|
||||
/**
|
||||
* genaral
|
||||
*/
|
||||
$tiny-height: 22px;
|
||||
$small-height: 28px;
|
||||
$default-height: 34px;
|
||||
$large-height: 40px;
|
||||
@ -33,6 +36,7 @@ $input-icon-color: rgba(255,255,255,0.2);
|
||||
*/
|
||||
$button-margin: 0 12px 8px 0;
|
||||
$button-border-radius: 6px;
|
||||
$button-tiny-font-size: 12px;
|
||||
$button-small-font-size: 14px;
|
||||
$button-default-font-size: 16px;
|
||||
$button-large-font-size: 16px;
|
||||
@ -123,4 +127,17 @@ $default-font-family: 'Lato';
|
||||
&::-webkit-scrollbar-thumb:hover {
|
||||
background: rgba(255,255,255,0.3);
|
||||
}
|
||||
}
|
||||
|
||||
@mixin fade-up-transition($block) {
|
||||
.#{$namespace}-#{$block}--transition-enter, .#{$namespace}-#{$block}--transition-leave-to {
|
||||
opacity: 0;
|
||||
transform: translateY(4px);
|
||||
}
|
||||
.#{$namespace}-#{$block}--transition-leave-active {
|
||||
transition: opacity .3s $slow-out-cubic-bezier, transform .3s $slow-out-cubic-bezier;
|
||||
}
|
||||
.#{$namespace}-#{$block}--transition-enter-active {
|
||||
transition: opacity .3s $fast-in-cubic-bezier, transform .3s $fast-in-cubic-bezier;
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user