@resee-movies/nuxt-ux 0.15.0 → 0.16.0

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "@resee-movies/nuxt-ux",
   "configKey": "ux",
-  "version": "0.15.0",
+  "version": "0.16.0",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "3.6.0"

package/dist/runtime/components/CardScroller.vue

@@ -66,7 +66,9 @@ const props = defineProps({
   loading: { type: Boolean, required: false, default: false },
   centerAlign: { type: Boolean, required: false, default: false },
   toPageContainerEdge: { type: Boolean, required: false, default: true },
-  styleWhenTransiting: { type: String, required: false, default: "right" }
+  styleWhenTransiting: { type: String, required: false, default: "right" },
+  transitOpacity: { type: Boolean, required: false, default: true },
+  transitScale: { type: Boolean, required: false, default: true }
 });
 const slots = defineSlots();
 const ruler = ref();
@@ -111,43 +113,85 @@ const displayBounds = computed(() => {
   bounds.x3_4 = `${bounds.x4 - bounds.x3}px`;
   return bounds;
 });
-watchDebounced([displayBounds], () => {
+const {
+  pause: pauseScrollReset,
+  resume: resumeScrollReset
+} = watchDebounced([displayBounds], () => {
   scrollBox.value?.scrollTo({ left: 0, behavior: "instant" });
 }, { debounce: 500 });
 const scrollState = useScroll(scrollBox);
-watch([scrollState.x, displayBounds], () => {
-  queueStyleChanges();
-  debouncedQueueStyleChanges();
+const {
+  pause: pauseStyleChanges,
+  resume: resumeStyleChanges
+} = watch([scrollState.x, displayBounds], () => {
+  queueStyleChanges(props.styleWhenTransiting, props.transitOpacity, props.transitScale);
+  debouncedQueueStyleChanges(props.styleWhenTransiting, props.transitOpacity, props.transitScale);
 }, { flush: "sync" });
-const debouncedQueueStyleChanges = useDebounceFn(() => queueStyleChanges(), 100);
+watch(
+  [() => props.transitOpacity, () => props.transitScale],
+  ([styleOpacity, styleScale]) => {
+    const areAnyDisabled = !(styleOpacity && styleScale);
+    const areAllDisabled = !(styleOpacity || styleScale);
+    if (areAnyDisabled) {
+      removeStyleChanges(styleOpacity, styleScale);
+    } else {
+      debouncedQueueStyleChanges(props.styleWhenTransiting, styleOpacity, styleScale);
+    }
+    if (areAllDisabled) {
+      pauseScrollReset();
+      pauseStyleChanges();
+    } else {
+      resumeScrollReset();
+      resumeStyleChanges();
+    }
+  }
+);
+const debouncedQueueStyleChanges = useDebounceFn(queueStyleChanges, 100);
 let queuedFrame = void 0;
-function queueStyleChanges() {
+function queueStyleChanges(transiting, styleOpacity, styleScale) {
   if (queuedFrame) {
     cancelAnimationFrame(queuedFrame);
     queuedFrame = void 0;
   }
   queuedFrame = requestAnimationFrame(() => {
-    applyStyleChanges();
+    applyStyleChanges(transiting, styleOpacity, styleScale);
     queuedFrame = void 0;
   });
 }
-function applyStyleChanges() {
-  const styleLeft = props.styleWhenTransiting === "left" || props.styleWhenTransiting === "both";
-  const styleRight = props.styleWhenTransiting === "right" || props.styleWhenTransiting === "both";
+function applyStyleChanges(transiting, styleOpacity, styleScale) {
+  const styleLeft = transiting === "both" || transiting === "left";
+  const styleRight = transiting === "both" || transiting === "right";
   for (const element of scrollItemElements.value) {
     const [percentage, direction] = percentInBounds(element, displayBounds.value);
     if (direction === "none") {
-      element.style.opacity = "1";
-      element.style.scale = "1";
+      if (styleOpacity) {
+        element.style.opacity = "1";
+      }
+      if (styleScale) {
+        element.style.scale = "1";
+      }
     } else if (direction === "left" && styleLeft || direction === "right" && styleRight) {
-      element.style.opacity = percentage.toString();
-      if (element.firstElementChild instanceof HTMLElement) {
+      if (styleOpacity) {
+        element.style.opacity = percentage.toString();
+      }
+      if (styleScale && element.firstElementChild instanceof HTMLElement) {
         element.firstElementChild.style.transformOrigin = `center ${direction === "left" ? "right" : "left"}`;
         element.firstElementChild.style.scale = (1 - 0.2 * (1 - percentage)).toString();
       }
     }
   }
 }
+function removeStyleChanges(styleOpacity, styleScale) {
+  for (const element of scrollItemElements.value) {
+    if (!styleOpacity) {
+      element.style.opacity = "";
+    }
+    if (!styleScale && element.firstElementChild instanceof HTMLElement) {
+      element.firstElementChild.style.transformOrigin = "";
+      element.firstElementChild.style.scale = "";
+    }
+  }
+}
 function percentInBounds(element, { x1, x2, x3, x4 }) {
   const {
     left: elementStart,

package/dist/runtime/components/CardScroller.vue.d.ts

@@ -9,6 +9,8 @@ export type CardScrollerProps<T> = {
     centerAlign?: boolean;
     toPageContainerEdge?: boolean;
     styleWhenTransiting?: 'left' | 'right' | 'both';
+    transitOpacity?: boolean;
+    transitScale?: boolean;
 };
 declare const __VLS_export: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
     props: __VLS_PrettifyLocal<CardScrollerProps<T>> & import("vue").PublicProps & (typeof globalThis extends {

package/dist/runtime/components/LayoutPageColumn.vue

@@ -19,5 +19,5 @@ const props = defineProps({
 </script>
 
 <style scoped>
-@reference "tailwindcss";@layer components{:global(:root){--page-column-gutter:calc(var(--spacing)*3);--page-column-pad-y:calc(var(--spacing)*12);--page-column-pad-vista:calc(var(--spacing)*52)}.page-column{margin-left:auto;margin-right:auto;padding:var(--page-column-gutter)}.page-column.layout-main:where(:has(:first-child.page-container)){padding-bottom:0;padding-top:0}.page-column.layout-vista:where(:has(:last-child.page-container)){padding-bottom:0}@variant sm{.page-column{max-width:var(--container-3xl)}.page-column.layout-main{padding-top:var(--page-column-pad-y)}.page-column.layout-main,.page-column.layout-vista{padding-bottom:var(--page-column-pad-y)}}@variant lg{.page-column{max-width:var(--container-5xl)}.page-column.layout-vista{padding-top:var(--page-column-pad-vista)}}@variant portrait{.page-column.layout-vista{padding-top:min(calc(var(--spacing)*52),calc(56.25vw - 110px))}}}
+@reference "tailwindcss";@layer components{:global(:root){--page-column-gutter:calc(var(--spacing)*3);--page-column-pad-y:calc(var(--spacing)*12);--page-column-pad-vista:calc(var(--spacing)*52)}.page-column{margin-left:auto;margin-right:auto;padding:var(--page-column-gutter)}.page-column.layout-main:where(:has(:first-child.page-container)){padding-bottom:0;padding-top:0}.page-column.layout-vista:where(:has(:last-child.page-container)){padding-bottom:0}@variant sm{.page-column{max-width:var(--container-3xl)}.page-column.layout-main{padding-top:var(--page-column-pad-y)}.page-column.layout-main,.page-column.layout-vista{padding-bottom:var(--page-column-pad-y)}}@variant lg{.page-column{max-width:var(--container-5xl)}.page-column.layout-vista{padding-top:var(--page-column-pad-vista)}}:global(.page-column-xl){@variant xl{.page-column{max-width:var(--container-7xl)}}}@variant portrait{.page-column.layout-vista{padding-top:min(calc(var(--spacing)*52),calc(56.25vw - 110px))}}}
 </style>

package/dist/runtime/components/form/Form.vue

@@ -22,6 +22,7 @@
 
       <PrimeForm
         v-slot                    = "$form"
+        v-bind                    = "$attrs"
         ref                       = "form"
         novalidate                = "true"
         :validate-on-mount        = "true"
@@ -59,6 +60,9 @@ import LazySuccessSplash from "../SuccessSplash.vue";
 import LazyMessage from "../Message.vue";
 import { useReactiveObjectsSync } from "../../composables/use-reactive-objects-sync";
 import { provideFormInstance, getValuesFromFormState } from "../../utils/form";
+defineOptions({
+  inheritAttrs: false
+});
 const props = defineProps({
   disabled: { type: Boolean, required: false, default: false },
   onSubmit: { type: [Function, Array], required: false, default: void 0 },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@resee-movies/nuxt-ux",
-  "version": "0.15.0",
+  "version": "0.16.0",
   "description": "The next-gen user experience library for ReSee Movies - currently in development. ",
   "repository": {
     "url": "https://github.com/ReSee-Movies/nuxt-ux.git"