@dialpad/dialtone/dist/vue3/lib/progress-circle/progress-circle.js

Dialpad's Dialtone design system monorepo

import { t as e } from "../../_plugin-vue_export-helper-BTgDAbhb.js";
import { PROGRESS_CIRCLE_KINDS as t, PROGRESS_CIRCLE_SIZES as n } from "./progress-circle-constants.js";
import { createCommentVNode as r, createElementBlock as i, createElementVNode as a, normalizeClass as o, normalizeStyle as s, openBlock as c } from "vue";
//#region components/progress_circle/progress_circle.vue
var l = {
	compatConfig: { MODE: 3 },
	name: "DtProgressCircle",
	props: {
		ariaLabel: {
			type: String,
			required: !0
		},
		progress: {
			type: Number,
			default: 0,
			validator: (e) => e >= 0 && e <= 100
		},
		size: {
			type: String,
			default: "500",
			validator: (e) => Object.keys(n).includes(e)
		},
		kind: {
			type: String,
			default: "default",
			validator: (e) => Object.keys(t).includes(e)
		}
	},
	data() {
		return {
			strokeWidth: 3.25,
			uid: Math.random().toString(36).substring(2, 9)
		};
	},
	computed: {
		isAi() {
			return this.kind === "ai";
		},
		aiGradientId() {
			return `progress-circle-ai-gradient-${this.uid}`;
		},
		fillStrokeStyle() {
			return this.isAi ? { stroke: `url(#${this.aiGradientId})` } : {};
		},
		sizeClass() {
			return n[this.size];
		},
		kindClass() {
			return t[this.kind];
		},
		circleRadius() {
			return 12 - this.strokeWidth / 2;
		},
		circleCircumference() {
			return 2 * Math.PI * this.circleRadius;
		},
		circlePath() {
			let e = this.circleRadius, t = 12 - e;
			return `M 12 ${t} A ${e} ${e} 0 0 1 12 ${12 + e} A ${e} ${e} 0 0 1 12 ${t} Z`;
		},
		cssVars() {
			let e = this.circleCircumference, t = e * (this.progress > 0 && this.progress < 5 ? 5 : this.progress) / 100, n = this.strokeWidth, r = n / 2, i = this.progress > 0 && this.progress < 100, a = i ? n : 0;
			return {
				"--stroke-dasharray": !i && this.progress >= 100 ? "none" : e,
				"--fill-dashoffset": e - Math.max(0, t - a),
				"--fill-rotate": `${i ? r / e * 360 : 0}deg`,
				"--track-dasharray": !i && this.progress <= 0 ? "none" : `${Math.max(0, e - t - a)} ${e}`,
				"--track-dashoffset": -(t + (i ? r : 0))
			};
		}
	}
}, u = ["aria-label", "aria-valuenow"], d = { key: 0 }, f = ["id"], p = ["d", "stroke-width"], m = ["d", "stroke-width"];
function h(e, t, n, l, h, g) {
	return c(), i("div", {
		class: o(["d-progress-circle", [g.sizeClass, g.kindClass]]),
		role: "progressbar",
		"aria-label": n.ariaLabel,
		tabindex: "-1",
		"aria-valuenow": n.progress,
		"aria-valuemin": "0",
		"aria-valuemax": "100",
		"data-qa": "dt-progress-circle"
	}, [(c(), i("svg", {
		class: "d-progress-circle__bar",
		style: s(g.cssVars),
		viewBox: "0 0 24 24"
	}, [
		g.isAi ? (c(), i("defs", d, [a("linearGradient", {
			id: g.aiGradientId,
			x1: "0%",
			y1: "0%",
			x2: "100%",
			y2: "100%"
		}, [...t[0] || (t[0] = [
			a("stop", {
				offset: "0%",
				"stop-color": "var(--dt-color-brand-gold)"
			}, null, -1),
			a("stop", {
				offset: "33%",
				"stop-color": "var(--dt-color-brand-red)"
			}, null, -1),
			a("stop", {
				offset: "66%",
				"stop-color": "var(--dt-color-brand-magenta)"
			}, null, -1),
			a("stop", {
				offset: "100%",
				"stop-color": "var(--dt-color-brand-purple)"
			}, null, -1)
		])], 8, f)])) : r("", !0),
		n.progress <= 95 ? (c(), i("path", {
			key: 1,
			d: g.circlePath,
			class: "d-progress-circle__shape d-progress-circle__shape--track",
			fill: "none",
			"stroke-width": h.strokeWidth,
			"stroke-linecap": "round"
		}, null, 8, p)) : r("", !0),
		n.progress > 0 ? (c(), i("path", {
			key: 2,
			d: g.circlePath,
			class: "d-progress-circle__shape d-progress-circle__shape--fill",
			fill: "none",
			"stroke-width": h.strokeWidth,
			"stroke-linecap": "round",
			style: s(g.fillStrokeStyle)
		}, null, 12, m)) : r("", !0)
	], 4))], 10, u);
}
var g = /* @__PURE__ */ e(l, [["render", h]]);
//#endregion
export { g as default };

//# sourceMappingURL=progress-circle.js.map