origam 2.3.0 → 2.6.1

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

@@ -26,7 +26,7 @@
 		<template #default>
 			<div
 					:class="menuContentClasses"
-					:style="colorStyles"
+					:style="[colorStyles, roundedStyles, borderStyles, elevationStyles, paddingStyles, marginStyles]"
 			>
 				<slot name="default">
 					<origam-list class="origam-menu__list">
@@ -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,
@@ -83,6 +83,7 @@ import {
   useBothColor,
   useProps,
   useScopeId,
+  useStateEffect,
   useStyle,
   useVModel
 } from "../../composables";
@@ -166,8 +167,8 @@ const props = defineProps({
   itemProps: { type: null, required: false },
   returnObject: { type: Boolean, required: false },
   valueComparator: { type: null, 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 },
   padding: { type: [Boolean, Number, String], required: false },
   paddingTop: { type: [Boolean, Number, String], required: false },
   paddingLeft: { type: [Boolean, Number, String], required: false },
@@ -196,11 +197,28 @@ 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(["update:modelValue", "contextmenu"]);
+defineEmits(["contextmenu", "update:modelValue"]);
 const { filterProps } = useProps(props);
 const { colorClasses, colorStyles } = useBothColor(toRef(props, "bgColor"), toRef(props, "color"));
+const {
+  roundedClasses,
+  roundedStyles,
+  borderClasses,
+  borderStyles,
+  elevationClasses,
+  elevationStyles,
+  paddingClasses,
+  paddingStyles,
+  marginClasses,
+  marginStyles
+} = useStateEffect(props);
 const isActive = useVModel(props, "modelValue");
 const { scopeId } = useScopeId();
 const uid = getUid();
@@ -302,7 +320,12 @@ const menuStyles = computed(() => {
 const menuContentClasses = computed(() => {
   return [
     "origam-menu__content",
-    colorClasses.value
+    colorClasses.value,
+    roundedClasses.value,
+    borderClasses.value,
+    elevationClasses.value,
+    paddingClasses.value,
+    marginClasses.value
   ];
 });
 const menuClasses = computed(() => {
@@ -333,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,9 +6,9 @@
 		<component
 				:is="tag"
 				:class="messagesClasses"
-				:style="messagesStyles"
+				:style="[messagesStyles, rootTypographyStyles]"
 				aria-live="polite"
-				role="alert"
+				role="status"
 		>
 			<template
 					v-for="(message, index) in messages"
@@ -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";
@@ -56,7 +58,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 },
@@ -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";
@@ -274,11 +292,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 +305,16 @@ 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 },
   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 +322,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 },
@@ -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

@@ -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 lang="ts" 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";