421 lines
11 KiB
JavaScript
421 lines
11 KiB
JavaScript
'use strict';
|
|
|
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
|
var vue = require('vue');
|
|
|
|
var uid = (function () {
|
|
return Math.random().toString(36).substring(2);
|
|
});
|
|
|
|
var ContentLoader = vue.defineComponent({
|
|
name: 'ContentLoader',
|
|
props: {
|
|
width: {
|
|
type: [Number, String]
|
|
},
|
|
height: {
|
|
type: [Number, String]
|
|
},
|
|
viewBox: {
|
|
type: String
|
|
},
|
|
preserveAspectRatio: {
|
|
type: String,
|
|
"default": 'xMidYMid meet'
|
|
},
|
|
speed: {
|
|
type: Number,
|
|
"default": 2
|
|
},
|
|
baseUrl: {
|
|
type: String,
|
|
"default": ''
|
|
},
|
|
primaryColor: {
|
|
type: String,
|
|
"default": '#f9f9f9'
|
|
},
|
|
secondaryColor: {
|
|
type: String,
|
|
"default": '#ecebeb'
|
|
},
|
|
primaryOpacity: {
|
|
type: Number,
|
|
"default": 1
|
|
},
|
|
secondaryOpacity: {
|
|
type: Number,
|
|
"default": 1
|
|
},
|
|
uniqueKey: {
|
|
type: String
|
|
},
|
|
animate: {
|
|
type: Boolean,
|
|
"default": true
|
|
}
|
|
},
|
|
setup: function setup(props) {
|
|
var idClip = vue.computed(function () {
|
|
return props.uniqueKey ? "".concat(props.uniqueKey, "-idClip") : uid();
|
|
});
|
|
var idGradient = vue.computed(function () {
|
|
return props.uniqueKey ? "".concat(props.uniqueKey, "-idGradient") : uid();
|
|
});
|
|
var width = vue.computed(function () {
|
|
var _a;
|
|
|
|
return (_a = props.width) !== null && _a !== void 0 ? _a : 400;
|
|
});
|
|
var height = vue.computed(function () {
|
|
var _a;
|
|
|
|
return (_a = props.height) !== null && _a !== void 0 ? _a : 130;
|
|
});
|
|
var computedViewBox = vue.computed(function () {
|
|
var _a;
|
|
|
|
return (_a = props.viewBox) !== null && _a !== void 0 ? _a : "0 0 ".concat(width.value, " ").concat(height.value);
|
|
});
|
|
return {
|
|
idClip: idClip,
|
|
idGradient: idGradient,
|
|
computedViewBox: computedViewBox
|
|
};
|
|
},
|
|
render: function render() {
|
|
return vue.createVNode("svg", {
|
|
"width": this.width,
|
|
"height": this.height,
|
|
"viewBox": this.computedViewBox,
|
|
"version": "1.1",
|
|
"preserveAspectRatio": this.preserveAspectRatio
|
|
}, [vue.createVNode("rect", {
|
|
"style": {
|
|
fill: "url(".concat(this.baseUrl, "#").concat(this.idGradient, ")")
|
|
},
|
|
"clip-path": "url(".concat(this.baseUrl, "#").concat(this.idClip, ")"),
|
|
"x": "0",
|
|
"y": "0",
|
|
"width": "100%",
|
|
"height": "100%"
|
|
}, null), vue.createVNode("defs", null, [vue.createVNode("clipPath", {
|
|
"id": this.idClip
|
|
}, [this.$slots["default"] ? this.$slots["default"]() : vue.createVNode("rect", {
|
|
"x": "0",
|
|
"y": "0",
|
|
"rx": "5",
|
|
"ry": "5",
|
|
"width": "100%",
|
|
"height": "100%"
|
|
}, null)]), vue.createVNode("linearGradient", {
|
|
"id": this.idGradient
|
|
}, [vue.createVNode("stop", {
|
|
"offset": "0%",
|
|
"stop-color": this.primaryColor,
|
|
"stop-opacity": this.primaryOpacity
|
|
}, [this.animate ? vue.createVNode("animate", {
|
|
"attributeName": "offset",
|
|
"values": "-2; 1",
|
|
"dur": "".concat(this.speed, "s"),
|
|
"repeatCount": "indefinite"
|
|
}, null) : null]), vue.createVNode("stop", {
|
|
"offset": "50%",
|
|
"stop-color": this.secondaryColor,
|
|
"stop-opacity": this.secondaryOpacity
|
|
}, [this.animate ? vue.createVNode("animate", {
|
|
"attributeName": "offset",
|
|
"values": "-1.5; 1.5",
|
|
"dur": "".concat(this.speed, "s"),
|
|
"repeatCount": "indefinite"
|
|
}, null) : null]), vue.createVNode("stop", {
|
|
"offset": "100%",
|
|
"stop-color": this.primaryColor,
|
|
"stop-opacity": this.primaryOpacity
|
|
}, [this.animate ? vue.createVNode("animate", {
|
|
"attributeName": "offset",
|
|
"values": "-1; 2",
|
|
"dur": "".concat(this.speed, "s"),
|
|
"repeatCount": "indefinite"
|
|
}, null) : null])])])]);
|
|
}
|
|
});
|
|
|
|
var BulletListLoader = vue.defineComponent(function (props, _a) {
|
|
var attrs = _a.attrs;
|
|
return function () {
|
|
return vue.createVNode(ContentLoader, attrs, {
|
|
"default": function _default() {
|
|
return [vue.createVNode("circle", {
|
|
"cx": "10",
|
|
"cy": "20",
|
|
"r": "8"
|
|
}, null), vue.createVNode("rect", {
|
|
"x": "25",
|
|
"y": "15",
|
|
"rx": "5",
|
|
"ry": "5",
|
|
"width": "220",
|
|
"height": "10"
|
|
}, null), vue.createVNode("circle", {
|
|
"cx": "10",
|
|
"cy": "50",
|
|
"r": "8"
|
|
}, null), vue.createVNode("rect", {
|
|
"x": "25",
|
|
"y": "45",
|
|
"rx": "5",
|
|
"ry": "5",
|
|
"width": "220",
|
|
"height": "10"
|
|
}, null), vue.createVNode("circle", {
|
|
"cx": "10",
|
|
"cy": "80",
|
|
"r": "8"
|
|
}, null), vue.createVNode("rect", {
|
|
"x": "25",
|
|
"y": "75",
|
|
"rx": "5",
|
|
"ry": "5",
|
|
"width": "220",
|
|
"height": "10"
|
|
}, null), vue.createVNode("circle", {
|
|
"cx": "10",
|
|
"cy": "110",
|
|
"r": "8"
|
|
}, null), vue.createVNode("rect", {
|
|
"x": "25",
|
|
"y": "105",
|
|
"rx": "5",
|
|
"ry": "5",
|
|
"width": "220",
|
|
"height": "10"
|
|
}, null)];
|
|
}
|
|
});
|
|
};
|
|
});
|
|
|
|
var CodeLoader = vue.defineComponent(function (props, _a) {
|
|
var attrs = _a.attrs;
|
|
return function () {
|
|
return vue.createVNode(ContentLoader, attrs, {
|
|
"default": function _default() {
|
|
return [vue.createVNode("rect", {
|
|
"x": "0",
|
|
"y": "0",
|
|
"rx": "3",
|
|
"ry": "3",
|
|
"width": "70",
|
|
"height": "10"
|
|
}, null), vue.createVNode("rect", {
|
|
"x": "80",
|
|
"y": "0",
|
|
"rx": "3",
|
|
"ry": "3",
|
|
"width": "100",
|
|
"height": "10"
|
|
}, null), vue.createVNode("rect", {
|
|
"x": "190",
|
|
"y": "0",
|
|
"rx": "3",
|
|
"ry": "3",
|
|
"width": "10",
|
|
"height": "10"
|
|
}, null), vue.createVNode("rect", {
|
|
"x": "15",
|
|
"y": "20",
|
|
"rx": "3",
|
|
"ry": "3",
|
|
"width": "130",
|
|
"height": "10"
|
|
}, null), vue.createVNode("rect", {
|
|
"x": "155",
|
|
"y": "20",
|
|
"rx": "3",
|
|
"ry": "3",
|
|
"width": "130",
|
|
"height": "10"
|
|
}, null), vue.createVNode("rect", {
|
|
"x": "15",
|
|
"y": "40",
|
|
"rx": "3",
|
|
"ry": "3",
|
|
"width": "90",
|
|
"height": "10"
|
|
}, null), vue.createVNode("rect", {
|
|
"x": "115",
|
|
"y": "40",
|
|
"rx": "3",
|
|
"ry": "3",
|
|
"width": "60",
|
|
"height": "10"
|
|
}, null), vue.createVNode("rect", {
|
|
"x": "185",
|
|
"y": "40",
|
|
"rx": "3",
|
|
"ry": "3",
|
|
"width": "60",
|
|
"height": "10"
|
|
}, null), vue.createVNode("rect", {
|
|
"x": "0",
|
|
"y": "60",
|
|
"rx": "3",
|
|
"ry": "3",
|
|
"width": "30",
|
|
"height": "10"
|
|
}, null)];
|
|
}
|
|
});
|
|
};
|
|
});
|
|
|
|
var FacebookLoader = vue.defineComponent(function (props, _a) {
|
|
var attrs = _a.attrs;
|
|
return function () {
|
|
return vue.createVNode(ContentLoader, attrs, {
|
|
"default": function _default() {
|
|
return [vue.createVNode("rect", {
|
|
"x": "70",
|
|
"y": "15",
|
|
"rx": "4",
|
|
"ry": "4",
|
|
"width": "117",
|
|
"height": "6.4"
|
|
}, null), vue.createVNode("rect", {
|
|
"x": "70",
|
|
"y": "35",
|
|
"rx": "3",
|
|
"ry": "3",
|
|
"width": "85",
|
|
"height": "6.4"
|
|
}, null), vue.createVNode("rect", {
|
|
"x": "0",
|
|
"y": "80",
|
|
"rx": "3",
|
|
"ry": "3",
|
|
"width": "350",
|
|
"height": "6.4"
|
|
}, null), vue.createVNode("rect", {
|
|
"x": "0",
|
|
"y": "100",
|
|
"rx": "3",
|
|
"ry": "3",
|
|
"width": "380",
|
|
"height": "6.4"
|
|
}, null), vue.createVNode("rect", {
|
|
"x": "0",
|
|
"y": "120",
|
|
"rx": "3",
|
|
"ry": "3",
|
|
"width": "201",
|
|
"height": "6.4"
|
|
}, null), vue.createVNode("circle", {
|
|
"cx": "30",
|
|
"cy": "30",
|
|
"r": "30"
|
|
}, null)];
|
|
}
|
|
});
|
|
};
|
|
});
|
|
|
|
var ListLoader = vue.defineComponent(function (props, _a) {
|
|
var attrs = _a.attrs;
|
|
return function () {
|
|
return vue.createVNode(ContentLoader, attrs, {
|
|
"default": function _default() {
|
|
return [vue.createVNode("rect", {
|
|
"x": "0",
|
|
"y": "0",
|
|
"rx": "3",
|
|
"ry": "3",
|
|
"width": "250",
|
|
"height": "10"
|
|
}, null), vue.createVNode("rect", {
|
|
"x": "20",
|
|
"y": "20",
|
|
"rx": "3",
|
|
"ry": "3",
|
|
"width": "220",
|
|
"height": "10"
|
|
}, null), vue.createVNode("rect", {
|
|
"x": "20",
|
|
"y": "40",
|
|
"rx": "3",
|
|
"ry": "3",
|
|
"width": "170",
|
|
"height": "10"
|
|
}, null), vue.createVNode("rect", {
|
|
"x": "0",
|
|
"y": "60",
|
|
"rx": "3",
|
|
"ry": "3",
|
|
"width": "250",
|
|
"height": "10"
|
|
}, null), vue.createVNode("rect", {
|
|
"x": "20",
|
|
"y": "80",
|
|
"rx": "3",
|
|
"ry": "3",
|
|
"width": "200",
|
|
"height": "10"
|
|
}, null), vue.createVNode("rect", {
|
|
"x": "20",
|
|
"y": "100",
|
|
"rx": "3",
|
|
"ry": "3",
|
|
"width": "80",
|
|
"height": "10"
|
|
}, null)];
|
|
}
|
|
});
|
|
};
|
|
});
|
|
|
|
var InstagramLoader = vue.defineComponent(function (props, _a) {
|
|
var attrs = _a.attrs;
|
|
return function () {
|
|
return vue.createVNode(ContentLoader, vue.mergeProps(attrs, {
|
|
"viewBox": "0 0 400 480"
|
|
}), {
|
|
"default": function _default() {
|
|
return [vue.createVNode("circle", {
|
|
"cx": "30",
|
|
"cy": "30",
|
|
"r": "30"
|
|
}, null), vue.createVNode("rect", {
|
|
"x": "75",
|
|
"y": "13",
|
|
"rx": "4",
|
|
"ry": "4",
|
|
"width": "100",
|
|
"height": "13"
|
|
}, null), vue.createVNode("rect", {
|
|
"x": "75",
|
|
"y": "37",
|
|
"rx": "4",
|
|
"ry": "4",
|
|
"width": "50",
|
|
"height": "8"
|
|
}, null), vue.createVNode("rect", {
|
|
"x": "0",
|
|
"y": "70",
|
|
"rx": "5",
|
|
"ry": "5",
|
|
"width": "400",
|
|
"height": "400"
|
|
}, null)];
|
|
}
|
|
});
|
|
};
|
|
});
|
|
|
|
exports.BulletListLoader = BulletListLoader;
|
|
exports.CodeLoader = CodeLoader;
|
|
exports.ContentLoader = ContentLoader;
|
|
exports.FacebookLoader = FacebookLoader;
|
|
exports.InstagramLoader = InstagramLoader;
|
|
exports.ListLoader = ListLoader;
|