@shtabapp/ui-kit 1.85.0 → 1.85.1

package/dist/components/SChartHorizontalBar/SChartHorizontalBar.vue.js

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

package/dist/components/SChartHorizontalBar/SChartHorizontalBar.vue_vue_type_script_setup_true_lang.cjs

@@ -0,0 +1,95 @@
+const require_SChartSkeletonHost = require("../SChartSkeletonHost/SChartSkeletonHost.vue.cjs");
+const require_useChart = require("../../composables/useChart.cjs");
+const require_useChartInteractivity = require("../../composables/useChartInteractivity.cjs");
+const require_useHasListener = require("../../composables/useHasListener.cjs");
+const require_buildSChartHorizontalBarConfig = require("./utils/buildSChartHorizontalBarConfig.cjs");
+const require_skeletonHorizontalBarFixture = require("../../utils/chart/horizontalBar/skeletonHorizontalBarFixture.cjs");
+let vue = require("vue");
+//#region src/components/SChartHorizontalBar/SChartHorizontalBar.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = { class: "s-ui-chart-horizontal-bar__canvas-wrap" };
+var SChartHorizontalBar_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ (0, vue.defineComponent)({
+	__name: "SChartHorizontalBar",
+	props: {
+		items: { default: () => [] },
+		loading: {
+			type: Boolean,
+			default: false
+		},
+		xMin: {},
+		xMax: {},
+		xStep: {},
+		barThickness: {},
+		mirrorXAxis: {
+			type: Boolean,
+			default: false
+		},
+		showValues: {
+			type: Boolean,
+			default: false
+		},
+		formatValue: { type: Function },
+		formatXTick: { type: Function },
+		formatTooltip: { type: Function }
+	},
+	emits: ["barClick"],
+	setup(__props, { expose: __expose, emit: __emit }) {
+		const emit = __emit;
+		const chartRootRef = (0, vue.useTemplateRef)("chartRootRef");
+		const chartCanvasRef = (0, vue.useTemplateRef)("chartCanvasRef");
+		const chartItems = (0, vue.computed)(() => {
+			if (__props.loading) return require_skeletonHorizontalBarFixture.skeletonHorizontalBarItems;
+			return __props.items;
+		});
+		const handleBarClick = (index) => {
+			const item = __props.items[index];
+			if (item) emit("barClick", index, item);
+		};
+		const hasBarClickListener = require_useHasListener.useHasListener("onBarClick");
+		const { chartInstance } = require_useChart.useChart({
+			canvasRef: chartCanvasRef,
+			config: (0, vue.computed)(() => {
+				if (!__props.loading && __props.items.length === 0) return null;
+				return require_buildSChartHorizontalBarConfig.buildSChartHorizontalBarConfig({
+					items: chartItems.value,
+					colorHostElement: chartRootRef.value,
+					xMax: __props.loading ? 60 : __props.xMax,
+					xMin: __props.loading ? 0 : __props.xMin,
+					xStep: __props.loading ? 10 : __props.xStep,
+					skeleton: __props.loading,
+					barThickness: __props.barThickness,
+					mirrorXAxis: __props.loading ? false : __props.mirrorXAxis,
+					showValues: __props.showValues,
+					formatValue: __props.loading ? void 0 : __props.formatValue,
+					formatXTick: __props.loading ? void 0 : __props.formatXTick,
+					formatTooltip: __props.loading ? void 0 : __props.formatTooltip,
+					onBarClick: hasBarClickListener() ? handleBarClick : void 0
+				});
+			}),
+			enabled: (0, vue.computed)(() => __props.loading || __props.items.length > 0)
+		});
+		const { exportImage } = require_useChartInteractivity.useChartInteractivity({
+			chartInstance,
+			canvasRef: chartCanvasRef,
+			colorHostElement: chartRootRef
+		});
+		__expose({ 
+		/** PNG-снимок текущего чарта (dataURL) с непрозрачным фоном. */
+exportImage });
+		return (_ctx, _cache) => {
+			return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
+				ref_key: "chartRootRef",
+				ref: chartRootRef,
+				class: (0, vue.normalizeClass)(["s-ui-chart-horizontal-bar", { "s-ui-chart-horizontal-bar--skeleton": __props.loading }])
+			}, [(0, vue.createElementVNode)("div", _hoisted_1, [(0, vue.createVNode)((0, vue.unref)(require_SChartSkeletonHost.default), { loading: __props.loading }, {
+				default: (0, vue.withCtx)(() => [(0, vue.createElementVNode)("canvas", {
+					ref_key: "chartCanvasRef",
+					ref: chartCanvasRef,
+					class: "s-ui-chart-horizontal-bar__canvas"
+				}, null, 512)]),
+				_: 1
+			}, 8, ["loading"])])], 2);
+		};
+	}
+});
+//#endregion
+exports.default = SChartHorizontalBar_vue_vue_type_script_setup_true_lang_default;

package/dist/components/SChartHorizontalBar/SChartHorizontalBar.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,95 @@
+import SChartSkeletonHost_default from "../SChartSkeletonHost/SChartSkeletonHost.vue.js";
+import { useChart } from "../../composables/useChart.js";
+import { useChartInteractivity } from "../../composables/useChartInteractivity.js";
+import { useHasListener } from "../../composables/useHasListener.js";
+import { buildSChartHorizontalBarConfig } from "./utils/buildSChartHorizontalBarConfig.js";
+import { skeletonHorizontalBarItems } from "../../utils/chart/horizontalBar/skeletonHorizontalBarFixture.js";
+import { computed, createElementBlock, createElementVNode, createVNode, defineComponent, normalizeClass, openBlock, unref, useTemplateRef, withCtx } from "vue";
+//#region src/components/SChartHorizontalBar/SChartHorizontalBar.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = { class: "s-ui-chart-horizontal-bar__canvas-wrap" };
+var SChartHorizontalBar_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "SChartHorizontalBar",
+	props: {
+		items: { default: () => [] },
+		loading: {
+			type: Boolean,
+			default: false
+		},
+		xMin: {},
+		xMax: {},
+		xStep: {},
+		barThickness: {},
+		mirrorXAxis: {
+			type: Boolean,
+			default: false
+		},
+		showValues: {
+			type: Boolean,
+			default: false
+		},
+		formatValue: { type: Function },
+		formatXTick: { type: Function },
+		formatTooltip: { type: Function }
+	},
+	emits: ["barClick"],
+	setup(__props, { expose: __expose, emit: __emit }) {
+		const emit = __emit;
+		const chartRootRef = useTemplateRef("chartRootRef");
+		const chartCanvasRef = useTemplateRef("chartCanvasRef");
+		const chartItems = computed(() => {
+			if (__props.loading) return skeletonHorizontalBarItems;
+			return __props.items;
+		});
+		const handleBarClick = (index) => {
+			const item = __props.items[index];
+			if (item) emit("barClick", index, item);
+		};
+		const hasBarClickListener = useHasListener("onBarClick");
+		const { chartInstance } = useChart({
+			canvasRef: chartCanvasRef,
+			config: computed(() => {
+				if (!__props.loading && __props.items.length === 0) return null;
+				return buildSChartHorizontalBarConfig({
+					items: chartItems.value,
+					colorHostElement: chartRootRef.value,
+					xMax: __props.loading ? 60 : __props.xMax,
+					xMin: __props.loading ? 0 : __props.xMin,
+					xStep: __props.loading ? 10 : __props.xStep,
+					skeleton: __props.loading,
+					barThickness: __props.barThickness,
+					mirrorXAxis: __props.loading ? false : __props.mirrorXAxis,
+					showValues: __props.showValues,
+					formatValue: __props.loading ? void 0 : __props.formatValue,
+					formatXTick: __props.loading ? void 0 : __props.formatXTick,
+					formatTooltip: __props.loading ? void 0 : __props.formatTooltip,
+					onBarClick: hasBarClickListener() ? handleBarClick : void 0
+				});
+			}),
+			enabled: computed(() => __props.loading || __props.items.length > 0)
+		});
+		const { exportImage } = useChartInteractivity({
+			chartInstance,
+			canvasRef: chartCanvasRef,
+			colorHostElement: chartRootRef
+		});
+		__expose({ 
+		/** PNG-снимок текущего чарта (dataURL) с непрозрачным фоном. */
+exportImage });
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				ref_key: "chartRootRef",
+				ref: chartRootRef,
+				class: normalizeClass(["s-ui-chart-horizontal-bar", { "s-ui-chart-horizontal-bar--skeleton": __props.loading }])
+			}, [createElementVNode("div", _hoisted_1, [createVNode(unref(SChartSkeletonHost_default), { loading: __props.loading }, {
+				default: withCtx(() => [createElementVNode("canvas", {
+					ref_key: "chartCanvasRef",
+					ref: chartCanvasRef,
+					class: "s-ui-chart-horizontal-bar__canvas"
+				}, null, 512)]),
+				_: 1
+			}, 8, ["loading"])])], 2);
+		};
+	}
+});
+//#endregion
+export { SChartHorizontalBar_vue_vue_type_script_setup_true_lang_default as default };

package/dist/components/SChartHorizontalBar/utils/buildSChartHorizontalBarConfig.cjs

@@ -0,0 +1,5 @@
+const require_buildHorizontalBarChartConfig = require("../../../utils/chart/horizontalBar/buildHorizontalBarChartConfig.cjs");
+//#region src/components/SChartHorizontalBar/utils/buildSChartHorizontalBarConfig.ts
+var buildSChartHorizontalBarConfig = (options) => require_buildHorizontalBarChartConfig.buildHorizontalBarChartConfig(options);
+//#endregion
+exports.buildSChartHorizontalBarConfig = buildSChartHorizontalBarConfig;

package/dist/components/SChartHorizontalBar/utils/buildSChartHorizontalBarConfig.js

@@ -0,0 +1,5 @@
+import { buildHorizontalBarChartConfig } from "../../../utils/chart/horizontalBar/buildHorizontalBarChartConfig.js";
+//#region src/components/SChartHorizontalBar/utils/buildSChartHorizontalBarConfig.ts
+var buildSChartHorizontalBarConfig = (options) => buildHorizontalBarChartConfig(options);
+//#endregion
+export { buildSChartHorizontalBarConfig };

package/dist/components/SChartLegend/SChartLegend.types.cjs

@@ -0,0 +1,10 @@
+//#region src/components/SChartLegend/SChartLegend.types.ts
+var ESChartLegendSize = /* @__PURE__ */ function(ESChartLegendSize) {
+	/** Подпись 10px — компактная легенда под чартом. */
+	ESChartLegendSize["SMALL"] = "small";
+	/** Подпись 14px в строке 32px — легенда-фильтр отчётов. */
+	ESChartLegendSize["MEDIUM"] = "medium";
+	return ESChartLegendSize;
+}({});
+//#endregion
+exports.ESChartLegendSize = ESChartLegendSize;

package/dist/components/SChartLegend/SChartLegend.types.js

@@ -0,0 +1,10 @@
+//#region src/components/SChartLegend/SChartLegend.types.ts
+var ESChartLegendSize = /* @__PURE__ */ function(ESChartLegendSize) {
+	/** Подпись 10px — компактная легенда под чартом. */
+	ESChartLegendSize["SMALL"] = "small";
+	/** Подпись 14px в строке 32px — легенда-фильтр отчётов. */
+	ESChartLegendSize["MEDIUM"] = "medium";
+	return ESChartLegendSize;
+}({});
+//#endregion
+export { ESChartLegendSize };

package/dist/components/SChartLegend/SChartLegend.vue.cjs

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

package/dist/components/SChartLegend/SChartLegend.vue.js

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

package/dist/components/SChartLegend/SChartLegend.vue_vue_type_script_setup_true_lang.cjs

@@ -0,0 +1,101 @@
+const require_chartCssVariables = require("../../utils/chart/core/chartCssVariables.cjs");
+const require_SChartLegend_types = require("./SChartLegend.types.cjs");
+let vue = require("vue");
+//#region src/components/SChartLegend/SChartLegend.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["onMouseenter"];
+var _hoisted_2 = {
+	class: "s-ui-chart-legend__swatch-slot",
+	"aria-hidden": "true"
+};
+var _hoisted_3 = { class: "s-ui-chart-legend__label" };
+var SChartLegend_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ (0, vue.defineComponent)({
+	__name: "SChartLegend",
+	props: {
+		items: {},
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		direction: { default: "row" },
+		interactive: {
+			type: Boolean,
+			default: false
+		},
+		size: { default: () => require_SChartLegend_types.ESChartLegendSize.SMALL },
+		selectable: {
+			type: Boolean,
+			default: false
+		},
+		activeIndex: { default: null },
+		activeIndexes: { default: () => [] }
+	},
+	emits: ["itemHover", "itemClick"],
+	setup(__props, { emit: __emit }) {
+		const emit = __emit;
+		const MUTED_SWATCH_COLOR = `var(${require_chartCssVariables.CHART_CSS_VARIABLES.fillMuted})`;
+		const itemTag = (0, vue.computed)(() => __props.selectable ? "button" : "span");
+		const legendClasses = (0, vue.computed)(() => [
+			"s-ui-chart-legend",
+			`s-ui-chart-legend--size-${__props.size}`,
+			{
+				"s-ui-chart-legend--disabled": __props.disabled,
+				"s-ui-chart-legend--column": __props.direction === "column",
+				"s-ui-chart-legend--selectable": __props.selectable
+			}
+		]);
+		const legendEntries = (0, vue.computed)(() => __props.items.map((legendItem, index) => {
+			const isActive = __props.activeIndex === index || __props.activeIndexes.includes(index);
+			const isMuted = (__props.activeIndex !== null || __props.activeIndexes.length > 0) && !isActive;
+			return {
+				index,
+				label: legendItem.label,
+				text: __props.size === require_SChartLegend_types.ESChartLegendSize.SMALL ? `— ${legendItem.label}` : legendItem.label,
+				isActive,
+				classes: ["s-ui-chart-legend__entry", {
+					"s-ui-chart-legend__entry--active": isActive,
+					"s-ui-chart-legend__entry--muted": isMuted
+				}],
+				swatchClasses: ["s-ui-chart-legend__swatch", { "s-ui-chart-legend__swatch--line": legendItem.marker === "line" }],
+				swatchStyle: { backgroundColor: isMuted ? MUTED_SWATCH_COLOR : legendItem.color }
+			};
+		}));
+		const handleItemHover = (index) => {
+			if (__props.interactive) emit("itemHover", index);
+		};
+		const handleItemClick = (index) => {
+			if (__props.selectable && !__props.disabled) emit("itemClick", index);
+		};
+		return (_ctx, _cache) => {
+			return (0, vue.openBlock)(), (0, vue.createElementBlock)("ul", {
+				class: (0, vue.normalizeClass)(legendClasses.value),
+				onMouseleave: _cache[0] || (_cache[0] = ($event) => handleItemHover(null))
+			}, [((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)(legendEntries.value, (legendEntry) => {
+				return (0, vue.openBlock)(), (0, vue.createElementBlock)("li", {
+					key: legendEntry.label,
+					class: "s-ui-chart-legend__item",
+					onMouseenter: ($event) => handleItemHover(legendEntry.index)
+				}, [((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.resolveDynamicComponent)(itemTag.value), {
+					class: (0, vue.normalizeClass)(legendEntry.classes),
+					type: __props.selectable ? "button" : void 0,
+					disabled: __props.selectable ? __props.disabled : void 0,
+					"aria-pressed": __props.selectable ? legendEntry.isActive : void 0,
+					onClick: ($event) => handleItemClick(legendEntry.index)
+				}, {
+					default: (0, vue.withCtx)(() => [(0, vue.createElementVNode)("span", _hoisted_2, [(0, vue.createElementVNode)("span", {
+						class: (0, vue.normalizeClass)(legendEntry.swatchClasses),
+						style: (0, vue.normalizeStyle)(legendEntry.swatchStyle)
+					}, null, 6)]), (0, vue.createElementVNode)("span", _hoisted_3, (0, vue.toDisplayString)(legendEntry.text), 1)]),
+					_: 2
+				}, 1032, [
+					"class",
+					"type",
+					"disabled",
+					"aria-pressed",
+					"onClick"
+				]))], 40, _hoisted_1);
+			}), 128))], 34);
+		};
+	}
+});
+//#endregion
+exports.default = SChartLegend_vue_vue_type_script_setup_true_lang_default;

package/dist/components/SChartLegend/SChartLegend.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,101 @@
+import { CHART_CSS_VARIABLES } from "../../utils/chart/core/chartCssVariables.js";
+import { ESChartLegendSize } from "./SChartLegend.types.js";
+import { Fragment, computed, createBlock, createElementBlock, createElementVNode, defineComponent, normalizeClass, normalizeStyle, openBlock, renderList, resolveDynamicComponent, toDisplayString, withCtx } from "vue";
+//#region src/components/SChartLegend/SChartLegend.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["onMouseenter"];
+var _hoisted_2 = {
+	class: "s-ui-chart-legend__swatch-slot",
+	"aria-hidden": "true"
+};
+var _hoisted_3 = { class: "s-ui-chart-legend__label" };
+var SChartLegend_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "SChartLegend",
+	props: {
+		items: {},
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		direction: { default: "row" },
+		interactive: {
+			type: Boolean,
+			default: false
+		},
+		size: { default: () => ESChartLegendSize.SMALL },
+		selectable: {
+			type: Boolean,
+			default: false
+		},
+		activeIndex: { default: null },
+		activeIndexes: { default: () => [] }
+	},
+	emits: ["itemHover", "itemClick"],
+	setup(__props, { emit: __emit }) {
+		const emit = __emit;
+		const MUTED_SWATCH_COLOR = `var(${CHART_CSS_VARIABLES.fillMuted})`;
+		const itemTag = computed(() => __props.selectable ? "button" : "span");
+		const legendClasses = computed(() => [
+			"s-ui-chart-legend",
+			`s-ui-chart-legend--size-${__props.size}`,
+			{
+				"s-ui-chart-legend--disabled": __props.disabled,
+				"s-ui-chart-legend--column": __props.direction === "column",
+				"s-ui-chart-legend--selectable": __props.selectable
+			}
+		]);
+		const legendEntries = computed(() => __props.items.map((legendItem, index) => {
+			const isActive = __props.activeIndex === index || __props.activeIndexes.includes(index);
+			const isMuted = (__props.activeIndex !== null || __props.activeIndexes.length > 0) && !isActive;
+			return {
+				index,
+				label: legendItem.label,
+				text: __props.size === ESChartLegendSize.SMALL ? `— ${legendItem.label}` : legendItem.label,
+				isActive,
+				classes: ["s-ui-chart-legend__entry", {
+					"s-ui-chart-legend__entry--active": isActive,
+					"s-ui-chart-legend__entry--muted": isMuted
+				}],
+				swatchClasses: ["s-ui-chart-legend__swatch", { "s-ui-chart-legend__swatch--line": legendItem.marker === "line" }],
+				swatchStyle: { backgroundColor: isMuted ? MUTED_SWATCH_COLOR : legendItem.color }
+			};
+		}));
+		const handleItemHover = (index) => {
+			if (__props.interactive) emit("itemHover", index);
+		};
+		const handleItemClick = (index) => {
+			if (__props.selectable && !__props.disabled) emit("itemClick", index);
+		};
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("ul", {
+				class: normalizeClass(legendClasses.value),
+				onMouseleave: _cache[0] || (_cache[0] = ($event) => handleItemHover(null))
+			}, [(openBlock(true), createElementBlock(Fragment, null, renderList(legendEntries.value, (legendEntry) => {
+				return openBlock(), createElementBlock("li", {
+					key: legendEntry.label,
+					class: "s-ui-chart-legend__item",
+					onMouseenter: ($event) => handleItemHover(legendEntry.index)
+				}, [(openBlock(), createBlock(resolveDynamicComponent(itemTag.value), {
+					class: normalizeClass(legendEntry.classes),
+					type: __props.selectable ? "button" : void 0,
+					disabled: __props.selectable ? __props.disabled : void 0,
+					"aria-pressed": __props.selectable ? legendEntry.isActive : void 0,
+					onClick: ($event) => handleItemClick(legendEntry.index)
+				}, {
+					default: withCtx(() => [createElementVNode("span", _hoisted_2, [createElementVNode("span", {
+						class: normalizeClass(legendEntry.swatchClasses),
+						style: normalizeStyle(legendEntry.swatchStyle)
+					}, null, 6)]), createElementVNode("span", _hoisted_3, toDisplayString(legendEntry.text), 1)]),
+					_: 2
+				}, 1032, [
+					"class",
+					"type",
+					"disabled",
+					"aria-pressed",
+					"onClick"
+				]))], 40, _hoisted_1);
+			}), 128))], 34);
+		};
+	}
+});
+//#endregion
+export { SChartLegend_vue_vue_type_script_setup_true_lang_default as default };

package/dist/components/SChartLine/SChartLine.vue.cjs

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

package/dist/components/SChartLine/SChartLine.vue.js

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

package/dist/components/SChartLine/SChartLine.vue_vue_type_script_setup_true_lang.cjs

@@ -0,0 +1,93 @@
+const require_SChartSkeletonHost = require("../SChartSkeletonHost/SChartSkeletonHost.vue.cjs");
+const require_useChart = require("../../composables/useChart.cjs");
+const require_useChartInteractivity = require("../../composables/useChartInteractivity.cjs");
+const require_buildLineChartConfig = require("./utils/buildLineChartConfig.cjs");
+const require_skeletonChartPoints = require("./utils/skeletonChartPoints.cjs");
+let vue = require("vue");
+//#region src/components/SChartLine/SChartLine.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = { class: "s-ui-chart-line__canvas-wrap" };
+var SChartLine_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ (0, vue.defineComponent)({
+	__name: "SChartLine",
+	props: {
+		points: { default: () => [] },
+		seriesLabel: { default: "Series" },
+		loading: {
+			type: Boolean,
+			default: false
+		},
+		yMax: {},
+		yMin: {},
+		yStep: {},
+		height: {},
+		area: {
+			type: Boolean,
+			default: true
+		},
+		zeroLine: {
+			type: Boolean,
+			default: false
+		},
+		dangerBelowZero: {
+			type: Boolean,
+			default: false
+		},
+		markers: { default: () => [] }
+	},
+	setup(__props, { expose: __expose }) {
+		const chartRootRef = (0, vue.useTemplateRef)("chartRootRef");
+		const chartCanvasRef = (0, vue.useTemplateRef)("chartCanvasRef");
+		const chartPoints = (0, vue.computed)(() => {
+			if (__props.loading) return require_skeletonChartPoints.skeletonChartPoints;
+			return __props.points;
+		});
+		const rootStyle = (0, vue.computed)(() => {
+			if (__props.height === void 0) return;
+			return { "--s-ui-chart-line-viewport-height": typeof __props.height === "number" ? `${__props.height}px` : __props.height };
+		});
+		const { chartInstance } = require_useChart.useChart({
+			canvasRef: chartCanvasRef,
+			config: (0, vue.computed)(() => {
+				if (!__props.loading && __props.points.length === 0) return null;
+				return require_buildLineChartConfig.buildLineChartConfig({
+					points: chartPoints.value,
+					seriesLabel: __props.seriesLabel,
+					colorHostElement: chartRootRef.value,
+					yMax: __props.loading ? 100 : __props.yMax,
+					yMin: __props.loading ? 50 : __props.yMin,
+					yStep: __props.loading ? 10 : __props.yStep,
+					area: __props.area,
+					zeroLine: __props.zeroLine,
+					dangerBelowZero: __props.dangerBelowZero,
+					markers: __props.markers,
+					skeleton: __props.loading
+				});
+			}),
+			enabled: (0, vue.computed)(() => __props.loading || __props.points.length > 0)
+		});
+		const { exportImage } = require_useChartInteractivity.useChartInteractivity({
+			chartInstance,
+			canvasRef: chartCanvasRef,
+			colorHostElement: chartRootRef
+		});
+		__expose({ 
+		/** PNG-снимок текущего чарта (dataURL) с непрозрачным фоном. */
+exportImage });
+		return (_ctx, _cache) => {
+			return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
+				ref_key: "chartRootRef",
+				ref: chartRootRef,
+				class: (0, vue.normalizeClass)(["s-ui-chart-line", { "s-ui-chart-line--skeleton": __props.loading }]),
+				style: (0, vue.normalizeStyle)(rootStyle.value)
+			}, [(0, vue.createElementVNode)("div", _hoisted_1, [(0, vue.createVNode)((0, vue.unref)(require_SChartSkeletonHost.default), { loading: __props.loading }, {
+				default: (0, vue.withCtx)(() => [(0, vue.createElementVNode)("canvas", {
+					ref_key: "chartCanvasRef",
+					ref: chartCanvasRef,
+					class: "s-ui-chart-line__canvas"
+				}, null, 512)]),
+				_: 1
+			}, 8, ["loading"])])], 6);
+		};
+	}
+});
+//#endregion
+exports.default = SChartLine_vue_vue_type_script_setup_true_lang_default;

package/dist/components/SChartLine/SChartLine.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,93 @@
+import SChartSkeletonHost_default from "../SChartSkeletonHost/SChartSkeletonHost.vue.js";
+import { useChart } from "../../composables/useChart.js";
+import { useChartInteractivity } from "../../composables/useChartInteractivity.js";
+import { buildLineChartConfig } from "./utils/buildLineChartConfig.js";
+import { skeletonChartPoints } from "./utils/skeletonChartPoints.js";
+import { computed, createElementBlock, createElementVNode, createVNode, defineComponent, normalizeClass, normalizeStyle, openBlock, unref, useTemplateRef, withCtx } from "vue";
+//#region src/components/SChartLine/SChartLine.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = { class: "s-ui-chart-line__canvas-wrap" };
+var SChartLine_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "SChartLine",
+	props: {
+		points: { default: () => [] },
+		seriesLabel: { default: "Series" },
+		loading: {
+			type: Boolean,
+			default: false
+		},
+		yMax: {},
+		yMin: {},
+		yStep: {},
+		height: {},
+		area: {
+			type: Boolean,
+			default: true
+		},
+		zeroLine: {
+			type: Boolean,
+			default: false
+		},
+		dangerBelowZero: {
+			type: Boolean,
+			default: false
+		},
+		markers: { default: () => [] }
+	},
+	setup(__props, { expose: __expose }) {
+		const chartRootRef = useTemplateRef("chartRootRef");
+		const chartCanvasRef = useTemplateRef("chartCanvasRef");
+		const chartPoints = computed(() => {
+			if (__props.loading) return skeletonChartPoints;
+			return __props.points;
+		});
+		const rootStyle = computed(() => {
+			if (__props.height === void 0) return;
+			return { "--s-ui-chart-line-viewport-height": typeof __props.height === "number" ? `${__props.height}px` : __props.height };
+		});
+		const { chartInstance } = useChart({
+			canvasRef: chartCanvasRef,
+			config: computed(() => {
+				if (!__props.loading && __props.points.length === 0) return null;
+				return buildLineChartConfig({
+					points: chartPoints.value,
+					seriesLabel: __props.seriesLabel,
+					colorHostElement: chartRootRef.value,
+					yMax: __props.loading ? 100 : __props.yMax,
+					yMin: __props.loading ? 50 : __props.yMin,
+					yStep: __props.loading ? 10 : __props.yStep,
+					area: __props.area,
+					zeroLine: __props.zeroLine,
+					dangerBelowZero: __props.dangerBelowZero,
+					markers: __props.markers,
+					skeleton: __props.loading
+				});
+			}),
+			enabled: computed(() => __props.loading || __props.points.length > 0)
+		});
+		const { exportImage } = useChartInteractivity({
+			chartInstance,
+			canvasRef: chartCanvasRef,
+			colorHostElement: chartRootRef
+		});
+		__expose({ 
+		/** PNG-снимок текущего чарта (dataURL) с непрозрачным фоном. */
+exportImage });
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				ref_key: "chartRootRef",
+				ref: chartRootRef,
+				class: normalizeClass(["s-ui-chart-line", { "s-ui-chart-line--skeleton": __props.loading }]),
+				style: normalizeStyle(rootStyle.value)
+			}, [createElementVNode("div", _hoisted_1, [createVNode(unref(SChartSkeletonHost_default), { loading: __props.loading }, {
+				default: withCtx(() => [createElementVNode("canvas", {
+					ref_key: "chartCanvasRef",
+					ref: chartCanvasRef,
+					class: "s-ui-chart-line__canvas"
+				}, null, 512)]),
+				_: 1
+			}, 8, ["loading"])])], 6);
+		};
+	}
+});
+//#endregion
+export { SChartLine_vue_vue_type_script_setup_true_lang_default as default };