srcdev-nuxt-components 9.4.5 → 9.4.7

package/app/components/masonry-grid-sorted/MasonryGridSorted.vue

@@ -1,120 +0,0 @@
-<template>
-  <div
-    class="masonry-grid-wrapper"
-    :class="[elementClasses]"
-    :style="`--_masonry-grid-gap: ${gap}${unit}; --_item-min-width: ${itemMinWidth}px`"
-    ref="gridWrapper"
-  >
-    <template v-for="item in rearrangedItems" :key="item.id">
-      <div class="masonry-grid-item">
-        <slot :name="item.id"></slot>
-      </div>
-    </template>
-  </div>
-</template>
-
-<script setup lang="ts">
-const props = defineProps({
-  gridData: {
-    type: Array as PropType<any[]>,
-    default: () => [],
-  },
-  itemMinWidth: {
-    type: Number,
-    default: 300,
-  },
-  gap: {
-    type: Number,
-    default: 1.2,
-  },
-  unit: {
-    type: String,
-    default: "rem",
-  },
-  styleClassPassthrough: {
-    type: [String, Array] as PropType<string | string[]>,
-    default: () => [],
-  },
-})
-
-const { elementClasses, resetElementClasses } = useStyleClassPassthrough(props.styleClassPassthrough)
-
-const gridData = toRef(() => props.gridData)
-
-const gridWrapper = ref<HTMLDivElement>()
-
-const getColumnCountWithinGridWrapper = () => {
-  return gridWrapper.value ? Math.floor(gridWrapper.value.clientWidth / props.itemMinWidth) : 0
-}
-
-// const columns = ref(4);
-const columns = computed(() => {
-  return gridWrapper.value ? Math.floor(gridWrapper.value.clientWidth / props.itemMinWidth) : 0
-})
-
-const rearrangeArray = (items: any[], columns: number): any[] => {
-  const rows = Math.ceil(items.length / columns)
-  const rearrangedArray = []
-
-  for (let col = 0; col < columns; col++) {
-    for (let row = 0; row < rows; row++) {
-      const index = row * columns + col
-      if (index < items.length) {
-        rearrangedArray.push(items[index])
-      }
-    }
-  }
-
-  return rearrangedArray
-}
-
-const rearrangedItems = computed(() => rearrangeArray(props.gridData, columns.value))
-// const rearrangedItems = computed(() => {
-//   const rows = Math.ceil(props.gridData.length / columns.value);
-//   const rearrangedArray = [];
-
-//   for (let col = 0; col < columns.value; col++) {
-//     for (let row = 0; row < rows; row++) {
-//       const index = row * columns.value + col;
-//       if (index < props.gridData.length) {
-//         rearrangedArray.push(props.gridData[index]);
-//       }
-//     }
-//   }
-
-//   return rearrangedArray;
-// });
-
-watch(
-  () => props.styleClassPassthrough,
-  () => {
-    resetElementClasses(props.styleClassPassthrough)
-  }
-)
-
-// onMounted(() => {
-//   console.log(getColumnCountWithinGridWrapper());
-// });
-
-// useResizeObserver(gridWrapper, () => {
-//   console.log(getColumnCountWithinGridWrapper());
-// });
-</script>
-
-<style lang="css">
-@layer components {
-.masonry-grid-wrapper {
-  --_border-color: light-dark(hsl(0, 29%, 3%), hsl(0, 0%, 92%));
-
-  columns: var(--_item-min-width);
-  gap: var(--_masonry-grid-gap);
-
-  .masonry-grid-item {
-    break-inside: avoid;
-    outline: 0.1rem solid var(--_border-color);
-    padding: 1.2rem;
-    margin-block-end: var(--_masonry-grid-gap);
-  }
-}
-}
-</style>

package/app/components/pop-over/PopOver.vue

@@ -1,90 +0,0 @@
-<template>
-  <ClientOnly>
-    <button :popovertarget popovertargetaction="toggle" class="popover-trigger" :class="[elementClasses]">
-      <slot name="trigger"></slot>
-    </button>
-
-    <div class="dialog" popover role="tooltip" :id="popovertarget" :class="[elementClasses]">
-      <button :popovertarget popovertargetaction="hide">x</button>
-      <slot name="popoverCotent"></slot>
-    </div>
-  </ClientOnly>
-</template>
-
-<script setup lang="ts">
-const props = defineProps({
-  popovertarget: {
-    type: String,
-    required: true,
-  },
-  styleClassPassthrough: {
-    type: [String, Array] as PropType<string | string[]>,
-    default: () => [],
-  },
-})
-
-const anchorName = `--anchor-${useId()}`
-
-const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough)
-</script>
-
-<style scoped lang="css">
-@layer components {
-@layer popover-setup {
-  /* @position-try --right {
-    inset: auto;
-    top: anchor(top);
-    left: calc(anchor(right) + 10px);
-  }
-
-  @position-try --left {
-    inset: auto;
-    top: anchor(top);
-    right: calc(anchor(left) + 10px);
-  } */
-
-  .popover-trigger {
-    anchor-name: v-bind(anchorName);
-  }
-
-  .dialog {
-    display: none;
-    position: absolute;
-    position-anchor: v-bind(anchorName);
-    margin: 0;
-    inset: auto;
-    top: calc(anchor(top) + 0px);
-    left: calc(anchor(right) + 10px);
-    opacity: 0;
-    transition: opacity 200ms, display 200ms, overlay 200ms;
-    transition-behavior: allow-discrete;
-
-    position-try-fallbacks: flip-inline;
-
-    &:popover-open {
-      display: block;
-      opacity: 1;
-
-      @starting-style {
-        display: block;
-        opacity: 0;
-      }
-    }
-  }
-
-  @position-try --top-left {
-    top: anchor(top);
-    right: calc(anchor(left + 10px));
-    left: unset;
-    /* width: revert; */
-  }
-
-  @position-try --bottom-right {
-    top: anchor(bottom);
-    /* right: calc(anchor(left + 10px)); */
-    /* left: unset; */
-    /* width: revert; */
-  }
-}
-}
-</style>

package/app/layouts/default.vue

@@ -1,308 +0,0 @@
-<template>
-  <div class="page-layout">
-    <SiteHeader
-      :responsive-nav-links
-      :gap-between-first-and-second-nav="12"
-      page-row-variant="full"
-      :style-class-passthrough="['header']"
-      :nav-style-class-passthrough="['site-header-nav']"
-      :overflow-details-summary-icons="{
-        more: 'gravity-ui:ellipsis',
-        burger: 'gravity-ui:bars',
-      }"
-      :collapse-at-main-nav-intersection="false"
-      :allow-expand-on-gesture="false"
-    >
-      <template #branding>
-        <NuxtLink to="/" class="home-link">
-          SRCDEV
-          <span>components</span>
-        </NuxtLink>
-      </template>
-      <template #secondaryNavigation>
-        <ul class="secondary-navigation-list">
-          <li class="secondary-navigation-item">
-            <NuxtLink class="secondary-navigation-link" to="/">
-              <Icon name="material-symbols:settings-outline-rounded" class="icon" aria-hidden="true" />
-              <span class="sr-only">Settings</span>
-            </NuxtLink>
-          </li>
-        </ul>
-      </template>
-    </SiteHeader>
-    <PageRow id="main-content" class="main-content" tag="main" variant="full" :is-landmark="true">
-      <template #default>
-        <slot name="layout-content">Page content goes here</slot>
-      </template>
-    </PageRow>
-    <PageRow id="footer-content" tag="footer" variant="full" :is-landmark="true">
-      <template #default>
-        <p>Footer content here</p>
-      </template>
-    </PageRow>
-  </div>
-</template>
-
-<script setup lang="ts">
-import type { ResponsiveHeaderProp } from "~/types/components";
-
-const responsiveNavLinks = {
-  firstNav: [
-    {
-      name: "Components",
-      iconName: "material-symbols:widgets",
-      childLinksTitle: "UI Components",
-      childLinks: [
-        { name: "Wipe Away Vertical", path: "/ui/wipe-away-vertical" },
-        { name: "Scroll Reveal Image", path: "/ui/scroll-reveal-image" },
-        { name: "Tooltips", path: "/ui/tooltips" },
-        { name: "Marquee Scroller", path: "/ui/marquee-scroller" },
-        { name: "Banner", path: "/ui/display-banner" },
-        { name: "Banner Video", path: "/banner-video" },
-        { name: "Section Parallax", path: "/ui/section-parallax" },
-        { name: "Animated SVG Text", path: "/ui/animated-svg-text" },
-        { name: "Carousel (Basic)", path: "/ui/carousel-basic" },
-        { name: "Carousel (Infinite)", path: "/ui/carousel-infinite" },
-        { name: "Carousel (Flip)", path: "/ui/carousel-flip" },
-        { name: "Slider Gallery", path: "/ui/slider-gallery" },
-        { name: "Container Glow", path: "/ui/container-glow" },
-        { name: "Accordian", path: "/ui/accordian" },
-        { name: "Display Details", path: "/ui/display-details" },
-        { name: "Card Core", path: "/ui/card-core" },
-        { name: "Glowing Border", path: "/ui/glowing-border" },
-        { name: "Display Toast", path: "/ui/display-toast" },
-        { name: "Prompts", path: "/ui/display-prompt" },
-        { name: "Masked Alert", path: "/ui/mask-element" },
-        { name: "Expanding Panel", path: "/ui/expanding-panel" },
-        { name: "Dialogs", path: "/ui/display-dialog" },
-        { name: "Tabs X", path: "/ui/tabs" },
-        { name: "Tabs Y", path: "/ui/tabs-y" },
-        { name: "Rotating Carousel", path: "/ui/rotating-carousel" },
-        { name: "Clipped Panels", path: "/ui/clipped-panels" },
-        { name: "Display Chip", path: "/ui/display-chip" },
-        { name: "Display Avatar", path: "/ui/display-avatar" },
-        { name: "Display Pill", path: "/ui/display-pill" },
-        { name: "Qr Codes", path: "/ui/qr-code/display" },
-        { name: "Anchor Scroll", path: "/ui/anchor-scroll" },
-        { name: "Anchor Scroll (TabNavigation)", path: "/ui/anchor-scroll-tab-navigation" },
-      ],
-    },
-    {
-      name: "Layouts",
-      iconName: "material-symbols:responsive-layout",
-      childLinksTitle: "UI Layouts",
-      childLinks: [
-        { name: "Block Decorators", path: "/ui/block-decorators" },
-        { name: "Navigation Horizontal", path: "/ui/navigation/navigation-horizontal" },
-        { name: "Site Navigation", path: "/ui/navigation/site-navigation" },
-        { name: "Tab Navigation", path: "/ui/navigation/tab-navigation" },
-        { name: "Deep Expanding Menu", path: "/ui/deep-expanding-menu" },
-        { name: "Magnetic Navigation", path: "/ui/magnetic-navigation" },
-        { name: "Page Row", path: "/ui/page-row" },
-        { name: "Layout Grid A", path: "/ui/layout-grid-a" },
-        { name: "Layout Grid B", path: "/ui/layout-grid-b" },
-        { name: "Simple Grid", path: "/ui/simple-grid" },
-        { name: "Layout Content Docs", path: "/ui/layout-content-docs" },
-        { name: "Masonry Grid Simple", path: "/ui/masonry-grid" },
-        { name: "Masonry Grid Sorted", path: "/ui/masonry-grid-sorted" },
-        { name: "Masonry Grid Ordered", path: "/ui/masonry-grid-ordered" },
-        { name: "Masonry Columns", path: "/ui/masonry-columns" },
-        { name: "Page Hero Highlights", path: "/page-hero-highlights" },
-      ],
-    },
-    {
-      name: "Forms",
-      iconName: "material-symbols:custom-typography",
-      childLinksTitle: "Forms & Inputs",
-      childLinks: [
-        { name: "Buttons", path: "/forms/examples/buttons" },
-        { name: "Example Form", path: "/forms/examples/material/text-fields" },
-        { name: "Example Form", path: "/forms/examples/material/text-fields" },
-      ],
-    },
-    {
-      name: "Typography",
-      iconName: "material-symbols:custom-typography",
-      childLinksTitle: "Typography",
-      childLinks: [
-        { name: "Hero Text", path: "/typography/hero-text" },
-        { name: "Page Headings", path: "/typography/page-heading" },
-        { name: "Page Body", path: "/typography/page-body" },
-        { name: "Page Links", path: "/typography/page-link" },
-      ],
-    },
-  ],
-  secondNav: [
-    { name: "Some other link", iconName: "material-symbols:widgets", path: "#link-description" },
-    {
-      name: "Help",
-      childLinksTitle: "Find Help",
-      childLinks: [
-        { name: "FAQs", path: "#" },
-        { name: "Contact Us", path: "#" },
-        { name: "Logout", path: "#" },
-      ],
-    },
-    {
-      name: "Account",
-      childLinksTitle: "Manage Your Account",
-      childLinks: [
-        { name: "Your Profile", path: "#" },
-        { name: "Settings", path: "/ui/settings" },
-        { name: "Logout", path: "#" },
-      ],
-    },
-  ],
-} as ResponsiveHeaderProp;
-
-// *** COLOR SCHEME INITIALIZATION ***
-onMounted(() => {
-  const getSystemPreference = () => {
-    return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
-  };
-
-  const applyColorScheme = (scheme: string) => {
-    const htmlElement = document.documentElement;
-    htmlElement.classList.remove("system", "dark", "light");
-
-    // If scheme is "system", use the actual system preference
-    const actualScheme = scheme === "system" ? getSystemPreference() : scheme;
-    htmlElement.classList.add(actualScheme);
-  };
-
-  // Listen for system preference changes
-  const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
-  const handleSystemChange = () => {
-    const storedValue = localStorage.getItem("useSettingsStore");
-    if (storedValue) {
-      const parsed = JSON.parse(storedValue);
-      // Only update if user has "system" selected
-      if (parsed.colourScheme === "system") {
-        applyColorScheme("system");
-      }
-    }
-  };
-
-  mediaQuery.addEventListener("change", handleSystemChange);
-
-  try {
-    const storedValue = localStorage.getItem("useSettingsStore");
-
-    if (storedValue) {
-      const parsed = JSON.parse(storedValue);
-      applyColorScheme(parsed.colourScheme || "system");
-    } else {
-      // For new users, detect and apply system preference
-      const systemPreference = getSystemPreference();
-      applyColorScheme(systemPreference);
-    }
-  } catch {
-    // Fallback to system preference
-    const systemPreference = getSystemPreference();
-    applyColorScheme(systemPreference);
-  }
-});
-</script>
-<style lang="css">
-.page-layout {
-  display: grid;
-  grid-template-columns: 1fr;
-  grid-template-rows: auto 1fr auto;
-  align-items: start;
-
-  .main-content {
-    container-type: inline-size;
-  }
-}
-
-/* ─── Header row layout ─────────────────────────────────────────────────── */
-.header {
-  .debug-grid {
-    display: none !important;
-  }
-
-  width: 100%;
-
-  /* SiteHeader token overrides — see .claude/skills/components/site-header.md */
-  --site-header-gap: 2.4rem;
-  --site-header-padding-inline: 2.4rem;
-  --site-header-bg: #000;
-  --site-header-position: relative;
-  --site-header-z-index: 9;
-
-  .home-link {
-    display: flex;
-    flex-direction: column;
-    text-wrap-mode: nowrap;
-    font-size: var(--step-5);
-    letter-spacing: 0.2em;
-    color: var(--slate-00);
-    text-decoration: none;
-
-    span {
-      font-size: var(--step-3);
-      letter-spacing: initial;
-    }
-
-    &:hover {
-      border-radius: 0.4rem;
-      outline: 2px solid var(--green-08);
-      outline-offset: 0.4rem;
-    }
-  }
-}
-
-/* ─── ResponsiveHeader token overrides for this layout ──────────────────── */
-.site-header-nav {
-  --responsive-header-margin: 1.2rem;
-  --responsive-header-bg: #efefef05;
-  --responsive-header-border: 1px solid transparent;
-  --responsive-header-border-radius: 0.8rem;
-  --responsive-header-padding-block: 1rem;
-  --responsive-header-padding-inline: 1.2rem;
-  --responsive-header-max-height: 6.4rem;
-  --responsive-header-inline-size: 100%;
-
-  --responsive-header-color: var(--slate-00);
-  --responsive-header-link-color: var(--slate-00);
-
-  /* Fixed (non-fluid) nav-link font-size — deliberately NOT var(--step-*).
-     A vw-based clamp() here drifts with the scrollbar (see
-     ResponsiveHeader.vue's token comment) without ever re-triggering the
-     overflow-collapse ResizeObserver, silently letting one extra item fit
-     that shouldn't. Values TBC after a visual pass. */
-  --responsive-header-link-font-size: 1.2rem;
-  @media (min-width: 768px) {
-    --responsive-header-link-font-size: 1.4rem;
-  }
-  @media (min-width: 1024px) {
-    --responsive-header-link-font-size: 1.5rem;
-  }
-
-  --responsive-header-sub-nav-bg: #000;
-  --responsive-header-sub-nav-border: 1px solid #efefef75;
-
-  --responsive-header-overflow-btn-bg: var(--slate-08);
-  --responsive-header-overflow-btn-size: 3rem;
-  --responsive-header-overflow-btn-border: 1px solid #ffffff90;
-  --responsive-header-overflow-btn-outline: 1px solid #ffffff10;
-  --responsive-header-overflow-btn-icon-color: var(--slate-00);
-  --responsive-header-overflow-btn-hover-outline: 2px solid var(--green-08);
-
-  --responsive-header-overflow-nav-bg: #000;
-  --responsive-header-overflow-nav-border: 0.1rem solid #ffffff90;
-  --responsive-header-overflow-nav-padding-block: 0;
-
-  --overflow-nav-link-color: var(--slate-00);
-  --overflow-nav-link-border-color: #efefef75;
-  --overflow-nav-sub-item-color: var(--slate-00);
-  --overflow-nav-sub-item-font-size: var(--step-4);
-
-  --responsive-nav-decorator-indicator-color: var(--slate-00);
-  --responsive-nav-decorator-hovered-indicator-color: var(--green-08);
-  --responsive-nav-decorator-hovered-bg: oklch(100% 0 0 / 8%);
-  --overflow-nav-decorator-indicator-color: var(--slate-00);
-  --overflow-nav-decorator-hovered-indicator-color: var(--green-08);
-  --overflow-nav-decorator-hovered-bg: oklch(100% 0 0 / 6%);
-}
-</style>

package/app/layouts/site-navigation-demo.vue

@@ -1,188 +0,0 @@
-<template>
-  <div class="site-nav-demo-layout">
-    <header class="site-nav-demo-header">
-      <NuxtLink to="/" class="site-nav-demo-logo">SiteNav Demo</NuxtLink>
-      <SiteNavigation :nav-item-data="navItemData" nav-align="right" />
-    </header>
-    <main class="site-nav-demo-main">
-      <slot></slot>
-    </main>
-  </div>
-</template>
-
-<script setup lang="ts">
-import type { NavItemData } from "~/types/components/navigation-horizontal.d";
-
-const navItemData: NavItemData = {
-  main: [
-    { text: "Home", href: "/ui/navigation/site-navigation" },
-    { text: "About", href: "/ui/navigation/site-navigation/about" },
-    { text: "Services", href: "/ui/navigation/site-navigation/services" },
-    { text: "Portfolio", href: "/ui/navigation/site-navigation/portfolio" },
-    { text: "Contact", href: "/ui/navigation/site-navigation/contact" },
-  ],
-};
-</script>
-
-<style lang="css">
-.site-nav-demo-layout {
-  min-height: 100dvh;
-  display: flex;
-  flex-direction: column;
-
-  .site-nav-demo-header {
-    display: flex;
-    align-items: center;
-    gap: 2.4rem;
-    padding-block: 1.2rem;
-    padding-inline: 2.4rem;
-    background-color: #0e0e0e;
-    border-block-end: 1px solid oklch(100% 0 0 / 10%);
-    position: sticky;
-    top: 0;
-    z-index: 10;
-  }
-
-  .site-nav-demo-logo {
-    font-size: 1.6rem;
-    font-weight: 600;
-    letter-spacing: 0.05em;
-    color: var(--warm-01, #fff);
-    text-decoration: none;
-    text-wrap: nowrap;
-    flex-shrink: 0;
-  }
-
-  .site-navigation {
-    flex: 1;
-    min-width: 0;
-  }
-
-  .site-nav-demo-main {
-    flex: 1;
-    padding: 4rem 2.4rem;
-    max-width: 80rem;
-    margin-inline: auto;
-    width: 100%;
-  }
-}
-
-/* Shared demo page styles */
-.snav-demo-page {
-  h1,
-  h2,
-  h3 {
-    margin-block-end: 1.6rem;
-  }
-  h2 {
-    margin-block-start: 4rem;
-  }
-  > p {
-    margin-block-end: 2.4rem;
-    line-height: 1.6;
-  }
-  ul {
-    padding-inline-start: 2rem;
-    margin-block-end: 2.4rem;
-    line-height: 2;
-  }
-}
-
-.snav-demo-hero {
-  width: 100%;
-  height: auto;
-  aspect-ratio: 2 / 1;
-  object-fit: cover;
-  border-radius: 0.8rem;
-  display: block;
-  margin-block-end: 2.4rem;
-}
-
-.snav-demo-grid {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  gap: 1.6rem;
-
-  @media (max-width: 600px) {
-    grid-template-columns: repeat(2, 1fr);
-  }
-}
-
-.snav-demo-grid--wide {
-  grid-template-columns: repeat(2, 1fr);
-
-  @media (max-width: 600px) {
-    grid-template-columns: 1fr;
-  }
-}
-
-.snav-demo-img {
-  width: 100%;
-  height: auto;
-  aspect-ratio: 3 / 2;
-  object-fit: cover;
-  border-radius: 0.4rem;
-  display: block;
-}
-
-.snav-demo-split {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 3.2rem;
-  align-items: start;
-  margin-block-end: 4rem;
-
-  @media (max-width: 650px) {
-    grid-template-columns: 1fr;
-  }
-}
-
-.snav-demo-split__text {
-  h2,
-  h3 {
-    margin-block-start: 2.4rem;
-  }
-  p {
-    line-height: 1.6;
-    margin-block-end: 1.6rem;
-  }
-}
-
-.snav-demo-split__img {
-  width: 100%;
-  height: auto;
-  aspect-ratio: 3 / 4;
-  object-fit: cover;
-  border-radius: 0.4rem;
-  display: block;
-}
-
-.snav-demo-services {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  gap: 2.4rem;
-
-  @media (max-width: 650px) {
-    grid-template-columns: 1fr;
-  }
-}
-
-.snav-demo-service-card {
-  border-radius: 0.8rem;
-  overflow: hidden;
-  background: oklch(100% 0 0 / 5%);
-}
-
-.snav-demo-service-card__body {
-  padding: 1.6rem;
-
-  h3 {
-    margin-block-end: 0.8rem;
-  }
-  p {
-    font-size: 1.4rem;
-    line-height: 1.6;
-    opacity: 0.8;
-  }
-}
-</style>