srcdev-nuxt-components 9.1.28 → 9.1.30

package/app/pages/ui/scroll-reveal-image.vue

@@ -0,0 +1,483 @@
+<template>
+  <div>
+    <NuxtLayout name="default">
+      <template #layout-content>
+        <!-- ── Page header ──────────────────────────────────────────────── -->
+        <LayoutRow tag="div" variant="content" :style-class-passthrough="['mbe-48']">
+          <h1 class="page-heading-1">ScrollRevealImage / ScrollRevealFrame</h1>
+          <p class="page-body-normal">
+            A pure-CSS parallax reveal. No scroll listeners, no JS animation — driven entirely by
+            <code>animation-timeline: view()</code>
+            . Scroll down to see each variant in action.
+          </p>
+          <p class="page-body-normal">
+            <code>ScrollRevealFrame</code>
+            is the generic primitive — it accepts any slot content (images, grids, video).
+            <code>ScrollRevealImage</code>
+            is a convenience wrapper that adds
+            <code>NuxtImg</code>
+            optimisation and a horizontal focal-point prop.
+          </p>
+        </LayoutRow>
+
+        <!-- ── Interactive demo ──────────────────────────────────────────── -->
+        <LayoutRow tag="div" variant="content" :style-class-passthrough="['mbe-48']">
+          <h2 class="page-heading-2 mbe-8">Interactive demo</h2>
+          <p class="page-body-normal mbe-16">Adjust the props then scroll through the image on the right.</p>
+          <div class="demo-controls">
+            <p class="demo-controls__heading">Props</p>
+            <div class="demo-controls__fields">
+              <MultipleRadiobuttons
+                v-model="frameHeight"
+                v-model:field-data="frameHeightData"
+                name="frameHeight"
+                legend="frameHeight"
+                label="frameHeight"
+                error-message=""
+                :is-button="true"
+                :is-pill="true"
+                :field-has-error="false"
+                options-layout="inline"
+              />
+              <MultipleRadiobuttons
+                v-model="parallaxOffset"
+                v-model:field-data="parallaxOffsetData"
+                name="parallaxOffset"
+                legend="parallaxOffset"
+                label="parallaxOffset"
+                error-message=""
+                :is-button="true"
+                :is-pill="true"
+                :field-has-error="false"
+                options-layout="inline"
+              />
+              <MultipleRadiobuttons
+                v-model="focalX"
+                v-model:field-data="focalXData"
+                name="focalX"
+                legend="focalX"
+                label="focalX"
+                error-message=""
+                :is-button="true"
+                :is-pill="true"
+                :field-has-error="false"
+                options-layout="inline"
+              />
+              <MultipleRadiobuttons
+                v-model="radius"
+                v-model:field-data="radiusData"
+                name="radius"
+                legend="radius"
+                label="radius"
+                error-message=""
+                :is-button="true"
+                :is-pill="true"
+                :field-has-error="false"
+                options-layout="inline"
+              />
+            </div>
+          </div>
+        </LayoutRow>
+
+        <!-- ── Variants ──────────────────────────────────────────────────── -->
+        <LayoutRow tag="div" variant="content" :style-class-passthrough="['mbe-24']">
+          <h2 class="page-heading-2">Variants</h2>
+        </LayoutRow>
+
+        <!-- Default -->
+        <LayoutRow tag="div" variant="content" :style-class-passthrough="['mbe-32']">
+          <div class="sri-demo-row">
+            <div class="sri-demo-row__info">
+              <h3 class="page-heading-3 mbe-8">Default</h3>
+              <p class="page-body-normal mbe-12">
+                All props at their default values. A portrait image with a generous parallax offset panning from top to
+                bottom as the frame crosses the viewport.
+              </p>
+              <dl class="sri-props">
+                <dt>frameHeight</dt>
+                <dd>540px</dd>
+                <dt>parallaxOffset</dt>
+                <dd>36rem</dd>
+                <dt>focalX</dt>
+                <dd>50%</dd>
+              </dl>
+            </div>
+            <ScrollRevealImage
+              src="/images/page/hero/hero-blonde.jpg"
+              alt="Blonde hair portrait"
+              :img-width="1280"
+              :img-height="1920"
+            />
+          </div>
+        </LayoutRow>
+
+        <!-- Short frame / banner -->
+        <LayoutRow tag="div" variant="content" :style-class-passthrough="['mbe-32']">
+          <div class="sri-demo-row">
+            <div class="sri-demo-row__info">
+              <h3 class="page-heading-3 mbe-8">Short frame — landscape image</h3>
+              <p class="page-body-normal mbe-12">
+                A shallow frame with a wide banner image. The reduced
+                <code>parallaxOffset</code>
+                is proportional to the shorter frame height.
+              </p>
+              <dl class="sri-props">
+                <dt>frameHeight</dt>
+                <dd>320px</dd>
+                <dt>parallaxOffset</dt>
+                <dd>24rem</dd>
+              </dl>
+            </div>
+            <ScrollRevealImage
+              src="/images/banners/banner-mid-brown.webp"
+              alt="Mid brown hair banner"
+              :img-width="1920"
+              :img-height="800"
+              frame-height="320px"
+              parallax-offset="24rem"
+            />
+          </div>
+        </LayoutRow>
+
+        <!-- Rounded corners -->
+        <LayoutRow tag="div" variant="content" :style-class-passthrough="['mbe-32']">
+          <div class="sri-demo-row">
+            <div class="sri-demo-row__info">
+              <h3 class="page-heading-3 mbe-8">Rounded corners</h3>
+              <p class="page-body-normal mbe-12">
+                The
+                <code>radius</code>
+                prop applies
+                <code>border-radius</code>
+                to the clipping frame, so the image reveal stays contained within the rounded shape.
+              </p>
+              <dl class="sri-props">
+                <dt>frameHeight</dt>
+                <dd>480px</dd>
+                <dt>parallaxOffset</dt>
+                <dd>36rem</dd>
+                <dt>radius</dt>
+                <dd>2.4rem</dd>
+              </dl>
+            </div>
+            <ScrollRevealImage
+              src="/images/banners/banner-ginger.webp"
+              alt="Ginger hair banner"
+              :img-width="1920"
+              :img-height="800"
+              frame-height="480px"
+              radius="2.4rem"
+            />
+          </div>
+        </LayoutRow>
+
+        <!-- Focal point -->
+        <LayoutRow tag="div" variant="content" :style-class-passthrough="['mbe-32']">
+          <div class="sri-demo-row">
+            <div class="sri-demo-row__info">
+              <h3 class="page-heading-3 mbe-8">Horizontal focal point</h3>
+              <p class="page-body-normal mbe-12">
+                <code>focalX</code>
+                pins the horizontal crop axis. Here it is pushed right so the subject stays centred in the narrower
+                right-hand column.
+              </p>
+              <dl class="sri-props">
+                <dt>frameHeight</dt>
+                <dd>540px</dd>
+                <dt>parallaxOffset</dt>
+                <dd>36rem</dd>
+                <dt>focalX</dt>
+                <dd>75%</dd>
+              </dl>
+            </div>
+            <ScrollRevealImage
+              src="/images/page/hero/hero-red.jpg"
+              alt="Red hair portrait"
+              :img-width="1280"
+              :img-height="1920"
+              focal-x="75%"
+            />
+          </div>
+        </LayoutRow>
+
+        <!-- Tall frame -->
+        <LayoutRow tag="div" variant="content" :style-class-passthrough="['mbe-32']">
+          <div class="sri-demo-row">
+            <div class="sri-demo-row__info">
+              <h3 class="page-heading-3 mbe-8">Tall frame — maximum travel</h3>
+              <p class="page-body-normal mbe-12">
+                A tall frame combined with a large
+                <code>parallaxOffset</code>
+                creates the most dramatic reveal — nearly the full image height is traversed as you scroll.
+              </p>
+              <dl class="sri-props">
+                <dt>frameHeight</dt>
+                <dd>70vh</dd>
+                <dt>parallaxOffset</dt>
+                <dd>60rem</dd>
+              </dl>
+            </div>
+            <ScrollRevealImage
+              src="/images/page/hero/hero-hair.jpg"
+              alt="Hair portrait"
+              :img-width="1280"
+              :img-height="1920"
+              frame-height="70vh"
+              parallax-offset="60rem"
+            />
+          </div>
+        </LayoutRow>
+
+        <!-- ScrollRevealFrame: image grid -->
+        <LayoutRow tag="div" variant="content" :style-class-passthrough="['mbe-48']">
+          <div class="sri-demo-row">
+            <div class="sri-demo-row__info">
+              <h3 class="page-heading-3 mbe-8">Image grid — ScrollRevealFrame</h3>
+              <p class="page-body-normal mbe-12">
+                <code>ScrollRevealFrame</code>
+                accepts arbitrary slot content. Here a six-image CSS grid scrolls as a single unit inside the
+                clipping frame — no
+                <code>focalX</code>
+                or
+                <code>NuxtImg</code>
+                wiring needed.
+              </p>
+              <dl class="sri-props">
+                <dt>component</dt>
+                <dd>ScrollRevealFrame</dd>
+                <dt>frameHeight</dt>
+                <dd>480px</dd>
+                <dt>parallaxOffset</dt>
+                <dd>36rem</dd>
+              </dl>
+            </div>
+            <ScrollRevealFrame frame-height="480px" parallax-offset="36rem">
+              <div class="sri-image-grid">
+                <div class="sri-image-grid__cell">
+                  <NuxtImg
+                    src="/images/services/service-balayage.jpg"
+                    alt="Balayage service"
+                    :width="800"
+                    :height="800"
+                    loading="lazy"
+                    decoding="async"
+                    class="sri-image-grid__img"
+                  />
+                </div>
+                <div class="sri-image-grid__cell">
+                  <NuxtImg
+                    src="/images/services/service-colour.jpg"
+                    alt="Colour service"
+                    :width="800"
+                    :height="800"
+                    loading="lazy"
+                    decoding="async"
+                    class="sri-image-grid__img"
+                  />
+                </div>
+                <div class="sri-image-grid__cell">
+                  <NuxtImg
+                    src="/images/services/service-cut.jpg"
+                    alt="Cut service"
+                    :width="800"
+                    :height="800"
+                    loading="lazy"
+                    decoding="async"
+                    class="sri-image-grid__img"
+                  />
+                </div>
+                <div class="sri-image-grid__cell">
+                  <NuxtImg
+                    src="/images/services/service-highlights.jpg"
+                    alt="Highlights service"
+                    :width="800"
+                    :height="800"
+                    loading="lazy"
+                    decoding="async"
+                    class="sri-image-grid__img"
+                  />
+                </div>
+                <div class="sri-image-grid__cell">
+                  <NuxtImg
+                    src="/images/services/service-lowlights.jpg"
+                    alt="Lowlights service"
+                    :width="800"
+                    :height="800"
+                    loading="lazy"
+                    decoding="async"
+                    class="sri-image-grid__img"
+                  />
+                </div>
+                <div class="sri-image-grid__cell">
+                  <NuxtImg
+                    src="/images/services/service-toner.jpg"
+                    alt="Toner service"
+                    :width="800"
+                    :height="800"
+                    loading="lazy"
+                    decoding="async"
+                    class="sri-image-grid__img"
+                  />
+                </div>
+              </div>
+            </ScrollRevealFrame>
+          </div>
+        </LayoutRow>
+      </template>
+    </NuxtLayout>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { IFormMultipleOptions } from "~/types/forms/types.forms";
+
+definePageMeta({
+  layout: false,
+});
+
+useHead({
+  title: "ScrollRevealImage / ScrollRevealFrame",
+  meta: [
+    {
+      name: "description",
+      content: "ScrollRevealImage and ScrollRevealFrame — pure-CSS parallax scroll reveal effect demo",
+    },
+  ],
+  bodyAttrs: {
+    class: "scroll-reveal-image-page",
+  },
+});
+
+const frameHeight = ref("540px");
+const parallaxOffset = ref("36rem");
+const focalX = ref("50%");
+const radius = ref("0px");
+
+const frameHeightData = ref<IFormMultipleOptions>({
+  data: [
+    { id: "fh-320", name: "frameHeight", value: "320px", label: "320px" },
+    { id: "fh-540", name: "frameHeight", value: "540px", label: "540px" },
+    { id: "fh-60vh", name: "frameHeight", value: "60vh", label: "60vh" },
+    { id: "fh-80vh", name: "frameHeight", value: "80vh", label: "80vh" },
+  ],
+  total: 4,
+  skip: 0,
+  limit: 4,
+});
+
+const parallaxOffsetData = ref<IFormMultipleOptions>({
+  data: [
+    { id: "po-20", name: "parallaxOffset", value: "20rem", label: "20rem" },
+    { id: "po-36", name: "parallaxOffset", value: "36rem", label: "36rem" },
+    { id: "po-48", name: "parallaxOffset", value: "48rem", label: "48rem" },
+    { id: "po-60", name: "parallaxOffset", value: "60rem", label: "60rem" },
+  ],
+  total: 4,
+  skip: 0,
+  limit: 4,
+});
+
+const focalXData = ref<IFormMultipleOptions>({
+  data: [
+    { id: "fx-left", name: "focalX", value: "20%", label: "left" },
+    { id: "fx-center", name: "focalX", value: "50%", label: "center" },
+    { id: "fx-right", name: "focalX", value: "80%", label: "right" },
+  ],
+  total: 3,
+  skip: 0,
+  limit: 3,
+});
+
+const radiusData = ref<IFormMultipleOptions>({
+  data: [
+    { id: "r-0", name: "radius", value: "0px", label: "none" },
+    { id: "r-8", name: "radius", value: "0.8rem", label: "0.8rem" },
+    { id: "r-16", name: "radius", value: "1.6rem", label: "1.6rem" },
+    { id: "r-24", name: "radius", value: "2.4rem", label: "2.4rem" },
+  ],
+  total: 4,
+  skip: 0,
+  limit: 4,
+});
+</script>
+
+<style lang="css">
+.scroll-reveal-image-page {
+  .sri-demo-row {
+    display: grid;
+    grid-template-columns: 1fr;
+    gap: 3.2rem;
+    align-items: start;
+
+    @media (width >= 768px) {
+      grid-template-columns: 1fr 2fr;
+    }
+
+    &__info {
+      position: sticky;
+      top: 2.4rem;
+    }
+  }
+
+  .sri-props {
+    display: grid;
+    grid-template-columns: auto 1fr;
+    gap: 0.4rem 1.2rem;
+    font-size: 1.3rem;
+    margin: 0;
+
+    dt {
+      color: var(--slate-07);
+      font-family: monospace;
+    }
+
+    dd {
+      margin: 0;
+      font-family: monospace;
+      color: var(--slate-10);
+    }
+  }
+
+  .sri-image-grid {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    grid-template-rows: repeat(2, 1fr);
+    gap: 0.4rem;
+    height: 100%;
+  }
+
+  .sri-image-grid__cell {
+    overflow: hidden;
+    min-height: 0;
+  }
+
+  .sri-image-grid__img {
+    display: block;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+
+  .demo-controls {
+    padding: 1.6rem;
+    border: 1px solid var(--slate-06);
+    border-radius: 0.8rem;
+    margin-block: 2.4rem;
+
+    &__heading {
+      font-size: 1.1rem;
+      font-weight: 600;
+      text-transform: uppercase;
+      letter-spacing: 0.08em;
+      color: var(--slate-08);
+      margin-block-end: 1.2rem;
+    }
+
+    &__fields {
+      display: flex;
+      flex-direction: column;
+      gap: 1.2rem;
+    }
+  }
+}
+</style>

package/app/types/types.services.ts

@@ -2,6 +2,7 @@ import type { TextConfig } from "~/types/components/hero-text";
 
 export interface Service {
   slug: string;
+  category: string;
   title: string;
   subtitle: string;
   price: string;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "srcdev-nuxt-components",
   "type": "module",
-  "version": "9.1.28",
+  "version": "9.1.30",
   "main": "nuxt.config.ts",
   "types": "types.d.ts",
   "license": "MIT",

package/app/assets/styles/extends-layer/srcdev-components/components/_display-prompt-core.css

@@ -1,94 +0,0 @@
-.srcdev-components-extended {
-  .display-prompt-core {
-    .display-prompt-wrapper {
-      background-color: var(--colour-theme-8);
-      border: 0px solid transparent;
-      border-radius: 4px;
-      border-start-start-radius: 8px;
-      border-end-start-radius: 8px;
-      padding-inline-start: 8px;
-
-      &:not(.dark) {
-        &.outlined {
-          border: 1px solid var(--colour-theme-8);
-        }
-      }
-
-      &.dark {
-        border-width: 0;
-
-        .display-prompt-inner {
-          background-color: var(--slate-10);
-        }
-
-        &.outlined {
-          border: 1px solid var(--colour-theme-8);
-        }
-      }
-
-      .display-prompt-inner {
-        align-items: center;
-        gap: 12px;
-        padding-block: 1rem;
-        padding-inline: 1.5rem;
-
-        border-start-start-radius: 8px;
-        border-end-start-radius: 8px;
-        background-color: var(--colour-theme-10);
-
-        .display-prompt-icon {
-          .icon {
-            color: var(--colour-theme-0);
-            font-size: 3rem;
-            font-style: normal;
-            font-weight: normal;
-          }
-        }
-
-        .display-prompt-content {
-          gap: 1rem;
-          margin: 0;
-          padding: 0.2rem;
-
-          .title {
-            font-size: var(--step-5);
-            font-weight: bold;
-            line-height: 1.3;
-            color: var(--colour-theme-0);
-            margin: 0;
-            padding: 0;
-          }
-
-          .text {
-            font-size: var(--step-4);
-            font-weight: normal;
-            line-height: 1.3;
-            color: var(--colour-theme-0);
-            margin: 0;
-            padding: 0;
-          }
-        }
-        .display-prompt-action {
-          background-color: transparent;
-          align-items: center;
-          margin: 1rem;
-          padding: 0.5rem;
-          border: 0.1rem solid var(--colour-theme-8);
-          border-radius: 50%;
-          outline: 1px solid var(--colour-theme-3);
-
-          &:hover {
-            cursor: pointer;
-          }
-
-          .icon {
-            color: var(--colour-theme-0);
-            font-size: var(--step-5);
-            border: 1px solid green;
-            padding: 1rem;
-          }
-        }
-      }
-    }
-  }
-}

package/app/assets/styles/extends-layer/srcdev-components/components/_display-toast.css

@@ -1,5 +0,0 @@
-.srcdev-components-extended {
-  .display-toast {
-    /* Extend styles for the display toast component */
-  }
-}

package/app/assets/styles/extends-layer/srcdev-components/components/_expanding-panel.css

@@ -1,37 +0,0 @@
-.srcdev-components-extended {
-  .expanding-panel {
-    .expanding-panel-details {
-      .expanding-panel-summary {
-        &::-webkit-details-marker,
-        &::marker {
-          display: none;
-        }
-
-        .label-wrapper {
-        }
-        .icon-wrapper {
-          .icon {
-          }
-        }
-      }
-
-      &[open] {
-        .expanding-panel-summary {
-          .icon-wrapper {
-            .icon {
-            }
-          }
-        }
-        + .expanding-panel-content {
-          .inner {
-          }
-        }
-      }
-    }
-
-    .expanding-panel-content {
-      .inner {
-      }
-    }
-  }
-}

package/app/assets/styles/extends-layer/srcdev-components/components/index.css

@@ -1,3 +0,0 @@
-@import "./_display-prompt-core";
-@import "./_expanding-panel";
-@import "./_display-toast";

package/app/assets/styles/extends-layer/srcdev-components/index.css

@@ -1 +0,0 @@
-@import "./components";

package/app/assets/styles/extends-layer/srcdev-forms/components/_form-fieldset.css

@@ -1,38 +0,0 @@
-.srcdev-forms-extended {
-  .form-fieldset {
-    margin: 0;
-    padding: 0;
-    border: 0;
-
-    &.single-checkbox-fieldset {
-    }
-
-    &.multiple-checkboxes-fieldset {
-    }
-
-    &.multiple-radiobuttons-fieldset {
-    }
-
-    .form-fieldset-legend {
-      color: var(--form-fieldset-legend-color);
-      margin-block: 0.8rem;
-      font-size: var(--step-5);
-      font-weight: normal;
-      line-height: 1.5;
-
-      &.has-description {
-        margin-bottom: 0;
-      }
-    }
-
-    .form-fieldset-description {
-      font-size: 1.6rem;
-      margin-top: 1.2rem;
-    }
-
-    .form-fieldset-content {
-      margin-block-start: 0;
-      margin-block-end: 0;
-    }
-  }
-}