origam 0.3.10 → 2.2.1

package/dist/src/components/DataTable/OrigamDataTableHeaders.vue

@@ -1,58 +1,67 @@
 <template>
-	<template v-if="loading">
+	<template v-if="mobile">
+		<slot
+				name="mobile"
+				v-bind="slotProps"
+		>
+			<origam-data-table-headers-cell-mobile
+					ref="origamDataTableHeadersCellMobileRef"
+					:class="dataTableHeadersClasses"
+					:columns="columns"
+					:style="dataTableHeadersStyles"
+					v-bind="dataTableHeadersCellMobileProps"
+			/>
+		</slot>
+	</template>
+	<template v-else>
+		<slot
+				name="default"
+				v-bind="slotProps"
+		>
+			<origam-data-table-headers-cell
+					ref="origamDataTableHeadersCellRef"
+					:class="dataTableHeadersClasses"
+					:headers="headers"
+					:style="dataTableHeadersStyles"
+					v-bind="dataTableHeadersCellProps"
+			/>
+		</slot>
+	</template>
+
+	<template v-if="loaderConfig.isActive && loaderConfig.kind !== 'skeleton'">
 		<tr class="origam-data-table-headers origam-data-table-headers--progress">
 			<th
 					:colspan="columns.length"
-					class="origam-data-table-header-cell"
+					class="origam-data-table-headers__progress-cell"
 			>
 				<slot name="loader">
 					<origam-progress
 							:color="color"
-							:type="PROGRESS_TYPE.LINEAR"
-							absolute
-							active
-							indeterminate
-							thickness="4"
+							:type="loaderConfig.kind === 'line' ? PROGRESS_TYPE.LINEAR : PROGRESS_TYPE.CIRCULAR"
+							:active="true"
+							:indeterminate="loaderConfig.indeterminate"
+							:model-value="loaderConfig.modelValue"
+							thickness="2"
+							v-bind="loaderConfig.overrides"
 					/>
 				</slot>
 			</th>
 		</tr>
 	</template>
-	<template v-else>
-		<template v-if="mobile">
-			<slot
-					name="mobile"
-					v-bind="slotProps"
-			>
-				<origam-data-table-headers-cell-mobile
-						ref="origamDataTableHeadersCellMobileRef"
-						:class="dataTableHeadersClasses"
-						:columns="columns"
-						:style="dataTableHeadersStyles"
-						v-bind="dataTableHeadersCellMobileProps"
-				/>
-			</slot>
-		</template>
-		<template v-else>
-			<slot
-					name="default"
-					v-bind="slotProps"
-			>
-				<origam-data-table-headers-cell
-						ref="origamDataTableHeadersCellRef"
-						:class="dataTableHeadersClasses"
-						:headers="headers"
-						:style="dataTableHeadersStyles"
-						v-bind="dataTableHeadersCellProps"
-				/>
-			</slot>
-		</template>
-	</template>
 </template>
 
 <script setup>
 import { OrigamDataTableHeadersCell, OrigamDataTableHeadersCellMobile, OrigamProgress } from "../../components";
-import { useDisplay, useHeaders, useHeadersCell, useLoader, useProps, useSelection, useSort } from "../../composables";
+import {
+  useDisplay,
+  useHeaders,
+  useHeadersCell,
+  useLoader,
+  useProps,
+  useSelection,
+  useSort,
+  useStyle
+} from "../../composables";
 import { PROGRESS_TYPE } from "../../enums";
 import { computed, ref, StyleValue } from "vue";
 const props = defineProps({
@@ -60,13 +69,8 @@ const props = defineProps({
   class: { type: [String, Array, Object], required: false },
   style: { type: [String, Array, Object, Boolean, null], required: false, skipCheck: true },
   color: { type: [String, Boolean, null], required: false, skipCheck: true },
-  bgColor: { type: [String, Boolean, null], required: false, skipCheck: true },
-  activeColor: { type: [String, Boolean, null], required: false, skipCheck: true },
-  activeBgColor: { type: [String, Boolean, null], required: false, skipCheck: true },
-  hoverColor: { type: [String, Boolean, null], required: false, skipCheck: true },
-  hoverBgColor: { type: [String, Boolean, null], required: false, skipCheck: true },
   mobileBreakpoint: { type: null, required: false },
-  loading: { type: [Boolean, Number], required: false },
+  loading: { type: [Boolean, Number, Object], required: false },
   loadingText: { type: String, required: false },
   tag: { type: String, required: false },
   disableSort: { type: Boolean, required: false },
@@ -82,7 +86,7 @@ const origamDataTableHeadersCellMobileRef = ref();
 const { toggleSort, sortBy, isSorted } = useSort();
 const { someSelected, allSelected, selectAll } = useSelection();
 const { columns, headers } = useHeaders();
-const { loaderClasses } = useLoader(props);
+const { loaderClasses, loaderConfig } = useLoader(props, "line");
 const { getSortIcon } = useHeadersCell(props);
 const { displayClasses, mobile } = useDisplay(props);
 const slotProps = computed(() => {
@@ -120,29 +124,23 @@ const dataTableHeadersStyles = computed(() => {
     props.style
   ];
 });
+const { id, css, load, isLoaded, unload } = useStyle(dataTableHeadersStyles);
 defineExpose({
-  filterProps
+  filterProps,
+  css,
+  id,
+  load,
+  unload,
+  isLoaded
 });
 </script>
 
 <style lang="scss" scoped>
 	.origam-data-table-headers {
-		&__progress {
-			> .origam-data-table-headers-cell {
-				border: none;
-				height: auto;
-				padding: 0;
-			}
-
-			&:deep(.origam-progress) {
-				position: relative;
-			}
+		&--progress > &__progress-cell {
+			border: none;
+			height: auto;
+			padding: 0;
 		}
 	}
 </style>
-
-<style>
-	:root {
-
-	}
-</style>

package/dist/src/components/DataTable/OrigamDataTableHeadersCell.vue

@@ -24,7 +24,7 @@
 
 <script setup>
 import { OrigamDataTableHeaderCell } from "../../components";
-import { useProps } from "../../composables";
+import { useProps, useStyle } from "../../composables";
 import { computed, ref, StyleValue } from "vue";
 const props = defineProps({
   headers: { type: Array, required: true },
@@ -32,11 +32,6 @@ const props = defineProps({
   class: { type: [String, Array, Object], required: false },
   style: { type: [String, Array, Object, Boolean, null], required: false, skipCheck: true },
   color: { type: [String, Boolean, null], required: false, skipCheck: true },
-  bgColor: { type: [String, Boolean, null], required: false, skipCheck: true },
-  activeColor: { type: [String, Boolean, null], required: false, skipCheck: true },
-  activeBgColor: { type: [String, Boolean, null], required: false, skipCheck: true },
-  hoverColor: { type: [String, Boolean, null], required: false, skipCheck: true },
-  hoverBgColor: { type: [String, Boolean, null], required: false, skipCheck: true },
   disableSort: { type: Boolean, required: false },
   headerProps: { type: null, required: false },
   sticky: { type: Boolean, required: false },
@@ -47,9 +42,7 @@ const props = defineProps({
 const { filterProps } = useProps(props);
 const origamDataTableHeaderCellRef = ref();
 const dataTableHeaderCellProps = computed(() => {
-  return origamDataTableHeaderCellRef.value?.some((headerCell) => {
-    return headerCell?.filterProps(props);
-  });
+  return origamDataTableHeaderCellRef.value?.[0]?.filterProps(props);
 });
 const dataTableHeadersCellClasses = computed(() => {
   return [
@@ -61,7 +54,13 @@ const dataTableHeadersCellStyles = computed(() => {
     props.style
   ];
 });
+const { id, css, load, isLoaded, unload } = useStyle(dataTableHeadersCellStyles);
 defineExpose({
-  filterProps
+  filterProps,
+  css,
+  id,
+  load,
+  unload,
+  isLoaded
 });
 </script>

package/dist/src/components/DataTable/OrigamDataTableHeadersCellMobile.vue

@@ -186,7 +186,14 @@
 
 <script setup>
 import { OrigamChip, OrigamDataTableColumnCell, OrigamSelect } from "../../components";
-import { useHeadersCell, useLocale, useProps, useSelection, useSort } from "../../composables";
+import {
+  useHeadersCell,
+  useLocale,
+  useProps,
+  useSelection,
+  useSort,
+  useStyle
+} from "../../composables";
 import { DENSITY, MDI_ICONS } from "../../enums";
 import { computed, mergeProps, useSlots } from "vue";
 const props = defineProps({
@@ -201,12 +208,7 @@ const props = defineProps({
   multiSort: { type: Boolean, required: false },
   sortAscIcon: { type: null, required: false },
   sortDescIcon: { type: null, required: false },
-  color: { type: [String, Boolean, null], required: false, skipCheck: true },
-  bgColor: { type: [String, Boolean, null], required: false, skipCheck: true },
-  activeColor: { type: [String, Boolean, null], required: false, skipCheck: true },
-  activeBgColor: { type: [String, Boolean, null], required: false, skipCheck: true },
-  hoverColor: { type: [String, Boolean, null], required: false, skipCheck: true },
-  hoverBgColor: { type: [String, Boolean, null], required: false, skipCheck: true }
+  color: { type: [String, Boolean, null], required: false, skipCheck: true }
 });
 const emits = defineEmits(["click:clear", "click:prepend", "click:append"]);
 const { filterProps } = useProps(props);
@@ -255,7 +257,13 @@ const dataTableHeadersCellStyles = computed(() => {
     props.style
   ];
 });
+const { id, css, load, isLoaded, unload } = useStyle(dataTableHeadersCellStyles);
 defineExpose({
-  filterProps
+  filterProps,
+  css,
+  id,
+  load,
+  unload,
+  isLoaded
 });
 </script>

package/dist/src/components/DataTable/OrigamDataTableRow.vue

@@ -79,7 +79,16 @@
 
 <script setup>
 import { OrigamBtn, OrigamCheckboxBtn, OrigamDataTableColumnCell } from "../../components";
-import { useCell, useDisplay, useExpanded, useHeaders, useProps, useSelection, useSort } from "../../composables";
+import {
+  useCell,
+  useDisplay,
+  useExpanded,
+  useHeaders,
+  useProps,
+  useSelection,
+  useSort,
+  useStyle
+} from "../../composables";
 import { MDI_ICONS, SIZES } from "../../enums";
 import { getCurrentInstance, getObjectValueByPath } from "../../utils";
 import { computed, StyleValue, toDisplayString, withModifiers } from "vue";
@@ -179,8 +188,14 @@ const dataTableRowStyles = computed(() => {
     props.style
   ];
 });
+const { id, css, load, isLoaded, unload } = useStyle(dataTableRowStyles);
 defineExpose({
-  filterProps
+  filterProps,
+  css,
+  id,
+  load,
+  unload,
+  isLoaded
 });
 </script>
 
@@ -188,13 +203,18 @@ defineExpose({
 	.origam-data-table-row {
 		$this: &;
 
-		&__column-title {
-			font-weight: 500;
-			text-align: left;
+		background-color: var(--origam-data-table-row---background-color, var(--origam-color__surface---default));
+		color: var(--origam-data-table-row---color, var(--origam-color__text---primary));
+		transition-property: background-color;
+		transition-duration: var(--origam-data-table-row---transition-duration, 100ms);
+		transition-timing-function: var(--origam-data-table-row---transition-easing, cubic-bezier(0.4, 0, 0.2, 1));
+
+		&:hover {
+			background-color: var(--origam-data-table-row--hover---background-color, var(--origam-color__surface---overlay));
 		}
 
-		&__column-value {
-			text-align: right;
+		&__column-title {
+			font-weight: var(--origam-data-table-row__column-title---font-weight, 500);
 		}
 
 		&--clickable {
@@ -202,6 +222,14 @@ defineExpose({
 		}
 
 		&--mobile {
+			#{$this}__column-title {
+				text-align: left;
+			}
+
+			#{$this}__column-value {
+				text-align: right;
+			}
+
 			#{$this}__column {
 				height: fit-content;
 
@@ -221,7 +249,7 @@ defineExpose({
 				column-gap: 4px;
 				display: grid;
 				grid-template-columns: repeat(2, 1fr);
-				min-height: var(--origam-data-table-row--mobile__column);
+				min-height: var(--origam-data-table-row--mobile__column-min-height, var(--origam-data-table-row--mobile__column, 52px));
 
 				&:not(:last-child) {
 					border-bottom: 0;
@@ -230,9 +258,3 @@ defineExpose({
 		}
 	}
 </style>
-
-<style>
-	:root {
-		--origam-data-table-row--mobile__column: 52px;
-	}
-</style>

package/dist/src/components/DataTable/OrigamDataTableRows.vue

@@ -1,15 +1,33 @@
 <template>
-	<template v-if="loading">
-		<tr
-				key="loading"
-				class="origam-data-table-rows origam-data-table-rows--loading"
-		>
-			<td :colspan="columns.length">
-				<slot name="loading">
-					{{ t(loadingText) }}
-				</slot>
-			</td>
-		</tr>
+	<template v-if="loaderConfig.isActive">
+		<template v-if="loaderConfig.kind === 'skeleton'">
+			<tr
+					v-for="rowIndex in SKELETON_ROW_COUNT"
+					:key="`skeleton-row_${rowIndex}`"
+					class="origam-data-table-rows origam-data-table-rows--skeleton"
+					aria-busy="true"
+			>
+				<td
+						v-for="col in columns"
+						:key="`skeleton-cell_${col.key}`"
+						class="origam-data-table-rows__skeleton-cell"
+				>
+					<origam-skeleton variant="text" :loading="true" />
+				</td>
+			</tr>
+		</template>
+		<template v-else>
+			<tr
+					key="loading"
+					class="origam-data-table-rows origam-data-table-rows--loading"
+			>
+				<td :colspan="columns.length">
+					<slot name="loading">
+						{{ t(loadingText) }}
+					</slot>
+				</td>
+			</tr>
+		</template>
 	</template>
 
 	<template v-else-if="!(items && items.length) && !hideNoData">
@@ -36,7 +54,6 @@
 							:key="`group-header_${item.id}`"
 							v-bind="groupHeaderSlotProps(item, index)"
 					>
-						<!-- TODO SLOT BODY-->
 					</origam-data-table-group-header-row>
 				</slot>
 			</template>
@@ -50,7 +67,6 @@
 							:item="item"
 							v-bind="{...itemSlotProps(item, index).props}"
 					>
-						<!-- TODO SLOT BODY-->
 					</origam-data-table-row>
 				</slot>
 
@@ -66,8 +82,8 @@
 </template>
 
 <script setup>
-import { OrigamDataTableGroupHeaderRow, OrigamDataTableRow } from "../../components";
-import { useDisplay, useExpanded, useGroupBy, useHeaders, useLocale, useProps, useSelection } from "../../composables";
+import { OrigamDataTableGroupHeaderRow, OrigamDataTableRow, OrigamSkeleton } from "../../components";
+import { useDisplay, useExpanded, useGroupBy, useHeaders, useLoader, useLocale, useProps, useSelection } from "../../composables";
 import { getPrefixedEventHandlers } from "../../utils";
 import { mergeProps, useAttrs } from "vue";
 const attrs = useAttrs();
@@ -80,19 +96,16 @@ const props = defineProps({
   id: { type: String, required: false },
   class: { type: [String, Array, Object], required: false },
   style: { type: [String, Array, Object, Boolean, null], required: false, skipCheck: true },
-  loading: { type: [Boolean, Number], required: false },
+  loading: { type: [Boolean, Number, Object], required: false },
   loadingText: { type: String, required: false, default: "origam.dataIterator.loadingText" },
   tag: { type: String, required: false },
   color: { type: [String, Boolean, null], required: false, skipCheck: true },
-  bgColor: { type: [String, Boolean, null], required: false, skipCheck: true },
-  activeColor: { type: [String, Boolean, null], required: false, skipCheck: true },
-  activeBgColor: { type: [String, Boolean, null], required: false, skipCheck: true },
-  hoverColor: { type: [String, Boolean, null], required: false, skipCheck: true },
-  hoverBgColor: { type: [String, Boolean, null], required: false, skipCheck: true },
   mobileBreakpoint: { type: null, required: false }
 });
 const { filterProps } = useProps(props);
 const { t } = useLocale();
+const SKELETON_ROW_COUNT = 5;
+const { loaderConfig } = useLoader(props, "line");
 const { columns } = useHeaders();
 const { expandOnClick, toggleExpand, isExpanded } = useExpanded();
 const { isSelected, toggleSelect } = useSelection();
@@ -137,6 +150,16 @@ const itemSlotProps = (item, index) => {
         index,
         item,
         cellProps: props.cellProps,
+        // Forward `mobileBreakpoint` so each row's own
+        // `useDisplay(props)` resolves to the SAME
+        // threshold the table-level resolved. Pre-fix
+        // only `mobile: mobile.value` was passed but the
+        // row's interface declares `mobileBreakpoint`,
+        // not `mobile` — so the row fell back to the
+        // global `'lg'` (1280px), forcing mobile mode
+        // on every viewport <1280px regardless of what
+        // the consumer set on the DataTable.
+        mobileBreakpoint: props.mobileBreakpoint,
         mobile: mobile.value
       },
       getPrefixedEventHandlers(attrs, ":row", () => slotPropsLocal),
@@ -156,13 +179,18 @@ defineExpose({
 <style lang="scss" scoped>
 	.origam-data-table-rows {
 		&--no-data {
-			text-align: center;
+			text-align: var(--origam-data-table-empty---text-align, center);
+			color: var(--origam-data-table-rows--no-data---color, var(--origam-color__text---secondary));
 		}
-	}
-</style>
 
-<style>
-	:root {
+		&--loading {
+			color: var(--origam-data-table-rows--loading---color, var(--origam-color__text---secondary));
+		}
 
+		&--skeleton {
+			> .origam-data-table-rows__skeleton-cell {
+				padding: var(--origam-data-table-rows--skeleton---cell-padding, 4px 8px);
+			}
+		}
 	}
 </style>

package/dist/src/components/DatePicker/OrigamDatePicker.vue

@@ -106,7 +106,7 @@ import {
   OrigamReverseTranslatePicker,
   OrigamTranslatePicker
 } from "../../components";
-import { useDate, useLocale, useProps, useVModel } from "../../composables";
+import { useDate, useLocale, useProps, useVModel, useStyle } from "../../composables";
 import { CALENDAR_STRATEGY, DATE_MODE } from "../../enums";
 import { wrapInArray } from "../../utils";
 import { computed, ref, shallowRef, StyleValue, useSlots, watch } from "vue";
@@ -116,11 +116,6 @@ const props = defineProps({
   class: { type: [String, Array, Object], required: false },
   style: { type: [String, Array, Object, Boolean, null], required: false, skipCheck: true },
   color: { type: [String, Boolean, null], required: false, skipCheck: true },
-  bgColor: { type: [String, Boolean, null], required: false, skipCheck: true },
-  activeColor: { type: [String, Boolean, null], required: false, skipCheck: true },
-  activeBgColor: { type: [String, Boolean, null], required: false, skipCheck: true },
-  hoverColor: { type: [String, Boolean, null], required: false, skipCheck: true },
-  hoverBgColor: { type: [String, Boolean, null], required: false, skipCheck: true },
   border: { type: [Boolean, Number, String, Array], required: false, skipCheck: true },
   borderTop: { type: [Boolean, Number, String], required: false },
   borderLeft: { type: [Boolean, Number, String], required: false },
@@ -130,7 +125,7 @@ const props = defineProps({
   borderInline: { type: [Boolean, Number, String], required: false },
   borderColor: { type: String, required: false },
   borderStyle: { type: String, required: false },
-  rounded: { type: [Boolean, String, Number, null], required: false, skipCheck: true },
+  rounded: { type: [Boolean, Number, String, null], required: false, skipCheck: true },
   roundedTopRight: { type: [Boolean, Number, String], required: false },
   roundedTopLeft: { type: [Boolean, Number, String], required: false },
   roundedBottomLeft: { type: [Boolean, Number, String], required: false },
@@ -152,6 +147,14 @@ const props = defineProps({
   marginInline: { type: [Boolean, Number, String], required: false },
   landscape: { type: Boolean, required: false },
   hideHeader: { type: Boolean, required: false },
+  bgColor: { type: [String, Boolean, null], required: false, skipCheck: true },
+  side: { type: null, required: false },
+  swipeable: { type: Boolean, required: false },
+  snapPoints: { type: Array, required: false },
+  defaultSnap: { type: [String, Object], required: false },
+  open: { type: Boolean, required: false },
+  disabled: { type: Boolean, required: false },
+  persistent: { type: Boolean, required: false },
   tag: { type: String, required: false },
   height: { type: [Number, String], required: false },
   maxHeight: { type: [Number, String], required: false },
@@ -165,9 +168,10 @@ const props = defineProps({
   bottom: { type: [Number, String], required: false },
   left: { type: [Number, String], required: false },
   right: { type: [Number, String], required: false },
+  active: { type: [Boolean, Object], required: false },
+  activeClass: { type: String, required: false },
+  hover: { type: [Boolean, Object], required: false },
   title: { type: String, required: false, default: "origam.datePicker.title" },
-  active: { type: [String, Array], required: false },
-  disabled: { type: Boolean, required: false },
   disabledMonth: { type: Boolean, required: false },
   disabledYear: { type: Boolean, required: false },
   disabledNext: { type: Boolean, required: false },
@@ -386,8 +390,14 @@ const datePickerClasses = computed(() => {
     props.class
   ];
 });
+const { id, css, load, isLoaded, unload } = useStyle(datePickerStyles);
 defineExpose({
-  filterProps
+  filterProps,
+  css,
+  id,
+  load,
+  unload,
+  isLoaded
 });
 </script>
 

package/dist/src/components/DatePicker/OrigamDatePickerControls.vue

@@ -54,7 +54,7 @@
 
 <script setup>
 import { OrigamBtn, OrigamBtnGroup, OrigamSpacer } from "../../components";
-import { useProps } from "../../composables";
+import { useProps, useStyle } from "../../composables";
 import { DATE_MODE, MDI_ICONS } from "../../enums";
 import { computed, StyleValue } from "vue";
 const props = defineProps({
@@ -110,8 +110,14 @@ const datePickerControlsClasses = computed(() => {
     props.class
   ];
 });
+const { id, css, load, isLoaded, unload } = useStyle(datePickerControlsStyles);
 defineExpose({
-  filterProps
+  filterProps,
+  css,
+  id,
+  load,
+  unload,
+  isLoaded
 });
 </script>
 

package/dist/src/components/DatePicker/OrigamDatePickerHeader.vue

@@ -70,7 +70,7 @@
 
 <script setup>
 import { OrigamAvatar, OrigamIcon, OrigamTransition } from "../../components";
-import { useAdjacent, useDensity, useProps } from "../../composables";
+import { useAdjacent, useDensity, useProps, useStyle } from "../../composables";
 import { computed, StyleValue, toRef, useSlots } from "vue";
 const props = defineProps({
   header: { type: String, required: false },
@@ -79,11 +79,6 @@ const props = defineProps({
   class: { type: [String, Array, Object], required: false },
   style: { type: [String, Array, Object, Boolean, null], required: false, skipCheck: true },
   color: { type: [String, Boolean, null], required: false, skipCheck: true },
-  bgColor: { type: [String, Boolean, null], required: false, skipCheck: true },
-  activeColor: { type: [String, Boolean, null], required: false, skipCheck: true },
-  activeBgColor: { type: [String, Boolean, null], required: false, skipCheck: true },
-  hoverColor: { type: [String, Boolean, null], required: false, skipCheck: true },
-  hoverBgColor: { type: [String, Boolean, null], required: false, skipCheck: true },
   appendAvatar: { type: String, required: false },
   appendIcon: { type: null, required: false },
   prependAvatar: { type: String, required: false },
@@ -118,8 +113,14 @@ const datePickerHeaderClasses = computed(() => {
     props.class
   ];
 });
+const { id, css, load, isLoaded, unload } = useStyle(datePickerHeaderStyles);
 defineExpose({
-  filterProps
+  filterProps,
+  css,
+  id,
+  load,
+  unload,
+  isLoaded
 });
 </script>
 

package/dist/src/components/DatePicker/OrigamDatePickerMonth.vue

@@ -93,7 +93,7 @@
 
 <script setup>
 import { OrigamBtn, OrigamReverseTranslatePicker, OrigamTransition, OrigamTranslatePicker } from "../../components";
-import { useCalendar, useDate, useProps } from "../../composables";
+import { useCalendar, useDate, useProps, useStyle } from "../../composables";
 import { CALENDAR_STRATEGY, DENSITY } from "../../enums";
 import { wrapInArray } from "../../utils";
 import { computed, ref, shallowRef, StyleValue, watch } from "vue";
@@ -108,11 +108,6 @@ const props = defineProps({
   class: { type: [String, Array, Object], required: false },
   style: { type: [String, Array, Object, Boolean, null], required: false, skipCheck: true },
   color: { type: [String, Boolean, null], required: false, skipCheck: true },
-  bgColor: { type: [String, Boolean, null], required: false, skipCheck: true },
-  activeColor: { type: [String, Boolean, null], required: false, skipCheck: true },
-  activeBgColor: { type: [String, Boolean, null], required: false, skipCheck: true },
-  hoverColor: { type: [String, Boolean, null], required: false, skipCheck: true },
-  hoverBgColor: { type: [String, Boolean, null], required: false, skipCheck: true },
   allowedDates: { type: [Array, Function], required: false },
   disabled: { type: Boolean, required: false },
   displayValue: { type: null, required: false },
@@ -250,8 +245,14 @@ const datePickerMonthClasses = computed(() => {
     props.class
   ];
 });
+const { id, css, load, isLoaded, unload } = useStyle(datePickerMonthStyles);
 defineExpose({
-  filterProps
+  filterProps,
+  css,
+  id,
+  load,
+  unload,
+  isLoaded
 });
 </script>