perf(progress): convert template to render function (#1312)

perf(progress): convert template to render function

src/components/progress/progress-bar.js

@@ -1,3 +1,116 @@
-import bProgressBar from './progress-bar.vue';
-
-export default bProgressBar;
+export default {
+    render(h) {
+        const t = this;
+        let childNodes = h(false);
+        if (t.$slots.default) {
+            childNodes = t.$slots.default;
+        } else if (t.label) {
+            childNodes = h('span', { domProps: { innerHTML: t.label } });
+        } else if (t.computedShowProgress) {
+            childNodes = t.progress.toFixed(t.computedPrecision);
+        } else if (t.computedShowValue) {
+            childNodes = t.value.toFixed(t.computedPrecision);
+        }
+        return h(
+            'div',
+            {
+                class: t.progressBarClasses,
+                style: t.progressBarStyles,
+                attrs: {
+                    role: 'progressbar',
+                    'aria-valuemin': '0',
+                    'aria-valuemax': t.computedMax.toString(),
+                    'aria-valuenow': t.value.toFixed(t.computedPrecision)
+                }
+            },
+            [ childNodes ]
+        )
+    },
+    computed: {
+        progressBarClasses() {
+            return [
+                'progress-bar',
+                this.computedVariant ? `bg-${this.computedVariant}` : '',
+                (this.computedStriped || this.computedAnimated) ? 'progress-bar-striped' : '',
+                this.computedAnimated ? 'progress-bar-animated' : ''
+            ];
+        },
+        progressBarStyles() {
+            return {
+                width: (100 * (this.value / this.computedMax)) + '%'
+            };
+        },
+        progress() {
+            const p = Math.pow(10, this.computedPrecision);
+            return Math.round((100 * p * this.value) / this.computedMax) / p;
+        },
+        computedMax() {
+            // Prefer our max over parent setting
+            return typeof this.max === 'number' ? this.max : (this.$parent.max || 100);
+        },            
+        computedVariant() {
+            // Prefer our variant over parent setting
+            return this.variant || this.$parent.variant;
+        },
+        computedPrecision() {
+            // Prefer our precision over parent setting
+            return typeof this.precision === 'number' ? this.precision : (this.$parent.precision || 0);
+        },
+        computedStriped() {
+            // Prefer our striped over parent setting
+            return typeof this.striped === 'boolean' ? this.striped : (this.$parent.striped || false);
+        },
+        computedAnimated() {
+            // Prefer our animated over parent setting
+            return typeof this.animated === 'boolean' ? this.animated : (this.$parent.animated || false);
+        },
+        computedShowProgress() {
+            // Prefer our showProgress over parent setting
+            return typeof this.showProgress === 'boolean' ? this.showProgress : (this.$parent.showProgress || false);
+        },
+        computedShowValue() {
+            // Prefer our showValue over parent setting
+            return typeof this.showValue === 'boolean' ? this.showValue : (this.$parent.showValue || false);
+        }
+    },
+    props: {
+        value: {
+            type: Number,
+            default: 0
+        },
+        label: {
+            type: String,
+            value: null
+        },
+        // $parent prop values take precedence over the following props
+        // Which is why they are defaulted to null
+        max: {
+            type: Number,
+            default: null
+        },
+        precision: {
+            type: Number,
+            default: null
+        },
+        variant: {
+            type: String,
+            default: null
+        },
+        striped: {
+            type: Boolean,
+            default: null
+        },
+        animated: {
+            type: Boolean,
+            default: null
+        },
+        showProgress: {
+            type: Boolean,
+            default: null
+        },
+        showValue: {
+            type: Boolean,
+            default: null
+        }           
+    }
+};

src/components/progress/progress.vue

@@ -1,34 +1,41 @@
-<template>
-    <div class="progress" :style="progressHeight">
-        <slot>
-            <b-progress-bar :value="value"
-                            :max="max"
-                            :precision="precision"
-                            :variant="variant"
-                            :animated="animated"
-                            :striped="striped"
-                            :show-progress="showProgress"
-                            :show-value="showValue"
-            ></b-progress-bar>
-        </slot>
-    </div>
-</template>
-
 <style>
     /*
      * Temporary fix, as BS V4.beta.2 mistakenly removed progress-bar transition.
      * This should be able to be removed once V4.beta.3 is released.
+     * And this full component can be moved into the progress.js file
      */
     .progress-bar {
         transition: width .6s ease;
     }
 </style>
 
 <script>
-    import bProgressBar from './progress-bar.vue';
+    import bProgressBar from './progress-bar';
 
     export default {
         components: { bProgressBar },
+        render(h) {
+            const t = this;
+            let childNodes = t.$slots.default;
+            if (!childNodes) {
+                childNodes = h(
+                    'b-progress-bar',
+                    {
+                        props: {
+                            value: t.value,
+                            max: t.max,
+                            precision: t.precision,
+                            variant: t.variant,
+                            animated: t.animated,
+                            striped: t.striped,
+                            showProgress: t.showProgress,
+                            showValue: t.showValue
+                        }
+                    }
+                );
+            }
+            return h('div', { class: [ 'progress' ], style: t.progressHeight }, [ childNodes ]);
+        },
         props: {
             // These props can be inherited via the child b-progress-bar(s)
             variant: {
@@ -45,7 +52,7 @@
             },
             height: {
                 type: String,
-                default: '1rem'
+                default: null
             },
             precision: {
                 type: Number,
@@ -71,7 +78,7 @@
         },
         computed: {
             progressHeight() {
-              return this.height ? { height: this.height } : {};
+              return { height: this.height || null };
             }
         }
     };