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

feat: refine sidenav and layout demo, update veui

Browse Source
This commit is contained in:
Justineo 2022-04-21 23:23:30 +08:00
parent eadaad2e22
commit f516b26edd
No known key found for this signature in database
GPG Key ID: B73F0979CF18A0EA
18 changed files with 1596 additions and 157 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
components/OneDemo.vue
View File

@ -7,7 +7,7 @@
<browser-window <browser-window
v-if="browser" v-if="browser"
:url="browser" :url="browser"
width="80%" width="calc(100% - 40px)"
height="400px" height="400px"
> >
<slot/> <slot/>
@ -86,6 +86,7 @@
}" }"
:code="code" :code="code"
:expanded="editorExpanded" :expanded="editorExpanded"
:browser="!!browser"
@close="handleEditorClose" @close="handleEditorClose"
@toggle="handleEditorToggle" @toggle="handleEditorToggle"
/> />
@ -221,6 +222,10 @@ Icon.register({
border-top-right-radius 4px border-top-right-radius 4px
padding 30px padding 30px
& >>> .style-module_body__14MV-
transform translate(0, 0)
padding 0
.desc .desc
border 1px solid #eee border 1px solid #eee
padding 18px 20px padding 18px 20px

10
components/OneLive.vue
View File

@ -64,6 +64,9 @@
<v-pane <v-pane
min-size="40" min-size="40"
class="live-preview" class="live-preview"
:class="{
'live-preview-browser': browser
}"
> >
<v-live-preview <v-live-preview
class="editor-preview" class="editor-preview"
@ -166,7 +169,8 @@ export default {
code: { code: {
type: String, type: String,
default: '' default: ''
} },
browser: Boolean
}, },
data () { data () {
return { return {
@ -321,6 +325,10 @@ export default {
& >>> .live-preview & >>> .live-preview
overflow auto overflow auto
.live-preview-browser
transform translate(0, 0)
padding 0 !important
.editor-toolbar .editor-toolbar
position absolute position absolute
top 12px top 12px

4
components/OneRepl.vue
View File

@ -21,6 +21,7 @@
<one-live <one-live
class="editor" class="editor"
:code="code" :code="code"
:browser="browser"
/> />
</article> </article>
</template> </template>
@ -60,7 +61,8 @@ export default {
type: String, type: String,
default: '' default: ''
}, },
expanded: Boolean expanded: Boolean,
browser: Boolean
}, },
methods: { methods: {
handleClose () { handleClose () {

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

@ -10,15 +10,15 @@
`Layout` 组件支持多种典型布局。 `Layout` 组件支持多种典型布局。
[[ demo src="/demo/layout/basic.vue" ]] [[ demo src="/demo/layout/basic.vue" browser="/demos/layout/basic.vue" ]]
### 通顶侧边栏 ### 通顶侧边栏
[[ demo src="/demo/layout/global-sidebar.vue" ]] [[ demo src="/demo/layout/global-sidebar.vue" browser="/demos/layout/global-sidebar.vue" ]]
### 通栏底部 ### 通栏底部
[[ demo src="/demo/layout/global-footer.vue" ]] [[ demo src="/demo/layout/global-footer.vue" browser="/demos/layout/global-footer.vue" ]]
### 吸顶/吸底布局 ### 吸顶/吸底布局
@ -32,7 +32,7 @@
当吸底的布局底部和吸顶侧边栏一起使用需要在布局底部的父组件 `Layout` 上设置 `--dls-layout-footer-height` 来指定布局底部的高度。 当吸底的布局底部和吸顶侧边栏一起使用需要在布局底部的父组件 `Layout` 上设置 `--dls-layout-footer-height` 来指定布局底部的高度。
::: :::
[[ demo src="/demo/layout/sticky.vue" ]] [[ demo src="/demo/layout/sticky.vue" browser="/demos/layout/sticky.vue" ]]
## API ## API

17
one/docs/components/menu.md → one/docs/components/sidenav.md
View File

@ -1,4 +1,4 @@
# Menu <small>边栏菜单</small> # Sidenav <small>边栏菜单</small>
## 示例 ## 示例
@ -6,17 +6,17 @@
结合 Vue Router 使用边栏菜单。 结合 Vue Router 使用边栏菜单。
[[ demo src="/demo/menu/normal.vue" ]] [[ demo src="/demo/sidenav/normal.vue" ]]
### 可折叠 ### 可折叠
使用 [`collapsible`](#props-collapsible) 属性控制菜单是否可以折叠。 配合 `Sidebar` 的 [`collapsible`](./sidebar#props-collapsible) 属性可以控制菜单的展开/收起。
[[ demo src="/demo/menu/collaspible.vue" ]] [[ demo src="/demo/sidenav/collaspible.vue" browser="/demo/sidenav/collaspible.vue" ]]
### 自定义插槽 ### 自定义插槽
[[ demo src="/demo/menu/slot.vue" ]] [[ demo src="/demo/sidenav/slot.vue" ]]
## API ## API
@ -28,7 +28,6 @@
| ``items`` | `Array<Object>=` | `[]` | [^items] | | ``items`` | `Array<Object>=` | `[]` | [^items] |
| ``active`` | `string` | - | [^active] | | ``active`` | `string` | - | [^active] |
| ``matches`` | `function(Object, string): boolean` | - | [^matches] | | ``matches`` | `function(Object, string): boolean` | - | [^matches] |
| ``collapsible`` | `boolean` | `false` | 整个导航菜单是否可折叠。 |
| ``collapsed`` | `boolean` | `false` | [^collapsed] | | ``collapsed`` | `boolean` | `false` | [^collapsed] |
| ``expanded`` | `Array<string>=` | `[]` | [^expanded] | | ``expanded`` | `Array<string>=` | `[]` | [^expanded] |
@ -139,9 +138,3 @@
| -- | -- | | -- | -- |
| ``activate`` | 用户点击有 `to` 的节点触发，参数是激活节点的整个 `item` 数据。 | | ``activate`` | 用户点击有 `to` 的节点触发，参数是激活节点的整个 `item` 数据。 |
| ``click`` | 用户点击节点时触发，参数是激活节点整个 `item` 数据。 | | ``click`` | 用户点击节点时触发，参数是激活节点整个 `item` 数据。 |
### 图标
| 名称 | 描述 |
| -- | -- |
| ``expand`` | 展开。 |
| ``collapse`` | 折叠。 |

2
one/docs/demo/form/withhold.vue
View File

@ -10,10 +10,10 @@
> >
<template #default="{ invalid, listeners }"> <template #default="{ invalid, listeners }">
<input <input
v-model="formData.name"
:class="{ :class="{
'demo-invalid': invalid 'demo-invalid': invalid
}" }"
v-model="formData.name"
v-on="listeners" v-on="listeners"
> >
</template> </template>

4
one/docs/demo/grid/default.vue
View File

@ -64,6 +64,10 @@ export default {
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
article {
padding: 10px 12px;
}
.veui-grid-row { .veui-grid-row {
& + & { & + & {
margin: 2px 0; /* Just for showcase */ margin: 2px 0; /* Just for showcase */

1
one/docs/demo/grid/fixed.vue
View File

@ -53,6 +53,7 @@ export default {
<style lang="less" scoped> <style lang="less" scoped>
article { article {
width: 400px; /* Fixed-width container */ width: 400px; /* Fixed-width container */
padding: 10px 12px;
} }
.veui-grid-row { .veui-grid-row {

29
one/docs/demo/layout/basic.vue
View File

@ -1,19 +1,21 @@
<template> <template>
<article> <article>
<div class="mock-window"> <veui-layout>
<veui-header>Header</veui-header>
<veui-layout> <veui-layout>
<veui-header>Header</veui-header> <veui-sidebar>
<div class="center full">
Sidebar
</div>
</veui-sidebar>
<veui-layout> <veui-layout>
<veui-sidebar> <veui-content>Content</veui-content>
<div class="center full">Sidebar</div> <veui-footer style="background: #ccc;">
</veui-sidebar> Footer（背景仅为演示）
<veui-layout> </veui-footer>
<veui-content>Content</veui-content>
<veui-footer style="background: #ccc;">Footer（背景仅为演示）</veui-footer>
</veui-layout>
</veui-layout> </veui-layout>
</veui-layout> </veui-layout>
</div> </veui-layout>
</article> </article>
</template> </template>
@ -32,12 +34,11 @@ export default {
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.mock-window { article {
height: 384px; height: 100%;
transform: translate(0, 0); // bfc for fixed
& > .veui-layout { & > .veui-layout {
min-width: 860px; min-width: 720px;
} }
} }

29
one/docs/demo/layout/global-footer.vue
View File

@ -1,19 +1,21 @@
<template> <template>
<article> <article>
<div class="mock-window"> <veui-layout>
<veui-header>Header</veui-header>
<veui-layout> <veui-layout>
<veui-header>Header</veui-header> <veui-sidebar>
<div class="center full">
Sidebar
</div>
</veui-sidebar>
<veui-layout> <veui-layout>
<veui-sidebar> <veui-content>Content</veui-content>
<div class="center full">Sidebar</div>
</veui-sidebar>
<veui-layout>
<veui-content>Content</veui-content>
</veui-layout>
</veui-layout> </veui-layout>
<veui-footer style="background: #ccc;">Footer（背景仅为演示）</veui-footer>
</veui-layout> </veui-layout>
</div> <veui-footer style="background: #ccc;">
Footer（背景仅为演示）
</veui-footer>
</veui-layout>
</article> </article>
</template> </template>
@ -36,12 +38,11 @@ export default {
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.mock-window { article {
height: 384px; height: 100%;
transform: translate(0, 0); // bfc for fixed
& > .veui-layout { & > .veui-layout {
min-width: 860px; min-width: 720px;
} }
} }

29
one/docs/demo/layout/global-sidebar.vue
View File

@ -1,19 +1,21 @@
<template> <template>
<article> <article>
<div class="mock-window"> <veui-layout>
<veui-sidebar>
<div class="center full">
Sidebar
</div>
</veui-sidebar>
<veui-layout> <veui-layout>
<veui-sidebar> <veui-header>Header</veui-header>
<div class="center full">Sidebar</div>
</veui-sidebar>
<veui-layout> <veui-layout>
<veui-header>Header</veui-header> <veui-content>Content</veui-content>
<veui-layout> <veui-footer style="background: #ccc;">
<veui-content>Content</veui-content> Footer（背景仅为演示）
<veui-footer style="background: #ccc;">Footer（背景仅为演示）</veui-footer> </veui-footer>
</veui-layout>
</veui-layout> </veui-layout>
</veui-layout> </veui-layout>
</div> </veui-layout>
</article> </article>
</template> </template>
@ -36,12 +38,11 @@ export default {
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.mock-window { article {
height: 384px; height: 100%;
transform: translate(0, 0); // bfc for fixed
& > .veui-layout { & > .veui-layout {
min-width: 860px; min-width: 720px;
} }
} }

50
one/docs/demo/layout/sticky.vue
View File

@ -1,21 +1,36 @@
<template> <template>
<article> <article>
<div class="mock-window"> <veui-layout style="--dls-layout-header-height: 64px;">
<veui-layout style="--dls-layout-header-height: 64px;"> <veui-header sticky>
<veui-header sticky>Header</veui-header> Header
</veui-header>
<veui-layout>
<veui-sidebar
sticky
style="max-height: 320px;"
>
<div class="center full">
Sidebar
</div>
</veui-sidebar>
<veui-layout> <veui-layout>
<veui-sidebar sticky style="max-height: 320px;"> <veui-content>
<div class="center full">Sidebar</div> <div
</veui-sidebar> class="center"
<veui-layout> style="height: 800px;"
<veui-content> >
<div class="center" style="height: 800px;">Sidebar</div> Sidebar
</veui-content> </div>
<veui-footer sticky style="background: #ccc;">Footer（背景仅为演示）</veui-footer> </veui-content>
</veui-layout> <veui-footer
sticky
style="background: #ccc;"
>
Footer（背景仅为演示）
</veui-footer>
</veui-layout> </veui-layout>
</veui-layout> </veui-layout>
</div> </veui-layout>
</article> </article>
</template> </template>
@ -43,14 +58,11 @@ export default {
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.mock-window { article {
height: 384px; height: 100%;
transform: translate(0, 0); // bfc for fixed
overflow: auto;
border: 1px solid #eee;
& > .veui-layout { & > .veui-layout {
min-width: 860px; min-width: 720px;
} }
} }

52
one/docs/demo/menu/collaspible.vue → one/docs/demo/sidenav/collaspible.vue
View File

@ -1,25 +1,41 @@
<template> <template>
<article> <article>
<section> <veui-layout>
<veui-menu <veui-header>Header</veui-header>
:items="items" <veui-layout>
collapsible <veui-sidebar collapsible>
/> <veui-sidenav
</section> :items="items"
collapsible
/>
</veui-sidebar>
<veui-layout>
<veui-content>Content</veui-content>
<veui-footer style="background: #ccc;">
Footer（背景仅为演示）
</veui-footer>
</veui-layout>
</veui-layout>
</veui-layout>
</article> </article>
</template> </template>
<script> <script>
import { Menu } from 'veui' import { Layout, Header, Footer, Sidebar, Content, Sidenav } from 'veui'
import 'veui-theme-dls-icons/calendar' import 'veui-theme-dls-icons/calendar'
import 'veui-theme-dls-icons/bullseye' import 'veui-theme-dls-icons/bullseye'
import 'veui-theme-dls-icons/clock' import 'veui-theme-dls-icons/clock'
import 'veui-theme-dls-icons/eye' import 'veui-theme-dls-icons/eye'
export default { export default {
name: 'veui-menu-demo', name: 'veui-sidenav-demo',
components: { components: {
'veui-menu': Menu 'veui-layout': Layout,
'veui-header': Header,
'veui-footer': Footer,
'veui-sidebar': Sidebar,
'veui-content': Content,
'veui-sidenav': Sidenav
}, },
data () { data () {
let items = [ let items = [
@ -95,3 +111,21 @@ export default {
} }
} }
</script> </script>
<style lang="less" scoped>
article {
height: 100%;
& > .veui-layout {
min-width: 720px;
}
}
.veui-layout-header,
.veui-layout-footer,
.veui-layout-content {
display: flex;
align-items: center;
justify-content: center;
}
</style>

10
one/docs/demo/menu/normal.vue → one/docs/demo/sidenav/normal.vue
View File

@ -1,18 +1,16 @@
<template> <template>
<article> <article>
<section> <veui-sidenav :items="items"/>
<veui-menu :items="items"/>
</section>
</article> </article>
</template> </template>
<script> <script>
import { Menu } from 'veui' import { Sidenav } from 'veui'
export default { export default {
name: 'veui-menu-demo', name: 'veui-sidenav-demo',
components: { components: {
'veui-menu': Menu 'veui-sidenav': Sidenav
}, },
data () { data () {
let items = [ let items = [

24
one/docs/demo/menu/slot.vue → one/docs/demo/sidenav/slot.vue
View File

@ -1,26 +1,24 @@
<template> <template>
<article> <article>
<section> <veui-sidenav
<veui-menu :items="items"
:items="items" collapsible
collapsible >
> <template #icon>
<template #icon> <veui-icon name="calendar"/>
<veui-icon name="calendar"/> </template>
</template> </veui-sidenav>
</veui-menu>
</section>
</article> </article>
</template> </template>
<script> <script>
import { Menu, Icon } from 'veui' import { Sidenav, Icon } from 'veui'
import 'veui-theme-dls-icons/calendar' import 'veui-theme-dls-icons/calendar'
export default { export default {
name: 'veui-menu-demo', name: 'veui-sidenav-demo',
components: { components: {
'veui-menu': Menu, 'veui-sidenav': Sidenav,
'veui-icon': Icon 'veui-icon': Icon
}, },
data () { data () {

8
one/docs/nav.json
View File

@ -308,8 +308,8 @@
"slug": "drawer" "slug": "drawer"
}, },
{ {
"title": "Menu - 边栏菜单", "title": "Sidenav - 边栏菜单",
"slug": "menu" "slug": "sidenav"
}, },
{ {
"title": "Message - 消息", "title": "Message - 消息",
@ -714,8 +714,8 @@
"disabled": true "disabled": true
}, },
{ {
"title": "Menu", "title": "Sidenav",
"slug": "menu", "slug": "sidenav",
"disabled": true "disabled": true
}, },
{ {

1459
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

10
package.json
View File

@ -27,7 +27,7 @@
"@vue/runtime-dom": "^3.2.31", "@vue/runtime-dom": "^3.2.31",
"babel-eslint": "^10.1.0", "babel-eslint": "^10.1.0",
"babel-plugin-lodash": "^3.3.4", "babel-plugin-lodash": "^3.3.4",
"babel-plugin-veui": "^2.6.2", "babel-plugin-veui": "^2.6.3",
"cheerio": "^1.0.0-rc.10", "cheerio": "^1.0.0-rc.10",
"dls-graphics": "^1.0.0-alpha.3", "dls-graphics": "^1.0.0-alpha.3",
"dls-icons-vue": "^0.14.0", "dls-icons-vue": "^0.14.0",
@ -86,10 +86,10 @@
"typescript": "^4.6.2", "typescript": "^4.6.2",
"unist-util-remove": "^1.0.1", "unist-util-remove": "^1.0.1",
"unist-util-visit": "^1.4.0", "unist-util-visit": "^1.4.0",
"veui": "^2.6.2", "veui": "^2.6.3",
"veui-loader": "^2.6.2", "veui-loader": "^2.6.3",
"veui-theme-dls": "^2.6.2", "veui-theme-dls": "^2.6.3",
"veui-theme-dls-icons": "^2.6.2", "veui-theme-dls-icons": "^2.6.3",
"vue-awesome": "^4.5.0", "vue-awesome": "^4.5.0",
"vue-i18n": "^8.16.0", "vue-i18n": "^8.16.0",
"vue-live": "^1.17.2", "vue-live": "^1.17.2",