srcdev-nuxt-components 8.0.2 → 9.0.0

package/app/pages/ui/settings.vue

@@ -0,0 +1,80 @@
+<template>
+  <div>
+    <NuxtLayout name="default">
+      <template #layout-content>
+        <LayoutRow 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 />
+        </LayoutRow>
+
+        <LayoutRow tag="div" variant="popout" :style-class-passthrough="['mbe-20']">
+          <h1 class="page-heading-1 mbe-18">Default button elements</h1>
+
+          <div class="mb-12">
+            <p class="page-body-normal mbe-12"><code>class="test-button" data-theme="default"</code></p>
+            <button class="input-button-core" type="button">This is a button</button>
+          </div>
+        </LayoutRow>
+
+        <LayoutRow tag="div" variant="popout" :style-class-passthrough="['mbe-20']">
+          <h1 class="page-heading-1 mbe-18">Primary button elements</h1>
+
+          <div class="mb-12" data-theme="default">
+            <p class="page-body-normal mbe-12"><code>class="test-button" data-theme="default"</code></p>
+            <button class="input-button-core" type="button">This is a button</button>
+          </div>
+        </LayoutRow>
+
+        <LayoutRow tag="div" variant="popout" :style-class-passthrough="['mbe-20']">
+          <h1 class="page-heading-1 mbe-18">Error button elements</h1>
+
+          <div class="mb-12" data-theme="default" data-error>
+            <p class="page-body-normal mbe-12"><code>class="test-button" data-theme="error"</code></p>
+            <button class="input-button-core" type="button">This is a button</button>
+          </div>
+        </LayoutRow>
+
+        <LayoutRow tag="div" variant="popout" :style-class-passthrough="['mbe-20']">
+          <h1 class="page-heading-1 mbe-18">Success button elements</h1>
+
+          <div class="mb-12" data-theme="success">
+            <p class="page-body-normal mbe-12"><code>class="test-button" data-theme="success"</code></p>
+            <button class="input-button-core" type="button">This is a button</button>
+          </div>
+        </LayoutRow>
+      </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 {
+  .test-button {
+    /* all: unset; */
+    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-10);
+    border-radius: 100vw;
+  }
+}
+</style>

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

@@ -0,0 +1,66 @@
+<template>
+  <div>
+    <NuxtLayout name="default">
+      <template #layout-content>
+        <LayoutRow 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>
+
+          <DisplayGridCore
+            v-if="status === 'success'"
+            :grid-data="postsData?.posts.slice(0, displayCount) ?? ({} as Posts)"
+            :style-class-passthrough="['display-posts']"
+          >
+            <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>
+          </DisplayGridCore>
+
+          <p v-else class="page-body-normal">&hellip;Loading</p>
+        </LayoutRow>
+      </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-posts {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+
+  gap: 2rem;
+
+  .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

@@ -0,0 +1,261 @@
+<template>
+  <div>
+    <NuxtLayout name="default">
+      <template #layout-content>
+        <LayoutRow tag="div" variant="full-width" :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" />
+        </LayoutRow>
+      </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

@@ -0,0 +1,108 @@
+<template>
+  <div>
+    <NuxtLayout name="default">
+      <template #layout-content>
+        <LayoutRow 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>
+        </LayoutRow>
+      </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: "Layout Row", path: "/ui/layout-row" },
+  { 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>