|
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147 |
- function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
- import '../../../src/stylus/components/_progress-linear.styl';
- // Mixins
- import Colorable from '../../mixins/colorable';
- // Helpers
- import { convertToUnit } from '../../util/helpers';
- import mixins from '../../util/mixins';
- import { VFadeTransition, VSlideXTransition } from '../transitions';
- /* @vue/component */
- export default mixins(Colorable).extend({
- name: 'v-progress-linear',
- props: {
- active: {
- type: Boolean,
- default: true
- },
- backgroundColor: {
- type: String,
- default: null
- },
- backgroundOpacity: {
- type: [Number, String],
- default: null
- },
- bufferValue: {
- type: [Number, String],
- default: 100
- },
- color: {
- type: String,
- default: 'primary'
- },
- height: {
- type: [Number, String],
- default: 7
- },
- indeterminate: Boolean,
- query: Boolean,
- value: {
- type: [Number, String],
- default: 0
- }
- },
- computed: {
- backgroundStyle: function backgroundStyle() {
- var backgroundOpacity = this.backgroundOpacity == null ? this.backgroundColor ? 1 : 0.3 : parseFloat(this.backgroundOpacity);
- return {
- height: this.active ? convertToUnit(this.height) : 0,
- opacity: backgroundOpacity,
- width: this.normalizedBufer + '%'
- };
- },
- effectiveWidth: function effectiveWidth() {
- if (!this.normalizedBufer) {
- return 0;
- }
- return +this.normalizedValue * 100 / +this.normalizedBufer;
- },
- normalizedBufer: function normalizedBufer() {
- if (this.bufferValue < 0) {
- return 0;
- }
- if (this.bufferValue > 100) {
- return 100;
- }
- return parseFloat(this.bufferValue);
- },
- normalizedValue: function normalizedValue() {
- if (this.value < 0) {
- return 0;
- }
- if (this.value > 100) {
- return 100;
- }
- return parseFloat(this.value);
- },
- styles: function styles() {
- var styles = {};
- if (!this.active) {
- styles.height = 0;
- }
- if (!this.indeterminate && parseFloat(this.normalizedBufer) !== 100) {
- styles.width = this.normalizedBufer + '%';
- }
- return styles;
- }
- },
- methods: {
- genDeterminate: function genDeterminate(h) {
- return h('div', this.setBackgroundColor(this.color, {
- ref: 'front',
- staticClass: 'v-progress-linear__bar__determinate',
- style: {
- width: this.effectiveWidth + '%'
- }
- }));
- },
- genBar: function genBar(h, name) {
- return h('div', this.setBackgroundColor(this.color, {
- staticClass: 'v-progress-linear__bar__indeterminate',
- class: _defineProperty({}, name, true)
- }));
- },
- genIndeterminate: function genIndeterminate(h) {
- return h('div', {
- ref: 'front',
- staticClass: 'v-progress-linear__bar__indeterminate',
- class: {
- 'v-progress-linear__bar__indeterminate--active': this.active
- }
- }, [this.genBar(h, 'long'), this.genBar(h, 'short')]);
- }
- },
- render: function render(h) {
- var fade = h(VFadeTransition, this.indeterminate ? [this.genIndeterminate(h)] : []);
- var slide = h(VSlideXTransition, this.indeterminate ? [] : [this.genDeterminate(h)]);
- var bar = h('div', {
- staticClass: 'v-progress-linear__bar',
- style: this.styles
- }, [fade, slide]);
- var background = h('div', this.setBackgroundColor(this.backgroundColor || this.color, {
- staticClass: 'v-progress-linear__background',
- style: this.backgroundStyle
- }));
- var content = this.$slots.default && h('div', {
- staticClass: 'v-progress-linear__content'
- }, this.$slots.default);
- return h('div', {
- staticClass: 'v-progress-linear',
- attrs: {
- 'role': 'progressbar',
- 'aria-valuemin': 0,
- 'aria-valuemax': this.normalizedBufer,
- 'aria-valuenow': this.indeterminate ? undefined : this.normalizedValue
- },
- class: {
- 'v-progress-linear--query': this.query
- },
- style: {
- height: convertToUnit(this.height)
- },
- on: this.$listeners
- }, [background, bar, content]);
- }
- });
- //# sourceMappingURL=VProgressLinear.js.map
|