@shtabapp/ui-kit 1.84.0 → 1.85.1

package/dist/components/SChartMultiLine/utils/buildMultiLineChartConfig.cjs

@@ -0,0 +1,148 @@
+const require_chartCssVariables = require("../../../utils/chart/core/chartCssVariables.cjs");
+const require_readCssColor = require("../../../utils/chart/css/readCssColor.cjs");
+const require_createMultiLineTooltipCallbacks = require("../../../utils/chart/multiLine/createMultiLineTooltipCallbacks.cjs");
+const require_chartSkeletonConfig = require("../../../utils/chart/core/chartSkeletonConfig.cjs");
+const require_resolveChartValueRange = require("../../../utils/chart/core/resolveChartValueRange.cjs");
+const require_createZeroLinePlugin = require("../../../utils/chart/core/createZeroLinePlugin.cjs");
+const require_createChartMarkersPlugin = require("../../../utils/chart/core/createChartMarkersPlugin.cjs");
+const require_createChartAreaFillGradient = require("../../../utils/chart/line/createChartAreaFillGradient.cjs");
+const require_areChartSeriesAligned = require("../../../utils/chart/stacked/areChartSeriesAligned.cjs");
+const require_createChartCrosshairPlugin = require("../../../utils/chart/stacked/createChartCrosshairPlugin.cjs");
+const require_chartInteractivity = require("../../../utils/chart/core/chartInteractivity.cjs");
+const require_resolveMultiLineSeriesColor = require("../../../utils/chart/multiLine/resolveMultiLineSeriesColor.cjs");
+const require_buildMultiLineChartScales = require("../../../utils/chart/multiLine/buildMultiLineChartScales.cjs");
+const require_splitChartAxisLabel = require("../../../utils/chart/core/splitChartAxisLabel.cjs");
+const require_createCustomTooltipCallbacks = require("../../../utils/chart/core/createCustomTooltipCallbacks.cjs");
+//#region src/components/SChartMultiLine/utils/buildMultiLineChartConfig.ts
+var POINT_RADIUS = 3;
+var DEFAULT_LINE_TENSION = .4;
+var LINE_BORDER_WIDTH = 4;
+var THIN_LINE_BORDER_WIDTH = 1.5;
+var DEFAULT_Y_STEP = 5;
+var DASHED_LINE_SEGMENTS = [8, 8];
+var MARKERS_LAYOUT_PADDING_TOP = 16;
+var MULTI_LINE_DANGER_FILL_CSS_VARIABLE = "--s-ui-chart-multi-line-danger-fill";
+var resolveRange = (seriesList, yMin, yMax, yStep, skeleton) => {
+	const values = seriesList.flatMap((seriesItem) => seriesItem.points.map((point) => point.value));
+	if (skeleton) return {
+		min: yMin ?? 0,
+		max: yMax ?? require_resolveChartValueRange.resolveChartValueRange(values, { yStep }).max
+	};
+	return require_resolveChartValueRange.resolveChartValueRange(values, {
+		yMin,
+		yMax,
+		yStep
+	});
+};
+var resolveSeriesFill = (hasArea, hasDangerZone, dangerFillColor) => {
+	if (hasDangerZone) return {
+		target: { value: 0 },
+		...hasArea ? {} : { above: require_createChartAreaFillGradient.CHART_AREA_FILL_END_COLOR },
+		below: dangerFillColor
+	};
+	return hasArea ? "origin" : false;
+};
+var buildMultiLineChartConfig = ({ seriesList, colorHostElement, yMax, yMin, yStep = DEFAULT_Y_STEP, mirrorYAxis = true, straightSegments = false, zeroLine = false, dangerBelowZero = false, markers = [], skeleton = false, thinLines = false, verticalGrid = false, xAxisOffset = false, highlightedYTick, formatYTick, formatValue, formatTooltip, onSeriesClick, onPointClick }) => {
+	if (!require_areChartSeriesAligned.areChartSeriesAligned(seriesList)) return null;
+	const axisLabelColor = require_readCssColor.readCssColor(require_chartCssVariables.CHART_CSS_VARIABLES.axisLabel, colorHostElement);
+	const gridColor = require_readCssColor.readCssColor(require_chartCssVariables.CHART_CSS_VARIABLES.grid, colorHostElement);
+	const dangerFillColor = require_readCssColor.readCssColor(MULTI_LINE_DANGER_FILL_CSS_VARIABLE, colorHostElement);
+	const tooltipBackgroundColor = require_readCssColor.readCssColor(require_chartCssVariables.CHART_CSS_VARIABLES.tooltipBackground, colorHostElement);
+	const tooltipTextColor = require_readCssColor.readCssColor(require_chartCssVariables.CHART_CSS_VARIABLES.tooltipText, colorHostElement);
+	const range = resolveRange(seriesList, yMin, yMax, yStep, skeleton);
+	const chartLabels = (seriesList[0]?.points.map((point) => point.label) ?? []).map(require_splitChartAxisLabel.splitChartAxisLabel);
+	const lineBorderWidth = thinLines ? THIN_LINE_BORDER_WIDTH : LINE_BORDER_WIDTH;
+	const interactivity = require_chartInteractivity.createChartInteractivity({
+		kind: "series",
+		skeleton,
+		colorHostElement,
+		onIndexClick: onSeriesClick,
+		onElementIndexClick: onPointClick
+	});
+	return {
+		type: "line",
+		data: {
+			labels: chartLabels,
+			datasets: seriesList.map((seriesItem, seriesIndex) => {
+				const seriesColor = require_resolveMultiLineSeriesColor.resolveMultiLineSeriesColor(seriesIndex, colorHostElement, seriesItem.fillColor, skeleton);
+				const hasArea = Boolean(seriesItem.area) && !skeleton;
+				const hasDangerZone = dangerBelowZero && seriesIndex === 0 && !skeleton;
+				const areaFillGradient = (context) => require_createChartAreaFillGradient.createChartAreaFillGradient(context, seriesColor, require_createChartAreaFillGradient.CHART_AREA_FILL_END_COLOR, require_createChartAreaFillGradient.CHART_AREA_FILL_OPACITY);
+				const backgroundColor = hasArea ? areaFillGradient : seriesColor;
+				return {
+					label: seriesItem.label,
+					data: seriesItem.points.map((point) => point.value),
+					borderColor: seriesColor,
+					backgroundColor,
+					pointBackgroundColor: seriesColor,
+					pointHoverBackgroundColor: seriesColor,
+					...skeleton ? {} : {
+						hoverBorderColor: seriesColor,
+						hoverBackgroundColor: backgroundColor
+					},
+					borderWidth: lineBorderWidth,
+					...seriesItem.dashed && !skeleton ? { borderDash: DASHED_LINE_SEGMENTS } : {},
+					fill: resolveSeriesFill(hasArea, hasDangerZone, dangerFillColor),
+					pointRadius: straightSegments && !skeleton ? POINT_RADIUS : 0,
+					pointHoverRadius: 4,
+					tension: straightSegments ? 0 : DEFAULT_LINE_TENSION
+				};
+			})
+		},
+		options: {
+			responsive: true,
+			maintainAspectRatio: false,
+			layout: { padding: { top: markers.length > 0 ? MARKERS_LAYOUT_PADDING_TOP : 0 } },
+			onHover: interactivity.onHover,
+			onClick: interactivity.onClick,
+			interaction: require_chartSkeletonConfig.createChartSkeletonInteraction(skeleton, {
+				mode: "index",
+				intersect: false
+			}),
+			hover: skeleton ? void 0 : {
+				mode: "nearest",
+				intersect: false
+			},
+			plugins: {
+				legend: { display: false },
+				tooltip: {
+					enabled: require_chartSkeletonConfig.createChartSkeletonTooltipEnabled(skeleton),
+					backgroundColor: tooltipBackgroundColor,
+					titleColor: tooltipTextColor,
+					bodyColor: tooltipTextColor,
+					footerColor: tooltipTextColor,
+					displayColors: false,
+					position: require_createMultiLineTooltipCallbacks.MULTI_LINE_TOOLTIP_POSITIONER,
+					yAlign: "bottom",
+					xAlign: "center",
+					caretPadding: 8,
+					callbacks: formatTooltip ? require_createCustomTooltipCallbacks.createCustomTooltipCallbacks(formatTooltip) : require_createMultiLineTooltipCallbacks.createMultiLineTooltipCallbacks({
+						resolveTitle: (dataIndex) => chartLabels[dataIndex],
+						formatValue
+					})
+				}
+			},
+			scales: require_buildMultiLineChartScales.buildMultiLineChartScales({
+				axisLabelColor,
+				gridColor,
+				yMin: range.min,
+				yMax: range.max,
+				yStep,
+				mirrorYAxis,
+				verticalGrid,
+				xAxisOffset,
+				highlightedYTick: skeleton ? void 0 : highlightedYTick,
+				colorHostElement,
+				...formatYTick ? { formatYAxisTick: (tickValue) => typeof tickValue === "number" ? formatYTick(tickValue) : tickValue } : {}
+			})
+		},
+		plugins: require_chartSkeletonConfig.resolveChartSkeletonPlugins(skeleton, [
+			...zeroLine ? [require_createZeroLinePlugin.createZeroLinePlugin(colorHostElement)] : [],
+			require_createChartCrosshairPlugin.createChartCrosshairPlugin(colorHostElement),
+			...markers.length > 0 ? [require_createChartMarkersPlugin.createChartMarkersPlugin({ markers }, colorHostElement)] : [],
+			...interactivity.plugins
+		])
+	};
+};
+//#endregion
+exports.buildMultiLineChartConfig = buildMultiLineChartConfig;

package/dist/components/SChartMultiLine/utils/buildMultiLineChartConfig.js

@@ -0,0 +1,148 @@
+import { CHART_CSS_VARIABLES } from "../../../utils/chart/core/chartCssVariables.js";
+import { readCssColor } from "../../../utils/chart/css/readCssColor.js";
+import { MULTI_LINE_TOOLTIP_POSITIONER, createMultiLineTooltipCallbacks } from "../../../utils/chart/multiLine/createMultiLineTooltipCallbacks.js";
+import { createChartSkeletonInteraction, createChartSkeletonTooltipEnabled, resolveChartSkeletonPlugins } from "../../../utils/chart/core/chartSkeletonConfig.js";
+import { resolveChartValueRange } from "../../../utils/chart/core/resolveChartValueRange.js";
+import { createZeroLinePlugin } from "../../../utils/chart/core/createZeroLinePlugin.js";
+import { createChartMarkersPlugin } from "../../../utils/chart/core/createChartMarkersPlugin.js";
+import { CHART_AREA_FILL_END_COLOR, CHART_AREA_FILL_OPACITY, createChartAreaFillGradient } from "../../../utils/chart/line/createChartAreaFillGradient.js";
+import { areChartSeriesAligned } from "../../../utils/chart/stacked/areChartSeriesAligned.js";
+import { createChartCrosshairPlugin } from "../../../utils/chart/stacked/createChartCrosshairPlugin.js";
+import { createChartInteractivity } from "../../../utils/chart/core/chartInteractivity.js";
+import { resolveMultiLineSeriesColor } from "../../../utils/chart/multiLine/resolveMultiLineSeriesColor.js";
+import { buildMultiLineChartScales } from "../../../utils/chart/multiLine/buildMultiLineChartScales.js";
+import { splitChartAxisLabel } from "../../../utils/chart/core/splitChartAxisLabel.js";
+import { createCustomTooltipCallbacks } from "../../../utils/chart/core/createCustomTooltipCallbacks.js";
+//#region src/components/SChartMultiLine/utils/buildMultiLineChartConfig.ts
+var POINT_RADIUS = 3;
+var DEFAULT_LINE_TENSION = .4;
+var LINE_BORDER_WIDTH = 4;
+var THIN_LINE_BORDER_WIDTH = 1.5;
+var DEFAULT_Y_STEP = 5;
+var DASHED_LINE_SEGMENTS = [8, 8];
+var MARKERS_LAYOUT_PADDING_TOP = 16;
+var MULTI_LINE_DANGER_FILL_CSS_VARIABLE = "--s-ui-chart-multi-line-danger-fill";
+var resolveRange = (seriesList, yMin, yMax, yStep, skeleton) => {
+	const values = seriesList.flatMap((seriesItem) => seriesItem.points.map((point) => point.value));
+	if (skeleton) return {
+		min: yMin ?? 0,
+		max: yMax ?? resolveChartValueRange(values, { yStep }).max
+	};
+	return resolveChartValueRange(values, {
+		yMin,
+		yMax,
+		yStep
+	});
+};
+var resolveSeriesFill = (hasArea, hasDangerZone, dangerFillColor) => {
+	if (hasDangerZone) return {
+		target: { value: 0 },
+		...hasArea ? {} : { above: CHART_AREA_FILL_END_COLOR },
+		below: dangerFillColor
+	};
+	return hasArea ? "origin" : false;
+};
+var buildMultiLineChartConfig = ({ seriesList, colorHostElement, yMax, yMin, yStep = DEFAULT_Y_STEP, mirrorYAxis = true, straightSegments = false, zeroLine = false, dangerBelowZero = false, markers = [], skeleton = false, thinLines = false, verticalGrid = false, xAxisOffset = false, highlightedYTick, formatYTick, formatValue, formatTooltip, onSeriesClick, onPointClick }) => {
+	if (!areChartSeriesAligned(seriesList)) return null;
+	const axisLabelColor = readCssColor(CHART_CSS_VARIABLES.axisLabel, colorHostElement);
+	const gridColor = readCssColor(CHART_CSS_VARIABLES.grid, colorHostElement);
+	const dangerFillColor = readCssColor(MULTI_LINE_DANGER_FILL_CSS_VARIABLE, colorHostElement);
+	const tooltipBackgroundColor = readCssColor(CHART_CSS_VARIABLES.tooltipBackground, colorHostElement);
+	const tooltipTextColor = readCssColor(CHART_CSS_VARIABLES.tooltipText, colorHostElement);
+	const range = resolveRange(seriesList, yMin, yMax, yStep, skeleton);
+	const chartLabels = (seriesList[0]?.points.map((point) => point.label) ?? []).map(splitChartAxisLabel);
+	const lineBorderWidth = thinLines ? THIN_LINE_BORDER_WIDTH : LINE_BORDER_WIDTH;
+	const interactivity = createChartInteractivity({
+		kind: "series",
+		skeleton,
+		colorHostElement,
+		onIndexClick: onSeriesClick,
+		onElementIndexClick: onPointClick
+	});
+	return {
+		type: "line",
+		data: {
+			labels: chartLabels,
+			datasets: seriesList.map((seriesItem, seriesIndex) => {
+				const seriesColor = resolveMultiLineSeriesColor(seriesIndex, colorHostElement, seriesItem.fillColor, skeleton);
+				const hasArea = Boolean(seriesItem.area) && !skeleton;
+				const hasDangerZone = dangerBelowZero && seriesIndex === 0 && !skeleton;
+				const areaFillGradient = (context) => createChartAreaFillGradient(context, seriesColor, CHART_AREA_FILL_END_COLOR, CHART_AREA_FILL_OPACITY);
+				const backgroundColor = hasArea ? areaFillGradient : seriesColor;
+				return {
+					label: seriesItem.label,
+					data: seriesItem.points.map((point) => point.value),
+					borderColor: seriesColor,
+					backgroundColor,
+					pointBackgroundColor: seriesColor,
+					pointHoverBackgroundColor: seriesColor,
+					...skeleton ? {} : {
+						hoverBorderColor: seriesColor,
+						hoverBackgroundColor: backgroundColor
+					},
+					borderWidth: lineBorderWidth,
+					...seriesItem.dashed && !skeleton ? { borderDash: DASHED_LINE_SEGMENTS } : {},
+					fill: resolveSeriesFill(hasArea, hasDangerZone, dangerFillColor),
+					pointRadius: straightSegments && !skeleton ? POINT_RADIUS : 0,
+					pointHoverRadius: 4,
+					tension: straightSegments ? 0 : DEFAULT_LINE_TENSION
+				};
+			})
+		},
+		options: {
+			responsive: true,
+			maintainAspectRatio: false,
+			layout: { padding: { top: markers.length > 0 ? MARKERS_LAYOUT_PADDING_TOP : 0 } },
+			onHover: interactivity.onHover,
+			onClick: interactivity.onClick,
+			interaction: createChartSkeletonInteraction(skeleton, {
+				mode: "index",
+				intersect: false
+			}),
+			hover: skeleton ? void 0 : {
+				mode: "nearest",
+				intersect: false
+			},
+			plugins: {
+				legend: { display: false },
+				tooltip: {
+					enabled: createChartSkeletonTooltipEnabled(skeleton),
+					backgroundColor: tooltipBackgroundColor,
+					titleColor: tooltipTextColor,
+					bodyColor: tooltipTextColor,
+					footerColor: tooltipTextColor,
+					displayColors: false,
+					position: MULTI_LINE_TOOLTIP_POSITIONER,
+					yAlign: "bottom",
+					xAlign: "center",
+					caretPadding: 8,
+					callbacks: formatTooltip ? createCustomTooltipCallbacks(formatTooltip) : createMultiLineTooltipCallbacks({
+						resolveTitle: (dataIndex) => chartLabels[dataIndex],
+						formatValue
+					})
+				}
+			},
+			scales: buildMultiLineChartScales({
+				axisLabelColor,
+				gridColor,
+				yMin: range.min,
+				yMax: range.max,
+				yStep,
+				mirrorYAxis,
+				verticalGrid,
+				xAxisOffset,
+				highlightedYTick: skeleton ? void 0 : highlightedYTick,
+				colorHostElement,
+				...formatYTick ? { formatYAxisTick: (tickValue) => typeof tickValue === "number" ? formatYTick(tickValue) : tickValue } : {}
+			})
+		},
+		plugins: resolveChartSkeletonPlugins(skeleton, [
+			...zeroLine ? [createZeroLinePlugin(colorHostElement)] : [],
+			createChartCrosshairPlugin(colorHostElement),
+			...markers.length > 0 ? [createChartMarkersPlugin({ markers }, colorHostElement)] : [],
+			...interactivity.plugins
+		])
+	};
+};
+//#endregion
+export { buildMultiLineChartConfig };

package/dist/components/SChartMultiLine/utils/skeletonMultiLineSeries.cjs

@@ -0,0 +1,48 @@
+const require_buildChartSeriesPoints = require("../../../utils/chart/core/buildChartSeriesPoints.cjs");
+//#region src/components/SChartMultiLine/utils/skeletonMultiLineSeries.ts
+var skeletonChartLabels = [
+	"26.01",
+	"2.02",
+	"9.02",
+	"16.02",
+	"23.02",
+	"2.03",
+	"9.03",
+	"16.03",
+	"23.03",
+	"30.03",
+	"6.04"
+];
+var skeletonMultiLineSeries = [{
+	label: "Series 1",
+	points: require_buildChartSeriesPoints.buildChartSeriesPoints(skeletonChartLabels, [
+		30,
+		34,
+		38,
+		44,
+		46,
+		50,
+		54,
+		56,
+		58,
+		60,
+		62
+	])
+}, {
+	label: "Series 2",
+	points: require_buildChartSeriesPoints.buildChartSeriesPoints(skeletonChartLabels, [
+		22,
+		24,
+		26,
+		28,
+		30,
+		32,
+		33,
+		35,
+		36,
+		38,
+		40
+	])
+}];
+//#endregion
+exports.skeletonMultiLineSeries = skeletonMultiLineSeries;

package/dist/components/SChartMultiLine/utils/skeletonMultiLineSeries.js

@@ -0,0 +1,48 @@
+import { buildChartSeriesPoints } from "../../../utils/chart/core/buildChartSeriesPoints.js";
+//#region src/components/SChartMultiLine/utils/skeletonMultiLineSeries.ts
+var skeletonChartLabels = [
+	"26.01",
+	"2.02",
+	"9.02",
+	"16.02",
+	"23.02",
+	"2.03",
+	"9.03",
+	"16.03",
+	"23.03",
+	"30.03",
+	"6.04"
+];
+var skeletonMultiLineSeries = [{
+	label: "Series 1",
+	points: buildChartSeriesPoints(skeletonChartLabels, [
+		30,
+		34,
+		38,
+		44,
+		46,
+		50,
+		54,
+		56,
+		58,
+		60,
+		62
+	])
+}, {
+	label: "Series 2",
+	points: buildChartSeriesPoints(skeletonChartLabels, [
+		22,
+		24,
+		26,
+		28,
+		30,
+		32,
+		33,
+		35,
+		36,
+		38,
+		40
+	])
+}];
+//#endregion
+export { skeletonMultiLineSeries };

package/dist/components/SChartPie/SChartPie.types.cjs

@@ -0,0 +1,10 @@
+//#region src/components/SChartPie/SChartPie.types.ts
+var ESChartPieLegendView = /* @__PURE__ */ function(ESChartPieLegendView) {
+	/** Компактная легенда: цвет и подпись. */
+	ESChartPieLegendView["COMPACT"] = "compact";
+	/** Строки-список: цвет, подпись (слот `legend-label`) и значение в отдельной колонке. */
+	ESChartPieLegendView["LIST"] = "list";
+	return ESChartPieLegendView;
+}({});
+//#endregion
+exports.ESChartPieLegendView = ESChartPieLegendView;

package/dist/components/SChartPie/SChartPie.types.js

@@ -0,0 +1,10 @@
+//#region src/components/SChartPie/SChartPie.types.ts
+var ESChartPieLegendView = /* @__PURE__ */ function(ESChartPieLegendView) {
+	/** Компактная легенда: цвет и подпись. */
+	ESChartPieLegendView["COMPACT"] = "compact";
+	/** Строки-список: цвет, подпись (слот `legend-label`) и значение в отдельной колонке. */
+	ESChartPieLegendView["LIST"] = "list";
+	return ESChartPieLegendView;
+}({});
+//#endregion
+export { ESChartPieLegendView };

package/dist/components/SChartPie/SChartPie.vue.cjs

@@ -0,0 +1,6 @@
+const require_SChartPie_vue_vue_type_script_setup_true_lang = require("./SChartPie.vue_vue_type_script_setup_true_lang.cjs");
+;/* empty css                                                               */
+//#region src/components/SChartPie/SChartPie.vue
+var SChartPie_default = require_SChartPie_vue_vue_type_script_setup_true_lang.default;
+//#endregion
+exports.default = SChartPie_default;

package/dist/components/SChartPie/SChartPie.vue.js

@@ -0,0 +1,6 @@
+import SChartPie_vue_vue_type_script_setup_true_lang_default from "./SChartPie.vue_vue_type_script_setup_true_lang.js";
+/* empty css                                                             */
+//#region src/components/SChartPie/SChartPie.vue
+var SChartPie_default = SChartPie_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { SChartPie_default as default };

package/dist/components/SChartPie/SChartPie.vue_vue_type_script_setup_true_lang.cjs

@@ -0,0 +1,219 @@
+const require_chartCssVariables = require("../../utils/chart/core/chartCssVariables.cjs");
+const require_SChartLegend = require("../SChartLegend/SChartLegend.vue.cjs");
+const require_SChartSkeletonHost_types = require("../SChartSkeletonHost/SChartSkeletonHost.types.cjs");
+const require_SChartSkeletonHost = require("../SChartSkeletonHost/SChartSkeletonHost.vue.cjs");
+const require_resolvePieSliceColor = require("../../utils/chart/pie/resolvePieSliceColor.cjs");
+const require_useChart = require("../../composables/useChart.cjs");
+const require_useChartInteractivity = require("../../composables/useChartInteractivity.cjs");
+const require_useHasListener = require("../../composables/useHasListener.cjs");
+const require_SChartPie_types = require("./SChartPie.types.cjs");
+const require_buildPieChartConfig = require("./utils/buildPieChartConfig.cjs");
+const require_skeletonPieSlices = require("./utils/skeletonPieSlices.cjs");
+let vue = require("vue");
+//#region src/components/SChartPie/SChartPie.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = {
+	key: 0,
+	class: "s-ui-chart-pie__center"
+};
+var _hoisted_2 = [
+	"role",
+	"tabindex",
+	"onMouseenter",
+	"onClick",
+	"onKeydown"
+];
+var _hoisted_3 = {
+	class: "s-ui-chart-pie__legend-swatch-slot",
+	"aria-hidden": "true"
+};
+var _hoisted_4 = { class: "s-ui-chart-pie__legend-label" };
+var _hoisted_5 = { class: "s-ui-chart-pie__legend-value" };
+var _hoisted_6 = {
+	key: 0,
+	class: "s-ui-chart-pie__legend-toggle-row"
+};
+var _hoisted_7 = ["aria-expanded"];
+var SChartPie_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ (0, vue.defineComponent)({
+	__name: "SChartPie",
+	props: {
+		slices: { default: () => [] },
+		loading: {
+			type: Boolean,
+			default: false
+		},
+		showLegend: {
+			type: Boolean,
+			default: true
+		},
+		legendView: { default: () => require_SChartPie_types.ESChartPieLegendView.COMPACT },
+		formatValue: { type: Function },
+		showBadges: {
+			type: Boolean,
+			default: true
+		},
+		formatBadge: { type: Function },
+		legendLimit: {}
+	},
+	emits: ["sliceClick"],
+	setup(__props, { expose: __expose, emit: __emit }) {
+		const emit = __emit;
+		const slots = (0, vue.useSlots)();
+		const MUTED_SWATCH_COLOR = `var(${require_chartCssVariables.CHART_CSS_VARIABLES.fillMuted})`;
+		const chartSkeletonHostType = require_SChartSkeletonHost_types.ESChartSkeletonHostType;
+		const chartRootRef = (0, vue.useTemplateRef)("chartRootRef");
+		const chartCanvasRef = (0, vue.useTemplateRef)("chartCanvasRef");
+		const highlightedSliceIndex = (0, vue.ref)(null);
+		const isLegendExpanded = (0, vue.ref)(false);
+		const isListLegend = (0, vue.computed)(() => __props.legendView === require_SChartPie_types.ESChartPieLegendView.LIST && !__props.loading);
+		const rootClasses = (0, vue.computed)(() => ["s-ui-chart-pie", {
+			"s-ui-chart-pie--skeleton": __props.loading,
+			"s-ui-chart-pie--legend-list": isListLegend.value
+		}]);
+		const chartSlices = (0, vue.computed)(() => {
+			if (__props.loading) return require_skeletonPieSlices.skeletonPieSlices;
+			return __props.slices;
+		});
+		const handleSliceClick = (index) => {
+			const item = __props.slices[index];
+			if (item) emit("sliceClick", index, item);
+		};
+		const handleSliceHover = (index) => {
+			highlightedSliceIndex.value = index;
+		};
+		const hasSliceClickListener = require_useHasListener.useHasListener("onSliceClick");
+		const handleLegendRowClick = (index) => {
+			if (hasSliceClickListener()) handleSliceClick(index);
+		};
+		const chartConfig = (0, vue.computed)(() => {
+			if (!__props.loading && __props.slices.length === 0) return null;
+			return require_buildPieChartConfig.buildPieChartConfig({
+				sliceList: chartSlices.value,
+				colorHostElement: chartRootRef.value,
+				skeleton: __props.loading,
+				formatValue: __props.formatValue,
+				formatBadge: __props.formatBadge,
+				showBadges: __props.showBadges,
+				onSliceClick: hasSliceClickListener() ? handleSliceClick : void 0,
+				onSliceHover: isListLegend.value ? handleSliceHover : void 0
+			});
+		});
+		const legendItems = (0, vue.computed)(() => {
+			return chartSlices.value.map((sliceItem, sliceIndex) => ({
+				label: sliceItem.label,
+				color: require_resolvePieSliceColor.resolvePieSliceColor(sliceIndex, chartRootRef.value, sliceItem.fillColor, __props.loading)
+			}));
+		});
+		const hiddenLegendCount = (0, vue.computed)(() => __props.legendLimit === void 0 ? 0 : Math.max(__props.slices.length - __props.legendLimit, 0));
+		const visibleSlices = (0, vue.computed)(() => isLegendExpanded.value || __props.legendLimit === void 0 ? __props.slices : __props.slices.slice(0, __props.legendLimit));
+		const legendToggleSlotProps = (0, vue.computed)(() => ({
+			expanded: isLegendExpanded.value,
+			hiddenCount: hiddenLegendCount.value
+		}));
+		const legendToggleText = (0, vue.computed)(() => isLegendExpanded.value ? "−" : `+${hiddenLegendCount.value}`);
+		const toggleLegend = () => {
+			isLegendExpanded.value = !isLegendExpanded.value;
+		};
+		const legendRows = (0, vue.computed)(() => visibleSlices.value.map((sliceItem, sliceIndex) => {
+			const isActive = highlightedSliceIndex.value === sliceIndex;
+			const isMuted = highlightedSliceIndex.value !== null && !isActive;
+			const slotProps = {
+				slice: sliceItem,
+				index: sliceIndex,
+				active: isActive,
+				muted: isMuted
+			};
+			return {
+				key: `${sliceIndex}-${sliceItem.label}`,
+				index: sliceIndex,
+				label: sliceItem.label,
+				valueText: __props.formatValue ? __props.formatValue(sliceItem.value) : String(sliceItem.value),
+				slotProps,
+				role: hasSliceClickListener() ? "button" : void 0,
+				tabindex: hasSliceClickListener() ? 0 : void 0,
+				classes: ["s-ui-chart-pie__legend-row", {
+					"s-ui-chart-pie__legend-row--active": isActive,
+					"s-ui-chart-pie__legend-row--muted": isMuted,
+					"s-ui-chart-pie__legend-row--clickable": hasSliceClickListener()
+				}],
+				swatchStyle: { backgroundColor: isMuted ? MUTED_SWATCH_COLOR : legendItems.value[sliceIndex]?.color }
+			};
+		}));
+		const { chartInstance } = require_useChart.useChart({
+			canvasRef: chartCanvasRef,
+			config: chartConfig,
+			enabled: (0, vue.computed)(() => __props.loading || __props.slices.length > 0)
+		});
+		const { exportImage, handleLegendItemHover: dimLegendSlice } = require_useChartInteractivity.useChartInteractivity({
+			chartInstance,
+			canvasRef: chartCanvasRef,
+			colorHostElement: chartRootRef,
+			legendDimKind: "element"
+		});
+		const handleLegendItemHover = (index) => {
+			if (isListLegend.value) highlightedSliceIndex.value = index;
+			dimLegendSlice(index);
+		};
+		__expose({ 
+		/** PNG-снимок текущего чарта (dataURL) с непрозрачным фоном. */
+exportImage });
+		return (_ctx, _cache) => {
+			return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
+				ref_key: "chartRootRef",
+				ref: chartRootRef,
+				class: (0, vue.normalizeClass)(rootClasses.value)
+			}, [(0, vue.createElementVNode)("div", {
+				class: "s-ui-chart-pie__canvas-wrap",
+				onMouseleave: _cache[0] || (_cache[0] = ($event) => handleSliceHover(null))
+			}, [(0, vue.createVNode)((0, vue.unref)(require_SChartSkeletonHost.default), {
+				loading: __props.loading,
+				type: (0, vue.unref)(chartSkeletonHostType).PIE
+			}, {
+				default: (0, vue.withCtx)(() => [(0, vue.createElementVNode)("canvas", {
+					ref_key: "chartCanvasRef",
+					ref: chartCanvasRef,
+					class: "s-ui-chart-pie__canvas"
+				}, null, 512)]),
+				_: 1
+			}, 8, ["loading", "type"]), (0, vue.unref)(slots).center && !__props.loading ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_1, [(0, vue.renderSlot)(_ctx.$slots, "center")])) : (0, vue.createCommentVNode)("", true)], 32), __props.showLegend && legendItems.value.length ? ((0, vue.openBlock)(), (0, vue.createElementBlock)(vue.Fragment, { key: 0 }, [isListLegend.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("ul", {
+				key: 0,
+				class: "s-ui-chart-pie__legend-list",
+				onMouseleave: _cache[1] || (_cache[1] = ($event) => handleLegendItemHover(null))
+			}, [((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)(legendRows.value, (legendRow) => {
+				return (0, vue.openBlock)(), (0, vue.createElementBlock)("li", {
+					key: legendRow.key,
+					class: (0, vue.normalizeClass)(legendRow.classes),
+					role: legendRow.role,
+					tabindex: legendRow.tabindex,
+					onMouseenter: ($event) => handleLegendItemHover(legendRow.index),
+					onClick: ($event) => handleLegendRowClick(legendRow.index),
+					onKeydown: (0, vue.withKeys)(($event) => handleLegendRowClick(legendRow.index), ["enter"])
+				}, [
+					(0, vue.createElementVNode)("span", _hoisted_3, [(0, vue.createElementVNode)("span", {
+						class: "s-ui-chart-pie__legend-swatch",
+						style: (0, vue.normalizeStyle)(legendRow.swatchStyle)
+					}, null, 4)]),
+					(0, vue.createElementVNode)("span", _hoisted_4, [(0, vue.renderSlot)(_ctx.$slots, "legend-label", (0, vue.mergeProps)({ ref_for: true }, legendRow.slotProps), () => [(0, vue.createTextVNode)((0, vue.toDisplayString)(legendRow.label), 1)])]),
+					(0, vue.createElementVNode)("span", _hoisted_5, (0, vue.toDisplayString)(legendRow.valueText), 1)
+				], 42, _hoisted_2);
+			}), 128)), hiddenLegendCount.value > 0 ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("li", _hoisted_6, [(0, vue.createElementVNode)("button", {
+				type: "button",
+				class: "s-ui-chart-pie__legend-toggle",
+				"aria-expanded": isLegendExpanded.value,
+				onClick: toggleLegend
+			}, [(0, vue.renderSlot)(_ctx.$slots, "legend-toggle", (0, vue.normalizeProps)((0, vue.guardReactiveProps)(legendToggleSlotProps.value)), () => [(0, vue.createTextVNode)((0, vue.toDisplayString)(legendToggleText.value), 1)])], 8, _hoisted_7)])) : (0, vue.createCommentVNode)("", true)], 32)) : ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(require_SChartLegend.default), {
+				key: 1,
+				items: legendItems.value,
+				disabled: __props.loading,
+				interactive: !__props.loading,
+				direction: "column",
+				onItemHover: handleLegendItemHover
+			}, null, 8, [
+				"items",
+				"disabled",
+				"interactive"
+			]))], 64)) : (0, vue.createCommentVNode)("", true)], 2);
+		};
+	}
+});
+//#endregion
+exports.default = SChartPie_vue_vue_type_script_setup_true_lang_default;