srcdev-nuxt-components 9.3.6 → 9.3.8

package/app/pages/grid-stack.vue

@@ -1,252 +0,0 @@
-<template>
-  <div>
-    <NuxtLayout name="default">
-      <template #layout-content>
-        <!-- Demo 3: BannerVideo + overlay -->
-        <PageRow tag="div" variant="full" :style-class-passthrough="['mbe-48']">
-          <GridStack :tag="tag" class="grid-stack-video-demo">
-            <template #layer-1>
-              <BannerVideo
-                src="/images/banners/video/lake-banner.mp4"
-                poster="/images/banners/video/lake-banner.jpg"
-                alt="A serene lake landscape"
-                aspect-ratio="4/3"
-                object-fit="cover"
-                vertical-position="center"
-                horizontal-position="center"
-              />
-            </template>
-            <template #layer-2>
-              <div class="video-overlay">
-                <div class="video-overlay__content">
-                  <p class="video-overlay__eyebrow">GridStack layer-2</p>
-                  <h2 class="video-overlay__heading">Content over video</h2>
-                  <p class="video-overlay__body">
-                    This layer sits on top of the BannerVideo without
-                    <code>position: absolute</code>
-                    .
-                  </p>
-                </div>
-              </div>
-            </template>
-          </GridStack>
-        </PageRow>
-
-        <PageRow tag="div" variant="full" :style-class-passthrough="['mbe-32']">
-          <h1 class="page-heading-1">GridStack</h1>
-          <p class="page-body-normal">
-            Stacks slot content in the z-axis using
-            <code>grid-template-areas</code>
-            — no
-            <code>position: absolute</code>
-            . Layers share a single grid area; DOM order determines z-order (last slot is on top).
-          </p>
-        </PageRow>
-
-        <!-- Demo 1: Two layers -->
-        <PageRow tag="div" variant="full" :style-class-passthrough="['mbe-48']">
-          <h2 class="page-heading-2 mbe-16">Two layers</h2>
-          <GridStack class="grid-stack-demo">
-            <template #layer-1>
-              <div class="demo-layer demo-layer--base">layer-1 (base)</div>
-            </template>
-            <template #layer-2>
-              <div class="demo-layer demo-layer--overlay">layer-2 (overlay)</div>
-            </template>
-          </GridStack>
-        </PageRow>
-
-        <!-- Demo 2: Three layers -->
-        <PageRow tag="div" variant="full" :style-class-passthrough="['mbe-48']">
-          <h2 class="page-heading-2 mbe-16">Three layers</h2>
-          <GridStack class="grid-stack-demo">
-            <template #layer-1>
-              <div class="demo-layer demo-layer--base">layer-1 (base)</div>
-            </template>
-            <template #layer-2>
-              <div class="demo-layer demo-layer--mid">layer-2 (mid)</div>
-            </template>
-            <template #layer-3>
-              <div class="demo-layer demo-layer--overlay">layer-3 (overlay)</div>
-            </template>
-          </GridStack>
-        </PageRow>
-
-        <!-- Controls -->
-        <PageRow tag="div" variant="full">
-          <div class="grid-stack-demo-controls">
-            <p class="demo-controls__heading">Props (video demo)</p>
-            <div class="demo-controls__row">
-              <MultipleRadiobuttons
-                v-model="tag"
-                v-model:field-data="tagData"
-                name="tag"
-                label="tag"
-                legend="tag"
-                error-message=""
-                :is-button="true"
-                :is-pill="true"
-                :field-has-error="false"
-                options-layout="inline"
-              />
-            </div>
-          </div>
-        </PageRow>
-      </template>
-    </NuxtLayout>
-  </div>
-</template>
-
-<script setup lang="ts">
-import type { IFormMultipleOptions } from "~/types/forms/types.forms";
-
-definePageMeta({
-  layout: false,
-});
-
-useHead({
-  title: "GridStack",
-  meta: [{ name: "description", content: "GridStack component demo" }],
-  bodyAttrs: { class: "grid-stack-page" },
-});
-
-const tag = ref<"div" | "section" | "article" | "main">("div");
-
-const tagData = ref<IFormMultipleOptions>({
-  data: [
-    { id: "tag-div", name: "tag", value: "div", label: "div" },
-    { id: "tag-section", name: "tag", value: "section", label: "section" },
-    { id: "tag-article", name: "tag", value: "article", label: "article" },
-    { id: "tag-main", name: "tag", value: "main", label: "main" },
-  ],
-  total: 4,
-  skip: 0,
-  limit: 4,
-});
-</script>
-
-<style lang="css">
-.grid-stack-page {
-  code {
-    font-family: monospace;
-    font-size: 0.9em;
-    background: var(--slate-02);
-    padding: 0.1em 0.4em;
-    border-radius: 0.3rem;
-  }
-
-  .mbe-16 {
-    margin-block-end: 1.6rem;
-  }
-  .mbe-48 {
-    margin-block-end: 4.8rem;
-  }
-
-  /* Colored layer demos */
-  .grid-stack-demo {
-    border-radius: 0.8rem;
-    overflow: hidden;
-  }
-
-  .demo-layer {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    min-block-size: 20rem;
-    font-size: 1.4rem;
-    font-weight: 600;
-    border-radius: 0.8rem;
-  }
-
-  .demo-layer--base {
-    background: var(--slate-03);
-    color: var(--slate-09);
-  }
-
-  .demo-layer--mid {
-    background: color-mix(in srgb, var(--orange-06) 40%, transparent);
-    color: var(--orange-10);
-    margin: 2rem;
-    border-radius: 0.6rem;
-    border: 2px dashed var(--orange-07);
-  }
-
-  .demo-layer--overlay {
-    display: flex;
-    align-items: flex-end;
-    justify-content: flex-start;
-    padding: 1.6rem;
-    background: linear-gradient(to top, color-mix(in srgb, var(--slate-10) 60%, transparent) 0%, transparent 60%);
-    color: white;
-    border-radius: 0.8rem;
-    pointer-events: none;
-  }
-
-  /* Video overlay demo */
-  .video-overlay {
-    display: grid;
-    place-items: center;
-    pointer-events: none;
-  }
-
-  .video-overlay__content {
-    text-align: center;
-    padding: 2.4rem;
-    pointer-events: auto;
-  }
-
-  .video-overlay__eyebrow {
-    font-size: 1.1rem;
-    font-weight: 700;
-    text-transform: uppercase;
-    letter-spacing: 0.12em;
-    color: white;
-    margin-block-end: 0.8rem;
-    opacity: 0.8;
-  }
-
-  .video-overlay__heading {
-    font-size: 4rem;
-    font-weight: 700;
-    color: white;
-    margin-block-end: 1.2rem;
-    text-shadow: 0 2px 12px rgba(0 0 0 / 0.5);
-  }
-
-  .video-overlay__body {
-    font-size: 1.6rem;
-    color: white;
-    opacity: 0.9;
-    text-shadow: 0 1px 6px rgba(0 0 0 / 0.4);
-  }
-
-  .video-overlay__body code {
-    background: rgba(0 0 0 / 0.3);
-    color: white;
-  }
-
-  /* Controls */
-  .grid-stack-demo-controls {
-    padding: 1.6rem;
-    border: 1px solid var(--slate-06);
-    border-radius: 0.8rem;
-
-    .demo-controls__heading {
-      font-size: 1.1rem;
-      font-weight: 600;
-      text-transform: uppercase;
-      letter-spacing: 0.08em;
-      color: var(--slate-08);
-      margin-block-end: 1.2rem;
-    }
-
-    .demo-controls__row {
-      margin-block-end: 1.2rem;
-
-      &:last-child {
-        margin-block-end: 0;
-      }
-    }
-  }
-}
-</style>

package/app/pages/index.vue

@@ -1,127 +0,0 @@
-<template>
-  <div>
-    <NuxtLayout name="default">
-      <template #layout-content>
-        <PageRow tag="div" variant="full" :style-class-passthrough="['mbe-20']">
-          <h2 class="page-heading-2">GridStack</h2>
-          <NuxtLink class="page-body-normal" to="/grid-stack">GridStack</NuxtLink>
-        </PageRow>
-
-        <PageRow tag="div" variant="full" :style-class-passthrough="['mbe-20']">
-          <h2 class="page-heading-2">AutoGrid</h2>
-          <NuxtLink class="page-body-normal" to="/auto-grid">AutoGrid</NuxtLink>
-        </PageRow>
-
-        <PageRow tag="div" variant="full" :style-class-passthrough="['mbe-20']">
-          <h1 class="page-heading-1">Nuxt3 Components Layer</h1>
-          <p>
-            A collection of hand rolled UI components for Nuxt3 that can be added as a layer (extended into another
-            Nuxt3 app)
-          </p>
-        </PageRow>
-
-        <PageRow tag="div" variant="full" :style-class-passthrough="['mbe-20']">
-          <h1 class="page-heading-1">Services test pages</h1>
-          <NuxtLink class="page-body-normal" to="/ui/services/services-cards">Services Cards</NuxtLink>
-        </PageRow>
-
-        <PageRow tag="div" variant="full" :style-class-passthrough="['mbe-20']">
-          <NuxtLink class="page-body-normal" to="/ui/services/services-sections-compact">
-            Services Sections Compact
-          </NuxtLink>
-        </PageRow>
-
-        <PageRow tag="div" variant="full" :style-class-passthrough="['mbe-20']">
-          <h1 class="page-heading-1">Profile Section</h1>
-          <NuxtLink class="page-body-normal" to="/ui/profile-section">Profile Section</NuxtLink>
-        </PageRow>
-
-        <PageRow tag="div" variant="full" :style-class-passthrough="['mbe-20']">
-          <h1 class="page-heading-1">Contact Section</h1>
-          <NuxtLink class="page-body-normal" to="/ui/contact-section">Contact Section</NuxtLink>
-        </PageRow>
-
-        <PageRow tag="div" variant="inset-content" :style-class-passthrough="['mbe-20']">
-          <h2 class="page-heading-2">PopOver component 1</h2>
-          <ClientOnly>
-            <p>popoverSupported({{ popoverSupported }})</p>
-          </ClientOnly>
-
-          <PopOver popovertarget="profile1">
-            <template #trigger>
-              <img class="profile-image" src="https://ui-avatars.com/api/name=1?background=0A8A0A&color=fff" alt="" />
-            </template>
-            <template #popoverCotent>
-              <h2>Popover content 1</h2>
-            </template>
-          </PopOver>
-        </PageRow>
-
-        <PageRow tag="div" variant="inset-content" :style-class-passthrough="['mbe-20']">
-          <h2 class="page-heading-2">PopOver component 2</h2>
-          <div class="justify-end">
-            <PopOver popovertarget="profile2">
-              <template #trigger>
-                <img class="profile-image" src="https://ui-avatars.com/api/name=2?background=0A8A0A&color=fff" alt="" />
-              </template>
-              <template #popoverCotent>
-                <h2>Popover content 2</h2>
-              </template>
-            </PopOver>
-          </div>
-        </PageRow>
-
-        <PageRow tag="div" variant="popout" :style-class-passthrough="['mbe-20']">
-          <h2 class="page-heading-2">Masonry Grid</h2>
-          <MasonryGrid :grid-data="quotesData?.quotes.slice(0, qoutesDisplayCount) ?? {}">
-            <template
-              v-for="(item, index) in quotesData?.quotes.slice(0, qoutesDisplayCount)"
-              :key="item.id"
-              #[item.id]
-            >
-              <div>
-                <p class="">{{ index + 1 }}: {{ item.author }}</p>
-                <p class="">{{ item.quote }}</p>
-              </div>
-            </template>
-          </MasonryGrid>
-        </PageRow>
-      </template>
-    </NuxtLayout>
-  </div>
-</template>
-
-<script setup lang="ts">
-import type { IQuotes } from "~/types/types.quotes";
-
-definePageMeta({
-  layout: false,
-});
-
-useHead({
-  title: "Home",
-  meta: [{ name: "description", content: "Nuxt Components Layer extending a Nuxt project" }],
-  bodyAttrs: {
-    class: "home",
-  },
-});
-
-const qoutesDisplayCount = 21;
-const { data: quotesData } = await useFetch<IQuotes>("https://dummyjson.com/quotes");
-
-const popoverSupported = computed(() => {
-  return "anchorName" in document.documentElement.style;
-});
-</script>
-
-<style lang="css">
-.justify-end {
-  display: flex;
-  justify-content: flex-end;
-}
-
-.qr-code {
-  width: 250px;
-  height: 250px;
-}
-</style>

package/app/pages/page-hero-highlights.vue

@@ -1,204 +0,0 @@
-<template>
-  <div>
-    <NuxtLayout name="default">
-      <template #layout-content>
-        <PageHeroHighlights
-          tag="section"
-          :width-constrained="widthConstrained"
-          :content-align="contentAlign"
-          :content-panel="contentPanel"
-          :highlights-equal-widths="highlightsEqualWidths"
-          :highlights-justify="highlightsJustify"
-          :highlight-title-baseline="highlightTitleBaseline"
-          :style-class-passthrough="['mbe-32']"
-        >
-          <template #header="{ headingId }">
-            <PageHeroHighlightsHeader>
-              <template #start>
-                <h1 :id="headingId" class="page-heading-1">Dashboard</h1>
-                <p class="page-body-normal">Overview of your account activity and key metrics.</p>
-              </template>
-              <template #end>
-                <h1 :id="headingId" class="page-heading-1">Dashboard</h1>
-                <p class="page-body-normal">Overview of your account activity and key metrics.</p>
-              </template>
-            </PageHeroHighlightsHeader>
-          </template>
-          <template #highlights>
-            <div class="highlight">
-              <div class="title"><h3 class="page-heading-3 m-0">Key Metrics</h3></div>
-              <div class="body">
-                <p class="page-body-normal">Your most important stats at a glance.</p>
-                <p class="page-body-normal">Your most important stats at a glance.</p>
-              </div>
-            </div>
-          </template>
-          <template #content>
-            <div class="some-class">
-              <p class="page-heading-2">Recent Activity</p>
-              <p class="page-body-normal">Your most recent transactions and events will appear here.</p>
-            </div>
-
-            <div class="demo-controls">
-              <p class="demo-controls__heading">Props</p>
-              <div class="demo-controls__toggles">
-                <ToggleSwitchWithLabelInline
-                  v-model="widthConstrained"
-                  name="widthConstrained"
-                  label="widthConstrained"
-                />
-                <ToggleSwitchWithLabelInline v-model="contentPanel" name="contentPanel" label="contentPanel" />
-                <ToggleSwitchWithLabelInline
-                  v-model="highlightsEqualWidths"
-                  name="highlightsEqualWidths"
-                  label="highlightsEqualWidths"
-                />
-                <ToggleSwitchWithLabelInline
-                  v-model="highlightTitleBaseline"
-                  name="highlightTitleBaseline"
-                  label="highlightTitleBaseline"
-                />
-              </div>
-              <div class="demo-controls__selects">
-                <MultipleRadiobuttons
-                  v-model="contentAlign"
-                  v-model:field-data="contentAlignData"
-                  name="contentAlign"
-                  legend="contentAlign"
-                  label="contentAlign"
-                  error-message=""
-                  :is-button="true"
-                  :is-pill="true"
-                  :field-has-error="false"
-                  options-layout="inline"
-                />
-                <MultipleRadiobuttons
-                  v-model="highlightsJustify"
-                  v-model:field-data="highlightsJustifyData"
-                  name="highlightsJustify"
-                  legend="highlightsJustify"
-                  label="highlightsJustify"
-                  error-message=""
-                  :is-button="true"
-                  :is-pill="true"
-                  :field-has-error="false"
-                  options-layout="inline"
-                />
-              </div>
-            </div>
-          </template>
-        </PageHeroHighlights>
-      </template>
-    </NuxtLayout>
-  </div>
-</template>
-
-<script setup lang="ts">
-import type { IFormMultipleOptions } from "~/types/forms/types.forms";
-
-definePageMeta({
-  layout: false,
-});
-
-useHead({
-  title: "Page Hero Highlights",
-  meta: [
-    {
-      name: "description",
-      content: "Page Hero Highlights Meta description content",
-    },
-  ],
-  bodyAttrs: {
-    class: "page-hero-highlights-page",
-  },
-});
-
-const widthConstrained = ref(false);
-const contentAlign = ref<"start" | "center">("start");
-const contentPanel = ref(true);
-const highlightsEqualWidths = ref(false);
-const highlightsJustify = ref<"start" | "center" | "end" | "space-between" | "space-around">("start");
-const highlightTitleBaseline = ref(true);
-
-const contentAlignData = ref<IFormMultipleOptions>({
-  data: [
-    { id: "align-start", name: "contentAlign", value: "start", label: "start" },
-    { id: "align-center", name: "contentAlign", value: "center", label: "center" },
-  ],
-  total: 2,
-  skip: 0,
-  limit: 2,
-});
-
-const highlightsJustifyData = ref<IFormMultipleOptions>({
-  data: [
-    { id: "justify-start", name: "highlightsJustify", value: "start", label: "start" },
-    { id: "justify-center", name: "highlightsJustify", value: "center", label: "center" },
-    { id: "justify-end", name: "highlightsJustify", value: "end", label: "end" },
-    { id: "justify-space-between", name: "highlightsJustify", value: "space-between", label: "space-between" },
-    { id: "justify-space-around", name: "highlightsJustify", value: "space-around", label: "space-around" },
-  ],
-  total: 5,
-  skip: 0,
-  limit: 5,
-});
-</script>
-
-<style lang="css">
-.page-hero-highlights-page {
-  .page-hero-highlights {
-    /* Layout tokens */
-    --max-width: 1064px;
-    --page-hero-highlights-gutter-mobile: 16px;
-    --page-hero-highlights-gutter-tablet: 40px;
-    --page-hero-highlights-gutter-desktop: 32px;
-
-    .page-hero-highlights-header {
-      /* User themable tokens */
-      --phh-padding-block-mobile: 1.6rem 6rem;
-      --phh-padding-block-tablet: 2.4rem 6rem;
-      --phh-padding-block-desktop: 4.2rem 7.4rem;
-    }
-
-    .content-row {
-      .content-slot {
-        color: black;
-
-        .some-class {
-          padding-block-end: 2.4rem;
-        }
-      }
-    }
-  }
-
-  .demo-controls {
-    margin-block-start: 2.4rem;
-    padding: 1.6rem;
-    border: 1px solid var(--slate-06);
-    border-radius: 0.8rem;
-    background: var(--slate-01);
-
-    .demo-controls__heading {
-      font-size: 1.1rem;
-      font-weight: 600;
-      text-transform: uppercase;
-      letter-spacing: 0.08em;
-      color: var(--slate-08);
-      margin-block-end: 1.2rem;
-    }
-
-    .demo-controls__toggles {
-      display: flex;
-      flex-wrap: wrap;
-      gap: 0.4rem 2.4rem;
-      margin-block-end: 1.6rem;
-    }
-
-    .demo-controls__selects {
-      display: flex;
-      flex-direction: column;
-      gap: 0.8rem;
-    }
-  }
-}
-</style>