origam 0.3.10 → 2.3.0

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
@@ -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>