mirror/element-plus
2
0
Fork 0
mirror of https://github.com/element-plus/element-plus.git synced 2025-02-23 11:59:34 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #710 from element-plus/dev

Browse Source 
D2M
This commit is contained in:
zazzaz 2020-11-27 13:43:26 +08:00 committed by GitHub
commit c4c564b446
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
97 changed files with 575 additions and 637 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.gitignore vendored
View File

@ -13,4 +13,4 @@ coverage/
website-dist
lib
website/play/index.vue
ep-version.js
packages/element-plus/version.ts

22
README.md
View File

@ -11,6 +11,28 @@ This project is still under heavy development. Feel free to join us and make you
[![Edit element-plus](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/element-plus-ncxnt?fontsize=14&hidenavigation=1&theme=dark)
<br/>
<p align="center">
<b>Special thanks to the generous sponsorship by:</b>
</p>
<br/>
<table align="center" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td align="center" valign="middle">
<a href="https://www.duohui.cn/?utm_source=element&utm_medium=web&utm_campaign=element-index" target="_blank">
<img width="150px" src="https://user-images.githubusercontent.com/10731096/100414179-11741980-30b4-11eb-9ee3-4d0a30d4e21d.png">
</a>
</td>
<td align="center" valign="middle">
<a href="https://bit.dev/?from=element-ui" target="_blank">
<img width="150px" src="https://user-images.githubusercontent.com/10095631/41342907-e44e7196-6f2f-11e8-92f2-47702dc8f059.png">
</a>
</td>
</tr>
</tbody>
</table>
---
Join our [Discord](https://discord.link/ElementPlus) to start communicating with everybody.

2
build/bincomp.js
View File

@ -1,4 +1,4 @@
/* eslint-disable */
/* eslint-disable @typescript-eslint/no-var-requires */
const cp = require('child_process')
const { getPackagesSync } = require('@lerna/project')
const ora = require('ora')

3
build/build.component.js
View File

@ -7,11 +7,10 @@ const { nodeResolve } = require('@rollup/plugin-node-resolve')
const vue = require('rollup-plugin-vue')
const rollup = require('rollup')
const typescript = require('rollup-plugin-typescript2')
const { noElPrefixFile } = require('./common')
const deps = Object.keys(pkg.dependencies)
const noElPrefixFile = /(utils|directives|hooks|locale)/
const runBuild = async () => {
let index = 0
const pkgs = await getPackages()

3
build/common.js Normal file
View File

@ -0,0 +1,3 @@
module.exports = {
noElPrefixFile: /(utils|directives|hooks|locale)/,
}

41
build/gen-type.js Normal file
View File

@ -0,0 +1,41 @@
/* eslint-disable @typescript-eslint/no-var-requires */
const fs = require('fs')
const path = require('path')
const { noElPrefixFile } = require('./common')
const outsideImport = /import .* from '..\/(.*?)\/src\/.*/
// index.d.ts
const newIndexPath = path.resolve(__dirname, '../lib/index.d.ts')
fs.copyFileSync(path.resolve(__dirname, '../lib/element-plus/index.d.ts'), newIndexPath)
const index = fs.readFileSync(newIndexPath)
const newIndex = index.toString().replace(/@element-plus\//g, './el-').replace('el-utils', 'utils')
fs.writeFileSync(newIndexPath, newIndex)
// remove ep
fs.rmdirSync(path.resolve(__dirname, '../lib/element-plus'), { recursive: true })
// remove test-utils
fs.rmdirSync(path.resolve(__dirname, '../lib/test-utils'), { recursive: true })
// component
const libDirPath = path.resolve(__dirname, '../lib')
fs.readdirSync(libDirPath).forEach(comp => {
if (!noElPrefixFile.test(comp)) {
if (fs.lstatSync(path.resolve(libDirPath, comp)).isDirectory()) {
// rename
const newCompName = `el-${comp}`
fs.renameSync(path.resolve(libDirPath, comp),
path.resolve(libDirPath, newCompName))
// re-import
const imp = fs.readFileSync(path.resolve(__dirname, '../lib', newCompName, 'index.d.ts')).toString()
if(outsideImport.test(imp) || imp.includes('@element-plus/')) {
const newImp = imp.replace(outsideImport, (i, c) => {
return i.replace(`../${c}`, `../el-${c}`)
}).replace('@element-plus/', '../el-')
fs.writeFileSync(path.resolve(__dirname, '../lib', newCompName, 'index.d.ts'), newImp)
}
}
}
})

2
build/gen-version.js
View File

@ -2,5 +2,5 @@
const fs = require('fs')
const path = require('path')
const { version } = require('../package.json')
fs.writeFileSync(path.resolve(__dirname, '../ep-version.js'), `export const version = '${version}'
fs.writeFileSync(path.resolve(__dirname, '../packages/element-plus/version.ts'), `export const version = '${version}'
`)

4
build/rollup.config.bundle.js
View File

@ -1,7 +1,6 @@
// import vue from 'rollup-plugin-vue'
import { nodeResolve } from '@rollup/plugin-node-resolve'
import path from 'path'
import css from 'rollup-plugin-css-only'
// import commonjs from '@rollup/plugin-commonjs'
import { terser } from 'rollup-plugin-terser'
import typescript from 'rollup-plugin-typescript2'
@ -28,9 +27,6 @@ export default [
}),
typescript({
tsconfigOverride: {
compilerOptions: {
declaration: false,
},
'include': [
'packages/**/*',
'typings/vue-shim.d.ts',

9
package.json
View File

@ -1,18 +1,19 @@
{
"name": "element-plus",
"private": true,
"version": "1.0.1-alpha.21",
"version": "1.0.1-alpha.23",
"scripts": {
"cz": "npx git-cz",
"test": "jest",
"gen": "bash ./scripts/gc.sh",
"bootstrap": "yarn --frozen-lockfile && npx lerna bootstrap && yarn gen:version",
"gen:version": "node build/gen-version.js",
"build": "yarn bootstrap && yarn clean:lib && yarn build:lib && yarn build:lib-full && yarn build:theme && yarn build:esm-bundle && yarn build:esm && yarn build:utils && yarn build:locale && yarn build:locale-umd",
"build": "yarn bootstrap && yarn clean:lib && yarn build:esm-bundle && yarn build:lib && yarn build:lib-full && yarn build:esm && yarn build:utils && yarn build:locale && yarn build:locale-umd && yarn build:theme",
"clean:lib": "rimraf lib",
"build:lib": "cross-env LIBMODE=core webpack --config ./build/webpack.config.js",
"build:lib-full": "cross-env LIBMODE=full webpack --config ./build/webpack.config.js",
"build:esm-bundle": "rollup --config ./build/rollup.config.bundle.js",
"build:esm-bundle": "rollup --config ./build/rollup.config.bundle.js && yarn build:type",
"build:type": "node build/gen-type.js",
"build:esm": "node ./build/bincomp.js",
"build:utils": "cross-env BABEL_ENV=utils babel packages/utils --extensions .ts --out-dir lib/utils",
"build:locale": "cross-env BABEL_ENV=utils babel packages/locale --extensions .ts --out-dir lib/locale",
@ -140,7 +141,7 @@
"packages"
],
"main": "lib/index.js",
"typings": "types/index.d.ts",
"typings": "lib/index.d.ts",
"unpkg": "lib/index.js",
"style": "lib/theme-chalk/index.css",
"browserslist": [

0
packages/checkbox/src/checkbox.d.ts → packages/checkbox/src/checkbox.type.ts
View File

2
packages/checkbox/src/useCheckbox.ts
View File

@ -10,7 +10,7 @@ import { UPDATE_MODEL_EVENT } from '@element-plus/utils/constants'
import { useGlobalConfig } from '@element-plus/utils/util'
import { PartialReturnType } from '@element-plus/utils/types'
import { elFormKey, elFormItemKey } from '@element-plus/form'
import { ICheckboxGroupInstance, ICheckboxProps } from './checkbox'
import { ICheckboxGroupInstance, ICheckboxProps } from './checkbox.type'
import type { ElFormContext, ElFormItemContext } from '@element-plus/form'

95
packages/dialog/__tests__/dialog.spec.ts
View File

@ -1,13 +1,10 @@
import { nextTick } from 'vue'
import { mount } from '@vue/test-utils'
import Dialog from '../src/index'
import Dialog from '../'
const AXIOM = 'Rem is the best girl'
const _mount = ({
slots,
...rest
}: Indexable<any>) => {
const _mount = ({ slots, ...rest }: Indexable<any>) => {
return mount(Dialog, {
slots: {
default: AXIOM,
@ -20,65 +17,90 @@ const _mount = ({
jest.useFakeTimers()
describe('Dialog.vue', () => {
test('render test', () => {
test('render test', async () => {
const wrapper = _mount({
slots: {
default: AXIOM,
},
props: {
modelValue: true,
},
})
expect(wrapper.text()).toEqual(AXIOM)
await nextTick()
expect(wrapper.find('.el-dialog__body').text()).toEqual(AXIOM)
})
test('dialog should have a title when title has been given', () => {
test('dialog should have a title when title has been given', async () => {
const HEADER = 'I am header'
let wrapper = _mount({
slots: {
header: HEADER,
},
props: {
modelValue: true,
},
})
await nextTick()
expect(wrapper.find('.el-dialog__header').text()).toBe(HEADER)
wrapper = _mount({
props: {
title: HEADER,
modelValue: true,
},
})
await nextTick()
expect(wrapper.find('.el-dialog__header').text()).toBe(HEADER)
})
test('dialog should have a footer when footer has been given', () => {
test('dialog should have a footer when footer has been given', async () => {
const wrapper = _mount({
slots: {
footer: AXIOM,
},
props: {
modelValue: true,
},
})
await nextTick()
expect(wrapper.find('.el-dialog__footer').exists()).toBe(true)
expect(wrapper.find('.el-dialog__footer').text()).toBe(AXIOM)
})
test('should append dialog to body when appendToBody is true', () => {
test('should append dialog to body when appendToBody is true', async () => {
const wrapper = _mount({
props: {
appendToBody: true,
modelValue: true,
},
})
expect(document.body.firstElementChild.classList.contains('el-overlay')).toBe(true)
await nextTick()
expect(
document.body.firstElementChild.classList.contains('el-overlay'),
).toBe(true)
wrapper.unmount()
})
test('should center dialog', () => {
test('should center dialog', async () => {
const wrapper = _mount({
props: {
center: true,
modelValue: true,
},
})
await nextTick()
expect(wrapper.find('.el-dialog--center').exists()).toBe(true)
})
test('should show close button', () => {
const wrapper = _mount({})
test('should show close button', async () => {
const wrapper = _mount({
props: {
modelValue: true,
},
})
await nextTick()
expect(wrapper.find('.el-dialog__close').exists()).toBe(true)
})
@ -88,25 +110,30 @@ describe('Dialog.vue', () => {
modelValue: true,
},
})
await nextTick()
await wrapper.find('.el-dialog__headerbtn').trigger('click')
expect(wrapper.vm.visible).toBe(false)
})
describe('mask related', () => {
test('should not have overlay mask when mask is false', () => {
test('should not have overlay mask when mask is false', async () => {
const wrapper = _mount({
props: {
modal: false,
modelValue: true,
},
})
await nextTick()
expect(wrapper.find('.el-overlay').exists()).toBe(false)
})
test('should close the modal when clicking on mask when `closeOnClickModal` is true', async () => {
const wrapper = _mount({})
const wrapper = _mount({
props: {
modelValue: true,
},
})
await nextTick()
expect(wrapper.find('.el-overlay').exists()).toBe(true)
await wrapper.find('.el-overlay').trigger('click')
@ -120,15 +147,18 @@ describe('Dialog.vue', () => {
const wrapper = _mount({
props: {
beforeClose,
modelValue: true,
},
})
wrapper.vm.handleClose()
await nextTick()
await wrapper.find('.el-dialog__headerbtn').trigger('click')
expect(beforeClose).toHaveBeenCalled()
})
test('should not close dialog when user cancelled', () => {
const beforeClose = jest.fn().mockImplementation((hide: (cancel: boolean) => void) => hide(true))
test('should not close dialog when user cancelled', async () => {
const beforeClose = jest
.fn()
.mockImplementation((hide: (cancel: boolean) => void) => hide(true))
const wrapper = _mount({
props: {
@ -136,8 +166,8 @@ describe('Dialog.vue', () => {
modelValue: true,
},
})
wrapper.vm.handleClose()
await nextTick()
await wrapper.find('.el-dialog__headerbtn').trigger('click')
expect(beforeClose).toHaveBeenCalled()
expect(wrapper.vm.visible).toBe(true)
})
@ -157,11 +187,11 @@ describe('Dialog.vue', () => {
modelValue: true,
})
expect(wrapper.vm.visible).toBe(false)
// expect(wrapper.vm.visible).toBe(false)
jest.runOnlyPendingTimers()
// jest.runOnlyPendingTimers()
expect(wrapper.vm.visible).toBe(true)
// expect(wrapper.vm.visible).toBe(true)
})
test('should destroy on close', async () => {
@ -171,17 +201,16 @@ describe('Dialog.vue', () => {
destroyOnClose: true,
},
})
expect(wrapper.vm.visible).toBe(true)
wrapper.vm.handleClose()
await nextTick()
await wrapper.find('.el-dialog__headerbtn').trigger('click')
await wrapper.setProps({
// manually setting this prop because that Transition is not available in testing,
// updating model value event was emitted via transition hooks.
modelValue: false,
})
await nextTick()
expect(wrapper.html()).toBe('<!---->')
expect(wrapper.html()).toBeFalsy()
})
})
})

2
packages/dialog/index.ts
View File

@ -1,5 +1,5 @@
import { App } from 'vue'
import Dialog from './src/index'
import Dialog from './src/index.vue'
Dialog.install = (app: App): void => {
app.component(Dialog.name, Dialog)

222
packages/dialog/src/index.ts
View File

@ -1,222 +0,0 @@
import {
createVNode,
defineComponent,
Fragment,
Transition,
Teleport,
h,
withDirectives,
vShow,
toDisplayString,
renderSlot,
withCtx,
} from 'vue'
import { TrapFocus } from '@element-plus/directives'
import { stop } from '@element-plus/utils/dom'
import { isValidWidthUnit } from '@element-plus/utils/validators'
import { PatchFlags, renderBlock, renderIf } from '@element-plus/utils/vnode'
import { Overlay } from '@element-plus/overlay'
import {
default as useDialog,
CLOSE_EVENT,
CLOSED_EVENT,
OPEN_EVENT,
OPENED_EVENT,
UPDATE_MODEL_EVENT,
} from './useDialog'
import type { PropType, SetupContext } from 'vue'
const closeIcon = createVNode('i', { class: 'el-dialog__close el-icon el-icon-close' }, null, PatchFlags.HOISTED)
const headerKls = { class: 'el-dialog__header' }
const bodyKls = { class: 'el-dialog__body' }
const titleKls = { class: 'el-dialog__title' }
const footerKls = { class: 'el-dialog__footer', key: 0 }
export default defineComponent({
name: 'ElDialog',
props: {
appendToBody: {
type: Boolean,
default: false,
},
beforeClose: {
type: Function as PropType<(...args: any[]) => unknown>,
},
destroyOnClose: {
type: Boolean,
default: false,
},
center: {
type: Boolean,
default: false,
},
customClass: {
type: String,
default: '',
},
closeOnClickModal: {
type: Boolean,
default: true,
},
closeOnPressEscape: {
type: Boolean,
default: true,
},
fullscreen: {
type: Boolean,
default: false,
},
lockScroll: {
type: Boolean,
default: true,
},
modal: {
type: Boolean,
default: true,
},
showClose: {
type: Boolean,
default: true,
},
title: {
type: String,
default: '',
},
openDelay: {
type: Number,
default: 0,
},
closeDelay: {
type: Number,
default: 0,
},
top: {
type: String,
default: '15vh',
},
modelValue: {
type: Boolean,
required: true,
},
width: {
type: String,
default: '50%',
validator: isValidWidthUnit,
},
zIndex: {
type: Number,
},
},
emits: [
OPEN_EVENT,
OPENED_EVENT,
CLOSE_EVENT,
CLOSED_EVENT,
UPDATE_MODEL_EVENT,
],
setup(props, ctx) {
// init here
return useDialog(props, ctx as SetupContext)
},
render() {
if (this.destroyOnClose && !this.modelValue) {
return null
}
const { $slots } = this
const closeBtn = renderIf(this.showClose, 'button',
{
type: 'button',
class: 'el-dialog__headerbtn',
ariaLabel: 'close',
onClick: this.handleClose,
},
[closeIcon],
PatchFlags.PROPS,
['onClick'],
)
const header = createVNode(
'div',
headerKls,
[
renderSlot($slots, 'header', {}, () =>
[createVNode('span', titleKls, toDisplayString(this.title), PatchFlags.TEXT)],
),
closeBtn,
],
)
const body = createVNode(
'div',
bodyKls,
[renderSlot($slots, 'default')],
)
const footer = renderIf(!!$slots.footer, 'div', footerKls, [renderSlot($slots, 'footer')])
const dialog = createVNode(
'div',
{
ariaModal: true,
ariaLabel: this.title || 'dialog',
class: [
'el-dialog',
{
'is-fullscreen': this.fullscreen,
'el-dialog--center': this.center,
},
this.customClass,
],
ref: 'dialogRef',
role: 'dialog',
style: this.style,
onClick: stop,
},
[header, body, footer],
PatchFlags.STYLE | PatchFlags.CLASS | PatchFlags.PROPS,
['ariaLabel', 'onClick'],
)
const trappedDialog = withDirectives(dialog, [[TrapFocus]])
const overlay = withDirectives(
createVNode(
Overlay,
{
mask: this.modal,
onClick: this.onModalClick,
zIndex: this.zIndex,
},
{
default: withCtx(() => [trappedDialog]),
},
PatchFlags.PROPS,
['mask', 'onClick', 'zIndex'],
), [[vShow, this.visible]])
const renderer = createVNode(
Transition,
{
name: 'dialog-fade',
'onAfter-enter': this.afterEnter,
'onAfter-leave': this.afterLeave,
},
{
default: () => [overlay],
},
PatchFlags.PROPS,
['onAfter-enter', 'onAfter-leave'],
)
return renderBlock(Fragment, null, [
this.appendToBody
? h(Teleport, { key: 0, to: 'body' }, [renderer])
: h(Fragment, { key: 1 }, [renderer]),
])
},
})

171
packages/dialog/src/index.vue Normal file
View File

@ -0,0 +1,171 @@
<template>
<template v-if="destroyOnClose && !visible"></template>
<template v-else>
<teleport to="body" :disabled="!appendToBody">
<transition
name="dialog-fade"
@after-enter="afterEnter"
@after-leave="afterLeave"
>
<el-overlay
v-if="visible"
:z-index="zIndex"
:mask="modal"
@click="onModalClick"
>
<div
ref="dialogRef"
v-trap-focus
:class="[
'el-dialog',
{
'is-fullscreen': fullscreen,
'el-dialog--center': center,
},
customClass,
]"
aria-modal="true"
role="dialog"
:aria-label="title || 'dialog'"
:style="style"
@click="$event.stopPropagation()"
>
<div class="el-dialog__header">
<slot name="header">
<span class="el-dialog__title">
{{ title }}
</span>
</slot>
<button
aria-label="close"
class="el-dialog__headerbtn"
type="button"
@click="handleClose"
>
<i class="el-dialog__close el-icon el-icon-close"></i>
</button>
</div>
<div class="el-dialog__body">
<slot></slot>
</div>
<div v-if="$slots.footer" class="el-dialog__footer">
<slot name="footer"></slot>
</div>
</div>
</el-overlay>
</transition>
</teleport>
</template>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
import { TrapFocus } from '@element-plus/directives'
import { isValidWidthUnit } from '@element-plus/utils/validators'
import { Overlay } from '@element-plus/overlay'
import {
default as useDialog,
CLOSE_EVENT,
CLOSED_EVENT,
OPEN_EVENT,
OPENED_EVENT,
UPDATE_MODEL_EVENT,
} from './useDialog'
import type { PropType, SetupContext } from 'vue'
export default defineComponent({
name: 'ElDialog',
components: {
'el-overlay': Overlay,
},
directives: {
TrapFocus,
},
props: {
appendToBody: {
type: Boolean,
default: false,
},
beforeClose: {
type: Function as PropType<(...args: any[]) => unknown>,
},
destroyOnClose: {
type: Boolean,
default: false,
},
center: {
type: Boolean,
default: false,
},
customClass: {
type: String,
default: '',
},
closeOnClickModal: {
type: Boolean,
default: true,
},
closeOnPressEscape: {
type: Boolean,
default: true,
},
fullscreen: {
type: Boolean,
default: false,
},
lockScroll: {
type: Boolean,
default: true,
},
modal: {
type: Boolean,
default: true,
},
showClose: {
type: Boolean,
default: true,
},
title: {
type: String,
default: '',
},
openDelay: {
type: Number,
default: 0,
},
closeDelay: {
type: Number,
default: 0,
},
top: {
type: String,
default: '15vh',
},
modelValue: {
type: Boolean,
required: true,
},
width: {
type: String,
default: '50%',
validator: isValidWidthUnit,
},
zIndex: {
type: Number,
},
},
emits: [
OPEN_EVENT,
OPENED_EVENT,
CLOSE_EVENT,
CLOSED_EVENT,
UPDATE_MODEL_EVENT,
],
setup(props, ctx) {
return useDialog(props, ctx as SetupContext)
},
})
</script>

5
packages/dialog/src/useDialog.ts
View File

@ -32,7 +32,6 @@ export default function(props: UseDialogProps, ctx: SetupContext) {
style.width = props.width
}
}
style.zIndex = String(zIndex.value + 1)
return style
})
@ -127,7 +126,9 @@ export default function(props: UseDialogProps, ctx: SetupContext) {
ctx.emit(OPEN_EVENT)
// this.$el.addEventListener('scroll', this.updatePopper)
nextTick(() => {
dialogRef.value.scrollTop = 0
if (dialogRef.value) {
dialogRef.value.scrollTop = 0
}
})
} else {
// this.$el.removeEventListener('scroll', this.updatePopper

12
packages/element-plus/index.ts
View File

@ -83,13 +83,11 @@ import ElTransfer from '@element-plus/transfer'
import ElTree from '@element-plus/tree'
import ElUpload from '@element-plus/upload'
import { use } from '@element-plus/locale'
import { version } from '../../ep-version'
import { version as version_ } from './version'
import { setConfig } from '@element-plus/utils/config'
import type { InstallOptions } from '@element-plus/utils/config'
interface InstallOptions {
size: ComponentSize
zIndex: number
locale?: any
}
const version = version_ // version_ to fix tsc issue
const defaultInstallOpt: InstallOptions = {
size: '' as ComponentSize,
@ -187,9 +185,9 @@ const plugins = [
const install = (app: App, opt: InstallOptions): void => {
const option = Object.assign(defaultInstallOpt, opt)
use(option.locale)
app.config.globalProperties.$ELEMENT = option
setConfig(option)
components.forEach(component => {
app.component(component.name, component)

8
packages/image/src/index.vue
View File

@ -33,7 +33,7 @@
<script lang='ts'>
import { defineComponent, computed, ref, onMounted, onBeforeUnmount, watch } from 'vue'
import { defineComponent, computed, ref, onMounted, onBeforeUnmount, watch, nextTick } from 'vue'
import { isString } from '@vue/shared'
import throttle from 'lodash/throttle'
import { useAttrs } from '@element-plus/hooks'
@ -97,7 +97,6 @@ export default defineComponent({
const imgHeight = ref(0)
const showViewer = ref(false)
const container = ref<HTMLElement | null>(null)
const show = ref(props.lazy)
let _scrollContainer = null
let _lazyLoadHandler = null
@ -248,12 +247,12 @@ export default defineComponent({
}
watch(() => props.src, () => {
show.value && loadImage()
loadImage()
})
onMounted(() => {
if (props.lazy) {
setTimeout(() => addLazyLoadListener(), 0)
nextTick(addLazyLoadListener)
} else {
loadImage()
}
@ -277,6 +276,7 @@ export default defineComponent({
clickHandler,
closeViewer,
container,
handleError,
t,
}
},

2
packages/loading/src/createLoadingComponent.ts
View File

@ -1,6 +1,6 @@
import { createVNode, reactive, ref, toRefs, h, Transition, render, VNode } from 'vue'
import { removeClass } from '@element-plus/utils/dom'
import type { ILoadingCreateComponentParams, ILoadingInstance } from './loading'
import type { ILoadingCreateComponentParams, ILoadingInstance } from './loading.type'
export function createLoadingComponent({ options , globalLoadingOption }: ILoadingCreateComponentParams): ILoadingInstance {
let vm: VNode = null

2
packages/loading/src/index.ts
View File

@ -1,5 +1,5 @@
import { createLoadingComponent } from './createLoadingComponent'
import type { ILoadingOptions, ILoadingInstance, ILoadingGlobalConfig } from './loading'
import type { ILoadingOptions, ILoadingInstance, ILoadingGlobalConfig } from './loading.type'
import { addClass, getStyle, removeClass } from '@element-plus/utils/dom'
import PopupManager from '@element-plus/utils/popup-manager'
import isServer from '@element-plus/utils/isServer'

0
packages/loading/src/loading.d.ts → packages/loading/src/loading.type.ts
View File

0
packages/message-box/src/message-box.d.ts → packages/message-box/src/message-box.type.ts
View File

2
packages/message-box/src/messageBox.ts
View File

@ -2,7 +2,7 @@ import { createVNode, render } from 'vue'
import MessageBoxConstructor from './index.vue'
import isServer from '@element-plus/utils/isServer'
import { isVNode } from '../../utils/util'
import { ElMessageBoxOptions } from './message-box'
import { ElMessageBoxOptions } from './message-box.type'
let currentMsg, instance

9
packages/message/__tests__/message-manager.spec.ts
View File

@ -7,7 +7,7 @@ type UnknownProps = Record<string, unknown>
jest.useFakeTimers()
const selector = '.el-message'
// TODO: testing the original transition with `nextTick`
const Transition = (_: UnknownProps, { attrs, slots }) =>
Vue.h('div', attrs, slots)
Transition.displayName = 'Transition'
@ -80,4 +80,11 @@ describe('Message on command', () => {
messages.forEach(m => m.close())
})
test('it should have 4 other types of message', () => {
expect(Message.success).toBeInstanceOf(Function)
expect(Message.warning).toBeInstanceOf(Function)
expect(Message.info).toBeInstanceOf(Function)
expect(Message.error).toBeInstanceOf(Function)
})
})

24
packages/message/src/message.ts
View File

@ -1,22 +1,25 @@
import { createVNode, nextTick, render } from 'vue'
import { isVNode } from '@element-plus/utils/util'
import PopupManager from '@element-plus/utils/popup-manager'
import isServer from '@element-plus/utils/isServer'
import MessageConstructor from './index.vue'
import type {
IMessage,
MessageQueue,
IMessageOptions,
MessageVM,
IMessageHandle,
MessageParams,
} from './types'
import MessageConstructor from './index.vue'
import { isVNode } from '@element-plus/utils/util'
import PopupManager from '@element-plus/utils/popup-manager'
import isServer from '@element-plus/utils/isServer'
let vm: MessageVM
const instances: MessageQueue = []
let seed = 1
const Message: IMessage = function (opts = {}): IMessageHandle {
const Message: IMessage = function(
opts: MessageParams = {} as MessageParams,
): IMessageHandle {
if (isServer) return
if (typeof opts === 'string') {
@ -64,7 +67,7 @@ const Message: IMessage = function (opts = {}): IMessageHandle {
return {
close: options.onClose,
}
}
} as any
export function close(id: string, userOnClose?: (vm: MessageVM) => void): void {
const idx = instances.findIndex(({ vm }) => {
@ -85,7 +88,6 @@ export function close(id: string, userOnClose?: (vm: MessageVM) => void): void {
document.body.removeChild($el)
})
instances.splice(idx, 1)
// adjust other instances vertical offset
@ -107,13 +109,15 @@ export function closeAll(): void {
}
}
['success', 'warning', 'info', 'error'].forEach(type => {
Message[type] = (options = {}) => {
(['success', 'warning', 'info', 'error'] as const).forEach(type => {
Message[type] = options => {
if (typeof options === 'string') {
options = {
message: options,
type,
}
} else {
options.type = type
}
return Message(options)
}

21
packages/message/src/types.ts
View File

@ -4,11 +4,6 @@ export interface IMessageHandle {
close: () => void
}
export interface IMessage {
(options?: IMessageOptions | string) : IMessageHandle
closeAll(): void
}
export type IMessageOptions = {
customClass?: string
center?: boolean
@ -24,6 +19,22 @@ export type IMessageOptions = {
zIndex?: number
}
export type MessageType = 'success' | 'warning' | 'info' | 'error' | ''
export type IMessageDispatcher = (options?: IMessageOptions | string) => IMessageHandle
export type MessageParams = IMessageOptions | string
export type TypedMessageParams<T extends MessageType> = { type: T; } & Omit<IMessageOptions, 'type'> | string
export interface IMessage {
(options?: MessageParams) : IMessageHandle
success: (options?: TypedMessageParams<'success'>) => IMessageHandle
warning: (options?: TypedMessageParams<'warning'>) => IMessageHandle
info: (options?: TypedMessageParams<'info'>) => IMessageHandle
error: (options?: TypedMessageParams<'error'>) => IMessageHandle
closeAll(): void
}
export type MessageVM = VNode
type MessageQueueItem = {

2
packages/notification/__tests__/notify.spec.ts
View File

@ -1,5 +1,5 @@
import Notification, { close, closeAll } from '../src/notify'
import type { INotificationHandle } from '../src/notification'
import type { INotificationHandle } from '../src/notification.type'
jest.useFakeTimers()

2
packages/notification/src/index.vue
View File

@ -40,7 +40,7 @@
<script lang="ts">
import { defineComponent, computed, ref, PropType } from 'vue'
// notificationVM is an alias of vue.VNode
import type { NotificationVM } from './notification'
import type { NotificationVM } from './notification.type'
import { EVENT_CODE } from '../../utils/aria'
import { on, off } from '../../utils/dom'

0
packages/notification/src/notification.d.ts → packages/notification/src/notification.type.ts
View File

2
packages/notification/src/notify.ts
View File

@ -1,6 +1,6 @@
import { createVNode, render } from 'vue'
import NotificationConstructor from './index.vue'
import type { INotificationOptions, INotification, NotificationQueue, NotificationVM } from './notification'
import type { INotificationOptions, INotification, NotificationQueue, NotificationVM } from './notification.type'
import isServer from '../../utils/isServer'
import PopupManager from '../../utils/popup-manager'
import { isVNode } from '../../utils/util'

2
packages/option/index.ts
View File

@ -1,5 +1,5 @@
import { App } from 'vue'
import Option from '../select/src/option.vue'
import { Option } from '@element-plus/select'
Option.install = (app: App): void => {
app.component(Option.name, Option)

2
packages/select/index.ts
View File

@ -1,8 +1,10 @@
import { App } from 'vue'
import Select from './src/select.vue'
import Option from './src/option.vue'
Select.install = (app: App): void => {
app.component(Select.name, Select)
}
export { Option }
export default Select

0
packages/slider/src/Slider.d.ts → packages/slider/src/slider.type.ts
View File

2
packages/slider/src/useMarks.ts
View File

@ -1,5 +1,5 @@
import { computed } from 'vue'
import { ISliderProps, Mark } from './Slider'
import { ISliderProps, Mark } from './slider.type'
export const useMarks = (props: ISliderProps) => {

2
packages/slider/src/useSlide.ts
View File

@ -1,7 +1,7 @@
import { computed, inject, nextTick, ref } from 'vue'
import { CHANGE_EVENT } from '@element-plus/utils/constants'
import { elFormKey, elFormItemKey } from '@element-plus/form'
import { ButtonRefs, ISliderInitData, ISliderProps } from './Slider'
import { ButtonRefs, ISliderInitData, ISliderProps } from './slider.type'
import type { ElFormContext, ElFormItemContext } from '@element-plus/form'

2
packages/slider/src/useSliderButton.ts
View File

@ -1,7 +1,7 @@
import { UPDATE_MODEL_EVENT } from '@element-plus/utils/constants'
import { off, on } from '@element-plus/utils/dom'
import { computed, ComputedRef, inject, nextTick, ref, watch } from 'vue'
import { ISliderButtonInitData, ISliderButtonProps, ISliderProvider } from './Slider'
import { ISliderButtonInitData, ISliderButtonProps, ISliderProvider } from './slider.type'
const useTooltip = (props: ISliderButtonProps, formatTooltip: ComputedRef<(value: number) => number | string>, showTooltip: ComputedRef<boolean>) => {

2
packages/slider/src/useStops.ts
View File

@ -1,5 +1,5 @@
import { computed, ComputedRef } from 'vue'
import { ISliderInitData, ISliderProps, Stops } from './Slider'
import { ISliderInitData, ISliderProps, Stops } from './slider.type'
export const useStops = (props: ISliderProps, initData: ISliderInitData, minValue: ComputedRef<number>, maxValue: ComputedRef<number>): Stops => {
const stops = computed(() => {

2
packages/table/src/config.ts
View File

@ -1,7 +1,7 @@
import { getPropByPath } from '@element-plus/utils/util'
import ElCheckbox from '@element-plus/checkbox'
import { h } from 'vue'
import { Store, TreeNode, AnyObject, TableColumnCtx } from './table'
import { Store, TreeNode, AnyObject, TableColumnCtx } from './table.type'
export const cellStarts = {
default: {

2
packages/table/src/filter-panel.vue
View File

@ -98,7 +98,7 @@ import {
WritableComputedRef,
PropType,
} from 'vue'
import { Store, TableColumnCtx, TableHeader } from './table'
import { Store, TableColumnCtx, TableHeader } from './table.type'
export default {
name: 'ElTableFilterPanel',

2
packages/table/src/h-helper.ts
View File

@ -1,5 +1,5 @@
import { h } from 'vue'
import { TableColumnCtx } from './table'
import { TableColumnCtx } from './table.type'
export function hGutter() {
return h('col', {

2
packages/table/src/layout-observer.ts
View File

@ -6,7 +6,7 @@ import {
computed,
getCurrentInstance,
} from 'vue'
import { TableLayout, TableHeader, Table } from './table'
import { TableLayout, TableHeader, Table } from './table.type'
function useLayoutObserver(root: Table) {
const instance = getCurrentInstance() as TableHeader

2
packages/table/src/store/current.ts
View File

@ -1,7 +1,7 @@
import { arrayFind } from '@element-plus/utils/util'
import { getRowIdentity } from '../util'
import { ref, getCurrentInstance, unref } from 'vue'
import { WatcherPropsData, Table, AnyObject } from '../table'
import { WatcherPropsData, Table, AnyObject } from '../table.type'
function useCurrent(watcherData: WatcherPropsData) {
const instance = getCurrentInstance() as Table

2
packages/table/src/store/expand.ts
View File

@ -1,6 +1,6 @@
import { ref, getCurrentInstance } from 'vue'
import { toggleRowStatus, getKeysMap, getRowIdentity } from '../util'
import { WatcherPropsData, Table } from '../table'
import { WatcherPropsData, Table } from '../table.type'
function useExpand(watcherData: WatcherPropsData) {
const instance = getCurrentInstance() as Table

2
packages/table/src/store/helper.ts
View File

@ -1,6 +1,6 @@
import Store from './index'
import { debounce } from 'lodash'
import { Table } from '../table'
import { Table } from '../table.type'
export function createStore(table: Table, initialState = {}) {
if (!table) {

2
packages/table/src/store/index.ts
View File

@ -1,7 +1,7 @@
import { nextTick, getCurrentInstance, unref } from 'vue'
import { arrayFind } from '@element-plus/utils/util'
import useWatcher from './watcher'
import { Table, Store, TableColumnCtx } from '../table'
import { Table, Store, TableColumnCtx } from '../table.type'
function replaceColumn(array: TableColumnCtx[], column: TableColumnCtx) {
return array.map(item => {

2
packages/table/src/store/tree.ts
View File

@ -1,6 +1,6 @@
import { walkTreeNode, getRowIdentity } from '../util'
import { ref, computed, watch, getCurrentInstance, unref } from 'vue'
import { WatcherPropsData, Table, fn } from '../table'
import { WatcherPropsData, Table, fn } from '../table.type'
function useTree(watcherData: WatcherPropsData) {
const expandRowKeys = ref([])

2
packages/table/src/store/watcher.ts
View File

@ -11,7 +11,7 @@ import {
import useExpand from './expand'
import useCurrent from './current'
import useTree from './tree'
import { AnyObject, Table } from '../table'
import { AnyObject, Table } from '../table.type'
const sortData = (data, states) => {
const sortingColumn = states.sortingColumn

2
packages/table/src/table-body/events-helper.ts
View File

@ -3,7 +3,7 @@ import { getStyle, hasClass } from '@element-plus/utils/dom'
import { getCell, getColumnByCell } from '../util'
import { debounce } from 'lodash'
import { TableBodyProps } from './table-body'
import { Table, AnyObject, TableColumnCtx } from '../table'
import { Table, AnyObject, TableColumnCtx } from '../table.type'
function useEvents(props: TableBodyProps) {
const instance = getCurrentInstance()

2
packages/table/src/table-body/index.ts
View File

@ -4,7 +4,7 @@ import isServer from '@element-plus/utils/isServer'
import { defineComponent, getCurrentInstance, h, PropType, watch } from 'vue'
import { hColgroup } from '../h-helper'
import useLayoutObserver from '../layout-observer'
import { Store, Table } from '../table'
import { Store, Table } from '../table.type'
import useRender from './render-helper'
import { TableBodyProps } from './table-body'
export default defineComponent({

2
packages/table/src/table-body/render-helper.ts
View File

@ -4,7 +4,7 @@ import useStyles from './styles-helper'
import { arrayFindIndex } from '@element-plus/utils/util'
import { getRowIdentity } from '../util'
import { TableBodyProps } from './table-body'
import { RenderRowData, AnyObject, Table } from '../table'
import { RenderRowData, AnyObject, Table } from '../table.type'
function useRender(props: TableBodyProps) {
const instance = getCurrentInstance()

2
packages/table/src/table-body/styles-helper.ts
View File

@ -1,6 +1,6 @@
import { getCurrentInstance } from 'vue'
import { TableBodyProps } from './table-body'
import { Table, AnyObject, TableColumnCtx } from '../table'
import { Table, AnyObject, TableColumnCtx } from '../table.type'
function useStyles(props: TableBodyProps) {
const instance = getCurrentInstance()

2
packages/table/src/table-body/table-body.d.ts vendored
View File

@ -1,4 +1,4 @@
import { Store, AnyObject, fn } from '../table'
import { Store, AnyObject, fn } from '../table.type'
interface TableBodyProps {
store: Store

2
packages/table/src/table-column/index.ts
View File

@ -10,7 +10,7 @@ import {
import { cellStarts } from '../config'
import { mergeOptions, compose } from '../util'
import ElCheckbox from '@element-plus/checkbox'
import { TableColumnCtx, TableColumn } from '../table'
import { TableColumnCtx, TableColumn } from '../table.type'
import useWatcher from './watcher-helper'
import useRender from './render-helper'

2
packages/table/src/table-column/render-helper.ts
View File

@ -8,7 +8,7 @@ import {
} from 'vue'
import { cellForced, defaultRenderCell, treeCellPrefix } from '../config'
import { parseWidth, parseMinWidth } from '../util'
import { TableColumn, TableColumnCtx } from '../table'
import { TableColumn, TableColumnCtx } from '../table.type'
function useRender(props: TableColumnCtx, slots, owner: ComputedRef<any>) {
const instance = (getCurrentInstance() as unknown) as TableColumn

2
packages/table/src/table-column/watcher-helper.ts
View File

@ -1,5 +1,5 @@
import { watch, getCurrentInstance, ComputedRef } from 'vue'
import { TableColumnCtx, TableColumn } from '../table'
import { TableColumnCtx, TableColumn } from '../table.type'
function useWatcher(owner: ComputedRef<any>, props_: TableColumnCtx) {
const instance = (getCurrentInstance() as unknown) as TableColumn

2
packages/table/src/table-footer/index.ts
View File

@ -1,5 +1,5 @@
import { defineComponent, h } from 'vue'
import { TableFooter } from '../table'
import { TableFooter } from '../table.type'
import { hGutter, hColgroup } from '../h-helper'
import useStyle from './style-helper'

2
packages/table/src/table-footer/mapState-helper.ts
View File

@ -1,5 +1,5 @@
import { computed, getCurrentInstance } from 'vue'
import { Table } from '../table'
import { Table } from '../table.type'
function useMapState() {
const instance = getCurrentInstance()

2
packages/table/src/table-footer/style-helper.ts
View File

@ -1,5 +1,5 @@
import { computed, getCurrentInstance } from 'vue'
import { Table, TableFooter, TableColumnCtx } from '../table'
import { Table, TableFooter, TableColumnCtx } from '../table.type'
import useMapState from './mapState-helper'
function useStyle(props: TableFooter) {

2
packages/table/src/table-header/event-helper.ts
View File

@ -1,7 +1,7 @@
import { getCurrentInstance, ref } from 'vue'
import { hasClass, addClass, removeClass } from '@element-plus/utils/dom'
import isServer from '@element-plus/utils/isServer'
import { TableColumnCtx, Table } from '../table'
import { TableColumnCtx, Table } from '../table.type'
import { TableHeaderProps } from './table-header'
function useEvent(props: TableHeaderProps, emit) {

2
packages/table/src/table-header/index.ts
View File

@ -14,7 +14,7 @@ import useEvent from './event-helper'
import useStyle from './style.helper'
import useUtils from './utils-helper'
import { hColgroup } from '../h-helper'
import { Table, TableHeader } from '../table'
import { Table, TableHeader } from '../table.type'
import { TableHeaderProps } from './table-header'
export default defineComponent({

2
packages/table/src/table-header/style.helper.ts
View File

@ -1,5 +1,5 @@
import { getCurrentInstance } from 'vue'
import { TableColumnCtx, AnyObject, Table } from '../table'
import { TableColumnCtx, AnyObject, Table } from '../table.type'
import { TableHeaderProps } from './table-header'
function useStyle(props: TableHeaderProps) {

2
packages/table/src/table-header/table-header.d.ts vendored
View File

@ -1,4 +1,4 @@
import { Store } from '../table'
import { Store } from '../table.type'
interface TableHeaderProps {
fixed: string

2
packages/table/src/table-header/utils-helper.ts
View File

@ -1,5 +1,5 @@
import { getCurrentInstance, computed } from 'vue'
import { Table, TableColumnCtx } from '../table'
import { Table, TableColumnCtx } from '../table.type'
import { TableHeaderProps } from './table-header'
const getAllColumns = (columns: TableColumnCtx[]): TableColumnCtx[] => {

2
packages/table/src/table-layout.ts
View File

@ -2,7 +2,7 @@ import { nextTick, ref, isRef, Ref } from 'vue'
import scrollbarWidth from '@element-plus/utils/scrollbar-width'
import isServer from '@element-plus/utils/isServer'
import { parseHeight } from './util'
import { AnyObject, Table, Store, TableHeader, TableColumnCtx } from './table'
import { AnyObject, Table, Store, TableHeader, TableColumnCtx } from './table.type'
class TableLayout {
observers: TableHeader[]

0
packages/table/src/table.d.ts → packages/table/src/table.type.ts
View File

2
packages/table/src/table.vue
View File

@ -272,7 +272,7 @@ import TableFooter from './table-footer/index'
import { debounce } from 'lodash'
import useUtils from './table/utils-helper'
import useStyle from './table/style-helper'
import { TableProps, Table } from './table'
import { TableProps, Table } from './table.type'
let tableIdSeed = 1
export default defineComponent({

2
packages/table/src/table/style-helper.ts
View File

@ -13,7 +13,7 @@ import {
Store,
TableColumnCtx,
fn,
} from '../table'
} from '../table.type'
function useStyle(
props: TableProps,

2
packages/table/src/table/utils-helper.ts
View File

@ -1,5 +1,5 @@
import { ComputedRef } from 'vue'
import { Store, AnyObject, TableLayout } from '../table'
import { Store, AnyObject, TableLayout } from '../table.type'
function useUtils(store: Store, layout: TableLayout, shouldUpdateHeight: ComputedRef<unknown>) {
const setCurrentRow = (row: AnyObject) => {

2
packages/table/src/util.ts
View File

@ -1,5 +1,5 @@
import { getValueByPath } from '@element-plus/utils/util'
import { AnyObject, TableColumnCtx } from './table'
import { AnyObject, TableColumnCtx } from './table.type'
export const getCell = function (event: Event): HTMLElement {
let cell = event.target as HTMLElement

2
packages/theme-chalk/src/common/var.scss
View File

@ -767,7 +767,7 @@ $--slider-border-radius: 3px !default;
/// height|1|Other|4
$--slider-height: 6px !default;
/// height||Other|4
$--slider-button-size: 16px !default;
$--slider-button-size: 20px !default;
$--slider-button-wrapper-size: 36px !default;
$--slider-button-wrapper-offset: -15px !default;

2
packages/theme-chalk/src/slider.scss
View File

@ -101,6 +101,7 @@
text-align: center;
user-select: none;
line-height: normal;
outline: none;
@include utils-vertical-center;
&:hover,
@ -121,6 +122,7 @@
border: solid 2px $--slider-main-background-color;
background-color: $--color-white;
border-radius: 50%;
box-sizing: border-box;
transition: .2s;
user-select: none;

2
packages/tree/src/model/node.ts
View File

@ -9,7 +9,7 @@ import {
FakeNode,
TreeNodeLoadedDefaultProps,
TreeNodeChildState,
} from '../tree.d'
} from '../tree.type'
export const getChildState = (node: Node[]): TreeNodeChildState => {
let all = true

2
packages/tree/src/model/tree-store.ts
View File

@ -10,7 +10,7 @@ import {
TreeStoreOptions,
FilterValue,
TreeNodeData,
} from '../tree.d'
} from '../tree.type'
export default class TreeStore {
currentNode: Node

2
packages/tree/src/model/util.ts
View File

@ -1,5 +1,5 @@
import Node from './node'
import { TreeKey, TreeNodeData } from '../tree.d'
import { TreeKey, TreeNodeData } from '../tree.type'
export const NODE_KEY = '$treeNodeId'

2
packages/tree/src/tree-node-content.vue
View File

@ -1,6 +1,6 @@
<script lang='ts'>
import { h, defineComponent, inject, ComponentInternalInstance } from 'vue'
import { RootTreeType } from './tree.d'
import { RootTreeType } from './tree.type'
export default defineComponent({
name: 'ElTreeNodeContent',

2
packages/tree/src/tree-node.vue
View File

@ -84,7 +84,7 @@ import { getNodeKey as getNodeKeyUtil } from './model/util'
import { useNodeExpandEventBroadcast } from './model/useNodeExpandEventBroadcast'
import { useDragNodeEmitter } from './model/useDragNode'
import Node from './model/node'
import { TreeOptionProps, TreeNodeData, RootTreeType } from './tree.d'
import { TreeOptionProps, TreeNodeData, RootTreeType } from './tree.type'
export default defineComponent({
name: 'ElTreeNode',

0
packages/tree/src/tree.d.ts → packages/tree/src/tree.type.ts
View File

2
packages/tree/src/tree.vue
View File

@ -47,7 +47,7 @@ import {
TreeKey,
TreeData,
RootTreeType,
} from './tree.d'
} from './tree.type'
export default defineComponent({
name: 'ElTree',

2
packages/upload/src/ajax.ts
View File

@ -2,7 +2,7 @@ import type {
ElUploadProgressEvent,
ElUploadRequestOptions,
ElUploadAjaxError,
} from './upload'
} from './upload.type'
function getError(action: string, option: ElUploadRequestOptions, xhr: XMLHttpRequest) {
let msg: string

2
packages/upload/src/index.vue
View File

@ -24,7 +24,7 @@ import type {
UploadFile,
FileHandler,
FileResultHandler,
} from './upload'
} from './upload.type'
type PFileHandler<T> = PropType<FileHandler<T>>
type PFileResultHandler<T = any> = PropType<FileResultHandler<T>>

2
packages/upload/src/upload-dragger.vue
View File

@ -14,7 +14,7 @@
<script lang="ts">
import { defineComponent, ref, inject } from 'vue'
import type { ElUpload } from './upload'
import type { ElUpload } from './upload.type'
export default defineComponent({
name: 'ElUploadDrag',

0
packages/upload/src/upload.d.ts → packages/upload/src/upload.type.ts
View File

2
packages/upload/src/upload.vue
View File

@ -33,7 +33,7 @@ import ajax from './ajax'
import UploadDragger from './upload-dragger.vue'
import type { PropType } from 'vue'
import type { ListType, UploadFile, ElFile } from './upload'
import type { ListType, UploadFile, ElFile } from './upload.type'
type IFileHanlder = (
file: Nullable<ElFile[]>,

2
packages/upload/src/useHandlers.ts
View File

@ -3,7 +3,7 @@ import { ref, watch } from 'vue'
import { NOOP } from '@vue/shared'
// Inline types
import type { ListType, UploadFile, ElFile, ElUploadProgressEvent, IUseHandlersProps } from './upload'
import type { ListType, UploadFile, ElFile, ElUploadProgressEvent, IUseHandlersProps } from './upload.type'
type UploadRef = {
abort: (file: UploadFile) => void
upload: (file: ElFile) => void

16
packages/utils/config.ts
View File

@ -1,11 +1,17 @@
const $ELEMENT: Record<string, unknown> = { }
const setConfig = (key: string, value: unknown): void => {
$ELEMENT[key] = value
export interface InstallOptions {
size: ComponentSize
zIndex: number
locale?: any
}
const getConfig = (key: string): unknown => {
let $ELEMENT = { } as InstallOptions
const setConfig = (option: InstallOptions): void => {
$ELEMENT = option
}
const getConfig = (key: keyof InstallOptions): unknown => {
return $ELEMENT[key]
}

2
packages/utils/popup-manager.ts
View File

@ -88,7 +88,7 @@ const PopupManager: IPopupManager = {
},
nextZIndex: function() {
return PopupManager.zIndex++
return ++PopupManager.zIndex
},
modalStack: [],

27
website/assets/images/bit.svg Normal file
View File

@ -0,0 +1,27 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="35px" height="22px" viewBox="0 0 35 22" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 51.2 (57519) - http://www.bohemiancoding.com/sketch -->
<title>logo_bit</title>
<desc>Created with Sketch.</desc>
<defs>
<linearGradient x1="50%" y1="0%" x2="50%" y2="99.0290824%" id="linearGradient-1">
<stop stop-color="#73398D" offset="0%"></stop>
<stop stop-color="#594A95" offset="100%"></stop>
</linearGradient>
<path d="M26.6196361,18.2069476 C26.6196361,22.6670388 23.9329675,25.5386044 19.1154927,25.5386044 C17.3861428,25.5386044 15.7803179,25.2025701 14.545068,24.499953 C13.1245306,23.7056902 13.1245306,22.6975874 13.1245306,21.658936 L13.1245306,6.23190824 C13.1245306,5.13215973 13.803918,4.58228547 15.1935742,4.58228547 C16.5832304,4.58228547 17.2626178,5.13215973 17.2626178,6.23190824 L17.2626178,12.0972336 C18.034649,11.577908 19.0537302,11.3335194 20.2272177,11.3335194 C23.99473,11.3335194 26.6196361,13.8079536 26.6196361,18.2069476 Z M17.2626178,21.7811303 C17.7875991,22.086616 18.4361053,22.2393588 19.146374,22.2393588 C21.1536551,22.2393588 22.3889051,20.8952218 22.3889051,18.4818847 C22.3889051,16.0379992 21.1227739,14.6327649 19.2081365,14.6327649 C18.4669865,14.6327649 17.7875991,14.8466049 17.2626178,15.2437363 L17.2626178,21.7811303 Z M33.9693732,7.30110818 C33.9693732,8.7063424 32.950292,9.68389663 31.5297546,9.68389663 C30.1092172,9.68389663 29.090136,8.7063424 29.090136,7.30110818 C29.090136,5.89587397 30.1092172,4.94886831 31.5297546,4.94886831 C32.950292,4.94886831 33.9693732,5.89587397 33.9693732,7.30110818 Z M33.5987982,12.9831422 L33.5987982,23.8278845 C33.5987982,24.927633 32.9194108,25.4775072 31.5297546,25.4775072 C30.1400984,25.4775072 29.4607109,24.927633 29.4607109,23.8278845 L29.4607109,12.9831422 C29.4607109,11.8833937 30.1400984,11.3335194 31.5297546,11.3335194 C32.9194108,11.3335194 33.5987982,11.8833937 33.5987982,12.9831422 Z M45.7351288,21.8116788 C46.877735,21.8116788 47.2174287,23.0030731 47.2174287,23.6751416 C47.2174287,24.1028216 47.0630225,24.5305016 46.4762788,24.8665358 C45.7968913,25.2636672 44.6234039,25.5386044 43.4190352,25.5386044 C41.1955853,25.5386044 39.8676916,24.6526958 39.1883042,23.430753 C38.5706792,22.3310045 38.5089167,21.017416 38.5089167,19.6121818 L38.5089167,15.0298963 L37.428073,15.0298963 C36.3163481,15.0298963 35.7604856,14.4800221 35.7604856,13.3191764 C35.7604856,12.1583308 36.3163481,11.6084565 37.428073,11.6084565 L38.5089167,11.6084565 L38.5089167,8.92018238 C38.5089167,7.82043387 39.1883042,7.27055961 40.5779604,7.27055961 C41.9676165,7.27055961 42.647004,7.82043387 42.647004,8.92018238 L42.647004,11.6084565 L45.2410289,11.6084565 C46.3527538,11.6084565 46.9086163,12.1583308 46.9086163,13.3191764 C46.9086163,14.4800221 46.3527538,15.0298963 45.2410289,15.0298963 L42.647004,15.0298963 L42.647004,19.6121818 C42.647004,20.1620561 42.647004,20.9563189 42.9249352,21.4756446 C43.141104,21.9033246 43.5425602,22.086616 44.0675414,22.086616 C44.4072351,22.086616 44.7469289,21.9949703 45.0248601,21.9338731 C45.2719101,21.872776 45.4880788,21.8116788 45.7351288,21.8116788 Z" id="path-2"></path>
</defs>
<g id="Design" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="States" transform="translate(-1161.000000, -260.000000)">
<g id="nav" transform="translate(768.000000, 224.000000)">
<g transform="translate(47.000000, 32.000000)" id="Logos-/-bit_logo-pressed">
<g transform="translate(333.000000, 0.000000)">
<g id="bit">
<use fill="#11222D" xlink:href="#path-2"></use>
<use fill="black" xlink:href="#path-2"></use>
</g>
</g>
</g>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 3.9 KiB

175
website/assets/images/tipe.svg
View File

@ -1,175 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 148.32 226.69">
<defs>
<style>
.cls-1 {
isolation: isolate;
}
.cls-2 {
fill: url(#radial-gradient);
}
.cls-3 {
fill: url(#linear-gradient);
}
.cls-4 {
fill: url(#linear-gradient-2);
}
.cls-5 {
fill: url(#linear-gradient-3);
}
.cls-6 {
fill: url(#linear-gradient-4);
}
.cls-7 {
fill: url(#linear-gradient-5);
}
.cls-8 {
fill: url(#linear-gradient-6);
}
.cls-9 {
opacity: 0.7;
}
.cls-11, .cls-9 {
mix-blend-mode: multiply;
}
.cls-10 {
fill: url(#linear-gradient-7);
}
.cls-12 {
fill: url(#linear-gradient-8);
}
.cls-13 {
fill: url(#linear-gradient-9);
}
.cls-14 {
fill: #3c2e36;
}
.cls-15 {
fill: url(#linear-gradient-10);
}
.cls-16 {
fill: url(#radial-gradient-2);
}
</style>
<radialGradient id="radial-gradient" cx="74.93" cy="117.87" r="86.39" gradientTransform="translate(0 22.72) scale(1 1.07)" gradientUnits="userSpaceOnUse">
<stop offset="0.32" stop-color="#e4dce1"/>
<stop offset="0.48" stop-color="#e1dadf"/>
<stop offset="0.59" stop-color="#d9d3da"/>
<stop offset="0.68" stop-color="#cac7d2"/>
<stop offset="0.76" stop-color="#b5b6c6"/>
<stop offset="0.79" stop-color="#aaadc0"/>
<stop offset="1" stop-color="#6f6f85"/>
</radialGradient>
<linearGradient id="linear-gradient" x1="38.85" y1="122.53" x2="108.18" y2="108.38" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#e4dce1"/>
<stop offset="0.19" stop-color="#d7d0d7"/>
<stop offset="0.53" stop-color="#b5b2be"/>
<stop offset="0.97" stop-color="#808296"/>
</linearGradient>
<linearGradient id="linear-gradient-2" x1="32.25" y1="64.7" x2="148.44" y2="64.7" gradientUnits="userSpaceOnUse">
<stop offset="0.32" stop-color="#e4dce1"/>
<stop offset="0.49" stop-color="#e1dadf"/>
<stop offset="0.6" stop-color="#d9d3da"/>
<stop offset="0.69" stop-color="#cac7d2"/>
<stop offset="0.78" stop-color="#b5b6c6"/>
<stop offset="0.81" stop-color="#aaadc0"/>
<stop offset="1" stop-color="#6f6f85"/>
</linearGradient>
<linearGradient id="linear-gradient-3" x1="139.11" y1="68.34" x2="139.11" y2="1.17" gradientUnits="userSpaceOnUse">
<stop offset="0.12" stop-color="#888aa0"/>
<stop offset="0.54" stop-color="#716f8a"/>
<stop offset="0.89" stop-color="#635d7c"/>
</linearGradient>
<linearGradient id="linear-gradient-4" x1="111.94" y1="16.05" x2="135.36" y2="16.05" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#3c314b"/>
<stop offset="0.54" stop-color="#534a67"/>
<stop offset="0.89" stop-color="#635d7c"/>
</linearGradient>
<linearGradient id="linear-gradient-5" x1="6752.04" y1="68.34" x2="6752.04" y2="-3.45" gradientTransform="matrix(-1, 0, 0, 1, 6787.68, 0)" gradientUnits="userSpaceOnUse">
<stop offset="0.19" stop-color="#e4dce1"/>
<stop offset="0.42" stop-color="#c2bac6"/>
<stop offset="0.92" stop-color="#6b6582"/>
<stop offset="0.97" stop-color="#635d7c"/>
</linearGradient>
<linearGradient id="linear-gradient-6" x1="39.39" y1="16.05" x2="62.82" y2="16.05" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#3c314b"/>
<stop offset="0.02" stop-color="#3d324c"/>
<stop offset="0.35" stop-color="#524a66"/>
<stop offset="0.65" stop-color="#5f5876"/>
<stop offset="0.89" stop-color="#635d7c"/>
</linearGradient>
<linearGradient id="linear-gradient-7" x1="79.66" y1="229.05" x2="79.66" y2="194.82" gradientUnits="userSpaceOnUse">
<stop offset="0.03" stop-color="#808296"/>
<stop offset="0.31" stop-color="#b7b8c3" stop-opacity="0.78"/>
<stop offset="0.79" stop-color="#fff" stop-opacity="0.5"/>
</linearGradient>
<linearGradient id="linear-gradient-8" x1="87.38" y1="117.84" x2="87.38" y2="41.77" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#e3dddf" stop-opacity="0"/>
<stop offset="0.04" stop-color="#cbc5cd" stop-opacity="0.12"/>
<stop offset="0.15" stop-color="#9d97a9" stop-opacity="0.37"/>
<stop offset="0.25" stop-color="#7b758f" stop-opacity="0.54"/>
<stop offset="0.35" stop-color="#67617f" stop-opacity="0.65"/>
<stop offset="0.45" stop-color="#605a7a" stop-opacity="0.68"/>
<stop offset="0.54" stop-color="#575070" stop-opacity="0.75"/>
<stop offset="1" stop-color="#382e4a"/>
</linearGradient>
<linearGradient id="linear-gradient-9" x1="11357.22" y1="78.8" x2="11361.46" y2="58.49" gradientTransform="matrix(-1, 0, 0, 1, 11419.34, 0)" gradientUnits="userSpaceOnUse">
<stop offset="0.07" stop-color="#28ffff"/>
<stop offset="0.41" stop-color="#51d2ff"/>
<stop offset="0.8" stop-color="#7ba3ff"/>
<stop offset="1" stop-color="#8b91ff"/>
</linearGradient>
<linearGradient id="linear-gradient-10" x1="113" y1="78.8" x2="117.24" y2="58.49" gradientTransform="matrix(1, 0, 0, 1, 0, 0)" xlink:href="#linear-gradient-9"/>
<radialGradient id="radial-gradient-2" cx="36.09" cy="124.71" r="36.13" gradientUnits="userSpaceOnUse">
<stop offset="0.11" stop-color="#635d7c"/>
<stop offset="0.35" stop-color="#5f5876"/>
<stop offset="0.65" stop-color="#524a66"/>
<stop offset="0.98" stop-color="#3d324c"/>
<stop offset="1" stop-color="#3c314b"/>
</radialGradient>
</defs>
<title>Asset 3</title>
<g class="cls-1">
<g id="Layer_2" data-name="Layer 2">
<g id="Layer_1-2" data-name="Layer 1">
<g>
<path class="cls-2" d="M138.13,128.27c-4.7-9.78-11.29-21.28-9.75-33.55a15.83,15.83,0,0,1,3.26-8.26A65.12,65.12,0,0,1,114.75,99a64.1,64.1,0,0,1-6.11,2.76,66.61,66.61,0,0,0-14.35,9.42c-13.43,11.7-26.21,44.39-48.51,50.6h0a23.9,23.9,0,0,1-9.81,2c-9.41-.07-20.4-6.21-26.26-15.43C1,134.68,3.58,115.85,9.49,103.81c-.18.37-.37.74-.55,1.13a102.51,102.51,0,0,0-4.2,10.42v0A86.37,86.37,0,0,0,0,143.69c0,45.84,35.49,83,79.27,83,11.19,0,29-3.38,43.66-13.61a57.75,57.75,0,0,0,22.57-32C151.54,158.58,144.94,142.45,138.13,128.27Z"/>
<path class="cls-3" d="M51.46,158.37a27,27,0,0,1-5.67,3.38h0c22.3-6.21,35.07-38.9,48.51-50.6a66.61,66.61,0,0,1,14.35-9.42,58.67,58.67,0,0,1-21.26,4.09c-19.75,0-37.75-10.49-48.31-24,1,1.39,13,15.46,22.29,43.72A30,30,0,0,1,51.46,158.37Z"/>
<path class="cls-4" d="M145.33,59.56c-2.08,22.29-28.26,46.26-58,46.26-29.95,0-55.88-24.12-58-46.26-1.45-15.6,7.34-36,58-36S146.78,44,145.33,59.56Z"/>
<path class="cls-5" d="M135.36,0h0a51.59,51.59,0,0,0-4.68,32.1A37.21,37.21,0,0,1,134,34.24c10,7.23,12.12,17,11.34,25.32a35.2,35.2,0,0,1-1.6,7.61A73.45,73.45,0,0,0,142.08,12,71.18,71.18,0,0,0,135.36,0Z"/>
<path class="cls-6" d="M130.68,32.1A51.59,51.59,0,0,1,135.36,0h0a57.92,57.92,0,0,0-9.41,6.87,59.8,59.8,0,0,0-14,18.75q3.35.64,6.29,1.45A53.09,53.09,0,0,1,130.68,32.1Z"/>
<path class="cls-7" d="M39.39,0h0a51.59,51.59,0,0,1,4.68,32.1,37.21,37.21,0,0,0-3.31,2.14c-10,7.23-12.12,17-11.34,25.32A35.2,35.2,0,0,0,31,67.17,73.45,73.45,0,0,1,32.67,12,71.18,71.18,0,0,1,39.39,0Z"/>
<path class="cls-8" d="M48.81,6.87A57.92,57.92,0,0,0,39.39,0h0a51.59,51.59,0,0,1,4.68,32.1,53.09,53.09,0,0,1,12.45-5q2.94-.82,6.29-1.45A59.8,59.8,0,0,0,48.81,6.87Z"/>
<g class="cls-9">
<path class="cls-10" d="M84.24,182.6c-26.08,0-49.56,5.42-66,14.08,14.54,18.33,36.47,30,61,30,11.19,0,29-3.38,43.66-13.61A58.81,58.81,0,0,0,141,192.47C125.56,186.3,105.79,182.6,84.24,182.6Z"/>
</g>
<g>
<g class="cls-11">
<path class="cls-12" d="M138.51,52.94c-.56-2.94-2-5.19-5-5.88-7.88-1.85-27,9.84-37.8,15.34-4,2.06-6.16,3.05-8.34,3s-4.31-.94-8.34-3c-10.77-5.5-29.92-17.18-37.8-15.34-3,.7-4.44,2.94-5,5.88-1,5.16.35,18,9.89,27.49,7.14,7.11,16.68,10.46,24.69,12.71l.18.08a4.2,4.2,0,0,0-.09.88c0,3.28,3.83,5.94,8.56,5.94,2.34,0,6.35-.65,7.9-1.71h0c1.55,1.06,5.56,1.71,7.9,1.71,4.73,0,8.56-2.66,8.56-5.94a4.2,4.2,0,0,0-.09-.88l.18-.08c8-2.25,17.56-5.6,24.69-12.71C138.16,70.92,139.49,58.1,138.51,52.94Z"/>
</g>
<path class="cls-13" d="M75.26,75.35C64.56,86.85,47.81,77.09,45,63.28c-1.83-9.07,3.63-7.73,8.71-5.67C60.14,60.2,68.84,66.27,75.26,75.35Z"/>
<path class="cls-14" d="M60.43,68.26a15.16,15.16,0,0,1-2.19,8,15.56,15.56,0,0,1,0-15.92A15.16,15.16,0,0,1,60.43,68.26Z"/>
<path d="M87.36,86.64a8.15,8.15,0,0,0-6.27,2.49c8.25,5.17,4.31,5.17,12.55,0A8.15,8.15,0,0,0,87.36,86.64Z"/>
<path class="cls-15" d="M99.86,75.35c10.69,11.5,27.45,1.74,30.23-12.07,1.83-9.07-3.63-7.73-8.71-5.67C115,60.2,106.28,66.27,99.86,75.35Z"/>
<path class="cls-14" d="M114.69,68.26a15.16,15.16,0,0,0,2.19,8,15.56,15.56,0,0,0,0-15.92A15.16,15.16,0,0,0,114.69,68.26Z"/>
</g>
<path class="cls-16" d="M9.71,148.35c5.86,9.22,16.85,15.37,26.26,15.43a23.7,23.7,0,0,0,8.21-1.41l0,0c-15,4.18-19.32-25.16-10.92-43.06v0c1.09-3.38,2.35-6.34,3.42-8.83.37-.86,2.53-5.15,2.09-9.8-.84-9-14-17.33-24-5.37A44.52,44.52,0,0,0,9.39,104C3.55,116.06,1.08,134.76,9.71,148.35Z"/>
</g>
</g>
</g>
</g>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 9.2 KiB

22
website/components/side-nav.vue
View File

@ -6,21 +6,21 @@
@mouseenter="isFade = false"
>
<ul>
<!-- <li class="nav-item sponsors">
<li class="nav-item sponsors">
<a>{{ lang === 'zh-CN' ? '赞助商' : 'Sponsors' }}</a>
<ul class="pure-menu-list sub-nav">
<li v-show="lang !== 'zh-CN'" class="nav-item">
<a href="https://tipe.io/?ref=element" target="_blank">
<img src="~examples/assets/images/tipe.svg" alt="tipe.io">
</a>
</li>
<li class="nav-item">
<a class="sponsor" href="https://www.duohui.cn/?utm_source=element&utm_medium=web&utm_campaign=element-index" target="_blank">
<img src="~examples/assets/images/duohui.svg" alt="duohui">
</a>
</li>
<li class="nav-item">
<a class="sponsor" href="https://bit.dev/?from=element-ui" target="_blank">
<img src="~examples/assets/images/bit.svg" alt="bit">
</a>
</li>
</ul>
</li> -->
</li>
<li
v-for="(item, keyy) in data"
:key="keyy"
@ -262,16 +262,12 @@ export default {
height: auto;
display: inline-block;
vertical-align: middle;
margin: 8px 12px 12px 0;
margin: 8px 20px 4px 0;
img {
width: 42px;
width: 36px;
}
}
&:first-child a img {
width: 36px;
}
}
}
}

6
website/demo-styles/container.scss
View File

@ -28,9 +28,11 @@
line-height: 160px;
}
& > .source > .el-container {
& > .source > div > .el-container {
margin-bottom: 40px;
&:last-child {
margin-bottom: 0;
}
&:nth-child(5) .el-aside,
&:nth-child(6) .el-aside {
line-height: 260px;

30
website/docs/en-US/container.md
View File

@ -117,9 +117,9 @@ These components use flex for layout, so please make sure your browser supports
<el-aside width="200px" style="background-color: rgb(238, 241, 246)">
<el-menu :default-openeds="['1', '3']">
<el-submenu index="1">
<template slot="title"><i class="el-icon-message"></i>Navigator One</template>
<template #title><i class="el-icon-message"></i>Navigator One</template>
<el-menu-item-group>
<template slot="title">Group 1</template>
<template #title>Group 1</template>
<el-menu-item index="1-1">Option 1</el-menu-item>
<el-menu-item index="1-2">Option 2</el-menu-item>
</el-menu-item-group>
@ -127,14 +127,14 @@ These components use flex for layout, so please make sure your browser supports
<el-menu-item index="1-3">Option 3</el-menu-item>
</el-menu-item-group>
<el-submenu index="1-4">
<template slot="title">Option4</template>
<template #title>Option4</template>
<el-menu-item index="1-4-1">Option 4-1</el-menu-item>
</el-submenu>
</el-submenu>
<el-submenu index="2">
<template slot="title"><i class="el-icon-menu"></i>Navigator Two</template>
<template #title><i class="el-icon-menu"></i>Navigator Two</template>
<el-menu-item-group>
<template slot="title">Group 1</template>
<template #title>Group 1</template>
<el-menu-item index="2-1">Option 1</el-menu-item>
<el-menu-item index="2-2">Option 2</el-menu-item>
</el-menu-item-group>
@ -142,14 +142,14 @@ These components use flex for layout, so please make sure your browser supports
<el-menu-item index="2-3">Option 3</el-menu-item>
</el-menu-item-group>
<el-submenu index="2-4">
<template slot="title">Option 4</template>
<template #title>Option 4</template>
<el-menu-item index="2-4-1">Option 4-1</el-menu-item>
</el-submenu>
</el-submenu>
<el-submenu index="3">
<template slot="title"><i class="el-icon-setting"></i>Navigator Three</template>
<template #title><i class="el-icon-setting"></i>Navigator Three</template>
<el-menu-item-group>
<template slot="title">Group 1</template>
<template #title>Group 1</template>
<el-menu-item index="3-1">Option 1</el-menu-item>
<el-menu-item index="3-2">Option 2</el-menu-item>
</el-menu-item-group>
@ -157,7 +157,7 @@ These components use flex for layout, so please make sure your browser supports
<el-menu-item index="3-3">Option 3</el-menu-item>
</el-menu-item-group>
<el-submenu index="3-4">
<template slot="title">Option 4</template>
<template #title>Option 4</template>
<el-menu-item index="3-4-1">Option 4-1</el-menu-item>
</el-submenu>
</el-submenu>
@ -168,11 +168,13 @@ These components use flex for layout, so please make sure your browser supports
<el-header style="text-align: right; font-size: 12px">
<el-dropdown>
<i class="el-icon-setting" style="margin-right: 15px"></i>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item>View</el-dropdown-item>
<el-dropdown-item>Add</el-dropdown-item>
<el-dropdown-item>Delete</el-dropdown-item>
</el-dropdown-menu>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item>View</el-dropdown-item>
<el-dropdown-item>Add</el-dropdown-item>
<el-dropdown-item>Delete</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
<span>Tom</span>
</el-header>

30
website/docs/es/container.md
View File

@ -118,9 +118,9 @@ Estos componentes utilizan flex para el diseño, así que asegúrese que el nave
<el-aside width="200px" style="background-color: rgb(238, 241, 246)">
<el-menu :default-openeds="['1', '3']">
<el-submenu index="1">
<template slot="title"><i class="el-icon-message"></i>Navigator One</template>
<template #title><i class="el-icon-message"></i>Navigator One</template>
<el-menu-item-group>
<template slot="title">Group 1</template>
<template #title>Group 1</template>
<el-menu-item index="1-1">Option 1</el-menu-item>
<el-menu-item index="1-2">Option 2</el-menu-item>
</el-menu-item-group>
@ -128,14 +128,14 @@ Estos componentes utilizan flex para el diseño, así que asegúrese que el nave
<el-menu-item index="1-3">Option 3</el-menu-item>
</el-menu-item-group>
<el-submenu index="1-4">
<template slot="title">Option4</template>
<template #title>Option4</template>
<el-menu-item index="1-4-1">Option 4-1</el-menu-item>
</el-submenu>
</el-submenu>
<el-submenu index="2">
<template slot="title"><i class="el-icon-menu"></i>Navigator Two</template>
<template #title><i class="el-icon-menu"></i>Navigator Two</template>
<el-menu-item-group>
<template slot="title">Group 1</template>
<template #title>Group 1</template>
<el-menu-item index="2-1">Option 1</el-menu-item>
<el-menu-item index="2-2">Option 2</el-menu-item>
</el-menu-item-group>
@ -143,14 +143,14 @@ Estos componentes utilizan flex para el diseño, así que asegúrese que el nave
<el-menu-item index="2-3">Option 3</el-menu-item>
</el-menu-item-group>
<el-submenu index="2-4">
<template slot="title">Option 4</template>
<template #title>Option 4</template>
<el-menu-item index="2-4-1">Option 4-1</el-menu-item>
</el-submenu>
</el-submenu>
<el-submenu index="3">
<template slot="title"><i class="el-icon-setting"></i>Navigator Three</template>
<template #title><i class="el-icon-setting"></i>Navigator Three</template>
<el-menu-item-group>
<template slot="title">Group 1</template>
<template #title>Group 1</template>
<el-menu-item index="3-1">Option 1</el-menu-item>
<el-menu-item index="3-2">Option 2</el-menu-item>
</el-menu-item-group>
@ -158,7 +158,7 @@ Estos componentes utilizan flex para el diseño, así que asegúrese que el nave
<el-menu-item index="3-3">Option 3</el-menu-item>
</el-menu-item-group>
<el-submenu index="3-4">
<template slot="title">Option 4</template>
<template #title>Option 4</template>
<el-menu-item index="3-4-1">Option 4-1</el-menu-item>
</el-submenu>
</el-submenu>
@ -169,11 +169,13 @@ Estos componentes utilizan flex para el diseño, así que asegúrese que el nave
<el-header style="text-align: right; font-size: 12px">
<el-dropdown>
<i class="el-icon-setting" style="margin-right: 15px"></i>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item>View</el-dropdown-item>
<el-dropdown-item>Add</el-dropdown-item>
<el-dropdown-item>Delete</el-dropdown-item>
</el-dropdown-menu>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item>View</el-dropdown-item>
<el-dropdown-item>Add</el-dropdown-item>
<el-dropdown-item>Delete</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
<span>Tom</span>
</el-header>

30
website/docs/fr-FR/container.md
View File

@ -117,9 +117,9 @@ Ces composants utilisent flexbox, assurez vous que le navigateur supporte cette
<el-aside width="200px" style="background-color: rgb(238, 241, 246)">
<el-menu :default-openeds="['1', '3']">
<el-submenu index="1">
<template slot="title"><i class="el-icon-message"></i>Navigator One</template>
<template #title><i class="el-icon-message"></i>Navigator One</template>
<el-menu-item-group>
<template slot="title">Group 1</template>
<template #title>Group 1</template>
<el-menu-item index="1-1">Option 1</el-menu-item>
<el-menu-item index="1-2">Option 2</el-menu-item>
</el-menu-item-group>
@ -127,14 +127,14 @@ Ces composants utilisent flexbox, assurez vous que le navigateur supporte cette
<el-menu-item index="1-3">Option 3</el-menu-item>
</el-menu-item-group>
<el-submenu index="1-4">
<template slot="title">Option4</template>
<template #title>Option4</template>
<el-menu-item index="1-4-1">Option 4-1</el-menu-item>
</el-submenu>
</el-submenu>
<el-submenu index="2">
<template slot="title"><i class="el-icon-menu"></i>Navigator Two</template>
<template #title><i class="el-icon-menu"></i>Navigator Two</template>
<el-menu-item-group>
<template slot="title">Group 1</template>
<template #title>Group 1</template>
<el-menu-item index="2-1">Option 1</el-menu-item>
<el-menu-item index="2-2">Option 2</el-menu-item>
</el-menu-item-group>
@ -142,14 +142,14 @@ Ces composants utilisent flexbox, assurez vous que le navigateur supporte cette
<el-menu-item index="2-3">Option 3</el-menu-item>
</el-menu-item-group>
<el-submenu index="2-4">
<template slot="title">Option 4</template>
<template #title>Option 4</template>
<el-menu-item index="2-4-1">Option 4-1</el-menu-item>
</el-submenu>
</el-submenu>
<el-submenu index="3">
<template slot="title"><i class="el-icon-setting"></i>Navigator Three</template>
<template #title><i class="el-icon-setting"></i>Navigator Three</template>
<el-menu-item-group>
<template slot="title">Group 1</template>
<template #title>Group 1</template>
<el-menu-item index="3-1">Option 1</el-menu-item>
<el-menu-item index="3-2">Option 2</el-menu-item>
</el-menu-item-group>
@ -157,7 +157,7 @@ Ces composants utilisent flexbox, assurez vous que le navigateur supporte cette
<el-menu-item index="3-3">Option 3</el-menu-item>
</el-menu-item-group>
<el-submenu index="3-4">
<template slot="title">Option 4</template>
<template #title>Option 4</template>
<el-menu-item index="3-4-1">Option 4-1</el-menu-item>
</el-submenu>
</el-submenu>
@ -168,11 +168,13 @@ Ces composants utilisent flexbox, assurez vous que le navigateur supporte cette
<el-header style="text-align: right; font-size: 12px">
<el-dropdown>
<i class="el-icon-setting" style="margin-right: 15px"></i>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item>View</el-dropdown-item>
<el-dropdown-item>Add</el-dropdown-item>
<el-dropdown-item>Delete</el-dropdown-item>
</el-dropdown-menu>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item>View</el-dropdown-item>
<el-dropdown-item>Add</el-dropdown-item>
<el-dropdown-item>Delete</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
<span>Tom</span>
</el-header>

30
website/docs/jp/container.md
View File

@ -117,9 +117,9 @@
<el-aside width="200px" style="background-color: rgb(238, 241, 246)">
<el-menu :default-openeds="['1', '3']">
<el-submenu index="1">
<template slot="title"><i class="el-icon-message"></i>Navigator One</template>
<template #title><i class="el-icon-message"></i>Navigator One</template>
<el-menu-item-group>
<template slot="title">Group 1</template>
<template #title>Group 1</template>
<el-menu-item index="1-1">Option 1</el-menu-item>
<el-menu-item index="1-2">Option 2</el-menu-item>
</el-menu-item-group>
@ -127,14 +127,14 @@
<el-menu-item index="1-3">Option 3</el-menu-item>
</el-menu-item-group>
<el-submenu index="1-4">
<template slot="title">Option4</template>
<template #title>Option4</template>
<el-menu-item index="1-4-1">Option 4-1</el-menu-item>
</el-submenu>
</el-submenu>
<el-submenu index="2">
<template slot="title"><i class="el-icon-menu"></i>Navigator Two</template>
<template #title><i class="el-icon-menu"></i>Navigator Two</template>
<el-menu-item-group>
<template slot="title">Group 1</template>
<template #title>Group 1</template>
<el-menu-item index="2-1">Option 1</el-menu-item>
<el-menu-item index="2-2">Option 2</el-menu-item>
</el-menu-item-group>
@ -142,14 +142,14 @@
<el-menu-item index="2-3">Option 3</el-menu-item>
</el-menu-item-group>
<el-submenu index="2-4">
<template slot="title">Option 4</template>
<template #title>Option 4</template>
<el-menu-item index="2-4-1">Option 4-1</el-menu-item>
</el-submenu>
</el-submenu>
<el-submenu index="3">
<template slot="title"><i class="el-icon-setting"></i>Navigator Three</template>
<template #title><i class="el-icon-setting"></i>Navigator Three</template>
<el-menu-item-group>
<template slot="title">Group 1</template>
<template #title>Group 1</template>
<el-menu-item index="3-1">Option 1</el-menu-item>
<el-menu-item index="3-2">Option 2</el-menu-item>
</el-menu-item-group>
@ -157,7 +157,7 @@
<el-menu-item index="3-3">Option 3</el-menu-item>
</el-menu-item-group>
<el-submenu index="3-4">
<template slot="title">Option 4</template>
<template #title>Option 4</template>
<el-menu-item index="3-4-1">Option 4-1</el-menu-item>
</el-submenu>
</el-submenu>
@ -168,11 +168,13 @@
<el-header style="text-align: right; font-size: 12px">
<el-dropdown>
<i class="el-icon-setting" style="margin-right: 15px"></i>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item>View</el-dropdown-item>
<el-dropdown-item>Add</el-dropdown-item>
<el-dropdown-item>Delete</el-dropdown-item>
</el-dropdown-menu>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item>View</el-dropdown-item>
<el-dropdown-item>Add</el-dropdown-item>
<el-dropdown-item>Delete</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
<span>Tom</span>
</el-header>

30
website/docs/zh-CN/container.md
View File

@ -117,9 +117,9 @@
<el-aside width="200px" style="background-color: rgb(238, 241, 246)">
<el-menu :default-openeds="['1', '3']">
<el-submenu index="1">
<template slot="title"><i class="el-icon-message"></i>导航一</template>
<template #title><i class="el-icon-message"></i>导航一</template>
<el-menu-item-group>
<template slot="title">分组一</template>
<template #title>分组一</template>
<el-menu-item index="1-1">选项1</el-menu-item>
<el-menu-item index="1-2">选项2</el-menu-item>
</el-menu-item-group>
@ -127,14 +127,14 @@
<el-menu-item index="1-3">选项3</el-menu-item>
</el-menu-item-group>
<el-submenu index="1-4">
<template slot="title">选项4</template>
<template #title>选项4</template>
<el-menu-item index="1-4-1">选项4-1</el-menu-item>
</el-submenu>
</el-submenu>
<el-submenu index="2">
<template slot="title"><i class="el-icon-menu"></i>导航二</template>
<template #title><i class="el-icon-menu"></i>导航二</template>
<el-menu-item-group>
<template slot="title">分组一</template>
<template #title>分组一</template>
<el-menu-item index="2-1">选项1</el-menu-item>
<el-menu-item index="2-2">选项2</el-menu-item>
</el-menu-item-group>
@ -142,14 +142,14 @@
<el-menu-item index="2-3">选项3</el-menu-item>
</el-menu-item-group>
<el-submenu index="2-4">
<template slot="title">选项4</template>
<template #title>选项4</template>
<el-menu-item index="2-4-1">选项4-1</el-menu-item>
</el-submenu>
</el-submenu>
<el-submenu index="3">
<template slot="title"><i class="el-icon-setting"></i>导航三</template>
<template #title><i class="el-icon-setting"></i>导航三</template>
<el-menu-item-group>
<template slot="title">分组一</template>
<template #title>分组一</template>
<el-menu-item index="3-1">选项1</el-menu-item>
<el-menu-item index="3-2">选项2</el-menu-item>
</el-menu-item-group>
@ -157,7 +157,7 @@
<el-menu-item index="3-3">选项3</el-menu-item>
</el-menu-item-group>
<el-submenu index="3-4">
<template slot="title">选项4</template>
<template #title>选项4</template>
<el-menu-item index="3-4-1">选项4-1</el-menu-item>
</el-submenu>
</el-submenu>
@ -168,11 +168,13 @@
<el-header style="text-align: right; font-size: 12px">
<el-dropdown>
<i class="el-icon-setting" style="margin-right: 15px"></i>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item>查看</el-dropdown-item>
<el-dropdown-item>新增</el-dropdown-item>
<el-dropdown-item>删除</el-dropdown-item>
</el-dropdown-menu>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item>查看</el-dropdown-item>
<el-dropdown-item>新增</el-dropdown-item>
<el-dropdown-item>删除</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
<span>王小虎</span>
</el-header>

4
website/pages/component.vue
View File

@ -129,7 +129,7 @@ export default {
height: calc(100% - 80px);
margin-top: 80px;
> .el-scrollbar__wrap {
::v-deep( > .el-scrollbar__wrap) {
overflow-x: auto;
}
}
@ -150,7 +150,7 @@ export default {
margin-top: 80px;
transition: padding-top .3s;
> .el-scrollbar__wrap {
::v-deep( > .el-scrollbar__wrap) {
height: 100%;
overflow-x: auto;
}

39
website/pages/index.vue
View File

@ -17,27 +17,26 @@
<img src="~examples/assets/images/theme-index-red.png" alt="">
</div>
</div>
<!-- <div class="sponsors">
<div class="sponsors">
<a class="sponsor" href="https://www.duohui.cn/?utm_source=element&utm_medium=web&utm_campaign=element-index" target="_blank">
<img width="45" src="~examples/assets/images/duohui.svg" alt="duohui">
<div>
<p>{{ sponsorLabel }} <span class="name">多会</span></p>
<p>活动服务销售平台</p>
</div>
</a>
<a
v-show="lang !== 'zh-CN'"
class="sponsor"
href="#"
href="https://bit.dev/?from=element-ui"
target="_blank"
>
<img width="35px" src="~examples/assets/images/xx.svg" alt="xx">
<img width="45" src="~examples/assets/images/bit.svg" alt="bit">
<div>
<p>Sponsored by xx</p>
<p>xx</p>
<p>{{ sponsorLabel }} <span class="name">bit</span></p>
<p>Share Code</p>
</div>
</a>
<a class="sponsor" href="#" target="_blank">
<img width="45px" src="~examples/assets/images/xx.svg" alt="xx">
<div>
<p>Sponsored by xx</p>
<p>xx</p>
</div>
</a>
</div> -->
</div>
<div class="cards">
<ul class="container">
<li>
@ -98,6 +97,9 @@ export default {
}
},
computed: {
sponsorLabel() {
return this.lang === 'zh-CN' ? '赞助商' : 'Sponsored by'
},
langConfig() {
return pageLang.filter(config => config.lang === this.lang)[0].pages.index
},
@ -131,7 +133,7 @@ export default {
text-align: center;
}
.banner-desc {
padding-top: 20px;
padding-top: 30px;
h1 {
font-size: 34px;
@ -144,7 +146,7 @@ export default {
font-size: 18px;
line-height: 28px;
color: #888;
margin: 10px 0 5px;
margin: 20px 0 5px;
}
}
.sponsors {
@ -158,6 +160,11 @@ export default {
height: 100px;
justify-content: center;
.name {
font-weight: bold;
color: #666;
}
img {
margin-right: 20px;
}