origam 2.15.0 → 2.16.0

package/dist/src/components/Calendar/OrigamCalendar.vue

@@ -34,7 +34,7 @@
             :aria-label="ariaPrevLabel"
             :disabled="!canPrev"
             data-cy="origam-calendar-prev"
-            @click="onNavigate('prev')"
+            @click="onNavigate(CALENDAR_NAVIGATE.PREV)"
           />
           <origam-btn
             variant="text"
@@ -42,7 +42,7 @@
             :text="todayLabel"
             :aria-label="ariaTodayLabel"
             data-cy="origam-calendar-today"
-            @click="onNavigate('today')"
+            @click="onNavigate(CALENDAR_NAVIGATE.TODAY)"
           />
           <origam-btn
             variant="text"
@@ -51,7 +51,7 @@
             :aria-label="ariaNextLabel"
             :disabled="!canNext"
             data-cy="origam-calendar-next"
-            @click="onNavigate('next')"
+            @click="onNavigate(CALENDAR_NAVIGATE.NEXT)"
           />
         </origam-btn-group>
 
@@ -85,7 +85,7 @@
     </slot>
 
     <div
-      v-if="resolvedView === VIEW.MONTH"
+      v-if="resolvedView === CALENDAR_VIEW.MONTH"
       class="origam-calendar__body origam-calendar__body--month"
       data-cy="origam-calendar-body-month"
     >
@@ -188,11 +188,11 @@
     </div>
 
     <div
-      v-else-if="resolvedView === VIEW.WEEK || resolvedView === VIEW.DAY"
+      v-else-if="resolvedView === CALENDAR_VIEW.WEEK || resolvedView === CALENDAR_VIEW.DAY"
       class="origam-calendar__body"
       :class="{
-					'origam-calendar__body--week': resolvedView === VIEW.WEEK,
-					'origam-calendar__body--day': resolvedView === VIEW.DAY
+					'origam-calendar__body--week': resolvedView === CALENDAR_VIEW.WEEK,
+					'origam-calendar__body--day': resolvedView === CALENDAR_VIEW.DAY
 				}"
       :data-cy="`origam-calendar-body-${resolvedView}`"
     >
@@ -221,7 +221,7 @@
             :data-cy="`origam-calendar-timeline-day-${dayCellKey(day)}`"
           >
             <div
-              v-if="resolvedView === VIEW.WEEK"
+              v-if="resolvedView === CALENDAR_VIEW.WEEK"
               class="origam-calendar__day-header"
             >
               <slot
@@ -345,6 +345,7 @@ import {
   watch
 } from "vue";
 import { OrigamBtn, OrigamBtnGroup } from "../../components";
+import { CALENDAR_NAVIGATE, CALENDAR_VIEW, INTENT, VARIANT } from "../../enums";
 import {
   useCalendar,
   useDensity,
@@ -376,11 +377,11 @@ import {
   toDate
 } from "../../utils/Calendar/date.util";
 const props = defineProps({
-  view: { type: String, required: false, default: "month" },
+  view: { type: null, required: false, default: "month" },
   currentDate: { type: [Date, String], required: false, default: () => /* @__PURE__ */ new Date() },
   events: { type: Array, required: false, default: () => [] },
   firstDayOfWeek: { type: Number, required: false, default: 1 },
-  timeFormat: { type: String, required: false, default: "24h" },
+  timeFormat: { type: null, required: false, default: "24h" },
   locale: { type: String, required: false, default: void 0 },
   selectable: { type: Boolean, required: false, default: true },
   eventColorKey: { type: String, required: false, default: "category" },
@@ -441,21 +442,15 @@ const props = defineProps({
 });
 const emit = defineEmits(["update:view", "update:currentDate", "event-click", "date-click", "range-select", "create-event-request", "view-change", "navigate"]);
 defineSlots();
-const VIEW = {
-  MONTH: "month",
-  WEEK: "week",
-  DAY: "day",
-  AGENDA: "agenda"
-};
-const VIEW_OPTIONS = [VIEW.MONTH, VIEW.WEEK, VIEW.DAY, VIEW.AGENDA];
+const VIEW_OPTIONS = [CALENDAR_VIEW.MONTH, CALENDAR_VIEW.WEEK, CALENDAR_VIEW.DAY, CALENDAR_VIEW.AGENDA];
 const MONTH_EVENT_LIMIT = 3;
 const DEFAULT_SLOT_HEIGHT_PX = 32;
 const { t } = useLocale();
 const VIEW_LABEL_FALLBACK = {
-  month: "Month",
-  week: "Week",
-  day: "Day",
-  agenda: "Agenda"
+  [CALENDAR_VIEW.MONTH]: "Month",
+  [CALENDAR_VIEW.WEEK]: "Week",
+  [CALENDAR_VIEW.DAY]: "Day",
+  [CALENDAR_VIEW.AGENDA]: "Agenda"
 };
 function viewLabel(view) {
   return t(`origam.calendar.view.${view}`, VIEW_LABEL_FALLBACK[view]);
@@ -475,7 +470,7 @@ const dayStartHour = computed(() => props.dayStartHour);
 const dayEndHour = computed(() => props.dayEndHour);
 const showWeekNumbers = computed(() => props.showWeekNumbers);
 const weekendHighlight = computed(() => props.weekendHighlight);
-const internalView = ref(props.view ?? "month");
+const internalView = ref(props.view ?? CALENDAR_VIEW.MONTH);
 const internalDate = ref(toDate(props.currentDate) ?? /* @__PURE__ */ new Date());
 watch(() => props.view, (next) => {
   if (next != null) internalView.value = next;
@@ -534,14 +529,14 @@ function isViewActive(view) {
   return resolvedView.value === view;
 }
 function viewBtnVariant(view) {
-  return isViewActive(view) ? "flat" : "text";
+  return isViewActive(view) ? VARIANT.FLAT : VARIANT.TEXT;
 }
 const toolbarIntent = computed(() => {
   const bg = props.bgColor;
   if (bg && isIntent(bg)) return bg;
   const fg = props.color;
   if (fg && isIntent(fg)) return fg;
-  return "primary";
+  return INTENT.PRIMARY;
 });
 function viewBtnBgColor(view) {
   return isViewActive(view) ? toolbarIntent.value : void 0;
@@ -550,21 +545,21 @@ const headerTitle = computed(() => {
   const date = resolvedDate.value;
   const locale = resolvedLocale.value;
   switch (resolvedView.value) {
-    case "week": {
+    case CALENDAR_VIEW.WEEK: {
       const range = calendar.visibleDateRange.value;
       const startLabel = formatDate(range.start, locale, { month: "short", day: "numeric" });
       const endLabel = formatDate(range.end, locale, { month: "short", day: "numeric", year: "numeric" });
       return `${startLabel} \u2014 ${endLabel}`;
     }
-    case "day":
+    case CALENDAR_VIEW.DAY:
       return formatDate(date, locale, {
         weekday: "long",
         month: "long",
         day: "numeric",
         year: "numeric"
       });
-    case "month":
-    case "agenda":
+    case CALENDAR_VIEW.MONTH:
+    case CALENDAR_VIEW.AGENDA:
     default:
       return formatDate(date, locale, { month: "long", year: "numeric" });
   }
@@ -631,7 +626,7 @@ function ariaDayLabel(date) {
   });
 }
 const timelineDays = computed(() => {
-  if (resolvedView.value === "day") return [startOfDay(resolvedDate.value)];
+  if (resolvedView.value === CALENDAR_VIEW.DAY) return [startOfDay(resolvedDate.value)];
   const range = calendar.visibleDateRange.value;
   const out = [];
   let cursor = startOfDay(range.start);
@@ -685,16 +680,7 @@ function agendaDayHeader(date) {
     day: "numeric"
   });
 }
-const INTENT_NAMES = [
-  "neutral",
-  "primary",
-  "secondary",
-  "ghost",
-  "success",
-  "warning",
-  "danger",
-  "info"
-];
+const INTENT_NAMES = Object.values(INTENT);
 function colorFor(event) {
   if (props.eventColorKey === "color" && event.color) {
     return resolveColor(event.color);

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

@@ -4,7 +4,7 @@
 			v-ripple="isClickable && ripple"
 			v-contrast
 			:class="cardClasses"
-			:href="link.href"
+			:href="link.href.value"
 			:style="cardStyles"
 			:tabindex="disabled ? -1 : undefined"
 			@click="handleClick"
@@ -159,7 +159,7 @@ import {
   useStyle
 } from "../../composables";
 import { vContrast, vRipple } from "../../directives";
-import { DENSITY, PROGRESS_TYPE } from "../../enums";
+import { DENSITY, LOADER_KIND, PROGRESS_TYPE } from "../../enums";
 import { computed, StyleValue, toRef, useAttrs, useSlots } from "vue";
 const _props = defineProps({
   disabled: { type: Boolean, required: false },
@@ -275,7 +275,7 @@ const {
   hasPrepend
 } = useAdjacent(props, toRef(props, "prependIcon"), toRef(props, "appendIcon"));
 const isClickable = computed(() => {
-  return !props.disabled && props.link && (props.link || link.isClickable.value);
+  return !props.disabled && (props.link || link.isClickable.value);
 });
 const handleClick = (event) => {
   onActive();
@@ -283,7 +283,7 @@ const handleClick = (event) => {
     link.navigate(event);
   }
 };
-const { loaderClasses, loaderConfig } = useLoader(props, "line");
+const { loaderClasses, loaderConfig } = useLoader(props, LOADER_KIND.LINE);
 const slots = useSlots();
 const hasLoading = computed(() => {
   return slots.loader || loaderConfig.value.isActive;

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

@@ -95,8 +95,12 @@
 import { OrigamAvatar, OrigamIcon } from "../../components";
 import {
   useAdjacent,
+  useBorder,
   useDensity,
+  useMargin,
+  usePadding,
   useProps,
+  useRounded,
   useStyle,
   useTypography
 } from "../../composables";
@@ -145,17 +149,21 @@ const props = defineProps({
   appendIcon: { type: null, required: false },
   prependAvatar: { type: String, required: false },
   prependIcon: { 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 }
 });
 defineEmits(["click:append", "click:prepend"]);
 defineSlots();
 const { filterProps } = useProps(props);
 const slots = useSlots();
 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: titleTypographyStyles } = useTypography(props, "card-header__title");
 const { typographyStyles: subtitleTypographyStyles } = useTypography(props, "card-header__subtitle");
 const {
@@ -172,6 +180,10 @@ const hasSubtitle = computed(() => {
 });
 const cardHeaderStyles = computed(() => {
   return [
+    borderStyles.value,
+    roundedStyles.value,
+    marginStyles.value,
+    paddingStyles.value,
     props.style
   ];
 });
@@ -179,6 +191,10 @@ const cardHeaderClasses = computed(() => {
   return [
     "origam-card-header",
     densityClasses.value,
+    borderClasses.value,
+    roundedClasses.value,
+    paddingClasses.value,
+    marginClasses.value,
     props.class
   ];
 });

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,19 +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
   ];
 });
@@ -72,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/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,8 +321,8 @@ 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();

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

@@ -248,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 },
@@ -284,8 +284,8 @@ 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();

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

@@ -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,8 +259,8 @@ 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();

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,8 +573,8 @@ 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();

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,8 +196,8 @@ 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;