{"version":3,"sources":["webpack://../components/Skeleton/src/SkeletonBlock.vue","webpack://../components/Skeleton/src/SkeletonText.vue"],"names":[],"mappings":"AAsCA,mBACA,UAAA,CACA,WAKA,CAHA,qCACA,8DACA,CAGA,6BACA,GAAA,wBAAA,CACA,GAAA,wBAAA,CACA,CCWA,mBACA,iBAqBA,CAnBA,8BACA,SACA,CAEA,0BAEA,eACA,CAEA,yBACA,iBAAA,CACA,OAAA,CACA,UAAA,CACA,UAAA,CACA,iBAAA,CACA,0BAAA,CACA,8DAAA,CACA,UACA,CAGA,6BACA,GAAA,wBAAA,CACA,GAAA,wBAAA,CACA","file":"styles.css","sourcesContent":["<script>\n/**\n * @inheritAttrs div\n * @inheritListeners div\n */\nexport default {\n\tinheritAttrs: false,\n\n\tprops: {\n\t\t/**\n\t\t * Toggled loaded state\n\t\t */\n\t\tloaded: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t},\n\n\trender(h) {\n\t\t/**\n\t\t * @slot loading content\n\t\t */\n\t\tif (this.$slots.default) {\n\t\t\treturn this.$slots.default;\n\t\t}\n\n\t\treturn h('div', {\n\t\t\tclass: [this.$s.SkeletonBlock, {\n\t\t\t\t[this.$s.loading]: !this.loaded,\n\t\t\t}],\n\t\t\ton: this.$listeners,\n\t\t\tattrs: this.$attrs,\n\t\t});\n\t},\n};\n</script>\n\n<style module=\"$s\">\n.SkeletonBlock {\n\twidth: 100%;\n\theight: 100%;\n\n\t&.loading {\n\t\tanimation: pulsing 0.5s ease-in-out infinite alternate;\n\t}\n}\n\n@keyframes pulsing {\n\t0% { background-color: #ebedef; }\n\t100% { background-color: #f5f6f7; }\n}\n</style>\n","<template>\n\t<div v-frag>\n\t\t<template v-if=\"loaded || children\">\n\t\t\t<!-- @slot loaded text -->\n\t\t\t<slot />\n\t\t</template>\n\t\t<template v-else>\n\t\t\t<div\n\t\t\t\tv-for=\"idx in linesNum\"\n\t\t\t\t:key=\"`skeleton-text-${idx}`\"\n\t\t\t\t:class=\"$s.SkeletonText\"\n\t\t\t\tv-bind=\"$attrs\"\n\t\t\t\tv-on=\"$listeners\"\n\t\t\t/>\n\t\t</template>\n\t</div>\n</template>\n\n<script>\nimport frag from 'vue-frag';\n\n/**\n * @inheritAttrs div\n * @inheritListeners div\n */\nexport default {\n\tdirectives: {\n\t\tfrag,\n\t},\n\n\tinheritAttrs: false,\n\n\tprops: {\n\t\t/**\n\t\t * number of lines of skeleton text\n\t\t */\n\t\tlines: {\n\t\t\ttype: [String, Number],\n\t\t\tdefault: 1,\n\t\t},\n\t\t/**\n\t\t * Toggled loaded state\n\t\t */\n\t\tloaded: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t},\n\n\tcomputed: {\n\t\tchildren() {\n\t\t\treturn this.$slots.default && this.$slots.default.find((v) => v.tag || v.text.trim());\n\t\t},\n\t\tlinesNum() {\n\t\t\treturn Number.parseInt(this.lines, 10);\n\t\t},\n\t},\n};\n</script>\n\n<style module=\"$s\">\n.SkeletonText {\n\tposition: relative;\n\n\t&:last-child {\n\t\twidth: 66%;\n\t}\n\n\t&::before {\n\t\t/* fill line-height */\n\t\tcontent: '\\00a0';\n\t}\n\n\t&::after {\n\t\tposition: absolute;\n\t\ttop: 50%;\n\t\twidth: 100%;\n\t\theight: 75%;\n\t\tborder-radius: 8px;\n\t\ttransform: translateY(-50%);\n\t\tanimation: pulsing 0.5s ease-in-out infinite alternate;\n\t\tcontent: \"\";\n\t}\n}\n\n@keyframes pulsing {\n\t0% { background-color: #ebedef; }\n\t100% { background-color: #f5f6f7; }\n}\n</style>\n"]}