feat: refine demo with browser window, update veui

This commit is contained in:
Justineo 2022-04-25 20:34:38 +08:00
parent f516b26edd
commit f3d12243b9
No known key found for this signature in database
GPG Key ID: B73F0979CF18A0EA
12 changed files with 203 additions and 233 deletions

View File

@ -226,6 +226,9 @@ Icon.register({
transform translate(0, 0)
padding 0
& >>> .veui-layout
min-width auto
.desc
border 1px solid #eee
padding 18px 20px

View File

@ -75,7 +75,7 @@
</veui-fieldset>
</veui-form>
<section
v-for="{ version, codeName, date, changeset } of filteredChangelog"
v-for="{ version, codeName, date, changeset } of pagedChangelog"
:key="version"
class="version-item"
data-markdown
@ -114,19 +114,27 @@
</ul>
</section>
<section
v-if="filteredChangelog.length === 0"
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 } from 'veui'
import { Form, Field, Fieldset, CheckboxGroup, Select, Checkbox, Pagination } from 'veui'
import changelog from '../assets/data/changelog.json'
const allTypes = [
@ -169,7 +177,8 @@ export default {
'veui-fieldset': Fieldset,
'veui-checkbox-group': CheckboxGroup,
'veui-select': Select,
'veui-checkbox': Checkbox
'veui-checkbox': Checkbox,
'veui-pagination': Pagination
},
data () {
return {
@ -182,7 +191,9 @@ export default {
tag: null,
from: null,
to: allVersions[0].value,
shrugger: getShrugger()
shrugger: getShrugger(),
page: 1,
pageSize: 10
}
},
computed: {
@ -207,6 +218,10 @@ export default {
})
return result.filter(({ changeset }) => changeset.length !== 0)
},
pagedChangelog () {
const { page, pageSize, filteredChangelog } = this
return filteredChangelog.slice((page - 1) * pageSize, page * pageSize)
}
},
watch: {
@ -259,6 +274,9 @@ export default {
& >>> .veui-field
margin-bottom 12px
& .veui-field
margin-bottom 0
& >>> .veui-field .veui-field-no-label
margin-bottom 0
@ -360,6 +378,9 @@ h2
p
margin 0 -0.75em 0 0
.pagination
margin-top 36px
@keyframes line-enter
0%
100%

View File

@ -10,13 +10,13 @@
通过 [`collapse-mode`](#props-collapse-mode) 属性指定收起模式,分别是 `slim`(部分收起) / `hidden`(完全收起)。
[[ demo src="/demo/sidebar/collapse-mode.vue" ]]
[[ demo src="/demo/sidebar/collapse-mode.vue" browser="/demo/sidebar/collapse-mode.vue" ]]
### 展示/隐藏切换按钮
使用 `collapsible` 属性设置是否显示侧边栏展开/收起按钮。
[[ demo src="/demo/sidebar/collapsible.vue" ]]
[[ demo src="/demo/sidebar/collapsible.vue" browser="/demo/sidebar/collapsible.vue" ]]
## API
@ -27,7 +27,7 @@
| ``collapsible`` | `boolean` | `false` | 是否显示收起/展开按钮。 |
| ``collapsed`` | `boolean` | `false` | [^collapsed] |
| ``autocollapse`` | `boolean` | `false` | 是否拉伸窗口到一定阈值时自动收起。 |
| ``collapse-mode`` | `'slim' | 'hidden'` | `'slim'` | 收起模式,分别是 `slim`(部分收起)/`hidden`(完全收起)。
| ``collapse-mode`` | `'slim' | 'hidden'` | `'slim'` | 收起模式,分别是 `slim`(部分收起)/`hidden`(完全收起)。
^^^collapsed
:::badges

View File

@ -1,22 +1,20 @@
<template>
<article>
<veui-layout>
<veui-header>Header</veui-header>
<veui-layout>
<veui-header>Header</veui-header>
<veui-sidebar>
<div class="center full">
Sidebar
</div>
</veui-sidebar>
<veui-layout>
<veui-sidebar>
<div class="center full">
Sidebar
</div>
</veui-sidebar>
<veui-layout>
<veui-content>Content</veui-content>
<veui-footer style="background: #ccc;">
Footer背景仅为演示
</veui-footer>
</veui-layout>
<veui-content>Content</veui-content>
<veui-footer style="background: #ccc;">
Footer背景仅为演示
</veui-footer>
</veui-layout>
</veui-layout>
</article>
</veui-layout>
</template>
<script>
@ -34,14 +32,6 @@ export default {
</script>
<style lang="less" scoped>
article {
height: 100%;
& > .veui-layout {
min-width: 720px;
}
}
.center,
.veui-layout-header,
.veui-layout-footer,

View File

@ -1,22 +1,20 @@
<template>
<article>
<veui-layout>
<veui-header>Header</veui-header>
<veui-layout>
<veui-header>Header</veui-header>
<veui-sidebar>
<div class="center full">
Sidebar
</div>
</veui-sidebar>
<veui-layout>
<veui-sidebar>
<div class="center full">
Sidebar
</div>
</veui-sidebar>
<veui-layout>
<veui-content>Content</veui-content>
</veui-layout>
<veui-content>Content</veui-content>
</veui-layout>
<veui-footer style="background: #ccc;">
Footer背景仅为演示
</veui-footer>
</veui-layout>
</article>
<veui-footer style="background: #ccc;">
Footer背景仅为演示
</veui-footer>
</veui-layout>
</template>
<script>
@ -38,14 +36,6 @@ export default {
</script>
<style lang="less" scoped>
article {
height: 100%;
& > .veui-layout {
min-width: 720px;
}
}
.center,
.veui-layout-header,
.veui-layout-footer,

View File

@ -1,22 +1,20 @@
<template>
<article>
<veui-layout>
<veui-sidebar>
<div class="center full">
Sidebar
</div>
</veui-sidebar>
<veui-layout>
<veui-sidebar>
<div class="center full">
Sidebar
</div>
</veui-sidebar>
<veui-header>Header</veui-header>
<veui-layout>
<veui-header>Header</veui-header>
<veui-layout>
<veui-content>Content</veui-content>
<veui-footer style="background: #ccc;">
Footer背景仅为演示
</veui-footer>
</veui-layout>
<veui-content>Content</veui-content>
<veui-footer style="background: #ccc;">
Footer背景仅为演示
</veui-footer>
</veui-layout>
</veui-layout>
</article>
</veui-layout>
</template>
<script>
@ -38,14 +36,6 @@ export default {
</script>
<style lang="less" scoped>
article {
height: 100%;
& > .veui-layout {
min-width: 720px;
}
}
.center,
.veui-layout-header,
.veui-layout-footer,

View File

@ -1,37 +1,35 @@
<template>
<article>
<veui-layout style="--dls-layout-header-height: 64px;">
<veui-header sticky>
Header
</veui-header>
<veui-layout style="--dls-layout-header-height: 64px;">
<veui-header sticky>
Header
</veui-header>
<veui-layout>
<veui-sidebar
sticky
style="max-height: 320px;"
>
<div class="center full">
Sidebar
</div>
</veui-sidebar>
<veui-layout>
<veui-sidebar
sticky
style="max-height: 320px;"
>
<div class="center full">
<veui-content>
<div
class="center"
style="height: 800px;"
>
Sidebar
</div>
</veui-sidebar>
<veui-layout>
<veui-content>
<div
class="center"
style="height: 800px;"
>
Sidebar
</div>
</veui-content>
<veui-footer
sticky
style="background: #ccc;"
>
Footer背景仅为演示
</veui-footer>
</veui-layout>
</veui-content>
<veui-footer
sticky
style="background: #ccc;"
>
Footer背景仅为演示
</veui-footer>
</veui-layout>
</veui-layout>
</article>
</veui-layout>
</template>
<script>
@ -58,14 +56,6 @@ export default {
</script>
<style lang="less" scoped>
article {
height: 100%;
& > .veui-layout {
min-width: 720px;
}
}
.center,
.veui-layout-header,
.veui-layout-footer,

View File

@ -1,24 +1,28 @@
<template>
<article>
<veui-radio-button-group
v-model="mode"
:items="modes"
/>
<div class="mock-window">
<veui-layout>
<veui-header>Header</veui-header>
<veui-layout>
<veui-sidebar
collapsible
:collapse-mode="mode"
>
<div class="center full">
Sidebar
</div>
</veui-sidebar>
<veui-layout>
<veui-header>Header</veui-header>
<veui-layout>
<veui-sidebar :collapse-mode="mode">
<div class="center full">Sidebar</div>
</veui-sidebar>
<veui-layout>
<veui-content>Content</veui-content>
<veui-footer style="background: #ccc;">Footer背景仅为演示</veui-footer>
</veui-layout>
</veui-layout>
<veui-content>
<veui-radio-button-group
v-model="mode"
:items="modes"
/>
</veui-content>
<veui-footer style="background: #ccc;">
Footer背景仅为演示
</veui-footer>
</veui-layout>
</div>
</article>
</veui-layout>
</veui-layout>
</template>
<script>
@ -46,17 +50,6 @@ export default {
</script>
<style lang="less" scoped>
.mock-window {
height: 384px;
transform: translate(0, 0); // bfc for fixed
overflow: auto;
border: 1px solid #eee;
& > .veui-layout {
min-width: 860px;
}
}
.center,
.veui-layout-header,
.veui-layout-footer,

View File

@ -1,24 +1,30 @@
<template>
<article>
<div class="mock-window">
<veui-layout>
<veui-header>Header</veui-header>
<veui-layout>
<veui-sidebar :collapsible="collapsible">
<div class="center full">
Sidebar
</div>
</veui-sidebar>
<veui-layout>
<veui-header>Header</veui-header>
<veui-layout>
<veui-sidebar :collapsible="false">
<div class="center full">Sidebar</div>
</veui-sidebar>
<veui-layout>
<veui-content>Content</veui-content>
<veui-footer style="background: #ccc;">Footer背景仅为演示</veui-footer>
</veui-layout>
</veui-layout>
<veui-content>
<veui-switch
v-model="collapsible"
>
Collapsible
</veui-switch>
</veui-content>
<veui-footer style="background: #ccc;">
Footer背景仅为演示
</veui-footer>
</veui-layout>
</div>
</article>
</veui-layout>
</veui-layout>
</template>
<script>
import { Layout, Header, Footer, Sidebar, Content } from 'veui'
import { Layout, Header, Footer, Sidebar, Content, Switch } from 'veui'
export default {
components: {
@ -26,21 +32,18 @@ export default {
'veui-header': Header,
'veui-footer': Footer,
'veui-sidebar': Sidebar,
'veui-content': Content
'veui-content': Content,
'veui-switch': Switch
},
data () {
return {
collapsible: true
}
}
}
</script>
<style lang="less" scoped>
.mock-window {
height: 384px;
transform: translate(0, 0); // bfc for fixed
& > .veui-layout {
min-width: 860px;
}
}
.center,
.veui-layout-header,
.veui-layout-footer,

View File

@ -1,23 +1,21 @@
<template>
<article>
<veui-layout>
<veui-header>Header</veui-header>
<veui-layout>
<veui-header>Header</veui-header>
<veui-sidebar collapsible>
<veui-sidenav
:items="items"
collapsible
/>
</veui-sidebar>
<veui-layout>
<veui-sidebar collapsible>
<veui-sidenav
:items="items"
collapsible
/>
</veui-sidebar>
<veui-layout>
<veui-content>Content</veui-content>
<veui-footer style="background: #ccc;">
Footer背景仅为演示
</veui-footer>
</veui-layout>
<veui-content>Content</veui-content>
<veui-footer style="background: #ccc;">
Footer背景仅为演示
</veui-footer>
</veui-layout>
</veui-layout>
</article>
</veui-layout>
</template>
<script>
@ -113,14 +111,6 @@ export default {
</script>
<style lang="less" scoped>
article {
height: 100%;
& > .veui-layout {
min-width: 720px;
}
}
.veui-layout-header,
.veui-layout-footer,
.veui-layout-content {

82
package-lock.json generated
View File

@ -18,7 +18,7 @@
"@vue/runtime-dom": "^3.2.31",
"babel-eslint": "^10.1.0",
"babel-plugin-lodash": "^3.3.4",
"babel-plugin-veui": "^2.6.3",
"babel-plugin-veui": "^2.6.4",
"cheerio": "^1.0.0-rc.10",
"dls-graphics": "^1.0.0-alpha.3",
"dls-icons-vue": "^0.14.0",
@ -77,10 +77,10 @@
"typescript": "^4.6.2",
"unist-util-remove": "^1.0.1",
"unist-util-visit": "^1.4.0",
"veui": "^2.6.3",
"veui-loader": "^2.6.3",
"veui-theme-dls": "^2.6.3",
"veui-theme-dls-icons": "^2.6.3",
"veui": "^2.6.4",
"veui-loader": "^2.6.4",
"veui-theme-dls": "^2.6.4",
"veui-theme-dls-icons": "^2.6.4",
"vue-awesome": "^4.5.0",
"vue-i18n": "^8.16.0",
"vue-live": "^1.17.2",
@ -5346,9 +5346,9 @@
}
},
"node_modules/babel-plugin-veui": {
"version": "2.6.3",
"resolved": "https://registry.npmjs.org/babel-plugin-veui/-/babel-plugin-veui-2.6.3.tgz",
"integrity": "sha512-PuggdESr8hI011NE7oLCM/htaQSGrDDNWn25jjTHVfFZ1jlq+KcrrEn1qvnwtg87drf/MVftpWnr+1Syv1N01w==",
"version": "2.6.4",
"resolved": "https://registry.npmjs.org/babel-plugin-veui/-/babel-plugin-veui-2.6.4.tgz",
"integrity": "sha512-fARkul+Dz64us9Gso9ABiaVwuXYMjY+lC+hmuUqkDWSlMI1XHk6xmMhWVe2DuPVkeK0IBmKY8eS083v6iDiweA==",
"dev": true,
"peerDependencies": {
"veui": "*"
@ -21891,9 +21891,9 @@
}
},
"node_modules/veui": {
"version": "2.6.3",
"resolved": "https://registry.npmjs.org/veui/-/veui-2.6.3.tgz",
"integrity": "sha512-G5R/EtDIdRKvMZEuBvpcrvBmMCM2emhPPL3hSR2jB2hzXr35m87ZU74Wi1xvyr4PVnF+6RorDv5ORx/XoIkscQ==",
"version": "2.6.4",
"resolved": "https://registry.npmjs.org/veui/-/veui-2.6.4.tgz",
"integrity": "sha512-dz9+EFf3Z34k99iRo6exOWuChJf6C3I3d8QlPjQDKdItEwtBVvTOZ79BPi6gVdYTaxl138pPinUmwezq1sDp8w==",
"dev": true,
"dependencies": {
"bytes": "^3.0.0",
@ -21905,7 +21905,7 @@
"popper.js": "^1.16.0",
"resize-detector": "^0.1.6",
"vue-awesome": "^4.1.0",
"vue-directive-normalizer": "^0.1.0"
"vue-directive-normalizer": "0.1.0"
},
"peerDependencies": {
"@vue/runtime-dom": "^3.2.26",
@ -21918,9 +21918,9 @@
}
},
"node_modules/veui-loader": {
"version": "2.6.3",
"resolved": "https://registry.npmjs.org/veui-loader/-/veui-loader-2.6.3.tgz",
"integrity": "sha512-7GzkDHdLwc31jrEsk/kykd1Q4SrfHpPz3lC0uukmI1k0RTnCgdh9pImEaoTfBazUjqnvw41WSKJFcysy/cstuA==",
"version": "2.6.4",
"resolved": "https://registry.npmjs.org/veui-loader/-/veui-loader-2.6.4.tgz",
"integrity": "sha512-PXU4e9TovKOHptLq79TjRjNtbCLLFF/AuT6CN23dvunNjcSRSK0R8Z5+iqiYTYUYabGii6aFxm7KnC21orsB/A==",
"dev": true,
"dependencies": {
"loader-utils": "^2.0.0",
@ -22044,9 +22044,9 @@
}
},
"node_modules/veui-theme-dls": {
"version": "2.6.3",
"resolved": "https://registry.npmjs.org/veui-theme-dls/-/veui-theme-dls-2.6.3.tgz",
"integrity": "sha512-QqcalDkvr2rl7uU6KiGLStTvbddQZU18XPItZjh2X0ivCCUOPotxmCTJqF73fRriNn3c55BfG7zlnF8d98AK9g==",
"version": "2.6.4",
"resolved": "https://registry.npmjs.org/veui-theme-dls/-/veui-theme-dls-2.6.4.tgz",
"integrity": "sha512-JbxDWpsBciupBtfie+zK1QFKVpqKlUzJksRQ/d+x6+60iMP3pjrPjvdlas8Pft9b1H3Wa3X7sKAujQi8+quGJQ==",
"dev": true,
"dependencies": {
"classlist-polyfill": "^1.2.0",
@ -22054,22 +22054,22 @@
"focus-visible": "^4.1.0",
"less-plugin-dls": "^7.1.0",
"less-plugin-est": "^3.0.0",
"veui-theme-dls-icons": "^2.6.3"
"veui-theme-dls-icons": "2.6.4"
},
"peerDependencies": {
"veui": "2.6.3"
"veui": "2.6.4"
}
},
"node_modules/veui-theme-dls-icons": {
"version": "2.6.3",
"resolved": "https://registry.npmjs.org/veui-theme-dls-icons/-/veui-theme-dls-icons-2.6.3.tgz",
"integrity": "sha512-X+YWDRvEp7al/enPBAGIzY12erC3VxM6usLZVgbb4x2xeT8vfj1nmusDMZ7gFWUD85jg/7yEdJhSOt9aVZEolA==",
"version": "2.6.4",
"resolved": "https://registry.npmjs.org/veui-theme-dls-icons/-/veui-theme-dls-icons-2.6.4.tgz",
"integrity": "sha512-2QXBQQOOQvpz9OgJvWrwTOc5XSsAw3dnVZKUAxuvoGp3DJjL0YuyradeCOFLEoeUsV0zy+lyeatfTwTG3CdHTA==",
"dev": true,
"dependencies": {
"dls-icons-vue": "~2.6.0"
},
"peerDependencies": {
"veui": "2.6.3"
"veui": "2.6.4"
}
},
"node_modules/veui-theme-dls-icons/node_modules/dls-icons-vue": {
@ -27959,9 +27959,9 @@
}
},
"babel-plugin-veui": {
"version": "2.6.3",
"resolved": "https://registry.npmjs.org/babel-plugin-veui/-/babel-plugin-veui-2.6.3.tgz",
"integrity": "sha512-PuggdESr8hI011NE7oLCM/htaQSGrDDNWn25jjTHVfFZ1jlq+KcrrEn1qvnwtg87drf/MVftpWnr+1Syv1N01w==",
"version": "2.6.4",
"resolved": "https://registry.npmjs.org/babel-plugin-veui/-/babel-plugin-veui-2.6.4.tgz",
"integrity": "sha512-fARkul+Dz64us9Gso9ABiaVwuXYMjY+lC+hmuUqkDWSlMI1XHk6xmMhWVe2DuPVkeK0IBmKY8eS083v6iDiweA==",
"dev": true,
"requires": {}
},
@ -41075,9 +41075,9 @@
"dev": true
},
"veui": {
"version": "2.6.3",
"resolved": "https://registry.npmjs.org/veui/-/veui-2.6.3.tgz",
"integrity": "sha512-G5R/EtDIdRKvMZEuBvpcrvBmMCM2emhPPL3hSR2jB2hzXr35m87ZU74Wi1xvyr4PVnF+6RorDv5ORx/XoIkscQ==",
"version": "2.6.4",
"resolved": "https://registry.npmjs.org/veui/-/veui-2.6.4.tgz",
"integrity": "sha512-dz9+EFf3Z34k99iRo6exOWuChJf6C3I3d8QlPjQDKdItEwtBVvTOZ79BPi6gVdYTaxl138pPinUmwezq1sDp8w==",
"dev": true,
"requires": {
"bytes": "^3.0.0",
@ -41089,7 +41089,7 @@
"popper.js": "^1.16.0",
"resize-detector": "^0.1.6",
"vue-awesome": "^4.1.0",
"vue-directive-normalizer": "^0.1.0"
"vue-directive-normalizer": "0.1.0"
},
"dependencies": {
"core-js": {
@ -41101,9 +41101,9 @@
}
},
"veui-loader": {
"version": "2.6.3",
"resolved": "https://registry.npmjs.org/veui-loader/-/veui-loader-2.6.3.tgz",
"integrity": "sha512-7GzkDHdLwc31jrEsk/kykd1Q4SrfHpPz3lC0uukmI1k0RTnCgdh9pImEaoTfBazUjqnvw41WSKJFcysy/cstuA==",
"version": "2.6.4",
"resolved": "https://registry.npmjs.org/veui-loader/-/veui-loader-2.6.4.tgz",
"integrity": "sha512-PXU4e9TovKOHptLq79TjRjNtbCLLFF/AuT6CN23dvunNjcSRSK0R8Z5+iqiYTYUYabGii6aFxm7KnC21orsB/A==",
"dev": true,
"requires": {
"loader-utils": "^2.0.0",
@ -41193,9 +41193,9 @@
}
},
"veui-theme-dls": {
"version": "2.6.3",
"resolved": "https://registry.npmjs.org/veui-theme-dls/-/veui-theme-dls-2.6.3.tgz",
"integrity": "sha512-QqcalDkvr2rl7uU6KiGLStTvbddQZU18XPItZjh2X0ivCCUOPotxmCTJqF73fRriNn3c55BfG7zlnF8d98AK9g==",
"version": "2.6.4",
"resolved": "https://registry.npmjs.org/veui-theme-dls/-/veui-theme-dls-2.6.4.tgz",
"integrity": "sha512-JbxDWpsBciupBtfie+zK1QFKVpqKlUzJksRQ/d+x6+60iMP3pjrPjvdlas8Pft9b1H3Wa3X7sKAujQi8+quGJQ==",
"dev": true,
"requires": {
"classlist-polyfill": "^1.2.0",
@ -41203,7 +41203,7 @@
"focus-visible": "^4.1.0",
"less-plugin-dls": "^7.1.0",
"less-plugin-est": "^3.0.0",
"veui-theme-dls-icons": "^2.6.3"
"veui-theme-dls-icons": "2.6.4"
},
"dependencies": {
"dls-icons-vue": {
@ -41218,9 +41218,9 @@
}
},
"veui-theme-dls-icons": {
"version": "2.6.3",
"resolved": "https://registry.npmjs.org/veui-theme-dls-icons/-/veui-theme-dls-icons-2.6.3.tgz",
"integrity": "sha512-X+YWDRvEp7al/enPBAGIzY12erC3VxM6usLZVgbb4x2xeT8vfj1nmusDMZ7gFWUD85jg/7yEdJhSOt9aVZEolA==",
"version": "2.6.4",
"resolved": "https://registry.npmjs.org/veui-theme-dls-icons/-/veui-theme-dls-icons-2.6.4.tgz",
"integrity": "sha512-2QXBQQOOQvpz9OgJvWrwTOc5XSsAw3dnVZKUAxuvoGp3DJjL0YuyradeCOFLEoeUsV0zy+lyeatfTwTG3CdHTA==",
"dev": true,
"requires": {
"dls-icons-vue": "~2.6.0"

View File

@ -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.3",
"babel-plugin-veui": "^2.6.4",
"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.3",
"veui-loader": "^2.6.3",
"veui-theme-dls": "^2.6.3",
"veui-theme-dls-icons": "^2.6.3",
"veui": "^2.6.4",
"veui-loader": "^2.6.4",
"veui-theme-dls": "^2.6.4",
"veui-theme-dls-icons": "^2.6.4",
"vue-awesome": "^4.5.0",
"vue-i18n": "^8.16.0",
"vue-live": "^1.17.2",