Skip to content

Commit f516b26

Browse files
JustineoJustineo
committed
feat: refine sidenav and layout demo, update veui
1 parent eadaad2 commit f516b26

File tree

18 files changed

+1596
-157
lines changed

18 files changed

+1596
-157
lines changed

‎components/OneDemo.vue

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
<browser-window
88
v-if="browser"
99
:url="browser"
10-
width="80%"
10+
width="calc(100% - 40px)"
1111
height="400px"
1212
>
1313
<slot/>
@@ -86,6 +86,7 @@
8686
}"
8787
:code="code"
8888
:expanded="editorExpanded"
89+
:browser="!!browser"
8990
@close="handleEditorClose"
9091
@toggle="handleEditorToggle"
9192
/>
@@ -221,6 +222,10 @@ Icon.register({
221222
border-top-right-radius 4px
222223
padding 30px
223224
225+
& >>> .style-module_body__14MV-
226+
transform translate(0, 0)
227+
padding 0
228+
224229
.desc
225230
border 1px solid #eee
226231
padding 18px 20px

‎components/OneLive.vue

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -64,6 +64,9 @@
6464
<v-pane
6565
min-size="40"
6666
class="live-preview"
67+
:class="{
68+
'live-preview-browser': browser
69+
}"
6770
>
6871
<v-live-preview
6972
class="editor-preview"
@@ -166,7 +169,8 @@ export default {
166169
code: {
167170
type: String,
168171
default: ''
169-
}
172+
},
173+
browser: Boolean
170174
},
171175
data () {
172176
return {
@@ -321,6 +325,10 @@ export default {
321325
& >>> .live-preview
322326
overflow auto
323327
328+
.live-preview-browser
329+
transform translate(0, 0)
330+
padding 0 !important
331+
324332
.editor-toolbar
325333
position absolute
326334
top 12px

‎components/OneRepl.vue

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@
2121
<one-live
2222
class="editor"
2323
:code="code"
24+
:browser="browser"
2425
/>
2526
</article>
2627
</template>
@@ -60,7 +61,8 @@ export default {
6061
type: String,
6162
default: ''
6263
},
63-
expanded: Boolean
64+
expanded: Boolean,
65+
browser: Boolean
6466
},
6567
methods: {
6668
handleClose () {

‎one/docs/components/layout.md

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -10,15 +10,15 @@
1010

1111
`Layout` 组件支持多种典型布局。
1212

13-
[[ demo src="/demo/layout/basic.vue" ]]
13+
[[ demo src="/demo/layout/basic.vue" browser="/demos/layout/basic.vue" ]]
1414

1515
### 通顶侧边栏
1616

17-
[[ demo src="/demo/layout/global-sidebar.vue" ]]
17+
[[ demo src="/demo/layout/global-sidebar.vue" browser="/demos/layout/global-sidebar.vue" ]]
1818

1919
### 通栏底部
2020

21-
[[ demo src="/demo/layout/global-footer.vue" ]]
21+
[[ demo src="/demo/layout/global-footer.vue" browser="/demos/layout/global-footer.vue" ]]
2222

2323
### 吸顶/吸底布局
2424

@@ -32,7 +32,7 @@
3232
当吸底的布局底部和吸顶侧边栏一起使用需要在布局底部的父组件 `Layout` 上设置 `--dls-layout-footer-height` 来指定布局底部的高度。
3333
:::
3434

35-
[[ demo src="/demo/layout/sticky.vue" ]]
35+
[[ demo src="/demo/layout/sticky.vue" browser="/demos/layout/sticky.vue" ]]
3636

3737
## API
3838

‎one/docs/components/menu.md renamed to ‎one/docs/components/sidenav.md

Lines changed: 5 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,22 @@
1-
# Menu <small>边栏菜单</small>
1+
# Sidenav <small>边栏菜单</small>
22

33
## 示例
44

55
### 普通
66

77
结合 Vue Router 使用边栏菜单。
88

9-
[[ demo src="/demo/menu/normal.vue" ]]
9+
[[ demo src="/demo/sidenav/normal.vue" ]]
1010

1111
### 可折叠
1212

13-
使用 [`collapsible`](#props-collapsible) 属性控制菜单是否可以折叠。
13+
配合 `Sidebar` 的 [`collapsible`](./sidebar#props-collapsible) 属性可以控制菜单的展开/收起。
1414

15-
[[ demo src="/demo/menu/collaspible.vue" ]]
15+
[[ demo src="/demo/sidenav/collaspible.vue" browser="/demo/sidenav/collaspible.vue" ]]
1616

1717
### 自定义插槽
1818

19-
[[ demo src="/demo/menu/slot.vue" ]]
19+
[[ demo src="/demo/sidenav/slot.vue" ]]
2020

2121
## API
2222

@@ -28,7 +28,6 @@
2828
| ``items`` | `Array<Object>=` | `[]` | [^items] |
2929
| ``active`` | `string` | - | [^active] |
3030
| ``matches`` | `function(Object, string): boolean` | - | [^matches] |
31-
| ``collapsible`` | `boolean` | `false` | 整个导航菜单是否可折叠。 |
3231
| ``collapsed`` | `boolean` | `false` | [^collapsed] |
3332
| ``expanded`` | `Array<string>=` | `[]` | [^expanded] |
3433

@@ -139,9 +138,3 @@
139138
| -- | -- |
140139
| ``activate`` | 用户点击有 `to` 的节点触发，参数是激活节点的整个 `item` 数据。 |
141140
| ``click`` | 用户点击节点时触发，参数是激活节点整个 `item` 数据。 |
142-
143-
### 图标
144-
| 名称 | 描述 |
145-
| -- | -- |
146-
| ``expand`` | 展开。 |
147-
| ``collapse`` | 折叠。 |

‎one/docs/demo/form/withhold.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,10 +10,10 @@
1010
>
1111
<template #default="{ invalid, listeners }">
1212
<input
13+
v-model="formData.name"
1314
:class="{
1415
'demo-invalid': invalid
1516
}"
16-
v-model="formData.name"
1717
v-on="listeners"
1818
>
1919
</template>

‎one/docs/demo/grid/default.vue

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -64,6 +64,10 @@ export default {
6464
</script>
6565

6666
<style lang="less" scoped>
67+
article {
68+
padding: 10px 12px;
69+
}
70+
6771
.veui-grid-row {
6872
& + & {
6973
margin: 2px 0; /* Just for showcase */

‎one/docs/demo/grid/fixed.vue

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -53,6 +53,7 @@ export default {
5353
<style lang="less" scoped>
5454
article {
5555
width: 400px; /* Fixed-width container */
56+
padding: 10px 12px;
5657
}
5758
5859
.veui-grid-row {

‎one/docs/demo/layout/basic.vue

Lines changed: 15 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,21 @@
11
<template>
22
<article>
3-
<div class="mock-window">
3+
<veui-layout>
4+
<veui-header>Header</veui-header>
45
<veui-layout>
5-
<veui-header>Header</veui-header>
6+
<veui-sidebar>
7+
<div class="center full">
8+
Sidebar
9+
</div>
10+
</veui-sidebar>
611
<veui-layout>
7-
<veui-sidebar>
8-
<div class="center full">Sidebar</div>
9-
</veui-sidebar>
10-
<veui-layout>
11-
<veui-content>Content</veui-content>
12-
<veui-footer style="background: #ccc;">Footer（背景仅为演示）</veui-footer>
13-
</veui-layout>
12+
<veui-content>Content</veui-content>
13+
<veui-footer style="background: #ccc;">
14+
Footer（背景仅为演示）
15+
</veui-footer>
1416
</veui-layout>
1517
</veui-layout>
16-
</div>
18+
</veui-layout>
1719
</article>
1820
</template>
1921

@@ -32,12 +34,11 @@ export default {
3234
</script>
3335

3436
<style lang="less" scoped>
35-
.mock-window {
36-
height: 384px;
37-
transform: translate(0, 0); // bfc for fixed
37+
article {
38+
height: 100%;
3839
3940
& > .veui-layout {
40-
min-width: 860px;
41+
min-width: 720px;
4142
}
4243
}
4344

‎one/docs/demo/layout/global-footer.vue

Lines changed: 15 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,21 @@
11
<template>
22
<article>
3-
<div class="mock-window">
3+
<veui-layout>
4+
<veui-header>Header</veui-header>
45
<veui-layout>
5-
<veui-header>Header</veui-header>
6+
<veui-sidebar>
7+
<div class="center full">
8+
Sidebar
9+
</div>
10+
</veui-sidebar>
611
<veui-layout>
7-
<veui-sidebar>
8-
<div class="center full">Sidebar</div>
9-
</veui-sidebar>
10-
<veui-layout>
11-
<veui-content>Content</veui-content>
12-
</veui-layout>
12+
<veui-content>Content</veui-content>
1313
</veui-layout>
14-
<veui-footer style="background: #ccc;">Footer（背景仅为演示）</veui-footer>
1514
</veui-layout>
16-
</div>
15+
<veui-footer style="background: #ccc;">
16+
Footer（背景仅为演示）
17+
</veui-footer>
18+
</veui-layout>
1719
</article>
1820
</template>
1921

@@ -36,12 +38,11 @@ export default {
3638
</script>
3739

3840
<style lang="less" scoped>
39-
.mock-window {
40-
height: 384px;
41-
transform: translate(0, 0); // bfc for fixed
41+
article {
42+
height: 100%;
4243
4344
& > .veui-layout {
44-
min-width: 860px;
45+
min-width: 720px;
4546
}
4647
}
4748

0 commit comments

Comments
 (0)