├── .babelrc ├── .editorconfig ├── .eslintignore ├── .eslintrc.js ├── .gitignore ├── .postcssrc.js ├── LICENSE ├── README.md ├── build ├── build.js ├── check-versions.js ├── dev-client.js ├── dev-server.js ├── utils.js ├── vue-loader.conf.js ├── webpack.base.conf.js ├── webpack.dev.conf.js └── webpack.prod.conf.js ├── config ├── dev.env.js ├── index.js └── prod.env.js ├── index.html ├── package-lock.json ├── package.json ├── src ├── App.vue ├── assets │ └── element-logo.svg ├── lang.js ├── main.js ├── router │ └── index.js ├── styles │ ├── element-override.css │ ├── index.scss │ └── style.scss ├── table-data.js └── utils │ ├── color.js │ └── formula.json └── static └── .gitkeep /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | ["env", { 4 | "modules": false, 5 | "targets": { 6 | "browsers": ["> 1%", "last 2 versions", "not ie <= 8"] 7 | } 8 | }], 9 | "stage-2" 10 | ], 11 | "plugins": ["transform-runtime"], 12 | "env": { 13 | "test": { 14 | "presets": ["env", "stage-2"], 15 | "plugins": ["istanbul"] 16 | } 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | charset = utf-8 5 | indent_style = space 6 | indent_size = 2 7 | end_of_line = lf 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | build/*.js 2 | config/*.js 3 | -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | // https://eslint.org/docs/user-guide/configuring 2 | 3 | module.exports = { 4 | root: true, 5 | parser: 'babel-eslint', 6 | parserOptions: { 7 | sourceType: 'module' 8 | }, 9 | env: { 10 | browser: true, 11 | }, 12 | // https://github.com/standard/standard/blob/master/docs/RULES-en.md 13 | extends: 'standard', 14 | // required to lint *.vue files 15 | plugins: [ 16 | 'html' 17 | ], 18 | // add your custom rules here 19 | 'rules': { 20 | // allow paren-less arrow functions 21 | 'arrow-parens': 0, 22 | // allow async-await 23 | 'generator-star-spacing': 0, 24 | // allow debugger during development 25 | 'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules/ 3 | dist/ 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | 8 | # Editor directories and files 9 | .idea 10 | .vscode 11 | *.suo 12 | *.ntvs* 13 | *.njsproj 14 | *.sln 15 | -------------------------------------------------------------------------------- /.postcssrc.js: -------------------------------------------------------------------------------- 1 | // https://github.com/michael-ciniawsky/postcss-load-config 2 | 3 | module.exports = { 4 | "plugins": { 5 | // to edit target browsers: use "browserslist" field in package.json 6 | "autoprefixer": {} 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2017 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 | # theme-chalk-preview 2 | Preview and download custom theme-chalk. 3 | 4 | Visit this page. 5 | 6 | - Click the 'Change Theme Color' button on the header menu, choose a theme color in the popped dialog, and click 'Change' 7 | - Now this page will apply a new style generated with your newly appointed theme color, so you can preview what Element looks like once this color is applied 8 | - Click the 'Download Theme' button on the header menu, and you can download the style files with the new theme color 9 | - If you need more customization than just changing the theme color, please use element-theme 10 | -------------------------------------------------------------------------------- /build/build.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | require('./check-versions')() 3 | 4 | process.env.NODE_ENV = 'production' 5 | 6 | const ora = require('ora') 7 | const rm = require('rimraf') 8 | const path = require('path') 9 | const chalk = require('chalk') 10 | const webpack = require('webpack') 11 | const config = require('../config') 12 | const webpackConfig = require('./webpack.prod.conf') 13 | 14 | const spinner = ora('building for production...') 15 | spinner.start() 16 | 17 | rm(path.join(config.build.assetsRoot, config.build.assetsSubDirectory), err => { 18 | if (err) throw err 19 | webpack(webpackConfig, function (err, stats) { 20 | spinner.stop() 21 | if (err) throw err 22 | process.stdout.write(stats.toString({ 23 | colors: true, 24 | modules: false, 25 | children: false, 26 | chunks: false, 27 | chunkModules: false 28 | }) + '\n\n') 29 | 30 | if (stats.hasErrors()) { 31 | console.log(chalk.red(' Build failed with errors.\n')) 32 | process.exit(1) 33 | } 34 | 35 | console.log(chalk.cyan(' Build complete.\n')) 36 | console.log(chalk.yellow( 37 | ' Tip: built files are meant to be served over an HTTP server.\n' + 38 | ' Opening index.html over file:// won\'t work.\n' 39 | )) 40 | }) 41 | }) 42 | -------------------------------------------------------------------------------- /build/check-versions.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | const chalk = require('chalk') 3 | const semver = require('semver') 4 | const packageConfig = require('../package.json') 5 | const shell = require('shelljs') 6 | function exec (cmd) { 7 | return require('child_process').execSync(cmd).toString().trim() 8 | } 9 | 10 | const versionRequirements = [ 11 | { 12 | name: 'node', 13 | currentVersion: semver.clean(process.version), 14 | versionRequirement: packageConfig.engines.node 15 | } 16 | ] 17 | 18 | if (shell.which('npm')) { 19 | versionRequirements.push({ 20 | name: 'npm', 21 | currentVersion: exec('npm --version'), 22 | versionRequirement: packageConfig.engines.npm 23 | }) 24 | } 25 | 26 | module.exports = function () { 27 | const warnings = [] 28 | for (let i = 0; i < versionRequirements.length; i++) { 29 | const mod = versionRequirements[i] 30 | if (!semver.satisfies(mod.currentVersion, mod.versionRequirement)) { 31 | warnings.push(mod.name + ': ' + 32 | chalk.red(mod.currentVersion) + ' should be ' + 33 | chalk.green(mod.versionRequirement) 34 | ) 35 | } 36 | } 37 | 38 | if (warnings.length) { 39 | console.log('') 40 | console.log(chalk.yellow('To use this template, you must update following to modules:')) 41 | console.log() 42 | for (let i = 0; i < warnings.length; i++) { 43 | const warning = warnings[i] 44 | console.log(' ' + warning) 45 | } 46 | console.log() 47 | process.exit(1) 48 | } 49 | } 50 | -------------------------------------------------------------------------------- /build/dev-client.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable */ 2 | 'use strict' 3 | require('eventsource-polyfill') 4 | var hotClient = require('webpack-hot-middleware/client?noInfo=true&reload=true') 5 | 6 | hotClient.subscribe(function (event) { 7 | if (event.action === 'reload') { 8 | window.location.reload() 9 | } 10 | }) 11 | -------------------------------------------------------------------------------- /build/dev-server.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | require('./check-versions')() 3 | 4 | const config = require('../config') 5 | if (!process.env.NODE_ENV) { 6 | process.env.NODE_ENV = JSON.parse(config.dev.env.NODE_ENV) 7 | } 8 | 9 | const opn = require('opn') 10 | const path = require('path') 11 | const express = require('express') 12 | const webpack = require('webpack') 13 | const proxyMiddleware = require('http-proxy-middleware') 14 | const webpackConfig = require('./webpack.dev.conf') 15 | 16 | // default port where dev server listens for incoming traffic 17 | const port = process.env.PORT || config.dev.port 18 | // automatically open browser, if not set will be false 19 | const autoOpenBrowser = !!config.dev.autoOpenBrowser 20 | // Define HTTP proxies to your custom API backend 21 | // https://github.com/chimurai/http-proxy-middleware 22 | const proxyTable = config.dev.proxyTable 23 | 24 | const app = express() 25 | const compiler = webpack(webpackConfig) 26 | 27 | const devMiddleware = require('webpack-dev-middleware')(compiler, { 28 | publicPath: webpackConfig.output.publicPath, 29 | quiet: true 30 | }) 31 | 32 | const hotMiddleware = require('webpack-hot-middleware')(compiler, { 33 | log: false, 34 | heartbeat: 2000 35 | }) 36 | // force page reload when html-webpack-plugin template changes 37 | // currently disabled until this is resolved: 38 | // https://github.com/jantimon/html-webpack-plugin/issues/680 39 | // compiler.plugin('compilation', function (compilation) { 40 | // compilation.plugin('html-webpack-plugin-after-emit', function (data, cb) { 41 | // hotMiddleware.publish({ action: 'reload' }) 42 | // cb() 43 | // }) 44 | // }) 45 | 46 | // enable hot-reload and state-preserving 47 | // compilation error display 48 | app.use(hotMiddleware) 49 | 50 | // proxy api requests 51 | Object.keys(proxyTable).forEach(function (context) { 52 | let options = proxyTable[context] 53 | if (typeof options === 'string') { 54 | options = { target: options } 55 | } 56 | app.use(proxyMiddleware(options.filter || context, options)) 57 | }) 58 | 59 | // handle fallback for HTML5 history API 60 | app.use(require('connect-history-api-fallback')()) 61 | 62 | // serve webpack bundle output 63 | app.use(devMiddleware) 64 | 65 | // serve pure static assets 66 | const staticPath = path.posix.join(config.dev.assetsPublicPath, config.dev.assetsSubDirectory) 67 | app.use(staticPath, express.static('./static')) 68 | 69 | const uri = 'http://localhost:' + port 70 | 71 | var _resolve 72 | var _reject 73 | var readyPromise = new Promise((resolve, reject) => { 74 | _resolve = resolve 75 | _reject = reject 76 | }) 77 | 78 | var server 79 | var portfinder = require('portfinder') 80 | portfinder.basePort = port 81 | 82 | console.log('> Starting dev server...') 83 | devMiddleware.waitUntilValid(() => { 84 | portfinder.getPort((err, port) => { 85 | if (err) { 86 | _reject(err) 87 | } 88 | process.env.PORT = port 89 | var uri = 'http://localhost:' + port 90 | console.log('> Listening at ' + uri + '\n') 91 | // when env is testing, don't need open it 92 | if (autoOpenBrowser && process.env.NODE_ENV !== 'testing') { 93 | opn(uri) 94 | } 95 | server = app.listen(port) 96 | _resolve() 97 | }) 98 | }) 99 | 100 | module.exports = { 101 | ready: readyPromise, 102 | close: () => { 103 | server.close() 104 | } 105 | } 106 | -------------------------------------------------------------------------------- /build/utils.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | const path = require('path') 3 | const config = require('../config') 4 | const ExtractTextPlugin = require('extract-text-webpack-plugin') 5 | 6 | exports.assetsPath = function (_path) { 7 | const assetsSubDirectory = process.env.NODE_ENV === 'production' 8 | ? config.build.assetsSubDirectory 9 | : config.dev.assetsSubDirectory 10 | return path.posix.join(assetsSubDirectory, _path) 11 | } 12 | 13 | exports.cssLoaders = function (options) { 14 | options = options || {} 15 | 16 | const cssLoader = { 17 | loader: 'css-loader', 18 | options: { 19 | minimize: process.env.NODE_ENV === 'production', 20 | sourceMap: options.sourceMap 21 | } 22 | } 23 | 24 | // generate loader string to be used with extract text plugin 25 | function generateLoaders (loader, loaderOptions) { 26 | const loaders = [cssLoader] 27 | if (loader) { 28 | loaders.push({ 29 | loader: loader + '-loader', 30 | options: Object.assign({}, loaderOptions, { 31 | sourceMap: options.sourceMap 32 | }) 33 | }) 34 | } 35 | 36 | // Extract CSS when that option is specified 37 | // (which is the case during production build) 38 | if (options.extract) { 39 | return ExtractTextPlugin.extract({ 40 | use: loaders, 41 | fallback: 'vue-style-loader' 42 | }) 43 | } else { 44 | return ['vue-style-loader'].concat(loaders) 45 | } 46 | } 47 | 48 | // https://vue-loader.vuejs.org/en/configurations/extract-css.html 49 | return { 50 | css: generateLoaders(), 51 | postcss: generateLoaders(), 52 | less: generateLoaders('less'), 53 | sass: generateLoaders('sass', { indentedSyntax: true }), 54 | scss: generateLoaders('sass'), 55 | stylus: generateLoaders('stylus'), 56 | styl: generateLoaders('stylus') 57 | } 58 | } 59 | 60 | // Generate loaders for standalone style files (outside of .vue) 61 | exports.styleLoaders = function (options) { 62 | const output = [] 63 | const loaders = exports.cssLoaders(options) 64 | for (const extension in loaders) { 65 | const loader = loaders[extension] 66 | output.push({ 67 | test: new RegExp('\\.' + extension + '$'), 68 | use: loader 69 | }) 70 | } 71 | return output 72 | } 73 | -------------------------------------------------------------------------------- /build/vue-loader.conf.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | const utils = require('./utils') 3 | const config = require('../config') 4 | const isProduction = process.env.NODE_ENV === 'production' 5 | 6 | module.exports = { 7 | loaders: utils.cssLoaders({ 8 | sourceMap: isProduction 9 | ? config.build.productionSourceMap 10 | : config.dev.cssSourceMap, 11 | extract: isProduction 12 | }), 13 | transformToRequire: { 14 | video: 'src', 15 | source: 'src', 16 | img: 'src', 17 | image: 'xlink:href' 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /build/webpack.base.conf.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | const path = require('path') 3 | const utils = require('./utils') 4 | const config = require('../config') 5 | const vueLoaderConfig = require('./vue-loader.conf') 6 | 7 | function resolve (dir) { 8 | return path.join(__dirname, '..', dir) 9 | } 10 | 11 | module.exports = { 12 | entry: { 13 | app: './src/main.js' 14 | }, 15 | output: { 16 | path: config.build.assetsRoot, 17 | filename: '[name].js', 18 | publicPath: process.env.NODE_ENV === 'production' 19 | ? config.build.assetsPublicPath 20 | : config.dev.assetsPublicPath 21 | }, 22 | resolve: { 23 | extensions: ['.js', '.vue', '.json'], 24 | alias: { 25 | 'vue$': 'vue/dist/vue.esm.js', 26 | '@': resolve('src'), 27 | } 28 | }, 29 | module: { 30 | rules: [ 31 | { 32 | test: /\.(js|vue)$/, 33 | loader: 'eslint-loader', 34 | enforce: 'pre', 35 | include: [resolve('src'), resolve('test')], 36 | options: { 37 | formatter: require('eslint-friendly-formatter') 38 | } 39 | }, 40 | { 41 | test: /\.vue$/, 42 | loader: 'vue-loader', 43 | options: vueLoaderConfig 44 | }, 45 | { 46 | test: /\.js$/, 47 | loader: 'babel-loader', 48 | include: [resolve('src'), resolve('test')] 49 | }, 50 | { 51 | test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, 52 | loader: 'url-loader', 53 | options: { 54 | limit: 10000, 55 | name: utils.assetsPath('img/[name].[hash:7].[ext]') 56 | } 57 | }, 58 | { 59 | test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/, 60 | loader: 'url-loader', 61 | options: { 62 | limit: 10000, 63 | name: utils.assetsPath('media/[name].[hash:7].[ext]') 64 | } 65 | }, 66 | { 67 | test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/, 68 | loader: 'url-loader', 69 | options: { 70 | limit: 10000, 71 | name: utils.assetsPath('fonts/[name].[hash:7].[ext]') 72 | } 73 | } 74 | ] 75 | } 76 | } 77 | -------------------------------------------------------------------------------- /build/webpack.dev.conf.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | const utils = require('./utils') 3 | const webpack = require('webpack') 4 | const config = require('../config') 5 | const merge = require('webpack-merge') 6 | const baseWebpackConfig = require('./webpack.base.conf') 7 | const HtmlWebpackPlugin = require('html-webpack-plugin') 8 | const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin') 9 | 10 | // add hot-reload related code to entry chunks 11 | Object.keys(baseWebpackConfig.entry).forEach(function (name) { 12 | baseWebpackConfig.entry[name] = ['./build/dev-client'].concat(baseWebpackConfig.entry[name]) 13 | }) 14 | 15 | module.exports = merge(baseWebpackConfig, { 16 | module: { 17 | rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap }) 18 | }, 19 | // cheap-module-eval-source-map is faster for development 20 | devtool: '#cheap-module-eval-source-map', 21 | plugins: [ 22 | new webpack.DefinePlugin({ 23 | 'process.env': config.dev.env 24 | }), 25 | // https://github.com/glenjamin/webpack-hot-middleware#installation--usage 26 | new webpack.HotModuleReplacementPlugin(), 27 | new webpack.NoEmitOnErrorsPlugin(), 28 | // https://github.com/ampedandwired/html-webpack-plugin 29 | new HtmlWebpackPlugin({ 30 | filename: 'index.html', 31 | template: 'index.html', 32 | inject: true 33 | }), 34 | new FriendlyErrorsPlugin() 35 | ] 36 | }) 37 | -------------------------------------------------------------------------------- /build/webpack.prod.conf.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | const path = require('path') 3 | const utils = require('./utils') 4 | const webpack = require('webpack') 5 | const config = require('../config') 6 | const merge = require('webpack-merge') 7 | const baseWebpackConfig = require('./webpack.base.conf') 8 | const CopyWebpackPlugin = require('copy-webpack-plugin') 9 | const HtmlWebpackPlugin = require('html-webpack-plugin') 10 | const ExtractTextPlugin = require('extract-text-webpack-plugin') 11 | const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin') 12 | 13 | const env = config.build.env 14 | 15 | const webpackConfig = merge(baseWebpackConfig, { 16 | module: { 17 | rules: utils.styleLoaders({ 18 | sourceMap: config.build.productionSourceMap, 19 | extract: true 20 | }) 21 | }, 22 | devtool: config.build.productionSourceMap ? '#source-map' : false, 23 | output: { 24 | path: config.build.assetsRoot, 25 | filename: utils.assetsPath('js/[name].[chunkhash].js'), 26 | chunkFilename: utils.assetsPath('js/[id].[chunkhash].js') 27 | }, 28 | plugins: [ 29 | // http://vuejs.github.io/vue-loader/en/workflow/production.html 30 | new webpack.DefinePlugin({ 31 | 'process.env': env 32 | }), 33 | // UglifyJs do not support ES6+, you can also use babel-minify for better treeshaking: https://github.com/babel/minify 34 | new webpack.optimize.UglifyJsPlugin({ 35 | compress: { 36 | warnings: false 37 | }, 38 | sourceMap: true 39 | }), 40 | // extract css into its own file 41 | new ExtractTextPlugin({ 42 | filename: utils.assetsPath('css/[name].[contenthash].css') 43 | }), 44 | // Compress extracted CSS. We are using this plugin so that possible 45 | // duplicated CSS from different components can be deduped. 46 | new OptimizeCSSPlugin({ 47 | cssProcessorOptions: { 48 | safe: true 49 | } 50 | }), 51 | // generate dist index.html with correct asset hash for caching. 52 | // you can customize output by editing /index.html 53 | // see https://github.com/ampedandwired/html-webpack-plugin 54 | new HtmlWebpackPlugin({ 55 | filename: config.build.index, 56 | template: 'index.html', 57 | inject: true, 58 | minify: { 59 | removeComments: true, 60 | collapseWhitespace: true, 61 | removeAttributeQuotes: true 62 | // more options: 63 | // https://github.com/kangax/html-minifier#options-quick-reference 64 | }, 65 | // necessary to consistently work with multiple chunks via CommonsChunkPlugin 66 | chunksSortMode: 'dependency' 67 | }), 68 | // keep module.id stable when vender modules does not change 69 | new webpack.HashedModuleIdsPlugin(), 70 | // split vendor js into its own file 71 | new webpack.optimize.CommonsChunkPlugin({ 72 | name: 'vendor', 73 | minChunks: function (module) { 74 | // any required modules inside node_modules are extracted to vendor 75 | return ( 76 | module.resource && 77 | /\.js$/.test(module.resource) && 78 | module.resource.indexOf( 79 | path.join(__dirname, '../node_modules') 80 | ) === 0 81 | ) 82 | } 83 | }), 84 | // extract webpack runtime and module manifest to its own file in order to 85 | // prevent vendor hash from being updated whenever app bundle is updated 86 | new webpack.optimize.CommonsChunkPlugin({ 87 | name: 'manifest', 88 | chunks: ['vendor'] 89 | }), 90 | // copy custom static assets 91 | new CopyWebpackPlugin([ 92 | { 93 | from: path.resolve(__dirname, '../static'), 94 | to: config.build.assetsSubDirectory, 95 | ignore: ['.*'] 96 | } 97 | ]) 98 | ] 99 | }) 100 | 101 | if (config.build.productionGzip) { 102 | const CompressionWebpackPlugin = require('compression-webpack-plugin') 103 | 104 | webpackConfig.plugins.push( 105 | new CompressionWebpackPlugin({ 106 | asset: '[path].gz[query]', 107 | algorithm: 'gzip', 108 | test: new RegExp( 109 | '\\.(' + 110 | config.build.productionGzipExtensions.join('|') + 111 | ')$' 112 | ), 113 | threshold: 10240, 114 | minRatio: 0.8 115 | }) 116 | ) 117 | } 118 | 119 | if (config.build.bundleAnalyzerReport) { 120 | const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin 121 | webpackConfig.plugins.push(new BundleAnalyzerPlugin()) 122 | } 123 | 124 | module.exports = webpackConfig 125 | -------------------------------------------------------------------------------- /config/dev.env.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | const merge = require('webpack-merge') 3 | const prodEnv = require('./prod.env') 4 | 5 | module.exports = merge(prodEnv, { 6 | NODE_ENV: '"development"' 7 | }) 8 | -------------------------------------------------------------------------------- /config/index.js: -------------------------------------------------------------------------------- 1 | 2 | 'use strict' 3 | // Template version: 1.1.3 4 | // see http://vuejs-templates.github.io/webpack for documentation. 5 | 6 | const path = require('path') 7 | 8 | module.exports = { 9 | build: { 10 | env: require('./prod.env'), 11 | index: path.resolve(__dirname, '../dist/index.html'), 12 | assetsRoot: path.resolve(__dirname, '../dist'), 13 | assetsSubDirectory: 'static', 14 | assetsPublicPath: './', 15 | productionSourceMap: true, 16 | // Gzip off by default as many popular static hosts such as 17 | // Surge or Netlify already gzip all static assets for you. 18 | // Before setting to `true`, make sure to: 19 | // npm install --save-dev compression-webpack-plugin 20 | productionGzip: false, 21 | productionGzipExtensions: ['js', 'css'], 22 | // Run the build command with an extra argument to 23 | // View the bundle analyzer report after build finishes: 24 | // `npm run build --report` 25 | // Set to `true` or `false` to always turn it on or off 26 | bundleAnalyzerReport: process.env.npm_config_report 27 | }, 28 | dev: { 29 | env: require('./dev.env'), 30 | port: process.env.PORT || 8080, 31 | autoOpenBrowser: true, 32 | assetsSubDirectory: 'static', 33 | assetsPublicPath: '/', 34 | proxyTable: {}, 35 | // CSS Sourcemaps off by default because relative paths are "buggy" 36 | // with this option, according to the CSS-Loader README 37 | // (https://github.com/webpack/css-loader#sourcemaps) 38 | // In our experience, they generally work as expected, 39 | // just be aware of this issue when enabling this option. 40 | cssSourceMap: false 41 | } 42 | } 43 | -------------------------------------------------------------------------------- /config/prod.env.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | module.exports = { 3 | NODE_ENV: '"production"' 4 | } 5 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | theme-chalk-preview 6 | 7 | 8 |
9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "theme-chalk-preview", 3 | "version": "1.0.0", 4 | "description": "A Vue.js project", 5 | "author": "Leopoldthecoder ", 6 | "private": true, 7 | "scripts": { 8 | "dev": "node build/dev-server.js", 9 | "start": "npm run dev", 10 | "build": "node build/build.js", 11 | "lint": "eslint --ext .js,.vue src", 12 | "deploy": "npm run build && gh-pages -d dist" 13 | }, 14 | "dependencies": { 15 | "blob-util": "^1.3.0", 16 | "css-color-function": "^1.3.3", 17 | "element-ui": "^2.0.11", 18 | "es6-promise": "^4.1.1", 19 | "file-saver": "^1.3.3", 20 | "jszip": "^3.1.4", 21 | "object-assign": "^4.1.1", 22 | "vue": "^2.5.2", 23 | "vue-router": "^3.0.1" 24 | }, 25 | "devDependencies": { 26 | "autoprefixer": "^7.1.2", 27 | "babel-core": "^6.22.1", 28 | "babel-eslint": "^7.1.1", 29 | "babel-loader": "^7.1.1", 30 | "babel-plugin-transform-runtime": "^6.22.0", 31 | "babel-preset-env": "^1.3.2", 32 | "babel-preset-stage-2": "^6.22.0", 33 | "babel-register": "^6.22.0", 34 | "chalk": "^2.0.1", 35 | "connect-history-api-fallback": "^1.3.0", 36 | "copy-webpack-plugin": "^4.0.1", 37 | "css-loader": "^0.28.0", 38 | "eslint": "^3.19.0", 39 | "eslint-config-standard": "^10.2.1", 40 | "eslint-friendly-formatter": "^3.0.0", 41 | "eslint-loader": "^1.7.1", 42 | "eslint-plugin-html": "^3.0.0", 43 | "eslint-plugin-import": "^2.7.0", 44 | "eslint-plugin-node": "^5.2.0", 45 | "eslint-plugin-promise": "^3.4.0", 46 | "eslint-plugin-standard": "^3.0.1", 47 | "eventsource-polyfill": "^0.9.6", 48 | "express": "^4.14.1", 49 | "extract-text-webpack-plugin": "^3.0.0", 50 | "file-loader": "^1.1.4", 51 | "friendly-errors-webpack-plugin": "^1.6.1", 52 | "gh-pages": "^1.0.0", 53 | "html-webpack-plugin": "^2.30.1", 54 | "http-proxy-middleware": "^0.17.3", 55 | "node-sass": "^4.5.3", 56 | "opn": "^5.1.0", 57 | "optimize-css-assets-webpack-plugin": "^3.2.0", 58 | "ora": "^1.2.0", 59 | "portfinder": "^1.0.13", 60 | "rimraf": "^2.6.0", 61 | "sass-loader": "^6.0.6", 62 | "semver": "^5.3.0", 63 | "shelljs": "^0.7.6", 64 | "url-loader": "^0.5.8", 65 | "vue-loader": "^13.3.0", 66 | "vue-style-loader": "^3.0.1", 67 | "vue-template-compiler": "^2.5.2", 68 | "webpack": "^3.6.0", 69 | "webpack-bundle-analyzer": "^2.9.0", 70 | "webpack-dev-middleware": "^1.12.0", 71 | "webpack-hot-middleware": "^2.18.2", 72 | "webpack-merge": "^4.1.0" 73 | }, 74 | "engines": { 75 | "node": ">= 4.0.0", 76 | "npm": ">= 3.0.0" 77 | }, 78 | "browserslist": [ 79 | "> 1%", 80 | "last 2 versions", 81 | "not ie <= 8" 82 | ] 83 | } 84 | -------------------------------------------------------------------------------- /src/App.vue: -------------------------------------------------------------------------------- 1 | 108 | 109 | 337 | -------------------------------------------------------------------------------- /src/assets/element-logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Shape Copy 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /src/lang.js: -------------------------------------------------------------------------------- 1 | export default { 2 | header: { 3 | switch: { 4 | '/zh-CN': '切换主题色', 5 | '/en-US': 'Change Theme Color' 6 | }, 7 | download: { 8 | '/zh-CN': '下载主题', 9 | '/en-US': 'Download Theme' 10 | }, 11 | help: { 12 | '/zh-CN': '帮助', 13 | '/en-US': 'Help' 14 | } 15 | }, 16 | menu: { 17 | pageOne: { 18 | '/zh-CN': '页面1', 19 | '/en-US': 'Page One' 20 | }, 21 | pageTwo: { 22 | '/zh-CN': '页面2', 23 | '/en-US': 'Page Two' 24 | }, 25 | pageThree: { 26 | '/zh-CN': '页面3', 27 | '/en-US': 'Page Three' 28 | } 29 | }, 30 | form: { 31 | theme: { 32 | '/zh-CN': '主题色', 33 | '/en-US': 'Theme color' 34 | }, 35 | switch: { 36 | '/zh-CN': '切换', 37 | '/en-US': 'Change' 38 | }, 39 | reset: { 40 | '/zh-CN': '重置', 41 | '/en-US': 'Reset' 42 | } 43 | }, 44 | validate: { 45 | required: { 46 | '/zh-CN': '主题色不能为空', 47 | '/en-US': 'Theme color is required' 48 | }, 49 | format: { 50 | '/zh-CN': '请输入 hex 格式的主题色', 51 | '/en-US': 'Theme color should be in hex format' 52 | } 53 | }, 54 | breadcrumb: { 55 | main: { 56 | '/zh-CN': '首页', 57 | '/en-US': 'Main' 58 | }, 59 | project: { 60 | '/zh-CN': '项目', 61 | '/en-US': 'Project' 62 | }, 63 | page: { 64 | '/zh-CN': '页面一', 65 | '/en-US': 'Page One' 66 | } 67 | }, 68 | query: { 69 | name: { 70 | '/zh-CN': '姓名', 71 | '/en-US': 'Name' 72 | }, 73 | date: { 74 | '/zh-CN': '日期', 75 | '/en-US': 'Date' 76 | }, 77 | search: { 78 | '/zh-CN': '搜索', 79 | '/en-US': 'Search' 80 | }, 81 | nameHolder: { 82 | '/zh-CN': '请输入姓名', 83 | '/en-US': 'Please input name' 84 | }, 85 | dateHolder: { 86 | '/zh-CN': '请选择日期', 87 | '/en-US': 'Please select date' 88 | } 89 | }, 90 | table: { 91 | name: { 92 | '/zh-CN': '姓名', 93 | '/en-US': 'Name' 94 | }, 95 | date: { 96 | '/zh-CN': '日期', 97 | '/en-US': 'Date' 98 | }, 99 | address: { 100 | '/zh-CN': '地址', 101 | '/en-US': 'Address' 102 | }, 103 | zip: { 104 | '/zh-CN': '邮编', 105 | '/en-US': 'Zip Code' 106 | }, 107 | operations: { 108 | '/zh-CN': '操作', 109 | '/en-US': 'Operations' 110 | }, 111 | edit: { 112 | '/zh-CN': '编辑', 113 | '/en-US': 'Edit' 114 | }, 115 | delete: { 116 | '/zh-CN': '删除', 117 | '/en-US': 'Delete' 118 | } 119 | }, 120 | help: { 121 | title: { 122 | '/zh-CN': '帮助', 123 | '/en-US': 'Help' 124 | }, 125 | content: { 126 | '/zh-CN': ` 127 |

1、点击顶部栏中的「切换主题色」，在弹出的对话框中选择主题色，并点击「切换」按钮；

128 |

2、此时本页面会按照你选定的主题色重新生成样式，你可以预览应用了新主题色的 Element；

129 |

3、点击顶部栏中的「下载主题」，会自动下载应用了新主题色的样式文件；

130 |

4、关于如何在项目中引入新的样式文件，请参考官方文档中自定义主题的相关内容；

131 |

5、如果需要除主题色之外更深层次的样式定制，请使用 element-theme。

132 |

注意：本页面仅用来预览主题，页面上的元素不含交互逻辑。

133 | `, 134 | '/en-US': ` 135 |

1. Click the 'Change Theme Color' button on the header menu, choose a theme color in the popped dialog, and click 'Change';

136 |

2. Now this page will apply a new style generated with your newly appointed theme color, so you can preview what Element looks like once this color is applied;

137 |

3. Click the 'Download Theme' button on the header menu, and you can download the style files with the new theme color;

138 |

4、To import new style files in your project, please refer to the custom theme section in our official documentation;

139 |

5. If you need more customization than just changing the theme color, please use element-theme.

140 |

Note that this page is only for previewing themes, so the components on this page are not interactive.

141 | ` 142 | }, 143 | ok: { 144 | '/zh-CN': '确定', 145 | '/en-US': 'OK' 146 | } 147 | } 148 | } 149 | -------------------------------------------------------------------------------- /src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import App from './app' 3 | import router from './router' 4 | import Element from 'element-ui' 5 | import 'element-ui/lib/theme-chalk/index.css' 6 | import 'element-ui/lib/theme-chalk/reset.css' 7 | import './styles/index.scss' 8 | require('es6-promise').polyfill() 9 | 10 | Vue.use(Element, { size: 'medium' }) 11 | Vue.config.productionTip = false 12 | 13 | new Vue({ // eslint-disable-line 14 | el: '#app', 15 | router, 16 | render: h => h(App) 17 | }) 18 | -------------------------------------------------------------------------------- /src/router/index.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import VueRouter from 'vue-router' 3 | 4 | Vue.use(VueRouter) 5 | 6 | const routes = [ 7 | { 8 | path: '/', 9 | redirect: '/zh-CN', 10 | name: 'home' 11 | }, 12 | { 13 | path: '/zh-CN', 14 | name: 'cn' 15 | }, 16 | { 17 | path: '/en-US', 18 | name: 'en' 19 | }, 20 | { path: '*', redirect: '/' } 21 | ] 22 | const router = new VueRouter({ 23 | mode: 'hash', 24 | base: __dirname, 25 | routes 26 | }) 27 | 28 | export default router 29 | -------------------------------------------------------------------------------- /src/styles/element-override.css: -------------------------------------------------------------------------------- 1 | .el-menu { 2 | height: 100%; 3 | } -------------------------------------------------------------------------------- /src/styles/index.scss: -------------------------------------------------------------------------------- 1 | @import "./element-override.css"; 2 | @import "./style.scss"; 3 | -------------------------------------------------------------------------------- /src/styles/style.scss: -------------------------------------------------------------------------------- 1 | html, body { 2 | height: 100%; 3 | } 4 | 5 | body { 6 | font-family: 'Helvetica Neue',Helvetica,'PingFang SC','Hiragino Sans GB','Microsoft YaHei',SimSun,sans-serif; 7 | } 8 | 9 | * { 10 | padding: 0; 11 | margin: 0; 12 | } 13 | 14 | .wrapper { 15 | height: 100%; 16 | } 17 | 18 | a { 19 | text-decoration: none; 20 | } 21 | 22 | header { 23 | width: 100%; 24 | padding: 0 20px; 25 | z-index: 1; 26 | box-sizing: border-box; 27 | } 28 | 29 | header::after { 30 | display: inline-block; 31 | content: ""; 32 | height: 100%; 33 | vertical-align: middle 34 | } 35 | 36 | .container { 37 | padding-top: 80px; 38 | } 39 | 40 | .menu { 41 | height: 100%; 42 | } 43 | 44 | .content { 45 | padding: 20px; 46 | } 47 | 48 | .header-logo { 49 | display: inline-block; 50 | vertical-align: middle; 51 | } 52 | 53 | .header-operations { 54 | display: inline-block; 55 | float: right; 56 | padding-right: 30px; 57 | height: 100%; 58 | & li { 59 | color: #fff; 60 | display: inline-block; 61 | vertical-align: middle; 62 | padding: 0 10px; 63 | margin: 0 10px; 64 | line-height: 80px; 65 | cursor: pointer; 66 | &:last-child { 67 | cursor: default; 68 | } 69 | } 70 | .header-download { 71 | opacity: 0.4; 72 | cursor: default; 73 | &.is-available { 74 | opacity: 1; 75 | cursor: pointer; 76 | } 77 | } 78 | span { 79 | opacity: 0.7; 80 | } 81 | .header-lang { 82 | cursor: pointer; 83 | &.is-active { 84 | opacity: 1; 85 | } 86 | } 87 | } 88 | 89 | .header-operations::after { 90 | display: inline-block; 91 | content: ""; 92 | height: 100%; 93 | vertical-align: middle 94 | } 95 | 96 | .theme-form { 97 | text-align: center; 98 | } 99 | 100 | .query-form { 101 | margin-top: 20px; 102 | padding-top: 25px; 103 | background-color: #f2f2f2; 104 | } 105 | 106 | .table { 107 | margin-top: 30px; 108 | } 109 | 110 | .help p { 111 | margin-bottom: 10px; 112 | a { 113 | color: #409eff; 114 | } 115 | } 116 | -------------------------------------------------------------------------------- /src/table-data.js: -------------------------------------------------------------------------------- 1 | export default { 2 | '/zh-CN': [{ 3 | date: '2016-05-08', 4 | name: '王小虎', 5 | address: '上海市普陀区金沙江路 1518 弄', 6 | zip: 200333 7 | }, { 8 | date: '2016-05-07', 9 | name: '王小虎', 10 | address: '上海市普陀区金沙江路 1518 弄', 11 | zip: 200333 12 | }, { 13 | date: '2016-05-09', 14 | name: '王小虎', 15 | address: '上海市普陀区金沙江路 1518 弄', 16 | zip: 200333 17 | }, { 18 | date: '2016-05-10', 19 | name: '王小虎', 20 | address: '上海市普陀区金沙江路 1518 弄', 21 | zip: 200333 22 | }, { 23 | date: '2016-05-06', 24 | name: '王小虎', 25 | address: '上海市普陀区金沙江路 1518 弄', 26 | zip: 200333 27 | }, { 28 | date: '2016-05-03', 29 | name: '王小虎', 30 | address: '上海市普陀区金沙江路 1518 弄', 31 | zip: 200333 32 | }, { 33 | date: '2016-05-02', 34 | name: '王小虎', 35 | address: '上海市普陀区金沙江路 1518 弄', 36 | zip: 200333 37 | }, { 38 | date: '2016-05-04', 39 | name: '王小虎', 40 | address: '上海市普陀区金沙江路 1518 弄', 41 | zip: 200333 42 | }, { 43 | date: '2016-05-01', 44 | name: '王小虎', 45 | address: '上海市普陀区金沙江路 1518 弄', 46 | zip: 200333 47 | }], 48 | '/en-US': [{ 49 | date: '2016-05-08', 50 | name: 'Tom', 51 | address: 'No. 189, Grove St, Los Angeles', 52 | zip: 'CA 90036' 53 | }, { 54 | date: '2016-05-07', 55 | name: 'Tom', 56 | address: 'No. 189, Grove St, Los Angeles', 57 | zip: 'CA 90036' 58 | }, { 59 | date: '2016-05-09', 60 | name: 'Tom', 61 | address: 'No. 189, Grove St, Los Angeles', 62 | zip: 'CA 90036' 63 | }, { 64 | date: '2016-05-10', 65 | name: 'Tom', 66 | address: 'No. 189, Grove St, Los Angeles', 67 | zip: 'CA 90036' 68 | }, { 69 | date: '2016-05-06', 70 | name: 'Tom', 71 | address: 'No. 189, Grove St, Los Angeles', 72 | zip: 'CA 90036' 73 | }, { 74 | date: '2016-05-03', 75 | name: 'Tom', 76 | address: 'No. 189, Grove St, Los Angeles', 77 | zip: 'CA 90036' 78 | }, { 79 | date: '2016-05-02', 80 | name: 'Tom', 81 | address: 'No. 189, Grove St, Los Angeles', 82 | zip: 'CA 90036' 83 | }, { 84 | date: '2016-05-04', 85 | name: 'Tom', 86 | address: 'No. 189, Grove St, Los Angeles', 87 | zip: 'CA 90036' 88 | }, { 89 | date: '2016-05-01', 90 | name: 'Tom', 91 | address: 'No. 189, Grove St, Los Angeles', 92 | zip: 'CA 90036' 93 | }] 94 | } 95 | -------------------------------------------------------------------------------- /src/utils/color.js: -------------------------------------------------------------------------------- 1 | import color from 'css-color-function' 2 | import formula from './formula.json' 3 | 4 | const generateColors = primary => { 5 | let colors = {} 6 | 7 | Object.keys(formula).forEach(key => { 8 | const value = formula[key].replace(/primary/g, primary) 9 | colors[key] = color.convert(value) 10 | }) 11 | return colors 12 | } 13 | 14 | export default generateColors 15 | -------------------------------------------------------------------------------- /src/utils/formula.json: -------------------------------------------------------------------------------- 1 | { 2 | "shade-1": "color(primary shade(10%))", 3 | "light-1": "color(primary tint(10%))", 4 | "light-2": "color(primary tint(20%))", 5 | "light-3": "color(primary tint(30%))", 6 | "light-4": "color(primary tint(40%))", 7 | "light-5": "color(primary tint(50%))", 8 | "light-6": "color(primary tint(60%))", 9 | "light-7": "color(primary tint(70%))", 10 | "light-8": "color(primary tint(80%))", 11 | "light-9": "color(primary tint(90%))" 12 | } 13 | -------------------------------------------------------------------------------- /static/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ElementUI/theme-chalk-preview/34065a54ae6ef8043bfb3bbf15049248fd75b99e/static/.gitkeep --------------------------------------------------------------------------------