feat: publicize doc implemetation

This commit is contained in:
Justineo
2020-08-13 11:47:56 +08:00
parent 55b9b044f2
commit 1e5fcff6ad
372 changed files with 50636 additions and 0 deletions

View File

@@ -0,0 +1,28 @@
<template>
<article>
<veui-accordion multiple>
<veui-collapse label="Sun">
The Sun is the star at the center of the Solar System. It is a nearly perfect sphere of hot plasma, with internal convective motion that generates a magnetic field via a dynamo process. It is by far the most important source of energy for life on Earth. Its diameter is about 1.39 million kilometers (864,000 miles), or 109 times that of Earth, and its mass is about 330,000 times that of Earth. It accounts for about 99.86% of the total mass of the Solar System. Roughly three quarters of the Sun's mass consists of hydrogen (~73%); the rest is mostly helium (~25%), with much smaller quantities of heavier elements, including oxygen, carbon, neon, and iron.
</veui-collapse>
<veui-collapse label="Moon">
The Moon is an astronomical body orbiting Earth and is the planet's only natural satellite. It is the fifth-largest satellite in the Solar System, and by far the largest among planetary satellites relative to the size of the planet that it orbits. The Moon is, after Jupiter's satellite Io, the second-densest satellite in the Solar System among those whose densities are known.
</veui-collapse>
</veui-accordion>
</article>
</template>
<script>
import { Accordion, Collapse } from 'veui'
export default {
components: {
'veui-accordion': Accordion,
'veui-collapse': Collapse
}
}
</script>
<style lang="stylus" scoped docs>
section
margin-bottom 20px
</style>

View File

@@ -0,0 +1,40 @@
<template>
<article>
<section>
<veui-accordion>
<veui-collapse label="Sun">
The Sun is the star at the center of the Solar System. It is a nearly perfect sphere of hot plasma, with internal convective motion that generates a magnetic field via a dynamo process. It is by far the most important source of energy for life on Earth. Its diameter is about 1.39 million kilometers (864,000 miles), or 109 times that of Earth, and its mass is about 330,000 times that of Earth. It accounts for about 99.86% of the total mass of the Solar System. Roughly three quarters of the Sun's mass consists of hydrogen (~73%); the rest is mostly helium (~25%), with much smaller quantities of heavier elements, including oxygen, carbon, neon, and iron.
</veui-collapse>
<veui-collapse label="Moon">
The Moon is an astronomical body orbiting Earth and is the planet's only natural satellite. It is the fifth-largest satellite in the Solar System, and by far the largest among planetary satellites relative to the size of the planet that it orbits. The Moon is, after Jupiter's satellite Io, the second-densest satellite in the Solar System among those whose densities are known.
</veui-collapse>
</veui-accordion>
</section>
<section>
<veui-accordion ui="s">
<veui-collapse label="Sun">
The Sun is the star at the center of the Solar System. It is a nearly perfect sphere of hot plasma, with internal convective motion that generates a magnetic field via a dynamo process. It is by far the most important source of energy for life on Earth. Its diameter is about 1.39 million kilometers (864,000 miles), or 109 times that of Earth, and its mass is about 330,000 times that of Earth. It accounts for about 99.86% of the total mass of the Solar System. Roughly three quarters of the Sun's mass consists of hydrogen (~73%); the rest is mostly helium (~25%), with much smaller quantities of heavier elements, including oxygen, carbon, neon, and iron.
</veui-collapse>
<veui-collapse label="Moon">
The Moon is an astronomical body orbiting Earth and is the planet's only natural satellite. It is the fifth-largest satellite in the Solar System, and by far the largest among planetary satellites relative to the size of the planet that it orbits. The Moon is, after Jupiter's satellite Io, the second-densest satellite in the Solar System among those whose densities are known.
</veui-collapse>
</veui-accordion>
</section>
</article>
</template>
<script>
import { Accordion, Collapse } from 'veui'
export default {
components: {
'veui-accordion': Accordion,
'veui-collapse': Collapse
}
}
</script>
<style lang="stylus" scoped docs>
section
margin-bottom 20px
</style>

View File

@@ -0,0 +1,65 @@
<template>
<article>
<veui-button @click="open1 = true">
title prop
</veui-button>
<veui-button @click="open2 = true">
title slot
</veui-button>
<veui-alert-box
type="success"
:open.sync="open1"
title="Success"
@ok="ok"
>
<p>Saved successfully!</p>
</veui-alert-box>
<veui-alert-box
type="success"
:open.sync="open2"
@ok="ok"
>
<template #title>
Success
<veui-icon name="info-circle"/>
</template>
<p>Saved successfully!</p>
</veui-alert-box>
</article>
</template>
<script>
import { AlertBox, Button, Icon } from 'veui'
import 'veui-theme-dls-icons/info-circle'
import toast from 'veui/managers/toast'
export default {
components: {
'veui-alert-box': AlertBox,
'veui-button': Button,
'veui-icon': Icon
},
data () {
return {
open1: false,
open2: false
}
},
methods: {
ok () {
toast.info('Confirmed')
}
}
}
</script>
<style lang="less" scoped docs>
.veui-button {
margin-right: 10px;
}
.icon {
vertical-align: -2px;
}
</style>

View File

@@ -0,0 +1,67 @@
<template>
<article>
<veui-button @click="successOpen = true">
Success
</veui-button>
<veui-button @click="errorOpen = true">
Error
</veui-button>
<veui-button @click="infoOpen = true">
Info
</veui-button>
<veui-alert-box
type="success"
:open.sync="successOpen"
>
<template #title>
Success
</template>
<div>Saved successfully!</div>
</veui-alert-box>
<veui-alert-box
type="error"
:open.sync="errorOpen"
>
<template #title>
Error
</template>
<div>Not enough disk space!</div>
</veui-alert-box>
<veui-alert-box
type="info"
:open.sync="infoOpen"
>
<template #title>
Sytstem
</template>
<div>The total available storage is 5MB.</div>
</veui-alert-box>
</article>
</template>
<script>
import { AlertBox, Button } from 'veui'
export default {
components: {
'veui-alert-box': AlertBox,
'veui-button': Button
},
data () {
return {
successOpen: false,
errorOpen: false,
infoOpen: false
}
}
}
</script>
<style lang="less" scoped docs>
.veui-button {
margin-right: 10px;
}
</style>

View File

@@ -0,0 +1,46 @@
<template>
<article>
<veui-alert
type="info"
close-label="Got it"
closable
:open.sync="open"
:message="messages"
/>
<section v-if="!open">
<veui-button @click="open = true">
Open
</veui-button>
</section>
</article>
</template>
<script>
import { Alert, Button } from 'veui'
export default {
components: {
'veui-alert': Alert,
'veui-button': Button
},
data () {
return {
open: true,
messages: [
'Component data must be a function.',
'Prop definitions should be as detailed as possible.',
'Always use key with v-for.',
'Never use v-if on the same element as v-for.'
]
}
}
}
</script>
<docs>
可以指定 `closable` 属性为 `true` 来允许提示被用户主动关闭还可以通过指定 `close-label` 属性来将关闭按钮以文字形式展现
</docs>
<docs locale="en-US">
Set the `closable` prop to `true` to allow the alert message to be closed by users. You can also use the `close-label` prop to make the close button shown as specified text.
</docs>

View File

@@ -0,0 +1,41 @@
<template>
<article>
<veui-alert type="success">
Your profile has been updated.
</veui-alert>
<veui-alert type="info">
Press any key to continue...
</veui-alert>
<veui-alert type="warning">
<code>scope</code> is deprecated. Use <code>slot-scope</code> instead.
</veui-alert>
<veui-alert
type="error"
message="Uncaught SyntaxError: Unexpected token +"
/>
</article>
</template>
<script>
import { Alert } from 'veui'
export default {
components: {
'veui-alert': Alert
}
}
</script>
<style lang="less" scoped docs>
.veui-alert {
margin-bottom: 20px;
}
</style>
<docs>
可将消息内容写在默认插槽中也可以通过 `message` 属性进行指定
</docs>
<docs locale="en-US">
Messages can either be specified in the default slot, or via the `message` prop.
</docs>

View File

@@ -0,0 +1,135 @@
<template>
<article class="anchor-offset-demo">
<div class="target-offset-line"/>
<div class="sticky-offset-line"/>
<div
ref="container"
class="anchor-wrapper"
>
<div
v-for="i in coffees"
:id="i.value.indexOf('#') >= 0 ? i.value.slice(1) : i.value"
:key="i.value"
class="block"
>
{{ i.label }}
</div>
<section class="anchor-two">
<h3>吸附锚点</h3>
<veui-anchor
:items="coffees"
target-offset="20px"
sticky-offset="30px"
container="container"
/>
</section>
</div>
</article>
</template>
<script>
import { Anchor } from 'veui'
export default {
components: {
'veui-anchor': Anchor
},
data () {
return {
coffees: [
{
label: 'Infused',
value: '#infused2',
children: [
{
label: 'Breadcrumb',
value: '/components/breadcrumb'
}
]
},
{
label: 'Boiled',
value: '#boiled2',
children: [
{
label: 'Button',
value: '/components/button'
}
]
},
{
label: 'Espresso',
value: '#espresso2'
},
{
label: 'Milk coffee',
value: '#milk-coffee2'
}
]
}
}
}
</script>
<style lang="less" scoped docs>
.anchor-offset-demo {
position: relative;
.sticky-offset-line,
.target-offset-line {
position: absolute;
top: 20px;
width: 180px;
border-top: 1px solid red;;
&::after {
content: "targetOffset: 20px";
position: absolute;
right: 0;
bottom: 0;
color: red;
font-size: 12px;
}
}
.sticky-offset-line {
top: 30px;
left: 250px;
&::after {
content: "stickyOffset: 30px";
}
}
.anchor-wrapper {
position: relative;
display: flex;
flex-direction: column;
height: 300px;
overflow: auto;
border: 1px dashed;
& > section {
position: absolute;
}
}
.block {
white-space: nowrap;
border-top: 1px solid #ccc;
width: 100px;
height: 150px;
flex: none;
& + .block {
margin-top: 20px;
}
}
.anchor-two {
position: absolute;
left: 250px;
top: 50px;
}
}
</style>
<docs>
虚线框标记容器
</docs>

View File

@@ -0,0 +1,138 @@
<template>
<article class="anchor-demo">
<div class="line"/>
<div
ref="container"
class="anchor-wrapper"
>
<div
v-for="i in coffees"
:id="i.value.indexOf('#') >= 0 ? i.value.slice(1) : i.value"
:key="i.value"
class="block"
>
{{ i.label }}
</div>
<section class="anchor-one">
<h3>普通锚点</h3>
<veui-anchor
:items="coffees"
:sticky="false"
container="container"
/>
</section>
<section class="anchor-two">
<h3>吸附锚点</h3>
<veui-anchor
:items="coffees"
container="container"
/>
</section>
</div>
</article>
</template>
<script>
import { Anchor } from 'veui'
export default {
components: {
'veui-anchor': Anchor
},
data () {
return {
coffees: [
{
label: 'Infused',
value: '#infused',
children: [
{
label: 'Breadcrumb',
value: '/components/breadcrumb'
}
]
},
{
label: 'Boiled',
value: '#boiled',
children: [
{
label: 'Button',
value: '/components/button'
}
]
},
{
label: 'Espresso',
value: '#espresso'
},
{
label: 'Milk coffee',
value: '#milk-coffee'
}
]
}
}
}
</script>
<style lang="less" scoped docs>
.anchor-demo {
position: relative;
.line {
position: absolute;
top: 0;
width: 180px;
border-top: 1px solid red;;
&::after {
content: "0";
position: absolute;
right: 0;
bottom: 0;
color: red;
font-size: 12px;
}
}
.anchor-wrapper {
position: relative;
display: flex;
flex-direction: column;
height: 300px;
overflow: auto;
border: 1px dashed;
& > section {
position: absolute;
}
}
.block {
white-space: nowrap;
border-top: 1px solid #ccc;
width: 100px;
height: 150px;
flex: none;
& + .block {
margin-top: 20px;
}
}
.anchor-one {
position: absolute;
left: 250px;
top: 50px;
}
.anchor-two {
position: absolute;
left: 450px;
top: 50px;
}
}
</style>
<docs>
虚线框标记容器
</docs>

View File

@@ -0,0 +1,113 @@
<template>
<article class="autocomplete-normal-demo">
<section>
<h3>suggest on input</h3>
<veui-autocomplete
:datasource="suggestions"
placeholder="请输入"
clearable
/>
</section>
<section>
<h3>suggest on focus</h3>
<veui-autocomplete
:datasource="coffees"
placeholder="请输入"
suggest-trigger="focus"
/>
</section>
</article>
</template>
<script>
import { Autocomplete } from 'veui'
export default {
components: {
'veui-autocomplete': Autocomplete
},
data () {
return {
suggestions: [
{
value: 'Moka'
},
{
value: 'Turkish'
},
{
value: 'latte'
},
{
value: 'cappuccino'
}
],
coffees: [
{
label: 'Infused',
value: 'infused',
options: [
{
label: 'French press',
value: 'french-press'
},
{
label: 'Cold brew',
value: 'cold-brew'
}
]
},
{
label: 'Espresso',
value: 'espresso',
options: [
{
label: 'Espresso Romano',
value: 'espresso-romano'
},
{
label: 'Guillermo',
value: 'guillermo'
},
{
label: 'Ristretto',
value: 'ristretto'
}
]
},
{
label: 'Milk coffee',
value: 'milk-coffee',
options: [
{
label: 'Latte',
value: 'latte'
},
{
label: 'Macchiato',
value: 'macchiato'
},
{
label: 'Cappuccino',
value: 'cappuccino'
},
{
label: 'White coffee',
value: 'white-coffee'
}
]
}
]
}
}
}
</script>
<style lang="less" scoped>
.autocomplete-normal-demo {
display: flex;
section + section {
margin-left: 60px;
}
}
</style>

View File

@@ -0,0 +1,45 @@
<template>
<article>
<section>
<veui-badge
value="Running"
type="success"
/>
<veui-badge
value="New"
type="info"
/>
<veui-badge value="Rejected"/>
<veui-badge
value="Auditing"
type="warning"
/>
<veui-badge
value="Expired"
type="aux"
/>
</section>
</article>
</template>
<script>
import { Badge } from 'veui'
export default {
components: {
'veui-badge': Badge
}
}
</script>
<style lang="less" scoped docs>
section {
margin-bottom: 1em;
}
.veui-badge {
& + & {
margin-left: 30px;
}
}
</style>

View File

@@ -0,0 +1,61 @@
<template>
<article>
<veui-badge
:value="count"
:max="100"
>
<veui-button
ui="primary"
@click="inc"
>
Add
</veui-button>
</veui-badge>
<veui-button
ui="s"
@click="reset"
>
Reset
</veui-button>
</article>
</template>
<script>
import { Badge, Button } from 'veui'
const initial = 96
export default {
components: {
'veui-badge': Badge,
'veui-button': Button
},
data () {
return {
count: initial
}
},
methods: {
inc () {
this.count++
},
reset () {
this.count = initial
}
}
}
</script>
<style lang="less" scoped docs>
.veui-badge {
margin-right: 2em;
}
</style>
<docs>
可以使用 `max` 属性指定可现实数字的最大值超过则显示为<var>max</var>+
</docs>
<docs locale="en-US">
Use the `max` prop to specify the max value can be displayed. Displays <var>max</var>+ when value is larger than `max`.
</docs>

View File

@@ -0,0 +1,58 @@
<template>
<article>
<veui-badge
value="New"
type="success"
>
<veui-button>View</veui-button>
</veui-badge>
<veui-badge
value="New"
type="info"
>
<veui-button>View</veui-button>
</veui-badge>
<veui-badge value="New">
<veui-button>View</veui-button>
</veui-badge>
<veui-badge
value="New"
type="warning"
>
<veui-button>View</veui-button>
</veui-badge>
<veui-badge
value="New"
type="aux"
>
<veui-button>View</veui-button>
</veui-badge>
</article>
</template>
<script>
import { Badge, Button } from 'veui'
export default {
components: {
'veui-badge': Badge,
'veui-button': Button
}
}
</script>
<style lang="less" scoped docs>
.veui-badge {
& + & {
margin-left: 2em;
}
}
</style>
<docs>
可以使用 `type` 属性指定徽标在不同功能状态下的样式
</docs>
<docs locale="en-US">
Use the `type` prop to apply different contextual styles.
</docs>

View File

@@ -0,0 +1,26 @@
<template>
<article>
<veui-breadcrumb>
<veui-breadcrumb-item to="./breadcrumb">
Home
</veui-breadcrumb-item>
<veui-breadcrumb-item to="./breadcrumb">
Components
</veui-breadcrumb-item>
<veui-breadcrumb-item type="text">
Breadcrumb
</veui-breadcrumb-item>
</veui-breadcrumb>
</article>
</template>
<script>
import { Breadcrumb, BreadcrumbItem } from 'veui'
export default {
components: {
'veui-breadcrumb': Breadcrumb,
'veui-breadcrumb-item': BreadcrumbItem
}
}
</script>

View File

@@ -0,0 +1,32 @@
<template>
<article>
<veui-breadcrumb :routes="routes"/>
</article>
</template>
<script>
import { Breadcrumb } from 'veui'
export default {
components: {
'veui-breadcrumb': Breadcrumb
},
data () {
return {
routes: [
{
to: './breadcrumb',
label: 'Home'
},
{
to: './breadcrumb',
label: 'Components'
},
{
label: 'Breadcrumb'
}
]
}
}
}
</script>

View File

@@ -0,0 +1,55 @@
<template>
<article>
<veui-breadcrumb
:routes="routes"
@redirect="handleRedirect"
/>
<div class="console">
<template v-if="currentRoute">
Redirected to <b>{{ currentRoute.label }}</b>.
</template>
<template v-else>
Not redirected yet.
</template>
</div>
</article>
</template>
<script>
import { Breadcrumb } from 'veui'
export default {
components: {
'veui-breadcrumb': Breadcrumb
},
data () {
return {
currentRoute: null,
routes: [
{
label: 'Home',
type: 'link'
},
{
label: 'Components',
type: 'link'
},
{
label: 'Breadcrumb'
}
]
}
},
methods: {
handleRedirect (event, route) {
this.currentRoute = route
}
}
}
</script>
<style lang="less" scoped docs>
.veui-breadcrumb:first-child {
margin-bottom: 20px;
}
</style>

View File

@@ -0,0 +1,49 @@
<template>
<article>
<veui-breadcrumb :routes="routes">
<template #separator>
-
</template>
</veui-breadcrumb>
<veui-breadcrumb :routes="routes">
<template #separator>
<veui-icon name="arrow-right"/>
</template>
</veui-breadcrumb>
</article>
</template>
<script>
import { Breadcrumb, Icon } from 'veui'
import 'veui-theme-dls-icons/arrow-right'
export default {
components: {
'veui-breadcrumb': Breadcrumb,
'veui-icon': Icon
},
data () {
return {
routes: [
{
to: './breadcrumb',
label: 'Home'
},
{
to: './breadcrumb',
label: 'Components'
},
{
label: 'Breadcrumb'
}
]
}
}
}
</script>
<style lang="less" scoped docs>
.veui-breadcrumb:first-child {
margin-bottom: 20px;
}
</style>

View File

@@ -0,0 +1,47 @@
<template>
<article>
<section>
<veui-breadcrumb ui="m">
<veui-breadcrumb-item to="./breadcrumb">
Home
</veui-breadcrumb-item>
<veui-breadcrumb-item to="./breadcrumb">
Components
</veui-breadcrumb-item>
<veui-breadcrumb-item type="text">
Breadcrumb
</veui-breadcrumb-item>
</veui-breadcrumb>
</section>
<section>
<veui-breadcrumb ui="s">
<veui-breadcrumb-item to="./breadcrumb">
Home
</veui-breadcrumb-item>
<veui-breadcrumb-item to="./breadcrumb">
Components
</veui-breadcrumb-item>
<veui-breadcrumb-item type="text">
Breadcrumb
</veui-breadcrumb-item>
</veui-breadcrumb>
</section>
</article>
</template>
<script>
import { Breadcrumb, BreadcrumbItem } from 'veui'
export default {
components: {
'veui-breadcrumb': Breadcrumb,
'veui-breadcrumb-item': BreadcrumbItem
}
}
</script>
<style lang="less" scoped docs>
section {
margin-bottom: 1em;
}
</style>

View File

@@ -0,0 +1,47 @@
<template>
<article>
<section>
<veui-breadcrumb>
<veui-breadcrumb-item to="./breadcrumb">
Home
</veui-breadcrumb-item>
<veui-breadcrumb-item to="./breadcrumb">
Components
</veui-breadcrumb-item>
<veui-breadcrumb-item type="text">
Breadcrumb
</veui-breadcrumb-item>
</veui-breadcrumb>
</section>
<section>
<veui-breadcrumb ui="strong">
<veui-breadcrumb-item to="./breadcrumb">
Home
</veui-breadcrumb-item>
<veui-breadcrumb-item to="./breadcrumb">
Components
</veui-breadcrumb-item>
<veui-breadcrumb-item type="text">
Breadcrumb
</veui-breadcrumb-item>
</veui-breadcrumb>
</section>
</article>
</template>
<script>
import { Breadcrumb, BreadcrumbItem } from 'veui'
export default {
components: {
'veui-breadcrumb': Breadcrumb,
'veui-breadcrumb-item': BreadcrumbItem
}
}
</script>
<style lang="less" scoped docs>
section {
margin-bottom: 1em;
}
</style>

View File

@@ -0,0 +1,76 @@
<template>
<article>
<section>
<veui-checkbox v-model="disabled">
Disabled
</veui-checkbox>
</section>
<section>
<veui-button-group
ui="primary"
:disabled="disabled"
>
<veui-button :disabled="disabled">
Undo
</veui-button>
<veui-button :disabled="disabled">
Redo
</veui-button>
</veui-button-group>
</section>
<section>
<veui-button-group
:items="group"
:disabled="disabled"
/>
</section>
<section>
<veui-button-group
ui="strong"
:items="group"
:disabled="disabled"
/>
</section>
</article>
</template>
<script>
import { Button, ButtonGroup, Checkbox } from 'veui'
export default {
components: {
'veui-button': Button,
'veui-button-group': ButtonGroup,
'veui-checkbox': Checkbox
},
data () {
return {
disabled: true,
group: [
{
label: 'Undo',
value: 'undo'
},
{
label: 'Redo',
value: 'redo'
}
]
}
}
}
</script>
<style lang="less" scoped docs>
section {
margin-bottom: 1em;
}
</style>
<docs>
`ButtonGroup` `disabled` 属性仅在使用 `items` 指定内容时生效如果使用内联的 `Button` 组件则需要为每个按钮分别指定 `disabled` 属性
</docs>
<docs locale="en-US">
When given a string `value` property on an item, clicking the corresponding button will emit an event with the same name on `ButtonGroup`.
</docs>

View File

@@ -0,0 +1,43 @@
<template>
<article>
<veui-button-group :items="group"/>
</article>
</template>
<script>
import { ButtonGroup } from 'veui'
export default {
components: {
'veui-button-group': ButtonGroup
},
data () {
return {
group: [
{
label: 'Undo',
value: 'undo'
},
{
label: 'Redo',
value: 'redo'
}
]
}
}
}
</script>
<style lang="less" scoped docs>
.veui-button-group {
margin-right: 1em;
}
</style>
<docs>
当每个数据项的 `value` 字段是字符串时点击按钮将在 `ButtonGroup` 组件上触发 `value` 同名的事件
</docs>
<docs locale="en-US">
When given a string `value` property on an item, clicking the corresponding button will emit an event with the same name on `ButtonGroup`.
</docs>

View File

@@ -0,0 +1,41 @@
<template>
<article>
<veui-button-group ui="xl">
<veui-button>Undo</veui-button>
<veui-button>Redo</veui-button>
</veui-button-group>
<veui-button-group ui="l">
<veui-button>Undo</veui-button>
<veui-button>Redo</veui-button>
</veui-button-group>
<veui-button-group ui="m">
<veui-button>Undo</veui-button>
<veui-button>Redo</veui-button>
</veui-button-group>
<veui-button-group ui="s">
<veui-button>Undo</veui-button>
<veui-button>Redo</veui-button>
</veui-button-group>
<veui-button-group ui="xs">
<veui-button>Undo</veui-button>
<veui-button>Redo</veui-button>
</veui-button-group>
</article>
</template>
<script>
import { Button, ButtonGroup } from 'veui'
export default {
components: {
'veui-button': Button,
'veui-button-group': ButtonGroup
}
}
</script>
<style lang="less" scoped docs>
.veui-button-group {
margin-right: 1em;
}
</style>

View File

@@ -0,0 +1,43 @@
<template>
<article>
<section>
<veui-button-group ui="primary">
<veui-button>Undo</veui-button>
<veui-button>Redo</veui-button>
</veui-button-group>
</section>
<section>
<veui-button-group>
<veui-button>Undo</veui-button>
<veui-button>Redo</veui-button>
</veui-button-group>
</section>
<section>
<veui-button-group ui="strong">
<veui-button>Undo</veui-button>
<veui-button>Redo</veui-button>
</veui-button-group>
</section>
</article>
</template>
<script>
import { Button, ButtonGroup } from 'veui'
export default {
components: {
'veui-button': Button,
'veui-button-group': ButtonGroup
}
}
</script>
<style lang="less" scoped docs>
section {
margin-bottom: 1em;
}
.veui-button-group {
margin-right: 1em;
}
</style>

View File

@@ -0,0 +1,58 @@
<template>
<article>
<section>
<veui-checkbox v-model="disabled">
Disabled
</veui-checkbox>
</section>
<section>
<veui-button
:disabled="disabled"
ui="primary"
>
Primary
</veui-button>
<veui-button :disabled="disabled">
Normal
</veui-button>
<veui-button
:disabled="disabled"
ui="alt"
>
Alternate
</veui-button>
<veui-button
:disabled="disabled"
ui="link"
>
Link
</veui-button>
</section>
</article>
</template>
<script>
import { Button, Checkbox } from 'veui'
export default {
components: {
'veui-button': Button,
'veui-checkbox': Checkbox
},
data () {
return {
disabled: true
}
}
}
</script>
<style lang="less" scoped docs>
section {
margin-bottom: 1em;
}
.veui-button {
margin-right: 1em;
}
</style>

View File

@@ -0,0 +1,66 @@
<template>
<article>
<section>
<veui-checkbox v-model="loading">
Loading
</veui-checkbox>
</section>
<section>
<veui-button
:loading="loading"
ui="primary"
>
Primary
</veui-button>
<veui-button :loading="loading">
Normal
</veui-button>
<veui-button
:loading="loading"
ui="strong"
>
Strong
</veui-button>
<veui-button
:loading="loading"
ui="text"
>
Text
</veui-button>
<veui-button
:loading="loading"
ui="icon"
>
<veui-icon name="home"/>
</veui-button>
</section>
</article>
</template>
<script>
import { Button, Checkbox, Icon } from 'veui'
import 'veui-theme-dls-icons/home'
export default {
components: {
'veui-button': Button,
'veui-checkbox': Checkbox,
'veui-icon': Icon
},
data () {
return {
loading: true
}
}
}
</script>
<style lang="less" scoped docs>
section {
margin-bottom: 1em;
}
.veui-button {
margin-right: 1em;
}
</style>

View File

@@ -0,0 +1,35 @@
<template>
<article>
<veui-button ui="xl">
xl
</veui-button>
<veui-button ui="l">
l
</veui-button>
<veui-button ui="m">
m
</veui-button>
<veui-button ui="s">
s
</veui-button>
<veui-button ui="xs">
xs
</veui-button>
</article>
</template>
<script>
import { Button } from 'veui'
export default {
components: {
'veui-button': Button
}
}
</script>
<style lang="less" scoped docs>
.veui-button {
margin-right: 1em;
}
</style>

View File

@@ -0,0 +1,57 @@
<template>
<article>
<section>
<veui-button ui="primary">
Primary
</veui-button>
<veui-button>Normal</veui-button>
<veui-button ui="basic">
Basic
</veui-button>
<veui-button ui="strong">
Strong
</veui-button>
<veui-button ui="translucent">
Translucent
</veui-button>
</section>
<section>
<veui-button ui="text">
Text
</veui-button>
<veui-button ui="icon">
<veui-icon name="home"/>
</veui-button>
<veui-button ui="icon strong">
<veui-icon name="home"/>
</veui-button>
<veui-button ui="icon aux">
<veui-icon name="home"/>
</veui-button>
<veui-button ui="primary square">
<veui-icon name="home"/>
</veui-button>
</section>
</article>
</template>
<script>
import { Button, Icon } from 'veui'
export default {
components: {
'veui-button': Button,
'veui-icon': Icon
}
}
</script>
<style lang="less" scoped docs>
.veui-button {
margin-right: 1em;
}
section {
margin-top: 20px;
}
</style>

View File

@@ -0,0 +1,39 @@
<template>
<article>
<veui-calendar v-model="date"/>
<p>Selected: {{ readableDate }}</p>
</article>
</template>
<script>
import { Calendar } from 'veui'
export default {
components: {
'veui-calendar': Calendar
},
data () {
return {
date: new Date()
}
},
computed: {
readableDate () {
return this.date.toLocaleDateString(this.$i18n.locale, {
weekday: 'long',
year: 'numeric',
month: 'long',
day: 'numeric'
})
}
}
}
</script>
<docs>
支持 `v-model`数据类型为原生 `Date` 类型
</docs>
<docs locale="en-US">
Supports `v-model` with value type being the native `Date`.
</docs>

View File

@@ -0,0 +1,49 @@
<template>
<article>
<veui-calendar
v-model="ranges"
range
multiple
:panel="2"
/>
<section>Selected: {{ readableRanges }}</section>
</article>
</template>
<script>
import { Calendar } from 'veui'
export default {
components: {
'veui-calendar': Calendar
},
data () {
return {
ranges: null
}
},
computed: {
readableRanges () {
if (!this.ranges || this.ranges.length === 0) {
return 'Nothing.'
}
return this.ranges
.map(range => this.toReadable(range).join(' to '))
.join(', ')
}
},
methods: {
toReadable (dates) {
return dates.map(date => date.toLocaleDateString(this.$i18n.locale))
}
}
}
</script>
<docs>
支持 `v-model`选择多日期范围时数据类型为 `Array<[Date, Date]>`
</docs>
<docs locale="en-US">
Supports `v-model`, with value type being `Array<[Date, Date]>` when selecting multiple date ranges.
</docs>

View File

@@ -0,0 +1,79 @@
<template>
<article>
<section class="col">
<h4>Multiple dates</h4>
<veui-calendar
v-model="dates"
multiple
/>
<section>Selected: {{ readableDates }}</section>
</section>
<section class="col">
<h4>Date ranges</h4>
<veui-calendar
v-model="range"
range
/>
<section>Selected: {{ readableRange }}</section>
</section>
</article>
</template>
<script>
import { Calendar } from 'veui'
export default {
components: {
'veui-calendar': Calendar
},
data () {
return {
dates: null,
range: null
}
},
computed: {
readableDates () {
if (!this.dates || !this.dates.length) {
return 'Nothing.'
}
return this.toReadable(this.dates).join(', ')
},
readableRange () {
if (!this.range) {
return 'Nothing.'
}
return this.toReadable(this.range).join(' to ')
}
},
methods: {
toReadable (dates) {
return dates.map(date => date.toLocaleDateString(this.$i18n.locale))
}
}
}
</script>
<style lang="less" scoped docs>
article {
overflow: hidden;
}
.col {
float: left;
width: 340px;
margin-right: 20px;
}
h4 {
margin-top: 0;
}
</style>
<docs>
支持 `v-model`选择多个单日时数据类型为 `Array<Date>`选择日期范围时数据类型为 `[Date, Date]`
</docs>
<docs locale="en-US">
Supports `v-model`, with value type being `Array<Date>` when selecting multiple dates, being `[Date, Date]` when selecting a date range.
</docs>

View File

@@ -0,0 +1,54 @@
<template>
<article>
<veui-carousel
:datasource="items"
autoplay
pause-on-hover
:interval="5000"
/>
</article>
</template>
<script>
import { Carousel } from 'veui'
export default {
components: {
'veui-carousel': Carousel
},
data () {
return {
items: [
{
src:
'https://ecmb.bdimg.com/public01/one-design/2b77cc4a4c5c906993c0e512f3ddaf03.jpg',
alt: 'A cute kitty looking at you with its greenish eyes.',
label: 'Cat'
},
{
src:
'https://ecmb.bdimg.com/public01/one-design/6fedc62b9221846ce5114c7447622e47.jpeg',
alt: 'A common kingfisher flying above river.',
label: 'Kingfisher'
},
{
src:
'https://ecmb.bdimg.com/public01/one-design/e1b6473c898d9e456452ee79d7533a86.jpeg',
alt: 'A white and gray dolphin in blue water.',
label: 'Dolphin'
}
],
autoplay: true,
pauseOnHover: true
}
}
}
</script>
<docs>
还可以使用 `interval` 属性来指定自动播放的切换间隔时长使用 `wrap` 属性来允许循环播放以及使用 `pause-on-hover` 属性来时光标悬浮在指示器对应项时暂停自动播放
</docs>
<docs locale="en-US">
You can also use the `autoplay` prop to enable autoplay, use the `wrap` prop to enable looping and use the `pause-on-hover` prop to pause playing when cursor hover step indicators.
</docs>

View File

@@ -0,0 +1,68 @@
<template>
<article>
<section>
<h4>Indicator type</h4>
<veui-radio-group
v-model="indicator"
:items="indicators"
/>
</section>
<section>
<veui-carousel
:datasource="items"
:indicator="indicator"
/>
</section>
</article>
</template>
<script>
import { Carousel, RadioGroup } from 'veui'
export default {
components: {
'veui-carousel': Carousel,
'veui-radio-group': RadioGroup
},
data () {
return {
items: [
{
src:
'https://ecmb.bdimg.com/public01/one-design/2b77cc4a4c5c906993c0e512f3ddaf03.jpg',
alt: 'A cute kitty looking at you with its greenish eyes.',
label: 'Cat'
},
{
src:
'https://ecmb.bdimg.com/public01/one-design/6fedc62b9221846ce5114c7447622e47.jpeg',
alt: 'A common kingfisher flying above river.',
label: 'Kingfisher'
},
{
src:
'https://ecmb.bdimg.com/public01/one-design/e1b6473c898d9e456452ee79d7533a86.jpeg',
alt: 'A white and gray dolphin in blue water.',
label: 'Dolphin'
}
],
indicator: 'radio',
indicators: [
{ label: 'Radio', value: 'radio' },
{ label: 'Number', value: 'number' },
{ label: 'None', value: 'none' }
]
}
}
}
</script>
<style lang="less" scoped docs>
h4 {
margin: 0 0 10px;
}
section {
margin-bottom: 10px;
}
</style>

View File

@@ -0,0 +1,64 @@
<template>
<article>
<section>
<h4>Index</h4>
<veui-number-input
v-model="index"
:min="0"
:max="items.length - 1"
/>
</section>
<section>
<veui-carousel
:datasource="items"
:index.sync="index"
/>
</section>
</article>
</template>
<script>
import { Carousel, NumberInput } from 'veui'
export default {
components: {
'veui-carousel': Carousel,
'veui-number-input': NumberInput
},
data () {
return {
items: [
{
src:
'https://ecmb.bdimg.com/public01/one-design/2b77cc4a4c5c906993c0e512f3ddaf03.jpg',
alt: 'A cute kitty looking at you with its greenish eyes.',
label: 'Cat'
},
{
src:
'https://ecmb.bdimg.com/public01/one-design/6fedc62b9221846ce5114c7447622e47.jpeg',
alt: 'A common kingfisher flying above river.',
label: 'Kingfisher'
},
{
src:
'https://ecmb.bdimg.com/public01/one-design/e1b6473c898d9e456452ee79d7533a86.jpeg',
alt: 'A white and gray dolphin in blue water.',
label: 'Dolphin'
}
],
index: 0
}
}
}
</script>
<style lang="less" scoped docs>
h4 {
margin: 0 0 10px;
}
section {
margin-bottom: 10px;
}
</style>

View File

@@ -0,0 +1,65 @@
<template>
<article>
<section>
<h4>Normal size</h4>
<veui-check-button-group
v-model="selected"
:items="licenses"
/>
<p>Checked: {{ readable }}</p>
</section>
<section>
<h4>Small size</h4>
<veui-check-button-group
v-model="selected"
ui="small"
:items="licenses"
/>
<p>Checked: {{ readable }}</p>
</section>
</article>
</template>
<script>
import { CheckButtonGroup } from 'veui'
export default {
components: {
'veui-check-button-group': CheckButtonGroup
},
data () {
return {
selected: null,
licenses: [
{
label: 'MIT License',
value: 'mit'
},
{
label: 'BSD License',
value: 'bsd'
},
{
label: 'Apache License 2.0',
value: 'apache2'
}
]
}
},
computed: {
readable () {
return (this.selected || []).join(', ') || '-'
}
}
}
</script>
<style lang="less" scoped docs>
section {
margin-bottom: 20px;
}
h4 {
margin-top: 0;
}
</style>

View File

@@ -0,0 +1,65 @@
<template>
<article>
<section>
<h4>Normal size</h4>
<veui-checkbox-group
v-model="selected"
:items="licenses"
/>
<p>Checked: {{ readable }}</p>
</section>
<section>
<h4>Small size</h4>
<veui-checkbox-group
v-model="selected"
ui="s"
:items="licenses"
/>
<p>Checked: {{ readable }}</p>
</section>
</article>
</template>
<script>
import { CheckboxGroup } from 'veui'
export default {
components: {
'veui-checkbox-group': CheckboxGroup
},
data () {
return {
selected: null,
licenses: [
{
label: 'MIT License',
value: 'mit'
},
{
label: 'BSD License',
value: 'bsd'
},
{
label: 'Apache License 2.0',
value: 'apache2'
}
]
}
},
computed: {
readable () {
return (this.selected || []).join(', ') || '-'
}
}
}
</script>
<style lang="less" scoped docs>
section {
margin-bottom: 20px;
}
h4 {
margin-top: 0;
}
</style>

View File

@@ -0,0 +1,63 @@
<template>
<article>
<section>
<veui-checkbox
v-model="checked"
:ui="size"
:indeterminate.sync="indeterminate"
>
Checked: {{ checked }}
</veui-checkbox>
</section>
<section>
<veui-checkbox
v-model="small"
ui="s"
>
Small
</veui-checkbox>
<veui-checkbox
v-model="indeterminate"
ui="s"
>
Indeterminate
</veui-checkbox>
</section>
</article>
</template>
<script>
import { Checkbox } from 'veui'
export default {
components: {
'veui-checkbox': Checkbox
},
data () {
return {
checked: false,
indeterminate: false,
small: false
}
},
computed: {
size () {
return this.small ? 's' : ''
}
}
}
</script>
<style lang="stylus" scoped docs>
.veui-checkbox
& + &
margin-left 20px
</style>
<docs>
可以使用 `indeterminate` 属性来设置半选状态
</docs>
<docs locale="en-US">
Use the `indeterminate` prop to put the checkbox in indeterminate state.
</docs>

View File

@@ -0,0 +1,33 @@
<template>
<article>
<veui-checkbox
v-model="status"
true-value="CONFIRMED"
false-value="UNCONFIRMED"
>
I've read the agreement
</veui-checkbox>
<p>State: {{ statusMap[status] }}</p>
</article>
</template>
<script>
import { Checkbox } from 'veui'
const STATUS_MAP = {
CONFIRMED: 'Confirmed',
UNCONFIRMED: 'Not confirmed'
}
export default {
components: {
'veui-checkbox': Checkbox
},
data () {
return {
status: 'UNCONFIRMED',
statusMap: STATUS_MAP
}
}
}
</script>

View File

@@ -0,0 +1,34 @@
<template>
<article>
<section>
<veui-collapse
label="Normal size"
>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Magni asperiores minus vitae voluptatibus enim perspiciatis exercitationem placeat cumque molestias, labore cum, sunt, id veritatis excepturi ipsum facere quis blanditiis neque?
</veui-collapse>
</section>
<section>
<veui-collapse
label="Small size"
ui="s"
>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Magni asperiores minus vitae voluptatibus enim perspiciatis exercitationem placeat cumque molestias, labore cum, sunt, id veritatis excepturi ipsum facere quis blanditiis neque?
</veui-collapse>
</section>
</article>
</template>
<script>
import { Collapse } from 'veui'
export default {
components: {
'veui-collapse': Collapse
}
}
</script>
<style lang="stylus" scoped docs>
section
margin-bottom 20px
</style>

View File

@@ -0,0 +1,41 @@
<template>
<article>
<veui-button @click="open = true">
Remove
</veui-button>
<veui-confirm-box
title="System Notification"
:open.sync="open"
@ok="ok"
@cancel="cancel"
>
<p>Are you sure to remove the item?</p>
</veui-confirm-box>
</article>
</template>
<script>
import { ConfirmBox, Button } from 'veui'
import toast from 'veui/managers/toast'
export default {
components: {
'veui-confirm-box': ConfirmBox,
'veui-button': Button
},
data () {
return {
open: false
}
},
methods: {
ok () {
this.open = false
toast.info('Confirmed')
},
cancel () {
toast.info('Canceled')
}
}
}
</script>

View File

@@ -0,0 +1,52 @@
<template>
<article>
<section>
<h4>Clearable</h4>
<veui-date-picker
v-model="date"
clearable
/>
</section>
<section>
<h4>Customizable placeholder</h4>
<veui-date-picker
v-model="date2"
placeholder="Pick a day"
/>
</section>
</article>
</template>
<script>
import { DatePicker } from 'veui'
export default {
components: {
'veui-date-picker': DatePicker
},
data () {
return {
date: new Date(),
date2: null
}
}
}
</script>
<style lang="less" scoped docs>
section:not(:last-child) {
margin-bottom: 20px;
}
h4 {
margin-top: 0;
}
</style>
<docs>
支持 `v-model`数据类型为原生 `Date` 类型
</docs>
<docs locale="en-US">
Supports `v-model` with value type being the native `Date`.
</docs>

View File

@@ -0,0 +1,54 @@
<template>
<article>
<section>
<h4>Clearable</h4>
<veui-date-picker
v-model="range"
range
clearable
/>
</section>
<section>
<h4>Customizable placeholder</h4>
<veui-date-picker
v-model="range"
class="custom"
range
placeholder="Pick a date range..."
/>
</section>
</article>
</template>
<script>
import { DatePicker } from 'veui'
export default {
components: {
'veui-date-picker': DatePicker
},
data () {
return {
range: null
}
}
}
</script>
<style lang="less" scoped docs>
section:not(:last-child) {
margin-bottom: 20px;
}
h4 {
margin-top: 0;
}
</style>
<docs>
支持 `v-model`选择日期范围时数据类型为 `[Date, Date]`
</docs>
<docs locale="en-US">
Supports `v-model`, with value type being `[Date, Date]` when selecting a date range.
</docs>

View File

@@ -0,0 +1,62 @@
<template>
<article>
<veui-date-picker
v-model="range"
:shortcuts="shortcuts"
range
clearable
/>
</article>
</template>
<script>
import { DatePicker } from 'veui'
export default {
components: {
'veui-date-picker': DatePicker
},
data () {
return {
range: null,
shortcuts: [
{
label: '上个月',
from: {
startOf: 'month',
month: -1
},
to: {
startOf: 'month',
days: -1
}
},
{
label: '本月',
from: {
startOf: 'month'
},
to: 0
},
{
label: '本周',
from: {
startOf: 'week',
days: 0
},
to: 0
},
{
label: '最近7天',
from: -6,
to: 0
},
{
label: '今天',
to: 0
}
]
}
}
}
</script>

View File

@@ -0,0 +1,121 @@
<template>
<article>
<veui-button
:disabled="submitting"
@click="submitOpen = true"
>
Submit
</veui-button>
<veui-button
:disabled="saving"
@click="saveOpen = true"
>
Save
</veui-button>
<veui-dialog
title="System"
:open.sync="submitOpen"
:before-close="submit"
:closable="false"
:escapable="!submitting"
:loading="submitting"
>
Confirm to create the issue?
</veui-dialog>
<veui-dialog
title="System"
:open.sync="saveOpen"
:closable="false"
:escapable="!submitting"
>
Confirm to save the post?
<template #foot>
<veui-button
ui="primary"
:loading="saving"
@click="save('ok')"
>
OK
</veui-button>
<veui-button
:disabled="saving"
@click="save"
>
Cancel
</veui-button>
</template>
</veui-dialog>
</article>
</template>
<script>
import { Dialog, Button } from 'veui'
import toast from 'veui/managers/toast'
function fakeRequest () {
return new Promise(resolve =>
setTimeout(() => {
resolve(Math.random() < 0.5)
}, 2000)
)
}
export default {
components: {
'veui-dialog': Dialog,
'veui-button': Button
},
data () {
return {
submitOpen: false,
saveOpen: false,
submitting: false,
saving: false
}
},
methods: {
submit (type) {
if (type === 'ok') {
this.submitting = true
return fakeRequest().then(success => {
this.submitting = false
if (!success) {
toast.error('Failed to create the issue. Please retry.')
return false
}
toast.success('Issue created successfully!')
})
}
},
save (type) {
if (type === 'ok') {
this.saving = true
return fakeRequest().then(success => {
this.saving = false
if (!success) {
toast.error('Failed to save the post. Please retry.')
} else {
toast.success('Post saved successfully!')
this.saveOpen = false
}
})
}
this.saveOpen = false
}
}
}
</script>
<style lang="less" scoped docs>
article > .veui-button {
margin-right: 20px;
}
</style>
<docs>
当你希望统一处理用户可能触发对话框关闭的操作请使用 `before-close` 属性传入统一的处理函数此时无论是点击确定/取消按钮关闭按钮还是按下 <kbd>esc</kbd> 触发的关闭操作都会统一进入 `before-close` 的处理流程如果逻辑相对简单比如取消时没有额外逻辑可以直接操作 `open` 属性来关闭对话框
</docs>
<docs locale="en-US">
When you want a unified process to handle all user interactions that might trigger the dialog to be closed, you can leverage the `before-close` function prop. No matter the close behavior is about to be triggered by clicking OK/Cancel buttons, the close button or pressing <kbd>esc</kbd>, `before-close` will always take over the following process. If the logic is relatively simple, you can manipulate `open` prop directly to close the dialog.
</docs>

View File

@@ -0,0 +1,73 @@
<template>
<article>
<veui-button @click="simpleOpen = true">
Title & content
</veui-button>
<veui-dialog
:open.sync="simpleOpen"
title="Customized Title & Content"
@ok="simpleOpen = false"
@cancel="simpleOpen = false"
>
Customized content via <code>&lt;slot&gt;</code>.
</veui-dialog>
<veui-button @click="titleIconOpen = true">
Icon in Title
</veui-button>
<veui-dialog
:open.sync="titleIconOpen"
@ok="titleIconOpen = false"
@cancel="titleIconOpen = false"
>
<template #title>
Title with Icon <veui-icon name="flag"/>
</template>
Customized content via <code>&lt;slot&gt;</code>.
</veui-dialog>
<veui-button @click="footOpen = true">
Foot
</veui-button>
<veui-dialog
:open.sync="footOpen"
title="Customized Foot"
>
Customized content via <code>&lt;slot&gt;</code>.
<template #foot="{ close }">
<veui-button
ui="s primary"
@click="close('ok')"
>
Close
</veui-button>
</template>
</veui-dialog>
</article>
</template>
<script>
import { Dialog, Button, Icon } from 'veui'
import 'veui-theme-dls-icons/flag'
export default {
components: {
'veui-dialog': Dialog,
'veui-button': Button,
'veui-icon': Icon
},
data () {
return {
simpleOpen: false,
titleIconOpen: false,
footOpen: false
}
}
}
</script>
<style lang="less" scoped docs>
.veui-button {
margin-right: 20px;
}
</style>

View File

@@ -0,0 +1,38 @@
<template>
<article>
<veui-button @click="draggableOpen = true">
Draggable
</veui-button>
<veui-dialog
:open.sync="draggableOpen"
title="Draggable Dialog"
draggable
@ok="draggableOpen = false"
@cancel="draggableOpen = false"
>
This dialog is draggable.
</veui-dialog>
</article>
</template>
<script>
import { Dialog, Button } from 'veui'
export default {
components: {
'veui-dialog': Dialog,
'veui-button': Button
},
data () {
return {
draggableOpen: false
}
}
}
</script>
<style lang="less" scoped docs>
.veui-button {
margin-right: 20px;
}
</style>

View File

@@ -0,0 +1,64 @@
<template>
<article>
<veui-button @click="modalOpen = true">
Modal
</veui-button>
<veui-button @click="nonModalOpen = true">
Non-modal
</veui-button>
<veui-dialog
title="System"
:open.sync="modalOpen"
@ok="handleModalClose(true)"
@cancel="handleModalClose"
>
Do you want to refresh the page?
</veui-dialog>
<veui-dialog
title="System"
:open.sync="nonModalOpen"
:modal="false"
@ok="handleModalClose(true)"
@cancel="handleModalClose"
>
Do you want to refresh the page?
</veui-dialog>
</article>
</template>
<script>
import { Dialog, Button } from 'veui'
export default {
components: {
'veui-dialog': Dialog,
'veui-button': Button
},
data () {
return {
modalOpen: false,
nonModalOpen: false
}
},
methods: {
handleModalClose (ok) {
this.modalOpen = false
if (ok) {
location.reload()
}
},
handleNonModalClose (ok) {
this.nonModalOpen = false
if (ok) {
location.reload()
}
}
}
}
</script>
<style lang="less" scoped docs>
.veui-button {
margin-right: 20px;
}
</style>

View File

@@ -0,0 +1,62 @@
<template>
<article>
<veui-button @click="aOpen = true">
Dialog A
</veui-button>
<veui-dialog
:open.sync="aOpen"
title="Dialog A"
draggable
:modal="false"
@ok="aOpen = false"
@cancel="aOpen = false"
>
The content of Dialog A.
</veui-dialog>
<veui-button @click="bOpen = true">
Dialog B
</veui-button>
<veui-dialog
:open.sync="bOpen"
title="Dialog B"
draggable
:modal="false"
@ok="bOpen = false"
@cancel="bOpen = false"
>
The content of Dialog B.
</veui-dialog>
</article>
</template>
<script>
import { Dialog, Button } from 'veui'
export default {
components: {
'veui-dialog': Dialog,
'veui-button': Button
},
data () {
return {
aOpen: false,
bOpen: false
}
}
}
</script>
<style lang="less" scoped docs>
.veui-button {
margin-right: 20px;
}
</style>
<docs>
同时打开上面两个对话框将一个拖动到使两个对话框稍稍重叠的位置然后当你点击激活一个对话框它就将显示于另一个之上了
</docs>
<docs locale="en-US">
Open both dialogs and drag one of them to make them overlap a little bit. Then when you activate one dialog, it will be displayed on top of the other one.
</docs>

View File

@@ -0,0 +1,51 @@
<template>
<article>
<div
ref="target1"
v-drag:target1.translate.x
class="target"
>
水平方向
</div>
<div
ref="target2"
v-drag:target2.translate.y
class="target"
>
垂直方向
</div>
</article>
</template>
<script>
import drag from 'veui/directives/drag'
export default {
directives: {
drag
}
}
</script>
<style lang="less" scoped docs>
@import "~veui-theme-dls/lib.less";
article {
height: 200px;
}
.target {
.size(80px);
background: @veui-gray-color-6;
display: inline-flex;
margin-right: 40px;
align-items: center;
justify-content: center;
vertical-align: top;
}
.container {
.size(100%, 300px);
background: @veui-gray-color-8;
}
</style>

View File

@@ -0,0 +1,28 @@
<template>
<article>
<div
ref="target"
v-drag:target.translate
class="target"
/>
</article>
</template>
<script>
import drag from 'veui/directives/drag'
export default {
directives: {
drag
}
}
</script>
<style lang="less" scoped docs>
@import "~veui-theme-dls/lib.less";
.target {
.size(80px);
background: @veui-gray-color-6;
}
</style>

View File

@@ -0,0 +1,38 @@
<template>
<article>
<div
ref="container"
class="container"
>
<div
ref="target"
v-drag:target.translate="{containment: 'container'}"
class="target"
/>
</div>
</article>
</template>
<script>
import drag from 'veui/directives/drag'
export default {
directives: {
drag
}
}
</script>
<style lang="less" scoped docs>
@import "~veui-theme-dls/lib.less";
.target {
.size(80px);
background: @veui-gray-color-6;
}
.container {
.size(100%, 300px);
background: @veui-gray-color-8;
}
</style>

View File

@@ -0,0 +1,48 @@
<template>
<article>
<div
ref="target1"
v-drag:target1,target2,target3.translate
class="target"
>
主元素
</div>
<div
ref="target2"
class="target"
/>
<div
ref="target3"
class="target"
/>
</article>
</template>
<script>
import drag from 'veui/directives/drag'
export default {
directives: {
drag
}
}
</script>
<style lang="less" scoped docs>
@import "~veui-theme-dls/lib.less";
.target {
.size(80px);
background: @veui-gray-color-6;
display: inline-flex;
margin-right: 40px;
align-items: center;
justify-content: center;
vertical-align: top;
}
.container {
.size(100%, 300px);
background: @veui-gray-color-8;
}
</style>

View File

@@ -0,0 +1,77 @@
<template>
<article>
<div class="box value">
{{ displayValue }}
</div>
<div
v-nudge.x="{update: handleNudgeUpdate}"
class="box"
tabindex="-1"
>
点我<strong>左右</strong>方向键
</div>
<div
v-nudge.y="{update: handleNudgeUpdate}"
class="box"
tabindex="-1"
>
点我<strong>上下</strong>方向键
</div>
</article>
</template>
<script>
import nudge from 'veui/directives/nudge'
export default {
directives: {
nudge
},
data () {
return {
value: 0
}
},
computed: {
displayValue () {
return this.value.toFixed(1).replace('.0', '')
}
},
methods: {
handleNudgeUpdate (increase) {
this.value += increase
}
}
}
</script>
<style lang="less" scoped docs>
@import "~veui-theme-dls/lib.less";
article {
display: flex;
}
.box {
.size(200px, 50px);
display: flex;
align-items: center;
justify-content: center;
border: 1px solid @veui-gray-color-5;
background: #fff;
margin-right: 40px;
user-select: none;
cursor: pointer;
outline: none;
transition: background-color 0.3s;
line-height: 1;
&:focus {
background-color: @veui-gray-color-6;
}
}
.value {
font-size: 1.5em;
}
</style>

View File

@@ -0,0 +1,54 @@
<template>
<article
@mouseenter="inDemo = true"
@mouseleave="inDemo = false"
>
<div
v-outside="handleOutside"
class="box"
>
目标元素 A
</div>
</article>
</template>
<script>
import outside from 'veui/directives/outside'
import toast from 'veui/managers/toast'
export default {
directives: {
outside
},
data () {
return {
timer: null,
inDemo: false
}
},
methods: {
handleOutside () {
if (this.inDemo) {
toast.info('点击了目标元素 A 外部。')
}
}
}
}
</script>
<style lang="less" scoped docs>
@import "~veui-theme-dls/lib.less";
.box {
.size(500px, 100px);
background: @veui-gray-color-8;
display: flex;
align-items: center;
justify-content: center;
}
article {
margin: -30px;
padding: 30px;
}
</style>

View File

@@ -0,0 +1,64 @@
<template>
<article>
<div
v-outside:box2,box3.hover.1000="handleOutside"
class="box1"
>
目标元素 C
</div>
<div
ref="box2"
class="box2"
>
目标元素 D
</div>
<div
ref="box3"
class="box3"
>
目标元素 E
</div>
</article>
</template>
<script>
import outside from 'veui/directives/outside'
import toast from 'veui/managers/toast'
export default {
directives: {
outside
},
data () {
return {
consoleVisible: false,
timer: null
}
},
methods: {
handleOutside () {
toast.info('在 1000ms 内未移回目标元素 C、D、E触发外部事件。')
}
}
}
</script>
<style lang="less" scoped docs>
@import "~veui-theme-dls/lib.less";
.box1,
.box2,
.box3 {
.size(200px, 100px);
background: @veui-gray-color-8;
margin-right: 30px;
display: inline-flex;
align-items: center;
justify-content: center;
}
article {
margin: -30px;
padding: 30px;
}
</style>

View File

@@ -0,0 +1,49 @@
<template>
<article>
<div
v-outside.hover="handleOutside"
class="box"
>
目标元素 B
</div>
</article>
</template>
<script>
import outside from 'veui/directives/outside'
import toast from 'veui/managers/toast'
export default {
directives: {
outside
},
data () {
return {
consoleVisible: false,
timer: null
}
},
methods: {
handleOutside () {
toast.info('鼠标移到了目标元素B外部。')
}
}
}
</script>
<style lang="less" scoped docs>
@import "~veui-theme-dls/lib.less";
.box {
.size(500px, 100px);
background: @veui-gray-color-8;
display: flex;
align-items: center;
justify-content: center;
}
article {
margin: -30px;
padding: 30px;
}
</style>

View File

@@ -0,0 +1,98 @@
<template>
<article>
<section>
<veui-button
@click="randomSize"
>
调整尺寸
</veui-button>
<div
ref="demo"
v-resize="updateSize"
class="demo"
:style="`width: ${size}px`"
>
v-resize="handler"
</div>
<p>当前尺寸: {{ caughtSize }}px</p>
<div
ref="demo1"
v-resize.debounce.leading="updateSize1"
class="demo"
:style="`width: ${size}px`"
>
v-resize.debounce="handler"
</div>
<p>当前尺寸: {{ caughtSize1 }}px</p>
<div
ref="demo2"
v-resize.throttle.500="updateSize2"
class="demo"
:style="`width: ${size}px`"
>
v-resize.throttle.500="handler"
</div>
<p>当前尺寸: {{ caughtSize2 }}px</p>
<div
ref="demo3"
v-resize="{mode: 'throttle', handler: updateSize3}"
class="demo"
:style="`width: ${size}px`"
>
v-resize="{mode: 'throttle', handler}"
</div>
<p>当前尺寸: {{ caughtSize3 }}px</p>
</section>
</article>
</template>
<script>
import { Button } from 'veui'
import { resize } from 'veui/directives'
export default {
components: {
'veui-button': Button
},
directives: {
resize
},
data () {
return {
size: 315,
caughtSize: 315,
caughtSize1: 315,
caughtSize2: 315,
caughtSize3: 315
}
},
methods: {
randomSize () {
this.size = Math.ceil(Math.random() * 480) + 315
},
updateSize () {
this.caughtSize = this.$refs.demo.offsetWidth
},
updateSize1 () {
this.caughtSize1 = this.$refs.demo1.offsetWidth
},
updateSize2 () {
this.caughtSize2 = this.$refs.demo2.offsetWidth
},
updateSize3 () {
this.caughtSize3 = this.$refs.demo3.offsetWidth
}
}
}
</script>
<style lang="less" docs scoped>
.demo {
height: 50px;
line-height: 50px;
margin-top: 10px;
padding-left: 10px;
background-color: #eee;
transition: width 2s;
}
</style>

View File

@@ -0,0 +1,73 @@
<template>
<article>
<veui-button @click="simpleOpen = true">
Title & content
</veui-button>
<veui-drawer
:open.sync="simpleOpen"
title="Customized Title & Content"
@ok="simpleOpen = false"
@cancel="simpleOpen = false"
>
Customized content via <code>&lt;slot&gt;</code>.
</veui-drawer>
<veui-button @click="titleIconOpen = true">
Icon in Title
</veui-button>
<veui-drawer
:open.sync="titleIconOpen"
@ok="titleIconOpen = false"
@cancel="titleIconOpen = false"
>
<template #title>
Title with Icon <veui-icon name="flag"/>
</template>
Customized content via <code>&lt;slot&gt;</code>.
</veui-drawer>
<veui-button @click="footOpen = true">
Foot
</veui-button>
<veui-drawer
:open.sync="footOpen"
title="Customized Foot"
>
Customized content via <code>&lt;slot&gt;</code>.
<template #foot="{ close }">
<veui-button
ui="s primary"
@click="close('ok')"
>
Close
</veui-button>
</template>
</veui-drawer>
</article>
</template>
<script>
import { Drawer, Button, Icon } from 'veui'
import 'veui-theme-dls-icons/flag'
export default {
components: {
'veui-drawer': Drawer,
'veui-button': Button,
'veui-icon': Icon
},
data () {
return {
simpleOpen: false,
titleIconOpen: false,
footOpen: false
}
}
}
</script>
<style lang="less" scoped docs>
.veui-button {
margin-right: 20px;
}
</style>

View File

@@ -0,0 +1,64 @@
<template>
<article>
<veui-button @click="modalOpen = true">
Modal
</veui-button>
<veui-button @click="nonModalOpen = true">
Non-modal
</veui-button>
<veui-drawer
title="System"
:open.sync="modalOpen"
@ok="handleModalClose(true)"
@cancel="handleModalClose"
>
Do you want to refresh the page?
</veui-drawer>
<veui-drawer
title="System"
:open.sync="nonModalOpen"
:modal="false"
@ok="handleModalClose(true)"
@cancel="handleModalClose"
>
Do you want to refresh the page?
</veui-drawer>
</article>
</template>
<script>
import { Drawer, Button } from 'veui'
export default {
components: {
'veui-drawer': Drawer,
'veui-button': Button
},
data () {
return {
modalOpen: false,
nonModalOpen: false
}
},
methods: {
handleModalClose (ok) {
this.modalOpen = false
if (ok) {
location.reload()
}
},
handleNonModalClose (ok) {
this.nonModalOpen = false
if (ok) {
location.reload()
}
}
}
}
</script>
<style lang="less" scoped docs>
.veui-button {
margin-right: 20px;
}
</style>

View File

@@ -0,0 +1,103 @@
<template>
<article>
<section>
<veui-checkbox v-model="modal">
Modal
</veui-checkbox>
<veui-checkbox v-model="outsideClosable">
outside Closable
</veui-checkbox>
</section>
<section>
<veui-button @click="topOpen = true">
Top
</veui-button>
<veui-button @click="rightOpen = true">
Right
</veui-button>
<veui-button @click="bottomOpen = true">
Bottom
</veui-button>
<veui-button @click="leftOpen = true">
Left
</veui-button>
</section>
<veui-drawer
:open.sync="topOpen"
:outside-closable="outsideClosable"
:modal="modal"
placement="top"
>
<p>content area</p>
<template #title="{ close }">
<a @click="close">
关闭
</a>
</template>
<template #foot>
<div>Foot</div>
</template>
</veui-drawer>
<veui-drawer
:open.sync="rightOpen"
:modal="modal"
:outside-closable="outsideClosable"
placement="right"
title="Title"
/>
<veui-drawer
title="Title"
:modal="modal"
:open.sync="bottomOpen"
:outside-closable="outsideClosable"
placement="bottom"
/>
<veui-drawer
title="Title"
:modal="modal"
:open.sync="leftOpen"
:outside-closable="outsideClosable"
placement="left"
/>
</article>
</template>
<script>
import { Checkbox, Drawer, Button } from 'veui'
export default {
name: 'drawer-demo',
components: {
'veui-drawer': Drawer,
'veui-checkbox': Checkbox,
'veui-button': Button
},
data () {
return {
modal: true,
outsideClosable: false,
topOpen: false,
rightOpen: false,
bottomOpen: false,
leftOpen: false
}
}
}
</script>
<style lang="less" scoped>
section {
& + & {
margin-top: 20px;
}
}
.veui-button,
.veui-checkbox {
& + & {
margin-left: 20px;
}
}
</style>

View File

@@ -0,0 +1,105 @@
<template>
<article>
<veui-dropdown
label="Operation"
disabled
ui="text"
:options="options"
/>
<veui-dropdown
label="Operation"
disabled
:options="options"
/>
<veui-dropdown
label="Operation"
disabled
ui="primary"
:options="options"
/>
<veui-dropdown
label="Operation"
disabled
split
:options="options"
/>
<veui-dropdown
label="Operation"
disabled
split
ui="primary"
:options="options"
/>
</article>
</template>
<script>
import { Dropdown } from 'veui'
export default {
components: {
'veui-dropdown': Dropdown
},
data () {
return {
options: [
{
label: '新建',
value: 'create'
},
{
label: '编辑',
value: 'edit',
disabled: true
},
{
label: '删除',
value: 'remove'
},
{
label: '编辑',
value: 'edit',
disabled: true
},
{
label: '删除',
value: 'remove'
},
{
label: '编辑',
value: 'edit',
disabled: true
},
{
label: '删除',
value: 'remove'
},
{
label: '编辑',
value: 'edit',
disabled: true
},
{
label: '删除',
value: 'remove'
},
{
label: '编辑',
value: 'edit',
disabled: true
},
{
label: '删除',
value: 'remove'
}
]
}
}
}
</script>
<style lang="less" scoped docs>
.veui-dropdown {
margin-left: 1em;
}
</style>

View File

@@ -0,0 +1,70 @@
<template>
<veui-dropdown
label="Files"
@click="alert"
>
<veui-option-group>
<veui-option
value="new-file"
label="New File"
/>
<veui-option
value="new-window"
label="New Window"
/>
</veui-option-group>
<veui-option-group>
<veui-option
value="open"
label="Open…"
/>
<veui-option
value="open-workspace"
label="Open Workspace…"
/>
<veui-option-group
label="Open Recent"
position="popup"
>
<veui-option-group>
<veui-option
value="reopen"
label="Reopen Closed Editor"
/>
</veui-option-group>
<veui-option-group>
<veui-option
value="open:~/Dropdown.vue"
label="~/Dropdown.vue"
/>
<veui-option
value="open:~/Select.vue"
label="~/Select.vue"
/>
</veui-option-group>
</veui-option-group>
</veui-option-group>
</veui-dropdown>
</template>
<script>
import { Dropdown, OptionGroup, Option } from 'veui'
import toast from 'veui/managers/toast'
export default {
components: {
'veui-dropdown': Dropdown,
'veui-option-group': OptionGroup,
'veui-option': Option
},
methods: {
alert (e) {
toast.info(e)
}
}
}
</script>
<docs>
`OptionGroup` `position` 属性设置为 `popup` 后可以让子选项在新的浮动子菜单中展现
</docs>

View File

@@ -0,0 +1,132 @@
<template>
<article>
<div class="container">
<veui-dropdown
label="Operation"
split
trigger="hover"
:options="options"
/>
<veui-dropdown
label="Operation"
split
trigger="click"
:options="options"
/>
<veui-dropdown
label="Operation"
ui="primary"
split
trigger="hover"
:options="options"
/>
<veui-dropdown
label="Operation"
ui="primary"
split
trigger="click"
:options="options"
/>
</div>
<div class="container">
<veui-dropdown
label="Operation"
trigger="hover"
:options="options"
/>
<veui-dropdown
label="Operation"
trigger="click"
:options="options"
/>
<veui-dropdown
label="Operation"
ui="text"
split
trigger="hover"
:options="options"
/>
<veui-dropdown
label="Operation"
ui="text"
split
trigger="click"
:options="options"
/>
</div>
</article>
</template>
<script>
import { Dropdown } from 'veui'
export default {
components: {
'veui-dropdown': Dropdown
},
data () {
return {
options: [
{
label: '新建新建新建新建新建新建新建',
value: 'create'
},
{
label: '编辑',
value: 'edit',
disabled: true
},
{
label: '删除',
value: 'remove'
},
{
label: '编辑',
value: 'edit',
disabled: true
},
{
label: '删除',
value: 'remove'
},
{
label: '编辑',
value: 'edit',
disabled: true
},
{
label: '删除',
value: 'remove'
},
{
label: '编辑',
value: 'edit',
disabled: true
},
{
label: '删除',
value: 'remove'
},
{
label: '编辑',
value: 'edit',
disabled: true
},
{
label: '删除',
value: 'remove'
}
]
}
}
}
</script>
<style lang="less" scoped docs>
.container {
margin-bottom: 1em;
.veui-dropdown {
margin-left: 1em;
}
}
</style>

View File

@@ -0,0 +1,168 @@
<template>
<article>
<veui-dropdown
label="Operation"
placeholder="Type to search..."
searchable
:options="options"
/>
</article>
</template>
<script>
import { Dropdown } from 'veui'
export default {
components: {
'veui-dropdown': Dropdown
},
data () {
return {
options: [
{
label: '>',
value: '>'
},
{
label: '>>',
value: '>>'
},
{
label: '<',
value: '<'
},
{
label: '|',
value: '|'
},
{
label: '~/.bash_profile',
value: '~/.bash_profile'
},
{
label: 'alias',
value: 'alias'
},
{
label: 'cd',
value: 'cd'
},
{
label: 'cd ..',
value: 'cd ..'
},
{
label: 'cp',
value: 'cp'
},
{
label: 'Wildcards (*)',
value: 'Wildcards (*)'
},
{
label: 'env',
value: 'env'
},
{
label: 'env | grep VARIABLE',
value: 'env | grep VARIABLE'
},
{
label: 'export',
value: 'export'
},
{
label: 'grep',
value: 'grep'
},
{
label: 'grep -i',
value: 'grep -i'
},
{
label: 'grep -R',
value: 'grep -R'
},
{
label: 'grep -Rl',
value: 'grep -Rl'
},
{
label: 'HOME',
value: 'HOME'
},
{
label: 'ls',
value: 'ls'
},
{
label: 'mkdir',
value: 'mkdir'
},
{
label: 'mv',
value: 'mv'
},
{
label: 'nano',
value: 'nano'
},
{
label: 'PATH',
value: 'PATH'
},
{
label: 'pwd',
value: 'pwd'
},
{
label: 'rm',
value: 'rm'
},
{
label: 'rm -r',
value: 'rm -r'
},
{
label: 'sed',
value: 'sed'
},
{
label: 'sort',
value: 'sort'
},
{
label: 'standard error',
value: 'standard error'
},
{
label: 'source',
value: 'source'
},
{
label: 'standard input',
value: 'standard input'
},
{
label: 'standard output',
value: 'standard output'
},
{
label: 'touch',
value: 'touch'
},
{
label: 'uniq',
value: 'uniq'
}
]
}
}
}
</script>
<style lang="less" scoped docs>
.veui-dropdown {
margin-left: 1em;
}
</style>

View File

@@ -0,0 +1,72 @@
<template>
<article>
<veui-dropdown
label="Action"
ui="xs"
:options="operations"
@click="alert"
/>
<veui-dropdown
label="Action"
ui="s"
:options="operations"
@click="alert"
/>
<veui-dropdown
label="Action"
:options="operations"
@click="alert"
/>
<veui-dropdown
label="Action"
ui="l"
:options="operations"
@click="alert"
/>
</article>
</template>
<script>
import { Dropdown } from 'veui'
import toast from 'veui/managers/toast'
export default {
components: {
'veui-dropdown': Dropdown
},
data () {
return {
operations: [
{
label: 'Edit',
value: 'edit'
},
{
label: 'Delete',
value: 'delete'
},
{
label: 'Save',
value: 'save'
},
{
label: 'Publish',
value: 'publish'
}
]
}
},
methods: {
alert (e) {
toast.info(e)
}
}
}
</script>
<style lang="less" scoped docs>
.veui-dropdown {
max-width: 120px;
margin-right: 10px;
}
</style>

View File

@@ -0,0 +1,59 @@
<template>
<article>
<veui-dropdown
label="Primary"
ui="primary"
:options="options"
/>
<veui-dropdown
label="Default"
:options="options"
/>
<veui-dropdown
label="Normal"
ui="normal"
:options="options"
/>
<veui-dropdown
label="Text"
ui="text"
:options="options"
/>
</article>
</template>
<script>
import { Dropdown } from 'veui'
export default {
components: {
'veui-dropdown': Dropdown
},
data () {
return {
options: [
{
label: '新建',
value: 'create'
},
{
label: '编辑',
value: 'edit'
},
{
label: '删除',
value: 'remove'
}
]
}
}
}
</script>
<style lang="less" scoped docs>
.veui-dropdown {
& + & {
margin-left: 1em;
}
}
</style>

View File

@@ -0,0 +1,50 @@
<template>
<article>
<section>
<veui-button @click="open = !open">
Toggle
</veui-button>
</section>
<section>
<veui-embedded
:open.sync="open"
title="Notification"
>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. At dolorum eius vero expedita ut voluptates possimus recusandae id incidunt obcaecati asperiores eum, laborum dolore facilis aperiam quidem. Maiores, non eum.</p>
</veui-embedded>
</section>
<section>
<veui-embedded
ui="s"
:open.sync="open"
title="Notification"
>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. At dolorum eius vero expedita ut voluptates possimus recusandae id incidunt obcaecati asperiores eum, laborum dolore facilis aperiam quidem. Maiores, non eum.</p>
</veui-embedded>
</section>
</article>
</template>
<script>
import { Embedded, Button } from 'veui'
export default {
components: {
'veui-embedded': Embedded,
'veui-button': Button
},
data () {
return {
open: false
}
}
}
</script>
<style lang="less" scoped docs>
section {
margin-bottom: 20px;
}
</style>

View File

@@ -0,0 +1,63 @@
<template>
<article>
<veui-filter-panel
title="Browsers"
:datasource="browsersDatasource"
>
<template slot-scope="{ items }">
<div
v-for="item in items"
v-show="!item.hidden"
:key="item.value"
class="item"
>
{{ item.label }}
</div>
</template>
</veui-filter-panel>
</article>
</template>
<script>
import { FilterPanel } from 'veui'
export default {
components: {
'veui-filter-panel': FilterPanel
},
data () {
return {
browsers: [
'Google Chrome',
'Apple Safari',
'Microsoft Edge',
'Mozilla Firefox',
'Opera',
'Vivaldi',
'Internet Explorer',
'Maxthon',
'Android Browser',
'UC Browser',
'Samsung Internet',
'QQ Browser'
]
}
},
computed: {
browsersDatasource () {
return this.browsers.map(label => {
return {
label,
value: label.toLowerCase().replace(/\s+/g, '-')
}
})
}
}
}
</script>
<style lang="less" docs scoped>
.item {
padding: 8px 15px;
}
</style>

View File

@@ -0,0 +1,62 @@
<template>
<article>
<button>:focus</button> <button class="special">
.focus-visible
</button>
</article>
</template>
<style lang="stylus" scoped docs>
p
margin-bottom 1em
button
width 120px
height 36px
margin-right 1em
background #fff
border solid 1px #999
padding 3px 6px
text-align center
transition background-color 0.3s
&:hover
background-color #f8f8f8
&:active
background-color #eee
</style>
<style lang="less" scoped>
button {
&:focus {
outline: 2px solid #eee;
}
}
.special {
&:focus {
outline: none;
}
&.focus-visible {
outline: 2px solid #eee;
}
}
</style>
<docs>
使用了 polyfill 以后 `:focus` 样式在鼠标键盘激活时均会展现而使用了 `.focus-visible` 样式仅在通过键盘激活时展现
:::warning
本例非 DLS 样式仅作为示例需注意对 `:focus-visible` 的处理在 Firefox Safari 下无效目前在这两个浏览器下点击不会使按钮处于 `:focus` 状态
:::
</docs>
<docs locale="en-US">
After including the polyfill, `:focus` styles are applied both with mouse clicks and keyboard activation, while `.focus-visible` styles are only applied with keyboard activation.
:::warning
This example is only for demonstration purpose and doesn't reflect DLS's styles. Please note that our polyfill for `:focus-visible` works differently in Firefox and Safari. Clicking a button in these browsers won't set the `:focus` state on the button.
:::
</docs>

View File

@@ -0,0 +1,38 @@
<template>
<article>
<section>
<veui-checkbox v-model="disabled">
禁用
</veui-checkbox>
</section>
<veui-form
:data="formData"
:disabled="disabled"
>
<veui-field label="姓名:">
<veui-input v-model="formData.name"/>
</veui-field>
</veui-form>
</article>
</template>
<script>
import { Form, Field, Input, Checkbox } from 'veui'
export default {
components: {
'veui-checkbox': Checkbox,
'veui-form': Form,
'veui-field': Field,
'veui-input': Input
},
data () {
return {
disabled: true,
formData: {
name: ''
}
}
}
}
</script>

View File

@@ -0,0 +1,84 @@
<template>
<article>
<veui-form :data="formData">
<veui-field label="状态:">
<veui-select
v-model="formData.statusSelected"
:options="statusOptions"
/>
</veui-field>
<veui-field label="时间:">
<veui-datepicker
v-model="formData.range"
range
/>
</veui-field>
<veui-field>
<veui-search-box
v-model="formData.query"
placeholder="请输入搜索内容"
/>
</veui-field>
<template #actions>
<veui-button
ui="primary"
type="submit"
>
提交
</veui-button>
<veui-button>取消</veui-button>
</template>
</veui-form>
</article>
</template>
<script>
import moment from 'moment'
import { Form, Field, Button, Select, DatePicker, SearchBox } from 'veui'
export default {
components: {
'veui-form': Form,
'veui-field': Field,
'veui-button': Button,
'veui-select': Select,
'veui-datepicker': DatePicker,
'veui-search-box': SearchBox
},
data () {
return {
statusOptions: [
{
label: '状态1',
value: 1
},
{
label: '状态2',
value: 2
},
{
label: '状态3',
value: 3
},
{
label: '状态4',
value: 4
}
],
formData: {
statusSelected: 1,
query: '',
range: [
moment().toDate(),
moment()
.add(3, 'month')
.toDate()
]
}
}
}
}
</script>

View File

@@ -0,0 +1,38 @@
<template>
<article>
<section>
<veui-checkbox v-model="readonly">
只读
</veui-checkbox>
</section>
<veui-form
:data="formData"
:readonly="readonly"
>
<veui-field label="姓名:">
<veui-input v-model="formData.name"/>
</veui-field>
</veui-form>
</article>
</template>
<script>
import { Form, Field, Input, Checkbox } from 'veui'
export default {
components: {
'veui-checkbox': Checkbox,
'veui-form': Form,
'veui-field': Field,
'veui-input': Input
},
data () {
return {
readonly: true,
formData: {
name: ''
}
}
}
}
</script>

View File

@@ -0,0 +1,326 @@
<template>
<article>
<veui-form
ref="form"
:before-validate="beforeValidate"
:after-validate="afterValidate"
:readonly="isValidating"
:data="formData"
:validators="validators"
@invalid="handleInvalid"
>
<veui-field
name="name"
label="姓名"
rules="required"
>
<veui-input v-model="formData.name"/>
</veui-field>
<veui-field
name="age"
:rules="ageRule"
label="年龄"
>
<veui-input
v-model="formData.age"
placeholder="错误提示优先出在右侧"
/>
</veui-field>
<veui-field
name="desc"
rules="required"
label="介绍"
>
<veui-textarea
v-model="formData.desc"
rows="3"
/>
</veui-field>
<veui-fieldset
name="phoneSet"
label="电话"
required
>
<veui-field
name="phoneType"
:rules="numRequiredRule"
>
<veui-select
v-model="formData.phoneType"
:options="phoneTypeOptions"
/>
</veui-field>
<veui-field
name="phone"
:rules="numRequiredRule"
>
<veui-input v-model="formData.phone"/>
</veui-field>
</veui-fieldset>
<veui-field
name="hobby"
:rules="hobbyRule"
label="爱好"
tip="选择则至少选三个"
>
<veui-checkbox-group
v-model="formData.hobby"
:items="hobbyItems"
/>
</veui-field>
<veui-fieldset
label="预期收入"
class="salary"
tip="联合校验,下限必须小于上限"
required
>
<veui-field
name="start"
:rules="numRequiredRule"
>
<veui-input v-model="formData.start"/>
</veui-field>
<veui-span>-</veui-span>
<veui-field
name="end"
:rules="numRequiredRule"
>
<veui-input v-model="formData.end"/>
</veui-field>
<veui-span></veui-span>
</veui-fieldset>
<veui-field
label="收入下限"
name="floor"
:rules="[
{name: 'required', value: true},
{name: 'min', value: 3500, message: '最低收入不小于 3500'}
]"
>
<veui-number-input v-model="formData.floor"/>
</veui-field>
<veui-field
name="term"
:rules="termRequiredRule"
label="协议"
>
<veui-checkbox
v-model="formData.term"
>
我已阅读并同意工作协议
</veui-checkbox>
</veui-field>
<template #actions>
<veui-button
ui="primary"
:loading="isValidating"
type="submit"
>
提交
</veui-button>
<veui-button
:loading="isValidating"
@click="() => this.$refs.form.reset()"
>
重置
</veui-button>
</template>
</veui-form>
</article>
</template>
<script>
import {
Form,
Fieldset,
Field,
Span,
Input,
Button,
Select,
Textarea,
Checkbox,
CheckboxGroup,
NumberInput
} from 'veui'
export default {
components: {
'veui-span': Span,
'veui-input': Input,
'veui-number-input': NumberInput,
'veui-button': Button,
'veui-form': Form,
'veui-fieldset': Fieldset,
'veui-field': Field,
'veui-select': Select,
'veui-checkbox': Checkbox,
'veui-checkbox-group': CheckboxGroup,
'veui-textarea': Textarea
},
data () {
return {
formData: {
name: 'liyunteng1',
name1: 'liyunteng2',
age: null,
desc: '',
hobby: ['🏸'],
phone: '18888888888',
phoneType: 'mobile',
start: null,
end: null,
term: null,
floor: 3501
},
hobbyItems: [
{
value: '⚽️',
label: '足球'
},
{
value: '🏀',
label: '篮球'
},
{
value: '🏸',
label: '羽毛球'
},
{
value: '🎾',
label: '网球'
}
],
phoneTypeOptions: [
{
label: '座机',
value: 'phone'
},
{
label: '手机',
value: 'mobile'
}
],
requiredRule: [
{
name: 'required',
value: true,
triggers: 'blur,input'
}
],
numRequiredRule: [
{
name: 'numeric',
value: true,
triggers: 'blur,input'
},
{
name: 'required',
value: true,
triggers: 'blur,input'
}
],
termRequiredRule: [
{
name: 'required',
value: true,
message: '请勾选阅读协议',
triggers: 'change'
}
],
dynamicNameRule: [
{
name: 'required',
value: true,
triggers: 'blur,input'
},
{
name: 'minLength',
value: 2
}
],
ageRule: [
{
name: 'required',
value: true,
triggers: 'input'
},
{
name: 'numeric',
value: true,
triggers: 'input'
},
{
name: 'maxLength',
value: 3,
triggers: 'change'
}
],
hobbyRule: [
{
name: 'minLength',
value: 3,
message: '至少选择三个爱好',
triggers: 'change'
}
],
isValidating: false,
validators: [
{
fields: ['start', 'end'],
handler (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']
}
]
}
},
methods: {
beforeValidate () {
this.isValidating = true
},
afterValidate () {
this.isValidating = false
},
handleInvalid () {
this.isValidating = false
}
}
}
</script>

View File

@@ -0,0 +1,82 @@
<template>
<article>
<veui-grid-container>
<veui-grid-row>
<veui-grid-column :span="8">
<div class="content">
8/24
</div>
</veui-grid-column>
<veui-grid-column :span="16">
<div class="content">
16/24
</div>
</veui-grid-column>
</veui-grid-row>
<veui-grid-row>
<veui-grid-column :span="6">
<div class="content">
6/24
</div>
</veui-grid-column>
<veui-grid-column :span="6">
<div class="content">
6/24
</div>
</veui-grid-column>
<veui-grid-column :span="6">
<div class="content">
6/24
</div>
</veui-grid-column>
<veui-grid-column :span="6">
<div class="content">
6/24
</div>
</veui-grid-column>
</veui-grid-row>
<veui-grid-row>
<veui-grid-column :span="12">
<div class="content">
12/24
</div>
</veui-grid-column>
<veui-grid-column :span="12">
<div class="content">
12/24
</div>
</veui-grid-column>
</veui-grid-row>
</veui-grid-container>
</article>
</template>
<script>
import { GridContainer, GridRow, GridColumn } from 'veui'
export default {
components: {
'veui-grid-container': GridContainer,
'veui-grid-row': GridRow,
'veui-grid-column': GridColumn
}
}
</script>
<style lang="less" scoped>
.veui-grid-row {
& + & {
margin: 2px 0; /* Just for showcase */
}
}
</style>
<style lang="less" scoped docs>
.content {
background-color: #eee;
height: 100%;
line-height: 60px;
border-radius: 2px;
text-align: center;
}
</style>

View File

@@ -0,0 +1,77 @@
<template>
<article>
<veui-grid-container
:columns="12"
:gutter="10"
:margin="0"
>
<veui-grid-row>
<veui-grid-column :span="3">
<div class="content">
3/12
</div>
</veui-grid-column>
<veui-grid-column :span="9">
<div class="content">
9/12
</div>
</veui-grid-column>
</veui-grid-row>
<veui-grid-row>
<veui-grid-column :span="4">
<div class="content">
4/12
</div>
</veui-grid-column>
<veui-grid-column :span="4">
<div class="content">
4/12
</div>
</veui-grid-column>
<veui-grid-column :span="4">
<div class="content">
4/12
</div>
</veui-grid-column>
</veui-grid-row>
</veui-grid-container>
</article>
</template>
<script>
import { GridContainer, GridRow, GridColumn } from 'veui'
export default {
components: {
'veui-grid-container': GridContainer,
'veui-grid-row': GridRow,
'veui-grid-column': GridColumn
}
}
</script>
<style lang="less" scoped>
article {
width: 400px; /* Fixed-width container */
}
.veui-grid-row {
& + & {
margin: 2px 0; /* Just for showcase */
}
}
</style>
<style lang="less" scoped docs>
.content {
background-color: #eee;
height: 100%;
line-height: 60px;
border-radius: 2px;
text-align: center;
}
</style>
<docs>
可以在 `GridContainer` 上使用 `columns`/`margin`/`gutter` 调整布局参数
</docs>

View File

@@ -0,0 +1,68 @@
<template>
<article>
<div
v-for="name in names"
:key="name"
class="item"
>
<div class="icon">
<veui-icon :name="name"/>
</div>
<div class="name">
{{ name }}
</div>
</div>
</article>
</template>
<script>
import { Icon } from 'veui'
import 'veui-theme-dls-icons'
export default {
components: {
'veui-icon': Icon
},
data () {
return {
names: Object.keys(Icon.icons).sort()
}
}
}
</script>
<style lang="less" scoped docs>
article {
overflow: hidden;
}
.item {
@grid-size: 128px;
float: left;
width: @grid-size;
height: calc(@grid-size + 3em);
text-align: center;
margin: 1em 2em;
.icon {
width: @grid-size;
height: @grid-size;
border: 1px solid transparent;
font-size: 1.5em;
line-height: @grid-size;
border-radius: 4px;
transition: border-color .2s;
&:hover {
border-color: #ccc;
}
}
.name {
margin-top: 0.6em;
color: #333;
font-size: 0.8em;
white-space: nowrap;
}
}
</style>

View File

@@ -0,0 +1,126 @@
<template>
<article>
<section>
<h4>Select + Input + Button</h4>
<veui-input-group>
<veui-select
:options="protocols"
style="width: 100px"
/>
<veui-input/>
<veui-button ui="primary">
Submit
</veui-button>
</veui-input-group>
</section>
<section>
<h4>Label + NumberInput + Button + <code>ui="s"</code></h4>
<veui-input-group ui="s">
<veui-label for="bid">
USD
</veui-label>
<veui-number-input
ref="bid"
v-model="bid"
style="width: 120px"
/>
<veui-button>Submit</veui-button>
</veui-input-group>
</section>
<section>
<h4>NumberInput + Span + NumberInput + <code>ui="xs"</code></h4>
<veui-input-group ui="xs">
<veui-number-input v-model="width"/>
<veui-span>×</veui-span>
<veui-number-input v-model="height"/>
</veui-input-group>
</section>
<section>
<h4>Autocomplete + ButtonGroup</h4>
<veui-input-group>
<veui-autocomplete :datasource="suggestions"/>
<veui-button-group
:items="ops"
ui="primary"
/>
</veui-input-group>
</section>
<section>
<h4>Select + SearchBox + <code>ui="l"</code></h4>
<veui-input-group ui="l">
<veui-select
:options="types"
:value="type"
style="width: 120px"
/>
<veui-search-box/>
</veui-input-group>
</section>
</article>
</template>
<script>
import {
InputGroup,
ButtonGroup,
Select,
Input,
NumberInput,
Button,
Autocomplete,
SearchBox,
Label,
Span
} from 'veui'
export default {
name: 'text-input',
components: {
'veui-input-group': InputGroup,
'veui-button-group': ButtonGroup,
'veui-input': Input,
'veui-select': Select,
'veui-number-input': NumberInput,
'veui-button': Button,
'veui-autocomplete': Autocomplete,
'veui-search-box': SearchBox,
'veui-label': Label,
'veui-span': Span
},
data () {
return {
protocols: [
{ label: 'https://', value: 'https' },
{ label: 'http://', value: 'http' }
],
bid: 1024,
width: 1024,
height: 768,
ops: [
{ label: 'Save', value: 'save' },
{ label: 'Submit', value: 'submit' }
],
types: [
{ label: 'By ID', value: 'id' },
{ label: 'By Name', value: 'name' }
],
type: 'id',
suggestions: [
{ value: 'Steve Rogers' },
{ value: 'Tony Stark' },
{ value: 'Thor' },
{ value: 'Hulk' },
{ value: 'Stephen Strange' },
{ value: 'Natasha Romanov' },
{ value: 'Loki' }
]
}
}
}
</script>
<style lang="less" scoped docs>
section {
margin-bottom: 20px;
}
</style>

View File

@@ -0,0 +1,61 @@
<template>
<article>
<section>
<veui-checkbox v-model="disabled">
Disabled
</veui-checkbox>
</section>
<section>
<p>
<veui-input
:disabled="disabled"
ui="l"
value="Large"
/>
</p>
<p>
<veui-input
:disabled="disabled"
value="Normal"
/>
</p>
<p>
<veui-input
:disabled="disabled"
ui="s"
value="Small"
/>
</p>
<p>
<veui-input
:disabled="disabled"
ui="xs"
value="Extra small"
/>
</p>
</section>
</article>
</template>
<script>
import { Input, Checkbox } from 'veui'
export default {
components: {
'veui-input': Input,
'veui-checkbox': Checkbox
},
data () {
return {
disabled: true
}
}
}
</script>
<style lang="less" scoped docs>
section,
p {
margin-bottom: 1em;
}
</style>

View File

@@ -0,0 +1,61 @@
<template>
<article>
<section>
<veui-checkbox v-model="readonly">
Read-only
</veui-checkbox>
</section>
<section>
<p>
<veui-input
:readonly="readonly"
ui="l"
value="Large"
/>
</p>
<p>
<veui-input
:readonly="readonly"
value="Normal"
/>
</p>
<p>
<veui-input
:readonly="readonly"
ui="s"
value="Small"
/>
</p>
<p>
<veui-input
:readonly="readonly"
ui="xs"
value="Extra small"
/>
</p>
</section>
</article>
</template>
<script>
import { Input, Checkbox } from 'veui'
export default {
components: {
'veui-input': Input,
'veui-checkbox': Checkbox
},
data () {
return {
readonly: true
}
}
}
</script>
<style lang="less" scoped docs>
section,
p {
margin-bottom: 1em;
}
</style>

View File

@@ -0,0 +1,39 @@
<template>
<article>
<p>
<veui-input
ui="l"
value="Large"
/>
</p>
<p><veui-input value="Normal"/></p>
<p>
<veui-input
ui="s"
value="Small"
/>
</p>
<p>
<veui-input
ui="xs"
value="Extra small"
/>
</p>
</article>
</template>
<script>
import { Input } from 'veui'
export default {
components: {
'veui-input': Input
}
}
</script>
<style lang="less" scoped docs>
p {
margin-bottom: 1em;
}
</style>

View File

@@ -0,0 +1,55 @@
<template>
<article>
<section>
<h4>Inline with Select</h4>
<veui-label>
Click me:
<veui-select
:options="protocols"
style="width: 100px"
/>
</veui-label>
</section>
<section>
<h4><code>for</code> + <code>ref</code> with Input</h4>
<veui-label for="origin">
Click me:
</veui-label>
<veui-input
ref="origin"
style="width: 200px"
/>
</section>
</article>
</template>
<script>
import { Label, Select, Input } from 'veui'
export default {
name: 'text-input',
components: {
'veui-label': Label,
'veui-select': Select,
'veui-input': Input
},
data () {
return {
protocols: [
{ label: 'https://', value: 'https' },
{ label: 'http://', value: 'http' }
]
}
}
}
</script>
<style lang="less" scoped docs>
section {
margin-bottom: 20px;
}
h4 {
margin-top: 0;
}
</style>

View File

@@ -0,0 +1,55 @@
<template>
<article>
<section>
<h4>Router link</h4>
<div>
<veui-link :to="{ name: 'components-icon' }">
Previous
</veui-link>
</div>
</section>
<section>
<h4>Native link (<code>ui="strong s"</code>)</h4>
<div>
<veui-link
ui="strong s"
native
to="./pagination"
>
Next
</veui-link>
</div>
</section>
<section>
<h4>External link</h4>
<div>
<veui-link
to="https://www.baidu.com/"
target="_blank"
>
Baidu
</veui-link>
</div>
</section>
</article>
</template>
<script>
import { Link } from 'veui'
export default {
components: {
'veui-link': Link
}
}
</script>
<style lang="less" scoped docs>
h4 {
margin-top: 0;
}
section:not(:last-child) {
margin-bottom: 40px;
}
</style>

View File

@@ -0,0 +1,34 @@
<template>
<article class="container">
<veui-loading loading>
Horizontal
</veui-loading>
<veui-loading
loading
ui="vertical"
>
Vertical
</veui-loading>
</article>
</template>
<script>
import { Loading } from 'veui'
export default {
components: {
'veui-loading': Loading
}
}
</script>
<style lang="less" scoped docs>
.container {
display: flex;
align-items: flex-end;
.veui-loading {
margin-left: 1em;
}
}
</style>

View File

@@ -0,0 +1,90 @@
<template>
<article>
<div class="container">
<veui-loading
loading
ui="s"
>
s
</veui-loading>
<veui-loading
loading
ui="m"
>
m
</veui-loading>
<veui-loading
loading
ui="l"
>
l
</veui-loading>
</div>
<div class="container">
<veui-loading
loading
ui="strong s"
>
s
</veui-loading>
<veui-loading
loading
ui="strong m"
>
m
</veui-loading>
<veui-loading
loading
ui="strong l"
>
l
</veui-loading>
</div>
<div class="container">
<veui-loading
loading
class="reverse"
ui="reverse s"
>
s
</veui-loading>
<veui-loading
loading
class="reverse"
ui="reverse m"
>
m
</veui-loading>
<veui-loading
loading
class="reverse"
ui="reverse l"
>
l
</veui-loading>
</div>
</article>
</template>
<script>
import { Loading } from 'veui'
export default {
components: {
'veui-loading': Loading
}
}
</script>
<style lang="less" scoped docs-loading>
.reverse {
background: #ccc;
padding: 8px;
}
.veui-loading {
margin-left: 1em;
}
.container {
margin-bottom: 2em;
}
</style>

View File

@@ -0,0 +1,68 @@
<template>
<article>
<div>
Custom icon-star:
<veui-loading
loading
ui="strong"
>
<template #spinner>
<veui-icon
spin
name="star"
/>
</template>
loading...
</veui-loading>
</div>
<div>
Custom icon-sun:
<veui-loading loading>
<template #spinner>
<veui-icon
spin
name="sun"
/>
</template>
loading...
</veui-loading>
</div>
<div>
Custom icon-umbrella:
<veui-loading
loading
ui="reverse"
class="reverse"
>
<template #spinner>
<veui-icon
spin
name="umbrella"
/>
</template>
loading...
</veui-loading>
</div>
</article>
</template>
<script>
import { Icon, Loading } from 'veui'
import 'vue-awesome/icons/sun'
import 'vue-awesome/icons/star'
import 'vue-awesome/icons/umbrella'
export default {
components: {
'veui-icon': Icon,
'veui-loading': Loading
}
}
</script>
<style lang="less" scoped docs>
.reverse {
background: #ccc;
padding: 8px;
}
</style>

View File

@@ -0,0 +1,43 @@
<template>
<article>
<veui-loading
loading
ui="normal"
>
Normal
</veui-loading>
<veui-loading
loading
ui="strong"
>
Strong
</veui-loading>
<veui-loading
loading
ui="reverse"
class="reverse"
>
Reverse
</veui-loading>
</article>
</template>
<script>
import { Loading } from 'veui'
export default {
components: {
'veui-loading': Loading
}
}
</script>
<style lang="less" scoped docs>
.veui-loading {
margin-left: 1em;
}
.reverse {
background: #ccc;
padding: 8px;
}
</style>

View File

@@ -0,0 +1,97 @@
<template>
<article>
<section>
<veui-menu
:items="items"
collapsible
/>
</section>
</article>
</template>
<script>
import { Menu } 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',
components: {
'veui-menu': Menu
},
data () {
let items = [
{
label: 'Group One',
name: 'group-one',
icon: 'calendar',
children: [
{
label: 'Sub One',
name: 'sub-one',
children: [
{
label: 'Input',
to: '/components/input'
}
]
},
{
label: 'Loading',
name: 'Loading',
to: '/components/loading',
children: [
{
label: 'Switch',
to: '/components/switch'
}
]
}
]
},
{
label: 'Button',
name: 'Button',
to: '/components/button',
icon: 'bullseye',
children: [
{
label: 'Disabled',
name: 'Disabled',
disabled: true,
children: [
{
label: 'Link',
name: 'Link',
to: '/components/link'
}
]
}
]
},
{
label: 'Navigation Three',
name: 'nav-three',
icon: 'eye',
disabled: true
},
{
label: 'Navigation Four',
name: 'nav-four',
icon: 'clock',
children: [
{
label: 'Progress',
to: '/components/progress'
}
]
}
]
return {
items
}
}
}
</script>

View File

@@ -0,0 +1,86 @@
<template>
<article>
<section>
<veui-menu :items="items"/>
</section>
</article>
</template>
<script>
import { Menu } from 'veui'
export default {
name: 'veui-menu-demo',
components: {
'veui-menu': Menu
},
data () {
let items = [
{
label: 'Group One',
name: 'group-one',
children: [
{
label: 'Sub One',
name: 'sub-one',
children: [
{
label: 'Input',
to: '/components/input'
}
]
},
{
label: 'Loading',
name: 'Loading',
to: '/components/loading',
children: [
{
label: 'Switch',
to: '/components/switch'
}
]
}
]
},
{
label: 'Button',
name: 'Button',
to: '/components/button',
children: [
{
label: 'Disabled',
name: 'Disabled',
disabled: true,
children: [
{
label: 'Link',
name: 'Link',
to: '/components/link'
}
]
}
]
},
{
label: 'Navigation Three',
name: 'nav-three',
disabled: true
},
{
label: 'Navigation Four',
name: 'nav-four',
children: [
{
label: 'Progress',
to: '/components/progress'
}
]
}
]
return {
items
}
}
}
</script>

View File

@@ -0,0 +1,95 @@
<template>
<article>
<section>
<veui-menu
:items="items"
collapsible
>
<template #icon>
<veui-icon name="calendar"/>
</template>
</veui-menu>
</section>
</article>
</template>
<script>
import { Menu, Icon } from 'veui'
import 'veui-theme-dls-icons/calendar'
export default {
name: 'veui-menu-demo',
components: {
'veui-menu': Menu,
'veui-icon': Icon
},
data () {
let items = [
{
label: 'Group One',
name: 'group-one',
children: [
{
label: 'Sub One',
name: 'sub-one',
children: [
{
label: 'Input',
to: '/components/input'
}
]
},
{
label: 'Loading',
name: 'Loading',
to: '/components/loading',
children: [
{
label: 'Switch',
to: '/switch'
}
]
}
]
},
{
label: 'Button',
name: 'Button',
to: '/components/button',
children: [
{
label: 'Disabled',
name: 'Disabled',
disabled: true,
children: [
{
label: 'Link',
name: 'Link',
to: '/link'
}
]
}
]
},
{
label: 'Navigation Three',
name: 'nav-three',
disabled: true
},
{
label: 'Navigation Four',
name: 'nav-four',
children: [
{
label: 'Progress',
to: '/components/progress'
}
]
}
]
return {
items
}
}
}
</script>

View File

@@ -0,0 +1,55 @@
<template>
<article>
<section>
<veui-checkbox v-model="disabled">
禁用
</veui-checkbox>
</section>
<section>
<p>
<veui-number-input
v-model="value"
:disabled="disabled"
/>
</p>
<p>
<veui-number-input
v-model="value"
:disabled="disabled"
ui="s"
/>
</p>
<p>
<veui-number-input
v-model="value"
:disabled="disabled"
ui="xs"
/>
</p>
</section>
</article>
</template>
<script>
import { NumberInput, Checkbox } from 'veui'
export default {
components: {
'veui-number-input': NumberInput,
'veui-checkbox': Checkbox
},
data () {
return {
disabled: true,
value: 0
}
}
}
</script>
<style lang="less" scoped docs>
section,
p {
margin-bottom: 1em;
}
</style>

View File

@@ -0,0 +1,55 @@
<template>
<article>
<section>
<veui-checkbox v-model="readonly">
只读
</veui-checkbox>
</section>
<section>
<p>
<veui-number-input
v-model="value"
:readonly="readonly"
/>
</p>
<p>
<veui-number-input
v-model="value"
:readonly="readonly"
ui="s"
/>
</p>
<p>
<veui-number-input
v-model="value"
:readonly="readonly"
ui="xs"
/>
</p>
</section>
</article>
</template>
<script>
import { NumberInput, Checkbox } from 'veui'
export default {
components: {
'veui-number-input': NumberInput,
'veui-checkbox': Checkbox
},
data () {
return {
readonly: true,
value: 0
}
}
}
</script>
<style lang="less" scoped docs>
section,
p {
margin-bottom: 1em;
}
</style>

View File

@@ -0,0 +1,40 @@
<template>
<article>
<p>
<veui-number-input v-model="value"/>
</p>
<p>
<veui-number-input
v-model="value"
ui="s"
/>
</p>
<p>
<veui-number-input
v-model="value"
ui="xs"
/>
</p>
</article>
</template>
<script>
import { NumberInput } from 'veui'
export default {
components: {
'veui-number-input': NumberInput
},
data () {
return {
value: 0
}
}
}
</script>
<style lang="less" scoped docs>
p {
margin-bottom: 1em;
}
</style>

View File

@@ -0,0 +1,67 @@
<template>
<article>
<veui-button
ref="toggle"
@click="open = !open"
>
Toggle
</veui-button>
<veui-overlay
:open.sync="open"
overlay-class="centered-overlay"
>
<div v-outside:toggle="hide">
Centered
</div>
</veui-overlay>
</article>
</template>
<script>
import { Overlay, Button } from 'veui'
import outside from 'veui/directives/outside'
export default {
components: {
'veui-overlay': Overlay,
'veui-button': Button
},
directives: { outside },
data () {
return {
open: false
}
},
methods: {
hide () {
this.open = false
}
}
}
</script>
<style lang="less">
.centered-overlay {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 200px;
height: 100px;
}
</style>
<style lang="less" docs>
@import "~veui-theme-dls/lib.less";
.centered-overlay {
line-height: 100px;
text-align: center;
border: 1px solid @veui-gray-color-5;
background-color: #fff;
}
</style>
<docs>
使用常见的 CSS 定位方法可以自定义
</docs>

View File

@@ -0,0 +1,45 @@
<template>
<article>
<veui-button
ref="toggle"
@click="open = !open"
>
Toggle
</veui-button>
<veui-overlay
target="toggle"
position="top-start"
:open.sync="open"
overlay-class="relative-overlay"
>
<div v-outside:toggle="hide">
Relatively Positioned
</div>
</veui-overlay>
</article>
</template>
<script>
import { Overlay, Button } from 'veui'
import outside from 'veui/directives/outside'
export default {
components: {
'veui-overlay': Overlay,
'veui-button': Button
},
directives: { outside },
data () {
return {
open: false
}
},
methods: {
hide () {
this.open = false
}
}
}
</script>
<style lang="less" src="./relative.less" docs></style>

View File

@@ -0,0 +1,18 @@
@import "~veui-theme-dls/lib.less";
.veui-overlay {
display: none;
}
.relative-overlay {
width: 200px;
height: 100px;
line-height: 100px;
text-align: center;
border: 1px solid @veui-gray-color-5;
background-color: #fff;
.veui-button {
margin-left: 10px;
}
}

View File

@@ -0,0 +1,100 @@
<template>
<article>
<veui-button
ref="a"
@click="aOpen = !aOpen"
>
Toggle A
</veui-button>
<veui-overlay
target="a"
position="top-start"
:open.sync="aOpen"
overlay-class="relative-overlay"
>
A
</veui-overlay>
<veui-button
ref="b"
@click="bOpen = !bOpen"
>
Toggle B
</veui-button>
<veui-overlay
target="b"
position="top-start"
:open.sync="bOpen"
overlay-class="relative-overlay"
>
B
<veui-button
ref="b-a"
ui="s"
@click="bAOpen = !bAOpen"
>
Toggle B-A
</veui-button>
<veui-overlay
target="b-a"
position="top-start"
:open.sync="bAOpen"
overlay-class="relative-overlay"
>
B-A
</veui-overlay>
</veui-overlay>
<veui-button
ref="c"
@click="cOpen = !cOpen"
>
Toggle C
</veui-button>
<veui-overlay
target="c"
position="top-start"
:open.sync="cOpen"
overlay-class="relative-overlay"
>
C
</veui-overlay>
<veui-button
ui="xs"
@click="aOpen = bOpen = cOpen = bAOpen = false"
>
Hide all
</veui-button>
</article>
</template>
<script>
import { Overlay, Button } from 'veui'
export default {
components: {
'veui-overlay': Overlay,
'veui-button': Button
},
data () {
return {
aOpen: false,
bOpen: false,
cOpen: false,
bAOpen: false
}
}
}
</script>
<style lang="less" docs scoped>
.veui-overlay {
display: none;
}
.veui-button {
margin-right: 10px;
}
</style>
<style lang="less" src="./relative.less" docs></style>

View File

@@ -0,0 +1,84 @@
<template>
<article>
<veui-button
ref="a"
@click="aOpen = !aOpen"
>
Toggle A
</veui-button>
<veui-overlay
target="a"
position="top-start"
:open.sync="aOpen"
overlay-class="relative-overlay"
>
A
</veui-overlay>
<veui-button
ref="b"
@click="bOpen = !bOpen"
>
Toggle B
</veui-button>
<veui-overlay
target="b"
position="top-start"
:open.sync="bOpen"
overlay-class="relative-overlay"
>
B
</veui-overlay>
<veui-button
ref="c"
@click="cOpen = !cOpen"
>
Toggle C
</veui-button>
<veui-overlay
target="c"
position="top-start"
:open.sync="cOpen"
overlay-class="relative-overlay"
>
C
</veui-overlay>
<veui-button
ui="xs"
@click="aOpen = bOpen = cOpen = false"
>
Hide all
</veui-button>
</article>
</template>
<script>
import { Overlay, Button } from 'veui'
export default {
components: {
'veui-overlay': Overlay,
'veui-button': Button
},
data () {
return {
aOpen: false,
bOpen: false,
cOpen: false
}
}
}
</script>
<style lang="less" docs scoped>
.veui-overlay {
display: none;
}
.veui-button {
margin-right: 10px;
}
</style>
<style lang="less" src="./relative.less" docs></style>

View File

@@ -0,0 +1,69 @@
<template>
<article>
<veui-button
ref="parent"
@click="parentOpen = !parentOpen"
>
Toggle
</veui-button>
<veui-overlay
target="parent"
position="top-start"
:open.sync="parentOpen"
overlay-class="relative-overlay"
>
<veui-button
ref="child"
@click="childOpen = !childOpen"
>
Toggle
</veui-button>
<veui-overlay
target="child"
position="top-start"
:open.sync="childOpen"
overlay-class="relative-overlay"
>
Child Overlay
</veui-overlay>
</veui-overlay>
<veui-button
ui="xs"
@click="parentOpen = childOpen = false"
>
Hide all
</veui-button>
</article>
</template>
<script>
import { Overlay, Button } from 'veui'
export default {
components: {
'veui-overlay': Overlay,
'veui-button': Button
},
data () {
return {
parentOpen: false,
childOpen: false
}
},
watch: {
parentOpen (val) {
if (!val) {
this.childOpen = false
}
}
}
}
</script>
<style lang="less" docs scoped>
.veui-button {
margin-right: 10px;
}
</style>
<style lang="less" src="./relative.less" docs></style>

View File

@@ -0,0 +1,37 @@
<template>
<article>
<veui-pagination
:page="page"
:total="total"
:to="to"
goto
/>
</article>
</template>
<script>
import { Pagination } from 'veui'
export default {
components: {
'veui-pagination': Pagination
},
data () {
return {
to: './pagination?page=:page',
total: 10101
}
},
computed: {
page () {
return Number(this.$route.query.page) || 1
}
}
}
</script>
<style lang="less" scoped docs>
article {
text-align: right;
}
</style>

View File

@@ -0,0 +1,52 @@
<template>
<article>
<veui-pagination
:page="page"
:total="total"
:to="to"
/>
<veui-pagination
:page="page"
:total="total"
:to="to"
ui="s"
/>
<veui-pagination
:page="page"
:total="total"
:to="to"
ui="xs"
/>
</article>
</template>
<script>
import { Pagination } from 'veui'
export default {
components: {
'veui-pagination': Pagination
},
data () {
return {
to: './pagination?page=:page',
total: 10101
}
},
computed: {
page () {
return Number(this.$route.query.page) || 1
}
}
}
</script>
<style lang="less" scoped docs>
article {
text-align: right;
}
.veui-pagination {
margin: 1.2em 0;
}
</style>

View File

@@ -0,0 +1,224 @@
<template>
<article>
<veui-grid-container :columns="5">
<veui-grid-row>
<veui-grid-column
:span="1"
:offset="1"
>
<span
ref="ts"
class="target"
>top-start</span>
<veui-popover
target="ts"
position="top-start"
>
Hello.
</veui-popover>
</veui-grid-column>
<veui-grid-column :span="1">
<span
ref="t"
class="target"
>top</span>
<veui-popover
target="t"
position="top"
>
Hello.
</veui-popover>
</veui-grid-column>
<veui-grid-column :span="1">
<span
ref="te"
class="target"
>top-end</span>
<veui-popover
target="te"
position="top-end"
>
Hello.
</veui-popover>
</veui-grid-column>
</veui-grid-row>
<veui-grid-row>
<veui-grid-column :span="1">
<span
ref="ls"
class="target"
>left-start</span>
<veui-popover
target="ls"
position="left-start"
>
Hello.
</veui-popover>
</veui-grid-column>
<veui-grid-column
:span="1"
:offset="3"
>
<span
ref="rs"
class="target"
>right-start</span>
<veui-popover
target="rs"
position="right-start"
>
Hello.
</veui-popover>
</veui-grid-column>
</veui-grid-row>
<veui-grid-row>
<veui-grid-column :span="1">
<span
ref="l"
class="target"
>left</span>
<veui-popover
target="l"
position="left"
>
Hello.
</veui-popover>
</veui-grid-column>
<veui-grid-column
:span="1"
:offset="3"
>
<span
ref="r"
class="target"
>right</span>
<veui-popover
target="r"
position="right"
>
Hello.
</veui-popover>
</veui-grid-column>
</veui-grid-row>
<veui-grid-row>
<veui-grid-column :span="1">
<span
ref="le"
class="target"
>left-end</span>
<veui-popover
target="le"
position="left-end"
>
Hello.
</veui-popover>
</veui-grid-column>
<veui-grid-column
:span="1"
:offset="3"
>
<span
ref="re"
class="target"
>right-end</span>
<veui-popover
target="re"
position="right-end"
>
Hello.
</veui-popover>
</veui-grid-column>
</veui-grid-row>
<veui-grid-row>
<veui-grid-column
:span="1"
:offset="1"
>
<span
ref="bs"
class="target"
>bottom-start</span>
<veui-popover
target="bs"
position="bottom-start"
>
Hello.
</veui-popover>
</veui-grid-column>
<veui-grid-column :span="1">
<span
ref="b"
class="target"
>bottom</span>
<veui-popover
target="b"
position="bottom"
>
Hello.
</veui-popover>
</veui-grid-column>
<veui-grid-column :span="1">
<span
ref="be"
class="target"
>bottom-end</span>
<veui-popover
target="be"
position="bottom-end"
>
Hello.
</veui-popover>
</veui-grid-column>
</veui-grid-row>
</veui-grid-container>
</article>
</template>
<script>
import { GridContainer, GridRow, GridColumn, Popover } from 'veui'
export default {
components: {
'veui-grid-container': GridContainer,
'veui-grid-row': GridRow,
'veui-grid-column': GridColumn,
'veui-popover': Popover
},
data () {
return {
ui: null
}
}
}
</script>
<style lang="less" scoped docs>
.veui-grid-container {
width: 80%;
min-width: 600px;
}
.veui-grid-row {
margin-bottom: 20px;
}
.veui-grid-column {
text-align: center;
vertical-align: middle;
line-height: 2;
}
.target {
display: inline-block;
width: 100%;
padding: 0.5em 0;
border: 1px solid #999;
border-radius: 2px;
transition: background-color 0.3s;
cursor: pointer;
&:hover {
background-color: #f7f7f7;
}
}
</style>

View File

@@ -0,0 +1,78 @@
<template>
<article>
<section>
<code>trigger="{{ trigger }}"</code>
</section>
<section>
Open trigger: <veui-select
v-model="open"
:options="triggers"
/>
</section>
<section>
Close trigger: <veui-select
v-model="close"
:options="triggers"
/>
</section>
<section>
<span
ref="text"
tabindex="0"
>Trigger <b><code>{{ open }}</code></b> over here.</span>
<veui-popover
target="text"
:trigger="trigger"
>
This is a popover.
</veui-popover>
</section>
</article>
</template>
<script>
import { Popover, Select } from 'veui'
export default {
components: {
'veui-popover': Popover,
'veui-select': Select
},
data () {
return {
open: 'hover',
close: 'hover',
triggers: [
{ label: 'hover', value: 'hover' },
{ label: 'click', value: 'click' },
{ label: 'mousedown', value: 'mousedown' },
{ label: 'mouseup', value: 'mouseup' },
{ label: 'focus', value: 'focus' }
]
}
},
computed: {
trigger () {
if (this.open === this.close) {
return this.open
}
return `${this.open}-${this.close}`
}
}
}
</script>
<style lang="less" scoped docs>
section + section {
margin-top: 20px;
}
span {
outline: none;
&.focus-visible {
outline: 2px solid #ccc;
outline-offset: 3px;
}
}
</style>

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