├── .babelrc ├── .electron-vue ├── build.js ├── dev-client.js ├── dev-runner.js ├── webpack.main.config.js ├── webpack.renderer.config.js └── webpack.web.config.js ├── .eslintignore ├── .eslintrc.js ├── .gitignore ├── .travis.yml ├── .vscode └── settings.json ├── LICENSE ├── README.md ├── README.zh-CN.md ├── appveyor.yml ├── build └── icons │ ├── 256x256.png │ ├── icon.icns │ └── icon.ico ├── dist ├── electron │ └── .gitkeep └── web │ └── .gitkeep ├── docs └── images │ ├── code.png │ └── layout.png ├── package.json ├── src ├── index.ejs ├── main │ ├── index.dev.js │ └── index.js └── renderer │ ├── App.vue │ ├── assets │ └── .gitkeep │ ├── blocks │ └── index.js │ ├── components │ ├── TuIconButton.vue │ ├── TuStatusIcon.vue │ └── TuTitleBar.vue │ ├── layouts │ └── index.js │ ├── main.js │ ├── mixins │ ├── base.js │ └── component.js │ ├── plugins │ └── parser.js │ ├── router │ └── index.js │ ├── services │ ├── index.js │ └── models │ │ └── Project.js │ ├── store │ ├── index.js │ ├── modules │ │ ├── index.js │ │ └── page.js │ └── mutation-types.js │ ├── styles │ ├── iconfont.css │ └── index.scss │ ├── utils │ ├── component.js │ ├── const.js │ └── index.js │ ├── views │ └── home │ │ ├── children │ │ ├── BlockPane.vue │ │ ├── CodePane.vue │ │ ├── InspectorPane.vue │ │ ├── LayoutPane.vue │ │ ├── OutlinePane.vue │ │ ├── SelectedMask.vue │ │ ├── SettingDialog.vue │ │ ├── SitemapPane.vue │ │ ├── StylePane.vue │ │ ├── WidgetPane.vue │ │ └── WireframePane.vue │ │ └── index.vue │ └── widgets │ ├── element-ui │ ├── aside │ │ └── type.js │ ├── button │ │ └── type.js │ ├── card │ │ └── type.js │ ├── col │ │ └── type.js │ ├── colorPicker │ │ └── type.js │ ├── container │ │ └── type.js │ ├── footer │ │ └── type.js │ ├── form │ │ └── type.js │ ├── header │ │ └── type.js │ ├── input │ │ └── type.js │ ├── main │ │ └── type.js │ ├── pagination │ │ └── type.js │ ├── progress │ │ └── type.js │ ├── radio │ │ └── type.js │ ├── rate │ │ └── type.js │ ├── row │ │ └── type.js │ ├── select │ │ └── type.js │ └── tag │ │ └── type.js │ ├── index.js │ ├── native │ ├── div │ │ └── type.js │ ├── i │ │ └── type.js │ └── section │ │ └── type.js │ ├── vuetify │ └── button │ │ └── type.js │ └── wrapWidget.js ├── static ├── .gitkeep └── layouts │ └── element-ui │ └── holyGrail.vue └── yarn.lock /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "comments": false, 3 | "env": { 4 | "main": { 5 | "presets": [ 6 | ["env", { 7 | "targets": { "node": 7 } 8 | }], 9 | "stage-0" 10 | ] 11 | }, 12 | "renderer": { 13 | "presets": [ 14 | ["env", { 15 | "modules": false 16 | }], 17 | "stage-0" 18 | ] 19 | }, 20 | "web": { 21 | "presets": [ 22 | ["env", { 23 | "modules": false 24 | }], 25 | "stage-0" 26 | ] 27 | } 28 | }, 29 | "plugins": ["transform-vue-jsx", "transform-runtime"] 30 | } 31 | -------------------------------------------------------------------------------- /.electron-vue/build.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | 3 | process.env.NODE_ENV = 'production' 4 | 5 | const { say } = require('cfonts') 6 | const chalk = require('chalk') 7 | const del = require('del') 8 | const { spawn } = require('child_process') 9 | const webpack = require('webpack') 10 | const Multispinner = require('multispinner') 11 | 12 | 13 | const mainConfig = require('./webpack.main.config') 14 | const rendererConfig = require('./webpack.renderer.config') 15 | const webConfig = require('./webpack.web.config') 16 | 17 | const doneLog = chalk.bgGreen.white(' DONE ') + ' ' 18 | const errorLog = chalk.bgRed.white(' ERROR ') + ' ' 19 | const okayLog = chalk.bgBlue.white(' OKAY ') + ' ' 20 | const isCI = process.env.CI || false 21 | 22 | if (process.env.BUILD_TARGET === 'clean') clean() 23 | else if (process.env.BUILD_TARGET === 'web') web() 24 | else build() 25 | 26 | function clean () { 27 | del.sync(['build/*', '!build/icons', '!build/icons/icon.*']) 28 | console.log(`\n${doneLog}\n`) 29 | process.exit() 30 | } 31 | 32 | function build () { 33 | greeting() 34 | 35 | del.sync(['dist/electron/*', '!.gitkeep']) 36 | 37 | const tasks = ['main', 'renderer'] 38 | const m = new Multispinner(tasks, { 39 | preText: 'building', 40 | postText: 'process' 41 | }) 42 | 43 | let results = '' 44 | 45 | m.on('success', () => { 46 | process.stdout.write('\x1B[2J\x1B[0f') 47 | console.log(`\n\n${results}`) 48 | console.log(`${okayLog}take it away ${chalk.yellow('`electron-builder`')}\n`) 49 | process.exit() 50 | }) 51 | 52 | pack(mainConfig).then(result => { 53 | results += result + '\n\n' 54 | m.success('main') 55 | }).catch(err => { 56 | m.error('main') 57 | console.log(`\n ${errorLog}failed to build main process`) 58 | console.error(`\n${err}\n`) 59 | process.exit(1) 60 | }) 61 | 62 | pack(rendererConfig).then(result => { 63 | results += result + '\n\n' 64 | m.success('renderer') 65 | }).catch(err => { 66 | m.error('renderer') 67 | console.log(`\n ${errorLog}failed to build renderer process`) 68 | console.error(`\n${err}\n`) 69 | process.exit(1) 70 | }) 71 | } 72 | 73 | function pack (config) { 74 | return new Promise((resolve, reject) => { 75 | webpack(config, (err, stats) => { 76 | if (err) reject(err.stack || err) 77 | else if (stats.hasErrors()) { 78 | let err = '' 79 | 80 | stats.toString({ 81 | chunks: false, 82 | colors: true 83 | }) 84 | .split(/\r?\n/) 85 | .forEach(line => { 86 | err += ` ${line}\n` 87 | }) 88 | 89 | reject(err) 90 | } else { 91 | resolve(stats.toString({ 92 | chunks: false, 93 | colors: true 94 | })) 95 | } 96 | }) 97 | }) 98 | } 99 | 100 | function web () { 101 | del.sync(['dist/web/*', '!.gitkeep']) 102 | webpack(webConfig, (err, stats) => { 103 | if (err || stats.hasErrors()) console.log(err) 104 | 105 | console.log(stats.toString({ 106 | chunks: false, 107 | colors: true 108 | })) 109 | 110 | process.exit() 111 | }) 112 | } 113 | 114 | function greeting () { 115 | const cols = process.stdout.columns 116 | let text = '' 117 | 118 | if (cols > 85) text = 'lets-build' 119 | else if (cols > 60) text = 'lets-|build' 120 | else text = false 121 | 122 | if (text && !isCI) { 123 | say(text, { 124 | colors: ['yellow'], 125 | font: 'simple3d', 126 | space: false 127 | }) 128 | } else console.log(chalk.yellow.bold('\n lets-build')) 129 | console.log() 130 | } 131 | -------------------------------------------------------------------------------- /.electron-vue/dev-client.js: -------------------------------------------------------------------------------- 1 | const hotClient = require('webpack-hot-middleware/client?noInfo=true&reload=true') 2 | 3 | hotClient.subscribe(event => { 4 | /** 5 | * Reload browser when HTMLWebpackPlugin emits a new index.html 6 | * 7 | * Currently disabled until jantimon/html-webpack-plugin#680 is resolved. 8 | * https://github.com/SimulatedGREG/electron-vue/issues/437 9 | * https://github.com/jantimon/html-webpack-plugin/issues/680 10 | */ 11 | // if (event.action === 'reload') { 12 | // window.location.reload() 13 | // } 14 | 15 | /** 16 | * Notify `mainWindow` when `main` process is compiling, 17 | * giving notice for an expected reload of the `electron` process 18 | */ 19 | if (event.action === 'compiling') { 20 | document.body.innerHTML += ` 21 | 34 | 35 |
36 | Compiling Main Process... 37 |
38 | ` 39 | } 40 | }) 41 | -------------------------------------------------------------------------------- /.electron-vue/dev-runner.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | 3 | const chalk = require('chalk') 4 | const electron = require('electron') 5 | const path = require('path') 6 | const { say } = require('cfonts') 7 | const { spawn } = require('child_process') 8 | const webpack = require('webpack') 9 | const WebpackDevServer = require('webpack-dev-server') 10 | const webpackHotMiddleware = require('webpack-hot-middleware') 11 | 12 | const mainConfig = require('./webpack.main.config') 13 | const rendererConfig = require('./webpack.renderer.config') 14 | 15 | let electronProcess = null 16 | let manualRestart = false 17 | let hotMiddleware 18 | 19 | function logStats (proc, data) { 20 | let log = '' 21 | 22 | log += chalk.yellow.bold(`┏ ${proc} Process ${new Array((19 - proc.length) + 1).join('-')}`) 23 | log += '\n\n' 24 | 25 | if (typeof data === 'object') { 26 | data.toString({ 27 | colors: true, 28 | chunks: false 29 | }).split(/\r?\n/).forEach(line => { 30 | log += ' ' + line + '\n' 31 | }) 32 | } else { 33 | log += ` ${data}\n` 34 | } 35 | 36 | log += '\n' + chalk.yellow.bold(`┗ ${new Array(28 + 1).join('-')}`) + '\n' 37 | 38 | console.log(log) 39 | } 40 | 41 | function startRenderer () { 42 | return new Promise((resolve, reject) => { 43 | rendererConfig.entry.renderer = [path.join(__dirname, 'dev-client')].concat(rendererConfig.entry.renderer) 44 | 45 | const compiler = webpack(rendererConfig) 46 | hotMiddleware = webpackHotMiddleware(compiler, { 47 | log: false, 48 | heartbeat: 2500 49 | }) 50 | 51 | compiler.plugin('compilation', compilation => { 52 | compilation.plugin('html-webpack-plugin-after-emit', (data, cb) => { 53 | hotMiddleware.publish({ action: 'reload' }) 54 | cb() 55 | }) 56 | }) 57 | 58 | compiler.plugin('done', stats => { 59 | logStats('Renderer', stats) 60 | }) 61 | 62 | const server = new WebpackDevServer( 63 | compiler, 64 | { 65 | contentBase: path.join(__dirname, '../'), 66 | quiet: true, 67 | before (app, ctx) { 68 | app.use(hotMiddleware) 69 | ctx.middleware.waitUntilValid(() => { 70 | resolve() 71 | }) 72 | } 73 | } 74 | ) 75 | 76 | server.listen(9080) 77 | }) 78 | } 79 | 80 | function startMain () { 81 | return new Promise((resolve, reject) => { 82 | mainConfig.entry.main = [path.join(__dirname, '../src/main/index.dev.js')].concat(mainConfig.entry.main) 83 | 84 | const compiler = webpack(mainConfig) 85 | 86 | compiler.plugin('watch-run', (compilation, done) => { 87 | logStats('Main', chalk.white.bold('compiling...')) 88 | hotMiddleware.publish({ action: 'compiling' }) 89 | done() 90 | }) 91 | 92 | compiler.watch({}, (err, stats) => { 93 | if (err) { 94 | console.log(err) 95 | return 96 | } 97 | 98 | logStats('Main', stats) 99 | 100 | if (electronProcess && electronProcess.kill) { 101 | manualRestart = true 102 | process.kill(electronProcess.pid) 103 | electronProcess = null 104 | startElectron() 105 | 106 | setTimeout(() => { 107 | manualRestart = false 108 | }, 5000) 109 | } 110 | 111 | resolve() 112 | }) 113 | }) 114 | } 115 | 116 | function startElectron () { 117 | electronProcess = spawn(electron, ['--inspect=5858', path.join(__dirname, '../dist/electron/main.js')]) 118 | 119 | electronProcess.stdout.on('data', data => { 120 | electronLog(data, 'blue') 121 | }) 122 | electronProcess.stderr.on('data', data => { 123 | electronLog(data, 'red') 124 | }) 125 | 126 | electronProcess.on('close', () => { 127 | if (!manualRestart) process.exit() 128 | }) 129 | } 130 | 131 | function electronLog (data, color) { 132 | let log = '' 133 | data = data.toString().split(/\r?\n/) 134 | data.forEach(line => { 135 | log += ` ${line}\n` 136 | }) 137 | if (/[0-9A-z]+/.test(log)) { 138 | console.log( 139 | chalk[color].bold('┏ Electron -------------------') + 140 | '\n\n' + 141 | log + 142 | chalk[color].bold('┗ ----------------------------') + 143 | '\n' 144 | ) 145 | } 146 | } 147 | 148 | function greeting () { 149 | const cols = process.stdout.columns 150 | let text = '' 151 | 152 | if (cols > 104) text = 'electron-vue' 153 | else if (cols > 76) text = 'electron-|vue' 154 | else text = false 155 | 156 | if (text) { 157 | say(text, { 158 | colors: ['yellow'], 159 | font: 'simple3d', 160 | space: false 161 | }) 162 | } else console.log(chalk.yellow.bold('\n electron-vue')) 163 | console.log(chalk.blue(' getting ready...') + '\n') 164 | } 165 | 166 | function init () { 167 | greeting() 168 | 169 | Promise.all([startRenderer(), startMain()]) 170 | .then(() => { 171 | startElectron() 172 | }) 173 | .catch(err => { 174 | console.error(err) 175 | }) 176 | } 177 | 178 | init() 179 | -------------------------------------------------------------------------------- /.electron-vue/webpack.main.config.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | 3 | process.env.BABEL_ENV = 'main' 4 | 5 | const path = require('path') 6 | const { dependencies } = require('../package.json') 7 | const webpack = require('webpack') 8 | 9 | const BabiliWebpackPlugin = require('babili-webpack-plugin') 10 | 11 | let mainConfig = { 12 | entry: { 13 | main: path.join(__dirname, '../src/main/index.js') 14 | }, 15 | externals: [ 16 | ...Object.keys(dependencies || {}) 17 | ], 18 | module: { 19 | rules: [ 20 | { 21 | test: /\.(js)$/, 22 | enforce: 'pre', 23 | exclude: /node_modules/, 24 | use: { 25 | loader: 'eslint-loader', 26 | options: { 27 | formatter: require('eslint-friendly-formatter') 28 | } 29 | } 30 | }, 31 | { 32 | test: /\.js$/, 33 | use: 'babel-loader', 34 | exclude: /node_modules/ 35 | }, 36 | { 37 | test: /\.node$/, 38 | use: 'node-loader' 39 | } 40 | ] 41 | }, 42 | node: { 43 | __dirname: process.env.NODE_ENV !== 'production', 44 | __filename: process.env.NODE_ENV !== 'production' 45 | }, 46 | output: { 47 | filename: '[name].js', 48 | libraryTarget: 'commonjs2', 49 | path: path.join(__dirname, '../dist/electron') 50 | }, 51 | plugins: [ 52 | new webpack.NoEmitOnErrorsPlugin() 53 | ], 54 | resolve: { 55 | extensions: ['.js', '.json', '.node'] 56 | }, 57 | target: 'electron-main' 58 | } 59 | 60 | /** 61 | * Adjust mainConfig for development settings 62 | */ 63 | if (process.env.NODE_ENV !== 'production') { 64 | mainConfig.plugins.push( 65 | new webpack.DefinePlugin({ 66 | '__static': `"${path.join(__dirname, '../static').replace(/\\/g, '\\\\')}"` 67 | }) 68 | ) 69 | } 70 | 71 | /** 72 | * Adjust mainConfig for production settings 73 | */ 74 | if (process.env.NODE_ENV === 'production') { 75 | mainConfig.plugins.push( 76 | new BabiliWebpackPlugin(), 77 | new webpack.DefinePlugin({ 78 | 'process.env.NODE_ENV': '"production"' 79 | }) 80 | ) 81 | } 82 | 83 | module.exports = mainConfig 84 | -------------------------------------------------------------------------------- /.electron-vue/webpack.renderer.config.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | 3 | process.env.BABEL_ENV = 'renderer' 4 | 5 | const path = require('path') 6 | const { dependencies } = require('../package.json') 7 | const webpack = require('webpack') 8 | 9 | const BabiliWebpackPlugin = require('babili-webpack-plugin') 10 | const CopyWebpackPlugin = require('copy-webpack-plugin') 11 | const ExtractTextPlugin = require('extract-text-webpack-plugin') 12 | const HtmlWebpackPlugin = require('html-webpack-plugin') 13 | 14 | /** 15 | * List of node_modules to include in webpack bundle 16 | * 17 | * Required for specific packages like Vue UI libraries 18 | * that provide pure *.vue files that need compiling 19 | * https://simulatedgreg.gitbooks.io/electron-vue/content/en/webpack-configurations.html#white-listing-externals 20 | */ 21 | let whiteListedModules = ['vue'] 22 | 23 | let rendererConfig = { 24 | devtool: '#cheap-module-eval-source-map', 25 | entry: { 26 | renderer: path.join(__dirname, '../src/renderer/main.js') 27 | }, 28 | externals: [ 29 | ...Object.keys(dependencies || {}).filter(d => !whiteListedModules.includes(d)) 30 | ], 31 | module: { 32 | rules: [ 33 | { 34 | test: /\.(js|vue)$/, 35 | enforce: 'pre', 36 | exclude: /node_modules/, 37 | use: { 38 | loader: 'eslint-loader', 39 | options: { 40 | formatter: require('eslint-friendly-formatter') 41 | } 42 | } 43 | }, 44 | { 45 | test: /\.scss$/, 46 | use: 'sass-loader' 47 | }, 48 | { 49 | test: /\.css$/, 50 | use: ExtractTextPlugin.extract({ 51 | fallback: 'style-loader', 52 | use: 'css-loader' 53 | }) 54 | }, 55 | { 56 | test: /\.html$/, 57 | use: 'vue-html-loader' 58 | }, 59 | { 60 | test: /\.js$/, 61 | use: 'babel-loader', 62 | exclude: /node_modules/ 63 | }, 64 | { 65 | test: /\.node$/, 66 | use: 'node-loader' 67 | }, 68 | { 69 | test: /\.vue$/, 70 | use: { 71 | loader: 'vue-loader', 72 | options: { 73 | extractCSS: process.env.NODE_ENV === 'production', 74 | loaders: { 75 | sass: 'vue-style-loader!css-loader!sass-loader?indentedSyntax=1', 76 | scss: 'vue-style-loader!css-loader!sass-loader' 77 | } 78 | } 79 | } 80 | }, 81 | { 82 | test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, 83 | use: { 84 | loader: 'url-loader', 85 | query: { 86 | limit: 10000, 87 | name: 'imgs/[name]--[folder].[ext]' 88 | } 89 | } 90 | }, 91 | { 92 | test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/, 93 | loader: 'url-loader', 94 | options: { 95 | limit: 10000, 96 | name: 'media/[name]--[folder].[ext]' 97 | } 98 | }, 99 | { 100 | test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/, 101 | use: { 102 | loader: 'url-loader', 103 | query: { 104 | limit: 10000, 105 | name: 'fonts/[name]--[folder].[ext]' 106 | } 107 | } 108 | } 109 | ] 110 | }, 111 | node: { 112 | __dirname: process.env.NODE_ENV !== 'production', 113 | __filename: process.env.NODE_ENV !== 'production' 114 | }, 115 | plugins: [ 116 | new ExtractTextPlugin('styles.css'), 117 | new HtmlWebpackPlugin({ 118 | filename: 'index.html', 119 | template: path.resolve(__dirname, '../src/index.ejs'), 120 | minify: { 121 | collapseWhitespace: true, 122 | removeAttributeQuotes: true, 123 | removeComments: true 124 | }, 125 | nodeModules: process.env.NODE_ENV !== 'production' 126 | ? path.resolve(__dirname, '../node_modules') 127 | : false 128 | }), 129 | new webpack.HotModuleReplacementPlugin(), 130 | new webpack.NoEmitOnErrorsPlugin() 131 | ], 132 | output: { 133 | filename: '[name].js', 134 | libraryTarget: 'commonjs2', 135 | path: path.join(__dirname, '../dist/electron') 136 | }, 137 | resolve: { 138 | alias: { 139 | '@': path.join(__dirname, '../src/renderer'), 140 | 'vue$': 'vue/dist/vue.esm.js' 141 | }, 142 | extensions: ['.js', '.vue', '.json', '.css', '.node'] 143 | }, 144 | target: 'electron-renderer' 145 | } 146 | 147 | /** 148 | * Adjust rendererConfig for development settings 149 | */ 150 | if (process.env.NODE_ENV !== 'production') { 151 | rendererConfig.plugins.push( 152 | new webpack.DefinePlugin({ 153 | '__static': `"${path.join(__dirname, '../static').replace(/\\/g, '\\\\')}"` 154 | }) 155 | ) 156 | } 157 | 158 | /** 159 | * Adjust rendererConfig for production settings 160 | */ 161 | if (process.env.NODE_ENV === 'production') { 162 | rendererConfig.devtool = '' 163 | 164 | rendererConfig.plugins.push( 165 | new BabiliWebpackPlugin(), 166 | new CopyWebpackPlugin([ 167 | { 168 | from: path.join(__dirname, '../static'), 169 | to: path.join(__dirname, '../dist/electron/static'), 170 | ignore: ['.*'] 171 | } 172 | ]), 173 | new webpack.DefinePlugin({ 174 | 'process.env.NODE_ENV': '"production"' 175 | }), 176 | new webpack.LoaderOptionsPlugin({ 177 | minimize: true 178 | }) 179 | ) 180 | } 181 | 182 | module.exports = rendererConfig 183 | -------------------------------------------------------------------------------- /.electron-vue/webpack.web.config.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | 3 | process.env.BABEL_ENV = 'web' 4 | 5 | const path = require('path') 6 | const webpack = require('webpack') 7 | 8 | const BabiliWebpackPlugin = require('babili-webpack-plugin') 9 | const CopyWebpackPlugin = require('copy-webpack-plugin') 10 | const ExtractTextPlugin = require('extract-text-webpack-plugin') 11 | const HtmlWebpackPlugin = require('html-webpack-plugin') 12 | 13 | let webConfig = { 14 | devtool: '#cheap-module-eval-source-map', 15 | entry: { 16 | web: path.join(__dirname, '../src/renderer/main.js') 17 | }, 18 | module: { 19 | rules: [ 20 | { 21 | test: /\.(js|vue)$/, 22 | enforce: 'pre', 23 | exclude: /node_modules/, 24 | use: { 25 | loader: 'eslint-loader', 26 | options: { 27 | formatter: require('eslint-friendly-formatter') 28 | } 29 | } 30 | }, 31 | { 32 | test: /\.css$/, 33 | use: ExtractTextPlugin.extract({ 34 | fallback: 'style-loader', 35 | use: 'css-loader' 36 | }) 37 | }, 38 | { 39 | test: /\.html$/, 40 | use: 'vue-html-loader' 41 | }, 42 | { 43 | test: /\.js$/, 44 | use: 'babel-loader', 45 | include: [ path.resolve(__dirname, '../src/renderer') ], 46 | exclude: /node_modules/ 47 | }, 48 | { 49 | test: /\.vue$/, 50 | use: { 51 | loader: 'vue-loader', 52 | options: { 53 | extractCSS: true, 54 | loaders: { 55 | sass: 'vue-style-loader!css-loader!sass-loader?indentedSyntax=1', 56 | scss: 'vue-style-loader!css-loader!sass-loader' 57 | } 58 | } 59 | } 60 | }, 61 | { 62 | test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, 63 | use: { 64 | loader: 'url-loader', 65 | query: { 66 | limit: 10000, 67 | name: 'imgs/[name].[ext]' 68 | } 69 | } 70 | }, 71 | { 72 | test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/, 73 | use: { 74 | loader: 'url-loader', 75 | query: { 76 | limit: 10000, 77 | name: 'fonts/[name].[ext]' 78 | } 79 | } 80 | } 81 | ] 82 | }, 83 | plugins: [ 84 | new ExtractTextPlugin('styles.css'), 85 | new HtmlWebpackPlugin({ 86 | filename: 'index.html', 87 | template: path.resolve(__dirname, '../src/index.ejs'), 88 | minify: { 89 | collapseWhitespace: true, 90 | removeAttributeQuotes: true, 91 | removeComments: true 92 | }, 93 | nodeModules: false 94 | }), 95 | new webpack.DefinePlugin({ 96 | 'process.env.IS_WEB': 'true' 97 | }), 98 | new webpack.HotModuleReplacementPlugin(), 99 | new webpack.NoEmitOnErrorsPlugin() 100 | ], 101 | output: { 102 | filename: '[name].js', 103 | path: path.join(__dirname, '../dist/web') 104 | }, 105 | resolve: { 106 | alias: { 107 | '@': path.join(__dirname, '../src/renderer'), 108 | 'vue$': 'vue/dist/vue.esm.js' 109 | }, 110 | extensions: ['.js', '.vue', '.json', '.css'] 111 | }, 112 | target: 'web' 113 | } 114 | 115 | /** 116 | * Adjust webConfig for production settings 117 | */ 118 | if (process.env.NODE_ENV === 'production') { 119 | webConfig.devtool = '' 120 | 121 | webConfig.plugins.push( 122 | new BabiliWebpackPlugin(), 123 | new CopyWebpackPlugin([ 124 | { 125 | from: path.join(__dirname, '../static'), 126 | to: path.join(__dirname, '../dist/web/static'), 127 | ignore: ['.*'] 128 | } 129 | ]), 130 | new webpack.DefinePlugin({ 131 | 'process.env.NODE_ENV': '"production"' 132 | }), 133 | new webpack.LoaderOptionsPlugin({ 134 | minimize: true 135 | }) 136 | ) 137 | } 138 | 139 | module.exports = webConfig 140 | -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/L-Chris/vue-design/c3620904041d1cb6c204091540bae73afa9d50a7/.eslintignore -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | parser: 'babel-eslint', 4 | parserOptions: { 5 | sourceType: 'module' 6 | }, 7 | env: { 8 | browser: true, 9 | node: true 10 | }, 11 | extends: 'standard', 12 | globals: { 13 | __static: true 14 | }, 15 | plugins: [ 16 | 'html' 17 | ], 18 | 'rules': { 19 | // allow paren-less arrow functions 20 | 'arrow-parens': 0, 21 | // allow async-await 22 | 'generator-star-spacing': 0, 23 | // allow debugger during development 24 | 'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | dist/electron/* 3 | dist/web/* 4 | build/* 5 | !build/icons 6 | node_modules/ 7 | npm-debug.log 8 | npm-debug.log.* 9 | thumbs.db 10 | !.gitkeep 11 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | osx_image: xcode8.3 2 | sudo: required 3 | dist: trusty 4 | language: c 5 | matrix: 6 | include: 7 | - os: osx 8 | - os: linux 9 | env: CC=clang CXX=clang++ npm_config_clang=1 10 | compiler: clang 11 | cache: 12 | directories: 13 | - node_modules 14 | - "$HOME/.electron" 15 | - "$HOME/.cache" 16 | addons: 17 | apt: 18 | packages: 19 | - libgnome-keyring-dev 20 | - icnsutils 21 | before_install: 22 | - mkdir -p /tmp/git-lfs && curl -L https://github.com/github/git-lfs/releases/download/v1.2.1/git-lfs-$([ 23 | "$TRAVIS_OS_NAME" == "linux" ] && echo "linux" || echo "darwin")-amd64-1.2.1.tar.gz 24 | | tar -xz -C /tmp/git-lfs --strip-components 1 && /tmp/git-lfs/git-lfs pull 25 | - if [[ "$TRAVIS_OS_NAME" == "linux" ]]; then sudo apt-get install --no-install-recommends -y icnsutils graphicsmagick xz-utils; fi 26 | install: 27 | - nvm install 7 28 | - curl -o- -L https://yarnpkg.com/install.sh | bash 29 | - source ~/.bashrc 30 | - npm install -g xvfb-maybe 31 | - yarn 32 | script: 33 | - yarn run build 34 | branches: 35 | only: 36 | - master 37 | -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | } -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2018 Jiahui.Liang 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 |

2 | vue-design 3 |

4 |

5 | English | 中文 6 |

7 |

Be the best website visualization builder with Vue and Electron.

8 |

Your star is the greatest encouragement to me.

9 | 10 | ## ✨ Features: 11 | 12 | - desktop application build with electron 13 | - design page with dragable and editable components 14 | - edit page css 15 | - save as .vue files 16 | - import a saved project 17 | 18 |

19 | 20 | 21 |

22 | 23 | ## ✨ Download 24 | 25 | - Windows：[百度网盘](https://pan.baidu.com/s/1fpfvKkFW4AndlI6Zvk3yrA) 26 | - Mac： 27 | 28 | ## 🔧 Build Setup 29 | 30 | ``` bash 31 | git clone https://github.com/L-Chris/vue-design.git 32 | cd vue-design 33 | 34 | # install dependencies 35 | npm install 36 | 37 | # serve with with-webpack example at localhost:9080 38 | npm run dev 39 | 40 | # build electron application for production 41 | npm run build 42 | 43 | # lint all JS/Vue component files in `src/` 44 | npm run lint 45 | ``` 46 | 47 | ## 🛣 Pending 48 | - edit component css (2018/03-2018/04) [√] 49 | - more build-in layouts、blocks and widgets (2018/03-2018/04) 50 | - watch .vue files and sync to the project (2018/04) 51 | - widgets and blocks market (2018/04) 52 | - customize plugins and plugins market (2018/05) 53 | 54 | ## 🥂 License 55 | 56 | [MIT](http://opensource.org/licenses/MIT) -------------------------------------------------------------------------------- /README.zh-CN.md: -------------------------------------------------------------------------------- 1 |

2 | vue-design 3 |

4 |

5 | English | 中文 6 |

7 |

用Vue和Electron开发最好的页面可视化构建程序

8 |

Your star is the greatest encouragement to me.

9 | 10 | ## ✨ 功能: 11 | 12 | - 使用electron构建的桌面端应用 13 | - 通过可拖拽、可编辑的组件设计页面 14 | - 可编辑页面css 15 | - 保存为.vue文件 16 | - 保存/导入一个项目 17 | 18 |

19 | 20 | 21 |

22 | 23 | ## ✨ 下载 24 | 25 | - Windows：[百度网盘](https://pan.baidu.com/s/1fpfvKkFW4AndlI6Zvk3yrA) 26 | - Mac： 27 | 28 | ## 🔧 开发步骤 29 | 30 | ``` bash 31 | git clone https://github.com/L-Chris/vue-design.git 32 | cd vue-design 33 | 34 | # install dependencies 35 | npm install 36 | 37 | # serve with with-webpack example at localhost:9080 38 | npm run dev 39 | 40 | # build electron application for production 41 | npm run build 42 | 43 | # lint all JS/Vue component files in `src/` 44 | npm run lint 45 | ``` 46 | 47 | ## 🛣 进行中 48 | - 编辑组件css (2018/03-2018/04) [√] 49 | - 更多内置布局、区块和元件 (2018/03-2018/04) 50 | - 检测.vue文件改动并自动同步到项目中 (2018/04) 51 | - 物料市场 (2018/04) 52 | - 自定义插件和插件市场 (2018/05) 53 | 54 | ## 🥂 License 55 | 56 | [MIT](http://opensource.org/licenses/MIT) -------------------------------------------------------------------------------- /appveyor.yml: -------------------------------------------------------------------------------- 1 | version: 0.1.{build} 2 | 3 | branches: 4 | only: 5 | - master 6 | 7 | image: Visual Studio 2017 8 | platform: 9 | - x64 10 | 11 | cache: 12 | - node_modules 13 | - '%APPDATA%\npm-cache' 14 | - '%USERPROFILE%\.electron' 15 | - '%USERPROFILE%\AppData\Local\Yarn\cache' 16 | 17 | init: 18 | - git config --global core.autocrlf input 19 | 20 | install: 21 | - ps: Install-Product node 8 x64 22 | - choco install yarn --ignore-dependencies 23 | - git reset --hard HEAD 24 | - yarn 25 | - node --version 26 | 27 | build_script: 28 | - yarn build 29 | 30 | test: off 31 | -------------------------------------------------------------------------------- /build/icons/256x256.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/L-Chris/vue-design/c3620904041d1cb6c204091540bae73afa9d50a7/build/icons/256x256.png -------------------------------------------------------------------------------- /build/icons/icon.icns: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/L-Chris/vue-design/c3620904041d1cb6c204091540bae73afa9d50a7/build/icons/icon.icns -------------------------------------------------------------------------------- /build/icons/icon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/L-Chris/vue-design/c3620904041d1cb6c204091540bae73afa9d50a7/build/icons/icon.ico -------------------------------------------------------------------------------- /dist/electron/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/L-Chris/vue-design/c3620904041d1cb6c204091540bae73afa9d50a7/dist/electron/.gitkeep -------------------------------------------------------------------------------- /dist/web/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/L-Chris/vue-design/c3620904041d1cb6c204091540bae73afa9d50a7/dist/web/.gitkeep -------------------------------------------------------------------------------- /docs/images/code.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/L-Chris/vue-design/c3620904041d1cb6c204091540bae73afa9d50a7/docs/images/code.png -------------------------------------------------------------------------------- /docs/images/layout.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/L-Chris/vue-design/c3620904041d1cb6c204091540bae73afa9d50a7/docs/images/layout.png -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-design", 3 | "version": "0.3.3", 4 | "author": "L-Chris <563303226@qq.com>", 5 | "description": "Be the best website visualization builder with Vue and Electron", 6 | "license": "MIT", 7 | "main": "./dist/electron/main.js", 8 | "scripts": { 9 | "build": "node .electron-vue/build.js && electron-builder", 10 | "build:dir": "node .electron-vue/build.js && electron-builder --dir", 11 | "build:clean": "cross-env BUILD_TARGET=clean node .electron-vue/build.js", 12 | "build:web": "cross-env BUILD_TARGET=web node .electron-vue/build.js", 13 | "dev": "node .electron-vue/dev-runner.js", 14 | "lint": "eslint --ext .js,.vue -f ./node_modules/eslint-friendly-formatter src", 15 | "lint:fix": "eslint --ext .js,.vue -f ./node_modules/eslint-friendly-formatter --fix src", 16 | "pack": "npm run pack:main && npm run pack:renderer", 17 | "pack:main": "cross-env NODE_ENV=production webpack --progress --colors --config .electron-vue/webpack.main.config.js", 18 | "pack:renderer": "cross-env NODE_ENV=production webpack --progress --colors --config .electron-vue/webpack.renderer.config.js", 19 | "postinstall": "npm run lint:fix" 20 | }, 21 | "build": { 22 | "productName": "vue-design", 23 | "appId": "org.simulatedgreg.electron-vue", 24 | "directories": { 25 | "output": "build" 26 | }, 27 | "files": [ 28 | "dist/electron/**/*" 29 | ], 30 | "dmg": { 31 | "contents": [ 32 | { 33 | "x": 410, 34 | "y": 150, 35 | "type": "link", 36 | "path": "/Applications" 37 | }, 38 | { 39 | "x": 130, 40 | "y": 150, 41 | "type": "file" 42 | } 43 | ] 44 | }, 45 | "mac": { 46 | "icon": "build/icons/icon.icns" 47 | }, 48 | "win": { 49 | "icon": "build/icons/icon.ico" 50 | }, 51 | "linux": { 52 | "icon": "build/icons" 53 | } 54 | }, 55 | "dependencies": { 56 | "axios": "^0.16.1", 57 | "element-ui": "^2.2.1", 58 | "fs-readdir-recursive": "^1.1.0", 59 | "htmlparser2": "^3.9.2", 60 | "lodash.throttle": "^4.1.1", 61 | "opn": "^5.2.0", 62 | "pretty": "^2.0.0", 63 | "vue": "^2.3.3", 64 | "vue-codemirror": "^4.0.3", 65 | "vue-electron": "^1.0.6", 66 | "vue-router": "^2.5.3", 67 | "vuetify": "^1.0.6", 68 | "vuex": "^2.3.1", 69 | "vuex-router-sync": "^5.0.0" 70 | }, 71 | "devDependencies": { 72 | "babel-core": "^6.25.0", 73 | "babel-eslint": "^7.2.3", 74 | "babel-helper-vue-jsx-merge-props": "^2.0.3", 75 | "babel-loader": "^7.1.1", 76 | "babel-plugin-syntax-jsx": "^6.18.0", 77 | "babel-plugin-transform-runtime": "^6.23.0", 78 | "babel-plugin-transform-vue-jsx": "^3.7.0", 79 | "babel-preset-env": "^1.6.0", 80 | "babel-preset-stage-0": "^6.24.1", 81 | "babel-register": "^6.24.1", 82 | "babili-webpack-plugin": "^0.1.2", 83 | "cfonts": "^1.1.3", 84 | "chalk": "^2.1.0", 85 | "copy-webpack-plugin": "^4.0.1", 86 | "cross-env": "^5.0.5", 87 | "css-loader": "^0.28.4", 88 | "del": "^3.0.0", 89 | "devtron": "^1.4.0", 90 | "electron": "^1.7.5", 91 | "electron-builder": "^19.19.1", 92 | "electron-debug": "1.4.0", 93 | "electron-devtools-installer": "^2.2.0", 94 | "eslint": "^4.4.1", 95 | "eslint-config-standard": "^10.2.1", 96 | "eslint-friendly-formatter": "^3.0.0", 97 | "eslint-loader": "^1.9.0", 98 | "eslint-plugin-html": "^3.1.1", 99 | "eslint-plugin-import": "^2.7.0", 100 | "eslint-plugin-node": "^5.1.1", 101 | "eslint-plugin-promise": "^3.5.0", 102 | "eslint-plugin-standard": "^3.0.1", 103 | "extract-text-webpack-plugin": "^3.0.0", 104 | "file-loader": "^0.11.2", 105 | "html-webpack-plugin": "^2.30.1", 106 | "multispinner": "^0.2.1", 107 | "node-loader": "^0.6.0", 108 | "node-sass": "^4.7.2", 109 | "sass-loader": "^6.0.7", 110 | "style-loader": "^0.18.2", 111 | "url-loader": "^0.5.9", 112 | "vue-html-loader": "^1.2.4", 113 | "vue-loader": "^13.0.5", 114 | "vue-style-loader": "^3.0.1", 115 | "vue-template-compiler": "^2.4.2", 116 | "webpack": "^3.5.2", 117 | "webpack-dev-server": "^2.7.1", 118 | "webpack-hot-middleware": "^2.18.2" 119 | } 120 | } 121 | -------------------------------------------------------------------------------- /src/index.ejs: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | vue-design 6 | 7 | <% if (htmlWebpackPlugin.options.nodeModules) { %> 8 | 9 | 12 | <% } %> 13 | 14 | 15 |
16 | 17 | 20 | 21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /src/main/index.dev.js: -------------------------------------------------------------------------------- 1 | /** 2 | * This file is used specifically and only for development. It installs 3 | * `electron-debug` & `vue-devtools`. There shouldn't be any need to 4 | * modify this file, but it can be used to extend your development 5 | * environment. 6 | */ 7 | 8 | /* eslint-disable */ 9 | 10 | // Set environment for development 11 | process.env.NODE_ENV = 'development' 12 | 13 | // Install `electron-debug` with `devtron` 14 | require('electron-debug')({ showDevTools: true }) 15 | 16 | // Install `vue-devtools` 17 | require('electron').app.on('ready', () => { 18 | let installExtension = require('electron-devtools-installer') 19 | installExtension.default(installExtension.VUEJS_DEVTOOLS) 20 | .then(() => {}) 21 | .catch(err => { 22 | console.log('Unable to install `vue-devtools`: \n', err) 23 | }) 24 | }) 25 | 26 | // Require `main` process to boot app 27 | require('./index') 28 | -------------------------------------------------------------------------------- /src/main/index.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | 3 | import { app, BrowserWindow, dialog, ipcMain } from 'electron' 4 | 5 | /** 6 | * Set `__static` path to static files in production 7 | * https://simulatedgreg.gitbooks.io/electron-vue/content/en/using-static-assets.html 8 | */ 9 | if (process.env.NODE_ENV !== 'development') { 10 | global.__static = require('path').join(__dirname, '/static').replace(/\\/g, '\\\\') 11 | } 12 | 13 | let mainWindow 14 | const winURL = process.env.NODE_ENV === 'development' 15 | ? `http://localhost:9080` 16 | : `file://${__dirname}/index.html` 17 | 18 | function createWindow () { 19 | /** 20 | * Initial window options 21 | */ 22 | mainWindow = new BrowserWindow({ 23 | height: 900, 24 | width: 1600, 25 | useContentSize: true, 26 | center: true, 27 | frame: false 28 | }) 29 | 30 | mainWindow.loadURL(winURL) 31 | 32 | mainWindow.on('unmaximize', () => { 33 | mainWindow.webContents.send('window:unmaximize') 34 | }) 35 | 36 | mainWindow.on('maximize', () => { 37 | mainWindow.webContents.send('window:maximize') 38 | }) 39 | 40 | ipcMain.on('window:minimize', () => { 41 | mainWindow.minimize() 42 | }) 43 | 44 | ipcMain.on('window:maximize', () => { 45 | if (mainWindow.isMaximized()) { 46 | mainWindow.restore() 47 | } else { 48 | mainWindow.maximize() 49 | } 50 | }) 51 | 52 | ipcMain.on('window:closed', () => { 53 | mainWindow.close() 54 | }) 55 | 56 | ipcMain.on('load:project', () => { 57 | dialog.showOpenDialog({ 58 | filters: [ 59 | { name: 'Project', extensions: ['vd-project'] } 60 | ], 61 | properties: ['openFile'] 62 | }, paths => { 63 | mainWindow.webContents.send('load:project', paths) 64 | }) 65 | }) 66 | } 67 | 68 | app.on('ready', createWindow) 69 | 70 | app.on('window-all-closed', () => { 71 | if (process.platform !== 'darwin') { 72 | app.quit() 73 | } 74 | }) 75 | 76 | app.on('activate', () => { 77 | if (mainWindow === null) { 78 | createWindow() 79 | } 80 | }) 81 | 82 | /** 83 | * Auto Updater 84 | * 85 | * Uncomment the following code below and install `electron-updater` to 86 | * support auto updating. Code Signing with a valid certificate is required. 87 | * https://simulatedgreg.gitbooks.io/electron-vue/content/en/using-electron-builder.html#auto-updating 88 | */ 89 | 90 | /* 91 | import { autoUpdater } from 'electron-updater' 92 | 93 | autoUpdater.on('update-downloaded', () => { 94 | autoUpdater.quitAndInstall() 95 | }) 96 | 97 | app.on('ready', () => { 98 | if (process.env.NODE_ENV === 'production') autoUpdater.checkForUpdates() 99 | }) 100 | */ 101 | -------------------------------------------------------------------------------- /src/renderer/App.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | 14 | 15 | 22 | -------------------------------------------------------------------------------- /src/renderer/assets/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/L-Chris/vue-design/c3620904041d1cb6c204091540bae73afa9d50a7/src/renderer/assets/.gitkeep -------------------------------------------------------------------------------- /src/renderer/blocks/index.js: -------------------------------------------------------------------------------- 1 | export default [] 2 | -------------------------------------------------------------------------------- /src/renderer/components/TuIconButton.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 22 | 23 | 39 | -------------------------------------------------------------------------------- /src/renderer/components/TuStatusIcon.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 24 | -------------------------------------------------------------------------------- /src/renderer/components/TuTitleBar.vue: -------------------------------------------------------------------------------- 1 | 19 | 20 | 56 | 57 | 71 | -------------------------------------------------------------------------------- /src/renderer/layouts/index.js: -------------------------------------------------------------------------------- 1 | import read from 'fs-readdir-recursive' 2 | import parser from '@/plugins/parser' 3 | const prefix = `${__static}/layouts` 4 | 5 | let layouts = read(prefix).map(key => parser(`${prefix}/${key}`)) 6 | 7 | export default layouts 8 | -------------------------------------------------------------------------------- /src/renderer/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import ElementUI from 'element-ui' 3 | import Vuetify from 'vuetify' 4 | import 'element-ui/lib/theme-chalk/index.css' 5 | import 'vuetify/dist/vuetify.min.css' 6 | import App from './App' 7 | import router from './router' 8 | import store from './store' 9 | import {installWidgets} from './widgets' 10 | import { sync } from 'vuex-router-sync' 11 | import mixins from './mixins/base' 12 | 13 | if (!process.env.IS_WEB) Vue.use(require('vue-electron')) 14 | Vue.config.productionTip = false 15 | 16 | sync(store, router) 17 | 18 | Vue.use(ElementUI) 19 | Vue.use(Vuetify) 20 | installWidgets(Vue) 21 | Vue.mixin(mixins) 22 | 23 | /* eslint-disable no-new */ 24 | new Vue({ 25 | el: '#app', 26 | router, 27 | store, 28 | render: h => h(App) 29 | }) 30 | -------------------------------------------------------------------------------- /src/renderer/mixins/base.js: -------------------------------------------------------------------------------- 1 | import {parsePath} from '@/utils' 2 | 3 | export default { 4 | methods: { 5 | linkTo (path) { 6 | this.$router.push(path) 7 | }, 8 | replaceTo (path) { 9 | this.$router.replace(path) 10 | }, 11 | parsePath 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /src/renderer/mixins/component.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import {mapGetters} from 'vuex' 3 | import {createElement} from '@/utils' 4 | 5 | export default { 6 | computed: { 7 | ...mapGetters(['components']) 8 | }, 9 | methods: { 10 | createComponent ({id}) { 11 | let that = this 12 | const instance = new Vue({ 13 | el: document.getElementById(id), 14 | render (h) { 15 | let component = that.components.find(_ => _.id === id) 16 | if (!component) return this.$destroy() 17 | let {setting: { tag }, props} = component 18 | return h(tag, { 19 | attrs: {id}, 20 | props, 21 | domProps: props.domProps, 22 | class: props.class && props.class.split(' '), 23 | style: props.style 24 | }) 25 | } 26 | }) 27 | instance.$mount() 28 | return instance 29 | }, 30 | reRender (components = this.components) { 31 | components.forEach(({id, parent}) => { 32 | let target = document.getElementById(parent) 33 | createElement(target, id) 34 | this.createComponent({id}) 35 | }) 36 | } 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /src/renderer/plugins/parser.js: -------------------------------------------------------------------------------- 1 | import fs from 'fs' 2 | import htmlParser from 'htmlparser2' 3 | import {guid} from '@/utils' 4 | import {widgetList} from '@/widgets' 5 | 6 | const buildInTags = ['template', 'script', 'style'] 7 | 8 | let rootNode = null 9 | let node = null 10 | let stack = [] 11 | 12 | const parser = new htmlParser.Parser({ 13 | onopentag (originTag, props = {}) { 14 | if (buildInTags.includes(originTag)) return 15 | let {createProps, setting} = widgetList.find(_ => _.setting.originTag === originTag) 16 | node = {id: guid(), props: Object.assign(createProps(), props), setting} 17 | stack.push(node) 18 | }, 19 | ontext (text) { 20 | if (text !== null && text.trim() !== '') { 21 | node.innerText = text 22 | } 23 | }, 24 | onclosetag (tagname) { 25 | if (buildInTags.includes(tagname)) return 26 | let pNode = stack.pop() 27 | if (!stack.length) { 28 | rootNode = pNode 29 | } else { 30 | let parentNode = stack[stack.length - 1] 31 | if (!parentNode.props.slots) parentNode.props.slots = [] 32 | pNode.parent = parentNode.id 33 | parentNode.props.slots.push(pNode) 34 | } 35 | }, 36 | onerror (error) { 37 | console.log('error' + error) 38 | } 39 | }, { 40 | lowerCaseTags: false, 41 | lowerCaseAttributeNames: false 42 | }) 43 | 44 | export default path => { 45 | rootNode = null 46 | node = null 47 | stack = [] 48 | let label = path.replace(/.+[/\\]|\.vue/g, '') 49 | let data = fs.readFileSync(path) 50 | parser.write(data) 51 | parser.end() 52 | 53 | rootNode.label = label 54 | return rootNode 55 | } 56 | -------------------------------------------------------------------------------- /src/renderer/router/index.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import Router from 'vue-router' 3 | 4 | Vue.use(Router) 5 | 6 | export default new Router({ 7 | routes: [ 8 | { 9 | path: '/', 10 | name: 'home', 11 | component: require('@/views/home').default 12 | } 13 | ] 14 | }) 15 | -------------------------------------------------------------------------------- /src/renderer/services/index.js: -------------------------------------------------------------------------------- 1 | const files = require.context('.', true, /models\/[^/]+\.js$/) 2 | 3 | files.keys().forEach(key => { 4 | module.exports[key.replace(/\.\/models\/|\.js/g, '')] = files(key).default 5 | }) 6 | -------------------------------------------------------------------------------- /src/renderer/services/models/Project.js: -------------------------------------------------------------------------------- 1 | import fs from 'fs' 2 | import pretty from 'pretty' 3 | import {stringifyTemplate} from '@/utils/component' 4 | 5 | class Project { 6 | // constructor () {} 7 | 8 | load (path, {encoding = 'utf8', flag} = {}) { 9 | let project = JSON.parse(fs.readFileSync(path, {encoding, flag})) 10 | return { 11 | pages: project.map(_ => ({ 12 | id: _.id, 13 | label: _.label, 14 | children: _.children 15 | })), 16 | modules: project.reduce((pre, {id, components}) => { 17 | pre[id] = { 18 | namespaced: true, 19 | state () { 20 | return { 21 | components, 22 | selectedLayout: null, 23 | selectedBlock: null, 24 | selectedWidget: null, 25 | selectedComponent: null 26 | } 27 | } 28 | } 29 | return pre 30 | }, {}) 31 | } 32 | } 33 | 34 | save ({name, path}, data, cb) { 35 | /* eslint-disable */ 36 | let template, styles, code 37 | const scripts = ` 43 | 44 | 51 | -------------------------------------------------------------------------------- /src/renderer/views/home/children/CodePane.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 49 | 50 | 55 | 56 | -------------------------------------------------------------------------------- /src/renderer/views/home/children/InspectorPane.vue: -------------------------------------------------------------------------------- 1 | 52 | 53 | 82 | 83 | 94 | 95 | 109 | -------------------------------------------------------------------------------- /src/renderer/views/home/children/LayoutPane.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | 48 | 49 | 56 | -------------------------------------------------------------------------------- /src/renderer/views/home/children/OutlinePane.vue: -------------------------------------------------------------------------------- 1 | 14 | 15 | 56 | -------------------------------------------------------------------------------- /src/renderer/views/home/children/SelectedMask.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 46 | 47 | 55 | -------------------------------------------------------------------------------- /src/renderer/views/home/children/SettingDialog.vue: -------------------------------------------------------------------------------- 1 | 35 | 36 | 98 | 99 | 102 | -------------------------------------------------------------------------------- /src/renderer/views/home/children/SitemapPane.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 38 | 39 | 42 | -------------------------------------------------------------------------------- /src/renderer/views/home/children/StylePane.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 62 | 63 | 68 | -------------------------------------------------------------------------------- /src/renderer/views/home/children/WidgetPane.vue: -------------------------------------------------------------------------------- 1 | 15 | 16 | 40 | 41 | 48 | -------------------------------------------------------------------------------- /src/renderer/views/home/children/WireframePane.vue: -------------------------------------------------------------------------------- 1 | 22 | 23 | 136 | 137 | 144 | 145 | 152 | 153 | -------------------------------------------------------------------------------- /src/renderer/views/home/index.vue: -------------------------------------------------------------------------------- 1 | 97 | 98 | 230 | 231 | 247 | 248 | 278 | -------------------------------------------------------------------------------- /src/renderer/widgets/element-ui/aside/type.js: -------------------------------------------------------------------------------- 1 | const setting = Object.freeze({ 2 | label: 'el-aside', 3 | tag: 'VdElAside', 4 | originTag: 'el-aside', 5 | category: 'layout', 6 | config: { 7 | Props: [ 8 | { 9 | key: 'width', 10 | label: 'width', 11 | type: 'String', 12 | inputType: 'input', 13 | default: '' 14 | } 15 | ], 16 | Slots: [ 17 | { 18 | name: 'default' 19 | } 20 | ] 21 | } 22 | }) 23 | 24 | export default setting 25 | -------------------------------------------------------------------------------- /src/renderer/widgets/element-ui/button/type.js: -------------------------------------------------------------------------------- 1 | const setting = Object.freeze({ 2 | label: 'el-button', 3 | tag: 'VdElButton', 4 | originTag: 'el-button', 5 | category: 'form', 6 | config: { 7 | Props: [ 8 | { 9 | key: 'text', 10 | label: 'text', 11 | type: 'String', 12 | inputType: 'input', 13 | default: 'button' 14 | }, 15 | { 16 | key: 'size', 17 | label: 'size', 18 | type: 'String', 19 | inputType: 'select', 20 | default: 'medium', 21 | data: [ 22 | { value: 'medium', label: 'medium' }, 23 | { value: 'small', label: 'small' }, 24 | { value: 'mini', label: 'mini' } 25 | ] 26 | }, 27 | { 28 | key: 'type', 29 | label: 'type', 30 | type: 'String', 31 | inputType: 'select', 32 | default: '', 33 | data: [ 34 | { value: 'primary', label: 'primary' }, 35 | { value: 'success', label: 'success' }, 36 | { value: 'warning', label: 'warning' }, 37 | { value: 'danger', label: 'danger' }, 38 | { value: 'info', label: 'info' }, 39 | { value: 'text', label: 'text' } 40 | ] 41 | }, 42 | { 43 | key: 'plain', 44 | label: 'plain', 45 | type: 'Boolean', 46 | inputType: 'switch', 47 | default: false 48 | }, 49 | { 50 | key: 'round', 51 | label: 'round', 52 | type: 'Boolean', 53 | inputType: 'switch', 54 | default: false 55 | }, 56 | { 57 | key: 'loading', 58 | label: 'loading', 59 | type: 'Boolean', 60 | inputType: 'switch', 61 | default: false 62 | }, 63 | { 64 | key: 'disabled', 65 | label: 'disabled', 66 | type: 'Boolean', 67 | inputType: 'switch', 68 | default: false 69 | }, 70 | { 71 | key: 'icon', 72 | label: 'icon', 73 | type: 'String', 74 | inputType: 'input', 75 | default: '' 76 | }, 77 | { 78 | key: 'autofocus', 79 | label: 'autofocus', 80 | type: 'Boolean', 81 | inputType: 'switch', 82 | default: false 83 | }, 84 | { 85 | key: 'native-type', 86 | label: 'native-type', 87 | type: 'String', 88 | inputType: 'select', 89 | default: 'button', 90 | data: [ 91 | { value: 'button', label: 'button' }, 92 | { value: 'submit', label: 'submit' }, 93 | { value: 'reset', label: 'reset' } 94 | ] 95 | } 96 | ], 97 | Slots: [ 98 | { name: 'default' } 99 | ] 100 | } 101 | }) 102 | 103 | export default setting 104 | -------------------------------------------------------------------------------- /src/renderer/widgets/element-ui/card/type.js: -------------------------------------------------------------------------------- 1 | const setting = Object.freeze({ 2 | label: 'el-card', 3 | tag: 'VdElCard', 4 | originTag: 'el-card', 5 | category: 'layout', 6 | config: { 7 | Props: [ 8 | { 9 | key: 'header', 10 | label: 'header', 11 | type: 'String', 12 | inputType: 'input', 13 | default: '' 14 | }, 15 | { 16 | key: 'body-style', 17 | label: 'body-style', 18 | type: 'String', 19 | inputType: 'input', 20 | default: '{ "padding": "20px" }' 21 | } 22 | ], 23 | Slots: [ 24 | { name: 'default' }, 25 | { name: 'header' } 26 | ] 27 | } 28 | }) 29 | 30 | export default setting 31 | -------------------------------------------------------------------------------- /src/renderer/widgets/element-ui/col/type.js: -------------------------------------------------------------------------------- 1 | const setting = Object.freeze({ 2 | label: 'el-col', 3 | tag: 'VdElCol', 4 | originTag: 'el-col', 5 | category: 'layout', 6 | config: { 7 | Props: [ 8 | { 9 | key: 'span', 10 | label: 'span', 11 | type: 'Number', 12 | inputType: 'input', 13 | default: 0 14 | }, 15 | { 16 | key: 'offset', 17 | label: 'offset', 18 | type: 'Number', 19 | inputType: 'input', 20 | default: 0 21 | }, 22 | { 23 | key: 'push', 24 | label: 'push', 25 | type: 'Number', 26 | inputType: 'input', 27 | default: 0 28 | }, 29 | { 30 | key: 'pull', 31 | label: 'pull', 32 | type: 'Number', 33 | inputType: 'input', 34 | default: 0 35 | }, 36 | { 37 | key: 'xs', 38 | label: 'xs', 39 | type: 'Object', 40 | inputType: 'input', 41 | default: {} 42 | }, 43 | { 44 | key: 'sm', 45 | label: 'sm', 46 | type: 'Object', 47 | inputType: 'input', 48 | default: {} 49 | }, 50 | { 51 | key: 'md', 52 | label: 'md', 53 | type: 'Object', 54 | inputType: 'input', 55 | default: {} 56 | }, 57 | { 58 | key: 'lg', 59 | label: 'lg', 60 | type: 'Object', 61 | inputType: 'input', 62 | default: {} 63 | }, 64 | { 65 | key: 'xl', 66 | label: 'xl', 67 | type: 'Object', 68 | inputType: 'input', 69 | default: {} 70 | }, 71 | { 72 | key: 'tag', 73 | label: 'tag', 74 | type: 'String', 75 | inputType: 'input', 76 | default: 'div' 77 | } 78 | ], 79 | Slots: [ 80 | { name: 'default' } 81 | ] 82 | } 83 | }) 84 | 85 | export default setting 86 | -------------------------------------------------------------------------------- /src/renderer/widgets/element-ui/colorPicker/type.js: -------------------------------------------------------------------------------- 1 | const setting = Object.freeze({ 2 | label: 'el-color-picker', 3 | tag: 'VdElColorPicker', 4 | originTag: 'el-color-picker', 5 | category: 'form', 6 | config: { 7 | Props: [ 8 | { 9 | key: 'disabled', 10 | label: 'disabled', 11 | type: 'Boolean', 12 | inputType: 'switch', 13 | default: false 14 | }, 15 | { 16 | key: 'size', 17 | label: 'size', 18 | type: 'String', 19 | inputType: 'select', 20 | default: 'medium', 21 | data: [ 22 | { value: 'medium', label: 'medium' }, 23 | { value: 'small', label: 'small' }, 24 | { value: 'mini', label: 'mini' } 25 | ] 26 | }, 27 | { 28 | key: 'show-alpha', 29 | label: 'show-alpha', 30 | type: 'Boolean', 31 | inputType: 'switch', 32 | default: false 33 | }, 34 | { 35 | key: 'color-format', 36 | label: 'color-format', 37 | type: 'String', 38 | inputType: 'select', 39 | default: 'hex', 40 | data: [ 41 | { value: 'hsl', label: 'hsl' }, 42 | { value: 'hsv', label: 'hsv' }, 43 | { value: 'hex', label: 'hex' }, 44 | { value: 'rgb', label: 'rgb' } 45 | ] 46 | }, 47 | { 48 | key: 'popper-class', 49 | label: 'popper-class', 50 | type: 'String', 51 | inputType: 'input', 52 | default: '' 53 | } 54 | ], 55 | Slots: [] 56 | } 57 | }) 58 | 59 | export default setting 60 | -------------------------------------------------------------------------------- /src/renderer/widgets/element-ui/container/type.js: -------------------------------------------------------------------------------- 1 | 2 | const setting = Object.freeze({ 3 | label: 'el-container', 4 | tag: 'VdElContainer', 5 | originTag: 'el-container', 6 | category: 'layout', 7 | config: { 8 | Props: [ 9 | { 10 | key: 'direction', 11 | label: 'direction', 12 | type: 'String', 13 | inputType: 'select', 14 | default: 'vertical', 15 | data: [ 16 | { value: 'horizontal', label: 'horizontal' }, 17 | { value: 'vertical', label: 'vertical' } 18 | ] 19 | } 20 | ], 21 | Slots: [ 22 | { name: 'default' } 23 | ] 24 | } 25 | }) 26 | 27 | export default setting 28 | -------------------------------------------------------------------------------- /src/renderer/widgets/element-ui/footer/type.js: -------------------------------------------------------------------------------- 1 | const setting = Object.freeze({ 2 | label: 'el-footer', 3 | tag: 'VdElFooter', 4 | originTag: 'el-footer', 5 | category: 'layout', 6 | config: { 7 | Props: [ 8 | { 9 | key: 'height', 10 | label: 'height', 11 | type: 'String', 12 | inputType: 'input', 13 | default: '' 14 | } 15 | ], 16 | Slots: [ 17 | { name: 'default' } 18 | ] 19 | } 20 | }) 21 | 22 | export default setting 23 | -------------------------------------------------------------------------------- /src/renderer/widgets/element-ui/form/type.js: -------------------------------------------------------------------------------- 1 | const setting = Object.freeze({ 2 | label: 'el-form', 3 | tag: 'VdElForm', 4 | originTag: 'el-form', 5 | category: 'form', 6 | config: { 7 | Props: [ 8 | { 9 | key: 'model', 10 | label: 'model', 11 | type: 'Object', 12 | inputType: 'input', 13 | default: {} 14 | }, 15 | { 16 | key: 'rules', 17 | label: 'rules', 18 | type: 'Object', 19 | inputType: 'input', 20 | default: {} 21 | }, 22 | { 23 | key: 'inline', 24 | label: 'inline', 25 | type: 'Boolean', 26 | inputType: 'switch', 27 | default: false 28 | }, 29 | { 30 | key: 'label-position', 31 | label: 'label-position', 32 | type: 'String', 33 | inputType: 'select', 34 | default: 'right', 35 | data: [ 36 | { value: 'right', label: 'right' }, 37 | { value: 'left', label: 'left' }, 38 | { value: 'top', label: 'top' } 39 | ] 40 | }, 41 | { 42 | key: 'label-width', 43 | label: 'label-width', 44 | type: 'String', 45 | inputType: 'input', 46 | default: '' 47 | }, 48 | { 49 | key: 'label-suffix', 50 | label: 'label-suffix', 51 | type: 'String', 52 | inputType: 'input', 53 | default: '' 54 | }, 55 | { 56 | key: 'show-message', 57 | label: 'show-message', 58 | type: 'Boolean', 59 | inputType: 'switch', 60 | default: true 61 | }, 62 | { 63 | key: 'inline-message', 64 | label: 'inline-message', 65 | type: 'Boolean', 66 | inputType: 'switch', 67 | default: false 68 | }, 69 | { 70 | key: 'status-icon', 71 | label: 'status-icon', 72 | type: 'Boolean', 73 | inputType: 'switch', 74 | default: false 75 | }, 76 | { 77 | key: 'validate-on-rule-change', 78 | label: 'validate-on-rule-change', 79 | type: 'Boolean', 80 | inputType: 'switch', 81 | default: false 82 | }, 83 | { 84 | key: 'size', 85 | label: 'size', 86 | type: 'String', 87 | inputType: 'select', 88 | default: '', 89 | data: [ 90 | { value: 'medium', label: 'medium' }, 91 | { value: 'small', label: 'small' }, 92 | { value: 'mini', label: 'mini' } 93 | ] 94 | }, 95 | { 96 | key: 'disabled', 97 | label: 'disabled', 98 | type: 'Boolean', 99 | inputType: 'switch', 100 | default: false 101 | } 102 | ], 103 | Slots: [ 104 | { name: 'default' } 105 | ] 106 | } 107 | }) 108 | 109 | export default setting 110 | -------------------------------------------------------------------------------- /src/renderer/widgets/element-ui/header/type.js: -------------------------------------------------------------------------------- 1 | const setting = Object.freeze({ 2 | label: 'el-header', 3 | tag: 'VdElHeader', 4 | originTag: 'el-header', 5 | category: 'layout', 6 | config: { 7 | Props: [ 8 | { 9 | key: 'height', 10 | label: 'height', 11 | type: 'String', 12 | inputType: 'input', 13 | default: '' 14 | } 15 | ], 16 | Slots: [ 17 | { name: 'default' } 18 | ] 19 | } 20 | }) 21 | 22 | export default setting 23 | -------------------------------------------------------------------------------- /src/renderer/widgets/element-ui/input/type.js: -------------------------------------------------------------------------------- 1 | const setting = Object.freeze({ 2 | label: 'el-input', 3 | tag: 'VdElInput', 4 | originTag: 'el-input', 5 | category: 'form', 6 | config: { 7 | Props: [ 8 | { 9 | key: 'type', 10 | label: 'type', 11 | type: 'String', 12 | inputType: 'select', 13 | default: 'text', 14 | data: [ 15 | { value: 'text', label: 'text' }, 16 | { value: 'textarea', label: 'textarea' } 17 | ] 18 | }, 19 | { 20 | key: 'value', 21 | label: 'value', 22 | type: 'String', 23 | inputType: 'input', 24 | default: '' 25 | }, 26 | { 27 | key: 'maxLength', 28 | label: 'maxLength', 29 | type: 'Number', 30 | inputType: 'input', 31 | default: 0 32 | }, 33 | { 34 | key: 'minLength', 35 | label: 'minLength', 36 | type: 'Number', 37 | inputType: 'input', 38 | default: 0 39 | }, 40 | { 41 | key: 'placeholder', 42 | label: 'placeholder', 43 | type: 'String', 44 | inputType: 'input', 45 | default: '' 46 | }, 47 | { 48 | key: 'size', 49 | label: 'size', 50 | type: 'String', 51 | inputType: 'select', 52 | default: 'medium', 53 | data: [ 54 | { value: 'medium', label: 'medium' }, 55 | { value: 'small', label: 'small' }, 56 | { value: 'mini', label: 'mini' } 57 | ] 58 | }, 59 | { 60 | key: 'prefix-icon', 61 | label: 'prefix-icon', 62 | type: 'String', 63 | inputType: 'input', 64 | default: '' 65 | }, 66 | { 67 | key: 'suffix-icon', 68 | label: 'suffix-icon', 69 | type: 'String', 70 | inputType: 'input', 71 | default: '' 72 | }, 73 | { 74 | key: 'rows', 75 | label: 'rows', 76 | type: 'Number', 77 | inputType: 'input', 78 | default: 0 79 | }, 80 | { 81 | key: 'autosize', 82 | label: 'autosize', 83 | type: 'Boolean', 84 | inputType: 'switch', 85 | default: false 86 | }, 87 | { 88 | key: 'auto-complete', 89 | label: 'auto-complete', 90 | type: 'String', 91 | inputType: 'select', 92 | default: 'on', 93 | data: [ 94 | { value: 'on', label: 'on' }, 95 | { value: 'off', label: 'off' } 96 | ] 97 | }, 98 | { 99 | key: 'name', 100 | label: 'name', 101 | type: 'String', 102 | inputType: 'input', 103 | default: '' 104 | }, 105 | { 106 | key: 'readonly', 107 | label: 'readonly', 108 | type: 'Boolean', 109 | inputType: 'switch', 110 | default: false 111 | }, 112 | { 113 | key: 'max', 114 | label: 'max', 115 | type: 'String', 116 | inputType: 'input', 117 | default: '' 118 | }, 119 | { 120 | key: 'min', 121 | label: 'min', 122 | type: 'String', 123 | inputType: 'input', 124 | default: '' 125 | }, 126 | { 127 | key: 'step', 128 | label: 'step', 129 | type: 'String', 130 | inputType: 'input', 131 | default: '' 132 | }, 133 | { 134 | key: 'resize', 135 | label: 'resize', 136 | type: 'String', 137 | inputType: 'select', 138 | default: 'none', 139 | data: [ 140 | { value: 'none', label: 'none' }, 141 | { value: 'both', label: 'both' }, 142 | { value: 'horizontal', label: 'horizontal' }, 143 | { value: 'vertical', label: 'vertical' } 144 | ] 145 | }, 146 | { 147 | key: 'autofocus', 148 | label: 'autofocus', 149 | type: 'Boolean', 150 | inputType: 'switch', 151 | default: false 152 | }, 153 | { 154 | key: 'form', 155 | label: 'form', 156 | type: 'String', 157 | inputType: 'input', 158 | default: '' 159 | }, 160 | { 161 | key: 'label', 162 | label: 'label', 163 | type: 'String', 164 | inputType: 'input', 165 | default: '' 166 | }, 167 | { 168 | key: 'tabindex', 169 | label: 'tabindex', 170 | type: 'String', 171 | inputType: 'input', 172 | default: '' 173 | } 174 | ], 175 | Slots: [ 176 | { name: 'prefix' }, 177 | { name: 'suffix' }, 178 | { name: 'prepend' }, 179 | { name: 'append' } 180 | ] 181 | } 182 | }) 183 | 184 | export default setting 185 | -------------------------------------------------------------------------------- /src/renderer/widgets/element-ui/main/type.js: -------------------------------------------------------------------------------- 1 | const setting = Object.freeze({ 2 | label: 'el-main', 3 | tag: 'VdElMain', 4 | originTag: 'el-main', 5 | category: 'layout', 6 | config: { 7 | Props: [ 8 | { 9 | key: 'height', 10 | label: 'height', 11 | type: 'String', 12 | inputType: 'input', 13 | default: '' 14 | } 15 | ], 16 | Slots: [ 17 | { name: 'default' } 18 | ] 19 | } 20 | }) 21 | 22 | export default setting 23 | -------------------------------------------------------------------------------- /src/renderer/widgets/element-ui/pagination/type.js: -------------------------------------------------------------------------------- 1 | const setting = Object.freeze({ 2 | label: 'el-pagination', 3 | tag: 'VdElPagination', 4 | originTag: 'el-pagination', 5 | category: 'data', 6 | config: { 7 | Props: [ 8 | { 9 | key: 'small', 10 | label: 'small', 11 | type: 'Boolean', 12 | inputType: 'switch', 13 | default: false 14 | }, 15 | { 16 | key: 'background', 17 | label: 'background', 18 | type: 'Boolean', 19 | inputType: 'switch', 20 | default: false 21 | }, 22 | { 23 | key: 'page-size', 24 | label: 'page-size', 25 | type: 'Number', 26 | inputType: 'input', 27 | default: 10 28 | }, 29 | { 30 | key: 'total', 31 | label: 'total', 32 | type: 'Number', 33 | inputType: 'input', 34 | default: 0 35 | }, 36 | { 37 | key: 'page-count', 38 | label: 'page-count', 39 | type: 'Number', 40 | inputType: 'input', 41 | default: 0 42 | }, 43 | { 44 | key: 'current-page', 45 | label: 'current-page', 46 | type: 'Number', 47 | inputType: 'input', 48 | default: 1 49 | }, 50 | { 51 | key: 'layout', 52 | label: 'layout', 53 | type: 'String', 54 | inputType: 'input', 55 | default: 'prev, pager, next, jumper, ->, total' 56 | }, 57 | { 58 | key: 'page-sizes', 59 | label: 'page-sizes', 60 | type: 'Number', 61 | inputType: 'select', 62 | default: 0, 63 | data: [ 64 | { value: 10, label: 10 }, 65 | { value: 20, label: 20 }, 66 | { value: 30, label: 30 }, 67 | { value: 40, label: 40 }, 68 | { value: 50, label: 50 }, 69 | { value: 100, label: 100 } 70 | ] 71 | }, 72 | { 73 | key: 'popper-class', 74 | label: 'popper-class', 75 | type: 'String', 76 | inputType: 'input', 77 | default: '' 78 | }, 79 | { 80 | key: 'prev-text', 81 | label: 'prev-text', 82 | type: 'String', 83 | inputType: 'input', 84 | default: '' 85 | }, 86 | { 87 | key: 'next-text', 88 | label: 'next-text', 89 | type: 'String', 90 | inputType: 'input', 91 | default: '' 92 | }, 93 | { 94 | key: 'disabled', 95 | label: 'disabled', 96 | type: 'Boolean', 97 | inputType: 'switch', 98 | default: false 99 | } 100 | ], 101 | Slots: [ 102 | { name: 'default' } 103 | ] 104 | } 105 | }) 106 | 107 | export default setting 108 | -------------------------------------------------------------------------------- /src/renderer/widgets/element-ui/progress/type.js: -------------------------------------------------------------------------------- 1 | const setting = Object.freeze({ 2 | label: 'el-progress', 3 | tag: 'VdElProgress', 4 | originTag: 'el-progress', 5 | category: 'data', 6 | config: { 7 | Props: [ 8 | { 9 | key: 'percentage', 10 | label: 'percentage', 11 | type: 'Number', 12 | inputType: 'input', 13 | default: 0 14 | }, 15 | { 16 | key: 'type', 17 | label: 'type', 18 | type: 'String', 19 | inputType: 'select', 20 | default: 'line', 21 | data: [ 22 | { value: 'line', label: 'line' }, 23 | { value: 'circle', label: 'circle' } 24 | ] 25 | }, 26 | { 27 | key: 'stroke-width', 28 | label: 'stroke-width', 29 | type: 'Number', 30 | inputType: 'input', 31 | default: 1 32 | }, 33 | { 34 | key: 'text-inside', 35 | label: 'text-inside', 36 | type: 'Boolean', 37 | inputType: 'switch', 38 | default: false 39 | }, 40 | { 41 | key: 'status', 42 | label: 'status', 43 | type: 'String', 44 | inputType: 'select', 45 | default: '', 46 | data: [ 47 | { value: 'success', label: 'success' }, 48 | { value: 'exception', label: 'exception' } 49 | ] 50 | }, 51 | { 52 | key: 'width', 53 | label: 'width', 54 | type: 'Number', 55 | inputType: 'input', 56 | default: 126 57 | }, 58 | { 59 | key: 'show-text', 60 | label: 'show-text', 61 | type: 'Boolean', 62 | inputType: 'switch', 63 | default: true 64 | } 65 | ], 66 | Slots: [] 67 | } 68 | }) 69 | 70 | export default setting 71 | -------------------------------------------------------------------------------- /src/renderer/widgets/element-ui/radio/type.js: -------------------------------------------------------------------------------- 1 | const setting = Object.freeze({ 2 | label: 'el-radio', 3 | tag: 'VdElRadio', 4 | originTag: 'el-radio', 5 | category: 'form', 6 | config: { 7 | Props: [ 8 | { 9 | key: 'label', 10 | label: 'label', 11 | type: 'String', 12 | inputType: 'input', 13 | default: '' 14 | }, 15 | { 16 | key: 'disabled', 17 | label: 'disabled', 18 | type: 'Boolean', 19 | inputType: 'switch', 20 | default: false 21 | }, 22 | { 23 | key: 'border', 24 | label: 'border', 25 | type: 'Boolean', 26 | inputType: 'switch', 27 | default: false 28 | }, 29 | { 30 | key: 'size', 31 | label: 'size', 32 | type: 'String', 33 | inputType: 'select', 34 | default: 'medium', 35 | data: [ 36 | { value: 'medium', label: 'medium' }, 37 | { value: 'small', label: 'small' }, 38 | { value: 'mini', label: 'mini' } 39 | ] 40 | }, 41 | { 42 | key: 'name', 43 | label: 'name', 44 | type: 'String', 45 | inputType: 'input', 46 | default: '' 47 | } 48 | ], 49 | Slots: [ 50 | { name: 'default' } 51 | ] 52 | } 53 | }) 54 | 55 | export default setting 56 | -------------------------------------------------------------------------------- /src/renderer/widgets/element-ui/rate/type.js: -------------------------------------------------------------------------------- 1 | const setting = Object.freeze({ 2 | label: 'el-rate', 3 | tag: 'VdElRate', 4 | originTag: 'el-rate', 5 | category: 'form', 6 | config: { 7 | Props: [ 8 | { 9 | key: 'max', 10 | label: 'max', 11 | type: 'Number', 12 | inputType: 'input', 13 | default: 5 14 | }, 15 | { 16 | key: 'disabled', 17 | label: 'disabled', 18 | type: 'Boolean', 19 | inputType: 'switch', 20 | default: false 21 | }, 22 | { 23 | key: 'allow-half', 24 | label: 'allow-half', 25 | type: 'Boolean', 26 | inputType: 'switch', 27 | default: false 28 | }, 29 | { 30 | key: 'low-threshold', 31 | label: 'low-threshold', 32 | type: 'Number', 33 | inputType: 'input', 34 | default: 2 35 | }, 36 | { 37 | key: 'high-threshold', 38 | label: 'high-threshold', 39 | type: 'Number', 40 | inputType: 'input', 41 | default: 4 42 | }, 43 | { 44 | key: 'void-color', 45 | label: 'void-color', 46 | type: 'String', 47 | inputType: 'input', 48 | default: '#C6D1DE' 49 | }, 50 | { 51 | key: 'disabled-void-color', 52 | label: 'disabled-void-color', 53 | type: 'String', 54 | inputType: 'input', 55 | default: '#EFF2F7' 56 | }, 57 | { 58 | key: 'void-icon-class', 59 | label: 'void-icon-class', 60 | type: 'String', 61 | inputType: 'input', 62 | default: 'el-icon-star-off' 63 | }, 64 | { 65 | key: 'disabled-void-icon-class', 66 | label: 'disabled-void-icon-class', 67 | type: 'String', 68 | inputType: 'input', 69 | default: 'el-icon-star-on' 70 | }, 71 | { 72 | key: 'show-text', 73 | label: 'show-text', 74 | type: 'Boolean', 75 | inputType: 'switch', 76 | default: false 77 | }, 78 | { 79 | key: 'show-score', 80 | label: 'show-score', 81 | type: 'Boolean', 82 | inputType: 'switch', 83 | default: false 84 | }, 85 | { 86 | key: 'text-color', 87 | label: 'text-color', 88 | type: 'String', 89 | inputType: 'input', 90 | default: '#1F2D3D' 91 | }, 92 | { 93 | key: 'score-template', 94 | label: 'score-template', 95 | type: 'String', 96 | inputType: 'input', 97 | default: '{value}' 98 | } 99 | ], 100 | Slots: [ 101 | { name: 'default' } 102 | ] 103 | } 104 | }) 105 | 106 | export default setting 107 | -------------------------------------------------------------------------------- /src/renderer/widgets/element-ui/row/type.js: -------------------------------------------------------------------------------- 1 | const setting = Object.freeze({ 2 | label: 'el-row', 3 | tag: 'VdElRow', 4 | originTag: 'el-row', 5 | category: 'layout', 6 | config: { 7 | Props: [ 8 | { 9 | key: 'gutter', 10 | label: 'gutter', 11 | type: 'Number', 12 | inputType: 'input', 13 | default: 0 14 | }, 15 | { 16 | key: 'type', 17 | label: 'type', 18 | type: 'String', 19 | inputType: 'select', 20 | default: '', 21 | data: [ 22 | { value: 'flex', label: 'flex' } 23 | ] 24 | }, 25 | { 26 | key: 'justify', 27 | label: 'justify', 28 | type: 'String', 29 | inputType: 'select', 30 | default: '', 31 | data: [ 32 | { value: 'start', label: 'start' }, 33 | { value: 'end', label: 'end' }, 34 | { value: 'center', label: 'center' }, 35 | { value: 'space-around', label: 'space-around' }, 36 | { value: 'space-between', label: 'space-between' } 37 | ] 38 | }, 39 | { 40 | key: 'align', 41 | label: 'align', 42 | type: 'String', 43 | inputType: 'select', 44 | default: '', 45 | data: [ 46 | { value: 'top', label: 'top' }, 47 | { value: 'middle', label: 'middle' }, 48 | { value: 'bottom', label: 'bottom' } 49 | ] 50 | }, 51 | { 52 | key: 'tag', 53 | label: 'tag', 54 | type: 'String', 55 | inputType: 'input', 56 | default: 'div' 57 | } 58 | ], 59 | Slots: [ 60 | { name: 'default' } 61 | ] 62 | } 63 | }) 64 | 65 | export default setting 66 | -------------------------------------------------------------------------------- /src/renderer/widgets/element-ui/select/type.js: -------------------------------------------------------------------------------- 1 | const setting = Object.freeze({ 2 | label: 'el-select', 3 | tag: 'VdElSelect', 4 | originTag: 'el-select', 5 | category: 'form', 6 | config: { 7 | Props: [ 8 | { 9 | key: 'multiple', 10 | label: 'multiple', 11 | type: 'Boolean', 12 | inputType: 'switch', 13 | default: false 14 | }, 15 | { 16 | key: 'disabled', 17 | label: 'disabled', 18 | type: 'Boolean', 19 | inputType: 'switch', 20 | default: false 21 | }, 22 | { 23 | key: 'value-key', 24 | label: 'value-key', 25 | type: 'Boolean', 26 | inputType: 'switch', 27 | default: false 28 | }, 29 | { 30 | key: 'size', 31 | label: 'size', 32 | type: 'String', 33 | inputType: 'select', 34 | default: '', 35 | data: [ 36 | { value: 'medium', label: 'medium' }, 37 | { value: 'small', label: 'small' }, 38 | { value: 'mini', label: 'mini' } 39 | ] 40 | }, 41 | { 42 | key: 'clearable', 43 | label: 'clearable', 44 | type: 'Boolean', 45 | inputType: 'switch', 46 | default: false 47 | }, 48 | { 49 | key: 'collapse-tags', 50 | label: 'collapse-tags', 51 | type: 'Boolean', 52 | inputType: 'switch', 53 | default: false 54 | }, 55 | { 56 | key: 'multiple-limit', 57 | label: 'multiple-limit', 58 | type: 'Number', 59 | inputType: 'input', 60 | default: 0 61 | }, 62 | { 63 | key: 'name', 64 | label: 'name', 65 | type: 'String', 66 | inputType: 'input', 67 | default: '' 68 | }, 69 | { 70 | key: 'auto-complete', 71 | label: 'auto-complete', 72 | type: 'String', 73 | inputType: 'select', 74 | default: 'off', 75 | data: [ 76 | { value: 'off', label: 'off' }, 77 | { value: 'on', label: 'on' } 78 | ] 79 | }, 80 | { 81 | key: 'placeholder', 82 | label: 'placeholder', 83 | type: 'String', 84 | inputType: 'input', 85 | default: '' 86 | }, 87 | { 88 | key: 'filterable', 89 | label: 'filterable', 90 | type: 'Boolean', 91 | inputType: 'switch', 92 | default: false 93 | }, 94 | { 95 | key: 'allow-create', 96 | label: 'allow-create', 97 | type: 'Boolean', 98 | inputType: 'switch', 99 | default: false 100 | }, 101 | { 102 | key: 'filter-method', 103 | label: 'filter-method', 104 | type: 'String', 105 | inputType: 'input', 106 | default: '' 107 | }, 108 | { 109 | key: 'remote', 110 | label: 'remote', 111 | type: 'Boolean', 112 | inputType: 'switch', 113 | default: false 114 | }, 115 | { 116 | key: 'remote-method', 117 | label: 'remote-method', 118 | type: 'String', 119 | inputType: 'input', 120 | default: '' 121 | }, 122 | { 123 | key: 'loading', 124 | label: 'loading', 125 | type: 'Boolean', 126 | inputType: 'switch', 127 | default: false 128 | }, 129 | { 130 | key: 'loading-text', 131 | label: 'loading-text', 132 | type: 'String', 133 | inputType: 'input', 134 | default: '加载中' 135 | }, 136 | { 137 | key: 'no-match-text', 138 | label: 'no-match-text', 139 | type: 'String', 140 | inputType: 'input', 141 | default: '无匹配数据' 142 | }, 143 | { 144 | key: 'no-data-text', 145 | label: 'no-data-text', 146 | type: 'String', 147 | inputType: 'input', 148 | default: '无数据' 149 | }, 150 | { 151 | key: 'popper-class', 152 | label: 'popper-class', 153 | type: 'String', 154 | inputType: 'input', 155 | default: '' 156 | }, 157 | { 158 | key: 'reserve-keyword', 159 | label: 'reserve-keyword', 160 | type: 'Boolean', 161 | inputType: 'switch', 162 | default: false 163 | }, 164 | { 165 | key: 'default-first-option', 166 | label: 'default-first-option', 167 | type: 'Boolean', 168 | inputType: 'switch', 169 | default: false 170 | }, 171 | { 172 | key: 'popper-append-to-body', 173 | label: 'popper-append-to-body', 174 | type: 'Boolean', 175 | inputType: 'switch', 176 | default: true 177 | } 178 | ], 179 | Slots: [ 180 | { name: 'default' } 181 | ] 182 | } 183 | }) 184 | 185 | export default setting 186 | -------------------------------------------------------------------------------- /src/renderer/widgets/element-ui/tag/type.js: -------------------------------------------------------------------------------- 1 | const setting = Object.freeze({ 2 | label: 'el-tag', 3 | tag: 'VdElTag', 4 | originTag: 'el-tag', 5 | category: 'data', 6 | config: { 7 | Props: [ 8 | { 9 | key: 'type', 10 | label: 'type', 11 | type: 'String', 12 | inputType: 'select', 13 | default: '', 14 | data: [ 15 | { value: 'success', label: 'success' }, 16 | { value: 'info', label: 'info' }, 17 | { value: 'warning', label: 'warning' }, 18 | { value: 'danger', label: 'danger' } 19 | ] 20 | }, 21 | { 22 | key: 'closable', 23 | label: 'closable', 24 | type: 'Boolean', 25 | inputType: 'switch', 26 | default: false 27 | }, 28 | { 29 | key: 'disable-transitions', 30 | label: 'disable-transitions', 31 | type: 'Boolean', 32 | inputType: 'switch', 33 | default: false 34 | }, 35 | { 36 | key: 'hit', 37 | label: 'hit', 38 | type: 'Boolean', 39 | inputType: 'switch', 40 | default: false 41 | }, 42 | { 43 | key: 'color', 44 | label: 'color', 45 | type: 'String', 46 | inputType: 'input', 47 | default: '' 48 | }, 49 | { 50 | key: 'size', 51 | label: 'size', 52 | type: 'String', 53 | inputType: 'select', 54 | default: 'medium', 55 | data: [ 56 | { value: 'medium', label: 'medium' }, 57 | { value: 'small', label: 'small' }, 58 | { value: 'mini', label: 'mini' } 59 | ] 60 | } 61 | ], 62 | Slots: [ 63 | { name: 'default' } 64 | ] 65 | } 66 | }) 67 | 68 | export default setting 69 | -------------------------------------------------------------------------------- /src/renderer/widgets/index.js: -------------------------------------------------------------------------------- 1 | import wrapWidget from './wrapWidget' 2 | import {partition} from '@/utils' 3 | const files = require.context('.', true, /\.(\/[^/]+){3}\.js$/) 4 | const modules = {} 5 | const widgetList = [] 6 | const prefixRE = /\.\/(.+?)\// 7 | 8 | function classifyModule (key, file) { 9 | let prefix = key.match(prefixRE)[1] 10 | if (!modules[prefix]) modules[prefix] = [] 11 | modules[prefix].push(file) 12 | widgetList.push(file) 13 | } 14 | 15 | let [customList, defaultList] = partition(files.keys(), _ => _.includes('index.js')) 16 | defaultList = defaultList.filter(_ => !customList.includes(_.replace('/index', '/type'))) 17 | 18 | // use custom config or wrap it with wrapWidget for default 19 | customList.forEach(key => classifyModule(key, files(key).default)) 20 | defaultList.forEach(key => classifyModule(key, wrapWidget(files(key).default))) 21 | 22 | export function installWidgets (Vue) { 23 | widgetList.forEach(_ => { 24 | Vue.component(_.setting.tag, _.component) 25 | }) 26 | } 27 | export {widgetList} 28 | export default modules 29 | -------------------------------------------------------------------------------- /src/renderer/widgets/native/div/type.js: -------------------------------------------------------------------------------- 1 | const setting = Object.freeze({ 2 | label: 'div', 3 | tag: 'VdDiv', 4 | originTag: 'div', 5 | category: 'layout', 6 | config: { 7 | Props: [ 8 | ], 9 | Slots: [ 10 | { name: 'default' } 11 | ] 12 | } 13 | }) 14 | 15 | export default setting 16 | -------------------------------------------------------------------------------- /src/renderer/widgets/native/i/type.js: -------------------------------------------------------------------------------- 1 | const setting = Object.freeze({ 2 | label: 'i', 3 | tag: 'VdI', 4 | originTag: 'i', 5 | category: 'item', 6 | config: { 7 | Props: [ 8 | ], 9 | Slots: [ 10 | { name: 'default' } 11 | ] 12 | } 13 | }) 14 | 15 | export default setting 16 | -------------------------------------------------------------------------------- /src/renderer/widgets/native/section/type.js: -------------------------------------------------------------------------------- 1 | const setting = Object.freeze({ 2 | label: 'section', 3 | tag: 'VdSection', 4 | originTag: 'section', 5 | category: 'layout', 6 | config: { 7 | Props: [ 8 | ], 9 | Slots: [ 10 | { name: 'default' } 11 | ] 12 | } 13 | }) 14 | 15 | export default setting 16 | -------------------------------------------------------------------------------- /src/renderer/widgets/vuetify/button/type.js: -------------------------------------------------------------------------------- 1 | const setting = Object.freeze({ 2 | label: 'v-btn', 3 | tag: 'VdVButton', 4 | originTag: 'v-btn', 5 | category: 'form', 6 | config: { 7 | Props: [ 8 | { 9 | key: 'abosolute', 10 | label: 'abosolute', 11 | type: 'Boolean', 12 | inputType: 'switch', 13 | default: false 14 | }, 15 | { 16 | key: 'active-class', 17 | label: 'active-class', 18 | type: 'String', 19 | inputType: 'input', 20 | default: '' 21 | }, 22 | { 23 | key: 'append', 24 | label: 'append', 25 | type: 'Boolean', 26 | inputType: 'switch', 27 | default: false 28 | }, 29 | { 30 | key: 'block', 31 | label: 'block', 32 | type: 'Boolean', 33 | inputType: 'switch', 34 | default: false 35 | }, 36 | { 37 | key: 'color', 38 | label: 'color', 39 | type: 'String', 40 | inputType: 'input', 41 | default: undefined 42 | }, 43 | { 44 | key: 'dark', 45 | label: 'dark', 46 | type: 'Boolean', 47 | inputType: 'switch', 48 | default: false 49 | }, 50 | { 51 | key: 'depressed', 52 | label: 'depressed', 53 | type: 'Boolean', 54 | inputType: 'switch', 55 | default: false 56 | }, 57 | { 58 | key: 'disable', 59 | label: 'disable', 60 | type: 'Boolean', 61 | inputType: 'switch', 62 | default: false 63 | }, 64 | { 65 | key: 'exact', 66 | label: 'exact', 67 | type: 'Boolean', 68 | inputType: 'switch', 69 | default: false 70 | }, 71 | { 72 | key: 'exact-active-class', 73 | label: 'exact-active-class', 74 | type: 'String', 75 | inputType: 'input', 76 | default: undefined 77 | }, 78 | { 79 | key: 'fab', 80 | label: 'fab', 81 | type: 'Boolean', 82 | inputType: 'switch', 83 | default: false 84 | }, 85 | { 86 | key: 'fixed', 87 | label: 'fixed', 88 | type: 'Boolean', 89 | inputType: 'switch', 90 | default: false 91 | }, 92 | { 93 | key: 'flat', 94 | label: 'flat', 95 | type: 'Boolean', 96 | inputType: 'switch', 97 | default: false 98 | }, 99 | { 100 | key: 'href', 101 | label: 'href', 102 | type: 'String', 103 | inputType: 'input', 104 | default: undefined 105 | }, 106 | { 107 | key: 'icon', 108 | label: 'icon', 109 | type: 'Boolean', 110 | inputType: 'switch', 111 | default: false 112 | }, 113 | { 114 | key: 'input-value', 115 | label: 'input-value', 116 | type: 'String', 117 | inputType: 'input', 118 | default: undefined 119 | }, 120 | { 121 | key: 'large', 122 | label: 'large', 123 | type: 'Boolean', 124 | inputType: 'switch', 125 | default: false 126 | }, 127 | { 128 | key: 'left', 129 | label: 'left', 130 | type: 'Boolean', 131 | inputType: 'switch', 132 | default: false 133 | }, 134 | { 135 | key: 'light', 136 | label: 'light', 137 | type: 'Boolean', 138 | inputType: 'switch', 139 | default: false 140 | }, 141 | { 142 | key: 'loading', 143 | label: 'loading', 144 | type: 'Boolean', 145 | inputType: 'switch', 146 | default: false 147 | }, 148 | { 149 | key: 'nuxt', 150 | label: 'nuxt', 151 | type: 'Boolean', 152 | inputType: 'switch', 153 | default: false 154 | }, 155 | { 156 | key: 'outline', 157 | label: 'outline', 158 | type: 'Boolean', 159 | inputType: 'switch', 160 | default: false 161 | }, 162 | { 163 | key: 'replace', 164 | label: 'replace', 165 | type: 'Boolean', 166 | inputType: 'switch', 167 | default: false 168 | }, 169 | { 170 | key: 'right', 171 | label: 'right', 172 | type: 'Boolean', 173 | inputType: 'switch', 174 | default: false 175 | }, 176 | { 177 | key: 'ripple', 178 | label: 'ripple', 179 | type: 'Boolean', 180 | inputType: 'switch', 181 | default: true 182 | }, 183 | { 184 | key: 'round', 185 | label: 'round', 186 | type: 'Boolean', 187 | inputType: 'switch', 188 | default: false 189 | }, 190 | { 191 | key: 'small', 192 | label: 'small', 193 | type: 'Boolean', 194 | inputType: 'switch', 195 | default: false 196 | }, 197 | { 198 | key: 'tag', 199 | label: 'tag', 200 | type: 'String', 201 | inputType: 'input', 202 | default: 'button' 203 | }, 204 | { 205 | key: 'target', 206 | label: 'target', 207 | type: 'String', 208 | inputType: 'input', 209 | default: undefined 210 | }, 211 | { 212 | key: 'to', 213 | label: 'to', 214 | type: 'String', 215 | inputType: 'input', 216 | default: undefined 217 | }, 218 | { 219 | key: 'top', 220 | label: 'top', 221 | type: 'Boolean', 222 | inputType: 'switch', 223 | default: false 224 | }, 225 | { 226 | key: 'type', 227 | label: 'type', 228 | type: 'String', 229 | inputType: 'input', 230 | default: 'button' 231 | }, 232 | { 233 | key: 'value', 234 | label: 'value', 235 | type: 'String', 236 | inputType: 'input', 237 | default: undefined 238 | } 239 | ], 240 | Slots: [ 241 | { name: 'default' } 242 | ] 243 | } 244 | }) 245 | 246 | export default setting 247 | -------------------------------------------------------------------------------- /src/renderer/widgets/wrapWidget.js: -------------------------------------------------------------------------------- 1 | import {createProps, wrapComponent} from '@/utils/component' 2 | 3 | export default setting => ({ 4 | createProps: createProps(setting.config.Props), 5 | setting, 6 | component: wrapComponent(setting) 7 | }) 8 | -------------------------------------------------------------------------------- /static/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/L-Chris/vue-design/c3620904041d1cb6c204091540bae73afa9d50a7/static/.gitkeep -------------------------------------------------------------------------------- /static/layouts/element-ui/holyGrail.vue: -------------------------------------------------------------------------------- 1 | 12 | --------------------------------------------------------------------------------