vue-loading-skeleton
Version:
Make beautiful loading skeleton that automatically adapt your vue app.
459 lines (406 loc) • 15.9 kB
JavaScript
function _defineProperty(obj, key, value) {
if (key in obj) {
Object.defineProperty(obj, key, {
value: value,
enumerable: true,
configurable: true,
writable: true
});
} else {
obj[key] = value;
}
return obj;
}
function ownKeys(object, enumerableOnly) {
var keys = Object.keys(object);
if (Object.getOwnPropertySymbols) {
var symbols = Object.getOwnPropertySymbols(object);
if (enumerableOnly) symbols = symbols.filter(function (sym) {
return Object.getOwnPropertyDescriptor(object, sym).enumerable;
});
keys.push.apply(keys, symbols);
}
return keys;
}
function _objectSpread2(target) {
for (var i = 1; i < arguments.length; i++) {
var source = arguments[i] != null ? arguments[i] : {};
if (i % 2) {
ownKeys(Object(source), true).forEach(function (key) {
_defineProperty(target, key, source[key]);
});
} else if (Object.getOwnPropertyDescriptors) {
Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
} else {
ownKeys(Object(source)).forEach(function (key) {
Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
});
}
}
return target;
}
function _slicedToArray(arr, i) {
return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest();
}
function _arrayWithHoles(arr) {
if (Array.isArray(arr)) return arr;
}
function _iterableToArrayLimit(arr, i) {
if (!(Symbol.iterator in Object(arr) || Object.prototype.toString.call(arr) === "[object Arguments]")) {
return;
}
var _arr = [];
var _n = true;
var _d = false;
var _e = undefined;
try {
for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) {
_arr.push(_s.value);
if (i && _arr.length === i) break;
}
} catch (err) {
_d = true;
_e = err;
} finally {
try {
if (!_n && _i["return"] != null) _i["return"]();
} finally {
if (_d) throw _e;
}
}
return _arr;
}
function _nonIterableRest() {
throw new TypeError("Invalid attempt to destructure non-iterable instance");
}
var DEFAULT_BACKGROUND = '#eeeeee';
var DEFAULT_HIGHLIGHT = '#f5f5f5';
var SkeletonStyle = {
backgroundColor: DEFAULT_BACKGROUND,
backgroundImage: "linear-gradient(\n 90deg,\n ".concat(DEFAULT_BACKGROUND, ",\n ").concat(DEFAULT_HIGHLIGHT, ",\n ").concat(DEFAULT_BACKGROUND, "\n )")
};
var script = {
name: 'PuSkeletonTheme',
provide: function provide() {
return {
_themeStyle: this.themeStyle,
_skeletonTheme: this
};
},
props: {
color: {
type: String,
default: DEFAULT_BACKGROUND
},
highlight: {
type: String,
default: DEFAULT_HIGHLIGHT
},
duration: {
type: Number,
default: 1.5
},
tag: {
type: String,
default: 'div'
},
loading: {
type: Boolean,
default: undefined
}
},
data: function data() {
return {
themeStyle: _objectSpread2({}, SkeletonStyle)
};
},
render: function render(h) {
var color = this.color,
highlight = this.highlight,
duration = this.duration;
this.themeStyle.backgroundColor = color;
this.themeStyle.backgroundImage = "linear-gradient(\n 90deg,\n ".concat(color, ",\n ").concat(highlight, ",\n ").concat(color, "\n )");
if (duration) {
this.themeStyle.animation = "SkeletonLoading ".concat(duration, "s ease-in-out infinite");
} else {
this.themeStyle.animation = '';
this.themeStyle.backgroundImage = '';
}
if (this.tag) {
return h(this.tag, this.$slots.default);
}
return this.$slots.default[0];
}
};
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.
const 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;
}
let 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
const originalRender = options.render;
options.render = function renderWithStyleInjection(h, context) {
hook.call(context);
return originalRender(h, context);
};
}
else {
// inject component registration as beforeCreate hook
const existing = options.beforeCreate;
options.beforeCreate = existing ? [].concat(existing, hook) : [hook];
}
}
return script;
}
/* script */
const __vue_script__ = script;
/* template */
/* style */
const __vue_inject_styles__ = undefined;
/* scoped */
const __vue_scope_id__ = undefined;
/* module identifier */
const __vue_module_identifier__ = undefined;
/* functional template */
const __vue_is_functional_template__ = undefined;
/* style inject */
/* style inject SSR */
/* style inject shadow dom */
const __vue_component__ = normalizeComponent(
{},
__vue_inject_styles__,
__vue_script__,
__vue_scope_id__,
__vue_is_functional_template__,
__vue_module_identifier__,
false,
undefined,
undefined,
undefined
);
var isEmptyVNode = function isEmptyVNode(children) {
if (!children) return true;
var _children = _slicedToArray(children, 1),
firstNode = _children[0];
var str = firstNode.text;
if (str) {
// remove all line-break and space character
str = str.replace(/(\n|\r\n|\s)/g, '');
}
return typeof firstNode.tag === 'undefined' && !str;
};
var script$1 = {
name: 'PuSkeleton',
inject: {
themeStyle: {
from: '_themeStyle',
default: SkeletonStyle
},
theme: {
from: '_skeletonTheme',
default: {}
}
},
props: {
prefix: {
type: String,
default: 'pu'
},
count: {
type: Number,
default: 1
},
duration: {
type: Number,
default: 1.5
},
tag: {
type: String,
default: 'span'
},
width: [String, Number],
height: [String, Number],
circle: Boolean,
loading: undefined
},
computed: {
isLoading: function isLoading() {
return typeof this.theme.loading !== 'undefined' ? this.theme.loading : this.loading;
}
},
render: function render(h) {
var width = this.width,
height = this.height,
duration = this.duration,
prefix = this.prefix,
circle = this.circle,
count = this.count,
tag = this.tag,
isLoading = this.isLoading;
var classes = ["".concat(prefix, "-skeleton")];
var elements = [];
var styles = _objectSpread2({}, this.themeStyle);
if (duration) {
styles.animation = "SkeletonLoading ".concat(duration, "s ease-in-out infinite");
} else {
styles.backgroundImage = '';
}
if (width) styles.width = width;
if (height) styles.height = height;
if (circle) styles.borderRadius = '50%';
for (var i = 0; i < count; i += 1) {
elements.push(h("span", {
"key": i,
"class": classes,
"style": styles
}, ["\u200C"]));
}
var showLoading = typeof isLoading !== 'undefined' ? isLoading : isEmptyVNode(this.$slots.default);
if (tag) {
return h(tag, !showLoading ? this.$slots.default : elements);
}
return !showLoading ? this.$slots.default : h("span", [elements]);
}
};
const isOldIE = typeof navigator !== 'undefined' &&
/msie [6-9]\\b/.test(navigator.userAgent.toLowerCase());
function createInjector(context) {
return (id, style) => addStyle(id, style);
}
let HEAD;
const styles = {};
function addStyle(id, css) {
const group = isOldIE ? css.media || 'default' : id;
const style = styles[group] || (styles[group] = { ids: new Set(), styles: [] });
if (!style.ids.has(id)) {
style.ids.add(id);
let code = css.source;
if (css.map) {
// https://developer.chrome.com/devtools/docs/javascript-debugging
// this makes source maps inside style tags work properly in Chrome
code += '\n/*# sourceURL=' + css.map.sources[0] + ' */';
// http://stackoverflow.com/a/26603875
code +=
'\n/*# sourceMappingURL=data:application/json;base64,' +
btoa(unescape(encodeURIComponent(JSON.stringify(css.map)))) +
' */';
}
if (!style.element) {
style.element = document.createElement('style');
style.element.type = 'text/css';
if (css.media)
style.element.setAttribute('media', css.media);
if (HEAD === undefined) {
HEAD = document.head || document.getElementsByTagName('head')[0];
}
HEAD.appendChild(style.element);
}
if ('styleSheet' in style.element) {
style.styles.push(code);
style.element.styleSheet.cssText = style.styles
.filter(Boolean)
.join('\n');
}
else {
const index = style.ids.size - 1;
const textNode = document.createTextNode(code);
const nodes = style.element.childNodes;
if (nodes[index])
style.element.removeChild(nodes[index]);
if (nodes.length)
style.element.insertBefore(textNode, nodes[index]);
else
style.element.appendChild(textNode);
}
}
}
/* script */
const __vue_script__$1 = script$1;
/* template */
/* style */
const __vue_inject_styles__$1 = function (inject) {
if (!inject) return
inject("data-v-64c55a9f_0", { source: "\n.pu-skeleton {\n background-size: 200px 100%;\n background-repeat: no-repeat;\n border-radius: 3px;\n display: inline-block;\n line-height: 1;\n width: 100%;\n height: inherit;\n}\n@keyframes SkeletonLoading {\n0% {\n background-position: -200px 0;\n}\n100% {\n background-position: calc(200px + 100%) 0;\n}\n}\n", map: {"version":3,"sources":["/Users/kit/Projects/resources/vue-loading-skeleton/src/skeleton.vue"],"names":[],"mappings":";AA6FA;EACA,2BAAA;EACA,4BAAA;EACA,kBAAA;EACA,qBAAA;EACA,cAAA;EACA,WAAA;EACA,eAAA;AACA;AAEA;AACA;IACA,6BAAA;AACA;AACA;IACA,yCAAA;AACA;AACA","file":"skeleton.vue","sourcesContent":["<script lang=\"jsx\">\nimport { SkeletonStyle } from './skeleton-theme.vue';\n\nconst isEmptyVNode = (children) => {\n if (!children) return true;\n\n const [firstNode] = children;\n let str = firstNode.text;\n if (str) {\n // remove all line-break and space character\n str = str.replace(/(\\n|\\r\\n|\\s)/g, '');\n }\n\n return typeof firstNode.tag === 'undefined' && !str;\n};\n\nexport default {\n name: 'PuSkeleton',\n inject: {\n themeStyle: {\n from: '_themeStyle',\n default: SkeletonStyle\n },\n theme: {\n from: '_skeletonTheme',\n default: ({})\n }\n },\n props: {\n prefix: {\n type: String,\n default: 'pu'\n },\n count: {\n type: Number,\n default: 1\n },\n duration: {\n type: Number,\n default: 1.5\n },\n tag: {\n type: String,\n default: 'span'\n },\n width: [String, Number],\n height: [String, Number],\n circle: Boolean,\n loading: undefined\n },\n computed: {\n isLoading() {\n return typeof this.theme.loading !== 'undefined' ? this.theme.loading : this.loading;\n }\n },\n render(h) {\n const {\n width, height, duration, prefix, circle, count, tag, isLoading\n } = this;\n const classes = [`${prefix}-skeleton`];\n const elements = [];\n const styles = { ...this.themeStyle };\n\n if (duration) {\n styles.animation = `SkeletonLoading ${duration}s ease-in-out infinite`;\n } else {\n styles.backgroundImage = '';\n }\n if (width) styles.width = width;\n if (height) styles.height = height;\n if (circle) styles.borderRadius = '50%';\n\n for (let i = 0; i < count; i += 1) {\n elements.push(\n <span\n key={i}\n class={classes}\n style={styles}>\n ‌\n </span>\n );\n }\n\n const showLoading = typeof isLoading !== 'undefined' ? isLoading : isEmptyVNode(this.$slots.default);\n if (tag) {\n return h(tag, !showLoading ? this.$slots.default : elements);\n }\n return (!showLoading ? this.$slots.default : <span>{ elements }</span>);\n }\n};\n</script>\n\n<style>\n.pu-skeleton {\n background-size: 200px 100%;\n background-repeat: no-repeat;\n border-radius: 3px;\n display: inline-block;\n line-height: 1;\n width: 100%;\n height: inherit;\n}\n\n@keyframes SkeletonLoading {\n 0% {\n background-position: -200px 0;\n }\n 100% {\n background-position: calc(200px + 100%) 0;\n }\n}\n</style>\n"]}, media: undefined });
};
/* scoped */
const __vue_scope_id__$1 = undefined;
/* module identifier */
const __vue_module_identifier__$1 = undefined;
/* functional template */
const __vue_is_functional_template__$1 = undefined;
/* style inject SSR */
/* style inject shadow dom */
const __vue_component__$1 = normalizeComponent(
{},
__vue_inject_styles__$1,
__vue_script__$1,
__vue_scope_id__$1,
__vue_is_functional_template__$1,
__vue_module_identifier__$1,
false,
createInjector,
undefined,
undefined
);
var index = {
install: function install(Vue) {
Vue.component(__vue_component__$1.name, __vue_component__$1);
Vue.component(__vue_component__.name, __vue_component__);
}
};
export default index;
export { __vue_component__$1 as Skeleton, __vue_component__ as SkeletonTheme };