origam 2.3.0 → 2.6.1

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

@@ -2,7 +2,9 @@
 	<component
 			:is="progressComponent"
 			ref="origamProgressRef"
+			:aria-busy="indeterminate ? true : undefined"
 			:aria-hidden="!active"
+			:aria-label="progressAriaLabel"
 			:aria-valuemax="max"
 			:aria-valuenow="indeterminate ? undefined : normalizedValue"
 			:class="progressClasses"
@@ -20,7 +22,7 @@
 	</component>
 </template>
 
-<script setup>
+<script lang="ts" setup>
 import { computed, ref, StyleValue } from "vue";
 import { OrigamProgressCircular, OrigamProgressLinear } from "../../components";
 import {
@@ -43,11 +45,13 @@ const props = defineProps({
   absolute: { type: Boolean, required: false },
   max: { type: [Number, String], required: false, default: 100 },
   striped: { type: Boolean, required: false },
+  label: { type: String, required: false },
   tag: { type: String, required: false, default: "div" },
   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 },
+  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 },
@@ -75,6 +79,7 @@ const { filterProps } = useProps(props);
 const origamProgressRef = ref();
 const { sizeClasses, sizeStyles } = useSize(props);
 const { normalizedValue, hasContent } = useProgress(props);
+const progressAriaLabel = computed(() => props.label ?? "Loading");
 const isCircular = computed(() => {
   return props.type === PROGRESS_TYPE.CIRCULAR;
 });

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

@@ -47,7 +47,7 @@
 	</component>
 </template>
 
-<script setup>
+<script lang="ts" setup>
 import { computed, ref, StyleValue, toRef, watchEffect } from "vue";
 import {
   useIntersectionObserver,
@@ -70,11 +70,13 @@ const props = defineProps({
   absolute: { type: Boolean, required: false },
   max: { type: [Number, String], required: false, default: 100 },
   striped: { type: Boolean, required: false },
+  label: { type: String, required: false },
   tag: { type: String, required: false, default: "div" },
   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 },
+  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 },
@@ -281,4 +283,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

@@ -49,7 +49,7 @@
 	</component>
 </template>
 
-<script setup>
+<script lang="ts" setup>
 import { computed, StyleValue, toRef } from "vue";
 import { OrigamFade, OrigamSlideX, OrigamTransition } from "../../components";
 import {
@@ -75,11 +75,13 @@ const props = defineProps({
   absolute: { type: Boolean, required: false },
   max: { type: [Number, String], required: false, default: 100 },
   striped: { type: Boolean, required: false },
+  label: { type: String, required: false },
   tag: { type: String, required: false, default: "div" },
   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 },
+  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 },
@@ -106,8 +108,8 @@ const { locationStyles } = useLocation(props);
 const { progressClasses, progressStyles, normalizedValue, thickness, progress, max, hasContent } = useProgress(props);
 const { roundedClasses } = useRounded(props);
 const { intersectionRef } = useIntersectionObserver();
-const { textColorStyles: backgroundColorStyles, textColorClasses: backgroundColorClasses } = useTextColor(toRef(props, "bgColor"), void 0, "origam-progress__background");
-const { textColorStyles: loaderColorStyles, textColorClasses: loaderColorClasses } = useTextColor(toRef(props, "color"), void 0, "origam-progress__loader");
+const { textColorStyles: backgroundColorStyles, textColorClasses: backgroundColorClasses } = useTextColor(toRef(props, "bgColor"));
+const { textColorStyles: loaderColorStyles, textColorClasses: loaderColorClasses } = useTextColor(toRef(props, "color"));
 const { isRtl, rtlClasses } = useRtl();
 const normalizedBuffer = computed(() => {
   return parseFloat(props.bufferValue) / max.value * 100;
@@ -219,7 +221,6 @@ defineExpose({
 				opacity: var(--origam-progress-linear__background---opacity, 0.5);
 				position: absolute;
 				top: 0;
-				transition-property: width, left, right;
 				transition: inherit;
 			}
 
@@ -248,7 +249,6 @@ defineExpose({
 				left: 0;
 				position: absolute;
 				transition: inherit;
-				transition-property: width, left, right;
 			}
 
 			&#{$this}--indeterminate {
@@ -280,7 +280,6 @@ defineExpose({
 				pointer-events: none;
 				position: absolute;
 				transition: inherit;
-				transition-property: width, left, right;
 			}
 
 			&#{$this}--reverse {
@@ -357,6 +356,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>

package/dist/src/components/QrCode/OrigamQrCode.vue

@@ -0,0 +1,246 @@
+<template>
+	<component
+			:is="tag"
+			class="origam-qr-code"
+			:class="rootClasses"
+			:style="rootStyles"
+			role="img"
+			:aria-label="resolvedAriaLabel"
+			data-cy="origam-qr-code"
+	>
+		<h3
+				v-if="title"
+				class="origam-qr-code__title"
+				data-cy="origam-qr-code-title"
+		>{{ title }}</h3>
+		<span
+				ref="svgHost"
+				class="origam-qr-code__svg-host"
+				:class="sizeClasses"
+				:style="svgHostStyles"
+		/>
+		<span
+				v-if="hasCenter"
+				class="origam-qr-code__center"
+				aria-hidden="true"
+		>
+			<slot
+					name="center"
+					:size="centerSize"
+			>
+				<origam-avatar
+						v-if="image"
+						:image="image"
+						class="origam-qr-code__center-avatar"
+				/>
+				<origam-icon
+						v-if="icon"
+						:icon="icon"
+						class="origam-qr-code__center-icon"
+				/>
+			</slot>
+		</span>
+	</component>
+</template>
+
+<script lang="ts" setup>
+import {
+  computed,
+  ref,
+  useSlots,
+  watchEffect
+} from "vue";
+import { OrigamAvatar } from "../Avatar";
+import { OrigamIcon } from "../Icon";
+import {
+  useBackgroundColor,
+  useBorder,
+  useElevation,
+  useMargin,
+  usePadding,
+  useQrCode,
+  useRounded,
+  useSize,
+  useTextColor
+} from "../../composables";
+import { resolveQrColor, resolveQrCornerRadius } from "../../utils";
+const props = defineProps({
+  value: { type: String, required: true },
+  title: { type: String, required: false, default: void 0 },
+  qrCodeProps: { type: Object, required: false, default: void 0 },
+  errorCorrectionLevel: { type: String, required: false, default: "M" },
+  quietZone: { type: Number, required: false, default: 4 },
+  icon: { type: null, required: false, default: void 0 },
+  image: { type: [String, Object], required: false, default: void 0 },
+  ariaLabel: { type: String, required: false, default: void 0 },
+  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: "div" },
+  color: { type: [String, Object, Boolean, null], required: false, skipCheck: true, default: "currentColor" },
+  bgColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true, default: void 0 },
+  rounded: { type: [Boolean, Number, String, null], required: false, skipCheck: true, default: void 0 },
+  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 },
+  border: { type: [Boolean, Number, String, Array], required: false, skipCheck: true },
+  borderTop: { type: [Boolean, Number, String], required: false },
+  borderLeft: { type: [Boolean, Number, String], required: false },
+  borderBottom: { type: [Boolean, Number, String], required: false },
+  borderRight: { type: [Boolean, Number, String], required: false },
+  borderBlock: { type: [Boolean, Number, String], required: false },
+  borderInline: { type: [Boolean, Number, String], required: false },
+  borderColor: { type: String, required: false },
+  borderStyle: { type: String, required: false },
+  elevation: { type: [Number, String], required: false },
+  size: { type: null, required: false, default: 240 },
+  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 },
+  margin: { type: [Boolean, Number, String], required: false },
+  marginTop: { type: [Boolean, Number, String], required: false },
+  marginLeft: { type: [Boolean, Number, String], required: false },
+  marginBottom: { type: [Boolean, Number, String], required: false },
+  marginRight: { type: [Boolean, Number, String], required: false },
+  marginBlock: { type: [Boolean, Number, String], required: false },
+  marginInline: { type: [Boolean, Number, String], required: false }
+});
+defineSlots();
+const slots = useSlots();
+const hasCenter = computed(
+  () => !!slots.center || !!props.icon || !!props.image
+);
+const resolvedQrColor = computed(
+  () => resolveQrColor(
+    props.qrCodeProps?.color ?? props.color,
+    "foreground",
+    "currentColor"
+  )
+);
+const resolvedQrBgColor = computed(
+  () => resolveQrColor(
+    props.qrCodeProps?.bgColor,
+    "background",
+    "transparent"
+  )
+);
+const resolvedQrCornerRadius = computed(
+  () => resolveQrCornerRadius(props.qrCodeProps?.rounded)
+);
+const resolvedOptions = computed(() => ({
+  errorCorrectionLevel: props.errorCorrectionLevel,
+  foreground: resolvedQrColor.value,
+  background: resolvedQrBgColor.value,
+  margin: props.quietZone ?? 4,
+  cornerRadius: resolvedQrCornerRadius.value
+}));
+const { svg, size: matrixSize } = useQrCode(() => props.value, resolvedOptions);
+const centerSize = computed(() => Math.round(matrixSize.value * 0.2));
+const svgHost = ref(null);
+watchEffect(() => {
+  const target = svgHost.value;
+  if (!target) return;
+  target.innerHTML = svg.value;
+});
+const resolvedAriaLabel = computed(() => {
+  if (props.ariaLabel) return props.ariaLabel;
+  if (props.title) return props.title;
+  return `QR code for ${props.value}`;
+});
+const { textColorClasses, textColorStyles } = useTextColor(props, "color");
+const { backgroundColorClasses, backgroundColorStyles } = useBackgroundColor(props, "bgColor");
+const { roundedClasses, roundedStyles } = useRounded(props);
+const { borderClasses, borderStyles } = useBorder(props);
+const { sizeClasses, sizeStyles } = useSize(props);
+const { paddingClasses, paddingStyles } = usePadding(props);
+const { marginClasses, marginStyles } = useMargin(props);
+const { elevationClasses, elevationStyles } = useElevation(props);
+const rootClasses = computed(() => [
+  `origam-qr-code--ecc-${props.errorCorrectionLevel.toLowerCase()}`,
+  ...textColorClasses.value,
+  ...backgroundColorClasses.value,
+  ...roundedClasses.value,
+  ...borderClasses.value,
+  ...paddingClasses.value,
+  ...marginClasses.value,
+  ...elevationClasses.value,
+  props.class
+]);
+const rootStyles = computed(() => [
+  textColorStyles.value,
+  backgroundColorStyles.value,
+  roundedStyles.value,
+  borderStyles.value,
+  paddingStyles.value,
+  marginStyles.value,
+  elevationStyles.value,
+  props.style
+]);
+const svgHostStyles = computed(() => sizeStyles.value);
+defineExpose({
+  svg
+});
+</script>
+
+<style lang="scss" scoped>
+	.origam-qr-code {
+		display: inline-flex;
+		flex-direction: column;
+		align-items: center;
+		gap: 8px;
+		line-height: 0;
+		position: relative;
+		// Baseline inner spacing — matches the `gap` between title and
+		// SVG so the wrapper has the same breathing room on every side
+		// of the matrix. Overridden by the `padding` prop (via
+		// `usePadding(props)` inline styles) when the consumer
+		// provides one.
+		padding: 8px;
+	}
+
+	.origam-qr-code__title {
+		margin: 0;
+		font: 600 0.875rem/1.2 inherit;
+		text-align: center;
+		color: inherit;
+		line-height: 1.2;
+		align-self: stretch;
+	}
+
+	.origam-qr-code__svg-host {
+		display: block;
+		aspect-ratio: 1;
+		position: relative;
+
+		:deep(svg) {
+			display: block;
+			width: 100%;
+			height: 100%;
+		}
+	}
+
+	.origam-qr-code__center {
+		position: absolute;
+		top: 50%;
+		left: 50%;
+		transform: translate(-50%, -50%);
+		width: 20%;
+		height: 20%;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		gap: 4px;
+		pointer-events: none;
+	}
+
+	.origam-qr-code__center-avatar,
+	.origam-qr-code__center-icon {
+		width: 100%;
+		height: 100%;
+	}
+</style>

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

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

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

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

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

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

package/dist/src/components/Radio/OrigamRadio.vue

@@ -42,11 +42,11 @@
 
 					<template
 							v-if="slots.input"
-							#input="{props, icon, textColorStyles, backgroundColorStyles, model}"
+							#input="{props, icon, model}"
 					>
 						<slot
 								name="input"
-								v-bind="{props, icon, textColorStyles, backgroundColorStyles, model}"
+								v-bind="{props, icon, model}"
 						/>
 					</template>
 
@@ -99,12 +99,14 @@
 	</origam-input>
 </template>
 
-<script setup>
+<script lang="ts" setup>
 import { computed, ref, StyleValue, useAttrs, useSlots } from "vue";
 import { OrigamInput, OrigamRadioBtn } from "../../components";
 import {
   useFocus,
   useHover,
+  useMargin,
+  usePadding,
   useProps,
   useStateEffect,
   useStyle,
@@ -142,8 +144,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 },
   border: { type: [Boolean, Number, String, Array], required: false, skipCheck: true },
   borderTop: { type: [Boolean, Number, String], required: false },
   borderLeft: { type: [Boolean, Number, String], required: false },
@@ -162,7 +164,7 @@ const props = defineProps({
   width: { type: [Number, String], required: false },
   direction: { type: null, required: false },
   disabled: { type: Boolean, required: false },
-  error: { type: Boolean, required: false },
+  error: { type: [String, Boolean], required: false },
   errorMessages: { type: [Array, String], required: false },
   maxErrors: { type: [Number, String], required: false },
   name: { type: String, required: false },
@@ -178,10 +180,17 @@ const props = defineProps({
   prependAvatar: { type: String, required: false },
   prependIcon: { type: null, required: false },
   size: { type: null, 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 },
   trueValue: { type: null, required: false },
   falseValue: { type: null, required: false },
   value: { type: null, 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 },
   inline: { type: Boolean, required: false },
   falseIcon: { type: null, required: false },
   trueIcon: { type: null, required: false },
@@ -215,14 +224,20 @@ const inputProps = computed(() => {
 const radioBtnProps = computed(() => {
   return origamRadioBtnRef.value?.filterProps(props, ["modelValue", "class", "style", "id", "disabled", "readonly", "error"]);
 });
+const { paddingClasses, paddingStyles } = usePadding(props);
+const { marginClasses, marginStyles } = useMargin(props);
 const radioStyles = computed(() => {
   return [
+    paddingStyles.value,
+    marginStyles.value,
     props.style
   ];
 });
 const radioClasses = computed(() => {
   return [
     "origam-radio",
+    paddingClasses.value,
+    marginClasses.value,
     props.class
   ];
 });
@@ -245,13 +260,7 @@ defineExpose({
 		}
 
 		.origam-selection-control {
-			min-height: calc(56px + 2 * var(--origam-input---density));
+			min-height: calc(56px + 2 * var(--origam-input---density, 0px));
 		}
 	}
 </style>
-
-<style>
-	:root {
-
-	}
-</style>

package/dist/src/components/Radio/OrigamRadioBtn.vue

@@ -36,7 +36,7 @@
 	</origam-selection-control>
 </template>
 
-<script setup>
+<script lang="ts" setup>
 import { computed, ref, StyleValue, useSlots } from "vue";
 import { OrigamSelectionControl } from "../../components";
 import {
@@ -54,8 +54,10 @@ const props = defineProps({
   falseValue: { type: null, required: false },
   value: { type: null, 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 },
   disabled: { type: Boolean, required: false },
-  error: { type: Boolean, required: false },
+  error: { type: [String, Boolean], required: false },
   inline: { type: Boolean, required: false },
   falseIcon: { type: null, required: false, default: MDI_ICONS.RADIOBOX_BLANK },
   trueIcon: { type: null, required: false, default: MDI_ICONS.RADIOBOX_MARKED },
@@ -65,10 +67,10 @@ const props = defineProps({
   modelValue: { type: null, required: false },
   type: { type: String, required: false },
   valueComparator: { type: Function, required: false },
-  color: { type: [String, Boolean, null], required: false, skipCheck: true },
+  color: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
   density: { type: null, required: false, default: DENSITY.DEFAULT },
   ripple: { type: [Boolean, Object], required: false },
-  bgColor: { type: [String, Boolean, null], required: false, skipCheck: true },
+  bgColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
   active: { type: [Boolean, Object], required: false },
   activeClass: { type: String, required: false },
   hover: { type: [Boolean, Object], required: false }