origam 0.3.9 → 2.2.1

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

@@ -21,10 +21,11 @@
 </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,
@@ -32,6 +33,7 @@ import {
   usePadding,
   useProps,
   useRounded,
+  useStyle,
   useThrottleFn
 } from "../../composables";
 import { ORIGAM_PARALLAX_KEY } from "../../consts";
@@ -48,6 +50,8 @@ const props = defineProps({
   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 +75,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 },
@@ -90,6 +94,7 @@ 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);
@@ -183,22 +188,14 @@ const handleMovement = useThrottleFn((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 = () => {
@@ -216,25 +213,48 @@ onMounted(() => {
 onBeforeUnmount(() => {
   removeEvents();
 });
+watch(() => props.event, (newEvent, oldEvent) => {
+  if (newEvent === oldEvent) return;
+  removeEvents(oldEvent);
+  addEvents(newEvent);
+  isMoving.value = false;
+  movement.value = { x: 0, y: 0 };
+});
+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 parallaxStyles = computed(() => {
   return [
     dimensionStyles.value,
     borderStyles.value,
+    colorStyles.value,
     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.
     {
-      perspective: `${props.perspective}px`
+      "--origam-parallax---perspective": `${props.perspective}px`
     },
     props.style
   ];
@@ -242,6 +262,7 @@ const parallaxStyles = computed(() => {
 const parallaxClasses = computed(() => {
   return [
     "origam-parallax",
+    colorClasses.value,
     borderClasses.value,
     roundedClasses.value,
     elevationClasses.value,
@@ -250,8 +271,14 @@ const parallaxClasses = computed(() => {
     props.class
   ];
 });
+const { id, css, load, isLoaded, unload } = useStyle(parallaxStyles);
 defineExpose({
-  filterProps
+  filterProps,
+  css,
+  id,
+  load,
+  unload,
+  isLoaded
 });
 </script>
 
@@ -263,5 +290,13 @@ 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);
 	}
 </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>