mirror of
https://github.com/tusen-ai/naive-ui.git
synced 2025-01-18 12:34:25 +08:00
feat(time)
This commit is contained in:
07akioni
parent
ac182ba07f
commit
6646cf339d
@ -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
12
demo/documentation/components/popconfirm/enUS/basic.md
Normal 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>
|
||||
```
|
||||
@ -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
18
demo/documentation/components/popconfirm/enUS/customIcon.md
Normal 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
24
demo/documentation/components/popconfirm/enUS/event.md
Normal 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
8
demo/documentation/components/popconfirm/enUS/index.md
Normal 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
9
demo/documentation/components/popconfirm/enUS/noIcon.md
Normal 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>
|
||||
```
|
||||
@ -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
15
demo/documentation/components/time/enUS/basic.md
Normal 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
8
demo/documentation/components/time/enUS/format.md
Normal 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
7
demo/documentation/components/time/enUS/index.md
Normal file
@ -0,0 +1,7 @@
|
||||
# Time
|
||||
```demo
|
||||
basic
|
||||
type
|
||||
format
|
||||
relative
|
||||
```
|
||||
8
demo/documentation/components/time/enUS/relative.md
Normal file
8
demo/documentation/components/time/enUS/relative.md
Normal 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
15
demo/documentation/components/time/enUS/type.md
Normal 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
0
demo/documentation/components/time/index.entry
Normal file
0
demo/documentation/components/time/zhCN/index.md
Normal file
0
demo/documentation/components/time/zhCN/index.md
Normal 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>
|
||||
@ -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
11
demo/init.js
@ -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 },
|
||||
|
||||
@ -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)
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user