origam 0.3.9 → 2.2.1

package/dist/src/components/Snackbar/OrigamSnackbar.vue

@@ -16,21 +16,17 @@
 	>
 		<template #default>
       <span
-		      key="underlay"
-		      class="origam-snackbar__underlay"
+	      key="underlay"
+	      class="origam-snackbar__underlay"
       />
 
 			<div
-					v-if="props.timer && !isHovering"
-					key="timer"
-					class="origam-snackbar__timer"
+					v-if="timer"
+					:key="`timer-${timerKey}`"
+					:class="snackbarTimerClasses"
+					:style="{ '--origam-snackbar__timer---duration': `${timeout}ms` }"
 			>
-				<origam-progress
-						ref="origamProgressRef"
-						:max="props.timeout"
-						:model-value="countdown.time.value"
-						:type="PROGRESS_TYPE.LINEAR"
-				/>
+				<div class="origam-snackbar__timer-bar"/>
 			</div>
 
 			<div
@@ -46,7 +42,7 @@
 							<origam-icon
 									v-if="hasIcon"
 									key="prepend-icon"
-									:icon="icon as TIcon"
+									:icon="icon"
 									:size="28"
 							/>
 						</slot>
@@ -88,26 +84,21 @@ import {
   watch,
   watchEffect
 } from "vue";
-import { OrigamIcon, OrigamOverlay, OrigamProgress, OrigamSnack } from "../../components";
+import { OrigamIcon, OrigamOverlay, OrigamSnack } from "../../components";
 import {
-  useBorder,
   useBothColor,
-  useCountdown,
-  useElevation,
   useLayout,
-  useMargin,
-  usePadding,
   usePosition,
   useProps,
-  useRounded,
   useScopeId,
   useStatus,
+  useStyle,
   useToggleScope,
   useVModel
 } from "../../composables";
 import { ORIGAM_LAYOUT_KEY } from "../../consts";
-import { PROGRESS_TYPE, SCROLL_STRATEGIES } from "../../enums";
-import { forwardRefs, refElement } from "../../utils";
+import { SCROLL_STRATEGIES } from "../../enums";
+import { forwardRefs } from "../../utils";
 const props = defineProps({
   multiLine: { type: Boolean, required: false },
   text: { type: String, required: false },
@@ -123,10 +114,6 @@ const props = defineProps({
   icon: { type: null, required: false },
   color: { type: [String, Boolean, null], required: false, skipCheck: true },
   bgColor: { type: [String, Boolean, null], required: false, skipCheck: true },
-  activeColor: { type: [String, Boolean, null], required: false, skipCheck: true },
-  activeBgColor: { type: [String, Boolean, null], required: false, skipCheck: true },
-  hoverColor: { type: [String, Boolean, null], required: false, skipCheck: true },
-  hoverBgColor: { type: [String, Boolean, null], required: false, skipCheck: true },
   absolute: { type: Boolean, required: false },
   attach: { type: [Boolean, String], required: false, skipCheck: true },
   closeOnBack: { type: Boolean, required: false },
@@ -158,6 +145,7 @@ const props = defineProps({
   location: { type: null, required: false, default: "bottom" },
   origin: { type: null, required: false },
   offset: { type: [Number, String, Array], required: false },
+  viewportMargin: { type: Number, required: false },
   scrollStrategy: { type: Function, required: false, skipCheck: true },
   contained: { type: Boolean, required: false },
   eager: { type: Boolean, required: false },
@@ -170,7 +158,7 @@ const props = defineProps({
   bottom: { type: [Number, String], required: false },
   left: { type: [Number, String], required: false },
   right: { type: [Number, String], required: false },
-  rounded: { type: [Boolean, String, Number, null], required: false, skipCheck: true, default: true },
+  rounded: { type: [Boolean, Number, String, null], required: false, skipCheck: true, default: true },
   roundedTopRight: { type: [Boolean, Number, String], required: false },
   roundedTopLeft: { type: [Boolean, Number, String], required: false },
   roundedBottomLeft: { type: [Boolean, Number, String], required: false },
@@ -198,27 +186,23 @@ const props = defineProps({
   marginRight: { type: [Boolean, Number, String], required: false },
   marginBlock: { type: [Boolean, Number, String], required: false },
   marginInline: { type: [Boolean, Number, String], required: false },
-  elevation: { type: [Number, String], required: false, default: 1 }
+  elevation: { type: [Number, String], required: false, default: 1 },
+  active: { type: [Boolean, Object], required: false },
+  activeClass: { type: String, required: false },
+  hover: { type: [Boolean, Object], required: false }
 });
 const { filterProps } = useProps(props);
 const slots = useSlots();
 const isActive = useVModel(props, "modelValue");
 const { positionClasses } = usePosition(props);
 const { scopeId } = useScopeId();
-const countdown = useCountdown(Number(props.timeout));
 const { icon, statusClasses } = useStatus(props);
-const { colorStyles } = useBothColor(toRef(props, "bgColor"), toRef(props, "color"));
-const { roundedClasses, roundedStyles } = useRounded(props);
-const { borderClasses, borderStyles } = useBorder(props);
-const { paddingClasses, paddingStyles } = usePadding(props);
-const { marginClasses, marginStyles } = useMargin(props);
-const { elevationClasses } = useElevation(props);
 const origamOverlayRef = ref();
-const origamProgressRef = ref();
 const isHovering = shallowRef(false);
 const startY = shallowRef(0);
 const mainStyles = ref();
 const hasLayout = inject(ORIGAM_LAYOUT_KEY, void 0);
+const timerKey = shallowRef(0);
 useToggleScope(() => !!hasLayout, () => {
   const layout = useLayout();
   watchEffect(() => {
@@ -227,18 +211,15 @@ useToggleScope(() => !!hasLayout, () => {
 });
 let activeTimeout = -1;
 const startTimeout = () => {
-  countdown.reset();
   window.clearTimeout(activeTimeout);
   const timeout = Number(props.timeout);
   if (!isActive.value || timeout === -1) return;
-  const element = refElement(origamProgressRef.value);
-  countdown.start(element);
+  timerKey.value++;
   activeTimeout = window.setTimeout(() => {
     isActive.value = false;
   }, timeout);
 };
 const clearTimeout = () => {
-  countdown.reset();
   window.clearTimeout(activeTimeout);
 };
 watch(isActive, startTimeout);
@@ -262,13 +243,20 @@ const handleTouchend = (event) => {
     isActive.value = false;
   }
 };
+const { colorClasses, colorStyles } = useBothColor(toRef(props, "bgColor"), toRef(props, "color"));
 const overlayProps = computed(() => {
   return origamOverlayRef.value?.filterProps(props, ["class", "style", "id", "contentProps", "modelValue", "disableGlobalStack", "noClickAnimation", "persistent", "scrim", "scrollStrategy"]);
 });
 const contentProps = computed(() => {
   return mergeProps({
     class: [
-      "origam-snackbar__wrapper"
+      "origam-snackbar__wrapper",
+      // Color utility class lives ONLY on the wrapper (where the
+      // `colorStyles` already paints the surface). The other
+      // composables (`rounded`/`border`/`padding`/`margin`/
+      // `elevation`) are already injected on the root via
+      // `snackbarClasses` so we don't duplicate them here.
+      colorClasses.value
     ],
     style: [
       colorStyles.value,
@@ -300,6 +288,12 @@ const snackbarStyles = computed(() => {
     props.style
   ];
 });
+const snackbarTimerClasses = computed(() => {
+  return [
+    "origam-snackbar__timer",
+    { "origam-snackbar__timer--paused": isHovering.value }
+  ];
+});
 const snackbarClasses = computed(() => {
   return [
     "origam-snackbar",
@@ -320,7 +314,15 @@ const snackbarClasses = computed(() => {
     props.class
   ];
 });
-defineExpose(forwardRefs({ filterProps }, origamOverlayRef));
+const { id, css, load, isLoaded, unload } = useStyle(snackbarStyles);
+defineExpose(forwardRefs({
+  filterProps,
+  css,
+  id,
+  load,
+  unload,
+  isLoaded
+}, origamOverlayRef));
 </script>
 
 <style lang="scss" scoped>
@@ -328,9 +330,9 @@ defineExpose(forwardRefs({ filterProps }, origamOverlayRef));
 		$this: &;
 
 		justify-content: center;
-		z-index: 10000;
-		margin: 8px;
-		margin-inline-end: calc(8px + 0px);
+		z-index: var(--origam-snackbar---z-index, var(--origam-z-index-toast, 1060));
+		margin: var(--origam-snackbar---margin, 8px);
+		margin-inline-end: calc(var(--origam-snackbar---margin, 8px) + 0px);
 		padding: var(--origam-layout---position-top) var(--origam-layout---position-right) var(--origam-layout---position-bottom) var(--origam-layout---position-left);
 
 		&:not(#{$this}--center) {
@@ -342,9 +344,9 @@ defineExpose(forwardRefs({ filterProps }, origamOverlayRef));
 		:deep(#{$this}__wrapper) {
 			align-items: center;
 			display: flex;
-			max-width: 672px;
-			min-height: 48px;
-			min-width: 344px;
+			max-width: var(--origam-snackbar__wrapper---max-width, 672px);
+			min-height: var(--origam-snackbar__wrapper---min-height, 48px);
+			min-width: var(--origam-snackbar__wrapper---min-width, 344px);
 			overflow: hidden;
 			padding: 0;
 		}
@@ -355,26 +357,26 @@ defineExpose(forwardRefs({ filterProps }, origamOverlayRef));
 
 		&__content {
 			flex-grow: 1;
-			font-size: 0.875rem;
-			font-weight: 400;
-			letter-spacing: 0.0178571429em;
-			line-height: 1.425;
+			font-size: var(--origam-snackbar__content---font-size, 0.875rem);
+			font-weight: var(--origam-snackbar__content---font-weight, 400);
+			letter-spacing: var(--origam-snackbar__content---letter-spacing, 0.0178571429em);
+			line-height: var(--origam-snackbar__content---line-height, 1.425);
 			margin-right: auto;
-			padding: 14px 16px;
+			padding: var(--origam-snackbar__content---padding-block, 14px) var(--origam-snackbar__content---padding-inline, 16px);
 			text-align: initial;
 			align-items: center;
 			display: flex;
 		}
 
 		&__prepend {
-			margin-inline-end: 12px;
+			margin-inline-end: var(--origam-snackbar__prepend---margin-inline-end, 12px);
 		}
 
 		&__actions {
 			align-items: center;
 			align-self: center;
 			display: flex;
-			margin-inline-end: 8px;
+			margin-inline-end: var(--origam-snackbar__actions---margin-inline-end, 8px);
 
 			> .origam-btn {
 				padding: 0 8px;
@@ -384,36 +386,88 @@ defineExpose(forwardRefs({ filterProps }, origamOverlayRef));
 
 		&__timer {
 			width: 100%;
+			height: var(--origam-snackbar__timer---height, 3px);
 			position: absolute;
 			top: 0;
+			left: 0;
+			overflow: hidden;
+			pointer-events: none;
+
+			&-bar {
+				width: 100%;
+				height: 100%;
+				background-color: var(--origam-snackbar__timer-bar---background-color, currentColor);
+				opacity: var(--origam-snackbar__timer-bar---opacity, 0.5);
+				transform-origin: left center;
+				animation: origam-snackbar__timer-shrink var(--origam-snackbar__timer---duration, 5000ms) linear forwards;
+				will-change: transform;
+			}
 
-			:deep(.origam-progress-linear) {
-				transition: 0.2s linear;
+			&--paused &-bar {
+				animation-play-state: paused;
 			}
 		}
 
+		@keyframes origam-snackbar__timer-shrink {
+			from { transform: scaleX(1); }
+			to   { transform: scaleX(0); }
+		}
+
 		&--border {
 			:deep(#{$this}__wrapper) {
-				border-width: thin;
-				border-style: solid;
-				box-shadow: none;
+				border-width: var(--origam-snackbar__wrapper---border-width, thin);
+				border-style: var(--origam-snackbar__wrapper---border-style, solid);
+			}
+		}
+
+		@each $status in (success, info, warning, danger) {
+			&--#{$status} {
+				color: var(--origam-color__feedback--#{$status}---fgSubtle);
+				background: transparent;
+
+				:deep(#{$this}__wrapper) {
+					background-color: var(--origam-color__feedback--#{$status}---bgSubtle);
+					border-color: var(--origam-color__feedback--#{$status}---border);
+					color: var(--origam-color__feedback--#{$status}---fgSubtle);
+				}
+
+				#{$this}__timer-bar {
+					background-color: var(--origam-color__feedback--#{$status}---border);
+					opacity: var(--origam-snackbar__timer-bar---opacity-status, 0.7);
+				}
+			}
+		}
+
+		&--error {
+			color: var(--origam-color__feedback--danger---fgSubtle);
+			background: transparent;
+
+			:deep(#{$this}__wrapper) {
+				background-color: var(--origam-color__feedback--danger---bgSubtle);
+				border-color: var(--origam-color__feedback--danger---border);
+				color: var(--origam-color__feedback--danger---fgSubtle);
+			}
+
+			#{$this}__timer-bar {
+				background-color: var(--origam-color__feedback--danger---border);
+				opacity: var(--origam-snackbar__timer-bar---opacity-status, 0.7);
 			}
 		}
 
 		&--rounded {
 			:deep(#{$this}__wrapper) {
-				border-radius: 4px;
+				border-radius: var(--origam-snackbar__wrapper---border-radius, 4px);
 			}
 		}
 
 		&--absolute {
 			position: absolute;
-			z-index: 1;
+			z-index: var(--origam-snackbar--absolute---z-index, var(--origam-z-index-raised, 1));
 		}
 
 		&--multi-line {
 			#{$this}__wrapper {
-				min-height: 68px;
+				min-height: var(--origam-snackbar--multi-line---wrapper-min-height, 68px);
 			}
 		}
 
@@ -423,7 +477,7 @@ defineExpose(forwardRefs({ filterProps }, origamOverlayRef));
 
 				#{$this}__actions {
 					align-self: flex-end;
-					margin-bottom: 8px;
+					margin-bottom: var(--origam-snackbar--vertical---actions-margin-bottom, 8px);
 				}
 			}
 		}
@@ -451,9 +505,3 @@ defineExpose(forwardRefs({ filterProps }, origamOverlayRef));
 		}
 	}
 </style>
-
-<style>
-	:root {
-
-	}
-</style>

package/dist/src/components/Stepper/OrigamStepper.vue

@@ -0,0 +1,218 @@
+<template>
+	<nav
+			:id="id"
+			:class="stepperClasses"
+			aria-label="Progress steps"
+	>
+		<slot name="default">
+			<template v-if="hasItems">
+				<template
+						v-for="(item, index) in items"
+						:key="index"
+				>
+					<template v-if="showConnectors && index > 0">
+						<span
+								:class="connectorClasses(index)"
+								aria-hidden="true"
+						/>
+					</template>
+
+					<origam-stepper-item
+							v-bind="item"
+							:index="index"
+							:data-cy="`stepper-item-${index}`"
+							@click="handleItemClick"
+					/>
+				</template>
+			</template>
+		</slot>
+	</nav>
+</template>
+
+<script setup>
+import { computed, provide, ref, StyleValue, useSlots, watch } from "vue";
+import { OrigamStepperItem } from "../../components";
+import { ORIGAM_STEPPER_KEY } from "../../consts";
+import { DENSITY, SIZES } from "../../enums";
+import {
+  useStateEffect,
+  useDensity,
+  useProps,
+  useSize,
+  useStyle
+} from "../../composables";
+const props = defineProps({
+  items: { type: Array, required: false },
+  modelValue: { type: Number, required: false, default: 0 },
+  orientation: { type: String, required: false, default: "horizontal" },
+  clickable: { type: Boolean, required: false, default: false },
+  showConnectors: { type: Boolean, required: false, default: true },
+  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 },
+  size: { type: null, required: false, default: SIZES.DEFAULT },
+  density: { type: null, required: false, default: DENSITY.DEFAULT }
+});
+const emit = defineEmits(["update:modelValue"]);
+const { filterProps } = useProps(props);
+const slots = useSlots();
+const internalModel = ref(props.modelValue ?? 0);
+watch(() => props.modelValue, (val) => {
+  if (val !== void 0) internalModel.value = val;
+});
+provide(ORIGAM_STEPPER_KEY, {
+  modelValue: internalModel,
+  orientation: computed(() => props.orientation ?? "horizontal"),
+  clickable: computed(() => props.clickable ?? false),
+  color: computed(() => props.color)
+});
+const handleItemClick = (index) => {
+  if (!props.clickable) return;
+  internalModel.value = index;
+  emit("update:modelValue", index);
+};
+const hasItems = computed(() => {
+  return props.items && props.items.length > 0 || !!slots.default;
+});
+const connectorStatus = (index) => {
+  const modelValue = internalModel.value;
+  if (index - 1 < modelValue) return "done";
+  return "pending";
+};
+const connectorClasses = (index) => [
+  "origam-stepper__connector",
+  `origam-stepper__connector--${connectorStatus(index)}`
+];
+const { colorClasses, colorStyles } = useStateEffect(props);
+const { densityClasses } = useDensity(props);
+const { sizeClasses } = useSize(props);
+const stepperStyles = computed(() => {
+  return [
+    colorStyles.value,
+    props.style
+  ];
+});
+const stepperClasses = computed(() => [
+  "origam-stepper",
+  `origam-stepper--${props.orientation ?? "horizontal"}`,
+  hoverState,
+  activeState,
+  colorClasses.value,
+  densityClasses.value,
+  sizeClasses.value,
+  props.class
+]);
+const { id, css, load, isLoaded, unload } = useStyle(stepperStyles);
+defineExpose({
+  filterProps,
+  css,
+  id,
+  load,
+  unload,
+  isLoaded
+});
+</script>
+
+<style lang="scss" scoped>
+	.origam-stepper {
+		display: flex;
+		flex-direction: row;
+		align-items: flex-start;
+		gap: 0;
+		padding-block: var(--origam-stepper---padding-block, 8px);
+		padding-inline: var(--origam-stepper---padding-inline, 8px);
+		width: 100%;
+		box-sizing: border-box;
+
+		&--vertical {
+			flex-direction: column;
+
+			.origam-stepper__connector {
+				width: var(--origam-stepper---connector-thickness, 2px);
+				height: var(--origam-stepper---gap, 16px);
+				min-width: 0;
+				min-height: 16px;
+				margin-inline-start: calc((var(--origam-stepper---indicator-size, 32px) / 2) - (var(--origam-stepper---connector-thickness, 2px) / 2));
+				margin-block: 4px;
+				align-self: flex-start;
+			}
+		}
+
+		&__connector {
+			flex: 1;
+			height: var(--origam-stepper---connector-thickness, 2px);
+			min-width: 16px;
+			margin-inline: 4px;
+			margin-block-start: calc((var(--origam-stepper---indicator-size, 32px) / 2) - (var(--origam-stepper---connector-thickness, 2px) / 2));
+			align-self: flex-start;
+			background-color: var(--origam-stepper---connector-color, var(--origam-color__border---subtle));
+			border-radius: var(--origam-radius---full, 9999px);
+			transition: background-color 0.2s ease;
+
+			&--done {
+				background-color: var(
+					--origam-stepper---connector-color-done,
+					var(--origam-stepper---color, var(--origam-color__action--primary---bg))
+				);
+			}
+
+			.origam-stepper--vertical & {
+				flex: 0 0 auto;
+				margin-block-start: 0;
+				align-self: flex-start;
+			}
+		}
+
+		&--density-comfortable {
+			padding-block: 12px;
+			padding-inline: 12px;
+		}
+
+		&--density-default {
+			padding-block: 8px;
+			padding-inline: 8px;
+		}
+
+		&--density-compact {
+			padding-block: 4px;
+			padding-inline: 4px;
+		}
+
+		&--size-x-small {
+			--origam-stepper---indicator-size: 24px;
+			--origam-stepper---indicator-font-size: 0.625rem;
+			--origam-stepper---title-font-size: 0.75rem;
+			--origam-stepper---subtitle-font-size: 0.625rem;
+		}
+
+		&--size-small {
+			--origam-stepper---indicator-size: 28px;
+			--origam-stepper---indicator-font-size: 0.6875rem;
+			--origam-stepper---title-font-size: 0.8125rem;
+			--origam-stepper---subtitle-font-size: 0.6875rem;
+		}
+
+		&--size-default {
+			--origam-stepper---indicator-size: 32px;
+			--origam-stepper---indicator-font-size: 0.75rem;
+			--origam-stepper---title-font-size: 0.875rem;
+			--origam-stepper---subtitle-font-size: 0.75rem;
+		}
+
+		&--size-large {
+			--origam-stepper---indicator-size: 40px;
+			--origam-stepper---indicator-font-size: 0.875rem;
+			--origam-stepper---title-font-size: 1rem;
+			--origam-stepper---subtitle-font-size: 0.8125rem;
+		}
+
+		&--size-x-large {
+			--origam-stepper---indicator-size: 48px;
+			--origam-stepper---indicator-font-size: 1rem;
+			--origam-stepper---title-font-size: 1.125rem;
+			--origam-stepper---subtitle-font-size: 0.875rem;
+		}
+	}
+</style>