mirror/naive-ui
2
0
Fork 0
mirror of https://github.com/tusen-ai/naive-ui.git synced 2024-12-09 04:31:35 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(time)

Browse Source
This commit is contained in:
07akioni 2019-10-21 15:37:41 +08:00
parent ac182ba07f
commit 6646cf339d
21 changed files with 169 additions and 181 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
demo/demo.vue
View File

@ -233,10 +233,6 @@ export default {
name: 'Tabs',
path: `/${this.lang}/${this.theme}` + '/n-tabs'
},
{
name: 'Table',
path: `/${this.lang}/${this.theme}` + '/n-table'
},
{
name: 'Tag',
path: `/${this.lang}/${this.theme}` + '/n-tag'

12
demo/documentation/components/popconfirm/enUS/basic.md Normal file
View File

@ -0,0 +1,12 @@
# Basic
```html
<n-popconfirm
positive-text="ok"
negative-text="not ok"
>
<template v-slot:activator>
<n-button>Quit</n-button>
</template>
Are you sure to quit this game?
</n-popconfirm>
```

17
demo/documentation/components/popconfirm/enUS/customAction.md Normal file
View File

@ -0,0 +1,17 @@
# Custom Action
```html
<n-popconfirm :controller="controller">
<template v-slot:activator>
<n-button>Quit</n-button>
</template>
Are you sure to quit this game?
<template v-slot:action>
<n-button
size="tiny"
@click="handleOopsClick"
>
oops!
</n-button>
</template>
</n-popconfirm>
```

18
demo/documentation/components/popconfirm/enUS/customIcon.md Normal file
View File

@ -0,0 +1,18 @@
# Custom Icon
```html
<n-popconfirm
positive-text="ok"
negative-text="not ok"
>
<template v-slot:icon>
<n-icon
type="md-hand"
color="red"
/>
</template>
<template v-slot:activator>
<n-button>Quit</n-button>
</template>
Are you sure to quit this game?
</n-popconfirm>
```

24
demo/documentation/components/popconfirm/enUS/event.md Normal file
View File

@ -0,0 +1,24 @@
# Event
```html
<n-popconfirm
@positive-click="handlePositiveClick"
@negative-click="handleNegativeClick"
>
<template v-slot:activator>
<n-button>Quit</n-button>
</template>
Are you sure to quit this game?
</n-popconfirm>
```
```js
export default {
methods: {
handlePositiveClick () {
this.$NMessage.info('positive click')
},
handleNegativeClick () {
this.$NMessage.info('negative click')
}
}
}
```

8
demo/documentation/components/popconfirm/enUS/index.md Normal file
View File

@ -0,0 +1,8 @@
# Popconfirm
```demo
basic
custom-action
custom-icon
event
no-icon
```

9
demo/documentation/components/popconfirm/enUS/noIcon.md Normal file
View File

@ -0,0 +1,9 @@
# No Icon
```html
<n-popconfirm :show-icon="false">
<template v-slot:activator>
<n-button>No Icon</n-button>
</template>
Are you sure to quit this game?
</n-popconfirm>
```

0
demo/documentation/components/popconfirm/index.entry Normal file
View File

0
demo/documentation/components/popconfirm/zhCN/index.md Normal file
View File

99
demo/documentation/components/tableDemo.vue
View File

@ -1,99 +0,0 @@
<template>
<div
ref="doc"
class="n-doc"
>
<div class="n-doc-header">
<n-gradient-text :font-size="20">
Table / n-table
</n-gradient-text>
</div>
<div class="n-doc-body">
<div class="n-doc-section">
<div class="n-doc-section__header">
Basic Usage
</div>
<div class="n-doc-section__view">
<n-table>
<n-thead>
<n-tr>
<n-th>ID</n-th>
<n-th>Cluster</n-th>
<n-th>Cluster Type</n-th>
<n-th>Tags</n-th>
<n-th>Network Type</n-th>
<n-th>Cluster Status</n-th>
<n-th>Nodes</n-th>
<n-th>Location</n-th>
<n-th>Version</n-th>
</n-tr>
</n-thead>
<n-tbody>
<n-tr
v-for="i in [1,2,3,4,5]"
:key="i"
>
<n-td>1</n-td>
<n-td>Name1</n-td>
<n-td>Type1</n-td>
<n-td>bla</n-td>
<n-td>blablabla</n-td>
<n-td>Running</n-td>
<n-td>6</n-td>
<n-td>Beijing</n-td>
<n-td>1.12.6-aliyun.1</n-td>
</n-tr>
</n-tbody>
</n-table>
</div>
<div class="n-doc-section__source">
<textarea><n-table>
<n-thead>
<n-tr>
<n-th>ID</n-th>
<n-th>Cluster</n-th>
<n-th>Cluster Type</n-th>
<n-th>Tags</n-th>
<n-th>Network Type</n-th>
<n-th>Cluster Status</n-th>
<n-th>Nodes</n-th>
<n-th>Location</n-th>
<n-th>Version</n-th>
</n-tr>
</n-thead>
<n-tbody>
<n-tr
v-for="i in [1,2,3,4,5]"
:key="i"
>
<n-td>1</n-td>
<n-td>Name1</n-td>
<n-td>Type1</n-td>
<n-td>bla</n-td>
<n-td>blablabla</n-td>
<n-td>Running</n-td>
<n-td>6</n-td>
<n-td>Beijing</n-td>
<n-td>1.12.6-aliyun.1</n-td>
</n-tr>
</n-tbody>
</n-table></textarea>
</div>
</div>
</div>
</div>
</template>
<script>
import docCodeEditorMixin from './docCodeEditorMixin'
export default {
mixins: [docCodeEditorMixin],
data () {
return {
}
},
methods: {
}
}
</script>

15
demo/documentation/components/time/enUS/basic.md Normal file
View File

@ -0,0 +1,15 @@
# Basic
```html
<n-time :time="0"/>
<br>
<n-time :time="time"/>
```
```js
export default {
data () {
return {
time: new Date(0)
}
}
}
```

8
demo/documentation/components/time/enUS/format.md Normal file
View File

@ -0,0 +1,8 @@
# Format
```html
<n-time :time="0" format="yyyy-MM-dd"/>
<br>
<n-time :time="0" format="yyyy-MM-dd hh:mm"/>
<br>
<n-time :time="0" format="yyyy-MM-dd hh:mm:ss"/>
```

7
demo/documentation/components/time/enUS/index.md Normal file
View File

@ -0,0 +1,7 @@
# Time
```demo
basic
type
format
relative
```

8
demo/documentation/components/time/enUS/relative.md Normal file
View File

@ -0,0 +1,8 @@
# Relative
```html
<n-time :time="0" :to="86400000"/>
<br>
<n-time :time="0" :to="864000000"/>
<br>
<n-time :time="0" :to="8640000000"/>
```

15
demo/documentation/components/time/enUS/type.md Normal file
View File

@ -0,0 +1,15 @@
# Type
```html
<n-time :time="0" type="date"/>
<br>
<n-time :time="time" type="datetime"/>
```
```js
export default {
data () {
return {
time: new Date(0)
}
}
}
```

0
demo/documentation/components/time/index.entry Normal file
View File

0
demo/documentation/components/time/zhCN/index.md Normal file
View File

32
demo/documentation/components/timeDemo/index.vue
View File

@ -1,32 +0,0 @@
<template>
<div
ref="doc"
class="n-doc"
>
<div class="n-doc-header">
<n-gradient-text :font-size="20">
scaffold
</n-gradient-text>
</div>
<div class="n-doc-body">
<scaffold />
</div>
</div>
</template>
<script>
import scaffold from './scaffold.demo.vue'
export default {
components: {
scaffold
},
data () {
return {
}
},
methods: {
}
}
</script>

28
demo/documentation/components/timeDemo/scaffold.demo.vue
View File

@ -1,28 +0,0 @@
<template>
<div class="n-doc-section">
<div class="n-doc-section__header">
Scaffold
</div>
<div
class="n-doc-section__view"
style="flex-wrap: nowrap;"
>
<!--EXAMPLE_START-->
Write some demo here
<!--EXAMPLE_END-->
</div>
<pre class="n-doc-section__inspect">Inspect some value here</pre>
<n-doc-source-block>
<!--SOURCE-->
</n-doc-source-block>
</div>
</template>
<script>
export default {
data () {
return {
}
}
}
</script>

11
demo/init.js
View File

@ -21,7 +21,6 @@ import iconDemo from './documentation/components/iconDemo'
import checkbox from './documentation/components/checkbox'
import button from './documentation/components/button'
import switchDemo from './documentation/components/switch'
import tableDemo from './documentation/components/tableDemo'
import input from './documentation/components/input'
import select from './documentation/components/select'
import cascaderDemo from './documentation/components/cascaderDemo'
@ -54,7 +53,7 @@ import tag from './documentation/components/tag'
import timeline from './documentation/components/timeline'
import progress from './documentation/components/progress'
import divider from './documentation/components/divider'
import popconfirmDemo from './documentation/components/popconfirmDemo'
import popconfirm from './documentation/components/popconfirm'
import anchor from './documentation/components/anchor'
import popselect from './documentation/components/popselect'
import app from './documentation/components/app'
@ -63,7 +62,7 @@ import transferDemo from './documentation/components/transferDemo'
import spin from './documentation/components/spin'
import drawerDemo from './documentation/components/drawerDemo'
import loadingBar from './documentation/components/loadingBar'
import timeDemo from './documentation/components/timeDemo'
import time from './documentation/components/time'
import sliderDemo from './documentation/components/sliderDemo'
import treeDemo from './documentation/components/treeDemo'
import affix from './documentation/components/affix'
@ -137,7 +136,7 @@ const routes = [
{ path: '/n-checkbox', component: checkbox },
{ path: '/n-button', component: button },
{ path: '/n-switch', component: switchDemo },
{ path: '/n-table', component: tableDemo },
// { path: '/n-table', component: tableDemo },
{ path: '/n-advance-table', component: advancedTable },
{ path: '/n-input', component: input },
{ path: '/n-select', component: select },
@ -173,7 +172,7 @@ const routes = [
{ path: '/n-back-top', component: backTop },
{ path: '/n-date-picker-debug', component: datePickerDebug },
{ path: '/n-divider', component: divider },
{ path: '/n-popconfirm', component: popconfirmDemo },
{ path: '/n-popconfirm', component: popconfirm },
{ path: '/n-anchor', component: anchor },
{ path: '/n-dropdown', component: dropdownDemo },
{ path: '/n-popselect', component: popselect },
@ -183,7 +182,7 @@ const routes = [
{ path: '/n-spin', component: spin },
{ path: '/n-drawer', component: drawerDemo },
{ path: '/n-loading-bar', component: loadingBar },
{ path: '/n-time', component: timeDemo },
{ path: '/n-time', component: time },
{ path: '/n-slider', component: sliderDemo },
{ path: '/n-tree', component: treeDemo },
{ path: '/n-vertical-align-debug', component: verticalAlignDebug },

35
packages/common/Time/src/main.js
View File

@ -1,25 +1,26 @@
// import moment from 'moment'
import { format, formatDistance, isValid } from 'date-fns'
export default {
name: 'NTime',
props: {
time: {
validator (time) {
if (time === null) return false
// return moment(time).isValid()
validator (value) {
return isValid(new Date(value))
},
default: null
},
raw: {
type: Boolean,
default: false
},
type: {
validator (type) {
return ['relative', 'date', 'datetime'].includes('type')
validator (value) {
return ['relative', 'date', 'datetime'].includes(value)
},
default: 'relative'
},
to: {
validator (value) {
return isValid(new Date(value))
},
default: () => new Date()
},
format: {
type: String,
default: null
@ -27,7 +28,17 @@ export default {
},
computed: {
renderedTime () {
if (this.format) {
return format(this.time, this.format)
} else if (this.type === 'date') {
return format(this.time, 'yyyy-MM-dd')
} else if (this.type === 'datetime') {
return format(this.time, 'yyyy-MM-dd hh:mm:ss')
} else {
return formatDistance(this.time, this.to, {
addSuffix: true
})
}
}
},
data () {
@ -36,6 +47,6 @@ export default {
}
},
render (h) {
return 'time'
return h('span', this.renderedTime)
}
}