srcdev-nuxt-components 9.0.15 → 9.0.17

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

@@ -0,0 +1,81 @@
+<template>
+  <div>
+    <NuxtLayout name="default">
+      <template #layout-content>
+        <PageHeroHighlights
+          max-width="1064px"
+          content-align="start"
+          :highlights-equal-widths="false"
+          highlights-justify="start"
+          :highlight-title-baseline="true"
+          :style-class-passthrough="['mbe-32']"
+        >
+          <template #header>
+            <div class="some-header-content">
+              <p class="page-heading-1">Dashboard</p>
+              <p class="page-body-normal">Overview of your account activity and key metrics.</p>
+            </div>
+          </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>
+          </template>
+        </PageHeroHighlights>
+      </template>
+    </NuxtLayout>
+  </div>
+</template>
+
+<script setup lang="ts">
+definePageMeta({
+  layout: false,
+});
+
+useHead({
+  title: "Page Hero Highlights",
+  meta: [
+    {
+      name: "description",
+      content: "Page Hero Highlights Meta description content",
+    },
+  ],
+  bodyAttrs: {
+    class: "page-hero-highlights-page",
+  },
+});
+</script>
+
+<style lang="css">
+.page-hero-highlights-page {
+  .page-hero-highlights {
+    .header-row {
+      .header-slot {
+        .some-header-content {
+          padding-block: 4rem 3rem;
+        }
+      }
+    }
+
+    .content-row {
+      .content-slot {
+        color: black;
+
+        .some-class {
+          min-height: 40svh;
+        }
+      }
+    }
+  }
+}
+</style>

package/app/pages/ui/{display-card.vue → card-core.vue}

@@ -3,11 +3,11 @@
     <NuxtLayout name="default">
       <template #layout-content>
         <LayoutRow tag="div" variant="full-width" :style-class-passthrough="['mbe-20']">
-          <h1 class="page-heading-1">DisplayCard Component</h1>
+          <h1 class="page-heading-1">CardCore Component</h1>
           <form class="mb-12">
             <div>
               <label for="variant" class="form-label mie-12">Variant:</label>
-              <select id="variant" v-model="displayCardVariant" class="form-select">
+              <select id="variant" v-model="cardCoreVariant" class="form-select">
                 <option value="solid">Solid</option>
                 <option value="subtle">Subtle</option>
                 <option value="soft">Soft</option>
@@ -26,19 +26,19 @@
         </LayoutRow>
 
         <LayoutRow tag="div" variant="inset-content" :style-class-passthrough="['mbe-20']">
-          <DisplayCard :variant="displayCardVariant" :has-dividers="hasDividers" :no-outline="noOutline">
+          <CardCore :variant="cardCoreVariant" :has-dividers="hasDividers" :no-outline="noOutline">
             <template #header>
-              <h2 class="page-heading-2">DisplayCard Header</h2>
+              <h2 class="page-heading-2">CardCore Header</h2>
             </template>
-            <template #default>
-              <h3 class="page-heading-3">DisplayCard Content</h3>
-              <p class="page-body-normal">This is default slot content for the DisplayCard component.</p>
+            <template #content>
+              <h3 class="page-heading-3">CardCore Content</h3>
+              <p class="page-body-normal">This is default slot content for the CardCore component.</p>
               <p class="page-body-normal">As it's a slot, any html content can be placed here.</p>
             </template>
             <template #footer>
-              <p class="page-body-small">DisplayCard Footer</p>
+              <p class="page-body-small">CardCore Footer</p>
             </template>
-          </DisplayCard>
+          </CardCore>
         </LayoutRow>
       </template>
     </NuxtLayout>
@@ -51,32 +51,32 @@ definePageMeta({
 })
 
 useHead({
-  title: "DisplayCard Component",
+  title: "CardCore Component",
   meta: [
     {
       name: "description",
-      content: "DisplayCard Component description content",
+      content: "CardCore Component description content",
     },
   ],
   bodyAttrs: {
-    class: "display-card-page",
+    class: "card-core-page",
   },
 })
 
-const displayCardVariant = ref("solid")
+const cardCoreVariant = ref("solid")
 const hasDividers = ref(false)
 const noOutline = ref(false)
 </script>
 
 <style lang="css">
-.display-card-page {
+.card-core-page {
   form {
     display: flex;
     gap: 2rem;
     flex-wrap: wrap;
     margin-bottom: 2rem;
   }
-  .display-card {
+  .card-core {
   }
 }
 </style>

package/app/pages/ui/contact-section.vue

@@ -7,7 +7,7 @@
         </LayoutRow>
 
         <LayoutRow tag="div" variant="content" :style-class-passthrough="['mbe-20']">
-          <ContactSection tag="section" :style-class-passthrough="['mbe-20']">
+          <ContactSection tag="section" stepper-indicator-size="2.4rem" :style-class-passthrough="['mbe-20']">
             <template #indicator-0>
               <Icon name="lucide-map-pin" class="indicator-icon" />
             </template>

package/app/pages/ui/container-glow.vue

@@ -7,7 +7,7 @@
           <p>Glow will track mouse position</p>
 
           <ContainerGlowCore
-            :item-count="data.length"
+            
             tag="div"
             :style-class-passthrough="['class-scope', 'pbe-20']"
             :config="{

package/app/pages/ui/content-width.vue

@@ -0,0 +1,126 @@
+<template>
+  <div>
+    <NuxtLayout name="default">
+      <template #layout-content>
+        <ContentWidth tag="div" :style-class-passthrough="['mbe-20']">
+          <h1 class="page-heading-2 mbe-18">Content Width</h1>
+          <p class="page-body-normal-semibold">
+            Small screens:
+            <code class="page-body-normal">--content-max-width: auto;</code>
+          </p>
+          <p class="page-body-normal-semibold">
+            >= Laptop screens:
+            <code class="page-body-normal">--content-max-width: 1064px;</code>
+          </p>
+        </ContentWidth>
+
+        <ContentWidth tag="div" :justify-content="'start'" :style-class-passthrough="['mbe-20']">
+          <h2 class="page-heading-2 mbe-18">Sample content (start)</h2>
+          <p class="page-body-normal">
+            Lorem ipsum odor amet, consectetuer adipiscing elit. Nec elementum maecenas placerat laoreet curae elit
+            convallis himenaeos. Tellus varius cursus convallis commodo suspendisse litora. Platea accumsan interdum
+            ultrices adipiscing molestie cras dui. Vehicula egestas nisi sagittis fames metus velit. Sodales blandit
+            nisi eu dis sit, ridiculus aliquam. Morbi tellus eu in penatibus torquent tortor. Platea gravida nam;
+            egestas enim nostra ultricies.
+          </p>
+          <p class="page-body-normal">
+            Mi nibh quisque taciti porta curabitur nostra volutpat. Habitant sodales arcu habitasse mi duis conubia leo
+            lacinia. Montes torquent sodales adipiscing; proin semper feugiat morbi ullamcorper praesent. Arcu luctus
+            tempor quam ligula vestibulum sapien faucibus ridiculus. Cursus consequat ultricies consectetur class
+            suscipit quisque convallis eget? Dignissim mattis luctus enim habitant porta pretium litora. Parturient
+            montes imperdiet massa; sollicitudin varius hac aptent. Eleifend parturient mattis tellus nisi a montes.
+          </p>
+        </ContentWidth>
+
+        <ContentWidth tag="div" :style-class-passthrough="['mbe-20']">
+          <h2 class="page-heading-2 mbe-18">Sample Column content (center/default)</h2>
+
+          <LayoutGridByCols :column-count="2">
+            <template #item-0>
+              <div>
+                <h3 class="page-heading-3 mbe-12">Column 1</h3>
+                <p class="page-body-normal">
+                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum
+                  mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit. Donec et mollis dolor.
+                  Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta
+                  lorem lacinia consectetur. Donec ut libero sed arcu vehicula ultricies a non tortor. Lorem ipsum dolor
+                  sit amet, consectetur adipiscing elit.
+                </p>
+              </div>
+            </template>
+            <template #item-1>
+              <div>
+                <h3 class="page-heading-3 mbe-12">Column 2</h3>
+                <p class="page-body-normal">
+                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum
+                  mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit. Donec et mollis dolor.
+                  Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta
+                  lorem lacinia consectetur. Donec ut libero sed arcu vehicula ultricies a non tortor. Lorem ipsum dolor
+                  sit amet, consectetur adipiscing elit.
+                </p>
+              </div>
+            </template>
+          </LayoutGridByCols>
+        </ContentWidth>
+
+        <ContentWidth tag="div" :justify-content="'end'" :style-class-passthrough="['mbe-20']">
+          <h2 class="page-heading-2 mbe-18">Sample content (end)</h2>
+          <p class="page-body-normal">
+            Lorem ipsum odor amet, consectetuer adipiscing elit. Nec elementum maecenas placerat laoreet curae elit
+            convallis himenaeos. Tellus varius cursus convallis commodo suspendisse litora. Platea accumsan interdum
+            ultrices adipiscing molestie cras dui. Vehicula egestas nisi sagittis fames metus velit. Sodales blandit
+            nisi eu dis sit, ridiculus aliquam. Morbi tellus eu in penatibus torquent tortor. Platea gravida nam;
+            egestas enim nostra ultricies.
+          </p>
+          <p class="page-body-normal">
+            Mi nibh quisque taciti porta curabitur nostra volutpat. Habitant sodales arcu habitasse mi duis conubia leo
+            lacinia. Montes torquent sodales adipiscing; proin semper feugiat morbi ullamcorper praesent. Arcu luctus
+            tempor quam ligula vestibulum sapien faucibus ridiculus. Cursus consequat ultricies consectetur class
+            suscipit quisque convallis eget? Dignissim mattis luctus enim habitant porta pretium litora. Parturient
+            montes imperdiet massa; sollicitudin varius hac aptent. Eleifend parturient mattis tellus nisi a montes.
+          </p>
+        </ContentWidth>
+      </template>
+    </NuxtLayout>
+  </div>
+</template>
+
+<script setup lang="ts">
+definePageMeta({
+  layout: false,
+});
+
+useHead({
+  title: "UI Content Width",
+  meta: [{ name: "description", content: "Examples of UI Component Content Width" }],
+  bodyAttrs: {
+    class: "content-width-page",
+  },
+});
+</script>
+
+<style lang="css">
+.content-width-page {
+  .layout-grid-by-cols {
+    .layout-grid-inner {
+      > * {
+        outline: 1px solid green;
+      }
+
+      @container layoutGrid (width >= 768px) {
+        > * {
+          outline: 1px solid purple;
+        }
+      }
+    }
+  }
+}
+
+.content-width-wrapper {
+  .content-width {
+    .content-width-inner {
+      outline: 1px solid orange;
+    }
+  }
+}
+</style>

package/app/pages/ui/glowing-border.vue

@@ -19,7 +19,7 @@
           <form class="mb-12">
             <div>
               <label for="variant" class="form-label mie-12">Variant:</label>
-              <select id="variant" v-model="displayCardVariant" class="form-select">
+              <select id="variant" v-model="cardCoreVariant" class="form-select">
                 <option value="solid">Solid</option>
                 <option value="subtle">Subtle</option>
                 <option value="soft">Soft</option>
@@ -55,19 +55,19 @@
           <h2 class="page-heading-2">Default</h2>
 
           <GlowingBorder :variant="glowingBorderVariant" :style-class-passthrough="['mbe-20']">
-            <DisplayCard :variant="displayCardVariant" :has-dividers :no-outline>
+            <CardCore :variant="cardCoreVariant" :has-dividers :no-outline>
               <template #header>
-                <h2 class="page-heading-2">DisplayCard Header</h2>
+                <h2 class="page-heading-2">CardCore Header</h2>
               </template>
-              <template #default>
-                <h3 class="page-heading-3">DisplayCard Content</h3>
-                <p class="page-body-normal">This is default slot content for the DisplayCard component.</p>
+              <template #content>
+                <h3 class="page-heading-3">CardCore Content</h3>
+                <p class="page-body-normal">This is default slot content for the CardCore component.</p>
                 <p class="page-body-normal">As it's a slot, any html content can be placed here.</p>
               </template>
               <template #footer>
-                <p class="page-body-small">DisplayCard Footer</p>
+                <p class="page-body-small">CardCore Footer</p>
               </template>
-            </DisplayCard>
+            </CardCore>
           </GlowingBorder>
         </LayoutRow>
       </template>
@@ -94,7 +94,7 @@ useHead({
 })
 
 const glowingBorderVariant = ref("vivid")
-const displayCardVariant = ref("solid")
+const cardCoreVariant = ref<"outline" | "solid" | "subtle" | "soft">("solid")
 const hasDividers = ref(false)
 const noOutline = ref(false)
 </script>