srcdev-nuxt-components 8.0.2 → 9.0.0

package/app/pages/ui/qr-code/[componentName].vue

@@ -0,0 +1,218 @@
+<template>
+  <div>
+    <NuxtLayout name="default">
+      <template #layout-content>
+        <LayoutRow tag="div" variant="full-width" :style-class-passthrough="['mbe-20']">
+          <h2 class="page-heading-2">Index</h2>
+          <p class="page-body-normal">This is the index page for the QR Code component: {{ componentName }}</p>
+        </LayoutRow>
+
+        <LayoutRow tag="div" variant="full-width" :style-class-passthrough="['mbe-20']">
+          <ul class="qr-code-index-links-list">
+            <li><NuxtLink to="/ui/qr-code/display">Display QR Code</NuxtLink></li>
+            <li><NuxtLink to="/ui/qr-code/capture">Capture QR Code</NuxtLink></li>
+            <li><NuxtLink to="/ui/qr-code/decode">Decode QR Code</NuxtLink></li>
+          </ul>
+        </LayoutRow>
+
+        <LayoutRow tag="div" variant="full-width" :style-class-passthrough="['mbe-20']">
+          <h2 class="page-heading-2 pbe-20">{{ pageHeader }}</h2>
+          <div class="demo-panel">
+            <div class="qr-code-col">
+              <component :is="activeComponent" :key="componentName" v-bind="activeProps" />
+            </div>
+            <form v-if="componentName === 'display'">
+              <div class="form-group mbe-12">
+                <label for="qr-value-input">QR Code Value:</label>
+                <input id="qr-value-input" v-model="qrValue" type="text" class="form-control" />
+              </div>
+
+              <div class="form-group mbe-12">
+                <label for="inner-variant-select">Inner Variant:</label>
+                <select id="inner-variant-select" v-model="variant.inner" class="form-control">
+                  <option value="default">Default</option>
+                  <option value="circle">Circle</option>
+                  <option value="pixelated">Pixelated</option>
+                  <option value="rounded">Rounded</option>
+                  <option value="dots">Dots</option>
+                </select>
+              </div>
+
+              <div class="form-group mbe-12">
+                <label for="marker-variant-select">Marker Variant:</label>
+                <select id="marker-variant-select" v-model="variant.marker" class="form-control">
+                  <option value="default">Default</option>
+                  <option value="circle">Circle</option>
+                  <option value="pixelated">Pixelated</option>
+                  <option value="rounded">Rounded</option>
+                  <option value="dots">Dots</option>
+                </select>
+              </div>
+
+              <div class="form-group mbe-12">
+                <label for="pixel-variant-select">Pixel Variant:</label>
+                <select id="pixel-variant-select" v-model="variant.pixel" class="form-control">
+                  <option value="default">Default</option>
+                  <option value="circle">Circle</option>
+                  <option value="pixelated">Pixelated</option>
+                  <option value="rounded">Rounded</option>
+                  <option value="dots">Dots</option>
+                </select>
+              </div>
+
+              <div class="form-group mbe-12">
+                <label for="radius-input">Radius:</label>
+                <input id="radius-input" v-model.number="radius" type="number" class="form-control" min="0" max="10" />
+              </div>
+
+              <div class="form-group mbe-12">
+                <label for="black-color-input">Black Color:</label>
+                <input id="black-color-input" v-model="blackColor" type="color" class="form-control" />
+              </div>
+
+              <div class="form-group mbe-12">
+                <label for="white-color-input">White Color:</label>
+                <input id="white-color-input" v-model="whiteColor" type="color" class="form-control" />
+              </div>
+
+              <div class="form-group mbe-12">
+                <label for="size-slider">Size: {{ sizeValue }}px</label>
+                <input
+                  id="size-slider"
+                  v-model.number="sizeValue"
+                  type="range"
+                  class="form-control"
+                  min="150"
+                  max="600"
+                  step="25"
+                />
+              </div>
+            </form>
+          </div>
+        </LayoutRow>
+      </template>
+    </NuxtLayout>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { QrCodeVariant } from "~/types/components";
+
+definePageMeta({
+  layout: false,
+});
+
+useHead({
+  title: "Index",
+  meta: [
+    {
+      name: "description",
+      content: "Index Meta description content",
+    },
+  ],
+  bodyAttrs: {
+    class: "qr-codes-index-page",
+  },
+});
+
+const route = useRoute();
+
+type QrComponentName = "decode" | "capture" | "display";
+const componentName = computed<QrComponentName>(() => route.params.componentName as QrComponentName);
+
+// Component set up
+const DecodeQrCode = defineAsyncComponent(() => import("~/components/qr-code/DecodeQrCode.vue"));
+const CaptureQrCode = defineAsyncComponent(() => import("~/components/qr-code/CaptureQrCode.vue"));
+const DisplayQrCode = defineAsyncComponent(() => import("~/components/qr-code/DisplayQrCode.vue"));
+
+const components: Record<
+  QrComponentName,
+  {
+    component: ReturnType<typeof defineAsyncComponent>;
+    props: () => Record<string, unknown>;
+  }
+> = {
+  decode: {
+    component: DecodeQrCode,
+    props: () => ({
+      /* none needed */
+    }),
+  },
+  capture: {
+    component: CaptureQrCode,
+    props: () => ({ facingMode: "environment" }),
+  },
+  display: {
+    component: DisplayQrCode,
+    props: () => ({
+      qrValue: qrValue.value,
+      inputVariant: variant.value,
+      radius: radius.value,
+      blackColor: blackColor.value,
+      whiteColor: whiteColor.value,
+      size: size.value,
+    }),
+  },
+};
+
+// Config for display qr code
+const pageHeader = computed(() => {
+  switch (componentName.value) {
+    case "decode":
+      return "Decode QR Code";
+    case "capture":
+      return "Capture QR Code";
+    case "display":
+      return "Display QR Code";
+    default:
+      return "QR Code";
+  }
+});
+
+const qrValue = ref("P|7450952822|144392");
+const variant = ref<QrCodeVariant>({
+  inner: "circle",
+  marker: "rounded",
+  pixel: "dots",
+});
+const radius = ref(2);
+const blackColor = ref("#000000");
+const whiteColor = ref("#ffffff");
+const sizeValue = ref(300);
+const size = computed(() => `${sizeValue.value}px`);
+
+const activeComponent = computed(() => components[componentName.value]?.component);
+const activeProps = computed(() => components[componentName.value]?.props?.() ?? {});
+</script>
+
+<style lang="css">
+.qr-codes-index-page {
+  .demo-panel {
+    display: flex;
+    flex-direction: row-reverse;
+    gap: 16px;
+    align-items: start;
+
+    .qr-code-col {
+      flex-grow: 1;
+    }
+
+    form {
+      .form-group {
+        display: grid;
+        grid-template-columns: 150px 1fr;
+        gap: 20px;
+      }
+    }
+  }
+
+  .qr-code-index-links-list {
+    display: flex;
+    gap: 12px;
+
+    list-style-type: none;
+    padding: 0;
+    margin: 0;
+  }
+}
+</style>

package/app/pages/ui/rotating-carousel.vue

@@ -0,0 +1,154 @@
+<template>
+  <div>
+    <NuxtLayout name="default">
+      <template #layout-content>
+        <LayoutRow tag="div" variant="full" :styleClassPassthrough="['mbe-20']">
+          <h1 class="page-heading-2">Rotating Carousel</h1>
+          <div class="display-flex mbe-12" align-content="center-center" gap="12px" flex-wrap="wrap">
+            <div class="display-flex mbe-12" align-content="center-center" gap="12px" flex-wrap="wrap">
+              <label for="rotateX">rotateX</label>
+              <input type="range" min="-20" max="20" step="1" v-model="rotateX" id="rotateX" />
+              <span>{{ rotateX }}deg</span>
+            </div>
+            <div class="display-flex mbe-12" align-content="center-center" gap="12px" flex-wrap="wrap">
+              <label for="perspective">perspective</label>
+              <input type="range" min="600" max="1500" step="50" v-model="perspective" id="perspective" />
+              <span>{{ perspective }}px</span>
+            </div>
+            <div class="display-flex mbe-12" align-content="center-center" gap="12px" flex-wrap="wrap">
+              <label for="translateZ">translateZ</label>
+              <input type="range" min="350" max="900" step="10" v-model="translateZ" id="translateZ" />
+              <span>{{ translateZ }}px</span>
+            </div>
+            <div class="display-flex mbe-12" align-content="center-center" gap="12px" flex-wrap="wrap">
+              <label for="pauseOnHover">pauseOnHover</label>
+              <input type="checkbox" v-model="pauseOnHover" id="pauseOnHover" />
+              <span>{{ pauseOnHover }}</span>
+            </div>
+            <div class="display-flex mbe-12" align-content="center-center" gap="12px" flex-wrap="wrap">
+              <label for="useParallaxEffect">useParallaxEffect</label>
+              <input type="checkbox" v-model="useParallaxEffect" id="useParallaxEffect" />
+              <span>{{ useParallaxEffect }}</span>
+            </div>
+          </div>
+        </LayoutRow>
+
+        <LayoutRow tag="div" variant="full" :styleClassPassthrough="['mbe-20']" style="margin-block: 300px">
+          <RotatingCarouselImage
+            :data
+            :rotateX="Number(rotateX)"
+            :perspective="Number(perspective)"
+            :translateZ="Number(translateZ)"
+            :pauseOnHover
+            :useParallaxEffect
+          />
+        </LayoutRow>
+
+        <LayoutRow tag="div" variant="full" :styleClassPassthrough="['mbe-20']" style="margin-block-end: 600px">
+          <div class="display-flex mbe-12" align-content="center-center" gap="12px" flex-wrap="wrap">
+            <div class="display-flex mbe-12" align-content="center-center" gap="12px" flex-wrap="wrap">
+              <label for="rotateX">rotateX</label>
+              <input type="range" min="-20" max="20" step="1" v-model="rotateX" id="rotateX" />
+              <span>{{ rotateX }}deg</span>
+            </div>
+            <div class="display-flex mbe-12" align-content="center-center" gap="12px" flex-wrap="wrap">
+              <label for="perspective">perspective</label>
+              <input type="range" min="600" max="1500" step="50" v-model="perspective" id="perspective" />
+              <span>{{ perspective }}px</span>
+            </div>
+            <div class="display-flex mbe-12" align-content="center-center" gap="12px" flex-wrap="wrap">
+              <label for="translateZ">translateZ</label>
+              <input type="range" min="350" max="900" step="10" v-model="translateZ" id="translateZ" />
+              <span>{{ translateZ }}px</span>
+            </div>
+            <div class="display-flex mbe-12" align-content="center-center" gap="12px" flex-wrap="wrap">
+              <label for="pauseOnHover">pauseOnHover</label>
+              <input type="checkbox" v-model="pauseOnHover" id="pauseOnHover" />
+              <span>{{ pauseOnHover }}</span>
+            </div>
+            <div class="display-flex mbe-12" align-content="center-center" gap="12px" flex-wrap="wrap">
+              <label for="useParallaxEffect">useParallaxEffect</label>
+              <input type="checkbox" v-model="useParallaxEffect" id="useParallaxEffect" />
+              <span>{{ useParallaxEffect }}</span>
+            </div>
+          </div>
+        </LayoutRow>
+      </template>
+    </NuxtLayout>
+  </div>
+</template>
+
+<script setup lang="ts">
+definePageMeta({
+  layout: false,
+})
+
+useHead({
+  title: "Browser title tag",
+  meta: [
+    {
+      name: "description",
+      content: "Meta description content",
+    },
+  ],
+  bodyAttrs: {
+    class: "classname-for-namespacing-if-desired",
+  },
+})
+
+const perspective = ref<number>(1000)
+const rotateX = ref<number>(-13)
+const translateZ = ref<number>(550)
+const pauseOnHover = ref<boolean>(false)
+const useParallaxEffect = ref<boolean>(true)
+
+interface IAccordianData {
+  src: string
+  alt: string
+}
+
+const data = ref<IAccordianData[]>([
+  {
+    src: "/images/rotating-carousel/image-1.webp",
+    alt: "Image 1",
+  },
+  {
+    src: "/images/rotating-carousel/image-2.webp",
+    alt: "Image 2",
+  },
+  {
+    src: "/images/rotating-carousel/image-3.webp",
+    alt: "Image 3",
+  },
+  {
+    src: "/images/rotating-carousel/image-4.webp",
+    alt: "Image 4",
+  },
+  {
+    src: "/images/rotating-carousel/image-5.webp",
+    alt: "Image 5",
+  },
+  {
+    src: "/images/rotating-carousel/image-6.webp",
+    alt: "Image 6",
+  },
+  {
+    src: "/images/rotating-carousel/image-7.webp",
+    alt: "Image 7",
+  },
+  {
+    src: "/images/rotating-carousel/image-8.webp",
+    alt: "Image 8",
+  },
+  {
+    src: "/images/rotating-carousel/image-9.webp",
+    alt: "Image 9",
+  },
+])
+</script>
+
+<style lang="css">
+.classname-for-namespacing-if-desired {
+  /* CSS styles */
+}
+</style>

package/app/pages/ui/section-parallax.vue

@@ -0,0 +1,54 @@
+<template>
+  <div>
+    <NuxtLayout name="default">
+      <template #layout-content>
+        <LayoutRow tag="div" variant="full-width" :style-class-passthrough="['expanding-panel-section', 'mbe-20']">
+          <h1 class="page-heading-1">SectionParallax Component</h1>
+          <p class="mbe-12">Static image displayed as page scrolls through it.</p>
+        </LayoutRow>
+        <SectionParallax
+          background-image="/images/rotating-carousel/image-3.webp"
+          :style-class-passthrough="['mbe-20']"
+        >
+          <LayoutRow tag="div" variant="full-width" :style-class-passthrough="['expanding-panel-section', 'mbe-20']">
+            <h1 class="page-heading-1">SectionParallax Content</h1>
+            <p class="page-body-normal">This is default slot content for the SectionParallax component.</p>
+            <p class="page-body-normal">As it's a slot, any html content can be placed here.</p>
+          </LayoutRow>
+        </SectionParallax>
+      </template>
+    </NuxtLayout>
+  </div>
+</template>
+
+<script setup lang="ts">
+definePageMeta({
+  layout: false,
+})
+
+useHead({
+  title: "SectionParallax Component",
+  meta: [
+    {
+      name: "description",
+      content: "SectionParallax Component description content",
+    },
+  ],
+  bodyAttrs: {
+    class: "section-parallax-page",
+  },
+})
+
+const forceOpened = ref(false)
+</script>
+
+<style lang="css">
+.section-parallax-page {
+  /* Page specific styles */
+
+  margin-block-end: 100vh;
+
+  .section-parallax {
+  }
+}
+</style>

package/app/pages/ui/services/colour-finder.vue

@@ -0,0 +1,43 @@
+<template>
+  <div>
+    <NuxtLayout name="default">
+      <template #layout-content>
+        <LayoutRow tag="div" variant="content" :style-class-passthrough="['mbe-20']">
+          <h2 class="page-heading-2">ColourFinder</h2>
+        </LayoutRow>
+
+        <LayoutRow tag="div" variant="content" :style-class-passthrough="['mbe-20']">
+          <ColourFinder />
+        </LayoutRow>
+      </template>
+    </NuxtLayout>
+  </div>
+</template>
+
+<script setup lang="ts">
+definePageMeta({
+  layout: false,
+});
+
+useHead({
+  title: "ColourFinder",
+  meta: [
+    {
+      name: "description",
+      content: "ColourFinder Meta description content",
+    },
+  ],
+  bodyAttrs: {
+    class: "colour-finder-page",
+  },
+});
+</script>
+
+<style lang="css">
+.colour-finder-page {
+  .colour-finder {
+    max-inline-size: 800px;
+    margin-inline: auto;
+  }
+}
+</style>

package/app/pages/ui/services/services-cards.vue

@@ -0,0 +1,42 @@
+<template>
+  <div>
+    <NuxtLayout name="default">
+      <template #layout-content>
+        <LayoutRow tag="div" variant="content" :style-class-passthrough="['mbe-20']">
+          <h1 class="page-heading-1">Services Card Grid</h1>
+          <p class="page-body-normal">Example of a services card grid component.</p>
+        </LayoutRow>
+
+        <LayoutRow tag="div" variant="content" :style-class-passthrough="['mbe-20']">
+          <ServicesCardGrid :services-data="servicesData ?? []" />
+        </LayoutRow>
+      </template>
+    </NuxtLayout>
+  </div>
+</template>
+
+<script setup lang="ts">
+definePageMeta({
+  layout: false,
+});
+
+useHead({
+  title: "Services Card Grid",
+  meta: [{ name: "description", content: "Services Card Grid" }],
+  bodyAttrs: {
+    class: "page-services-card-grid",
+  },
+});
+
+const store = useServicesStore();
+const { servicesData } = storeToRefs(store);
+
+if (servicesData.value.length === 0) {
+  await store.fetchServicesData();
+}
+</script>
+
+<style lang="css">
+.page-services-card-grid {
+}
+</style>

package/app/pages/ui/services/services-section/[slug].vue

@@ -0,0 +1,59 @@
+<template>
+  <div>
+    <NuxtLayout name="default">
+      <template #layout-content>
+        <LayoutRow tag="div" variant="content" :style-class-passthrough="['mbe-20']">
+          <EyebrowText font-size="large" text-content="Services" />
+
+          <HeroText
+            tag="h1"
+            axis="vertical"
+            font-size="display"
+            :text-content="[
+              { text: 'Expert colour & ', styleClass: 'normal' },
+              { text: 'styling', styleClass: 'accent' },
+              { text: 'at your door', styleClass: 'normal' },
+            ]"
+            :style-class-passthrough="['mb-20']"
+          />
+
+          <p class="page-body-normal"><NuxtLink to="/ui/services/services-cards">Back to Services</NuxtLink></p>
+        </LayoutRow>
+
+        <LayoutRow tag="div" variant="content" :style-class-passthrough="['mbe-20']">
+          <ServicesSection v-if="servicesData.length > 0 && serviceData" :service-data="serviceData!" />
+        </LayoutRow>
+      </template>
+    </NuxtLayout>
+  </div>
+</template>
+
+<script setup lang="ts">
+definePageMeta({
+  layout: false,
+});
+
+useHead({
+  title: "Services Section",
+  meta: [{ name: "description", content: "Services Section" }],
+  bodyAttrs: {
+    class: "page-services-section",
+  },
+});
+
+const route = useRoute();
+const slug = route.params.slug as string;
+
+const store = useServicesStore();
+const { servicesData } = storeToRefs(store);
+
+if (servicesData.value.length === 0) {
+  await store.fetchServicesData();
+}
+const serviceData = store.serviceDataBySlug(slug);
+</script>
+
+<style lang="css">
+.page-services-section {
+}
+</style>

package/app/pages/ui/services/services-sections-compact.vue

@@ -0,0 +1,64 @@
+<template>
+  <div>
+    <NuxtLayout name="default">
+      <template #layout-content>
+        <LayoutRow tag="div" variant="content" :style-class-passthrough="['mbe-20']">
+          <EyebrowText font-size="large" text-content="Services" />
+          <HeroText
+            :tag="'h1'"
+            font-size="display"
+            axis="horizontal"
+            :text-content="[
+              { text: 'Expert colour & ' },
+              { text: 'styling', styleClass: 'accent' },
+              { text: ' at your door' },
+            ]"
+            :style-class-passthrough="['mbe-20']"
+          />
+        </LayoutRow>
+
+        <LayoutRow tag="div" variant="content" :style-class-passthrough="['mbe-20']">
+          <p class="page-body-medium">
+            I'm a mobile hair artist bringing bold, custom hair transformations straight to your doorstep in Bath. From
+            lived-in balayage and dimensional lowlights to face-framing highlights and precision cuts — salon-quality
+            results, zero hassle.
+          </p>
+        </LayoutRow>
+
+        <LayoutRow tag="div" variant="content" :style-class-passthrough="['mbe-20']">
+          <ServicesSectionGrid
+            :services-data="servicesData ?? []"
+            :use-alternate-reverse="true"
+            summary-alignment="center"
+          />
+        </LayoutRow>
+      </template>
+    </NuxtLayout>
+  </div>
+</template>
+
+<script setup lang="ts">
+definePageMeta({
+  layout: false,
+});
+
+useHead({
+  title: "Services Section Grid",
+  meta: [{ name: "description", content: "Services Section Grid" }],
+  bodyAttrs: {
+    class: "page-services-section-grid",
+  },
+});
+
+const store = useServicesStore();
+const { servicesData } = storeToRefs(store);
+
+if (servicesData.value.length === 0) {
+  await store.fetchServicesData();
+}
+</script>
+
+<style lang="css">
+.page-services-section-grid {
+}
+</style>

package/app/pages/ui/services/treatment-consultant.vue

@@ -0,0 +1,39 @@
+<template>
+  <div>
+    <NuxtLayout name="default">
+      <template #layout-content>
+        <LayoutRow tag="div" variant="content" :style-class-passthrough="['mbe-20']">
+          <TreatmentConsultant :auto-advance="true" :allow-multiple-treatments="true" />
+        </LayoutRow>
+      </template>
+    </NuxtLayout>
+  </div>
+</template>
+
+<script setup lang="ts">
+definePageMeta({
+  layout: false,
+});
+
+useHead({
+  title: "Treatment Consultant - ColourFinder",
+  meta: [
+    {
+      name: "description",
+      content: "Treatment Consultant Meta description content",
+    },
+  ],
+  bodyAttrs: {
+    class: "treatment-consultant-page",
+  },
+});
+</script>
+
+<style lang="css">
+.treatment-consultant-page {
+  .colour-finder {
+    max-inline-size: 800px;
+    margin-inline: auto;
+  }
+}
+</style>