origam 2.5.0 → 2.6.1

package/dist/src/components/List/OrigamListSubheader.vue

@@ -1,6 +1,7 @@
 <template>
 	<component
 			:is="tag"
+			v-contrast
 			:class="listSubheaderClasses"
 			:style="listSubheaderStyles"
 	>
@@ -18,7 +19,7 @@
 	</component>
 </template>
 
-<script setup>
+<script lang="ts" setup>
 import { computed, StyleValue, toRef, useSlots } from "vue";
 import {
   useBorder,
@@ -27,8 +28,10 @@ import {
   usePadding,
   useProps,
   useRounded,
-  useStyle
+  useStyle,
+  useTypography
 } from "../../composables";
+import { vContrast } from "../../directives";
 const props = defineProps({
   inset: { type: Boolean, required: false },
   sticky: { type: Boolean, required: false },
@@ -66,7 +69,12 @@ const props = defineProps({
   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 }
+  roundedBottomRight: { type: [Boolean, Number, String], required: false },
+  fontFamily: { type: String, required: false },
+  fontSize: { type: String, required: false },
+  fontWeight: { type: String, required: false },
+  lineHeight: { type: String, required: false },
+  letterSpacing: { type: String, required: false }
 });
 const { filterProps } = useProps(props);
 const { colorClasses, colorStyles } = useBothColor(toRef(props, "bgColor"), toRef(props, "color"));
@@ -74,6 +82,7 @@ const { roundedClasses, roundedStyles } = useRounded(props);
 const { borderClasses, borderStyles } = useBorder(props);
 const { paddingClasses, paddingStyles } = usePadding(props);
 const { marginClasses, marginStyles } = useMargin(props);
+const { typographyStyles } = useTypography(props, "list-subheader");
 const slots = useSlots();
 const hasText = computed(() => {
   return slots.default || props.title;
@@ -85,6 +94,7 @@ const listSubheaderStyles = computed(() => {
     borderStyles.value,
     paddingStyles.value,
     marginStyles.value,
+    typographyStyles.value,
     props.style
   ];
 });

package/dist/src/components/Loader/OrigamLoader.vue

@@ -24,7 +24,7 @@
 	</component>
 </template>
 
-<script setup>
+<script lang="ts" setup>
 import { computed, StyleValue } from "vue";
 import { OrigamProgress } from "../../components";
 import { useProps, useStyle } from "../../composables";

package/dist/src/components/Main/OrigamMain.vue

@@ -13,7 +13,7 @@
 	</component>
 </template>
 
-<script setup>
+<script lang="ts" setup>
 import { computed, StyleValue, toRef } from "vue";
 import {
   useBorder,

package/dist/src/components/Masonry/OrigamMasonry.vue

@@ -12,7 +12,7 @@
 		<template v-else>
 			<div
 					v-for="(child, idx) in childrenVNodes"
-					:key="(child as any)?.key ?? idx"
+					:key="child?.key ?? idx"
 					:ref="(el) => bindItemRef(idx, el)"
 					class="origam-masonry__item"
 					role="listitem"
@@ -26,7 +26,7 @@
 	</component>
 </template>
 
-<script setup>
+<script lang="ts" setup>
 import {
   computed,
   onMounted,

package/dist/src/components/Media/OrigamMediaController.vue

@@ -160,7 +160,7 @@
 	</div>
 </template>
 
-<script setup>
+<script lang="ts" setup>
 import { computed, ref, useSlots, watch } from "vue";
 import { OrigamBtn } from "../Btn";
 import { OrigamMenu } from "../Menu";

package/dist/src/components/Media/OrigamMediaScrubber.vue

@@ -57,7 +57,7 @@
 	</div>
 </template>
 
-<script setup>
+<script lang="ts" setup>
 import {
   computed,
   ref,
@@ -78,8 +78,9 @@ const props = defineProps({
   showThumbOnHoverOnly: { type: Boolean, required: false, default: false },
   showHoverTooltip: { type: Boolean, required: false, default: false },
   formatHoverTooltip: { type: Function, required: false, default: (value) => String(value) },
-  ariaLabel: { type: String, required: true },
+  ariaLabel: { type: String, required: false },
   ariaValueText: { type: String, required: false, default: void 0 },
+  dataCy: { 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 },

package/dist/src/components/Media/OrigamMediaVolumeControl.vue

@@ -11,7 +11,7 @@
 					type="button"
 					class="origam-media-volume-control__btn"
 					:class="rootClasses"
-					:style="style"
+					:style="rootStyle"
 					:aria-label="muted ? unmuteLabel : muteLabel"
 					:data-cy="btnDataCy"
 					@click="onToggleMute"
@@ -42,7 +42,7 @@
 	</origam-tooltip>
 </template>
 
-<script setup>
+<script lang="ts" setup>
 import { computed } from "vue";
 import { OrigamIcon } from "../Icon";
 import { OrigamTooltip } from "../Tooltip";
@@ -67,6 +67,7 @@ const ICONS = {
   VOLUME_OFF: MDI_ICONS.VOLUME_OFF
 };
 const rootClasses = computed(() => [props.class]);
+const rootStyle = computed(() => props.style);
 const btnDataCy = computed(() => `${props.dataCy}-mute`);
 const wrapperDataCy = computed(() => `${props.dataCy}-wrapper`);
 const scrubberDataCy = computed(() => props.dataCy);

package/dist/src/components/Menu/OrigamMenu.vue

@@ -69,7 +69,7 @@
 	</origam-overlay>
 </template>
 
-<script setup>
+<script lang="ts" setup>
 import { computed, inject, mergeProps, nextTick, provide, ref, shallowRef, StyleValue, toRef, watch } from "vue";
 import {
   OrigamList,
@@ -197,7 +197,12 @@ const props = defineProps({
   appendIcon: { type: null, required: false },
   prependAvatar: { type: String, required: false },
   prependIcon: { type: null, required: false },
-  hover: { type: [Boolean, Object], required: false }
+  hover: { type: [Boolean, Object], required: false },
+  fontFamily: { type: String, required: false },
+  fontSize: { type: String, required: false },
+  fontWeight: { type: String, required: false },
+  lineHeight: { type: String, required: false },
+  letterSpacing: { type: String, required: false }
 });
 defineEmits(["contextmenu", "update:modelValue"]);
 const { filterProps } = useProps(props);
@@ -351,6 +356,8 @@ defineExpose(forwardRefs({
 
 	.origam-menu__content {
 		background: var(--origam-menu---background, var(--origam-color__surface---raised));
+		backdrop-filter: var(--origam-menu---backdrop-filter, none);
+		-webkit-backdrop-filter: var(--origam-menu---backdrop-filter, none);
 		color: var(--origam-menu---color, var(--origam-color__text---primary));
 		border-radius: var(--origam-menu---border-radius, 8px);
 		box-shadow: var(--origam-menu---box-shadow);

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

@@ -6,7 +6,7 @@
 		<component
 				:is="tag"
 				:class="messagesClasses"
-				:style="messagesStyles"
+				:style="[messagesStyles, rootTypographyStyles]"
 				aria-live="polite"
 				role="status"
 		>
@@ -16,6 +16,7 @@
 			>
 				<div
 						:id="`${index}-${toKebabCase(message)}`"
+						:style="childTypographyStyles"
 						class="origam-messages__message"
 				>
 					<slot
@@ -30,7 +31,7 @@
 	</origam-transition>
 </template>
 
-<script setup>
+<script lang="ts" setup>
 import { computed, StyleValue, toRef } from "vue";
 import { OrigamSlideY, OrigamTransition } from "../../components";
 import {
@@ -43,7 +44,8 @@ import {
   useRounded,
   useSsrBoot,
   useStyle,
-  useTextColor
+  useTextColor,
+  useTypography
 } from "../../composables";
 import { DENSITY } from "../../enums";
 import { toKebabCase, wrapInArray } from "../../utils";
@@ -86,7 +88,12 @@ const _props = defineProps({
   roundedBottomLeft: { type: [Boolean, Number, String], required: false },
   roundedBottomRight: { type: [Boolean, Number, String], required: false },
   density: { type: null, required: false, default: DENSITY.DEFAULT },
-  elevation: { type: [Number, String], required: false }
+  elevation: { type: [Number, String], required: false },
+  fontFamily: { type: String, required: false },
+  fontSize: { type: String, required: false },
+  fontWeight: { type: String, required: false },
+  lineHeight: { type: String, required: false },
+  letterSpacing: { type: String, required: false }
 });
 const props = useDefaults(_props);
 defineSlots();
@@ -95,6 +102,8 @@ const messages = computed(() => {
   return wrapInArray(props.messages);
 });
 const { textColorClasses, textColorStyles } = useTextColor(toRef(props, "color"));
+const { typographyStyles: rootTypographyStyles } = useTypography(props, "messages");
+const { typographyStyles: childTypographyStyles } = useTypography(props, "messages__message");
 const { roundedClasses, roundedStyles } = useRounded(props);
 const { borderClasses, borderStyles } = useBorder(props);
 const { paddingClasses, paddingStyles } = usePadding(props);

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

@@ -1,41 +1,59 @@
 <template>
-	<template v-if="compact">
-		<div
-				:class="compactClasses"
-				:style="numberFieldStyles"
-				role="group"
-				:aria-label="label"
-		>
-			<origam-btn
-					:icon="MDI_ICONS.MINUS"
-					:disabled="!canDecrease"
-					size="small"
-					data-cy="numberfield-compact-decrement"
-					aria-label="Decrement"
-					@click="handleCompactDecrement"
-			/>
-			<input
-					v-model="compactInputText"
-					type="text"
-					inputmode="numeric"
-					class="origam-number-field__compact-input"
+	<origam-input
+			v-if="compact"
+			ref="origamCompactInputRef"
+			v-model="model"
+			:validation-value="model"
+			:focused="isFocused"
+			:rules="rules"
+			:error="error"
+			:error-messages="errorMessages"
+			:hide-details="hideDetails"
+			:validate-on="validateOn"
+			:max-errors="maxErrors"
+			:name="name"
+			:disabled="disabled"
+			:readonly="readonly"
+			:class="compactInputWrapperClasses"
+			:style="numberFieldStyles"
+	>
+		<template #default>
+			<div
+					:class="compactClasses"
+					role="group"
 					:aria-label="label"
-					data-cy="numberfield-compact-input"
-					@blur="handleBlur"
-					@focus="handleFocus"
-					@beforeinput="handleBeforeInput"
-					@keydown="handleKeydown"
-			/>
-			<origam-btn
-					:icon="MDI_ICONS.PLUS"
-					:disabled="!canIncrease"
-					size="small"
-					data-cy="numberfield-compact-increment"
-					aria-label="Increment"
-					@click="handleCompactIncrement"
-			/>
-		</div>
-	</template>
+			>
+				<origam-btn
+						:icon="MDI_ICONS.MINUS"
+						:disabled="!canDecrease"
+						size="small"
+						data-cy="numberfield-compact-decrement"
+						aria-label="Decrement"
+						@click="handleCompactDecrement"
+				/>
+				<input
+						v-model="compactInputText"
+						type="text"
+						inputmode="numeric"
+						class="origam-number-field__compact-input"
+						:aria-label="label"
+						data-cy="numberfield-compact-input"
+						@blur="handleBlur"
+						@focus="handleFocus"
+						@beforeinput="handleBeforeInput"
+						@keydown="handleKeydown"
+				/>
+				<origam-btn
+						:icon="MDI_ICONS.PLUS"
+						:disabled="!canIncrease"
+						size="small"
+						data-cy="numberfield-compact-increment"
+						aria-label="Increment"
+						@click="handleCompactIncrement"
+				/>
+			</div>
+		</template>
+	</origam-input>
 	<origam-text-field
 			v-else
 			ref="origamTextFieldRef"
@@ -248,9 +266,9 @@
 	</origam-text-field>
 </template>
 
-<script setup>
+<script lang="ts" setup>
 import { computed, nextTick, onMounted, ref, shallowRef, StyleValue, useSlots, watch } from "vue";
-import { OrigamBtn, OrigamDivider, OrigamTextField } from "../../components";
+import { OrigamBtn, OrigamDivider, OrigamInput, OrigamTextField } from "../../components";
 import { useAdjacentInner, useFocus, useHold, useProps, useVModel, useStyle } from "../../composables";
 import { DIRECTION, MDI_ICONS, TEXT_FIELD_TYPE } from "../../enums";
 import { clamp, forwardRefs } from "../../utils";
@@ -287,6 +305,8 @@ const props = defineProps({
   reverse: { type: Boolean, required: false },
   singleLine: { type: Boolean, required: false },
   required: { type: Boolean, required: false },
+  activeColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
+  activeBgColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
   id: { type: String, required: false },
   class: { type: [String, Array, Object], required: false },
   style: { type: [String, Array, Object, Boolean, null], required: false, skipCheck: true },
@@ -334,6 +354,11 @@ const props = defineProps({
   roundedTopLeft: { type: [Boolean, Number, String], required: false },
   roundedBottomLeft: { type: [Boolean, Number, String], required: false },
   roundedBottomRight: { type: [Boolean, Number, String], required: false },
+  fontFamily: { type: String, required: false },
+  fontSize: { type: String, required: false },
+  fontWeight: { type: String, required: false },
+  lineHeight: { type: String, required: false },
+  letterSpacing: { type: String, required: false },
   active: { type: [Boolean, Object], required: false },
   activeClass: { type: String, required: false },
   variant: { type: null, required: false },
@@ -367,6 +392,7 @@ defineSlots();
 const { filterProps } = useProps(props);
 const slots = useSlots();
 const origamTextFieldRef = ref();
+const origamCompactInputRef = ref();
 const controlsDisabled = computed(() => !!(props.disabled || props.readonly));
 const model = useVModel(
   props,
@@ -582,7 +608,12 @@ const numberFieldStyles = computed(() => {
 const compactClasses = computed(() => {
   return [
     "origam-number-field",
-    "origam-number-field--compact",
+    "origam-number-field--compact"
+  ];
+});
+const compactInputWrapperClasses = computed(() => {
+  return [
+    "origam-number-field__compact-wrapper",
     props.class
   ];
 });
@@ -611,7 +642,7 @@ defineExpose(forwardRefs({
   load,
   unload,
   isLoaded
-}, origamTextFieldRef));
+}, origamTextFieldRef, origamCompactInputRef));
 </script>
 
 <style lang="scss" scoped>
@@ -707,4 +738,13 @@ defineExpose(forwardRefs({
 			}
 		}
 	}
+
+	.origam-number-field__compact-wrapper {
+		display: inline-grid;
+		width: fit-content;
+
+		:deep(.origam-input__control) {
+			display: inline-flex;
+		}
+	}
 </style>

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

@@ -15,7 +15,7 @@
 	</component>
 </template>
 
-<script setup>
+<script lang="ts" setup>
 import {
   computed
 } from "vue";

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

@@ -66,6 +66,7 @@
 								:value="model[i]"
 								autocomplete="one-time-code"
 								class="origam-otp-input-field__field"
+								:style="typographyStyles"
 								@blur="handleBlur"
 								@focus="handleFocus($event, i)"
 								@input="handleInput"
@@ -113,7 +114,7 @@
 				<template #loader>
 					<slot name="loader">
 						<origam-progress
-								:color="typeof loading === 'boolean' ? undefined : loading"
+								:color="typeof loading === 'string' ? loading : undefined"
 								:size="24"
 								:type="PROGRESS_TYPE.CIRCULAR"
 								indeterminate
@@ -125,15 +126,27 @@
 
 			<slot name="default"/>
 		</div>
+
+		<div
+				v-if="hasDetails"
+				class="origam-otp-input-field__details"
+		>
+			<origam-messages
+					:id="messagesId"
+					:active="hasMessages"
+					:messages="validationMessages"
+			/>
+		</div>
 	</div>
 </template>
 
-<script setup>
+<script lang="ts" setup>
 import { computed, nextTick, ref, StyleValue, useAttrs, useSlots, watch } from "vue";
 import { OrigamField, OrigamOverlay, OrigamProgress } from "../../components";
-import { useDimension, useFocus, useLocale, useProps, useVModel, useStyle } from "../../composables";
+import { OrigamMessages } from "../../components/Messages";
+import { useDimension, useFocus, useLocale, useProps, useTypography, useValidation, useVModel, useStyle } from "../../composables";
 import { OTP_INPUT_FIELD_TYPE, PROGRESS_TYPE } from "../../enums";
-import { filterInputAttrs, focusChild, forwardRefs } from "../../utils";
+import { filterInputAttrs, focusChild, forwardRefs, getUid, wrapInArray } from "../../utils";
 const props = defineProps({
   autofocus: { type: Boolean, required: false },
   divider: { type: String, required: false },
@@ -157,6 +170,8 @@ const props = defineProps({
   reverse: { type: Boolean, required: false },
   singleLine: { type: Boolean, required: false },
   required: { type: Boolean, required: false },
+  activeColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
+  activeBgColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
   id: { type: String, required: false },
   class: { type: [String, Array, Object], required: false },
   style: { type: [String, Array, Object, Boolean, null], required: false, skipCheck: true },
@@ -204,6 +219,11 @@ const props = defineProps({
   roundedTopLeft: { type: [Boolean, Number, String], required: false },
   roundedBottomLeft: { type: [Boolean, Number, String], required: false },
   roundedBottomRight: { type: [Boolean, Number, String], required: false },
+  fontFamily: { type: String, required: false },
+  fontSize: { type: String, required: false },
+  fontWeight: { type: String, required: false },
+  lineHeight: { type: String, required: false },
+  letterSpacing: { type: String, required: false },
   active: { type: [Boolean, Object], required: false },
   activeClass: { type: String, required: false },
   variant: { type: null, required: false },
@@ -238,6 +258,9 @@ const { filterProps } = useProps(props);
 const { t } = useLocale();
 const attrs = useAttrs();
 const slots = useSlots();
+const uid = getUid();
+const id = computed(() => props.id || `otp-input-field-${uid}`);
+const messagesId = computed(() => `${id.value}-messages`);
 const { dimensionStyles } = useDimension(props);
 const { isFocused, onFocus: focus, onBlur: blur } = useFocus(props);
 const model = useVModel(
@@ -253,6 +276,41 @@ const length = computed(() => {
 const fields = computed(() => {
   return Array(length.value).fill(0);
 });
+const otpStringValue = computed(() => model.value.join(""));
+const {
+  errorMessages,
+  isPristine,
+  isValid,
+  isValidating,
+  reset: resetValidation,
+  validate,
+  validationClasses
+} = useValidation(
+  new Proxy(props, {
+    get(target, key) {
+      if (key === "modelValue" || key === "validationValue") {
+        return otpStringValue.value;
+      }
+      return target[key];
+    }
+  }),
+  "origam-otp-input-field",
+  id
+);
+const validationMessages = computed(() => {
+  if (props.errorMessages?.length || !isPristine.value && errorMessages.value.length) {
+    return errorMessages.value;
+  } else if (props.hint && (props.persistentHint || isFocused.value)) {
+    return wrapInArray(props.hint);
+  }
+  return wrapInArray(props.messages ?? []);
+});
+const hasMessages = computed(() => validationMessages.value.length > 0);
+const hasDetails = computed(() => {
+  if (props.hideDetails === true) return false;
+  if (props.hideDetails === "auto") return hasMessages.value;
+  return true;
+});
 const focusIndex = ref(-1);
 const contentRef = ref();
 const inputRef = ref([]);
@@ -337,7 +395,10 @@ const isInvalidValue = (value) => {
   return props.type === OTP_INPUT_FIELD_TYPE.NUMBER && /[^0-9]/g.test(value);
 };
 watch(model, (val) => {
-  if (val.length === length.value) emits("finish", val.join(""));
+  if (val.length === length.value) {
+    emits("finish", val.join(""));
+    validate();
+  }
 }, { deep: true });
 watch(focusIndex, (val) => {
   if (val < 0) return;
@@ -345,6 +406,7 @@ watch(focusIndex, (val) => {
     inputRef.value[val]?.select();
   });
 });
+const { typographyStyles } = useTypography(props, "otp-input-field__cell");
 const otpInputFieldStyles = computed(() => {
   return [
     props.style
@@ -356,23 +418,32 @@ const otpInputFieldClasses = computed(() => {
     {
       "origam-otp-input-field--divided": !!props.divider
     },
+    validationClasses.value,
     props.class
   ];
 });
-const { id, css, load, isLoaded, unload } = useStyle(otpInputFieldStyles);
+const { id: styleId, css, load, isLoaded, unload } = useStyle(otpInputFieldStyles);
 defineExpose(forwardRefs({
   blur: () => {
-    inputRef.value?.some((input) => {
-      input.blur();
-      return true, css, id, load, unload, isLoaded;
-    });
+    inputRef.value?.forEach((input) => input.blur());
   },
   focus: () => {
     inputRef.value?.[0]?.focus();
   },
   reset,
+  resetValidation,
+  validate,
+  isValid,
+  isValidating,
+  errorMessages,
   isFocused,
-  filterProps
+  filterProps,
+  css,
+  id,
+  styleId,
+  load,
+  unload,
+  isLoaded
 }));
 </script>
 
@@ -382,6 +453,7 @@ defineExpose(forwardRefs({
 
 		align-items: center;
 		display: flex;
+		flex-direction: column;
 		justify-content: center;
 		padding: var(--origam-otp-input-field---padding-block, .5rem) 0;
 		position: relative;
@@ -442,6 +514,30 @@ defineExpose(forwardRefs({
 			}
 		}
 
+		&__details {
+			align-items: flex-end;
+			display: flex;
+			font-size: 0.75rem;
+			font-weight: 400;
+			letter-spacing: 0.0333333333em;
+			line-height: 1;
+			min-height: 22px;
+			padding-top: 6px;
+			overflow: hidden;
+			justify-content: space-between;
+			width: 100%;
+			padding-inline: var(--origam-otp-input-field__details---padding-inline, 4px);
+		}
+
+		&--error {
+			#{$this}__details {
+				> .origam-messages {
+					color: var(--origam-otp-input-field---error-color, var(--origam-color__feedback--danger---fg-subtle));
+					opacity: 1;
+				}
+			}
+		}
+
 		&--divided {
 			#{$this}__content {
 				max-width: var(--origam-otp-input-field__content---max-width-divided, 360px);

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

@@ -46,7 +46,7 @@
 	</template>
 </template>
 
-<script setup>
+<script lang="ts" setup>
 import { computed, mergeProps, onBeforeUnmount, ref, StyleValue, toRef, watch } from "vue";
 import { OrigamFade, OrigamOverlayScrim, OrigamTransition } from "../../components";
 import {

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

@@ -13,7 +13,7 @@
 	</origam-transition>
 </template>
 
-<script setup>
+<script lang="ts" setup>
 import { computed, StyleValue } from "vue";
 import { OrigamFade, OrigamTransition } from "../../components";
 import {