srcdev-nuxt-components 8.0.2 → 9.0.0

package/app/pages/ui/marquee-scroller.vue

@@ -0,0 +1,99 @@
+<template>
+  <div>
+    <NuxtLayout name="default">
+      <template #layout-content>
+        <LayoutRow tag="div" variant="full-width" :style-class-passthrough="['mbe-20']">
+          <h1 class="page-heading-1">Marquee Scroller</h1>
+
+          <MarqueeScroller
+            animation-runtime="20s"
+            :marquee-data
+            :item-config="{ width: '100px', height: '100px', quantity: marqueeData.length }"
+            :reverse="false"
+          >
+            <template v-for="item in marqueeData" :key="item.id" #[item.id]>
+              <div class="item-inner">
+                <h3>ID: {{ item.id }}</h3>
+                <p>{{ item.content }}</p>
+              </div>
+            </template>
+          </MarqueeScroller>
+        </LayoutRow>
+      </template>
+    </NuxtLayout>
+  </div>
+</template>
+
+<script setup lang="ts">
+definePageMeta({
+  layout: false,
+});
+
+useHead({
+  title: "Typography",
+  meta: [{ name: "description", content: "Typography" }],
+  bodyAttrs: {
+    class: "page-marquee-scroller",
+  },
+});
+
+const marqueeData = [
+  {
+    id: 1,
+    content: "Item 1",
+  },
+  {
+    id: 2,
+    content: "Item 2",
+  },
+  {
+    id: 3,
+    content: "Item 3",
+  },
+  {
+    id: 4,
+    content: "Item 4",
+  },
+  {
+    id: 5,
+    content: "Item 5",
+  },
+  {
+    id: 6,
+    content: "Item 6",
+  },
+  {
+    id: 7,
+    content: "Item 7",
+  },
+  {
+    id: 8,
+    content: "Item 8",
+  },
+  {
+    id: 9,
+    content: "Item 9",
+  },
+  {
+    id: 10,
+    content: "Item 10",
+  },
+  {
+    id: 11,
+    content: "Item 11",
+  },
+  {
+    id: 12,
+    content: "Item 12",
+  },
+  {
+    id: 13,
+    content: "Item 13",
+  },
+];
+</script>
+
+<style lang="css">
+.page-marquee-scroller {
+}
+</style>

package/app/pages/ui/mask-element.vue

@@ -0,0 +1,82 @@
+<template>
+  <div>
+    <NuxtLayout name="default">
+      <template #layout-content>
+        <LayoutRow tag="div" variant="full-width" :style-class-passthrough="['mbe-20']">
+          <h2 class="page-heading-2">Mask Element</h2>
+
+          <div class="test-mask-element">
+            <AlertMaskCore
+              :config="{
+                backgroundColour: 'rgba(0,0,0,0.25)',
+                borderColour: 'var(--orange-08)',
+                radiusLeft: 12,
+                radiusRight: 4,
+                borderLeft: 12,
+                borderTop: 1,
+                borderRight: 1,
+                borderBottom: 1,
+              }"
+              :style-class-passthrough="['test-alert']"
+            >
+              <div class="some-local-class">
+                <p>Constant-radius masked border demo, and some more text</p>
+              </div>
+            </AlertMaskCore>
+          </div>
+        </LayoutRow>
+      </template>
+    </NuxtLayout>
+  </div>
+</template>
+
+<script setup lang="ts">
+definePageMeta({
+  layout: false,
+});
+
+useHead({
+  title: "Mask Element",
+  meta: [
+    {
+      name: "description",
+      content: "Mask Element Meta description content",
+    },
+  ],
+  bodyAttrs: {
+    class: "mask-element-page",
+  },
+});
+</script>
+
+<style lang="css">
+.mask-element-page {
+  --_background-image: url("/images/rotating-carousel/image-2.webp");
+  --_background-position: 0 0;
+
+  background-image: var(--_background-image);
+  background-size: cover;
+  background-position: var(--_background-position);
+  background-attachment: fixed;
+
+  .test-mask-element {
+    position: relative;
+    margin-top: 100px;
+    display: grid;
+    justify-self: center;
+
+    .alert-mask-core {
+      &.test-alert {
+        width: 600px;
+
+        .alert-mask-content-slot {
+          .some-local-class {
+            color: white;
+            padding: 1.2rem;
+          }
+        }
+      }
+    }
+  }
+}
+</style>

package/app/pages/ui/masonry-columns.vue

@@ -0,0 +1,55 @@
+<template>
+  <div>
+    <NuxtLayout name="default">
+      <template #layout-content>
+        <LayoutRow tag="div" variant="popout" :style-class-passthrough="['mbe-20']">
+          <h1 class="page-heading-3">Masonry Grid Ordered</h1>
+          <p class="page-body-normal">Masonry grid ordered displaying dummy posts data</p>
+          <CanvasSwitcher v-model:canvas-name="canvasName" />
+        </LayoutRow>
+
+        <LayoutRow tag="div" variant="popout" :style-class-passthrough="['mbe-20']">
+          <div v-if="status === 'success'" class="masonry-columns">
+            <div
+              v-for="(item, index) in quotesData?.quotes.slice(0, displayCount)"
+              :key="index"
+              class="p-10 border border-1 border-grey-dark border-r-4"
+            >
+              <p class="text-normal wght-700">{{ index + 1 }}: {{ item.author }}</p>
+              <p class="text-normal">{{ item.quote }}</p>
+            </div>
+          </div>
+          <p v-else class="page-body-normal">&hellip;Loading</p>
+        </LayoutRow>
+      </template>
+    </NuxtLayout>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { IQuotes } from "~/types/types.quotes";
+import type { MediaCanvas } from "~/types/components";
+
+definePageMeta({
+  layout: false,
+});
+
+useHead({
+  title: "Masonry Grid Ordered",
+  meta: [{ name: "description", content: "Masonry Grid Ordered" }],
+  bodyAttrs: {
+    class: "",
+  },
+});
+const canvasName = ref<MediaCanvas>("desktopCanvas");
+
+const displayCount = 12;
+const { data: quotesData, status } = await useFetch<IQuotes>("https://dummyjson.com/quotes");
+</script>
+
+<style lang="css">
+.masonry-columns {
+  /* column-count: 3; */
+  columns: 300px;
+}
+</style>

package/app/pages/ui/masonry-grid-ordered-experiment.vue

@@ -0,0 +1,79 @@
+<template>
+  <div>
+    <NuxtLayout name="default">
+      <template #layout-content>
+        <LayoutRow tag="div" variant="popout" :style-class-passthrough="['mbe-20']">
+          <h1 class="page-heading-3">Masonry Grid Ordered</h1>
+          <p class="page-body-normal">Masonry grid ordered displaying dummy posts data</p>
+          <CanvasSwitcher v-model:canvas-name="canvasName" />
+        </LayoutRow>
+
+        <LayoutRow tag="div" variant="full-content" :style-class-passthrough="['mbe-20']">
+          <MasonryGridOrderedGridExperiment
+            v-if="status === 'success'"
+            :grid-data="quotesData?.quotes?.slice(0, displayCount).map((q) => ({ ...q, id: String(q.id) })) ?? []"
+            :gap="12"
+            :min-tile-width="300"
+            :fixed-width="useFixedWidth"
+            :style-class-passthrough="[canvasName, 'mi-auto']"
+          >
+            <template v-for="(item, index) in quotesData?.quotes.slice(0, displayCount)" :key="item.id" #[item.id]>
+              <div class="demo-grid-item-content">
+                <p class="text-normal wght-700">{{ index + 1 }}: {{ item.author }}</p>
+                <p class="text-normal">{{ item.quote }}</p>
+              </div>
+            </template>
+          </MasonryGridOrderedGridExperiment>
+          <p v-else class="page-body-normal">&hellip;Loading</p>
+        </LayoutRow>
+      </template>
+    </NuxtLayout>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { IQuotes } from "~/types/types.quotes";
+import type { MediaCanvas } from "~/types/components";
+
+definePageMeta({
+  layout: false,
+});
+
+useHead({
+  title: "Masonry Grid Ordered",
+  meta: [{ name: "description", content: "Masonry Grid Ordered" }],
+  bodyAttrs: {
+    class: "",
+  },
+});
+const canvasName = ref<MediaCanvas>("desktopCanvas");
+
+const useFixedWidth = true;
+const displayCount = 12;
+const { data: quotesData, status } = await useFetch<IQuotes>("https://dummyjson.com/quotes");
+</script>
+
+<style lang="css">
+.mi-auto {
+  --_border-color: light-dark(hsl(0, 29%, 3%), hsl(0, 0%, 92%));
+
+  &.masonry-grid-ordered {
+    .masonry-grid-ordered-wrapper {
+      background-color: blueviolet;
+
+      .masonry-grid-ordered-item {
+        background-color: darkcyan;
+
+        .masonry-grid-ordered-content {
+          background-color: brown;
+
+          .demo-grid-item-content {
+            outline: 0.1rem solid var(--_border-color);
+            padding: 1.2rem;
+          }
+        }
+      }
+    }
+  }
+}
+</style>

package/app/pages/ui/masonry-grid-ordered.vue

@@ -0,0 +1,56 @@
+<template>
+  <div>
+    <NuxtLayout name="default">
+      <template #layout-content>
+        <LayoutRow tag="div" variant="popout" :style-class-passthrough="['mbe-20']">
+          <h1 class="page-heading-3">Masonry Grid Ordered</h1>
+          <p class="page-body-normal">Masonry grid ordered displaying dummy posts data</p>
+          <CanvasSwitcher v-model:canvas-name="canvasName" />
+        </LayoutRow>
+
+        <LayoutRow tag="div" variant="popout" :style-class-passthrough="['mbe-20']">
+          <MasonryGridOrdered
+            v-if="status === 'success'"
+            :grid-data="quotesData?.quotes.slice(0, displayCount) ?? []"
+            :gap="12"
+            :min-tile-width="300"
+            :fixed-width="useFixedWidth"
+            :style-class-passthrough="[canvasName, 'mi-auto']"
+          >
+            <template v-for="(item, index) in quotesData?.quotes.slice(0, displayCount)" :key="item.id" #[item.id]>
+              <div class="p-10 border border-1 border-grey-dark border-r-4">
+                <p class="text-normal wght-700">{{ index + 1 }}: {{ item.author }}</p>
+                <p class="text-normal">{{ item.quote }}</p>
+              </div>
+            </template>
+          </MasonryGridOrdered>
+          <p v-else class="page-body-normal">&hellip;Loading</p>
+        </LayoutRow>
+      </template>
+    </NuxtLayout>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { IQuotes } from "~/types/types.quotes";
+import type { MediaCanvas } from "~/types/components";
+
+definePageMeta({
+  layout: false,
+});
+
+useHead({
+  title: "Masonry Grid Ordered",
+  meta: [{ name: "description", content: "Masonry Grid Ordered" }],
+  bodyAttrs: {
+    class: "",
+  },
+});
+const canvasName = ref<MediaCanvas>("desktopCanvas");
+
+const useFixedWidth = true;
+const displayCount = 12;
+const { data: quotesData, status } = await useFetch<IQuotes>("https://dummyjson.com/quotes");
+</script>
+
+<style lang="css"></style>

package/app/pages/ui/masonry-grid-sorted.vue

@@ -0,0 +1,55 @@
+<template>
+  <div>
+    <NuxtLayout name="default">
+      <template #layout-content>
+        <LayoutRow tag="div" variant="full-width" :style-class-passthrough="['mbe-20']">
+          <h1 class="page-heading-2">Masonry Grid</h1>
+          <CanvasSwitcher v-model:canvas-name="canvasName" />
+        </LayoutRow>
+
+        <LayoutRow tag="div" variant="popout" :style-class-passthrough="['mbe-20']">
+          <MasonryGridSorted
+            :grid-data="quotesData?.quotes.slice(0, qoutesDisplayCount) ?? []"
+            :item-min-width="350"
+            :gap="3.2"
+            unit="rem"
+            :style-class-passthrough="[canvasName, 'mi-auto']"
+          >
+            <template
+              v-for="(item, index) in quotesData?.quotes.slice(0, qoutesDisplayCount)"
+              :key="item.id"
+              #[item.id]
+            >
+              <div class="">
+                <p class="">{{ index + 1 }}: {{ item.author }}</p>
+                <p class="">{{ item.quote }}</p>
+              </div>
+            </template>
+          </MasonryGridSorted>
+        </LayoutRow>
+      </template>
+    </NuxtLayout>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { IQuotes } from "~/types/types.quotes";
+import type { MediaCanvas } from "~/types/components";
+
+definePageMeta({
+  layout: false,
+});
+
+useHead({
+  title: "Masonry Grid",
+  meta: [{ name: "description", content: "Masonry Grid - Nuxt Components Layer extending a Nuxt project" }],
+  bodyAttrs: {
+    class: "home",
+  },
+});
+
+const canvasName = ref<MediaCanvas>("desktopCanvas");
+
+const qoutesDisplayCount = 21;
+const { data: quotesData } = await useFetch<IQuotes>("https://dummyjson.com/quotes");
+</script>

package/app/pages/ui/masonry-grid.vue

@@ -0,0 +1,55 @@
+<template>
+  <div>
+    <NuxtLayout name="default">
+      <template #layout-content>
+        <LayoutRow tag="div" variant="full-width" :style-class-passthrough="['mbe-20']">
+          <h1 class="page-heading-2">Masonry Grid</h1>
+          <CanvasSwitcher v-model:canvas-name="canvasName" />
+        </LayoutRow>
+
+        <LayoutRow tag="div" variant="popout" :style-class-passthrough="['mbe-20']">
+          <MasonryGrid
+            :grid-data="quotesData?.quotes.slice(0, qoutesDisplayCount) ?? []"
+            :item-min-width="350"
+            :gap="3.2"
+            unit="rem"
+            :style-class-passthrough="[canvasName, 'mi-auto']"
+          >
+            <template
+              v-for="(item, index) in quotesData?.quotes.slice(0, qoutesDisplayCount)"
+              :key="item.id"
+              #[item.id]
+            >
+              <div class="">
+                <p class="">{{ index + 1 }}: {{ item.author }}</p>
+                <p class="">{{ item.quote }}</p>
+              </div>
+            </template>
+          </MasonryGrid>
+        </LayoutRow>
+      </template>
+    </NuxtLayout>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { IQuotes } from "~/types/types.quotes";
+import type { MediaCanvas } from "~/types/components";
+
+definePageMeta({
+  layout: false,
+});
+
+useHead({
+  title: "Masonry Grid",
+  meta: [{ name: "description", content: "Masonry Grid - Nuxt Components Layer extending a Nuxt project" }],
+  bodyAttrs: {
+    class: "home",
+  },
+});
+
+const canvasName = ref<MediaCanvas>("desktopCanvas");
+
+const qoutesDisplayCount = 21;
+const { data: quotesData } = await useFetch<IQuotes>("https://dummyjson.com/quotes");
+</script>

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

@@ -0,0 +1,65 @@
+<template>
+  <div>
+    <NuxtLayout name="default">
+      <template #layout-content>
+        <LayoutRow 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>
+        </LayoutRow>
+
+        <LayoutRow tag="div" variant="content" :style-class-passthrough="['mbe-20']">
+          <PriceList :price-list-data="priceListData" :style-class-passthrough="['mbe-20']" />
+        </LayoutRow>
+      </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

@@ -0,0 +1,96 @@
+<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']">
+          <ProfileSection
+            :profile-picture="{
+              src: '/images/services/service-balayage.jpg',
+              alt: 'Profile picture of Natasha, the mobile hairdresser in Bath',
+            }"
+            :profile-info-count="3"
+          >
+            <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 #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>
+        </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: "profile-section-page",
+  },
+});
+</script>
+
+<style lang="css">
+.profile-section-page {
+  .profile-section {
+    max-inline-size: 800px;
+    margin-inline: auto;
+  }
+}
+</style>