srcdev-nuxt-components 8.0.2 → 9.0.0

package/app/pages/ui/tabs.vue

@@ -0,0 +1,192 @@
+<template>
+  <div>
+    <NuxtLayout name="default">
+      <template #layout-content>
+        <LayoutRow tag="div" variant="popout" :style-class-passthrough="['mbs-32']">
+          <h1 class="page-heading-2">Tabs #1</h1>
+          <p>Static tabs</p>
+
+          <TabsCore
+            :nav-items="navLinks3"
+            :item-count="3"
+            :transition-duration="300"
+            :style-class-passthrough="['class-modifier']"
+          >
+            <template #[`tab-0-trigger`]>0 - Tab 1</template>
+            <template #[`tab-1-trigger`]>1 - Tab 2</template>
+            <template #[`tab-2-trigger`]>2 - Tab 3</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>
+          </TabsCore>
+        </LayoutRow>
+
+        <LayoutRow tag="div" variant="popout" :style-class-passthrough="['mbs-32']">
+          <h2 class="page-heading-2">Tabs #2</h2>
+          <p>Data driven tabs</p>
+
+          <TabsCore :item-count="4" :style-class-passthrough="['class-modifier']">
+            <template v-for="(item, key) in navLinks4" #[`tab-${key}-trigger`]>{{ key }} - {{ 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>
+          </TabsCore>
+        </LayoutRow>
+
+        <LayoutRow tag="div" variant="popout" :style-class-passthrough="['mbs-32']">
+          <h2 class="page-heading-2">Tabs #3</h2>
+          <p>Data driven accordian navigation with custom content</p>
+
+          <TabsCore :item-count="6" :style-class-passthrough="['class-modifier']">
+            <template v-for="(item, key) in navLinks6" #[`tab-${key}-trigger`]>{{ key }} - {{ 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">
+definePageMeta({
+  layout: false,
+});
+
+useHead({
+  title: "UI Tabs",
+  meta: [{ name: "description", content: "Examples of UI Component Tabs" }],
+  bodyAttrs: {
+    class: "home",
+  },
+});
+
+interface ITabNav {
+  action?: string;
+  name: string;
+  path?: string;
+}
+
+const navLinks3: ITabNav[] = [
+  { name: "Home", path: "/" },
+  { name: "Layout Row", path: "/ui/layout-row" },
+  { name: "Dialogs", path: "/ui/dialog" },
+];
+
+const navLinks4: ITabNav[] = [
+  { name: "Home", path: "/" },
+  { name: "Layout Row", path: "/ui/layout-row" },
+  { name: "Dialogs", path: "/ui/dialog" },
+  { name: "Tabs", path: "/ui/tabs" },
+];
+
+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">
+.class-modifier {
+  &.tabs-core {
+    .tabs-list {
+      /* custom css */
+
+      .nav__hovered {
+        /* custom css */
+      }
+
+      .nav__active {
+        /* custom css */
+      }
+
+      .nav__active-indicator {
+        /* custom css */
+      }
+
+      .tabs-list-item {
+        /* custom css */
+
+        &:hover {
+          /* custom css */
+        }
+
+        &[aria-selected="true"] {
+          /* custom css */
+        }
+      }
+
+      .nav__hovered {
+        /* custom css */
+      }
+
+      .nav__active {
+        /* custom css */
+      }
+
+      .nav__active-indicator {
+        /* custom css */
+      }
+
+      .tabs-list-item {
+        /* custom css */
+
+        &:hover {
+          /* custom css */
+        }
+
+        &[aria-selected="true"] {
+          /* custom css */
+        }
+
+        &.transitioning {
+          /* custom css */
+        }
+      }
+    }
+
+    .tab-content-wrapper {
+      /* custom css */
+
+      .tab-content {
+        /* custom css */
+      }
+    }
+  }
+}
+</style>

package/app/pages/ui/tooltips.vue

@@ -0,0 +1,104 @@
+<template>
+  <div>
+    <NuxtLayout name="default">
+      <template #layout-content>
+        <LayoutRow tag="div" variant="full-width" :styleClassPassthrough="['tooltips-page-row', 'mbe-20']">
+          <h1 class="page-heading-2">Tooltips</h1>
+          <button @click.prevent="restartGuide" :disabled="isGuideRunning">
+            {{ isGuideRunning ? "Guide running..." : "Run guide again?" }}
+          </button>
+        </LayoutRow>
+
+        <LayoutRow tag="div" variant="full" :style-class-passthrough="['mbe-20']">
+          <h2 class="page-heading-2">Full Track (1fr)</h2>
+
+          <div ref="tooltipGuide">
+            <DisplayTooltipDefined
+              :contentText="{
+                tooltipTitle: {
+                  tag: 'h3',
+                  text: 'Defined Tooltip Title',
+                },
+                tooltipContent: {
+                  tag: 'p',
+                  text: 'This is the content for the defined tooltip component.',
+                },
+                tooltipAction: {
+                  tag: 'p',
+                  text: 'Step 1 of 5',
+                },
+              }"
+              :style-class-passthrough="['mbe-20']"
+            >
+              <template #triggerContent>Trigger From Tooltip Defined</template>
+            </DisplayTooltipDefined>
+
+            <DisplayTooltip tooltip-id="profile-setup-tooltip" :style-class-passthrough="['mbe-20']">
+              <template #triggerContent>Complete your profile setup for personalized recommendations.</template>
+              <template #tooltipContent>
+                <div class="custom-tooltip-slot-content">
+                  <div class="title subtitle-sm">
+                    Adding your personal information, preferences, and interests helps us provide better recommendations
+                    and tailor your experience to your specific needs and goals.
+                  </div>
+                  <div class="body popover-action">
+                    <button
+                      popovertarget="profile-setup-tooltip"
+                      popovertargetaction="hide"
+                      class="display-tooltip-close-button"
+                      aria-label="Close tool tip"
+                    >
+                      Close
+                    </button>
+                  </div>
+                </div>
+              </template>
+            </DisplayTooltip>
+          </div>
+        </LayoutRow>
+      </template>
+    </NuxtLayout>
+  </div>
+</template>
+
+<script setup lang="ts">
+definePageMeta({
+  layout: false,
+})
+
+useHead({
+  title: "UI Tooltips - Nuxt Components",
+  meta: [{ name: "description", content: "Examples of Tooltips in Nuxt Components" }],
+  // bodyAttrs: {
+  //   class: "home",
+  // },
+})
+
+const hideTooltipTrigger = ref(false)
+const tooltipGuide = useTemplateRef<HTMLElement | null>("tooltipGuide")
+
+// Use the tooltip guide composable
+const { isGuideRunning, restartGuide } = useTooltipsGuide(tooltipGuide, {
+  autoStart: true,
+  startDelay: 2000,
+})
+</script>
+
+<style lang="css">
+.tooltips-page-row {
+  .custom-tooltip-slot-content {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+
+    .title {
+      color: var(--nuxt-text-primary);
+    }
+
+    .body {
+      display: flex;
+      justify-content: flex-end;
+    }
+  }
+}
+</style>

package/app/pages/ui/wipe-away-vertical.vue

@@ -0,0 +1,129 @@
+<template>
+  <div>
+    <NuxtLayout name="default">
+      <template #layout-content>
+        <LayoutRow tag="div" variant="full-width" :style-class-passthrough="['view-transition-banner']">
+          <h2 class="page-heading-2">Wipe Away Vertical</h2>
+        </LayoutRow>
+        <LayoutRow tag="div" variant="full-width" :style-class-passthrough="['view-transition-banner']">
+          <p class="page-body-normal">Some dummy content</p>
+        </LayoutRow>
+
+        <LayoutRow tag="div" variant="full">
+          <WipeAwayVertical :item-count="scrollingSection.length">
+            <template v-for="(item, index) in stickyItems" :key="`sticky-${index}`" v-slot:[`stickyItem-${index}`]>
+              <div class="sticky-item-container">
+                <NuxtImg :src="item.src" :alt="item.alt" class="sticky-item-image" />
+              </div>
+            </template>
+
+            <template
+              v-for="(section, index) in scrollingSection"
+              :key="`scrolling-${index}`"
+              v-slot:[`scrollingItem-${index}`]
+            >
+              <div class="scrolling-section-content">
+                <h3 class="section-heading-3">{{ section.title }}</h3>
+                <p class="body-text">
+                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et
+                  dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+                  aliquip ex ea commodo consequat.
+                </p>
+              </div>
+            </template>
+          </WipeAwayVertical>
+        </LayoutRow>
+
+        <LayoutRow tag="div" variant="full-width" :style-class-passthrough="['view-transition-banner']">
+          <p class="page-body-normal">Some dummy content</p>
+        </LayoutRow>
+
+        <LayoutRow tag="div" variant="full-width" :style-class-passthrough="['view-transition-banner']">
+          <p class="page-body-normal">Some dummy content</p>
+        </LayoutRow>
+      </template>
+    </NuxtLayout>
+  </div>
+</template>
+
+<script setup lang="ts">
+definePageMeta({
+  layout: false,
+})
+
+useHead({
+  title: "Wipe Away Vertical",
+  meta: [
+    {
+      name: "description",
+      content: "Wipe Away Vertical Meta description content",
+    },
+  ],
+  bodyAttrs: {
+    class: "wipe-away-vertical-page",
+  },
+})
+
+const stickyItems = [
+  {
+    src: "/images/rotating-carousel/image-1.webp",
+    alt: "Sample Image 1",
+  },
+  {
+    src: "/images/rotating-carousel/image-2.webp",
+    alt: "Sample Image 2",
+  },
+  {
+    src: "/images/rotating-carousel/image-4.webp",
+    alt: "Sample Image 4",
+  },
+  {
+    src: "/images/rotating-carousel/image-5.webp",
+    alt: "Sample Image 5",
+  },
+  {
+    src: "/images/rotating-carousel/image-6.webp",
+    alt: "Sample Image 6",
+  },
+]
+
+const scrollingSection = [
+  { title: "View Timeline 1" },
+  { title: "View Timeline 2" },
+  { title: "View Timeline 3" },
+  { title: "View Timeline 4" },
+  { title: "View Timeline 5" },
+]
+</script>
+
+<style lang="css">
+.wipe-away-vertical-page {
+  /* CSS styles */
+
+  .view-transition-banner {
+    min-block-size: 75svh;
+  }
+
+  .wipe-away-vertical {
+    .sticky-items-container {
+      width: 50%;
+      aspect-ratio: 1;
+
+      @media (width >= 1024px) {
+        width: 512px;
+      }
+    }
+
+    .scrolling-section {
+      min-height: 100vh;
+
+      background-color: darkcyan;
+      overflow-y: hidden;
+
+      &:nth-child(odd) {
+        background-color: darkgoldenrod;
+      }
+    }
+  }
+}
+</style>

package/app/plugins/css-anchor-positioning-polyfill.client.ts

@@ -0,0 +1,5 @@
+export default defineNuxtPlugin(async () => {
+  if (!("anchorName" in document.documentElement.style)) {
+    await import("@oddbird/css-anchor-positioning");
+  }
+});

package/app/stores/useServicesStore.ts

@@ -0,0 +1,37 @@
+import type { Service } from "~/types/types.services";
+
+export type { Service };
+
+export const useServicesStore = defineStore(
+  "useServicesStore",
+  () => {
+    // State
+    const servicesData = ref<Service[]>([]);
+
+    // Actions
+    const fetchServicesData = async () => {
+      try {
+        const data = await $fetch<Service[]>("/api/services");
+        servicesData.value = data;
+      } catch (error) {
+        console.error("Error fetching services data:", error);
+      }
+    };
+
+    // Getter to find a service by slug
+    const serviceDataBySlug = (slug: string) => {
+      return servicesData.value.find((service) => service.slug === slug);
+    };
+
+    return {
+      fetchServicesData,
+      servicesData,
+      serviceDataBySlug,
+    };
+  },
+  {
+    persist: {
+      storage: piniaPluginPersistedstate.cookies(),
+    },
+  }
+);

package/app/stores/useSettingsStore.ts

@@ -0,0 +1,35 @@
+// const delay = (t: number) => new Promise((r) => setTimeout(r, t))
+
+export const useSettingsStore = defineStore(
+  "useSettingsStore",
+  () => {
+    // State
+    const colourScheme = ref<"system" | "dark" | "light">("system");
+
+    // Getters
+    const currentColourScheme = computed(() => colourScheme.value);
+
+    // Actions
+    const setColourScheme = (newVal: "system" | "dark" | "light") => {
+      colourScheme.value = newVal;
+
+      if (import.meta.client && newVal !== null) {
+        // Remove existing color scheme classes
+        document.documentElement.classList.remove("system", "dark", "light");
+        // Add the new color scheme class
+        document.documentElement.classList.add(newVal);
+      }
+    };
+
+    return {
+      colourScheme,
+      currentColourScheme,
+      setColourScheme,
+    };
+  },
+  {
+    persist: {
+      storage: piniaPluginPersistedstate.localStorage(),
+    },
+  }
+);

package/app/types/components/hero-text.ts

@@ -0,0 +1,4 @@
+export interface TextConfig {
+  text: string;
+  styleClass?: "normal" | "accent";
+}

package/app/types/components/index.ts

@@ -8,3 +8,4 @@ export * from "./responsive-header.d"
 export * from "./display-toast.d"
 export * from "./qr-code.d"
 export * from "./alert-mask-core.d"
+export * from "./hero-text"