srcdev-nuxt-components 9.3.7 → 9.3.8

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

@@ -1,61 +0,0 @@
-<template>
-  <div>
-    <NuxtLayout name="default">
-      <template #layout-content>
-        <PageRow 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" class="page-link-normal">Back to Services</NuxtLink>
-          </p>
-        </PageRow>
-
-        <PageRow tag="div" variant="content" :style-class-passthrough="['mbe-20']">
-          <ServicesSection v-if="servicesData.length > 0 && serviceData" :service-data="serviceData!" />
-        </PageRow>
-      </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

@@ -1,64 +0,0 @@
-<template>
-  <div>
-    <NuxtLayout name="default">
-      <template #layout-content>
-        <PageRow 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']"
-          />
-        </PageRow>
-
-        <PageRow 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>
-        </PageRow>
-
-        <PageRow tag="div" variant="content" :style-class-passthrough="['mbe-20']">
-          <ServicesSectionGrid
-            :services-data="servicesData ?? []"
-            :use-alternate-reverse="true"
-            summary-alignment="center"
-          />
-        </PageRow>
-      </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/settings.vue

@@ -1,54 +0,0 @@
-<template>
-  <div>
-    <NuxtLayout name="default">
-      <template #layout-content>
-        <PageRow tag="div" variant="popout" :style-class-passthrough="['mbe-20']">
-          <h1 class="page-heading-1 mbe-18">Settings</h1>
-          <h2 class="page-heading-2 mbe-18">Theme Switcher</h2>
-
-          <DisplayThemeSwitch />
-        </PageRow>
-
-        <PageRow tag="div" variant="popout" :style-class-passthrough="['mbe-20']">
-          <div class="theme-test" data-theme="error">
-            <h2 class="page-heading-2 mbe-18">Theme test (error)</h2>
-
-            <div class="mb-12">
-              <p class="page-body-normal mbe-12">This is test text</p>
-            </div>
-          </div>
-        </PageRow>
-      </template>
-    </NuxtLayout>
-  </div>
-</template>
-
-<script setup lang="ts">
-definePageMeta({
-  layout: false,
-});
-
-useHead({
-  title: "Settings",
-  meta: [{ name: "description", content: "Settings Page" }],
-  bodyAttrs: {
-    class: "settings-page",
-  },
-});
-</script>
-
-<style lang="css">
-.settings-page {
-  .theme-test {
-    margin: 2rem;
-    padding: 0.6rem 1.2rem;
-
-    border: var(--colour-theme-10) solid 1px;
-    outline: var(--colour-theme-10) solid 1px;
-    outline-offset: 3px;
-    background-color: var(--colour-theme-1);
-    color: var(--colour-theme-7);
-    border-radius: 0.4rem;
-  }
-}
-</style>

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

@@ -1,55 +0,0 @@
-<template>
-  <div>
-    <NuxtLayout name="default">
-      <template #layout-content>
-        <PageRow tag="div" variant="popout" :style-class-passthrough="['mbe-20']">
-          <h1 class="page-heading-3">Simple Grid</h1>
-          <p class="page-body-normal">Simple grid displaying dummy posts data</p>
-
-          <LayoutGridByWidth v-if="status === 'success'" column-width="300px" gap="2rem">
-            <template v-for="(item, index) in postsData?.posts.slice(0, displayCount)" :key="item.id" #[item.id]>
-              <div class="display-post-item">
-                <div>Views: {{ item.views }}</div>
-                <div>{{ index + 1 }}: {{ item.title }}</div>
-                <div>{{ item.body }}</div>
-              </div>
-            </template>
-          </LayoutGridByWidth>
-
-          <p v-else class="page-body-normal">&hellip;Loading</p>
-        </PageRow>
-      </template>
-    </NuxtLayout>
-  </div>
-</template>
-
-<script setup lang="ts">
-import type { Posts } from "~/types/types.posts";
-
-definePageMeta({
-  layout: false,
-});
-
-useHead({
-  title: "Simple Grid",
-  meta: [{ name: "description", content: "Simple Grid" }],
-  bodyAttrs: {
-    class: "",
-  },
-});
-
-const displayCount = 12;
-const { data: postsData, status } = await useFetch<Posts>("https://dummyjson.com/posts");
-</script>
-
-<style lang="css">
-.display-post-item {
-  display: grid;
-  grid-template-rows: subgrid;
-  grid-row: span 3;
-  gap: 1.2rem;
-  outline: 0.1rem solid green;
-  border-radius: 0.4rem;
-  padding: 1.2rem;
-}
-</style>

package/app/pages/ui/slider-gallery.vue

@@ -1,261 +0,0 @@
-<template>
-  <div>
-    <NuxtLayout name="default">
-      <template #layout-content>
-        <PageRow tag="div" variant="full" :style-class-passthrough="['display-details-section', 'mbe-20']">
-          <h1 class="page-heading-2">Slider Gallery Component</h1>
-
-          <SliderGallery v-model:gallery-data="galleryData" :auto-run="false" />
-        </PageRow>
-      </template>
-    </NuxtLayout>
-  </div>
-</template>
-
-<script setup lang="ts">
-definePageMeta({
-  layout: false,
-});
-
-useHead({
-  title: "Slider Gallery Component",
-  meta: [
-    {
-      name: "description",
-      content: "Slider Gallery Component",
-    },
-  ],
-  bodyAttrs: {
-    class: "slider-gallery-page",
-  },
-});
-
-const galleryData = ref([
-  {
-    src: "/images/rotating-carousel/image-4.webp",
-    alt: "Balayage highlights",
-    stylist: "Luxury Locs",
-    title: "Balayage Highlights",
-    category: "Hair Colouring",
-    description:
-      "Balayage highlights are a hair coloring technique where color is painted onto the hair in a sweeping motion, creating a natural, sun-kissed look. This method allows for a soft gradation of color, typically lighter towards the ends, and can be used on various hair shades, not just blondes.",
-    thumbnail: {
-      title: "Balayage",
-      description: "Heighlights",
-    },
-    textBrightness: "light",
-  },
-  {
-    src: "/images/rotating-carousel/spanish-green-stripe.webp",
-    alt: "Lowlights with a green tinge",
-    stylist: "Luxury Locs",
-    title: "Lowlights with a green tinge",
-    category: "Hair Colouring",
-    description: "Get into the party mood with striking temporary colours and some lowlights.",
-    thumbnail: {
-      title: "Hair Colouring",
-      description: "Striking Lime",
-    },
-    textBrightness: "light",
-  },
-  {
-    src: "/images/rotating-carousel/image-1.webp",
-    alt: "Image 1",
-    stylist: "Luxury Locs",
-    title: "Highlights",
-    category: "Hair",
-    description: "This is some description text about the image and the hair shown in the image.",
-    thumbnail: {
-      title: "",
-      description: "",
-    },
-    textBrightness: "light",
-  },
-  {
-    src: "/images/rotating-carousel/image-2.webp",
-    alt: "Image 2",
-    stylist: "Luxury Locs",
-    title: "Highlights",
-    category: "Hair",
-    description: "This is some description text about the image and the hair shown in the image.",
-    thumbnail: {
-      title: "",
-      description: "",
-    },
-    textBrightness: "light",
-  },
-  {
-    src: "/images/rotating-carousel/55-woman-garden-backdrop.webp",
-    alt: "Image 3",
-    stylist: "Luxury Locs",
-    title: "Any Age",
-    category: "Hair",
-    description: "Cut and style.",
-    thumbnail: {
-      title: "",
-      description: "",
-    },
-    textBrightness: "light",
-  },
-  {
-    src: "/images/rotating-carousel/35-light-brown-highlights.webp",
-    alt: "Image 4",
-    stylist: "Luxury Locs",
-    title: "Any Age",
-    category: "Hair",
-    description: "Cut and style.",
-    thumbnail: {
-      title: "",
-      description: "",
-    },
-    textBrightness: "light",
-  },
-  {
-    src: "/images/rotating-carousel/image-3.webp",
-    alt: "Image 3",
-    stylist: "Luxury Locs",
-    title: "Highlights",
-    category: "Hair",
-    description: "This is some description text about the image and the hair shown in the image.",
-    thumbnail: {
-      title: "",
-      description: "",
-    },
-    textBrightness: "light",
-  },
-  {
-    src: "/images/rotating-carousel/image-5.webp",
-    alt: "Image 5",
-    stylist: "Luxury Locs",
-    title: "Highlights",
-    category: "Hair",
-    description: "This is some description text about the image and the hair shown in the image.",
-    thumbnail: {
-      title: "",
-      description: "",
-    },
-    textBrightness: "light",
-  },
-  {
-    src: "/images/rotating-carousel/indian-pink-stripe.webp",
-    alt: "Pink stripe",
-    stylist: "Luxury Locs",
-    title: "Party colouring, pink stripe",
-    category: "Hair Colouring",
-    description: "Get into the party mood with striking temporary colours.",
-    thumbnail: {
-      title: "",
-      description: "",
-    },
-    textBrightness: "light",
-  },
-  {
-    src: "/images/rotating-carousel/image-6.webp",
-    alt: "Image 6",
-    stylist: "Luxury Locs",
-    title: "Low lights",
-    category: "Hair",
-    description: "This is some description text about the image and the hair shown in the image.",
-    thumbnail: {
-      title: "",
-      description: "",
-    },
-    textBrightness: "light",
-  },
-  {
-    src: "/images/rotating-carousel/image-7.webp",
-    alt: "Image 7",
-    stylist: "Luxury Locs",
-    title: "Highlights",
-    category: "Hair",
-    description: "This is some description text about the image and the hair shown in the image.",
-    thumbnail: {
-      title: "",
-      description: "",
-    },
-    textBrightness: "light",
-  },
-  {
-    src: "/images/rotating-carousel/image-8.webp",
-    alt: "Image 8",
-    stylist: "Luxury Locs",
-    title: "Highlights",
-    category: "Hair",
-    description: "This is some description text about the image and the hair shown in the image.",
-    thumbnail: {
-      title: "",
-      description: "",
-    },
-    textBrightness: "light",
-  },
-  {
-    src: "/images/rotating-carousel/image-9.webp",
-    alt: "Image 9",
-    stylist: "Luxury Locs",
-    title: "Highlights",
-    category: "Hair",
-    description: "This is some description text about the image and the hair shown in the image.",
-    thumbnail: {
-      title: "",
-      description: "",
-    },
-    textBrightness: "light",
-  },
-]);
-</script>
-
-<style lang="css">
-.slider-gallery-page {
-  .slider-gallery {
-    --_thumbnailBorder: 1px solid light-dark(white, dark);
-    --_thumbnailOutline: 1px solid light-dark(black, white);
-    --_thumbnailBorderRadius: 20px;
-
-    /* Thumbnail sizes */
-    --_thumbnailMobileWidth: 100px;
-    --_thumbnailMobileHeight: 165px;
-
-    --_thumbnailDesktopWidth: 150px;
-    --_thumbnailDesktopHeight: 220px;
-
-    .list {
-      .item {
-        .content {
-          /* Placeholder for author styles */
-          .author {
-          }
-          /* Placeholder for title styles */
-          .title {
-            font-size: var(--step-8);
-            margin-block: var(--step-3);
-          }
-          /* Placeholder for topic styles */
-          .topic {
-            color: white;
-            font-size: var(--step-6);
-            margin-block: var(--step-3);
-            mix-blend-mode: difference;
-          }
-          /* Placeholder for description styles */
-          .description {
-            line-height: 1.5;
-          }
-        }
-      }
-    }
-
-    .thumbnail {
-      .item {
-        .content {
-          /* Placeholder for title styles */
-          .title {
-          }
-          /* Placeholder for description styles */
-          .description {
-          }
-        }
-      }
-    }
-  }
-}
-</style>

package/app/pages/ui/tabs-y.vue

@@ -1,107 +0,0 @@
-<template>
-  <div>
-    <NuxtLayout name="default">
-      <template #layout-content>
-        <PageRow tag="div" variant="popout" :style-class-passthrough="['mbs-32']">
-          <h1 class="page-heading-2">Tabs #3</h1>
-          <p>Data driven accordian navigation with custom content</p>
-
-          <TabsCore axis="y" :nav-items="navLinks6" :style-class-passthrough="['class-modifier']">
-            <template v-for="(item, key) in navLinks6" #[`tab-${key}-trigger`]>{{ item.name }}</template>
-            <template #[`tab-0-content`]>
-              <p class="p-24">This is content slot 0</p>
-            </template>
-            <template #[`tab-1-content`]>
-              <p class="p-24">This is content slot 1</p>
-            </template>
-            <template #[`tab-2-content`]>
-              <p class="p-24">This is content slot 2</p>
-            </template>
-            <template #[`tab-3-content`]>
-              <p class="p-24">This is content slot 3</p>
-            </template>
-            <template #[`tab-4-content`]>
-              <p class="p-24">This is content slot 4</p>
-            </template>
-            <template #[`tab-5-content`]>
-              <p class="p-24">This is content slot 5</p>
-            </template>
-          </TabsCore>
-        </PageRow>
-      </template>
-    </NuxtLayout>
-  </div>
-</template>
-
-<script setup lang="ts">
-import type { ITabNav } from "~/types/components";
-definePageMeta({
-  layout: false,
-});
-
-useHead({
-  title: "UI Tabs",
-  meta: [{ name: "description", content: "Examples of UI Component Tabs" }],
-  bodyAttrs: {
-    class: "home",
-  },
-});
-
-const navLinks6: ITabNav[] = [
-  { name: "Home", path: "/" },
-  { name: "Dialogs", path: "/ui/dialog" },
-  { name: "Tabs", path: "/ui/tabs" },
-  { name: "Something Else", path: "/ui/something" },
-  { name: "Home Again", path: "/" },
-];
-</script>
-
-<style lang="css">
-.tabs-list.colour-test {
-  --_default-text: light-dark(var(--green-04), var(--green-05));
-  --_active-bg: light-dark(var(--red-10), var(--red-00));
-  --_active-text: light-dark(var(--sunset-03), var(--sunset-06));
-  --_active-indicator: light-dark(var(--orange-06), var(--orange-07));
-  --_hovered-bg: light-dark(var(--blue-07), var(--blue-03));
-  --_hovered-text: light-dark(var(--blue-04), var(--blue-10));
-  --_border-bottom: light-dark(var(--red-07), var(--red-06));
-
-  border-bottom: 0.1rem solid var(--_border-bottom);
-  margin-block: 3rem;
-
-  .nav__hovered {
-    background: var(--_hovered-bg);
-    color: var(--_hovered-text);
-  }
-
-  .nav__active {
-    background: var(--_active-bg);
-    color: var(--_active-text);
-  }
-
-  .nav__active-indicator {
-    background: var(--_active-indicator);
-    height: 0.4rem;
-  }
-
-  .tabs-list-item {
-    background: transparent;
-    border: 0;
-    color: var(--_default-text);
-    cursor: pointer;
-    font: inherit;
-    text-transform: uppercase;
-    font-weight: 500;
-    margin: 0;
-    padding: 1em 2em;
-
-    &:hover {
-      color: var(--_hovered-text);
-    }
-
-    &[aria-selected="true"] {
-      color: var(--_active-text);
-    }
-  }
-}
-</style>