origam 2.2.1 → 2.3.0

package/dist/src/components/Parallax/OrigamParallax.vue

@@ -31,21 +31,26 @@ import {
   useElevation,
   useMargin,
   usePadding,
+  useParallaxRuntime,
   useProps,
   useRounded,
   useStyle,
   useThrottleFn
 } from "../../composables";
-import { ORIGAM_PARALLAX_KEY } from "../../consts";
-import { PARALLAX_EVENT } from "../../enums";
+import { ORIGAM_PARALLAX_KEY, ORIGAM_PARALLAX_LAYER_KEY } from "../../consts";
+import { PARALLAX_DIRECTION, PARALLAX_EASING, PARALLAX_EVENT } from "../../enums";
 import { getCenter, getTargetBox, inViewport } from "../../utils";
 const props = defineProps({
   animationDuration: { type: Number, required: false },
-  easing: { type: String, required: false, default: "cubic-bezier(0.23, 1, 0.32, 1)" },
+  easing: { type: null, required: false, default: PARALLAX_EASING.LINEAR },
   perspective: { type: Number, required: false, default: 1e3 },
   event: { type: null, required: false, default: PARALLAX_EVENT.MOVE },
   active: { type: Boolean, required: false, default: true },
   duration: { type: Number, required: false, default: 1e3 },
+  direction: { type: null, required: false, default: PARALLAX_DIRECTION.VERTICAL },
+  speed: { type: Number, required: false, default: 0.5 },
+  disabled: { type: Boolean, required: false, default: false },
+  threshold: { type: Number, required: false, default: 0 },
   id: { type: String, required: false },
   class: { type: [String, Array, Object], required: false },
   style: { type: [String, Array, Object, Boolean, null], required: false, skipCheck: true },
@@ -90,6 +95,7 @@ const props = defineProps({
   audio: { type: String, required: false },
   playAudio: { type: Boolean, required: false }
 });
+const emit = defineEmits(["enter", "leave", "scroll-progress"]);
 const { filterProps } = useProps(props);
 const { audioRef, audioData, onStop: handleStop } = useAudio(props);
 const { platform } = useDisplay();
@@ -104,14 +110,9 @@ const root = ref();
 const isMoving = ref(false);
 const leftOnce = ref(false);
 const shape = ref(null);
-const movement = ref({
-  x: 0,
-  y: 0
-});
+const movement = ref({ x: 0, y: 0 });
 const data = ref();
-const isTouch = computed(() => {
-  return platform.value.touch;
-});
+const isTouch = computed(() => platform.value.touch);
 const eventActions = computed(() => {
   return {
     move: {
@@ -144,11 +145,9 @@ const mouseMovement = ({ target, event }) => {
   const relativeX = x - target.left;
   const relativeY = y - target.top;
   const center = getCenter(target);
-  const mouseMovementX = relativeX / center.x;
-  const mouseMovementY = relativeY / center.y;
   return {
-    x: mouseMovementX,
-    y: mouseMovementY,
+    x: relativeX / center.x,
+    y: relativeY / center.y,
     target
   };
 };
@@ -158,11 +157,9 @@ const scrollMovement = ({ target }) => {
   const relativeX = x - target.left;
   const relativeY = y - target.top;
   const center = getCenter(target);
-  const mouseMovementX = relativeX / center.x;
-  const mouseMovementY = relativeY / center.y;
   return {
-    x: mouseMovementX,
-    y: mouseMovementY,
+    x: relativeX / center.x,
+    y: relativeY / center.y,
     target
   };
 };
@@ -181,10 +178,7 @@ const handleMovement = useThrottleFn((event) => {
   const condition = eventActions.value[props.event].condition;
   const action = eventActions.value[props.event].action;
   if (isInViewport && condition) {
-    movement.value = action({
-      target: shape.value,
-      event
-    });
+    movement.value = action({ target: shape.value, event });
     data.value = { x: event.clientX, y: event.clientY };
   }
 }, 100);
@@ -207,12 +201,8 @@ const handleMovementStop = () => {
   leftOnce.value = true;
   isMoving.value = false;
 };
-onMounted(() => {
-  addEvents();
-});
-onBeforeUnmount(() => {
-  removeEvents();
-});
+onMounted(() => addEvents());
+onBeforeUnmount(() => removeEvents());
 watch(() => props.event, (newEvent, oldEvent) => {
   if (newEvent === oldEvent) return;
   removeEvents(oldEvent);
@@ -240,6 +230,35 @@ provide(ORIGAM_PARALLAX_KEY, {
   easing: toRef(props, "easing"),
   shape
 });
+const {
+  progress,
+  mouseRatio,
+  cssScrollDriven,
+  reducedMotion,
+  register,
+  unregister
+} = useParallaxRuntime({
+  target: root,
+  direction: toRef(props, "direction"),
+  easing: toRef(props, "easing"),
+  threshold: toRef(props, "threshold"),
+  disabled: toRef(props, "disabled"),
+  speed: toRef(props, "speed"),
+  onEnter: () => emit("enter"),
+  onLeave: () => emit("leave"),
+  onProgress: (p) => emit("scroll-progress", p)
+});
+provide(ORIGAM_PARALLAX_LAYER_KEY, {
+  direction: toRef(props, "direction"),
+  easing: toRef(props, "easing"),
+  disabled: toRef(props, "disabled"),
+  progress,
+  mouseRatio,
+  cssScrollDriven,
+  reducedMotion,
+  register,
+  unregister
+});
 const parallaxStyles = computed(() => {
   return [
     dimensionStyles.value,
@@ -248,11 +267,6 @@ const parallaxStyles = computed(() => {
     roundedStyles.value,
     paddingStyles.value,
     marginStyles.value,
-    // Forward `perspective` as a component-scoped CSS variable so
-    // the SCSS owns the actual `perspective:` declaration. Lets the
-    // design-token layer override the default per-theme without
-    // touching the JS, and keeps the Style-Dictionary chromique
-    // pattern consistent across components.
     {
       "--origam-parallax---perspective": `${props.perspective}px`
     },
@@ -262,6 +276,12 @@ const parallaxStyles = computed(() => {
 const parallaxClasses = computed(() => {
   return [
     "origam-parallax",
+    {
+      "origam-parallax--disabled": props.disabled,
+      "origam-parallax--reduced-motion": reducedMotion.value,
+      "origam-parallax--css-driven": cssScrollDriven.value,
+      [`origam-parallax--${props.direction}`]: !!props.direction
+    },
     colorClasses.value,
     borderClasses.value,
     roundedClasses.value,
@@ -278,7 +298,10 @@ defineExpose({
   id,
   load,
   unload,
-  isLoaded
+  isLoaded,
+  progress,
+  cssScrollDriven,
+  reducedMotion
 });
 </script>
 
@@ -299,4 +322,12 @@ defineExpose({
 		background-color: var(--origam-parallax---background-color, transparent);
 		color: var(--origam-parallax---color, inherit);
 	}
+
+	.origam-parallax--disabled,
+	.origam-parallax--reduced-motion {
+		:deep(.origam-parallax__layer) {
+			animation: none !important;
+			transition: none !important;
+		}
+	}
 </style>

package/dist/src/components/Parallax/OrigamParallaxLayer.vue

@@ -0,0 +1,119 @@
+<template>
+	<component
+			:is="tag"
+			ref="layerRef"
+			:class="layerClasses"
+			:style="layerStyles"
+	>
+		<slot name="default"/>
+	</component>
+</template>
+
+<script setup>
+import { computed, inject, onBeforeUnmount, onMounted, ref, StyleValue } from "vue";
+import { useProps } from "../../composables";
+import { ORIGAM_PARALLAX_LAYER_KEY } from "../../consts";
+const props = defineProps({
+  speed: { type: Number, required: false, default: 1 },
+  offsetX: { type: Number, required: false, default: 0 },
+  offsetY: { type: Number, required: false, default: 0 },
+  zIndex: { type: Number, 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 },
+  tag: { type: String, required: false, default: "div" }
+});
+const { filterProps } = useProps(props);
+const parallax = inject(ORIGAM_PARALLAX_LAYER_KEY);
+if (!parallax) {
+  throw new Error("[Origam] OrigamParallaxLayer must be nested inside OrigamParallax (use direction/easing/disabled props on the host).");
+}
+const layerRef = ref();
+const id = Symbol("origam:parallax-layer");
+onMounted(() => {
+  if (!layerRef.value) return;
+  const registry = {
+    id,
+    speed: props.speed ?? 1,
+    offsetX: props.offsetX ?? 0,
+    offsetY: props.offsetY ?? 0,
+    target: layerRef.value
+  };
+  parallax.register(registry);
+});
+onBeforeUnmount(() => {
+  parallax.unregister(id);
+});
+const layerStyles = computed(() => {
+  const styles = {
+    willChange: "var(--origam-parallax__layer---will-change, transform)",
+    transformOrigin: "var(--origam-parallax__layer---transform-origin, center center)"
+  };
+  if (props.zIndex !== void 0) {
+    styles.zIndex = String(props.zIndex);
+  }
+  styles.transform = `translate3d(${props.offsetX ?? 0}px, ${props.offsetY ?? 0}px, 0)`;
+  return [styles, props.style];
+});
+const layerClasses = computed(() => {
+  return [
+    "origam-parallax__layer",
+    {
+      "origam-parallax__layer--css-driven": parallax.cssScrollDriven.value,
+      "origam-parallax__layer--reduced-motion": parallax.reducedMotion.value
+    },
+    props.class
+  ];
+});
+defineExpose({ filterProps });
+</script>
+
+<style lang="scss" scoped>
+	.origam-parallax__layer {
+		position: absolute;
+		inset: 0;
+		display: block;
+		will-change: var(--origam-parallax__layer---will-change, transform);
+		transform-origin: var(--origam-parallax__layer---transform-origin, center center);
+	}
+
+	.origam-parallax__layer--reduced-motion {
+		transform: translate3d(
+			var(--origam-parallax__layer---offset-x, 0),
+			var(--origam-parallax__layer---offset-y, 0),
+			0
+		) !important;
+	}
+
+	@supports (animation-timeline: scroll()) {
+		.origam-parallax__layer--css-driven {
+			animation: origam-parallax-layer linear both;
+			animation-timeline: view();
+			animation-range: cover 0% cover 100%;
+		}
+
+		@keyframes origam-parallax-layer {
+			from {
+				transform: translate3d(
+					calc(var(--origam-parallax__layer---offset-x, 0px) + var(--origam-parallax__layer---speed, 1) * -50%),
+					calc(var(--origam-parallax__layer---offset-y, 0px) + var(--origam-parallax__layer---speed, 1) * -50%),
+					0
+				);
+			}
+			to {
+				transform: translate3d(
+					calc(var(--origam-parallax__layer---offset-x, 0px) + var(--origam-parallax__layer---speed, 1) * 50%),
+					calc(var(--origam-parallax__layer---offset-y, 0px) + var(--origam-parallax__layer---speed, 1) * 50%),
+					0
+				);
+			}
+		}
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.origam-parallax__layer {
+			animation: none !important;
+			transition: none !important;
+		}
+	}
+</style>

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

@@ -15,6 +15,13 @@ Object.defineProperty(exports, "OrigamParallaxElement", {
     return _OrigamParallaxElement.default;
   }
 });
+Object.defineProperty(exports, "OrigamParallaxLayer", {
+  enumerable: true,
+  get: function () {
+    return _OrigamParallaxLayer.default;
+  }
+});
 var _OrigamParallaxElement = _interopRequireDefault(require("./OrigamParallaxElement.vue"));
+var _OrigamParallaxLayer = _interopRequireDefault(require("./OrigamParallaxLayer.vue"));
 var _OrigamParallax = _interopRequireDefault(require("./OrigamParallax.vue"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }

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

@@ -1,2 +1,3 @@
 export { default as OrigamParallaxElement } from './OrigamParallaxElement.vue';
+export { default as OrigamParallaxLayer } from './OrigamParallaxLayer.vue';
 export { default as OrigamParallax } from './OrigamParallax.vue';

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

@@ -1,2 +1,3 @@
 export { default as OrigamParallaxElement } from "./OrigamParallaxElement.vue";
+export { default as OrigamParallaxLayer } from "./OrigamParallaxLayer.vue";
 export { default as OrigamParallax } from "./OrigamParallax.vue";

package/dist/src/components/PasswordField/OrigamPasswordField.vue

@@ -369,6 +369,7 @@ const _props = defineProps({
   role: { type: String, required: false },
   type: { type: null, required: false },
   modelModifiers: { type: [String, Boolean], required: false },
+  mask: { type: null, required: false },
   centerAffix: { type: Boolean, required: false, default: true },
   dirty: { type: Boolean, required: false },
   disabled: { type: Boolean, required: false },

package/dist/src/components/Select/OrigamSelect.vue

@@ -343,6 +343,7 @@ const props = defineProps({
   role: { type: String, required: false, default: "combobox" },
   type: { type: null, required: false, default: TEXT_FIELD_TYPE.TEXT },
   modelModifiers: { type: [String, Boolean], required: false },
+  mask: { type: null, required: false },
   density: { type: null, required: false, default: DENSITY.DEFAULT },
   centerAffix: { type: Boolean, required: false, default: true },
   dirty: { type: Boolean, required: false },