srcdev-nuxt-components 9.3.6 → 9.3.8

package/app/pages/ui/price-list.vue

@@ -1,65 +0,0 @@
-<template>
-  <div>
-    <NuxtLayout name="default">
-      <template #layout-content>
-        <PageRow tag="div" variant="content" :style-class-passthrough="['mbe-20']">
-          <HeroText
-            :tag="'h1'"
-            font-size="display"
-            :text-content="[{ text: 'Price List' }]"
-            :style-class-passthrough="['mbe-20']"
-          />
-          <p class="page-body-normal">Example of a services card grid component.</p>
-        </PageRow>
-
-        <PageRow tag="div" variant="content" :style-class-passthrough="['mbe-20']">
-          <PriceList :price-list-data="priceListData" :style-class-passthrough="['mbe-20']" />
-        </PageRow>
-      </template>
-    </NuxtLayout>
-  </div>
-</template>
-
-<script setup lang="ts">
-definePageMeta({
-  layout: false,
-});
-
-useHead({
-  title: "Price List",
-  meta: [{ name: "description", content: "Price List" }],
-  bodyAttrs: {
-    class: "price-list-page",
-  },
-});
-
-const priceListData = [
-  {
-    headingtext: "Cutting & Treatment",
-    headingIcon: "lucide:sparkles",
-    items: [
-      { description: "Cut & Blow Dry", price: "£45" },
-      { description: "Restyle", price: "£65" },
-      { description: "Wash & Blow Dry", price: "£35" },
-      { description: "Trim & Tidy", price: "£25" },
-      { description: "Keratin Treatment", price: "£120" },
-    ],
-  },
-  {
-    headingtext: "Hair Colouring",
-    headingIcon: "lucide:sparkles",
-    items: [
-      { description: "Full Head Colour", price: "£75" },
-      { description: "Half Head Highlights", price: "£65" },
-      { description: "Full Head Highlights", price: "£85" },
-      { description: "Balayage", price: "£95" },
-      { description: "Toner", price: "£35" },
-    ],
-  },
-];
-</script>
-
-<style lang="css">
-.price-list-page {
-}
-</style>

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

@@ -1,142 +0,0 @@
-<template>
-  <div>
-    <NuxtLayout name="default">
-      <template #layout-content>
-        <PageRow tag="div" variant="content" :style-class-passthrough="['mbe-20']">
-          <h2 class="page-heading-2">Profile Section</h2>
-        </PageRow>
-
-        <PageRow tag="div" variant="content" :style-class-passthrough="['mbe-20']">
-          <ProfileSection
-            :profile-picture="{
-              src: '/images/services/service-balayage.jpg',
-              alt: 'Profile picture of Natasha, the mobile hairdresser in Bath',
-            }"
-          >
-            <template #eyebrowText>
-              <EyebrowText tag="p" font-size="large" text-content="About Natasha" :style-class-passthrough="['mb-0']" />
-            </template>
-            <template #heroText="{ headingId }">
-              <HeroText
-                :id="headingId"
-                tag="h2"
-                axis="vertical"
-                font-size="display"
-                :text-content="[
-                  { text: 'Your', styleClass: 'normal' },
-                  { text: 'mobile hairdresser', styleClass: 'accent' },
-                  { text: 'in Bath', styleClass: 'normal' },
-                ]"
-                :style-class-passthrough="['mb-20']"
-              />
-            </template>
-
-            <template #profile-info-1>
-              <p class="page-body-medium experience">
-                With over 10 years' experience, I offer a range of professional and luxurious, one-to-one hairdressing
-                services - from beautiful blow-drys to classy colours and cuts.
-              </p>
-            </template>
-
-            <template #profile-info-2>
-              <p class="page-body-normal location">
-                Welcome to your trusted mobile hairdresser in Bath, offering expert hair services in the comfort of your
-                own home. Whether you're based in the heart of Bath or in nearby areas like
-                <span class="highlight">Lansdown</span>
-                ,
-                <span class="highlight">Widcombe</span>
-                , or
-                <span class="highlight">Oldfield Park</span>
-                , I bring high-quality, salon-style hairdressing directly to you.
-              </p>
-            </template>
-
-            <template #profile-info-3>
-              <p class="page-body-normal services">
-                From
-                <NuxtLink to="/ui/services/services-section/balayage" class="highlight">balayage</NuxtLink>
-                ,
-                <NuxtLink to="/ui/services/services-section/highlights" class="highlight">highlights</NuxtLink>
-                , and
-                <NuxtLink to="/ui/services/services-section/lowlights" class="highlight">lowlights</NuxtLink>
-                to precision cuts and stylish blow-dries, I provide a full range of personalised hair services without
-                the need to step outside. Perfect for busy schedules, home comfort, or anyone who prefers a one-on-one
-                hair experience - wherever you are in Bath.
-              </p>
-            </template>
-
-            <template #profile-info-4>
-              <HeroText
-                tag="h3"
-                axis="horizontal"
-                font-size="heading"
-                :text-content="[
-                  { text: 'Follow me on', styleClass: 'normal' },
-                  { text: 'social media', styleClass: 'accent' },
-                ]"
-                :style-class-passthrough="['mb-20']"
-              />
-              <SocialIconsList
-                :items="[
-                  {
-                    networkName: 'Facebook',
-                    iconName: 'logos:facebook',
-                    baseHref: 'https://www.facebook.com/',
-                    profileId: 'luxurylocsbynatasha',
-                  },
-                  {
-                    networkName: 'Instagram',
-                    iconName: 'skill-icons:instagram',
-                    baseHref: 'https://www.instagram.com/',
-                    profileId: 'luxurylocsbynatasha',
-                  },
-                ]"
-              />
-            </template>
-
-            <template #profileLinks>
-              <InputButtonCore
-                variant="secondary"
-                button-text="View all services"
-                href="/ui/services/services-card"
-                :style-class-passthrough="['mbs-0']"
-              >
-                <template #right>
-                  <Icon name="mdi:arrow-right" class="icon" />
-                </template>
-              </InputButtonCore>
-            </template>
-          </ProfileSection>
-        </PageRow>
-      </template>
-    </NuxtLayout>
-  </div>
-</template>
-
-<script setup lang="ts">
-definePageMeta({
-  layout: false,
-});
-
-useHead({
-  title: "ColourFinder",
-  meta: [
-    {
-      name: "description",
-      content: "ColourFinder Meta description content",
-    },
-  ],
-  bodyAttrs: {
-    class: "profile-section-page",
-  },
-});
-</script>
-
-<style lang="css">
-.profile-section-page {
-  .profile-section {
-    max-inline-size: 800px;
-    margin-inline: auto;
-  }
-}
-</style>

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

@@ -1,218 +0,0 @@
-<template>
-  <div>
-    <NuxtLayout name="default">
-      <template #layout-content>
-        <PageRow tag="div" variant="full" :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>
-        </PageRow>
-
-        <PageRow tag="div" variant="full" :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>
-        </PageRow>
-
-        <PageRow tag="div" variant="full" :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>
-        </PageRow>
-      </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/02.molecules/qr-code/DecodeQrCode.vue"));
-const CaptureQrCode = defineAsyncComponent(() => import("~/components/02.molecules/qr-code/CaptureQrCode.vue"));
-const DisplayQrCode = defineAsyncComponent(() => import("~/components/01.atoms/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

@@ -1,154 +0,0 @@
-<template>
-  <div>
-    <NuxtLayout name="default">
-      <template #layout-content>
-        <PageRow 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>
-        </PageRow>
-
-        <PageRow tag="div" variant="full" :styleClassPassthrough="['mbe-20']" style="margin-block: 300px">
-          <RotatingCarouselImage
-            :data
-            :rotateX="Number(rotateX)"
-            :perspective="Number(perspective)"
-            :translateZ="Number(translateZ)"
-            :pauseOnHover
-            :useParallaxEffect
-          />
-        </PageRow>
-
-        <PageRow 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>
-        </PageRow>
-      </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>