origam 0.3.10 → 2.3.0

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>
 

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

@@ -18,7 +18,7 @@
 
 <script setup>
 import { OrigamBtn } from "../../components";
-import { useDate, useProps, useVModel } from "../../composables";
+import { useDate, useProps, useVModel, useStyle } from "../../composables";
 import { convertToUnit, createRange, int } from "../../utils";
 import { computed, StyleValue, watchEffect } from "vue";
 const props = defineProps({
@@ -30,11 +30,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 },
   height: { type: [Number, String], required: false },
   maxHeight: { type: [Number, String], required: false },
   maxWidth: { type: [Number, String], required: false },
@@ -99,8 +94,14 @@ const datePickerMonthsClasses = computed(() => {
     props.class
   ];
 });
+const { id, css, load, isLoaded, unload } = useStyle(datePickerMonthsStyles);
 defineExpose({
-  filterProps
+  filterProps,
+  css,
+  id,
+  load,
+  unload,
+  isLoaded
 });
 </script>
 

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

@@ -18,7 +18,7 @@
 
 <script setup>
 import { OrigamBtn } from "../../components";
-import { useDate, useProps, useVModel } from "../../composables";
+import { useDate, useProps, useVModel, useStyle } from "../../composables";
 import { convertToUnit, createRange, int, templateRef } from "../../utils";
 import { computed, nextTick, onMounted, StyleValue, watchEffect } from "vue";
 const props = defineProps({
@@ -29,11 +29,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 },
   height: { type: [Number, String], required: false },
   maxHeight: { type: [Number, String], required: false },
   maxWidth: { type: [Number, String], required: false },
@@ -108,8 +103,14 @@ const datePickerYearsClasses = computed(() => {
     props.class
   ];
 });
+const { id, css, load, isLoaded, unload } = useStyle(datePickerYearsStyles);
 defineExpose({
-  filterProps
+  filterProps,
+  css,
+  id,
+  load,
+  unload,
+  isLoaded
 });
 </script>
 

package/dist/src/components/DatePickerField/OrigamDatePickerField.vue

@@ -96,8 +96,8 @@
 							:key="index"
 					>
 						<div
+								:class="datePickerFieldSelectionChipsClasses"
 								:style="[textColorStyles]"
-								class="origam-date-picker-field__selection-chips"
 						>
 							<template v-if="isMultiple">
 								<slot
@@ -180,7 +180,7 @@ import {
   OrigamTextField,
   OrigamTranslateScale
 } from "../../components";
-import { useDate, useLocale, useProps, useTextColor, useVModel } from "../../composables";
+import { useDate, useLocale, useProps, useTextColor, useVModel, useStyle } from "../../composables";
 import { ORIGAM_FORM_KEY } from "../../consts";
 import { BLOCK, DENSITY, DIRECTION, KEYBOARD_VALUES, MDI_ICONS, TEXT_FIELD_TYPE } from "../../enums";
 import { forwardRefs, isEmpty, matchesSelector, wrapInArray } from "../../utils";
@@ -201,10 +201,6 @@ const props = defineProps({
   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 },
   autofocus: { type: Boolean, required: false },
   counter: { type: [Boolean, Number, String], required: false },
   counterValue: { type: [Number, Function], required: false },
@@ -214,13 +210,14 @@ const props = defineProps({
   role: { type: String, required: false },
   type: { type: null, required: false, default: TEXT_FIELD_TYPE.TEXT },
   modelModifiers: { type: [String, Boolean], required: false },
+  mask: { type: null, required: false },
   density: { type: null, required: false, default: DENSITY.DEFAULT },
-  active: { type: Boolean, required: false },
   centerAffix: { type: Boolean, required: false, default: true },
   dirty: { type: Boolean, required: false },
   disabled: { type: Boolean, required: false },
-  error: { type: Boolean, required: false },
+  error: { type: [String, Boolean], required: false },
   flat: { type: Boolean, required: false },
+  inline: { type: Boolean, required: false },
   label: { type: String, required: false },
   prefix: { type: String, required: false },
   suffix: { type: String, required: false },
@@ -228,7 +225,7 @@ const props = defineProps({
   reverse: { type: Boolean, required: false },
   singleLine: { type: Boolean, required: false },
   required: { type: Boolean, 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 },
   appendInnerAvatar: { type: String, required: false },
@@ -238,18 +235,9 @@ const props = defineProps({
   clearIcon: { type: null, required: false },
   clearable: { type: Boolean, required: false },
   focused: { type: Boolean, required: false },
-  hideDetails: { type: [Boolean, String], required: false },
-  hideSpinButtons: { type: Boolean, required: false },
-  hint: { type: String, required: false },
-  persistentHint: { type: Boolean, required: false },
-  messages: { type: [Array, String], required: false },
-  padding: { type: [Boolean, Number, String], required: false },
-  paddingTop: { type: [Boolean, Number, String], required: false },
-  paddingLeft: { type: [Boolean, Number, String], required: false },
-  paddingBottom: { type: [Boolean, Number, String], required: false },
-  paddingRight: { type: [Boolean, Number, String], required: false },
-  paddingBlock: { type: [Boolean, Number, String], required: false },
-  paddingInline: { type: [Boolean, Number, String], required: false },
+  text: { type: String, required: false },
+  floating: { type: Boolean, required: false },
+  name: { type: String, required: false },
   margin: { type: [Boolean, Number, String], required: false },
   marginTop: { type: [Boolean, Number, String], required: false },
   marginLeft: { type: [Boolean, Number, String], required: false },
@@ -257,11 +245,13 @@ const props = defineProps({
   marginRight: { type: [Boolean, Number, String], required: false },
   marginBlock: { type: [Boolean, Number, String], required: false },
   marginInline: { type: [Boolean, Number, String], required: false },
-  rounded: { type: [Boolean, String, Number, null], required: false, skipCheck: true, default: true },
-  roundedTopRight: { type: [Boolean, Number, String], required: false },
-  roundedTopLeft: { type: [Boolean, Number, String], required: false },
-  roundedBottomLeft: { type: [Boolean, Number, String], required: false },
-  roundedBottomRight: { type: [Boolean, Number, String], required: false },
+  padding: { type: [Boolean, Number, String], required: false },
+  paddingTop: { type: [Boolean, Number, String], required: false },
+  paddingLeft: { type: [Boolean, Number, String], required: false },
+  paddingBottom: { type: [Boolean, Number, String], required: false },
+  paddingRight: { type: [Boolean, Number, String], required: false },
+  paddingBlock: { type: [Boolean, Number, String], required: false },
+  paddingInline: { type: [Boolean, Number, String], required: false },
   border: { type: [Boolean, Number, String, Array], required: false, skipCheck: true, default: true },
   borderTop: { type: [Boolean, Number, String], required: false },
   borderLeft: { type: [Boolean, Number, String], required: false },
@@ -271,7 +261,21 @@ const props = defineProps({
   borderInline: { type: [Boolean, Number, String], required: false },
   borderColor: { type: String, required: false },
   borderStyle: { type: String, required: false },
+  rounded: { type: [Boolean, Number, String, null], required: false, skipCheck: true, default: true },
+  roundedTopRight: { type: [Boolean, Number, String], required: false },
+  roundedTopLeft: { type: [Boolean, Number, String], required: false },
+  roundedBottomLeft: { type: [Boolean, Number, String], required: false },
+  roundedBottomRight: { type: [Boolean, Number, String], required: false },
+  active: { type: [Boolean, Object], required: false },
+  activeClass: { type: String, required: false },
+  variant: { type: null, required: false },
   elevation: { type: [Number, String], required: false },
+  size: { type: null, required: false },
+  hideDetails: { type: [Boolean, String], required: false },
+  hideSpinButtons: { type: Boolean, required: false },
+  hint: { type: String, required: false },
+  persistentHint: { type: Boolean, required: false },
+  messages: { type: [Array, String], required: false },
   height: { type: [Number, String], required: false },
   maxHeight: { type: [Number, String], required: false },
   maxWidth: { type: [Number, String], required: false },
@@ -281,7 +285,6 @@ const props = defineProps({
   direction: { type: null, required: false, default: DIRECTION.HORIZONTAL },
   errorMessages: { type: [Array, String], required: false },
   maxErrors: { type: [Number, String], required: false },
-  name: { type: String, required: false },
   readonly: { type: Boolean, required: false },
   rules: { type: Array, required: false },
   modelValue: { type: null, required: false, default: null },
@@ -321,7 +324,7 @@ const handleRemoveDate = (date) => {
   value.splice(index, 1);
   model.value = value;
 };
-const { textColorStyles } = useTextColor(toRef(props, "color"));
+const { textColorClasses, textColorStyles } = useTextColor(toRef(props, "color"));
 const menuState = useVModel(props, "menu");
 const menu = computed({
   get: () => menuState.value,
@@ -426,7 +429,18 @@ const textFieldProps = computed(() => {
   return origamTextFieldRef.value?.filterProps(props, ["class", "id", "style", "dirty", "modelValue", "placeholder", "validationValue", "focused"]);
 });
 const datePickerProps = computed(() => {
-  return origamDatePickerRef.value?.filterProps(props, ["class", "id", "style", "modelValue"]);
+  return origamDatePickerRef.value?.filterProps(props, [
+    "class",
+    "id",
+    "style",
+    "modelValue",
+    "rounded",
+    "border",
+    "borderColor",
+    "borderStyle",
+    "density",
+    "direction"
+  ]);
 });
 const isDirty = computed(() => {
   return model.value.length > 0;
@@ -451,6 +465,12 @@ const datePickerFieldStyles = computed(() => {
     props.style
   ];
 });
+const datePickerFieldSelectionChipsClasses = computed(() => {
+  return [
+    "origam-date-picker-field__selection-chips",
+    textColorClasses.value
+  ];
+});
 const datePickerFieldClasses = computed(() => {
   return [
     "origam-date-picker-field",
@@ -461,9 +481,15 @@ const datePickerFieldClasses = computed(() => {
     props.class
   ];
 });
+const { id, css, load, isLoaded, unload } = useStyle(datePickerFieldStyles);
 defineExpose(forwardRefs({
   filterProps,
   isFocused,
-  menu
+  menu,
+  css,
+  id,
+  load,
+  unload,
+  isLoaded
 }, origamTextFieldRef));
 </script>

package/dist/src/components/DefaultsProvider/OrigamDefaultsProvider.vue

@@ -0,0 +1,30 @@
+<template>
+	<slot name="default"/>
+</template>
+
+<script setup>
+import { computed } from "vue";
+import { provideDefaults, useProps } from "../../composables";
+const props = defineProps({
+  defaults: { type: Object, required: false },
+  disabled: { type: Boolean, required: false },
+  reset: { type: [String, Number], required: false },
+  root: { type: [String, Number], required: false },
+  scoped: { type: Boolean, required: false },
+  id: { type: String, required: false },
+  class: { type: [String, Array, Object], required: false },
+  style: { type: [String, Array, Object, Boolean, null], required: false, skipCheck: true }
+});
+defineSlots();
+provideDefaults(
+  computed(() => props.defaults ?? {}),
+  {
+    scoped: props.scoped,
+    reset: props.reset,
+    root: props.root,
+    disabled: props.disabled
+  }
+);
+const { filterProps } = useProps(props);
+defineExpose({ filterProps });
+</script>

package/dist/src/components/DefaultsProvider/index.cjs

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "OrigamDefaultsProvider", {
+  enumerable: true,
+  get: function () {
+    return _OrigamDefaultsProvider.default;
+  }
+});
+var _OrigamDefaultsProvider = _interopRequireDefault(require("./OrigamDefaultsProvider.vue"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }

package/dist/src/components/DefaultsProvider/index.d.ts

@@ -0,0 +1 @@
+export { default as OrigamDefaultsProvider } from './OrigamDefaultsProvider.vue';

package/dist/src/components/DefaultsProvider/index.js

@@ -0,0 +1 @@
+export { default as OrigamDefaultsProvider } from "./OrigamDefaultsProvider.vue";