srcdev-nuxt-components 9.3.7 → 9.3.8

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

@@ -1,101 +0,0 @@
-<template>
-  <div>
-    <NuxtLayout name="default">
-      <template #layout-content>
-        <PageRow tag="div" variant="full" :style-class-passthrough="['mbe-20']">
-          <h1 class="page-heading-2">Clipped Panels</h1>
-        </PageRow>
-        <PageRow tag="div" variant="full" :style-class-passthrough="['mbe-20']">
-          <h2 class="page-heading-2">Rectangle</h2>
-          <ClippedPanel variant="rectangle">
-            <template #default>
-              <p>Clipped Panels Rectangle</p>
-            </template>
-          </ClippedPanel>
-        </PageRow>
-        <PageRow tag="div" variant="full" :style-class-passthrough="['mbe-20']">
-          <h2 class="page-heading-2">Square</h2>
-          <ClippedPanel variant="square">
-            <template #default>
-              <p>Clipped Panels Square</p>
-            </template>
-          </ClippedPanel>
-        </PageRow>
-        <PageRow tag="div" variant="full" :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>
-        </PageRow>
-      </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

@@ -1,323 +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']">
-          <ContactSection tag="section" stepper-indicator-size="2.4rem" :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>
-        </PageRow>
-      </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>

package/app/pages/ui/container-glow.vue

@@ -1,106 +0,0 @@
-<template>
-  <div>
-    <NuxtLayout name="default">
-      <template #layout-content>
-        <PageRow tag="div" variant="popout" :style-class-passthrough="['mbe-20']">
-          <h1 class="page-heading-2">Container Glow Effect</h1>
-          <p>Glow will track mouse position</p>
-
-          <ContainerGlowCore
-            tag="div"
-            :style-class-passthrough="['class-scope', 'pbe-20']"
-            :config="{
-              proximity: 40,
-              spread: 80,
-              blur: 20,
-              gap: 32,
-              vertical: false,
-              inactiveOpacity: 0,
-            }"
-          >
-            <template v-for="(item, key) in data" :key="key" #[`container-glow-${key}`]>
-              <div class="example-card p-12">
-                <h3 class="page-heading-3">{{ item.title }}</h3>
-                <p class="pbs-24">{{ item.content }}</p>
-              </div>
-            </template>
-          </ContainerGlowCore>
-        </PageRow>
-      </template>
-    </NuxtLayout>
-  </div>
-</template>
-
-<script setup lang="ts">
-definePageMeta({
-  layout: false,
-});
-
-useHead({
-  title: "Container Glow Effect",
-  meta: [{ name: "description", content: "Container Glow Effect" }],
-  bodyAttrs: {
-    class: "container-glow-core-page",
-  },
-});
-
-const data = [
-  {
-    title: "Trigger Item 1",
-    content:
-      "Lorem ipsum dolor sit amet consectetur, adipisicing elit. Iusto, amet!. Lorem ipsum dolor sit, adipisicing elit. Iusto, amet!",
-  },
-  {
-    title: "Trigger Item 2",
-    content: "Lorem ipsum dolor sit amet consectetur, adipisicing elit. Iusto, amet!",
-  },
-  {
-    title: "Trigger Item 3",
-    content:
-      "Lorem ipsum dolor sit amet consectetur, adipisicing elit. Iusto, amet!, Lorem ipsum dolor sit amet consectetur, adipisicing elit. Iusto, amet! Lorem ipsum dolor sit amet consectetur, adipisicing elit. Iusto, amet!",
-  },
-];
-</script>
-
-<style lang="css">
-.class-scope {
-  &.container-glow-wrapper {
-    .container-glow-core {
-      --gradient: conic-gradient(
-        from 180deg at 50% 70%,
-        hsla(0, 0%, 98%, 1) 0deg,
-        #54ff0b 144.0000021457672deg,
-        hsla(0, 0%, 98%, 1) 1turn
-      );
-
-      height: 100%;
-      background: light-dark(white, hsl(246 44% 7%));
-      padding: 2rem;
-      aspect-ratio: 330 / 400;
-      border-radius: 12px;
-      min-width: 280px;
-      max-width: 280px;
-      display: flex;
-      flex-direction: column;
-      gap: 0.25rem;
-
-      &::before {
-        /* Custom styles */
-      }
-
-      &::after {
-        /* Custom styles */
-      }
-
-      .glows {
-        /* Custom styles */
-
-        &::after,
-        &::before {
-          /* Custom styles */
-        }
-      }
-    }
-  }
-}
-</style>

package/app/pages/ui/content-width.vue

@@ -1,126 +0,0 @@
-<template>
-  <div>
-    <NuxtLayout name="default">
-      <template #layout-content>
-        <ContentWidth tag="div" :style-class-passthrough="['mbe-20']">
-          <h1 class="page-heading-2 mbe-18">Content Width</h1>
-          <p class="page-body-normal-semibold">
-            Small screens:
-            <code class="page-body-normal">--content-max-width: auto;</code>
-          </p>
-          <p class="page-body-normal-semibold">
-            >= Laptop screens:
-            <code class="page-body-normal">--content-max-width: 1064px;</code>
-          </p>
-        </ContentWidth>
-
-        <ContentWidth tag="div" :justify-content="'start'" :style-class-passthrough="['mbe-20']">
-          <h2 class="page-heading-2 mbe-18">Sample content (start)</h2>
-          <p class="page-body-normal">
-            Lorem ipsum odor amet, consectetuer adipiscing elit. Nec elementum maecenas placerat laoreet curae elit
-            convallis himenaeos. Tellus varius cursus convallis commodo suspendisse litora. Platea accumsan interdum
-            ultrices adipiscing molestie cras dui. Vehicula egestas nisi sagittis fames metus velit. Sodales blandit
-            nisi eu dis sit, ridiculus aliquam. Morbi tellus eu in penatibus torquent tortor. Platea gravida nam;
-            egestas enim nostra ultricies.
-          </p>
-          <p class="page-body-normal">
-            Mi nibh quisque taciti porta curabitur nostra volutpat. Habitant sodales arcu habitasse mi duis conubia leo
-            lacinia. Montes torquent sodales adipiscing; proin semper feugiat morbi ullamcorper praesent. Arcu luctus
-            tempor quam ligula vestibulum sapien faucibus ridiculus. Cursus consequat ultricies consectetur class
-            suscipit quisque convallis eget? Dignissim mattis luctus enim habitant porta pretium litora. Parturient
-            montes imperdiet massa; sollicitudin varius hac aptent. Eleifend parturient mattis tellus nisi a montes.
-          </p>
-        </ContentWidth>
-
-        <ContentWidth tag="div" :style-class-passthrough="['mbe-20']">
-          <h2 class="page-heading-2 mbe-18">Sample Column content (center/default)</h2>
-
-          <LayoutGridByCols :column-count="2">
-            <template #item-0>
-              <div>
-                <h3 class="page-heading-3 mbe-12">Column 1</h3>
-                <p class="page-body-normal">
-                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum
-                  mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit. Donec et mollis dolor.
-                  Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta
-                  lorem lacinia consectetur. Donec ut libero sed arcu vehicula ultricies a non tortor. Lorem ipsum dolor
-                  sit amet, consectetur adipiscing elit.
-                </p>
-              </div>
-            </template>
-            <template #item-1>
-              <div>
-                <h3 class="page-heading-3 mbe-12">Column 2</h3>
-                <p class="page-body-normal">
-                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum
-                  mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit. Donec et mollis dolor.
-                  Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta
-                  lorem lacinia consectetur. Donec ut libero sed arcu vehicula ultricies a non tortor. Lorem ipsum dolor
-                  sit amet, consectetur adipiscing elit.
-                </p>
-              </div>
-            </template>
-          </LayoutGridByCols>
-        </ContentWidth>
-
-        <ContentWidth tag="div" :justify-content="'end'" :style-class-passthrough="['mbe-20']">
-          <h2 class="page-heading-2 mbe-18">Sample content (end)</h2>
-          <p class="page-body-normal">
-            Lorem ipsum odor amet, consectetuer adipiscing elit. Nec elementum maecenas placerat laoreet curae elit
-            convallis himenaeos. Tellus varius cursus convallis commodo suspendisse litora. Platea accumsan interdum
-            ultrices adipiscing molestie cras dui. Vehicula egestas nisi sagittis fames metus velit. Sodales blandit
-            nisi eu dis sit, ridiculus aliquam. Morbi tellus eu in penatibus torquent tortor. Platea gravida nam;
-            egestas enim nostra ultricies.
-          </p>
-          <p class="page-body-normal">
-            Mi nibh quisque taciti porta curabitur nostra volutpat. Habitant sodales arcu habitasse mi duis conubia leo
-            lacinia. Montes torquent sodales adipiscing; proin semper feugiat morbi ullamcorper praesent. Arcu luctus
-            tempor quam ligula vestibulum sapien faucibus ridiculus. Cursus consequat ultricies consectetur class
-            suscipit quisque convallis eget? Dignissim mattis luctus enim habitant porta pretium litora. Parturient
-            montes imperdiet massa; sollicitudin varius hac aptent. Eleifend parturient mattis tellus nisi a montes.
-          </p>
-        </ContentWidth>
-      </template>
-    </NuxtLayout>
-  </div>
-</template>
-
-<script setup lang="ts">
-definePageMeta({
-  layout: false,
-});
-
-useHead({
-  title: "UI Content Width",
-  meta: [{ name: "description", content: "Examples of UI Component Content Width" }],
-  bodyAttrs: {
-    class: "content-width-page",
-  },
-});
-</script>
-
-<style lang="css">
-.content-width-page {
-  .layout-grid-by-cols {
-    .layout-grid-inner {
-      > * {
-        outline: 1px solid green;
-      }
-
-      @container layoutGrid (width >= 768px) {
-        > * {
-          outline: 1px solid purple;
-        }
-      }
-    }
-  }
-}
-
-.content-width-wrapper {
-  .content-width {
-    .content-width-inner {
-      outline: 1px solid orange;
-    }
-  }
-}
-</style>