├── .eslintignore ├── packages ├── theme │ ├── lib │ │ ├── particle.css │ │ ├── row.css │ │ ├── background.css │ │ ├── scrollbar.css │ │ ├── img.css │ │ ├── poper.css │ │ ├── code.css │ │ ├── quote.css │ │ ├── pagination.css │ │ ├── radio-group.css │ │ ├── scaffolding.css │ │ ├── normalize.css │ │ ├── tag.css │ │ ├── checkbox-group.css │ │ ├── radio-btn.css │ │ ├── select.css │ │ ├── checkbox-btn.css │ │ ├── tag-group.css │ │ ├── alert.css │ │ ├── input.css │ │ └── radio.css │ ├── package.json │ ├── gulpfile.js │ └── src │ │ ├── row.less │ │ ├── particle.less │ │ ├── scrollbar.less │ │ ├── background.less │ │ ├── utils │ │ ├── animations.less │ │ └── mixins.less │ │ ├── img.less │ │ ├── index.less │ │ ├── poper.less │ │ ├── pagination.less │ │ ├── tag.less │ │ ├── tag-group.less │ │ ├── radio-btn.less │ │ ├── radio-group.less │ │ ├── col.less │ │ ├── checkbox-group.less │ │ ├── quote.less │ │ └── alert.less ├── toast │ ├── index.js │ ├── package.json │ ├── toast.js │ └── toast.vue ├── snackbar │ ├── index.js │ ├── package.json │ ├── snackbar.js │ └── snackbar.vue ├── code │ ├── language │ │ ├── index.js │ │ ├── css.js │ │ ├── javascript.js │ │ └── html.js │ ├── index.js │ ├── package.json │ └── code.vue ├── row │ ├── index.js │ ├── package.json │ └── row.vue ├── utils │ ├── package.json │ ├── vnode.js │ ├── scroll.js │ ├── emit.js │ ├── screen.js │ ├── clickout.js │ ├── background.js │ └── dom.js ├── col │ ├── index.js │ ├── package.json │ └── col.vue ├── dropdown │ ├── index.js │ ├── package.json │ └── dropdown-item.vue ├── alert │ ├── index.js │ ├── package.json │ └── alert.vue ├── input │ ├── index.js │ ├── package.json │ └── input.vue ├── poper │ ├── index.js │ └── package.json ├── quote │ ├── index.js │ ├── package.json │ └── quote.vue ├── dialog │ ├── index.js │ ├── package.json │ └── dialog.vue ├── select │ ├── index.js │ └── package.json ├── nav │ ├── package.json │ ├── index.js │ └── nav-item.vue ├── tag │ ├── package.json │ ├── index.js │ ├── tag-group.vue │ └── tag.vue ├── radio │ ├── package.json │ ├── index.js │ ├── radio-group.vue │ ├── radio-btn.vue │ └── radio.vue ├── table │ ├── package.json │ ├── constant.js │ ├── index.js │ ├── colgroup.vue │ ├── column.js │ ├── body.vue │ ├── header.vue │ ├── store.js │ └── table.vue ├── tooltip │ ├── package.json │ └── index.js ├── checkbox │ ├── package.json │ ├── index.js │ ├── checkbox-group.vue │ ├── checkbox-btn.vue │ └── checkbox.vue ├── particle │ ├── index.js │ └── package.json ├── pagination │ ├── package.json │ └── index.js ├── locale │ ├── package.json │ ├── src │ │ └── format.js │ └── index.js └── btn │ ├── index.js │ ├── vue.config.js │ ├── btn-group.vue │ ├── package.json │ └── btn.vue ├── plugins ├── vue-cli-plugin-ui-lint │ ├── index.js │ ├── generator │ │ ├── template │ │ │ └── _lintstagedrc │ │ └── index.js │ └── package.json ├── vue-cli-plugin-ui-cz │ ├── index.js │ ├── package.json │ └── generator │ │ ├── index.js │ │ └── template │ │ └── _cz-config.js └── vue-cli-plugin-ui-base │ ├── index.js │ ├── generator │ ├── template │ │ ├── lerna.json │ │ ├── packages │ │ │ ├── utils │ │ │ │ ├── src │ │ │ │ │ └── index.js │ │ │ │ ├── babel.config.js │ │ │ │ └── package.json │ │ │ ├── alert │ │ │ │ ├── index.js │ │ │ │ ├── package.json │ │ │ │ └── alert.vue │ │ │ ├── locale │ │ │ │ ├── mixins │ │ │ │ │ └── index.js │ │ │ │ ├── lang │ │ │ │ │ ├── zh_CN.js │ │ │ │ │ └── en.js │ │ │ │ ├── package.json │ │ │ │ ├── src │ │ │ │ │ └── format.js │ │ │ │ └── index.js │ │ │ ├── select │ │ │ │ ├── index.js │ │ │ │ └── package.json │ │ │ ├── btn │ │ │ │ ├── index.js │ │ │ │ ├── vue.config.js │ │ │ │ ├── btn-group.vue │ │ │ │ ├── package.json │ │ │ │ └── btn.vue │ │ │ └── theme │ │ │ │ ├── package.json │ │ │ │ ├── gulpfile.js │ │ │ │ └── src │ │ │ │ ├── index.less │ │ │ │ ├── utils │ │ │ │ ├── animations.less │ │ │ │ └── mixins.less │ │ │ │ └── alert.less │ │ ├── src │ │ │ ├── ui.js │ │ │ └── components │ │ │ │ └── HelloWorld.vue │ │ └── vue.common.js │ └── index.js │ └── package.json ├── public ├── favicon.ico └── index.html ├── lerna.json ├── src ├── assets │ └── icon │ │ └── fonts │ │ ├── FontAwesome.otf │ │ ├── fontawesome-webfont.eot │ │ ├── fontawesome-webfont.ttf │ │ ├── fontawesome-webfont.woff │ │ └── fontawesome-webfont.woff2 ├── App.vue ├── main.js ├── views │ ├── option │ │ ├── index.vue │ │ ├── fontTable.vue │ │ └── colorTable.vue │ ├── bomb │ │ ├── box.vue │ │ └── dialog.vue │ ├── animation │ │ └── particle.vue │ ├── base │ │ ├── pagination.vue │ │ ├── quote.vue │ │ ├── tag.vue │ │ └── alert.vue │ └── home.vue ├── components │ └── propsTable.vue └── ui │ └── index.js ├── vue.config.js ├── .lintstagedrc ├── babel.config.js ├── .gitignore ├── preset.json ├── README.md ├── vue.common.js ├── package.json └── .cz-config.js /.eslintignore: -------------------------------------------------------------------------------- 1 | packages/**/lib -------------------------------------------------------------------------------- /packages/theme/lib/particle.css: -------------------------------------------------------------------------------- 1 | .h-particle{width:100%;height:100%} -------------------------------------------------------------------------------- /plugins/vue-cli-plugin-ui-lint/index.js: -------------------------------------------------------------------------------- 1 | module.exports = () => { 2 | } -------------------------------------------------------------------------------- /plugins/vue-cli-plugin-ui-cz/index.js: -------------------------------------------------------------------------------- 1 | module.exports = () => { 2 | 3 | }; -------------------------------------------------------------------------------- /plugins/vue-cli-plugin-ui-base/index.js: -------------------------------------------------------------------------------- 1 | module.exports = () => { 2 | 3 | }; -------------------------------------------------------------------------------- /packages/toast/index.js: -------------------------------------------------------------------------------- 1 | import Toast from './toast.js' 2 | export default Toast 3 | -------------------------------------------------------------------------------- /packages/snackbar/index.js: -------------------------------------------------------------------------------- 1 | import Snackbar from './snackbar.js' 2 | export default Snackbar 3 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ziyi2/vue-cli3-lerna-ui/HEAD/public/favicon.ico -------------------------------------------------------------------------------- /lerna.json: -------------------------------------------------------------------------------- 1 | { 2 | "npmClient": "yarn", 3 | "useWorkspaces": true, 4 | "version": "1.0.0" 5 | } 6 | -------------------------------------------------------------------------------- /packages/theme/lib/row.css: -------------------------------------------------------------------------------- 1 | .h-row:after,.h-row:before{content:" ";display:table}.h-row:after{clear:both} -------------------------------------------------------------------------------- /packages/code/language/index.js: -------------------------------------------------------------------------------- 1 | export * from './javascript' 2 | export * from './css' 3 | export * from './html' 4 | -------------------------------------------------------------------------------- /src/assets/icon/fonts/FontAwesome.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ziyi2/vue-cli3-lerna-ui/HEAD/src/assets/icon/fonts/FontAwesome.otf -------------------------------------------------------------------------------- /vue.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | publicPath: '/vue-cli3-lerna-ui/', 3 | 4 | transpileDependencies: [ 5 | /@ziyi2/ 6 | ] 7 | } -------------------------------------------------------------------------------- /plugins/vue-cli-plugin-ui-base/generator/template/lerna.json: -------------------------------------------------------------------------------- 1 | { 2 | "npmClient": "yarn", 3 | "useWorkspaces": true, 4 | "version": "0.1.0" 5 | } 6 | -------------------------------------------------------------------------------- /src/assets/icon/fonts/fontawesome-webfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ziyi2/vue-cli3-lerna-ui/HEAD/src/assets/icon/fonts/fontawesome-webfont.eot -------------------------------------------------------------------------------- /src/assets/icon/fonts/fontawesome-webfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ziyi2/vue-cli3-lerna-ui/HEAD/src/assets/icon/fonts/fontawesome-webfont.ttf -------------------------------------------------------------------------------- /src/assets/icon/fonts/fontawesome-webfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ziyi2/vue-cli3-lerna-ui/HEAD/src/assets/icon/fonts/fontawesome-webfont.woff -------------------------------------------------------------------------------- /src/assets/icon/fonts/fontawesome-webfont.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ziyi2/vue-cli3-lerna-ui/HEAD/src/assets/icon/fonts/fontawesome-webfont.woff2 -------------------------------------------------------------------------------- /packages/row/index.js: -------------------------------------------------------------------------------- 1 | import Row from './row' 2 | 3 | Row.install = function (Vue) { 4 | Vue.component(Row.name, Row) 5 | } 6 | 7 | export default Row 8 | -------------------------------------------------------------------------------- /packages/utils/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@ziyi2/utils", 3 | "version": "0.1.0", 4 | "description": "", 5 | "author": "ziyi2", 6 | "license": "ISC" 7 | } 8 | -------------------------------------------------------------------------------- /packages/code/index.js: -------------------------------------------------------------------------------- 1 | import Code from './code' 2 | 3 | Code.install = function (Vue) { 4 | Vue.component(Code.name, Code) 5 | } 6 | 7 | export default Code 8 | -------------------------------------------------------------------------------- /packages/col/index.js: -------------------------------------------------------------------------------- 1 | import Col from './col' 2 | 3 | Col.install = function (Vue) { 4 | Vue.component(Col.name, Col) 5 | } 6 | 7 | export default Col 8 | 9 | -------------------------------------------------------------------------------- /packages/dropdown/index.js: -------------------------------------------------------------------------------- 1 | import Dropdown from './dropdown' 2 | import DropdownItem from './dropdown-item' 3 | 4 | export { 5 | Dropdown, 6 | DropdownItem 7 | } 8 | -------------------------------------------------------------------------------- /packages/alert/index.js: -------------------------------------------------------------------------------- 1 | import Alert from './alert' 2 | 3 | Alert.install = function (Vue) { 4 | Vue.component(Alert.name, Alert) 5 | } 6 | 7 | export default Alert 8 | -------------------------------------------------------------------------------- /packages/input/index.js: -------------------------------------------------------------------------------- 1 | import Input from './input' 2 | 3 | Input.install = function (Vue) { 4 | Vue.component(Input.name, Input) 5 | } 6 | 7 | export default Input 8 | -------------------------------------------------------------------------------- /packages/poper/index.js: -------------------------------------------------------------------------------- 1 | import Poper from './poper.js' 2 | 3 | Poper.install = function (Vue) { 4 | Vue.component(Poper.name, Poper) 5 | } 6 | 7 | export default Poper 8 | -------------------------------------------------------------------------------- /packages/quote/index.js: -------------------------------------------------------------------------------- 1 | import Quote from './quote' 2 | 3 | Quote.install = function (Vue) { 4 | Vue.component(Quote.name, Quote) 5 | } 6 | 7 | export default Quote 8 | -------------------------------------------------------------------------------- /packages/dialog/index.js: -------------------------------------------------------------------------------- 1 | import Dialog from './dialog' 2 | 3 | Dialog.install = function (Vue) { 4 | Vue.component(Dialog.name, Dialog) 5 | } 6 | 7 | export default Dialog 8 | -------------------------------------------------------------------------------- /packages/select/index.js: -------------------------------------------------------------------------------- 1 | import Select from './select' 2 | 3 | Select.install = function (Vue) { 4 | Vue.component(Select.name, Select) 5 | } 6 | 7 | export default Select 8 | -------------------------------------------------------------------------------- /plugins/vue-cli-plugin-ui-base/generator/template/packages/utils/src/index.js: -------------------------------------------------------------------------------- 1 | export default { 2 | utils() { 3 | console.info('hello utils') // eslint-disable-line 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /packages/code/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@ziyi2/code", 3 | "version": "0.1.0", 4 | "description": "", 5 | "main": "index.js", 6 | "author": "ziyi2", 7 | "license": "ISC" 8 | } 9 | -------------------------------------------------------------------------------- /packages/col/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@ziyi2/col", 3 | "version": "0.1.0", 4 | "description": "", 5 | "main": "index.js", 6 | "author": "ziyi2", 7 | "license": "ISC" 8 | } 9 | -------------------------------------------------------------------------------- /packages/nav/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@ziyi2/nav", 3 | "version": "0.1.0", 4 | "description": "", 5 | "main": "index.js", 6 | "author": "ziyi2", 7 | "license": "ISC" 8 | } 9 | -------------------------------------------------------------------------------- /packages/row/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@ziyi2/row", 3 | "version": "0.1.0", 4 | "description": "", 5 | "main": "index.js", 6 | "author": "ziyi2", 7 | "license": "ISC" 8 | } 9 | -------------------------------------------------------------------------------- /packages/tag/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@ziyi2/tag", 3 | "version": "0.1.0", 4 | "description": "", 5 | "main": "index.js", 6 | "author": "ziyi2", 7 | "license": "ISC" 8 | } 9 | -------------------------------------------------------------------------------- /.lintstagedrc: -------------------------------------------------------------------------------- 1 | { 2 | "*.js": [ 3 | "vue-cli-service lint", 4 | "git add" 5 | ], 6 | "*.vue": [ 7 | "vue-cli-service lint", 8 | "git add" 9 | ] 10 | } 11 | -------------------------------------------------------------------------------- /packages/alert/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@ziyi2/alert", 3 | "version": "0.1.0", 4 | "description": "", 5 | "main": "index.js", 6 | "author": "ziyi2", 7 | "license": "ISC" 8 | } 9 | -------------------------------------------------------------------------------- /packages/dialog/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@ziyi2/dialog", 3 | "version": "0.1.0", 4 | "description": "", 5 | "main": "index.js", 6 | "author": "ziyi2", 7 | "license": "ISC" 8 | } 9 | -------------------------------------------------------------------------------- /packages/input/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@ziyi2/input", 3 | "version": "0.1.0", 4 | "description": "", 5 | "main": "index.js", 6 | "author": "ziyi2", 7 | "license": "ISC" 8 | } 9 | -------------------------------------------------------------------------------- /packages/poper/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@ziyi2/poper", 3 | "version": "0.1.0", 4 | "description": "", 5 | "main": "index.js", 6 | "author": "ziyi2", 7 | "license": "ISC" 8 | } 9 | -------------------------------------------------------------------------------- /packages/quote/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@ziyi2/quote", 3 | "version": "0.1.0", 4 | "description": "", 5 | "main": "index.js", 6 | "author": "ziyi2", 7 | "license": "ISC" 8 | } 9 | -------------------------------------------------------------------------------- /packages/radio/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@ziyi2/radio", 3 | "version": "0.1.0", 4 | "description": "", 5 | "main": "index.js", 6 | "author": "ziyi2", 7 | "license": "ISC" 8 | } 9 | -------------------------------------------------------------------------------- /packages/select/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@ziyi2/select", 3 | "version": "0.1.0", 4 | "description": "", 5 | "main": "index.js", 6 | "author": "ziyi2", 7 | "license": "ISC" 8 | } 9 | -------------------------------------------------------------------------------- /packages/table/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@ziyi2/table", 3 | "version": "0.1.0", 4 | "description": "", 5 | "main": "index.js", 6 | "author": "ziyi2", 7 | "license": "ISC" 8 | } 9 | -------------------------------------------------------------------------------- /packages/toast/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@ziyi2/toast", 3 | "version": "0.1.0", 4 | "description": "", 5 | "main": "index.js", 6 | "author": "ziyi2", 7 | "license": "ISC" 8 | } 9 | -------------------------------------------------------------------------------- /packages/tooltip/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@ziyi2/tooltip", 3 | "version": "0.1.0", 4 | "description": "", 5 | "main": "index.js", 6 | "author": "ziyi2", 7 | "license": "ISC" 8 | } 9 | -------------------------------------------------------------------------------- /packages/utils/vnode.js: -------------------------------------------------------------------------------- 1 | export default { 2 | getFirstComponentChild (VNodes) { 3 | return VNodes && VNodes.length && VNodes.filter(VNode => VNode && VNode.tag)[0] 4 | } 5 | } 6 | 7 | -------------------------------------------------------------------------------- /packages/checkbox/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@ziyi2/checkbox", 3 | "version": "0.1.0", 4 | "description": "", 5 | "main": "index.js", 6 | "author": "ziyi2", 7 | "license": "ISC" 8 | } 9 | -------------------------------------------------------------------------------- /packages/dropdown/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@ziyi2/dropdown", 3 | "version": "0.1.0", 4 | "description": "", 5 | "main": "index.js", 6 | "author": "ziyi2", 7 | "license": "ISC" 8 | } 9 | -------------------------------------------------------------------------------- /packages/particle/index.js: -------------------------------------------------------------------------------- 1 | import Particle from './particle' 2 | 3 | Particle.install = function (Vue) { 4 | Vue.component(Particle.name, Particle) 5 | } 6 | 7 | export default Particle 8 | -------------------------------------------------------------------------------- /packages/particle/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@ziyi2/particle", 3 | "version": "0.1.0", 4 | "description": "", 5 | "main": "index.js", 6 | "author": "ziyi2", 7 | "license": "ISC" 8 | } 9 | -------------------------------------------------------------------------------- /packages/snackbar/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@ziyi2/snackbar", 3 | "version": "0.1.0", 4 | "description": "", 5 | "main": "index.js", 6 | "author": "ziyi2", 7 | "license": "ISC" 8 | } 9 | -------------------------------------------------------------------------------- /packages/tooltip/index.js: -------------------------------------------------------------------------------- 1 | import Tooltip from './tooltip.js' 2 | 3 | Tooltip.install = function (Vue) { 4 | Vue.component(Tooltip.name, Tooltip) 5 | } 6 | 7 | export default Tooltip 8 | 9 | -------------------------------------------------------------------------------- /packages/pagination/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@ziyi2/pagination", 3 | "version": "0.1.0", 4 | "description": "", 5 | "main": "index.js", 6 | "author": "ziyi2", 7 | "license": "ISC" 8 | } 9 | -------------------------------------------------------------------------------- /packages/row/row.vue: -------------------------------------------------------------------------------- 1 | 6 | -------------------------------------------------------------------------------- /plugins/vue-cli-plugin-ui-base/generator/template/packages/utils/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [[ 3 | '@babel/preset-env', 4 | { 5 | loose: true 6 | } 7 | ]] 8 | } 9 | -------------------------------------------------------------------------------- /packages/pagination/index.js: -------------------------------------------------------------------------------- 1 | import Pagination from './pagination' 2 | 3 | Pagination.install = (Vue) => { 4 | Vue.component(Pagination.name, Pagination) 5 | } 6 | 7 | export default Pagination 8 | -------------------------------------------------------------------------------- /plugins/vue-cli-plugin-ui-base/generator/template/packages/alert/index.js: -------------------------------------------------------------------------------- 1 | import Alert from './alert' 2 | 3 | Alert.install = function (Vue) { 4 | Vue.component(Alert.name, Alert) 5 | } 6 | 7 | export default Alert 8 | -------------------------------------------------------------------------------- /plugins/vue-cli-plugin-ui-base/generator/template/packages/locale/mixins/index.js: -------------------------------------------------------------------------------- 1 | import { t } from '..'; 2 | 3 | export default { 4 | methods: { 5 | t(...args) { 6 | return t.apply(this, args); 7 | } 8 | } 9 | }; -------------------------------------------------------------------------------- /plugins/vue-cli-plugin-ui-base/generator/template/packages/select/index.js: -------------------------------------------------------------------------------- 1 | import Select from './select' 2 | 3 | Select.install = function (Vue) { 4 | Vue.component(Select.name, Select) 5 | } 6 | 7 | export default Select 8 | -------------------------------------------------------------------------------- /plugins/vue-cli-plugin-ui-base/generator/template/packages/select/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "select", 3 | "version": "0.1.0", 4 | "description": "", 5 | "main": "index.js", 6 | "author": "", 7 | "license": "ISC" 8 | } 9 | -------------------------------------------------------------------------------- /plugins/vue-cli-plugin-ui-lint/generator/template/_lintstagedrc: -------------------------------------------------------------------------------- 1 | { 2 | "*.js": [ 3 | "vue-cli-service lint", 4 | "git add" 5 | ], 6 | "*.vue": [ 7 | "vue-cli-service lint", 8 | "git add" 9 | ] 10 | } -------------------------------------------------------------------------------- /plugins/vue-cli-plugin-ui-base/generator/template/packages/locale/lang/zh_CN.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | ui: { 3 | btn: { 4 | content: '按钮组件' 5 | }, 6 | 7 | alert: { 8 | content: '提示组件' 9 | } 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /packages/locale/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@ziyi2/locale", 3 | "version": "0.1.0", 4 | "description": "", 5 | "main": "index.js", 6 | "author": "", 7 | "license": "ISC", 8 | "dependencies": { 9 | "deepmerge": "^1.5.2" 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /packages/theme/lib/background.css: -------------------------------------------------------------------------------- 1 | .h-background{position:fixed;bottom:0;left:0;right:0;top:0;background-color:hsla(0,0%,4%,.5);z-index:99;display:none;cursor:pointer}@media (max-width:768px){.h-background-responsive-show{display:block}}.h-background-show{display:block} -------------------------------------------------------------------------------- /packages/theme/lib/scrollbar.css: -------------------------------------------------------------------------------- 1 | ::-webkit-scrollbar{width:6px}::-webkit-scrollbar:horizontal{height:6px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{border-radius:3px;background:#e6e6e6}::-webkit-scrollbar-thumb:window-inactive{background:#e6e6e6} -------------------------------------------------------------------------------- /plugins/vue-cli-plugin-ui-base/generator/template/packages/locale/lang/en.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | ui: { 3 | btn: { 4 | content: 'Button Component' 5 | }, 6 | 7 | alert: { 8 | content: 'Alert Component' 9 | } 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | '@vue/app' 4 | ], 5 | 6 | // https://github.com/vuejs/vue-cli/issues/2746 7 | // https://github.com/webpack/webpack/issues/4039#issuecomment-419284940 8 | sourceType: 'unambiguous' 9 | } 10 | -------------------------------------------------------------------------------- /plugins/vue-cli-plugin-ui-cz/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@ziyi2/vue-cli-plugin-ui-cz", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "author": "ziyi2", 7 | "license": "ISC", 8 | "publishConfig": { 9 | "access": "public" 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /plugins/vue-cli-plugin-ui-base/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@ziyi2/vue-cli-plugin-ui-base", 3 | "version": "1.0.2", 4 | "description": "", 5 | "main": "index.js", 6 | "author": "ziyi2", 7 | "license": "ISC", 8 | "publishConfig": { 9 | "access": "public" 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /plugins/vue-cli-plugin-ui-lint/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@ziyi2/vue-cli-plugin-ui-lint", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "author": "ziyi2", 7 | "license": "ISC", 8 | "publishConfig": { 9 | "access": "public" 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /plugins/vue-cli-plugin-ui-base/generator/template/packages/alert/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "alert", 3 | "version": "0.1.0", 4 | "description": "", 5 | "main": "index.js", 6 | "author": "", 7 | "license": "ISC", 8 | "dependencies": { 9 | "locale": "^0.1.0" 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /plugins/vue-cli-plugin-ui-base/generator/template/packages/locale/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "locale", 3 | "version": "0.1.0", 4 | "description": "", 5 | "main": "index.js", 6 | "author": "", 7 | "license": "ISC", 8 | "dependencies": { 9 | "deepmerge": "^1.5.2" 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /src/App.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 12 | 13 | 18 | 19 | -------------------------------------------------------------------------------- /packages/theme/lib/img.css: -------------------------------------------------------------------------------- 1 | .h-img{vertical-align:middle}.h-img-responsive{display:block;max-width:100%;height:auto}.h-img-rounded{border-radius:6px}.h-img-photo{padding:4px;line-height:1.42857143;background-color:#fff;border:1px solid #ddd;border-radius:4px;display:inline-block;max-width:100%;height:auto}.h-img-circle{border-radius:50%} -------------------------------------------------------------------------------- /packages/nav/index.js: -------------------------------------------------------------------------------- 1 | import Nav from './nav' 2 | import NavItem from './nav-item' 3 | 4 | Nav.install = function (Vue) { 5 | Vue.component(Nav.name, Nav) 6 | } 7 | 8 | NavItem.install = function (Vue) { 9 | Vue.component(NavItem.name, NavItem) 10 | } 11 | 12 | export { 13 | Nav, 14 | NavItem 15 | } 16 | -------------------------------------------------------------------------------- /packages/table/constant.js: -------------------------------------------------------------------------------- 1 | const fn = { 2 | init: 'init', 3 | updateData: 'updateData', 4 | sortData: 'sortData', 5 | updateColumns: 'updateColumns' 6 | } 7 | 8 | const sort = { 9 | asc: 'asc', 10 | desc: 'desc', 11 | default: 'default' 12 | } 13 | 14 | export { 15 | fn, 16 | sort 17 | } 18 | -------------------------------------------------------------------------------- /packages/tag/index.js: -------------------------------------------------------------------------------- 1 | import Tag from './tag' 2 | import TagGroup from './tag-group' 3 | 4 | Tag.install = function (Vue) { 5 | Vue.component(Tag.name, Tag) 6 | } 7 | 8 | TagGroup.install = function (Vue) { 9 | Vue.component(TagGroup.name, TagGroup) 10 | } 11 | 12 | export { 13 | Tag, 14 | TagGroup 15 | } 16 | -------------------------------------------------------------------------------- /packages/btn/index.js: -------------------------------------------------------------------------------- 1 | import Btn from './btn' 2 | import BtnGroup from './btn-group' 3 | 4 | Btn.install = function (Vue) { 5 | Vue.component(Btn.name, Btn) 6 | } 7 | 8 | BtnGroup.install = function (Vue) { 9 | Vue.component(BtnGroup.name, BtnGroup) 10 | } 11 | 12 | export { 13 | Btn, 14 | BtnGroup 15 | } 16 | 17 | -------------------------------------------------------------------------------- /src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import App from './App' 3 | import router from './router' 4 | import Ui from '@/ui' 5 | import '@ziyi2/theme/src/index.less' 6 | import '@/assets/icon/css/font-awesome.min.css' 7 | 8 | Vue.use(Ui) 9 | 10 | new Vue({ 11 | router, 12 | render: h => h(App), 13 | }).$mount('#app') 14 | 15 | -------------------------------------------------------------------------------- /plugins/vue-cli-plugin-ui-base/generator/template/src/ui.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | 3 | // 引入组件 4 | import { Btn, BtnGroup } from 'button/index' 5 | import Alert from 'alert/index' 6 | import Select from 'select/index' 7 | 8 | // 引入样式 9 | import 'theme/src/index.less' 10 | 11 | Vue.use(Btn) 12 | Vue.use(BtnGroup) 13 | Vue.use(Alert) 14 | Vue.use(Select) 15 | -------------------------------------------------------------------------------- /packages/table/index.js: -------------------------------------------------------------------------------- 1 | import Table from './table' 2 | import TableColumn from './column' 3 | 4 | Table.install = function (Vue) { 5 | Vue.component(Table.name, Table) 6 | } 7 | 8 | TableColumn.install = function (Vue) { 9 | Vue.component(TableColumn.name, TableColumn) 10 | } 11 | 12 | export { 13 | Table, 14 | TableColumn 15 | } 16 | 17 | -------------------------------------------------------------------------------- /plugins/vue-cli-plugin-ui-base/generator/template/packages/utils/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "utils", 3 | "version": "0.1.0", 4 | "description": "", 5 | "main": "lib/index.js", 6 | "scripts": { 7 | "lib": "babel src --out-dir lib" 8 | }, 9 | "author": "", 10 | "license": "ISC", 11 | "devDependencies": { 12 | "@babel/cli": "^7.4.3" 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /plugins/vue-cli-plugin-ui-lint/generator/index.js: -------------------------------------------------------------------------------- 1 | module.exports = (api) => { 2 | 3 | api.render("./template") 4 | 5 | api.extendPackage({ 6 | devDependencies: { 7 | "husky": "^1.1.1", 8 | "lint-staged": "^8.1.3" 9 | }, 10 | husky: { 11 | "hooks": { 12 | "pre-commit": "lint-staged" 13 | } 14 | } 15 | }) 16 | } -------------------------------------------------------------------------------- /plugins/vue-cli-plugin-ui-base/generator/template/packages/btn/index.js: -------------------------------------------------------------------------------- 1 | import Btn from './btn' 2 | import BtnGroup from './btn-group' 3 | 4 | Btn.install = function (Vue) { 5 | Vue.component(Btn.name, Btn) 6 | } 7 | 8 | BtnGroup.install = function (Vue) { 9 | Vue.component(BtnGroup.name, BtnGroup) 10 | } 11 | 12 | export { 13 | Btn, 14 | BtnGroup 15 | } 16 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /dist 4 | 5 | # local env files 6 | .env.local 7 | .env.*.local 8 | 9 | # Log files 10 | npm-debug.log* 11 | yarn-debug.log* 12 | yarn-error.log* 13 | 14 | # Editor directories and files 15 | .idea 16 | .vscode 17 | *.suo 18 | *.ntvs* 19 | *.njsproj 20 | *.sln 21 | *.sw* 22 | 23 | # Build 24 | packages/@ziyi2/**/lib 25 | -------------------------------------------------------------------------------- /packages/table/colgroup.vue: -------------------------------------------------------------------------------- 1 | 6 | -------------------------------------------------------------------------------- /packages/theme/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@ziyi2/theme", 3 | "version": "0.1.0", 4 | "description": "", 5 | "main": "lib/index.css", 6 | "scripts": { 7 | "lib": "gulp less" 8 | }, 9 | "author": "ziyi2", 10 | "license": "ISC", 11 | "devDependencies": { 12 | "gulp": "^4.0.0", 13 | "gulp-autoprefixer": "^6.0.0", 14 | "gulp-cssmin": "^0.2.0", 15 | "gulp-less": "^4.0.1" 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /src/views/option/index.vue: -------------------------------------------------------------------------------- 1 | 14 | 15 | 20 | 21 | -------------------------------------------------------------------------------- /preset.json: -------------------------------------------------------------------------------- 1 | { 2 | "useConfigFiles": true, 3 | "router": true, 4 | "routerHistoryMode": true, 5 | "vuex": false, 6 | "cssPreprocessor": "less", 7 | "packageManager": "yarn", 8 | "plugins": { 9 | "@vue/cli-plugin-babel": {}, 10 | "@vue/cli-plugin-eslint": { 11 | "lintOn": ["save", "commit"] 12 | }, 13 | "@ziyi2/vue-cli-plugin-ui-base": {}, 14 | "@ziyi2/vue-cli-plugin-ui-cz": {}, 15 | "@ziyi2/vue-cli-plugin-ui-lint": {} 16 | } 17 | } -------------------------------------------------------------------------------- /plugins/vue-cli-plugin-ui-base/generator/template/packages/theme/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "theme", 3 | "version": "0.1.0", 4 | "description": "", 5 | "main": "lib/index.css", 6 | "scripts": { 7 | "lib": "gulp less" 8 | }, 9 | "author": "", 10 | "license": "ISC", 11 | "devDependencies": { 12 | "gulp": "^4.0.0", 13 | "gulp-autoprefixer": "^6.0.0", 14 | "gulp-cssmin": "^0.2.0", 15 | "gulp-less": "^4.0.1" 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /packages/btn/vue.config.js: -------------------------------------------------------------------------------- 1 | const vueCommon = require('../../vue.common') 2 | const { chainWebpack, configureWebpack } = vueCommon 3 | delete vueCommon.chainWebpackCallback 4 | delete vueCommon.configureWebpack 5 | 6 | module.exports = { 7 | ...vueCommon, 8 | 9 | configureWebpack: { 10 | ...configureWebpack, 11 | // configureWebpack配置 12 | }, 13 | 14 | chainWebpack(webpackConfig) { 15 | chainWebpack(webpackConfig) 16 | // chainWebpack配置 17 | } 18 | } -------------------------------------------------------------------------------- /src/views/bomb/box.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | 26 | 27 | 28 | 29 | -------------------------------------------------------------------------------- /packages/radio/index.js: -------------------------------------------------------------------------------- 1 | import Radio from './radio' 2 | import RadioBtn from './radio-btn' 3 | import RadioGroup from './radio-group' 4 | 5 | Radio.install = function (Vue) { 6 | Vue.component(Radio.name, Radio) 7 | } 8 | 9 | RadioBtn.install = function (Vue) { 10 | Vue.component(RadioBtn.name, RadioBtn) 11 | } 12 | 13 | RadioGroup.install = function (Vue) { 14 | Vue.component(RadioGroup.name, RadioGroup) 15 | } 16 | 17 | export { 18 | Radio, 19 | RadioBtn, 20 | RadioGroup 21 | } 22 | -------------------------------------------------------------------------------- /packages/toast/toast.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | const ToastConstructor = Vue.extend(require('./toast.vue')) 3 | 4 | let toast 5 | 6 | const Toast = function (opts = {}) { 7 | if (typeof opts === 'string') { 8 | opts = { 9 | message: opts 10 | } 11 | } 12 | 13 | toast = new ToastConstructor({ 14 | propsData: opts 15 | }) 16 | 17 | toast.vm = toast.$mount() 18 | document.body.appendChild(toast.vm.$el) 19 | return toast.vm 20 | } 21 | 22 | export default Toast 23 | -------------------------------------------------------------------------------- /packages/theme/gulpfile.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | const gulp = require('gulp'); 4 | const less = require('gulp-less'); 5 | const autoprefixer = require('gulp-autoprefixer'); 6 | const cssmin = require('gulp-cssmin'); 7 | 8 | gulp.task('less', function () { 9 | return gulp.src('./src/*.less') 10 | .pipe(less()) 11 | .pipe(autoprefixer({ 12 | browsers: ['ie > 9', 'last 2 versions'], 13 | cascade: false 14 | })) 15 | .pipe(cssmin()) 16 | .pipe(gulp.dest('./lib')); 17 | }) 18 | -------------------------------------------------------------------------------- /plugins/vue-cli-plugin-ui-base/generator/template/packages/btn/vue.config.js: -------------------------------------------------------------------------------- 1 | const vueCommon = require('../../vue.common') 2 | const { chainWebpack, configureWebpack } = vueCommon 3 | delete vueCommon.chainWebpackCallback 4 | delete vueCommon.configureWebpack 5 | 6 | module.exports = { 7 | ...vueCommon, 8 | 9 | configureWebpack: { 10 | ...configureWebpack, 11 | // configureWebpack配置 12 | }, 13 | 14 | chainWebpack(webpackConfig) { 15 | chainWebpack(webpackConfig) 16 | // chainWebpack配置 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /packages/snackbar/snackbar.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | const SnackbarConstructor = Vue.extend(require('./snackbar.vue')) 3 | 4 | let snackbar 5 | 6 | const Snackbar = function (opts = {}) { 7 | if (typeof opts === 'string') { 8 | opts = { 9 | message: opts 10 | } 11 | } 12 | 13 | snackbar = new SnackbarConstructor({ 14 | propsData: opts 15 | }) 16 | 17 | snackbar.vm = snackbar.$mount() 18 | document.body.appendChild(snackbar.vm.$el) 19 | return snackbar.vm 20 | } 21 | 22 | export default Snackbar 23 | -------------------------------------------------------------------------------- /plugins/vue-cli-plugin-ui-base/generator/template/packages/theme/gulpfile.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | const gulp = require('gulp'); 4 | const less = require('gulp-less'); 5 | const autoprefixer = require('gulp-autoprefixer'); 6 | const cssmin = require('gulp-cssmin'); 7 | 8 | gulp.task('less', function () { 9 | return gulp.src('./src/*.less') 10 | .pipe(less()) 11 | .pipe(autoprefixer({ 12 | browsers: ['ie > 9', 'last 2 versions'], 13 | cascade: false 14 | })) 15 | .pipe(cssmin()) 16 | .pipe(gulp.dest('./lib')); 17 | }) 18 | -------------------------------------------------------------------------------- /packages/checkbox/index.js: -------------------------------------------------------------------------------- 1 | import Checkbox from './checkbox' 2 | import CheckboxBtn from './checkbox-btn' 3 | import CheckboxGroup from './checkbox-group' 4 | 5 | Checkbox.install = function (Vue) { 6 | Vue.component(Checkbox.name, Checkbox) 7 | } 8 | 9 | CheckboxBtn.install = function (Vue) { 10 | Vue.component(CheckboxBtn.name, CheckboxBtn) 11 | } 12 | 13 | CheckboxGroup.install = function (Vue) { 14 | Vue.component(CheckboxGroup.name, CheckboxGroup) 15 | } 16 | 17 | export { 18 | Checkbox, 19 | CheckboxBtn, 20 | CheckboxGroup 21 | } 22 | -------------------------------------------------------------------------------- /packages/utils/scroll.js: -------------------------------------------------------------------------------- 1 | 2 | import dom from './dom' 3 | 4 | export default { 5 | 6 | addEvent (handler) { 7 | dom.addEventListener(document, 'scroll', handler) 8 | }, 9 | 10 | removeEvent (handler) { 11 | dom.removeEventListener(document, 'scroll', handler) 12 | }, 13 | 14 | positionToTop (element) { 15 | if (!element.scrollTop) return 16 | element.scrollTop = 0 17 | }, 18 | 19 | isHtmlScrollY () { 20 | return document.documentElement.scrollHeight > document.documentElement.clientHeight 21 | } 22 | 23 | } 24 | 25 | -------------------------------------------------------------------------------- /plugins/vue-cli-plugin-ui-base/generator/index.js: -------------------------------------------------------------------------------- 1 | module.exports = (api) => { 2 | api.render('./template') 3 | 4 | api.injectImports('src/main.js', `import './ui'`) 5 | 6 | api.extendPackage({ 7 | 8 | workspaces: [ 9 | 'packages/*' 10 | ], 11 | 12 | husky: { 13 | hooks: { 14 | "post-merge": "lerna bootstrap" 15 | } 16 | }, 17 | 18 | scripts: { 19 | lib: 'lerna run lib', 20 | bootstrap: 'lerna bootstrap' 21 | }, 22 | 23 | devDependencies: { 24 | 'webpack-node-externals': '^1.7.2', 25 | 'less-loader': '^4.1.0' 26 | } 27 | }) 28 | } 29 | -------------------------------------------------------------------------------- /packages/btn/btn-group.vue: -------------------------------------------------------------------------------- 1 | 13 | -------------------------------------------------------------------------------- /packages/dialog/dialog.vue: -------------------------------------------------------------------------------- 1 | 11 | -------------------------------------------------------------------------------- /packages/theme/src/row.less: -------------------------------------------------------------------------------- 1 | // file: row.less 2 | // data: 2017/09/24 3 | // auth: ziyi2 4 | // desc: 栅格行样式 5 | // -------------------------------------------------- 6 | 7 | // desc: 通用变量和函数(转css需要) 8 | // -------------------------------------------------- 9 | @import "./utils/var.less"; 10 | @import "./utils/mixins.less"; 11 | 12 | // desc: 变量 13 | // -------------------------------------------------- 14 | 15 | 16 | // desc: 混合 17 | // -------------------------------------------------- 18 | 19 | 20 | // desc: 样式 21 | // -------------------------------------------------- 22 | .h-row { 23 | .clearfix(); 24 | } 25 | 26 | -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | vue-cli-lerna-ui-plugins 9 | 10 | 11 | 14 |
15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /src/views/animation/particle.vue: -------------------------------------------------------------------------------- 1 | 11 | 12 | 29 | 30 | 31 | 33 | 34 | 35 | 36 | -------------------------------------------------------------------------------- /packages/theme/src/particle.less: -------------------------------------------------------------------------------- 1 | // file: row.less 2 | // data: 2018/01/04 3 | // auth: ziyi2 4 | // desc: 粒子背景 5 | // -------------------------------------------------- 6 | 7 | // desc: 通用变量和函数(转css需要) 8 | // -------------------------------------------------- 9 | @import "./utils/var.less"; 10 | @import "./utils/mixins.less"; 11 | 12 | // desc: 变量 13 | // -------------------------------------------------- 14 | 15 | 16 | // desc: 混合 17 | // -------------------------------------------------- 18 | 19 | 20 | // desc: 样式 21 | // -------------------------------------------------- 22 | .h-particle { 23 | width: 100%; 24 | height: 100%; 25 | } 26 | 27 | -------------------------------------------------------------------------------- /plugins/vue-cli-plugin-ui-base/generator/template/packages/theme/src/index.less: -------------------------------------------------------------------------------- 1 | // file: index.less 2 | // data: 3 | // auth: 4 | // desc: less样式汇总 5 | // -------------------------------------------------- 6 | 7 | // desc: 通用变量和函数(转css需要) 8 | // -------------------------------------------------- 9 | @import "./utils/var.less"; 10 | @import "./utils/animations.less"; 11 | @import "./utils/mixins.less"; 12 | 13 | /* 全局CSS样式初始化 */ 14 | @import "normalize.less"; 15 | @import "scaffolding.less"; // 初始化 16 | 17 | /* 基础组件 */ 18 | @import "btn.less"; // 按钮 19 | @import "alert.less"; // 警告 20 | @import "select.less"; // 选择框 21 | -------------------------------------------------------------------------------- /packages/quote/quote.vue: -------------------------------------------------------------------------------- 1 | 14 | -------------------------------------------------------------------------------- /packages/btn/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@ziyi2/button", 3 | "version": "0.1.0", 4 | "description": "button component", 5 | "main": "lib/index.common.js", 6 | "author": "ziyi2", 7 | "license": "ISC", 8 | "scripts": { 9 | "lib": "vue-cli-service build --target lib --formats commonjs --name index index.js" 10 | }, 11 | "devDependencies": { 12 | "@vue/cli-plugin-babel": "^3.5.0", 13 | "@vue/cli-plugin-eslint": "^3.5.0", 14 | "@vue/cli-service": "^3.5.0", 15 | "babel-eslint": "^10.0.1", 16 | "eslint": "^5.8.0", 17 | "eslint-plugin-vue": "^5.0.0", 18 | "lerna": "^3.13.1", 19 | "vue-template-compiler": "^2.5.21" 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /plugins/vue-cli-plugin-ui-base/generator/template/packages/btn/btn-group.vue: -------------------------------------------------------------------------------- 1 | 13 | 25 | -------------------------------------------------------------------------------- /packages/utils/emit.js: -------------------------------------------------------------------------------- 1 | export default { 2 | methods: { 3 | /* 4 | * @Desc: 子组件向父级组件分发数据 5 | * @Parm: parent -> 父组件的name 6 | e -> 事件名称 7 | value -> 数据 8 | */ 9 | dispatch (parentName, e, value) { 10 | let parent = this.$parent || this.$root // $root可能是自己, 如果当前组件没有根Vue实例 11 | let name = parent.$options.name 12 | 13 | while (parent && (!name || name !== parentName)) { 14 | parent = parent.$parent 15 | if (parent) { 16 | name = parent.$options.name 17 | } 18 | } 19 | 20 | if (parent) { 21 | parent.$emit(e, value) 22 | } 23 | } 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /packages/theme/src/scrollbar.less: -------------------------------------------------------------------------------- 1 | // file: scrollbar.less 2 | // data: 2017/11/15 3 | // auth: ziyi2 4 | // desc: 滚动条样式 5 | // -------------------------------------------------- 6 | @import "./utils/var.less"; 7 | 8 | 9 | ::-webkit-scrollbar { 10 | width: 6px; 11 | } 12 | 13 | ::-webkit-scrollbar:horizontal { 14 | height: 6px; 15 | } 16 | 17 | 18 | /* Track */ 19 | ::-webkit-scrollbar-track { 20 | background: transparent; 21 | } 22 | 23 | 24 | /* Handle */ 25 | ::-webkit-scrollbar-thumb { 26 | -webkit-border-radius: 3px; 27 | border-radius: 3px; 28 | background: @gray-90; 29 | } 30 | 31 | ::-webkit-scrollbar-thumb:window-inactive { 32 | background: @gray-90; 33 | } 34 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # vue-cli3-lerna-ui 2 | 3 | ## Project setup 4 | 5 | ``` bash 6 | vue create --preset ziyi2/vue-cli3-lerna-ui my-project --packageManager yarn 7 | ``` 8 | 9 | ### Compiles and hot-reloads for development 10 | 11 | ``` bash 12 | yarn serve 13 | ``` 14 | 15 | ### Build UI Library 16 | 17 | ``` bash 18 | lerna run lib 19 | ``` 20 | 21 | ### Publish UI Librayr 22 | 23 | ``` bash 24 | lerna publish 25 | ``` 26 | 27 | ### Compiles and minifies for production 28 | 29 | ``` bash 30 | yarn build 31 | ``` 32 | 33 | ### Lints and fixes files 34 | 35 | ``` bash 36 | yarn lint 37 | ``` 38 | 39 | 40 | ### Doc 41 | 42 | [Vue CLI 3结合Lerna进行UI设计](https://github.com/ziyi2/ziyi2.github.io/issues/4) 43 | 44 | 45 | 46 | -------------------------------------------------------------------------------- /src/views/bomb/dialog.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | 35 | 36 | 37 | 38 | -------------------------------------------------------------------------------- /plugins/vue-cli-plugin-ui-base/generator/template/packages/btn/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "button", 3 | "version": "0.1.0", 4 | "description": "button component", 5 | "main": "lib/index.common.js", 6 | "author": "", 7 | "license": "ISC", 8 | "scripts": { 9 | "lib": "vue-cli-service build --target lib --formats commonjs --name index index.js" 10 | }, 11 | "dependencies": { 12 | "locale": "^0.1.0" 13 | }, 14 | "devDependencies": { 15 | "@vue/cli-plugin-babel": "^3.5.0", 16 | "@vue/cli-plugin-eslint": "^3.5.0", 17 | "@vue/cli-service": "^3.5.0", 18 | "babel-eslint": "^10.0.1", 19 | "eslint": "^5.8.0", 20 | "eslint-plugin-vue": "^5.0.0", 21 | "lerna": "^3.13.1", 22 | "vue-template-compiler": "^2.5.21" 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /packages/theme/lib/poper.css: -------------------------------------------------------------------------------- 1 | .h-poper{position:absolute;z-index:98;top:0;left:0;display:block;width:100%;max-width:100%;min-height:36px;padding:7px 12px;border:1px solid #e6e6e6;line-height:20px;-webkit-box-shadow:0 2px 12px 0 rgba(0,0,0,.1);box-shadow:0 2px 12px 0 rgba(0,0,0,.1);background:#FFF}.h-poper-placement-right{border-left-width:0;border-right-color:#e6e6e6}.h-poper-placement-left{border-right-width:0;border-left-color:#e6e6e6}.h-poper-placement-bottom{border-top-width:0;border-bottom-color:#e6e6e6}.h-poper-placement-top{border-bottom-width:0;border-top-color:#e6e6e6}.h-poper-radius-small{border-radius:3px}.h-poper-radius-large{border-radius:6px}.h-poper-fade-enter-active,.h-poper-fade-leave-active{-webkit-transition:opacity .5s ease;transition:opacity .5s ease}.h-poper-fade-enter,.h-poper-fade-leave-to{opacity:0} -------------------------------------------------------------------------------- /packages/radio/radio-group.vue: -------------------------------------------------------------------------------- 1 | 13 | -------------------------------------------------------------------------------- /packages/checkbox/checkbox-group.vue: -------------------------------------------------------------------------------- 1 | 13 | -------------------------------------------------------------------------------- /packages/nav/nav-item.vue: -------------------------------------------------------------------------------- 1 | 9 | -------------------------------------------------------------------------------- /plugins/vue-cli-plugin-ui-cz/generator/index.js: -------------------------------------------------------------------------------- 1 | module.exports = (api) => { 2 | api.render("./template") 3 | 4 | api.extendPackage({ 5 | scripts: { 6 | "cz:changelog": "conventional-changelog -p angular -i CHANGELOG.md -s && git add CHANGELOG.md", 7 | }, 8 | config: { 9 | "commitizen": { 10 | "path": "node_modules/cz-customizable" 11 | } 12 | }, 13 | commitlint:{ 14 | "extends": [ 15 | "@commitlint/config-conventional" 16 | ] 17 | }, 18 | devDependencies: { 19 | "commitizen": "^3.0.5", 20 | "@commitlint/cli": "^7.2.0", 21 | "@commitlint/config-conventional": "^7.5.0", 22 | "conventional-changelog": "^3.0.5", 23 | "cz-customizable": "^5.2.0", 24 | "husky": "^1.1.1" 25 | }, 26 | husky: { 27 | "hooks": { 28 | "commit-msg": "commitlint -E HUSKY_GIT_PARAMS" 29 | } 30 | } 31 | }) 32 | } -------------------------------------------------------------------------------- /packages/theme/lib/code.css: -------------------------------------------------------------------------------- 1 | .h-code{border-radius:3px;margin:10px 0;overflow:auto;width:100%}.h-code pre{display:block;overflow:visible;padding:10px;margin:0;font-family:Menlo,Monaco,Consolas,"Courier New",monospace;font-size:14px}.h-code-lines{float:left;text-align:right;background-color:#2b2a2a;color:grey}.h-code-codes,.h-code-codes-dark{color:#e6e6e6;background-color:#2b2a2a}.h-code-lines-dark{background-color:#2b2a2a;color:grey}.h-code-codes-light{color:#4d4d4c;background-color:#f7f7f7}.h-code-lines-light{background-color:#eff2f3;color:#b3b3b2}.h-code-line{height:20px;vertical-align:middle}.h-code-keyword{color:#c9c}.h-code-literal{color:#57c7d4}.h-code-builtin{color:#f8AE48}.h-code-number{color:#f96868}.h-code-function{color:#69c}.h-code-reg{color:#22863a}.h-code-template{color:#6cc56c}.h-code-comment{color:#8e908c}.h-code-comments{color:#690}.h-code-shadow{-webkit-box-shadow:0 2px 12px 0 rgba(0,0,0,.1);box-shadow:0 2px 12px 0 rgba(0,0,0,.1)} -------------------------------------------------------------------------------- /packages/theme/src/background.less: -------------------------------------------------------------------------------- 1 | // file: background.less 2 | // data: 2017/11/15 3 | // auth: ziyi2 4 | // desc: 遮幕样式 5 | // -------------------------------------------------- 6 | 7 | // desc: 通用变量和函数(转css需要) 8 | // -------------------------------------------------- 9 | @import "./utils/var.less"; 10 | @import "./utils/mixins.less"; 11 | 12 | // desc: 混合 13 | // -------------------------------------------------- 14 | 15 | 16 | 17 | // desc: 基本样式 18 | // -------------------------------------------------- 19 | .h-background { 20 | position: fixed; 21 | bottom: 0; 22 | left: 0; 23 | right: 0; 24 | top: 0; 25 | background-color: hsla(0,0%,4%,.5); 26 | z-index: @dropdown-menu-index; 27 | display: none; 28 | cursor: pointer; 29 | } 30 | 31 | @media (max-width: @screen-sm-min) { 32 | .h-background-responsive-show { 33 | display: block; 34 | } 35 | } 36 | 37 | .h-background-show { 38 | display: block; 39 | } -------------------------------------------------------------------------------- /packages/code/language/css.js: -------------------------------------------------------------------------------- 1 | /* 2 | * @Author: ziyi2 3 | * @Date: 2017-09-28 4 | */ 5 | 6 | const regs = { 7 | // string 8 | template: /("|')(\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1/g, 9 | // atrule 10 | keyword: /@[\w-]+?.*?(;|(?=\s*\{))/g, 11 | // selector 12 | builtin: /\b[^{}\s][^{};]*?(?=\s*\{)\b/g, 13 | // comment 14 | comments: /\/\*[\s\S]*?\*\//g, 15 | // url 16 | reg: /url\((?:(["'])(\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1|.*?)\)/g, 17 | // property 18 | literal: /(\b|\B)[\w-]+(?=\s*:)/g, 19 | // important 20 | number: /\B!important\b/gi, 21 | // function 22 | function: /[-a-z0-9]+(?=\()/g 23 | } 24 | 25 | /* 26 | * @Desc: 高亮css代码 27 | * @Parm: text -> css代码字符串 28 | */ 29 | export function css (text) { 30 | for (let reg in regs) { 31 | text = text.replace(regs[reg], (matches) => { 32 | return `${matches}` 33 | }) 34 | } 35 | return text 36 | } 37 | -------------------------------------------------------------------------------- /packages/alert/alert.vue: -------------------------------------------------------------------------------- 1 | 17 | -------------------------------------------------------------------------------- /packages/table/column.js: -------------------------------------------------------------------------------- 1 | 2 | import { sort } from './constant' 3 | 4 | export default { 5 | name: 'HTableColumn', 6 | 7 | props: { 8 | prop: String, 9 | label: String, 10 | width: [String, Number], 11 | ellipsis: Boolean, 12 | sortable: Boolean, 13 | customClass: String 14 | }, 15 | 16 | methods: { 17 | getColumns (options) { 18 | const column = {} 19 | for (let name in options) { 20 | column[name] = options[name] 21 | } 22 | return column 23 | } 24 | }, 25 | 26 | render() { 27 | }, 28 | 29 | created () { 30 | let store = this.$parent.store 31 | const column = this.getColumns({ 32 | prop: this.prop, 33 | label: this.label, 34 | width: this.width, 35 | sortable: this.sortable, 36 | ellipsis: this.ellipsis, 37 | sortValue: sort.default, 38 | customClass: this.customClass 39 | }) 40 | store.states.columns.push(column) 41 | } 42 | } 43 | 44 | 45 | 46 | -------------------------------------------------------------------------------- /packages/theme/lib/quote.css: -------------------------------------------------------------------------------- 1 | .h-blockquote{padding:10px 20px;margin:0 0 20px;font-size:17.5px;border:1px solid #e6e6e6;border-left:5px solid #e6e6e6}.h-blockquote:after,.h-blockquote:before{content:''}.h-blockquote ol:last-child,.h-blockquote p:last-child,.h-blockquote ul:last-child{margin-bottom:0}.h-blockquote footer{font-size:80%;line-height:1.42857143;color:#999;text-align:left}.h-blockquote footer:before{content:'\2014 \00A0'}.h-blockquote footer:after{content:''}.h-blockquote-semantic-default{border-left:5px solid #e6e6e6}.h-blockquote-semantic-primary{border-left:5px solid #8fc1f0}.h-blockquote-semantic-success{border-left:5px solid #6ccba2}.h-blockquote-semantic-info{border-left:5px solid #80d5de}.h-blockquote-semantic-warning{border-left:5px solid #f6bf83}.h-blockquote-semantic-danger{border-left:5px solid #fb9999}.h-blockquote-radius-small{border-radius:0 8px 8px 0}.h-blockquote-radius-large{border-radius:0 12px 12px 0}.h-blockquote-shadow{-webkit-box-shadow:0 2px 12px 0 rgba(0,0,0,.1);box-shadow:0 2px 12px 0 rgba(0,0,0,.1);border-right:none;border-top:none;border-bottom:none} -------------------------------------------------------------------------------- /packages/locale/src/format.js: -------------------------------------------------------------------------------- 1 | const RE_NARGS = /(%|)\{([0-9a-zA-Z_]+)\}/g; 2 | /** 3 | * String format template 4 | * - Inspired: 5 | * https://github.com/Matt-Esch/string-template/index.js 6 | */ 7 | export default function() { 8 | /** 9 | * template 10 | * 11 | * @param {String} string 12 | * @param {Array} ...args 13 | * @return {String} 14 | */ 15 | 16 | function template(string, ...args) { 17 | if (args.length === 1 && typeof args[0] === 'object') { 18 | args = args[0]; 19 | } 20 | 21 | if (!args || !args.hasOwnProperty) { 22 | args = {}; 23 | } 24 | 25 | return string.replace(RE_NARGS, (match, prefix, i, index) => { 26 | let result; 27 | 28 | if (string[index - 1] === '{' && string[index + match.length] === '}') { 29 | return i; 30 | } else { 31 | result = Object.prototype.hasOwnProperty.call(args, i) ? args[i] : null; 32 | if (result === null || result === undefined) { 33 | return ''; 34 | } 35 | 36 | return result; 37 | } 38 | }); 39 | } 40 | 41 | return template; 42 | } 43 | -------------------------------------------------------------------------------- /plugins/vue-cli-plugin-ui-base/generator/template/packages/alert/alert.vue: -------------------------------------------------------------------------------- 1 | 18 | 48 | -------------------------------------------------------------------------------- /plugins/vue-cli-plugin-ui-base/generator/template/packages/locale/src/format.js: -------------------------------------------------------------------------------- 1 | const RE_NARGS = /(%|)\{([0-9a-zA-Z_]+)\}/g; 2 | /** 3 | * String format template 4 | * - Inspired: 5 | * https://github.com/Matt-Esch/string-template/index.js 6 | */ 7 | export default function() { 8 | /** 9 | * template 10 | * 11 | * @param {String} string 12 | * @param {Array} ...args 13 | * @return {String} 14 | */ 15 | 16 | function template(string, ...args) { 17 | if (args.length === 1 && typeof args[0] === 'object') { 18 | args = args[0]; 19 | } 20 | 21 | if (!args || !args.hasOwnProperty) { 22 | args = {}; 23 | } 24 | 25 | return string.replace(RE_NARGS, (match, prefix, i, index) => { 26 | let result; 27 | 28 | if (string[index - 1] === '{' && string[index + match.length] === '}') { 29 | return i; 30 | } else { 31 | result = Object.prototype.hasOwnProperty.call(args, i) ? args[i] : null; 32 | if (result === null || result === undefined) { 33 | return ''; 34 | } 35 | 36 | return result; 37 | } 38 | }); 39 | } 40 | 41 | return template; 42 | } 43 | -------------------------------------------------------------------------------- /packages/theme/src/utils/animations.less: -------------------------------------------------------------------------------- 1 | // file: animations.less 2 | // data: 2017/10/28 3 | // auth: ziyi2 4 | // desc: 动画 5 | // -------------------------------------------------- 6 | 7 | // desc: 变量 8 | // -------------------------------------------------- 9 | @base-time: .2s; 10 | @dropdown-time: .2s; 11 | 12 | // desc: 样式 13 | // -------------------------------------------------- 14 | 15 | // Expand 16 | .expand-init { 17 | transform: scale(0); 18 | transition: transform @base-time ease; 19 | -webkit-transition: transform @base-time ease; 20 | } 21 | 22 | .expand-done { 23 | transform: scale(1); 24 | } 25 | 26 | // Fade Color 27 | .fade-background { 28 | transition: background-color @base-time ease; 29 | } 30 | 31 | .fade-border { 32 | transition: border-color @base-time ease; 33 | } 34 | 35 | .fade-color { 36 | transition: color @base-time ease; 37 | } 38 | 39 | .fade-all { 40 | transition: all @base-time ease; 41 | } 42 | 43 | .fade-opacity { 44 | transition: opacity @base-time ease; 45 | } 46 | 47 | .fade-height { 48 | transition: height @base-time ease; 49 | } 50 | 51 | 52 | .fade-all-dropdown { 53 | transition: all @dropdown-time ease; 54 | } -------------------------------------------------------------------------------- /packages/table/body.vue: -------------------------------------------------------------------------------- 1 | 16 | -------------------------------------------------------------------------------- /src/views/option/fontTable.vue: -------------------------------------------------------------------------------- 1 | 42 | 43 | 54 | 55 | -------------------------------------------------------------------------------- /plugins/vue-cli-plugin-ui-base/generator/template/packages/theme/src/utils/animations.less: -------------------------------------------------------------------------------- 1 | // file: animations.less 2 | // data: 2017/10/28 3 | // auth: ziyi2 4 | // desc: 动画 5 | // -------------------------------------------------- 6 | 7 | // desc: 变量 8 | // -------------------------------------------------- 9 | @base-time: .2s; 10 | @dropdown-time: .2s; 11 | 12 | // desc: 样式 13 | // -------------------------------------------------- 14 | 15 | // Expand 16 | .expand-init { 17 | transform: scale(0); 18 | transition: transform @base-time ease; 19 | -webkit-transition: transform @base-time ease; 20 | } 21 | 22 | .expand-done { 23 | transform: scale(1); 24 | } 25 | 26 | // Fade Color 27 | .fade-background { 28 | transition: background-color @base-time ease; 29 | } 30 | 31 | .fade-border { 32 | transition: border-color @base-time ease; 33 | } 34 | 35 | .fade-color { 36 | transition: color @base-time ease; 37 | } 38 | 39 | .fade-all { 40 | transition: all @base-time ease; 41 | } 42 | 43 | .fade-opacity { 44 | transition: opacity @base-time ease; 45 | } 46 | 47 | .fade-height { 48 | transition: height @base-time ease; 49 | } 50 | 51 | 52 | .fade-all-dropdown { 53 | transition: all @dropdown-time ease; 54 | } 55 | -------------------------------------------------------------------------------- /src/components/propsTable.vue: -------------------------------------------------------------------------------- 1 | 41 | 42 | 52 | 53 | -------------------------------------------------------------------------------- /packages/utils/screen.js: -------------------------------------------------------------------------------- 1 | 2 | export default { 3 | getWindowsScrollOffsets (w) { 4 | w = w || window // 使用指定的窗口，不带参数则是使用当前windows窗口 5 | 6 | if (w.pageXOffset != null) { // 除了IE8或者更早的版本以外其他浏览器都可用 7 | return { 8 | x: w.pageXOffset, 9 | y: w.pageYOffset 10 | } 11 | } 12 | 13 | let d = w.document 14 | if (document.compatMode === 'CSS1Compat') { // 对标准模式下的IE（或任何浏览器） 15 | return { 16 | x: d.documentElement.scrollLeft, 17 | y: d.documentElement.scrollTop 18 | } 19 | } 20 | 21 | return { // 怪异模式 22 | x: d.body.scrollLeft, 23 | y: d.body.scrollTop 24 | } 25 | }, 26 | 27 | getViewPortSize (w) { 28 | w = w || window 29 | 30 | if (w.innerWidth) { 31 | return { 32 | x: w.innerWidth, 33 | y: w.innerHeight 34 | } 35 | } 36 | 37 | let d = document 38 | if (document.compatMode === 'CSS1Compat') { 39 | return { 40 | x: d.documentElement.clientWidth, 41 | y: d.documentElement.clientHeight 42 | } 43 | } 44 | 45 | return { 46 | x: d.body.clientWidth, 47 | y: d.body.clientHeight 48 | } 49 | } 50 | 51 | } 52 | 53 | -------------------------------------------------------------------------------- /packages/code/code.vue: -------------------------------------------------------------------------------- 1 | 7 | -------------------------------------------------------------------------------- /packages/btn/btn.vue: -------------------------------------------------------------------------------- 1 | 21 | -------------------------------------------------------------------------------- /packages/tag/tag-group.vue: -------------------------------------------------------------------------------- 1 | 12 | -------------------------------------------------------------------------------- /plugins/vue-cli-plugin-ui-base/generator/template/src/components/HelloWorld.vue: -------------------------------------------------------------------------------- 1 | 22 | 23 | 56 | 57 | 58 | 63 | -------------------------------------------------------------------------------- /packages/theme/src/utils/mixins.less: -------------------------------------------------------------------------------- 1 | // file: mixins.less 2 | // data: 2017/09/21 3 | // auth: ziyi2 4 | // desc: 混合 5 | // -------------------------------------------------- 6 | 7 | //== 清除浮动 8 | .clearfix() { 9 | &:before, 10 | &:after { 11 | content: " "; 12 | display: table; 13 | } 14 | &:after { 15 | clear: both; 16 | } 17 | } 18 | 19 | 20 | //== 是否允许用户选择文本 21 | .user-select(@select) { 22 | -webkit-user-select: @select; 23 | -moz-user-select: @select; 24 | -ms-user-select: @select; // IE10+ 25 | -o-user-select: @select; 26 | user-select: @select; 27 | } 28 | 29 | //== 透明度 30 | .opacity(@opacity) { 31 | opacity: @opacity; 32 | // IE8 33 | @opacity-ie: (@opacity * 100); 34 | filter: ~"alpha(opacity=@{opacity-ie})"; 35 | } 36 | 37 | //== 阴影 38 | .box-shadow(@shadow) { 39 | -webkit-box-shadow: @shadow; 40 | box-shadow: @shadow; 41 | } 42 | 43 | 44 | //== 圆角 45 | .border-right-radius(@radius) { 46 | border-bottom-right-radius: @radius; 47 | border-top-right-radius: @radius; 48 | } 49 | 50 | .border-left-radius(@radius) { 51 | border-bottom-left-radius: @radius; 52 | border-top-left-radius: @radius; 53 | } 54 | 55 | //== disabled 56 | .disabled() { 57 | cursor: not-allowed; 58 | .opacity(.5); 59 | .box-shadow(none); 60 | } 61 | 62 | 63 | -------------------------------------------------------------------------------- /packages/theme/src/img.less: -------------------------------------------------------------------------------- 1 | // file: img.less 2 | // data: 2017/09/21 3 | // auth: ziyi2 4 | // desc: 图片样式 5 | // -------------------------------------------------- 6 | 7 | // desc: 通用变量和函数(转css需要) 8 | // -------------------------------------------------- 9 | @import "./utils/var.less"; 10 | @import "./utils/mixins.less"; 11 | 12 | // desc: 变量 13 | // -------------------------------------------------- 14 | 15 | @img-padding: 4px; 16 | @img-bg: #fff; 17 | @img-border: #ddd; 18 | @img-border-radius: @border-radius-base; 19 | 20 | // desc: 混合 21 | // -------------------------------------------------- 22 | .img-responsive(@display: block) { 23 | display: @display; 24 | max-width: 100%; 25 | height: auto; 26 | } 27 | 28 | 29 | // desc: 样式 30 | // -------------------------------------------------- 31 | 32 | .h-img { 33 | vertical-align: middle; 34 | } 35 | 36 | .h-img-responsive { 37 | .img-responsive(); 38 | } 39 | 40 | .h-img-rounded { 41 | border-radius: @border-radius-large; 42 | } 43 | 44 | .h-img-photo { 45 | padding: @img-padding; 46 | line-height: @line-height-base; 47 | background-color: @img-bg; 48 | border: 1px solid @img-border; 49 | border-radius: @img-border-radius; 50 | .img-responsive(inline-block); 51 | } 52 | 53 | .h-img-circle { 54 | border-radius: 50%; 55 | } 56 | 57 | -------------------------------------------------------------------------------- /packages/theme/lib/pagination.css: -------------------------------------------------------------------------------- 1 | .h-page-header .h-page-total,.h-page-header .h-pagination-jump,.h-pagination,.h-pagination li{display:inline-block}.h-page-header li{list-style:none}.h-page-header .h-page-total{margin:20px 10px 20px 0;vertical-align:top;height:34px;line-height:34px}.h-page-header .h-select{vertical-align:top;margin:20px 10px}.h-page-header .h-pagination-jump input{display:inline-block;margin:0 5px;padding:0 3px;outline:0;text-align:center;width:45px;border:1px solid #d9d9d9;-webkit-transition:all .2s ease;transition:all .2s ease}.h-page-header .h-pagination-jump input:focus,.h-page-header .h-pagination-jump input:hover{border:1px solid #b3b3b3}.h-page-header .h-pagination-jump input:focus{-webkit-box-shadow:0 2px 12px 0 rgba(0,0,0,.1);box-shadow:0 2px 12px 0 rgba(0,0,0,.1)}.h-pagination{padding-left:0;margin:20px 0}.h-pagination li{min-width:40px;text-align:center;cursor:pointer;padding:6px 12px;height:34px;color:#363636;text-decoration:none;border:1px solid #d9d9d9;-webkit-transition:all .2s ease;transition:all .2s ease}.h-pagination li:hover{border-color:#b3b3b3}.h-pagination .number{margin:0 4px}.h-pagination .active{background:#666;color:#fff}.h-pagination .disabled,.h-pagination .disabled:hover{color:#7a7a7a;cursor:not-allowed;background-color:#dbdbdb;border-color:#dbdbdb;opacity:.5}.h-pagination-radius-small li{border-radius:3px}.h-pagination-radius-base li{border-radius:4px}.h-pagination-radius-large li{border-radius:6px} -------------------------------------------------------------------------------- /plugins/vue-cli-plugin-ui-base/generator/template/packages/theme/src/utils/mixins.less: -------------------------------------------------------------------------------- 1 | // file: mixins.less 2 | // data: 2017/09/21 3 | // auth: ziyi2 4 | // desc: 混合 5 | // -------------------------------------------------- 6 | 7 | //== 清除浮动 8 | .clearfix() { 9 | &:before, 10 | &:after { 11 | content: " "; 12 | display: table; 13 | } 14 | &:after { 15 | clear: both; 16 | } 17 | } 18 | 19 | 20 | //== 是否允许用户选择文本 21 | .user-select(@select) { 22 | -webkit-user-select: @select; 23 | -moz-user-select: @select; 24 | -ms-user-select: @select; // IE10+ 25 | -o-user-select: @select; 26 | user-select: @select; 27 | } 28 | 29 | //== 透明度 30 | .opacity(@opacity) { 31 | opacity: @opacity; 32 | // IE8 33 | @opacity-ie: (@opacity * 100); 34 | filter: ~"alpha(opacity=@{opacity-ie})"; 35 | } 36 | 37 | //== 阴影 38 | .box-shadow(@shadow) { 39 | -webkit-box-shadow: @shadow; 40 | box-shadow: @shadow; 41 | } 42 | 43 | 44 | //== 圆角 45 | .border-right-radius(@radius) { 46 | border-bottom-right-radius: @radius; 47 | border-top-right-radius: @radius; 48 | } 49 | 50 | .border-left-radius(@radius) { 51 | border-bottom-left-radius: @radius; 52 | border-top-left-radius: @radius; 53 | } 54 | 55 | //== disabled 56 | .disabled() { 57 | cursor: not-allowed; 58 | .opacity(.5); 59 | .box-shadow(none); 60 | } 61 | -------------------------------------------------------------------------------- /plugins/vue-cli-plugin-ui-base/generator/template/vue.common.js: -------------------------------------------------------------------------------- 1 | const nodeExternals = require('webpack-node-externals'); 2 | const path = require('path'); 3 | 4 | let configureWebpack = {}; 5 | 6 | configureWebpack.externals = [ 7 | { 8 | vue: 'vue' 9 | }, 10 | // https://github.com/pixeloven/pixeloven/issues/30 11 | // https://github.com/liady/webpack-node-externals/issues/39 12 | // Doesn't work with yarn workspaces by default 13 | nodeExternals(), 14 | nodeExternals({ 15 | modulesDir: path.resolve(__dirname, 'node_modules') 16 | }) 17 | ]; 18 | 19 | 20 | module.exports = { 21 | publicPath: '', 22 | outputDir: 'lib', 23 | assetsDir: '', 24 | filenameHashing: false, 25 | productionSourceMap: false, 26 | css: { 27 | extract: true, 28 | sourceMap: false 29 | }, 30 | // 通用的configureWebpack配置 31 | configureWebpack, 32 | // 通用的chainWebpack配置 33 | chainWebpack(webpackConfig) { 34 | webpackConfig.module 35 | .rule('fonts') 36 | .use('url-loader') 37 | .tap(options => Object.assign(options, { limit: 10 })); 38 | 39 | //stylelint 40 | // webpackConfig 41 | // .plugin('stylelint') 42 | // .use('stylelint-webpack-plugin') 43 | // .tap(() => { 44 | // return [ 45 | // { 46 | // configFile: '.stylelintrc', 47 | // files: ['packages/**/*.less'], 48 | // emitErrors: true 49 | // } 50 | // ]; 51 | // }); 52 | } 53 | } -------------------------------------------------------------------------------- /vue.common.js: -------------------------------------------------------------------------------- 1 | const nodeExternals = require('webpack-node-externals'); 2 | const path = require('path'); 3 | 4 | let configureWebpack = {}; 5 | 6 | configureWebpack.externals = [ 7 | { 8 | vue: 'vue' 9 | }, 10 | // https://github.com/pixeloven/pixeloven/issues/30 11 | // https://github.com/liady/webpack-node-externals/issues/39 12 | // Doesn't work with yarn workspaces by default 13 | nodeExternals(), 14 | nodeExternals({ 15 | modulesDir: path.resolve(__dirname, 'node_modules') 16 | }) 17 | ]; 18 | 19 | 20 | module.exports = { 21 | publicPath: '', 22 | outputDir: 'lib', 23 | assetsDir: '', 24 | filenameHashing: false, 25 | productionSourceMap: false, 26 | css: { 27 | extract: true, 28 | sourceMap: false 29 | }, 30 | // 通用的configureWebpack配置 31 | configureWebpack, 32 | // 通用的chainWebpack配置 33 | chainWebpack(webpackConfig) { 34 | webpackConfig.module 35 | .rule('fonts') 36 | .use('url-loader') 37 | .tap(options => Object.assign(options, { limit: 10 })); 38 | 39 | //stylelint 40 | // webpackConfig 41 | // .plugin('stylelint') 42 | // .use('stylelint-webpack-plugin') 43 | // .tap(() => { 44 | // return [ 45 | // { 46 | // configFile: '.stylelintrc', 47 | // files: ['packages/**/*.less'], 48 | // emitErrors: true 49 | // } 50 | // ]; 51 | // }); 52 | } 53 | } -------------------------------------------------------------------------------- /src/views/option/colorTable.vue: -------------------------------------------------------------------------------- 1 | 41 | 42 | 55 | 56 | -------------------------------------------------------------------------------- /plugins/vue-cli-plugin-ui-base/generator/template/packages/btn/btn.vue: -------------------------------------------------------------------------------- 1 | 22 | 23 | 58 | -------------------------------------------------------------------------------- /packages/col/col.vue: -------------------------------------------------------------------------------- 1 | 6 | -------------------------------------------------------------------------------- /packages/locale/index.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue'; 2 | import deepmerge from 'deepmerge'; 3 | import Format from './src/format'; 4 | 5 | const format = Format(Vue); 6 | let lang = {}; 7 | let merged = false; 8 | let i18nHandler = function() { 9 | const vuei18n = Object.getPrototypeOf(this || Vue).$t; 10 | if (typeof vuei18n === 'function' && !!Vue.locale) { 11 | if (!merged) { 12 | merged = true; 13 | Vue.locale( 14 | Vue.config.lang, 15 | deepmerge(lang, Vue.locale(Vue.config.lang) || {}, { 16 | clone: true 17 | }) 18 | ); 19 | } 20 | return vuei18n.apply(this, arguments); 21 | } 22 | }; 23 | 24 | export const t = function(path, options) { 25 | let value = i18nHandler.apply(this, arguments); 26 | if (value !== null && value !== undefined) return value; 27 | 28 | const array = path.split('.'); 29 | let current = lang; 30 | for (let i = 0, j = array.length; i < j; i++) { 31 | const property = array[i]; 32 | value = current[property]; 33 | if (i === j - 1) return format(value, options); 34 | // if (!value) return '' 35 | if (!value) { 36 | /* eslint-disable-next-line */ 37 | console.warn( 38 | `没有多语言"${ 39 | arguments[0] 40 | }"的值，请确认是否设置了该多语言对应的值！` 41 | ); 42 | return arguments[0]; 43 | } 44 | current = value; 45 | } 46 | return ''; 47 | }; 48 | 49 | export const use = function(l) { 50 | lang = l || lang; 51 | }; 52 | 53 | export const i18n = function(fn) { 54 | i18nHandler = fn || i18nHandler; 55 | }; 56 | 57 | export default { use, t, i18n }; 58 | -------------------------------------------------------------------------------- /plugins/vue-cli-plugin-ui-base/generator/template/packages/locale/index.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue'; 2 | import deepmerge from 'deepmerge'; 3 | import Format from './src/format'; 4 | 5 | const format = Format(Vue); 6 | let lang = {}; 7 | let merged = false; 8 | let i18nHandler = function() { 9 | const vuei18n = Object.getPrototypeOf(this || Vue).$t; 10 | if (typeof vuei18n === 'function' && !!Vue.locale) { 11 | if (!merged) { 12 | merged = true; 13 | Vue.locale( 14 | Vue.config.lang, 15 | deepmerge(lang, Vue.locale(Vue.config.lang) || {}, { 16 | clone: true 17 | }) 18 | ); 19 | } 20 | return vuei18n.apply(this, arguments); 21 | } 22 | }; 23 | 24 | export const t = function(path, options) { 25 | let value = i18nHandler.apply(this, arguments); 26 | if (value !== null && value !== undefined) return value; 27 | 28 | const array = path.split('.'); 29 | let current = lang; 30 | for (let i = 0, j = array.length; i < j; i++) { 31 | const property = array[i]; 32 | value = current[property]; 33 | if (i === j - 1) return format(value, options); 34 | // if (!value) return '' 35 | if (!value) { 36 | /* eslint-disable-next-line */ 37 | console.warn( 38 | `没有多语言"${ 39 | arguments[0] 40 | }"的值，请确认是否设置了该多语言对应的值！` 41 | ); 42 | return arguments[0]; 43 | } 44 | current = value; 45 | } 46 | return ''; 47 | }; 48 | 49 | export const use = function(l) { 50 | lang = l || lang; 51 | }; 52 | 53 | export const i18n = function(fn) { 54 | i18nHandler = fn || i18nHandler; 55 | }; 56 | 57 | export default { use, t, i18n }; 58 | -------------------------------------------------------------------------------- /packages/table/header.vue: -------------------------------------------------------------------------------- 1 | 11 | -------------------------------------------------------------------------------- /packages/utils/clickout.js: -------------------------------------------------------------------------------- 1 | 2 | import dom from './dom' 3 | 4 | let mousedownEvent 5 | let nodeList = [] 6 | const clickout = Symbol('clickout') 7 | 8 | dom.addEventListener(document, 'mousedown', e => (mousedownEvent = e)) 9 | dom.addEventListener(document, 'mouseup', e => { 10 | for (let node of nodeList) { 11 | node[clickout].mouseupHandler(e, mousedownEvent) 12 | } 13 | }) 14 | 15 | export default { 16 | bind (el, binding, vnode) { 17 | const id = nodeList.push(el) - 1 18 | 19 | const mouseupHandler = (mouseupEvent, mousedownEvent) => { 20 | const upTarget = mouseupEvent && mouseupEvent.target 21 | const downTarget = mousedownEvent && mousedownEvent.target 22 | 23 | if (!vnode.context || !upTarget || !downTarget || el.contains(downTarget)) return 24 | 25 | // if (upTarget && el === upTarget) return 26 | // if ((upTarget && el.contains(upTarget)) || (downTarget && el.contains(downTarget))) return 27 | 28 | if (binding.expression && vnode.context[el[clickout].methodName]) { 29 | vnode.context[el[clickout].methodName]() 30 | } else { 31 | el[clickout].method && el[clickout].method() 32 | } 33 | } 34 | 35 | el[clickout] = { 36 | id, 37 | mouseupHandler, 38 | methodName: binding.expression, 39 | method: binding.value 40 | } 41 | }, 42 | 43 | update (el, binding) { 44 | el[clickout].methodName = binding.expression 45 | el[clickout].method = binding.value 46 | }, 47 | 48 | /* 通过v-if可以触发当前组件的指令解绑监听事件 */ 49 | unbind (el) { 50 | for (let index of nodeList.keys()) { 51 | if (nodeList[index][clickout].id === el[clickout].id) { 52 | nodeList.splice(index, 1) 53 | } 54 | } 55 | } 56 | } 57 | -------------------------------------------------------------------------------- /packages/table/store.js: -------------------------------------------------------------------------------- 1 | 2 | import { sort } from './constant' 3 | 4 | export default class Store { 5 | constructor (table) { 6 | if (!table) { 7 | throw new Error('Table is required') 8 | } 9 | 10 | this.table = table 11 | this.states = { 12 | columns: [], 13 | data: [], 14 | _data: [] 15 | } 16 | } 17 | 18 | init (data) { 19 | this.states._data = [...data] 20 | } 21 | 22 | updateData (data) { 23 | this.states.data = [...data] 24 | this.states._data = [...data] 25 | } 26 | 27 | sortData (column) { 28 | let states = this.states 29 | let prop = column.prop 30 | let sortValue = column.sortValue 31 | 32 | if (sortValue === sort.default) { 33 | states.data = [...states._data] 34 | } else { 35 | states.data.sort((a, b) => { 36 | if (!Number.isNaN(Number(a[prop])) && !Number.isNaN(Number(b[prop]))) { 37 | a[prop] = Number(a[prop]) 38 | b[prop] = Number(b[prop]) 39 | } 40 | 41 | if (a[prop] > b[prop]) { 42 | return sortValue === sort.asc ? 1 : -1 43 | } else if (a[prop] < b[prop]) { 44 | return sortValue === sort.asc ? -1 : 1 45 | } else { 46 | return 0 47 | } 48 | }) 49 | } 50 | } 51 | 52 | updateColumns (currentColumn, sortValue) { 53 | let states = this.states 54 | for (let column of states.columns) { 55 | currentColumn !== column ? column.sortValue = sort.default : column.sortValue = sortValue 56 | } 57 | } 58 | 59 | commit (fn, ...args) { 60 | if (this[fn]) { 61 | this[fn].apply(this, args) 62 | } else { 63 | throw new Error(`fn ${fn} in Table Store not found`) 64 | } 65 | } 66 | } 67 | 68 | -------------------------------------------------------------------------------- /packages/theme/lib/radio-group.css: -------------------------------------------------------------------------------- 1 | .h-radio-group-size-large label.h-radio-btn span,.h-radio-group-size-small label.h-radio-btn span{line-height:20px}.h-radio-group{display:inline-block;vertical-align:middle;font-size:0;-webkit-text-size-adjust:none}.h-radio-group+.h-radio-group{margin-left:5px}.h-radio-group-disabled{cursor:not-allowed;opacity:.5;filter:alpha(opacity=50);-webkit-box-shadow:none;box-shadow:none}.h-radio-group-disabled .h-radio-btn-disabled{opacity:1}.h-radio-group-shadow{-webkit-box-shadow:0 2px 12px 0 rgba(0,0,0,.1);box-shadow:0 2px 12px 0 rgba(0,0,0,.1);border:none}.h-radio-group-shadow label.h-radio-btn{border-top:none;border-bottom:none}.h-radio-group-radius-small label.h-radio-btn{border-radius:3px}.h-radio-group-radius-small .h-radio-btn:not(:first-child):not(:last-child){border-radius:0}.h-radio-group-radius-small .h-radio-btn:first-child:not(:last-child){border-radius:3px 0 0 3px}.h-radio-group-radius-small .h-radio-btn:last-child:not(:first-child){border-radius:0 3px 3px 0}.h-radio-group-radius-large label.h-radio-btn{border-radius:6px}.h-radio-group-radius-large .h-radio-btn:not(:first-child):not(:last-child){border-radius:0}.h-radio-group-radius-large .h-radio-btn:first-child:not(:last-child){border-radius:6px 0 0 6px}.h-radio-group-radius-large .h-radio-btn:last-child:not(:first-child){border-radius:0 6px 6px 0}.h-radio-group-radius-circle label.h-radio-btn{border-radius:36px}.h-radio-group-radius-circle .h-radio-btn:not(:first-child):not(:last-child){border-radius:0}.h-radio-group-radius-circle .h-radio-btn:first-child:not(:last-child){border-radius:36px 0 0 36px}.h-radio-group-radius-circle .h-radio-btn:last-child:not(:first-child){border-radius:0 36px 36px 0}.h-radio-group-size-small label.h-radio-btn{height:30px;padding:4px 12px}.h-radio-group-size-large label.h-radio-btn{height:42px;padding:10px 18px} -------------------------------------------------------------------------------- /src/ui/index.js: -------------------------------------------------------------------------------- 1 | /* 布局 */ 2 | import Row from '@ziyi2/row' 3 | import Col from '@ziyi2/col' 4 | 5 | /* 基础组件 */ 6 | import Quote from '@ziyi2/quote' 7 | import Code from '@ziyi2/code' 8 | import { Btn, BtnGroup } from '@ziyi2/button/index' 9 | import { Table, TableColumn } from '@ziyi2/table' 10 | import Pagination from '@ziyi2/pagination' 11 | import { Radio, RadioBtn, RadioGroup } from '@ziyi2/radio' 12 | import { Checkbox, CheckboxBtn, CheckboxGroup } from '@ziyi2/checkbox' 13 | import Select from '@ziyi2/select' 14 | import Input from '@ziyi2/input' 15 | import Alert from '@ziyi2/alert' 16 | import Tooltip from '@ziyi2/tooltip' 17 | import { Tag, TagGroup } from '@ziyi2/tag' 18 | import Snackbar from '@ziyi2/snackbar' 19 | import Toast from '@ziyi2/toast' 20 | 21 | /* 弹框 */ 22 | import Poper from '@ziyi2/poper' 23 | import Dialog from '@ziyi2/dialog' 24 | 25 | /* 复合组件 */ 26 | import { Dropdown, DropdownItem } from '@ziyi2/dropdown' 27 | import { Nav, NavItem } from '@ziyi2/nav' 28 | 29 | /* 动画 */ 30 | import Particle from '@ziyi2/particle' 31 | 32 | const components = [ 33 | Row, 34 | Col, 35 | 36 | Quote, 37 | Code, 38 | Btn, 39 | BtnGroup, 40 | TableColumn, 41 | Table, 42 | Pagination, 43 | Radio, 44 | RadioBtn, 45 | RadioGroup, 46 | Checkbox, 47 | CheckboxBtn, 48 | CheckboxGroup, 49 | Input, 50 | Select, 51 | Alert, 52 | Tooltip, 53 | Tag, 54 | TagGroup, 55 | 56 | Poper, 57 | Dialog, 58 | 59 | Dropdown, 60 | DropdownItem, 61 | Nav, 62 | NavItem, 63 | 64 | Particle 65 | ] 66 | 67 | export default { 68 | install (Vue) { 69 | components.map(component => { 70 | Vue.component(component.name, component) 71 | }) 72 | 73 | Vue.prototype.$snackbar = Snackbar 74 | Vue.prototype.$toast = Toast 75 | } 76 | } 77 | -------------------------------------------------------------------------------- /packages/theme/lib/scaffolding.css: -------------------------------------------------------------------------------- 1 | address,cite{font-style:normal}*,:after,:before{-webkit-box-sizing:border-box;box-sizing:border-box}html{font-family:BlinkMacSystemFont,-apple-system,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Fira Sans","Droid Sans","Helvetica Neue",Helvetica,Tahoma,"Microsoft YaHei","微软雅黑",Arial,sans-serif;font-size:62.5%;-webkit-tap-highlight-color:transparent}body{font-size:14px;line-height:1.42857143;color:#363636;background-color:#fff;position:relative}button,input,select,textarea{font-family:inherit;font-size:inherit;line-height:inherit}.h1 .small,.h1 small,.h2 .small,.h2 small,.h3 .small,.h3 small,.h4 .small,.h4 small,.h5 .small,.h5 small,.h6 .small,.h6 small,h1 .small,h1 small,h2 .small,h2 small,h3 .small,h3 small,h4 .small,h4 small,h5 .small,h5 small,h6 .small,h6 small{font-size:65%}a{color:#62a8ea;text-decoration:none;outline-style:none}a:focus,a:hover{color:#1b76cb;text-decoration:underline}hr{border:none;margin:20px 0;border-top:1px solid #e6e6e6}.h1,.h2,.h3,.h4,.h5,.h6,h1,h2,h3,h4,h5,h6{font-family:inherit;font-weight:500;line-height:1.1;color:inherit}.h1 .small,.h1 small,.h2 .small,.h2 small,.h3 .small,.h3 small,.h4 .small,.h4 small,.h5 .small,.h5 small,.h6 .small,.h6 small,h1 .small,h1 small,h2 .small,h2 small,h3 .small,h3 small,h4 .small,h4 small,h5 .small,h5 small,h6 .small,h6 small{font-weight:400;line-height:1;color:#999}address,dd,dt{line-height:1.42857143}.h1,.h2,.h3,h1,h2,h3{margin-top:20px;margin-bottom:10px}.h4,.h5,.h6,h4,h5,h6{margin-top:10px;margin-bottom:10px}dl,ol,ul{margin-top:0}address,dl{margin-bottom:20px}.h1,h1{font-size:36px}.h2,h2{font-size:30px}.h3,h3{font-size:24px}.h4,h4{font-size:18px}.h5,h5{font-size:14px}.h6,h6{font-size:12px}p{margin:0 0 10px}.small,small{font-size:85%}ol,ul{margin-bottom:10px}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}dt{font-weight:700}dd{margin-left:0}abbr[data-original-title],abbr[title]{cursor:help;border-bottom:1px dotted #999} -------------------------------------------------------------------------------- /packages/theme/lib/normalize.css: -------------------------------------------------------------------------------- 1 | /*! normalize.css v3.0.0 | MIT License | git.io/normalize */img,legend{border:0}legend,td,th{padding:0}html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background:0 0}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,optgroup,strong{font-weight:700}dfn{font-style:italic}h1{font-size:2em;margin:.67em 0}mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{-webkit-box-sizing:content-box;box-sizing:content-box;height:0}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type=checkbox],input[type=radio]{-webkit-box-sizing:border-box;box-sizing:border-box;padding:0}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{height:auto}input[type=search]{-webkit-appearance:textfield;-webkit-box-sizing:content-box;box-sizing:content-box}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}textarea{overflow:auto}table{border-collapse:collapse;border-spacing:0} -------------------------------------------------------------------------------- /packages/radio/radio-btn.vue: -------------------------------------------------------------------------------- 1 | 21 | 69 | 70 | 71 | -------------------------------------------------------------------------------- /packages/theme/lib/tag.css: -------------------------------------------------------------------------------- 1 | .expand-init{-webkit-transform:scale(0);transform:scale(0);transition:-webkit-transform .2s ease;transition:transform .2s ease;transition:transform .2s ease,-webkit-transform .2s ease;-webkit-transition:transform .2s ease}.expand-done{-webkit-transform:scale(1);transform:scale(1)}.fade-background{-webkit-transition:background-color .2s ease;transition:background-color .2s ease}.fade-border{-webkit-transition:border-color .2s ease;transition:border-color .2s ease}.fade-color{-webkit-transition:color .2s ease;transition:color .2s ease}.fade-all,.fade-all-dropdown{-webkit-transition:all .2s ease}.fade-all{transition:all .2s ease}.fade-opacity{-webkit-transition:opacity .2s ease;transition:opacity .2s ease}.fade-height{-webkit-transition:height .2s ease;transition:height .2s ease}.fade-all-dropdown{transition:all .2s ease}.h-tag{display:inline-block;white-space:nowrap;text-align:center;padding:4px 12px;height:30px;line-height:20px;background-color:#f2f2f2;border:1px solid transparent;vertical-align:middle}.h-tag span{border:none;outline:0;background-color:transparent;font-weight:700;color:inherit;margin-left:5px;opacity:.5;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;-o-user-select:none;user-select:none}.h-tag span:hover{opacity:1}.h-tag-semantic-dark{background-color:#666;color:#fff}.h-tag-semantic-primary{background-color:#8fc1f0}.h-tag-semantic-success{background-color:#6ccba2}.h-tag-semantic-info{background-color:#80d5de}.h-tag-semantic-warning{background-color:#f6bf83}.h-tag-semantic-danger{background-color:#fb9999}.h-tag-radius-small{border-radius:3px}.h-tag-radius-large{border-radius:6px}.h-tag-radius-circle{border-radius:36px}.h-tag-size-large{height:36px;padding:7px 12px}.h-tag-size-larger{height:42px;padding:10px 18px}.h-tag-fade-enter-active,.h-tag-fade-leave-active{-webkit-transition:all .2s ease;transition:all .2s ease}.h-tag-fade-enter,.h-tag-fade-leave-to{opacity:0} -------------------------------------------------------------------------------- /packages/theme/src/index.less: -------------------------------------------------------------------------------- 1 | // file: index.less 2 | // data: 2017/09/21 3 | // auth: ziyi2 4 | // desc: less样式汇总 5 | // -------------------------------------------------- 6 | 7 | // desc: 通用变量和函数(转css需要) 8 | // -------------------------------------------------- 9 | @import "./utils/var.less"; 10 | @import "./utils/animations.less"; 11 | @import "./utils/mixins.less"; 12 | 13 | 14 | /* 全局CSS样式初始化 */ 15 | @import "normalize.less"; 16 | @import "scaffolding.less"; // 初始化 17 | @import "scrollbar.less"; // 滚动条样式 18 | 19 | /* 栅格系统 */ 20 | @import "row.less"; // 行 21 | @import "col.less"; // 列 22 | 23 | /* 非组件样式 */ 24 | @import "background.less"; // 遮幕 25 | 26 | 27 | /* 基础组件 */ 28 | @import "img.less"; // 图片 29 | @import "quote.less"; // 引用 30 | @import "code.less"; // 代码 31 | @import "btn.less"; // 按钮 32 | @import "btn-group.less"; // 按钮组 33 | @import "table.less"; // 表格 34 | @import "pagination.less"; // 分页 35 | @import "radio.less"; // 单选框 36 | @import "radio-btn.less"; // 按钮单选框 37 | @import "radio-group.less"; // 单选框组 38 | @import "checkbox.less"; // 多选框 39 | @import "checkbox-btn.less"; // 按钮多选框 40 | @import "checkbox-group.less"; // 多选框组 41 | @import "input.less"; // 输入框 42 | @import "select.less"; // 选择器 43 | @import "alert.less"; // 警告 44 | @import "tooltip.less"; // 提示框 45 | @import "tag.less"; // 标签 46 | @import "tag-group.less"; // 标签组 47 | @import "snackbar.less"; // 通知处理 48 | @import "toast.less"; // 通知 49 | 50 | /* 弹框 */ 51 | @import "poper.less"; // 弹出框 52 | 53 | /* 复合组件 */ 54 | @import "dropdown.less"; // 下拉菜单 55 | @import "nav.less"; // 导航栏 56 | 57 | /* 动画 */ 58 | @import "particle.less"; // 粒子背景 59 | -------------------------------------------------------------------------------- /packages/tag/tag.vue: -------------------------------------------------------------------------------- 1 | 17 | -------------------------------------------------------------------------------- /packages/theme/lib/checkbox-group.css: -------------------------------------------------------------------------------- 1 | .h-checkbox-group-size-large label.h-checkbox-btn span,.h-checkbox-group-size-small label.h-checkbox-btn span{line-height:20px}.h-checkbox-group{display:inline-block;vertical-align:middle;font-size:0;-webkit-text-size-adjust:none}.h-checkbox-group+.h-checkbox-group{margin-left:5px}.h-checkbox-group-disabled{cursor:not-allowed;opacity:.5;filter:alpha(opacity=50);-webkit-box-shadow:none;box-shadow:none}.h-checkbox-group-disabled .h-checkbox-btn-disabled{opacity:1}.h-checkbox-group-shadow{-webkit-box-shadow:0 2px 12px 0 rgba(0,0,0,.1);box-shadow:0 2px 12px 0 rgba(0,0,0,.1);border:none}.h-checkbox-group-shadow label.h-checkbox-btn{border-top:none;border-bottom:none}.h-checkbox-group-radius-small label.h-checkbox-btn{border-radius:3px}.h-checkbox-group-radius-small .h-checkbox-btn:not(:first-child):not(:last-child){border-radius:0}.h-checkbox-group-radius-small .h-checkbox-btn:first-child:not(:last-child){border-radius:3px 0 0 3px}.h-checkbox-group-radius-small .h-checkbox-btn:last-child:not(:first-child){border-radius:0 3px 3px 0}.h-checkbox-group-radius-large label.h-checkbox-btn{border-radius:6px}.h-checkbox-group-radius-large .h-checkbox-btn:not(:first-child):not(:last-child){border-radius:0}.h-checkbox-group-radius-large .h-checkbox-btn:first-child:not(:last-child){border-radius:6px 0 0 6px}.h-checkbox-group-radius-large .h-checkbox-btn:last-child:not(:first-child){border-radius:0 6px 6px 0}.h-checkbox-group-radius-circle label.h-checkbox-btn{border-radius:36px}.h-checkbox-group-radius-circle .h-checkbox-btn:not(:first-child):not(:last-child){border-radius:0}.h-checkbox-group-radius-circle .h-checkbox-btn:first-child:not(:last-child){border-radius:36px 0 0 36px}.h-checkbox-group-radius-circle .h-checkbox-btn:last-child:not(:first-child){border-radius:0 36px 36px 0}.h-checkbox-group-size-small label.h-checkbox-btn{height:30px;padding:4px 12px}.h-checkbox-group-size-large label.h-checkbox-btn{height:42px;padding:10px 18px} -------------------------------------------------------------------------------- /packages/radio/radio.vue: -------------------------------------------------------------------------------- 1 | 25 | 71 | 72 | 73 | -------------------------------------------------------------------------------- /packages/checkbox/checkbox-btn.vue: -------------------------------------------------------------------------------- 1 | 21 | 69 | 70 | 71 | -------------------------------------------------------------------------------- /packages/utils/background.js: -------------------------------------------------------------------------------- 1 | import dom from './dom' 2 | 3 | export default new class Background { 4 | constructor () { 5 | this.background = null // 非响应式遮幕 6 | this.resBackground = null // 响应式遮幕 7 | } 8 | 9 | create (responsive) { 10 | if (!responsive && this.background) return 11 | if (responsive && this.resBackground) return 12 | 13 | let background = document.createElement('div') 14 | 15 | dom.addEventListener(background, 'touchmove', (e) => { 16 | e.preventDefault() 17 | e.stopPropagation() 18 | }) 19 | 20 | dom.setClass(background, 'h-background') 21 | dom.addEventListener(background, 'click', this.hide) 22 | document.body.appendChild(background) 23 | !responsive ? this.background = background : this.resBackground = background 24 | } 25 | 26 | show (responsive) { 27 | if (!responsive && !this.background) return 28 | if (responsive && !this.resBackground) return 29 | !responsive ? dom.addClass(this.background, 'h-background-show') 30 | : dom.addClass(this.resBackground, 'h-background-responsive-show') 31 | } 32 | 33 | hide (responsive) { 34 | if (!responsive && !this.background) return 35 | if (responsive && !this.resBackground) return 36 | !responsive ? dom.removeClass(this.background, 'h-background-show') 37 | : dom.removeClass(this.resBackground, 'h-background-responsive-show') 38 | } 39 | 40 | destroy (responsive) { 41 | if (!responsive && !this.background) return 42 | if (responsive && !this.resBackground) return 43 | 44 | if (!responsive) { 45 | dom.removeEventListener(this.background, 'click', this.hide) 46 | document.body.removeChild(this.background) 47 | this.background = null 48 | } else { 49 | dom.removeEventListener(this.resBackground, 'click', this.hide) 50 | document.body.removeChild(this.resBackground) 51 | this.resBackground = null 52 | } 53 | } 54 | }() 55 | 56 | -------------------------------------------------------------------------------- /packages/checkbox/checkbox.vue: -------------------------------------------------------------------------------- 1 | 26 | 72 | 73 | 74 | -------------------------------------------------------------------------------- /packages/theme/lib/radio-btn.css: -------------------------------------------------------------------------------- 1 | .h-radio-btn,.h-radio-btn span{line-height:20px;display:inline-block}.expand-init{-webkit-transform:scale(0);transform:scale(0);transition:-webkit-transform .2s ease;transition:transform .2s ease;transition:transform .2s ease,-webkit-transform .2s ease;-webkit-transition:transform .2s ease}.expand-done{-webkit-transform:scale(1);transform:scale(1)}.fade-background{-webkit-transition:background-color .2s ease;transition:background-color .2s ease}.fade-border{-webkit-transition:border-color .2s ease;transition:border-color .2s ease}.fade-color{-webkit-transition:color .2s ease;transition:color .2s ease}.fade-all,.fade-all-dropdown{-webkit-transition:all .2s ease}.fade-all{transition:all .2s ease}.fade-opacity{-webkit-transition:opacity .2s ease;transition:opacity .2s ease}.fade-height{-webkit-transition:height .2s ease;transition:height .2s ease}.fade-all-dropdown{transition:all .2s ease}.h-radio-btn{padding:7px 12px;font-size:14px;font-weight:400;height:36px;text-align:center;white-space:nowrap;outline-style:none;background-image:none;background-color:transparent;border:1px solid #d9d9d9;border-radius:0;position:relative;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;-o-user-select:none;user-select:none;-webkit-transition:all .2s ease;transition:all .2s ease}.h-radio-btn span{height:100%}.h-radio-btn input[type=radio]{opacity:0;cursor:pointer;position:absolute;left:0;right:0;top:0;bottom:0;margin:0;outline:0;z-index:-1;display:inline-block;line-height:36px;width:100%;height:100%}.h-radio-btn+.h-radio-btn{margin-left:-1px}.h-radio-btn-checked{background-color:#e6e6e6}.h-radio-btn-semantic-primary{background-color:#8fc1f0;border:1px solid #8fc1f0}.h-radio-btn-semantic-success{background-color:#6ccba2;border:1px solid #6ccba2}.h-radio-btn-semantic-info{background-color:#80d5de;border:1px solid #80d5de}.h-radio-btn-semantic-warning{background-color:#f6bf83;border:1px solid #f6bf83}.h-radio-btn-semantic-danger{background-color:#fb9999;border:1px solid #fb9999}.h-radio-btn-disabled{cursor:not-allowed;opacity:.5;filter:alpha(opacity=50);-webkit-box-shadow:none;box-shadow:none} -------------------------------------------------------------------------------- /packages/table/table.vue: -------------------------------------------------------------------------------- 1 | 24 | -------------------------------------------------------------------------------- /src/views/base/pagination.vue: -------------------------------------------------------------------------------- 1 | 16 | 17 | 84 | -------------------------------------------------------------------------------- /packages/theme/lib/select.css: -------------------------------------------------------------------------------- 1 | .h-select,.h-select-arrow{display:inline-block;-webkit-transition:all .2s ease}.h-select{position:relative;height:34px;background-color:#fff;border:1px solid #d9d9d9;outline:0;cursor:pointer;transition:all .2s ease;text-align:left}.h-select:focus,.h-select:hover{border-color:#b3b3b3}.h-select li{list-style:none}.h-select-disabled{cursor:not-allowed;background:#f5f7fa;color:#c0c4cc}.h-select-disabled:hover{border-color:#d9d9d9}.h-select-focus{border-color:#b3b3b3;-webkit-box-shadow:0 2px 12px 0 rgba(0,0,0,.1);box-shadow:0 2px 12px 0 rgba(0,0,0,.1)}.h-select-default{padding:3px 10px}.h-select-placeholder{color:#999}.h-select-arrow{position:absolute;width:18px;height:18px;text-align:center;vertical-align:baseline;top:50%;margin-top:-9px;right:7px;font-size:16px;transition:all .2s ease}.h-select-arrow i{vertical-align:top!important;line-height:18px}.h-select-show .h-select-arrow{-webkit-transform:rotate(180deg);transform:rotate(180deg)}.h-selected-value{display:block;height:26px;line-height:26px}.h-select-dropdown-group{padding:0;cursor:default}.h-select-dropdown-group .h-select-dropdown-group-title{padding:8px 12px;color:#999;font-size:12px}.h-select-dropdown-group:not(:last-of-type).h-select-dropdown-group:after{content:'';height:1px;margin:7px 10px;overflow:hidden;background-color:#d9d9d9;display:block}.h-select-dropdown{position:absolute;width:100%;margin:5px 0;padding:5px 0;-webkit-animation:slide-down .3s ease-in;animation:slide-down .3s ease-in;background-color:#fff;-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-box-shadow:0 2px 12px 0 rgba(0,0,0,.1);box-shadow:0 2px 12px 0 rgba(0,0,0,.1);z-index:999;left:0;overflow-y:auto}.h-select-item{padding:5px 12px;cursor:pointer;-webkit-transition:all .2s ease;transition:all .2s ease}.h-select-item:hover{background-color:#d9d9d9}.h-selected-item,.h-selected-item:hover{background-color:#e6e6e6}.h-select-item-disabled{cursor:not-allowed;color:#bbbec4}.h-select-item-disabled:hover{background-color:#fff}.h-select-radius-small,.h-select-radius-small .h-select-dropdown{border-radius:3px}.h-select-radius-base,.h-select-radius-base .h-select-dropdown{border-radius:4px}.h-select-radius-large,.h-select-radius-large .h-select-dropdown{border-radius:6px} -------------------------------------------------------------------------------- /packages/utils/dom.js: -------------------------------------------------------------------------------- 1 | export default { 2 | addEventListener (element, event, handler) { 3 | if (typeof window === 'undefined' || !element || !event) return 4 | if (document.removeEventListener) { 5 | element.addEventListener(event, handler, false) 6 | } else { 7 | element.attachEvent(`on${event}`, handler) 8 | } 9 | }, 10 | 11 | removeEventListener (element, event, handler) { 12 | if (typeof window === 'undefined' || !element || !event) return 13 | 14 | if (document.removeEventListener) { 15 | element.removeEventListener(event, handler, false) 16 | } else { 17 | element.detachEvent(`on${event}`, handler) 18 | } 19 | }, 20 | 21 | setClass (el, cls) { 22 | if (typeof cls !== 'string' || !cls) return 23 | if (el.nodeType !== 1 && !el.className) return 24 | let clses = (cls || '').match(/\S+/g) || [] 25 | let cur = '' 26 | for (let cls of clses) { 27 | cur += `${cls} ` 28 | } 29 | el.className = cur.trim() 30 | }, 31 | 32 | addClass (el, cls) { 33 | if (!(typeof cls === 'string' && cls)) return 34 | let cur = el.nodeType === 1 && (el.className // 将html中元素的class的值的制表符等转换为空字符 35 | ? (` ${el.className} `).replace(/[\t\r\n\f]/g, ' ') 36 | : ' ' 37 | ) 38 | if (!cur) return 39 | 40 | let clses = (cls || '').match(/\S+/g) || [] 41 | 42 | for (let cls of clses) { 43 | if (cur.includes(` ${cls} `)) continue // 如果html的class中没有需要设置的class 44 | cur += `${cls} ` 45 | } 46 | el.className = cur.trim() // 去掉之前加上的两边的空格 47 | }, 48 | 49 | removeClass (el, cls) { 50 | if (!(typeof cls === 'string' && cls)) return 51 | let cur = el.nodeType === 1 && (el.className 52 | ? (` ${el.className} `).replace(/[\t\r\n\f]/g, ' ') 53 | : ' ' 54 | ) 55 | if (!cur) return 56 | 57 | let clses = (cls || '').match(/\S+/g) || [] 58 | 59 | for (let cls of clses) { 60 | if (!cur.includes(` ${cls} `)) continue 61 | cur = cur.replace(` ${cls} `, ' ') 62 | } 63 | el.className = cls ? cur.trim() : '' // 如果不传参数就是清除全部class 64 | } 65 | } 66 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "private": true, 3 | "scripts": { 4 | "serve": "vue-cli-service serve", 5 | "lib": "lerna run lib", 6 | "build": "vue-cli-service build", 7 | "lint": "vue-cli-service lint", 8 | "bootstrap": "lerna bootstrap", 9 | "cz:changelog": "conventional-changelog -p angular -i CHANGELOG.md -s && git add CHANGELOG.md", 10 | "deploy": "npm run build && gh-pages -d dist" 11 | }, 12 | "dependencies": { 13 | "vue": "^2.6.6", 14 | "vue-router": "^3.0.2" 15 | }, 16 | "devDependencies": { 17 | "@babel/cli": "^7.4.3", 18 | "@commitlint/cli": "^7.2.0", 19 | "@commitlint/config-conventional": "^7.5.0", 20 | "@vue/cli-plugin-babel": "^3.5.0", 21 | "@vue/cli-plugin-eslint": "^3.5.0", 22 | "@vue/cli-service": "^3.5.0", 23 | "babel-eslint": "^10.0.1", 24 | "commitizen": "^3.0.5", 25 | "conventional-changelog": "^3.0.5", 26 | "cz-customizable": "^5.2.0", 27 | "eslint": "^5.8.0", 28 | "eslint-plugin-vue": "^5.0.0", 29 | "husky": "^1.1.1", 30 | "lerna": "^3.13.1", 31 | "less-loader": "^4.1.0", 32 | "lint-staged": "^8.1.3", 33 | "vue-template-compiler": "^2.5.21", 34 | "webpack-node-externals": "^1.7.2", 35 | "gh-pages": "^2.0.1" 36 | }, 37 | "eslintConfig": { 38 | "root": true, 39 | "env": { 40 | "node": true 41 | }, 42 | "extends": [ 43 | "plugin:vue/essential", 44 | "eslint:recommended" 45 | ], 46 | "rules": {}, 47 | "parserOptions": { 48 | "parser": "babel-eslint" 49 | } 50 | }, 51 | "postcss": { 52 | "plugins": { 53 | "autoprefixer": {} 54 | } 55 | }, 56 | "browserslist": [ 57 | "> 1%", 58 | "last 2 versions", 59 | "not ie <= 8" 60 | ], 61 | "commitlint": { 62 | "extends": [ 63 | "@commitlint/config-conventional" 64 | ] 65 | }, 66 | "config": { 67 | "commitizen": { 68 | "path": "node_modules/cz-customizable" 69 | } 70 | }, 71 | "husky": { 72 | "hooks": { 73 | "post-merge": "lerna bootstrap", 74 | "commit-msg": "commitlint -E HUSKY_GIT_PARAMS", 75 | "pre-commit": "lint-staged" 76 | } 77 | }, 78 | "workspaces": [ 79 | "packages/*", 80 | "plugins/*" 81 | ] 82 | } 83 | -------------------------------------------------------------------------------- /src/views/base/quote.vue: -------------------------------------------------------------------------------- 1 | 32 | 33 | 73 | 74 | 75 | 76 | -------------------------------------------------------------------------------- /packages/theme/src/poper.less: -------------------------------------------------------------------------------- 1 | // file: poper.less 2 | // data: 2017/12/03 3 | // auth: ziyi2 4 | // desc: 提示框样式 5 | // -------------------------------------------------- 6 | 7 | // desc: 通用变量和函数(转css需要) 8 | // -------------------------------------------------- 9 | @import "./utils/var.less"; 10 | @import "./utils/mixins.less"; 11 | 12 | // desc: 变量 13 | // -------------------------------------------------- 14 | 15 | // desc: 混合 16 | // -------------------------------------------------- 17 | 18 | 19 | 20 | // desc: 样式 21 | // type: 基本类型 22 | // -------------------------------------------------- 23 | .h-poper { 24 | position: absolute; 25 | z-index: @poper-index; 26 | top: 0; 27 | left: 0; 28 | display: block; 29 | width: 100%; 30 | max-width: 100%; 31 | min-height: @poper-default-height; 32 | padding: @poper-default-padding; 33 | border: 1px solid @gray-90; 34 | line-height: @line-height-computed; 35 | box-shadow: @box-shadow-base; 36 | background: #FFF; 37 | } 38 | 39 | // 会覆盖tooltop的箭头样式 40 | // .h-tooltip-arrow { 41 | // position: absolute; 42 | // border: 10px solid transparent; 43 | // display: block; 44 | // height: 0; 45 | // width: 0; 46 | // } 47 | 48 | // desc: 样式 49 | // type: 箭头方向 50 | // -------------------------------------------------- 51 | .h-poper-placement-right { 52 | border-left-width: 0; 53 | border-right-color: @gray-90; 54 | } 55 | 56 | .h-poper-placement-left { 57 | border-right-width: 0; 58 | border-left-color: @gray-90; 59 | } 60 | 61 | .h-poper-placement-bottom { 62 | border-top-width: 0; 63 | border-bottom-color: @gray-90; 64 | } 65 | 66 | .h-poper-placement-top { 67 | border-bottom-width: 0; 68 | border-top-color: @gray-90; 69 | } 70 | 71 | // desc: 样式 72 | // type: 圆角类型 73 | // -------------------------------------------------- 74 | .h-poper-radius-small { 75 | border-radius: @border-radius-small; 76 | } 77 | 78 | .h-poper-radius-large { 79 | border-radius: @border-radius-large; 80 | } 81 | 82 | 83 | // desc: 样式 84 | // type: 动画样式 85 | // -------------------------------------------------- 86 | .h-poper-fade-enter-active, .h-poper-fade-leave-active { 87 | transition: opacity 0.5s ease; 88 | } 89 | .h-poper-fade-enter, .h-poper-fade-leave-to { 90 | opacity: 0; 91 | } 92 | 93 | 94 | -------------------------------------------------------------------------------- /packages/code/language/javascript.js: -------------------------------------------------------------------------------- 1 | /* 2 | * @Author: ziyi2 3 | * @Date: 2017-09-28 4 | */ 5 | 6 | const regs = { 7 | keyword: /\b(export default|extends|while|finally|function|return|void|else|break|catch|instanceof|with|throw|case|default|try|this|switch|continue|typeof|delete|let|yield|const|export|super|debugger|async|await|static|import from as|class|import|default|export|super|constructor|get|set|from|in|of|if|for|var|new|do|as)\b/g, 8 | literal: /\b(true|false|null|undefined|NaN|Infinity)\b/g, 9 | builtin: /\b(eval|isFinite|isNaN|parseFloat|parseInt|decodeURI|decodeURIComponent|encodeURI|encodeURIComponent|escape|unescape|Object|Function|Boolean|Error|EvalError|InternalError|RangeError|ReferenceError|StopIteration|SyntaxError|TypeError|URIError|Number|Math|Date|String|RegExp|Array|Float32Array|Float64Array|Int16Array|Int32Array|Int8Array|Uint16Array|Uint32Array|Uint8Array|Uint8ClampedArray|ArrayBuffer|DataView|JSON|Intl|arguments|require|module|console|window|document|Symbol|Set|Map|WeakSet|WeakMap|Proxy|Reflect|Promise)\b/g, 10 | reg: /(^|[^/])\/(?!\/)(\[[^\]\r\n]+]|\\.|[^/\\[\r\n])+\/[gimyu]{0,5}(?=\s*($|[\r\n,.;})]))/g, 11 | number: /\b-?(0[xX][\dA-Fa-f]+|0[bB][01]+|0[oO][0-7]+|\d*\.?\d+([Ee][+-]?\d+)?)\b/g, 12 | function: /[_$a-zA-Z\xA0-\uFFFF][_$a-zA-Z0-9\xA0-\uFFFF]*(?=\()/g, 13 | template: /`(?:\\\\|\\?[^\\])*?`/g 14 | } 15 | 16 | const commentReg = new RegExp('(/\\*([^*]|[\\\r\\\n]|(\\*+([^*/]|[\\\r\\\n])))*\\*+/)|(//.*)', 'g') 17 | 18 | /* 19 | * @Desc: 高亮js代码 20 | * @Parm: text -> js代码字符串 21 | */ 22 | export function javascript (text) { 23 | for (let reg in regs) { 24 | text = text.replace(regs[reg], (match) => { 25 | return `${match}` 26 | }) 27 | } 28 | 29 | text = text.replace(commentReg, (matches) => { 30 | if (matches.split('\n').length > 1) { // 多行注释 31 | let text = '' 32 | matches = matches.split('\n') 33 | for (let key of matches.keys()) { 34 | key !== matches.length - 1 ? text += `${matches[key]} \n` 35 | : text += `${matches[key]}` 36 | } 37 | return text 38 | } 39 | return `${matches}` // 单行注释 40 | }) 41 | 42 | return text 43 | } 44 | -------------------------------------------------------------------------------- /packages/theme/src/pagination.less: -------------------------------------------------------------------------------- 1 | // file: pagination.less 2 | // data: 2018/04/05 3 | // auth: linchengzhang 4 | // desc: 分页样式 5 | 6 | // desc: 通用变量和函数(转css需要) 7 | // -------------------------------------------------- 8 | @import "./utils/var.less"; 9 | @import "./utils/mixins.less"; 10 | 11 | 12 | // desc: 样式 13 | // -------------------------------------------------- 14 | .h-page-header { 15 | li { list-style: none; } 16 | .h-page-total { 17 | display: inline-block; 18 | margin: 20px 10px 20px 0; 19 | vertical-align: top; 20 | height: 34px; 21 | line-height: 34px; 22 | } 23 | .h-select { 24 | vertical-align: top; 25 | margin: 20px 10px; 26 | } 27 | .h-pagination-jump { 28 | display: inline-block; 29 | input { 30 | display: inline-block; 31 | margin: 0 5px; 32 | padding: 0 3px; 33 | outline: none; 34 | text-align: center; 35 | width: 45px; 36 | border: 1px solid #d9d9d9; 37 | transition: all .2s ease; 38 | &:hover, &:focus { 39 | border: 1px solid #b3b3b3; 40 | } 41 | &:focus { 42 | box-shadow: @box-shadow-base; 43 | } 44 | } 45 | } 46 | } 47 | .h-pagination { 48 | display: inline-block; 49 | padding-left: 0; 50 | margin: 20px 0; 51 | li { 52 | display: inline-block; 53 | min-width: 40px; 54 | text-align: center; 55 | cursor: pointer; 56 | padding: 6px 12px; 57 | height: 34px; 58 | color: #363636; 59 | text-decoration: none; 60 | border: 1px solid #d9d9d9; 61 | transition: all .2s ease; 62 | &:hover { 63 | border-color: #b3b3b3; 64 | } 65 | } 66 | .number { 67 | margin: 0 4px; 68 | } 69 | .active { 70 | background: #666666; 71 | color: white; 72 | } 73 | .disabled, .disabled:hover { 74 | color: #7a7a7a; 75 | cursor: not-allowed; 76 | background-color: #dbdbdb; 77 | border-color: #dbdbdb; 78 | opacity: 0.5; 79 | } 80 | } 81 | 82 | // desc: 圆角类型 83 | // -------------------------------------------------- 84 | .h-pagination-radius-small { 85 | li { 86 | border-radius: @border-radius-small; 87 | } 88 | } 89 | .h-pagination-radius-base { 90 | li { 91 | border-radius: @border-radius-base; 92 | } 93 | } 94 | .h-pagination-radius-large { 95 | li { 96 | border-radius: @border-radius-large; 97 | } 98 | } 99 | -------------------------------------------------------------------------------- /packages/theme/lib/checkbox-btn.css: -------------------------------------------------------------------------------- 1 | .h-checkbox-btn,.h-checkbox-btn span{line-height:20px;display:inline-block}.expand-init{-webkit-transform:scale(0);transform:scale(0);transition:-webkit-transform .2s ease;transition:transform .2s ease;transition:transform .2s ease,-webkit-transform .2s ease;-webkit-transition:transform .2s ease}.expand-done{-webkit-transform:scale(1);transform:scale(1)}.fade-background{-webkit-transition:background-color .2s ease;transition:background-color .2s ease}.fade-border{-webkit-transition:border-color .2s ease;transition:border-color .2s ease}.fade-color{-webkit-transition:color .2s ease;transition:color .2s ease}.fade-all,.fade-all-dropdown{-webkit-transition:all .2s ease}.fade-all{transition:all .2s ease}.fade-opacity{-webkit-transition:opacity .2s ease;transition:opacity .2s ease}.fade-height{-webkit-transition:height .2s ease;transition:height .2s ease}.fade-all-dropdown{transition:all .2s ease}.h-checkbox-btn{padding:7px 12px;font-size:14px;font-weight:400;height:36px;text-align:center;white-space:nowrap;outline-style:none;background-image:none;background-color:transparent;border:1px solid #d9d9d9;border-radius:0;position:relative;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;-o-user-select:none;user-select:none;-webkit-transition:all .2s ease;transition:all .2s ease}.h-checkbox-btn span{height:100%}.h-checkbox-btn input[type=checkbox]{opacity:0;cursor:pointer;position:absolute;left:0;right:0;top:0;bottom:0;margin:0;outline:0;z-index:-1;display:inline-block;line-height:36px;width:100%;height:100%}.h-checkbox-btn+.h-checkbox-btn{margin-left:-1px}.h-checkbox-btn-checked{background-color:#e6e6e6}.h-checkbox-btn-checked:hover{background-color:#d9d9d9}.h-checkbox-btn-semantic-primary{background-color:#a5cdf3;border:1px solid #a5cdf3}.h-checkbox-btn-semantic-primary:hover{background-color:#8fc1f0}.h-checkbox-btn-semantic-success{background-color:#7fd2ae;border:1px solid #7fd2ae}.h-checkbox-btn-semantic-success:hover{background-color:#6ccba2}.h-checkbox-btn-semantic-info{background-color:#94dbe4;border:1px solid #94dbe4}.h-checkbox-btn-semantic-info:hover{background-color:#80d5de}.h-checkbox-btn-semantic-warning{background-color:#f7cb9b;border:1px solid #f7cb9b}.h-checkbox-btn-semantic-warning:hover{background-color:#f6bf83}.h-checkbox-btn-semantic-danger{background-color:#fcb2b2;border:1px solid #fcb2b2}.h-checkbox-btn-semantic-danger:hover{background-color:#fb9999}.h-checkbox-btn-disabled{cursor:not-allowed;opacity:.5;filter:alpha(opacity=50);-webkit-box-shadow:none;box-shadow:none} -------------------------------------------------------------------------------- /packages/theme/lib/tag-group.css: -------------------------------------------------------------------------------- 1 | .expand-init{-webkit-transform:scale(0);transform:scale(0);transition:-webkit-transform .2s ease;transition:transform .2s ease;transition:transform .2s ease,-webkit-transform .2s ease;-webkit-transition:transform .2s ease}.expand-done{-webkit-transform:scale(1);transform:scale(1)}.fade-background{-webkit-transition:background-color .2s ease;transition:background-color .2s ease}.fade-border{-webkit-transition:border-color .2s ease;transition:border-color .2s ease}.fade-color{-webkit-transition:color .2s ease;transition:color .2s ease}.fade-all{-webkit-transition:all .2s ease;transition:all .2s ease}.fade-opacity{-webkit-transition:opacity .2s ease;transition:opacity .2s ease}.fade-height{-webkit-transition:height .2s ease;transition:height .2s ease}.fade-all-dropdown{-webkit-transition:all .2s ease;transition:all .2s ease}.h-tag-group{display:inline-block}.h-tag-group:after,.h-tag-group:before{content:" ";display:table}.h-tag-group:after{clear:both}.h-tag-group .h-tag{float:left}.h-tag-group .h-tag+.h-tag,.h-tag-group .h-tag+.h-tag-group,.h-tag-group .h-tag-group+.h-tag,.h-tag-group .h-tag-group+.h-tag-group,.h-tag-group .h-tag:not(:last-child){margin-left:-1px}.h-tag-group-close{background:0 0}.h-tag-group .h-tag[class*=h-tag-radius-]{border-radius:0}.h-tag-group .h-tag[class*=h-tag-size-]{height:30px;padding:4px 12px}.h-tag-group.h-tag-group-size-large span.h-tag{height:36px;padding:7px 12px}.h-tag-group.h-tag-group-size-larger span.h-tag{height:42px;padding:10px 18px}.h-tag-group.h-tag-group-radius-small span.h-tag{border-radius:3px}.h-tag-group.h-tag-group-radius-small .h-tag:not(:first-child):not(:last-child){border-radius:0}.h-tag-group.h-tag-group-radius-small .h-tag:first-child:not(:last-child){border-radius:3px 0 0 3px}.h-tag-group.h-tag-group-radius-small .h-tag:last-child:not(:first-child){border-radius:0 3px 3px 0}.h-tag-group.h-tag-group-radius-large span.h-tag{border-radius:6px}.h-tag-group.h-tag-group-radius-large .h-tag:not(:first-child):not(:last-child){border-radius:0}.h-tag-group.h-tag-group-radius-large .h-tag:first-child:not(:last-child){border-radius:6px 0 0 6px}.h-tag-group.h-tag-group-radius-large .h-tag:last-child:not(:first-child){border-radius:0 6px 6px 0}.h-tag-group.h-tag-group-radius-circle span.h-tag{border-radius:36px}.h-tag-group.h-tag-group-radius-circle .h-tag:not(:first-child):not(:last-child){border-radius:0}.h-tag-group.h-tag-group-radius-circle .h-tag:first-child:not(:last-child){border-radius:36px 0 0 36px}.h-tag-group.h-tag-group-radius-circle .h-tag:last-child:not(:first-child){border-radius:0 36px 36px 0} -------------------------------------------------------------------------------- /packages/theme/lib/alert.css: -------------------------------------------------------------------------------- 1 | .expand-init{-webkit-transform:scale(0);transform:scale(0);transition:-webkit-transform .2s ease;transition:transform .2s ease;transition:transform .2s ease,-webkit-transform .2s ease;-webkit-transition:transform .2s ease}.expand-done{-webkit-transform:scale(1);transform:scale(1)}.fade-background{-webkit-transition:background-color .2s ease;transition:background-color .2s ease}.fade-border{-webkit-transition:border-color .2s ease;transition:border-color .2s ease}.fade-color{-webkit-transition:color .2s ease;transition:color .2s ease}.fade-all,.fade-all-dropdown{-webkit-transition:all .2s ease}.fade-all{transition:all .2s ease}.fade-opacity{-webkit-transition:opacity .2s ease;transition:opacity .2s ease}.fade-height{-webkit-transition:height .2s ease;transition:height .2s ease}.fade-all-dropdown{transition:all .2s ease}.h-alert{padding:7px 12px;min-height:36px;margin-bottom:20px;border:1px solid transparent;background-color:#f2f2f2;position:relative}.h-alert span{padding:7px 12px;border:none;outline:0;background-color:transparent;line-height:16px;min-height:34px;font-size:20px;font-weight:700;color:inherit;position:absolute;top:0;right:0;opacity:.5;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;-o-user-select:none;user-select:none}.h-alert span:hover{opacity:1}.h-alert-semantic-primary{background-color:#bcdaf6;border-color:transparent;color:#155c9e}.h-alert-semantic-primary hr{border:none;border-top:1px solid #62a8ea;margin:10px 0}.h-alert-semantic-success{background-color:#91d9ba;border-color:transparent;color:#1c4f39}.h-alert-semantic-success hr{border:none;border-top:1px solid #46be8a;margin:10px 0}.h-alert-semantic-info{background-color:#a8e2e9;border-color:transparent;color:#1e6b74}.h-alert-semantic-info hr{border:none;border-top:1px solid #57c7d4;margin:10px 0}.h-alert-semantic-warning{background-color:#f9d7b3;border-color:transparent;color:#a1590c}.h-alert-semantic-warning hr{border:none;border-top:1px solid #f2a654;margin:10px 0}.h-alert-semantic-danger{background-color:#fdcaca;border-color:transparent;color:#c00808}.h-alert-semantic-danger hr{border:none;border-top:1px solid #f96868;margin:10px 0}.h-alert-radius-small{border-radius:3px}.h-alert-radius-large{border-radius:6px}.h-alert-radius-circle{border-radius:36px}.h-alert-size-small,.h-alert-size-small span{min-height:30px;padding:4px 12px}.h-alert-size-large,.h-alert-size-large span{min-height:42px;padding:10px 18px}.h-alert-fade-enter-active,.h-alert-fade-leave-active{-webkit-transition:all .2s ease;transition:all .2s ease}.h-alert-fade-enter,.h-alert-fade-leave-to{opacity:0} -------------------------------------------------------------------------------- /packages/dropdown/dropdown-item.vue: -------------------------------------------------------------------------------- 1 | 22 | -------------------------------------------------------------------------------- /.cz-config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | types: [ 3 | { value: 'feat', name: 'feat: A new feature' }, 4 | { value: 'fix', name: 'fix: A bug fix' }, 5 | { value: 'docs', name: 'docs: Documentation only changes' }, 6 | { 7 | value: 'style', 8 | name: 9 | 'style: Changes that do not affect the meaning of the code\n (white-space, formatting, missing semi-colons, etc)', 10 | }, 11 | { 12 | value: 'refactor', 13 | name: 'refactor: A code change that neither fixes a bug nor adds a feature', 14 | }, 15 | { 16 | value: 'perf', 17 | name: 'perf: A code change that improves performance', 18 | }, 19 | { value: 'test', name: 'test: Adding missing tests' }, 20 | { 21 | value: 'chore', 22 | name: 23 | 'chore: Changes to the build process or auxiliary tools\n and libraries such as documentation generation', 24 | }, 25 | { value: 'revert', name: 'revert: Revert to a commit' }, 26 | { value: 'WIP', name: 'WIP: Work in progress' }, 27 | ], 28 | 29 | scopes: [ 30 | { name: '@ziyi2' }, 31 | { name: '@ziyi2/button' } 32 | ], 33 | 34 | allowTicketNumber: false, 35 | isTicketNumberRequired: false, 36 | ticketNumberPrefix: 'TICKET-', 37 | ticketNumberRegExp: '\\d{1,5}', 38 | 39 | // it needs to match the value for field type. Eg.: 'fix' 40 | /* 41 | scopeOverrides: { 42 | fix: [ 43 | {name: 'merge'}, 44 | {name: 'style'}, 45 | {name: 'e2eTest'}, 46 | {name: 'unitTest'} 47 | ] 48 | }, 49 | */ 50 | // override the messages, defaults are as follows 51 | messages: { 52 | type: "Select the type of change that you're committing:", 53 | scope: '\nDenote the SCOPE of this change (optional):', 54 | // used if allowCustomScopes is true 55 | customScope: 'Denote the SCOPE of this change:', 56 | subject: 'Write a SHORT, IMPERATIVE tense description of the change:\n', 57 | body: 'Provide a LONGER description of the change (optional). Use "|" to break new line:\n', 58 | breaking: 'List any BREAKING CHANGES (optional):\n', 59 | footer: 'List any ISSUES CLOSED by this change (optional). E.g.: #31, #34:\n', 60 | confirmCommit: 'Are you sure you want to proceed with the commit above?', 61 | }, 62 | 63 | allowCustomScopes: true, 64 | allowBreakingChanges: ['feat', 'fix'], 65 | // skip any questions you want 66 | skipQuestions: ['body', 'footer'], 67 | 68 | // limit subject length 69 | subjectLimit: 100, 70 | }; 71 | -------------------------------------------------------------------------------- /plugins/vue-cli-plugin-ui-cz/generator/template/_cz-config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | types: [ 3 | { value: 'feat', name: 'feat: A new feature' }, 4 | { value: 'fix', name: 'fix: A bug fix' }, 5 | { value: 'docs', name: 'docs: Documentation only changes' }, 6 | { 7 | value: 'style', 8 | name: 9 | 'style: Changes that do not affect the meaning of the code\n (white-space, formatting, missing semi-colons, etc)', 10 | }, 11 | { 12 | value: 'refactor', 13 | name: 'refactor: A code change that neither fixes a bug nor adds a feature', 14 | }, 15 | { 16 | value: 'perf', 17 | name: 'perf: A code change that improves performance', 18 | }, 19 | { value: 'test', name: 'test: Adding missing tests' }, 20 | { 21 | value: 'chore', 22 | name: 23 | 'chore: Changes to the build process or auxiliary tools\n and libraries such as documentation generation', 24 | }, 25 | { value: 'revert', name: 'revert: Revert to a commit' }, 26 | { value: 'WIP', name: 'WIP: Work in progress' }, 27 | ], 28 | 29 | scopes: [ 30 | { name: 'ui' }, 31 | { name: 'button' }, 32 | { name: 'alert' } 33 | ], 34 | 35 | allowTicketNumber: false, 36 | isTicketNumberRequired: false, 37 | ticketNumberPrefix: 'TICKET-', 38 | ticketNumberRegExp: '\\d{1,5}', 39 | 40 | // it needs to match the value for field type. Eg.: 'fix' 41 | /* 42 | scopeOverrides: { 43 | fix: [ 44 | {name: 'merge'}, 45 | {name: 'style'}, 46 | {name: 'e2eTest'}, 47 | {name: 'unitTest'} 48 | ] 49 | }, 50 | */ 51 | // override the messages, defaults are as follows 52 | messages: { 53 | type: "Select the type of change that you're committing:", 54 | scope: '\nDenote the SCOPE of this change (optional):', 55 | // used if allowCustomScopes is true 56 | customScope: 'Denote the SCOPE of this change:', 57 | subject: 'Write a SHORT, IMPERATIVE tense description of the change:\n', 58 | body: 'Provide a LONGER description of the change (optional). Use "|" to break new line:\n', 59 | breaking: 'List any BREAKING CHANGES (optional):\n', 60 | footer: 'List any ISSUES CLOSED by this change (optional). E.g.: #31, #34:\n', 61 | confirmCommit: 'Are you sure you want to proceed with the commit above?', 62 | }, 63 | 64 | allowCustomScopes: true, 65 | allowBreakingChanges: ['feat', 'fix'], 66 | // skip any questions you want 67 | skipQuestions: ['body', 'footer'], 68 | 69 | // limit subject length 70 | subjectLimit: 100, 71 | }; -------------------------------------------------------------------------------- /packages/toast/toast.vue: -------------------------------------------------------------------------------- 1 | 15 | -------------------------------------------------------------------------------- /src/views/base/tag.vue: -------------------------------------------------------------------------------- 1 | 30 | 31 | 91 | 92 | 93 | 94 | -------------------------------------------------------------------------------- /packages/theme/src/tag.less: -------------------------------------------------------------------------------- 1 | // file: tag.less 2 | // data: 2017/12/14 3 | // auth: ziyi2 4 | // desc: 标签样式 5 | // -------------------------------------------------- 6 | 7 | // desc: 通用变量和函数(转css需要) 8 | // -------------------------------------------------- 9 | @import "./utils/var.less"; 10 | @import "./utils/mixins.less"; 11 | @import "./utils/animations.less"; 12 | 13 | 14 | .h-tag-semantic(@color) { 15 | background-color: lighten(@color, 10%); 16 | } 17 | 18 | 19 | // desc: 样式 20 | // type: 基本类型 21 | // -------------------------------------------------- 22 | .h-tag { 23 | display: inline-block; 24 | white-space: nowrap; 25 | text-align: center; 26 | padding: @tag-default-padding; 27 | height: @tag-default-height; 28 | line-height: @line-height-computed; 29 | background-color: @gray-95; 30 | border: 1px solid transparent; 31 | vertical-align: middle; 32 | 33 | span { 34 | border: none; 35 | outline: none; 36 | background-color: transparent; 37 | font-weight: 700; 38 | color: inherit; 39 | margin-left: 5px; 40 | opacity: .5; 41 | cursor: pointer; 42 | .user-select(none); 43 | 44 | &:hover { 45 | opacity: 1; 46 | } 47 | } 48 | } 49 | 50 | // desc: 样式 51 | // type: 语义类型 52 | // -------------------------------------------------- 53 | .h-tag-semantic-dark { 54 | .h-tag-semantic(@gray-30); 55 | color: white; 56 | } 57 | 58 | .h-tag-semantic-primary { 59 | .h-tag-semantic(@primary); 60 | } 61 | 62 | .h-tag-semantic-success { 63 | .h-tag-semantic(@success); 64 | } 65 | 66 | .h-tag-semantic-info { 67 | .h-tag-semantic(@info); 68 | } 69 | 70 | .h-tag-semantic-warning { 71 | .h-tag-semantic(@warning); 72 | } 73 | 74 | .h-tag-semantic-danger { 75 | .h-tag-semantic(@danger); 76 | } 77 | 78 | 79 | // desc: 样式 80 | // type: 圆角 81 | // -------------------------------------------------- 82 | 83 | .h-tag-radius-small { 84 | border-radius: @border-radius-small; 85 | } 86 | 87 | .h-tag-radius-large { 88 | border-radius: @border-radius-large; 89 | } 90 | 91 | .h-tag-radius-circle { 92 | border-radius: @tag-radius-circle; 93 | } 94 | 95 | // desc: 样式 96 | // type: 尺寸 97 | // -------------------------------------------------- 98 | 99 | .h-tag-size-large { 100 | height: @tag-large-height; 101 | padding: @tag-large-padding; 102 | } 103 | 104 | .h-tag-size-larger { 105 | height: @tag-larger-height; 106 | padding: @tag-larger-padding; 107 | } 108 | 109 | 110 | 111 | // desc: 样式 112 | // type: 动画 113 | // -------------------------------------------------- 114 | .h-tag-fade-enter-active, .h-tag-fade-leave-active { 115 | .fade-all; 116 | } 117 | .h-tag-fade-enter, .h-tag-fade-leave-to { 118 | opacity: 0; 119 | } 120 | -------------------------------------------------------------------------------- /packages/code/language/html.js: -------------------------------------------------------------------------------- 1 | /* 2 | * @Author: ziyi2 3 | * @Date: 2017-09-28 4 | */ 5 | 6 | const regs = { 7 | comments: /<!--[\s\S]*?-->/g, 8 | function: /<\?[\s\S]+?\?>/g, 9 | literal: /<!DOCTYPE[\s\S]+?>/gi, 10 | template: /<!\[CDATA\[[\s\S]*?]]>/gi 11 | } 12 | 13 | const tag = { 14 | all: /(<\/?)([\w-]+)([\s\S]*?)(\s*)(\/?>)/gi, 15 | attr_no_value: /(\s+)([^\s=]+)(\s+|$)/gi, 16 | attr_value_no_string: /(\s+)([a-zA-z-]+)(=)((?!(?:"|'|\s|'|")))([^\s=]+)(\s+|$)/gi, 17 | attr_value_string: /(\s+)([a-zA-z-]+)(=)((?:")|(?:'))([\s\S]*?)(\4)/gi 18 | } 19 | 20 | /* 21 | * @Desc: html字符转义 22 | * @Parm: text -> html代码字符串 23 | */ 24 | function htmlEncode (html) { 25 | return html.replace(/[<>"'&]/g, function (match) { 26 | switch (match) { 27 | case '<': 28 | return '<' 29 | case '>': 30 | return '>' 31 | case '&': 32 | return '&' 33 | case "'": 34 | return ''' 35 | case '"': 36 | return '"' 37 | } 38 | }) 39 | } 40 | 41 | const tokens = [ 42 | // 0 43 | 'function', 44 | // 1 45 | 'builtin', 46 | // 2 47 | 'template', 48 | // 3 49 | 'comment' 50 | ] 51 | 52 | /* 53 | * @Desc: 插入高亮span标签 54 | * @Parm: text -> 被匹配的字符串 55 | */ 56 | function token (content, tokenIndex) { 57 | let str = '' 58 | if (content) { 59 | str = content.split(/\r\n|\n/).map(function (s) { 60 | return s.replace(/^(\s*)(.*?)(\s*)$/, `$1$2$3`) 61 | }).join('\n') 62 | } 63 | return str 64 | } 65 | 66 | /* 67 | * @Desc: 高亮html代码 68 | * @Parm: text -> html代码字符串 69 | */ 70 | export function html (text) { 71 | text = htmlEncode(text) 72 | for (let reg in regs) { 73 | text = text.replace(regs[reg], (match) => { 74 | return `${match}` 75 | }) 76 | } 77 | 78 | text = text.replace(tag.all, (...args) => { 79 | // 标签左侧和右侧 80 | args[1] = token(args[1], 3) 81 | args[5] = token(args[5], 3) 82 | // 标签名 83 | args[2] = token(args[2], 0) 84 | // 属性 85 | args[3] = args[3] 86 | // 属性无值 87 | .replace(tag.attr_no_value, `$1$2$3`) 88 | // 属性有值但是没有'' 89 | .replace(tag.attr_value_no_string, (...args) => { 90 | return args[1] + token(args[2], 1) + args[3] + token(args[4], 2) + token(args[5], 2) + token(args[6], 2) 91 | }) 92 | // 属性有'' "" 93 | .replace(tag.attr_value_string, (...args) => { 94 | return args[1] + token(args[2], 1) + args[3] + token(args[4], 2) + token(args[5], 2) + token(args[6], 2) 95 | }) 96 | return args[1] + args[2] + args[3] + args[4] + args[5] 97 | }) 98 | 99 | return text 100 | } 101 | 102 | -------------------------------------------------------------------------------- /packages/theme/src/tag-group.less: -------------------------------------------------------------------------------- 1 | // file: tag-group.less 2 | // data: 2017/12/14 3 | // auth: ziyi2 4 | // desc: 标签组样式 5 | // -------------------------------------------------- 6 | @import "./utils/var.less"; 7 | @import "./utils/mixins.less"; 8 | @import "./utils/animations.less"; 9 | 10 | .h-tag-radius-disabled() { 11 | .h-tag-group { 12 | .h-tag[class*=h-tag-radius-] { 13 | border-radius: @border-radius-none; 14 | } 15 | } 16 | } 17 | 18 | .h-tag-size-disabled() { 19 | .h-tag-group { 20 | .h-tag[class*=h-tag-size-] { 21 | height: @tag-group-default-height; // 兼容IE 22 | padding: @tag-group-default-padding; 23 | } 24 | } 25 | 26 | } 27 | 28 | 29 | 30 | .h-tag-group-radius(@radius) { 31 | span.h-tag { // 包含单个h-tag组件生效 32 | border-radius: @radius; 33 | } 34 | 35 | .h-tag:not(:first-child):not(:last-child) { 36 | border-radius: @border-radius-none; 37 | } 38 | 39 | .h-tag:first-child:not(:last-child) { 40 | .border-right-radius(@border-radius-none); 41 | .border-left-radius(@radius); 42 | } 43 | 44 | .h-tag:last-child:not(:first-child) { 45 | .border-right-radius(@radius); 46 | .border-left-radius(@border-radius-none); 47 | } 48 | } 49 | 50 | 51 | 52 | // desc: 样式 53 | // type: 基本样式 54 | // -------------------------------------------------- 55 | 56 | .h-tag-group { 57 | display: inline-block; 58 | .clearfix(); 59 | 60 | .h-tag { 61 | float: left; 62 | } 63 | .h-tag + .h-tag, 64 | .h-tag + .h-tag-group, 65 | .h-tag-group + .h-tag, 66 | .h-tag-group + .h-tag-group { 67 | margin-left: -1px; 68 | } 69 | .h-tag:not(:last-child) { 70 | margin-left: -1px; // 兼容IE 71 | } 72 | } 73 | 74 | 75 | .h-tag-group-close { 76 | background: transparent; 77 | } 78 | 79 | 80 | // desc: 样式 81 | // type: h-tag组件属性样式禁止 82 | // -------------------------------------------------- 83 | .h-tag-radius-disabled(); 84 | .h-tag-size-disabled(); 85 | 86 | 87 | // desc: 尺寸 88 | // type: 89 | // -------------------------------------------------- 90 | .h-tag-group.h-tag-group-size-large { 91 | span.h-tag { 92 | height: @tag-group-large-height; 93 | padding: @tag-group-large-padding; 94 | } 95 | 96 | } 97 | 98 | .h-tag-group.h-tag-group-size-larger { 99 | span.h-tag { 100 | height: @tag-group-larger-height; 101 | padding: @tag-group-larger-padding; 102 | } 103 | } 104 | 105 | // desc: 圆角 106 | // type: 107 | // -------------------------------------------------- 108 | 109 | 110 | .h-tag-group.h-tag-group-radius-small { 111 | .h-tag-group-radius(@border-radius-small); 112 | } 113 | 114 | .h-tag-group.h-tag-group-radius-large { 115 | .h-tag-group-radius(@border-radius-large); 116 | } 117 | 118 | .h-tag-group.h-tag-group-radius-circle { 119 | .h-tag-group-radius(@tag-group-radius-circle); 120 | } 121 | 122 | -------------------------------------------------------------------------------- /src/views/base/alert.vue: -------------------------------------------------------------------------------- 1 | 49 | 50 | 104 | 105 | 106 | 107 | -------------------------------------------------------------------------------- /packages/theme/lib/input.css: -------------------------------------------------------------------------------- 1 | .expand-init{-webkit-transform:scale(0);transform:scale(0);transition:-webkit-transform .2s ease;transition:transform .2s ease;transition:transform .2s ease,-webkit-transform .2s ease;-webkit-transition:transform .2s ease}.expand-done{-webkit-transform:scale(1);transform:scale(1)}.fade-background{-webkit-transition:background-color .2s ease;transition:background-color .2s ease}.fade-border{-webkit-transition:border-color .2s ease;transition:border-color .2s ease}.fade-color{-webkit-transition:color .2s ease;transition:color .2s ease}.fade-all{-webkit-transition:all .2s ease;transition:all .2s ease}.fade-opacity{-webkit-transition:opacity .2s ease;transition:opacity .2s ease}.fade-height{-webkit-transition:height .2s ease;transition:height .2s ease}.fade-all-dropdown{-webkit-transition:all .2s ease;transition:all .2s ease}.h-input{display:inline-block;vertical-align:bottom;position:relative}.h-input .h-input-text,.h-input .h-input-textarea{background-color:#fff;background-image:none;border:1px solid #d9d9d9;border-radius:0;display:inline-block;height:36px;line-height:20px;outline:0;padding:7px 12px;text-shadow:none;-webkit-transition:border-color .2s ease;transition:border-color .2s ease}.h-input .h-input-textarea{width:400px;min-height:96px;max-height:216px;display:block}.h-input+.h-input{margin-left:5px}.h-input-text[disabled],.h-input-textarea[disabled]{cursor:not-allowed;opacity:.5;filter:alpha(opacity=50);-webkit-box-shadow:none;box-shadow:none;background-color:#e6e6e6}.h-input-semantic-primary .h-input-text,.h-input-semantic-primary .h-input-textarea{border:1px solid #8fc1f0}.h-input-semantic-success .h-input-text,.h-input-semantic-success .h-input-textarea{border:1px solid #6ccba2}.h-input-semantic-warning .h-input-text,.h-input-semantic-warning .h-input-textarea{border:1px solid #f6bf83}.h-input-semantic-info .h-input-text,.h-input-semantic-info .h-input-textarea{border:1px solid #80d5de}.h-input-semantic-danger .h-input-text,.h-input-semantic-danger .h-input-textarea{border:1px solid #fb9999}.h-input-width-full{width:100%}.h-input-radius-small .h-input-text,.h-input-radius-small .h-input-textarea{border-radius:3px}.h-input-radius-large .h-input-text,.h-input-radius-large .h-input-textarea{border-radius:6px}.h-input-radius-circle .h-input-text{border-radius:36px}.h-input-radius-circle .h-input-textarea{border-radius:12px}.h-input-size-small .h-input-text{height:30px;padding:4px 12px}.h-input-size-large .h-input-text{height:42px;padding:10px 18px}.h-input .h-icon{width:36px;line-height:36px;position:absolute;height:100%;text-align:center;color:#b3b3b3}.h-input .h-icon-left{left:0;top:0}.h-input .h-icon-right{right:0;top:0;cursor:pointer;z-index:3;-webkit-transition:color .2s ease;transition:color .2s ease}.h-input .h-icon-right:hover{color:#363636}.h-input-size-small .h-icon{width:30px;line-height:30px}.h-input-size-large .h-icon{width:42px;line-height:42px}.h-input-left-icon .h-input-text{padding-left:36px}.h-input-left-icon.h-input-size-small .h-input-text{padding-left:30px}.h-input-left-icon.h-input-size-large .h-input-text{padding-left:42px}.h-input-right-icon .h-input-text{padding-right:36px}.h-input-right-icon.h-input-size-small .h-input-text{padding-right:30px}.h-input-right-icon.h-input-size-large .h-input-text{padding-right:42px} -------------------------------------------------------------------------------- /packages/input/input.vue: -------------------------------------------------------------------------------- 1 | 43 | 118 | 119 | 120 | 121 | -------------------------------------------------------------------------------- /packages/snackbar/snackbar.vue: -------------------------------------------------------------------------------- 1 | 20 | -------------------------------------------------------------------------------- /packages/theme/src/radio-btn.less: -------------------------------------------------------------------------------- 1 | // file: radio-btn.less 2 | // data: 2017/10/28 3 | // auth: ziyi2 4 | // desc: 按钮单选框样式 5 | // -------------------------------------------------- 6 | 7 | // desc: 通用变量和函数(转css需要) 8 | // -------------------------------------------------- 9 | @import "./utils/var.less"; 10 | @import "./utils/mixins.less"; 11 | @import "./utils/animations.less"; 12 | 13 | // desc: 变量 14 | // -------------------------------------------------- 15 | @radio-btn-check-content-barckground: @gray-90; 16 | 17 | // desc: 混合 18 | // -------------------------------------------------- 19 | 20 | // desc: 样式 21 | // type: 基本类型 22 | // -------------------------------------------------- 23 | .h-radio-btn { 24 | display: inline-block; 25 | padding: @btn-default-padding; 26 | font-size: @font-size-base; 27 | font-weight: normal; 28 | line-height: @line-height-computed; 29 | height: @btn-default-height; // 兼容IE 30 | text-align: center; 31 | white-space: nowrap; 32 | outline-style: none; 33 | background-image: none; 34 | background-color: transparent; 35 | border: 1px solid @gray-80; 36 | border-radius: @border-radius-none; 37 | // margin-left: -1px; 38 | position: relative; 39 | cursor: pointer; 40 | .user-select(none); 41 | .fade-all(); 42 | 43 | span { 44 | display: inline-block; 45 | height: 100%; 46 | line-height: @line-height-computed; 47 | } 48 | 49 | input[type=radio] { 50 | opacity: 0; 51 | cursor: pointer; 52 | position: absolute; 53 | left: 0; 54 | right: 0; 55 | top: 0; 56 | bottom: 0; 57 | margin: 0; 58 | outline: none; 59 | z-index: @radio-input-index; 60 | display: inline-block; 61 | line-height: @btn-default-height; 62 | width: 100%; 63 | height: 100%; 64 | } 65 | } 66 | 67 | .h-radio-btn + .h-radio-btn { 68 | margin-left: -1px; 69 | } 70 | 71 | 72 | // desc: 样式 73 | // type: checked样式 74 | // -------------------------------------------------- 75 | .h-radio-btn-checked { 76 | background-color: @radio-btn-check-content-barckground; 77 | } 78 | 79 | // desc: 样式 80 | // type: 语义样式 81 | // -------------------------------------------------- 82 | .h-radio-btn-semantic-primary { 83 | background-color: lighten(@primary, 10%); 84 | border: 1px solid lighten(@primary, 10%); 85 | } 86 | 87 | .h-radio-btn-semantic-success { 88 | background-color: lighten(@success, 10%); 89 | border: 1px solid lighten(@success, 10%); 90 | } 91 | 92 | .h-radio-btn-semantic-info { 93 | background-color: lighten(@info, 10%); 94 | border: 1px solid lighten(@info, 10%); 95 | } 96 | 97 | .h-radio-btn-semantic-warning { 98 | background-color: lighten(@warning, 10%); 99 | border: 1px solid lighten(@warning, 10%); 100 | } 101 | 102 | .h-radio-btn-semantic-danger { 103 | background-color: lighten(@danger, 10%); 104 | border: 1px solid lighten(@danger, 10%); 105 | } 106 | 107 | 108 | 109 | // desc: 样式 110 | // type: disabled样式 111 | // -------------------------------------------------- 112 | .h-radio-btn-disabled { 113 | .disabled(); 114 | } 115 | 116 | 117 | -------------------------------------------------------------------------------- /packages/theme/src/radio-group.less: -------------------------------------------------------------------------------- 1 | // file: radio-group.less 2 | // data: 2017/10/28 3 | // auth: ziyi2 4 | // desc: 单选框组样式 5 | // -------------------------------------------------- 6 | 7 | // desc: 通用变量和函数(转css需要) 8 | // -------------------------------------------------- 9 | @import "./utils/var.less"; 10 | @import "./utils/mixins.less"; 11 | 12 | // desc: 变量 13 | // -------------------------------------------------- 14 | 15 | 16 | // desc: 混合 17 | // -------------------------------------------------- 18 | .h-radio-group-radius(@radius) { 19 | label.h-radio-btn { // 包含单个h-radio-btn组件生效 20 | border-radius: @radius; 21 | } 22 | 23 | .h-radio-btn:not(:first-child):not(:last-child) { 24 | border-radius: @border-radius-none; 25 | } 26 | 27 | .h-radio-btn:first-child:not(:last-child) { 28 | .border-right-radius(@border-radius-none); 29 | .border-left-radius(@radius); 30 | } 31 | 32 | .h-radio-btn:last-child:not(:first-child) { 33 | .border-right-radius(@radius); 34 | .border-left-radius(@border-radius-none); 35 | } 36 | } 37 | 38 | 39 | 40 | 41 | // desc: 样式 42 | // type: 基本类型 43 | // -------------------------------------------------- 44 | 45 | .h-radio-group { 46 | display: inline-block; 47 | vertical-align: middle; 48 | font-size: 0; // 为了去除label(display: inline-block)之间的间隔 49 | -webkit-text-size-adjust:none; // 兼容旧版chrome 50 | } 51 | 52 | .h-radio-group + .h-radio-group { 53 | margin-left: @margin-left-default; 54 | } 55 | 56 | // desc: 样式 57 | // type: disabled样式 58 | // -------------------------------------------------- 59 | .h-radio-group-disabled { 60 | .disabled(); 61 | 62 | .h-radio-btn-disabled { 63 | opacity: 1; 64 | } 65 | } 66 | 67 | 68 | // desc: 样式 69 | // type: 按钮阴影 70 | // -------------------------------------------------- 71 | .h-radio-group-shadow { 72 | .box-shadow(@box-shadow-base); 73 | border: none; 74 | 75 | label.h-radio-btn { 76 | border-top: none; 77 | border-bottom: none; 78 | } 79 | } 80 | 81 | 82 | // desc: 样式 83 | // type: 按钮形式圆角样式 84 | // -------------------------------------------------- 85 | .h-radio-group-radius-small { 86 | .h-radio-group-radius(@border-radius-small); 87 | } 88 | 89 | .h-radio-group-radius-large { 90 | .h-radio-group-radius(@border-radius-large); 91 | } 92 | 93 | .h-radio-group-radius-circle { 94 | .h-radio-group-radius(@radio-group-radius-circle); 95 | } 96 | 97 | 98 | // desc: 样式 99 | // type: 按钮形式大小 100 | // -------------------------------------------------- 101 | .h-radio-group-size-small { 102 | label.h-radio-btn { 103 | height: @radio-group-small-height; // 兼容IE 104 | padding: @radio-group-small-padding; 105 | span { 106 | line-height: @line-height-computed; 107 | } 108 | } 109 | } 110 | 111 | .h-radio-group-size-large { 112 | label.h-radio-btn { 113 | height: @radio-group-large-height; // 兼容IE 114 | padding: @radio-group-large-padding; 115 | span { 116 | line-height: @line-height-computed; 117 | } 118 | } 119 | } 120 | 121 | 122 | 123 | 124 | -------------------------------------------------------------------------------- /packages/theme/src/col.less: -------------------------------------------------------------------------------- 1 | // file: col.less 2 | // data: 2017/09/24 3 | // auth: ziyi2 4 | // desc: 栅格列样式 5 | // -------------------------------------------------- 6 | 7 | // desc: 通用变量和函数(转css需要) 8 | // -------------------------------------------------- 9 | @import "./utils/var.less"; 10 | @import "./utils/mixins.less"; 11 | 12 | 13 | // desc: 变量 14 | // -------------------------------------------------- 15 | @grid-gutter-width: 30px; 16 | @col-max: 24; 17 | 18 | // desc: 混合 19 | // -------------------------------------------------- 20 | .h-col-init() { 21 | .col(@init: 1) when (@init = 1) { 22 | @item: ~".h-col-xs-@{init}, .h-col-sm-@{init}, .h-col-md-@{init}, .h-col-lg-@{init}"; 23 | .col((@init + 1), @item); 24 | } 25 | 26 | .col(@index, @list) when (@index =< @col-max) { 27 | @item: ~".h-col-xs-@{index}, .h-col-sm-@{index}, .h-col-md-@{index}, .h-col-lg-@{index}"; 28 | .col((@index + 1), ~"@{list}, @{item}"); 29 | } 30 | 31 | .col(@index, @list) when(@index > @col-max) { 32 | @{list} { //使col-(xs|sm|md|lg)-[1~24]拥有以下样式 33 | position: relative; 34 | min-height: 1px; 35 | float: left; 36 | // padding-left: (@grid-gutter-width / 2); 37 | // padding-right: (@grid-gutter-width / 2); 38 | } 39 | } 40 | 41 | .col(); 42 | } 43 | 44 | 45 | 46 | .h-col-init(@size, @type, @index: @col-max) when(@index >= 0) { 47 | .h-col-type-init(@size, @type, @index); 48 | .h-col-init(@size, @type, @index - 1); 49 | } 50 | 51 | .h-col-type-init(@size, @type, @index) when (@type = width) and (@index > 0) { 52 | .h-col-@{size}-@{index} { 53 | width: percentage((@index / @col-max)); 54 | } 55 | } 56 | 57 | .h-col-type-init(@size, @type, @index) when (@type = pull) and (@index > 0) { 58 | .h-col-@{size}-pull-@{index} { 59 | right: percentage((@index / @col-max)); 60 | } 61 | } 62 | 63 | .h-col-type-init(@size, @type, @index) when (@type = push) and (@index > 0) { 64 | .h-col-@{size}-push-@{index} { 65 | left: percentage((@index / @col-max)); 66 | } 67 | } 68 | 69 | .h-col-type-init(@size, @type, @index) when (@type = offset) and (@index > 0) { 70 | .h-col-@{size}-offset-@{index} { 71 | margin-left: percentage((@index / @col-max)); 72 | } 73 | } 74 | 75 | // desc: 样式 76 | // -------------------------------------------------- 77 | 78 | .h-col-init(); 79 | 80 | /* 列（手机移动先行） */ 81 | .h-col-init(xs, width); 82 | .h-col-init(xs, pull); 83 | .h-col-init(xs, push); 84 | .h-col-init(xs, offset); 85 | 86 | /* 列（小屏幕平板） */ 87 | @media (min-width: @screen-sm-min) { 88 | .h-col-init(sm, width); 89 | .h-col-init(sm, pull); 90 | .h-col-init(sm, push); 91 | .h-col-init(sm, offset); 92 | } 93 | 94 | /* 列（中等屏幕桌面显示器） */ 95 | @media (min-width: @screen-md-min) { 96 | .h-col-init(md, width); 97 | .h-col-init(md, pull); 98 | .h-col-init(md, push); 99 | .h-col-init(md, offset); 100 | } 101 | 102 | /* 列（大屏幕大桌面显示器） */ 103 | @media (min-width: @screen-lg-min) { 104 | .h-col-init(lg, width); 105 | .h-col-init(lg, pull); 106 | .h-col-init(lg, push); 107 | .h-col-init(lg, offset); 108 | } -------------------------------------------------------------------------------- /packages/theme/src/checkbox-group.less: -------------------------------------------------------------------------------- 1 | // file: checkbox-group.less 2 | // data: 2017/10/29 3 | // auth: ziyi2 4 | // desc: 多选框组样式 5 | // -------------------------------------------------- 6 | 7 | // desc: 通用变量和函数(转css需要) 8 | // -------------------------------------------------- 9 | @import "./utils/var.less"; 10 | @import "./utils/mixins.less"; 11 | 12 | // desc: 变量 13 | // -------------------------------------------------- 14 | 15 | 16 | // desc: 混合 17 | // -------------------------------------------------- 18 | .h-checkbox-group-radius(@radius) { 19 | label.h-checkbox-btn { // 包含单个h-checkbox-btn组件生效 20 | border-radius: @radius; 21 | } 22 | 23 | .h-checkbox-btn:not(:first-child):not(:last-child) { 24 | border-radius: @border-radius-none; 25 | } 26 | 27 | .h-checkbox-btn:first-child:not(:last-child) { 28 | .border-right-radius(@border-radius-none); 29 | .border-left-radius(@radius); 30 | } 31 | 32 | .h-checkbox-btn:last-child:not(:first-child) { 33 | .border-right-radius(@radius); 34 | .border-left-radius(@border-radius-none); 35 | } 36 | } 37 | 38 | 39 | 40 | 41 | // desc: 样式 42 | // type: 基本类型 43 | // -------------------------------------------------- 44 | 45 | .h-checkbox-group { 46 | display: inline-block; 47 | vertical-align: middle; 48 | font-size: 0; // 为了去除label(display: inline-block)之间的间隔 49 | -webkit-text-size-adjust:none; // 兼容旧版chrome 50 | } 51 | 52 | .h-checkbox-group + .h-checkbox-group { 53 | margin-left: @margin-left-default; 54 | } 55 | 56 | // desc: 样式 57 | // type: disabled样式 58 | // -------------------------------------------------- 59 | .h-checkbox-group-disabled { 60 | .disabled(); 61 | 62 | .h-checkbox-btn-disabled { 63 | opacity: 1; 64 | } 65 | } 66 | 67 | // desc: 样式 68 | // type: 阴影 69 | // -------------------------------------------------- 70 | .h-checkbox-group-shadow { 71 | .box-shadow(@box-shadow-base); 72 | border: none; 73 | 74 | label.h-checkbox-btn { 75 | border-top: none; 76 | border-bottom: none; 77 | } 78 | } 79 | 80 | 81 | // desc: 样式 82 | // type: 按钮形式圆角样式 83 | // -------------------------------------------------- 84 | .h-checkbox-group-radius-small { 85 | .h-checkbox-group-radius(@border-radius-small); 86 | } 87 | 88 | .h-checkbox-group-radius-large { 89 | .h-checkbox-group-radius(@border-radius-large); 90 | } 91 | 92 | .h-checkbox-group-radius-circle { 93 | .h-checkbox-group-radius(@checkbox-group-radius-circle); 94 | } 95 | 96 | 97 | // desc: 样式 98 | // type: 按钮形式大小 99 | // -------------------------------------------------- 100 | .h-checkbox-group-size-small { 101 | label.h-checkbox-btn { 102 | height: @checkbox-group-small-height; // 兼容IE 103 | padding: @checkbox-group-small-padding; 104 | span { 105 | line-height: @line-height-computed; 106 | } 107 | } 108 | } 109 | 110 | .h-checkbox-group-size-large { 111 | label.h-checkbox-btn { 112 | height: @checkbox-group-large-height; // 兼容IE 113 | padding: @checkbox-group-large-padding; 114 | span { 115 | line-height: @line-height-computed; 116 | } 117 | } 118 | } 119 | 120 | 121 | 122 | 123 | -------------------------------------------------------------------------------- /packages/theme/src/quote.less: -------------------------------------------------------------------------------- 1 | // file: quote.less 2 | // data: 2017/09/24 3 | // auth: ziyi2 4 | // desc: 引用样式 5 | // -------------------------------------------------- 6 | 7 | // desc: 通用变量和函数(转css需要) 8 | // -------------------------------------------------- 9 | @import "./utils/var.less"; 10 | @import "./utils/mixins.less"; 11 | 12 | // desc: 变量 13 | // -------------------------------------------------- 14 | @blockquote-border-default-color: @gray-90; 15 | @blockquote-border-primary-color: lighten(@primary, 10%); 16 | @blockquote-border-success-color: lighten(@success, 10%); 17 | @blockquote-border-info-color: lighten(@info, 10%); 18 | @blockquote-border-warning-color: lighten(@warning, 10%); 19 | @blockquote-border-danger-color: lighten(@danger, 10%); 20 | 21 | @blockquote-footer-color: @gray-60; 22 | 23 | @blockquote-radius-small: 2 * @border-radius-base; 24 | @blockquote-radius-large: 2 * @border-radius-large; 25 | 26 | // desc: 混合 27 | // -------------------------------------------------- 28 | 29 | 30 | // desc: 样式 31 | // type: 基本 32 | // -------------------------------------------------- 33 | .h-blockquote { 34 | padding: (@line-height-computed/2) @line-height-computed; 35 | margin: 0 0 @line-height-computed; 36 | font-size: (@font-size-base * 1.25); 37 | border: 1px solid @blockquote-border-default-color; 38 | border-left: 5px solid @blockquote-border-default-color; 39 | 40 | &:after, &:before { 41 | content: '' 42 | } 43 | 44 | p,ul,ol { 45 | &:last-child { 46 | margin-bottom: 0; 47 | } 48 | } 49 | 50 | footer { 51 | font-size: 80%; 52 | line-height: @line-height-base; 53 | color: @blockquote-footer-color; 54 | 55 | text-align: left; 56 | &:before { 57 | content: '\2014 \00A0'; 58 | } 59 | &:after { content: ''}; 60 | } 61 | } 62 | 63 | 64 | // desc: 样式 65 | // type: 颜色类型 66 | // -------------------------------------------------- 67 | .h-blockquote-semantic-default { 68 | border-left: 5px solid @blockquote-border-default-color; 69 | } 70 | 71 | .h-blockquote-semantic-primary { 72 | border-left: 5px solid @blockquote-border-primary-color; 73 | } 74 | .h-blockquote-semantic-success { 75 | border-left: 5px solid @blockquote-border-success-color; 76 | } 77 | .h-blockquote-semantic-info { 78 | border-left: 5px solid @blockquote-border-info-color; 79 | } 80 | .h-blockquote-semantic-warning { 81 | border-left: 5px solid @blockquote-border-warning-color; 82 | } 83 | .h-blockquote-semantic-danger { 84 | border-left: 5px solid @blockquote-border-danger-color; 85 | } 86 | 87 | .h-blockquote-radius-small { 88 | .border-right-radius(@blockquote-radius-small); 89 | .border-left-radius(0); 90 | } 91 | 92 | .h-blockquote-radius-large { 93 | .border-right-radius(@blockquote-radius-large); 94 | .border-left-radius(0); 95 | } 96 | 97 | 98 | 99 | 100 | // desc: 样式 101 | // type: 阴影 102 | // -------------------------------------------------- 103 | .h-blockquote-shadow { 104 | .box-shadow(@box-shadow-base); 105 | border-right: none; 106 | border-top: none; 107 | border-bottom: none; 108 | } 109 | 110 | 111 | 112 | 113 | 114 | 115 | -------------------------------------------------------------------------------- /packages/theme/lib/radio.css: -------------------------------------------------------------------------------- 1 | .h-radio,.h-radio input[type=radio]{cursor:pointer;outline:0;display:inline-block;line-height:1.42857143}.expand-init{-webkit-transform:scale(0);transform:scale(0);transition:-webkit-transform .2s ease;transition:transform .2s ease;transition:transform .2s ease,-webkit-transform .2s ease;-webkit-transition:transform .2s ease}.expand-done{-webkit-transform:scale(1);transform:scale(1)}.fade-background{-webkit-transition:background-color .2s ease;transition:background-color .2s ease}.fade-border{-webkit-transition:border-color .2s ease;transition:border-color .2s ease}.fade-color{-webkit-transition:color .2s ease;transition:color .2s ease}.fade-all{-webkit-transition:all .2s ease;transition:all .2s ease}.fade-opacity{-webkit-transition:opacity .2s ease;transition:opacity .2s ease}.fade-height{-webkit-transition:height .2s ease;transition:height .2s ease}.fade-all-dropdown{-webkit-transition:all .2s ease;transition:all .2s ease}.h-radio{white-space:nowrap;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;-o-user-select:none;user-select:none;position:relative;font-size:14px}.h-radio span{display:inline-block;height:20px;vertical-align:middle}.h-radio input[type=radio]{opacity:0;position:absolute;left:-2px;right:0;top:-2px;bottom:0;margin:0;z-index:-1;width:20px;height:20px}.h-radio .h-radio-text{padding-left:0}.h-radio+.h-radio{margin-left:5px}.h-radio-check{width:20px;height:20px;border:2px solid #b3b3b3;background-color:#fff;border-radius:100%;position:relative}.h-radio-check:before,.h-radio-checked:before{content:'';width:10px;height:10px;background-color:#b3b3b3}.h-radio-check:before{-webkit-transform:scale(0);transform:scale(0);transition:-webkit-transform .2s ease;transition:transform .2s ease;transition:transform .2s ease,-webkit-transform .2s ease;-webkit-transition:transform .2s ease}.h-radio-checked{-webkit-box-shadow:0 0 5px #b3b3b3;box-shadow:0 0 5px #b3b3b3}.h-radio-checked:before{position:absolute;left:3px;top:3px;-webkit-transform:scale(1);transform:scale(1);border-radius:100%}.h-radio-semantic-primary .h-radio-check:before,.h-radio-semantic-primary .h-radio-checked:before{background-color:#8fc1f0}.h-radio-semantic-primary .h-radio-check{border:2px solid #8fc1f0}.h-radio-semantic-primary .h-radio-checked{-webkit-box-shadow:0 0 5px #8fc1f0;box-shadow:0 0 5px #8fc1f0}.h-radio-semantic-success .h-radio-check:before,.h-radio-semantic-success .h-radio-checked:before{background-color:#6ccba2}.h-radio-semantic-success .h-radio-check{border:2px solid #6ccba2}.h-radio-semantic-success .h-radio-checked{-webkit-box-shadow:0 0 5px #6ccba2;box-shadow:0 0 5px #6ccba2}.h-radio-semantic-info .h-radio-check:before,.h-radio-semantic-info .h-radio-checked:before{background-color:#80d5de}.h-radio-semantic-info .h-radio-check{border:2px solid #80d5de}.h-radio-semantic-info .h-radio-checked{-webkit-box-shadow:0 0 5px #80d5de;box-shadow:0 0 5px #80d5de}.h-radio-semantic-warning .h-radio-check:before,.h-radio-semantic-warning .h-radio-checked:before{background-color:#f6bf83}.h-radio-semantic-warning .h-radio-check{border:2px solid #f6bf83}.h-radio-semantic-warning .h-radio-checked{-webkit-box-shadow:0 0 5px #f6bf83;box-shadow:0 0 5px #f6bf83}.h-radio-semantic-danger .h-radio-check:before,.h-radio-semantic-danger .h-radio-checked:before{background-color:#fb9999}.h-radio-semantic-danger .h-radio-check{border:2px solid #fb9999}.h-radio-semantic-danger .h-radio-checked{-webkit-box-shadow:0 0 5px #fb9999;box-shadow:0 0 5px #fb9999}.h-radio-disabled{cursor:not-allowed;opacity:.5;filter:alpha(opacity=50);-webkit-box-shadow:none;box-shadow:none} -------------------------------------------------------------------------------- /src/views/home.vue: -------------------------------------------------------------------------------- 1 | 55 | 56 | 69 | 70 | 79 | -------------------------------------------------------------------------------- /packages/theme/src/alert.less: -------------------------------------------------------------------------------- 1 | // file: alert.less 2 | // data: 2017/11/21 3 | // auth: ziyi2 4 | // desc: 警告样式 5 | // -------------------------------------------------- 6 | 7 | // desc: 通用变量和函数(转css需要) 8 | // -------------------------------------------------- 9 | @import "./utils/var.less"; 10 | @import "./utils/mixins.less"; 11 | @import "./utils/animations.less"; 12 | 13 | 14 | // desc: 变量 15 | // -------------------------------------------------- 16 | // @alert-padding-right: 17 | 18 | 19 | 20 | // desc: 混合 21 | // -------------------------------------------------- 22 | .h-alert-semantic(@color) { 23 | background-color: lighten(@color, 20%); 24 | border-color: transparent; 25 | color: darken(@color, 30%); 26 | 27 | hr { 28 | border: none; 29 | border-top: 1px solid @color; 30 | margin: 10px 0; 31 | } 32 | } 33 | 34 | 35 | // desc: 基本样式 36 | // -------------------------------------------------- 37 | 38 | .h-alert { 39 | padding: @alert-default-padding; 40 | min-height: @alert-default-height; 41 | margin-bottom: @margin-bottom-default; 42 | border: 1px solid transparent; 43 | background-color: @gray-95; 44 | position: relative; 45 | 46 | span { 47 | padding: @alert-default-padding; 48 | border: none; 49 | outline: none; 50 | background-color: transparent; 51 | line-height: 16px; 52 | min-height: @alert-default-height - 2; 53 | font-size: 20px; 54 | font-weight: 700; 55 | color: inherit; 56 | position: absolute; 57 | top: 0; 58 | right: 0; 59 | opacity: .5; 60 | cursor: pointer; 61 | .user-select(none); 62 | 63 | &:hover { 64 | opacity: 1; 65 | } 66 | } 67 | } 68 | 69 | 70 | // desc: 语义类型 71 | // -------------------------------------------------- 72 | 73 | .h-alert-semantic-primary { 74 | .h-alert-semantic(@primary); 75 | } 76 | 77 | .h-alert-semantic-success { 78 | .h-alert-semantic(@success); 79 | } 80 | 81 | .h-alert-semantic-info { 82 | .h-alert-semantic(@info); 83 | } 84 | 85 | .h-alert-semantic-warning { 86 | .h-alert-semantic(@warning); 87 | } 88 | 89 | .h-alert-semantic-danger { 90 | .h-alert-semantic(@danger); 91 | } 92 | 93 | 94 | // desc: 圆角类型 95 | // -------------------------------------------------- 96 | .h-alert-radius-small { 97 | border-radius: @border-radius-small; 98 | } 99 | 100 | .h-alert-radius-large { 101 | border-radius: @border-radius-large; 102 | } 103 | 104 | .h-alert-radius-circle { 105 | border-radius: @alert-radius-circle; 106 | } 107 | 108 | 109 | // desc: 大小 110 | // -------------------------------------------------- 111 | .h-alert-size-small { 112 | min-height: @alert-small-height; 113 | padding: @alert-small-padding; 114 | 115 | span { 116 | min-height: @alert-small-height; 117 | padding: @alert-small-padding; 118 | } 119 | 120 | } 121 | 122 | .h-alert-size-large { 123 | min-height: @alert-large-height; 124 | padding: @alert-large-padding; 125 | 126 | span { 127 | min-height: @alert-large-height; 128 | padding: @alert-large-padding; 129 | } 130 | } 131 | 132 | 133 | // desc: 动画样式 134 | // -------------------------------------------------- 135 | .h-alert-fade-enter-active, .h-alert-fade-leave-active { 136 | .fade-all; 137 | } 138 | .h-alert-fade-enter, .h-alert-fade-leave-to { 139 | opacity: 0; 140 | } 141 | 142 | 143 | 144 | -------------------------------------------------------------------------------- /plugins/vue-cli-plugin-ui-base/generator/template/packages/theme/src/alert.less: -------------------------------------------------------------------------------- 1 | // file: alert.less 2 | // data: 3 | // auth: 4 | // desc: 警告样式 5 | // -------------------------------------------------- 6 | 7 | // desc: 通用变量和函数(转css需要) 8 | // -------------------------------------------------- 9 | @import "./utils/var.less"; 10 | @import "./utils/mixins.less"; 11 | @import "./utils/animations.less"; 12 | 13 | 14 | // desc: 变量 15 | // -------------------------------------------------- 16 | // @alert-padding-right: 17 | 18 | 19 | 20 | // desc: 混合 21 | // -------------------------------------------------- 22 | .h-alert-semantic(@color) { 23 | background-color: lighten(@color, 20%); 24 | border-color: transparent; 25 | color: darken(@color, 30%); 26 | 27 | hr { 28 | border: none; 29 | border-top: 1px solid @color; 30 | margin: 10px 0; 31 | } 32 | } 33 | 34 | 35 | // desc: 基本样式 36 | // -------------------------------------------------- 37 | 38 | .h-alert { 39 | padding: @alert-default-padding; 40 | min-height: @alert-default-height; 41 | margin-bottom: @margin-bottom-default; 42 | border: 1px solid transparent; 43 | background-color: @gray-95; 44 | position: relative; 45 | 46 | span { 47 | padding: @alert-default-padding; 48 | border: none; 49 | outline: none; 50 | background-color: transparent; 51 | line-height: 16px; 52 | min-height: @alert-default-height - 2; 53 | font-size: 20px; 54 | font-weight: 700; 55 | color: inherit; 56 | position: absolute; 57 | top: 0; 58 | right: 0; 59 | opacity: .5; 60 | cursor: pointer; 61 | .user-select(none); 62 | 63 | &:hover { 64 | opacity: 1; 65 | } 66 | } 67 | } 68 | 69 | 70 | // desc: 语义类型 71 | // -------------------------------------------------- 72 | 73 | .h-alert-semantic-primary { 74 | .h-alert-semantic(@primary); 75 | } 76 | 77 | .h-alert-semantic-success { 78 | .h-alert-semantic(@success); 79 | } 80 | 81 | .h-alert-semantic-info { 82 | .h-alert-semantic(@info); 83 | } 84 | 85 | .h-alert-semantic-warning { 86 | .h-alert-semantic(@warning); 87 | } 88 | 89 | .h-alert-semantic-danger { 90 | .h-alert-semantic(@danger); 91 | } 92 | 93 | 94 | // desc: 圆角类型 95 | // -------------------------------------------------- 96 | .h-alert-radius-small { 97 | border-radius: @border-radius-small; 98 | } 99 | 100 | .h-alert-radius-large { 101 | border-radius: @border-radius-large; 102 | } 103 | 104 | .h-alert-radius-circle { 105 | border-radius: @alert-radius-circle; 106 | } 107 | 108 | 109 | // desc: 大小 110 | // -------------------------------------------------- 111 | .h-alert-size-small { 112 | min-height: @alert-small-height; 113 | padding: @alert-small-padding; 114 | 115 | span { 116 | min-height: @alert-small-height; 117 | padding: @alert-small-padding; 118 | } 119 | 120 | } 121 | 122 | .h-alert-size-large { 123 | min-height: @alert-large-height; 124 | padding: @alert-large-padding; 125 | 126 | span { 127 | min-height: @alert-large-height; 128 | padding: @alert-large-padding; 129 | } 130 | } 131 | 132 | 133 | // desc: 动画样式 134 | // -------------------------------------------------- 135 | .h-alert-fade-enter-active, .h-alert-fade-leave-active { 136 | .fade-all; 137 | } 138 | .h-alert-fade-enter, .h-alert-fade-leave-to { 139 | opacity: 0; 140 | } 141 | --------------------------------------------------------------------------------