origam 0.3.10 → 2.3.0

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

@@ -21,33 +21,42 @@
 </template>
 
 <script setup>
-import { computed, onBeforeUnmount, onMounted, provide, ref, StyleValue, toRef } from "vue";
+import { computed, onBeforeUnmount, onMounted, provide, ref, StyleValue, toRef, watch } from "vue";
 import {
   useAudio,
   useBorder,
+  useBothColor,
   useDimension,
   useDisplay,
   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 },
   tag: { type: String, required: false, default: "div" },
+  color: { type: [String, Boolean, null], required: false, skipCheck: true },
+  bgColor: { type: [String, 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 },
@@ -71,7 +80,7 @@ const props = defineProps({
   borderInline: { type: [Boolean, Number, String], required: false },
   borderColor: { type: String, required: false },
   borderStyle: { type: String, required: false },
-  rounded: { type: [Boolean, String, Number, null], required: false, skipCheck: true },
+  rounded: { type: [Boolean, Number, String, null], required: false, skipCheck: true },
   roundedTopRight: { type: [Boolean, Number, String], required: false },
   roundedTopLeft: { type: [Boolean, Number, String], required: false },
   roundedBottomLeft: { type: [Boolean, Number, String], required: false },
@@ -86,10 +95,12 @@ 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();
 const { dimensionStyles } = useDimension(props);
+const { colorClasses, colorStyles } = useBothColor(toRef(props, "bgColor"), toRef(props, "color"));
 const { borderStyles, borderClasses } = useBorder(props);
 const { roundedClasses, roundedStyles } = useRounded(props);
 const { elevationClasses } = useElevation(props);
@@ -99,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: {
@@ -139,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
   };
 };
@@ -153,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
   };
 };
@@ -176,29 +178,18 @@ 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);
-const addEvents = () => {
-  if (eventMap.value[props.event]) {
-    window.addEventListener(
-      eventMap.value[props.event],
-      handleMovement,
-      true
-    );
+const addEvents = (event = props.event) => {
+  if (eventMap.value[event]) {
+    window.addEventListener(eventMap.value[event], handleMovement, true);
   }
 };
-const removeEvents = () => {
-  if (eventMap.value[props.event]) {
-    window.removeEventListener(
-      eventMap.value[props.event],
-      handleMovement,
-      true
-    );
+const removeEvents = (event = props.event) => {
+  if (eventMap.value[event]) {
+    window.removeEventListener(eventMap.value[event], handleMovement, true);
   }
 };
 const handleMovementStart = () => {
@@ -210,31 +201,74 @@ const handleMovementStop = () => {
   leftOnce.value = true;
   isMoving.value = false;
 };
-onMounted(() => {
-  addEvents();
+onMounted(() => addEvents());
+onBeforeUnmount(() => removeEvents());
+watch(() => props.event, (newEvent, oldEvent) => {
+  if (newEvent === oldEvent) return;
+  removeEvents(oldEvent);
+  addEvents(newEvent);
+  isMoving.value = false;
+  movement.value = { x: 0, y: 0 };
 });
-onBeforeUnmount(() => {
-  removeEvents();
+let _animationDurationWarned = false;
+const resolvedDuration = computed(() => {
+  if (props.animationDuration != null && !_animationDurationWarned) {
+    _animationDurationWarned = true;
+    console.warn(
+      "[origam] OrigamParallax: the `animationDuration` prop is deprecated and will be removed in v3.0.0. Use `duration` instead. Both props currently resolve to the same value (`animationDuration` wins when both are set)."
+    );
+  }
+  return props.animationDuration ?? props.duration ?? 1e3;
 });
 provide(ORIGAM_PARALLAX_KEY, {
   audioData,
-  event: toRef(props.event),
+  event: toRef(props, "event"),
   eventData: data,
-  isMoving: toRef(isMoving.value || props.event === PARALLAX_EVENT.SCROLL),
+  isMoving: computed(() => isMoving.value || props.event === PARALLAX_EVENT.SCROLL),
   movement,
-  duration: toRef(props.duration),
-  easing: toRef(props.easing),
+  duration: resolvedDuration,
+  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,
     borderStyles.value,
+    colorStyles.value,
     roundedStyles.value,
     paddingStyles.value,
     marginStyles.value,
     {
-      perspective: `${props.perspective}px`
+      "--origam-parallax---perspective": `${props.perspective}px`
     },
     props.style
   ];
@@ -242,6 +276,13 @@ 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,
     elevationClasses.value,
@@ -250,8 +291,17 @@ const parallaxClasses = computed(() => {
     props.class
   ];
 });
+const { id, css, load, isLoaded, unload } = useStyle(parallaxStyles);
 defineExpose({
-  filterProps
+  filterProps,
+  css,
+  id,
+  load,
+  unload,
+  isLoaded,
+  progress,
+  cssScrollDriven,
+  reducedMotion
 });
 </script>
 
@@ -263,5 +313,21 @@ defineExpose({
 		align-items: center;
 		position: relative;
 		overflow: hidden;
+
+		perspective: var(--origam-parallax---perspective, 1000px);
+		transform-origin: var(--origam-parallax---transform-origin, center center);
+		transition-duration: var(--origam-parallax---transition-duration, 600ms);
+		transition-timing-function: var(--origam-parallax---transition-timing-function, cubic-bezier(0.23, 1, 0.32, 1));
+
+		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/OrigamParallaxElement.vue

@@ -10,7 +10,16 @@
 
 <script setup>
 import { computed, inject, StyleValue } from "vue";
-import { useParallaxTransform, useProps } from "../../composables";
+import {
+  useBorder,
+  useElevation,
+  useMargin,
+  usePadding,
+  useParallaxTransform,
+  useProps,
+  useRounded,
+  useStyle
+} from "../../composables";
 import { ORIGAM_PARALLAX_KEY } from "../../consts";
 import { AXIS, PARALLAX_ELEMENT_TYPE } from "../../enums";
 import { cyclicMovement, elementMovement } from "../../utils";
@@ -53,7 +62,7 @@ const props = defineProps({
   borderInline: { type: [Boolean, Number, String], required: false },
   borderColor: { type: String, required: false },
   borderStyle: { type: String, required: false },
-  rounded: { type: [Boolean, String, Number, null], required: false, skipCheck: true },
+  rounded: { type: [Boolean, Number, String, null], required: false, skipCheck: true },
   roundedTopRight: { type: [Boolean, Number, String], required: false },
   roundedTopLeft: { type: [Boolean, Number, String], required: false },
   roundedBottomLeft: { type: [Boolean, Number, String], required: false },
@@ -62,6 +71,11 @@ const props = defineProps({
   type: { type: null, required: false, default: PARALLAX_ELEMENT_TYPE.TRANSLATE }
 });
 const { filterProps } = useProps(props);
+const { borderClasses, borderStyles } = useBorder(props);
+const { roundedClasses, roundedStyles } = useRounded(props);
+const { elevationClasses } = useElevation(props);
+const { paddingClasses, paddingStyles } = usePadding(props);
+const { marginClasses, marginStyles } = useMargin(props);
 const parallax = inject(ORIGAM_PARALLAX_KEY);
 if (!parallax) throw new Error("[Origam] parallax-element needs to be placed inside parallax");
 const { transformStyles, strength } = useParallaxTransform(props);
@@ -153,6 +167,10 @@ const transformCalculation = () => {
 };
 const parallaxElementStyles = computed(() => {
   return [
+    borderStyles.value,
+    roundedStyles.value,
+    paddingStyles.value,
+    marginStyles.value,
     props.style,
     {
       ...transform.value,
@@ -163,10 +181,21 @@ const parallaxElementStyles = computed(() => {
 const parallaxElementClasses = computed(() => {
   return [
     "origam-parallax-element",
+    borderClasses.value,
+    roundedClasses.value,
+    elevationClasses.value,
+    paddingClasses.value,
+    marginClasses.value,
     props.class
   ];
 });
+const { id, css, load, isLoaded, unload } = useStyle(parallaxElementStyles);
 defineExpose({
-  filterProps
+  filterProps,
+  css,
+  id,
+  load,
+  unload,
+  isLoaded
 });
 </script>

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";