srcdev-nuxt-components 8.0.3 → 9.0.1

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

@@ -0,0 +1,260 @@
+<template>
+  <div>
+    <NuxtLayout name="default">
+      <template #layout-content>
+        <LayoutRow tag="div" variant="content" :style-class-passthrough="['mbe-20']">
+          <h1 class="page-heading-2">Carousel (Infinite)</h1>
+        </LayoutRow>
+
+        <LayoutRow tag="div" variant="popout" :style-class-passthrough="['mbe-20']">
+          <CarouselInfinite
+            v-if="carouselStatus === 'success'"
+            :carousel-data-ids
+            :allow-carousel-overflow="true"
+            :return-to-start="false"
+            :transition-speed="1000"
+            :style-class-passthrough="['carousel-infinite-demo', 'mbe-20']"
+          >
+            <template v-for="(item, index) in carouselData?.items" #[item.id]>
+              <div class="case-study-item">
+                <h3>{{ index }}</h3>
+                <p>{{ item.alt }}</p>
+              </div>
+            </template>
+          </CarouselInfinite>
+        </LayoutRow>
+      </template>
+    </NuxtLayout>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { ICarouselBasic } from "~/types/components";
+
+definePageMeta({
+  layout: false,
+});
+
+useHead({
+  title: "Carousel (Infinite) Example",
+  meta: [{ name: "description", content: "Examples of Carousel (Infinite)" }],
+  bodyAttrs: {
+    class: "carousel-infinite-example-page",
+  },
+});
+
+const {
+  data: carouselData,
+  execute: carouselExecute,
+  status: carouselStatus, // See v-if on CarouselBasic
+  error: carouselError,
+} = await useFetch<ICarouselBasic>("/api/carousel", {
+  immediate: true,
+});
+
+const carouselDataStatic = {
+  items: [
+    {
+      id: 1,
+      url: "/images/spotlights/v2/dining-out.webp",
+      alt: "Dining out",
+    },
+    {
+      id: 2,
+      url: "/images/spotlights/v2/beer-gardens.webp",
+      alt: "Entertaining the kids",
+    },
+    {
+      id: 3,
+      url: "/images/spotlights/v2/will-it-rain.webp",
+      alt: "Will it rain?",
+    },
+    {
+      id: 4,
+      url: "/images/spotlights/v2/nightlife.webp",
+      alt: "Nightlife",
+    },
+    {
+      id: 5,
+      url: "/images/spotlights/v2/got-toothache-2.webp",
+      alt: "Dental Services",
+    },
+    {
+      id: 6,
+      url: "/images/spotlights/v2/days-out.webp",
+      alt: "Days Out",
+    },
+  ],
+  total: 6,
+  skip: 0,
+  limit: 4,
+};
+
+const carouselDataIds = computed(() => {
+  return carouselData.value?.items.map((item) => item.id) || [];
+  // return carouselData?.items.map((item) => item.id) || [];
+});
+</script>
+
+<style lang="css">
+@property --glow-deg {
+  syntax: "<angle>";
+  inherits: true;
+  initial-value: -90deg;
+}
+
+@keyframes glow {
+  100% {
+    --glow-deg: 270deg;
+  }
+}
+
+.carousel-infinite-demo {
+  &.carousel-infinite {
+    /* Var used in calcs */
+    --_carousel-item-track-gap: 10px;
+
+    .item-container {
+      padding-block: 10px;
+      padding-inline: 10px;
+      outline: 1px solid light-dark(var(--slate-06), var(--slate-05));
+
+      .item {
+        max-inline-size: 800px;
+
+        background-color: light-dark(var(--slate-05), var(--slate-06));
+
+        &:nth-child(odd) {
+          background-color: light-dark(var(--slate-06), var(--slate-05));
+        }
+
+        .case-study-item {
+          flex-direction: column;
+          align-items: center;
+          justify-content: center;
+
+          aspect-ratio: 4 / 3;
+          inline-size: 100%;
+
+          color: light-dark(#aaa, #333);
+          padding-block: 10px;
+          padding-inline: 10px;
+          border-radius: 4px;
+          outline: 1px solid light-dark(var(--slate-06), var(--slate-05));
+        }
+      }
+    }
+
+    .controls-container {
+      gap: 20px;
+
+      .markers-container {
+        .markers-list {
+          .markers-item {
+            line-height: 3px;
+
+            &.active {
+              background-color: light-dark(var(--slate-06), var(--slate-05));
+            }
+
+            .btn-marker {
+              width: 22px;
+              height: 3px;
+              background-color: lightgray;
+              line-height: 3px;
+
+              &.active {
+                background-color: black;
+              }
+
+              &:focus-visible {
+                outline: 1px solid light-dark(#000, #fff);
+              }
+            }
+          }
+        }
+      }
+
+      .buttons-container {
+        display: flex;
+        align-items: center;
+        justify-content: end;
+        gap: 20px;
+
+        .btn-action {
+          --gradient-glow-dark:
+            var(--slate-07), var(--slate-05), var(--slate-08), var(--slate-06), var(--slate-07), var(--slate-08),
+            var(--slate-07);
+          --gradient-glow-light: var(--slate-04), var(--slate-06), var(--slate-00), var(--slate-06), var(--slate-04);
+
+          padding-block: 10px;
+          padding-inline: 10px;
+          border-radius: 100%;
+          /* background-color: light-dark(#000, #fff); */
+          /* color: light-dark(#fff, #000); */
+
+          border: 3px solid transparent;
+          background:
+            linear-gradient(var(--surface, canvas) 0 0) padding-box,
+            conic-gradient(from var(--glow-deg), var(--gradient-glow-dark)) border-box;
+          outline: 1px solid light-dark(var(--slate-09), var(--slate-07));
+
+          position: relative;
+          isolation: isolate;
+
+          animation: glow 10s infinite linear;
+          animation-play-state: paused;
+          transition: outline-color 0.3s ease;
+
+          &::before,
+          &::after {
+            content: "";
+            position: absolute;
+            border-radius: inherit;
+          }
+
+          &::before {
+            z-index: -1;
+            background: var(--surface, canvas);
+            inset: 0.5rem;
+            scale: 1.2 1;
+            transform-origin: right;
+            filter: blur(var(--glow-size, 0.5rem));
+          }
+
+          &::after {
+            z-index: -2;
+            inset: -1.5rem;
+            background: conic-gradient(from var(--glow-deg), var(--gradient-glow-dark));
+            filter: blur(var(--glow-size, 1rem));
+            opacity: var(--glow-intensity, 0.125);
+          }
+
+          &:hover {
+            animation-play-state: running;
+            outline-color: light-dark(var(--slate-09), var(--slate-04));
+          }
+
+          .arrows-icon {
+            width: 24px;
+            height: 24px;
+
+            /* &:hover {
+              background-color: light-dark(#0009, #fff9);
+            }
+
+            &:active,
+            &.active {
+              background-color: light-dark(#0009, #fff9);
+            }
+
+            &:focus-visible {
+              outline: 1px solid light-dark(#0f0, #f0f);
+            } */
+          }
+        }
+      }
+    }
+  }
+}
+</style>

package/app/pages/ui/clipped-panels.vue

@@ -0,0 +1,101 @@
+<template>
+  <div>
+    <NuxtLayout name="default">
+      <template #layout-content>
+        <LayoutRow tag="div" variant="full-width" :style-class-passthrough="['mbe-20']">
+          <h1 class="page-heading-2">Clipped Panels</h1>
+        </LayoutRow>
+        <LayoutRow tag="div" variant="full-width" :style-class-passthrough="['mbe-20']">
+          <h2 class="page-heading-2">Rectangle</h2>
+          <ClippedPanel variant="rectangle">
+            <template #default>
+              <p>Clipped Panels Rectangle</p>
+            </template>
+          </ClippedPanel>
+        </LayoutRow>
+        <LayoutRow tag="div" variant="full-width" :style-class-passthrough="['mbe-20']">
+          <h2 class="page-heading-2">Square</h2>
+          <ClippedPanel variant="square">
+            <template #default>
+              <p>Clipped Panels Square</p>
+            </template>
+          </ClippedPanel>
+        </LayoutRow>
+        <LayoutRow tag="div" variant="full-width" :style-class-passthrough="['mbe-20']">
+          <h2 class="page-heading-2">Circle</h2>
+          <div class="counter-panel">
+            <div class="counter-panel__counter">1</div>
+            <div class="counter-panel__title">Title</div>
+            <div class="counter-panel__content">This will be the content</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",
+    },
+  ],
+})
+</script>
+
+<style scoped lang="css">
+.counter-panel {
+  display: inline-grid;
+  grid-template-areas: "select-stack";
+
+  aspect-ratio: 1;
+  width: 200px;
+
+  &:before {
+    content: "";
+    grid-area: select-stack;
+    background-color: red;
+
+    aspect-ratio: 1;
+    width: 200px;
+    /* clip-path: path(
+      'M 10, 40 L 30, 40 A 10, 10, 0, 0, 0 40, 30 L 40, 10 A 10, 10, 0, 0, 1 50, 0 L 190, 0 A 10, 10, 0, 0, 1 200, 10 L 200, 190 A 10, 10, 0, 0, 1 190, 200 L 10, 200 A 10, 10, 0, 0, 1 0, 190 L 0, 50 A 10, 10, 0, 0, 1 10, 40 Z'
+    ); */
+    clip-path: path(
+      "M 10, 40 L 20, 40 A 20, 20, 0, 0, 0 40, 20 L 40, 10 A 10, 10, 0, 0, 1 50, 0 L 190, 0 A 10, 10, 0, 0, 1 200, 10 L 200, 190 A 10, 10, 0, 0, 1 190, 200 L 10, 200 A 10, 10, 0, 0, 1 0, 190 L 0, 50 A 10, 10, 0, 0, 1 10, 40 Z"
+    );
+  }
+
+  .counter-panel__counter {
+    grid-area: select-stack;
+    display: flex;
+    justify-self: start;
+    align-items: center;
+    justify-content: center;
+    background-color: white;
+    color: black;
+    border-radius: 50%;
+    border: 5px solid red;
+    aspect-ratio: 1;
+    width: 30px;
+  }
+
+  .counter-panel__title {
+    grid-area: select-stack;
+    display: flex;
+    justify-self: center;
+  }
+
+  .counter-panel__content {
+    grid-area: select-stack;
+    align-content: center;
+  }
+}
+</style>

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

@@ -0,0 +1,323 @@
+<template>
+  <div>
+    <NuxtLayout name="default">
+      <template #layout-content>
+        <LayoutRow tag="div" variant="content" :style-class-passthrough="['mbe-20']">
+          <h2 class="page-heading-2">Profile Section</h2>
+        </LayoutRow>
+
+        <LayoutRow tag="div" variant="content" :style-class-passthrough="['mbe-20']">
+          <ContactSection tag="section" :style-class-passthrough="['mbe-20']">
+            <template #indicator-0>
+              <Icon name="lucide-map-pin" class="indicator-icon" />
+            </template>
+            <template #item-0>
+              <div>
+                <HeroText
+                  tag="h2"
+                  axis="horizontal"
+                  font-size="label"
+                  :text-content="[{ text: 'Location', styleClass: 'normal' }]"
+                  :style-class-passthrough="['mbe-20']"
+                />
+
+                <p class="page-body-normal">
+                  Mobile service across Bath — Weston, Lansdown, Larkhall, Oldfield Park &amp; surrounding areas.
+                </p>
+              </div>
+            </template>
+
+            <template #indicator-1>
+              <Icon name="lucide-phone" class="indicator-icon" />
+            </template>
+            <template #item-1>
+              <div>
+                <HeroText
+                  tag="h2"
+                  axis="horizontal"
+                  font-size="label"
+                  :text-content="[{ text: 'Contact', styleClass: 'normal' }]"
+                  :style-class-passthrough="['mbe-20']"
+                />
+                <p class="page-body-normal">
+                  Call or text to arrange your home appointment. Evening and weekend slots available.
+                </p>
+              </div>
+            </template>
+
+            <template #indicator-2>
+              <Icon name="lucide-clock" class="indicator-icon" />
+            </template>
+            <template #item-2>
+              <div>
+                <HeroText
+                  tag="h2"
+                  axis="horizontal"
+                  font-size="label"
+                  :text-content="[{ text: 'Hours', styleClass: 'normal' }]"
+                  :style-class-passthrough="['mbe-20']"
+                />
+                <p class="page-body-normal">
+                  Monday
+                  <em>to</em>
+                  Sunday
+                  <br />
+                  <em>between</em>
+                  9:00 AM
+                  <em>and</em>
+                  7:00 PM
+                  <br />
+                  Flexible by arrangement
+                  <br />
+                  Sunday appointments available on request and a premium.
+                </p>
+              </div>
+            </template>
+
+            <template #form>
+              <ClientOnly>
+                <form ref="formRef" @submit.stop.prevent="submitForm()">
+                  <div id="contact-aria-live" aria-live="assertive"></div>
+
+                  <FormField width="wide" :has-gutter="false">
+                    <template #default>
+                      <InputTextWithLabel
+                        id="fullName"
+                        v-model="state.fullName"
+                        type="text"
+                        :maxlength="fieldMaxLength('fullName')"
+                        name="fullName"
+                        placeholder="eg. Jane Smith"
+                        label="Full name"
+                        :error-message="formErrors?.fullName?._errors[0] ?? ''"
+                        :field-has-error="Boolean(zodFormControl.submitAttempted && formErrors?.fullName)"
+                        :required="true"
+                        input-variant="underlined"
+                      >
+                        <template #left>
+                          <Icon name="radix-icons:person" class="icon" />
+                        </template>
+                      </InputTextWithLabel>
+                    </template>
+                  </FormField>
+
+                  <FormField width="wide" :has-gutter="false">
+                    <template #default>
+                      <InputTextWithLabel
+                        id="telNumber"
+                        v-model="state.telNumber"
+                        type="tel"
+                        inputmode="tel"
+                        :maxlength="fieldMaxLength('telNumber')"
+                        name="telNumber"
+                        placeholder="eg. 07700 900000"
+                        label="Telephone number"
+                        :error-message="formErrors?.telNumber?._errors[0] ?? ''"
+                        :field-has-error="Boolean(zodFormControl.submitAttempted && formErrors?.telNumber)"
+                        :required="true"
+                        input-variant="underlined"
+                      >
+                        <template #left>
+                          <Icon name="lucide-phone" class="icon" />
+                        </template>
+                      </InputTextWithLabel>
+                    </template>
+                  </FormField>
+
+                  <FormField width="wide" :has-gutter="false">
+                    <template #default>
+                      <InputTextWithLabel
+                        id="emailAddress"
+                        v-model="state.emailAddress"
+                        type="email"
+                        inputmode="email"
+                        :maxlength="fieldMaxLength('emailAddress')"
+                        name="emailAddress"
+                        placeholder="eg. name@domain.com"
+                        label="Email address"
+                        :error-message="formErrors?.emailAddress?._errors[0] ?? ''"
+                        :field-has-error="Boolean(zodFormControl.submitAttempted && formErrors?.emailAddress)"
+                        :required="true"
+                        input-variant="underlined"
+                      >
+                        <template #left>
+                          <Icon name="radix-icons:envelope-closed" class="icon" />
+                        </template>
+                      </InputTextWithLabel>
+                    </template>
+                  </FormField>
+
+                  <FormField v-if="servicesData !== null" width="wide" :has-gutter="false">
+                    <template #default>
+                      <MultipleCheckboxes
+                        v-model="state.services"
+                        v-model:field-data="servicesData"
+                        name="services"
+                        legend="Services of interest"
+                        label="Select all that apply"
+                        :error-message="formErrors?.services?._errors[0] ?? ''"
+                        :field-has-error="Boolean(zodFormControl.submitAttempted && formErrors?.services)"
+                        options-layout="inline"
+                        :is-button="true"
+                        :is-pill="false"
+                        input-variant="underlined"
+                      >
+                        <template #descriptionText>Choose one or more services you're interested in.</template>
+                      </MultipleCheckboxes>
+                    </template>
+                  </FormField>
+
+                  <FormField width="wide" :has-gutter="false">
+                    <template #default>
+                      <InputTextareaWithLabel
+                        v-model="state.comments"
+                        :maxlength="fieldMaxLength('comments')"
+                        name="comments"
+                        placeholder="Tell us a bit more about what you're looking for…"
+                        label="Comments"
+                        :error-message="formErrors?.comments?._errors[0] ?? ''"
+                        :field-has-error="Boolean(zodFormControl.submitAttempted && formErrors?.comments)"
+                        input-variant="underlined"
+                      >
+                        <template #descriptionText>Optional — any extra information that might help us.</template>
+                      </InputTextareaWithLabel>
+                    </template>
+                  </FormField>
+
+                  <FormField width="wide" :has-gutter="false">
+                    <template #default>
+                      <InputButtonCore
+                        type="submit"
+                        :is-pending="zodFormControl.displayLoader"
+                        :readonly="zodFormControl.submitDisabled"
+                        button-text="Send enquiry"
+                        @click.stop.prevent="submitForm()"
+                      />
+                    </template>
+                  </FormField>
+                </form>
+              </ClientOnly>
+            </template>
+          </ContactSection>
+        </LayoutRow>
+      </template>
+    </NuxtLayout>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { z } from "zod";
+import type { IFormMultipleOptions } from "~/types/forms/types.forms";
+
+type ReturnTypeUseZodValidation = ReturnType<typeof useZodValidation>;
+
+definePageMeta({
+  layout: false,
+});
+
+useHead({
+  title: "Contact Section",
+  meta: [
+    {
+      name: "description",
+      content: "Contact Section Meta description content",
+    },
+  ],
+  bodyAttrs: {
+    class: "contact-section-page",
+  },
+});
+
+// Fetch the real services list from the existing API endpoint.
+// Transform the raw service objects into the IFormMultipleOptions shape
+// that MultipleCheckboxes expects: { id, name, value, label }[].
+// Fetch the real services list from the existing API endpoint.
+// Transform the raw service objects into the IFormMultipleOptions shape
+// that MultipleCheckboxes expects: { id, name, value, label }[].
+type ServiceItem = { slug: string; title: string };
+const { data: servicesData } = await useFetch<IFormMultipleOptions>("/api/services", {
+  transform: (raw) => {
+    const services = raw as unknown as ServiceItem[];
+    return {
+      data: services.map((s) => ({ id: s.slug, name: "services", value: s.slug, label: s.title })),
+      total: services.length,
+      skip: 0,
+      limit: services.length,
+    };
+  },
+});
+
+const formSchema = z.object({
+  fullName: z
+    .string({ error: (i) => (i.input === undefined ? "Full name is required" : "Full name must be a string") })
+    .trim()
+    .min(2, "Name is too short")
+    .max(80, "Name is too long"),
+  telNumber: z
+    .string({
+      error: (i) => (i.input === undefined ? "Telephone number is required" : "Telephone number must be a string"),
+    })
+    .trim()
+    .min(7, "Telephone number is too short")
+    .max(20, "Telephone number is too long"),
+  emailAddress: z
+    .string({ error: (i) => (i.input === undefined ? "Email address is required" : "Email address must be a string") })
+    .email({ error: "Invalid email address" }),
+  services: z.array(z.string()).min(1, "Please select at least one service"),
+  comments: z.string().trim().max(500, "Comments must be 500 characters or fewer").optional(),
+});
+
+type FormSchema = z.infer<typeof formSchema>;
+const formErrors = computed<z.ZodFormattedError<FormSchema> | null>(() => zodErrorObj.value);
+
+const state = reactive({
+  fullName: "",
+  telNumber: "",
+  emailAddress: "",
+  services: [] as string[],
+  comments: "",
+});
+
+const formRef = ref<HTMLFormElement | null>(null);
+
+const { initZodForm, zodFormControl, zodErrorObj, doZodValidate, fieldMaxLength, scrollToFirstError } =
+  useZodValidation<typeof formSchema>(formSchema, formRef) as ReturnTypeUseZodValidation;
+
+initZodForm();
+
+const submitForm = async () => {
+  zodFormControl.submitAttempted = true;
+  if (!(await doZodValidate(state))) {
+    scrollToFirstError();
+    return;
+  }
+  zodFormControl.displayLoader = true;
+  try {
+    // POST validated form data to the server route — Resend is called server-side
+    await $fetch("/api/contact", { method: "POST", body: state });
+    zodFormControl.submitSuccessful = true;
+  } catch (error) {
+    // Server-side failures (e.g. Resend API error) surface here
+    console.warn("Contact form submission failed", error);
+  } finally {
+    zodFormControl.displayLoader = false;
+  }
+};
+
+watch(
+  () => state,
+  () => {
+    doZodValidate(state);
+  },
+  { deep: true }
+);
+</script>
+
+<style lang="css">
+.contact-section-page {
+  .contact-section {
+    /* max-inline-size: 800px; */
+    margin-inline: auto;
+  }
+}
+</style>