Permalink
Browse files

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

perf(progress): convert template to render function
  • Loading branch information...
tmorehouse committed Nov 10, 2017
1 parent de24eec commit 20d7d0b1db95944f608073751244d16fa2cbce6e
Showing with 142 additions and 129 deletions.
  1. +116 −3 src/components/progress/progress-bar.js
  2. +0 −107 src/components/progress/progress-bar.vue
  3. +26 −19 src/components/progress/progress.vue
@@ -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
}
}
};

This file was deleted.

Oops, something went wrong.
@@ -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 };
}
}
};

0 comments on commit 20d7d0b

Please sign in to comment.