xview-ui
Version:
基于Vuejs的高性能轻量级组件库
1,949 lines (1,787 loc) • 458 kB
JavaScript
/*!
* xview-ui v1.6.1
* (c) 2019-2020 LiLiang
* Released under the MIT License.
*/
'use strict';
function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
var Vue = _interopDefault(require('vue'));
var iconTypes = {
info: 'information-circled',
success: 'checkmark-circled',
warning: 'android-alert',
error: 'close-circled',
loading: 'load-c',
confirm: 'help-circled'
};
var isFunc = function (f) { return typeof f === 'function'; };
var isStr = function (s) { return typeof s === 'string'; };
var isNum = function (n) { return typeof n === 'number'; };
var isBool = function (b) { return typeof b === 'boolean'; };
var isArr = function (arr) { return arr instanceof Array; };
var isUrl = function (s) { return isStr(s) && /^(https?:\/\/(([a-zA-Z0-9]+-?)+[a-zA-Z0-9]+\.)+[a-zA-Z]+)(:\d+)?(\/.*)?(\?.*)?(#.*)?$/.test(s); };
var getType = function (obj) { return Object.prototype.toString.call(obj).slice(8, -1).toLowerCase(); };
var _maxZIndex = 0;
var getMaxZIndex = function () {
if (_maxZIndex) { return _maxZIndex += 2 }
_maxZIndex = 1000;
Array.from(document.querySelectorAll('body>*')).forEach(function (el) {
var ref = window.getComputedStyle(el, null);
var zIndex = ref.zIndex;
if (!isNaN(zIndex)) { _maxZIndex = Math.max(_maxZIndex, zIndex); }
});
return _maxZIndex
};
var isFoundByOptions = function (vm, query) {
return isStr(query) ? vm.$options.name === query : Object.keys(query).every(function (_) { return vm.$options[_] === query[_]; })
};
var findChildrens = function (vm, query) {
var rtnArr = [], nochecked = vm.$children.slice();
while (nochecked.length) {
var item = nochecked.shift();
isFoundByOptions(item, query) ? rtnArr.push(item) : item.$children.forEach(function (_) { return nochecked.push(_); });
}
return rtnArr
};
var findParent = function (vm, query) {
var par = vm.$parent;
while (par) {
if (isFoundByOptions(par, query)) { return par }
par = par.$parent;
}
};
var winScrollbarLock = {
getScrollbarWidth: function getScrollbarWidth() {
var p = document.createElement('p');
var styles = { width: '100px', height: '100px', overflowY: 'scroll' };
for (var key in styles) { p.style[key] = styles[key]; }
document.body.appendChild(p);
var scrollbarWidth = p.offsetWidth - p.clientWidth;
p.remove();
return scrollbarWidth
},
lock: function lock() {
this.locked = true;
var winHeight = window.innerHeight;
var ref = document.body;
var scrollHeight = ref.scrollHeight;
if (winHeight > scrollHeight) { return }
document.body.style.paddingRight = (this.getScrollbarWidth()) + "px";
document.body.style.overflow = 'hidden';
},
unlock: function unlock() {
this.locked = false;
document.body.style.paddingRight = document.body.style.overflow = '';
}
};
var throttle = function (fn, gapTime) {
if ( gapTime === void 0 ) gapTime = 16;
var tid, lastTime;
return function () {
clearTimeout(tid);
var nowTime = Date.now();
if (!lastTime || nowTime - lastTime > gapTime) {
fn();
lastTime = nowTime;
} else {
tid = setTimeout(fn, nowTime - lastTime);
}
}
};
var addStylesheet = function (id, styleStr) {
var styleEl = document.getElementById(id);
if (styleEl) { return }
styleEl = document.createElement('style');
styleEl.id = id;
styleEl.innerHTML = styleStr;
document.head.appendChild(styleEl);
};
var parseSize = function (size) { return isNaN(size) ? size : ((+size) + "px"); };
var XRender = {
functional: true,
render: function (h, ctx) { return ctx.props.render(h, ctx.props); }
};
/**
* 设置文本域自动高度
* @param {HTMLTextAreaElement} textarea
* @param {Number} minRows
* @param {Number} maxRows
*/
var setAutoHeight = function (textarea, minRows, maxRows) {
var style = window.getComputedStyle(textarea, null);
var borderWidth = parseInt(style.borderTopWidth) + parseInt(style.borderBottomWidth);
var padding = parseInt(style.paddingTop) + parseInt(style.paddingBottom);
var lineHeight = parseInt(style.lineHeight);
var matches = textarea.value.match(/\n/gm);
var lbCount = matches ? matches.length : 0;
var compare = borderWidth + padding + lineHeight * lbCount < textarea.scrollHeight;
if (isNum(minRows) && (!compare && lbCount <= minRows)) { return }
if (isNum(maxRows) && lbCount >= maxRows) { return }
textarea.style.height = 'auto';
textarea.style.height = (textarea.scrollHeight + borderWidth) + "px";
};
/**
* 格式化日期
* @param {Date|String} date
* @param {String} format
*/
var dateFormat = function (date, format) {
if ( format === void 0 ) format = 'yyyy-MM-dd hh:mm:ss';
if (typeof date === 'string') {
var mts = date.match(/(\/Date\((\d+)\)\/)/);
if (mts && mts.length >= 3) { date = parseInt(mts[2]); }
}
date = new Date(date);
if (!date || date.toUTCString() === 'Invalid Date') { return '' }
var map = {
M: date.getMonth() + 1,
d: date.getDate(),
h: date.getHours(),
m: date.getMinutes(),
s: date.getSeconds(),
q: Math.floor((date.getMonth() + 3) / 3),
S: date.getMilliseconds()
};
format = format.replace(/([yMdhmsqS])+/g, function (all, t) {
var v = map[t];
if (v !== undefined) {
if (all.length > 1) {
v = '0' + v;
v = v.substr(v.length - 2);
}
return v
} else if (t === 'y') {
return (date.getFullYear() + '').substr(4 - all.length)
}
return all
});
return format
};
/**
* 获取元素在页面中的偏移位置
* @param {HTMLElement} el
*/
function getOffset(el) {
var offset = {
top: 0,
right: 0,
bottom: 0,
left: 0,
width: el.offsetWidth,
height: el.offsetHeight
};
while (el) {
offset.top += el.offsetTop;
offset.left += el.offsetLeft;
el = el.offsetParent;
}
offset.right = offset.left + offset.width;
offset.bottom = offset.top + offset.height;
return offset
}
/**
* 事件目标是否在元素外部
* @param {Event} e
* @param {HTMLElement} el
*/
var isOutside = function (e, el) {
return e.target !== el && Array.from(el.querySelectorAll('*')).indexOf(e.target) < 0
};
var tools = /*#__PURE__*/Object.freeze({
__proto__: null,
iconTypes: iconTypes,
isFunc: isFunc,
isStr: isStr,
isNum: isNum,
isBool: isBool,
isArr: isArr,
isUrl: isUrl,
getType: getType,
getMaxZIndex: getMaxZIndex,
findChildrens: findChildrens,
findParent: findParent,
winScrollbarLock: winScrollbarLock,
throttle: throttle,
addStylesheet: addStylesheet,
parseSize: parseSize,
XRender: XRender,
setAutoHeight: setAutoHeight,
dateFormat: dateFormat,
getOffset: getOffset,
isOutside: isOutside
});
//
//
//
var script = {
name: 'XIcon',
props: {
type: String,
color: String,
custom: String,
size: [Number, String]
},
computed: {
styles: function styles() {
return { color: this.color, fontSize: this.size && ((parseInt(this.size)) + "px") }
},
classes: function classes() {
return ['x-icon', this.custom || ("ion-" + (this.type))]
}
}
};
function normalizeComponent(template, style, script, scopeId, isFunctionalTemplate, moduleIdentifier /* server only */, shadowMode, createInjector, createInjectorSSR, createInjectorShadow) {
if (typeof shadowMode !== 'boolean') {
createInjectorSSR = createInjector;
createInjector = shadowMode;
shadowMode = false;
}
// Vue.extend constructor export interop.
var options = typeof script === 'function' ? script.options : script;
// render functions
if (template && template.render) {
options.render = template.render;
options.staticRenderFns = template.staticRenderFns;
options._compiled = true;
// functional template
if (isFunctionalTemplate) {
options.functional = true;
}
}
// scopedId
if (scopeId) {
options._scopeId = scopeId;
}
var hook;
if (moduleIdentifier) {
// server build
hook = function (context) {
// 2.3 injection
context =
context || // cached call
(this.$vnode && this.$vnode.ssrContext) || // stateful
(this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext); // functional
// 2.2 with runInNewContext: true
if (!context && typeof __VUE_SSR_CONTEXT__ !== 'undefined') {
context = __VUE_SSR_CONTEXT__;
}
// inject component styles
if (style) {
style.call(this, createInjectorSSR(context));
}
// register component module identifier for async chunk inference
if (context && context._registeredComponents) {
context._registeredComponents.add(moduleIdentifier);
}
};
// used by ssr in case component is cached and beforeCreate
// never gets called
options._ssrRegister = hook;
}
else if (style) {
hook = shadowMode
? function (context) {
style.call(this, createInjectorShadow(context, this.$root.$options.shadowRoot));
}
: function (context) {
style.call(this, createInjector(context));
};
}
if (hook) {
if (options.functional) {
// register for functional component in vue file
var originalRender = options.render;
options.render = function renderWithStyleInjection(h, context) {
hook.call(context);
return originalRender(h, context);
};
}
else {
// inject component registration as beforeCreate hook
var existing = options.beforeCreate;
options.beforeCreate = existing ? [].concat(existing, hook) : [hook];
}
}
return script;
}
/* script */
var __vue_script__ = script;
/* template */
var __vue_render__ = function() {
var _vm = this;
var _h = _vm.$createElement;
var _c = _vm._self._c || _h;
return _c(
"i",
_vm._g({ class: _vm.classes, style: _vm.styles }, _vm.$listeners)
)
};
var __vue_staticRenderFns__ = [];
__vue_render__._withStripped = true;
/* style */
var __vue_inject_styles__ = undefined;
/* scoped */
var __vue_scope_id__ = undefined;
/* module identifier */
var __vue_module_identifier__ = undefined;
/* functional template */
var __vue_is_functional_template__ = false;
/* style inject */
/* style inject SSR */
/* style inject shadow dom */
var __vue_component__ = normalizeComponent(
{ render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
__vue_inject_styles__,
__vue_script__,
__vue_scope_id__,
__vue_is_functional_template__,
__vue_module_identifier__,
false,
undefined,
undefined,
undefined
);
var link = {
props: {
to: [String, Object],
replace: Boolean,
target: String,
append: Boolean
},
methods: {
getLinkProps: function getLinkProps() {
var ref = this;
var to = ref.to;
var target = ref.target;
var replace = ref.replace;
var append = ref.append;
return to ? isUrl(to) || target ? { is: 'a', target: target, href: to } : { is: 'RouterLink', to: to, replace: replace, append: append } : null
}
}
};
//
var script$1 = {
mixins: [link],
name: 'XButton',
components: { XIcon: __vue_component__ },
props: {
type: {
default: 'default',
validator: function validator(v) {
return ['default', 'primary', 'dashed', 'text', 'info', 'success', 'warning', 'error'].indexOf(v) !== -1
}
},
ghost: Boolean,
size: {
validator: function validator(v) {
return ['large', 'default', 'small'].indexOf(v) !== -1
}
},
shape: {
validator: function validator(v) {
return v === 'circle'
}
},
long: Boolean,
htmlType: {
default: 'button',
validator: function validator(v) {
return ['button', 'submit', 'reset'].indexOf(v) !== -1
}
},
disabled: Boolean,
loading: Boolean,
icon: String,
customIcon: String
},
data: function data() {
return { prefix: 'x-btn', iconOnly: false, parent: null }
},
computed: {
classes: function classes() {
var ref = this;
var prefix = ref.prefix;
var type = ref.type;
var size = ref.size;
var shape = ref.shape;
var long = ref.long;
var ghost = ref.ghost;
var loading = ref.loading;
var disabled = ref.disabled;
var iconOnly = ref.iconOnly;
if (this.parent) {
size = size || this.parent.size;
shape = shape || this.parent.shape;
}
return [
prefix,
(prefix + "_" + type),
size && (prefix + "_size_" + size),
shape && (prefix + "_" + shape),
{ long: long, ghost: ghost, loading: loading, disabled: disabled, iconOnly: iconOnly }
]
},
btnProps: function btnProps() {
return this.getLinkProps() || { is: 'button', disabled: this.disabled, type: this.htmlType }
},
listeners: function listeners() {
var that = this;
return Object.assign({}, this.$listeners,
{click: function click(e) {
!that.disabled && that.$emit('click', e);
}})
}
},
mounted: function mounted() {
this.iconOnly = !this.$slots.default;
this.parent = findParent(this, 'XButtonGroup');
}
};
/* script */
var __vue_script__$1 = script$1;
/* template */
var __vue_render__$1 = function() {
var _vm = this;
var _h = _vm.$createElement;
var _c = _vm._self._c || _h;
return _c(
"div",
_vm._g(
_vm._b({ class: _vm.classes }, "div", _vm.btnProps, false),
_vm.listeners
),
[
_vm.loading
? _c("x-icon", {
class: _vm.prefix + "_iconLoop",
attrs: { type: "load-c" }
})
: _vm.icon
? _c("x-icon", { attrs: { type: _vm.icon, custom: _vm.customIcon } })
: _vm._e(),
_vm._v(" "),
!_vm.iconOnly ? _c("span", [_vm._t("default")], 2) : _vm._e()
],
1
)
};
var __vue_staticRenderFns__$1 = [];
__vue_render__$1._withStripped = true;
/* style */
var __vue_inject_styles__$1 = undefined;
/* scoped */
var __vue_scope_id__$1 = undefined;
/* module identifier */
var __vue_module_identifier__$1 = undefined;
/* functional template */
var __vue_is_functional_template__$1 = false;
/* style inject */
/* style inject SSR */
/* style inject shadow dom */
var __vue_component__$1 = normalizeComponent(
{ render: __vue_render__$1, staticRenderFns: __vue_staticRenderFns__$1 },
__vue_inject_styles__$1,
__vue_script__$1,
__vue_scope_id__$1,
__vue_is_functional_template__$1,
__vue_module_identifier__$1,
false,
undefined,
undefined,
undefined
);
//
//
//
//
//
var script$2 = {
name: 'XButtonGroup',
props: {
size: {
default: 'default',
validator: function validator(v) {
return ['large', 'default', 'small'].indexOf(v) !== -1
}
},
shape: {
validator: function validator(v) {
return v === 'circle'
}
},
vertical: Boolean
},
data: function data() {
return { prefix: 'x-btn-group' }
}
};
/* script */
var __vue_script__$2 = script$2;
/* template */
var __vue_render__$2 = function() {
var _vm = this;
var _h = _vm.$createElement;
var _c = _vm._self._c || _h;
return _c(
"div",
{
class: [
_vm.prefix,
_vm.prefix + "_" + _vm.size,
{ vertical: _vm.vertical }
]
},
[_vm._t("default")],
2
)
};
var __vue_staticRenderFns__$2 = [];
__vue_render__$2._withStripped = true;
/* style */
var __vue_inject_styles__$2 = undefined;
/* scoped */
var __vue_scope_id__$2 = undefined;
/* module identifier */
var __vue_module_identifier__$2 = undefined;
/* functional template */
var __vue_is_functional_template__$2 = false;
/* style inject */
/* style inject SSR */
/* style inject shadow dom */
var __vue_component__$2 = normalizeComponent(
{ render: __vue_render__$2, staticRenderFns: __vue_staticRenderFns__$2 },
__vue_inject_styles__$2,
__vue_script__$2,
__vue_scope_id__$2,
__vue_is_functional_template__$2,
__vue_module_identifier__$2,
false,
undefined,
undefined,
undefined
);
//
//
//
//
//
//
//
//
//
//
var script$3 = {
name: 'XBadge',
props: {
count: [Number, String],
overflowCount: {
type: [Number, String],
default: 99
},
dot: Boolean,
type: {
default: 'error',
validator: function validator(v) {
return ['success', 'primary', 'normal', 'error', 'warning', 'info'].indexOf(v) !== -1
}
},
showZero: Boolean,
status: {
validator: function validator(v) {
return ['success', 'processing', 'default', 'error', 'warning'].indexOf(v) !== -1
}
},
text: String,
offset: Array
},
data: function data() {
return { prefix: 'x-badge', hasContent: false }
},
computed: {
classes: function classes() {
var ref = this;
var dot = ref.dot;
var type = ref.type;
var prefix = ref.prefix;
var hasContent = ref.hasContent;
return [(prefix + "_sup"), (prefix + "_sup_" + type), { dot: dot, hasContent: hasContent }]
},
showedText: function showedText() {
return this.text || (+this.count > +this.overflowCount ? ((this.overflowCount) + "+") : +this.count)
},
showSup: function showSup() {
return !this.status && (this.dot ? +this.count !== 0 : this.showZero || this.showedText)
},
styles: function styles() {
var ref = this.offset || [];
var x = ref[0];
var y = ref[1];
return { right: x && ((-x) + "px"), top: y && (y + "px") }
}
},
mounted: function mounted() {
this.hasContent = this.$slots.default !== undefined;
}
};
/* script */
var __vue_script__$3 = script$3;
/* template */
var __vue_render__$3 = function() {
var _vm = this;
var _h = _vm.$createElement;
var _c = _vm._self._c || _h;
return _c(
"span",
{ class: _vm.prefix },
[
_vm._t("default"),
_vm._v(" "),
_vm.status
? _c("span", { class: _vm.prefix + "_status" }, [
_c("span", { class: _vm.prefix + "_status_" + _vm.status }),
_vm._v("\n " + _vm._s(_vm.text) + "\n ")
])
: _vm.showSup
? _c("sup", { class: _vm.classes, style: _vm.styles }, [
_vm._v(_vm._s(_vm.showedText))
])
: _vm._e()
],
2
)
};
var __vue_staticRenderFns__$3 = [];
__vue_render__$3._withStripped = true;
/* style */
var __vue_inject_styles__$3 = undefined;
/* scoped */
var __vue_scope_id__$3 = undefined;
/* module identifier */
var __vue_module_identifier__$3 = undefined;
/* functional template */
var __vue_is_functional_template__$3 = false;
/* style inject */
/* style inject SSR */
/* style inject shadow dom */
var __vue_component__$3 = normalizeComponent(
{ render: __vue_render__$3, staticRenderFns: __vue_staticRenderFns__$3 },
__vue_inject_styles__$3,
__vue_script__$3,
__vue_scope_id__$3,
__vue_is_functional_template__$3,
__vue_module_identifier__$3,
false,
undefined,
undefined,
undefined
);
/**
* 事件监听管理器
* 主要用于窗口事件智能化管理
*/
var ListenManager = function ListenManager(object, eventName) {
this.handlers = [];
this.object = object;
this.eventName = eventName;
this.eventHandler = this.eventHandler.bind(this);
this.addListener();
};
/**
* 添加监听器
*/
ListenManager.prototype.addListener = function addListener () {
this.object.addEventListener(this.eventName, this.eventHandler);
};
/**
* 移除监听器
*/
ListenManager.prototype.removeListener = function removeListener () {
this.object.removeEventListener(this.eventName, this.eventHandler);
};
/**
* 添加处理函数
* @param {HTMLElement} el
* @param {Function} fn
*/
ListenManager.prototype.addHandler = function addHandler (el, fn) {
this.handlers.push({ el: el, fn: fn });
};
/**
* 移除处理函数
* @param {HTMLElement} el
*/
ListenManager.prototype.removeHandler = function removeHandler (el) {
this.handlers.splice(this.handlers.findIndex(function (_) { return _.el === el; }), 1);
};
/**
* 事件处理器
* @param {Event} e
*/
ListenManager.prototype.eventHandler = function eventHandler (e) {
this.handlers.forEach(function (_) { return _.fn(e); });
};
/**
* 获取处理函数数量
*/
ListenManager.prototype.getHandlerCount = function getHandlerCount () {
return this.handlers.length
};
/**
* 创建事件指令
* @param {Window | HTMLElement} object
* @param {String} eventName
* @param {Function} cb 必须是高阶函数
*/
var createEventDirective = function (object, eventName, cb) {
var listenManager;
return {
inserted: function inserted(el, ref) {
var value = ref.value;
listenManager = listenManager || new ListenManager(object, eventName);
listenManager.addHandler(el, isFunc(cb) ? cb(el, value) : value);
},
unbind: function unbind(el) {
listenManager.removeHandler(el);
if (listenManager.getHandlerCount() < 1) {
listenManager.removeListener();
listenManager = null;
}
}
}
};
// 窗口改变大小指令
var winresize = createEventDirective(window, 'resize');
// 窗口滚动指令
var winscroll = createEventDirective(window, 'scroll');
// 目标元素之外单击指令
var clickoutside = createEventDirective(window, 'click', function (el, cb) { return function (e) { return isOutside(e, el) && cb(e); }; });
//
var script$4 = {
name: 'XAffix',
props: {
offsetTop: {
type: Number,
default: 0
},
offsetBottom: Number
},
data: function data() {
return {
fixed: false,
affixStyle: {},
placeholderStyle: {}
}
},
computed: {
fixedBottom: function fixedBottom() {
return this.offsetBottom !== undefined && this.offsetTop === 0
}
},
directives: { winresize: winresize, winscroll: winscroll },
watch: {
fixed: function fixed(val) {
this.$emit('on-change', val);
}
},
mounted: function mounted() {
this.onResize()();
},
methods: {
onScroll: function onScroll() {
var this$1 = this;
return throttle(function () {
var rect = this$1.$el.getBoundingClientRect();
this$1.fixed = this$1.fixedBottom ? window.innerHeight - rect.bottom <= this$1.offsetBottom : rect.top <= this$1.offsetTop;
}, 50)
},
onResize: function onResize() {
var this$1 = this;
return throttle(function () {
var rect = this$1.$el.getBoundingClientRect();
this$1.placeholderStyle = { width: ((rect.width) + "px"), height: ((rect.height) + "px") };
var obj = this$1.fixedBottom ? { bottom: ((this$1.offsetBottom) + "px") } : { top: ((this$1.offsetTop) + "px") };
this$1.affixStyle = Object.assign({}, obj, {left: ((rect.left) + "px")});
}, 50)
}
}
};
/* script */
var __vue_script__$4 = script$4;
/* template */
var __vue_render__$4 = function() {
var _vm = this;
var _h = _vm.$createElement;
var _c = _vm._self._c || _h;
return _c(
"div",
{
directives: [
{
name: "winresize",
rawName: "v-winresize",
value: _vm.onResize(),
expression: "onResize()"
},
{
name: "winscroll",
rawName: "v-winscroll",
value: _vm.onScroll(),
expression: "onScroll()"
}
]
},
[
_c(
"div",
{ class: { "x-affix": _vm.fixed }, style: _vm.affixStyle },
[_vm._t("default")],
2
),
_vm._v(" "),
_c("div", {
directives: [
{
name: "show",
rawName: "v-show",
value: _vm.fixed,
expression: "fixed"
}
],
style: _vm.placeholderStyle
})
]
)
};
var __vue_staticRenderFns__$4 = [];
__vue_render__$4._withStripped = true;
/* style */
var __vue_inject_styles__$4 = undefined;
/* scoped */
var __vue_scope_id__$4 = undefined;
/* module identifier */
var __vue_module_identifier__$4 = undefined;
/* functional template */
var __vue_is_functional_template__$4 = false;
/* style inject */
/* style inject SSR */
/* style inject shadow dom */
var __vue_component__$4 = normalizeComponent(
{ render: __vue_render__$4, staticRenderFns: __vue_staticRenderFns__$4 },
__vue_inject_styles__$4,
__vue_script__$4,
__vue_scope_id__$4,
__vue_is_functional_template__$4,
__vue_module_identifier__$4,
false,
undefined,
undefined,
undefined
);
//
var script$5 = {
name: 'XBackTop',
components: { XIcon: __vue_component__ },
props: {
height: {
type: Number,
default: 400
},
bottom: {
type: [Number, String],
default: 30
},
right: {
type: [Number, String],
default: 30
},
duration: {
type: Number,
default: 300
}
},
data: function data() {
return { prefix: 'x-backTop', visible: false }
},
computed: {
styles: function styles() {
return { right: ((+this.right) + "px"), bottom: ((+this.bottom) + "px") }
}
},
directives: { winscroll: winscroll },
methods: {
handleClick: function handleClick() {
var this$1 = this;
if (this.timer) { return }
var x = window.scrollX, y = window.scrollY, ms = 16;
var step = y / (this.duration / ms);
this.timer = setInterval(function () {
if (y > 0) {
y -= step;
} else {
clearInterval(this$1.timer);
this$1.timer = null;
}
window.scrollTo(x, y);
}, ms);
},
onScroll: function onScroll() {
var this$1 = this;
return throttle(function () { return this$1.visible = window.scrollY > this$1.height; }, 200)
}
}
};
/* script */
var __vue_script__$5 = script$5;
/* template */
var __vue_render__$5 = function() {
var _vm = this;
var _h = _vm.$createElement;
var _c = _vm._self._c || _h;
return _c("transition", { attrs: { name: _vm.prefix } }, [
_c(
"div",
{
directives: [
{
name: "show",
rawName: "v-show",
value: _vm.visible,
expression: "visible"
},
{
name: "winscroll",
rawName: "v-winscroll",
value: _vm.onScroll(),
expression: "onScroll()"
}
],
class: _vm.prefix,
style: _vm.styles,
on: { click: _vm.handleClick }
},
[
_vm._t("default", [
_c("x-Icon", {
class: _vm.prefix + "_btn",
attrs: { type: "ios-arrow-up" }
})
])
],
2
)
])
};
var __vue_staticRenderFns__$5 = [];
__vue_render__$5._withStripped = true;
/* style */
var __vue_inject_styles__$5 = undefined;
/* scoped */
var __vue_scope_id__$5 = undefined;
/* module identifier */
var __vue_module_identifier__$5 = undefined;
/* functional template */
var __vue_is_functional_template__$5 = false;
/* style inject */
/* style inject SSR */
/* style inject shadow dom */
var __vue_component__$5 = normalizeComponent(
{ render: __vue_render__$5, staticRenderFns: __vue_staticRenderFns__$5 },
__vue_inject_styles__$5,
__vue_script__$5,
__vue_scope_id__$5,
__vue_is_functional_template__$5,
__vue_module_identifier__$5,
false,
undefined,
undefined,
undefined
);
//
var script$6 = {
name: 'XAvatar',
components: { XIcon: __vue_component__ },
props: {
shape: {
default: 'circle',
validator: function validator(v) {
return ['circle', 'square'].indexOf(v) !== -1
}
},
size: [String, Number],
src: String,
icon: String,
customIcon: String,
text: String
},
data: function data() {
return { prefix: 'x-avatar', textStyle: null }
},
computed: {
classes: function classes() {
var ref = this;
var prefix = ref.prefix;
var shape = ref.shape;
var size = ref.size;
var icon = ref.icon;
return [prefix, (prefix + "_" + shape), size && (prefix + "_" + size), { isIcon: icon }]
},
styles: function styles() {
var size = parseInt(this.size);
return isNaN(size) ? {} : { width: (size + "px"), height: (size + "px"), fontSize: ((size / 2) + "px") }
}
},
watch: {
text: {
immediate: true,
handler: function handler(val) {
var this$1 = this;
if (this.src || this.icon || this.customIcon) { return }
this.$nextTick(function () {
var width = this$1.$el.offsetWidth,
textWidth = this$1.$refs.textBox.offsetWidth;
this$1.textStyle = {
transform: ("scale(" + (width - 8 < textWidth ? (width - 8) / textWidth : 1) + ")")
};
});
}
}
}
};
/* script */
var __vue_script__$6 = script$6;
/* template */
var __vue_render__$6 = function() {
var _vm = this;
var _h = _vm.$createElement;
var _c = _vm._self._c || _h;
return _c(
"span",
{ class: _vm.classes, style: _vm.styles },
[
_vm.src
? _c("img", { attrs: { src: _vm.src } })
: _vm.icon || _vm.customIcon
? _c("x-icon", { attrs: { type: _vm.icon, custom: _vm.customIcon } })
: _c(
"span",
{ ref: "textBox", style: _vm.textStyle },
[_vm._t("default", [_vm._v(_vm._s(_vm.text))])],
2
)
],
1
)
};
var __vue_staticRenderFns__$6 = [];
__vue_render__$6._withStripped = true;
/* style */
var __vue_inject_styles__$6 = undefined;
/* scoped */
var __vue_scope_id__$6 = undefined;
/* module identifier */
var __vue_module_identifier__$6 = undefined;
/* functional template */
var __vue_is_functional_template__$6 = false;
/* style inject */
/* style inject SSR */
/* style inject shadow dom */
var __vue_component__$6 = normalizeComponent(
{ render: __vue_render__$6, staticRenderFns: __vue_staticRenderFns__$6 },
__vue_inject_styles__$6,
__vue_script__$6,
__vue_scope_id__$6,
__vue_is_functional_template__$6,
__vue_module_identifier__$6,
false,
undefined,
undefined,
undefined
);
//
var script$7 = {
name: 'XCloseIconButton',
components: { XIcon: __vue_component__ },
props: {
size: {
type: [Number, String],
default: 22
}
},
computed: {
styles: function styles() {
return { fontSize: parseSize(this.size) }
}
}
};
/* script */
var __vue_script__$7 = script$7;
/* template */
var __vue_render__$7 = function() {
var _vm = this;
var _h = _vm.$createElement;
var _c = _vm._self._c || _h;
return _c(
"x-icon",
_vm._g(
{
staticClass: "x-close-icon-button",
style: _vm.styles,
attrs: { type: "ios-close-empty" }
},
_vm.$listeners
)
)
};
var __vue_staticRenderFns__$7 = [];
__vue_render__$7._withStripped = true;
/* style */
var __vue_inject_styles__$7 = undefined;
/* scoped */
var __vue_scope_id__$7 = undefined;
/* module identifier */
var __vue_module_identifier__$7 = undefined;
/* functional template */
var __vue_is_functional_template__$7 = false;
/* style inject */
/* style inject SSR */
/* style inject shadow dom */
var __vue_component__$7 = normalizeComponent(
{ render: __vue_render__$7, staticRenderFns: __vue_staticRenderFns__$7 },
__vue_inject_styles__$7,
__vue_script__$7,
__vue_scope_id__$7,
__vue_is_functional_template__$7,
__vue_module_identifier__$7,
false,
undefined,
undefined,
undefined
);
//
var script$8 = {
name: 'XAlert',
components: { XIcon: __vue_component__, XCloseIconButton: __vue_component__$7 },
props: {
type: {
default: 'info',
validator: function validator(v) {
return ['info', 'success', 'warning', 'error'].indexOf(v) !== -1
}
},
closable: Boolean,
showIcon: Boolean
},
data: function data() {
return { prefix: 'x-alert', hasDesc: false, visible: true }
},
computed: {
iconType: function iconType() {
return iconTypes[this.type]
}
},
mounted: function mounted() {
this.hasDesc = !!this.$slots.desc;
},
methods: {
close: function close(e) {
this.visible = false;
this.$emit('on-close', e);
}
}
};
/* script */
var __vue_script__$8 = script$8;
/* template */
var __vue_render__$8 = function() {
var _vm = this;
var _h = _vm.$createElement;
var _c = _vm._self._c || _h;
return _c("transition", { attrs: { name: _vm.prefix } }, [
_vm.visible
? _c(
"div",
{
class: [
_vm.prefix,
_vm.prefix + "_" + _vm.type,
{ hasDesc: _vm.hasDesc }
]
},
[
_vm.showIcon
? _c(
"span",
{ class: _vm.prefix + "_icon" },
[
_vm._t("icon", [
_c("x-icon", { attrs: { type: _vm.iconType } })
])
],
2
)
: _vm._e(),
_vm._v(" "),
_c("div", [
_c(
"div",
{ class: _vm.prefix + "_title" },
[_vm._t("default")],
2
),
_vm._v(" "),
_c("div", { class: _vm.prefix + "_desc" }, [_vm._t("desc")], 2)
]),
_vm._v(" "),
_vm.closable
? _c(
"span",
{ class: _vm.prefix + "_close", on: { click: _vm.close } },
[_vm._t("close", [_c("x-close-icon-button")])],
2
)
: _vm._e()
]
)
: _vm._e()
])
};
var __vue_staticRenderFns__$8 = [];
__vue_render__$8._withStripped = true;
/* style */
var __vue_inject_styles__$8 = undefined;
/* scoped */
var __vue_scope_id__$8 = undefined;
/* module identifier */
var __vue_module_identifier__$8 = undefined;
/* functional template */
var __vue_is_functional_template__$8 = false;
/* style inject */
/* style inject SSR */
/* style inject shadow dom */
var __vue_component__$8 = normalizeComponent(
{ render: __vue_render__$8, staticRenderFns: __vue_staticRenderFns__$8 },
__vue_inject_styles__$8,
__vue_script__$8,
__vue_scope_id__$8,
__vue_is_functional_template__$8,
__vue_module_identifier__$8,
false,
undefined,
undefined,
undefined
);
//
var script$9 = {
name: 'XTag',
components: { XCloseIconButton: __vue_component__$7 },
props: {
closable: Boolean,
checkable: Boolean,
checked: {
type: Boolean,
default: true
},
type: {
validator: function validator(v) {
return ['border', 'dot'].indexOf(v) !== -1
}
},
color: {
type: String,
default: 'default'
},
name: [String, Number],
fade: {
type: Boolean,
default: true
},
size: {
default: 'default',
validator: function validator(v) {
return ['large', 'medium', 'default'].indexOf(v) !== -1
}
}
},
data: function data() {
return { prefix: 'x-tag', isChecked: this.checked }
},
computed: {
colorClass: function colorClass() {
var this$1 = this;
return ['default', 'primary', 'success', 'warning', 'error', 'blue', 'green', 'red', 'orange'].find(function (_) { return _ === this$1.color; })
},
classes: function classes() {
var ref = this;
var prefix = ref.prefix;
var colorClass = ref.colorClass;
var type = ref.type;
var isChecked = ref.isChecked;
var fade = ref.fade;
var size = ref.size;
var color = ref.color;
var closable = ref.closable;
return [
prefix,
!type && (prefix + "_size_" + size),
colorClass && (prefix + "_" + colorClass),
type && (prefix + "_" + type),
{ checked: isChecked && !type, color: color && !colorClass, closable: closable, fade: fade }
]
},
styles: function styles() {
return this.colorClass ?
{} : this.type === 'border' ?
{ color: this.color } : this.type === 'dot' ?
{ borderColor: this.color } : this.isChecked ?
{ backgroundColor: this.color, color: '#fff' } : {}
},
dotStyle: function dotStyle() {
return this.colorClass ? {} : { backgroundColor: this.color }
}
},
watch: {
checked: function checked(val) {
this.isChecked = val;
}
},
methods: {
onClose: function onClose(e) {
this.$emit('on-close', e, this.name);
},
onClick: function onClick() {
if (!this.checkable || this.type) { return }
this.isChecked = !this.isChecked;
this.$emit('on-change', this.isChecked, this.name);
}
}
};
/* script */
var __vue_script__$9 = script$9;
/* template */
var __vue_render__$9 = function() {
var _vm = this;
var _h = _vm.$createElement;
var _c = _vm._self._c || _h;
return _c("transition", { attrs: { name: _vm.prefix } }, [
_c(
"div",
{ class: _vm.classes, style: _vm.styles, on: { click: _vm.onClick } },
[
_vm.type === "dot"
? _c("span", { class: _vm.prefix + "_circle", style: _vm.dotStyle })
: _vm._e(),
_vm._v(" "),
_vm._t("default"),
_vm._v(" "),
_vm.closable
? _c("x-close-icon-button", {
class: _vm.prefix + "_close",
on: { click: _vm.onClose }
})
: _vm._e()
],
2
)
])
};
var __vue_staticRenderFns__$9 = [];
__vue_render__$9._withStripped = true;
/* style */
var __vue_inject_styles__$9 = undefined;
/* scoped */
var __vue_scope_id__$9 = undefined;
/* module identifier */
var __vue_module_identifier__$9 = undefined;
/* functional template */
var __vue_is_functional_template__$9 = false;
/* style inject */
/* style inject SSR */
/* style inject shadow dom */
var __vue_component__$9 = normalizeComponent(
{ render: __vue_render__$9, staticRenderFns: __vue_staticRenderFns__$9 },
__vue_inject_styles__$9,
__vue_script__$9,
__vue_scope_id__$9,
__vue_is_functional_template__$9,
__vue_module_identifier__$9,
false,
undefined,
undefined,
undefined
);
//
//
//
//
//
//
//
//
//
//
//
var script$a = {
name: 'XCircle',
props: {
percent: {
type: Number,
default: 0
},
size: {
type: Number,
default: 120
},
strokeLinecap: {
type: String,
default: 'round'
},
strokeWidth: {
type: Number,
default: 6
},
strokeColor: {
type: String,
default: '#2db7f5'
},
trailWidth: {
type: Number,
default: 5
},
trailColor: {
type: String,
default: '#eaeef2'
},
dashboard: Boolean
},
data: function data() {
return { prefix: 'x-circle' }
},
computed: {
styles: function styles() {
return { width: ((this.size) + "px"), height: ((this.size) + "px") }
},
skWidth: function skWidth () {
return this.percent === 0 && this.dashboard ? 0 : this.strokeWidth
},
radius: function radius() {
return 50 - this.strokeWidth / 2
},
pathString: function pathString() {
var r = this.radius;
return this.dashboard ? ("M 50,50 m 0," + r + " a " + r + "," + r + " 0 1 1 0,-" + (2 * r) + " a " + r + "," + r + " 0 1 1 0," + (2 * r)) :
("M 50,50 m 0,-" + r + " a " + r + "," + r + " 0 1 1 0," + (2 * r) + " a " + r + "," + r + " 0 1 1 0,-" + (2 * r))
},
len: function len() {
return Math.PI * 2 * this.radius
},
trailStyle: function trailStyle() {
return this.dashboard && {
'stroke-dashoffset': ("-" + (75 / 2) + "px"),
'stroke-dasharray': ((this.len - 75) + "px " + (this.len) + "px"),
'transition': 'stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s'
}
},
pathStyle: function pathStyle() {
return this.dashboard ? {
'stroke-dashoffset': ("-" + (75 / 2) + "px"),
'stroke-dasharray': (((this.percent / 100) * (this.len - 75)) + "px " + (this.len) + "px"),
'transition': 'stroke-dashoffset .3s ease 0s, stroke-dasharray .6s ease 0s, stroke .6s, stroke-width .06s ease .6s'
} : {
'stroke-dashoffset': ((((100 - this.percent) / 100 * this.len)) + "px"),
'stroke-dasharray': ((this.len) + "px " + (this.len) + "px"),
'transition': 'stroke-dashoffset 0.6s ease 0s, stroke 0.6s ease'
}
}
}
};
/* script */
var __vue_script__$a = script$a;
/* template */
var __vue_render__$a = function() {
var _vm = this;
var _h = _vm.$createElement;
var _c = _vm._self._c || _h;
return _c("div", { class: _vm.prefix, style: _vm.styles }, [
_c("svg", { attrs: { viewBox: "0 0 100 100" } }, [
_c("path", {
style: _vm.trailStyle,
attrs: {
d: _vm.pathString,
stroke: _vm.trailColor,
"stroke-width": _vm.trailWidth,
"fill-opacity": 0
}
}),
_vm._v(" "),
_c("path", {
style: _vm.pathStyle,
attrs: {
d: _vm.pathString,
"stroke-linecap": _vm.strokeLinecap,
stroke: _vm.strokeColor,
"stroke-width": _vm.skWidth,
"fill-opacity": "0"
}
})
]),
_vm._v(" "),
_c("div", { class: _vm.prefix + "_inner" }, [_vm._t("default")], 2)
])
};
var __vue_staticRenderFns__$a = [];
__vue_render__$a._withStripped = true;
/* style */
var __vue_inject_styles__$a = undefined;
/* scoped */
var __vue_scope_id__$a = undefined;
/* module identifier */
var __vue_module_identifier__$a = undefined;
/* functional template */
var __vue_is_functional_template__$a = false;
/* style inject */
/* style inject SSR */
/* style inject shadow dom */
var __vue_component__$a = normalizeComponent(
{ render: __vue_render__$a, staticRenderFns: __vue_staticRenderFns__$a },
__vue_inject_styles__$a,
__vue_script__$a,
__vue_scope_id__$a,
__vue_is_functional_template__$a,
__vue_module_identifier__$a,
false,
undefined,
undefined,
undefined
);
//
var script$b = {
name: 'XTime',
props: {
time: [Number, Date, String],
type: {
default: 'relative',
validator: function validator(v) {
return ['relative', 'date', 'datetime'].indexOf(v) !== -1
}
},
interval: {
type: Number,
default: 60
},
hash: String
},
data: function data() {
return { convertedValue: '' }
},
mounted: function mounted() {
this.update();
},
beforeDestroy: function beforeDestroy() {
clearInterval(this.tid);
},
methods: {
update: function update() {
this.convert();
if (this.type === 'relative') { this.tid = setInterval(this.convert, this.interval * 1000); }
},
convert: function convert() {
this.convertedValue = ({
relative: this.convertRelTime(),
date: dateFormat(this.time, 'yyyy-MM-dd'),
datetime: dateFormat(this.time)
})[this.type];
},
convertRelTime: function convertRelTime() {
var ms = (Date.now() - new Date(this.time)) / 1000;
return ms < 60 ?
((~~ms) + "秒前") : ms < 3600 ?
((~~(ms / 60)) + "分钟前") : ms < 86400 ?
((~~(ms / 3600)) + "小时前") : ms < 2592000 ?
((~~(ms / 86400)) + "天前") : ms < 31104000 ?
((~~(ms / 2592000)) + "个月前") : ((~~(ms / 31104000)) + "年前")
}
}
};
/* script */
var __vue_script__$b = script$b;
/* template */
var __vue_render__$b = function() {
var _vm = this;
var _h = _vm.$createElement;
var _c = _vm._self._c || _h;
return _c(
_vm.hash ? "a" : "span",
{ tag: "span", staticClass: "x-time", attrs: { href: _vm.hash } },
[_vm._v(_vm._s(_vm.convertedValue))]
)
};
var __vue_staticRenderFns__$b = [];
__vue_render__$b._withStripped = true;
/* style */
var __vue_inject_styles__$b = undefined;
/* scoped */
var __vue_scope_id__$b = undefined;
/* module identifier */
var __vue_module_identifier__$b = undefined;
/* functional template */
var __vue_is_functional_template__$b = false;
/* style inject */
/* style inject SSR */
/* style inject shadow dom */
var __vue_component__$b = normalizeComponent(
{ render: __vue_render__$b, staticRenderFns: __vue_staticRenderFns__$b },
__vue_inject_styles__$b,
__vue_script__$b,
__vue_scope_id__$b,
__vue_is_functional_template__$b,
__vue_module_identifier__$b,
false,
undefined,
undefined,
undefined
);
//
var script$c = {
mixins: [link],
name: 'XCard',
components: { XIcon: __vue_component__ },
props: {
bordered: { type: Boolean, default: true },
disHover: Boolean,
shadow: Boolean,
padding: { type: [Number, String], default: 16 },
title: String,
icon: String
},
data: function data() {
return { prefix: 'x-card', hasHeader: false }
},
computed: {
classes: function classes() {
return [this.prefix, { bordered: this.bordered, disHover: this.disHover, shadow: this.shadow }]
},
bindProps: function bindProps() {
return this.getLinkProps()
},
bodyStyle: function bodyStyle() {
return { padding: parseSize(this.padding) }
}
},
mounted: function mounted() {
this.hasHeader = this.$slots.title || this.$slots.extra || this.icon || this.title;
}
};
/* script */
var __vue_script__$c = script$c;
/* template */
var __vue_render__$c = function() {
var _vm = this;
var _h = _vm.$createElement;
var _c = _vm._self._c || _h;
return _c(
"div",
_vm._b({ class: _vm.classes }, "div", _vm.bindProps, false),
[
_vm.hasHeader
? _c(
"div",
{ class: _vm.prefix + "_header" },
[
_c(
"div",
{ class: _vm.prefix + "_title" },
[
_vm._t("title", [
_vm.icon
? _c("x-icon", { attrs: { type: _vm.icon } })
: _vm._e(),
_vm._v(_vm._s(_vm.title) + "\n ")
])
],
2
),
_vm._v(" "),
_vm._t("extra")
],
2
)
: _vm._e(),
_vm._v(" "),
_c("div", { style: _vm.bodyStyle }, [_vm._t("default")], 2)
]
)
};
var __vue_staticRenderFns__$c = [];
__vue_render__$c._withStripped = true;
/* style */
var __vue_inject_styles__$c = undefined;
/* scoped */
var __vue_scope_id__$c = undefined;
/* module identifier */
var __vue_module_identifier__$c = undefined;
/* functional template */
var __vue_is_functional_template__$c = false;
/* style inject */
/* style inject SSR */
/* style inject shadow dom */
var __vue_component__$c = normalizeComponent(
{ render: __vue_render__$c, staticRenderFns: __vue_staticRenderFns__$c },
__vue_inject_styles__$c,
__vue_script__$c,
__vue_scope_id__$c,
__vue_is_functional_template__$c,
__vue_module_identifier__$c,
false,
undefined,
undefined,
undefined
);
//
//
//
var script$d = {
name: 'XBreadcrumb',
props: {
separator: { type: String, default: '/' }
}
};
/* script */
var __vue_script__$d = script$d;
/* template */
var __vue_render__$d = function() {
var _vm = this;
var _h = _vm.$createElement;
var _c = _vm._self._c || _h;
return _c("div", [_vm._t("default")], 2)
};
var __vue_staticRenderFns__$d = [];
__vue_render__$d._withStripped = true;
/* style */
var __vue_inject_styles__$d = undefined;
/* scoped */
var __vue_scope_id__$d = undefined;
/* module identifier */
var __vue_module_identifier__$d = undefined;
/* functional template */
var __vue_is_functional_template__$d = false;
/* style inject */
/* style inject SSR */
/* style inject shadow dom */
var __vue_component__$d = normalizeComponent(
{ render: __vue_render__$d, staticRenderFns: __vue_staticRenderFns__$d },
__vue_inject_styles__$d,
__vue_script__$d,
__vue_scope_id__$d,
__vue_is_functional_template__$d,
__vue_module_identifier__$d,
false,
undefined,
undefined,
undefined
);
//
var script$e = {
mixins: [link],
name: 'XBreadcrumbItem',
data: function data() {
return