chore: some doc fixes & get rid of asthemecontext

This commit is contained in:
07akioni 2020-03-19 23:28:25 +08:00
parent 54f1e241c7
commit 27e782ca17
25 changed files with 56 additions and 46 deletions

View File

@ -27,7 +27,7 @@ debug
|circle|`boolean`|`false`|| |circle|`boolean`|`false`||
|round|`boolean`|`false`|| |round|`boolean`|`false`||
|loading|`boolean`|`false`|| |loading|`boolean`|`false`||
|keyboard|`boolean`|`true`|Whether is supports keyboard operation. |keyboard|`boolean`|`true`|Whether is supports keyboard operation.|
|icon-placement|`'left' \| 'right'`|`'left'`|| |icon-placement|`'left' \| 'right'`|`'left'`||
|theme|`'light' \| 'dark'`|`null`|| |theme|`'light' \| 'dark'`|`null`||

View File

@ -9,6 +9,11 @@ basic
#### $NLoadingBar Methods #### $NLoadingBar Methods
|Name|Type|Description| |Name|Type|Description|
|-|-|-| |-|-|-|
|`start`|`() => void`|| |`start`|`(option: LoadingBarOption) => void`||
|`finish`|`() => void`|| |`finish`|`(option: LoadingBarOption) => void`||
|`error`|`() => void`|| |`error`|`(option: LoadingBarOption) => void`||
#### LoadingBarOption Type
|Property|Type|Description|
|-|-|-|
|theme|`'light' \| 'dark'`||

View File

@ -9,6 +9,11 @@ basic
#### $NLoadingBar Methods #### $NLoadingBar Methods
|名称|类型|说明| |名称|类型|说明|
|-|-|-| |-|-|-|
|`start`|`() => void`|| |`start`|`(option: LoadingBarOption) => void`||
|`finish`|`() => void`|| |`finish`|`(option: LoadingBarOption) => void`||
|`error`|`() => void`|| |`error`|`(option: LoadingBarOption) => void`||
#### LoadingBarOption Type
|属性|类型|说明|
|-|-|-|
|theme|`'light' \| 'dark'`||

View File

@ -1,6 +1,6 @@
# Basic # Basic
```html ```html
<div style="overflow: hidden"> <div>
<n-upload <n-upload
action="http://www.mocky.io/v2/5e4bafc63100007100d8b70f" action="http://www.mocky.io/v2/5e4bafc63100007100d8b70f"
:headers="{ :headers="{

View File

@ -1,7 +1,7 @@
# Controlled File List # Controlled File List
Example is only a joke. Example is only a joke.
```html ```html
<div style="overflow: hidden"> <div>
<n-upload <n-upload
action="http://www.mocky.io/v2/5e4bafc63100007100d8b70f" action="http://www.mocky.io/v2/5e4bafc63100007100d8b70f"
:file-list="fileList" :file-list="fileList"

View File

@ -1,6 +1,6 @@
# Default File List # Default File List
```html ```html
<div style="overflow: hidden"> <div>
<n-upload <n-upload
action="http://www.mocky.io/v2/5e4bafc63100007100d8b70f" action="http://www.mocky.io/v2/5e4bafc63100007100d8b70f"
:default-file-list="defaultFileList" :default-file-list="defaultFileList"

View File

@ -1,6 +1,6 @@
# Drag to Upload # Drag to Upload
```html ```html
<div style="overflow: hidden"> <div>
<n-upload action="http://www.mocky.io/v2/5e4bafc63100007100d8b70f"> <n-upload action="http://www.mocky.io/v2/5e4bafc63100007100d8b70f">
<n-upload-dragger> <n-upload-dragger>
<div style="margin-bottom: 12px;"> <div style="margin-bottom: 12px;">

View File

@ -1,7 +1,7 @@
# Change File on Finish # Change File on Finish
You can change file's property when upload finishes. You can change file's property when upload finishes.
```html ```html
<div style="overflow: hidden"> <div>
<n-upload <n-upload
:on-finish="handleFinish" :on-finish="handleFinish"
action="http://www.mocky.io/v2/5e4bafc63100007100d8b70f" action="http://www.mocky.io/v2/5e4bafc63100007100d8b70f"

View File

@ -8,7 +8,7 @@ You can use `submit` method to submit in uncontrolled manner. Also you can do it
> >
Upload File Upload File
</n-button> </n-button>
<div style="overflow: hidden"> <div>
<n-upload <n-upload
@change="handleChange" @change="handleChange"
action="http://www.mocky.io/v2/5e4bafc63100007100d8b70f" action="http://www.mocky.io/v2/5e4bafc63100007100d8b70f"

View File

@ -1,6 +1,6 @@
# 基础用法 # 基础用法
```html ```html
<div style="overflow: hidden"> <div>
<n-upload <n-upload
action="http://www.mocky.io/v2/5e4bafc63100007100d8b70f" action="http://www.mocky.io/v2/5e4bafc63100007100d8b70f"
:headers="{ :headers="{

View File

@ -1,7 +1,7 @@
# 受控的文件列表 # 受控的文件列表
下面的例子纯属玩笑。 下面的例子纯属玩笑。
```html ```html
<div style="overflow: hidden"> <div>
<n-upload <n-upload
action="http://www.mocky.io/v2/5e4bafc63100007100d8b70f" action="http://www.mocky.io/v2/5e4bafc63100007100d8b70f"
:file-list="fileList" :file-list="fileList"

View File

@ -1,6 +1,6 @@
# 默认文件列表 # 默认文件列表
```html ```html
<div style="overflow: hidden"> <div>
<n-upload <n-upload
action="http://www.mocky.io/v2/5e4bafc63100007100d8b70f" action="http://www.mocky.io/v2/5e4bafc63100007100d8b70f"
:default-file-list="defaultFileList" :default-file-list="defaultFileList"

View File

@ -1,6 +1,6 @@
# 拖拽上传 # 拖拽上传
```html ```html
<div style="overflow: hidden"> <div>
<n-upload action="http://www.mocky.io/v2/5e4bafc63100007100d8b70f"> <n-upload action="http://www.mocky.io/v2/5e4bafc63100007100d8b70f">
<n-upload-dragger> <n-upload-dragger>
<div style="margin-bottom: 12px;"> <div style="margin-bottom: 12px;">

View File

@ -1,7 +1,7 @@
# 上传完成的回调 # 上传完成的回调
你可以在回调中修改文件的属性。 你可以在回调中修改文件的属性。
```html ```html
<div style="overflow: hidden"> <div>
<n-upload <n-upload
:on-finish="handleFinish" :on-finish="handleFinish"
action="http://www.mocky.io/v2/5e4bafc63100007100d8b70f" action="http://www.mocky.io/v2/5e4bafc63100007100d8b70f"

View File

@ -8,7 +8,7 @@
> >
上传文件 上传文件
</n-button> </n-button>
<div style="overflow: hidden"> <div>
<n-upload <n-upload
@change="handleChange" @change="handleChange"
action="http://www.mocky.io/v2/5e4bafc63100007100d8b70f" action="http://www.mocky.io/v2/5e4bafc63100007100d8b70f"

View File

@ -22,6 +22,7 @@ import popover from '../documentation/components/popover'
import alert from '../documentation/components/alert' import alert from '../documentation/components/alert'
import datePicker from '../documentation/components/datePicker' import datePicker from '../documentation/components/datePicker'
import inputNumber from '../documentation/components/inputNumber' import inputNumber from '../documentation/components/inputNumber'
import icon from '../documentation/components/icon'
import radio from '../documentation/components/radio' import radio from '../documentation/components/radio'
import form from '../documentation/components/form' import form from '../documentation/components/form'
import tabs from '../documentation/components/tabs' import tabs from '../documentation/components/tabs'
@ -84,10 +85,7 @@ export const childRoutes = [
{ path: '/n-nimbus-service-layout', component: nimbusServiceLayoutDemo }, { path: '/n-nimbus-service-layout', component: nimbusServiceLayoutDemo },
{ path: '/n-layout', component: layout }, { path: '/n-layout', component: layout },
{ path: '/n-gradient-text', component: gradientText }, { path: '/n-gradient-text', component: gradientText },
{ { path: '/n-icon', component: icon },
path: '/n-icon',
component: () => import('../documentation/components/icon')
},
{ path: '/n-checkbox', component: checkbox }, { path: '/n-checkbox', component: checkbox },
{ path: '/n-button', component: button }, { path: '/n-button', component: button },
{ path: '/n-switch', component: nswitch }, { path: '/n-switch', component: nswitch },

View File

@ -32,11 +32,10 @@
<script> <script>
import withapp from '../../_mixins/withapp' import withapp from '../../_mixins/withapp'
import themeable from '../../_mixins/themeable' import themeable from '../../_mixins/themeable'
import asthemecontext from '../../_mixins/asthemecontext'
export default { export default {
name: 'NAvatar', name: 'NAvatar',
mixins: [withapp, themeable, asthemecontext], mixins: [withapp, themeable],
props: { props: {
size: { size: {
type: [String, Number], type: [String, Number],

View File

@ -39,7 +39,6 @@
import getScrollParent from '../../_utils/dom/getScrollParent' import getScrollParent from '../../_utils/dom/getScrollParent'
import withapp from '../../_mixins/withapp' import withapp from '../../_mixins/withapp'
import themeable from '../../_mixins/themeable' import themeable from '../../_mixins/themeable'
import asthemecontext from '../../_mixins/asthemecontext'
import NBasePortal from '../../_base/Portal' import NBasePortal from '../../_base/Portal'
import formatLength from '../../_utils/css/formatLength' import formatLength from '../../_utils/css/formatLength'
@ -48,7 +47,7 @@ export default {
components: { components: {
NBasePortal NBasePortal
}, },
mixins: [withapp, themeable, asthemecontext], mixins: [withapp, themeable],
props: { props: {
right: { right: {
type: [Number, String], type: [Number, String],

View File

@ -34,7 +34,6 @@
<script> <script>
import withapp from '../../_mixins/withapp' import withapp from '../../_mixins/withapp'
import themeable from '../../_mixins/themeable' import themeable from '../../_mixins/themeable'
import asthemecontext from '../../_mixins/asthemecontext'
import asformitem from '../../_mixins/asformitem' import asformitem from '../../_mixins/asformitem'
import CheckMark from './CheckMark' import CheckMark from './CheckMark'
import LineMark from './LineMark' import LineMark from './LineMark'
@ -54,7 +53,6 @@ export default {
mixins: [ mixins: [
withapp, withapp,
themeable, themeable,
asthemecontext,
asformitem( asformitem(
{ {
change: 'change', change: 'change',

View File

@ -1,7 +1,6 @@
<script> <script>
import withapp from '../../_mixins/withapp' import withapp from '../../_mixins/withapp'
import themeable from '../../_mixins/themeable' import themeable from '../../_mixins/themeable'
import asthemecontext from '../../_mixins/asthemecontext'
import asformitem from '../../_mixins/asformitem' import asformitem from '../../_mixins/asformitem'
export default { export default {
@ -9,7 +8,6 @@ export default {
mixins: [ mixins: [
withapp, withapp,
themeable, themeable,
asthemecontext,
asformitem() asformitem()
], ],
provide () { provide () {

View File

@ -1,12 +1,11 @@
<script> <script>
import withapp from '../../_mixins/withapp' import withapp from '../../_mixins/withapp'
import themeable from '../../_mixins/themeable' import themeable from '../../_mixins/themeable'
import asthemecontext from '../../_mixins/asthemecontext'
import styleScheme from '../../_utils/naive/styleScheme' import styleScheme from '../../_utils/naive/styleScheme'
export default { export default {
name: 'NElement', name: 'NElement',
mixins: [withapp, themeable, asthemecontext], mixins: [withapp, themeable],
props: { props: {
as: { as: {
type: String, type: String,

View File

@ -10,7 +10,7 @@
v-show="!enter || status === 'starting'" v-show="!enter || status === 'starting'"
class="n-loading-bar-container" class="n-loading-bar-container"
:class="{ :class="{
[`n-${theme}-theme`]: theme [`n-${syntheticTheme}-theme`]: syntheticTheme
}" }"
> >
<div <div
@ -37,10 +37,16 @@ export default {
status: null, status: null,
finishCallback: null, finishCallback: null,
enter: false, enter: false,
inheritedTheme: null,
theme: null, theme: null,
activeAction: null activeAction: null
} }
}, },
computed: {
syntheticTheme () {
return this.theme || this.inheritedTheme
}
},
methods: { methods: {
handleAfterEnter () { handleAfterEnter () {
this.enter = true this.enter = true

View File

@ -6,42 +6,45 @@ export default {
loadingBarInstance: null, loadingBarInstance: null,
finishCallback () { finishCallback () {
if (this.loadingBarInstance) { if (this.loadingBarInstance) {
// document.body.removeChild(this.loadingBarInstance.$el)
this.loadingBarInstance.$el.remove() this.loadingBarInstance.$el.remove()
this.loadingBarInstance.$destroy() this.loadingBarInstance.$destroy()
this.loadingBarInstance = null this.loadingBarInstance = null
} }
}, },
start () { start ({ theme } = { theme: null }) {
if (!this.loadingBarInstance) { if (!this.loadingBarInstance) {
this.loadingBarInstance = new this.Vue(NLoadingBar).$mount() this.loadingBarInstance = new this.Vue(NLoadingBar).$mount()
document.body.appendChild(this.loadingBarInstance.$el) document.body.appendChild(this.loadingBarInstance.$el)
} }
this.loadingBarInstance.theme = this.theme this.loadingBarInstance.inheritedTheme = this.theme
this.loadingBarInstance.theme = theme
this.loadingBarInstance.start() this.loadingBarInstance.start()
}, },
error () { error ({ theme } = { theme: null }) {
if (!this.loadingBarInstance) { if (!this.loadingBarInstance) {
this.loadingBarInstance = new this.Vue(NLoadingBar).$mount() this.loadingBarInstance = new this.Vue(NLoadingBar).$mount()
document.body.appendChild(this.loadingBarInstance.$el) document.body.appendChild(this.loadingBarInstance.$el)
} }
this.loadingBarInstance.theme = this.theme this.loadingBarInstance.inheritedTheme = this.theme
this.loadingBarInstance.theme = theme
this.loadingBarInstance.error(this.finishCallback.bind(this)) this.loadingBarInstance.error(this.finishCallback.bind(this))
}, },
finish () { finish ({ theme } = { theme: null }) {
if (!this.loadingBarInstance) { if (!this.loadingBarInstance) {
this.loadingBarInstance = new this.Vue(NLoadingBar).$mount() this.loadingBarInstance = new this.Vue(NLoadingBar).$mount()
document.body.appendChild(this.loadingBarInstance.$el) document.body.appendChild(this.loadingBarInstance.$el)
} }
this.loadingBarInstance.theme = this.theme this.loadingBarInstance.inheritedTheme = this.theme
this.loadingBarInstance.theme = theme
this.loadingBarInstance.finish(this.finishCallback.bind(this)) this.loadingBarInstance.finish(this.finishCallback.bind(this))
}, },
update (percent) { update ({ percent, theme } = { theme: null }) {
if (!this.loadingBarInstance) { if (!this.loadingBarInstance) {
this.loadingBarInstance = new this.Vue(NLoadingBar).$mount() this.loadingBarInstance = new this.Vue(NLoadingBar).$mount()
document.body.appendChild(this.loadingBarInstance.$el) document.body.appendChild(this.loadingBarInstance.$el)
} }
this.loadingBarInstance.theme = this.theme this.loadingBarInstance.inheritedTheme = this.theme
this.loadingBarInstance.theme = theme
this.loadingBarInstance.update(percent) this.loadingBarInstance.update(percent)
} }
} }

View File

@ -57,7 +57,6 @@
<script> <script>
import themeable from '../../_mixins/themeable' import themeable from '../../_mixins/themeable'
import asthemecontext from '../../_mixins/asthemecontext'
import NIcon from '../../Icon' import NIcon from '../../Icon'
import mdClose from '../../_icons/md-close' import mdClose from '../../_icons/md-close'
import mdCheckmarkCircle from '../../_icons/md-checkmark-circle' import mdCheckmarkCircle from '../../_icons/md-checkmark-circle'
@ -76,7 +75,7 @@ export default {
mdInformationCircle, mdInformationCircle,
mdCloseCircle mdCloseCircle
}, },
mixins: [ themeable, asthemecontext ], mixins: [ themeable ],
props: { props: {
closable: { closable: {
type: Boolean, type: Boolean,

View File

@ -207,7 +207,7 @@ zindex 的问题解决了,虽然很简单,在 static 元素上设定 zindex
72. <del>Input Group</del> 72. <del>Input Group</del>
73. <del>Dropdown API 修改为 label + value目前为止 UI 并没有出现过 key不能只为了它搞特殊value 可以key 甚至会另有作用,现在占用实际是个危险的事情</del> 73. <del>Dropdown API 修改为 label + value目前为止 UI 并没有出现过 key不能只为了它搞特殊value 可以key 甚至会另有作用,现在占用实际是个危险的事情</del>
74. card slot 74. card slot
75. table fixed computed left right 75. <del>table fixed computed left right</del>
76. gradient text 的切换能解决? 76. gradient text 的切换能解决?
77. <del>Auto Complete Group</del> 77. <del>Auto Complete Group</del>
78. <del>select add tag</del> 78. <del>select add tag</del>
@ -217,6 +217,7 @@ zindex 的问题解决了,虽然很简单,在 static 元素上设定 zindex
82. Form Item 不返回 true 的时候... 错误信息不会消失,这似乎不太合理? 82. Form Item 不返回 true 的时候... 错误信息不会消失,这似乎不太合理?
83. Form Item 应该和 Input Group 也契合良好 83. Form Item 应该和 Input Group 也契合良好
84. Notification 主题切换需要工作良好 84. Notification 主题切换需要工作良好
85. Notification 这个东西很特殊...
``` ```
Done Done