taolin/docs_vue2
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

initial

Browse Source
This commit is contained in:
陶林 2022-06-14 09:05:00 +08:00
parent d4ecca4b32
commit bd0641fefb
421 changed files with 20350 additions and 40204 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
.idea/.gitignore vendored Normal file
View File

@ -0,0 +1,5 @@
# Default ignored files
/shelf/
/workspace.xml
# Editor-based HTTP Client requests
/httpRequests/

41
.idea/codeStyles/Project.xml Normal file
View File

@ -0,0 +1,41 @@
<component name="ProjectCodeStyleConfiguration">
<code_scheme name="Project" version="173">
<HTMLCodeStyleSettings>
<option name="HTML_ENFORCE_QUOTES" value="true" />
<option name="HTML_NEWLINE_AFTER_LAST_ATTRIBUTE" value="When multiline" />
</HTMLCodeStyleSettings>
<JSCodeStyleSettings version="0">
<option name="USE_SEMICOLON_AFTER_STATEMENT" value="false" />
<option name="FORCE_SEMICOLON_STYLE" value="true" />
<option name="SPACE_BEFORE_GENERATOR_MULT" value="true" />
<option name="USE_DOUBLE_QUOTES" value="false" />
<option name="FORCE_QUOTE_STYlE" value="true" />
<option name="SPACES_WITHIN_OBJECT_LITERAL_BRACES" value="true" />
<option name="SPACES_WITHIN_IMPORTS" value="true" />
</JSCodeStyleSettings>
<editorconfig>
<option name="ENABLED" value="false" />
</editorconfig>
<codeStyleSettings language="HTML">
<indentOptions>
<option name="INDENT_SIZE" value="0" />
<option name="CONTINUATION_INDENT_SIZE" value="2" />
</indentOptions>
</codeStyleSettings>
<codeStyleSettings language="JavaScript">
<option name="BLOCK_COMMENT_ADD_SPACE" value="true" />
<option name="KEEP_BLANK_LINES_IN_CODE" value="1" />
<option name="ALIGN_MULTILINE_PARAMETERS" value="false" />
<option name="ALIGN_MULTILINE_FOR" value="false" />
<option name="SPACE_BEFORE_METHOD_PARENTHESES" value="true" />
<option name="IF_BRACE_FORCE" value="1" />
<option name="DOWHILE_BRACE_FORCE" value="1" />
<option name="WHILE_BRACE_FORCE" value="1" />
<option name="FOR_BRACE_FORCE" value="1" />
<indentOptions>
<option name="INDENT_SIZE" value="2" />
<option name="CONTINUATION_INDENT_SIZE" value="2" />
</indentOptions>
</codeStyleSettings>
</code_scheme>
</component>

5
.idea/codeStyles/codeStyleConfig.xml Normal file
View File

@ -0,0 +1,5 @@
<component name="ProjectCodeStyleConfiguration">
<state>
<option name="USE_PER_PROJECT_SETTINGS" value="true" />
</state>
</component>

7
.idea/inspectionProfiles/Project_Default.xml Normal file
View File

@ -0,0 +1,7 @@
<component name="InspectionProjectProfileManager">
<profile version="1.0">
<option name="myName" value="Project Default" />
<inspection_tool class="Eslint" enabled="true" level="WARNING" enabled_by_default="true" />
<inspection_tool class="Stylelint" enabled="true" level="ERROR" enabled_by_default="true" />
</profile>
</component>

8
.idea/modules.xml Normal file
View File

@ -0,0 +1,8 @@
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="ProjectModuleManager">
<modules>
<module fileurl="file://$PROJECT_DIR$/.idea/vue2.iml" filepath="$PROJECT_DIR$/.idea/vue2.iml" />
</modules>
</component>
</project>

6
.idea/vcs.xml Normal file
View File

@ -0,0 +1,6 @@
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="VcsDirectoryMappings">
<mapping directory="$PROJECT_DIR$" vcs="Git" />
</component>
</project>

12
.idea/vue2.iml Normal file
View File

@ -0,0 +1,12 @@
<?xml version="1.0" encoding="UTF-8"?>
<module type="WEB_MODULE" version="4">
<component name="NewModuleRootManager">
<content url="file://$MODULE_DIR$">
<excludeFolder url="file://$MODULE_DIR$/temp" />
<excludeFolder url="file://$MODULE_DIR$/.tmp" />
<excludeFolder url="file://$MODULE_DIR$/tmp" />
</content>
<orderEntry type="inheritedJdk" />
<orderEntry type="sourceFolder" forTests="false" />
</component>
</module>

21
LICENSE
View File

@ -1,21 +0,0 @@
MIT License
Copyright (c) 2020 Baidu EFE team
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

73
README.md
View File

@ -1,6 +1,4 @@
# veui/docs # 文档服务
> VEUI 文档。
## 本地安装 ## 本地安装
@ -11,8 +9,6 @@ npm i
npm run dev npm run dev
``` ```
后在浏览访问 `http://localhost:3000` 即可。
## 文档编写 ## 文档编写
开发相关文档位于 `one/docs/development` 下。文档目录结构与网站的目录结构一致，新建 `.md` 文件后需要在 `one/docs/nav.json` 中新建相应的条目，作为目录配置。添加 `sub: true` 将缩进一个层级。 开发相关文档位于 `one/docs/development` 下。文档目录结构与网站的目录结构一致，新建 `.md` 文件后需要在 `one/docs/nav.json` 中新建相应的条目，作为目录配置。添加 `sub: true` 将缩进一个层级。
@ -55,70 +51,5 @@ npm run dev
路径为 demo 文件相对于当前文档文件的路径。Demo 文件是一个 Vue 单文件组件，最后会将代码展示到文档中。可以编写多个 `<style>` 块，如果带上自定义的 `docs` 属性，则会从文档的源码中去除，用来写一些不想输出到文档里的样式（建议文档里只展示和演示的用法相关的样式代码）。 路径为 demo 文件相对于当前文档文件的路径。Demo 文件是一个 Vue 单文件组件，最后会将代码展示到文档中。可以编写多个 `<style>` 块，如果带上自定义的 `docs` 属性，则会从文档的源码中去除，用来写一些不想输出到文档里的样式（建议文档里只展示和演示的用法相关的样式代码）。
可以为 demo 书写内嵌的说明，方法为在 demo 文件中增加 `<docs>` 自定义块，比如： 可以为 demo 书写内嵌的说明，方法为在 demo 文件中增加 `<docs>` 自定义块
```html
<docs>
具体内容请参考项目 [repo](https://github.com/ecomfe/veui)。
</docs>
```
### 扩展 Markdown 语法
#### 自定义块
因为 Markdown 原生不支持对特定区块设定自定义的 `class`，直接书写 HTML 标签的话内部的内容就无法直接写 Markdown 了。故扩展了如下自定义块的语法：
```md
:::tip
这是一条小贴士。
:::
```
将会渲染为：
```html
<div class="tip custom-block">这是一条小贴士。</div>
```
目前支持的状态类型有 `tip`/`warning`/`alert`。
标注 `v-model` 及 `.sync` 的属性/事件请使用如下格式：
```md
:::badges
`v-model`
:::
```
#### 内联引用
Markdown 中书写表格比较麻烦，如果想在里面嵌入格式比较复杂的内容，原生语法 + GFM 扩展都是不够用的。这里提供了一个定义可被引用内容+将对应内容块内联到文档内任意位置的语法。
定义可被引用的内容：
```md
^^^ui
内容
^^^
```
引用方式和脚注的引用方式相同，只是会将内容直接嵌入当前位置：
```md
[^ui]
```
#### 可折叠区块
有时内容过长不利于阅读全文，故扩展了如下语法支持默认收起的区块，可点击展开。
```md
+++摘要内容
详细内容
+++
```
## 文案规范
参见[《中文文案排版指北》](https://github.com/sparanoid/chinese-copywriting-guidelines)。

8
assets/README.md
View File

@ -1,8 +0,0 @@
# ASSETS
This directory contains your un-compiled assets such as LESS, SASS, or JavaScript.
More information about the usage of this directory in the documentation:
https://nuxtjs.org/guide/assets#webpacked
**This directory is not required, you can delete it if you don't want to use it.**

524
components/OneDemo.vue
View File

@ -1,351 +1,343 @@
<template> <template>
<article <article class="one-demo" :class="{ codeExpanded }">
class="one-demo" <section class="demo">
:class="{ codeExpanded }" <browser-window
> v-if="browser"
<section class="demo"> :url="browser"
<browser-window width="calc(100% - 40px)"
v-if="browser" height="400px"
:url="browser"
width="calc(100% - 40px)"
height="400px"
>
<one-iframe global-style="body { margin: 0 !important; } .veui-layout { min-width: auto !important; }">
<slot/>
</one-iframe>
</browser-window>
<slot v-else/>
</section>
<section
v-if="$slots.desc"
class="desc"
>
<slot name="desc"/>
</section>
<section class="actions">
<veui-button
v-tooltip="t('playInCodeSandbox')"
ui="icon"
@click="play('CodeSandbox')"
>
<veui-icon name="one-demo-codesandbox"/>
</veui-button>
<veui-button
v-tooltip="t('playInStackBlitz')"
ui="icon"
@click="play('StackBlitz')"
>
<veui-icon name="one-demo-stackblitz"/>
</veui-button>
<veui-button
v-tooltip="t(codeExpanded ? 'hideCode' : 'showCode')"
ui="icon"
@click="codeExpanded = !codeExpanded"
>
<veui-icon
scale="1.2"
:name="codeExpanded ? 'one-demo-code-off' : 'one-demo-code'"
/>
</veui-button>
<veui-button
v-tooltip="t(editing ? 'closeEditor' : 'openEditor')"
class="toggle-editor"
ui="text"
@click="editing = !editing"
>
Live
</veui-button>
<one-edit-link
class="edit"
variant="quiet"
type="demo"
:path="path"
/>
</section>
<section
v-if="$slots.source"
ref="source"
class="source"
:style="{ height: codeExpanded ? `${sourceHeight || 0}px` : '0' }"
>
<div class="source-toolbar">
<veui-button
v-tooltip="t('@onelive.copyCode')"
ui="icon reverse"
@click="copy"
> >
<veui-icon name="copy"/> <one-iframe
global-style="body { margin: 0 !important; } .veui-layout { min-width: auto !important; }"
>
<slot />
</one-iframe>
</browser-window>
<slot v-else />
</section>
<section v-if="$slots.desc" class="desc">
<slot name="desc" />
</section>
<section class="actions">
<veui-button
v-tooltip="t(codeExpanded ? 'hideCode' : 'showCode')"
ui="icon"
@click="codeExpanded = !codeExpanded"
>
<veui-icon
scale="1.2"
:name="codeExpanded ? 'one-demo-code-off' : 'one-demo-code'"
/>
</veui-button> </veui-button>
</div> <veui-button
<slot name="source"/> v-tooltip="t(editing ? 'closeEditor' : 'openEditor')"
</section> class="toggle-editor"
<transition name="editor"> ui="text"
<one-repl @click="editing = !editing"
v-if="editing" >
class="one-demo-editor" Live
:class="{ </veui-button>
'one-demo-editor-shrink': !editorExpanded <!-- 禁用跳转Github -->
}" <!-- <one-edit-link class="edit" variant="quiet" type="demo" :path="path" /> -->
:code="code" </section>
:expanded="editorExpanded" <section
:browser="!!browser" v-if="$slots.source"
@close="handleEditorClose" ref="source"
@toggle="handleEditorToggle" class="source"
/> :style="{ height: codeExpanded ? `${sourceHeight || 0}px` : '0' }"
</transition> >
</article> <div class="source-toolbar">
<veui-button
v-tooltip="t('@onelive.copyCode')"
ui="icon reverse"
@click="copy"
>
<veui-icon name="copy" />
</veui-button>
</div>
<slot name="source" />
</section>
<transition name="editor">
<one-repl
v-if="editing"
class="one-demo-editor"
:class="{
'one-demo-editor-shrink': !editorExpanded,
}"
:code="code"
:expanded="editorExpanded"
:browser="!!browser"
@close="handleEditorClose"
@toggle="handleEditorToggle"
/>
</transition>
</article>
</template> </template>
<script> <script>
import Vue from 'vue' import Vue from "vue";
import { Button, Icon } from 'veui' import { Button, Icon } from "veui";
import tooltip from 'veui/directives/tooltip' import tooltip from "veui/directives/tooltip";
import modal from 'veui/managers/modal' import modal from "veui/managers/modal";
import i18n from 'veui/mixins/i18n' import i18n from "veui/mixins/i18n";
import toast from 'veui/plugins/toast' import toast from "veui/plugins/toast";
import { BrowserWindow } from 'vue-windows' import { BrowserWindow } from "vue-windows";
import { getLocale } from '../common/i18n' import { getLocale } from "../common/i18n";
import { play } from '../common/play' import { play } from "../common/play";
import OneIframe from './OneIframe' import OneIframe from "./OneIframe";
import OneEditLink from './OneEditLink' import OneEditLink from "./OneEditLink";
import OneRepl from './OneRepl' import OneRepl from "./OneRepl";
import 'veui-theme-dls-icons/copy' import "veui-theme-dls-icons/copy";
Vue.use(toast) Vue.use(toast);
export default { export default {
name: 'one-demo', name: "one-demo",
directives: { directives: {
tooltip tooltip,
}, },
components: { components: {
'veui-button': Button, "veui-button": Button,
'veui-icon': Icon, "veui-icon": Icon,
BrowserWindow, BrowserWindow,
OneIframe, OneIframe,
OneEditLink, OneEditLink,
OneRepl OneRepl,
}, },
mixins: [i18n], mixins: [i18n],
props: { props: {
browser: String, browser: String,
path: String path: String,
}, },
data () { data() {
return { return {
code: '', code: "",
sourceHeight: 0, sourceHeight: 0,
codeExpanded: false, codeExpanded: false,
editing: false, editing: false,
editorExpanded: true editorExpanded: true,
} };
}, },
computed: { computed: {
lock () { lock() {
return this.editing && this.editorExpanded return this.editing && this.editorExpanded;
} },
}, },
watch: { watch: {
lock (value) { lock(value) {
if (value) { if (value) {
modal.open() modal.open();
} else { } else {
modal.close() modal.close();
} }
} },
}, },
mounted () { mounted() {
let source = this.$refs.source let source = this.$refs.source;
let style = source.style let style = source.style;
style.height = '' style.height = "";
style.height = source.offsetHeight style.height = source.offsetHeight;
this.sourceHeight = source.offsetHeight this.sourceHeight = source.offsetHeight;
style.height = '0' style.height = "0";
this.code = this.$refs.source?.querySelector('pre')?.textContent || '' this.code = this.$refs.source?.querySelector("pre")?.textContent || "";
}, },
destroyed () { destroyed() {
modal.close() modal.close();
}, },
methods: { methods: {
play (vendor) { play(vendor) {
let locale = getLocale(this.$route.path) let locale = getLocale(this.$route.path);
play(this.$refs.source.textContent, { locale, vendor }) play(this.$refs.source.textContent, { locale, vendor });
}, },
async copy () { async copy() {
try { try {
await navigator.clipboard.writeText(this.code) await navigator.clipboard.writeText(this.code);
this.$toast.success(this.t('@onelive.copySuccess')) this.$toast.success(this.t("@onelive.copySuccess"));
} catch (e) { } catch (e) {
this.$toast.error(this.t('@onelive.copyFailed')) this.$toast.error(this.t("@onelive.copyFailed"));
} }
}, },
handleEditorClose () { handleEditorClose() {
this.editing = false this.editing = false;
}, },
handleEditorToggle (val) { handleEditorToggle(val) {
this.editorExpanded = val this.editorExpanded = val;
} },
} },
} };
Icon.register({ Icon.register({
'one-demo-code': { "one-demo-code": {
width: 24, width: 24,
height: 24, height: 24,
d: d: "M9.4 16.6L4.8 12l4.6-4.6L8 6l-6 6l6 6l1.4-1.4zm5.2 0l4.6-4.6l-4.6-4.6L16 6l6 6l-6 6l-1.4-1.4z",
'M9.4 16.6L4.8 12l4.6-4.6L8 6l-6 6l6 6l1.4-1.4zm5.2 0l4.6-4.6l-4.6-4.6L16 6l6 6l-6 6l-1.4-1.4z'
}, },
'one-demo-code-off': { "one-demo-code-off": {
width: 24, width: 24,
height: 24, height: 24,
d: d: "M19.17 12l-4.58-4.59L16 6l6 6l-3.59 3.59L17 14.17L19.17 12zM1.39 4.22l4.19 4.19L2 12l6 6l1.41-1.41L4.83 12L7 9.83l12.78 12.78l1.41-1.41L2.81 2.81L1.39 4.22z",
'M19.17 12l-4.58-4.59L16 6l6 6l-3.59 3.59L17 14.17L19.17 12zM1.39 4.22l4.19 4.19L2 12l6 6l1.41-1.41L4.83 12L7 9.83l12.78 12.78l1.41-1.41L2.81 2.81L1.39 4.22z'
}, },
'one-demo-codesandbox': { "one-demo-codesandbox": {
width: 32, width: 32,
height: 32, height: 32,
d: d: "M2.667 8l13.938-8l13.943 8l.12 15.932L16.605 32L2.667 24zm2.786 3.307v6.344l4.458 2.479v4.688l5.297 3.063V16.85zm22.318 0l-9.755 5.542V27.88l5.292-3.063v-4.682l4.464-2.484zM6.844 8.802l9.74 5.526l9.76-5.573l-5.161-2.932l-4.547 2.594l-4.573-2.625z",
'M2.667 8l13.938-8l13.943 8l.12 15.932L16.605 32L2.667 24zm2.786 3.307v6.344l4.458 2.479v4.688l5.297 3.063V16.85zm22.318 0l-9.755 5.542V27.88l5.292-3.063v-4.682l4.464-2.484zM6.844 8.802l9.74 5.526l9.76-5.573l-5.161-2.932l-4.547 2.594l-4.573-2.625z'
}, },
'one-demo-stackblitz': { "one-demo-stackblitz": {
width: 28, width: 28,
height: 28, height: 28,
d: d: "M12.747 16.273h-7.46L18.925 1.5l-3.671 10.227h7.46L9.075 26.5l3.671-10.227z",
'M12.747 16.273h-7.46L18.925 1.5l-3.671 10.227h7.46L9.075 26.5l3.671-10.227z' },
} });
})
</script> </script>
<style src="vue-windows/dist/vue-windows.css"></style> <style src="vue-windows/dist/vue-windows.css"></style>
<style lang="stylus" scoped> <style lang="stylus" scoped>
.one-demo .one-demo {
overflow hidden overflow: hidden;
}
.demo .demo {
border 1px solid #eee border: 1px solid #eee;
border-top-left-radius 4px border-top-left-radius: 4px;
border-top-right-radius 4px border-top-right-radius: 4px;
padding 30px padding: 30px;
& >>> .style-module_body__14MV- & >>> .style-module_body__14MV- {
overflow hidden overflow: hidden;
transform translate(0, 0) transform: translate(0, 0);
padding 0 padding: 0;
}
}
.desc .desc {
border 1px solid #eee border: 1px solid #eee;
padding 18px 20px padding: 18px 20px;
background-color #fcfcfc background-color: #fcfcfc;
}
.source .source {
position relative position: relative;
overflow hidden overflow: hidden;
transition height 0.3s transition: height 0.3s;
& >>> pre & >>> pre {
margin-top 0 margin-top: 0;
margin-bottom 0 margin-bottom: 0;
border-top-right-radius 0 border-top-right-radius: 0;
border-top-left-radius 0 border-top-left-radius: 0;
}
}
.desc .desc, .source >>> pre, .actions {
.source >>> pre margin-top: -1px;
.actions }
margin-top -1px
.actions .actions {
position relative position: relative;
display flex display: flex;
justify-content center justify-content: center;
align-items center align-items: center;
line-height 2 line-height: 2;
width 100% width: 100%;
height 48px height: 48px;
border 1px solid #eee border: 1px solid #eee;
border-bottom-left-radius 4px border-bottom-left-radius: 4px;
border-bottom-right-radius 4px border-bottom-right-radius: 4px;
background-color #fff background-color: #fff;
transition background-color 0.3s transition: background-color 0.3s;
outline none outline: none;
.codeExpanded & .codeExpanded & {
border-radius 0 border-radius: 0;
}
.veui-button:not(.toggle-editor) .veui-button:not(.toggle-editor) {
font-size 18px font-size: 18px;
}
.veui-button + .veui-button .veui-button + .veui-button {
margin-left 12px margin-left: 12px;
}
}
.edit .edit {
position absolute position: absolute;
right 30px right: 30px;
top 50% top: 50%;
transform translateY(-50%) transform: translateY(-50%);
font-size 12px font-size: 12px;
}
.one-demo-editor .one-demo-editor {
position fixed position: fixed;
top 0 top: 0;
left 0 left: 0;
right 0 right: 0;
bottom 0 bottom: 0;
z-index 10 z-index: 10;
background-color #fff background-color: #fff;
transition bottom 0.1s, box-shadow 0.2s transition: bottom 0.1s, box-shadow 0.2s;
&-shrink &-shrink {
bottom 50vh bottom: 50vh;
box-shadow 0 0 4px #0006 box-shadow: 0 0 4px #0006;
}
}
.editor-enter-active .editor-enter-active, .editor-leave-active {
.editor-leave-active transform-origin: 50% 50%;
transform-origin 50% 50% transition: all 0.3s;
transition all 0.3s }
.editor-enter .editor-enter, .editor-leave-to {
.editor-leave-to opacity: 0;
opacity 0 transform: scale(0.99) translateY(3px);
transform scale(0.99) translateY(3px) }
.toggle-editor .toggle-editor {
height 20px height: 20px;
padding 0 3px padding: 0 3px;
font-weight 600 font-weight: 600;
&::after &::after {
content none !important content: none !important;
}
& &, &:hover, &[data-focus-visible-added], &:active {
&:hover border: 1.5px solid currentColor !important;
&[data-focus-visible-added] }
&:active
border 1.5px solid currentColor !important
&[data-focus-visible-added] &[data-focus-visible-added] {
border-color #0052cc !important border-color: #0052cc !important;
box-shadow 0 0 0 2px rgba(0, 102, 255, 0.2) !important box-shadow: 0 0 0 2px rgba(0, 102, 255, 0.2) !important;
}
}
.source-toolbar .source-toolbar {
position absolute position: absolute;
top 12px top: 12px;
right 28px right: 28px;
display flex display: flex;
align-items center align-items: center;
}
.veui-button[ui~="icon"][ui~="reverse"] .veui-button[ui~='icon'][ui~='reverse'] {
color #ebedf5 color: #ebedf5;
&:hover &:hover, &[data-focus-visible-added] {
&[data-focus-visible-added] color: #f6f7fa;
color #f6f7fa }
&:active &:active {
color #fff color: #fff;
}
}
@media (max-width 480px) @media (max-width: 480px) {
.toggle-editor .toggle-editor {
display none display: none;
}
}
</style> </style>

165
components/OneEditLink.vue
View File

@ -1,110 +1,121 @@
<template> <template>
<a <a
class="one-edit-link" class="one-edit-link"
:class=" :class="
variant variant
? { ? {
[`one-edit-link-${variant}`]: true, [`one-edit-link-${variant}`]: true,
} }
: {} : {}
" "
:href="href" :href="href"
target="_blank" target="_blank"
rel="noopener" rel="noopener"
> >
<slot :label="t('editOnGitHub')"> <slot :label="t('editOnGitHub')">
<span class="full">{{ t('editOnGitHub', { item: t(type) }) }}</span> <span class="full">{{ t("editOnGitHub", { item: t(type) }) }}</span>
<span class="short">{{ t('edit') }}</span> <span class="short">{{ t("edit") }}</span>
<veui-icon <veui-icon class="icon" name="external-link" />
class="icon" </slot>
name="external-link" </a>
/>
</slot>
</a>
</template> </template>
<script> <script>
import { Icon } from 'veui' import { Icon } from "veui";
import i18n from 'veui/mixins/i18n' import i18n from "veui/mixins/i18n";
import 'veui-theme-dls-icons/external-link' import "veui-theme-dls-icons/external-link";
import Config from "./../env";
const BASE_URL = 'https://github.com/ecomfe/veui-docs/edit/master/one/docs/' const BASE_URL = Config.github_repo;
export default { export default {
name: 'one-edit-link', name: "one-edit-link",
components: { components: {
'veui-icon': Icon "veui-icon": Icon,
}, },
mixins: [i18n], mixins: [i18n],
props: { props: {
variant: { variant: {
type: String, type: String,
default: 'default' default: "default",
}, },
path: String, path: String,
type: { type: {
type: String, type: String,
default: 'page' default: "page",
} },
}, },
computed: { computed: {
href () { href() {
return `${BASE_URL}${this.path}` return `${BASE_URL}${this.path}`;
} },
} },
} };
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
.one-edit-link .one-edit-link {
display inline-flex display: inline-flex;
align-items center align-items: center;
text-decoration none text-decoration: none;
transition background 0.2s, color 0.2s, border-color 0.2s transition: background 0.2s, color 0.2s, border-color 0.2s;
.icon .icon {
margin-left 4px margin-left: 4px;
}
&-default &-default {
display inline-flex display: inline-flex;
align-items center align-items: center;
padding 4px 6px padding: 4px 6px;
border-radius 4px border-radius: 4px;
background-color #fff background-color: #fff;
color #848b99 color: #848b99;
border 1px solid #e2e6f0 border: 1px solid #e2e6f0;
&:hover &:hover, &[data-focus-visible-added] {
&[data-focus-visible-added] background-color: #f6f7fa;
background-color #f6f7fa color: #282c33;
color #282c33 border-color: #d3d9e6;
border-color #d3d9e6 }
&:active &:active {
background-color #e2e6f0 background-color: #e2e6f0;
color #000 color: #000;
border-color #d3d9e6 border-color: #d3d9e6;
}
}
&-quiet &-quiet {
color #282c33 color: #282c33;
&:hover &:hover, &[data-focus-visible-added] {
&[data-focus-visible-added] color: #545b66;
color #545b66 }
&:active &:active {
color #000 color: #000;
}
.full .full {
display inline display: inline;
}
}
.short .short {
display none display: none;
}
}
@media (max-width 480px) @media (max-width: 480px) {
.one-edit-link-quiet .one-edit-link-quiet {
.full .full {
display none display: none;
.short }
display inline
.short {
display: inline;
}
}
}
</style> </style>

253
components/OneFooter.vue
View File

@ -1,203 +1,190 @@
<template> <template>
<footer class="one-footer"> <footer class="one-footer">
<nav <p class="copyright"></p>
class="links" </footer>
:class="{ empty: single }"
>
<nuxt-link
v-if="prev && level > 0"
key="prev"
class="prev"
:to="prev.to"
>
{{ prev.title }}
</nuxt-link>
<nuxt-link
v-if="next && level > 0"
key="next"
class="next"
:to="next.to"
>
{{ next.title }}
</nuxt-link>
</nav>
<p class="copyright">
© Baidu, Inc. {{ year }}
</p>
</footer>
</template> </template>
<script> <script>
import { compact, find, findIndex } from 'lodash' import { compact, find, findIndex } from "lodash";
import i18n from '../common/i18n' import i18n from "../common/i18n";
export default { export default {
name: 'one-footer', name: "one-footer",
mixins: [i18n], mixins: [i18n],
props: { props: {
nav: { nav: {
type: Array, type: Array,
default () { default() {
return [] return [];
} },
} },
}, },
data () { data() {
return { return {
year: new Date().getFullYear() year: new Date().getFullYear(),
} };
}, },
computed: { computed: {
links () { links() {
let segments = compact(this.canonicalPath.split('/')) let segments = compact(this.canonicalPath.split("/"));
return getLinks(this.nav, segments) return getLinks(this.nav, segments);
}, },
level () { level() {
return this.links ? this.links.level : 0 return this.links ? this.links.level : 0;
}, },
base () { base() {
return this.links ? this.links.base : null return this.links ? this.links.base : null;
}, },
prev () { prev() {
return this.resolve(this.links ? this.links.prev : null) return this.resolve(this.links ? this.links.prev : null);
}, },
next () { next() {
return this.resolve(this.links ? this.links.next : null) return this.resolve(this.links ? this.links.next : null);
},
single() {
return (!this.prev && !this.next) || this.level < 1;
}, },
single () {
return (!this.prev && !this.next) || this.level < 1
}
}, },
watch: { watch: {
single: { single: {
handler (val) { handler(val) {
this.$emit('update', { this.$emit("update", {
hasLinks: !val hasLinks: !val,
}) });
}, },
immediate: true immediate: true,
} },
}, },
methods: { methods: {
resolve (link) { resolve(link) {
let { slug, title, link: lk } = link || {} let { slug, title, link: lk } = link || {};
if (typeof slug !== 'string' || lk === false) { if (typeof slug !== "string" || lk === false) {
return null return null;
} }
let base = this.base let base = this.base;
return { return {
title, title,
to: this.getLocalePath(slug ? `${base}/${slug}` : base) to: this.getLocalePath(slug ? `${base}/${slug}` : base),
} };
} },
} },
} };
function findSibling (items, start, forward) { function findSibling(items, start, forward) {
if ((start === 0 && !forward) || (start === items.length - 1 && forward)) { if ((start === 0 && !forward) || (start === items.length - 1 && forward)) {
return null return null;
} }
let candidates = forward let candidates = forward
? items.slice(start + 1) ? items.slice(start + 1)
: items.slice(0, start).reverse() : items.slice(0, start).reverse();
return find(candidates, ({ disabled }) => !disabled) return find(candidates, ({ disabled }) => !disabled);
} }
function getLinks (nav, remaining, level = 0, base = '') { function getLinks(nav, remaining, level = 0, base = "") {
let [segment = '', ...segments] = [...remaining] let [segment = "", ...segments] = [...remaining];
let i = findIndex(nav, ({ slug }) => slug === segment) let i = findIndex(nav, ({ slug }) => slug === segment);
if (i === -1) { if (i === -1) {
return null return null;
} }
let links = { let links = {
prev: findSibling(nav, i, false), prev: findSibling(nav, i, false),
next: findSibling(nav, i, true), next: findSibling(nav, i, true),
level, level,
base base,
} };
let sub = nav[i].children let sub = nav[i].children;
if (!sub) { if (!sub) {
if (segments.length) { if (segments.length) {
return null return null;
} }
return links return links;
} }
return ( return (
getLinks(sub, segments, level + 1, segment ? `${base}/${segment}` : base) || getLinks(sub, segments, level + 1, segment ? `${base}/${segment}` : base) ||
links links
) );
} }
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
arrow() arrow() {
content "" content: '';
display block display: block;
width 23px width: 23px;
height 33px height: 33px;
background #333 url("/icons/angle.svg") no-repeat 50% 50% / auto 21.5px background: #333 url('/icons/angle.svg') no-repeat 50% 50% / auto 21.5px;
transition background-color 0.3s transition: background-color 0.3s;
}
.one-footer .one-footer {
clear both clear: both;
padding 0 60px padding: 0 60px;
}
.links .links {
border-top 1px solid #eee border-top: 1px solid #eee;
padding 20px 0 80px padding: 20px 0 80px;
overflow hidden overflow: hidden;
}
.empty .empty {
display none display: none;
overflow hidden overflow: hidden;
}
.prev .prev, .next {
.next display: block;
display block line-height: 33px;
line-height 33px color: #333;
color #333 text-decoration: none;
text-decoration none
&:hover &:hover, &.focus-visible {
&.focus-visible &::before, &::after {
&::before background-color: #5b5b5b;
&::after }
background-color #5b5b5b }
&:active &:active {
&::before &::before, &::after {
&::after background-color: #818181;
background-color #818181 }
}
}
.prev::before .prev::before, .next::after {
.next::after arrow();
arrow() }
.prev .prev {
float left float: left;
&::before &::before {
float left float: left;
margin-right 15px margin-right: 15px;
transform rotate(180deg) transform: rotate(180deg);
}
}
.next .next {
float right float: right;
&::after &::after {
float right float: right;
margin-left 15px margin-left: 15px;
}
}
.copyright .copyright {
margin 0 margin: 0;
padding 25px 0 20px padding: 25px 0 20px;
border-top 1px solid #eee border-top: 1px solid #eee;
line-height 1 line-height: 1;
font-size 12px font-size: 12px;
text-align center text-align: center;
}
</style> </style>

579
components/OneLive.vue
View File

@ -1,78 +1,60 @@
<template> <template>
<v-splitpanes class="one-live"> <v-splitpanes class="one-live">
<v-pane <v-pane min-size="30" class="live-editor">
min-size="30" <v-monaco-editor
class="live-editor" v-model="localCode"
> style="height: 100%"
<v-monaco-editor language="html"
v-model="localCode" :theme="theme"
style="height: 100%" :options="{
language="html" automaticLayout: true,
:theme="theme" minimap: {
:options="{ enabled: false,
automaticLayout: true, },
minimap: { scrollBeyondLastLine: false,
enabled: false, }"
}, />
scrollBeyondLastLine: false <div class="editor-toolbar">
}" <veui-button v-tooltip="t('reset')" :ui="iconUi" @click="reset">
/> <veui-icon name="anticlockwise" />
<div class="editor-toolbar"> </veui-button>
<veui-button <veui-button v-tooltip="t('copyCode')" :ui="iconUi" @click="copy">
v-tooltip="t('@onedemo.playInCodeSandbox')" <veui-icon name="copy" />
:ui="iconUi" </veui-button>
@click="play('CodeSandbox')" <veui-button
> v-tooltip="t(colorSchemeLabelKey)"
<veui-icon name="one-demo-codesandbox"/> :ui="iconUi"
</veui-button> @click="switchColorScheme"
<veui-button >
v-tooltip="t('@onedemo.playInStackBlitz')" <veui-icon :name="colorSchemeIcon" scale="1.2" />
:ui="iconUi" </veui-button>
@click="play('StackBlitz')" <!-- <div class="editor-live-badge">
> <span>Live</span>
<veui-icon name="one-demo-stackblitz"/> </div> -->
</veui-button>
<veui-button
v-tooltip="t('reset')"
:ui="iconUi"
@click="reset"
>
<veui-icon name="anticlockwise"/>
</veui-button>
<veui-button
v-tooltip="t('copyCode')"
:ui="iconUi"
@click="copy"
>
<veui-icon name="copy"/>
</veui-button>
<veui-button
v-tooltip="t(colorSchemeLabelKey)"
:ui="iconUi"
@click="switchColorScheme"
>
<veui-icon
:name="colorSchemeIcon"
scale="1.2"
/>
</veui-button>
<div class="editor-live-badge">
<span>Live</span>
</div> </div>
</div> </v-pane>
</v-pane> <v-pane
<v-pane min-size="40"
min-size="40" class="live-preview"
class="live-preview" :class="{
:class="{ 'live-preview-browser': browser,
'live-preview-browser': browser }"
}"
>
<one-iframe
v-if="browser"
global-style="body { margin: 0 !important; } body > article { margin: 24px 36px; } .veui-layout { min-width: auto !important; }"
> >
<one-iframe
v-if="browser"
global-style="body { margin: 0 !important; } body > article { margin: 24px 36px; } .veui-layout { min-width: auto !important; }"
>
<v-live-preview
class="editor-preview"
:code="transformedCode"
:requires="imports"
:check-variable-availability="false"
@success="dismissError"
@error="handleError"
/>
</one-iframe>
<v-live-preview <v-live-preview
v-else
class="editor-preview" class="editor-preview"
:code="transformedCode" :code="transformedCode"
:requires="imports" :requires="imports"
@ -80,338 +62,343 @@
@success="dismissError" @success="dismissError"
@error="handleError" @error="handleError"
/> />
</one-iframe> <transition name="editor-error">
<v-live-preview <veui-alert
v-else v-if="error"
class="editor-preview" v-tooltip="t('dismiss')"
:code="transformedCode" ui="s"
:requires="imports" type="error"
:check-variable-availability="false" class="editor-error"
@success="dismissError" @click.native="dismissError"
@error="handleError" >
/> <code>{{ errorMessage }}</code>
<transition name="editor-error"> </veui-alert>
<veui-alert </transition>
v-if="error" </v-pane>
v-tooltip="t('dismiss')" </v-splitpanes>
ui="s"
type="error"
class="editor-error"
@click.native="dismissError"
>
<code>{{ errorMessage }}</code>
</veui-alert>
</transition>
</v-pane>
</v-splitpanes>
</template> </template>
<script> <script>
import Vue from 'vue' import Vue from "vue";
import { VueLivePreview } from 'vue-live' import { VueLivePreview } from "vue-live";
import MonacoEditor from 'vue-monaco' import MonacoEditor from "vue-monaco";
import { editor } from 'monaco-editor/esm/vs/editor/editor.api' import { editor } from "monaco-editor/esm/vs/editor/editor.api";
import NightOwl from 'monaco-themes/themes/Night Owl.json' import NightOwl from "monaco-themes/themes/Night Owl.json";
import { Button, Icon, Alert } from 'veui' import { Button, Icon, Alert } from "veui";
import * as veui from 'veui' import * as veui from "veui";
import lodash from 'lodash' import lodash from "lodash";
import 'veui-theme-dls-icons' import "veui-theme-dls-icons";
import tooltip from 'veui/directives/tooltip' import tooltip from "veui/directives/tooltip";
import i18n from 'veui/mixins/i18n' import i18n from "veui/mixins/i18n";
import toast from 'veui/plugins/toast' import toast from "veui/plugins/toast";
import 'veui-theme-dls-icons/copy' import "veui-theme-dls-icons/copy";
import 'veui-theme-dls-icons/anticlockwise' import "veui-theme-dls-icons/anticlockwise";
import { Splitpanes, Pane } from 'splitpanes' import { Splitpanes, Pane } from "splitpanes";
import 'splitpanes/dist/splitpanes.css' import "splitpanes/dist/splitpanes.css";
import { getLocale } from '../common/i18n' import { getLocale } from "../common/i18n";
import { play } from '../common/play' import { play } from "../common/play";
import { transformLessCode } from '../common/transform' import { transformLessCode } from "../common/transform";
import { loadPref, savePref } from '../common/util' import { loadPref, savePref } from "../common/util";
import OneIframe from './OneIframe' import OneIframe from "./OneIframe";
Vue.use(toast) Vue.use(toast);
editor.defineTheme('night-owl', NightOwl) editor.defineTheme("night-owl", NightOwl);
Icon.register({ Icon.register({
'one-live-color-scheme-auto': { "one-live-color-scheme-auto": {
width: 24, width: 24,
height: 24, height: 24,
d: d: "M7.5 2c-1.79 1.15-3 3.18-3 5.5s1.21 4.35 3.03 5.5C4.46 13 2 10.54 2 7.5A5.5 5.5 0 0 1 7.5 2m11.57 1.5l1.43 1.43L4.93 20.5L3.5 19.07L19.07 3.5m-6.18 2.43L11.41 5L9.97 6l.42-1.7L9 3.24l1.75-.12l.58-1.65L12 3.1l1.73.03l-1.35 1.13l.51 1.67m-3.3 3.61l-1.16-.73l-1.12.78l.34-1.32l-1.09-.83l1.36-.09l.45-1.29l.51 1.27l1.36.03l-1.05.87l.4 1.31M19 13.5a5.5 5.5 0 0 1-5.5 5.5c-1.22 0-2.35-.4-3.26-1.07l7.69-7.69c.67.91 1.07 2.04 1.07 3.26m-4.4 6.58l2.77-1.15l-.24 3.35l-2.53-2.2m4.33-2.7l1.15-2.77l2.2 2.54l-3.35.23m1.15-4.96l-1.14-2.78l3.34.24l-2.2 2.54M9.63 18.93l2.77 1.15l-2.53 2.19l-.24-3.34z",
'M7.5 2c-1.79 1.15-3 3.18-3 5.5s1.21 4.35 3.03 5.5C4.46 13 2 10.54 2 7.5A5.5 5.5 0 0 1 7.5 2m11.57 1.5l1.43 1.43L4.93 20.5L3.5 19.07L19.07 3.5m-6.18 2.43L11.41 5L9.97 6l.42-1.7L9 3.24l1.75-.12l.58-1.65L12 3.1l1.73.03l-1.35 1.13l.51 1.67m-3.3 3.61l-1.16-.73l-1.12.78l.34-1.32l-1.09-.83l1.36-.09l.45-1.29l.51 1.27l1.36.03l-1.05.87l.4 1.31M19 13.5a5.5 5.5 0 0 1-5.5 5.5c-1.22 0-2.35-.4-3.26-1.07l7.69-7.69c.67.91 1.07 2.04 1.07 3.26m-4.4 6.58l2.77-1.15l-.24 3.35l-2.53-2.2m4.33-2.7l1.15-2.77l2.2 2.54l-3.35.23m1.15-4.96l-1.14-2.78l3.34.24l-2.2 2.54M9.63 18.93l2.77 1.15l-2.53 2.19l-.24-3.34z'
}, },
'one-live-color-scheme-light': { "one-live-color-scheme-light": {
width: 24, width: 24,
height: 24, height: 24,
d: d: "M12 9c1.65 0 3 1.35 3 3s-1.35 3-3 3s-3-1.35-3-3s1.35-3 3-3m0-2c-2.76 0-5 2.24-5 5s2.24 5 5 5s5-2.24 5-5s-2.24-5-5-5zM2 13h2c.55 0 1-.45 1-1s-.45-1-1-1H2c-.55 0-1 .45-1 1s.45 1 1 1zm18 0h2c.55 0 1-.45 1-1s-.45-1-1-1h-2c-.55 0-1 .45-1 1s.45 1 1 1zM11 2v2c0 .55.45 1 1 1s1-.45 1-1V2c0-.55-.45-1-1-1s-1 .45-1 1zm0 18v2c0 .55.45 1 1 1s1-.45 1-1v-2c0-.55-.45-1-1-1s-1 .45-1 1zM5.99 4.58a.996.996 0 0 0-1.41 0a.996.996 0 0 0 0 1.41l1.06 1.06c.39.39 1.03.39 1.41 0s.39-1.03 0-1.41L5.99 4.58zm12.37 12.37a.996.996 0 0 0-1.41 0a.996.996 0 0 0 0 1.41l1.06 1.06c.39.39 1.03.39 1.41 0a.996.996 0 0 0 0-1.41l-1.06-1.06zm1.06-10.96a.996.996 0 0 0 0-1.41a.996.996 0 0 0-1.41 0l-1.06 1.06c-.39.39-.39 1.03 0 1.41s1.03.39 1.41 0l1.06-1.06zM7.05 18.36a.996.996 0 0 0 0-1.41a.996.996 0 0 0-1.41 0l-1.06 1.06c-.39.39-.39 1.03 0 1.41s1.03.39 1.41 0l1.06-1.06z",
'M12 9c1.65 0 3 1.35 3 3s-1.35 3-3 3s-3-1.35-3-3s1.35-3 3-3m0-2c-2.76 0-5 2.24-5 5s2.24 5 5 5s5-2.24 5-5s-2.24-5-5-5zM2 13h2c.55 0 1-.45 1-1s-.45-1-1-1H2c-.55 0-1 .45-1 1s.45 1 1 1zm18 0h2c.55 0 1-.45 1-1s-.45-1-1-1h-2c-.55 0-1 .45-1 1s.45 1 1 1zM11 2v2c0 .55.45 1 1 1s1-.45 1-1V2c0-.55-.45-1-1-1s-1 .45-1 1zm0 18v2c0 .55.45 1 1 1s1-.45 1-1v-2c0-.55-.45-1-1-1s-1 .45-1 1zM5.99 4.58a.996.996 0 0 0-1.41 0a.996.996 0 0 0 0 1.41l1.06 1.06c.39.39 1.03.39 1.41 0s.39-1.03 0-1.41L5.99 4.58zm12.37 12.37a.996.996 0 0 0-1.41 0a.996.996 0 0 0 0 1.41l1.06 1.06c.39.39 1.03.39 1.41 0a.996.996 0 0 0 0-1.41l-1.06-1.06zm1.06-10.96a.996.996 0 0 0 0-1.41a.996.996 0 0 0-1.41 0l-1.06 1.06c-.39.39-.39 1.03 0 1.41s1.03.39 1.41 0l1.06-1.06zM7.05 18.36a.996.996 0 0 0 0-1.41a.996.996 0 0 0-1.41 0l-1.06 1.06c-.39.39-.39 1.03 0 1.41s1.03.39 1.41 0l1.06-1.06z'
}, },
'one-live-color-scheme-dark': { "one-live-color-scheme-dark": {
width: 24, width: 24,
height: 24, height: 24,
d: d: "M9.37 5.51A7.35 7.35 0 0 0 9.1 7.5c0 4.08 3.32 7.4 7.4 7.4c.68 0 1.35-.09 1.99-.27A7.014 7.014 0 0 1 12 19c-3.86 0-7-3.14-7-7c0-2.93 1.81-5.45 4.37-6.49zM12 3a9 9 0 1 0 9 9c0-.46-.04-.92-.1-1.36a5.389 5.389 0 0 1-4.4 2.26a5.403 5.403 0 0 1-3.14-9.8c-.44-.06-.9-.1-1.36-.1z",
'M9.37 5.51A7.35 7.35 0 0 0 9.1 7.5c0 4.08 3.32 7.4 7.4 7.4c.68 0 1.35-.09 1.99-.27A7.014 7.014 0 0 1 12 19c-3.86 0-7-3.14-7-7c0-2.93 1.81-5.45 4.37-6.49zM12 3a9 9 0 1 0 9 9c0-.46-.04-.92-.1-1.36a5.389 5.389 0 0 1-4.4 2.26a5.403 5.403 0 0 1-3.14-9.8c-.44-.06-.9-.1-1.36-.1z' },
} });
})
const iconPackage = 'veui-theme-dls-icons' const iconPackage = "veui-theme-dls-icons";
const iconNames = Object.keys(Icon.icons).filter( const iconNames = Object.keys(Icon.icons).filter(
name => !name.startsWith('one-demo-') && Icon.icons[name] (name) => !name.startsWith("one-demo-") && Icon.icons[name]
) );
const iconModules = [iconPackage].concat( const iconModules = [iconPackage].concat(
iconNames.map(name => `${iconPackage}/${name}`) iconNames.map((name) => `${iconPackage}/${name}`)
) );
const colorSchemeOptions = ['dark', 'light', 'auto'] const colorSchemeOptions = ["dark", "light", "auto"];
export default { export default {
name: 'one-live', name: "one-live",
components: { components: {
'veui-button': Button, "veui-button": Button,
'veui-icon': Icon, "veui-icon": Icon,
'veui-alert': Alert, "veui-alert": Alert,
'v-splitpanes': Splitpanes, "v-splitpanes": Splitpanes,
'v-pane': Pane, "v-pane": Pane,
'v-monaco-editor': MonacoEditor, "v-monaco-editor": MonacoEditor,
'v-live-preview': VueLivePreview, "v-live-preview": VueLivePreview,
OneIframe OneIframe,
}, },
directives: { directives: {
tooltip tooltip,
}, },
mixins: [i18n], mixins: [i18n],
inheritAttrs: false, inheritAttrs: false,
props: { props: {
code: { code: {
type: String, type: String,
default: '' default: "",
}, },
browser: Boolean browser: Boolean,
}, },
data () { data() {
return { return {
localCode: this.code, localCode: this.code,
transformedCode: '', transformedCode: "",
error: null, error: null,
imports: { imports: {
veui, veui,
lodash, lodash,
...iconModules.reduce((mocks, module) => { ...iconModules.reduce((mocks, module) => {
mocks[module] = true mocks[module] = true;
return mocks return mocks;
}, {}) }, {}),
}, },
colorSchemeOption: loadPref('prefers-color-scheme'), colorSchemeOption: loadPref("prefers-color-scheme"),
colorSchemeSystemPref: null colorSchemeSystemPref: null,
} };
}, },
computed: { computed: {
errorMessage () { errorMessage() {
const { error } = this const { error } = this;
if (!error) { if (!error) {
return null return null;
} }
return error.name ? `${error.name}: ${error.message}` : error.message return error.name ? `${error.name}: ${error.message}` : error.message;
}, },
colorScheme () { colorScheme() {
if (!this.colorSchemeOption) { if (!this.colorSchemeOption) {
return 'dark' return "dark";
} }
if (this.colorSchemeOption === 'auto') { if (this.colorSchemeOption === "auto") {
return this.colorSchemeSystemPref return this.colorSchemeSystemPref;
} }
return this.colorSchemeOption return this.colorSchemeOption;
}, },
theme () { theme() {
return this.colorScheme === 'dark' ? 'night-owl' : 'vs' return this.colorScheme === "dark" ? "night-owl" : "vs";
}, },
iconUi () { iconUi() {
const ui = 's square icon' const ui = "s square icon";
return this.colorScheme === 'dark' ? `${ui} reverse` : ui return this.colorScheme === "dark" ? `${ui} reverse` : ui;
}, },
colorSchemeIcon () { colorSchemeIcon() {
if (!this.colorSchemeOption) { if (!this.colorSchemeOption) {
return 'one-live-color-scheme-dark' return "one-live-color-scheme-dark";
} }
return { return {
light: 'one-live-color-scheme-light', light: "one-live-color-scheme-light",
dark: 'one-live-color-scheme-dark', dark: "one-live-color-scheme-dark",
auto: 'one-live-color-scheme-auto' auto: "one-live-color-scheme-auto",
}[this.colorSchemeOption] }[this.colorSchemeOption];
}, },
colorSchemeLabelKey () { colorSchemeLabelKey() {
if (!this.colorSchemeOption) { if (!this.colorSchemeOption) {
return 'darkMode' return "darkMode";
} }
return { return {
light: 'lightMode', light: "lightMode",
dark: 'darkMode', dark: "darkMode",
auto: 'followSystem' auto: "followSystem",
}[this.colorSchemeOption] }[this.colorSchemeOption];
} },
}, },
watch: { watch: {
localCode: { localCode: {
immediate: true, immediate: true,
handler (code) { handler(code) {
this.$nextTick(() => { this.$nextTick(() => {
try { try {
this.transformedCode = transformLessCode(code) this.transformedCode = transformLessCode(code);
} catch (e) { } catch (e) {
this.error = e this.error = e;
return return;
} }
this.error = null this.error = null;
}) });
} },
} },
}, },
mounted () { mounted() {
this.mql = window.matchMedia('(prefers-color-scheme: dark)') this.mql = window.matchMedia("(prefers-color-scheme: dark)");
this.mql.addEventListener('change', this.handleColorSchemeChange) this.mql.addEventListener("change", this.handleColorSchemeChange);
this.colorSchemeSystemPref = this.mql.matches ? 'dark' : 'light' this.colorSchemeSystemPref = this.mql.matches ? "dark" : "light";
}, },
beforeDestroy () { beforeDestroy() {
this.mql.removeEventListener('change', this.handleColorSchemeChange) this.mql.removeEventListener("change", this.handleColorSchemeChange);
}, },
methods: { methods: {
play (vendor) { play(vendor) {
let locale = getLocale(this.$route.path) let locale = getLocale(this.$route.path);
play(this.localCode, { locale, vendor }) play(this.localCode, { locale, vendor });
}, },
async copy () { async copy() {
try { try {
await navigator.clipboard.writeText(this.code) await navigator.clipboard.writeText(this.code);
this.$toast.success(this.t('copySuccess')) this.$toast.success(this.t("copySuccess"));
} catch (e) { } catch (e) {
this.$toast.error(this.t('copyFailed')) this.$toast.error(this.t("copyFailed"));
} }
}, },
switchColorScheme () { switchColorScheme() {
if (!this.colorSchemeOption) { if (!this.colorSchemeOption) {
this.colorSchemeOption = 'light' this.colorSchemeOption = "light";
} else { } else {
this.colorSchemeOption = colorSchemeOptions[ this.colorSchemeOption =
(colorSchemeOptions.indexOf(this.colorSchemeOption) + 1) % colorSchemeOptions[
colorSchemeOptions.length (colorSchemeOptions.indexOf(this.colorSchemeOption) + 1) %
] colorSchemeOptions.length
];
} }
savePref('prefers-color-scheme', this.colorSchemeOption) savePref("prefers-color-scheme", this.colorSchemeOption);
}, },
handleColorSchemeChange () { handleColorSchemeChange() {
this.colorSchemeSystemPref = this.mql.matches ? 'dark' : 'light' this.colorSchemeSystemPref = this.mql.matches ? "dark" : "light";
}, },
reset () { reset() {
this.localCode = this.code this.localCode = this.code;
}, },
handleChange (code) { handleChange(code) {
this.localCode = code this.localCode = code;
}, },
handleError (error) { handleError(error) {
this.error = error this.error = error;
}, },
dismissError () { dismissError() {
this.error = null this.error = null;
} },
} },
} };
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
.one-live .one-live {
& >>> .splitpanes__pane & >>> .splitpanes__pane {
position relative position: relative;
}
& >>> .splitpanes__splitter & >>> .splitpanes__splitter {
width 6px width: 6px;
background #eee background: #eee;
transition all 0.3s transition: all 0.3s;
&:hover &:hover {
background #ccc background: #ccc;
transform scaleX(2) transform: scaleX(2);
}
}
& >>> .live-preview & >>> .live-preview {
overflow auto overflow: auto;
}
}
.live-preview-browser .live-preview-browser {
transform translate(0, 0) transform: translate(0, 0);
padding 0 !important padding: 0 !important;
}
.editor-toolbar .editor-toolbar {
position absolute position: absolute;
top 12px top: 12px;
right 28px right: 28px;
display flex display: flex;
align-items center align-items: center;
}
.editor-live-badge .editor-live-badge {
display flex display: flex;
align-items center align-items: center;
position relative position: relative;
margin-left 8px margin-left: 8px;
padding 0 4px 0 20px padding: 0 4px 0 20px;
border-radius 2px border-radius: 2px;
font-size 12px font-size: 12px;
background-color #00bf5c background-color: #00bf5c;
color #fff color: #fff;
height 18px height: 18px;
&::before &::before {
content "" content: '';
position absolute position: absolute;
left 7px left: 7px;
top 6px top: 6px;
width 6px width: 6px;
height 6px height: 6px;
border-radius 50% border-radius: 50%;
background-color #fff background-color: #fff;
box-shadow 0 0 0 0 rgba(255, 255, 255, 1) box-shadow: 0 0 0 0 rgba(255, 255, 255, 1);
animation pulse 2s infinite animation: pulse 2s infinite;
}
}
.editor-error .editor-error {
position absolute position: absolute;
bottom 16px bottom: 16px;
right 16px right: 16px;
left 16px left: 16px;
cursor pointer cursor: pointer;
transition all 0.3s transition: all 0.3s;
&:hover &:hover {
opacity 0.8 opacity: 0.8;
}
}
.editor-error-enter .editor-error-enter, .editor-error-leave-to {
.editor-error-leave-to opacity: 0;
opacity 0 transform: translateY(10px);
transform translateY(10px) }
@keyframes pulse @keyframes pulse {
0% 0% {
transform scale(0.95) transform: scale(0.95);
box-shadow 0 0 0 0 rgba(255, 255, 255, 0.9) box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.9);
}
70% 70% {
transform scale(1) transform: scale(1);
box-shadow 0 0 0 12px rgba(255, 255, 255, 0) box-shadow: 0 0 0 12px rgba(255, 255, 255, 0);
}
100% 100% {
transform scale(0.95) transform: scale(0.95);
box-shadow 0 0 0 0 rgba(255, 255, 255, 0) box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
}
}
.veui-button[ui~="icon"][ui~="reverse"] .veui-button[ui~='icon'][ui~='reverse'] {
color #ebedf5 color: #ebedf5;
&:hover &:hover, &[data-focus-visible-added] {
&[data-focus-visible-added] color: #f6f7fa;
color #f6f7fa }
&:active &:active {
color #fff color: #fff;
}
}
</style> </style>

421
components/OneMenu.vue
View File

@ -1,124 +1,95 @@
<template> <template>
<nav <nav v-outside="collapseMenu" class="one-nav" :class="{ expanded }">
v-outside="collapseMenu" <header>
class="one-nav" <h2>{{ Config.app_name }}</h2>
:class="{ expanded }"
> <section class="search">
<header> <one-search />
<h2>VEUI</h2> </section>
<section class="desc"> <div class="toggle" @click="toggleMenu">
<a href="https://github.com/ecomfe/veui"> <veui-icon class="expanded-icon" name="chevron-left" />
<img <veui-icon class="collapsed-icon" name="hamburger" />
alt="VEUI on GitHub" </div>
src="https://img.shields.io/github/stars/ecomfe/veui?label=stars&logo=github" </header>
height="20" <veui-menu
> class="one-menu"
</a> :items="menuItems"
<nuxt-link :expanded.sync="menuExpanded"
:class="{
'locale-swith': true,
disabled: altLocale.disabled,
}"
:to="altLocale.disabled ? '' : altLocale.to"
>
{{ altLocale.label }}
</nuxt-link>
</section>
<section class="search">
<one-search/>
</section>
<div
class="toggle"
@click="toggleMenu"
> >
<veui-icon <template #item-label="{ label, sub }">
class="expanded-icon" {{ label }}<small>{{ sub }}</small>
name="chevron-left" </template>
/> </veui-menu>
<veui-icon </nav>
class="collapsed-icon"
name="hamburger"
/>
</div>
</header>
<veui-menu
class="one-menu"
:items="menuItems"
:expanded.sync="menuExpanded"
>
<template #item-label="{ label, sub }">
{{ label }}<small>{{ sub }}</small>
</template>
</veui-menu>
</nav>
</template> </template>
<script> <script>
import i18n from '../common/i18n' import i18n from "../common/i18n";
import OneSearch from './OneSearch' import OneSearch from "./OneSearch";
import { Menu, Icon } from 'veui' import { Menu, Icon } from "veui";
import outside from 'veui/directives/outside' import outside from "veui/directives/outside";
import 'veui-theme-dls-icons/hamburger' import "veui-theme-dls-icons/hamburger";
import 'veui-theme-dls-icons/chevron-left' import "veui-theme-dls-icons/chevron-left";
import Config from "../env";
export default { export default {
name: 'one-menu', name: "one-menu",
directives: { directives: {
outside outside,
}, },
components: { components: {
'one-search': OneSearch, "one-search": OneSearch,
'veui-menu': Menu, "veui-menu": Menu,
'veui-icon': Icon "veui-icon": Icon,
}, },
mixins: [i18n], mixins: [i18n],
props: { props: {
expanded: Boolean, expanded: Boolean,
nav: { nav: {
type: Array, type: Array,
default () { default() {
return [] return [];
} },
} },
}, },
data () { data() {
return { return {
menuExpanded: [] Config,
} menuExpanded: [],
};
}, },
computed: { computed: {
altLocale () { altLocale() {
let { canonicalPath, locale, getLocalePath, isPathDisabled } = this let { canonicalPath, locale, getLocalePath, isPathDisabled } = this;
let altLocale = locale === 'zh-Hans' ? 'en-US' : 'zh-Hans' let altLocale = locale === "zh-Hans" ? "en-US" : "zh-Hans";
let label = locale === 'zh-Hans' ? 'English' : '中文' let label = locale === "zh-Hans" ? "English" : "中文";
let disabled = isPathDisabled(canonicalPath, altLocale) let disabled = isPathDisabled(canonicalPath, altLocale);
return { return {
to: disabled ? '' : getLocalePath(canonicalPath, altLocale), to: disabled ? "" : getLocalePath(canonicalPath, altLocale),
disabled, disabled,
label label,
} };
},
menuItems() {
return this.nav.map((item) => this.normalizeItem(item));
}, },
menuItems () {
return this.nav.map(item => this.normalizeItem(item))
}
}, },
created () { created() {
this.menuExpanded = this.menuItems.map(({ name }) => name) this.menuExpanded = this.menuItems.map(({ name }) => name);
}, },
methods: { methods: {
getTitleDetail (title) { getTitleDetail(title) {
let [main, sub] = title.split(' - ') let [main, sub] = title.split(" - ");
return [main, sub] return [main, sub];
}, },
isActive (path) { isActive(path) {
let { route = {} } = this.$router.resolve(path) || {} let { route = {} } = this.$router.resolve(path) || {};
return route.name === this.$route.name return route.name === this.$route.name;
}, },
normalizeItem ({ title, children, slug, link, disabled }, base = '') { normalizeItem({ title, children, slug, link, disabled }, base = "") {
const fullSlug = `${base}/${slug}` const fullSlug = `${base}/${slug}`;
const localePath = this.getLocalePath(fullSlug) const localePath = this.getLocalePath(fullSlug);
const to = (link !== false && fullSlug && !disabled) ? localePath : null const to = link !== false && fullSlug && !disabled ? localePath : null;
const [main, sub] = this.getTitleDetail(title) const [main, sub] = this.getTitleDetail(title);
return { return {
label: main, label: main,
@ -126,149 +97,175 @@ export default {
to, to,
name: fullSlug, name: fullSlug,
disabled, disabled,
children: children ? children.map(child => this.normalizeItem(child, fullSlug)) : [] children: children
} ? children.map((child) => this.normalizeItem(child, fullSlug))
: [],
};
}, },
toggleMenu () { toggleMenu() {
this.$emit('toggle', !this.expanded) this.$emit("toggle", !this.expanded);
}, },
collapseMenu () { collapseMenu() {
this.$emit('toggle', false) this.$emit("toggle", false);
} },
} },
} };
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
.one-nav .one-nav {
position fixed position: fixed;
top 0 top: 0;
bottom 0 bottom: 0;
left 0 left: 0;
display flex display: flex;
flex-direction column flex-direction: column;
width 280px width: 280px;
z-index 1 z-index: 1;
background-color #fff background-color: #fff;
header header {
padding 32px 20px 20px padding: 32px 20px 20px;
flex none flex: none;
}
h2 h2 {
display flex display: flex;
align-items center align-items: center;
margin 0 0 16px margin: 0 0 16px;
font-size 20px font-size: 20px;
font-weight 500 font-weight: 500;
a a {
display block display: block;
}
& + .desc & + .desc {
display flex display: flex;
align-items center align-items: center;
margin-bottom 20px margin-bottom: 20px;
img img {
display block display: block;
}
}
}
.locale-swith .locale-swith {
display block display: block;
margin-left 12px margin-left: 12px;
padding 0 6px padding: 0 6px;
border 1px solid #dbdbdb border: 1px solid #dbdbdb;
border-radius 3px border-radius: 3px;
line-height 18px line-height: 18px;
font-size 12px font-size: 12px;
text-align center text-align: center;
text-decoration none text-decoration: none;
transition all 0.2s transition: all 0.2s;
&:hover &:hover {
border-color #999 border-color: #999;
}
}
.search .search {
margin-top 16px margin-top: 16px;
margin-right 12px margin-right: 12px;
flex-shrink 0 flex-shrink: 0;
}
}
.one-menu .one-menu {
flex 1 1 auto flex: 1 1 auto;
width 100% width: 100%;
overflow auto overflow: auto;
background-color #fff background-color: #fff;
& >>> .DocSearch & >>> .DocSearch {
margin 0 margin: 0;
border-radius 6px border-radius: 6px;
font inherit font: inherit;
}
small small {
margin-left 8px margin-left: 8px;
opacity 0.7 opacity: 0.7;
}
}
.toggle .toggle {
display none display: none;
}
.disabled .disabled {
opacity 0.3 opacity: 0.3;
pointer-events none pointer-events: none;
}
@media (max-width 480px) @media (max-width: 480px) {
.one-nav .one-nav {
z-index 20 z-index: 20;
transition transform 0.3s, box-shadow 0.3s transition: transform 0.3s, box-shadow 0.3s;
transform translateX(-100%) transform: translateX(-100%);
&.expanded &.expanded {
transform translateX(0) transform: translateX(0);
box-shadow 0 0 48px rgba(0, 0, 0, 0.2) box-shadow: 0 0 48px rgba(0, 0, 0, 0.2);
}
}
header header {
position relative position: relative;
}
.toggle .toggle {
display flex display: flex;
align-items center align-items: center;
justify-content center justify-content: center;
width 36px width: 36px;
height 36px height: 36px;
position absolute position: absolute;
top 80px top: 80px;
left 100% left: 100%;
border 1px solid #e2e6f0 border: 1px solid #e2e6f0;
border-top-right-radius 4px border-top-right-radius: 4px;
border-bottom-right-radius 4px border-bottom-right-radius: 4px;
background-color #fff background-color: #fff;
box-shadow 0 0 12px rgba(0, 0, 0, 0.1) box-shadow: 0 0 12px rgba(0, 0, 0, 0.1);
font-size 20px font-size: 20px;
&::before &::before {
content "" content: '';
position absolute position: absolute;
top 0 top: 0;
bottom 0 bottom: 0;
left -19px left: -19px;
width 20px width: 20px;
background-color #fff background-color: #fff;
}
}
}
.expanded-icon .expanded-icon, .collapsed-icon {
.collapsed-icon position: absolute;
position absolute transition: transform 0.3s, opacity 0.3s;
transition transform 0.3s, opacity 0.3s }
.expanded-icon .expanded-icon {
margin-left -4px margin-left: -4px;
opacity 0 opacity: 0;
transform translateX(-10px) transform: translateX(-10px);
.expanded & .expanded & {
opacity 1 opacity: 1;
transform none transform: none;
}
}
.collapsed-icon .collapsed-icon {
.expanded & .expanded & {
opacity 0 opacity: 0;
transform translateX(10px) transform: translateX(10px);
}
}
</style> </style>

184
components/OneRepl.vue
View File

@ -1,136 +1,134 @@
<!-- -->
<template> <template>
<article class="repl"> <article class="repl">
<header class="header"> <header class="header">
<h1>{{ t('liveEdit') }}</h1> <h1>实时编辑</h1>
<section class="actions"> <section class="actions">
<veui-button <!-- <veui-button
v-tooltip="t(expanded ? 'shrinkEditor' : 'expandEditor')" v-tooltip="t(expanded ? 'shrinkEditor' : 'expandEditor')"
ui="strong icon xl" ui="strong icon xl"
@click="handleToggle" @click="handleToggle"
> >
<veui-icon :name="expanded ? 'one-repl-shrink' : 'one-repl-expand'"/> <veui-icon :name="expanded ? 'one-repl-shrink' : 'one-repl-expand'" />
</veui-button> </veui-button> -->
<veui-button <veui-button ui="strong text" @click="handleClose"> 退出 </veui-button>
ui="strong text" </section>
@click="handleClose" </header>
> <one-live class="editor" :code="code" :browser="browser" />
{{ t('exit') }} </article>
</veui-button>
</section>
</header>
<one-live
class="editor"
:code="code"
:browser="browser"
/>
</article>
</template> </template>
<script> <script>
import { Button, Loading, Icon } from 'veui' import { Button, Loading, Icon } from "veui";
import tooltip from 'veui/directives/tooltip' import tooltip from "veui/directives/tooltip";
import i18n from 'veui/mixins/i18n' import i18n from "veui/mixins/i18n";
export default { export default {
name: 'one-repl', name: "one-repl",
directives: { directives: {
tooltip tooltip,
}, },
components: { components: {
'veui-button': Button, "veui-button": Button,
'veui-icon': Icon, "veui-icon": Icon,
'one-live': () => ({ "one-live": () => ({
component: import('./OneLive'), component: import("./OneLive"),
loading: { loading: {
inheritAttrs: false, inheritAttrs: false,
render (h) { render(h) {
return h(Loading, { return h(Loading, {
props: { props: {
loading: true, loading: true,
ui: 'strong' ui: "strong",
}, },
class: 'loading' class: "loading",
}) });
} },
} },
}) }),
}, },
mixins: [i18n], mixins: [i18n],
props: { props: {
code: { code: {
type: String, type: String,
default: '' default: "",
}, },
expanded: Boolean, expanded: Boolean,
browser: Boolean browser: Boolean,
}, },
methods: { methods: {
handleClose () { handleClose() {
this.$emit('close') this.$emit("close");
}, },
handleToggle () { handleToggle() {
this.$emit('toggle', !this.expanded) this.$emit("toggle", !this.expanded);
} },
} },
} };
Icon.register({ Icon.register({
'one-repl-shrink': { "one-repl-shrink": {
width: 24, width: 24,
height: 24, height: 24,
d: d: "M7.41 18.59L8.83 20L12 16.83L15.17 20l1.41-1.41L12 14l-4.59 4.59zm9.18-13.18L15.17 4L12 7.17L8.83 4L7.41 5.41L12 10l4.59-4.59z",
'M7.41 18.59L8.83 20L12 16.83L15.17 20l1.41-1.41L12 14l-4.59 4.59zm9.18-13.18L15.17 4L12 7.17L8.83 4L7.41 5.41L12 10l4.59-4.59z'
}, },
'one-repl-expand': { "one-repl-expand": {
width: 24, width: 24,
height: 24, height: 24,
d: d: "M12 5.83L15.17 9l1.41-1.41L12 3L7.41 7.59L8.83 9L12 5.83zm0 12.34L8.83 15l-1.41 1.41L12 21l4.59-4.59L15.17 15L12 18.17z",
'M12 5.83L15.17 9l1.41-1.41L12 3L7.41 7.59L8.83 9L12 5.83zm0 12.34L8.83 15l-1.41 1.41L12 21l4.59-4.59L15.17 15L12 18.17z' },
} });
})
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
.repl .repl {
display flex display: flex;
flex-direction column flex-direction: column;
}
.header .header {
display flex display: flex;
align-items center align-items: center;
flex none flex: none;
height 48px height: 48px;
padding 0 24px padding: 0 24px;
box-shadow 0 0 4px #0006 box-shadow: 0 0 4px #0006;
position relative position: relative;
z-index 1 z-index: 1;
h1 h1 {
flex none flex: none;
margin 0 margin: 0;
font-size 16px font-size: 16px;
}
.actions .actions {
display flex display: flex;
justify-content flex-end justify-content: flex-end;
flex 1 1 auto flex: 1 1 auto;
gap 24px gap: 24px;
}
}
.editor:not(.loading) .editor:not(.loading) {
position relative position: relative;
flex 1 1 auto flex: 1 1 auto;
height calc(100% - 48px) height: calc(100% - 48px);
& >>> .live-preview & >>> .live-preview {
padding 24px 36px padding: 24px 36px;
}
& >>> .VueLive-error & >>> .VueLive-error {
display none display: none;
}
}
.loading .loading {
position absolute position: absolute;
top 40vh top: 40vh;
left 50% left: 50%;
transform translateX(-50%) transform: translateX(-50%);
font-size 40px font-size: 40px;
}
</style> </style>

4
env.js Normal file
View File

@ -0,0 +1,4 @@
export default {
app_name: '文档服务',
github_repo: 'http://10.1.23.40:8081/web/jhuan/jhuan-mes-pc-v2/',
}

66
nuxt.config.js
View File

@ -1,11 +1,11 @@
const path = require('path') const path = require('path')
const MonacoEditorPlugin = require('monaco-editor-webpack-plugin') const MonacoEditorPlugin = require('monaco-editor-webpack-plugin')
function resolve (p) { function resolve(p) {
return path.resolve(__dirname, p) return path.resolve(__dirname, p)
} }
function appendLoader (config, loader) { function appendLoader(config, loader) {
config.module.rules.push(loader) config.module.rules.push(loader)
} }
@ -17,29 +17,35 @@ module.exports = {
* Headers of the page * Headers of the page
*/ */
head: { head: {
title: 'VEUI', title: '',
htmlAttrs: { htmlAttrs: {
lang: 'zh-Hans' lang: 'zh-Hans'
}, },
meta: [ meta: [{
{ charset: 'utf-8' }, charset: 'utf-8'
{ name: 'viewport', content: 'width=device-width, initial-scale=1' }, },
{
name: 'viewport',
content: 'width=device-width, initial-scale=1'
},
{ {
hid: 'description', hid: 'description',
name: 'description', name: 'description',
content: 'Website for VEUI: an enterprise component library for Vue.js.' content: ''
}, },
{ {
name: 'theme-color', name: 'theme-color',
content: '#0052cc' content: '#0052cc'
} }
], ],
link: [{ rel: 'shortcut icon', href: 'https://www.baidu.com/favicon.ico' }] // link: [{ rel: 'shortcut icon', href: 'https://www.baidu.com/favicon.ico' }]
}, },
/** /**
* Customize the progress bar color * Customize the progress bar color
*/ */
loading: { color: '#0052cc' }, loading: {
color: '#0052cc'
},
pageTransition: { pageTransition: {
css: false css: false
@ -52,13 +58,27 @@ module.exports = {
'veui-theme-dls/' 'veui-theme-dls/'
], ],
plugins: [ plugins: [{
{ src: '~plugins/global.js' }, src: '~plugins/global.js'
{ src: '~plugins/hm.js', ssr: false }, },
{ src: '~plugins/i18n.js' }, {
{ src: '~plugins/l10n.js' }, src: '~plugins/hm.js',
{ src: '~plugins/target.js', ssr: false }, ssr: false
{ src: '~plugins/prism.js', ssr: false } },
{
src: '~plugins/i18n.js'
},
{
src: '~plugins/l10n.js'
},
{
src: '~plugins/target.js',
ssr: false
},
{
src: '~plugins/prism.js',
ssr: false
}
], ],
/** /**
@ -101,7 +121,7 @@ module.exports = {
}) })
], ],
extend (config) { extend(config) {
/** /**
* veui-loader * veui-loader
*/ */
@ -111,13 +131,11 @@ module.exports = {
loader: 'veui-loader', loader: 'veui-loader',
options: { options: {
locale: ['zh-Hans', 'en-US'], locale: ['zh-Hans', 'en-US'],
modules: [ modules: [{
{ package: 'veui-theme-dls',
package: 'veui-theme-dls', fileName: '{module}.js',
fileName: '{module}.js', transform: false
transform: false }]
}
]
}, },
include: [resolve('pages'), resolve('node_modules/veui')] include: [resolve('pages'), resolve('node_modules/veui')]
}) })

91
one/docs/advanced/custom-rules.md
View File

@ -1,91 +0,0 @@
# 自定义校验规则
对于多值校验，`Form` 组件的 [`validators`](../components/form#props-validators) 属性提供了比较完善的功能来实现自定义校验。对于单值校验，`Field` 组件内置了 7 种常见规则，具体参考其 [`rule`](../components/field#props-rule) 属性。如果无法覆盖需求，`VEUI` 校验规则模块允许你添加自定义规则。
## 示例
```js
import ruleManager from 'veui/managers/rule'
ruleManager.addRule('range', {
validate (value, ruleValue) {
// 仅实现大小校验部分
let range = value.split('-')
return +range[0] >= ruleValue.floor && +range[1] <= ruleValue.ceil
},
message: '范围值必须在限定区间内',
priority: 100
})
```
```vue
<template>
<veui-field
:rules="[{
triggers: 'change'
name: 'range',
value: {
ceil: 100,
floor: 50
}
}]"
...
>...</veui-field>
</template>
```
## API
| 名称 | 类型 | 描述 |
| -- | -- | -- |
| `validate` | `function(value: *, ruleValue: ?*=)` | 校验逻辑，`value` 为 `Field` 需要校验的值，`ruleValue` 可选，根据规则需要添加，表示规则的限定值。 |
| `message` | `function | string` | [^message] |
| `priority` | `number` | [^priority] |
^^^message
默认出错信息。
若类型为 `string`，可以通过 `{ruleValue}` 引用 `ruleValue`、`{value}` 引用 `value`。例如：
```js
let minLengthRule = {
validate (value, ruleValue) {
return !isEmpty(value) ? val.length >= ruleValue : true
},
message: '字符长度不能短于 {ruleValue}，当前长度 {value}',
priority: 100
}
```
若类型为 `function`，参数为 `(ruleValue: ?*=, value: *)`。例如：
```js
let minLengthRule = {
validate (value, ruleValue) {
return !isEmpty(value) ? val.length >= ruleValue : true
},
message (ruleValue, value) {
return `字符长度不能短于${ruleValue}，当前长度${value}`
},
priority: 100
}
```
:::tip
如果需要支持运行时切换语言，`message` 必须使用 `function` 类型。
:::
^^^
^^^priority
规则优先级。数值低优先级高。
+++目前内置的优先级
| 名称 | 优先级 |
| -- | -- | -- |
| `required` | `0` |
| `numeric` | `10` |
| `pattern` | `50` |
| `maxLength` | `100` |
| `minLength` | `100` |
| `max` | `200` |
| `min` | `200` |
+++

61
one/docs/advanced/global-config.md
View File

@ -1,61 +0,0 @@
# 全局配置
VEUI 中很多组件都定义了全局配置项，允许开发者在使用时全局配置某个组件的行为细节。
例如，`Uploader` 组件可以统一配置上传模式，用户可以根据项目前后端接口、需要支持浏览器版本的具体情况选择使用 iframe 回调方式还是 XHR2 方式传递数据，也可以统一配置远端数据格式的转换函数。
VEUI 全局配置项可以通过 `veui/managers/config` 模块进行覆盖：
```js
import config from 'veui/managers/config'
config.set('uploader.requestMode', 'iframe')
config.set('uploader.convertResponse', ({ code, error, result }) => {
/**
* Transform from
*
* {
* code: 0,
* error: '...',
* result: {
* url: '...'
* }
* }
*
* to
*
* {
* success: true,
* message: '...',
* src: '...'
* }
*/
return {
success: code === 0,
src: error ? null : result.url,
message: error || null
}
})
```
如果需要一次修改同一个组件的多项设置，可以使用如下写法：
```js
import config from 'veui/managers/config'
config.set({
requestMode: 'iframe',
convertResponse: data => data
}, 'uploader')
```
`config.set()` 方法参数可为如下形式：
* `(key: string, value: *, namespace: string)`
* `(values: Object<{key: string, value: *}>, namespace: string)`
当提供了 `namespace` 参数时，最终生成的配置项键名为 <code>\`${namespace}.${key}\`</code>。
除此以外，还提供了相同参数列表的 `config.defaults()` 方法，区别在于当需要在配置项中写入的键值已经存在，则不会覆盖。
每个组件、指令等支持的全局配置请查看对应组件、指令的详情页。

124
one/docs/advanced/overlay.md
View File

@ -1,124 +0,0 @@
# 浮层管理
在 VEUI 中，有大量组件使用到了浮层功能：
* 各种类型的弹框：[对话框](../components/dialog)、[警告弹框](../components/alert-box)等；
* [下拉选择](../components/select)；
* ……
针对这些组件，我们抽离了具备如下功能的浮层模块：
* 能够浮于页面上所有普通元素之上；
* 能够进行层叠顺序管理；
* 能够基于指定元素定位。
## 层叠覆盖
为了避免浮层被上层 `overflow: hidden` 的元素意外遮盖，我们将浮层根元素直接置于 `<body>` 下统一管理。
在[浮层组件](../components/overlay)中，`.veui-overlay-box` 对应了浮层根元素，该元素在组件初始化的时候，会被放置到 `<body>` 之下，组件销毁的时候，会被移除掉。
## 层叠顺序管理
在将浮层根元素置于 `<body>` 下后，原有的层级嵌套关系会丢失，同时也无法通过原生的层叠上下文机制来控制浮层的层叠顺序。比如：
* 某个对话框组件 A 上有一个下拉选择组件 B，那么 B 组件浮层应该位于 A 组件浮层之上。
* 警告框浮层应该位于普通对话框浮层之上。
基于上述限制，浮层模块实现了自己的层叠顺序管理机制。整个浮层层级嵌套关系，是通过一棵树来表达的：
<img class="preview hero" src="/images/development/advanced/overlay-tree.png">
树中每一个蓝色节点都对应关联到具体的[浮层组件](../components/overlay)实例。针对上图，树的构造顺序可以是：
1. 弹出“对话框 1”，创建一个“对话框 1”节点，根据节点权重信息创建一个分组，然后将分组挂在 root 节点之下。
2. 弹出“对话框 2”，创建一个“对话框 2”节点，发现已经存在相同权重的分组，就直接将“对话框 2”节点放置在该分组的末尾位置。
3. 在“对话框 2”中实例化一个“下拉选择 1”组件实例，由于“对话框 2”组件实例是“下拉选择 1”组件实例的父级，因此对应的浮层节点也应当具备父子关系，因此按照类似于“步骤 1”的顺序在“对话框 2”节点下生成分组及“下拉选择 1”节点。
4. 此时由于程序运行出现了故障，弹出了“警告弹框 1”，由于“警告弹框”类型的组件相对于“对话框”组件具备更高的层级权重，因此在 root 之下新建了一个靠右的分组，并将生成的“警告弹框 1”节点置于分组末尾。
有了树之后，就会按照深度优先的遍历顺序生成每个节点的 `z-index` 值。
其中，基准 `z-index` 值可以通过全局配置对象进行配置：
```js
import config from 'veui/managers/config'
config.set('overlay.baseZIndex', 200)
```
:::warning
必须在[浮层组件](../components/overlay)引入之前设置基准 `z-index`，不然不会生效。
:::
可以针对组件类型，甚至组件实例粒度设置层叠优先级，层叠优先级值越大，最终生成的 `z-index` 值就越大。具有相同层叠优先级的同级组件实例，越靠后实例化的组件，生成的 `z-index` 值越大。
浮层组件、对话框组件、弹框组件等提供了 `priority` 属性，用于自定义组件实例的层叠优先级：
```html
<veui-dialog :priority="300"/>
```
一些比较特殊的组件，会提供基于组件类型粒度的层叠优先级配置：
| 组件 | 配置字段 | 默认值 | 修改配置示例 |
| -- | -- | -- | -- |
| 警告弹框 | `alertbox.priority` | `100` | [^alert-box] |
| 确认弹框 | `confirmbox.priority` | `100` | [^confirm-box] |
| 输入弹框 | `promptbox.priority` | `100` | [^prompt-box] |
^^^alert-box
```js
import config from 'veui/managers/config'
config.set('alertbox.priority', 100)
```
^^^
^^^confirm-box
```js
import config from 'veui/managers/config'
config.set('confirmbox.priority', 100)
```
^^^
^^^prompt-box
```js
import config from 'veui/managers/config'
config.set('promptbox.priority', 100)
```
^^^
总结起来，确定某个浮层系组件实例的层叠优先级的逻辑流程为：
* 如果能够设置组件实例级别的层叠优先级，并且设置了，那么就使用这个层叠优先级值，否则进入下一步；
* 如果能够设置组件类型级别的层叠优先级，并且设置了，那么就使用这个层叠优先级值，否则进入下一步；
* 使用默认的层叠优先级值：`1`。
## 定位
VEUI 中，浮层支持两种定位方式：
* 在页面范围内，以坐标值的形式进行定位；
* 相对于某个元素，指定偏移和变换规则进行定位。
以坐标方式定位时，需要自己写 CSS 进行控制（浮层模块内部只会生成浮层根元素的 `z-index` 值）。
相对元素定位时，可以通过[浮层组件](../components/overlay)的 `options` 属性描述偏移和变换规则。由于目前内部采用 [Popper.js](https://popper.js.org/docs/v1/) 实现，因此完整的配置项可以参考 [Popper.js 官网](https://popper.js.org/docs/v1/#popperdefaults--codeobjectcode)。
## 样式
由于浮层根元素被手动放置到 `<body>` 元素之下了，要设置浮层内容的样式，就需要给浮层根元素指定 `class`。所有浮层系组件都支持 `overlay-class` 属性，通过该属性为浮层根元素设置 `class`：
```vue
<template>
<veui-dialog overlay-class="my-dialog-overlay"/>
<template>
<style>
.my-dialg-overlay {
/* 自定义浮层样式 */
}
</style>
```

157
one/docs/advanced/theming.md
View File

@ -1,157 +0,0 @@
# 主题
VEUI 的组件和主题包是完全解耦的。组件库中不含有任何样式代码，每个组件的样式都需要主题包中对应的样式文件来提供。
为了方便在按需引入的同时不需要手动引入每个组件的样式代码，我们提供了 `veui-loader` 来完成通过配置自动将依赖的样式文件注入组件，详情请参考 `veui-loader` 的[相关介绍](../getting-started/veui-loader)。
## 创建自定义主题包
veui-loader 为 VEUI 注入依赖时，同时支持注入 script 类型及 style 类型的模块。所以主题包中可以为每个组件提供这两种类型的主题配置。
### 自定义样式
:::warning
注意，主题包样式对 VEUI 组件的 DOM 结构会有依赖。
:::
为每个组件提供完整的样式，可以使用任何预处理语言。每个组件具体提供的类名及选择器可以参考 `veui-theme-dls` 中的实现。
```less
.veui-button {
/* ... */
}
```
### 自定义图标
VEUI 的 `Icon` 组件封装了 [Vue-Awesome](https://justineo.github.io/vue-awesome/demo/) 来输出内联 SVG 图标，无法直接在样式代码中指定，需要通过 script 模块进行注册。每个组件都定义了语义明确的图标接口，我们需要做的只是在全局配置中为组件注入相应的图标名称映射并引入对应的图标模块：
```js
import config from 'veui/managers/config'
import '../icons/angle-up-small'
import '../icons/angle-down-small'
config.defaults({
icons: {
expand: 'angle-down-small',
collapse: 'angle-up-small'
}
}, 'select')
```
除了 `veui-theme-dls` 自带的图标外，目前可以使用的图标包还有：
* [`vue-awesome/icons`](https://justineo.github.io/vue-awesome/demo/)：Vue-Awesome 自带 [FontAwesome](https://fontawesome.com/) 图标包
* [`vue-awesome-material-icons/icons`](https://justineo.github.io/vue-awesome-material-icons/demo/)：同样基于 Vue-Awesome 的 [Material Icons](https://material.io/tools/icons) 图标包
### 预设样式及自定义配置
VEUI 中各个组件的可切换的预设样式是通过为主题包提供可扩展的 `ui` 配置实现的。
新增一个预设样式 `foo` 只需要在样式文件中添加 `[ui~="foo"]` 对应的样式并在使用组件时添加对应的 `ui="foo"` 声明即可完成：
```less
.veui-select {
/* ... */
&[ui~="foo"] {
color: #f00;
}
}
```
```html
<veui-select ui="foo">...</veui-select>
```
一个组件也可以同时应用多个预设样式：
```html
<veui-select ui="foo bar">...</veui-select>
```
但如果我们想将预设样式定义得更完善一些，比如 `foo` 与 `bar` 是组件的两种不可同时使用的预设样式怎么办呢？比如 `small` 和 `large` 样式都会自定义组件的尺寸，是互斥的，我们就需要通过在全局配置中为组件注入更详细的 `ui` 配置来实现。
`ui` 字段下每个属性名都是需要声明的预设样式名称，其值的类型为：`{ values, boolean, inherit }`。
字段详情：
| 名称 | 类型 | 默认值 | 描述 |
| -- | -- | -- | -- |
| `values` | `Array<string>` | - | 预设 `ui` 属性的可选值。 |
| `boolean` | `boolean` | `false` | 预设 `ui` 属性是否为布尔型。 |
| `inherit` | `boolean` | `false` | 预设 `ui` 属性值是否会被子组件继承。 |
以 `NumberInput` 组件为例：
```js
import config from 'veui/managers/config'
config.defaults({
ui: {
size: {
values: ['xs', 's', 'm'],
default: 'm',
inherit: true
},
style: {
values: ['normal', 'strong'],
default: 'normal'
}
}
}, 'select')
```
在上面这个例子中，我们定义了两个 `ui` 属性：`size` 和 `style`。它们都是枚举类型，其中 `size` 值可被子组件继承。最终调用 `Select` 组件时，可以这样启用预设样式：
```html
<veui-select ui="strong s">...</veui-select>
```
当然，我们也可以完全不定义 `ui` 属性的详情，这时 VEUI 会将用户书写的 `ui` 属性原样输出，不会进行去重、同属性的属性值冲突检测、继承等特殊处理。
:::warning
由于 `ui` 属性最后会将值序列化为空格分隔的字符串输出到 DOM 元素上，所以各个属性的值不能冲突。
:::
### 指定组件内部组件的预设样式
有一些组件由多个其它组件组合而成，此时我们可能会需要全局指定内部特定部件的预设样式。比如在 `veui-theme-dls` 中，`Dialog` 中的取消按钮默认采用默认样式，而如果在其它主题中我们可能会想重置为 `link` 样式。此时可以使用全局配置修改组件的 `parts` 映射。
```js
import config from 'veui/managers/config'
config.defaults({
parts: {
ok: 'primary',
cancel: 'link'
}
}, 'select')
```
如果希望部件的 `ui` 属性值可以根据声明/继承的值动态计算得出，也可以直接使用计算函数：
```js
import config from 'veui/managers/config'
const SIZE_MAPPING = {
xs: 's',
s: 's',
m: 's',
l: 'm'
}
config.defaults({
parts: {
item: ({ size }) => SIZE_MAPPING[size]
}
}, 'select')
```
上面的例子中，组件内部件 `item` 的 `ui` 属性将在 `size` 属性的基础上进行一次映射。
## 主题包列表
* [veui-theme-dls](https://github.com/ecomfe/veui/tree/dev/packages/veui-theme-dls)：基于 Light DLS 的 VEUI 2.x 主题
* [veui-theme-blue](https://github.com/ecomfe/veui-theme-blue)：基于 Theme Blue 的 VEUI 2.x 主题
* [veui-theme-spectre](https://justineo.github.io/veui-theme-spectre/demo/)：基于 Spectre.css 的 VEUI 1.x 主题

394
one/docs/changelog.vue
View File

@ -1,394 +0,0 @@
<template>
<article
class="content post"
:class="{ 'filter-version': compareValid }"
>
<h1 data-md>
升级日志
</h1>
<veui-form
style="--dls-field-label-width: calc(4em + 2px); /* WTF Safari? */"
ui="s"
class="form"
>
<veui-field
ui="s"
label="变更类型"
>
<veui-checkbox-group
v-model="types"
class="types"
:items="allTypes"
>
<template #item="{ label, emoji }">
<span class="emoji">{{ emoji }}</span> {{ label }}
</template>
</veui-checkbox-group>
</veui-field>
<veui-field
ui="s"
label="功能筛选"
>
<veui-select
v-model="tag"
searchable
clearable
:options="allTags"
placeholder="根据组件/指令/插件/模块等进行过滤……"
/>
</veui-field>
<veui-fieldset
ui="s"
label="版本对比"
>
<veui-field>
<veui-checkbox
v-model="compare"
class="compare-toggle"
>
开启
</veui-checkbox>
</veui-field>
<template v-if="compare">
<veui-field>
<veui-select
v-model="from"
class="version"
:options="allVersions"
searchable
clearable
placeholder="选择起始版本……"
/>
</veui-field>
→
<veui-field>
<veui-select
v-model="to"
class="version"
:options="allVersions"
searchable
clearable
placeholder="选择目标版本……"
/>
</veui-field>
</template>
</veui-fieldset>
</veui-form>
<section
v-for="{ version, codeName, date, changeset } of pagedChangelog"
:key="version"
class="version-item"
data-md
>
<h2
:id="getHash(version)"
:class="{
major: isMajor(version),
minor: isMinor(version),
}"
>
<nuxt-link
:to="`#${getHash(version)}`"
>
{{ version }}<small v-if="codeName">{{ codeName }}</small><time
v-if="date"
:datetime="date"
>{{ date }}</time>
</nuxt-link>
</h2>
<ul class="changeset">
<li
v-for="({ type, tags, content }, index) of changeset"
:key="index"
class="change"
:class="type"
>
<span
class="emoji"
:title="getTypeLabel(type)"
>{{
getTypeEmoji(type)
}}</span>
<div v-html="content"/>
</li>
</ul>
</section>
<section
v-if="pagedChangelog.length === 0"
class="not-found"
@click="updateShrugger"
>
<span class="emoji">{{ shrugger }} </span>
<p>没有符合条件的变更记录。</p>
</section>
<section class="pagination">
<veui-pagination
:page="page"
:page-size="pageSize"
:total="filteredChangelog.length"
@redirect="val => page = val"
/>
</section>
</article>
</template>
<script>
import { cloneDeep } from 'lodash'
import { Form, Field, Fieldset, CheckboxGroup, Select, Checkbox, Pagination } from 'veui'
import changelog from '../assets/data/changelog.json'
const allTypes = [
{ label: '非兼容性变更', value: 'breaking', emoji: '⚠️' },
{ label: '主要变更', value: 'feature', emoji: '💡' },
{ label: '问题修复', value: 'bugfix', emoji: '🐞' },
{ label: '实验性功能', value: 'experimental', emoji: '🧪' }
]
const typeMap = allTypes.reduce((map, { label, value, emoji }) => {
map[value] = { label, emoji }
return map
}, {})
const allVersions = changelog.map(({ version }) => ({ label: version, value: version }))
const allTags = [
...new Set(changelog.map(({ changeset }) => changeset.map(({ tags }) => tags).flat()).flat())
]
.sort()
.map(tag => ({ label: tag, value: tag }))
function isMajor (version) {
return /^\d+\.0.0$/.test(version)
}
function isMinor (version) {
return /^\d+\.(?:[1-9]|\d{2,}).0$/.test(version)
}
function getShrugger () {
const candidates = ['🤷🏻‍♀️', '🤷🏼‍♀️', '🤷🏽‍♀️', '🤷🏾‍♀️', '🤷🏿‍♀️', '🤷🏻‍♂️', '🤷🏼‍♂️', '🤷🏽‍♂️', '🤷🏾‍♂️', '🤷🏿‍♂️']
return candidates[Math.floor(Math.random() * candidates.length)]
}
export default {
name: 'one-changelog',
layout: 'default',
components: {
'veui-form': Form,
'veui-field': Field,
'veui-fieldset': Fieldset,
'veui-checkbox-group': CheckboxGroup,
'veui-select': Select,
'veui-checkbox': Checkbox,
'veui-pagination': Pagination
},
data () {
return {
changelog,
allTypes,
types: allTypes.map(({ value }) => value),
allVersions,
allTags,
compare: false,
tag: null,
from: null,
to: allVersions[0].value,
shrugger: getShrugger(),
page: 1,
pageSize: 10
}
},
computed: {
compareValid () {
return this.from && this.to
},
filteredChangelog () {
const { changelog, tag, from, to } = this
let result = cloneDeep(changelog)
if (from && to) {
const fromIndex = result.findIndex(({ version }) => version === from)
const toIndex = result.findIndex(({ version }) => version === to)
result = result.slice(toIndex, fromIndex)
}
result.forEach((versionLog) => {
const { changeset } = versionLog
versionLog.changeset = changeset
.filter(({ type, tags }) => this.types.includes(type) && (!tag || tags.includes(tag)))
})
return result.filter(({ changeset }) => changeset.length !== 0)
},
pagedChangelog () {
const { page, pageSize, filteredChangelog } = this
return filteredChangelog.slice((page - 1) * pageSize, page * pageSize)
}
},
watch: {
compare (val) {
if (!val) {
this.from = null
this.to = allVersions[0].value
}
}
},
mounted () {
['from', 'to', 'compare', 'tag', 'types'].forEach((key) => {
this.$watch(key, this.updateShrugger)
})
},
methods: {
isMajor,
isMinor,
getTypeEmoji (type) {
return typeMap[type].emoji
},
getTypeLabel (type) {
return typeMap[type].label
},
updateShrugger () {
this.shrugger = getShrugger()
},
getHash (version) {
return `v${version.replace(/\./g, '-')}`
}
}
}
</script>
<style lang="stylus" scoped>
.emoji
font-family "Apple Color Emoji", "Segoe UI Emoji", NotoColorEmoji, "Android Emoji", EmojiSymbols
.compare-toggle
margin-right 8px
.version
width 160px
margin 0 8px
.veui-field
--dls-field-label-width inherit
.form
& >>> .veui-field
margin-bottom 12px
& .veui-field
margin-bottom 0
& >>> .veui-field .veui-field-no-label
margin-bottom 0
.version-item
position relative
&::before
content ""
position absolute
top -2px
bottom -2px
left -12px
width 3px
background-color #0052cc
border-radius 1px
opacity 0
transform-origin 50% 0
&[data-target]::before
animation line-enter 6s ease 1 both
h2
display flex
align-items center
font-size 20px
margin 1.2em 0 0.6em
&.minor
font-size 24px
&.major
font-size 28px
&.minor
&.major
&::before
content "§"
a
display inline-flex
align-items center
color #333 !important
small
time
display inline-flex
align-items center
small
font-size 14px
&::before
content "·"
font-size 20px
margin 0 8px
time
font-size 12px
color #999
&::before
content "/"
font-size 10px
margin 0 8px
color #ccc
.changeset
list-style-type none
padding-left 0
.change
display flex
.emoji
flex none
margin-right 8px
cursor help
& >>> p
margin-top 0
&:only-child
margin 0
.not-found
display inline-flex
flex-direction column
align-items center
margin 32px
color #ababab
font-size 28px
cursor pointer
user-select none
.emoji
font-size 64px
opacity 0.75
p
margin 0 -0.75em 0 0
.pagination
margin-top 36px
@keyframes line-enter
0%
100%
transform scaleY(0)
opacity 0
5%
95%
transform none
opacity 1
</style>

105
one/docs/components/accordion.md
View File

@ -1,105 +0,0 @@
# Accordion <small>手风琴面板</small>
:::tip
`Accordion` 组件需要内联 [`Collapse`](./collapse) 组件使用。
:::
## 示例
### 尺寸
可选的尺寸 [`ui`](#props-ui) 属性值：`s` / `m`。
[[ demo src="/demo/accordion/size.vue" ]]
### 样式变体
可使用 [`ui`](#props-ui) 属性来设置多种样式变体。
[[ demo src="/demo/accordion/variant.vue" ]]
### 允许多个展开
可使用 [`multiple`](#props-multiple) 属性来允许多个面板同时展开。
[[ demo src="/demo/accordion/multiple.vue" ]]
### 展开图标位置
可使用 [`toggle-position`](#props-toggle-position) 属性来设置展开图标的位置。
[[ demo src="/demo/accordion/position.vue" ]]
## API
### 属性
| 名称 | 类型 | 默认值 | 描述 |
| -- | -- | -- | -- |
| ``ui`` | `string=` | - | [^ui] |
| ``multiple`` | `boolean=` | `false` | 是否允许多个子面板同时展开。 |
| ``disabled`` | `boolean=` | `false` | 是否为禁用状态。 |
| ``expanded`` | `string | Array<string>` | - | [^expanded] |
| ``toggle-position`` | `string` | `'start'` | [^toggle-position] |
^^^ui
预设样式。为空格分隔的一组枚举值的组合。其中 `simple` / `basic` / `strong` 只能选择一个，不设置则为默认的普通样式。`bordered` / `borderless` 只能选择一个。
+++枚举值
| 值 | 描述 |
| -- | -- |
| `simple` | 简洁样式。 |
| `basic` | 白底样式。 |
| `strong` | 白底样式。 |
| `bordered` | 有外边框。 |
| `borderless` | 无外边框。 |
| `dull` | 标题区域是不否响应鼠标交互改变样式。 |
| `s` | 小尺寸样式。 |
| `m` | 中尺寸样式。 |
+++
^^^
^^^expanded
:::badges
`.sync`
:::
已展开的折叠面板标识，对应于内联 `Collapse` 组件的 [`name`](./collapse#props-name) 属性。当 `multiple` 为 `true` 时，为折叠面板标识的数组。
^^^
^^^toggle-position
设置展开图标的位置。
+++枚举值
| 值 | 描述 |
| -- | -- |
| `start` | 展开图标位于开始位置，为默认位置。 |
| `end` | 展开图标位于结束位置。 |
| `none` | 无展开图标。 |
+++
^^^
### 插槽
| 名称 | 描述 |
| -- | -- |
| ``default`` | 内容区，用来内联 `Collapse` 组件。 |
### 事件
| 名称 | 描述 |
| -- | -- |
| ``toggle`` | [^toggle] |
^^^toggle
点击内部折叠面板标题区触发展开/收起时触发。回调参数为 `(expand: boolean, name: string, expanded)`。
+++参数详情
| 名称 | 类型 | 描述 |
| -- | -- | -- |
| `expand` | `boolean` | 是否展开。 |
| `name` | `string` | 被切换的折叠面板标识。 |
| `expanded` | `string | Array<string>` | 当前所有被展开的折叠面板标识。 |
+++
^^^

75
one/docs/components/alert-box.md
View File

@ -1,75 +0,0 @@
# AlertBox <small>警告弹框</small>
## 示例
### 类型
`AlertBox` 有三种类型，分别是 `info`、`success` 和 `error`，可以通过 [`type`](#props-type) 属性指定不同的类型。
[[ demo src="/demo/alert-box/type.vue" ]]
### 标题
可以通过 [`title`](#props-title) 属性或 [`title`](#slots-title) 插槽自定义警告弹框的标题。
[[ demo src="/demo/alert-box/title.vue" ]]
## API
### 属性
| 名称 | 类型 | 默认值 | 描述 |
| -- | -- | -- | -- |
| ``open`` | `boolean` | `false` | [^open] |
| ``type`` | `string=` | `'success'` | [^type] |
| ``title`` | `string=` | - | 标题。 |
| ``loading`` | `boolean=` | `false` | 是否处于加载状态。处于加载状态时确定按钮也将进入加载状态，无法点击。 |
| ``disabled`` | `boolean=` | `false` | 是否处于禁用状态。处于禁用状态时确定按钮也将进入禁用状态，无法点击。 |
| ``ok-label`` | `string=` | - | “确定”按钮的文字内容。 |
| ``before-close`` | `function(string): boolean=|Promise<boolean=>` | - | 在将触发关闭的操作发生后执行，参考 [`Dialog`](./dialog) 组件的 [`before-close`](./dialog#props-before-close) 属性。 |
| ``overlay-class`` | `string | Array | Object=` | - | 参考 [`Overlay`](./overlay) 组件的 [`overlay-class`](./overlay#props-overlay-class) 属性。 |
| ``overlay-style`` | `string | Array | Object=` | - | 参考 [`Overlay`](./overlay) 组件的 [`overlay-style`](./overlay#props-overlay-style) 属性。 |
^^^open
:::badges
`.sync`
:::
是否显示警告弹框。
^^^
^^^type
警告框类型。
+++枚举值
| 值 | 描述 |
| -- | -- |
| `info` | 信息提示样式。 |
| `success` | 成功样式。 |
| `error` | 错误样式。 |
+++
^^^
### 插槽
| 名称 | 描述 |
| -- | -- |
| ``default`` | 内容区。 |
| ``title`` | 标题区。若同时指定了 [`title`](#props-title) 属性和 [`title`](#slots-title) 插槽，以后者为准。 |
| ``foot`` | 底部区域，默认会展示一个“知道了”按钮。 |
### 事件
| 名称 | 描述 |
| -- | -- |
| ``ok`` | 点击“知道了”按钮触发。 |
| ``afteropen`` | 弹框打开后触发。弹框内容在打开后才会进行渲染，所以如果有依赖内容渲染的逻辑，请在此事件触发后再执行。 |
| ``afterclose`` | 弹框关闭后触发。如果样式主题提供了退出动画，将在退出动画完毕后触发。 |
### 图标
| 名称 | 描述 |
| -- | -- |
| ``info`` | 普通信息。 |
| ``success`` | 成功状态。 |
| ``error`` | 错误状态。 |

104
one/docs/components/alert.md
View File

@ -1,104 +0,0 @@
# Alert <small>提示</small>
## 示例
### 类型
`Alert` 有四种类型，分别是 `success`、`info`、`warning` 和 `error`，可以通过 [`type`](#props-type) 属性指定不同的类型。
[[ demo src="/demo/alert/type.vue" ]]
### 多消息切换
可以将 [`message`](#props-message) 属性指定为数组，来实现展现多条可切换的消息提示。
[[ demo src="/demo/alert/multiple.vue" ]]
### 标题
设置 [`title`](#props-title) 属性来指定消息标题。
[[ demo src="/demo/alert/title.vue" ]]
### 额外内容
通过 [`extra`](#slots-extra) 插槽来指定消息之后的额外内容区域。
[[ demo src="/demo/alert/extra.vue" ]]
## API
### 属性
| 名称 | 类型 | 默认值 | 描述 |
| -- | -- | -- | -- |
| ``type`` | `string=` | `'success'` | [^type] |
| ``title`` | `string` | - | 消息标题。 |
| ``message`` | `string | Array<string>` | - | 消息内容，当类型为数组时会显示多条数据并支持切换上一条/下一条。 |
| ``closable`` | `boolean=` | `false` | 是否允许关闭。 |
| ``open`` | `boolean=` | `true` | [^open] |
| ``index`` | `number=` | `0` | [^index] |
^^^type
警告框类型。
+++枚举值
| 值 | 描述 |
| -- | -- |
| `info` | 信息提示样式。 |
| `success` | 成功样式。 |
| `warning` | 警告样式。 |
| `error` | 错误样式。 |
+++
^^^
^^^open
:::badges
`.sync`
:::
是否显示消息。
^^^
^^^index
:::badges
`.sync`
:::
在有多条数据时，当前显示的消息的索引。
^^^
### 插槽
| 名称 | 描述 |
| -- | -- |
| ``default`` | [^slot-default] |
| ``title`` | 消息标题的内容区域。 |
| ``extra`` | 消息之后的额外内容区域。 |
| ``content`` | 整个消息区域，包括状态图标、切换按钮、关闭按钮等。 |
^^^slot-default
消息内容区域。
默认内容：消息文本。
+++作用域参数
| 名称 | 类型 | 描述 |
| -- | -- | -- |
| `message` | `string` | 消息文本。 |
| `index` | `number=` | 当有多条消息时，当前消息的索引值。 |
| `close` | `function` | 用于关闭提示。 |
+++
^^^
### 图标
| 名称 | 描述 |
| -- | -- |
| ``success`` | 成功消息。 |
| ``warning`` | 警告消息。 |
| ``info`` | 信息消息。 |
| ``error`` | 错误消息。 |
| ``prev`` | 上一条。 |
| ``next`` | 下一条。 |
| ``close`` | 关闭。 |

70
one/docs/components/anchor.md
View File

@ -1,70 +0,0 @@
# Anchor <small>锚点</small>
## 示例
### 普通锚点
使用 [`container`](#props-container) 属性设置发生滚动的容器，当 `Anchor` 组件不在容器中（也就不随容器滚动），此时可以不用设置 [`sticky`](#props-sticky) 属性。
[[ demo src="/demo/anchor/normal.vue" ]]
### 吸附锚点
当 `Anchor` 组件在容器中（随容器滚动），此时可设置 [`sticky`](#props-sticky) 属性来控制组件在滚动出容器时进行吸附。
[[ demo src="/demo/anchor/sticky.vue" ]]
### 指定偏移
用 [`target-offset`](#props-target-offset) 属性来控制锚点滚动到容器何处开始处于激活状态。
用 [`sticky-offset`](#props-sticky-offset) 属性来控制 `Anchor` 处于容器何处时开始吸附。
[[ demo src="/demo/anchor/offset.vue" ]]
## API
### 属性
| 名称 | 类型 | 默认值 | 描述 |
| -- | -- | -- | -- |
| ``items`` | `Array<{value, label, children}>` | `[]` | [^items] |
| ``sticky`` | `boolean=` | `false` | 是否有吸附效果。 |
| ``container`` | `string | HTMLElement | Window=` | - | `Anchor` 吸附与判断锚点激活所参考的容器。 |
| ``target-offset`` | `string | number=` | `0` | 当某个锚点处于到容器的 `target-offset` 位置，那么对应的锚点链接处于激活状态。数值类型值为 `px` 值，也可以传入如 `'10%'` 的百分比字符串，将基于 `container` 对应容器的高度比例进行计算。 |
| ``sticky-offset`` | `string | number=` | `0` | 对于 sticky `Anchor` 而言，当容器滚动到 `sticky-offset` 位置，那么该 `Anchor` 开始吸附。不同值类型含义同 [`target-offset`](#props-target-offset) 属性。 |
^^^items
数据源数组，每个项目类型为 `{label, value, children, ...}`。
+++字段详情
| 名称 | 类型 | 描述 |
| -- | -- | -- |
| `label` | `string` | 节点的文字描述。 |
| `value` | `string` | 节点对应的值，一般是页内 hash， 如 `#button` 。 |
| `children` | `Array<Object>=` | 节点的子节点数组，数组项类型同 [`items`](#props-items) 数组项。 |
+++
^^^
### 插槽
| 名称 | 描述 |
| -- | -- |
| ``item`` | [^slot-item] |
| ``item-label`` | [^slot-item-label] |
^^^slot-item
渲染每个锚点链接。
默认内容：锚点链接。
作用域参数参见 [`items`](#props-items) 属性详情。
^^^
^^^slot-item-label
渲染每个锚点链接的文本。
默认内容：锚点链接的描述文本 `label`。
作用域参数参见 [`item`](#slots-item) 插槽。
^^^

138
one/docs/components/autocomplete.md
View File

@ -1,138 +0,0 @@
# Autocomplete <small>自动完成</small>
## 示例
### 建议触发时机
设置 [`suggest-trigger`](#props-suggest-trigger) 来指定触发建议的时机。
[[ demo src="/demo/autocomplete/normal.vue" ]]
### 严格模式
设置 [`strict`](#props-strict) 属性来指定严格模式，若输入值没有完全匹配建议值，那么在失焦时会清空输入值。
[[ demo src="/demo/autocomplete/strict.vue" ]]
### 自定义搜索逻辑
设置 [`match`](#props-match) 属性来自定义高亮逻辑；设置 [`filter`](#props-filter) 属性来自定义搜索命中逻辑。
:::tip
`match` 用于高亮显示匹配文本的逻辑；而 `filter` 是控制是否命中。默认情况下 `filter` 会过滤掉未被 `match` 匹配的节点，且将包含非叶子节点。如希望搜索结果中都是叶子节点，可通过重写 `filter` 过滤掉非叶子节点。
:::
[[ demo src="/demo/autocomplete/custom.vue" ]]
## API
### 属性
| 名称 | 类型 | 默认值 | 描述 |
| -- | -- | -- | -- |
| ``datasource`` | `Array<string | Object>=` | `[]` | [^datasource] |
| ``value`` | `*` | - | [^prop-value] |
| ``disabled`` | `boolean=` | `false` | 是否为禁用状态。 |
| ``readonly`` | `boolean=` | `false` | 是否为只读状态。 |
| ``match`` | `(item, keyword, { ancestors }) => boolean | [number, number] | Array<[number, number]>` | - | 支持自定义高亮逻辑，默认进行大小写不敏感的子串匹配。 |
| ``filter`` | `(item, keyword, { ancestors, offsets }) => boolean` | - | 支持自定义搜索命中逻辑。 |
| ``suggest-trigger`` | `string | Array<string>=` | `'input'` | 触发建议下拉面板的时机，可用值有：`'input'`、`'focus'`。 |
| ``expanded`` | `boolean=` | `false` | [^expanded] |
| ``placeholder`` | `string=` | - | 输入占位符。 |
| ``clearable`` | `boolean=` | `false` | 是否显示清除按钮。 |
| ``composition`` | `boolean=` | `false` | 是否感知输入法输入过程的值。 |
| ``select-on-focus`` | `boolean=` | `false` | 聚焦时是否自动选中输入框文本。 |
| ``maxlength`` | `number=` | - | 输入字符串的长度限制。 |
| ``strict`` | `boolean=` | `false` | 输入字符串到达长度限制以后是否禁止继续输入。 |
| ``get-length`` | `function(string): number=` | 自定义的字符长度计算函数。 |
| ``trim`` | `boolean | string=` | `false` | [^trim] |
| ``autofocus`` | `boolean=` | `false` | 是否自动获取焦点。 |
^^^datasource
数据源数组，项目为 `Object` 时字段为 `{label, value, children, ...}`。
+++字段详情
| 名称 | 类型 | 描述 |
| -- | -- | -- |
| `label` | `string` | 节点的文字描述。 |
| `value` | `string` | 节点对应的值，一般是页内 hash， 如 `#button` 。 |
| `children` | `Array<Object>=` | 节点的子节点数组，数组项类型同 [`items`](#props-items) 数组项。 |
+++
^^^
^^^prop-value
:::badges
`v-model`
:::
当前选中的值。
^^^
^^^expanded
:::badges
`.sync`
:::
建议面板是否展开（如果 `suggestions` 中没有待选项，则即使为 `true` 时面板也会关闭）。
^^^
^^^trim
是否移除前后空格。当为 `true` 时，会移除前后空格，当为 `false` 时，不移除前后空格。设置为字符串时，按指定方式进行移除。
+++枚举值
| 值 | 描述 |
| -- | -- |
| `both` | 移除两端空格。等同于 `true` 时的行为。 |
| `start` | 移除开始空格。 |
| `end` | 移除末尾空格。 |
+++
^^^
### 插槽
| 名称 | 描述 |
| -- | -- |
| ``suggestions`` | [^slot-suggestions] |
| ``option-label`` | [^slot-option-label] |
^^^slot-suggestions
下拉建议面板插槽。
+++作用域参数
| 名称 | 类型 | 描述 |
| -- | -- | -- |
| `datasource` | `Array<string | Object>` | 数据源，类型同 [`datasource`](#props-datasource) 属性。 |
| `keyword` | `string` | 搜索关键词。 |
+++
^^^
^^^slot-option-label
下拉面板中选项插槽。
+++作用域参数
| 名称 | 类型 | 描述 |
| -- | -- | -- |
| `label` | `string` | 用来显示的节点文案，不存在则取 `value`。 |
| `value` | `string` | 用来实际选中的值。 |
| `matches` | `Array<{text: string, matched: boolean}>` | 匹配情况，一个节点可能被切分成多断文本，`text` 表示该段文本， `matched` 表示该段文本是否匹配。 |
+++
^^^
### 事件
| 名称 | 描述 |
| -- | -- |
| ``input`` | [^event-input] |
| ``select`` | 采纳建议时触发，参数是当前值。 |
| ``toggle`` | 提示面板展开状态切换时触发，回调参数为 `(expanded: boolean)`。`expanded` 表示操作将触发提示面板展开还是收起。 |
| ``clear`` | 清除当前值时触发。 |
^^^event-input
:::badges
`v-model`
:::
当在 `input` 中输入或下拉面板中选值会触发该事件，参数是当前输入值或选中时的选中项目的 `value`。
^^^

58
one/docs/components/badge.md
View File

@ -1,58 +0,0 @@
# Badge <small>徽标</small>
## 示例
### 文字徽标
徽标内容可以是纯文本。
[[ demo src="/demo/badge/text.vue" ]]
### 数字徽标
徽标内容也可以是数字，超过最大值时可以显示为*最大值+*。
[[ demo src="/demo/badge/number.vue" ]]
### 飘角徽标
不提供徽标内容时，徽标将以圆点样式显示在右上角。
[[ demo src="/demo/badge/corner-dot.vue" ]]
### 圆点徽标
不提供插槽内容时，徽标将以圆点样式显示。
[[ demo src="/demo/badge/dot.vue" ]]
## API
### 属性
| 名称 | 类型 | 默认值 | 描述 |
| -- | -- | -- | -- |
| ``type`` | `string=` | `'error'` | [^type] |
| ``value`` | `string | number` | - | 徽标内容值。为 `number` 类型值时，会受 [`max`](#props-max) 属性限制。为 `string` 类型时，`max` 会被忽略。 |
| ``max`` | `number=` | `badge.max` | 徽标数值的最大值，当 `value` 超过此值时，徽标内容会显示为 `{max}+`。当 `value` 为 `string` 时会被忽略。 |
| ``hidden`` | `boolean=` | `false` | 是否处于隐藏状态。 |
^^^type
徽标状态类型。自带样式的可选值如下。使用其它值时需要自行定义 `.veui-badge-{type}` 的样式。
+++枚举值
| 值 | 描述 |
| -- | -- |
| `info` | 信息提示样式。 |
| `success` | 成功样式。 |
| `warning` | 警告样式。 |
| `error` | 错误样式。 |
| `aux` | 辅助样式。 |
+++
^^^
### 插槽
| 名称 | 描述 |
| -- | -- |
| ``default`` | 需要显示徽标的目标内容。 |

48
one/docs/components/breadcrumb-item.md
View File

@ -1,48 +0,0 @@
# BreadcrumbItem <small>面包屑项</small>
:::tip
`BreadcrumbItem` 组件需要在 [`Breadcrumb`](./breadcrumb) 组件内使用。
:::
## 示例
见 [`Breadcrumb` 示例](./breadcrumb#示例)。
## API
### 属性
| 名称 | 类型 | 默认值 | 描述 |
| --- | --- | --- | --- |
| ``to`` | `string | Object` | - | 点击面包屑项之后要跳转到的地址。见 [`Link`](./link) 组件的 [`to`](./link#props-to) 属性。 |
| ``type`` | `string` | `'link'` | [^link] |
| ``native`` | `boolean` | `false` | 当值为 `true` 且指定了 `to` 时，会直接使用原生 `<a>` 元素，`to` 值会被设置到 `<a>` 标签的 `href` 属性上。 |
^^^link
面包屑项的类型。
+++枚举值
| 值 | 描述 |
| -- | -- |
| `link` | 超链接样式。 |
| `text` | 文本样式。 |
+++
^^^
### 插槽
| 名称 | 描述 |
| -- | -- |
| ``default`` | 填充面包屑项的正文内容区。 |
### 事件
| 名称 | 描述 |
| -- | -- |
| ``redirect`` | 点击 `type` 为 `link` 的项目时将触发该事件，回调参数为 `(event: Event)`，直接透传[原生点击事件对象](https://developer.mozilla.org/zh-CN/docs/Web/Events/click)。 |
### 图标
| 名称 | 描述 |
| -- | -- |
| ``separator`` | 分隔符。 |

114
one/docs/components/breadcrumb.md
View File

@ -1,114 +0,0 @@
# Breadcrumb <small>面包屑</small>
:::tip
`Breadcrumb` 组件可以内联 [`BreadcrumbItem`](./breadcrumb-item) 组件使用。
:::
## 示例
### 风格
可选的风格 [`ui`](#props-ui) 属性值：`strong`。
[[ demo src="/demo/breadcrumb/style.vue" ]]
### 尺寸
可选的尺寸 [`ui`](#props-ui) 属性值：`s` / `m`。
[[ demo src="/demo/breadcrumb/size.vue" ]]
### 内联模式
直接内联 `BreadcrumbItem` 使用。
[[ demo src="/demo/breadcrumb/base.vue" ]]
### 使用数据源
也可以传入数据源。
[[ demo src="/demo/breadcrumb/datasource.vue" ]]
### 自定义分隔符
可以使用插槽自定义分隔符。
[[ demo src="/demo/breadcrumb/separator.vue" ]]
### 事件监听
监听 [`redirect`](#events-redirect) 事件后处理而非直接路由跳转。
[[ demo src="/demo/breadcrumb/redirect.vue" ]]
## API
### 属性
| 名称 | 类型 | 默认值 | 描述 |
| --- | --- | --- | --- |
| ``ui`` | `string=` | - | [^ui] |
| ``routes`` | `Array<Object>` | `[]` | [^routes] |
^^^ui
预设样式。
+++枚举值
| 值 | 描述 |
| -- | -- |
| `s` | 小尺寸样式。 |
| `m` | 中尺寸样式。 |
^^^
^^^routes
面包屑配置，项目类型为 `{label: string, type: string, to: string | Object=, native: boolean=}`，除 `label` 外字段详情可参考 [`BreadcrumbItem`](./breadcrumb-item) 组件的属性。
:::warning
默认情况下，最后一项始终会显示成普通文本样式。
:::
^^^
### 插槽
| 名称 | 描述 |
| -- | -- |
| ``default`` | 支持内联模式，直接传入 [`BreadcrumbItem`](./breadcrumb-item) 组件列表。填充后 [`routes`](#props-routes) 属性将被忽略。 |
| ``item`` | [^slot-item] |
| ``separator`` | [^slot-separator] |
^^^slot-item
用于为每个项目自定义内容。默认内容为 `routes` 项目的 `label` 或 [`BreadcrumbItem`]('./breadcrumb-item) 组件的默认插槽。
+++作用域参数
| 名称 | 类型 | 描述 |
| -- | -- | -- |
| `route` | `Object` | `routes` 中的项目。自定义字段亦会绑定到作用域对象中。 |
+++
^^^
^^^slot-separator
面包屑条目之间的分隔符。默认显示全局配置的分隔图标。
:::warning
当使用 Vue.js `2.5.17` 及以下版本时，必须绑定 `slot-scope` 使用。
:::
^^^
### 事件
| 名称 | 描述 |
| -- | -- |
| ``redirect`` | [^redirect] |
^^^redirect
点击 `type` 为 `link` 的项目时将触发该事件，回调参数为 `(event, route, index)`。
+++参数详情
| 名称 | 类型 | 描述 |
| -- | -- | -- |
| ``event`` | [Event](https://developer.mozilla.org/zh-CN/docs/Web/Events/click) | 事件对象。 |
| ``route`` | `Object` | 面包屑条目对象。 |
| ``index`` | `number` | 当前点击条目的索引。 |
+++
^^^

111
one/docs/components/button-group.md
View File

@ -1,111 +0,0 @@
# ButtonGroup <small>按钮组</small>
## 示例
### 风格
可选的 [`ui`](#props-ui) 属性值：`primary` / `strong` / `basic`。
[[ demo src="/demo/button-group/style.vue" ]]
### 尺寸
可选的 [`ui`](#props-ui) 属性值：`xs` / `s` / `m` / `l` / `xl`。
[[ demo src="/demo/button-group/size.vue" ]]
### 使用数据源
可以使用 [`items`](#props-items) 属性通过数据源指定按钮内容。
[[ demo src="/demo/button-group/items.vue" ]]
### 禁用状态
设置 [`disabled`](#props-disabled) 来使按钮处于禁用状态。
[[ demo src="/demo/button-group/disabled.vue" ]]
## API
### 属性
| 名称 | 类型 | 默认值 | 描述 |
| -- | -- | -- | -- |
| ``ui`` | `string=` | - | [^ui] |
| ``items`` | `Array<Object>` | - | [^items] |
| ``disabled`` | `boolean=` | `false` | 按钮是否为禁用状态。 |
^^^ui
预设样式。为空格分隔的一组枚举值的组合。
+++枚举值
| 值 | 描述 |
| -- | -- |
| `primary` | 主要按钮，背景显示为主题色。 |
| `strong` | 加强样式。 |
| `basic` | 基础样式。 |
| `xs` | 超小尺寸样式。 |
| `s` | 小尺寸样式。 |
| `m` | 中尺寸样式。 |
| `l` | 大尺寸样式。 |
| `xl` | 超大尺寸样式。 |
+++
^^^
^^^items
按钮数据项的数组，项目类型为 `{label, value}`。
+++字段详情
| 名称 | 类型 | 描述 |
| -- | -- | -- |
| `label` | `string` | 按钮文本。 |
| `value` | `*=` | 如传入 `string` 类型的值，则会在点击按钮时触发同名的事件。 |
+++
^^^
### 插槽
| 名称 | 描述 |
| -- | -- |
| ``default`` | 按钮组内容区。 |
| ``item`` | [^slot-item] |
^^^slot-item
用来定制每个按钮的内容。
默认内容：[`label`](#props-label) 属性值。
+++作用域参数
| 名称 | 类型 | 描述 |
| -- | -- | -- |
| `label` | `string` | 按钮文本。 |
| `value` | `*=` | 按钮项的 `value` 值。 |
| `index` | `number` | 按钮在 `items` 中的序号。 |
| `disabled` | `boolean=` | 按钮是否禁用。 |
+++
另外，`items` 内数据项中除了上面描述的字段之外的其它字段也会自动通过 `v-bind` 进行绑定到作用域参数上。
^^^
### 事件
| 名称 | 描述 |
| -- | -- |
| ``click`` | [^click-event] |
| <var>&lt;value&gt;</var> | [^value-var-event] |
^^^click-event
点击后触发，回调参数为 `(item, index)`。
+++参数详情
| 名称 | 类型 | 描述 |
| -- | -- | -- |
| `item` | `{label: string, value: *=, ...}` | 数据项。 |
| `index` | `number` | 按钮在 `items` 中的序号。 |
+++
^^^
^^^value-var-event
如果对应数据项有字符串类型的 `value` 字段，则在点击后触发名为 `value` 值的事件，参数与 [`click`](#events-click) 事件相同。
^^^

93
one/docs/components/button.md
View File

@ -1,93 +0,0 @@
# Button <small>按钮</small>
## 示例
### 风格
可选的风格 [`ui`](#props-ui) 属性值：`primary` / `strong` / `translucent` / `text` / `icon`。
[[ demo src="/demo/button/style.vue" ]]
### 尺寸
可选的尺寸 [`ui`](#props-ui) 属性值：`xs` / `s` / `m` / `l` / `xl`。
[[ demo src="/demo/button/size.vue" ]]
### 禁用状态
设置 [`disabled`](#props-disabled) 来使按钮处于禁用状态。
[[ demo src="/demo/button/disabled.vue" ]]
### 加载状态
设置 [`loading`](#props-loading) 来使按钮处于加载状态，无法点击。
[[ demo src="/demo/button/loading.vue" ]]
## API
### 属性
| 名称 | 类型 | 默认值 | 描述 |
| -- | -- | -- | -- |
| ``ui`` | `string=` | - | [^ui] |
| ``disabled`` | `boolean=` | `false` | 是否为禁用状态。 |
| ``type`` | `string=` | `'button'` | [^type] |
| ``loading`` | `boolean=` | `false` | 是否处于加载状态。加载状态下按钮不响应用户交互。 |
^^^ui
预设样式。为空格分隔的一组枚举值的组合。
+++枚举值
| 值 | 描述 |
| -- | -- |
| `normal` | 普通按钮，为默认样式。 |
| `primary` | 主要按钮，背景显示为主题色。 |
| `basic` | 基础按钮。 |
| `strong` | 加强样式。可单独使用，也可配合 `text` / `icon` 样式使用。 |
| `translucent` | 半透明样式，用于深色背景。 |
| `text` | 纯文字样式，没有背景色及边框。 |
| `icon` | 纯图标样式，没有背景色及边框。 |
| `aux` | 辅助按钮，用于配合 `text` / `icon` 样式使用。 |
| `square` | 方形按钮。可配合其它样式一同使用。 |
| `xs` | 超小尺寸样式。 |
| `s` | 小尺寸样式。 |
| `m` | 中尺寸样式。 |
| `l` | 大尺寸样式。 |
| `xl` | 超大尺寸样式。 |
+++
^^^
^^^type
按钮类型。参见原生 `<button>` 元素的 [`type`](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/button#attr-type)。
+++枚举值
| 值 | 描述 |
| -- | -- |
| `button` | 普通按钮。 |
| `submit` | 提交按钮，点击会触发外部表单提交。 |
| `reset` | 重置按钮，点击会触发外部表单重置为初始值。 |
+++
:::warning
注意，默认值与原生 `<button>` 元素不同。需要触发表单提交时请显式设置为 `submit`。
:::
^^^
### 插槽
| 名称 | 描述 |
| -- | -- |
| ``default`` | 按钮上显示的内容。 |
### 事件
`Button` 组件支持所有原生 `<button>` 元素支持的原生事件，回调函数的参数均为相应的原生事件对象。
### 图标
| 名称 | 描述 |
| -- | -- |
| ``loading`` | 加载状态。 |

153
one/docs/components/calendar.md
View File

@ -1,153 +0,0 @@
# Calendar <small>日历</small>
## 示例
### 单日选择
默认情况下，单击日期可以选中一个日期。
[[ demo src="/demo/calendar/default.vue" ]]
### 多日、日期范围选择
配置 [`multiple`](#props-multiple) 属性时，可以选择多个日期。配置 [`range`](#props-range) 属性时，可以选择一个日期范围。
[[ demo src="/demo/calendar/range-multiple.vue" ]]
### 多日期范围选择
同时配置 [`multiple`](#props-multiple) 及 [`range`](#props-range) 属性时，可以选择多段日期范围。配置 [`panel`](#props-panel) 属性时，可以指定日历面板的数量。两次选择的时间段合并的策略为，若从未选日期开始选择则选中该时段，否则则取消选择该时段。
[[ demo src="/demo/calendar/multiple-ranges.vue" ]]
### 日历类型
设置 [`type`](#props-type) 来指定日历的类型：年、月、日。
[[ demo src="/demo/calendar/type.vue" ]]
### 显示非本月日期
设置 [`fill-month`](#props-fill-month) 来控制是否显示非本月日期。
[[ demo src="/demo/calendar/fill-month.vue" ]]
### 禁用日期
设置 [`disabled-date`](#props-disabled-date) 来自定义指定日期是否禁用。
[[ demo src="/demo/calendar/disabled-date.vue" ]]
### 自定义日期样式
设置 [`date-class`](#props-date-class) 来自定义指定日期的 `class`。
[[ demo src="/demo/calendar/date-class.vue" ]]
### 自定义日期内容
通过 [`before`](#slots-before) 插槽来自定义前置内容。
[[ demo src="/demo/calendar/slots.vue" ]]
## API
### 属性
| 名称 | 类型 | 默认值 | 描述 |
| -- | -- | -- | -- |
| ``type`` | `string=` | `'date'` | 日历的类型，可用值为 `'date'` / `'month'` / `'year'`，分别对应日期/月/年视图。 |
| ``multiple`` | `boolean=` | `false` | 是否可以选择多个日期（范围）。 |
| ``range`` | `boolean=` | `false` | 是否选择日期范围。 |
| ``selected`` | `Date | Array=` | - | [^selected] |
| ``panel`` | `number=` | `1` | 日历面板数量。 |
| ``today`` | `Date=` | `new Date()` | 「今天」的日期。 |
| ``week-start`` | `number=` | `calendar.weekStart` | 一周的起始。可进行[全局配置](#configs-calendar-weekStart)。 |
| ``fill-month`` | `boolean=` | `true` | 当只有一个面板时，是否要在当前月份面板显示非本月日期。 |
| ``date-class`` | `string | Array | Object | function=` | `{}` | 特定日期的自定义 HTML `class`。传非函数时，数据格式为所有 [Vue 支持的 `class` 表达式](https://cn.vuejs.org/v2/guide/class-and-style.html#%E7%BB%91%E5%AE%9A-HTML-Class)；传函数时，签名为 `function(Date): string | Array<string>|Object<string, boolean>`，返回值格式亦为所有 Vue 支持的 `class` 表达式。 |
| ``disabled-date`` | `function(Date, Date=): boolean=` | `() => false` | 用于自定义指定日期是否禁用。第一个参数为需要判断是否禁用的日期。当处于范围选择过程中且已经选择了一个日期，会作为第二个参数传入。 |
| ``disabled`` | `boolean=` | `false` | 是否为禁用状态。 |
| ``readonly`` | `boolean=` | `false` | 是否为只读状态。 |
^^^selected
:::badges
`v-model`
:::
已选日期（范围）的值，根据 [`multiple`](#props-multiple) 和 [`range`](#props-range) 属性值的不同，数据格式不同。
+++类型详情
| `multiple` | `range` | 类型 |
| -- | -- | -- |
| `false` | `false` | `Date` |
| `true` | `false` | `Array<Date>` |
| `false` | `true` | `[Date, Date]` |
| `true` | `true` | `Array<[Date, Date]>` |
+++
^^^
### 插槽
| 名称 | 描述 |
| -- | -- |
| ``before`` | 日历内，面板上方可供定制的区域。 |
| ``after`` | 日历内，面板下方可供定制的区域。 |
| ``date`` | [^slot-date] |
^^^slot-date
单日单元格内的区域，可用来定制每一天对应区域的内容。
默认内容：对应日期的 `date`。
+++作用域参数
| 名称 | 类型 | 描述 |
| -- | -- | -- |
| `year` | `number` | 完整年份。 |
| `month` | `number` | 月份数，`0` 表示一月。 |
| `date` | `number` | 月份内的日期。 |
+++
^^^
### 事件
| 名称 | 描述 |
| -- | -- |
| ``select`` | [^event-select] |
| ``selectstart`` | 选择日期范围时，选择完起始日期时触发，回调参数 `(picking: Date)`，表示已选的起始项日期。 |
| ``selectprogress`` | [^event-selectprogress] |
| ``viewchange`` | 面板显示的月份发生变化时触发。回调参数 `(month: Object<{year: number, month: number, index: number}>)`，表示当前年月（`month` 为 `0` 表示一月）。 |
^^^event-select
:::badges
`v-model`
:::
选择修改后触发，回调参数为 `(selected)`。数据类型和 [`selected`](#props-selected) 属性一致。
^^^
^^^event-selectprogress
选择日期范围时，在已经选择开始日期后，通过鼠标或键盘交互标记到的结束日期变更时触发。回调参数为 `(picking)`，表示当前标记的日期范围，类型取决于 [`multiple`](#props-multiple) 属性的值。
+++参数详请
| `multiple` | 类型 |
| -- | -- |
| `false` | `[Date, Date]` |
| `true` | `Array<[Date, Date]>` |
+++
^^^
### 全局配置
| 名称 | 类型 | 默认值 | 描述 |
| -- | -- | -- | -- |
| ``calendar.weekStart`` | `number` | `1` | 一周的第一天是星期几。周一到周日分别对应 `1` 到 `7`。 |
### 图标
| 名称 | 描述 |
| -- | -- |
| ``backward`` | 上一年。 |
| ``prev`` | 上一页。 |
| ``next`` | 下一页。 |
| ``forward`` | 下一年。 |
| ``expand`` | 展开下拉菜单。 |

164
one/docs/components/carousel.md
View File

@ -1,164 +0,0 @@
# Carousel <small>轮播</small>
## 示例
### 切换
使用 [`index`](#props-index) 来控制当前显示的项目。
[[ demo src="/demo/carousel/switch.vue" ]]
### 进度指示器
使用 [`indicator`](#props-indicator) 属性来指定进度指示器类型。
[[ demo src="/demo/carousel/indicator.vue" ]]
### 自动切换
指定 [`autoplay`](#props-autoplay) 属性来允许自动播放。
[[ demo src="/demo/carousel/autoplay.vue" ]]
### 切换效果
指定 [`effect`](#props-effect) 属性来设置切换效果。
[[ demo src="/demo/carousel/effect.vue" ]]
### 纵向布局
指定 [`vertical`](#props-vertical) 属性来允许纵向布局的轮播。
使用 [`controls-position`](#props-controls-position) 属性来切换按钮相对于布局方向的位置。
[[ demo src="/demo/carousel/vertical.vue" ]]
### 轮播项设置
[`slides-per-view`](#props-slides-per-view) 属性来指定同时显示多少个轮播项。
[`slides-per-group`](#props-slides-per-group) 属性来指定每次前后切换的一组包含多少个轮播项。
[[ demo src="/demo/carousel/slides.vue" ]]
### 轮播项纵横比
设置 [`slide-aspect-ratio`](#props-slide-aspect-ratio) 属性来指定每个轮播项的纵横比。
[[ demo src="/demo/carousel/ratio.vue" ]]
## API
### 属性
| 名称 | 类型 | 默认值 | 描述 |
| -- | -- | -- | -- |
| ``datasource`` | `Array<Object>` | `[]` | [^datasource] |
| ``index`` | `number=` | `0` | [^index] |
| ``indicator`` | `string=` | `'radio'` | [^indicator] |
| ``switch-trigger`` | `string=` | `'click'` | [^switch-trigger] |
| ``autoplay`` | `boolean=` | `false` | 是否自动轮播。 |
| ``pause-on-hover`` | `boolean=` | `false` | 在自动轮播时，鼠标悬浮后是否暂停。 |
| ``interval`` | `number=` | `3000` | 在自动轮播时，切换间隔的毫秒数。 |
| ``wrap`` | `boolean=` | `false` | 是否可以循环播放。 |
| ``effect`` | `'fade' | 'slide'` | `'fade'` | 指定轮播切换效果，其中 `fade` 仅在切换组个数与同时显示个数相同时生效。 |
| ``vertical`` | `boolean=` | `false` | 是否是纵向布局的轮播。 |
| ``indicator-align`` | `'start' | 'end'` | `start` | 用于支持指示器的相对于布局方向的位置。 |
| ``indicator-position`` | `'outside' | 'inside'` | `inside` | 用于支持指示器显示在轮播容器的内部/外部。 |
| ``controls`` | `boolean` | `false` | 是否显示切换按钮。 |
| ``controls-position`` | `'outside' | 'inside'` | `inside` | 用于支持切换按钮相对于布局方向的位置。 |
| ``slide-aspect-ratio`` | `number= | '${number}/${number}'` | - | 指定不同轮播项类型的默认配置。 |
| ``options`` | `Object=` | `{ video: { muted: true, autoplay: true, controls: true, loop: true } }` | 用于指定每个轮播项的纵横比。 |
| ``slides-per-view`` | `number=` | `1` | 指定同时显示多少个轮播项。 |
| ``slides-per-group`` | `number=` | `1` | 指定每次前后切换的一组包含多少个轮播项。 |
| ``lazy`` | `boolean= | { preload: number }` | `false` | [^lazy] |
^^^datasource
轮播图数据源，项目类型为：`{src, alt, label, type}`。
+++字段详情
| 名称 | 类型 | 描述 |
| -- | -- | -- |
| `src` | `string` | 媒体源地址。 |
| `alt` | `string` | 媒体的降级描述文本。 |
| `label` | `string` | 媒体的描述性标题。 |
| `type` | `string` | 媒体的描述性标题，视频需要指定 `video`。 |
+++
^^^
^^^index
:::badges
`.sync`
:::
当前轮播图序号。
^^^
^^^indicator
播放进度指示器的显示模式。
+++枚举值
| 值 | 描述 |
| -- | -- |
| `bar` | 单选按钮型，用于替换之前的 `radio`（`radio` 也保持兼容支持）。 |
| `number` | 显示「当前页数/全部页数」文字提示。 |
| `dot` | 圆点型。 |
| `none` | 不显示指示器。 |
^^^
^^^switch-trigger
当显示单选型指示器时，触发切换的操作。
+++枚举值
| 值 | 描述 |
| -- | -- |
| `click` | 点击时切换。 |
| `hover` | 鼠标悬浮时切换。 |
+++
^^^
^^^lazy
指定是否懒加载轮播资源。
+++详情
| 名称 | 描述 |
| -- | -- | -- |
| `false` | 不懒加载资源。 |
| `true` | 预加载当前展示项目的前后 1 个资源。 |
| `{ preload: number }` | 预加载当前展示项目的前后指定数量个资源。 |
+++
^^^
### 插槽
| 名称 | 描述 |
| -- | -- |
| ``item`` | [^slot-item] |
^^^slot-item
可用来定制每个轮播项的区域。
默认内容：轮播项图片。
作用域参数为 [`datasource`](#props-datasource) 属性每个列表项的内容（可以有自定义字段）加上 `index: number` 表示轮播项的序号。即整个 `slot-scope` 绑定的值为 `{src, alt, label, index, ...}`。
^^^
### 事件
| 名称 | 描述 |
| -- | -- |
| ``change`` | [^event-change] |
^^^event-change
切换后触发，回调参数为 `(to: number, from: number)`。分别表示切换后的序号和切换前的序号。
^^^
### 图标
| 名称 | 描述 |
| -- | -- |
| ``prev`` | 上一页。 |
| ``next`` | 下一页。 |

314
one/docs/components/cascader.md
View File

@ -1,314 +0,0 @@
# Cascader <small>级联器</small>
## 示例
### 尺寸
可选的尺寸 [`ui`](#props-ui) 属性值：`xs` / `s` / `m` / `l`。
[[ demo src="/demo/cascader/size.vue" ]]
### 内联模式
使用 [`inline`](#props-inline) 属性来开启内联模式。
[[ demo src="/demo/cascader/inline.vue" ]]
### 搜索选项
使用 [`searchable`](#props-searchable) 属性来开启选项搜索。
[[ demo src="/demo/cascader/searchable.vue" ]]
### 多选
使用 [`multiple`](#props-multiple) 属性来开启多选模式。
[[ demo src="/demo/cascader/multiple.vue" ]]
### 选择模式
使用 [`select-mode`](#props-select-mode) 属性来控制在单选模式下哪些项目可以被选中。
[[ demo src="/demo/cascader/select-mode.vue" ]]
### 子项展开时机
使用 [`column-trigger`](#props-column-trigger) 属性来控制下拉面板中下级的展开时机。
[[ demo src="/demo/cascader/column-trigger.vue" ]]
### 渲染选中值
使用 [`value-display`](#props-value-display) 属性来控制选中值如何展示。
[[ demo src="/demo/cascader/value-display.vue" ]]
## API
### 属性
| 名称 | 类型 | 默认值 | 描述 |
| -- | -- | -- | -- |
| ``ui`` | `string=` | - | [^ui] |
| ``options`` | `Array<Object>` | - | [^options] |
| ``value`` | `Array<*>|*` | - | [^value] |
| ``multiple`` | `boolean` | `false` | 是否允许多选。 |
| ``inline`` | `boolean` | `false` | 下拉面板是否以内联模式展示（展开选项将拆分面板而非向外扩展）。 |
| ``max`` | `number` | - | 多选时允许选择的项目上限。 |
| ``placeholder`` | `string` | `cascader.placeholder` | 未选择时的占位文本。 |
| ``clearable`` | `boolean` | `false` | 是否可以清除已选内容。 |
| ``searchable`` | `boolean` | `false` | 是否允许搜索选项。 |
| ``expanded`` | `boolean=` | `false` | [^expanded] |
| ``column-trigger`` | `'hover' | 'click'` | `'click'` | [^column-trigger] |
| ``select-mode`` | `'leaf-only' | 'any'` | `'any'` | [^select-mode] |
| ``column-width`` | `number | string` | - | [^column-width] |
| ``show-select-all`` | `boolean` | `false` | 在多选模式下是否有全选按钮。 |
| ``value-display`` | `'complete' | 'simple'` | `'simple'` | [^value-display] |
| ``merge-checked`` | `string=` | `keep-all` | [^merge-checked] |
| ``include-indeterminate`` | `boolean` | `false` | 是否将半选状态的节点加入已选项。[`datasource`](#props-datasource) 节点中的非叶子节点若有部分子孙节点被选中，则为半选状态。 |
| ``disabled`` | `boolean=` | `false` | 是否为禁用状态。 |
| ``readonly`` | `boolean=` | `false` | 是否为只读状态。 |
| ``overlay-class`` | `string | Array | Object=` | - | 参考 [`Overlay`](./overlay) 组件的 [`overlay-class`](./overlay#props-overlay-class) 属性。 |
| ``overlay-style`` | `string | Array | Object=` | - | 参考 [`Overlay`](./overlay) 组件的 [`overlay-style`](./overlay#props-overlay-style) 属性。 |
| ``match`` | `(item, keyword, { ancestors }) => boolean | Array<[number, number]>` | - | 支持自定义高亮逻辑， 默认大小写不敏感，参考 [`Autocomplete`](./Autocomplete#自定义搜索逻辑)。 |
| ``filter`` | `(item, keyword, { ancestors, offsets }) => boolean` | - | 支持自定义搜索命中逻辑，参考 [`Autocomplete`](./Autocomplete#自定义搜索逻辑)。 |
^^^ui
预设样式。
+++枚举值
| 值 | 描述 |
| -- | -- |
| `xs` | 超小尺寸样式。 |
| `s` | 小尺寸样式。 |
| `m` | 中尺寸样式。 |
| `l` | 大尺寸样式。 |
+++
^^^
^^^options
选项列表，项目的类型为 `{label, value, options, disabled, position, ...}`。
+++字段详情
| 名称 | 类型 | 描述 |
| -- | -- | -- |
| `label` | `string` | 选项的文字说明。 |
| `value` | `*` | 选项对应的值。 |
| `position` | `string` | 下级节点如何展示，默认弹出，可以设置 `inline` 来内联显示。 |
| `options` | `Array<Object>=` | 选项的子选项数组，数组项类型同 [`options`](#props-options) 属性数组项。 |
| `disabled` | `boolean=` | 选项是否为禁用。 |
+++
^^^
^^^value
:::badges
`v-model`
:::
已选值。
^^^
^^^expanded
:::badges
`.sync`
:::
下拉菜单是否展开。
^^^
^^^column-trigger
下拉面板中下级的展开时机。
+++枚举值
| 值 | 描述 |
| -- | -- |
| `hover` | 光标悬浮展开下一级。 |
| `click` | 点击展开下一级。 |
+++
^^^
^^^select-mode
在单选模式下控制哪些项目可以选中。
+++枚举值
| 值 | 描述 |
| -- | -- |
| `leaf-only` | 只有叶子节点可以选中。 |
| `any` | 每一级都可以选中。 |
+++
^^^
^^^column-width
当下拉面板中有多列时，统一控制除了最后一列之外的列宽度。
当该值是数值或者能转换成数值时，会当成像素值。
^^^
^^^value-display
控制选中值如何展示。
+++枚举值
| 值 | 描述 |
| -- | -- |
| `complete` | 完整展示选中值的路径，如“中国 > 上海”。 |
| `simple` | 仅仅展示选中值文本。 |
+++
^^^
^^^merge-checked
选中值的合并策略。当某个节点下的所有子节点都被选中时，可以选择只保留父节点、只保留子节点或都保留。
+++枚举值
| 值 | 描述 |
| -- | -- |
| `keep-all` | 父子节点都会在选中值中。 |
| `upwards` | 尽可能往祖先方向合并选中值。 |
| `downwards` | 尽可能往后代方向合并选中值。 |
+++
^^^
### 插槽
| 名称 | 描述 |
| -- | -- |
| ``trigger`` | [^slot-trigger] |
| ``pane`` | 下拉面板中的内容插槽。作用域参数同 [`trigger`](#slots-trigger) 插槽。 |
| ``before`` | 选项列表前的内容。无默认内容。作用域参数同 [`trigger`](#slots-trigger) 插槽。 |
| ``after`` | 选项列表后的内容。无默认内容。作用域参数同 [`trigger`](#slots-trigger) 插槽。 |
| ``column-before`` | [^slot-column-before] |
| ``column-after`` | 下拉面板中每列后的区域。无默认内容。作用域参数同 [`column-before`](#slots-column-before) 插槽。 |
| ``label`` | [^slot-label] |
| ``option-label`` | [^slot-option-label] |
| ``option`` | [^slot-option] |
| ``selected`` | [^slot-selected] |
^^^slot-trigger
整个下拉触发区域。
默认内容：下拉按钮。
+++作用域参数
| 名称 | 类型 | 描述 |
| -- | -- | -- |
| `value` | `*` | 已选项值。 |
| `selected` | `Object` | 已选项对象。 |
| `expanded` | `boolean` | 下拉菜单是否展开。 |
| `keyword` | `string` | 搜索值。 |
| `select` | `function(option: Object): void` | 用于设置已选项。 |
| `toggle` | `function(force: boolean): void` | 用于切换下拉菜单展开状态。 |
| `clear` | `function(): void` | 用于清除已选项。 |
| `remove` | `function(option: Object): void` | 用于删除某个已选项，参数 `option` 是该已选项。 |
| `updateKeyword` | `function(keyword: string): void` | 用于修改搜索值。 |
+++
^^^
^^^slot-column-before
下拉面板中每列前的区域。无默认内容。
+++作用域参数
| 名称 | 类型 | 描述 |
| -- | -- | -- |
| `option` | `Object` | 该列的父选项，其中 `options` 属性可以拿到当前列的数据。 |
+++
^^^
^^^slot-label
下拉按钮文本区域。
默认内容：已选项对应的 `label` 属性值或内联模式下已选项的文本内容。
+++作用域参数
| 名称 | 类型 | 描述 |
| -- | -- | -- |
| `label` | `string` | 已选项文本。 |
| `value` | `*` | 已选项值。 |
| `checked` | `boolean` | 是否已选择某个值。 |
| `disabled` | `boolean=` | 选项是否禁用。 |
+++
另外，当前选项数据中除了上面描述的字段之外的其它字段也会自动通过 `v-bind` 进行绑定到作用域参数上。
^^^
^^^slot-option-label
下拉选项（不带 `options` 的选项）的文本区域。
默认内容：选项的 `label` 属性值。
+++作用域参数
| 名称 | 类型 | 描述 |
| -- | -- | -- |
| `option` | `Object` | 当前选项。 |
| `select` | `function(option: Object): void` | 选中当前选项。 |
| `expand` | `function(option: Object): void` | 展开当前选项。 |
| `click` | `function(option: Object): void` | 点击当前选项内容区，会按情况选中和(或)展开当前选项。 |
+++
^^^
^^^slot-option
可供选择的下拉选项的整个区域。
默认内容：`Option` 内的组件默认结构。
作用域参数同 [`option-label`](#slots-option-label) 插槽。
^^^
^^^slot-selected
选中值渲染区域。
默认内容：单选时渲染选中项目的文本；多选时将每个选中项目的标签渲染成`Tag`。
+++单选时的作用域参数
| 名称 | 类型 | 描述 |
| -- | -- | -- |
| `label` | `string` | 选项文本。 |
| `value` | `*` | 选项值。 |
| `checked` | `boolean` | 是否已选择。 |
| `disabled` | `boolean=` | 选项是否禁用。 |
+++
+++多选时的作用域参数
| 名称 | 类型 | 描述 |
| -- | -- | -- |
| `selected` | `Array<Object>` | 选中项数据的数组。 |
+++
^^^
### 事件
| 名称 | 描述 |
| -- | -- |
| ``input`` | 输入搜索关键词时触发。回调参数为 `(value: string)`，`value` 为输入框的 `value` 值。 |
| ``select`` | [^event-select] |
| ``afteropen`` | 下拉打开后触发。 |
| ``afterclose`` | 下拉关闭后触发。 |
^^^event-select
:::badges
`v-model`
:::
选中状态变化后触发，回调参数为 `(value: *)`。`value` 为当前已选项 `value` 字段的值。
^^^
### 全局配置
| 配置项 | 类型 | 默认值 | 描述 |
| -- | -- | -- | -- |
| ``cascader.placeholder`` | `string` | `@@cascader.placeholder` | 未选择时的占位内容。 |
:::tip
`@@` 开头的值表示引用多语言配置中的相应字段。
:::
### 图标
| 名称 | 描述 |
| -- | -- |
| ``expand`` | 展开下拉。 |
| ``collapse`` | 收起下拉。 |
| ``clear`` | 清除。 |
| ``separator`` | 分隔符。 |

124
one/docs/components/check-button-group.md
View File

@ -1,124 +0,0 @@
# CheckButtonGroup <small>复选按钮组</small>
## 示例
### 尺寸
可选的 [`ui`](#props-ui) 属性值：`s` / `m`。
[[ demo src="/demo/check-button-group/default.vue" ]]
### 简单样式
设置 [`ui`](#props-ui) 属性值：`simple` 来指定简单样式。
[[ demo src="/demo/check-button-group/simple.vue" ]]
### 单复选共存
可以使用 [`exclusive`](#props-exclusive) 选项与 [`empty-value`](#props-empty-value) 实现一些单复选共存的场景。
[[ demo src="/demo/check-button-group/exclusive.vue" ]]
### 额外描述
在数据源的项目中设置 `desc` 字段或者通过 [`desc`](#slots-desc) 插槽来指定额外描述。额外描述会在悬浮时显示。
[[ demo src="/demo/check-button-group/desc.vue" ]]
### 最小宽度
通过设置 [`ui`](#props-ui) 属性值 `stable` 来开启项目的最小宽度。
[[ demo src="/demo/check-button-group/stable.vue" ]]
## API
### 属性
| 名称 | 类型 | 默认值 | 描述 |
| -- | -- | -- | -- |
| ``ui`` | `string=` | - | [^ui] |
| ``items`` | `Array<Object>` | `[]` | [^items] |
| ``value`` | `Array` | `[]` | [^value] |
| ``disabled`` | `boolean=` | `false` | 是否为禁用状态。 |
| ``readonly`` | `boolean=` | `false` | 是否为只读状态。 |
| ``empty-value`` | `*` | - | 当取消所有选择时组件需要默认选中的值，通常用于存在 `exclusive` 选项的场景。 |
^^^ui
预设样式。
+++枚举值
| 值 | 描述 |
| -- | -- |
| `s` | 小尺寸样式。 |
| `m` | 中尺寸样式。 |
| `simple` | 简单样式。 |
| `stable` | 稳定样式。会给所有按钮添加一个最小宽度以使布局更加稳定，多行之间更容易对齐。 |
^^^
^^^items
复选按钮组数据源，项目类型为 `{ label, value, disabled, exclusive, desc, ... }`。
+++字段详情
| 名称 | 类型 | 描述 |
| -- | -- | -- |
| `label` | `string` | 选项的文字说明。 |
| `value` | `*` | 选项对应的值。 |
| `disabled` | `boolean=` | 选项是否为禁用。 |
| `exclusive` | `boolean=` | 选项是否为排它项。当选项为排它项时，选中该项将取消选中其它所有选项。 |
| `desc` | `string` | 选项的额外描述信息。 |
+++
^^^
^^^value
:::badges
`v-model`
:::
`items` 中已选项的 `value` 列表。
^^^
### 插槽
| 名称 | 描述 |
| -- | -- |
| ``item`` | [^slot-item] |
| ``desc`` | 按钮的额外描述信息，作用域参数同 [`item`](#slots-item) 插槽。 |
^^^slot-item
按钮内文本区域。
默认内容：`label` 属性值。
+++作用域参数
| 名称 | 类型 | 描述 |
| -- | -- | -- |
| `label` | `string` | 选项文本。 |
| `value` | `*` | 选项值。 |
| `index` | `number` | 选项在 `items` 中的序号。 |
| `disabled` | `boolean=` | 选项是否禁用。 |
+++
另外，`items` 内数据项中除了上面描述的字段之外的其它字段也会自动通过 `v-bind` 进行绑定到作用域参数上。
^^^
### 事件
| 名称 | 描述 |
| -- | -- |
| ``change`` | [^event-change] |
^^^event-change
:::badges
`v-model`
:::
选中状态变化后触发，回调参数为 `(value: Array)`。`value` 为当前按钮组已选项内 `value` 字段组成的数组。
^^^
### 图标
| 名称 | 描述 |
| -- | -- |
| ``check`` | 已选标志。 |

104
one/docs/components/checkbox-group.md
View File

@ -1,104 +0,0 @@
# CheckboxGroup <small>复选框组</small>
## 示例
### 尺寸
可选的 [`ui`](#props-ui) 属性值：`s` / `m`。
[[ demo src="/demo/checkbox-group/default.vue" ]]
### 单复选共存
可以使用 [`exclusive`](#props-exclusive) 选项与 [`empty-value`](#props-empty-value) 实现一些单复选共存的场景。
[[ demo src="/demo/checkbox-group/exclusive.vue" ]]
### 额外描述
在数据源的项目中设置 `desc` 字段或者通过 [`desc`](#slots-desc) 插槽来指定额外描述。额外描述会在悬浮时显示。
[[ demo src="/demo/checkbox-group/desc.vue" ]]
## API
### 属性
| 名称 | 类型 | 默认值 | 描述 |
| -- | -- | -- | -- |
| ``ui`` | `string=` | - | [^ui] |
| ``items`` | `Array<Object>` | `[]` | [^items] |
| ``value`` | `Array` | `[]` | [^value] |
| ``disabled`` | `boolean=` | `false` | 是否为禁用状态。 |
| ``readonly`` | `boolean=` | `false` | 是否为只读状态。 |
| ``empty-value`` | `*` | - | 当取消所有选择时组件需要默认选中的值，通常用于存在 `exclusive` 选项的场景。 |
^^^ui
预设样式。
+++枚举值
| 值 | 描述 |
| -- | -- |
| `s` | 小尺寸样式。 |
| `m` | 中尺寸样式。 |
^^^
^^^items
复选框组数据源，项目类型为 `{ label, value, disabled, exclusive, desc, ... }`。
+++字段详情
| 名称 | 类型 | 描述 |
| -- | -- | -- |
| `label` | `string` | 选项的文字说明。 |
| `value` | `*` | 选项对应的值。 |
| `disabled` | `boolean=` | 选项是否为禁用。 |
| `exclusive` | `boolean=` | 选项是否为排它项。 |
| `desc` | `string` | 选项的额外描述信息。 |
+++
^^^
^^^value
:::badges
`v-model`
:::
`items` 中已选项的 `value` 列表。
^^^
### 插槽
| 名称 | 描述 |
| -- | -- |
| ``item`` | [^slot-item] |
| ``desc`` | 按钮的额外描述信息，作用域参数同 [`item`](#slots-item) 插槽。 |
^^^slot-item
选项描述文本区域。
默认内容：`label` 属性值。
+++作用域参数
| 名称 | 类型 | 描述 |
| -- | -- | -- |
| `label` | `string` | 选项文本。 |
| `value` | `*` | 选项值。 |
| `index` | `number` | 选项在 `items` 中的序号。 |
| `disabled` | `boolean=` | 选项是否禁用。 |
+++
另外，`items` 内数据项中除了上面描述的字段之外的其它字段也会自动通过 `v-bind` 进行绑定到作用域参数上。
^^^
### 事件
| 名称 | 描述 |
| -- | -- |
| ``change`` | [^event-change] |
^^^event-change
:::badges
`v-model`
:::
选中状态变化后触发，回调参数为 `(value: Array)`。`value` 为当前复选框组已选项内 `value` 字段组成的数组。
^^^

83
one/docs/components/checkbox.md
View File

@ -1,83 +0,0 @@
# Checkbox <small>复选框</small>
## 示例
### 尺寸
可选的 [`ui`](#props-ui) 属性值：`s` / `m`。
[[ demo src="/demo/checkbox/size.vue" ]]
### 值设定
可以通过设置 [`true-value`](#props-true-value) 和 [`false-value`](#props-false-value) 属性 `v-model` 的值。
[[ demo src="/demo/checkbox/value.vue" ]]
## API
### 属性
| 名称 | 类型 | 默认值 | 描述 |
| -- | -- | -- | -- |
| ``ui`` | `string=` | - | [^ui] |
| ``checked`` | `boolean=` | `false` | [^checked] |
| ``value`` | `*` | - | 当 `v-model` 绑定到数组时，代表当前复选框的值。 |
| ``true-value`` | `*=` | `true` | 选中状态对应的值。 |
| ``false-value`` | `*=` | `false` | 未选状态对应的值。 |
| ``indeterminate`` | `boolean=` | `false` | 是否处于半选状态。 |
| ``disabled`` | `boolean=` | `false` | 是否为禁用状态。 |
| ``readonly`` | `boolean=` | `false` | 是否为只读状态。 |
^^^ui
预设样式。
+++枚举值
| 值 | 描述 |
| -- | -- |
| `s` | 小尺寸样式。 |
| `m` | 中尺寸样式。 |
+++
^^^
^^^checked
:::badges
`.sync`
:::
是否处于选中状态。
^^^
### 插槽
| 名称 | 描述 |
| -- | -- |
| ``default`` | 复选框的描述文本，点击时会切换选择状态。无默认内容。 |
### 事件
| 名称 | 描述 |
| -- | -- |
| ``change`` | 用户切换选中状态时触发，回调参数为 `(checked: boolean)`。`checked` 表示当前是否选中。 |
| ``input`` | [^event-input] |
^^^event-input
:::badges
`v-model`
:::
选中状态变化后触发，回调参数为 `(val: *)`。`val` 为当前 `v-model` 的值。与 [`change`](#events-change) 事件不同，`input` 事件在数据操作导致状态变化时也会触发。
^^^
此外，`Checkbox` 支持如下的原生事件：
`auxclick`、`click`、`contextmenu`、`dblclick`、`mousedown`、`mouseenter`、`mouseleave`、`mousemove`、`mouseover`、`mouseout`、`mouseup`、`select`、`wheel`、`keydown`、`keypress`、`keyup`、`focus`、`blur`、`focusin`、`focusout`。
回调参数均为相应的原生事件对象。
### 图标
| 名称 | 描述 |
| -- | -- |
| ``checked`` | 已选状态。 |
| ``indeterminate`` | 半选状态。 |

97
one/docs/components/collapse.md
View File

@ -1,97 +0,0 @@
# Collapse <small>折叠面板</small>
:::tip
`Collapse` 组件可以内联在 [`Accordion`](./accordion) 组件中使用。
:::
## 示例
### 尺寸
可选的尺寸 [`ui`](#props-ui) 属性值：`s` / `m`。
[[ demo src="/demo/collapse/size.vue" ]]
### 样式变体
可使用 [`ui`](#props-ui) 属性来设置多种样式变体。
[[ demo src="/demo/collapse/variant.vue" ]]
### 展开图标的位置
可使用 [`toggle-position`](#props-toggle-position) 属性来设置展开图标的位置。
[[ demo src="/demo/collapse/position.vue" ]]
## API
### 属性
| 名称 | 类型 | 默认值 | 描述 |
| -- | -- | -- | -- |
| ``ui`` | `string=` | - | [^ui] |
| ``label`` | `string` | - | 折叠面板标题。 |
| ``expanded`` | `boolean=` | `false` | [^expanded] |
| ``disabled`` | `boolean=` | `false` | 是否为禁用状态。 |
| ``name`` | `string | number=` | - | 当内联在 [`Accordion`](./accordion) 组件中使用时，用来提供已展开面板的唯一标识。 |
| ``toggle-position`` | `string` | `'start'` | [^toggle-position] |
^^^ui
预设样式。为空格分隔的一组枚举值的组合。其中 `simple` / `basic` / `strong` 只能选择一个，不设置则为默认的普通样式。`bordered` / `borderless` 只能选择一个。
+++枚举值
| 值 | 描述 |
| -- | -- |
| `simple` | 简洁样式。 |
| `basic` | 白底样式。 |
| `strong` | 白底样式。 |
| `bordered` | 有外边框。 |
| `borderless` | 无外边框。 |
| `dull` | 标题区域是不否响应鼠标交互改变样式。 |
| `s` | 小尺寸样式。 |
| `m` | 中尺寸样式。 |
+++
^^^
^^^expanded
:::badges
`.sync`
:::
折叠面板是否展开。
^^^
^^^toggle-position
设置展开图标的位置。
+++枚举值
| 值 | 描述 |
| -- | -- |
| `start` | 展开图标位于开始位置，为默认位置。 |
| `end` | 展开图标位于结束位置。 |
| `none` | 无展开图标。 |
+++
^^^
### 插槽
| 名称 | 描述 |
| -- | -- |
| ``default`` | 折叠式面板内容区。 |
| ``title`` | 折叠式面板标题区。 |
| ``title-after`` | 折叠式面板标题后区域。 |
### 事件
| 名称 | 描述 |
| -- | -- |
| ``toggle`` | 点击标题区触发展开/收起时触发。回调参数为 `(expanded: boolean)`。`expanded` 为面板是否展开。 |
### 图标
| 名称 | 描述 |
| -- | -- |
| ``expand`` | 收起状态，点击后展开。 |
| ``collapse`` | 展开状态，点击后收起。 |

131
one/docs/components/column.md
View File

@ -1,131 +0,0 @@
# Column <small>表格列</small>
:::tip
`Column` 组件需要在 [`Table`](./table) 组件内使用。
:::
## 示例
见 [`Table` 示例](./table#示例)。
## API
### 属性
| 名称 | 类型 | 默认值 | 描述 |
| -- | -- | -- | -- |
| ``title`` | `string` | - | 列标题。 |
| ``field`` | `string` | - | 列的键名，对应所属的 `Table` 组件 [`data`](./table#props-data) 属性数据项的某个字段。 |
| ``width`` | `string=|number=` | - | 列宽，值为像素值。 |
| ``sortable`` | `boolean=` | `false` | [^sortable] |
| ``align`` | `string=` | - | 内容对齐方式，支持 `left` / `center` / `right`。 |
| ``span`` | `function(number): Object=` | | [^span] |
| ``desc`` | `string` | - | 表头描述。 |
| ``fixed`` | `boolean | 'left' | 'right'` | `false` | 该列是否固定，`'left'` 表示固定在左侧，`'right'` 表示在右侧。 |
| ``filter-value`` | `*` | - | [^filter-value] |
| ``filter-multiple`` | `boolean=` | `false` | 内置筛选是否为多选。 |
| ``filter-options`` | `Array<Object>` | - | 筛选选项列表，项目的类型为 `{label, value, options, disabled, ...}`，可参考 [`Select`](./select) 组件的 [`options`](./select#props-options) 属性。 |
| ``filter-title`` | `string=` | - | 筛选下拉的标题。 |
| ``allowed-orders`` | `Array` | `[false, 'desc', 'asc']` | [^allowed-orders] |
| ``tooltip`` | `boolean | ((item: Object) => string)` | - | 是否当内容溢出时自动显示悬浮提示。默认显示所属 `Table` 组件 [`data`](./table#props-data) 属性数据项中 [`field`](#props-field) 属性对应的字段值。传入函数时，`item` 参数为整个 data 数据项，返回的字符串将作为提示内容展示。 |
^^^sortable
本列是否支持排序。
:::warning
组件本身不会处理排序逻辑，仅会在排序按钮被点击时在 `Table` 上抛出 [`sort`](./table#events-sort) 事件，使用者需要自行处理排序逻辑。
:::
^^^
^^^span
单元格合并配置。类型为 `function(index: number): { row: number, col: number }`。`index` 为当前行在所属 `Table` 组件的 [`data`](./table#props-data) 属性中的索引。返回值的 `row` / `col` 字段对应于单元格的 `rowspan` / `colspan`，默认值均为 `1`。
:::tip
可以参考 `Table` 组件中的[示例 › 选择模式与排序](./table#选择模式与排序)来了解如何使用。
:::
^^^
^^^filter-value
:::badges
`.sync`
:::
筛选条件取值，值为 `null` 表示未经过筛选。当 `filter-multiple` 为 `true` 时，值为已选项值的数组。
^^^
^^^allowed-orders
指定该列的排序范围。用户点击时将按设定的顺序进行切换。
+++值范围
| 值 | 描述 |
| -- | -- |
| `false` | 不排序。 |
| `'asc'` | 升序。 |
| `'desc'` | 降序。 |
+++
^^^
### 插槽
| 名称 | 描述 |
| -- | -- |
| ``head`` | 列头区域。 |
| ``foot`` | [^slot-foot] |
| ``default`` | [^slot-default] |
| ``sub-row`` | [^slot-sub-row] |
| ``desc`` | [^slot-desc] |
| ``filter`` | [^slot-filter] |
^^^slot-foot
列脚区域。
:::warning
如果所属的 `Table` 组件定义了 [`foot`](./table#slots-foot) 插槽，单独的列脚配置将被覆盖。
:::
^^^
^^^slot-default
单元格的内容。
默认内容：表格 `data` 数据项中与 [`field`](#props-field) 属性对应的字段值。
作用域参数为 `data` 内当前行数据中的所有字段。
^^^
^^^slot-sub-row
展开行后子行的内容。使用此插槽时，内容会作为行展开下方子行中对应列的单元格内容。行数据源来自 `data` 中对应主行数据的 `children` 数组，展开的子行数与 `children` 内数据项数相同，使用相同的列配置。
默认内容：表格 `data[i].children[j]` 数据项中与 [`field`](#props-field) 属性对应的字段值。
作用域参数当前子行数据中的所有字段，以及当前主行对应索引值 `index`。
:::warning
如果所属的 `Table` 组件定义了 [`sub-row`](./table#slots-sub-row) 插槽，单独列的 `sub-row` 插槽将被覆盖。
:::
^^^
^^^slot-desc
表头描述。使用此插槽时会覆盖 `Column` 的 [`desc`](#props-desc) 属性。
+++作用域参数
| 名称 | 类型 | 描述 |
| -- | -- | -- |
| `close` | `function(): void` | 关闭展现描述内容的容器。 |
+++
^^^
^^^slot-filter
筛选浮层的内容。
+++作用域参数
| 名称 | 类型 | 描述 |
| -- | -- | -- |
| `close` | `function(): void` | 关闭筛选浮层。 |
+++
^^^
### 事件
| 名称 | 描述 |
| -- | -- |
| ``filterchange`` | 修改该列过滤器时触发。回调参数为 `(value)`。`value` 为过滤器的当前值。 |

22
one/docs/components/config-provider.md
View File

@ -1,22 +0,0 @@
# ConfigProvider <small>配置器</small>
## 示例
### 配置占位符
[[ demo src="/demo/config-provider/select.vue" ]]
## API
### 属性
| 名称 | 类型 | 默认值 | 描述 |
| -- | -- | -- | -- |
| ``value`` | `Object` | - | 向其后代组件提供的配置值。 |
### 插槽
| 名称 | 描述 |
| -- | -- |
| ``default`` | 需要接收配置的内容，其中 VEUI 的组件会响应对应的配置值。 |

48
one/docs/components/confirm-box.md
View File

@ -1,48 +0,0 @@
# ConfirmBox <small>确认弹框</small>
## 示例
自定义标题和内容区。
[[ demo src="/demo/confirm-box/custom.vue"]]
## API
### 属性
| 名称 | 类型 | 默认值 | 描述 |
| --- | --- | --- | --- |
| ``open`` | `boolean` | `false` | [^open] |
| ``title`` | `string=` | - | 标题。 |
| ``loading`` | `boolean=` | `false` | 是否处于加载状态。处于加载状态时确定按钮也将进入加载状态，无法点击。 |
| ``disabled`` | `boolean=` | `false` | 是否处于禁用状态。处于禁用状态时确定按钮也将进入禁用状态，无法点击。 |
| ``ok-label`` | `string=` | - | “确定”按钮的文字内容。 |
| ``cancel-label`` | `string=` | - | “取消”按钮的文字内容。 |
| ``before-close`` | `function(string): boolean=|Promise<boolean=>` | - | 在将触发关闭的操作发生后执行，参考 [`Dialog`](./dialog) 组件的 [`before-close`](./dialog#props-before-close) 属性。 |
| ``overlay-class`` | `string | Array | Object=` | - | 参考 [`Overlay`](./overlay) 组件的 [`overlay-class`](./overlay#props-overlay-class) 属性。 |
| ``overlay-style`` | `string | Array | Object=` | - | 参考 [`Overlay`](./overlay) 组件的 [`overlay-style`](./overlay#props-overlay-style) 属性。 |
^^^open
:::badges
`.sync`
:::
是否显示确认弹框。
^^^
### 插槽
| 名称 | 描述 |
| -- | -- |
| ``default`` | 内容区。 |
| ``title`` | 标题区。若同时指定了 [`title`](#props-title) 属性和 [`title`](#slots-title) 插槽，以后者为准。 |
| ``foot`` | 底部区域，默认会展示“确定”、“取消”按钮。 |
### 事件
| 名称 | 描述 |
| -- | -- |
| ``ok`` | 点击“确定”按钮时触发。 |
| ``cancel`` | 点击“取消”按钮时触发。 |
| ``afteropen`` | 弹框打开后触发。弹框内容在打开后才会进行渲染，所以如果有依赖内容渲染的逻辑，请在此事件触发后再执行。 |
| ``afterclose`` | 弹框关闭后触发。如果样式主题提供了退出动画，将在退出动画完毕后触发。 |

28
one/docs/components/conponent.md Normal file
View File

@ -0,0 +1,28 @@
# 组件名称
## 示例
### 默认栅格
[[ demo src="/demo/grid/default.vue" browser="/demos/grid/default.vue" ]]
### 定宽栅格
[[ demo src="/demo/grid/fixed.vue" browser="/demos/grid/fixed.vue" ]]
## API
### 属性
| 名称 | 类型 | 默认值 | 描述 |
| -- | -- | -- | -- |
| ``width`` | `number` | `100` | 宽 |
| ``height`` | `number` | `100` | 高 |
### 插槽
| 名称 | 描述 |
| -- | -- |
| ``default`` | 布局内容 |

15
one/docs/components/content.md
View File

@ -1,15 +0,0 @@
# Content <small>布局内容</small>
:::tip
`Content` 组件需要配合 [`Layout`](./layout) / [`Header`](./header) / [`Footer`](./footer) / [`Sidebar`](./sidebar) 组件使用。
:::
## 示例
见 [`Layout` 示例](./layout#示例)。
### 插槽
| 名称 | 描述 |
| -- | -- |
| ``default`` | 布局内容。 |

246
one/docs/components/date-picker.md
View File

@ -1,246 +0,0 @@
# DatePicker <small>日期选择</small>
## 示例
### 单日选择
默认情况下，在下拉浮层中单击日期可以选中一个日期。可以配置 [`clearable`](#props-clearable) 属性来允许清除已选值，用 [`placeholder`](#props-placeholder) 属性来配置未选择时的占位文本。
[[ demo src="/demo/date-picker/default.vue" ]]
### 日期范围选择
配置 [`range`](#props-range) 属性时，可以在下拉浮层中选择一个日期范围。
[[ demo src="/demo/date-picker/range.vue" ]]
### 设置快捷选项
选择日期范围时，可以通过配置 [`shortcuts`](#props-shortcuts) 属性来提供快捷选项。
[[ demo src="/demo/date-picker/shortcuts.vue" ]]
### 禁用和只读
设置 [`disabled`](#props-disabled) 属性可使组件处于禁用状态。
设置 [`readonly`](#props-readonly) 属性可使组件处于只读状态。
[[ demo src="/demo/date-picker/disabled.vue" ]]
## API
### 属性
| 名称 | 类型 | 默认值 | 描述 |
| -- | -- | -- | -- |
| ``type`` | `string` | `'date'` | 日历的类型，可用值为 `'date'` / `'month'` / `'year'`，分别对应日期/月/年视图。 |
| ``range`` | `boolean` | `false` | 是否选择日期范围。 |
| ``selected`` | `Date | Array` | - | [^selected] |
| ``today`` | `Date` | `new Date()` | 「今天」的日期。 |
| ``week-start`` | `number` | `calendar.weekStart` | 一周的起始。可进行[全局配置](./calendar#configs-calendar-weekStart)。 |
| ``fill-month`` | `boolean` | `true` | 当只有一个面板时，是否要在当前月份面板显示非本月日期。 |
| ``date-class`` | `string | Array | Object | function` | `{}` | 特定日期的自定义 HTML `class`。传非函数时，数据格式为所有 Vue 支持的 `class` 表达式；传函数时，签名为 `function(Date): string | Array<string>|Object<string, boolean>`，返回值格式亦为所有 Vue 支持的 `class` 表达式。 |
| ``disabled-date`` | `function(Date, Date=): boolean=` | `() => false` | 用于自定义指定日期是否禁用。第一个参数为需要判断是否禁用的日期。当处于范围选择过程中且已经选择了一个日期，会作为第二个参数传入。 |
| ``clearable`` | `boolean` | `false` | 已选值是否可以清除。 |
| ``placeholder`` | `string` | `range ? datepicker.rangePlaceholder : datepicker.placeholder` | 未选择时的占位文本。可分别对[日期范围](#configs-datepicker-rangePlaceholder)与[单个日期](#configs-datepicker-placeholder)进行全局配置。 |
| ``format`` | `string | function(Date): string=` | `'yyyy-MM-dd'` / `'yyyy-MM'` / `'yyyy'` | 使用字符串时，表示用于格式化/解析的字符串表达式，具体格式可以参见 [date-fns 的文档](https://date-fns.org/v2.12.0/docs/format)。传入函数可自定义格式化逻辑。 |
| ``parse`` | `function(string): Date=` | - | 自定义将输入字符串解析为 `Date` 对象的函数。 |
| ``shortcuts`` | `Array<Object>` | `datepicker.shortcuts` | [^shortcuts] |
| ``expanded`` | `boolean=` | `false` | [^expanded] |
| ``disabled`` | `boolean=` | `false` | 是否为禁用状态。 |
| ``readonly`` | `boolean=` | `false` | 是否为只读状态。 |
^^^selected
:::badges
`v-model`
:::
已选日期（范围）的值，根据 [`range`](#props-range) 属性值的不同，数据格式不同。
+++类型详情
| `range` | 类型 |
| -- | -- |
| `false` | `Date` |
| `true` | `[Date, Date]` |
+++
^^^
^^^shortcuts
在选择范围时，可以定制的浮层中的快捷选择项列表，格式为 `Array<{label, from, to}>`。可进行[全局配置](#configs-datepicker-shortcuts)。
+++字段详情
<table>
<thead>
<tr>
<th>名称</th>
<th>类型</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>label</code></td>
<td><code>string</code></td>
<td>快捷选项的文本。</td>
</tr>
<tr>
<td><code>from</code></td>
<td colspan="2">开始时间计算方式，见下方<a href="#快捷选项偏移量数据格式">快捷选项偏移量数据格式</a>描述。</td>
</tr>
<tr>
<td><code>to</code></td>
<td colspan="2">结束时间计算方式，见下方<a href="#快捷选项偏移量数据格式">快捷选项偏移量数据格式</a>描述。</td>
</tr>
</tbody>
</table>
+++
^^^
#### 快捷选项偏移量数据格式
`shortcuts` 列表项中的 `from` 及 `to` 字段格式相同，分别用来设置开始结束日期的计算方式。格式为 `number | Object`，默认值为 `0`。
* 类型为 `number` 时，表示以「今天」为基准，偏移指定天数，比如 `-1` 等价于 `{ startOf: 'day', days: -1 }`，即「昨天」；
* 类型为 `Object` 时，支持的格式为：`{startOf: string=, days: number=, weeks: number=, months: number=, }`。
+++字段详情
| 名称 | 类型 | 默认值 | 描述 |
| -- | -- | -- | -- |
| `startOf` | `string=` | `'day'` | 起始日期基准，支持的值有 `'day'` / `'week'` / `'month'` / `'quarter'` / `'year'`。 |
| `day` | `number=` | - | 偏移的天数。 |
| `week` | `number=` | - | 偏移的周数。 |
| `month` | `number=` | - | 偏移的月数。 |
| `quarter` | `number=` | - | 偏移的季度数。 |
| `year` | `number=` | - | 偏移的年数。 |
计算方式是先根据 `startOf` 设置基准，然后根据其它字段进行偏移量的叠加。
可以根据下面的例子，结合 `label` 理解计算方式。掌握以后，就可以非常快速地对快捷选项进行设置了。
```js
[
{
label: '上个月',
// 本月第一天往前算一个月，即上月第一天
from: {
startOf: 'month',
month: -1
},
// 本月第一天往前算一天，即上月最后一天
to: {
startOf: 'month',
days: -1
}
},
{
label: '本月',
// 本月第一天
from: {
startOf: 'month'
},
// 今天
to: 0
},
{
label: '本周',
// 本周第一天，days 为 0 是可以省略的
from: {
startOf: 'week',
days: 0
},
// 今天
to: 0
},
{
label: '最近7天',
// 往前算 6 天
from: -6,
// 到今天
to: 0
},
{
label: '今天',
to: 0
}
]
```
^^^expanded
:::badges
`.sync`
:::
下拉浮层是否展开。
^^^
### 插槽
| 名称 | 描述 |
| -- | -- |
| ``date`` | [^slot-date] |
^^^slot-date
浮层中日历的单日单元格内的区域，可用来定制每一天对应区域的内容。
默认内容：对应日期的 `date`。
+++作用域参数
| 名称 | 类型 | 描述 |
| -- | -- | -- |
| `year` | `number` | 完整年份。 |
| `month` | `number` | 月份数，`0` 表示一月。 |
| `date` | `number` | 月份内的日期。 |
+++
^^^
### 事件
| 名称 | 描述 |
| -- | -- |
| ``select`` | [^event-select] |
| ``selectstart`` | 选择日期范围时，选择完起始日期时触发，回调参数 `(picking: Date)`，表示已选的起始项日期。 |
| ``selectprogress`` | [^event-selectprogress] |
| ``toggle`` | 下拉浮层展开状态切换时触发，回调参数为 `(expanded: boolean)`。`expanded` 表示操作将触发下拉浮层展开还是收起。 |
^^^event-select
:::badges
`v-model`
:::
选择修改后触发，回调参数为 `(selected)`。数据类型和 [`selected`](#props-selected) 属性一致。
^^^
^^^event-selectprogress
选择日期范围时，在已经选择开始日期后，通过鼠标或键盘交互标记到的结束日期变更时触发。回调参数为 `(picking)`，表示当前标记的日期范围，类型取决于 [`multiple`](#props-multiple) 属性的值。
+++参数详请
| `multiple` | 类型 |
| -- | -- |
| `false` | `[Date, Date]` |
| `true` | `Array<[Date, Date]>` |
+++
^^^
### 全局配置
| 配置项 | 类型 | 默认值 | 描述 |
| -- | -- | -- | -- |
| ``datepicker.shortcuts`` | `Array` | `[]` | 快捷选项配置。 |
| ``datepicker.placeholder`` | `string` | `@@datepicker.selectDate` | 选择单日时，未选择状态的占位文本。 |
| ``datepicker.monthPlaceholder`` | `string` | `@@datepicker.selectMonth` | 选择月份时，未选择状态的占位文本。 |
| ``datepicker.yearPlaceholder`` | `string` | `@@datepicker.selectYear` | 选择年时，未选择状态的占位文本。 |
| ``datepicker.rangePlaceholder`` | `string` | `@@datepicker.selectRange` | 选择日期范围时，未选择状态的占位文本。 |
| ``datepicker.monthRangePlaceholder`` | `string` | `@@datepicker.selectMonthRange` | 选择月份范围时，未选择状态的占位文本。 |
| ``datepicker.yearRangePlaceholder`` | `string` | `@@datepicker.selectYearRange` | 选择年份范围时，未选择状态的占位文本。 |
:::tip
`@@` 开头的值表示引用多语言配置中的相应字段。
:::
### 图标
| 名称 | 描述 |
| -- | -- |
| ``calendar`` | 日历。 |
| ``clear`` | 清除内容。 |

145
one/docs/components/dialog.md
View File

@ -1,145 +0,0 @@
# Dialog <small>对话框</small>
## 示例
### 尺寸与全屏
可选的 [`ui`](#props-ui) 属性值：`s` / `m` / `narrow` / `medium` / `wide` / `auto`。
[[ demo src="/demo/dialog/size.vue" ]]
### 模态与非模态
[[ demo src="/demo/dialog/modal.vue" ]]
### 自定义内容
[[ demo src="/demo/dialog/custom.vue" ]]
### 异步支持
[[ demo src="/demo/dialog/async.vue" ]]
### 可拖拽
[[ demo src="/demo/dialog/draggable.vue" ]]
### 层叠顺序
[[ demo src="/demo/dialog/stack.vue" ]]
### 加载与禁用态
[[ demo src="/demo/dialog/status.vue" ]]
## API
### 属性
| 名称 | 类型 | 默认值 | 描述 |
| -- | -- | -- | -- |
| ``ui`` | `string=` | - | [^ui] |
| ``modal`` | `boolean=` | `true` | 是否是模态对话框。模态对话框默认遮挡底层（无法点击）且抢占焦点（关闭后焦点会回归）。 |
| ``title`` | `string=` | - | 对话框标题文本。如果指定了 [`title`](#slots-title) 插槽，则优先使用 [`title`](#slots-title) 插槽。 |
| ``open`` | `boolean` | `false` | [^open] |
| ``closable`` | `boolean=` | `true` | 是否显示关闭按钮。 |
| ``outside-closable`` | `boolean=` | `false` | 点击对话框外部时是否关闭对话框。 |
| ``draggable`` | `boolean=` | `false` | 是否可拖拽。 |
| ``escapable`` | `boolean=` | `false` | 按下 <kbd>esc</kbd> 键是否可以关闭对话框。仅在 `closable` 为 `true` 时生效。 |
| ``inline`` | `boolean=` | `false` | 是否内联在内容中显示并占用内容空间。 |
| ``footless`` | `boolean=` | `false` | 是否不显示默认的底部操作栏。 |
| ``loading`` | `boolean=` | `false` | 是否处于加载状态。处于加载状态时确定按钮也将进入加载状态，无法点击。 |
| ``disabled`` | `boolean=` | `false` | 是否处于禁用状态。处于禁用状态时确定按钮也将进入禁用状态，无法点击。 |
| ``ok-label`` | `string=` | - | “确定”按钮的文字内容。 |
| ``cancel-label`` | `string=` | - | “取消”按钮的文字内容。 |
| ``priority`` | `number=` | - | 对话框浮层层叠权重，参考 [`Overlay`](./overlay) 组件的 [`priority`](./overlay#props-priority) 属性。 |
| ``before-close`` | `function(string): boolean=|Promise<boolean=>` | - | [^before-close] |
| ``overlay-class`` | `string | Object=` | - | 对话框浮层根元素类名，参考 [`Overlay`](./overlay) 组件的 [`overlay-class`](./overlay#props-overlay-class) 属性。 |
| ``overlay-style`` | `string | Array | Object=` | - | 参考 [`Overlay`](./overlay) 组件的 [`overlay-style`](./overlay#props-overlay-style) 属性。 |
^^^ui
预设样式。
+++枚举值
| 值 | 描述 |
| -- | -- |
| `s` | 小内容尺寸（内容及部件尺寸，非对话框整体空间大小）。 |
| `m` | 中内容尺寸（内容及部件尺寸，非对话框整体空间大小）。 |
| `narrow` | 窄尺寸样式。 |
| `medium` | 中尺寸样式。 |
| `wide` | 宽尺寸样式。 |
| `fullscreen` | 全屏尺寸样式。 |
| `auto` | 自适应尺寸样式。 |
+++
^^^
^^^open
:::badges
`.sync`
:::
是否显示对话框。
^^^
^^^before-close
在将触发对话框关闭的操作发生后执行，类型为 `function(type: string): boolean=|Promise<boolean=>`。`type` 为触发关闭的类型，默认情况下可选值为 `'ok'|'cancel'`。返回值可以是一个 `boolean`，也可以是一个 resolve `boolean` 的 `Promise`，用来处理可能需要异步决定对话框关闭状态的情况。返回值或 resolve 值非 `false` 时才会关闭对话框。
+++调用示例
```html
<veui-dialog :open.sync="dialogOpen" :before-close="submit">...</veui-dialog>
```
```js
methods: {
submit (type) {
if (type === 'ok') {
return axios.post('/item/create', {/* ... */})
.then(({ id, error }) => {
if (error) {
this.showError(error)
return false // resolve `false` 将阻止对话框关闭
}
})
}
// resolve 但不返回 `false` 时会关闭对话框
},
// ...
}
```
+++
^^^
### 插槽
| 名称 | 描述 |
| -- | -- |
| ``default`` | 内容区。 |
| ``title`` | 标题区。若同时指定了 [`title`](#props-title) 属性和 [`title`](#slots-title) 插槽，以后者为准。 |
| ``foot`` | [^slot-foot] |
^^^slot-foot
底部区域，默认会展示“确定”、“取消”按钮。
+++作用域参数
| 名称 | 类型 | 描述 |
| -- | -- | -- |
| `close` | `function(type: string): void` | 触发对话框关闭的回调函数。`type` 为关闭的类型，将作为参数传入 `before-close` 钩子函数作为参数，同时将同步触发同名的事件。 |
+++
^^^
### 事件
| 名称 | 描述 |
| -- | -- |
| ``ok`` | 点击“确定”按钮时或通过调用作用域函数 `close('ok')` 时触发。 |
| ``cancel`` | 点击“取消”按钮、关闭按钮、通过 <kbd>esc</kbd> 关闭对话框时，或者通过调用作用域函数 `close('cancel')` 时触发。 |
| <var>&lt;value&gt;</var> | 通过调用作用域函数 `close(value)` 时触发。 |
| ``afteropen`` | 对话框打开后触发。对话框内容在打开后才会进行渲染，所以如果有依赖内容渲染的逻辑，请在此事件触发后再执行。 |
| ``afterclose`` | 对话框关闭后触发。如果样式主题提供了退出动画，将在退出动画完毕后触发。 |
### 图标
| 名称 | 描述 |
| -- | -- |
| ``close`` | 关闭。 |

103
one/docs/components/drawer.md
View File

@ -1,103 +0,0 @@
# Drawer <small>抽屉</small>
## 示例
### 位置
使用 [`placement`](#props-placement) 属性控制抽屉弹出的位置。
[[ demo src="/demo/drawer/placement.vue" ]]
### 模态与非模态
使用 [`modal`](#props-modal) 属性控制抽屉是否为模态类型。
[[ demo src="/demo/drawer/modal.vue" ]]
### 自定义内容
[[ demo src="/demo/drawer/custom.vue" ]]
## API
### 属性
| 名称 | 类型 | 默认值 | 描述 |
| -- | -- | -- | -- |
| ``ui`` | `string=` | - | [^ui] |
| ``placement`` | `string` | `'right'` | [^placement] |
| ``modal`` | `boolean` | `true` | 是否是模态抽屉。模态抽屉默认遮挡底层（无法点击）且抢占焦点（关闭后焦点会回归）。 |
| ``title`` | `string` | - | 抽屉标题文本。如果指定了 [`title`](#slots-title) 插槽，则优先使用 [`title`](#slots-title) 插槽。 |
| ``open`` | `boolean` | `false` | [^open] |
| ``closable`` | `boolean` | `true` | 是否显示关闭按钮。 |
| ``outside-closable`` | `boolean` | `false` | 点击抽屉外部时是否关闭抽屉。 |
| ``escapable`` | `boolean` | `false` | 按下 <kbd>esc</kbd> 键是否可以关闭抽屉。仅在 `closable` 为 `true` 时生效。 |
| ``priority`` | `number=` | - | 抽屉浮层层叠权重，参考 [`Overlay`](./overlay) 组件的 [`priority`](./overlay#props-priority) 属性。 |
| ``footless`` | `boolean` | `false` | 是否不显示默认的底部操作栏。 |
| ``loading`` | `boolean=` | `false` | 是否处于加载状态。处于加载状态时确定按钮也将进入加载状态，无法点击。 |
| ``disabled`` | `boolean=` | `false` | 是否处于禁用状态。处于禁用状态时确定按钮也将进入禁用状态，无法点击。 |
| ``ok-label`` | `string=` | - | “确定”按钮的文字内容。 |
| ``cancel-label`` | `string=` | - | “取消”按钮的文字内容。 |
| ``before-close`` | `function(string): boolean=|Promise<boolean=>` | - | 在将触发关闭的操作发生后执行，参考 [`Dialog`](./dialog) 组件的 [`before-close`](./dialog#props-before-close) 属性。 |
| ``overlay-class`` | `string | Object` | - | 抽屉浮层根元素类名，参考 [`Overlay`](./overlay) 组件的 [`overlay-class`](./overlay#props-overlay-class) 属性。 |
^^^ui
预设样式。
+++枚举值
| 值 | 描述 |
| -- | -- |
| `s` | 小内容尺寸（内容及部件尺寸，非抽屉整体空间大小）。 |
| `m` | 中内容尺寸（内容及部件尺寸，非抽屉整体空间大小）。 |
+++
^^^
^^^placement
抽屉位置。
+++枚举值
| 值 | 描述 |
| -- | -- |
| `top` | 从上面滑出。 |
| `right` | 从右面滑出。 |
| `bottom` | 从下面滑出。 |
| `left` | 从左面滑出。 |
+++
^^^
^^^open
:::badges
`.sync`
:::
是否显示抽屉。
^^^
### 插槽
| 名称 | 描述 |
| -- | -- |
| ``default`` | 内容区。 |
| ``title`` | 标题区。若同时指定了 [`title`](#props-title) 属性和 [`title`](#slots-title) 插槽，以后者为准。 |
| ``foot`` | [^slot-foot] |
^^^slot-foot
底部区域，默认会展示“确定”、“取消”按钮。
+++作用域参数
| 名称 | 类型 | 描述 |
| -- | -- | -- |
| `close` | `function(type: string): void` | 触发抽屉关闭的回调函数。`type` 为关闭的类型，将作为参数传入 `before-close` 钩子函数作为参数，同时将同步触发同名的事件。 |
+++
^^^
### 事件
| 名称 | 描述 |
| -- | -- |
| ``ok`` | 点击“确定”按钮时或通过调用作用域函数 `close('ok')` 时触发。 |
| ``cancel`` | 点击“取消”按钮、关闭按钮、通过 <kbd>esc</kbd> 关闭抽屉时，或者通过调用作用域函数 `close('cancel')` 时触发。 |
| <var>&lt;value&gt;</var> | 通过调用作用域函数 `close(value)` 时触发。 |
| ``afteropen`` | 抽屉打开后触发。抽屉内容在打开后才会进行渲染，所以如果有依赖内容渲染的逻辑，请在此事件触发后再执行。 |
| ``afterclose`` | 抽屉关闭后触发。如果样式主题提供了退出动画，将在退出动画完毕后触发。 |

207
one/docs/components/dropdown.md
View File

@ -1,207 +0,0 @@
# Dropdown <small>下拉菜单</small>
:::tip
`Dropdown` 组件可以内联 [`Option`](./option) 或 [`OptionGroup`](./option-group) 组件使用。
:::
## 示例
### 样式
可选的样式 [`ui`](#props-ui) 属性值： `primary` / `text`。
[[ demo src="/demo/dropdown/style.vue" ]]
### 尺寸
可选的尺寸 [`ui`](#props-ui) 属性值：`xs` / `s` / `m` / `l`。
[[ demo src="/demo/dropdown/size.vue" ]]
### 内联选项
`Dropdown` 组件内支持内联使用 `OptionGroup` 及 `Option` 组件来代替 [`options`](#props-options) 属性。
[[ demo src="/demo/dropdown/inline.vue" ]]
### 含搜索的下拉框菜单
使用 [`searchable`](#props-searchable) 属性使组件支持搜索并高亮显示符合条件的选项。
[[ demo src="/demo/dropdown/searchable.vue" ]]
### 禁用状态的下拉框菜单
使用数据源中的 [`disabled`](#props-disabled) 属性来禁用下拉项。
[[ demo src="/demo/dropdown/disable.vue" ]]
### 下拉触发时机与分离按钮
使用 [`trigger`](#props-trigger) 属性指定展开下拉菜单的时机，使用 [`split`](#props-split) 属性来使命令按钮与下拉按钮分离。
[[ demo src="/demo/dropdown/other.vue" ]]
## API
### 属性
| 名称 | 类型 | 默认值 | 描述 |
| -- | -- | -- | -- |
| ``ui`` | `string=` | - | [^ui] |
| ``options`` | `Array<Object>=` | `[]` | [^options] |
| ``label`` | `string` | - | 下拉按钮的描述文本。 |
| ``trigger`` | `string=` | `'click'` | 触发下拉框展开的时机，可选值为 `'click'` / `'hover'`。 |
| ``split`` | `boolean=` | `false` | 是否将下拉按钮分离为指令按钮和切换下拉按钮两部分。 |
| ``expanded`` | `boolean=` | `false` | [^expanded] |
| ``disabled`` | `boolean=` | `false` | 是否为禁用状态。 |
| ``searchable`` | `boolean=` | `false` | 是否可搜索。 |
| ``placeholder`` | `string=` | - | 搜索框的输入占位符。 |
| ``overlay-class`` | `string | Array | Object=` | - | 参考 [`Overlay`](./overlay) 组件的 [`overlay-class`](./overlay#props-overlay-class) 属性。 |
| ``overlay-style`` | `string | Array | Object=` | - | 参考 [`Overlay`](./overlay) 组件的 [`overlay-style`](./overlay#props-overlay-style) 属性。 |
| ``match`` | `(item, keyword, { ancestors }) => boolean | Array<[number, number]>` | - | 支持自定义高亮逻辑， 默认大小写不敏感，参考 [`Autocomplete`](./Autocomplete#自定义搜索逻辑)。 |
| ``filter`` | `(item, keyword, { ancestors, offsets }) => boolean` | - | 支持自定义搜索命中逻辑，参考 [`Autocomplete`](./Autocomplete#自定义搜索逻辑)。 |
^^^ui
预设样式。
+++枚举值
| 值 | 描述 |
| -- | -- |
| `primary` | 主题色样式。 |
| `text` | 文字样式。 |
| `xs` | 特小尺寸样式。 |
| `s` | 小尺寸样式。 |
| `m` | 中等尺寸样式。 |
| `l` | 大尺寸样式。 |
+++
^^^
^^^options
选项列表，项目的类型为 `{label, value, options, disabled, ...}`。
+++字段详情
| 名称 | 类型 | 描述 |
| -- | -- | -- |
| `label` | `string` | 选项的文字说明。 |
| `value` | `*` | 选项对应的值。 |
| `options` | `Array<Object>=` | 选项的子选项数组，数组项类型同 [`options`](#props-options) 属性数组项。 |
| `disabled` | `boolean=` | 选项是否为禁用。 |
+++
^^^
^^^expanded
:::badges
`.sync`
:::
下拉菜单是否展开。
^^^
### 插槽
| 名称 | 描述 |
| -- | -- |
| ``default`` | 选项列表的内容。在没有指定 [`options`](#props-options) 属性时，可以用来直接内联 `Option` 或 `OptionGroup`。 |
| ``label`` | [^slot-label] |
| ``group-label`` | [^slot-group-label] |
| ``option-label`` | [^slot-option-label] |
| ``option`` | [^slot-option] |
| ``trigger`` | [^slot-trigger] |
| ``no-data`` | 用于定义当搜索无数据时要展现的内容。 |
^^^slot-label
下拉按钮文本区域。
默认内容：`label` 属性值。
+++作用域参数
| 名称 | 类型 | 描述 |
| -- | -- | -- |
| `label` | `string` | `label` 属性对应文本。 |
+++
^^^
^^^slot-group-label
下拉选项组（带 `options` 的选项）的标题文本区域。
默认内容：选项的 `label` 属性值。
+++作用域参数
| 名称 | 类型 | 描述 |
| -- | -- | -- |
| `label` | `string` | 选项组标题文本。 |
| `disabled` | `boolean=` | 选项组是否禁用。 |
+++
另外，当前选项数据中除了上面描述的字段之外的其它字段也会自动通过 `v-bind` 进行绑定到作用域参数上。
^^^
^^^slot-option-label
下拉选项（不带 `options` 的选项）的文本区域。
默认内容：选项的 `label` 属性值。
+++作用域参数
| 名称 | 类型 | 描述 |
| -- | -- | -- |
| `label` | `string` | 选项文本。 |
| `value` | `*` | 选项值。 |
| `disabled` | `boolean=` | 选项是否禁用。 |
+++
另外，当前选项数据中除了上面描述的字段之外的其它字段也会自动通过 `v-bind` 进行绑定到作用域参数上。
^^^
^^^slot-option
可供选择的下拉选项的整个区域。
默认内容：`Option` 内的组件默认结构。
+++作用域参数
| 名称 | 类型 | 描述 |
| -- | -- | -- |
| `label` | `string` | 选项文本。 |
| `value` | `*` | 选项值。 |
| `disabled` | `boolean=` | 选项是否禁用。 |
+++
另外，当前选项数据中除了上面描述的字段之外的其它字段也会自动通过 `v-bind` 进行绑定到作用域参数上。
^^^
^^^slot-trigger
整个下拉触发区域。
默认内容：下拉按钮。
+++作用域参数
| 名称 | 类型 | 描述 |
| -- | -- | -- |
| `attrs` | `Object` | 需要输出到触发元素上的属性，包括 `aria-*` / `disabled` 等，可以使用 `v-bind="attrs"` 统一进行输出。 |
| `handlers` | `Object` | [^handlers-desc] |
| `expanded` | `boolean` | 下拉菜单是否展开。 |
| `toggle` | `function(force?: boolean): void` | 用于切换下拉菜单展开状态。 |
+++
^^^
^^^handlers-desc
需要绑定到触发元素上的事件监听器，可以使用 `v-on="handlers"` 统一进行输出。
:::tip
用于绑定 `handlers` 的元素需要支持获取焦点，以使各种键盘交互依然可以正常触发。
:::
^^^
### 事件
| 名称 | 描述 |
| -- | -- |
| ``click`` | 点击选项后触发，回调参数为 `(value: *=)`。`value` 为当前已选项 `value` 字段的值。当 [`split`](#props-split) 属性为 `true` 时，直接点击指令按钮部分也会触发，但不会携带 `value` 参数。 |
| ``toggle`` | 下拉菜单展开状态切换时触发，回调参数为 `(expanded: boolean)`。`expanded` 表示操作将触发下拉菜单展开还是收起。 |
### 图标
| 名称 | 描述 |
| -- | -- |
| ``expand`` | 展开浮层。 |
| ``collapse`` | 收起浮层。 |

72
one/docs/components/embedded.md
View File

@ -1,72 +0,0 @@
# Embedded <small>嵌入式面板</small>
## 示例
### 尺寸
可选的尺寸 [`ui`](#props-ui) 属性值：`xs` / `s` / `m` / `l` / `xl`。
[[ demo src="/demo/embedded/size.vue" ]]
## API
### 属性
| 名称 | 类型 | 默认值 | 描述 |
| -- | -- | -- | -- |
| ``ui`` | `string=` | - | [^ui] |
| ``title`` | `string=` | - | 折叠式面板标题文本。如果指定了 [`title`](#slots-title) 插槽，则优先使用 [`title`](#slots-title) 插槽。 |
| ``open`` | `boolean` | `false` | [^open] |
| ``closable`` | `boolean=` | `true` | 是否显示关闭按钮。 |
| ``footless`` | `boolean=` | `false` | 是否不显示默认的底部操作栏。 |
| ``loading`` | `boolean=` | `false` | 是否处于加载状态。处于加载状态时确定按钮也将进入加载状态，无法点击。 |
| ``priority`` | `number=` | - | 折叠式面板浮层层叠权重，参考 [`Overlay`](./overlay) 组件的 [`priority`](./overlay#props-priority) 属性。 |
| ``before-close`` | `function(string): boolean=|Promise<boolean=>` | - | 在将触发折叠式面板关闭的操作发生后执行，参考 [`Dialog`](./dialog) 组件的 [`before-close`](./dialog#props-before-close) 属性。 |
| ``overlay-class`` | `string | Object=` | - | 折叠式面板浮层根元素类名，参考 [`Overlay`](./overlay) 组件的 [`overlay-class`](./overlay#props-overlay-class) 属性。 |
^^^ui
预设样式。
+++枚举值
| 值 | 描述 |
| -- | -- |
| `s` | 小内容尺寸。 |
| `m` | 中内容尺寸。 |
+++
^^^
^^^open
:::badges
`.sync`
:::
是否显示折叠式面板。
^^^
### 插槽
| 名称 | 描述 |
| -- | -- |
| ``default`` | 内容区。 |
| ``title`` | 标题区。若同时指定了 [`title`](#props-title) 属性和 [`title`](#slots-title) 插槽，以后者为准。 |
| ``foot`` | [^slot-foot] |
^^^slot-foot
底部区域，默认会展示“确定”、“取消”按钮。
+++作用域参数
| 名称 | 类型 | 描述 |
| -- | -- | -- |
| `close` | `function(type: string): void` | 触发折叠式面板关闭的回调函数。`type` 为关闭的类型，将作为参数传入 `before-close` 钩子函数作为参数，同时将同步触发同名的事件。 |
+++
^^^
### 事件
| 名称 | 描述 |
| -- | -- |
| ``ok`` | 点击“确定”按钮时或通过调用作用域函数 `close('ok')` 时触发。 |
| ``cancel`` | 点击“取消”按钮、关闭按钮、通过 <kbd>esc</kbd> 关闭折叠式面板时，或者通过调用作用域函数 `close('cancel')` 时触发。 |
| <var>&lt;value&gt;</var> | 通过调用作用域函数 `close(value)` 时触发。 |
| ``afterclose`` | 浮层关闭后触发。如果样式主题提供了退出动画，将在退出动画完毕后触发。 |

165
one/docs/components/field.md
View File

@ -1,165 +0,0 @@
# Field <small>表单项</small>
:::tip
`Field` 组件需要配合 [`Form`](./form) 及 [`Fieldset`](./fieldset) 组件使用。一个 `Field` 对应一个输入组件。
:::
## 示例
见 [`Form` 示例](./form#示例)。
## API
### 属性
| 名称 | 类型 | 默认值 | 描述 |
| -- | -- | -- | -- |
| ``ui`` | `string=` | - | [^ui] |
| ``readonly`` | `boolean=` | `false` | 内部输入组件是否为只读状态。 |
| ``disabled`` | `boolean=` | `false` | 内部输入组件是否为禁用状态。 |
| ``label`` | `string` | - | 表单项描述。 |
| ``tip`` | `string` | - | 表单项提示。 |
| ``name`` | `string` | - | 表单项名称，可用于指定数据字段名或展示错误消息的定位。 |
| ``field`` | `string` | - | [^field] |
| ``rules`` | `string | Array<Object>` | - | [^rules] |
| ``help`` | `string` | - | 表单项辅助文案。 |
| ``help-position`` | `'bottom' | 'side'` | `'side'` | [^help-position] |
| ``abstract`` | `boolean=` | `false` | 抽象表单项，抽象的项目没有标题，也不会展示校验信息。 |
| ``withhold-validity`` | `boolean=` | `false` | 当设置为 `true` 时，该表单项内容中的输入组件（如 `veui-input` ）不会自动绑定校验事件，也不会自动进入 `invalid` 状态，使用方可以通过 `default` 插槽来自行定制。 |
| ``validity-display`` | `'normal' | 'simple'` | `'simple'` | [^validity-display] |
^^^ui
预设样式。
+++枚举值
| 值 | 描述 |
| -- | -- |
| `xs` | 超小尺寸样式。 |
| `s` | 小尺寸样式。 |
| `m` | 中尺寸样式。 |
| `l` | 大尺寸样式。 |
+++
^^^
^^^message
出错信息，可以覆盖规则默认出错信息。
若类型为 `string`，可以通过 `{ruleValue}` 引用 `ruleValue`、`{value}` 引用 `value`。例如：
```js
let minLengthRule = {
validate (value, ruleValue) {
return !isEmpty(value) ? val.length >= ruleValue : true
},
message: '字符长度不能短于 {ruleValue}，当前长度 {value}',
priority: 100
}
```
若类型为 `function`，参数为 `(ruleValue: ?*=, value: *)`。例如：
```js
let minLengthRule = {
validate (value, ruleValue) {
return !isEmpty(value) ? val.length >= ruleValue : true
},
message (ruleValue, value) {
return `字符长度不能短于${ruleValue}，当前长度${value}`
},
priority: 100
}
```
:::tip
如果需要支持多语言，`message` 必须使用 `function` 类型。
:::
^^^
^^^rules
表单项校验规则，同步的单值校验。对于 `Array` 类型，项目的类型为 `{triggers, name, message, value, priority}`。
+++字段详情
| 名称 | 类型 | 描述 |
| -- | -- | -- |
| `triggers` | `string` | 触发校验的事件名称集合，逗号分隔。 |
| `name` | `string` | 规则名称。 |
| `value` | `*` | 规则要匹配的值。`boolean` 类型的规则，默认为 `true`。 |
| `message` | `string | function` | [^message] |
| `priority` | `number` | 规则优先级，可以覆盖规则默认优先级。 |
+++
+++内置规则
| 名称 | 类型 | 描述 |
| -- | -- | -- |
| `required` | `boolean` | 值不能为空值（`null` / `undefined` / `''` / `[]`）。 |
| `numeric` | `boolean` | 值必须可描述十进制数值。(`6` / `66.6` / `6e6` / `'6'` / `.6`) |
| `pattern` | `RegExp | string` | 正则匹配。 |
| `maxLength` | `number` | 值的 `length` 属性不能大于限定值。 |
| `minLength` | `number` | 值的 `length` 属性不能小于限定值。 |
| `max` | `number` | 值不能大于限定值。 |
| `min` | `number` | 值不能小于限定值。 |
+++
:::warning
对于 `string` 类型，格式为 `rule1,rule2,...`，仅支持 `value` 类型为 `boolean` 的规则。
优先级会影响最后展示的出错信息，出错信息栈内会保留所有规则的错误提示，但仅展现优先级最高的那一个。
自定义 `rule` 请参考[高级 › 自定义校验规则](../advanced/custom-rules)。
:::
^^^
^^^field
非必须，默认取 [`name`](#props-name) 属性值。在特殊情况下，用于指定表单 [`data`](./form#props-data) 属性对应字段的路径。
+++格式示例
| 值 | 描述 |
| -- | -- |
| `username` | 对应表单 [`data`](./form#props-data) 属性引用值的 `username` 属性，等价于 `data.username`。 |
| `users[0]` | 等价于 `data.users[0]`。 |
| `user.username` | 等价于 `data.user.username`。 |
+++
^^^
^^^help-position
表单项辅助文案的展示位置。
+++辅助文案位置
| 值 | 描述 |
| -- | -- |
| `side` | 辅助文案展示在表单项内的侧边。 |
| `bottom` | 辅助文案展示在表单项内的下方，在校验信息之前。 |
+++
^^^
^^^validity-display
表单项的校验信息是否展示图标。
+++详情说明
| 值 | 描述 |
| -- | -- |
| `normal` | 校验信息展示图标。 |
| `simple` | 校验信息不展示图标。 |
+++
^^^
### 插槽
| 名称 | 描述 |
| -- | -- |
| ``default`` | 用于内联输入组件。作用域参数为 `(listeners: object, invalid: boolean, validities: object, readonly: boolean, disabled: boolean)`，其中 `invalid` 是当前表单项是否校验出错误，`listeners` 是校验时机的事件绑定，`validities` 是校验信息。 |
| ``label`` | 填充表单项描述的内容。默认为 [`label`](#props-label) 属性的文本值。 |
| ``tip`` | 填充表单项提示的内容。默认为 [`tip`](#props-tip) 属性的文本值。 |
| ``help`` | 表单项辅助文本内容。默认为 [`help`](#props-help) 属性的文本值。 |
### 图标
| 名称 | 描述 |
| -- | -- |
| ``alert`` | 警示图标。 |
### 全局配置
| 配置项 | 类型 | 默认值 | 描述 |
| -- | -- | -- | -- |
| ``field.validityDisplay`` | `'normal' | 'simple'` | `'simple'` | 见 [`validity-display`](#props-validity-display) 属性。 |

30
one/docs/components/fieldset.md
View File

@ -1,30 +0,0 @@
# Fieldset <small>表单项集合</small>
:::tip
`Fieldset` 组件需要配合 [`Form`](./form) 及 [`Field`](./field) 组件使用。一个 `Fieldset` 可以包含多个 `Field`。
:::
## 示例
见 [`Form` 示例](./form#示例)。
## API
### 属性
| 名称 | 类型 | 默认值 | 描述 |
| -- | -- | -- | -- |
| ``readonly`` | `boolean=` | `false` | 内部输入组件是否为只读状态。 |
| ``disabled`` | `boolean=` | `false` | 内部输入组件是否为禁用状态。 |
| ``label`` | `string` | - | 表单项集合描述。 |
| ``tip`` | `string` | - | 表单项集合提示。 |
| ``name`` | `string` | - | 表单项集合名称，用于展示错误消息的定位。 |
| ``required`` | `boolean` | - | 是否显示必要性星号提示。 |
### 插槽
| 名称 | 描述 |
| -- | -- |
| ``default`` | 用于内联 `Field` 组件。无默认内容。 |
| ``label`` | 填充表单项集合描述的内容。默认为 [`label`](#props-label) 属性的文本值。 |
| ``tip`` | 填充表单项集合提示的内容。默认为 [`tip`](#props-tip) 属性的文本值。 |

59
one/docs/components/filter-panel.md
View File

@ -1,59 +0,0 @@
# FilterPanel <small>过滤面板</small>
## 示例
[[ demo src="/demo/filter-panel/default.vue"]]
## API
### 属性
| 名称 | 类型 | 默认值 | 描述 |
| -- | -- | -- | -- |
| ``datasource`` | `Array<Object>` | `[]` | 数据源，项目类型为 `{label: string, ...}`。 |
| ``searchable`` | `boolean=` | `true` | 是否允许搜索。 |
| ``filter`` | `function=` | 见描述 | [^filter] |
| ``search-on-input`` | `boolean=` | `true` | 是否在输入的时候触发搜索。 |
| ``placeholder`` | `string=` | - | 搜索框的占位符。 |
| ``title`` | `string=` | - | 过滤面板的标题。 |
^^^filter
搜索过滤函数，签名为 `function(keyword, item, index, datasource): boolean`。返回值为 `false` 的项目将被从结果中过滤掉。
+++参数详情
| 名称 | 类型 | 描述 |
| -- | -- | -- |
| `keyword` | `string` | 搜索关键词。 |
| `item` | `Object` | 当前遍历到的数据节点。 |
| `index` | `number` | 当前数据节点在兄弟节点中的索引。 |
| `datasource` | `Array<{label: string, ...}>` | 与 [`datasource`](#props-datasource) 属性一致。 |
+++
+++默认值
```js
import { includes } from 'lodash'
function (keyword, { label }) {
return includes(label, keyword)
}
```
+++
^^^
### 插槽
| 名称 | 描述 |
| -- | -- |
| ``head`` | 标题区域。默认显示 [`title`](#props-title) 属性值。 |
| ``no-data`` | `datasource` 中没数据时显示的内容。 |
| ``default`` | [^default] |
^^^default
主内容区域。
+++参数属性
| 名称 | 类型 | 描述 |
| -- | -- | -- |
| `items` | `Array<Object>` | `datasource` 经过过滤后的数据，类型与 `datasource` 保持一致。 |
+++
^^^

22
one/docs/components/footer.md
View File

@ -1,22 +0,0 @@
# Footer <small>布局底部</small>
:::tip
`Footer` 组件需要配合 [`Layout`](./layout) / [`Header`](./header) / [`Sidebar`](./sidebar) / [`Content`](./content) 组件使用。
:::
## 示例
见 [`Layout` 示例](./layout#示例)。
## API
### 属性
| 名称 | 类型 | 默认值 | 描述 |
| -- | -- | -- | -- |
| ``sticky`` | `boolean` | `false` | 是否吸顶。使用注意参考[`吸顶/吸底布局`](./layout#吸顶吸底布局)。 |
### 插槽
| 名称 | 描述 |
| -- | -- |
| ``default`` | 布局底部的内容。 |

194
one/docs/components/form.md
View File

@ -1,194 +0,0 @@
# Form <small>表单</small>
:::tip
`Form` 组件需要配合 [`Fieldset`](./fieldset) 及 [`Field`](./field) 组件使用。
:::
## 示例
### 基础样式
使用 [`actions`](#slots-actions) 插槽来提供表单操作按钮。
[[ demo src="/demo/form/normal.vue" ]]
### 只读状态
设置 [`readonly`](#slots-readonly) 来使内部表单项处于只读状态。
[[ demo src="/demo/form/readonly.vue" ]]
### 禁用状态
设置 [`disabled`](#slots-disabled) 来使内部表单项处于禁用状态。
[[ demo src="/demo/form/disabled.vue" ]]
### 提示与辅助文本
[[ demo src="/demo/form/help.vue" ]]
### 校验
[[ demo src="/demo/form/validate.vue" ]]
### 抽象表单项
[[ demo src="/demo/form/abstract.vue" ]]
### 原生输入框与表单项整合
[[ demo src="/demo/form/withhold.vue" ]]
## API
### 属性
| 名称 | 类型 | 默认值 | 描述 |
| -- | -- | -- | -- |
| ``readonly`` | `boolean=` | `false` | 内部输入组件是否为只读状态。 |
| ``disabled`` | `boolean=` | `false` | 内部输入组件是否为禁用状态。 |
| ``data`` | `Object` | - | [^data] |
| ``validators`` | `Array<Object>=` | - | [^validators] |
| ``before-validate`` | `function=` | - | 表单进入提交流程后，进行校验之前的 hook，传入参数为 `(data)`，`data` 为表单 [`data`](#props-data) 属性值的副本。支持返回 `Promise`，返回值或 `Promise.resolve` 的值为 `true` 或 `undefined` 表示流程继续，其它返回值表示中断流程并触发 [`invalid`](#events-invalid) 事件。|
| ``after-validate`` | `function=` | - | 表单校验成功后，触发 [`submit`](#events-submit) 事件之前的 hook，传入参数为 `(data)`，与 `beforeValidate` 的入参是同一个引用。支持返回 `Promise`，返回值或 `Promise.resolve` 的值为 `true` 或 `undefined` 表示流程继续，其它返回值表示中断流程并触发 [`invalid`](#events-invalid) 事件。|
^^^data
表单绑定的数据，和表单中的输入组件通过 `v-model` 绑定，也是表单校验时的数据源。
:::warning
[`Field`](./field) 如果处于 `disabled` 状态，提交流程中处理 `data` 副本时其对应的数据键值对会被过滤，校验时同理。
:::
^^^
^^^validators
表单联合校验、异步校验器。项目类型为 `{fields, validate, triggers}`。
+++属性详情
| 名称 | 类型 | 描述 |
| -- | -- | -- |
| `fields` | `Array` | 对应 `Field` 的 `field` 描述的集合。事件会绑定到对应 `Field` 中的输入组件上。 |
| `validate` | `function` | 自定义校验函数，传入参数为 `(data[fields[0]], data[fields[1]], ...)`，`data` 为表单 [`data`](#props-data) 属性值的引用。返回 `undefined` / `true` 代表校验成功，返回 `{[field]: message, ...}` 表示校验失败信息，详见[表单 › 表单校验逻辑](#表单校验逻辑)。 |
| `triggers` | `string | Array<string>` | 事件名称集合。 |
+++
+++规则详情
| `fields` | `triggers` | 绑定事件情况 |
| -- | -- | -- |
| `['a']` | `['change', 'blur,input,xxx', 'submit']` | a(change) |
| `['a','b','c']` | `['change', 'blur,input,xxx', 'submit']` | a(change), b(blur,input,xxx), c(submit) |
| `['a','b','c']` | `'blur'` | a(blur), b(submit), c(submit) |
| `['a','b','c']` | `'blur,input'` | a(blur,input), b(blur,input), c(blur,input) |
+++
^^^
### 插槽
| 名称 | 描述 |
| -- | -- |
| ``default`` | [^slot-default] |
| ``actions`` | 表单操作内容，如“提交”、“取消”按钮等。无默认内容。作用域参数与 [`default`](#slots-default) 插槽相同。 |
^^^slot-default
可直接内联 `Fieldset` 或 `Field` 组件。无默认内容。
+++作用域参数
| 名称 | 类型 | 描述 |
| -- | -- | -- |
| `submit` | `() => void` | 触发表单提交。 |
| `validating` | `boolean` | 是否正在执行表单校验。 |
+++
^^^
### 事件
| 名称 | 描述 |
| -- | -- |
| ``submit`` | [^event-submit] |
| ``invalid`` | [^event-invalid] |
^^^event-submit
在原生 `submit` 事件之后触发，回调参数为 `(data, event)`。具体提交流程请参考[表单 › 表单提交流程](#表单提交流程)。
+++参数详情
| 名称 | 类型 | 描述 |
| -- | -- | -- |
| `data` | `Object` | 表单 [`data`](#props-data) 属性值的引用。 |
| `event` | `Event` | 原生事件对象。 |
+++
^^^
^^^event-invalid
`beforeValidate`、`validate`、`afterValidate` 流程中某一项返回中断时触发，回调参数为流程 function 的返回值，参数为 `(result)`，表示流程中断的信息，具体返回值类型由流程返回决定。具体提交流程请参考[表单 › 表单提交流程](#表单提交流程)，`validate` 逻辑见[表单 › 表单校验逻辑](#表单校验逻辑)。
^^^
### 表单提交流程
<img class="preview hero" src="/images/development/form/flow.png">
:::warning
`beforeValidate` 和 `afterValidate` 以及 [`submit`](#events-submit) 事件操作的 `data` 均为 props `data` 的同一个副本。考虑到校验信息和 UI 中数据的一致性，`validate` 的目标数据是 props `data` 的源数据。因此在 `beforeValidate` 中**不建议**修改 `data` 副本。
:::
### 表单校验逻辑
表单校验内部分为 `Field` 的 `rule` 校验和 `validators` 的校验。
1. `Field` 的 `rule` 是单值、同步校验。详见[表单项](./field)。
2. `validators` 可以是多值、异步的校验。
+++validators 示例
```js
validators: [
{
fields: ['start', 'end'],
validate (start, end) {
if (start == null || end == null) {
return true
}
if (parseInt(start, 10) >= parseInt(end, 10)) {
return {
start: '下限必须小于上限'
}
}
return true
},
triggers: ['change', 'submit,input']
},
{
fields: ['phone'],
validate (phone) {
return new Promise(function (resolve) {
setTimeout(function () {
let res
if (phone === '18888888888') {
res = {
phone: '该手机已被注册'
}
}
return resolve(res)
}, 3000)
})
},
triggers: ['input']
}
]
```
+++
#### `Field` 的 `rule` 和 `validators` 的优先级
校验失败的信息会添加到对应的 `Field` 的 `validities` 信息中。由于同个操作触发的校验，`validators` 的校验结果优先级大于 `Field` 的 `rule`，不同操作触发的校验，展现最后一个结果。`Field` 的 `rule` 内部的优先级，请参考其 [`rules`](./field#props-rules) 属性。
#### 交互过程的校验
<img class="preview hero" src="/images/development/form/interaction.png">
#### 提交过程的校验
<img class="preview hero" src="/images/development/form/submit.png">
提交时，其中一个过程的校验失败不会导致整个校验终止，校验信息将在两个过程执行完毕后进行整合，并传递到 [`invalid`](#events-invalid) 事件中去。

26
one/docs/components/grid-column.md
View File

@ -1,26 +0,0 @@
# GridColumn <small>栅格栏</small>
:::tip
`GridColumn` 组件需要配合 [`GridContainer`](./grid-container) 及 [`GridRow`](./grid-row) 组件使用。
:::
## 示例
见 [`GridContainer` 示例](./grid-container#示例)。
## API
### 属性
| 名称 | 类型 | 默认值 | 描述 |
| -- | -- | -- | -- |
| ``span`` | `number` | - | 栅格栏横跨的列数，不传则默认占满整行。 |
| ``offset`` | `number=` | `0` | 偏移列数，将影响后续栅格栏的位置。 |
| ``pull`` | `number=` | `0` | 栅格栏向左偏移列数，不影响其它栅格栏的位置。不能与 `push` 同时使用。 |
| ``push`` | `number=` | `0` | 栅格栏向右偏移列数，不影响其它栅格栏的位置。不能与 `pull` 同时使用。 |
### 插槽
| 名称 | 描述 |
| -- | -- |
| ``default`` | 栅格栏内容。 |

48
one/docs/components/grid-container.md
View File

@ -1,48 +0,0 @@
# GridContainer <small>栅格容器</small>
:::tip
`GridContainer` 组件需要配合 [`GridRow`](./grid-row) 及 [`GridColumn`](./grid-column) 组件使用。
:::
## 示例
### 默认栅格
[[ demo src="/demo/grid/default.vue" browser="/demos/grid/default.vue" ]]
### 定宽栅格
[[ demo src="/demo/grid/fixed.vue" browser="/demos/grid/fixed.vue" ]]
## API
### 属性
| 名称 | 类型 | 默认值 | 描述 |
| -- | -- | -- | -- |
| ``columns`` | `number=` | `gridcontainer.columns` | 栅格列数。 |
| ``margin`` | `number=` | `gridcontainer.margin` | 栅格两侧边距 `px` 数值。 |
| ``gutter`` | `number=` | `gridcontainer.gutter` | 栅格列间距 `px` 数值。 |
| ``width`` | `number=` | - | 当需要创建定宽布局时，用来传入容器宽度 `px` 数值。 |
### 插槽
| 名称 | 描述 |
| -- | -- |
| ``default`` | 布局内容，直接子组件只能包含 [`GridRow`](./grid-row) 组件。 |
### 全局配置
| 配置项 | 类型 | 默认值 | 描述 |
| -- | -- | -- | -- |
| ``gridcontainer.columns`` | `number` | `12` | 栅格列数。 |
| ``gridcontainer.gutter`` | `number` | `30` | 栅格列间距 `px` 数值。 |
| ``gridcontainer.margin`` | `number` | `0` | 栅格两侧边距 `px` 数值。 |
#### `veui-theme-dls` 中的默认配置
| 配置项 | 类型 | 默认值 |
| -- | -- | -- | -- |
| `gridcontainer.columns` | `number` | `24` |
| `gridcontainer.gutter` | `number` | `20` |
| `gridcontainer.margin` | `number` | `20` |

17
one/docs/components/grid-row.md
View File

@ -1,17 +0,0 @@
# GridRow <small>栅格行</small>
:::tip
`GridRow` 组件需要配合 [`GridContainer`](./grid-container) 及 [`GridColumn`](./grid-column) 组件使用。
:::
## 示例
见 [`GridContainer` 示例](./grid-container#示例)。
## API
### 插槽
| 名称 | 描述 |
| -- | -- |
| ``default`` | 栅格行内容，直接子组件只能包含 [`GridColumn`](./grid-column) 组件。 |

22
one/docs/components/header.md
View File

@ -1,22 +0,0 @@
# Header <small>布局头部</small>
:::tip
`Header` 组件需要配合 [`Layout`](./layout) / [`Sidebar`](./sidebar) / [`Footer`](./footer) / [`Content`](./content) 组件使用。
:::
## 示例
见 [`Layout` 示例](./layout#示例)。
## API
### 属性
| 名称 | 类型 | 默认值 | 描述 |
| -- | -- | -- | -- |
| ``sticky`` | `boolean` | `false` | 是否吸顶。使用注意参考[`吸顶/吸底布局`](./layout#吸顶吸底布局)。 |
### 插槽
| 名称 | 描述 |
| -- | -- |
| ``default`` | 布局头部的内容。 |

25
one/docs/components/icon.md
View File

@ -1,25 +0,0 @@
# Icon <small>图标</small>
:::tip
VEUI 的 `Icon` 组件目前兼容 [Vue-Awesome](https://github.com/Justineo/vue-awesome) 的方式注册并通过字符串类型的 [`name`](#props-name) 属性指定图标；也支持直接传入组件定义进行渲染。
:::
## 示例
[[ demo src="/demo/icon/default.vue"]]
## API
### 属性
| 名称 | 类型 | 默认值 | 描述 |
| -- | -- | -- | -- |
| ``name`` | `string | Object` | - | 图标名称或其组件定义。 |
| ``label`` | `string` | - | 图标的文字说明，对辅助设备可见。当不设置时，图标对辅助设备隐藏。 |
| ``spin`` | `boolean` | `false` | 是否保持旋转状态。 |
### 插槽
| 名称 | 描述 |
| -- | -- |
| ``default`` | 用来实现图标堆叠，当内部有 `Icon` 子组件时会层叠在一起居中显示，且外部 `Icon` 组件不需要设置 [`name`](#props-name) 属性。 |

21
one/docs/components/input-group.md
View File

@ -1,21 +0,0 @@
# InputGroup <small>输入组件组</small>
:::tip
`Input` 组件需要内联 [`Input`](./input)、[`NumberInput`](./number-input)、[`Autocomplete`](autocomplete)、[`SearchBox`](./search-box)、[`Select`](./select)、[`DatePicker`](./date-picker)、[`TimePicker`](./time-picker)、[`Dropdown`](./dropdown)、[`Button`](./button)、[`ButtonGroup`](./button-group)、[`Label`](./label)、[`Span`](./span) 等组件配合使用。
:::
## 示例
### 任意组合
可选的尺寸 [`ui`](#props-ui) 属性值：`xs` / `s` / `m` / `l`。
[[ demo src="/demo/input-group/default.vue" ]]
## API
### 插槽
| 名称 | 描述 |
| -- | -- |
| ``default`` | 内容区，用来内联输入组件。 |

149
one/docs/components/input.md
View File

@ -1,149 +0,0 @@
# Input <small>输入</small>
## 示例
### 尺寸
可选的尺寸 [`ui`](#props-ui) 属性值：`xs` / `s` / `m` / `l`。
[[ demo src="/demo/input/size.vue" ]]
### 只读状态
设置 [`readonly`](#props-readonly) 来使输入框处于只读状态。
[[ demo src="/demo/input/readonly.vue" ]]
### 禁用状态
设置 [`disabled`](#props-disabled) 来使输入框处于禁用状态。
[[ demo src="/demo/input/disabled.vue" ]]
### 感知输入法
设置 [`composition`](#props-composition) 来感知输入法输入过程中的值。
[[ demo src="/demo/input/composition.vue" ]]
### 过滤首尾空白字符
设置 [`trim`](#props-trim) 来自动过滤用户输入的首尾空白字符。
[[ demo src="/demo/input/trim.vue" ]]
## API
### 属性
| 名称 | 类型 | 默认值 | 描述 |
| -- | -- | -- | -- |
| ``ui`` | `string=` | - | [^ui] |
| ``value`` | `string` | '' | [^value] |
| ``disabled`` | `boolean=` | `false` | 输入框是否为禁用状态。 |
| ``readonly`` | `boolean=` | `false` | 输入框是否为只读状态。 |
| ``type`` | `string=` | `'text'` | [^type] |
| ``placeholder`` | `string=` | - | 输入占位符。 |
| ``clearable`` | `boolean=` | `false` | 是否显示清除按钮。 |
| ``composition`` | `boolean=` | `false` | 是否感知输入法输入过程的值。 |
| ``select-on-focus`` | `boolean=` | `false` | 聚焦时是否自动选中输入框文本。 |
| ``maxlength`` | `number=` | - | 最大可输入的字符长度。 |
| ``get-length`` | `function(string): number=` | - | 自定义的字符长度计算函数。 |
| ``strict`` | `boolean=` | `false` | 是否超出最大字符长度后不允许继续输入。 |
| ``trim`` | `boolean | string=` | `false` | [^trim] |
^^^ui
预设样式。
+++枚举值
| 值 | 描述 |
| -- | -- |
| `xs` | 超小尺寸样式。 |
| `s` | 小尺寸样式。 |
| `m` | 中尺寸样式。 |
| `l` | 大尺寸样式。 |
+++
^^^
^^^value
:::badges
`v-model`
:::
输入框的值。
^^^
^^^type
输入类型。参见原生 `<input>` 元素的 [`type`](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/Input#attr-type)。
+++枚举值
| 值 | 描述 |
| -- | -- |
| `text` | 文本输入框。 |
| `password` | 密码输入框。 |
| `hidden` | 隐藏的输入框，但是值允许提交。 |
+++
^^^
^^^trim
是否移除前后空格。当为 `true` 时，会移除前后空格，当为 `false` 时，不移除前后空格。设置为字符串时，按指定方式进行移除。
+++枚举值
| 值 | 描述 |
| -- | -- |
| `both` | 移除两端空格。等同于 `true` 时的行为。 |
| `start` | 移除开始空格。 |
| `end` | 移除末尾空格。 |
+++
^^^
### 插槽
| 名称 | 描述 |
| -- | -- |
| ``before`` | 输入框内前置内容。 |
| ``after`` | 输入框内后置内容。 |
| ``placeholder`` | 未输入时的占位内容。 |
:::warning
注意，插槽宽度会挤压输入框宽度。
:::
### 事件
| 名称 | 描述 |
| -- | -- |
| ``change`` | [^event-change] |
| ``input`` | [^event-input] |
| ``clear`` | 点击清除按钮时触发。 |
^^^event-change
输入框内容变化时触发，即原生 `change` 事件触发时。回调参数为 `(value, event)`。
+++参数详情
| 名称 | 类型 | 描述 |
| -- | -- | -- |
| `value` | `string` | 输入框的值。 |
| `event` | [`Event`](https://developer.mozilla.org/zh-CN/docs/Web/Events/change) | 原生 `change` 事件对象。 |
+++
^^^
^^^event-input
:::badges
`v-model`
:::
有效输入时触发，受 [`composition`](#props-composition) 属性影响。回调参数为 `(value: string)`，`value` 为输入框的 `value` 值。
^^^
此外，`Input` 支持如下的原生事件：
`auxclick`、`click`、`contextmenu`、`dblclick`、`mousedown`、`mouseenter`、`mouseleave`、`mousemove`、`mouseover`、`mouseout`、`mouseup`、`select`、`wheel`、`keydown`、`keypress`、`keyup`、`focus`、`blur`、`focusin`、`focusout`。
回调函数的参数都为原生事件对象。
### 图标
| 名称 | 描述 |
| -- | -- |
| ``remove`` | 清除按钮。 |

36
one/docs/components/label.md
View File

@ -1,36 +0,0 @@
# Label <small>标签</small>
## 示例
### 激活输入组件
可以使用 [`for`](#props-for) 属性指定被激活组件的 `ref`。点击标签区域可以触发
[[ demo src="/demo/label/default.vue" ]]
## API
### 属性
| 名称 | 类型 | 默认值 | 描述 |
| -- | -- | -- | -- |
| ``for`` | `string=` | - | [^for] |
^^^for
允许通过 [`ref`](https://cn.vuejs.org/v2/guide/components-edge-cases.html#%E8%AE%BF%E9%97%AE%E5%AD%90%E7%BB%84%E4%BB%B6%E5%AE%9E%E4%BE%8B%E6%88%96%E5%AD%90%E5%85%83%E7%B4%A0)、[Vue 组件实例](https://cn.vuejs.org/v2/guide/instance.html)、[`HTMLElement`](https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLElement) 的方式指定目标组件或元素。如果指定的是组件，点击标签后会调用对应组件的 `activate` 方法（如果存在）；如果指定的是元素，点击标签后会调用对应元素的 [`click` 方法](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/click)。
+++类型详情
| 类型 | 描述 |
| -- | -- |
| `string` | 在当前浮层组件所在上下文中，通过匹配 `$refs` 中的键名查找 HTML 元素或对应组件实例的根元素。 |
| `Vue` | 如果传入的是组件实例，就直接返回该组件的根元素。 |
| `HTMLElement` | 如果已经是一个 HTML 元素了，就直接使用该元素。 |
+++
^^^
### 插槽
| 名称 | 描述 |
| -- | -- |
| ``default`` | 默认插槽。无默认内容。用于填充行内内容，**不允许**放入块级内容。 |

48
one/docs/components/layout.md
View File

@ -1,48 +0,0 @@
# Layout <small>布局</small>
:::tip
`Layout` 组件需要配合 [`Header`](./header) / [`Sidebar`](./sidebar) / [`Footer`](./footer) / [`Content`](./content) 组件使用。
:::
## 示例
### 基础布局
`Layout` 组件支持多种典型布局。
[[ demo src="/demo/layout/basic.vue" browser="/demos/layout/basic.vue" ]]
### 通顶侧边栏
[[ demo src="/demo/layout/global-sidebar.vue" browser="/demos/layout/global-sidebar.vue" ]]
### 通栏底部
[[ demo src="/demo/layout/global-footer.vue" browser="/demos/layout/global-footer.vue" ]]
### 吸顶/吸底布局
`Header` / `Sidebar` / `Footer` 组件均支持通过 `sticky` 属性设置吸顶/吸底。
:::tip
当吸顶的布局头部和吸顶侧边栏一起使用需要在布局头部的父组件 `Layout` 上设置 `--dls-layout-header-height` 来指定布局头部的高度。
:::
:::tip
当吸底的布局底部和吸顶侧边栏一起使用需要在布局底部的父组件 `Layout` 上设置 `--dls-layout-footer-height` 来指定布局底部的高度。
:::
[[ demo src="/demo/layout/sticky.vue" browser="/demos/layout/sticky.vue" ]]
## API
### 属性
| 名称 | 类型 | 默认值 | 描述 |
| -- | -- | -- | -- |
| ``direction`` | `'column' | 'row'` | `'column'` | 布局排列方向。在有 `Sidebar` 时，默认为 `'row'`。 |
### 插槽
| 名称 | 描述 |
| -- | -- |
| ``default`` | 布局内容，可以是 [`Header`](./header) / [`Sidebar`](./sidebar) / [`Footer`](./footer) / [`Content`](./content) 组件或嵌套使用 `Layout` 组件。 |

123
one/docs/components/lightbox.md
View File

@ -1,123 +0,0 @@
# Lightbox <small>灯箱</small>
## 示例
[[ demo src="/demo/lightbox/default.vue" ]]
## API
### 属性
| 名称 | 类型 | 默认值 | 描述 |
| -- | -- | -- | -- |
| ``ui`` | `string=` | - | 预设样式。`veui-theme-dls` 未提供，可自定义。 |
| ``open`` | `boolean` | `false` | [^open] |
| ``datasource`` | `Array<Object>` | `[]` | [^datasource] |
| ``index`` | `number=` | `0` | [^index] |
| ``wrap`` | `boolean=` | `false` | 是否可以循环播放。 |
| ``closable`` | `boolean=` | `true` | 是否显示关闭按钮。 |
| ``escapable`` | `boolean=` | `true` | 按下 <kbd>esc</kbd> 键是否可以关闭浮层。仅在 `closable` 为 `true` 时生效。 |
| ``outside-closable`` | `boolean=` | `false` | 点击内容区域外部时是否关闭对话框。 |
| ``priority`` | `number=` | - | 浮层层叠权重，参考 [`Overlay`](./overlay) 组件的 [`priority`](./overlay#props-priority) 属性。 |
| ``before-close`` | `function(string): boolean=|Promise<boolean=>` | - | [^before-close] |
| ``overlay-class`` | `string | Array | Object=` | - | 浮层根元素类名，参考 [`Overlay`](./overlay) 组件的 [`overlay-class`](./overlay#props-overlay-class) 属性。 |
| ``indicator`` | `string=` | `'number'` | [^indicator] |
| ``options`` | `Object=` | `{ video: { muted: true, autoplay: true, controls: true } }` | 额外配置。 |
| ``lazy`` | `boolean= | { preload: number }` | `false` | [^lazy] |
^^^open
:::badges
`.sync`
:::
是否显示浮层。
^^^
^^^datasource
灯箱数据源，项目类型为：`{ src, alt, type, desc }`。
+++字段详情
| 名称 | 类型 | 描述 |
| -- | -- | -- |
| `src` | `string` | 媒体源地址。 |
| `type` | `string=` | 默认图片类型，`video` 表示视频。 |
| `alt` | `string=` | 图片的降级描述文本。 |
| `desc` | `string=` | 该项目的描述文本。 |
+++
^^^
^^^index
:::badges
`.sync`
:::
当前播放序号。
^^^
^^^indicator
播放进度指示器的显示模式。
+++枚举值
| 值 | 描述 |
| -- | -- |
| `number` | 显示「当前页数/全部页数」文字提示。 |
| `none` | 不显示指示器。 |
^^^
^^^before-close
在将触发浮层关闭的操作发生后执行，类型为 `function(): boolean=|Promise<boolean=>`。返回值可以是一个 `boolean`，也可以是一个 resolve `boolean` 的 `Promise`，用来处理可能需要异步决定浮层关闭状态的情况。返回值或 resolve 值非 `false` 时才会关闭浮层。
+++调用示例
```html
<veui-lightbox :open.sync="dialogOpen" :before-close="submit">...</veui-lightbox>
```
^^^
^^^lazy
指定是否懒加载轮播资源。
+++详情
| 名称 | 描述 |
| -- | -- | -- |
| `false` | 不懒加载资源。 |
| `true` | 预加载当前展示项目的前后 1 个资源。 |
| `{ preload: number }` | 预加载当前展示项目的前后指定数量个资源。 |
+++
^^^
### 插槽
| 名称 | 描述 |
| -- | -- |
| ``item`` | [^slot-item] |
| ``desc`` | [^slot-desc] |
^^^slot-item
可用来定制每个灯箱项的媒体展示区域。
默认内容：每项图片或视频。
作用域参数为 [`datasource`](#props-datasource) 属性每个列表项的内容（可以有自定义字段）加上 `index: number` 表示轮播项的序号。即整个 `slot-scope` 绑定的值为 `{src, alt, type, desc, index, ...}`。
^^^
^^^slot-desc
可用来定制每个灯箱项的描述区域。
默认内容：每项描述文字。
作用域参数为 [`datasource`](#props-datasource) 属性每个列表项的内容（可以有自定义字段）加上 `index: number` 表示轮播项的序号。即整个 `slot-scope` 绑定的值为 `{src, alt, type, desc, index, ...}`。
^^^
### 事件
| 名称 | 描述 |
| -- | -- |
| ``close`` | 进行触发关闭操作的动作时触发。 |
### 图标
| 名称 | 描述 |
| -- | -- |
| ``close`` | 关闭。 |
| ``prev`` | 上一页。 |
| ``next`` | 下一页。 |

57
one/docs/components/link.md
View File

@ -1,57 +0,0 @@
# Link <small>链接</small>
## 示例
[[ demo src="/demo/link/default.vue"]]
## API
### 属性
| 名称 | 类型 | 默认值 | 描述 |
| -- | -- | -- | -- |
| ``ui`` | `string=` | - | [^ui] |
| ``to`` | `string | Object` | - | 链接路径。当配合 Vue Router 使用时，会透传到 [`<router-link>`](https://router.vuejs.org/zh/api/#router-link) 的[同名属性](https://router.vuejs.org/zh/api/#to)；否则只支持 `string` 类型，输出到 `<a>` 元素的 `href` 属性中。 |
| ``rel`` | `string` | - | HTML 原生的链接类型，可参考 [MDN 的相关介绍](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Link_types)。 |
| ``target`` | `string` | - | [^target] |
| ``native`` | `boolean` | `false` | 是否强制使用原生的 `<a>` 元素。 |
| ``fallback`` | `string` | `'span'` | 在 [`to`](#props-to) 属性为空时使用的原生元素类型。 |
| ``disabled`` | `boolean=` | `false` | 是否为禁用状态。 |
^^^ui
预设样式。
+++枚举值
| 值 | 描述 |
| -- | -- |
| `strong` | 加强样式。 |
| `s` | 小尺寸样式。 |
| `m` | 中尺寸样式。 |
+++
^^^
^^^target
指定在何处显示链接的资源，可参考 [MDN 的相关介绍](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/a#attr-target)。
:::tip
当 `target` 为 `_blank` 时将自动增加 `noopener` 值（如果用户未指定该值）以增强默认情况下的安全性。
:::
^^^
### 插槽
| 名称 | 描述 |
| -- | -- |
| ``default`` | 链接内容。 |
### 事件
| 名称 | 描述 |
| -- | -- |
| ``click`` | 在 [`to`](#props-to) 属性为空或指定了 `native` 为 `true` 的情况下，点击时触发。回调参数为 `(event)`，`event` 类型为原生 [`Event`](https://developer.mozilla.org/zh-CN/docs/Web/Events/click)。 |
### 全局配置
| 名称 | 类型 | 默认值 | 描述 |
| -- | -- | -- | -- |
| ``link.routerLink`` | `string` | `'router-link'` | 在路由模式下使用的链接组件名称，用于在 Nuxt.js 等环境下更换为兼容 Vue Router 的实现。 |

58
one/docs/components/loading.md
View File

@ -1,58 +0,0 @@
# Loading <small>加载</small>
## 示例
### 风格
可选的风格 [`ui`](#props-ui) 属性值：`normal` / `strong` / `reverse`。
[[demo src="/demo/loading/style.vue"]]
### 尺寸
可选的尺寸 [`ui`](#props-ui) 属性值：`s` / `m` / `l`。
[[demo src="/demo/loading/size.vue"]]
### 排列方式
可选的排列方式 [`ui`](#props-ui) 属性值：`vertical`。
[[demo src="/demo/loading/layout.vue"]]
### 自定义加载图标
通过 [`spinner`](#slots-spinner) 插槽设置自定义加载图标。
[[demo src="/demo/loading/slot.vue"]]
## API
### 属性
| 名称 | 类型 | 默认值 | 描述 |
| -- | -- | -- | -- |
| ``ui`` | `string=` | - | [^ui] |
| ``loading`` | `boolean` | `false` | 是否处于加载状态。 |
^^^ui
预设样式。为空格分隔的一组枚举值的组合。
+++枚举值
| 值 | 描述 |
| -- | -- |
| `strong` | 加强样式。 |
| `reverse` | 反白样式，用于深色背景。 |
| `vertical` | 垂直排列样式。|
| `s` | 小尺寸样式。 |
| `m` | 中尺寸样式。 |
| `l` | 大尺寸样式。 |
+++
^^^
### 插槽
| 名称 | 描述 |
| -- | -- |
| ``spinner`` | 加载图标。 |
| ``default`` | 加载中提示文字。 |

70
one/docs/components/message.md
View File

@ -1,70 +0,0 @@
# Message <small>消息</small>
## 示例
可以使用 [`status`](#props-status) 属性指定不同的上下文状态，使用 [`display`](#props-display) 属性指定不同的展示形态。
[[ demo src="/demo/message/default.vue" ]]
## API
### 属性
| 名称 | 类型 | 默认值 | 描述 |
| -- | -- | -- | -- |
| ``ui`` | `string=` | `'m'` | [^ui] |
| ``status`` | `'success' | 'error' | 'info' | 'warning' | 'aux'` | `'info'` | [^status] |
| ``display`` | `'normal' | 'popup' | 'simple' | 'standalone'` | `'normal'` | [^display] |
^^^ui
预设样式。
+++枚举值
| 值 | 描述 |
| -- | -- |
| `s` | 小尺寸样式。 |
| `m` | 中尺寸样式。 |
+++
^^^status
消息状态。
+++枚举值
| 值 | 描述 |
| -- | -- |
| `info` | 信息提示状态。 |
| `success` | 成功状态。 |
| `warning` | 警告状态。 |
| `error` | 错误状态。 |
| `aux` | 辅助状态。 |
+++
^^^
^^^display
消息展示形态。
+++枚举值
| 值 | 描述 |
| -- | -- |
| `normal` | 普通样式，有图标和带状态文本。 |
| `popup` | 气泡样式，默认仅展示图标，可交互调起气泡展示详细内容。 |
| `simple` | 简单样式，没有图标。 |
| `standalone` | 独立样式，展示图标和无状态文本。 |
+++
^^^
### 插槽
| 名称 | 描述 |
| -- | -- |
| ``default`` | 消息内容区域 |
### 图标
| 名称 | 描述 |
| -- | -- |
| ``success`` | 成功消息。 |
| ``warning`` | 警告消息。 |
| ``info`` | 信息消息。 |
| ``error`` | 错误消息。 |
| ``aux`` | 辅助消息。 |

118
one/docs/components/nav.md
View File

@ -1,118 +0,0 @@
# Nav <small>导航菜单</small>
## 示例
### 尺寸
可选的尺寸 [`ui`](#props-ui) 属性值：`m`。
[[ demo src="/demo/nav/size.vue" ]]
### 大卡样式
设置首层数据项属性 `position` 为 `card` 可使该数据项下拉展示成大卡样式。
[[ demo src="/demo/nav/card.vue" ]]
### 自定义插槽
[[ demo src="/demo/nav/slot.vue" ]]
### 自适应宽度
自动根据实际渲染宽度来决定是否将多余的导航项目折叠起来。
[[ demo src="/demo/nav/more.vue" ]]
## API
### 属性
| 名称 | 类型 | 默认值 | 描述 |
| -- | -- | -- | -- |
| ``ui`` | `string=` | - | [^ui] |
| ``items`` | `Array<Object>=` | `[]` | [^items] |
| ``active`` | `string` | - | [^active] |
| ``matches`` | `function(Object, string): boolean` | - | [^matches] |
^^^ui
预设样式。
+++枚举值
| 值 | 描述 |
| -- | -- |
| `m` | 中尺寸样式。 |
+++
^^^
^^^active
当前激活节点，若该节点定义了 `name` 则就是该 `name` 值，否则该值是由 `to` 生成的路由路径（[route.path](https://router.vuejs.org/zh/api/#%E8%B7%AF%E7%94%B1%E5%AF%B9%E8%B1%A1%E5%B1%9E%E6%80%A7)）。
^^^
^^^items
数据源数组，每个节点类型为 `{label, to, name, icon, disabled, children, ...}`。
+++字段详情
| 名称 | 类型 | 描述 |
| -- | -- | -- |
| `label` | `string` | 节点的文字描述。 |
| `to` | `string | Object` | 节点的导航目的地。参考 [`Link`](./link) 组件的 [`to`](./link#props) 属性。 |
| `name` | `string` | 节点的唯一标识，`name` 和 `to` 二者至少有一个存在。 |
| `disabled` | `boolean=` | 节点是否被禁用。 |
| `position` | `string=` | 首层节点的下拉面板样式，设置成 `card` 则展示成大卡样式。 |
| `children` | `Array<Object>=` | 节点的子节点数组，数组项类型同 `items` 数组项。 |
+++
^^^
^^^matches
当路由发生切换时，用来从 `items` 中找到激活的项目。
默认实现：项目路由路径和当前路由的路径相等 (===) 则认为该项目是激活的。
^^^
### 插槽
| 名称 | 描述 |
| -- | -- |
| ``item`` | [^item] |
| ``item-label`` | [^item-label] |
^^^item
每个节点的渲染插槽。
默认内容：渲染了节点的图标和文字描述。
+++作用域参数
| 名称 | 类型 | 描述 |
| -- | -- | -- |
| `label` | `string` | 节点的文字描述。 |
| `to` | `string | Object` | 节点的导航目的地。参考 [`Link`](./link) 组件的 [`to`](./link#props) 属性。 |
| `name` | `string` | 节点的唯一标识，`name` 和 `to` 二者至少有一个存在。 |
| `disabled` | `boolean=` | 节点是否被禁用。 |
| `children` | `Array<Object>=` | 节点的子节点数组，数组项类型同 [`items`](#props-items) 属性数组项。 |
+++
^^^
^^^item-label
节点的 `label` 插槽。
默认内容：渲染节点对应的 `Link`。
作用域参数参考 [`item`](#slots-item) 插槽。
^^^
### 事件
| 名称 | 描述 |
| -- | -- |
| ``activate`` | 用户点击有 `to` 的节点触发，参数是激活节点在 [`items`](#props-items) 属性中对应的数据项。 |
| ``click`` | 用户点击节点时触发，参数是激活节点在 [`items`](#props-items) 属性中对应的数据项。 |
### 图标
| 名称 | 描述 |
| -- | -- |
| ``expand`` | 展开。 |
| ``more`` | 更多。 |

118
one/docs/components/number-input.md
View File

@ -1,118 +0,0 @@
# NumberInput <small>数字输入</small>
## 示例
### 尺寸
可选的尺寸 [`ui`](#props-ui) 属性值：`xs` / `s` / `m`。
[[ demo src="/demo/number-input/size.vue" ]]
### 只读状态
设置 [`readonly`](#props-readonly) 来使数字输入框处于只读状态。
[[ demo src="/demo/number-input/readonly.vue" ]]
### 禁用状态
设置 [`disabled`](#props-disabled) 来使数字输入框处于禁用状态。
[[ demo src="/demo/number-input/disabled.vue" ]]
### 精度位数和递增/递减
设置 [`decimal-place`](#props-decimal-place) 来指定数值的小数精度位数。
设置 [`step`](#props-step) 来指定每次递增/减的数值。
[[ demo src="/demo/number-input/decimal.vue" ]]
## API
### 属性
| 名称 | 类型 | 默认值 | 描述 |
| -- | -- | -- | -- |
| ``ui`` | `string=` | - | [^ui] |
| ``value`` | `number` | - | [^value] |
| ``readonly`` | `boolean=` | `false` | 数字输入框是否为只读状态。 |
| ``disabled`` | `boolean=` | `false` | 数字输入框是否为禁用状态。 |
| ``placeholder`` | `string` | - | 输入占位符。 |
| ``select-on-focus`` | `boolean` | `false` | 聚焦时是否自动选中数字输入框文本。 |
| ``max`` | `number` | - | 允许的最大值。 |
| ``min`` | `number` | - | 允许的最小值。 |
| ``decimal-place`` | `number` | 0 | 数值的小数精度位数，默认精确到整数位，`-1` 表示不处理精度。 |
| ``step`` | `number` | 1 | 每次递增/递减的数值。 |
| ``format`` | `(val: number, defaultFormattedValue: string) => string` | - | 自定义数字格式化。 |
| ``parse`` | `(val: string) => number` | - | 自定义将输入的值解析成数字。 |
^^^ui
预设样式。
+++枚举值
| 值 | 描述 |
| -- | -- |
| `xs` | 超小尺寸样式。 |
| `s` | 小尺寸样式。 |
| `m` | 中尺寸样式。 |
+++
^^^
^^^value
:::badges
`v-model`
:::
数字输入框的值。
^^^
### 插槽
| 名称 | 描述 |
| -- | -- |
| ``before`` | 数字输入框前置内容。 |
| ``after`` | 数字输入框后置内容。位于增减按钮之后。 |
:::warning
注意，插槽宽度会挤压输入框宽度。
:::
### 事件
| 名称 | 描述 |
| -- | -- |
| ``change`` | [^event-change] |
| ``input`` | [^event-input] |
^^^event-change
原生 `change` 事件，回调参数为 `(value, event)`。
+++参数详情
| 名称 | 类型 | 描述 |
| -- | -- | -- |
| `value` | `number` | 数字输入框的值。 |
| `event` | `Event` | 原生事件对象。 |
+++
^^^
^^^event-input
:::badges
`v-model`
:::
有效输入时触发，受数字格式化影响，若当前值格式化为无效值，则不触发。回调参数为 `(value: string)`，`value` 为数字输入框的 `value` 值。
^^^
此外，`NumberInput` 支持如下的原生事件：
`auxclick`、`click`、`contextmenu`、`dblclick`、`mousedown`、`mouseenter`、`mouseleave`、`mousemove`、`mouseover`、`mouseout`、`mouseup`、`select`、`wheel`、`keydown`、`keypress`、`keyup`、`focus`、`blur`、`focusin`、`focusout`。
回调函数的参数都为原生事件对象。
### 图标
| 名称 | 描述 |
| -- | -- |
| ``increase`` | 增加按钮。 |
| ``decrease`` | 减少按钮。 |

133
one/docs/components/option-group.md
View File

@ -1,133 +0,0 @@
# OptionGroup <small>选择组</small>
:::tip
`OptionGroup` 组件需要在 [`Select`](./select)、[`Dropdown`](./dropdown) 或其它 `OptionGroup` 组件内使用，可以配合 [`Option`](./option) 组件使用。
:::
## 示例
见 [`Select` 示例](./select#示例)或 [`Dropdown` 示例](./dropdown#示例)。
## API
### 属性
| 名称 | 类型 | 默认值 | 描述 |
| -- | -- | -- | -- |
| ``label`` | `string` | - | 选项组的标题。 |
| ``expanded`` | `boolean=` | `false` | 选项列表是否展开。 |
| ``trigger`` | `'click' | 'hover'` | `'click'` | 选项列表展开的时机。 |
| ``options`` | `Array<Object>` | `[]` | [^options] |
| ``position`` | `string` | `inline` | [^position] |
| ``overlay-class`` | `string | Array | Object=` | - | 参考 [`Overlay`](./overlay) 组件的 [`overlay-class`](./overlay#props-overlay-class) 属性。 |
| ``overlay-style`` | `string | Array | Object=` | - | 参考 [`Overlay`](./overlay) 组件的 [`overlay-style`](./overlay#props-overlay-style) 属性。 |
^^^options
选项列表，项目的类型为 `{label, value, disabled, ...}`。
+++字段详情
| 名称 | 类型 | 描述 |
| -- | -- | -- |
| `label` | `string` | 选项的文字说明。 |
| `value` | `*` | 选项对应的值。 |
| `disabled` | `boolean=` | 选项是否为禁用。 |
+++
^^^
^^^position
内部选项显示的方式。
+++枚举值
| 值 | 描述 |
| -- | -- |
| `inline` | 内联方式直接显示。 |
| `popup` | 在浮层中显示。 |
+++
^^^
### 插槽
| 名称 | 描述 |
| -- | -- |
| ``default`` | 选项列表的内容。在没有指定 [`options`](#props-options) 属性时，可以用来直接内联 `Option` 或其它 `OptionGroup` 组件。 |
| ``label`` | [^slot-label] |
| ``group-label`` | [^slot-group-label] |
| ``option-label`` | [^slot-option-label] |
| ``option`` | [^slot-option] |
| ``before`` | 选项列表的前置区域。 |
| ``after`` | 选项列表的后置区域。 |
^^^slot-label
选项组标题文本区域。
默认内容：[`label`](#props-label) 属性对应的文本。
+++作用域参数
| 名称 | 类型 | 描述 |
| -- | -- | -- |
| `label` | `string` | 选项组标题文本。 |
| `disabled` | `boolean=` | 选项组是否禁用。 |
+++
^^^
^^^slot-group-label
子选项组的标题文本区域。
默认内容：带 `options` 的选项对应的 `label` 属性值。
+++作用域参数
| 名称 | 类型 | 描述 |
| -- | -- | -- |
| `label` | `string` | 选项组文本。 |
| `disabled` | `boolean=` | 选项组是否禁用。 |
+++
另外，当前选项组数据中除了上面描述的字段之外的其它字段也会自动通过 `v-bind` 进行绑定到作用域参数上。
^^^
^^^slot-option-label
选项的文本区域。
默认内容：不带 `options` 的选项对应的 `label` 属性值。
+++作用域参数
| 名称 | 类型 | 描述 |
| -- | -- | -- |
| `label` | `string` | 选项文本。 |
| `value` | `string` | 选项值。 |
| `selected` | `boolean` | 是否已选择。 |
| `disabled` | `boolean=` | 选项是否禁用。 |
+++
另外，当前选项数据中除了上面描述的字段之外的其它字段也会自动通过 `v-bind` 进行绑定到作用域参数上。
^^^
^^^slot-option
可供选择的选项的整个区域。
默认内容：`Option` 内的组件默认结构。
+++作用域参数
| 名称 | 类型 | 描述 |
| -- | -- | -- |
| `label` | `string` | 选项文本。 |
| `value` | `string` | 选项值。 |
| `selected` | `boolean` | 是否已选择。 |
| `disabled` | `boolean=` | 选项是否禁用。 |
+++
另外，当前选项数据中除了上面描述的字段之外的其它字段也会自动通过 `v-bind` 进行绑定到作用域参数上。
^^^
### 事件
| 名称 | 描述 |
| -- | -- |
| ``toggle`` | 选项列表展开状态切换时触发，回调参数为 `(expanded: boolean)`。`expanded` 表示操作将触发选项列表展开还是收起。 |
| ``afteropen`` | 选项列表打开完成之后触发。 |
### 图标
| 名称 | 描述 |
| -- | -- |
| ``expandable`` | 可展开的项目。 |

39
one/docs/components/option.md
View File

@ -1,39 +0,0 @@
# Option <small>选项</small>
:::tip
`Option` 组件需要配合 [`Select`](./select) 或 [`Dropdown`](./dropdown) 或 [`OptionGroup`](./option) 组件使用。
:::
## 示例
见 [`Select` 示例](./select#示例)或 [`Dropdown` 示例](./dropdown#示例)。
## API
### 属性
| 名称 | 类型 | 默认值 | 描述 |
| -- | -- | -- | -- |
| ``label`` | `string` | - | 选项的文本。 |
| ``value`` | `*` | - | 选项对应的值。 |
| ``disabled`` | `boolean=` | `false` | 是否为禁用状态。 |
| ``hidden`` | `boolean=` | `false` | 是否为隐藏状态。 |
### 插槽
| 名称 | 描述 |
| -- | -- |
| ``default`` | 选项的整个区域。默认显示文本及勾选图标等。 |
| ``label`` | 选项的文本区域。默认显示 [`label`](#props-label) 属性内容。 |
### 事件
| 名称 | 描述 |
| -- | -- |
| ``click`` | 在选项被点击时触发 `click` 事件，没有参数。 |
### 图标
| 名称 | 描述 |
| -- | -- |
| ``checked`` | 已选状态。 |

109
one/docs/components/overlay.md
View File

@ -1,109 +0,0 @@
# Overlay <small>浮层</small>
## 示例
### 自定义定位
浮层可以在页面内按照自定义方式定位。
[[ demo src="/demo/overlay/position.vue" ]]
### 相对已有元素定位
浮层可以相对于页面内某个 DOM 元素定位。
[[ demo src="/demo/overlay/relative-base.vue" ]]
### 层叠顺序管理
同层级且相同优先级的浮层，越晚显示的层叠顺序越高。
[[ demo src="/demo/overlay/stack-display-order.vue" ]]
打开的浮层，会建立新的层叠上下文，从中打开的浮层层叠顺序会高于父级浮层。
[[ demo src="/demo/overlay/stack-on-overlay.vue" ]]
子浮层的层叠顺序受父浮层影响。
[[ demo src="/demo/overlay/stack-display-order-with-on-overlay.vue" ]]
## API
### 属性
| 名称 | 类型 | 默认值 | 描述 |
| -- | -- | -- | -- |
| ``ui`` | `string=` | - | 预设样式。`veui-theme-dls` 未提供，可自定义。 |
| ``open`` | `boolean` | `false` | [^open] |
| ``target`` | `string | Vue | Element` | - | [^target] |
| ``priority`` | `number` | - | [^priority] |
| ``autofocus`` | `boolean` | - | 是否自动抢占焦点到浮层内的第一个可聚焦元素。 |
| ``modal`` | `boolean` | `false` | 是否是模态浮层。模态浮层会抢占焦点且限制键盘导航处于浮层内部（关闭后焦点会回归）。 |
| ``inline`` | `boolean` | `false` | 是否将浮层渲染为内联内容。 |
| ``local`` | `boolean` | `false` | 是否将浮层保留在原来的 DOM 位置，而非移动到全局位置并参与[全局浮层管理](../advanced/overlay)。 |
| ``overlay-class`` | `string | Array | Object=` | - | [^overlay-class] |
| ``overlay-style`` | `string | Array | Object=` | - | [^overlay-style] |
| ``options`` | `Object` | - | 透传给底层 Popper.js 实现的 `modifiers` 配置项，具体内容参见[这里](https://popper.js.org/docs/v1/#modifiers)。 |
| ``position`` | `string` | 'auto' | 透传给底层 Popper.js 实现的 `placement` 配置项，具体内容参见[这里](https://popper.js.org/docs/v1/#popperplacements--codeenumcode)。 |
| ``match-width`` | `boolean` | `false` | 当浮层宽度较窄时，是否自动匹配目标元素的宽度。 |
^^^open
:::badges
`.sync`
:::
是否显示浮层。
^^^
^^^target
允许通过 [`ref`](https://cn.vuejs.org/v2/guide/components-edge-cases.html#%E8%AE%BF%E9%97%AE%E5%AD%90%E7%BB%84%E4%BB%B6%E5%AE%9E%E4%BE%8B%E6%88%96%E5%AD%90%E5%85%83%E7%B4%A0)、[Vue 组件实例](https://cn.vuejs.org/v2/guide/instance.html)、[`Element`](https://developer.mozilla.org/zh-CN/docs/Web/API/Element) 的方式指定目标元素。如果目标元素存在，浮层会相对于该元素进行定位，具体定位参数由 [`options`](#props-options) 属性指定。
+++类型详情
| 类型 | 描述 |
| -- | -- |
| `string` | 在当前浮层组件所在上下文中，通过匹配 `$refs` 中的键名查找 DOM 元素或对应组件实例的根元素。 |
| `Vue` | 如果传入的是组件实例，就直接返回该组件的根元素。 |
| `Element` | 如果已经是一个 DOM 元素了，就直接使用该元素。 |
+++
^^^
^^^priority
当前浮层组件实例与其它实例在层叠关系上的权重，数值越大，越靠上。
:::tip
由于所有浮层组件的浮层根元素都会放置到 `<body>` 元素下，所以为了更好地控制浮层层叠顺序，浮层模块内部实现了全局的层叠上下文。组件的父子关系决定了浮层的嵌套关系，在同层级内的每个浮层组件实例都可以通过指定 `priority` 来实现不同实例间的相对层叠顺序。相同 `priority` 数值的组件实例，按照实例化的先后顺序来决定层叠顺序，后实例化的组件在之前组件的上面。
:::
^^^
^^^overlay-class
浮层根元素类名，数据格式为所有 [Vue 支持的 `class` 表达式](https://cn.vuejs.org/v2/guide/class-and-style.html#%E7%BB%91%E5%AE%9A-HTML-Class)。
:::tip
由于浮层根元素会放置在 `<body>` 元素下，可以通过这个属性给浮层根元素设置类名以自定义样式。
:::
^^^
^^^overlay-style
浮层根元素的样式，数据格式为所有 [Vue 支持的 `style` 表达式](https://cn.vuejs.org/v2/guide/class-and-style.html#%E7%BB%91%E5%AE%9A%E5%86%85%E8%81%94%E6%A0%B7%E5%BC%8F)。
^^^
### 插槽
| 名称 | 描述 |
| -- | -- |
| ``default`` | 浮层内容。 |
### 事件
| 名称 | 描述 |
| -- | -- |
| ``locate`` | 浮层定位发生变化时触发。 |
| ``afteropen`` | 浮层打开后触发。浮层内容在打开后才会进行渲染，所以如果有依赖内容渲染的逻辑，请在此事件触发后再执行。 |
| ``afterclose`` | 浮层关闭后触发。如果样式主题提供了退出动画，将在退出动画完毕后触发。 |
| ``orderchange`` | 浮层的 `z-index` 发生变化时触发，参数是 `(order: number)`, `order` 就是新的 `z-index`。 |
### 全局配置
| 配置项 | 类型 | 默认值 | 描述 |
| -- | -- | -- | -- |
| ``overlay.overlayClass`` | `string | Array | Object=` | `[]` | 全局配置需要添加到浮层容器上的类名，数据格式为所有 [Vue 支持的 `class` 表达式](https://cn.vuejs.org/v2/guide/class-and-style.html#%E7%BB%91%E5%AE%9A-HTML-Class)。 |

77
one/docs/components/pagination.md
View File

@ -1,77 +0,0 @@
# Pagination <small>翻页</small>
## 示例
### 尺寸
[[ demo src="/demo/pagination/size.vue" ]]
### 每页个数
使用 [`page-size`](#props-page-size) 属性来指定当前每页的个数。
使用 [`page-sizes`](#props-page-sizes) 属性来指定每页个数候选项。
[[ demo src="/demo/pagination/pages.vue" ]]
### 可选部分
使用 [`show-total`](#props-show-total) / [`show-page-size`](#props-show-page-size) / [`show-goto`](#props-show-goto) 属性来分别控制是否显示项目总数/每页项目数选择器/跳转到指定页。
[[ demo src="/demo/pagination/parts.vue" ]]
## API
### 属性
| 名称 | 类型 | 默认值 | 描述 |
| -- | -- | -- | -- |
| ``ui`` | `string=` | - | [^ui] |
| ``page`` | `number` | `1` | 当前页码（从 `1` 开始）。 |
| ``total`` | `number` | - | 项目总数。 |
| ``to`` | `string | Object` | `''` | [^to] |
| ``native`` | `boolean` | `false` | 原生链接跳转。 |
| ``page-size`` | `number` | `pagination.pageSize` | [^page-size] |
| ``page-sizes`` | `Array<number>` | `pagination.pageSizes` | 每页个数候选项。 |
| ``show-goto`` | `boolean=` | `false` | 是否显示直接跳转到页码。 |
| ``show-total`` | `boolean=` | `false` | 是否显示项目总数。 |
| ``show-page-size`` | `boolean=` | `false` | 是否显示每页项目数选择器。 |
^^^ui
预设样式。
+++枚举值
| 值 | 描述 |
| -- | -- |
| `xs` | 超小尺寸样式。 |
| `s` | 小尺寸样式。 |
| `m` | 中尺寸样式。 |
+++
^^^
^^^to
目标链接模板。类型见 [`Link`](./link) 组件的 [`to`](./link#props-to) 属性。其中，类型为 `string` 路径时其中的 `:page` 关键词会被替换为实际页码。类型为 `Object` 时，会将起转换为 `string` 后替换掉 `:page` 部分。
^^^
^^^page-size
:::badges
`.sync`
:::
每页个数。
^^^
### 事件
| 名称 | 描述 |
| -- | -- |
| ``pagesizechange`` | 每页显示项目被切换时触发，回调参数为 `(size: number)`。`size` 为新的每页显示项目数。 |
| ``redirect`` | 链接跳转时触发，回调参数为 `(page: number, event: Object)`。`page` 为要跳转的目标页码。`event` 为原生的事件对象，在 `native` 为 `true` 时，调用 `event.preventDefault` 可阻止跳转。 |
### 全局配置
| 配置项 | 类型 | 默认值 | 描述 |
| -- | -- | -- | -- |
| ``pagination.pageSize`` | `number` | `30` | 每页个数。 |
| ``pagination.pageSizes`` | `Array<number>` | `[30, 50, 100]` | 每页个数候选项。 |

92
one/docs/components/popover.md
View File

@ -1,92 +0,0 @@
# Popover <small>气泡提示</small>
## 示例
### 风格
可选的 [`ui`](#props-ui) 属性值：`s` / `m`。
[[ demo src="/demo/popover/ui.vue" ]]
### 定位
使用 [`position`](#props-position) 属性来指定气泡显示的位置。
[[ demo src="/demo/popover/position.vue" ]]
### 触发时机
使用 [`trigger`](#props-trigger) 属性来指定显示/隐藏气泡的时机。
[[ demo src="/demo/popover/trigger.vue" ]]
### 标题区域和操作区域
使用 [`title`](#props-title) 属性或[`title`](#slots-title) 插槽来指定气泡的标题。
使用 [`foot`](#props-foot) 属性开启底部操作区，使用 [`ok-label`](#props-ok-label) 属性和 [`cancel-label`](#props-cancel-label) 属性来设置气泡的按钮内容。使用 [`foot`](#slots-foot) 插槽来自定义底部操作区。
[[ demo src="/demo/popover/foot.vue" ]]
## API
### 属性
| 名称 | 类型 | 默认值 | 描述 |
| -- | -- | -- | -- |
| ``ui`` | `string=` | - | [^ui] |
| ``open`` | `boolean` | `false` | [^open] |
| ``target`` | `string | Vue | Node` | - | 参考 [`Overlay`](./overlay) 组件的 [`target`](./overlay#props-target) 属性。 |
| ``position`` | `string` | `'top'` | [^position] |
| ``trigger`` | `string` | `'hover'` | [^trigger] |
| ``hide-delay`` | `number` | `tooltip.hideDelays` | 触发关闭条件满足后延迟关闭等待时间的毫秒数。可以用来防止光标移出 `target` 后移入气泡进行交互前已经自动关闭。 |
| ``overlay-class`` | `string | Array | Object=` | - | 参考 [`Overlay`](./overlay) 组件的 [`overlay-class`](./overlay#props-overlay-class) 属性。 |
| ``overlay-style`` | `string | Array | Object=` | - | 参考 [`Overlay`](./overlay) 组件的 [`overlay-style`](./overlay#props-overlay-style) 属性。 |
| ``title`` | `string=` | - | 用于自定义标题内容。 |
| ``foot`` | `boolean` | `false` | 用于开启底部操作区。 |
| ``ok-label`` | `string=` | - | “确定”按钮的文字内容。 |
| ``cancel-label`` | `string=` | - | “取消”按钮的文字内容。 |
^^^ui
预设样式。
+++枚举值
| 值 | 描述 |
| -- | -- |
| `s` | 小尺寸样式。 |
| `m` | 中尺寸样式。 |
+++
^^^
^^^open
:::badges
`.sync`
:::
是否显示气泡提示。
^^^
^^^position
指定定位参数。使用 [Popper.js](https://popper.js.org/) 风格的定位语法指定，可参考 [`Popper.placements`](https://popper.js.org/popper-documentation.html#Popper.placements)。
^^^
^^^trigger
触发气泡提示的方式。支持指定的值为 `v-outside` 指令绑定值的 `trigger` 参数，并支持使用 <code>&#0096;${open}-${close}&#0096;</code> 语法分别指定触发打开/关闭提示的时机。另外，当 `trigger` 指定为 `custom` 时，将不会使用 `v-outside` 功能自动进行处理。
例如：`click` 表示点击 `target` 后打开，在空白处点击时关闭；`hover-mousedown` 表示光标移入 `target` 后打开，在空白处按下鼠标时关闭。
^^^
### 插槽
| 名称 | 描述 |
| -- | -- |
| ``default`` | 气泡提示内容。 |
| ``title`` | 用于自定义标题内容。 |
| ``foot`` | 用于自定义底部操作区。 |
### 事件
| 名称 | 描述 |
| -- | -- |
| ``ok`` | 点击“确定”按钮时触发。 |
| ``cancel`` | 点击“取消”按钮时触发。 |

63
one/docs/components/progress.md
View File

@ -1,63 +0,0 @@
# Progress <small>进度条</small>
## 示例
[[ demo src="/demo/progress/default.vue" ]]
## API
### 属性
| 名称 | 类型 | 默认值 | 描述 |
| -- | -- | -- | -- |
| ``ui`` | `string=` | - | [^ui] |
| ``type`` | `string` | `'bar'` | 进度条类型。可选值为 `bar` / `circular`，分别是柱状和环形。 |
| ``desc`` | `boolean` | `false` | 是否显示文字提示。 |
| ``value`` | `number` | `0` | 进度值。 |
| ``min`` | `number` | `0` | 最小值。 |
| ``max`` | `number` | `1` | 最大值。 |
| ``decimal-place`` | `number` | `0` | 保留的小数位数。 |
| ``status`` | `string` | - | [^status] |
| ``autosucceed`` | `boolean | number` | - | 是否在进度值到达最大时自动进入 `success` 状态。`true` 表示直接进入成功状态，如果是 `number` 类型则表示在到达最大值后切换为成功状态前等待的毫秒数。 |
| ``indeterminate`` | `boolean` | `false` | 是否不确定进度，目前仅支持在 `type` 为 `bar` 时生效。 |
^^^ui
预设样式。
+++枚举值
| 值 | 描述 |
| -- | -- |
| `fluid` | 柱状进度条自适应宽度样式。 |
| `s` | 小尺寸样式。 |
| `m` | 中尺寸样式。 |
^^^
^^^status
:::badges
`.sync`
:::
进度状态。可选值为 `success` / `alert`，分别表示成功及危险警告状态。
^^^
### 插槽
| 名称 | 描述 |
| -- | -- |
| ``default`` | [^slot-default] |
| ``after`` | 可用来定制文字提示区域之后的内容，作用域参数参考 `default` 插槽。 |
^^^slot-default
可用来定制文字提示区域的内容。
默认内容：完成率百分比。
+++作用域参数
| 名称 | 类型 | 描述 |
| -- | -- | -- |
| `percent` | `number` | 进度完成百分比。 |
| `value` | `number` | 进度值，同 [`value`](#props-value) 属性。 |
| `status` | `string` | 进度状态，同 [`status`](#props-status) 属性。 |
+++
^^^

67
one/docs/components/prompt-box.md
View File

@ -1,67 +0,0 @@
# PromptBox <small>输入弹框</small>
## 示例
获取用户输入的值。
[[ demo src="/demo/prompt-box/base.vue" ]]
## API
### 属性
| 名称 | 类型 | 默认值 | 描述 |
| --- | --- | --- | --- |
| ``open`` | `boolean` | `false` | [^open] |
| ``title`` | `string` | - | 标题。 |
| ``content`` | `string` | `'请输入'` | 输入框上方的说明内容。 |
| ``value`` | `string` | `''` | [^value] |
| ``loading`` | `boolean=` | `false` | 是否处于加载状态。处于加载状态时确定按钮也将进入加载状态，无法点击。 |
| ``disabled`` | `boolean=` | `false` | 是否处于禁用状态。处于禁用状态时确定按钮也将进入禁用状态，无法点击。 |
| ``ok-label`` | `string=` | - | “确定”按钮的文字内容。 |
| ``cancel-label`` | `string=` | - | “取消”按钮的文字内容。 |
| ``before-close`` | `function(string): boolean=|Promise<boolean=>` | - | 在将触发关闭的操作发生后执行，参考 [`Dialog`](./dialog) 组件的 [`before-close`](./dialog#props-before-close) 属性。 |
| ``overlay-class`` | `string | Array | Object=` | - | 参考 [`Overlay`](./overlay) 组件的 [`overlay-class`](./overlay#props-overlay-class) 属性。 |
| ``overlay-style`` | `string | Array | Object=` | - | 参考 [`Overlay`](./overlay) 组件的 [`overlay-style`](./overlay#props-overlay-style) 属性。 |
^^^open
:::badges
`.sync`
:::
是否显示输入弹框。
^^^
^^^value
:::badges
`v-model`
:::
输入框值。
^^^
### 插槽
| 名称 | 描述 |
| -- | -- |
| ``default`` | 内容区。 |
| ``title`` | 标题区。若同时指定了 [`title`](#props-title) 属性和 [`title`](#slots-title) 插槽，以后者为准。 |
| ``foot`` | 底部区域，默认会展示“确定”、“取消”按钮。 |
### 事件
| 名称 | 描述 |
| -- | -- |
| ``input`` | [^event-input] |
| ``ok`` | 点击“确定”按钮时触发。 |
| ``cancel`` | 点击“取消”按钮时触发。 |
| ``afteropen`` | 弹框打开后触发。弹框内容在打开后才会进行渲染，所以如果有依赖内容渲染的逻辑，请在此事件触发后再执行。 |
| ``afterclose`` | 弹框关闭后触发。如果样式主题提供了退出动画，将在退出动画完毕后触发。 |
^^^event-input
:::badges
`v-model`
:::
输入框值发生变化后触发。回调参数为 `(value: string)`，`value` 为输入框当前值。
^^^

111
one/docs/components/radio-button-group.md
View File

@ -1,111 +0,0 @@
# RadioButtonGroup <small>单选按钮组</small>
## 示例
### 尺寸
可选的 [`ui`](#props-ui) 属性值：`s` / `m`。
[[ demo src="/demo/radio-button-group/default.vue" ]]
### 简单样式
设置 [`ui`](#props-ui) 属性值：`simple` 来指定简单样式。
[[ demo src="/demo/radio-button-group/simple.vue" ]]
### 额外描述
在数据源的项目中设置 `desc` 字段或者通过 [`desc`](#slots-desc) 插槽来指定额外描述。额外描述会在悬浮时显示。
[[ demo src="/demo/radio-button-group/desc.vue" ]]
### 最小宽度
设置 [`ui`](#props-ui) 属性值：`simple` 来指定简单样式。
[[ demo src="/demo/radio-button-group/stable.vue" ]]
## API
### 属性
| 名称 | 类型 | 默认值 | 描述 |
| -- | -- | -- | -- |
| ``ui`` | `string=` | - | [^ui] |
| ``items`` | `Array<Object>` | `[]` | [^items] |
| ``value`` | `*` | - | [^value] |
| ``disabled`` | `boolean=` | `false` | 是否为禁用状态。 |
| ``readonly`` | `boolean=` | `false` | 是否为只读状态。 |
^^^ui
预设样式。
+++枚举值
| 值 | 描述 |
| -- | -- |
| `s` | 小尺寸样式。 |
| `m` | 中尺寸样式。 |
| `simple` | 简单样式。 |
| `stable` | 稳定样式。会给所有按钮添加一个最小宽度以使布局更加稳定，多行之间更容易对齐。 |
^^^
^^^items
单选按钮组数据源，项目类型为 `{ label, value, disabled, desc, ... }`。
+++字段详情
| 名称 | 类型 | 描述 |
| -- | -- | -- |
| `label` | `string` | 选项的文字说明。 |
| `value` | `*` | 选项对应的值。 |
| `disabled` | `boolean=` | 选项是否为禁用。 |
| `desc` | `string` | 选项的额外描述信息。 |
+++
^^^
^^^value
:::badges
`v-model`
:::
`items` 中已选项的 `value` 列表。
^^^
### 插槽
| 名称 | 描述 |
| -- | -- |
| ``item`` | [^slot-item] |
| ``desc`` | 按钮的额外描述信息，作用域参数同 [`item`](#slots-item) 插槽。 |
^^^slot-item
按钮内文本区域。
默认内容：`label` 属性值。
+++作用域参数
| 名称 | 类型 | 描述 |
| -- | -- | -- |
| `label` | `string` | 选项文本。 |
| `value` | `string` | 选项值。 |
| `index` | `number` | 选项在 `items` 中的序号。 |
| `disabled` | `boolean=` | 选项是否禁用。 |
| `desc` | `string` | 选项的额外描述信息。 |
+++
另外，`items` 内数据项中除了上面描述的字段之外的其它字段也会自动通过 `v-bind` 进行绑定到作用域参数上。
^^^
### 事件
| 名称 | 描述 |
| -- | -- |
| ``change`` | [^event-change] |
^^^event-change
:::badges
`v-model`
:::
选中状态变化后触发，回调参数为 `(value: *)`。`value` 为当前按钮组已选项内 `value` 字段的值。
^^^

96
one/docs/components/radio-group.md
View File

@ -1,96 +0,0 @@
# RadioGroup <small>单选框组</small>
## 示例
### 尺寸
可选的 [`ui`](#props-ui) 属性值：`s` / `m`。
[[ demo src="/demo/radio-group/default.vue" ]]
### 额外描述
在数据源的项目中设置 `desc` 字段或者通过 [`desc`](#slots-desc) 插槽来指定额外描述。额外描述会在悬浮时显示。
[[ demo src="/demo/radio-group/desc.vue" ]]
## API
### 属性
| 名称 | 类型 | 默认值 | 描述 |
| -- | -- | -- | -- |
| ``ui`` | `string=` | - | [^ui] |
| ``items`` | `Array<Object>` | `[]` | [^items] |
| ``value`` | `*` | - | [^value] |
| ``disabled`` | `boolean=` | `false` | 是否为禁用状态。 |
| ``readonly`` | `boolean=` | `false` | 是否为只读状态。 |
^^^ui
预设样式。
+++枚举值
| 值 | 描述 |
| -- | -- |
| `s` | 小尺寸样式。 |
| `m` | 中尺寸样式。 |
^^^
^^^items
单选框组数据源，项目类型为 `{ label, value, disabled, desc, ... }`。
+++字段详情
| 名称 | 类型 | 描述 |
| -- | -- | -- |
| `label` | `string` | 选项的文字说明。 |
| `value` | `*` | 选项对应的值。 |
| `disabled` | `boolean=` | 选项是否为禁用。 |
| `desc` | `string` | 选项的额外描述信息。 |
+++
^^^
^^^value
:::badges
`v-model`
:::
`items` 中已选项的 `value`。
^^^
### 插槽
| 名称 | 描述 |
| -- | -- |
| ``item`` | [^slot-item] |
| ``desc`` | 按钮的额外描述信息，作用域参数同 [`item`](#slots-item) 插槽。 |
^^^slot-item
选项描述文本区域。
默认内容：`label` 属性值。
+++作用域参数
| 名称 | 类型 | 描述 |
| -- | -- | -- |
| `label` | `string` | 选项文本。 |
| `value` | `*` | 选项值。 |
| `index` | `number` | 选项在 `items` 中的序号。 |
| `disabled` | `boolean=` | 选项是否禁用。 |
+++
另外，`items` 内数据项中除了上面描述的字段之外的其它字段也会自动通过 `v-bind` 进行绑定到作用域参数上。
^^^
### 事件
| 名称 | 描述 |
| -- | -- |
| ``change`` | [^event-change] |
^^^event-change
:::badges
`v-model`
:::
选中状态变化后触发，回调参数为 `(value: *)`。`value` 为当前按钮组已选项内 `value` 字段的值。
^^^

73
one/docs/components/radio.md
View File

@ -1,73 +0,0 @@
# Radio <small>单选框</small>
## 示例
### 尺寸
可选的 [`ui`](#props-ui) 属性值：`s` / `m`。
[[ demo src="/demo/radio/size.vue" ]]
### 值设定
可以通过设置 [`value`](props-value) 属性来修改选中状态下 `v-model` 的值。
[[ demo src="/demo/radio/model.vue" ]]
## API
### 属性
| 名称 | 类型 | 默认值 | 描述 |
| -- | -- | -- | -- |
| ``ui`` | `string=` | - | [^ui] |
| ``checked`` | `boolean` | `false` | [^checked] |
| ``value`` | `*` | `true` | 选中状态对应的值。 |
| ``disabled`` | `boolean=` | `false` | 是否为禁用状态。 |
| ``readonly`` | `boolean=` | `false` | 是否为只读状态。 |
^^^ui
预设样式。
+++枚举值
| 值 | 描述 |
| -- | -- |
| `s` | 小尺寸样式。 |
| `m` | 中尺寸样式。 |
+++
^^^
^^^checked
:::badges
`.sync`
:::
是否处于选中状态。
^^^
### 插槽
| 名称 | 描述 |
| -- | -- |
| ``default`` | 单选框的描述文本，点击时会进行选中。无默认内容。 |
### 事件
| 名称 | 描述 |
| -- | -- |
| ``change`` | 用户切换选中状态时触发，回调参数为 `(checked: boolean)`。`checked` 表示当前是否选中。 |
| ``input`` | [^event-input] |
^^^event-input
:::badges
`v-model`
:::
选中状态变化后触发，回调参数为 `(val: *)`。`val` 为当前 `v-model` 的值。与 [`change`](#events-change) 事件不同，`input` 事件在数据操作导致状态变化时也会触发。
^^^
此外，`Radio` 支持如下的原生事件：
`auxclick`、`click`、`contextmenu`、`dblclick`、`mousedown`、`mouseenter`、`mouseleave`、`mousemove`、`mouseover`、`mouseout`、`mouseup`、`select`、`wheel`、`keydown`、`keypress`、`keyup`、`focus`、`blur`、`focusin`、`focusout`。
回调参数均为相应的原生事件对象。

81
one/docs/components/region-picker.md
View File

@ -1,81 +0,0 @@
# RegionPicker <small>地域选择</small>
## 示例
[[ demo src="/demo/region-picker/default.vue" ]]
## API
### 属性
| 名称 | 类型 | 默认值 | 描述 |
| -- | -- | -- | -- |
| ``datasource`` | `Array<Object>` | `[]` | [^datasource] |
| ``selected`` | `Array<string>` | - | [^selected] |
| ``include-indeterminate`` | `boolean` | `false` | 是否将半选状态的节点加入已选项。`datasource` 节点中的非叶子节点若有部分子孙节点被选中，则为半选状态。 |
| ``disabled`` | `boolean=` | `false` | 是否为禁用状态。 |
| ``readonly`` | `boolean=` | `false` | 是否为只读状态。 |
^^^datasource
数据源，项目类型为 `{label, value, disabled, children, ...}`。
+++字段详情
| 名称 | 类型 | 描述 |
| -- | -- | -- |
| `label` | `string` | 节点的文字说明。 |
| `value` | `string=` | 节点对应的值。 |
| `disabled` | `boolean=` | 节点是否为禁用。 |
| `children` | `Array<Object>=` | 子节点列表，列表项类型与本节点相同。 |
+++
^^^
^^^selected
:::badges
`v-model`
:::
已选项 `value` 的数组。
^^^
### 插槽
| 名称 | 描述 |
| -- | -- |
| ``label`` | [^slot-label] |
^^^slot-label
每个节点文本描述的内容。
默认内容：每个节点 `label` 字段对应的文本内容。
+++作用域参数
| 名称 | 类型 | 描述 |
| -- | -- | -- |
| `label` | `string` | 节点的文字说明。 |
| `value` | `string` | 节点对应的值。 |
| `disabled` | `boolean=` | 节点是否为禁用。 |
| `children` | `Array<Object>=` | 子节点列表，列表项类型与本节点相同。 |
| `level` | `number` | 节点所在的层级。顶层节点层级为 `0`。 |
| `overlay` | `boolean=` | 是否在浮层中。 |
+++
另外，`datasource` 内节点中除了上面描述的字段之外的其它字段也会自动通过 `v-bind` 进行绑定到作用域参数上。
:::tip
`level` 为 `2` 且 `overlay` 为 `true` 时为在浮层中展现的三级标题，默认内容会附带被选中的子节点个数及子节点总数信息。
:::
^^^
### 事件
| 名称 | 描述 |
| -- | -- |
| ``select`` | [^event-select] |
^^^event-select
:::badges
`v-model`
:::
选中状态变化后触发，回调参数为 `(value: Array)`。`value` 类型与 [`selected`](#props-selected) 属性相同。
^^^

154
one/docs/components/schedule.md
View File

@ -1,154 +0,0 @@
# Schedule <small>时段选择</small>
## 示例
[[ demo src="/demo/schedule/default.vue" ]]
## API
### 属性
| 名称 | 类型 | 默认值 | 描述 |
| -- | -- | -- | -- |
| ``selected`` | `Object` | - | [^selected] |
| ``hour-class`` | `string | Array | Object | function` | `{}` | 特定小时的自定义 HTML `class`。传非函数时，数据格式为所有 [Vue 支持的 `class` 表达式](https://cn.vuejs.org/v2/guide/class-and-style.html#%E7%BB%91%E5%AE%9A-HTML-Class)；传函数时，签名为 `function(day: number, hour: number): string | Array<string>|Object<string, boolean>`，返回值格式亦为所有 Vue 支持的 `class` 表达式。 |
| ``disabled-date`` | `function(number, number): boolean` | `() => false` | 特定小时是否禁用。参数类型为 `(day: number, hour: number)`，分别表示一周的第几天（`0` 表示周日）及对应的小时数。 |
| ``shortcuts`` | `Array` | `schedule.shortcuts` | [^shortcuts] |
| ``shortcuts-display`` | `string` | `'inline'` | 快捷选择项的显示方式，支持 `inline` / `popup`，分别对应内联按钮组与下拉选择。 |
| ``statuses`` | `Array<{label: string, value: string}>` | `schedule.statuses` | 图例数据源。会为图例项目添加 `class` 值 <code>&#0096;veui-schedule-legend-${value}&#0096;</code>，`label` 则会显示为图例文本。 |
| ``disabled`` | `boolean=` | `false` | 是否为禁用状态。 |
| ``readonly`` | `boolean=` | `false` | 是否为只读状态。 |
^^^selected
:::badges
`v-model`
:::
已选时段。类型为 `Object<number, Array>`。
键为一周的第几天，`0` 表示周日，与 [`Date.prototype.getDay()`](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Date/getDay) 返回值相同。值为每天被选取的时段，每个时段格式为 `[start: number, end: number]`，`start` 与 `end` 均为 `0`–`23` 的小时数。
+++数据样例
```json
{
1: [
[9, 17]
],
6: [
[0, 2],
[18, 20]
]
}
```
本例表示周一的 9:00–18:00 与周六的 0:00–3:00 和 18:00–21:00。结束时间表示的是时段最后一小时的开始时间。
+++
^^^
^^^shortcuts
快捷选择选项列表。类型为 `{label: string, selected: boolean | Array}`。
`label` 为显示的提示文字。`selected` 表示预选择的时段，类型为数组时，格式与 [`selected`](#props-selected) 属性相同；值为 `true` 时等同于 `[[0, 23]]`。
^^^
### 插槽
| 名称 | 描述 |
| -- | -- |
| ``header`` | 顶部区域。 |
| ``header-content`` | 顶部区域的内容，不包括外层容器。 |
| ``shortcuts`` | 顶部快捷选项区域。 |
| ``legend`` | 顶部图例区域。 |
| ``legend-label`` | [^slot-legend-label] |
| ``hour`` | [^slot-hour] |
| ``label`` | [^slot-label] |
| ``tooltip`` | [^slot-tooltip] |
^^^slot-legend-label
每个图例的文本区域。
默认内容：每个图例状态 `label` 字段对应的文本内容。
+++作用域参数
| 名称 | 类型 | 描述 |
| -- | -- | -- |
| `label` | `string` | 图例状态的文字说明。 |
| `value` | `string` | 图例状态对应的值。 |
+++
另外，`status` 内对应图例状态对象中除了上面描述的字段之外的其它字段也会自动通过 `v-bind` 进行绑定到作用域参数上。
^^^
^^^slot-hour
每小时区域的内容。
默认内容：无。
+++作用域参数
| 名称 | 类型 | 描述 |
| -- | -- | -- |
| `day` | `number` | 一周的第几天，`0` 表示周日。 |
| `hour` | `number` | 小时序号。 |
+++
^^^
^^^slot-label
已选时间段的区域。
默认内容：时段在 3 小时及以上时，显示时段范围 <code>&#0096;${from}:00–${to + 1}:00&#0096;</code>；选择全天的显示为“全天”；小于 3 小时无内容。
+++作用域参数
| 名称 | 类型 | 描述 |
| -- | -- | -- |
| `from` | `number` | 时段开始的小时。 |
| `to` | `number` | 时段结束的小时。 |
+++
^^^
^^^slot-tooltip
光标移入每个小时格子的悬浮提示内容。
默认内容：当前小时格子的时间范围 <code>&#0096;${hour}:00–${hour + 1}:00&#0096;</code>。
+++作用域参数
| 名称 | 类型 | 描述 |
| -- | -- | -- |
| `day` | `number` | 一周的第几天，`0` 表示周日。 |
| `hour` | `number` | 小时序号。 |
+++
^^^
### 事件
| 名称 | 描述 |
| -- | -- |
| ``select`` | [^event-select] |
^^^event-select
:::badges
`v-model`
:::
选中状态变化后触发，回调参数为 `(value: Object)`。`value` 类型与 [`selected`](#props-selected) 属性相同。
^^^
### 全局配置
| 配置项 | 类型 | 默认值 | 描述 |
| -- | -- | -- | -- |
| ``schedule.statuses`` | Array<{name, label}> | 见描述。 | [^config-statuses] |
^^^config-statuses
默认图例状态数组。数组项类型为 `{name: string, label: string}`，默认值为：
```js
[
{ name: 'selected', label: '@@schedule.selectedRanges' },
{ name: 'available', label: '@@schedule.availableRanges' }
]
```
:::tip
`@@` 开头的值表示引用多语言配置中的相应字段。
:::
^^^

207
one/docs/components/search-box.md
View File

@ -1,207 +0,0 @@
# SearchBox <small>搜索框</small>
## 示例
### 风格
可选的 [`ui`](#props-ui) 属性值：`strong`。
[[ demo src="/demo/search-box/style.vue" ]]
### 尺寸
可选的 [`ui`](#props-ui) 属性值：`xs` / `s` / `m` / `l`。
[[ demo src="/demo/search-box/size.vue" ]]
### 只读与禁用
[[ demo src="/demo/search-box/disabled.vue" ]]
### 推荐列表
[[ demo src="/demo/search-box/suggestion.vue" ]]
## API
### 属性
| 名称 | 类型 | 默认值 | 描述 |
| -- | -- | -- | -- |
| ``ui`` | `string=` | - | [^ui] |
| ``value`` | `string` | - | [^value] |
| ``disabled`` | `boolean=` | `false` | 是否为禁用状态。 |
| ``readonly`` | `boolean=` | `false` | 是否为只读状态。 |
| ``placeholder`` | `string` | - | 搜索框占位符。 |
| ``autofocus`` | `boolean` | `false` | 是否自动聚焦。 |
| ``clearable`` | `boolean` | `false` | 是否显示清除按钮。 |
| ``select-on-focus`` | `boolean` | `false` | 聚焦时是否自动选择文本。 |
| ``composition`` | `boolean` | `false` | 是否感知输入法状态。 |
| ``suggestions`` | `Array<string>|Array<Object>` | - | [^suggestions] |
| ``replace-on-select`` | `boolean` | `true` | 选择推荐项时是否自动使用其内容填充文本框。 |
| ``maxlength`` | `number=` | - | 最大可输入的字符长度。 |
| ``get-length`` | `function(string): number=` | - | 自定义的字符长度计算函数。 |
| ``strict`` | `boolean=` | `false` | 是否超出最大字符长度后不允许继续输入。 |
| ``trim`` | `boolean | string=` | `false` | [^trim] |
| ``suggest-trigger`` | `Array<string>|string` | `input` | [^suggest-trigger] |
| ``expanded`` | `boolean=` | `false` | [^expanded] |
| ``match`` | `(item, keyword, { ancestors }) => boolean | Array<[number, number]>` | - | 支持自定义高亮逻辑， 默认大小写不敏感，参考 [`Autocomplete`](./Autocomplete#自定义搜索逻辑)。 |
| ``filter`` | `(item, keyword, { ancestors, offsets }) => boolean` | - | 支持自定义搜索命中逻辑，参考 [`Autocomplete`](./Autocomplete#自定义搜索逻辑)。 |
^^^ui
按钮预设样式。
+++枚举值
| 值 | 描述 |
| -- | -- |
| `strong` | 加强样式，搜索图标变成搜索按钮，背景为主题色。 |
| `xs` | 特小尺寸样式。 |
| `s` | 小尺寸样式。 |
| `m` | 中等尺寸样式。 |
| `l` | 大尺寸样式。 |
+++
^^^
^^^value
:::badges
`v-model`
:::
输入框的值。
^^^
^^^suggestions
推荐列表。列表项为 `Object` 时格式为 `{label, value}`。
+++字段详情
| 名称 | 类型 | 描述 |
| -- | -- | -- |
| `label` | `string` | 推荐项文本。 |
| `value` | `string` | 推荐项值。 |
+++
^^^
^^^suggest-trigger
展示推荐列表的触发时机。可以是枚举值，也可以枚举值的组合。
+++枚举值
| 值 | 描述 |
| -- | -- |
| `focus` | 输入框聚焦时。 |
| `input` | 输入框触发 [`input`](#events-input) 事件时。 |
| `submit` | 点击搜索按钮时。 |
+++
^^^
^^^expanded
:::badges
`.sync`
:::
建议面板是否展开（如果 `suggestions` 中没有待选项，则即使为 `true` 时面板也会关闭）。
^^^
^^^trim
是否移除前后空格。当为 `true` 时，会移除前后空格，当为 `false` 时，不移除前后空格。设置为字符串时，按指定方式进行移除。
+++枚举值
| 值 | 描述 |
| -- | -- |
| `both` | 移除两端空格。等同于 `true` 时的行为。 |
| `start` | 移除开始空格。 |
| `end` | 移除末尾空格。 |
+++
^^^
### 插槽
| 名称 | 描述 |
| -- | -- |
| ``suggestions`` | [^slot-suggestions] |
| ``suggestions-before`` | 插入推荐列表前的内容。 |
| ``suggestions-after`` | 插入推荐列表后的内容。 |
| ``suggestion`` | [^slot-suggestion] |
| ``clear`` | 点击清除按钮时触发。 |
| ``group-label`` | 可以参考 [`Select`](./select) 组件的 [`group-label`](./select#props-group-label) 属性。 |
| ``option-label`` | 可以参考 [`Select`](./select) 组件的 [`option-label`](./select#props-option-label) 属性。 |
^^^slot-suggestions
推荐列表内容。
+++作用域参数
| 名称 | 类型 | 描述 |
| -- | -- | -- |
| `suggestions` | `Array<{value: string, label: string}>` | 从 [`suggestions`](#props-suggestions) 属性归一化类型后的推荐列表。 |
| `select` | `function(suggestion: {value: string, label: string}): void` | 选择指定的推荐项。 |
^^^slot-suggestion
推荐列表的单项插槽，用来定制选项内容。
+++作用域参数
| 名称 | 类型 | 描述 |
| -- | -- | -- |
| `label` | `string` | 选项文本。 |
| `value` | `string` | 选项值。 |
`suggestions` 中的每一项，除了 `label` 和 `value` 外的字段也会自动通过 `v-bind` 进行绑定。
当 `suggestions` 为 `Array<string>` 类型时，`label` 和 `value` 均为单项 `string` 值。
+++
^^^
### 事件
| 名称 | 描述 |
| -- | -- |
| ``input`` | [^event-input] |
| ``suggest`` | [^event-suggest] |
| ``select`` | [^event-select] |
| ``search`` | [^event-search] |
| ``toggle`` | 提示面板展开状态切换时触发，回调参数为 `(expanded: boolean)`。`expanded` 表示操作将触发提示面板展开还是收起。 |
^^^event-input
输入框中文本发生变化时触发该事件，回调参数为 `(value: string)`。
+++参数详情
| 名称 | 类型 | 描述 |
| -- | -- | -- |
| `value` | `string` | 输入框的值。 |
+++
^^^
^^^event-suggest
需要展示推荐列表时触发，回调参数为 `(value: string)`。
+++参数详情
| 名称 | 类型 | 描述 |
| -- | -- | -- |
| `value` | `string` | 输入框的值。 |
+++
^^^
^^^event-select
选择推荐列表某个选项时触发，回调参数为 `(item: Object)`。
+++参数详情
| 名称 | 类型 | 描述 |
| -- | -- | -- |
| `item` | `{label: string, value: string=, ...}` | 单个选项。 |
+++
^^^
^^^event-search
输入内容被提交时触发，回调参数为 `(value: string, event: Event)`。
+++参数详情
| 名称 | 类型 | 描述 |
| -- | -- | -- |
| `value` | `string` | 输入框的值。 |
| `event` | [`Event`](https://developer.mozilla.org/en-US/docs/Web/Events/click) | 原生点击事件。 |
+++
^^^
### 图标
| 名称 | 描述 |
| -- | -- |
| ``search`` | 搜索。 |

281
one/docs/components/select.md
View File

@ -1,281 +0,0 @@
# Select <small>下拉选择</small>
:::tip
`Select` 组件可以内联 [`Option`](./option) 或 [`OptionGroup`](./option-group) 组件使用。
:::
## 示例
### 尺寸
可选的尺寸 [`ui`](#props-ui) 属性值：`xs` / `s` / `m` / `l`。
[[ demo src="/demo/select/size.vue" ]]
### 内联选项
`Select` 组件内支持内联使用 `OptionGroup` 及 `Option` 组件来代替 [`options`](#props-options) 属性。
[[ demo src="/demo/select/inline.vue" ]]
### 搜索选项
使用 [`searchable`](#props-searchable) 属性来开启选项搜索。
[[ demo src="/demo/select/searchable.vue" ]]
### 多选
使用 [`multiple`](#props-multiple) 属性来开启多选模式。
[[ demo src="/demo/select/multiple.vue" ]]
### 自定义已选项展示
使用 [`label`](#slots-label) 插槽来自定义**下拉关闭时**已选项如何展示。
使用 [`selected`](#slots-selected) 插槽来自定义已选项如何展示，和下拉是否关闭无关。
[[ demo src="/demo/select/selected.vue" ]]
## API
### 属性
| 名称 | 类型 | 默认值 | 描述 |
| -- | -- | -- | -- |
| ``ui`` | `string=` | - | [^ui] |
| ``options`` | `Array<Object>` | - | [^options] |
| ``value`` | `Array<*>|*` | - | [^value] |
| ``multiple`` | `boolean` | `false` | 是否允许多选。 |
| ``max`` | `number` | - | 多选时允许选择的项目上限。 |
| ``placeholder`` | `string` | `select.placeholder` | 未选择时的占位文本。 |
| ``clearable`` | `boolean` | `false` | 是否可以清除已选内容。 |
| ``searchable`` | `boolean` | `false` | 是否允许搜索选项。 |
| ``show-select-all`` | `boolean` | `false` | 多选模式下是否显示“全选”选项。 |
| ``expanded`` | `boolean=` | `false` | [^expanded] |
| ``disabled`` | `boolean=` | `false` | 是否为禁用状态。 |
| ``readonly`` | `boolean=` | `false` | 是否为只读状态。 |
| ``composition`` | `boolean=` | `false` | 是否感知搜索框输入法输入过程的值。 |
| ``overlay-class`` | `string | Array | Object=` | - | 参考 [`Overlay`](./overlay) 组件的 [`overlay-class`](./overlay#props-overlay-class) 属性。 |
| ``overlay-style`` | `string | Array | Object=` | - | 参考 [`Overlay`](./overlay) 组件的 [`overlay-style`](./overlay#props-overlay-style) 属性。 |
| ``match`` | `(item, keyword, { ancestors }) => boolean | [number, number] | Array<[number, number]>` | - | 支持自定义高亮逻辑， 默认大小写不敏感，参考 [`Autocomplete`](./Autocomplete#自定义搜索逻辑)。 |
| ``filter`` | `(item, keyword, { ancestors, offsets }) => boolean` | - | 支持自定义搜索命中逻辑，参考 [`Autocomplete`](./Autocomplete#自定义搜索逻辑)。 |
^^^ui
预设样式。
+++枚举值
| 值 | 描述 |
| -- | -- |
| `xs` | 超小尺寸样式。 |
| `s` | 小尺寸样式。 |
| `m` | 中尺寸样式。 |
| `l` | 大尺寸样式。 |
+++
^^^
^^^options
选项列表，项目的类型为 `{label, value, options, disabled, ...}`。
+++字段详情
| 名称 | 类型 | 描述 |
| -- | -- | -- |
| `label` | `string` | 选项的文字说明。 |
| `value` | `*` | 选项对应的值。 |
| `options` | `Array<Object>=` | 选项的子选项数组，数组项类型同 [`options`](#props-options) 属性数组项。 |
| `disabled` | `boolean=` | 选项是否为禁用。 |
+++
^^^
^^^value
:::badges
`v-model`
:::
已选值。
^^^
^^^expanded
:::badges
`.sync`
:::
下拉菜单是否展开。
^^^
### 插槽
| 名称 | 描述 |
| -- | -- |
| ``default`` | 选项列表的内容。在没有指定 [`options`](#props-options) 属性时，可以用来直接内联 `Option` 或 `OptionGroup`。 |
| ``before`` | [^slot-before] |
| ``after`` | 选项列表后的内容。无默认内容。作用域参数同 [`before`](#slots-before) 插槽。 |
| ``label`` | [^slot-label] |
| ``group-label`` | [^slot-group-label] |
| ``option-label`` | [^slot-option-label] |
| ``option`` | [^slot-option] |
| ``trigger`` | [^slot-trigger] |
| ``selected`` | [^slot-selected] |
| ``no-data`` | 用于定义当搜索无数据时要展现的内容。 |
^^^slot-before
选项列表前的内容。无默认内容。
+++作用域参数
| 名称 | 类型 | 描述 |
| -- | -- | -- |
| `value` | `*` | 已选项值。 |
| `select` | `function(value: *): void` | 用于切换已选项。 |
| `expanded` | `boolean` | 下拉菜单是否展开。 |
| `toggle` | `function(force?: boolean): void` | 用于切换下拉菜单展开状态。 |
+++
^^^
^^^slot-label
下拉按钮文本区域。
默认内容：已选项对应的 `label` 属性值或内联模式下已选项的文本内容。
+++作用域参数
| 名称 | 类型 | 描述 |
| -- | -- | -- |
| `label` | `string` | 已选项文本。 |
| `value` | `*` | 已选项值。 |
| `selected` | `boolean` | 是否已选择某个值。 |
| `disabled` | `boolean=` | 选项是否禁用。 |
+++
另外，当前选项数据中除了上面描述的字段之外的其它字段也会自动通过 `v-bind` 进行绑定到作用域参数上。
^^^
^^^slot-group-label
下拉选项组（带 `options` 的选项）的标题文本区域。
默认内容：选项的 `label` 属性值。
+++作用域参数
| 名称 | 类型 | 描述 |
| -- | -- | -- |
| `label` | `string` | 选项组标题文本。 |
| `disabled` | `boolean=` | 选项组是否禁用。 |
+++
另外，当前选项数据中除了上面描述的字段之外的其它字段也会自动通过 `v-bind` 进行绑定到作用域参数上。
^^^
^^^slot-option-label
下拉选项（不带 `options` 的选项）的文本区域。
默认内容：选项的 `label` 属性值。
+++作用域参数
| 名称 | 类型 | 描述 |
| -- | -- | -- |
| `label` | `string` | 选项文本。 |
| `value` | `*` | 选项值。 |
| `selected` | `boolean` | 是否已选择。 |
| `disabled` | `boolean=` | 选项是否禁用。 |
+++
另外，当前选项数据中除了上面描述的字段之外的其它字段也会自动通过 `v-bind` 进行绑定到作用域参数上。
^^^
^^^slot-option
可供选择的下拉选项的整个区域。
默认内容：`Option` 内的组件默认结构。
+++作用域参数
| 名称 | 类型 | 描述 |
| -- | -- | -- |
| `label` | `string` | 选项文本。 |
| `value` | `*` | 选项值。 |
| `selected` | `boolean` | 是否已选择。 |
| `disabled` | `boolean=` | 选项是否禁用。 |
+++
另外，当前选项数据中除了上面描述的字段之外的其它字段也会自动通过 `v-bind` 进行绑定到作用域参数上。
^^^
^^^^slot-trigger
整个下拉触发区域。
默认内容：下拉按钮。
+++作用域参数
| 名称 | 类型 | 描述 |
| -- | -- | -- |
| `attrs` | `Object` | 需要输出到触发元素上的属性，包括 `aria-*` / `disabled` 等，可以使用 `v-bind="attrs"` 统一进行输出。 |
| `handlers` | `Object` | [^handlers-desc] |
| `value` | `*` | 已选项值。 |
| `select` | `function(value: *): void` | 用于切换已选项。 |
| `expanded` | `boolean` | 下拉菜单是否展开。 |
| `toggle` | `function(force?: boolean): void` | 用于切换下拉菜单展开状态。 |
+++
^^^handlers-desc
需要绑定到触发元素上的事件监听器，可以使用 `v-on="handlers"` 统一进行输出。
:::tip
用于绑定 `handlers` 的元素需要支持获取焦点，以使各种键盘交互依然可以正常触发。
:::
^^^
^^^^
^^^slot-selected
选中值渲染区域。
默认内容：单选时渲染选中项目的标签；多选时将每个选中项目的标签渲染为 `Tag` 组件。
+++单选时的作用域参数
| 名称 | 类型 | 描述 |
| -- | -- | -- |
| `label` | `string` | 选项文本。 |
| `value` | `*` | 选项值。 |
| `selected` | `boolean` | 是否已选择。 |
| `disabled` | `boolean=` | 选项是否禁用。 |
+++
+++多选时的作用域参数
| 名称 | 类型 | 描述 |
| -- | -- | -- |
| `selected` | `Array<Object>` | 选中项数据的数组。 |
+++
^^^
### 事件
| 名称 | 描述 |
| -- | -- |
| ``input`` | 输入搜索关键词时触发。回调参数为 `(value: string)`，`value` 为输入框的 `value` 值。 |
| ``change`` | [^event-change] |
| ``toggle`` | 下拉菜单展开状态切换时触发，回调参数为 `(expanded: boolean)`。`expanded` 表示操作将触发下拉菜单展开还是收起。 |
| ``clear`` | 点击清除按钮时触发。 |
| ``afteropen`` | 下拉打开完成之后触发。 |
^^^event-change
:::badges
`v-model`
:::
选中状态变化后触发，回调参数为 `(value: *)`。`value` 为当前已选项 `value` 字段的值。
^^^
### 全局配置
| 配置项 | 类型 | 默认值 | 描述 |
| -- | -- | -- | -- |
| ``select.placeholder`` | `string` | `@@select.placeholder` | 未选择时的占位内容。 |
:::tip
`@@` 开头的值表示引用多语言配置中的相应字段。
:::
### 图标
| 名称 | 描述 |
| -- | -- |
| ``expand`` | 展开浮层。 |
| ``collapse`` | 收起浮层。 |

44
one/docs/components/sidebar.md
View File

@ -1,44 +0,0 @@
# Sidebar <small>布局侧边栏</small>
:::tip
`Sidebar` 组件需要配合 [`Layout`](./layout) / [`Header`](./header) / [`Footer`](./footer) / [`Content`](./content) 组件使用。
:::
## 示例
### 收起侧边栏
通过 [`collapse-mode`](#props-collapse-mode) 属性指定收起模式，分别是 `slim`（部分收起） / `hidden`（完全收起）。
[[ demo src="/demo/sidebar/collapse-mode.vue" browser="/demo/sidebar/collapse-mode.vue" ]]
### 展示/隐藏切换按钮
使用 `collapsible` 属性设置是否显示侧边栏展开/收起按钮。
[[ demo src="/demo/sidebar/collapsible.vue" browser="/demo/sidebar/collapsible.vue" ]]
## API
### 属性
| 名称 | 类型 | 默认值 | 描述 |
| -- | -- | -- | -- |
| ``sticky`` | `boolean` | `false` | 是否吸顶。使用注意参考[`吸顶/吸底布局`](./layout#吸顶吸底布局)。 |
| ``collapsible`` | `boolean` | `false` | 是否显示收起/展开按钮。 |
| ``collapsed`` | `boolean` | `false` | [^collapsed] |
| ``autocollapse`` | `boolean` | `false` | 是否拉伸窗口到一定阈值时自动收起。 |
| ``collapse-mode`` | `'slim' | 'hidden'` | `'slim'` | 收起模式，分别是 `slim`（部分收起）/`hidden`（完全收起）。
^^^collapsed
:::badges
`.sync`
:::
收起/展开的状态。
^^^
### 插槽
| 名称 | 描述 |
| -- | -- |
| ``default`` | 布局侧边栏的内容。 |

140
one/docs/components/sidenav.md
View File

@ -1,140 +0,0 @@
# Sidenav <small>边栏菜单</small>
## 示例
### 普通
结合 Vue Router 使用边栏菜单。
[[ demo src="/demo/sidenav/normal.vue" ]]
### 可折叠
配合 `Sidebar` 的 [`collapsible`](./sidebar#props-collapsible) 属性可以控制菜单的展开/收起。
[[ demo src="/demo/sidenav/collaspible.vue" browser="/demo/sidenav/collaspible.vue" ]]
### 自定义插槽
[[ demo src="/demo/sidenav/slot.vue" ]]
## API
### 属性
| 名称 | 类型 | 默认值 | 描述 |
| -- | -- | -- | -- |
| ``ui`` | `string=` | - | [^ui] |
| ``items`` | `Array<Object>=` | `[]` | [^items] |
| ``active`` | `string` | - | [^active] |
| ``matches`` | `function(Object, string): boolean` | - | [^matches] |
| ``collapsed`` | `boolean` | `false` | [^collapsed] |
| ``expanded`` | `Array<string>=` | `[]` | [^expanded] |
^^^ui
预设样式。
+++枚举值
| 值 | 描述 |
| -- | -- |
| `s` | 小尺寸样式。 |
| `m` | 中尺寸样式。 |
+++
^^^
^^^active
当前激活节点，若该节点定义了 `name` 则就是该 `name` 值，否则该值是由 `to` 生成的路由路径（[route.path](https://router.vuejs.org/zh/api/#%E8%B7%AF%E7%94%B1%E5%AF%B9%E8%B1%A1%E5%B1%9E%E6%80%A7)）。
^^^
^^^items
数据源数组，每个节点类型为 `{label, to, name, icon, disabled, children, ...}`。
+++字段详情
| 名称 | 类型 | 描述 |
| -- | -- | -- |
| `label` | `string` | 节点的文字描述。 |
| `to` | `string | Object` | 节点的导航目的地。参考 [`Link`](./link) 组件的 [`to`](./link#props-to) 属性。 |
| `name` | `string` | 节点的唯一标识，`name` 和 `to` 二者至少有一个存在。 |
| `disabled` | `boolean=` | 节点是否被禁用。 |
| `icon` | `string|{render: function}` | 首层节点使用的图标。 |
| `children` | `Array<Object>=` | 节点的子节点数组，数组项类型同 `items` 数组项。 |
+++
^^^
^^^matches
当路由发生切换时，用来从 `items` 中找到激活的项目。
默认实现：项目路由路径和当前路由的路径相等 (===) 则认为该项目是激活的。
^^^
^^^collapsed
:::badges
`.sync`
:::
当前折叠状态。
^^^
^^^expanded
:::badges
`.sync`
:::
指定当前展开的节点，是一个对应于 `items` 中节点数据中 `name` 属性或路由路径的数组。
^^^
### 插槽
| 名称 | 描述 |
| -- | -- |
| ``before`` | 前置插槽。 |
| ``item`` | [^item] |
| ``icon`` | [^icon] |
| ``item-label`` | [^item-label] |
| ``after`` | 后置插槽。 |
^^^item
每个节点的渲染插槽。
默认内容：渲染了 [`icon`](#slots-icon) 插槽和 [`item-label`](#slots-item-label) 插槽。
+++作用域参数
| 名称 | 类型 | 描述 |
| -- | -- | -- |
| `label` | `string` | 图标名称。 |
| `to` | `string | Object` | 节点的导航目的地。参考 [`Link`](./link) 组件的 [`to`](./link#props-to) 属性。 |
| `name` | `string` | 节点的唯一标识，`name` 和 `to` 二者至少有一个存在。 |
| `disabled` | `boolean=` | 节点是否被禁用。 |
| `icon` | `string` | 首层节点使用的图标。 |
| `children` | `Array<Object>=` | 节点的子节点数组，数组项类型同 `items` 数组项。 |
+++
^^^
^^^icon
节点前的图标插槽。
默认内容：渲染 `item.icon` 指定的图标。
+++作用域参数
| 名称 | 类型 | 描述 |
| -- | -- | -- |
| `icon` | `string|{render: function}` | 图标名称。 |
+++
^^^
^^^item-label
节点的文字标签插槽。
默认内容：渲染节点对应的 `Link`。
作用域参数参考 [`item`](#slots-item) 插槽。
^^^
### 事件
| 名称 | 描述 |
| -- | -- |
| ``activate`` | 用户点击有 `to` 的节点触发，参数是激活节点的整个 `item` 数据。 |
| ``click`` | 用户点击节点时触发，参数是激活节点整个 `item` 数据。 |

129
one/docs/components/slider.md
View File

@ -1,129 +0,0 @@
# Slider <small>滑块</small>
## 示例
### 尺寸
可选的尺寸 [`ui`](#props-ui) 属性值：`s` / `m`。
[[ demo src="/demo/slider/size.vue" ]]
### 只读/禁用
设置 [`readonly`](#props-readonly) 属性来使设置滑块只读，设置 [`disabled`](#props-disabled) 属性来使设置滑块禁用。
[[ demo src="/demo/slider/editable.vue" ]]
### 步进
使用 [`step`](#props-step) 属性来指定步进值，使点击调节按钮或按下 <kbd>←</kbd>、<kbd>→</kbd> 键时根据指定步进值来调整输入值。
[[ demo src="/demo/slider/steps.vue" ]]
### 范围
使用 [`max`](#props-max) / [`min`](#props-min) 属性来指定拖动范围两端的值。
[[ demo src="/demo/slider/range.vue" ]]
### 次级条
使用 [`secondary-progress`](#props-secondary-progress) 属性来指定一个次级进度条。
[[ demo src="/demo/slider/buffer.vue" ]]
### 定制内容
使用 [`thumb`](#slots-thumb) / [`tip`](#slots-tip) 插槽来自定义滑块按钮、悬浮提示等内容。
[[ demo src="/demo/slider/variant.vue" ]]
## API
### 属性
| 名称 | 类型 | 默认值 | 描述 |
| -- | -- | -- | -- |
| ``ui`` | `string=` | - | [^ui] |
| ``value`` | `*|Array<*>` | - | [^value] |
| ``secondary-progress`` | `number | Array<number>` | `0` | 次要条。 |
| ``min`` | `number` | `0` | `value` 经过 `parse` 函数处理后允许的最小值。 |
| ``max`` | `number` | `1` | `value` 经过 `parse` 函数处理后允许的最大值。 |
| ``step`` | `number` | `0` | `value` 经过 `parse` 函数处理后的步进值。 |
| ``mark`` | `boolean` | `false` | 是否显示步进标记。 |
| ``parse`` | `function` | `val => val` | 传入值处理函数。 |
| ``format`` | `function` | `val => val` | 输出值处理函数。 |
^^^ui
预设样式。
+++枚举值
| 值 | 描述 |
| -- | -- |
| `s` | 小尺寸样式。 |
| `m` | 中尺寸样式。 |
+++
^^^
^^^value
值。
默认值类型为 `number`，经过 `parse` 函数处理后值大小范围应在 `min` 和 `max` 之间。
当值为 `Array<number>` 形式时，组件则渲染多个滑块与值一一对应。
:::tip
当提供 `parse` 和 `format` 时，值可以为任意类型，但 `parse` 需要把传入值解析为 `number` 类型并返回；`format` 需要把传出值格式化成原始形式。`parse` 和 `format` 的实现只需要处理单值，组件内部会给多值的每一项分别依次调用这两个函数。
:::
^^^
### 插槽
| 名称 | 描述 |
| -- | -- |
| ``track`` | 滑轨。默认内容：横线。 |
| ``tip-label`` | 浮动提示文本。默认内容：当前 `value` 值。 |
| ``thumb`` | [^slot-thumb] |
| ``tip`` | [^slot-tip] |
^^^slot-thumb
滑块。
默认内容：圆形按钮。
+++作用域参数
| 名称 | 类型 | 描述 |
| -- | -- | -- |
| `index` | `number` | 滑块索引。 |
| `focus` | `boolean` | 滑块是否聚焦。 |
| `hover` | `boolean` | 鼠标是否悬浮。 |
| `dragging` | `boolean` | 滑块是否正在被拖动。 |
+++
^^^
^^^slot-tip
浮动提示。
默认内容：内容为 `value` 的 Tooltip 组件。
+++作用域参数
| 名称 | 类型 | 描述 |
| -- | -- | -- |
| `target` | `HTMLElement` | 滑块元素。 |
| `open` | `boolean` | 是否存在激活的滑块。 |
| `active-index` | `boolean` | 激活的滑块索引。 |
+++
^^^
### 事件
| 名称 | 描述 |
| -- | -- |
| ``input`` | [^event-input] |
^^^event-input
:::badges
`v-model`
:::
修改后触发，回调参数为 `(value: *)`。`value` 为改变后经 `format` 函数处理过的新值。
^^^

11
one/docs/components/span.md
View File

@ -1,11 +0,0 @@
# Span <small>行内文本</small>
:::tip
`Span` 组件可配合 [`InputGroup`](./input-group)、[`Field`](./field) 或 [`Fieldset`](./fieldset) 等组件使用。
:::
### 插槽
| 名称 | 描述 |
| -- | -- |
| ``default`` | 默认插槽。无默认内容。用于填充行内内容，**不允许**放入块级内容。 |

91
one/docs/components/steps.md
View File

@ -1,91 +0,0 @@
# Steps <small>步骤</small>
## 示例
### 尺寸及方向
可选的 [`ui`](#props-ui) 属性值：`s` / `m` / `vertical` / `label-vertical`。
[[ demo src="/demo/steps/default.vue" ]]
### 步骤状态
可以通过设置 [`steps`](#props-steps) 属性数据项的 `status` 自动值定义步骤状态，若步骤出错，可设置为 `error`。
[[ demo src="/demo/steps/status.vue" ]]
## API
### 属性
| 名称 | 类型 | 默认值 | 描述 |
| -- | -- | -- | -- |
| ``ui`` | `string=` | - | [^ui] |
| ``steps`` | `Array` | - | [^steps] |
| ``current`` | `number` | - | 当前步骤的索引值。 |
^^^ui
预设样式。
+++枚举值
| 值 | 描述 |
| -- | -- |
| `s` | 小尺寸样式。 |
| `m` | 中尺寸样式。 |
| `vertical` | 纵向样式。 |
| `label-vertical` | 文案纵向样式。 |
+++
^^^
^^^steps
步骤数据源。类型为 `{ label, desc, to, status }`。
+++字段详情
| 名称 | 类型 | | 描述 |
| -- | -- | -- |
| `label` | `string` | 步骤标题。 |
| `desc` | `string` | 步骤描述。 |
| `to` | `string | Object` | 步骤链接。类型见 [`Link`](./link) 组件的 [`to`](./link#propss-to) 属性。 |
| `status` | `string` | 步骤状态。可选值为默认和 `error`。 |
+++
^^^
### 插槽
| 名称 | 描述 |
| -- | -- |
| ``default`` | [^slot-default] |
| ``index`` | 序号部分内容，默认显示从 `1` 开始的序号，已完成的步骤显示完成图标，出错的步骤显示出错图标。位于 [`default`](#slots-default) 插槽内部，作用域参数同 [`default`](#slots-default) 插槽。 |
| ``label`` | 步骤标题部分内容，默认显示 `steps` 中项目的 `label` 字段。位于 [`default`](#slots-default) 插槽内部，作用域参数同 [`default`](#slots-default) 插槽。 |
| ``desc`` | 步骤描述部分内容，默认显示 `steps` 中项目的 `desc` 字段。位于 [`default`](#slots-default) 插槽内部，作用域参数同 [`default`](#slots-default) 插槽。 |
^^^slot-default
整个步骤项内容。
默认内容：序号/完成图标、步骤标题、描述等内容。
+++作用域参数
| 名称 | 类型 | 描述 |
| -- | -- | -- |
| `label` | `string` | 步骤标题。同 [`steps`](#props-steps) 属性中项目的 `label` 字段。 |
| `desc` | `string` | 步骤描述。同 [`steps`](#props-steps) 属性中项目的 `desc` 字段。 |
| `to` | `string | Object` | 步骤链接。同 [`steps`](#props-steps) 属性中项目的 `to` 字段。 |
| `status` | `string` | 步骤状态。同 [`steps`](#props-steps) 属性中项目的 `status` 字段。 |
| `index` | `number` | 步骤索引值。 |
另外，`steps` 内数据项中除了上面描述的字段之外的其它字段也会自动通过 `v-bind` 进行绑定到作用域参数上。
+++
^^^
### 事件
| 名称 | 描述 |
| -- | -- |
| ``click`` | 任意步骤被点击后触发，回调参数为 `(index: number, event: Event)`。其中 `index` 为被点击步骤的索引值，`event` 为相应的原生事件对象。 |
### 图标
| 名称 | 描述 |
| -- | -- |
| ``success`` | 已成功完成的步骤。 |
| ``error`` | 出错的步骤。 |

76
one/docs/components/switch.md
View File

@ -1,76 +0,0 @@
# Switch <small>开关</small>
## 示例
### 尺寸
可选的 [`ui`](#props-ui) 属性值：`xs` / `s` / `m`。
[[ demo src="/demo/switch/size.vue" ]]
### 值设定
可以通过设置 [`true-value`](#props-true-value) 和 [`false-value`](#props-false-value) 来修改打开、关闭状态下 `v-model` 的值。
[[ demo src="/demo/switch/value.vue" ]]
## API
### 属性
| 名称 | 类型 | 默认值 | 描述 |
| -- | -- | -- | -- |
| ``ui`` | `string=` | - | [^ui] |
| ``checked`` | `boolean` | `false` | [^checked] |
| ``true-value`` | `*` | `true` | 打开状态对应的值。 |
| ``false-value`` | `*` | `false` | 关闭状态对应的值。 |
| ``disabled`` | `boolean=` | `false` | 是否为禁用状态。 |
| ``readonly`` | `boolean=` | `false` | 是否为只读状态。 |
| ``loading`` | `boolean=` | `false` | 是否为加载中状态。 |
^^^ui
预设样式。
+++枚举值
| 值 | 描述 |
| -- | -- |
| `xs` | 超小尺寸样式。 |
| `s` | 小尺寸样式。 |
| `m` | 中尺寸样式。 |
+++
^^^
^^^checked
:::badges
`.sync`
:::
是否处于打开状态。
^^^
### 插槽
| 名称 | 描述 |
| -- | -- |
| ``default`` | 开关的描述文本，点击时会切换选择状态。无默认内容。 |
### 事件
| 名称 | 描述 |
| -- | -- |
| ``change`` | 用户切换打开状态时触发，回调参数为 `(checked: boolean)`。`checked` 表示当前是否打开。 |
| ``input`` | [^event-input] |
^^^event-input
:::badges
`v-model`
:::
打开状态变化后触发，回调参数为 `(val: *)`。`val` 为当前 `v-model` 的值。与 [`change`](#events-change) 事件不同，`input` 事件在数据操作导致状态变化时也会触发。
^^^
此外，`Switch` 支持如下的原生事件：
`auxclick`、`click`、`contextmenu`、`dblclick`、`mousedown`、`mouseenter`、`mouseleave`、`mousemove`、`mouseover`、`mouseout`、`mouseup`、`select`、`wheel`、`keydown`、`keypress`、`keyup`、`focus`、`blur`、`focusin`、`focusout`。
回调参数均为相应的原生事件对象。

57
one/docs/components/tab.md
View File

@ -1,57 +0,0 @@
# Tab <small>标签</small>
:::tip
`Tab` 组件需要配合 [`Tabs`](./tabs) 组件使用。
:::
## 示例
见 [`Tabs` 示例](./tabs#示例)。
## API
### 属性
| 名称 | 类型 | 默认值 | 描述 |
| -- | -- | -- | -- |
| ``label`` | `string` | - | 选项卡文本。 |
| ``name`` | `string` | - | 选项卡名称。 |
| ``disabled`` | `boolean=` | `false` | 选项卡是否禁用。 |
| ``to`` | `string | Object` | - | [^to] |
| ``matches`` | `function(Route, Route): boolean` | - | [^matches] |
| ``native`` | `boolean` | `false` | 路由模式是否强制使用原生的 `<a>` 元素。 |
| ``removable`` | `boolean` | | 是否可删除。 |
| ``status`` | `string` | - | [^status] |
^^^to
选项卡路由信息。类型见 [`Link`](./link) 组件的 [`to`](./link#props-to) 属性。如果 `to` 存在，则 [`name`](#props-name) 属性将被忽略。
:::tip
如果使用了 Vue Router，当前被激活的状态将与 `$route` 对象自动匹配，无需在 [`Tabs`](./tabs) 组件中手动控制 [`index`](./tabs#props-index) 或 [`active`](./tabs#props-active)。
:::
^^^
^^^matches
在使用了 Vue Router 且提供了 [`to`](#props-to) 属性后，用于自定义判断路由当前激活 `Tab` 的逻辑。参数列表为 `(current: Route, to: Route)`。`current` 与 `to` 参数均为 Vue Router 的 [`Route`](https://router.vuejs.org/zh/api/#%E8%B7%AF%E7%94%B1%E5%AF%B9%E8%B1%A1%E5%B1%9E%E6%80%A7) 类型对象。默认使用上层 [`Tabs`](./tabs) 组件的 [`matches`](./tabs#props-matches) 逻辑。
^^^
^^^status
选项卡状态。
+++枚举值
| 值 | 描述 |
| -- | -- |
| `success` | 成功状态。 |
| `warning` | 警示状态。 |
| `info` | 普通信息状态。 |
| `error` | 错误状态。 |
+++
^^^
### 插槽
| 名称 | 描述 |
| -- | -- |
| ``default`` | 默认插槽。 |
| ``item`` | 标签选项卡内容，包括对应的按钮/链接。 |
| ``label`` | 标签选项卡文本。 |

180
one/docs/components/table.md
View File

@ -1,180 +0,0 @@
# Table <small>表格</small>
:::tip
`Table` 组件需要配合 [`Column`](./column) 组件使用。
:::
## 示例
### 内容密度
可选的 [`ui`](#props-ui) 尺寸属性值：`compact` / `loose`。
[[ demo src="/demo/table/basic.vue" ]]
### 选择模式与排序
允许自定义唯一键、设定选择模式以及进行排序。
[[ demo src="/demo/table/advanced.vue" ]]
### 筛选
使用 `Column` 组件的 [`filter`](./column#slots-filter) 插槽来开启自定义筛选功能。
[[ demo src="/demo/table/filter.vue" ]]
### 内部滚动
允许启用内部滚动模式，以达到固定表头表底的效果。
[[ demo src="/demo/table/scrollable.vue" ]]
### 固定列
使用 `Table` 的 [`scroll`](#props-scroll) 属性及 `Column` 组件的 [`fixed`](./column#props-fixed) 属性来控制固定列的位置。
[[ demo src="/demo/table/fixed.vue" ]]
### 展开行
支持将带有子数据的行进行展开。
[[ demo src="/demo/table/expandable.vue" ]]
### 表头描述
使用 `Column` 组件的 [`desc`](./column#props-desc) 属性或 [`desc`](./column#slots-desc) 插槽来为表头增加描述信息。
[[ demo src="/demo/table/desc.vue" ]]
### 排序
使用 [`order`](#props-order) 属性和 [`order-by`](#props-order-by) 属性来指定表头上的排序状态。
监听 [`sort`](#events-sort) 事件来处理排序状态的变化。
设置 [`allowed-orders`](#props-allowed-orders) 属性来自定义允许的排序状态。
[[ demo src="/demo/table/order.vue" ]]
### 加载状态
使用 [`loading`](#props-loading) 属性来指定表格处于加载状态。
[[ demo src="/demo/table/loading.vue" ]]
### 截断提示
使用 `Column` 组件的 [`tooltip`](./column#props-tooltip) 属性来指定在内容截断时显示悬浮提示。
[[ demo src="/demo/table/tooltip.vue" ]]
## API
### 属性
| 名称 | 类型 | 默认值 | 描述 |
| -- | -- | -- | -- |
| ``ui`` | `string=` | - | [^ui] |
| ``data`` | `Array<Object>` | - | 表格数据。 |
| ``key-field`` | `string` | - | 用于指定充当表格数据的键的列标志符。值对应 [`data`](#props-data) 属性中数据项的某个字段名称。对应字段的值则会作为行元素的 [`key` 属性](https://cn.vuejs.org/v2/guide/list.html#key)输出。当 [`selectable`](#props-selectable) 属性为 `true` 时，也可以用来指定在存在纵向合并单元格的情况下以哪一列的不同行作为选择项，此时值必须来自内部某个 `Column` 组件的 [`field`](./column#props-field) 属性。 |
| ``selectable`` | `boolean` | `false` | 是否支持表格行的选择。 |
| ``select-mode`` | `string` | `'multiple'` | 选择模式，支持的值为 `single` / `multiple`，分别对应于单选/多选模式。 |
| ``selected`` | `Array<*>|*` | `[]` | [^selected] |
| ``expandable`` | `boolean` | `false` | 是否允许展开行。 |
| ``expanded`` | `Array<*>` | `[]` | [^expanded] |
| ``order`` | `string | boolean` | `false` | 排序顺序。为 `false` 时表示无序，为字符串值 `'asc'` / `'desc'` 时分别为升序/降序。 |
| ``order-by`` | `string` | - | 用于指定当前基于哪一列进行了排序，值必须来自内部某个 `Column` 组件的 [`field`](./column#props-field) 属性。 |
| ``scroll`` | `number` | - | 指定滚动区域的最大高度，当超出此高度时，表格将进入固定表头和底部只允许数据区域滚动的模式。 |
| ``loading`` | `boolean` | `false` | 指定表格是否处于加载状态。 |
| ``allowed-orders`` | `Array` | `[false, 'desc', 'asc']` | [^allowed-orders] |
| ``bordered`` | `boolean` | `false` | 指定表格是否有边框。 |
| ``column-filter`` | `Array<string>` | - | 用于过滤表格的列，元素的值应该是列的 `key-field`，默认全部列都显示出来。 |
^^^ui
预设样式。
+++枚举值
| 值 | 描述 |
| -- | -- |
| `compact` | 紧凑样式。 |
| `loose` | 宽松样式。 |
| `s` | 小尺寸样式。 |
| `m` | 中尺寸样式。 |
+++
^^^
^^^selected
:::badges
`.sync`
:::
已选行。当 [`select-mode`](#props-select-mode) 属性为 `'multiple'` 时为已选行 [`key-field`](#props-key-field) 对应字段值的数组；为 `'single'` 时为已选行 [`key-field`](#props-key-field) 对应字段值。
^^^
^^^expanded
:::badges
`.sync`
:::
已展开行。为已展开行 [`key-field`](#props-key-field) 对应字段值的数组。
^^^
^^^allowed-orders
在表格层级指定列的排序范围。
+++值范围
| 值 | 描述 |
| -- | -- |
| `false` | 不排序。 |
| `'asc'` | 升序。 |
| `'desc'` | 降序。 |
+++
^^^
### 插槽
| 名称 | 描述 |
| -- | -- |
| ``default`` | 用于定义表格列，只能包含 `Column` 组件。 |
| ``no-data`` | 用于定义无数据时要展现的内容。 |
| ``foot`` | 表格脚部内容，整个区域将打通成为一个容器，不再保留分列。 |
| ``sub-row`` | [^slot-sub-row] |
^^^slot-sub-row
展开行后子行的内容。使用此插槽时，内容会作为行展开下方通栏显式的子行内容。使用此插槽时会覆盖 `Column` 的 [`sub-row`](./column#slots-sub-row) 插槽内容。
作用域参数为 [`data`](#props-data) 内当前行数据中的所有字段，以及当前行对应索引值 `index`。
^^^
### 事件
| 名称 | 描述 |
| -- | -- |
| ``select`` | [^event-select] |
| ``sort`` | [^event-sort] |
^^^event-select
切换已选项时触发。回调参数为 `(selected, item, selectedItems)`。
+++参数详情
| 名称 | 类型 | 描述 |
| -- | -- | -- |
| `selected` | `boolean` | `true` 表示已选择，`false` 则表示取消选择。 |
| `item` | `Object` | 选择状态发生变化的 [`data`](#props-data) 属性中的数据项。当存在纵向合并单元格且以相应行作为键进行选择时，将返回第一条相关的 `data` 数据项。 |
| `selectedItems` | `Object<string, Object | Array>` | 当前所有已选项的信息，键为 [`key-field`](#props-key-field) 对应字段，值为对应的 `data` 数据项。当存在纵向合并单元格且以相应行作为键进行选择时，值为所有相关行数据项组成的数组。 |
+++
^^^
^^^event-sort
进行排序时触发的事件。回调参数为 `(field, order)`。
+++参数详情
| 名称 | 类型 | 描述 |
| -- | -- | -- |
| `field` | `string` | 基于哪一列进行排序。值来自对应 `Column` 组件的 [`field`](./column#props-field) 属性。 |
| `order` | `string | boolean` | 同 [`order`](#props-order) 属性。 |
+++
^^^

143
one/docs/components/tabs.md
View File

@ -1,143 +0,0 @@
# Tabs <small>标签页</small>
:::tip
`Tabs` 组件需要配合 [`Tab`](./tab) 组件使用。
:::
## 示例
### 尺寸
可选的 [`ui`](#props-ui) 尺寸属性值：`s` / `m` / `l`。
[[ demo src="/demo/tabs/size.vue" ]]
### 样式
设置 `ui` 为 `simple` / `strong` 来分别启用简单样式、加强样式。
[[ demo src="/demo/tabs/style.vue" ]]
### 路由模式
设置 [`Tab`](./tab) 组件 [`to`](./tab#props-to) 属性来使用路由模式。
[[ demo src="/demo/tabs/route.vue" ]]
### 禁用状态
设置 [`Tab`](./tab) 组件 [`disabled`](./tab#props-disabled) 属性来使选项卡处于禁用状态。
[[ demo src="/demo/tabs/disabled.vue" ]]
## API
### 属性
| 名称 | 类型 | 默认值 | 描述 |
| -- | -- | -- | -- |
| ``ui`` | `string=` | - | [^ui] |
| ``active`` | `string` | - | [^active] |
| ``matches`` | `function(Route, Route): boolean` | `tabs.matches` | [^matches] |
| ``addable`` | `boolean` | `false` | 是否可以增加标签。 |
| ``max`` | `number` | - | 可增加标签的上限值。 |
| ``tip`` | `string` | - | 提示文本。 |
| ``add-label`` | `string=` | - | “添加”按钮的文字内容。 |
| ``eager`` | `boolean` | `false` | 是否立即渲染所有非当前激活项的标签面板内容（并隐藏）。 |
^^^ui
预设样式。
+++枚举值
| 值 | 描述 |
| -- | -- |
| `s` | 小尺寸样式。 |
| `m` | 中尺寸样式。 |
| `l` | 大尺寸样式。 |
| `simple` | 简单样式。 |
| `strong` | 加强样式。 |
+++
^^^
^^^active
:::badges
`.sync`
:::
表示当前哪个标签页处于激活状态。具体映射的值受[标签](./tab)的属性影响，优先级 `to` > `name`。
^^^
^^^matches
用于给内部的 [`Tab`](./tab) 组件设置统一的路由匹配逻辑。具体参见 [`Tab`](./tab) 组件的 [`to`](./tab#props-to) 属性。
:::warning
当内部的 `Tab` 组件设置了 [`matches`](./tab#props-matches) 属性，将会覆盖在 `Tabs` 组件上的 [`matches`](#props-matches) 属性。
:::
^^^
### 插槽
| 名称 | 描述 |
| -- | -- |
| ``default`` | 允许直接内联 `Tab` 组件。无默认内容。 |
| ``panel`` | 选项卡下方面板区域。 |
| ``extra`` | 位于标签页右侧的扩展区域。 |
| ``tab-item`` | [^tab-item] |
| ``tab-label`` | 标签选项卡文本区域，默认内容为选项卡文本。作用域参数同 [`tab-item`](#slots-tab-item) 插槽，`attrs` / `activate` 除外。 |
^^^tab-item
标签选项卡区域，默认内容为选项卡对应的按钮/链接。作用域参数为标签属性描述对象。
+++参数详情
| 名称 | 类型 | 描述 |
| -- | -- | -- |
| `label` | `string` | 选项卡文本。 |
| `name` | `string` | 选项卡名称。 |
| `disabled` | `boolean=` | 选项卡是否禁用。 |
| `to` | `string` | 选项卡路由信息。 |
| `active` | `boolean` | 选项卡是否是激活项。 |
| `index` | `number` | 选项卡位于列表中的索引值。 |
| `native` | `boolean` | 路由模式是否强制使用原生的 `<a>` 元素。 |
| `removable` | `boolean` | 是否可删除。 |
| `status` | `string` | 选项卡状态。 |
| `attrs` | `Object<string, string>` | 其它需要输出到选项卡元素上的 HTML 属性，例如 `role` / `aria-selected` / `aria-controls` 等。 |
| `activate` | `function(): void` | 激活当前选项卡的方法。 |
+++
^^^
### 事件
| 名称 | 描述 |
| -- | -- |
| ``change`` | 切换时触发。回调参数为 `(tab: Object)`，`tab` 与 [`tab-label`](#slots-tab-label) 插槽中的作用域参数一致。 |
| ``add`` | 点击添加按钮触发的事件，无回调参数。 |
| ``remove`` | 删除标签时触发的事件。回调参数为 `(tab: Object)`，`tab` 与 [`tab-label`](#slots-tab-label) 插槽中的作用域参数一致。 |
### 全局配置
| 名称 | 类型 | 默认值 | 描述 |
| -- | -- | -- | -- |
| ``tabs.matches`` | `function` | 见描述。 | [^config-matches] |
^^^config-matches
函数签名与 [`Tab`](./tab) 组件的 [`to`](./tab#props-to) 属性相同。默认值为：
```js
function (current, to) {
return current.fullPath === to.fullPath
}
```
^^^
### 图标
| 名称 | 描述 |
| -- | -- |
| ``add`` | 添加按钮。 |
| ``remove`` | 清除按钮。 |
| ``prev`` | 往左翻页按钮。 |
| ``next`` | 往右翻页按钮。 |
| ``success`` | 成功状态。 |
| ``warning`` | 警示状态。 |
| ``info`` | 普通信息状态。 |
| ``error`` | 错误状态。 |

5
one/docs/components/tabs/index.vue
View File

@ -1,5 +0,0 @@
<template>
<div>
Tab content #1
</div>
</template>

5
one/docs/components/tabs/tab.vue
View File

@ -1,5 +0,0 @@
<template>
<div>
Tab content #1
</div>
</template>

5
one/docs/components/tabs/tab2.vue
View File

@ -1,5 +0,0 @@
<template>
<div>
Tab content #2
</div>
</template>

5
one/docs/components/tabs/tab3.vue
View File

@ -1,5 +0,0 @@
<template>
<div>
Tab content #3
</div>
</template>

100
one/docs/components/tag.md
View File

@ -1,100 +0,0 @@
# Tag <small>标签</small>
## 示例
### 尺寸
可选的尺寸 [`ui`](#props-ui) 属性值：`s` / `m`。
[[ demo src="/demo/tag/size.vue" ]]
### 可选择
使用 [`selectable`](#props-selectable) 属性使标签可以切换选中状态。
[[ demo src="/demo/tag/selectable.vue" ]]
### 可移除
使用 [`removable`](#props-removable) 属性使标签可以被移除。
[[ demo src="/demo/tag/removable.vue" ]]
## API
### 属性
| 名称 | 类型 | 默认值 | 描述 |
| -- | -- | -- | -- |
| ``ui`` | `string=` | - | [^ui] |
| ``type`` | `string=` | `'default'` | [^type] |
| ``selectable`` | `boolean=` | `false` | 是否允许选择。 |
| ``selected`` | `boolean=` | `false` | [^selected] |
| ``removable`` | `boolean=` | `false` | 是否允许删除。 |
| ``removed`` | `boolean=` | `false` | [^removed] |
| ``disabled`` | `boolean=` | `false` | 是否禁用。 |
:::warning
[`selectable`](#props-selectable) 和 [`removable`](#props-removable) 属性不允许同时为 `true`。
:::
^^^ui
预设样式。
+++枚举值
| 值 | 描述 |
| -- | -- |
| `s` | 小内容尺寸。 |
| `m` | 中内容尺寸。 |
| `reverse` | 反色样式。 |
| `bordered` | 带边框样式。 |
+++
^^^
^^^type
标签类型。
+++枚举值
| 值 | 描述 |
| -- | -- |
| `default` | 默认标签。 |
| `info` | 信息提示标签。 |
| `success` | 成功标签。 |
| `warning` | 警告标签。 |
| `error` | 错误标签。 |
+++
^^^
^^^selected
:::badges
`.sync`
:::
是否已被选中。
^^^
^^^removed
:::badges
`.sync`
:::
是否已被删除。
^^^
### 插槽
| 名称 | 描述 |
| -- | -- |
| ``default`` | 内容区。 |
### 事件
| 名称 | 描述 |
| -- | -- |
| ``remove`` | 点击删除按钮时触发。 |
### 图标
| 名称 | 描述 |
| -- | -- |
| ``remove`` | 删除。 |

99
one/docs/components/textarea.md
View File

@ -1,99 +0,0 @@
# Textarea <small>文本域</small>
## 示例
### 尺寸
可选的 [`ui`](#props-ui) 属性值：`s` / `m`。
[[ demo src="/demo/textarea/size.vue" ]]
### 只读状态
设置 [`readonly`](#props-readonly) 来使文本域处于只读状态。
[[ demo src="/demo/textarea/readonly.vue" ]]
### 禁用状态
设置 [`disabled`](#props-disabled) 来使文本域处于禁用状态。
[[ demo src="/demo/textarea/disabled.vue" ]]
### 自动扩展
设置 [`autoresize`](#props-autoresize) 来使文本域处于自动扩展状态。
[[ demo src="/demo/textarea/autoresize.vue" ]]
## API
### 属性
| 名称 | 类型 | 默认值 | 描述 |
| -- | -- | -- | -- |
| ``ui`` | `string=` | - | [^ui] |
| ``value`` | `string` | '' | [^value] |
| ``disabled`` | `boolean=` | `false` | 文本域是否为禁用状态。 |
| ``readonly`` | `boolean=` | `false` | 文本域是否为只读状态。 |
| ``line-number`` | `boolean` | `false` | 是否显示行号。 |
| ``rows`` | `number | string` | - | 默认情况下文本域可视行数。 |
| ``placeholder`` | `string` | - | 输入占位符。 |
| ``composition`` | `boolean` | `false` | 是否感知输入法输入过程的值。 |
| ``select-on-focus`` | `boolean` | `false` | 聚焦时是否自动选中文本域文本。 |
| ``autoresize`` | `boolean` | `false` | 高度是否会被内容撑开。 |
| ``get-length`` | `function(string): number=` | 自定义的字符长度计算函数。 |
| ``resizable`` | `boolean=` | 指定是否可以调节长宽。 |
| ``maxlength`` | `number=` | - | 最大可输入的字符长度。 |
| ``strict`` | `boolean=` | `false` | 是否超出最大字符长度后不允许继续输入。 |
^^^ui
预设样式。
+++枚举值
| 值 | 描述 |
| -- | -- |
| `s` | 小尺寸样式。 |
| `m` | 中尺寸样式。 |
+++
^^^
^^^value
:::badges
`v-model`
:::
文本域的值。
^^^
### 事件
| 名称 | 描述 |
| -- | -- |
| ``change`` | [^event-change] |
| ``input`` | [^event-input] |
^^^event-change
输入框内容变化时触发，即原生 `change` 事件触发时。回调参数为 `(value, event)`。
+++参数详情
| 名称 | 类型 | 描述 |
| -- | -- | -- |
| `value` | `string` | 文本域的值。 |
| `event` | [`Event`](https://developer.mozilla.org/zh-CN/docs/Web/Events/change) | 原生 `change` 事件对象。 |
+++
^^^
^^^event-input
:::badges
`v-model`
:::
有效输入时触发，受 [`composition`](#props-composition) 属性影响。回调参数为 `(value: string)`，`value` 为输入框的 `value` 值。
^^^
此外，`Textarea` 支持如下的原生事件：
`auxclick`、`click`、`contextmenu`、`dblclick`、`mousedown`、`mouseenter`、`mouseleave`、`mousemove`、`mouseover`、`mouseout`、`mouseup`、`select`、`wheel`、`keydown`、`keypress`、`keyup`、`focus`、`blur`、`focusin`、`focusout`。
回调函数的参数都为原生事件对象。

124
one/docs/components/time-picker.md
View File

@ -1,124 +0,0 @@
# TimePicker <small>时间选择</small>
## 示例
### 三种模式
支持三种模式，分别是 `hour`、`minute` 和 `second`，可以通过 [`mode`](#props-mode) 属性来控制。
[[ demo src="/demo/time-picker/mode.vue" ]]
### 定制时间选项
支持定制时间选项，分别可以通过 [`hours`](#props-hours)、[`minutes`](#props-minutes) 和 [`seconds`](#props-seconds) 来定制对应的时间选项。
[[ demo src="/demo/time-picker/datasource.vue" ]]
### 范围限制
支持范围限制，可以通过 [`min`](#props-min) 和 [`max`](#props-max) 来分别设置最小值和最大值。
[[ demo src="/demo/time-picker/range.vue" ]]
## API
### 属性
| 名称 | 类型 | 默认值 | 描述 |
| -- | -- | -- | -- |
| ``ui`` | `string=` | - | [^ui] |
| ``mode`` | `string` | `'second'` | 指定选择的粒度，分别精确到时（`hour`）、分（`minute`）、秒（`second`）。 |
| ``value`` | `string` | | [^prop-value] |
| ``placeholder`` | `string` | `timepicker.placeholder` | 未选择时的占位文本。 |
| ``hours`` | `Array<number>` | - | 小时选项，默认 0-23。 |
| ``minutes`` | `Array<number>` | - | 分钟选项，默认 0-59。 |
| ``seconds`` | `Array<number>` | - | 秒钟选项，默认 0-59。 |
| ``min`` | `string` | - | 最小值限制。 |
| ``max`` | `string` | - | 最大值限制。 |
| ``autofocus`` | `boolean` | `false` | 是否自动获得焦点。 |
| ``clearable`` | `boolean` | `false` | 已选值是否可以清除。 |
| ``expanded`` | `boolean=` | `false` | [^expanded] |
| ``disabled`` | `boolean=` | `false` | 是否为禁用状态。 |
| ``readonly`` | `boolean=` | `false` | 是否为只读状态。 |
^^^ui
预设样式。为空格分隔的一组枚举值的组合。
+++枚举值
| 值 | 描述 |
| -- | -- |
| `s` | 小尺寸样式。 |
| `m` | 中尺寸样式。 |
+++
^^^
^^^prop-value
:::badges
`v-model`
:::
当前选中的值。
^^^
^^^expanded
:::badges
`.sync`
:::
下拉浮层是否展开。
^^^
### 插槽
| 名称 | 描述 |
| -- | -- |
| ``option`` | [^slot-option] |
^^^slot-option
下拉面板中的时间选项插槽。
+++作用域参数
| 名称 | 类型 | 描述 |
| -- | -- | -- |
| `label` | `string` | 用来显示的文字描述。 |
| `value` | `string` | 实际对应的值。 |
| `disabled` | `boolean=` | 是否禁用。 |
| `part` | `string` | 该选项是哪个部分，分别是 `hour` / `minute` / `second`。 |
+++
^^^
### 事件
| 名称 | 描述 |
| -- | -- |
| ``input`` | [^event-input] |
| ``change`` | 若当前选中的值发生变化，在时间选择下拉面板关闭时会触发该事件，参数是当前选中值。 |
| ``toggle`` | 下拉浮层展开状态切换时触发，回调参数为 `(expanded: boolean)`。`expanded` 表示操作将触发下拉浮层展开还是收起。 |
| ``clear`` | 清除当前选中的值。 |
^^^event-input
:::badges
`v-model`
:::
当手动输入或下拉面板中选值会触发该事件，参数是当前输入值。
^^^
### 全局配置
| 配置项 | 类型 | 默认值 | 描述 |
| -- | -- | -- | -- |
| ``timepicker.placeholder`` | `string` | `@@timepickerpicker.placeholder` | 未选择时的占位文本。 |
:::tip
`@@` 开头的值表示引用多语言配置中的相应字段。
:::
### 图标
| 名称 | 描述 |
| -- | -- |
| ``clock`` | 时钟。 |
| ``clear`` | 清除内容。 |

Some files were not shown because too many files have changed in this diff Show More