@dialpad/dialtone
Version:
Dialpad's Dialtone design system monorepo
68 lines (67 loc) • 2.02 kB
JavaScript
;
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
const vue = require("vue");
const _pluginVue_exportHelper = require("../../../../_virtual/_plugin-vue_export-helper.cjs");
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__ */ vue.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 vue.openBlock(), vue.createElementBlock("div", {
role: "progressbar",
"aria-label": $props.progressbarAriaLabel,
tabindex: "-1",
"aria-valuenow": $props.progress,
"aria-valuemin": "0",
"aria-valuemax": "100"
}, [
(vue.openBlock(), vue.createElementBlock("svg", {
class: "d-recipe-attachment-carousel__progress-bar",
style: vue.normalizeStyle($options.cssVars)
}, [
vue.createElementVNode("circle", _hoisted_2, null, 512),
_hoisted_3
], 4))
], 8, _hoisted_1);
}
const DtProgressBar = /* @__PURE__ */ _pluginVue_exportHelper.default(_sfc_main, [["render", _sfc_render]]);
exports.default = DtProgressBar;
//# sourceMappingURL=progress_bar.vue.cjs.map