├── .babelrc ├── .editorconfig ├── .gitignore ├── .postcssrc.js ├── LICENSE ├── README.md ├── build ├── build.js ├── check-versions.js ├── logo.png ├── strip-tags.js ├── utils.js ├── vue-loader.conf.js ├── webpack.base.conf.js ├── webpack.dev.conf.js └── webpack.prod.conf.js ├── config ├── dev.env.js ├── index.js └── prod.env.js ├── demo.vue ├── dist ├── index.html └── static │ ├── css │ ├── app.3d75fd744222a728e0e2d0997c1e238f.css │ └── app.3d75fd744222a728e0e2d0997c1e238f.css.map │ ├── fonts │ ├── iconfont.3206198.eot │ └── iconfont.592e820.ttf │ ├── img │ ├── cat.fdf9141.png │ ├── iconfont.cc58a1f.svg │ └── pic.2eeab3d.png │ └── js │ ├── 0.5addb4f464895f7b8109.js │ ├── 0.5addb4f464895f7b8109.js.map │ ├── 1.3ca2b1c44c8a708642f5.js │ ├── 1.3ca2b1c44c8a708642f5.js.map │ ├── app.92eef2a9db5458076dde.js │ ├── app.92eef2a9db5458076dde.js.map │ ├── manifest.94a171d7cb2b966ac120.js │ ├── manifest.94a171d7cb2b966ac120.js.map │ ├── vendor.effabdcaf367bac9bbe5.js │ └── vendor.effabdcaf367bac9bbe5.js.map ├── examples ├── App.vue ├── assets │ ├── css │ │ ├── common.css │ │ ├── index.css │ │ └── md.css │ ├── img │ │ ├── cat.png │ │ ├── jkui.png │ │ ├── logo.png │ │ └── pic.png │ └── logo.png ├── components │ ├── demo-block.vue │ ├── footer.vue │ ├── header.vue │ └── side-nav.vue ├── docs │ ├── breadcrumb.md │ ├── button.md │ ├── card.md │ ├── guide.md │ ├── icon.md │ ├── install.md │ ├── layout.md │ ├── loading.md │ ├── logs.md │ ├── message.md │ ├── start.md │ ├── tag.md │ └── twotable.md ├── icon.json ├── main.js ├── nav.config.json └── router │ └── index.js ├── index.html ├── package.json ├── packages ├── README.md ├── breadcrumb-item │ └── index.js ├── breadcrumb │ ├── index.js │ └── src │ │ ├── breadcrumb-item.vue │ │ └── breadcrumb.vue ├── button │ ├── index.js │ └── src │ │ └── button.vue ├── card │ ├── index.js │ └── src │ │ └── card.vue ├── col │ ├── index.js │ └── src │ │ └── col.js ├── hour │ ├── index.js │ └── src │ │ └── hour.vue ├── index.js ├── message │ ├── index.js │ └── src │ │ ├── message.js │ │ └── message.vue ├── package.json ├── row │ ├── index.js │ └── src │ │ └── row.js ├── tag │ ├── index.js │ └── src │ │ └── tag.vue ├── theme-default │ └── lib │ │ ├── breadcrumb.scss │ │ ├── button.scss │ │ ├── card.scss │ │ ├── col.scss │ │ ├── css │ │ ├── breadcrumb.css │ │ ├── button.css │ │ ├── card.css │ │ ├── col.css │ │ ├── hour.css │ │ ├── icon.css │ │ ├── index.css │ │ ├── message.css │ │ ├── row.css │ │ ├── tag.css │ │ ├── transition.css │ │ └── twotable.css │ │ ├── fonts │ │ ├── iconfont.eot │ │ ├── iconfont.svg │ │ ├── iconfont.ttf │ │ └── iconfont.woff │ │ ├── hour.scss │ │ ├── icon.scss │ │ ├── index.css │ │ ├── index.scss │ │ ├── message.scss │ │ ├── row.scss │ │ ├── style │ │ └── mixins.scss │ │ ├── tag.scss │ │ ├── transition.scss │ │ └── twotable.scss └── two-dimensional-table │ ├── index.js │ └── src │ └── tow-dimensional-table.vue ├── static └── .gitkeep └── tree.md /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | ["env", { 4 | "modules": false, 5 | "targets": { 6 | "browsers": ["> 1%", "last 2 versions", "not ie <= 8"] 7 | } 8 | }], 9 | "stage-2" 10 | ], 11 | "plugins": ["transform-vue-jsx", "transform-runtime"] 12 | } 13 | -------------------------------------------------------------------------------- /.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 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules/ 3 | # /dist/ 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | 8 | # Editor directories and files 9 | .idea 10 | .vscode 11 | *.suo 12 | *.ntvs* 13 | *.njsproj 14 | *.sln 15 | -------------------------------------------------------------------------------- /.postcssrc.js: -------------------------------------------------------------------------------- 1 | // https://github.com/michael-ciniawsky/postcss-load-config 2 | 3 | module.exports = { 4 | "plugins": { 5 | "postcss-import": {}, 6 | "postcss-url": {}, 7 | // to edit target browsers: use "browserslist" field in package.json 8 | "autoprefixer": {} 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2018 liuyangjike 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ## JK-UI 2 | 3 | ![](https://img.shields.io/badge/vue-2.5.2-blue.svg) 4 | ![](https://img.shields.io/badge/vue--cli-2.8.5-green.svg) 5 | ![](https://img.shields.io/badge/vue--router-3.0.1-ff69b4.svg) 6 | ![](https://img.shields.io/badge/vue--markdown--loader-2.4.1-yellow.svg) 7 | ![](https://img.shields.io/badge/markdown--it--container-2.4.1-003366.svg) 8 | 9 | ## 介绍 10 | 11 | `jk-ui` 是一款基于 `Vue.js 2.0` 的前端 `UI`组件库, 其中文件夹`package`为`jk-ui`源码 12 | 整个项目为`jk-ui`的API 13 | 14 | ## 在线演示 15 | 16 | [演示文档](http://www.goingtrace.com) 17 | 18 | ## 特性 19 | 20 | - 基于 `Vue` 开发的 `UI` 组件 21 | - 使用 `npm + webpack + babel` 的工作流，支持 ES6 22 | - 提供友好的 API，可灵活的使用组件 23 | 24 | ## 说明 25 | > 觉得对你有帮助,请点右上角的`Star`支持一下
26 | > 推荐一下我的另一个项目基于react的饿了吗项目(全家桶, 很适合react进阶用) [点这里](https://github.com/liuyangjike/react-elm) 27 | 28 | ## 启动 29 | ``` 30 | npm intall 31 | npm run dev 32 | ``` 33 | 34 | ## 使用jk-ui 35 | 1. npm install --save jk-ui 36 | 2. 在Vue项目里的main.js 37 | ``` 38 | import JKUI from 'jk-ui' 39 | import 'jk-ui/theme-default/lib/index.css' 40 | Vue.use(JKUI)` 41 | ``` 42 | 43 | ## 参考 44 | 本项目参考了 45 | [VV-UI](https://github.com/VV-UI/VV-UI), 46 | [Element-UI](https://github.com/ElemeFE/element) -------------------------------------------------------------------------------- /build/build.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | require('./check-versions')() 3 | 4 | process.env.NODE_ENV = 'production' 5 | 6 | const ora = require('ora') 7 | const rm = require('rimraf') 8 | const path = require('path') 9 | const chalk = require('chalk') 10 | const webpack = require('webpack') 11 | const config = require('../config') 12 | const webpackConfig = require('./webpack.prod.conf') 13 | 14 | const spinner = ora('building for production...') 15 | spinner.start() 16 | 17 | rm(path.join(config.build.assetsRoot, config.build.assetsSubDirectory), err => { 18 | if (err) throw err 19 | webpack(webpackConfig, (err, stats) => { 20 | spinner.stop() 21 | if (err) throw err 22 | process.stdout.write(stats.toString({ 23 | colors: true, 24 | modules: false, 25 | children: false, // If you are using ts-loader, setting this to true will make TypeScript errors show up during build. 26 | chunks: false, 27 | chunkModules: false 28 | }) + '\n\n') 29 | 30 | if (stats.hasErrors()) { 31 | console.log(chalk.red(' Build failed with errors.\n')) 32 | process.exit(1) 33 | } 34 | 35 | console.log(chalk.cyan(' Build complete.\n')) 36 | console.log(chalk.yellow( 37 | ' Tip: built files are meant to be served over an HTTP server.\n' + 38 | ' Opening index.html over file:// won\'t work.\n' 39 | )) 40 | }) 41 | }) 42 | -------------------------------------------------------------------------------- /build/check-versions.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | const chalk = require('chalk') 3 | const semver = require('semver') 4 | const packageConfig = require('../package.json') 5 | const shell = require('shelljs') 6 | 7 | function exec (cmd) { 8 | return require('child_process').execSync(cmd).toString().trim() 9 | } 10 | 11 | const versionRequirements = [ 12 | { 13 | name: 'node', 14 | currentVersion: semver.clean(process.version), 15 | versionRequirement: packageConfig.engines.node 16 | } 17 | ] 18 | 19 | if (shell.which('npm')) { 20 | versionRequirements.push({ 21 | name: 'npm', 22 | currentVersion: exec('npm --version'), 23 | versionRequirement: packageConfig.engines.npm 24 | }) 25 | } 26 | 27 | module.exports = function () { 28 | const warnings = [] 29 | 30 | for (let i = 0; i < versionRequirements.length; i++) { 31 | const mod = versionRequirements[i] 32 | 33 | if (!semver.satisfies(mod.currentVersion, mod.versionRequirement)) { 34 | warnings.push(mod.name + ': ' + 35 | chalk.red(mod.currentVersion) + ' should be ' + 36 | chalk.green(mod.versionRequirement) 37 | ) 38 | } 39 | } 40 | 41 | if (warnings.length) { 42 | console.log('') 43 | console.log(chalk.yellow('To use this template, you must update following to modules:')) 44 | console.log() 45 | 46 | for (let i = 0; i < warnings.length; i++) { 47 | const warning = warnings[i] 48 | console.log(' ' + warning) 49 | } 50 | 51 | console.log() 52 | process.exit(1) 53 | } 54 | } 55 | -------------------------------------------------------------------------------- /build/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/liuyangjike/JKUI/9b2dc59911db19d1c5b07263dee310f791bf199d/build/logo.png -------------------------------------------------------------------------------- /build/strip-tags.js: -------------------------------------------------------------------------------- 1 | /** 2 | * 转换成DOM字符串 3 | */ 4 | const cheerio = require('cheerio') 5 | 6 | module.exports = (str, tags) => { 7 | const $ = cheerio.load(str, { 8 | decodeEntities: false 9 | }) 10 | 11 | if (!tags || tags.length === 0) { 12 | return str 13 | } 14 | 15 | tags = !Array.isArray(tags) ? [tags] : tags 16 | let len = tags.length 17 | 18 | while (len--) { 19 | $(tags[len]).remove() 20 | } 21 | 22 | return $.html() 23 | } 24 | -------------------------------------------------------------------------------- /build/utils.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | const path = require('path') 3 | const config = require('../config') 4 | const ExtractTextPlugin = require('extract-text-webpack-plugin') 5 | const packageConfig = require('../package.json') 6 | 7 | exports.assetsPath = function (_path) { 8 | const assetsSubDirectory = process.env.NODE_ENV === 'production' 9 | ? config.build.assetsSubDirectory 10 | : config.dev.assetsSubDirectory 11 | 12 | return path.posix.join(assetsSubDirectory, _path) 13 | } 14 | 15 | exports.cssLoaders = function (options) { 16 | options = options || {} 17 | 18 | const cssLoader = { 19 | loader: 'css-loader', 20 | options: { 21 | sourceMap: options.sourceMap 22 | } 23 | } 24 | 25 | const postcssLoader = { 26 | loader: 'postcss-loader', 27 | options: { 28 | sourceMap: options.sourceMap 29 | } 30 | } 31 | 32 | // generate loader string to be used with extract text plugin 33 | function generateLoaders (loader, loaderOptions) { 34 | const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader] 35 | 36 | if (loader) { 37 | loaders.push({ 38 | loader: loader + '-loader', 39 | options: Object.assign({}, loaderOptions, { 40 | sourceMap: options.sourceMap 41 | }) 42 | }) 43 | } 44 | 45 | // Extract CSS when that option is specified 46 | // (which is the case during production build) 47 | if (options.extract) { 48 | return ExtractTextPlugin.extract({ 49 | use: loaders, 50 | fallback: 'vue-style-loader' 51 | }) 52 | } else { 53 | return ['vue-style-loader'].concat(loaders) 54 | } 55 | } 56 | 57 | // https://vue-loader.vuejs.org/en/configurations/extract-css.html 58 | return { 59 | css: generateLoaders(), 60 | postcss: generateLoaders(), 61 | less: generateLoaders('less'), 62 | // sass: generateLoaders('sass', { indentedSyntax: true }), 63 | // scss: generateLoaders('sass'), 64 | stylus: generateLoaders('stylus'), 65 | styl: generateLoaders('stylus') 66 | } 67 | } 68 | 69 | // Generate loaders for standalone style files (outside of .vue) 70 | exports.styleLoaders = function (options) { 71 | const output = [] 72 | const loaders = exports.cssLoaders(options) 73 | 74 | for (const extension in loaders) { 75 | const loader = loaders[extension] 76 | output.push({ 77 | test: new RegExp('\\.' + extension + '$'), 78 | use: loader 79 | }) 80 | } 81 | 82 | return output 83 | } 84 | 85 | exports.createNotifierCallback = () => { 86 | const notifier = require('node-notifier') 87 | 88 | return (severity, errors) => { 89 | if (severity !== 'error') return 90 | 91 | const error = errors[0] 92 | const filename = error.file && error.file.split('!').pop() 93 | 94 | notifier.notify({ 95 | title: packageConfig.name, 96 | message: severity + ': ' + error.name, 97 | subtitle: filename || '', 98 | icon: path.join(__dirname, 'logo.png') 99 | }) 100 | } 101 | } 102 | /** 103 | * 增加 hljs 的 classname 104 | */ 105 | exports.wrapCustomClass = function (render) { 106 | return function (...args) { 107 | return render(...args) 108 | .replace('', '') 110 | } 111 | } 112 | 113 | /** 114 | * Format HTML string 115 | */ 116 | exports.convertHtml = function (str) { 117 | return str.replace(/(&#x)(\w{4});/gi, $0 => String.fromCharCode(parseInt(encodeURIComponent($0).replace(/(%26%23x)(\w{4})(%3B)/g, '$2'), 16))) 118 | } 119 | -------------------------------------------------------------------------------- /build/vue-loader.conf.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | const utils = require('./utils') 3 | const config = require('../config') 4 | const isProduction = process.env.NODE_ENV === 'production' 5 | const sourceMapEnabled = isProduction 6 | ? config.build.productionSourceMap 7 | : config.dev.cssSourceMap 8 | 9 | module.exports = { 10 | loaders: utils.cssLoaders({ 11 | sourceMap: sourceMapEnabled, 12 | extract: isProduction 13 | }), 14 | cssSourceMap: sourceMapEnabled, 15 | cacheBusting: config.dev.cacheBusting, 16 | transformToRequire: { 17 | video: ['src', 'poster'], 18 | source: 'src', 19 | img: 'src', 20 | image: 'xlink:href' 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /build/webpack.base.conf.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | const path = require('path') 3 | const utils = require('./utils') 4 | const config = require('../config') 5 | const vueLoaderConfig = require('./vue-loader.conf') 6 | const MarkdownItContainer = require('markdown-it-container') 7 | const striptags = require('./strip-tags') 8 | 9 | 10 | const vueMarkdown = { 11 | preprocess: (MarkdownIt, source) => { 12 | MarkdownIt.renderer.rules.table_open = function () { 13 | return '' 14 | } 15 | MarkdownIt.renderer.rules.fence = utils.wrapCustomClass(MarkdownIt.renderer.rules.fence) 16 | 17 | // ```html `` 给这种样式加个class hljs 18 | // 但是markdown-it 有个bug fence整合attr的时候直接加载class数组上而不是class的值上 19 | // markdown-it\lib\renderer.js 71行 这么修改可以修复bug 20 | // tmpAttrs[i] += ' ' + options.langPrefix + langName; --> tmpAttrs[i][1] += ' ' + options.langPrefix + langName; 21 | // const fence = MarkdownIt.renderer.rules.fence 22 | // MarkdownIt.renderer.rules.fence = function(...args){ 23 | // args[0][args[1]].attrJoin('class', 'hljs') 24 | // var a = fence(...args) 25 | // return a 26 | // } 27 | 28 | const code_inline = MarkdownIt.renderer.rules.code_inline 29 | MarkdownIt.renderer.rules.code_inline = function (...args) { 30 | args[0][args[1]].attrJoin('class', 'code_inline') 31 | return code_inline(...args) 32 | } 33 | return source 34 | }, 35 | use: [ 36 | [MarkdownItContainer, 'demo', { 37 | // 用于校验包含demo的代码块 38 | validate: params => params.trim().match(/^demo\s*(.*)$/), 39 | render: function (tokens, idx) { 40 | 41 | var m = tokens[idx].info.trim().match(/^demo\s*(.*)$/); 42 | if (tokens[idx].nesting === 1) { 43 | var desc = tokens[idx + 2].content; 44 | // 编译成html 45 | const html = utils.convertHtml(striptags(tokens[idx + 1].content, 'script')) 46 | // 移除描述，防止被添加到代码块 47 | tokens[idx + 2].children = []; 48 | return ` 49 |
${html}
50 |
`; 51 | } 52 | return '
\n'; 53 | } 54 | }] 55 | ] 56 | } 57 | 58 | function resolve (dir) { 59 | return path.join(__dirname, '..', dir) 60 | } 61 | 62 | 63 | 64 | module.exports = { 65 | context: path.resolve(__dirname, '../'), 66 | entry: { 67 | app: './examples/main.js' 68 | }, 69 | output: { 70 | path: config.build.assetsRoot, 71 | filename: '[name].js', 72 | publicPath: process.env.NODE_ENV === 'production' 73 | ? config.build.assetsPublicPath 74 | : config.dev.assetsPublicPath 75 | }, 76 | resolve: { 77 | extensions: ['.js', '.vue', '.json'], 78 | alias: { 79 | 'vue$': 'vue/dist/vue.esm.js', 80 | '@': resolve('examples'), 81 | } 82 | }, 83 | module: { 84 | rules: [ 85 | { 86 | test: /\.vue$/, 87 | loader: 'vue-loader', 88 | options: vueLoaderConfig 89 | }, 90 | { 91 | test: /\.js$/, 92 | loader: 'babel-loader', 93 | include: [resolve('examples'), resolve('test'), resolve('node_modules/webpack-dev-server/client')] 94 | }, 95 | { 96 | test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, 97 | loader: 'url-loader', 98 | options: { 99 | limit: 10000, 100 | name: utils.assetsPath('img/[name].[hash:7].[ext]') 101 | } 102 | }, 103 | { 104 | test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/, 105 | loader: 'url-loader', 106 | options: { 107 | limit: 10000, 108 | name: utils.assetsPath('media/[name].[hash:7].[ext]') 109 | } 110 | }, 111 | { 112 | test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/, 113 | loader: 'url-loader', 114 | options: { 115 | limit: 10000, 116 | name: utils.assetsPath('fonts/[name].[hash:7].[ext]') 117 | } 118 | }, 119 | { 120 | test: /\.less$/, 121 | loader: "style-loader!css-loader!less-loader", 122 | }, 123 | { 124 | test: /\.scss$/, 125 | loaders: ['style-loader', 'css-loader', 'sass-loader'] 126 | }, 127 | { 128 | test: /\.md$/, 129 | loader: 'vue-markdown-loader', 130 | options: vueMarkdown 131 | } 132 | ] 133 | }, 134 | node: { 135 | // prevent webpack from injecting useless setImmediate polyfill because Vue 136 | // source contains it (although only uses it if it's native). 137 | setImmediate: false, 138 | // prevent webpack from injecting mocks to Node native modules 139 | // that does not make sense for the client 140 | dgram: 'empty', 141 | fs: 'empty', 142 | net: 'empty', 143 | tls: 'empty', 144 | child_process: 'empty' 145 | } 146 | } 147 | -------------------------------------------------------------------------------- /build/webpack.dev.conf.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | const utils = require('./utils') 3 | const webpack = require('webpack') 4 | const config = require('../config') 5 | const merge = require('webpack-merge') 6 | const path = require('path') 7 | const baseWebpackConfig = require('./webpack.base.conf') 8 | const CopyWebpackPlugin = require('copy-webpack-plugin') 9 | const HtmlWebpackPlugin = require('html-webpack-plugin') 10 | const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin') 11 | const portfinder = require('portfinder') 12 | 13 | const HOST = process.env.HOST 14 | const PORT = process.env.PORT && Number(process.env.PORT) 15 | 16 | const devWebpackConfig = merge(baseWebpackConfig, { 17 | module: { 18 | rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap, usePostCSS: true }) 19 | }, 20 | // cheap-module-eval-source-map is faster for development 21 | devtool: config.dev.devtool, 22 | 23 | // these devServer options should be customized in /config/index.js 24 | devServer: { 25 | clientLogLevel: 'warning', 26 | historyApiFallback: { 27 | rewrites: [ 28 | { from: /.*/, to: path.posix.join(config.dev.assetsPublicPath, 'index.html') }, 29 | ], 30 | }, 31 | hot: true, 32 | contentBase: false, // since we use CopyWebpackPlugin. 33 | compress: true, 34 | host: HOST || config.dev.host, 35 | port: PORT || config.dev.port, 36 | open: config.dev.autoOpenBrowser, 37 | overlay: config.dev.errorOverlay 38 | ? { warnings: false, errors: true } 39 | : false, 40 | publicPath: config.dev.assetsPublicPath, 41 | proxy: config.dev.proxyTable, 42 | quiet: true, // necessary for FriendlyErrorsPlugin 43 | watchOptions: { 44 | poll: config.dev.poll, 45 | } 46 | }, 47 | plugins: [ 48 | new webpack.DefinePlugin({ 49 | 'process.env': require('../config/dev.env') 50 | }), 51 | new webpack.HotModuleReplacementPlugin(), 52 | new webpack.NamedModulesPlugin(), // HMR shows correct file names in console on update. 53 | new webpack.NoEmitOnErrorsPlugin(), 54 | // https://github.com/ampedandwired/html-webpack-plugin 55 | new HtmlWebpackPlugin({ 56 | filename: 'index.html', 57 | template: 'index.html', 58 | inject: true 59 | }), 60 | // copy custom static assets 61 | new CopyWebpackPlugin([ 62 | { 63 | from: path.resolve(__dirname, '../static'), 64 | to: config.dev.assetsSubDirectory, 65 | ignore: ['.*'] 66 | } 67 | ]) 68 | ] 69 | }) 70 | 71 | module.exports = new Promise((resolve, reject) => { 72 | portfinder.basePort = process.env.PORT || config.dev.port 73 | portfinder.getPort((err, port) => { 74 | if (err) { 75 | reject(err) 76 | } else { 77 | // publish the new Port, necessary for e2e tests 78 | process.env.PORT = port 79 | // add port to devServer config 80 | devWebpackConfig.devServer.port = port 81 | 82 | // Add FriendlyErrorsPlugin 83 | devWebpackConfig.plugins.push(new FriendlyErrorsPlugin({ 84 | compilationSuccessInfo: { 85 | messages: [`Your application is running here: http://${devWebpackConfig.devServer.host}:${port}`], 86 | }, 87 | onErrors: config.dev.notifyOnErrors 88 | ? utils.createNotifierCallback() 89 | : undefined 90 | })) 91 | 92 | resolve(devWebpackConfig) 93 | } 94 | }) 95 | }) 96 | -------------------------------------------------------------------------------- /build/webpack.prod.conf.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | const path = require('path') 3 | const utils = require('./utils') 4 | const webpack = require('webpack') 5 | const config = require('../config') 6 | const merge = require('webpack-merge') 7 | const baseWebpackConfig = require('./webpack.base.conf') 8 | const CopyWebpackPlugin = require('copy-webpack-plugin') 9 | const HtmlWebpackPlugin = require('html-webpack-plugin') 10 | const ExtractTextPlugin = require('extract-text-webpack-plugin') 11 | const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin') 12 | const UglifyJsPlugin = require('uglifyjs-webpack-plugin') 13 | 14 | const env = require('../config/prod.env') 15 | 16 | const webpackConfig = merge(baseWebpackConfig, { 17 | module: { 18 | rules: utils.styleLoaders({ 19 | sourceMap: config.build.productionSourceMap, 20 | extract: true, 21 | usePostCSS: true 22 | }) 23 | }, 24 | devtool: config.build.productionSourceMap ? config.build.devtool : false, 25 | output: { 26 | path: config.build.assetsRoot, 27 | filename: utils.assetsPath('js/[name].[chunkhash].js'), 28 | chunkFilename: utils.assetsPath('js/[id].[chunkhash].js') 29 | }, 30 | plugins: [ 31 | // http://vuejs.github.io/vue-loader/en/workflow/production.html 32 | new webpack.DefinePlugin({ 33 | 'process.env': env 34 | }), 35 | new UglifyJsPlugin({ 36 | uglifyOptions: { 37 | compress: { 38 | warnings: false 39 | } 40 | }, 41 | sourceMap: config.build.productionSourceMap, 42 | parallel: true 43 | }), 44 | // extract css into its own file 45 | new ExtractTextPlugin({ 46 | filename: utils.assetsPath('css/[name].[contenthash].css'), 47 | // Setting the following option to `false` will not extract CSS from codesplit chunks. 48 | // Their CSS will instead be inserted dynamically with style-loader when the codesplit chunk has been loaded by webpack. 49 | // It's currently set to `true` because we are seeing that sourcemaps are included in the codesplit bundle as well when it's `false`, 50 | // increasing file size: https://github.com/vuejs-templates/webpack/issues/1110 51 | allChunks: true, 52 | }), 53 | // Compress extracted CSS. We are using this plugin so that possible 54 | // duplicated CSS from different components can be deduped. 55 | new OptimizeCSSPlugin({ 56 | cssProcessorOptions: config.build.productionSourceMap 57 | ? { safe: true, map: { inline: false } } 58 | : { safe: true } 59 | }), 60 | // generate dist index.html with correct asset hash for caching. 61 | // you can customize output by editing /index.html 62 | // see https://github.com/ampedandwired/html-webpack-plugin 63 | new HtmlWebpackPlugin({ 64 | filename: config.build.index, 65 | template: 'index.html', 66 | inject: true, 67 | minify: { 68 | removeComments: true, 69 | collapseWhitespace: true, 70 | removeAttributeQuotes: true 71 | // more options: 72 | // https://github.com/kangax/html-minifier#options-quick-reference 73 | }, 74 | // necessary to consistently work with multiple chunks via CommonsChunkPlugin 75 | chunksSortMode: 'dependency' 76 | }), 77 | // keep module.id stable when vendor modules does not change 78 | new webpack.HashedModuleIdsPlugin(), 79 | // enable scope hoisting 80 | new webpack.optimize.ModuleConcatenationPlugin(), 81 | // split vendor js into its own file 82 | new webpack.optimize.CommonsChunkPlugin({ 83 | name: 'vendor', 84 | minChunks (module) { 85 | // any required modules inside node_modules are extracted to vendor 86 | return ( 87 | module.resource && 88 | /\.js$/.test(module.resource) && 89 | module.resource.indexOf( 90 | path.join(__dirname, '../node_modules') 91 | ) === 0 92 | ) 93 | } 94 | }), 95 | // extract webpack runtime and module manifest to its own file in order to 96 | // prevent vendor hash from being updated whenever app bundle is updated 97 | new webpack.optimize.CommonsChunkPlugin({ 98 | name: 'manifest', 99 | minChunks: Infinity 100 | }), 101 | // This instance extracts shared chunks from code splitted chunks and bundles them 102 | // in a separate chunk, similar to the vendor chunk 103 | // see: https://webpack.js.org/plugins/commons-chunk-plugin/#extra-async-commons-chunk 104 | new webpack.optimize.CommonsChunkPlugin({ 105 | name: 'app', 106 | async: 'vendor-async', 107 | children: true, 108 | minChunks: 3 109 | }), 110 | 111 | // copy custom static assets 112 | new CopyWebpackPlugin([ 113 | { 114 | from: path.resolve(__dirname, '../static'), 115 | to: config.build.assetsSubDirectory, 116 | ignore: ['.*'] 117 | } 118 | ]) 119 | ] 120 | }) 121 | 122 | if (config.build.productionGzip) { 123 | const CompressionWebpackPlugin = require('compression-webpack-plugin') 124 | 125 | webpackConfig.plugins.push( 126 | new CompressionWebpackPlugin({ 127 | asset: '[path].gz[query]', 128 | algorithm: 'gzip', 129 | test: new RegExp( 130 | '\\.(' + 131 | config.build.productionGzipExtensions.join('|') + 132 | ')$' 133 | ), 134 | threshold: 10240, 135 | minRatio: 0.8 136 | }) 137 | ) 138 | } 139 | 140 | if (config.build.bundleAnalyzerReport) { 141 | const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin 142 | webpackConfig.plugins.push(new BundleAnalyzerPlugin()) 143 | } 144 | 145 | module.exports = webpackConfig 146 | -------------------------------------------------------------------------------- /config/dev.env.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | const merge = require('webpack-merge') 3 | const prodEnv = require('./prod.env') 4 | 5 | module.exports = merge(prodEnv, { 6 | NODE_ENV: '"development"' 7 | }) 8 | -------------------------------------------------------------------------------- /config/index.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | // Template version: 1.3.1 3 | // see http://vuejs-templates.github.io/webpack for documentation. 4 | 5 | const path = require('path') 6 | 7 | module.exports = { 8 | dev: { 9 | 10 | // Paths 11 | assetsSubDirectory: 'static', 12 | assetsPublicPath: '/', 13 | proxyTable: {}, 14 | 15 | // Various Dev Server settings 16 | host: 'localhost', // can be overwritten by process.env.HOST 17 | port: 8000, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined 18 | autoOpenBrowser: false, 19 | errorOverlay: true, 20 | notifyOnErrors: true, 21 | poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions- 22 | 23 | 24 | /** 25 | * Source Maps 26 | */ 27 | 28 | // https://webpack.js.org/configuration/devtool/#development 29 | devtool: 'cheap-module-eval-source-map', 30 | 31 | // If you have problems debugging vue-files in devtools, 32 | // set this to false - it *may* help 33 | // https://vue-loader.vuejs.org/en/options.html#cachebusting 34 | cacheBusting: true, 35 | 36 | cssSourceMap: true 37 | }, 38 | 39 | build: { 40 | // Template for index.html 41 | index: path.resolve(__dirname, '../dist/index.html'), 42 | 43 | // Paths 44 | assetsRoot: path.resolve(__dirname, '../dist'), 45 | assetsSubDirectory: 'static', 46 | assetsPublicPath: './', 47 | 48 | /** 49 | * Source Maps 50 | */ 51 | 52 | productionSourceMap: true, 53 | // https://webpack.js.org/configuration/devtool/#production 54 | devtool: '#source-map', 55 | 56 | // Gzip off by default as many popular static hosts such as 57 | // Surge or Netlify already gzip all static assets for you. 58 | // Before setting to `true`, make sure to: 59 | // npm install --save-dev compression-webpack-plugin 60 | productionGzip: false, 61 | productionGzipExtensions: ['js', 'css'], 62 | 63 | // Run the build command with an extra argument to 64 | // View the bundle analyzer report after build finishes: 65 | // `npm run build --report` 66 | // Set to `true` or `false` to always turn it on or off 67 | bundleAnalyzerReport: process.env.npm_config_report 68 | } 69 | } 70 | -------------------------------------------------------------------------------- /config/prod.env.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | module.exports = { 3 | NODE_ENV: '"production"' 4 | } 5 | -------------------------------------------------------------------------------- /demo.vue: -------------------------------------------------------------------------------- 1 | 26 | 27 | 58 | 59 | 348 | -------------------------------------------------------------------------------- /dist/index.html: -------------------------------------------------------------------------------- 1 | jk-ui
-------------------------------------------------------------------------------- /dist/static/fonts/iconfont.3206198.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/liuyangjike/JKUI/9b2dc59911db19d1c5b07263dee310f791bf199d/dist/static/fonts/iconfont.3206198.eot -------------------------------------------------------------------------------- /dist/static/fonts/iconfont.592e820.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/liuyangjike/JKUI/9b2dc59911db19d1c5b07263dee310f791bf199d/dist/static/fonts/iconfont.592e820.ttf -------------------------------------------------------------------------------- /dist/static/img/cat.fdf9141.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/liuyangjike/JKUI/9b2dc59911db19d1c5b07263dee310f791bf199d/dist/static/img/cat.fdf9141.png -------------------------------------------------------------------------------- /dist/static/img/pic.2eeab3d.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/liuyangjike/JKUI/9b2dc59911db19d1c5b07263dee310f791bf199d/dist/static/img/pic.2eeab3d.png -------------------------------------------------------------------------------- /dist/static/js/1.3ca2b1c44c8a708642f5.js: -------------------------------------------------------------------------------- 1 | webpackJsonp([1],{"8rnZ":function(e,n,r){var o={"./demo-block.vue":"7IlE","./footer.vue":"m4Eu","./header.vue":"B5wG","./side-nav.vue":"wezC"};function u(e){return r(t(e))}function t(e){var n=o[e];if(!(n+1))throw new Error("Cannot find module '"+e+"'.");return n}u.keys=function(){return Object.keys(o)},u.resolve=t,e.exports=u,u.id="8rnZ"}}); 2 | //# sourceMappingURL=1.3ca2b1c44c8a708642f5.js.map -------------------------------------------------------------------------------- /dist/static/js/1.3ca2b1c44c8a708642f5.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":["webpack:///./examples/components ^\\.\\/.*\\.vue$"],"names":["map","./demo-block.vue","./footer.vue","./header.vue","./side-nav.vue","webpackContext","req","__webpack_require__","webpackContextResolve","id","Error","keys","Object","resolve","module","exports"],"mappings":"yCAAA,IAAAA,GACAC,mBAAA,OACAC,eAAA,OACAC,eAAA,OACAC,iBAAA,QAEA,SAAAC,EAAAC,GACA,OAAAC,EAAAC,EAAAF,IAEA,SAAAE,EAAAF,GACA,IAAAG,EAAAT,EAAAM,GACA,KAAAG,EAAA,GACA,UAAAC,MAAA,uBAAAJ,EAAA,MACA,OAAAG,EAEAJ,EAAAM,KAAA,WACA,OAAAC,OAAAD,KAAAX,IAEAK,EAAAQ,QAAAL,EACAM,EAAAC,QAAAV,EACAA,EAAAI,GAAA","file":"static/js/1.3ca2b1c44c8a708642f5.js","sourcesContent":["var map = {\n\t\"./demo-block.vue\": \"7IlE\",\n\t\"./footer.vue\": \"m4Eu\",\n\t\"./header.vue\": \"B5wG\",\n\t\"./side-nav.vue\": \"wezC\"\n};\nfunction webpackContext(req) {\n\treturn __webpack_require__(webpackContextResolve(req));\n};\nfunction webpackContextResolve(req) {\n\tvar id = map[req];\n\tif(!(id + 1)) // check for number or string\n\t\tthrow new Error(\"Cannot find module '\" + req + \"'.\");\n\treturn id;\n};\nwebpackContext.keys = function webpackContextKeys() {\n\treturn Object.keys(map);\n};\nwebpackContext.resolve = webpackContextResolve;\nmodule.exports = webpackContext;\nwebpackContext.id = \"8rnZ\";\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./examples/components ^\\.\\/.*\\.vue$\n// module id = 8rnZ\n// module chunks = 1"],"sourceRoot":""} -------------------------------------------------------------------------------- /dist/static/js/manifest.94a171d7cb2b966ac120.js: -------------------------------------------------------------------------------- 1 | !function(e){var n=window.webpackJsonp;window.webpackJsonp=function(r,c,a){for(var i,u,f,s=0,l=[];s 2 |
3 | 4 | 5 |
6 | 7 | 8 |
9 | 10 | 11 | 12 | 13 |
14 | 15 | 16 | 33 | 34 | 67 | -------------------------------------------------------------------------------- /examples/assets/css/common.css: -------------------------------------------------------------------------------- 1 | article, aside, blockquote, body, button, code, dd, details, div, dl, dt, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, hr, input, legend, li, menu, nav, ol, p, pre, section, td, textarea, th, ul { 2 | margin: 0; 3 | padding: 0; 4 | } 5 | a { 6 | text-decoration: none; 7 | } 8 | code, kbd, pre, samp { 9 | font-family: Consolas,Menlo,Courier,monospace; 10 | } 11 | .demo-box{ 12 | border: 1px solid #ebebeb; 13 | border-radius: 3px; 14 | transition: .2s 15 | } 16 | .grid-content { 17 | border-radius: 4px; 18 | min-height: 36px; 19 | } 20 | 21 | .bg-purple-dark { 22 | background: #99a9bf; 23 | } 24 | 25 | .bg-purple { 26 | background: #d3dce6; 27 | } 28 | 29 | .bg-purple-light { 30 | background: #e5e9f2; 31 | } 32 | 33 | .m-10 { 34 | margin-top: 10px; 35 | } 36 | 37 | .mr-10 { 38 | margin-right: 10px; 39 | } 40 | 41 | .ml-10 { 42 | margin-left: 10px; 43 | } 44 | 45 | .row-bg { 46 | padding: 10px 0; 47 | background-color: #f9fafc; 48 | } 49 | 50 | .text-left { 51 | text-align: left; 52 | } 53 | 54 | .text-right { 55 | text-align: right; 56 | } 57 | 58 | .fs-12 { 59 | font-size: 12px; 60 | } 61 | 62 | .fs-14 { 63 | font-size: 14px; 64 | } 65 | 66 | .fs-16 { 67 | font-size: 16px; 68 | } 69 | 70 | .fs-18 { 71 | font-size: 18px; 72 | } 73 | 74 | .fs-20 { 75 | font-size: 20px; 76 | } 77 | 78 | .fs-22 { 79 | font-size: 22px; 80 | } 81 | 82 | .fs-24 { 83 | font-size: 24px; 84 | } 85 | -------------------------------------------------------------------------------- /examples/assets/css/index.css: -------------------------------------------------------------------------------- 1 | @import "md"; 2 | @import "../../../node_modules/highlight.js/styles/color-brewer.css"; 3 | @import "common" -------------------------------------------------------------------------------- /examples/assets/css/md.css: -------------------------------------------------------------------------------- 1 | section { 2 | color: #3f536e; 3 | font-size: 14px; 4 | } 5 | /* section div{ 6 | margin-top: 10px; 7 | } */ 8 | .demo-box>div{ 9 | width: 95%; 10 | margin: 15px auto; 11 | } 12 | .demo-block{ 13 | padding-top: 10px; 14 | } 15 | section ul { 16 | margin: 16px 0px; 17 | padding-left: 24px; 18 | list-style: disc; 19 | } 20 | section ul li{ 21 | line-height: 1.8; 22 | } 23 | section .le { 24 | padding: 32px; 25 | border: 1px solid #e2ecf4; 26 | border-radius: 4px 4px 0 0; 27 | background-color: #fff; 28 | margin-top: 16px; 29 | } 30 | section h1,h2,h3,h4,h5 { 31 | margin: 16px 0!important; 32 | line-height: 1.5; 33 | } 34 | section hr { 35 | margin: 1.2em 0; 36 | border: 0; 37 | border-bottom: 1px solid #C5D9E8; 38 | } 39 | section p { 40 | padding: 0; 41 | line-height: 1.7; 42 | color: #3f536e; 43 | font-size: 14px; 44 | margin: 10px 0px; 45 | } 46 | section h1{ 47 | font-size: 24px; 48 | } 49 | section code { 50 | padding: .3em .5em; 51 | font-size: .9em; 52 | vertical-align: middle; 53 | border: 1px solid #ECECEC; 54 | border-radius: 2px; 55 | background-color: #F7F7F7; 56 | } 57 | 58 | table.table { 59 | display: block; 60 | width: 100%; 61 | background-color: #fff; 62 | color: #5e6d82; 63 | font-size: 14px; 64 | border-collapse: collapse; 65 | overflow: auto; 66 | margin-bottom: 50px; 67 | } 68 | table.table th { 69 | border-top: 1px solid #f3f7fa; 70 | background-color: #FAFBFC; 71 | border-bottom: 1px solid #d8d8d8; 72 | padding: 15px 35px; 73 | text-align: left; 74 | } 75 | table.table td { 76 | border-top: 1px solid #f3f7fa; 77 | border-bottom: 1px solid #d8d8d8; 78 | padding: 15px 35px; 79 | } 80 | 81 | -------------------------------------------------------------------------------- /examples/assets/img/cat.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/liuyangjike/JKUI/9b2dc59911db19d1c5b07263dee310f791bf199d/examples/assets/img/cat.png -------------------------------------------------------------------------------- /examples/assets/img/jkui.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/liuyangjike/JKUI/9b2dc59911db19d1c5b07263dee310f791bf199d/examples/assets/img/jkui.png -------------------------------------------------------------------------------- /examples/assets/img/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/liuyangjike/JKUI/9b2dc59911db19d1c5b07263dee310f791bf199d/examples/assets/img/logo.png -------------------------------------------------------------------------------- /examples/assets/img/pic.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/liuyangjike/JKUI/9b2dc59911db19d1c5b07263dee310f791bf199d/examples/assets/img/pic.png -------------------------------------------------------------------------------- /examples/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/liuyangjike/JKUI/9b2dc59911db19d1c5b07263dee310f791bf199d/examples/assets/logo.png -------------------------------------------------------------------------------- /examples/components/demo-block.vue: -------------------------------------------------------------------------------- 1 | 15 | 16 | 32 | 33 | 142 | 143 | -------------------------------------------------------------------------------- /examples/components/footer.vue: -------------------------------------------------------------------------------- 1 | 28 | 29 | 52 | -------------------------------------------------------------------------------- /examples/components/header.vue: -------------------------------------------------------------------------------- 1 | 9 | 10 | 15 | 16 | 39 | -------------------------------------------------------------------------------- /examples/components/side-nav.vue: -------------------------------------------------------------------------------- 1 | 15 | 16 | 29 | 30 | 87 | -------------------------------------------------------------------------------- /examples/docs/breadcrumb.md: -------------------------------------------------------------------------------- 1 | ## Breadcrumb 面包屑 2 | 显示当前页面的路径，快速返回之前的任意页面。 3 | 4 | ### 基础用法 5 | 6 | 适用广泛的基础用法。 7 | 在`j-breadcrumb`中使用`j-breadcrumb-item`标签表示从首页开始的每一级, 提供了一个`separator`属性，
8 | 在`j-breadcrumb`标签中设置它来决定分隔符，它只能是字符串，默认为斜杠`/`。 9 | 10 |
11 |
12 | 13 | 首页 14 | 活动管理 15 | 活动列表 16 | 活动详情 17 | 18 |
19 |
20 | 21 | :::demo 22 | ```html 23 | 24 | 首页 25 | 活动管理 26 | 活动列表 27 | 活动详情 28 | 29 | ``` 30 | ::: 31 | 32 | ### 图标分隔符 33 | 通过设置 `separator-class` 可使用相应的 `iconfont` 作为分隔符，注意这将使 `separator` 设置失效 34 | 35 |
36 |
37 | 38 | 首页 39 | 活动管理 40 | 活动列表 41 | 活动详情 42 | 43 |
44 |
45 | 46 | 47 | :::demo 48 | ```html 49 | 50 | 首页 51 | 活动管理 52 | 活动列表 53 | 活动详情 54 | 55 | ``` 56 | ::: 57 | 58 | 59 | ### Breadcrumb Attributes 60 | | 参数 | 说明 | 类型 | 可选值 | 默认值 | 61 | |---------- |-------------- |---------- |-------------------------------- |-------- | 62 | | separator | 分隔符 | string | — | 斜杠'/' | 63 | | separator-class | 图标分隔符 class | string | — | - | 64 | 65 | ### Breadcrumb Item Attributes 66 | | 参数 | 说明 | 类型 | 可选值 | 默认值 | 67 | |---------- |-------------- |---------- |-------------------------------- |-------- | 68 | | to | 路由跳转对象，同 `vue-router` 的 `to` | string/object | — | — | 69 | | replace | 在使用 to 进行路由跳转时，启用 replace 将不会向 history 添加新记录 | boolean | — | false | 70 | -------------------------------------------------------------------------------- /examples/docs/button.md: -------------------------------------------------------------------------------- 1 | # Button 按钮 2 | ----- 3 | ### 基础用法 4 | 使用```type```, ```plain```和```round``` 属性来定义Button 的样式 5 | 6 |
7 |
8 |
9 | 默认按钮 10 | 主要按钮 11 | 成功按钮 12 | 警告按钮 13 | 危险按钮 14 | 信息按钮 15 |
16 |
17 | 朴素按钮 18 | 主要按钮 19 | 成功按钮 20 | 警告按钮 21 | 危险按钮 22 | 信息按钮 23 |
24 |
25 | 默认按钮 26 | 主要按钮 27 | 成功按钮 28 | 警告按钮 29 | 危险按钮 30 | 信息按钮 31 |
32 |
33 | 34 | ::: demo 35 | ```html 36 |
37 | 默认按钮 38 | 主要按钮 39 | 成功按钮 40 | 警告按钮 41 | 危险按钮 42 | 信息按钮 43 |
44 |
45 | 朴素按钮 46 | 主要按钮 47 | 成功按钮 48 | 警告按钮 49 | 危险按钮 50 | 信息按钮 51 |
52 |
53 | 默认按钮 54 | 主要按钮 55 | 成功按钮 56 | 警告按钮 57 | 危险按钮 58 | 信息按钮 59 |
60 | ``` 61 | ::: 62 |
63 | 64 | ### 禁用状态 65 | 66 | 按钮不可用状态。 67 | 68 |
69 |
70 |
71 | 默认按钮 72 | 主要按钮 73 | 成功按钮 74 | 信息按钮 75 | 警告按钮 76 | 危险按钮 77 |
78 |
79 | 朴素按钮 80 | 主要按钮 81 | 成功按钮 82 | 信息按钮 83 | 警告按钮 84 | 危险按钮 85 |
86 |
87 | 88 | ::: demo 89 | ```html 90 |
91 | 默认按钮 92 | 主要按钮 93 | 成功按钮 94 | 信息按钮 95 | 警告按钮 96 | 危险按钮 97 |
98 |
99 | 朴素按钮 100 | 主要按钮 101 | 成功按钮 102 | 信息按钮 103 | 警告按钮 104 | 危险按钮 105 |
106 | ``` 107 | ::: 108 |
109 | 110 | ### 不同尺寸 111 | 112 | Button 组件提供除了默认值以外的三种尺寸，可以在不同场景下选择合适的按钮尺寸。 113 | 额外的尺寸：```medium```、```small```，通过设置```size```属性来配置它们。 114 | 115 |
116 |
117 | 小尺寸 118 | 中等尺寸 119 | 默认尺寸 120 |
121 | 122 | ::: demo 123 | ```html 124 |
125 | 小尺寸 126 | 中等尺寸 127 | 默认尺寸 128 |
129 | 130 | ``` 131 | ::: 132 |
133 | 134 | 135 | ### Attributes 136 | | 参数 | 说明 | 类型 | 可选值 | 默认值 | 137 | |---------- |-------- |---------- |------------- |-------- | 138 | | size | 尺寸 | string | default,medium,small | — | 139 | | type | 类型 | string | primary,success,warning,danger,info | — | 140 | | plain | 是否朴素按钮 | Boolean | — | false | 141 | | disabled | 是否禁用状态 | boolean | — | false | 142 | | icon | 图标，已有的图标库中的图标名 | string | — | — | 143 | -------------------------------------------------------------------------------- /examples/docs/card.md: -------------------------------------------------------------------------------- 1 | 33 | ## Card 卡片 34 | 将信息聚合在卡片容器中展示 35 | 36 | ### 基础用法 37 | 38 | 包括标题,内容和操作
39 | Card 组件包括`header`和`body`部分，`header`部分需要有显式具名 slot 分发，同时也是可选的。 40 | 41 |
42 |
43 | 44 |
45 | 卡片名称 46 | 操作按钮 47 |
48 |
49 | {{'列表内容 ' + o}} 50 |
51 | 52 |
53 |
54 | 55 | :::demo 56 | ```html 57 | 58 |
59 | 卡片名称 60 | 操作按钮 61 |
62 |
63 | {{'列表内容 ' + o}} 64 |
65 | 66 | ``` 67 | ::: 68 | 69 | ### 带图片 70 | 71 | 可配置定义更丰富的内容展示, 72 | 配置`body-style`属性来自定义`body`部分的`style`，我们还使用了布局组件。 73 |
74 |
75 | 76 | 77 | 78 | 79 |
80 | 外滩风景 81 |
82 | 83 | 按钮 84 |
85 |
86 | 87 | 88 | 89 |
90 |
91 | 92 | 93 | 102 | 103 | :::demo 104 | ```html 105 | 106 | 107 | 108 | 109 |
110 | 外滩风景 111 |
112 | 113 | 按钮 114 |
115 |
116 | 117 | 118 | 119 | 128 | ``` 129 | ::: 130 | 131 | ### 卡片阴影 132 | 可对阴影的显示进行配置,通过`shadow`属性设置卡片阴影出现的时机：`always`、`hover`或`never`。 133 | 134 |
135 |
136 | 137 | 138 | 139 | 总是显示 140 | 141 | 142 | 143 | 144 | 鼠标悬浮时显示 145 | 146 | 147 | 148 | 149 | 从不显示 150 | 151 | 152 | 153 |
154 |
155 | 156 | 157 | :::demo 158 | ```html 159 | 160 | 161 | 162 | 总是显示 163 | 164 | 165 | 166 | 167 | 鼠标悬浮时显示 168 | 169 | 170 | 171 | 172 | 从不显示 173 | 174 | 175 | 176 | ``` 177 | ::: 178 | 179 | 180 | ### Attributes 181 | | 参数 | 说明 | 类型 | 可选值 | 默认值 | 182 | |---------- |-------- |---------- |------------- |-------- | 183 | | header | 设置 header，也可以通过 `slot#header` 传入 DOM | string| — | — | 184 | | body-style | 设置 body 的样式| object| — | { padding: '20px' } | 185 | | shadow | 设置阴影显示时机 | string | always / hover / never | always | 186 | -------------------------------------------------------------------------------- /examples/docs/guide.md: -------------------------------------------------------------------------------- 1 | # 介绍 2 | 3 | ---- 4 | 5 | `jk-ui` 是一款基于 `Vue.js 2.0` 的前端 UI 组件库 6 | 7 | ## 特性 8 | 9 | - 基于 `Vue` 开发的 UI 组件 10 | - 使用 npm + webpack + babel 的工作流，支持 ES6 11 | - 提供友好的 API，可灵活的使用组件 12 | -------------------------------------------------------------------------------- /examples/docs/icon.md: -------------------------------------------------------------------------------- 1 | 12 | 64 | 65 | # Icon 图标 66 | 67 | ---- 68 | 语义化的矢量图形，```jk-ui``` 使用开源的 Iconfont (阿里妈妈MUX倾力打造的矢量图标管理、交流平台) 作为图标库，并制作成了 ```icon font```。 69 | ### 如何使用 70 | 71 | 使用 ```class="icon"``` 来声明图标，具体图标的名称请 ```copy``` 相应的标签 72 |
73 |
74 | 75 | 76 | 77 | 78 |
79 | 80 | ::: demo 81 | ```html 82 | 83 | 84 | 85 | 86 | 87 | 88 | ``` 89 | ::: 90 |
91 | 92 | ### 图标示例 93 | 94 |
    95 |
  • 96 | 97 | 98 | {{'j-' + name}} 99 | 100 |
    • 101 |
102 | -------------------------------------------------------------------------------- /examples/docs/install.md: -------------------------------------------------------------------------------- 1 | # 安装 2 | 3 | ---- 4 | 5 | ## 使用 npm 安装 6 | 推荐使用 npm 的方式进行开发，享受 node 生态圈和 webpack 工具链带来的便利。
7 | 通过 npm 安装的模块包，我们可以轻松的使用 import 或者 require 的方式引用 8 | 9 |
10 | 11 | ```bash 12 | npm install jk-ui --save 13 | ``` 14 |
15 | -------------------------------------------------------------------------------- /examples/docs/layout.md: -------------------------------------------------------------------------------- 1 | # Layout 布局 2 | ---- 3 | ### 概述 4 | 栅格化设计是按照一定的规则把页面分成固定的相同宽度，然后列出各种组合的可能性，以便于在进行页面呈现的时候能够快速的进行布局。市面上一般使用 12栅格 系统，也有采用 8栅格 系统的，但是随着设备屏幕越来越大，传统的 12栅格 系统在一些业务场景下，没办法很好的解决元素布局的问题，所以我们使用了 24栅格 系统。也就是将页面区域 24 等分。 5 | ### 基础布局 6 |
7 |
8 | 9 |
10 | 11 | 12 |
13 |
14 |
15 | 16 | 17 |
18 |
19 |
20 |
21 |
22 |
23 | 24 |
25 | 26 | ::: demo 27 | ``` html 28 | 29 |
30 | 31 | 32 |
33 |
34 |
35 | 36 | 37 |
38 |
39 |
40 |
41 |
42 |
43 | 44 | 45 | ``` 46 | ::: 47 |
48 | 49 | ### 分栏间隔 50 | 51 | 分栏之间存在间隔 52 | Row 组件 提供 ```gutter``` 属性来指定每一栏之间的间隔，默认间隔为 0。 53 |
54 |
55 | 56 |
57 |
58 |
59 |
60 | 61 |
62 | 63 | ::: demo 64 | ``` html 65 | 66 |
67 |
68 |
69 |
70 | 71 | ``` 72 | ::: 73 |
74 | 75 | ### 混合布局 通过基础的 1/24 分栏任意扩展组合形成较为复杂的混合布局。 76 | 77 |
78 |
79 | 80 |
81 |
82 | 83 | 84 |
85 |
86 |
87 |
88 | 89 | 90 |
91 |
92 |
93 | 94 |
95 | 96 | ::: demo 97 | ```html 98 | 99 |
100 |
101 | 102 | 103 |
104 |
105 |
106 |
107 | 108 | 109 |
110 |
111 |
112 | 113 | 114 | ``` 115 | ::: 116 |
117 | 118 | ### 分栏偏移 119 | 120 | 支持偏移指定的栏数。通过制定 col 组件的 ```offset``` 属性可以指定分栏偏移的栏数。 121 |
122 |
123 | 124 |
125 |
126 | 127 | 128 |
129 |
130 | 131 |
132 | 133 |
134 | 135 | ::: demo 136 | ``` html 137 | 138 |
139 |
140 | 141 | 142 |
143 |
144 | 145 |
146 | 147 | 148 | ``` 149 | ::: 150 |
151 | 152 | ### Flex 布局 153 | 154 | 通过 flex 布局来对分栏进行灵活的对齐。 155 | 将 ```type``` 属性赋值为 'flex'，可以启用 flex 布局，并可通过 ```justify``` 属性来指定 start, center, end, space-between, space-around 其中的值来定义子元素的排版方式。 156 | 157 |
158 |
159 | 160 |
161 |
162 |
163 | 164 | 165 |
166 |
167 |
168 | 169 | 170 |
171 |
172 |
173 | 174 | 175 |
176 |
177 |
178 | 179 | 180 |
181 |
182 |
183 | 184 |
185 | 186 | :::demo 187 | ```html 188 | 189 |
190 |
191 |
192 | 193 | 194 |
195 |
196 |
197 | 198 | 199 |
200 |
201 |
202 | 203 | 204 |
205 |
206 |
207 | 208 | 209 |
210 |
211 |
212 | 213 | 214 | ``` 215 | ::: 216 |
217 | 218 | 219 | 220 | ### Row Attributes 221 | 222 | | 参数 | 说明 | 类型 | 可选值 | 默认值 | 223 | |---------- |-------------- |---------- |-------------------------------- |-------- | 224 | | gutter | 栅格间隔 | number | — | 0 | 225 | | type | 布局模式，可选 flex，现代浏览器下有效 | string | — | — | 226 | | justify | flex 布局下的水平排列方式 | string | start/end/center/space-around/space-between | start | 227 | | align | flex 布局下的垂直排列方式 | string | top/middle/bottom | top | 228 | | tag | 自定义元素标签 | string | * | div | 229 | 230 | ### Col Attributes 231 | | 参数 | 说明 | 类型 | 可选值 | 默认值 | 232 | |---------- |-------------- |---------- |-------------------------------- |-------- | 233 | | span | 栅格占据的列数 | number | — | — | 234 | | offset | 栅格左侧的间隔格数 | number | — | 0 | 235 | | push | 栅格向右移动格数 | number | — | 0 | 236 | | pull | 栅格向左移动格数 | number | — | 0 | 237 | | xs | `<768px` 响应式栅格数或者栅格属性对象 | number/object (例如： {span: 4, offset: 4}) | — | — | 238 | | sm | `≥768px` 响应式栅格数或者栅格属性对象 | number/object (例如： {span: 4, offset: 4}) | — | — | 239 | | md | `≥992` 响应式栅格数或者栅格属性对象 | number/object (例如： {span: 4, offset: 4}) | — | — | 240 | | lg | `≥1200` 响应式栅格数或者栅格属性对象 | number/object (例如： {span: 4, offset: 4}) | — | — | 241 | | tag | 自定义元素标签 | string | * | div | 242 | -------------------------------------------------------------------------------- /examples/docs/loading.md: -------------------------------------------------------------------------------- 1 | 9 | # Loading 加载组件 10 | ---- 11 | ### 概述 12 | 用于过渡效果, 增效用户体验 13 | 14 | ### 基础用法 15 | 由`size`属性来选择`hour`的大小, 默认是正常尺寸, 还可以设置成`small`小尺寸沙漏。 16 | 17 |
18 |
19 |
20 | 21 | 22 |
23 | 24 |
25 |
26 | 27 | :::demo 28 | ```html 29 | 33 | ``` 34 | ::: 35 | 36 | ### 不同颜色 37 | 由`sand-color`属性来选择`沙子`的颜色, 默认为`#409EFF`; 38 | 由`back-color`属性来选择`背景`的颜色, 默认为`#D7CED0`; 39 | 由`board-color`属性来选择`上下板`的颜色, 默认为`grey`; 40 | 41 | 42 |
43 |
44 |
45 | 46 | 47 | 48 | 49 | 50 | 51 |
52 |
53 |
54 | 55 | :::demo 56 | ```html 57 | 65 | ``` 66 | ::: 67 | 68 | 69 | ### Attributes 70 | 71 | | 参数 | 说明 | 类型 | 默认 | 可选值 | 是否必填 | 72 | |---------- |--------------|--------- |---------- |-------------------------------- |-------- | 73 | | size | 尺寸 | String | normal | normal,small | - | 74 | | sand-color | 沙子颜色 | String | #409EFF | 颜色编码 | - | 75 | | back-color | 背景颜色 | string | #D7CED0 | 颜色编码 |- | 76 | | board-color | 上下板颜色 | string | grey | 颜色编码 |- | 77 | -------------------------------------------------------------------------------- /examples/docs/logs.md: -------------------------------------------------------------------------------- 1 | # Logs 更新日志 2 | ---- 3 | * 2018/11/9   ```v1.1.0``` 新增 功能: Loading模块 4 | * 2018/8/26 ```v1.0.9``` 发布 新增 Twotable 模块已经说明 5 | * 2018/8/26 ```v1.0.8``` 发布 新增 Card 模块已经说明 6 | * 2018/8/13 ```v1.0.7``` 发布 新增 Breadcrume 模块已经说明 7 | * 2018/8/12 ```v1.0.6``` 发布 新增 Message 模块已经说明 8 | * 2018/8/3   ```v1.0.5``` 发布 新增 icon 模块已经说明 9 | * 2018/8/2   ```v1.0.4``` 发布 测试npm 10 | * 2018/8/2   ```v1.0.2``` 发布 修改README.md 11 | * 2018/8/2   ```v1.0.1``` 发布 修改bug 12 | * 2018/8/2   ```v1.0.0``` 发布 功能: Layout, Button 13 | 14 | 15 | -------------------------------------------------------------------------------- /examples/docs/message.md: -------------------------------------------------------------------------------- 1 | 73 | 74 | ## Message 消息提示 75 | 76 | 常用于主动操作后的反馈提示。与 Notification 的区别是后者更多用于系统级通知的被动提醒。 77 | 78 | ### 基础用法 79 | 80 | 从顶部出现，3 秒后自动消失。 81 |
82 |
83 | 打开消息提示 84 |
85 |
86 | 87 | :::demo 88 | ```html 89 | 92 | 101 | ``` 102 | ::: 103 | 104 | ### 不同状态 105 | 106 | 用来显示「成功、警告、消息、错误」类的操作反馈。当需要自定义更多属性时，Message 也可以接收一个对象为参数。比如，设置`type`字段可以定义不同的状态，默认为`info`。此时正文内容以`message`的值传入。同时，我们也为 Message 107 | 的各种 type 注册了方法，可以在不传入`type`字段的情况下像`open4`那样直接调用。 108 | 109 |
110 |
111 | 成功 112 | 警告 113 | 消息 114 | 错误 115 |
116 |
117 | 118 | :::demo 119 | ```html 120 | 126 | 152 | ``` 153 | ::: 154 | 155 | ### 可关闭 156 | 可以添加关闭按钮。默认的 Message 是不可以被人工关闭的，如果需要可手动关闭的 Message， 157 | 可以使用`showClose`字段。此外，和 Notification 一样，Message 拥有可控的`duration`， 158 | 设置`0`为不会被自动关闭，默认为3000 毫秒。 159 | 160 |
161 |
162 | 消息 163 | 成功 164 | 警告 165 | 错误 166 |
167 |
168 | 169 | :::demo 170 | ```html 171 | 177 | 212 | ``` 213 | ::: 214 | 215 | 216 | 217 | 218 | ### 文字居中 219 | 使用 `center` 属性让文字水平居中。 220 | 221 |
222 |
223 | 文字居中 224 |
225 |
226 | 227 | :::demo 228 | 229 | ```html 230 | 233 | 234 | 246 | ``` 247 | ::: 248 | 249 | ### 使用 HTML 片段 250 | `message` 属性支持传入 HTML 片段 251 | 将`dangerouslyUseHTMLString`属性设置为 true，`message` 就会被当作 HTML 片段处理。 252 | 253 | 254 |
255 |
256 | 使用 HTML 片段 257 |
258 |
259 | 260 | :::demo 261 | ```html 262 | 265 | 266 | 278 | ``` 279 | ::: 280 | 281 | ### Warning 282 | >>`message` 属性虽然支持传入 HTML 片段，但是在网站上动态渲染任意 HTML 是非常危险的，因为容易导致 283 | >>[XSS 攻击](https://en.wikipedia.org/wiki/Cross-site_scripting)。因此在 `dangerouslyUseHTMLString`
284 | >>打开的情况下，请确保 `message` 的内容是可信的，**永远不要**将用户提交的内容赋值给 `message` 属性。 285 | 286 | 287 | ### 全局方法 288 | 289 | jk-ui 为 Vue.prototype 添加了全局方法 $message。因此在 vue instance 中可以采用本页面中的方式调用 `Message`。 290 | 291 | ### 单独引用 292 | 293 | 单独引入 `Message`： 294 | 295 | ```javascript 296 | import { Message } from 'jk-ui'; 297 | ``` 298 | 299 | 此时调用方法为 `Message(options)`。我们也为每个 type 定义了各自的方法，如 `Message.success(options)`。并且可以调用 `Message.closeAll()` 手动关闭所有实例。 300 | 301 | ### Options 302 | | 参数 | 说明 | 类型 | 可选值 | 默认值 | 303 | |---------- |-------------- |---------- |-------------------------------- |-------- | 304 | | message | 消息文字 | string / VNode | — | — | 305 | | type | 主题 | string | success/warning/info/error | info | 306 | | iconClass | 自定义图标的类名，会覆盖 `type` | string | — | — | 307 | | dangerouslyUseHTMLString | 是否将 message 属性作为 HTML 片段处理 | boolean | — | false | 308 | | customClass | 自定义类名 | string | — | — | 309 | | duration | 显示时间, 毫秒。设为 0 则不会自动关闭 | number | — | 3000 | 310 | | showClose | 是否显示关闭按钮 | boolean | — | false | 311 | | center | 文字是否居中 | boolean | — | false | 312 | | onClose | 关闭时的回调函数, 参数为被关闭的 message 实例 | function | — | — | 313 | 314 | ### 方法 315 | 调用 `Message` 或 `this.$message` 会返回当前 Message 的实例。如果需要手动关闭实例，可以调用它的 `close` 方法。 316 | | 方法名 | 说明 | 317 | | ---- | ---- | 318 | | close | 关闭当前的 Message | 319 | -------------------------------------------------------------------------------- /examples/docs/start.md: -------------------------------------------------------------------------------- 1 | 2 | # 快速上手 3 | 4 | ---- 5 | 6 | ## 使用前准备 7 | 8 | > 在使用之前，推荐学习 `Vue` 和 `ES2016` ，并正确配置 `Node.js` v6.x 或以上版本 9 | 10 | `jk-ui` 基于 `Vue.js` 2.x+ 版本开发，所以有必要了解以下基础知识： 11 | - [Vue 组件](https://cn.vuejs.org/v2/guide/components.html) 12 | - [单文件组件](https://cn.vuejs.org/v2/guide/single-file-components.html) 13 | 14 | ## 基于模板工程开发 15 | 16 | > `Vue.js` 提供一个官方命令行工具 `vue-cli`，可用于快速搭建大型单页应用。该工具提供开箱即用的构建工具配置，带来现代化的前端开发流程。只需几分钟即可创建并启动一个带热重载、保存时静态检查以及可用于生产环境的构建配置的项目。 17 | 18 | ```bash 19 | > npm i -g vue-cli 20 | 21 | > mkdir my-project && cd my-project 22 | 23 | > vue init webpack 24 | 25 | > npm i && npm i jk-ui --save 26 | ``` 27 | 28 | ## 标准开发 29 | 30 | 实际项目中，往往会使用 `webpack`，`rollup` 或者 `gulp` 的工作流，大多可以做到按需加载页面用到的组件，所以不推荐直接使用 ` 78 | 79 | 80 | ::: demo 81 | ```html 82 |
83 | {{tag.name}} 89 | 90 | 120 |
121 | ``` 122 | ::: 123 | 124 | 125 | 126 | ## API 127 | 128 | | 参数 | 说明 | 类型 | 可选值 | 默认值 | 129 | |---------- |-------------- |---------- |-------------------------------- |-------- | 130 | | name | 用于触发关闭事件时的回调 | Boolean | — | false | 131 | | color | 类型 | String | `primary`, `success`, `error`, `warning`, `info` | primary | 132 | | closable | 是否可关闭 | Boolean | — | false | 133 | 134 | ## Tag 事件 135 | 136 | | 事件名称 | 说明 | 返回值 | 137 | |---------- |-------------- |---------- | 138 | | close | 点击关闭按钮时触发 | event | 139 | -------------------------------------------------------------------------------- /examples/docs/twotable.md: -------------------------------------------------------------------------------- 1 | 2 | # Twotable 二维表格 3 | ---- 4 | ### 基础用法 5 | 由`data`属性来绑定数据，x属性设置列名, y属性设置行名。 6 | 7 | 8 |
9 |
10 | 11 |
12 |
13 | 29 | 30 | :::demo 31 | ```html 32 | 33 | 36 | 52 | ``` 53 | ::: 54 | 55 | 56 | 57 | ### Attributes 58 | 59 | | 参数 | 说明 | 类型 | 可选值 | 是否必填 | 60 | |---------- |-------------- |---------- |-------------------------------- |-------- | 61 | | data | 显示数据 | array | — | 必填 | 62 | | x | 列名 | string | — | 必填 | 63 | | y | 行名 | string | — | 必填 | 64 | | xy-value | 表格单元要显示的数据名 | string | — | 必填 | 65 | | x-header | x向表头名 | string | — | 选填 | 66 | | y-header | y向表头名 | string | — | 选填 | 67 | -------------------------------------------------------------------------------- /examples/icon.json: -------------------------------------------------------------------------------- 1 | [ 2 | "icon-link", 3 | "icon-cartfill", 4 | "icon-cart", 5 | "icon-remindfill", 6 | "icon-remind", 7 | "icon-back", 8 | "icon-top", 9 | "icon-down", 10 | "icon-right", 11 | "icon-left", 12 | "icon-lbsfill", 13 | "icon-lbs", 14 | "icon-refresh", 15 | "icon-tag", 16 | "icon-wow", 17 | "icon-sad", 18 | "icon-smile", 19 | "icon-delete", 20 | "icon-edit", 21 | "icon-favfill", 22 | "icon-fav", 23 | "icon-write", 24 | "icon-comments", 25 | "icon-feedback", 26 | "icon-share", 27 | "icon-user", 28 | "icon-my", 29 | "icon-home", 30 | "icon-date", 31 | "icon-message", 32 | "icon-search", 33 | "icon-scan", 34 | "icon-like", 35 | "icon-likefill", 36 | "icon-lock", 37 | "icon-mobile", 38 | "icon-closefill", 39 | "icon-close", 40 | "icon-attachment", 41 | "icon-pic", 42 | "icon-more", 43 | "icon-plane", 44 | "icon-planefill", 45 | "icon-computer", 46 | "icon-ascend", 47 | "icon-defaultsort", 48 | "icon-falling", 49 | "icon-filter", 50 | "icon-filter2", 51 | "icon-cloudfill", 52 | "icon-cloud", 53 | "icon-downloadfill", 54 | "icon-download", 55 | "icon-close2" 56 | ] 57 | -------------------------------------------------------------------------------- /examples/main.js: -------------------------------------------------------------------------------- 1 | // The Vue build version to load with the `import` command 2 | // (runtime-only or standalone) has been set in webpack.base.conf with an alias. 3 | import Vue from 'vue' 4 | import App from './App' 5 | import demoBlock from './components/demo-block.vue' 6 | import router from './router' 7 | import JKUI from '../packages/index' 8 | import '../packages/theme-default/lib/index.css' 9 | 10 | Vue.component('demo-block', demoBlock) 11 | 12 | Vue.config.productionTip = false 13 | Vue.use(JKUI) 14 | 15 | /* eslint-disable no-new */ 16 | new Vue({ 17 | el: '#app', 18 | router, 19 | components: { App }, 20 | template: '' 21 | }) 22 | -------------------------------------------------------------------------------- /examples/nav.config.json: -------------------------------------------------------------------------------- 1 | { 2 | "开发指南": [ 3 | { 4 | "path": "/", 5 | "redirect": "/guide" 6 | }, 7 | { 8 | "name": "guide", 9 | "path": "/guide", 10 | "desc": "介绍" 11 | }, 12 | { 13 | "name": "install", 14 | "path": "/install", 15 | "desc": "安装" 16 | }, 17 | { 18 | "name": "start", 19 | "path": "/start", 20 | "desc": "快速开始" 21 | }, 22 | { 23 | "name": "logs", 24 | "path": "/logs", 25 | "desc": "更新日志" 26 | } 27 | ], 28 | "组件": [ 29 | { 30 | "desc": "基础组件", 31 | "path": "/", 32 | "items": [ 33 | { 34 | "desc": "Layout 布局", 35 | "path": "/layout", 36 | "name": "layout" 37 | }, 38 | { 39 | "desc": "Icon 图标", 40 | "path": "/icon", 41 | "name": "icon" 42 | }, 43 | { 44 | "desc": "Button 按钮", 45 | "path": "/button", 46 | "name": "button" 47 | }, 48 | { 49 | "desc": "Tag 标签", 50 | "path": "/tag", 51 | "name": "tag" 52 | } 53 | ] 54 | }, 55 | { 56 | "desc": "视图组件", 57 | "path": "/", 58 | "items": [ 59 | { 60 | "desc": "Message 信息", 61 | "path": "/message", 62 | "name": "message" 63 | }, 64 | { 65 | "desc": "Breadcrumb 面包屑", 66 | "path": "/breadcrumb", 67 | "name": "breadcrumb" 68 | }, 69 | { 70 | "desc": "Card 卡片", 71 | "path": "/card", 72 | "name": "card" 73 | }, 74 | { 75 | "desc": "Twotable 二维表格", 76 | "path": "/twotable", 77 | "name": "twotable" 78 | }, 79 | { 80 | "desc": "Loading 加载", 81 | "path": "/loading", 82 | "name": "loading" 83 | } 84 | ] 85 | } 86 | ] 87 | } -------------------------------------------------------------------------------- /examples/router/index.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import Router from 'vue-router' 3 | import navConf from '../nav.config.json' 4 | 5 | Vue.use(Router) 6 | 7 | let routes = [] 8 | 9 | Object.keys(navConf).forEach((header) => { 10 | routes = routes.concat(navConf[header]) 11 | }) 12 | 13 | let addComponent = (router) => { 14 | router.forEach((route) => { 15 | if (route.items) { 16 | addComponent(route.items) 17 | routes = routes.concat(route.items) 18 | } else { 19 | if (route.type === 'pages') { 20 | route.component = r => require.ensure([], () => 21 | r(require(`../components/${route.name}.vue`))) 22 | return 23 | } 24 | route.component = r => require.ensure([], () => 25 | r(require(`../docs/${route.name}.md`))) 26 | } 27 | }) 28 | } 29 | addComponent(routes) 30 | 31 | 32 | export default new Router({ 33 | routes: routes 34 | }) 35 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | jk-ui 7 | 8 | 9 |
10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "jk-ui", 3 | "version": "1.0.8", 4 | "description": "A Vue.js project", 5 | "author": "jikeliuyang <18817843920@163.com>", 6 | "private": true, 7 | "scripts": { 8 | "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js", 9 | "start": "npm run dev", 10 | "build": "node build/build.js" 11 | }, 12 | "dependencies": { 13 | "cheerio": "^1.0.0-rc.2", 14 | "less": "^3.8.0", 15 | "less-loader": "^4.1.0", 16 | "markdown-it-container": "^2.0.0", 17 | "node-sass": "^4.9.3", 18 | "path": "^0.12.7", 19 | "sass-loader": "^7.1.0", 20 | "vue": "^2.5.2", 21 | "vue-markdown-loader": "^2.4.1", 22 | "vue-router": "^3.0.1" 23 | }, 24 | "devDependencies": { 25 | "autoprefixer": "^7.1.2", 26 | "babel-core": "^6.22.1", 27 | "babel-helper-vue-jsx-merge-props": "^2.0.3", 28 | "babel-loader": "^7.1.1", 29 | "babel-plugin-syntax-jsx": "^6.18.0", 30 | "babel-plugin-transform-runtime": "^6.22.0", 31 | "babel-plugin-transform-vue-jsx": "^3.5.0", 32 | "babel-preset-env": "^1.3.2", 33 | "babel-preset-stage-2": "^6.22.0", 34 | "chalk": "^2.0.1", 35 | "copy-webpack-plugin": "^4.0.1", 36 | "css-loader": "^0.28.0", 37 | "extract-text-webpack-plugin": "^3.0.0", 38 | "file-loader": "^1.1.4", 39 | "friendly-errors-webpack-plugin": "^1.6.1", 40 | "html-webpack-plugin": "^2.30.1", 41 | "node-notifier": "^5.1.2", 42 | "node-sass": "^4.9.3", 43 | "optimize-css-assets-webpack-plugin": "^3.2.0", 44 | "ora": "^1.2.0", 45 | "portfinder": "^1.0.13", 46 | "postcss-import": "^11.0.0", 47 | "postcss-loader": "^2.0.8", 48 | "postcss-url": "^7.2.1", 49 | "rimraf": "^2.6.0", 50 | "sass-loader": "^7.1.0", 51 | "semver": "^5.3.0", 52 | "shelljs": "^0.7.6", 53 | "style-loader": "^0.22.1", 54 | "uglifyjs-webpack-plugin": "^1.1.1", 55 | "url-loader": "^0.5.8", 56 | "vue-loader": "^13.3.0", 57 | "vue-markdown-loader": "^2.4.1", 58 | "vue-style-loader": "^3.0.1", 59 | "vue-template-compiler": "^2.5.2", 60 | "webpack": "^3.6.0", 61 | "webpack-bundle-analyzer": "^2.9.0", 62 | "webpack-dev-server": "^2.9.1", 63 | "webpack-merge": "^4.1.0" 64 | }, 65 | "engines": { 66 | "node": ">= 6.0.0", 67 | "npm": ">= 3.0.0" 68 | }, 69 | "browserslist": [ 70 | "> 1%", 71 | "last 2 versions", 72 | "not ie <= 8" 73 | ] 74 | } 75 | -------------------------------------------------------------------------------- /packages/README.md: -------------------------------------------------------------------------------- 1 | ## Introduction 2 | > A Vue.js 2.0 UI Toolkit for Web 3 | 4 | ## Install 5 | `npm install jk-ui --save` 6 | 7 | ## Quick Start 8 | `import Vue from 'vue'`
9 | `import JKUI from 'jk-ui'`
10 | `import 'jk-ui/theme-default/lib/index.css'`
11 | `Vue.use(JKUI)` 12 | 13 | ## Author 14 | >Jike 15 | -------------------------------------------------------------------------------- /packages/breadcrumb-item/index.js: -------------------------------------------------------------------------------- 1 | import JBreadcrumbItem from '../breadcrumb/src/breadcrumb-item'; 2 | 3 | /* istanbul ignore next */ 4 | JBreadcrumbItem.install = function(Vue) { 5 | Vue.component(JBreadcrumbItem.name, JBreadcrumbItem); 6 | }; 7 | 8 | export default JBreadcrumbItem; 9 | -------------------------------------------------------------------------------- /packages/breadcrumb/index.js: -------------------------------------------------------------------------------- 1 | import JBreadcrumb from './src/breadcrumb.vue' 2 | 3 | JBreadcrumb.install = function(Vue) { 4 | Vue.component(JBreadcrumb.name, JBreadcrumb) 5 | } 6 | 7 | export default JBreadcrumb -------------------------------------------------------------------------------- /packages/breadcrumb/src/breadcrumb-item.vue: -------------------------------------------------------------------------------- 1 | 13 | 14 | -------------------------------------------------------------------------------- /packages/breadcrumb/src/breadcrumb.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | -------------------------------------------------------------------------------- /packages/button/index.js: -------------------------------------------------------------------------------- 1 | import Button from './src/button.vue' 2 | 3 | Button.install = function(Vue) { 4 | Vue.component(Button.name, Button) 5 | } 6 | 7 | export default Button -------------------------------------------------------------------------------- /packages/button/src/button.vue: -------------------------------------------------------------------------------- 1 | 15 | 16 | 43 | 44 | -------------------------------------------------------------------------------- /packages/card/index.js: -------------------------------------------------------------------------------- 1 | import Card from './src/card' 2 | 3 | Card.install = function (Vue) { 4 | Vue.component(Card.name, Card) 5 | } 6 | 7 | export default Card -------------------------------------------------------------------------------- /packages/card/src/card.vue: -------------------------------------------------------------------------------- 1 | 11 | 12 | 24 | 25 | -------------------------------------------------------------------------------- /packages/col/index.js: -------------------------------------------------------------------------------- 1 | import Col from './src/col' 2 | 3 | Col.install = function(Vue) { 4 | Vue.component(Col.name, Col) 5 | } 6 | 7 | export default Col -------------------------------------------------------------------------------- /packages/col/src/col.js: -------------------------------------------------------------------------------- 1 | 2 | export default { 3 | name: 'JCol', 4 | 5 | props: { 6 | span: { 7 | type: Number, 8 | default: 24 9 | }, 10 | tag: { 11 | type: String, 12 | default: 'div' 13 | }, 14 | offset: Number, 15 | pull: Number, 16 | push: Number, 17 | xs: [Number, Object], 18 | sm: [Number, Object], 19 | md: [Number, Object], 20 | lg: [Number, Object] 21 | }, 22 | computed: { 23 | gutter() { 24 | let parent = this.$parent 25 | while(parent && parent.$options.componentName !== 'JRow') { 26 | parent = parent.$parent 27 | } 28 | return parent ? parent.gutter : 0 29 | } 30 | }, 31 | render(h) { 32 | let classList = [] 33 | let style = {} 34 | 35 | if(this.gutter) { 36 | style.paddingLeft = this.gutter / 2 +'px' 37 | style.paddingRight = style.paddingLeft 38 | } 39 | let attrList = ['span', 'offset', 'pull', 'push'] 40 | let siezList = ['xs', 'sm', 'md', 'lg'] 41 | attrList.forEach(prop => { 42 | if (this[prop]) { 43 | classList.push( 44 | prop !== 'span' ? `j-col-${prop}-${this[prop]}` 45 | : `j-col-${this[prop]}` 46 | ) 47 | } 48 | }) 49 | 50 | siezList.forEach(size => { 51 | if(typeof this[size] === 'number' ) { 52 | classList.push(`w-col-${size}-${this[size]}`) 53 | } else if(typeof this[size] === 'object') { 54 | let props = this[size] 55 | Object.keys(props).forEach(prop => { 56 | classList.push( 57 | prop !== 'span' 58 | ? `j-col-${size}-${prop}-${props[prop]}` 59 | : `j-col-${size}-${props[prop]}` 60 | ) 61 | }) 62 | } 63 | }) 64 | 65 | return h(this.tag, { 66 | class: ['j-col', classList], 67 | style 68 | }, this.$slots.default) 69 | } 70 | } -------------------------------------------------------------------------------- /packages/hour/index.js: -------------------------------------------------------------------------------- 1 | 2 | import Hour from './src/hour.vue' 3 | Hour.install = function(Vue) { 4 | Vue.component(Hour.name, Hour) 5 | } 6 | 7 | export default Hour -------------------------------------------------------------------------------- /packages/hour/src/hour.vue: -------------------------------------------------------------------------------- 1 | 26 | 27 | -------------------------------------------------------------------------------- /packages/index.js: -------------------------------------------------------------------------------- 1 | /* 2 | * @author jike 3 | * Date: 18/7/27 4 | */ 5 | import Vue from 'vue' 6 | import JButton from './button/index' 7 | import JCol from './col/index' 8 | import JRow from './row/index' 9 | import JTag from './tag/index' 10 | import Message from './message/index' 11 | import JBreadcrumb from './breadcrumb/index' 12 | import JBreadcrumbItem from './breadcrumb-item/index' 13 | import JCard from './card/index' 14 | import towTable from './two-dimensional-table/index'; 15 | import Hour from './hour/index'; 16 | 17 | 18 | const components = [ 19 | JButton, 20 | JCol, 21 | JRow, 22 | JTag, 23 | JBreadcrumb, 24 | JBreadcrumbItem, 25 | JCard, 26 | towTable, 27 | Hour 28 | ] 29 | 30 | 31 | const install = function(Vue) { 32 | if(install.installed) return 33 | components.map(component => Vue.component(component.name, component)) 34 | Vue.prototype.$message = Message 35 | } 36 | 37 | 38 | export default { 39 | install, 40 | JButton, 41 | JCol, 42 | JRow, 43 | JTag, 44 | JBreadcrumb, 45 | JBreadcrumbItem, 46 | JCard, 47 | towTable, 48 | Hour 49 | } -------------------------------------------------------------------------------- /packages/message/index.js: -------------------------------------------------------------------------------- 1 | import Message from './src/message.js' 2 | 3 | export default Message -------------------------------------------------------------------------------- /packages/message/src/message.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import Main from './message.vue' 3 | import Message from '..'; 4 | 5 | let MessageConstructor = Vue.extend(Main) 6 | let instance 7 | let instances = [] 8 | let seed = 1 9 | let typeList = [ 10 | 'success', 'warning', 'info', 'error' 11 | ] 12 | 13 | const showMessage= function(options) { // 这里的options用户定义的message样式选项 14 | var options = options || {}; 15 | 16 | if (typeof options === 'string') { 17 | options = { 18 | message: options 19 | } 20 | } 21 | let userOnClose = options.onClose 22 | let id = 'message_' + seed++ 23 | 24 | options.onClose = function() { 25 | showMessage.close(id, userOnClose) 26 | } 27 | instance = new MessageConstructor({ 28 | data: options 29 | }) 30 | 31 | instance.id = id 32 | instance.vm = instance.$mount() // 实例化vue,但未挂载 33 | document.body.appendChild(instance.vm.$el) // 通过原生的DOM API,append挂载到 34 | instance.vm.visible = true 35 | instance.dom = instance.vm.$el 36 | console.log(this) 37 | //控制台输出1，再输出2 38 | instance.dom.style.zIndex = 10000 39 | console.log(this) 40 | instances.push(instance) 41 | return instance.vm 42 | } 43 | 44 | typeList.forEach(type => { 45 | showMessage[type] = options => { 46 | if (typeof options === 'string') { 47 | options = { 48 | message: options 49 | } 50 | options.type = type 51 | return showMessage(options) 52 | } 53 | } 54 | }) 55 | 56 | showMessage.close = function(id, userOnClose) { 57 | for (let i = 0, len = instances.length; i < len; i++) { 58 | if ( id === instances[i].id) { 59 | if (typeof userOnClose === 'function') { 60 | userOnClose(instances[i]) 61 | } 62 | instances.splice(i, 1) 63 | break 64 | } 65 | } 66 | } 67 | 68 | showMessage.closeAll = function () { 69 | for (let i = instances.length - 1; i >= 0; i--) { 70 | instances[i].close() 71 | } 72 | } 73 | 74 | 75 | export default showMessage -------------------------------------------------------------------------------- /packages/message/src/message.vue: -------------------------------------------------------------------------------- 1 | 25 | 26 | -------------------------------------------------------------------------------- /packages/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "jk-ui", 3 | "version": "1.1.1", 4 | "description": "UI base on Vue", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "repository": { 10 | "type": "git", 11 | "url": "git+ssh://git@github.com/liuyangjike/JKUI.git" 12 | }, 13 | "keywords": [ 14 | "UI" 15 | ], 16 | "author": "Jike", 17 | "license": "ISC", 18 | "bugs": { 19 | "url": "https://github.com/liuyangjike/JKUI/issues" 20 | }, 21 | "homepage": "https://github.com/liuyangjike/JKUI#readme" 22 | } 23 | -------------------------------------------------------------------------------- /packages/row/index.js: -------------------------------------------------------------------------------- 1 | import Row from './src/row' 2 | 3 | Row.install = function(Vue) { 4 | Vue.component(Row.name, Row) 5 | } 6 | 7 | export default Row -------------------------------------------------------------------------------- /packages/row/src/row.js: -------------------------------------------------------------------------------- 1 | export default { 2 | name: 'JRow', 3 | componentName: 'JRow', 4 | 5 | props: { 6 | tag: { 7 | type: String, 8 | default: 'div' 9 | }, 10 | gutter: Number, 11 | type: String, 12 | justify: { 13 | type: String, 14 | default: 'start' 15 | }, 16 | align: { 17 | type: String, 18 | default: 'top' 19 | } 20 | }, 21 | 22 | computed: { 23 | style() { 24 | var ret = {} 25 | if (this.gutter) { 26 | ret.paddingLeft = `-${this.gutter / 2}px` 27 | ret.paddingRgiht = ret.paddingLeft 28 | } 29 | return ret 30 | } 31 | }, 32 | render(h) { 33 | return h(this.tag, { 34 | class: [ 35 | 'j-row', 36 | this.justify !== 'start' ? `is-justify-${this.justify}` : '', 37 | this.align !== 'top' ? `is-align-${this.align}`: '', 38 | { 39 | 'j-row--flex': this.type === 'flex' 40 | } 41 | ], 42 | style: this.style, 43 | }, this.$slots.default) 44 | } 45 | 46 | } -------------------------------------------------------------------------------- /packages/tag/index.js: -------------------------------------------------------------------------------- 1 | 2 | import Tag from './src/tag.vue' 3 | Tag.install = function(Vue) { 4 | Vue.component(Tag.name, Tag) 5 | } 6 | 7 | export default Tag -------------------------------------------------------------------------------- /packages/tag/src/tag.vue: -------------------------------------------------------------------------------- 1 | 9 | 10 | -------------------------------------------------------------------------------- /packages/theme-default/lib/breadcrumb.scss: -------------------------------------------------------------------------------- 1 | .j-breadcrumb{ 2 | font-size: 14px; 3 | line-height: 1; 4 | &:after,&:before{ 5 | display: table; 6 | content: ""; 7 | } 8 | } 9 | 10 | .j-breadcrumb::after{ 11 | clear: both; 12 | } 13 | 14 | .j-breadcrumb__separator{ 15 | margin: 0 9px; 16 | font-weight: 700; 17 | color: #c0c4cc; 18 | } 19 | 20 | .j-breadcrumb__separator[class*=icon] { 21 | margin: 0 6px; 22 | color: #c0c4cc; 23 | font-weight: 600; 24 | } 25 | 26 | .j-breadcrumb__item { 27 | float: left; 28 | } 29 | 30 | .j-breadcrumb__inner{ 31 | color: #606266 32 | } 33 | 34 | .j-breadcrumb__inner a, 35 | .j-breadcrumb__inner.is-link{ 36 | font-weight: 700; 37 | text-decoration: none; 38 | -webkit-transition: color .2s cubic-bezier(.645, .045, .355, 1); 39 | transition: color .2s cubic-bezier(.645, .045, .355, 1); 40 | color: #303133 41 | } 42 | .j-breadcrumb__item:last-child .j-breadcrumb__inner, 43 | .j-breadcrumb__item:last-child .j-breadcrumb__inner a, 44 | .j-breadcrumb__item:last-child .j-breadcrumb__inner a:hover, 45 | .j-breadcrumb__item:last-child .j-breadcrumb__inner:hover{ 46 | font-weight: 400; 47 | color: #606266; 48 | cursor: text 49 | } 50 | 51 | .j-breadcrumb__item:last-child .j-breadcrumb__separator{ 52 | color: #ffffff 53 | } -------------------------------------------------------------------------------- /packages/theme-default/lib/button.scss: -------------------------------------------------------------------------------- 1 | @import './style/mixins.scss'; 2 | .j__button { 3 | display: inline-block; 4 | line-height: 1; 5 | white-space: nowrap; 6 | cursor: pointer; 7 | background: #fff; 8 | border: 1px solid #bfcbd9; 9 | color: $color-base; 10 | -webkit-appearance: none; 11 | text-align: center; 12 | box-sizing: border-box; 13 | outline: 0; 14 | margin: 0; 15 | border-radius: 4px; 16 | padding: 12px 20px; 17 | font-size: 14px; 18 | } 19 | 20 | .j__button.is-round { 21 | border-radius: 20px; 22 | } 23 | 24 | .j__button--size-medium { 25 | padding: 10px 20px; 26 | font-size: 14px; 27 | border-radius: 4px; 28 | } 29 | 30 | .j__button--size-small { 31 | padding: 9px 15px; 32 | font-size: 12px; 33 | border-radius: 3px; 34 | } 35 | 36 | .j__button--default { 37 | background: #fff; 38 | border: 1px solid #bfcbd9; 39 | color: $color-base; 40 | &:hover,&:focus{ 41 | @include diabled-color(63, 170, 245, .05, .08); 42 | color: $color-primary; 43 | } 44 | &:active{ 45 | background: #fff; 46 | outline: 0 47 | } 48 | &:disabled { 49 | background: #fff; 50 | border: 1px solid $color-primary; 51 | color: $color-base; 52 | @include disabled; 53 | } 54 | } 55 | 56 | .j__button--default.is-plain { 57 | border: 1px solid $color-primary; 58 | &:hover,&:focus { 59 | background: #fff; 60 | border-color: rgba(63, 170, 245, .8); 61 | color: $color-primary; 62 | } 63 | &:active { 64 | background: #fff; 65 | outline: 0 66 | } 67 | &:disabled { 68 | @include disabled; 69 | background: #fff; 70 | border: 1px solid #bfcbd9; 71 | color: $color-base; 72 | } 73 | } 74 | 75 | .j__button--primary { 76 | @include button-type($color-primary); 77 | color: #fff; 78 | &:focus,&:hover{ 79 | @include focus-hover;; 80 | } 81 | &:disabled { 82 | @include disabled; 83 | } 84 | } 85 | 86 | .j__button--primary.is-plain { 87 | background: rgba(63, 170, 245, .05); 88 | border-color: $color-primary; 89 | color: $color-primary; 90 | &:focus,&:hover{ 91 | opacity: 1; 92 | @include button-type($color-primary); 93 | color: #fff; 94 | } 95 | &:disabled { 96 | @include disabled; 97 | @include diabled-color(63, 170, 245, .05, .08); 98 | color: $color-primary; 99 | } 100 | } 101 | 102 | .j__button--success { 103 | @include button-type($color-success); 104 | color: #fff; 105 | &:focus,&:hover{ 106 | @include focus-hover;; 107 | } 108 | &:disabled { 109 | @include disabled; 110 | } 111 | } 112 | 113 | .j__button--success.is-plain { 114 | @include diabled-color(19, 206, 102, .05, .8); 115 | color: $color-success; 116 | &:focus,&:hover{ 117 | opacity: 1; 118 | background: $color-success; 119 | border: 1px solid $color-success; 120 | color: #fff; 121 | } 122 | &:disabled { 123 | @include disabled; 124 | @include diabled-color(63, 170, 245, .05, .08); 125 | color: $color-primary; 126 | } 127 | } 128 | 129 | 130 | .j__button--info { 131 | @include button-type($color-info); 132 | color: #fff; 133 | &:focus,&:hover{ 134 | @include focus-hover;; 135 | } 136 | &:disabled { 137 | @include disabled; 138 | } 139 | } 140 | 141 | 142 | .j__button--info.is-plain { 143 | background: #f4f4f5; 144 | border-color: #d3d4d6; 145 | color: $color-info; 146 | &:focus,&:hover{ 147 | opacity: 1; 148 | @include button-type($color-info); 149 | color: #fff 150 | } 151 | &:disabled { 152 | @include disabled; 153 | @include diabled-color(80, 191, 255, .05, .08); 154 | color: #50bfff; 155 | } 156 | } 157 | 158 | .j__button--warning { 159 | @include button-type($color-warning); 160 | color: #fff; 161 | &:focus,&:hover{ 162 | @include focus-hover;; 163 | } 164 | &:disabled { 165 | @include disabled; 166 | } 167 | } 168 | 169 | 170 | 171 | .j__button--warning.is-plain { 172 | @include diabled-color(247, 186, 42, .05, .08); 173 | color: $color-warning; 174 | &:focus,&:hover{ 175 | @include button-type($color-warning); 176 | color: #fff 177 | } 178 | &:disabled { 179 | @include disabled; 180 | @include diabled-color(247, 186, 42, .05, .08); 181 | color: $color-warning; 182 | } 183 | } 184 | 185 | 186 | .j__button--danger { 187 | @include button-type($color-danger); 188 | color: #fff; 189 | &:focus,&:hover{ 190 | @include focus-hover;; 191 | } 192 | &:disabled { 193 | @include disabled; 194 | 195 | } 196 | } 197 | 198 | .j__button--danger.is-plain { 199 | @include diabled-color(255, 73, 73, .05, .08); 200 | color: $color-danger; 201 | &:focus,&:hover{ 202 | opacity: 1; 203 | @include button-type($color-danger); 204 | color: #fff; 205 | } 206 | &:disabled { 207 | @include disabled; 208 | @include diabled-color(255, 73, 73, .05, .08); 209 | color: $color-danger 210 | } 211 | } 212 | 213 | 214 | .j__button--text { 215 | color: #409EFF; 216 | background: 0 0; 217 | padding-left: 0; 218 | padding-right: 0; 219 | &:focus,&:hover{ 220 | color: #66b1ff; 221 | border-color: transparent; 222 | background-color: transparent; 223 | } 224 | &:disabled { 225 | @include disabled; 226 | @include diabled-color(255, 73, 73, .05, .08); 227 | color: $color-danger 228 | } 229 | &:active{ 230 | color: #3a8ee6; 231 | background-color: transparent 232 | } 233 | } 234 | 235 | .j__button--text, 236 | .j__button--text.is-disabled, 237 | .j__button--text.is-disabled:focus, 238 | .j__button--text.is-disabled:hover, 239 | .j__button--text:active { 240 | border-color: transparent 241 | } 242 | 243 | .j__button.is-disabled.j__button--text { 244 | background-color: transparent 245 | } 246 | -------------------------------------------------------------------------------- /packages/theme-default/lib/card.scss: -------------------------------------------------------------------------------- 1 | .j-card{ 2 | border-radius: 4px; 3 | border: 1px solid #ebeef5; 4 | background-color: #fff; 5 | overflow: hidden; 6 | color: #303133; 7 | -webkit-transition: .3s; 8 | transition: .3s; 9 | } 10 | 11 | .j-card.is-always-shadow, 12 | .j-card.is-hover-shadow:focus, 13 | .j-card.is-hover-shadow:hover{ 14 | -webkit-box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1); 15 | box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1); 16 | } 17 | 18 | .j-card__header{ 19 | padding: 18px 20px; 20 | border-bottom: 1px solid #ebeef5; 21 | -webkit-box-sizing: border-box; 22 | box-sizing: border-box; 23 | } 24 | 25 | .j-card__body{ 26 | padding: 20px; 27 | } -------------------------------------------------------------------------------- /packages/theme-default/lib/col.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | @for $i from 0 through 24 { 4 | .j-col-#{$i} { 5 | width: (1 / 24 * $i * 100) * 1%; 6 | } 7 | 8 | .j-col-offset-#{$i} { 9 | margin-left: (1 / 24 * $i * 100) * 1%; 10 | } 11 | 12 | .j-col-pull-#{$i} { 13 | position: relative; 14 | right: (1 / 24 * $i * 100) * 1%; 15 | } 16 | 17 | .j-col-push-#{$i} { 18 | position: relative; 19 | left: (1 / 24 * $i * 100) * 1%; 20 | } 21 | } 22 | 23 | 24 | [class*="j-col-"] { 25 | float: left; 26 | box-sizing: border-box 27 | } 28 | 29 | .j-col-xs-0 { 30 | display: none; 31 | } 32 | 33 | @for $i from 0 through 24 { 34 | .j-col-xs-#{$i} { 35 | width: (1 / 24 * $i * 100) * 1%; 36 | } 37 | 38 | .j-col-xs-offset-#{$i} { 39 | margin-left: (1 / 24 * $i * 100) * 1%; 40 | } 41 | 42 | .j-col-xs-pull-#{$i} { 43 | position: relative; 44 | right: (1 / 24 * $i * 100) * 1%; 45 | } 46 | 47 | .j-col-xs-push-#{$i} { 48 | position: relative; 49 | left: (1 / 24 * $i * 100) * 1%; 50 | } 51 | } 52 | 53 | .j-col-sm-0 { 54 | display: none; 55 | } 56 | 57 | @for $i from 0 through 24 { 58 | .j-col-sm-#{$i} { 59 | width: (1 / 24 * $i * 100) * 1%; 60 | } 61 | 62 | .j-col-sm-offset-#{$i} { 63 | margin-left: (1 / 24 * $i * 100) * 1%; 64 | } 65 | 66 | .j-col-sm-pull-#{$i} { 67 | position: relative; 68 | right: (1 / 24 * $i * 100) * 1%; 69 | } 70 | 71 | .j-col-sm-push-#{$i} { 72 | position: relative; 73 | left: (1 / 24 * $i * 100) * 1%; 74 | } 75 | } 76 | 77 | 78 | .j-col-md-0 { 79 | display: none; 80 | } 81 | 82 | @for $i from 0 through 24 { 83 | .j-col-md-#{$i} { 84 | width: (1 / 24 * $i * 100) * 1%; 85 | } 86 | 87 | .j-col-md-offset-#{$i} { 88 | margin-left: (1 / 24 * $i * 100) * 1%; 89 | } 90 | 91 | .j-col-md-pull-#{$i} { 92 | position: relative; 93 | right: (1 / 24 * $i * 100) * 1%; 94 | } 95 | 96 | .j-col-md-push-#{$i} { 97 | position: relative; 98 | left: (1 / 24 * $i * 100) * 1%; 99 | } 100 | } 101 | 102 | .j-col-lg-0 { 103 | display: none; 104 | } 105 | 106 | @for $i from 0 through 24 { 107 | .j-col-lg-#{$i} { 108 | width: (1 / 24 * $i * 100) * 1%; 109 | } 110 | 111 | .j-col-lg-offset-#{$i} { 112 | margin-left: (1 / 24 * $i * 100) * 1%; 113 | } 114 | 115 | .j-col-lg-pull-#{$i} { 116 | position: relative; 117 | right: (1 / 24 * $i * 100) * 1%; 118 | } 119 | 120 | .j-col-lg-push-#{$i} { 121 | position: relative; 122 | left: (1 / 24 * $i * 100) * 1%; 123 | } 124 | } 125 | 126 | .j-col-xl-0 { 127 | display: none; 128 | } 129 | 130 | @for $i from 0 through 24 { 131 | .j-col-xl-#{$i} { 132 | width: (1 / 24 * $i * 100) * 1%; 133 | } 134 | 135 | .j-col-xl-offset-#{$i} { 136 | margin-left: (1 / 24 * $i * 100) * 1%; 137 | } 138 | 139 | .j-col-xl-pull-#{$i} { 140 | position: relative; 141 | right: (1 / 24 * $i * 100) * 1%; 142 | } 143 | 144 | .j-col-xl-push-#{$i} { 145 | position: relative; 146 | left: (1 / 24 * $i * 100) * 1%; 147 | } 148 | } -------------------------------------------------------------------------------- /packages/theme-default/lib/css/breadcrumb.css: -------------------------------------------------------------------------------- 1 | .j-breadcrumb{ 2 | font-size: 14px; 3 | line-height: 1 4 | } 5 | 6 | .j-breadcrumb::after, 7 | .j-breadcrumb::before{ 8 | display: table; 9 | content: "" 10 | } 11 | 12 | .j-breadcrumb::after{ 13 | clear: both; 14 | } 15 | 16 | .j-breadcrumb__separator{ 17 | margin: 0 9px; 18 | font-weight: 700; 19 | color: #c0c4cc; 20 | } 21 | 22 | .j-breadcrumb__separator[class*=icon] { 23 | margin: 0 6px; 24 | color: #c0c4cc; 25 | font-weight: 600; 26 | } 27 | 28 | .j-breadcrumb__item { 29 | float: left; 30 | } 31 | 32 | .j-breadcrumb__inner{ 33 | color: #606266 34 | } 35 | 36 | .j-breadcrumb__inner a, 37 | .j-breadcrumb__inner.is-link{ 38 | font-weight: 700; 39 | text-decoration: none; 40 | -webkit-transition: color .2s cubic-bezier(.645, .045, .355, 1); 41 | transition: color .2s cubic-bezier(.645, .045, .355, 1); 42 | color: #303133 43 | } 44 | .j-breadcrumb__item:last-child .j-breadcrumb__inner, 45 | .j-breadcrumb__item:last-child .j-breadcrumb__inner a, 46 | .j-breadcrumb__item:last-child .j-breadcrumb__inner a:hover, 47 | .j-breadcrumb__item:last-child .j-breadcrumb__inner:hover{ 48 | font-weight: 400; 49 | color: #606266; 50 | cursor: text 51 | } 52 | 53 | .j-breadcrumb__item:last-child .j-breadcrumb__separator{ 54 | color: #ffffff 55 | } -------------------------------------------------------------------------------- /packages/theme-default/lib/css/button.css: -------------------------------------------------------------------------------- 1 | 2 | .j__button{ 3 | display: inline-block; 4 | line-height: 1; 5 | white-space: nowrap; 6 | cursor: pointer; 7 | background: #fff; 8 | border: 1px solid #bfcbd9; 9 | color: #1f2d3d; 10 | -webkit-appearance: none; 11 | text-align: center; 12 | box-sizing: border-box; 13 | outline: 0; 14 | margin: 0; 15 | border-radius: 4px; 16 | padding: 12px 20px; 17 | font-size: 14px; 18 | } 19 | .j__button.is-round{ 20 | border-radius: 20px; 21 | } 22 | .j__button--size-medium{ 23 | padding: 10px 20px; 24 | font-size: 14px; 25 | border-radius: 4px; 26 | } 27 | .j__button--size-small{ 28 | padding: 9px 15px; 29 | font-size: 12px; 30 | border-radius: 3px; 31 | } 32 | .j__button--default{ 33 | background: #fff; 34 | border: 1px solid #bfcbd9; 35 | color: #1f2d3d; 36 | } 37 | .j__button--default:focus, 38 | .j__button--default:hover{ 39 | background: rgba(63, 170, 245, .05); 40 | border-color:rgba(63, 170, 245, .08); 41 | color: #3FAAF5; 42 | } 43 | .j__button--default:disabled{ 44 | opacity: .3; 45 | background: #fff; 46 | border: 1px solid #bfcbd9; 47 | color: #1f2d3d; 48 | cursor:not-allowed; 49 | } 50 | .j__button--default:active{ 51 | background: #fff; 52 | outline: 0 53 | } 54 | .j__button--default.is-plain{ 55 | border: 1px solid #3FAAF5 56 | } 57 | .j__button--default.is-plain:focus, 58 | .j__button--default.is-plain:hover{ 59 | background: #fff; 60 | border-color: rgba(63, 170, 245, .8); 61 | color: #3FAAF5; 62 | } 63 | .j__button--default.is-plain:disabled{ 64 | background: #fff; 65 | border: 1px solid #3FAAF5; 66 | color: #1f2d3d; 67 | cursor:not-allowed; 68 | } 69 | .j__button--primary{ 70 | background: #3FAAF5; 71 | border: 1px solid #3FAAF5; 72 | color: #fff; 73 | } 74 | .j__button--primary:focus, 75 | .j__button--primary:hover{ 76 | opacity: .7; 77 | } 78 | .j__button--primary:disabled{ 79 | opacity: .3; 80 | cursor:not-allowed; 81 | } 82 | .j__button--primary.is-plain{ 83 | background: rgba(63, 170, 245, .05); 84 | border-color: #3faaf5cc; 85 | color: #3FAAF5 86 | } 87 | .j__button--primary.is-plain:focus, 88 | .j__button--primary.is-plain:hover{ 89 | opacity: 1; 90 | background: #3FAAF5; 91 | border: 1px solid #3FAAF5; 92 | color: #fff 93 | } 94 | .j__button--primary.is-plain:disabled{ 95 | opacity: .3; 96 | background: rgba(63, 170, 245, .05); 97 | border-color: rgba(63, 170, 245, .8); 98 | color: #3FAAF5; 99 | cursor:not-allowed; 100 | } 101 | 102 | 103 | .j__button--success { 104 | background: #13ce66; 105 | border: 1px solid #13ce66; 106 | color: #fff; 107 | } 108 | 109 | .j__button--success:focus, 110 | .j__button--success:hover { 111 | opacity: .7; 112 | } 113 | 114 | .j__button--success:disabled { 115 | opacity: .3; 116 | cursor:not-allowed; 117 | } 118 | 119 | .j__button--success.is-plain { 120 | background: rgba(19, 206, 102, .05); 121 | border-color: rgba(19, 206, 102, .8); 122 | color: #13ce66 123 | } 124 | 125 | .j__button--success.is-plain:focus, 126 | .j__button--success.is-plain:hover { 127 | opacity: 1; 128 | background: #13ce66; 129 | border: 1px solid #13ce66; 130 | color: #fff 131 | } 132 | 133 | .j__button--success.is-plain:disabled { 134 | opacity: .3; 135 | background: rgba(63, 170, 245, .05); 136 | border-color: rgba(63, 170, 245, .8); 137 | color: #3FAAF5; 138 | cursor:not-allowed; 139 | } 140 | 141 | .j__button--info { 142 | background: #909399; 143 | border: 1px solid #909399; 144 | color: #fff 145 | } 146 | 147 | .j__button--info:focus, 148 | .j__button--info:hover { 149 | opacity: .7 150 | } 151 | 152 | .j__button--info:disabled { 153 | opacity: .3; 154 | cursor:not-allowed; 155 | } 156 | 157 | .j__button--info.is-plain { 158 | background: #f4f4f5; 159 | border-color: #d3d4d6; 160 | color: #909399 161 | } 162 | 163 | .j__button--info.is-plain:focus, 164 | .j__button--info.is-plain:hover { 165 | opacity: 1; 166 | background: #909399; 167 | border: 1px solid #909399; 168 | color: #fff 169 | } 170 | 171 | .j__button--info.is-plain:disabled { 172 | opacity: .3; 173 | background: rgba(80, 191, 255, .05); 174 | border-color: rgba(80, 191, 255, .8); 175 | color: #50bfff; 176 | cursor:not-allowed; 177 | } 178 | 179 | 180 | .j__button--warning { 181 | background: #f7ba2a; 182 | border: 1px solid #f7ba2a; 183 | color: #fff 184 | } 185 | 186 | .j__button--warning:focus, 187 | .j__button--warning:hover { 188 | opacity: .7 189 | } 190 | 191 | .j__button--warning:disabled { 192 | opacity: .3; 193 | cursor:not-allowed; 194 | } 195 | 196 | .j__button--warning.is-plain { 197 | background: rgba(247, 186, 42, .05); 198 | border-color: rgba(247, 186, 42, .8); 199 | color: #f7ba2a 200 | } 201 | 202 | .j__button--warning.is-plain:focus, 203 | .j__button--warning.is-plain:hover { 204 | opacity: 1; 205 | background: #f7ba2a; 206 | border: 1px solid #f7ba2a; 207 | color: #fff 208 | } 209 | 210 | .j__button--warning.is-plain:disabled { 211 | opacity: .3; 212 | background: rgba(247, 186, 42, .05); 213 | border-color: rgba(247, 186, 42, .8); 214 | color: #f7ba2a; 215 | cursor:not-allowed; 216 | } 217 | 218 | 219 | 220 | .j__button--danger { 221 | background: #ff4949; 222 | border: 1px solid #ff4949; 223 | color: #fff 224 | } 225 | 226 | .j__button--danger:focus, 227 | .j__button--danger:hover { 228 | opacity: .7 229 | } 230 | 231 | .j__button--danger:disabled { 232 | opacity: .3; 233 | cursor:not-allowed; 234 | } 235 | 236 | .j__button--danger.is-plain { 237 | background: rgba(255, 73, 73, .05); 238 | border-color: rgba(255, 73, 73, .8); 239 | color: #ff4949 240 | } 241 | 242 | .j__button--danger.is-plain:focus, 243 | .j__button--danger.is-plain:hover { 244 | opacity: 1; 245 | background: #ff4949; 246 | border: 1px solid #ff4949; 247 | color: #fff 248 | } 249 | 250 | .j__button--danger.is-plain:disabled { 251 | opacity: .3; 252 | background: rgba(255, 73, 73, .05); 253 | border-color: rgba(255, 73, 73, .8); 254 | color: #ff4949 255 | } 256 | 257 | 258 | .j__button--text { 259 | color: #409EFF; 260 | background: 0 0; 261 | padding-left: 0; 262 | padding-right: 0 263 | } 264 | 265 | .j__button--text:focus, 266 | .j__button--text:hover { 267 | color: #66b1ff; 268 | border-color: transparent; 269 | background-color: transparent 270 | } 271 | 272 | .j__button--text:active { 273 | color: #3a8ee6; 274 | background-color: transparent 275 | } 276 | 277 | .j__button--text, 278 | .j__button--text.is-disabled, 279 | .j__button--text.is-disabled:focus, 280 | .j__button--text.is-disabled:hover, 281 | .j__button--text:active { 282 | border-color: transparent 283 | } 284 | 285 | .j__button.is-disabled.j__button--text { 286 | background-color: transparent 287 | } 288 | -------------------------------------------------------------------------------- /packages/theme-default/lib/css/card.css: -------------------------------------------------------------------------------- 1 | .j-card{ 2 | border-radius: 4px; 3 | border: 1px solid #ebeef5; 4 | background-color: #fff; 5 | overflow: hidden; 6 | color: #303133; 7 | -webkit-transition: .3s; 8 | transition: .3s; 9 | } 10 | 11 | .j-card.is-always-shadow, 12 | .j-card.is-hover-shadow:focus, 13 | .j-card.is-hover-shadow:hover{ 14 | -webkit-box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1); 15 | box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1); 16 | } 17 | 18 | .j-card__header{ 19 | padding: 18px 20px; 20 | border-bottom: 1px solid #ebeef5; 21 | -webkit-box-sizing: border-box; 22 | box-sizing: border-box; 23 | } 24 | 25 | .j-card__body{ 26 | padding: 20px; 27 | } -------------------------------------------------------------------------------- /packages/theme-default/lib/css/hour.css: -------------------------------------------------------------------------------- 1 | .hour-container{ 2 | width: 60px; 3 | height: 120px; 4 | position: relative; 5 | background-color: #D7CED0; 6 | opacity: 0.9; 7 | border-radius: 2px; 8 | animation: hour-rotate 4s ease-in-out infinite; 9 | display: inline-block; 10 | } 11 | 12 | .upper-tap{ 13 | width: 100%; 14 | height: 6px; 15 | background-color: grey; 16 | border-radius: 2px; 17 | } 18 | 19 | .middle-tap{ 20 | width: 100%; 21 | height: 108px; 22 | } 23 | 24 | .bottom-tap{ 25 | width: 100%; 26 | height: 6px; 27 | background-color: grey; 28 | border-radius: 2px; 29 | } 30 | 31 | .upper-half-container{ 32 | width: 100%; 33 | height: 50%; 34 | overflow: hidden; 35 | position: relative; 36 | } 37 | .lower-half-container{ 38 | width: 100%; 39 | height: 50%; 40 | position: relative; 41 | overflow: hidden; 42 | } 43 | .upper-half-content{ 44 | position: absolute; 45 | border: 3px solid rgb(248, 248, 250); 46 | border-radius: 50%; 47 | height: 105px; 48 | width: 50px; 49 | top: -53px; 50 | left: 2px; 51 | box-shadow: 2px 1px 3px 0px #aaa; 52 | } 53 | 54 | .lower-half-content{ 55 | position: absolute; 56 | border: 3px solid rgb(243, 243, 250); 57 | border-radius: 50%; 58 | height: 105px; 59 | width: 50px; 60 | top: -2px; 61 | left: 2px; 62 | box-shadow: 2px 1px 3px 0px #aaa; 63 | } 64 | 65 | .upper-sand{ 66 | width: 100%; 67 | height: 100%; 68 | background-color: #409EFF; 69 | position: absolute; 70 | border-radius: 50%; 71 | top: 0px; 72 | overflow: hidden; 73 | } 74 | 75 | .lower-sand{ 76 | width: 100%; 77 | height: 100%; 78 | background-color: #409EFF; 79 | position: absolute; 80 | border-radius: 50%; 81 | top: 0px; 82 | overflow: hidden; 83 | } 84 | 85 | .sand-reduce{ 86 | height: 60%; 87 | width: 100%; 88 | background-color: #fff; 89 | animation: sand-reduce 4s linear infinite; 90 | } 91 | .sand-add{ 92 | height: 50%; 93 | width: 100%; 94 | background-color: #fff; 95 | animation: sand-add 4s linear infinite; 96 | } 97 | .sand-falling{ 98 | position: absolute; 99 | background-color: #409EFF; 100 | width: 5px; 101 | height: 0%; 102 | top: 50%; 103 | left: 50%; 104 | box-sizing: border-box; 105 | border-radius: 40%; 106 | border: 1px sold #fff; 107 | animation: sand-falling 4s linear infinite; 108 | overflow: hidden; 109 | } 110 | .sand-null{ 111 | width: 100%; 112 | height: 0; 113 | background-color: #fff; 114 | border: 1px sold #fff; 115 | animation: sand-null 4s linear infinite; 116 | } 117 | 118 | 119 | @keyframes sand-add{ 120 | 0%{ 121 | height: 53%; 122 | } 123 | 12.5%{ 124 | height: 51%; 125 | } 126 | 75%{ 127 | height: 36%; 128 | } 129 | 100%{ 130 | height: 36%; 131 | } 132 | } 133 | @keyframes sand-reduce{ 134 | 0%{ 135 | height: 65%; 136 | } 137 | 25%{ 138 | height: 78%; 139 | } 140 | 40%{ 141 | height: 89%; 142 | } 143 | 62.5%{ 144 | height: 100%; 145 | } 146 | 80%{ 147 | height: 100%; 148 | } 149 | 100%{ 150 | height: 100%; 151 | } 152 | } 153 | @keyframes sand-falling { 154 | 0%{ 155 | height: 0%; 156 | } 157 | 12.5%{ 158 | height: 45%; 159 | } 160 | 62.5%{ 161 | height: 45%; 162 | opacity: 1.0; 163 | } 164 | 100%{ 165 | height: 45%; 166 | opacity: 0.2; 167 | } 168 | } 169 | @keyframes sand-null{ 170 | 0%{ 171 | height: 0%; 172 | } 173 | 62.5%{ 174 | height: 0%; 175 | } 176 | 75%{ 177 | height: 71.7%; 178 | } 179 | 100%{ 180 | height: 71.7%; 181 | } 182 | } 183 | 184 | @keyframes hour-rotate{ 185 | 0%{ 186 | transform: rotate(0) 187 | } 188 | 75%{ 189 | transform: rotate(0deg) 190 | } 191 | 100%{ 192 | transform: rotate(720deg) 193 | } 194 | } 195 | 196 | .hour-container-small{ 197 | width: 40px; 198 | height: 80px; 199 | position: relative; 200 | background-color: #D7CED0; 201 | opacity: 0.9; 202 | overflow: hidden; 203 | border-radius: 2px; 204 | animation: hour-rotate 4s ease-in-out infinite; 205 | display: inline-block; 206 | } 207 | 208 | .upper-tap-small{ 209 | width: 100%; 210 | height: 4px; 211 | background-color: grey; 212 | border-radius: 2px; 213 | } 214 | .middle-tap-small{ 215 | width: 100%; 216 | height: 72px; 217 | } 218 | 219 | .upper-half-content-small{ 220 | position: absolute; 221 | border: 1px solid rgb(248, 248, 250); 222 | border-radius: 50%; 223 | height: 72px; 224 | width: 32px; 225 | top: -36px; 226 | left: 3px; 227 | box-shadow: 1px 1px 3px 0px #aaa; 228 | } 229 | 230 | .bottom-tap-small{ 231 | width: 100%; 232 | height: 4px; 233 | background-color: grey; 234 | border-radius: 2px; 235 | } 236 | 237 | .lower-half-content-small{ 238 | position: absolute; 239 | border: 1px solid rgb(243, 243, 250); 240 | border-radius: 50%; 241 | height: 72px; 242 | width: 32px; 243 | top: -2px; 244 | left: 3px; 245 | box-shadow: 2px 1px 3px 0px #aaa; 246 | } 247 | 248 | .upper-sand-small{ 249 | width: 100%; 250 | height: 100%; 251 | background-color: #409EFF; 252 | position: absolute; 253 | border-radius: 50%; 254 | top: 0px; 255 | overflow: hidden; 256 | } 257 | 258 | .lower-sand-small{ 259 | width: 100%; 260 | height: 100%; 261 | background-color: #409EFF; 262 | position: absolute; 263 | border-radius: 50%; 264 | top: 0px; 265 | overflow: hidden; 266 | } 267 | 268 | .sand-null-small{ 269 | width: 100%; 270 | height: 0; 271 | background-color: #fff; 272 | animation: sand-null-small 4s linear infinite; 273 | } 274 | @keyframes sand-null-small{ 275 | 0%{ 276 | height: 0%; 277 | } 278 | 62.5%{ 279 | height: 0%; 280 | } 281 | 75%{ 282 | height: 69%; 283 | } 284 | 100%{ 285 | height: 69%; 286 | } 287 | } -------------------------------------------------------------------------------- /packages/theme-default/lib/css/icon.css: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: iconfont; 3 | src: url(../fonts/iconfont.eot?t=1510363376926); 4 | src: url(../fonts/iconfont.eot?t=1510363376926#iefix) format('embedded-opentype'), url('data:application/x-font-woff;charset=utf-8;base64,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') format('woff'), url(../fonts/iconfont.ttf?t=1510363376926) format('truetype'), url(../fonts/iconfont.svg?t=1510363376926#iconfont) format('svg') 5 | } 6 | 7 | [class*="j-icon-"], 8 | [class^=j-icon-] { 9 | font-family: iconfont !important; 10 | font-size: 18px; 11 | font-style: normal; 12 | vertical-align: baseline; 13 | display: inline-block; 14 | -webkit-font-smoothing: antialiased; 15 | -moz-osx-font-smoothing: grayscale 16 | } 17 | 18 | .j-icon-link:before { 19 | content: "\e656" 20 | } 21 | 22 | .j-icon-cartfill:before { 23 | content: "\e659" 24 | } 25 | 26 | .j-icon-cart:before { 27 | content: "\e65a" 28 | } 29 | 30 | .j-icon-remindfill:before { 31 | content: "\e65e" 32 | } 33 | 34 | .j-icon-remind:before { 35 | content: "\e65f" 36 | } 37 | 38 | .j-icon-back:before { 39 | content: "\e662" 40 | } 41 | 42 | .j-icon-top:before { 43 | content: "\e663" 44 | } 45 | 46 | .j-icon-down:before { 47 | content: "\e664" 48 | } 49 | 50 | .j-icon-right:before { 51 | content: "\e665" 52 | } 53 | 54 | .j-icon-left:before { 55 | content: "\e666" 56 | } 57 | 58 | .j-icon-lbsfill:before { 59 | content: "\e668" 60 | } 61 | 62 | .j-icon-lbs:before { 63 | content: "\e669" 64 | } 65 | 66 | .j-icon-refresh:before { 67 | content: "\e66a" 68 | } 69 | 70 | .j-icon-tag:before { 71 | content: "\e66c" 72 | } 73 | 74 | .j-icon-wow:before { 75 | content: "\e66e" 76 | } 77 | 78 | .j-icon-sad:before { 79 | content: "\e66f" 80 | } 81 | 82 | .j-icon-smile:before { 83 | content: "\e670" 84 | } 85 | 86 | .j-icon-delete:before { 87 | content: "\e67e" 88 | } 89 | 90 | .j-icon-edit:before { 91 | content: "\e682" 92 | } 93 | 94 | .j-icon-favfill:before { 95 | content: "\e685" 96 | } 97 | 98 | .j-icon-fav:before { 99 | content: "\e686" 100 | } 101 | 102 | .j-icon-write:before { 103 | content: "\e687" 104 | } 105 | 106 | .j-icon-comments:before { 107 | content: "\e689" 108 | } 109 | 110 | .j-icon-feedback:before { 111 | content: "\e68a" 112 | } 113 | 114 | .j-icon-share:before { 115 | content: "\e68b" 116 | } 117 | 118 | .j-icon-user:before { 119 | content: "\e68e" 120 | } 121 | 122 | .j-icon-my:before { 123 | content: "\e690" 124 | } 125 | 126 | .j-icon-home:before { 127 | content: "\e696" 128 | } 129 | 130 | .j-icon-date:before { 131 | content: "\e697" 132 | } 133 | 134 | .j-icon-message:before { 135 | content: "\e698" 136 | } 137 | 138 | .j-icon-search:before { 139 | content: "\e699" 140 | } 141 | 142 | .j-icon-scan:before { 143 | content: "\e69a" 144 | } 145 | 146 | .j-icon-like:before { 147 | content: "\e69c" 148 | } 149 | 150 | .j-icon-likefill:before { 151 | content: "\e69d" 152 | } 153 | 154 | .j-icon-lock:before { 155 | content: "\e69e" 156 | } 157 | 158 | .j-icon-mobile:before { 159 | content: "\e6a0" 160 | } 161 | 162 | .j-icon-closefill:before { 163 | content: "\e6a6" 164 | } 165 | 166 | .j-icon-close:before { 167 | content: "\e6a7" 168 | } 169 | 170 | .j-icon-attachment:before { 171 | content: "\e6a9" 172 | } 173 | 174 | .j-icon-pic:before { 175 | content: "\e6aa" 176 | } 177 | 178 | .j-icon-more:before { 179 | content: "\e6ad" 180 | } 181 | 182 | .j-icon-plane:before { 183 | content: "\e6b1" 184 | } 185 | 186 | .j-icon-planefill:before { 187 | content: "\e6b2" 188 | } 189 | 190 | .j-icon-computer:before { 191 | content: "\e6b3" 192 | } 193 | 194 | .j-icon-ascend:before { 195 | content: "\e6b4" 196 | } 197 | 198 | .j-icon-defaultsort:before { 199 | content: "\e6b5" 200 | } 201 | 202 | .j-icon-falling:before { 203 | content: "\e6b6" 204 | } 205 | 206 | .j-icon-filter:before { 207 | content: "\e6b9" 208 | } 209 | 210 | .j-icon-filter2:before { 211 | content: "\e6ba" 212 | } 213 | 214 | .j-icon-cloudfill:before { 215 | content: "\e6cc" 216 | } 217 | 218 | .j-icon-cloud:before { 219 | content: "\e6cd" 220 | } 221 | 222 | .j-icon-downloadfill:before { 223 | content: "\e6ce" 224 | } 225 | 226 | .j-icon-download:before { 227 | content: "\e6cf" 228 | } 229 | 230 | .j-icon-close2:before { 231 | content: "\e6dd" 232 | } 233 | -------------------------------------------------------------------------------- /packages/theme-default/lib/css/index.css: -------------------------------------------------------------------------------- 1 | @import './button.scss'; 2 | @import './col.css'; 3 | @import './tag.css'; 4 | @import './row.css'; 5 | @import './icon.css'; 6 | @import './transition.css'; 7 | @import './message.css'; 8 | @import './breadcrumb.css'; 9 | @import './card.css'; 10 | @import './twotable.css'; 11 | @import './hour.css'; 12 | 13 | -------------------------------------------------------------------------------- /packages/theme-default/lib/css/message.css: -------------------------------------------------------------------------------- 1 | .j-message__closeBtn:focus, 2 | .j-message__content:focus { 3 | outline-width: 0 4 | } 5 | 6 | .j-message { 7 | min-width: 380px; 8 | -webkit-box-sizing: border-box; 9 | box-sizing: border-box; 10 | border-radius: 4px; 11 | border-width: 1px; 12 | border-style: solid; 13 | border-color: #ebeef5; 14 | position: fixed; 15 | left: 50%; 16 | top: 20px; 17 | -webkit-transform: translateX(-50%); 18 | transform: translateX(-50%); 19 | background-color: #edf2fc; 20 | -webkit-transition: opacity .3s, -webkit-transform .4s; 21 | transition: opacity .3s, -webkit-transform .4s; 22 | transition: opacity .3s, transform .4s; 23 | transition: opacity .3s, transform .4s, -webkit-transform .4s; 24 | overflow: hidden; 25 | padding: 15px 15px 15px 20px; 26 | display: -webkit-box; 27 | display: -ms-flexbox; 28 | display: flex; 29 | -webkit-box-align: center; 30 | -ms-flex-align: center; 31 | align-items: center 32 | } 33 | 34 | .j-message.is-center { 35 | -webkit-box-pack: center; 36 | -ms-flex-pack: center; 37 | justify-content: center 38 | } 39 | 40 | .j-message.is-closable .j-message__content { 41 | padding-right: 16px 42 | } 43 | 44 | .j-message p { 45 | margin: 0 46 | } 47 | 48 | .j-message--info .j-message__content { 49 | color: #909399 50 | } 51 | 52 | .j-message--success { 53 | background-color: #f0f9eb; 54 | border-color: #e1f3d8 55 | } 56 | 57 | .j-message--success .j-message__content { 58 | color: #67c23a 59 | } 60 | 61 | .j-message--warning { 62 | background-color: #fdf6ec; 63 | border-color: #faecd8 64 | } 65 | 66 | .j-message--warning .j-message__content { 67 | color: #e6a23c 68 | } 69 | 70 | .j-message--error { 71 | background-color: #fef0f0; 72 | border-color: #fde2e2 73 | } 74 | 75 | .j-message--error .j-message__content { 76 | color: #f56c6c 77 | } 78 | 79 | .j-message__icon { 80 | margin-right: 10px 81 | } 82 | 83 | .j-message__content { 84 | padding: 0; 85 | font-size: 14px; 86 | line-height: 1 87 | } 88 | 89 | .j-message__closeBtn { 90 | position: absolute; 91 | top: 50%; 92 | right: 15px; 93 | -webkit-transform: translateY(-50%); 94 | transform: translateY(-50%); 95 | cursor: pointer; 96 | color: #c0c4cc; 97 | font-size: 16px 98 | } 99 | 100 | .j-message__closeBtn:hover { 101 | color: #909399 102 | } 103 | 104 | .j-message .j-icon-plane { 105 | color: #67c23a 106 | } 107 | 108 | .j-message .j-icon-closefill { 109 | color: #f56c6c 110 | } 111 | 112 | .j-message .j-icon-message { 113 | color: #909399 114 | } 115 | 116 | .j-message .j-icon-remindfill { 117 | color: #e6a23c 118 | } 119 | 120 | .j-message-fade-enter, 121 | .j-message-fade-leave-active { 122 | opacity: 0; 123 | -webkit-transform: translate(-50%, -100%); 124 | transform: translate(-50%, -100%) 125 | } 126 | -------------------------------------------------------------------------------- /packages/theme-default/lib/css/row.css: -------------------------------------------------------------------------------- 1 | .j-row:after, 2 | .j-row:before { 3 | display: table; 4 | content: "" 5 | } 6 | 7 | .j-row:after { 8 | clear: both 9 | } 10 | 11 | .j-row { 12 | position: relative; 13 | box-sizing: border-box 14 | } 15 | 16 | .j-row--flex { 17 | display: -ms-flexbox; 18 | display: flex 19 | } 20 | 21 | .j-row--flex:after, 22 | .j-row--flex:before { 23 | display: none 24 | } 25 | 26 | .j-row--flex.is-align-bottom { 27 | -ms-flex-align: end; 28 | align-items: flex-end 29 | } 30 | 31 | .j-row--flex.is-align-middle { 32 | -ms-flex-align: center; 33 | align-items: center 34 | } 35 | 36 | .j-row--flex.is-justify-space-around { 37 | -ms-flex-pack: distribute; 38 | justify-content: space-around 39 | } 40 | 41 | .j-row--flex.is-justify-space-between { 42 | -ms-flex-pack: justify; 43 | justify-content: space-between 44 | } 45 | 46 | .j-row--flex.is-justify-end { 47 | -ms-flex-pack: end; 48 | justify-content: flex-end 49 | } 50 | 51 | .j-row--flex.is-justify-center { 52 | -ms-flex-pack: center; 53 | justify-content: center 54 | } 55 | -------------------------------------------------------------------------------- /packages/theme-default/lib/css/tag.css: -------------------------------------------------------------------------------- 1 | .j__tag, 2 | .j__tag--default { 3 | color: #3f536e; 4 | background-color: #f7f7f7 5 | } 6 | 7 | .j__tag { 8 | display: inline-block; 9 | padding: 1px 8px; 10 | font-size: 0; 11 | line-height: 1.5; 12 | text-align: center; 13 | white-space: nowrap; 14 | border: 1px solid #dfdfdf; 15 | border-radius: 4px; 16 | outline: 0 17 | } 18 | 19 | .j__tag--close, 20 | .j__tag--desc { 21 | font-size: 13px!important; 22 | } 23 | 24 | .j__tag--desc { 25 | margin-right: 2px 26 | } 27 | 28 | .j__tag--default { 29 | border-color: #dfdfdf 30 | } 31 | 32 | .j__tag--success { 33 | background-color: rgba(18, 206, 102, .1); 34 | border-color: rgba(18, 206, 102, .2); 35 | color: #13ce66 36 | } 37 | 38 | .j__tag--success .j-tag__close:hover { 39 | background-color: #13ce66; 40 | color: #fff 41 | } 42 | 43 | .j__tag--primary { 44 | background-color: rgba(63, 170, 245, .1); 45 | border-color: rgba(63, 170, 245, .2); 46 | color: #3FAAF5 47 | } 48 | 49 | .j__tag--primary .j-tag__close:hover { 50 | background-color: #3FAAF5; 51 | color: #fff 52 | } 53 | 54 | .j__tag--warning { 55 | background-color: rgba(247, 186, 41, .1); 56 | border-color: rgba(247, 186, 41, .2); 57 | color: #f7ba2a 58 | } 59 | 60 | .j__tag--warning.j-tag__close:hover { 61 | background-color: #f7ba2a; 62 | color: #fff 63 | } 64 | 65 | .j__tag--danger { 66 | background-color: rgba(255, 73, 73, .1); 67 | border-color: rgba(255, 73, 73, .2); 68 | color: #ff4949 69 | } 70 | 71 | .j__tag--danger .j-tag__close:hover { 72 | background-color: #ff4949; 73 | color: #fff 74 | } 75 | -------------------------------------------------------------------------------- /packages/theme-default/lib/css/transition.css: -------------------------------------------------------------------------------- 1 | .j-zoom-in-center-enter-active, 2 | .j-zoom-in-center-leave-active { 3 | transition: all .3s cubic-bezier(.55, 0, .1, 1) 4 | } 5 | 6 | .j-zoom-in-center-enter, 7 | .j-zoom-in-center-leave-active { 8 | opacity: 0; 9 | -ms-transform: scaleX(0); 10 | transform: scaleX(0) 11 | } 12 | 13 | @keyframes w-spinner { 14 | 0% { 15 | transform: rotate(0) 16 | } 17 | 100% { 18 | transform: rotate(360deg) 19 | } 20 | } 21 | 22 | @keyframes w-opacity { 23 | 0% { 24 | opacity: 1 25 | } 26 | 10%, 27 | 90% { 28 | opacity: .9 29 | } 30 | 20%, 31 | 80% { 32 | opacity: .8 33 | } 34 | 30%, 35 | 70% { 36 | opacity: .7 37 | } 38 | 40%, 39 | 60% { 40 | opacity: .6 41 | } 42 | 50% { 43 | opacity: .5 44 | } 45 | 100% { 46 | opacity: .95 47 | } 48 | } 49 | -------------------------------------------------------------------------------- /packages/theme-default/lib/css/twotable.css: -------------------------------------------------------------------------------- 1 | .j-table { 2 | text-align: center; 3 | border-collapse: separate; 4 | width: 100% 5 | } 6 | 7 | .j-table th { 8 | padding: 12px 0px; 9 | border-bottom: 1px solid #c2c4c7; 10 | border-right: 1px solid #c2c4c7; 11 | border-top: 1px solid #c2c4c7; 12 | } 13 | 14 | .j-table td { 15 | border-bottom: 1px solid #c2c4c7; 16 | border-right: 1px solid #c2c4c7; 17 | padding: 12px 0px; 18 | min-width: 0; 19 | box-sizing: border-box; 20 | text-overflow: ellipsis; 21 | } 22 | 23 | .j-table .first-column { 24 | border-left: 1px solid #c2c4c7; 25 | } -------------------------------------------------------------------------------- /packages/theme-default/lib/fonts/iconfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/liuyangjike/JKUI/9b2dc59911db19d1c5b07263dee310f791bf199d/packages/theme-default/lib/fonts/iconfont.eot -------------------------------------------------------------------------------- /packages/theme-default/lib/fonts/iconfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/liuyangjike/JKUI/9b2dc59911db19d1c5b07263dee310f791bf199d/packages/theme-default/lib/fonts/iconfont.ttf -------------------------------------------------------------------------------- /packages/theme-default/lib/fonts/iconfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/liuyangjike/JKUI/9b2dc59911db19d1c5b07263dee310f791bf199d/packages/theme-default/lib/fonts/iconfont.woff -------------------------------------------------------------------------------- /packages/theme-default/lib/hour.scss: -------------------------------------------------------------------------------- 1 | .hour-container{ 2 | width: 60px; 3 | height: 120px; 4 | position: relative; 5 | background-color: #D7CED0; 6 | opacity: 0.9; 7 | border-radius: 2px; 8 | animation: hour-rotate 4s ease-in-out infinite; 9 | display: inline-block; 10 | } 11 | 12 | .upper-tap{ 13 | width: 100%; 14 | height: 6px; 15 | background-color: grey; 16 | border-radius: 2px; 17 | } 18 | 19 | .middle-tap{ 20 | width: 100%; 21 | height: 108px; 22 | } 23 | 24 | .bottom-tap{ 25 | width: 100%; 26 | height: 6px; 27 | background-color: grey; 28 | border-radius: 2px; 29 | } 30 | 31 | .upper-half-container{ 32 | width: 100%; 33 | height: 50%; 34 | overflow: hidden; 35 | position: relative; 36 | } 37 | .lower-half-container{ 38 | width: 100%; 39 | height: 50%; 40 | position: relative; 41 | overflow: hidden; 42 | } 43 | .upper-half-content{ 44 | position: absolute; 45 | border: 3px solid rgb(248, 248, 250); 46 | border-radius: 50%; 47 | height: 105px; 48 | width: 50px; 49 | top: -53px; 50 | left: 2px; 51 | box-shadow: 2px 1px 3px 0px #aaa; 52 | } 53 | 54 | .lower-half-content{ 55 | position: absolute; 56 | border: 3px solid rgb(243, 243, 250); 57 | border-radius: 50%; 58 | height: 105px; 59 | width: 50px; 60 | top: -2px; 61 | left: 2px; 62 | box-shadow: 2px 1px 3px 0px #aaa; 63 | } 64 | 65 | .upper-sand{ 66 | width: 100%; 67 | height: 100%; 68 | background-color: #409EFF; 69 | position: absolute; 70 | border-radius: 50%; 71 | top: 0px; 72 | overflow: hidden; 73 | } 74 | 75 | .lower-sand{ 76 | width: 100%; 77 | height: 100%; 78 | background-color: #409EFF; 79 | position: absolute; 80 | border-radius: 50%; 81 | top: 0px; 82 | overflow: hidden; 83 | } 84 | 85 | .sand-reduce{ 86 | height: 60%; 87 | width: 100%; 88 | background-color: #fff; 89 | animation: sand-reduce 4s linear infinite; 90 | } 91 | .sand-add{ 92 | height: 50%; 93 | width: 100%; 94 | background-color: #fff; 95 | animation: sand-add 4s linear infinite; 96 | } 97 | .sand-falling{ 98 | position: absolute; 99 | background-color: #409EFF; 100 | width: 5px; 101 | height: 0%; 102 | top: 50%; 103 | left: 50%; 104 | box-sizing: border-box; 105 | border-radius: 40%; 106 | border: 1px sold #fff; 107 | animation: sand-falling 4s linear infinite; 108 | overflow: hidden; 109 | } 110 | .sand-null{ 111 | width: 100%; 112 | height: 0; 113 | background-color: #fff; 114 | border: 1px sold #fff; 115 | animation: sand-null 4s linear infinite; 116 | } 117 | 118 | 119 | @keyframes sand-add{ 120 | 0%{ 121 | height: 53%; 122 | } 123 | 12.5%{ 124 | height: 51%; 125 | } 126 | 75%{ 127 | height: 36%; 128 | } 129 | 100%{ 130 | height: 36%; 131 | } 132 | } 133 | @keyframes sand-reduce{ 134 | 0%{ 135 | height: 65%; 136 | } 137 | 25%{ 138 | height: 78%; 139 | } 140 | 40%{ 141 | height: 89%; 142 | } 143 | 62.5%{ 144 | height: 100%; 145 | } 146 | 80%{ 147 | height: 100%; 148 | } 149 | 100%{ 150 | height: 100%; 151 | } 152 | } 153 | @keyframes sand-falling { 154 | 0%{ 155 | height: 0%; 156 | } 157 | 12.5%{ 158 | height: 45%; 159 | } 160 | 62.5%{ 161 | height: 45%; 162 | opacity: 1.0; 163 | } 164 | 100%{ 165 | height: 45%; 166 | opacity: 0.2; 167 | } 168 | } 169 | @keyframes sand-null{ 170 | 0%{ 171 | height: 0%; 172 | } 173 | 62.5%{ 174 | height: 0%; 175 | } 176 | 75%{ 177 | height: 71.7%; 178 | } 179 | 100%{ 180 | height: 71.7%; 181 | } 182 | } 183 | 184 | @keyframes hour-rotate{ 185 | 0%{ 186 | transform: rotate(0) 187 | } 188 | 75%{ 189 | transform: rotate(0deg) 190 | } 191 | 100%{ 192 | transform: rotate(720deg) 193 | } 194 | } 195 | 196 | .hour-container-small{ 197 | width: 40px; 198 | height: 80px; 199 | position: relative; 200 | background-color: #D7CED0; 201 | opacity: 0.9; 202 | overflow: hidden; 203 | border-radius: 2px; 204 | animation: hour-rotate 4s ease-in-out infinite; 205 | display: inline-block; 206 | } 207 | 208 | .upper-tap-small{ 209 | width: 100%; 210 | height: 4px; 211 | background-color: grey; 212 | border-radius: 2px; 213 | } 214 | .middle-tap-small{ 215 | width: 100%; 216 | height: 72px; 217 | } 218 | 219 | .upper-half-content-small{ 220 | position: absolute; 221 | border: 1px solid rgb(248, 248, 250); 222 | border-radius: 50%; 223 | height: 72px; 224 | width: 32px; 225 | top: -36px; 226 | left: 3px; 227 | box-shadow: 1px 1px 3px 0px #aaa; 228 | } 229 | 230 | .bottom-tap-small{ 231 | width: 100%; 232 | height: 4px; 233 | background-color: grey; 234 | border-radius: 2px; 235 | } 236 | 237 | .lower-half-content-small{ 238 | position: absolute; 239 | border: 1px solid rgb(243, 243, 250); 240 | border-radius: 50%; 241 | height: 72px; 242 | width: 32px; 243 | top: -2px; 244 | left: 3px; 245 | box-shadow: 2px 1px 3px 0px #aaa; 246 | } 247 | 248 | .upper-sand-small{ 249 | width: 100%; 250 | height: 100%; 251 | background-color: #409EFF; 252 | position: absolute; 253 | border-radius: 50%; 254 | top: 0px; 255 | overflow: hidden; 256 | } 257 | 258 | .lower-sand-small{ 259 | width: 100%; 260 | height: 100%; 261 | background-color: #409EFF; 262 | position: absolute; 263 | border-radius: 50%; 264 | top: 0px; 265 | overflow: hidden; 266 | } 267 | 268 | .sand-null-small{ 269 | width: 100%; 270 | height: 0; 271 | background-color: #fff; 272 | animation: sand-null-small 4s linear infinite; 273 | } 274 | @keyframes sand-null-small{ 275 | 0%{ 276 | height: 0%; 277 | } 278 | 62.5%{ 279 | height: 0%; 280 | } 281 | 75%{ 282 | height: 69%; 283 | } 284 | 100%{ 285 | height: 69%; 286 | } 287 | } -------------------------------------------------------------------------------- /packages/theme-default/lib/icon.scss: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: iconfont; 3 | src: url(fonts/iconfont.eot?t=1510363376926); 4 | src: url(fonts/iconfont.eot?t=1510363376926#iefix) format('embedded-opentype'), url('data:application/x-font-woff;charset=utf-8;base64,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') format('woff'), url(fonts/iconfont.ttf?t=1510363376926) format('truetype'), url(fonts/iconfont.svg?t=1510363376926#iconfont) format('svg') 5 | } 6 | 7 | [class*="j-icon-"], 8 | [class^=j-icon-] { 9 | font-family: iconfont !important; 10 | font-size: 18px; 11 | font-style: normal; 12 | vertical-align: baseline; 13 | display: inline-block; 14 | -webkit-font-smoothing: antialiased; 15 | -moz-osx-font-smoothing: grayscale 16 | } 17 | 18 | .j-icon-link:before { 19 | content: "\e656" 20 | } 21 | 22 | .j-icon-cartfill:before { 23 | content: "\e659" 24 | } 25 | 26 | .j-icon-cart:before { 27 | content: "\e65a" 28 | } 29 | 30 | .j-icon-remindfill:before { 31 | content: "\e65e" 32 | } 33 | 34 | .j-icon-remind:before { 35 | content: "\e65f" 36 | } 37 | 38 | .j-icon-back:before { 39 | content: "\e662" 40 | } 41 | 42 | .j-icon-top:before { 43 | content: "\e663" 44 | } 45 | 46 | .j-icon-down:before { 47 | content: "\e664" 48 | } 49 | 50 | .j-icon-right:before { 51 | content: "\e665" 52 | } 53 | 54 | .j-icon-left:before { 55 | content: "\e666" 56 | } 57 | 58 | .j-icon-lbsfill:before { 59 | content: "\e668" 60 | } 61 | 62 | .j-icon-lbs:before { 63 | content: "\e669" 64 | } 65 | 66 | .j-icon-refresh:before { 67 | content: "\e66a" 68 | } 69 | 70 | .j-icon-tag:before { 71 | content: "\e66c" 72 | } 73 | 74 | .j-icon-wow:before { 75 | content: "\e66e" 76 | } 77 | 78 | .j-icon-sad:before { 79 | content: "\e66f" 80 | } 81 | 82 | .j-icon-smile:before { 83 | content: "\e670" 84 | } 85 | 86 | .j-icon-delete:before { 87 | content: "\e67e" 88 | } 89 | 90 | .j-icon-edit:before { 91 | content: "\e682" 92 | } 93 | 94 | .j-icon-favfill:before { 95 | content: "\e685" 96 | } 97 | 98 | .j-icon-fav:before { 99 | content: "\e686" 100 | } 101 | 102 | .j-icon-write:before { 103 | content: "\e687" 104 | } 105 | 106 | .j-icon-comments:before { 107 | content: "\e689" 108 | } 109 | 110 | .j-icon-feedback:before { 111 | content: "\e68a" 112 | } 113 | 114 | .j-icon-share:before { 115 | content: "\e68b" 116 | } 117 | 118 | .j-icon-user:before { 119 | content: "\e68e" 120 | } 121 | 122 | .j-icon-my:before { 123 | content: "\e690" 124 | } 125 | 126 | .j-icon-home:before { 127 | content: "\e696" 128 | } 129 | 130 | .j-icon-date:before { 131 | content: "\e697" 132 | } 133 | 134 | .j-icon-message:before { 135 | content: "\e698" 136 | } 137 | 138 | .j-icon-search:before { 139 | content: "\e699" 140 | } 141 | 142 | .j-icon-scan:before { 143 | content: "\e69a" 144 | } 145 | 146 | .j-icon-like:before { 147 | content: "\e69c" 148 | } 149 | 150 | .j-icon-likefill:before { 151 | content: "\e69d" 152 | } 153 | 154 | .j-icon-lock:before { 155 | content: "\e69e" 156 | } 157 | 158 | .j-icon-mobile:before { 159 | content: "\e6a0" 160 | } 161 | 162 | .j-icon-closefill:before { 163 | content: "\e6a6" 164 | } 165 | 166 | .j-icon-close:before { 167 | content: "\e6a7" 168 | } 169 | 170 | .j-icon-attachment:before { 171 | content: "\e6a9" 172 | } 173 | 174 | .j-icon-pic:before { 175 | content: "\e6aa" 176 | } 177 | 178 | .j-icon-more:before { 179 | content: "\e6ad" 180 | } 181 | 182 | .j-icon-plane:before { 183 | content: "\e6b1" 184 | } 185 | 186 | .j-icon-planefill:before { 187 | content: "\e6b2" 188 | } 189 | 190 | .j-icon-computer:before { 191 | content: "\e6b3" 192 | } 193 | 194 | .j-icon-ascend:before { 195 | content: "\e6b4" 196 | } 197 | 198 | .j-icon-defaultsort:before { 199 | content: "\e6b5" 200 | } 201 | 202 | .j-icon-falling:before { 203 | content: "\e6b6" 204 | } 205 | 206 | .j-icon-filter:before { 207 | content: "\e6b9" 208 | } 209 | 210 | .j-icon-filter2:before { 211 | content: "\e6ba" 212 | } 213 | 214 | .j-icon-cloudfill:before { 215 | content: "\e6cc" 216 | } 217 | 218 | .j-icon-cloud:before { 219 | content: "\e6cd" 220 | } 221 | 222 | .j-icon-downloadfill:before { 223 | content: "\e6ce" 224 | } 225 | 226 | .j-icon-download:before { 227 | content: "\e6cf" 228 | } 229 | 230 | .j-icon-close2:before { 231 | content: "\e6dd" 232 | } 233 | -------------------------------------------------------------------------------- /packages/theme-default/lib/index.css: -------------------------------------------------------------------------------- 1 | @import './css/button.css'; 2 | @import './css/col.css'; 3 | @import '/css/tag.css'; 4 | @import './css/row.css'; 5 | @import './css/icon.css'; 6 | @import './css/transition.css'; 7 | @import './css/message.css'; 8 | @import './css/breadcrumb.css'; 9 | @import './css/card.css'; 10 | @import './css/twotable.css'; 11 | @import './css/hour.css'; 12 | 13 | -------------------------------------------------------------------------------- /packages/theme-default/lib/index.scss: -------------------------------------------------------------------------------- 1 | @import './button.scss'; 2 | @import './col.scss'; 3 | @import './tag.scss'; 4 | @import './row.scss'; 5 | @import './icon.scss'; 6 | @import './transition.scss'; 7 | @import './message.scss'; 8 | @import './breadcrumb.scss'; 9 | @import './card.scss'; 10 | @import './twotable.scss'; 11 | @import './hour.scss'; 12 | 13 | //如果sass样式不大熟悉,可以看该目录下的css, 里面有css样式写法 14 | -------------------------------------------------------------------------------- /packages/theme-default/lib/message.scss: -------------------------------------------------------------------------------- 1 | .j-message__closeBtn:focus, 2 | .j-message__content:focus { 3 | outline-width: 0 4 | } 5 | 6 | .j-message { 7 | min-width: 380px; 8 | -webkit-box-sizing: border-box; 9 | box-sizing: border-box; 10 | border-radius: 4px; 11 | border-width: 1px; 12 | border-style: solid; 13 | border-color: #ebeef5; 14 | position: fixed; 15 | left: 50%; 16 | top: 20px; 17 | -webkit-transform: translateX(-50%); 18 | transform: translateX(-50%); 19 | background-color: #edf2fc; 20 | -webkit-transition: opacity .3s, -webkit-transform .4s; 21 | transition: opacity .3s, -webkit-transform .4s; 22 | transition: opacity .3s, transform .4s; 23 | transition: opacity .3s, transform .4s, -webkit-transform .4s; 24 | overflow: hidden; 25 | padding: 15px 15px 15px 20px; 26 | display: -webkit-box; 27 | display: -ms-flexbox; 28 | display: flex; 29 | -webkit-box-align: center; 30 | -ms-flex-align: center; 31 | align-items: center 32 | } 33 | 34 | .j-message.is-center { 35 | -webkit-box-pack: center; 36 | -ms-flex-pack: center; 37 | justify-content: center 38 | } 39 | 40 | .j-message.is-closable .j-message__content { 41 | padding-right: 16px 42 | } 43 | 44 | .j-message p { 45 | margin: 0 46 | } 47 | 48 | .j-message--info .j-message__content { 49 | color: #909399 50 | } 51 | 52 | .j-message--success { 53 | background-color: #f0f9eb; 54 | border-color: #e1f3d8 55 | } 56 | 57 | .j-message--success .j-message__content { 58 | color: #67c23a 59 | } 60 | 61 | .j-message--warning { 62 | background-color: #fdf6ec; 63 | border-color: #faecd8 64 | } 65 | 66 | .j-message--warning .j-message__content { 67 | color: #e6a23c 68 | } 69 | 70 | .j-message--error { 71 | background-color: #fef0f0; 72 | border-color: #fde2e2 73 | } 74 | 75 | .j-message--error .j-message__content { 76 | color: #f56c6c 77 | } 78 | 79 | .j-message__icon { 80 | margin-right: 10px 81 | } 82 | 83 | .j-message__content { 84 | padding: 0; 85 | font-size: 14px; 86 | line-height: 1 87 | } 88 | 89 | .j-message__closeBtn { 90 | position: absolute; 91 | top: 50%; 92 | right: 15px; 93 | -webkit-transform: translateY(-50%); 94 | transform: translateY(-50%); 95 | cursor: pointer; 96 | color: #c0c4cc; 97 | font-size: 16px 98 | } 99 | 100 | .j-message__closeBtn:hover { 101 | color: #909399 102 | } 103 | 104 | .j-message .j-icon-plane { 105 | color: #67c23a 106 | } 107 | 108 | .j-message .j-icon-closefill { 109 | color: #f56c6c 110 | } 111 | 112 | .j-message .j-icon-message { 113 | color: #909399 114 | } 115 | 116 | .j-message .j-icon-remindfill { 117 | color: #e6a23c 118 | } 119 | 120 | .j-message-fade-enter, 121 | .j-message-fade-leave-active { 122 | opacity: 0; 123 | -webkit-transform: translate(-50%, -100%); 124 | transform: translate(-50%, -100%) 125 | } 126 | -------------------------------------------------------------------------------- /packages/theme-default/lib/row.scss: -------------------------------------------------------------------------------- 1 | 2 | .j-row:after { 3 | clear: both 4 | } 5 | .j-row { 6 | position: relative; 7 | box-sizing: border-box; 8 | &:after,&:before{ 9 | display: table; 10 | content: "" 11 | } 12 | } 13 | 14 | .j-row--flex { 15 | display: -ms-flexbox; 16 | display: flex; 17 | &:after,&:before{ 18 | display: none 19 | } 20 | } 21 | 22 | .j-row--flex.is-align-bottom { 23 | -ms-flex-align: end; 24 | align-items: flex-end 25 | } 26 | 27 | .j-row--flex.is-align-middle { 28 | -ms-flex-align: center; 29 | align-items: center 30 | } 31 | 32 | .j-row--flex.is-justify-space-around { 33 | -ms-flex-pack: distribute; 34 | justify-content: space-around 35 | } 36 | 37 | .j-row--flex.is-justify-space-between { 38 | -ms-flex-pack: justify; 39 | justify-content: space-between 40 | } 41 | 42 | .j-row--flex.is-justify-end { 43 | -ms-flex-pack: end; 44 | justify-content: flex-end 45 | } 46 | 47 | .j-row--flex.is-justify-center { 48 | -ms-flex-pack: center; 49 | justify-content: center 50 | } 51 | -------------------------------------------------------------------------------- /packages/theme-default/lib/style/mixins.scss: -------------------------------------------------------------------------------- 1 | $color-success: #13ce66 !default; 2 | $color-warning: #f7ba2a !default; 3 | $color-danger: #ff4949 !default; 4 | $color-info: #909399 !default; 5 | $color-primary: #3FAAF5; 6 | $color-base: #1f2d3d; 7 | 8 | @mixin focus-hover { 9 | opacity: .7; 10 | } 11 | 12 | @mixin disabled{ 13 | opacity: .3; 14 | cursor: not-allowed; 15 | } 16 | 17 | @mixin diabled-color($r, $g, $b, $bo, $co) { 18 | background: rgba($r, $g, $b, $bo); 19 | border-color: rgba($r, $g, $b, $co); 20 | } 21 | 22 | @mixin button-type($color) { 23 | background: $color; 24 | border: 1px solid $color; 25 | } -------------------------------------------------------------------------------- /packages/theme-default/lib/tag.scss: -------------------------------------------------------------------------------- 1 | .j__tag, 2 | .j__tag--default { 3 | color: #3f536e; 4 | background-color: #f7f7f7 5 | } 6 | 7 | .j__tag { 8 | display: inline-block; 9 | padding: 1px 8px; 10 | font-size: 0; 11 | line-height: 1.5; 12 | text-align: center; 13 | white-space: nowrap; 14 | border: 1px solid #dfdfdf; 15 | border-radius: 4px; 16 | outline: 0 17 | } 18 | 19 | .j__tag--close, 20 | .j__tag--desc { 21 | font-size: 13px!important; 22 | } 23 | 24 | .j__tag--desc { 25 | margin-right: 2px 26 | } 27 | 28 | .j__tag--default { 29 | border-color: #dfdfdf 30 | } 31 | 32 | .j__tag--success { 33 | @include diabled-color(18, 206, 102, .1, .2); 34 | color: $color-success; 35 | } 36 | 37 | .j__tag--success .j-tag__close:hover { 38 | background-color: $color-success; 39 | color: #fff 40 | } 41 | 42 | .j__tag--primary { 43 | @include diabled-color(63, 170, 245, .1, .2); 44 | color: #3FAAF5 45 | } 46 | 47 | .j__tag--primary .j-tag__close:hover { 48 | background-color: #3FAAF5; 49 | color: #fff 50 | } 51 | 52 | .j__tag--warning { 53 | @include diabled-color(247, 186, 41, .1, .2); 54 | color: $color-warning; 55 | } 56 | 57 | .j__tag--warning.j-tag__close:hover { 58 | background-color: $color-warning; 59 | color: #fff 60 | } 61 | 62 | .j__tag--danger { 63 | @include diabled-color(255, 73, 73, .1, .2); 64 | color: $color-danger; 65 | } 66 | 67 | .j__tag--danger .j-tag__close:hover { 68 | background-color: $color-danger; 69 | color: #fff 70 | } 71 | -------------------------------------------------------------------------------- /packages/theme-default/lib/transition.scss: -------------------------------------------------------------------------------- 1 | .j-zoom-in-center-enter-active, 2 | .j-zoom-in-center-leave-active { 3 | transition: all .3s cubic-bezier(.55, 0, .1, 1) 4 | } 5 | 6 | .j-zoom-in-center-enter, 7 | .j-zoom-in-center-leave-active { 8 | opacity: 0; 9 | -ms-transform: scaleX(0); 10 | transform: scaleX(0) 11 | } 12 | 13 | @keyframes w-spinner { 14 | 0% { 15 | transform: rotate(0) 16 | } 17 | 100% { 18 | transform: rotate(360deg) 19 | } 20 | } 21 | 22 | @keyframes w-opacity { 23 | 0% { 24 | opacity: 1 25 | } 26 | 10%, 27 | 90% { 28 | opacity: .9 29 | } 30 | 20%, 31 | 80% { 32 | opacity: .8 33 | } 34 | 30%, 35 | 70% { 36 | opacity: .7 37 | } 38 | 40%, 39 | 60% { 40 | opacity: .6 41 | } 42 | 50% { 43 | opacity: .5 44 | } 45 | 100% { 46 | opacity: .95 47 | } 48 | } 49 | -------------------------------------------------------------------------------- /packages/theme-default/lib/twotable.scss: -------------------------------------------------------------------------------- 1 | .j-table { 2 | text-align: center; 3 | border-collapse: separate; 4 | width: 100% 5 | } 6 | 7 | .j-table th { 8 | padding: 12px 0px; 9 | border-bottom: 1px solid #c2c4c7; 10 | border-right: 1px solid #c2c4c7; 11 | border-top: 1px solid #c2c4c7; 12 | } 13 | 14 | .j-table td { 15 | border-bottom: 1px solid #c2c4c7; 16 | border-right: 1px solid #c2c4c7; 17 | padding: 12px 0px; 18 | min-width: 0; 19 | box-sizing: border-box; 20 | text-overflow: ellipsis; 21 | } 22 | 23 | .j-table .first-column { 24 | border-left: 1px solid #c2c4c7; 25 | } -------------------------------------------------------------------------------- /packages/two-dimensional-table/index.js: -------------------------------------------------------------------------------- 1 | import towTable from './src/tow-dimensional-table.vue' 2 | towTable.install = function (Vue) { 3 | Vue.component(towTable.name, towTable) 4 | } 5 | 6 | export default towTable -------------------------------------------------------------------------------- /packages/two-dimensional-table/src/tow-dimensional-table.vue: -------------------------------------------------------------------------------- 1 | 17 | 18 | -------------------------------------------------------------------------------- /static/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/liuyangjike/JKUI/9b2dc59911db19d1c5b07263dee310f791bf199d/static/.gitkeep -------------------------------------------------------------------------------- /tree.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/liuyangjike/JKUI/9b2dc59911db19d1c5b07263dee310f791bf199d/tree.md --------------------------------------------------------------------------------