@dialpad/dialtone
Version:
Dialpad's Dialtone design system monorepo
68 lines (67 loc) • 1.9 kB
JavaScript
import { openBlock, createElementBlock, normalizeStyle, createElementVNode } from "vue";
import _export_sfc from "../../../../_virtual/_plugin-vue_export-helper.js";
const _sfc_main = {
compatConfig: { MODE: 3 },
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();
}
};
const _hoisted_1 = ["aria-label", "aria-valuenow"];
const _hoisted_2 = {
ref: "progressbarCircle",
r: "8",
cx: "12",
cy: "12",
class: "d-recipe-attachment-carousel__progress-bar-circle"
};
const _hoisted_3 = /* @__PURE__ */ createElementVNode("circle", {
r: "8",
cx: "12",
cy: "12",
class: "d-recipe-attachment-carousel__progress-bar-circle"
}, null, -1);
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
return openBlock(), createElementBlock("div", {
role: "progressbar",
"aria-label": $props.progressbarAriaLabel,
tabindex: "-1",
"aria-valuenow": $props.progress,
"aria-valuemin": "0",
"aria-valuemax": "100"
}, [
(openBlock(), createElementBlock("svg", {
class: "d-recipe-attachment-carousel__progress-bar",
style: normalizeStyle($options.cssVars)
}, [
createElementVNode("circle", _hoisted_2, null, 512),
_hoisted_3
], 4))
], 8, _hoisted_1);
}
const DtProgressBar = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
export {
DtProgressBar as default
};
//# sourceMappingURL=progress_bar.vue.js.map