feat: refine sidenav and layout demo, update veui

components/OneDemo.vue

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

components/OneLive.vue

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

components/OneRepl.vue

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

one/docs/components/layout.md

@@ -10,15 +10,15 @@
 
 `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` 来指定布局底部的高度。
 :::
 
-[[ demo src="/demo/layout/sticky.vue" ]]
+[[ demo src="/demo/layout/sticky.vue" browser="/demos/layout/sticky.vue" ]]
 
 ## API
 

one/docs/components/sidenav.md

@@ -1,4 +1,4 @@
-# Menu <small>边栏菜单</small>
+# Sidenav <small>边栏菜单</small>
 
 ## 示例
 
@@ -6,17 +6,17 @@
 
 结合 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
 
@@ -28,7 +28,6 @@
 | ``items`` | `Array<Object>=` | `[]` | [^items] |
 | ``active`` | `string` | - | [^active] |
 | ``matches`` | `function(Object, string): boolean` | - | [^matches] |
-| ``collapsible`` | `boolean` | `false` | 整个导航菜单是否可折叠。 |
 | ``collapsed`` | `boolean` | `false` | [^collapsed] |
 | ``expanded`` | `Array<string>=` | `[]` | [^expanded] |
 
@@ -139,9 +138,3 @@
 | -- | -- |
 | ``activate`` | 用户点击有 `to` 的节点触发，参数是激活节点的整个 `item` 数据。 |
 | ``click`` | 用户点击节点时触发，参数是激活节点整个 `item` 数据。 |
-
-### 图标
-| 名称 | 描述 |
-| -- | -- |
-| ``expand`` | 展开。 |
-| ``collapse`` | 折叠。 |

one/docs/demo/form/withhold.vue

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

one/docs/demo/grid/default.vue

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

one/docs/demo/grid/fixed.vue

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

one/docs/demo/layout/basic.vue

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

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

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

one/docs/demo/layout/global-sidebar.vue

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

one/docs/demo/layout/sticky.vue

@@ -1,21 +1,36 @@
 <template>
 <article>
-  <div class="mock-window">
   <veui-layout style="--dls-layout-header-height: 64px;">
-      <veui-header sticky>Header</veui-header>
+    <veui-header sticky>
+      Header
+    </veui-header>
     <veui-layout>
-        <veui-sidebar sticky style="max-height: 320px;">
+      <veui-sidebar
-          <div class="center full">Sidebar</div>
+        sticky
+        style="max-height: 320px;"
+      >
+        <div class="center full">
+          Sidebar
+        </div>
       </veui-sidebar>
       <veui-layout>
         <veui-content>
-            <div class="center" style="height: 800px;">Sidebar</div>
+          <div
-          </veui-content>
+            class="center"
-          <veui-footer sticky style="background: #ccc;">Footer（背景仅为演示）</veui-footer>
+            style="height: 800px;"
-        </veui-layout>
+          >
-      </veui-layout>
+            Sidebar
-    </veui-layout>
           </div>
+        </veui-content>
+        <veui-footer
+          sticky
+          style="background: #ccc;"
+        >
+          Footer（背景仅为演示）
+        </veui-footer>
+      </veui-layout>
+    </veui-layout>
+  </veui-layout>
 </article>
 </template>
 
@@ -43,14 +58,11 @@ export default {
 </script>
 
 <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 {
-    min-width: 860px;
+    min-width: 720px;
   }
 }
 

one/docs/demo/sidenav/collaspible.vue

@@ -1,25 +1,41 @@
 <template>
 <article>
-  <section>
+  <veui-layout>
-    <veui-menu
+    <veui-header>Header</veui-header>
+    <veui-layout>
+      <veui-sidebar collapsible>
+        <veui-sidenav
           :items="items"
           collapsible
         />
-  </section>
+      </veui-sidebar>
+      <veui-layout>
+        <veui-content>Content</veui-content>
+        <veui-footer style="background: #ccc;">
+          Footer（背景仅为演示）
+        </veui-footer>
+      </veui-layout>
+    </veui-layout>
+  </veui-layout>
 </article>
 </template>
 
 <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/bullseye'
 import 'veui-theme-dls-icons/clock'
 import 'veui-theme-dls-icons/eye'
 
 export default {
-  name: 'veui-menu-demo',
+  name: 'veui-sidenav-demo',
   components: {
-    'veui-menu': Menu
+    'veui-layout': Layout,
+    'veui-header': Header,
+    'veui-footer': Footer,
+    'veui-sidebar': Sidebar,
+    'veui-content': Content,
+    'veui-sidenav': Sidenav
   },
   data () {
     let items = [
@@ -95,3 +111,21 @@ export default {
   }
 }
 </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>

one/docs/demo/sidenav/normal.vue

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

one/docs/demo/sidenav/slot.vue

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

one/docs/nav.json

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

package.json

@@ -27,7 +27,7 @@
     "@vue/runtime-dom": "^3.2.31",
     "babel-eslint": "^10.1.0",
     "babel-plugin-lodash": "^3.3.4",
-    "babel-plugin-veui": "^2.6.2",
+    "babel-plugin-veui": "^2.6.3",
     "cheerio": "^1.0.0-rc.10",
     "dls-graphics": "^1.0.0-alpha.3",
     "dls-icons-vue": "^0.14.0",
@@ -86,10 +86,10 @@
     "typescript": "^4.6.2",
     "unist-util-remove": "^1.0.1",
     "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-i18n": "^8.16.0",
     "vue-live": "^1.17.2",