origam 2.3.0 → 2.5.0

package/dist/src/components/Messages/OrigamMessages.vue

@@ -8,7 +8,7 @@
 				:class="messagesClasses"
 				:style="messagesStyles"
 				aria-live="polite"
-				role="alert"
+				role="status"
 		>
 			<template
 					v-for="(message, index) in messages"
@@ -56,7 +56,7 @@ const _props = defineProps({
   tag: { type: String, required: false, default: "div" },
   transition: { type: [Boolean, String, Object], required: false, default: () => ({ component: OrigamSlideY }) },
   disabled: { type: Boolean, required: false },
-  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 },

package/dist/src/components/NumberField/OrigamNumberField.vue

@@ -274,11 +274,6 @@ const props = defineProps({
   split: { type: Boolean, required: false, default: false },
   hideControls: { type: Boolean, required: false },
   compact: { type: Boolean, required: false, default: 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 },
-  density: { type: null, required: false },
   centerAffix: { type: Boolean, required: false, default: true },
   dirty: { type: Boolean, required: false },
   disabled: { type: Boolean, required: false },
@@ -292,10 +287,14 @@ const props = defineProps({
   reverse: { type: Boolean, required: false },
   singleLine: { type: Boolean, required: false },
   required: { 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 },
   loading: { type: [Boolean, Number, Object], required: false },
   loadingText: { type: String, required: false },
   tag: { type: String, required: false },
-  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 },
   appendInnerAvatar: { type: String, required: false },
   appendInnerIcon: { type: null, required: false },
   prependInnerAvatar: { type: String, required: false },
@@ -303,6 +302,7 @@ const props = defineProps({
   clearIcon: { type: null, required: false },
   clearable: { type: Boolean, required: false },
   focused: { type: Boolean, required: false },
+  density: { type: null, required: false },
   text: { type: String, required: false },
   floating: { type: Boolean, required: false },
   name: { type: String, required: false },

package/dist/src/components/NumberFormat/OrigamNumberFormat.vue

@@ -0,0 +1,97 @@
+<template>
+	<component
+			:is="tag"
+			class="origam-number-format"
+			:class="rootClasses"
+			:style="rootStyles"
+			:aria-label="ariaLabel"
+			data-cy="origam-number-format"
+	>
+		<slot
+				:formatted="formatted"
+				:parts="parts"
+				:value="numericValue"
+		>{{ formatted }}</slot>
+	</component>
+</template>
+
+<script setup>
+import {
+  computed
+} from "vue";
+import { useNumberFormat } from "../../composables";
+const props = defineProps({
+  value: { type: [Number, String], required: true },
+  format: { type: String, required: false, default: "decimal" },
+  locale: { type: [String, Array], required: false, default: "auto" },
+  currency: { type: String, required: false, default: void 0 },
+  currencyDisplay: { type: String, required: false, default: "symbol" },
+  unit: { type: String, required: false, default: void 0 },
+  unitDisplay: { type: String, required: false, default: "short" },
+  notation: { type: String, required: false, default: void 0 },
+  compactDisplay: { type: String, required: false, default: "short" },
+  minimumFractionDigits: { type: Number, required: false, default: void 0 },
+  maximumFractionDigits: { type: Number, required: false, default: void 0 },
+  minimumSignificantDigits: { type: Number, required: false, default: void 0 },
+  maximumSignificantDigits: { type: Number, required: false, default: void 0 },
+  useGrouping: { type: [Boolean, String], required: false, default: true },
+  signDisplay: { type: String, required: false, default: "auto" },
+  id: { type: String, required: false },
+  class: { type: [String, Array, Object], required: false },
+  style: { type: [String, Array, Object, Boolean, null], required: false, skipCheck: true },
+  tag: { type: String, required: false, default: "span" }
+});
+const resolvedOptions = computed(() => ({
+  format: props.format,
+  locale: props.locale,
+  currency: props.currency,
+  currencyDisplay: props.currencyDisplay,
+  unit: props.unit,
+  unitDisplay: props.unitDisplay,
+  notation: props.notation,
+  compactDisplay: props.compactDisplay,
+  minimumFractionDigits: props.minimumFractionDigits,
+  maximumFractionDigits: props.maximumFractionDigits,
+  minimumSignificantDigits: props.minimumSignificantDigits,
+  maximumSignificantDigits: props.maximumSignificantDigits,
+  useGrouping: props.useGrouping,
+  signDisplay: props.signDisplay
+}));
+const { format, formatToParts } = useNumberFormat(resolvedOptions);
+const numericValue = computed(() => {
+  if (typeof props.value === "number") return props.value;
+  const parsed = Number(props.value);
+  return Number.isFinite(parsed) ? parsed : 0;
+});
+const formatted = computed(() => format(props.value));
+const parts = computed(() => formatToParts(props.value));
+const ariaLabel = computed(() => {
+  const useCompact = props.format === "compact" || props.notation === "compact";
+  if (!useCompact) return void 0;
+  try {
+    const longIntl = new Intl.NumberFormat(
+      props.locale === "auto" || !props.locale ? typeof navigator !== "undefined" ? navigator.language : "en-US" : props.locale,
+      { notation: "compact", compactDisplay: "long" }
+    );
+    return longIntl.format(numericValue.value);
+  } catch {
+    return void 0;
+  }
+});
+const rootClasses = computed(() => [
+  `origam-number-format--${props.format}`,
+  props.class
+]);
+const rootStyles = computed(() => [props.style]);
+defineExpose({
+  formatted,
+  parts,
+  value: numericValue
+});
+</script>
+
+<style lang="scss" scoped>
+	.origam-number-format {
+		font-variant-numeric: tabular-nums;
+	}
+</style>

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

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

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

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

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

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

package/dist/src/components/OtpInputField/OrigamOtpInputField.vue

@@ -144,17 +144,6 @@ const props = defineProps({
   persistentPlaceholder: { type: Boolean, required: false },
   role: { type: String, required: false },
   type: { type: null, required: false, default: OTP_INPUT_FIELD_TYPE.NUMBER },
-  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 },
-  density: { type: null, required: false },
-  height: { type: [Number, String], required: false },
-  maxHeight: { type: [Number, String], required: false },
-  maxWidth: { type: [Number, String], required: false },
-  minHeight: { type: [Number, String], required: false },
-  minWidth: { type: [Number, String], required: false },
-  width: { type: [Number, String], required: false },
   centerAffix: { type: Boolean, required: false },
   dirty: { type: Boolean, required: false },
   disabled: { type: Boolean, required: false },
@@ -168,10 +157,14 @@ const props = defineProps({
   reverse: { type: Boolean, required: false },
   singleLine: { type: Boolean, required: false },
   required: { 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 },
   loading: { type: [Boolean, Number, Object], required: false },
   loadingText: { type: String, required: false },
   tag: { type: String, required: false },
-  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 },
   appendInnerAvatar: { type: String, required: false },
   appendInnerIcon: { type: null, required: false },
   prependInnerAvatar: { type: String, required: false },
@@ -179,6 +172,7 @@ const props = defineProps({
   clearIcon: { type: null, required: false },
   clearable: { type: Boolean, required: false },
   focused: { type: Boolean, required: false },
+  density: { type: null, required: false },
   text: { type: String, required: false },
   floating: { type: Boolean, required: false },
   name: { type: String, required: false },
@@ -220,6 +214,12 @@ const props = defineProps({
   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 },
+  minHeight: { type: [Number, String], required: false },
+  minWidth: { type: [Number, String], required: false },
+  width: { type: [Number, String], required: false },
   direction: { type: null, required: false },
   errorMessages: { type: [Array, String], required: false },
   maxErrors: { type: [Number, String], required: false },

package/dist/src/components/Overlay/OrigamOverlay.vue

@@ -114,7 +114,7 @@ const props = defineProps({
   transition: { type: [Boolean, String, Object], required: false, default: () => ({ component: OrigamFade }) },
   scrim: { type: [Boolean, String], required: false, default: true }
 });
-const emits = defineEmits(["click:outside", "update:modelValue", "afterEnter", "afterLeave", "keydown"]);
+const emits = defineEmits(["afterEnter", "afterLeave", "keydown", "update:modelValue", "click:outside"]);
 const { filterProps } = useProps(props);
 const model = useVModel(props, "modelValue");
 const isActive = computed({

package/dist/src/components/Overlay/OrigamOverlayScrim.vue

@@ -4,6 +4,7 @@
 				v-if="active"
 				:class="scrimClasses"
 				:style="scrimStyles"
+				aria-hidden="true"
 				v-bind="$attrs"
 				@click="handleClick"
 				@mouseenter="handleMouseenter"
@@ -30,7 +31,7 @@ const props = defineProps({
   disabled: { type: Boolean, required: false },
   scrim: { type: [Boolean, String], required: false }
 });
-const emits = defineEmits(["click", "mouseenter", "mouseleave"]);
+const emits = defineEmits(["mouseenter", "mouseleave", "click"]);
 const { filterProps } = useProps(props);
 const { backgroundColorClasses, backgroundColorStyles } = useBackgroundColor(computed(() => {
   return typeof props.scrim === "string" ? props.scrim : null;

package/dist/src/components/Pagination/OrigamPagination.vue

@@ -211,8 +211,8 @@ const props = defineProps({
   class: { type: [String, Array, Object], required: false },
   style: { type: [String, Array, Object, Boolean, null], required: false, skipCheck: true },
   tag: { type: String, required: false, default: "div" },
-  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 },
   border: { type: [Boolean, Number, String, Array], required: false, skipCheck: true },
   borderTop: { type: [Boolean, Number, String], required: false },
   borderLeft: { type: [Boolean, Number, String], required: false },
@@ -240,13 +240,7 @@ const props = defineProps({
   size: { type: null, required: false },
   density: { type: null, required: false }
 });
-const emits = defineEmits([
-  "update:modelValue",
-  "first",
-  "next",
-  "prev",
-  "last"
-]);
+const emits = defineEmits(["first", "prev", "next", "last", "update:modelValue"]);
 const { filterProps } = useProps(props);
 const { t } = useLocale();
 const page = useVModel(props, "modelValue", props.start);
@@ -378,7 +372,7 @@ const items = computed(() => {
           // behaviour the user expects from a uniform row
           // of nav buttons.
           active: isActive,
-          "aria-current": isActive,
+          "aria-current": isActive ? "page" : void 0,
           "aria-label": t(isActive ? props.currentPageAriaLabel : props.pageAriaLabel, item),
           onClick: (e) => setValue(e, item)
         }

package/dist/src/components/Parallax/OrigamParallax.vue

@@ -55,8 +55,8 @@ const props = defineProps({
   class: { type: [String, Array, Object], required: false },
   style: { type: [String, Array, Object, Boolean, null], required: false, skipCheck: true },
   tag: { type: String, required: false, default: "div" },
-  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 },
   padding: { type: [Boolean, Number, String], required: false },
   paddingTop: { type: [Boolean, Number, String], required: false },
   paddingLeft: { type: [Boolean, Number, String], required: false },
@@ -92,8 +92,36 @@ const props = defineProps({
   minHeight: { type: [Number, String], required: false },
   minWidth: { type: [Number, String], required: false },
   width: { type: [Number, String], required: false },
-  audio: { type: String, required: false },
-  playAudio: { type: Boolean, required: false }
+  variant: { type: null, required: false },
+  coverPosition: { type: null, required: false },
+  src: { type: [String, Object, Array], required: true },
+  tracks: { type: Array, required: false },
+  title: { type: String, required: false },
+  artist: { type: String, required: false },
+  album: { type: String, required: false },
+  cover: { type: [String, Object], required: false },
+  waveform: { type: [Boolean, String], required: false },
+  waveformColor: { type: String, required: false },
+  autoplay: { type: Boolean, required: false },
+  muted: { type: Boolean, required: false },
+  loop: { type: Boolean, required: false },
+  loopMode: { type: null, required: false },
+  shuffle: { type: Boolean, required: false },
+  playlist: { type: Array, required: false },
+  currentTrackIndex: { type: Number, required: false },
+  preload: { type: String, required: false },
+  crossorigin: { type: String, required: false },
+  controls: { type: String, required: false },
+  playbackRates: { type: Array, required: false },
+  playbackRate: { type: Number, required: false },
+  allowRemotePlayback: { type: Boolean, required: false },
+  downloadable: { type: Boolean, required: false },
+  downloadFilename: { type: String, required: false },
+  position: { type: null, required: false },
+  top: { type: [Number, String], required: false },
+  bottom: { type: [Number, String], required: false },
+  left: { type: [Number, String], required: false },
+  right: { type: [Number, String], required: false }
 });
 const emit = defineEmits(["enter", "leave", "scroll-progress"]);
 const { filterProps } = useProps(props);

package/dist/src/components/PasswordField/OrigamPasswordField.vue

@@ -355,11 +355,6 @@ const _props = defineProps({
   requirementRules: { type: Array, required: false },
   requirementsLayout: { type: String, required: false },
   minimal: { 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 },
-  density: { type: null, required: false, default: DENSITY.DEFAULT },
   autofocus: { type: Boolean, required: false },
   counter: { type: [Boolean, Number, String], required: false },
   counterValue: { type: [Number, Function], required: false },
@@ -370,6 +365,11 @@ const _props = defineProps({
   type: { type: null, required: false },
   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 },
   disabled: { type: Boolean, required: false },
@@ -386,7 +386,7 @@ const _props = defineProps({
   loading: { type: [Boolean, Number, Object], required: false },
   loadingText: { type: String, required: false },
   tag: { type: String, required: false },
-  bgColor: { type: [String, Boolean, null], required: false, skipCheck: true },
+  bgColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
   appendInnerAvatar: { type: String, required: false },
   appendInnerIcon: { type: null, required: false },
   prependInnerAvatar: { type: String, required: false },

package/dist/src/components/Picker/OrigamPicker.vue

@@ -50,11 +50,6 @@ import { useBackgroundColor, useProps, useStyle } from "../../composables";
 const props = defineProps({
   landscape: { type: Boolean, required: false },
   hideHeader: { 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 },
   side: { type: null, required: false },
   swipeable: { type: Boolean, required: false },
   snapPoints: { type: Array, required: false },
@@ -63,6 +58,9 @@ const props = defineProps({
   disabled: { type: Boolean, required: false },
   persistent: { type: Boolean, required: false },
   tag: { type: String, 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 },
   padding: { type: [Boolean, Number, String], required: false },
   paddingTop: { type: [Boolean, Number, String], required: false },
   paddingLeft: { type: [Boolean, Number, String], required: false },
@@ -77,6 +75,7 @@ const props = defineProps({
   marginRight: { type: [Boolean, Number, String], required: false },
   marginBlock: { type: [Boolean, Number, String], required: false },
   marginInline: { type: [Boolean, Number, String], required: false },
+  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 },
@@ -107,6 +106,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 }
 });
 const slots = useSlots();

package/dist/src/components/Picker/OrigamPickerTitle.vue

@@ -19,8 +19,8 @@ const props = defineProps({
   class: { type: [String, Array, Object], required: false },
   style: { type: [String, Array, Object, Boolean, null], required: false, skipCheck: true },
   tag: { type: String, required: false, default: "div" },
-  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 }
 });
 const { filterProps } = useProps(props);
 const { colorClasses, colorStyles } = useBothColor(toRef(props, "bgColor"), toRef(props, "color"));

package/dist/src/components/Progress/OrigamProgress.vue

@@ -2,7 +2,9 @@
 	<component
 			:is="progressComponent"
 			ref="origamProgressRef"
+			:aria-busy="props.indeterminate ? true : undefined"
 			:aria-hidden="!active"
+			:aria-label="props.label ?? 'Loading'"
 			:aria-valuemax="max"
 			:aria-valuenow="indeterminate ? undefined : normalizedValue"
 			:class="progressClasses"
@@ -47,7 +49,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/Progress/OrigamProgressCircular.vue

@@ -74,7 +74,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 },
@@ -281,4 +281,11 @@ defineExpose({
 			transform: rotate(270deg);
 		}
 	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.origam-progress--circular.origam-progress--indeterminate > svg,
+		.origam-progress--circular.origam-progress--indeterminate .origam-progress__overlay {
+			animation: none;
+		}
+	}
 </style>

package/dist/src/components/Progress/OrigamProgressLinear.vue

@@ -79,7 +79,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 },
@@ -357,6 +357,18 @@ defineExpose({
 					animation-play-state: running;
 				}
 			}
+
+			@media (prefers-reduced-motion: reduce) {
+				&#{$this}--indeterminate #{$this}__bar {
+					animation: none;
+					left: 0;
+					width: 50%;
+				}
+
+				#{$this}__stream {
+					animation: none;
+				}
+			}
 		}
 	}
 </style>