@shtabapp/ui-kit 1.84.0 → 1.85.1

package/dist/components/SCalendarWeekGrid/SCalendarWeekGrid.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,101 @@
+import { WORK_TIME_SOURCE_COLOR_VARS } from "../SCalendar/utils/calendar.const.js";
+import "./SCalendarWeekGrid.types.js";
+import { Fragment, computed, createBlock, createElementBlock, createElementVNode, defineComponent, normalizeClass, normalizeStyle, openBlock, renderList, resolveDynamicComponent, toDisplayString } from "vue";
+//#region src/components/SCalendarWeekGrid/SCalendarWeekGrid.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = {
+	class: "s-ui-calendar-week-grid__header",
+	role: "row"
+};
+var _hoisted_2 = {
+	class: "s-ui-calendar-week-grid__slot-label",
+	role: "rowheader"
+};
+var SCalendarWeekGrid_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "SCalendarWeekGrid",
+	props: {
+		days: {},
+		slotLabels: {},
+		highlightedCategory: { default: null },
+		loading: {
+			type: Boolean,
+			default: false
+		},
+		interactive: {
+			type: Boolean,
+			default: false
+		}
+	},
+	emits: ["cellClick"],
+	setup(__props, { emit: __emit }) {
+		const emit = __emit;
+		const buildDefaultSlotLabels = () => Array.from({ length: 12 }, (_, index) => {
+			const startHour = index * 2;
+			const endHour = (startHour + 2) % 24;
+			const pad = (hour) => String(hour).padStart(2, "0");
+			return `${pad(startHour)}:00 - ${pad(endHour)}:00`;
+		});
+		const resolvedSlotLabels = computed(() => __props.slotLabels ?? buildDefaultSlotLabels());
+		const rootClasses = computed(() => ({
+			"s-ui-calendar-week-grid--loading": __props.loading,
+			"s-ui-calendar-week-grid--highlighting": __props.highlightedCategory !== null
+		}));
+		const rootStyle = computed(() => ({ "--s-ui-calendar-week-grid-day-count": String(__props.days.length) }));
+		const cellClasses = (category) => ({
+			"s-ui-calendar-week-grid__cell--empty": category === null,
+			"s-ui-calendar-week-grid__cell--muted": __props.highlightedCategory !== null && category !== __props.highlightedCategory,
+			"s-ui-calendar-week-grid__cell--interactive": __props.interactive
+		});
+		const cellStyle = (category) => {
+			if (__props.loading || category === null) return;
+			return { backgroundColor: WORK_TIME_SOURCE_COLOR_VARS[category] };
+		};
+		const handleCellClick = (day, slotIndex) => {
+			if (!__props.interactive || __props.loading) return;
+			emit("cellClick", {
+				day,
+				slotIndex,
+				category: day.slots[slotIndex] ?? null
+			});
+		};
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				class: normalizeClass(["s-ui-calendar-week-grid", rootClasses.value]),
+				style: normalizeStyle(rootStyle.value),
+				role: "grid"
+			}, [createElementVNode("div", _hoisted_1, [_cache[0] || (_cache[0] = createElementVNode("span", {
+				class: "s-ui-calendar-week-grid__corner",
+				"aria-hidden": "true"
+			}, null, -1)), (openBlock(true), createElementBlock(Fragment, null, renderList(__props.days, (day) => {
+				return openBlock(), createElementBlock("span", {
+					key: day.date,
+					class: "s-ui-calendar-week-grid__day-label",
+					role: "columnheader"
+				}, toDisplayString(day.label), 1);
+			}), 128))]), (openBlock(true), createElementBlock(Fragment, null, renderList(resolvedSlotLabels.value, (slotLabel, slotIndex) => {
+				return openBlock(), createElementBlock("div", {
+					key: slotLabel,
+					class: "s-ui-calendar-week-grid__row",
+					role: "row"
+				}, [createElementVNode("span", _hoisted_2, toDisplayString(slotLabel), 1), (openBlock(true), createElementBlock(Fragment, null, renderList(__props.days, (day) => {
+					return openBlock(), createBlock(resolveDynamicComponent(__props.interactive ? "button" : "div"), {
+						key: day.date,
+						type: __props.interactive ? "button" : void 0,
+						"aria-label": __props.interactive ? `${day.label}, ${resolvedSlotLabels.value[slotIndex]}` : void 0,
+						class: normalizeClass(["s-ui-calendar-week-grid__cell", cellClasses(day.slots[slotIndex] ?? null)]),
+						style: normalizeStyle(cellStyle(day.slots[slotIndex] ?? null)),
+						role: "gridcell",
+						onClick: ($event) => handleCellClick(day, slotIndex)
+					}, null, 8, [
+						"type",
+						"aria-label",
+						"class",
+						"style",
+						"onClick"
+					]);
+				}), 128))]);
+			}), 128))], 6);
+		};
+	}
+});
+//#endregion
+export { SCalendarWeekGrid_vue_vue_type_script_setup_true_lang_default as default };

package/dist/components/SCard/SCard.types.cjs

@@ -0,0 +1,8 @@
+//#region src/components/SCard/SCard.types.ts
+var ESCardLayout = /* @__PURE__ */ function(ESCardLayout) {
+	ESCardLayout["CARD"] = "card";
+	ESCardLayout["LIST"] = "list";
+	return ESCardLayout;
+}({});
+//#endregion
+exports.ESCardLayout = ESCardLayout;

package/dist/components/SCard/SCard.types.js

@@ -0,0 +1,8 @@
+//#region src/components/SCard/SCard.types.ts
+var ESCardLayout = /* @__PURE__ */ function(ESCardLayout) {
+	ESCardLayout["CARD"] = "card";
+	ESCardLayout["LIST"] = "list";
+	return ESCardLayout;
+}({});
+//#endregion
+export { ESCardLayout };

package/dist/components/SCard/SCard.vue.cjs

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

package/dist/components/SCard/SCard.vue.js

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

package/dist/components/SCard/SCard.vue_vue_type_script_setup_true_lang.cjs

@@ -0,0 +1,183 @@
+const require_vueRouterLinkPresentation = require("../../utils/vueRouterLinkPresentation.cjs");
+const require_useLink = require("../../composables/useLink.cjs");
+const require_SCheckbox_types = require("../SCheckbox/SCheckbox.types.cjs");
+const require_SCheckbox = require("../SCheckbox/SCheckbox.vue.cjs");
+const require_SCard_types = require("./SCard.types.cjs");
+let vue = require("vue");
+let _shtabapp_ui_kit_primitives = require("@shtabapp/ui-kit-primitives");
+//#region src/components/SCard/SCard.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = {
+	key: 0,
+	class: "s-ui-card__content s-ui-card__content--skeleton"
+};
+var _hoisted_2 = { class: "s-ui-card__content" };
+var _hoisted_3 = {
+	class: "s-ui-card__icon",
+	"aria-hidden": "true"
+};
+var _hoisted_4 = { class: "s-ui-card__text" };
+var _hoisted_5 = {
+	key: 0,
+	class: "s-ui-card__title s-ui-typography-heading-h6-semibold"
+};
+var _hoisted_6 = {
+	key: 1,
+	class: "s-ui-card__subtitle s-ui-typography-body-12-regular"
+};
+var _hoisted_7 = {
+	key: 0,
+	class: "s-ui-card__meta s-ui-typography-label-12-medium"
+};
+var _hoisted_8 = {
+	key: 0,
+	class: "s-ui-card__selected-indicator",
+	"aria-hidden": "true",
+	inert: ""
+};
+var SCard_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ (0, vue.defineComponent)({
+	inheritAttrs: false,
+	__name: "SCard",
+	props: /*@__PURE__*/ (0, vue.mergeModels)({
+		layout: { default: () => require_SCard_types.ESCardLayout.CARD },
+		title: {},
+		subtitle: {},
+		icon: { default: "page" },
+		selectable: {
+			type: Boolean,
+			default: false
+		},
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		skeleton: {
+			type: Boolean,
+			default: false
+		},
+		link: {},
+		exact: {
+			type: Boolean,
+			default: false
+		},
+		replace: {
+			type: Boolean,
+			default: false
+		}
+	}, {
+		"selected": {
+			type: Boolean,
+			default: false
+		},
+		"selectedModifiers": {}
+	}),
+	emits: /*@__PURE__*/ (0, vue.mergeModels)(["click", "keydown"], ["update:selected"]),
+	setup(__props, { emit: __emit }) {
+		const selectedModel = (0, vue.useModel)(__props, "selected");
+		const emit = __emit;
+		const slots = (0, vue.useSlots)();
+		const attrs = (0, vue.useAttrs)();
+		const cardLink = require_useLink.useLink(() => __props.link, () => __props.exact, () => __props.replace);
+		const linkPresentation = cardLink.linkPresentation;
+		const isInteractionDisabled = (0, vue.computed)(() => {
+			return __props.disabled || __props.skeleton;
+		});
+		const isLink = cardLink.isLink;
+		const cardHtmlTag = (0, vue.computed)(() => {
+			if (linkPresentation.value.mode === "none") return "div";
+			return linkPresentation.value.rootTag;
+		});
+		const cardRootTabIndex = (0, vue.computed)(() => {
+			if (isInteractionDisabled.value) return -1;
+			if (isLink.value) return;
+			return 0;
+		});
+		const cardAttributes = (0, vue.computed)(() => {
+			return {
+				"aria-busy": __props.skeleton ? true : void 0,
+				"aria-disabled": isInteractionDisabled.value ? true : void 0,
+				"aria-pressed": __props.selectable && !isInteractionDisabled.value && !isLink.value && selectedModel.value ? true : void 0,
+				role: isInteractionDisabled.value || isLink.value ? void 0 : "button",
+				tabindex: cardRootTabIndex.value,
+				...require_vueRouterLinkPresentation.getLinkRootBindings(linkPresentation.value, { replace: __props.replace })
+			};
+		});
+		const cardRootBindings = (0, vue.computed)(() => {
+			return {
+				...cardAttributes.value,
+				...attrs
+			};
+		});
+		const showSelectedIndicator = (0, vue.computed)(() => {
+			return __props.selectable && !isInteractionDisabled.value;
+		});
+		const skeletonType = (0, vue.computed)(() => {
+			if (__props.layout === require_SCard_types.ESCardLayout.LIST) return __props.subtitle || slots.subtitle ? _shtabapp_ui_kit_primitives.ESSkeletonType.S_CARD_LIST_TWO_LINE : _shtabapp_ui_kit_primitives.ESSkeletonType.S_CARD_LIST;
+			return _shtabapp_ui_kit_primitives.ESSkeletonType.S_CARD;
+		});
+		const cardClasses = (0, vue.computed)(() => {
+			return [`s-ui-card--layout-${__props.layout}`, {
+				"s-ui-card--selected": selectedModel.value,
+				"s-ui-card--selectable": __props.selectable,
+				"s-ui-card--disabled": __props.disabled,
+				"s-ui-card--skeleton": __props.skeleton,
+				"s-ui-card--link": isLink.value,
+				"s-ui-card--with-subtitle": Boolean(__props.subtitle || slots.subtitle)
+			}];
+		});
+		const handleCardClick = (event) => {
+			if (isInteractionDisabled.value) {
+				event.preventDefault();
+				return;
+			}
+			if (cardLink.isRouterLink.value) {
+				emit("click", event);
+				return;
+			}
+			if (__props.selectable) selectedModel.value = !selectedModel.value;
+			emit("click", event);
+		};
+		const CARD_ROUTER_ACTIVATION_KEYS = [
+			"Enter",
+			" ",
+			"Spacebar"
+		];
+		const CARD_CLICK_ACTIVATION_KEYS = ["Enter", " "];
+		const handleCardKeydown = (event) => {
+			if (isInteractionDisabled.value) return;
+			emit("keydown", event);
+			if (cardLink.isRouterLink.value && CARD_ROUTER_ACTIVATION_KEYS.includes(event.key)) {
+				event.preventDefault();
+				cardLink.navigate();
+				return;
+			}
+			if (isLink.value) return;
+			if (!CARD_CLICK_ACTIVATION_KEYS.includes(event.key)) return;
+			event.preventDefault();
+			if (event.currentTarget instanceof HTMLElement) event.currentTarget.click();
+		};
+		return (_ctx, _cache) => {
+			return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.resolveDynamicComponent)(cardHtmlTag.value), (0, vue.mergeProps)({ class: ["s-ui-card", cardClasses.value] }, cardRootBindings.value, {
+				onClick: handleCardClick,
+				onKeydown: handleCardKeydown
+			}), {
+				default: (0, vue.withCtx)(() => [__props.skeleton ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_1, [(0, vue.createVNode)((0, vue.unref)(_shtabapp_ui_kit_primitives.SSkeleton), {
+					class: "s-ui-card__skeleton",
+					type: skeletonType.value
+				}, null, 8, ["type"])])) : ((0, vue.openBlock)(), (0, vue.createElementBlock)(vue.Fragment, { key: 1 }, [(0, vue.createElementVNode)("div", _hoisted_2, [
+					(0, vue.createElementVNode)("span", _hoisted_3, [(0, vue.renderSlot)(_ctx.$slots, "icon", {}, () => [(0, vue.createVNode)((0, vue.unref)(_shtabapp_ui_kit_primitives.SIcon), {
+						name: __props.icon,
+						size: 16
+					}, null, 8, ["name"])])]),
+					(0, vue.createElementVNode)("span", _hoisted_4, [__props.title || slots.title ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", _hoisted_5, [(0, vue.renderSlot)(_ctx.$slots, "title", {}, () => [(0, vue.createTextVNode)((0, vue.toDisplayString)(__props.title), 1)])])) : (0, vue.createCommentVNode)("", true), __props.subtitle || slots.subtitle ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", _hoisted_6, [(0, vue.renderSlot)(_ctx.$slots, "subtitle", {}, () => [(0, vue.createTextVNode)((0, vue.toDisplayString)(__props.subtitle), 1)])])) : (0, vue.createCommentVNode)("", true)]),
+					slots.meta ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", _hoisted_7, [(0, vue.renderSlot)(_ctx.$slots, "meta")])) : (0, vue.createCommentVNode)("", true)
+				]), showSelectedIndicator.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", _hoisted_8, [(0, vue.renderSlot)(_ctx.$slots, "selected-indicator", {}, () => [(0, vue.createVNode)((0, vue.unref)(require_SCheckbox.default), {
+					"model-value": selectedModel.value,
+					size: (0, vue.unref)(require_SCheckbox_types.ESCheckboxSize).EXTRA_SMALL
+				}, null, 8, ["model-value", "size"])])])) : (0, vue.createCommentVNode)("", true)], 64))]),
+				_: 3
+			}, 16, ["class"]);
+		};
+	}
+});
+//#endregion
+exports.default = SCard_vue_vue_type_script_setup_true_lang_default;

package/dist/components/SCard/SCard.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,183 @@
+import { getLinkRootBindings } from "../../utils/vueRouterLinkPresentation.js";
+import { useLink } from "../../composables/useLink.js";
+import { ESCheckboxSize } from "../SCheckbox/SCheckbox.types.js";
+import SCheckbox_default from "../SCheckbox/SCheckbox.vue.js";
+import { ESCardLayout } from "./SCard.types.js";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, mergeModels, mergeProps, openBlock, renderSlot, resolveDynamicComponent, toDisplayString, unref, useAttrs, useModel, useSlots, withCtx } from "vue";
+import { ESSkeletonType, SIcon, SSkeleton } from "@shtabapp/ui-kit-primitives";
+//#region src/components/SCard/SCard.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = {
+	key: 0,
+	class: "s-ui-card__content s-ui-card__content--skeleton"
+};
+var _hoisted_2 = { class: "s-ui-card__content" };
+var _hoisted_3 = {
+	class: "s-ui-card__icon",
+	"aria-hidden": "true"
+};
+var _hoisted_4 = { class: "s-ui-card__text" };
+var _hoisted_5 = {
+	key: 0,
+	class: "s-ui-card__title s-ui-typography-heading-h6-semibold"
+};
+var _hoisted_6 = {
+	key: 1,
+	class: "s-ui-card__subtitle s-ui-typography-body-12-regular"
+};
+var _hoisted_7 = {
+	key: 0,
+	class: "s-ui-card__meta s-ui-typography-label-12-medium"
+};
+var _hoisted_8 = {
+	key: 0,
+	class: "s-ui-card__selected-indicator",
+	"aria-hidden": "true",
+	inert: ""
+};
+var SCard_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	inheritAttrs: false,
+	__name: "SCard",
+	props: /*@__PURE__*/ mergeModels({
+		layout: { default: () => ESCardLayout.CARD },
+		title: {},
+		subtitle: {},
+		icon: { default: "page" },
+		selectable: {
+			type: Boolean,
+			default: false
+		},
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		skeleton: {
+			type: Boolean,
+			default: false
+		},
+		link: {},
+		exact: {
+			type: Boolean,
+			default: false
+		},
+		replace: {
+			type: Boolean,
+			default: false
+		}
+	}, {
+		"selected": {
+			type: Boolean,
+			default: false
+		},
+		"selectedModifiers": {}
+	}),
+	emits: /*@__PURE__*/ mergeModels(["click", "keydown"], ["update:selected"]),
+	setup(__props, { emit: __emit }) {
+		const selectedModel = useModel(__props, "selected");
+		const emit = __emit;
+		const slots = useSlots();
+		const attrs = useAttrs();
+		const cardLink = useLink(() => __props.link, () => __props.exact, () => __props.replace);
+		const linkPresentation = cardLink.linkPresentation;
+		const isInteractionDisabled = computed(() => {
+			return __props.disabled || __props.skeleton;
+		});
+		const isLink = cardLink.isLink;
+		const cardHtmlTag = computed(() => {
+			if (linkPresentation.value.mode === "none") return "div";
+			return linkPresentation.value.rootTag;
+		});
+		const cardRootTabIndex = computed(() => {
+			if (isInteractionDisabled.value) return -1;
+			if (isLink.value) return;
+			return 0;
+		});
+		const cardAttributes = computed(() => {
+			return {
+				"aria-busy": __props.skeleton ? true : void 0,
+				"aria-disabled": isInteractionDisabled.value ? true : void 0,
+				"aria-pressed": __props.selectable && !isInteractionDisabled.value && !isLink.value && selectedModel.value ? true : void 0,
+				role: isInteractionDisabled.value || isLink.value ? void 0 : "button",
+				tabindex: cardRootTabIndex.value,
+				...getLinkRootBindings(linkPresentation.value, { replace: __props.replace })
+			};
+		});
+		const cardRootBindings = computed(() => {
+			return {
+				...cardAttributes.value,
+				...attrs
+			};
+		});
+		const showSelectedIndicator = computed(() => {
+			return __props.selectable && !isInteractionDisabled.value;
+		});
+		const skeletonType = computed(() => {
+			if (__props.layout === ESCardLayout.LIST) return __props.subtitle || slots.subtitle ? ESSkeletonType.S_CARD_LIST_TWO_LINE : ESSkeletonType.S_CARD_LIST;
+			return ESSkeletonType.S_CARD;
+		});
+		const cardClasses = computed(() => {
+			return [`s-ui-card--layout-${__props.layout}`, {
+				"s-ui-card--selected": selectedModel.value,
+				"s-ui-card--selectable": __props.selectable,
+				"s-ui-card--disabled": __props.disabled,
+				"s-ui-card--skeleton": __props.skeleton,
+				"s-ui-card--link": isLink.value,
+				"s-ui-card--with-subtitle": Boolean(__props.subtitle || slots.subtitle)
+			}];
+		});
+		const handleCardClick = (event) => {
+			if (isInteractionDisabled.value) {
+				event.preventDefault();
+				return;
+			}
+			if (cardLink.isRouterLink.value) {
+				emit("click", event);
+				return;
+			}
+			if (__props.selectable) selectedModel.value = !selectedModel.value;
+			emit("click", event);
+		};
+		const CARD_ROUTER_ACTIVATION_KEYS = [
+			"Enter",
+			" ",
+			"Spacebar"
+		];
+		const CARD_CLICK_ACTIVATION_KEYS = ["Enter", " "];
+		const handleCardKeydown = (event) => {
+			if (isInteractionDisabled.value) return;
+			emit("keydown", event);
+			if (cardLink.isRouterLink.value && CARD_ROUTER_ACTIVATION_KEYS.includes(event.key)) {
+				event.preventDefault();
+				cardLink.navigate();
+				return;
+			}
+			if (isLink.value) return;
+			if (!CARD_CLICK_ACTIVATION_KEYS.includes(event.key)) return;
+			event.preventDefault();
+			if (event.currentTarget instanceof HTMLElement) event.currentTarget.click();
+		};
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(resolveDynamicComponent(cardHtmlTag.value), mergeProps({ class: ["s-ui-card", cardClasses.value] }, cardRootBindings.value, {
+				onClick: handleCardClick,
+				onKeydown: handleCardKeydown
+			}), {
+				default: withCtx(() => [__props.skeleton ? (openBlock(), createElementBlock("div", _hoisted_1, [createVNode(unref(SSkeleton), {
+					class: "s-ui-card__skeleton",
+					type: skeletonType.value
+				}, null, 8, ["type"])])) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [createElementVNode("div", _hoisted_2, [
+					createElementVNode("span", _hoisted_3, [renderSlot(_ctx.$slots, "icon", {}, () => [createVNode(unref(SIcon), {
+						name: __props.icon,
+						size: 16
+					}, null, 8, ["name"])])]),
+					createElementVNode("span", _hoisted_4, [__props.title || slots.title ? (openBlock(), createElementBlock("span", _hoisted_5, [renderSlot(_ctx.$slots, "title", {}, () => [createTextVNode(toDisplayString(__props.title), 1)])])) : createCommentVNode("", true), __props.subtitle || slots.subtitle ? (openBlock(), createElementBlock("span", _hoisted_6, [renderSlot(_ctx.$slots, "subtitle", {}, () => [createTextVNode(toDisplayString(__props.subtitle), 1)])])) : createCommentVNode("", true)]),
+					slots.meta ? (openBlock(), createElementBlock("span", _hoisted_7, [renderSlot(_ctx.$slots, "meta")])) : createCommentVNode("", true)
+				]), showSelectedIndicator.value ? (openBlock(), createElementBlock("span", _hoisted_8, [renderSlot(_ctx.$slots, "selected-indicator", {}, () => [createVNode(unref(SCheckbox_default), {
+					"model-value": selectedModel.value,
+					size: unref(ESCheckboxSize).EXTRA_SMALL
+				}, null, 8, ["model-value", "size"])])])) : createCommentVNode("", true)], 64))]),
+				_: 3
+			}, 16, ["class"]);
+		};
+	}
+});
+//#endregion
+export { SCard_vue_vue_type_script_setup_true_lang_default as default };

package/dist/components/SChartBar/SChartBar.vue.cjs

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

package/dist/components/SChartBar/SChartBar.vue.js

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

package/dist/components/SChartBar/SChartBar.vue_vue_type_script_setup_true_lang.cjs

@@ -0,0 +1,151 @@
+const require_chartCssVariables = require("../../utils/chart/core/chartCssVariables.cjs");
+const require_SChartLegend = require("../SChartLegend/SChartLegend.vue.cjs");
+const require_SChartSkeletonHost = require("../SChartSkeletonHost/SChartSkeletonHost.vue.cjs");
+const require_readCssColor = require("../../utils/chart/css/readCssColor.cjs");
+const require_resolveCssColorValue = require("../../utils/chart/css/resolveCssColorValue.cjs");
+const require_resolveBarStackedSeriesColor = require("../../utils/chart/bar/resolveBarStackedSeriesColor.cjs");
+const require_useChart = require("../../composables/useChart.cjs");
+const require_useChartInteractivity = require("../../composables/useChartInteractivity.cjs");
+const require_buildChartLegendItems = require("../../utils/chart/core/buildChartLegendItems.cjs");
+const require_useHasListener = require("../../composables/useHasListener.cjs");
+const require_buildBarChartConfig = require("./utils/buildBarChartConfig.cjs");
+const require_skeletonBarSeries = require("./utils/skeletonBarSeries.cjs");
+let vue = require("vue");
+//#region src/components/SChartBar/SChartBar.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = { class: "s-ui-chart-bar__canvas-wrap" };
+var SChartBar_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ (0, vue.defineComponent)({
+	__name: "SChartBar",
+	props: {
+		series: { default: () => [] },
+		mode: { default: "grouped" },
+		loading: {
+			type: Boolean,
+			default: false
+		},
+		yMax: {},
+		yMin: {},
+		yStep: {},
+		rightYMax: {},
+		rightYStep: {},
+		mirrorYAxis: {
+			type: Boolean,
+			default: false
+		},
+		target: {},
+		showLegend: {
+			type: Boolean,
+			default: true
+		},
+		showValues: {
+			type: Boolean,
+			default: false
+		},
+		formatValue: { type: Function },
+		formatYTick: { type: Function },
+		categories: { default: () => [] },
+		highlightedYTick: {},
+		legendSize: {},
+		maxBarThickness: {},
+		formatTooltip: { type: Function }
+	},
+	emits: ["pointClick"],
+	setup(__props, { expose: __expose, emit: __emit }) {
+		const emit = __emit;
+		const chartRootRef = (0, vue.useTemplateRef)("chartRootRef");
+		const chartCanvasRef = (0, vue.useTemplateRef)("chartCanvasRef");
+		const chartSeries = (0, vue.computed)(() => {
+			if (__props.loading) return require_skeletonBarSeries.skeletonBarSeries;
+			return __props.mode === "grouped" ? __props.series : __props.series.slice(0, 1);
+		});
+		const handlePointClick = (pointIndex, seriesIndex) => {
+			const seriesItem = chartSeries.value[seriesIndex];
+			const point = seriesItem?.points[pointIndex];
+			if (seriesItem && point) emit("pointClick", pointIndex, seriesIndex, point, seriesItem);
+		};
+		const hasPointClickListener = require_useHasListener.useHasListener("onPointClick");
+		const chartConfig = (0, vue.computed)(() => {
+			if (!__props.loading && __props.series.length === 0) return null;
+			return require_buildBarChartConfig.buildBarChartConfig({
+				seriesList: chartSeries.value,
+				colorHostElement: chartRootRef.value,
+				yMax: __props.loading ? 50 : __props.yMax,
+				yMin: __props.loading ? void 0 : __props.yMin,
+				yStep: __props.loading ? 10 : __props.yStep,
+				rightYMax: __props.rightYMax,
+				rightYStep: __props.rightYStep,
+				mirrorYAxis: __props.mirrorYAxis,
+				target: __props.loading ? void 0 : __props.target,
+				skeleton: __props.loading,
+				showValues: __props.showValues,
+				formatValue: __props.formatValue,
+				formatYTick: __props.formatYTick,
+				mode: __props.mode,
+				categories: __props.categories,
+				highlightedYTick: __props.highlightedYTick,
+				maxBarThickness: __props.maxBarThickness,
+				formatTooltip: __props.formatTooltip,
+				onPointClick: hasPointClickListener() ? handlePointClick : void 0
+			});
+		});
+		const hasCategoryLegend = (0, vue.computed)(() => !__props.loading && __props.categories.length > 0);
+		const dimmableLegendItems = (0, vue.computed)(() => {
+			if (hasCategoryLegend.value) return __props.categories.map((category) => ({
+				label: category.label,
+				color: require_resolveCssColorValue.resolveCssColorValue(category.color, chartRootRef.value)
+			}));
+			return require_buildChartLegendItems.buildChartLegendItems(chartSeries.value, (seriesIndex, fillColor) => require_resolveBarStackedSeriesColor.resolveBarStackedSeriesColor(seriesIndex, chartRootRef.value, fillColor, __props.loading));
+		});
+		const targetLegendItems = (0, vue.computed)(() => {
+			if (__props.loading || !__props.target?.legendLabel) return [];
+			return [{
+				label: __props.target.legendLabel,
+				color: __props.target.color ? require_resolveCssColorValue.resolveCssColorValue(__props.target.color, chartRootRef.value) : require_readCssColor.readCssColor(require_chartCssVariables.CHART_CSS_VARIABLES.grid, chartRootRef.value),
+				marker: "line"
+			}];
+		});
+		const legendItems = (0, vue.computed)(() => [...dimmableLegendItems.value, ...targetLegendItems.value]);
+		const { chartInstance } = require_useChart.useChart({
+			canvasRef: chartCanvasRef,
+			config: chartConfig,
+			enabled: (0, vue.computed)(() => __props.loading || __props.series.length > 0)
+		});
+		const { exportImage, handleLegendItemHover } = require_useChartInteractivity.useChartInteractivity({
+			chartInstance,
+			canvasRef: chartCanvasRef,
+			colorHostElement: chartRootRef,
+			legendDimKind: () => hasCategoryLegend.value ? "category" : "series"
+		});
+		const handleLegendHover = (index) => {
+			handleLegendItemHover(index !== null && index < dimmableLegendItems.value.length ? index : null);
+		};
+		__expose({ exportImage });
+		return (_ctx, _cache) => {
+			return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
+				ref_key: "chartRootRef",
+				ref: chartRootRef,
+				class: (0, vue.normalizeClass)(["s-ui-chart-bar", { "s-ui-chart-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-bar__canvas"
+				}, null, 512)]),
+				_: 1
+			}, 8, ["loading"])]), __props.showLegend && legendItems.value.length ? ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(require_SChartLegend.default), {
+				key: 0,
+				items: legendItems.value,
+				size: __props.legendSize,
+				disabled: __props.loading,
+				interactive: !__props.loading,
+				onItemHover: handleLegendHover
+			}, null, 8, [
+				"items",
+				"size",
+				"disabled",
+				"interactive"
+			])) : (0, vue.createCommentVNode)("", true)], 2);
+		};
+	}
+});
+//#endregion
+exports.default = SChartBar_vue_vue_type_script_setup_true_lang_default;