srcdev-nuxt-components 9.3.6 → 9.3.8

package/app/pages/ui/tabs.vue

@@ -1,189 +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 #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>
-        </PageRow>
-
-        <PageRow 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>
-        </PageRow>
-
-        <PageRow 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>
-        </PageRow>
-      </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: "Dialogs", path: "/ui/dialog" },
-];
-
-const navLinks4: ITabNav[] = [
-  { name: "Home", path: "/" },
-  { name: "Dialogs", path: "/ui/dialog" },
-  { name: "Tabs", path: "/ui/tabs" },
-];
-
-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">
-.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

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

@@ -1,129 +0,0 @@
-<template>
-  <div>
-    <NuxtLayout name="default">
-      <template #layout-content>
-        <PageRow tag="div" variant="full" :style-class-passthrough="['view-transition-banner']">
-          <h2 class="page-heading-2">Wipe Away Vertical</h2>
-        </PageRow>
-        <PageRow tag="div" variant="full" :style-class-passthrough="['view-transition-banner']">
-          <p class="page-body-normal">Some dummy content</p>
-        </PageRow>
-
-        <PageRow 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>
-        </PageRow>
-
-        <PageRow tag="div" variant="full" :style-class-passthrough="['view-transition-banner']">
-          <p class="page-body-normal">Some dummy content</p>
-        </PageRow>
-
-        <PageRow tag="div" variant="full" :style-class-passthrough="['view-transition-banner']">
-          <p class="page-body-normal">Some dummy content</p>
-        </PageRow>
-      </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>