@dialpad/dialtone
Version:
Dialpad's Dialtone design system monorepo
44 lines (43 loc) • 1.58 kB
JavaScript
import normalizeComponent from "../../../../_virtual/_plugin-vue2_normalizer.js";
const _sfc_main = {
name: "DtProgressBar",
props: {
progressbarAriaLabel: {
type: String,
required: true
},
progress: {
type: Number,
default: 20
}
},
data: () => ({
circleCircumference: 50
}),
computed: {
cssVars() {
return {
"--stroke-dashoffset": this.circleCircumference - this.circleCircumference * this.progress / 100,
"--stroke-dasharray": this.circleCircumference
};
}
},
mounted() {
this.circleCircumference = this.$refs.progressbarCircle.getTotalLength();
}
};
var _sfc_render = function render() {
var _vm = this, _c = _vm._self._c;
return _c("div", { attrs: { "role": "progressbar", "aria-label": _vm.progressbarAriaLabel, "tabindex": "-1", "aria-valuenow": _vm.progress, "aria-valuemin": "0", "aria-valuemax": "100" } }, [_c("svg", { staticClass: "d-recipe-attachment-carousel__progress-bar", style: _vm.cssVars }, [_c("circle", { ref: "progressbarCircle", staticClass: "d-recipe-attachment-carousel__progress-bar-circle", attrs: { "r": "8", "cx": "12", "cy": "12" } }), _c("circle", { staticClass: "d-recipe-attachment-carousel__progress-bar-circle", attrs: { "r": "8", "cx": "12", "cy": "12" } })])]);
};
var _sfc_staticRenderFns = [];
var __component__ = /* @__PURE__ */ normalizeComponent(
_sfc_main,
_sfc_render,
_sfc_staticRenderFns
);
const DtProgressBar = __component__.exports;
export {
DtProgressBar as default
};
//# sourceMappingURL=progress_bar.vue.js.map