1/5/1404
This commit is contained in:
+420
@@ -0,0 +1,420 @@
|
||||
'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;
|
||||
+55
@@ -0,0 +1,55 @@
|
||||
{
|
||||
"name": "vue-content-loader",
|
||||
"version": "2.0.1",
|
||||
"description": "SVG component to create placeholder loading, like Facebook cards loading.",
|
||||
"repository": {
|
||||
"url": "egoist/vue-content-loader",
|
||||
"type": "git"
|
||||
},
|
||||
"main": "dist/vue-content-loader.cjs.js",
|
||||
"module": "dist/vue-content-loader.es.js",
|
||||
"cdn": "dist/vue-content-loader.umd.min.js",
|
||||
"unpkg": "dist/vue-content-loader.umd.min.js",
|
||||
"jsdelivr": "dist/vue-content-loader.umd.min.js",
|
||||
"files": [
|
||||
"dist"
|
||||
],
|
||||
"types": "dist/index.d.ts",
|
||||
"sideEffects": false,
|
||||
"scripts": {
|
||||
"prepublishOnly": "npm run build",
|
||||
"test": "jest",
|
||||
"test:dev": "jest --watch",
|
||||
"build": "bili",
|
||||
"storybook": "poi -so --config stories/poi.config.js",
|
||||
"build:storybook": "poi --prod --config stories/poi.config.js",
|
||||
"format": "prettier -w ."
|
||||
},
|
||||
"author": {
|
||||
"name": "EGOIST",
|
||||
"email": "0x142857@gmail.com"
|
||||
},
|
||||
"license": "MIT",
|
||||
"devDependencies": {
|
||||
"@babel/core": "^7.14.6",
|
||||
"@babel/preset-env": "^7.14.7",
|
||||
"@types/poi": "^12.5.2",
|
||||
"@vue/babel-plugin-jsx": "^1.0.6",
|
||||
"@vue/compiler-sfc": "^3.1.2",
|
||||
"@vue/test-utils": "^2.0.0-rc.9",
|
||||
"babel-jest": "^27.0.6",
|
||||
"bili": "^5.0.5",
|
||||
"jest": "^27.0.6",
|
||||
"poi": "12.10.3",
|
||||
"prettier": "^2.5.0",
|
||||
"regenerator-runtime": "^0.13.9",
|
||||
"rollup-plugin-typescript2": "^0.31.1",
|
||||
"typescript": "^4.3.4",
|
||||
"vue": "^3.0.5",
|
||||
"vue-loader": "^16.3.0",
|
||||
"vue-router": "^4.0.3"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"vue": "^3"
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user