├── .DS_Store ├── .babelrc ├── .csscomb.json ├── .editorconfig ├── .eslintrc.js ├── .gitignore ├── .npmignore ├── build ├── build.js ├── dev-client.js ├── dev-server.js ├── utils.js ├── webpack.base.conf.js ├── webpack.dev.conf.js ├── webpack.prod.conf.js └── webpack.publish.conf.js ├── config ├── dev.env.js ├── index.js ├── prod.env.js └── test.env.js ├── directives ├── ripple.js └── tooltips.js ├── dist ├── index.html ├── readme.md └── static │ ├── app.c9f001167ed2501cdbb85da626973963.css │ ├── app.c9f001167ed2501cdbb85da626973963.css.map │ ├── app.db8e8b52e4e2df3d221a.js │ └── app.db8e8b52e4e2df3d221a.js.map ├── example ├── .gitignore ├── App.vue ├── assets │ └── logo.png ├── components │ ├── avatar.vue │ ├── buttons.vue │ ├── card.vue │ ├── checkbox.vue │ ├── datePicker.vue │ ├── dialog.vue │ ├── input.vue │ ├── layout.vue │ ├── lists.vue │ ├── menu.vue │ ├── pagination.vue │ ├── radio.vue │ ├── radioGroup.vue │ ├── search.vue │ ├── select.vue │ ├── snackbar.vue │ ├── spinner.vue │ ├── switch.vue │ ├── tables.vue │ ├── tabs.vue │ ├── toolbar.vue │ └── tooltips.vue ├── example-code.vue ├── header.vue ├── home.vue ├── main.js ├── readme.md ├── route-config.js └── sidebar.vue ├── filters └── .gitkeep ├── index.html ├── package.json ├── readme.md ├── src ├── avatar │ └── avatar.vue ├── buttons │ └── buttons.vue ├── card │ └── card.vue ├── checkbox │ └── checkbox.vue ├── datePicker │ ├── components │ │ ├── footer.vue │ │ ├── header.vue │ │ ├── pickDate.vue │ │ ├── pickMonth.vue │ │ └── pickYear.vue │ └── datePicker.vue ├── dialog │ └── dialog.vue ├── index.js ├── input │ └── input.vue ├── layout │ └── layout.vue ├── lists │ ├── list.vue │ ├── listOneLine.vue │ ├── listThreeLine.vue │ └── listTwoLine.vue ├── menu │ └── menu.vue ├── pagination │ └── pagination.vue ├── panel │ └── panel.vue ├── radio │ ├── radio.vue │ └── radioGroup.vue ├── search │ └── search.vue ├── select │ └── select.vue ├── slider │ └── slider.vue ├── snackbar │ └── snackbar.vue ├── spinner │ └── spinner.vue ├── switch │ └── switch.vue ├── tables │ └── tables.vue ├── tabs │ └── tabs.vue ├── toolbar │ └── toolbar.vue └── tooltips │ └── tooltips.vue ├── static └── .gitkeep ├── utils ├── handleEvent.js └── parseHtml.js └── vue-material.js /.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/taoche/vue-material/d6a75840614d4eeed6bbb3bbb3211f2db90d0826/.DS_Store -------------------------------------------------------------------------------- /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["es2015", "stage-2"], 3 | "plugins": ["transform-runtime"], 4 | "comments": false 5 | } 6 | -------------------------------------------------------------------------------- /.csscomb.json: -------------------------------------------------------------------------------- 1 | { 2 | "always-semicolon": true, 3 | "block-indent": 2, 4 | "color-case": "lower", 5 | "color-shorthand": true, 6 | "eof-newline": true, 7 | "leading-zero": false, 8 | "remove-empty-rulesets": true, 9 | "space-after-colon": 1, 10 | "space-after-combinator": 1, 11 | "space-before-selector-delimiter": 0, 12 | "space-between-declarations": "\n", 13 | "space-after-opening-brace": "\n", 14 | "space-before-closing-brace": "\n", 15 | "space-before-colon": 0, 16 | "space-before-combinator": 1, 17 | "space-before-opening-brace": 1, 18 | "strip-spaces": true, 19 | "unitless-zero": true, 20 | "vendor-prefix-align": true, 21 | "sort-order": [ 22 | [ 23 | "position", 24 | "top", 25 | "right", 26 | "bottom", 27 | "left", 28 | "z-index", 29 | "display", 30 | "float", 31 | "width", 32 | "min-width", 33 | "max-width", 34 | "height", 35 | "min-height", 36 | "max-height", 37 | "-webkit-box-sizing", 38 | "-moz-box-sizing", 39 | "box-sizing", 40 | "-webkit-appearance", 41 | "padding", 42 | "padding-top", 43 | "padding-right", 44 | "padding-bottom", 45 | "padding-left", 46 | "margin", 47 | "margin-top", 48 | "margin-right", 49 | "margin-bottom", 50 | "margin-left", 51 | "overflow", 52 | "overflow-x", 53 | "overflow-y", 54 | "-webkit-overflow-scrolling", 55 | "-ms-overflow-x", 56 | "-ms-overflow-y", 57 | "-ms-overflow-style", 58 | "clip", 59 | "clear", 60 | "font", 61 | "font-family", 62 | "font-size", 63 | "font-style", 64 | "font-weight", 65 | "font-variant", 66 | "font-size-adjust", 67 | "font-stretch", 68 | "font-effect", 69 | "font-emphasize", 70 | "font-emphasize-position", 71 | "font-emphasize-style", 72 | "font-smooth", 73 | "-webkit-hyphens", 74 | "-moz-hyphens", 75 | "hyphens", 76 | "line-height", 77 | "color", 78 | "text-align", 79 | "-webkit-text-align-last", 80 | "-moz-text-align-last", 81 | "-ms-text-align-last", 82 | "text-align-last", 83 | "text-emphasis", 84 | "text-emphasis-color", 85 | "text-emphasis-style", 86 | "text-emphasis-position", 87 | "text-decoration", 88 | "text-indent", 89 | "text-justify", 90 | "text-outline", 91 | "-ms-text-overflow", 92 | "text-overflow", 93 | "text-overflow-ellipsis", 94 | "text-overflow-mode", 95 | "text-shadow", 96 | "text-transform", 97 | "text-wrap", 98 | "-webkit-text-size-adjust", 99 | "-ms-text-size-adjust", 100 | "letter-spacing", 101 | "-ms-word-break", 102 | "word-break", 103 | "word-spacing", 104 | "-ms-word-wrap", 105 | "word-wrap", 106 | "-moz-tab-size", 107 | "-o-tab-size", 108 | "tab-size", 109 | "white-space", 110 | "vertical-align", 111 | "list-style", 112 | "list-style-position", 113 | "list-style-type", 114 | "list-style-image", 115 | "pointer-events", 116 | "-ms-touch-action", 117 | "touch-action", 118 | "cursor", 119 | "visibility", 120 | "zoom", 121 | "flex-direction", 122 | "flex-order", 123 | "flex-pack", 124 | "flex-align", 125 | "table-layout", 126 | "empty-cells", 127 | "caption-side", 128 | "border-spacing", 129 | "border-collapse", 130 | "content", 131 | "quotes", 132 | "counter-reset", 133 | "counter-increment", 134 | "resize", 135 | "-webkit-user-select", 136 | "-moz-user-select", 137 | "-ms-user-select", 138 | "-o-user-select", 139 | "user-select", 140 | "nav-index", 141 | "nav-up", 142 | "nav-right", 143 | "nav-down", 144 | "nav-left", 145 | "background", 146 | "background-color", 147 | "background-image", 148 | "-ms-filter:\\'progid:DXImageTransform.Microsoft.gradient", 149 | "filter:progid:DXImageTransform.Microsoft.gradient", 150 | "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader", 151 | "filter", 152 | "background-repeat", 153 | "background-attachment", 154 | "background-position", 155 | "background-position-x", 156 | "background-position-y", 157 | "-webkit-background-clip", 158 | "-moz-background-clip", 159 | "background-clip", 160 | "background-origin", 161 | "-webkit-background-size", 162 | "-moz-background-size", 163 | "-o-background-size", 164 | "background-size", 165 | "border", 166 | "border-color", 167 | "border-style", 168 | "border-width", 169 | "border-top", 170 | "border-top-color", 171 | "border-top-style", 172 | "border-top-width", 173 | "border-right", 174 | "border-right-color", 175 | "border-right-style", 176 | "border-right-width", 177 | "border-bottom", 178 | "border-bottom-color", 179 | "border-bottom-style", 180 | "border-bottom-width", 181 | "border-left", 182 | "border-left-color", 183 | "border-left-style", 184 | "border-left-width", 185 | "border-radius", 186 | "border-top-left-radius", 187 | "border-top-right-radius", 188 | "border-bottom-right-radius", 189 | "border-bottom-left-radius", 190 | "-webkit-border-image", 191 | "-moz-border-image", 192 | "-o-border-image", 193 | "border-image", 194 | "-webkit-border-image-source", 195 | "-moz-border-image-source", 196 | "-o-border-image-source", 197 | "border-image-source", 198 | "-webkit-border-image-slice", 199 | "-moz-border-image-slice", 200 | "-o-border-image-slice", 201 | "border-image-slice", 202 | "-webkit-border-image-width", 203 | "-moz-border-image-width", 204 | "-o-border-image-width", 205 | "border-image-width", 206 | "-webkit-border-image-outset", 207 | "-moz-border-image-outset", 208 | "-o-border-image-outset", 209 | "border-image-outset", 210 | "-webkit-border-image-repeat", 211 | "-moz-border-image-repeat", 212 | "-o-border-image-repeat", 213 | "border-image-repeat", 214 | "outline", 215 | "outline-width", 216 | "outline-style", 217 | "outline-color", 218 | "outline-offset", 219 | "-webkit-box-shadow", 220 | "-moz-box-shadow", 221 | "box-shadow", 222 | "filter:progid:DXImageTransform.Microsoft.Alpha(Opacity", 223 | "-ms-filter:\\'progid:DXImageTransform.Microsoft.Alpha", 224 | "opacity", 225 | "-ms-interpolation-mode", 226 | "-webkit-transition", 227 | "-moz-transition", 228 | "-ms-transition", 229 | "-o-transition", 230 | "transition", 231 | "-webkit-transition-delay", 232 | "-moz-transition-delay", 233 | "-ms-transition-delay", 234 | "-o-transition-delay", 235 | "transition-delay", 236 | "-webkit-transition-timing-function", 237 | "-moz-transition-timing-function", 238 | "-ms-transition-timing-function", 239 | "-o-transition-timing-function", 240 | "transition-timing-function", 241 | "-webkit-transition-duration", 242 | "-moz-transition-duration", 243 | "-ms-transition-duration", 244 | "-o-transition-duration", 245 | "transition-duration", 246 | "-webkit-transition-property", 247 | "-moz-transition-property", 248 | "-ms-transition-property", 249 | "-o-transition-property", 250 | "transition-property", 251 | "-webkit-transform", 252 | "-moz-transform", 253 | "-ms-transform", 254 | "-o-transform", 255 | "transform", 256 | "-webkit-transform-origin", 257 | "-moz-transform-origin", 258 | "-ms-transform-origin", 259 | "-o-transform-origin", 260 | "transform-origin", 261 | "-webkit-animation", 262 | "-moz-animation", 263 | "-ms-animation", 264 | "-o-animation", 265 | "animation", 266 | "-webkit-animation-name", 267 | "-moz-animation-name", 268 | "-ms-animation-name", 269 | "-o-animation-name", 270 | "animation-name", 271 | "-webkit-animation-duration", 272 | "-moz-animation-duration", 273 | "-ms-animation-duration", 274 | "-o-animation-duration", 275 | "animation-duration", 276 | "-webkit-animation-play-state", 277 | "-moz-animation-play-state", 278 | "-ms-animation-play-state", 279 | "-o-animation-play-state", 280 | "animation-play-state", 281 | "-webkit-animation-timing-function", 282 | "-moz-animation-timing-function", 283 | "-ms-animation-timing-function", 284 | "-o-animation-timing-function", 285 | "animation-timing-function", 286 | "-webkit-animation-delay", 287 | "-moz-animation-delay", 288 | "-ms-animation-delay", 289 | "-o-animation-delay", 290 | "animation-delay", 291 | "-webkit-animation-iteration-count", 292 | "-moz-animation-iteration-count", 293 | "-ms-animation-iteration-count", 294 | "-o-animation-iteration-count", 295 | "animation-iteration-count", 296 | "-webkit-animation-direction", 297 | "-moz-animation-direction", 298 | "-ms-animation-direction", 299 | "-o-animation-direction", 300 | "animation-direction" 301 | ] 302 | ] 303 | } 304 | -------------------------------------------------------------------------------- /.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 | -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | parser: 'babel-eslint', 4 | parserOptions: { 5 | sourceType: 'module' 6 | }, 7 | // https://github.com/feross/standard/blob/master/RULES.md#javascript-standard-style 8 | extends: 'standard', 9 | // required to lint *.vue files 10 | plugins: [ 11 | 'html' 12 | ], 13 | // add your custom rules here 14 | 'rules': { 15 | // allow paren-less arrow functions 16 | 'arrow-parens': 0, 17 | // allow async-await 18 | 'generator-star-spacing': 0, 19 | // allow debugger during development 20 | 'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | TODO.md 4 | config.codekit 5 | examples/**/build.js 6 | /.DS_Store 7 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | *.log 3 | examples 4 | dist 5 | build 6 | config 7 | 8 | -------------------------------------------------------------------------------- /build/build.js: -------------------------------------------------------------------------------- 1 | // https://github.com/shelljs/shelljs 2 | require('shelljs/global') 3 | env.NODE_ENV = 'production' 4 | 5 | var path = require('path') 6 | var config = require('../config') 7 | var ora = require('ora') 8 | var webpack = require('webpack') 9 | var webpackConfig = require('./webpack.prod.conf') 10 | 11 | console.log( 12 | ' Tip:\n' + 13 | ' Built files are meant to be served over an HTTP server.\n' + 14 | ' Opening index.html over file:// won\'t work.\n' 15 | ) 16 | 17 | var spinner = ora('building for production...') 18 | spinner.start() 19 | 20 | var assetsPath = path.join(config.build.assetsRoot, config.build.assetsSubDirectory) 21 | rm('-rf', assetsPath) 22 | mkdir('-p', assetsPath) 23 | cp('-R', 'static/', assetsPath) 24 | 25 | webpack(webpackConfig, function (err, stats) { 26 | spinner.stop() 27 | if (err) throw err 28 | process.stdout.write(stats.toString({ 29 | colors: true, 30 | modules: false, 31 | children: false, 32 | chunks: false, 33 | chunkModules: false 34 | }) + '\n') 35 | }) 36 | -------------------------------------------------------------------------------- /build/dev-client.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable */ 2 | require('eventsource-polyfill') 3 | var hotClient = require('webpack-hot-middleware/client?noInfo=true&reload=true') 4 | 5 | hotClient.subscribe(function (event) { 6 | if (event.action === 'reload') { 7 | window.location.reload() 8 | } 9 | }) 10 | -------------------------------------------------------------------------------- /build/dev-server.js: -------------------------------------------------------------------------------- 1 | var path = require('path') 2 | var express = require('express') 3 | var webpack = require('webpack') 4 | var config = require('../config') 5 | var proxyMiddleware = require('http-proxy-middleware') 6 | var webpackConfig = process.env.NODE_ENV === 'testing' 7 | ? require('./webpack.prod.conf') 8 | : require('./webpack.dev.conf') 9 | 10 | // default port where dev server listens for incoming traffic 11 | var port = process.env.PORT || config.dev.port 12 | // Define HTTP proxies to your custom API backend 13 | // https://github.com/chimurai/http-proxy-middleware 14 | var proxyTable = config.dev.proxyTable 15 | 16 | var app = express() 17 | var compiler = webpack(webpackConfig) 18 | 19 | var devMiddleware = require('webpack-dev-middleware')(compiler, { 20 | publicPath: webpackConfig.output.publicPath, 21 | stats: { 22 | colors: true, 23 | chunks: false 24 | } 25 | }) 26 | 27 | var hotMiddleware = require('webpack-hot-middleware')(compiler) 28 | // force page reload when html-webpack-plugin template changes 29 | compiler.plugin('compilation', function (compilation) { 30 | compilation.plugin('html-webpack-plugin-after-emit', function (data, cb) { 31 | hotMiddleware.publish({ action: 'reload' }) 32 | cb() 33 | }) 34 | }) 35 | 36 | // proxy api requests 37 | Object.keys(proxyTable).forEach(function (context) { 38 | var options = proxyTable[context] 39 | if (typeof options === 'string') { 40 | options = { target: options } 41 | } 42 | app.use(proxyMiddleware(context, options)) 43 | }) 44 | 45 | // handle fallback for HTML5 history API 46 | app.use(require('connect-history-api-fallback')()) 47 | 48 | // serve webpack bundle output 49 | app.use(devMiddleware) 50 | 51 | // enable hot-reload and state-preserving 52 | // compilation error display 53 | app.use(hotMiddleware) 54 | 55 | // serve pure static assets 56 | var staticPath = path.posix.join(config.dev.assetsPublicPath, config.dev.assetsSubDirectory) 57 | app.use(staticPath, express.static('./static')) 58 | 59 | module.exports = app.listen(port, function (err) { 60 | if (err) { 61 | console.log(err) 62 | return 63 | } 64 | console.log('Listening at http://localhost:' + port + '\n') 65 | }) 66 | -------------------------------------------------------------------------------- /build/utils.js: -------------------------------------------------------------------------------- 1 | var path = require('path') 2 | var config = require('../config') 3 | var ExtractTextPlugin = require('extract-text-webpack-plugin') 4 | 5 | exports.assetsPath = function (_path) { 6 | var assetsSubDirectory = process.env.NODE_ENV === 'production' 7 | ? config.build.assetsSubDirectory 8 | : config.dev.assetsSubDirectory 9 | return path.posix.join(assetsSubDirectory, _path) 10 | } 11 | 12 | exports.cssLoaders = function (options) { 13 | options = options || {} 14 | // generate loader string to be used with extract text plugin 15 | function generateLoaders (loaders) { 16 | var sourceLoader = loaders.map(function (loader) { 17 | var extraParamChar 18 | if (/\?/.test(loader)) { 19 | loader = loader.replace(/\?/, '-loader?') 20 | extraParamChar = '&' 21 | } else { 22 | loader = loader + '-loader' 23 | extraParamChar = '?' 24 | } 25 | return loader + (options.sourceMap ? extraParamChar + 'sourceMap' : '') 26 | }).join('!') 27 | 28 | if (options.extract) { 29 | return ExtractTextPlugin.extract('vue-style-loader', sourceLoader) 30 | } else { 31 | return ['vue-style-loader', sourceLoader].join('!') 32 | } 33 | } 34 | 35 | // http://vuejs.github.io/vue-loader/configurations/extract-css.html 36 | return { 37 | css: generateLoaders(['css']), 38 | postcss: generateLoaders(['css']), 39 | less: generateLoaders(['css', 'less']), 40 | sass: generateLoaders(['css', 'sass?indentedSyntax']), 41 | scss: generateLoaders(['css', 'sass']), 42 | stylus: generateLoaders(['css', 'stylus']), 43 | styl: generateLoaders(['css', 'stylus']) 44 | } 45 | } 46 | 47 | // Generate loaders for standalone style files (outside of .vue) 48 | exports.styleLoaders = function (options) { 49 | var output = [] 50 | var loaders = exports.cssLoaders(options) 51 | for (var extension in loaders) { 52 | var loader = loaders[extension] 53 | output.push({ 54 | test: new RegExp('\\.' + extension + '$'), 55 | loader: loader 56 | }) 57 | } 58 | return output 59 | } 60 | -------------------------------------------------------------------------------- /build/webpack.base.conf.js: -------------------------------------------------------------------------------- 1 | var path = require('path') 2 | var config = require('../config') 3 | var utils = require('./utils') 4 | var projectRoot = path.resolve(__dirname, '../') 5 | 6 | module.exports = { 7 | entry: { 8 | app: './example/main.js' 9 | }, 10 | output: { 11 | path: config.build.assetsRoot, 12 | publicPath: process.env.NODE_ENV === 'production' ? config.build.assetsPublicPath : config.dev.assetsPublicPath, 13 | filename: '[name].js' 14 | }, 15 | resolve: { 16 | extensions: ['', '.js', '.vue'], 17 | fallback: [path.join(__dirname, '../node_modules')], 18 | alias: { 19 | 'src': path.resolve(__dirname, '../src'), 20 | 'utils': path.resolve(__dirname, '../utils'), 21 | 'directives': path.resolve(__dirname, '../directives'), 22 | 'assets': path.resolve(__dirname, '../src/assets'), 23 | 'components': path.resolve(__dirname, '../src/components') 24 | } 25 | }, 26 | resolveLoader: { 27 | fallback: [path.join(__dirname, '../node_modules')] 28 | }, 29 | module: { 30 | preLoaders: [ 31 | { 32 | test: /\.vue$/, 33 | loader: 'eslint', 34 | include: projectRoot, 35 | exclude: /node_modules/ 36 | }, 37 | { 38 | test: /\.js$/, 39 | loader: 'eslint', 40 | include: projectRoot, 41 | exclude: /node_modules/ 42 | } 43 | ], 44 | loaders: [ 45 | { 46 | test: /\.vue$/, 47 | loader: 'vue' 48 | }, 49 | { 50 | test: /\.js$/, 51 | loader: 'babel', 52 | include: projectRoot, 53 | exclude: /node_modules/ 54 | }, 55 | { 56 | test: /\.json$/, 57 | loader: 'json' 58 | }, 59 | { 60 | test: /\.html$/, 61 | loader: 'vue-html' 62 | }, 63 | { 64 | test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, 65 | loader: 'url', 66 | query: { 67 | limit: 10000, 68 | name: utils.assetsPath('img/[name].[hash:7].[ext]') 69 | } 70 | }, 71 | { 72 | test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/, 73 | loader: 'url', 74 | query: { 75 | limit: 10000, 76 | name: utils.assetsPath('fonts/[name].[hash:7].[ext]') 77 | } 78 | } 79 | ] 80 | }, 81 | eslint: { 82 | formatter: require('eslint-friendly-formatter') 83 | }, 84 | vue: { 85 | loaders: utils.cssLoaders() 86 | } 87 | } 88 | -------------------------------------------------------------------------------- /build/webpack.dev.conf.js: -------------------------------------------------------------------------------- 1 | var config = require('../config') 2 | var webpack = require('webpack') 3 | var merge = require('webpack-merge') 4 | var utils = require('./utils') 5 | var baseWebpackConfig = require('./webpack.base.conf') 6 | var HtmlWebpackPlugin = require('html-webpack-plugin') 7 | 8 | // add hot-reload related code to entry chunks 9 | Object.keys(baseWebpackConfig.entry).forEach(function (name) { 10 | baseWebpackConfig.entry[name] = ['./build/dev-client'].concat(baseWebpackConfig.entry[name]) 11 | }) 12 | 13 | module.exports = merge(baseWebpackConfig, { 14 | module: { 15 | loaders: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap }) 16 | }, 17 | // eval-source-map is faster for development 18 | devtool: '#eval-source-map', 19 | plugins: [ 20 | new webpack.DefinePlugin({ 21 | 'process.env': config.dev.env 22 | }), 23 | // https://github.com/glenjamin/webpack-hot-middleware#installation--usage 24 | new webpack.optimize.OccurenceOrderPlugin(), 25 | new webpack.HotModuleReplacementPlugin(), 26 | new webpack.NoErrorsPlugin(), 27 | // https://github.com/ampedandwired/html-webpack-plugin 28 | new HtmlWebpackPlugin({ 29 | filename: 'index.html', 30 | template: 'index.html', 31 | inject: true 32 | }) 33 | ] 34 | }) 35 | -------------------------------------------------------------------------------- /build/webpack.prod.conf.js: -------------------------------------------------------------------------------- 1 | var path = require('path') 2 | var config = require('../config') 3 | var utils = require('./utils') 4 | var webpack = require('webpack') 5 | var merge = require('webpack-merge') 6 | var baseWebpackConfig = require('./webpack.base.conf') 7 | var ExtractTextPlugin = require('extract-text-webpack-plugin') 8 | var HtmlWebpackPlugin = require('html-webpack-plugin') 9 | var env = process.env.NODE_ENV === 'testing' 10 | ? require('../config/test.env') 11 | : config.build.env 12 | 13 | var webpackConfig = merge(baseWebpackConfig, { 14 | module: { 15 | loaders: utils.styleLoaders({ sourceMap: config.build.productionSourceMap, extract: true }) 16 | }, 17 | devtool: config.build.productionSourceMap ? '#source-map' : false, 18 | output: { 19 | path: config.build.assetsRoot, 20 | filename: utils.assetsPath('js/[name].[chunkhash].js'), 21 | chunkFilename: utils.assetsPath('js/[id].[chunkhash].js') 22 | }, 23 | vue: { 24 | loaders: utils.cssLoaders({ 25 | sourceMap: config.build.productionSourceMap, 26 | extract: true 27 | }) 28 | }, 29 | plugins: [ 30 | // http://vuejs.github.io/vue-loader/workflow/production.html 31 | new webpack.DefinePlugin({ 32 | 'process.env': env 33 | }), 34 | new webpack.optimize.UglifyJsPlugin({ 35 | compress: { 36 | warnings: false 37 | } 38 | }), 39 | new webpack.optimize.OccurenceOrderPlugin(), 40 | // extract css into its own file 41 | new ExtractTextPlugin(utils.assetsPath('css/[name].[contenthash].css')), 42 | // generate dist index.html with correct asset hash for caching. 43 | // you can customize output by editing /index.html 44 | // see https://github.com/ampedandwired/html-webpack-plugin 45 | new HtmlWebpackPlugin({ 46 | filename: process.env.NODE_ENV === 'testing' 47 | ? 'index.html' 48 | : config.build.index, 49 | template: 'index.html', 50 | inject: true, 51 | minify: { 52 | removeComments: true, 53 | collapseWhitespace: true, 54 | removeAttributeQuotes: true 55 | // more options: 56 | // https://github.com/kangax/html-minifier#options-quick-reference 57 | }, 58 | // necessary to consistently work with multiple chunks via CommonsChunkPlugin 59 | chunksSortMode: 'dependency' 60 | }), 61 | // split vendor js into its own file 62 | new webpack.optimize.CommonsChunkPlugin({ 63 | name: 'vendor', 64 | minChunks: function (module, count) { 65 | // any required modules inside node_modules are extracted to vendor 66 | return ( 67 | module.resource && 68 | /\.js$/.test(module.resource) && 69 | module.resource.indexOf( 70 | path.join(__dirname, '../node_modules') 71 | ) === 0 72 | ) 73 | } 74 | }), 75 | // extract webpack runtime and module manifest to its own file in order to 76 | // prevent vendor hash from being updated whenever app bundle is updated 77 | new webpack.optimize.CommonsChunkPlugin({ 78 | name: 'manifest', 79 | chunks: ['vendor'] 80 | }) 81 | ] 82 | }) 83 | 84 | if (config.build.productionGzip) { 85 | var CompressionWebpackPlugin = require('compression-webpack-plugin') 86 | 87 | webpackConfig.plugins.push( 88 | new CompressionWebpackPlugin({ 89 | asset: '[path].gz[query]', 90 | algorithm: 'gzip', 91 | test: new RegExp( 92 | '\\.(' + 93 | config.build.productionGzipExtensions.join('|') + 94 | ')$' 95 | ), 96 | threshold: 10240, 97 | minRatio: 0.8 98 | }) 99 | ) 100 | } 101 | 102 | module.exports = webpackConfig 103 | -------------------------------------------------------------------------------- /build/webpack.publish.conf.js: -------------------------------------------------------------------------------- 1 | var path = require('path'); 2 | var utils = require('./utils'); 3 | var webpack = require('webpack'); 4 | var ExtractTextPlugin = require('extract-text-webpack-plugin'); 5 | 6 | var config = { 7 | entry: path.resolve(__dirname, '../src/index.js'), 8 | output: { 9 | path: './', 10 | filename: 'vue-material.js', 11 | libraryTarget: 'umd' 12 | }, 13 | resolve: { 14 | extensions: ['', '.js', '.vue'], 15 | fallback: [path.join(__dirname, '../node_modules')], 16 | alias: { 17 | 'src': path.resolve(__dirname, '../src'), 18 | 'utils': path.resolve(__dirname, '../utils'), 19 | 'directives': path.resolve(__dirname, '../directives'), 20 | 'assets': path.resolve(__dirname, '../src/assets'), 21 | 'components': path.resolve(__dirname, '../src/components') 22 | } 23 | }, 24 | resolveLoader: { 25 | fallback: [path.join(__dirname, '../node_modules')] 26 | }, 27 | module: { 28 | loaders: [{ 29 | test: /\.vue$/, 30 | loader: 'vue' 31 | }, { 32 | test: /\.js$/, 33 | loader: 'babel', 34 | exclude: /node_modules/ 35 | }, { 36 | test: /\.json$/, 37 | loader: 'json' 38 | }, { 39 | test: /\.html$/, 40 | loader: 'vue-html' 41 | }, { 42 | test: /\.(png|jpg|gif|svg)$/, 43 | loader: 'url', 44 | query: { 45 | limit: 10000, 46 | name: '[name].[ext]?[hash]' 47 | } 48 | }] 49 | }, 50 | vue: { 51 | loaders: utils.cssLoaders(), 52 | autoprefixer: { 53 | browsers: ['last 2 versions', 'ie > 8', 'Firefox ESR'] 54 | } 55 | }, 56 | babel: { 57 | presets: ['es2015', 'stage-2'], 58 | plugins: ['transform-runtime'], 59 | comments: false 60 | }, 61 | } 62 | 63 | config.plugins = [ 64 | new webpack.DefinePlugin({ 65 | 'process.env': { 66 | NODE_ENV: '"production"' 67 | } 68 | }), 69 | 70 | new webpack.optimize.UglifyJsPlugin({ 71 | compress: { 72 | warnings: false 73 | } 74 | }), 75 | 76 | new webpack.optimize.OccurenceOrderPlugin() 77 | ]; 78 | 79 | module.exports = config; 80 | -------------------------------------------------------------------------------- /config/dev.env.js: -------------------------------------------------------------------------------- 1 | var merge = require('webpack-merge') 2 | var prodEnv = require('./prod.env') 3 | 4 | module.exports = merge(prodEnv, { 5 | NODE_ENV: '"development"' 6 | }) 7 | -------------------------------------------------------------------------------- /config/index.js: -------------------------------------------------------------------------------- 1 | // see http://vuejs-templates.github.io/webpack for documentation. 2 | var path = require('path') 3 | 4 | module.exports = { 5 | build: { 6 | env: require('./prod.env'), 7 | index: path.resolve(__dirname, '../dist/index.html'), 8 | assetsRoot: path.resolve(__dirname, '../dist'), 9 | assetsSubDirectory: 'static', 10 | assetsPublicPath: '/', 11 | productionSourceMap: true, 12 | // Gzip off by default as many popular static hosts such as 13 | // Surge or Netlify already gzip all static assets for you. 14 | // Before setting to `true`, make sure to: 15 | // npm install --save-dev compression-webpack-plugin 16 | productionGzip: false, 17 | productionGzipExtensions: ['js', 'css'] 18 | }, 19 | dev: { 20 | env: require('./dev.env'), 21 | port: 8081, 22 | assetsSubDirectory: 'static', 23 | assetsPublicPath: '/', 24 | proxyTable: {}, 25 | // CSS Sourcemaps off by default because relative paths are "buggy" 26 | // with this option, according to the CSS-Loader README 27 | // (https://github.com/webpack/css-loader#sourcemaps) 28 | // In our experience, they generally work as expected, 29 | // just be aware of this issue when enabling this option. 30 | cssSourceMap: false 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /config/prod.env.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | NODE_ENV: '"production"' 3 | } 4 | -------------------------------------------------------------------------------- /config/test.env.js: -------------------------------------------------------------------------------- 1 | var merge = require('webpack-merge') 2 | var devEnv = require('./dev.env') 3 | 4 | module.exports = merge(devEnv, { 5 | NODE_ENV: '"testing"' 6 | }) 7 | -------------------------------------------------------------------------------- /directives/ripple.js: -------------------------------------------------------------------------------- 1 | import parseHtml from 'utils/parseHtml' 2 | import handleEvent from 'utils/handleEvent' 3 | 4 | const ripple = (x, y) => { 5 | return parseHtml(``) 6 | } 7 | 8 | export default { 9 | bind () { 10 | const mousedownHandle = (event) => { 11 | let x = '50%' 12 | let y = '50%' 13 | 14 | if (!this.modifiers.static) { 15 | x = event.pageX - event.currentTarget.offsetLeft 16 | y = event.pageY - event.currentTarget.offsetTop 17 | } 18 | 19 | let domRipple = ripple(x, y) 20 | 21 | this.el.appendChild(domRipple) 22 | 23 | const rippleHandle = handleEvent('animationend', { 24 | element: domRipple, 25 | callback: () => { 26 | rippleHandle.destroy() 27 | this.el.removeChild(domRipple) 28 | } 29 | }) 30 | } 31 | 32 | this.mousedownHandle = handleEvent('mousedown', { 33 | element: this.el, 34 | callback: mousedownHandle 35 | }) 36 | }, 37 | unbind () { 38 | this.mousedownHandle.destroy() 39 | } 40 | } 41 | -------------------------------------------------------------------------------- /directives/tooltips.js: -------------------------------------------------------------------------------- 1 | import parseHtml from 'utils/parseHtml' 2 | import handleEvent from 'utils/handleEvent' 3 | 4 | const templateTooltip = (text, direction) => { 5 | return parseHtml(`
6 | ${text} 7 |
`) 8 | } 9 | 10 | export default { 11 | bind () { 12 | const direction = { 13 | top: { 14 | x: 0, 15 | y: -30 16 | }, 17 | right: { 18 | x: 30, 19 | y: 0 20 | }, 21 | bottom: { 22 | x: 0, 23 | y: 30 24 | }, 25 | left: { 26 | x: -30, 27 | y: 0 28 | } 29 | } 30 | 31 | const $tooltip = templateTooltip(this.expression, direction[this.arg] || 'bottom') 32 | 33 | const enterHanlder = () => { 34 | this.el.appendChild($tooltip) 35 | } 36 | 37 | const leaveHanlder = () => { 38 | this.el.removeChild($tooltip) 39 | } 40 | 41 | this.enterHanlder = handleEvent('mouseenter', { 42 | element: this.el, 43 | callback: enterHanlder 44 | }) 45 | 46 | this.leaveHanlder = handleEvent('mouseleave', { 47 | element: this.el, 48 | callback: leaveHanlder 49 | }) 50 | }, 51 | unbind () { 52 | this.enterHanlder.destroy() 53 | this.leaveHanlder.destroy() 54 | } 55 | } 56 | -------------------------------------------------------------------------------- /dist/index.html: -------------------------------------------------------------------------------- 1 | example -------------------------------------------------------------------------------- /dist/readme.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/taoche/vue-material/d6a75840614d4eeed6bbb3bbb3211f2db90d0826/dist/readme.md -------------------------------------------------------------------------------- /dist/static/app.c9f001167ed2501cdbb85da626973963.css: -------------------------------------------------------------------------------- 1 | code,pre{font-size:14px;background-color:#f8f8f8;-webkit-font-smoothing:antialiased;color:#34495e;font-family:Source Code Pro,Roboto Mono,Monaco,courier,monospace}pre{padding:5px 10px}pre .constant,pre .function .keyword{color:#0092db}pre .attribute,pre .keyword{color:#e96900}pre .literal,pre .number{color:#ae81ff}pre .change,pre .clojure .built_in,pre .flow,pre .lisp .title,pre .nginx .title,pre .tag,pre .tag .title,pre .tex .special,pre .winutils{color:#2973b7}pre .regexp,pre .symbol,pre .symbol .string,pre .value{color:#42b983}pre .title{color:#83b917}pre .addition,pre .apache .cbracket,pre .apache .tag,pre .attr_selector,pre .built_in,pre .django .filter .argument,pre .django .template_tag,pre .django .variable,pre .envvar,pre .haskell .type,pre .javadoc,pre .preprocessor,pre .prompt,pre .pseudo,pre .ruby .class .parent,pre .smalltalk .array,pre .smalltalk .class,pre .smalltalk .localvars,pre .sql .aggregate,pre .stream,pre .string,pre .subst,pre .tag .value,pre .tex .command{color:#42b983}pre .apache .sqbracket,pre .comment,pre .doctype,pre .java .annotation,pre .pi,pre .python .decorator,pre .shebang,pre .template_comment,pre .tex .formula{color:#b3b3b3}pre .deletion{color:#ba4545}pre .coffeescript .javascript,pre .javascript .xml,pre .tex .formula,pre .xml .cdata,pre .xml .css,pre .xml .javascript,pre .xml .vbscript{opacity:.5}.component-avatar{margin:0 10px}.component-avatar{display:inline-block}.component-avatar.large .avatar{line-height:60px;width:60px;height:60px}.component-avatar.large .avatar .letter{font-size:26px}.component-avatar.small .avatar{line-height:24px;width:24px;height:24px}.component-avatar.small .avatar .letter{font-size:12px}.component-avatar .avatar{font-size:0;line-height:41px;display:inline-block;box-sizing:border-box;width:41px;height:41px;text-align:center;vertical-align:middle;color:#fff;border-radius:50%}.component-avatar .avatar.is-letter{background-color:#0884ce}.component-avatar .avatar .img{display:block;width:100%;height:100%;border-radius:50%;background-repeat:no-repeat;background-position:50%}.component-avatar .avatar .letter{font-size:18px}.component-button{overflow:hidden}.component-button .ripple{position:absolute;display:block;width:4px;height:4px;-webkit-transform:scale(100);transform:scale(100);-webkit-animation:button-ripple 1.4s;animation:button-ripple 1.4s;opacity:0;border-radius:50%;background:#fff}@-webkit-keyframes button-ripple{0%{-webkit-transform:scale(0);transform:scale(0);opacity:.5}to{-webkit-transform:scale(100);transform:scale(100);opacity:0}}@keyframes button-ripple{0%{-webkit-transform:scale(0);transform:scale(0);opacity:.5}to{-webkit-transform:scale(100);transform:scale(100);opacity:0}}.component-checkbox{cursor:pointer}.component-checkbox.disabled .checkbox-tag{display:none}.component-checkbox.disabled .checkbox-bd{border:2px solid #c1c1c1!important;background-color:#c1c1c1}.component-checkbox .ripple{position:absolute;top:50%;left:50%;display:block;width:4px;height:4px;margin:-2px;-webkit-transform:scale(13);transform:scale(13);-webkit-animation:checkbox-ripple .8s;animation:checkbox-ripple .8s;opacity:0;border-radius:50%;background:rgba(0,0,0,.5)}@-webkit-keyframes checkbox-ripple{0%{-webkit-transform:scale(0);transform:scale(0);opacity:.5}to{-webkit-transform:scale(13);transform:scale(13);opacity:0}}@keyframes checkbox-ripple{0%{-webkit-transform:scale(0);transform:scale(0);opacity:.5}to{-webkit-transform:scale(13);transform:scale(13);opacity:0}}.date-picker{position:fixed;z-index:998;top:0;left:0;width:100%;height:100%;-webkit-transition:opacity .3s ease;transition:opacity .3s ease;background-color:rgba(0,0,0,.5)}.date-picker .date-picker-wrapper{position:absolute;right:0;left:0}.date-picker .date-picker-wrapper .date-picker-container{z-index:999;width:320px;margin:0 auto;-webkit-user-select:none;-webkit-transition:all .3s ease;transition:all .3s ease;text-align:center;border-radius:2px;background:#fff;box-shadow:0 14px 45px rgba(0,0,0,.25),0 10px 18px rgba(0,0,0,.22)}.date-picker.date-enter,.date-picker.date-leave{opacity:0}.date-picker.date-enter .date-picker-container,.date-picker.date-leave .date-picker-container{-webkit-transform:scale(1.1);transform:scale(1.1)}.date-picker .date-header{height:72px;padding:20px;text-align:left;background:#0884ce}.date-picker .date-header h2,.date-picker .date-header h4{color:hsla(0,0%,100%,.7);cursor:pointer}.date-picker .date-header h4{font-weight:400;margin:0}.date-picker .date-header .date-year{overflow:hidden;height:16px}.date-picker .date-header .date{overflow:hidden;height:40px;margin:15px 0 0}.date-picker .date-header .date h2{font-size:36px;margin:0}.date-picker .date-header .ani-up{-webkit-animation:runUp .4s;animation:runUp .4s}.date-picker .date-header .ani-down{-webkit-animation:runDown .4s;animation:runDown .4s}.date-picker .date-header .active{color:#fff}@-webkit-keyframes runUp{0%{-webkit-transform:translateY(-20px)}to{-webkit-transform:translateY(0)}}@-webkit-keyframes runDown{0%{-webkit-transform:translateY(20px)}to{-webkit-transform:translateY(0)}}.date-picker .date-footer{padding:15px 10px 10px;text-align:right}.date-picker .date-footer button{padding:8px 20px;cursor:pointer;color:red;color:#0884ce;border:none;background:transparent}.date-picker .date-footer button:hover{-webkit-animation:btn-fade-in .5s ease both;animation:btn-fade-in .5s ease both;color:#fff}.date-picker .date-footer button:focus{outline:none}@-webkit-keyframes btn-fade-in{0%{background:rgba(9,148,231,.1)}to{background:rgba(9,148,231,.5)}}.date-picker .select-month{display:block;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;padding:10px 0 5px;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center}.date-picker .select-month .date{width:77%}.date-picker .select-month .disabled{cursor:default;box-shadow:inset 2px -2px #dce0e5}.date-picker .arrow{padding:5px;cursor:pointer}.date-picker .select-date{width:inherit;width:300px;margin:0 auto;border-spacing:0;border-collapse:collapse;text-align:center;color:#4e647b}.date-picker .select-date .week-header{font-size:12px;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;padding:10px 0;color:#a5a5a5;-webkit-justify-content:space-around;-ms-flex-pack:distribute;justify-content:space-around}.date-picker .select-date tbody{display:block;width:inherit;margin-top:10px}.date-picker .select-date tbody tr{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-justify-content:space-around;-ms-flex-pack:distribute;justify-content:space-around}.date-picker .select-date tbody tr .not-current-month{height:0;cursor:default;opacity:0;color:#a7b2bd}.date-picker .select-date tbody tr td{font-size:12px;line-height:36px;display:inline-block;width:36px;height:36px;margin:2px 0;cursor:pointer;border-radius:50%;-webkit-touch-callout:none}.date-picker .select-date tbody tr td.disabled{cursor:default;color:#dce0e5}.date-picker .select-date tbody tr td.today{font-weight:700;color:#0884ce}.date-picker .select-date tbody tr td.selected{color:#fff;background:#0884ce}.date-picker .select-date tbody tr td:not(.selected):not(.disabled):hover{position:relative;z-index:1;color:#fff}.date-picker .select-date tbody tr td:not(.selected):not(.disabled):hover:after{position:absolute;z-index:-1;top:0;display:block;width:36px;height:36px;content:'';-webkit-transform:translateZ(0);transform:translateZ(0);-webkit-animation:dateBackground .3s;animation:dateBackground .3s;border-radius:50%;background:rgba(8,132,206,.7)}.date-left,.date-right{overflow:hidden}.date-right .date-enter{-webkit-animation:dateRight .5s;animation:dateRight .5s}.date-left .date-enter{-webkit-animation:dateLeft .5s;animation:dateLeft .5s}@-webkit-keyframes dateLeft{0%{-webkit-transform:translateX(-40px)}to{-webkit-transform:translateX(0)}}@-webkit-keyframes dateBackground{0%{-webkit-transform:scale(.2);transform:scale(.2)}to{-webkit-transform:scale(1);transform:scale(1)}}@-webkit-keyframes dateRight{0%{-webkit-transform:translateX(40px)}to{-webkit-transform:translateX(0)}}.date-picker .select-year{overflow:hidden;overflow-y:scroll;height:290px;padding-top:10px}.date-picker .select-year::-webkit-scrollbar{display:none}.date-picker .select-year ol{margin:0;padding:0;list-style:none}.date-picker .select-year ol li{font-size:18px;padding:6px 0;cursor:pointer}.date-picker .select-year ol li.active{font-size:22px;font-weight:800;margin:5px 0;color:#0884ce}.component-dialog .dialog-container{width:360px}.component-dialog{position:fixed;z-index:9998;top:0;left:0;display:table;width:100%;height:100%;-webkit-transition:opacity .3s ease;transition:opacity .3s ease;background-color:rgba(0,0,0,.15)}.component-dialog .dialog-wrap{display:table-cell;vertical-align:middle}.component-dialog .dialog-wrap .dialog-container{position:relative;padding:14px;margin:0 auto;-webkit-transition:all .3s ease;transition:all .3s ease;border-radius:2px;background-color:#fff;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;-ms-grid-row-align:center;align-items:center;box-shadow:0 9px 46px 8px rgba(0,0,0,.14),0 11px 15px -7px rgba(0,0,0,.12),0 24px 38px 3px rgba(0,0,0,.2)}.component-dialog .dialog-wrap .dialog-container .dialog-content{padding:20px 24px 24px;color:rgba(0,0,0,.54)}.component-dialog .dialog-wrap .dialog-container .dialog-actions{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:reverse;-webkit-flex-direction:row-reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap}.component-dialog.dialog-enter,.component-dialog.dialog-leave{opacity:0}.component-dialog.dialog-enter .dialog-container,.component-dialog.dialog-leave .dialog-container{-webkit-transform:scale(1.1);transform:scale(1.1)}.component-input .m-input.error~.bar:after,.component-input .m-input.error~.bar:before,.component-input .m-input:not([readonly]):not(.error):focus~.bar:after,.component-input .m-input:not([readonly]):not(.error):focus~.bar:before,.component-input .m-input:not([readonly]):not(.error):valid~.bar:after,.component-input .m-input:not([readonly]):not(.error):valid~.bar:before{width:50%;border-bottom:0}.component-input,.component-input .m-input{position:relative;display:inline-block}.component-input .m-input{font-size:16px;line-height:32px;box-sizing:border-box;width:100%;height:32px;padding-bottom:1px;padding-left:10px;border:none;border-bottom:1px solid #e0e0e0;outline:none;background:none}.component-input .m-input::-webkit-input-placeholder{font-size:12px;color:rbga(0,0,0,.38)}.component-input .m-input.error~.bar:after,.component-input .m-input.error~.bar:before{background:#f44b45}.component-input .m-input.disabled,.component-input .m-input:disabled{cursor:not-allowed;color:#b2b2b2;border-bottom-style:dotted}.component-input .m-input:not([readonly]):not(.error):focus~.bar:after,.component-input .m-input:not([readonly]):not(.error):focus~.bar:before{background:#3c80f6}.component-input .m-input:not([readonly]):not(.error):valid~.bar:after,.component-input .m-input:not([readonly]):not(.error):valid~.bar:before{background:#42b68a}.component-input .bar{position:relative;display:block}.component-input .bar:after,.component-input .bar:before{position:absolute;bottom:.5px;width:0;height:2px;content:'';-webkit-transition:.2s ease all;transition:.2s ease all;background:#3c80f6}.component-input .bar:before{left:50%}.component-input .bar:after{right:50%}.component-pagination{margin-top:20px}.component-pagination svg{cursor:pointer;-webkit-user-select:none;vertical-align:middle}.component-pagination svg:hover polyline{stroke:rgba(0,0,0,.87)}.component-pagination .disabled svg{cursor:not-allowed}.component-pagination .disabled svg polyline{stroke:rgba(0,0,0,.3)}.component-search{position:relative;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;width:100%;height:100%;padding:10px 0;border:1px solid rgba(0,0,0,.16);border-radius:2px;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center}.component-search .search-icon{width:15px;height:15px;margin-left:10px;fill:rgba(0,0,0,.56)}.component-search .search{margin:auto 8px;color:#fff}.component-search .search-input{box-sizing:border-box;text-indent:10px;color:rgba(0,0,0,.56);border:none;outline:none;background:transparent;-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1}.component-search .search-input::-webkit-input-placeholder{color:rgba(0,0,0,.56)}.component-select,.component-select .select-input{position:relative;display:inline-block}.component-select .select-input{font-size:16px;line-height:32px;box-sizing:border-box;width:100%;min-width:180px;height:32px;padding-left:10px;border-bottom:1px solid #e0e0e0;outline:none}.component-select .select-input:focus,.component-select .select-input:hover{border-bottom:2px solid #3c80f6}.component-select .select-input:focus .select-triangle svg,.component-select .select-input:hover .select-triangle svg{color:#3c80f6}.component-select .select-input .select-triangle{position:absolute;right:5px;width:12px;-webkit-transform:rotate(90deg);transform:rotate(90deg);color:rgba(0,0,0,.54)}.component-select .select-input .select-triangle svg{-webkit-transition:-webkit-transform .3s ease-in-out;transition:-webkit-transform .3s ease-in-out;transition:transform .3s ease-in-out;transition:transform .3s ease-in-out,-webkit-transform .3s ease-in-out}.component-select .select-input .select-triangle.open svg{-webkit-transform:rotate(180deg);transform:rotate(180deg)}.component-select .list-box{position:absolute;z-index:1;top:32px;overflow:hidden;overflow-y:auto;width:180px;max-height:300px;-webkit-transition:all .3s ease-in-out;transition:all .3s ease-in-out;border-radius:2px;background-color:#fff}.component-select .list-box .select-search-bar{font-size:12px;height:10px;border:none;border-bottom:1px solid rgba(0,0,0,.16);border-radius:0}.component-select .list-box .select-search-bar .search-icon{width:12px;height:12px}.component-select .list-box li{overflow:hidden;padding:5px 0;cursor:pointer;white-space:nowrap;text-indent:20px;text-overflow:ellipsis;color:rgba(0,0,0,.87)}.component-select .list-box li.active,.component-select .list-box li:focus,.component-select .list-box li:hover{background:rgba(0,0,0,.031)}.component-select .list-box.select-list-transition{-webkit-transition:all .3s ease-in-out;transition:all .3s ease-in-out}.component-select .list-box.select-list-enter,.component-select .list-box.select-list-leave{height:0;opacity:0}.example-tooltips a{color:#000;display:inline-block;margin:0 20px}.example-tooltips a:hover{color:#000}.component-tooltip{position:absolute;-webkit-transition:-webkit-transform .3s ease;transition:-webkit-transform .3s ease;transition:transform .3s ease;transition:transform .3s ease,-webkit-transform .3s ease}.component-tooltip .tooltip-container{font-size:10px;line-height:22px;overflow:hidden;height:22px;padding:0 8px;opacity:.9;color:#fff;border-radius:2px;background:#747474}.component-tooltip.tooltip-enter,.component-tooltip.tooltip-leave{-webkit-transform:scale(1.1);transform:scale(1.1);opacity:0}.component-snackbar{position:fixed;bottom:0;left:50%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;min-width:288px;max-width:568px;padding:14px 24px;-webkit-transform:translate(-50%);transform:translate(-50%);color:#fff;border-radius:2px;background-color:#323232;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between}.component-snackbar .action{margin-left:48px;cursor:pointer}.component-snackbar.snackbar-transition{-webkit-transition:all .3s ease-in-out;transition:all .3s ease-in-out}.component-snackbar.snackbar-enter,.component-snackbar.snackbar-leave{bottom:-50px}.component-table{position:relative;width:100%;margin:0 auto;padding-top:48px;border:1px solid rgba(0,0,0,.12);background:#fff}.component-table>.container{max-height:300px;overflow-y:auto}.component-table>.container table{width:100%;border-spacing:0}.component-table>.container table td,.component-table>.container table th{font-size:14px;font-weight:100;line-height:48px;height:48px;padding:0 25px;color:#757575}.component-table>.container table th{line-height:0;height:0;padding-top:0;padding-bottom:0;white-space:nowrap;color:transparent;border:none}.component-table>.container table thead th>div{line-height:normal;position:absolute;top:0;margin-left:-25px;padding:15px 25px;color:rgba(0,0,0,.54);background:transparent}.component-table>.container table tbody tr{cursor:pointer}.component-table>.container table tbody tr td{border-top:1px solid rgba(0,0,0,.12)}.component-table>.container table tbody tr.active{background:#f5f5f5}.component-table>.container table tbody tr:hover{background:#eee}.component-tabs{position:relative;height:48px;background:#3993e5}.component-tabs .tabs{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;width:100%;height:100%;text-align:center;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center}.component-tabs .tabs .tabs-item{cursor:pointer;color:hsla(0,0%,100%,.7);-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1}.component-tabs .tabs .tabs-item.active{color:#fff}.component-tabs .indicator{position:absolute;bottom:0;left:0;height:2px;-webkit-transition:all .3s ease-out;transition:all .3s ease-out;background:#ffff86}.app{padding-top:40px}.app>.header{width:100%;z-index:99;height:60px;background:#fff;position:fixed;top:0;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center}.app>.header .logo{padding-left:30px}.app>.header nav li{display:inline-block;margin:0 20px}.app>.header a{color:rgba(0,0,0,.56)}.app>.main{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;padding:60px 35px}.app>.main .sidebar{position:fixed}.app>.main .sidebar span{font-size:18px;color:#7f8c8d}.app>.main .sidebar span.active{color:#42b983}.app>.main .sidebar ul{padding-left:20px;line-height:30px}.app>.main .sidebar ul a{color:#34495e}.app>.main .sidebar ul a.active{color:#42b983}.app>.main .page-main{margin:0 auto;width:60%}.app h3{margin:3em 0 1.2em}.app h3:first-child{margin-top:8px}.app h1,.app h2,.app h3,.app h4,.app strong{font-weight:600;color:#2c3e50}.app .example{display:block;margin:10px 0;padding:5px 20px} 2 | /*# sourceMappingURL=app.c9f001167ed2501cdbb85da626973963.css.map*/ -------------------------------------------------------------------------------- /dist/static/app.c9f001167ed2501cdbb85da626973963.css.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":["webpack:///webpack:///example/example-code.vue","webpack:///webpack:///example/components/avatar.vue","webpack:///webpack:///src/avatar/avatar.vue","webpack:///webpack:///src/buttons/buttons.vue","webpack:///webpack:///src/checkbox/checkbox.vue","webpack:///webpack:///src/datePicker/datePicker.vue","webpack:///webpack:///src/datePicker/components/header.vue","webpack:///webpack:///src/datePicker/components/footer.vue","webpack:///webpack:///src/datePicker/components/pickMonth.vue","webpack:///webpack:///src/datePicker/components/pickDate.vue","webpack:///webpack:///src/datePicker/components/pickYear.vue","webpack:///webpack:///example/components/dialog.vue","webpack:///webpack:///src/dialog/dialog.vue","webpack:///webpack:///src/input/input.vue","webpack:///webpack:///src/pagination/pagination.vue","webpack:///webpack:///src/search/search.vue","webpack:///webpack:///src/select/select.vue","webpack:///webpack:///example/components/tooltips.vue","webpack:///webpack:///src/tooltips/tooltips.vue","webpack:///webpack:///src/snackbar/snackbar.vue","webpack:///webpack:///src/tables/tables.vue","webpack:///webpack:///src/tabs/tabs.vue","webpack:///webpack:///example/App.vue"],"names":[],"mappings":"AAAA,SAAS,eAAe,yBAAyB,mCAAmC,cAAc,gEAAwE,CAAC,IAAI,gBAAgB,CAAC,qCAAqC,aAAa,CAAC,4BAA4B,aAAa,CAAC,yBAAyB,aAAa,CAAC,yIAAyI,aAAa,CAAC,uDAAuD,aAAa,CAAC,WAAW,aAAa,CAAC,kbAAkb,aAAa,CAAC,2JAA2J,aAAa,CAAC,cAAc,aAAa,CAAC,2IAA2I,UAAU,CCCn1C,kBACE,aAAe,CCFjB,kBAAkB,oBAAoB,CAAC,gCAAgC,iBAAiB,WAAW,WAAW,CAAC,wCAAwC,cAAc,CAAC,gCAAgC,iBAAiB,WAAW,WAAW,CAAC,wCAAwC,cAAc,CAAC,0BAA0B,YAAY,iBAAiB,qBAAqB,sBAAsB,WAAW,YAAY,kBAAkB,sBAAsB,WAAW,iBAAiB,CAAC,oCAAoC,wBAAwB,CAAC,+BAA+B,cAAc,WAAW,YAAY,kBAAkB,4BAA4B,uBAA0B,CAAC,kCAAkC,cAAc,CCA7tB,kBAAkB,eAAe,CAAC,0BAA0B,kBAAkB,cAAc,UAAU,WAAW,6BAA6B,qBAAqB,qCAAqC,6BAA6B,UAAU,kBAAkB,eAAe,CAAC,iCAAiC,GAAK,2BAA2B,mBAAmB,UAAU,CAAC,GAAG,6BAA6B,qBAAqB,SAAS,CAAC,CAAC,yBAAyB,GAAK,2BAA2B,mBAAmB,UAAU,CAAC,GAAG,6BAA6B,qBAAqB,SAAS,CAAC,CCAtkB,oBAAoB,cAAc,CAAC,2CAA2C,YAAY,CAAC,0CAA0C,mCAAoC,wBAAwB,CAAC,4BAA4B,kBAAkB,QAAQ,SAAS,cAAc,UAAU,WAAW,YAAY,4BAA4B,oBAAoB,sCAAsC,8BAA8B,UAAU,kBAAkB,yBAA0B,CAAC,mCAAmC,GAAK,2BAA2B,mBAAmB,UAAU,CAAC,GAAG,4BAA4B,oBAAoB,SAAS,CAAC,CAAC,2BAA2B,GAAK,2BAA2B,mBAAmB,UAAU,CAAC,GAAG,4BAA4B,oBAAoB,SAAS,CAAC,CCAhxB,aAAa,eAAe,YAAY,MAAM,OAAO,WAAW,YAAY,oCAAoC,4BAA4B,+BAAgC,CAAC,kCAAkC,kBAAkB,QAAQ,MAAM,CAAC,yDAAyD,YAAY,YAAY,cAAc,yBAAyB,gCAAgC,wBAAwB,kBAAkB,kBAAkB,gBAAgB,kEAAoE,CAAC,gDAAgD,SAAS,CAAC,8FAA8F,6BAA6B,oBAAoB,CCAluB,0BAA0B,YAAY,aAAa,gBAAgB,kBAAkB,CAAC,0DAA0D,yBAA4B,cAAc,CAAC,6BAA6B,gBAAgB,QAAQ,CAAC,qCAAqC,gBAAgB,WAAW,CAAC,gCAAgC,gBAAgB,YAAY,eAAiB,CAAC,mCAAmC,eAAe,QAAQ,CAAC,kCAAkC,4BAA4B,mBAAmB,CAAC,oCAAoC,8BAA8B,qBAAqB,CAAC,kCAAkC,UAAU,CAAC,yBAAyB,GAAG,mCAAmC,CAAC,GAAK,+BAA+B,CAAC,CAAC,2BAA2B,GAAG,kCAAkC,CAAC,GAAK,+BAA+B,CAAC,CCA91B,0BAA0B,uBAA4B,gBAAgB,CAAC,iCAAiC,iBAAiB,eAAe,UAAU,cAAc,YAAY,sBAAsB,CAAC,uCAAuC,4CAA4C,oCAAoC,UAAU,CAAC,uCAAuC,YAAY,CAAC,+BAA+B,GAAG,6BAA8B,CAAC,GAAK,6BAA8B,CAAC,CCA9d,2BAA2B,cAAc,oBAAoB,qBAAqB,oBAAoB,aAAa,mBAAqB,wBAAwB,+BAA+B,qBAAqB,sBAAsB,CAAC,iCAAiC,SAAS,CAAC,qCAAqC,eAAe,iCAAiC,CAAC,oBAAoB,YAAY,cAAc,CCA1Z,0BAA0B,cAAc,YAAY,cAAc,iBAAiB,yBAAyB,kBAAkB,aAAa,CAAC,uCAAuC,eAAe,oBAAoB,qBAAqB,oBAAoB,aAAa,eAAe,cAAc,qCAAqC,yBAAyB,4BAA4B,CAAC,gCAAgC,cAAc,cAAc,eAAe,CAAC,mCAAmC,oBAAoB,qBAAqB,oBAAoB,aAAa,qCAAqC,yBAAyB,4BAA4B,CAAC,sDAAsD,SAAS,eAAe,UAAU,aAAa,CAAC,sCAAsC,eAAe,iBAAiB,qBAAqB,WAAW,YAAY,aAAa,eAAe,kBAAkB,0BAA0B,CAAC,+CAA+C,eAAe,aAAa,CAAC,4CAA4C,gBAAiB,aAAa,CAAC,+CAA+C,WAAW,kBAAkB,CAAC,0EAA0E,kBAAkB,UAAU,UAAU,CAAC,gFAAiF,kBAAkB,WAAW,MAAM,cAAc,WAAW,YAAY,WAAW,gCAAuC,wBAA+B,qCAAqC,6BAA6B,kBAAkB,6BAA8B,CAAC,uBAAuB,eAAe,CAAC,wBAAwB,gCAAgC,uBAAuB,CAAC,uBAAuB,+BAA+B,sBAAsB,CAAC,4BAA4B,GAAG,mCAAmC,CAAC,GAAK,+BAA+B,CAAC,CAAC,kCAAkC,GAAG,4BAA6B,mBAAoB,CAAC,GAAK,2BAA2B,kBAAkB,CAAC,CAAC,6BAA6B,GAAG,kCAAkC,CAAC,GAAK,+BAA+B,CAAC,CCA3oE,0BAA0B,gBAAgB,kBAAkB,aAAa,gBAAgB,CAAC,6CAA6C,YAAY,CAAC,6BAA6B,SAAS,UAAU,eAAe,CAAC,gCAAgC,eAAe,cAAc,cAAc,CAAC,uCAAuC,eAAe,gBAAgB,aAAa,aAAa,CCAhY,oCAAoC,WAAW,CCA/C,kBAAkB,eAAe,aAAa,MAAM,OAAO,cAAc,WAAW,YAAY,oCAAoC,4BAA4B,gCAAiC,CAAC,+BAA+B,mBAAmB,qBAAqB,CAAC,iDAAiD,kBAAkB,aAAa,cAAc,gCAAgC,wBAAwB,kBAAkB,sBAAsB,wBAAwB,+BAA+B,qBAAqB,uBAAuB,yBAAyB,2BAA2B,sBAAsB,0BAA0B,mBAAmB,yGAA4G,CAAC,iEAAiE,uBAA4B,qBAAsB,CAAC,iEAAiE,oBAAoB,qBAAqB,oBAAoB,aAAa,8BAA8B,8BAA8B,mCAAmC,+BAA+B,2BAA2B,uBAAuB,mBAAmB,cAAc,CAAC,8DAA8D,SAAS,CAAC,kGAAkG,6BAA6B,oBAAoB,CCA37C,qXAAiY,UAAU,eAAe,CAAyD,2CAAvC,kBAAkB,oBAAoB,CAA6P,0BAAlO,eAAe,iBAAwD,sBAAsB,WAAW,YAAY,mBAAmB,kBAAkB,YAAY,gCAAgC,aAAa,eAAe,CAAC,qDAAqD,eAAe,qBAAyB,CAAC,uFAA2F,kBAAkB,CAAC,sEAAsE,mBAAmB,cAAc,0BAA0B,CAAC,+IAAmJ,kBAAkB,CAAC,+IAAmJ,kBAAkB,CAAC,sBAAsB,kBAAkB,aAAa,CAAC,yDAAyD,kBAAkB,YAAY,QAAQ,WAAW,WAAW,gCAAgC,wBAAwB,kBAAkB,CAAC,6BAA6B,QAAQ,CAAC,4BAA4B,SAAS,CCA1qD,sBAAsB,eAAe,CAAC,0BAA0B,eAAe,yBAAyB,qBAAqB,CAAC,yCAAyC,sBAAuB,CAAC,oCAAoC,kBAAkB,CAAC,6CAA6C,qBAAsB,CCAzT,kBAAkB,kBAAkB,oBAAoB,qBAAqB,oBAAoB,aAAa,WAAW,YAAY,eAAe,iCAAkC,kBAAkB,wBAAwB,+BAA+B,qBAAqB,uBAAuB,yBAAyB,2BAA2B,sBAAsB,kBAAkB,CAAC,+BAA+B,WAAW,YAAY,iBAAiB,oBAAqB,CAAC,0BAA0B,gBAAgB,UAAU,CAAC,gCAAgC,sBAAsB,iBAAiB,sBAAuB,YAAY,aAAa,uBAAuB,mBAAmB,eAAe,WAAW,MAAM,CAAC,2DAA2D,qBAAsB,CCApvB,kDAAvC,kBAAkB,oBAAoB,CAAoO,gCAAnM,eAAe,iBAAwD,sBAAsB,WAAW,gBAAgB,YAAY,kBAAkB,gCAAgC,YAAY,CAAC,4EAA4E,+BAA+B,CAAC,sHAAsH,aAAa,CAAC,iDAAiD,kBAAkB,UAAU,WAAW,gCAAgC,wBAAwB,qBAAsB,CAAC,qDAAqD,qDAAqD,6CAA6C,qCAAqC,sEAAuE,CAAC,0DAA0D,iCAAiC,wBAAwB,CAAC,4BAA4B,kBAAkB,UAAU,SAAS,gBAAgB,gBAAgB,YAAY,iBAAiB,uCAAuC,+BAA+B,kBAAkB,qBAAqB,CAAC,+CAA+C,eAAe,YAAY,YAAY,wCAAyC,eAAe,CAAC,4DAA4D,WAAW,WAAW,CAAC,+BAA+B,gBAAgB,cAAc,eAAe,mBAAmB,iBAAiB,uBAAuB,qBAAsB,CAAC,gHAAgH,2BAA4B,CAAC,mDAAmD,uCAAuC,8BAA8B,CAAC,4FAA4F,SAAS,SAAS,CCA3gE,oBAAoB,WAAW,qBAAqB,aAAa,CAAC,0BAA0B,UAAU,CCAtG,mBAAmB,kBAAkB,8CAA8C,sCAAsC,8BAA8B,wDAAyD,CAAC,sCAAsC,eAAe,iBAAiB,gBAAgB,YAAY,cAAc,WAAW,WAAW,kBAAkB,kBAAkB,CAAC,kEAAkE,6BAA6B,qBAAqB,SAAS,CCAzf,oBAAoB,eAAe,SAAS,SAAS,oBAAoB,qBAAqB,oBAAoB,aAAa,gBAAgB,gBAAgB,kBAAkB,kCAAkC,0BAA0B,WAAW,kBAAkB,yBAAyB,yBAAyB,sCAAsC,sBAAsB,6BAA6B,CAAC,4BAA4B,iBAAiB,cAAc,CAAC,wCAAwC,uCAAuC,8BAA8B,CAAC,sEAAsE,YAAY,CCAlpB,iBAAiB,kBAAkB,WAAW,cAAc,iBAAiB,iCAAkC,eAAe,CAAC,4BAA4B,iBAAiB,eAAe,CAAC,kCAAkC,WAAW,gBAAgB,CAAC,0EAA0E,eAAe,gBAAgB,iBAAiB,YAAY,eAAe,aAAa,CAAC,qCAAqC,cAAc,SAAS,cAAc,iBAAiB,mBAAmB,kBAAkB,WAAW,CAAC,+CAA+C,mBAAmB,kBAAkB,MAAM,kBAAkB,kBAAkB,sBAAuB,sBAAsB,CAAC,2CAA2C,cAAc,CAAC,8CAA8C,oCAAqC,CAAC,kDAAkD,kBAAkB,CAAC,iDAAiD,eAAe,CCAx+B,gBAAgB,kBAAkB,YAAY,kBAAkB,CAAC,sBAAsB,oBAAoB,qBAAqB,oBAAoB,aAAa,WAAW,YAAY,kBAAkB,yBAAyB,2BAA2B,sBAAsB,kBAAkB,CAAC,iCAAiC,eAAe,yBAA4B,mBAAmB,eAAe,WAAW,MAAM,CAAC,wCAAwC,UAAU,CAAC,2BAA2B,kBAAkB,SAAS,OAAO,WAAW,oCAAoC,4BAA4B,kBAAkB,CCApnB,KAAK,gBAAgB,CAAC,aAAa,WAAW,WAAW,YAAY,gBAAgB,eAAe,MAAM,oBAAoB,qBAAqB,oBAAoB,aAAa,yBAAyB,sCAAsC,sBAAsB,8BAA8B,yBAAyB,2BAA2B,sBAAsB,kBAAkB,CAAC,mBAAmB,iBAAiB,CAAC,oBAAoB,qBAAqB,aAAa,CAAC,eAAe,qBAAsB,CAAC,WAAW,oBAAoB,qBAAqB,oBAAoB,aAAa,iBAAiB,CAAC,oBAAoB,cAAc,CAAC,yBAAyB,eAAe,aAAa,CAAC,gCAAgC,aAAa,CAAC,uBAAuB,kBAAkB,gBAAgB,CAAC,yBAAyB,aAAa,CAAC,gCAAgC,aAAa,CAAC,sBAAsB,cAAc,SAAS,CAAC,QAAQ,kBAAkB,CAAC,oBAAoB,cAAc,CAAC,4CAA4C,gBAAgB,aAAa,CAAC,cAAc,cAAc,cAAc,gBAAgB","file":"static/app.c9f001167ed2501cdbb85da626973963.css","sourcesContent":["code,pre{font-size:14px;background-color:#f8f8f8;-webkit-font-smoothing:antialiased;color:#34495e;font-family:'Source Code Pro', 'Roboto Mono', Monaco, courier, monospace}pre{padding:5px 10px}pre .function .keyword,pre .constant{color:#0092db}pre .keyword,pre .attribute{color:#e96900}pre .number,pre .literal{color:#ae81ff}pre .tag,pre .tag .title,pre .change,pre .winutils,pre .flow,pre .lisp .title,pre .clojure .built_in,pre .nginx .title,pre .tex .special{color:#2973b7}pre .symbol,pre .symbol .string,pre .value,pre .regexp{color:#42b983}pre .title{color:#83b917}pre .tag .value,pre .string,pre .subst,pre .haskell .type,pre .preprocessor,pre .ruby .class .parent,pre .built_in,pre .sql .aggregate,pre .django .template_tag,pre .django .variable,pre .smalltalk .class,pre .javadoc,pre .django .filter .argument,pre .smalltalk .localvars,pre .smalltalk .array,pre .attr_selector,pre .pseudo,pre .addition,pre .stream,pre .envvar,pre .apache .tag,pre .apache .cbracket,pre .tex .command,pre .prompt{color:#42b983}pre .comment,pre .java .annotation,pre .python .decorator,pre .template_comment,pre .pi,pre .doctype,pre .shebang,pre .apache .sqbracket,pre .tex .formula{color:#b3b3b3}pre .deletion{color:#ba4545}pre .coffeescript .javascript,pre .javascript .xml,pre .tex .formula,pre .xml .javascript,pre .xml .vbscript,pre .xml .css,pre .xml .cdata{opacity:.5}\n\n\n\n/** WEBPACK FOOTER **\n ** webpack:///example/example-code.vue\n **/","\n.component-avatar{\n margin: 0 10px;\n}\n\n\n\n/** WEBPACK FOOTER **\n ** webpack:///example/components/avatar.vue\n **/",".component-avatar{display:inline-block}.component-avatar.large .avatar{line-height:60px;width:60px;height:60px}.component-avatar.large .avatar .letter{font-size:26px}.component-avatar.small .avatar{line-height:24px;width:24px;height:24px}.component-avatar.small .avatar .letter{font-size:12px}.component-avatar .avatar{font-size:0;line-height:41px;display:inline-block;box-sizing:border-box;width:41px;height:41px;text-align:center;vertical-align:middle;color:#fff;border-radius:50%}.component-avatar .avatar.is-letter{background-color:#0884ce}.component-avatar .avatar .img{display:block;width:100%;height:100%;border-radius:50%;background-repeat:no-repeat;background-position:center}.component-avatar .avatar .letter{font-size:18px}\n\n\n\n/** WEBPACK FOOTER **\n ** webpack:///src/avatar/avatar.vue\n **/",".component-button{overflow:hidden}.component-button .ripple{position:absolute;display:block;width:4px;height:4px;-webkit-transform:scale(100);transform:scale(100);-webkit-animation:button-ripple 1.4s;animation:button-ripple 1.4s;opacity:0;border-radius:50%;background:#fff}@-webkit-keyframes button-ripple{from{-webkit-transform:scale(0);transform:scale(0);opacity:.5}to{-webkit-transform:scale(100);transform:scale(100);opacity:0}}@keyframes button-ripple{from{-webkit-transform:scale(0);transform:scale(0);opacity:.5}to{-webkit-transform:scale(100);transform:scale(100);opacity:0}}\n\n\n\n/** WEBPACK FOOTER **\n ** webpack:///src/buttons/buttons.vue\n **/",".component-checkbox{cursor:pointer}.component-checkbox.disabled .checkbox-tag{display:none}.component-checkbox.disabled .checkbox-bd{border:2px solid #c1c1c1 !important;background-color:#c1c1c1}.component-checkbox .ripple{position:absolute;top:50%;left:50%;display:block;width:4px;height:4px;margin:-2px;-webkit-transform:scale(13);transform:scale(13);-webkit-animation:checkbox-ripple .8s;animation:checkbox-ripple .8s;opacity:0;border-radius:50%;background:rgba(0,0,0,0.5)}@-webkit-keyframes checkbox-ripple{from{-webkit-transform:scale(0);transform:scale(0);opacity:.5}to{-webkit-transform:scale(13);transform:scale(13);opacity:0}}@keyframes checkbox-ripple{from{-webkit-transform:scale(0);transform:scale(0);opacity:.5}to{-webkit-transform:scale(13);transform:scale(13);opacity:0}}\n\n\n\n/** WEBPACK FOOTER **\n ** webpack:///src/checkbox/checkbox.vue\n **/",".date-picker{position:fixed;z-index:998;top:0;left:0;width:100%;height:100%;-webkit-transition:opacity .3s ease;transition:opacity .3s ease;background-color:rgba(0,0,0,0.5)}.date-picker .date-picker-wrapper{position:absolute;right:0;left:0}.date-picker .date-picker-wrapper .date-picker-container{z-index:999;width:320px;margin:0 auto;-webkit-user-select:none;-webkit-transition:all .3s ease;transition:all .3s ease;text-align:center;border-radius:2px;background:#fff;box-shadow:0 14px 45px rgba(0,0,0,0.25),0 10px 18px rgba(0,0,0,0.22)}.date-picker.date-enter,.date-picker.date-leave{opacity:0}.date-picker.date-enter .date-picker-container,.date-picker.date-leave .date-picker-container{-webkit-transform:scale(1.1);transform:scale(1.1)}\n\n\n\n/** WEBPACK FOOTER **\n ** webpack:///src/datePicker/datePicker.vue\n **/",".date-picker .date-header{height:72px;padding:20px;text-align:left;background:#0884ce}.date-picker .date-header h4,.date-picker .date-header h2{color:rgba(255,255,255,0.7);cursor:pointer}.date-picker .date-header h4{font-weight:400;margin:0}.date-picker .date-header .date-year{overflow:hidden;height:16px}.date-picker .date-header .date{overflow:hidden;height:40px;margin:15px 0 0 0}.date-picker .date-header .date h2{font-size:36px;margin:0}.date-picker .date-header .ani-up{-webkit-animation:runUp .4s;animation:runUp .4s}.date-picker .date-header .ani-down{-webkit-animation:runDown .4s;animation:runDown .4s}.date-picker .date-header .active{color:#fff}@-webkit-keyframes runUp{0%{-webkit-transform:translateY(-20px)}100%{-webkit-transform:translateY(0)}}@-webkit-keyframes runDown{0%{-webkit-transform:translateY(20px)}100%{-webkit-transform:translateY(0)}}\n\n\n\n/** WEBPACK FOOTER **\n ** webpack:///src/datePicker/components/header.vue\n **/",".date-picker .date-footer{padding:15px 10px 10px 10px;text-align:right}.date-picker .date-footer button{padding:8px 20px;cursor:pointer;color:red;color:#0884ce;border:none;background:transparent}.date-picker .date-footer button:hover{-webkit-animation:btn-fade-in .5s ease both;animation:btn-fade-in .5s ease both;color:#fff}.date-picker .date-footer button:focus{outline:none}@-webkit-keyframes btn-fade-in{0%{background:rgba(9,148,231,0.1)}100%{background:rgba(9,148,231,0.5)}}\n\n\n\n/** WEBPACK FOOTER **\n ** webpack:///src/datePicker/components/footer.vue\n **/",".date-picker .select-month{display:block;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;padding:10px 0 5px 0;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center}.date-picker .select-month .date{width:77%}.date-picker .select-month .disabled{cursor:default;box-shadow:2px -2px #dce0e5 inset}.date-picker .arrow{padding:5px;cursor:pointer}\n\n\n\n/** WEBPACK FOOTER **\n ** webpack:///src/datePicker/components/pickMonth.vue\n **/",".date-picker .select-date{width:inherit;width:300px;margin:0 auto;border-spacing:0;border-collapse:collapse;text-align:center;color:#4e647b}.date-picker .select-date .week-header{font-size:12px;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;padding:10px 0;color:#a5a5a5;-webkit-justify-content:space-around;-ms-flex-pack:distribute;justify-content:space-around}.date-picker .select-date tbody{display:block;width:inherit;margin-top:10px}.date-picker .select-date tbody tr{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-justify-content:space-around;-ms-flex-pack:distribute;justify-content:space-around}.date-picker .select-date tbody tr .not-current-month{height:0;cursor:default;opacity:0;color:#a7b2bd}.date-picker .select-date tbody tr td{font-size:12px;line-height:36px;display:inline-block;width:36px;height:36px;margin:2px 0;cursor:pointer;border-radius:50%;-webkit-touch-callout:none}.date-picker .select-date tbody tr td.disabled{cursor:default;color:#dce0e5}.date-picker .select-date tbody tr td.today{font-weight:bold;color:#0884ce}.date-picker .select-date tbody tr td.selected{color:#fff;background:#0884ce}.date-picker .select-date tbody tr td:not(.selected):not(.disabled):hover{position:relative;z-index:1;color:#fff}.date-picker .select-date tbody tr td:not(.selected):not(.disabled):hover::after{position:absolute;z-index:-1;top:0;display:block;width:36px;height:36px;content:'';-webkit-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0);-webkit-animation:dateBackground .3s;animation:dateBackground .3s;border-radius:50%;background:rgba(8,132,206,0.7)}.date-right,.date-left{overflow:hidden}.date-right .date-enter{-webkit-animation:dateRight .5s;animation:dateRight .5s}.date-left .date-enter{-webkit-animation:dateLeft .5s;animation:dateLeft .5s}@-webkit-keyframes dateLeft{0%{-webkit-transform:translateX(-40px)}100%{-webkit-transform:translateX(0)}}@-webkit-keyframes dateBackground{0%{-webkit-transform:scale(0.2);transform:scale(0.2)}100%{-webkit-transform:scale(1);transform:scale(1)}}@-webkit-keyframes dateRight{0%{-webkit-transform:translateX(40px)}100%{-webkit-transform:translateX(0)}}\n\n\n\n/** WEBPACK FOOTER **\n ** webpack:///src/datePicker/components/pickDate.vue\n **/",".date-picker .select-year{overflow:hidden;overflow-y:scroll;height:290px;padding-top:10px}.date-picker .select-year::-webkit-scrollbar{display:none}.date-picker .select-year ol{margin:0;padding:0;list-style:none}.date-picker .select-year ol li{font-size:18px;padding:6px 0;cursor:pointer}.date-picker .select-year ol li.active{font-size:22px;font-weight:800;margin:5px 0;color:#0884ce}\n\n\n\n/** WEBPACK FOOTER **\n ** webpack:///src/datePicker/components/pickYear.vue\n **/",".component-dialog .dialog-container{width:360px}\n\n\n\n/** WEBPACK FOOTER **\n ** webpack:///example/components/dialog.vue\n **/",".component-dialog{position:fixed;z-index:9998;top:0;left:0;display:table;width:100%;height:100%;-webkit-transition:opacity .3s ease;transition:opacity .3s ease;background-color:rgba(0,0,0,0.15)}.component-dialog .dialog-wrap{display:table-cell;vertical-align:middle}.component-dialog .dialog-wrap .dialog-container{position:relative;padding:14px;margin:0 auto;-webkit-transition:all .3s ease;transition:all .3s ease;border-radius:2px;background-color:#fff;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;-ms-grid-row-align:center;align-items:center;box-shadow:0 9px 46px 8px rgba(0,0,0,0.14),0 11px 15px -7px rgba(0,0,0,0.12),0 24px 38px 3px rgba(0,0,0,0.2)}.component-dialog .dialog-wrap .dialog-container .dialog-content{padding:20px 24px 24px 24px;color:rgba(0,0,0,0.54)}.component-dialog .dialog-wrap .dialog-container .dialog-actions{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:reverse;-webkit-flex-direction:row-reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap}.component-dialog.dialog-enter,.component-dialog.dialog-leave{opacity:0}.component-dialog.dialog-enter .dialog-container,.component-dialog.dialog-leave .dialog-container{-webkit-transform:scale(1.1);transform:scale(1.1)}\n\n\n\n/** WEBPACK FOOTER **\n ** webpack:///src/dialog/dialog.vue\n **/",".component-input .m-input.error ~ .bar:before,.component-input .m-input.error ~ .bar:after,.component-input .m-input:not([readonly]):not(.error):focus ~ .bar:before,.component-input .m-input:not([readonly]):not(.error):focus ~ .bar:after,.component-input .m-input:not([readonly]):not(.error):valid ~ .bar:before,.component-input .m-input:not([readonly]):not(.error):valid ~ .bar:after{width:50%;border-bottom:0}.component-input{position:relative;display:inline-block}.component-input .m-input{font-size:16px;line-height:32px;position:relative;display:inline-block;box-sizing:border-box;width:100%;height:32px;padding-bottom:1px;padding-left:10px;border:none;border-bottom:1px solid #e0e0e0;outline:none;background:none}.component-input .m-input::-webkit-input-placeholder{font-size:12px;color:rbga(0, 0, 0, 0.38)}.component-input .m-input.error ~ .bar:before,.component-input .m-input.error ~ .bar:after{background:#f44b45}.component-input .m-input:disabled,.component-input .m-input.disabled{cursor:not-allowed;color:#b2b2b2;border-bottom-style:dotted}.component-input .m-input:not([readonly]):not(.error):focus ~ .bar:before,.component-input .m-input:not([readonly]):not(.error):focus ~ .bar:after{background:#3c80f6}.component-input .m-input:not([readonly]):not(.error):valid ~ .bar:before,.component-input .m-input:not([readonly]):not(.error):valid ~ .bar:after{background:#42b68a}.component-input .bar{position:relative;display:block}.component-input .bar:before,.component-input .bar:after{position:absolute;bottom:.5px;width:0;height:2px;content:'';-webkit-transition:.2s ease all;transition:.2s ease all;background:#3c80f6}.component-input .bar:before{left:50%}.component-input .bar:after{right:50%}\n\n\n\n/** WEBPACK FOOTER **\n ** webpack:///src/input/input.vue\n **/",".component-pagination{margin-top:20px}.component-pagination svg{cursor:pointer;-webkit-user-select:none;vertical-align:middle}.component-pagination svg:hover polyline{stroke:rgba(0,0,0,0.87)}.component-pagination .disabled svg{cursor:not-allowed}.component-pagination .disabled svg polyline{stroke:rgba(0,0,0,0.3)}\n\n\n\n/** WEBPACK FOOTER **\n ** webpack:///src/pagination/pagination.vue\n **/",".component-search{position:relative;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;width:100%;height:100%;padding:10px 0;border:1px solid rgba(0,0,0,0.16);border-radius:2px;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center}.component-search .search-icon{width:15px;height:15px;margin-left:10px;fill:rgba(0,0,0,0.56)}.component-search .search{margin:auto 8px;color:#fff}.component-search .search-input{box-sizing:border-box;text-indent:10px;color:rgba(0,0,0,0.56);border:none;outline:none;background:transparent;-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1}.component-search .search-input::-webkit-input-placeholder{color:rgba(0,0,0,0.56)}\n\n\n\n/** WEBPACK FOOTER **\n ** webpack:///src/search/search.vue\n **/",".component-select{position:relative;display:inline-block}.component-select .select-input{font-size:16px;line-height:32px;position:relative;display:inline-block;box-sizing:border-box;width:100%;min-width:180px;height:32px;padding-left:10px;border-bottom:1px solid #e0e0e0;outline:none}.component-select .select-input:focus,.component-select .select-input:hover{border-bottom:2px solid #3c80f6}.component-select .select-input:focus .select-triangle svg,.component-select .select-input:hover .select-triangle svg{color:#3c80f6}.component-select .select-input .select-triangle{position:absolute;right:5px;width:12px;-webkit-transform:rotate(90deg);transform:rotate(90deg);color:rgba(0,0,0,0.54)}.component-select .select-input .select-triangle svg{-webkit-transition:-webkit-transform .3s ease-in-out;transition:-webkit-transform .3s ease-in-out;transition:transform .3s ease-in-out;transition:transform .3s ease-in-out, -webkit-transform .3s ease-in-out}.component-select .select-input .select-triangle.open svg{-webkit-transform:rotate(180deg);transform:rotate(180deg)}.component-select .list-box{position:absolute;z-index:1;top:32px;overflow:hidden;overflow-y:auto;width:180px;max-height:300px;-webkit-transition:all .3s ease-in-out;transition:all .3s ease-in-out;border-radius:2px;background-color:#fff}.component-select .list-box .select-search-bar{font-size:12px;height:10px;border:none;border-bottom:1px solid rgba(0,0,0,0.16);border-radius:0}.component-select .list-box .select-search-bar .search-icon{width:12px;height:12px}.component-select .list-box li{overflow:hidden;padding:5px 0;cursor:pointer;white-space:nowrap;text-indent:20px;text-overflow:ellipsis;color:rgba(0,0,0,0.87)}.component-select .list-box li:focus,.component-select .list-box li:hover,.component-select .list-box li.active{background:rgba(0,0,0,0.031)}.component-select .list-box.select-list-transition{-webkit-transition:all .3s ease-in-out;transition:all .3s ease-in-out}.component-select .list-box.select-list-enter,.component-select .list-box.select-list-leave{height:0;opacity:0}\n\n\n\n/** WEBPACK FOOTER **\n ** webpack:///src/select/select.vue\n **/",".example-tooltips a{color:#000;display:inline-block;margin:0 20px}.example-tooltips a:hover{color:#000}\n\n\n\n/** WEBPACK FOOTER **\n ** webpack:///example/components/tooltips.vue\n **/",".component-tooltip{position:absolute;-webkit-transition:-webkit-transform .3s ease;transition:-webkit-transform .3s ease;transition:transform .3s ease;transition:transform .3s ease, -webkit-transform .3s ease}.component-tooltip .tooltip-container{font-size:10px;line-height:22px;overflow:hidden;height:22px;padding:0 8px;opacity:.9;color:#fff;border-radius:2px;background:#747474}.component-tooltip.tooltip-enter,.component-tooltip.tooltip-leave{-webkit-transform:scale(1.1);transform:scale(1.1);opacity:0}\n\n\n\n/** WEBPACK FOOTER **\n ** webpack:///src/tooltips/tooltips.vue\n **/",".component-snackbar{position:fixed;bottom:0;left:50%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;min-width:288px;max-width:568px;padding:14px 24px;-webkit-transform:translate(-50%);transform:translate(-50%);color:#fff;border-radius:2px;background-color:#323232;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between}.component-snackbar .action{margin-left:48px;cursor:pointer}.component-snackbar.snackbar-transition{-webkit-transition:all .3s ease-in-out;transition:all .3s ease-in-out}.component-snackbar.snackbar-enter,.component-snackbar.snackbar-leave{bottom:-50px}\n\n\n\n/** WEBPACK FOOTER **\n ** webpack:///src/snackbar/snackbar.vue\n **/",".component-table{position:relative;width:100%;margin:0 auto;padding-top:48px;border:1px solid rgba(0,0,0,0.12);background:#fff}.component-table>.container{max-height:300px;overflow-y:auto}.component-table>.container table{width:100%;border-spacing:0}.component-table>.container table td,.component-table>.container table th{font-size:14px;font-weight:100;line-height:48px;height:48px;padding:0 25px;color:#757575}.component-table>.container table th{line-height:0;height:0;padding-top:0;padding-bottom:0;white-space:nowrap;color:transparent;border:none}.component-table>.container table thead th>div{line-height:normal;position:absolute;top:0;margin-left:-25px;padding:15px 25px;color:rgba(0,0,0,0.54);background:transparent}.component-table>.container table tbody tr{cursor:pointer}.component-table>.container table tbody tr td{border-top:1px solid rgba(0,0,0,0.12)}.component-table>.container table tbody tr.active{background:#f5f5f5}.component-table>.container table tbody tr:hover{background:#eee}\n\n\n\n/** WEBPACK FOOTER **\n ** webpack:///src/tables/tables.vue\n **/",".component-tabs{position:relative;height:48px;background:#3993e5}.component-tabs .tabs{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;width:100%;height:100%;text-align:center;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center}.component-tabs .tabs .tabs-item{cursor:pointer;color:rgba(255,255,255,0.7);-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1}.component-tabs .tabs .tabs-item.active{color:#fff}.component-tabs .indicator{position:absolute;bottom:0;left:0;height:2px;-webkit-transition:all .3s ease-out;transition:all .3s ease-out;background:#ffff86}\n\n\n\n/** WEBPACK FOOTER **\n ** webpack:///src/tabs/tabs.vue\n **/",".app{padding-top:40px}.app>.header{width:100%;z-index:99;height:60px;background:#fff;position:fixed;top:0;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center}.app>.header .logo{padding-left:30px}.app>.header nav li{display:inline-block;margin:0 20px}.app>.header a{color:rgba(0,0,0,0.56)}.app>.main{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;padding:60px 35px}.app>.main .sidebar{position:fixed}.app>.main .sidebar span{font-size:18px;color:#7f8c8d}.app>.main .sidebar span.active{color:#42b983}.app>.main .sidebar ul{padding-left:20px;line-height:30px}.app>.main .sidebar ul a{color:#34495e}.app>.main .sidebar ul a.active{color:#42b983}.app>.main .page-main{margin:0 auto;width:60%}.app h3{margin:3em 0 1.2em}.app h3:first-child{margin-top:8px}.app h1,.app h2,.app h3,.app h4,.app strong{font-weight:600;color:#2c3e50}.app .example{display:block;margin:10px 0;padding:5px 20px}\n\n\n\n/** WEBPACK FOOTER **\n ** webpack:///example/App.vue\n **/"],"sourceRoot":""} -------------------------------------------------------------------------------- /example/.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules/ 3 | dist/ 4 | npm-debug.log 5 | selenium-debug.log 6 | test/unit/coverage 7 | test/e2e/reports 8 | -------------------------------------------------------------------------------- /example/App.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | 22 | 23 | 95 | -------------------------------------------------------------------------------- /example/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/taoche/vue-material/d6a75840614d4eeed6bbb3bbb3211f2db90d0826/example/assets/logo.png -------------------------------------------------------------------------------- /example/components/avatar.vue: -------------------------------------------------------------------------------- 1 | 20 | 21 | 38 | 39 | 44 | -------------------------------------------------------------------------------- /example/components/buttons.vue: -------------------------------------------------------------------------------- 1 | 80 | 81 | 98 | -------------------------------------------------------------------------------- /example/components/card.vue: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/taoche/vue-material/d6a75840614d4eeed6bbb3bbb3211f2db90d0826/example/components/card.vue -------------------------------------------------------------------------------- /example/components/checkbox.vue: -------------------------------------------------------------------------------- 1 | 52 | 53 | 76 | 77 | 80 | -------------------------------------------------------------------------------- /example/components/datePicker.vue: -------------------------------------------------------------------------------- 1 | 19 | 20 | 38 | 39 | 41 | -------------------------------------------------------------------------------- /example/components/dialog.vue: -------------------------------------------------------------------------------- 1 | 49 | 50 | 68 | 69 | 76 | -------------------------------------------------------------------------------- /example/components/input.vue: -------------------------------------------------------------------------------- 1 | 35 | 36 | 53 | 54 | 56 | -------------------------------------------------------------------------------- /example/components/layout.vue: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/taoche/vue-material/d6a75840614d4eeed6bbb3bbb3211f2db90d0826/example/components/layout.vue -------------------------------------------------------------------------------- /example/components/lists.vue: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/taoche/vue-material/d6a75840614d4eeed6bbb3bbb3211f2db90d0826/example/components/lists.vue -------------------------------------------------------------------------------- /example/components/menu.vue: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/taoche/vue-material/d6a75840614d4eeed6bbb3bbb3211f2db90d0826/example/components/menu.vue -------------------------------------------------------------------------------- /example/components/pagination.vue: -------------------------------------------------------------------------------- 1 | 43 | 44 | 66 | 67 | 70 | -------------------------------------------------------------------------------- /example/components/radio.vue: -------------------------------------------------------------------------------- 1 | 26 | 27 | 45 | 46 | 51 | -------------------------------------------------------------------------------- /example/components/radioGroup.vue: -------------------------------------------------------------------------------- 1 | 26 | 27 | 55 | 56 | 61 | -------------------------------------------------------------------------------- /example/components/search.vue: -------------------------------------------------------------------------------- 1 | 26 | 27 | 44 | 45 | 47 | -------------------------------------------------------------------------------- /example/components/select.vue: -------------------------------------------------------------------------------- 1 | 45 | 46 | 66 | 67 | 69 | -------------------------------------------------------------------------------- /example/components/snackbar.vue: -------------------------------------------------------------------------------- 1 | 36 | 37 | 59 | 60 | 62 | -------------------------------------------------------------------------------- /example/components/spinner.vue: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/taoche/vue-material/d6a75840614d4eeed6bbb3bbb3211f2db90d0826/example/components/spinner.vue -------------------------------------------------------------------------------- /example/components/switch.vue: -------------------------------------------------------------------------------- 1 | 42 | 43 | 70 | 71 | 73 | -------------------------------------------------------------------------------- /example/components/tables.vue: -------------------------------------------------------------------------------- 1 | 107 | 108 | 195 | -------------------------------------------------------------------------------- /example/components/tabs.vue: -------------------------------------------------------------------------------- 1 | 30 | 31 | 49 | 50 | 52 | -------------------------------------------------------------------------------- /example/components/toolbar.vue: -------------------------------------------------------------------------------- 1 | a 7 | 8 | 24 | 25 | 27 | -------------------------------------------------------------------------------- /example/components/tooltips.vue: -------------------------------------------------------------------------------- 1 | 26 | 27 | 61 | 62 | 75 | -------------------------------------------------------------------------------- /example/example-code.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 31 | 32 | 136 | -------------------------------------------------------------------------------- /example/header.vue: -------------------------------------------------------------------------------- 1 | 22 | 23 | 28 | -------------------------------------------------------------------------------- /example/home.vue: -------------------------------------------------------------------------------- 1 | 16 | 17 | 27 | -------------------------------------------------------------------------------- /example/main.js: -------------------------------------------------------------------------------- 1 | import 'babel-polyfill' 2 | import Vue from 'vue' 3 | import VueRouter from 'vue-router' 4 | import { configRouter } from './route-config' 5 | 6 | import App from './App' 7 | 8 | // styles 9 | require('lancer-css/src/application.scss') 10 | 11 | Vue.config.debug = true 12 | 13 | // install router 14 | Vue.use(VueRouter) 15 | 16 | // create router 17 | const router = new VueRouter({ 18 | history: false, 19 | saveScrollPosition: true 20 | }) 21 | 22 | // configure router 23 | configRouter(router) 24 | 25 | router.beforeEach(function () { 26 | window.scrollTo(0, 0) 27 | }) 28 | 29 | router.redirect({ 30 | '*': '/home' 31 | }) 32 | 33 | router.start(App, 'app') 34 | -------------------------------------------------------------------------------- /example/readme.md: -------------------------------------------------------------------------------- 1 | # example 2 | 3 | > A Vue.js project 4 | 5 | ## Build Setup 6 | 7 | ``` bash 8 | # install dependencies 9 | npm install 10 | 11 | # serve with hot reload at localhost:8080 12 | npm run dev 13 | 14 | # build for production with minification 15 | npm run build 16 | 17 | # run unit tests 18 | npm run unit 19 | 20 | # run e2e tests 21 | npm run e2e 22 | 23 | # run all tests 24 | npm test 25 | ``` 26 | 27 | For detailed explanation on how things work, checkout the [guide](https://github.com/vuejs-templates/webpack#vue-webpack-boilerplate) and [docs for vue-loader](http://vuejs.github.io/vue-loader). 28 | -------------------------------------------------------------------------------- /example/route-config.js: -------------------------------------------------------------------------------- 1 | export function configRouter (router) { 2 | router.map({ 3 | '/home': { 4 | name: 'home', 5 | component: require('./home') 6 | }, 7 | '/avatar': { 8 | name: 'avatar', 9 | component: require('./components/avatar') 10 | }, 11 | '/buttons': { 12 | name: 'buttons', 13 | component: require('./components/buttons') 14 | }, 15 | '/checkbox': { 16 | name: 'checkbox', 17 | component: require('./components/checkbox') 18 | }, 19 | '/datePicker': { 20 | name: 'datePicker', 21 | component: require('./components/datePicker') 22 | }, 23 | '/dialog': { 24 | name: 'dialog', 25 | component: require('./components/dialog') 26 | }, 27 | '/input': { 28 | name: 'input', 29 | component: require('./components/input') 30 | }, 31 | '/pagination': { 32 | name: 'pagination', 33 | component: require('./components/pagination') 34 | }, 35 | '/radio': { 36 | name: 'radio', 37 | component: require('./components/radio') 38 | }, 39 | '/radioGroup': { 40 | name: 'radioGroup', 41 | component: require('./components/radioGroup') 42 | }, 43 | '/search': { 44 | name: 'search', 45 | component: require('./components/search') 46 | }, 47 | '/select': { 48 | name: 'select', 49 | component: require('./components/select') 50 | }, 51 | '/switch': { 52 | name: 'switch', 53 | component: require('./components/switch') 54 | }, 55 | '/tooltips': { 56 | name: 'tooltips', 57 | component: require('./components/tooltips') 58 | }, 59 | '/snackbar': { 60 | name: 'snackbar', 61 | component: require('./components/snackbar') 62 | }, 63 | '/tables': { 64 | name: 'tables', 65 | component: require('./components/tables') 66 | }, 67 | '/tabs': { 68 | name: 'tabs', 69 | component: require('./components/tabs') 70 | } 71 | }) 72 | } 73 | -------------------------------------------------------------------------------- /example/sidebar.vue: -------------------------------------------------------------------------------- 1 | 17 | 18 | 36 | -------------------------------------------------------------------------------- /filters/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/taoche/vue-material/d6a75840614d4eeed6bbb3bbb3211f2db90d0826/filters/.gitkeep -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | example 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-material-ui", 3 | "version": "0.0.39-rc9", 4 | "description": "a UI Components use vue and Material Design", 5 | "repository": { 6 | "type": "git", 7 | "url": "taoche/vue-material" 8 | }, 9 | "main": "vue-material.js", 10 | "scripts": { 11 | "dev": "node build/dev-server.js", 12 | "build": "node build/build.js", 13 | "lib": "webpack --progress --hide-modules --config ./build/webpack.publish.conf.js", 14 | "lint": "eslint --ext .js,.vue src test/unit/specs test/e2e/specs" 15 | }, 16 | "devDependencies": { 17 | "babel-core": "^6.0.0", 18 | "babel-eslint": "^6.1.2", 19 | "babel-loader": "^6.0.0", 20 | "babel-plugin-transform-runtime": "^6.0.0", 21 | "babel-polyfill": "^6.7.4", 22 | "babel-preset-es2015": "^6.0.0", 23 | "babel-preset-stage-2": "^6.0.0", 24 | "babel-register": "^6.0.0", 25 | "connect-history-api-fallback": "^1.1.0", 26 | "css-loader": "^0.23.0", 27 | "eslint": "^3.7.1", 28 | "eslint-friendly-formatter": "^2.0.5", 29 | "eslint-loader": "^1.5.0", 30 | "eslint-plugin-html": "^1.3.0", 31 | "eslint-config-standard": "^6.1.0", 32 | "eslint-plugin-promise": "^2.0.1", 33 | "eslint-plugin-standard": "^2.0.1", 34 | "eventsource-polyfill": "^0.9.6", 35 | "express": "^4.13.3", 36 | "extract-text-webpack-plugin": "^1.0.1", 37 | "file-loader": "^0.8.4", 38 | "function-bind": "^1.0.2", 39 | "highlight.js": "^9.2.0", 40 | "html-webpack-plugin": "^2.8.1", 41 | "http-proxy-middleware": "^0.12.0", 42 | "json-loader": "^0.5.4", 43 | "lancer-css": "0.0.9", 44 | "node-sass": "^3.4.2", 45 | "ora": "^0.2.0", 46 | "sass-loader": "^3.0.0", 47 | "shelljs": "^0.6.0", 48 | "showdown": "^1.3.0", 49 | "style-loader": "^0.13.1", 50 | "url-loader": "^0.5.7", 51 | "vue": "^1.0.26", 52 | "vue-hot-reload-api": "^1.2.0", 53 | "vue-html-loader": "^1.0.0", 54 | "vue-loader": "^8.3.0", 55 | "vue-router": "^0.7.11", 56 | "vue-style-loader": "^1.0.0", 57 | "webpack": "^1.12.2", 58 | "webpack-dev-middleware": "^1.4.0", 59 | "webpack-hot-middleware": "^2.6.0", 60 | "webpack-merge": "^0.8.3" 61 | } 62 | } 63 | -------------------------------------------------------------------------------- /readme.md: -------------------------------------------------------------------------------- 1 | ## 基于 Vue.js 与 Material Design 的 UI Components 2 | 3 | #[DEMO](http://www.aruoyi.cn/) 4 | 5 | ### 正在大规模重构，敬请期待.... 6 | 7 | ### 项目在初始阶段 8 | 9 | ### 不建议大家使用在生产环境 10 | -------------------------------------------------------------------------------- /src/avatar/avatar.vue: -------------------------------------------------------------------------------- 1 | 13 | 14 | 25 | 26 | 77 | -------------------------------------------------------------------------------- /src/buttons/buttons.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | 46 | 47 | 74 | -------------------------------------------------------------------------------- /src/card/card.vue: -------------------------------------------------------------------------------- 1 | 23 | 24 | 34 | 35 | 98 | -------------------------------------------------------------------------------- /src/checkbox/checkbox.vue: -------------------------------------------------------------------------------- 1 | 12 | 13 | 42 | 43 | 82 | -------------------------------------------------------------------------------- /src/datePicker/components/footer.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | 26 | 27 | 58 | -------------------------------------------------------------------------------- /src/datePicker/components/header.vue: -------------------------------------------------------------------------------- 1 | 22 | 23 | 70 | 71 | 135 | -------------------------------------------------------------------------------- /src/datePicker/components/pickDate.vue: -------------------------------------------------------------------------------- 1 | 24 | 25 | 108 | 109 | 236 | -------------------------------------------------------------------------------- /src/datePicker/components/pickMonth.vue: -------------------------------------------------------------------------------- 1 | 23 | 24 | 63 | 64 | 89 | -------------------------------------------------------------------------------- /src/datePicker/components/pickYear.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | 41 | 42 | 71 | -------------------------------------------------------------------------------- /src/datePicker/datePicker.vue: -------------------------------------------------------------------------------- 1 | 40 | 41 | 172 | 173 | 208 | -------------------------------------------------------------------------------- /src/dialog/dialog.vue: -------------------------------------------------------------------------------- 1 | 25 | 26 | 61 | 62 | 113 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import Avatar from './avatar/avatar' 2 | import Buttons from './buttons/buttons' 3 | import Card from './card/card' 4 | import Checkbox from './checkbox/checkbox' 5 | import DatePicker from './datePicker/datePicker' 6 | import Dialog from './dialog/dialog' 7 | import Input from './input/input' 8 | import Menu from './menu/menu' 9 | import Pagination from './pagination/pagination' 10 | import Radio from './radio/radio' 11 | import RadioGroup from './radio/radioGroup' 12 | import Search from './search/search' 13 | import Select from './select/select' 14 | import Slider from './slider/slider' 15 | import Snackbar from './snackbar/snackbar' 16 | import Switch from './switch/switch' 17 | import Tables from './tables/tables' 18 | import Tabs from './tabs/tabs' 19 | import Toolbar from './toolbar/toolbar' 20 | import Tooltips from './tooltips/tooltips' 21 | 22 | export const components = { 23 | Avatar, 24 | Buttons, 25 | Card, 26 | Checkbox, 27 | DatePicker, 28 | Dialog, 29 | Input, 30 | Menu, 31 | Pagination, 32 | Radio, 33 | RadioGroup, 34 | Search, 35 | Select, 36 | Slider, 37 | Snackbar, 38 | Switch, 39 | Tables, 40 | Tabs, 41 | Toolbar, 42 | Tooltips 43 | } 44 | 45 | export default { 46 | install (Vue, options) { 47 | Object.keys(components).forEach((name) => { 48 | Vue.component(`${options.prefix}${name}`, components[name]) 49 | }) 50 | } 51 | } 52 | -------------------------------------------------------------------------------- /src/input/input.vue: -------------------------------------------------------------------------------- 1 | 13 | 14 | 42 | 43 | 119 | -------------------------------------------------------------------------------- /src/layout/layout.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | 14 | 15 | 29 | -------------------------------------------------------------------------------- /src/lists/list.vue: -------------------------------------------------------------------------------- 1 | 9 | 10 | 15 | -------------------------------------------------------------------------------- /src/lists/listOneLine.vue: -------------------------------------------------------------------------------- 1 | 13 | 14 | 21 | -------------------------------------------------------------------------------- /src/lists/listThreeLine.vue: -------------------------------------------------------------------------------- 1 | 21 | 22 | 24 | -------------------------------------------------------------------------------- /src/lists/listTwoLine.vue: -------------------------------------------------------------------------------- 1 | 23 | 24 | 26 | -------------------------------------------------------------------------------- /src/menu/menu.vue: -------------------------------------------------------------------------------- 1 | 31 | 32 | 118 | 119 | 199 | -------------------------------------------------------------------------------- /src/pagination/pagination.vue: -------------------------------------------------------------------------------- 1 | 30 | 31 | 138 | 139 | 162 | -------------------------------------------------------------------------------- /src/panel/panel.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | 19 | -------------------------------------------------------------------------------- /src/radio/radio.vue: -------------------------------------------------------------------------------- 1 | 24 | 25 | 61 | 62 | 105 | -------------------------------------------------------------------------------- /src/radio/radioGroup.vue: -------------------------------------------------------------------------------- 1 | 19 | 20 | 57 | -------------------------------------------------------------------------------- /src/search/search.vue: -------------------------------------------------------------------------------- 1 | 16 | 17 | 55 | 56 | 94 | -------------------------------------------------------------------------------- /src/select/select.vue: -------------------------------------------------------------------------------- 1 | 30 | 31 | 115 | 116 | 203 | -------------------------------------------------------------------------------- /src/slider/slider.vue: -------------------------------------------------------------------------------- 1 | 22 | 23 | 72 | 73 | 85 | -------------------------------------------------------------------------------- /src/snackbar/snackbar.vue: -------------------------------------------------------------------------------- 1 | 12 | 13 | 55 | 56 | 84 | -------------------------------------------------------------------------------- /src/spinner/spinner.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 78 | -------------------------------------------------------------------------------- /src/switch/switch.vue: -------------------------------------------------------------------------------- 1 | 9 | 10 | 40 | 41 | 69 | -------------------------------------------------------------------------------- /src/tables/tables.vue: -------------------------------------------------------------------------------- 1 | 37 | 38 | 99 | 100 | 161 | -------------------------------------------------------------------------------- /src/tabs/tabs.vue: -------------------------------------------------------------------------------- 1 | 13 | 14 | 45 | 46 | 77 | -------------------------------------------------------------------------------- /src/toolbar/toolbar.vue: -------------------------------------------------------------------------------- 1 | 14 | 15 | 20 | 21 | 51 | -------------------------------------------------------------------------------- /src/tooltips/tooltips.vue: -------------------------------------------------------------------------------- 1 | 14 | 15 | 99 | 100 | 122 | -------------------------------------------------------------------------------- /static/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/taoche/vue-material/d6a75840614d4eeed6bbb3bbb3211f2db90d0826/static/.gitkeep -------------------------------------------------------------------------------- /utils/handleEvent.js: -------------------------------------------------------------------------------- 1 | const handleEvent = (eventName, { element, callback, useCapture = false } = {}, thisArg) => { 2 | const $element = element || document.documentElement 3 | 4 | const handler = (event) => { 5 | if (typeof callback === 'function') { 6 | callback.call(thisArg, event) 7 | } 8 | } 9 | 10 | handler.destroy = function () { 11 | return $element.removeEventListener(eventName, handler, useCapture) 12 | } 13 | 14 | $element.addEventListener(eventName, handler, useCapture) 15 | 16 | return handler 17 | } 18 | 19 | export default handleEvent 20 | -------------------------------------------------------------------------------- /utils/parseHtml.js: -------------------------------------------------------------------------------- 1 | const parseHtml = (fragments) => { 2 | let tmp = document.implementation.createHTMLDocument() 3 | tmp.body.innerHTML = fragments 4 | return tmp.body.children[0] 5 | } 6 | 7 | export default parseHtml 8 | --------------------------------------------------------------------------------