Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 | 7x 7x 7x 7x 7x 7x 7x 7x 7x 7x 7x 7x 7x | <template>
<div :class="$style.root">
<div :class="$style.track" v-bind="$attrs">
<div :class="$style.trail" :style="trailStyle"></div>
</div>
<div vusion-slot-name="default">
<slot></slot>
<s-empty v-if="!$slots.default && $env.VUE_APP_DESIGNER && !!$attrs['vusion-node-path']"></s-empty>
</div>
</div>
</template>
<script>
import SEmpty from '../s-empty.vue';
export default {
name: 'u-linear-progress',
components: {
SEmpty,
},
props: {
percent: { type: Number, default: 0 },
range: {
type: Array,
default() {
return [0, 100];
},
},
},
computed: {
maxLength() {
return (this.range[1] || 100) - (this.range[0] || 0) + '%';
},
trailStyle() {
if (this.$attrs.direction === 'vertical') {
return {
maxHeight: this.maxLength,
height: (Number(this.percent) || 0) + '%',
top: this.range[0] + '%',
};
} else {
return {
maxWidth: this.maxLength,
width: (Number(this.percent) || 0) + '%',
left: this.range[0] + '%',
};
}
},
},
};
</script>
<style module>
.root {
}
.root[direction="vertical"] {
display: inline-block;
vertical-align: top;
height: var(--linear-progress-vertical-height);
}
.track {
overflow: hidden;
height: var(--linear-progress-size);
border-radius: var(--linear-progress-size);
background: var(--linear-progress-track-background);
}
.root[direction="vertical"] .track {
width: var(--linear-progress-size);
height: 100%;
}
.trail {
position: relative;
float: left;
width: 0;
height: 100%;
border-radius: inherit;
font-size: var(--linear-progress-trail-font-size);
background: var(--linear-progress-trail-background-primary);
color: var(--linear-progress-trail-color);
transition: var(--linear-progress-trail-transition);
}
.root[direction="vertical"] .trail {
float: none;
width: auto;
height: 0;
}
.track[size="small"] {
height: var(--linear-progress-size-small);
border-radius: var(--linear-progress-size-small);
}
.track[size="large"] {
height: var(--linear-progress-size-large);
border-radius: var(--linear-progress-size-large);
}
.track[size="huge"] {
height: var(--linear-progress-size-huge);
border-radius: var(--linear-progress-size-huge);
}
.track[size="small"][direction="vertical"] {
width: var(--linear-progress-size-small);
}
.track[size="large"][direction="vertical"] {
width: var(--linear-progress-size-large);
}
.track[size="huge"][direction="vertical"] {
width: var(--linear-progress-size-huge);
}
.track[color="success"] .trail {
background: var(--linear-progress-trail-background-success);
}
.track[color="error"] .trail {
background: var(--linear-progress-trail-background-error);
}
</style>
|