@flux-ui/statistics 3.0.0-next.74 → 3.0.0-next.75

package/dist/component/FluxStatisticsLegend.vue.d.ts

@@ -1,9 +1,15 @@
+import { FluxDirection } from '@flux-ui/types';
+import { FluxStatisticsLegendVariant } from '../composable';
 import { DefineComponent, ComponentOptionsMixin, PublicProps, ComponentProvideOptions } from 'vue';
+type __VLS_Props = {
+    readonly direction?: FluxDirection;
+    readonly variant?: FluxStatisticsLegendVariant;
+};
 declare var __VLS_1: {};
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_1) => any;
 };
-declare const __VLS_base: DefineComponent<{}, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
+declare const __VLS_base: DefineComponent<__VLS_Props, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 export default _default;
 type __VLS_WithSlots<T, S> = T & {

package/dist/composable/index.d.ts

@@ -10,3 +10,5 @@ export type { UseChartSlicesSetupReturn } from './useChartSlicesSetup';
 export { useChartSlicesSetup } from './useChartSlicesSetup';
 export type { EChartsInstance, EChartsOption, UseEChartsReturn } from './useECharts';
 export { useECharts } from './useECharts';
+export type { FluxStatisticsLegendVariant } from './useLegendVariant';
+export { FluxStatisticsLegendVariantInjectionKey } from './useLegendVariant';

package/dist/composable/useLegendVariant.d.ts

@@ -0,0 +1,3 @@
+import { InjectionKey, Ref } from 'vue';
+export type FluxStatisticsLegendVariant = 'detailed' | 'compact';
+export declare const FluxStatisticsLegendVariantInjectionKey: InjectionKey<Ref<FluxStatisticsLegendVariant>>;

package/dist/index.css

@@ -513,6 +513,44 @@
   right: 0;
   content: "";
   border-top: 1px dashed var(--surface-stroke);
+}
+
+.statistics-legend-compact {
+  display: flex;
+  user-select: none;
+}
+.statistics-legend-compact.is-horizontal {
+  flex-flow: row wrap;
+  gap: 12px 18px;
+}
+.statistics-legend-compact.is-vertical {
+  flex-flow: column;
+  gap: 12px;
+}
+
+.statistics-legend-item-compact {
+  --color: var(--primary-600);
+  display: flex;
+  align-items: center;
+  flex-flow: row nowrap;
+  gap: 6px;
+  font-size: 14px;
+  line-height: 1;
+  white-space: nowrap;
+}
+.statistics-legend-item-compact .statistics-legend-item-color {
+  margin: 0;
+  border-radius: var(--radius-full);
+}
+.statistics-legend-item-compact .statistics-legend-item-icon {
+  margin: 0;
+}
+.statistics-legend-item-compact .statistics-legend-item-label {
+  flex-grow: 0;
+  font-weight: 400;
+}
+.statistics-legend-item-compact .statistics-legend-item-value {
+  margin-left: 0;
 }.statistics-meter {
   --color: var(--primary-600);
   --percentage: 0%;

package/dist/index.js

@@ -1,4 +1,4 @@
-import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createSlots, createVNode, customRef, defineComponent, inject, markRaw, normalizeClass, normalizeStyle, onBeforeUnmount, onMounted, onScopeDispose, openBlock, provide, ref, renderList, renderSlot, toDisplayString, toValue, unref, useSlots, useTemplateRef, watch, watchEffect, withCtx } from "vue";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createSlots, createVNode, customRef, defineComponent, inject, markRaw, normalizeClass, normalizeStyle, onBeforeUnmount, onMounted, onScopeDispose, openBlock, provide, ref, renderList, renderSlot, toDisplayString, toRef, toValue, unref, useSlots, useTemplateRef, watch, watchEffect, withCtx } from "vue";
 import { useI18n } from "vue-i18n";
 import { FluxIcon, FluxPane, FluxToolbar, FluxTooltip, iconRegistry } from "@flux-ui/components";
 import { merge } from "lodash-es";
@@ -11325,6 +11325,9 @@ function useECharts(target, options) {
 		resize: () => chartInstance.value?.resize()
 	};
 }
+//#endregion
+//#region src/composable/useLegendVariant.ts
+var FluxStatisticsLegendVariantInjectionKey = Symbol("flux-statistics-legend-variant");
 var Chart_module_default = {
 	pane: `pane`,
 	statisticsChart: `statistics-chart`,
@@ -12135,7 +12138,11 @@ var Legend_module_default = {
 	statisticsLegendItemColor: `statistics-legend-item-color`,
 	statisticsLegendItemIcon: `statistics-legend-item-icon`,
 	statisticsLegendItemLabel: `statistics-legend-item-label`,
-	statisticsLegendItemValue: `statistics-legend-item-value`
+	statisticsLegendItemValue: `statistics-legend-item-value`,
+	statisticsLegendCompact: `statistics-legend-compact`,
+	isHorizontal: `is-horizontal`,
+	isVertical: `is-vertical`,
+	statisticsLegendItemCompact: `statistics-legend-item-compact`
 };
 //#endregion
 //#region src/component/FluxStatisticsLegendItem.vue
@@ -12149,6 +12156,8 @@ var FluxStatisticsLegendItem_default = /* @__PURE__ */ defineComponent({
 		value: {}
 	},
 	setup(__props) {
+		const variantRef = inject(FluxStatisticsLegendVariantInjectionKey, null);
+		const variant = computed(() => variantRef?.value ?? "detailed");
 		const colorValue = computed(() => {
 			if (!__props.color) return;
 			if ([
@@ -12163,7 +12172,7 @@ var FluxStatisticsLegendItem_default = /* @__PURE__ */ defineComponent({
 		});
 		return (_ctx, _cache) => {
 			return openBlock(), createElementBlock("div", {
-				class: normalizeClass(unref(clsx)(unref(Legend_module_default).statisticsLegendItem, __props.isHovered && unref(Legend_module_default).isHovered)),
+				class: normalizeClass(unref(clsx)(variant.value === "compact" ? unref(Legend_module_default).statisticsLegendItemCompact : unref(Legend_module_default).statisticsLegendItem, variant.value !== "compact" && __props.isHovered && unref(Legend_module_default).isHovered)),
 				style: normalizeStyle({ "--color": colorValue.value })
 			}, [
 				__props.icon ? (openBlock(), createBlock(unref(FluxIcon), {
@@ -12191,11 +12200,20 @@ var FluxStatisticsLegendItem_default = /* @__PURE__ */ defineComponent({
 //#region src/component/FluxStatisticsLegend.vue
 var FluxStatisticsLegend_default = /* @__PURE__ */ defineComponent({
 	__name: "FluxStatisticsLegend",
+	props: {
+		direction: { default: "horizontal" },
+		variant: { default: "detailed" }
+	},
 	setup(__props) {
 		const slots = useSlots();
 		const legendContext = inject(FluxStatisticsChartLegendInjectionKey, null);
 		const hasSlot = computed(() => !!slots.default);
 		const autoItems = computed(() => legendContext?.items.value ?? []);
+		const containerClass = computed(() => {
+			if (__props.variant === "compact") return clsx(Legend_module_default.statisticsLegendCompact, __props.direction === "vertical" ? Legend_module_default.isVertical : Legend_module_default.isHorizontal);
+			return Legend_module_default.statisticsLegend;
+		});
+		provide(FluxStatisticsLegendVariantInjectionKey, toRef(() => __props.variant));
 		function onItemMouseEnter(index) {
 			if (legendContext) legendContext.hoveredIndex.value = index;
 		}
@@ -12203,7 +12221,7 @@ var FluxStatisticsLegend_default = /* @__PURE__ */ defineComponent({
 			if (legendContext) legendContext.hoveredIndex.value = null;
 		}
 		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("div", { class: normalizeClass(unref(Legend_module_default).statisticsLegend) }, [hasSlot.value ? renderSlot(_ctx.$slots, "default", { key: 0 }) : (openBlock(true), createElementBlock(Fragment, { key: 1 }, renderList(autoItems.value, (item, index) => {
+			return openBlock(), createElementBlock("div", { class: normalizeClass(containerClass.value) }, [hasSlot.value ? renderSlot(_ctx.$slots, "default", { key: 0 }) : (openBlock(true), createElementBlock(Fragment, { key: 1 }, renderList(autoItems.value, (item, index) => {
 				return openBlock(), createBlock(FluxStatisticsLegendItem_default, {
 					key: item.label,
 					color: item.color,
@@ -12766,6 +12784,6 @@ var CHART_COLORFUL_COLORS = [
 	xr
 ];
 //#endregion
-export { CHART_COLORFUL_COLORS, CHART_COLORS, FluxStatisticsAreaChart_default as FluxStatisticsAreaChart, FluxStatisticsBarChart_default as FluxStatisticsBarChart, FluxStatisticsBase_default as FluxStatisticsBase, FluxStatisticsBoxPlotChart_default as FluxStatisticsBoxPlotChart, FluxStatisticsBubbleChart_default as FluxStatisticsBubbleChart, FluxStatisticsCandlestickChart_default as FluxStatisticsCandlestickChart, FluxStatisticsChange_default as FluxStatisticsChange, FluxStatisticsChart_default as FluxStatisticsChart, FluxStatisticsChartLegendInjectionKey, FluxStatisticsChartPane_default as FluxStatisticsChartPane, FluxStatisticsComparison_default as FluxStatisticsComparison, FluxStatisticsDetailsTable_default as FluxStatisticsDetailsTable, FluxStatisticsDetailsTableRow_default as FluxStatisticsDetailsTableRow, FluxStatisticsDonutChart_default as FluxStatisticsDonutChart, FluxStatisticsEmpty_default as FluxStatisticsEmpty, FluxStatisticsGrid_default as FluxStatisticsGrid, FluxStatisticsHeatmapChart_default as FluxStatisticsHeatmapChart, FluxStatisticsKpi_default as FluxStatisticsKpi, FluxStatisticsLegend_default as FluxStatisticsLegend, FluxStatisticsLegendItem_default as FluxStatisticsLegendItem, FluxStatisticsLegendScope_default as FluxStatisticsLegendScope, FluxStatisticsLineChart_default as FluxStatisticsLineChart, FluxStatisticsMeter_default as FluxStatisticsMeter, FluxStatisticsMetric_default as FluxStatisticsMetric, FluxStatisticsMixedChart_default as FluxStatisticsMixedChart, FluxStatisticsPercentageBar_default as FluxStatisticsPercentageBar, FluxStatisticsPieChart_default as FluxStatisticsPieChart, FluxStatisticsPolarAreaChart_default as FluxStatisticsPolarAreaChart, FluxStatisticsRadarChart_default as FluxStatisticsRadarChart, FluxStatisticsRadialBar_default as FluxStatisticsRadialBar, FluxStatisticsScatterChart_default as FluxStatisticsScatterChart, FluxStatisticsSparkline_default as FluxStatisticsSparkline, FluxStatisticsTreemapChart_default as FluxStatisticsTreemapChart, createChartLegendContext, useChartBaseSetup, useChartHoverSync, useChartSeriesSetup, useChartSlicesSetup, useECharts };
+export { CHART_COLORFUL_COLORS, CHART_COLORS, FluxStatisticsAreaChart_default as FluxStatisticsAreaChart, FluxStatisticsBarChart_default as FluxStatisticsBarChart, FluxStatisticsBase_default as FluxStatisticsBase, FluxStatisticsBoxPlotChart_default as FluxStatisticsBoxPlotChart, FluxStatisticsBubbleChart_default as FluxStatisticsBubbleChart, FluxStatisticsCandlestickChart_default as FluxStatisticsCandlestickChart, FluxStatisticsChange_default as FluxStatisticsChange, FluxStatisticsChart_default as FluxStatisticsChart, FluxStatisticsChartLegendInjectionKey, FluxStatisticsChartPane_default as FluxStatisticsChartPane, FluxStatisticsComparison_default as FluxStatisticsComparison, FluxStatisticsDetailsTable_default as FluxStatisticsDetailsTable, FluxStatisticsDetailsTableRow_default as FluxStatisticsDetailsTableRow, FluxStatisticsDonutChart_default as FluxStatisticsDonutChart, FluxStatisticsEmpty_default as FluxStatisticsEmpty, FluxStatisticsGrid_default as FluxStatisticsGrid, FluxStatisticsHeatmapChart_default as FluxStatisticsHeatmapChart, FluxStatisticsKpi_default as FluxStatisticsKpi, FluxStatisticsLegend_default as FluxStatisticsLegend, FluxStatisticsLegendItem_default as FluxStatisticsLegendItem, FluxStatisticsLegendScope_default as FluxStatisticsLegendScope, FluxStatisticsLegendVariantInjectionKey, FluxStatisticsLineChart_default as FluxStatisticsLineChart, FluxStatisticsMeter_default as FluxStatisticsMeter, FluxStatisticsMetric_default as FluxStatisticsMetric, FluxStatisticsMixedChart_default as FluxStatisticsMixedChart, FluxStatisticsPercentageBar_default as FluxStatisticsPercentageBar, FluxStatisticsPieChart_default as FluxStatisticsPieChart, FluxStatisticsPolarAreaChart_default as FluxStatisticsPolarAreaChart, FluxStatisticsRadarChart_default as FluxStatisticsRadarChart, FluxStatisticsRadialBar_default as FluxStatisticsRadialBar, FluxStatisticsScatterChart_default as FluxStatisticsScatterChart, FluxStatisticsSparkline_default as FluxStatisticsSparkline, FluxStatisticsTreemapChart_default as FluxStatisticsTreemapChart, createChartLegendContext, useChartBaseSetup, useChartHoverSync, useChartSeriesSetup, useChartSlicesSetup, useECharts };
 
 //# sourceMappingURL=index.js.map