├── babel.config.js ├── docs ├── favicon.ico ├── img │ └── logo.d9b49529.png ├── fonts │ ├── feather.5fad700a.eot │ ├── feather.a940fe89.ttf │ └── feather.66cbb621.woff ├── js │ ├── chunk-2d0a54f5.20ecabe6.js │ ├── chunk-fc6d75d2.143f1bd6.js │ ├── chunk-2d0e2c78.65abd4f6.js │ ├── chunk-2d21d4e0.b71bc97c.js │ ├── chunk-2d0b38aa.25bc8296.js │ ├── chunk-5efb1e23.488227d0.js │ ├── chunk-2d0d5faf.f91f538c.js │ ├── chunk-2d0bac03.fafcc21f.js │ ├── chunk-2d0dd6ad.dac39dba.js │ ├── chunk-2d0ddd80.4e859562.js │ ├── chunk-2d0ccf1f.c8e910b5.js │ ├── chunk-2d0c0e74.7beafb74.js │ └── chunk-2d226013.a2cdf971.js └── index.html ├── public ├── favicon.ico └── index.html ├── src ├── docs │ ├── assets │ │ ├── 01.png │ │ ├── 02.png │ │ ├── 03.png │ │ ├── 04.png │ │ ├── logo.png │ │ └── logo.psd │ ├── component │ │ ├── index.js │ │ └── tag.vue │ ├── view │ │ ├── home │ │ │ ├── jsonp.js │ │ │ └── index.vue │ │ ├── icon │ │ │ ├── index.vue │ │ │ └── icon.js │ │ ├── datePicker │ │ │ └── index.vue │ │ ├── drag │ │ │ └── index.vue │ │ ├── input │ │ │ └── index.vue │ │ ├── checkbox │ │ │ └── index.vue │ │ ├── calendar │ │ │ └── index.vue │ │ ├── table │ │ │ └── index.vue │ │ ├── message │ │ │ └── index.vue │ │ ├── form │ │ │ └── index.vue │ │ ├── switch │ │ │ └── index.vue │ │ ├── badge │ │ │ └── index.vue │ │ └── notice │ │ │ └── index.vue │ ├── router │ │ ├── index.js │ │ └── routeTemp.js │ ├── style │ │ ├── highlight.less │ │ ├── nprogress.css │ │ ├── tag.less │ │ └── index.less │ └── App.vue ├── package │ ├── theme │ │ ├── fonts │ │ │ ├── feather.eot │ │ │ ├── feather.ttf │ │ │ └── feather.woff │ │ ├── base.less │ │ ├── drag.less │ │ ├── transition.less │ │ ├── badge.less │ │ ├── message.less │ │ ├── table.less │ │ ├── form.less │ │ ├── menu.less │ │ ├── notice.less │ │ ├── datepicker.less │ │ ├── calendar.less │ │ ├── grid.less │ │ ├── switch.less │ │ ├── style.less │ │ ├── input.less │ │ └── checkbox.less │ ├── Icon │ │ ├── index.js │ │ └── icon.vue │ ├── Badge │ │ ├── index.js │ │ └── badge.vue │ ├── Input │ │ ├── index.js │ │ └── input.vue │ ├── Calendar │ │ ├── index.js │ │ ├── calendar-day.vue │ │ └── calendar.vue │ ├── Switch │ │ ├── index.js │ │ └── switch.vue │ ├── Table │ │ ├── index.js │ │ └── table.vue │ ├── Datepicker │ │ ├── index.js │ │ └── datepicker.vue │ ├── Button │ │ ├── button-group.vue │ │ ├── index.js │ │ └── button.vue │ ├── Grid │ │ ├── index.js │ │ ├── row.vue │ │ └── col.vue │ ├── Drag │ │ ├── index.js │ │ ├── drag.vue │ │ └── drag-group.vue │ ├── Form │ │ ├── index.js │ │ ├── form.vue │ │ └── form-item.vue │ ├── Checkbox │ │ ├── index.js │ │ ├── checkbox-group.vue │ │ └── checkbox.vue │ ├── Select │ │ ├── index.js │ │ ├── option-group.vue │ │ ├── option.vue │ │ └── select.vue │ ├── utils │ │ ├── install.js │ │ ├── collision.js │ │ ├── dom.js │ │ ├── create.js │ │ ├── data-type.js │ │ └── emit.js │ ├── Menu │ │ ├── index.js │ │ ├── menu-group.vue │ │ ├── menu-item.vue │ │ ├── menu.vue │ │ └── submenu.vue │ ├── Message │ │ ├── index.js │ │ └── message.vue │ ├── Notice │ │ ├── index.js │ │ └── notice.vue │ ├── index.js │ └── transition │ │ └── slider.vue └── main.js ├── .gitattributes ├── vue.config.js ├── .gitignore ├── README.md └── package.json /babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | '@vue/app' 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /docs/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yanghuanrong/RelaxUI/HEAD/docs/favicon.ico -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yanghuanrong/RelaxUI/HEAD/public/favicon.ico -------------------------------------------------------------------------------- /src/docs/assets/01.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yanghuanrong/RelaxUI/HEAD/src/docs/assets/01.png -------------------------------------------------------------------------------- /src/docs/assets/02.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yanghuanrong/RelaxUI/HEAD/src/docs/assets/02.png -------------------------------------------------------------------------------- /src/docs/assets/03.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yanghuanrong/RelaxUI/HEAD/src/docs/assets/03.png -------------------------------------------------------------------------------- /src/docs/assets/04.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yanghuanrong/RelaxUI/HEAD/src/docs/assets/04.png -------------------------------------------------------------------------------- /docs/img/logo.d9b49529.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yanghuanrong/RelaxUI/HEAD/docs/img/logo.d9b49529.png -------------------------------------------------------------------------------- /src/docs/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yanghuanrong/RelaxUI/HEAD/src/docs/assets/logo.png -------------------------------------------------------------------------------- /src/docs/assets/logo.psd: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yanghuanrong/RelaxUI/HEAD/src/docs/assets/logo.psd -------------------------------------------------------------------------------- /.gitattributes: -------------------------------------------------------------------------------- 1 | *.js linguist-language=Vue 2 | *.css linguist-language=Vue 3 | *.html linguist-language=Vue 4 | -------------------------------------------------------------------------------- /docs/fonts/feather.5fad700a.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yanghuanrong/RelaxUI/HEAD/docs/fonts/feather.5fad700a.eot -------------------------------------------------------------------------------- /docs/fonts/feather.a940fe89.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yanghuanrong/RelaxUI/HEAD/docs/fonts/feather.a940fe89.ttf -------------------------------------------------------------------------------- /docs/fonts/feather.66cbb621.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yanghuanrong/RelaxUI/HEAD/docs/fonts/feather.66cbb621.woff -------------------------------------------------------------------------------- /src/package/theme/fonts/feather.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yanghuanrong/RelaxUI/HEAD/src/package/theme/fonts/feather.eot -------------------------------------------------------------------------------- /src/package/theme/fonts/feather.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yanghuanrong/RelaxUI/HEAD/src/package/theme/fonts/feather.ttf -------------------------------------------------------------------------------- /src/package/theme/fonts/feather.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yanghuanrong/RelaxUI/HEAD/src/package/theme/fonts/feather.woff -------------------------------------------------------------------------------- /src/docs/component/index.js: -------------------------------------------------------------------------------- 1 | import tag from './tag' 2 | 3 | export default { 4 | install (Vue) { 5 | Vue.component(tag.name, tag) 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /src/package/Icon/index.js: -------------------------------------------------------------------------------- 1 | import Element from './icon' 2 | 3 | Element.install = function (Vue) { 4 | Vue.component(Element.name, Element) 5 | } 6 | 7 | export default Element 8 | -------------------------------------------------------------------------------- /src/package/Badge/index.js: -------------------------------------------------------------------------------- 1 | import Element from './badge' 2 | 3 | Element.install = function (Vue) { 4 | Vue.component(Element.name, Element) 5 | } 6 | 7 | export default Element 8 | -------------------------------------------------------------------------------- /src/package/Input/index.js: -------------------------------------------------------------------------------- 1 | import Element from './input' 2 | 3 | Element.install = function (Vue) { 4 | Vue.component(Element.name, Element) 5 | } 6 | 7 | export default Element 8 | -------------------------------------------------------------------------------- /src/package/Calendar/index.js: -------------------------------------------------------------------------------- 1 | import Element from './calendar' 2 | 3 | Element.install = function (Vue) { 4 | Vue.component(Element.name, Element) 5 | } 6 | 7 | export default Element 8 | -------------------------------------------------------------------------------- /src/package/Switch/index.js: -------------------------------------------------------------------------------- 1 | import Element from './switch.vue' 2 | 3 | Element.install = function (Vue) { 4 | Vue.component(Element.name, Element) 5 | } 6 | 7 | export default Element 8 | -------------------------------------------------------------------------------- /src/package/Table/index.js: -------------------------------------------------------------------------------- 1 | import Element from './table.vue' 2 | 3 | Element.install = function (Vue) { 4 | Vue.component(Element.name, Element) 5 | } 6 | 7 | export default Element 8 | -------------------------------------------------------------------------------- /src/package/Datepicker/index.js: -------------------------------------------------------------------------------- 1 | import Element from './datepicker' 2 | 3 | Element.install = function (Vue) { 4 | Vue.component(Element.name, Element) 5 | } 6 | 7 | export default Element 8 | -------------------------------------------------------------------------------- /src/package/Button/button-group.vue: -------------------------------------------------------------------------------- 1 | 9 | -------------------------------------------------------------------------------- /src/package/Grid/index.js: -------------------------------------------------------------------------------- 1 | import { 2 | install 3 | } from '../utils/install' 4 | 5 | import Col from './col' 6 | import Row from './row' 7 | 8 | export default install({ 9 | Col, 10 | Row 11 | }) 12 | -------------------------------------------------------------------------------- /src/package/theme/base.less: -------------------------------------------------------------------------------- 1 | @default:#e3eaef; 2 | @success:#0acf97; 3 | @primary:#2d7bf4; 4 | @warning:#f9bc0b; 5 | @info:#4eb7eb; 6 | @danger:#f1556c; 7 | @white:#FFFFFF; 8 | @border:#d9e3e9; 9 | @text:#333; 10 | -------------------------------------------------------------------------------- /src/package/Icon/icon.vue: -------------------------------------------------------------------------------- 1 | 12 | -------------------------------------------------------------------------------- /src/package/Drag/index.js: -------------------------------------------------------------------------------- 1 | import { 2 | install 3 | } from '../utils/install' 4 | 5 | import Drag from './drag' 6 | import DragGroup from './drag-group' 7 | 8 | export default install({ 9 | Drag, 10 | DragGroup 11 | }) -------------------------------------------------------------------------------- /src/package/Form/index.js: -------------------------------------------------------------------------------- 1 | import { 2 | install 3 | } from '../utils/install' 4 | 5 | import Form from './form' 6 | import FormItem from './form-item' 7 | 8 | export default install({ 9 | Form, 10 | FormItem 11 | }) 12 | -------------------------------------------------------------------------------- /vue.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | devServer: { 3 | port: 1024, // 端口 4 | }, 5 | productionSourceMap: false, 6 | publicPath: './', 7 | outputDir: './docs', 8 | runtimeCompiler: true, 9 | lintOnSave: false 10 | } -------------------------------------------------------------------------------- /src/package/Button/index.js: -------------------------------------------------------------------------------- 1 | import { 2 | install 3 | } from '../utils/install' 4 | 5 | import Button from './button' 6 | import ButtonGroup from './button-group' 7 | 8 | export default install({ 9 | Button, 10 | ButtonGroup 11 | }) -------------------------------------------------------------------------------- /src/package/Checkbox/index.js: -------------------------------------------------------------------------------- 1 | import { 2 | install 3 | } from '../utils/install' 4 | 5 | import Checkbox from './checkbox' 6 | import CheckboxGroup from './checkbox-group' 7 | 8 | export default install({ 9 | Checkbox, 10 | CheckboxGroup 11 | }) 12 | -------------------------------------------------------------------------------- /src/package/Select/index.js: -------------------------------------------------------------------------------- 1 | import { 2 | install 3 | } from '../utils/install' 4 | 5 | import Select from './select' 6 | import Option from './option' 7 | import OptionGroup from './option-group' 8 | 9 | export default install({ 10 | Select, 11 | Option, 12 | OptionGroup 13 | }) 14 | -------------------------------------------------------------------------------- /src/package/utils/install.js: -------------------------------------------------------------------------------- 1 | export function install(components) { 2 | Object.keys(components).map((key) => { 3 | const component = components[key] 4 | component.install = function (Vue) { 5 | Vue.component(component.name, component) 6 | } 7 | }) 8 | 9 | return components 10 | } -------------------------------------------------------------------------------- /.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 | -------------------------------------------------------------------------------- /src/package/Menu/index.js: -------------------------------------------------------------------------------- 1 | import { 2 | install 3 | } from '../utils/install' 4 | 5 | import Menu from './menu' 6 | import MenuGroup from './menu-group' 7 | import MenuItem from './menu-item' 8 | import Submenu from './submenu' 9 | 10 | export default install({ 11 | Menu, 12 | MenuGroup, 13 | MenuItem, 14 | Submenu 15 | }) -------------------------------------------------------------------------------- /src/package/theme/drag.less: -------------------------------------------------------------------------------- 1 | .x-drag{ 2 | position: absolute; 3 | 4 | // &.x-drag-select{ 5 | // border: 1px solid #F00; 6 | // } 7 | } 8 | 9 | .x-drag-group{ 10 | position: relative; 11 | } 12 | 13 | .x-drag-multiple{ 14 | position: absolute; 15 | box-sizing: border-box; 16 | background: fade(@danger, 30%); 17 | } -------------------------------------------------------------------------------- /src/package/theme/transition.less: -------------------------------------------------------------------------------- 1 | .fade-up-enter-active,.fade-up-leave-active{ 2 | transition: all .2s ease; 3 | transform-origin: center top; 4 | } 5 | .fade-up-enter,.fade-up-leave-to{ 6 | opacity: 0; 7 | transform: scaleY(0); 8 | } 9 | 10 | .fade-enter-active, .fade-leave-active { 11 | transition: opacity .2s; 12 | } 13 | .fade-enter, .fade-leave-to{ 14 | opacity: 0; 15 | } 16 | -------------------------------------------------------------------------------- /src/package/utils/collision.js: -------------------------------------------------------------------------------- 1 | export function casks (obj1, obj2) { 2 | const L1 = obj1.x 3 | const T1 = obj1.y 4 | const R1 = L1 + obj1.w 5 | const B1 = T1 + obj1.h 6 | 7 | const L2 = obj2.x 8 | const T2 = obj2.y 9 | const R2 = L2 + obj2.w 10 | const B2 = T2 + obj2.h 11 | 12 | if (L1 >= R2 || T1 >= B2 || R1 <= L2 || B1 <= T2) { 13 | return false 14 | } 15 | return true 16 | } -------------------------------------------------------------------------------- /src/package/Menu/menu-group.vue: -------------------------------------------------------------------------------- 1 | 9 | 10 | 19 | -------------------------------------------------------------------------------- /src/package/utils/dom.js: -------------------------------------------------------------------------------- 1 | export const hasClass = (el, style) => { 2 | return new RegExp('\\b' + style + '\\b').test(el.className) 3 | } 4 | export const addClass = (el, style) => { 5 | if (!hasClass(el, style)) { 6 | el.className += ' ' + style 7 | } 8 | } 9 | export const delClass = (el, style) => { 10 | if (hasClass(el, style)) { 11 | el.className = el.className.replace(new RegExp('(?:^|\\s)' + style + '(?=\\s|$)'), '').replace(/^\s*|\s*$/g, '') 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /src/package/utils/create.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | 3 | /** 4 | * 將組件编译后追加至元素中，给组件添加remove方法 5 | * 6 | * @export 7 | * @param {*} component 8 | * @param {*} props 9 | * @param {*} el 10 | * @returns 11 | */ 12 | export default function (component, props, el) { 13 | const instance = new Vue({ 14 | render: h => h(component, {props}) 15 | }).$mount() 16 | 17 | let wrap = el || document.body 18 | wrap.appendChild(instance.$el) 19 | 20 | const comp = instance.$children[0] 21 | comp.remove = function () { 22 | wrap.removeChild(instance.$el) 23 | instance.$destroy() 24 | } 25 | return comp 26 | } -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | RelaxUI 9 | 10 | 11 | 14 |
15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /src/package/utils/data-type.js: -------------------------------------------------------------------------------- 1 | export const isObject = targe => Object.prototype.toString.call(targe) === '[object Object]' 2 | export const isNumber = targe => Object.prototype.toString.call(targe) === '[object Number]' 3 | export const isString = targe => Object.prototype.toString.call(targe) === '[object String]' 4 | export const isUndefined = targe => Object.prototype.toString.call(targe) === '[object Undefined]' 5 | export const isBoolean = targe => Object.prototype.toString.call(targe) === '[object Boolean]' 6 | export const isArray = targe => Object.prototype.toString.call(targe) === '[object Array]' 7 | export const isFunction = targe => Object.prototype.toString.call(targe) === '[object Function]' -------------------------------------------------------------------------------- /src/docs/view/home/jsonp.js: -------------------------------------------------------------------------------- 1 | export function jsonp (params) { 2 | if(!params.url) return 3 | if(!params.jsonp) return 4 | const callback = params.jsonpCallback || 'jsonpCallback' 5 | const body = document.getElementsByTagName('body')[0]; 6 | const script = document.createElement('script'); 7 | const url = params.url + '?' + params.jsonp + '=' + callback 8 | script.setAttribute('src', url); 9 | body.appendChild(script); 10 | 11 | return new Promise((resove, reject) => { 12 | try { 13 | window[callback] = function (res) { 14 | body.removeChild(script) 15 | resove(res) 16 | } 17 | } catch (error) { 18 | reject(error) 19 | } 20 | }) 21 | } 22 | -------------------------------------------------------------------------------- /src/package/Checkbox/checkbox-group.vue: -------------------------------------------------------------------------------- 1 | 31 | -------------------------------------------------------------------------------- /src/main.js: -------------------------------------------------------------------------------- 1 | // The Vue build version to load with the `import` command 2 | // (runtime-only or standalone) has been set in webpack.base.conf with an alias. 3 | import Vue from 'vue' 4 | import App from './docs/App' 5 | import router from './docs/router' 6 | import './docs/style/global.less' 7 | import ViewComponet from './docs/component' 8 | 9 | import Relax from './package' 10 | import './package/theme/style.less' 11 | 12 | import VueHighlightJS from 'vue-highlight.js' 13 | import 'vue-highlight.js/lib/allLanguages' 14 | Vue.config.productionTip = false 15 | 16 | Vue.use(Relax) 17 | Vue.use(ViewComponet) 18 | Vue.use(VueHighlightJS) 19 | 20 | new Vue({ 21 | router, 22 | render: h => h(App) 23 | }).$mount("#app") -------------------------------------------------------------------------------- /src/package/Calendar/calendar-day.vue: -------------------------------------------------------------------------------- 1 | 12 | 13 | -------------------------------------------------------------------------------- /src/docs/router/index.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import Router from 'vue-router' 3 | import NProgress from 'nprogress' 4 | import routeTemp from './routeTemp' 5 | import '@/docs/style/nprogress.css' 6 | 7 | Vue.use(Router) 8 | 9 | const routes = [{ 10 | path: '/', 11 | component: () => import('@/docs/view/home/index.vue') 12 | }] 13 | 14 | routeTemp.forEach((item) => { 15 | routes.push(...item.route) 16 | }) 17 | 18 | const router = new Router({ 19 | routes: routes, 20 | scrollBehavior() { 21 | return { 22 | x: 0, 23 | y: 0 24 | } 25 | } 26 | }) 27 | 28 | router.beforeEach((to, from, next) => { 29 | NProgress.start() 30 | next() 31 | }) 32 | 33 | router.afterEach(() => { 34 | NProgress.done() 35 | }) 36 | 37 | export default router -------------------------------------------------------------------------------- /src/package/Badge/badge.vue: -------------------------------------------------------------------------------- 1 | 9 | 10 | -------------------------------------------------------------------------------- /src/package/Message/index.js: -------------------------------------------------------------------------------- 1 | import Element from './message.vue' 2 | import create from '../utils/create' 3 | import { 4 | isString, 5 | isNumber 6 | } from '../utils/data-type' 7 | 8 | function messageCreate(content, type, duration) { 9 | if (!isString(content) && content == '') { 10 | return 11 | } 12 | 13 | let props = { 14 | content: content, 15 | type: type 16 | } 17 | 18 | if (isNumber(duration)) { 19 | props.duration = duration 20 | } 21 | 22 | const message = create(Element, props) 23 | message.$on('onClose', message.remove) 24 | 25 | return message.hide.bind(this) 26 | } 27 | 28 | const methods = Object.keys(Element.data().iconType) 29 | const Message = {} 30 | 31 | methods.forEach((key) => { 32 | Message[key] = (content, duration) => messageCreate(content, key, duration) 33 | }) 34 | 35 | export default Message -------------------------------------------------------------------------------- /src/docs/view/icon/index.vue: -------------------------------------------------------------------------------- 1 | 20 | 21 | 31 | -------------------------------------------------------------------------------- /src/package/Select/option-group.vue: -------------------------------------------------------------------------------- 1 | 13 | 14 | 39 | -------------------------------------------------------------------------------- /src/package/Notice/index.js: -------------------------------------------------------------------------------- 1 | import Element from './notice.vue' 2 | import create from '../utils/create' 3 | import { 4 | isObject 5 | } from '../utils/data-type' 6 | 7 | let NoticeWrap 8 | 9 | function createNoticeWrap() { 10 | const NoticeWrap = document.createElement('div') 11 | NoticeWrap.className = 'x-notice-wrap' 12 | document.body.appendChild(NoticeWrap) 13 | return NoticeWrap 14 | } 15 | 16 | function NoticeCreate(props, type) { 17 | if (!isObject(props) && !props.title) { 18 | return 19 | } 20 | props.type = type 21 | 22 | if (!NoticeWrap) { 23 | NoticeWrap = createNoticeWrap() 24 | } 25 | 26 | const notice = create(Element, props, NoticeWrap) 27 | notice.$on('onClose', notice.remove) 28 | 29 | } 30 | 31 | const methods = Object.keys(Element.data().iconType) 32 | 33 | const Notice = { 34 | open: (options) => NoticeCreate(options, 'open') 35 | } 36 | 37 | methods.forEach((key) => { 38 | Notice[key] = (options) => NoticeCreate(options, key) 39 | }) 40 | export default Notice -------------------------------------------------------------------------------- /src/package/utils/emit.js: -------------------------------------------------------------------------------- 1 | function broadcast (componentName, eventName, params) { 2 | this.$children.map(child => { 3 | const name = child.$options.name 4 | if (name === componentName) { 5 | child.$emit.apply(child, [eventName].concat(params)) 6 | } else { 7 | broadcast.apply(child, [componentName, eventName].concat([params])) 8 | } 9 | }) 10 | } 11 | 12 | export default { 13 | methods: { 14 | dispatch (componentName, eventName, params) { 15 | let parent = this.$parent || this.$root 16 | let name = parent.$options.name 17 | while (parent && (!name || name !== componentName)) { 18 | parent = parent.$parent 19 | if (parent) { 20 | name = parent.$options.name 21 | } 22 | } 23 | if (parent) { 24 | parent.$emit.apply(parent, [eventName].concat(params)) 25 | } 26 | }, 27 | broadcast (componentName, eventName, params) { 28 | broadcast.call(this, componentName, eventName, params) 29 | } 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /src/package/theme/badge.less: -------------------------------------------------------------------------------- 1 | .x-badge{ 2 | position: relative; 3 | display: inline-block; 4 | z-index: 10; 5 | 6 | .x-btn{ 7 | margin: 0; 8 | } 9 | 10 | .x-badge-num{ 11 | position: absolute; 12 | top: 0px; 13 | right: -10px; 14 | transform: translateY(-50%); 15 | 16 | border-radius: 10px; 17 | color: #fff; 18 | display: inline-block; 19 | font-size: 12px; 20 | height: 16px; 21 | line-height: 16px; 22 | padding: 0 6px; 23 | text-align: center; 24 | white-space: nowrap; 25 | 26 | &.x-badge-danger{ 27 | background-color: @danger; 28 | } 29 | &.x-badge-primary{ 30 | background-color: @primary; 31 | } 32 | &.x-badge-warning{ 33 | background-color: @warning; 34 | } 35 | &.x-badge-info{ 36 | background-color: @info; 37 | } 38 | &.x-badge-success{ 39 | background-color: @success; 40 | } 41 | 42 | &.x-badge-dot{ 43 | width: 8px; 44 | height: 8px; 45 | padding: 0; 46 | right: -5px; 47 | } 48 | } 49 | } -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # RelaxUI 2 | 3 | [![vue 2](https://img.shields.io/badge/vue-2-42b983.svg?style=flat-square)](https://vuejs.org) [![MIT Licence](https://badges.frapsoft.com/os/mit/mit.svg?v=103)](https://opensource.org/licenses/mit-license.php) [![Github All Releases](https://img.shields.io/github/downloads/atom/atom/total.svg?style=plastic)](https://www.npmjs.com/package/vue-relax-ui) [![Mozilla Add-on](https://img.shields.io/amo/stars/dustman.svg)](https://github.com/yanghuanrong/RelaxUI) 4 | 5 | 6 | ### 安装使用 7 | ``` bash 8 | npm i vue-relax-ui 9 | ``` 10 | 在`main.js`中引入 11 | ``` javascript 12 | import Vue from 'vue' 13 | import App from './App' 14 | import router from './router' 15 | import Relax from 'vue-relax-ui' 16 | import 'vue-relax-ui/src/package/theme/style.css' 17 | Vue.use(Relax) 18 | Vue.config.productionTip = false 19 | 20 | /* eslint-disable no-new */ 21 | new Vue({ 22 | el: '#app', 23 | router, 24 | components: { App }, 25 | template: '' 26 | }) 27 | ``` 28 | ### 组件文档 29 | [RelaxUI组件网址](https://yanghuanrong.github.io/RelaxUI/docs) 30 | 31 | 32 | ### 技术支持 33 | Rick团队 -------------------------------------------------------------------------------- /src/package/Menu/menu-item.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 47 | -------------------------------------------------------------------------------- /src/package/theme/message.less: -------------------------------------------------------------------------------- 1 | .x-message{ 2 | font-size: 14px; 3 | position: fixed; 4 | z-index: 1010; 5 | top: 16px; 6 | left: 50%; 7 | background-color: #FFF; 8 | box-shadow: 0 4px 10px fade(#000, 10%); 9 | padding: 5px 20px; 10 | border-radius: 3px; 11 | pointer-events: none; 12 | font-family: Arial, Helvetica, sans-serif; 13 | span{ 14 | font-size: 14px; 15 | position: relative; 16 | padding-left: 23px; 17 | display: block; 18 | } 19 | 20 | i[class^=x-icon]{ 21 | font-size: 16px; 22 | position: absolute; 23 | left: 0; 24 | top: -2px; 25 | 26 | &.loading{ 27 | color: @info; 28 | animation: rotating linear 1.5s infinite; 29 | transform-origin: center; 30 | } 31 | } 32 | } 33 | 34 | .message-move-enter-active,.message-move-leave-active{ 35 | transition: all .2s ease; 36 | transform-origin: center top; 37 | } 38 | .message-move-enter,.message-move-leave-to{ 39 | opacity: 0; 40 | transform: translateY(-100%); 41 | } 42 | 43 | @keyframes rotating { 44 | 0% { 45 | transform: rotate(0); 46 | } 47 | 48 | 100% { 49 | transform: rotate(360deg); 50 | } 51 | } -------------------------------------------------------------------------------- /src/package/Table/table.vue: -------------------------------------------------------------------------------- 1 | 25 | 49 | -------------------------------------------------------------------------------- /src/package/Message/message.vue: -------------------------------------------------------------------------------- 1 | 8 | 50 | -------------------------------------------------------------------------------- /src/package/Menu/menu.vue: -------------------------------------------------------------------------------- 1 | 55 | -------------------------------------------------------------------------------- /src/package/Menu/submenu.vue: -------------------------------------------------------------------------------- 1 | 14 | 15 | 50 | -------------------------------------------------------------------------------- /docs/js/chunk-2d0a54f5.20ecabe6.js: -------------------------------------------------------------------------------- 1 | (window["webpackJsonp"]=window["webpackJsonp"]||[]).push([["chunk-2d0a54f5"],{"09c9":function(e,t,a){"use strict";a.r(t);var l=function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[e._m(0),a("RelaxTag",{attrs:{name:"基础效果"}},[a("template",{slot:"temp"},[a("x-datepicker",{attrs:{placeholder:"选择日期"},model:{value:e.value,callback:function(t){e.value=t},expression:"value"}})],1),a("template",{slot:"desc"},[a("p",[e._v("选择的值："+e._s(e.value?e.value:"暂时没有选择日期"))])]),a("textarea",{attrs:{slot:"code"},slot:"code"},[e._v(" \n 52 | -------------------------------------------------------------------------------- /src/package/theme/table.less: -------------------------------------------------------------------------------- 1 | .x-table { 2 | overflow-x: auto; 3 | background: #fff; 4 | width: 100%; 5 | font-size: .28rem; 6 | table { 7 | table-layout: fixed; 8 | border-collapse: collapse; 9 | width: 100%; 10 | } 11 | &.border { 12 | border: 0.02rem solid #EFEFEF; 13 | border-radius: .08rem; 14 | } 15 | colgroup { 16 | display: table-column-group; 17 | } 18 | thead { 19 | tr { 20 | display: table-row; 21 | border-bottom: .02rem solid #EFEFEF; 22 | th { 23 | text-align: left; 24 | padding: 16px; 25 | background: #fafafa; 26 | box-sizing: border-box; 27 | word-break: break-all; 28 | } 29 | } 30 | } 31 | tbody { 32 | tr { 33 | display: table-row; 34 | border-bottom: 1px solid #EFEFEF; 35 | cursor: pointer; 36 | transition: background .5s; 37 | &:hover { 38 | background: rgba(24, 144, 255, 0.1); 39 | } 40 | td { 41 | padding: 16px; 42 | height: 100%; 43 | box-sizing: border-box; 44 | overflow-wrap: break-word; 45 | >div { 46 | height: 100%; 47 | display: flex; 48 | align-items: center; 49 | >a { 50 | text-decoration: none; 51 | color: #1890ff; 52 | } 53 | } 54 | } 55 | } 56 | } 57 | } -------------------------------------------------------------------------------- /src/package/theme/form.less: -------------------------------------------------------------------------------- 1 | .x-form { 2 | &.x-form-lable-right { 3 | .x-form-lable { 4 | text-align: right 5 | } 6 | } 7 | 8 | &.x-form-lable-left { 9 | .x-form-lable { 10 | text-align: left 11 | } 12 | } 13 | 14 | 15 | .x-form-item { 16 | display: flex; 17 | align-items: center; 18 | @h: 20px; 19 | margin-bottom: @h + 5px; 20 | 21 | .x-form-input-wrapper { 22 | padding: 0 10px; 23 | flex: 1; 24 | position: relative; 25 | 26 | &.x-form-input-wrapper__error{ 27 | .x-input{ 28 | border-color: @danger; 29 | 30 | &:focus{ 31 | box-shadow: 0 0 0 2px fade(@danger, 30%) 32 | } 33 | } 34 | } 35 | 36 | &.x-form-input-wrapper__success{ 37 | .x-input{ 38 | border-color: @success; 39 | 40 | &:focus{ 41 | box-shadow: 0 0 0 2px fade(@success, 30%) 42 | } 43 | } 44 | } 45 | 46 | .x-form-error-tips{ 47 | position: absolute; 48 | width: 100%; 49 | height: @h; 50 | bottom: -@h; 51 | color: @danger; 52 | } 53 | 54 | } 55 | 56 | .x-form-lable{ 57 | &.x-form-label-required::before{ 58 | content: "*"; 59 | color: @danger; 60 | margin-right: 5px; 61 | } 62 | } 63 | } 64 | } -------------------------------------------------------------------------------- /src/package/Checkbox/checkbox.vue: -------------------------------------------------------------------------------- 1 | 50 | -------------------------------------------------------------------------------- /src/package/Grid/row.vue: -------------------------------------------------------------------------------- 1 | 51 | -------------------------------------------------------------------------------- /src/docs/view/datePicker/index.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 40 | 41 | 50 | 51 | -------------------------------------------------------------------------------- /src/package/index.js: -------------------------------------------------------------------------------- 1 | import Button from './Button' 2 | import Menu from './Menu' 3 | import Icon from './Icon' 4 | import Input from './Input' 5 | import Grid from './Grid' 6 | import Checkbox from './Checkbox' 7 | import Datepicker from './Datepicker' 8 | import Calendar from './Calendar' 9 | import Select from './Select' 10 | import Switch from './Switch' 11 | import Message from './Message' 12 | import Notice from './Notice' 13 | import create from './utils/create' 14 | import Form from './Form' 15 | import Badge from './Badge' 16 | import Drag from './Drag' 17 | import Table from './Table' 18 | 19 | const components = { 20 | ...Button, 21 | ...Menu, 22 | ...Select, 23 | ...Grid, 24 | ...Checkbox, 25 | ...Form, 26 | ...Drag, 27 | Badge, 28 | Datepicker, 29 | Calendar, 30 | Icon, 31 | Switch, 32 | Input, 33 | Table 34 | } 35 | 36 | const install = (Vue) => { 37 | Object.keys(components).map((key) => { 38 | const component = components[key] 39 | Vue.component(component.name, component) 40 | }) 41 | 42 | Vue.prototype.$message = Message 43 | Vue.prototype.$notice = Notice 44 | Vue.prototype.$create = create 45 | } 46 | 47 | if (typeof window !== 'undefined' && window.Vue) { 48 | install(window.Vue) 49 | } 50 | 51 | const Relax = { 52 | install 53 | } 54 | 55 | Object.keys(components).map((key) => { 56 | const component = components[key] 57 | Relax[component.name] = component 58 | }) 59 | 60 | export default Relax -------------------------------------------------------------------------------- /docs/index.html: -------------------------------------------------------------------------------- 1 | RelaxUI
-------------------------------------------------------------------------------- /src/package/theme/menu.less: -------------------------------------------------------------------------------- 1 | .x-menu{ 2 | list-style: none; 3 | margin: 0; 4 | padding: 0; 5 | text-align: left; 6 | 7 | &.transition{ 8 | transition: height .4s ease; 9 | } 10 | 11 | &>.x-menu-item:hover{ 12 | background-color: fade(@primary,10%); 13 | transition: background-color .4s ease; 14 | } 15 | 16 | &>.x-menu-item{ 17 | cursor: pointer; 18 | display: block; 19 | padding: 12px 20px; 20 | color: #313a46; 21 | font-size: 14px; 22 | 23 | &>i[class*=re-icon-]{ 24 | margin-right: 5px; 25 | } 26 | 27 | &.active{ 28 | color: @primary; 29 | transition: color .4s ease; 30 | } 31 | 32 | & .x-menu-item{ 33 | padding: 8px 20px 8px 43px; 34 | font-size: 14px; 35 | } 36 | 37 | &.x-menu-group { 38 | padding: 0; 39 | } 40 | } 41 | 42 | .x-submenu { 43 | color: #313a46; 44 | 45 | &>.x-menu-title{ 46 | cursor: pointer; 47 | padding: 12px 20px; 48 | position: relative; 49 | 50 | &:hover{ 51 | background-color: fade(@primary,10%); 52 | transition: background-color .4s ease; 53 | } 54 | &>i[class*=re-icon-]{ 55 | margin-right: 5px; 56 | } 57 | } 58 | 59 | 60 | } 61 | 62 | .x-menu-group{ 63 | .x-menu-item; 64 | 65 | .x-menu-title{ 66 | font-size: 12px; 67 | position: relative; 68 | cursor: auto; 69 | color: #ccc; 70 | padding: 8px 20px 8px 43px; 71 | } 72 | } 73 | } 74 | -------------------------------------------------------------------------------- /src/docs/view/drag/index.vue: -------------------------------------------------------------------------------- 1 | 41 | 42 | 45 | 46 | 48 | -------------------------------------------------------------------------------- /src/docs/style/highlight.less: -------------------------------------------------------------------------------- 1 | /* Dracula Theme v1.2.5 2 | * 3 | * https://github.com/dracula/highlightjs 4 | * 5 | * Copyright 2016-present, All rights reserved 6 | * 7 | * Code licensed under the MIT license 8 | * 9 | * @author Denis Ciccale 10 | * @author Zeno Rocha 11 | */ 12 | 13 | .hljs { 14 | display: block; 15 | overflow-x: auto; 16 | padding: 0.5em; 17 | font-family: "Lucida Console", Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; 18 | } 19 | 20 | .hljs-built_in, 21 | .hljs-selector-tag, 22 | .hljs-section, 23 | .hljs-link { 24 | color: #8be9fd; 25 | } 26 | 27 | .hljs-keyword { 28 | color: #008dff; 29 | } 30 | 31 | .hljs, 32 | .hljs-subst { 33 | color: #666; 34 | } 35 | 36 | .hljs-tag{ 37 | color: #999; 38 | } 39 | 40 | .hljs-title { 41 | color: #50fa7b; 42 | } 43 | 44 | .hljs-meta, 45 | .hljs-name, 46 | .hljs-type, 47 | .hljs-symbol, 48 | .hljs-bullet, 49 | .hljs-addition, 50 | .hljs-variable, 51 | .hljs-template-tag, 52 | .hljs-template-variable { 53 | color: #f81d22; 54 | } 55 | 56 | .hljs-attr{ 57 | color: #0b8235; 58 | } 59 | .hljs-string{ 60 | color: #008dff; 61 | } 62 | 63 | .hljs-comment, 64 | .hljs-quote, 65 | .hljs-deletion { 66 | color: #6272a4; 67 | } 68 | 69 | // .hljs-keyword, 70 | // .hljs-selector-tag, 71 | // .hljs-literal, 72 | // .hljs-title, 73 | // .hljs-section, 74 | // .hljs-doctag, 75 | // .hljs-type, 76 | // .hljs-name, 77 | // .hljs-strong { 78 | // font-weight: bold; 79 | // } 80 | 81 | .hljs-literal, 82 | .hljs-number { 83 | color: #bd93f9; 84 | } 85 | 86 | .hljs-emphasis { 87 | font-style: italic; 88 | } 89 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "relax-demo", 3 | "version": "1.0.0", 4 | "description": "relax-vue", 5 | "author": "npm.yanghuanrong", 6 | "scripts": { 7 | "serve": "vue-cli-service serve", 8 | "build": "vue-cli-service build", 9 | "lint": "vue-cli-service lint" 10 | }, 11 | "dependencies": { 12 | "async-validator": "^1.11.2", 13 | "core-js": "^2.6.5", 14 | "highlight.js": "^9.15.6", 15 | "js-cookie": "^2.2.0", 16 | "nprogress": "^0.2.0", 17 | "vue": "^2.6.10", 18 | "vue-highlight.js": "^3.1.0", 19 | "vue-router": "^3.0.3" 20 | }, 21 | "devDependencies": { 22 | "@vue/cli-plugin-babel": "^3.7.0", 23 | "@vue/cli-plugin-eslint": "^3.7.0", 24 | "@vue/cli-service": "^3.7.0", 25 | "babel-eslint": "^10.0.1", 26 | "eslint": "^5.16.0", 27 | "eslint-plugin-vue": "^5.0.0", 28 | "less": "^3.0.4", 29 | "less-loader": "^4.1.0", 30 | "lint-staged": "^8.1.5", 31 | "vue-template-compiler": "^2.5.21" 32 | }, 33 | "eslintConfig": { 34 | "root": true, 35 | "env": { 36 | "node": true 37 | }, 38 | "extends": [ 39 | "plugin:vue/essential", 40 | "eslint:recommended" 41 | ], 42 | "rules": {}, 43 | "parserOptions": { 44 | "parser": "babel-eslint" 45 | } 46 | }, 47 | "postcss": { 48 | "plugins": { 49 | "autoprefixer": {} 50 | } 51 | }, 52 | "browserslist": [ 53 | "> 1%", 54 | "last 2 versions" 55 | ], 56 | "keywords": [ 57 | "vue-realx", 58 | "relax" 59 | ], 60 | "license": "ISC", 61 | "lint-staged": { 62 | "*.{js,vue}": [ 63 | "vue-cli-service lint", 64 | "git add" 65 | ] 66 | } 67 | } 68 | -------------------------------------------------------------------------------- /src/package/Form/form.vue: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/package/Grid/col.vue: -------------------------------------------------------------------------------- 1 | 62 | -------------------------------------------------------------------------------- /src/docs/style/nprogress.css: -------------------------------------------------------------------------------- 1 | /* Make clicks pass-through */ 2 | #nprogress { 3 | pointer-events: none; 4 | } 5 | 6 | #nprogress .bar { 7 | background: #f1556c; 8 | 9 | position: fixed; 10 | z-index: 1031; 11 | top: 0; 12 | left: 0; 13 | 14 | width: 100%; 15 | height: 2px; 16 | } 17 | 18 | /* Fancy blur effect */ 19 | #nprogress .peg { 20 | display: block; 21 | position: absolute; 22 | right: 0px; 23 | width: 100px; 24 | height: 100%; 25 | box-shadow: 0 0 10px #f1556c, 0 0 5px #f1556c; 26 | opacity: 1.0; 27 | 28 | -webkit-transform: rotate(3deg) translate(0px, -4px); 29 | -ms-transform: rotate(3deg) translate(0px, -4px); 30 | transform: rotate(3deg) translate(0px, -4px); 31 | } 32 | 33 | /* Remove these to get rid of the spinner */ 34 | #nprogress .spinner { 35 | display: block; 36 | position: fixed; 37 | z-index: 1031; 38 | top: 15px; 39 | right: 15px; 40 | } 41 | 42 | #nprogress .spinner-icon { 43 | width: 18px; 44 | height: 18px; 45 | box-sizing: border-box; 46 | 47 | border: solid 2px transparent; 48 | border-top-color: #FFF; 49 | border-left-color: #FFF; 50 | border-radius: 50%; 51 | 52 | -webkit-animation: nprogress-spinner 400ms linear infinite; 53 | animation: nprogress-spinner 400ms linear infinite; 54 | } 55 | 56 | .nprogress-custom-parent { 57 | overflow: hidden; 58 | position: relative; 59 | } 60 | 61 | .nprogress-custom-parent #nprogress .spinner, 62 | .nprogress-custom-parent #nprogress .bar { 63 | position: absolute; 64 | } 65 | 66 | @-webkit-keyframes nprogress-spinner { 67 | 0% { -webkit-transform: rotate(0deg); } 68 | 100% { -webkit-transform: rotate(360deg); } 69 | } 70 | @keyframes nprogress-spinner { 71 | 0% { transform: rotate(0deg); } 72 | 100% { transform: rotate(360deg); } 73 | } 74 | -------------------------------------------------------------------------------- /src/package/theme/notice.less: -------------------------------------------------------------------------------- 1 | .x-notice-wrap{ 2 | position: fixed; 3 | z-index: 1000; 4 | top: 24px; 5 | right: 40px; 6 | bottom: auto; 7 | 8 | .x-notice-content-rect{ 9 | padding: 10px 24px; 10 | border-radius: 4px; 11 | box-shadow: 0 4px 10px fade(#000, 10%); 12 | background: #fff; 13 | line-height: 1.5; 14 | margin-bottom: 16px; 15 | overflow: hidden; 16 | width: 360px; 17 | position: relative; 18 | 19 | .x-notice-content{ 20 | position: relative; 21 | } 22 | 23 | .x-notice-icon{ 24 | position: absolute; 25 | left: 0; 26 | top: -2px; 27 | font-size: 18px; 28 | 29 | &+.x-notice-title{ 30 | margin-left: 30px; 31 | 32 | &+.x-notice-description{ 33 | margin-left: 30px; 34 | } 35 | } 36 | } 37 | 38 | .x-notice-title{ 39 | font-size: 14px; 40 | color: #333; 41 | } 42 | 43 | .x-notice-description{ 44 | font-size: 12px; 45 | color: #666; 46 | margin-top: 5px; 47 | line-height: 20px; 48 | } 49 | 50 | .x-notice-close{ 51 | position: absolute; 52 | right: 0; 53 | top: 0; 54 | color: #999; 55 | cursor: pointer; 56 | transition: color .2s; 57 | font-size: 14px; 58 | 59 | &:hover{ 60 | color: #666; 61 | text-shadow: 0 0 12px fade(#000, 15%); 62 | } 63 | } 64 | } 65 | } 66 | 67 | .notice-move-enter-active,.notice-move-leave-active{ 68 | transition: all .2s ease; 69 | transform-origin: center top; 70 | } 71 | 72 | .notice-move-enter{ 73 | opacity: 0; 74 | transform: translateX(20%); 75 | } 76 | 77 | .notice-move-enter-to{ 78 | transform: translateX(0); 79 | } 80 | 81 | .notice-move-leave-to{ 82 | opacity: 0; 83 | height: 0; 84 | } 85 | 86 | -------------------------------------------------------------------------------- /src/package/theme/datepicker.less: -------------------------------------------------------------------------------- 1 | .x-datepicker { 2 | width: 220px; 3 | position: relative; 4 | 5 | .x-picker { 6 | width: 280px; 7 | padding: 10px 15px; 8 | box-shadow: 0 2px 8px fade(#000, 10%); 9 | border-radius: 5px; 10 | position: absolute; 11 | top: 37px; 12 | left: 0; 13 | background: #fff; 14 | z-index: 999; 15 | } 16 | 17 | .x-picker_header { 18 | text-align: center; 19 | line-height: 30px; 20 | padding-bottom: 10px; 21 | } 22 | 23 | .x-picker_week { 24 | width: 100%; 25 | } 26 | 27 | .x-picker_week li { 28 | float: left; 29 | width: calc(100% / 7); 30 | list-style: none; 31 | text-align: center; 32 | margin-bottom: 5px; 33 | } 34 | 35 | .x-btn-prve { 36 | float: left; 37 | font-size: 20px; 38 | } 39 | 40 | .x-btn-next { 41 | float: right; 42 | font-size: 20px; 43 | } 44 | .x-picker_day{ 45 | display: flex; 46 | flex-wrap: wrap; 47 | li { 48 | list-style: none; 49 | width: calc(100% / 7); 50 | text-align: center; 51 | line-height: calc(248px / 7); 52 | height: calc(248px / 7); 53 | display: flex; 54 | justify-content: center; 55 | align-items: center; 56 | cursor: pointer; 57 | 58 | &.today { 59 | color: @primary; 60 | font-weight: 700; 61 | } 62 | &.Prev,&.Next{ 63 | color: @border; 64 | } 65 | &.active{ 66 | span{ 67 | background: @primary; 68 | color: #FFF; 69 | } 70 | } 71 | span{ 72 | width: 24px; 73 | line-height: 2; 74 | margin: 0 auto; 75 | height: 24px; 76 | display: block; 77 | border-radius: 100%; 78 | text-align: center; 79 | } 80 | 81 | } 82 | } 83 | } -------------------------------------------------------------------------------- /docs/js/chunk-fc6d75d2.143f1bd6.js: -------------------------------------------------------------------------------- 1 | (window["webpackJsonp"]=window["webpackJsonp"]||[]).push([["chunk-fc6d75d2"],{"3a96":function(t,e,a){"use strict";var n=function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[t._m(0),a("div",{staticClass:"components-button-demo"},[a("RelaxTag",{attrs:{name:"拖拽"}},[a("template",{slot:"temp"},[a("x-dragGroup",{staticStyle:{height:"500px",background:"#efefef"},attrs:{multiple:""}},[a("x-drag",[a("div",{staticStyle:{width:"40px",height:"40px",background:"#000"}})]),a("x-drag",[a("div",{staticStyle:{width:"50px",height:"50px",background:"blue"}})])],1)],1),a("template",{slot:"desc"}),a("textarea",{attrs:{slot:"code"},slot:"code"},[t._v(' \n ')])],2)],1)])},i=[function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"topbar"},[a("div",{staticClass:"page-title-box"},[a("h4",{staticClass:"page-title"},[t._v("Drag 拖拽")]),a("p",{staticClass:"page-title-decs"},[t._v("在范围内可拖动的元素")])])])}];a.d(e,"a",function(){return n}),a.d(e,"b",function(){return i})},5689:function(t,e,a){"use strict";a.r(e);var n=a("924f"),i=a.n(n);for(var r in n)"default"!==r&&function(t){a.d(e,t,function(){return n[t]})}(r);e["default"]=i.a},"924f":function(t,e){},d53d:function(t,e,a){"use strict";a.r(e);var n=a("3a96"),i=a("5689");for(var r in i)"default"!==r&&function(t){a.d(e,t,function(){return i[t]})}(r);var d=a("2877"),s=Object(d["a"])(i["default"],n["a"],n["b"],!1,null,"48d5f280",null);e["default"]=s.exports}}]); -------------------------------------------------------------------------------- /src/package/theme/calendar.less: -------------------------------------------------------------------------------- 1 | .x-calendar { 2 | width: 100%; 3 | padding: 15px; 4 | } 5 | .x-calendar_header { 6 | text-align: center; 7 | line-height: 30px; 8 | margin-bottom: 20px; 9 | display: flex; 10 | justify-content: space-between; 11 | padding-bottom: 10px; 12 | align-items: center; 13 | 14 | .x-calendar_header__title{ 15 | font-size: 16px; 16 | } 17 | } 18 | 19 | .x-calendar_week { 20 | width: 100%; 21 | margin-bottom: 10px; 22 | font-size: 16px; 23 | 24 | li{ 25 | float: left; 26 | width: calc(100% / 7); 27 | list-style: none; 28 | padding: 0 10px; 29 | } 30 | } 31 | 32 | .x-calendar_month li{ 33 | list-style: none; 34 | float: left; 35 | text-align: center; 36 | width: calc(100% / 7); 37 | padding:0px 5px; 38 | 39 | &.today{ 40 | .x-calendar_day{ 41 | border-color: @primary; 42 | } 43 | } 44 | &.Prev,&.Next{ 45 | color: @border; 46 | } 47 | &.active{ 48 | .x-calendar_day{ 49 | background: fade(@primary, 10%); 50 | 51 | .x-calendar_day__value p:nth-of-type(1){ 52 | color: @primary; 53 | } 54 | } 55 | } 56 | 57 | .x-calendar_day{ 58 | border-top: 2px solid @border; 59 | position: relative; 60 | cursor: pointer; 61 | transition: .2s; 62 | 63 | .x-calendar_day__value{ 64 | padding: 5px 5px; 65 | display: flex; 66 | justify-content: space-between; 67 | align-items: center; 68 | 69 | p:nth-of-type(1){ 70 | font-size: 14px 71 | } 72 | p:nth-of-type(2){ 73 | color: @border; 74 | } 75 | } 76 | .x-calendar_day__content{ 77 | height: 65px; 78 | text-align: left; 79 | overflow-y: auto; 80 | margin: 0 5px; 81 | } 82 | } 83 | } 84 | 85 | 86 | .x-clearfix:after{ 87 | content: ''; 88 | display: block; 89 | clear: both; 90 | } -------------------------------------------------------------------------------- /src/package/Button/button.vue: -------------------------------------------------------------------------------- 1 | 70 | -------------------------------------------------------------------------------- /src/package/theme/grid.less: -------------------------------------------------------------------------------- 1 | .x-col(@index, @type, @num) when (@index > 0) { 2 | .x-col(@index - 1, @type, @num); 3 | 4 | .x-col-@{type}-@{index} { 5 | width: 100% / @num * @index; 6 | float: left; 7 | } 8 | } 9 | 10 | .x-col-offset(@type,@index) when (@index > 0) { 11 | .x-col-offset(@type,@index - 1); 12 | 13 | .x-col-offset-@{type}-@{index} { 14 | margin-left: 100% / 24 * @index; 15 | } 16 | } 17 | 18 | .x-col-order(@index) when (@index > 0) { 19 | .x-col-order(@index - 1); 20 | 21 | .x-col-order-@{index} { 22 | order: @index; 23 | } 24 | } 25 | 26 | .x-row-flex { 27 | display: flex; 28 | flex-wrap: wrap; 29 | 30 | &.x-row-flex-justify-start { 31 | justify-content: flex-start; 32 | } 33 | 34 | &.x-row-flex-justify-center { 35 | justify-content: center; 36 | } 37 | 38 | &.x-row-flex-justify-end { 39 | justify-content: flex-end; 40 | } 41 | 42 | &.x-row-flex-justify-space-between { 43 | justify-content: space-between; 44 | } 45 | 46 | &.x-row-flex-justify-space-around { 47 | justify-content: space-around; 48 | } 49 | 50 | &.x-row-flex-align-top { 51 | align-items: flex-start; 52 | } 53 | 54 | &.x-row-flex-align-center { 55 | align-items: center; 56 | } 57 | 58 | &.x-row-flex-align-bottom { 59 | align-items: flex-end; 60 | } 61 | 62 | .x-col-order(24) 63 | } 64 | 65 | .x-row { 66 | &::after { 67 | content: ""; 68 | display: block; 69 | clear: both; 70 | } 71 | } 72 | 73 | .x-col(24,sp,24); 74 | .x-col-offset(sp,23); 75 | 76 | @media (min-width: 576px) { 77 | .x-col(24,xs,24); 78 | .x-col-offset(xs,23); 79 | } 80 | 81 | @media (min-width: 768px) { 82 | .x-col(24,sm,24); 83 | .x-col-offset(sm,23); 84 | } 85 | 86 | @media (min-width: 992px) { 87 | .x-col(24,md,24); 88 | .x-col-offset(md,23); 89 | } 90 | 91 | @media (min-width: 1200px) { 92 | .x-col(24,lg,24); 93 | .x-col-offset(lg,23); 94 | } 95 | -------------------------------------------------------------------------------- /src/package/theme/switch.less: -------------------------------------------------------------------------------- 1 | .x-switch { 2 | min-width: 44px; 3 | height: 22px; 4 | position: relative; 5 | border: none; 6 | border-radius: 20px; 7 | display: inline-block; 8 | cursor: pointer; 9 | outline: none; 10 | transition: background-color .3s; 11 | 12 | &::before{ 13 | content: ""; 14 | width: 16px; 15 | height: 16px; 16 | position: absolute; 17 | top: 3px; 18 | left: 3px; 19 | border-radius: 20px; 20 | background-color: #fff; 21 | transform: translateX(0); 22 | transition: .3s; 23 | } 24 | 25 | &.x-switch-checked{ 26 | &.x-switch-primary{ 27 | background-color: @primary; 28 | } 29 | &.x-switch-info{ 30 | background-color: @info; 31 | } 32 | &.x-switch-danger{ 33 | background-color: @danger; 34 | } 35 | &.x-switch-success{ 36 | background-color: @success; 37 | } 38 | 39 | &.x-switch-disabled{ 40 | &.x-switch-primary{ 41 | background-color: fade(@primary, 20%); 42 | } 43 | &.x-switch-info{ 44 | background-color: fade(@info, 20%); 45 | } 46 | &.x-switch-danger{ 47 | background-color: fade(@danger, 20%); 48 | } 49 | &.x-switch-success{ 50 | background-color: fade(@success, 20%); 51 | } 52 | 53 | &::before{ 54 | background-color: #FFF; 55 | } 56 | } 57 | 58 | &::before{ 59 | left: 100%; 60 | margin-left: -3px; 61 | transform: translateX(-100%) 62 | } 63 | 64 | .x-switch-inner{ 65 | text-align: left; 66 | padding-right: 25px; 67 | padding-left: 8px; 68 | } 69 | } 70 | 71 | &:active::before{ 72 | width: 21px; 73 | } 74 | 75 | &.x-switch-disabled{ 76 | cursor: not-allowed; 77 | background-color: #efefef; 78 | 79 | &::before{ 80 | background-color: #ccc; 81 | } 82 | } 83 | 84 | .x-switch-inner{ 85 | width: 100%; 86 | display: block; 87 | padding-right: 8px; 88 | padding-left: 25px; 89 | text-align: right; 90 | color: #FFF; 91 | font-size: 12px; 92 | } 93 | } 94 | 95 | -------------------------------------------------------------------------------- /src/package/Select/option.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | 85 | -------------------------------------------------------------------------------- /src/package/theme/style.less: -------------------------------------------------------------------------------- 1 | body{ 2 | margin: 0; 3 | overflow-x: hidden; 4 | font-size: 12px; 5 | font-family: "Roboto", sans-serif; 6 | font-weight: 400; 7 | line-height: 1.5; 8 | color: #212529; 9 | } 10 | 11 | textarea,input{ 12 | font-family: "Roboto", sans-serif; 13 | } 14 | 15 | * { 16 | outline: none !important; 17 | } 18 | 19 | *, ::after, ::before { 20 | box-sizing: border-box; 21 | } 22 | 23 | html { 24 | box-sizing: border-box; 25 | -ms-overflow-style: scrollbar; 26 | } 27 | 28 | html{ 29 | font-family: Lato,sans-serif; 30 | font-size: 12px; 31 | line-height: 1.5; 32 | -webkit-text-size-adjust: 100%; 33 | -ms-text-size-adjust: 100%; 34 | text-size-adjust: 100%; 35 | } 36 | 37 | @import "base"; 38 | @import "icon"; 39 | @import "button"; 40 | @import "menu"; 41 | @import "grid"; 42 | @import "input"; 43 | @import "checkbox"; 44 | @import "calendar"; 45 | @import "select"; 46 | @import "message"; 47 | @import "notice"; 48 | @import "switch"; 49 | @import "datepicker"; 50 | @import "form"; 51 | @import "badge"; 52 | @import "drag"; 53 | @import "transition"; 54 | @import "table"; 55 | 56 | .info{ 57 | color: @primary; 58 | } 59 | 60 | .error{ 61 | color: @danger; 62 | } 63 | 64 | .success{ 65 | color: @success; 66 | } 67 | 68 | .warning{ 69 | color: @warning; 70 | } 71 | 72 | 73 | i.x-arrow{ 74 | position: absolute; 75 | right: 0; 76 | width: 10px; 77 | height: 10px; 78 | top: 50%; 79 | transform: translateY(-50%); 80 | right: 20px; 81 | @color:#ccc; 82 | 83 | &::after,&::before { 84 | content: ""; 85 | position: absolute; 86 | width:1px; 87 | height: 7px; 88 | background-color: @color; 89 | left: 4px; 90 | top: 7px; 91 | transform-origin: top center; 92 | transition: all .2s ease 93 | } 94 | 95 | &::after{ 96 | transform: rotate(135deg); 97 | } 98 | &::before{ 99 | transform: rotate(-135deg); 100 | } 101 | 102 | &.is-active{ 103 | &::after{ 104 | top: 2px; 105 | transform: rotate(45deg); 106 | } 107 | &::before{ 108 | top: 2px; 109 | transform: rotate(-45deg); 110 | } 111 | } 112 | } 113 | -------------------------------------------------------------------------------- /docs/js/chunk-2d0e2c78.65abd4f6.js: -------------------------------------------------------------------------------- 1 | (window["webpackJsonp"]=window["webpackJsonp"]||[]).push([["chunk-2d0e2c78"],{"7fc6":function(t,e,a){"use strict";a.r(e);var l=function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[t._m(0),a("RelaxTag",{attrs:{name:"基本使用"}},[a("template",{slot:"temp"},[a("x-input",{staticStyle:{width:"300px"},attrs:{placeholder:"请输入"}})],1),a("template",{slot:"desc"},[t._v("\n 基本用法，可以使用 v-model 实现数据的双向绑定。 "),a("br"),t._v("\n 可以直接设置 style 来改变输入框的宽度，默认 100%。\n ")]),a("textarea",{attrs:{slot:"code"},slot:"code"},[t._v(' \n -------------------------------------------------------------------------------- /src/docs/component/tag.vue: -------------------------------------------------------------------------------- 1 | 32 | 33 | 84 | -------------------------------------------------------------------------------- /src/package/theme/input.less: -------------------------------------------------------------------------------- 1 | .x-input-group{ 2 | width: 100%; 3 | display: flex; 4 | align-items: center; 5 | font-size: 12px; 6 | 7 | .x-from-input{ 8 | position: relative; 9 | width:100%; 10 | 11 | .icon{ 12 | position: absolute; 13 | height: 100%; 14 | top: 0; 15 | width: 30px; 16 | align-items: center; 17 | justify-content: center; 18 | display: flex; 19 | 20 | i{ 21 | transition: all 0.25s ease-in-out; 22 | color: @border; 23 | } 24 | } 25 | .x-icon-path-affter { 26 | .icon; 27 | right: 1px; 28 | } 29 | .x-icon-path-before { 30 | .icon; 31 | left: 1px; 32 | } 33 | .x-clearable{ 34 | .icon; 35 | right: 0; 36 | cursor: pointer; 37 | 38 | &:hover{ 39 | i{ 40 | color: darken(@border, 20%); 41 | } 42 | } 43 | } 44 | } 45 | .x-from-textarea{ 46 | position: relative; 47 | width: 100%; 48 | 49 | .x-textarea{ 50 | padding: 8px 10px; 51 | } 52 | .x-textarea-maxlength{ 53 | position: absolute; 54 | left: 10px; 55 | bottom: 10px; 56 | font-size: 12px; 57 | color: @border; 58 | } 59 | } 60 | } 61 | 62 | ::-ms-clear,::-ms-reveal{display:none;} 63 | 64 | .x-input,.x-textarea{ 65 | padding: 7px 25px 7px 10px; 66 | resize: none; 67 | border: 1px solid @border; 68 | border-radius: 4px; 69 | max-width: 100%; 70 | font-size: 12px; 71 | transition: all 0.25s ease-in-out; 72 | color: @text; 73 | max-width: 100%; 74 | width: 100%; 75 | 76 | &.x-input-lg{ 77 | padding: 12px 30px 12px 15px; 78 | font-size: 14px; 79 | } 80 | 81 | &.x-input-sm{ 82 | padding: 4px 20px 4px 6px; 83 | font-size: 12px; 84 | } 85 | 86 | 87 | &.x-input-icon-before{ 88 | padding-left: 30px !important; 89 | } 90 | 91 | &:disabled { 92 | cursor: no-drop; 93 | background: #efefef; 94 | color: fade(#333, 30%); 95 | 96 | &:hover{ 97 | border-color: @border; 98 | } 99 | } 100 | &:hover{ 101 | border-color: @primary; 102 | } 103 | &:focus,&.is-focus{ 104 | border-color: @primary; 105 | box-shadow: 0 0 0 2px fade(@primary, 30%); 106 | 107 | &::placeholder { 108 | color: fade(@border, 40%); 109 | } 110 | } 111 | 112 | &::placeholder { 113 | color: @border; 114 | } 115 | } 116 | -------------------------------------------------------------------------------- /src/package/Notice/notice.vue: -------------------------------------------------------------------------------- 1 | 18 | 85 | -------------------------------------------------------------------------------- /src/package/transition/slider.vue: -------------------------------------------------------------------------------- 1 | 82 | -------------------------------------------------------------------------------- /docs/js/chunk-2d21d4e0.b71bc97c.js: -------------------------------------------------------------------------------- 1 | (window["webpackJsonp"]=window["webpackJsonp"]||[]).push([["chunk-2d21d4e0"],{d174:function(t,e,a){"use strict";a.r(e);var l=function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[t._m(0),a("RelaxTag",{attrs:{name:"基础效果"}},[a("template",{slot:"temp"},[a("x-calendar",{scopedSlots:t._u([{key:"default",fn:function(e){var l=e.date,n=e.data;return["2019-10-31"===n.day?a("p",{staticStyle:{color:"green"}},[t._v("生日")]):t._e(),15===l?a("p",{staticStyle:{color:"red"}},[t._v("月中旬")]):t._e()]}}]),model:{value:t.value,callback:function(e){t.value=e},expression:"value"}})],1),a("template",{slot:"desc"},[a("p",[t._v("选择的值："+t._s(t.value?t.value:"暂时没有选择日期"))])]),a("textarea",{attrs:{slot:"code"},slot:"code"},[t._v(' \n 104 | -------------------------------------------------------------------------------- /src/docs/view/input/index.vue: -------------------------------------------------------------------------------- 1 | 66 | 67 | 76 | 77 | -------------------------------------------------------------------------------- /docs/js/chunk-2d0b38aa.25bc8296.js: -------------------------------------------------------------------------------- 1 | (window["webpackJsonp"]=window["webpackJsonp"]||[]).push([["chunk-2d0b38aa"],{"298e":function(e,t,c){"use strict";c.r(t);var a=function(){var e=this,t=e.$createElement,c=e._self._c||t;return c("div",[e._m(0),c("div",{staticClass:"components-select-demo"},[c("RelaxTag",{attrs:{name:"基本用法"}},[c("template",{slot:"temp"},[c("x-checkbox",{attrs:{label:"Checkbox"},model:{value:e.checked,callback:function(t){e.checked=t},expression:"checked"}})],1),c("template",{slot:"desc"},[e._v("最简单的使用")]),c("textarea",{attrs:{slot:"code"},slot:"code"},[e._v(' \n\n 31 | 32 | 33 | 34 | 35 | 39 | 40 | 46 | 47 | 48 | 49 | 59 | 60 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 96 | -------------------------------------------------------------------------------- /src/docs/router/routeTemp.js: -------------------------------------------------------------------------------- 1 | const component = [{ 2 | title: 'General', 3 | route: [{ 4 | path: '/button', 5 | meta: { 6 | text: 'Button 按钮' 7 | }, 8 | component: () => import('@/docs/view/button/index.vue') 9 | }, 10 | { 11 | path: '/icon', 12 | meta: { 13 | text: 'Icon 图标' 14 | }, 15 | component: () => import('@/docs/view/icon/index.vue') 16 | }, 17 | { 18 | path: '/badge', 19 | meta: { 20 | text: 'Badge 标记' 21 | }, 22 | component: () => import('@/docs/view/badge/index.vue') 23 | }, 24 | { 25 | path: '/drag', 26 | meta: { 27 | text: 'Drag 拖拽' 28 | }, 29 | component: () => import('@/docs/view/drag/index.vue') 30 | } 31 | ] 32 | }, { 33 | title: 'Layout', 34 | route: [{ 35 | path: '/grid', 36 | meta: { 37 | text: 'Grid 栅格' 38 | }, 39 | component: () => import('@/docs/view/grid/index.vue') 40 | }] 41 | }, { 42 | title: 'Data Entry', 43 | route: [{ 44 | path: '/input', 45 | meta: { 46 | text: 'Input 输入框' 47 | }, 48 | component: () => import('@/docs/view/input/index.vue') 49 | }, 50 | { 51 | path: '/checkbox', 52 | meta: { 53 | text: 'Checkbox 多选框' 54 | }, 55 | component: () => import('@/docs/view/checkbox/index.vue') 56 | }, 57 | { 58 | path: '/select', 59 | meta: { 60 | text: 'Select 选择器' 61 | }, 62 | component: () => import('@/docs/view/select/index.vue') 63 | }, { 64 | path: '/switch', 65 | meta: { 66 | text: 'Switch 开关' 67 | }, 68 | component: () => import('@/docs/view/switch/index.vue') 69 | }, 70 | { 71 | path: '/datePicker', 72 | meta: { 73 | text: 'DatePicker 日期选择器' 74 | }, 75 | component: () => import('@/docs/view/datePicker/index.vue') 76 | }, 77 | { 78 | path: '/calendar', 79 | meta: { 80 | text: 'Calendar 日历' 81 | }, 82 | component: () => import('@/docs/view/calendar/index.vue') 83 | }, 84 | { 85 | path: '/form', 86 | meta: { 87 | text: 'Form 表单' 88 | }, 89 | component: () => import('@/docs/view/form/index.vue') 90 | }, 91 | { 92 | path: '/table', 93 | meta: { 94 | text: 'Table 表格' 95 | }, 96 | component: () => import('@/docs/view/table/index.vue') 97 | } 98 | ] 99 | }, { 100 | title: 'Feedback', 101 | route: [{ 102 | path: '/message', 103 | meta: { 104 | text: 'Message 消息' 105 | }, 106 | component: () => import('@/docs/view/message/index.vue') 107 | }, 108 | { 109 | path: '/notice', 110 | meta: { 111 | text: 'Notice 通知' 112 | }, 113 | component: () => import('@/docs/view/notice/index.vue') 114 | } 115 | ] 116 | }] 117 | 118 | export default component -------------------------------------------------------------------------------- /src/docs/view/calendar/index.vue: -------------------------------------------------------------------------------- 1 | 3 | 4 | 90 | 91 | 100 | 101 | -------------------------------------------------------------------------------- /docs/js/chunk-2d0d5faf.f91f538c.js: -------------------------------------------------------------------------------- 1 | (window["webpackJsonp"]=window["webpackJsonp"]||[]).push([["chunk-2d0d5faf"],{7132:function(t,e,n){"use strict";n.r(e);var s=function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[t._m(0),n("div",{staticClass:"components-button-demo"},[n("RelaxTag",{attrs:{name:"普通提示"}},[n("template",{slot:"temp"},[n("x-button",{attrs:{type:"primary"},on:{click:t.info}},[t._v("显示普通提示")])],1),n("template",{slot:"desc"},[t._v("\n 最基本的提示，默认在"),n("i",[t._v("1.5")]),t._v("秒后消失。\n ")]),n("textarea",{attrs:{slot:"code"},slot:"code"},[t._v(" \n 111 | 112 | 114 | -------------------------------------------------------------------------------- /src/package/Input/input.vue: -------------------------------------------------------------------------------- 1 | 97 | -------------------------------------------------------------------------------- /src/docs/view/home/index.vue: -------------------------------------------------------------------------------- 1 | 55 | 56 | -------------------------------------------------------------------------------- /src/package/Form/form-item.vue: -------------------------------------------------------------------------------- 1 | 111 | -------------------------------------------------------------------------------- /docs/js/chunk-2d0bac03.fafcc21f.js: -------------------------------------------------------------------------------- 1 | (window["webpackJsonp"]=window["webpackJsonp"]||[]).push([["chunk-2d0bac03"],{3918:function(e,t,a){"use strict";a.r(t);var n=function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[e._m(0),a("RelaxTag",{attrs:{name:"表单验证"}},[a("template",{slot:"temp"},[a("x-form",{ref:"formValidate",attrs:{model:e.formValidate,rules:e.ruleValidate}},[a("x-form-item",{attrs:{label:"Name",prop:"name"}},[a("x-input",{attrs:{placeholder:"请输入用户名"},model:{value:e.formValidate.name,callback:function(t){e.$set(e.formValidate,"name",t)},expression:"formValidate.name"}})],1),a("x-form-item",{attrs:{label:"E-mail",prop:"mail"}},[a("x-input",{attrs:{placeholder:"请输入邮箱"},model:{value:e.formValidate.mail,callback:function(t){e.$set(e.formValidate,"mail",t)},expression:"formValidate.mail"}})],1),a("x-form-item",[a("x-button",{attrs:{type:"primary"},on:{click:function(t){return e.handleSubmit("formValidate")}}},[e._v("Submit")]),a("x-button",{staticStyle:{"margin-left":"10px"},on:{click:function(t){return e.handleReset("formValidate")}}},[e._v("Reset")])],1)],1)],1),a("template",{slot:"desc"},[e._v("\n x-form 组件基于 async-validator 实现的数据验证，给 x-form 设置属性 rules，同时给需要验证的 x-form-item 设置属性 prop 指向对应字段即可。 "),a("br"),e._v("\n 验证方法也支持 Promise。\n ")]),a("textarea",{attrs:{slot:"code"},slot:"code"},[e._v('\n 30 | 31 | 32 | 33 | 34 | 39 | 42 | 64 | 65 | 66 | 67 | 70 | 73 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 116 | 117 | -------------------------------------------------------------------------------- /src/package/Drag/drag-group.vue: -------------------------------------------------------------------------------- 1 | 12 | 141 | -------------------------------------------------------------------------------- /docs/js/chunk-2d0ddd80.4e859562.js: -------------------------------------------------------------------------------- 1 | (window["webpackJsonp"]=window["webpackJsonp"]||[]).push([["chunk-2d0ddd80"],{"82b2":function(t,s,e){"use strict";e.r(s);var n=function(){var t=this,s=t.$createElement,e=t._self._c||s;return e("div",[t._m(0),e("div",{staticClass:"components-switch-demo"},[e("RelaxTag",{attrs:{name:"基本用法"}},[e("template",{slot:"temp"},[e("x-switch",{on:{change:t.change},model:{value:t.status1,callback:function(s){t.status1=s},expression:"status1"}}),e("x-switch",{model:{value:t.status2,callback:function(s){t.status2=s},expression:"status2"}})],1),e("template",{slot:"desc"},[t._v("\n 切换状态时，触发事件\n ")]),e("textarea",{attrs:{slot:"code"},slot:"code"},[t._v(' \n\n 86 | 87 | 88 | 89 | 90 | 91 | 92 | 135 | 136 | -------------------------------------------------------------------------------- /docs/js/chunk-2d0ccf1f.c8e910b5.js: -------------------------------------------------------------------------------- 1 | (window["webpackJsonp"]=window["webpackJsonp"]||[]).push([["chunk-2d0ccf1f"],{"4fa8":function(t,a,e){"use strict";e.r(a);var n=function(){var t=this,a=t.$createElement,e=t._self._c||a;return e("div",[t._m(0),e("div",{staticClass:"components-badge-demo"},[e("RelaxTag",{attrs:{name:"基础按钮"}},[e("template",{slot:"temp"},[e("x-badge",{attrs:{value:14}},[e("x-button",{attrs:{plain:""}},[t._v("default")])],1),e("x-badge",{attrs:{value:2,type:"primary"}},[e("x-button",{attrs:{type:"primary",plain:""}},[t._v("primary")])],1),e("x-badge",{attrs:{value:2,type:"success"}},[e("x-button",{attrs:{type:"success",plain:""}},[t._v("success")])],1),e("x-badge",{attrs:{value:2,type:"info"}},[e("x-button",{attrs:{type:"info",plain:""}},[t._v("info")])],1),e("x-badge",{attrs:{value:2,type:"danger"}},[e("x-button",{attrs:{type:"danger",plain:""}},[t._v("danger")])],1),e("x-badge",{attrs:{value:2,type:"warning"}},[e("x-button",{attrs:{type:"warning",plain:""}},[t._v("warning")])],1)],1),e("template",{slot:"desc"},[t._v("\n 定义value属性，它接受Number或者String "),e("br"),t._v("\n 标记可以根据"),e("i",[t._v("type")]),t._v("来设置不同的颜色，提供了5种类型的标记"),e("i",[t._v("primary")]),e("i",[t._v("success")]),e("i",[t._v("info")]),e("i",[t._v("danger")]),e("i",[t._v("warning")])]),e("textarea",{attrs:{slot:"code"},slot:"code"},[t._v(' \n ')])],2),e("RelaxTag",{attrs:{name:"最大值"}},[e("template",{slot:"temp"},[e("x-badge",{attrs:{value:120,max:99}},[e("x-button",{attrs:{type:"primary",plain:""}},[t._v("primary")])],1),e("x-badge",{attrs:{value:21,max:10}},[e("x-button",{attrs:{type:"warning",plain:""}},[t._v("warning")])],1)],1),e("template",{slot:"desc"},[t._v("\n 可自定义最大值\n ")]),e("textarea",{attrs:{slot:"code"},slot:"code"},[t._v(' \n ')])],2),e("RelaxTag",{attrs:{name:"自定义内容"}},[e("template",{slot:"temp"},[e("x-badge",{attrs:{value:"New"}},[e("x-button",{attrs:{type:"primary",plain:""}},[t._v("primary")])],1),e("x-badge",{attrs:{value:"Hot"}},[e("x-button",{attrs:{type:"warning",plain:""}},[t._v("warning")])],1)],1),e("template",{slot:"desc"},[t._v("\n 可以显示数字以外的文本内容。\n ")]),e("textarea",{attrs:{slot:"code"},slot:"code"},[t._v(" \n ")])],2),e("RelaxTag",{attrs:{name:"小红点"}},[e("template",{slot:"temp"},[e("x-badge",{attrs:{dot:""}},[t._v("评论")]),e("x-badge",{attrs:{dot:""}},[e("x-button",{attrs:{type:"warning",plain:""}},[t._v("消息")])],1)],1),e("template",{slot:"desc"},[t._v("\n 以红点的形式标注需要关注的内容\n ")]),e("textarea",{attrs:{slot:"code"},slot:"code"},[t._v(" \n ")])],2)],1)])},r=[function(){var t=this,a=t.$createElement,e=t._self._c||a;return e("div",{staticClass:"topbar"},[e("div",{staticClass:"page-title-box"},[e("h4",{staticClass:"page-title"},[t._v("Badge 标记")]),e("p",{staticClass:"page-title-decs"},[t._v("出现在按钮、图标旁的数字或状态标记")])])])}],s={data:function(){return{loading:!1}},methods:{enterLoading:function(){var t=this;this.loading=!0,setTimeout(function(){t.loading=!1},2e3)}}},l=s,p=e("2877"),i=Object(p["a"])(l,n,r,!1,null,"ab499c90",null);a["default"]=i.exports}}]); -------------------------------------------------------------------------------- /src/docs/view/switch/index.vue: -------------------------------------------------------------------------------- 1 | 139 | 140 | -------------------------------------------------------------------------------- /src/docs/view/icon/icon.js: -------------------------------------------------------------------------------- 1 | export default ['heart-on', 2 | 'star-on', 3 | 'sliders', 4 | 'gitlab', 5 | 'maximize', 6 | 'minimize', 7 | 'wifi-off', 8 | 'tv', 9 | 'shopping-cart', 10 | 'paperclip', 11 | 'help-circle', 12 | 'crop', 13 | 'bold', 14 | 'italic', 15 | 'underline', 16 | 'headphones', 17 | 'hash', 18 | 'cloud', 19 | 'command', 20 | 'zoom-out', 21 | 'zoom-in', 22 | 'zap', 23 | 'x-circle', 24 | 'x', 25 | 'wind', 26 | 'x-square', 27 | 'wifi', 28 | 'watch', 29 | 'volume', 30 | 'volume-1', 31 | 'volume-2', 32 | 'volume-x', 33 | 'voicemail', 34 | 'video', 35 | 'video-off', 36 | 'users', 37 | 'user', 38 | 'user-x', 39 | 'user-plus', 40 | 'user-minus', 41 | 'user-check', 42 | 'unlock', 43 | 'upload-cloud', 44 | 'umbrella', 45 | 'upload', 46 | 'twitter', 47 | 'type', 48 | 'triangle', 49 | // 'triangle-down', 50 | // 'triangle-up', 51 | 'trash', 52 | 'trash-2', 53 | 'toggle-right', 54 | 'toggle-left', 55 | 'thumbs-down', 56 | 'thumbs-up', 57 | 'thermometer', 58 | 'target', 59 | 'sunset', 60 | 'tag', 61 | 'tablet', 62 | 'sunrise', 63 | 'sun', 64 | 'stop-circle', 65 | 'star', 66 | 'speaker', 67 | 'square', 68 | 'smartphone', 69 | 'slash', 70 | 'slack', 71 | 'skip-forward', 72 | 'sidebar', 73 | 'shuffle', 74 | 'skip-back', 75 | 'settings', 76 | 'shield', 77 | 'share', 78 | 'share-2', 79 | 'scissors', 80 | 'server', 81 | 'search', 82 | 'save', 83 | 'rotate-cw', 84 | 'refresh-cw', 85 | 'rotate-ccw', 86 | 'rewind', 87 | 'refresh-ccw', 88 | 'repeat', 89 | 'radio', 90 | 'power', 91 | 'printer', 92 | 'pocket', 93 | 'plus', 94 | 'plus-circle', 95 | 'plus-square', 96 | 'play', 97 | 'play-circle', 98 | 'pie-chart', 99 | 'phone-outgoing', 100 | 'phone', 101 | 'phone-incoming', 102 | 'phone-off', 103 | 'phone-missed', 104 | 'phone-forwarded', 105 | 'phone-call', 106 | 'percent', 107 | 'pause', 108 | 'pause-circle', 109 | 'package', 110 | 'octagon', 111 | 'navigation', 112 | 'navigation-2', 113 | 'music', 114 | 'move', 115 | 'more-horizontal', 116 | 'more-vertical', 117 | 'monitor', 118 | 'moon', 119 | 'minus', 120 | 'minus-square', 121 | 'mic', 122 | 'minus-circle', 123 | 'mic-off', 124 | 'minimize-2', 125 | 'message-square', 126 | 'message-circle', 127 | 'menu', 128 | 'map-pin', 129 | 'map', 130 | 'maximize-2', 131 | 'mail', 132 | 'loader', 133 | 'log-out', 134 | 'lock', 135 | 'list', 136 | 'log-in', 137 | 'link', 138 | 'life-buoy', 139 | 'link-2', 140 | 'layout', 141 | 'instagram', 142 | 'info', 143 | 'layers', 144 | 'inbox', 145 | 'image', 146 | 'github', 147 | 'home', 148 | 'heart', 149 | 'grid', 150 | 'globe', 151 | 'flag', 152 | 'filter', 153 | 'folder', 154 | 'file-plus', 155 | 'file', 156 | 'film', 157 | 'file-text', 158 | 'fast-forward', 159 | 'eye-off', 160 | 'file-minus', 161 | 'facebook', 162 | 'feather', 163 | 'eye', 164 | 'external-link', 165 | 'edit-1', 166 | 'edit', 167 | 'edit-2', 168 | 'droplet', 169 | 'download', 170 | 'download-cloud', 171 | 'delete', 172 | 'disc', 173 | 'crosshair', 174 | 'credit-card', 175 | 'cpu', 176 | 'corner-right-up', 177 | 'corner-right-down', 178 | 'corner-up-right', 179 | 'corner-up-left', 180 | 'corner-left-up', 181 | 'corner-left-down', 182 | 'corner-down-left', 183 | 'corner-down-right', 184 | 'copy', 185 | 'compass', 186 | 'cloud-snow', 187 | 'codepen', 188 | 'cloud-off', 189 | 'cloud-rain', 190 | 'cloud-drizzle', 191 | 'cloud-lightning', 192 | 'clock', 193 | 'chrome', 194 | 'clipboard', 195 | 'circle', 196 | 'chevrons-left', 197 | 'chevrons-up', 198 | 'chevrons-right', 199 | 'chevrons-down', 200 | 'chevron-up', 201 | 'chevron-right', 202 | 'chevron-left', 203 | 'chevron-down', 204 | 'cast', 205 | 'check-square', 206 | 'check', 207 | 'check-circle', 208 | 'camera', 209 | 'box', 210 | 'bookmark', 211 | 'calendar', 212 | 'camera-off', 213 | 'briefcase', 214 | 'book', 215 | 'bell', 216 | 'bluetooth', 217 | 'battery', 218 | 'bell-off', 219 | 'battery-charging', 220 | 'bar-chart-2', 221 | 'bar-chart', 222 | 'award', 223 | 'arrow-up', 224 | 'arrow-up-right', 225 | 'arrow-up-left', 226 | 'arrow-down', 227 | 'arrow-right', 228 | 'arrow-left', 229 | 'aperture', 230 | 'anchor', 231 | 'arrow-down-right', 232 | 'arrow-down-left', 233 | 'align-right', 234 | 'align-left', 235 | 'align-justify', 236 | 'airplay', 237 | 'align-center', 238 | 'alert-triangle', 239 | 'activity', 240 | 'alert-circle', 241 | 'alert-octagon' 242 | ] 243 | -------------------------------------------------------------------------------- /docs/js/chunk-2d0c0e74.7beafb74.js: -------------------------------------------------------------------------------- 1 | (window["webpackJsonp"]=window["webpackJsonp"]||[]).push([["chunk-2d0c0e74"],{4486:function(t,n,e){"use strict";e.r(n);var o=function(){var t=this,n=t.$createElement,e=t._self._c||n;return e("div",[t._m(0),e("div",{staticClass:"components-button-demo"},[e("RelaxTag",{attrs:{name:"普通通知"}},[e("template",{slot:"temp"},[e("x-button",{attrs:{type:"primary"},on:{click:t.open}},[t._v("打开普通提醒")])],1),e("template",{slot:"desc"},[t._v("\n 最简单的用法，4.5 秒后自动关闭。\n ")]),e("textarea",{attrs:{slot:"code"},slot:"code"},[t._v(" \n 148 | 149 | 151 | -------------------------------------------------------------------------------- /src/package/Select/select.vue: -------------------------------------------------------------------------------- 1 | 57 | 58 | 202 | -------------------------------------------------------------------------------- /src/docs/view/notice/index.vue: -------------------------------------------------------------------------------- 1 | 140 | 141 | 189 | 190 | -------------------------------------------------------------------------------- /src/package/Datepicker/datepicker.vue: -------------------------------------------------------------------------------- 1 | 44 | 45 | -------------------------------------------------------------------------------- /src/docs/style/index.less: -------------------------------------------------------------------------------- 1 | .index { 2 | position: fixed; 3 | top: 0; 4 | left: 0; 5 | right: 0; 6 | bottom: 0; 7 | background: #FFF; 8 | 9 | .content { 10 | width: 540px; 11 | position: absolute; 12 | left: 50%; 13 | top: 20%; 14 | transform: translateX(-50%); 15 | text-align: center; 16 | 17 | .logo-title { 18 | font-size: 5.2em; 19 | margin-top: -10px; 20 | color: #000; 21 | font-weight: 400; 22 | font-family: "Roboto", sans-serif; 23 | } 24 | 25 | .logo-description { 26 | color: #666; 27 | margin-top: -10px; 28 | margin-bottom: 40px; 29 | font-size: 16px; 30 | font-family: "Lato", sans-serif; 31 | } 32 | 33 | .github { 34 | margin-bottom: 100px; 35 | display: flex; 36 | align-items: center; 37 | justify-content: center; 38 | font-size: 14px; 39 | 40 | .x-btn{ 41 | width: 100px; 42 | margin: 0 15px; 43 | 44 | &:hover{ 45 | background: fade(#2d7bf4, 5%); 46 | color: #2d7bf4; 47 | } 48 | } 49 | } 50 | } 51 | 52 | .contributors{ 53 | position: absolute; 54 | left: 30px; 55 | bottom: 30px; 56 | 57 | .title{ 58 | margin-bottom: 15px; 59 | color: #666; 60 | } 61 | 62 | ul{ 63 | display: flex; 64 | 65 | li{ 66 | list-style: none; 67 | position: relative; 68 | margin-right: 10px; 69 | } 70 | 71 | } 72 | 73 | 74 | img{ 75 | width: 32px; 76 | height: 32px; 77 | border-radius: 100%; 78 | } 79 | } 80 | 81 | .element { 82 | position: absolute; 83 | left: 0; 84 | top: 0; 85 | right: 0; 86 | bottom: 0; 87 | z-index: -1; 88 | 89 | div { 90 | position: absolute; 91 | } 92 | 93 | // 三角 94 | .triangle { 95 | background-color: #ed4c65; 96 | text-align: left; 97 | filter: blur(0.5px); 98 | position: absolute; 99 | top:1em; 100 | left: 1.3em; 101 | } 102 | 103 | .triangle:before, 104 | .triangle:after { 105 | content: ''; 106 | position: absolute; 107 | background-color: inherit; 108 | } 109 | 110 | .triangle, 111 | .triangle:before, 112 | .triangle:after { 113 | width: 3.4em; 114 | height: 3.4em; 115 | border-top-right-radius: 30%; 116 | } 117 | 118 | .triangle { 119 | transform: rotate(-60deg) skewX(-30deg) scale(1, .866); 120 | } 121 | 122 | .triangle:before { 123 | transform: rotate(-135deg) skewX(-45deg) scale(1.414, .707) translate(0, -50%); 124 | } 125 | 126 | .triangle:after { 127 | transform: rotate(135deg) skewY(-45deg) scale(.707, 1.414) translate(50%); 128 | } 129 | 130 | .triangle-rotate { 131 | width: 6em; 132 | height: 6em; 133 | animation: trianglerotate ease-in-out 10s infinite; 134 | } 135 | .triangle-move { 136 | bottom: 20%; 137 | left: 13%; 138 | width: 6em; 139 | height: 6em; 140 | animation: trianglemove ease-in-out 10s infinite; 141 | } 142 | 143 | @keyframes trianglemove { 144 | 0% { 145 | transform: translateY(0); 146 | } 147 | 10%{ 148 | transform: translateY(0); 149 | } 150 | 45%{ 151 | transform: translateY(3em); 152 | } 153 | 55%{ 154 | transform: translateY(3em); 155 | } 156 | 90%{ 157 | transform: translateY(0); 158 | } 159 | 100% { 160 | transform: translateY(0); 161 | } 162 | } 163 | 164 | @keyframes trianglerotate { 165 | 0% { 166 | transform: rotate(30deg); 167 | } 168 | 10%{ 169 | transform: rotate(30deg); 170 | } 171 | 45%{ 172 | transform: rotate(-30deg); 173 | } 174 | 55%{ 175 | transform: rotate(-30deg); 176 | } 177 | 90%{ 178 | transform: rotate(30deg); 179 | } 180 | 100% { 181 | transform: rotate(30deg); 182 | } 183 | } 184 | 185 | .ellipse { 186 | background-color: #f1f3f4; 187 | width: 13em; 188 | height: 7.5em; 189 | border-radius: 7em; 190 | filter: blur(0.6px); 191 | left: -5em; 192 | top: 50%; 193 | transform-origin: left center; 194 | animation: ellipse linear 28s infinite; 195 | } 196 | 197 | @keyframes ellipse { 198 | 0% { 199 | transform: rotate(40deg) 200 | } 201 | 202 | 5% { 203 | transform: rotate(40deg) 204 | } 205 | 206 | 48% { 207 | transform: rotate(-40deg) 208 | } 209 | 210 | 52% { 211 | transform: rotate(-40deg) 212 | } 213 | 214 | 95% { 215 | transform: rotate(40deg) 216 | } 217 | 218 | 100% { 219 | transform: rotate(40deg) 220 | } 221 | } 222 | 223 | .square { 224 | background-color: fade(#0e9635, 85%); 225 | width: 24em; 226 | height: 24em; 227 | border-radius: 2em; 228 | filter: blur(0.6px); 229 | right: -20em; 230 | bottom: 12%; 231 | animation: square linear 35s infinite; 232 | } 233 | 234 | @keyframes square { 235 | from { 236 | transform: rotate(0) 237 | } 238 | 239 | to { 240 | transform: rotate(360deg) 241 | } 242 | } 243 | 244 | .round { 245 | background-color: #f1f3f4; 246 | width: 8em; 247 | height: 8em; 248 | border-radius: 100em; 249 | filter: blur(0.6px); 250 | right: 3em; 251 | bottom: 11%; 252 | } 253 | 254 | .combination{ 255 | width: 7em; 256 | height: 6em; 257 | top: 19%; 258 | left: 13%; 259 | filter: blur(0.6px); 260 | background: orange; 261 | background-size: 1em 1em, 1em 1em; 262 | background-image: linear-gradient(#FFF 0.75em, transparent 0px), linear-gradient(90deg, #FFF 0.75em, transparent 0px); 263 | } 264 | 265 | .combination::after{ 266 | content: ""; 267 | border-radius: 100%; 268 | width: 3em; 269 | height: 3em; 270 | background: fade(#49b0e6, 90%); 271 | position: absolute; 272 | animation: combination ease-in 10s infinite; 273 | } 274 | 275 | @keyframes combination { 276 | 0% { 277 | transform: translate(-2em, -1.5em) 278 | } 279 | 50%{ 280 | transform: translate(0em, 0em) 281 | } 282 | 100% { 283 | transform: translate(-2em, -1.5em) 284 | } 285 | } 286 | 287 | .semicirce{ 288 | width:15em; 289 | height:15em; 290 | filter: blur(0.6px); 291 | right: 20%; 292 | top: -15%; 293 | animation: semicirce ease-in 10s infinite; 294 | } 295 | 296 | .semicirce::after{ 297 | content: ""; 298 | height: inherit; 299 | width: inherit; 300 | border-radius: 100%; 301 | background-color:#f9bc0b; 302 | display: block; 303 | } 304 | 305 | @keyframes semicirce { 306 | 0% { 307 | transform: translateY(20%) 308 | } 309 | 50%{ 310 | transform: translateY(0) 311 | } 312 | 100% { 313 | transform: translateY(20%) 314 | } 315 | } 316 | 317 | } 318 | } -------------------------------------------------------------------------------- /src/package/Calendar/calendar.vue: -------------------------------------------------------------------------------- 1 | 38 | 39 | -------------------------------------------------------------------------------- /docs/js/chunk-2d226013.a2cdf971.js: -------------------------------------------------------------------------------- 1 | (window["webpackJsonp"]=window["webpackJsonp"]||[]).push([["chunk-2d226013"],{e78c:function(t,e,a){"use strict";a.r(e);var o=function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",[t._m(0),a("div",{staticClass:"components-select-demo"},[a("RelaxTag",{attrs:{name:"单选"}},[a("template",{slot:"temp"},[a("x-select",{attrs:{placeholder:"请选择语言"},model:{value:t.value1,callback:function(e){t.value1=e},expression:"value1"}},[a("x-option",{attrs:{value:"Javascript"}},[t._v("Javascript")]),a("x-option",{attrs:{value:"C++"}},[t._v("C++")]),a("x-option",{attrs:{value:"PHP",disabled:""}},[t._v("PHP")]),a("x-option",{attrs:{value:"Java"}},[t._v("Java")])],1),a("x-select",{attrs:{placeholder:"请选择语言",disabled:""}},[a("x-option",{attrs:{value:"Javascript"}},[t._v("Javascript")]),a("x-option",{attrs:{value:"C++"}},[t._v("C++")]),a("x-option",{attrs:{value:"PHP",disabled:""}},[t._v("PHP")]),a("x-option",{attrs:{value:"Java"}},[t._v("Java")])],1),a("div",{staticClass:"m-t-sm"},[t._v("选中的值： "+t._s(t.value1))])],1),a("template",{slot:"desc"},[a("i",[t._v("v-model")]),t._v("的值为当前被选中的"),a("i",[t._v("option")]),t._v("的 value 属性值\n ")]),a("textarea",{attrs:{slot:"code"},slot:"code"},[t._v(" \n\n