mirror of
https://github.com/LukeHagar/ui-development-kit.git
synced 2025-12-10 04:22:01 +00:00
76 lines
4.4 KiB
JavaScript
76 lines
4.4 KiB
JavaScript
import { c as create_ssr_component, e as escape, v as validate_component, d as add_attribute, f as add_styles, n as compute_slots } from './ssr-pGtI3Kui.js';
|
|
import './ProgressBar.svelte_svelte_type_style_lang-Lwm3XjGR.js';
|
|
|
|
const cBase = "progress-radial relative overflow-hidden";
|
|
const cBaseTrack = "fill-transparent";
|
|
const cBaseMeter = "fill-transparent -rotate-90 origin-[50%_50%]";
|
|
const baseSize = 512;
|
|
const ProgressRadial = create_ssr_component(($$result, $$props, $$bindings, slots) => {
|
|
let classesBase;
|
|
let $$slots = compute_slots(slots);
|
|
let { value = void 0 } = $$props;
|
|
let { stroke = 40 } = $$props;
|
|
let { font = 56 } = $$props;
|
|
let { strokeLinecap = "butt" } = $$props;
|
|
let { transition = "transition-[stroke-dashoffset]" } = $$props;
|
|
let { width = "w-36" } = $$props;
|
|
let { meter = "stroke-surface-900 dark:stroke-surface-50" } = $$props;
|
|
let { track = "stroke-surface-500/30" } = $$props;
|
|
let { fill = "fill-token" } = $$props;
|
|
let { labelledby = "" } = $$props;
|
|
const radius = baseSize / 2 - stroke / 2;
|
|
let circumference = radius;
|
|
let dashoffset;
|
|
function setProgress(percent) {
|
|
circumference = radius * 2 * Math.PI;
|
|
dashoffset = circumference - percent / 100 * circumference;
|
|
}
|
|
setProgress(0);
|
|
if ($$props.value === void 0 && $$bindings.value && value !== void 0)
|
|
$$bindings.value(value);
|
|
if ($$props.stroke === void 0 && $$bindings.stroke && stroke !== void 0)
|
|
$$bindings.stroke(stroke);
|
|
if ($$props.font === void 0 && $$bindings.font && font !== void 0)
|
|
$$bindings.font(font);
|
|
if ($$props.strokeLinecap === void 0 && $$bindings.strokeLinecap && strokeLinecap !== void 0)
|
|
$$bindings.strokeLinecap(strokeLinecap);
|
|
if ($$props.transition === void 0 && $$bindings.transition && transition !== void 0)
|
|
$$bindings.transition(transition);
|
|
if ($$props.width === void 0 && $$bindings.width && width !== void 0)
|
|
$$bindings.width(width);
|
|
if ($$props.meter === void 0 && $$bindings.meter && meter !== void 0)
|
|
$$bindings.meter(meter);
|
|
if ($$props.track === void 0 && $$bindings.track && track !== void 0)
|
|
$$bindings.track(track);
|
|
if ($$props.fill === void 0 && $$bindings.fill && fill !== void 0)
|
|
$$bindings.fill(fill);
|
|
if ($$props.labelledby === void 0 && $$bindings.labelledby && labelledby !== void 0)
|
|
$$bindings.labelledby(labelledby);
|
|
classesBase = `${cBase} ${width} ${$$props.class ?? ""}`;
|
|
return ` <figure class="${"progress-radial " + escape(classesBase, true)}" data-testid="progress-radial" role="meter"${add_attribute("aria-labelledby", labelledby, 0)}${add_attribute("aria-valuenow", value || 0, 0)}${add_attribute("aria-valuetext", value ? `${value}%` : "Indeterminate Spinner", 0)}${add_attribute("aria-valuemin", 0, 0)}${add_attribute("aria-valuemax", 100, 0)}> <svg viewBox="${"0 0 " + escape(baseSize, true) + " " + escape(baseSize, true)}" class="${["rounded-full", value === void 0 ? "animate-spin" : ""].join(" ").trim()}"><circle class="${"progress-radial-track " + escape(cBaseTrack, true) + " " + escape(track, true)}"${add_attribute("stroke-width", stroke, 0)}${add_attribute("r", radius, 0)} cx="50%" cy="50%"></circle><circle class="${"progress-radial-meter " + escape(cBaseMeter, true) + " " + escape(meter, true) + " " + escape(transition, true)}"${add_attribute("stroke-width", stroke, 0)}${add_attribute("r", radius, 0)} cx="50%" cy="50%"${add_attribute("stroke-linecap", strokeLinecap, 0)}${add_styles({
|
|
"stroke-dasharray": `${circumference}
|
|
${circumference}`,
|
|
"stroke-dashoffset": dashoffset
|
|
})}></circle>${value != void 0 && value >= 0 && $$slots.default ? `<text x="50%" y="50%" text-anchor="middle" dominant-baseline="middle" font-weight="bold"${add_attribute("font-size", font, 0)} class="${"progress-radial-text " + escape(fill, true)}">${slots.default ? slots.default({}) : ``}</text>` : ``}</svg></figure>`;
|
|
});
|
|
const Progress = create_ssr_component(($$result, $$props, $$bindings, slots) => {
|
|
let { width = "" } = $$props;
|
|
if ($$props.width === void 0 && $$bindings.width && width !== void 0)
|
|
$$bindings.width(width);
|
|
return `<div class="${"grid place-content-center " + escape(width, true)}">${validate_component(ProgressRadial, "ProgressRadial").$$render(
|
|
$$result,
|
|
{
|
|
width,
|
|
stroke: 100,
|
|
meter: "stroke-primary-500",
|
|
track: "stroke-primary-500/30",
|
|
class: "progress-bar"
|
|
},
|
|
{},
|
|
{}
|
|
)}</div>`;
|
|
});
|
|
|
|
export { Progress as P };
|
|
//# sourceMappingURL=Progress-Bh0zkgr8.js.map
|