2020-08-02 18:27:46 +08:00
|
|
|
import { addDecorator } from '@storybook/html'
|
|
|
|
import { createApp } from 'vue'
|
2020-08-28 11:09:05 +08:00
|
|
|
// import '../src/style/element-ui@2.13.2.css'
|
|
|
|
import '../packages/theme-chalk/src/index.scss'
|
2020-07-25 12:25:38 +08:00
|
|
|
import install from '../packages/element-plus'
|
2020-08-02 18:27:46 +08:00
|
|
|
import './demo.css'
|
2020-07-25 12:25:38 +08:00
|
|
|
|
2020-07-24 19:20:37 +08:00
|
|
|
/**
|
|
|
|
* Wraps a story into a Vue Element
|
|
|
|
* @param {JSX.Element} template - Story templates
|
|
|
|
* @param {VueElement}
|
|
|
|
*/
|
|
|
|
const Wrapper = (template) => {
|
|
|
|
return {
|
|
|
|
data() {
|
2020-08-02 18:27:46 +08:00
|
|
|
return {}
|
2020-07-24 19:20:37 +08:00
|
|
|
},
|
|
|
|
template,
|
2020-08-02 18:27:46 +08:00
|
|
|
}
|
|
|
|
}
|
2020-07-24 19:20:37 +08:00
|
|
|
|
|
|
|
/**
|
|
|
|
* 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}
|
|
|
|
*/
|
2020-07-24 22:22:21 +08:00
|
|
|
function CustomDecorator(content, context) {
|
2020-08-02 18:27:46 +08:00
|
|
|
const templateOrComponent = content()
|
2020-07-24 22:22:21 +08:00
|
|
|
const app = typeof templateOrComponent === 'string'
|
|
|
|
? createApp(Wrapper(templateOrComponent))
|
|
|
|
: createApp(templateOrComponent)
|
2020-07-25 12:25:38 +08:00
|
|
|
install(app)
|
2020-08-02 18:27:46 +08:00
|
|
|
const entry = document.createElement('div')
|
|
|
|
entry.className = 'element-plus-previewer'
|
|
|
|
app.mount(entry)
|
|
|
|
return entry
|
2020-07-24 19:20:37 +08:00
|
|
|
}
|
|
|
|
|
|
|
|
addDecorator(CustomDecorator);
|