Merge pull request LucasLeandro1204#11 from tatyshev/render-functions

Use render function instead templates in production build

Author: LucasLeandro1204

docs/assets/js/app.js

@@ -0,0 +1,93 @@
+<template>
+  <svg :viewBox="viewbox" preserveAspectRatio="xMidYMid meet">
+    <rect
+      :style="{ fill: 'url(#' + gradientId + ')' }"
+      :clip-path="'url(#' + clipPathId + ')'"
+      x="0"
+      y="0"
+      :width="width"
+      :height="height"
+    />
+
+    <defs>
+      <clipPath :id="clipPathId">
+        <slot>
+          <rect x="0" y="0" rx="5" ry="5" width="70" height="70" />
+          <rect x="80" y="17" rx="4" ry="4" width="300" height="13" />
+          <rect x="80" y="40" rx="3" ry="3" width="250" height="10" />
+          <rect x="0" y="80" rx="3" ry="3" width="350" height="10" />
+          <rect x="0" y="100" rx="3" ry="3" width="400" height="10" />
+          <rect x="0" y="120" rx="3" ry="3" width="360" height="10" />
+        </slot>
+      </clipPath>
+
+      <linearGradient :id="gradientId">
+        <stop offset="0%" :stop-color="primary">
+          <animate attributeName="offset" values="-2; 1" :dur="formatedSpeed" repeatCount="indefinite" />
+        </stop>
+
+        <stop offset="50%" :stop-color="secondary">
+          <animate attributeName="offset" values="-1.5; 1.5" :dur="formatedSpeed" repeatCount="indefinite" />
+        </stop>
+
+        <stop offset="100%" :stop-color="primary">
+          <animate attributeName="offset" values="-1; 2" :dur="formatedSpeed" repeatCount="indefinite" />
+        </stop>
+      </linearGradient>
+    </defs>
+  </svg>
+</template>
+
+<script>
+  const validateColor = color => /^#([A-Fa-f0-9]{3}|[A-Fa-f0-9]{6})$/.test(color);
+
+  export default {
+    name: 'VueContentLoading',
+    props: {
+      speed: {
+        default: 2,
+        type: Number,
+      },
+
+      width: {
+        default: 400,
+        type: Number,
+      },
+
+      height: {
+        default: 130,
+        type: Number,
+      },
+
+      primary: {
+        type: String,
+        default: '#f0f0f0',
+        validator: validateColor,
+      },
+
+      secondary: {
+        type: String,
+        default: '#e0e0e0',
+        validator: validateColor,
+      },
+    },
+
+    computed: {
+      viewbox () {
+        return `0 0 ${this.width} ${this.height}`;
+      },
+
+      formatedSpeed () {
+        return `${this.speed}s`;
+      },
+
+      gradientId () {
+        return `gradient-${this._uid}`;
+      },
+
+      clipPathId () {
+        return `clipPath-${this._uid}`;
+      },
+    },
+  };
+</script>

docs/assets/js/app.js.map

@@ -0,0 +1,37 @@
+<template>
+  <vue-content-loading v-bind="$attrs" :width="230" :height="height">
+    <template v-for="i in rows">
+      <circle :key="i" cx="8" :cy="getYPos(i, 8)" r="8" />
+      <rect :key="i" x="22" :y="getYPos(i, 3)" rx="3" ry="3" width="200" height="9" />
+    </template>
+  </vue-content-loading>
+</template>
+
+<script>
+  import VueContentLoading from '../VueContentLoading.vue';
+
+  export default {
+    components: {
+      VueContentLoading,
+    },
+
+    props: {
+      rows: {
+        default: 5,
+        type: Number,
+      },
+    },
+
+    computed: {
+      height () {
+        return this.rows * 21;
+      },
+    },
+
+    methods: {
+      getYPos (row, plus) {
+        return plus + ((row - 1) * 22);
+      },
+    },
+  };
+</script>

src/components/VueContentLoading.js

@@ -0,0 +1,23 @@
+<template>
+  <vue-content-loading v-bind="$attrs" :width="300" :height="80">
+    <rect x="0" y="0" rx="3" ry="3" width="70" height="10" />
+    <rect x="80" y="0" rx="3" ry="3" width="100" height="10" />
+    <rect x="190" y="0" rx="3" ry="3" width="10" height="10" />
+    <rect x="15" y="20" rx="3" ry="3" width="130" height="10" />
+    <rect x="155" y="20" rx="3" ry="3" width="130" height="10" />
+    <rect x="15" y="40" rx="3" ry="3" width="90" height="10" />
+    <rect x="115" y="40" rx="3" ry="3" width="60" height="10" />
+    <rect x="185" y="40" rx="3" ry="3" width="60" height="10" />
+    <rect x="0" y="60" rx="3" ry="3" width="30" height="10" />
+  </vue-content-loading>
+</template>
+
+<script>
+  import VueContentLoading from '../VueContentLoading.vue';
+
+  export default {
+    components: {
+      VueContentLoading,
+    },
+  };
+</script>

src/components/VueContentLoading.vue

@@ -0,0 +1,20 @@
+<template>
+  <vue-content-loading v-bind="$attrs">
+    <rect x="0" y="0" rx="5" ry="5" width="70" height="70" />
+    <rect x="80" y="17" rx="4" ry="4" width="300" height="13" />
+    <rect x="80" y="40" rx="3" ry="3" width="250" height="10" />
+    <rect x="0" y="80" rx="3" ry="3" width="350" height="10" />
+    <rect x="0" y="100" rx="3" ry="3" width="400" height="10" />
+    <rect x="0" y="120" rx="3" ry="3" width="360" height="10" />
+  </vue-content-loading>
+</template>
+
+<script>
+  import VueContentLoading from '../VueContentLoading.vue';
+
+  export default {
+    components: {
+      VueContentLoading,
+    },
+  };
+</script>