test/element-plus
1
0
Fork 0
mirror of https://gitee.com/element-plus/element-plus.git synced 2024-11-30 02:08:12 +08:00
Code Issues Actions 4 Packages Projects Releases Wiki Activity

chore(core): deprecate storybook (#343)

Browse Source
This commit is contained in:
jeremywu 2020-09-23 20:18:11 +08:00 committed by GitHub
parent fc308b7b4c
commit 7999433dd4
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
97 changed files with 127 additions and 6597 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

69
.storybook/custom-presets.js
View File

@ -1,69 +0,0 @@
var VueLoaderPlugin = require('vue-loader/dist/plugin');
const path = require('path')
function webpack(config) {
return {
...config,
plugins: [...config.plugins, new VueLoaderPlugin.default()],
module: {
...config.module,
rules: [
...config.module.rules,
{
test: /\.vue$/,
loader: require.resolve('vue-loader'),
options: {},
},
{
test: /\.(sass|scss)$/,
use: [
'style-loader',
'css-loader',
{
loader: 'sass-loader',
options: {
implementation: require('sass'),
},
},
],
include: path.resolve(__dirname, '../'),
},
{
test: /\.stories\.ts$/,
use: [
{
loader: require.resolve('./export-loader')
},
{
loader: require.resolve('ts-loader'),
options: {
transpileOnly: true,
},
},
]
},
{
test: /\.(ts|tsx)$/,
use: [
{
loader: require.resolve('ts-loader'),
options: {
transpileOnly: true,
},
},
],
},
],
},
resolve: {
...config.resolve,
extensions: [...config.resolve.extensions, '.vue', '.ts'],
alias: {
...config.resolve.alias,
vue$: require.resolve('vue/dist/vue.esm-bundler.js'),
},
},
};
}
exports.webpack = webpack;

3
.storybook/demo.css
View File

@ -1,3 +0,0 @@
body {
font-family: Helvetica Neue,Helvetica,PingFang SC,Hiragino Sans GB,Microsoft YaHei,SimSun,sans-serif;
}

10
.storybook/export-loader.js
View File

@ -1,10 +0,0 @@
module.exports = function (content, map, meta) {
content = content.replace(
/^export\s*{\s*default as (.+?)}(.+)/mg,`
import _$1 $2
export const $1 = () => _$1
`.trim())
this.callback(null, content, map, meta)
return
}

7
.storybook/main.js
View File

@ -1,7 +0,0 @@
const path = require('path');
module.exports = {
stories: ['../packages/**/doc/*.stories.[tj]s'],
presets: [path.resolve(__dirname, './custom-presets')],
addons: ['@storybook/addon-storysource'],
};

41
.storybook/preview.js
View File

@ -1,41 +0,0 @@
import { addDecorator } from '@storybook/html'
import { createApp } from 'vue'
// import '../src/style/element-ui@2.13.2.css'
import '../packages/theme-chalk/src/index.scss'
import ElementUI from '../packages/element-plus'
import './demo.css'
/**
* Wraps a story into a Vue Element
* @param {JSX.Element} template - Story templates
* @param {VueElement}
*/
const Wrapper = (template) => {
return {
data() {
return {}
},
template,
}
}
/**
* Custom Addon for previewing ElementPlus component in Vue3
* Due to lacking of support for Vue3, the rendering method has to be made by ourself
* This method takes a template string as parameter returns a HTMLElement which will be inserted to the iframe root node by `@StoryBook`
* @param {Story} content
* @return {HTMLElement}
*/
function CustomDecorator(content, context) {
const templateOrComponent = content()
const app = typeof templateOrComponent === 'string'
? createApp(Wrapper(templateOrComponent))
: createApp(templateOrComponent)
ElementUI.install(app)
const entry = document.createElement('div')
entry.className = 'element-plus-previewer'
app.mount(entry)
return entry
}
addDecorator(CustomDecorator);

6
package.json
View File

@ -6,7 +6,6 @@
"cz": "npx git-cz",
"test": "jest",
"gen": "bash ./scripts/gc.sh",
"storybook": "start-storybook",
"bootstrap": "yarn && npx lerna bootstrap",
"build": "yarn bootstrap && yarn build:lib && yarn build:theme",
"build:lib": "rimraf lib && webpack --config ./build/webpack.config.js",
@ -23,8 +22,6 @@
"@babel/core": "^7.11.4",
"@commitlint/cli": "^9.1.2",
"@commitlint/config-conventional": "^9.1.2",
"@storybook/addon-storysource": "^6.0.20",
"@storybook/html": "^6.0.20",
"@swc-node/jest": "^0.3.4",
"@types/jest": "^26.0.10",
"@types/lodash": "^4.14.161",
@ -36,6 +33,7 @@
"algoliasearch": "^4.4.0",
"babel-loader": "^8.1.0",
"babel-preset-vue": "^2.0.2",
"cp-cli": "^2.0.0",
"cross-env": "^7.0.2",
"css-loader": "^4.2.2",
"cz-conventional-changelog": "^3.3.0",
@ -45,6 +43,7 @@
"highlight.js": "^10.1.2",
"html-webpack-plugin": "^4.3.0",
"husky": "^4.2.5",
"import-from": "^3.0.0",
"jest": "^26.4.2",
"lerna": "^3.22.1",
"lint-staged": "^10.2.13",
@ -92,7 +91,6 @@
"license": "MIT",
"dependencies": {
"@popperjs/core": "^2.4.4",
"cp-cli": "^2.0.0",
"dayjs": "1.x",
"lodash": "^4.17.20",
"mitt": "^2.1.0"

51
packages/alert/doc/basic.vue
View File

@ -1,51 +0,0 @@
<template>
<div>
<div>
<el-alert
title="success alert"
type="success"
/>
<el-alert
title="info alert"
type="info"
/>
<el-alert
title="warning alert"
type="warning"
/>
<el-alert
title="error alert"
type="error"
/>
</div>
<div>
<el-alert
title="success alert"
type="success"
show-icon
/>
<el-alert
title="info alert"
type="info"
effect="dark"
/>
<el-alert
title="warning alert"
type="warning"
:closable="false"
/>
<el-alert
title="error alert"
type="error"
center
/>
</div>
</div>
</template>
<style scoped>
.el-alert {
margin: 6px;
}
</style>

5
packages/alert/doc/index.stories.ts
View File

@ -1,5 +0,0 @@
export default {
title: 'Alert',
}
export { default as BasicUsage } from './basic.vue'

57
packages/avatar/doc/basic.vue
View File

@ -1,57 +0,0 @@
<template>
<el-row class="demo-avatar demo-basic">
<el-col :span="12">
<div class="sub-title">circle</div>
<div class="demo-basic--circle">
<div class="block"><el-avatar :size="50" :src="circleUrl" /></div>
<div v-for="size in sizeList" :key="size" class="block">
<el-avatar :size="size" :src="circleUrl" />
</div>
</div>
</el-col>
<el-col :span="12">
<div class="sub-title">square</div>
<div class="demo-basic--circle">
<div class="block"><el-avatar shape="square" :size="50" :src="squareUrl" /></div>
<div v-for="size in sizeList" :key="size" class="block">
<el-avatar shape="square" :size="size" :src="squareUrl" />
</div>
</div>
</el-col>
</el-row>
</template>
<script lang="ts">
export default {
data () {
return {
circleUrl: 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png',
squareUrl: 'https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png',
sizeList: ['large', 'medium', 'small'],
}
},
}
</script>
<style scoped>
.demo-avatar .sub-title {
margin-bottom: 10px;
font-size: 14px;
color: #8492a6;
text-align: center;
}
.demo-avatar.demo-basic .demo-basic--circle,
.demo-avatar.demo-basic .demo-basic--square {
display: flex;
justify-content: space-between;
align-items: center;
}
.demo-avatar.demo-basic .demo-basic--circle .block:not(:last-child),
.demo-avatar.demo-basic .demo-basic--square .block:not(:last-child) {
flex: 1;
border-right: 1px solid rgba(224,230,237,.5);
text-align: center;
}
</style>

42
packages/avatar/doc/fit-container.vue
View File

@ -1,42 +0,0 @@
<template>
<div class="demo-fit">
<div v-for="fit in fits" :key="fit" class="block">
<span class="title">{{ fit }}</span>
<el-avatar
shape="square"
:size="100"
:fit="fit"
:src="url"
/>
</div>
</div>
</template>
<script lang="ts">
export default {
data() {
return {
fits: ['fill', 'contain', 'cover', 'none', 'scale-down'],
url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
}
},
}
</script>
<style>
.demo-fit {
display:flex;
text-align:center;
justify-content:space-between
}
.demo-fit .block {
flex:auto;
display:flex;
flex-direction:column;
flex-grow:0
}
.demo-fit .title {
margin-bottom:10px;
font-size:14px;
color:#8492a6
}
</style>

27
packages/avatar/doc/index.stories.ts
View File

@ -1,27 +0,0 @@
export default {
title: 'Avatar',
}
export { default as BasicUsage } from './basic.vue'
export { default as FitAvatarContainer } from './fit-container.vue'
export const differentAvatarTypes = () => `
<div class="demo-type">
<div>
<el-avatar icon="el-icon-user-solid"></el-avatar>
</div>
<div>
<el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar>
</div>
<div>
<el-avatar> user </el-avatar>
</div>
</div>
`
export const fallbackWhenImageLoadsError = () => `
<div class="demo-type">
<el-avatar :size="60" src="https://empty">
<img src="https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png"/>
</el-avatar>
</div>
`

40
packages/backtop/doc/basic.vue
View File

@ -1,40 +0,0 @@
<template>
<div v-if="visible" class="target" style="height:400px; overflow-y: auto">
<div style="height: 1000px; width: 100%">
<el-backtop target=".target">
<div
style="{
height: 100%;
width: 100%;
background-color: #f2f5f6;
box-shadow: 0 0 6px rgba(0,0,0, .12);
text-align: center;
line-height: 40px;
color: #1989fa;
}"
>
UP
</div>
</el-backtop>
<el-backtop target=".target" :bottom="100" />
</div>
</div>
</template>
<script>
import { onMounted, defineComponent, ref } from 'vue'
export default defineComponent({
setup() {
const visible = ref(false)
onMounted(() => {
visible.value = true
})
return {
visible,
}
},
})
</script>

5
packages/backtop/doc/index.stories.ts
View File

@ -1,5 +0,0 @@
export { default as BasicUsage } from './basic.vue'
export default {
title: 'Backtop',
}

21
packages/badge/doc/basic.vue
View File

@ -1,21 +0,0 @@
<template>
<el-badge :value="12" class="item">
<el-button size="small">comments</el-button>
</el-badge>
<el-badge :value="3" class="item">
<el-button size="small">replies</el-button>
</el-badge>
<el-badge :value="1" class="item" type="primary">
<el-button size="small">comments</el-button>
</el-badge>
<el-badge :value="2" class="item" type="warning">
<el-button size="small">replies</el-button>
</el-badge>
</template>
<style>
.item {
margin-top: 10px;
margin-right: 40px;
}
</style>

5
packages/badge/doc/index.stories.ts
View File

@ -1,5 +0,0 @@
export { default as BasicUsage } from './basic.vue'
export default {
title: 'Badge',
}

8
packages/breadcrumb/doc/basic.vue
View File

@ -1,8 +0,0 @@
<template>
<el-breadcrumb separator="/">
<el-breadcrumb-item to="/">First</el-breadcrumb-item>
<el-breadcrumb-item><a href="/">Second</a></el-breadcrumb-item>
<el-breadcrumb-item>Third</el-breadcrumb-item>
<el-breadcrumb-item>Forth</el-breadcrumb-item>
</el-breadcrumb>
</template>

5
packages/breadcrumb/doc/index.stories.ts
View File

@ -1,5 +0,0 @@
export { default as BasicUsage } from './basic.vue'
export default {
title: 'Breadcrumb',
}

10
packages/button/doc/index.stories.ts
View File

@ -1,10 +0,0 @@
export default {
title: 'Button',
}
export const NormalButton = (): string => '<el-button>With Text</el-button>'
export const ButtonTwo = (): string => '<el-button>button two</el-button>'
export const ButtonGroup = (): string => `<el-button-group>
<el-button type="primary" icon="el-icon-arrow-left">Left</el-button>
<el-button type="primary">Right<i class="el-icon-arrow-right el-icon--right"></i></el-button>
</el-button-group>`

19
packages/card/doc/complex.vue
View File

@ -1,19 +0,0 @@
<template>
<el-card class="box-card">
<template #header class="clearfix">
<span>Card name</span>
<el-button style="float: right; padding: 3px 0" type="text" @click="alert">Click Me</el-button>
</template>
<div v-for="o in 4" :key="o" class="text item">{{ 'List Content ' + o }}</div>
</el-card>
</template>
<script lang="ts">
export default {
methods: {
alert(): void {
alert('Why do you click me?')
},
},
}
</script>

7
packages/card/doc/index.stories.ts
View File

@ -1,7 +0,0 @@
export default {
title: 'Card',
}
export const BasicCard = () :string => '<el-card header="I am the header">basic card</el-card>'
export const MinimalCard = (): string => '<el-card>Minimal card with no header</el-card>'
export { default as ComplexCard } from './complex.vue'

25
packages/carousel/doc/carousel-card.vue
View File

@ -1,25 +0,0 @@
<template>
<el-carousel :interval="4000" type="card" height="200px">
<el-carousel-item v-for="item in 6" :key="item">
<h3 class="medium">{{ item }}</h3>
</el-carousel-item>
</el-carousel>
</template>
<script lang="ts"></script>
<style>
.el-carousel__item h3 {
color: #475669;
font-size: 14px;
opacity: 0.75;
line-height: 200px;
margin: 0;
}
.el-carousel__item:nth-child(2n) {
background-color: #99a9bf;
}
.el-carousel__item:nth-child(2n + 1) {
background-color: #d3dce6;
}
</style>

25
packages/carousel/doc/carousel-vertical.vue
View File

@ -1,25 +0,0 @@
<template>
<el-carousel height="200px" direction="vertical" :autoplay="false">
<el-carousel-item v-for="item in 3" :key="item">
<h3 class="medium">{{ item }}</h3>
</el-carousel-item>
</el-carousel>
</template>
<style>
.el-carousel__item h3 {
color: #475669;
font-size: 14px;
opacity: 0.75;
line-height: 200px;
margin: 0;
}
.el-carousel__item:nth-child(2n) {
background-color: #99a9bf;
}
.el-carousel__item:nth-child(2n + 1) {
background-color: #d3dce6;
}
</style>

40
packages/carousel/doc/carousel.vue
View File

@ -1,40 +0,0 @@
<template>
<div class="carousel">
<div class="block">
<span class="demonstration">默认 Hover 指示器触发</span>
<el-carousel height="150px">
<el-carousel-item v-for="item in 4" :key="item">
<h3 class="small">{{ item }}</h3>
</el-carousel-item>
</el-carousel>
</div>
</div>
</template>
<script lang="ts">
</script>
<style>
.el-carousel__container {
text-align: center;
}
.demonstration {
display: block;
color: #8492a6;
font-size: 14px;
margin-bottom: 20px;
}
.el-carousel__item h3 {
color: #475669;
font-size: 14px;
opacity: 0.75;
line-height: 150px;
margin: 0;
}
.el-carousel__item:nth-child(2n) {
background-color: #99a9bf;
}
.el-carousel__item:nth-child(2n + 1) {
background-color: #d3dce6;
}
</style>

7
packages/carousel/doc/index.stories.ts
View File

@ -1,7 +0,0 @@
export { default as BasicUsage } from './carousel.vue'
export { default as CardUsage } from './carousel-card.vue'
export { default as VerticalUsage } from './carousel-vertical.vue'
export default {
title: 'Carousel',
}

40
packages/checkbox/doc/basic.vue
View File

@ -1,40 +0,0 @@
<template>
<div class="block">
<el-checkbox v-model="checked" @change="onChange">{{ checked }}</el-checkbox>
<el-checkbox v-model="checked1" disabled>{{ checked1 }}</el-checkbox>
<el-checkbox v-model="checked2" disabled>{{ checked2 }}</el-checkbox>
<el-checkbox v-model="checked1" label="A" border />
<el-checkbox v-model="checked2" border />
<el-checkbox v-model="checked4" true-label="a" :false-label="3" />
{{ checked4 }}
<el-checkbox-button v-model="checkbox" label="a" />
<el-checkbox-group v-model="checkList">
<el-checkbox label="A" />
<el-checkbox label="B" />
<el-checkbox label="C" />
<el-checkbox label="D" disabled />
<el-checkbox label="Ha" disabled />
</el-checkbox-group>
{{ checkList }}
</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
data() {
return {
checked: false,
checked1: false,
checked2: true,
checkList: ['Ha','A'],
checked4: 3,
checkbox: false,
}
},
methods: {
onChange(val) {
console.log(val)
},
},
})
</script>

82
packages/checkbox/doc/group.vue
View File

@ -1,82 +0,0 @@
<template>
<div class="block">
<el-checkbox v-model="checkAll" :indeterminate="isIndeterminate" @change="handleCheckAllChange">All Selected</el-checkbox>
<div style="margin: 15px 0;"></div>
<el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
<el-checkbox v-for="city in cities" :key="city" :label="city">{{ city }}</el-checkbox>
</el-checkbox-group>
</div>
<div class="block">
<el-checkbox-group
v-model="checkedCities"
:min="1"
:max="2"
>
<el-checkbox v-for="city in cities" :key="city" :label="city">{{ city }}</el-checkbox>
</el-checkbox-group>
</div>
<div class="block">
<div>
<el-checkbox-group v-model="checkboxGroup1">
<el-checkbox-button v-for="city in cities" :key="city" :label="city">{{ city }}</el-checkbox-button>
</el-checkbox-group>
</div>
<div style="margin-top: 20px">
<el-checkbox-group v-model="checkboxGroup2" size="medium">
<el-checkbox-button v-for="city in cities" :key="city" :label="city">{{ city }}</el-checkbox-button>
</el-checkbox-group>
</div>
<div style="margin-top: 20px">
<el-checkbox-group v-model="checkboxGroup3" size="small">
<el-checkbox-button
v-for="city in cities"
:key="city"
:label="city"
:disabled="city === 'London'"
>
{{ city }}
</el-checkbox-button>
</el-checkbox-group>
</div>
<div style="margin-top: 20px">
<el-checkbox-group v-model="checkboxGroup4" :size="size" disabled>
<el-checkbox-button v-for="city in cities" :key="city" :label="city">{{ city }}</el-checkbox-button>
</el-checkbox-group>
</div>
</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
const cityOptions = ['NYC', 'London', 'Tokyo', 'Singapore']
export default defineComponent({
data() {
return {
checkAll: false,
checkedCities: ['NYC', 'London'],
cities: cityOptions,
isIndeterminate: true,
checkboxGroup1: ['NYC'],
checkboxGroup2: ['NYC'],
checkboxGroup3: ['NYC'],
checkboxGroup4: ['NYC'],
size: 'mini',
}
},
mounted() {
setTimeout(() => this.size = 'medium', 3000)
},
methods: {
handleCheckAllChange(val) {
this.checkedCities = val ? cityOptions : []
this.isIndeterminate = false
},
handleCheckedCitiesChange(value) {
let checkedCount = value.length
this.checkAll = checkedCount === this.cities.length
this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length
},
},
})
</script>

6
packages/checkbox/doc/index.stories.ts
View File

@ -1,6 +0,0 @@
export { default as BasicUsage } from './basic.vue'
export { default as GroupUsage } from './group.vue'
export default {
title: 'Checkbox',
}

52
packages/collapse/doc/basic.vue
View File

@ -1,52 +0,0 @@
<template>
<div>
<div>accordion: false</div>
<el-collapse v-model="activeNames" @update:modelValue="handleChange">
<el-collapse-item title="title1" name="1">
<div>content 1</div>
</el-collapse-item>
<el-collapse-item title="title2" name="2">
<div>content 2</div>
</el-collapse-item>
<el-collapse-item title="title3" name="3">
<div>content 3</div>
</el-collapse-item>
<el-collapse-item title="title4">
<div>content 4</div>
<div>content 4-1</div>
</el-collapse-item>
</el-collapse>
<hr>
<div>accordion: true</div>
<el-collapse v-model="activeNames2" accordion>
<el-collapse-item title="title1" name="1">
<div>content 1</div>
</el-collapse-item>
<el-collapse-item title="title2" name="2">
<div>content 2</div>
</el-collapse-item>
<el-collapse-item title="title3" name="3">
<div>content 3</div>
</el-collapse-item>
<el-collapse-item title="title4">
<div>content 4</div>
<div>content 4-1</div>
</el-collapse-item>
</el-collapse>
</div>
</template>
<script>
export default {
data() {
return {
activeNames: ['1'],
activeNames2: ['1'],
}
},
methods: {
handleChange(val) {
console.log(val)
},
},
}
</script>

5
packages/collapse/doc/index.stories.ts
View File

@ -1,5 +0,0 @@
export { default as BasicUsage } from './basic.vue'
export default {
title: 'Collapse',
}

80
packages/container/doc/basic.vue
View File

@ -1,80 +0,0 @@
<template>
<section>
<el-container>
<el-header>Header</el-header>
<el-main>Main</el-main>
</el-container>
<el-container>
<el-header>Header</el-header>
<el-main>Main</el-main>
<el-footer>Footer</el-footer>
</el-container>
<el-container>
<el-aside width="200px">Aside</el-aside>
<el-main>Main</el-main>
</el-container>
<el-container>
<el-header>Header</el-header>
<el-container>
<el-aside width="200px">Aside</el-aside>
<el-main>Main</el-main>
</el-container>
</el-container>
<el-container>
<el-header>Header</el-header>
<el-container>
<el-aside width="200px">Aside</el-aside>
<el-container>
<el-main>Main</el-main>
<el-footer>Footer</el-footer>
</el-container>
</el-container>
</el-container>
<el-container>
<el-aside width="200px">Aside</el-aside>
<el-container>
<el-header>Header</el-header>
<el-main>Main</el-main>
</el-container>
</el-container>
<el-container>
<el-aside width="200px">Aside</el-aside>
<el-container>
<el-header>Header</el-header>
<el-main>Main</el-main>
<el-footer>Footer</el-footer>
</el-container>
</el-container>
</section>
</template>
<style scoped>
.el-header, .el-footer {
background-color: #B3C0D1;
color: #333;
text-align: center;
line-height: 60px;
}
.el-aside {
background-color: #D3DCE6;
color: #333;
text-align: center;
line-height: 200px;
}
.el-main {
background-color: #E9EEF3;
color: #333;
text-align: center;
line-height: 160px;
}
body > .el-container {
margin-bottom: 40px;
}
.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
line-height: 260px;
}
.el-container:nth-child(7) .el-aside {
line-height: 320px;
}
</style>

6
packages/container/doc/index.stories.ts
View File

@ -1,6 +0,0 @@
export { default as BasicUsage } from './basic.vue'
export default {
title: 'Container',
}

5
packages/dialog/doc/index.stories.ts
View File

@ -1,5 +0,0 @@
export default {
title: 'Dialog',
}

34
packages/divider/doc/basic.vue
View File

@ -1,34 +0,0 @@
<template>
<el-divider class="item" />
<el-divider class="item" @click="handleClick">click me</el-divider>
<el-divider class="item" content-position="left">清风徐来</el-divider>
<el-divider class="item" content-position="right">水波不兴</el-divider>
<el-divider class="item"><i class="el-icon-mobile-phone"></i></el-divider>
<div class="item">
<span>雨纷纷</span>
<el-divider direction="vertical" />
<span>旧故里</span>
<el-divider direction="vertical" />
<span>草木深</span>
</div>
</template>
<script>
import { defineComponent } from 'vue'
export default defineComponent({
name: 'Basic',
setup() {
const handleClick = () => alert('click')
return {
handleClick,
}
},
})
</script>
<style scoped>
.item {
margin-bottom: 40px;
}
</style>

5
packages/divider/doc/index.stories.ts
View File

@ -1,5 +0,0 @@
export { default as BasicUsage } from './basic.vue'
export default {
title: 'Divider',
}

55
packages/drawer/doc/basic.vue
View File

@ -1,55 +0,0 @@
<template>
<label>
<input type="radio" :checked="direction === 'ltr'" @click="change('ltr')">从左到右
</label>
<label>
<input type="radio" :checked="direction === 'rtl'" @click="change('rtl')">从右到左
</label>
<label>
<input type="radio" :checked="direction === 'ttb'" @click="change('ttb')">从上到下
</label>
<label>
<input type="radio" :checked="direction === 'btt'" @click="change('btt')">从下到上
</label>
<el-button @click="open">点击打开</el-button>
<el-drawer
v-model="visible"
size="50%"
title="我是标题"
:direction="direction"
>
<span>嵌套一层!</span>
<el-button @click="visible2 = true">点击打开</el-button>
<el-drawer
v-model="visible2"
:append-to-body="true"
title="我是标题"
:direction="direction"
>
<span>第二层!</span>
</el-drawer>
</el-drawer>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue'
export default defineComponent(() => {
const direction = ref('ltr')
const visible = ref(false)
const visible2 = ref(false)
const open = () => {
visible.value = true
}
const change = val => {
direction.value = val
}
return {
open,
direction,
visible,
visible2,
change,
}
})
</script>

5
packages/drawer/doc/index.stories.ts
View File

@ -1,5 +0,0 @@
export default {
title: 'Drawer',
}
export { default as BasicUsage } from './basic.vue'

164
packages/dropdown/doc/basic.vue
View File

@ -1,164 +0,0 @@
<template>
<div class="block">
<el-dropdown ref="c" placement="right" :hide-on-click="false">
<span ref="a" class="el-dropdown-link">
dropdown<i class="el-icon-arrow-down el-icon--right"></i>
</span>
<template #dropdown>
<el-dropdown-menu ref="b">
<el-dropdown-item>Apple</el-dropdown-item>
<el-dropdown-item>Orange</el-dropdown-item>
<el-dropdown-item>Cherry</el-dropdown-item>
<el-dropdown-item disabled>Peach</el-dropdown-item>
<el-dropdown-item divided>Pear</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
<br>
<br>
<el-dropdown trigger="click" :hide-on-click="false">
<span class="el-dropdown-link">
dropdown<i class="el-icon-arrow-down el-icon--right"></i>
</span>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item>Apple</el-dropdown-item>
<el-dropdown-item>Orange</el-dropdown-item>
<el-dropdown-item>Cherry</el-dropdown-item>
<el-dropdown-item disabled>Peach</el-dropdown-item>
<el-dropdown-item divided>Pear</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
<br>
<br>
<el-dropdown>
<el-button type="primary">
dropdown<i class="el-icon-arrow-down el-icon--right"></i>
</el-button>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item>Apple</el-dropdown-item>
<el-dropdown-item>Orange</el-dropdown-item>
<el-dropdown-item>Cherry</el-dropdown-item>
<el-dropdown-item disabled>Peach</el-dropdown-item>
<el-dropdown-item divided>Pear</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
<br>
<br>
<el-dropdown @command="handleCommand">
<el-button type="primary">
dropdown<i class="el-icon-arrow-down el-icon--right"></i>
</el-button>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item command="a">Apple</el-dropdown-item>
<el-dropdown-item command="b">Orange</el-dropdown-item>
<el-dropdown-item command="c">Cherry</el-dropdown-item>
<el-dropdown-item command="d" disabled>Peach</el-dropdown-item>
<el-dropdown-item command="e" divided>Pear</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
<br>
<br>
<el-dropdown split-button type="primary" @click="handleClick">
dropdown
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item>Apple</el-dropdown-item>
<el-dropdown-item>Orange</el-dropdown-item>
<el-dropdown-item>Cherry</el-dropdown-item>
<el-dropdown-item disabled>Peach</el-dropdown-item>
<el-dropdown-item divided>Pear</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
<br>
<br>
<el-dropdown
split-button
size="medium"
type="primary"
@click="handleClick"
>
dropdown
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item>Apple</el-dropdown-item>
<el-dropdown-item>Orange</el-dropdown-item>
<el-dropdown-item>Cherry</el-dropdown-item>
<el-dropdown-item disabled>Peach</el-dropdown-item>
<el-dropdown-item divided>Pear</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
<br>
<br>
<el-dropdown
split-button
size="small"
type="primary"
@click="handleClick"
>
dropdown
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item>Apple</el-dropdown-item>
<el-dropdown-item>Orange</el-dropdown-item>
<el-dropdown-item>Cherry</el-dropdown-item>
<el-dropdown-item disabled>Peach</el-dropdown-item>
<el-dropdown-item divided>Pear</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
<br>
<br>
<el-dropdown
split-button
size="mini"
type="primary"
@click="handleClick"
>
dropdown
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item>Apple</el-dropdown-item>
<el-dropdown-item>Orange</el-dropdown-item>
<el-dropdown-item>Cherry</el-dropdown-item>
<el-dropdown-item disabled>Peach</el-dropdown-item>
<el-dropdown-item divided>Pear</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
methods: {
handleClick() {
alert('button click')
},
handleCommand(command) {
alert('click on item ' + command)
},
},
})
</script>
<style>
.el-dropdown-link {
cursor: pointer;
color: #409EFF;
}
.el-icon-arrow-down {
font-size: 12px;
}
.el-dropdown-menu__item {
word-break: keep-all;
}
</style>

6
packages/dropdown/doc/index.stories.ts
View File

@ -1,6 +0,0 @@
export { default as BasicUsage } from './basic.vue'
export default {
title: 'Dropdown',
}

14
packages/icon/doc/basic.vue
View File

@ -1,14 +0,0 @@
<template>
<el-icon name="edit" />
<el-icon name="share" />
<el-icon name="delete" />
</template>
<style scoped>
i {
color: #606266;
margin: 0 20px;
font-size: 1.5em;
vertical-align: middle;
}
</style>

5
packages/icon/doc/index.stories.ts
View File

@ -1,5 +0,0 @@
export { default as BasicUsage } from './basic.vue'
export default {
title: 'Icon',
}

40
packages/image/doc/basic.vue
View File

@ -1,40 +0,0 @@
<template>
<div class="demo-image">
<div v-for="fit in fits" :key="fit" class="block">
<div class="demonstration">{{ fit }}</div>
<br>
<el-image
style="width: 100px; height: 100px"
:src="url"
:fit="fit"
alt="111"
/>
</div>
</div>
</template>
<script lang="ts">
export default {
data() {
return {
fits: ['fill', 'contain', 'cover', 'none', 'scale-down'],
url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
}
},
}
</script>
<style scoped>
.demo-image {
display: flex;
align-items: center;
justify-content: center;
}
.block {
margin: 0 20px;
text-align: center;
}
.demo-image .demonstration {
margin-bottom: 20px;
}
</style>

26
packages/image/doc/bigImage.vue
View File

@ -1,26 +0,0 @@
<template>
<div class="demo-image__preview">
<el-image
style="width: 100px; height: 100px"
:src="url"
:preview-src-list="srcList"
/>
</div>
</template>
<script>
export default {
data() {
return {
url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
srcList: [
'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg',
'https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg',
],
}
},
}
</script>
<style scoped>
</style>

54
packages/image/doc/error.vue
View File

@ -1,54 +0,0 @@
<template>
<div class="demo-image__error">
<div class="block">
<span class="demonstration">默认</span>
<el-image />
</div>
<div class="block">
<span class="demonstration">自定义</span>
<el-image>
<template #error>
<div class="image-slot">
<i class="el-icon-picture-outline"></i>
</div>
</template>
</el-image>
</div>
</div>
</template>
<style scoped>
.demo-image__error .block {
padding: 30px 0;
text-align: center;
border-right: 1px solid #eff2f6;
display: inline-block;
width: 49%;
box-sizing: border-box;
vertical-align: top;
margin: 0;
}
.demo-image__error .image-slot {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
background: #f5f7fa;
color: #909399;
font-size: 14px;
margin: 0;
}
.demo-image__error .demonstration {
display: block;
color: #8492a6;
font-size: 14px;
margin-bottom: 20px;
}
.demo-image__error .el-image {
width: 300px;
height: 200px;
}
</style>

10
packages/image/doc/index.stories.ts
View File

@ -1,10 +0,0 @@
export { default as BasicUsage } from './basic.vue'
export { default as LoadError } from './error.vue'
export { default as LoadPlaceholder } from './placeholder.vue'
export { default as LazyLoad } from './lazyload.vue'
export { default as BigImage } from './bigImage.vue'
export default {
title: 'Image',
}

44
packages/image/doc/lazyload.vue
View File

@ -1,44 +0,0 @@
<template>
<div class="demo-image__lazy" style="overflow: auto;height: 400px;">
<el-image
v-for="url in urls"
:key="url"
:src="url"
lazy
/>
</div>
</template>
<script>
export default {
data() {
return {
urls: [
'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg',
'https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg',
'https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg',
'https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg',
'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg',
'https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg',
],
}
},
}
</script>
<style scoped>
.demo-image__lazy {
height: 400px;
overflow: auto;
}
.demo-image__lazy .el-image {
display: block;
min-height: 250px;
margin-bottom: 10px;
width: 50%;
}
.demo-image__lazy .el-image:last-child {
margin-bottom: 0;
}
</style>

62
packages/image/doc/placeholder.vue
View File

@ -1,62 +0,0 @@
<template>
<div class="demo-image__placeholder">
<div class="block">
<span class="demonstration">默认</span>
<el-image :src="src" />
</div>
<div class="block">
<span class="demonstration">自定义</span>
<el-image :src="src">
<template #placeholder>
<div class="image-slot">
加载中<span class="dot">...</span>
</div>
</template>
</el-image>
</div>
</div>
</template>
<script>
export default {
data() {
return {
src: 'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg',
}
},
}
</script>
<style scoped>
.demo-image__placeholder .block {
padding: 30px 0;
text-align: center;
border-right: 1px solid #eff2f6;
display: inline-block;
width: 49%;
box-sizing: border-box;
vertical-align: top;
margin: 0;
}
.demo-image__placeholder .image-slot {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
background: #f5f7fa;
color: #909399;
font-size: 14px;
margin: 0;
}
.demo-image__placeholder .el-image {
width: 300px;
height: 200px;
}
.demo-image__placeholder .demonstration {
display: block;
color: #8492a6;
font-size: 14px;
margin-bottom: 20px;
}
</style>

44
packages/infinite-scroll/doc/basic.vue
View File

@ -1,44 +0,0 @@
<template>
<ul v-infinite-scroll="load" class="infinite-list">
<li v-for="i in count" :key="i">{{ i }}</li>
</ul>
</template>
<script lang="ts">
import { ref } from 'vue'
export default {
setup() {
const count = ref(0)
const load = () => {
count.value += 2
}
return {
count,
load,
}
},
}
</script>
<style lang="scss" scoped>
.infinite-list {
padding: 0;
margin: 0;
list-style: none;
> li {
display: flex;
align-items: center;
justify-content: center;
height: 50px;
background: #e8f3fe;
margin: 10px;
color: lighten(#1989fa, 20%);
}
}
</style>

68
packages/infinite-scroll/doc/disabled.vue
View File

@ -1,68 +0,0 @@
<template>
<ul
v-infinite-scroll="load"
infinite-scroll-disabled="disabled"
class="infinite-list"
>
<li
v-for="i in count"
:key="i"
class="list-item"
>
{{ i }}
</li>
<li v-if="loading">Loading...</li>
<li v-if="noMore">No more</li>
</ul>
</template>
<script>
import { ref, computed } from 'vue'
export default {
setup() {
const count = ref(0)
const loading = ref(false)
const noMore = computed(() => count.value >= 20)
const disabled = computed(() => loading.value || noMore.value)
const load = () => {
loading.value = true
setTimeout(() => {
count.value += 2
loading.value = false
}, 2000)
}
return {
count,
loading,
noMore,
disabled,
load,
}
},
}
</script>
<style lang="scss" scoped>
.infinite-list {
padding: 0;
margin: 0;
list-style: none;
text-align: center;
.list-item {
display: flex;
align-items: center;
justify-content: center;
height: 50px;
background: #e8f3fe;
margin: 10px;
color: lighten(#1989fa, 20%);
}
}
</style>

7
packages/infinite-scroll/doc/index.stories.ts
View File

@ -1,7 +0,0 @@
export default {
title: 'InfiniteScroll',
}
export { default as BasicUsage } from './basic.vue'
export { default as LimitedScroll } from './disabled.vue'

66
packages/input/doc/basic.vue
View File

@ -1,66 +0,0 @@
<template>
<div class="demo-input">
<h3>基础用法</h3>
<el-input v-model="input1" placeholder="请输入内容" />
</div>
<div class="demo-input">
<h3>禁用状态</h3>
<el-input v-model="input1" placeholder="请输入内容" :disabled="true" />
</div>
<div class="demo-input">
<h3>可清空</h3>
<el-input v-model="input2" placeholder="请输入内容" clearable />
</div>
<div class="demo-input">
<h3>密码框</h3>
<el-input v-model="input3" placeholder="请输入密码" show-password />
</div>
<div class="demo-input">
<h3>带 icon 的输入框</h3>
<div class="demo-input-suffix">
属性方式：
<el-input v-model="input1" placeholder="请选择日期" suffix-icon="el-icon-date" />
<el-input v-model="input2" placeholder="请输入内容" prefix-icon="el-icon-search" />
</div>
<div class="demo-input-suffix">
slot 方式：
<el-input v-model="input3" placeholder="请选择日期">
<template #suffix>
<i class="el-input__icon el-icon-date"></i>
</template>
</el-input>
<el-input v-model="input4" placeholder="请输入内容">
<template #prefix>
<i class="el-input__icon el-icon-search"></i>
</template>
</el-input>
</div>
</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
const basic = defineComponent({
data() {
return {
input1: '1111',
input2: '2222',
input3: '',
input4: '',
}
},
})
export default basic
</script>
<style>
.demo-input-suffix {
margin-bottom: 15px;
}
.demo-input .el-input {
width: 180px;
margin-right: 15px;
}
</style>

47
packages/input/doc/composition.vue
View File

@ -1,47 +0,0 @@
<template>
<div>
<el-input v-model="input1" placeholder="请输入内容">
<template #prepend>Http://</template>
</el-input>
</div>
<div style="margin-top: 15px;">
<el-input v-model="input2" placeholder="请输入内容">
<template #append>.com</template>
</el-input>
</div>
<div style="margin-top: 15px;">
<el-input v-model="input3" class="input-with-select" placeholder="请输入内容">
<!-- <el-select v-model="select" slot="prepend" placeholder="请选择">
<el-option label="餐厅名" value="1"></el-option>
<el-option label="订单号" value="2"></el-option>
<el-option label="用户电话" value="3"></el-option>
</el-select> -->
<template #append>
<el-button icon="el-icon-search" />
</template>
</el-input>
</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
const basic = defineComponent({
data() {
return {
input1: '1111',
input2: '2222',
input3: '',
}
},
})
export default basic
</script>
<style>
.demo-input .el-input {
width: 180px;
margin-right: 15px;
}
</style>

9
packages/input/doc/index.stories.ts
View File

@ -1,9 +0,0 @@
export { default as BasicUsage } from './basic.vue'
export { default as TextareaUsage } from './textarea.vue'
export { default as CompositionUsage } from './composition.vue'
export { default as SizeUsage } from './size.vue'
export { default as LengthUsage } from './length.vue'
export default {
title: 'Input',
}

28
packages/input/doc/length.vue
View File

@ -1,28 +0,0 @@
<template>
<el-input
v-model="text"
type="text"
placeholder="请输入内容"
maxlength="10"
show-word-limit
/>
<div style="margin: 20px 0;"></div>
<el-input
v-model="textarea"
type="textarea"
placeholder="请输入内容"
maxlength="30"
show-word-limit
/>
</template>
<script>
export default {
data() {
return {
text: '',
textarea: '',
}
},
}
</script>

47
packages/input/doc/size.vue
View File

@ -1,47 +0,0 @@
<template>
<div class="demo-input-size">
<el-input v-model="input1" placeholder="请输入内容" suffix-icon="el-icon-date" />
<el-input
v-model="input2"
size="medium"
placeholder="请输入内容"
suffix-icon="el-icon-date"
/>
<el-input
v-model="input3"
size="small"
placeholder="请输入内容"
suffix-icon="el-icon-date"
/>
<el-input
v-model="input4"
size="mini"
placeholder="请输入内容"
suffix-icon="el-icon-date"
/>
</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
const basic = defineComponent({
data() {
return {
input1: '1111',
input2: '2222',
input3: '',
input4: '',
}
},
})
export default basic
</script>
<style>
.demo-input-size .el-input {
width: 180px;
margin-right: 15px;
}
</style>

48
packages/input/doc/textarea.vue
View File

@ -1,48 +0,0 @@
<template>
<div class="demo-input">
<h3>文本域</h3>
<el-input
v-model="textarea1"
:rows="2"
type="textarea"
placeholder="请输入内容"
/>
</div>
<div class="demo-input">
<h3>可自适应文本高度的文本域</h3>
<el-input
v-model="textarea2"
type="textarea"
autosize
placeholder="请输入内容"
/>
<div style="margin: 20px 0;"></div>
<el-input
v-model="textarea3"
type="textarea"
:autosize="{minRows: 3, maxRows: 5}"
placeholder="请输入内容"
/>
</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
const basic = defineComponent({
data() {
return {
textarea1: 'sda\ndasd\nddasdsda\ndasd\nddasdsda\ndasd\nddasdsda\ndasd\nddasd',
textarea2: 'sda\ndasd\nddasdsda\ndasd\nddasdsda\ndasd\nddasdsda\ndasd\nddasd',
textarea3: '',
}
},
})
export default basic
</script>
<style>
.demo-input .el-textarea {
width: 414px;
}
</style>

59
packages/layout/doc/basic.vue
View File

@ -1,59 +0,0 @@
<template>
<el-row>
<el-col :span="24"><div class="grid-content bg-purple-dark"></div></el-col>
</el-row>
<el-row>
<el-col :span="12"><div class="grid-content bg-purple"></div></el-col>
<el-col :span="12"><div class="grid-content bg-purple-light"></div></el-col>
</el-row>
<el-row>
<el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
<el-col :span="8"><div class="grid-content bg-purple-light"></div></el-col>
<el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
</el-row>
<el-row>
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
<el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
<el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
</el-row>
<el-row>
<el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
<el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
<el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
<el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
<el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
<el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
</el-row>
</template>
<style scoped>
.el-row {
margin-bottom: 20px;
}
.el-row:last-child {
margin-bottom: 0;
}
.el-col {
border-radius: 4px;
}
.bg-purple-dark {
background: #99a9bf;
}
.bg-purple {
background: #d3dce6;
}
.bg-purple-light {
background: #e5e9f2;
}
.grid-content {
border-radius: 4px;
min-height: 36px;
}
.row-bg {
padding: 10px 0;
background-color: #f9fafc;
}
</style>

6
packages/layout/doc/index.stories.ts
View File

@ -1,6 +0,0 @@
export { default as BasicUsage } from './basic.vue'
export default {
title: 'Layout',
}

18
packages/link/doc/index.stories.ts
View File

@ -1,18 +0,0 @@
export default {
title: 'Link',
}
const commonProps = 'href="https://vuejs.org" target="_blank" rel="noreferrer noopener" style="margin-right: 10px;"'
export const BasicLinks = () => `
<el-link ${commonProps}>normal link</el-link>
<el-link ${commonProps} type="primary">primary link</el-link>
<el-link ${commonProps} type="success">success link</el-link>
<el-link ${commonProps} type="info">info link</el-link>
<el-link ${commonProps} type="warning">warning link</el-link>
<el-link ${commonProps} type="danger">error link</el-link>
`
export const DisabledLinks = () => `
<el-link disabled="true" ${commonProps}>disabled link</el-link>
`

34
packages/notification/doc/closable.vue
View File

@ -1,34 +0,0 @@
<template>
<div>
<el-button class="item" @click="onClick">With timer</el-button>
<el-button class="item" @click="onClickNoTimer">Without timer</el-button>
</div>
</template>
<script lang="ts">
export default {
methods: {
onClick(): void {
this.$notify({
title: 'With Timer',
message: 'I\'ll go away within 4500ms ',
})
},
onClickNoTimer(): void {
this.$notify({
duration: 0,
message: 'I will not disappear unless you click close or press esc',
title: 'No Timer',
})
},
},
}
</script>
<style>
.item {
margin-top: 10px;
margin-right: 40px;
}
</style>

7
packages/notification/doc/index.stories.ts
View File

@ -1,7 +0,0 @@
export default {
title: 'Notification',
}
export { default as BasicNotification } from './standealone.vue'
export { default as AdvancedNotification } from './vnode.vue'
export { default as Closable } from './closable.vue'

54
packages/notification/doc/standealone.vue
View File

@ -1,54 +0,0 @@
<template>
<div>
<el-button class="item" @click="onClick">Normal</el-button>
<el-button class="item" @click="onClickSuccess">Success</el-button>
<el-button class="item" @click="onClickWarning">Warning</el-button>
<el-button class="item" @click="onClickInfo">Info</el-button>
<el-button class="item" @click="onClickError">Error</el-button>
</div>
</template>
<script lang="ts">
import Notify from '../src/notify'
export default {
methods: {
onClick(): void {
Notify({
title: 'Normal title',
message: 'HI',
})
},
onClickSuccess(): void {
Notify.success({
title: 'Success',
message: 'Success notification!',
})
},
onClickWarning(): void {
Notify.warning({
title: 'Warning',
message: 'Warning notification',
})
},
onClickInfo(): void {
Notify.info({
title: 'Info',
message: 'Info notification',
})
},
onClickError(): void {
Notify.error({
title: 'Error',
message: 'Error notification',
})
},
},
}
</script>
<style>
.item {
margin-top: 10px;
margin-right: 40px;
}
</style>

35
packages/notification/doc/vnode.vue
View File

@ -1,35 +0,0 @@
<template>
<div>
<el-button class="item" @click="onClick">HTML tags</el-button>
<el-button class="item" @click="onClickVNode"> VNode </el-button>
</div>
</template>
<script lang="ts">
import { h } from 'vue'
import Notify from '../src/notify'
export default {
methods: {
onClick(): void {
Notify({
title: 'This is title',
message: '<strong>This is <i>HTML</i> segement</strong>',
dangerouslyUseHTMLString: true,
})
},
onClickVNode(): void {
Notify({
title: 'This is a vnode',
message: h('strong', ['This is ', h('i', 'VNode'), ' segment']),
})
},
},
}
</script>
<style>
.item {
margin-top: 10px;
margin-right: 40px;
}
</style>

13
packages/page-header/doc/basic.vue
View File

@ -1,13 +0,0 @@
<template>
<el-page-header content="Detail" @back="goBack" />
</template>
<script lang='ts'>
export default {
methods: {
goBack() {
console.log('go back')
},
},
}
</script>

6
packages/page-header/doc/index.stories.ts
View File

@ -1,6 +0,0 @@
export default {
title: 'PageHeader',
}
export { default as BasicUsage } from './basic.vue'

72
packages/progress/doc/basic.vue
View File

@ -1,72 +0,0 @@
<template>
<el-progress :percentage="50" />
<el-progress :percentage="100" :format="() => '满'" />
<el-progress :percentage="100" status="success" />
<el-progress :percentage="100" status="warning" />
<el-progress :percentage="50" status="exception" />
<el-progress
:text-inside="true"
:stroke-width="24"
:percentage="100"
status="success"
/>
<el-progress
:text-inside="true"
:stroke-width="22"
:percentage="80"
status="warning"
/>
<el-progress type="circle" :percentage="25" />
<el-progress type="circle" :percentage="100" status="success" />
<el-progress type="circle" :percentage="70" status="warning" />
<div>
<el-progress type="dashboard" :percentage="percentage" :color="colors" />
<el-button-group>
<el-button icon="el-icon-minus" @click="decrease" />
<el-button icon="el-icon-plus" @click="increase" />
</el-button-group>
</div>
</template>
<script>
import { defineComponent, ref } from 'vue'
export default defineComponent({
name: 'Basic',
setup() {
const percentage = ref(10)
const colors = ref([
{ color: '#f56c6c', percentage: 20 },
{ color: '#e6a23c', percentage: 40 },
{ color: '#5cb87a', percentage: 60 },
{ color: '#1989fa', percentage: 80 },
{ color: '#6f7ad3', percentage: 100 },
])
const increase = () => {
percentage.value += 10
if (percentage.value > 100) {
percentage.value = 100
}
}
const decrease = () => {
percentage.value -= 10
if (percentage.value < 0) {
percentage.value = 0
}
}
return {
percentage,
colors,
decrease,
increase,
}
},
})
</script>
<style>
div[role=progressbar] {
margin: 5px 0;
}
</style>

5
packages/progress/doc/index.stories.ts
View File

@ -1,5 +0,0 @@
export { default as BasicUsage } from './basic.vue'
export default {
title: 'Progress',
}

36
packages/radio/doc/basic.vue
View File

@ -1,36 +0,0 @@
<template>
<div>
<el-radio v-model="radio" label="1">1</el-radio>
<el-radio v-model="radio" label="2">2</el-radio>
</div>
<div>
<el-radio-group v-model="radio0">
<el-radio label="3">3</el-radio>
<el-radio label="6">6</el-radio>
<el-radio label="9">9</el-radio>
</el-radio-group>
</div>
<div>
<el-radio-group v-model="radio1">
<el-radio-button label="A" />
<el-radio-button label="B" />
<el-radio-button label="C" />
<el-radio-button label="D" />
</el-radio-group>
</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
const basic = defineComponent({
data() {
return {
radio: '1',
radio0: '3',
radio1: 'A',
}
},
})
export default basic
</script>

5
packages/radio/doc/index.stories.ts
View File

@ -1,5 +0,0 @@
export { default as BasicUsage } from './basic.vue'
export default {
title: 'Radio',
}

32
packages/rate/doc/basic.vue
View File

@ -1,32 +0,0 @@
<template>
<div class="block">
<span class="demonstration">Default</span>
<el-rate v-model="value1" /> {{ value1 }}✨
</div>
<div class="block">
<span class="demonstration">Progressive discoloration</span>
<el-rate
v-model="value2"
:colors="colors"
/>
</div>
<el-rate
v-model="value"
show-text
/>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
const basic = defineComponent({
data() {
return {
value: null,
value1: null,
value2: null,
colors: ['#99A9BF', '#F7BA2A', '#FF9900'],
}
},
})
export default basic
</script>

5
packages/rate/doc/index.stories.ts
View File

@ -1,5 +0,0 @@
export { default as BasicUsage } from './basic.vue'
export default {
title: 'Rate',
}

20
packages/scrollbar/doc/basic.vue
View File

@ -1,20 +0,0 @@
<template>
<div class="outter">
<el-scrollbar style="height: 200px">
<div class="inner"></div>
</el-scrollbar>
</div>
</template>
<style scoped>
.outter {
background: #EEE;
}
.inner {
height: 500px;
width: 500px;
background: linear-gradient(red, yellow, blue);;
}
</style>

6
packages/scrollbar/doc/index.stories.ts
View File

@ -1,6 +0,0 @@
export default {
title: 'ScrollBar',
}
export { default as BasicUsage } from './basic.vue'

56
packages/slider/doc/basic-usage.vue
View File

@ -1,56 +0,0 @@
<template>
<div class="block">
<span class="demonstration">默认</span>
<el-slider v-model="value1" />
</div>
<div class="block">
<span class="demonstration">自定义初始值</span>
<el-slider v-model="value2" />
</div>
<div class="block">
<span class="demonstration">隐藏 Tooltip</span>
<el-slider v-model="value3" :show-tooltip="false" />
</div>
<div class="block">
<span class="demonstration">格式化 Tooltip</span>
<el-slider v-model="value4" :format-tooltip="formatTooltip" />
</div>
<div class="block">
<span class="demonstration">禁用</span>
<el-slider v-model="value5" disabled />
</div>
</template>
<script lang="ts">
import { reactive, toRefs } from 'vue'
export default {
setup() {
const values = reactive({
value1: 30,
value2: 50,
value3: 36,
value4: 48,
value5: 42,
})
const formatTooltip = (val: number) => `当前: ${ val }`
return {
...toRefs(values),
formatTooltip,
}
},
}
</script>
<style>
.block {
padding: 30px 24px;
overflow: hidden;
border-bottom: 1px solid #EFF2F6;
}
.demonstration {
font-size: 14px;
color: #8492A6;
line-height: 44px;
}
</style>

40
packages/slider/doc/discrete-values.vue
View File

@ -1,40 +0,0 @@
<template>
<div class="block">
<span class="demonstration">Breakpoints not displayed</span>
<el-slider
v-model="value1"
:step="10"
/>
</div>
<div class="block">
<span class="demonstration">Breakpoints displayed</span>
<el-slider
v-model="value2"
:step="10"
show-stops
/>
</div>
</template>
<script lang="ts">
import { reactive, toRefs } from 'vue'
export default {
setup() {
const values = reactive({
value1: 0,
value2: 0,
})
return {
...toRefs(values),
}
},
}
</script>
<style>
.demonstration {
font-size: 14px;
color: #8492A6;
line-height: 44px;
}
</style>

14
packages/slider/doc/index.stories.ts
View File

@ -1,14 +0,0 @@
export default {
title: 'Slider',
}
export { default as BasicUsage } from './basic-usage.vue'
export { default as DiscreteValues } from './discrete-values.vue'
export { default as RangeSelection } from './range-selection.vue'
export { default as VerticalMode } from './vertical-mode.vue'
export { default as ShowMarks } from './show-marks.vue'

23
packages/slider/doc/range-selection.vue
View File

@ -1,23 +0,0 @@
<template>
<div class="block">
<el-slider
v-model="value"
range
show-stops
:max="10"
/>
</div>
</template>
<script lang="ts">
import { ref } from 'vue'
export default {
setup() {
const value = ref([2, 5])
return {
value,
}
},
}
</script>

34
packages/slider/doc/show-marks.vue
View File

@ -1,34 +0,0 @@
<template>
<div class="block">
<el-slider
v-model="value"
range
:marks="marks"
/>
</div>
</template>
<script lang="ts">
import { h, ref } from 'vue'
export default {
setup() {
const value = ref([30, 60])
const marks = {
0: '0°C',
8: '8°C',
37: '37°C',
50: {
style: {
color: '#1989FA',
},
label: h('strong', '50%'),
},
}
return {
value,
marks,
}
},
}
</script>

22
packages/slider/doc/vertical-mode.vue
View File

@ -1,22 +0,0 @@
<template>
<div class="block">
<el-slider
v-model="value"
vertical
height="200px"
/>
</div>
</template>
<script lang="ts">
import { ref } from 'vue'
export default {
setup() {
const value = ref(0)
return {
value,
}
},
}
</script>

43
packages/steps/doc/basic.vue
View File

@ -1,43 +0,0 @@
<template>
<el-steps :active="active" direction="vertical" :space="100">
<el-step title="Step 1" description="This is a long long long description" />
<el-step title="Step 2" description="This is a long long long description" />
<el-step title="Step 3" description="This is a long long long description" />
</el-steps>
<el-steps :active="active">
<el-step title="Step 1" icon="el-icon-edit" />
<el-step title="Step 2" icon="el-icon-upload" />
<el-step title="Step 3" icon="el-icon-picture" />
</el-steps>
<el-steps :active="active" simple>
<el-step title="Step 1" icon="el-icon-edit" />
<el-step title="Step 2" icon="el-icon-upload" />
<el-step title="Step 3" icon="el-icon-picture" />
</el-steps>
<el-button type="primary" @click="handleClick">move</el-button>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue'
export default defineComponent({
setup() {
const active = ref(0)
const handleClick = () => {
if (active.value++ > 2) active.value = 0
}
return {
active,
handleClick,
}
},
})
</script>
<style scoped>
.el-steps {
margin-bottom: 50px;
}
</style>

5
packages/steps/doc/index.stories.ts
View File

@ -1,5 +0,0 @@
export { default as BasicUsage } from './basic.vue'
export default {
title: 'Steps',
}

30
packages/switch/doc/basic.vue
View File

@ -1,30 +0,0 @@
<template>
<div>
<div>
use v-model
<el-switch v-model="v" />
</div>
<div>
use :value
<el-switch :value="value" @change="value = $event" />
</div>
<div>
use :model-value
<el-switch :model-value="modelValue" @update:modelValue="modelValue = $event" />
</div>
</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
data() {
return {
v: true,
value: true,
modelValue: true,
}
},
})
</script>

6
packages/switch/doc/index.stories.ts
View File

@ -1,6 +0,0 @@
export { default as BasicUsage } from './basic.vue'
export default {
title: 'Switch',
}

265
packages/tabs/doc/basic.vue
View File

@ -1,265 +0,0 @@
<template>
<el-button @click="show = !show">
display/hidden tab item
</el-button>
<el-button
@click="activeName = activeName === 'first' ? 'second' : 'first'"
>
Change
</el-button>
<div class="flag">
<el-tabs v-model="activeName" @tab-click="handleClick">
<el-tab-pane>
<template #label>label-1slot-title</template>
label-1slot-title
</el-tab-pane>
<template v-if="true">
<el-tab-pane
label="label-1"
name="first"
>
label-1
</el-tab-pane>
</template>
<el-tab-pane
v-if="show"
label="label-2"
name="fourth"
>
label-2
</el-tab-pane>
<el-tab-pane label="label-3" name="second">label-3</el-tab-pane>
<el-tab-pane label="label-4" name="third">label-4</el-tab-pane>
<el-tab-pane v-for="i in 3" :key="i" :label="`a-${i}`">
{{
`name-${i}`
}}
</el-tab-pane>
</el-tabs>
</div>
<div class="flag">
<el-tabs v-model="activeName" type="card" @tab-click="handleClick">
<el-tab-pane
closable
label="label-1"
name="first"
>
label-1
</el-tab-pane>
<el-tab-pane
disabled
label="label-2"
name="fourth"
>
label-2
</el-tab-pane>
<el-tab-pane label="label-3" name="second">label-3</el-tab-pane>
<el-tab-pane label="label-4" name="third">label-4</el-tab-pane>
</el-tabs>
</div>
<div class="flag">
<el-tabs
v-model="activeName"
type="border-card"
@tab-click="handleClick"
>
<el-tab-pane
lazy
label="label-1"
name="first"
>
label-1
</el-tab-pane>
<el-tab-pane
lazy
label="label-2"
name="fourth"
>
label-2
</el-tab-pane>
<el-tab-pane
lazy
label="label-3"
name="second"
>
label-3
</el-tab-pane>
<el-tab-pane
lazy
label="label-4"
name="third"
>
label-4
</el-tab-pane>
</el-tabs>
</div>
<div class="flag">
<el-button @click="tabPosition = 'top'">top</el-button>
<el-button @click="tabPosition = 'right'">right</el-button>
<el-button @click="tabPosition = 'bottom'">bottom</el-button>
<el-button @click="tabPosition = 'left'">left</el-button>
<el-tabs :tab-position="tabPosition" style="height: 200px;">
<el-tab-pane label="label-1">label-1</el-tab-pane>
<el-tab-pane label="label-3">label-3</el-tab-pane>
<el-tab-pane label="label-4">label-4</el-tab-pane>
<el-tab-pane label="label-2">label-2</el-tab-pane>
</el-tabs>
</div>
<div class="flag">
<el-tabs type="border-card">
<el-tab-pane>
<template #label>
<i class="el-icon-date"></i> label-1
</template>
label-1
</el-tab-pane>
<el-tab-pane label="label-6">label-6</el-tab-pane>
<el-tab-pane label="label-4">label-4</el-tab-pane>
<el-tab-pane label="label-2">label-2</el-tab-pane>
</el-tabs>
</div>
<div class="flag">
<el-tabs
v-model="editableTabsValue"
type="card"
editable
style="width: 450px;"
@edit="handleTabsEdit"
>
<el-tab-pane
v-for="item in editableTabs"
:key="item.name"
:label="item.title"
:name="item.name"
>
{{ item.content }}
</el-tab-pane>
</el-tabs>
</div>
<div class="flag">
<div style="margin-bottom: 20px;">
<el-button size="small" @click="addTab(editableTabsValue)">
add tab
</el-button>
</div>
<el-tabs
v-model="editableTabsValue"
type="card"
stretch
addable
closable
@tab-remove="removeTab"
@tab-add="addTab(editableTabsValue)"
>
<el-tab-pane
v-for="item in editableTabs"
:key="item.name"
:label="item.title"
:name="item.name"
>
{{ item.content }}
</el-tab-pane>
</el-tabs>
</div>
</template>
<script lang='ts'>
export default {
data() {
return {
show: false,
activeName: 'second',
tabPosition: 'left',
editableTabsValue: '2',
editableTabs: [
{
title: 'Tab 1',
name: '1',
content: 'Tab 1 content',
},
{
title: 'Tab 2',
name: '2',
content: 'Tab 2 content',
},
],
tabIndex: 2,
}
},
methods: {
addTab() {
let newTabName = ++this.tabIndex + ''
this.editableTabs.push({
title: 'New Tab',
name: newTabName,
content: 'New Tab content',
})
this.editableTabsValue = newTabName
},
removeTab(targetName) {
let tabs = this.editableTabs
let activeName = this.editableTabsValue
if (activeName === targetName) {
tabs.forEach((tab, index) => {
if (tab.name === targetName) {
let nextTab = tabs[index + 1] || tabs[index - 1]
if (nextTab) {
activeName = nextTab.name
}
}
})
}
this.editableTabsValue = activeName
this.editableTabs = tabs.filter(tab => tab.name !== targetName)
},
handleTabsEdit(targetName, action) {
if (action === 'add') {
let newTabName = ++this.tabIndex + ''
this.editableTabs.push({
title: 'New Tab',
name: newTabName,
content: 'New Tab content',
})
this.editableTabsValue = newTabName
}
if (action === 'remove') {
let tabs = this.editableTabs
let activeName = this.editableTabsValue
if (activeName === targetName) {
tabs.forEach((tab, index) => {
if (tab.name === targetName) {
let nextTab = tabs[index + 1] || tabs[index - 1]
if (nextTab) {
activeName = nextTab.name
}
}
})
}
this.editableTabsValue = activeName
this.editableTabs = tabs.filter(
tab => tab.name !== targetName,
)
}
},
handleClick(tab, event) {
console.log(tab, event)
},
},
}
</script>
<style scoped>
.flag {
border: 2px solid #eee;
margin: 15px 0;
padding: 10px;
min-height: 250px;
}
</style>

6
packages/tabs/doc/index.stories.ts
View File

@ -1,6 +0,0 @@
export { default as BasicUsage } from './basic.vue'
export default {
title: 'Tabs',
}

54
packages/tag/doc/basic.vue
View File

@ -1,54 +0,0 @@
<template>
<el-tag closable>Default Label</el-tag>
<el-tag size="medium" closable>Medium Label</el-tag>
<el-tag size="small" closable>Small Label</el-tag>
<el-tag size="mini" closable>Mini Label</el-tag>
<div class="tag-group">
<span class="tag-group__title">Dark</span>
<el-tag
v-for="item in items"
:key="item.label"
:type="item.type"
effect="dark"
>
{{ item.label }}
</el-tag>
</div>
<div class="tag-group">
<span class="tag-group__title">Plain</span>
<el-tag
v-for="item in items"
:key="item.label"
:type="item.type"
effect="plain"
>
{{ item.label }}
</el-tag>
</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
const basic = defineComponent({
data() {
return {
items: [
{ type: '', label: 'Label 1' },
{ type: 'success', label: 'Label 2' },
{ type: 'info', label: 'Label 3' },
{ type: 'danger', label: 'Label 4' },
{ type: 'warning', label: 'Label 5' },
],
}
},
})
export default basic
</script>
<style scoped>
.el-tag {
margin: 6px;
}
</style>

5
packages/tag/doc/index.stories.ts
View File

@ -1,5 +0,0 @@
export { default as BasicUsage } from './basic.vue'
export default {
title: 'Tag',
}

46
packages/timeline/doc/basic.vue
View File

@ -1,46 +0,0 @@
<template>
<div class="block">
<el-timeline>
<el-timeline-item
v-for="(activity, index) in activities"
:key="index"
:timestamp="activity.timestamp"
:placement="activity.placement"
:hide-timestamp="activity.hideTimestamp"
:type="activity.type"
:icon="activity.icon"
>
{{ activity.content }}
</el-timeline-item>
</el-timeline>
</div>
</template>
<script lang='ts'>
import { defineComponent, reactive } from 'vue'
export default defineComponent({
setup() {
return reactive({
activities: [{
content: 'Step 1: xxxxxx',
timestamp: '2018-04-15',
placement: 'top',
}, {
content: 'Step 2: xxxxxx',
timestamp: '2018-04-13',
hideTimestamp: true,
}, {
content: 'Step 3: xxxxxx',
timestamp: '2018-04-11',
type: 'large',
icon: 'el-icon-more',
},{
content: 'Step 4: xxxxxx',
timestamp: '2018-07-11',
type: 'primary',
}],
})
},
})
</script>

6
packages/timeline/doc/index.stories.ts
View File

@ -1,6 +0,0 @@
export { default as BasicUsage } from './basic.vue'
export default {
title: 'Timeline',
}

164
packages/tooltip/doc/basic.vue
View File

@ -1,164 +0,0 @@
<template>
<div class="box">
<div class="top">
<el-tooltip
v-model="model"
class="item"
effect="dark"
content="Top Left prompts info"
placement="top-start"
:manual="true"
>
<el-button>top-start</el-button>
</el-tooltip>
<el-tooltip
class="item"
effect="dark"
content="Top Center prompts info"
:append-to-body="false"
placement="top"
:trigger="['click', 'focus', 'hover']"
>
<el-button>top</el-button>
</el-tooltip>
<el-tooltip
class="item"
effect="dark"
content="Top Right prompts info"
placement="top-end"
:trigger="['click']"
>
<el-button>top-end</el-button>
</el-tooltip>
</div>
<div class="left">
<el-tooltip
class="item"
effect="dark"
content="Left Top prompts info"
placement="left-start"
>
<el-button>left-start</el-button>
</el-tooltip>
<el-tooltip
class="item"
effect="dark"
content="Left Center prompts info"
placement="left"
>
<el-button>left</el-button>
</el-tooltip>
<el-tooltip
class="item"
effect="dark"
content="Left Bottom prompts info"
placement="left-end"
>
<el-button>left-end</el-button>
</el-tooltip>
</div>
<div class="right">
<el-tooltip
class="item"
effect="dark"
content="Right Top prompts info"
placement="right-start"
>
<el-button>right-start</el-button>
</el-tooltip>
<el-tooltip
class="item"
effect="dark"
content="Right Center prompts info"
placement="right"
>
<el-button>right</el-button>
</el-tooltip>
<el-tooltip
class="item"
effect="dark"
content="Right Bottom prompts info"
placement="right-end"
>
<el-button>right-end</el-button>
</el-tooltip>
</div>
<div class="bottom">
<el-tooltip
class="item"
effect="dark"
content="Bottom Left prompts info"
placement="bottom-start"
>
<el-button>bottom-start</el-button>
</el-tooltip>
<el-tooltip
class="item"
effect="dark"
content="Bottom Center prompts info"
placement="bottom"
>
<el-button>bottom</el-button>
</el-tooltip>
<el-tooltip
class="item"
effect="dark"
content="Bottom Right prompts info"
placement="bottom-end"
>
<el-button>bottom-end</el-button>
</el-tooltip>
</div>
</div>
</template>
<script>
import ClickOutside from '@element-plus/directives/click-outside'
export default {
directives: {
ClickOutside,
},
data() {
return {
model: true,
}
},
methods: {
},
}
</script>
<style>
.box {
width: 400px;
padding-left: 25%;
padding-top: 200px;
}
.box .top {
text-align: center;
}
.box .left {
float: left;
width: 110px;
}
.box .right {
float: right;
width: 110px;
}
.box .bottom {
clear: both;
text-align: center;
}
.box .item {
margin: 4px;
}
.box .left .el-tooltip__popper,
.box .right .el-tooltip__popper {
padding: 8px 10px;
}
.box .el-button {
width: 110px;
}
</style>

5
packages/tooltip/doc/index.stories.ts
View File

@ -1,5 +0,0 @@
export default {
title: 'Tooltip',
}
export { default as Basic } from './basic.vue'

28
packages/transfer/doc/base-usage.vue
View File

@ -1,28 +0,0 @@
<template>
<el-transfer
v-model="value"
:data="data"
/>
</template>
<script>
export default {
data() {
const generateData = () => {
const data = []
for (let i = 1; i <= 15; i++) {
data.push({
key: i + '',
label: `Option ${ i }`,
disabled: i % 4 === 0,
})
}
return data
}
return {
data: generateData(),
value: ['1', '4'],
}
},
}
</script>

99
packages/transfer/doc/customizable.vue
View File

@ -1,99 +0,0 @@
<template>
<p style="text-align: center; margin: 0 0 20px;">
Customize data items using render-content
</p>
<div style="text-align: center;">
<el-transfer
v-model="value"
style="text-align: left; display: inline-block;"
filterable
:left-default-checked="['2', '3']"
:right-default-checked="['1']"
:render-content="renderFunc"
:titles="['Source', 'Target']"
:button-texts="['To left', 'To right']"
:format="{
noChecked: '${total}',
hasChecked: '${checked}/${total}',
}"
:data="data"
@change="handleChange"
>
<template #left-footer>
<el-button class="transfer-footer" size="small">Operation</el-button>
</template>
<template #right-footer>
<el-button class="transfer-footer" size="small">Operation</el-button>
</template>
</el-transfer>
<p style="text-align: center; margin: 50px 0 20px;">
Customize data items using scoped slot
</p>
<div style="text-align: center;">
<el-transfer
v-model="value4"
style="text-align: left; display: inline-block;"
filterable
:left-default-checked="['2', '3']"
:right-default-checked="['1']"
:titles="['Source', 'Target']"
:button-texts="['To left', 'To right']"
:format="{
noChecked: '${total}',
hasChecked: '${checked}/${total}',
}"
:data="data"
@change="handleChange"
>
<template #default="{option}">
<span>{{ option.key }} - {{ option.label }}</span>
</template>
<template #left-footer>
<el-button class="transfer-footer" size="small">Operation</el-button>
</template>
<template #right-footer>
<el-button class="transfer-footer" size="small">Operation</el-button>
</template>
</el-transfer>
</div>
</div>
</template>
<script>
export default {
data() {
const generateData = () => {
const data = []
for (let i = 1; i <= 15; i++) {
data.push({
key: i + '',
label: `Option ${i}`,
disabled: i % 4 === 0,
})
}
return data
}
return {
data: generateData(),
value: ['1'],
value4: ['1'],
renderFunc(h, option) {
return h('span', `${option.key} - ${option.label}`)
},
}
},
methods: {
handleChange(value, direction, movedKeys) {
console.log(value, direction, movedKeys)
},
},
}
</script>
<style>
.transfer-footer {
margin-left: 20px;
padding: 6px 5px;
}
</style>

36
packages/transfer/doc/filterable.vue
View File

@ -1,36 +0,0 @@
<template>
<el-transfer
v-model="value"
filterable
:filter-method="filterMethod"
filter-placeholder="State Abbreviations"
:data="data"
/>
</template>
<script>
export default {
data () {
const generateData = () => {
const data = []
const states = ['California', 'Illinois', 'Maryland', 'Texas', 'Florida', 'Colorado', 'Connecticut ']
const initials = ['CA', 'IL', 'MD', 'TX', 'FL', 'CO', 'CT']
states.forEach((city, index) => {
data.push({
label: city,
key: index + '',
initial: initials[index],
})
})
return data
}
return {
data: generateData(),
value: [],
filterMethod (query, item) {
return item.initial.toLowerCase().indexOf(query.toLowerCase()) > -1
},
}
},
}
</script>

13
packages/transfer/doc/index.stories.ts
View File

@ -1,13 +0,0 @@
export default {
title: 'Transfer',
}
export { default as BaseUsage } from './base-usage.vue'
export { default as Filterable } from './filterable.vue'
export { default as Customizable } from './customizable.vue'
export { default as PropAliases } from './prop-aliases.vue'

32
packages/transfer/doc/prop-aliases.vue
View File

@ -1,32 +0,0 @@
<template>
<el-transfer
v-model="value"
:props="{
key: 'value',
label: 'desc'
}"
:data="data"
/>
</template>
<script>
export default {
data() {
const generateData = () => {
const data = []
for (let i = 1; i <= 15; i++) {
data.push({
value: i + '',
desc: `Option ${ i }`,
disabled: i % 4 === 0,
})
}
return data
}
return {
data: generateData(),
value: [],
}
},
}
</script>

10
scripts/gc.sh
View File

@ -27,7 +27,6 @@ NAME=$NORMALIZED_NAME
mkdir -p "$DIRNAME"
mkdir -p "$DIRNAME/src"
mkdir -p "$DIRNAME/doc"
mkdir -p "$DIRNAME/__tests__"
cat > $DIRNAME/src/index.vue <<EOF
@ -90,12 +89,3 @@ describe('$NAME.vue', () => {
})
})
EOF
cat <<EOF >"$DIRNAME/doc/index.stories.ts"
import El${NAME} from '../index'
export default {
title: '${NAME}',
}
EOF

3570
yarn.lock
View File

File diff suppressed because it is too large Load Diff