origam 2.3.0 → 2.5.0

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

@@ -67,7 +67,7 @@ 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 },
-  color: { type: [String, Boolean, null], required: false, skipCheck: true },
+  color: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
   padding: { type: [Boolean, Number, String], required: false },
   paddingTop: { type: [Boolean, Number, String], required: false },
   paddingLeft: { type: [Boolean, Number, String], required: false },

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

@@ -65,7 +65,7 @@ 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 },
-  color: { type: [String, Boolean, null], required: false, skipCheck: true },
+  color: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
   padding: { type: [Boolean, Number, String], required: false },
   paddingTop: { type: [Boolean, Number, String], required: false },
   paddingLeft: { type: [Boolean, Number, String], required: false },

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

@@ -1,6 +1,7 @@
 <template>
 	<origam-data-table-column-cell
 			:align="column.align"
+			:aria-sort="column.sortable && !disableSort ? (isSorted(column) ? (sortBy.find((s: IDataTableSortItem) => s.key === column.key)?.order === 'desc' ? 'descending' : 'ascending') : 'none') : undefined"
 			:class="dataTableHeaderCellClasses"
 			:colspan="column.colspan"
 			:fixed="column.fixed"
@@ -82,7 +83,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 }
+  color: { type: [String, Object, Boolean, null], required: false, skipCheck: true }
 });
 const { filterProps } = useProps(props);
 const { toggleSort, sortBy, isSorted } = useSort();

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

@@ -68,7 +68,7 @@ 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 },
-  color: { type: [String, Boolean, null], required: false, skipCheck: true },
+  color: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
   mobileBreakpoint: { type: null, required: false },
   loading: { type: [Boolean, Number, Object], required: false },
   loadingText: { type: String, required: false },

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

@@ -31,7 +31,7 @@ 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 },
-  color: { type: [String, Boolean, null], required: false, skipCheck: true },
+  color: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
   disableSort: { type: Boolean, required: false },
   headerProps: { type: null, required: false },
   sticky: { type: Boolean, required: false },

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

@@ -208,9 +208,9 @@ 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 }
+  color: { type: [String, Object, Boolean, null], required: false, skipCheck: true }
 });
-const emits = defineEmits(["click:clear", "click:prepend", "click:append"]);
+const emits = defineEmits(["click:clear", "click:append", "click:prepend"]);
 const { filterProps } = useProps(props);
 const { t } = useLocale();
 const slots = useSlots();

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

@@ -1,5 +1,6 @@
 <template>
 	<tr
+			:aria-selected="showSelect ? isSelected([item]) : undefined"
 			:class="dataTableRowClasses"
 			:style="dataTableRowStyles"
 			v-bind="$attrs"
@@ -41,6 +42,8 @@
 									v-bind="slotProps(i, column)"
 							>
 								<origam-btn
+										:aria-expanded="isExpanded(item)"
+										:aria-label="isExpanded(item) ? 'Collapse row' : 'Expand row'"
 										:icon="isExpanded(item) ? MDI_ICONS.CHEVRON_UP : MDI_ICONS.CHEVRON_DOWN"
 										:size="SIZES.SMALL"
 										@click="handleBtnClick"
@@ -91,7 +94,8 @@ import {
 } from "../../composables";
 import { MDI_ICONS, SIZES } from "../../enums";
 import { getCurrentInstance, getObjectValueByPath } from "../../utils";
-import { computed, StyleValue, toDisplayString, withModifiers } from "vue";
+import { ORIGAM_DATA_TABLE_SHOW_SELECT_KEY } from "../../consts";
+import { computed, inject, ref, Ref, StyleValue, toDisplayString, withModifiers } from "vue";
 const vm = getCurrentInstance("dataTableRow");
 const props = defineProps({
   item: { type: Object, required: true },
@@ -103,6 +107,7 @@ const props = defineProps({
 });
 const emits = defineEmits(["expand", "select"]);
 const { filterProps } = useProps(props);
+const showSelect = inject(ORIGAM_DATA_TABLE_SHOW_SELECT_KEY, ref(false));
 const { displayClasses, mobile } = useDisplay(props, "origam-data-table-row");
 const { isSelected, toggleSelect, someSelected, allSelected, selectAll } = useSelection();
 const { isExpanded, toggleExpand } = useExpanded();

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

@@ -83,7 +83,7 @@
 
 <script setup>
 import { OrigamDataTableGroupHeaderRow, OrigamDataTableRow, OrigamSkeleton } from "../../components";
-import { useDisplay, useExpanded, useGroupBy, useHeaders, useLoader, useLocale, useProps, useSelection } from "../../composables";
+import { useDisplay, useExpanded, useGroupBy, useHeaders, useLoader, useLocale, usePagination, useProps, useSelection } from "../../composables";
 import { getPrefixedEventHandlers } from "../../utils";
 import { mergeProps, useAttrs } from "vue";
 const attrs = useAttrs();
@@ -99,7 +99,7 @@ const props = defineProps({
   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 },
+  color: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
   mobileBreakpoint: { type: null, required: false }
 });
 const { filterProps } = useProps(props);
@@ -111,6 +111,7 @@ const { expandOnClick, toggleExpand, isExpanded } = useExpanded();
 const { isSelected, toggleSelect } = useSelection();
 const { toggleGroup, isGroupOpen } = useGroupBy();
 const { mobile } = useDisplay(props);
+const { startIndex } = usePagination();
 const slotProps = (item, index) => {
   return {
     index,
@@ -160,7 +161,8 @@ const itemSlotProps = (item, index) => {
         // on every viewport <1280px regardless of what
         // the consumer set on the DataTable.
         mobileBreakpoint: props.mobileBreakpoint,
-        mobile: mobile.value
+        mobile: mobile.value,
+        "aria-rowindex": startIndex.value + index + 2
       },
       getPrefixedEventHandlers(attrs, ":row", () => slotPropsLocal),
       typeof props.rowProps === "function" ? props.rowProps({

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

@@ -115,7 +115,7 @@ 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 },
-  color: { type: [String, Boolean, null], required: false, skipCheck: true },
+  color: { type: [String, Object, 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 },
@@ -147,7 +147,6 @@ 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 },
@@ -171,6 +170,7 @@ const props = defineProps({
   active: { type: [Boolean, Object], required: false },
   activeClass: { type: String, required: false },
   hover: { type: [Boolean, Object], required: false },
+  bgColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
   title: { type: String, required: false, default: "origam.datePicker.title" },
   disabledMonth: { type: Boolean, required: false },
   disabledYear: { type: Boolean, required: false },
@@ -187,17 +187,27 @@ const props = defineProps({
   showWeek: { type: Boolean, required: false },
   transition: { type: Object, required: false },
   reverseTransition: { type: Object, required: false },
-  allowedDates: { type: [Array, Function], required: false },
-  displayValue: { type: null, required: false },
-  date: { type: Array, required: false },
-  month: { type: Number, required: true },
-  max: { type: null, required: false },
+  view: { type: String, required: false },
+  currentDate: { type: [Date, String], required: false },
+  events: { type: Array, required: false },
+  firstDayOfWeek: { type: Number, required: false },
+  timeFormat: { type: String, required: false },
+  locale: { type: String, required: false },
+  selectable: { type: Boolean, required: false },
+  eventColorKey: { type: String, required: false },
+  categoryColors: { type: Object, required: false },
+  weekendHighlight: { type: Boolean, required: false },
+  showWeekNumbers: { type: Boolean, required: false },
+  dayStartHour: { type: Number, required: false },
+  dayEndHour: { type: Number, required: false },
+  slotDuration: { type: Number, required: false },
+  minDate: { type: [Date, String], required: false },
+  maxDate: { type: [Date, String], required: false },
+  disabledDates: { type: [Array, Function], required: false },
   min: { type: null, required: false },
-  showAdjacentMonths: { type: Boolean, required: false },
+  max: { type: null, required: false },
+  month: { type: Number, required: true },
   year: { type: Number, required: true },
-  weekdays: { type: Array, required: false },
-  weeksInMonth: { type: null, required: false, default: CALENDAR_STRATEGY.STATIC },
-  firstDayOfWeek: { type: Number, required: false },
   header: { type: String, required: false, default: "origam.datePicker.header" },
   appendAvatar: { type: String, required: false },
   appendIcon: { type: null, required: false },
@@ -205,7 +215,7 @@ const props = defineProps({
   prependIcon: { type: null, required: false },
   density: { type: null, required: false }
 });
-const emits = defineEmits(["update:modelValue", "update:month", "update:year", "update:viewMode"]);
+const emits = defineEmits(["update:month", "update:year", "update:viewMode", "update:modelValue"]);
 const slots = useSlots();
 const { filterProps } = useProps(props);
 const { t } = useLocale();

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

@@ -78,7 +78,7 @@ 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 },
-  color: { type: [String, Boolean, null], required: false, skipCheck: true },
+  color: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
   appendAvatar: { type: String, required: false },
   appendIcon: { type: null, required: false },
   prependAvatar: { type: String, required: false },

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

@@ -93,7 +93,7 @@
 
 <script setup>
 import { OrigamBtn, OrigamReverseTranslatePicker, OrigamTransition, OrigamTranslatePicker } from "../../components";
-import { useCalendar, useDate, useProps, useStyle } from "../../composables";
+import { useDatePickerCalendar, useDate, useProps, useStyle } from "../../composables";
 import { CALENDAR_STRATEGY, DENSITY } from "../../enums";
 import { wrapInArray } from "../../utils";
 import { computed, ref, shallowRef, StyleValue, watch } from "vue";
@@ -107,23 +107,28 @@ 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 },
-  color: { type: [String, Boolean, null], required: false, skipCheck: true },
-  allowedDates: { type: [Array, Function], required: false },
-  disabled: { type: Boolean, required: false },
-  displayValue: { type: null, required: false },
-  date: { type: Array, required: false },
-  month: { type: Number, required: true },
-  max: { type: null, required: false },
-  min: { type: null, required: false },
-  showAdjacentMonths: { type: Boolean, required: false },
-  year: { type: Number, required: true },
-  weekdays: { type: Array, required: false, default: () => [0, 1, 2, 3, 4, 5, 6] },
-  weeksInMonth: { type: null, required: false, default: CALENDAR_STRATEGY.DYNAMIC },
-  firstDayOfWeek: { type: Number, required: false }
+  color: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
+  view: { type: String, required: false },
+  currentDate: { type: [Date, String], required: false },
+  events: { type: Array, required: false },
+  firstDayOfWeek: { type: Number, required: false },
+  timeFormat: { type: String, required: false },
+  locale: { type: String, required: false },
+  selectable: { type: Boolean, required: false },
+  eventColorKey: { type: String, required: false },
+  categoryColors: { type: Object, required: false },
+  weekendHighlight: { type: Boolean, required: false },
+  showWeekNumbers: { type: Boolean, required: false },
+  dayStartHour: { type: Number, required: false },
+  dayEndHour: { type: Number, required: false },
+  slotDuration: { type: Number, required: false },
+  minDate: { type: [Date, String], required: false },
+  maxDate: { type: [Date, String], required: false },
+  disabledDates: { type: [Array, Function], required: false }
 });
 const { filterProps } = useProps(props);
 const daysRef = ref();
-const { daysInMonth, model, weekNumbers } = useCalendar(props);
+const { daysInMonth, model, weekNumbers } = useDatePickerCalendar(props);
 const adapter = useDate();
 const rangeStart = shallowRef();
 const rangeStop = shallowRef();

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

@@ -29,7 +29,7 @@ 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 },
-  color: { type: [String, Boolean, null], required: false, skipCheck: true },
+  color: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
   height: { type: [Number, String], required: false },
   maxHeight: { type: [Number, String], required: false },
   maxWidth: { type: [Number, String], required: false },

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

@@ -28,7 +28,7 @@ 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 },
-  color: { type: [String, Boolean, null], required: false, skipCheck: true },
+  color: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
   height: { type: [Number, String], required: false },
   maxHeight: { type: [Number, String], required: false },
   maxWidth: { type: [Number, String], required: false },

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

@@ -196,11 +196,6 @@ const props = defineProps({
   closeOnSelect: { type: Boolean, required: false, default: true },
   chipProps: { type: Object, required: false },
   closableChips: { 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 },
-  color: { type: [String, Boolean, null], required: false, skipCheck: true },
-  bgColor: { 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 },
@@ -211,6 +206,10 @@ const props = defineProps({
   type: { type: null, required: false, default: TEXT_FIELD_TYPE.TEXT },
   modelModifiers: { type: [String, Boolean], required: false },
   mask: { type: null, 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 },
+  color: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
   density: { type: null, required: false, default: DENSITY.DEFAULT },
   centerAffix: { type: Boolean, required: false, default: true },
   dirty: { type: Boolean, required: false },
@@ -228,6 +227,7 @@ const props = defineProps({
   loading: { type: [Boolean, Number, Object], required: false },
   loadingText: { type: String, required: false },
   tag: { type: String, required: false },
+  bgColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
   appendInnerAvatar: { type: String, required: false },
   appendInnerIcon: { type: null, required: false, default: MDI_ICONS.CALENDAR_OUTLINE },
   prependInnerAvatar: { type: String, required: false },

package/dist/src/components/Dialog/OrigamDialog.vue

@@ -21,6 +21,7 @@
 			>
 				<origam-card
 						ref="origamCardRef"
+						:aria-labelledby="dialogTitleId"
 						aria-modal="true"
 						role="dialog"
 						v-bind="cardProps"
@@ -44,6 +45,7 @@
 							<origam-btn
 									:icon="MDI_ICONS.CLOSE"
 									:rounded="0"
+									aria-label="Close dialog"
 									bg-color="transparent"
 									@click="handleClose"
 							/>
@@ -68,7 +70,10 @@
 							v-if="slots['header-title']"
 							#header-title
 					>
-						<slot name="header-title"/>
+						<slot
+								name="header-title"
+								v-bind="{titleId: dialogTitleId}"
+						/>
 					</template>
 
 					<template
@@ -121,6 +126,7 @@
 
 <script setup>
 import { computed, mergeProps, nextTick, ref, StyleValue, useSlots, watch } from "vue";
+import { getUid } from "../../utils";
 import { OrigamBtn, OrigamCard, OrigamIcon, OrigamOverlay, OrigamTranslateScale } from "../../components";
 import {
   useProps,
@@ -197,8 +203,8 @@ const props = defineProps({
   borderInline: { type: [Boolean, Number, String], required: false },
   borderColor: { type: String, required: false },
   borderStyle: { type: String, required: false },
-  color: { type: [String, Boolean, null], required: false, skipCheck: true },
-  bgColor: { type: [String, Boolean, null], required: false, skipCheck: true },
+  color: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
+  bgColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
   density: { type: null, required: false },
   elevation: { type: [Number, String], required: false },
   loading: { type: [Boolean, Number, Object], required: false },
@@ -242,11 +248,13 @@ const props = defineProps({
   statusIconPosition: { type: null, required: false },
   icon: { type: null, required: false }
 });
-const emits = defineEmits(["update:modelValue", "isRead", "click:outside"]);
+const emits = defineEmits(["isRead", "update:modelValue", "click:outside"]);
 const { filterProps } = useProps(props);
 const isActive = useVModel(props, "modelValue");
 const { scopeId } = useScopeId();
 const slots = useSlots();
+const uid = getUid();
+const dialogTitleId = computed(() => `origam-dialog-title-${uid}`);
 const origamOverlayRef = ref();
 const origamCardRef = ref();
 const handleFocusin = (e) => {

package/dist/src/components/Dialog/OrigamDialogConfirmation.vue

@@ -187,8 +187,8 @@ const props = defineProps({
   borderInline: { type: [Boolean, Number, String], required: false },
   borderColor: { type: String, required: false },
   borderStyle: { type: String, required: false },
-  color: { type: [String, Boolean, null], required: false, skipCheck: true },
-  bgColor: { type: [String, Boolean, null], required: false, skipCheck: true },
+  color: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
+  bgColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
   density: { type: null, required: false },
   elevation: { type: [Number, String], required: false },
   loading: { type: [Boolean, Number, Object], required: false },

package/dist/src/components/Divider/OrigamDivider.vue

@@ -25,8 +25,8 @@ 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 },
-  color: { type: [String, Boolean, null], required: false, skipCheck: true },
-  bgColor: { type: [String, Boolean, null], required: false, skipCheck: true },
+  color: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
+  bgColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
   margin: { type: [Boolean, Number, String], required: false },
   marginTop: { type: [Boolean, Number, String], required: false },
   marginLeft: { type: [Boolean, Number, String], required: false },

package/dist/src/components/Drawer/OrigamDrawer.vue

@@ -17,6 +17,7 @@
 					:is="tag"
 					v-if="isActive"
 					:ref="rootEl"
+					:aria-label="props.name || 'Navigation'"
 					:class="drawerClasses"
 					:style="drawerStyles"
 					v-bind="{...scopeId, ...$attrs}"
@@ -132,8 +133,8 @@ const props = defineProps({
   roundedTopLeft: { type: [Boolean, Number, String], required: false },
   roundedBottomLeft: { type: [Boolean, Number, String], required: false },
   roundedBottomRight: { type: [Boolean, Number, String], required: false },
-  color: { type: [String, Boolean, null], required: false, skipCheck: true },
-  bgColor: { type: [String, Boolean, null], required: false, skipCheck: true },
+  color: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
+  bgColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
   density: { type: null, required: false },
   padding: { type: [Boolean, Number, String], required: false },
   paddingTop: { type: [Boolean, Number, String], required: false },
@@ -465,6 +466,13 @@ defineExpose({
 	// keyframe transforms below are stomped → drawer never animates
 	// visibly.
 
+	@media (prefers-reduced-motion: reduce) {
+		.origam-transition--drawer-enter-active,
+		.origam-transition--drawer-leave-active {
+			transition-duration: 0.01ms !important;
+		}
+	}
+
 	.origam-transition--drawer {
 		&-enter-active,
 		&-leave-active {