origam 2.14.1 → 2.16.0

package/dist/src/components/Card/OrigamCardText.vue

@@ -11,7 +11,16 @@
 </template>
 
 <script lang="ts" setup>
-import { useDensity, useProps, useStyle, useTypography } from "../../composables";
+import {
+  useBorder,
+  useDensity,
+  useMargin,
+  usePadding,
+  useProps,
+  useRounded,
+  useStyle,
+  useTypography
+} from "../../composables";
 import { computed, StyleValue } from "vue";
 const props = defineProps({
   text: { type: [String, Number], required: false },
@@ -52,18 +61,27 @@ const props = defineProps({
   marginBlock: { type: [Boolean, Number, String], required: false },
   marginInline: { type: [Boolean, Number, String], required: false },
   density: { type: null, required: false },
-  fontFamily: { type: String, required: false },
-  fontSize: { type: String, required: false },
-  fontWeight: { type: String, required: false },
-  lineHeight: { type: String, required: false },
-  letterSpacing: { type: String, required: false }
+  fontFamily: { type: null, required: false },
+  fontSize: { type: null, required: false },
+  fontWeight: { type: null, required: false },
+  lineHeight: { type: null, required: false },
+  letterSpacing: { type: null, required: false }
 });
 const { filterProps } = useProps(props);
+defineSlots();
 const { densityClasses } = useDensity(props);
+const { paddingClasses, paddingStyles } = usePadding(props);
+const { marginClasses, marginStyles } = useMargin(props);
+const { borderClasses, borderStyles } = useBorder(props);
+const { roundedClasses, roundedStyles } = useRounded(props);
 const { typographyStyles } = useTypography(props, "card-text");
 const cardTextStyles = computed(() => {
   return [
     typographyStyles.value,
+    borderStyles.value,
+    roundedStyles.value,
+    marginStyles.value,
+    paddingStyles.value,
     props.style
   ];
 });
@@ -71,6 +89,10 @@ const cardTextClasses = computed(() => {
   return [
     "origam-card-text",
     densityClasses.value,
+    borderClasses.value,
+    roundedClasses.value,
+    paddingClasses.value,
+    marginClasses.value,
     props.class
   ];
 });

package/dist/src/components/Carousel/OrigamCarousel.vue

@@ -167,6 +167,7 @@ const props = defineProps({
   width: { type: [Number, String], required: false }
 });
 defineEmits(["update:modelValue"]);
+defineSlots();
 const { filterProps } = useProps(props);
 const { t } = useLocale();
 const model = useVModel(props, "modelValue");

package/dist/src/components/Carousel/OrigamCarouselItem.vue

@@ -111,6 +111,7 @@ const props = defineProps({
   selectedClass: { type: String, required: false }
 });
 const { filterProps } = useProps(props);
+defineSlots();
 const attrs = useAttrs();
 const origamWindowItemRef = ref();
 const origamImgRef = ref();

package/dist/src/components/Chart/OrigamChart.vue

@@ -438,7 +438,7 @@ const props = defineProps({
   title: { type: String, required: false, default: void 0 },
   subtitle: { type: String, required: false, default: void 0 },
   showLegend: { type: Boolean, required: false, default: true },
-  legendPosition: { type: String, required: false, default: "bottom" },
+  legendPosition: { type: null, required: false, default: "bottom" },
   showTooltip: { type: Boolean, required: false, default: true },
   showGrid: { type: Boolean, required: false, default: true },
   showAxis: { type: Boolean, required: false, default: true },
@@ -451,7 +451,7 @@ const props = defineProps({
   xAxisFormat: { type: Function, required: false, default: void 0 },
   yAxisFormat: { type: Function, required: false, default: void 0 },
   aspectRatio: { type: String, required: false, default: void 0 },
-  smoothing: { type: String, required: false, default: "none" },
+  smoothing: { type: null, required: false, default: "none" },
   yMin: { type: Number, required: false, default: void 0 },
   yMax: { type: Number, required: false, default: void 0 },
   gaugeMin: { type: Number, required: false, default: 0 },
@@ -519,7 +519,39 @@ const isParetoType = computed(() => props.type === CHART_TYPE.PARETO);
 const isMapType = computed(() => props.type === CHART_TYPE.MAP);
 const isSparklineType = computed(() => props.type === CHART_TYPE.SPARKLINE);
 const dataCyAttr = computed(() => `origam-chart origam-chart--${props.type}`);
+const surfaceProps = computed(() => ({
+  id: props.id,
+  class: props.class,
+  style: props.style,
+  width: props.width,
+  maxHeight: props.maxHeight,
+  maxWidth: props.maxWidth,
+  minHeight: props.minHeight,
+  minWidth: props.minWidth,
+  bgColor: props.bgColor,
+  elevation: props.elevation,
+  padding: props.padding,
+  paddingTop: props.paddingTop,
+  paddingRight: props.paddingRight,
+  paddingBottom: props.paddingBottom,
+  paddingLeft: props.paddingLeft,
+  paddingBlock: props.paddingBlock,
+  paddingInline: props.paddingInline,
+  margin: props.margin,
+  marginTop: props.marginTop,
+  marginRight: props.marginRight,
+  marginBottom: props.marginBottom,
+  marginLeft: props.marginLeft,
+  marginBlock: props.marginBlock,
+  marginInline: props.marginInline,
+  rounded: props.rounded,
+  roundedTopLeft: props.roundedTopLeft,
+  roundedTopRight: props.roundedTopRight,
+  roundedBottomLeft: props.roundedBottomLeft,
+  roundedBottomRight: props.roundedBottomRight
+}));
 const cartesianProps = computed(() => ({
+  ...surfaceProps.value,
   type: props.type,
   series: seriesWithVisibility.value,
   categories: props.categories,
@@ -549,6 +581,7 @@ const cartesianProps = computed(() => ({
   drilldown: props.drilldown
 }));
 const polarProps = computed(() => ({
+  ...surfaceProps.value,
   type: props.type,
   series: seriesWithVisibility.value,
   categories: props.categories,
@@ -568,6 +601,7 @@ const polarProps = computed(() => ({
   drilldown: props.drilldown
 }));
 const radarProps = computed(() => ({
+  ...surfaceProps.value,
   series: seriesWithVisibility.value,
   categories: props.categories,
   height: props.height,
@@ -581,6 +615,7 @@ const radarProps = computed(() => ({
   aspectRatio: props.aspectRatio
 }));
 const gaugeProps = computed(() => ({
+  ...surfaceProps.value,
   series: seriesWithVisibility.value,
   categories: props.categories,
   height: props.height,
@@ -598,6 +633,7 @@ const gaugeProps = computed(() => ({
   gaugeUnit: props.gaugeUnit
 }));
 const pyramidProps = computed(() => ({
+  ...surfaceProps.value,
   type: props.type,
   series: seriesWithVisibility.value,
   categories: props.categories,
@@ -615,6 +651,7 @@ const pyramidProps = computed(() => ({
   yAxisFormat: props.yAxisFormat
 }));
 const honeycombProps = computed(() => ({
+  ...surfaceProps.value,
   series: seriesWithVisibility.value,
   height: props.height,
   title: props.title,
@@ -630,6 +667,7 @@ const honeycombProps = computed(() => ({
   yAxisFormat: props.yAxisFormat
 }));
 const treemapProps = computed(() => ({
+  ...surfaceProps.value,
   series: seriesWithVisibility.value,
   height: props.height,
   title: props.title,
@@ -644,6 +682,7 @@ const treemapProps = computed(() => ({
   yAxisFormat: props.yAxisFormat
 }));
 const sankeyProps = computed(() => ({
+  ...surfaceProps.value,
   series: seriesWithVisibility.value,
   height: props.height,
   title: props.title,
@@ -659,6 +698,7 @@ const sankeyProps = computed(() => ({
   yAxisFormat: props.yAxisFormat
 }));
 const wordCloudProps = computed(() => ({
+  ...surfaceProps.value,
   series: seriesWithVisibility.value,
   height: props.height,
   title: props.title,
@@ -673,6 +713,7 @@ const wordCloudProps = computed(() => ({
   yAxisFormat: props.yAxisFormat
 }));
 const heatmapProps = computed(() => ({
+  ...surfaceProps.value,
   series: seriesWithVisibility.value,
   height: props.height,
   title: props.title,
@@ -689,6 +730,7 @@ const heatmapProps = computed(() => ({
   yAxisFormat: props.yAxisFormat
 }));
 const sunburstProps = computed(() => ({
+  ...surfaceProps.value,
   series: seriesWithVisibility.value,
   height: props.height,
   title: props.title,
@@ -703,6 +745,7 @@ const sunburstProps = computed(() => ({
   yAxisFormat: props.yAxisFormat
 }));
 const boxPlotProps = computed(() => ({
+  ...surfaceProps.value,
   series: seriesWithVisibility.value,
   categories: props.categories,
   height: props.height,
@@ -723,6 +766,7 @@ const boxPlotProps = computed(() => ({
   yMax: props.yMax
 }));
 const pictorialProps = computed(() => ({
+  ...surfaceProps.value,
   series: seriesWithVisibility.value,
   categories: props.categories,
   height: props.height,
@@ -740,6 +784,7 @@ const pictorialProps = computed(() => ({
   yAxisFormat: props.yAxisFormat
 }));
 const candlestickProps = computed(() => ({
+  ...surfaceProps.value,
   series: seriesWithVisibility.value,
   height: props.height,
   title: props.title,
@@ -758,6 +803,7 @@ const candlestickProps = computed(() => ({
   yMax: props.yMax
 }));
 const streamgraphProps = computed(() => ({
+  ...surfaceProps.value,
   series: seriesWithVisibility.value,
   categories: props.categories,
   height: props.height,
@@ -776,6 +822,7 @@ const streamgraphProps = computed(() => ({
   yAxisFormat: props.yAxisFormat
 }));
 const variwideProps = computed(() => ({
+  ...surfaceProps.value,
   series: seriesWithVisibility.value,
   height: props.height,
   title: props.title,
@@ -795,6 +842,7 @@ const variwideProps = computed(() => ({
   yMax: props.yMax
 }));
 const polarBarProps = computed(() => ({
+  ...surfaceProps.value,
   series: seriesWithVisibility.value,
   categories: props.categories,
   height: props.height,
@@ -811,6 +859,7 @@ const polarBarProps = computed(() => ({
   yAxisFormat: props.yAxisFormat
 }));
 const bulletProps = computed(() => ({
+  ...surfaceProps.value,
   series: seriesWithVisibility.value,
   categories: props.categories,
   height: props.height,
@@ -827,6 +876,7 @@ const bulletProps = computed(() => ({
   yAxisFormat: props.yAxisFormat
 }));
 const paretoProps = computed(() => ({
+  ...surfaceProps.value,
   series: seriesWithVisibility.value,
   height: props.height,
   title: props.title,
@@ -843,6 +893,7 @@ const paretoProps = computed(() => ({
   yAxisFormat: props.yAxisFormat
 }));
 const mapProps = computed(() => ({
+  ...surfaceProps.value,
   series: seriesWithVisibility.value,
   height: props.height,
   title: props.title,
@@ -856,6 +907,7 @@ const mapProps = computed(() => ({
   yAxisFormat: props.yAxisFormat
 }));
 const sparklineProps = computed(() => ({
+  ...surfaceProps.value,
   series: seriesWithVisibility.value,
   height: props.height,
   width: props.width,

package/dist/src/components/Chart/OrigamChartBoxPlot.vue

@@ -285,7 +285,7 @@ const props = defineProps({
   title: { type: String, required: false, default: void 0 },
   subtitle: { type: String, required: false, default: void 0 },
   showLegend: { type: Boolean, required: false, default: false },
-  legendPosition: { type: String, required: false, default: "bottom" },
+  legendPosition: { type: null, required: false, default: "bottom" },
   showTooltip: { type: Boolean, required: false, default: true },
   animated: { type: Boolean, required: false, default: true },
   animationDuration: { type: Number, required: false, default: 600 },
@@ -321,10 +321,11 @@ const props = defineProps({
   roundedBottomRight: { type: [Boolean, Number, String], required: false },
   elevation: { type: [Number, String], required: false },
   bgColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
-  fontSize: { type: String, required: false },
-  fontWeight: { type: String, required: false }
+  fontSize: { type: null, required: false },
+  fontWeight: { type: null, required: false }
 });
 const emit = defineEmits(["point-click", "legend-click", "series-toggle"]);
+defineSlots();
 const { dimensionStyles } = useDimension(props);
 const { backgroundColorClasses, backgroundColorStyles } = useBackgroundColor(props, "bgColor");
 const { elevationClasses, elevationStyles } = useElevation(props);

package/dist/src/components/Chart/OrigamChartBullet.vue

@@ -172,7 +172,7 @@
 					:y-axis-format="yAxisFormat"
 			>
 				<template
-						v-if="$slots.tooltip"
+						v-if="$slots.tooltip && hoveredBullet"
 						#default="bindings"
 				>
 					<slot
@@ -230,15 +230,16 @@ import {
   useRounded
 } from "../../composables";
 import { intentBgExpr, isIntent } from "../../utils/Commons/color.util";
+import { DIRECTION } from "../../enums";
 defineOptions({
   name: "OrigamChartBullet"
 });
 const props = defineProps({
   categories: { type: Array, required: false, default: () => [] },
-  barColor: { type: String, required: false, default: "primary" },
-  targetColor: { type: String, required: false, default: "danger" },
+  barColor: { type: null, required: false, default: "primary" },
+  targetColor: { type: null, required: false, default: "danger" },
   rangeColors: { type: Array, required: false, default: () => ["danger", "warning", "success"] },
-  orientation: { type: String, required: false, default: "horizontal" },
+  orientation: { type: null, required: false, default: "horizontal" },
   barThickness: { type: Number, required: false, default: 0.45 },
   showAxis: { type: Boolean, required: false, default: true },
   xAxisFormat: { type: Function, required: false, default: void 0 },
@@ -247,7 +248,7 @@ const props = defineProps({
   title: { type: String, required: false, default: void 0 },
   subtitle: { type: String, required: false, default: void 0 },
   showLegend: { type: Boolean, required: false, default: false },
-  legendPosition: { type: String, required: false, default: "bottom" },
+  legendPosition: { type: null, required: false, default: "bottom" },
   showTooltip: { type: Boolean, required: false, default: true },
   animated: { type: Boolean, required: false, default: true },
   animationDuration: { type: Number, required: false, default: 600 },
@@ -283,10 +284,11 @@ const props = defineProps({
   roundedBottomRight: { type: [Boolean, Number, String], required: false },
   elevation: { type: [Number, String], required: false },
   bgColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
-  fontSize: { type: String, required: false },
-  fontWeight: { type: String, required: false }
+  fontSize: { type: null, required: false },
+  fontWeight: { type: null, required: false }
 });
 const emit = defineEmits(["point-click", "legend-click", "series-toggle"]);
+defineSlots();
 const { dimensionStyles } = useDimension(props);
 const { backgroundColorClasses, backgroundColorStyles } = useBackgroundColor(props, "bgColor");
 const { elevationClasses, elevationStyles } = useElevation(props);
@@ -299,7 +301,7 @@ const SVG_HEIGHT = 400;
 const AXIS_TICK_COUNT = 5;
 const TARGET_TICK_FRACTION = 0.7;
 const LABEL_GAP = 6;
-const isHorizontal = computed(() => props.orientation !== "vertical");
+const isHorizontal = computed(() => props.orientation !== DIRECTION.VERTICAL);
 const PADDING = computed(
   () => isHorizontal.value ? { top: 12, right: 24, bottom: 32, left: 120 } : { top: 24, right: 24, bottom: 48, left: 40 }
 );

package/dist/src/components/Chart/OrigamChartCandlestick.vue

@@ -147,7 +147,7 @@
 					:y-axis-format="yAxisFormat"
 			>
 				<template
-						v-if="$slots.tooltip"
+						v-if="$slots.tooltip && hoveredCandle"
 						#default="bindings"
 				>
 					<slot
@@ -210,8 +210,8 @@ defineOptions({
 });
 const props = defineProps({
   height: { type: [Number, String], required: false, default: 400 },
-  bullishColor: { type: String, required: false, default: "success" },
-  bearishColor: { type: String, required: false, default: "danger" },
+  bullishColor: { type: null, required: false, default: "success" },
+  bearishColor: { type: null, required: false, default: "danger" },
   candleWidth: { type: Number, required: false, default: 0.6 },
   wickWidth: { type: Number, required: false, default: 1 },
   showLegend: { type: Boolean, required: false, default: false },
@@ -225,7 +225,7 @@ const props = defineProps({
   series: { type: Array, required: true },
   title: { type: String, required: false, default: void 0 },
   subtitle: { type: String, required: false, default: void 0 },
-  legendPosition: { type: String, required: false, default: "bottom" },
+  legendPosition: { type: null, required: false, default: "bottom" },
   animated: { type: Boolean, required: false, default: true },
   animationDuration: { type: Number, required: false, default: 600 },
   colorScheme: { type: Array, required: false, default: () => [] },
@@ -259,10 +259,11 @@ const props = defineProps({
   roundedBottomRight: { type: [Boolean, Number, String], required: false },
   elevation: { type: [Number, String], required: false },
   bgColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
-  fontSize: { type: String, required: false },
-  fontWeight: { type: String, required: false }
+  fontSize: { type: null, required: false },
+  fontWeight: { type: null, required: false }
 });
 const emit = defineEmits(["point-click", "legend-click", "series-toggle"]);
+defineSlots();
 const { dimensionStyles } = useDimension(props);
 const { backgroundColorClasses, backgroundColorStyles } = useBackgroundColor(props, "bgColor");
 const { elevationClasses, elevationStyles } = useElevation(props);
@@ -417,10 +418,10 @@ const enrichedTooltipBindings = (bindings) => {
   const c = hoveredCandle.value;
   return {
     ...bindings,
-    datum: c?.datum ?? null,
-    change: c?.change ?? 0,
-    changePct: c?.changePct ?? 0,
-    isBullish: c?.isBullish ?? true
+    datum: c.datum,
+    change: c.change,
+    changePct: c.changePct,
+    isBullish: c.isBullish
   };
 };
 const showEmpty = computed(() => {

package/dist/src/components/Chart/OrigamChartCartesian.vue

@@ -515,10 +515,10 @@ defineOptions({
   name: "OrigamChartCartesian"
 });
 const props = defineProps({
-  type: { type: String, required: false, default: "line" },
+  type: { type: null, required: false, default: "line" },
   stacked: { type: Boolean, required: false, default: false },
   stacking: { type: null, required: false, default: "normal" },
-  smoothing: { type: String, required: false, default: "none" },
+  smoothing: { type: null, required: false, default: "none" },
   yMin: { type: Number, required: false, default: void 0 },
   yMax: { type: Number, required: false, default: void 0 },
   showGrid: { type: Boolean, required: false, default: true },
@@ -538,7 +538,7 @@ const props = defineProps({
   title: { type: String, required: false, default: void 0 },
   subtitle: { type: String, required: false, default: void 0 },
   showLegend: { type: Boolean, required: false, default: true },
-  legendPosition: { type: String, required: false, default: "bottom" },
+  legendPosition: { type: null, required: false, default: "bottom" },
   animated: { type: Boolean, required: false, default: true },
   animationDuration: { type: Number, required: false, default: 600 },
   colorScheme: { type: Array, required: false, default: () => [] },
@@ -573,10 +573,11 @@ const props = defineProps({
   roundedBottomRight: { type: [Boolean, Number, String], required: false },
   elevation: { type: [Number, String], required: false },
   bgColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
-  fontSize: { type: String, required: false },
-  fontWeight: { type: String, required: false }
+  fontSize: { type: null, required: false },
+  fontWeight: { type: null, required: false }
 });
 const emit = defineEmits(["drill", "drill-up", "zoom", "reset-zoom", "point-click", "legend-click", "series-toggle"]);
+defineSlots();
 const drillStack = ref([]);
 const activeSeries = computed(() => {
   if (!drillStack.value.length) return props.series;

package/dist/src/components/Chart/OrigamChartGauge.vue

@@ -160,7 +160,7 @@ const props = defineProps({
   title: { type: String, required: false, default: void 0 },
   subtitle: { type: String, required: false, default: void 0 },
   showLegend: { type: Boolean, required: false, default: false },
-  legendPosition: { type: String, required: false, default: "bottom" },
+  legendPosition: { type: null, required: false, default: "bottom" },
   showTooltip: { type: Boolean, required: false, default: false },
   animated: { type: Boolean, required: false, default: true },
   animationDuration: { type: Number, required: false, default: 600 },
@@ -196,11 +196,12 @@ const props = defineProps({
   roundedBottomRight: { type: [Boolean, Number, String], required: false },
   elevation: { type: [Number, String], required: false },
   bgColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
-  fontSize: { type: String, required: false },
-  fontWeight: { type: String, required: false }
+  fontSize: { type: null, required: false },
+  fontWeight: { type: null, required: false }
 });
 const emit = defineEmits(["point-click", "legend-click", "series-toggle"]);
 void emit;
+defineSlots();
 const { dimensionStyles } = useDimension(props);
 const { backgroundColorClasses, backgroundColorStyles } = useBackgroundColor(props, "bgColor");
 const { elevationClasses, elevationStyles } = useElevation(props);

package/dist/src/components/Chart/OrigamChartHeatmap.vue

@@ -200,7 +200,7 @@
 				>
 					<slot
 							name="tooltip"
-							v-bind="bindings"
+							v-bind="enrichedTooltipBindings(bindings)"
 					/>
 				</template>
 			</origam-chart-tooltip>
@@ -245,7 +245,7 @@ const props = defineProps({
   showLabel: { type: Boolean, required: false, default: true },
   showAxis: { type: Boolean, required: false, default: true },
   showGradientLegend: { type: Boolean, required: false, default: true },
-  legendPosition: { type: String, required: false, default: "bottom" },
+  legendPosition: { type: null, required: false, default: "bottom" },
   xAxisFormat: { type: Function, required: false, default: void 0 },
   yAxisFormat: { type: Function, required: false, default: void 0 },
   series: { type: Array, required: true },
@@ -288,10 +288,11 @@ const props = defineProps({
   roundedBottomRight: { type: [Boolean, Number, String], required: false },
   elevation: { type: [Number, String], required: false },
   bgColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
-  fontSize: { type: String, required: false },
-  fontWeight: { type: String, required: false }
+  fontSize: { type: null, required: false },
+  fontWeight: { type: null, required: false }
 });
 const emit = defineEmits(["point-click", "legend-click", "series-toggle"]);
+defineSlots();
 const { dimensionStyles } = useDimension(props);
 const { backgroundColorClasses, backgroundColorStyles } = useBackgroundColor(props, "bgColor");
 const { elevationClasses, elevationStyles } = useElevation(props);
@@ -470,6 +471,16 @@ const hoveredCategory = computed(() => {
   if (!c) return "";
   return `${c.xCat} \xD7 ${c.yCat}`;
 });
+const enrichedTooltipBindings = (bindings) => {
+  const c = hoveredCell.value;
+  return {
+    ...bindings,
+    color: c?.color ?? "",
+    xLabel: c ? formatXLabel(c.xCat) : "",
+    yLabel: c ? formatYLabel(c.yCat) : "",
+    value: c?.value ?? 0
+  };
+};
 const showEmpty = computed(() => {
   if (!props.series?.length) return true;
   const first = props.series[0];

package/dist/src/components/Chart/OrigamChartHoneycomb.vue

@@ -174,7 +174,7 @@ const props = defineProps({
   title: { type: String, required: false, default: void 0 },
   subtitle: { type: String, required: false, default: void 0 },
   showLegend: { type: Boolean, required: false, default: true },
-  legendPosition: { type: String, required: false, default: "bottom" },
+  legendPosition: { type: null, required: false, default: "bottom" },
   showTooltip: { type: Boolean, required: false, default: true },
   animated: { type: Boolean, required: false, default: true },
   animationDuration: { type: Number, required: false, default: 600 },
@@ -210,10 +210,11 @@ const props = defineProps({
   roundedBottomRight: { type: [Boolean, Number, String], required: false },
   elevation: { type: [Number, String], required: false },
   bgColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
-  fontSize: { type: String, required: false },
-  fontWeight: { type: String, required: false }
+  fontSize: { type: null, required: false },
+  fontWeight: { type: null, required: false }
 });
 const emit = defineEmits(["point-click", "legend-click", "series-toggle"]);
+defineSlots();
 const { dimensionStyles } = useDimension(props);
 const { backgroundColorClasses, backgroundColorStyles } = useBackgroundColor(props, "bgColor");
 const { elevationClasses, elevationStyles } = useElevation(props);

package/dist/src/components/Chart/OrigamChartLegend.vue

@@ -40,9 +40,10 @@ defineOptions({
 });
 const props = defineProps({
   items: { type: Array, required: true },
-  position: { type: String, required: false, default: "bottom" }
+  position: { type: null, required: false, default: "bottom" }
 });
 const emit = defineEmits(["legend-click", "series-toggle"]);
+defineSlots();
 const legendClasses = computed(() => ({
   [`origam-chart__legend--${props.position}`]: true
 }));

package/dist/src/components/Chart/OrigamChartMap.vue

@@ -213,8 +213,8 @@ import {
   useRounded
 } from "../../composables";
 import { intentBgExpr, isIntent } from "../../utils/Commons/color.util";
-import { CHART_MAP_MODE } from "../../enums/Chart/chart-map-mode.enum";
-import { WORLD_GEOGRAPHIC_DATA } from "../../consts/Chart/world-geographic.const";
+import { CHART_MAP_MODE } from "../../enums/Chart/chart-map.enum";
+import { WORLD_GEOGRAPHIC_DATA } from "../../consts/Chart/chart-map.const";
 import { multiPolygonToSvgPath, multiPolygonCentroid } from "../../utils/Chart/mercator.util";
 defineOptions({
   name: "OrigamChartMap"
@@ -224,7 +224,7 @@ const props = defineProps({
   colorRange: { type: Array, required: false, default: () => ["info", "danger"] },
   defaultCountryFill: { type: String, required: false, default: "rgba(0,0,0,0.08)" },
   borderColor: { type: String, required: false, default: "rgba(0,0,0,0.2)" },
-  lineColor: { type: String, required: false, default: "primary" },
+  lineColor: { type: null, required: false, default: "primary" },
   nodeRadius: { type: Number, required: false, default: 4 },
   routeCurvature: { type: Number, required: false, default: 0.3 },
   yAxisFormat: { type: Function, required: false, default: void 0 },
@@ -233,7 +233,7 @@ const props = defineProps({
   title: { type: String, required: false, default: void 0 },
   subtitle: { type: String, required: false, default: void 0 },
   showLegend: { type: Boolean, required: false, default: true },
-  legendPosition: { type: String, required: false, default: "bottom" },
+  legendPosition: { type: null, required: false, default: "bottom" },
   showTooltip: { type: Boolean, required: false, default: true },
   animated: { type: Boolean, required: false, default: true },
   animationDuration: { type: Number, required: false, default: 600 },
@@ -269,10 +269,11 @@ const props = defineProps({
   roundedBottomRight: { type: [Boolean, Number, String], required: false },
   elevation: { type: [Number, String], required: false },
   bgColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
-  fontSize: { type: String, required: false },
-  fontWeight: { type: String, required: false }
+  fontSize: { type: null, required: false },
+  fontWeight: { type: null, required: false }
 });
 const emit = defineEmits(["point-click", "legend-click", "series-toggle"]);
+defineSlots();
 const { dimensionStyles } = useDimension(props);
 const { backgroundColorClasses, backgroundColorStyles } = useBackgroundColor(props, "bgColor");
 const { elevationClasses, elevationStyles } = useElevation(props);